/* ============================================================
   Církev jako kráva — manifest
   Barvy, fleky i jejich rozmístění vychází z Figmy (#3b2f2f / #e6acac, fleky mrak_01–05 na místech otisku).
   Písmo Agrandir (Pangram Pangram) je vložené přímo v souboru jako subset
   (latinka + čeština + šipka), řezy: Grand Heavy, Regular, Narrow Black, Grand.
   ============================================================ */
@font-face{font-family:"Agrandir Grand Heavy";src:url(fonts/Agrandir-GrandHeavy.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Agrandir";src:url(fonts/Agrandir-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Agrandir Narrow Black";src:url(fonts/Agrandir-NarrowBlack.woff) format("woff");font-weight:900;font-display:swap}
@font-face{font-family:"Agrandir Grand";src:url(fonts/Agrandir-Grand.woff) format("woff");font-weight:400;font-display:swap}
:root{
  --ground:#3b2f2f;
  --ground-deep:#2a2121;
  --ink:#e6acac;
  --print:rgba(217,199,199,.30);   /* otisk: bílá v soft-light ≈ tahle barva naplocho, bez blend módu */
  --display:"Agrandir Grand Heavy","Unbounded",system-ui,sans-serif;
  --body:"Agrandir","Outfit",system-ui,sans-serif;
  --narrow:"Agrandir Narrow Black","Unbounded",system-ui,sans-serif;
  --grand:"Agrandir Grand","Outfit",system-ui,sans-serif;
  --pad:clamp(20px,4vw,76px);
  --ease:cubic-bezier(.16,1,.3,1);
  --move:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:400;-webkit-font-smoothing:antialiased;
  touch-action:none;
}
::selection{background:var(--ink);color:var(--ground)}

/* ---------- pásmo slajdů: žádný nativní scroll, jen transform ---------- */
.deck{position:fixed;inset:0;overflow:hidden}
.track{height:100%;transform:translate3d(0,0,0);transition:transform 1s var(--move);will-change:transform}
.track.snap{transition:none}
.slide{
  position:relative;height:100%;padding:var(--pad);
  background:var(--ground);color:var(--ink);transition:background-color .6s,color .6s;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);overflow:hidden;
  contain:layout paint;
}
.eyebrow{
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.3vw,2.75rem);
  line-height:1.035;margin:0;letter-spacing:-.01em;
}
/* *slovo* v nadtitulku = lehčí řez Grand (Figma: „Proč jako kráva?“, jako tenčí) */
.eyebrow em{font-family:var(--grand);font-weight:400;font-style:normal}
.eyebrow .n{font-family:var(--body);font-weight:400;opacity:.7;margin-left:.5em}
.statement{
  align-self:center;margin:0;width:100%;max-width:1560px;
  /* velikost podle nejdelšího řádku a počtu řádků: co nejvíc, ale ať se výrok vejde na šířku
     i na výšku (znak Grand Heavy je v průměru ~0,7 em široký) */
  font-size:clamp(1.6rem,min(5.9vw,calc((100vw - 2*var(--pad) - 3rem)/(var(--znaku,26)*.7)),calc((100vh - 2*var(--pad) - 15rem)/(var(--radku,3)*1.18))),7.25rem);
  line-height:1.18;letter-spacing:-.01em;
}
.statement .arrow{font-family:var(--body)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap}
.question{
  margin:0;font-size:clamp(.95rem,1.55vw,1.875rem);line-height:1.25;display:flex;gap:.55em;align-items:baseline;
  max-width:60ch;
}
.question::before{content:"→";flex:none}
.brand{
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.3vw,2.75rem);line-height:1.035;
  margin:0 0 0 auto;white-space:nowrap;letter-spacing:-.01em;
}

/* ---------- blots from Figma (mrak_01–05) – placed and rotated like the fingerprint, PRINT table in JS ----------
   Overlay with the slide background (photos included) gives the blot its colour. The blend sits on
   .print, not on the image: .sweep is transparent while it fades in, and an image blended inside it
   would only blend with itself and jump to its real colour once the fade ends. */
.print{mix-blend-mode:overlay;
  position:absolute;z-index:0;pointer-events:none;
  transform:scale(var(--ps,1));
}
.print .rot{position:absolute;left:50%;top:50%;aspect-ratio:1108/1197}
/* otisk se „přitiskne“: jednou naběhne z mírně většího měřítka a zprůhlednění do plné síly.
   Animuje se jen opacity a transform jedné vrstvy – to zvládne kompozitor sám, svg se
   vykreslí jen jednou. Dřívější odkrývání maskou stálo na velké obrazovce plynulost
   (1920×1080, CPU 4×: ~20 fps během přechodu, s tímhle 60 fps). */
.print .sweep{position:absolute;inset:0;opacity:0;transform:scale(1.08) rotate(-2deg)}
.print .blot{display:block;width:100%;height:100%}
/* On cream the light blot would vanish and an inverted one turned cold grey. There the blot is drawn
   in the palette's text colour (green, blue, brown): the shape comes from a mask of the same image,
   so the blot keeps its transparency. JS sets .cream from the drawn palette. */
.slide.cream .print{mix-blend-mode:normal}
.slide.cream .print .blot{visibility:hidden}
.slide.cream .print .sweep::before{
  content:"";position:absolute;inset:0;background:var(--ink);opacity:.7;   /* weakest that still keeps the hue; lower turns grey */
  -webkit-mask:var(--blot-mask) center/100% 100% no-repeat;mask:var(--blot-mask) center/100% 100% no-repeat;
}
/* pair of blots on long reading slides – positions are percentages of the whole (tall) slide */
.print.reading{width:min(44vw,820px);height:auto}
.print.reading.large{width:min(62vw,1150px)}
.print.reading.top.right{right:-8%;top:4%;rotate:-14deg}
.print.reading.top.left{left:-12%;top:1%;rotate:10deg}
.print.reading.bottom.left{left:-10%;top:52%;rotate:166deg}
.print.reading.bottom.right{right:-10%;top:56%;rotate:-160deg}
.slide.in .print .sweep{opacity:1;transform:none;transition:opacity 1s ease .15s,transform 1.8s cubic-bezier(.2,.7,.2,1) .15s}
/* Tady bývalo „jemné dýchání“ – nekonečná rotace otisku na desktopu. Stálo to 22 % jádra
   pořád dokola, i když se na stránce nic nedělo: maska na .sweep brání tomu, aby se rotace
   jen skládala na kompozitoru, takže se každý snímek znovu rastrovalo přes 2,8 milionu
   poloprůhledných pixelů. Změřeno: s ním 22 %, bez něj 2,2 % – stejně jako bez otisku.
   Přesun rotace na .print ani náhrada za opacity nepomohly (22,1 % a 13,9 %). */
.slide>*:not(.print):not(.photo):not(.portret):not(.veil):not(.title):not(.claim){position:relative;z-index:1}

/* ---------- vstupní animace ---------- */
.rise{opacity:0;transform:translateY(.45em);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.slide.in .rise{opacity:1;transform:none}
/* maska pro výjezd řádku zdola; horní odsazení je čistě rezerva na diakritiku –
   Agrandir Narrow Black potřebuje .18em nad horní hranou řádku (OTEVŘENÁ, ŠTĚDRÁ, KRÁVA),
   .22em bylo o čtyři procenta velikosti písma víc a Safari na iPadu háčky ořízlo */
.ln{display:block;overflow:hidden;padding:.36em .12em .1em;margin:-.36em -.12em -.1em}
.ln>span{display:block;transform:translateY(125%);transition:transform 1.15s var(--ease)}
.slide.in .ln>span{transform:none}
.slide.in .ln:nth-child(2)>span{transition-delay:.09s}
.slide.in .ln:nth-child(3)>span{transition-delay:.18s}
.slide.in .question{transition-delay:.45s}
.slide.in .eyebrow{transition-delay:.05s}
.slide:first-child .rise{opacity:1;transform:none}

/* ---------- hero: foto + živé textové vrstvy ---------- */
.hero{color:#fff;background:var(--ground-deep)}
.hero .photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 69%;
  z-index:0;
}
@media (hover:hover){
  .hero .photo{transform:scale(1.06);will-change:transform;animation:kenburns 14s var(--ease) forwards}
  @keyframes kenburns{to{transform:scale(1)}}
}
.hero .veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(42,33,33,.5),transparent 32%),linear-gradient(to bottom,rgba(42,33,33,.25),transparent 25%)}
.hero .title{
  position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--pad);
}
.hero .buh{
  margin:0;font-family:var(--narrow);font-weight:900;font-size:clamp(4.5rem,16.67vw,20rem);
  line-height:1.035;letter-spacing:0;
}
.hero .buh i{display:inline-block;font-style:normal;transform:translateY(120%);transition:transform 1.2s var(--ease)}
.hero.in .buh i{transform:none}
.hero.in .buh i:nth-child(2){transition-delay:.07s}
.hero.in .buh i:nth-child(3){transition-delay:.14s}
.hero.in .buh i:nth-child(4){transition-delay:.21s}
.hero.in .buh i:nth-child(5){transition-delay:.28s}
.hero .sub{
  margin:-.15em 0 0;font-family:var(--grand);font-weight:400;font-size:clamp(1.1rem,2.19vw,2.625rem);line-height:1.035;
}
.hero.in .sub{transition-delay:.75s}
.hero.in .eyebrow{transition-delay:1s}
.hero.in .brand{transition-delay:1.1s}
.hero .foot{justify-content:flex-end}

/* ---------- hodnoty – úvod s fotkou ---------- */
.intro{color:#fff;background:var(--ground-deep)}
.intro .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.intro .veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:rgba(42,33,33,.18)}
.intro .print{z-index:1}

/* ---------- zrcadlo – fotka přes celý slajd, otisk nad ní ---------- */
.mirror{color:#fff;background:var(--ground-deep)}
.mirror .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
/* Figma má text bíle přímo na fotce – na světlé obloze a hladině vychází kontrast 1,6:1.
   Stejný přechod jako na úvodním slajdu ztmaví jen horní a dolní pruh, kde text sedí;
   fotka i otisk uprostřed zůstávají nedotčené. */
.mirror .veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(42,33,33,.66),transparent 26%),
             linear-gradient(to bottom,rgba(42,33,33,.70),transparent 22%)}
.mirror .print{z-index:1}

/* ---------- Kravařsko. Moje lásko. ---------- */
.love{background:var(--ink);color:var(--ground)}
.love .foot{justify-content:flex-end}
.love .statement{
  justify-self:center;width:auto;max-width:100%;
  font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6.46vw,7.75rem);line-height:1.25;letter-spacing:-.01em;
}

/* ---------- 06 · Ich bin ein Kuhländler (rozměry podle Figmy 1920×1080) ----------
   Slajd není z rodiny .love – pozadí je tmavé, takže barvy i patička s otázkou jdou ze základu.
   Ve Figmě: portrét 634×812 na 607,104 se zaoblením 302 px = 47,62 % šířky / 37,21 % výšky.
   V procentech, ne v px ani vw: váže se tím na obrázek, takže tvar drží ve všech rozměrech oken.
   Menší poloměr nechává na spodní hraně široký rovný ořez, proto plná hodnota z návrhu.
   Oba řádky 140 px bez prostrkání,
   „Ich bin ein“ na x=443 / y=604, „Kuhländler“ na x=539 / y=726 – řádky se o kus překrývají
   a celý blok sedí o 54 px vpravo od středu. */
/* Celá kompozice se škáluje jedním měřítkem: --u je jeden návrhový pixel z Figmy 1920×1080,
   tedy to menší z „setina šířky okna dělená 19,2“ a „setina výšky dělená 10,8“. Dřív měla
   šířka portrétu základ ve vw, jeho výška v procentech, posun textu ve vh a písmo ve vw –
   při změně okna se každý kus hýbal jinou rychlostí. Naměřeno: mezi 1920×900 a 1000×900
   překryv textu s portrétem spadl ze 417 px na −35, tedy text z portrétu úplně sjel. */
/* Měřítko se neváže na rám 1920×1080, ale na vlastní šířku kompozice: ta je 1249 návrhových
   pixelů (od levé hrany „Ich bin ein“ po pravou hranu „Kuhländler“, symetricky kolem středu).
   Na šířku 16:9 vyjde --u přesně 1, tedy sazba jedna ku jedné podle Figmy. Na vysokém okně
   se kompozice řídí šířkou, ale roste do ní celá – kdyby se contain počítal z rámu, zbyla by
   z ní půlka a kolem prázdno. Výška je pojistka pro nízká okna. */
.german{--u:min(calc((100vw - 2*var(--pad))/1249.2),calc((100vh - 207px)/873.2))}
/* Portrét i výrok jsou absolutní, takže v mřížce slajdu nezabírají prostřední řadu –
   patička by se tam nastěhovala a na úzkém okně by jí text vyjel doprostřed. */
.german .foot{grid-row:3}
/* Otisk patří ke kompozici, ne k rámu – jede tedy taky na --u. Figma 06a: skupina 997×816
   na 483,121, tedy střed 21,5 px vpravo a 11 px nad středem rámu. JS ho sází v procentech
   slajdu, proto !important. */
.german .print{
  left:calc(50% - 477*var(--u)) !important;top:calc(50% - 419*var(--u)) !important;
  width:calc(997*var(--u)) !important;height:calc(816*var(--u)) !important;
}
.german .portret{
  position:absolute;z-index:0;left:50%;top:50%;
  width:calc(634.306*var(--u));height:auto;
  translate:calc(-50% - 35.97*var(--u)) calc(-50% - 30.6*var(--u));
  border-radius:47.62% / 37.21%;pointer-events:none;
}
.german .statement{
  position:absolute;z-index:1;left:50%;top:50%;width:max-content;max-width:none;text-align:left;
  translate:calc(-517.44*var(--u)) calc(63.85*var(--u));
  font-family:var(--display);font-weight:800;line-height:1;letter-spacing:0;
}
.german .l1,.german .l2{font-size:calc(140*var(--u))}
.german .l1{color:#fff}
.german .l2{margin-left:.571em;margin-top:-.446em}

/* ---------- pilíře poslání · výzva + odstavec + otázka ----------
   Výzva je v řezu i velikosti výroku, odstavec v písmu předmluvy. Sloupec drží míru řádky
   (~40 znaků), ne šířku okna. Celý blok se vysune najednou jako výrok na mobilu. */
.pilir{
  grid-row:2;align-self:center;position:relative;z-index:1;
  width:100%;max-width:1560px;
  opacity:0;transform:translateY(.4em);transition:opacity .9s var(--ease),transform 1.1s var(--ease);
}
.slide.in .pilir{opacity:1;transform:none;transition-delay:.1s}
.pilir .nadpis{
  margin:0;font-family:var(--display);font-weight:800;
  /* velikost podle nejdelšího řádku a počtu řádků: co nejvíc, ale ať se výrok vejde na šířku
     i na výšku (znak Grand Heavy je v průměru ~0,7 em široký) */
  font-size:clamp(1.6rem,min(5.9vw,calc((100vw - 2*var(--pad) - 3rem)/(var(--znaku,26)*.7)),calc((100vh - 2*var(--pad) - 15rem)/(var(--radku,3)*1.18))),7.25rem);
  line-height:1.18;letter-spacing:-.01em;
}
/* s odstavcem pod sebou je výrok o kus menší, ať se oba vejdou */
.pilir .nadpis:not(:last-child){margin-bottom:.6em;font-size:clamp(1.6rem,4.6vw,5.6rem);line-height:1.15}
.pilir .nadpis>span{display:block;white-space:nowrap}
.pilir .nadpis .arrow{font-family:var(--body)}
/* civilní nadpis pod tagline: řekne rovnou, o čem pilíř je */
.pilir .podnadpis{
  margin:0 0 .7em;max-width:30ch;font-family:var(--body);font-weight:700;
  font-size:clamp(1.25rem,2.5vw,3.1rem);line-height:1.2;
}
.pilir .popis{
  margin:0;max-width:40ch;font-family:var(--body);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,2.4rem);line-height:1.3;
}

/* ---------- rozklik z výroku · odkaz pod výrokem a vrstva s dlouhým textem ----------
   Slajd zůstává, jak je; kdo chce víc, klikne. Vrstva je nativní <dialog>: Esc, fokus
   i čtečky obrazovky řeší prohlížeč. Text se v ní normálně scrolluje (prezentace zatím stojí). */
.stred{grid-row:2;align-self:center;min-width:0}
.stred .statement{margin:0}
.vic{
  display:inline-flex;align-items:baseline;gap:.5em;margin-top:clamp(1rem,3vh,2.4rem);padding:.15em 0;
  border:0;background:none;color:inherit;cursor:pointer;text-align:left;
  font-family:var(--body);font-weight:400;font-size:clamp(1rem,1.55vw,1.875rem);line-height:1.25;
}
/* jemná linka jen naznačí, že se dá kliknout; zesílí až pod myší */
.vic-t{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .35s;
}
.vic .sipka{flex:none;transition:transform .5s var(--ease)}
.vic:hover .vic-t,.vic:focus-visible .vic-t{text-decoration-color:currentColor}
.vic:hover .sipka,.vic:focus-visible .sipka{transform:translateX(.3em)}
.vic:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.detail{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ground);color:var(--ink);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;
}
.detail::backdrop{background:var(--ground)}
.detail[open]{animation:detailIn .6s var(--ease)}
@keyframes detailIn{from{opacity:0;transform:translateY(2vh)}}
.detail-in{outline:0;padding:var(--pad);padding-right:calc(var(--pad) + 14px);min-height:100%}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;position:sticky;top:calc(min(18px,var(--pad)) - var(--pad));z-index:1;
  margin:calc(-1*var(--pad)) 0 0;padding:var(--pad) 0 1rem;background:var(--ground)}
.zavrit{border:0;background:none;color:inherit;cursor:pointer;padding:0}
.zavrit:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.detail-head .zavrit{font-family:var(--body);font-size:clamp(2rem,3.4vw,3.6rem);line-height:.8;margin-top:-.05em}
.detail-t{
  margin:clamp(3rem,14vh,10rem) 0 0;margin-left:min(6.75vw,130px);max-width:18ch;text-wrap:balance;
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.9vw,7.25rem);line-height:1.18;letter-spacing:-.01em;
}
.detail-t>span{display:block}
.detail .essay{margin:clamp(1.5rem,5vh,3.5rem) 0 0;margin-left:min(6.75vw,130px);opacity:1;transform:none}
/* bez osiřelých slov na konci odstavce a bez rozsypaných řádků */
.detail .essay p{text-wrap:pretty}
.detail .essay .lead{font-weight:700}
.detail .zpet{
  margin:clamp(3rem,12vh,8rem) 0 clamp(2rem,8vh,5rem) min(6.75vw,130px);
  font-family:var(--body);font-weight:400;font-size:clamp(1rem,1.55vw,1.875rem);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
}
.detail .zpet:hover{text-decoration-color:currentColor}
.detail .zpet::before{content:"← ";font-family:var(--body);font-weight:400}

/* ---------- hodnoty · vysoký slajd, odstavec se čte scrollováním ---------- */
.track.flow{transition-duration:.55s;transition-timing-function:cubic-bezier(.2,.6,.25,1)}
.slide.read{height:auto;min-height:100%}
.read .text{
  margin:50vh 0 34vh;width:100%;max-width:1560px;
  font-family:var(--body);font-weight:400;font-size:clamp(1.9rem,6vw,7.25rem);line-height:1.15;letter-spacing:-.01em;
  opacity:0;transform:translateY(.3em);transition:opacity .9s var(--ease),transform 1.1s var(--ease);
}
.read.in .text{opacity:1;transform:none;transition-delay:.15s}
.read .text i{font-style:normal;opacity:.2;transition:opacity .3s linear}
/* verše pod odstavcem (Kdo jsme): tiché pilulky; kliknutí rozbalí znění pod nimi stejně jako verš v rozkliku */
.read .text:has(+.verse-blok){margin-bottom:0}
.verse-blok{margin:clamp(1.8rem,5vh,3.6rem) 0 34vh;max-width:1560px;font-family:var(--body);font-size:clamp(1rem,1.35vw,1.55rem);line-height:1.25}
.pilulky{display:flex;flex-wrap:wrap;gap:.6rem}
.pil{
  /* Agrandir sedí v řádku vysoko: horní odsazení o .15em větší, ať jsou verzálky opticky na středu */
  display:inline-flex;align-items:center;gap:.7em;padding:.75em 1.15em .45em 1.2em;
  border:0;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);
  color:inherit;font:inherit;cursor:pointer;transition:background-color .3s;
}
.pil:hover,.pil[aria-expanded="true"]{background:color-mix(in srgb,currentColor 17%,transparent)}
.pil:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* šipka dolů kreslená dvěma linkami – ostrá v každém písmu a velikosti */
.pil::after{
  content:"";flex:none;width:.4em;height:.4em;position:relative;top:-.27em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .45s var(--ease),top .45s var(--ease);
}
.pil[aria-expanded="true"]::after{transform:rotate(-135deg);top:.04em}
.pil-v{
  margin:1.6em 0 0;padding-left:.9em;max-width:32em;
  border-left:.12em solid color-mix(in srgb,currentColor 45%,transparent);
  animation:pilIn .5s var(--ease);
}
.pil-v p{margin:0;font-size:1.35em;line-height:1.25;text-wrap:pretty}
.pil-v a{
  display:inline-block;margin-top:.6em;color:inherit;font-size:.85em;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .35s;
}
.pil-v a:hover{text-decoration-color:currentColor}
.pil-v a::after{content:"→";display:inline-block;margin-left:.35em}
@keyframes pilIn{from{opacity:0;transform:translateY(-.3em)}}

/* ---------- předmluva · dlouhý text s mezititulky (Figma: Předmluva 1920×4895) ----------
   Na rozdíl od odstavce hodnot se tu nerozsvěcuje po slovech: je to přes 600 slov a zápis
   průhlednosti do každého z nich při každém snímku je přesně ta zátěž, kterou jinde řešíme.
   Ve Figmě: sloupec 1120 px od levého okraje 206, mezititulky 90 px Grand Heavy, text 50 px
   Regular, proklad 1,2 – mezery mezi odstavci jsou tam prázdné řádky, tady jsou to marginy. */
.essay{
  /* Šířka sloupce se řídí délkou řádky, ne oknem: ~47 znaků je míra z Figmy (1120 px při 50 px); v ch to vychází na 32,5, protože ch je šířka nuly.
     Dřív to bylo v procentech okna s výjimkou pro poměr stran – na půlce desktopu se řádka
     skokem protáhla ze 47 znaků na 74 a sazba se rozsypala. */
  --odsazeni:min(6.75vw,130px);
  margin:34vh 0 30vh;margin-left:var(--odsazeni);
  width:min(32.5ch,calc(100% - var(--odsazeni)));
  font-family:var(--body);font-weight:400;font-size:clamp(1.05rem,2.6vw,3.125rem);line-height:1.25;
  opacity:0;transform:translateY(.3em);transition:opacity .9s var(--ease),transform 1.1s var(--ease);
}
.read.in .essay{opacity:1;transform:none;transition-delay:.15s}
.essay p{margin:0 0 1.25em}
/* pilulky s verši uprostřed předmluvy: menší písmo než text a bez velké mezery na konci slajdu */
.essay .verse-blok{margin:0 0 1.25em;font-size:max(.5em,.95rem)}
.essay .pil-v p{margin:0}
.essay .lead{margin-bottom:1.25em}
.essay h3{
  font-family:var(--display);font-weight:800;font-size:1.8em;line-height:1.25;letter-spacing:-.01em;
  margin:1.389em 0 .694em;
}
.essay .lead+h3{margin-top:0}
.essay>:last-child{margin-bottom:0}
/* Zlomová otázka „Proč jako kráva?“: stejná velikost i řádkování jako text, jen řez
   Grand Heavy (jako nadpisy) – vyčnívá tloušťkou, ne velikostí. */
.essay .ask{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
/* ---------- hodnoty ---------- */
.value .word{
  grid-row:2;align-self:center;justify-self:center;text-align:center;margin:0;width:100%;min-width:0;
  font-family:var(--narrow);font-weight:900;font-size:clamp(2.6rem,8.85vw,10.6rem);line-height:1.1;
  letter-spacing:0;text-transform:uppercase;
}
  .word .ln>span{white-space:nowrap}
.value .how{
  display:block;font-family:var(--grand);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(1.15rem,3.65vw,4.4rem);line-height:1.035;margin-top:.1em;
}
.value .how::before{content:"("}.value .how::after{content:")"}
/* Figma Hodnoty 00: na úvodním slajdu bloku sedí dvojice níž a s větší mezerou
   než na deseti slajdech hodnot – proto zvlášť, ne v .value */
/* Figma Hodnoty 00: titulek je tu 320 px (na hodnotách 170) a dvojice sedí jinde */
.value.intro .word{font-size:clamp(3rem,16.667vw,20rem);line-height:1}
.value.intro .how{margin-top:.3425em}
/* KRÁVA má Boží design: stejný titulek jako KULTURA, podtitul menší a bez závorek */
.value.intro.manifest .word{translate:0 3.05vh}
.value.intro.manifest .how{font-size:clamp(1rem,2.19vw,2.625rem);margin-top:-.964em}
.how.plain::before,.how.plain::after{content:none}

/* ---------- navigace ---------- */
.rail{
  position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translate(50%,-50%);z-index:10;
  display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;
}
.rail button{
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;
  padding:0;cursor:pointer;opacity:.55;transition:opacity .35s,height .35s var(--ease),background .35s;
}
.rail button:hover,.rail button:focus-visible{opacity:1;outline:none}
.rail button[aria-current="true"]{background:var(--ink);opacity:1;height:22px;border-radius:5px}
.rail li.sep{height:6px}
.hint{
  position:fixed;left:50%;top:clamp(18px,3.2vw,60px);transform:translateX(-50%);z-index:10;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;
  transition:opacity .6s;pointer-events:none;white-space:nowrap;
}
.hint.gone{opacity:0}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:10;background:rgba(230,172,172,.12)}
.progress i{display:block;height:100%;width:0;background:var(--ink);transition:width .6s var(--ease)}

/* Pevné prvky se přebarvují samy za sebe: stav nese element, ne <body>, protože
   každý sedí v jiné výšce a nové pozadí k němu dojede v jinou chvíli (viz paint() v JS). */
.rail.on-light button{border-color:var(--ground);color:var(--ground);background:transparent}
.rail.on-light button[aria-current="true"]{background:var(--ground)}
.progress.on-light{background:rgba(59,47,47,.15)}
.progress.on-light i{background:var(--ground)}
body,.rail button,.progress i{transition:color .6s,border-color .6s,background-color .6s}
/* barvy z palety: lišta a progress jdou vždycky za barvami slajdu (JS jim je nastaví), on-light netřeba */
.progress,.progress.on-light{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.progress i,.progress.on-light i{background:var(--ink);transition:width .6s var(--ease),background-color .6s}
.rail button,.rail.on-light button{border-color:var(--ink)}
.rail button[aria-current="true"],.rail.on-light button[aria-current="true"]{background:var(--ink)}

/* ---------- na výšku: otisk na střed slajdu, velký, jen s rotací daného slajdu ---------- */
@media (max-aspect-ratio:1/1){
  .print.reading,.print.reading.large{width:min(80vw,60vh)}
  .slide:not(.german) .print:not(.reading){left:50% !important;top:50% !important;width:min(135vw,78vh) !important;height:auto !important;
    aspect-ratio:1/1;transform:translate(-50%,-50%) scale(.96)}
  .slide.in:not(.german) .print:not(.reading){transform:translate(-50%,-50%) scale(1)}
  .slide:not(.german) .print:not(.reading) .rot{width:100% !important}
  /* na výšku: kráva větší a výrok přes ni, jako v návrhu – ne dva oddělené bloky.
     Váže se na poměr stran, ne na šířku: i široké, ale vysoké okno je „na výšku“. */
}

/* ---------- mobil / úzká okna ---------- */
@media (max-width:720px){
  .slide{padding:calc(var(--pad) + 6px) var(--pad) calc(var(--pad) + 8px)}
  .statement{font-size:clamp(1.7rem,8.4vw,3rem);line-height:1.22}
  /* na úzkém displeji necháme výrok téct jako jeden odstavec (pevné řádky z Figmy by dělaly sirotky);
     místo masky po řádcích se odhalí celý výrok najednou */
  .slide:not(.love):not(.german) .statement .ln{display:inline;overflow:visible;padding:0;margin:0}
  .slide:not(.love):not(.german) .statement .ln>span{display:inline;transform:none;transition:none}
  .slide:not(.love):not(.german) .statement{opacity:0;transform:translateY(.4em);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .slide.in:not(.love):not(.german) .statement{opacity:1;transform:none;transition-delay:.1s}
  .brand{font-size:1rem}
  .question{font-size:.95rem}
  .slide{padding-right:calc(var(--pad) + 14px)}
  .hint{display:none}
  /* lišta zůstává i na telefonu; na dvacet slajdů se musí stáhnout, ať se vejde */
  .rail{gap:6px}
  .rail li{display:flex}          /* bez toho má položka výšku řádku, ne tečky */
  .rail button{width:6px;height:6px;border-width:1.2px}
  .rail button[aria-current="true"]{height:16px;border-radius:4px}
  .rail li.sep{height:4px}
  .value .how{font-size:clamp(1.1rem,5vw,1.6rem)}
  .read .text{font-size:clamp(1.7rem,8.6vw,3rem);line-height:1.2;margin:48vh 0 36vh}
  .verse-blok{margin-bottom:36vh}
  .pilir .nadpis>span{display:inline;white-space:normal}
  .pilir .nadpis{font-size:clamp(1.7rem,8.4vw,3rem);line-height:1.22}
  .pilir .podnadpis{font-size:clamp(1.15rem,5vw,1.5rem)}
  .vic{font-size:.95rem}
  .detail-t{font-size:clamp(1.9rem,9vw,3rem);margin-left:0}
  .detail .essay,.detail .zpet{margin-left:0}
}
@media (max-height:520px){
  .statement{font-size:clamp(1.4rem,5.5vh,3rem)}
  .value .word{font-size:clamp(2rem,14vh,6rem)}
}
@media (prefers-reduced-motion:reduce){
  .pil-v{animation:none}
  .read .text i{opacity:1 !important;transition:none}
  .track{transition:none}
  .rise,.ln>span,.print,.pilir{transition:none;opacity:1;transform:none}
  .detail[open]{animation:none}
  .hero .photo{animation:none}
  .print .sweep{opacity:1;transform:none;transition:none}
}