/* Atomické třídy z návrhu (.fx, .col, .grid, …). */
.fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}

/* ------------------------------------------------------------------
   Stylopis návrhu: tokeny, komponenty, breakpointy, tisk.
   Hodnoty jsou přenesené beze změny.
   ------------------------------------------------------------------ */
:root{--bg:#f7f6f3;--bg-blur:rgba(247,246,243,.92);--surface:#fdfcfa;--surface2:#efece4;--line:#ddd9cf;--line2:#e6e2d8;--fg:#16150f;--fg2:#2b281f;--muted:#57534a;--faint:#726d62;--accent:#b54f26;--accent-fill:#b54f26;--accent2:#e0865a;--invert-bg:#16150f;--invert-fg:#f7f6f3}
[data-theme="dark"]{--bg:#14130e;--bg-blur:rgba(20,19,14,.92);--surface:#1c1a14;--surface2:#23211a;--line:#38342a;--line2:#2c2921;--fg:#f2efe7;--fg2:#ded9ce;--muted:#aaa396;--faint:#8b857a;--accent:#e0865a;--accent-fill:#b54f26;--accent2:#e0865a;--invert-bg:#0d0c09;--invert-fg:#f7f6f3}
html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);transition:background .35s ease,color .35s ease;font-family:'EB Garamond',Georgia,serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--fg);text-decoration:none}
a:hover{opacity:.75}
h1,h2{font-kerning:normal}
input,textarea,button,select{font-family:inherit}
::selection{background:rgba(192,86,42,.22);color:inherit}
[data-theme="dark"] img,[data-theme="dark"] image-slot{filter:brightness(.88) saturate(.94)}
summary::-webkit-details-marker{display:none}
summary{cursor:pointer;list-style:none}
summary:hover .ch-title{color:var(--accent)}
.ch-plus{transition:transform .25s ease}
details[open] .ch-plus{transform:rotate(45deg)}
details[open]{background:var(--surface)}
details[open] .ch-title{color:var(--accent)}
[id]{scroll-margin-top:104px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.navlink[data-active="1"]{color:var(--accent)}
.navlink[data-active="1"] .navdot{opacity:1}
.navdot{opacity:0;transition:opacity .25s ease}
.ch-card{background:var(--bg);border-bottom:1px solid var(--line);transition:background .18s ease}
.ch-card:hover{background:var(--surface)}
details::details-content{block-size:0;overflow:hidden;content-visibility:hidden;opacity:0;transition:block-size .42s cubic-bezier(.2,.7,.2,1),opacity .3s ease,content-visibility .42s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1;content-visibility:visible}
details.noanim::details-content{transition:none !important}
details[open] .ch-idea{animation:write 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html{interpolate-size:allow-keywords}
[data-rvl]{transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),clip-path .5s cubic-bezier(.2,.7,.2,1)}
[data-rvl="up"][data-on="0"]{opacity:0;transform:translateY(14px)}
[data-rvl="clip"][data-on="0"]{clip-path:inset(0 0 100% 0)}
.hero-line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.hero-line>span{display:block;animation:riseIn 1s cubic-bezier(.2,.75,.2,1) both}
@keyframes riseIn{from{transform:translateY(105%)}to{transform:translateY(0)}}
.gridlayer{position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:48px 48px;animation:gridIn 1.5s .3s cubic-bezier(.3,.85,.3,1) both}
@keyframes gridIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#curch{opacity:0;transition:opacity .3s ease}
#curch[data-on="1"]{opacity:1}
header{transition:padding .25s ease,border-color .25s ease}
header[data-scrolled="1"]{padding-top:14px !important;padding-bottom:14px !important;border-bottom-color:var(--line) !important}
.marg{position:absolute;left:14px;top:92px;writing-mode:vertical-rl;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.34em;color:var(--faint);pointer-events:none}
@media (max-width:1330px){.marg{display:none}}
.pulse{position:relative}
.pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);animation:pulseRing 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toc a{display:flex;gap:12px;padding:5px 0;font:400 15px/1.35 'EB Garamond',serif;color:var(--muted);border-bottom:1px solid transparent}
.toc a:hover{color:var(--accent);opacity:1}
.toc a[data-active="1"]{color:var(--fg)}
.mapcell{display:block;border:1px solid var(--line);background:var(--bg);padding:14px 16px;transition:background .18s ease,border-color .18s ease}
.mapcell:hover{background:var(--surface);border-color:var(--accent);opacity:1}
#totop{position:fixed;right:24px;bottom:24px;z-index:45;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--bg-blur);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--fg);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;cursor:pointer;font:400 16px 'IBM Plex Mono',monospace}
#totop[data-on="1"]{opacity:1;pointer-events:auto;transform:translateY(0)}
#burger{display:none;background:none;border:1px solid var(--line);color:var(--fg);cursor:pointer;padding:11px 16px;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.18em;min-height:44px}
#mnav{position:fixed;inset:0;z-index:70;background:var(--bg);display:none;flex-direction:column;padding:22px}
#mnav[data-open="1"]{display:flex}
#mnav a{font:400 34px/1.5 'EB Garamond',serif}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
#mobilebar{display:none}
@media (max-width:1200px){
  [data-col="side"]{grid-template-columns:1fr !important;gap:36px !important}
  [data-chapter-body]{grid-template-columns:1fr !important;gap:28px !important}
  [data-sticky]{position:static !important}
  [data-timeline]{display:none !important}
  [data-timeline-list]{display:grid !important}
}
@media (max-width:1100px){header nav{display:none !important}#burger{display:flex}}
@media (max-width:900px){
  #mobilebar{display:flex}
  body{padding-bottom:72px}
  #totop{bottom:88px;right:16px}
  [data-col="side"],[data-col="2"],[data-col="3"],[data-map]{grid-template-columns:1fr !important;gap:32px !important}
  [data-sticky]{position:static !important}
  [data-pad]{padding-left:20px !important;padding-right:20px !important}
  [data-pad-lg]{padding:56px 20px !important}
  [data-hero-h1]{font-size:52px !important}
  [data-hero-pad]{padding:0 4px !important}
  [data-h2]{font-size:38px !important}
  [data-photo]{height:240px !important}
  [data-wide-photo]{height:300px !important}
  [data-support]{grid-template-columns:auto minmax(0,1fr) !important;grid-template-areas:"cit cit" "vic vic" "foto kdo" !important;column-gap:16px !important;align-items:center !important}
  [data-foto] img{width:76px !important;height:96px !important}
  [data-support]+[data-support]{border-top:1px solid var(--line);padding-top:32px}
  [data-debata]{grid-template-columns:1fr !important;gap:10px !important}
  [data-chapter-body]{grid-template-columns:1fr !important;gap:28px !important}
  [data-pull]{font-size:30px !important}
  [data-procbody]{columns:1 !important;column-rule:none !important}
}
@media (max-width:1200px){[data-procbody]{columns:1 !important;column-rule:none !important}}
@media (max-width:1100px){#proc{padding-left:56px !important;padding-right:56px !important}}
[data-col="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-col="3"]>*,[data-support]>*,[data-col="side"]>*,[data-col="2"]>*,[data-chapter-body]>*,summary>*{min-width:0}

/* Karta podporovatele. Nad 900 px fotka vlevo přes oba řádky, citace vpravo
   a jméno pod ní. Pod 900 px se citace přesouvá nad dvojici fotka + jméno:
   po překlopení do jednoho sloupce zůstávala fotka trčet sama nahoře, vedle
   ní 200 px prázdna a od svého jména ji dělila celá citace. */
[data-support]{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:"foto cit" "foto vic" "foto kdo";column-gap:28px;row-gap:0;align-items:start;--cit-max:144px}
[data-foto]{grid-area:foto}
[data-foto] img{width:150px;height:190px;object-fit:cover;display:block}
[data-cit]{grid-area:cit}
[data-vice]{grid-area:vic}
[data-kdo]{grid-area:kdo}

/* Doporučení jdou pod sebou, ne vedle sebe. Šířku drží max-width kvůli délce
   řádku: přes celou stránku by citace měla přes 150 znaků na řádek, což se
   nečte. Mřížka má šířku zapsanou inline, proto !important. */
#podpora [data-col="2"]{grid-template-columns:1fr !important;max-width:720px}

/* Vzhled citace a podpisu byl zapsaný inline na každé kartě zvlášť a znak
   po znaku stejný. Přidat kartu tak znamenalo správně zkopírovat tři dlouhé
   řetězce; právě při tom se do markupu 26. 8. dostal přebytečný </div>.
   Teď nese karta jen značky a obsah. */
[data-cit] p{font:400 18px/1.6 'EB Garamond',serif;color:var(--fg2);margin:0 0 14px;text-wrap:pretty}
[data-cit] p:last-child{margin-bottom:20px}
[data-kdo]>div:first-child{font:400 16px 'EB Garamond',serif;color:var(--fg);margin-bottom:4px}
[data-kdo]>div+div{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint)}

/* Dlouhé citace se zkracují na --cit-max, zbytek otevře tlačítko. Značku
   [data-dlouha] sází skript až podle skutečné výšky textu, takže bez skriptu
   se nezkracuje nic a žádný text nezůstane nedostupný. Ze stejného důvodu
   nesmí zeslabení spodní hrany viset na kartě, které se text vejde celý. */
[data-support][data-dlouha]:not([data-cele]) [data-cit]{max-height:var(--cit-max);overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
[data-vice]{justify-self:start;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 0 16px;margin:0;border:0;background:none;cursor:pointer;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--accent)}
[data-vice]:hover{text-decoration:underline}
/* display:flex výše přebíjí [hidden] z prohlížeče, takže by tlačítko svítilo
   i u karet, které se vejdou celé. */
[data-vice][hidden]{display:none}
[data-vice]::before{content:"\25B8";display:inline-block;transition:transform .18s ease}
[data-support][data-cele] [data-vice]::before{transform:rotate(90deg)}
.punch{font:400 30px/1.35 'EB Garamond',serif;color:var(--fg);margin:28px 0;letter-spacing:-.015em;text-wrap:pretty;padding-left:20px;border-left:2px solid var(--accent);display:grid;gap:10px}
[data-colbody]{columns:2;column-gap:56px;column-rule:1px solid var(--line2)}
[data-colbody] p{font-size:19px !important;break-inside:avoid;margin-bottom:20px !important}
.hi{font:400 24px/1.5 'EB Garamond',serif;color:var(--accent);margin:0 0 20px;text-wrap:pretty}
[data-colbody] .hi{font-size:23px !important}
@media (max-width:1200px){[data-colbody]{columns:1 !important;column-rule:none !important}[data-colbody] p{font-size:20px !important}[data-principy]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:900px){[data-principy]{grid-template-columns:1fr !important}[data-zavbig]{font-size:28px !important}#zaver [data-col="2"]>div:last-child{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--line2);padding-top:24px}}
.sub{border-bottom:1px solid var(--line2)}
.sub[open]{background:transparent}
.sub-sum{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 0}
.sub-sum:hover .sub-h{color:var(--accent)}
.sub-h{font:400 22px/1.4 'EB Garamond',serif;color:var(--fg);transition:color .2s ease;text-wrap:pretty}
.sub[open] .sub-h{color:var(--accent)}
.sub-meta{display:flex;align-items:center;gap:12px;white-space:nowrap;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint)}
.sub-plus{color:var(--accent);display:inline-block;font:400 16px 'EB Garamond',serif;transition:transform .25s ease}
.sub[open] .sub-plus{transform:rotate(45deg)}
@media (max-width:900px){.punch{font-size:24px;padding-left:14px}.sub-h{font-size:20px}}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.ch-title{min-width:0;overflow-wrap:anywhere}
.ch-meta{display:flex;align-items:center;gap:12px;white-space:nowrap;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint);padding-top:8px}
@media (max-width:900px){summary{grid-template-columns:34px 1fr !important;padding-left:14px !important;padding-right:14px !important}.ch-meta{padding-top:0}.toc a{padding:12px 0}button{min-height:44px}}
[data-timeline-list]{display:none}
#skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--accent-fill);color:#fff;padding:12px 20px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.16em}
#skip:focus{left:12px;top:12px}
::highlight(hit){background:rgba(192,86,42,.22);color:inherit}
@media print{
  header,#mobilebar,#totop,#burger,#mnav,#skip,.gridlayer,[data-noprint]{display:none !important}
  body{padding:0;background:#fff;color:#000}
  [data-pad-lg],[data-pad]{padding:22px 0 !important}
  details>div{display:block !important}
  a{color:#000}
  h2,h1{break-after:avoid}
  .ch-card{break-inside:avoid;border-bottom:1px solid #ccc}
  img{max-height:220px;object-fit:cover}
  [data-cit]{max-height:none !important;-webkit-mask-image:none !important;mask-image:none !important}
  [data-vice]{display:none !important}
  @page{margin:16mm}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ------------------------------------------------------------------
   Velmi úzké displeje (staré iPhony SE a spol.).
   Návrh nejnižší breakpoint řeší od 900 px; tady se jen srovnává,
   aby se hlavička podkapitoly nevešla vedle sebe a nevystrkovala
   stránku do vodorovného posouvání.
   ------------------------------------------------------------------ */
@media (max-width: 430px) {
  .sub-sum { gap: 10px !important; }
  .sub-meta { gap: 8px !important; font-size: 9px !important; letter-spacing: .1em !important; }
  .sub-h { font-size: 18px !important; }
  .ch-meta { gap: 8px !important; font-size: 9px !important; }
}

/* Zástupné plochy po fotkách, které zatím nejsou (tým, podporovatelé,
   sken podpisu). Nesou popis toho, co sem patří, ať je při doplňování
   jasné, co se hledá. Pevná šířka z návrhu se na úzkém displeji krotí. */
.slot {
  max-width: 100%;
  background: var(--surface2);
  border: 1px dashed var(--line);
  position: relative;
}
.slot[data-popis]::after {
  content: attr(data-popis);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font: 500 10px 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--faint);
}

/* Odstavce v „Moje cesta" mají vlevo úzký sloupec na letopočet (78 px).
   Na velmi úzkých displejích na něj i na text zbývá málo místa, takže
   se letopočet posune nad text. */
@media (max-width: 374px) {
  #cesta [style*="78px 1fr"] { grid-template-columns: 1fr !important; gap: 4px !important; }
}

/* ==================================================================
   Úpravy nad rámec předaného návrhu
   ================================================================== */

/* Mono štítky a akcentní oranžová měly na světlém podkladu kontrast 3,4:1
   a 4,2:1, potřeba je 4,5:1 pro malé písmo. Oba odstíny jsou ztmavené na
   nejbližší vyhovující hodnotu (--faint 4,8:1, --accent 4,7:1) rovnou
   v :root nahoře. Dřív to stálo tady dole, jenže :root a [data-theme="dark"]
   mají stejnou specificitu, takže pozdější deklarace přebila i tmavý režim
   a srazila ho z 5,1:1 na 3,4:1. Barvy tmavého režimu se proto nesmí
   opravovat přepisem :root pod jeho blokem. */

/* Sekce Debaty, Tým a Podpora čekají na jména, termíny a citace. Do té doby
   jsou schované i s odkazy, které na ně vedly. Návrat: smazat atributy
   hidden a data-skryto="ceka-na-obsah" v index.html, nic jiného. Pravidlo
   je s !important, protože prvky mají vlastní display v atributu style. */
[hidden] { display: none !important; }



/* Popisky pod hero fotkou stojí ve flexu se space-between bez mezery.
   Na širokém displeji je mezi nimi půl obrazovky, ale pod 640 px se
   dotkly a četly se jako jedno slovo („…Ph.D.děkan Fakulty…“).
   Na úzkém displeji jdou pod sebe, na širokém zůstávají na jednom řádku. */
.hero-popisky { gap: 4px 24px; }
@media (max-width: 700px) {
  .hero-popisky { flex-direction: column; align-items: flex-start; }
}

/* Akcentní oranžová má dvě role: barvu textu a plochu pod bílým textem.
   V tmavém režimu se rozsvítí na #e0865a, což je pro text na tmavém pozadí
   správně, ale bílý text NA té ploše má jen 2,7:1. Plochy proto berou
   --accent-fill, které zůstává tmavé v obou režimech (bílá na něm 5,1:1). */

/* Čísla kapitol jsou hlavní orientační bod v nejdelší sekci webu,
   proto o něco výraznější. */
summary > span:first-child { font-size: 14px !important; letter-spacing: .14em !important; }

/* Fotky v tmavém režimu byly tlumené tak, že u tmavších snímků mizel
   obličej. Ztlumení se zmírňuje. */
[data-theme="dark"] img, [data-theme="dark"] picture { filter: brightness(.94) saturate(.97) !important; }
/* Podpis je černý inkoust na průhledném pozadí, v tmavém režimu by splynul
   s podkladem. Převrací se na světlý, a protože fotky výš tlumí jas
   s !important, musí ho mít taky a stát až za ním. */
[data-theme="dark"] img.podpis { filter: invert(1) !important; }

/* Zeď jmen podporovatelů se na širokém monitoru roztahovala do mnoha
   sloupců a ztrácela rytmus. */
@media (min-width: 1200px) {
  [style*="minmax(230px"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Mobilní lišta má nově pět položek, takže potřebuje úspornější sazbu. */
@media (max-width: 430px) {
  #mobilebar a { font-size: 9px !important; letter-spacing: .08em !important; padding-left: 2px !important; padding-right: 2px !important; }
}

/* Hlavička zabírala na telefonu skoro čtvrtinu první obrazovky:
   jméno se lámalo na dva řádky a pod ním byl ještě podtitul. */
@media (max-width: 560px) {
  header { padding-top: 14px !important; padding-bottom: 14px !important; }
  header > div:first-child > span:first-child,
  header a[href="#top"] { white-space: nowrap; }
  header [style*="font: 400 14px"] { display: none !important; }
}

/* Hero na telefonu potřebuje mezi odpočtem a fotkou stejný vzduch
   jako na desktopu. */
@media (max-width: 900px) {
  [data-hero-pad] { padding-bottom: 8px !important; }
  [data-photo] { margin-top: 12px !important; }
}

/* Časová osa se pod 1200 px mění na prostý seznam, který proti „hadovi"
   vypadal chudě. Dostane aspoň svislou linku a tečky. */
@media (max-width: 1200px) {
  [data-timeline-list] { position: relative; padding-left: 26px !important; }
  [data-timeline-list]::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 1px; background: var(--line);
  }
  [data-timeline-list] > * { position: relative; }
  [data-timeline-list] > *::before {
    content: ''; position: absolute; left: -26px; top: 9px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
  }
}

/* Vyhledávání je v levém sloupci programu a na telefonu se snadno mine.
   Dostane vlastní rámeček, ať je vidět jako ovládací prvek. */
#hledat {
  border: 1px solid var(--line) !important;
  /* Levé odsazení musí zůstat větší kvůli ikoně lupy, která leží v poli.
     Rámeček ji navíc posunul dovnitř, takže se odsazení dopočítalo znovu. */
  padding: 12px 14px 12px 36px !important;
  background: var(--surface) !important;
}
#hledat + span { left: 14px !important; }
#hledat:focus-visible { border-color: var(--accent) !important; }
#hledat::placeholder { color: var(--faint); opacity: 1; }

/* Zástupné plochy po chybějících fotkách. Dokud fotky nedorazí, je lepší
   přiznaný rámeček s popisem než prázdné místo, ale nesmí vypadat jako
   rozbitá stránka. */
.slot {
  max-width: 100%;
  background: var(--surface2);
  border: 1px dashed var(--line);
  position: relative;
}
.slot[data-popis]::after {
  content: attr(data-popis);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center;
  font: 500 9px 'IBM Plex Mono', monospace;
  letter-spacing: .06em; color: var(--faint);
}

/* Na nejužších displejích zbývá po zaokrouhlení šířek jediný pixel, který
   by vyvolal vodorovný posuvník. `clip` ho odřízne, aniž by ze stránky
   udělal posouvatelný kontejner (na rozdíl od `hidden`). */
@media (max-width: 340px) {
  html { overflow-x: clip; }
}

/* Sekce mimo obrazovku se kdysi počítaly až po dorolování
   (`content-visibility: auto`). Odhad výšky 1200 px ale platil pro desktop:
   na mobilu se obsah skládá do jednoho sloupce a sekce jsou 2-4x vyšší, takže
   se stránka při scrollování ve čtyřech skocích natáhla o 7 956 px a kotvy
   míjely cíl až o 1 621 px. Odstraněno; měřeno 26. 8. 2026 na zpomaleném CPU,
   stálo to 8 ms do prvního vykreslení. */

/* Kdo má v systému zapnutý vyšší kontrast, dostane výraznější odstíny.
   Tichá paleta návrhu je i po ztmavení na hraně čitelnosti. */
@media (prefers-contrast: more) {
  :root { --faint: #4a4640; --muted: #3a3730; --line: #b8b2a4; --line2: #cec8b8; }
  [data-theme="dark"] { --faint: #cfc9bd; --muted: #ded9ce; --line: #6b6558; }
  a, button { text-underline-offset: 2px; }
}


/* ------------------------------------------------------------------
   Opakující se deklarace vytažené z atributů style. Hodnoty jsou
   přenesené beze změny, jde čistě o to, aby se stejný předpis
   neopakoval v dokumentu stokrát. Jednorázové styly zůstaly inline.
   ------------------------------------------------------------------ */
.q1{font: 400 20px / 1.75 "EB Garamond", serif; color: var(--fg2); margin: 0px 0px 18px; text-wrap: pretty;}
.q2{background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; text-align: right; max-width: 280px;}
.q3{position: absolute; top: -5px; left: 0px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--bg); display: block;}
.q4{background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.16em; color: var(--faint);}
.q5{display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line2); padding-bottom: 10px;}
.q6{margin-top: 30px; background: none; border: 1px solid var(--line); padding: 9px 16px; cursor: pointer; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.14em; color: var(--muted);}
.q7{font: 500 13px "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 8px;}
.q8{font: 500 13px "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.12em; padding-top: 40px;}
.q9{display: grid; grid-template-columns: 14px 1fr; gap: 16px; padding: 22px 0px; border-top: 1px solid var(--line);}
.q10{font: 400 18px / 1.35 "EB Garamond", serif; color: var(--fg2); margin-top: 14px; text-wrap: pretty;}
.q11{font: italic 400 14px / 1.5 "EB Garamond", serif; color: var(--faint); margin-top: 8px;}
.q12{font: italic 400 15px / 1.5 "EB Garamond", serif; color: var(--faint); margin-top: 6px;}
.q13{display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line2); padding-top: 18px;}
.q14{display: block; font: 400 17px / 1.3 "EB Garamond", serif; color: var(--fg2);}
.q15{width: 11px; height: 11px; border-radius: 50%; background: var(--accent); margin-top: 8px;}
.q16{font: 400 21px / 1.4 "EB Garamond", serif; color: var(--fg2); text-wrap: pretty;}
.q17{font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.14em; color: var(--fg2); border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap;}
.q18{display: grid; grid-template-columns: 1fr auto auto auto; align-items: baseline; gap: 20px; padding: 20px 26px; border-bottom: 1px solid var(--line2); opacity: 1;}
.q19{font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.14em; color: var(--faint);}
.q20{font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.1em; color: var(--accent); padding-top: 9px; text-align: right;}
.q21{font: 400 32px / 1.25 "EB Garamond", serif; letter-spacing: -0.012em; transition: color 0.2s; text-wrap: pretty;}
.q22{font: 500 12px "IBM Plex Mono", monospace; letter-spacing: 0.12em; color: var(--accent); padding-top: 12px;}
.q23{font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; color: var(--accent); padding-top: 3px;}
.q24{font: italic 400 18px / 1.55 "EB Garamond", serif; color: var(--faint); display: block; max-width: 640px;}
.q25{display: block; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 4px;}
.q26{display: block; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.16em; color: var(--faint); margin-bottom: 4px;}
.q27{display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 30px 24px 30px 20px;}
.q28{font: 400 19px / 1.8 "EB Garamond", serif; color: var(--fg2); margin: 0px; text-wrap: pretty;}
.q29{font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 10px;}
.q30{color: var(--invert-fg); font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; padding: 12px 10px; min-height: 44px; display: flex; align-items: center;}
.q31{font: 400 17px / 1.6 "EB Garamond", serif; color: var(--muted); max-width: 34ch; text-wrap: pretty;}
.q32{font: 400 19px "EB Garamond", serif; color: var(--fg2);}
.q33{font: 500 10px "IBM Plex Mono", monospace; color: var(--faint); padding-top: 3px;}
.q34{font: 500 13px "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.06em;}
.q35{padding: 0px 24px 36px 18px; border-left: 1px solid var(--line); margin-left: 20px;}
.q36{padding: 0px 24px 26px 18px; border-left: 1px solid var(--line); margin-left: 20px;}
.q37{display: grid; grid-template-columns: 78px 1fr; gap: 20px; margin-bottom: 22px;}
.q38{font: 400 21px / 1.7 "EB Garamond", serif; color: var(--fg); margin: 0px 0px 20px; text-wrap: pretty; break-inside: avoid;}
.q39{font: 500 60px / 1 "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: -0.04em; margin-bottom: 24px;}
.q40{font: 400 18px / 1.7 "EB Garamond", serif; color: var(--muted); margin: 0px; max-width: 44ch; text-wrap: pretty;}
.q41{width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block;}
.q42{color: var(--accent); display: inline-block; margin-left: 12px;}
.q43{padding: 4px 0px 26px;}
.q44{position: relative; padding-right: 26px;}
.q45{font: 400 26px / 1.3 "EB Garamond", serif; margin-bottom: 8px;}
.q46{font: 500 12px "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.1em;}
.q47{font: 400 30px / 1.2 "EB Garamond", serif; letter-spacing: -0.02em; text-wrap: pretty;}
.q48{width: 100%; height: 260px; display: block; margin-bottom: 18px;}
.q49{border-top: 1px solid var(--line2); padding-top: 26px;}
.q50{margin-top: 34px; border-top: 1px solid var(--line2);}
.q51{position: relative; border-top: 1px solid var(--line); padding: 88px 56px;}
.q52{display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 24px 0px 0px;}
.q53{display: flex; align-items: center; gap: 20px;}
.q54{font: 400 28px / 1.25 "EB Garamond", serif; margin-bottom: 12px;}
.q55{font: 400 21px "EB Garamond", serif;}
.q56{width: 100%; height: 340px; object-fit: cover; display: block;}
.q57{display: flex; align-items: center; gap: 8px;}
.q58{background: var(--bg); padding: 36px 28px 32px;}
.q59{display: flex; gap: 8px;}
.q60{flex: 1 1 0%;}

/* Obsah zavřené kapitoly je pro sledovač viditelnosti skrytý, takže se
   odhalovací animace nikdy nespustí a prvky uvnitř by zůstaly průhledné
   (týká se mřížky principů v poslední kapitole). Uvnitř rozbalené kapitoly
   odhalování stejně nedává smysl: obsah se objeví už samotným rozbalením. */
details[open] [data-rvl] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}