/* BayerRank — hybrid design system (docs/site-plan.md, locked 2026-07-13):
   Sports Desk (2c) structure/mark/kickers · "ALL NUMBERS, NO VIBES." masthead ·
   Almanac (2a) serif for editorial prose · optic accent dialed down one notch
   (kept: masthead rule, active tab, bar fills, top-3 ranks, chips; dropped: the
   footer domain runs muted, not optic). Tokens: design/claude-design-2026-07-13/ */

:root {
  color-scheme: dark;
  --bg: #0c0d0f;
  --card: #171a1f;
  --card-border: rgba(229, 232, 236, .13);
  --ink: #f2f4f6;
  --ink-row: #eef1f4;
  --muted: rgba(229, 232, 236, .5);
  --faint: rgba(229, 232, 236, .4);
  /* Between --muted and --ink: for a footnote that is a CLAIM, not
     mechanical small print (the finals card's pick assumption). */
  --note: rgba(229, 232, 236, .72);
  --hairline: rgba(229, 232, 236, .08);
  --rule: rgba(229, 232, 236, .25);
  --optic: #c7d24a;
  --optic-soft: rgba(199, 210, 74, .12);
  --up: #58a97c;
  --down: #c4645a;
  --chip-bg: #232830;
  --chip-fg: #c8cdd4;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: Archivo, system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }

.wrap { max-width: 600px; margin: 0 auto; padding: 18px 14px 40px; }

/* ---------- masthead ---------- */
.masthead { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.mast-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 11px; }
/* Mark scales with the wordmark: same height as the title line, tops aligned
   (operator feedback 2026-07-14) — not centered on the combined lockup. */
/* Mark spans the full lockup EXACTLY — ink top at title cap top, ink bottom at
   tagline bottom (operator 2026-07-14; sizes solved from measured geometry:
   artwork occupies 6%..92% of the svg box). */
.mast-brand { display: flex; align-items: flex-start; gap: 13px; }
.mast-brand svg { display: block; flex: none; width: auto; height: 48px; margin-top: 1px; }
/* Faux small caps: initials of Bayer + Rank render larger so the compound
   stays legible in all-caps (operator feedback 2026-07-14). */
.wordmark { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 25px; letter-spacing: .045em; text-transform: uppercase; line-height: 1; }
.wordmark .lg { font-size: 30px; }
.tagline { font-family: var(--mono); font-weight: 500; font-size: 8.5px; letter-spacing: .26em; color: rgba(229, 232, 236, .72); margin-top: 5px; }
.mast-updated { text-align: right; font-size: 9px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.mast-updated b { display: block; color: var(--ink); margin-top: 2px; font-weight: 600; }
.optic-rule { height: 3px; background: var(--optic); }
nav.tabs { display: flex; gap: 18px; padding: 10px 18px; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; overflow-x: auto; }
nav.tabs a { color: var(--muted); white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav.tabs a.active { color: var(--ink); border-bottom-color: var(--optic); }
.kicker { border-top: 1px solid var(--hairline); padding: 7px 18px 9px; font-size: 9px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 4px; gap: 10px; }
.card-title { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; }
.card-title svg { flex: none; }
.card-chip { font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--optic); background: var(--optic-soft); padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.card-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.card-chip.dim { color: var(--chip-fg); background: var(--chip-bg); }
/* Card-head declutter (operator call 2026-07-18): inert meta chips (status,
   model version, sims/matches count) sit under the title as a byline row so
   the head's right corner holds only the share action. */
.card-head.meta-under { align-items: flex-start; }
.card-title-block { min-width: 0; }
.title-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.card-head.meta-under .card-chips { margin-top: 3px; }
/* Share affordance (site-plan #11): an icon-only button — native share sheet
   where the browser has one, else the .share-menu fallback. The box + border
   is the "this one is a button" cue; with the meta chips demoted to
   .title-chips it is the only boxed element in the head's corner. The ::after
   pad grows the touch target (~45px) without growing the button. */
button.share-btn { cursor: pointer; color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--rule); border-radius: 3px; padding: 6px; line-height: 0; display: inline-flex; position: relative; }
button.share-btn:hover { color: var(--optic); background: var(--optic-soft); border-color: var(--optic); }
.share-btn::after { content: ""; position: absolute; inset: -9px; }
.share-menu {
  position: fixed; z-index: 20; min-width: 132px;
  background: var(--chip-bg); border: 1px solid var(--card-border);
  border-radius: 6px; padding: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.share-item { display: block; border: 0; background: none; text-align: left; padding: 8px 11px; border-radius: 4px; font-family: inherit; font-size: 12.5px; color: var(--ink-row); cursor: pointer; }
.share-item:hover { background: rgba(229, 232, 236, .07); color: var(--ink); }
.card-sub { padding: 0 18px 12px; font-size: 10.5px; color: var(--muted); }
/* The frozen pick assumption on a finals card — its largest caveat, so it
   reads as a statement rather than small print (operator 2026-08-17):
   header-style caps, and brighter than BOTH .card-sub (.5) above it and the
   .card-foot line (.4) beneath, which it was previously indistinguishable
   from.  Top padding is here rather than inline (operator: more air above). */
.pick-note { padding: 14px 18px 2px; font-size: 9.5px; font-weight: 600;
             letter-spacing: .1em; text-transform: uppercase; color: var(--note); }
/* Rankings footnotes (Δ legend, surge legend, model-update note) stack as
   divs inside #rate-note — give the lines a little air between them. */
#rate-note div + div { margin-top: 4px; }
/* the model-upgraded line gets a touch more separation from the mechanical
   footnotes below it (operator, 2026-07-27) */
#rate-note .mu-note + div { margin-top: 9px; }
/* Fetch-failure message inside an otherwise-empty table body. */
.load-fail { padding: 16px 18px; font-size: 12px; color: var(--muted); }

/* ---------- hero strip (top-3 title odds above the fold) ----------
   Phones only: at >=640px the champ column is already on screen, so the
   strip would just repeat the table's right edge. */
.hero-strip { padding: 10px 18px 14px; }
.hero-cap { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; padding-bottom: 7px; }
.hero-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tile { display: flex; align-items: center; gap: 7px; background: rgba(229, 232, 236, .045); border-radius: 6px; padding: 7px 11px; }
.hero-pct { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.hero-pct small { font-size: 10px; color: var(--muted); margin-left: 1px; }
.hero-tile:first-child .hero-pct { color: var(--optic); }
@media (min-width: 640px) {
  .hero-strip { display: none; }
  /* With the hero strip gone, the title-chips byline would sit right on the
     table header — restore the breathing room the strip provided. */
  .board-scroll { margin-top: 12px; }
}

/* Playoff cutline: the actionable number on the board. Board-footnote language
   (faint small-caps label + bold tabular figures) with the optic on the
   NUMBERS — the site colors data, not containers (filled callout box dropped,
   operator call 2026-07-18). */
.cutline { margin: 12px 18px 2px; padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cut-lab { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; padding-bottom: 6px; }
.cut-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 18px; }
.cut-stat { font-size: 11.5px; color: var(--muted); }
.cut-stat b { font-weight: 700; font-size: 14px; color: var(--optic); font-variant-numeric: tabular-nums; }
.cut-stat small { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; margin-right: 3px; }
.card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px 14px; font-size: 9px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.card-foot .domain { font-weight: 700; }
/* Series cards (playoff best-of-3 rounds): each row is a matchup; the call
   column carries the favored side's chip + advance probability. Both team
   names share the same ink (operator, 2026-07-31) — the call column alone
   says who advances. */
/* Percent column sized to its CONTENT, not padded out (operator 2026-08-17:
   the monogram and the percent should sit together under the "To advance"
   umbrella).  Measured on the graded Newport card: the glyphs are 26px wide
   (35px worst case, "100%") inside a 46px right-aligned column, so 20px of
   the 27px chip-to-digits gap was pure slack.  36px is the tightest value
   that still clears "100%" AND keeps the header on one line — 34px wraps it.
   Desktop equivalent: 40px against a 38px worst case. */
.sr-head, .sr-row { display: grid; grid-template-columns: 1fr 26px 36px; gap: 7px; align-items: center; margin: 0 18px; }
.sr-head { padding-top: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.sr-head span:last-child { grid-column: 2 / 4; text-align: right; }
.sr-row { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.sr-row:last-of-type { border-bottom: 0; }
/* One line at every width (operator 2026-08-02, after a stacked experiment):
   portrait phones swap to city-short names ("Brooklyn vs SoCal") instead of
   wrapping; both forms ship in the DOM and this boundary picks one. The verb
   rides the row center with a 1px optical drop (uppercase micro-type reads
   high against the larger condensed caps at geometric centering). */
.sr-match { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; min-width: 0; }
.sr-match .sr-verb { position: relative; top: 1px; }
.sr-name .nm-short { display: none; }
@media (max-width: 639.98px) {
  .sr-name .nm-full { display: none; }
  .sr-name .nm-short { display: inline; }
}
.sr-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sr-side .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-side .tchip.long { font-size: 6px; }
/* Team names match the season board's register (operator 2026-08-02):
   condensed, uppercase, same tracking — one team-name voice across cards. */
.sr-name { font-family: var(--cond); font-size: 14.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-row); line-height: 1; }
.sr-verb { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; line-height: 1; align-self: center; }
.sr-call { display: flex; justify-content: flex-end; }
.sr-call .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-call .tchip.long { font-size: 6px; }
.sr-row .pct { text-align: right; }
/* Graded rounds add an ADVANCED verdict column (operator 2026-08-09): the
   top-level table grades its own call instead of leaving the outcome to the
   per-match drawer. Pending cards are untouched — the grader omits `advanced`,
   so .sr-graded is simply absent and the 3-column shape stands. */
.sr-graded .sr-head, .sr-graded .sr-row { grid-template-columns: 1fr 26px 36px 44px; }
.sr-graded .sr-head span:nth-child(2) { grid-column: 2 / 4; text-align: right; }
.sr-graded .sr-head span:last-child { grid-column: 4; text-align: right; }
.sr-adv { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sr-adv .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-adv .tchip.long { font-size: 6px; }
/* Same --up/--down pair as the per-match Result column (.mlog-res) so the two
   grading layers read as one system. */
.sr-mark { display: inline-flex; font-size: 11px; line-height: 1; }
.sr-mark.hit { color: var(--up); }
.sr-mark.miss { color: var(--down); }
.sr-mark.dim { color: var(--faint); font-family: var(--cond); font-size: 12px; }
/* Series per-match drawer: mlog rows without the Result column. */
.mlog-head.cols2, .mlog-row.cols2 { grid-template-columns: 1fr 56px; }

/* ---------- season odds board (full ErneCast table) ---------- */
/* Scrolling shadow (cover scrolls with content, vignette stays put) so a
   narrow viewport signals there are more columns to the right. */
.board-scroll {
  overflow-x: auto;
  background:
    linear-gradient(270deg, var(--card) 40%, rgba(23, 26, 31, 0)) 100% 0 / 36px 100%,
    linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) 100% 0 / 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
/* RK + team stay pinned while the probability columns scroll underneath. */
.board-head span:nth-child(-n+2), .board-row .rk, .board-row .bteam {
  position: sticky; z-index: 1; background: var(--card);
}
.board-head span:nth-child(1), .board-row .rk { left: 0; padding-left: 18px; }
.board-head span:nth-child(2), .board-row .bteam { left: 44px; }
.board-row .rk { align-self: stretch; display: flex; align-items: center; }
.board-row .bteam { align-self: stretch; }
/* Side gutters live INSIDE the sticky cells / as inner padding (not margins on
   the rows) so the pinned RK+team keep their breathing room while scrolled. */
.board-inner { min-width: 580px; padding-right: 18px; }
.board-head, .board-row { display: grid; grid-template-columns: 44px minmax(148px, 1fr) 42px 42px repeat(5, 40px) 50px; gap: 0; }
.board-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.board-head span { text-align: center; }
.board-head span:nth-child(-n+2) { text-align: left; }
.board-row { align-items: stretch; border-bottom: 1px solid var(--hairline); }
.board-row:last-of-type { border-bottom: 0; }
/* Zebra + hover: ten columns is a lot of row to track by eye. Sticky cells are
   opaque (they cover content scrolling beneath), so they get the same tint as a
   SOLID color — #1c1f24 == rgba(229,232,236,.025) composited over the card. */
.board-row:nth-child(even) { background: rgba(229, 232, 236, .03); }
.board-row:nth-child(even) .rk, .board-row:nth-child(even) .bteam { background: #1d2025; }
@media (hover: hover) {
  .board-row:hover { background: rgba(229, 232, 236, .07); }
  .board-row:hover .rk, .board-row:hover .bteam { background: #25282d; }
}
.board-row > * { align-self: center; }
.rk { font-family: var(--cond); font-weight: 700; font-size: 17px; color: var(--faint); }
.rk.top { color: var(--optic); }
.bteam { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 0; min-width: 0; }
/* Team monogram chip: initials, never league logo artwork (copyright).
   Palette mirrors make_og_card.py's .ab.txt chip. */
.tchip { flex: none; width: 22px; height: 22px; background: #232830; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 600; font-size: 9px; letter-spacing: .05em; color: #c8cdd4; }
.tchip.long { font-size: 6.5px; letter-spacing: .02em; } /* 4-5 char codes (SOCAL) */
.team-name { font-family: var(--cond); font-weight: 600; font-size: 15.5px; letter-spacing: .03em; color: var(--ink-row); text-transform: uppercase; line-height: 1.1; }
.bnum { font-size: 11px; font-weight: 600; text-align: center; color: var(--chip-fg); font-variant-numeric: tabular-nums; }
.pc { align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc small { font-size: 8.5px; color: var(--muted); font-weight: 600; margin-left: 1px; }
.pc.champ { font-weight: 700; font-size: 12.5px; border-left: 2px solid rgba(229, 232, 236, .14); }
.pc.dim, .pc.dim small { color: var(--faint); }
/* Fully-eliminated teams recede as a row — the per-cell "–" dim extended to
   the whole line (operator call 2026-08-02). Dim children and colors only:
   opacity on .board-row (or on .rk/.bteam themselves) would fade the sticky
   cells' opaque backgrounds and let columns ghost through them mid-scroll. */
.board-row.elim .bnum, .board-row.elim .pc,
.board-row.elim .team-name { opacity: .45; }
.board-row.elim .rk { color: rgba(229, 232, 236, .18); }
.board-row.elim .tchip { opacity: .45; filter: grayscale(.75); }
.board-head span[title], .pc[title], .mast-updated[title], .card-sub[title], .rate-head span[title], .surge[title], .cutline[title], .lk-pair[title] { cursor: help; }
/* Tap-tooltip toast (title= text surfaced on touch screens); positioned by
   showTip() next to the tapped element. */
.tip-toast {
  position: fixed; max-width: min(80vw, 340px); z-index: 10;
  background: var(--chip-bg); color: var(--ink-row);
  border: 1px solid var(--card-border); border-left: 3px solid var(--optic);
  padding: 9px 14px; border-radius: 6px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.tip-toast.show { opacity: 1; }
.pct { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.pct small { font-size: 10px; color: var(--faint); font-weight: 600; }
.pct.dim, .pct.dim small { color: var(--faint); } /* "<1%" grays whole-token, like .pc.dim */
/* align-self: the row aligns cells on the text baseline, which parks the
   smaller delta type visibly low next to 16px rank digits — optical center
   wins here (operator call 2026-07-18). */
.delta { font-weight: 600; font-size: 11px; text-align: left; font-variant-numeric: tabular-nums; color: var(--faint); align-self: center; }
/* Header Δ centers on the TYPICAL value ("▲3", single digit — the <10 case),
   which left-alignment puts at ~7px in: pad the glyph to that center.
   Plain center-in-column would sit right of the values. */
#delta-head { padding-left: 4px; }
/* #rate-note selectors so the LEGEND's arrows carry the same colours as the
   board's own delta cells (operator, 2026-08-24). The momentum legend below it
   already reuses .glyph-hot/.glyph-cold verbatim; the rank arrows were the one
   legend rendering in flat --faint while the column above them was coloured.
   Scoped to the note rather than made global .up/.down, which are too generic a
   pair of class names to hand a colour to site-wide. */
.delta.up, #rate-note .up { color: var(--up); }
.delta.down, #rate-note .down { color: var(--down); }

/* ---------- ratings ---------- */
.pills { display: flex; gap: 8px; padding: 6px 18px 12px; flex-wrap: wrap; }
.pill { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--chip-bg); border: 1px solid transparent; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.pill.active { color: var(--ink); border-color: var(--optic); }
/* Column order (operator call 2026-07-18): rank flush at the margin (the
   table's spine), Δ right beside the rank it describes, surge glyph hanging
   off the rating it describes. */
.rate-head, .rate-row { display: grid; grid-template-columns: 26px 26px 1fr 56px; gap: 9px; margin: 0 18px; }
.rate-head.no-delta, .rate-row.no-delta { grid-template-columns: 26px 1fr 56px; }
.rate-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.rate-row { align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.rate-row:last-of-type { border-bottom: 0; }

/* Player lookup: search box above the boards. The results list opens DOWNWARD
   inside the card (the card clips overflow — same constraint as .tips-down). */
/* Below the boards on purpose (secondary feature, operator call 2026-07-17);
   the results list flows IN the card (no overlay), pushing the footer down —
   an absolutely-positioned dropdown would clip on the card's overflow:hidden
   this close to its bottom edge. */
.lookup { margin: 16px 18px 12px; }
.lookup-box { position: relative; }
/* 16px input font on purpose: below 16px iOS Safari auto-zooms the page on focus.
   padding-right clears our own clear button; the native webkit cancel is hidden. */
#lookup-input { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--chip-bg); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 38px 8px 11px; outline: none; -webkit-appearance: none; appearance: none; }
#lookup-input:focus { border-color: var(--optic); }
#lookup-input::placeholder { color: var(--faint); }
#lookup-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#lookup-clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 3px; color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer; }
#lookup-clear:hover { color: var(--ink); }
#lookup-results { margin-top: 6px; background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 4px; max-height: 320px; overflow-y: auto; }
.lookup-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px 9px 9px; cursor: pointer; border-bottom: 1px solid var(--hairline); border-left: 2px solid transparent; }
.lookup-opt:last-child { border-bottom: 0; }
.lookup-opt:hover { background: rgba(229, 232, 236, .07); }
.lookup-opt.active { background: var(--optic-soft); border-left-color: var(--optic); }
.lookup-opt .nm { color: var(--ink-row); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .66 alpha, not --faint (.4): 12px status text needs >=4.5:1 on the chip bg. */
.lookup-opt .st { color: rgba(229, 232, 236, .66); font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
#lookup-status { margin-top: 6px; background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 4px; padding: 9px 11px; color: rgba(229, 232, 236, .66); font-size: 13px; }
#lookup-card { margin: 0 18px 14px; border: 1px solid var(--card-border); border-left: 3px solid var(--optic); border-radius: 4px; padding: 10px 12px; }
.lookup-name { font-weight: 600; font-size: 14.5px; letter-spacing: .01em; margin-bottom: 4px; }
.lookup-div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hairline); }
.lookup-div .dv { font-family: var(--cond); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Rank/rating as stat pairs in the boards' label language (prose read
   off-aesthetic — operator call 2026-07-18). */
.lookup-div .dt { display: flex; align-items: baseline; gap: 13px; }
.lk-pair { display: inline-flex; align-items: baseline; gap: 5px; }
.lk-lab { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.lk-num { font-weight: 700; font-size: 13px; color: var(--ink-row); font-variant-numeric: tabular-nums; }
.rk-sm { font-family: var(--cond); font-weight: 700; font-size: 16px; color: var(--faint); }
.rk-sm.top { color: var(--optic); }
.player { font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; color: var(--ink-row); }
.surge { font-family: var(--sans); font-size: 12px; }
/* Momentum glyph colors: ember + ice, tuned to the dark theme (the emoji
   they replaced were the only elements outside the palette). */
.glyph-hot { color: #d98a45; }
.glyph-cold { color: #7fb0d4; }
.surge svg, #rate-note svg { vertical-align: -1px; }
.rtg { font-weight: 700; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; position: relative; }
/* When any row on the board carries a surge glyph, every rating reserves the
   same right gutter for it — digits stay column-aligned, the glyph hangs in
   the gutter beside its rating. */
#rating-rows.has-surge .rtg { padding-right: 19px; }
.rtg .surge { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); line-height: 0; }

/* ---------- prose (Almanac serif) ---------- */
.prose { padding: 6px 20px 18px; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink-row); }
.prose p { margin: 0 0 1em; }
.prose .lab { font-style: italic; color: var(--muted); }

/* ---------- FAQ (native <details> accordion — no JS) ---------- */
.faq-list { padding: 6px 0 10px; }
.faq { border-top: 1px solid var(--hairline); }
.faq:first-child { border-top: 0; }
/* Section labels inside the accordion (The ratings / The model / The forecasts). */
.faq-sec { padding: 18px 18px 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
.faq-sec:first-child { padding-top: 8px; }
.faq-sec + .faq { border-top: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 18px; cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink-row); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 13px; color: var(--faint); position: relative; top: -1px; }
.faq[open] summary { color: var(--ink); }
.faq[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 18px 14px; font-family: var(--serif); font-size: 14.5px; line-height: 1.65; color: var(--ink-row); }
.faq-a p { margin: 0 0 .9em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a, .prose a, .card-sub a { text-decoration: underline; text-decoration-color: rgba(199, 210, 74, .55); text-underline-offset: 3px; }
.faq-a a:hover, .prose a:hover, .card-sub a:hover { text-decoration-color: var(--optic); }
/* FAQ version log: data register (sans, small) inside the serif answer prose.
   The p:has rule restores the answer's last-paragraph margin reset, which the
   log's presence as a following sibling otherwise defeats (also when hidden —
   :last-child is structural, display:none does not restore it). */
.faq-a p:has(+ .vlog) { margin-bottom: 0; }
.vlog { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; }
.vlog-pre { color: var(--faint); margin-bottom: 6px; }
.vlog-row { color: var(--muted); padding: 1px 0; }
.vlog-row b { color: var(--ink-row); font-family: var(--mono); font-weight: 600; font-size: 12px; }
.card-sub a { color: var(--ink-row); }
/* ---------- events / track record (merged) ---------- */
#tab-events .card + .card { margin-top: 14px; }
.verdict { font-family: var(--serif); font-size: 14px; line-height: 1.45; padding: 7px 18px 10px; }
.tr-head, .tr-row { display: grid; grid-template-columns: 1fr 40px 40px 44px 44px; gap: 7px; margin: 0 18px; }
.tr-head { padding-top: 10px; }
/* Logo chips squeeze the team column on small screens: slim chip + type there,
   full board sizing restored in the desktop media query below. */
.tr-row .bteam { padding: 0; gap: 7px; }
.tr-row .tchip { width: 19px; height: 19px; font-size: 8px; }
.tr-row .tchip.long { font-size: 6px; }
.tr-row .team-name { font-size: 14.5px; }
.cal-head, .cal-row { display: grid; grid-template-columns: 1fr 62px 68px 68px; gap: 9px; margin: 0 18px; }
.tr-head, .cal-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.tr-row, .cal-row { align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.tr-row:last-of-type, .cal-row:last-of-type { border-bottom: 0; }
.tr-row.champ .team-name { color: var(--optic); }
.fin { font-weight: 700; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.fin.dim { color: var(--faint); font-weight: 500; }
/* podium tint on placement ordinals — 1st rides the brand optic */
.fin.m1 { color: var(--optic); }
.fin.m2 { color: #96aac6; }
.fin.m3 { color: #c98e57; }
.pct.dimn { color: var(--faint); font-weight: 500; }
.tr-head span[title] { cursor: help; }
/* Match log: the row-level receipts behind a graded card's aggregates.
   Native <details>, collapsed by default; +/− marker as in the FAQ. */
.mlog { margin: 0 18px; }
.mlog summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 2px 0 10px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.mlog summary::-webkit-details-marker { display: none; }
.mlog summary::after { content: "+"; font-family: var(--mono); font-size: 11px; position: relative; top: -1px; }
.mlog[open] summary::after { content: "\2212"; }
.mlog summary:hover { color: var(--muted); }
.mlog-head, .mlog-row { display: grid; grid-template-columns: 1fr 56px 52px; gap: 7px; align-items: center; }
/* Matchup matrix (pending cards): P(row beats column) heat grid. Sticky
   row-header chips + the board's scrolling shadow for narrow viewports;
   .gb/.gt draw the heavier rule at group boundaries so the diagonal blocks
   read as the guaranteed group-stage matches. */
.mx-scroll {
  overflow-x: auto;
  background:
    linear-gradient(270deg, var(--card) 40%, rgba(23, 26, 31, 0)) 100% 0 / 36px 100%,
    linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) 100% 0 / 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
.mx { display: grid; }
.mx-corner, .mx-head.mx-row { position: sticky; left: 0; background: var(--card); z-index: 1; }
.mx-corner { border-bottom: 2px solid var(--rule); }
.mx-head { display: flex; align-items: center; justify-content: center; padding: 2px 2px 7px; border-bottom: 2px solid var(--rule); }
.mx-head.mx-row { justify-content: flex-start; padding: 0 6px 0 0; border-bottom: 1px solid var(--hairline); }
.mx-cell { display: flex; align-items: center; justify-content: center; min-height: 31px; border-bottom: 1px solid var(--hairline); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-row); cursor: help; }
.mx-cell small { font-size: 7.5px; color: var(--muted); font-weight: 600; margin-left: 1px; }
/* Self-pairing cells: crosstable-style diagonal slash — empty read as
   "missing data", the slash reads "void by construction" (operator, 07-18). */
.mx-cell.diag { cursor: default; background:
  linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(229, 232, 236, .18) calc(50% - 0.5px), rgba(229, 232, 236, .18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  rgba(229, 232, 236, .03); }
.mx .gb { border-left: 2px solid rgba(229, 232, 236, .14); }
.mx .gt { border-top: 2px solid rgba(229, 232, 236, .14); }
/* Cross-group pairings (possible only as Super Sunday deciders) run dim; the
   bright on-diagonal blocks are the guaranteed group-stage schedule. */
.mx-cell.xg, .mx-cell.xg small { color: var(--faint); }
/* Pending cards: the matrix expander gets the same hairline separation the
   graded card's stat-head provides. */
.mlog-sep { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.mlog-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.mlog-head span[title] { cursor: help; }
.mlog-row { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
/* Second and later group headers inside one drawer (knockout pairing list):
   without this the header sits flush against the previous group's last row and
   reads as another row rather than a new section (operator, 2026-08-17). */
.mlog-head.mlog-group { margin-top: 18px; }
.mlog-row:last-of-type { border-bottom: 0; }
/* Chips only (the monogram already carries the code); slightly larger than the
   placement rows' chips since they are the row's sole identifier. */
.mlog-call { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mlog-call .tchip { width: 23px; height: 23px; font-size: 9px; }
.mlog-call .tchip.long { font-size: 6.5px; }
.mlog-vs { font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; margin: 0 2px; }
.mlog-flag { color: var(--faint); font-size: 12px; margin-left: 3px; }
.mlog-row[title] { cursor: help; }
.mlog-res { font-size: 13px; font-weight: 700; text-align: right; cursor: help; }
.mlog-res svg { vertical-align: -2px; }
.mlog-res.hit { color: var(--up); }
.mlog-res.miss { color: var(--down); }
.mlog-res.dim { color: var(--faint); }
.mlog-note { padding: 10px 0 4px; font-size: 10.5px; color: var(--muted); }

.stat-head { margin: 14px 18px 10px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.stat-row { display: flex; gap: 38px; padding: 2px 18px 14px; }
.stat { position: relative; }
.stat-num { font-family: var(--cond); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num small { font-size: 15px; color: var(--faint); font-weight: 600; }
.stat-lab { display: flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; margin-top: 5px; }
.info-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; padding: 0; border: 1px solid var(--faint); border-radius: 50%; background: none; color: var(--faint); font-family: var(--serif); font-style: italic; font-size: 9px; line-height: 1; cursor: pointer; }
.stat-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; width: min(232px, calc(100vw - 64px)); background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 9px 11px; font-size: 11px; line-height: 1.55; color: var(--ink-row); text-transform: none; letter-spacing: normal; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.stat-tip.open { display: block; }
/* Stat rows at the TOP of a card open tooltips downward (overflow:hidden on
   .card clips an upward tip that extends past the card's top edge). */
.tips-down .stat-tip { bottom: auto; top: calc(100% + 8px); }
/* A third tile (Brier, calibration card) sits far enough right that a
   left-aligned tip clips on the card's right edge at phone widths. */
.stat:nth-child(3) .stat-tip { left: auto; right: 0; }
.cal-head span[title] { cursor: help; }

/* Calibration band (site-plan item 16): a <details> card whose collapsed
   state is a one-line stat summary leading the events tab — cutline language
   (faint lowercase labels, bold optic numbers; color on data, not containers). */
.cal-sum { list-style: none; cursor: pointer; padding: 11px 18px 12px; }
.cal-sum::-webkit-details-marker { display: none; }
/* The expanded card's title, band-sized: same condensed uppercase voice.
   Always its own line — the stats line sits beneath it at every width. The
   +/− marker rides the title row (flex end), centered on the title rather
   than the whole band, so it never crowds the stats line on phones. */
.cal-lab { position: relative; display: flex; align-items: center; font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-row); padding-bottom: 7px; }
.cal-title { flex: 1; }
.cal-lab::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: normal; color: var(--faint); margin-left: 12px; }
.cal-band[open] .cal-lab::after { content: "\2212"; }
/* Open = the summary IS the card head: the stats line hides (the tiles below
   carry the numbers), the share chip appears on the title row, and the body's
   chip row follows with no second title. */
.cal-band[open] .cal-stats { display: none; }
.cal-band[open] > .cal-sum { padding-bottom: 0; }
.cal-band[open] .cal-lab { padding-bottom: 0; }
/* Absolutely positioned so the 27px button never grows the 18px title row —
   inline, its appearance re-centered the title a few pixels on every toggle.
   right: 20px clears the ~8px +/− marker at the row's flex end by 12px. */
.cal-sum .share-btn { display: none; }
.cal-band[open] .cal-sum .share-btn { display: inline-flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.cal-chips { padding: 0 18px; }
.cal-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cal-seg { display: inline-flex; align-items: baseline; gap: 5px; }
.cal-seg span { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.cal-seg b { font-weight: 700; font-size: 14px; color: var(--optic); font-variant-numeric: tabular-nums; }

/* Archive ledger (site-plan item 16): older graded events as <details> rows
   whose summaries share one grid template — board-head/board-row technique —
   expanding inline to the frameless full event card. */
.arch-head, .arch-sum { display: grid; grid-template-columns: 92px minmax(0, 1fr) 42px 52px 12px; gap: 7px; align-items: baseline; margin: 0 18px; }
.arch-head { padding: 8px 0 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.arch-head span:nth-child(n+3) { text-align: right; }
.arch-head span[title] { cursor: help; }
.arch-row { border-bottom: 1px solid var(--hairline); margin: 0 18px; }
.arch-row:last-of-type { border-bottom: 0; }
.arch-sum { list-style: none; cursor: pointer; padding: 9px 0; margin: 0; }
.arch-sum::-webkit-details-marker { display: none; }
.arch-sum::after { content: "+"; font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; position: relative; top: -1px; }
.arch-row[open] > .arch-sum::after { content: "\2212"; }
@media (hover: hover) { .arch-sum:hover .arch-name { color: var(--ink); } }
.arch-date { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arch-name { font-family: var(--cond); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; color: var(--ink-row); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-fav { font-weight: 700; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.arch-fav small { font-size: 9px; color: var(--muted); font-weight: 600; }
.arch-ll { font-weight: 500; font-size: 12px; text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Expanded row body: the full event card, frameless — the outer chrome would
   double-border inside the archive card. Bleeds to the card edge (the inner
   card layout carries its own 18px gutters) over a faint drawer tint. */
.arch-body { margin: 0 -18px; border-top: 1px solid var(--hairline); background: rgba(229, 232, 236, .02); }

.stub-line { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px; padding: 22px 20px 4px; }
.stub-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; padding: 0 20px 22px; line-height: 1.9; }

/* ---------- page footer ---------- */
footer.site { margin-top: 22px; text-align: center; font-size: 8.5px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; line-height: 2; }
/* version tokens keep their small v under the all-caps footer (operator 2026-07-26) */
.vcase { text-transform: none; }

.hidden { display: none; }
/* Visually hidden, still read by screen readers (chip-only rows carry their
   accessible name here — the .tchip monograms are aria-hidden). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 430px) {
  .wrap { padding: 10px 8px 30px; }
  /* Band stats: the three segments fit a phone width but the desktop gaps
     don't — distribute across the line instead. */
  .cal-stats { justify-content: space-between; column-gap: 6px; }
  nav.tabs { gap: 13px; font-size: 14px; }
  .wordmark { font-size: 22px; }
  .wordmark .lg { font-size: 26px; }
  .mast-brand svg { height: 44px; margin-top: 1px; }
}

/* ---------- wide screens (iPad / desktop): use the room ---------- */
@media (min-width: 860px) {
  .wrap { max-width: 840px; padding: 28px 20px 60px; }
  .mast-top { padding: 18px 24px 14px; }
  .wordmark { font-size: 33px; }
  .wordmark .lg { font-size: 40px; }
  .mast-brand svg { height: 63px; margin-top: 1px; }
  .tagline { font-size: 10px; margin-top: 7px; }
  .mast-updated { font-size: 10px; }
  nav.tabs { font-size: 17px; gap: 26px; padding: 12px 24px; }
  .kicker { font-size: 10px; padding: 8px 24px 10px; }
  .card-head { padding: 18px 24px 6px; }
  .card-title { font-size: 25px; }
  .card-chip { font-size: 10px; }
  .card-sub { font-size: 12px; padding: 0 24px 14px; }
  .pick-note { font-size: 10.5px; padding: 16px 24px 2px; }
  .cutline { margin: 14px 24px 2px; }
  .cut-lab { font-size: 10px; }
  .cut-stat { font-size: 12.5px; }
  .cut-stat b { font-size: 15.5px; }
  .card-foot { font-size: 10px; padding: 12px 24px 18px; }
  .pills { padding: 7px 24px 14px; }
  .pill { font-size: 14px; }
  .lookup { margin: 16px 24px 12px; }
  #lookup-card { margin: 0 24px 14px; }
  .lk-lab { font-size: 9.5px; }
  .lk-num { font-size: 14px; }
  .board-inner { min-width: 0; padding-right: 24px; }
  .board-head, .board-row { grid-template-columns: 58px minmax(200px, 1fr) 56px 56px repeat(5, 58px) 70px; }
  .board-head span:nth-child(1), .board-row .rk { padding-left: 24px; }
  .board-head span:nth-child(2), .board-row .bteam { left: 58px; }
  .board-head { font-size: 10px; }
  .rk { font-size: 20px; }
  .bteam { gap: 10px; padding: 7px 10px 7px 0; }
  .tchip { width: 26px; height: 26px; border-radius: 5px; font-size: 10.5px; }
  .tchip.long { font-size: 7.5px; }
  .team-name { font-size: 18px; }
  .bnum { font-size: 12.5px; }
  .pc { font-size: 13px; }
  .pc small { font-size: 9.5px; }
  .pc.champ { font-size: 14.5px; }
  .pct { font-size: 16px; }
  .delta { font-size: 12.5px; }
  .rate-head, .rate-row { grid-template-columns: 32px 30px 1fr 66px; gap: 12px; margin: 0 24px; }
  #delta-head { padding-left: 5px; }
  .rate-head.no-delta, .rate-row.no-delta { grid-template-columns: 32px 1fr 66px; }
  #rating-rows.has-surge .rtg { padding-right: 21px; }
  .rate-row { padding: 8.5px 0; }
  .rk-sm { font-size: 18px; }
  .player { font-size: 18px; }
  .rtg { font-size: 15px; }
  .surge { font-size: 13px; }
  .tr-head, .tr-row { grid-template-columns: 1fr 62px 62px 62px 62px; gap: 12px; margin: 0 24px; }
  .sr-head, .sr-row { grid-template-columns: 1fr 30px 40px; gap: 12px; margin: 0 24px; }
  .sr-head { font-size: 10px; }
  .sr-graded .sr-head, .sr-graded .sr-row { grid-template-columns: 1fr 30px 40px 52px; }
  .sr-side .tchip, .sr-call .tchip, .sr-adv .tchip { width: 25px; height: 25px; font-size: 10px; }
  .sr-side .tchip.long, .sr-call .tchip.long, .sr-adv .tchip.long { font-size: 7px; }
  .sr-mark { font-size: 13px; }
  .sr-name { font-size: 16px; }
  .sr-verb { font-size: 10px; }
  .sr-row .pct { font-size: 16px; }
  .tr-row .bteam { gap: 8px; }
  .tr-row .tchip { width: 22px; height: 22px; font-size: 9px; }
  .tr-row .tchip.long { font-size: 6.5px; }
  .tr-row .team-name { font-size: 18px; }
  .cal-head, .cal-row { grid-template-columns: 1fr 72px 80px 80px; gap: 12px; margin: 0 24px; }
  .stat-head { margin: 14px 24px 10px; }
  .stat-row { padding: 2px 24px 14px; }
  .mlog { margin: 0 24px; }
  .mlog summary { font-size: 10px; }
  .mlog-head, .mlog-row { grid-template-columns: 1fr 72px 64px; gap: 12px; }
  .mlog-head.cols2, .mlog-row.cols2 { grid-template-columns: 1fr 72px; }
  .mx-cell { font-size: 12px; min-height: 35px; }
  .mx-cell small { font-size: 9px; }
  .mlog-sep { margin-top: 16px; }
  .mlog-head { font-size: 10px; }
  .mlog-call .tchip { width: 27px; height: 27px; font-size: 11px; border-radius: 5px; }
  .mlog-call .tchip.long { font-size: 7.5px; }
  .mlog-res { font-size: 14.5px; }
  .mlog-note { font-size: 12px; }
  .verdict { font-size: 15px; padding: 9px 24px 12px; }
  .fin { font-size: 13px; }
  .cal-sum { padding: 13px 24px 14px; }
  .cal-stats { gap: 4px 22px; }
  .cal-lab { font-size: 17px; }
  .cal-seg span { font-size: 10px; }
  .cal-seg b { font-size: 15.5px; }
  .cal-chips { padding: 0 24px; }
  /* Margin stays on .arch-head/.arch-row only: .arch-sum keeps its base
     margin:0 (the row provides the gutter) — a margin here double-indents
     the summaries 24px past the header. */
  .arch-head, .arch-sum { grid-template-columns: 108px minmax(0, 1fr) 48px 64px 14px; gap: 12px; }
  .arch-head { margin: 0 24px; }
  .arch-head { font-size: 10px; }
  .arch-row { margin: 0 24px; }
  .arch-date { font-size: 12px; }
  .arch-name { font-size: 17px; }
  .arch-fav { font-size: 13px; }
  .arch-fav small { font-size: 10px; }
  .arch-ll { font-size: 13px; }
  .arch-body { margin: 0 -24px; }
  .prose { font-size: 16.5px; padding: 8px 28px 22px; }
  .faq summary { font-size: 17px; padding: 14px 24px; }
  .faq-sec { padding: 20px 24px 3px; font-size: 10px; }
  .faq-a { font-size: 16px; padding: 0 24px 16px; }
  .stub-line { font-size: 21px; padding: 26px 28px 6px; }
  .stub-sub { font-size: 10px; padding: 0 28px 26px; }
}