/* hutisko.css · GENEROVÁNO tools/stavba.mjs 23. 10. 2026 9:40:03. Needitovat: zdroj je src/css/ (a media/latky/latky.json).
   Soubory: 00-tokeny.css, 01-zaklad.css, 02-komponenty.css, 03-layout.css, 50-pozadi-a.css */

/* ===== src/css/00-tokeny.css ===== */
/* Chata Hutisko · cozy v2 → subtle · tokeny (základ, 20. 10. 2026; subtle systém S1 21. 10. 2026)
   Jediné místo s :root a s barvami zapsanými hodnotou. Všechny ostatní soubory (sdílené i stránek) píšou
   jen var(--…); stavba.mjs hex, rgb() a stíny mimo tokeny odmítne. Zdroj pravdy: DESIGN.md (frontmatter).
   Kontrast všech dvojic: node tools/kontrast.mjs (nenulový kód pod limitem).

   Subtle systém (research/remake/15-SUBTLE-ZADANI.md, 12-plan-cozy.md kap. 10): útulnost nese paleta (vlna, vápno,
   čokoláda, švestka), skutečné fotky a vlídný hlas, ne řemeslné ozdoby. Jedna rovná karta/cedulka, jedno tlačítko,
   jeden fakt-štítek, jeden systém nadpisů, jedna úprava fotek. Stehy jen v kalendáři. Látky jen jako malé vzorky.
   Tokeny kola 2 a 3 (tkanina, feston, zoubky, mosaz, žebro, papír, stíny látek) zůstávají definované, aby se
   stránky nerozbily, ale mají neutrální hodnotu a jsou ZASTARALÉ (seznam v kap. 10.6). */
:root {
  /* plochy: vlna deky (podklad), vápenná omítka (karty, cedulky, pole) */
  --vlna: #d6d0c7;
  --vlna-svetla: #e3ded6;
  --vlna-tmava: #c9c2b7;
  --vapno: #f3f0eb;

  /* inkoust: hořká čokoláda; text 10,6 : 1 a 5,5 : 1 na vlně */
  --cokolada: #2b1d16;
  --cokolada-2: #5a4a3f;

  /* akcent: švestka (akce, vybrané, aktivní odkaz); 5,2 : 1 na vlně, vápno na ní 7,0 : 1 */
  --svestka: #74405c;
  --svestka-tmava: #5f3249;
  --svestka-svetla: #e6d8df;

  /* lněná šeď: jen dekorativní linky (ne text) */
  --lnena: #9c8f80;
  /* obrys pole formuláře a ovládání (netextový kontrast ≥ 3 : 1 na vlně i vápně) */
  --linka-pole: #7d6f60;
  /* chyba formuláře (jen text a obrys pole, nikdy výzva) */
  --chyba: #8b2f1f;
  /* ZASTARALÉ: papír lístku (kolo 3 ho už nepoužívá) */
  --papir: #f7f1e3;
  /* deska pod nadpisem na fotce: vápno na ní má ≥ 6 : 1 i nad čistě bílou fotkou */
  --clona-fotka: rgb(43 29 22 / 0.74);

  /* průsvitné odstíny: vlasové linky, clona za dialogem; stehy (--steh*) jen v kalendáři */
  --steh: rgb(43 29 22 / 0.4);
  --steh-svetly: rgb(243 240 235 / 0.62);
  --steh-svestka: rgb(116 64 92 / 0.75);
  --linka: rgb(43 29 22 / 0.14);
  --linka-2: rgb(43 29 22 / 0.3);
  --clona: rgb(43 29 22 / 0.46);
  --zavoj: rgb(214 208 199 / 0.94);
  --stin-barva: rgb(43 29 22 / 0.5);
  /* na čokoládě (lišta návrhu): vedlejší text a podklad při najetí */
  --na-tmave-2: rgb(243 240 235 / 0.74);
  --na-tmave-hover: rgb(243 240 235 / 0.1);
  /* ZASTARALÉ (vyšívací kruh kola 3): hrany obruče a mosaz šroubku; subtle planeta je nepoužívá */
  --zebro-svetle: rgb(255 255 255 / 0.13);
  --zebro-tmave: rgb(43 29 22 / 0.1);
  --mosaz: #b48a3e;
  --mosaz-svetla: #ead08a;
  --mosaz-tmava: #6b4e1c;

  /* stíny: jeden jemný stín karty a jeden stín fotky, vždy s odsazením a měkce (nikdy tvrdý ani barevná aura) */
  --stin-karta: 0 1px 2px rgb(43 29 22 / 0.08), 0 6px 16px -10px rgb(43 29 22 / 0.3);
  --stin-foto: 0 1px 2px rgb(43 29 22 / 0.1), 0 18px 34px -26px rgb(43 29 22 / 0.5);
  --stin-foto-zvednuta: 0 2px 4px rgb(43 29 22 / 0.12), 0 24px 40px -26px rgb(43 29 22 / 0.56);
  /* planeta (jediný kruh): tenký jemný lem a měkký stín, žádná obruč */
  --stin-planeta: 0 0 0 1px rgb(43 29 22 / 0.12), 0 28px 56px -34px rgb(43 29 22 / 0.62);
  --stin-hlavicka: 0 10px 16px -16px rgb(43 29 22 / 0.45);
  --stin-dialog: 0 2px 6px rgb(43 29 22 / 0.2), 0 40px 80px -30px rgb(43 29 22 / 0.7);
  /* staré názvy stínů: platí dál, ale míří na dva stíny výš (subtle) */
  --stin-cedulka: var(--stin-karta);
  --stin-panel: var(--stin-karta);
  --stin-polozena: var(--stin-foto);
  --stin-polozena-zvednuta: var(--stin-foto-zvednuta);
  /* tlačítko je ploché (subtle): bez stínu */
  --stin-tlacitko: none;
  --stin-tlacitko-zvednute: none;
  /* ZASTARALÉ: stíny látek, ústřižku a lístku (kolo 2) → neutrální */
  --stin-latka: var(--stin-karta);
  --stin-lem: none;
  --stin-ustrizek: none;
  --stin-listek: var(--stin-karta);

  /* písma: Hahmlet (titulky, citace) + Parkinsans (text, rozhraní), obě lokálně v české podmnožině */
  --f-titul: 'Hahmlet', 'Hahmlet Fallback', Georgia, serif;
  --f-text: 'Parkinsans', 'Parkinsans Fallback', 'Segoe UI', Arial, sans-serif;
  /* jeden systém nadpisů (subtle): H1 40–76 px, H2 32–52 px, H3 22–28 px, H4 18–20 px na všech stránkách */
  --t-h1: clamp(2.5rem, 1.2rem + 3.4vw, 4.75rem);
  --t-h2: clamp(2rem, 1.25rem + 2.1vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --t-citace: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  --t-perex: clamp(1.125rem, 1.02rem + 0.3vw, 1.25rem);
  --t-text: 1.0625rem;
  --t-male: 0.9375rem;
  --t-drobne: 0.8125rem;
  --w-titul: 560;
  --w-titul-silny: 640;
  --w-text: 400;
  --w-ui: 600;
  --ls-titul: -0.022em;
  --ls-h1: -0.028em;
  --lh-text: 1.55;
  /* odstupy nadpisu: nadpis → perex, hlava kapitoly → obsah */
  --h-perex: clamp(12px, 0.5rem + 0.6vw, 18px);
  --h-obsah: clamp(32px, 1.3rem + 2vw, 56px);

  /* mřížka: 12 sloupců, obsah nejvýš 1 320 px, okraje 16–56 px, rytmus kapitol 96–120 px */
  --okraj: clamp(16px, 4vw, 56px);
  --obsah: 1320px;
  --mezera: clamp(16px, 2.4vw, 40px);
  --rytmus: clamp(96px, 4.5rem + 3vw, 120px);
  --rytmus-maly: clamp(48px, 2rem + 3vw, 80px);
  /* vzdálenost od okraje obsahu (.obsah) ke kraji okna */
  --do-kraje: max(var(--okraj), (100vw - var(--obsah)) / 2);
  --lista-vyska: 44px;
  --hlavicka-vyska: 64px;
  /* podnavigace (lepivá lišta kapitol pod hlavičkou, kap. 11): výška včetně vlasových linek. --lepivy-vrch = kde
     končí všechno lepivé nahoře (hlavička, na stránce s .podnav i lišta kapitol); lepivé prvky stránek
     a scroll-padding kotev ho používají místo --hlavicka-vyska */
  --podnav-vyska: 46px;
  --lepivy-vrch: var(--hlavicka-vyska);

  /* tvar: jeden radius 3 px pro karty, cedulky, tlačítka, štítky a fotky; žádné pilulky */
  --r: 3px;
  --r-cedulka: var(--r);
  --r-tlacitko: var(--r);
  --r-foto: var(--r);
  --r-panel: var(--r);

  /* pohyb: cedulky 180 ms, výměna místnosti 320 ms, FLIP 520 ms */
  --d-cedulka: 180ms;
  --d-pokoj: 320ms;
  --d-flip: 520ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* textura vlny (subtle): jen jemný melír a vlákna ve dvou vrstvách SVG šumu, bez pruhů útku a osnovy (base64:
     v datové adrese nesmí být url(#…) ani uvozovky, audit skillu by ji četl jako obrázek #n) */
  --textura-vlna:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC4xNyAwIDAgMCAwIC4xMSAwIDAgMCAwIC4wOCAwIDAgMCAuOSAtLjM0Jy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScuMjYnLz48L3N2Zz4="),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NDAnIGhlaWdodD0nNjQwJz48ZmlsdGVyIGlkPSdtJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjAwNyAuMDIyJyBudW1PY3RhdmVzPSczJyBzZWVkPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgMCAwIDAgMCAuOTggMCAwIDAgMCAuOTUgMCAwIDAgLjUgLS4xOCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNtKScgb3BhY2l0eT0nLjI4Jy8+PC9zdmc+");
  /* ZASTARALÉ: tkaná struktura cedulek a štítků (subtle: žádné tkané textury) → none */
  --textura-tkanina: none;
  --textura-tkanina-tmava: none;
  /* ZASTARALÉ: obšívací steh, feston a zoubky (patička kola 2, ústřižky) → průhledné / plná maska */
  --steh-obsivaci: none;
  --steh-obsivaci-svetly: none;
  --feston-maska: linear-gradient(#000, #000);
  --feston-steh: none;
  --feston-vyska: 0px;
  --zoubky: linear-gradient(#000, #000);
  --zoubky-dole: linear-gradient(#000, #000);
  --zoubky-boky: linear-gradient(#000, #000);

  /* látky domu (jen malé vzorky, kap. 10.4): dlaždice dodá media/latky/latky.json → stavba.mjs vygeneruje
     [data-latka="id"] { --latka … }. Bez dlaždice platí barva (průměr látky z manifestu). */
  --latka: none;
  --latka-barva: var(--vlna-tmava);
  --latka-velikost: 256px;
  --latka-tkanina: none;
  --latka-text: var(--cokolada);
  --latka-velka: none;
  --latka-nit: var(--linka-2);
  --latka-meritko: 1.5;
  /* vzorek látky (výběr místnosti): desaturovaný, aby byl jen poznávací znak */
  --vzorek-sytost: 0.5;
}
@media (min-width: 960px) {
  :root { --hlavicka-vyska: 72px; --podnav-vyska: 50px; }
}

/* ===== src/css/01-zaklad.css ===== */
/* Chata Hutisko · cozy v2 · základ: písma, reset, základní typografie, prohlížečové plochy, pomocné třídy.
   Písma: tools/fonty-cs.py --cozy (české podmnožiny, jeden soubor na rodinu, proměnná osa wght).
   Metrické zálohy: tools/fallback-fonty.py --cozy --zapsat (přepíše řádky „… Fallback“ níž). */
@font-face { font-family: 'Hahmlet'; src: url('fonts/hahmlet-cs-wght.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+02C6-02C7, U+02D8-02DD, U+2010-2027, U+2030-203A, U+2044, U+2060, U+20AC, U+2122, U+2190, U+2192-2193, U+2212; }
@font-face { font-family: 'Parkinsans'; src: url('fonts/parkinsans-cs-wght.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+02C6-02C7, U+02D8-02DD, U+2010-2027, U+2030-203A, U+2044, U+2060, U+20AC, U+2122, U+2190, U+2192-2193, U+2212; }
@font-face { font-family: 'Hahmlet Fallback'; src: local('Georgia'), local('Noto Serif'), local('Times New Roman'); size-adjust: 113.64%; ascent-override: 102.07%; descent-override: 25.34%; line-gap-override: 0.00%; }
@font-face { font-family: 'Parkinsans Fallback'; src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'); size-adjust: 113.61%; ascent-override: 92.42%; descent-override: 30.81%; line-gap-override: 0.00%; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--cokolada-2) var(--vlna-tmava);
  /* kotvy dopadnou pod lepivou hlavičku (a na stránce s podnavigací pod lištu kapitol) */
  scroll-padding-top: calc(var(--lepivy-vrch) + 16px);
  -webkit-tap-highlight-color: transparent;
}
/* stránka s lepivou lištou kapitol (.podnav, kap. 11): všechno lepivé nahoře je o lištu vyšší */
html:has(.podnav) { --lepivy-vrch: calc(var(--hlavicka-vyska) + var(--podnav-vyska)); }
/* látky „až ke kraji okna“ (100vw včetně posuvníku) se ořežou tady, bez vodorovného posuvu a bez vlivu na lepivé prvky */
main { display: block; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--vlna);
  background-image: var(--textura-vlna);
  color: var(--cokolada);
  font: var(--w-text) var(--t-text) / var(--lh-text) var(--f-text);
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* typografie: jeden systém nadpisů na všech stránkách (subtle, 12-plan-cozy.md kap. 10.2) */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titul);
  font-weight: var(--w-titul);
  letter-spacing: var(--ls-titul);
  text-wrap: balance;
  color: var(--cokolada);
}
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); line-height: 1.06; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.014em; }
h4 { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.008em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
p { text-wrap: pretty; }
b, strong { font-weight: var(--w-ui); }
small { font-size: var(--t-male); }
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linka-2);
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--d-cedulka) var(--ease), color var(--d-cedulka) var(--ease);
}
a:hover { text-decoration-color: currentColor; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled='true'] { cursor: default; }
sup { line-height: 0; }
hr { border: 0; height: 0; margin: 0; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
:where(td, th) { padding: 0; text-align: left; font-variant-numeric: tabular-nums; }

/* prohlížečové plochy v barvách domu */
::selection { background: var(--svestka); color: var(--vapno); }
input, textarea { caret-color: var(--svestka); }
:focus { outline: none; }
/* fokus: plný švestkový rámeček (čárkovaná linka je na webu jen steh v kalendáři) */
:focus-visible { outline: 2px solid var(--svestka); outline-offset: 4px; border-radius: 2px; }
::placeholder { color: var(--cokolada-2); opacity: 1; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--vlna-tmava); }
::-webkit-scrollbar-thumb { background: var(--cokolada-2); border: 3px solid var(--vlna-tmava); border-radius: 6px; }

/* pomocné */
.sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nz { white-space: nowrap; }
.cisla { font-variant-numeric: tabular-nums lining-nums; }
html:not(.js) .jen-js { display: none !important; }
html.js .bez-js { display: none !important; }

/* subtle systém (12-plan-cozy.md kap. 10): sdílené karty, cedulky, štítky, vzorky a fotky jsou vždy rovně,
   i když je CSS stránky z kola 2 a 3 ještě natáčí (jediné !important mimo omezený pohyb, stavba ho jinde nedovolí) */
:is(.cedulka, .karta, .stitek, .panel, .fakt, .hlava-latka-stitek, .hlava-stitek, .foto-obraz, .polozena-foto, .ustrizek, .ustrizek-obal, .vzorek) { rotate: none !important; }

/* omezený pohyb: přechody a animace okamžité (efekty mají vlastní statickou podobu) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== src/css/02-komponenty.css ===== */
/* Chata Hutisko · cozy v2 → subtle · sdílené komponenty (základ). Třídy bez prefixu stránky; stránky je používají,
   ale nemění (změnu napište do src/POZADAVKY.md). HTML vzory a pravidla: research/remake/12-plan-cozy.md kap. 10
   (Subtle systém) a živá ukázka node tools/stavba.mjs --nahled ukazka.

   Subtle systém (S1, 21. 10. 2026, 15-SUBTLE-ZADANI.md):
   - jedna rovná karta/cedulka (vápno, jemný stín, radius 3 px), jedno tlačítko (plná švestka), jeden fakt-štítek,
     jeden systém nadpisů a rytmus kapitol 96–120 px, jedna úprava fotek (radius 3 px, jeden stín, popisek drobně pod
     fotkou, kredit Commons v rohu);
   - nic natočeného, žádné nitě, provázky, tkané textury ani stehy (čárkovaná linka jen v kalendáři Ceníku);
   - látka jen jako malý desaturovaný vzorek (.vzorek) a nejvýš 6 px okraj okna (.latka-okraj); text na látce nikdy.
   Obsah: mřížka a kapitola · hlavy kapitol · karta, cedulka, fakt-štítek · tlačítko a odkaz · fotka a popisek ·
   cedulky na fotce · vzorek látky a okraj z látky · citace a hodnocení · spojení · pás karet · planeta · osa ·
   kredit · poznámka návrhu · kostra · ZASTARALÉ API kola 2 a 3 v neutrální podobě (konec souboru). */

/* ---------- mřížka a kapitola ---------- */
.obsah { width: min(100% - 2 * var(--okraj), var(--obsah)); margin-inline: auto; }
.mrizka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
.kap { padding-top: var(--rytmus); scroll-margin-top: calc(8px - var(--rytmus)); }
.kap:last-child { padding-bottom: var(--rytmus); }
.kap-tesna { padding-top: var(--rytmus-maly); scroll-margin-top: calc(8px - var(--rytmus-maly)); }
.perex { font-size: var(--t-perex); line-height: 1.5; color: var(--cokolada-2); max-width: 34em; }
/* sloupec: prvky pod sebou s jednotnou mezerou (--sloupec-mezera), zarovnané vlevo */
.sloupec { display: grid; gap: var(--sloupec-mezera, 22px); justify-items: start; align-content: start; }
.plocha-svetla { background-color: var(--vlna-svetla); }
.plocha-tmava { background-color: var(--vlna-tmava); }

/* ---------- hlavy kapitol: jeden systém (H2 + perex, odstup --h-perex, obsah o --h-obsah níž) ---------- */
/* Varianty: A .hlava-vedle (nadpis 7/12, perex 5/12; jen začátek stránky), G .hlava-okraj (nadpis ve 4/12 s vlasovou
   linkou nahoře, obsah 8/12), D .hlava-citace (hlas hosta, pod ním menší nadpis), E .hlava-fotka (nadpis na fotce,
   jen výjimečně). Fakt pod nadpisem: .hlava-cedulka > .hlava-stitek (rovný fakt-štítek). Pod 900 px vše pod sebou,
   nadpis vždy nad tím, co uvádí. Velikost nadpisu se v hlavách nemění: H2 je všude stejný (--t-h2). */
.hlava { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--h-perex); align-items: end; }
.hlava > .perex { max-inline-size: 34em; }
.hlava-cedulka > .hlava-stitek { justify-self: start; margin-top: 2px; }
.hlava-citace > :is(h1, h2) { font-size: var(--t-h3); line-height: 1.15; }
/* obsah kapitoly začíná v jednotném odstupu od hlavy (stránka ho smí ve svém CSS změnit jen výjimečně) */
.hlava + * { margin-top: var(--h-obsah); }
@media (min-width: 900px) {
  .hlava:not(.hlava-latka, .hlava-fotka) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
  /* :where = nízká specifičnost (0,1,0), aby sloupce variant níž platily (POZADAVKY U7) */
  .hlava:where(:not(.hlava-latka, .hlava-fotka)) > * { grid-column: 1 / -1; }
  /* A · vedle: nadpis přes 7 sloupců, perex vpravo na účaří */
  .hlava-vedle > :is(h1, h2) { grid-column: 1 / span 7; }
  .hlava-vedle > .perex { grid-column: 8 / span 5; padding-bottom: 0.3em; }
  .hlava-cedulka { align-items: start; }
  .hlava-cedulka > :is(h1, h2, .hlava-stitek) { grid-column: 1 / span 9; }
  .hlava-cedulka > .perex { grid-column: 1 / span 6; }
  /* D · citace: kapitolu otevírá hlas hosta, nadpis je menší pod ním */
  .hlava-citace > .citace { grid-column: 1 / span 10; }
  .hlava-citace > :is(h1, h2) { grid-column: 1 / span 8; }
}

/* E · nadpis na fotce (jen výjimečně): <header class="hlava hlava-fotka" style="--pomer: 21 / 9"><picture>…</picture>
   <div class="hlava-fotka-text"><h2>…</h2><p class="perex">…</p></div></header>; deska --clona-fotka pod textem */
.hlava-fotka {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-items: end;
  overflow: hidden;
  aspect-ratio: var(--pomer, 21 / 9);
  background-color: var(--vlna-tmava);
  border-radius: var(--r-foto);
}
.hlava-fotka > :is(picture, img) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hlava-fotka img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--ohnisko, 50% 50%); }
.hlava-fotka-text {
  --clona-nahore: clamp(52px, 6vw, 104px);
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: 10px;
  justify-items: start;
  justify-self: start;
  inline-size: min(100%, 50rem);
  padding: var(--clona-nahore) clamp(64px, 9vw, 160px) clamp(18px, 2.6vw, 40px) clamp(18px, 3vw, 48px);
  color: var(--vapno);
  background-color: var(--clona-fotka);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--clona-nahore)), linear-gradient(to left, transparent, black clamp(64px, 9vw, 160px));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, black var(--clona-nahore)), linear-gradient(to left, transparent, black clamp(64px, 9vw, 160px));
  mask-composite: intersect;
}
.hlava-fotka-text > :is(h1, h2) { color: var(--vapno); max-inline-size: 16ch; }
.hlava-fotka-text > .perex, .hlava-fotka-text > p { color: var(--vapno); max-inline-size: 34em; }
@media (max-width: 699px) {
  .hlava-fotka { aspect-ratio: var(--pomer-mobil, 4 / 5); }
}

/* G · nadpis na okraji: <div class="hlava-okraj" [data-strana="vpravo"]><header class="hlava-okraj-hlava"><h2>…</h2>
   <p class="perex">…</p></header><div class="hlava-okraj-obsah">…</div></div>
   Od 900 px nadpis v úzkém sloupci (4/12) s vlasovou linkou nahoře, při čtení zůstává u horní hrany; pod 900 px nad obsahem. */
.hlava-okraj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--h-obsah) var(--mezera); }
.hlava-okraj-hlava { display: grid; gap: var(--h-perex); align-content: start; justify-items: start; padding-top: 18px; border-top: 1px solid var(--linka-2); }
.hlava-okraj-hlava > .perex { font-size: var(--t-text); line-height: var(--lh-text); }
.hlava-okraj-obsah { min-inline-size: 0; }
@media (min-width: 900px) {
  .hlava-okraj { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .hlava-okraj-hlava { grid-column: 1 / span 4; position: sticky; top: calc(var(--lepivy-vrch) + 12px); }
  .hlava-okraj-obsah { grid-column: 5 / -1; }
  .hlava-okraj[data-strana='vpravo'] > .hlava-okraj-hlava { grid-column: 9 / -1; grid-row: 1; }
  .hlava-okraj[data-strana='vpravo'] > .hlava-okraj-obsah { grid-column: 1 / span 8; grid-row: 1; }
}

/* ---------- karta: jediná karta webu (rovná, vápno, jemný stín, radius 3 px) ---------- */
/* <div class="karta"><p class="karta-nazev">Váš pobyt</p>…</div>   (.stitek a .panel jsou tatáž karta, starší názvy) */
.karta, .stitek, .panel {
  --s-podklad: var(--vapno);
  --s-text: var(--cokolada);
  --s-steh: transparent; /* ZASTARALÉ: nit štítku kola 2 (stehy jen v kalendáři) */
  position: relative;
  padding: clamp(20px, 2.4vw, 32px);
  color: var(--s-text);
  background-color: var(--s-podklad);
  border-radius: var(--r);
  box-shadow: var(--stin-karta);
}
.karta-nazev, .stitek-nazev { font: var(--w-titul) var(--t-h4) / 1.2 var(--f-titul); letter-spacing: -0.01em; margin-bottom: 12px; }
/* tmavá varianta (vybraný pobyt): švestka, vápenný text */
.karta-svestka, .stitek-svestka { --s-podklad: var(--svestka); --s-text: var(--vapno); }
/* řádky údajů v kartě: dl s vlasovou linkou */
.stitek-radky, .karta-radky { display: grid; gap: 8px; }
:is(.stitek-radky, .karta-radky) > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--linka); }
:is(.stitek-svestka, .karta-svestka) :is(.stitek-radky, .karta-radky) > div { border-bottom-color: var(--na-tmave-hover); }
:is(.stitek-radky, .karta-radky) dt { color: inherit; opacity: 0.86; }
:is(.stitek-radky, .karta-radky) dd { font-weight: var(--w-ui); text-align: right; font-variant-numeric: tabular-nums; }
/* odkaz v řádku karty: dotyková plocha 44 px bez změny výšky řádku */
:is(.stitek-radky, .karta-radky) a { display: inline-block; padding-block: 10px; margin-block: -10px; }

/* ---------- cedulka: rovná vápenná cedulka (popis na fotce, rozpis, volba); obdélník, nikdy pilulka ---------- */
.cedulka {
  --c-podklad: var(--vapno);
  --c-text: var(--cokolada);
  --c-steh: transparent; /* ZASTARALÉ: nit cedulky kola 2 (stehy jen v kalendáři) */
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  padding: 0.45em 0.85em;
  font: 500 1rem / 1.3 var(--f-text);
  letter-spacing: 0.003em;
  color: var(--c-text);
  text-decoration: none;
  background-color: var(--c-podklad);
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--stin-karta);
}
.cedulka b, .cedulka strong { font-weight: 650; }
.cedulka-svestka { --c-podklad: var(--svestka); --c-text: var(--vapno); }
.cedulka-svetla { --c-podklad: var(--svestka-svetla); }
.cedulka-mala { font-size: 0.875rem; padding: 0.38em 0.7em; }
.cedulka-velka { font-size: var(--t-perex); padding: 0.55em 1em; }
/* co v domě není: tlumená cedulka bez podkladu, jen vlasová linka (žádná záplata ani steh) */
.cedulka-neni { --c-podklad: transparent; --c-text: var(--cokolada-2); box-shadow: inset 0 0 0 1px var(--linka-2); }
/* cedulka jako ovládání (výběr, rozbalení) */
:is(button, a).cedulka { min-height: 44px; cursor: pointer; transition: background-color var(--d-cedulka) var(--ease), color var(--d-cedulka) var(--ease); }
:is(button, a).cedulka:hover { --c-podklad: var(--svestka-svetla); }
:is(button, a).cedulka:is([aria-pressed='true'], [aria-expanded='true'], [aria-current]:not([aria-current='false']), [aria-selected='true']) { --c-podklad: var(--svestka); --c-text: var(--vapno); }
:is(button, a).cedulka:focus-visible { outline-offset: 3px; }
/* řada cedulek: rovně, s jednotnou mezerou */
.cedulky { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.cedulky > li { display: flex; max-width: 100%; }

/* ---------- fakt-štítek: krátký údaj (14 px, rovný, vlasová linka, bez stínu) ---------- */
/* <ul class="fakty"><li class="fakt">12 min autem</li>…</ul>  nebo  <span class="fakt">6 lůžek</span> */
.fakty { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fakt {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-block-size: 30px;
  padding: 4px 10px;
  font: 500 0.875rem / 1.3 var(--f-text);
  letter-spacing: 0.004em;
  color: var(--cokolada);
  white-space: nowrap;
  background-color: var(--vapno);
  border: 1px solid var(--linka);
  border-radius: 2px;
}
.fakt b { font-weight: var(--w-ui); }
a.fakt { min-block-size: 44px; text-decoration: none; }
a.fakt:hover { color: var(--svestka); border-color: currentColor; }

/* ---------- shrnutí stránky: fakt-štítky (a volitelně jedna věta) nahoře podstránky (kap. 11) ---------- */
/* <div class="shrnuti"><p class="shrnuti-veta">…</p><ul class="fakty"><li class="fakt"><b>6,5 km</b> z Rožnova</li>…</ul></div>
   Stojí v hlavě stránky pod perexem. Štítky jsou o kousek větší než v textu (15 px), hodnota tučně. */
.shrnuti { display: grid; gap: 12px; justify-items: start; margin-top: clamp(20px, 0.9rem + 1vw, 30px); }
.shrnuti-veta { max-inline-size: 40em; color: var(--cokolada-2); }
.shrnuti > .fakty { gap: 8px 10px; }
/* štítek shrnutí je blok s běžným řádkováním (ne flex), aby čárka a mezery za tučnou hodnotou seděly jako v textu */
.shrnuti li.fakt { display: block; min-block-size: 34px; padding: 5px 12px; font-size: 0.9375rem; line-height: 22px; white-space: normal; }
.shrnuti a.fakt { min-block-size: 44px; padding-inline: 12px; font-size: 0.9375rem; }

/* ---------- podnavigace: lepivá lišta kapitol pod hlavičkou (kap. 11, js/podnav.js) ---------- */
/* <nav class="podnav" data-modul="podnav" aria-label="Kapitoly stránky"><ul><li><a href="#kapitola">Název</a></li>…</ul></nav>
   Přímý potomek <main> hned za hlavou stránky (jinak se lepí jen uvnitř své sekce). Pás přes celou šířku okna na vlně
   s vlasovými linkami, položky na hraně obsahu. Aktivní kapitola (aria-current, IntersectionObserver) švestkové
   podtržení 1,5 px jako aktivní stránka v hlavičce. Když se položky nevejdou (telefon), pás se posouvá do strany se
   snapem, okraj s dalšími položkami se rozplývá a aktivní položka se posune do zorného pole. Bez JS: lepivá lišta
   s odkazy, bez aktivního stavu. Kotvy dopadnou pod lištu (--lepivy-vrch, 01-zaklad.css). */
.podnav {
  position: sticky;
  top: var(--hlavicka-vyska);
  z-index: 29;
  margin-top: var(--h-obsah);
  background-color: var(--vlna);
  background-image: var(--textura-vlna);
  border-block: 1px solid var(--linka);
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.podnav.je-prilepena { border-top-color: transparent; box-shadow: var(--stin-hlavicka); }
.podnav > ul {
  --podnav-kraj: max(var(--okraj), (100% - var(--obsah)) / 2);
  list-style: none;
  display: flex;
  gap: clamp(8px, 1.6vw, 20px);
  margin: 0;
  padding: 0 var(--podnav-kraj);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--podnav-kraj);
  scrollbar-width: none;
}
.podnav > ul::-webkit-scrollbar { display: none; }
.podnav li { flex: none; scroll-snap-align: start; }
/* odkaz: text na vlně (16 px), výška lišty je dotyková plocha; boční odsazení drží fokus uvnitř pásu */
.podnav a {
  display: flex;
  align-items: center;
  min-block-size: calc(var(--podnav-vyska) - 2px);
  padding-inline: 10px;
  font: 500 1rem / 1.2 var(--f-text);
  letter-spacing: 0.003em;
  color: var(--cokolada-2);
  white-space: nowrap;
  text-decoration: underline solid transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.5em;
  transition: color var(--d-cedulka) var(--ease), text-decoration-color var(--d-cedulka) var(--ease);
}
.podnav li:first-child a { margin-inline-start: -10px; }
.podnav a:hover { color: var(--svestka); text-decoration-color: transparent; }
.podnav a[aria-current='true'] { color: var(--cokolada); text-decoration-color: var(--svestka); }
.podnav a:focus-visible { outline-offset: -4px; }
/* okraj, za kterým jsou další položky, se rozplývá (třídy dává podnav.js podle posunu pásu) */
.podnav > ul.ma-vlevo { -webkit-mask-image: linear-gradient(to right, transparent, var(--cokolada) 40px); mask-image: linear-gradient(to right, transparent, var(--cokolada) 40px); }
.podnav > ul.ma-vpravo { -webkit-mask-image: linear-gradient(to left, transparent, var(--cokolada) 40px); mask-image: linear-gradient(to left, transparent, var(--cokolada) 40px); }
.podnav > ul.ma-vlevo.ma-vpravo {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--cokolada) 40px, var(--cokolada) calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, var(--cokolada) 40px, var(--cokolada) calc(100% - 40px), transparent);
}
@media (min-width: 960px) {
  .podnav > ul { scroll-snap-type: none; }
}
@media (min-width: 1080px) {
  .podnav a { font-size: var(--t-text); }
}

/* ---------- tlačítko a odkaz: jedno tlačítko (plná švestka, rovné), sekundární akce je textový odkaz ---------- */
.tl {
  position: relative;
  display: inline-block;
  padding: 16px 1.5em;
  font: var(--w-ui) var(--t-text) / 20px var(--f-text);
  letter-spacing: 0.005em;
  color: var(--vapno);
  text-align: center;
  text-decoration: none;
  background: var(--svestka);
  border: 0;
  border-radius: var(--r);
  transition: background-color 200ms var(--ease);
}
.tl:hover { background: var(--svestka-tmava); }
.tl:active { background: var(--svestka-tmava); }
.tl:disabled, .tl[aria-disabled='true'] { opacity: 0.5; }
.tl-mala { padding: 12px 1.1em; font-size: 1rem; }
.tl-sirka { inline-size: 100%; }
/* sekundární akce = textový odkaz s podtržením (.tl-obrys je starší název, vypadá stejně jako .odkaz) */
.odkaz, .tl-obrys {
  display: inline-block;
  padding: 12px 0.15em;
  font: var(--w-ui) var(--t-text) / 20px var(--f-text);
  color: var(--cokolada);
  text-align: left;
  text-decoration: underline solid var(--linka-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.32em;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--d-cedulka) var(--ease), text-decoration-color var(--d-cedulka) var(--ease);
}
.tl-obrys.tl-mala { padding-block: 12px; font-size: 1rem; }
.odkaz:is(:hover, :active), .tl-obrys:is(:hover, :active), .tl.tl-obrys:is(:hover, :active) { color: var(--svestka); text-decoration-color: currentColor; background: none; }

/* ---------- fotka: jedna úprava (radius 3 px, jeden stín, popisek drobně pod fotkou, kredit v rohu fotky) ---------- */
/* <figure class="foto"><div class="foto-obraz"><picture>…</picture><p class="kredit kredit-na-fotce">…</p></div>
   <figcaption class="foto-popisek">…</figcaption></figure>
   Starší .polozena / .polozena-foto / .polozena-popisek vypadají stejně: rovně, bez rámečku, popisek pod fotkou. */
.foto, .polozena { position: relative; margin: 0; }
.foto-obraz, .polozena-foto {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--pomer, auto);
  background-color: var(--vlna-tmava);
  border-radius: var(--r-foto);
  box-shadow: var(--stin-foto);
  transition: box-shadow var(--d-pokoj) var(--ease);
}
:is(.foto-obraz, .polozena-foto) > picture { block-size: 100%; }
:is(.foto-obraz, .polozena-foto) :is(img, video) { inline-size: 100%; block-size: 100%; object-fit: cover; }
.foto-popisek,
.cedulka.polozena-popisek {
  position: static;
  display: block;
  max-inline-size: 40em;
  margin-top: 12px;
  padding: 0;
  font: 400 var(--t-male) / 1.45 var(--f-text);
  letter-spacing: 0;
  color: var(--cokolada-2);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.polozena:has(> .polozena-popisek) { margin-bottom: 0; }
:is(a, button).polozena { display: block; padding: 0; color: inherit; text-align: left; text-decoration: none; background: none; border: 0; }
@media (hover: hover) {
  :is(a, button).polozena:hover .polozena-foto { box-shadow: var(--stin-foto-zvednuta); }
}
:is(a, button).polozena:focus-visible { outline: none; }
:is(a, button).polozena:focus-visible .polozena-foto { outline: 2px solid var(--svestka); outline-offset: 5px; }

/* ---------- cedulky ukotvené na fotce (souřadnice v procentech) ---------- */
/* <figure class="foto"><div class="na-fotce" data-modul="cedulky"><div class="foto-obraz"><picture>…</picture></div>
   <ul class="na-fotce-body"><li class="na-fotce-bod" style="--x: 32%; --y: 58%"><span class="cedulka cedulka-mala">Varná
   deska</span></li></ul></div><figcaption class="foto-popisek">…</figcaption></figure>
   (.na-fotce obaluje jen fotku, aby procenta platila pro fotku a ne pro popisek; starší <figure class="na-fotce"> platí.)
   Bod je malý švestkový kosočtverec s vápenným lemem (značka místa, žádné kolečko ani nit); cedulka stojí hned vedle,
   data-strana="vlevo" ji dá na druhou stranu. Překlápění u okraje fotky: data-modul="cedulky" (js/cedulky.js). */
.na-fotce { position: relative; margin: 0; }
.na-fotce-body { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.na-fotce-bod {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  inline-size: max-content;
  max-inline-size: min(19em, 90%);
  display: flex;
  align-items: center;
  gap: 8px;
  translate: -10px -50%;
  pointer-events: auto;
}
.na-fotce-bod[data-strana='vlevo'] { flex-direction: row-reverse; translate: calc(-100% + 10px) -50%; }
.na-fotce-bod::before {
  content: '';
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  margin-inline: 5px;
  background: var(--svestka);
  outline: 2px solid var(--vapno);
  rotate: 45deg;
  box-shadow: var(--stin-karta);
}

/* ---------- vzorek látky: malý čtverec skutečné látky domu jako poznávací znak (kap. 10.4) ---------- */
/* <span class="vzorek" data-latka="kostka" aria-hidden="true"></span> vedle názvu místnosti; výběr dělá text.
   Velikost --vzorek (28–36 px), sytost --vzorek-sytost (0,5). Nikdy kruh, nikdy plocha, nikdy text na látce. */
.vzorek {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  inline-size: var(--vzorek, 32px);
  block-size: var(--vzorek, 32px);
  background-color: var(--latka-barva);
  background-image: var(--latka);
  background-size: calc(var(--latka-velikost) * 0.42);
  background-position: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--linka);
  filter: saturate(var(--vzorek-sytost));
}
/* okraj z látky (okno do pokoje): nejvýš 6 px látky vybrané místnosti s nízkou sytostí kolem rámu, nebo nic.
   <div class="latka-okraj" data-latka="kostka">…okno…</div>   (šířka --latka-okraj, výchozí 5 px) */
.latka-okraj { position: relative; isolation: isolate; padding: min(var(--latka-okraj, 5px), 6px); border-radius: calc(var(--r) + 2px); }
.latka-okraj::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--latka-barva);
  background-image: var(--latka);
  background-size: calc(var(--latka-velikost) * 0.5);
  filter: saturate(var(--vzorek-sytost));
  pointer-events: none;
}

/* ---------- citace hosta a hodnocení (střídmě) ---------- */
/* <figure class="citace [citace-velka]"><blockquote><p>„…“</p></blockquote><figcaption class="podpis">Michaela K.,
   Google, 2020</figcaption></figure>
   Pravidla: doslova; velkým písmem (.citace-velka) jen citace se správnou diakritikou; „[…]“ jen uvnitř; každá stránka
   jiná citace. Podpis je drobný text s krátkou vlasovou linkou, žádný steh. */
.citace { margin: 0; font: 400 var(--t-h4) / 1.45 var(--f-titul); letter-spacing: -0.005em; color: var(--cokolada); max-width: 36em; }
.citace blockquote { margin: 0; }
.citace p + p { margin-top: 0.6em; }
.citace-velka { font-size: var(--t-citace); line-height: 1.25; letter-spacing: -0.016em; max-width: 26em; }
/* úvodní uvozovka „ visí v okraji, text drží svislou hranu */
.citace-velka p:first-child { text-indent: -0.36em; }
.podpis {
  display: block;
  margin-top: 1rem;
  font: 500 var(--t-male) / 1.4 var(--f-text);
  letter-spacing: 0;
  color: var(--cokolada-2);
}
.podpis::before { content: ''; display: inline-block; vertical-align: middle; inline-size: 24px; margin: -2px 0.7em 0 0; border-top: 1px solid var(--linka-2); }
/* hlas majitelů: obyčejný text webu, nad ním drobný popisek „od majitelů“ (bez cedulky, bez natočení) */
.citace-majitele {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 0;
  max-inline-size: min(100%, 28rem);
  font: 400 var(--t-text) / var(--lh-text) var(--f-text);
  letter-spacing: 0;
  color: var(--cokolada);
}
.citace-majitele blockquote { margin: 0; }
.citace-majitele .podpis { order: -1; margin: 0; font-size: 0.875rem; font-weight: var(--w-ui); color: var(--svestka); }
.citace-majitele .podpis::before { display: none; }
/* řádka hodnocení: jedna řádka u citace */
.hodnoceni-radka { font: 500 var(--t-text) / 1.35 var(--f-text); color: var(--cokolada-2); }
.hodnoceni-radka > a { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.35em; min-block-size: 44px; padding-block: 12px; color: inherit; text-decoration: none; }
.hodnoceni-radka b { font: var(--w-titul-silny) 1.25rem / 1 var(--f-titul); letter-spacing: -0.02em; color: var(--cokolada); }
.hodnoceni-radka > a:hover { color: var(--svestka); }
.hodnoceni-radka > a:hover b { color: var(--svestka); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
/* starší čísla po portálech (kolo 1) */
.hodnoceni { display: grid; gap: 4px; align-content: start; }
.hodnoceni-cislo { font: 400 var(--t-text) / 1 var(--f-titul); color: var(--cokolada-2); }
.hodnoceni-cislo b { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: var(--w-titul-silny); letter-spacing: -0.03em; color: var(--cokolada); margin-right: 0.12em; font-variant-numeric: lining-nums; }
.hodnoceni-zdroj { font-size: var(--t-male); color: var(--cokolada-2); }
.hodnoceni-rada { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 0; }
.hodnoceni-rada > li { position: relative; padding-inline: clamp(16px, 2.2vw, 32px); }
.hodnoceni-rada > li + li::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; border-left: 1px solid var(--linka-2); }
.hodnoceni-rada > li:first-child { padding-left: 0; }

/* ---------- spojení: klikací řádky telefonu a e-mailu, celý řádek ≥ 52 px ---------- */
/* <ul class="spojeni [spojeni-velke]"><li><a class="spojeni-radek" href="tel:+420605088376"><span class="spojeni-co">Telefon</span>
   <span class="spojeni-hodnota">+420 605 088 376</span></a></li> …</ul> */
.spojeni { list-style: none; display: grid; }
.spojeni > li + li { border-top: 1px solid var(--linka-2); }
.spojeni-radek {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  align-items: baseline;
  align-content: center;
  column-gap: 16px;
  min-block-size: 52px;
  padding: 12px 4px 12px 0;
  color: var(--cokolada);
  text-decoration: none;
}
.spojeni-co { font-size: var(--t-male); color: var(--cokolada-2); }
.spojeni-hodnota {
  font-weight: var(--w-ui);
  font-size: 1.125rem;
  line-height: 1.3;
  text-decoration: underline solid var(--linka-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  white-space: nowrap;
}
.spojeni-radek[href^='mailto:'] .spojeni-hodnota { white-space: normal; overflow-wrap: anywhere; }
.spojeni-radek:hover .spojeni-hodnota { color: var(--svestka); text-decoration-color: currentColor; }
.spojeni-radek:focus-visible { outline-offset: 2px; }
.spojeni-velke { container-type: inline-size; }
.spojeni-velke .spojeni-radek { grid-template-columns: minmax(0, 1fr); row-gap: 2px; min-block-size: 64px; }
.spojeni-velke .spojeni-radek[href^='tel:'] .spojeni-hodnota { font: var(--w-titul-silny) clamp(1.5rem, 11cqi, 2.375rem) / 1.15 var(--f-titul); letter-spacing: -0.02em; }
@media (max-width: 479px) {
  .spojeni-radek { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* ---------- pás karet na telefonu: karta 78 % šířky, snap, náznak pokračování čárkami (ne kolečky) ---------- */
/* <div class="pas" data-modul="pas"><ul class="pas-rada" role="list" aria-label="…">
   <li class="pas-karta"><picture>…</picture><div class="pas-text">…</div></li> …</ul></div> */
.pas { --pas-karta: 78%; --pas-mezera: 12px; position: relative; }
.pas-rada { list-style: none; }
.pas-karta { min-inline-size: 0; overflow-wrap: break-word; }
.pas-karta img { inline-size: 100%; }
.pas-tecky { display: none; }
@media (max-width: 899px) {
  .pas-rada {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--pas-karta);
    gap: var(--pas-mezera);
    margin-inline: calc(-1 * var(--okraj));
    padding: 6px var(--okraj) 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--okraj);
    scrollbar-width: none;
  }
  .pas-rada::-webkit-scrollbar { display: none; }
  .pas-karta { scroll-snap-align: start; }
  .pas-text { transition: opacity var(--d-cedulka) var(--ease); }
  .pas-karta[data-pas-mimo] .pas-text { opacity: 0; }
  .pas-tecky { display: flex; justify-content: center; align-items: center; gap: 7px; block-size: 20px; }
  .pas-tecky > span { inline-size: 10px; block-size: 3px; background: var(--linka-2); border-radius: 1px; transition: inline-size var(--d-cedulka) var(--ease), background-color var(--d-cedulka) var(--ease); }
  .pas-tecky > span[data-aktivni] { inline-size: 24px; background: var(--svestka); }
}
@media (min-width: 600px) and (max-width: 899px) { .pas { --pas-karta: 46%; } }
@supports (animation-timeline: view()) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .pas-text { animation: pas-cela linear both; animation-timeline: view(inline); }
  }
}
@keyframes pas-cela {
  entry 0% { opacity: 0; }
  entry 88% { opacity: 0; }
  entry 100% { opacity: 1; }
  exit 0% { opacity: 1; }
  exit 12% { opacity: 0; }
  exit 100% { opacity: 0; }
}
@media (min-width: 900px) {
  .pas-rada { display: flex; flex-wrap: wrap; gap: var(--mezera); }
}

/* ---------- planeta (Úvod): jediný kruh webu, jen tenký jemný lem a měkký stín ---------- */
/* <div class="lem-planeta"><a class="uvod-planeta-kruh" …>…</a></div>. Žádná obruč, šroub ani steh; data-latka
   na prvku se ignoruje. --lem-planeta-sirka (výchozí 0) jen odsadí obraz od lemu. */
.lem-planeta {
  position: relative;
  display: block;
  padding: var(--lem-planeta-sirka, 0px);
  border-radius: 50%;
  box-shadow: var(--stin-planeta);
}
.lem-planeta > * { border-radius: 50%; }

/* ---------- osa (storno, příjezd a odjezd): plná tenká linka, zastávky jako fakt-štítky ---------- */
/* <ol class="osa"><li class="osa-bod"><span class="cedulka cedulka-mala osa-kdy">14:00</span><p>…</p></li></ol> */
.osa { list-style: none; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--mezera); padding-top: 52px; }
.osa::before { content: ''; position: absolute; left: 0; right: 0; top: 20px; border-top: 1px solid var(--linka-2); }
.osa-bod { position: relative; display: grid; gap: 10px; align-content: start; }
.osa-kdy { position: absolute; top: -52px; left: 0; }
@media (max-width: 899px) {
  .osa { grid-auto-flow: row; padding-top: 0; padding-left: 28px; gap: 28px; }
  .osa::before { left: 8px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--linka-2); }
  .osa-kdy { position: relative; top: auto; left: auto; justify-self: start; }
}

/* ---------- kredit fotky (Wikimedia Commons: autor a licence v rohu fotky) ---------- */
.kredit { font-size: 0.8125rem; line-height: 1.4; color: var(--cokolada-2); }
.kredit a { text-decoration-color: var(--linka-2); }
.kredit-na-fotce { position: absolute; z-index: 2; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; color: var(--cokolada); background: var(--zavoj); border-radius: 2px; }

/* ---------- poznámka návrhu [OVĚŘIT] / [DOPLNIT]: <span class="pozn" title="P1 · …">ověřit</span> ---------- */
.pozn {
  position: relative;
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.18em 0.42em 0.2em;
  vertical-align: 0.14em;
  font: 600 0.75rem / 1 var(--f-text);
  letter-spacing: 0.01em;
  color: var(--svestka);
  white-space: nowrap;
  background-color: var(--vapno);
  background-clip: padding-box;
  /* průhledný okraj zvětší plochu pro ťuknutí na 24 px, záporný okraj vrátí výšku řádku (vzhled beze změny) */
  border: 1px solid transparent;
  border-block-width: 0.36em;
  margin-block: -0.36em;
  border-radius: 2px;
  cursor: help;
}
.pozn::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--svestka); border-radius: 2px; pointer-events: none; }
.pozn[role='button'] { cursor: pointer; }
.pozn:hover { color: var(--vapno); background-color: var(--svestka); }
.pozn:focus-visible { outline-offset: 2px; }
.pozn-blok { margin-top: 0.75rem; padding: 0.75rem 1rem; font-size: var(--t-male); color: var(--cokolada-2); border: 1px solid var(--svestka); border-radius: var(--r); max-width: 46rem; }
html.bez-poznamek :is(.pozn, .pozn-blok, .jen-pozn) { display: none; }

/* ---------- kostra: místo pro sekci, kterou ještě staví builder (stavba.mjs hlásí varování) ---------- */
.kostra {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 22px 24px;
  font-size: var(--t-male);
  color: var(--cokolada-2);
  border: 1px solid var(--linka-2);
  border-radius: var(--r);
}
.kostra b { color: var(--cokolada); }

/* =====================================================================================================================
   ZASTARALÉ API kola 2 a 3 (12-plan-cozy.md kap. 10.6). Funguje dál, aby stránky nespadly, ale v neutrální podobě:
   bez látkových ploch, lemů, rámů, stehů, zoubků a natočení. Stránky je při převodu nahradí komponentami výš;
   stavba hlásí jejich použití souhrnným varováním „subtle“.
   ===================================================================================================================== */
/* velká dlaždice látky pod ohybem: pravidlo zůstává pro stránky, které ještě kreslí vlastní plochy */
html.js main > section ~ section[data-latka]:not(.latka-blizko),
html.js main > section ~ section [data-latka]:not(.latka-blizko) { --latka-velka: none; }
/* A · lem kapitoly (data-lem) a B · přechod kapitol (data-prechod): nekreslí se nic, kapitolu odděluje rytmus */
.kap:is([data-lem], [data-prechod]) { position: relative; }
/* C · plocha za obrazem (.latka-plocha): bez látky; vnitřní odsazení zůstává, aby se rozvržení stránky nepohnulo */
.latka-plocha, .hlava-latka { position: relative; }
.latka-plocha { padding: var(--plocha-okraj, clamp(14px, 2.6vw, 44px)); }
.latka-plocha > :is(img, picture) { inline-size: 100%; border-radius: var(--r-foto); box-shadow: var(--stin-foto); }
/* D · rám kolem panelu (.latka-ram): bez látky a stehu, dítě je karta */
.latka-ram { position: relative; padding: 0; }
.latka-ram > * { position: relative; background-color: var(--vapno); border-radius: var(--r); box-shadow: var(--stin-karta); }
/* F · nadpis jako cedulka na látce (.hlava-latka): bez látky; cedulka s nadpisem je rovná karta (stránky ji mají
   i na vlastních tmavších plochách, text tak zůstává čitelný) */
.hlava-latka { display: block; padding: 0; }
.hlava-latka-stitek {
  position: relative;
  display: grid;
  gap: var(--h-perex);
  justify-items: start;
  inline-size: fit-content;
  max-inline-size: min(100%, 46rem);
  padding: clamp(16px, 2vw, 26px) clamp(18px, 2.6vw, 34px);
  color: var(--cokolada);
  background-color: var(--vapno);
  border-radius: var(--r);
  box-shadow: var(--stin-karta);
}
.hlava-latka-stitek > .perex { font-size: var(--t-text); line-height: var(--lh-text); }
/* B · hlava s ústřižkem (.hlava-ustrizek): ústřižek se neukazuje, nadpis od prvního sloupce */
.hlava-ustrizek > .ustrizek-obal { display: none; }
@media (min-width: 900px) {
  .hlava-ustrizek > :is(h1, h2) { grid-column: 1 / span 9; }
  .hlava-ustrizek > .perex { grid-column: 1 / span 7; }
}
/* ústřižek (.ustrizek): rovný desaturovaný vzorek bez zoubků a natočení (velikost dál určuje stránka) */
.ustrizek {
  display: block;
  inline-size: var(--u-sirka, 96px);
  block-size: var(--u-vyska, 64px);
  background-color: var(--latka-barva);
  background-image: var(--latka);
  background-size: calc(var(--latka-velikost) * var(--u-meritko, 1) * 0.6);
  background-position: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--linka);
  filter: saturate(var(--vzorek-sytost));
}
.ustrizek-boky { border-radius: 2px; }
.ustrizek-obal, .ustrizek-obal-ostry { display: inline-block; filter: none; }
/* záložka vzorníku (.zalozka): vzorek + název; vybraná = tučný název s plným švestkovým podtržením */
.zalozka {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 10px 6px 6px;
  font: 500 var(--t-male) / 1.25 var(--f-text);
  color: var(--cokolada);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
}
.zalozka .ustrizek { --u-sirka: 32px; --u-vyska: 32px; }
.zalozka:hover { color: var(--svestka); }
.zalozka:is([aria-pressed='true'], [aria-selected='true'], [aria-current]:not([aria-current='false'])) { font-weight: var(--w-ui); }
.zalozka:is([aria-pressed='true'], [aria-selected='true'], [aria-current]:not([aria-current='false'])) :is(.zalozka-nazev, :last-child) {
  text-decoration: underline solid var(--svestka);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}
.zalozka:focus-visible { outline-offset: 2px; }
/* odkaz se vzorkem látky (.odkaz-latka, menu kola 2 a 404): jen text, vzorek se neukazuje */
.odkaz-latka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-block-size: 56px;
  padding-block: 8px;
  color: var(--cokolada);
  text-decoration: none;
}
.odkaz-latka .ustrizek-obal { display: none; }
.odkaz-latka-nazev { font: var(--w-titul) var(--t-h3) / 1.1 var(--f-titul); letter-spacing: -0.016em; }
.odkaz-latka-popis { font-size: var(--t-male); line-height: 1.35; color: var(--cokolada-2); }
.odkaz-latka:hover .odkaz-latka-nazev { color: var(--svestka); }
.odkaz-latka[aria-current='page'] .odkaz-latka-nazev { text-decoration: underline solid var(--svestka); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
/* prošitý okraj, steh jako čára, tisk s vápenným okrajem: neutrální (stehy jen v kalendáři, žádné polaroidy) */
.proshite, .proshite-svetle { outline: 0; }
.steh-cara, .steh-cara-svestka { display: block; block-size: 0; background: none; border: 0; border-top: 1px solid var(--linka-2); }
.cara { display: block; block-size: 0; border: 0; border-top: 1px solid var(--linka-2); }
.polozena-tisk .polozena-foto { padding: 0; background-color: var(--vlna-tmava); }

/* ===== src/css/03-layout.css ===== */
/* Chata Hutisko · cozy v2 → subtle · layout na všech stránkách: přeskočení, lišta návrhu s panelem poznámek,
   lepivá hlavička s čistou textovou navigací a menu (dialog), střídmá patička. HTML: src/layout/*.html.
   JS: hlavicka.js, poznamky.js. Subtle (S1, 21. 10. 2026): žádné ústřižky, feston ani tkané cedulky; aktivní
   stránka = tenké švestkové podtržení. */

/* ---------- přeskočení na obsah (první zastávka tabulátoru) ---------- */
.skok {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  font-weight: var(--w-ui);
  color: var(--vapno);
  text-decoration: none;
  background: var(--svestka);
  border-radius: var(--r-tlacitko);
}
.skok:focus-visible { top: 12px; outline-color: var(--vapno); outline-offset: -5px; }

/* ---------- lišta návrhu (pro produkci se vynechá) ---------- */
.lista {
  position: relative;
  z-index: 40;
  font: 400 0.875rem / 1.3 var(--f-text);
  color: var(--vapno);
  background-color: var(--cokolada);
}
.lista-in {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  min-height: var(--lista-vyska);
  width: min(100% - 2 * var(--okraj), var(--obsah));
  margin-inline: auto;
}
.lista-kdo { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 0 0.9em; flex-wrap: wrap; }
.lista-kdo b { font-weight: var(--w-ui); }
.lista-pod { color: var(--na-tmave-2); }
.lista-kratce { display: none; }
.lista-ovladani { display: flex; align-items: center; gap: 4px; flex: none; }
.lista-potvrdit, .lista-prepinac {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  justify-content: center;
  font: 500 0.875rem / 1 var(--f-text);
  color: var(--vapno);
  background: transparent;
  border: 0;
  border-radius: 2px;
}
.lista-potvrdit:hover:not(:disabled), .lista-prepinac:hover:not(:disabled) { background: var(--na-tmave-hover); }
.lista-potvrdit:disabled, .lista-prepinac:disabled { opacity: 0.6; }
.lista :focus-visible { outline-color: var(--vapno); outline-offset: -4px; }
.lista-pocet {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--vapno);
  background: var(--svestka);
  border-radius: 2px;
}
/* přepínač poznámek: obdélníkový, se čtvercovým jezdcem (žádná pilulka) */
.lista-prepinac i {
  position: relative;
  flex: none;
  inline-size: 36px;
  block-size: 20px;
  border: 1.5px solid var(--steh-svetly);
  border-radius: 2px;
  transition: background-color var(--d-cedulka) var(--ease), border-color var(--d-cedulka) var(--ease);
}
.lista-prepinac i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  inline-size: 13px;
  block-size: 13px;
  background: var(--vapno);
  border-radius: 1px;
  transition: translate var(--d-cedulka) var(--ease);
}
.lista-prepinac[aria-pressed='true'] i { background: var(--svestka); border-color: var(--svestka); }
.lista-prepinac[aria-pressed='true'] i::after { translate: 16px 0; }
.lista-stav-ne { display: none; }
.lista-prepinac[aria-pressed='false'] .lista-stav-ano { display: none; }
.lista-prepinac[aria-pressed='false'] .lista-stav-ne { display: inline; }
@media (max-width: 899px) {
  .lista-pod { display: none; }
}
@media (max-width: 559px) {
  .lista-dlouze { display: none; }
  .lista-kratce { display: inline; }
  .lista-potvrdit, .lista-prepinac { padding: 0 8px; }
  /* stav přepínače zůstává v názvu tlačítka, vidět je jezdec */
  .lista-stav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 399px) {
  /* na nejužších telefonech jen jezdec; „Poznámky“ zůstává v názvu tlačítka */
  .lista-prepinac-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- panel poznámek (dialog) ---------- */
.panel-poznamek {
  position: fixed;
  inset: 0 0 0 auto;
  inline-size: min(580px, 100%);
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 0;
  color: var(--cokolada);
  background-color: var(--vapno);
  border: 0;
  box-shadow: var(--stin-dialog);
  overflow: auto;
  overscroll-behavior: contain;
}
.panel-poznamek::backdrop { background: var(--clona); }
@media (prefers-reduced-motion: no-preference) {
  .panel-poznamek[open] { animation: panel-vjezd 280ms var(--ease); }
  @keyframes panel-vjezd { from { translate: 24px 0; opacity: 0; } }
}
.panel-hlava {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 16px 24px;
  background-color: var(--vapno);
}
.panel-hlava::after { content: ''; position: absolute; left: 24px; right: 20px; bottom: 0; border-top: 1px solid var(--linka-2); }
.panel-hlava h2 { font-size: var(--t-h3); line-height: 1.1; }
.panel-telo { padding: 18px 24px 48px; }
.panel-uvod { font-size: var(--t-male); color: var(--cokolada-2); max-width: 40em; }
.panel-skupina { margin-top: 30px; }
.panel-skupina h3 { display: flex; align-items: baseline; gap: 0.6em; font: var(--w-ui) var(--t-text) / 1.3 var(--f-text); letter-spacing: 0; }
.panel-skupina h3 span { font-weight: 500; color: var(--cokolada-2); }
.panel-seznam { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.panel-polozka {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px 14px 12px;
  font-size: var(--t-male);
  line-height: 1.5;
  background: var(--vlna-svetla);
  border-radius: var(--r);
  scroll-margin: 90px 0 24px;
}
.panel-polozka.je-vybrana { background: var(--svestka-svetla); outline: 2px solid var(--svestka); outline-offset: 2px; }
.panel-id { display: grid; gap: 6px; justify-items: start; align-content: start; }
.panel-id b {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 3px 6px 4px;
  font-weight: 700;
  color: var(--vapno);
  background: var(--svestka);
  border-radius: 2px;
}
.panel-id span { font-size: var(--t-drobne); color: var(--cokolada-2); }
.panel-kde { font-weight: var(--w-ui); margin-bottom: 4px; }

/* ---------- hlavička: lepivá, na vlně; po odjetí vlasová linka a měkký stín ---------- */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--vlna);
  background-image: var(--textura-vlna);
  transition: box-shadow 200ms var(--ease);
}
.hlavicka::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--linka);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.hlavicka.je-odjeto { box-shadow: var(--stin-hlavicka); }
/* pod hlavičkou se lepí lišta kapitol (.podnav): stín patří až jí, hlavička drží jen vlasovou linku */
body:has(.podnav.je-prilepena) .hlavicka.je-odjeto { box-shadow: none; }
.hlavicka.je-odjeto::after { opacity: 1; }
.hlavicka-in {
  display: flex;
  align-items: center;
  gap: 10px clamp(10px, 1.6vw, 24px);
  block-size: var(--hlavicka-vyska);
  width: min(100% - 2 * var(--okraj), var(--obsah));
  margin-inline: auto;
}
.znacka {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font: var(--w-titul-silny) clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem) / 1 var(--f-titul);
  letter-spacing: -0.02em;
  color: var(--cokolada);
  text-decoration: none;
  white-space: nowrap;
}
.znacka:hover { color: var(--svestka); }
.nav { display: none; }
.nav-seznam { list-style: none; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 36px); }
/* položka: čistý text; aktivní stránka = tenké švestkové podtržení, najetí = švestkový text */
.nav-odkaz {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1px;
  font: 500 var(--t-text) / 1 var(--f-text);
  color: var(--cokolada);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-cedulka) var(--ease);
}
.nav-odkaz::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 9px;
  border-top: 1.5px solid var(--svestka);
  opacity: 0;
  transition: opacity var(--d-cedulka) var(--ease);
}
.nav-odkaz:hover { color: var(--svestka); }
.nav-odkaz[aria-current='page']::after { opacity: 1; }
/* ústřižky kola 2 v hlavičce (starší HTML) se neukazují */
.nav-latka { display: none; }
.hlavicka-poptat { flex: none; }
.hlavicka-menu { flex: none; }
@media (min-width: 960px) {
  .nav { display: block; }
  .hlavicka-menu { display: none; }
  .hlavicka-poptat { margin-left: clamp(8px, 1.4vw, 24px); }
}
/* úzký notebook: písmo a mezery o kousek menší, ať se značka, čtyři položky a Poptat vejdou */
@media (min-width: 960px) and (max-width: 1119px) {
  .znacka { font-size: 1.1875rem; }
  .nav-odkaz { font-size: 1rem; }
  .hlavicka-in { column-gap: 12px; }
}
@media (max-width: 419px) {
  .hlavicka-dlouze { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hlavicka-in { gap: 6px; }
  .hlavicka .tl-mala { padding-inline: 0.85em; }
  .hlavicka-menu { padding-inline: 0.35em; }
}

/* ---------- mobilní menu (dialog přes celou obrazovku): čistý textový seznam stránek ---------- */
.menu {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0 var(--okraj) max(20px, env(safe-area-inset-bottom));
  color: var(--cokolada);
  background-color: var(--vlna);
  background-image: var(--textura-vlna);
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: var(--clona); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-vjezd 240ms var(--ease); }
  @keyframes menu-vjezd { from { opacity: 0; translate: 0 -8px; } }
}
.menu-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: var(--hlavicka-vyska); }
.menu-nav { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, 4vh, 48px); }
.menu-seznam { list-style: none; display: grid; }
.menu-seznam > li + li { border-top: 1px solid var(--linka); }
.menu-odkaz { display: grid; gap: 4px; padding-block: clamp(12px, 2.2vh, 20px); color: var(--cokolada); text-decoration: none; }
.menu-odkaz-nazev { justify-self: start; font: var(--w-titul) clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem) / 1.1 var(--f-titul); letter-spacing: -0.02em; }
.menu-odkaz-popis { font-size: var(--t-male); line-height: 1.35; color: var(--cokolada-2); }
.menu-odkaz:hover .menu-odkaz-nazev { color: var(--svestka); }
.menu-odkaz[aria-current='page'] .menu-odkaz-nazev { text-decoration: underline solid var(--svestka); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.menu-spodek { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linka-2); }
.menu-fakta { font: 500 var(--t-text) / 1.35 var(--f-text); color: var(--cokolada-2); }
.menu-fakta b { font-weight: var(--w-ui); color: var(--cokolada); }
.menu-spodek .spojeni-radek { min-block-size: 48px; padding-block: 6px; }

/* ---------- patička: střídmá, vlasová linka nahoře, značka s jedinou větou o hutích, kontakt, stránky a zdroje ---------- */
.pata {
  position: relative;
  padding: clamp(48px, 2rem + 3vw, 80px) 0 max(28px, env(safe-area-inset-bottom));
  color: var(--cokolada);
  background-color: var(--vlna-tmava);
  border-top: 1px solid var(--linka);
}
.pata-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px var(--mezera); align-items: start; }
.pata-znacka-blok { grid-column: 1 / span 4; display: grid; gap: 12px; align-content: start; max-inline-size: 24rem; }
.pata-znacka { font: var(--w-titul-silny) 1.375rem / 1.15 var(--f-titul); letter-spacing: -0.02em; }
.pata-fakt { font-size: 1rem; line-height: 1.5; color: var(--cokolada-2); }
@media (min-width: 1080px) { .pata-fakt { font-size: var(--t-text); } }
.pata-kontakt { grid-column: 5 / span 4; display: grid; gap: 6px; }
.pata-adresa { font-size: var(--t-text); line-height: 1.45; }
.pata-nav { grid-column: 9 / span 4; }
.pata-nav ul { list-style: none; display: grid; }
.pata-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.pata-nav a:hover { color: var(--svestka); text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.pata-nav a[aria-current='page'] { text-decoration: underline solid var(--svestka); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
.pata-nav .pata-zdroje-odkaz { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linka-2); }
.pata-spodek { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; padding-top: 8px; border-top: 1px solid var(--linka); }
.pata-nahoru { font-size: 1rem; }
@media (max-width: 1099px) {
  .pata-znacka-blok { grid-column: 1 / span 6; }
  .pata-kontakt { grid-column: 7 / span 6; }
  .pata-nav { grid-column: 1 / -1; }
  .pata-nav ul { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: clamp(24px, 4vw, 48px); }
  .pata-nav .pata-zdroje-odkaz { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 699px) {
  .pata-in { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pata-znacka-blok, .pata-kontakt, .pata-nav { grid-column: 1; }
  .pata-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ===== src/css/50-pozadi-a.css ===== */
/* Varianta pozadí A „Krajina za domem“ (kolo „pozadí“, 22. 10. 2026; research/remake/17-POZADI-ZADANI.md).
   Všechna pravidla jen pod html[data-pozadi="a"]. Vítězná varianta (Jan, 22. 10. 2026); pozadí celého webu. JS: js/pozadi-a.js, obrázky:
   media/pozadi/a/ (masky ze skutečných fotek okolí chaty, vyrábí tools/pozadi-a.mjs, původ v pozadi-a.json).

   - Závoj (.pa-zavoj, vkládá JS): velká měkká fotka krajiny kolem domu jako duotón v barvách webu. Obrázek je jen
     maska (alfa), barvu dává token: na vlně čokoláda do švestky, na čokoládě vápno. Nízké krytí (--pa-sila),
     měkké okraje (2. a 3. vrstva masky), text a fotky zůstávají hlavní. Paralaxa jen posunem stránky
     (scroll-driven animace, ± --pa-posun), běží i s omezeným pohybem; bez animation-timeline posouvá vrstvu JS.
   - Úvod: louka a les za hřištěm za planetou (les 80 metrů od domu), dům v krajině s hřebenem za rozcestníkem,
     jedna tmavá čokoládová „večerní“ sekce (Co říkají hosté + Dům a zahrada) se zasněženým údolím ve vápně.
   - Chata: louka a les za titulkem a štítky hlavy Pokoj po pokoji, dům ve zlaté
     hodině vedle textu Venku. Ostatní stránky: oddíl „Ostatní stránky“ níž (agent S, zadání 18 kap. 4).
   - Bez JS: závoje nejsou (dekorace), večerní sekce ano (jen CSS). */

/* ---------- závoj ---------- */
/* .pa-ma-zavoj = sekce se závojem; .pa-nese dostane jen sekce, která jinak není poziční (scéna úvodu je lepivá) */
html[data-pozadi="a"] .pa-nese { position: relative; }
html[data-pozadi="a"] .pa-zavoj {
  --pa-sila: 0.24;                  /* krytí inkoustu v nejtmavším místě fotky */
  --pa-posun: 36px;                 /* paralaxa: vrstva se během průjezdu posune o ± tolik */
  /* inkoust: vzdálená krajina do švestky, blízká čokoládou (vzdušná perspektiva v barvách webu) */
  --pa-inkoust: linear-gradient(var(--svestka), var(--cokolada) 72%);
  --pa-pozice: 50% 50%;             /* ohnisko fotky (mask-position) */
  --pa-velikost: cover;
  /* 2. a 3. vrstva masky: měkké vyblednutí vodorovně (ke straně s textem) a svisle; výchozí plné = nic */
  --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
  --pa-prechod-svisle: linear-gradient(var(--cokolada), var(--cokolada));
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html[data-pozadi="a"] .pa-zavoj-vrstva {
  position: absolute;
  inset: var(--pa-misto, 0);
  block-size: var(--pa-vyska, auto);
  background: var(--pa-inkoust);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--pa-velikost), 100% 100%, 100% 100%;
  mask-size: var(--pa-velikost), 100% 100%, 100% 100%;
  -webkit-mask-position: var(--pa-pozice), 0 0, 0 0;
  mask-position: var(--pa-pozice), 0 0, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
/* než je maska dekódovaná, vrstva maluje neviditelně (0,001), aby ji prohlížeč připravil; pak se jednou prolne */
html[data-pozadi="a"] .pa-zavoj.pa-pripravuje .pa-zavoj-vrstva { opacity: 0.001; }
html[data-pozadi="a"] .pa-zavoj.je-nacteno .pa-zavoj-vrstva { opacity: var(--pa-sila); }
/* změna roční doby (léto × zima na Úvodu): závoj se ztlumí, vymění masku a prolne zpět */
html[data-pozadi="a"] .pa-zavoj.je-nacteno.pa-meni .pa-zavoj-vrstva { opacity: 0.001; }

/* paralaxa řízená posunem: vrstva jede pomaleji než obsah (od −posun do +posun během průjezdu sekce oknem) */
@keyframes pa-paralaxa {
  from { transform: translate3d(0, calc(-1 * var(--pa-posun)), 0); }
  to { transform: translate3d(0, var(--pa-posun), 0); }
}
/* úvod: scéna je připnutá, krajina během rozevření planety pomalu klesá */
@keyframes pa-uvod {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--pa-posun), 0); }
}
@supports (animation-timeline: view()) {
  html[data-pozadi="a"] .pa-zavoj { view-timeline: --pa-zavoj block; }
  html[data-pozadi="a"] .pa-zavoj-vrstva {
    animation: pa-paralaxa linear both;
    animation-timeline: --pa-zavoj;
    animation-range: cover 0% cover 100%;
  }
  html[data-pozadi="a"] #uvod { view-timeline: --pa-uvod block; }
  html[data-pozadi="a"] .pa-zavoj--uvod .pa-zavoj-vrstva {
    animation-name: pa-uvod;
    animation-timeline: --pa-uvod;
    animation-range: contain 0% contain 100%;
  }
}

/* ---------- Úvod: louka a les za planetou („les 80 metrů od domu“) ---------- */
/* závoj leží ve scéně (připnutá s ní), pod planetou (1), oknem do obýváku (2) i textem (3) */
html[data-pozadi="a"] .uvod-scena { isolation: isolate; }
html[data-pozadi="a"] .pa-zavoj--uvod {
  --pa-sila: 0.4;
  --pa-posun: 28px;
  /* z terasy louka stoupá k lesu: les nahoře nad titulkem a za horní půlkou planety, titulek a perex na louce */
  --pa-velikost: 116% auto;
  --pa-pozice: 30% -90px;
  --pa-prechod: linear-gradient(to right, color-mix(in srgb, var(--cokolada) 80%, transparent) 20%, var(--cokolada) 50%);
  --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 9%, var(--cokolada) 34%, transparent 56%);
}

/* ---------- Úvod: rozcestník, dům v krajině s hřebenem za údolím nad řádkem nadpisu ---------- */
/* štít a střecha nad nadpisem a třetí dlaždicí, hřeben a zahrada vedle nadpisu; k dlaždicím se krajina rozplyne */
html[data-pozadi="a"] .pa-zavoj--rozc {
  --pa-sila: 0.26;
  --pa-misto: -150px 0 auto 0;
  --pa-vyska: 600px;
  --pa-velikost: 100% auto;
  --pa-pozice: 50% 160px;
  --pa-prechod: linear-gradient(to right, color-mix(in srgb, var(--cokolada) 55%, transparent) 26%, var(--cokolada) 48%);
  --pa-prechod-svisle: linear-gradient(transparent 20%, var(--cokolada) 30%, var(--cokolada) 60%, transparent 70%);
}
/* v zimě (léto × zima, js/sezona.js) maska „zima“: tentýž dům z louky pod sněhem; je vyšší (2,4 : 1), posunutá nahoru,
   aby střecha domu a houpačka ležely v pásu, kde je závoj vidět */
html[data-pozadi="a"][data-sezona="zima"] .pa-zavoj--rozc { --pa-pozice: 50% -100px; }

/* ---------- Úvod: večerní sekce (Co říkají hosté + Dům a zahrada), text ve vápně ---------- */
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) {
  color: var(--vapno);
  background-color: var(--cokolada);
}
html[data-pozadi="a"][data-stranka="uvod"] #hoste { isolation: isolate; }
html[data-pozadi="a"][data-stranka="uvod"] #galerie { padding-bottom: var(--rytmus); }
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) :is(h2, .citace, .hodnoceni-radka b) { color: var(--vapno); }
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) :is(.perex, .podpis, .hodnoceni-radka, .galerie-datum) { color: var(--na-tmave-2); }
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) .podpis::before { border-top-color: var(--na-tmave-2); }
html[data-pozadi="a"][data-stranka="uvod"] #hoste .hoste-radka { border-top-color: var(--na-tmave-hover); }
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) .hodnoceni-radka > a:hover,
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) .hodnoceni-radka > a:hover b { color: var(--vapno); }
html[data-pozadi="a"][data-stranka="uvod"] :is(#hoste, #galerie) :focus-visible { outline-color: var(--vapno); }
html[data-pozadi="a"][data-stranka="uvod"] #galerie .galerie-pas { scrollbar-color: var(--na-tmave-2) transparent; }
/* zasněžené údolí v lednu světlem: sníh a střecha domu prosvítají vápnem, vlevo pod citací závoj slábne */
html[data-pozadi="a"] .pa-zavoj--vecer {
  --pa-inkoust: var(--vapno);
  --pa-sila: 0.3;
  --pa-velikost: 86% auto;
  --pa-pozice: 100% 100%;
  --pa-prechod: linear-gradient(to right, color-mix(in srgb, var(--cokolada) 30%, transparent) 20%, var(--cokolada) 58%);
}

/* ---------- Chata a ostatní stránky: hlava stránky ---------- */
html[data-pozadi="a"] .pa-zavoj--hlava {
  --pa-sila: 0.22;
  --pa-misto: 0 0 -120px 0;
  --pa-velikost: 100% auto;
  --pa-pozice: 50% 70%;
  /* perex nahoře a lišta kapitol dole na čisté vlně (kontrast AA), les jen za titulkem a štítky;
     vpravo (perex hlavy vedle titulku) jen do poloviny */
  --pa-prechod: linear-gradient(to right, var(--cokolada) 34%, color-mix(in srgb, var(--cokolada) 45%, transparent) 60%);
  --pa-prechod-svisle: linear-gradient(transparent 16%, var(--cokolada) 30%, var(--cokolada) 46%, transparent 60%);
}

/* Chata (Pokoj po pokoji, klíčová sekce): les výrazněji než v hlavách ostatních stránek */
html[data-pozadi="a"][data-stranka="chata"] .pa-zavoj--hlava { --pa-sila: 0.3; }

/* ---------- Chata: Venku, dům ve zlaté hodině vlevo pod textem ---------- */
html[data-pozadi="a"] .pa-zavoj--venku {
  --pa-sila: 0.2;
  --pa-misto: 40% 40% 0 0;
  --pa-velikost: auto 100%;
  --pa-pozice: 30% 100%;
  --pa-prechod: linear-gradient(to left, transparent, var(--cokolada) 40%);
  --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 36%, var(--cokolada) 70%, transparent);
}

/* ========== Ostatní stránky (agent S, 22. 10. 2026; research/remake/18-CHATA-PROCHAZKA-ZADANI.md kap. 4) ==========
   Každá stránka má svou krajinu ze skutečných fotek a závoj leží tam, kde má na stránce smysl:
   - Okolí: výhled ze Soláně (hřebeny, les, louky) v hlavě; večerní sekce Hosté o okolí s týmiž loukami ve večerním
     slunci světlem na čokoládě;
   - Ceník: louka a les za hlavou, dům ve zlaté hodině nad „Celý dům za noc“; kalendář a poptávka zůstávají na
     čisté vlně (karty, nic za nimi);
   - Kontakt: krajina kolem domu vystupuje zpoza fotky lucerny (dům sám je schovaný za fotkou), večerní sekce Než
     přijedete s domem pod sněhem;
   - Zdroje: údolí v lednu v hlavě (stránka ke čtení, nic dalšího);
   - 404: díra v dece je okno do zimní noci u domu (závoj jen uvnitř díry, záplata zůstává nahoře).
   Perexy a drobný text leží vždy na čisté nebo jen slabě zakryté vlně (přechody masky), kontrast ověřen. */

/* Hlavy Okolí, Ceníku a Zdrojů (nadpis vlevo, perex vpravo nahoře, štítky pod nimi): krajina leží za nadpisem
   a štítky a doprava se rozplyne dřív, než začne perex (sloupec 8/12); nahoře nechá pod hlavičkou čistou vlnu.
   Výška masky v px drží krajinu u nadpisu na všech šířkách (šířka 1 440 px, vpravo je stejně průhledná). */
html[data-pozadi="a"] :is(.pa-zavoj--okoli, .pa-zavoj--cenik, .pa-zavoj--zdroje) {
  --pa-posun: 24px;
  --pa-prechod: linear-gradient(to right, var(--cokolada) 28%, transparent 56%);
  --pa-prechod-svisle: linear-gradient(transparent 2%, var(--cokolada) 26%, var(--cokolada) 84%, transparent);
}
/* závoj jen za štítky je pro telefon a úzký tablet (oddíl na konci souboru) */
html[data-pozadi="a"] :is(.pa-zavoj--okoli-stitky, .pa-zavoj--cenik-stitky, .pa-zavoj--zdroje-stitky) { display: none; }
/* Okolí: vzdálené hřebeny Beskyd za horní půlkou nadpisu, les za jeho spodkem a za štítky */
html[data-pozadi="a"] .pa-zavoj--okoli {
  --pa-sila: 0.34;
  --pa-velikost: auto 316px;
  --pa-pozice: -160px 44px;
}

/* Okolí, večerní sekce Hosté o okolí: čokoláda, text ve vápně; louky Soláně ve večerním slunci prosvítají vápnem
   pod citací. Předchozí sekce nemá spodní odsazení, proto tma začíná až po rytmu kapitol na vlně. */
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu {
  margin-top: var(--rytmus);
  padding-bottom: var(--rytmus);
  color: var(--vapno);
  background-color: var(--cokolada);
  isolation: isolate;
}
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu .tipy-hlas :is(h2, .citace) { color: var(--vapno); }
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu .tipy-hlas .podpis { color: var(--na-tmave-2); }
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu .tipy-hlas .podpis::before { border-top-color: var(--na-tmave-2); }
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu :focus-visible { outline-color: var(--vapno); }
html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu .karta :focus-visible { outline-color: var(--svestka); }
html[data-pozadi="a"] .pa-zavoj--okoli-vecer {
  --pa-inkoust: var(--vapno);
  --pa-sila: 0.5;
  --pa-velikost: 100% auto;
  --pa-pozice: 50% 100%;
  --pa-prechod: linear-gradient(to right, color-mix(in srgb, var(--cokolada) 50%, transparent) 8%, var(--cokolada) 42%);
}

/* Ceník, hlava: louka a les za hřištěm za titulkem a štítky (perex vpravo nahoře na čisté vlně) */
html[data-pozadi="a"] .pa-zavoj--cenik {
  --pa-sila: 0.28;
  --pa-velikost: auto 605px;
  --pa-pozice: 0 -120px;
}
/* Ceník, Celý dům za noc: dům ve zlaté hodině vpravo vedle nadpisu, rozplyne se nad roční osou (měsíce na čisté vlně) */
html[data-pozadi="a"] .pa-zavoj--cenik-dum {
  --pa-sila: 0.26;
  --pa-posun: 20px;
  --pa-misto: 0 0 auto 44%;
  --pa-vyska: calc(var(--rytmus) + 230px);
  --pa-velikost: 100% auto;
  --pa-pozice: 50% 34%;
  --pa-prechod: linear-gradient(to right, transparent, var(--cokolada) 30%, var(--cokolada) 86%, transparent);
  --pa-prechod-svisle: linear-gradient(transparent 4%, var(--cokolada) 30%, var(--cokolada) 58%, transparent 92%);
}

/* Kontakt, Příjezd a odjezd: dům v krajině vpravo vedle nadpisu („Les začíná 80 metrů za domem“, „Snídaně na
   terase s výhledem na louku“); nad osou dne se rozplyne, časy a texty osy leží na čisté vlně. Hlava stránky
   závoj nemá: má vlastní velkou fotku domu s lucernou. */
html[data-pozadi="a"] .pa-zavoj--kontakt {
  --pa-sila: 0.3;
  --pa-posun: 20px;
  --pa-misto: 0 0 auto 44%;
  --pa-vyska: calc(var(--rytmus) + 200px);
  --pa-velikost: 100% auto;
  --pa-pozice: 0 30%;
  --pa-prechod: linear-gradient(to right, transparent, var(--cokolada) 26%, var(--cokolada) 90%, transparent);
  --pa-prechod-svisle: linear-gradient(transparent 6%, var(--cokolada) 30%, var(--cokolada) 66%, transparent 96%);
}

/* Kontakt, večerní sekce Než přijedete: čokoláda, text ve vápně; dům pod sněhem vpravo nahoře (sníh na střeše
   a keři světlem), dolů za seznam „Už tu je“ se rozplyne. Perex a řádka pod seznamy (drobnější text) na čisté tmě. */
html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem {
  margin-top: var(--rytmus);
  padding-bottom: var(--rytmus);
  color: var(--vapno);
  background-color: var(--cokolada);
  isolation: isolate;
}
html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem :is(h2, h3) { color: var(--vapno); }
html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem :is(.perex, .pred-radka) { color: var(--na-tmave-2); }
html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem .pred-veci > li { border-color: color-mix(in srgb, var(--vapno) 24%, transparent); }
html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem :focus-visible { outline-color: var(--vapno); }
html[data-pozadi="a"] .pa-zavoj--kontakt-vecer {
  --pa-inkoust: var(--vapno);
  --pa-sila: 0.32;
  --pa-misto: 0 0 auto 58%;
  --pa-vyska: 74%;
  --pa-velikost: auto 70%;
  --pa-pozice: calc(100% + 150px) 44%;
  --pa-prechod: linear-gradient(to right, transparent, var(--cokolada) 30%);
  --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 16%, var(--cokolada) 58%, transparent 96%);
}
/* užší počítač: perex u nadpisu Celý dům za noc je relativně širší → dům až za ním */
@media (min-width: 699px) and (max-width: 1199px) and (orientation: landscape), (min-width: 900px) and (max-width: 1199px) {
  html[data-pozadi="a"] .pa-zavoj--cenik-dum { --pa-misto: 0 0 auto 60%; }
}

/* Zdroje, hlava: hřeben přes údolí v lednu za titulkem a štítky (dům vpravo se rozplyne dřív než perex) */
html[data-pozadi="a"] .pa-zavoj--zdroje {
  --pa-sila: 0.34;
  --pa-velikost: auto 605px;
  --pa-pozice: -260px -144px;
}

/* 404: díra v dece je okno do zimní noci u domu. Závoj leží nad tmou díry a pod záplatou, maska = tvar díry
   (stejná cesta jako v 10-dira.html) a měkké vyblednutí ke kraji, aby roztřepený okraj zůstal tmavý. Nehýbe se
   (posun 0), jinak by ujel z díry. */
html[data-pozadi="a"] .pa-zavoj--dira {
  --pa-inkoust: var(--vapno);
  --pa-sila: 0.42;
  --pa-posun: 0px;
  --pa-velikost: auto 60%;
  --pa-pozice: 64% 30%;
  --pa-prechod: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320' preserveAspectRatio='none'%3E%3Cpath d='M118 78 L150 62 L182 67 L214 56 L250 70 L284 86 L302 114 L322 140 L314 176 L320 208 L296 236 L262 252 L228 270 L190 262 L152 266 L120 244 L96 218 L88 184 L76 150 L90 116 Z'/%3E%3C/svg%3E");
  --pa-prechod-svisle: radial-gradient(28% 31% at 52% 52%, var(--cokolada) 40%, transparent);
  z-index: 1;
}
html[data-pozadi="a"][data-stranka="404"] .dira-zaplata { z-index: 2; }

/* ---------- telefon a úzký tablet ---------- */
@media (max-width: 698px), (max-width: 899px) and (orientation: portrait) {
  html[data-pozadi="a"] .pa-zavoj { --pa-posun: 20px; }
  /* telefon: planeta zabírá celou šířku, les proto stojí za titulkem (jako na počítači) */
  html[data-pozadi="a"] .pa-zavoj--uvod {
    --pa-sila: 0.34;
    --pa-velikost: auto 30%;
    --pa-pozice: 50% -40px;
    --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 4%, var(--cokolada) 14%, transparent 25%);
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
  }
  /* telefon: dlaždice rozcestníku jsou přes celou šířku, závoj by ležel jen pod nadpisem → zjednodušeno bez něj */
  html[data-pozadi="a"] .pa-zavoj--rozc { display: none; }
  /* telefon: zasněžený dům vpravo dole pod řádkou hodnocení, sekce má pro něj vzduch navíc */
  html[data-pozadi="a"][data-stranka="uvod"] #hoste { padding-bottom: 180px; }
  html[data-pozadi="a"] .pa-zavoj--vecer {
    --pa-velikost: 120% auto;
    --pa-pozice: 70% 100%;
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
    --pa-prechod-svisle: linear-gradient(transparent 56%, var(--cokolada) 70%);
  }
  /* telefon: krajina hlavy až za štítky a lištou kapitol, titul a perex na čisté vlně */
  html[data-pozadi="a"] .pa-zavoj--hlava {
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
    --pa-velikost: auto 60%;
    --pa-pozice: 42% 100%;
    --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 30%, var(--cokolada) 60%, transparent 74%);
  }
  /* telefon: Venku nemá vedle textu volné místo (fotky jsou přes celou šířku) → zjednodušeno bez závoje */
  html[data-pozadi="a"] .pa-zavoj--venku { display: none; }
}

/* ---------- ostatní stránky na telefonu a úzkém tabletu (agent S) ---------- */
@media (max-width: 698px), (max-width: 899px) and (orientation: portrait) {
  /* hlavy: nadpis a perex na čisté vlně, krajina jen za štítky (zalamují se do řádků, mezi nimi a vpravo je vidět).
     Závoj leží v bloku štítků (.shrnuti) a přesahuje k okrajům okna, takže sedí na všech šířkách bez ohledu na
     délku perexu; závoj celé sekce je tu skrytý (a nestahuje se). */
  html[data-pozadi="a"] :is(.pa-zavoj--okoli, .pa-zavoj--cenik, .pa-zavoj--zdroje) { display: none; }
  html[data-pozadi="a"] :is(.pa-zavoj--okoli-stitky, .pa-zavoj--cenik-stitky, .pa-zavoj--zdroje-stitky) {
    display: block;
    --pa-posun: 12px;
    --pa-misto: -26px calc(-1 * var(--okraj)) -22px calc(-1 * var(--okraj));
    --pa-velikost: cover;
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
    --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 30%, var(--cokolada) 78%, transparent);
  }
  html[data-pozadi="a"] .pa-zavoj--okoli-stitky { --pa-sila: 0.34; --pa-pozice: 22% 50%; }
  html[data-pozadi="a"] .pa-zavoj--cenik-stitky { --pa-sila: 0.3; --pa-pozice: 40% 45%; }
  html[data-pozadi="a"] .pa-zavoj--zdroje-stitky { --pa-sila: 0.34; --pa-pozice: 62% 70%; }
  /* Ceník: nad roční osou není vedle nadpisu místo → zjednodušeno bez domu */
  html[data-pozadi="a"] .pa-zavoj--cenik-dum { display: none; }
  /* Kontakt, Příjezd a odjezd: nadpis, perex i osa jsou přes celou šířku, vedle nadpisu není místo → bez domu */
  html[data-pozadi="a"] .pa-zavoj--kontakt { display: none; }
  /* večerní sekce: krajina dole pod obsahem, sekce pro ni dostane vzduch navíc (jako hosté na úvodu) */
  html[data-pozadi="a"][data-stranka="okoli"] #tipy-hostu { padding-bottom: calc(var(--rytmus) + 120px); }
  html[data-pozadi="a"] .pa-zavoj--okoli-vecer {
    --pa-misto: auto 0 0 0;
    --pa-vyska: 300px;
    --pa-velikost: auto 100%;
    --pa-pozice: 62% 100%;
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
    --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 40%);
  }
  html[data-pozadi="a"][data-stranka="kontakt"] #pred-prijezdem { padding-bottom: calc(var(--rytmus) + 150px); }
  html[data-pozadi="a"] .pa-zavoj--kontakt-vecer {
    --pa-misto: auto 0 0 0;
    --pa-vyska: 240px;
    --pa-velikost: auto 100%;
    --pa-pozice: 70% 100%;
    --pa-prechod: linear-gradient(var(--cokolada), var(--cokolada));
    --pa-prechod-svisle: linear-gradient(transparent, var(--cokolada) 34%);
  }
}

/* ===== media/latky/latky.json (generuje tools/stavba.mjs, 17 látek) ===== */
[data-latka="kostka"] { --latka: url("media/latky/kostka-512.webp"); --latka-velka: url("media/latky/kostka-1024.webp"); --latka-tkanina: none; --latka-barva: #7d251e; --latka-velikost: 256px; --latka-text: var(--vapno); --latka-nit: var(--steh-svetly); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="kostka"] { --latka: image-set(url("media/latky/kostka-512.avif") type("image/avif"), url("media/latky/kostka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/kostka-1024.avif") type("image/avif"), url("media/latky/kostka-1024.webp") type("image/webp")); } }
[data-latka="povleceni-postylka"] { --latka: url("media/latky/povleceni-postylka-512.webp"); --latka-velka: url("media/latky/povleceni-postylka-1024.webp"); --latka-tkanina: none; --latka-barva: #bfb8b6; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="povleceni-postylka"] { --latka: image-set(url("media/latky/povleceni-postylka-512.avif") type("image/avif"), url("media/latky/povleceni-postylka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/povleceni-postylka-1024.avif") type("image/avif"), url("media/latky/povleceni-postylka-1024.webp") type("image/webp")); } }
[data-latka="povleceni-pohovka"] { --latka: url("media/latky/povleceni-pohovka-512.webp"); --latka-velka: url("media/latky/povleceni-pohovka-1024.webp"); --latka-tkanina: none; --latka-barva: #acb0b3; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="povleceni-pohovka"] { --latka: image-set(url("media/latky/povleceni-pohovka-512.avif") type("image/avif"), url("media/latky/povleceni-pohovka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/povleceni-pohovka-1024.avif") type("image/avif"), url("media/latky/povleceni-pohovka-1024.webp") type("image/webp")); } }
[data-latka="strop-borovice"] { --latka: url("media/latky/strop-borovice-512.webp"); --latka-velka: url("media/latky/strop-borovice-1024.webp"); --latka-tkanina: none; --latka-barva: #a57330; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="strop-borovice"] { --latka: image-set(url("media/latky/strop-borovice-512.avif") type("image/avif"), url("media/latky/strop-borovice-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/strop-borovice-1024.avif") type("image/avif"), url("media/latky/strop-borovice-1024.webp") type("image/webp")); } }
[data-latka="sauna-smrk"] { --latka: url("media/latky/sauna-smrk-512.webp"); --latka-velka: url("media/latky/sauna-smrk-1024.webp"); --latka-tkanina: none; --latka-barva: #83482a; --latka-velikost: 256px; --latka-text: var(--vapno); --latka-nit: var(--steh-svetly); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="sauna-smrk"] { --latka: image-set(url("media/latky/sauna-smrk-512.avif") type("image/avif"), url("media/latky/sauna-smrk-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/sauna-smrk-1024.avif") type("image/avif"), url("media/latky/sauna-smrk-1024.webp") type("image/webp")); } }
[data-latka="omitka"] { --latka: url("media/latky/omitka-512.webp"); --latka-velka: url("media/latky/omitka-1024.webp"); --latka-tkanina: none; --latka-barva: #dcdad7; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="omitka"] { --latka: image-set(url("media/latky/omitka-512.avif") type("image/avif"), url("media/latky/omitka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/omitka-1024.avif") type("image/avif"), url("media/latky/omitka-1024.webp") type("image/webp")); } }
[data-latka="bridlice"] { --latka: url("media/latky/bridlice-512.webp"); --latka-velka: url("media/latky/bridlice-1024.webp"); --latka-tkanina: none; --latka-barva: #aea18c; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="bridlice"] { --latka: image-set(url("media/latky/bridlice-512.avif") type("image/avif"), url("media/latky/bridlice-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/bridlice-1024.avif") type("image/avif"), url("media/latky/bridlice-1024.webp") type("image/webp")); } }
[data-latka="zadveri-dlazba"] { --latka: url("media/latky/zadveri-dlazba-512.webp"); --latka-velka: url("media/latky/zadveri-dlazba-1024.webp"); --latka-tkanina: none; --latka-barva: #a2b0bb; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="zadveri-dlazba"] { --latka: image-set(url("media/latky/zadveri-dlazba-512.avif") type("image/avif"), url("media/latky/zadveri-dlazba-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/zadveri-dlazba-1024.avif") type("image/avif"), url("media/latky/zadveri-dlazba-1024.webp") type("image/webp")); } }
[data-latka="terasa-dlazba"] { --latka: url("media/latky/terasa-dlazba-512.webp"); --latka-velka: url("media/latky/terasa-dlazba-1024.webp"); --latka-tkanina: none; --latka-barva: #d0bcae; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="terasa-dlazba"] { --latka: image-set(url("media/latky/terasa-dlazba-512.avif") type("image/avif"), url("media/latky/terasa-dlazba-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/terasa-dlazba-1024.avif") type("image/avif"), url("media/latky/terasa-dlazba-1024.webp") type("image/webp")); } }
[data-latka="zaclony-kuchyn"] { --latka: url("media/latky/kostka-512.webp"); --latka-velka: url("media/latky/kostka-1024.webp"); --latka-tkanina: none; --latka-barva: #7d251e; --latka-velikost: 256px; --latka-text: var(--vapno); --latka-nit: var(--steh-svetly); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="zaclony-kuchyn"] { --latka: image-set(url("media/latky/kostka-512.avif") type("image/avif"), url("media/latky/kostka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/kostka-1024.avif") type("image/avif"), url("media/latky/kostka-1024.webp") type("image/webp")); } }
[data-latka="povleceni-loznice"] { --latka: url("media/latky/povleceni-postylka-512.webp"); --latka-velka: url("media/latky/povleceni-postylka-1024.webp"); --latka-tkanina: none; --latka-barva: #bfb8b6; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="povleceni-loznice"] { --latka: image-set(url("media/latky/povleceni-postylka-512.avif") type("image/avif"), url("media/latky/povleceni-postylka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/povleceni-postylka-1024.avif") type("image/avif"), url("media/latky/povleceni-postylka-1024.webp") type("image/webp")); } }
[data-latka="polstare-pohovka"] { --latka: url("media/latky/strop-borovice-512.webp"); --latka-velka: url("media/latky/strop-borovice-1024.webp"); --latka-tkanina: none; --latka-barva: #a57330; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="polstare-pohovka"] { --latka: image-set(url("media/latky/strop-borovice-512.avif") type("image/avif"), url("media/latky/strop-borovice-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/strop-borovice-1024.avif") type("image/avif"), url("media/latky/strop-borovice-1024.webp") type("image/webp")); } }
[data-latka="bor-tramy"] { --latka: url("media/latky/strop-borovice-512.webp"); --latka-velka: url("media/latky/strop-borovice-1024.webp"); --latka-tkanina: none; --latka-barva: #a57330; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="bor-tramy"] { --latka: image-set(url("media/latky/strop-borovice-512.avif") type("image/avif"), url("media/latky/strop-borovice-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/strop-borovice-1024.avif") type("image/avif"), url("media/latky/strop-borovice-1024.webp") type("image/webp")); } }
[data-latka="smrk-sauna"] { --latka: url("media/latky/sauna-smrk-512.webp"); --latka-velka: url("media/latky/sauna-smrk-1024.webp"); --latka-tkanina: none; --latka-barva: #83482a; --latka-velikost: 256px; --latka-text: var(--vapno); --latka-nit: var(--steh-svetly); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="smrk-sauna"] { --latka: image-set(url("media/latky/sauna-smrk-512.avif") type("image/avif"), url("media/latky/sauna-smrk-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/sauna-smrk-1024.avif") type("image/avif"), url("media/latky/sauna-smrk-1024.webp") type("image/webp")); } }
[data-latka="bridlice-terasa"] { --latka: url("media/latky/bridlice-512.webp"); --latka-velka: url("media/latky/bridlice-1024.webp"); --latka-tkanina: none; --latka-barva: #aea18c; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="bridlice-terasa"] { --latka: image-set(url("media/latky/bridlice-512.avif") type("image/avif"), url("media/latky/bridlice-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/bridlice-1024.avif") type("image/avif"), url("media/latky/bridlice-1024.webp") type("image/webp")); } }
[data-latka="vapno-omitka"] { --latka: url("media/latky/omitka-512.webp"); --latka-velka: url("media/latky/omitka-1024.webp"); --latka-tkanina: none; --latka-barva: #dcdad7; --latka-velikost: 256px; --latka-text: var(--cokolada); --latka-nit: var(--steh-svestka); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="vapno-omitka"] { --latka: image-set(url("media/latky/omitka-512.avif") type("image/avif"), url("media/latky/omitka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/omitka-1024.avif") type("image/avif"), url("media/latky/omitka-1024.webp") type("image/webp")); } }
[data-latka="obklad-kuchyn"] { --latka: url("media/latky/kostka-512.webp"); --latka-velka: url("media/latky/kostka-1024.webp"); --latka-tkanina: none; --latka-barva: #7d251e; --latka-velikost: 256px; --latka-text: var(--vapno); --latka-nit: var(--steh-svetly); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { [data-latka="obklad-kuchyn"] { --latka: image-set(url("media/latky/kostka-512.avif") type("image/avif"), url("media/latky/kostka-512.webp") type("image/webp")); --latka-velka: image-set(url("media/latky/kostka-1024.avif") type("image/avif"), url("media/latky/kostka-1024.webp") type("image/webp")); } }