/* ===== PÍSMO ===== */
/* Bricolage Grotesque (SIL OFL 1.1), variabilní: váha 200–800 a optická velikost 12–96 (opsz se volí sám
   podle velikosti písma, velké datum v h1 tak dostane display řez). Self-host — CSP skeletonu (až přijde)
   nepustí žádné CDN. Dva soubory: čeština potřebuje i latin-ext (ě š č ř ž ů). */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== TOKENY ===== */
:root {
  color-scheme: light dark;

  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --c-bg:        #e4e4e1;   /* beton */
  --c-bg-alt:    #e4e4e1;   /* plocha pod obálkou */
  --c-surface:   #f0f0ee;   /* karty */
  --c-text:      #1c1d1f;   /* grafit */
  --c-muted:     #5c5f63;   /* ocel; navržená #6b6e72 měla na betonu jen 4,0 : 1 */
  --c-faint:     #5f6266;   /* velké roky; nosný údaj, proto aspoň 4,5 : 1 na pozadí i ploše */
  --c-border:    #b9bbbd;   /* linky */
  --c-accent:    #ff5a1f;   /* signální oranžová; jen plná, nikdy odstín ani přechod */
  --c-on-accent: #1c1d1f;   /* na oranžové grafit (5,4 : 1), bílá má jen 3,1 : 1 */
  --c-code-bg:   #1c1d1f;
  --c-code-text: #f2f1ec;   /* blok kódu je tmavý v obou režimech */
  --c-focus:     #1c1d1f;   /* obrys focusu: oranžová měla na betonu jen 2,45 : 1, grafit 13 : 1 (WCAG 1.4.11) */

  --pad:  clamp(20px, 5vw, 64px);
  --gap:  clamp(20px, 3vw, 40px);
  --ease: .16s cubic-bezier(.2, .8, .2, 1);
}

/* Tmavý režim: stejná stavba, jen obrácené plochy — mokrý beton místo suchého. Oranžová je
   o stupeň světlejší, aby podtržení odkazů na tmavé nezanikla; text na ní zůstává grafitový. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:      #141516;
    --c-bg-alt:  #222325;
    --c-surface: #1c1d1f;
    --c-text:    #ecedeb;
    --c-muted:   #9a9da1;
    --c-faint:   #8a8d92;
    --c-border:  #34363a;
    --c-accent:  #ff6a33;
    --c-code-bg: #222325;
    --c-focus:   #ff6a33;   /* na mokrém betonu oranžová stačí (6,6 : 1) */
  }
}

/* ===== RESET ===== */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
/* jednoslovné názvy bez mezer („Seventytwohundredseconds“) by na mobilu přetekly řádek */
h1, h2, h3, .radky .telo { overflow-wrap: anywhere; }
code {
  font-family: var(--mono); font-size: .88em; padding: .1em .35em;
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
}

.container { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); }

/* odkaz na obsah pro klávesnici: schovaný nad okrajem, při focusu sjede dolů (audit 2026-10-18 LOW) */
.skip {
  position: absolute; top: 8px; left: 8px; z-index: 10; padding: 10px 16px;
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 600;
  transform: translateY(-200%); transition: transform var(--ease);
}
.skip:focus { transform: none; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted);
}
.link-underline { border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color var(--ease); }
.link-underline:hover, .link-underline.is-active { border-bottom-color: var(--c-accent); }

/* ===== HLAVIČKA ===== */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--c-text);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
/* pixelové logo: 25 × 25 buněk, 50 px = přesně 2 px na buňku, proto pixelated.
   flex: none + max-width: none — na mobilu, kde je text loga schovaný, by ho jinak obecné
   img { max-width: 100% } zmenšilo na 42 px (šířka odkazu po záporném okraji) a pixely by se rozmazaly. */
.wordmark img { flex: none; max-width: none; margin-left: -8px; image-rendering: pixelated; }
.site-nav { display: flex; gap: clamp(16px, 3vw, 40px); font-size: 15px; white-space: nowrap; }
/* Dotyková plocha 44 px. Samotný odkaz zvětšit nejde — podtržení je jeho spodní rámeček
   a odjelo by od textu; plochu proto nese neviditelný ::after. */
/* Totéž v patičce (white-space: nowrap); v řádcích viz níž. */
.site-nav a, .daynav a:not(.btn), .site-footer a { position: relative; }
.site-nav a::after, .daynav a:not(.btn)::after, .site-footer a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
/* Odkazy v textu se zalamují a ::after s left/right: 0 má u zalomeného odkazu nulovou šířku (audit 2026-10-18,
   zbylo 24 px). Plochu proto nese padding-block, který má každý řádek odkazu zvlášť: obsah písma je ~1,28em,
   23px − .64em ho dorovná na 44+ px. Inline padding řádky neroztáhne a position: relative ho dá nad sousední
   text. Podtržení je proto čára v pozadí u spodku obsahu, ne rámeček — ten by s paddingem odjel od textu. */
.souhrn a, .text a {
  position: relative; padding-block: calc(23px - .64em); border-bottom: 0;
  background: linear-gradient(var(--c-accent) 0 0) 0 100% / 100% 1.5px no-repeat content-box;
}

/* ===== HERO ===== */
/* vlevo titul se souhrnem, vpravo přepínání dne svisle na střed */
.hero {
  display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center;
  padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.5vw, 48px);
}
.hero h1 {
  margin-top: 28px; font-size: clamp(51px, 10vw, 141px); line-height: .92;
  font-weight: 700; letter-spacing: -.03em; margin-left: -.04em;
}
/* chybová hláška je delší než datum */
.hero h1.hero__mensi { font-size: clamp(44px, 7.4vw, 104px); }
.hero .souhrn { margin-top: 24px; font-size: 15px; color: var(--c-muted); }
/* lišta pod datem: vlevo souhrn dne, vpravo kopírování; od data i od rubrik ji dělí tenké linky */
.lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding: 10px 0; margin-bottom: 16px;
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  font-size: 15px;
}
.lista .souhrn { color: var(--c-muted); }
.sdilet { display: flex; flex-wrap: wrap; gap: 8px 12px; }
/* display: flex by jinak přebil atribut hidden a tlačítka by byla vidět i bez JS */
.sdilet[hidden] { display: none; }
/* menší sourozenec modrého tlačítka z přepínání dne */
.sdilet button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: transform var(--ease);
}
/* zvednutí jen tam, kde je myš — na dotyku by po ťuknutí zůstalo tlačítko viset nahoře */
@media (hover: hover) {
  .sdilet button:hover, .daynav .btn:hover { transform: translateY(-2px); }
  .fotky a:hover img { transform: scale(1.03); }
}
.sdilet button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
/* pomocná textarea pro kopírování na http; mimo obraz, ale ne display: none, jinak by nešla označit */
.sdilet__schranka { position: fixed; top: 0; left: -9999px; }
.daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.daynav a { font-size: 18px; font-weight: 500; }
.daynav .btn {
  display: inline-flex; align-items: center; min-height: 58px; padding: 0 34px;
  border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: 20px;
  transition: transform var(--ease);
}

.stav { max-width: 40em; padding-bottom: 48px; font-size: 19px; }

/* ===== RUBRIKA ===== */
.folio {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--c-text);
}
.folio h2 { color: var(--c-text); }

/* ===== DLAŽDICE ===== */
.alba { margin-bottom: clamp(36px, 4.5vw, 56px); }
.rada { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
/* řada má tabindex (posouvání klávesnicí); obrys dovnitř — na mobilu přetéká až k okraji okna a vně by nebyl vidět */
.rada:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

.tile {
  display: flex; flex-direction: column; background: var(--c-surface);
  border: 1px solid var(--c-border); color: var(--c-text);
}
/* Obálka se neořezává — je to grafika, ne fotka. Nečtvercová dostane po stranách plochu pod sebou. */
.tile__img { padding: 18px; background: var(--c-bg-alt); }
.tile__img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.tile__info { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; }
/* dlouhé názvy by rozhodily výšky dlaždic vedle sebe */
.tile h3 {
  font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* interpret je nosný údaj: ne 12px verzálky s prostrkáním jako rubrika (audit 2026-10-18 LOW) */
.tile .eyebrow { margin-top: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; transition: color var(--ease); }
/* dlaždice s odkazem a bez něj vypadaly stejně; trvalé jemné podtržení názvu říká, že se dá otevřít */
a.tile h3 { text-decoration: underline; text-decoration-color: var(--c-border); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a.tile:hover h3 { text-decoration-color: currentColor; }
/* wrap: v šesti sloupcích pod ~1360 px se „před N lety“ vedle roku nevejde a přeteklo by přes okraj dlaždice */
.tile__pata { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 20px; }
.tile__rok {
  font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  color: var(--c-faint); font-variant-numeric: tabular-nums; transition: color var(--ease);
}
.tile__pred { font-size: 13px; color: var(--c-muted); white-space: nowrap; transition: color var(--ease); }

/* ===== PRÁVNÍ TEXT ===== */
/* ochrana soukromí: bez sloupce metadat jako článek, šířku řádku drží sama */
.pravni { max-width: 40em; }
.pravni > h2:first-child { margin-top: 0; }
.pravni__datum { font-size: 15px; color: var(--c-muted); }

/* ===== KONTAKT ===== */
/* portrét vpravo v hero, kde má hudba přepínání dne; obdélník bez rámečku, rádiusu i stínu */
.portret { width: clamp(180px, 18vw, 280px); height: auto; align-self: end; }
/* Čtverce ve stejné mřížce jako alba (šest v řadě, 20 px mezera), ikona v akcentu nahoře, text dole.
   Na mobilu se neposouvají do strany jako alba — šest položek se vejde do tří a dvou sloupců. */
.kanaly ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.kanal {
  display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1;
  padding: 18px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text);
}
.kanal__ikona { width: 36px; height: 36px; color: var(--c-accent); transition: color var(--ease); }
.kanal__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kanal .eyebrow { transition: color var(--ease); }
/* @ptrjhd.bsky.social je v úzkém čtverci delší než řádek: láme se na <wbr> před tečkou, anywhere je až pojistka */
.kanal__kde { font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* ===== ŘÁDKY ===== */
.radky li {
  display: flex; gap: 16px; align-items: center; position: relative;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.radky .rok {
  flex: 0 0 3.2em; font-size: 18px; line-height: 1; font-weight: 700;
  letter-spacing: -.02em; color: var(--c-faint); font-variant-numeric: tabular-nums;
}
.radky .mini { flex: 0 0 44px; width: 44px; height: 44px; background: var(--c-bg-alt); }
.radky .mini img { width: 100%; height: 100%; object-fit: contain; }
.radky .telo { flex: 1; min-width: 0; }
.radky .nazev { font-weight: 500; }
/* trvalé jemné podtržení: v řádcích jsou názvy s odkazem i bez něj a nebylo poznat, co se dá otevřít */
.radky .nazev a { border-bottom: 1.5px solid var(--c-border); transition: border-color var(--ease); }
.radky .nazev a:hover { border-bottom-color: var(--c-accent); }
/* odkaz má 22 px, řádek 68 px: dotykovou plochou je celý řádek (jediný odkaz v něm), M12 */
.radky .nazev a::after { content: ""; position: absolute; inset: 0; }
.radky .kdo { color: var(--c-muted); margin-left: .6em; }
.radky .pozn { flex: 0 0 auto; color: var(--c-muted); font-size: 14px; white-space: nowrap; }

/* ===== SLOUPCE ===== */
.sloupce {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(40px, 5vw, 64px) var(--gap); align-items: start;
}
.sloupce .folio { margin-bottom: 0; }
.sloupce .radky li { align-items: baseline; padding: 10px 0; }
.sloupce .radky .rok { font-size: 16px; }

/* ===== ČLÁNEK ===== */
.hero .perex { margin-top: 36px; max-width: 34em; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; color: var(--c-muted); }

.clanek {
  display: grid; grid-template-columns: 220px minmax(0, 680px); gap: clamp(32px, 7vw, 112px);
  padding-top: 32px; border-top: 1px solid var(--c-text);
}
.meta { position: sticky; top: 32px; align-self: start; }
.meta dl { margin: 0; display: grid; gap: 20px; }
.meta dt { margin-bottom: 4px; }
.meta dd { margin: 0; font-size: 15px; font-weight: 500; }

/* min-width: 0 — sloupec mřížky se jinak roztáhne podle nejdelšího řádku v <pre> a stránka na mobilu ujede do strany */
.text { min-width: 0; font-size: 19px; line-height: 1.65; }
.text > * + * { margin-top: 1.25em; }
.text > p:first-child { font-size: 23px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.text h2 { margin-top: 2.2em; font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; }
.text h2 + * { margin-top: .8em; }
/* podtržení a plocha viz HLAVIČKA; jen barva pozadí, aby výplň zůstala v content-boxu a nepřetekla do paddingu */
.text a { transition: background-color var(--ease), color var(--ease); }
.text a:hover { background-color: var(--c-accent); color: var(--c-on-accent); }
.text ul, .text ol { list-style: revert; padding-left: 1.2em; }
.text li + li { margin-top: .35em; }
.text li::marker { color: var(--c-faint); font-weight: 700; }
/* blok kódu je tmavý v obou režimech */
.text pre {
  margin-bottom: 0; padding: 22px 24px; overflow-x: auto; background: var(--c-code-bg); color: var(--c-code-text);
  font-family: var(--mono); font-size: 14.5px; line-height: 1.6;
}
.text pre code { padding: 0; border: 0; background: none; font-size: inherit; }

/* citát: velké písmo, před ním modrý čtverec */
.text blockquote {
  margin: 2em 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.14;
  font-weight: 700; letter-spacing: -.025em; text-wrap: balance;
}
.text blockquote::before {
  content: ""; display: block; width: 18px; height: 18px; margin-bottom: 18px; background: var(--c-accent);
}

/* Obrázek smí přetéct sloupec textu doprava, ale jen do okraje stránky. Sloupec končí na 1024–1160 px u okraje
   kontejneru, takže dřív přetekl i okno (69 px scrollu, S14); 24 px rezervy pokryje i klasický scrollbar (15 px).
   Hlídá NoHorizontalScrollTest v prohlížeči. */
.text figure { margin: 2.2em 0; width: min(100% + 120px, 100% + var(--pad) - 24px); }
.text figure .plocha {
  display: grid; place-items: center; padding: 40px;
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
}
.text figure img { width: min(46%, 320px); aspect-ratio: 1; object-fit: contain; }
.text figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--c-muted); }

/* ===== DALŠÍ ČLÁNKY ===== */
.dalsi { margin-top: clamp(72px, 10vw, 144px); }
.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.karta {
  display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 260px;
  padding: 24px; background: var(--c-surface); border: 1px solid var(--c-border);
}
.karta h3 { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.karta .eyebrow { transition: color var(--ease); }
.karta__pata { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.karta__den {
  font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  color: var(--c-faint); font-variant-numeric: tabular-nums; transition: color var(--ease);
}

/* ===== NAJETÍ NA DLAŽDICI, KANÁL A KARTU ===== */
/* jedno pravidlo pro všechny tři: tři kopie se při první změně rozešly (audit 2026-10-18 LOW) */
.tile, .kanal, .karta { transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
a.tile:hover, .kanal:hover, .karta:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
a.tile:hover .eyebrow, a.tile:hover .tile__rok, a.tile:hover .tile__pred,
.kanal:hover .kanal__ikona, .kanal:hover .eyebrow,
.karta:hover .eyebrow, .karta:hover .karta__den { color: var(--c-on-accent); }

/* ===== FOTKY ===== */
.serie { margin-bottom: clamp(56px, 8vw, 112px); }
.serie .folio { margin-bottom: 20px; }
.serie h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.03em; }

/* První fotka série je velká (4 × 2 pole), další dvě se vedle ní složí pod sebe, zbytek jde po třech.
   Fotky se ořezávají do pole — na rozdíl od obálek to nevadí; celá je po kliknutí. */
.fotky {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
  grid-auto-rows: clamp(150px, 17.5vw, 250px);
}
.fotky a { grid-column: span 2; overflow: hidden; background: var(--c-bg-alt); }
.fotky a:first-child { grid-column: span 4; grid-row: span 2; }
/* sirotci v poslední řadě: jedna fotka se roztáhne přes celou šířku, dvě si ji rozdělí napůl.
   Jen nad mobilním breakpointem — mají vyšší specificitu než mobilní pravidla a span 6 / span 3
   by ve dvousloupcové mřížce vyrobil sloupce navíc (první fotka pak měla 12 px). */
@media (min-width: 641px) {
  .fotky a:nth-child(3n + 1):last-child:not(:first-child) { grid-column: span 6; }
  .fotky a:nth-child(3n + 1):nth-last-child(2):not(:first-child),
  .fotky a:nth-child(3n + 2):last-child { grid-column: span 3; }
}
.fotky img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }

/* ===== PATIČKA ===== */
.site-footer {
  margin-top: clamp(64px, 9vw, 128px); padding: 20px 0 36px; border-top: 1px solid var(--c-border);
  color: var(--c-muted); font-size: 13px;
  /* vlevo zdroje dat stránky, vpravo kredit studia; na úzkém displeji pod sebou */
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
}
/* nowrap: „Cover Art Archive" rozdělený přes dva řádky by měl dotykovou plochu mezi nimi */
.site-footer a { color: var(--c-text); white-space: nowrap; }
/* řádky 44 px od sebe: zalomená patička na mobilu má odkazy pod sebou a jejich 44px plochy se nesmí překrývat */
.site-footer p { line-height: 44px; }
.site-footer__kredit { margin-left: auto; text-align: right; }
/* odkaz uprostřed věty: samotná barva (2,6 : 1 k textu) nestačí, trvalé podtržení; hover ho přebarví na akcent */
.site-footer__kredit a { border-bottom-color: currentColor; }

/* ===== MOBIL ===== */
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; }
  /* šest dlaždic se do šířky nevejde — řada se posouvá do strany a přetéká až k okraji */
  .rada {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    /* posuvná řada ořezává i svisle; bez místa nahoře a dole by se uřízl obrys dlaždice při focusu (2 + 3 px) */
    padding-block: 6px; margin-block: -6px 14px;
  }
  .rada .tile { flex: 0 0 min(64vw, 260px); scroll-snap-align: start; }
  .kanaly ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* v jednom sloupci jde fotka nad text, ať „Jsem Jahy" není bez tváře až pod perexem */
  .portret { order: -1; width: 160px; align-self: start; }

  .clanek { grid-template-columns: 1fr; gap: 32px; }
  .meta { position: static; }
  .meta dl { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 40px; }
  .text figure { width: 100%; }
  .karty { grid-template-columns: 1fr; }
  .karta { min-height: 0; }
}
@media (max-width: 640px) {
  .site-nav { font-size: 14px; }
  .wordmark { font-size: 0; gap: 0; }   /* na mobilu jen znak, text loga by vytlačil navigaci */
  .site-footer__kredit { margin-left: 0; text-align: left; }   /* pod sebou, ne zarovnané doprava */
  .kanaly ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kanal { padding: 14px; }
  .kanal__kde { font-size: 15px; }

  .text { font-size: 18px; }
  .text > p:first-child { font-size: 20px; }
  .text h2 { font-size: 28px; }
  .text figure .plocha { padding: 28px; }
  .text figure img { width: 70%; }

  /* dva sloupce, první fotka přes oba */
  .fotky { grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 38vw; }
  .fotky a { grid-column: span 1; }
  .fotky a:first-child { grid-column: span 2; grid-row: span 2; }
  .fotky a:nth-child(even):last-child { grid-column: span 2; }
  .radky li { gap: 12px; }
  .radky .rok { flex-basis: 2.9em; font-size: 16px; }
  .radky .kdo { display: block; margin-left: 0; }
  .alba .pozn { display: none; }
  /* ve sloupcích jde poznámka pod jméno: vedle sebe na jméno zbývalo i jen 63 px a zasahovalo do ní */
  .sloupce .radky li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); gap: 2px 12px; }
  .sloupce .radky .pozn { grid-column: 2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  /* !important je tu nutné: pravidla s přechodem mají vyšší specificitu než univerzální selektor a vyhrála by */
  * { transition-duration: 0s !important; }
}