/* ---------------------------------------------------------------------------
   PLstats club chronicle, Redesign 2: shared styles.

   One legible type system for every club: Libre Franklin for interface, labels
   and charts, Source Serif 4 for reading. Each club page sets its own display
   face (headings only) and palette by overriding the tokens below, for dark
   (:root) and light (:root[data-theme="light"]). Big numbers use --num, which
   follows the display face unless a club points it at a face with clearer figures.
   The season charts shade each division band a step deeper than the one above, like
   a ladder: --tier-ink (the page's --ink unless the club sets another) mixed into the
   chart's ground at --tier-top for the top flight and --tier-bottom for the lowest tier
   the club has played in, evenly between (club-v2.js gives each band its place, --f).
   Every club gets the same span, so two divisions get a big step and six a smaller one.
   --------------------------------------------------------------------------- */
: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);
  --accent: #e9e6e0; --accent-ink: #e9e6e0; --on-accent: #131313;   /* brand colour: fills, text, text on fills */
  --line: var(--accent);                                            /* the season line */
  --gold: #e3b453; --gold-ink: #e8bd62;                             /* silverware, and nothing else */
  /* Division bands: on dark, the top flight is lifted most and each tier below a step less, the lowest still a step
     above the page. 16% keeps a red line at 3:1. */
  --tier-ink: var(--ink); --tier-top: 16%; --tier-bottom: 7%;
  --hatch: rgba(244, 242, 238, 0.22); --focus: #ffd35c;
  --edge: rgba(0, 0, 0, 0.75);   /* the shadow a held column casts over what scrolls under it: never a glow */
  --hero-bg: var(--bg); --hero-ink: var(--ink); --hero-ink-2: var(--ink-2); --hero-rule: var(--rule);
  --display: Georgia, "Times New Roman", serif; --display-weight: 700; --display-stretch: 100%;
  --display-tracking: 0; --display-case: none; --num: var(--display);
  --sans: "Libre Franklin", "Helvetica Neue", Helvetica, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --gutter: 16px; --maxw: 1200px;
  --chart-bg: var(--bg);   /* what a chart is drawn on: the division shades are mixed into it */
}
: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: #625d56;
  --rule: rgba(22, 21, 20, 0.14); --rule-2: rgba(22, 21, 20, 0.32);
  --accent: #262422; --accent-ink: #262422; --on-accent: #f8f6f1;
  --gold: #a87b17; --gold-ink: #7f5a0c;
  /* on paper, the top flight is the palest, yet a visible step off the page, and each tier below a step deeper; at 17% a
     red line and a gold edge keep 3:1 */
  --tier-top: 6%; --tier-bottom: 17%;
  --hatch: rgba(22, 21, 20, 0.2); --focus: #161514; --edge: rgba(22, 21, 20, 0.2);
}
@media (min-width: 700px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 76px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }   /* the page holds still when the reader stops it scrolling */
@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; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; }
.hatch-line { stroke: var(--hatch); stroke-width: 2; }
.none { margin: 0; color: var(--ink-3); font: 400 16px/1.5 var(--sans); }
.nw { white-space: nowrap; }
/* The club's display face: headings only. Big numbers use --num. */
.hero-title, .sec-head h2, .ep-title, .st-head h3, .rp-h {
  font-family: var(--display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking); text-transform: var(--display-case);
}
/* Their figures line up and keep their own widths, so a slab face's "13" never reads "1 3"; the readout's season alone
   is tabular, so it holds still while scrubbing. */
.stats dd, .shelf-n, .ro-season, .rec-n { font-family: var(--num); font-weight: var(--display-weight); font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "pnum" 1; }
.ro-season { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
/* Text of only figures and a dash has no script, and some faces (Zilla Slab) keep their figure features for Latin
   text: an unseen, unread letter makes the season Latin, so its figures line up while scrubbing. */
.ro-season::after { content: "x" / ""; font-size: 0; }

/* Chrome: the theme toggle top-right. It stays put on wide screens and scrolls away with the hero on smaller ones. */
.theme-toggle { position: fixed; 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);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); cursor: pointer; }
.theme-toggle:hover { background: var(--bg-3); }
.theme-toggle svg { display: block; }
/* Over a patterned hero the focus ring keeps a solid ground of its own. */
.theme-toggle:focus-visible { box-shadow: 0 0 0 5px var(--bg), 0 4px 16px rgba(0, 0, 0, 0.22); }
@media (max-width: 1099px) { .theme-toggle { position: absolute; } }
@media (max-width: 479px) {
  .theme-toggle { padding: 9px; }
  .theme-toggle span { display: none; }
}

/* Hero: the club page's slot. The shared layout is plain; flair comes from the club. */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding: 92px var(--gutter) 44px; }
.hero-in { position: relative; max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto; }   /* lines up with main */
.hero-id { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.hero-crest { flex: none; width: auto; height: clamp(84px, 11vw, 136px); }   /* by height, so tall crests stay in scale */
.kicker { margin: 0; font: 600 14px/1.35 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hero-ink-2); }
/* A club sizes its title by --title-size, so the name under it keeps to the same scale. */
.hero-title { --title-size: clamp(46px, 8.4vw, 108px); margin: 0; font-size: var(--title-size); line-height: 0.95; overflow-wrap: anywhere; }
/* Under the nickname, the club's name, a .hero-title in the club's title face and ink at two-fifths its size (never
   under 24px, so the title's ink, chosen for large text, still reads), and the ground in the kicker's small capitals
   beside it on one baseline, or whole on the next line. The nickname's link box reaches down over them in a face with
   deep descents, so their links take the pointer there. */
.hero-sub { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 6px 0 0; }
.hero-title.hero-name { width: auto; max-width: none; margin: 0; padding: 0; font-size: max(24px, var(--title-size) * 0.4); line-height: 1; }
.hero-dek { max-width: 38em; margin: 24px 0 0; font: 400 clamp(18px, 1.7vw, 21px)/1.5 var(--serif); color: var(--hero-ink-2); }
.hero-flair:empty { display: none; }
.hero-flair { margin-top: 24px; }
/* The hero's name, nickname and ground open their background pieces in the reader (below): a dotted underline, solid
   on hover. Under the name, the links to read them together. */
.bg-link { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.bg-link:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
.hero-title .bg-link, #hero-flair h2 .bg-link { text-decoration-thickness: max(2px, 0.025em); text-underline-offset: 0.12em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.reading-links { margin: 12px 0 0; font: 600 14px/1.5 var(--sans); }
.reading-links:empty { display: none; }
.reading-links a { display: inline-block; padding: 8px 0; color: inherit; }   /* the masthead's ink, where a club sets one */
.reading-links a:not(:last-child) { margin-right: 22px; }
.reading-links .st-link .bk { color: inherit; }   /* the hero's own ink, on any ground */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 780px; margin: 30px 0 0; border-top: 1px solid var(--hero-rule); }
.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(--hero-rule); }
.stats dt { font: 600 13px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--hero-ink-2); }
.stats dd { margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1; }
.edition { margin: 22px 0 0; font: 400 16px/1.45 var(--sans); color: var(--hero-ink-2); text-wrap: balance; }
.edition .ed { display: block; }   /* one statement a line */
.sep { white-space: nowrap; }
.sep.wrap { display: block; height: 0; overflow: hidden; }   /* a dot at the end of a line becomes the line break */
.ro-more[hidden] { display: none; }
@media (max-width: 599px) {
  .hero { padding-top: 76px; }
  .hero-id { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Section nav: sticky at the top on wide screens, a bar along the bottom on narrower 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; height: 68px; padding: 0 150px 0 330px; }
.secnav a { 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:hover { color: var(--ink); }
.secnav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.secnav .nav-crest { padding: 0 8px 0 0; border: 0; }
.nav-crest img { display: block; width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 1099px) { .secnav-in { padding: 0 24px; } }   /* the switch and the toggle scroll away with the hero */
@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%); }   /* while the hero is in view (spyNav) */
  .secnav-in { justify-content: flex-start; gap: 0; height: auto; padding: 0 6px env(safe-area-inset-bottom); overflow-x: auto; scrollbar-width: none; }
  .secnav-in::-webkit-scrollbar { display: none; }
  /* When the links overflow, a fade on each side that has more (spyNav sets fade-l and fade-r as the bar scrolls) */
  .secnav-in.fade-l { --fl: 28px; } .secnav-in.fade-r { --fr: 56px; }
  .secnav-in:is(.fade-l, .fade-r) { --m: linear-gradient(90deg, transparent, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent); -webkit-mask-image: var(--m); mask-image: var(--m); }
  .secnav-in > :nth-child(2) { margin-left: auto; }
  .secnav-in > :last-child { margin-right: auto; }
  .secnav a { padding: 16px 9px 14px; border-bottom: 0; border-top: 3px solid transparent; font-size: 14px; }
  .secnav a:focus-visible { outline-offset: -3px; }
  .secnav a[aria-current] { border-top-color: var(--accent); }
  .secnav .nav-crest { display: flex; align-items: center; padding: 0 8px 0 6px; border-top: 0; }
  .nav-crest img { width: 26px; height: 26px; }
  html { scroll-padding-top: 20px; scroll-padding-bottom: 70px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .secnav { transition: transform 0.25s ease-out; } }
@media (max-width: 599px) {   /* phones: no crest in the bar (the hero has it); the links spread edge to edge */
  .secnav .nav-crest { display: none; }
  .secnav-in { justify-content: space-between; padding: 0 12px env(safe-area-inset-bottom); scroll-padding: 0 12px; }
  .secnav-in > a:nth-child(n) { flex: 0 1 auto; margin: 0; padding: 16px 5px 14px; }
}
/* Seven links fit from 358px, 6px apart; below that the bar scrolls sideways (spyNav keeps the current link in view). */
@media (max-width: 479px) {
  .secnav-in > a:nth-child(n) { padding: 16px 3px 14px; font-size: 13px; }
  .nav-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* "Board" on phones */
}
@media (max-width: 394px) { .secnav-in { padding-left: 6px; padding-right: 6px; scroll-padding: 0 6px; } .secnav-in > a:nth-child(n) { font-size: 12px; } }
@media (max-width: 357px) { .secnav-in > a:nth-child(n) { padding: 16px 6px 14px; } }

/* Sections */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sec { margin-top: clamp(56px, 7vw, 96px); }   /* a margin, so a jump to a section lands on its heading */
.sec-head { display: grid; gap: 10px 48px; margin: 0 0 28px; 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(--accent-ink); }
.sec-head h2 { margin: 0; font-size: clamp(36px, 4.8vw, 58px); line-height: 1.02; }
.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.45em; }
}

/* Charts shared by the seasons, the eras and the timelines */
.chart, .tl { margin: 0; }
.chart svg, .tl svg { display: block; max-width: 100%; overflow: visible; }
#season-chart { touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
/* A division's shade, solid over its ground: --f is its place on the club's ladder, 0 for the top flight to 1 for the
   lowest tier used. Mixed in oklab, so even steps look even. Whatever sits in a band (a year, a marker, the word War,
   a title's disc, the cursor's ring) is haloed in that band's own shade, so it never wears a sticker of another. */
.band, th.tier, .mk, .mk-t, .war-label, .champ, .cursor-halo {
  --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(--chart-bg));
}
.band { fill: var(--shade); }
.band-rule { stroke: var(--rule-2); }
.tier-name { font: 700 14px var(--sans); fill: var(--ink); }
.tier-sub { font: 400 13px var(--sans); fill: var(--ink-2); }   /* ink-2: 4.5:1 even on the deepest band */
.tier-name.inset { font-size: 13px; font-weight: 600; fill: var(--ink-2); }
.war { fill: url(#v2-hatch); }
.war-label { font: 600 13px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--shade); stroke-width: 4px; }
.tick { font: 500 13px var(--sans); fill: var(--ink-3); text-anchor: middle; font-variant-numeric: tabular-nums; }
.tick-line { stroke: var(--rule-2); }
.grid { stroke: var(--rule); stroke-dasharray: 2 5; }
.ribbon { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ribbon-dot, .pt { fill: var(--line); }
.bridge { fill: none; stroke: var(--line); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.55; }   /* a move across a war */
.mk { fill: var(--ink); stroke: var(--shade); stroke-width: 2.5px; paint-order: stroke; stroke-linejoin: round; }
.mk-t { font: 600 13px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--shade); stroke-width: 4px; stroke-linejoin: round; }
.mk-a { font-size: 10px; fill: var(--ink-3); }   /* the arrows in a label shared by close moves */
.mk-t.dim { visibility: hidden; }   /* a year under the selected season's ring: the readout gives that move */
.champ { fill: var(--gold); stroke: var(--shade); stroke-width: 1.5; }
:root[data-theme="light"] .champ { stroke: var(--gold-ink); stroke-width: 1.25; }   /* on paper the deeper bands dim the gold: a dark edge keeps each title's shape */
.hit-dot { fill: transparent; }
.cursor { stroke: var(--ink); stroke-width: 1; }
.cursor-ring, .cursor-halo { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.cursor-halo { stroke: var(--shade); stroke-width: 8.5; }
.cursor-tag rect { fill: var(--ink); }
.cursor-tag text, .cursor-tag path { font: 700 13px var(--sans); fill: var(--bg); font-variant-numeric: tabular-nums; }
/* While a season is pinned, the season under the pointer: a faint cursor, no halo, its tag in outline */
.cursor.ghost { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.ghost .cursor-ring { stroke: var(--ink-3); stroke-width: 1.5; }
.ghost .cursor-halo { display: none; }
.ghost .cursor-tag rect { fill: var(--bg); stroke: var(--ink-3); }
.ghost .cursor-tag text { fill: var(--ink-2); }
.bracket { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.bracket-t { font: italic 500 15px var(--serif); fill: var(--ink); }
.cup use { color: var(--gold); fill: currentColor; stroke: var(--chart-bg); stroke-width: 1.5px; paint-order: stroke; }   /* a halo, for icons that overlap */
.cup use.on { filter: drop-shadow(0 0 0.8px var(--ink)) drop-shadow(0 0 0.8px var(--ink)); }   /* the selected season's, ringed */
.band-note, .tl-note { font: italic 400 15px var(--serif); fill: var(--ink-3); }
.tl-note { paint-order: stroke; stroke: var(--bg); stroke-width: 6px; }   /* clear of the gridlines */
.chart figcaption { margin-top: 6px; font: 400 16px/1.45 var(--sans); color: var(--ink-3); }
/* The chart, the rail and the readout: jumps to a season land here, all three in view */
.scrubber { scroll-margin-top: 12px; }
#season-legend { margin: 0 0 18px; }

/* The season rail */
.scrub { display: block; max-width: none; height: 34px; margin: 2px 0 0; padding: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.scrub::-webkit-slider-runnable-track { height: 2px; background: var(--rule-2); }
.scrub::-moz-range-track { height: 2px; background: var(--rule-2); }
.scrub::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; border: 3px solid var(--bg); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); -webkit-appearance: none; }
.scrub::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--bg); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.scrub:focus-visible { outline-offset: 4px; }

/* The readout of the selected season */
.readout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 36px; align-items: start; min-height: 170px; margin-top: 8px; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.ro-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.ro-season { margin: 0; font-size: clamp(38px, 4.4vw, 54px); line-height: 1; text-align: center; white-space: nowrap; }
.step, .ro-pin { border: 1px solid var(--rule-2); background: transparent; cursor: pointer; }
.step { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.step:hover:not([aria-disabled="true"]), .ro-pin:hover { background: var(--bg-3); }
.step[aria-disabled="true"] { border-color: var(--rule); cursor: default; }
.step[aria-disabled="true"] svg { opacity: 0.35; }   /* the icon fades; the focus ring keeps full strength */
/* Pin: under the season, where a pointer can hover; pressed, it is filled like the pinned cursor's tag */
.ro-pin { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border-radius: 15px;
  color: var(--ink-2); font: 600 13px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.ro-pin svg { fill: currentColor; }
.ro-pin[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
@media (any-hover: none) { .ro-pin { display: none; } }
.ro-body p { margin: 0; }
.ro-era { display: inline-block; margin-bottom: 2px; padding: 4px 0; font: 700 13px/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; }
.ro-era:hover { text-decoration: underline; }
.ro-main { font: 600 20px/1.35 var(--sans); }
.ro-out { margin-top: 2px !important; font: 400 17px/1.4 var(--sans); color: var(--ink-2); }
.ro-rec { margin: 3px 0 4px !important; font: 400 16px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* the league record */
.ro-aside { margin: 3px 0 4px !important; font: 400 15px/1.4 var(--sans); color: var(--ink-3); }   /* a league off the chart */
.ro-hon { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ro-hon li { display: flex; align-items: flex-start; gap: 10px; }
.ro-hon .ico { flex: none; width: 20px; height: 23px; color: var(--gold); }
.ro-hon b { display: block; font: 600 16px/1.35 var(--sans); color: var(--gold-ink); }
.ro-ctx { display: block; font: 400 16px/1.45 var(--serif); color: var(--ink-2); }
.ro-more { display: inline-block; margin-top: 2px; font: 600 15px/1.4 var(--sans); color: var(--accent-ink); }
.ro-note { margin-top: 6px !important; font: italic 400 17px/1.4 var(--serif); color: var(--ink); }
.ro-near { margin-top: 10px !important; font: 400 16px/1.4 var(--sans); color: var(--ink-2); }
.ro-ev { margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rule); }
.ro-ev-h { font: 700 13px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); }
.ro-ev .ro-hon { margin-top: 8px; }
.ro-evs { margin: 6px 0 0; padding: 0 0 0 18px; font: 400 16px/1.45 var(--serif); color: var(--ink-2); }
.ro-evs li + li { margin-top: 3px; }
@media (min-width: 700px) { .ro-season { min-width: 4.4em; } .ro-head { position: sticky; top: 16px; } }   /* beside a long story */
@media (min-width: 900px) { .ro-head { top: 84px; } }
@media (max-width: 699px) {
  .readout { grid-template-columns: minmax(0, 1fr); min-height: 120px; }
  .ro-main { font-size: 18px; }
  .ro-ctx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Legends */
.legend:empty { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 16px/1.35 var(--sans); color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li > .nw { display: contents; }   /* a hyphenated word (txt() wraps it) stays in the label's own flex item */
.legend .ico { flex: none; width: 16px; height: 19px; color: var(--gold); fill: currentColor; }
.sw { display: inline-block; flex: none; width: 18px; height: 12px; font-style: normal; }
.sw-line { height: 3px; border-radius: 2px; background: var(--line); }
.sw-champ { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
:root[data-theme="light"] .sw-champ { box-shadow: inset 0 0 0 1.25px var(--gold-ink); }   /* as the chart's title discs */
.sw-mk { width: auto; height: auto; font-size: 14px; line-height: 1; color: var(--ink); }
.sw-war { background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--rule); }
.sw-story { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); }

/* Disclosure rows and the season table. The +/– marks are decoration, not part of the name. */
.more { margin-top: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.more > summary { display: flex; padding: 14px 0; font: 600 16px var(--sans); }
.more > summary::before, .shelf-list > summary::before { content: "+" / ""; display: inline-block; flex: none; width: 1.2em; color: var(--ink-3); }
.more[open] > summary::before, .shelf-list[open] > summary::before { content: "–" / ""; }
/* The season table. Wide screens: a set table across the column, the outcome taking the width the others leave (it
   wraps, as from 1000px a division's name never does), in the page's own scroll, its header held under the section
   nav. Narrower ones: a box of its own that scrolls both ways, header and season held (separate borders, so a held cell
   keeps its rules), the rows fading at the right while there is more and the held season casting a shadow once they
   slide under it (fade-r, fade-l: see edges() in club-v2.js). Every row is one line (phones take the outcome's short
   form: see buildSeasons) but for a long outcome, which wraps within the width beside the held season (--sw), so
   scrolled fully right it reads whole, and on phones its row's figures centre beside it. Each season cell takes its
   division's shade (.tier), so the table reads as the chart's ladder. The box contains the hidden words in its cells
   (position). */
/* The table opens under a heading of its own, with a button under its latest ten rows for the rest. */
.stable { margin-top: 44px; }
.st-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.st-head h3 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; }
.st-sub { margin: 0; font: 400 16px/1.4 var(--sans); color: var(--ink-2); }
.st-more { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin: -12px 0 16px; padding: 14px 16px;
  border: 1px solid var(--rule); border-top: 0; background: var(--bg-2); font: 600 16px/1.3 var(--sans); cursor: pointer; }
.st-more:hover { background: var(--bg-3); }
.st-more::after { content: "" / ""; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.st-more[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.tscroll { position: relative; margin-bottom: 12px; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 16px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
th, td { padding: 7px var(--cell-x, 12px); text-align: left; vertical-align: baseline; white-space: nowrap; border-bottom: 1px solid var(--rule); }
thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-2); font-weight: 700; box-shadow: inset 0 -1px 0 var(--rule-2); }
tbody th { font-weight: 600; background: var(--bg); }
tbody th.tier { background: var(--shade); }
thead abbr { text-decoration: none; }
/* Short forms (t-short): Pos for Finish on phones; beside each division's name its tier, muted at the cell's right, which
   phones show alone, and a league outside the numbered divisions only as its initials, keyed under the table. */
.t-short, td.lg .t-short, .lg-key { display: none; }
.dvw { display: flex; justify-content: space-between; gap: 18px; }
.dv .t-short { display: inline; color: var(--ink-3); }
th.fin, td.fin { text-align: right; }   /* the finish, a title's gold disc before it */
.fin .sw-champ { margin-right: 6px; }
/* The league record, P W D L F A Pts: fine rules set off the goals and the points (and, on wide screens, frame the
   record). A deduction's mark hangs in the cell's padding, so the points stay in line. */
.n { padding: 7px 9px; text-align: right; }
tr > .n:is(:nth-child(8), :nth-child(10)) { border-left: 1px solid var(--rule); }
.n > [aria-hidden] { position: absolute; }
.n + :not(.n) { padding-left: 18px; }   /* the outcome, set off from the points */
td.na { color: var(--ink-3); }
.war-row { color: var(--ink-2); }
.deduct { margin: 0 0 16px; font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
@media (min-width: 900px) {
  thead th { top: 69px; }
  thead th:last-child { width: 100%; }
  tr > td:last-child, td.lg { white-space: normal; line-height: 1.2; text-wrap: pretty; }   /* never leaving a word alone */
  tr > .n:nth-child(4) { border-left: 1px solid var(--rule); }
  tr > .n:nth-child(10) { border-right: 1px solid var(--rule); }
}
@media (min-width: 900px) and (max-width: 999px) { td.lg { min-width: 8em; } }   /* else the outcome would have no room */
@media (min-width: 1000px) { td.lg { white-space: nowrap; } }   /* a league's name on one line; the outcome gives way */
@media (max-width: 899px) {
  .tscroll { max-height: min(72svh, 640px); overflow: auto; container-type: inline-size; }   /* 100cqw: the box's width */
  .tscroll.fade-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 14px); mask-image: linear-gradient(to left, transparent, #000 14px); }
  .tscroll:focus-visible { -webkit-mask-image: none; mask-image: none; }   /* a mask would clip the focus ring */
  tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--rule-2); }
  thead th:first-child { z-index: 3; box-shadow: inset -1px 0 0 var(--rule-2), inset 0 -1px 0 var(--rule-2); }
  .fade-l tr > :first-child::after { content: ""; position: absolute; top: 0; bottom: -1px; left: 100%; width: 14px; background: linear-gradient(to right, var(--edge), transparent); pointer-events: none; }
  .war-row > span { display: inline-block; position: sticky; left: calc(var(--sw, 0px) + 14px); }   /* beside the held season, clear of its shadow */
  /* At most the width beside the held season less the cell's padding (18px and 12px here, the first clearing the
     shadow), so scrolled fully right the outcome reads whole */
  .oc > span { display: block; width: max-content; max-width: calc(100cqw - var(--sw, 0px) - 30px); white-space: normal; line-height: 1.25; text-wrap: pretty; }
}
/* Phones: every column as narrow as it can be, so from 375px the points show beside the season at first view; the
   figures 6px apart and ruled only where two sets meet (L | F, A | Pts). */
@media (max-width: 599px) {
  table { --cell-x: 5px; font-size: 14px; }
  th, td { vertical-align: middle; }
  .dv { width: 1%; padding-right: 3px; }
  th.fin, td.fin { padding-left: 2px; }
  .n { padding: 7px 3px; }
  tr > .n:nth-child(10) { padding-right: 16px; }   /* the points (and a deduction's *) clear the fade at the box's edge */
  .n + :not(.n) { padding-left: 14px; }   /* the shadow's width */
  /* Exactly that width (padding 14px and 5px): scrolled fully right, the season and its outcome fill the box */
  .oc > span { width: calc(100cqw - var(--sw, 0px) - 19px); max-width: none; }
  .t-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read, not shown */
  .oc:has(.t-full a:focus-visible) .t-short a { outline: 2px solid var(--focus); outline-offset: 2px; }   /* Tab reaches the read copy's link: ring the shown one */
  .t-short, .dv .t-short, td.lg .t-short { display: inline; color: inherit; }
  .lg-key { display: block; }
}
@media (max-width: 389px) { table { font-size: 13px; } }   /* at 375px the points still show beside the season */

/* Honours: the trophy cabinet. Each trophy is an icon with its season beneath, in fives. */
.cab-h { margin: 34px 0 10px; font: 700 14px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cab-h:first-child { margin-top: 0; }
.cab-key { margin: 0 0 20px; }
/* Each shelf stands alone under its own rule, laid out from the top, so a neighbour's subtitle or open story
   never moves or stretches it. The story toggle sits under the icons at every width. */
.cabinet { display: grid; align-items: start; column-gap: 44px; }
@media (min-width: 820px) {   /* two shelves a row, three small ones from 1200px; a long shelf takes the whole row (see buildHonours) */
  .cabinet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shelf { grid-column: span 3; }
  .shelf[data-span="all"] { grid-column: 1 / -1; }
}
@media (min-width: 1200px) { .shelf[data-span="third"] { grid-column: span 2; } }
.shelf { --cnt: 64px; position: relative; padding: 14px 0 12px var(--cnt); border-top: 1px solid var(--rule-2); }
.shelf-h { margin: 0; padding-top: 3px; font: 700 18px/1.25 var(--sans); }
.shelf-n { position: absolute; left: 0; top: 12px; font-size: 46px; line-height: 0.9; color: var(--gold-ink); }
.shelf-icons { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0 -4px; }
.five { position: relative; display: flex; flex-wrap: wrap; gap: 2px; }
.five:not(.rs)::before { content: ""; position: absolute; left: -8.5px; top: 4px; bottom: 4px; border-left: 1px solid var(--rule-2); }   /* not a gap in time */
.tr { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; padding: 5px 0 4px; border: 0; border-radius: 6px; background: none; color: var(--gold); cursor: pointer; }
.ico { fill: currentColor; }
.tr .ico { width: 30px; height: 35px; }
.tr-y { font: 500 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr:hover, .tr:focus-visible { background: var(--bg-3); }
.tr[aria-pressed="true"] { background: var(--bg-3); box-shadow: inset 0 -2px 0 var(--gold-ink); }
.shelf-sub { display: block; margin-top: 2px; font: 500 15px/1.3 var(--sans); color: var(--ink-3); }
.tr-card { max-width: 46em; margin: 10px 0 6px; padding: 12px 16px 14px; background: var(--bg-2); box-shadow: inset 3px 0 0 var(--gold); }
.tr-card p { margin: 0; }
.tc-h { font: 600 17px/1.35 var(--sans); }
.tc-h b { margin-right: 6px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.tc-n { margin-left: 10px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.tc-t { margin-top: 6px !important; font-size: 16px; color: var(--ink-2); }
.tc-a { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px !important; }
:is(.tc-a, .rec-st, .rp-see) { font: 600 15px/1.4 var(--sans); }   /* a line of actions: a story, a season */
:is(.tc-a, .rp-see) a { color: var(--accent-ink); }
.shelf-list > summary { display: inline-flex; margin-top: 6px; padding: 3px 0; font: 600 15px var(--sans); color: var(--ink-2); }
.shelf-list ol { margin: 8px 0 4px; padding: 0; list-style: none; }
.shelf-list li { padding: 10px 12px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-2); scroll-margin: 90px; }
.shelf-list li b { margin-right: 6px; font: 700 15px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.shelf-list li.hl { background: var(--bg-2); box-shadow: inset 3px 0 0 var(--gold); }
.yrs { font: 400 14px/1.5 var(--sans); color: var(--ink-3); }
.also { margin-top: 38px; }
.also-dek { margin: 0 0 10px; font: 400 16px var(--sans); color: var(--ink-3); }
.also-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
/* The year hangs in a column of its own, so a long name wraps under the name, not under the year */
.also-list summary { padding: 11px 30px 11px calc(5.2em + 12px); border-bottom: 1px solid var(--rule); font: 600 16px var(--sans); }
.ay { position: absolute; left: 0; top: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.also-list p { margin: 10px 0 14px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 699px) {
  .shelf { --cnt: 50px; }
  .shelf-n { font-size: 38px; }
  .shelf-h { font-size: 17px; }
  .tr .ico { width: 26px; height: 30px; }
}
@media (max-width: 599px) {   /* phones: the count leads the title; the icons fill the column five a row, inside the margins */
  .shelf { --cnt: 0px; }
  .shelf-h { display: flex; align-items: baseline; gap: 10px; }
  .shelf-n { position: static; font-size: 32px; }
  .shelf-icons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; margin-left: 0; }
  .five { display: contents; }
  .five::before { display: none; }
  .tr { width: auto; }
}
@media (max-width: 379px) { .tr-y { font-size: 12px; } }

/* Records: one list, oldest first, each entry under its own rule. The markup puts the heading first (for screen
   readers); the grid sets the tag and date above it, or on wide screens in a rail at the left. A leading figure is set
   large on the title's baseline: beside it, or on wide screens in a column of one width for every entry and every club
   (subgrid), so the titles, details and sources all keep one left edge; there the details and sources run wider than
   the titles. */
.recs { margin: 0; padding: 0; list-style: none; }
.rec { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; padding: 16px 0 24px; border-top: 1px solid var(--rule-2); }
.rec > * { grid-column: 1 / -1; max-width: 38rem; }   /* one measure for titles, details and sources: about 70 characters */
.rec-meta { grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; font: 600 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.rec-kind { padding: 3px 7px 2px; border: 1px solid currentColor; border-radius: 3px; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.rec-kind[data-kind="former record"] { color: var(--ink-3); }   /* no longer held */
.rec-when { color: var(--ink-2); }
.rec > .rec-n { grid-area: 2 / 1; margin: 0 14px 0 0; font-size: 52px; line-height: 0.9; color: var(--accent-ink); }
.rec > .rec-t { grid-area: 2 / 2; margin: 0; font: 700 20px/1.3 var(--sans); text-wrap: balance; }
.rec-d { margin: 6px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.rec-src { margin: 10px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink-3); }
.rec-src a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .recs { display: grid; grid-template-columns: 200px 112px minmax(0, 1fr); }
  .rec { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .rec > * { grid-column: 3; }
  .rec > :is(.rec-d, .rec-src) { max-width: 46rem; }
  .rec > .rec-meta { grid-area: 1 / 1 / span 3; align-self: start; flex-direction: column; align-items: flex-start; gap: 8px; margin: 3px 0 0; padding-right: 24px; }
  .rec > .rec-n { grid-area: 1 / 2; margin-right: 16px; text-align: right; }
  .rec > .rec-t { grid-area: 1 / 3; }
}
@media (max-width: 599px) { .rec > .rec-t { font-size: 18px; } .rec-d { font-size: 16px; } .rec > .rec-n { font-size: 44px; margin-right: 12px; } }
@media (max-width: 359px) { .rec-src .pd { white-space: normal; } }   /* a source may break between publisher and date */

/* Eras */
.era-tabs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1099px) { .era-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.era-tab { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; text-align: left; background: transparent; border: 1px solid var(--rule); border-top: 3px solid var(--rule-2); cursor: pointer; }
.era-tab:hover { border-top-color: var(--ink-3); }
.era-tab[aria-selected="true"] { background: var(--bg-2); border-top-color: var(--accent); }
.et-y { font: 600 13px/1.2 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.et-t { font: 600 15px/1.3 var(--sans); text-wrap: balance; }
.era-panel { --chart-bg: var(--bg-2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 44px; margin-top: 14px; padding: clamp(18px, 3vw, 36px); background: var(--bg-2); }
.ep-years { margin: 0; font: 700 15px var(--sans); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ep-title { margin: 6px 0 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; }
.ep-blurb { margin: 0; font-size: 17px; color: var(--ink-2); }
.ep-marker { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; padding: 0; list-style: none; font: 500 15px/1.35 var(--sans); color: var(--ink-2); }
.ep-marker li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; background: var(--accent); transform: rotate(45deg); }
.ep-h { margin: 22px 0 6px; font: 700 14px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ep-tr { display: flex; flex-wrap: wrap; gap: 8px 18px; }   /* a group for each competition, as in the cabinet */
.ep-g { display: flex; flex-wrap: wrap; gap: 6px 2px; margin: 0; padding: 0; list-style: none; }
.ep-g li { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; color: var(--gold); }
.ep-g .ico { width: 24px; height: 28px; }
.ep-events { grid-column: 1 / -1; }
.ep-events .ep-h { margin-top: 0; }
.ep-events summary { display: flex; align-items: baseline; gap: 14px; padding: 10px 30px 10px 0; border-bottom: 1px solid var(--rule); }
.ev-y { flex: none; width: 2.8em; font: 700 14px var(--sans); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ev-t { font: 500 16px/1.35 var(--sans); }
.ep-events p { margin: 8px 0 14px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 899px) { .era-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  /* A sideways strip of tabs, bleeding to the screen edges */
  .era-tabs { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto;
    margin: -4px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter); scroll-padding: 0 var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none;   /* 4px: room for the focus ring */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent); }
  .era-tabs::-webkit-scrollbar { display: none; }
  .era-tab { scroll-snap-align: start; }
}

/* Managers, Boardroom and Players: timeline and list */
.tl { margin-bottom: 4px; }
.bar { cursor: pointer; transition: opacity 0.15s; }
.bar:is(.mgr, .owner, .ply) { fill: var(--accent); }
.bar.chair { fill: var(--bg-3); stroke: var(--ink-2); stroke-width: 1.5; }
.bar.dir { fill: url(#v2-hatch); stroke: var(--ink-3); stroke-width: 1; }
.has-on .bar:not(.on) { opacity: 0.25; }
.bar.on { stroke: var(--ink); stroke-width: 2; }
.bar-t { font: 600 13px var(--sans); fill: var(--ink); pointer-events: none; }
.bar-link { stroke: var(--ink-3); stroke-width: 1.5; }
.bar-t:is(.mgr, .owner, .ply):not(.out) { fill: var(--on-accent); }
.has-on .bar-t:not(.on) { fill: var(--ink-3); }
.has-on .bar-t:not(.on):not(.out) { fill: var(--ink-2); }
.sel-tag { pointer-events: none; }
.row-label { font: 700 13px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; fill: var(--ink-3); }
/* Two lists side by side, each read down (halves() in club-v2.js): the rolls of names and an era's key events */
.roll, .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.roll { margin: 4px 0 14px; }
.roll ol, .cols ol { margin: 0; padding: 0; list-style: none; }
.roll summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 12px 30px 10px 0; border-bottom: 1px solid var(--rule); }
/* The open/close mark of every list row that opens (names, trophies not won, an era's events): a drawn
   plus (a minus when open) at the right, centred on the row's first line */
:is(.roll, .also-list, .ep-events) summary { position: relative; }
:is(.roll, .also-list, .ep-events) summary::after { content: ""; position: absolute; right: 4px; top: var(--pm, 18px); width: 12px; height: 12px; color: var(--ink-3);
  background: linear-gradient(currentColor 0 0) center / 12px 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 12px no-repeat; }
:is(.roll, .also-list, .ep-events) details[open] summary::after { background-size: 12px 1.5px, 0 0; }
:is(.roll, .also-list, .ep-events) summary:is(:hover, :focus-visible)::after { color: var(--accent-ink); }
.also-list summary, .ep-events summary { --pm: 15px; }
.rn { font: 700 18px/1.3 var(--sans); }
.ry { font: 500 15px/1.3 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd { padding: 10px 0 16px; font-size: 16px; color: var(--ink-2); }
.rd p { margin: 0 0 8px; }
.ach-h { font: 700 13px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ach-list { margin: 0 0 10px; padding-left: 18px; font: 500 16px/1.45 var(--sans); color: var(--ink); }
@media (max-width: 699px) {
  .roll, .cols { grid-template-columns: minmax(0, 1fr); }
  .roll summary { gap: 0 12px; padding: 11px 30px 9px 0; }
  .roll summary { --pm: 17px; }
}

/* A piece to read in the reader: the open book before the link's words, in the club's colour (club-v2.js, storyLink). In
   a bulleted list (the readout's moments) the book stands in for the bullet. */
.bk { display: inline-block; flex: none; width: 1.1em; height: 0.96em; margin-right: 0.45em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.st-link { color: inherit; text-decoration: none; }
.st-link .bk { color: var(--accent-ink); }
.st-link > span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.st-link:hover > span { text-decoration-color: currentColor; }
.ro-evs li:has(> .st-link) { list-style: none; }
.ro-evs li > .st-link .bk { margin-left: -1.3em; margin-right: 0.2em; }
.ro-hon .st-link { display: block; margin-top: 4px; font: 400 15px/1.4 var(--serif); color: var(--ink-2); }
.story-dot { fill: var(--accent-ink); stroke: var(--chart-bg); stroke-width: 1.5; }
.ev-t .bk { margin: 0 0 0 0.5em; color: var(--accent-ink); }
.rec-st { margin: 10px 0 0; }

/* The reader: one piece at a time in a panel at the right, over the dimmed page, so the page keeps its place; a sheet
   from the bottom on phones. A bar with the way to the rest and the close button; under it the piece, in the club's
   display face and the reading serif; at its foot, the previous and next pieces. */
html:has(.reader[open]) { overflow: hidden; }
.reader { position: fixed; inset: 0 0 0 auto; width: min(620px, 100%); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--rule-2); background: var(--bg); color: var(--ink); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.3);
  --rp-pad: clamp(20px, 4.5vw, 44px); }
.reader[open] { display: flex; flex-direction: column; }
.reader::backdrop { background: rgba(8, 8, 8, 0.5); }
.rp-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px 8px var(--rp-pad); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--rule); }
.rp-up { padding: 8px 0; font: 600 14px/1.3 var(--sans); }
.rp-x { display: grid; flex: none; margin-left: auto; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.rp-x:hover { background: var(--bg-3); }
.rp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(26px, 4vw, 44px) var(--rp-pad) 48px; }
.rp-k { margin: 0 0 10px; font: 700 13px/1.45 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.rp-h { margin: 0 0 24px; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.08; text-wrap: balance; }
.rp-h:focus { outline: none; }
:where(.rp-piece) p { margin: 0 0 18px; font: 400 18px/1.68 var(--serif); color: var(--ink-2); }
.rp-h + p, .rp-part h3 + p { color: var(--ink); }   /* the opening paragraph, a step darker */
.rp-piece .rp-lede { margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); font: 400 18px/1.6 var(--sans); }
.rp-piece .rec-src { margin-top: 24px; }
.rp-see { margin: 18px 0 0; }
.rp-dek { margin-top: -10px; font: 400 16px/1.5 var(--sans); color: var(--ink-3); }
.rp-part { padding-top: 26px; border-top: 1px solid var(--rule); }
.rp-part + .rp-part { margin-top: 34px; }
.rp-part h3 { margin: 0 0 16px; font: 700 22px/1.25 var(--sans); text-wrap: balance; }
.rp-toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rp-toc a { display: flex; align-items: baseline; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.rp-toc a:hover .ev-t { text-decoration: underline; }
.rp-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; border-top: 1px solid var(--rule); }
.rp-step { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 6px; text-decoration: none; }
.rp-step[rel="next"] { grid-column: 2; align-items: flex-end; text-align: right; }
.rp-dir { font: 700 12px/1.3 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.rp-to { font: 600 15px/1.35 var(--sans); }
.rp-step:hover .rp-to { text-decoration: underline; }
@media (max-width: 699px) {
  .reader { inset: auto 0 0; width: 100%; height: min(92dvh, 100%); border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3); }
  .rp-bar { border-top: 0; }
  :where(.rp-piece) p { font-size: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .reader[open] { animation: rp-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .reader[open]::backdrop { animation: rp-fade 0.26s ease-out; }
  @media (max-width: 699px) { .reader[open] { animation-name: rp-rise; } }
}
@keyframes rp-in { from { transform: translateX(48px); opacity: 0; } }
@keyframes rp-rise { from { transform: translateY(48px); opacity: 0; } }
@keyframes rp-fade { from { opacity: 0; } }

/* Footer */
.foot { margin-top: clamp(64px, 8vw, 112px); background: var(--bg-2); border-top: 3px solid var(--accent); }
.foot-in { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 32px 48px; max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter) 52px; }
.foot h2 { margin: 0 0 12px; font: 700 18px var(--sans); }
.foot p, .foot li { margin: 0 0 10px; font-size: 16px; color: var(--ink-2); }
.src { margin: 0; padding: 0; list-style: none; }
.foot a:hover { color: var(--ink); }
@media (max-width: 899px) { .foot-in { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(52px + 58px); } }   /* and room for the section bar */
.load-error { max-width: 640px; margin: 40px auto; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--bg-2); font: 400 16px/1.5 var(--sans); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }