/* --------------------------------------------------------------
   EshAlora — Fiction that fights back
   Světlý režim je základ; tmavý přebarvuje jen tokeny.
   -------------------------------------------------------------- */

:root {
  /* světlý režim — nese fialovou #6E0C8B, neutrály jsou k ní přiladěné */
  --ground:     #F5F3F7;
  --surface:    #FFFFFF;
  --ink:        #1A1520;
  --muted:      #5E5566;
  --faint:      #746C7D;
  --rule:       #E4DFE9;
  --rule-soft:  #EFEBF2;
  --accent:     #6E0C8B;
  --accent-soft:#C2FCF3;
  --accent-on-soft: #1F0130;

  --f-display: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  /* Bezpatkove i v tele textu. Autorka patkove pismo nechce nikde,
     takze --f-body a --f-display nesou tentyz zapis. Zustavaji
     oddelene, aby sla nadpisova rodina zmenit bez zasahu do tela. */
  --f-body: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --measure: 66ch;
  --page: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* tmavý režim — nese tyrkysovou #44FCE5 na fialovočerném podkladu */
    --ground:     #1F0130;
    --surface:    #2B0A3F;
    --ink:        #EDE8F2;
    --muted:      #A79BB4;
    --faint:      #8B7D9A;
    --rule:       #3A1A4D;
    --rule-soft:  #2C0E40;
    --accent:     #44FCE5;
    --accent-soft:#0E3A38;
    --accent-on-soft: #C2FCF3;
  }
}

:root[data-theme="dark"] {
  --ground:     #1F0130;
  --surface:    #2B0A3F;
  --ink:        #EDE8F2;
  --muted:      #A79BB4;
  --faint:      #8B7D9A;
  --rule:       #3A1A4D;
  --rule-soft:  #2C0E40;
  --accent:     #44FCE5;
  --accent-soft:#0E3A38;
  --accent-on-soft: #C2FCF3;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 22px 96px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: var(--page); margin: 0 auto; }

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

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

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 34px 0 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}

.masthead .name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}
.masthead .name:hover { color: var(--accent); }
/* Podtrzeni pod hlavickou v barve znacky. Jemne, ale je videt hned
   na prvni obrazovce, coz cerne bila verze nemela. */
.masthead { border-bottom-color: var(--accent); border-bottom-width: 2px; }

/* Značka se barví z palety, takže se v tmavém režimu
   sama přepne z fialové na tyrkysovou. */
.mark {
  /* Výška značky = výška velkého písmene (cap height).
     Segoe UI má cap height zhruba 0,70 em. */
  width: 0.70em;
  height: 0.70em;
  flex: none;
  stroke: var(--accent);
  transition: stroke 120ms ease;
  /* Zarovnání na střed velkých písmen, ne na střed řádku.
     Změřeno v prohlížeči vloženou značkou na účaří:
     -0,131 em bylo o 3,32 px vysoko, správně je +0,044 em. */
  transform: translateY(0.044em);
}

.masthead nav {
  display: flex;
  gap: 22px;
  /* Stejne pismo jako jmeno webu vedle. Strojopis tady nic nesdeloval
     a v menu pusobil technicky. Jinde v sablone zustava. */
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Plny kontrast misto potlaceneho. Navigace neni poznamka pod carou,
   je to jedina cesta po webu. */
.masthead nav a { color: var(--ink); text-decoration: none;
  /* Od ctvrte zalozky se na uzkych displejich lamalo "O mne"
     doprostred slova. Polozka se smi zalomit jen mezi polozkami. */
  white-space: nowrap; }
@media (max-width: 560px) {
  .masthead nav { gap: 14px; font-size: 15px; }
}

.themetoggle {
  font: inherit;
  font-size: 20px;
  line-height: 1;
  background: none;
  border: 0;
  padding: 0;
  /* Pevna sirka a znak na stred. Slunce a mesic nejsou stejne siroke,
     takze bez toho se pri kazdem prepnuti posunula cela navigace. */
  width: 26px;
  text-align: center;
  margin: 0 0 0 4px;
  color: var(--ink);
  opacity: .85;
  cursor: pointer;
}
.themetoggle:hover { color: var(--accent); opacity: 1; }
.themetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--accent); }

/* ---------------- titulní blok ---------------- */

.hero { margin-bottom: 60px; }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0 0 26px;
  text-wrap: balance;
  max-width: 16ch;
}

.hero p {
  margin: 0 0 1.1em;
  max-width: var(--measure);
  font-size: 18.5px;
}
.hero p:last-child { margin-bottom: 0; }

.hero .lede { font-size: 21px; line-height: 1.5; }
.hero .lede strong { font-weight: 700; }

.hero .stat {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin-top: 28px;
}

/* ---------------- rejstřík ---------------- */

/* Cislo vpravo v hlavicce rejstriku nese barvu znacky. */
.register-head span:last-child { color: var(--accent); font-weight: 700; }

.register-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.entry {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}

.entry .when {
  font-family: var(--f-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  /* Nazev sekce nese barvu znacky. Opakuje se dolu po strance,
     takze cela stranka dostane rytmus, aniz by neco kricelo. */
  color: var(--accent);
  opacity: .78;
  white-space: nowrap;
  padding-top: 5px;
}

.entry h2 {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 650;
  letter-spacing: -0.019em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--accent); text-decoration: underline; }

.entry .lead {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 58ch;
}

/* ---------------- článek ---------------- */

.article-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}

.article-head h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(27px, 4.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}

.article-meta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.article-meta a { color: var(--faint); }

.prose { max-width: var(--measure); }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.15em; }

/* Zarovnání do bloku. Slova se nikdy nedělí, tak to autorka chce.
   Kde by tím vznikly moc velké mezery, řeší se to přeformulováním věty,
   ne dělením.

   Blok se zapíná jen na dost širokém sloupci. Změřeno: při šířce
   odstavce kolem 720 px má nadměrné mezery 7 % řádků, při 340 px
   polovina, a nejhorší mezera je skoro sedminásobná. Na úzkém displeji
   je proto zarovnání vlevo jediná rozumná volba. */
.prose p,
.prose li,
.prose blockquote p {
  hyphens: none;
  -webkit-hyphens: none;
}

@media (min-width: 760px) {
  .prose p,
  .prose li,
  .prose blockquote p {
    text-align: justify;
    text-justify: inter-word;
  }
}

.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.22;
  margin-top: 2em;
  text-wrap: balance;
}

.prose h3 {
  font-family: var(--f-display);
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 650;
  letter-spacing: -0.016em;
  margin-top: 1.7em;
  text-wrap: balance;
}

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.42em; }
.prose li::marker { color: var(--faint); }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

.prose code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: var(--rule-soft);
  padding: 1.5px 5px;
  border-radius: 2px;
}

.prose em { color: var(--muted); }
.prose strong { font-weight: 700; color: var(--ink); }

.prose img { max-width: 100%; height: auto; border-radius: 3px; }

/* ---------------- tabulky ----------------
   Úzký sloupec textu je pro tabulku často málo, takže se smí
   odrolovat vodorovně ve vlastním rámu. */

.table-wrap {
  /* Vodorovne rolovani se na webu nepouziva. Uzka obrazovka dostane misto
     nej karty, viz nize. Tohle zustava jen jako pojistka pro pripad, ze by
     se do tabulky dostalo neco necekane sirokeho, treba dlouhy odkaz. */
  overflow-x: auto;
  margin-top: 1.9em;
  margin-bottom: 1.9em;
  -webkit-overflow-scrolling: touch;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.45;
}

.prose thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--rule);
}
.prose thead th:last-child { padding-right: 0; }

.prose tbody td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--muted);
}
.prose tbody td:last-child { padding-right: 0; }
.prose tbody tr:last-child td { border-bottom: 0; }

/* První sloupec je skoro vždycky klíč řádku, ne údaj. */
.prose tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
}
.prose tbody td:first-child strong { font-weight: 700; }

.prose table code { font-size: 0.82em; white-space: nowrap; }

/* Klic radku se nemá lámat na dva řádky. */
.prose tbody td:first-child,
.prose thead th:first-child { white-space: nowrap; }

/* Devět a víc sloupců: užší mezery a menší písmo, ať se to vejde bez rolování. */
.prose table.siroka { font-size: 13.5px; }
.prose table.siroka thead th { padding-right: 5px; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
.prose table.siroka tbody td { padding: 9px 5px 9px 0; }
/* V širokých tabulkách bývá klíčem druhý sloupec, první je pořadí. */
.prose table.siroka tbody td:nth-child(2),
.prose table.siroka thead th:nth-child(2),
.prose table.siroka tbody td:nth-child(3),
.prose table.siroka tbody td:nth-child(4) { white-space: nowrap; }
.prose table.siroka thead th:last-child,
.prose table.siroka tbody td:last-child { padding-right: 0; }

/* ---------------- delší citace ----------------
   Svislá čára a odsazení fungují na jednu dvě věty. U delšího bloku
   z toho je úzký odstrčený sloupec, tak dostane panel jako zadání. */

.prose blockquote.dlouha {
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 1.6em 0;
}

.prose blockquote.dlouha p { margin: 0 0 0.7em; }
.prose blockquote.dlouha p:last-child { margin-bottom: 0; }

/* Uvnitř rámečku zadání se panel nekreslí, byl by rámeček v rámečku. */
.zadani blockquote.dlouha {
  border: 0; border-radius: 0; padding: 0; background: transparent;
  margin: 0; font-size: 14.5px; line-height: 1.5;
}

/* ---------------- rámovaná tabulka ----------------
   Široká tabulka dostane rámeček v barvě webu, aby se v dlouhé stránce
   dala najít a aby bylo vidět, kde končí. Uvnitř se nic nebarví. */

.table-wrap.ramovana {
  border: 1px solid var(--zadani-ram);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 14px 18px 4px;
  background: var(--surface);
}

.table-wrap.ramovana table.siroka thead th { padding-top: 0; }
.table-wrap.ramovana table.siroka tbody tr:last-child td { border-bottom: 0; }

/* ---------------- tabulka na úzké obrazovce ----------------
   Žádná tabulka nesmí jet do strany. Pod 720 bodů se proto řádek rozpadne
   na kartu, kde má každá hodnota svůj popisek. Neztratí se nic. */

@media (max-width: 720px) {
  .prose .table-wrap { overflow-x: visible; }

  .prose .table-wrap table,
  .prose .table-wrap tbody,
  .prose .table-wrap tr,
  .prose .table-wrap td { display: block; width: 100%; }

  .prose .table-wrap thead { display: none; }

  .prose .table-wrap tbody tr {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }

  .prose .table-wrap tbody td {
    border: 0;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    text-align: left !important;
  }

  .prose .table-wrap tbody td::before {
    content: attr(data-sl);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    flex: 0 0 auto;
  }

  /* Prvni bunka je klic radku, ta popisek nepotrebuje a nese cely radek. */
  .prose .table-wrap tbody td:first-child {
    font-weight: 700;
    font-size: 15px;
    padding-bottom: 7px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--rule-soft);
  }

  .prose .table-wrap tbody td:empty { display: none; }

  .prose table.siroka { font-size: 14px; }
  .prose table.siroka tbody td:nth-child(2),
  .prose table.siroka tbody td:nth-child(3),
  .prose table.siroka tbody td:nth-child(4) { white-space: normal; }

  .table-wrap.ramovana {
    border: 0;
    padding: 0;
    background: transparent;
  }
}

/* ---------------- doslovné zadání ----------------
   Rámeček kolem toho, co dostal model. Řádkování je sevřenější než
   v běžném textu, protože jde o dokument, ne o čtení na pokračování. */

:root {
  --zadani-plocha: #F2E9F7;
  --zadani-ram:    #DCC6E8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zadani-plocha: #33124A;
    --zadani-ram:    #4C2568;
  }
}
:root[data-theme="dark"] {
  --zadani-plocha: #33124A;
  --zadani-ram:    #4C2568;
}

.zadani {
  background: var(--zadani-plocha);
  border: 1px solid var(--zadani-ram);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 18px 22px;
  margin: 1.8em 0;
}

.zadani blockquote {
  margin: 0;
  padding: 0;
  border-left: 0;
  color: var(--ink);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.5;
}

.zadani blockquote p { margin: 0 0 0.62em; text-align: left; }
.zadani blockquote p:last-child { margin-bottom: 0; }
.zadani blockquote ul,
.zadani blockquote ol { margin: 0 0 0.62em; padding-left: 1.3em; }
.zadani blockquote li { margin: 0; line-height: 1.5; }

/* ---------------- mřížka obrázků ----------------
   Galerie chce co nejvíc obrázků vedle sebe, aby se daly porovnat
   očima. Vystupuje proto z šířky textu do celé plochy okna a počet
   sloupců si řídí sama podle rozlišení. */

.mrizka {
  width: min(1560px, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 26px 20px;
  margin-top: 2.2em;
  margin-bottom: 2.8em;
}

.mrizka figure.obrazek { margin: 0; max-width: none; }

/* Dva sloupce v sirce textu. Pro dvojice a ctverice uvnitr vykladu,
   kde je porovnani smyslem odstavce, ne samostatna galerie. */
.mrizka.dvojice {
  width: auto;
  margin-left: 0;
  transform: none;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) {
  .mrizka.dvojice { grid-template-columns: 1fr; }
}

.mrizka figure.obrazek img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
}

.mrizka figure figcaption {
  margin-top: 8px;
  max-width: none;
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .mrizka {
    width: 100%;
    margin-left: 0;
    transform: none;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px 14px;
  }
}

/* ---------------- široké prvky ----------------
   Text zůstává úzký kvůli čitelnosti, ale obrázky, grafy
   a tabulky smí přetéct do okrajů. */

/* Ponechano pro pozdejsi vyuziti okraju. Zatim se nepouziva -
   obrazky drzi stejnou sirku jako text. */
.wide {
  max-width: var(--measure);
  margin-top: 2.4em;
  margin-bottom: 2.4em;
}

figure {
  margin-left: 0;
  margin-right: 0;
  max-width: var(--measure);
}

figure figcaption {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 12px;
  max-width: var(--measure);
}

.chart {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 20px 14px;
}
.chart svg { display: block; width: 100%; height: auto; }
.chart .bar { fill: var(--accent); }
.chart .bar-live { fill: var(--accent); opacity: 0.45; }
.chart .lbl { font-family: var(--f-mono); font-size: 11px; fill: var(--faint); }
.chart .val { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .ln-opravy { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .ln-delka  { fill: none; stroke: var(--muted); stroke-width: 1.5;
                    stroke-dasharray: 5 4; }

/* ---------------- patičky ---------------- */

.article-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 12.5px;
}
.article-foot a { text-decoration: none; }
.article-foot a:hover { text-decoration: underline; }

.site-foot {
  margin-top: 76px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 14.5px;
}

/* Tri radky pod sebou. V kazdem je neco vlevo a neco vpravo, na uzke
   obrazovce se to zalomi pod sebe. */
.site-foot .radek {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 11px 0;
}
.site-foot .radek + .radek { border-top: 1px solid var(--rule-soft); }
.site-foot .pozn { color: var(--faint); opacity: .85; }
.site-foot .site-odkazy { display: flex; gap: 20px; }

/* Odkazy v paticce jsou podtrzene, aby bylo poznat, ze na ne jde
   kliknout. Bez podtrzeni si jich nikdo nevsimne. */
.site-foot a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.site-foot a:hover,
.site-foot a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.langswitch {
  display: inline-block;
  margin-top: 44px;
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 3px;
  text-decoration: none;
}
.langswitch:hover { text-decoration: underline; }

@media (max-width: 620px) {
  body { font-size: 17px; padding: 0 18px 72px; }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry .when { padding-top: 0; }
  .entry .lead { grid-column: 1; }
  .hero h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------- test na titulní straně ----------------
   Není to článek, je to nástroj. Proto rámeček, ne prostý text. */

.test {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  padding: 26px 28px 22px;
  margin-bottom: 52px;
  max-width: var(--page);
}

.test h2 {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 10px;
  text-wrap: balance;
}

.test h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 24px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-soft);
}

.test-uvod {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 62ch;
}

.test ol, .test ul { margin: 0; padding: 0; list-style: none; }

.test-postup { counter-reset: krok; }
.test-postup li {
  counter-increment: krok;
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}
.test-postup li::before {
  content: counter(krok);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.test-postup strong { color: var(--ink); font-weight: 650; }

/* Tri pasti visi pod druhym krokem. Jsou to podpolozky, ne kroky,
   proto pismena a ne cisla v koleckach. */
.test-postup .pasti-uvod {
  margin: 12px 0 8px;
  color: var(--faint);
  font-size: 15px;
}

.test-pasti {
  counter-reset: past;
  border-left: 1px solid var(--rule);
  padding-left: 16px !important;
  margin-bottom: 4px !important;
}
.test-pasti li {
  counter-increment: past;
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.test-pasti li::before {
  content: counter(past, lower-alpha) ")";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--faint);
  border: 0;
  width: auto;
  height: auto;
  display: inline;
}
.test-pasti li span {
  font-family: var(--f-display);
  font-weight: 650;
  color: var(--ink);
}

.test-kriteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 30px;
}
.test-kriteria li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule-soft);
}
/* Nazev kriteria bezi v jednom radku s otazkou. Oddeluje je mezera,
   ne pomlcka: pomlcky se v textech nepouzivaji. */
.test-kriteria summary strong {
  font-family: var(--f-display);
  font-weight: 650;
  color: var(--ink);
}

/* Rubrika s kotvami. Kriterium je slozene: summary je to, co bylo drive
   v seznamu, a kotvy 1/3/5 se rozbaluji, aby stranka zustala prehledna. */
.test-kriteria {
  counter-reset: none;
  list-style: decimal;
  padding-left: 22px;
}
.test-kriteria li {
  padding-bottom: 10px;
}
.test-kriteria summary {
  cursor: pointer;
  list-style: none;
}
.test-kriteria summary::-webkit-details-marker { display: none; }
.test-kriteria summary::after {
  content: "+";
  margin-left: 6px;
  color: var(--muted);
  font-weight: 650;
}
.test-kriteria details[open] summary::after { content: "\2212"; }

.test-skupina {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  margin: 20px 0 2px;
}
.test-skupina-popis {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 10px;
}

.kotvy {
  margin: 8px 0 2px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 10px;
  font-size: 14px;
  line-height: 1.5;
}
.kotvy dt {
  font-family: var(--f-display);
  font-weight: 650;
  color: var(--ink);
  text-align: right;
}
.kotvy dd {
  margin: 0;
  color: var(--muted);
}

.test-citace {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--rule-soft);
  padding-left: 12px;
}

@media (max-width: 700px) {
  .test { padding: 22px 18px 18px; }
  .test-kriteria { grid-template-columns: 1fr; }
}

/* ---------------- rozbor jedné odpovědi ----------------
   Každý kus výstupu v rámečku, popisek vedle. Modrý rail vlevo drží
   pohromadě to, co přišlo naráz jako jedna zpráva. */

/* Vlastni fialove tokeny jen pro tenhle obrazec. Globalni paleta
   nese v tmavem rezimu tyrkysovou, sem se ale hodi fialova v obou. */
.rozbor {
  margin: 2.4em 0;
  max-width: var(--measure);
  --tint: #EBD9F5;
  --tint-ink: #2A0736;
  --tint-rail: #6E0C8B;
  --tint-cara: #DCC4EA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rozbor {
    --tint: #48175F;
    --tint-ink: #EDE8F2;
    --tint-rail: #C9A2E4;
    --tint-cara: #5C2678;
  }
}

:root[data-theme="dark"] .rozbor {
  --tint: #48175F;
  --tint-ink: #EDE8F2;
  --tint-rail: #C9A2E4;
  --tint-cara: #5C2678;
}

.rozbor-hlava {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.rozbor-vystup {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--tint-rail);
  border-radius: 4px;
  background: var(--surface);
  padding: 4px 14px;
  overflow: hidden;
}

.rozbor-radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 4px 18px;
  align-items: start;
  padding: 12px 0;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
}
.rozbor-vystup .rozbor-radek:last-child { border-bottom: 0; }

.rozbor-radek code {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: none;
  padding: 0;
  /* system<reasoning_effort> je jeden dlouhy token bez mezer */
  overflow-wrap: anywhere;
  word-break: normal;
}

.rozbor-popis {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
}

/* Co model psát měl: tiché, bez zvýraznění. */
.je-scena code { color: var(--muted); }

/* Co si vyrobil sám: zvýrazněné. */
.je-cizi {
  background: var(--tint);
  /* Na fialovem podkladu je bezna linka neviditelna, tady ma vlastni. */
  border-bottom-color: var(--tint-cara);
}
.je-cizi code { color: var(--tint-ink); }
.je-cizi .rozbor-popis { color: var(--tint-ink); opacity: 0.78; }

.rozbor-shrnuti {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--faint);
  padding: 10px 0 0 3px;
}

@media (max-width: 620px) {
  .rozbor-radek { grid-template-columns: 1fr; gap: 6px; }
  .rozbor-popis { font-size: 13.5px; }
}

/* Rámeček místo citace. Značí se v markdownu jako >! na prvním řádku.
   Není to citát, je to to, co si má čtenář odnést, tak nemá kurzívu. */
.prose blockquote.ramecek {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 22px 24px;
  color: var(--ink);
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.6;
}
.prose blockquote.ramecek > * + * { margin-top: 0.9em; }
.prose blockquote.ramecek strong { color: var(--ink); }

@media (max-width: 620px) {
  .prose blockquote.ramecek { padding: 18px 16px; }
}

/* Stálá poznámka o ukázkách. Vypadá jako metodická poznámka pod čarou,
   protože to jedna z nich je. Nikdo ji nepíše ručně. */
.prose .ukazky-pozn { margin-top: 1.15em; }

/* Kontakt v patičce. Je na každé stránce, aby ho čtenář článku
   nemusel hledat přes stránku o autorce. */


/* Blok se zadáním. Řádky zůstávají tak, jak jsou napsané, a když je
   nějaký moc dlouhý, odroluje se do strany místo aby rozbil stránku. */
.prose pre {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 18px 20px;
  overflow-x: auto;
  max-width: var(--measure);
}
.prose pre code {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .prose pre { padding: 14px 14px; }
  .prose pre code { font-size: 12.5px; }
}

/* ---------------- skript hráčských tahů ----------------
   Opak obrazce .rozbor: tam šlo o to, že všechno je jedna zpráva,
   tady o to, že každý box je samostatný tah. Proto oddělené rámečky
   s mezerami, ne jeden celek. Barvy sdílí tokeny s .rozbor. */

.tahy {
  margin: 2.4em 0;
  max-width: var(--measure);
  --tint: #EBD9F5;
  --tint-ink: #2A0736;
  --tint-rail: #6E0C8B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tahy {
    --tint: #48175F;
    --tint-ink: #EDE8F2;
    --tint-rail: #C9A2E4;
  }
}

:root[data-theme="dark"] .tahy {
  --tint: #48175F;
  --tint-ink: #EDE8F2;
  --tint-rail: #C9A2E4;
}

.tahy .tahy-uvod {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.tah {
  background: var(--tint);
  border: 1px solid var(--tint-rail);
  border-radius: 4px;
  padding: 12px 16px 14px;
  margin-bottom: 10px;
}
.tah:last-child { margin-bottom: 0; }

.tah-hlava {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.tah-cislo {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tint-rail);
}

.tah-past {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint-ink);
  opacity: 0.62;
}

.tah p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tint-ink);
  text-align: left;
}

@media (max-width: 620px) {
  .tah { padding: 11px 13px 12px; }
  .tah p { font-size: 15.5px; }
}

/* ---------------- přehlídka odpovědí modelů ----------------
   Jméno modelu odděluje fialový rozdělovník, odpověď je souvislý
   odstavec. Hráčský tah stojí nahoře jednou, v boxu jako ve skriptu. */

.odpovedi .prose h3 {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2.2em;
  padding-top: 16px;
  border-top: 2px solid var(--accent);
  /* Zadne max-width v ch: jednotka ch se pocita z pisma prvku, a tenhle
     nadpis ma neproporcionalni pismo 11,5 px, takze by cara koncila
     v dvou tretinach odstavce. Sirku uz omezuje .prose. */
}

/* Odpoved ma vic odstavcu, tak at maji vsechny stejnou sazbu.
   Drive to platilo jen na prvni a zbytek vypadal jinak. */
.odpovedi .prose h3 + p { margin-top: 0.7em; }
.odpovedi .prose h3 ~ p { line-height: 1.62; }

/* Samostatný hráčský tah nad přehlídkou. Barvy sdílí se skriptem. */
.tah-sam {
  --tint: #EBD9F5;
  --tint-ink: #2A0736;
  --tint-rail: #6E0C8B;
  background: var(--tint);
  border: 1px solid var(--tint-rail);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 1.6em 0 2em;
}
.tah-sam p {
  margin: 0;
  color: var(--tint-ink);
  font-size: 16.5px;
  line-height: 1.5;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tah-sam {
    --tint: #48175F;
    --tint-ink: #EDE8F2;
    --tint-rail: #C9A2E4;
  }
}

:root[data-theme="dark"] .tah-sam {
  --tint: #48175F;
  --tint-ink: #EDE8F2;
  --tint-rail: #C9A2E4;
}

/* ---------------- manuál pravidel ----------------
   Článek s dvaadvaceti pravidly. Číslují se samy, nadpis kapitoly
   je barevný pruh, a odstavec "co se stane bez pravidla" má vlastní
   box, protože to je jádro celého textu. */

.manual .prose { counter-reset: pravidlo; }

/* Pravidlo: číslo v kolečku před nadpisem. Průběžně přes celý článek,
   protože titulek slibuje dvaadvacet, ne pětkrát od jedné. */
.manual .prose h3 {
  counter-increment: pravidlo;
  position: relative;
  padding-left: 40px;
}
.manual .prose h3::before {
  content: counter(pravidlo);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 50%;
}

/* Box "co se stane, když to pravidlo není". */
.bez {
  --tint: #EBD9F5;
  --tint-ink: #2A0736;
  --tint-rail: #6E0C8B;
  background: var(--tint);
  border-left: 3px solid var(--tint-rail);
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 1.15em 0;
  max-width: var(--measure);
}
.bez p {
  margin: 0;
  color: var(--tint-ink);
  font-size: 16.5px;
  line-height: 1.55;
  text-align: left;
}
.bez strong { color: var(--tint-ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bez {
    --tint: #48175F;
    --tint-ink: #EDE8F2;
    --tint-rail: #C9A2E4;
  }
}

:root[data-theme="dark"] .bez {
  --tint: #48175F;
  --tint-ink: #EDE8F2;
  --tint-rail: #C9A2E4;
}

/* ---------------- obsah článku ---------------- */

.obsah {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  padding: 22px 26px 18px;
  margin: 1.6em 0 2.4em;
  max-width: var(--measure);
}

.obsah-kap {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 18px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-soft);
}
.obsah-kap:first-child { margin-top: 0; }
.obsah-kap a { color: var(--faint); text-decoration: none; }
.obsah-kap a:hover { color: var(--accent); }

.obsah { counter-reset: obsah; }

.obsah-pravidla {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.obsah-pravidla li {
  counter-increment: obsah;
  position: relative;
  padding-left: 30px;
  margin-bottom: 6px;
  font-size: 15.5px;
  line-height: 1.45;
  text-align: left;
}
.obsah-pravidla li::before {
  content: counter(obsah);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.obsah-pravidla a { color: var(--ink); text-decoration: none; }
.obsah-pravidla a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 620px) {
  .obsah { padding: 18px 16px 14px; }
  .bez { padding: 12px 14px; }
  .manual .prose h3 { padding-left: 34px; }
  .manual .prose h3::before { width: 23px; height: 23px; font-size: 11px; }
}


/* --------------------------------------------------------------
   Jak text citovat
   -------------------------------------------------------------- */

.citace {
  margin: 40px 0 0;
  padding: 16px 18px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}
.citace h2 {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
  font-weight: 400;
}
.citace p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

/* --------------------------------------------------------------
   Portret na stránce o mně
   -------------------------------------------------------------- */

/* Obrázek je kruh vepsaný do čtverce a mimo kruh je černá. Ořez na kruh
   ty rohy odstraní úplně, takže se pod nimi ukáže pozadí stránky, ať už
   je světlé, nebo tmavé. Obrázek se kvůli tomu nemusí nikam překreslovat. */
.article-head.s-portretem {
  /* .article-head samo o sobe sklada na vysku, tady chceme vedle sebe. */
  flex-direction: row;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.article-head.s-portretem h1 { margin: 0; flex: 1 1 14rem; }

.portret {
  width: 116px;
  height: 116px;
  flex: none;
  border-radius: 50%;
  /* Tenký kroužek v akcentu, aby tmavý kruh nesplýval s tmavým pozadím. */
  box-shadow: 0 0 0 2px var(--accent);
  display: block;
}

@media (max-width: 30rem) {
  .portret { width: 92px; height: 92px; }
}

/* --------------------------------------------------------------
   Přeskakovací odkaz a datum textu
   -------------------------------------------------------------- */

/* Odkaz je vidět, teprve když se na něj člověk dostane tabulátorem.
   Uživatel čtečky obrazovky tak nemusí na každé stránce znovu
   procházet celou hlavičkou. */
.preskoc {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--ground);
  font-family: var(--f-mono);
  font-size: 13px;
  text-decoration: none;
  border-radius: 0 0 3px 0;
}
.preskoc:focus-visible { left: 0; }

.article-meta time {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------
   Přihlášení k newsletteru
   -------------------------------------------------------------- */

.newsletter {
  margin: 56px 0 0;
  padding: 20px 22px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
}
.newsletter .popis {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--muted);
  max-width: 54ch;
}
.newsletter form { max-width: 34rem; }
/* Past na roboty. Schovana tak, aby ji nenasel ani ctecka obrazovky:
   ma aria-hidden a tabindex -1, takze se na ni clovek nedostane ani
   tabulatorem. display:none by nekteri roboti poznali, tohle ne. */
.newsletter .past {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.newsletter .radek { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input[type="email"] {
  font: inherit;
  font-size: 15px;
  flex: 1 1 15rem;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink);
}
.newsletter input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.newsletter button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  flex: none;
  padding: 9px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: var(--ground);
  cursor: pointer;
}
.newsletter button:hover { opacity: .9; }
.newsletter button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.newsletter .souhlas {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.newsletter .souhlas input { margin-top: 3px; flex: none; }
.newsletter .pozn { margin: 12px 0 0; font-size: 13px; color: var(--faint); max-width: 56ch; }

/* --------------------------------------------------------------
   Beta. Tohle se do produkce nikdy nedostane, protoze se ty prvky
   v produkcnim rezimu vubec negeneruji. Styly tu ale zustavaji,
   protoze web.py posila obema verzim tentyz soubor.
   -------------------------------------------------------------- */

.betapruh {
  background: #B3261E;
  color: #FFFFFF;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 7px 18px;
  text-align: center;
}
.betaokraj {
  /* Vodorovny pruh nahore po odrolovani zmizi a stranka zacne vypadat
     produkcne. Tenhle proužek drzi u kraje okna porad, at je na kazdem
     miste clanku videt, ze jde o betu. */
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 100vh;
  background: #B3261E;
  z-index: 50;
  pointer-events: none;
}
@media (min-width: 768px) {
  /* Na mobilu zacina text 18 px od kraje, takze siroky pruh by ho
     prekryval. Na siroke obrazovce zacina obsah az za 150 px. */
  .betaokraj { width: 18px; }
}
.betapruh span {
  font-weight: 400;
  letter-spacing: 0;
  opacity: .92;
  margin-left: 10px;
}

/* Stitek se stavem clanku. Zelena znamena venku, seda rozdelano. */
.stav {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  vertical-align: 2px;
}
/* Ctyri stavy, at je na prvni pohled videt, co zbyva.
   Poradi podle toho, jak daleko je text k vydani. */
.stav.cist    { background: #4A2A08; color: #F0B860; }  /* ke cteni */
.stav.preklad { background: #3A2A50; color: #C0A8E8; }  /* k prekladu */
.stav.hotovo  { background: #12324A; color: #6CC8F0; }  /* k publikaci */
.stav.venku   { background: #0E3A38; color: #44FCE5; }  /* publikovano */
.stav.nabeta   { background: #123A20; color: #7CE0A0; }  /* verejna beta */
.stav.doma    { background: var(--rule); color: var(--muted); }

/* Stitek v rejstriku sedi u nadpisu, ne ve sloupci se sekci.
   Ten sloupec je uzky a ma nowrap, stitek by ho roztrhal. */
.entry h2 .stav { vertical-align: 3px; }

/* Licence pod testem. Zkousky jsou volnejsi nez zbytek webu
   a ctenar se to ma dozvedet u nich, ne az na licencni strance. */
.test-licence {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--faint);
}
.test-licence a { color: var(--faint); }
.test-licence a:hover { color: var(--accent); }

/* Obrazek v textu. Smi byt sirsi nez sloupec textu, protoze u kreseb
   a grafu je detail soucasti dokladu. Na uzke obrazovce se srovna
   na sirku stranky. */
.obrazek {
  margin: 32px 0;
  max-width: min(100%, 900px);
}
.obrazek img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}
.obrazek figcaption {
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--faint);
}

/* Tlacitko ke stazeni. Nese typ a velikost, aby ctenar vedel,
   do ceho jde, drive nez klikne. */
.stahnout { margin: 28px 0; }
.stahnout a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 20px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.stahnout a:hover {
  background: var(--accent);
  color: var(--surface);
}
.stahnout a:hover .stahnout-info { color: inherit; opacity: .8; }
.stahnout-info {
  font-weight: 400;
  font-size: 14px;
  color: var(--faint);
}