/* ——— Písma (vlastní hosting, SIL OFL, licence ve fonts/) ———
   Archivo variabilní (šířka 62–125, tloušťka 100–900), Fraunces jen kurzíva (opsz 9–144, tloušťka 300–700).
   Sady latin + latin-ext pokrývají češtinu. */
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../fonts/fraunces-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ——— Tokens: hollywoodský color grade, teal ve stínech, amber ve světlech ——— */
:root{
  --night:#041216; --abyss:#0A1E25; --tide:#133440; --moon:#E9F1F0; --mist:#94AAAE;
  --amber:#FFB25E; --amber-ink:#1B0F03; --line:rgba(233,241,240,.12);
  --g:clamp(18px,4vw,60px);
  --sec:clamp(64px,7vw,128px);
  /* Šířka a výška okna v jednotkách stránky; při zoomu na velkých displejích je přepočítá skript v <head> */
  --vw:100vw;--vh:100svh;
  --ff:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fc:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --fs:"Fraunces",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
section:focus,main:focus,article:focus{outline:none}
html{background:var(--night);scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock,html.lock body{overflow:hidden}
body{margin:0 auto;max-width:var(--vw);background:var(--night);color:var(--moon);font-family:var(--ff);font-size:16px;line-height:1.5;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--amber);color:var(--amber-ink);padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:700}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
svg{flex:none}

/* ——— Title art: jedna rodina písma, tři polohy ——— */
.tt{margin:0;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);line-height:.9;text-wrap:balance}
.tt small{display:block;font-family:var(--ff);font-style:normal;font-weight:500;font-variation-settings:"wdth" 100;font-size:max(10px,.3em);letter-spacing:.02em;line-height:1.25;margin-top:.5em;text-transform:none;opacity:.9}
.t-cond{font-family:var(--fc);font-weight:850;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.004em;--fz:13}
.t-wide{font-family:var(--ff);font-weight:330;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.11em;line-height:1.04;--fz:7.4}
.t-serif{font-family:var(--fs);font-style:italic;font-weight:420;font-variation-settings:"opsz" 144;letter-spacing:-.018em;line-height:.94;--fz:11.5}
.t-wide small,.t-cond small{letter-spacing:.03em}

/* ——— Navigace ——— */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,rgba(4,18,22,.82),rgba(4,18,22,0));transition:background-color .35s,box-shadow .35s}
.nav.solid{background:rgba(4,18,22,.88);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav-in{max-width:var(--vw);margin:0 auto;height:68px;padding:0 var(--g);display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.brand{text-decoration:none;font-family:var(--fc);font-weight:850;font-size:22px;font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;line-height:1}
.links{display:flex;gap:clamp(14px,1.7vw,26px)}
.links a{text-decoration:none;color:var(--mist);font-size:14.5px;font-weight:500;transition:color .2s}
.links a:hover{color:var(--moon)}
.links a[aria-current="true"]{color:var(--moon);font-weight:650}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--moon);cursor:pointer;transition:background-color .2s}
.icon-btn:hover{background:rgba(233,241,240,.1)}
@media (max-width:980px){.links{display:none}}
@media (max-width:640px){.nav-in{height:58px}.brand{font-size:20px}}
/* Přepínač jazyka: zavřený zkratka a šipka (EN ▾), otevřený seznam jazyků jejich vlastními názvy, aktuální jantarově s tečkou. Nativní <details>. */
.lang{position:relative;font-size:14px;line-height:1}
.lang summary{display:flex;align-items:center;gap:6px;height:36px;padding:0 8px 0 10px;border-radius:6px;list-style:none;cursor:pointer;color:var(--moon);font-weight:600;letter-spacing:.04em;-webkit-user-select:none;user-select:none;transition:background-color .2s}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:rgba(233,241,240,.08)}
.lang summary svg{opacity:.75;transition:transform .2s}
.lang details[open] summary svg{transform:rotate(180deg)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:184px;margin:0;padding:6px;list-style:none;background:rgba(10,30,37,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px var(--line)}
.lang li a,.lang li span{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;font-size:15px;font-weight:500;letter-spacing:0;line-height:1.2;color:rgba(233,241,240,.86);text-decoration:none;white-space:nowrap}
.lang li b{flex:none;width:22px;font-size:11.5px;font-weight:650;letter-spacing:.06em;color:var(--mist)}
.lang li a:hover{background:rgba(233,241,240,.08);color:var(--moon)}
.lang li [aria-current]{color:var(--amber);font-weight:650}
.lang li [aria-current] b{color:var(--amber)}
.lang li [aria-current]::after{content:"";flex:none;width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,178,94,.18)}

/* ——— Spodní lišta na mobilu ——— */
.tabbar{display:none}
@media (max-width:980px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(4,18,22,.985);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:11px;font-weight:500;color:var(--mist);text-decoration:none}
  .tabbar a[aria-current="true"]{color:var(--moon)}
  .tabbar a[aria-current="true"] svg,.tabbar a[aria-current="true"] .wmark{color:var(--amber)}
  body{padding-bottom:62px}
}

/* ——— Tlačítka ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px 0 18px;border-radius:6px;font-weight:650;font-size:16.5px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .2s}
.btn:active{transform:scale(.97)}
.btn-play{background:var(--moon);color:var(--night)}
.btn-play:hover{background:#fff}
.btn-info{background:rgba(148,170,174,.3);color:var(--moon);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-info:hover{background:rgba(148,170,174,.42)}
.btn-amber{background:var(--amber);color:var(--amber-ink)}
.btn-amber:hover{background:#FFC27E}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1;padding:5px 8px;border:1px solid rgba(233,241,240,.24);border-radius:4px;color:rgba(233,241,240,.85);white-space:nowrap}
.chip-orig{border-color:rgba(255,178,94,.55);color:var(--amber)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:14.5px;font-weight:550;transition:border-color .2s,color .2s}
.pill:hover{border-color:var(--amber);color:var(--amber)}
/* Značka Whaledenu (W) jako maska, barvu bere z currentColor */
.wmark{display:inline-block;flex:none;background:currentColor;-webkit-mask:url(../img/brand/whaleden-w.png) center/contain no-repeat;mask:url(../img/brand/whaleden-w.png) center/contain no-repeat}
.flag{position:absolute;z-index:3;top:7%;left:6%;width:clamp(18px,10cqw,30px);aspect-ratio:512/420;color:var(--amber);filter:drop-shadow(0 1px 6px rgba(0,0,0,.6))}

/* ——— Sekce: jantarový štítek a velký nadpis ——— */
.sec{padding-top:var(--sec)}
.sec-h{padding:0 var(--g);margin:0 0 clamp(18px,2.2vw,32px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--amber);font-weight:600;font-size:15px;line-height:1.2}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,178,94,.18)}
.sec-h .eyebrow:last-child{margin-bottom:0}
.sec-t{margin:0;font-size:clamp(32px,4.4vw,66px);font-weight:800;font-variation-settings:"wdth" 84;letter-spacing:-.022em;line-height:1;text-wrap:balance}

/* ——— Úvod: O mně ——— */
.hero{padding-top:calc(env(safe-area-inset-top,0px) + 68px + clamp(14px,2.6vw,44px))}
.hero-in{padding:0 var(--g);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,4.2vw,76px);align-items:center}
/* Portrét v hledáčku kamery: rohy, REC, timecode, formát a baterie */
.vf-frame{position:relative;display:block;width:100%;aspect-ratio:9/10;max-height:calc(var(--vh) - 68px - 290px);min-height:300px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--abyss);cursor:pointer}
.vf-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:transform 1s var(--ease)}
.vf-frame:hover img{transform:scale(1.03)}
.vf{position:absolute;inset:0;pointer-events:none;color:#fff;font-size:clamp(11.5px,.9vw,13.5px);font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.55);background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(2,9,11,.5) 100%)}
.vf .c{position:absolute;width:clamp(26px,3.2vw,44px);height:clamp(26px,3.2vw,44px);border:2px solid rgba(255,255,255,.85)}
.vf .tl{left:6%;top:6%;border-right:0;border-bottom:0}.vf .tr{right:6%;top:6%;border-left:0;border-bottom:0}
.vf .bl{left:6%;bottom:6%;border-right:0;border-top:0}.vf .br{right:6%;bottom:6%;border-left:0;border-top:0}
.vf .rec{position:absolute;left:calc(6% + 20px);top:calc(6% + 18px);display:flex;align-items:center;gap:7px}
.vf .rec b{width:10px;height:10px;border-radius:50%;background:#E5382E;box-shadow:0 0 10px rgba(229,56,46,.8);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vf .tc{position:absolute;right:calc(6% + 20px);top:calc(6% + 18px)}
.vf .fmt{position:absolute;left:calc(6% + 20px);bottom:calc(6% + 16px);opacity:.9}
.vf .bat{position:absolute;right:calc(6% + 22px);bottom:calc(6% + 18px);width:24px;height:12px;border:1.5px solid #fff;border-radius:3px}
.vf .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#fff;border-radius:0 1px 1px 0}
.vf .bat i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:70%;background:#fff;border-radius:1px}
.vf .play{position:absolute;left:50%;top:68%;translate:-50% -50%;width:clamp(56px,4.6vw,72px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(4,18,22,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none;transition:scale .35s var(--ease),border-color .2s,color .2s,background-color .2s}
.vf .play svg{width:42%;height:42%;margin-left:7%}
.vf-frame:hover .play,.vf-frame:focus-visible .play{scale:1.08;border-color:var(--amber);color:var(--amber);background:rgba(4,18,22,.5)}
.hero-t{font-size:clamp(46px,6.4vw,104px);margin:0 0 14px;--fz:13}
.hero-lead{font-family:var(--fs);font-style:italic;font-variation-settings:"opsz" 60;font-size:clamp(21px,2vw,29px);line-height:1.25;margin:0 0 16px}
.hero-p{color:rgba(233,241,240,.84);max-width:62ch;margin:0 0 12px;font-size:clamp(15.5px,1.1vw,17.5px);text-wrap:pretty}
.hero-motto{margin:18px 0 0;color:var(--amber);font-weight:650;font-size:clamp(16px,1.25vw,19px)}
.hero-act{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.hero-rows .row{margin-top:clamp(30px,3.6vw,60px)}
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr}
  .vf-frame{aspect-ratio:1/1;max-height:none;min-height:0}
  .vf-frame img{object-position:50% 22%}
}

/* ——— Projekty: Whaleden a Joisi ——— */
/* Dva sloupce bez rámečků, mezi nimi tenká linka. Oba bloky mají 7 částí (úvodní video, název, kategorie, role, text,
   čísla nebo klienti, odkazy); na širokém displeji se řádky srovnají přes subgrid, takže videa, názvy i tlačítka sedí
   ve stejné výšce. Bez podpory subgridu je každý sloupec obyčejný sloupec. Na mobilu jsou bloky pod sebou.
   Pod oběma sloupci je přes celou šířku řada Příběhy z Whaledenu (na mobilu hned pod Whaledenem). */
.hub>*{margin-inline:var(--g)}
.hub~.hub{margin-top:clamp(52px,7vw,80px)}
.hub~.hub::before{content:"";display:block;height:1px;margin:0 var(--g) clamp(44px,6vw,64px);background:var(--line)}
.hub-media{margin-block:0 clamp(22px,3.4vw,34px)}
.proj-rows .row{margin-top:clamp(40px,4.4vw,72px)}
@media (min-width:1000px){
  .hubs{--hg:clamp(48px,5.4vw,110px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--hg);padding:0 var(--g)}
  .hub{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;min-width:0}
  .hub>*{margin-inline:0}
  .hub~.hub{margin-top:0;border-left:1px solid var(--line);padding-left:calc(var(--hg) / 2);margin-left:calc(var(--hg) / -2)}
  .hub~.hub::before{display:none}
  /* Řada příběhů je v HTML mezi bloky (kvůli mobilu); na desktopu jde do vlastního řádku pod oba sloupce, přes celou šířku */
  .proj-rows{grid-column:1/-1;grid-row:8;margin-inline:calc(-1 * var(--g))}
  .hub-title,.hub-name{align-self:end}
}
.hub-title{margin-block:0;line-height:0}
.hub-logo{display:block;width:clamp(210px,21vw,360px);max-width:100%;height:auto}
.hub-name{margin-block:0;font-size:clamp(54px,5.2vw,90px);font-weight:800;font-variation-settings:"wdth" 84;letter-spacing:-.035em;line-height:.9}
.hub-tag{font-family:var(--fs);font-style:italic;font-variation-settings:"opsz" 72;font-size:clamp(21px,1.9vw,30px);line-height:1.2;margin-block:.6em .3em}
.hub-role{margin-block:0 14px;color:var(--amber);font-weight:600;font-size:clamp(15px,1.1vw,17px)}
.hub-lead{color:rgba(233,241,240,.86);max-width:60ch;margin-block:0 18px;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;text-wrap:pretty}
.stats{list-style:none;margin-block:0 20px;padding:0;display:flex;gap:clamp(22px,2.4vw,36px)}
.stats b{display:block;font-size:clamp(24px,2vw,30px);font-weight:800;font-variation-settings:"wdth" 88;letter-spacing:-.02em;line-height:1.1}
.stats span{color:var(--mist);font-size:14px}
.hub-cl{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px;margin-block:0 20px}
.hub-cl b{flex-basis:100%;font-weight:650;font-size:15px}
.hub-cl a,.hub-cl span{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;text-decoration:none;color:rgba(233,241,240,.9)}
/* Firmy Joisi jsou odkazy ven: malá šipka jako u tlačítka Joisi.cz */
.hub-cl a svg{opacity:.7}
.hub-cl a:hover{border-color:var(--amber);color:var(--amber)}
.hub-cl em{font-style:normal;color:var(--mist);font-size:14.5px;padding-left:2px}
.hub-links{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}
.hub-links .btn{height:44px;gap:8px;font-size:15px;padding:0 16px}
.hub-links .btn svg{width:14px;height:14px;opacity:.8}
.hub-media .art{aspect-ratio:16/9;border-radius:10px}
.hub-media .art[data-act]{cursor:pointer}
.hub-media .art::after{background:linear-gradient(0deg,rgba(4,18,22,.5),rgba(4,18,22,0) 40%)}
.pbtn{position:absolute;z-index:3;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:0;border-radius:999px;background:rgba(4,18,22,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--moon);font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .2s}
.pbtn:hover,.art:hover .pbtn{background:rgba(4,18,22,.86)}
@media (max-width:640px){.hub-links .btn{flex:1 1 auto}}

/* ——— Billboard (úvod sekce Videa) ——— */
.vid{position:relative;padding-top:var(--sec)}
.bb{position:relative;height:min(calc(var(--vh) * .84),940px);min-height:540px;overflow:hidden;background:var(--night);touch-action:pan-y}
.bb-eye{position:absolute;z-index:3;top:clamp(18px,3vw,44px);left:var(--g)}
.bb-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease),visibility 0s 1.2s}
.bb-slide.on{opacity:1;visibility:visible;transition:opacity 1.2s var(--ease),visibility 0s}
.bb-media.art{position:absolute;inset:0;border-radius:0}
.bb-slide.on .bb-media{animation:kb 18s var(--ease) both}
.bb.paused .bb-slide.on .bb-media{animation-play-state:paused}
/* Snímek s vlastním textem ve videu: video ztlumené, aby nepřebíjelo titulek */
.bb-slide.dim .bb-media{filter:brightness(.5) saturate(.85)}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
/* Billboard je uprostřed stránky: nahoře i dole přechází do pozadí */
.bb-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,18,22,.94) 0%,rgba(4,18,22,.6) 32%,rgba(4,18,22,0) 64%),linear-gradient(0deg,var(--night) 0%,rgba(4,18,22,.6) 16%,rgba(4,18,22,0) 38%),linear-gradient(180deg,var(--night) 0%,rgba(4,18,22,.5) 9%,rgba(4,18,22,0) 24%)}
.bb-c{position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:clamp(120px,calc(var(--vh) * .21),230px);max-width:660px}
.bb-txt{opacity:0;transform:translateY(14px);transition:opacity .8s .3s,transform 1s .3s var(--ease)}
.bb-slide.on .bb-txt{opacity:1;transform:none}
/* Titulek roste se šířkou okna, ale na nízkém billboardu (široký monitor) ho omezí i výška */
.bb-title{font-size:clamp(50px,min(calc(var(--k,1) * var(--vw) * .076),calc(var(--vh) * .13)),124px);margin:0 0 18px}
.bb-title.t-wide{font-size:clamp(34px,min(calc(var(--k,1) * var(--vw) * .052),calc(var(--vh) * .09)),92px)}
.bb-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 14px;font-size:15px;font-weight:550;color:rgba(233,241,240,.86)}
.bb-meta .chip-orig{font-size:13px}
.bb-syn{font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.5;max-width:46ch;margin:0 0 24px;color:rgba(233,241,240,.9);text-wrap:pretty;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.bb-act{display:flex;flex-wrap:wrap;gap:12px}
/* Přepínač: popsané záložky přes celou šířku, linka nahoře se plní po dobu snímku */
.bb-prog{position:absolute;z-index:3;left:var(--g);right:var(--g);bottom:clamp(22px,calc(var(--vh) * .036),44px);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(12px,1.8vw,32px)}
.bb-prog button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:baseline;padding:16px 0 4px;border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;color:rgba(233,241,240,.55);transition:color .25s}
.bb-prog button:hover,.bb-prog button[aria-current="true"]{color:var(--moon)}
.bb-prog button::before,.bb-prog i{content:"";position:absolute;left:0;top:0;height:3px;border-radius:2px}
.bb-prog button::before{right:0;background:rgba(233,241,240,.22);transition:background-color .25s}
.bb-prog button:hover::before{background:rgba(233,241,240,.4)}
.bb-prog i{width:0;background:var(--amber)}
.bb-prog .done i{width:100%;background:rgba(233,241,240,.55)}
.bb-pn{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.7}
.bb-pt{font-size:clamp(15px,1.05vw,18px);font-weight:650;font-variation-settings:"wdth" 92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-prog .run i{animation:fill var(--dur,9s) linear forwards}
.bb.paused .bb-prog .run i{animation-play-state:paused}
@keyframes fill{from{width:0}to{width:100%}}
.vid-rows{position:relative;z-index:2;margin-top:clamp(0px,.6vw,10px)}
@media (max-width:640px){
  .bb{height:min(78svh,700px);min-height:500px}
  .bb-slide::after{background:linear-gradient(0deg,var(--night) 0%,rgba(4,18,22,.86) 34%,rgba(4,18,22,.1) 66%,rgba(4,18,22,.5) 88%,var(--night) 100%)}
  .bb-c{bottom:78px}
  .bb-syn{font-size:15px;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .bb-act .btn{flex:1;padding:0 14px}
  .bb-prog{bottom:34px;gap:6px}
  .bb-prog button{padding:0;height:22px}
  .bb-prog button::before,.bb-prog i{top:9px}
  .bb-pn,.bb-pt{display:none}
}

/* ——— Média v kartách ——— */
/* Dokud se obrázek nenačte, karta je tmavá plocha s titulkem */
.art{position:relative;overflow:hidden;background:var(--abyss);container-type:inline-size;border-radius:inherit}
.art img,.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art img,.art video{opacity:0;transition:opacity .6s}
.art.has-media img{opacity:1}
/* Video leží nad plakátem a ukáže se, až opravdu hraje */
.art video.on{opacity:1}
/* Obálka příběhu už název nese, překryvný titulek by se zdvojil */
.art.cover.has-media .tt{display:none}
/* Náhled obálky na výšku v ploše na šířku: celá obálka vpravo, pod ní rozmazaná kopie */
.art.fit img{object-fit:contain;object-position:90% 50%;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.art.fit img.fit-bg{object-fit:cover;object-position:50% 50%;filter:blur(26px) saturate(1.15) brightness(.5);transform:scale(1.25)}
.grid.po,.sheet-grid.po{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.po .card .art{aspect-ratio:2/3}
.kb-img.fit img{animation:none}
.art.contain img{object-fit:contain;padding:8%}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(2,9,11,.72),rgba(2,9,11,0) 58%)}
.art.plain::after{display:none}
.art .tt{position:absolute;z-index:2;left:7%;right:7%;bottom:8%;font-size:max(11px,calc(var(--fz) * var(--pm,1) * var(--k,1) * 1cqw))}
.kb-img img{animation:kb 14s var(--ease) both}

/* ——— Řady ——— */
.row{--gap:10px;--per:5.3;--ratio:16/9;position:relative;margin-top:clamp(18px,2.2vw,34px)}
.row[data-kind="poster"]{--per:7.3;--ratio:2/3;--pm:1.3}
.row[data-kind="square"]{--per:8.4;--ratio:1/1}
.row[data-kind="photo"]{--per:6.4;--ratio:4/5}
/* Ze zákulisí na úvodu: větší čtverce */
#r-bts{--per:7.2}
@media (max-width:1280px){.row{--per:4.3}.row[data-kind="poster"]{--per:6.2}.row[data-kind="square"]{--per:7.1}.row[data-kind="photo"]{--per:5.3}#r-bts{--per:6.2}}
@media (max-width:980px){.row{--per:3.25}.row[data-kind="poster"]{--per:4.6}.row[data-kind="square"]{--per:5.2}.row[data-kind="photo"]{--per:4.1}#r-bts{--per:4.4}}
@media (max-width:640px){.row{--per:1.55;--gap:8px}.row[data-kind="poster"]{--per:2.65}.row[data-kind="square"]{--per:3.1}.row[data-kind="photo"]{--per:2.4}#r-bts{--per:2.6}}
.row-h{display:flex;align-items:baseline;gap:18px;padding:0 var(--g);margin:0 0 8px}
.row-t{margin:0;font-size:clamp(17px,1.45vw,22px);font-weight:650;font-variation-settings:"wdth" 92;letter-spacing:.004em}
.row-all{font-size:14px;font-weight:550;color:var(--mist);background:none;border:0;padding:0;cursor:pointer}
.row-all:hover{color:var(--amber)}
.track-w{position:relative}
.track{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);padding:6px var(--g) 20px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{position:relative;display:block;flex:0 0 calc((var(--vw) - var(--g) - var(--gap) * (var(--per) - 1)) / var(--per) - 2px);color:inherit;text-decoration:none;border-radius:6px;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.row[data-kind="poster"] .card{border-radius:8px}
.card .art{aspect-ratio:var(--ratio);transition:filter .25s}
.card:hover .art{filter:brightness(1.1)}
.card:focus-visible{outline:none}
.card:focus-visible .art{outline:2px solid var(--amber);outline-offset:3px}
.card .clip-i{position:absolute;z-index:3;right:6%;bottom:9%;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(4,18,22,.6);color:var(--moon)}
.card.all-card{padding:0;border:0;background:none;text-align:inherit;cursor:pointer}
.card.all-card .art{display:grid;place-items:center;background:var(--tide)}
.card.all-card .art::after{display:none}
.all-card span{position:relative;z-index:2;font-weight:650;font-size:15px;text-align:center;padding:0 10%}
.arrow{position:absolute;top:6px;bottom:20px;width:max(40px,calc(var(--g) - 6px));z-index:6;border:0;cursor:pointer;color:var(--moon);display:grid;place-items:center;opacity:0;transition:opacity .2s}
.arrow.l{left:0;background:linear-gradient(90deg,rgba(4,18,22,.92),rgba(4,18,22,0))}
.arrow.r{right:0;background:linear-gradient(270deg,rgba(4,18,22,.92),rgba(4,18,22,0))}
.track-w:hover .arrow{opacity:.9}
.arrow:hover,.arrow:focus-visible{opacity:1}
.arrow[hidden]{display:none}
@media (hover:none){.arrow{display:none}}
/* Ilustrace mají světlé pozadí (kresby na papíře) */
.ilu-row .art,.sheet-grid.ilu .art{background:#E6ECED}
.ilu-row .art::after,.sheet-grid.ilu .art::after{display:none}

/* ——— Rozbalená karta (hover) ——— */
.pop{position:absolute;z-index:45;top:0;left:0;background:var(--abyss);border-radius:10px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 0 1px var(--line);opacity:0;transform:scale(.86);transition:opacity .2s,transform .26s var(--ease),visibility 0s .26s;pointer-events:none;visibility:hidden}
.pop.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s,transform .26s var(--ease),visibility 0s}
.pop .art{aspect-ratio:16/9;border-radius:0}
.pop .art .tt{--pm:.92}
.pop-b{padding:14px 16px 16px}
.pop-act{display:flex;gap:8px;align-items:center}
.ic{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(233,241,240,.45);background:rgba(10,30,37,.7);color:var(--moon);display:grid;place-items:center;cursor:pointer;text-decoration:none;transition:border-color .2s,background-color .2s}
.ic:hover{border-color:var(--moon)}
.ic-play{background:var(--moon);color:var(--night);border-color:var(--moon)}
.ic-play:hover{background:#fff}
.ic-more{margin-left:auto}
.pop-t{margin:12px 0 0;font-weight:700;font-size:16px;line-height:1.3}
.pop-t span{font-weight:450;color:var(--mist)}
.pop-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pop-d{margin-top:9px;font-size:13.5px;line-height:1.45;color:rgba(233,241,240,.8);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ——— Grafika: Jak kreslím pod řadou Ilustrace ——— */
/* Bez nadpisu a popisku (přání uživatele): vlevo dvě videa kresby na výšku (smyčka, když jsou vidět), vpravo 2 × 2 ilustrace Juliet Noble */
.draw{padding:0 var(--g);margin-top:clamp(18px,2.4vw,36px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(10px,1.2vw,16px);align-items:start}
.draw-v,.draw-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.draw .card{flex:none;width:auto;border-radius:10px}
.draw .card .art{border-radius:10px}
.draw-v .card .art{aspect-ratio:9/16}
.draw-g .card .art{aspect-ratio:3/2}
.draw .card .clip-i{bottom:4%}
@media (max-width:760px){.draw{grid-template-columns:1fr;gap:8px}.draw-v,.draw-g{gap:8px}}
/* Název ilustrace se ukáže po najetí (na dotykových zařízeních pořád) */
.cap-pill{position:absolute;z-index:3;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 11px;border-radius:999px;background:rgba(4,18,22,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--moon);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.card:hover .cap-pill,.card:focus-visible .cap-pill{opacity:1;transform:none}
@media (hover:none){.cap-pill{opacity:1;transform:none}}

/* ——— Spolupráce: klienti ——— */
.collab{position:relative;isolation:isolate}
.collab::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:720px;pointer-events:none;background:radial-gradient(min(650px,65%) 360px at 50% 42%,rgba(255,178,94,.1),transparent 70%)}
.collab-h{padding:0 var(--g);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px 64px;margin:0 0 clamp(26px,3.6vw,54px)}
.collab-t{font-size:clamp(44px,7vw,116px);line-height:.92;letter-spacing:-.035em}
.big-stats{list-style:none;margin:0;padding:0;display:flex}
.big-stats li{padding:0 clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.big-stats li:first-child{padding-left:0;border-left:0}
.big-stats b{display:block;font-size:clamp(24px,2.7vw,42px);font-weight:800;font-variation-settings:"wdth" 84;letter-spacing:-.025em;line-height:1.08;white-space:nowrap}
.big-stats span{display:block;margin-top:4px;color:var(--mist);font-size:14px}
@media (max-width:640px){.big-stats li{padding:0 12px}.big-stats b{font-size:21px}.big-stats span{font-size:12.5px}}
/* Úzký telefon: delší údaj (např. „Dagli USA alla Cina“) se zalomí, místo aby přetékal */
@media (max-width:400px){.big-stats li{min-width:0}.big-stats b{white-space:normal}}
/* Zeď log: loga jsou bílá s průhledností (tools/media.py). Pod nimi plátno .fx s polem teček a jiskrami, které reagují na kurzor (fx v app.js). */
.wall{position:relative;margin:0 var(--g);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(233,241,240,.035),rgba(233,241,240,.01))}
.wall>.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wall-g{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.wall-g li{position:relative;aspect-ratio:2/1;display:grid;place-items:center;box-shadow:1px 1px 0 rgba(233,241,240,.07)}
.wall-g img{max-width:76%;max-height:62%;object-fit:contain;opacity:.84;transition:opacity .3s,transform .5s var(--ease),filter .5s}
.wall-g li:hover img{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(255,178,94,.45))}
@media (max-width:900px){.wall-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.wall{border-radius:12px}.wall-g li{aspect-ratio:4/3}.wall-g img{max-width:84%;max-height:60%}}
.names{padding:0 var(--g);margin-top:clamp(30px,3.8vw,60px)}
.names-t{margin:0 0 12px;font-size:clamp(17px,1.45vw,22px);font-weight:650;font-variation-settings:"wdth" 92}
.names-p{margin:0;max-width:1500px;font-size:clamp(20px,2.05vw,34px);font-weight:750;font-variation-settings:"wdth" 86;letter-spacing:-.018em;line-height:1.32;text-wrap:pretty}
.names-p span{white-space:nowrap;margin-right:.55em;color:rgba(148,170,174,.72);font-weight:600}
/* Nejznámější značky (velikost a známost) jsou výrazné a rozházené po celém seznamu */
.names-p .hi{color:var(--moon);font-weight:800}
.credits{margin:clamp(30px,3.6vw,56px) var(--g) 0;padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:22px clamp(28px,4vw,72px)}
.cred h3{margin:0 0 8px;color:var(--amber);font-size:14.5px;font-weight:600}
.cred p{margin:0;font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.65;color:rgba(233,241,240,.88)}
.cred p span{display:inline-block;margin-right:.85em;white-space:nowrap}
@media (max-width:760px){.credits{grid-template-columns:1fr}}

/* ——— Úspěchy: řada jako ostatní, pod kartou krátký nadpis a text na 4 řádky ——— */
#r-eps{margin-top:clamp(44px,5vw,84px)}
.eps{list-style:none;margin:0}
.ep{flex:0 0 calc((var(--vw) - var(--g) - var(--gap) * (var(--per) - 1)) / var(--per) - 2px);scroll-snap-align:start}
.ep-art{display:block;border-radius:6px;margin-bottom:10px}
.ep-art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--abyss);transition:filter .25s}
.ep-art img.contain{object-fit:contain;background:#E6ECED;padding:4%}
.ep-art:hover img{filter:brightness(1.1)}
.ep-t{margin:0 0 4px;font-size:15.5px;font-weight:650;font-variation-settings:"wdth" 92;line-height:1.3}
.ep-d{margin:0;font-size:14px;line-height:1.55;color:var(--mist);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ep.open .ep-d{display:block;-webkit-line-clamp:unset}
.ep-more{margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--moon);cursor:pointer}
.ep-more:hover{color:var(--amber)}
.ep-d a{color:var(--moon);text-decoration-color:rgba(255,178,94,.7);text-underline-offset:3px}
.ep-d a:hover{color:var(--amber)}

/* ——— Kontakt ——— */
#kontakt{padding-bottom:clamp(40px,5vw,80px)}
.contact{position:relative;isolation:isolate;overflow:hidden;margin:0 var(--g);padding:clamp(26px,5vw,76px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px clamp(32px,5vw,84px);align-items:end;background:var(--abyss);border:1px solid var(--line);border-radius:16px}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 100% at 100% 0%,rgba(255,178,94,.15),transparent 70%)}
/* Stejné částice jako pod logy (fx v app.js), obsah leží nad plátnem */
.contact>.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.contact>div{position:relative;z-index:1}
.contact .sec-t{font-size:clamp(34px,4.6vw,70px)}
.contact-p{margin:16px 0 0;max-width:44ch;color:var(--mist);font-size:clamp(15.5px,1.2vw,18px)}
.mail{display:block;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--fs);font-style:italic;font-weight:400;font-variation-settings:"opsz" 96;font-size:clamp(23px,2.5vw,38px);line-height:1.15;text-decoration:none;overflow-wrap:anywhere;transition:color .3s,border-color .3s}
.mail:hover{color:var(--amber);border-color:var(--amber)}
.contact-act{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:640px){.contact{border-radius:12px}.contact-act .btn{flex:1 1 auto}}
.foot{padding:28px var(--g) 40px;color:var(--mist);font-size:13.5px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;justify-content:space-between}
.foot a{text-decoration:none}
/* Patička: Whaleden (odkaz a ikony sítí), Linktree a Zpět nahoru */
.foot-r{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.foot-jj{display:block;width:44px;height:44px;border-radius:50%;background:var(--abyss);box-shadow:inset 0 0 0 1px var(--line)}
.foot-sep{width:1px;height:26px;background:var(--line)}
.foot-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;border-radius:999px;border:1px solid var(--line);color:var(--moon);font-weight:600;font-size:14px;transition:border-color .2s,color .2s}
.foot-pill:hover{border-color:rgba(255,178,94,.6);color:var(--amber)}
.foot-pill svg{opacity:.8}
@media (max-width:640px){.foot{flex-direction:column-reverse;align-items:flex-start}.foot-sep{display:none}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:96;padding:10px 16px;border-radius:8px;background:var(--moon);color:var(--night);font-weight:650;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s;pointer-events:none}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s,transform .4s var(--ease),visibility 0s}
@media (max-width:980px){.toast{bottom:calc(env(safe-area-inset-bottom,0px) + 78px)}}
/* Nabídka jiného jazyka podle prohlížeče (langHint v app.js): malý panel vpravo dole, na mobilu nad spodní lištou; nikdy nepřesměrovává */
.hint{position:fixed;z-index:70;right:var(--g);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;max-width:calc(100% - 2 * var(--g));padding:12px 52px 12px 18px;border-radius:12px;background:rgba(10,30,37,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px var(--line);font-size:14.5px;line-height:1.4;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .4s var(--ease)}
.hint.on{opacity:1;transform:none}
.hint p{color:rgba(233,241,240,.88)}
.hint a{color:var(--amber);font-weight:650;text-decoration:none;white-space:nowrap}
.hint a:hover{text-decoration:underline;text-underline-offset:3px}
.hint-x{position:absolute;right:8px;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mist);cursor:pointer}
.hint-x:hover{color:var(--moon);background:rgba(233,241,240,.08)}
@media (max-width:980px){.hint{left:var(--g);right:var(--g);bottom:calc(env(safe-area-inset-bottom,0px) + 74px)}}

/* ——— Detail (modal) ——— */
.modal{position:fixed;inset:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 30px) 16px calc(env(safe-area-inset-bottom,0px) + 30px);background:rgba(1,6,8,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.modal[hidden],.viewer[hidden],.sheet[hidden]{display:none}
.modal.on{opacity:1}
.m-panel{position:relative;width:min(960px,100%);margin:0 auto;background:var(--abyss);border-radius:12px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65);transform:translateY(26px) scale(.985);transition:transform .38s var(--ease)}
.modal.on .m-panel{transform:none}
.m-close{position:absolute;top:14px;right:14px;z-index:6;width:42px;height:42px;border-radius:50%;border:0;background:rgba(4,18,22,.72);color:var(--moon);cursor:pointer;display:grid;place-items:center}
.m-close:hover{background:var(--night)}
.m-hero{position:relative;aspect-ratio:16/9}
.m-hero .art{position:absolute;inset:0;border-radius:0}
.m-hero .art::after{background:linear-gradient(0deg,var(--abyss) 0%,rgba(10,30,37,.5) 26%,rgba(10,30,37,0) 56%)}
.m-hero-c{position:absolute;z-index:3;left:clamp(18px,4vw,46px);right:clamp(18px,4vw,46px);bottom:clamp(16px,3vw,34px)}
/* Mobil: u obálky na výšku vyšší plocha, obálka nahoře uprostřed, text pod ní přes přechod */
@media (max-width:680px){.m-hero:has(.art.fit){aspect-ratio:3/4}.m-hero .art.fit img:not(.fit-bg){object-position:50% 18%;inset:4% 0 22%;height:74%}}
.m-title{margin:0 0 16px;font-size:clamp(34px,calc(var(--k,1) * 5.6vw),68px)}
.m-title.t-wide{font-size:clamp(24px,calc(var(--k,1) * 3.8vw),50px)}
.m-act{display:flex;flex-wrap:wrap;gap:10px}
.m-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(20px,3.4vw,44px);padding:clamp(14px,2vw,22px) clamp(18px,4vw,46px) clamp(22px,3vw,38px)}
.m-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.m-desc{font-size:16.5px;line-height:1.62;max-width:62ch;margin:0 0 14px;text-wrap:pretty}
.m-facts{list-style:none;margin:0;padding:0;color:rgba(233,241,240,.78);font-size:15px}
.m-facts li{position:relative;padding-left:18px;margin:7px 0}
.m-facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.m-cred{margin:0;display:grid;gap:12px;font-size:14.5px}
.m-cred dt{color:var(--mist);font-size:13px}
.m-cred dd{margin:1px 0 0}
.m-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.m-more{padding:0 clamp(18px,4vw,46px) clamp(24px,3vw,42px)}
.m-more h3{font-size:19px;font-weight:650;font-variation-settings:"wdth" 92;margin:6px 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.grid .card{flex:none;width:auto;--ratio:16/9}
.grid .card .art{aspect-ratio:16/9}
@media (max-width:680px){.modal{padding:0}.m-panel{border-radius:0;min-height:100%}.m-body{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ——— Přehrávač a prohlížeč ——— */
.viewer{position:fixed;inset:0;z-index:95;background:#010406;display:flex;flex-direction:column;opacity:0;transition:opacity .25s}
.viewer.on{opacity:1}
.v-top{display:flex;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px 20px}
.v-title{font-weight:650;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-count{color:var(--mist);font-size:14px;margin-left:auto;white-space:nowrap}
.v-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(0px,5vw,72px)}
.v-stage video,.v-stage img{max-width:100%;max-height:100%;width:auto;height:auto}
/* Video se drží svého poměru a nechává místo pro spodní lištu ovládání */
.v-stage{padding-bottom:clamp(8px,1.5vh,20px)}
.v-stage video{width:auto;height:auto;max-width:100%;max-height:calc(var(--vh) - 150px);background:#000;border-radius:4px}
/* Ilustrace (kresby, často s průhledností) se v prohlížeči ukážou na světlém podkladu jako karty v galerii, ne na černé */
.v-stage img.paper{background:#E6ECED;padding:clamp(14px,3vw,48px);border-radius:8px}
.v-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;border:0;background:rgba(10,30,37,.8);color:var(--moon);cursor:pointer;display:grid;place-items:center}
.v-nav.p{left:12px}.v-nav.n{right:12px}
.v-nav:hover{background:var(--tide)}
.v-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 16px);color:var(--mist);font-size:14px}
.v-bot a{color:var(--moon)}
.v-note{flex:1;min-width:220px}

/* ——— Hledání a galerie ——— */
.sheet{position:fixed;inset:0;z-index:85;background:var(--night);overflow-y:auto;overscroll-behavior:contain;padding:0 var(--g) calc(env(safe-area-inset-bottom,0px) + 48px)}
.sheet-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:2;display:flex;gap:12px;align-items:center;padding:18px 0 14px;background:rgba(4,18,22,.985)}
.sheet-top h2{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:750;font-variation-settings:"wdth" 80}
.sheet-top .icon-btn{margin-left:auto}
.q{flex:1;min-width:0;height:54px;font:inherit;font-size:19px;background:rgba(233,241,240,.06);border:1px solid var(--line);border-radius:8px;color:var(--moon);padding:0 18px}
.q::-webkit-search-cancel-button,.q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.q:focus{outline:none;border-color:var(--amber)}
.sheet-note{color:var(--mist);margin:10px 0 0}
.sheet-grid{margin-top:14px}
.sheet-grid.sq{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sheet-grid.sq .card .art{aspect-ratio:1/1}
.sheet-grid.ph{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.sheet-grid.ph .card .art{aspect-ratio:4/5}
@media (max-width:680px){.sheet-grid.sq,.sheet-grid.ph{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}


/* ——— Jazyky s jiným písmem ———
   Archivo a Fraunces mají jen latinku, znaky jiných písem vezme prohlížeč z písem systému. Pro japonštinu, korejštinu a čínštinu
   je tu pořadí systémových písem (ať se nevybere náhodné), bez prostrkání titulků a s lámáním řádků podle zvyklostí jazyka.
   Velká písmena (text-transform) a šířka písma (wdth) se jich netýkají. Zprava doleva (dir="rtl") styly zatím nepočítají. */
:root:lang(ja){--ff:"Archivo","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;--fc:var(--ff);--fs:"Fraunces","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
:root:lang(ko){--ff:"Archivo","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--fc:var(--ff);--fs:"Fraunces","AppleMyungjo","Noto Serif KR",serif}
:root:lang(zh){--ff:"Archivo","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--fc:var(--ff);--fs:"Fraunces","Songti SC","Noto Serif SC",serif}
:lang(ja) .tt,:lang(ko) .tt,:lang(zh) .tt{letter-spacing:0}
:lang(ko){word-break:keep-all}
/* Kurzíva Fraunces nemá japonské, korejské ani čínské znaky: bez umělého zkosení (latinka v textu zůstane kurzívou) */
:lang(ja),:lang(ko),:lang(zh){font-synthesis-style:none}
:lang(ja),:lang(zh){line-break:strict}
/* japonské titulky a taglajny se lámou po slovních celcích, ne uprostřed slova (Chrome 119+, jinde běžné lámání) */
:lang(ja) :is(h1,h2,h3,.tt,.sec-t,.hero-lead,.hub-tag){word-break:auto-phrase}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}