@charset "UTF-8";
/* ===========================================================================
   Gallop Post — style.css
   Hand-written. No framework, no build step, no preprocessor, no CDN.
   Loaded after fonts.css and before dark.css.

   LIGHT is the baseline defined on :root here; dark.css re-declares the same
   tokens under :root[data-theme="dark"]. The document always ships an explicit
   data-theme attribute (render_head() writes dark, the first-paint script may
   rewrite it to light), so neither theme depends on a media query.

   ---------------------------------------------------------------------------
   MEASURED CONTRAST — relative luminance, (L1+0.05)/(L2+0.05), computed not
   guessed. Surfaces: page, panel (--panel), sunk/raised (--panel-2).

                             LIGHT                      DARK
   body text on page     #15181F on #FFFFFF 17.76   #E7EAF0 on #0B0D12 16.13
   body text on panel    #15181F on #F4F5F7 16.28   #E7EAF0 on #141821 14.74
   muted text on page    #5B6372 on #FFFFFF  6.05   #8A93A6 on #0B0D12  6.30
   muted text on panel   #5B6372 on #F4F5F7  5.54   #8A93A6 on #141821  5.76
   link on page          #11726A on #FFFFFF  5.77   #4FD1C5 on #0B0D12 10.42
   link on panel         #11726A on #F4F5F7  5.29   #4FD1C5 on #141821  9.52
   amber on panel  (text)#8F5D0A on #F4F5F7  5.15   #F2A93B on #141821  8.89
   amber on panel  (rule)#B97A14 on #F4F5F7  3.29   #F2A93B on #141821  8.89
   focus ring            #1F8C84 on #FFFFFF  4.08   #1F8C84 on #0B0D12  4.76
                         #1F8C84 on #F4F5F7  3.74   #1F8C84 on #141821  4.35
   .is-win row  (bg)     #DFECE5 vs #FFFFFF  1.22   #19302E vs #141821  1.27
   .is-win row  (text)   #15181F on #DFECE5 14.60   #E7EAF0 on #19302E 11.59
   .is-win row  (rule)   #1E7A47 on #DFECE5  4.39   #35C47B on #19302E  6.21

   The row background alone is a 1.2:1 tint in both themes, which is why every
   .is-win row also carries a 3px rule in --win: 4.39:1 / 6.21:1 against the
   row it sits on, clearing the 3:1 floor for a non-text indicator. Colour is
   never the only carrier.

   SPEC.md COLOURS OVERRIDDEN, HUE KEPT (§2 expects this habit):
   1. --amber-dk #B97A14 was specified as "darkened so it clears 4.5:1". It
      does not: measured 3.59:1 on #FFFFFF and 3.29:1 on #F4F5F7. Kept as the
      non-text accent (rules, fills, bullets — 3.29:1 clears the 3:1 floor) and
      replaced for amber-as-text by #8F5D0A: 5.62:1 on page, 5.15:1 on panel.
      Old 3.29:1 -> new 5.15:1 on panel.
   2. --void #8A93A6 is the muted token. On dark it measures 6.30:1 and stands.
      On light it measures 3.09:1 on #FFFFFF and 2.83:1 on #F4F5F7 — a fail.
      Light muted is #5B6372, same hue family (hsl 221 12% 40% against the
      token's 220 13% 60%). Old 2.83:1 -> new 5.54:1 on panel.
   3. --cyan #4FD1C5 is the link token. On dark, 10.42:1. On light it measures
      1.87:1 — unusable as text. Light links are #11726A, the same teal hue
      darkened. Old 1.87:1 -> new 5.77:1 on page.
   4. The focus ring is a single colour for both themes, #1F8C84, chosen so it
      clears 3:1 against all four surfaces (4.08 / 3.74 light, 4.76 / 4.35
      dark). It is declared here and deliberately NOT overridden in dark.css.

   SCARS CARRIED (research/08-engine.md, "Hard-won fixes"):
    #2  [hidden]{display:none!important} as a global rule — see BASE.
    #3  minmax(0,1fr) on every grid collapse rule. Never a bare 1fr.
    #4  overflow-x:hidden then overflow-x:clip on body, in that order.
    #12 .tablewrap--sticky caps its height or the sticky thead never pins.
    #13 pinned grid track counts, never auto-fit; last odd cell spans.
    #14 no outline:none anywhere; the field rule repeats the ring on purpose.
    #15 .suggest a:hover and a.is-sel are different indicators, not one tint.
    #19 .is-hidden-pot is positioned off-screen, never display:none.
    #24 .drawer caps at 100dvh - --head-h; section-head links wrap on a phone.
    #25 the money grid clamps its mono figure so $14,062.30 still fits.
   =========================================================================== */

/* ============================================================== 1. TOKENS */

:root {
  color-scheme: light;

  /* Type stacks. Oswald, Source Sans 3 and IBM Plex Mono are self-hosted in
     fonts.css as real weights — no synthetic bold anywhere on this site. */
  --head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Surfaces — paper, not a turf club. */
  --page:     #FFFFFF;
  --panel:    #F4F5F7;
  --panel-2:  #EDEFF3;   /* table heads, sunken strips, chips */
  --zebra:    #F7F8FA;   /* table row stripe */
  --line:     #D8DCE3;   /* hairline: 1px, everywhere */
  --line-2:   #C3C9D3;   /* the stronger rule: section heads, table edges */
  --line-3:   #6F7889;   /* field borders — a real indicator, 4.45:1 on page */

  /* Ink */
  --text:     #15181F;
  --text-2:   #3A404B;   /* 10.42:1 on page — secondary body, not muted */
  --muted:    #5B6372;
  --on-accent:#0B0D12;   /* ink on an amber or cyan fill */

  /* Accents */
  --accent:     #B97A14; /* amber as a fill or a rule (non-text) */
  --accent-text:#8F5D0A; /* amber as text */
  --link:       #11726A;
  --link-hover: #0C5C55;
  --ochre:      #9A5423; /* track dirt: codes, charts, the harness mark */
  --win:        #1E7A47;
  --error:      #C0343A;
  --void:       #6F7889; /* the steel hue as a non-text indicator */

  /* State surfaces */
  --win-row:  #DFECE5;
  --sel-row:  #E2E6EC;   /* the keyboard cursor in a suggest list */
  --hover-row:#EDEFF3;
  --accent-wash: #FBF3E3;
  --ok-wash:  #E8F2ED;
  --bad-wash: #FBEAEA;
  --ok-ink:   #15603A;
  --bad-ink:  #A42A30;

  /* One ring, both themes. 4.08:1 on page / 3.74:1 on panel (light),
     4.76:1 / 4.35:1 (dark). Not overridden in dark.css. */
  --ring: #1F8C84;

  /* The hero scrim is dark in both themes because a photograph under it is
     dark in both themes. These four are literals, never theme tokens. */
  --scrim:      #0B0D12;
  --scrim-text: #F0F2F6;
  --scrim-dim:  #C2C9D6;
  --scrim-amber:#F2A93B;

  /* Metrics */
  --gut: 20px;
  --max: 1200px;
  --head-h: 58px;
  --r: 4px;              /* square-ish. The sibling uses 8px and soft shadows. */
  --r-sm: 2px;

  /* Type scale */
  --fs-body: 17px;
  --lh-body: 1.65;
  --fs-small: 14px;
  --fs-tiny: 12.5px;
  --fs-table: 14.5px;

  --t: 140ms;            /* every transition reads this; reduced-motion zeroes it */
}

@media (max-width: 419px) {
  /* 360px phones: 13px of gutter leaves 334px of column. */
  :root { --gut: 13px; }
}
@media (min-width: 720px)  { :root { --gut: 26px; --head-h: 62px; } }
@media (min-width: 1040px) { :root { --gut: 32px; --head-h: 66px; } }

/* ================================================================ 2. BASE */

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

/* SCAR #2 — this must be a global !important rule. The client-side filters in
   main.js hide rows by setting row.hidden = true, and any author display: on
   the row (every .card, .rtile, .pcard, .rcard and .vcard carries one) beats
   the user-agent [hidden] rule. Without this, a filtered card stays on screen
   while the counter says it is gone. It is also what lets a filter attach
   data-row to any element at all. */
[hidden] { display: none !important; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors (#comments, #the-draw, #result) must clear the sticky masthead. */
  scroll-padding-top: calc(var(--head-h) + 14px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--body);
  font-synthesis-weight: none;   /* real weights are installed; never fake one */
  -webkit-font-smoothing: antialiased;
  /* A race name, a venue or a seed can be one unbreakable token wider than a
     360px column, and body is overflow-x:clip — it would be cut, not scrolled.
     Only .tablewrap opts into a sideways scroll. */
  overflow-wrap: break-word;
  /* SCAR #4 — hidden first as the fallback, then clip. overflow-x:hidden makes
     body a scroll container, and position:sticky on .masthead and the sidebar
     then pins to a box that never scrolls. Order matters. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--head);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.005em;   /* Oswald, tracked slightly tight */
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 5.4vw, 40px); }
h2 { font-size: clamp(23px, 3.4vw, 30px); }
h3 { font-size: clamp(19px, 2.4vw, 23px); }
h4 { font-size: 17px; }

/* The installed weights are Oswald 500-600, Source Sans 3 400-600 and Plex
   Mono 400/600 — no 700 exists in any of them. Pinning b/strong to 600 means
   the browser is never asked for a weight it would have to clamp or fake, and
   font-synthesis-weight:none above makes a mistake here visible rather than
   silently synthesised. */
b, strong { font-weight: 600; }

p, ul, ol, dl, figure, table, pre, blockquote { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }

/* SCAR #14 — the only focus rule on the site is additive. Nothing below ever
   sets outline:none; the field rule further down repeats this ring rather than
   cancelling it, which is exactly the mistake that stripped the sibling's
   fields of a visible focus state. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; border-style: none; }

blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  color: var(--text-2);
  font-size: 19px;
}
blockquote p { margin-bottom: .5em; }
blockquote cite { display: block; font-size: var(--fs-small); font-style: normal; color: var(--muted); }

code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }
hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--accent); color: var(--on-accent); }
::placeholder { color: var(--muted); opacity: 1; }

/* ========================================================== 3. UTILITIES */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 0; left: 50%;
  z-index: 200;
  transform: translate(-50%, -110%);
  padding: 11px 20px;
  background: var(--accent);
  color: var(--on-accent);          /* 5.42:1 on #B97A14 */
  font: 600 var(--fs-small)/1 var(--head);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--r) var(--r);
  transition: transform var(--t) ease-out;
}
.skip:focus { transform: translate(-50%, 0); }

/* Every figure on this site is mono: prices, times, margins, ratings, seeds,
   probabilities. Tabular numerals so a column of them lines up. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

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

.note {
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* SCAR #19 — off-screen, never display:none. A display:none field is the one
   a bot is most likely to skip, which defeats the trap. */
.is-hidden-pot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================= 4. LAYOUT */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* SCAR #3 — minmax(0,1fr), never a bare 1fr. A bare 1fr is minmax(auto,1fr),
   which floors the track at its min-content; the min-content of an article
   column holding a .tablewrap is the width of the table inside it. In the
   sibling that pushed a 682px column into a 328px .wrap at 360px and
   overflow-x:clip then threw away the right-hand 338px of 61 pages. Every
   collapse rule in this file carries the minmax, including the ones whose
   content is only text today. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding-block: 28px 44px;
}
@media (min-width: 1040px) {
  .cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
}
.cols > * { min-width: 0; }

.cols > aside, .cols > .aside, .cols__side {
  min-width: 0;
  display: grid;
  gap: 28px;
  align-content: start;
}
@media (min-width: 1040px) {
  /* Sticky works here only because body is overflow-x:clip, not hidden. */
  .cols > aside, .cols > .aside, .cols__side {
    position: sticky;
    top: calc(var(--head-h) + 18px);
  }
}

.aside__h {
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--accent);
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}

/* Grids. Pinned track counts at every step — no auto-fit anywhere in this
   file (SCAR #13). */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Section head: KICKER ————————————— link, the rule filling the gap. The
   heading grows and its own ::after is the rule, so no extra markup is needed
   and the rule reaches the link wherever the link lands. */
.sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 20px;
}
.sechead > h1, .sechead > h2, .sechead > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 58%;
  min-width: 0;
  margin: 0;
  font-family: var(--head);
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}
.sechead > h1::after, .sechead > h2::after, .sechead > h3::after {
  content: "";
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  background: var(--line-2);
}
.sechead > a, .sechead__more {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  /* SCAR #24 — "Last updated 18 October 2026" is 27 unbreakable characters;
     it will not share a line with a heading inside 320px. */
  white-space: normal;
}
.sechead > a:hover, .sechead__more:hover { text-decoration: underline; }

.crumbs {
  padding-block: 14px 0;
  font-size: var(--fs-tiny);
  color: var(--muted);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before {
  content: "/";
  color: var(--line-2);
  font-family: var(--mono);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs li[aria-current="page"] { color: var(--text-2); font-weight: 600; }

/* =========================================================== 5. MASTHEAD */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page);
  border-bottom: 1px solid var(--line-2);
}
.masthead__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--head-h);
}
@media (min-width: 1040px) {
  .masthead__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
  }
}

/* -- Brand ---------------------------------------------------------------- */

.brand {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}
.brand__mark, .brand__tail {
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(21px, 4.4vw, 27px);
  letter-spacing: -.012em;      /* tracked slightly tight */
  text-transform: uppercase;
}
.brand__mark { color: var(--text); }
.brand__tail { color: var(--accent-text); }   /* 5.15:1 on panel, 5.62:1 on page */
.brand__kicker {
  grid-column: 1 / -1;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--accent);         /* the hairline rule under it */
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 479px) {
  /* Under 480px the kicker loses to the logotype; the tagline is on every
     page in the footer and in the <title>, so nothing is lost. */
  .brand__kicker { display: none; }
}
.brand:hover .brand__mark { color: var(--link); }

.brand--foot {
  margin: 0 0 12px;
  color: var(--text);
}
.brand--foot .brand__mark, .brand--foot .brand__tail { font-size: 23px; }

/* -- Burger and icon buttons -------------------------------------------- */

.burger {
  display: grid;
  gap: 4px;
  width: 40px; height: 36px;
  align-content: center;
  justify-items: center;
  padding: 0;
  background: none;
  /* A control boundary is a non-text indicator: --line-3 measures 4.45:1 on
     the page light and 5.17:1 dark. The divider hairline would not clear 3:1. */
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  cursor: pointer;
}
.burger span:not(.sr-only) {
  display: block;
  width: 19px; height: 2px;
  background: var(--text);
  transition: transform var(--t) ease, opacity var(--t) ease;
}
.burger:hover { border-color: var(--link); }
.burger[aria-expanded="true"] { border-color: var(--accent); }
.burger[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:not(.sr-only):nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1040px) { .burger { display: none; } }

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 36px;
  padding: 0;
  background: none;
  color: var(--text-2);
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  cursor: pointer;
  transition: color var(--t) ease, border-color var(--t) ease;
}
.iconbtn:hover { color: var(--link); border-color: var(--link); }
.iconbtn[aria-expanded="true"], .iconbtn[aria-pressed="true"] {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* -- Primary nav --------------------------------------------------------- */

.nav { display: none; min-width: 0; }
@media (min-width: 1040px) { .nav { display: block; } }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  padding: 7px 9px;
  border-bottom: 2px solid transparent;
  font-family: var(--head);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--t) ease, border-color var(--t) ease;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--line-3); }
.nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);   /* 3.29:1 on panel — plus the weight */
}

/* -- Drawer -------------------------------------------------------------- */

/* SCAR #24 — thirteen links at 46px clear 600px inside a sticky header that
   offers nothing to scroll. The drawer carries its own scrollport. */
.drawer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer ul {
  margin: 0;
  padding: 6px var(--gut) 14px;
  list-style: none;
  max-width: var(--max);
  margin-inline: auto;
}
.drawer li + li { border-top: 1px solid var(--line); }
.drawer a {
  display: block;
  padding: 13px 2px;
  font-family: var(--head);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}
.drawer a:hover { color: var(--link); }
@media (min-width: 1040px) { .drawer { display: none !important; } }

/* -- Search panel and suggestions --------------------------------------- */

.searchpanel {
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.searchpanel__form, .hero__search {
  position: relative;          /* the .suggest listbox anchors to this */
  display: flex;
  gap: 8px;
  padding-block: 12px;
}
.searchpanel__form input[type="search"], .hero__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.suggest {
  position: absolute;
  z-index: 120;
  top: calc(100% - 6px);
  left: var(--gut);
  right: var(--gut);
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 8px 22px rgba(11, 13, 18, .14);
}
.hero__search .suggest { left: 0; right: 0; }
.suggest p, .suggest strong:first-child {
  display: block;
  margin: 0;
  padding: 8px 12px 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}
.suggest > :first-child { border-top: 0; }
.suggest a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-size: 15.5px;
}
.suggest a b { font-weight: 600; min-width: 0; }
.suggest a span:last-child, .suggest a small {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* SCAR #15 — hover and the arrow-key cursor must be two different indicators.
   In the sibling they shared one 12% tint measuring 1.09:1 light / 1.31:1
   dark, so a keyboard user could not see where the cursor was. Here hover is
   a wash; the cursor is a wash PLUS a 3px inset rule in --link (4.61:1 light,
   7.11:1 dark against the selected row) PLUS the bolder label. Three
   carriers, none of them colour alone. */
.suggest a:hover { background: var(--hover-row); }
.suggest a.is-sel {
  background: var(--sel-row);
  box-shadow: inset 3px 0 0 var(--link);
  font-weight: 600;
}
/* And the second half of the same scar: the 11.5px trailing meta drops under
   4.5:1 on the selected row (#8A93A6 on #273040 measures 4.30:1 in dark), so
   both states promote it out of --muted into --text-2. */
.suggest a:hover span:last-child, .suggest a.is-sel span:last-child,
.suggest a:hover small, .suggest a.is-sel small { color: var(--text-2); }

/* =============================================================== 6. HERO */

.hero {
  position: relative;
  display: grid;
  align-content: end;          /* all hero text sits in the deepest scrim */
  min-height: clamp(300px, 44vw, 430px);
  background: var(--scrim);
  isolation: isolate;
  overflow: hidden;
}
.hero--tall { min-height: clamp(380px, 58vw, 560px); }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photo runs at 34% over #0B0D12 and the gradient below adds at least
     45% more in the text zone. Worst case — a blown-white sky directly behind
     the copy — the effective ink alpha is 0.81, i.e. #393A3E: 10.13:1 for the
     title, 5.69:1 for the amber kicker, 6.83:1 for the dim lead. Nothing in
     the hero can fall below 4.5:1 whatever the frame behind it looks like. */
  opacity: .34;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(11, 13, 18, .18) 0%,
      rgba(11, 13, 18, .55) 42%,
      rgba(11, 13, 18, .88) 100%);
}
.hero__body {
  position: relative;
  padding-block: clamp(26px, 5vw, 54px);
  color: var(--scrim-text);
}
.hero__kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--scrim-amber);
}
.hero__title {
  margin: 0;
  max-width: 24ch;
  color: var(--scrim-text);
  font-size: clamp(30px, 6.6vw, 54px);
  letter-spacing: -.015em;
}
.hero--tall .hero__title { max-width: 20ch; }
.hero__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--scrim-dim);
  font-size: clamp(16px, 2.1vw, 19px);
}
.hero .hero__search { margin-top: 22px; max-width: 620px; padding-block: 0; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  background: rgba(240, 242, 246, .22);
  border: 1px solid rgba(240, 242, 246, .22);
  border-radius: var(--r);
  overflow: hidden;
}
.hero__stats li {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  background: rgba(11, 13, 18, .62);
}
.hero__stats b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 600;
  color: var(--scrim-amber);
}
.hero__stats span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scrim-dim);
}
/* Pinned counts, never auto-fit (SCAR #13): the odd last cell spans rather
   than leaving an empty area that shows the container colour through. */
.hero__stats > li:last-child:nth-child(2n+1) { grid-column: span 2; }
@media (min-width: 680px) {
  .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__stats > li:last-child:nth-child(2n+1) { grid-column: auto; }
  .hero__stats > li:last-child:nth-child(4n+1) { grid-column: span 4; }
  .hero__stats > li:last-child:nth-child(4n+2) { grid-column: span 3; }
  .hero__stats > li:last-child:nth-child(4n+3) { grid-column: span 2; }
}

/* ============================================================== 7. CARDS */

/* Flat panels, hairline edges, 4px radii. Nothing on this site has a shadow
   except the two floating listboxes. */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
/* .card--grid is gp_card()'s default mode and the base .card is already that
   card; the one thing it cannot assume is the container. In a .grid the item
   stretches on its own, in a flex row or a carousel it does not. */
.card--grid { height: 100%; }

.card__shot { display: block; background: var(--panel-2); }
.card__shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px 16px;
  min-width: 0;
}
.card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
}
.card__meta time {
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  letter-spacing: .02em;
  color: var(--muted);
}
.card__title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.22;
}
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--link); text-decoration: underline; }
.card__teaser {
  margin: 0;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.card__by {
  margin: auto 0 0;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  letter-spacing: .04em;
  color: var(--muted);
}

/* The lead card carries the hero story: wider type, and a two-column split
   once there is room for one. */
.card--lead .card__title { font-size: clamp(24px, 3.6vw, 34px); }
.card--lead .card__teaser { font-size: 17px; }
@media (min-width: 760px) {
  .card--lead {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .card--lead .card__shot { height: 100%; }
  .card--lead .card__shot img { height: 100%; aspect-ratio: auto; min-height: 260px; }
  .card--lead .card__body { padding: 22px 24px 24px; justify-content: center; }
}

/* The row card is a list line that still owns a thumbnail. */
.card--row { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.card--row .card__body { padding: 13px 0; }
@media (min-width: 440px) {
  .card--row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .card--row .card__shot { margin-top: 13px; border-radius: var(--r); overflow: hidden; }
  .card--row .card__title { font-size: 18px; }
}

/* -- Compact story list -------------------------------------------------- */

.listc { margin: 0; padding: 0; list-style: none; }
.listc li + li { border-top: 1px solid var(--line); }
.listc a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  text-decoration: none;
  color: var(--text);
}
.listc a:has(> span:only-child) { grid-template-columns: minmax(0, 1fr); }
.listc img { width: 92px; height: 52px; object-fit: cover; border-radius: var(--r-sm); }
.listc span { display: grid; gap: 4px; min-width: 0; }
.listc b { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.listc a:hover b { color: var(--link); text-decoration: underline; }
.listc time {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--muted);
}

/* -- Race tile ----------------------------------------------------------- */

.rtile {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: 14px 15px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
}
.rtile__when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: 0;
}
.rtile__when time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.rtile__title { margin: 0; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.18; }
.rtile__title a { color: var(--text); text-decoration: none; }
.rtile__title a:hover { color: var(--link); text-decoration: underline; }
.rtile__venue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.rtile__venue a { color: var(--link); text-decoration: none; }
.rtile__venue a:hover { text-decoration: underline; }
.rtile__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 3px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.rtile__facts > div { padding: 7px 9px; background: var(--panel); min-width: 0; }
.rtile__facts dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rtile__facts dd {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.rtile__sum { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.rtile[data-when="resulted"] { border-left-color: var(--void); }

/* -- Person, runner and venue cards ------------------------------------- */

.pcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pcard__face { display: block; line-height: 0; }
.pcard h3 { margin: 0 0 3px; font-size: 18px; line-height: 1.2; }
.pcard h3 a { color: var(--text); text-decoration: none; }
.pcard h3 a:hover { color: var(--link); text-decoration: underline; }
.pcard__role {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--muted);
}
.pcard__stat {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--text-2);
}
.pcard__stat b { font-weight: 600; color: var(--accent-text); }

.rcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.rcard__livery { display: block; line-height: 0; }
.rcard__body { min-width: 0; display: grid; gap: 6px; }
.rcard h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.rcard h3 a { color: var(--text); text-decoration: none; }
.rcard h3 a:hover { color: var(--link); text-decoration: underline; }
.rcard__meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.rcard__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
}
.rcard__form .mono { font-size: 12.5px; color: var(--text-2); }
.rcard__tr { margin: 0; font-size: 13.5px; color: var(--text-2); }
.rcard__tr a { color: var(--link); text-decoration: none; }
.rcard__tr a:hover { text-decoration: underline; }

.vcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.vcard__shot { display: block; background: var(--panel-2); }
.vcard__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vcard__body { display: grid; gap: 7px; padding: 14px 15px 16px; min-width: 0; }
.vcard h3 { margin: 0; font-size: 20px; line-height: 1.18; }
.vcard h3 a { color: var(--text); text-decoration: none; }
.vcard h3 a:hover { color: var(--link); text-decoration: underline; }
.vcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.vcard__body p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* -- Liveries and monogram avatars -------------------------------------- */

/* The SVG draws its own 1px dark stroke, which disappears against ink, so the
   element carries the hairline instead and the stroke inside is decorative. */
.livery {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
}
.avatar {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
}
.table .livery, .table .avatar { display: inline-block; vertical-align: middle; }

/* ============================================================= 8. TABLES */

/* SCAR #12 — .tablewrap is the scrollport. A sticky thead resolves against it,
   so without a capped height nothing inside it ever scrolls and the header
   never pins. Long tables opt in to --sticky; the five-row leaderboards do not.
   This is also the one element allowed to scroll sideways at 360px. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overscroll-behavior-x: contain;
}
.tablewrap--sticky { max-height: 70vh; overflow-y: auto; }
/* role="region" tabindex="0" makes this a focus stop; it must show a ring. */
.tablewrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.table {
  width: 100%;
  margin: 0;
  /* separate, not collapse: with collapse a sticky thead detaches from its
     own borders in Blink and the rule floats a pixel clear of the header. */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--fs-table);
  line-height: 1.45;
}
.table caption {
  padding: 10px 12px;
  text-align: left;
  font-family: var(--body);
  font-size: var(--fs-small);
  color: var(--muted);
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 11px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  white-space: nowrap;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}
.table tbody th, .table tbody td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th[scope="row"] {
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  white-space: normal;
  min-width: 10rem;
}
.table tbody th[scope="row"] small {
  display: inline-block;
  margin-left: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}
.table a { color: var(--link); text-decoration: none; }
.table a:hover { text-decoration: underline; }
/* Zebra: light #F7F8FA keeps body text at 16.71:1 and muted at 5.69:1. */
.table tbody tr:nth-child(even) { background: var(--zebra); }

/* Sortable headers. main.js wires the click; the header must look and behave
   like a control, including from the keyboard. */
.table[data-sortable] th[data-sort] { cursor: pointer; user-select: none; }
.table[data-sortable] th[data-sort]:hover { color: var(--link); }
.table[data-sortable] th[data-sort]::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border: 4px solid transparent;
  border-top-color: var(--line-3);
}
.table[data-sortable] th[aria-sort="ascending"]::after {
  border-top-color: transparent;
  border-bottom-color: var(--accent-text);
  margin-bottom: 4px;
}
.table[data-sortable] th[aria-sort="descending"]::after { border-top-color: var(--accent-text); }
.table[data-sortable] th[data-sort] button {
  all: unset;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* The field table: twelve columns, and the only one that genuinely needs the
   sideways scroll on a phone. */
.table--field tbody th[scope="row"] { min-width: 11rem; }
.table--field td.note {
  white-space: normal;
  min-width: 15rem;
  max-width: 24rem;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-2);
}

.table--result tbody td:first-child, .table--result tbody th:first-child { font-weight: 600; }

.table--lead tbody th[scope="row"] {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 9rem;
}
.table--lead thead th:first-child, .table--lead tbody td:first-child { width: 2.6rem; color: var(--muted); }

/* The winning line. A 1.2:1 tint cannot carry this on its own, so the row
   also takes a 3px rule in --win (4.39:1 light / 6.21:1 dark against the row)
   and the position cell goes bold. */
.table tbody tr.is-win, .table tbody tr.is-win:nth-child(even) { background: var(--win-row); }
.table tbody tr.is-win > *:first-child { box-shadow: inset 3px 0 0 var(--win); }
.table tbody tr.is-win td, .table tbody tr.is-win th { color: var(--text); }
.table tbody tr.is-win > *:first-child { font-weight: 600; }

.scrollhint {
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--muted);
}
.scrollhint::before { content: "\2194\00a0"; color: var(--accent-text); }

.tablenote {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ======================================================= 9. CHIPS, TAGS */

/* Every chip is ruled, not filled, except the one that marks a feature race.
   The hue sits in a 3px left rule so the label keeps full body contrast on
   any surface and the colour is never the only signal. */
.badge, .code, .cycle, .tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  vertical-align: middle;
}

.badge--feature {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);         /* 5.42:1 on #B97A14 / 9.73:1 on #F2A93B */
}
.badge--a { border-left: 3px solid var(--link);  color: var(--text); }
.badge--b { border-left: 3px solid var(--void);  color: var(--text); }
.badge--c { border-left: 3px solid var(--line-3); }
.badge--maiden { border-left: 3px solid var(--ochre); }
.badge--trial { border-style: dashed; color: var(--muted); }

.code { border-left: 3px solid var(--ochre); }
.code--thoroughbred { border-left-color: var(--ochre); }
.code--harness { border-left-color: var(--accent); }
.code--greyhound { border-left-color: var(--void); }
.code--jumps { border-left-color: var(--error); }

.cycle { border-left: 3px solid var(--accent); }
.cycle--day { border-left-color: var(--accent); }
.cycle--twilight { border-left-color: var(--ochre); }
.cycle--night { border-left-color: var(--link); }
.cycle--all { border-left-color: var(--line-3); }

/* Category tags read in their own hue. Every pairing below was measured on
   --panel-2, the lowest-contrast surface a tag renders on: News 5.95, Industry
   4.98, Explainer 5.01, Analysis 6.36, Opinion 4.88, Games 4.64, Culture 5.27,
   Correction 4.81 — all above 4.5:1. The dark values in dark.css run 4.84 to
   10.25. */
.tag { color: var(--tag, var(--text-2)); border-color: currentColor; }
.tag--news       { --tag: #1F5F8B; }
.tag--industry   { --tag: #9A5423; }
.tag--explainer  { --tag: #11726A; }
.tag--analysis   { --tag: #6B4396; }
.tag--opinion    { --tag: #8F5D0A; }
.tag--games      { --tag: #1E7A47; }
.tag--culture    { --tag: #A33E6B; }
.tag--correction { --tag: #C0343A; }

/* -- Form string --------------------------------------------------------- */

.formline { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.formpill {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.formpill.is-win {
  background: var(--win);
  border-color: var(--win);
  color: #FFFFFF;                 /* 5.34:1 on #1E7A47 */
}
.formpill.is-place {
  background: var(--panel);
  border-color: var(--win);       /* 4.90:1 on panel — a rule, not a wash */
  color: var(--text);
}

/* SCAR #23 — a dark-theme rule that lives in style.css, not dark.css, and
   the reason is sheet order. dark.css is loaded unconditionally on every page,
   so every rule in it has to carry the :root[data-theme="dark"] prefix; a rule
   left plain there lands in the light theme as well, from the later sheet, at
   equal specificity — which is precisely how the sibling greyed a placing back
   out. Written here, next to the light rule it modifies and explicitly
   prefixed, it wins on specificity (0,2,1 against 0,1,1) whichever sheet loads
   last, and the two states stay readable as one unit.
   The difference is an alpha blend, which no token swap can express: --win at
   full strength would be a 7.89:1 rule around a mere placing on dark, against
   4.90:1 on light, so dark damps it to 65% — #29885C composited, 4.03:1 on
   the panel. Label #E7EAF0 on #13241C measures 13.44:1. */
:root[data-theme="dark"] .formpill.is-place {
  background: #13241C;
  border-color: rgba(53, 196, 123, .65);
  color: var(--text);
}

/* ====================================================== 10. DATA PANELS */

/* The draw panel. Nobody else publishes the weighting a result came out of,
   so it gets the amber rule and the widest measure on the page. */
.draw {
  margin: 30px 0;
  padding: 18px 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
}
.draw > h2 {
  margin: 0 0 10px;
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.draw__lead { margin: 0 0 16px; max-width: 72ch; color: var(--text-2); font-size: 16px; }
.draw__order {
  margin: 16px 0 0;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.draw__order .mono {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.draw__note {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* SCAR #13 — pinned track counts at every breakpoint, never auto-fit.
   auto-fit collapses only a track no item ever occupies, so seven cells across
   six candidate tracks fill all six and leave five empty areas on the last
   row — and an empty area carries no child, so the container's 1px gap colour
   reads through as phantom panels. Each step below resets the previous step's
   span rules at equal specificity FIRST (a three-cell grid matches 2n+1 but
   not 3n+1, and must not keep the two-track span), then pins its own. The
   rules cover 4, 5, 6, 7 and 8 cells; the last odd cell always spans out. */
.statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.statgrid > div {
  min-width: 0;
  padding: 11px 13px;
  background: var(--panel);
}
.statgrid dt {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
.statgrid dd {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.statgrid > div:last-child:nth-child(2n+1) { grid-column: span 2; }

@media (min-width: 560px) {
  .statgrid, .statgrid--draw, .statgrid--money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statgrid > div:last-child:nth-child(2n+1) { grid-column: auto; }
  .statgrid > div:last-child:nth-child(3n+1) { grid-column: span 3; }
  .statgrid > div:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 900px) {
  .statgrid, .statgrid--draw, .statgrid--money { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .statgrid > div:last-child:nth-child(3n+1) { grid-column: auto; }
  .statgrid > div:last-child:nth-child(3n+2) { grid-column: auto; }
  .statgrid > div:last-child:nth-child(4n+1) { grid-column: span 4; }
  .statgrid > div:last-child:nth-child(4n+2) { grid-column: span 3; }
  .statgrid > div:last-child:nth-child(4n+3) { grid-column: span 2; }
}
/* Inside the sidebar there is never room for four tracks. */
@media (min-width: 1040px) {
  .cols > aside .statgrid, .cols > .aside .statgrid, .cols__side .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cols > aside .statgrid > div:last-child:nth-child(4n+1),
  .cols > aside .statgrid > div:last-child:nth-child(4n+2),
  .cols > aside .statgrid > div:last-child:nth-child(4n+3) { grid-column: auto; }
  .cols > aside .statgrid > div:last-child:nth-child(2n+1) { grid-column: span 2; }
}

.statgrid--draw dd { font-size: 15px; word-break: break-all; }
/* SCAR #25 — the dividends grid has to hold $14,062.30 in a ~130px cell on a
   phone, so the mono figure clamps rather than forcing a horizontal scroll. */
.statgrid--money dd { font-size: 15px; }
.statgrid--money dd b { font-weight: 600; font-size: clamp(16px, 2.6vw, 23px); }

.result { margin: 32px 0; }
.result > h2, .result > h3 {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.result > h3 { margin-top: 24px; font-size: 17px; letter-spacing: .08em; }
.result__note {
  margin: 12px 0 0;
  padding-left: 13px;
  border-left: 3px solid var(--void);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-2);
}

/* The cycle strip: what the circuit runs next, on every circuit page. One
   line per race on a phone — the title truncates rather than wrapping, and
   nothing here scrolls sideways. */
.cycle-strip {
  margin: 0;
  padding: 11px 0 12px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
}
.cycle-strip__label, .cycle-strip__as-at {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cycle-strip__label { color: var(--accent-text); }
.cycle-strip__as-at { margin-top: 7px; font-weight: 400; color: var(--muted); }
.cycle-strip ul {
  max-width: var(--max);
  margin: 6px auto 0;
  padding-inline: var(--gut);
  list-style: none;
}
.cycle-strip li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 0;
  min-width: 0;
}
.cycle-strip li + li { border-top: 1px solid var(--line); }
.cycle-strip time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cycle-strip a {
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cycle-strip a:hover { text-decoration: underline; }
.cycle-strip li > span {
  grid-column: 2;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 620px) {
  /* One true line per race once there is room for the venue beside the name. */
  .cycle-strip li { grid-template-columns: auto minmax(0, auto) minmax(0, 1fr); }
  .cycle-strip li > span { grid-column: auto; }
}
@media (min-width: 900px) {
  .cycle-strip { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cycle-strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
  .cycle-strip li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: 16px; }
}

/* ========================================================= 11. NOTICES */

.disclaimer {
  margin: 20px 0;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.disclaimer--hard {
  padding: 16px 18px;
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--text);              /* 16.10:1 on #FBF3E3 */
  font-size: 15.5px;
}
.disclaimer--hard p + p { margin-top: .8em; }
.disclaimer--hard strong { color: var(--accent-text); }   /* 4.81:1 on the wash */
.disclaimer a, .playnote a { color: var(--link); font-weight: 600; }

.playnote {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.playnote p { margin: 0; }
.playnote p + p { margin-top: .75em; color: var(--text-2); font-size: 14.5px; }
.playnote strong { font-weight: 600; }
/* The demo disclosure has to be readable without scrolling, so the full
   version is loud: a 3px amber edge and no competing panel beside it. */
.playnote--full {
  padding: 18px;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-left-width: 4px;
}
.playnote--full strong { font-size: 17px; color: var(--accent-text); }

.sources { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.sources h2 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text);
}
.sources ul { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.sources li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 14.5px;
  line-height: 1.5;
  counter-increment: src;
}
.sources li + li { border-top: 1px solid var(--line); }
.sources li::before {
  content: "[" counter(src) "]";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.sources .muted { font-family: var(--mono); font-size: 12px; }

/* ==================================================== 12. ARTICLE PARTS */

.byline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-small);
  color: var(--muted);
}
.byline > span { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
.byline a { font-weight: 600; color: var(--link); text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline time { font-family: var(--mono); font-size: 13px; }

.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.share > span {
  margin-right: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.share a, .share button {
  padding: 6px 12px;
  background: var(--page);
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t) ease, border-color var(--t) ease;
}
.share a:hover, .share button:hover { color: var(--link); border-color: var(--link); }

.related { margin: 36px 0 0; padding-top: 22px; border-top: 2px solid var(--accent); }
.related > h2 {
  margin: 0 0 18px;
  font-size: 16px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* -- Comments ------------------------------------------------------------ */

.comments { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2); }
.comments > h2 { margin: 0 0 16px; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.comments > h2 .muted { font-family: var(--mono); font-size: 16px; font-weight: 400; }
.comments__note {
  margin: 0 0 14px;
  padding-left: 13px;
  border-left: 3px solid var(--line-2);
  font-size: 13.5px;
}
.comments__signin {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 15px;
  color: var(--text-2);
}
.comment { padding: 13px 0; border-top: 1px solid var(--line); }
.comment:first-of-type { border-top: 0; }
.comment p { margin: 0; }
.comment p + p { margin-top: 6px; font-size: 15.5px; color: var(--text); }
.comment__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: var(--fs-small);
}
.comment__who b { font-weight: 600; color: var(--text); }
.comment__who time { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* =========================================================== 13. FORMS */

/* Buttons are scoped to their containers rather than styled on the bare
   `button` type, because .burger and .iconbtn are buttons too and a type
   selector setting min-height would beat their explicit height. */
.btn,
.form button, .form input[type="submit"],
.searchpanel__form button, .hero__search button,
.comments form button, .signup button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--on-accent);           /* 5.42:1 light, 9.73:1 dark */
  border: 1px solid var(--accent);
  border-radius: var(--r);
  font-family: var(--head);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--t) ease;
}
.btn:hover,
.form button:hover, .searchpanel__form button:hover,
.hero__search button:hover, .comments form button:hover, .signup button:hover {
  filter: brightness(1.08);
}
/* A filled control is too close in luminance to the ring (1.14:1 against the
   amber), so the ring is pushed clear of the button and lands on the page
   behind it, where it measures 4.08:1 light / 4.76:1 dark. The 1px halo fills
   the gap in the offset so the ring never touches the fill. */
.btn:focus-visible,
.form button:focus-visible, .searchpanel__form button:focus-visible,
.hero__search button:focus-visible, .comments form button:focus-visible,
.signup button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--page);
}
.btn--ghost {
  background: none;
  color: var(--link);                /* 5.77:1 light, 10.42:1 dark */
  border-color: var(--line-3);
}
.btn--ghost:hover { border-color: var(--link); filter: none; }

.form { display: grid; gap: 14px; margin: 0; }
.form > button, .form > input[type="submit"] { justify-self: start; }
.form .muted { font-size: 13.5px; }

.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field input, .field textarea, .field select,
input[type="search"], input[type="email"], input[type="text"],
input[type="password"], textarea, select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--page);
  color: var(--text);
  /* --line-3 measures 4.45:1 on the page and 4.08:1 on a panel — a field
     border is a non-text indicator and has to clear 3:1. The 1px hairline
     used for dividers does not, which is why fields use their own token. */
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  font: 400 16px/1.4 var(--body);    /* 16px: iOS zooms a smaller field */
}
textarea { min-height: 120px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 34px; background-image: none; }
input[type="search"] { font-family: var(--mono); font-size: 15px; }

/* SCAR #14 — this rule beats the global :focus-visible, so it repeats the
   ring instead of cancelling it. Adding outline:none here is exactly what
   stripped the focus state from every field on the sibling site. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
input[type="search"]:focus-visible, input[type="email"]:focus-visible,
input[type="text"]:focus-visible, input[type="password"]:focus-visible,
textarea:focus-visible, select:focus-visible {
  border-color: var(--ring);
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
.field input:invalid:not(:placeholder-shown),
input[type="email"]:invalid:not(:placeholder-shown) { border-color: var(--error); }

.form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.form--inline input[type="email"] { flex: 1 1 200px; min-width: 0; }
.form--inline button { flex: 0 0 auto; }

.form--comment {
  padding: 15px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-top: 18px;
}

.formnote {
  margin: 12px 0 0;
  padding: 10px 13px;
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: var(--r);
  font-size: 14.5px;
  line-height: 1.5;
}
.formnote.is-ok  { background: var(--ok-wash);  border-color: var(--win);   color: var(--ok-ink); }
.formnote.is-bad { background: var(--bad-wash); border-color: var(--error); color: var(--bad-ink); }

/* -- Pager --------------------------------------------------------------- */

.pager { margin: 34px 0 0; }
.pager ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager a, .pager span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-decoration: none;
  color: var(--link);
}
.pager a:hover { border-color: var(--link); }
.pager [aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.pager .gap { border-color: transparent; color: var(--muted); min-width: 24px; padding: 0 4px; }

/* -- Newsletter strip ---------------------------------------------------- */

.signup {
  margin-top: 46px;
  padding: 26px 0 28px;
  background: var(--panel);
  border-top: 1px solid var(--line-2);
}
.signup__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
@media (min-width: 820px) {
  .signup__in { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; }
}
.signup h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.8vw, 26px);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.signup p { margin: 0; max-width: 58ch; color: var(--text-2); font-size: 15.5px; }
.signup .formnote {
  max-width: var(--max);
  margin-inline: auto;
  margin-top: 16px;
  /* .formnote's padding shorthand is declared after .wrap and wipes its
     gutter; the band is full-bleed, so the inset has to come back. */
  padding-inline: calc(var(--gut) + 13px);
}

/* ========================================================== 14. FOOTER */

.foot {
  margin-top: 0;
  background: var(--panel-2);
  border-top: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: var(--fs-small);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding-block: 32px 10px;
}
@media (min-width: 600px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 34px; } }
.foot__col { min-width: 0; }
.foot__col h2 {
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
}
.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col li + li { margin-top: 2px; }
.foot__col a { display: inline-block; padding: 4px 0; color: var(--text-2); text-decoration: none; }
.foot__col a:hover { color: var(--link); text-decoration: underline; }
.foot__col--brand p { margin: 0 0 10px; max-width: 46ch; line-height: 1.55; }
@media (min-width: 600px) and (max-width: 999px) { .foot__col--brand { grid-column: 1 / -1; } }

.foot__engine {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.foot__legal {
  padding-block: 16px 30px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);            /* 5.25:1 on #EDEFF3 light, 6.04:1 dark */
}
.foot__legal p { margin: 0 0 8px; max-width: 108ch; }
.foot__legal p:last-child { margin-bottom: 0; }
.foot__legal a { color: var(--link); font-weight: 600; }
.foot__prov { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; }
.foot__copy { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }

/* ======================================== 15. MOTION AND PRINT-ADJACENT */

/* Reduced motion: no transitions, no smooth scroll, no transform animation.
   The skip link still moves into view because it is the only way to reach it,
   but it arrives instantly. */
@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* A viewer that forces high contrast gets real borders rather than washes. */
@media (forced-colors: active) {
  .card, .rtile, .pcard, .rcard, .vcard, .statgrid > div, .tablewrap,
  .badge, .code, .cycle, .tag, .formpill { border: 1px solid CanvasText; }
  .hero__img { opacity: 1; }
  :focus-visible { outline: 3px solid Highlight; }
}