/* ==== tokens.css ==== */
/* Design tokens — loaded first, before styles.css and baltic.css.
   Rules: docs/design-system.md. Audit of the values: docs/design-audit.md.

   Every value here is one the site already used; nothing was rounded. The
   old names (--bg, --ink, --blue, --amber, --shadow-soft…) stay and point
   here from baltic.css.

   Colours come in two layers:
   - palette (--c-sea, --c-white…): fixed, the same in both themes — what a
     raw hex in a rule is replaced with;
   - roles (--c-bg, --c-text, --c-accent…): switch with the theme below. */

:root {
  /* ── Palette: fixed colours ─────────────────────────────────────────── */
  --c-white: #fff;
  --c-black: #000;
  --c-sea: #0d1b2a;          /* deep sea: header, buttons, ink */
  --c-steel: #2c4257;        /* steel blue: soft ink, rules */
  --c-fog: #8fa3b0;          /* fog: secondary text, draws */
  --c-amber: #d99a2b;        /* amber: rules, strips, underlines */
  --c-amber-deep: #8f5f0c;   /* amber for text on light backgrounds */
  --c-amber-light: #f0c069;  /* amber in the dark theme, logo mark */
  --c-brick: #7d3b2e;        /* brick: losses, history */
  --c-cream: #fbf6ec;        /* light ink on dark buttons */
  --c-night: #08121c;        /* dark theme page */
  --c-night-card: #0f1e2c;   /* dark theme solid card */
  --c-night-strong: #16283a; /* dark theme strong accent */
  --c-green: #1f9d55;
  --c-green-deep: #157a41;
  --c-green-light: #2eb86a;
  --c-danger: #d64545;          /* wrong answer in the games */
  /* Colours of the removed "classic" design that a few rules still use:
     .sc-art, .sc-cap, .ph-face, the quiz cards and .tx-fee sup */
  --c-navy: #102033;
  --c-classic-blue: #0a4f9f;
  --c-classic-yellow: #ffc845;
  --c-classic-muted: #65758a;

  /* ── Roles: light theme ─────────────────────────────────────────────── */
  --c-bg: #eef1f4;
  --c-bg-soft: #f7f8f9;
  --c-bg-tint: rgba(44, 66, 87, 0.07);
  --c-bg-gradient:
    radial-gradient(circle at top right, rgba(217, 154, 43, 0.14), transparent 30rem),
    linear-gradient(180deg, #f3f5f7 0%, #e9edf1 55%, #eef1f4 100%);
  --c-header-bg: rgba(238, 241, 244, 0.88);
  --c-surface: rgba(250, 251, 252, 0.92);
  --c-surface-solid: var(--c-white);
  --c-text: var(--c-sea);
  --c-text-soft: var(--c-steel);
  --c-muted: #5d7080;
  --c-line: rgba(44, 66, 87, 0.16);
  --c-accent: var(--c-steel);        /* «Балтика» accent (old --blue) */
  --c-accent-strong: var(--c-sea);   /* old --blue-dark */
  --c-on-accent: var(--c-cream);     /* old --accent-ink */
  --c-gold: var(--c-amber);
  --c-gold-text: var(--c-amber-deep);
  --c-link: var(--c-amber-deep);     /* old --accent */

  /* ── Roles: meaning ─────────────────────────────────────────────────── */
  --c-win: var(--c-green);
  --c-win-text: var(--c-green-deep);
  --c-draw: var(--c-fog);
  --c-loss: #c8473a;         /* только заливки с белым значком: в тёмной теме
                                3,97:1 к фону, для текста не использовать —
                                текстовые поражения остаются на --c-brick */
  /* No separate warning colour on the site: notices (a stale table) use gold. */
  --c-warning: var(--c-gold-text);
  --c-focus: var(--c-accent);

  /* ── History: eras and divisions ────────────────────────────────────── */
  /* --era-*: text accent on the chapter wash (≥4.5:1); -base: the swatch the
     wash is mixed from; -bg: the wash in the light theme; -night: the text
     accent in the dark theme. Stickers print the light accent in both. */
  --era-sepia: #82643b;  --era-sepia-base: var(--era-sepia);  --era-sepia-bg: #f6f0e6;  --era-sepia-night: #a78f6f;
  --era-brick: #8a3a2b;  --era-brick-base: #8a3a2b;  --era-brick-bg: #f7ece9;  --era-brick-night: #b17b71;
  --era-gold: #8d6518;   --era-gold-base: #a8781c;   --era-gold-bg: #faf3e3;   --era-gold-night: #be9a55;
  --era-slate: #3f5872;  --era-slate-base: #3f5872;  --era-slate-bg: #edf1f5;  --era-slate-night: #7b8c9e;
  --era-blue: #0a4f9f;   --era-blue-base: #0a4f9f;   --era-blue-bg: #eaf1fa;   --era-blue-night: #608dc1;
  /* Division bars in the seasons table follow the theme; the printed
     stickers keep fixed colours. */
  --tier-1: var(--c-gold);
  --tier-2: var(--c-accent);
  --tier-3: var(--c-fog);
  --tier-4: var(--c-brick);
  --tier-1-print: #e0a419;
  --tier-2-print: #0a4f9f;
  --tier-3-print: #7b8c9e;
  --tier-4-print: #7d3b2e;

  /* ── Spacing: 10 steps ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;   /* old --radius: cards */
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 3px 8px rgba(13, 27, 42, 0.14);
  --shadow-md: 0 14px 40px rgba(13, 27, 42, 0.1);   /* old --shadow-soft */
  --shadow-lg: 0 22px 60px rgba(13, 27, 42, 0.12);  /* old --shadow */

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-body: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --fs-2xs: 0.68rem;
  --fs-xs: 0.72rem;
  --fs-caption: 0.78rem;
  --fs-label: 0.8rem;
  --fs-sm: 0.82rem;
  --fs-note: 0.85rem;
  --fs-meta: 0.9rem;
  --fs-ui: 0.92rem;
  --fs-body-sm: 0.95rem;
  --fs-body: 1rem;
  --fs-lead: 1.1rem;
  --fs-h4: 1.15rem;
  --fs-h3: 1.3rem;
  --fs-h3-lg: 1.6rem;
  --fs-display: 2rem;
  --fs-h2: clamp(1.75rem, 3.4vw, 2.9rem);
  --fs-h1: clamp(2.3rem, 4.6vw, 4.2rem);
  --lh-h1: 1.04;
  --lh-h2: 1.08;
  --lh-tight: 1.15;
  --lh-snug: 1.2;
  --lh-ui: 1.3;
  --lh-normal: 1.4;
  --lh-text: 1.45;
  --lh-body: 1.5;
  --lh-page: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-short: 0.15s;
  --dur-base: 0.2s;
  --dur-medium: 0.25s;
  --dur-long: 0.35s;
  --ease: ease;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1.2);
  --ease-spring-strong: cubic-bezier(0.2, 0.8, 0.2, 1.4);

  /* ── Layers ─────────────────────────────────────────────────────────── */
  /* The lightbox and the calendar menu are <dialog>/popover-free blocks in
     the top layer or in normal flow; they need no z-index. */
  --z-below: -1;
  --z-raised: 1;          /* a layer over its own card: covers, labels, sticky cells */
  --z-raised-2: 2;
  --z-raised-3: 3;        /* menus over the next card: calendar links, suggestions */
  --z-era-bar: 5;
  --z-header: 10;
  --z-skip-link: 20;
  --z-sheet: 30;          /* the season card sheet on /history/, reading progress */
  --z-consent: 50;
  --z-toast: 60;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-bg: var(--c-night);
  --c-bg-soft: var(--c-sea);
  --c-bg-tint: rgba(240, 192, 105, 0.07);
  --c-bg-gradient:
    radial-gradient(circle at top right, rgba(240, 192, 105, 0.1), transparent 28rem),
    linear-gradient(180deg, #08121c 0%, var(--c-sea) 60%, #08121c 100%);
  --c-header-bg: rgba(8, 18, 28, 0.86);
  --c-surface: rgba(16, 32, 47, 0.92);
  --c-surface-solid: var(--c-night-card);
  --c-text: #eef1f4;
  --c-text-soft: #c3cfd9;
  --c-muted: var(--c-fog);
  --c-line: rgba(143, 163, 176, 0.22);
  --c-accent: var(--c-amber-light);
  --c-accent-strong: var(--c-night-strong);
  --c-gold: var(--c-amber-light);
  --c-gold-text: var(--c-amber-light);
  --c-link: var(--c-amber-light);
  --c-win: var(--c-green-light);
  --c-win-text: var(--c-green-light);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* The system dark theme repeats the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: var(--c-night);
    --c-bg-soft: var(--c-sea);
    --c-bg-tint: rgba(240, 192, 105, 0.07);
    --c-bg-gradient:
      radial-gradient(circle at top right, rgba(240, 192, 105, 0.1), transparent 28rem),
      linear-gradient(180deg, #08121c 0%, var(--c-sea) 60%, #08121c 100%);
    --c-header-bg: rgba(8, 18, 28, 0.86);
    --c-surface: rgba(16, 32, 47, 0.92);
    --c-surface-solid: var(--c-night-card);
    --c-text: #eef1f4;
    --c-text-soft: #c3cfd9;
    --c-muted: var(--c-fog);
    --c-line: rgba(143, 163, 176, 0.22);
    --c-accent: var(--c-amber-light);
    --c-accent-strong: var(--c-night-strong);
    --c-gold: var(--c-amber-light);
    --c-gold-text: var(--c-amber-light);
    --c-link: var(--c-amber-light);
    --c-win: var(--c-green-light);
    --c-win-text: var(--c-green-light);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

/* ==== styles.css ==== */
* {
  box-sizing: border-box;
}

/* The hidden attribute wins over any display a class sets (flex, grid):
   scripts toggle hidden on such boxes. Deliberate exceptions use a more
   specific selector with !important (the /stadium/ noscript block). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-gradient) var(--bg);
  color: var(--ink);
  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  line-height: var(--lh-page);
}

a {
  color: inherit;
}

.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.container-narrow {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 0;
  z-index: var(--z-skip-link);
  /* Off screen by its own height, whatever the text size or wrapping. */
  transform: translateY(-120%);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  transition: transform var(--dur-base) var(--ease);
}

.skip-link:focus {
  transform: translateY(16px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: blur(18px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

/* A sticky header taller than the screen (landscape phone, large text) would
   leave the last menu links out of reach. */
.site-header.is-menu-open {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.matchday-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: 9px var(--space-5) /* token? */;
  background: var(--blue-dark);
  color: var(--c-white);
  font-size: var(--fs-ui);
  text-decoration: none;
}

.matchday-strip:hover .matchday-cta,
.matchday-strip:focus-visible .matchday-cta {
  text-decoration: underline;
}

.matchday-when {
  color: var(--amber);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-caption);
}

.matchday-cta {
  color: var(--amber);
  font-weight: var(--fw-bold);
}

.nav-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px /* token? */;
  padding: var(--space-3) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 950 /* token? */;
  line-height: 0.92 /* token? */;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--blue-dark);
  color: var(--amber);
  box-shadow: inset 0 -4px 0 rgba(255, 200, 69, 0.22) /* token? */;
  /* A logo: fixed like its 52px box, so enlarged text does not spill out. */
  font-size: 16px /* token? */;
}

.brand-text {
  letter-spacing: -0.04em;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  font-weight: var(--fw-heavy);
}

.site-nav a {
  white-space: nowrap;
}

.site-nav a,
.text-link,
.site-footer a {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.site-nav a[aria-current] {
  color: var(--blue);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-switch {
  display: inline-flex;
  padding: 3px /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
}

.lang-switch a {
  padding: 7px 11px /* token? */;
  border-radius: var(--radius-pill);
  color: var(--muted);
  text-decoration: none;
}

.lang-switch a[aria-current="true"] {
  background: var(--blue-dark);
  color: var(--accent-ink);
}

.lang-switch a:not([aria-current="true"]):hover,
.lang-switch a:not([aria-current="true"]):focus-visible {
  color: var(--ink);
}

.menu-toggle,
.theme-toggle,
.search-link,
.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.menu-toggle {
  display: none;
}

.menu-toggle .icon-menu {
  display: none;
  width: 18px;
  height: 18px;
}

/* Seven links do not fit in one row next to the brand and the header
   buttons below 75em (1200px at the default text size, wider when the
   reader enlarges text): they go behind the «Menu» button there. */
@media (max-width: 75em) {
  .nav-wrap {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .header-actions {
    justify-self: end;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    order: 3;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) 0 var(--space-2);
  }

  .site-nav.is-open {
    display: flex;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.search-link svg {
  width: 18px;
  height: 18px;
}

.search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  text-decoration: none;
}

.search-link:hover,
.search-link:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px /* token? */;
  border: 2px solid var(--blue-dark);
  border-radius: var(--radius-pill);
  background: var(--blue-dark);
  color: var(--accent-ink);
  /* font: inherit — настоящие <button> (согласие, тосты, игры) набираются тем
     же шрифтом, что и кнопки-ссылки, а не системным Arial браузера.
     Насыщенность ниже переопределяет унаследованную. */
  font: inherit;
  font-weight: var(--fw-black);
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(9, 45, 99, 0.18) /* token? */;
}

/* .sg-hover — замороженный образец наведения на витрине /styleguide/. */
.button:hover,
.button:focus-visible,
.sg-hover.button {
  transform: translateY(-1px);
}

.button-small {
  min-height: 40px;
  padding: 0 var(--space-4);
}

.button-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.hero {
  padding: 72px 0 var(--space-8) /* token? */;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--blue);
  font-size: var(--fs-caption);
  font-weight: 950 /* token? */;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 820px;
  margin-bottom: var(--space-4);
  font-size: clamp(2.6rem, 5.2vw, 4.8rem) /* token? */;
  line-height: 0.95 /* token? */;
  letter-spacing: -0.05em;
  overflow-wrap: break-word;
  hyphens: manual;
}

.hero-copy {
  min-width: 0;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.4rem) /* token? */;
  line-height: 1 /* token? */;
  letter-spacing: -0.055em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.62rem) /* token? */;
  line-height: 1.12 /* token? */;
  letter-spacing: -0.035em;
}

.lead {
  max-width: 680px;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.35rem) /* token? */;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* The 404 and offline pages reuse the hero spacing. */
@media (min-width: 861px) {
  .hero {
    padding-top: var(--space-8);
  }
}

/* Front page, first screen: what the site is, the main button and the lead
   article side by side (5/12 and 7/12). Not stretched to the window — the
   «Now» block below has to show its top as a sign there is more. */
.hh {
  padding: 28px 0 var(--space-7) /* token? */;
}

.hh-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px /* token? */;
  align-items: center;
}

.hh-copy {
  min-width: 0;
}

.hh h1 {
  /* Слоган не крупнее заголовка главного материала (ТЗ MR 4): тот же
     наклон 2.4vw и тот же потолок 2rem, что у .lead-card-body h2, нижняя
     граница — токеном ниже минимума заголовка (1.3rem < 1.5rem), поэтому
     слоган ≤ заголовка на любой ширине двух колонок. Прежний
     clamp(2.4rem, 4.4vw, 3.9rem) был в 1.6–2 раза крупнее и с ~1323px
     выталкивал «заканчиваются.» за колонку (до +32px на ≥1419px). */
  font-size: clamp(var(--fs-h3), 2.4vw, var(--fs-display));
  /* Слоган переносится только между словами: аварийный break-word из h1
     рвал «заканчиваются.», оставляя точку в начале строки (!270). С новым
     размером слово (~247px на потолке) помещается в колонку (448px) на
     всех ширинах и правило не несёт нагрузки, но остаётся страховкой:
     вернись разрыв — вернётся и одинокая точка. */
  overflow-wrap: normal;
}

.hh-sub {
  max-width: 32em;
  margin: 0 0 22px /* token? */;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem) /* token? */;
  line-height: var(--lh-body);
}

.hh .hero-actions {
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: 0;
}

.hh-about {
  font-weight: var(--fw-heavy);
}

.hh-trust {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: 0.86rem /* token? */;
  line-height: var(--lh-body);
}

.hh-trust a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hh-trust a:hover,
.hh-trust a:focus-visible {
  color: var(--ink);
}

/* The about link and the trust line sit under the button on a wide screen
   and under the lead card on a phone: both copies are in the markup, one is
   shown, so the tab order is what the reader sees. */
.hh-narrow {
  display: none;
}

.hh-media {
  aspect-ratio: 2 / 1;
  background: var(--cover-bg, var(--blue-dark));
}

.hh-media picture {
  display: block;
  height: 100%;
}

.hh .hh-media img {
  height: 100%;
}

.hh .lead-card-body {
  padding: 22px 26px var(--space-6) /* token? */;
}

.hh .lead-card-body > p:not(.eyebrow):not(.lead-note) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Редакционная подводка к главному материалу (content/home_lead.json):
   короткая заметка под лидом, видна целиком — проверка длины в validate.py,
   а не line-clamp. Поверх растянутой ссылки карточки, чтобы её собственная
   ссылка нажималась, как и ссылки в .card-foot. */
.lead-note {
  position: relative;
  z-index: var(--z-raised);
  margin: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--amber);
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

@media (max-width: 1023px) {
  .hh-media {
    aspect-ratio: 16 / 9;
  }

  .hh-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 28px /* token? */;
  }

  .hh .lead-card-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}

@media (max-width: 720px) {
  .hh {
    padding: var(--space-6) 0 var(--space-7);
  }

  /* Одна колонка: наклон 2.4vw здесь даёт меньше нижней границы clamp,
     слоган берёт потолок — 2rem, на треть меньше прежних 2.4rem. */
  .hh h1 {
    font-size: var(--fs-display);
  }

  .hh-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .hh-wide {
    display: none;
  }

  .hh-narrow {
    display: block;
  }

  .hh-narrow .hh-trust {
    margin-top: var(--space-3);
  }

  .hh-media {
    aspect-ratio: 3 / 2;
  }

  .hh .lead-card-body > p:not(.eyebrow) {
    -webkit-line-clamp: 4;
  }
}

/* The shared card surface: border, radius, background, shadow — nothing
   else (no height, padding, display, overflow or hover lift: those belong
   to each family). .quiz-frame joins by selector, not by class: the game
   frame is built by quiz.js, and the games stay untouched in this MR. */
.card,
.quiz-frame {
  border: 1px solid var(--line);
  border-radius: 32px /* token? */;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.lead-card {
  position: relative;
  overflow: hidden;
}

.lead-media,
.card-media {
  display: block;
  overflow: hidden;
  background: var(--blue-dark);
}

/* Lead featured cover: keep the full frame. Many Sports.ru / designed
   covers are 16:9 with edge text; forcing 3:2 + object-fit:cover was
   cropping logos and headlines on the sides. No aspect-ratio here: the
   width/height attributes hold the cover's own size, and the browser's
   ratio from them is what keeps the space while the picture loads. */
.lead-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  transition: transform var(--dur-long) var(--ease);
}

.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform var(--dur-long) var(--ease);
}

/* Covers that are not 3:2 (16:9 designed covers with type at the edges,
   square and portrait ones) fit inside the frame on a background sampled
   from the picture's own edges (--cover-bg, set by build.py). Only the
   near-3:2 covers, which cover loses nothing from, keep object-fit: cover. */
.card-media-fit {
  background: var(--cover-bg, var(--blue-dark));
}

.card-media-fit img {
  object-fit: contain;
  object-position: center center;
}

.lead-card:hover .lead-media img {
  /* Designed covers often put type at the edges — don't crop them on hover. */
  transform: none;
}

.article-card:hover .card-media img {
  transform: scale(1.03);
}

.lead-media {
  border-bottom: 6px solid var(--amber);
}

.lead-card-body {
  padding: 28px /* token? */;
}

.lead-card-body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) /* token? */;
  line-height: var(--lh-h2);
}

.lead-card-body h2 .card-link {
  text-decoration: none;
}

.lead-card-body h2 .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lead-card-body h2 .card-link:hover {
  text-decoration: underline;
}

.card-foot {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin-top: auto;
}

.card-source {
  color: var(--blue);
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.section {
  padding: 74px 0 /* token? */;
}

.section-tint {
  background: var(--bg-tint);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: 28px /* token? */;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.match-card,
.rubric-card {
  padding: var(--space-6);
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px var(--space-6) var(--space-6) /* token? */;
}

.card-body h2,
.card-body h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem) /* token? */;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.card-body p:not(.eyebrow) {
  margin-bottom: var(--space-4);
}

/* The shared pill base: geometry and typography only. The meaning — colour,
   size, spacing — stays with the modifier, so a format pill and a season
   status never trade looks by accident. */
.badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* The form of the text («Разбор», «Портрет»…) — a small pill in front of
   the rubric, so a grid of cards reads as a mix of formats at a glance. */
.badge-format {
  padding: 1px var(--space-2) 2px /* token? */;
  background: var(--amber);
  color: var(--c-navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.card-meta .badge-format {
  font-size: 0.66rem /* token? */;
}

.card-hook {
  color: var(--ink-soft);
}

.cards-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards-grid-4 .card-body h3 {
  font-size: 1.12rem /* token? */;
}

.section-head .lead {
  margin: var(--space-3) 0 0;
  font-size: 1.05rem /* token? */;
}

.section-head > .text-link {
  flex-shrink: 0;
  white-space: nowrap;
}

.section-flush {
  padding-top: var(--space-6);
}

.article-card:hover,
.rubric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.article-card .card-link {
  text-decoration: none;
}

.article-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.article-card .card-link:focus-visible::after {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.article-card time,
.card-meta {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
}

.article-card p:not(.eyebrow),
.match-card p,
.about-copy,
.cta-box p,
.site-footer p,
.rubric-card p {
  color: var(--muted);
}

.rubric-card {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  text-decoration: none;
}

/* Player and topic cards: the count/date line sits on the same baseline
   across a row whatever the length of the name and blurb above it. */
.rubric-card .card-meta {
  display: block;
  margin-top: auto;
  padding-top: var(--space-3);
}

.rubric-card h3,
.rubric-card h2 {
  margin-bottom: var(--space-2);
}

/* Topic cards use h2 for a correct outline but keep the card-heading size. */
.rubric-card h2 {
  font-size: clamp(1.25rem, 2vw, 1.62rem) /* token? */;
  line-height: 1.12 /* token? */;
  letter-spacing: -0.035em;
}

.rubric-card p {
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.chip[aria-pressed="true"] {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--accent-ink);
}

.archive-more {
  margin: 28px 0 0 /* token? */;
  text-align: center;
}

.empty-note {
  color: var(--muted);
}

.archive-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  margin-bottom: var(--space-2);
}

.archive-tools .chips {
  margin: 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 280px;
  max-width: 420px;
  padding: 0 var(--space-3);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.search-box:focus-within {
  border-color: var(--blue);
  color: var(--blue);
}

.search-box svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.search-input,
.tg-search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 0 /* token? */;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem /* token? */;
}

.search-input:focus,
.tg-search-input:focus {
  outline: none;
}

.search-input::-webkit-search-cancel-button,
.tg-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.search-count {
  min-height: 1.4em;
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--fs-ui);
}

.search-count:empty {
  margin-bottom: var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px /* token? */;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Горизонтальная лента со скрытыми подписями для скринридеров обязана быть
   их containing block: .visually-hidden позиционирован абсолютно, и без
   position: relative на ленте спаны привязываются к странице, выходят из-под
   обрезки скролла и растягивают весь документ вбок (на телефоне 375px
   лента состава на главной растягивала страницу до 1006px). */
.hs-list,
.table-wrap,
.squad-nav ul {
  position: relative;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem /* token? */;
}

.results-table th,
.results-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.results-table th {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-tint);
}

.results-table tr:last-child td {
  border-bottom: 0;
}

.results-table td a:not(.text-link) {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.results-table td a:not(.text-link):hover {
  color: var(--blue);
}

.results-table .is-upcoming td {
  color: var(--ink-soft);
}

.results-table sup {
  margin-left: 2px /* token? */;
  color: var(--muted);
}

/* Transfers: every move is a card. The coloured top band says the
   direction at a glance (green in, red out, slate fell through); the route
   line shows club → club with crests; the fee is a price tag. White text on
   each band colour is at least 4.9:1. */
.transfers-window + .transfers-window {
  margin-top: 56px /* token? */;
}

.tx-board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.tx-board li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgb(var(--tx-a)), rgb(var(--tx-b))) /* token? */;
  color: var(--c-white);
  box-shadow: 0 12px 26px -16px rgb(var(--tx-a)) /* token? */;
}

.tx-board strong {
  font-family: var(--font-display, inherit);
  font-size: 2.2rem /* token? */;
  line-height: 1 /* token? */;
}

.tx-board span {
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
}

.tx-in,
.tx-board-in,
.tx-group-in {
  --tx-a: 12 92 58;
  --tx-b: 22 128 80;
}

.tx-out,
.tx-board-out,
.tx-group-out {
  --tx-a: 146 38 34;
  --tx-b: 186 62 50;
}

.tx-none,
.tx-board-none,
.tx-group-none {
  --tx-a: 52 63 84;
  --tx-b: 78 90 114;
}

.transfers-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 34px 0 var(--space-3) /* token? */;
  font-size: var(--fs-h3);
}

.transfers-group::before {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  background: rgb(var(--tx-b)) /* token? */;
  box-shadow: 0 0 0 5px rgb(var(--tx-b) / 0.18) /* token? */;
  content: "";
}

.transfers-group span {
  padding: 2px var(--space-3) /* token? */;
  border-radius: var(--radius-pill);
  background: rgb(var(--tx-b) / 0.14) /* token? */;
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
}

.tx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
  box-shadow: 0 16px 36px -26px rgb(var(--tx-a)) /* token? */;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

@media (hover: hover) {
  .tx:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -24px rgb(var(--tx-a)) /* token? */;
  }
}

.tx-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(135deg, rgb(var(--tx-a)), rgb(var(--tx-b))) /* token? */;
  color: var(--c-white);
}

.tx-face {
  display: grid;
  flex: 0 0 64px;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.55) /* token? */;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.14) /* token? */;
  font-family: var(--font-display, inherit);
  font-size: 1.35rem /* token? */;
  font-weight: var(--fw-heavy);
}

.tx-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.5);
  transform-origin: 50% 0;
}

.tx-id {
  flex: 1;
  min-width: 0;
}

.tx-name {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.tx-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45) /* token? */;
  text-underline-offset: 3px;
}

.tx-name a:hover {
  text-decoration-color: var(--c-white);
}

.tx-pos {
  margin: 2px 0 0 /* token? */;
  color: rgba(255, 255, 255, 0.85) /* token? */;
  font-size: 0.86rem /* token? */;
}

/* The fee as a price tag pinned to the band. */
.tx-fee {
  flex: 0 1 auto;
  max-width: 46%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45) /* token? */;
  color: var(--c-navy);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-align: right;
  transform: rotate(2deg);
}

.tx-fee sup {
  color: var(--c-classic-muted);
}

.tx-route {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-weight: var(--fw-bold);
}

.tx-club {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.tx-club .crest,
.tx-mono {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.tx-mono {
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: rgb(var(--tx-b) / 0.14) /* token? */;
  color: var(--ink);
  font-weight: var(--fw-black);
}

.tx-home {
  justify-content: flex-end;
  text-align: right;
}

.tx-out .tx-home,
.tx-none .tx-home {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.tx-out .tx-home + .tx-arrow + .tx-club,
.tx-none .tx-home + .tx-arrow + .tx-club {
  flex-direction: row-reverse;
  text-align: right;
}

/* The arrow: a line in the direction colour with a chevron; a move that
   did not happen gets a dashed line and a cross instead. */
.tx-arrow {
  position: relative;
  flex: 0 0 56px;
  height: 2px;
  background: rgb(var(--tx-b)) /* token? */;
}

.tx-arrow::after {
  position: absolute;
  top: -5px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgb(var(--tx-b)) /* token? */;
  border-right: 2px solid rgb(var(--tx-b)) /* token? */;
  content: "";
  transform: rotate(45deg);
}

.tx-none .tx-arrow {
  background: repeating-linear-gradient(90deg, rgb(var(--tx-b)) 0 6px, transparent 6px 11px) /* token? */;
}

.tx-none .tx-arrow::after {
  top: -9px;
  right: 50%;
  width: auto;
  height: auto;
  border: 0;
  color: rgb(var(--tx-b)) /* token? */;
  content: "✕";
  font-size: var(--fs-meta);
  font-weight: var(--fw-black);
  transform: translateX(50%);
}

:root[data-theme="dark"] .tx-arrow,
:root[data-theme="dark"] .tx-none .tx-arrow::after {
  filter: brightness(1.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tx-arrow,
  :root:not([data-theme="light"]) .tx-none .tx-arrow::after {
    filter: brightness(1.6);
  }
}

.tx-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4) 0;
  color: var(--muted);
  font-size: 0.86rem /* token? */;
}

.tx-kind {
  padding: 3px var(--space-3) /* token? */;
  border-radius: var(--radius-pill);
  background: rgb(var(--tx-b) / 0.14) /* token? */;
  color: var(--ink);
  font-weight: var(--fw-heavy);
}

.tx-note {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.tx-reads {
  display: grid;
  gap: var(--space-1);
  margin: auto 0 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  list-style: none;
  font-size: var(--fs-meta);
}

.tx > :last-child:not(.tx-reads) {
  padding-bottom: var(--space-4);
}

.tx-reads li::before {
  margin-right: var(--space-2);
  color: rgb(var(--tx-b)) /* token? */;
  content: "→";
  font-weight: var(--fw-black);
}

:root[data-theme="dark"] .tx-reads li::before {
  filter: brightness(1.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tx-reads li::before {
    filter: brightness(1.6);
  }
}

.tx-reads .text-link {
  font-weight: var(--fw-semibold);
}

@media (max-width: 720px) {
  .tx-grid {
    grid-template-columns: 1fr;
  }

  .tx-board li {
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px /* token? */;
    padding: var(--space-2) var(--space-3);
  }

  .tx-board strong {
    font-size: 1.8rem /* token? */;
  }

  .tx-top {
    flex-wrap: wrap;
  }

  .tx-fee {
    max-width: none;
  }

  .tx-arrow {
    flex-basis: 32px;
  }
}

.table-note {
  margin: var(--space-3) var(--space-1) 0;
}

.rubric-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: 0 0 28px /* token? */;
  padding: var(--space-4) 22px /* token? */;
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
}

.facts dt {
  font-size: 0.76rem /* token? */;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--fw-semibold);
}

.player-head .facts-wide {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 26px 0 0 /* token? */;
  border: 1px solid var(--line);
}

@media (max-width: 620px) {
  .player-head .facts-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Scoreboard, the same on every page: crest over name on both sides, the
   score (or the kick-off time) in the middle, no frame of its own — the card
   is the frame. The result is a small label under the score. */
.scoreline {
  display: grid;
  /* minmax(0, …): a long club name must shrink and wrap, not run under the score */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  margin: var(--space-5) 0 var(--space-4);
  text-align: center;
}

.scoreline .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.scoreline .team > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: manual;
}

.scoreline .team .crest {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.scoreline-score {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.scoreline strong {
  color: var(--ink);
  font-family: var(--font-display, inherit);
  font-size: 2.6rem /* token? */;
  font-weight: var(--fw-heavy);
  line-height: 48px /* token? */;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.scoreline-result {
  padding: 2px var(--space-2) /* token? */;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--amber-text, var(--muted));
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-meta {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.match-card p.match-article {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ink-soft);
}

.match-more {
  color: var(--ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.match-more:hover,
.match-more:focus-visible {
  text-decoration: underline;
}

.calendar-menu {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.calendar-menu summary {
  width: fit-content;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}

.calendar-menu summary::-webkit-details-marker {
  display: none;
}

.calendar-menu summary::after {
  content: " ▾";
}

.calendar-menu[open] summary::after {
  content: " ▴";
}

.calendar-links {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--fs-ui);
}

.calendar-links a {
  width: fit-content;
  color: var(--ink);
}

.match-list {
  display: grid;
  gap: var(--space-4);
}

picture {
  display: contents;
}

/* With `display: contents` the <source> elements would become grid/flex
   items of their own (an empty first cell that pushes the text to the next
   row — seen in the author block). They render nothing anyway. */
picture > source {
  display: none;
}

.topics-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 22px /* token? */;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

/* Topic told in order: numbered chronology with a running month label. */
.topic-all-title {
  margin: 0 0 var(--space-2);
}

.series {
  margin: 0 0 28px /* token? */;
  padding: 0;
  list-style: none;
  max-width: 760px;
}

.series-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.series-item-month {
  margin-top: var(--space-2);
}

.series-n {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1 /* token? */;
  color: var(--muted);
  padding-top: 2px /* token? */;
}

.series-item-month .series-n {
  padding-top: 30px /* token? */;
}

.series-month {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.series-item h3 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--fs-h4);
}

.series-item p {
  margin: 0;
}

@media (max-width: 560px) {
  .series-item {
    grid-template-columns: 32px 1fr;
    gap: 0 var(--space-3);
  }

  .series-n {
    font-size: var(--fs-lead);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.86rem /* token? */;
  font-weight: var(--fw-semibold);
  color: var(--blue);
  text-decoration: none;
  background: var(--card-bg);
}

.tag:hover {
  border-color: var(--blue);
}

.tag-count {
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.standings-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--blue);
}

.form-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  text-decoration: none;
}

.form-w {
  background: var(--c-green);
}

.form-d {
  background: #8a8f98 /* token? */;
}

.form-l {
  background: var(--c-danger);
}

/* A line with a clock, not a pill: the time to kick-off is a fact, not a button. */
.countdown {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
}

.countdown::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.match-card .eyebrow + .scoreline {
  margin-top: var(--space-4);
}

.takeaways {
  margin: 0 0 var(--space-4);
  padding-left: 0;
  list-style: none;
  counter-reset: takeaway;
  color: var(--ink-soft);
  display: grid;
  gap: var(--space-3);
  line-height: var(--lh-body);
}

.takeaways li {
  position: relative;
  padding-left: 26px /* token? */;
  counter-increment: takeaway;
}

.takeaways li strong {
  color: var(--ink);
}

/* Plain gold numerals: the one accent in the card besides the result label. */
.takeaways li::before {
  content: counter(takeaway);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber-text, var(--blue));
  font-family: var(--font-display, inherit);
  font-weight: var(--fw-heavy);
  font-variant-numeric: lining-nums;
}

.article-match .takeaways {
  margin: var(--space-4) 0 var(--space-2);
  text-align: left;
}

.article-match .eyebrow {
  margin: var(--space-4) 0 var(--space-3);
}

.author {
  padding-top: 0;
}

.author-box {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
  border: 1px solid var(--line);
  border-radius: 32px /* token? */;
  background: var(--card-bg);
}

.author-photo,
.author-mark {
  width: 160px;
  height: 160px;
  border-radius: 40px /* token? */;
  object-fit: cover;
}

.author-mark {
  display: grid;
  place-items: center;
  background: var(--blue-dark);
  color: var(--amber);
  font-size: 2.2rem /* token? */;
  font-weight: 950 /* token? */;
  letter-spacing: -0.04em;
}

.author-box h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.6rem, 3vw, 2.4rem) /* token? */;
}

.author-box p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--ink-soft);
}

.author-box .hero-actions {
  margin-top: var(--space-4);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr);
  gap: var(--space-9);
}

.about-copy {
  font-size: 1.12rem /* token? */;
}

.faq-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.2rem /* token? */;
}

.faq-anchor {
  color: inherit;
  text-decoration: none;
}

.faq-anchor:hover,
.faq-anchor:focus-visible {
  text-decoration: underline;
}

.faq-item p {
  margin: 0;
}

.faq-item:target h3 {
  color: var(--blue);
}

.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: 28px /* token? */;
}

.about-photos figure {
  margin: 0;
}

.about-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.about-photos figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-note);
  line-height: var(--lh-normal);
}

.cta {
  padding: var(--space-5) 0 82px /* token? */;
}

.cta-box {
  display: flex;
  justify-content: space-between;
  gap: 28px /* token? */;
  align-items: center;
  padding: 34px /* token? */;
  background:
    linear-gradient(135deg, rgba(255, 200, 69, 0.42), transparent),
    var(--card-bg) /* token? */;
}

/* The button is a flex item next to a long paragraph: without flex: none it
   gets squeezed and «Написать в Telegram» breaks onto two cramped lines. */
.cta-box .button {
  flex: none;
  white-space: nowrap;
}

.cta-actions {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.cta-email {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .cta-box .button {
    padding-inline: var(--space-3);
    font-size: 0.94rem /* token? */;
  }
}

.page-head {
  padding: var(--space-10) 0 var(--space-6);
}

.page-head h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem) /* token? */;
}

.page-head .lead {
  margin-bottom: 0;
}

/* One quiet line of provenance under a page lead (season, source, date):
   regular weight and muted, not a second bold paragraph. */
.page-head .page-note {
  max-width: 62ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
}

.page-note a {
  color: inherit;
}

.nowrap {
  white-space: nowrap;
}

.article {
  padding: 56px 0 72px /* token? */;
}

.article-head {
  margin-bottom: 36px /* token? */;
}

.article-head h1 {
  /* Smaller than the page heads: a long review title at 4.2rem filled the
     first screen on its own, pushing the lead and the meta line below the fold. */
  max-width: 22ch;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem) /* token? */;
  letter-spacing: -0.06em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--muted);
  font-weight: var(--fw-bold);
}

.article-body {
  font-size: 1.14rem /* token? */;
  color: var(--ink-soft);
}

.article-body p {
  margin-bottom: 1.35em;
}

.article-body h2 {
  margin: 2em 0 0.7em;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.2rem) /* token? */;
}

.article-body blockquote {
  margin: 1.6em 0;
  padding: var(--space-4) var(--space-6);
  border-left: 6px solid var(--amber);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--card-bg);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.article-body strong {
  color: var(--ink);
}

.article-body a {
  color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.article-body figure {
  margin: 2em 0;
}

/* Six columns do not fit the 760px reading column: on wide screens the
   table breaks out to the regular container width, centred on the text;
   below that it keeps its minimum width and scrolls inside the wrapper. */
.article-body .doc-table {
  width: min(1120px, calc(100vw - 48px));
  margin: 1.6em 0 2em calc(50% - min(560px, 50vw - var(--space-6))) /* token? */;
  font-size: var(--fs-ui);
}

.article-body .doc-table table {
  min-width: 880px;
}

.article-body .doc-table td {
  color: var(--ink-soft);
}

.article-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

/* Картинка обёрнута в photo-open (открывается крупнее): скругление повторяет
   картинку, а тень живёт на ссылке — её overflow: hidden срезал бы тень
   самой картинки (как у обложки в .article-figure). */
.article-body .photo-open {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.article-body figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-meta);
}

.article-note {
  margin: var(--space-7) 0 0;
  color: var(--muted);
  font-size: var(--fs-body-sm);
}

.article-body .eyebrow {
  margin-bottom: var(--space-3);
}

.article-figure {
  margin: 0 0 var(--space-7);
}

.article-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px /* token? */;
}

/* Обложка обёрнута в photo-open (открывается крупнее): скругление повторяет
   обложку, а тень живёт на ссылке — её overflow: hidden срезал бы тень
   самой картинки. */
.article-figure .photo-open {
  border-radius: 28px /* token? */;
  box-shadow: var(--shadow-soft);
}

.article-figure figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-note);
}

.article-match {
  margin: 0 0 var(--space-7);
  padding: var(--space-2) var(--space-6) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
  text-align: center;
}

.article-match .scoreline {
  margin: var(--space-4) 0 var(--space-3);
}

.article-match .card-meta {
  margin: 0;
}

.source-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: 28px /* token? */;
  padding: var(--space-6) 28px /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(135deg, rgba(255, 200, 69, 0.3), transparent),
    var(--card-bg) /* token? */;
}

.source-box p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-weight: var(--fw-bold);
}

/* Компактная поддержка в конце статьи: виджет и пояснения — на /support/. */
.support-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
}

.support-compact-text {
  margin: 0;
}

/* «Читать дальше»: авторский переход — одна карточка, пояснение занимает
   место подводки. Блок компактный: низ статьи не должен стать выше. */
.read-next {
  margin: var(--space-5) 0 0;
}

.read-next h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem /* token? */;
}

.read-next .cards-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Пояснение перехода уже отвечает «почему дальше» — дата карточки здесь
   лишняя строка. */
.read-next .card-foot {
  display: none;
}

/* В узкой колонке статьи вертикальная карточка занимала бы пол-экрана:
   на широких экранах обложка встаёт слева, текст справа, и карточка
   остаётся компактной — низ статьи не выше, чем был. */
@media (min-width: 721px) {
  .read-next .article-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }

  .read-next .card-media {
    height: 100%;
  }

  .read-next .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .read-next .card-body {
    padding: var(--space-3) var(--space-4);
  }

  .read-next .card-body h3 {
    font-size: 1.25rem /* token? */;
  }
}

/* Навигация, вынесенная в конец после «Ещё по теме»: её верхний отступ
   уже дан нижним полем секции рекомендаций. */
.article-nav-tail .article-footer {
  margin-top: 0;
}

.article-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-weight: var(--fw-bold);
}

.article-footer a {
  flex: 1 1 240px;
  max-width: 48%;
}

.article-footer .align-end {
  text-align: right;
}

/* First/last item in a sequence: the single link keeps its half of the row */
.article-footer-next-only {
  justify-content: flex-end;
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.discuss-mirror {
  font-size: var(--fs-meta);
}

.related {
  padding-top: 0;
}

.footer-note {
  max-width: 52ch;
  font-size: var(--fs-meta);
}

.footer-mirror {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-weight: var(--fw-bold);
}

.footer-mirror a {
  color: var(--blue);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-7) 0;
  background: var(--header-bg);
}

/* «Install the app» — shown by app.js only where the browser can install. */
.install-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.install-app p {
  margin: 0;
  max-width: 60ch;
}

.install-ios {
  flex-basis: 100%;
}

/* Service-worker notices: «saved copy» / «site updated» with a reload button. */
/* Analytics consent bar: fixed to the bottom edge, one line of text and two
   buttons; below the update toast so both stay readable if they coincide. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-consent);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--ink);
  font-size: var(--fs-body-sm);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12) /* token? */;
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.consent-inner p {
  margin: 0;
  max-width: 70ch;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.consent-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.consent-manage .footer-note {
  margin: 0;
}

/* Phones: the bar takes as little of the screen as it can — smaller text,
   the two buttons side by side. */
@media (max-width: 480px) {
  .consent {
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
  }

  .consent-inner {
    gap: var(--space-2);
  }

  .consent-actions {
    flex-wrap: nowrap;
    width: 100%;
  }

  .consent-actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-2);
    white-space: normal;
  }
}

.sw-toast {
  position: fixed;
  left: 50%;
  /* Clear the home indicator when the site runs as an installed app. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--header-bg);
  color: var(--ink);
  font-size: var(--fs-body-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) /* token? */;
  transform: translateX(-50%);
}

.sw-toast span {
  flex: 1 1 auto;
  min-width: 0;
}

.sw-toast .button {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .sw-toast {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
  }
}

.sw-toast-close {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.4rem /* token? */;
  line-height: 1 /* token? */;
  cursor: pointer;
  opacity: 0.7;
}

.sw-toast-close:hover,
.sw-toast-close:focus-visible {
  opacity: 1;
}

/* iOS «Add to Home Screen» hint: the Share glyph, two taps, a close button. */
.install-toast {
  align-items: flex-start;
  max-width: 420px;
  line-height: var(--lh-normal);
}

.install-toast svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px /* token? */;
  color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .sw-toast {
    animation: sw-toast-in var(--dur-medium) var(--ease-out);
  }

  @keyframes sw-toast-in {
    from {
      opacity: 0;
    }
  }
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Footer links grouped into titled lists: Read / Club / Games / Project /
   Platforms. Columns pack side by side while they fit; on a phone the
   groups stack into one column (below). */
.footer-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5) var(--space-6);
  /* The grid needs a definite width inside the flex row to lay the five
     groups out as columns; the brand block keeps the left ~third. */
  flex: 1 1 auto;
  max-width: 780px;
}

.footer-group-title {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--fs-note);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-group ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The header itself collapses at 75em above — here only the page grids. */
@media (max-width: 860px) {
  .about-grid,
  .match-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid,
  .cards-grid-4,
  .rubric-grid,
  .rubric-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author-box {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 22px /* token? */;
    padding: var(--space-6);
  }

  .author-photo,
  .author-mark {
    width: 120px;
    height: 120px;
    border-radius: 30px /* token? */;
  }
}

@media (max-width: 620px) {
  .container,
  .container-narrow {
    width: min(100% - 22px, 1120px);
  }

  .hero {
    padding-top: 28px /* token? */;
  }

  h1 {
    font-size: clamp(2.2rem, 11.5vw, 3.2rem) /* token? */;
  }

  .page-head h1,
  .article-head h1 {
    font-size: clamp(2rem, 10vw, 2.8rem) /* token? */;
  }

  .cards-grid,
  .cards-grid-2,
  .cards-grid-4,
  .rubric-grid,
  .rubric-grid-3,
  .author-box {
    grid-template-columns: 1fr;
  }

  .results-table th,
  .results-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-meta);
  }

  /* The board stays one row: crests over names leave each name a third of
     the card, enough for «Крылья Советов» on two lines. */
  .scoreline {
    gap: var(--space-3);
  }

  .scoreline .team {
    font-size: var(--fs-ui);
  }

  .scoreline .team .crest {
    width: 40px;
    height: 40px;
  }

  .scoreline strong {
    font-size: 2.4rem /* token? */;
    line-height: 40px /* token? */;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .lang-switch a {
    padding: 7px 9px /* token? */;
  }

  .article-footer a {
    max-width: none;
  }

  .article-footer .align-end {
    text-align: left;
  }

  .source-box {
    padding: var(--space-5);
  }

  .source-box .button {
    width: 100%;
  }

  .section-head,
  .cta-box,
  .footer-grid {
    align-items: flex-start;
    flex-direction: column;
  }

  .lead-card-body,
  .cta-box {
    padding: 22px /* token? */;
  }

  .cta-actions {
    align-items: flex-start;
  }
}

/* On a phone the brand words, the language switch, search, theme and
   «Menu» need ~430px in one row: below 30em (480px at the default text
   size) only the «ББШ» mark stays (the link keeps its name in aria-label).
   In em, so that enlarged browser text moves the steps along with it. */
@media (max-width: 30em) {
  .nav-wrap {
    gap: var(--space-3);
  }

  .brand-text {
    display: none;
  }
}

@media (max-width: 22.5em) {
  .nav-wrap {
    gap: var(--space-2);
  }

  .header-actions {
    gap: var(--space-1);
  }

  .lang-switch a {
    padding: 7px 7px /* token? */;
  }

  .menu-toggle {
    padding: var(--space-3) var(--space-3);
  }
}

/* Very narrow — a small phone with enlarged text — «Menu» becomes an icon;
   the word stays as the button's name for screen readers. */
@media (max-width: 17.5em) {
  .menu-toggle {
    width: 40px;
    min-height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .menu-toggle .icon-menu {
    display: block;
  }

  .menu-toggle .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .article-card,
  .rubric-card,
  .button {
    transition: none;
  }
}

/* Front page: the squad as one row of faces, each a link to the player's
   card on /squad/, ending in the whole-squad tile. Scrolls sideways where
   the row does not fit. */
.hs-title {
  margin-bottom: var(--space-4);
  font-size: clamp(1.6rem, 3vw, 2.4rem) /* token? */;
}

.hs-list {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-1) var(--space-3);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
}

.hs-list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.hs-tile,
.hs-all {
  display: flex;
  flex-direction: column;
  width: 76px;
  color: var(--ink);
  text-decoration: none;
}

.hs-face,
.hs-all {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}

.hs-face {
  display: block;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(10, 79, 159, 0.28), transparent 70%),
    var(--bg-tint) /* token? */;
}

.hs-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  /* club portraits are head-to-waist; zoom in on the face */
  transform: scale(1.6);
  transform-origin: 50% 0;
}

.hs-name {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  text-align: center;
  overflow-wrap: anywhere;
}

.hs-all {
  aspect-ratio: 7 / 8;
  place-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--card-bg);
}

.hs-all strong {
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3-lg);
  line-height: 1 /* token? */;
  letter-spacing: -0.04em;
}

.hs-all span {
  margin-top: var(--space-1);
  color: var(--blue);
  font-size: 0.6rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  line-height: 1.25 /* token? */;
  text-transform: uppercase;
}

.hs-tile:hover .hs-face,
.hs-tile:focus-visible .hs-face,
.hs-all:hover,
.hs-all:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.hs-tile:hover .hs-name,
.hs-tile:focus-visible .hs-name {
  color: var(--blue);
}

@media (max-width: 720px) {
  .hs-tile,
  .hs-all {
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-face,
  .hs-all {
    transition: none;
  }

  .hs-tile:hover .hs-face,
  .hs-tile:focus-visible .hs-face,
  .hs-all:hover,
  .hs-all:focus-visible {
    transform: none;
  }
}

/* Telegram mirror */
.tg-channel { display: grid; gap: var(--space-3); margin-bottom: 28px /* token? */; padding: var(--space-5) 22px /* token? */; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tg-channel p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Описание канала приходит из Telegram как есть, с голыми ссылками:
   грид-ячейка обязана уметь сжиматься (min-width: 0), а длинный URL —
   переноситься, иначе он распирает блок шире экрана телефона. */
.tg-about { min-width: 0; overflow-wrap: anywhere; color: var(--muted); line-height: var(--lh-page); }
.tg-feed { display: grid; gap: var(--space-4); max-width: 760px; }
.tg-missing { max-width: 760px; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); background: var(--bg-tint); color: var(--ink-soft); font-weight: var(--fw-semibold); }
.tg-missing a { color: var(--accent); }
.tg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

/* Weekly digest: one narrow column, blocks separated by a rule. */
.digest-block {
  margin-top: var(--space-8);
  padding-top: 28px /* token? */;
  border-top: 1px solid var(--line);
}

.digest-block h2 {
  margin: 0 0 var(--space-4);
  font-size: 1.45rem /* token? */;
}

.digest-block h2 .card-meta {
  margin-left: var(--space-2);
  font-weight: var(--fw-medium);
}

.digest .tg-grid {
  grid-template-columns: 1fr;
}

.digest-list,
.digest-index,
.digest-ahead {
  margin: 0;
  padding: 0;
  list-style: none;
}

.digest-list li,
.digest-index li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.digest-list li:last-child,
.digest-index li:last-child {
  border-bottom: 0;
}

.digest-list h3 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--fs-h4);
}

.digest-list p,
.digest-index p {
  margin: 0;
}

.digest-index p + p {
  margin-top: var(--space-1);
}

.digest-ahead li {
  padding: var(--space-2) 0;
}

/* The digest and the games sit together under the channel block. */
.home-strips {
  display: grid;
  gap: var(--space-3);
}

/* Три коротких ответа над платёжным блоком /support/: кто получает,
   чему помогает, куда писать. В ряд на широком экране, стопкой на узком. */
.support-answers {
  display: grid;
  gap: var(--space-5) var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 721px) {
  .support-answers {
    grid-template-columns: repeat(3, 1fr);
  }
}

.support-qa h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.support-qa p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* «Поддержать проект»: the DonatePay form takes the button's place on
   click. The form centres itself vertically in the frame:
   at every width its content measured under 370px (one column on phones,
   amount then payment methods; two columns from about 600px), 400px on
   wide screens, 460px on phones (see below). */
.support-block {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-8) 0;
  padding: 28px var(--space-7) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card-solid, var(--card-bg));
}

.container-support .support-block {
  margin: 0;
}

.support-block .eyebrow,
.support-block h2,
.support-block p {
  margin: 0;
}

.support-block h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem) /* token? */;
}

.support-form {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.support-once {
  font-weight: var(--fw-semibold);
}

.support-widget {
  display: block;
  justify-self: stretch;
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-white);
}

@media (max-width: 620px) {
  .support-block {
    padding: var(--space-5);
  }

  .support-open {
    justify-self: stretch;
    text-align: center;
  }

  /* Edge to edge: under ~300px the form clips its own button, and the
     extra height lets its payment-method list show more than two rows. */
  .support-widget {
    justify-self: center;
    width: calc(100% + 40px);
    height: 460px;
    margin-inline: -20px /* token? */;
    border-radius: 0;
  }
}

/* Front page: the digest and the games as two picture cards side by side. */
.home-tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-5);
}

.home-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card-solid, var(--card-bg));
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}

.home-tile:hover,
.home-tile:focus-visible {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(13, 27, 42, 0.14) /* token? */;
}

.home-tile-visual {
  position: relative;
  display: block;
  height: 240px;
  overflow: hidden;
  background: var(--sea);
}

.home-tile-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.home-tile .eyebrow {
  margin: 0;
}

.home-tile strong {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.2rem, 2vw, 1.45rem) /* token? */;
  line-height: var(--lh-snug);
}

.home-tile .card-meta {
  margin: 0;
}

.home-tile .quiz-strip-cta {
  justify-self: start;
  margin: var(--space-3) 0 0;
}

.home-tile-quote {
  color: var(--muted, inherit);
  line-height: var(--lh-normal);
}

.home-tile-quote b {
  color: var(--ink, inherit);
}

/* Digest: the week's own picture, the week number on a calendar leaf.
   Covers carry their headline in the picture, so the cover is shown whole
   over a blurred copy of itself instead of being cropped to the band. */
.digest-tile-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.75);
  transform: scale(1.2);
}

.digest-tile-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 27, 42, 0.6), rgba(13, 27, 42, 0.05) 60%) /* token? */;
}

.digest-tile-cover {
  position: relative;
  z-index: var(--z-raised);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right 24px top 50%;
  transition: transform 0.4s /* token? */;
}

.home-tile:hover .digest-tile-cover {
  transform: scale(1.03);
}

.digest-tile-week {
  position: absolute;
  z-index: var(--z-raised-2);
  left: 22px;
  bottom: 22px;
  display: grid;
  justify-items: center;
  min-width: 84px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 6px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--c-white);
  color: var(--c-sea);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) /* token? */;
}

.digest-tile-week b {
  font-family: var(--font-display, inherit);
  font-size: 2.6rem /* token? */;
  line-height: 1 /* token? */;
  letter-spacing: 0;
}

/* Games: three of the squad, the middle one hidden — «guess who». */
.quiz-tile-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 110%, rgba(240, 192, 105, 0.45), transparent 60%),
    linear-gradient(160deg, #12324f, var(--c-sea) 70%) /* token? */;
}

.quiz-tile-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border: 2px solid rgba(255, 255, 255, 0.12) /* token? */;
  border-radius: var(--radius-round);
  transform: translateX(-50%);
}

.quiz-tile-visual img {
  display: block;
  height: 205px;
  width: auto;
}

.quiz-tile-visual .quiz-tile-side {
  position: relative;
  height: 180px;
  opacity: 0.85;
}

.quiz-tile-side:first-child {
  margin-right: -34px /* token? */;
}

.quiz-tile-side:last-child {
  margin-left: -34px /* token? */;
}

.quiz-tile-guess {
  position: relative;
  z-index: var(--z-raised);
  display: block;
}

.quiz-tile-guess img {
  filter: brightness(0) drop-shadow(0 0 1px rgba(240, 192, 105, 0.9)) /* token? */;
  transition: filter var(--dur-medium);
}

.quiz-tile-guess-empty {
  width: 140px;
  height: 205px;
}

.quiz-tile-guess b {
  position: absolute;
  left: 50%;
  top: 34%;
  font-family: var(--font-display, inherit);
  font-size: 4.2rem /* token? */;
  line-height: 1 /* token? */;
  color: var(--amber-light, #f0c069);
  transform: translateX(-50%);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) /* token? */;
}

.quiz-tile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.quiz-tile-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.quiz-tile-chip-more {
  color: var(--amber-text, inherit);
}

@media (max-width: 620px) {
  .home-tile-visual {
    height: 200px;
  }

  .digest-tile-cover {
    object-position: right 16px top 50%;
  }

  .quiz-tile-visual img {
    height: 175px;
  }

  .quiz-tile-visual .quiz-tile-side {
    height: 150px;
  }

  .quiz-tile-guess-empty {
    width: 120px;
    height: 175px;
  }

  .home-tile-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-tile,
  .digest-tile-cover {
    transition: none;
  }

  .home-tile:hover,
  .home-tile:focus-visible,
  .home-tile:hover .digest-tile-cover,
  .home-tile:focus-visible .digest-tile-cover {
    transform: none;
  }
}

/* Quiz banner: text stacked on the left, a pill call to action on the right. */
.quiz-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4) 28px /* token? */;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(90deg, var(--bg-tint), transparent 55%),
    var(--card-bg);
  color: inherit;
  text-decoration: none;
}

.quiz-strip-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.quiz-strip .eyebrow {
  margin: 0;
}

.quiz-strip strong {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem) /* token? */;
  line-height: var(--lh-snug);
}

.quiz-strip .card-meta {
  margin: 0;
}

/* Geometry only: the CTA takes the button's colours (rest and hover alike)
   from baltic.css, grouped with .button there. */
.quiz-strip-cta {
  flex: none;
  margin-left: auto;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.quiz-strip:hover,
.quiz-strip:focus-visible {
  border-color: var(--blue);
}

/* Penalty strip: a frame of the game on the left, so the strip reads as
   «a penalty game» at a glance. The section keeps only a short gap below —
   the digest-and-games tiles that follow bring their own top padding, so
   the strip and the tiles read as one «games» group. */
.penalty-strip-section {
  padding-bottom: var(--space-2);
}

.penalty-strip {
  overflow: hidden;
  padding: 0 var(--space-6) 0 0;
}

.penalty-strip-shot {
  flex: none;
  display: block;
  width: clamp(220px, 32%, 320px);
  height: auto;
  aspect-ratio: 800 / 530;
}

.penalty-strip strong {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem) /* token? */;
}

@media (max-width: 620px) {
  .penalty-strip {
    padding: 0 0 var(--space-5);
  }

  .penalty-strip-shot {
    width: 100%;
  }

  .penalty-strip .quiz-strip-text,
  .penalty-strip .quiz-strip-cta {
    margin-inline: var(--space-5);
  }
}

@media (max-width: 620px) {
  .quiz-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .quiz-strip-cta {
    margin-left: 0;
  }
}

/* Channel mirror search: the field above the feed, results as a list. */
.tg-search {
  margin: var(--space-4) 0 var(--space-2);
}

.tg-search .search-box {
  flex: 1 1 320px;
  max-width: 560px;
}

.tg-search-results {
  margin-bottom: var(--space-6);
}

.tg-search-results .mention-list {
  grid-template-columns: 1fr;
  max-width: 760px;
}

/* Passing mentions on a player page: two columns of title + rubric/date. */
.mention-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 var(--space-7);
}

.mention-list li {
  display: flex;
  flex-direction: column;
  gap: 2px /* token? */;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.digest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.digest-fallback {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-meta);
  line-height: var(--lh-text);
  resize: vertical;
}

.digest .article-footer {
  margin-top: var(--space-8);
}
.tg-post { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; }
.tg-post:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.tg-head, .tg-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-meta); }
.tg-date { color: var(--muted); text-decoration: none; font-weight: var(--fw-semibold); }
.tg-date:hover { color: var(--accent); }
.tg-text { line-height: 1.6 /* token? */; white-space: normal; }
.tg-text a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tg-text blockquote { margin: var(--space-2) 0; padding: var(--space-1) var(--space-3); border-left: 3px solid var(--accent); color: var(--muted); }
.tg-text code, .tg-text pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--bg); padding: 1px 5px /* token? */; border-radius: var(--radius-xs); }
.tg-text pre { padding: var(--space-3) var(--space-3); overflow-x: auto; }
.spoiler { background: var(--muted); color: transparent; border-radius: var(--radius-xs); transition: color var(--dur-short), background var(--dur-short); }
.spoiler:hover, .spoiler:focus { background: transparent; color: inherit; }
.tg-photos { display: grid; gap: var(--space-1); border-radius: var(--radius-md); overflow: hidden; position: relative; }
.tg-photos a { display: block; margin: 0; }
.tg-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-photos-1 img { height: auto; max-height: 640px; object-fit: contain; background: var(--bg); }
.tg-photos-2, .tg-photos-4 { grid-template-columns: 1fr 1fr; }
.tg-photos-3 { grid-template-columns: 1fr 1fr; }
.tg-photos-3 a:first-child { grid-column: 1 / -1; }
.tg-photos-2 img, .tg-photos-3 a:not(:first-child) img, .tg-photos-4 img { aspect-ratio: 4 / 3; }
.tg-post-compact .tg-photos img { aspect-ratio: 16 / 10; }
.tg-more { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px /* token? */; border-radius: var(--radius-pill); background: rgba(0,0,0,.6) /* token? */; color: var(--c-white); font-size: var(--fs-label); }
.tg-video { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--bg); text-decoration: none; min-height: 72px; }
.tg-video img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.tg-play { position: absolute; left: 12px; bottom: 12px; padding: 5px var(--space-3) /* token? */; border-radius: var(--radius-pill); background: rgba(0,0,0,.65) /* token? */; color: var(--c-white); font-size: var(--fs-note); font-weight: var(--fw-semibold); }
.tg-video:not(:has(img)) .tg-play { position: static; display: inline-block; margin: var(--space-3); }
.tg-preview { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-3); border-left: 3px solid var(--accent); background: var(--bg); border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.tg-preview:hover strong { color: var(--accent); }
.tg-preview-desc { color: var(--muted); font-size: var(--fs-ui); line-height: var(--lh-text); }
.tg-unsupported { margin: 0; padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font-size: var(--fs-ui); }
.tg-reactions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tg-reaction { padding: 2px 9px /* token? */; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-note); }
.tg-post-compact { align-content: start; }
/* Channel archive pages: newer · status · older; at either end the missing
   link is simply absent and the status keeps its middle slot. */
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3) var(--space-5); margin: 22px 0 /* token? */; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: var(--fw-bold); }
.pagination-status { grid-column: 2; justify-self: center; text-align: center; }
.pagination-newer { grid-column: 1; justify-self: start; }
.pagination-older { grid-column: 3; justify-self: end; }
@media (max-width: 620px) { .pagination { grid-template-columns: 1fr 1fr; } .pagination-status { grid-column: 1 / -1; grid-row: 1; } .pagination-newer { grid-row: 2; grid-column: 1; } .pagination-older { grid-row: 2; grid-column: 2; } }
@media (max-width: 900px) { .tg-grid { grid-template-columns: 1fr; } }

/* Club crests */
.crest { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; flex: none; }
.team { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.match-link .crest { width: 20px; height: 20px; margin-right: var(--space-2); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: var(--space-3); font-size: .88rem /* token? */; color: var(--muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs li[aria-current] { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* Opponents */
.opp-h1 { display: flex; align-items: center; gap: var(--space-4); }
.opp-h1 .crest { width: 56px; height: 56px; }
.opp-matches { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

@media (max-width: 720px) { .opp-matches { grid-template-columns: 1fr; } }

/* Reading progress (app.js adds the element on long articles) */
/* Long reads: collapsible contents after the introduction. Player ratings
   in match reviews nest under their heading; a jump link leads straight there. */
.toc {
  margin: 0 0 28px /* token? */;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: var(--fs-body-sm);
}

.toc summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--fw-bold);
  list-style: none;
}

.toc summary::-webkit-details-marker { display: none; }

.toc summary > span::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--blue);
  transition: transform var(--dur-short);
}

.toc[open] summary > span::before { transform: rotate(90deg); }

.toc-jump {
  color: var(--blue);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.toc-jump:hover { text-decoration: underline; }

.toc ol {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3) 36px /* token? */;
  line-height: var(--lh-body);
}

.toc ol ol {
  margin-top: var(--space-1);
  padding: 0 0 0 var(--space-4);
  columns: 2;
  column-gap: var(--space-6);
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

.toc li { margin: var(--space-1) 0; break-inside: avoid; }

.toc a { color: inherit; text-decoration: none; }

.toc a:hover { color: var(--blue); text-decoration: underline; }

.article-body h2, .article-body h3 { scroll-margin-top: 84px; }

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sheet);
  width: 100%;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Lazy images: fade in after decode (class set by app.js) */
img.fade-in {
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease);
}

img.fade-in.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img.fade-in { opacity: 1; transition: none; }
}

/* Official photo on the player page */
.player-head-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0 var(--space-8);
  align-items: end;
}

.player-head-photo .breadcrumbs {
  grid-column: 1 / -1;
}

.player-photo {
  margin: 0;
  text-align: center;
}

.player-photo img,
.player-photo picture {
  display: block;
  width: 100%;
  height: auto;
}

.player-photo img {
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(10, 79, 159, 0.22), transparent 70%),
    var(--bg-tint) /* token? */;
}

.player-photo figcaption {
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .player-head-photo {
    grid-template-columns: 1fr;
  }

  .player-head-photo {
    gap: var(--space-4) 0;
  }

  .player-head-photo .player-head-text {
    order: 1;
  }

  .player-photo {
    max-width: 200px;
  }
}

/* Player profile: the extra matches and the passing mentions collapse into
   a <details>, so the main story and the latest cards stay in view. */
.player-fold summary {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.player-fold summary::-webkit-details-marker {
  display: none;
}

.player-fold summary::before {
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--blue);
  content: "▸";
  transition: transform var(--dur-base) var(--ease);
}

.player-fold[open] summary::before {
  transform: rotate(90deg);
}

.player-fold summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.player-fold > summary ~ * {
  margin-top: var(--space-4);
}

/* 404: closest articles for a stale (WordPress-era) URL, filled in by not-found.js. */
.not-found-guess {
  margin-top: 36px /* token? */;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.not-found-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-lead);
}

/* Club history: division chart, season tables, comparison, hall of fame */

/* Opening block: three figures under the page head, then the one line */
.history-glance {
  padding-top: var(--space-2);
}

.history-numbers {
  display: grid;
  gap: 28px var(--space-7) /* token? */;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--space-8);
}

.history-number {
  padding-top: var(--space-4);
  border-top: 3px solid var(--amber, var(--blue));
}

.history-number p {
  margin: 0;
}

.history-number-value {
  font-family: var(--font-display, inherit);
  font-size: clamp(3rem, 6.2vw, 4.6rem) /* token? */;
  font-weight: var(--fw-bold);
  line-height: 0.95 /* token? */;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" 1, "kern" 1;
}

.history-number-label {
  margin-top: var(--space-3) !important;
  font-weight: var(--fw-bold);
  font-size: 1.05rem /* token? */;
  line-height: var(--lh-ui);
}

.history-number-text {
  margin-top: var(--space-2) !important;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-text);
}

@media (max-width: 720px) {
  .history-numbers {
    grid-template-columns: 1fr;
    gap: 22px /* token? */;
  }

  .history-number {
    display: grid;
    grid-template-columns: minmax(4.5ch, auto) 1fr;
    column-gap: var(--space-4);
    align-items: baseline;
  }

  .history-number-value {
    grid-row: 1 / span 2;
    font-size: 3rem /* token? */;
  }

  .history-number-label {
    margin-top: 0 !important;
  }
}

.history-chart {
  margin: 0;
}

.history-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.history-chart figcaption {
  margin-top: var(--space-3);
  max-width: 68ch;
}

.history-band {
  fill: var(--bg-tint);
  opacity: 0.7;
}

.history-band-top {
  fill: var(--amber, var(--blue));
  opacity: 0.14;
}

.history-path {
  stroke: var(--amber, var(--blue));
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The wave's body: gold where the club stood high, fading towards the bottom */
.history-fill-hi {
  stop-color: var(--amber, var(--blue));
  stop-opacity: 0.42;
}

.history-fill-mid {
  stop-color: var(--amber, var(--blue));
  stop-opacity: 0.12;
}

.history-fill-lo {
  stop-color: var(--blue);
  stop-opacity: 0.03;
}

.history-dot-label {
  fill: var(--ink);
  font-size: 11.5px /* token? */;
  font-weight: var(--fw-bold);
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.history-path-dash {
  stroke-dasharray: 7 6;
}

.history-tier-line {
  stroke: var(--line);
  stroke-width: 1;
}

.history-tier-label {
  fill: var(--ink-soft);
  font-size: 11.5px /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: inherit;
}

.history-year-label {
  fill: var(--muted);
  font-size: 12px /* token? */;
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}

.history-year-tick {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.history-dot {
  fill: var(--ink);
  stroke: var(--bg);
  stroke-width: 2.5;
}

.history-dot-current {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 3;
}

/* Same line, two drawings: the compact one has fewer ticks and short labels */
.history-chart-compact {
  display: none;
}

.history-svg-compact .history-tier-label {
  font-size: 12.5px /* token? */;
  letter-spacing: 0.06em;
}

.history-svg-compact .history-year-label {
  font-size: 13px /* token? */;
}

@media (max-width: 720px) {
  .history-chart-wide {
    display: none;
  }

  .history-chart-compact {
    display: block;
  }
}

/* Seasons table: open, no card; a tier bar on the left of each row */
.history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin: 0 0 var(--space-3);
}

.history-legend-title {
  font-weight: var(--fw-bold);
}

.history-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.history-swatch {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: var(--radius-xs);
}

.history-swatch.tier-1,
.history-seasons tr.tier-1 th[scope="row"] {
  --tier-color: var(--tier-1);
}

.history-swatch.tier-2,
.history-seasons tr.tier-2 th[scope="row"] {
  --tier-color: var(--tier-2);
}

.history-swatch.tier-3,
.history-seasons tr.tier-3 th[scope="row"] {
  --tier-color: var(--tier-3);
}

.history-swatch.tier-4,
.history-seasons tr.tier-4 th[scope="row"] {
  --tier-color: var(--tier-4);
}

.history-swatch {
  background: var(--tier-color, var(--line));
}

.history-seasons-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.history-seasons {
  border-top: 2px solid var(--ink);
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.history-seasons th,
.history-seasons td {
  padding: 11px var(--space-3) /* token? */;
}

.history-seasons thead th {
  background: transparent;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.history-seasons th[scope="row"] {
  white-space: nowrap;
  padding-left: var(--space-4);
  font-family: var(--font-display, inherit);
  font-size: 1.05rem /* token? */;
  font-weight: var(--fw-bold);
  color: var(--ink);
  background: transparent;
  box-shadow: inset 4px 0 0 var(--tier-color, var(--line));
}

/* the season column stays put while the rest scrolls on a phone */
@media (max-width: 900px) {
  .history-seasons th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: var(--z-raised);
    background: var(--bg);
  }

  .history-seasons tr.is-highlight th,
  .history-seasons tr.is-current th {
    background: color-mix(in srgb, var(--amber, var(--blue)) 12%, var(--bg));
  }
}

.history-seasons tr:last-child th,
.history-seasons tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.history-col-comp {
  color: var(--ink-soft);
  white-space: nowrap;
}

.history-col-num,
.history-seasons thead th:nth-child(n + 3):nth-child(-n + 8) {
  text-align: center;
}

.history-col-w {
  color: var(--win-text);
  font-weight: var(--fw-semibold);
}

.history-col-l {
  color: var(--brick);
  font-weight: var(--fw-semibold);
}

.history-col-pts {
  font-weight: var(--fw-bold);
}

.history-col-place {
  white-space: nowrap;
}

.history-col-place strong {
  font-weight: var(--fw-bold);
}

.history-of,
.history-scorer-goals {
  color: var(--muted);
}

.history-scorer-goals {
  margin-left: var(--space-1);
  font-weight: var(--fw-semibold);
}

.history-seasons tr.is-highlight td,
.history-seasons tr.is-highlight th {
  background: color-mix(in srgb, var(--amber, var(--blue)) 10%, transparent);
}

/* /history/ eras: five chapters, each on a light wash of its own colour.
   --era is the accent for text (≥4.5:1 on the wash and on the season card
   in both themes, so a few are darker or lighter than the brand swatch);
   --era-base is the swatch the wash is mixed from. */
.era-sepia { --era: var(--era-sepia); --era-base: var(--era-sepia-base); --era-bg: var(--era-sepia-bg); }
.era-brick { --era: var(--era-brick); --era-base: var(--era-brick-base); --era-bg: var(--era-brick-bg); }
.era-gold { --era: var(--era-gold); --era-base: var(--era-gold-base); --era-bg: var(--era-gold-bg); }
.era-slate { --era: var(--era-slate); --era-base: var(--era-slate-base); --era-bg: var(--era-slate-bg); }
.era-blue { --era: var(--era-blue); --era-base: var(--era-blue-base); --era-bg: var(--era-blue-bg); }

:root[data-theme="dark"] .era-sepia { --era: var(--era-sepia-night); }
:root[data-theme="dark"] .era-brick { --era: var(--era-brick-night); }
:root[data-theme="dark"] .era-gold { --era: var(--era-gold-night); }
:root[data-theme="dark"] .era-slate { --era: var(--era-slate-night); }
:root[data-theme="dark"] .era-blue { --era: var(--era-blue-night); }

:root[data-theme="dark"] :is(.era, .era-chip, .eras-aside, .hd-inner, .cmp-era, .hof-card) {
  --era-bg: color-mix(in srgb, var(--era-base) 12%, var(--bg));
  --era-card: var(--bg-soft, var(--bg));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .era-sepia { --era: var(--era-sepia-night); }
  :root:not([data-theme="light"]) .era-brick { --era: var(--era-brick-night); }
  :root:not([data-theme="light"]) .era-gold { --era: var(--era-gold-night); }
  :root:not([data-theme="light"]) .era-slate { --era: var(--era-slate-night); }
  :root:not([data-theme="light"]) .era-blue { --era: var(--era-blue-night); }

  :root:not([data-theme="light"]) :is(.era, .era-chip, .eras-aside, .hd-inner, .cmp-era, .hof-card) {
    --era-bg: color-mix(in srgb, var(--era-base) 12%, var(--bg));
    --era-card: var(--bg-soft, var(--bg));
  }
}

.era-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 28px 0 var(--space-2) /* token? */;
  padding: 0;
  list-style: none;
}

/* Second row under the era nav: anchors to the compare, hall of fame and
   season-table blocks further down the page. The scroll-margin keeps the
   block headings clear of the sticky header after a jump. */
.history-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.history-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  text-decoration: none;
  white-space: nowrap;
}

.history-nav a:hover {
  border-color: var(--blue);
}

#compare,
#hall,
#seasons {
  scroll-margin-top: calc(var(--header-h, 64px) + 8px);
}

.era-chip {
  display: block;
  padding: 9px var(--space-4) var(--space-3) var(--space-3) /* token? */;
  border: 1px solid color-mix(in srgb, var(--era-base) 35%, transparent);
  border-left: 4px solid var(--era);
  border-radius: var(--radius-md);
  background: var(--era-bg);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  line-height: 1.25 /* token? */;
  text-decoration: none;
  white-space: nowrap;
}

.era-chip:hover {
  border-color: var(--era);
}

.era-nav-years {
  display: block;
  color: var(--era);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums lining-nums;
}

.era {
  --era-card: var(--c-white);
  padding: 56px 0 var(--space-9) /* token? */;
  background: var(--era-bg);
  scroll-margin-top: 70px;
}

.era-head h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: clamp(2rem, 5vw, 3.5rem) /* token? */;
  line-height: 1.05 /* token? */;
}

.era-years {
  margin: 0;
  color: var(--era);
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums lining-nums;
}

.era-kicker {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}

.era-photo {
  margin: var(--space-6) 0 0;
}

.era-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.era-photo figcaption {
  margin-top: var(--space-2);
}

.era-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: var(--space-9);
  align-items: start;
  margin-top: 28px /* token? */;
}

.era-text,
.era-number,
.era-links {
  grid-column: 1;
}

.era-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  grid-column: 2;
  grid-row: 1 / span 3;
}

.era-text {
  max-width: 62ch;
  margin: 0 0 var(--space-6);
  font-size: 1.08rem /* token? */;
  line-height: 1.65 /* token? */;
}

.era-number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
}

.era-number strong {
  color: var(--era);
  font-family: var(--font-display, inherit);
  font-size: clamp(3rem, 9vw, 6rem) /* token? */;
  font-weight: var(--fw-heavy);
  line-height: 0.95 /* token? */;
  white-space: nowrap;
}

.era-number span {
  max-width: 24ch;
  color: var(--ink-soft);
}

.era-season {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 2px solid var(--era);
  border-radius: var(--radius-xl);
  background: var(--era-card);
}

.era-season-label,
.era-hero-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.era-season-year {
  margin: var(--space-1) 0 2px /* token? */;
  font-family: var(--font-display, inherit);
  font-size: 2.6rem /* token? */;
  font-weight: var(--fw-heavy);
  line-height: 1 /* token? */;
}

.era-season-comp {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.era-season-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.era-season-stats dt {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.era-season-stats dd {
  margin: 2px 0 0 /* token? */;
  font-size: var(--fs-lead);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
}

.era-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--era-card);
}

.era-hero-face {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-round);
  object-fit: cover;
  object-position: 50% 15%;
  background: var(--bg-tint, var(--line));
}

.era-hero-initials {
  display: grid;
  place-items: center;
  background: var(--era);
  color: var(--era-card);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-heavy);
}

.era-hero-name {
  margin: 2px 0 0 /* token? */;
  font-family: var(--font-display, inherit);
  font-size: 1.2rem /* token? */;
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}

.era-hero-name a {
  color: inherit;
}

.era-hero-years {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-note);
  font-variant-numeric: tabular-nums lining-nums;
}

.era-hero-line {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
  line-height: var(--lh-text);
}

.era-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.era-seasons {
  margin-top: var(--space-7);
}

.era-seasons summary {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--era-base) 45%, transparent);
  border-radius: var(--radius-pill);
  background: var(--era-card);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.era-seasons summary::-webkit-details-marker {
  display: none;
}

.era-seasons summary::before {
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--era);
  content: "▸";
  transition: transform var(--dur-base) var(--ease);
}

.era-seasons[open] summary::before {
  transform: rotate(90deg);
}

.era-seasons summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.era-seasons .table-wrap {
  margin-top: var(--space-4);
}

.era .history-seasons tr:not(.is-highlight) th[scope="row"] {
  background: var(--era-bg);
}

/* The wash under the chapter's table is darker than the page, so the
   table's quiet colours get one step more contrast here. */
.era .history-of,
.era .history-scorer-goals {
  color: var(--ink-soft);
}

.era .history-col-w {
  color: #0e5c31 /* token? */;
}

:root[data-theme="dark"] .era .history-col-w {
  color: #5fd08f /* token? */;
}

:root[data-theme="dark"] .era .history-col-l {
  color: #f0a08f /* token? */;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .era .history-col-w {
    color: #5fd08f /* token? */;
  }

  :root:not([data-theme="light"]) .era .history-col-l {
    color: #f0a08f /* token? */;
  }
}

/* «1963 ↓ третий эшелон»: a hairline with the switch between two chapters */
.era-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
}

.era-switch::before,
.era-switch::after {
  flex: 1;
  height: 1px;
  background: var(--line);
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .era-seasons summary::before {
    transition: none;
  }
}

@media (max-width: 860px) {
  .era {
    padding: var(--space-8) 0 36px /* token? */;
  }

  .era-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .era-text,
  .era-number,
  .era-links,
  .era-side {
    grid-column: 1;
    grid-row: auto;
  }

  .era-side {
    margin-bottom: var(--space-5);
  }
}

@media (max-width: 620px) {
  /* Поля .container здесь сжимаются до 11px (100% - 22px), поэтому выезд
     ленты за поле — ровно 11px: прежние -16px торчали на 5px за экран и
     давали странице горизонтальный скролл. */
  .era-nav ol {
    flex-wrap: nowrap;
    margin-right: -11px;
    padding-right: 11px;
    padding-bottom: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .era-nav li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .history-nav ul {
    flex-wrap: nowrap;
    margin-right: -11px;
    padding: 4px 11px var(--space-2) 4px;
    margin-left: -4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .history-nav li {
    flex: 0 0 auto;
  }

  .footer-groups {
    grid-template-columns: 1fr;
  }

  .era-text {
    font-size: var(--fs-body);
  }

  .era-season-year {
    font-size: 2.2rem /* token? */;
  }

  .era-hero-face {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}

/* /history/ wave, interactive (history.js): every season is a link
   (.wave-hit) with its own line and dot that show on hover and focus; the
   current era gets a wash and its stretch of the line in the era colour. */
.wave-era {
  fill: var(--era-base);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease);
}

.has-era .wave-era.is-current {
  opacity: 0.14;
}

.wave-era-line {
  fill: none;
  stroke: var(--era);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease);
}

.has-era .wave-era-line.is-current {
  opacity: 1;
}

.history-svg-wide .history-path,
.history-svg-compact .history-path {
  transition: opacity var(--dur-medium) var(--ease);
}

.has-era .history-path {
  opacity: 0.35;
}

.history-svg-sticky .history-path {
  stroke-width: 2;
}

.wave-hit {
  cursor: pointer;
  outline: none;
}

.wave-hit-line {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  opacity: 0;
}

.wave-hit-dot {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
}

.wave-hit:hover :is(.wave-hit-line, .wave-hit-dot),
.wave-hit:focus-visible :is(.wave-hit-line, .wave-hit-dot),
.wave-hit.is-active :is(.wave-hit-line, .wave-hit-dot) {
  opacity: 1;
}

.wave-hit.is-active .wave-hit-dot {
  fill: var(--ink);
}

.wave-hit:focus-visible rect {
  stroke: var(--ink);
  stroke-width: 2;
}

.wave-hint {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--fs-note);
}

/* The chapters and, from 1024 px, a side column with the sticky wave. The
   column takes the wash of the current era so the chapter reads edge to
   edge. Without history.js the column and the phone strip stay hidden. */
@media (min-width: 1024px) {
  .eras-layout.has-js {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 31vw, 420px);
  }

  .eras-aside {
    background: transparent;
    transition: background-color var(--dur-medium) var(--ease);
  }

  .eras-aside.has-era {
    background: var(--era-bg);
  }

  .eras-aside-inner {
    position: sticky;
    top: calc(var(--header-h, 64px) + 16px);
    padding: var(--space-8) var(--space-6) var(--space-6) var(--space-2);
  }

  .eras-layout.has-js .era-bar {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .eras-layout.has-js .era-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .eras-layout.has-js :is(.era-text, .era-number, .era-links, .era-side) {
    grid-column: 1;
    grid-row: auto;
  }

  .eras-layout.has-js .era-side {
    margin-bottom: var(--space-5);
  }
}

@media (max-width: 1023px) {
  .eras-aside {
    display: none;
  }
}

.eras-aside-title {
  margin: 0 0 var(--space-2);
  color: var(--era, var(--ink-soft));
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums lining-nums;
}

.eras-aside:not(.has-era) .eras-aside-title {
  color: var(--ink-soft);
}

.eras-aside-hint {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-note);
}

.wave-sticky svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Phones and tablets: a 6 px strip of the eras under the header, widths by
   years, the current one bright. It takes no room (height 0, children
   overflow) and sticks only inside the chapters' wrapper. */
.era-bar {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: var(--z-era-bar);
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease);
}

.era-bar.is-active {
  opacity: 1;
}

.era-bar-track {
  position: absolute;
  top: 26px;
  right: 0;
  left: 0;
  display: flex;
  height: 6px;
  background: var(--bg);
}

.era-bar-seg {
  flex: 0 0 var(--w);
  background: var(--era-base);
  opacity: 0.3;
  transition: opacity var(--dur-medium) var(--ease);
}

.era-bar-seg.is-current {
  opacity: 1;
}

.era-bar.is-active .era-bar-seg {
  pointer-events: auto;
}

.era-bar-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 26px;
  padding: var(--space-1) var(--space-4) 0;
  overflow: hidden;
  background: var(--header-bg);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(18px);
  font-variant-numeric: tabular-nums lining-nums;
}

.era-bar-label:empty {
  display: none;
}

/* The season card: a popover by the wave on wide screens, a bottom sheet
   on phones; the border is the colour of the season's era. */
.season-card {
  position: fixed;
  z-index: var(--z-sheet);
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - var(--header-h, 64px) - 24px);
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow-y: auto;
  border: 3px solid var(--era, var(--blue));
  border-radius: var(--radius-xl);
  background: var(--bg-soft);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(13, 27, 42, 0.28) /* token? */;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease);
}

.season-card.is-open {
  opacity: 1;
  transform: none;
}

.season-card.is-instant {
  transition: none;
}

.season-card-handle {
  display: none;
}

.season-card.is-sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: 82vh;
  max-height: 82dvh;
  padding: var(--space-2) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transform: translateY(40px);
}

.season-card.is-sheet.is-open {
  transform: none;
}

.season-card.is-sheet .season-card-handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--muted);
}

.season-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.season-card-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 2.2rem /* token? */;
  line-height: 1 /* token? */;
  font-variant-numeric: tabular-nums lining-nums;
}

.season-card-title:focus {
  outline: none;
}

.season-card-title:focus-visible {
  outline: 3px solid var(--era, var(--blue));
  outline-offset: 3px;
}

.season-card-title .badge-status {
  vertical-align: middle;
  color: var(--ink-soft);
}

.season-card-close {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  cursor: pointer;
}

.season-card-close:hover {
  border-color: var(--era, var(--blue));
}

.season-card-comp {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.season-card-place {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
}

.season-card-label {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-card-place b {
  color: var(--era, var(--ink));
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display);
  line-height: 1.1 /* token? */;
}

.season-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.season-card-stats dt {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.season-card-stats dd {
  margin: 2px 0 0 /* token? */;
  font-size: var(--fs-lead);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
}

.season-card-line {
  margin: var(--space-3) 0 0;
  font-weight: var(--fw-bold);
}

.season-card-note {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  line-height: var(--lh-text);
}

.season-card-era {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: var(--fw-heavy);
}

.season-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.season-card-actions .season-card-era {
  margin-top: 0;
}

.season-card-compare {
  min-height: 36px;
  padding: 5px var(--space-3) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.season-card-compare:hover {
  border-color: var(--era, var(--blue));
}

.season-card-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.season-card-step {
  min-width: 88px;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
}

.season-card-step[data-dir="1"] {
  margin-left: auto;
}

.season-card-step:hover {
  border-color: var(--era, var(--blue));
}

:is(.season-card-close, .season-card-step):focus-visible {
  outline: 3px solid var(--era, var(--blue));
  outline-offset: 2px;
}

/* The album: paper stickers in a scroll-snap strip. The paper stays light
   in the dark theme, so the stickers carry their own ink and era colours
   (the light-theme accents, ≥4.5:1 on the paper). */
.album-count,
.album-got {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-weight: var(--fw-bold);
}

.album.has-js .album-count {
  display: none;
}

.album-done {
  margin: var(--space-2) 0 0;
}

.album-arrows {
  display: flex;
  gap: var(--space-2);
}

.album-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 1.4rem /* token? */;
  line-height: 1 /* token? */;
  cursor: pointer;
}

.album-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.album-arrow:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.album-strip {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-1) var(--space-5);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.sticker {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.sticker.era-sepia { --st: var(--era-sepia); }
.sticker.era-brick { --st: var(--era-brick); }
.sticker.era-gold { --st: var(--era-gold); }
.sticker.era-slate { --st: var(--era-slate); }
.sticker.era-blue { --st: var(--era-blue); }
.sticker.tier-1 { --tier-color: var(--tier-1-print); }
.sticker.tier-2 { --tier-color: var(--tier-2-print); }
.sticker.tier-3 { --tier-color: var(--tier-3-print); }
.sticker.tier-4 { --tier-color: var(--tier-4-print); }

.sticker a {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 200px;
  height: 280px;
  padding: var(--space-4) var(--space-3) var(--space-3);
  overflow: hidden;
  border: 6px solid var(--st);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, rgba(120, 96, 60, 0.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--c-white), var(--c-cream)) /* token? */;
  color: #1f2733 /* token? */;
  text-decoration: none;
  box-shadow: var(--shadow-sm) /* token? */;
  transition: transform var(--dur-medium) var(--ease), box-shadow var(--dur-medium) var(--ease), filter var(--dur-medium) var(--ease);
}

.sticker a::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 8px;
  background: var(--tier-color);
  content: "";
}

.sticker a:hover,
.sticker a:focus-visible {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: 0 14px 26px rgba(13, 27, 42, 0.22) /* token? */;
}

.sticker a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.album.has-js .sticker.is-missing a {
  filter: saturate(0.35);
}

.sticker-num {
  color: var(--st);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sticker-year {
  margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-display, inherit);
  font-size: clamp(2.4rem, 5vw, 3.2rem) /* token? */;
  font-weight: var(--fw-heavy);
  line-height: 1 /* token? */;
  font-variant-numeric: tabular-nums lining-nums;
}

.sticker-year.is-long {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem) /* token? */;
}

.sticker-comp {
  color: #3a4350 /* token? */;
  font-size: var(--fs-label);
  line-height: var(--lh-ui);
}

.sticker-place {
  margin-top: auto;
  color: #3a4350 /* token? */;
  font-size: var(--fs-note);
}

.sticker-place b {
  color: var(--st);
  font-family: var(--font-display, inherit);
  font-size: 1.9rem /* token? */;
  line-height: 1 /* token? */;
}

.sticker-stats {
  margin-top: var(--space-1);
  color: #3a4350 /* token? */;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

.sticker-hero {
  margin-top: 2px /* token? */;
  font-size: var(--fs-label);
  font-weight: var(--fw-heavy);
}

.sticker-missing {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 1px var(--space-2) /* token? */;
  border: 1px dashed #3a4350 /* token? */;
  border-radius: var(--radius-xs);
  color: #3a4350 /* token? */;
  font-size: 0.62rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .album-arrows {
    display: none;
  }

  .sticker a {
    width: 160px;
    height: 224px;
    padding: var(--space-3) var(--space-2) var(--space-2);
  }

  .sticker-year.is-long {
    font-size: 1.5rem /* token? */;
  }

  .sticker-place b {
    font-size: 1.5rem /* token? */;
  }

  .sticker-comp,
  .sticker-stats,
  .sticker-hero {
    font-size: 0.74rem /* token? */;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-era,
  .wave-era-line,
  .history-svg-wide .history-path,
  .history-svg-compact .history-path,
  .eras-aside,
  .era-bar,
  .era-bar-seg,
  .season-card,
  .sticker a {
    transition: none;
  }

  .sticker a:hover,
  .sticker a:focus-visible {
    transform: translateY(-4px);
  }
}

/* «This day in history»: one strip under the wave in the colour of the
   event's era; history.js fills it and shows it only near a dated entry. */
.hd {
  margin: var(--space-1) 0 var(--space-3);
}

.hd-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2) 22px /* token? */;
  align-items: center;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-left: 6px solid var(--era);
  border-radius: var(--radius-md);
  background: var(--era-bg);
}

.hd-year {
  margin: 0;
  color: var(--era);
  font-family: var(--font-display, inherit);
  font-size: clamp(2.4rem, 5vw, 3.4rem) /* token? */;
  font-weight: var(--fw-bold);
  line-height: 1 /* token? */;
  font-variant-numeric: tabular-nums lining-nums;
}

.hd-title {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hd-text {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-text);
  max-width: 72ch;
}

.hd-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
}

.hd-links:empty {
  display: none;
}

.hd-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hd-count {
  min-width: 4ch;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hd-step,
.cmp-swap {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.hd-step:hover {
  border-color: var(--era);
}

.cmp-swap:hover,
.cmp-rec:hover,
.hof-chip:hover {
  border-color: var(--ink-soft);
}

:is(.hd-step, .cmp-swap, .cmp-rec, .hof-chip, .cmp-field select, .cmp-card, .season-card-compare):focus-visible {
  outline: 3px solid var(--amber, var(--blue));
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .hd-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hd-nav {
    justify-self: start;
  }
}

/* Season against season. Without JS only the four record cards show. */
.cmp {
  scroll-margin-top: calc(var(--header-h, 64px) + 8px);
}

.cmp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber, var(--blue));
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
}

.cmp-card:hover {
  border-color: var(--ink-soft);
  border-top-color: var(--amber, var(--blue));
}

.cmp-card-title {
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp-card-value {
  margin-top: var(--space-3);
  color: var(--ink);
  font-family: var(--font-display, inherit);
  font-size: clamp(2.2rem, 3.6vw, 3rem) /* token? */;
  font-weight: var(--fw-bold);
  line-height: 0.95 /* token? */;
  font-variant-numeric: lining-nums tabular-nums;
}

.cmp-card-label {
  margin-top: var(--space-2);
  color: var(--ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.cmp-card-text {
  margin-top: var(--space-1);
  font-size: var(--fs-body-sm);
}

.cmp-recs,
.hof-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cmp-rec,
.hof-chip {
  min-height: 40px;
  padding: 7px 15px /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
}

.hof-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.cmp-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
  max-width: 640px;
  margin: var(--space-5) 0 var(--space-3);
}

.cmp-field {
  display: grid;
  gap: var(--space-2);
}

.cmp-field span {
  color: var(--ink-soft);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp-field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
}

.cmp-swap {
  width: 44px;
  height: 44px;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cmp-table :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums lining-nums;
}

.cmp-table thead :is(th, td) {
  border-bottom-width: 2px;
}

.cmp-table thead td {
  width: 28%;
}

.cmp-table thead th {
  font-family: var(--font-display, inherit);
  font-size: 1.8rem /* token? */;
  line-height: 1.1 /* token? */;
}

.cmp-table thead .badge-status {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

.cmp-table tbody th {
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cmp-table tbody td {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

.cmp-era {
  border-left: 4px solid var(--era);
  background: var(--era-bg);
}

.cmp-tier {
  display: block;
  color: var(--era);
  font-size: var(--fs-note);
  font-weight: var(--fw-heavy);
}

.cmp-big {
  font-size: 1.25rem /* token? */;
  font-weight: var(--fw-heavy);
}

.cmp-sub {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-semibold);
}

.cmp-table td.is-best {
  background: color-mix(in srgb, var(--amber, var(--blue)) 20%, transparent);
  box-shadow: inset 3px 0 0 var(--amber, var(--blue));
}

.cmp-table tr[data-row="points"] :is(th, td) {
  color: var(--ink-soft);
}

.cmp-note {
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .cmp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: still two columns, the row's name above its two values */
@media (max-width: 720px) {
  .cmp-pick {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-swap {
    justify-self: start;
  }

  .cmp-table,
  .cmp-table thead,
  .cmp-table tbody {
    display: block;
  }

  .cmp-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }

  .cmp-table :is(th, td) {
    border-bottom: 0;
    padding: var(--space-2) var(--space-3);
  }

  .cmp-table thead tr {
    border-bottom-width: 2px;
  }

  .cmp-table thead td {
    display: none;
  }

  .cmp-table thead th {
    font-size: 1.45rem /* token? */;
  }

  .cmp-table tbody th {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
}

@media (max-width: 480px) {
  .cmp-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hall of fame: the four record holders large, then everyone else; the
   strip on top of a card is the era that holds most of his years. */
.hof-filter {
  margin: 0 0 var(--space-5);
}

.hof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hof-rest {
  margin-top: var(--space-4);
}

.hof-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 5px solid var(--era, var(--blue));
  border-radius: var(--radius-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h, 64px) + 16px);
}

.hof-card:target {
  box-shadow: 0 0 0 3px var(--era, var(--blue));
}

.hof-figure {
  margin: 0;
}

.hof-photo-link {
  width: max-content;
  border-radius: var(--radius-md);
}

.hof-photo,
.hof-mini {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}

.hof-photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
}

.is-lead .hof-photo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
}

.hof-mini {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px var(--amber);
}

.hof-face {
  background: var(--bg-tint);
}

.hof-face img,
.hof-face picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hof-initials {
  background: linear-gradient(145deg, var(--steel), var(--sea));
  color: var(--accent-ink);
  font-family: var(--font-display, inherit);
  font-size: 1.35rem /* token? */;
  font-weight: var(--fw-bold);
}

.hof-mini.hof-initials {
  font-size: var(--fs-label);
}

.hof-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.hof-kicker {
  margin: 0 0 2px /* token? */;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hof-name {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.is-lead .hof-name {
  font-size: 1.35rem /* token? */;
}

.hof-years {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem /* token? */;
}

.hof-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.hof-badges li {
  padding: 3px var(--space-2) /* token? */;
  border-radius: var(--radius-sm);
  background: var(--era-bg, var(--bg-tint));
  color: var(--ink);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  line-height: 1.35 /* token? */;
  font-variant-numeric: tabular-nums lining-nums;
}

.hof-era-link {
  margin-top: auto;
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
}

.hof-hero {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-heavy);
}

.hof-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hof-lists.is-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-top: 0;
}

.hof-list {
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.hof-list summary {
  padding: var(--space-3) 0;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}

.hof-list.is-solo {
  padding-top: var(--space-2);
}

.hof-list.is-solo summary {
  display: none;
}

.hof-top {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.hof-top li {
  display: grid;
  grid-template-columns: 2ch 40px minmax(0, 1fr) minmax(64px, 30%) 4ch;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 0 /* token? */;
  border-bottom: 1px solid var(--line);
}

.hof-top li:last-child {
  border-bottom: 0;
}

.hof-rank {
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.hof-row-name {
  min-width: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
}

.hof-row-name small {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

.hof-bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  overflow: hidden;
}

.hof-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share, 0%);
  border-radius: inherit;
  background: var(--blue);
}

.hof-value {
  color: var(--ink);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 1023px) {
  .hof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hof-lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .hof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .hof-rest {
    margin-top: var(--space-3);
  }

  .hof-card {
    padding: var(--space-4) var(--space-3);
  }
}

@media (max-width: 520px) {
  .hof-leads {
    grid-template-columns: minmax(0, 1fr);
  }

  .hof-leads .hof-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .is-lead .hof-photo {
    width: 96px;
    height: 96px;
  }

  .hof-top li {
    grid-template-columns: 2ch 40px minmax(0, 1fr) 4ch;
    grid-template-areas:
      "rank avatar name value"
      ". . bar bar";
    row-gap: var(--space-2);
  }

  .hof-rank { grid-area: rank; }
  .hof-top .hof-mini { grid-area: avatar; }
  .hof-row-name { grid-area: name; }
  .hof-value { grid-area: value; }
  .hof-bar { grid-area: bar; }
}

.history-more {
  margin: var(--space-4) 0 0;
  text-align: center;
}

/* Season status («идёт», «прерван») on .badge: quiet tint, thin border. */
.badge-status {
  margin-left: var(--space-2);
  padding: 1px 7px /* token? */;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  vertical-align: middle;
}

.history-seasons tr.is-current td,
.history-seasons tr.is-current th {
  background: color-mix(in srgb, var(--amber, var(--blue)) 16%, transparent);
}

.history-fn {
  margin-left: 2px /* token? */;
  font-weight: var(--fw-semibold);
}

.history-fn a {
  color: var(--muted);
  text-decoration: none;
}

.history-fn a:hover {
  color: var(--blue);
}

.history-footnotes {
  margin: var(--space-3) var(--space-1) 0;
  padding-left: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: var(--lh-text);
}

.history-footnotes li + li {
  margin-top: var(--space-2);
}

.history-fn-num {
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

/* Two galleries stacked: old ground, then the arena */
.history-stadiums {
  display: grid;
  gap: var(--space-8);
}

.history-stadium {
  margin: 0;
}

.history-stadium-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 68ch;
  margin-bottom: var(--space-4);
}

.history-stadium-head h3 {
  margin: 0;
  font-size: 1.35rem /* token? */;
  letter-spacing: -0.02em;
}

.history-stadium-head p {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

.history-stadium-sub {
  color: var(--muted);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
}

/* Lead photo two columns wide, two smaller ones stacked to its right;
   every frame is 3:2 so the rows line up whatever the file's proportions */
.stadium-photos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stadium-photos li {
  display: flex;
  min-width: 0;
}

.stadium-photos li:first-child {
  grid-row: span 2;
}

.stadium-photo {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.stadium-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 45%;
}

.stadium-photos li:first-child .stadium-photo img {
  aspect-ratio: auto;
  height: 100%;
}

.stadium-photos li:first-child .photo-open {
  flex: 1;
  display: flex;
}

.stadium-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
}

.stadium-photo figcaption strong {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/* the small tiles keep only the title and credit; the story is in the lightbox */
.stadium-photos li:not(:first-child) figcaption > span:not(.card-meta) {
  display: none;
}

.stadium-photo .card-meta a {
  color: inherit;
}

.photo-open {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: zoom-in;
}

.photo-open:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .photo-open img {
    transition: transform 220ms var(--ease) /* token? */;
  }

  .photo-open::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 28, 0.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 40px no-repeat /* token? */;
    opacity: 0;
    transition: opacity 180ms var(--ease) /* token? */;
    pointer-events: none;
  }

  .photo-open:hover img,
  .photo-open:focus-visible img {
    transform: scale(1.05);
  }

  .photo-open:hover::after,
  .photo-open:focus-visible::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-open img,
  .photo-open::after {
    transition: none;
  }
}

/* Lightbox: the full, uncropped photo with the figure's own caption */
.lightbox {
  /* as wide as the photo can be while its height still fits the viewport
     (--ratio is set by app.js from the image's own proportions; --cap keeps
     a 300px portrait from being blown up past 1.5× — the archive scans
     have no more detail to show) */
  width: min(96vw, 1200px, calc((96vh - 170px) * var(--ratio, 1.5)), var(--cap, 1200px));
  max-height: 96vh;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) /* token? */;
}

.lightbox::backdrop {
  background: rgba(8, 18, 28, 0.82) /* token? */;
}

.lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-night);
}

.lightbox-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

.lightbox-kicker {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lightbox-caption strong {
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
}

.lightbox-caption a {
  color: inherit;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-round);
  background: rgba(8, 18, 28, 0.7) /* token? */;
  color: var(--c-cream);
  font-size: 0;
  cursor: pointer;
}

.lightbox-close {
  top: 10px;
  right: 10px;
}

.lightbox-close::before {
  content: "\00d7";
  font-size: 26px /* token? */;
  line-height: 44px /* token? */;
}

.lightbox-arrow {
  top: calc(50% - 60px);
}

.lightbox-arrow::before {
  font-size: 30px /* token? */;
  line-height: 44px /* token? */;
}

.lightbox-prev {
  left: 10px;
}

.lightbox-prev::before {
  content: "\2039";
}

.lightbox-next {
  right: 10px;
}

.lightbox-next::before {
  content: "\203a";
}

.lightbox-counter {
  position: absolute;
  top: 18px;
  left: 14px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(8, 18, 28, 0.7) /* token? */;
  color: var(--c-cream);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* Phones: one row you swipe through, the lead frame no longer special */
@media (max-width: 900px) {
  .history-stadiums {
    gap: var(--space-7);
  }

  .stadium-photos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }

  .stadium-photos::-webkit-scrollbar {
    display: none;
  }

  .stadium-photos li {
    scroll-snap-align: start;
  }

  .stadium-photos li:first-child {
    grid-row: auto;
  }

  .stadium-photos li:first-child .stadium-photo img {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .stadium-photos li:first-child .photo-open {
    display: block;
    flex: none;
  }

  /* in the strip every tile is equal: title and credit, the story in the lightbox */
  .stadium-photos li figcaption > span:not(.card-meta) {
    display: none;
  }

  .lightbox {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .lightbox-arrow {
    display: none;
  }
}

/* Поля .container на ≤620px — 11px (100% - 22px), а лента выезжала за них
   на 16px и торчала на 5px за экран, давая странице горизонтальный скролл.
   Выезд и внутренний отступ — ровно в поле. */
@media (max-width: 620px) {
  .stadium-photos {
    margin-right: -11px;
    margin-left: -11px;
    padding-right: 11px;
    padding-left: 11px;
    scroll-padding-inline: 11px;
  }
}

/* Roster cards (/squad/) and former players (/players/). The portrait sits
   on Baltika navy with a glow and the shirt number in the line's colour
   (goalkeepers amber, defence blue, midfield teal, attack red); the body is
   the site's card. */
.sc-gk { --pl: 242 177 52; }
.sc-df { --pl: 82 150 255; }
.sc-mf { --pl: 25 179 155; }
.sc-fw { --pl: 255 96 82; }

/* Shared strip of the squad section: /squad/ · /players/ · /transfers/.
   Plain links under the page head; on a phone the row scrolls sideways,
   the padding/margin pair keeps the focus outline from being clipped. */
.squad-nav {
  margin-bottom: var(--space-4);
}

.squad-nav ul {
  display: flex;
  gap: var(--space-3);
  margin: -4px;
  padding: 4px;
  list-style: none;
  overflow-x: auto;
}

.squad-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  text-decoration: none;
  white-space: nowrap;
}

.squad-nav a:hover {
  border-color: var(--blue);
}

.squad-nav a[aria-current="page"] {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  color: var(--accent-ink);
}

.sc-nav {
  margin-top: -6px /* token? */;
  margin-bottom: var(--space-2);
}

.sc-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  text-decoration: none;
}

.sc-chip::before {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: rgb(var(--pl)) /* token? */;
  content: "";
}

.sc-chip b {
  min-width: 1.6em;
  padding: 1px 7px /* token? */;
  border-radius: var(--radius-pill);
  background: rgb(var(--pl) / 0.18) /* token? */;
  font-size: var(--fs-note);
  text-align: center;
}

.sc-chip:hover {
  border-color: rgb(var(--pl)) /* token? */;
}

.sc-line {
  padding: var(--space-2) 0 0;
  scroll-margin-top: 90px;
}

.sc-line-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 26px 0 var(--space-4) /* token? */;
}

.sc-line-title::after {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--pl) / 0.7), transparent) /* token? */;
  content: "";
}

.sc-line-title span {
  color: rgb(var(--pl)) /* token? */;
  filter: brightness(0.55);
  font-size: 0.6em;
}

:root[data-theme="dark"] .sc-line-title span {
  filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-line-title span {
    filter: none;
  }
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

.sc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-medium) var(--ease), box-shadow var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
  /* Landing from the front page's squad strip: the card is scrolled under
     the sticky header and lit up so the eye finds it. */
  scroll-margin-top: 110px;
}

.sc:target {
  border-color: rgb(var(--pl)) /* token? */;
  box-shadow: 0 0 0 4px rgb(var(--pl) / 0.35) /* token? */;
}

.sc-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 230px;
  padding-left: 4%;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 100%, rgb(var(--pl) / 0.45), transparent 70%),
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 28px, transparent 28px 56px),
    linear-gradient(160deg, var(--c-classic-blue), #071f47) /* token? */;
  text-decoration: none;
  isolation: isolate;
}

/* The shirt number: huge, outlined in the line colour, behind the player. */
.sc-num {
  position: absolute;
  top: -8px;
  right: 12px;
  z-index: var(--z-below);
  color: transparent;
  font-family: var(--font-display, inherit);
  font-size: 7.5rem /* token? */;
  font-weight: var(--fw-black);
  line-height: 1 /* token? */;
  -webkit-text-stroke: 2px rgb(var(--pl) / 0.9) /* token? */;
  transition: transform var(--dur-long) var(--ease);
}

.sc-art img {
  display: block;
  width: auto;
  height: 92%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)) /* token? */;
  transition: transform var(--dur-long) var(--ease-spring);
}

.sc-cap {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-round);
  background: var(--c-classic-yellow);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) /* token? */;
  color: var(--c-navy);
  font-weight: var(--fw-black);
}

/* No photo: the initials in the line colour stand in for the portrait. */
.sc-initials {
  align-self: center;
  margin: 0 auto;
  color: rgb(var(--pl)) /* token? */;
  font-family: var(--font-display, inherit);
  font-size: 4.2rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
}

.sc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-4);
  border-top: 3px solid rgb(var(--pl)) /* token? */;
}

.sc-pos {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem /* token? */;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sc-name {
  margin: 0;
  font-family: var(--font-display, inherit);
  line-height: 1.05 /* token? */;
}

.sc-name a {
  color: inherit;
  text-decoration: none;
}

.sc-name a:hover .sc-last {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sc-first {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.sc-last {
  font-size: 1.65rem /* token? */;
}

.sc-ext {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.sc-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem /* token? */;
  font-variant-numeric: tabular-nums lining-nums;
}

.sc-note {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.93rem /* token? */;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: var(--space-2) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}

.sc-stats div {
  display: flex;
  flex-direction: column-reverse;
  padding: 7px var(--space-1) var(--space-2) /* token? */;
}

.sc-stats div:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}

.sc-stats div:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}

.sc-stats dt {
  color: var(--muted);
  font-size: 0.7rem /* token? */;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-stats dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heavy);
}

.sc-nogames {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  color: var(--ink-soft);
  font-size: var(--fs-note);
  line-height: var(--lh-normal);
}

.sc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-size: 0.88rem /* token? */;
}

.sc-official {
  color: var(--muted);
}

.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.sc-foot::after {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  height: 30px;
  border-radius: var(--radius-round);
  background: var(--bg-tint);
  color: var(--ink);
  content: "→";
  transition: transform var(--dur-base) var(--ease);
}

@media (hover: hover) {
  .sc:hover {
    transform: translateY(-5px);
    border-color: rgb(var(--pl) / 0.7) /* token? */;
    box-shadow: 0 24px 46px -26px rgb(var(--pl)) /* token? */;
  }

  .sc:hover .sc-art img {
    transform: scale(1.06);
  }

  .sc:hover .sc-num {
    transform: translateX(-6px) scale(1.05);
  }

  .sc-left:hover {
    border-color: var(--muted);
    box-shadow: var(--shadow-soft);
  }

  .sc:hover .sc-foot::after {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc,
  .sc-art img,
  .sc-num {
    transition: none;
  }
}

a.sc:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Former players: the same card, out of colour, with where they went. */
.sc-left .sc-art {
  justify-content: center;
  padding: 0 0 var(--space-8);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 28px, transparent 28px 56px),
    linear-gradient(160deg, #4a5568, #1f2733) /* token? */;
}

.sc-left .sc-initials {
  color: rgba(255, 255, 255, 0.9) /* token? */;
}

.sc-left .sc-body {
  border-top-color: var(--line);
}

.sc-stamp {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 5px var(--space-3) /* token? */;
  border: 2px solid rgba(255, 255, 255, 0.75) /* token? */;
  border-radius: var(--radius-sm);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

@media (max-width: 620px) {
  .sc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .sc {
    border-radius: var(--radius-xl);
  }

  .sc-art {
    justify-content: center;
    height: 170px;
    padding-left: 0;
  }

  .sc-num {
    font-size: 6rem /* token? */;
    right: 6px;
  }

  .sc-body {
    gap: 5px /* token? */;
    padding: var(--space-3) var(--space-3) var(--space-4);
  }

  .sc-pos {
    font-size: 0.66rem /* token? */;
    letter-spacing: 0.08em;
  }

  .sc-last {
    font-size: 1.2rem /* token? */;
  }

  .sc-first {
    font-size: var(--fs-note);
  }

  .sc-meta {
    font-size: var(--fs-label);
  }

  .sc-note {
    -webkit-line-clamp: 3;
    font-size: var(--fs-note);
  }

  .sc-stats .sc-more {
    display: none;
  }

  .sc-stats dd {
    font-size: 1.05rem /* token? */;
  }

  .sc-stats dt {
    font-size: 0.62rem /* token? */;
    letter-spacing: 0.03em;
  }

  .sc-links {
    flex-direction: column;
    font-size: var(--fs-sm);
  }

  .sc-cap {
    width: 28px;
    height: 28px;
    top: 10px;
    left: 10px;
  }

  .sc-initials {
    font-size: 3rem /* token? */;
  }

  .sc-stamp {
    right: 8px;
    bottom: 8px;
    font-size: 0.66rem /* token? */;
  }
}

/* /players/: who the texts are about. Top six as horizontal cards, then
   everyone A–Z in a two-column list. */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.ph-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid rgb(var(--pl)) /* token? */;
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.ph-face {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-round);
  background:
    radial-gradient(70% 60% at 50% 100%, rgb(var(--pl) / 0.5), transparent 70%),
    linear-gradient(160deg, var(--c-classic-blue), #071f47) /* token? */;
  object-fit: cover;
  object-position: 50% 8%;
}

.ph-initials {
  display: grid;
  place-items: center;
  color: var(--c-white);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
}

.ph-left {
  border-left-color: var(--line);
}

.ph-left .ph-face {
  background: linear-gradient(160deg, #4a5568, #1f2733) /* token? */;
}

.ph-body {
  display: flex;
  flex-direction: column;
  gap: 3px /* token? */;
  min-width: 0;
}

.ph-pos {
  color: var(--muted);
  font-size: 0.7rem /* token? */;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ph-name {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem /* token? */;
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}

.ph-count {
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
}

.ph-latest {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  line-height: 1.35 /* token? */;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (hover: hover) {
  .ph-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
  }

  .ph-card:hover .ph-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

.ph-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.pl-az ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.pl-az a {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--ink);
  font-weight: var(--fw-heavy);
  text-decoration: none;
}

.pl-az a:hover {
  border-color: var(--blue);
}

.pl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-8);
}

.pl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3) /* token? */;
  padding: 9px 0 /* token? */;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
  scroll-margin-top: 110px;
}

.pl-row a {
  color: var(--ink);
  text-decoration: none;
}

.pl-row a:hover {
  text-decoration: underline;
}

.pl-last {
  font-weight: var(--fw-heavy);
}

.pl-pos {
  color: var(--muted);
  font-size: var(--fs-note);
}

.pl-count {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  font-variant-numeric: tabular-nums lining-nums;
}

.pl-tag {
  padding: 1px var(--space-2) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .ph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ph-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .ph-card {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .pl-list {
    columns: 1;
  }
}

/* Quiz (/quiz/): game cards, one question at a time, result with a share
   card. Buttons are the only controls. Each game card is a "cover" in its
   own colour with an emblem (build.py QUIZ_ART); three headline games span
   two columns. Text is white on every card (the eyebrow too: amber missed
   4.5:1 on the lighter ends); the brightest pixel under any line, glare
   included, still gives at least 6:1 (measured in Chrome at 1280/390px). */
.quiz-grid {
  grid-auto-flow: row dense;
}

.quiz-card {
  --g1: #1f3fa8;
  --g2: #5a2bb0;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12) /* token? */;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(150deg, var(--g1), var(--g2)) /* token? */;
  box-shadow: 0 14px 34px -18px var(--g1);
  font: inherit;
  color: var(--c-white);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--dur-medium) var(--ease-spring),
    box-shadow var(--dur-medium) var(--ease);
}

/* The site-wide amber tick on cards would read as a scratch on a cover. */
.rubric-card.quiz-card::before {
  content: none;
}

/* A slow sheen across the cover on hover: the "insert coin" glint. */
.quiz-card::after {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  content: "";
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%) /* token? */;
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease) /* token? */;
}

.quiz-card[data-quiz="forecast"] { --g1: #075e63; --g2: #0b7068; }
.quiz-card[data-quiz="score"] { --g1: #0f3d2a; --g2: #1d6b43; }
.quiz-card[data-quiz="club"] { --g1: #9c2f1b; --g2: #a9431a; }
.quiz-card[data-quiz="history"] { --g1: #5b2617; --g2: #8a3f1c; }
.quiz-card[data-quiz="penalty"] { --g1: #071f47; --g2: var(--c-classic-blue); }
.quiz-card[data-quiz="hl"] { --g1: #7f1854; --g2: #b52a63; }
.quiz-card[data-quiz="order"] { --g1: #26306b; --g2: #2f5ea8; }
.quiz-card[data-quiz="finish"] { --g1: #4f3500; --g2: var(--c-amber-deep); }

.quiz-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 128px;
  color: var(--c-white);
}

.quiz-card-art::before {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  content: "";
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.14), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 14px) /* token? */;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

.quiz-card-art svg {
  width: 96px;
  height: 96px;
  overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)) /* token? */;
  transition: transform var(--dur-long) var(--ease-spring-strong);
}

.quiz-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 22px 22px /* token? */;
}

.quiz-card .eyebrow {
  margin: 0;
  color: var(--c-white);
}

.quiz-card strong {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem /* token? */;
  line-height: 1.1 /* token? */;
  color: var(--c-white);
}

.quiz-card-lead {
  color: rgba(255, 255, 255, 0.86) /* token? */;
}

.quiz-card .card-meta {
  margin-top: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28) /* token? */;
  color: var(--c-white);
  font-size: 0.86rem /* token? */;
  font-weight: var(--fw-bold);
}

.quiz-card .card-meta + .text-link {
  margin-top: var(--space-2);
}

/* The "Play" call to action is a real-looking button, not a text link. */
.quiz-card .text-link {
  margin-top: auto;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--c-classic-yellow);
  box-shadow: 0 4px 0 #c58f12, 0 8px 18px -6px rgba(0, 0, 0, 0.5) /* token? */;
  color: var(--c-navy);
  font-weight: var(--fw-black);
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease), box-shadow var(--dur-short) var(--ease);
}

.quiz-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px /* token? */;
  padding: var(--space-1) 11px var(--space-1) 9px /* token? */;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: #5a2bb0 /* token? */;
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.quiz-card-badge[hidden] {
  display: none;
}

.quiz-card-badge::before {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: #e8364f /* token? */;
  content: "";
  animation: quiz-badge-pulse 1.6s var(--ease-in-out) infinite /* token? */;
}

@keyframes quiz-badge-pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(232, 54, 79, 0.25) /* token? */;
  }
}

@media (hover: hover) {
  .quiz-card:hover {
    transform: translateY(-6px) rotate(-0.4deg);
    box-shadow: 0 26px 46px -18px var(--g1);
  }

  .quiz-card:hover::after {
    transform: translateX(100%);
  }

  .quiz-card:hover .quiz-card-art svg {
    transform: scale(1.12) rotate(-4deg);
  }

  .quiz-card:hover .text-link {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #c58f12, 0 12px 22px -6px rgba(0, 0, 0, 0.55) /* token? */;
  }
}

.quiz-card:active {
  transform: scale(0.98);
}

.quiz-card:active .text-link {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c58f12 /* token? */;
}

.quiz-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

/* Headline cards: emblem on the right, text on the left, two columns. */
@media (min-width: 621px) {
  .quiz-card-wide {
    grid-column: span 2;
    flex-direction: row-reverse;
    min-height: 260px;
  }

  .quiz-card-wide .quiz-card-art {
    flex: 0 0 42%;
    height: auto;
  }

  .quiz-card-wide .quiz-card-art svg {
    width: 150px;
    height: 150px;
  }

  .quiz-card-wide .quiz-card-body {
    padding: 26px var(--space-2) 26px 28px /* token? */;
  }

  .quiz-card-wide strong {
    font-size: var(--fs-display);
  }
}

/* Phones: nine covers stacked would be a long scroll, so each card turns
   sideways (emblem on the right) like the headline cards. */
@media (max-width: 620px) {
  .quiz-card {
    flex-direction: row-reverse;
    min-height: 0;
  }

  .quiz-card-art {
    flex: 0 0 92px;
    height: auto;
  }

  .quiz-card-art::before {
    -webkit-mask-image: linear-gradient(270deg, #000 50%, transparent);
    mask-image: linear-gradient(270deg, #000 50%, transparent);
  }

  .quiz-card-art svg {
    width: 64px;
    height: 64px;
  }

  .quiz-card-body {
    padding: var(--space-4) 0 var(--space-4) var(--space-4);
  }

  .quiz-card strong {
    font-size: var(--fs-h3);
  }
}

/* /penalty/ renders the game into an empty box after the scripts run;
   holding about its height keeps the support block below from jumping
   (the game is ~1100px tall at any width, taller on the narrowest
   phones). Only with scripts on: without them the box stays empty.
   If penalty.js never arrives (blocked, offline), the reserve is dropped
   after 10 s instead of leaving a tall blank gap above the support block.
   !important outranks the reduced-motion reset in baltic.css
   (`* { animation: none !important }`): this zero-length animation moves
   nothing, and without it the gap would never close for those readers. */
@media (scripting: enabled) {
  .quiz-play-penalty:empty {
    min-height: 1080px;
    animation: quiz-play-reserve-release 0s 10s forwards !important /* token? */;
  }
}

@keyframes quiz-play-reserve-release {
  to {
    min-height: 0;
  }
}

@media (scripting: enabled) and (max-width: 360px) {
  .quiz-play-penalty:empty {
    min-height: 1160px;
  }
}

/* Surface (border, radius, background, shadow) comes from the .card group. */
.quiz-frame {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px /* token? */;
}

/* Выход из игры на экране вопроса: кнопка, выглядящая текстовой ссылкой. */
.quiz-exit {
  margin: 0 0 var(--space-3);
}

.quiz-exit-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.quiz-exit-link:hover {
  color: var(--ink);
}

.quiz-bar {
  height: 6px;
  margin: 0 0 22px /* token? */;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
}

.quiz-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--amber);
  transition: width var(--dur-medium) var(--ease);
}

.quiz-question {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem) /* token? */;
  line-height: var(--lh-tight);
  outline: none;
}

/* Headings are focused programmatically for screen readers; no ring for them. */
.quiz-question:focus-visible,
.quiz-result:focus-visible {
  outline: none;
}

.quiz-frame .button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.quiz-media {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-4);
}

.quiz-media img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  object-position: top;
  border-radius: var(--radius-2xl);
  background: var(--bg-tint);
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.quiz-option {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: transparent;
  font: inherit;
  font-size: 1.05rem /* token? */;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-short) var(--ease),
    background var(--dur-short) var(--ease);
}

.quiz-option:hover:not(:disabled),
.quiz-option:focus-visible {
  border-color: var(--blue);
  background: var(--bg-tint);
}

.quiz-option:disabled {
  cursor: default;
  color: var(--muted);
}

.quiz-option.is-right {
  border-color: var(--c-green);
  background: rgba(31, 157, 85, 0.14) /* token? */;
  color: var(--ink);
}

.quiz-option.is-wrong {
  border-color: var(--c-danger);
  background: rgba(214, 69, 69, 0.12) /* token? */;
  color: var(--ink);
}

.quiz-feedback {
  margin-top: 22px /* token? */;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.quiz-verdict {
  margin: 0 0 var(--space-2);
  font-weight: var(--fw-bold);
}

.quiz-verdict.is-right {
  color: var(--c-green);
}

.quiz-verdict.is-wrong {
  color: var(--c-danger);
}

.quiz-note {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.quiz-actions .button {
  margin-left: auto;
}

.quiz-frame-result {
  text-align: center;
}

.quiz-result {
  margin: 0 0 var(--space-3);
  font-size: clamp(3rem, 8vw, 5rem) /* token? */;
  line-height: 1 /* token? */;
  outline: none;
}

.quiz-frame-result .lead {
  margin: 0 auto var(--space-2);
  max-width: 520px;
}

.quiz-card-preview {
  margin: 22px auto /* token? */;
  max-width: 520px;
}

.quiz-card-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.quiz-share,
.quiz-frame-result .quiz-actions {
  justify-content: center;
}

.quiz-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.quiz-frame-result .quiz-actions .button {
  margin-left: 0;
}

@media (max-width: 720px) {
  .quiz-frame {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-2xl);
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* Quiz — player of the day */
.quiz-silhouette {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-4);
}

.quiz-silhouette img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  object-position: top;
  border-radius: var(--radius-2xl);
  background: var(--bg-tint);
  filter: brightness(0);
  transition: filter 0.4s var(--ease) /* token? */;
}

.quiz-silhouette.is-blurred img {
  filter: blur(9px) brightness(0.85);
}

.quiz-silhouette.is-revealed img {
  filter: none;
}

:root[data-theme="dark"] .quiz-silhouette:not(.is-revealed):not(.is-blurred) img {
  filter: brightness(0) invert(0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quiz-silhouette:not(.is-revealed):not(.is-blurred) img {
    filter: brightness(0) invert(0.92);
  }
}

.quiz-hints {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quiz-hints li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.quiz-attempt {
  margin: 0 0 var(--space-3);
}

.quiz-guess-form {
  position: relative;
  margin: 0 0 var(--space-3);
}

.quiz-guess-row {
  display: flex;
  gap: var(--space-3);
}

.quiz-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}

.quiz-input:focus {
  outline: none;
  border-color: var(--blue);
}

.quiz-suggest {
  position: absolute;
  z-index: var(--z-raised-3);
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-soft, var(--card-bg));
  box-shadow: var(--shadow-soft);
}

.quiz-suggest-item {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quiz-suggest-item:hover,
.quiz-suggest-item:focus-visible {
  background: var(--bg-tint);
  outline: none;
}

.quiz-guesses {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quiz-guesses li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-meta);
  text-decoration: line-through;
}

.quiz-frame-daily .quiz-verdict {
  margin-top: 0;
}

.quiz-frame-daily .quiz-actions,
.quiz-frame-finish .quiz-actions {
  justify-content: flex-start;
}

.quiz-frame-daily .quiz-actions .button,
.quiz-frame-finish .quiz-actions .button {
  margin-left: 0;
}

/* Quiz — higher or lower */
.quiz-hl-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.quiz-hl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-tint);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease);
}

.quiz-hl-card.is-right {
  border-color: var(--c-green);
  background: rgba(31, 157, 85, 0.14) /* token? */;
}

.quiz-hl-card.is-wrong {
  border-color: var(--c-danger);
  background: rgba(214, 69, 69, 0.12) /* token? */;
}

.quiz-hl-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-round);
  background: var(--card-bg);
}

.quiz-hl-label {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.quiz-hl-label a {
  color: inherit;
}

.quiz-hl-card .card-meta {
  margin: 0;
}

.quiz-hl-value {
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem) /* token? */;
  font-weight: var(--fw-bold);
  color: var(--amber-text, var(--ink));
}

.quiz-hl-vs {
  align-self: center;
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-hl-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* Quiz — put them in order */
.quiz-order-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.quiz-order-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.quiz-order-card.is-chosen {
  border-color: var(--blue);
  background: var(--bg-tint);
}

.quiz-order-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--ink);
  background: var(--card-bg);
}

.quiz-order-card.is-chosen .quiz-order-badge {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--accent-ink, #fff);
}

.quiz-order-card.is-right .quiz-order-badge {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-white);
}

.quiz-order-card.is-wrong .quiz-order-badge {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-white);
}

.quiz-order-text {
  display: flex;
  flex-direction: column;
  gap: 2px /* token? */;
  min-width: 0;
}

.quiz-order-text .card-meta {
  margin: 0;
}

.quiz-order-when {
  color: var(--amber-text, var(--ink-soft));
}

.quiz-frame-order .quiz-actions {
  justify-content: flex-start;
}


/* Quiz — where will Baltika finish */
.quiz-finish-place {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.6rem) /* token? */;
  font-weight: var(--fw-bold);
  line-height: 1 /* token? */;
  color: var(--amber-text, var(--ink));
}

.quiz-range {
  width: 100%;
  margin: var(--space-2) 0 2px /* token? */;
  accent-color: var(--amber, #c9922f);
}

.quiz-range-scale {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-note);
  color: var(--muted);
}

.quiz-finish-prev {
  border-left: 3px solid var(--amber, #c9922f);
  padding-left: var(--space-3);
}

.quiz-finish-share {
  margin-top: var(--space-4);
}

@media (max-width: 720px) {
  .quiz-hl-pair {
    grid-template-columns: 1fr;
  }

  .quiz-hl-vs {
    justify-self: center;
  }

  .quiz-silhouette img {
    width: 160px;
    height: 160px;
  }
}

/* Match forecast — the box on a match page and the items on /quiz/#forecast */
.forecast {
  margin: 0 0 var(--space-7);
  padding: 22px var(--space-6) var(--space-5) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card-bg);
}

.forecast .eyebrow {
  margin: 0 0 var(--space-2);
}

.forecast-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem) /* token? */;
  line-height: var(--lh-tight);
}

.forecast-q {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-semibold);
}

.forecast-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.forecast-pick {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  overflow-wrap: anywhere;
}

.forecast-pick.is-chosen {
  border-color: var(--blue);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.forecast-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
}

.forecast-score-inputs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.forecast-num {
  width: 3.4em;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-sunken, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.forecast-colon {
  font-weight: var(--fw-bold);
}

.forecast-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-3);
}

.forecast-widget .quiz-verdict {
  margin: 0 0 var(--space-3);
}

.forecast-summary {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem /* token? */;
  font-weight: var(--fw-semibold);
}

.forecast .card-meta {
  margin: 0;
}

.forecast > .card-meta:last-child {
  margin-top: var(--space-3);
}



.forecast-heading {
  margin: 26px 0 var(--space-3) /* token? */;
  font-size: var(--fs-h4);
}

.forecast-list {
  display: grid;
  gap: var(--space-3);
}

.forecast-item {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.forecast-item .card-meta {
  margin: 0 0 var(--space-1);
}

.forecast-teams {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lead);
}

.forecast-history {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.forecast-history li {
  display: grid;
  gap: 2px /* token? */;
  padding: 0 0 0 var(--space-3);
  border-left: 3px solid var(--c-danger);
}

.forecast-history li.is-right {
  border-left-color: var(--c-green);
}

.quiz-frame-forecast .quiz-card-preview {
  margin-top: 22px /* token? */;
}

@media (max-width: 560px) {
  .forecast-picks {
    grid-template-columns: 1fr;
  }

  .forecast-pick {
    text-align: left;
  }
}

/* Quiz — penalties */
.penalty-stage {
  margin: 0 0 var(--space-3);
}

.penalty-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 400 / 460;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  touch-action: none; /* the swipe must not scroll the page */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.penalty-canvas:active {
  cursor: grabbing;
}

.penalty-dots {
  margin: 0 0 var(--space-2);
  font-size: 1.4rem /* token? */;
  letter-spacing: 0.15em;
  text-align: center;
}

.penalty-status {
  min-height: 1.5em;
  text-align: center;
}

.penalty-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 480px;
  margin: var(--space-3) auto var(--space-3);
}

.penalty-zone {
  min-height: 44px;
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-meta);
  text-align: center;
}

.penalty-note {
  text-align: center;
}

.penalty-grid {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-display);
  letter-spacing: 0.1em;
}

.penalty-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
}

.penalty-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.penalty-chips .chip {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-meta);
}

.penalty-chips-label {
  color: var(--muted);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
}

.penalty-mode-note {
  max-width: 480px;
  margin: 0 auto var(--space-3);
  text-align: center;
}

/* Shoot-out: a row of kicks per side, the side's name in small type.
   Sudden death adds kicks, so the icons shrink with their number (--slots,
   set by penalty.js) to keep each side on one line. When even the smallest
   icons do not fit beside the name (narrow phone, large text), the kicks move
   under the name as a whole rather than breaking mid-row. */
.penalty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.3em;
}

.penalty-kicks {
  min-width: 0;
}

/* The live rows under the pitch are sized by penalty.js (--row-size), not
   by a container query: in Safari a size container turned every result
   update into a relayout long enough to drop frames at the moment the ball
   hits the net. The static rows on the result screen keep the query. */
.penalty-grid-rows {
  container-type: inline-size;
}

.penalty-dots .penalty-row {
  font-size: var(--row-size, 1.4rem);
}

.penalty-grid-rows .penalty-row {
  font-size: clamp(0.9rem, calc((100cqi - 5.5rem) / (var(--slots, 5) * 1.9)), 2rem);
}

.penalty-side {
  display: inline-block;
  min-width: 4.5rem;
  font-size: var(--fs-label);
  font-weight: var(--fw-heavy);
  letter-spacing: 0;
  text-align: right;
  vertical-align: middle;
}

/* Kick of the day: the task above the pitch, the 3×3 goal on the result. */
.penalty-task {
  max-width: 480px;
  margin: 0 auto var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  text-align: center;
}

.penalty-day-grid {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3-lg);
  line-height: var(--lh-tight);
  letter-spacing: 0.05em;
  white-space: pre-line;
}

.penalty-grid-rows .penalty-row {
  justify-content: flex-start;
}

.penalty-grid-rows .penalty-side {
  text-align: left;
}

/* /stadium/: how to get to a home match. The map is drawn from the club's
   but recoloured: the way on foot in gold, by car dashed, the chosen gate
   gold, free car parks blue. */
.stadium-match {
  margin-bottom: 28px /* token? */;
  padding: 22px var(--space-6) /* token? */;
  border: 1px solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.stadium-match h2 {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.4rem, 3vw, 1.9rem) /* token? */;
}

.stadium-match h2 a {
  color: inherit;
}

.stadium-match-date {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-weight: var(--fw-bold);
}

.stadium-match-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
}

.stadium-late {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  font-weight: var(--fw-semibold);
}

.stadium-countdown {
  font-weight: var(--fw-bold);
  color: var(--blue);
}

.stadium {
  --sm-land: #f4f6f9;
  --sm-water: rgba(13, 27, 42, 0.12);
  --sm-water-text: #4a6078;
  --sm-road: #d5deea;
  --sm-overpass: #c3cfd9;
  --sm-plaza: #e6ebf1;
  --sm-text: var(--c-steel);
  --sm-stand: var(--c-white);
  --sm-gold: #b88223;
  --sm-casing: var(--c-white);
  --sm-drive: var(--c-sea);
  --sm-gate: var(--c-white);
  --sm-gate-text: #4a6078;
  --sm-gate-line: #b3bfcc;
  --sm-gate-on-text: var(--c-sea);
  --sm-foot: #8a97a6;
  --sm-free: #2f6fb8;
  --sm-other: var(--c-classic-muted);
}

:root[data-theme="dark"] .stadium {
  --sm-land: var(--c-night-card);
  --sm-water: #0a2540;
  --sm-water-text: #8fa9c4;
  --sm-road: var(--c-steel);
  --sm-overpass: #34495f;
  --sm-plaza: var(--c-night-strong);
  --sm-text: #d5deea;
  --sm-stand: var(--c-night-strong);
  --sm-gold: var(--c-amber-light);
  --sm-casing: var(--c-sea);
  --sm-drive: #9fb3c8;
  --sm-gate: var(--c-night-strong);
  --sm-gate-text: #d5deea;
  --sm-gate-line: #4a6078;
  --sm-gate-on-text: var(--c-sea);
  --sm-foot: var(--c-classic-muted);
  --sm-free: #2f6fb8;
  --sm-other: #4a6078;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stadium {
    --sm-land: var(--c-night-card);
    --sm-water: #0a2540;
    --sm-water-text: #8fa9c4;
    --sm-road: var(--c-steel);
    --sm-overpass: #34495f;
    --sm-plaza: var(--c-night-strong);
    --sm-text: #d5deea;
    --sm-stand: var(--c-night-strong);
    --sm-gold: var(--c-amber-light);
    --sm-casing: var(--c-sea);
    --sm-drive: #9fb3c8;
    --sm-gate: var(--c-night-strong);
    --sm-gate-text: #d5deea;
    --sm-gate-line: #4a6078;
    --sm-gate-on-text: var(--c-sea);
    --sm-foot: var(--c-classic-muted);
    --sm-free: #2f6fb8;
    --sm-other: #4a6078;
  }
}

.stadium-layout {
  display: grid;
  gap: var(--space-5) var(--space-7);
  grid-template-areas: "map" "sheet";
  scroll-margin-top: var(--stadium-top, 64px);
}

.stadium-map {
  grid-area: map;
  position: relative;
  margin: 0;
  min-width: 0;
}

.stadium-sheet {
  grid-area: sheet;
  min-width: 0;
}

@media (min-width: 721px) {
  .stadium-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "sheet map";
    align-items: start;
  }

  .stadium-map {
    position: sticky;
    top: calc(var(--stadium-top, 64px) + 16px);
  }
}

.stadium-handle {
  display: none;
}

/* The wizard: three cards; with JS a step folds into its answer. */
.stadium-step {
  margin-bottom: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
}

.stadium-step-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-ui);
}

.stadium-step-title,
.stadium-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.stadium-step-title:focus {
  outline: none;
}

.stadium-step-title:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.stadium-step-head {
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.stadium-step-head:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.stadium-step-n {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: var(--blue-dark);
  color: var(--c-white);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
}

.stadium-step-pick,
.stadium-step-change {
  display: none;
}

.stadium-step.is-folded,
.stadium-step.is-locked {
  padding-block: var(--space-3);
}

.stadium-step.is-folded .stadium-step-title,
.stadium-step.is-locked .stadium-step-title {
  margin: 0;
}

.stadium-step.is-folded .stadium-step-head {
  cursor: pointer;
}

.stadium-step.is-folded .stadium-step-n {
  background: var(--sm-gold);
  color: var(--sm-gate-on-text);
}

.stadium-step.is-folded .stadium-step-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stadium-step.is-folded .stadium-step-pick {
  display: inline;
  font-size: var(--fs-body);
}

.stadium-step.is-folded .stadium-step-change {
  display: inline;
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--blue);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.stadium-step.is-folded .stadium-step-head:hover .stadium-step-change {
  text-decoration-thickness: 2px;
}

.stadium-step.is-locked {
  opacity: 0.55;
}

.stadium-step.is-locked .stadium-step-n {
  background: var(--muted);
}

.stadium-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.stadium-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px var(--space-3) /* token? */;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}

.stadium-mode-icon {
  grid-row: span 2;
  font-size: 1.7rem /* token? */;
  line-height: 1 /* token? */;
}

.stadium-mode strong {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.stadium-mode span:last-child {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.stadium-mode:hover {
  border-color: var(--sm-gold);
}

.stadium-mode[aria-pressed="true"] {
  border-color: var(--sm-gold);
  background: var(--bg-tint);
}

.stadium-mode:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.stadium-step .penalty-chips {
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

.stadium-unknown {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  line-height: var(--lh-body);
}

.stadium-unknown p {
  margin: 0 0 var(--space-3);
}

.stadium-vip {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-ui);
}

.stadium-gate-note {
  margin-bottom: 0;
}

/* The result card: the answer in one glance. */
.stadium-result {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(240, 192, 105, 0.35) /* token? */;
  border-radius: var(--radius-lg);
  background: var(--c-sea);
  color: var(--c-white);
}

.stadium-result p {
  margin: 0;
}

.stadium-result-gate {
  color: var(--c-amber-light);
  font-size: clamp(1.9rem, 6vw, 2.5rem) /* token? */;
  font-weight: var(--fw-heavy);
  line-height: 1.1 /* token? */;
}

.stadium-result-gate.is-home {
  font-size: 1.25rem /* token? */;
  line-height: 1.35 /* token? */;
}

.stadium-result-line {
  margin-top: var(--space-2) !important;
  font-size: 1.08rem /* token? */;
  font-weight: var(--fw-bold);
}

.stadium-result-time {
  margin-top: var(--space-1) !important;
}

.stadium-now {
  margin-top: var(--space-1) !important;
  color: #c3cfd9 /* token? */;
}

.stadium-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14) /* token? */;
}

.stadium-link {
  min-height: 32px;
  padding: 2px 0 /* token? */;
  border: 0;
  background: none;
  color: var(--c-amber-light);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.stadium-link:hover {
  color: var(--c-white);
}

.stadium-link:focus-visible {
  outline: 3px solid var(--c-amber-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.stadium-copied {
  color: #c3cfd9 /* token? */;
  font-size: var(--fs-meta);
  overflow-wrap: anywhere;
}

.stadium.has-js .stadium-time,
.stadium.has-js .stadium-panel-mode {
  display: none;
}

/* The map. */
.stadium-map-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  z-index: var(--z-raised);
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 7px var(--space-3) /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  text-align: center;
  pointer-events: none;
}

.stadium-svg {
  --sm-k: 1.3;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--sm-land);
}

.sm-land {
  fill: var(--sm-land);
}

.sm-river {
  fill: none;
  stroke: var(--sm-water);
  stroke-width: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-road {
  fill: none;
  stroke: var(--sm-road);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-overpass {
  fill: none;
  stroke: var(--sm-overpass);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-plaza {
  fill: var(--sm-plaza);
  stroke: var(--sm-plaza);
  stroke-width: 12;
  stroke-linejoin: round;
}

.sm-park rect {
  fill: var(--sm-other);
}

.sm-park-free rect {
  fill: var(--sm-free);
}

.sm-park text {
  fill: var(--c-white);
  font-size: calc(var(--sm-k) * 9px);
  font-weight: var(--fw-heavy);
  text-anchor: middle;
}

.sm-stand {
  fill: var(--sm-stand);
  stroke: var(--sm-gold);
  stroke-width: 2;
}

.sm-stand-label {
  fill: var(--sm-gate-text);
  font-size: 9px /* token? */;
  font-weight: var(--fw-heavy);
  text-anchor: middle;
}

.sm-pitch {
  fill: #4caf62 /* token? */;
  stroke: var(--c-white);
  stroke-width: 1.5;
}

.sm-foot {
  fill: none;
  stroke: var(--sm-foot);
  stroke-width: 3;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-roundabout {
  fill: var(--sm-land);
  stroke: var(--sm-road);
  stroke-width: 5;
}

.sm-stop {
  fill: var(--sm-free);
  stroke: var(--c-white);
  stroke-width: 2;
}

.sm-kassa {
  fill: #8b4fc4 /* token? */;
  stroke: var(--c-white);
  stroke-width: 2;
}

.sm-landmark {
  fill: var(--sm-text);
}

.sm-label {
  fill: var(--sm-text);
  font-size: calc(var(--sm-k) * 10.5px);
  font-weight: var(--fw-semibold);
  paint-order: stroke;
  stroke: var(--sm-land);
  stroke-width: calc(var(--sm-k) * 3px);
  stroke-linejoin: round;
}

.sm-strong {
  font-weight: var(--fw-heavy);
}

.sm-place {
  font-style: italic;
}

.sm-water {
  fill: var(--sm-water-text);
  stroke: none;
  font-style: italic;
}

.sm-drive {
  fill: none;
  stroke: var(--sm-drive);
  stroke-width: 4;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-walk-casing {
  fill: none;
  stroke: var(--sm-casing);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-walk {
  fill: none;
  stroke: var(--sm-gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-gate circle {
  r: calc(var(--sm-k) * 8px);
  fill: var(--sm-gate);
  stroke: var(--sm-gate-line);
  stroke-width: 1.5;
  transition: fill var(--dur-base);
}

.sm-gate text {
  fill: var(--sm-gate-text);
  font-size: calc(var(--sm-k) * 9px);
  font-weight: var(--fw-heavy);
  text-anchor: middle;
  dominant-baseline: central;
}

.sm-gate.is-on circle {
  r: calc(var(--sm-k) * 10px);
  fill: var(--sm-gold);
  stroke: var(--sm-casing);
  stroke-width: 2.5;
}

.sm-gate.is-on text {
  fill: var(--sm-gate-on-text);
}

.sm-start {
  r: calc(var(--sm-k) * 5px);
  fill: var(--c-white);
  stroke: var(--c-sea);
  stroke-width: 3;
}

.sm-start.is-off {
  display: none;
}

.sm-dot {
  display: none;
  r: calc(var(--sm-k) * 6px);
  fill: var(--sm-gold);
  stroke: var(--c-white);
  stroke-width: calc(var(--sm-k) * 2px);
  pointer-events: none;
}

.sm-dot.is-on {
  display: inline;
}

.sm-pulse {
  r: calc(var(--sm-k) * 10px);
  fill: none;
  stroke: var(--sm-gold);
  stroke-width: calc(var(--sm-k) * 3px);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.sm-pulse.is-pulsing {
  animation: sm-pulse 1.1s var(--ease-out) 2 /* token? */;
}

@keyframes sm-pulse {
  from {
    opacity: 0.6;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

.stadium-map figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-note);
  line-height: var(--lh-body);
}

.stadium-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}

.sm-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sm-key::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 5px;
  border-radius: var(--radius-xs);
}

.sm-key-walk::before { background: var(--sm-gold); }
.sm-key-drive::before { background: repeating-linear-gradient(90deg, var(--sm-drive) 0 6px, transparent 6px 10px); }
.sm-key-gate::before { width: 12px; height: 12px; border-radius: var(--radius-round); background: var(--sm-gold); }
.sm-key-free::before { width: 14px; height: 10px; background: var(--sm-free); }
.sm-key-other::before { width: 14px; height: 10px; background: var(--sm-other); }

.stadium-panel h3,
.stadium-check h2,
.stadium-extra h2 {
  font-size: 1.2rem /* token? */;
}

.stadium-panel h3 {
  margin: 0 0 var(--space-2);
}

.stadium-time {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  font-weight: var(--fw-semibold);
}

.stadium-yandex {
  margin: var(--space-3) 0 0;
}

.stadium-yandex-note {
  margin: var(--space-2) 0 0;
}

.stadium-steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.stadium-steps li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) 56px /* token? */;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  counter-increment: step;
  line-height: var(--lh-body);
}

.stadium-steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: var(--blue-dark);
  color: var(--c-white);
  font-weight: var(--fw-heavy);
}

.stadium-check {
  margin-top: var(--space-5);
}

.stadium-checklist {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.stadium-checklist li {
  position: relative;
  padding-left: 30px /* token? */;
  line-height: var(--lh-body);
}

.stadium-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sm-gold);
  font-weight: var(--fw-heavy);
}

.stadium-sources ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.2em;
}

@media (max-width: 520px) {
  .stadium-modes {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .stadium-mode {
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
  }

  .stadium-match {
    padding: var(--space-4);
  }

  .stadium-step {
    padding: var(--space-3);
  }
}

@media (max-width: 620px) {
  .sm-small {
    display: none;
  }

  .sm-gate circle {
    r: calc(var(--sm-k) * 6.5px);
  }

  .sm-gate text {
    font-size: calc(var(--sm-k) * 8px);
  }

  .sm-gate.is-on circle {
    r: calc(var(--sm-k) * 8.5px);
  }

  .sm-label {
    font-size: calc(var(--sm-k) * 9.5px);
  }
}

/* Phones: the map on top, the steps in a sheet under it — folded to show
   the current step or the result, unfolded to show everything. */
@media (max-width: 720px) {
  /* Share of the layout the sheet shows folded and unfolded; stadium.js
     reads these for dragging. */
  .stadium.has-js {
    --sheet-peek: 0.45;
    --sheet-open: 0.85;
  }

  .stadium.has-js .stadium-layout {
    display: block;
    position: relative;
    height: calc(100svh - var(--stadium-top, 64px) - var(--consent-h, 0px));
    overflow: hidden;
  }

  .stadium.has-js .stadium-map {
    height: calc((1 - var(--sheet-peek)) * 100%);
    min-height: 280px;
  }

  .stadium.has-js .stadium-svg {
    height: 100%;
  }

  .stadium.has-js .stadium-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-raised-2);
    display: flex;
    flex-direction: column;
    height: calc(var(--sheet-open) * 100%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--bg);
    box-shadow: 0 -10px 28px rgba(13, 27, 42, 0.16) /* token? */;
    transform: translateY(calc((1 - var(--sheet-peek) / var(--sheet-open)) * 100%));
    transition: transform var(--dur-medium) var(--ease);
  }

  .stadium.has-js .stadium-sheet.is-open {
    transform: none;
  }

  .stadium.has-js .stadium-handle {
    display: block;
    flex: none;
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: none;
    cursor: grab;
    touch-action: none;
  }

  .stadium.has-js .stadium-handle span {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto;
    border-radius: var(--radius-xs);
    background: var(--muted);
  }

  .stadium.has-js .stadium-handle:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: -3px;
  }

  .stadium.has-js .stadium-sheet-body {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-3) calc((var(--sheet-open) - var(--sheet-peek)) * (100svh - var(--stadium-top, 64px) - var(--consent-h, 0px)));
    overflow-y: auto;
  }

  .stadium.has-js .stadium-sheet.is-open .stadium-sheet-body {
    padding-bottom: var(--space-4);
  }

  .stadium.has-js .stadium-sheet-body figcaption {
    margin: var(--space-4) var(--space-1) 0;
    color: var(--muted);
    font-size: var(--fs-note);
    line-height: var(--lh-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stadium-mode,
  .sm-gate circle,
  .stadium.has-js .stadium-sheet {
    transition: none;
  }

  .sm-pulse.is-pulsing {
    animation: none;
  }
}

/* /matches/ «Now» block (matches_hero in build.py): a dark full-width board
   of the next match on a faint pitch. Outcome pills follow the site rule of
   a dark glyph on green and grey (white is 3.4:1 and 3:1 there). */
.mh {
  --mh-bg-1: var(--c-sea);
  --mh-bg-2: #12324f;
  --mh-ink: var(--c-white);
  --mh-ink-soft: rgba(255, 255, 255, 0.78);
  --mh-line: rgba(255, 255, 255, 0.14);
  --mh-gold: var(--c-amber-light);
  --mh-win: var(--c-win);
  --mh-draw: #8a97a6;
  --mh-loss: var(--c-loss);
  --mh-dark-ink: var(--c-sea);
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0;
  border-radius: 0 0 32px 32px /* token? */;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.07) calc(50% - 1px), rgba(255, 255, 255, 0.07) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(160deg, var(--mh-bg-1), var(--mh-bg-2)) /* token? */;
  color: var(--mh-ink);
}

:root[data-theme="dark"] .mh {
  --mh-bg-1: var(--c-night);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mh {
    --mh-bg-1: var(--c-night);
  }
}

.mh-inner {
  position: relative;
}

.mh-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6);
  color: var(--mh-ink-soft);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.mh-countdown {
  color: var(--mh-gold);
}

.mh-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
}

.mh-board::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='2'%3E%3Ccircle cx='150' cy='150' r='120'/%3E%3Ccircle cx='150' cy='150' r='4' fill='%23fff' fill-opacity='.07'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.mh-team {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  color: var(--mh-ink);
  font-size: 1.25rem /* token? */;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}

a.mh-team:hover .mh-name,
a.mh-team:focus-visible .mh-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mh-crest {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease);
}

a.mh-team:hover .mh-crest,
a.mh-team:focus-visible .mh-crest {
  transform: scale(1.05);
}

.mh-mono {
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.1) /* token? */;
  font-family: var(--font-display, inherit);
  font-size: 2.4rem /* token? */;
}

.mh-team-us::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 140px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(240, 192, 105, 0.3), transparent) /* token? */;
  pointer-events: none;
}

.mh-team-us > * {
  position: relative;
}

.mh-center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding-top: var(--space-1);
  text-align: center;
}

.mh-time {
  font-family: var(--font-display, inherit);
  font-size: 4rem /* token? */;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1 /* token? */;
  letter-spacing: 0.01em;
}

.mh-date {
  color: var(--mh-ink-soft);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.mh-tz {
  color: var(--mh-ink-soft);
  font-size: var(--fs-sm);
}

.mh-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 28px 0 0 /* token? */;
  color: var(--mh-ink-soft);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
}

.mh-chips {
  display: inline-flex;
  gap: var(--space-2);
}

.mh .form-chip {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-heavy);
}

.mh .form-chip.form-w { background: var(--mh-win); color: var(--mh-dark-ink); }
.mh .form-chip.form-d { background: var(--mh-draw); color: var(--mh-dark-ink); }
.mh .form-chip.form-l { background: var(--mh-loss); color: var(--c-white); }

.mh .form-chip:hover,
.mh .form-chip:focus-visible {
  outline: 2px solid var(--mh-ink);
  outline-offset: 2px;
}

.mh-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: 28px /* token? */;
}

.mh .mh-actions a.button.mh-cta:not(.button-ghost) {
  border-color: var(--mh-gold);
  background: var(--mh-gold);
  color: var(--mh-dark-ink);
  font-weight: var(--fw-heavy);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3) /* token? */;
}

.mh .mh-actions a.button.mh-cta:not(.button-ghost):hover,
.mh .mh-actions a.button.mh-cta:not(.button-ghost):focus-visible {
  border-color: var(--mh-ink);
  background: var(--mh-ink);
  color: var(--mh-dark-ink);
}

.mh-link,
.mh .calendar-menu summary {
  color: var(--mh-ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.mh-link:hover,
.mh-link:focus-visible,
.mh .calendar-menu summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mh .calendar-menu {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.mh .calendar-links {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: var(--z-raised-3);
  width: max-content;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  transform: translateX(-50%);
  border: 1px solid var(--mh-line);
  border-radius: var(--radius-md);
  background: var(--mh-bg-1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) /* token? */;
}

.mh .calendar-links a {
  color: var(--mh-ink);
}

.mh-note {
  margin: var(--space-3) 0 0;
  color: var(--mh-ink-soft);
  font-size: var(--fs-label);
  text-align: center;
}

.mh-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--mh-line);
}

.mh-last,
.mh-review {
  display: grid;
  gap: var(--space-1);
  color: var(--mh-ink);
  text-decoration: none;
}

.mh-last {
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: var(--space-3);
}

.mh-last .mh-strip-label {
  grid-column: 1 / -1;
}

.mh-strip-label {
  color: var(--mh-ink-soft);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mh-last-score {
  font-size: 1.05rem /* token? */;
  font-weight: var(--fw-bold);
}

.mh-last-score b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-black);
}

.mh-review-title {
  font-weight: var(--fw-bold);
  line-height: 1.35 /* token? */;
}

.mh-last:hover .mh-last-score,
.mh-last:focus-visible .mh-last-score,
.mh-review:hover .mh-review-title,
.mh-review:focus-visible .mh-review-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mh-result {
  display: inline-block;
  width: fit-content;
  padding: 3px var(--space-3) /* token? */;
  border-radius: var(--radius-pill);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mh-result-w { background: var(--mh-win); color: var(--mh-dark-ink); }
.mh-result-d { background: var(--mh-draw); color: var(--mh-dark-ink); }
.mh-result-l { background: var(--mh-loss); color: var(--c-white); }

.mh-center .mh-result {
  margin-top: var(--space-2);
}

.mh-standing {
  margin: 0;
  color: var(--mh-ink-soft);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  text-align: right;
}

.mh-past .mh-strip {
  grid-template-columns: 1fr;
}

.mh-past .mh-standing {
  text-align: center;
}

.mh a:focus-visible {
  outline: 3px solid var(--mh-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .mh-team .mh-crest {
    animation: mh-in-left var(--dur-medium) var(--ease-out) backwards;
  }

  .mh-board > .mh-team:last-child .mh-crest {
    animation-name: mh-in-right;
  }

  .mh-time {
    animation: mh-fade var(--dur-medium) var(--ease-out) backwards;
  }
}

@keyframes mh-in-left {
  from { opacity: 0; transform: translateX(-12px); }
}

@keyframes mh-in-right {
  from { opacity: 0; transform: translateX(12px); }
}

@keyframes mh-fade {
  from { opacity: 0; }
}

@media (max-width: 620px) {
  .mh {
    padding: 28px 0 /* token? */;
    border-radius: 0;
  }

  .mh-meta {
    margin-bottom: var(--space-5);
    font-size: 0.75rem /* token? */;
  }

  .mh-board {
    gap: var(--space-2);
  }

  .mh-board::before {
    width: 220px;
    height: 220px;
  }

  .mh-team {
    gap: var(--space-3);
    font-size: var(--fs-body);
  }

  .mh-crest {
    width: 64px;
    height: 64px;
  }

  .mh-mono {
    font-size: 1.8rem /* token? */;
  }

  .mh-team-us::before {
    width: 110px;
    height: 96px;
  }

  .mh-time {
    font-size: 3rem /* token? */;
  }

  .mh-date {
    font-size: var(--fs-meta);
  }

  .mh-tz {
    font-size: var(--fs-caption);
  }

  .mh-actions {
    gap: var(--space-3) var(--space-5);
  }

  .mh-actions .mh-cta {
    width: 100%;
  }

  .mh-strip {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .mh-standing {
    text-align: left;
  }
}

/* /matches/ «Сезон» (season_section in build.py, matches.js): one strip of
   rounds with points bars on a whole-season scale and the pace lines
   behind them, a panel per played round, the fixture table as a second
   tab. Without JS both parts show one after the other. baltic.css re-tints
   the outcome colours. */
.season {
  --ss-w: var(--c-green);
  --ss-d: #8a8f98;
  --ss-l: var(--c-loss);
  --ss-l-ink: var(--c-white);
  --ss-gold: var(--c-amber-light);
  --tour-w: 56px;
  --bar-h: 120px;
  --ss-pad: 12px;
}

.season-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-5);
}

.season-head h2 {
  margin: 0;
}

.season-sum {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.season-tabs {
  display: none;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
}

.season.has-js .season-tabs {
  display: inline-flex;
}

.season-tabs [role="tab"] {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.season-tabs [role="tab"]:hover {
  color: var(--ink);
}

.season-tabs [role="tab"][aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}

.season-tabs [role="tab"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.ss-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--fs-note);
}

.ss-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ss-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
}

.ss-key-w i { background: var(--ss-w); }
.ss-key-d i { background: var(--ss-d); }
.ss-key-l i { background: var(--ss-l); }

.ss-key-leader i,
.ss-key-zone i {
  width: 20px;
  height: 0;
  border-radius: 0;
  border-top: 2px solid rgba(240, 192, 105, 0.9) /* token? */;
}

.ss-key-zone i {
  border-top: 2px dashed rgba(200, 71, 58, 0.75) /* token? */;
}

.ss-scroll {
  --fl: 0px;
  --fr: 0px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}

.ss-scroll.fade-l { --fl: 48px; }
.ss-scroll.fade-r { --fr: 48px; }

.ss-scroll:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.ss-inner {
  position: relative;
  width: max-content;
  padding: var(--space-6) var(--ss-pad) var(--space-2);
}

.ss-pace {
  position: absolute;
  top: 24px;
  left: var(--ss-pad);
  width: calc(var(--tours) * var(--tour-w));
  height: var(--bar-h);
  overflow: visible;
  pointer-events: none;
}

.ss-pace line {
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.ss-pace-leader {
  stroke: var(--ss-gold);
  stroke-opacity: 0.7;
}

.ss-pace-zone {
  stroke: var(--c-loss);
  stroke-opacity: 0.5;
  stroke-dasharray: 5 4;
}

.ss-track {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-tour {
  position: relative;
  flex: 0 0 var(--tour-w);
  scroll-snap-align: center;
}

.ss-btn {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  width: 100%;
  margin: 0;
  padding: 0 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ss-btn:hover {
  background: var(--bg-tint);
}

.ss-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.ss-col {
  position: relative;
  width: 100%;
  height: var(--bar-h);
  border-bottom: 1px solid var(--line);
}

.ss-future .ss-col {
  border-bottom: 1px dashed var(--muted);
}

.ss-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 28px;
  height: calc(var(--pts) / var(--pts-max) * 100%);
  margin-left: -14px /* token? */;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transform-origin: bottom;
}

.ss-w .ss-bar, .ss-w .ss-dot { background: var(--ss-w); }
.ss-d .ss-bar, .ss-d .ss-dot { background: var(--ss-d); }
.ss-l .ss-bar, .ss-l .ss-dot { background: var(--ss-l); }

.ss-pts {
  position: absolute;
  right: 0;
  bottom: calc(var(--pts) / var(--pts-max) * 100% + 3px);
  left: 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1 /* token? */;
  text-align: center;
}

.ss-dot {
  width: 8px;
  height: 8px;
  margin-top: var(--space-2);
  border-radius: var(--radius-round);
}

.ss-future .ss-dot {
  border: 2px solid var(--muted);
  box-sizing: border-box;
}

.ss-future.is-next .ss-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px /* token? */;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(240, 192, 105, 0.3) /* token? */;
}

.ss-btn .crest {
  width: 24px;
  height: 24px;
}

.ss-score {
  color: var(--ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--lh-snug);
}

.ss-date {
  color: var(--ink-soft);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--lh-body);
}

.ss-tbc {
  color: var(--amber-text, var(--blue));
  font-weight: var(--fw-black);
  text-decoration: none;
}

.ss-meta {
  color: var(--ink-soft);
  font-size: 0.7rem /* token? */;
  line-height: 1 /* token? */;
}

.ss-round {
  font-weight: var(--fw-heavy);
}

.ss-venue {
  margin-left: 3px /* token? */;
}

.ss-tour.is-open .ss-btn {
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 2px var(--ss-gold);
}

.ss-tour.is-open .ss-bar {
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 3px rgba(13, 27, 42, 0.25) /* token? */;
}

.ss-now {
  position: relative;
  flex: 0 0 0;
  width: 0;
}

.ss-now::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: 0;
  left: -1px;
  width: 2px;
  border-radius: 1px /* token? */;
  background: var(--ss-gold);
}

.ss-now span {
  position: absolute;
  top: -22px;
  left: 0;
  transform: translateX(-50%);
  color: var(--ink-soft);
  font-size: 0.66rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ss-arrows {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.ss-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-h3);
  line-height: 1 /* token? */;
  cursor: pointer;
}

.ss-arrow:hover:not(:disabled) {
  border-color: var(--ink-soft);
}

.ss-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.ss-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: var(--space-4);
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.ss-panel.is-open {
  grid-template-rows: 1fr;
}

.ss-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.ss-panel-body {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.ss-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.ss-panel-head {
  margin: 0;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-close {
  flex: none;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.ss-close:hover {
  color: var(--ink);
  text-decoration: underline;
}

.ss-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.ss-side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
}

.ss-side img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ss-big {
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1 /* token? */;
}

.ss-result {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ss-result-w { background: var(--ss-w); color: var(--c-sea); }
.ss-result-d { background: var(--ss-d); color: var(--c-sea); }
.ss-result-l { background: var(--ss-l); color: var(--ss-l-ink); }

.ss-takeaways {
  margin: var(--space-4) 0 0;
  padding-left: 1.4em;
  line-height: var(--lh-body);
}

.ss-takeaways li + li {
  margin-top: var(--space-2);
}

.ss-article-title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h4);
  line-height: 1.35 /* token? */;
}

.ss-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}

.ss-steps {
  display: inline-flex;
  gap: var(--space-2);
  margin-left: auto;
}

.ss-step {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem /* token? */;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.ss-step:hover:not(:disabled) {
  border-color: var(--ink-soft);
}

.ss-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.season-table {
  margin-top: 28px /* token? */;
}

.season-table-title {
  margin: 0 0 var(--space-3);
}

.season.has-js .season-table {
  margin-top: var(--space-1);
}

.season.has-js .season-table-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.season-table .results-table tr.is-next td:first-child {
  box-shadow: inset 4px 0 0 var(--ss-gold);
}

.season-reviews-title {
  margin: 28px 0 var(--space-3) /* token? */;
}

.season-reviews {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-pre .ss-bar {
  transform: scaleY(0);
}

.ss-pre .ss-pts {
  opacity: 0;
}

.ss-grow .ss-bar {
  transition: transform var(--dur-medium) var(--ease-out) calc(var(--i, 0) * 20ms) /* token? */;
}

.ss-grow .ss-pts {
  transition: opacity var(--dur-base) var(--ease-out) calc(var(--i, 0) * 20ms + var(--dur-short)) /* token? */;
}

@media (prefers-reduced-motion: reduce) {
  .ss-panel,
  .ss-grow .ss-bar,
  .ss-grow .ss-pts {
    transition: none;
  }

  .ss-pre .ss-bar {
    transform: none;
  }

  .ss-pre .ss-pts {
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .season {
    --tour-w: 52px;
    --bar-h: 96px;
  }

  .ss-btn .crest {
    width: 22px;
    height: 22px;
  }

  .ss-score {
    font-size: var(--fs-meta);
  }

  .ss-arrows {
    display: none;
  }

  .ss-panel-body {
    padding: var(--space-4);
  }

  .ss-side {
    font-size: var(--fs-body);
  }

  .ss-side img {
    width: 36px;
    height: 36px;
  }

  .ss-big {
    font-size: var(--fs-h3-lg);
  }

  .ss-steps {
    width: 100%;
    margin-left: 0;
  }

  .ss-step {
    flex: 1;
  }
}

/* /matches/ «League and opponents» (league_section in build.py): the folded
   table on the left, the opponents by next meeting on the right. Every row is
   in the HTML; matches.js hides the data-fold rows and shows the «…» gaps and
   «Full table». Zones are a thin band on the place cell, Baltika's row a gold
   one; a card hovered or focused lights up its club's row. */
.league {
  --lg-gold: var(--c-amber-light);
  --lg-gold-line: var(--amber, #d99a2b);
  --lg-playoff: var(--c-amber);
  --lg-down: var(--c-loss);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-9);
}

:root[data-theme="dark"] .league {
  --lg-gold-line: var(--lg-gold);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league {
    --lg-gold-line: var(--lg-gold);
  }
}

.lg-col {
  min-width: 0;
}

.lg-head {
  margin-bottom: var(--space-4);
}

.lg-head h2 {
  margin: 0;
}

.lg-after {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
}

.lg-standings th,
.lg-standings td {
  padding: 9px var(--space-3) /* token? */;
  vertical-align: middle;
}

.lg-standings th:not(:nth-child(2)),
.lg-standings td:not(.lg-team) {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.lg-standings .crest {
  width: 22px;
  height: 22px;
}

.lg-zone-playoff .lg-pos {
  box-shadow: inset 3px 0 0 var(--lg-playoff);
}

.lg-zone-down .lg-pos {
  box-shadow: inset 3px 0 0 var(--lg-down);
}

.lg-standings tr.is-baltika td {
  background: rgba(240, 192, 105, 0.12) /* token? */;
}

.lg-standings tr.is-baltika .lg-pos {
  box-shadow: inset 4px 0 0 var(--lg-gold);
}

.lg-standings tr.is-baltika .lg-team {
  font-weight: var(--fw-bold);
}

.lg-standings tr.is-linked td {
  background: rgba(240, 192, 105, 0.26) /* token? */;
}

.lg-team-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.lg-move {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}

.lg-up {
  color: var(--win-text);
}

.lg-down {
  color: var(--ink-soft);
}

.lg-pts {
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}

.lg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-note);
}

.lg-key {
  display: inline-flex;
  align-items: center;
  gap: 7px /* token? */;
}

.lg-key i {
  width: 4px;
  height: 14px;
  border-radius: var(--radius-xs);
  background: var(--lg-playoff);
}

.lg-key-down i {
  background: var(--lg-down);
}

.lg-note {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
}

.lg-opps .opp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.lg-opps .opp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease);
}

.lg-opps .opp-card .crest {
  width: 48px;
  height: 48px;
  transition: transform var(--dur-base) var(--ease);
}

.lg-opps .opp-card:hover,
.lg-opps .opp-card:focus-visible {
  border-color: var(--accent);
}

.lg-opps .opp-card:hover .crest,
.lg-opps .opp-card:focus-visible .crest {
  transform: scale(1.06);
}

.lg-opps .opp-card.is-next {
  padding: 13px 7px 11px /* token? */;
  border: 2px solid var(--lg-gold-line);
}

.opp-name {
  font-size: var(--fs-ui);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.opp-next {
  padding: 1px var(--space-2) /* token? */;
  border-radius: var(--radius-pill);
  background: var(--lg-gold);
  color: var(--c-sea);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.opp-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: 2px /* token? */;
}

.os {
  display: inline-flex;
  align-items: center;
  gap: 3px /* token? */;
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.75rem /* token? */;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.os b {
  font-weight: var(--fw-black);
}

.os-v {
  margin-left: 1px /* token? */;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
}

.os-w { border-color: var(--win); background: var(--win); color: var(--sea); }
.os-d { border-color: var(--fog); background: var(--fog); color: var(--sea); }
.os-l { border-color: var(--brick); background: var(--brick); color: var(--c-cream); }

.os-next {
  border-color: var(--lg-gold-line);
  color: var(--ink);
}

@media (max-width: 1023px) {
  .league {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px /* token? */;
  }

  .lg-opps .opp-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 620px) {
  .lg-standings th,
  .lg-standings td {
    padding: var(--space-2) var(--space-1);
  }

  .lg-standings .lg-wdl {
    display: none;
  }

  .lg-standings .team {
    gap: var(--space-2);
  }

  .lg-opps .opp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .lg-opps .opp-card {
    padding: var(--space-3) var(--space-1);
  }

  .lg-opps .opp-card.is-next {
    padding: 9px 3px /* token? */;
  }

  .lg-opps .opp-card .crest {
    width: 40px;
    height: 40px;
  }

  .opp-name {
    font-size: var(--fs-sm);
  }

  .opp-slots {
    gap: 3px /* token? */;
  }

  .os {
    padding: 0 3px /* token? */;
    font-size: 0.7rem /* token? */;
  }

  .os-v {
    display: none;
  }
}

@media (max-width: 360px) {
  .lg-opps .opp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* «Follow the season»: the page ends on the same dark ground it opens with
   (.mh). The calendar tile is calendar_menu() — the same links as in «Now». */
.follow {
  --fl-bg-1: var(--c-sea);
  --fl-bg-2: #12324f;
  --fl-gold: var(--c-amber-light);
  padding: var(--space-9) 0 56px /* token? */;
  border-radius: 32px 32px 0 0 /* token? */;
  background: linear-gradient(160deg, var(--fl-bg-1), var(--fl-bg-2));
  color: var(--c-white);
}

:root[data-theme="dark"] .follow {
  --fl-bg-1: var(--c-night);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .follow {
    --fl-bg-1: var(--c-night);
  }
}

.follow h2 {
  margin: 0 0 22px /* token? */;
  color: var(--c-white);
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 820px;
}

.follow .follow-calendar {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.follow a.follow-tile,
.follow .follow-calendar > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.16) /* token? */;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06) /* token? */;
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}

.follow .follow-calendar > summary::after {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.78) /* token? */;
}

.follow a.follow-tile:hover,
.follow .follow-calendar > summary:hover,
.follow .follow-calendar[open] > summary {
  border-color: var(--fl-gold);
  background: rgba(255, 255, 255, 0.1) /* token? */;
}

.follow-icon {
  flex: none;
  color: var(--fl-gold);
}

.follow .calendar-links {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-raised-3);
  width: max-content;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.16) /* token? */;
  border-radius: var(--radius-md);
  background: var(--fl-bg-1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) /* token? */;
}

.follow .calendar-links a {
  color: var(--c-white);
}

.follow a:focus-visible,
.follow summary:focus-visible {
  outline: 3px solid var(--fl-gold);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .follow {
    padding: 36px 0 var(--space-8) /* token? */;
    border-radius: 0;
  }

  .follow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .follow .calendar-links {
    position: static;
    width: auto;
    margin: var(--space-2) 0 0;
    box-shadow: none;
  }
}

/* ==== baltic.css ==== */
/* Baltic design — always loaded, after styles.css.

   Palette
   ─────────────────────────────────────────────────────────────────────────
   Deep sea      #0d1b2a  header, buttons, dark-theme background
   Steel blue    #2c4257  muted text, table rules
   Fog           #8fa3b0  secondary text, draw dots
   Amber         #d99a2b  eyebrows, season strip, link underlines
   Amber (text)  #b87d18  amber for text on light backgrounds — 4.6:1 on white
   Amber light   #f0c069  accent in the dark theme, mark in the logo
   Brick         #7d3b2e  losses, dividers, history

   Fonts: Playfair Display (SIL OFL 1.1, see assets/fonts/OFL-PlayfairDisplay.txt),
   self-hosted — no CDN. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-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;
}

:root {
  --sea: var(--c-sea);
  --steel: var(--c-steel);
  --fog: var(--c-fog);
  --amber: var(--c-gold);
  /* Text-only gold (eyebrows, bylines, labels): 4.9:1 on the page background
     and 5.3:1 on cards. #b87d18 was 3.1:1 — fine for rules and icons, which
     keep --amber, not for 12px caps. The dark theme overrides both below. */
  --amber-text: var(--c-gold-text);
  --amber-light: var(--c-amber-light);
  --brick: var(--c-brick);
  --win: var(--c-win);
  /* Text-sized green: --win is 3.1:1 on the page background, fine for dots
     and chips, not for table numbers. #157a41 is 4.8:1 on #eef1f4. */
  --win-text: var(--c-win-text);
  --font-display: var(--font-serif);

  --bg: var(--c-bg);
  --bg-soft: var(--c-bg-soft);
  --bg-tint: var(--c-bg-tint);
  --bg-gradient: var(--c-bg-gradient);
  --header-bg: var(--c-header-bg);
  --card-bg: var(--c-surface);
  --ink: var(--c-text);
  --ink-soft: var(--c-text-soft);
  --muted: var(--c-muted);
  --blue: var(--c-accent);
  --blue-dark: var(--c-accent-strong);
  --accent-ink: var(--c-on-accent);
  --line: var(--c-line);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-md);
  --surface: var(--card-bg);
  --accent: var(--c-link);
  --radius: var(--radius-xl);
  --card-solid: var(--c-surface-solid);
  /* brick pattern: two courses of 60×24 bricks, joints offset by half a brick */
  --brick-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cpath d='M0 .5h60M0 24.5h60M0 48.5h60M.5 0v24M30.5 24v24' fill='none' stroke='%237d3b2e' stroke-opacity='.55'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --bg: var(--c-bg);
  --bg-soft: var(--c-bg-soft);
  --bg-tint: var(--c-bg-tint);
  --bg-gradient: var(--c-bg-gradient);
  --header-bg: var(--c-header-bg);
  --card-bg: var(--c-surface);
  --ink: var(--c-text);
  --ink-soft: var(--c-text-soft);
  --muted: var(--c-muted);
  --blue: var(--c-accent);
  --blue-dark: var(--c-accent-strong);
  --amber: var(--c-gold);
  --amber-text: var(--c-gold-text);
  --win: var(--c-win);
  --win-text: var(--c-win-text);
  --accent-ink: var(--c-on-accent);
  --line: var(--c-line);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-md);
  --accent: var(--c-link);
  --card-solid: var(--c-surface-solid);
  --brick-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cpath d='M0 .5h60M0 24.5h60M0 48.5h60M.5 0v24M30.5 24v24' fill='none' stroke='%23b0654f' stroke-opacity='.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-bg);
    --bg-soft: var(--c-bg-soft);
    --bg-tint: var(--c-bg-tint);
    --bg-gradient: var(--c-bg-gradient);
    --header-bg: var(--c-header-bg);
    --card-bg: var(--c-surface);
    --ink: var(--c-text);
    --ink-soft: var(--c-text-soft);
    --muted: var(--c-muted);
    --blue: var(--c-accent);
    --blue-dark: var(--c-accent-strong);
    --amber: var(--c-gold);
    --amber-text: var(--c-gold-text);
    --win: var(--c-win);
    --win-text: var(--c-win-text);
    --accent-ink: var(--c-on-accent);
    --line: var(--c-line);
    --shadow: var(--shadow-lg);
    --shadow-soft: var(--shadow-md);
    --accent: var(--c-link);
    --card-solid: var(--c-surface-solid);
    --brick-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cpath d='M0 .5h60M0 24.5h60M0 48.5h60M.5 0v24M30.5 24v24' fill='none' stroke='%23b0654f' stroke-opacity='.5'/%3E%3C/svg%3E");
  }
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1,
h2,
.lead-card-body h2,
.rubric-card h3,
.rubric-card h2,
.article-card h3,
.player-head h1,
.opp-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.012em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

h3 {
  letter-spacing: -0.01em;
}

.article-body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.article-body blockquote {
  border-left: 3px solid var(--amber);
  font-family: var(--font-display);
  font-style: italic;
}

.eyebrow,
.card-source {
  color: var(--amber-text);
}

.eyebrow {
  letter-spacing: 0.16em;
  font-weight: var(--fw-heavy);
}

.text-link,
.site-nav a,
.site-footer a,
.article-body a {
  text-decoration-color: var(--amber);
}

.site-nav a[aria-current] {
  color: var(--ink);
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
}

/* ── Header, logo, buttons ───────────────────────────────────────────────── */

.brand-mark {
  background: var(--sea);
  color: var(--amber-light);
  border-radius: var(--radius-md);
  box-shadow: inset 0 -4px 0 rgba(240, 192, 105, 0.3) /* token? */;
}

/* The strip CTA (a span inside the strip's link) wears the button's skin:
   same rest and hover colours, hover driven by the parent link. */
.button,
.quiz-strip-cta {
  border-color: var(--sea);
  background: var(--sea);
  color: var(--accent-ink);
  box-shadow: 0 12px 28px rgba(13, 27, 42, 0.22) /* token? */;
}

/* .sg-hover — замороженный образец наведения на витрине /styleguide/. */
.button:hover,
.button:focus-visible,
.sg-hover.button:not(.button-ghost),
.quiz-strip:hover .quiz-strip-cta,
.quiz-strip:focus-visible .quiz-strip-cta,
.home-tile:hover .quiz-strip-cta,
.home-tile:focus-visible .quiz-strip-cta {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--sea);
}

.button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

.button-ghost:hover,
.button-ghost:focus-visible,
.sg-hover.button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--amber);
}

:root[data-theme="dark"] .button:not(.button-ghost),
:root[data-theme="dark"] .quiz-strip-cta {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: var(--sea);
}

:root[data-theme="dark"] .button:not(.button-ghost):hover,
:root[data-theme="dark"] .sg-hover.button:not(.button-ghost) {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* ── Cards: amber notch that grows along the top edge, cool veil on covers ── */

.card,
.opp-card,
.tg-post,
.tg-channel,
.facts {
  border-radius: var(--radius);
}

.article-card,
.rubric-card,
.match-card,
.opp-card {
  position: relative;
  box-shadow: none;
}

.article-card::before,
.rubric-card::before,
.opp-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  z-index: var(--z-raised-2);
  width: 44px;
  height: 3px;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: var(--amber);
  transition: width var(--dur-long) var(--ease), left var(--dur-long) var(--ease);
}

.article-card:hover::before,
.rubric-card:hover::before,
.opp-card:hover::before,
.article-card:focus-within::before,
.rubric-card:focus-within::before {
  left: 0;
  width: 100%;
  border-radius: 0;
}

.article-card:hover,
.rubric-card:hover {
  transform: none;
  border-color: rgba(217, 154, 43, 0.5) /* token? */;
  box-shadow: var(--shadow-soft);
}

.card-media,
.lead-media,
.article-figure {
  position: relative;
}

.card-media::after,
.lead-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.04) 0%, rgba(13, 27, 42, 0.28) 100%) /* token? */;
  mix-blend-mode: multiply;
}

.card-media img,
.lead-media img {
  filter: saturate(0.86) contrast(1.03);
}

.lead-media {
  border-bottom: 4px solid var(--amber);
}

/* ── Brick: a texture for tinted sections and a course above the footer ──── */

.section-tint {
  position: relative;
  background-color: var(--bg-soft);
}

.section-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: var(--brick-pattern);
  background-size: 60px 48px;
  opacity: 0.18;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.section-tint {
  isolation: isolate;
}

.site-footer {
  border-top: 0;
  padding-top: var(--space-8);
}

.site-footer::before {
  content: "";
  display: block;
  height: 24px;
  margin: -40px 0 var(--space-7) /* token? */;
  background-color: var(--brick);
  background-image: var(--brick-pattern);
  background-size: 60px 48px;
  background-position: 0 -12px;
}

:root[data-theme="dark"] .site-footer::before {
  background-color: #4a2a22 /* token? */;
}

.article-body hr {
  height: 8px;
  border: 0;
  background-color: var(--brick);
  background-image: var(--brick-pattern);
  background-size: 60px 48px;
  opacity: 0.85;
}

/* ── Results, standings, season strip: green wins, fog draws, brick losses */

.form-w { background: var(--win); border-color: var(--win); color: var(--sea); } /* dark glyph: 5:1 on the green, the light one was 3.2:1 */
.form-d { background: var(--fog); border-color: var(--fog); color: var(--sea); }
.form-l { background: var(--brick); border-color: var(--brick); color: var(--c-cream); }

.season {
  --ss-w: var(--win);
  --ss-d: var(--fog);
  --ss-l: var(--brick);
  --ss-l-ink: var(--c-cream);
}

.lg-standings th {
  color: var(--steel);
}

:root[data-theme="dark"] .lg-standings th {
  color: var(--fog);
}

.chip[aria-pressed="true"],
.tag:hover {
  border-color: var(--amber);
}

/* ── Focus and motion ────────────────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .article-card:hover,
  .rubric-card:hover,
  .button:hover {
    transform: none;
  }
}

/* The palette variables above are set for both the explicit toggle and OS
   dark mode, but component overrides were written for the toggle only —
   an OS-dark visitor who never touched the switch got dark variables with
   light-mode components (buttons the colour of the background, invisible
   table headers). Same rules, second selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button:not(.button-ghost),
  :root:not([data-theme="light"]) .quiz-strip-cta {
    background: var(--amber-light);
    border-color: var(--amber-light);
    color: var(--sea);
  }

  :root:not([data-theme="light"]) .button:not(.button-ghost):hover,
  :root:not([data-theme="light"]) .sg-hover.button:not(.button-ghost) {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
  }

  :root:not([data-theme="light"]) .site-footer::before {
    background-color: #4a2a22 /* token? */;
  }

  :root:not([data-theme="light"]) .lg-standings th {
    color: var(--fog);
  }
}

/* ── Covers as one system: category label in the corner, amber edge for full texts */

.card-media::before {
  content: attr(data-category);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: var(--z-raised-2);
  padding: var(--space-1) 9px /* token? */;
  border-radius: var(--radius-sm);
  background: rgba(13, 27, 42, 0.78) /* token? */;
  color: var(--c-cream);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.card-media::after {
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.12) 0%, rgba(13, 27, 42, 0.32) 100%) /* token? */;
}

.card-media img,
.lead-media img {
  filter: saturate(0.9) contrast(1.02);
}

/* ── Page rhythm: matches page alternates bands, articles get air ───────── */

:root {
  --bg-sunken: rgba(44, 66, 87, 0.06);
}

:root[data-theme="dark"] {
  --bg-sunken: rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-sunken: rgba(0, 0, 0, 0.28);
  }
}

.page-matches > .section.container:nth-of-type(odd):not(:first-of-type) {
  padding-top: 56px /* token? */;
  padding-bottom: 56px /* token? */;
  background: var(--bg-sunken);
  box-shadow: 0 0 0 100vmax var(--bg-sunken);
  clip-path: inset(0 -100vmax);
}

.article-body {
  max-width: 68ch;
  font-size: 1.08rem /* token? */;
  line-height: 1.68 /* token? */;
}

.article-body p {
  margin-bottom: 1.55em;
}

.article-body > p:first-of-type {
  font-size: 1.24rem /* token? */;
  line-height: var(--lh-body);
  color: var(--ink);
}

.article-body h2 {
  margin-top: 2.2em;
}

/* ── Type features: ligatures and old-style figures in serif headings, tabular in data */

h1,
h2,
.lead-card-body h2,
.rubric-card h3,
.rubric-card h2,
.article-body h2 {
  font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
}

.lg-standings,
.facts dd,
.countdown {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Official photo on the player page: sea-tinted stage under the cutout */
.player-photo img {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(13, 27, 42, 0.28), transparent 70%),
    var(--bg-sunken) /* token? */;
}