/* Vzhled blogu na spocitejduchod.cz.

   **Paleta a typografie jsou převzaté z `web/static/style.css`** (kalkulačka) —
   `docs/10` odd. 2 to žádá výslovně: blog a kalkulačka jsou dva stroje na dvou
   subdoménách, ale pro čtenáře je to jeden web, a jiná modrá nebo jiné písmo
   to prozradí na první pohled. Blok `:root` níž je proto opsaný **doslova**,
   aby se dal obojí porovnat jedním `diff`em; přidané proměnné jsou vypsané
   zvlášť pod ním.

   Platí tu i všech pět pravidel pro čtenáře kolem šedesáti (`CLAUDE.md` odd. 3):
   kontrast 7 : 1 u textu i u šedých vysvětlivek, 17 px / 1,65, cíl kliknutí
   44 px, viditelný fokus 3 px, barva nikdy nenese význam sama a tmavý režim
   není. Jediná vědomá odchylka je **velikost** souvislého textu (`--prose`
   roste se šířkou okna); šířku má blog od 2. 9. 2026 stejnou jako
   kalkulačka — viz `--measure` níž.

   Souboru se nedělá build a nemá závislosti: je to jeden statický soubor,
   stejně jako celý blog. */

/* ------------------------------------------------ paleta (opsáno z kalkulačky) */
:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #14181d;          /* 17,8 : 1 */
  --muted: #4a5462;        /*  7,7 : 1 — vysvětlivky nesmí být slabší než text */
  --line: #c8d2dd;         /* hranice karet a tabulek, ne text */
  --line-soft: #e3e9ef;    /* linky uvnitř tabulek */
  --accent: #14508f;       /*  8,2 : 1 — modrá je barva úřadu a banky */
  --accent-soft: #e8f0f9;
  --accent-ink: #ffffff;
  --warn-bg: #fff4dd;
  --warn-line: #8a5300;    /*  6,3 : 1 — žlutá se na text nedá použít */
  --error-bg: #fdeceb;
  --error-line: #a3241c;   /*  7,4 : 1 */
  --ok-bg: #e6f4ec;
  --ok-line: #1b6b46;      /*  6,5 : 1 */
  --radius: 10px;
  --column: 1100px;
  --tap: 44px;

  /* ---------------------------------------------------- přidané pro blog */

  /* Šířka souvislého textu. **Blog je na tom stejně jako kalkulačka: žádná.**
     Bylo tu 48 rem (asi sedmdesát znaků na řádek), což je typograficky
     správně — jenže na notebooku z toho byl tenký proužek uprostřed prázdna
     a čtenář to nečetl jako pěkný sloupec, ale jako scvrklou stránku.
     Zrušeno 2. 9. 2026: text doběhne do šířky `--column` a láme se až na ní,
     přesně jako v kalkulačce. Zarovnání zůstává **doleva**, nikdy do bloku.

     Proměnná tu zůstává kvůli tisku, kde šířku řídí okraj stránky. Kdo se
     bude chtít k užšímu sloupci vrátit, mění **jedno místo**: `main.reading`
     níž — uvnitř článku už žádná druhá mez není. */
  --measure: none;

  /* Souvislý text roste plynule se šířkou okna: 18 px na telefonu,
     22 px na notebooku a výš. `clamp()` umí Safari 13.4+, Chrome 79+
     i Firefox 75+, takže na cílových prohlížečích není co řešit; starší
     dostanou `--prose` jako neplatnou hodnotu a spadnou na 17 px z `body`,
     což je pořád čitelné. */
  --prose: clamp(18px, 16.4px + 0.5vw, 22px);
  --prose-line: 1.7;

  /* Značka v hlavičce. Na notebooku dvojnásobek původní velikosti, na
     telefonu ne — tam by se dlaždice s nápisem nevešly na jeden řádek
     a jméno webu by se zalomilo. Obě proměnné rostou **spolu** a plné
     velikosti dosáhnou kolem 1075 px šířky okna, aby si dlaždice s nápisem
     držely poměr 1,57 : 1 v celém rozsahu. */
  --brand-mark: clamp(40px, 24px + 4.1vw, 68px);
  --brand-text: clamp(1.5rem, 0.95rem + 2.6vw, 2.7rem);
}

/* **Tmavý režim není** — stejné rozhodnutí jako v kalkulačce a ze stejného
   důvodu (tabulky s čísly se v něm čtou hůř). Paleta je jedna, v `:root`,
   a poměry v komentářích výš proto platí bez výhrad. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left;                 /* nikdy do bloku */
  /* Safari na iPhonu si po otočení do šířky samo zvětšuje písmo a rozhodí
     tím celé měřítko; tímhle to nedělá a velikost řídí `clamp()` výš. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Dlouhá slova a adresy nesmí roztáhnout stránku do strany — na úzkém
     telefonu je to jinak nejčastější příčina vodorovného posuvníku. */
  overflow-wrap: break-word;
}

/* Fokus musí být vidět na **všem**, na co se dá kliknout — ovládání
   klávesnicí je pro tuhle cílovou skupinu častější, než se čeká.

   Dvojí zápis je schválně: `:focus-visible` umí Safari až od 15.4, takže
   nejdřív se rámeček dá **každému** fokusu (to zvládne i starý prohlížeč)
   a pak se v prohlížečích, které `:focus-visible` znají, zase odebere tam,
   kde jde o kliknutí myší. Kdo pravidla prohodí, vezme starému Safari
   viditelný fokus úplně. */
:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--accent); }
img { max-width: 100%; height: auto; }

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

/* Pás přes celou šířku kvůli lince a pozadí, ale text v něm sedí ve stejném
   sloupci jako obsah — jinak se na širokém monitoru nadpis odlepí od stránky
   pod ním. Totéž dělá `header` v kalkulačce. */
.site-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-head-inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem .5rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- značka

   Sestava je **obrázek + text**, ne jeden hotový obrázek s nápisem. Důvod je
   praktický: jméno webu se pak sází týmž písmem jako zbytek stránky, dá se
   označit myší, přečte ho hlasový odečítač a při zvětšení písma v prohlížeči
   roste s ním. Obrázková verze nápisu by v žádné z těch čtyř věcí neobstála.

   Značka je odkaz na titulní stranu. Že je to jméno webu, a ne nadpis
   stránky, se pozná z velikosti — proto tu není `<h1>`. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--tap);
  /* Dlaždice je vysoká zhruba jedenapůlkrát tolik co nápis. Poměr je zkoušený
     okem na skutečné velikosti: při větší dlaždici začne značka přebíjet
     vlastní jméno webu, a jméno je to, co si má člověk zapamatovat. Obě
     velikosti jsou proto svázané v `:root` a rostou spolu. */
  font-size: var(--brand-text);
  line-height: 1.1;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }

/* Dlaždice se sloupci. `flex: none`, aby se na úzkém displeji nesmrskla,
   a pevná výška, aby řádek hlavičky neposkakoval, než se obrázek načte —
   proto má `<img>` i atributy `width`/`height` v HTML. */
.brand-mark {
  flex: none;
  display: block;
  width: var(--brand-mark);
  height: auto;          /* SVG je čtvercové, výška si dopočítá poměr sama */
}

/* Jméno se **nikdy nezalamuje.** „Spočítej / důchod“ na dvou řádcích vypadá
   jako dvě slova vedle loga, ne jako název; na nejužším displeji se radši
   zmenší (viz mobilní blok níž). */
.brand-name { white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 .7rem;
  border-radius: 6px;
  color: var(--accent);
  text-decoration: none;
}
.site-nav a:hover { background: var(--accent-soft); }
/* Aktuální stránka se pozná **slovem i tvarem**, ne barvou: podtržení
   a tučný řez. Barva sama by pro barvoslepého čtenáře neřekla nic. */
.site-nav a[aria-current="page"] {
  font-weight: 600;
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* Odkaz na kalkulačku je v hlavičce jediné tlačítko: je to důvod, proč tenhle
   web existuje, a má být dosažitelný z každé stránky jedním kliknutím. */
.site-nav a.nav-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-weight: 600;
}
.site-nav a.nav-cta:hover { background: #0e3d6e; }

/* ---------------------------------------------------------------- obsah */

main { max-width: var(--column); margin: 0 auto; padding: 1.4rem 1rem 0; }

/* Čtecí stránky (článek, O projektu, Soukromí) mají **touž** šířku jako
   rozcestník a titulní strana. Byly užší — `--measure` + 2 rem, tedy 800 px
   uvnitř sloupce širokého 1100 —, jenže z toho byl na notebooku úzký proužek
   uprostřed prázdna a stránka vypadala scvrkle. Sjednoceno 2. 9. 2026: jedna
   šířka na celém blogu, žádná stránka se od ostatních neliší. */
main.reading { max-width: var(--column); }

/* Celá škála roste se šířkou okna spolu s `--prose`. Kdyby rostl jen text
   a nadpisy zůstaly, byl by na notebooku `h2` menší než odstavec pod ním —
   proto se nedá zvětšit jedno bez druhého. */
h1 {
  font-size: clamp(1.8rem, 1.25rem + 2.1vw, 2.9rem);
  line-height: 1.2; margin: 0 0 .6rem; text-wrap: balance;
}
h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.3; margin: 2.2rem 0 .6rem; text-wrap: balance;
}
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); margin: 1.5rem 0 .4rem; }
p { margin: 0 0 1rem; }

.lede {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.45; color: var(--ink); margin: 0 0 1.2rem;
}
.hint { color: var(--muted); font-size: clamp(.95rem, .9rem + 0.2vw, 1.05rem); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.grid .card { margin-bottom: 0; }

/* Karta má vlastní šířku (v mřížce ji dává sloupec, jinak celý `--column`),
   takže druhá mez uvnitř ní jen ubírá místo. Totéž platí v článku i na
   titulní straně — na blogu už nikde není sloupec ve sloupci. */
.card > p, .card > ul, .card > ol { max-width: none; }

/* ------------------------------------------------------- titulní strana */

.hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  margin-bottom: 1.1rem;
}
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); }
/* Perex **nemá** vlastní míru. Stojí uvnitř široké karty `.hero`, a tam platí
   totéž, co v kalkulačce u `--measure: none`: úzký sloupec s roztřepeným
   okrajem uprostřed široké plochy vypadá jako zalomení navíc, ne jako
   typografie. Text doběhne do šířky karty a láme se až na ní. */
.hero .lede { max-width: none; }

/* Slib, kvůli kterému je člověk ochoten kliknout dál. Tři věci, nic víc —
   stejný prvek jako `.promise` v kalkulačce, aby to byl týž web. */
/* Tři sloupce přes celou šířku karty, ne řádek namačkaný k levému okraji.
   `auto-fit` s `minmax` rozhodne podle šířky okna: na notebooku tři vedle
   sebe rozprostřené po celé kartě, na telefonu tři pod sebou. Flex je tu
   dělal shluk vlevo a dvě třetiny karty zůstávaly prázdné. */
.promise {
  display: grid; gap: .5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.2rem 0 0; padding: 0; list-style: none;
  color: var(--muted); font-size: 1rem;
}
.promise li { display: flex; align-items: center; gap: .4rem; }
.promise li::before { content: "✓"; color: var(--ok-line); font-weight: 700; }
.promise strong { color: var(--ink); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .5rem 1.2rem;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; text-decoration: none;
}
.button:hover { background: #0e3d6e; }
.button.secondary { background: transparent; color: var(--accent); font-weight: 500; }
.button.secondary:hover { background: var(--accent-soft); }

/* Hlavní tlačítko úvodní strany. Je to jediná věc, kvůli které se stránka
   píše, takže se nemá tvářit jako odkaz v odstavci: větší písmo, vyšší cíl
   než minimálních 44 px a vlastní stín, aby se odlepilo od bílé karty.
   Na telefonu jde přes celou šířku — palec míří doprostřed, ne do rohu. */
.button.big {
  font-size: 1.15rem;
  min-height: 3.4rem;
  padding: .6rem 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 0 #0e3d6e;
}
.button.big:hover { box-shadow: 0 2px 0 #0a2d51; }
/* Stín se při stisku schová, aby bylo hmatatelné, že tlačítko šlo dolů.
   `transform` schválně ne — na `prefers-reduced-motion` by se musel vypínat. */
.button.big:active { box-shadow: none; }

/* Tři věty pod tlačítkem: čím se výpočet liší od odhadu, který člověk dostane
   od úřadu. Ne odrážky s puntíkem — jsou to tvrzení, ne seznam vlastností. */
.edge {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.edge li {
  padding-left: .9rem;
  border-left: 3px solid var(--accent-soft);
  color: var(--muted);
}
.edge strong { display: block; color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------- seznam článků */

/* Mřížka, ne sloupec pod sebou: s náhledovým obrázkem by karta přes celou
   šířku byla vysoká přes půl obrazovky a na jednu obrazovku by se vešly dvě.
   `auto-fill` s `minmax` znamená, že o počtu sloupců rozhoduje šířka okna,
   ne breakpoint — na telefonu vyjde jeden, na notebooku tři. Spodní mez
   320 px je ta, pod kterou se nadpis karty láme do čtyř řádků. */
.article-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.article-list li { margin: 0; }

/* Celá karta je odkaz — cíl kliknutí je tím řádově větší než 44 px, což je
   pro tuhle cílovou skupinu podstatnější než elegance. */
.article-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;          /* obrázek je na krajích karty, ne uvnitř rámečku */
  color: var(--ink);
  text-decoration: none;
}
.article-card:hover { border-color: var(--accent); background: #fbfdff; }

/* Náhledový obrázek. Kreslí ho `blog/ilustrace.py` — jeden motiv na článek,
   všechny v témž slohu. Je to **ozdoba**, proto `alt=""`: co článek říká,
   stojí v nadpisu hned pod ním, a předčítač nemá co popisovat.

   Poměr 16 : 9 drží `aspect-ratio`, ne výplň v obrázku, takže karta nikdy
   „nepodskočí“ při načtení; `width`/`height` v HTML jsou tu ze stejného
   důvodu. Podklad pod obrázkem je v barvě značky — než se SVG načte,
   nesvítí v kartě bílá díra. */
.article-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}
.card-body { padding: 1rem 1.1rem; }
.article-card h3 {
  margin: .2rem 0 .4rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.3;
  color: var(--accent);
}
.article-card p { margin: 0; color: var(--ink); font-size: clamp(17px, 16.4px + 0.25vw, 19px); }
.article-card .meta { margin: 0 0 .1rem; }
.article-card h3:first-child { margin-top: 0; }

/* Rubrika: „Aktualita“ × „Tip“. Je to **slovo**, ne barevná tečka. */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  color: var(--muted); font-size: clamp(.9rem, .85rem + 0.2vw, 1.02rem);
}
/* Rubrika. `nowrap` proto, že „AKTUÁLNÍ ZMĚNY“ jsou dvě slova a zalomená
   pilulka vypadá jako dvě různé značky pod sebou. */
.tag {
  font-size: clamp(.74rem, .71rem + 0.13vw, .84rem);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .12rem .6rem; color: var(--muted); background: var(--bg);
}
.tag.news { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* -------------------------------------------------------- článek (text) */

article.post { font-size: var(--prose); line-height: var(--prose-line); }
/* Odstavce, výčty a nadpisy si vlastní mez **nedrží** — šířku určuje `main`.
   Druhá mez uvnitř už tak širokého sloupce z něj dělala sloupec ve sloupci
   a roztřepený okraj uprostřed prázdné plochy vypadal jako zalomení navíc.
   Je to totéž rozhodnutí, které padlo v kalkulačce u `--measure: none`. */
article.post ul, article.post ol { padding-left: 1.3rem; }
article.post li { margin: .3rem 0; }
article.post strong { font-weight: 600; }

/* První odstavec článku nese jeho smysl; kdo ho přečte, ví, jestli číst dál. */
article.post > .lede { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.45; color: var(--ink); }

/* Poznámka pod čarou uvnitř textu — mez, výhrada, odkaz na paragraf.
   Odlišená linkou, ne barvou. */
.note {
  margin: 1.4rem 0;
  padding: .1rem 0 .1rem .9rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: clamp(.95rem, .9rem + 0.25vw, 1.1rem);
}

/* ------------------------------------------------------ příklad klienta */

/* Jádro každého článku: jeden člověk, jeden propočet. Vlastní karta s vlastním
   nadpisem, aby se dala v článku najít očima a aby bylo poznat, kde končí
   výklad a začínají čísla. */
.example {
  margin: 1.6rem 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  /* O stupeň menší než souvislý text: příklad je vsuvka, ne hlavní proud. */
  font-size: clamp(17px, 15.8px + 0.38vw, 20px);
  line-height: 1.6;
}
.example > h3 {
  margin: 0 0 .6rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
.example p { margin: 0 0 .7rem; }
.example p:last-child { margin-bottom: 0; }

/* Propočet. `tabular-nums` proto, aby čísla pod sebou stála v řadě —
   jinak se sloupec korun rozjede a nedá se sečíst očima. */
table.calc {
  width: 100%;
  border-collapse: collapse;
  margin: .9rem 0;
  font-size: clamp(16px, 15.2px + 0.25vw, 18px);
  font-variant-numeric: tabular-nums;
}
table.calc th, table.calc td {
  border-bottom: 1px solid var(--line-soft);
  padding: .42rem .5rem;
  text-align: left;
  vertical-align: baseline;
}
table.calc thead th {
  border-bottom: 1px solid var(--line);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
table.calc td.num, table.calc th.num { text-align: right; white-space: nowrap; }
table.calc tbody tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
table.calc tbody tr.total td.num { font-size: 1.05em; }
/* Řádek, o který v tabulce jde. Poznat je **z popisku a tučného písma**,
   podbarvení je jen napověda. */
table.calc tbody tr.pick td { background: var(--ok-bg); }
table.calc caption {
  caption-side: bottom;
  padding-top: .5rem;
  color: var(--muted); font-size: .87rem; text-align: left;
}

/* Široká tabulka se posouvá uvnitř svého rámu, stránka nikdy do stran. */
.table-wrap { overflow-x: auto; }

/* Závěr příkladu jednou větou — to jediné, co si čtenář odnese. */
.takeaway {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  background: var(--ok-bg);
  border-left: 4px solid var(--ok-line);
  border-radius: 6px;
  font-size: clamp(17px, 15.8px + 0.38vw, 20px);
}
.takeaway strong { color: var(--ink); }

/* Past, na kterou se dá naletět. Žlutá se na text použít nedá (viz palette),
   proto je barevný jen podklad a linka; slovo „Pozor“ nese význam. */
.warn {
  margin: 1.4rem 0;
  padding: .8rem 1rem;
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-line);
  border-radius: 6px;
  font-size: clamp(17px, 15.8px + 0.38vw, 20px);
}
.warn > strong:first-child { display: block; margin-bottom: .2rem; }

/* ------------------------------------------- nabídka kalkulačky (mimo text) */

/* **Stojí mimo článek, ne v něm.** Článek má obstát sám o sobě; tohle je
   nabídka, ne pointa odstavce. Je to odkaz, ne překryv, a nikde se neobjeví
   dřív, než článek skončí. Cena za pomoc je až na `/pomoc` v kalkulačce —
   tady se slibuje jen to, co je zdarma. */
.tool-callout {
  display: block;
  margin: 2rem 0 1.2rem;
  padding: 1.1rem 1.2rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.tool-callout:hover { background: var(--card); }
.tool-callout strong { display: block; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); color: var(--ink); }
.tool-callout span { display: block; margin-top: .35rem; color: var(--ink); }
.tool-callout .go {
  display: block; margin-top: .6rem;
  color: var(--accent); font-weight: 600;
}

/* ------------------------------------------------------------- o autorovi */

.author-row { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.portrait {
  flex: none;
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg);
}
.portrait.large { width: 176px; height: 176px; }
.author-row > div { flex: 1 1 18rem; min-width: 0; }

/* ----------------------------------------------------------- konec článku */

.post-foot { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.post-foot h2 { margin-top: 0; font-size: 1.05rem; }

/* -------------------------------------------------------------- patička */

/* Kdo za tím stojí a podle čeho se počítá. Text je týž jako v patičce
   kalkulačky — je to jeden slib a nesmí se rozejít. */
.site-footer {
  max-width: var(--column);
  margin: 2.5rem auto 0;
  padding: 1.2rem 1rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}
/* Bez vlastní míry — patička je pod čarou přes celý sloupec a 46rem z ní
   dělaly úzký proužek u levého okraje. */
.site-footer p { margin: .35rem 0; }
.site-footer a { color: var(--accent); }

/* Nabídka se zalomí pod značku dřív, než začne mobilní rozvržení: značka
   a tři odkazy se na jeden řádek nevejdou zhruba do 1000 px. Bez tohohle
   zůstala zalomená nabídka úzká a přilepená doleva. */
@media (max-width: 1000px) {
  .site-nav { width: 100%; }
}

/* --------------------------------------------------------------- mobil */

@media (max-width: 640px) {
  /* Velikosti písma a značky tu **nejsou** — řídí je `clamp()` v `:root`
     a zdvojení by se s ním pralo. Zůstává jen to, co se s šířkou okna mění
     skokem, ne plynule. */
  .brand { gap: .5rem; }
  .hero { padding: 1.2rem 1rem; }
  .hero-actions { display: block; }
  .button.big { display: flex; width: 100%; }
  main { padding-left: .9rem; padding-right: .9rem; }
  .site-nav a { padding: 0 .55rem; }
  .portrait.large { width: 128px; height: 128px; }
  /* Příklad i tabulka dostanou na telefonu okraje zpátky do rozumné míry —
     na 320 px zabírá odsazení 1,3 rem přes patnáct procent šířky. */
  .example { padding: .9rem 1rem; }
  table.calc th, table.calc td { padding: .4rem .35rem; }
}

/* Velmi úzké telefony (iPhone SE a spol.): jméno webu se pořád nezalomí,
   ale dlaždice ustoupí, ať na řádek zbude místo. */
@media (max-width: 360px) {
  :root { --brand-mark: 34px; }
  .brand { font-size: 1.35rem; }
}

/* --------------------------------------------------------------- tisk */

/* Článek s propočtem si člověk vytiskne a vezme s sebou na ČSSZ — patří sem
   tedy adresa, kterou papír jinak neunese. */
@media print {
  .site-nav, .tool-callout, .post-foot { display: none; }
  /* Značka na papíře zůstává — je to jediné, podle čeho čtenář pozná, odkud
     ten list je. Dlaždice je obrázek, takže projde i přes vypnutá barevná
     pozadí; stačí ji zmenšit. */
  /* Na papíře řídí šířku okraj stránky, ne `--measure`; a velikost písma
     patří do bodů, ne do `vw` — tiskový „viewport“ žádnou šířku okna nemá. */
  :root { --brand-mark: 26px; --prose: 11.5pt; --measure: none; }
  .brand { font-size: 1.2rem; }
  body { background: #fff; font-size: 12pt; }
  main.reading { max-width: none; }
  /* `page-break-inside` je starší zápis téhož; Safari na něj u tisku pořád
     slyší líp než na `break-inside`, takže tu stojí obojí. */
  .example, .card { page-break-inside: avoid; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}