/* =====================================================================
   THE TOUCHLINE — design system
   Direction: "The Line". The touchline is the one structural device:
   a gold rule that marks the edge of play. It anchors the masthead,
   becomes reading progress on articles and carries the minute markers
   on match reports. Everything else stays quiet.
   ===================================================================== */

:root {
  /* Colour. Gold never carries small text on paper (2.1:1); --gold-ink does (5.6:1). */
  --ink: #17191c;
  --ink-soft: #2b2e33;
  --paper: #f6f4ef;
  --paper-deep: #ece8df;
  --white: #ffffff;
  --gold: #c6a66a;
  --gold-ink: #7a5c22;
  --muted: #5f6368; /* 5.5:1 on paper; the brief's #777 is 4.1:1 and fails AA for body text */
  --rule: #d6d1c6;
  --night: #17191c;
  --night-raised: #22252a;
  --night-text: #ece9e2;
  --night-muted: #a9a9a9; /* 7.5:1 on night */

  /* Type */
  --display: "Big Shoulders Display", "TeX Gyre Heros Cn", "Arial Narrow", "Roboto Condensed", sans-serif;
  --serif: "Literata", "Lora", Georgia, "Times New Roman", serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.375rem;
  --t-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --t-hero: clamp(3rem, 1.4rem + 6.4vw, 6.75rem);

  /* Reading size is user-adjustable on articles */
  --read-size: 1.1875rem;
  --read-leading: 1.68;

  /* Space and layout */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;
  --gutter: 16px;
  --page: 1240px;
  --measure: 36rem;
  --line-w: 4px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* Reader "night" mode, chosen in the article controls */
:root[data-reader-theme="night"] {
  --paper: #17191c;
  --paper-deep: #22252a;
  --ink: #ece9e2;
  --ink-soft: #d5d1c8;
  --muted: #a9a9a9;
  --rule: #3a3d43;
  --gold-ink: #c6a66a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
.night :focus-visible, .scoreboard :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--night); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); font-family: var(--display);
  font-size: var(--t-lg); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s3); }

.wrap {
  width: 100%; max-width: var(--page); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Display type ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  color: var(--gold-ink);
  text-decoration: none;
}
a.kicker:hover { text-decoration: underline; }
.kicker--quiet { color: var(--muted); }
.kickers .sample-tag { margin-left: 0; }
.columnist h2 a { text-decoration: none; }
.columnist h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.meta { font-size: var(--t-sm); color: var(--muted); }

/* ---------- Sample-content notice ---------- */
.sample-note {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-xs);
  text-align: center;
  padding: var(--s2) var(--gutter);
}
.sample-note strong { color: var(--gold); font-weight: 600; }
.sample-tag {
  display: inline-block; margin-left: var(--s2); padding: 0 var(--s2);
  border: 1px solid currentColor; border-radius: 2px;
  font-family: var(--serif); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted); vertical-align: 0.15em; line-height: 1.5;
}

/* ---------- Wordmark ---------- */
.wordmark {
  display: inline-grid;
  grid-template-columns: var(--line-w) auto;
  column-gap: 0.55rem;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__line { background: var(--gold); border-radius: 1px; }
.wordmark__text { display: flex; flex-direction: column; justify-content: center; }
.wordmark__the {
  font-family: var(--serif); font-style: italic; font-size: 0.82rem; line-height: 1; color: var(--muted);
  margin-bottom: 0.1rem;
}
.wordmark__name {
  font-family: var(--display); font-weight: 900; font-size: 1.75rem; line-height: 0.85;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.wordmark--large .wordmark__name { font-size: clamp(2.6rem, 1.2rem + 5vw, 4.5rem); }
.wordmark--large .wordmark__the { font-size: clamp(1rem, 0.8rem + 0.8vw, 1.35rem); }
.wordmark--large { column-gap: 0.8rem; }
.wordmark--large .wordmark__line { width: 6px; }
.night .wordmark, .wordmark--reverse { color: var(--night-text); }
.night .wordmark__the, .wordmark--reverse .wordmark__the { color: var(--night-muted); }

/* ---------- Header ---------- */
.site-header { position: relative; border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 72px;
}
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--display); font-weight: 700; font-size: var(--t-lg); text-decoration: none;
  padding-block: var(--s2); border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.site-actions { display: flex; align-items: center; gap: var(--s3); }
.site-actions a { font-size: var(--t-sm); }
.icon-link { display: inline-flex; padding: var(--s2); border-radius: 50%; color: var(--ink); }
.icon-link svg { width: 20px; height: 20px; }
.signin { display: none; }
.site-actions { gap: var(--s2); }
.site-actions .icon-link { display: none; }
@media (max-width: 899px) { .wordmark__name { font-size: 1.5rem; } }
.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1px solid var(--rule);
  font: inherit; font-size: var(--t-sm); padding: var(--s2) var(--s3); color: var(--ink); border-radius: 2px; cursor: pointer;
}
.mobile-nav { border-top: 1px solid var(--rule); padding-block: var(--s3); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.mobile-nav a { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-xl); text-decoration: none; padding-block: var(--s2); }
@media (min-width: 900px) {
  .site-nav { display: block; }
  .menu-toggle, .mobile-nav { display: none; }
  .signin { display: inline; }
  .site-actions { gap: var(--s3); }
  .site-actions .icon-link { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em;
  text-decoration: none; border-radius: 2px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.button:hover { background: transparent; color: var(--ink); }
.button--gold { background: var(--gold); border-color: var(--gold); color: var(--night); }
.button--gold:hover { background: transparent; color: var(--gold); }
.button--quiet { background: transparent; color: var(--ink); }
.button--quiet:hover { background: var(--ink); color: var(--paper); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button--small { min-height: 36px; padding: 0 var(--s4); font-size: 1rem; }

/* ---------- Photographs ---------- */
.photo { margin: 0; }
.photo__frame { position: relative; overflow: hidden; background: var(--paper-deep); }
.photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.photo__empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s5); text-align: center;
  color: var(--muted); font-size: var(--t-sm);
  /* A pitch-marking grid: subtle, honest, clearly not a photograph */
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--muted) 22%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--muted) 22%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    radial-gradient(circle at 50% 50%, transparent 11%, color-mix(in srgb, var(--muted) 22%, transparent) 11.2%, color-mix(in srgb, var(--muted) 22%, transparent) 11.6%, transparent 11.8%),
    var(--paper-deep);
}
.photo__empty span { background: var(--paper-deep); padding: var(--s1) var(--s3); max-width: 26ch; }
.night .photo__frame, .night .photo__empty, .night .photo__empty span { background-color: var(--night-raised); color: var(--night-muted); }
.photo figcaption { margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.photo figcaption .credit { margin-left: var(--s2); }

/* ---------- Homepage: lead (floodlit) ---------- */
.night { background: var(--night); color: var(--night-text); }
.night .meta { color: var(--night-muted); }
.night .kicker { color: var(--gold); }
.lead { padding-block: var(--s6) var(--s7); }
.lead__grid { display: grid; gap: var(--s5); }
.lead__headline { font-size: var(--t-hero); margin: var(--s3) 0 var(--s4); }
.lead__headline a { text-decoration: none; }
.lead__headline a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.lead__standfirst { font-size: var(--t-lg); line-height: 1.45; max-width: 34ch; color: var(--night-text); margin: 0 0 var(--s5); }
.lead__text { border-left: var(--line-w) solid var(--gold); padding-left: var(--s5); }
@media (min-width: 900px) {
  .lead__grid { grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: end; }
  .lead__text { padding-bottom: var(--s2); }
}

/* ---------- Section heads ---------- */
.section { padding-block: var(--s7); }
.section + .section { padding-top: 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  border-top: 2px solid var(--ink); padding-top: var(--s3); margin-bottom: var(--s5);
}
.section-head h2 { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); line-height: 1; margin: 0; }
.section-head a { font-size: var(--t-sm); }
.night .section-head { border-top-color: var(--gold); }

/* ---------- Story lists ---------- */
.stories { display: grid; gap: var(--s6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .stories--3 { grid-template-columns: repeat(3, 1fr); } }
.story h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); line-height: 1; margin: var(--s2) 0; text-wrap: balance; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.story p { margin: 0 0 var(--s2); color: var(--ink-soft); }
.story .photo { margin-bottom: var(--s3); }
@media (min-width: 720px) {
  .stories--3 .story + .story { border-left: 1px solid var(--rule); padding-left: var(--s5); margin-left: calc(var(--s5) * -1 + var(--s5)); }
}

/* ---------- Match strip ---------- */
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .results { grid-template-columns: repeat(3, 1fr); } }
.result { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .result { border-bottom: 0; padding: 0 var(--s5); border-left: 1px solid var(--rule); }
  .result:first-child { border-left: 0; padding-left: 0; }
}
.result a.result__link { text-decoration: none; display: block; }
.result a.result__link:hover .result__headline { text-decoration: underline; text-decoration-color: var(--gold); }
.result__comp { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s2); }
.scoreline { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; font-family: var(--display); font-weight: 700; font-size: var(--t-lg); }
.scoreline__goals { font-weight: 900; font-size: 1.6rem; line-height: 1; min-width: 1.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.scoreline__team { line-height: 1.2; }
.scoreline__team.is-winner { font-weight: 900; }
.result__headline { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- Columnist + leagues ---------- */
.split { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .split { grid-template-columns: 7fr 5fr; } }
.columnist {
  display: grid; grid-template-columns: var(--line-w) 1fr; column-gap: var(--s5);
}
.columnist::before { content: ""; background: var(--gold); }
.columnist h2, .columnist h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-3xl); line-height: 0.95; margin: var(--s2) 0 var(--s3); }
.columnist p { margin: 0 0 var(--s3); max-width: 38ch; }
.leagues { list-style: none; margin: 0; padding: 0; }
.leagues li { border-bottom: 1px solid var(--rule); }
.leagues a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; text-decoration: none;
}
.leagues a:hover .leagues__name { text-decoration: underline; text-decoration-color: var(--gold); }
.leagues__name { font-family: var(--display); font-weight: 700; font-size: var(--t-lg); }
.leagues__step { font-size: var(--t-xs); color: var(--muted); }

/* ---------- Network (Dugout AI) ---------- */
.network { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .network { grid-template-columns: 7fr 5fr; gap: var(--s7); } }
.network__links { list-style: none; margin: 0; padding: 0; }
.network__links li { padding: var(--s3) 0; border-bottom: 1px solid color-mix(in srgb, var(--night-muted) 35%, transparent); }
.network__links a { font-family: var(--display); font-weight: 700; font-size: var(--t-lg); text-decoration: none; }
.network__links a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.network__links p { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--night-muted); }

/* ---------- Video facade (no third-party request until the reader asks) ---------- */
.video { margin: var(--s6) 0; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--night); color: var(--night-text); overflow: hidden; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__start {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--s3);
  width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: var(--s5);
}
.video__start svg { width: 64px; height: 64px; }
.video__start:hover svg circle { fill: var(--gold); }
.video__start:disabled { cursor: default; }
.video__label { font-family: var(--display); font-weight: 700; font-size: var(--t-lg); text-align: center; max-width: 30ch; }
.video__note { font-size: var(--t-xs); color: var(--night-muted); text-align: center; max-width: 42ch; }
.video figcaption { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s2); }

/* ---------- Membership invitation ---------- */
.invite { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .invite { grid-template-columns: 5fr 7fr; gap: var(--s8); } }
.invite h2 { font-family: var(--display); font-weight: 900; font-size: var(--t-3xl); line-height: 0.95; margin: 0 0 var(--s4); }
.invite p { max-width: 40ch; }
.plans { display: grid; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border-top: var(--line-w) solid var(--rule); padding-top: var(--s4); display: flex; flex-direction: column; }
.plan.is-highlighted { border-top-color: var(--gold); }
.plan h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); margin: 0 0 var(--s2); }
.plan__price { font-family: var(--display); font-weight: 900; font-size: var(--t-2xl); line-height: 1; }
.plan__price small { font-family: var(--serif); font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
.plan__annual { font-size: var(--t-sm); color: var(--muted); margin: var(--s2) 0 var(--s3); }
.plan ul { padding-left: 1.1em; margin: 0 0 var(--s4); font-size: var(--t-sm); }
.plan li { margin-bottom: var(--s1); }
.plan .button { margin-top: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--night-text); padding-block: var(--s7) var(--s6); margin-top: var(--s8); }
.site-footer a { color: var(--night-text); }
.footer-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 2fr; } }
.footer-grid h2 { font-family: var(--display); font-size: var(--t-lg); margin: 0 0 var(--s3); color: var(--gold); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-sm); }
.footer-small { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--night-raised); font-size: var(--t-xs); color: var(--night-muted); }

/* =====================================================================
   ARTICLE
   ===================================================================== */
.reading-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (min-width: 1100px) { .reading-progress { display: none; } }

.article-head { padding-block: var(--s6) var(--s5); }
.article-head__inner { max-width: 54rem; }
.article-head h1 { font-size: var(--t-3xl); margin: var(--s3) 0 var(--s4); }
.article-head .standfirst { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-soft); margin: 0 0 var(--s5); max-width: 42ch; }
.kickers { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.byline__who { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.05rem; flex: none; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__name { font-weight: 600; text-decoration: none; }
.byline__name:hover { text-decoration: underline; }
.byline__when { font-size: var(--t-sm); color: var(--muted); }
.byline__when span + span::before { content: ""; display: inline-block; width: 1px; height: 0.85em; background: var(--rule); margin: 0 var(--s3); vertical-align: -0.05em; }
.byline__tools { display: flex; gap: var(--s2); margin-left: auto; }

.tool {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3);
  background: transparent; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink);
  font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: none;
}
.tool:hover { border-color: var(--ink); }
.tool svg { width: 18px; height: 18px; }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.article-hero { margin-bottom: var(--s6); }
.article-hero .photo__frame { aspect-ratio: 16 / 9; }
@media (min-width: 1100px) { .article-hero .photo__frame { aspect-ratio: 21 / 9; } }

/* The touchline rail: progress on wide screens */
.article-grid { display: grid; gap: var(--s6); }
@media (min-width: 1100px) {
  .article-grid { grid-template-columns: 3rem minmax(0, var(--measure)) 1fr; column-gap: var(--s6); align-items: start; }
}
.rail { display: none; }
@media (min-width: 1100px) {
  .rail { display: block; position: sticky; top: var(--s6); height: calc(100vh - var(--s8)); }
  .rail__track { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--line-w); background: var(--rule); transform: translateX(-50%); border-radius: 2px; overflow: hidden; }
  .rail__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .rail__pct { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--s5)); text-align: center; font-family: var(--display); font-weight: 700; font-size: var(--t-xs); color: var(--muted); }
}

.prose { font-size: var(--read-size); line-height: var(--read-leading); max-width: var(--measure); }
.prose > * { margin: 0 0 1.1em; }
.prose p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-weight: 900; font-size: 4.1em; line-height: 0.78;
  padding: 0.06em 0.08em 0 0; color: var(--ink);
}
.prose h2, .prose h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; margin-top: 1.6em; }
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.5rem; }
.prose a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.prose blockquote {
  margin: 1.6em 0; padding: 0 0 0 var(--s5); border-left: var(--line-w) solid var(--gold);
}
.prose blockquote p { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.02; margin: 0 0 var(--s3); text-wrap: balance; }
.prose blockquote footer { font-size: var(--t-sm); color: var(--muted); }
.prose .photo { margin: 1.8em 0; }
.prose hr { border: 0; height: var(--line-w); width: 3rem; background: var(--gold); margin: 2em 0; }
@media (min-width: 1100px) {
  .prose .photo--wide { margin-right: calc(-1 * (100vw - var(--page)) / 2 - 10rem); max-width: none; }
}

/* Typography controls */
.reader-controls { position: relative; }
.reader-panel {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30; width: min(18rem, calc(100vw - 2 * var(--gutter)));
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: var(--s4); box-shadow: 6px 6px 0 var(--ink);
}
.reader-panel fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; }
.reader-panel legend { font-family: var(--display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s2); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule); }
.segmented label { position: relative; text-align: center; padding: var(--s2); cursor: pointer; font-size: var(--t-sm); }
.segmented label + label { border-left: 1px solid var(--rule); }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented input:checked + span { font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: -3px; }

/* Aside: match facts and topics */
.aside { display: grid; gap: var(--s6); align-content: start; }
@media (min-width: 1100px) { .aside { position: sticky; top: var(--s6); } }
.aside h2 { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); margin: 0 0 var(--s3); padding-top: var(--s2); border-top: 2px solid var(--ink); }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: var(--t-sm); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.topics a { display: inline-block; padding: var(--s1) var(--s3); border: 1px solid var(--rule); border-radius: 2px; font-size: var(--t-sm); text-decoration: none; }
.topics a:hover { border-color: var(--gold-ink); }

/* Paywall */
.paywall { position: relative; max-width: var(--measure); margin-top: calc(-1 * var(--s8)); padding-top: var(--s8);
  background: linear-gradient(to bottom, transparent, var(--paper) var(--s8)); }
.paywall__box { border-top: var(--line-w) solid var(--gold); padding-top: var(--s5); }
.paywall h2 { font-family: var(--display); font-weight: 900; font-size: var(--t-2xl); line-height: 1; margin: 0 0 var(--s3); }
.paywall p { margin: 0 0 var(--s4); }
.paywall__actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.paywall__terms { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s4); }

.corrections { max-width: var(--measure); margin-top: var(--s6); padding: var(--s4); background: var(--paper-deep); font-size: var(--t-sm); }
.corrections h2 { font-family: var(--display); font-size: var(--t-lg); margin: 0 0 var(--s2); }
.provenance { max-width: var(--measure); font-size: var(--t-xs); color: var(--muted); margin-top: var(--s4); }

.article-foot { margin-top: var(--s7); }

/* =====================================================================
   MATCH REPORT
   ===================================================================== */
.scoreboard { background: var(--night); color: var(--night-text); padding-block: var(--s6) var(--s7); }
.scoreboard .kicker { color: var(--gold); }
.scoreboard__comp { font-size: var(--t-sm); color: var(--night-muted); margin-top: var(--s2); }
.scoreboard__teams {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4);
  margin-block: var(--s6) var(--s5);
}
.scoreboard__team { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.25rem); line-height: 0.95; }
.scoreboard__team a { text-decoration: none; }
.scoreboard__team a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.scoreboard__team--away { text-align: right; }
.scoreboard__score {
  font-family: var(--display); font-weight: 900; font-size: clamp(3.5rem, 2rem + 7vw, 8rem); line-height: 0.85;
  display: flex; align-items: center; gap: 0.12em; font-variant-numeric: tabular-nums;
}
.scoreboard__score .sep { width: 0.12em; height: 0.75em; background: var(--gold); border-radius: 2px; }
.scoreboard__scorers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); font-size: var(--t-sm); color: var(--night-muted); }
.scoreboard__scorers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.scoreboard__scorers .away { text-align: right; }
.scoreboard__where { margin-top: var(--s5); font-size: var(--t-sm); color: var(--night-muted); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.scoreboard h1 { font-size: var(--t-3xl); margin: var(--s6) 0 var(--s4); max-width: 22ch; }
.scoreboard .standfirst { font-size: var(--t-lg); line-height: 1.45; max-width: 42ch; margin: 0; }

/* Key incidents along the touchline: this IS a sequence, so minutes mark it */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 3.1rem; top: 0.3rem; bottom: 0.3rem; width: var(--line-w); background: var(--gold); border-radius: 2px; }
.timeline li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1.6rem; padding-bottom: var(--s4); font-size: var(--t-sm); position: relative; }
.timeline li::after { content: ""; position: absolute; left: calc(3.1rem - 3px); top: 0.45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.timeline li.is-goal::after { background: var(--ink); }
.timeline li.is-red::after { background: #b3261e; border-color: #b3261e; border-radius: 1px; }
.timeline__min { font-family: var(--display); font-weight: 800; font-size: var(--t-md); text-align: right; font-variant-numeric: tabular-nums; }
.timeline__what strong { font-weight: 600; }

/* =====================================================================
   HUBS: writer, club, league
   ===================================================================== */
.hub-head { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--rule); }
.hub-head h1 { font-size: var(--t-hero); margin: var(--s2) 0 var(--s4); }
.hub-head p { max-width: 46ch; font-size: var(--t-lg); line-height: 1.45; margin: 0; }
.hub-head .facts { margin-top: var(--s5); max-width: 30rem; }
.hub-grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .hub-grid { grid-template-columns: 8fr 4fr; } }
.archive { list-style: none; margin: 0; padding: 0; }
.archive li { border-bottom: 1px solid var(--rule); padding-block: var(--s4); display: grid; gap: var(--s1); }
@media (min-width: 720px) { .archive li { grid-template-columns: 9rem 1fr; column-gap: var(--s5); } }
.archive time { font-size: var(--t-sm); color: var(--muted); padding-top: 0.2rem; }
.archive h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); line-height: 1; margin: var(--s1) 0 var(--s2); }
.archive h3 a { text-decoration: none; }
.archive h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.archive p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }

.empty { border-left: var(--line-w) solid var(--gold); padding: var(--s2) 0 var(--s2) var(--s5); max-width: 40rem; }
.empty h2, .empty h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); margin: 0 0 var(--s2); }
.empty p { margin: 0 0 var(--s3); color: var(--ink-soft); }

/* Subscribe page */
.subscribe-head { padding-block: var(--s8) var(--s6); }
.subscribe-head h1 { font-size: var(--t-hero); margin: 0 0 var(--s4); max-width: 12ch; }
.subscribe-head p { font-size: var(--t-lg); max-width: 44ch; margin: 0; }
.billing-toggle { display: inline-flex; border: 1px solid var(--ink); margin-bottom: var(--s6); }
.billing-toggle button { font: inherit; font-size: var(--t-sm); padding: var(--s2) var(--s4); background: none; border: 0; cursor: pointer; color: var(--ink); min-height: 44px; }
.billing-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.terms { max-width: 48rem; font-size: var(--t-sm); color: var(--ink-soft); }
.terms h2 { font-family: var(--display); font-size: var(--t-xl); color: var(--ink); }

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

@media print {
  .site-header, .site-footer, .byline__tools, .rail, .reading-progress, .aside, .paywall, .sample-note { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   v2 — FLOODLIT SATURDAY
   Dark, floodlit staging for the front of the paper; light, calm pages
   for reading. Club kit colours bring the only extra colour, and only
   where they mean something (scores, match art, the minute strip).
   ===================================================================== */

:root { --glow: #f2dda4; --night-deep: #0e1013; --line-night: #2c3036; }

.paper { background: var(--paper); color: var(--ink); }
.night { background: var(--night); color: var(--night-text); }
.night .section-head h2, .night h2 { color: var(--night-text); }
.night .section-head a { color: var(--night-text); }
.section { padding-block: var(--s8); }
.section + .section { padding-top: var(--s8); }

/* Header: dark, the wordmark lit */
.site-header { background: var(--night-deep); border-bottom: 1px solid var(--line-night); color: var(--night-text); }
.site-header .site-nav a { color: var(--night-text); }
.site-header .signin, .site-header .icon-link { color: var(--night-text); }
.site-header .menu-toggle { color: var(--night-text); border-color: var(--line-night); }
.mobile-nav { background: var(--night-deep) !important; border-bottom-color: var(--line-night) !important; }
.mobile-nav a { color: var(--night-text); }
.wordmark--reverse .wordmark__line { box-shadow: 0 0 18px 1px rgba(242, 221, 164, 0.45); }
.sample-note { background: #000; }

/* Buttons */
.button--gold { color: var(--night-deep); }
.button--ink { background: var(--night); border-color: var(--night); color: var(--gold); }
.button--ink:hover { background: transparent; color: var(--night); }

.badge-plus {
  display: inline-block; padding: 1px 7px 0; border-radius: 2px; background: var(--gold); color: var(--night-deep);
  font-family: var(--display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.5;
}
.kickers { align-items: center; }

/* ---------- Ticker ---------- */
.ticker { background: var(--gold); color: var(--night-deep); }
.ticker__inner {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none;
  max-width: var(--page); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.ticker__inner::-webkit-scrollbar { display: none; }
.ticker__label {
  flex: none; display: flex; align-items: center; padding-right: var(--s4); margin-right: var(--s4);
  font-family: var(--display); font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
  border-right: 2px solid var(--night-deep);
}
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li + li { border-left: 1px solid rgba(14, 16, 19, 0.25); }
.ticker a {
  display: flex; align-items: center; gap: var(--s2); padding: 0.55rem var(--s4); white-space: nowrap; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.ticker a:hover { background: rgba(14, 16, 19, 0.08); }
.ticker strong {
  display: inline-flex; align-items: center; gap: 0.3em; background: var(--night-deep); color: var(--gold);
  padding: 0 0.45em; border-radius: 2px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.ticker strong i { width: 2px; height: 0.8em; background: var(--gold); opacity: 0.6; }
.ticker li:first-child a { padding-left: 0; }

/* ---------- Hero (homepage lead and story pages) ---------- */
.hero { position: relative; isolation: isolate; background: var(--night-deep); color: #fff; overflow: hidden; }
.hero__pic { position: absolute; inset: 0; z-index: -2; }
.hero__pic .photo, .hero__pic .photo__frame, .hero__pic .photo__art { height: 100%; aspect-ratio: auto !important; }
.hero__pic svg.art, .hero__pic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 11, 13, 0.96) 0%, rgba(10, 11, 13, 0.72) 38%, rgba(10, 11, 13, 0.1) 75%),
    linear-gradient(to right, rgba(10, 11, 13, 0.55), transparent 60%);
}
.hero__text { padding-top: clamp(14rem, 34vw, 26rem); padding-bottom: var(--s7); position: relative; }
.hero__text::before {
  content: ""; position: absolute; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: var(--s7);
  width: 6px; height: calc(100% - clamp(14rem, 34vw, 26rem) - var(--s7) + 0.4rem);
  background: var(--gold); box-shadow: 0 0 22px 2px rgba(242, 221, 164, 0.35);
}
.hero__text { padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) + var(--s6)); }
.hero .kicker { color: var(--gold); }
.hero__headline {
  font-size: clamp(3rem, 1.2rem + 6.8vw, 8rem); line-height: 0.86; letter-spacing: -0.01em;
  text-transform: uppercase; margin: var(--s3) 0 var(--s4); max-width: 13ch; color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.hero__headline a { text-decoration: none; }
.hero__headline a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 4px; }
.hero__standfirst { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; max-width: 40ch; margin: 0 0 var(--s4); color: #ece9e2; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-sm); color: #c9c5bb; margin-bottom: 0; }
.hero .sample-tag { color: #c9c5bb; }
.hero--article .hero__text { padding-top: clamp(11rem, 26vw, 20rem); }
.hero--article .hero__text::before { height: calc(100% - clamp(11rem, 26vw, 20rem) - var(--s7) + 0.4rem); }
.hero--article .hero__headline { font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); max-width: 16ch; }
.hero .photo__badge { top: auto; bottom: var(--s3); right: var(--s3); }

/* One orchestrated moment: the lead rises into the light on load */
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes lightup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hero__headline, .hero__standfirst { animation: rise 0.9s var(--ease) both; }
.hero__standfirst { animation-delay: 0.08s; }
.hero__text::before { transform-origin: 50% 100%; animation: lightup 0.8s var(--ease) both; }

.byline-wrap { padding-top: var(--s5); }
.byline-wrap .byline { border-top: 0; padding-top: 0; }

/* ---------- Artwork frames ---------- */
.photo__art, .photo--art .photo__frame { position: relative; width: 100%; height: 100%; }
.photo__art svg.art, .photo--art svg.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.photo__badge {
  position: absolute; top: var(--s2); right: var(--s2); z-index: 1;
  background: rgba(10, 11, 13, 0.72); color: #e7e3da; font-size: 0.7rem; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 2px;
}

/* ---------- Mosaic ---------- */
.mosaic { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .mosaic { grid-template-columns: 7fr 5fr; gap: var(--s7); } }
.mosaic__side { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); align-content: start; }
.mosaic__main .story h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 0.95; }
.mosaic__main .story p { font-size: var(--t-lg); }
@media (min-width: 560px) {
  .mosaic__side .story { display: grid; grid-template-columns: 11rem 1fr; column-gap: var(--s4); align-items: start; }
  .mosaic__side .story__pic { grid-row: span 4; }
  .mosaic__side .story .photo { margin-bottom: 0; }
}
.mosaic__side li + li { border-top: 1px solid var(--rule); padding-top: var(--s5); }
.story__pic { display: block; overflow: hidden; }
.story__pic .photo__frame { transition: transform 0.5s var(--ease); }
.story__pic:hover .photo__frame { transform: scale(1.03); }
.story .kickers { margin-bottom: var(--s1); }

/* ---------- Score tiles ---------- */
.results-band { background: radial-gradient(120% 90% at 85% -10%, #2a2a22 0%, var(--night) 55%); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  position: relative; display: grid; gap: var(--s2); height: 100%; text-decoration: none; color: var(--night-text);
  background: var(--night-raised); border: 1px solid var(--line-night); border-top: 4px solid var(--gold);
  padding: var(--s4) var(--s4) var(--s5); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.tile__top { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-xs); color: var(--night-muted); margin-bottom: var(--s2); }
.tile__top span:first-child { font-family: var(--display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.tile__side { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: var(--s3); }
.tile__team { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.05; color: #d9d5cc; }
.tile__side.is-winner .tile__team { color: #fff; font-weight: 900; }
.tile__goals { font-family: var(--display); font-weight: 900; font-size: 3rem; line-height: 0.9; font-variant-numeric: tabular-nums; color: #fff; }
.tile__side:not(.is-winner) .tile__goals { color: #bdb8ad; }
.kit {
  width: 22px; height: 28px; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, var(--k1) 0 33%, var(--k2) 33% 66%, var(--k1) 66%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.tile__headline { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line-night); font-size: var(--t-sm); color: #d9d5cc; }
.tile__sample { position: absolute; right: var(--s4); bottom: var(--s2); font-size: 0.68rem; color: var(--night-muted); }

/* ---------- The column ---------- */
.column-card {
  position: relative; overflow: hidden; background: var(--gold); color: var(--night-deep);
  padding: var(--s6) var(--s6) var(--s6); display: grid; gap: var(--s3); align-content: start;
}
.column-card .kicker { color: var(--night-deep); font-size: 1rem; }
.column-card h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 0.9; margin: 0; position: relative; }
.column-card h2 a { text-decoration: none; }
.column-card p { margin: 0; max-width: 34ch; position: relative; font-size: var(--t-lg); line-height: 1.45; }
.column-card .button { justify-self: start; margin-top: var(--s3); position: relative; }
.column-card__mono {
  position: absolute; right: -0.06em; bottom: -0.22em; font-family: var(--display); font-weight: 900;
  font-size: clamp(9rem, 6rem + 12vw, 16rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 2px rgba(14, 16, 19, 0.22); pointer-events: none;
}
.column-card__by { font-weight: 600; }

/* ---------- Pyramid ---------- */
.pyramid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 6px; justify-items: center; }
.pyramid li { width: var(--w); }
.pyramid a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: 0.7rem var(--s4); background: var(--night); color: var(--night-text); text-decoration: none;
  border-left: 4px solid var(--gold); transition: background-color 0.15s var(--ease);
}
.pyramid li:nth-child(n + 4) a { background: var(--ink-soft); }
.pyramid a:hover { background: var(--gold); color: var(--night-deep); }
.pyramid__step { font-size: var(--t-xs); color: var(--gold); white-space: nowrap; }
.pyramid a:hover .pyramid__step { color: var(--night-deep); }
.pyramid__name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-align: right; }

/* ---------- Network ---------- */
.network__intro { max-width: 38ch; font-size: var(--t-lg); line-height: 1.45; margin: 0; color: #d9d5cc; }
.network__tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.network__tiles a {
  display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s4); align-items: center;
  padding: var(--s4); background: var(--night-raised); border: 1px solid var(--line-night); text-decoration: none;
}
.network__tiles a:hover { border-color: var(--gold); }
.network__tiles svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--gold); color: var(--night-deep); }
.network__name { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.network__note { font-size: var(--t-sm); color: var(--night-muted); }

/* ---------- Membership band ---------- */
.invite-band { background: var(--paper-deep); }
.invite h2 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.75rem); }
.plan { background: var(--paper); padding: var(--s5); border-top-width: 6px; }
.plan.is-highlighted { background: var(--night); color: var(--night-text); }
.plan.is-highlighted .plan__annual, .plan.is-highlighted .plan__price small { color: var(--night-muted); }
.plan.is-highlighted .button { background: var(--gold); border-color: var(--gold); color: var(--night-deep); }
.plan.is-highlighted .button:hover { background: transparent; color: var(--gold); }
.plan__price { font-size: 3rem; }

/* ---------- Section heads, bolder ---------- */
.section-head { border-top-width: 4px; }
.section-head h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 900; }
.night .section-head { border-top-color: var(--gold); }

/* ---------- Match report: kit art, minute strip ---------- */
.scoreboard { position: relative; isolation: isolate; overflow: hidden; background: var(--night-deep); }
.scoreboard__art { position: absolute; inset: 0; z-index: -2; }
.scoreboard__art svg { width: 100%; height: 100%; display: block; }
.scoreboard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 11, 13, 0.55), rgba(10, 11, 13, 0.82) 55%, rgba(10, 11, 13, 0.97)); }
.scoreboard__inner { position: relative; }
.scoreboard__team { font-size: clamp(1.8rem, 1rem + 3.4vw, 4rem); color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); }
.scoreboard__score { color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); font-size: clamp(4.5rem, 2rem + 9vw, 10rem); }
.scoreboard__score .sep { box-shadow: 0 0 22px 2px rgba(242, 221, 164, 0.5); }
.scoreboard__scorers, .scoreboard__where, .scoreboard__comp { color: #d4d0c6; }
.scoreboard h1 { text-transform: uppercase; color: #fff; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5rem); line-height: 0.88; max-width: 18ch; }
.scoreboard .standfirst { color: #ece9e2; }

.strip { margin: var(--s6) 0 var(--s2); }
.strip__line { position: relative; height: 4px; background: rgba(255, 255, 255, 0.22); border-radius: 2px; margin-top: 2.2rem; }
.strip__half { position: absolute; top: -1.6rem; transform: translateX(-50%); font-size: 0.7rem; color: #a9a59c; }
.strip__half::after { content: ""; position: absolute; left: 50%; top: 1.45rem; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.35); }
.strip__goal {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--k1); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(10, 11, 13, 0.6);
}
.strip__goal.is-away { border-color: var(--gold); }
.strip__min { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: 0.9rem; color: #fff; white-space: nowrap; }
.strip__goal.is-home .strip__min { bottom: 22px; }
.strip__goal.is-away .strip__min { top: 22px; }
.strip__ends { display: flex; justify-content: space-between; margin-top: 2rem; font-size: 0.72rem; color: #a9a59c; }

/* Articles: drop cap in gold-ink, wider pull quotes */
.prose p:first-of-type::first-letter { color: var(--gold-ink); font-size: 4.6em; }
.prose blockquote p { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); text-transform: uppercase; line-height: 0.95; }

/* Hubs get a dark head */
.hub-head { background: var(--night); color: var(--night-text); border-bottom: 4px solid var(--gold); }
.hub-head .kicker { color: var(--gold); }
.hub-head h1 { text-transform: uppercase; color: #fff; }
.hub-head p, .hub-head .facts dd { color: #d9d5cc; }
.hub-head .facts dt { color: var(--night-muted); }
.hub-head .empty { border-left-color: var(--gold); }
.hub-head .empty p { color: #d9d5cc; }
.hub-head .button--quiet { color: var(--night-text); border-color: var(--night-text); }
.hub-head .button--quiet:hover { background: var(--gold); border-color: var(--gold); color: var(--night-deep); }
.hub-head .sample-tag { color: var(--night-muted); }
.subscribe-head h1 { text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .hero__headline, .hero__standfirst, .hero__text::before { animation: none; }
}

/* Hero refinements */
.hero .photo__badge { display: none; }
.hero__note { font-size: 0.75rem; color: #9f9a90; }
.byline-wrap { padding-bottom: var(--s6); }
@media (max-width: 719px) {
  /* On phones the artwork sits above the headline so the floodlights stay in frame */
  .hero__pic { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; }
  .hero__pic .photo, .hero__pic .photo__frame, .hero__pic .photo__art { height: 100%; }
  .hero__scrim { top: 0; bottom: auto; height: calc((100vw) * 10 / 16); background: linear-gradient(to top, var(--night-deep) 0%, rgba(14, 16, 19, 0) 45%); }
  .hero__text, .hero--article .hero__text { padding-top: var(--s4); padding-bottom: var(--s6); margin-top: calc(-1 * var(--s6)); }
  .hero__text::before, .hero--article .hero__text::before { height: calc(100% - var(--s4) - var(--s6) + 0.4rem); }
}

/* ---------- Writer page ---------- */
.writer-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night-deep); color: #fff; border-bottom: 4px solid var(--gold); }
.writer-hero__art { position: absolute; inset: 0; z-index: -2; opacity: 0.55; }
.writer-hero__art svg { width: 100%; height: 100%; display: block; }
.writer-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(10, 11, 13, 0.95) 0%, rgba(10, 11, 13, 0.7) 55%, rgba(10, 11, 13, 0.4)); }
.writer-hero__grid { display: grid; gap: var(--s6); align-items: end; padding-block: var(--s8) var(--s7); }
@media (min-width: 820px) { .writer-hero__grid { grid-template-columns: auto 1fr; gap: var(--s7); } }
.writer-hero__photo { margin: 0; position: relative; isolation: isolate; width: min(19rem, 70vw); }
.writer-hero__photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 3px solid var(--gold); z-index: -1; }
.writer-hero__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: contrast(1.05) saturate(1.05); }
.writer-hero .kicker { color: var(--gold); font-size: 1.05rem; }
.writer-hero__name { font-size: clamp(3.6rem, 1.6rem + 8vw, 9rem); line-height: 0.82; text-transform: uppercase; margin: var(--s3) 0 var(--s5); }
.writer-hero__name span { display: block; }
.writer-hero__name span + span { color: var(--gold); }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.socials a {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.socials svg { width: 18px; height: 18px; }
.writer-hero__also { margin: var(--s4) 0 0; color: #d9d5cc; font-size: var(--t-md); }
.writer-hero__also span { color: var(--gold); font-family: var(--display); font-weight: 700; margin-right: var(--s2); }

/* Columnist card photo and links */
.column-card__photo {
  position: relative; width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--night-deep); box-shadow: 6px 6px 0 var(--night-deep);
}
.column-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); position: relative; }
.column-card__actions .button { margin-top: 0; }
.column-card__social { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--night-deep); }
.avatar img { border-radius: 50%; }

/* =====================================================================
   v3 — density and match identity
   Patterns adapted from open-source publishing work: Ghost's Headline
   theme (section rows: a label column beside a row of stories) and the
   Guardian's football results lists (grouped by competition, crests
   either side of the score). Styling is our own.
   ===================================================================== */

/* Latest + results sidebar */
.latest { display: grid; gap: var(--s7); }
@media (min-width: 1100px) { .latest { grid-template-columns: minmax(0, 1fr) 20rem; } }
.latest .mosaic { grid-template-columns: 1fr; }
@media (min-width: 900px) { .latest .mosaic { grid-template-columns: 7fr 5fr; } }
.latest__results .section-head h2 { font-size: var(--t-xl); }

.results-list { display: grid; gap: var(--s5); }
.results-list h3 { margin: 0 0 var(--s2); font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-ink); }
.results-list h3 a { text-decoration: none; }
.results-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.results-list li { border-bottom: 1px solid var(--rule); }
.results-list li a {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2);
  padding: 0.55rem 0; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.02rem;
}
.results-list li a:hover { background: var(--paper-deep); }
.rl__team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rl__team--home { justify-content: flex-end; text-align: right; }
.rl__team .crest { flex: none; }
.rl__score {
  min-width: 3.4rem; text-align: center; background: var(--night); color: #fff; padding: 2px 6px; border-radius: 2px;
  font-weight: 900; font-variant-numeric: tabular-nums;
}

/* Full-time posters */
.tiles li { min-width: 0; }
.poster {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: #fff; overflow: hidden; background: var(--night-deep);
  border: 1px solid var(--line-night); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.poster:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold); }
.poster__art { position: absolute; inset: 0; z-index: -2; }
.poster__art svg { width: 100%; height: 100%; display: block; }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 11, 13, 0.35), rgba(10, 11, 13, 0.6) 55%, rgba(10, 11, 13, 0.95) 80%); }
.poster__body { display: grid; justify-items: center; gap: var(--s2); padding: var(--s5) var(--s4) var(--s4); text-align: center; }
.poster__ft { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.poster__row { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.poster__row .crest { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.poster__score {
  display: inline-flex; align-items: center; gap: 0.15em; font-family: var(--display); font-weight: 900;
  font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem); line-height: 0.85; font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.6);
}
.poster__score i { width: 0.22em; height: 0.08em; background: #fff; display: inline-block; }
.poster__names { display: grid; grid-template-columns: 1fr 1fr; width: 100%; font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; }
.poster__names span:first-child { text-align: left; }
.poster__names span:last-child { text-align: right; }
.poster__comp { font-size: var(--t-xs); color: #d4d0c6; }
.poster__headline { margin: auto 0 0; padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--t-sm); color: #ece9e2; }
.poster__sample { display: block; margin-top: var(--s1); font-size: 0.68rem; color: #a9a59c; }

/* Crest */
.crest { display: block; }

/* Scoreboard crests on match pages */
.scoreboard__team { display: flex; align-items: center; gap: var(--s4); }
.scoreboard__team--away { justify-content: flex-end; }
.scoreboard__team .crest { flex: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
@media (max-width: 719px) {
  .scoreboard__team { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .scoreboard__team--away { align-items: flex-end; }
}

/* League rows */
.rows { padding-top: var(--s4); }
.row { display: grid; gap: var(--s5); padding-block: var(--s6); border-top: 4px solid var(--ink); }
.row + .row { margin-top: var(--s5); }
@media (min-width: 1000px) { .row { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s7); } }
.row__head { display: grid; gap: var(--s2); align-content: start; }
.row__step { font-family: var(--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
.row__head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 0.92; }
.row__head h2 a { text-decoration: none; }
.row__more { font-size: var(--t-sm); }
.row__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 720px) { .row__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.row__items .story h3 { font-size: 1.5rem; }
.latest .mosaic__side .story { display: block; }
.latest .mosaic__side .story__pic { margin-bottom: var(--s3); }
.latest .mosaic__side .story h3 { font-size: 1.45rem; }

/* ---------- Founding writer band (homepage) ---------- */
.writer-band { background: var(--gold); color: var(--night-deep); overflow: hidden; }
.writer-band__grid { position: relative; display: grid; gap: var(--s5); align-items: center; padding-block: var(--s7); }
@media (min-width: 820px) { .writer-band__grid { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s7); } }
.writer-band__photo { position: relative; z-index: 1; display: block; width: min(17rem, 62vw); isolation: isolate; }
.writer-band__photo::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; background: var(--night-deep); z-index: -1; }
.writer-band__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 4px solid var(--night-deep); }
.writer-band__text { position: relative; z-index: 1; display: grid; gap: var(--s3); justify-items: start; }
.writer-band .kicker { color: var(--night-deep); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 900; }
.writer-band h2 { margin: 0; font-size: clamp(3.2rem, 1.6rem + 6vw, 7.5rem); line-height: 0.82; text-transform: uppercase; }
.writer-band h2 a { text-decoration: none; }
.writer-band h2 a:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.writer-band__latest { margin: var(--s2) 0 0; font-size: var(--t-lg); line-height: 1.45; max-width: 44ch; }
.writer-band__also { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.writer-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s2); }
.writer-band__page { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--night-deep); }
.writer-band__mono {
  position: absolute; right: -0.04em; bottom: -0.28em; z-index: 0; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-size: clamp(10rem, 6rem + 16vw, 22rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(14, 16, 19, 0.18);
}
.socials--gold a { border-color: var(--night-deep); color: var(--night-deep); background: rgba(255, 255, 255, 0.12); }
.socials--gold a:hover { background: var(--night-deep); color: var(--gold); border-color: var(--night-deep); }
.pyramid-intro h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 0.92; margin: var(--s2) 0 var(--s4); }
.pyramid-intro p { font-size: var(--t-lg); line-height: 1.5; max-width: 40ch; margin: 0; }
/* The nav has six items now: tighten on mid widths */
@media (min-width: 900px) and (max-width: 1180px) { .site-nav ul { gap: var(--s4); } .site-nav a { font-size: 1.1rem; } }
.scoreboard__note { margin: var(--s3) 0 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--gold); }
.scoreboard__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scoreboard__art--photo + * { }
.scoreboard__credit {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: var(--s3); z-index: 2;
  font-size: 0.72rem; color: #d4d0c6; background: rgba(10, 11, 13, 0.55); padding: 2px 8px; border-radius: 2px;
}
.scoreboard::after { z-index: -1; }
.scoreboard__art--photo { z-index: -2; }
.scoreboard:has(.scoreboard__art--photo)::after { background: linear-gradient(to bottom, rgba(10, 11, 13, 0.62), rgba(10, 11, 13, 0.72) 45%, rgba(10, 11, 13, 0.95)); }
.scoreboard__credit { z-index: 1; color: #ece9e2; background: rgba(10, 11, 13, 0.7); }

/* Official club badges */
.crest--img { display: inline-block; box-sizing: border-box; flex: none; vertical-align: middle; }
.crest--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* On dark grounds, badges sit on a light disc so dark crests stay visible */
.poster .crest--img, .scoreboard .crest--img, .hub-head .crest--img, .tile .crest--img {
  background: radial-gradient(circle, #ffffff 0 62%, rgba(255, 255, 255, 0.9) 63% 100%); border-radius: 50%; padding: calc(var(--crest-size, 48px) * 0.14);
  box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ticker .crest--img { width: 20px !important; height: 20px !important; }
.hub-head__badge { margin-bottom: var(--s3); }

/* ---------- Printable report card ---------- */
.print-card { border: 1px solid var(--rule, #d6d1c6); border-top: 3px solid var(--gold); padding: var(--s4); background: var(--paper-deep); }
.print-card p { font-size: .9rem; margin: 0 0 var(--s3); }
.print-card .button { display: inline-flex; gap: .45rem; align-items: center; }

/* ---------- Writer portal ---------- */
.portal-head { background: var(--night); color: var(--night-text); padding: var(--s7) 0 var(--s6); border-bottom: var(--line-w) solid var(--gold); }
.portal-head__grid { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center; }
.portal-head__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold); }
.portal-head h1 { font-size: var(--t-3xl); margin: var(--s2) 0 var(--s3); line-height: .95; }
.portal-head p { max-width: 38rem; color: var(--night-muted); margin: 0; }
.portal-stats { display: flex; gap: var(--s4); margin: 0; }
.portal-stats div { border: 1px solid #3a3d43; padding: var(--s3) var(--s4); min-width: 7rem; }
.portal-stats dt { font-size: var(--t-xs); color: var(--night-muted); text-transform: uppercase; letter-spacing: .08em; }
.portal-stats dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--gold); }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s7); align-items: start; }
.portal-card { background: var(--white); border: 1px solid var(--rule); padding: var(--s6); }

.upload { display: grid; gap: var(--s5); }
.upload fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.upload legend { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--s3); padding: 0; }
.upload legend span { display: block; font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--muted); margin-top: var(--s1); }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s2); }
.kind { position: relative; display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--rule); cursor: pointer; background: var(--paper); transition: border-color .15s var(--ease), background .15s var(--ease); }
.kind input { position: absolute; opacity: 0; pointer-events: none; }
.kind strong { font-size: var(--t-sm); }
.kind span { font-size: var(--t-xs); color: var(--muted); line-height: 1.35; }
.kind--on { border-color: var(--ink); background: var(--white); box-shadow: inset 0 -3px 0 var(--gold); }
.kind:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

.drop { border: 2px dashed #b9b2a3; background: var(--paper); padding: var(--s6) var(--s4); text-align: center; display: grid; justify-items: center; gap: var(--s2); color: var(--ink); transition: background .15s var(--ease), border-color .15s var(--ease); }
.drop svg { color: var(--gold-ink); }
.drop--over { border-color: var(--gold); background: #f3ead6; }
.drop__title { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); text-transform: uppercase; margin: 0; line-height: 1; }
.drop__sub { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--t-sm); }
.drop label.button { cursor: pointer; }
.drop__paste { background: none; border: 0; color: var(--gold-ink); text-decoration: underline; font: inherit; font-size: var(--t-sm); cursor: pointer; padding: var(--s2); }
#upload-files:focus-visible + svg { outline: 3px solid var(--gold); }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.file { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding: var(--s3); border: 1px solid var(--rule); background: var(--white); }
.file--bad { border-color: #b3261e; }
.file__thumb { width: 64px; height: 64px; background: var(--night); color: var(--gold); display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 800; font-size: .95rem; }
.file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.file__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.file__name { overflow-wrap: anywhere; font-size: var(--t-sm); }
.file__meta { font-size: var(--t-xs); color: var(--muted); }
.file__remove { margin-left: auto; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 var(--s1); }
.file__rights { display: grid; gap: var(--s2); margin-top: var(--s2); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); width: fit-content; max-width: 100%; }
.seg label { padding: .4rem .75rem; font-size: var(--t-xs); cursor: pointer; }
.seg label.on { background: var(--ink); color: var(--white); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--gold); }
.input, .field input, .field select, .field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .6rem .7rem; border: 1px solid #b9b2a3; background: var(--white); color: var(--ink); border-radius: 0; }
.input:focus, .field :is(input, select, textarea):focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--ink); }
.field { display: grid; gap: var(--s1); }
.field > span { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.match-grid { display: grid; grid-template-columns: 1fr 4.5rem auto 4.5rem 1fr; gap: var(--s3); align-items: end; }
.match-grid__dash { font-family: var(--display); font-weight: 800; font-size: 2rem; padding-bottom: .2rem; }
.field--score input { text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.5rem; padding: .3rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.upload__match .meta { margin: var(--s3) 0 0; }
.upload__more { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.upload__more summary { cursor: pointer; font-weight: 600; }
.upload__more[open] { display: grid; gap: var(--s3); }
.upload__errors { border-left: 4px solid #b3261e; background: #fbeceb; padding: var(--s3) var(--s4); }
.upload__errors ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }
.upload__send { display: grid; gap: var(--s2); }
.button--big { width: 100%; justify-content: center; font-size: 1.15rem; padding: 1rem 1.25rem; }
.upload__send progress { width: 100%; accent-color: var(--gold); }
.upload__send .meta { margin: 0; text-align: center; }
.upload-done { text-align: center; display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s4); }
.upload-done svg { color: var(--gold-ink); }
.upload-done h2 { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); text-transform: uppercase; margin: 0; }
.upload-done p { max-width: 32rem; margin: 0; }

.sent { list-style: none; margin: 0; padding: 0; display: grid; }
.sent li { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.sent a { color: var(--ink); text-decoration-color: var(--gold); }
.sent__meta { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.sent__meta a { color: var(--gold-ink); }
.status { justify-self: start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .45rem; background: var(--paper-deep); color: var(--ink); }
.status--published { background: #1f4d2e; color: #fff; }
.status--queried { background: #8a5a00; color: #fff; }
.status--received, .status--in-edit, .status--scheduled { background: var(--gold); color: var(--night); }
.portal-help { margin-top: var(--s6); background: var(--night); color: var(--night-text); padding: var(--s5); }
.portal-help h3 { font-family: var(--display); text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s3); font-size: var(--t-lg); }
.portal-help ol { padding-left: 1.1rem; margin: 0 0 var(--s3); display: grid; gap: var(--s2); font-size: var(--t-sm); }
.portal-help .meta { color: var(--night-muted); }

@media (max-width: 900px) {
  .portal-head__grid { grid-template-columns: auto 1fr; }
  .portal-stats { grid-column: 1 / -1; }
  .portal-grid { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 600px) {
  .portal-head { padding: var(--s5) 0; }
  .portal-head__photo { width: 64px; height: 64px; }
  .portal-head__grid { grid-template-columns: 1fr; }
  .portal-card { padding: var(--s4); margin: 0 calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
  .match-grid { grid-template-columns: 1fr auto 1fr; grid-template-areas: "home home home" "hs dash as" "away away away"; }
  .mg-home { grid-area: home; } .mg-hs { grid-area: hs; } .match-grid__dash { grid-area: dash; text-align: center; } .mg-as { grid-area: as; } .mg-away { grid-area: away; }
  .row2 { grid-template-columns: 1fr; }
  .drop { padding: var(--s5) var(--s3); }
}

.kind-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portal-side .section-head h2 { font-size: var(--t-xl); }
@media (max-width: 1100px) { .kind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .kind-grid { grid-template-columns: 1fr 1fr; }
  .portal-grid { padding-top: 0; }
  .paper.section:has(.portal-grid) { padding-top: 0; }
}

/* ---------- League logos and the club directory ---------- */
.league-logo { display: inline-flex; align-items: center; justify-content: center; height: var(--logo-h, 56px); flex: none; }
.league-logo img { height: 100%; width: auto; max-width: calc(var(--logo-h, 56px) * 3); object-fit: contain; display: block; }
.league-logo--dark { background: var(--night); padding: calc(var(--logo-h, 56px) * 0.12) calc(var(--logo-h, 56px) * 0.2); box-sizing: content-box; border-radius: 4px; }
.league-logo--dark img { height: 100%; }
.league-logo--none { width: calc(var(--logo-h, 52px) * 1.2); border: 1px dashed var(--rule); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .85rem; color: var(--muted); }
.hub-head__league { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; margin-bottom: var(--s2); }
.hub-head__with-logo { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.hub-head__with-logo .league-logo:not(.league-logo--dark) { background: var(--white); padding: 8px 12px; box-sizing: content-box; border-radius: 4px; }

.directory { display: grid; gap: var(--s8); }
.directory__head { display: flex; align-items: center; gap: var(--s4); padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: var(--line-w) solid var(--ink); }
.directory__head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--t-xl); text-transform: uppercase; line-height: 1; }
.directory__head h2 a { color: inherit; text-decoration: none; }
.directory__head h2 a:hover { color: var(--gold-ink); }
.directory__head .kicker { display: block; margin-bottom: 4px; }
.directory__more { margin-left: auto; font-size: var(--t-sm); color: var(--gold-ink); white-space: nowrap; }

.club-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3); }
.club-grid a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); height: 100%; box-sizing: border-box; transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.club-grid a:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.club-grid a > .crest, .club-grid a > .league-logo { grid-row: 1 / span 2; }
.club-grid .crest--img { background: none !important; box-shadow: none !important; padding: 0 !important; }
.club-grid__name { font-weight: 700; line-height: 1.2; align-self: end; }
.club-grid__note { grid-column: 2; font-size: var(--t-xs); color: var(--muted); align-self: start; margin-top: 2px; }
.club-grid a > .club-grid__name:last-child { grid-row: 1 / span 2; align-self: center; }
.club-grid--leagues { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.club-grid--leagues a { grid-template-columns: 9rem 1fr; padding: var(--s4); }
.club-grid--leagues .league-logo { justify-self: center; }
.club-grid--compact { grid-template-columns: 1fr; gap: var(--s2); }
.club-grid--compact a { padding: var(--s2) var(--s3); }
@media (max-width: 600px) {
  .club-grid { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .club-grid a { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--s3) var(--s2); row-gap: var(--s2); }
  .club-grid a > .crest, .club-grid a > .league-logo { grid-row: auto; }
  .club-grid__note { grid-column: 1; }
  .club-grid a > .club-grid__name:last-child { grid-row: auto; }
  .club-grid--leagues, .club-grid--compact { grid-template-columns: 1fr; }
  .club-grid--leagues a, .club-grid--compact a { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .club-grid--leagues a { grid-template-columns: 7rem 1fr; }
  .directory__head { flex-wrap: wrap; }
  .directory__head .league-logo { --logo-h: 48px !important; }
}