/* ==========================================================================
   nelligaspar.com — katalog

   Jedno rolování, žádná trvalá navigace. Hloubku dělá jedna tloušťka linky
   a jeden odstín papíru — jako v tištěném katalogu, ne stíny a zaoblení.

   Vědu nesou měření a struktura, nikdy ikona. Žádné molekuly, šestiúhelníky
   ani baňky — ty se čtou jako ozdobená šablona.

   ⚠️ INVARIANTY. Všechny strojově kontrolované `tools/check.php`, všechny
      se snadno poruší a každý z nich už něco stál:

        border-radius          MUSÍ BÝT 0   nic není zaoblené
        text-transform         MUSÍ BÝT 0   velká písmena jsou obsah
        box-shadow             MUSÍ BÝT 0   hloubku dělá linka a odstín
        overflow-x: hidden     MUSÍ BÝT 0   vytváří scroll kontejner a tiše
                                             zabíjí position: sticky
        chroma mimo :root      MUSÍ BÝT 0   barva přichází jen z obrazů
        chroma v :root         MUSÍ BÝT 0   stránka nemá značkovou barvu

      Prostrkaný uppercase mikropopisek, pilulková tlačítka, hover
      translateY(-2px) a kartové odznaky jsou rodinné znaky i99.cz,
      primego.cz a mystylepets.cz. Do v1.0.0 byl tenhle web jejich forkem.
   ========================================================================== */

/* ── Písmo ──────────────────────────────────────────────────────────────────
   DVĚ rodiny od v4.0.0, rozdělené VÝZNAMEM, ne mechanicky. Serif (Literata)
   nese Nellin hlas — prózu, poznámky na okraji, nadpisy sekcí. Grotesk
   (Archivo) nese aparát okolo něj — jméno, štítek desky, katalogová čísla,
   tabulku, kolofon. Dvojakost vědkyně/malířky dřív nesl dvouosý graf;
   od téhle verze ji nese sazba. Obě rodiny jsou pod SIL OFL 1.1 a hostujeme
   si je sami — cizí původ by znamenal rozšiřovat CSP a posílat IP
   návštěvníků třetí straně.

   Archivova osa šířky dál nese hierarchii aparátu. Tohle jsou KANONICKÉ
   STUPNĚ, ne úplný seznam — mezi nimi žijí i mezistupně (88 u názvů děl
   a odkazů, 92 u předělů, 100 u běžného textu v grotesku, 112 u nadpisu
   404). Kanonické znamená: když zavádíš nový, sáhni nejdřív po některém
   z těchhle tří:

     wdth 62   katalogová čísla, roky              (nejužší, tabulární)
     wdth 72   muzejní štítek, tabulka, popisky
     wdth 118  jméno

   Literata osu šířky nemá — svou hierarchii (próza, poznámky, h2, epigraf)
   nese jen osou `wght`, viz komentář u jejího `@font-face` níž.

   ⚠️ `font-stretch: 62% 125%` v Archivově `@font-face` je POVINNÉ. Bez něj
      je osa `wdth` nedosažitelná, i když ji soubor obsahuje, a celá
      hierarchie aparátu se zhroutí do jedné šířky.
   ⚠️ Když nastavuješ `font-variation-settings`, vypisuj VŽDY i `'wght'` —
      jinak se ostatní osy resetují na výchozí. U Archiva to znamená psát
      `'wght' N, 'wdth' M` pohromadě.
   ⚠️ Bez `-webkit-font-smoothing: antialiased`. Ztenčuje tahy, což je
      u úzkých řezů přesně obráceně, než co je potřeba — a mají ho zapnuté
      všechny tři sesterské weby.

   ŽÁDNÁ KURZÍVA na celém webu, a proto ani žádný soubor kurzívy: názvy děl
   odlišuje šířka, ne sklon. Syntetizovaná oblique z grotesku vypadá levně
   a dvě další písma by byla dva další soubory k ověřování. Do v2.0.0 tu
   byla Bodoni Moda se čtyřmi soubory; didone je podpis muzejního katalogu,
   ne měřícího přístroje.

   `lat` stačí angličtině, `ext` nese diakritiku. Web je zatím anglicky,
   ale `ext` řez zůstává — až přibude čeština, bez něj se `ě š č ř ž`
   vykreslí náhradním písmem.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/archivo-lat.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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/archivo-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;
}

/* Druhá rodina od v4.0.0: Archivo dál nese aparát (jméno, štítky, čísla,
   tabulku, kolofon), próza a nadpisy sekcí přešly od téhle verze na
   Literatu — viz rozdělení výš. Serif s optickou velikostí, žádná osa
   šířky, proto bez `font-stretch`. `opsz` použije sama, jakmile ji text
   potřebuje — `font-optical-sizing: auto` je výchozí hodnota. */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/literata-lat.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: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/literata-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;
}

/* ── Tokeny ─────────────────────────────────────────────────────────────────
   ZÁKON O BARVĚ: stránka nemá značkovou barvu. Podklad (--ground, --ground-2,
   --edge) smí od v4.0.0 nést nízkou teplou chromu do 0,06 — papír není
   šedivý. Každý další token nese chromu přesně nulovou. Jediná SYTÁ barva,
   kterou návštěvník uvidí, přichází z obrazů. Každá šablona chce akcent;
   tohle je to, co se nedá napodobit, a `tools/check.php` to hlídá
   v obou směrech.

   Naměřené kontrasty (WCAG 2.x, přepočítané po výměně palety):

                   na --ground     na --ground-2
     --ink          15,7 : 1        14,0 : 1
     --ink-2         9,6 : 1         8,6 : 1
     --ink-3         5,5 : 1         4,9 : 1

   Všechny tři unesou běžný text. Fokusový prstenec nese `--ink`, tedy
   15,7 : 1 — do v2.0.0 ho nesla červenohnědá a bylo to jediné místo, kde
   na akcentu něco viselo.

   `--edge` je vlasová linka, 1,6 : 1. Je to dekorativní oddělovač, ne prvek
   rozhraní — nese-li něco význam, patří na to `--ink-3`.

   ⚠️ Po každém zásahu do barev spusť audit z `docs/RUNBOOK.md` a přepiš
      naměřená čísla TADY i v `CLAUDE.md`.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Podklad. Papír, ne šeď — od v4.0.0 smí nést nízkou teplou chromu.
     Značková barva to není: akcent má chromu dál nulovou a jediná sytá
     barva na stránce přichází z obrazů. */
  --ground: #F4EFE6;
  --ground-2: #E8E3D9;
  --edge: #C5C0B6;

  /* Inkoust. Beze zbytku neutrální — podklad smí nést teplo, inkoust ne. */
  --ink: #171717;
  --ink-2: #3C3C3C;
  --ink-3: #606060;

  /* Mřížka a rytmus */
  --rule: 1px;
  --gutter: clamp(1rem, 1.6vw, 1.75rem);
  --margin: clamp(1.25rem, 3.2vw, 3.5rem);
  --sheet-max: 74rem;
  --measure: 34rem;
  --note-w: 12rem;
  --note-gap: 1.5rem;
  --step: clamp(3.5rem, 6vw, 6rem);
  --plate-gap: clamp(2.5rem, 5vw, 5.5rem);

  /* Písmo */
  --ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Pohyb */
  --tick: .18s;
  --sweep: .9s;
  --curve: cubic-bezier(.2, .8, .3, 1);
  --curve-plate: cubic-bezier(.16, .84, .44, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────────
   ⚠️ Bez `overflow-x: hidden` na body — vytvořilo by scroll kontejner
      a tiše zabilo `position: sticky`, kdyby ho stránka někde použila.
      Přetečení se řeší tam, kde vzniká: tabulka má vlastní posuvnou oblast.
   ────────────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--ff);
  font-size: 1rem;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  line-height: 1.6;
}

/* Zrno. Jediná dekorace, která na webu je — neutrální podklad bez struktury
   vypadá jako plochý vzorník. Leží ZA obsahem, takže tónuje papír
   a nezašpiní text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  margin: 0 0 .6em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

/* Nadpis sekce je její věta, ne popisek aparátu — proto serif. */
h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'wght' 560;
}

/* `h3` zůstává Archivo: jediné dva výskyty jsou `.year-h` (datum, ne věta —
   má vlastní kompletní přepis níž) a titulek kroku v Postupu, který zdědí
   Literatu z `.steps`, protože `font-family` tady záměrně nenastavujeme. */
h3 {
  font-size: 1.05rem;
  font-variation-settings: 'wght' 600;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Názvy děl odlišuje ŠÍŘKA, ne sklon. `font-style: normal` schválně:
   výchozí kurzíva u `<cite>` by se z grotesku syntetizovala jako oblique. */
cite {
  font-style: normal;
  font-variation-settings: 'wdth' 88, 'wght' 500;
}

img, svg { max-width: 100%; }

/* Odkazy jsou podtržené od začátku. Hover mění tloušťku a tmavne —
   žádné dokreslované `scaleX` podtržítko, to je znak sesterských webů. */
a {
  color: var(--ink-2);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--edge);
  transition: text-decoration-color var(--tick) var(--curve),
              text-decoration-thickness var(--tick) var(--curve),
              color var(--tick) var(--curve);
}
a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}

button { font: inherit; color: inherit; }

table { border-collapse: collapse; }

::selection { background: var(--ground-2); color: var(--ink); }

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

.skip {
  position: absolute; left: var(--margin); top: 0;
  z-index: 20;
  transform: translateY(-120%);
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
  transition: transform var(--tick) var(--curve);
}
.skip:focus { transform: translateY(0); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Arch ───────────────────────────────────────────────────────────────────
   Jeden sloupec na každé šířce. Stránka nemá trvalou navigaci, která by
   si žádala druhý — rozcestí je jen tabulka na konci proudu. */

.sheet {
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding: var(--margin);
}

.stream { display: block; }

.block { margin-bottom: var(--step); }
.block > h2 { margin-bottom: .8em; }

/* ── Hlavička ───────────────────────────────────────────────────────────── */

.masthead {
  margin-bottom: var(--step);
  padding-bottom: 1.4rem;
  border-bottom: var(--rule) solid var(--edge);
}

.name {
  margin: 0 0 .25em;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(2.4rem, 1.9rem + 2.1vw, 3.4rem);
  font-variation-settings: 'wdth' 118, 'wght' 600;
}
.name a {
  color: inherit;
  text-decoration: none;
}
.name a:hover { color: var(--ink-2); }

.line {
  max-width: 30rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  color: var(--ink-2);
}

/* Poznámka o chybějících kontaktech. Druhá je v kolofonu; obě musí zmizet
   naráz, až Nelli kontakty dodá. */
.note {
  max-width: 26rem;
  margin: 0;
  font-size: .85rem;
  font-variation-settings: 'wdth' 72, 'wght' 400;
  color: var(--ink-3);
}

/* ── Próza ──────────────────────────────────────────────────────────────── */

/* Serif nese Nellin hlas. `.prose-p` (i `.step` níž v Postupu) leží vždycky
   uvnitř `.prose` nebo `.steps.prose`, takže rodinu a `wght` zdědí — psát je
   dvakrát by bylo jen šum. Literata nemá osu šířky, proto tu jen `wght`. */
.prose {
  max-width: var(--measure);
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'wght' 400;
}

/* Stejná velikost co dřív u Archiva čte v serifu drobněji — o 1/16rem výš,
   ať míra (`--measure`) zůstane pohodlná na čtení. */
.prose-p {
  margin: 0 0 1.1em;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Epigraf nese šířku a velikost, ne kurzívu. Lehčí řez než próza — je to
   citát, ne odstavec, a při 400 na 1.2rem vedle prózy splýval. */
.epigraph {
  max-width: var(--measure);
  margin: 0 0 1.8rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--ink);
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  font-variation-settings: 'wght' 340;
  line-height: 1.45;
  color: var(--ink);
}

/* Přiznání, že desky jsou zástupné. Musí zůstat vidět, dokud nejsou fotky.
   Bez akcentu ho nese přitížení a linka nad i pod. */
.standing {
  max-width: var(--measure);
  margin: 0 0 2.2rem;
  padding: .8rem 0;
  border-top: var(--rule) solid var(--ink-3);
  border-bottom: var(--rule) solid var(--ink-3);
  font-size: .9375rem;
  font-variation-settings: 'wdth' 88, 'wght' 500;
  color: var(--ink);
}

/* ── Rejstřík desek ─────────────────────────────────────────────────────────
   Seznam desek vepředu, jako v tištěném katalogu. Je to APARÁT, ne Nellin
   hlas — proto celý Archivem, ne Literatou, a proto tatáž gramatika jako
   štítek u desky: číslo `wdth 62`, název `wdth 72`, rok `wdth 62`, všechna
   čísla tabulková.

   ⚠️ `repeat(auto-fill, …)`, ne `auto-fit`. `auto-fit` je na anti-fork
      seznamu (hlídá ho `check.php`) a chová se tu navíc jinak: prázdné
      dráhy by srazil a poslední řádek by se roztáhl přes celou šířku.
      `20rem` místo užší míry schválně — při `15rem` vyjdou na širokém archu
      čtyři sloupce a název díla se v nich láme na dva řádky.

   Bez odrážek, bez odznaků, bez rámečků: řádky dělí vlasová linka, přesně
   jako řádky tabulky dole. */

.toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  column-gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-item { border-top: var(--rule) solid var(--edge); }

/* Odkaz je celý řádek, ale podtržený je jen NÁZEV — podtrhnout naráz číslo,
   název i rok dělá z rejstříku tři podtržené sloupce a čte se to jako chyba.
   Pravidlo „odkazy jsou podtržené od začátku" tím platí dál, jen ho nese
   ta část odkazu, která pojmenovává cíl. */
.toc-link {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem 0;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-decoration-line: none;
}

.toc-no {
  flex: none;
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 62, 'wght' 500;
  color: var(--ink-3);
  white-space: nowrap;
}

.toc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  font-style: normal;
  font-variation-settings: 'wdth' 72, 'wght' 400;
  color: var(--ink-2);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--edge);
  transition: color var(--tick) var(--curve),
              text-decoration-color var(--tick) var(--curve),
              text-decoration-thickness var(--tick) var(--curve);
}

.toc-year {
  flex: none;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 62, 'wght' 400;
  color: var(--ink-3);
}

.toc-link:hover .toc-title,
.toc-link:focus-visible .toc-title {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}
.toc-link:hover .toc-no,
.toc-link:hover .toc-year { color: var(--ink-2); }

/* ── Muzejní štítek ─────────────────────────────────────────────────────────
   Tři řádky, vždy v tomto pořadí, u každé desky i v prohlížeči. Ta
   neměnnost je celé zařízení — opakování jedné gramatiky přes všechna díla
   dělá z galerie katalog.

   ⚠️ Žádné `text-transform` (obsah už velký je), prostrkání .04em místo
      .16em, Archivo v úzkém řezu místo monospace. Prostrkaný uppercase
      mikropopisek mají i99.cz, primego.cz i mystylepets.cz. */

.tomb {
  /* Pozicovací kontext pro `.tomb-no`, který se od `min-width: 78rem`
     stěhuje na okraj — viz §Responzivně. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  margin: 0;
  padding-top: .7rem;
  border-top: var(--rule) solid var(--edge);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Katalogové číslo je značka na okraji, ne řádek štítku — bez rámečku
   a bez odznaku, kruhový očíslovaný odznak je na anti-fork seznamu.
   Pod zlomem (výš) zůstává prostě prvním řádkem `.tomb` v toku, přesně
   jako dřív; jen na širokém zlomu se v §Responzivně vysune ven. */
.tomb-no {
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 62, 'wght' 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--tick) var(--curve);
}

.tomb-title {
  font-size: 1.1rem;
  font-variation-settings: 'wdth' 92, 'wght' 500;
  line-height: 1.3;
  color: var(--ink);
}

.tomb-meta {
  font-size: .8125rem;
  font-variation-settings: 'wdth' 72, 'wght' 400;
  color: var(--ink-3);
  transition: font-variation-settings var(--tick) var(--curve);
}

/* Deska ožije proměnou osy šířky, ne posunem. Rozevření písma je něco,
   co šablona neumí, a přitom to nestojí nic. */
.plate:hover .tomb-meta,
.plate:focus-within .tomb-meta { font-variation-settings: 'wdth' 88, 'wght' 400; }
.plate:hover .tomb-no,
.plate:focus-within .tomb-no { color: var(--ink); }

/* Tlačítko prohlížeče je text až ZA popiskem, ne celoplošná lupa nad
   obrazem. Zapíná ho až `viewer-ready`, viz §Prohlížeč. */
.tomb-open { display: none; }
.js.viewer-ready .tomb-open {
  display: inline;
  align-self: flex-start;
  margin-top: .45rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: .8125rem;
  font-variation-settings: 'wdth' 72, 'wght' 500;
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--edge);
  cursor: zoom-in;
  transition: color var(--tick) var(--curve),
              text-decoration-color var(--tick) var(--curve);
}
.js.viewer-ready .tomb-open:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ── Roky ───────────────────────────────────────────────────────────────────
   Rok je nadpis, který dělí proud desek na skupiny; pod ním je vždycky
   jeden sloupec. */

/* Bez `:last-child` výjimky, a to schválně. Odstup je týž `--step`, jakým
   `.block` odděluje každou jinou sekci na stránce, a `.years` sama žádný
   margin nemá — takže vyjde stejně, ať za rokem následuje prokládaná próza
   (dnes vždycky, viz `$interleave` v `public/index.php`), nebo ať je rok
   posledním potomkem a za `.years` přijde rovnou rejstřík. Kdysi tu bylo
   `.year:last-child { margin-bottom: 0 }`; nulovalo mezeru, kterou v obou
   případech chceme. Ta výjimka nezmizela proto, že by se nemohla spustit —
   spustit se může, jakmile skupin let přibude třetí — ale proto, že by
   spustit neměla. */
.year { margin-bottom: var(--step); }

.year-h {
  margin: 0 0 1.4rem;
  padding-bottom: .4rem;
  border-bottom: var(--rule) solid var(--edge);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 62, 'wght' 600;
  color: var(--ink);
  scroll-margin-block-start: var(--step);
}

/* `minmax(0, 1fr)` a `min-width: 0` jsou obojí POVINNÉ, ne kosmetika:
   položka mřížky má výchozí `min-width: auto`, takže se odmítá zmenšit
   pod vlastní obsah. Deska nese `width`/`height` atributy ze SVG i <img>,
   takže bez tohohle na úzkém displeji roztlačí celou stránku do strany.
   **Už se to jednou stalo.** */
.plates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--plate-gap);
}

.plate {
  margin: 0;
  min-width: 0;
}

/* `.plate-body` obepíná zákal i `.plate-img`, ale NE `figcaption` — díky
   tomu štítek sedí vždycky na čistém papíru, ne na zákalu. Invariant je
   geometrický, ne barevný, a hlídá ho prohlížečová kontrola „žádný text
   neleží na zákalu" v check-browser.mjs. Pozicovací kontext je proto na ní,
   ne na `.plate` — a spolu s ním i `inline-size: fit-content`, viz pravidlo
   `.plate-body` níž u rámu. */

/* Zákal leží POD obrazem a přetéká jen do POSTRANNÍCH okrajů archu —
   `.sheet` má `padding: var(--margin)` (níž), takže `100 % + 2×--margin`
   sahá přesně k hraně ARCHU. K hraně viewportu jen tehdy, když je arch
   širší než `--sheet-max`; na 1440 px stojí arch 128→1312 a zákal s ním.
   Přetečení stránky je tak nulové STAVEBNĚ, ne náhodou — a to rozlití
   měří `check-browser.mjs` (zákal je o 2×--margin širší než obraz).
   Svisle zůstává přesně v `.plate-body` (`block-size: 100 %`),
   takže nezasahuje pod obraz do štítku ani nad obraz do sousední desky.
   `pointer-events: none`, protože to není obsah, je to tón papíru.
   ⚠️ `max-width: none` je POVINNÉ: globální reset `img, svg { max-width:
      100% }` (výš, řádek ~230) by jinak `inline-size` sám seřízl zpátky na
      100 % šířky desky — přesně tohle se stalo v první verzi tohohle
      pravidla a zákal nikdy nedosáhl k okraji. Rozostření `#soft` s
      přetečením nemá nic společného, jen desku vizuálně změkčuje. */
.wash {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  max-width: none;
  inline-size: calc(100% + 2 * var(--margin));
  block-size: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Rám obepíná OBRAZ a končí tam, kde obraz — nerozpíná se na sloupec.
   `fit-content` na `.plate-body` je zároveň to, co drží zákal u desky:
   `.wash` má `inline-size: calc(100 % + 2 * var(--margin))` a těch 100 %
   měří právě `.plate-body`. Kdyby byla `.plate-body` široká jako sloupec,
   plave zákal mimo desku a deska přes něj stejně leží neprůhledná.

   Velikost nese `width`/`height` ze SVG (nebo z `<img>`), tedy `plate_px()`
   v `web/app/lib/art.php`. Proto tu NENÍ `width: 100 %`: to byla ta chyba
   v4.0.0 — každá deska přes celý sloupec, všech devět vyšších než okno.
   `max-block-size: 66svh` je strop na výšku, aby ani nejvyšší deska nebyla
   nikdy celá obrazovka; `max-inline-size: 100 %` ji na úzkém displeji zmenší
   na sloupec. Obojí je STROP, ne velikost — poměr stran si prohlížeč u
   nahrazeného prvku dopočítá sám, takže se kompozice nedeformuje.

   Desky zůstávají zarovnané K LEVÉ hraně sazby, ne na střed: sloupec prózy
   začíná tam a deska je předmět položený na týž papír, ne obrázek v rámu. */
.plate-body {
  position: relative;
  inline-size: fit-content;
  max-inline-size: 100%;
}

.plate-img {
  inline-size: fit-content;
  max-inline-size: 100%;
  border: var(--rule) solid var(--edge);
  background: var(--ground-2);
  transition: border-color var(--tick) var(--curve);
}

.art,
.plate-img img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 66svh;
}

/* Muzejní štítek se drží vlastního textu, ne šířky sloupce — nemá se
   rozpínat na celou šířku desky jako podpis přes celý obraz. */
.plate .tomb { width: max-content; max-width: 100%; }

/* Skok z tabulky musí být vidět. Funguje i bez JavaScriptu — proto
   `:target`, ne třída od skriptu. Bez akcentu to nese inkoust. */
.plate { scroll-margin-block-start: var(--step); }
.plate:target .plate-img { border-color: var(--ink); }
.plate:target .tomb-no { color: var(--ink); }

/* ── Katalog ────────────────────────────────────────────────────────────────
   Tabulka se na úzkém displeji POSOUVÁ, nestohuje se do karet. Rozbít
   katalog na karty zničí jediné, k čemu tabulka je — porovnávání sloupce
   dolů po stránce — a vrátilo by přesně ten kartový vzor, kvůli kterému
   redesign vznikl.

   Tabulka nese tatáž data jako proud desek výš, jen druhou reprezentací:
   proudem se jde shora dolů a dílo po díle, tabulkou po sloupcích a napříč
   všemi naráz. Je zároveň jediné rozcestí, které stránka má — každý řádek
   míří na kotvu desky. */

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.table-scroll:focus-visible { outline-offset: 0; }

.cat {
  width: 100%;
  min-width: 34rem;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .9rem;
}

.cat caption {
  margin-bottom: .9rem;
  text-align: left;
  font-size: .85rem;
  font-variation-settings: 'wdth' 88, 'wght' 400;
  color: var(--ink-3);
}

.cat th, .cat td {
  padding: .55rem .9rem .55rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: var(--rule) solid var(--edge);
}

.cat thead th {
  border-bottom-color: var(--ink-3);
  font-size: .8125rem;
  font-variation-settings: 'wdth' 72, 'wght' 600;
  color: var(--ink);
}

.cat tbody th { font-weight: 400; }

.cat tbody tr:hover { background: var(--ground-2); }

.c-no, .c-year, .c-dim {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.c-no { font-variation-settings: 'wdth' 72, 'wght' 400; }

.cat td:last-child, .cat th:last-child { padding-right: 0; }

/* ── Věda ───────────────────────────────────────────────────────────────────
   Fakta nesou TÝŽ typografický jazyk jako štítek u desky. Jedna gramatika
   na celé stránce — to je to, co z webu dělá katalog, a ne galerii. */

.facts {
  display: grid;
  gap: 0;
  max-width: var(--measure);
  margin: 0 0 2rem;
  border-top: var(--rule) solid var(--edge);
}

.fact {
  display: flex;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: var(--rule) solid var(--edge);
}

.fact dt {
  flex: none;
  width: 7rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variation-settings: 'wdth' 72, 'wght' 500;
  color: var(--ink-3);
  line-height: 1.8;
}

.fact dd {
  margin: 0;
  font-size: 1.05rem;
  font-variation-settings: 'wdth' 92, 'wght' 500;
  color: var(--ink);
}

/* ── Postup ─────────────────────────────────────────────────────────────────
   Číslo dělá `::marker` s `decimal-leading-zero` — ne kruhový odznak
   na kartě. Odznaky má i99.cz, primego.cz i mystylepets.cz. */

/* Titulek a text kroku jsou její věta, proto Literata (zdědí ji `<h3>`
   i `.prose-p` uvnitř, protože jim tu záměrně nenastavujeme font-family).
   Číslo kroku je ale datum jako katalogové číslo, ne věta — `::marker` níž
   proto rodinu přepisuje zpátky na Archivo. */
.steps {
  margin: 0;
  padding: 0 0 0 3rem;
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'wght' 400;
  list-style: decimal-leading-zero;
}

.step { margin-bottom: 1.8rem; }
.step:last-child { margin-bottom: 0; }

.step::marker {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.05rem;
  font-variation-settings: 'wdth' 62, 'wght' 500;
  color: var(--ink-3);
}

.step h3 { margin-bottom: .35em; }

/* ── Poznámky na okraji ─────────────────────────────────────────────────────
   Základ: blok v textovém sloupci s vlasovou linkou. Na nejširším zlomu
   plavou na okraj, viz §Responzivně.

   ⚠️ Bez `<details>`. Jsou to jedna dvě věty a schovávat je na nejužších
      displejích je horší pro čtenáře, pro vyhledávání i pro tisk. */

/* Odkazová značka je číslo, ne věta, a sedí uvnitř `.prose-p` — bez
   výslovného Archiva by zdědila Literatu z `.prose` výš. */
.ref {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .7em;
  line-height: 0;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 700;
}

.sidenote {
  display: block;
  margin: .9rem 0;
  padding-left: .9rem;
  border-left: var(--rule) solid var(--edge);
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: .875rem;
  font-variation-settings: 'wght' 400;
  line-height: 1.55;
  color: var(--ink-3);
}

/* Číslo poznámky je zas datum, ne věta — stejný důvod jako u `.ref`. */
.sidenote-n {
  margin-right: .4rem;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variation-settings: 'wdth' 72, 'wght' 700;
  color: var(--ink);
}

/* ── Kolofon ────────────────────────────────────────────────────────────────
   Patička je dokument o dokumentu — přesně to `contentinfo` znamená —
   a zároveň nese druhé přiznání o zástupných obrazech. */

.colophon {
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--edge);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Nadpis "Colophon" zůstává na obecném pravidlu `h2` (Literata) — jen sází
   o řád těžší a bez osy šířky, kterou Literata nemá. */
.colophon h2 {
  font-size: 1.2rem;
  font-variation-settings: 'wght' 600;
}

.colo { margin: 0; max-width: 46rem; }

.colo-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem 0;
  border-bottom: var(--rule) solid var(--edge);
}
.colo-row:last-child { border-bottom: 0; }

.colo dt {
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variation-settings: 'wdth' 72, 'wght' 500;
  color: var(--ink-3);
}

.colo dd {
  margin: 0;
  font-size: .9375rem;
  color: var(--ink-2);
}

/* ── Prohlížeč desky ────────────────────────────────────────────────────── */

.viewer {
  width: min(76rem, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: var(--rule) solid var(--ink);
  background: var(--ground);
  color: var(--ink-2);
}
.viewer::backdrop { background: rgba(22, 22, 26, .8); }

/* Otevření a zavření čistě v CSS. `@starting-style` a `allow-discrete`
   jsou novinky — bez podpory dialog jen skočí, což nikomu nevadí. */
@supports (transition-behavior: allow-discrete) {
  .viewer {
    opacity: 0;
    transition: opacity var(--tick) var(--curve),
                display var(--tick) allow-discrete,
                overlay var(--tick) allow-discrete;
  }
  .viewer[open] { opacity: 1; }
  @starting-style { .viewer[open] { opacity: 0; } }

  .viewer::backdrop {
    opacity: 0;
    transition: opacity var(--tick) var(--curve),
                display var(--tick) allow-discrete,
                overlay var(--tick) allow-discrete;
  }
  .viewer[open]::backdrop { opacity: 1; }
  @starting-style { .viewer[open]::backdrop { opacity: 0; } }
}

.viewer-in {
  display: grid;
  gap: var(--gutter);
  max-height: 92vh;
  padding: var(--gutter);
  overflow-y: auto;
}

.viewer-img { background: var(--ground-2); }
.viewer-img .art, .viewer-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
}

.viewer-side { display: flex; flex-direction: column; gap: .9rem; }
.viewer-tomb { border-top: 0; padding-top: 0; width: auto; }

/* Poznámka v prohlížeči vykresluje `$w['note']` — Nellinu vlastní větu
   o tom díle, ne popisek aparátu. Dělicí čára je významová, ne místní:
   serif nese hlas i uvnitř modálu. Vedle ní stojí `.viewer-tomb`, který
   zůstává Archivem, protože štítek je aparát. `check.php` má `.viewer-note`
   v seznamu Literata selektorů. */
.viewer-note {
  max-width: 30rem;
  margin: 0;
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-variation-settings: 'wght' 400;
  line-height: 1.55;
  color: var(--ink);
}

.viewer-count {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 72, 'wght' 400;
  color: var(--ink-3);
}

.viewer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: var(--rule) solid var(--edge);
}

.viewer-btn {
  padding: 0;
  background: none;
  border: 0;
  font-size: .9rem;
  font-variation-settings: 'wdth' 88, 'wght' 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--edge);
  cursor: pointer;
  transition: color var(--tick) var(--curve),
              text-decoration-color var(--tick) var(--curve);
}
.viewer-btn:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* `showModal()` zneaktivní pozadí, ale rolovat jde pořád — tohle to dorovná. */
body.viewer-open { overflow: hidden; }

/* ── Chybová stránka ────────────────────────────────────────────────────────
   Sdílí tenhle soubor s hlavní stránkou. Když mažeš třídu, ověř, že ji
   nepoužívá `web/app/view/404.php`. */

.sheet-plain { max-width: 46rem; }

.lost { padding-block: clamp(3rem, 12vh, 8rem); }

.lost h1 {
  font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  font-variation-settings: 'wdth' 112, 'wght' 600;
}

.lost-no {
  margin: 0 0 .8rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 72, 'wght' 500;
  color: var(--ink-3);
}

/* ── Nástup desek ───────────────────────────────────────────────────────────
   Jediná animace vázaná na rolování. Svislý stěr, jako když se z obrazu
   stahuje krycí papír — devět prvků, žádná kaskáda, žádný posun.

   Próza, popisky, tabulka i kolofon jsou plné od prvního vykreslení.
   Tím padá celá mašinerie `[data-reveal]`, kterou mají sesterské weby. */

.js .plate-img {
  clip-path: inset(0 0 100% 0);
  opacity: .001;
  transition: clip-path var(--sweep) var(--curve-plate),
              opacity .35s linear;
}
.js .plate-img.is-hung {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* ── Responzivně ────────────────────────────────────────────────────────────
   Mobile-first, dva zlomy v `rem` (ne v pixelech), aby respektovaly
   nastavenou velikost písma. */

@media (min-width: 47.5rem) {

  .line { font-size: 1.05rem; }

  .viewer-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

@media (min-width: 78rem) {

  /* Poznámky plavou na okraj. Float se zapíná AŽ TADY — negativní pravý
     okraj by na užším displeji odtlačil stránku do strany. */
  .sidenote {
    float: right;
    clear: right;
    width: var(--note-w);
    margin: .25rem 0 .9rem var(--note-gap);
    margin-right: calc(-1 * (var(--note-w) + var(--note-gap)));
    padding-left: 0;
    border-left: 0;
  }

  /* Katalogové číslo se stěhuje na levý okraj — tichá značka vedle desky,
     ne řádek štítku. AŽ TADY ze stejného důvodu jako u poznámek výš: pod
     zlomem okraj neexistuje.

     ⚠️ Okraj na 78rem je užší, než by pohodlně pojal celé číslo na jeden
     řádek (ověřeno na 1249 px — celý řetězec by přečníval za hranu
     viewportu, a `scrollWidth` to nezachytí, protože jde o zápornou
     pozici, ne o doprava rostoucí obsah). Číslo proto dostává pevnou
     úzkou šířku a smí se zalomit na pomlčkách — z tabulkového „NG-2025-005"
     na okraji vzniknou dva krátké řádky nad sebou, které se do nejužšího
     okraje vejdou vždycky.

     ⚠️ Selektor MUSÍ být scopovaný na `.plate`. Nescopovaný `.tomb-no`
     chytal i klon štítku v prohlížeči (`<p class="tomb viewer-tomb">` dědí
     `position: relative` z `.tomb`), takže se od 1248 px při otevření
     „Enlarge plate" katalogové číslo vytrhlo z popisku a odplulo do okraje
     dialogu. Okraj vedle desky existuje, okraj vedle modálu ne. */
  .plate .tomb-no {
    position: absolute;
    inset-inline-end: 100%;
    inset-block-start: 0;
    width: 3rem;
    margin-inline-end: .4rem;
    text-align: end;
    white-space: normal;
  }
}

/* ── Omezený pohyb ──────────────────────────────────────────────────────────
   Skrytě startuje jen jedna věc — deska. Výjimka je proto jen jedna, ale
   musí být: bez ní zůstane po devíti obrazech prázdné místo. */

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

  .js .plate-img {
    clip-path: none !important;
    opacity: 1 !important;
  }

  /* Animující osa šířky přesazuje text — přesně to, co člověk s citlivostí
     na pohyb dostat nemá. */
  .plate:hover .tomb-meta,
  .plate:focus-within .tomb-meta {
    font-variation-settings: 'wdth' 72, 'wght' 400;
    transition: none;
  }
}

/* ── Tisk ───────────────────────────────────────────────────────────────── */

@media print {
  .note, .skip, .tomb-open, .viewer, body::before { display: none !important; }

  html, body { background: #fff; color: #000; }

  .sheet { display: block; max-width: none; padding: 0; }

  /* Tisk nuluje `padding` archu, ale `--margin` platí dál, takže
     `calc(100% + 2 * var(--margin))` u `.wash` přesahovalo OBĚ hrany
     papíru — naměřeno −33 → 1057 px na 1024px stránce, tedy 33 px
     přetečení. Na obrazovce je ten přesah správně (zákal má dotéct
     k okrajům archu), na papíře nemá kam. Zákal zůstává viditelný,
     jen se drží desky. */
  .wash { inline-size: 100%; }

  .js .plate-img { clip-path: none !important; opacity: 1 !important; }

  /* Deska se nemá lámat napůl přes okraj stránky. */
  .plate { break-inside: avoid; }
  .plates { display: block; }

  /* Na papíře se deska měří v centimetrech papíru, ne v pixelech okna:
     `66svh` je v tisku nesmysl (výška stránky není výška okna), takže strop
     na výšku padá a řídí to šířka. `max-inline-size` schválně, ne
     `max-width` — logická a fyzická vlastnost se v kaskádě přebíjejí podle
     pořadí a míchat je v jednom prvku znamená hádat, která vyhraje. */
  .plate-img { max-inline-size: 12cm; }
  .art, .plate-img img { max-block-size: none; }

  .sidenote { float: none; width: auto; margin: .6rem 0; padding-left: .8rem;
              border-left: 1px solid #999; }

  .cat thead { display: table-header-group; }
  .table-scroll { overflow: visible; }
}