/* ---------------------------------------------------------------------------
   The Trapdoor. The type system and tokens follow the club pages
   (graphics/_shared/club-v2.css): Libre Franklin for labels and charts, Source
   Serif 4 for reading, with Bricolage Grotesque as this feature's display face.
   The page is self-contained, so a club-page change never moves it.
   Two signal colours, and nothing else strong but the clubs' own and gold for a
   title: --drop for a relegation, --rise for a return. Division bands are a ladder, as on the club
   pages: --tier-ink mixed into the chart's ground, deeper for each tier down
   (--f, 0 for the Premier League to 1 for League One).
   --------------------------------------------------------------------------- */
/* While Bricolage loads, a local bold sans shrunk to its width, so the title keeps to one line and nothing jumps. */
@font-face { font-family: "Bricolage fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 66%; }
:root {
  color-scheme: dark;
  --bg: #131313; --bg-2: #1c1c1c; --bg-3: #282828; --glass: rgba(19, 19, 19, 0.9);
  --ink: #f4f2ee; --ink-2: #cdc9c2; --ink-3: #a8a39b;
  --rule: rgba(244, 242, 238, 0.14); --rule-2: rgba(244, 242, 238, 0.3);
  --drop: #ff7a66; --drop-zone: rgba(255, 122, 102, 0.13);
  --rise: #5fcbe0; --rise-zone: rgba(95, 203, 224, 0.12);
  --gold: #e3b453; --focus: #ffd35c;
  --tier-ink: var(--ink); --tier-top: 15%; --tier-bottom: 5%;
  --hero-bg: #0d0d0d;
  --display: "Bricolage Grotesque", "Bricolage fallback", sans-serif;
  --sans: "Libre Franklin", "Helvetica Neue", Helvetica, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --gutter: 16px; --maxw: 1200px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f6f1; --bg-2: #efebe3; --bg-3: #e3ded3; --glass: rgba(248, 246, 241, 0.92);
  --ink: #161514; --ink-2: #3f3c38; --ink-3: #5a554f;
  --rule: rgba(22, 21, 20, 0.14); --rule-2: rgba(22, 21, 20, 0.32);
  --drop: #c4321c; --drop-zone: rgba(196, 50, 28, 0.1);
  --rise: #0b7287; --rise-zone: rgba(11, 114, 135, 0.1);
  --gold: #86600e; --focus: #161514;
  --tier-top: 5%; --tier-bottom: 15%;
  --hero-bg: #efe9df;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; text-wrap: balance; }

/* The theme switch, drawn by ../_shared/theme-toggle.js */
.theme-toggle { position: absolute; top: 16px; right: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 999px; font: 600 13px/1 var(--sans); cursor: pointer; }
.theme-toggle:hover { background: var(--bg-3); }
.theme-toggle svg { display: block; }
@media (max-width: 479px) { .theme-toggle { padding: 9px; } .theme-toggle span { display: none; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero { --bg: var(--hero-bg); --tier-top: 6%; background: var(--bg); padding: 22px var(--gutter) 40px; border-bottom: 1px solid var(--rule); }   /* the charts' rules, on the hero's ground */
/* One grid, so phones can read title, headline, figure, then the dek (house rule): on wide screens the dek sits
   under the title and the headline beside both. */
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto; }
.back { justify-self: start; padding: 8px 0; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.hero-id { margin-top: 28px; }
.flair { margin-top: 26px; }
.hero-dek { order: 1; }
.stats, .edition { order: 2; }
@media (min-width: 600px) and (max-width: 899px) { .flair-head { font-size: clamp(34px, 5.6vw, 50px); } }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px;
    grid-template-areas: "back back" "id flair" "dek flair" "fig fig" "stats stats" "ed ed"; }
  .back { grid-area: back; } .hero-id { grid-area: id; } .hero-dek { grid-area: dek; } .flair { grid-area: flair; align-self: end; }
  .hero-fig { grid-area: fig; } .stats { grid-area: stats; } .edition { grid-area: ed; }
}
.kicker { margin: 0 0 10px; font: 600 14px/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.hero-title { margin: 0; font-size: clamp(64px, 11vw, 138px); line-height: 0.86; letter-spacing: -0.02em; }
.hero-dek { max-width: 34em; margin: 22px 0 0; font: 400 clamp(18px, 1.6vw, 20px)/1.5 var(--serif); color: var(--ink-2); }
.flair-kicker { margin: 0 0 8px; font: 700 14px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--drop); }
.flair-head { margin: 0; font-size: clamp(34px, 3.9vw, 50px); line-height: 1; }
.flair-sub { margin: 14px 0 0; max-width: 32em; font: 400 17px/1.5 var(--sans); color: var(--ink-2); }
.hero-fig { margin: 30px 0 0; }
.fig-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; padding-top: 12px; border-top: 2px solid var(--ink); }
.fig-title { margin: 0; font: 700 15px/1.35 var(--sans); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; border-top: 1px solid var(--rule-2); }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 16px 0 0; }
.stats div + div { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.stats dt { font: 400 15px/1.35 var(--sans); color: var(--ink-2); }
.stats dd { margin: 0; font: 800 clamp(38px, 4.6vw, 58px)/1 var(--display); font-stretch: 75%; font-variant-numeric: lining-nums; }
.stats dd small { font-size: 0.5em; font-weight: 700; color: var(--ink-2); }
.edition { margin: 22px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink-3); }
@media (max-width: 699px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---- Section nav: sticky on wide screens, a bar along the bottom on narrow ones ---- */
.secnav { position: sticky; top: 0; z-index: 50; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.secnav-in { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: var(--maxw); height: 64px; margin: 0 auto; padding: 0 var(--gutter); }
.secnav .home { margin-right: auto; font: 800 22px/1 var(--display); font-stretch: 75%; color: var(--ink); text-decoration: none; }
.secnav a:not(.home) { padding: 10px 10px 8px; border-bottom: 2px solid transparent; font: 600 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.secnav a:not(.home):hover { color: var(--ink); }
.secnav a[aria-current] { color: var(--ink); border-bottom-color: var(--drop); }
.secnav-end { width: 0; margin-left: auto; }
@media (max-width: 899px) {
  .secnav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: 0; border-top: 1px solid var(--rule); }
  .secnav.off:not(:focus-within) { transform: translateY(100%); }
  .secnav-in { justify-content: space-between; gap: 0; height: auto; padding: 0 8px env(safe-area-inset-bottom); }
  .secnav .home, .secnav-end { display: none; }
  .secnav a:not(.home) { padding: 16px 6px 14px; border-bottom: 0; border-top: 3px solid transparent; font-size: 14px; }
  .secnav a[aria-current] { border-top-color: var(--drop); }
  html { scroll-padding-top: 20px; scroll-padding-bottom: 70px; }
  body { padding-bottom: 56px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .secnav { transition: transform 0.25s ease-out; } }
@media (max-width: 379px) { .secnav a:not(.home) { padding: 16px 2px 14px; font-size: 13px; } }

/* ---- Sections ---------------------------------------------------------------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sec { margin-top: clamp(56px, 7vw, 96px); }
.sec-head { display: grid; gap: 10px 48px; margin: 0 0 24px; padding-top: 14px; border-top: 2px solid var(--ink); }
.sec-no { margin: 0; font: 700 14px/1 var(--sans); letter-spacing: 0.08em; color: var(--drop); }
.sec-head h2 { margin: 0; font-size: clamp(38px, 5vw, 60px); line-height: 0.98; }
.sec-dek { margin: 0; max-width: 62ch; font-size: 18px; color: var(--ink-2); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .sec-no { grid-column: 1 / -1; }
  .sec-dek { padding-top: 0.35em; }
}

/* ---- Legends ---- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font: 400 15px/1.35 var(--sans); color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.sw-drop { background: var(--drop); }
.sw-rise { background: var(--rise); }
.sw-stay { box-shadow: inset 0 0 0 2px var(--ink-3); }
.sw-line { width: 22px; height: 0; border-radius: 0; border-top: 2px dashed var(--drop); }
.sw-mk { width: auto; height: auto; border-radius: 0; font-size: 12px; line-height: 1; color: var(--ink); }
.sw-mk.title { color: var(--gold); }

/* ---- Charts ---- */
figure { margin: 0; }
.chart svg { display: block; width: 100%; overflow: visible; }
/* A division's shade (chart.js GROUND copies the extremes, to choose club outlines). */
.band, td.cell { --k: calc(var(--tier-top) + (var(--tier-bottom) - var(--tier-top)) * var(--f, 0)); --shade: color-mix(in oklab, var(--tier-ink) var(--k), var(--bg)); }
.band { fill: var(--shade); }
.zone-drop { fill: var(--drop-zone); }
.zone-rise { fill: var(--rise-zone); }
.zone-po { fill: var(--rise-zone); opacity: 0.5; }
.door { stroke: var(--drop); stroke-width: 2; stroke-dasharray: 6 4; }
.edge { stroke: var(--rule-2); }
.grid { stroke: var(--rule); stroke-dasharray: 2 5; }
.tick { font: 500 13px var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.tick.on { fill: var(--ink); font-weight: 700; }
.tick.off { visibility: hidden; }   /* a regular year the selected season's would collide with */
.tick-cur { font: 700 13px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; font-variant-numeric: tabular-nums; }
.ax { font: 500 13px var(--sans); fill: var(--ink-3); }
.tier-name { font: 700 14px var(--sans); fill: var(--ink); }
.tier-sub { font: 400 13px var(--sans); fill: var(--ink-2); }
.note { font: 600 14px var(--sans); fill: var(--ink); }
.note-b { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.col-hi { fill: var(--drop); opacity: 0.16; }
.col-cur { fill: var(--ink); opacity: 0.12; }
.dot { stroke: var(--bg); stroke-width: 1.5; }
.dot.stay { fill: var(--bg); stroke: var(--ink-3); stroke-width: 2; }
.dot.drop { fill: var(--drop); }
.dot.claim { stroke: var(--ink); stroke-width: 1.5; }   /* the clubs the headline is about */
.dot.rise { fill: var(--rise); }
.dot-t { font: 600 13px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.hist { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* The heights the figures draw at (chart.js), held before data.json arrives so nothing below them moves. */
#hero-chart { min-height: 332px; } #down-chart { min-height: 412px; } #pyramid-chart { min-height: 660px; }
@media (max-width: 631px) { #hero-chart { min-height: 258px; } #down-chart { min-height: 324px; } }   /* figure under 600px */
@media (max-width: 763px) { #pyramid-chart { min-height: 604px; } }   /* figure under 700px */
.hist:focus-visible, .pyr:focus-visible { outline-offset: 6px; }

/* A readout keeps room for its tallest text, so nothing below it jumps. */
.readout { min-height: 3.2em; margin: 10px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.readout b { color: var(--ink); font-weight: 700; }
.readout .r-drop { color: var(--drop); font-weight: 600; }
.readout .r-rise { color: var(--rise); font-weight: 600; }

/* ---- The pyramid ---- */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; border: 0; }
.picks legend { margin-bottom: 8px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: 999px;
  background: transparent; font: 600 15px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; }
.pick:hover { background: var(--bg-2); color: var(--ink); }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pick .n { font-weight: 400; opacity: 0.75; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .pick { min-height: 34px; padding: 6px 11px; font-size: 14px; } }
.pick-note { min-height: 3em; max-width: 70ch; margin: 6px 0 14px; font: italic 400 17px/1.5 var(--serif); color: var(--ink-2); }
.pyr { touch-action: pan-y; }
/* A club's colour, and the outline it needs to show on the bands (if any), for each theme: see clubStyle in chart.js. */
.club { --c: var(--cd); --case: var(--case-d); }
:root[data-theme="light"] .club { --c: var(--cl); --case: var(--case-l); }
.rib { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rib-case { stroke: var(--case, transparent); stroke-width: 6; }
.rib-line { stroke: var(--c); stroke-width: 3; }
.node { fill: var(--c); stroke: var(--case, var(--bg)); stroke-width: 1.5; }
.mk { visibility: hidden; font: 700 11px var(--sans); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.mk.title { fill: var(--gold); }
.lab { font: 600 13px var(--sans); fill: var(--ink-2); }
.lab-row { cursor: pointer; }
.lab-hit { fill: transparent; }
.lead { fill: none; stroke: var(--case, var(--c)); stroke-width: 1.25; stroke-dasharray: 2 3; opacity: 0.8; }   /* a colour that needs an outline shows its lead in it */
.hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; pointer-events: stroke; }
.club { transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) { .club { transition: none; } }
.pyr.focus .club:not(.on) { opacity: 0.13; }
.pyr.focus .club.on .lab { fill: var(--ink); font-weight: 700; }
.pyr.focus .club.on .rib-line { stroke-width: 4; }
.pyr.focus .club.on .rib-case { stroke-width: 7; }
.club.on .mk { visibility: visible; }
.start { visibility: hidden; font: 700 11px var(--sans); fill: var(--ink); text-anchor: end; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
.pyr.focus .club.on .start { visibility: visible; }

.club-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; align-content: start; min-height: 150px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.club-read .crest { width: 52px; height: 52px; object-fit: contain; grid-row: span 2; }
.club-read h3 { margin: 0; font-size: 30px; line-height: 1; }
.club-read .blurb { margin: 4px 0 0; max-width: 62ch; font: 400 17px/1.5 var(--serif); color: var(--ink-2); }
.club-read .idle { grid-column: 1 / -1; margin: 0; font: 400 16px/1.5 var(--sans); color: var(--ink-3); }
.club-read .chooser { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.chooser button, .club-read .all { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; border: 0; background: none; font: 600 15px/1.2 var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; }
.chooser button:hover, .club-read .all:hover { color: var(--ink); text-decoration: underline; }
.chooser img { width: 22px; height: 22px; object-fit: contain; }
.club-read .all { grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 599px) { .club-read .chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.club-read .runs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.runs li { padding: 8px 10px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.runs li + li { padding-left: 10px; border-left: 1px solid var(--rule); }
.runs b { display: block; color: var(--ink); font-size: 15px; }
.runs .o-drop { color: var(--drop); font-weight: 600; }
.runs .o-rise { color: var(--rise); font-weight: 600; }
@media (max-width: 699px) {
  .club-read .runs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .runs li:nth-child(4) { padding-left: 0; border-left: 0; }
  .club-read h3 { font-size: 26px; }
}

/* ---- Every club: the ledger ---- */
.tscroll { position: relative; overflow-x: auto; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 15px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--rule); }
thead th { background: var(--bg-2); font: 700 13px/1.2 var(--sans); color: var(--ink-2); }
.ledger > tbody > tr > th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 200px; border-right: 1px solid var(--rule); }
.ledger thead th:first-child { position: sticky; left: 0; z-index: 2; }
.ledger .grp th { padding: 16px 10px 6px; background: var(--bg); font: 700 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.cname { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: 600 15px/1.2 var(--sans); text-align: left; cursor: pointer; }
.cname img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.cname::after { content: "+" / ""; margin-left: auto; padding-left: 10px; color: var(--ink-3); font-weight: 400; }
.cname[aria-expanded="true"]::after { content: "–" / ""; }
.cname:hover { color: var(--ink); text-decoration: underline; }
.nm-s { display: none; }
@media (max-width: 599px) {   /* phones: the short name, so two seasons show beside it; the full name stays for screen readers */
  .ledger > tbody > tr > th[scope="row"] { min-width: 0; }
  .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nm-s { display: inline; }
  .cname { gap: 6px; font-size: 14px; }
  .cname img { width: 20px; height: 20px; }
  .cname::after { padding-left: 6px; }
  .ledger th, .ledger td { padding: 7px 7px; }
  td.cell { min-width: 0; }
  td.cell .t { margin-right: 3px; }   /* a third season shows, so the table reads as one that scrolls */
}
td.cell { background: var(--shade); min-width: 92px; border-left: 1px solid var(--bg); }
td.cell .pos { font-weight: 700; color: var(--ink); }
td.cell .t { margin-right: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
td.cell .pts { display: block; font-size: 13px; color: var(--ink-3); }
td.cell .o { margin-left: 5px; font-size: 12px; }
td.cell .o.up { color: var(--rise); }
td.cell .o.down { color: var(--drop); }
td.cell .o.title { color: var(--gold); }
td.dest-cell { font-weight: 600; color: var(--ink-2); }
td.dest-cell.pl { font-weight: 700; color: var(--ink); }
tr.more td { padding: 4px 16px 18px; white-space: normal; background: var(--bg-2); }
tr.more[hidden] { display: none; }
.more p { position: sticky; left: 16px; max-width: min(70ch, calc(100vw - 2 * var(--gutter) - 34px)); margin: 10px 0 8px; font: 400 17px/1.5 var(--serif); color: var(--ink-2); }
.more table { width: auto; font-size: 14px; }
.more table th, .more table td { padding: 5px 14px 5px 10px; background: none; }
.more table th:first-child, .more table td:first-child { padding-left: 0; }
.more table th { color: var(--ink-3); font-weight: 600; }
.more .num { text-align: right; }
.ledger-note { margin: 12px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink-3); }

/* ---- Records ---- */
.recs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rec-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; align-self: start; }
.rec-meta img { width: 30px; height: 30px; object-fit: contain; }
.rec-club { font: 700 15px/1.3 var(--sans); }
.rec-when { display: block; font: 400 14px/1.3 var(--sans); color: var(--ink-3); }
.kind { display: inline-block; padding: 3px 7px; border: 1px solid var(--rule-2); font: 700 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rec h3 { margin: 0; font: 700 20px/1.3 var(--sans); letter-spacing: 0; text-wrap: balance; }
.rec p { margin: 6px 0 0; max-width: 64ch; font: 400 17px/1.55 var(--serif); color: var(--ink-2); }
.rec .src { margin-top: 8px; font: 400 14px/1.5 var(--sans); color: var(--ink-3); }
.rec .src a { color: inherit; }
@media (max-width: 699px) { .rec { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.foot { max-width: var(--maxw); margin: clamp(64px, 8vw, 110px) auto 0; padding: 18px var(--gutter) 64px; }
.foot-in { display: grid; gap: 28px 56px; padding-top: 16px; border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } }
.foot h2 { margin: 0 0 8px; font-size: 28px; }
.foot p, .foot li { font: 400 15px/1.6 var(--sans); color: var(--ink-2); }
.foot p { margin: 0 0 12px; }
.foot ul { margin: 0; padding-left: 18px; }
.foot details summary { cursor: pointer; font: 600 15px/1.5 var(--sans); }
.colophon { grid-column: 1 / -1; margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-3); }