:root{--sage:#778873;--sage2:#A1BC98;--sand:#DCCFC0;--cream:#FDF6ED;--ink:#2F3A2C;--muted:#5f6b5b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.65 Inter,system-ui,sans-serif}
a{color:inherit}.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,.logo,.grp__l{font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:-.01em}
.top{border-bottom:1px solid var(--sand);background:var(--cream);position:sticky;top:0;z-index:5}
.top__in{display:flex;align-items:center;justify-content:space-between;height:68px}.logo{font-size:28px;text-decoration:none}.logo em{color:var(--sage);font-style:italic}
.tag{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hero{background:linear-gradient(180deg,var(--cream),#f3eadf);padding:64px 0 40px;border-bottom:1px solid var(--sand)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--sage);font-weight:600;margin:0 0 12px}
.hero h1{font-size:clamp(36px,5.5vw,68px);line-height:1.05;margin:0 0 18px;max-width:900px}.hero h1 em,.art h1 em{color:var(--sage);font-style:italic}
.lead{font-size:19px;color:var(--muted);max-width:720px;margin:0 0 28px}
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.search{flex:1 1 360px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sand);border-radius:999px;padding:12px 20px;color:var(--sage)}
.search input{border:0;outline:0;font:inherit;width:100%;background:none;color:var(--ink)}
.tabs{display:flex;background:#fff;border:1px solid var(--sand);border-radius:999px;padding:4px}
.tabs button{border:0;background:none;font:500 15px Inter;padding:10px 20px;border-radius:999px;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--sage);color:#fff}
.az{display:flex;flex-wrap:wrap;gap:4px;margin:28px 0 8px}.az a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;text-decoration:none;font-weight:600;color:var(--sage);font-size:14px}.az a:hover{background:var(--sand)}
.list{columns:3 300px;column-gap:40px;padding-bottom:60px}.grp{break-inside:avoid;margin:18px 0 10px;scroll-margin-top:90px}
.grp__l{font-size:40px;color:var(--sage2);margin:0 0 4px;border-bottom:1px solid var(--sand)}
.grp ul{list-style:none;margin:0;padding:0}.grp li a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--sand);text-decoration:none}
.grp li a:hover .n{color:var(--sage)}.n{font-weight:500}.m{font-size:13px;color:var(--muted);white-space:nowrap}
#empty{padding:40px 0;color:var(--muted)}
.art{padding:28px 20px 60px}.crumbs{font-size:14px;color:var(--muted);margin-bottom:28px}.crumbs a{color:var(--sage)}
.art h1{font-size:clamp(44px,7vw,84px);line-height:1;margin:0 0 16px}.art__h{max-width:820px}
.hero-img{margin:30px 0 40px}.hero-img img{width:100%;height:auto;border-radius:22px;display:block;aspect-ratio:16/9;object-fit:cover}
.art__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px}.txt h2{font-size:32px;line-height:1.2;margin:36px 0 10px}.txt p{margin:0 0 16px}
.side{display:flex;flex-direction:column;gap:22px}.card{background:#fff;border:1px solid var(--sand);border-radius:18px;padding:22px;margin:0;position:sticky;top:90px}
.card div{padding:10px 0;border-bottom:1px solid var(--cream)}.card dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--sage)}.card dd{margin:2px 0 0;font-weight:500}
.facts{background:var(--sage);color:#fff;border-radius:18px;padding:22px 24px}.facts h2{margin:0 0 10px;font-size:28px}.facts ul{margin:0;padding-left:18px}.facts li{margin:8px 0;font-size:15px}
.rel{margin-top:60px;border-top:1px solid var(--sand);padding-top:24px}.rel h2{font-size:30px}.rel__l{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}.rel__l a{background:#fff;border:1px solid var(--sand);border-radius:999px;padding:8px 16px;text-decoration:none}.rel__l a:hover{border-color:var(--sage)}
.btn{display:inline-block;background:var(--sage);color:#fff;text-decoration:none;padding:12px 22px;border-radius:999px}
.foot{background:var(--sage);color:#eef2ea;padding:36px 0;font-size:14px}.foot .logo{color:#fff}.foot .logo em{color:var(--sand)}
@media(max-width:900px){.art__grid{grid-template-columns:1fr}.card{position:static}.tag{display:none}}
@media(max-width:600px){.tabs{width:100%}.tabs button{flex:1;padding:10px 6px}.hero{padding:40px 0 28px}}
/* v2 – palette-rich homepage */
.top{background:var(--sage);border-bottom:0}.top .logo{color:var(--cream)}.top .logo em{color:var(--sand)}.top .tag{color:#e9eee4}
.hero{position:relative;overflow:hidden;background:var(--sage);color:var(--cream);border-bottom:0;padding:72px 0 56px}
.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--sage2);opacity:.55;right:-140px;top:-180px}
.hero:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--sand);opacity:.45;right:180px;bottom:-190px}
.hero .wrap{position:relative;z-index:1}.hero .eyebrow{color:var(--sand)}.hero h1{color:var(--cream)}.hero h1 em{color:var(--sand)}.hero .lead{color:#eef1ea}
.search{border-color:transparent;box-shadow:0 10px 30px rgba(47,58,44,.18)}
.tabs{background:rgba(253,246,237,.18);border-color:rgba(253,246,237,.35)}.tabs button{color:var(--cream)}.tabs button.on{background:var(--cream);color:var(--ink)}
.azbar{background:var(--sage2)}.az{margin:0;padding:14px 0}.az a{color:#2f3a2c}.az a:hover{background:var(--cream)}
.listbg{background:var(--sand);padding:30px 0 70px}
.list{columns:3 300px;column-gap:26px;padding-bottom:0}
.grp{background:var(--cream);border-radius:20px;padding:18px 22px 8px;margin:0 0 26px;display:inline-block;width:100%}
.grp__l{color:var(--sage);border-bottom:2px solid var(--sage2);font-size:38px}
.grp li a{border-bottom:1px dashed var(--sand)}.grp li:last-child a{border-bottom:0}
.foot{background:var(--sage)}
.art .crumbs a{color:var(--sage)}
@media(max-width:600px){.hero:before{width:300px;height:300px;right:-170px;top:-150px}.hero:after{width:200px;height:200px;right:-60px;bottom:-150px;left:auto}}
/* v3 – animated sketch hero */
.hero:before,.hero:after{display:none}
.hero{padding:64px 0 64px}
.hero h1{max-width:640px}.hero .lead{max-width:540px}.hero .tools{max-width:620px}.hero .search{flex-basis:100%}
.sketches{position:absolute;right:max(20px,calc((100vw - 1180px)/2 + 20px));top:50%;transform:translateY(-50%);display:flex;gap:18px;z-index:0;pointer-events:none}
.sketch{width:150px;aspect-ratio:234/602;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(30,40,28,.28);opacity:0;transform:translateY(40px) rotate(0);animation:skIn 1.1s cubic-bezier(.2,.8,.2,1) forwards,skFloat 7s ease-in-out infinite}
.sketch img{width:100%;height:100%;object-fit:cover;display:block;animation:skZoom 14s ease-in-out infinite alternate}
.sketch:nth-child(1){animation-delay:.15s,1.3s;--r:-2deg}.sketch:nth-child(2){animation-delay:.35s,1.8s;--r:1.5deg;margin-top:-40px}.sketch:nth-child(3){animation-delay:.55s,2.3s;--r:-1deg;margin-top:30px}
@keyframes skIn{to{opacity:1;transform:translateY(0) rotate(var(--r))}}
@keyframes skFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes skZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero .wrap{position:relative;z-index:1}
@media(max-width:1180px){.sketch{width:120px}}
@media(max-width:980px){.sketches{position:static;transform:none;justify-content:center;margin:34px 0 0}.sketch{width:96px}.sketch:nth-child(2){margin-top:-16px}.sketch:nth-child(3){margin-top:12px}}
@media (prefers-reduced-motion:reduce){.sketch,.sketch img{animation:none;opacity:1;transform:none}}

/* v4 – floating ink drops & pencil strokes (like milanpolak.cz) */
.sketch{animation:skIn 1.1s cubic-bezier(.2,.8,.2,1) forwards}.sketch img{animation:none}
.mzfx{position:absolute;inset:0;z-index:2;pointer-events:none;transition:transform .6s ease-out}
.mzfx i{position:absolute;border-radius:50%;opacity:.85;will-change:transform}
.mzfx i:nth-child(4n){border-radius:60% 40% 55% 45%/50% 60% 40% 50%}
.pen{position:absolute;overflow:visible;transform:rotate(var(--r));animation:penFloat 9s ease-in-out infinite alternate;opacity:.9}
.pen path{stroke-dasharray:160;stroke-dashoffset:160;animation:penDraw 2.6s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes penDraw{to{stroke-dashoffset:0}}
@keyframes penFloat{0%{translate:0 0}50%{translate:10px -14px}100%{translate:-8px 8px}}
@keyframes mzA{from{transform:translate(0,0)}to{transform:translate(14px,-22px)}}
@keyframes mzB{from{transform:translate(0,0) scale(1)}to{transform:translate(-18px,12px) scale(1.25)}}
@keyframes mzC{from{transform:translate(0,0)}to{transform:translate(8px,18px)}}
@media(max-width:980px){.mzfx i:nth-child(n+11),.pen:nth-of-type(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.mzfx i,.pen,.pen path{animation:none;stroke-dashoffset:0}}
@media(max-width:980px){.mzfx{top:auto;bottom:0;height:300px}}
/* v5 – sketches appear as if drawn with a pencil */
.sketch{position:relative;background:#FBF8F2;opacity:1;animation:skIn .5s ease-out forwards}
.sketch .ln,.sketch .cl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sketch .ln{mix-blend-mode:multiply;clip-path:inset(0 0 100% 0);animation:draw 2.6s cubic-bezier(.45,.05,.3,1) forwards}
.sketch .cl{opacity:0;animation:colorIn 1.4s ease forwards}
.sketch .pencil{position:absolute;left:0;top:0;width:34px;height:34px;opacity:0;animation:pencilMove 2.6s cubic-bezier(.45,.05,.3,1) forwards;z-index:2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.sketch:nth-child(1) .ln,.sketch:nth-child(1) .pencil{animation-delay:.3s}.sketch:nth-child(1) .cl{animation-delay:2.9s}
.sketch:nth-child(2) .ln,.sketch:nth-child(2) .pencil{animation-delay:1.3s}.sketch:nth-child(2) .cl{animation-delay:3.9s}
.sketch:nth-child(3) .ln,.sketch:nth-child(3) .pencil{animation-delay:2.3s}.sketch:nth-child(3) .cl{animation-delay:4.9s}
@keyframes draw{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes colorIn{to{opacity:1}}
@keyframes pencilMove{0%{opacity:1;transform:translate(20%,-10%)}12%{transform:translate(260%,40%)}25%{transform:translate(30%,120%)}37%{transform:translate(280%,180%)}50%{transform:translate(40%,260%)}62%{transform:translate(270%,330%)}75%{transform:translate(50%,400%)}88%{transform:translate(260%,470%);opacity:1}100%{transform:translate(150%,520%);opacity:0}}
@media (prefers-reduced-motion:reduce){.sketch .ln,.sketch .cl,.sketch .pencil{animation:none;clip-path:none;opacity:1}.sketch .pencil{display:none}}
/* v6 fixes */
.card{position:static}
.country{display:flex;align-items:center;gap:10px;background:rgba(253,246,237,.18);border:1px solid rgba(253,246,237,.35);border-radius:999px;padding:4px 6px 4px 18px;color:var(--cream);font-size:14px}
.country select{font:500 15px Inter;border:0;border-radius:999px;padding:9px 14px;background:var(--cream);color:var(--ink);cursor:pointer}
@media(max-width:600px){.country{width:100%;justify-content:space-between}.country select{flex:1}}
.sketch .ln,.sketch .pencil{animation-duration:1.3s!important}
.sketch .cl{animation-duration:.7s!important}
.sketch:nth-child(1) .ln,.sketch:nth-child(1) .pencil{animation-delay:.15s!important}.sketch:nth-child(1) .cl{animation-delay:1.45s!important}
.sketch:nth-child(2) .ln,.sketch:nth-child(2) .pencil{animation-delay:.55s!important}.sketch:nth-child(2) .cl{animation-delay:1.85s!important}
.sketch:nth-child(3) .ln,.sketch:nth-child(3) .pencil{animation-delay:.95s!important}.sketch:nth-child(3) .cl{animation-delay:2.25s!important}
.grp[hidden],.grp li[hidden]{display:none!important}
/* v7 – livelier idle motion after drawing */
.sketch{animation:skIn .5s ease-out forwards,skSway 5.5s ease-in-out 2.6s infinite alternate}
.sketch:nth-child(2){animation-duration:.5s,6.5s;animation-delay:0s,2.9s}
.sketch:nth-child(3){animation-duration:.5s,4.8s;animation-delay:0s,3.2s}
@keyframes skSway{0%{translate:0 0;rotate:0deg}35%{translate:6px -18px;rotate:1.6deg}70%{translate:-5px -6px;rotate:-1.4deg}100%{translate:3px -22px;rotate:.8deg}}
@media (prefers-reduced-motion:reduce){.sketch{animation:none}}
/* v8 – custom country dropdown */
.country{display:none}
.cdd{position:relative}
.cdd__btn{display:flex;align-items:center;gap:10px;font:500 15px Inter;color:var(--cream);background:rgba(253,246,237,.18);border:1px solid rgba(253,246,237,.35);border-radius:999px;padding:6px 16px 6px 18px;height:48px;cursor:pointer;transition:background .2s}
.cdd__btn:hover{background:rgba(253,246,237,.28)}
.cdd__lbl{opacity:.85;font-weight:400}.cdd__val{background:var(--cream);color:var(--ink);border-radius:999px;padding:7px 14px}
.cdd.set .cdd__val{background:var(--sand)}
.cdd__btn svg{transition:transform .25s}.cdd.open .cdd__btn svg{transform:rotate(180deg)}
.cdd__panel{position:absolute;z-index:20;top:calc(100% + 10px);left:0;width:min(560px,92vw);background:var(--cream);border-radius:22px;padding:14px;box-shadow:0 24px 60px rgba(30,40,28,.28);display:grid;grid-template-columns:repeat(2,1fr);gap:6px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s ease}
.cdd.open .cdd__panel{opacity:1;visibility:visible;transform:none}
.cdd__opt{display:flex;align-items:center;gap:8px;font:500 15px Inter;color:var(--ink);background:none;border:0;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left}
.cdd__opt b{margin-left:auto;font-weight:600;font-size:12px;color:var(--sage);background:#fff;border:1px solid var(--sand);border-radius:999px;padding:2px 9px}
.cdd__opt:hover{background:#fff}.cdd__opt.on{background:var(--sage);color:#fff}.cdd__opt.on b{background:var(--sage2);border-color:transparent;color:#fff}
.cdd__opt:first-child{grid-column:1/-1;border-bottom:1px solid var(--sand);border-radius:12px 12px 0 0;margin-bottom:4px}
@media(max-width:600px){.cdd{width:100%}.cdd__btn{width:100%;justify-content:space-between}.cdd__panel{width:100%;max-height:60vh;overflow:auto}}
.hero{overflow:visible;z-index:4}.mzfx{overflow:hidden}.hero .wrap{z-index:5}
/* SEO blocks */
.txt a{color:var(--sage);text-decoration-color:var(--sage2);text-underline-offset:3px}
.qa{margin-top:40px}.qa details{background:#fff;border:1px solid var(--sand);border-radius:14px;padding:14px 18px;margin:10px 0}.qa summary{cursor:pointer;font-weight:600}.qa details p{margin:10px 0 0}
.src{font-size:13px;color:var(--muted);margin-top:26px}.src a{color:var(--muted)}
.fm{margin-top:50px;background:var(--sand);border-radius:20px;padding:24px 28px}.fm h2{font-size:28px;margin:0 0 10px}.fm ul{margin:0;padding-left:18px}.fm li{margin:6px 0}.fm a{color:var(--ink)}