/* =====================================================================
   … tři tečky – varianta 5 „Výstava"
   Fork varianty 4: větší a silnější písmo (Bitter 400), tmavý závěr
   stránky (objednávka a tiráž na inkoustové, tvůrci v jemné šedé),
   tenké linky mezi bílými sekcemi, statický scroll prvek v hero, pět
   dlaždic kapitol, karty tvůrců s galerií variant a sekce „podporuju"
   v patičce.
   Jinak drží čistotu K4: černobílá + hořčicová #FFCC33 jen na akcentech,
   Bitter (blízký knižní Adelle) + IBM Plex Mono (popisky).
   ===================================================================== */

:root {
  --bg:        #ffffff;
  --page:      #ffffff;
  --ink:       #141414;
  --ink-soft:  #575757;   /* kontrast na bílé ≥ 7:1 */
  --rule:      rgba(0, 0, 0, 0.16);
  --yellow:    #ffcc33;   /* hořčicová podle tiskových dat knihy */
  --folio:     #ffcc33;   /* folia stránek hořčicová přesně dle tisku knihy
                             (dekorativní, aria-hidden – čísla nese status řádek) */
  /* tmavý závěr stránky (objednávka + tiráž) – inkoustová paleta */
  --dark-bg:        #141414;
  --dark-panel:     #1c1c1c;
  --dark-inset:     #262626;
  --dark-text:      #f5f5f5;  /* na --dark-bg ≈ 16,9:1 */
  --dark-text-soft: #b3b3b3;  /* na --dark-bg ≈ 8,8:1 */
  --dark-rule:      rgba(255, 255, 255, 0.28);
  /* jemná šedá sekce tvůrců */
  --grey-bg:   #ececec;
  /* světle šedá „deska stolu" ukázek a podklad prázdných slotů */
  --grey-stage: #f3f3f3;
  --grey-inset: #fafafa;
  --serif: "Bitter", "Georgia", serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset & základ ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  font-size: clamp(106.25%, 100% + 0.3vw, 118.75%);
}

[id] { scroll-margin-top: 5rem; }

/* Čitelnost: výchozí řez Bitter 400 místo tenkého 300 a základní
   stupeň o 1–2 px větší. Tenké 300 smí zůstat jen na velkých
   stupních (hero podtitulek). */
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Kurzíva patří jen do sazby básní (em uvnitř .page__poem).
   Jinde se v obsahu nepoužívá. */
.page__poem em { font-style: italic; }
em { font-style: normal; }
strong { font-weight: 700; }

.mono {
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.mono a { color: inherit; }

/* žlutý zvýrazňovač: vždy podklad pod černým textem, nikdy barva písma */
.mark {
  background: var(--yellow);
  color: var(--ink);
  /* podklad přesahuje písmena, ale nerozráží slovo (záporná marže) */
  padding: 0 0.08em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem;
  font-family: var(--mono); font-size: 0.875rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: var(--bg); }

/* ---------- hlavička ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }

/* Tlačítko mobilního menu (hamburger): objeví se až po zapojení JS
   (html.has-menu) a jen pod 1150 px – nad tímto prahem se plná
   navigace spolehlivě vejde na jeden řádek; bez JS zůstává navigace
   rozbalená. */
.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 1.1rem;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
/* otevřené menu: pruhy se bez animace složí do křížku */
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* Objednat uvnitř rozbaleného menu – jinde (desktop, bez JS) skryté,
   v hlavičce zůstává samostatné žluté CTA. */
.site-nav .site-nav__cta { display: none; }
.site-nav a {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* zvýraznění sekce, ve které se čtenář právě nachází (doplňuje JS) */
.site-nav a.is-current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

@media (max-width: 1149px) {
  [id] { scroll-margin-top: 8.5rem; }
  .site-header { flex-wrap: wrap; justify-content: space-between; gap: 0.65rem 1rem; }
  .site-nav {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem 1.25rem;
    padding: 0.2rem 0 0.35rem;
  }

  /* se zapojeným JS se navigace schová za hamburger úplně vpravo;
     samostatné Objednat z hlavičky mizí – je poslední položkou menu */
  .has-menu .nav-toggle { display: inline-block; order: 2; margin-left: auto; }
  .has-menu .site-header > .btn--small { display: none; }
  .has-menu .site-nav { display: none; }
  .has-menu .site-header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0 0.8rem;
  }
  .has-menu .site-header.nav-open .site-nav a { padding: 0.45rem 0; }
  .has-menu .site-header.nav-open .site-nav .site-nav__cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 0.55rem 1.4rem;
  }
}

/* ---------- tlačítka ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
/* jediné barevné CTA celého webu */
.btn--cta { background: var(--yellow); color: var(--ink); font-weight: 500; }
.btn--cta:hover { background: var(--ink); color: #fff; }
.btn--small { padding: 0.55rem 1.1rem; margin-left: auto; }
@media (min-width: 1150px) { .btn--small { margin-left: 0; } }

/* ---------- sekce a úvodníky ---------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3rem); }

/* Jediný nadpis sekce: malý úvodník. Je to skutečné h2 (osnova pro
   čtečky a vyhledávače zůstává), jen vypadá jako drobný štítek. */
.section-kicker {
  font-family: var(--mono);
  font-size: 0.87rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.2rem);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;          /* vlastní stacking context pro záporný z-index pozadí */
  min-height: min(92vh, 56rem);   /* fallback pro prohlížeče bez svh */
  min-height: min(92svh, 56rem);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: clamp(5rem, 12vw, 8rem) clamp(1.25rem, 5vw, 3rem);
}

.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg picture, .hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
}
/* tmavý přeliv kvůli kontrastu textu (i na nejsvětlejších místech mlhy) */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.68));
}

.hero__inner { max-width: 46rem; }

.hero__kicker {
  font-family: var(--mono);
  font-size: 0.87rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-bottom: 1.6rem;
}

.hero__title {
  font-weight: 700;
  font-size: clamp(3.2rem, 10vw, 6.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__sub {
  margin-top: 1.4rem;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 300;
}
.hero__sub strong { font-weight: 700; }

.hero__lead {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  font-size: 1.14rem;
  color: #ececec;
}

.hero__cta { margin-top: 2.4rem; }

/* Statický návodný scroll prvek: jediný na stránce, jen v hero,
   bez animace – reduced motion tedy nemá co vypínat. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  color: #e8e8e8;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
}
.hero__scroll:hover { text-decoration: underline; }
.hero__scroll:focus-visible { outline-color: #fff; }

/* ---------- ukázky / listovací kniha ---------- */

/* světle šedá „deska stolu", na které bílé stránky knihy vyniknou */
.samples { background: var(--grey-stage); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.pages-wrap { max-width: 72rem; margin: 0 auto; }

/* Bez JavaScriptu: vodorovný pás listů se scroll-snap zastavením. */
.book-stage {
  display: flex;
  align-items: stretch;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  padding: 1rem 0.4rem 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--ink-soft) rgba(0, 0, 0, 0.08);
}
.book-stage .page {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.book-stage::-webkit-scrollbar { height: 10px; }
.book-stage::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.08); border-radius: 5px; }
.book-stage::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 5px; }

/* Stránka jako ve skutečné knize: přesný čtverec, bílý papír,
   žádné rámečky ani naskládané stíny – jen jemné oddělení od podkladu. */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 560px);
  min-height: min(92vw, 560px);
  background: var(--page);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.35);
  padding: min(11vw, 64px) min(8.5vw, 50px) min(12.5vw, 72px);
}

/* Titul a báseň mají v knize stejný stupeň písma, titul je jen tučný.
   Váha básní 400 a mírně větší stupeň – kniha sází text v normálním
   řezu, ne tenkém. */
.page__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.36rem);
  line-height: 1.55;
  letter-spacing: 0.005em;
  margin-bottom: 1em;
}

/* větší mezera mezi nadpisem a básní dle tiskové sazby:
   dvě prázdné řádky (Smím prosit s. 69, Podzimní s. 83) */
.page__title--gap { margin-bottom: 2.5em; }
/* mezistupeň – Neboj se milovat s. 130 */
.page__title--gap-sm { margin-bottom: 1.8em; }

.page__poem {
  font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.36rem);
  line-height: 1.55;
}
.page__poem p + p { margin-top: 0.9em; }

/* pokračovací strana s. 131 (bez nadpisu): text nastupuje na lince
   prvního verše protější strany 130 – výška řádku nadpisu + jeho
   zvětšená mezera (page__title--gap-sm) */
.page--pokracovani .page__poem { margin-top: calc(1.55em + 1.8em); }

/* velké odmlky sazby: závorkové dovětky posazené hluboko pod básní */
.page__gap { margin-top: 3.4em !important; }
.page__gap--small { margin-top: 2.2em !important; }

/* Zarovnání stránek podle sazby sbírky (odsazení ~20 %). Nadpis vždy
   sdílí osu textu básně: u levostranných sedí na levé hraně textového
   bloku, u centrovaných na společné ose veršů – nikdy nemá vlastní
   nezávislé odsazení. */
.page--left .page__title,
.page--left .page__poem {
  text-align: left;
  padding-left: 22%;
  padding-right: 2%;
}
.page--center .page__title,
.page--center .page__poem { text-align: center; }
@media (max-width: 600px) {
  .page--left .page__title,
  .page--left .page__poem { padding-left: 12%; }
}

/* sloka zarovnaná vpravo uvnitř levostranné básně (Smím prosit s. 69):
   pravá hrana sloky sedí zhruba v 70 % šířky strany jako v tisku */
.page__stanza--right {
  text-align: right;
  padding-right: 22%;
}
@media (max-width: 600px) { .page__stanza--right { padding-right: 12%; } }

/* prostrkaná sazba („V dešti" s. 81): mezery mezi všemi písmeny,
   slovní mezery přirozeně větší; levé odsazení vyrovnává koncovou
   mezeru posledního písmene, aby verše seděly na společné ose */
.spaced-verse {
  letter-spacing: 0.55em;
  word-spacing: 0.35em;
  padding-left: 0.55em;
}

/* Hořčicové číslo stránky přesně jako v tištěné knize: drobné, běžný
   řez, dolní vnější roh (sudá čísla = levé strany knihy vlevo, lichá
   vpravo – modifikátor page__num--right). Dekorativní detail. */
.page__num {
  position: absolute;
  bottom: 5%;
  left: 8%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.8rem);
  letter-spacing: 0.02em;
  color: var(--folio);
}
.page__num--right { left: auto; right: 8%; }

/* Oddechová strana se třemi tečkami – věrná obdoba dvoustran knihy
   (s. 138–139): tři hořčicové kruhy na vodorovné ose strany zhruba
   v 70 % výšky, bez čísla strany. Statická, žádná animace. */
.page__dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  gap: 13.5%;
}
.page__dots span {
  width: 6.5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--yellow);
}

/* Obálky: skutečné rendery z tiskových dat vyplňují celý list. */
.page--cover { padding: 0; border: 1px solid rgba(0, 0, 0, 0.18); }
.page--cover picture { position: absolute; inset: 0; }
.page--cover .page__coverimg {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- režim listovací knihy (s JavaScriptem) ---------- */

/* Stránky leží na sobě; viditelná je jen aktuální (v dvoustraně dvě).
   Přepíná se prostým krátkým prolnutím – žádné 3D otáčení. */
.has-flipbook .book-stage {
  display: grid;
  justify-items: center;
  /* start místo stretch: krátká báseň drží svůj čtverec, i když je
     v balíku i delší stránka (ta smí být výjimečně vyšší) */
  align-items: start;
  touch-action: pan-y;
  overflow: visible;
  scroll-snap-type: none;
}
.has-flipbook .book-stage:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.has-flipbook .page {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  /* měkké prolnutí: odcházející stránka mizí souběžně s nastupující,
     visibility se přepne až po doběhnutí (žádné probliknutí pozadí);
     prefers-reduced-motion transition globálně vypíná = okamžitá výměna */
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  /* čtverec, který nikdy nepřeteče jeviště; delší báseň smí stránku
     výjimečně prodloužit (min-height: auto – čitelnost má přednost) */
  width: min(100%, 560px);
  min-height: auto;
  aspect-ratio: 1 / 1;
}
.has-flipbook .page.is-current {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}

/* ---------- rozevřená dvoustrana (široké obrazovky) ----------
   Každá stránka je přesný čtverec; dvě vedle sebe dají poměr 2:1
   jako skutečná rozevřená kniha 300 × 150 mm. */
.has-spread .book-stage {
  grid-template-columns: repeat(2, min(45vw, 560px));
  justify-content: center;
  column-gap: 0;
}
.has-spread .page {
  width: min(45vw, 560px);
  padding: min(4vw, 44px) min(3.6vw, 40px) min(4.6vw, 50px);
}
.has-spread .page.slot-left  { grid-area: 1 / 1; }
.has-spread .page.slot-right { grid-area: 1 / 2; }

/* Menší stupeň písma na dvoustraně, aby se i nejdelší báseň vešla do
   čtverce – oproti K4 mírně zvětšený; ladí se na nejdelší strany
   (Jsou rána s. 113, Neboj se milovat s. 130). */
.has-spread .page__title,
.has-spread .page__poem {
  /* strop 0.96rem: i nejdelší strana (Neboj se milovat, s. 130
     s větší mezerou pod nadpisem) drží přesný čtverec na 1280+ px */
  font-size: clamp(0.9rem, 0.76rem + 0.3vw, 0.96rem);
  line-height: 1.5;
}
.has-spread .page__title { margin-bottom: 0.8em; }
.has-spread .page__title--gap { margin-bottom: 2.2em; }
.has-spread .page__title--gap-sm { margin-bottom: 1.4em; }
.has-spread .page--pokracovani .page__poem { margin-top: calc(1.5em + 1.4em); }

/* čísla stránek na vnějších okrajích dvoustrany */
.has-spread .page.slot-left .page__num  { left: 8%; right: auto; }
.has-spread .page.slot-right .page__num { left: auto; right: 8%; }

/* naznačený hřbet: jemné stínování obou stránek směrem ke středu */
.has-spread .page.slot-left:not(.page--cover)::after,
.has-spread .page.slot-right:not(.page--cover)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.has-spread .page.slot-left:not(.page--cover)::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.02) 7%, rgba(0, 0, 0, 0) 16%);
}
.has-spread .page.slot-right:not(.page--cover)::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.02) 7%, rgba(0, 0, 0, 0) 16%);
}
/* hrany dvoustrany srůstají ve hřbetu; zadní obálka stojí v posledním
   stavu v levém slotu sama, její pravá linka proto zůstává */
.has-spread .page.slot-left:not(.page--cover) { border-right: 0; }

.pages-ui {
  display: none;              /* ovládání listování existuje jen s JS */
  align-items: center;
  justify-content: space-between;   /* šipky pevně na okrajích, neskáčou podle šířky textu */
  width: min(100%, 22rem);
  margin: 1.4rem auto 0;
  color: var(--ink);
}
.has-flipbook .pages-ui { display: flex; }
#pageCounter { flex: 1; text-align: center; padding: 0 0.5rem; }

/* listovací šipky: trvale hořčicové (jedno z mála žlutých míst webu) */
.page-btn {
  width: 2.7rem; height: 2.7rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.page-btn:hover { background: var(--ink); color: #fff; }
/* vypnutý stav pevnými barvami místo průhlednosti – glyf zůstává
   čitelný (~4,5:1) a stav je stále zřetelně odlišený od žluté */
.page-btn:disabled {
  cursor: not-allowed;
  background: #f0f0f0;
  color: #6e6e6e;
  border-color: #9a9a9a;
}
.page-btn:disabled:hover { background: #f0f0f0; color: #6e6e6e; }

/* ---------- kniha ---------- */

.book__text {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.18rem;
}

/* pět dlaždic kapitol: 5 v řadě na širokém, 3 + 2 na středním,
   2 + 2 + 1 na mobilu */
.chapters {
  list-style: none;
  max-width: 62rem;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
@media (max-width: 1000px) { .chapters { grid-template-columns: repeat(3, 1fr); max-width: 44rem; } }
@media (max-width: 700px) { .chapters { grid-template-columns: 1fr 1fr; } }

.chapter { position: relative; isolation: isolate; }
.chapter img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Název kapitoly a roky přímo ve fotce: HTML text v tmavém přelivu.
   Přeliv je v celé zóně textu dost sytý, aby bílý text držel ≥ 4,5:1
   i na nejsvětlejších místech fotek; horní třetina měkce vybíhá do
   ztracena. */
.chapter__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 2.4rem 0.85rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.83) 70%, rgba(0, 0, 0, 0.35) 88%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.chapter__name {
  font-weight: 500;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  line-height: 1.3;
}
.chapter__years { color: #e3e3e3; font-size: 0.78rem; }

/* ---------- autorka ---------- */

/* tenké linky mezi sousedícími bílými sekcemi */
.author, .landscape { border-top: 1px solid var(--rule); }

.author__grid {
  max-width: 58rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 780px) {
  .author__grid { grid-template-columns: 1fr; }
  .author__photo { margin: 0 auto; }
}

.author__photo { max-width: min(420px, 100%); }
/* Popisek pod fotkou: dva řízené řádky roztažené od kraje ke kraji
   šíře fotografie; za první trojtečkou vždy následuje slovo. */
.author__photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.author__caption-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.author__caption-line + .author__caption-line { margin-top: 0.25rem; }
/* na úzkých displejích menší stupeň, aby se řádky nerozpadly */
@media (max-width: 420px) {
  .author__photo figcaption { font-size: 0.72rem; letter-spacing: 0.02em; }
}

/* svislé tři tečky jako oddělovač (místo dvojtečky) – čistě CSS */
.vsep {
  display: inline-block;
  width: 0.3em;
  height: 1.25em;
  position: relative;
}
.vsep::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -0.4em 0 currentColor, 0 0.4em 0 currentColor;
  transform: translate(-50%, -50%);
}

.author__quote {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.7;
}

.author__name {
  margin-top: 1.4rem;
  font-weight: 700;
  font-size: 1.2rem;
}

/* ---------- básně v krajině ---------- */

.landscape__grid {
  max-width: 58rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 780px) { .landscape__grid { grid-template-columns: 1fr; } }

.landscape__text { font-size: 1.18rem; }
.landscape__text p + p { margin-top: 1.2rem; }
.landscape__photo { max-width: min(480px, 100%); }
@media (max-width: 780px) { .landscape__photo { margin: 0 auto; } }

/* Žlutá lavička: po najetí myší se přes fotku prolne pixelově
   zarovnaná verze se žlutě kolorovanou lavičkou. Dekorativní vrstva
   (aria-hidden, prázdný alt) mimo tok stránky – nemění layout ani
   pořadí fokusu; efekt je vědomě jen pro přesný ukazatel s hoverem. */
.landscape__photo { position: relative; }
.landscape__photo-zluta {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.landscape__photo-zluta img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .landscape__photo-zluta { transition: opacity 0.4s ease; }
  .landscape__photo:hover .landscape__photo-zluta { opacity: 1; }
}
/* bez animací zůstává efekt zachovaný, jen bez prolnutí (globální
   pravidlo reduced motion níže vypíná transition, tohle je pojistka) */
@media (prefers-reduced-motion: reduce) {
  .landscape__photo-zluta { transition: none; }
}

/* ---------- přátelé a tvůrci ---------- */

/* jemný odstín šedé před tmavou objednávkou */
.friends { background: var(--grey-bg); border-top: 1px solid var(--rule); }

.friends__intro {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.18rem;
}
.friends__intro p + p { margin-top: 1.2rem; }
/* disclaimer celý tučně – skutečný lokální řez IBM Plex Mono
   SemiBold 600 (fonts.css), žádná syntetická tučnost */
.friends__note { text-transform: none; letter-spacing: 0.05em; font-weight: 600; }

.products {
  list-style: none;
  max-width: 62rem;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
@media (max-width: 860px) { .products { grid-template-columns: 1fr; max-width: 30rem; } }

.product {
  border: 1px solid var(--rule);
  background: var(--page);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: center;
}

/* ---------- galerie výrobku: hlavní obrázek + mřížka náhledů.
   Bez JS: prostá mřížka všech obrázků (kontaktní arch). JS přidá
   jeviště s měkkým prolnutím a povýší mřížku na tablist – třída
   gallery--on až po úspěšném zapojení (stejný princip jako
   has-flipbook). ---------- */

.gallery { margin-bottom: 0.35rem; }

/* fallback: všechny obrázky viditelné ve 2 sloupcích */
.gallery__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--page);
}

/* jediný obrázek (karta s jednou fotkou, JS se nezapojuje) */
.gallery__item:only-child { grid-column: 1 / -1; }

.gallery__caption {
  margin-top: 0.5rem;
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

/* ---------- povýšený režim (gallery--on přidává JS) ---------- */

/* jeviště: panely leží na sobě, viditelný jen aktuální – stejná
   mechanika prolnutí jako stránky listovací knihy */
.gallery__stage {
  display: grid;
  touch-action: pan-y;
}
.gallery__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  /* prefers-reduced-motion transition globálně vypíná = okamžitá výměna */
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.gallery__panel.is-current {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}
.gallery__panel img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--page);
}
.gallery__panel:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* mřížka náhledů: všechny naráz ve 4 sloupcích, žádné zkracování
   ani posouvání */
.gallery--on .gallery__list {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.gallery__tab {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--page);
  cursor: pointer;
}
.gallery__tab img { border: 0; }           /* rámeček nese button */
.gallery__tab:hover { border-color: var(--ink); }
.gallery__tab[aria-selected="true"] {
  border-color: var(--ink);
  /* ostrá žlutá linka pod aktivním náhledem – plná čára bez rozostření
     (žlutá jen na akcentech, žádné stíny); box-shadow nemění layout */
  box-shadow: 0 3px 0 var(--yellow);
}
.gallery__tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* místo pro fotky, které se doplní po dodání */
.product__media--empty {
  overflow: visible;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--rule);
  background: var(--grey-inset);
  display: grid;
  place-items: center;
  margin-bottom: 0.35rem;
}
.product__media--empty .mono { font-size: 0.78rem; letter-spacing: 0.12em; }

.product__name {
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.4;
}
/* krátký popisek výrobku */
.product__desc { font-size: 1rem; line-height: 1.55; }
.product__price, .product__maker { text-transform: none; letter-spacing: 0.05em; }
.product__order { margin-top: auto; padding-top: 0.9rem; }
.product__order a {
  font-family: var(--mono);
  font-size: 0.87rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- objednávka ---------- */

/* Tmavý závěr stránky: objednávka na inkoustové jako hero.
   Všechny texty a ovládací prvky mají na tmavé kontrast ≥ 4,5:1. */
.order {
  background: var(--dark-bg);
  color: var(--dark-text);
}
.order .section-kicker,
.order .mono { color: var(--dark-text-soft); }
.order :focus-visible { outline-color: var(--dark-text); }

.order__grid {
  max-width: 66rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.order__grid > * { min-width: 0; }
@media (max-width: 860px) { .order__grid { grid-template-columns: 1fr; } }

.order__info { font-size: 1.14rem; }
.order__copy p + p { margin-top: 1rem; }

.order__price { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; }
.order__price-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 2.7rem);
}

.order__alt { margin-top: 1.1rem; text-transform: none; letter-spacing: 0.05em; }

.order__photo { margin-top: 2rem; max-width: min(420px, 100%); }
.order__photo img { border: 1px solid var(--dark-rule); }
.order__photo figcaption { margin-top: 0.6rem; text-transform: none; letter-spacing: 0.05em; }

/* objednací lístek (deaktivovaná maketa) na tmavém podkladu */
.slip {
  background: var(--dark-panel);
  border: 1px solid var(--dark-rule);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

.slip__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 560px) { .slip__row { grid-template-columns: 1fr; gap: 0; } }
.slip__field--narrow { max-width: 12rem; }

.slip__field { margin-bottom: 1.3rem; }

.slip__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  color: #b8b8b8;   /* na --dark-panel ≥ 8:1 */
  letter-spacing: 0.08em;
}

.slip__field input,
.slip__field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed #9a9a9a;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.125rem; /* iOS pod 16 px zoomuje na focus */
  color: var(--dark-text);
  padding: 0.35rem 0.1rem;
  border-radius: 0;
  resize: vertical;
}
.slip__field input:focus-visible,
.slip__field textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--dark-text);
}
.slip__field ::placeholder { color: #a8a8a8; opacity: 1; }

.slip__submit {
  width: 100%;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  padding: 1.05rem 1.7rem;
}

.slip__gdpr {
  margin-top: 1rem;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.mock-slip fieldset { border: 0; min-width: 0; }

.mock-slip__warning {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--yellow);
  background: var(--dark-inset);
  color: var(--dark-text);
  font-size: 1rem;
  line-height: 1.5;
}

.mock-slip :disabled { cursor: not-allowed; opacity: 1; }

.mock-slip input:disabled,
.mock-slip textarea:disabled {
  color: #cfcfcf;
  background: var(--dark-inset);
  border-bottom-color: #8a8a8a;
}

.mock-slip .btn:disabled {
  background: #3a3a3a;
  color: #d6d6d6;
  border-color: #8a8a8a;
}

/* ---------- tiráž ---------- */

/* tmavá patička navazuje na tmavou objednávku */
.colophon {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3rem clamp(1.25rem, 5vw, 3rem) 3.4rem;
  text-align: center;
}
.colophon .mono { color: var(--dark-text-soft); }
.colophon :focus-visible { outline-color: var(--dark-text); }
.colophon__brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.colophon p.mono { margin-top: 0.35rem; }

/* sekce „podporuju": mono kicker + dvě loga s odkazy;
   loga na světlé podložce, aby byla na tmavé patičce čitelná */
.colophon__support { margin-top: 1.6rem; }
.colophon__support-kicker { letter-spacing: 0.24em; }
.colophon__support-logos {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.colophon__support-logos a {
  display: inline-flex;
  align-items: center;
  background: var(--dark-text);
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
}
.colophon__support-logos img {
  height: 32px;
  width: auto;
  filter: grayscale(1);
}
.colophon__support-logos a:hover img,
.colophon__support-logos a:focus-visible img { filter: grayscale(0); }
.colophon__support + p.mono { margin-top: 1.6rem; }

/* ---------- zklidnění pohybu ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}