/* Český hokej · Atlas fondu hráčů
 * ──────────────────────────────────────────────────────────
 * Sport-analytics seriózní register, redesigned 2026-05-18.
 *
 * Color strategy: Committed. Navy (oklch ~0.32 0.075 250) is load-bearing;
 * oxblood (oklch ~0.45 0.13 28) is the secondary accent reserved for the CZE
 * row in benchmarks and the hero rank-pull. Cream remains the page surface.
 *
 * Typography: Spectral (display, body where dramatic) + Bricolage Grotesque
 * (body, UI labels) + JetBrains Mono (tabular cells, code). Reflex defaults
 * (Georgia, system sans) replaced.
 *
 * References that informed this register: Financial Times Visual Storytelling,
 * OECD Economic Outlook interactives, Reportér.cz long-form layout.
 */

/* =========================================================================
   Fonts loaded via <link> in HTML head for parallel network fetch.
   Static weights chosen for weasyprint PDF stability (no variable axis).
   ========================================================================= */

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
  /* Navy ramp (primary, load-bearing) */
  --navy-900: oklch(0.19 0.055 252);
  --navy-800: oklch(0.25 0.075 250);
  --navy-700: oklch(0.32 0.080 250);
  --navy-500: oklch(0.46 0.085 250);
  --navy-300: oklch(0.68 0.060 250);
  --navy-100: oklch(0.92 0.020 250);

  /* Cream ramp (warm page surface) */
  --cream-50:  oklch(0.985 0.006 78);
  --cream-100: oklch(0.96 0.014 75);
  --cream-200: oklch(0.92 0.022 72);

  /* Oxblood / terracotta (secondary accent — CZE highlight, rank pull) */
  --oxblood-700: oklch(0.46 0.135 28);
  --oxblood-500: oklch(0.58 0.140 32);
  --oxblood-200: oklch(0.88 0.060 30);

  /* Warm-tinted neutrals */
  --ink:       oklch(0.20 0.010 80);
  --ink-soft:  oklch(0.34 0.010 80);
  --muted:     oklch(0.50 0.008 80);
  --rule:      oklch(0.86 0.006 80);
  --rule-soft: oklch(0.93 0.004 80);

  /* On-navy text variants */
  --cream-on-navy:       oklch(0.97 0.014 75);
  --cream-on-navy-soft:  oklch(0.82 0.024 75);
  --cream-on-navy-muted: oklch(0.68 0.025 75);
  --navy-divider:        oklch(0.38 0.060 250);

  /* Semantic */
  --page-bg: var(--cream-50);
  --surface: oklch(1 0 0);
  --text:    var(--ink);
  --link:    var(--navy-700);
  --accent:  var(--navy-700);
  --accent-2: var(--oxblood-700);

  /* Typography */
  --font-display: "Spectral", "Source Serif 4", Cambria, Georgia, serif;
  --font-sans:    "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;

  /* Spacing scale (1.5× modular) */
  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 0.9rem;
  --space-4: 1.4rem;
  --space-5: 2.1rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 7rem;

  /* Layout */
  --container:      1080px;
  --container-wide: 1240px;
  --measure:        65ch;
  --measure-wide:   72ch;
}

/* =========================================================================
   Reset + base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-3); max-width: var(--measure); }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--link), transparent 65%);
  transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
a:hover { border-bottom-color: var(--link); }

strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--oxblood-200); color: var(--ink); }

/* =========================================================================
   Accessibility — skip link + focus
   ========================================================================= */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--navy-700);
  color: var(--cream-50);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  border-bottom: none;
}
.skip-link:focus { top: 0; }

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--oxblood-700);
  outline-offset: 3px;
  border-radius: 1px;
}

h2[id], h3[id] { scroll-margin-top: 2rem; }

/* =========================================================================
   Container utility (used inside each <section>)
   ========================================================================= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 max(1.4rem, 4vw);
}

/* =========================================================================
   Masthead — kicker + display title + meta strip
   ========================================================================= */
.report-header {
  padding: var(--space-7) 0 var(--space-3);
}
.masthead-kicker {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood-700);
  margin: 0 0 var(--space-3);
}
.masthead-kicker::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--oxblood-700);
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-0.15em);
}
.report-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.report-header h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--navy-700);
}
.masthead-subtitle {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 42ch;
}
.masthead-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (min-width: 720px) {
  .masthead-meta { grid-template-columns: repeat(3, auto); column-gap: var(--space-5); justify-content: start; }
}
.masthead-meta strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-feature-settings: "tnum";
  color: var(--ink);
  font-size: 1rem;
}

/* =========================================================================
   Hero band — drenched navy, oversize numeric anchor
   ========================================================================= */
.hero {
  background: var(--navy-900);
  color: var(--cream-on-navy);
  padding: var(--space-7) 0 var(--space-6);
  margin-top: var(--space-5);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% -10%, color-mix(in oklch, var(--oxblood-700), transparent 80%), transparent 55%),
    radial-gradient(ellipse at 10% 110%, color-mix(in oklch, var(--navy-500), transparent 75%), transparent 60%);
  pointer-events: none;
}
.hero > .container { position: relative; }

.hero-kicker {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-on-navy-muted);
  margin: 0 0 var(--space-5);
}
.hero-kicker::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--oxblood-500);
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-0.15em);
}

.hero h2 {
  /* DOM-level h2 carries semantic weight, but visually we lean on the kicker
     and numeric anchor below. Keep h2 minimal. */
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: end;
}
@media (min-width: 820px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.hero-num-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(5rem, 14vw, 11.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum", "lnum";
  color: var(--cream-on-navy);
}
.hero-num-unit {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--cream-on-navy-soft);
  max-width: 24ch;
}

.hero-lead {
  align-self: end;
  max-width: 42ch;
}
.hero-lead p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  color: var(--cream-on-navy);
  max-width: none;
}
.hero strong { color: var(--cream-on-navy); font-weight: 600; }
.hero-pull {
  color: var(--oxblood-500);
  font-weight: 700;
  font-style: normal;
}
.hero-sublead {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 400;
  line-height: 1.55;
  color: var(--cream-on-navy-soft) !important;
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-divider);
}
@media (min-width: 600px) {
  .hero-meta { grid-template-columns: repeat(3, 1fr); }
}
.hero-meta div { margin: 0; }
.hero-meta dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-on-navy-muted);
}
.hero-meta dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--cream-on-navy);
  font-feature-settings: "tnum", "lnum";
  line-height: 1.1;
}

/* =========================================================================
   Hero edition stamp — top-right cover-page marker
   Intelligence-brief convention: every brief carries its identity stamp
   (REPORT / Atlas / 2025-26 / edice 01 / MIT) so the document declares
   itself before its content does.
   ========================================================================= */
.hero-stamp {
  position: absolute;
  top: var(--space-5);
  right: max(1.4rem, calc((100vw - var(--container)) / 2 + 1.4rem));
  z-index: 2;
  padding: 0.55rem 0.85rem 0.5rem;
  background: oklch(0.155 0.05 252);
  border: 1px solid var(--navy-divider);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--cream-on-navy-muted);
  letter-spacing: 0.06em;
  text-align: right;
  max-width: 15rem;
}
.hero-stamp-line { margin: 0; max-width: none; }
.hero-stamp-line strong {
  color: var(--cream-on-navy);
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .hero-stamp {
    position: static;
    margin: 0 auto var(--space-4);
    max-width: max-content;
    text-align: left;
  }
}

/* =========================================================================
   Chapter divider — page-break between major sections
   Long-form intelligence briefs use chapters; we use them only between
   sections that mark a real shift in subject (II = AI vrstva, III =
   Metodologie). Chapter I is implicit in the hero, not labelled.
   ========================================================================= */
.chapter-divider {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-8) max(1.4rem, 4vw) var(--space-7);
  max-width: 56ch;
  margin: 0 auto;
}
.chapter-numeral {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(5rem, 12vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--navy-700);
  font-feature-settings: "lnum";
  max-width: none;
}
.chapter-mark {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--oxblood-700);
  margin: 0 auto var(--space-3);
}
.chapter-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  max-width: none;
}
.chapter-synopsis {
  margin: var(--space-3) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* =========================================================================
   Section scaffolding (exec-summary, methodology)
   ========================================================================= */
.exec-summary { padding: var(--space-7) 0 var(--space-6); }
.methodology  { padding: var(--space-7) 0 var(--space-5); }

/* Section immediately after a chapter divider already has the divider's
   bottom padding as breathing room; collapse its own top padding to
   avoid stacking double whitespace. */
.chapter-divider + section { padding-top: var(--space-3); }

/* The chapter divider visually carries the H2 role (large numeral, mark,
   title, synopsis). Hide the section's own h2 to avoid duplication, but
   keep it in DOM for TOC anchors and accessible outline. */
.chapter-divider + section > .container > h2:first-child {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.exec-summary h2,
.methodology h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: none;
  letter-spacing: -0.025em;
}
.exec-summary h2::before,
.methodology h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--navy-700);
  margin-bottom: var(--space-3);
}
.methodology h2::before { background: var(--oxblood-700); }

.exec-summary > .container > h2 + h3,
.methodology > .container > h2 + h3 {
  margin-top: var(--space-6);
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -0.012em;
  margin: var(--space-6) 0 var(--space-3);
  line-height: 1.25;
  max-width: 32ch;
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: var(--space-5) 0 var(--space-3);
}

/* =========================================================================
   Framing lead
   ========================================================================= */
.framing {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
  color: var(--ink-soft);
  max-width: 52ch;
}

/* =========================================================================
   Per-capita: CSS bar chart
   ========================================================================= */
.capita {
  margin: var(--space-4) 0 var(--space-3);
  border-top: 1px solid var(--rule);
}
.capita-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 520px) {
  .capita-row { grid-template-columns: 6rem minmax(0, 1fr) 3.5rem; gap: var(--space-2); }
}
.capita-country {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.capita-country .capita-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  margin-right: 0.5rem;
  letter-spacing: 0.03em;
}
.capita-bar {
  position: relative;
  height: 0.55rem;
  background: var(--cream-100);
  border-radius: 1px;
  overflow: hidden;
}
.capita-bar-fill {
  position: absolute;
  inset: 0;
  width: calc(min(var(--value), var(--max)) / var(--max) * 100%);
  background: var(--navy-700);
  transform-origin: left;
}
.capita-value {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "lnum";
  font-size: 1.15rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  line-height: 1;
}
.capita-row[data-highlight="cze"] {
  background: linear-gradient(to right, color-mix(in oklch, var(--oxblood-200), transparent 50%), transparent 70%);
  margin: 0 -0.6rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.capita-row[data-highlight="cze"] .capita-country,
.capita-row[data-highlight="cze"] .capita-value {
  color: var(--oxblood-700);
  font-weight: 700;
}
.capita-row[data-highlight="cze"] .capita-bar-fill {
  background: var(--oxblood-700);
}
.capita-row[data-highlight="cze"] .capita-code {
  color: var(--oxblood-700);
}

.capita-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 56ch;
}
.capita-note strong { color: var(--oxblood-700); }

/* =========================================================================
   Figures
   ========================================================================= */
figure { margin: var(--space-5) 0; }
.figure-bleed {
  /* Escape container ~8% on each side at wide viewports */
  margin-left: max(-8vw, calc(-1 * (100vw - var(--container)) / 4));
  margin-right: max(-8vw, calc(-1 * (100vw - var(--container)) / 4));
  margin-top: var(--space-6);
  margin-bottom: var(--space-5);
}
figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
}
figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--space-3);
  max-width: 60ch;
  /* When inside .figure-bleed, push caption back into the reading column */
}
.figure-bleed figcaption {
  padding-left: max(8vw, calc((100vw - var(--container)) / 4));
  padding-right: max(8vw, calc((100vw - var(--container)) / 4));
}

/* =========================================================================
   Observations — 3-up grid, large numeral prefix
   ========================================================================= */
.observations {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-4) 0 var(--space-6);
  counter-reset: obs;
}
@media (min-width: 820px) {
  .observations { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.observation {
  counter-increment: obs;
  padding-top: var(--space-3);
  border-top: 2px solid var(--navy-700);
}
.observation:nth-child(2) { border-top-color: var(--oxblood-700); }
.observation:nth-child(3) { border-top-color: var(--navy-500); }
.observation::before {
  content: counter(obs, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "tnum", "lnum";
  margin-bottom: var(--space-2);
}
.observation h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.observation p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: none;
}

/* =========================================================================
   Cluster list — typographic stack
   ========================================================================= */
.cluster-list {
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cluster-list dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.cluster-list dt:first-child { border-top: 2px solid var(--ink); }
.cluster-list dt .cluster-id {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--oxblood-700);
  background: var(--oxblood-200);
  padding: 0.18rem 0.55rem;
  border-radius: 1px;
  align-self: center;
}
.cluster-meta-inline {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
}
.cluster-list dd {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.cluster-top {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
}
.cluster-top::before {
  content: "Top ";
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* Tactical read: distinct from descriptive prose. Label-led with a top
   rule as anchor (no side-stripe — see absolute bans). Serif italic body
   signals "this is editorial interpretation layered on the measurement".
   The oxblood label is the semantic anchor, the indent the spatial cue. */
.cluster-tactical {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dotted var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}
.cluster-tactical-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood-700);
}

/* =========================================================================
   Footer role block
   ========================================================================= */
.role-block {
  margin: 0 0 var(--space-5);
  padding: var(--space-5) 0 var(--space-4);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  max-width: 64ch;
}
.role-kicker {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood-700);
  max-width: none;
}
.role-body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.role-author {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  max-width: none;
}
.role-author-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.role-author-contact {
  font-family: var(--font-sans);
  color: var(--muted);
  font-size: 0.85rem;
}
.role-author-contact a {
  color: var(--ink-soft);
  border-bottom-color: var(--rule);
}
.role-author-contact a:hover {
  color: var(--oxblood-700);
  border-bottom-color: var(--oxblood-700);
}

/* =========================================================================
   Tables — generic
   ========================================================================= */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-feature-settings: "tnum", "lnum";
  margin: var(--space-3) 0 var(--space-4);
}
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  vertical-align: baseline;
}
th {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--space-2);
}
td {
  font-size: 0.94rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
tbody tr:last-child td { border-bottom-color: var(--rule); }
table .muted { color: var(--muted); font-size: 0.85rem; }

.kv-table td:first-child {
  font-family: var(--font-display);
  font-weight: 500;
}
.kv-table td:not(:first-child) {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
}

/* =========================================================================
   Cohort gap tables (intl benchmark)
   ========================================================================= */
.cohort-table {
  margin: var(--space-3) 0 var(--space-4);
}
.cohort-table th:first-child,
.cohort-table td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.cohort-table th:not(:first-child),
.cohort-table td:not(:first-child) {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.cohort-table th:not(:first-child) {
  font-family: var(--font-sans);
}
.cohort-cze {
  background: color-mix(in oklch, var(--oxblood-200), transparent 65%);
  color: var(--oxblood-700) !important;
  font-weight: 700 !important;
}
.cohort-cell-n {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
}
.cohort-cell-median {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.cohort-cze .cohort-cell-n { color: var(--oxblood-700); }
.cohort-cze .cohort-cell-median { color: var(--oxblood-500); }

/* =========================================================================
   Movers tables — trajectory section
   ========================================================================= */
.movers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-4) 0 var(--space-6);
}
@media (min-width: 760px) {
  .movers-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.movers-col h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-2);
}
.movers-table { font-size: 0.9rem; }
.movers-table th {
  font-size: 0.66rem;
  padding-bottom: var(--space-1);
  border-bottom-color: var(--rule);
}
.movers-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.movers-table .arrow-up::before  { content: "↑"; color: var(--muted); margin-right: 0.35rem; }
.movers-table .arrow-down::before { content: "↓"; color: var(--muted); margin-right: 0.35rem; }

/* =========================================================================
   Methodology — formula box, code, loadings, sensitivity
   ========================================================================= */
.formula {
  font-family: var(--font-mono);
  background: var(--cream-100);
  padding: var(--space-3) var(--space-4);
  font-size: 0.92rem;
  margin: var(--space-4) 0;
  border-left: 2px solid var(--navy-700);
  /* NOTE: 2px border-left here is a typographic anchor on a CODE block, not a
     decorative side-stripe on a card. Code blocks legitimately use a gutter
     marker; the absolute ban is against thick colored stripes on cards/alerts. */
  max-width: var(--measure-wide);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--cream-100);
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
  color: var(--ink);
}

.loadings-table { font-size: 0.88rem; }
.loadings-table th { font-size: 0.66rem; }
.loadings-table td:nth-child(n+3) {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: right;
}
.loadings-table th:nth-child(n+3) { text-align: right; }

.sensitivity-table { font-size: 0.88rem; }
.sensitivity-table th { font-size: 0.66rem; }
.sensitivity-table td:nth-child(n+3) {
  font-family: var(--font-mono);
  text-align: right;
  font-weight: 500;
}
.sensitivity-table th:nth-child(n+3) { text-align: right; }
.sensitivity-table td:nth-child(2) { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.4; }

/* =========================================================================
   Limitations — tinted block, dignified
   ========================================================================= */
.limitations {
  background: var(--cream-100);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure-wide);
}
.limitations p { max-width: none; margin: 0 0 var(--space-3); }
.limitations p:last-child { margin-bottom: 0; }
.limitations strong {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-display);
}

/* =========================================================================
   Generic helpers
   ========================================================================= */
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.continue {
  margin: var(--space-6) 0;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--rule);
  max-width: none;
}

ul { padding-left: 1.2rem; max-width: var(--measure); }
li { margin: var(--space-1) 0; }
li strong { font-family: var(--font-display); font-weight: 600; }

/* =========================================================================
   AI / multimodal layer (Section A.5)
   ========================================================================= */
.ai-layer {
  padding: var(--space-7) 0 var(--space-6);
  background:
    linear-gradient(to bottom,
      color-mix(in oklch, var(--cream-100), transparent 40%),
      var(--page-bg) 85%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ai-layer h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.025em;
}
.ai-layer h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--oxblood-700);
  margin-bottom: var(--space-3);
}

/* LLM scout briefs: two-column display of full Claude-generated articles.
   Treated like editorial articles in a journal — display title, structured
   sections, no decorative chrome. Each brief is real Czech analytical
   prose, not a UI card. */
.llm-briefs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin: var(--space-5) 0 var(--space-5);
}
@media (min-width: 920px) {
  .llm-briefs { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-7); }
}
.llm-brief {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}
.llm-brief-head { margin-bottom: var(--space-2); }
.llm-brief-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink);
  text-transform: none;
}
.llm-brief-meta-line {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: none;
}
.llm-brief-body { font-family: var(--font-sans); }
.llm-brief-heading {
  margin: var(--space-4) 0 var(--space-1);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood-700);
}
.llm-brief-heading:first-child { margin-top: var(--space-2); }
.llm-brief-body p {
  margin: 0 0 var(--space-3);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
}
.llm-brief-body p:last-child { margin-bottom: 0; }
.llm-brief-body strong {
  font-weight: 600;
  color: var(--ink);
}
.llm-brief-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--cream-100);
  padding: 0.1rem 0.3rem;
  border-radius: 1px;
}

/* Reprezentační cyklus dashboard: per-player intelligence one-pagers.
   Each card synthesises five existing layers into one operational view
   the analytical team can consume on a single screen. */
.cycle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin: var(--space-5) 0 var(--space-5);
}
@media (min-width: 1100px) {
  .cycle-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
}
.cycle-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}
.cycle-card-head { margin-bottom: 0; }
.cycle-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink);
  text-transform: none;
}
.cycle-card-meta {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: none;
}

.cycle-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cycle-stats div { margin: 0; }
.cycle-stats dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cycle-stats dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  font-feature-settings: "tnum", "lnum";
  line-height: 1.1;
}

.cycle-cluster {
  display: grid;
  gap: var(--space-1);
}
.cycle-cluster-row {
  display: grid;
  grid-template-columns: 3.4rem 2.6rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
}
.cycle-cluster-tag {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cycle-cluster-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--oxblood-700);
  background: var(--oxblood-200);
  padding: 0.15rem 0.45rem;
  border-radius: 1px;
  text-align: center;
}
.cycle-cluster-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}

.cycle-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cycle-section-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood-700);
  max-width: none;
}

.cycle-tactical {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: none;
}

.cycle-traj {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--space-3);
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  max-width: none;
}
.cycle-traj-delta {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
.cycle-traj-dir {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cycle-traj-detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.cycle-analogs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  counter-reset: cyclean;
}
.cycle-analogs li {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  align-items: baseline;
  gap: 0.45rem;
  counter-increment: cyclean;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}
.cycle-analogs li::before {
  content: counter(cyclean);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.cycle-analog-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.cycle-analog-country {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  background: var(--cream-100);
  padding: 0.08rem 0.35rem;
  color: var(--ink-soft);
  justify-self: end;
  margin-left: 0.3rem;
}
.cycle-analog-stats {
  grid-column: 2 / -1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.cycle-brief-excerpt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
}

/* Historical analogs */
.analog-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
@media (min-width: 880px) {
  .analog-block { grid-template-columns: 220px 1fr; gap: var(--space-5); }
}
.analog-target {
  font-family: var(--font-sans);
}
.analog-label {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood-700);
  max-width: none;
}
.analog-name {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--ink);
  max-width: none;
}
.analog-stats {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: none;
}
.analog-cohort {
  margin: var(--space-2) 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  max-width: none;
}
.analog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.analog-row {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.analog-row:last-child { border-bottom: none; }
.analog-row-head {
  display: grid;
  grid-template-columns: 1.5rem auto auto 1fr;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.93rem;
}
.analog-rank {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.analog-row-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.analog-row-country {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  background: var(--cream-100);
  padding: 0.1rem 0.4rem;
  color: var(--ink-soft);
}
.analog-row-context {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .analog-row-head { grid-template-columns: 1.2rem 1fr; }
  .analog-row-context { grid-column: 1 / -1; text-align: left; padding-left: 1.8rem; }
  .analog-row-country { justify-self: end; }
}
.analog-row-trajectory {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: var(--space-1);
  padding-left: 2.3rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .analog-row-trajectory { padding-left: 1.8rem; }
}
.analog-traj-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.analog-traj-step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.analog-traj-detail { color: var(--muted); font-size: 0.74rem; }

/* Video PoC: real output from YOLOv8 inference on Extraliga broadcast.
   Same block treatment as .roadmap-mockup but real output, so the
   visual frame is the actual annotated JPEG + heatmap PNG, not an
   inline SVG schematic. */
.video-poc {
  margin: var(--space-4) 0 var(--space-6);
  background: var(--cream-100);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--rule);  /* full border, not dashed: this is real */
}
.video-poc .roadmap-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood-700);
}
.video-poc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 720px) {
  .video-poc-grid { grid-template-columns: 1.78fr 1fr; gap: var(--space-4); }
}
.video-poc-frame { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.video-poc-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.video-poc-figlabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: none;
}
.video-poc-timeline {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-3) 0;
  background: var(--cream-50);
  border: 1px solid var(--rule);
}
.video-poc-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  margin: 0 0 var(--space-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .video-poc-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .video-poc-metrics { grid-template-columns: repeat(6, 1fr); }
}
.video-poc-metrics div { margin: 0; }
.video-poc-metrics dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.video-poc-metrics dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  font-feature-settings: "tnum", "lnum";
  line-height: 1.1;
}

/* Roadmap mockups */
.roadmap-mockup {
  margin: var(--space-4) 0 var(--space-6);
  background: var(--cream-100);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px dashed var(--rule);
}
.roadmap-mockup .roadmap-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood-700);
}
.roadmap-rink,
.roadmap-buzz {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  margin: 0 auto var(--space-3);
}
.roadmap-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  text-align: left;
  max-width: 64ch;
  padding: 0;
}
.roadmap-caption:last-child { margin-bottom: 0; }
.roadmap-caption strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: var(--oxblood-700);
}
.roadmap-caption em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

/* =========================================================================
   TOC — sticky desktop, collapsible mobile
   ========================================================================= */
.toc-sticky { display: none; }
@media (min-width: 1280px) {
  .toc-sticky {
    display: block;
    position: fixed;
    top: 2rem;
    right: max(1rem, calc((100vw - var(--container)) / 2 - 220px));
    width: 195px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--space-3) var(--space-3);
    background: var(--cream-100);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.5;
    border-radius: 1px;
    z-index: 50;
  }
  .toc-sticky .toc-heading {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oxblood-700);
  }
  .toc-sticky ol { list-style: none; padding: 0; margin: 0; }
  .toc-sticky ol ol { margin: 0.2rem 0 0.6rem 0.8rem; padding: 0; }
  .toc-sticky li > a {
    display: block;
    padding: 0.12rem 0;
    color: var(--ink);
    text-decoration: none;
    border-bottom: none;
  }
  .toc-sticky li > a:hover { color: var(--oxblood-700); }
  .toc-sticky > ol > li > a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: var(--space-2);
  }
  .toc-sticky ol ol li > a {
    color: var(--muted);
    font-size: 0.76rem;
  }
  /* Toggle button: sits flush in the corner; rotates a single chevron
     glyph to communicate collapse/expand state without an icon font. */
  .toc-toggle {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    color: var(--muted);
    transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .toc-toggle:hover { color: var(--oxblood-700); background: var(--cream-200); }
  .toc-toggle:focus-visible { outline: 2px solid var(--oxblood-700); outline-offset: 2px; }
  .toc-toggle-glyph {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);  /* points right by default */
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Expanded state: chevron points left (toward content), inviting collapse */
  .toc-sticky:not([data-collapsed="true"]) .toc-toggle-glyph {
    transform: rotate(-135deg);
  }

  /* Collapsed state: shrink the entire TOC to a thin pill showing only
     the toggle. Animates width so the transition reads as fold-up. */
  .toc-sticky[data-collapsed="true"] {
    width: 2.4rem;
    padding: 0.5rem;
    overflow: hidden;
  }
  .toc-sticky[data-collapsed="true"] .toc-heading,
  .toc-sticky[data-collapsed="true"] ol {
    display: none;
  }
  .toc-sticky[data-collapsed="true"] .toc-toggle {
    position: static;
    margin: 0 auto;
  }
}
@media (max-width: 1279px) {
  /* Hide toggle when sticky TOC isn't visible (mobile uses <details>) */
  .toc-toggle { display: none; }
}

.toc-mobile {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-100);
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.toc-mobile summary {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood-700);
}
.toc-mobile ol {
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}
.toc-mobile li { margin: var(--space-1) 0; }
.toc-mobile a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.toc-mobile a:hover { color: var(--oxblood-700); }
@media (min-width: 1280px) { .toc-mobile { display: none; } }

/* =========================================================================
   Footer
   ========================================================================= */
footer {
  padding: var(--space-7) 0 var(--space-5);
  margin-top: var(--space-7);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--muted);
}
footer p { max-width: none; margin: 0 0 var(--space-2); }
footer a { color: var(--ink-soft); border-bottom-color: var(--rule); }
footer a:hover { border-bottom-color: var(--ink); }
.rendered-at {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* =========================================================================
   Print / PDF (weasyprint)
   ========================================================================= */
@media print {
  :root { --page-bg: #fdfdfc; }
  body { font-size: 10.5pt; line-height: 1.4; color: #1a1a1a; }
  .toc-sticky, .toc-mobile, .skip-link { display: none !important; }
  .hero {
    background: transparent !important;
    color: var(--ink) !important;
    padding: 1rem 0;
    margin: 0;
  }
  .hero::before { display: none; }
  .hero-kicker { color: var(--oxblood-700); }
  .hero-num-figure { color: var(--ink); font-size: 4.5rem; }
  .hero-num-unit, .hero-lead p, .hero-meta dt, .hero-meta dd { color: var(--ink) !important; }
  .hero-lead p { font-size: 1rem; }
  .hero-pull { color: var(--oxblood-700); }
  .hero-meta { border-top-color: var(--rule); }
  .hero-meta dd { font-size: 1.05rem; }
  h2 { page-break-after: avoid; }
  figure, .hero-figure, .observation, .cluster-list dt, .cluster-list dd {
    page-break-inside: avoid;
  }
  .figure-bleed { margin-left: 0; margin-right: 0; }
  .figure-bleed figcaption { padding: 0; }
  .observations { grid-template-columns: 1fr 1fr 1fr; }
  .movers-grid { grid-template-columns: 1fr 1fr; }
}