/*
 * My Football Facts — design system
 *
 * The site is a reference work. People arrive to find a number: who finished
 * fourth in 1997, how many clean sheets Arsenal kept, what the Home
 * Championship table looked like in 1954. Everything here is arranged so the
 * numbers are the thing that reads best on the page.
 *
 * Colour comes from what the site already is, not from a rebrand: the navy
 * (#13263D) and the red (#ff1a1b, pulled slightly deeper here so it reads as
 * deliberate rather than fluorescent) are both lifted from the current site.
 *
 * Two typefaces. Archivo is squared-off and slightly condensed, which suits
 * fixtures and league tables and gives headlines some weight without shouting.
 * Inter carries body and — the part that matters — every figure on the site,
 * because its tabular numerals line up in a column and its zero is
 * unmistakable. Both are already-common web faces, and dropping from the four
 * families the old theme loaded to two is most of a second on a cold view.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Brand, taken from the existing site */
  --navy:        #13263D;
  --navy-700:    #1B3557;
  --navy-300:    #7C8FA8;
  --accent:      #D81E2C;   /* their red, deepened for print-like confidence */
  --accent-ink:  #FFFFFF;

  /* Neutrals with a cool bias, so they sit under the navy rather than fight it */
  --ground:      #F6F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #FBFCFD;
  --line:        #E2E6EB;
  --line-strong: #CBD2DA;
  --ink:         #0F172A;
  --ink-2:       #47536420;  /* replaced below; kept so a typo can never render */
  --ink-muted:   #5B6775;
  --ink-faint:   #8A94A1;

  /* Data emphasis. Deliberately not a rainbow: one positive, one negative,
     used only where the table itself means something by them. */
  --band-good:   #0E7C5A;
  --band-bad:    #B4232F;
  --band-neutral:#94A3B8;

  /* Type */
  --font-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* A 1.2 scale, tightened at the top so headlines do not tower over tables */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  2.875rem;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --radius:    6px;
  --radius-lg: 10px;
  --measure:   68ch;
  --wrap:      1240px;
  --wrap-wide: 1440px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, .08);
}

:root { --ink-2: #475564; }

/* The site is read in daylight on a phone at a match as often as at a desk;
   it commits to one light treatment and paints it explicitly rather than
   inheriting whatever the browser assumes. `only light` is the opt-out from
   Chrome for Android's Auto Dark Theme, which would otherwise invert the
   navy bands, the scrims and the white-on-red banners. */
:root { color-scheme: only light; }

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--s-3);
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, var(--t-3xl)); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, var(--t-xl)); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); }

a { color: var(--navy-700); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Every figure on this site should line up with the one above it. */
.num, td, th, time, .stat, table { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- layout -- */

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2rem, var(--wrap-wide)); margin-inline: auto; }

.stack > * + * { margin-top: var(--s-4); }

/* Article shell: a readable column, but tables and figures may break out to
   the full width. A league table squeezed into a 68ch measure is unreadable,
   and that is the single most common thing on this site. */
.prose { max-width: var(--measure); }
.prose > .full-bleed,
.prose > figure,
.prose > table,
.prose > .wptm-wrap,
.prose > .tablepress-wrap { max-width: none; width: 100%; }

/* ------------------------------------------------------------- masthead -- */

.masthead {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: var(--shadow-1);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 60px;
}

.masthead__logo { display: flex; align-items: center; flex: 0 0 auto; }
.masthead__logo img {
  /* Height-driven, because the mark is portrait (319x400). Sizing by width
     would make it 40px tall in a 60px bar; sizing by height keeps it the same
     optical weight as the nav beside it whatever the source file is. */
  height: 40px;
  width: auto;
  display: block;
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }

.nav__item { position: relative; display: flex; align-items: center; gap: 2px; }

.nav a {
  display: block;
  padding: var(--s-2) 0;
  color: #E6EBF2;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover,
.nav__item.is-current > a { color: #fff; border-bottom-color: var(--accent); }

.subnav-toggle {
  background: none;
  border: 0;
  color: #9FB0C4;
  padding: 4px 2px;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}
.subnav-toggle:hover { color: #fff; }
.nav__item[data-open='true'] .subnav-toggle { transform: rotate(180deg); color: #fff; }

/* Submenus open on click, never on hover: a hover menu cannot be opened on a
   phone and cannot be reached from a keyboard, and this site is mostly read on
   phones. */
.subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-2);
  list-style: none;
  margin: 0;
  z-index: 70;
}
.nav__item[data-open='true'] > .subnav { display: block; }
.subnav li { display: block; }
.subnav a {
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  padding: var(--s-2) var(--s-3);
  border-bottom: 0;
  border-radius: var(--radius);
  white-space: normal;
}
.subnav a:hover { background: var(--surface-2); color: var(--accent); border-bottom: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  padding: var(--s-2);
  cursor: pointer;
}

/* --------------------------------------------------------------- pieces -- */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-2);
}

.breadcrumbs {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  padding: var(--s-4) 0 0;
}
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span + span::before { content: '/'; margin: 0 var(--s-2); color: var(--line-strong); }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  padding: var(--s-4) 0;
  border-block: 1px solid var(--line);
  margin: 0 0 var(--s-5);
}
.byline strong { color: var(--ink); font-weight: 600; }

.lede { font-size: var(--t-md); color: var(--ink-2); max-width: var(--measure); }

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-size: var(--t-md); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__meta { margin-top: auto; font-size: var(--t-xs); color: var(--ink-faint); }

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* ------------------------------------------------------- tables (the point) */

/*
 * These rules are written to apply to plain <table> in post content AND to WP
 * Table Manager's markup, because ~3,180 tables are rendered by that plugin and
 * are the substance of the site. WPTM styles by per-cell coordinate class
 * (dtr19 dtc3), so overriding by element is both simpler and more robust than
 * trying to out-specify generated CSS.
 *
 * A wrapper scrolls rather than the page: a 12-column league table on a phone
 * must not make the whole document scroll sideways.
 */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin: 0 0 var(--s-5);
}

.prose table,
.wptm_main_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  background: var(--surface);
}

.prose table th,
.wptm_main_table th,
.prose table td,
.wptm_main_table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

.prose table thead th,
.wptm_main_table thead th,
.wptm_main_table tr:first-child td {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
}

.prose table tbody tr:nth-child(even),
.wptm_main_table tr:nth-child(even) { background: var(--surface-2); }

.prose table tbody tr:hover,
.wptm_main_table tr:hover { background: #EEF3F9; }

/* Numbers right-aligned from the second column on: the first column is almost
   always the club or player and reads as text. */
.prose table td:not(:first-child),
.wptm_main_table td:not(:first-child) { text-align: right; }
.prose table td:first-child,
.wptm_main_table td:first-child { font-weight: 500; white-space: normal; min-width: 9rem; }

/* Club badges inside cells: WPTM cells carry raw <img>, at whatever size the
   original upload happened to be. */
.wptm_main_table td img,
.prose table td img { height: 18px; width: auto; vertical-align: -3px; margin-right: .35rem; }

/*
 * WP Table Manager sets font-family and colours per cell, by generated
 * coordinate class (.dtr19 .dtc3), so element selectors lose to it. These are
 * scoped to the plugin's own container and are the minimum needed to win:
 * the typeface, so figures use the tabular numerals the rest of the site does,
 * and the header, because a stats page with a different blue in every table is
 * the single most dated thing about the current design.
 *
 * Everything else the plugin decides is left alone - the aim is for its tables
 * to look like they belong to the page, not to fight it for control of them.
 */
.wptm_main_table,
.wptm_main_table td,
.wptm_main_table th,
.wptm_main_table td span,
.wptm_main_table td p {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.wptm_main_table thead th,
.wptm_main_table thead td,
.wptm_main_table tr:first-child th,
.wptm_main_table tr:first-child td {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* The plugin marks its own header row on some tables rather than using thead. */
.wptm_main_table tr.wptm_header td,
.wptm_main_table td.wptm_header {
  background-color: var(--navy) !important;
  color: #fff !important;
}

/* WPTM ships its own chrome — pagers, search boxes, export buttons — that we
   are not using and that looks nothing like the rest of the page. */
.wptm_pager, .wptm_search_container, .wptm-export-buttons { display: none !important; }

/* ------------------------------------------------------- link blocks ----- */

/*
 * The blocks that carry the site's internal linking - related posts, other
 * seasons, child sections. Deliberately dense and quiet: they are navigation,
 * not content, and should read as a list rather than compete with the article.
 */
.linkblock { margin: var(--s-7) 0 0; }
.linkblock__title {
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--navy);
  margin-bottom: var(--s-3);
}
.linkblock__list { list-style: none; margin: 0; padding: 0; }
.linkblock__list--cols { columns: 2; column-gap: var(--s-6); }
@media (min-width: 900px) { .linkblock__list--cols { columns: 3; } }
.linkblock__list li {
  break-inside: avoid;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.linkblock__list a { text-decoration: none; color: var(--ink); font-size: var(--t-sm); }
.linkblock__list a:hover { color: var(--accent); }
.linkblock__meta { color: var(--ink-faint); font-size: var(--t-xs); flex: 0 0 auto; }

/* ------------------------------------------------------------- footer ---- */

.site-footer {
  background: var(--navy);
  color: #C6D0DC;
  margin-top: var(--s-8);
  padding: var(--s-7) 0 var(--s-5);
  font-size: var(--t-sm);
}
.site-footer a { color: #D9E2EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 {
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.site-footer__cols {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.site-footer__brand { grid-column: span 2; max-width: 34ch; }
.site-footer__brand p { color: #A9B7C6; margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--navy-300);
  font-size: var(--t-xs);
}

@media (max-width: 640px) { .site-footer__brand { grid-column: span 1; } }

/* ------------------------------------------------------------ utilities -- */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  z-index: 999;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- small -- */

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 60px 0 auto;
    background: var(--navy-700);
    padding: var(--s-4);
  }
  .nav[data-open='true'] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; justify-content: space-between; }
  .nav__item > a { flex: 1; padding: var(--s-3) 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .subnav {
    position: static;
    display: none;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
  }
  .nav__item[data-open='true'] > .subnav { display: block; }
  .subnav a { color: #C6D0DC; padding: var(--s-2) 0; }
  .subnav a:hover { background: none; }
  .masthead__bar { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------- home ------ */

/*
 * The lead is a hero plus a ranked list, not a row of equal cards. Equal cards
 * say every story matters the same amount, which on a news front is never true
 * and makes the reader do the editing.
 */
.home-lead {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-6);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .home-lead { grid-template-columns: 1fr; } }

.home-lead__media { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.home-lead__media img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.home-lead__body { margin-top: var(--s-4); }
.home-lead__body h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.1; margin: var(--s-2) 0 var(--s-3); text-wrap: balance; }
.home-lead__body h2 a { color: inherit; text-decoration: none; }
.home-lead__body h2 a:hover { color: var(--accent); }
.home-lead__standfirst { color: var(--ink-2); font-size: var(--t-md); max-width: 60ch; margin: 0 0 var(--s-3); }

.home-lead__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.home-lead__list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.home-lead__list h3 { font-size: var(--t-md); line-height: 1.25; margin: 2px 0 var(--s-2); text-wrap: balance; }
.home-lead__list h3 a { color: inherit; text-decoration: none; }
.home-lead__list h3 a:hover { color: var(--accent); }
.home-lead__list time { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

a.eyebrow { text-decoration: none; color: var(--accent); }
a.eyebrow:hover { text-decoration: underline; }

/* A rule with the heading sitting in it, so a long page of blocks still reads
   as sections rather than as one continuous list. */
.section-rule {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  border-top: 2px solid var(--navy);
  padding-top: var(--s-3);
  margin: var(--s-7) 0 var(--s-4);
  font-size: var(--t-lg);
}
.section-rule > span { flex: 0 0 auto; }
.section-rule__more {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--accent);
}
.section-rule__more:hover { text-decoration: underline; }

.home-index__grid {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  /* Columns sit at the top of their row rather than stretching to match the
     tallest one, which is what left a screen of white space beside Clubs. */
  align-items: start;
  align-content: start;
}
.home-index__col h3 {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.home-index__col ul { list-style: none; margin: 0; padding: 0; }
.home-index__col li { padding: 0.22rem 0; }
.home-index__col a { font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.home-index__col a:hover { color: var(--accent); }

/* ------------------------------------------------------------- tags ------ */

.taglist { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.taglist a {
  display: inline-block;
  padding: 0.25rem var(--s-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-xs);
  text-decoration: none;
  color: var(--ink-2);
}
.taglist a:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------- footer club row ----- */

/*
 * 49 clubs. As a column it is a scroll nobody finishes; as a wrapped row it is
 * a thing you scan for your own team, which is what people actually do.
 */
.site-footer__clubs { margin-top: var(--s-6); }
.site-footer__clubs ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.site-footer__clubs li + li { margin-top: 0; }
.site-footer__clubs a { font-size: var(--t-xs); color: #B7C4D2; }

/* -------------------------------------------------------- section index -- */

.sectionindex {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.sectionindex__group h3 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-md);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.sectionindex__group h3 a { text-decoration: none; color: var(--ink); }
.sectionindex__group h3 a:hover { color: var(--accent); }
.sectionindex__group h3 .linkblock__meta { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.sectionindex__group ul { list-style: none; margin: 0; padding: 0; }
.sectionindex__group li { padding: 0.2rem 0; }
.sectionindex__group a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-2); }
.sectionindex__group li a:hover { color: var(--accent); }

/* ------------------------------------------------------- search form ----- */

.searchform {
  display: flex;
  gap: var(--s-2);
  max-width: 34rem;
  margin-top: var(--s-4);
}
.searchform input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.searchform input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.searchform button {
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.searchform button:hover { background: var(--accent); }

/* A section too long for a column: one wrapped row instead. */
.home-index__row { margin-top: var(--s-6); }
.home-index__row h3 {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.home-index__row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.home-index__row a { font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.home-index__row a:hover { color: var(--accent); }

/* ================================================================= home == */

/*
 * The front page components. Written mobile-first with min-width queries at
 * 700, 900, 1024 and 1200; the older max-width rules above stay for the
 * archive and single templates.
 *
 * Three rules every component here obeys:
 *   - nothing may create horizontal document overflow: exactly three rails
 *     (ticker, scores, clubs) are overflow-x:auto + scroll-snap, and every
 *     grid child gets min-width:0;
 *   - the front page lives inside .wrap (1240px), never .wrap-wide, so
 *     Playwire's 1260px rail geometry clears the content on 1440-1760px
 *     screens;
 *   - every title is line-clamped, because 95 of the last 200 titles exceed
 *     60 characters.
 *
 * No animation anywhere on the page. The ticker is a static row a reader
 * scrolls by hand (WCAG 2.2.2, and a phone's battery); every reveal is a
 * native <details>.
 */

:root {
  --ink-black:     #121212;
  --ink-inverse:   #FFFFFF;
  --ink-inverse-2: #B7C4D2;
  --ground-2:      #EDF1F5;
  --accent-soft:   #F28B94;  /* the red, lifted so it reads on navy at 4.5:1 */
  --t-4xl:         3.5rem;
  /* White text on the bottom third of a photo stays above 4.5:1. */
  --scrim: linear-gradient(0deg, rgba(19,38,61,.94) 0%, rgba(19,38,61,.55) 55%, rgba(19,38,61,0) 100%);
}

/* The primary nav overflowed the viewport everywhere between 881 and ~1230px
   (document scrollWidth 1,247 at 1,100). The collapse point moves to 1240. */
@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 60px 0 auto;
    background: var(--navy-700);
    padding: var(--s-4);
  }
  .nav[data-open='true'] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; justify-content: space-between; }
  .nav__item > a { flex: 1; padding: var(--s-3) 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .subnav {
    position: static;
    display: none;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
  }
  .nav__item[data-open='true'] > .subnav { display: block; }
  .subnav a { color: #C6D0DC; padding: var(--s-2) 0; }
  .subnav a:hover { background: none; }
  .masthead__bar { justify-content: space-between; }
}

/* ---- rhythm ---- */

/* .home-page, not .home: WordPress puts "home" on <body>, so a .home > *
   rule would reach the masthead and footer. */
.home-page > * { min-width: 0; }
.home-page > .wrap { margin-block: var(--s-5); }
.home-page > .band { margin-block: var(--s-5); padding-block: var(--s-5); }
.home-page > .ticker.band { margin: 0 0 var(--s-4); padding-block: 0; }
.home-page > .scores-band { padding-block: var(--s-4); }
.home-page > .offer-banner { display: none; }
.home-page .section-rule { margin-top: 0; }
@media (min-width: 700px) {
  .home-page > .wrap { margin-block: var(--s-6); }
  .home-page > .band { margin-block: var(--s-6); padding-block: var(--s-6); }
  .home-page > .ticker.band { margin: 0 0 var(--s-5); padding-block: 0; }
  .home-page > .offer-banner { display: block; margin-bottom: var(--s-4); }
  .home-page > .offer-banner + .desk { margin-top: 0; }
}

/* Playwire owns a fixed 320x50 bottom rail on phones; leave it room. */
@media (max-width: 767px) {
  body.home { padding-bottom: 60px; scroll-padding-bottom: 60px; }
}

/* ---- bands ---- */

.band { width: 100%; overflow: hidden; }
.band--navy { background: var(--navy); color: var(--ink-inverse); }
.band--navy h2, .band--navy h3 { color: var(--ink-inverse); }
.band--ground { background: var(--ground-2); border-block: 1px solid var(--line); }

/* ---- headings ---- */

/* The red banner: white Archivo on --accent. --slant adds the black skewed
   tail (story rows only); the quieter .section-rule stays for the index. */
.section-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: clamp(1.25rem, 1rem + 1.4vw, var(--t-2xl));
  line-height: 1;
}
/* .section-banner is a <header>; the h2 inside inherits the banner's size
   so the global heading scale and margin do not apply. */
.section-banner .section-heading__title, .section-rule .section-heading__title { font-size: inherit; line-height: inherit; margin: 0; }
.section-banner .section-heading__title {
  position: relative;
  z-index: 0;
  display: inline-block;
  background: var(--accent);
  color: var(--ink-inverse);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: .3em .6em .28em;
}
.section-banner--slant .section-heading__title::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -.45em;
  width: .9em;
  background: var(--ink-black);
  transform: skewX(-14deg);
  z-index: -1;
}
.section-banner--navy .section-heading__title { background: var(--navy); }
.section-banner__more {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.section-banner .section-rule__more { margin-inline-start: 0; }
/* --accent on --ground is 4.47:1 at 13px, a hair under AA; navy is 11:1. */
.band--ground .section-rule__more { color: var(--navy); }
.section-banner--inverse .section-rule__more { color: var(--ink-inverse); }
.rail-title { font-size: var(--t-md); margin: 0 0 var(--s-2); }

/* ---- chips and stamps ---- */

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  max-width: 100%;
}
.chip--accent { background: var(--accent); color: var(--ink-inverse); }
.chip--navy { background: var(--navy); color: var(--ink-inverse); }
.chip--ghost { background: rgba(19,38,61,.55); color: var(--ink-inverse); border-color: rgba(255,255,255,.4); }
.chip--season {
  background: var(--surface);
  color: var(--navy-700);
  border-color: var(--line-strong);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.chip--season.is-current { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }
.chip:hover { filter: brightness(1.1); text-decoration: underline; color: inherit; }
.chip--accent:hover, .chip--navy:hover, .chip--ghost:hover { color: var(--ink-inverse); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; }
.chip-row--card { margin: 0; gap: 4px; }
/* Navigation chips are tap targets, so they get 36-40px; label chips do not. */
.chip-row:not(.chip-row--card) .chip { min-height: 2.25rem; padding: .3rem .6rem; }
.chip-row:not(.chip-row--card):not(.chip-row--inverse) .chip--ghost { background: var(--surface); color: var(--navy-700); border-color: var(--line-strong); }
.chip-row--inverse .chip--ghost { background: rgba(255,255,255,.08); color: var(--ink-inverse); border-color: rgba(255,255,255,.3); }
.chip-row--inverse .chip--navy { background: var(--accent); }
@media (min-width: 700px) {
  .chip-row:not(.chip-row--card) .chip { min-height: 2.5rem; padding: .4rem .75rem; }
}

/* A chip row past six on a phone: the seventh element is a summary-only
   <details>; chips after it show through the sibling selector once it is
   open. One copy of the markup, no script. */
.chip-row__more { display: inline-flex; }
.chip-row__more > summary { list-style: none; cursor: pointer; }
.chip-row__more > summary::-webkit-details-marker { display: none; }
@media (max-width: 699px) {
  .chip-row--collapsible > a.chip:nth-of-type(n+7) { display: none; }
  .chip-row--collapsible > .chip-row__more[open] ~ a.chip { display: inline-flex; }
  .chip-row--collapsible > .chip-row__more[open] > summary { background: var(--surface); color: var(--navy-700); border-color: var(--line-strong); }
}
@media (min-width: 700px) { .chip-row__more { display: none; } }

.stamp {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.stamp--inverse, .band--navy .stamp { color: var(--ink-inverse-2); }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  cursor: pointer;
}
.btn:hover { background: var(--navy); color: var(--ink-inverse); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.btn--accent:hover { background: var(--navy); border-color: var(--navy); }
.btn--block { width: 100%; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* ---- grids ---- */

.grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
.grid--list { gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.grid--desk, .grid--overlays { align-items: start; }
@media (min-width: 700px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2.grid--list { gap: var(--s-4); }
}
@media (min-width: 900px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 700-899px puts a three-child grid on two tracks; the third child (the
   quiz tile, the Scotland column) would sit alone at half width. */
@media (min-width: 700px) and (max-width: 899px) {
  .grid--play > :last-child, .grid--desk.grid--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
}

/* ---- ticker ---- */

.ticker__inner { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.ticker__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
}
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-inverse); }
.ticker__track {
  list-style: none;
  margin: 0;
  padding: 0 3rem 0 0;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}
.ticker__track::-webkit-scrollbar { display: none; }
/* Hidden until the pointer is over it: with no controls and no script, a
   mouse-only reader had no way to reach items five to eight. */
.ticker__track:hover, .ticker__track:focus-within { scrollbar-width: thin; scrollbar-color: var(--navy-300) transparent; }
.ticker__track:hover::-webkit-scrollbar, .ticker__track:focus-within::-webkit-scrollbar { display: block; height: 6px; }
.ticker__track:hover::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: 3px; }
.ticker__item { flex: 0 0 auto; scroll-snap-align: start; }
.ticker__item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink-inverse);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.ticker__item a:hover { color: var(--ink-inverse); }
.ticker__item a:hover .ticker__title { text-decoration: underline; }
.ticker__date { font-size: var(--t-xs); font-weight: 500; color: var(--navy-300); }

/* ---- mosaic ---- */

/* A flex column on phones with the rail's children taking part in the order
   (display: contents), which is what puts the league table under the hero.
   A 12-column grid with named areas from 1024. */
.mosaic { display: flex; flex-direction: column; gap: var(--s-4); }
.mosaic > * { min-width: 0; }
.mosaic__lead  { order: 1; }
.mosaic__tiles { order: 3; display: grid; gap: var(--s-3); }
.mosaic__row   { order: 3; }
.mosaic__rail  { display: contents; }
.mosaic__hot   { order: 4; }
.mosaic__rail > .league-teaser  { order: 2; }
.mosaic__rail > .promo          { order: 5; align-self: center; margin: 0; }
@media (min-width: 700px) {
  .mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .mosaic__lead, .mosaic__row { grid-column: 1 / -1; }
  .mosaic__tiles { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  /* The rail is a grid item here (display: contents no longer applies) and
     needs its own slot in the order, or it auto-places FIRST - at 700-1023px
     the league table and the Betfred creatives sat above the hero. */
  .mosaic__rail { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; order: 4; }
  .mosaic__hot { grid-column: 1 / -1; order: 5; }
  /* The strip: five numbered items across, numeral above the title. */
  .hot-list--strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-4); }
  .hot-list--strip .hot-list__item { display: flex; flex-direction: column; gap: 4px; padding: 0; border-bottom: 0; border-left: 1px solid var(--line); padding-left: var(--s-3); }
  .hot-list--strip .hot-list__item:first-child { border-left: 0; padding-left: 0; }
  .hot-list--strip .hot-list__title { -webkit-line-clamp: 3; }
}
@media (min-width: 1024px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* grid-area is a shorthand for the row AND column lines, so it must be the
     last placement declaration; a trailing grid-column: auto undid it. */
  .mosaic__lead  { grid-area: lead; }
  .mosaic__tiles { grid-area: tiles; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .mosaic__row   { grid-area: row; }
  .mosaic {
    grid-template-areas:
      'lead lead lead lead lead lead tiles tiles tiles rail rail rail'
      'row  row  row  row  row  row  row   row   row   rail rail rail'
      'hot  hot  hot  hot  hot  hot  hot   hot   hot   rail rail rail';
    /* The rail is the tallest column; the hero must not stretch to meet it. */
    align-items: start;
  }
  .mosaic__hot   { grid-area: hot; }
  /* Exactly five tracks: auto-fit left a sixth, empty one at 1240. */
  .hot-list--strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* align-items: stretch, explicitly: the 700px rule above set start for the
     two-column rail, and start on a column flexbox sizes each child to its
     content - which let the table's min-content push the rail 100px past the
     viewport. */
  .mosaic__rail  { grid-area: rail; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
}

/* ---- overlay cards ---- */

/* Media and body share one grid cell; the body is NOT absolutely positioned.
   The title link's ::after stretches with inset: 0, and it resolves against
   the nearest positioned ancestor - which, with an absolute body, was the
   scrim box, so the top two thirds of every photo was a dead tap target.
   With the body static the ::after resolves against .overlay-card. z-index
   applies to a grid item without position. */
.overlay-card { position: relative; display: grid; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); min-width: 0; }
.overlay-card__media { grid-area: 1 / 1; aspect-ratio: 4 / 3; background: var(--navy-700); min-width: 0; }
.overlay-card__media img, .overlay-card__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.overlay-card__body {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  min-width: 0;
  padding: var(--s-7) var(--s-4) var(--s-4);
  background: var(--scrim);
  color: var(--ink-inverse);
}
.overlay-card__title {
  color: var(--ink-inverse);
  font-weight: 800;
  margin: var(--s-2) 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.overlay-card__title a { color: inherit; text-decoration: none; }
.overlay-card__title a::after { content: ''; position: absolute; inset: 0; }
.overlay-card .chip-row--card a { position: relative; z-index: 2; }
.overlay-card .stamp { color: var(--ink-inverse-2); }
.overlay-card__stand {
  display: none;
  color: var(--ink-inverse-2);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 60ch;
}
.overlay-card__rank {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-soft);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Four lines at 2.25rem rather than three at 3.5rem: the average title is 60
   characters and 15 in 200 pass 80, and the fold was cutting "Nine New
   Managers, One Record Weekend: How the..." before it said anything. */
.overlay-card--lead .overlay-card__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.08; -webkit-line-clamp: 4; }
.overlay-card--tile .overlay-card__title { font-size: var(--t-lg); -webkit-line-clamp: 3; }
.overlay-card--wide .overlay-card__media { aspect-ratio: 2 / 1; }
.overlay-card--wide .overlay-card__title { font-size: var(--t-xl); -webkit-line-clamp: 2; }
.overlay-card--sm .overlay-card__media { aspect-ratio: 16 / 9; }
/* A plate under the rank numeral: "04" over a crowd shot had only a text
   shadow to sit on. */
.overlay-card--sm .overlay-card__media::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 40%; background: linear-gradient(180deg, rgba(19,38,61,.6), transparent); pointer-events: none; }
.overlay-card--sm .overlay-card__media { position: relative; }
.overlay-card--sm .overlay-card__title { font-size: var(--t-lg); -webkit-line-clamp: 2; }
@media (min-width: 700px) {
  .overlay-card__stand { display: -webkit-box; }
}
@media (min-width: 1240px) {
  .overlay-card--lead .overlay-card__title { font-size: var(--t-2xl); }
}
@media (max-width: 699px) {
  .overlay-card--lead .overlay-card__media { aspect-ratio: 3 / 2; max-height: 260px; }
  .overlay-card--lead .overlay-card__body { padding: var(--s-6) var(--s-3) var(--s-3); }
  .overlay-card--lead .overlay-card__title { font-size: var(--t-lg); }
  .overlay-card--wide .overlay-card__media { aspect-ratio: 3 / 2; }
  .overlay-card--wide .overlay-card__title { font-size: var(--t-lg); }
  /* Tiles and record cards become thumb rows: the image is 96px, so the text
     goes beside it. The record cards keep their numeral in a first column and
     their inverse colours inside the navy band. */
  .overlay-card--tile, .overlay-card--sm { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); background: var(--surface); border: 1px solid var(--line); }
  .overlay-card--sm { grid-template-columns: 2.2rem 96px minmax(0, 1fr); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); align-items: center; }
  .overlay-card--tile .overlay-card__media, .overlay-card--sm .overlay-card__media { grid-area: auto; aspect-ratio: 3 / 2; align-self: start; }
  .overlay-card--tile .overlay-card__body, .overlay-card--sm .overlay-card__body { grid-area: auto; align-self: auto; background: none; color: var(--ink); padding: var(--s-3) var(--s-3) var(--s-3) 0; }
  .overlay-card--tile .overlay-card__title, .overlay-card--sm .overlay-card__title { color: var(--ink); font-size: var(--t-base); margin: 4px 0; }
  .overlay-card--tile .stamp { color: var(--ink-muted); }
  .overlay-card--tile .chip--ghost { display: none; }
  .overlay-card--sm .overlay-card__rank { position: static; font-size: var(--t-xl); text-shadow: none; padding-left: var(--s-2); }
  .overlay-card--sm .overlay-card__media::after { display: none; }
  .overlay-card--sm .overlay-card__title { color: var(--ink-inverse); }
  .overlay-card--sm .overlay-card__body { padding: var(--s-2) var(--s-2) var(--s-2) 0; }
}

/* ---- cards, home variants ---- */

.card--home { position: relative; }
.card--home .card__media { position: relative; aspect-ratio: 3 / 2; }
.card--home .card__media .chip-row--card { position: absolute; top: var(--s-2); left: var(--s-2); }
.card--home .chip-row--card a { position: relative; z-index: 2; }
.card--home .card__title {
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--home .card__title a::after { content: ''; position: absolute; inset: 0; }
.card--home .stamp { margin-top: auto; }

/* Thumb rows: always for --row and --row-wide, and below 700px for any card
   inside .grid--rows. */
.card--row, .card--row-wide { flex-direction: row; }
.card--row .card__media, .card--row-wide .card__media { flex: 0 0 96px; aspect-ratio: 3 / 2; align-self: flex-start; }
.card--row .card__media .chip-row--card, .card--row-wide .card__media .chip-row--card { display: none; }
.card--row .card__body, .card--row-wide .card__body { padding: var(--s-2) var(--s-3); gap: 3px; }
.card--row .chip, .card--row-wide .chip { font-size: 10px; padding: 1px 6px; }
.card--row .card__title, .card--row-wide .card__title { font-size: var(--t-base); -webkit-line-clamp: 2; }
@media (min-width: 700px) {
  .card--row-wide .card__media { flex: 0 0 160px; }
  .card--row-wide .card__title { font-size: var(--t-md); }
}
@media (max-width: 699px) {
  .grid--rows { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .grid--rows > .card--grid { flex-direction: row; }
  .grid--rows > .card--grid .card__media { flex: 0 0 96px; aspect-ratio: 3 / 2; align-self: flex-start; }
  .grid--rows > .card--grid .card__media .chip-row--card { display: none; }
  .grid--rows > .card--grid .card__body { padding: var(--s-2) var(--s-3); gap: 3px; }
  .grid--rows > .card--grid .chip { font-size: 10px; padding: 1px 6px; }
  .grid--rows > .card--grid .card__title { font-size: var(--t-base); -webkit-line-clamp: 2; }
}

/* ---- hot list ---- */

.hot-list-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  min-width: 0;
}
.hot-list-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-1); }
.hot-list-block__head h2 { font-size: var(--t-md); margin: 0; }
.hot-list { list-style: none; margin: 0; padding: 0; }
.hot-list__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.hot-list__item:last-child { border-bottom: 0; }
.hot-list__num { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1; color: var(--accent); padding-top: 2px; }
.hot-list__title {
  font-size: var(--t-base);
  line-height: 1.3;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-list__title a { color: var(--ink); text-decoration: none; }
.hot-list__title a:hover { color: var(--accent); }
.hot-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-xs); color: var(--ink-muted); }
.hot-list__meta .chip { padding: 1px 6px; font-size: 10px; }
.hot-list__meta .stamp { margin: 0; }
.hot-list--compact .hot-list__item { grid-template-columns: 1.8rem minmax(0, 1fr); padding: 6px 0; }
.hot-list--compact .hot-list__num { font-size: var(--t-lg); }
.hot-list--compact .hot-list__title { font-size: var(--t-base); }

/* ---- league teaser ---- */

.league-teaser {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  min-width: 0;
}
.league-teaser__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.league-teaser__head h2 { font-size: var(--t-md); margin: 0; }
.table-scroll--compact { border: 0; border-radius: 0; margin: 0; background: transparent; }
.league-teaser__table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.league-teaser__table th, .league-teaser__table td {
  padding: .3rem .3rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  line-height: 1.3;
  vertical-align: middle;
}
.league-teaser__table thead th {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--navy);
}
.league-teaser__table .league-teaser__club {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  min-width: 6.5rem;
  /* 9rem, measured: Pos + P + GD + Pts take ~113px of the 266px rail, and
     "Brighton & Hove Albion" at 10rem pushed the expanded table to 272px. */
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-teaser__table--rest th, .league-teaser__table--rest td { padding-inline: .25rem; }
/* The expanded rows carry W D L GF GA in the DOM but show them only where
   the box is wide enough (the tablet's half-width slot, a full-width phone
   table): in the 266px desktop rail ten columns ran to 387px and rows 7-20
   scrolled sideways with GD and Pts off-screen. A container query, so the
   rule follows the box and not the viewport; browsers without it show the
   same five columns as the top six, which is the safe side. */
.league-teaser__scroll { container-type: inline-size; }
.league-teaser__wdl { display: none; }
@container (min-width: 430px) {
  .league-teaser__wdl { display: table-cell; }
}
.league-teaser__club a { color: var(--ink); text-decoration: none; }
.league-teaser__club a:hover { color: var(--accent); }
.league-teaser__badge { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: .4rem; }
.league-teaser__pos { color: var(--ink-muted); width: 1.6rem; border-left: 3px solid transparent; }
.league-teaser__row--good .league-teaser__pos { border-left-color: var(--band-good); }
.league-teaser__row--bad .league-teaser__pos { border-left-color: var(--band-bad); }
.league-teaser__gd--good { color: var(--band-good); }
.league-teaser__gd--bad { color: var(--band-bad); }
.league-teaser__pts { font-weight: 700; color: var(--ink); }
.league-teaser__all { margin-top: var(--s-2); }
.league-teaser__all[open] > summary { margin-bottom: var(--s-2); }
.league-teaser__foot { font-size: var(--t-sm); margin: var(--s-3) 0 0; }

/* ---- scores ---- */

.scores { display: grid; gap: var(--s-3); }
.scores__row { display: grid; gap: var(--s-2); min-width: 0; }
.scores__label {
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.scores__label:hover { color: var(--ink-inverse); text-decoration: underline; }
.scores__track {
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
}
.scores__item { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
.scores__match {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 170px;
  height: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  color: var(--ink-inverse);
  text-decoration: none;
  font-size: var(--t-sm);
}
.scores__match:hover { background: rgba(255,255,255,.12); color: var(--ink-inverse); }
.scores__when, .scores__state { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-inverse-2); white-space: nowrap; }
.scores__line { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.3; }
.scores__team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores__badge { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; display: inline-block; }
.scores__num { font-size: var(--t-md); font-weight: 800; }
.scores__state .chip { min-height: 0; padding: 0 5px; font-size: 10px; }
.scores__match--all {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 52px;
  background: var(--accent);
  border-color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}
@media (min-width: 700px) {
  .scores__row { grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
}

/* ---- main + rail ---- */

.with-rail { display: grid; gap: var(--s-5); }
.with-rail__main { min-width: 0; display: grid; gap: var(--s-5); }
.with-rail__rail { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.with-rail__rail .promo { margin: 0; align-self: center; }
@media (min-width: 700px) {
  .with-rail__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1024px) {
  .with-rail { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); align-items: start; }
  .with-rail__rail { display: flex; flex-direction: column; align-items: stretch; }
  /* Sticky only where the rail is shorter than the main column, so it is a
     rail that follows rather than a column that never moves. */
  .with-rail__rail--sticky { position: sticky; top: calc(60px + 1rem); }
}

/* ---- hub tiles ---- */

.hub-tiles__title { font-size: var(--t-md); margin: 0 0 var(--s-3); }
.hub-tiles__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-tiles__grid > li { min-width: 0; }
.hub-tiles__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 56px;
  height: 100%;
  padding: var(--s-3);
  background: var(--navy);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  color: var(--ink-inverse);
  text-decoration: none;
}
.hub-tiles__tile:hover { background: var(--navy-700); color: var(--ink-inverse); }
.hub-tiles__label {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-tiles__stamp { font-size: var(--t-xs); font-weight: 500; color: var(--accent-soft); }
.hub-tiles__foot { margin: var(--s-3) 0 0; font-size: var(--t-sm); }
@media (min-width: 900px) {
  .hub-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .hub-tiles__tile { min-height: 96px; padding: var(--s-4); }
  .hub-tiles__label { font-size: var(--t-md); }
}

/* ---- season strip ---- */

.season-strip .chip-row { margin-top: 0; }

/* ---- desks ---- */

.desk__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.desk__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--navy);
  padding-bottom: var(--s-2);
  margin: 0;
}
.desk__head a { color: inherit; text-decoration: none; }
.desk__head a:hover { color: var(--accent); }
.desk__head .desk__all { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); white-space: nowrap; }
.desk__col .chip-row { margin-top: auto; }
.desk__foot { margin: auto 0 0; font-size: var(--t-sm); }
.desk__col .hot-list--compact { margin-bottom: var(--s-2); }
@media (min-width: 900px) { .grid--2-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.linkblock--rail { margin: 0; }
.linkblock--desk { margin: var(--s-2) 0 0; }
.linkblock--desk .linkblock__title { margin-top: 0; }

/* ---- fixtures ---- */

.fixture-list { list-style: none; margin: 0; padding: 0; }
.fixture-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.fixture-row:last-child { border-bottom: 0; }
.fixture-row__link { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: var(--s-2) 0; text-decoration: none; color: var(--ink); min-width: 0; }
.fixture-row__link:hover .fixture-row__teams { color: var(--accent); }
.fixture-row__teams { font-family: var(--font-display); font-weight: 700; font-size: var(--t-base); }
.fixture-row__v { color: var(--ink-faint); font-weight: 400; }
.fixture-row__badge { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: .3rem; }
.fixture-row__time { font-size: var(--t-xs); color: var(--ink-muted); }

/* ---- play ---- */

.grid--play { align-items: stretch; }
.qotd {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.qotd__stamp { margin: 0; }
.qotd__q { font-size: var(--t-lg); font-weight: 700; margin: 0; }
.qotd__a { margin: var(--s-3) 0 0; color: var(--ink-2); }
.qotd__links { font-size: var(--t-sm); margin: auto 0 0; }
.quiz-tile {
  background: var(--navy);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-decoration: none;
  min-width: 0;
}
.quiz-tile:hover { background: var(--navy-700); color: var(--ink-inverse); }
.quiz-tile__num { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; line-height: 1; }
.quiz-tile__label { font-size: var(--t-xs); color: var(--navy-300); text-transform: uppercase; letter-spacing: .08em; }
.quiz-tile__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.15; margin: var(--s-2) 0 auto; }
.quiz-tile .btn { align-self: flex-start; margin-top: var(--s-3); }

/* ---- promos ---- */

/*
 * Sponsored slots. Every variant reserves its box so a lazy creative cannot
 * shift the page, and every variant that is hidden at a breakpoint is
 * display:none so its lazy image is never requested there.
 */
.promo { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 0; min-width: 0; }
.promo__label { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.promo__legal a { color: inherit; }
/* The anchor is a flex item: blockified and given a width, or a width:100%
   image inside it resolves against nothing and the portrait collapses. */
.promo > a { display: block; width: 100%; max-width: 100%; text-align: center; }
.promo__img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.promo__img { margin-inline: auto; }
.promo__legal { font-size: var(--t-xs); color: var(--ink-muted); margin: 0; text-align: center; }
.promo--skyscraper { display: none; }
.promo--skyscraper .promo__img { width: 160px; aspect-ratio: 160 / 600; }
.promo--tile .promo__img { max-width: 250px; }
.promo--portrait .promo__img { width: 100%; max-width: 240px; aspect-ratio: 2 / 5; }
.promo--banner { margin: 0; }
.promo--banner .promo__img { width: 100%; max-width: 970px; aspect-ratio: 970 / 90; }
@media (min-width: 700px) {
  .promo--portrait .promo__img { max-width: 300px; }
}
@media (min-width: 1024px) {
  .promo--skyscraper { display: flex; }
}

.gambling-notice { max-width: var(--measure); font-size: var(--t-sm); color: var(--ink-muted); }
.gambling-notice p { margin: 0 0 var(--s-3); }
.gambling-notice__credit { font-size: var(--t-xs); color: var(--ink-muted); }

/* ---- club rail ---- */

.club-rail__track {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 3rem var(--s-2) 0;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}
.club-rail__item { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
.club-rail__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  min-height: 44px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}
.club-rail__item a:hover { color: var(--accent); }
.club-rail__badge { width: 40px; height: 40px; object-fit: contain; display: block; }
.club-rail__badge--initial { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: var(--ink-inverse); font-family: var(--font-display); font-weight: 800; }
.club-rail__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.club-rail__item--all { align-self: center; }
/* Outranks .club-rail__item a (0,1,1), which painted this navy chip's text
   in the rail's grey: 2:1, unreadable. */
.club-rail__item--all a.chip--navy { width: auto; color: var(--ink-inverse); }
.club-rail__item--all a.chip--navy:hover { color: var(--ink-inverse); background: var(--accent); }

/* ---- signup and follow ---- */

.signup { display: grid; gap: var(--s-5); }
.signup h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.signup__stand { color: var(--ink-2); font-size: var(--t-sm); max-width: 44ch; }
.signup__form p { margin: 0; }
.signup__form form { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.signup__form label { flex: 1 1 12rem; }
.signup__form input[type='email'], .signup__form input[type='text'] {
  width: 100%;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.signup__form input[type='submit'], .signup__form button {
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.signup__form input[type='submit']:hover, .signup__form button:hover { background: var(--navy); }
.social-follow__title { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-2); }
.social-follow__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 900px) {
  .signup { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* ---- browse index ---- */

/*
 * One copy of the links, two shapes. On a phone each section is a
 * summary-only <details>; the list after it shows only while the details is
 * open, through a sibling selector. On desktop the details is hidden, a
 * heading stands in, and every list is visible.
 */
.browse__grid { display: grid; }
.browse__group { min-width: 0; }
.browse__head {
  display: none;
  font-size: var(--t-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--s-2);
}
.browse__head .num { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.browse__toggle > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  list-style: none;
}
.browse__toggle > summary::-webkit-details-marker { display: none; }
.browse__toggle > summary > span:first-child { flex: 1; }
.browse__toggle > summary::after { content: '+'; font-size: var(--t-md); color: var(--ink-faint); }
.browse__toggle[open] > summary::after { content: '\2212'; }
.browse__toggle:not([open]) + .browse__list { display: none; }
.browse__list { list-style: none; margin: 0; padding: var(--s-2) 0 var(--s-3); }
.browse__list li { padding: .15rem 0; }
.browse__list a { font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.browse__list a:hover { color: var(--accent); }
/* One grid track per section. This was a multi-column flow, on the theory
   that balancing seven sections of 3 to 19 links would sit better than one
   uneven track each - but Chrome packs inline-block groups with
   break-inside:avoid into as few columns as they fit, and at 1240px the
   seven groups filled three of five columns and left the right 40% of an
   800px section white. A tall Premier League track beside short ones is
   the lesser fault, and the section is 200px shorter for it. */
@media (min-width: 900px) {
  .browse__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); align-items: start; }
  .browse__head { display: block; }
  .browse__toggle { display: none; }
  .browse__toggle:not([open]) + .browse__list { display: block; }
  .browse__list { padding: 0; }
}
@media (min-width: 1200px) {
  .browse__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-5); }
}

/* Phones: a .list-capped list shows three items until the .list-more
   <details> after it is opened. The toggle is a summary with no content and
   :has() reads its state from the list's side, so nothing moves in the DOM
   and every link stays there for crawlers and readers without :has(), who
   simply see the whole list. This is what took the phone page from 15,400px
   to under the budget. */
.list-more { display: none; }
@media (max-width: 699px) {
  .list-more { display: block; margin-top: var(--s-2); }
  .list-more > summary { list-style: none; cursor: pointer; }
  .list-more > summary::-webkit-details-marker { display: none; }
  .list-more[open] > summary { display: none; }
  .list-capped:has(+ .list-more:not([open])) > :nth-child(n+4) { display: none; }
}

/* Phones: the Europe desk's fifteen reference rows and the hot list run
   long in one column; titles clamp to a line and rows tighten. */
@media (max-width: 699px) {
  .hot-list--compact .hot-list__title { -webkit-line-clamp: 1; }
  .hot-list--compact .hot-list__item { padding: 5px 0; }
  .hot-list__item { padding: 6px 0; }
  .desk__col { padding: var(--s-3); }
  .hub-tiles__tile { min-height: 56px; padding: var(--s-2) var(--s-3); }
  .hub-tiles__grid { gap: var(--s-2); }
}

/* ---- touch targets ---- */

/* Hit areas of 40px+ on touch screens without changing the visual: chips
   grow their padding, the small "More ..." links grow through negative
   margins. */
@media (pointer: coarse), (max-width: 699px) {
  .chip, summary.chip { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
  .section-rule__more, .section-banner__more a { display: inline-block; min-height: 40px; padding: 12px 0; margin: -12px 0; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
  .chip, .btn, .hub-tiles__tile, .quiz-tile { transition: none; }
}