/*
  THE BACK PAGE — unified brand identity CSS.

  This is the single shared chrome that supersedes the two source Back Pages:
  GALLOP's live composition (missioncontrol/backpage.py `_CSS`) and actual-footy's
  static tree (backpage_static/*.html). Components, tokens, and measurements are
  taken from those shipped implementations — see docs/CONTRACTS.md ("Brand
  identity") — with their drift resolved deliberately:
    * one ink (#17222E — actual-footy's stray #16233a is retired),
    * one hairline system (GALLOP's rgba rules),
    * Paper is NEVER inverted to a dark page (both sources agree; no dark mode),
    * fonts self-hosted only (Inter + Mulish, SIL OFL); Georgia stays a native
      font-stack fallback and is never bundled.
*/

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("./fonts/Mulish-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("./fonts/Mulish-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("./fonts/Mulish-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("./fonts/Mulish-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Actual Footy display font (self-hosted; CSP blocks Google Fonts) */
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #E2EDF4;      /* the brand ground — every surface, never inverted */
  --paper2: #D6E4EF;     /* panels, cards, subtle fills */
  --paper3: #C7D9E8;     /* row hover */
  --ink: #17222E;        /* wordmark, headlines, body, structural rules */
  --ink2: #52646F;       /* secondary text, captions */
  --ink3: #7C8B96;       /* "THE", tertiary metadata, faint rules */
  --cyan: #0B7CA3;       /* the single accent — MEDIA, links, kickers */
  --cyan-lite: #23C7F6;  /* accent on dark surfaces only — never on Paper */
  --red: #D62B22;        /* AFL counter/urgency accent (actual-footy) */
  --rule: rgba(23, 34, 46, 0.14);
  --rule-soft: rgba(23, 34, 46, 0.09);
  --sm: 0 1px 2px rgba(23, 34, 46, 0.10), 0 2px 6px rgba(23, 34, 46, 0.09);
  --md: 0 4px 10px rgba(23, 34, 46, 0.10), 0 14px 30px rgba(23, 34, 46, 0.13);

  --serif: Georgia, "Times New Roman", Times, serif;
  --label: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
img { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px 64px; }

/* ── top bar ─────────────────────────────────────────────────────── */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0 0; }
.topbar .house {
  font-family: var(--label); font-weight: 800; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
}
.topbar .house b { color: var(--cyan); }
.topbar .acts { display: flex; align-items: center; gap: 10px; }
.btn-join {
  font-family: var(--label); font-weight: 700; font-size: 12.5px; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 999px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.btn-join:hover { background: var(--cyan); color: var(--paper); text-decoration: none; }
.btn-ghost {
  font-family: var(--label); font-weight: 700; font-size: 12.5px; text-decoration: none;
  color: var(--ink); padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }

/* ── the masthead lockup ─────────────────────────────────────────── */

.mast { padding: 34px 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.mast a { text-decoration: none; color: inherit; display: block; }
.wm { text-align: center; }
.wm-the {
  font-family: var(--serif); font-weight: 400; color: var(--ink3);
  font-size: clamp(17px, 2.8vw, 27px); letter-spacing: 0.42em; text-indent: 0.42em; line-height: 1;
}
.wm-name {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(44px, 10vw, 96px); line-height: 0.92; letter-spacing: -0.005em; margin-top: 2px;
}
.wm-byline { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 12px; }
.wm-byline .r { height: 1px; width: clamp(28px, 7vw, 64px); background: var(--ink); opacity: 0.55; }
.wm-byline .bl {
  font-family: var(--label); font-weight: 700; color: var(--ink);
  font-size: clamp(11px, 1.7vw, 15px); letter-spacing: 0.26em; text-transform: uppercase;
  white-space: nowrap;
}
.wm-byline .bl b { color: var(--cyan); font-weight: 700; }

.mast-tag { text-align: center; margin-top: 18px; line-height: 1.4; }
.mast-tag .t1 { display: block; font-family: var(--serif); font-style: italic; color: var(--ink2); font-size: clamp(15px, 2.4vw, 20px); }
.mast-tag .t2 { display: block; font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: clamp(18px, 3vw, 26px); margin-top: 2px; letter-spacing: -0.01em; }

/* ── the sport switcher (segmented pill — real nav here) ─────────── */

.compsel-wrap { text-align: center; margin: 16px 0 6px; }
/* AFL sub-toggle (AFLM / AFLW-soon) — a lighter secondary switch under the sport toggle */
.subsel-wrap { text-align: center; margin: 2px 0 6px; }
.subsel { display: inline-flex; gap: 2px; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; background: var(--paper); }
.subseg { font-family: var(--label); font-weight: 800; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink2); padding: 5px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.subseg.is-on { background: var(--ink); color: var(--paper); }
.subseg.is-soon { color: var(--ink3); cursor: default; }
.subseg .soon { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; background: var(--cyan-lite); color: #04222c; padding: 2px 5px; border-radius: 999px; }
.compsel {
  display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 3px; background: var(--paper); box-shadow: var(--sm);
}
.compseg {
  font-family: var(--label); font-weight: 800; font-size: clamp(12px, 1.5vw, 13.5px);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
  padding: 9px 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.compseg:hover { background: var(--paper2); text-decoration: none; }
.compseg.is-on { background: var(--ink); color: var(--paper); }
.compseg.is-on:hover { background: var(--ink); }
.compseg .soon {
  font-size: 9px; font-weight: 800; letter-spacing: 0.09em; background: var(--cyan-lite);
  color: #04222c; padding: 2px 6px; border-radius: 999px; text-transform: uppercase;
}
.compseg.is-soon { color: var(--ink3); cursor: default; }
.compseg.is-soon:hover { background: transparent; }

/* ── the desk lens bar (desk pills under the switcher) ───────────── */

.lensbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; justify-content: center; }
.lensbar .lens-lab {
  font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink2); margin-right: 4px;
}
.lens {
  font-family: var(--label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px;
}
.lens:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }
.lens.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── edition dateline strip ──────────────────────────────────────── */

.edstrip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 0 0 22px; padding: 9px 0; border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink); font-family: var(--label);
}
.edstrip .ed-name { font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.edstrip .ed-day { font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--ink2); }
.edstrip .ed-note { margin-left: auto; font-style: italic; font-family: var(--serif); font-size: 13px; color: var(--ink2); }

/* ── the lead (hero story) ───────────────────────────────────────── */

.lead-story { padding: clamp(22px, 4vw, 34px) 0; border-bottom: 2px solid var(--ink); margin-bottom: 22px; }
.lead-story .kick { margin-bottom: 11px; }
.lead-story h2 { font-size: clamp(30px, 5.2vw, 58px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 12px; }
.lead-story h2 a { color: var(--ink); }
.lead-story h2 a:hover { color: var(--cyan); text-decoration: none; }
.lead-story .stand {
  font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.3vw, 23px);
  line-height: 1.34; max-width: 56ch; margin-bottom: 12px; color: var(--ink);
}
.readmore {
  font-family: var(--label); font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
  color: var(--cyan); text-transform: uppercase;
}

/* kickers — desk tag + date pill */
.kick { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.tag {
  font-family: var(--label); font-weight: 800; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper); background: var(--cyan); padding: 4px 8px;
}
.date {
  font-family: var(--mono); font-size: 10.5px; color: var(--cyan);
  border: 1px solid var(--rule); padding: 3px 8px; border-radius: 20px;
}
/* per-desk tag colors — actual-footy's authoritative DATA.sectionColors map */
.tag.desk-the-lead, .tag.desk-the-actual-story { background: var(--ink); }
.tag.desk-the-counter { background: var(--red); }
.tag.desk-robbed-and-flattered { background: #b5741a; }
.tag.desk-actually { background: #6d4bb8; }
.tag.desk-team-of-the-week { background: #8a6f1e; }
.tag.desk-injury-ladder { background: #2c7a44; }
.tag.desk-free-kick-ledger { background: #0e97b0; }

/* ── section head + card deck ────────────────────────────────────── */

.deck-h {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.01em; margin: 6px 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.deck {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 14px;
}
/* a one-card deck shouldn't stretch a feat card to full page width */
.deck > .feat { max-width: 640px; }

.feat {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper2);
  padding: 22px 22px 16px; display: flex; flex-direction: column; min-width: 0;
  --fa: var(--ink2);                       /* per-type accent (see the desk map below); neutral default */
  box-shadow: var(--sm);                   /* fallback lift for browsers without color-mix */
  box-shadow: 0 1px 2px rgba(23, 34, 46, 0.08),
              0 12px 30px -14px color-mix(in srgb, var(--fa) 34%, transparent);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.feat:hover {
  transform: translateY(-2px);
  border-color: var(--fa);
  border-color: color-mix(in srgb, var(--fa) 42%, var(--rule));
  box-shadow: 0 2px 6px rgba(23, 34, 46, 0.10),
              0 18px 40px -12px color-mix(in srgb, var(--fa) 46%, transparent);
}
.feat-tag {
  font-family: var(--label); font-weight: 800; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 11px;
}
.feat-h { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.08; color: var(--ink); letter-spacing: -0.01em; }
.feat-h a { color: var(--ink); }
.feat-h a:hover { color: var(--cyan); text-decoration: none; }
.feat-s { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink2); line-height: 1.45; margin-top: 9px; }
.feat-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--rule-soft);
}
.feat-foot .when { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); }
.feat-foot .rm { font-family: var(--label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }

.quiet { font-size: 12.5px; color: var(--ink2); font-style: italic; padding: 10px 0; line-height: 1.55; font-family: var(--serif); }
.quiet b { color: var(--cyan); font-style: normal; }

/* ── story page ──────────────────────────────────────────────────── */

.story-wrap { max-width: 760px; margin: 0 auto; }
.folio {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding: 26px 0 10px;
}
.folio .pub { color: #2a7d46; font-weight: 700; }
/* ── feature eyebrow: an eye-catching, per-type accented chip ─────────
   The `desk` (article type) drives one accent var `--fa`; the eyebrow's dot + text
   and the card's glow both read from it, so each recurring franchise is instantly
   recognisable and pops when a fresh edition lands. */
.eyebrow {
  --fa: var(--cyan);                       /* default for standalone eyebrows (story header) */
  font-family: var(--label); font-weight: 800; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fa); margin: 14px 0 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .eb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fa); flex: none;
  box-shadow: 0 0 0 3px rgba(11, 124, 163, 0.14);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa) 20%, transparent);
}
.eyebrow .eb-medal { display: inline-flex; align-items: center; color: var(--fa); flex: none; margin: -1px 0; }
.eyebrow .eb-medal svg { display: block; }
.eyebrow .eb-txt { line-height: 1; }
.eyebrow .eb-new {
  font-family: var(--label); font-weight: 900; font-size: 8.5px; letter-spacing: 0.11em;
  color: var(--paper); background: var(--fa); padding: 2.5px 7px; border-radius: 999px;
}
/* the eyebrow inherits --fa from its card/lead, so don't re-declare it in card context */
.feat .eyebrow, .lead-story .eyebrow { --fa: inherit; margin: 0 0 9px; }

/* per-type accent map — the recurring "regulars" carry their signature colour; generic
   one-offs (the-actual-story, feature, the-lead) stay on the neutral default so the
   franchises are the ones that pop. Mirrors the legacy .tag desk colours. */
.feat.desk-the-measured-medal,      .lead-story.desk-the-measured-medal      { --fa: #b8860b; }
.feat.desk-team-of-the-week,        .lead-story.desk-team-of-the-week        { --fa: #8a6f1e; }
.feat.desk-rising-team-of-the-week, .lead-story.desk-rising-team-of-the-week { --fa: #0b7ca3; }
.feat.desk-injury-ladder,           .lead-story.desk-injury-ladder           { --fa: #2c7a44; }
.feat.desk-match-report,            .lead-story.desk-match-report            { --fa: #2b6f7a; }
.feat.desk-the-counter,             .lead-story.desk-the-counter             { --fa: var(--red); }
.feat.desk-robbed-and-flattered,    .lead-story.desk-robbed-and-flattered    { --fa: #b5741a; }
.feat.desk-free-kick-ledger,        .lead-story.desk-free-kick-ledger        { --fa: #0e97b0; }
.feat.desk-actually,                .lead-story.desk-actually                { --fa: #6d4bb8; }

/* fresh edition — a recurring regular updated within the last few days: amplified
   glow + an accent top-edge so the eye catches it the moment it updates. */
.feat.is-fresh {
  border-color: var(--fa);
  border-color: color-mix(in srgb, var(--fa) 40%, var(--rule));
  box-shadow: 0 2px 6px rgba(23, 34, 46, 0.10),
              0 16px 46px -10px color-mix(in srgb, var(--fa) 58%, transparent);
}
.feat.is-fresh::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: 14px 14px 0 0; background: var(--fa);
}
.story-header h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.015em; margin: 6px 0 0; }
.story-header .stand { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 60ch; margin-top: 12px; }
.story-header .byline-line {
  font-family: var(--label); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink3); margin-top: 16px;
}
.sig {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink3); text-align: center; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 22px 0;
}
.sig b { color: var(--cyan); font-weight: 700; }

.story-body { margin: 24px 0; }
.block-module { margin: 26px 0; text-align: center; }
.block-module svg { max-width: 100%; height: auto; }
.story-body p.block-paragraph { font-size: 16px; line-height: 1.62; margin-bottom: 14px; max-width: 64ch; }

/* stat card — GALLOP's "figure" box: cyan top stripe, serif tabular number */
.block-stat-card {
  background: var(--paper2); border: 1px solid var(--rule); border-radius: 12px;
  padding: 22px 20px; margin: 0 0 18px; text-align: center; position: relative; overflow: hidden;
}
.block-stat-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cyan); }
.block-stat-card .value {
  font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.block-stat-card .label {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.05em; font-weight: 700;
  text-transform: uppercase; color: var(--ink2); margin-top: 11px; line-height: 1.4;
}
.block-stat-card .context { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink2); margin-top: 8px; }

/* Images are size-capped and carded so a native-resolution player cut-out can never render
   giant/full-bleed. Consecutive images become a side-by-side row (a comparison card). */
.block-image { margin: 0 0 20px; text-align: center; }
.block-image img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 440px; margin: 0 auto;
  border-radius: 16px; box-shadow: var(--md);
  background: linear-gradient(180deg, #e3edf4, #cfdde9);
}
.block-image .caption {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink3); margin-top: 8px;
}
.image-row { margin: 0 0 22px; }
.image-row.single .block-image img { max-height: 520px; }
.image-row:not(.single) {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-end;
}
.image-row:not(.single) .block-image { margin: 0; flex: 1 1 240px; min-width: 0; max-width: 340px; }
.image-row:not(.single) .block-image img { max-height: 380px; width: 100%; object-fit: contain; }
@media (max-width: 520px) { .image-row:not(.single) .block-image { flex-basis: 45%; } }

/* pull-quote — feature dialect: serif bold, cyan bar */
.block-quote {
  border-left: 4px solid var(--cyan); padding: 6px 0 6px 22px; margin: 26px 0;
  font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 3vw, 27px); line-height: 1.2;
}
.block-quote p { font-weight: 700; }
.block-quote .attribution {
  display: block; font-family: var(--label); font-weight: 700; font-size: 12px;
  font-style: normal; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink2); margin-top: 10px;
}

.block-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.block-table th, .block-table td { border-bottom: 1px solid var(--rule); padding: 9px 10px; text-align: left; }
.block-table th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink2); border-bottom: 2px solid var(--ink); background: transparent;
}
.block-table tr:hover td { background: var(--paper2); }

.entities { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.entities .entity-chip {
  display: inline-block; font-family: var(--label); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  background: var(--paper2); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 12px; margin: 0 8px 8px 0; text-decoration: none;
}
a.entity-chip:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }

.tags { margin: 6px 0 24px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.tags .tag { background: none; color: var(--ink3); padding: 0; margin-right: 12px; letter-spacing: 0.1em; }

/* share — external /assets/backpage.js wires [data-share]; CSP-safe, page reads fine without it */
.share {
  appearance: none; cursor: pointer; background: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: 7px 13px; font-family: var(--label); font-weight: 700;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2);
}
.share:hover { border-color: var(--cyan); color: var(--cyan); }
.share .ic { color: var(--cyan); margin-right: 5px; }
.share.copied .lbl::after { content: " · link copied"; }

/* ── house promos (the only "ads" — our own two mastheads) ───────── */

/* billboard tile — actual-footy's herotile pattern, CSS-themed per product */
.herotile {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  border-radius: 12px; padding: 20px 22px; margin: 24px 0; text-decoration: none;
  flex-wrap: wrap; text-align: center;
}
.herotile:hover { text-decoration: none; opacity: 0.96; }
.herotile .herotile-wm {
  font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4.6vw, 46px);
  letter-spacing: 0.18em; text-indent: 0.18em; line-height: 1;
}
.herotile .herotile-tag {
  font-family: var(--label); font-weight: 700; font-size: clamp(9.5px, 1.35vw, 12.5px);
  letter-spacing: 0.34em; text-transform: uppercase; display: block; margin-top: 8px;
}
.herotile .herotile-cta {
  font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}
/* GALLOP — dark navy→green field, warm-gold wordmark, hairline gold frame */
.herotile.gallop {
  background:
    radial-gradient(74% 128% at 50% 34%, rgba(96, 140, 116, 0.32), transparent 62%),
    linear-gradient(160deg, #0d1e30 0%, #123024 58%, #16381f 100%);
  border: 1px solid rgba(200, 170, 108, 0.42);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 108, 0.10);
}
.herotile.gallop .herotile-wm { color: #ecd9a6; }
.herotile.gallop .herotile-tag { color: #e6cf92; }
.herotile.gallop .herotile-cta { background: #e6cf92; color: #0c1c2a; }
/* ACTUAL FOOTY — near-black field, paper wordmark with cyan accent */
.herotile.footy { background: #0b1420; }
/* Actual Footy: OFFICIAL brand lockup image (shield + wordmark + AFL INTELLIGENCE) */
.herotile.footy .herotile-logo { height: clamp(58px, 12vw, 96px); width: auto; max-width: 100%; display: block; }
.herotile.footy .herotile-cta { background: var(--cyan-lite); color: #04222c; }

/* join CTA — actual-footy's gradient block, one per story, sport-matched */
.joincta {
  display: block; background: linear-gradient(135deg, #0e7ba1, #0b5e7d); color: #fff;
  padding: 22px 26px; border-radius: 14px; box-shadow: 0 10px 30px rgba(11, 94, 125, 0.28);
  margin: 26px 0; text-decoration: none; transition: transform 0.14s;
}
.joincta:hover { transform: translateY(-2px); text-decoration: none; }
.joincta .jc-t { font-family: var(--serif); font-weight: 700; font-size: 21px; }
.joincta .jc-s { font-family: var(--body); font-size: 14px; margin-top: 6px; opacity: 0.92; max-width: 62ch; }
.joincta .jc-b {
  display: inline-block; margin-top: 14px; background: #fff; color: #0b5e7d;
  font-family: var(--label); font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em;
  padding: 9px 16px; border-radius: 999px;
}

/* ── The Diagnosis — the answer-first core finding, before the hero ─── */
.diagnosis {
  display: block; margin: 20px 0 4px; padding: 16px 20px;
  background: var(--paper2); border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0;
}
.diagnosis .dx-label {
  display: block; font-family: var(--label); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan);
}
.diagnosis .dx-text {
  font-family: var(--serif); font-size: clamp(19px, 3vw, 23px); line-height: 1.4;
  color: var(--ink); margin: 8px 0 0; max-width: 58ch;
}

/* ── evidence / trust strip (doctrine §22) ──────────────────────────── */
.trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--label); font-size: 11.5px; color: var(--ink2);
}
.trust .tr b {
  font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; margin-right: 5px;
}
.trust .tr.withheld { color: var(--ink); }
.trust .tr.withheld b { color: var(--red); }

/* ── Continue the Question — related by relationship, not keywords ──── */
.related { margin: 34px 0 8px; padding-top: 22px; border-top: 1px solid var(--ink); }
.related-h {
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 14px;
}
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rel-card {
  display: block; padding: 14px 16px; background: var(--paper2); border-radius: 10px;
  text-decoration: none; transition: transform 0.14s, background 0.14s;
}
.rel-card:hover { transform: translateY(-2px); background: var(--paper3); text-decoration: none; }
.rel-why {
  display: block; font-family: var(--label); font-weight: 800; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px;
}
.rel-h { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.28; color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--ink); margin-top: 44px; padding-top: 30px; text-align: center; }
.foot-mark { font-family: var(--serif); color: var(--ink); line-height: 0.95; margin-bottom: 6px; }
.foot-mark .t { font-size: 12px; letter-spacing: 0.4em; text-indent: 0.4em; color: var(--ink3); }
.foot-mark .n { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.foot-byline {
  font-family: var(--label); font-weight: 700; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink); margin-top: 8px;
}
.foot-byline b { color: var(--cyan); }
.foot-tag { font-family: var(--serif); font-style: italic; color: var(--ink2); font-size: 15px; margin: 16px auto 0; }
.foot-ctas { margin-top: 20px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.foot-cta {
  display: inline-block; font-family: var(--label); font-weight: 700; font-size: 13px;
  text-decoration: none; color: var(--cyan); border-bottom: 2px solid var(--cyan); padding-bottom: 3px;
}
.foot-cta:hover { opacity: 0.7; text-decoration: none; }
.foot-nav { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); }
.foot-nav a { color: var(--ink2); margin: 0 10px; }

/* ── mobile hardening — from actual-footy, verbatim rationale:
   no horizontal overflow; headlines wrap; readable sizing. Grid/flex children
   need min-width:0 or a long serif headline forces the page wider than the
   screen; headlines get overflow-wrap. ─────────────────────────────── */

.wrap, .deck, .feat, .lead-story, .story-wrap, .edstrip, .lensbar { min-width: 0; }
.wm-name, .lead-story h2, .feat-h, .story-header h1, .deck-h { overflow-wrap: break-word; word-wrap: break-word; }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .wm-name { font-size: clamp(38px, 13.5vw, 72px); }
  .lead-story h2 { font-size: clamp(25px, 7.6vw, 40px); line-height: 1.05; }
  .lead-story .stand { font-size: clamp(16px, 4.2vw, 20px); line-height: 1.4; }
  .feat-h { font-size: clamp(19px, 5.4vw, 23px); }
  .story-header h1 { font-size: clamp(26px, 8vw, 36px); }
  .compseg { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* 404 — branded not-found (served for any unknown path via CloudFront error mapping) */
.notfound { text-align: center; padding: 54px 0 90px; }
.notfound .edstrip { justify-content: center; }
.nf-h { font-family: var(--serif); font-size: clamp(34px, 7vw, 60px); margin: 12px 0 10px; }
.nf-s { color: var(--ink2); font-size: 17px; max-width: 44ch; margin: 0 auto 26px; }
.nf-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Trending rail — a living "in the news" strip (clubs / horses) under the sport toggle */
.trending-wrap { margin: 8px 0 2px; }
.trending { border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(180deg, #fff, var(--paper2)); padding: 12px 14px; box-shadow: var(--sm); }
.trending-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--label);
  font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.trending-head .tr-sub { color: var(--ink3); font-weight: 700; letter-spacing: 0.05em; }
.pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #21c07a; animation: trpulse 1.8s infinite; }
@keyframes trpulse { 0% { box-shadow: 0 0 0 0 rgba(33,192,122,.55); } 70% { box-shadow: 0 0 0 7px rgba(33,192,122,0); } 100% { box-shadow: 0 0 0 0 rgba(33,192,122,0); } }
.trending-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.trending-rail::-webkit-scrollbar { height: 6px; }
.trending-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.tr-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--rule);
  border-radius: 999px; background: #fff; text-decoration: none; color: var(--ink); scroll-snap-align: start; transition: transform .12s, border-color .12s; }
.tr-chip .tr-name { font-family: var(--label); font-weight: 800; font-size: 12px; white-space: nowrap; }
.tr-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(120% 120% at 30% 22%, #fff, #dbe7f0); box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 1px 3px rgba(23,34,46,.18); }
.tr-badge img { width: 21px; height: 21px; object-fit: contain; }
.tr-mono { font-family: var(--label); font-weight: 900; font-size: 13px; color: var(--cyan); }
.tr-chip.is-live:hover { border-color: var(--cyan); transform: translateY(-1px); text-decoration: none; }
.tr-chip .tr-n { font-family: var(--label); font-weight: 800; font-size: 10px; color: #fff; background: var(--cyan);
  border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 5px; }
.tr-chip.is-quiet { background: transparent; opacity: .5; cursor: default; }
.tr-chip.is-quiet .tr-badge { filter: grayscale(1); box-shadow: none; background: var(--paper2); }
.tr-chip.is-quiet .tr-name { font-weight: 700; color: var(--ink2); }

/* club crest / horse mark on the cover cards — colour + pull, entity-driven */
.card-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(120% 120% at 30% 22%, #fff, #dbe7f0);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 2px 6px rgba(23,34,46,.20); }
.card-mark img { width: 28px; height: 28px; object-fit: contain; }
.card-mark.mono { font-family: var(--label); font-weight: 900; font-size: 17px; color: var(--cyan); }
.card-mark.glyph { color: var(--cyan); }
.card-mark.glyph svg { width: 24px; height: 24px; display: block; }
.feat-kick { display: block; font-family: var(--label); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; padding-right: 52px; }
.lead-story .lead-meet { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cyan); }
.lead-story .kick .lead-meet::after { content: "·"; margin: 0 9px; color: var(--ink3); }

/* racing silks (in place of the monogram) — spec: GALLOP-RACING-ENRICHMENT-SPEC.md */
.card-mark.silk { background: none; box-shadow: none; overflow: visible; }
.card-mark.silk .silk-svg, .card-mark.silk .silk-img { width: 40px; height: 40px;
  filter: drop-shadow(0 2px 4px rgba(23,34,46,.24)); }
.card-mark.silk .silk-img { border-radius: 7px; object-fit: contain; }
.story-header .story-silk { float: right; margin: 2px 0 6px 16px; }
.story-header .story-silk .silk-svg, .story-header .story-silk .silk-img { width: 60px; height: 60px;
  filter: drop-shadow(0 3px 8px rgba(23,34,46,.22)); }

/* form sparkline + figures on cover cards */
.feat-form { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.form-spark { width: 96px; height: 28px; flex: none; }
.form-spark .sp-line { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form-spark .sp-dot { fill: var(--ink3); }
.form-spark .sp-win { fill: var(--cyan); }
.feat-fig { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink2); }

/* recent-form block on a racing story page */
.recent-form { max-width: 680px; margin: 18px auto 4px; padding: 16px 18px; border: 1px solid rgba(23,34,46,.14);
  border-radius: 12px; background: rgba(255,255,255,.45); }
.recent-form .rf-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.recent-form .rf-lab { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan); }
.recent-form .rf-fig { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--ink2); }
.recent-form .rf-spark { margin: 6px 0 12px; }
.recent-form .form-spark { width: 240px; height: 52px; }
.recent-form .form-table { width: 100%; border-collapse: collapse; font-family: var(--label); font-size: 12.5px; }
.recent-form .form-table th { text-align: left; font-weight: 700; font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink3); padding: 4px 8px; border-bottom: 1px solid rgba(23,34,46,.14); }
.recent-form .form-table td { padding: 5px 8px; color: var(--ink2); border-bottom: 1px solid rgba(23,34,46,.07); }
.feat { position: relative; }
.feat > .card-mark { position: absolute; top: 16px; right: 16px; }
.feat .feat-h { padding-right: 52px; }
.lead-story .kick { display: inline-flex; align-items: center; gap: 13px; }
.lead-story .kick .card-mark { width: 48px; height: 48px; }
.lead-story .kick .card-mark img { width: 33px; height: 33px; }
.lead-story .kick .card-mark.mono { font-size: 21px; }

/* desk selector — compact native <details> dropdown (replaces the two-row pill wall) */
.deskbar-wrap { text-align: center; margin: 10px 0 4px; }
.deskdrop { position: relative; display: inline-block; text-align: left; }
.dd-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px; background: var(--paper);
  font-family: var(--label); font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink); }
.dd-summary::-webkit-details-marker, .dd-summary::marker { display: none; content: ""; }
.dd-lab { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink2); }
.dd-cur { text-transform: uppercase; }
.dd-caret { color: var(--ink2); transition: transform .15s; }
.deskdrop[open] .dd-caret { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 60;
  min-width: 240px; max-height: 60vh; overflow-y: auto; background: #fff; border: 1.5px solid var(--ink);
  border-radius: 14px; box-shadow: var(--md); padding: 6px; display: grid; gap: 2px; }
.dd-item { display: block; padding: 9px 14px; border-radius: 9px; font-family: var(--label); font-weight: 700;
  font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dd-item:hover { background: var(--paper2); text-decoration: none; }
.dd-item.is-on { background: var(--ink); color: var(--paper); }

/* ── Horse profiles (SEO) — /horse/<slug>/ and the /horse/ hub ──────────────── */
.horse-profile { max-width: 760px; margin: 8px auto 40px; padding: 0 16px; }
.hp-head { display: flex; align-items: center; gap: 16px; padding: 18px 0 14px; border-bottom: 2px solid var(--ink); }
.hp-silk { flex: 0 0 auto; }
.hp-silk .silk-img, .hp-silk .silk-svg { width: 56px; height: 56px; border-radius: 8px; box-shadow: var(--sm); }
.hp-eyebrow { display: block; font-family: var(--label); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.hp-name { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 6vw, 40px);
  line-height: 1.02; color: var(--ink); margin: 2px 0 0; }
.hp-sub { font-family: var(--body); font-size: 14px; color: var(--ink2); margin: 5px 0 0; }
.rec-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.rec-tile { flex: 1 1 92px; min-width: 92px; background: var(--paper2); border: 1px solid var(--rule);
  border-radius: 10px; padding: 12px 10px; text-align: center; }
.rt-v { display: block; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1; }
.rt-l { display: block; font-family: var(--label); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink3); margin-top: 6px; }
.hp-diagnosis { margin: 20px 0; padding: 16px 18px; background: var(--paper2);
  border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; }
.hp-diag-lab { font-family: var(--label); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan); }
.hp-diagnosis p { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 6px 0 10px; }
.hp-diag-link, .rf-profile { font-family: var(--label); font-weight: 700; font-size: 12.5px; color: var(--cyan); text-decoration: none; }
.hp-diag-link:hover, .rf-profile:hover { text-decoration: underline; }
.recent-form .rf-profile { display: inline-block; margin-top: 12px; }
.recent-form--linkonly { border: 0; padding: 6px 0; margin: 10px auto; max-width: 680px; }
.hp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 22px 0; }
.hp-card { margin: 0; }
.hp-card img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--md); display: block; }
.hp-card figcaption { font-family: var(--label); font-size: 11px; color: var(--ink3); margin-top: 6px; text-align: center; }
.hp-reads { margin: 26px 0 8px; }
.hp-reads .deck-h { margin-bottom: 12px; }
.hp-cta { display: block; margin: 20px 0 0; padding: 15px 18px; background: var(--ink); color: var(--paper);
  font-family: var(--label); font-weight: 700; font-size: 14px; text-align: center; border-radius: 12px;
  text-decoration: none; box-shadow: var(--sm); }
.hp-cta:hover { background: #0f1c27; }
/* /horse/ hub */
.horse-index { max-width: 760px; margin: 8px auto 40px; padding: 0 16px; }
.hi-head { padding: 18px 0 14px; border-bottom: 2px solid var(--ink); margin-bottom: 16px; }
.hi-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.hi-item a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--rule);
  border-radius: 9px; background: var(--paper2); text-decoration: none; color: var(--ink); }
.hi-item a:hover { background: var(--paper3); }
.hi-silk .silk-img, .hi-silk .silk-svg { width: 26px; height: 26px; border-radius: 5px; display: block; }
.hi-name { font-family: var(--label); font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }