/* ============================================================================
   LOTUS X180R — EDITORIAL DESIGN SYSTEM
   Book-grade typographic layer. Loaded after the theme stylesheet.

     1. TOKENS · 2. BASE · 3. COMPONENTS · 4. SURFACES · 5. RESPONSIVE

   THE RULE: about to write `font-family: var(--grotesk); text-transform: uppercase;
   letter-spacing: .14em`? Stop. That is the EYEBROW component. Add your class to its
   alias list and set its custom properties. Same for badges, chips, stat strips, card
   grids, rails and the reprint frame. Every one of those was independently re-invented
   between three and twenty-five times before this consolidation; the duplicates silently
   overwrote each other and shipped three bugs (grey grout on the season grid; the story
   rail's headings rendering UNSTYLED; two gold numerals on every rail row).

   Add to a component. Do not clone one.

   THE ALIAS LISTS ARE DELIBERATE and are NOT a half-done migration. `.part-kicker` is not
   a duplicate of `.eyebrow` — it is a one-line MODIFIER setting only its own --eb-size /
   --eb-track / --eb-ink. Renaming them all to `class="eyebrow eyebrow-part"` would
   relocate information without reducing it. Don't.

   Catalogue: /design-system/ (living) · docs/DESIGN-SYSTEM.md (prose)
   ========================================================================== */

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --paper:      #fbfaf8;
  --paper-2:    #f1efe8;
  --ink:        #1b1815;
  --ink-muted:  #6a6459;
  --green:      #0b5c2e;   /* Lotus / British racing green — primary accent */
  --green-dk:   #084122;
  --gold:       #a9822a;   /* World Challenge gold — a LOTUS colour.        */
  /* A saturated gold FILL means a WIN, and nothing else may be filled gold. Gold as a
     hairline, an eyebrow, a hover or a rule is CHROME and means nothing in particular.
     The old comment here said "gold only ever means a result" — that was never true (gold
     is painted in ~70 places, nearly all of them chrome) and the slogan outlived the fact.
     WEIGHT RANKS THE RESULT; COLOUR NAMES IT. See docs/DESIGN-SYSTEM.md, "The colour law". */
  --red:        #a5342a;   /* pull-quote accent, retirements. Sparing.      */
  --rule:       rgba(27,24,21,.15);
  --rule-soft:  rgba(27,24,21,.09);

  --serif:    "Spectral", Georgia, "Times New Roman", serif;      /* body prose    */
  --grotesk:  "Archivo", "Helvetica Neue", Arial, sans-serif;     /* display + UI  */
  --document: "Newsreader", Georgia, "Times New Roman", serif;    /* REPRINTS ONLY */

  --measure: 36rem;   /* ~68 characters at the prose size — a book column */
}

/* ============================================================================
   2. BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; font-size: 107%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
::selection { background: var(--green); color: #fff; }

/* ---- OVERFLOW CONTAINMENT ----------------------------------------------
   NOTHING may push the page sideways. Three guarantees, in order of how much each is
   allowed to hide:

   (a) Replaced elements never exceed their container.

   (b) THE REAL OFFENDER WAS THE TABLES, not the images. A <table> whose cells are
       `white-space: nowrap` IGNORES `max-width: 100%` — table-layout is auto and the
       content wins. The 1990 results table (eleven source columns) measured 1,515px in a
       1,440px viewport and dragged the document out to 1,612px. Every such table now
       scrolls INSIDE ITS OWN BOX (.table-scroll, emitted by the `table` shortcode; also
       .reg-scroll, .season-viz-scroll, .race-split-table). Nothing is CLIPPED, because
       clipping would hide data — the far rounds of the standings.

   (c) `body { overflow-x: clip }` absorbs the one remaining legitimate breakout: the
       full-bleed figure, whose `width: 100vw` is measured INCLUDING the scrollbar and so
       always overhangs the document by the scrollbar's width.
       `clip` and NOT `hidden`: hidden creates a scroll container and would break every
       `position: sticky` rail on the site. And because (b) leaves nothing genuinely wide
       un-contained, this conceals a scrollbar sliver and nothing else. */
img, svg, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
body { overflow-x: clip; }

/* a scrollable table needs an AFFORDANCE, or it reads as a table that was simply cut off.
   The shadow appears at whichever edge still has content beyond it. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(251,250,248,0)) left center / 2.5rem 100% no-repeat,
    linear-gradient(to left,  var(--paper) 30%, rgba(251,250,248,0)) right center / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(27,24,21,.13), rgba(27,24,21,0)) left center / .7rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(27,24,21,.13), rgba(27,24,21,0)) right center / .7rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.container { width: auto !important; max-width: 1320px; padding-left: 1.5rem; padding-right: 1.5rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .container { padding-left: 2.2rem; padding-right: 2.2rem; } }

.page-wrapper { padding: 3.5rem 0 4.5rem; }
.page-wrapper table { width: 100%; max-width: 100%; }

/* ---- headings ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--grotesk); color: var(--ink);
  line-height: 1.08; letter-spacing: -0.015em;
  margin: 2.4rem 0 1rem; font-weight: 700;
}
.page-wrapper h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; padding-top: .6rem; margin-top: 3rem; }
.page-wrapper h2::before { content: ""; display: block; width: 2.4rem; height: 3px; background: var(--green); margin-bottom: 1rem; }
.page-wrapper h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--green-dk); }
.page-wrapper h4 { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.page-wrapper h5, .page-wrapper h6 { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--ink-muted); font-weight: 600; }
.page-wrapper h2, .page-wrapper h3 { clear: both; }

/* ---- prose -------------------------------------------------------------
   The theme ships `p { font-family: roboto; color: <grey> }`, which outspecifies our
   `body` rule. We take back only UNCLASSED prose — `p:not([class])` — so classed page
   furniture keeps its own styling. ⚠ LOAD-BEARING. Do not widen to a bare `p`. */
/* ⚠ `.runin-para` IS BODY PROSE. It carries a class ONLY so the run-in subhead (`**Head** |`) and
   its top margin work — the sentence after the subhead is the same Spectral body text as any other
   paragraph. But being classed, it fell out of `p:not([class])` and inherited the theme's grey 15px
   Roboto. Measured: 19 of 27 paragraphs on /story/imsa-supercar-wars/ — the ones the WRITER marked
   as most important — rendered as theme default. Nearly half the book's prose. It is listed here
   explicitly so the class can do its narrow job without losing the body font. */
.page-wrapper p:not([class]),
.page-wrapper p.runin-para,
.page-wrapper li:not([class]),
.page-wrapper dd:not([class]),
.lede p,
.season-body p:not([class]),
.season-body li:not([class]) {
  font-family: var(--serif); color: var(--ink);
  font-size: 1.02rem; line-height: 1.68; font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
.page-wrapper p { margin: 0 0 1.25rem; }
.page-wrapper li:not([class]) { margin-bottom: .35rem; }
.page-wrapper ul, .page-wrapper ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.page-wrapper li { margin-bottom: .45rem; }

.page-wrapper p:not([class]),
.page-wrapper p.runin-para,
.page-wrapper blockquote,
.page-wrapper ul:not([class]),
.page-wrapper ol:not([class]),
.lede p,
.season-body p:not([class]) { max-width: var(--measure); }

.page-wrapper a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s; }
.page-wrapper a:hover { color: var(--gold); }
.page-wrapper hr { border: 0; height: 1px; background: var(--rule); margin: 2.6rem 0; }

.page-wrapper .col-md-9 > p > em,
.season-body p > em { font-style: italic; color: var(--ink); }
.page-wrapper .col-md-9 > p.quote-run { font-style: italic; }

/* ⚠ TRAP — do NOT add a `p > strong:first-child` run-in-subhead rule. `:first-child`
   matches the first ELEMENT child regardless of any text before it, so an inline stat
   ("...the stock Turbo SE's **2,907 lb**") gets typeset as a subhead. Run-in subheads are
   tagged EXPLICITLY by layouts/story/single.html off the writer's `**Head** |` idiom. */

/* ---- tables ------------------------------------------------------------- */
.page-wrapper table.table {
  border: 0; border-collapse: collapse; width: 100%;
  margin: 2.2rem 0 3rem; background: transparent;
  font-size: 1.02rem; font-variant-numeric: tabular-nums lining-nums;
}
.page-wrapper table.table thead th {
  font-family: var(--grotesk);
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .7rem; font-weight: 700;
  color: #f2efe7; background: var(--green-dk);
  border: 0; padding: .72rem .95rem; vertical-align: middle;
}
.page-wrapper table.table thead th:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.page-wrapper table.table thead th:last-child  { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.page-wrapper table.table tbody td { border: 0; border-bottom: 1px solid var(--rule-soft); padding: .7rem .95rem; vertical-align: top; line-height: 1.5; }
.page-wrapper table.table tbody td:first-child { font-family: var(--grotesk); font-weight: 600; color: var(--ink); }
.page-wrapper table.table tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.page-wrapper table.table tbody tr:hover { background: rgba(169,130,42,.10); }
.page-wrapper table.table td strong { color: var(--green-dk); }
.page-wrapper table.table td a { color: var(--green); }
.page-wrapper table.table.table-striped tbody tr:nth-of-type(odd)  { background: transparent; }
.page-wrapper table.table.table-striped tbody tr:nth-of-type(even) { background: rgba(11,92,46,.045); }
.page-wrapper table.table.table-bordered,
.page-wrapper table.table.table-bordered > tbody > tr > td,
.page-wrapper table.table.table-bordered > thead > tr > th { border: 0 !important; }
.page-wrapper table.table.table-bordered > tbody > tr > td { border-bottom: 1px solid var(--rule-soft) !important; }
.registry-hub table.race-register td:empty::after,
.registry-car table.table td:empty::after { content: "—"; color: var(--ink-muted); opacity: .45; }

/* ==== standings — championship classifications (season pages) ==============
   Same visual language as table.table (grotesk green-dk header, hairline rows,
   no zebra), plus one thing a markdown table could not do: pick out OUR CAR.
   A row whose text names the Lotus gets a green spine and a faint green wash —
   weight-and-colour again, the marque green marking the entry that is ours. */
.page-wrapper table.standings { width: 100%; border-collapse: collapse; margin: 1.6rem 0 0; font-size: .95rem; }
.page-wrapper table.standings thead th {
  font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .09em;
  font-size: .7rem; font-weight: 700; color: #f2efe7; background: var(--green-dk);
  border: 0; padding: .72rem .95rem; text-align: left; vertical-align: middle;
}
.page-wrapper table.standings thead th:first-child { border-top-left-radius: 2px; }
.page-wrapper table.standings thead th:last-child  { border-top-right-radius: 2px; }
.page-wrapper table.standings tbody td {
  border: 0; border-bottom: 1px solid var(--rule-soft);
  padding: .7rem .95rem; vertical-align: baseline; line-height: 1.5;
}
.page-wrapper table.standings tbody td:first-child {
  font-family: var(--grotesk); font-weight: 600; color: var(--ink);
  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.page-wrapper table.standings tbody td:last-child {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.page-wrapper table.standings tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.page-wrapper table.standings tbody tr.is-lotus {
  background: color-mix(in srgb, var(--green) 7%, transparent);
  box-shadow: inset 3px 0 0 0 var(--green);
}
.page-wrapper table.standings tbody tr.is-lotus td { font-weight: 600; }
.page-wrapper table.standings tbody tr.is-lotus td:last-child { color: var(--green-dk); }
.standings-note {
  font-family: var(--grotesk); font-size: .82rem; line-height: 1.5;
  color: var(--ink-muted); max-width: var(--measure); margin: .85rem 0 0;
}

/* the LotuSport team mark, stacked above the door-number roundel on a race-car page */
.rc-lotusport { display: block; width: 72%; max-width: 190px; height: auto; margin: 0 auto; }

/* ---- figures & captions ------------------------------------------------- */
.page-wrapper figure { margin: 2rem 0; }
.page-wrapper figure img { display: block; }
.page-wrapper figcaption,
.page-wrapper .caption { font-family: var(--grotesk); font-size: .82rem; line-height: 1.4; color: var(--ink-muted); margin-top: .6rem; letter-spacing: .01em; }
.figure-caption { font-family: var(--grotesk); font-size: .78rem; line-height: 1.5; color: var(--ink-muted); margin-top: .6rem; }
.figcaption-credit { color: var(--ink-muted); opacity: .85; margin-left: .3rem; }

/* skip link — off-screen until focused. The -9999px is deliberate, not an overflow. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: .6rem 1rem; background: var(--green-dk); color: #fff;
  font-family: var(--grotesk); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 2px solid var(--gold); outline-offset: 2px; color: #fff; }
.skip-anchor { display: block; height: 0; }

/* ============================================================================
   3. COMPONENTS — ONE definition per idiom.
   ========================================================================== */

/* ---- EYEBROW ------------------------------------------------------------
   A small uppercase grotesk label above a title, heading a rail, tagging a card, or
   slugging a document. Gold by default. Tune with four custom properties — NEVER by
   re-declaring the family or the transform:
     --eb-size .72rem · --eb-track .14em · --eb-ink var(--gold) · --eb-weight 700 */
.eyebrow,
.part-kicker, .group-kicker, .hero-eyebrow, .pagehead-eyebrow, .section-eyebrow,
.sr-eyebrow, .reprint-kind, .reprint-byline, .rc-sec-kicker, .season-viz-eyebrow,
.specs-eyebrow, .chassis-eyebrow, .sidenote-label, .rail-head, .footer-col-head,
.cc-label, .hub-start-label, .reg-contribute-label, .era-label, .sc-series,
.sc-champion, .season-head-series, .st-title, .rc-prov-source, .nav-chapter-label,
.err-eyebrow, .pw-label, .footer-sub-label, .credit-tag, .chapter-part,
.sn-series, .cnav-dir, .runin, .sr-fig-k, .sr-series-count, .st-unranked-head,
.st-rounds-k, .sc-gap-lab, .book-imprint, .rt-dealer-place, .rc-roundel-cap,
.stat-lab, .reg-state-lab, .ballast-year {
  font-family: var(--grotesk);
  font-weight: var(--eb-weight, 700);
  font-size: var(--eb-size, .72rem);
  letter-spacing: var(--eb-track, .14em);
  text-transform: uppercase;
  color: var(--eb-ink, var(--gold));
}
.eyebrow-muted { --eb-ink: var(--ink-muted); }
.eyebrow-rule  { display: block; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); }

.part-kicker          { --eb-size: .78rem; --eb-track: .3em; }
.group-kicker         { --eb-size: .78rem; --eb-track: .3em; display: block; }
.rc-sec-kicker        { --eb-track: .3em; display: block; }
.section-eyebrow      { display: inline-block; margin: 2.4rem 0 0; }
.section-eyebrow + h3 { margin-top: .35rem; }
.sr-eyebrow           { display: block; }
.st-title             { margin: 0 0 .2rem; }
.season-head-series   { --eb-size: .78rem; --eb-track: .16em; }
.sc-series            { --eb-size: .58rem; --eb-track: .11em; }
.credit-tag           { --eb-size: .62rem; --eb-track: .16em; display: block; margin-bottom: .5rem; }
.chapter-part         { --eb-size: .68rem; --eb-track: .15em; margin: 0 0 1.6rem; }
.cnav-dir             { --eb-size: .68rem; grid-area: dir; margin-bottom: .3rem; }
.hub-start-label      { --eb-size: .64rem; }
.reg-contribute-label { --eb-size: .68rem; --eb-track: .18em; display: block; }
.pw-label             { --eb-size: .68rem; --eb-track: .18em; display: block; }
.footer-sub-label     { --eb-size: .68rem; display: block; margin-bottom: .55rem; }
.footer-col-head      { --eb-track: .18em; margin-bottom: 1rem; }
.err-eyebrow          { --eb-size: .8rem; --eb-track: .28em; }
.reprint-kind         { --eb-size: .66rem; --eb-track: .2em; display: block; }
.sidenote-label       { --eb-size: .68rem; display: block; margin-bottom: .55rem; }
/* muted members — a caption or a quiet key, not a section marker */
.cc-label             { --eb-ink: var(--ink-muted); --eb-size: .68rem; --eb-track: .16em; }
.sn-series            { --eb-ink: var(--ink-muted); --eb-size: .56rem; --eb-track: .12em; margin-top: .18rem; }
.sr-fig-k             { --eb-ink: var(--ink-muted); --eb-size: .58rem; --eb-track: .1em; }
.sr-series-count      { --eb-ink: var(--ink-muted); --eb-size: .66rem; --eb-track: .1em; }
.st-unranked-head,
.st-rounds-k          { --eb-ink: var(--ink-muted); --eb-size: .6rem; --eb-track: .1em; display: block; margin-top: 1rem; }
.sc-gap-lab           { --eb-ink: var(--ink-muted); --eb-size: .56rem; --eb-track: .11em; opacity: .7; }
.book-imprint         { --eb-ink: var(--ink-muted); --eb-size: .66rem; --eb-track: .08em; --eb-weight: 600; }
.rt-dealer-place      { --eb-ink: var(--ink-muted); --eb-size: .62rem; --eb-track: .08em; --eb-weight: 600; display: block; margin-top: .1rem; white-space: nowrap; }
.rc-roundel-cap       { --eb-ink: var(--ink-muted); --eb-size: .74rem; --eb-track: .18em; }
.rc-prov-source       { --eb-ink: var(--ink-muted); --eb-size: .68rem; --eb-track: .1em; --eb-weight: 400; display: block; margin-top: .5rem; }
.rc-prov-source::before { content: "Source: "; color: var(--gold); font-weight: 700; }
/* the run-in subhead is an eyebrow set in green, inside a paragraph */
.runin      { --eb-ink: var(--green-dk); --eb-size: .74rem; --eb-track: .11em; font-style: normal; }
.runin-para { margin-top: 1.9rem; }
.runin-rule { display: inline-block; width: 1.15rem; height: 1px; margin: 0 .55rem .28rem .5rem; background: var(--gold); vertical-align: middle; }

.chassis-eyebrow { --eb-size: .7rem; --eb-track: .16em; display: block; padding-bottom: .55rem; border-bottom: 2px solid var(--ink); }
.era-label {
  display: flex; align-items: baseline; gap: .7rem;
  margin: 1.8rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ink);
}
.era-label em { font-style: normal; color: var(--ink-muted); letter-spacing: .1em; margin-left: .3em; }

/* SPEC SECTION HEAD. The LABEL is the content; the number is only an ordinal and must not
   outrank it. It previously did — label .8rem, numeral 1.05rem. */
.specs-eyebrow {
  --eb-size: 1.02rem; --eb-track: .16em; --eb-weight: 800; --eb-ink: var(--green-dk);
  display: flex; align-items: baseline; gap: .7rem;
  border-bottom: 2px solid var(--gold); padding-bottom: .5rem; margin: 0;
}
.specs-eyebrow-num {
  font-family: var(--grotesk); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; color: var(--gold);
  font-variant-numeric: tabular-nums; flex: none;
}

/* ---- PAGE HEAD (typographic) --------------------------------------------
   The alternative to the photographic hero, for a page whose subject IS its data. A
   REGISTER entry opens with the record, not wallpaper: every chassis page used to carry
   the same stock banner, car after car, which identified nothing and pushed the dash
   plaque and vitals below the fold. Use .page-title only where a real photograph earns
   the screen. */
.pagehead { background: var(--paper); border-bottom: 1px solid var(--rule); margin: 0; padding: 3.2rem 0 1.8rem; }
.pagehead-eyebrow { --eb-track: .22em; display: block; }
.pagehead-title {
  font-family: var(--grotesk); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.02em;
  color: var(--ink); margin: .55rem 0 0;
}
.pagehead-dek {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.45;
  color: var(--ink-muted); margin: .85rem 0 0; max-width: 44rem;
}

/* ---- RAIL HEAD ----------------------------------------------------------
   The head of EVERY section rail. ⚠ This used to be written twice, SCOPED as
   `.season-rail .rail-head` and `.parts-rail .rail-head`. layouts/story/single.html emits
   a bare `.rail-head` ("In This Chapter", "The Book") which matched neither, so both
   rendered as unstyled inline serif on every chapter page. One component, defined once,
   unscoped — that bug is now impossible to write. */
.rail-head {
  --eb-size: .7rem; --eb-track: .16em;
  display: block; padding-bottom: .5rem; border-bottom: 2px solid var(--ink);
}
.parts-rail .rail-head { margin-bottom: .3rem; }
.rail-all { display: block; margin-top: 1.1rem; font-family: var(--grotesk); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; }
.rail-all:hover { color: var(--green); }

/* ---- BADGE (a racing RESULT) -------------------------------------------
   GOLD ONLY EVER MEANS A RESULT — a win, a podium, a pole. Never a name, never a marque.
   Editorial, not stylistic: bold in a season table marks OUR CAR, and pinning gold on a
   driver's name destroys the one signal that matters. Our entries read in Lotus green.
   ONLY A WIN IS FILLED. Gold, solid, once per race — a first place should be the only thing on
   the page that stops the eye. A podium is a fine result and earns a mark of its own, but it is
   not a win: filling it solid dark green made P2 and P3 shout as loudly as P1 while reading
   HEAVIER than either. So the podium is TINTED, not filled. It sits at the same visual weight as
   an ordinary finish and is coloured Lotus green to say podium.
   WEIGHT RANKS THE RESULT; COLOUR NAMES IT.
     .badge · .badge-win (gold, FILLED — the only filled badge)
     .badge-podium (green, TINTED — 2nd and 3rd) · .badge-pole (gold, OUTLINED — a qualifying
     result is subordinate to a finish) · .badge-out (dashed) */
.badge, .rc-pos {
  display: inline-block;
  min-width: 2.4rem; padding: .1rem .45rem; text-align: center;
  border-radius: 3px;
  background: var(--paper-2); color: var(--ink-muted);
  font-family: var(--grotesk); font-weight: 700; font-size: .82rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.rc-pos { justify-self: start; }
.badge-win,    .rc-run.is-win .rc-pos    { background: var(--gold);  color: #17140f; }
.badge-podium, .rc-run.is-podium .rc-pos {
  background: rgba(11,92,46,.10); color: var(--green-dk);
  box-shadow: inset 0 0 0 1px rgba(11,92,46,.42);
}
.rc-run.is-ret .rc-pos { text-decoration: line-through; text-decoration-color: var(--red); }
.badge-out, .rc-pos-out {
  min-width: 2.4rem; background: transparent; color: var(--ink-muted);
  border: 1px dashed var(--rule); font-size: .72rem;
}
.badge-pole, .sr-pole, .rc-pole {
  font-family: var(--grotesk); font-weight: 700;
  text-transform: uppercase; white-space: nowrap; border-radius: 2px;
}
.badge-pole, .sr-pole {
  font-size: .6rem; letter-spacing: .1em; color: var(--gold);
  background: rgba(169,130,42,.12); border: 1px solid rgba(169,130,42,.5);
  padding: .04rem .3rem;
}
.rc-pole { font-size: .68rem; letter-spacing: .08em; background: rgba(169,130,42,.16); color: #7a5d17; padding: .06rem .34rem; }

/* POSITION, UNBOXED — the results list and standings print the position as bare figures
   so the eye runs down a column of numerals. Same semantics, same colours. */
.sr-pos {
  grid-column: 1;
  font-family: var(--grotesk); font-weight: 800; font-size: .86rem;
  font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap;
}
.st-pos { font-family: var(--grotesk); font-weight: 800; font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.is-win    .sr-pos { color: var(--gold); }
.is-podium .sr-pos { color: var(--green); }
.is-ret    .sr-pos { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; }
/* The champion's position is gilded from an EXPLICIT data flag (champion: true),
   never from DOM position. The old :first-of-type rule painted whoever sat in row
   one — a Corvette, a Porsche, a BMW — in Lotus gold, on the very tables proving
   Lotus did not win. Gold marks a Lotus championship, and only one row carries it. */
.st-row.is-champion .st-pos { color: var(--gold); }
.sr-pos-out { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red); text-decoration: none !important; }
.sr-entry.is-win    { background: rgba(169,130,42,.07); }
.sr-entry.is-podium { background: rgba(11,92,46,.045); }

/* ---- CHIP — a status tag about THE RECORD, not a race ------------------- */
.chip, .chassis-chip {
  display: inline-block; padding: .3rem .7rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .1em;
  font-size: .66rem; font-weight: 700; color: var(--ink-muted);
}
.chip.is-cold, .chassis-chip.is-cold { color: var(--red);  border-color: rgba(165,52,42,.35); background: rgba(165,52,42,.06); }
.chip.is-open, .chassis-chip.is-open { color: var(--gold); border-color: rgba(169,130,42,.5); background: rgba(169,130,42,.10); }
.page-wrapper a.chassis-chip.is-link { color: var(--green); border-color: rgba(11,92,46,.35); text-decoration: none !important; transition: background .15s, color .15s; }
.page-wrapper a.chassis-chip.is-link:hover { background: var(--green); border-color: var(--green); color: #f2efe7; }
.chassis-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }

.reg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 1.7rem; padding: 0 .4rem;
  background: transparent; color: var(--gold);
  border: 1px solid rgba(169,130,42,.45); border-radius: 3px;
  transition: background .15s, color .15s, border-color .15s;
  font-family: var(--grotesk); font-weight: 800; font-size: .9rem;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em;
  text-decoration: none !important;
}
.reg-badge a, a.reg-badge { color: var(--gold); text-decoration: none !important; }
a.reg-badge:hover, a.reg-badge:focus { background: var(--gold); color: #fff; border-color: var(--gold); }
a.reg-badge-link { text-decoration: none !important; }

/* ---- STAT STRIP --------------------------------------------------------- */
.statstrip, .hub-stats, .reg-state {
  display: grid;
  grid-template-columns: repeat(var(--strip-cols, 4), 1fr);
  gap: 1.5rem; padding: 1.9rem 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.hub-stats { margin: 0 0 3.2rem; }
.reg-state { margin: 2.6rem 0 0; padding: 1.7rem 0; border-bottom: 1px solid var(--rule); }
.statstrip-inline, .racing-stats {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin: 1.6rem 0 2.4rem; padding: 1.9rem 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.stat, .reg-state-stat { text-align: center; }
.statstrip-inline .stat, .racing-stats .stat { display: flex; flex-direction: column; gap: .1rem; text-align: center; }
.stat-fig, .reg-state-fig {
  display: block;
  font-family: var(--grotesk); font-weight: 800; line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--stat-size, clamp(1.8rem, 3.4vw, 2.6rem));
}
.hub-stats .stat-fig    { --stat-size: clamp(2rem, 4vw, 3.2rem); }
.racing-stats .stat-fig { --stat-size: 2rem; }
.reg-state-fig.reg-state-open { color: var(--gold); }
.stat-lab      { --eb-ink: var(--ink-muted); --eb-track: .1em; --eb-weight: 600; display: block; margin-top: .65rem; line-height: 1.35; }
.reg-state-lab { --eb-ink: var(--ink-muted); --eb-size: .66rem; --eb-track: .1em; --eb-weight: 600; display: block; margin-top: .6rem; line-height: 1.35; }
.racing-stats .stat-lab { --eb-size: .62rem; --eb-track: .12em; --eb-weight: 700; margin-top: 0; line-height: 1.3; }

/* ---- CARD GRID ----------------------------------------------------------
   ⚠ .cardgrid and .cardgrid-hairline are NOT interchangeable. The hairline variant draws
   its rules by showing a coloured ground through a ONE-PIXEL gap. Widen that gap and the
   ground becomes a thick grey strip between every card, plus a grey slab wherever a row
   runs short. That shipped once, on the season grid. Want a real gap? Use .cardgrid. */
.cardgrid, .season-cards, .rc-grid, .bookshelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 15rem), 1fr));
  gap: var(--card-gap, 1rem);
  background: transparent; border-top: 0;
}
/* .credits-grid moved OFF the hairline variant. A short final row left the rule-coloured ground
   exposed as a ~690x285px grey slab — the largest filled shape on /credits/, and it meant nothing.
   The comment above warned that this "shipped once, on the season grid"; the season grid was fixed
   and credits was left behind. The rule carrying the warning was causing the bug. */
.credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  background: transparent; border-top: 0;
}
.cardgrid-hairline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 18rem), 1fr));
  gap: 1px; background: var(--rule);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}

/* ---- GHOST NUMERAL ------------------------------------------------------
   THE HOUSE MARK. An outline gold numeral that FILLS on hover.
   ⚠ NEVER set these solid. At 800 weight a filled numeral is far too heavy and a grid of
   them becomes a wall of black. The ONE exception is the champion season card, which
   fills precisely BECAUSE everything around it is hollow. */
/* ⚠ PROTECTED — DO NOT REDESIGN. The author: "Don't ever lose this design, I *LOVE* the contents
   design." The ghost numeral is the whole idea: a GOLD OUTLINE when unvisited, FILLED SOLID when
   active or hovered. Hollow to solid. Do not change the stroke, the fill, or the transition, and
   do not restyle this as a side effect of other work. See docs/DESIGN-SYSTEM.md, "PROTECTED". */
.ghost-num, .cc-num, .cnav-num, .sc-year, .ct-num {
  font-family: var(--grotesk); font-weight: 800; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  text-shadow: none;
}
.cc-num   { font-size: 2.9rem; text-align: center; }
.cnav-num { font-size: 2.1rem; -webkit-text-stroke-width: 1.4px; grid-area: num; }
.sc-year  { font-size: 1.85rem; -webkit-text-stroke-width: 1.4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: .1rem; }
/* The rail runs ten of these in 240px, the smallest scale on the site — so the stroke
   thins with the glyph. At the 2-2.9rem sizes above 1.5px reads as a fine outline; at
   1.05rem it would clog the counters of 0/6/8 into blobs. */
.ct-num   { font-size: 1.05rem; -webkit-text-stroke-width: 1px; text-align: right; flex: none; width: 1.6rem; font-variant-numeric: tabular-nums lining-nums; }
.chapter-card:hover .cc-num,
.cnav:hover .cnav-num,
.season-card:hover .sc-year,
.chapter-toc a:hover .ct-num,
.chapter-toc li.active .ct-num { color: var(--gold); -webkit-text-stroke: 0; }

/* ---- GHOST-NUMBER CARD (the story hub row) ------------------------------ */
.chapter-cards { display: flex; flex-direction: column; }
.chapter-card {
  display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1.6rem; align-items: center;
  padding: 1.5rem .4rem; border-bottom: 1px solid var(--rule);
  text-decoration: none !important; color: var(--ink);
  transition: background .15s ease, padding .15s ease;
}
.chapter-card:hover { background: rgba(11,92,46,.05); padding-left: 1rem; }
.cc-body  { display: flex; flex-direction: column; gap: .25rem; }
.cc-title { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--ink); line-height: 1.12; }
.cc-dek   { font-family: var(--serif); color: var(--ink-muted); font-size: 1.02rem; line-height: 1.5; }
.chapter-card:hover .cc-title { color: var(--green); }
.cc-arrow { font-family: var(--grotesk); color: var(--gold); font-size: 1.5rem; opacity: 0; transition: opacity .15s, transform .15s; }
.chapter-card:hover .cc-arrow { opacity: 1; transform: translateX(4px); }
.chapter-index .chapter-card h3 a { color: var(--ink); text-decoration: none; }
.chapter-index .chapter-card h3 a:hover { color: var(--green); }

/* ---- DOT RAIL — dots on a hairline spine. ONE idiom, two uses:
     .season-nav    NAVIGATION — hollow dots, gold when active
     .rc-prov-list  CHRONOLOGY — filled gold dots, ringed in the paper */
.dotrail, .season-nav, .rc-prov-list { list-style: none; margin: 0; padding: 0; position: relative; }
.dotrail::before, .season-nav::before, .rc-prov-list::before {
  content: ""; position: absolute; left: var(--spine-x, .34rem);
  top: 1rem; bottom: 1rem; width: 2px; background: var(--rule);
}
.dot, .sn-dot, .rc-prov-dot { border-radius: 50%; flex: none; position: relative; z-index: 1; }
.season-rail { position: sticky; top: 2rem; }
.season-nav li a { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; font-family: var(--grotesk); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; transition: color .15s, padding-left .15s; }
.season-nav li a:hover { color: var(--green); padding-left: .25rem; }
.sn-dot { width: .78rem; height: .78rem; background: var(--paper); border: 2px solid var(--ink-muted); transition: border-color .15s, background .15s; }
.season-nav li a:hover .sn-dot { border-color: var(--green); }
.season-nav li.active .sn-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,130,42,.22); }
.sn-body { display: flex; flex-direction: column; line-height: 1.05; }
.sn-year { font-family: var(--grotesk); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.season-nav li a:hover .sn-year,
.season-nav li.active .sn-year { color: var(--green); }
.season-nav li.active .sn-series { --eb-ink: var(--gold); }
/* the active item is marked by the gold dot and the green year — deliberately NO leading
   dash; that was a leftover from the pre-timeline list rail. */

.rc-prov { margin: 4rem 0 0; }
.rc-prov-list { --spine-x: .36rem; margin: 1.8rem 0 0; }
.rc-prov-list::before { top: .6rem; bottom: .6rem; }
.rc-prov-item { display: grid; grid-template-columns: 1.1rem 7rem minmax(0, 1fr); gap: 0 1.4rem; align-items: start; padding: 0 0 1.9rem; }
.rc-prov-dot { width: .8rem; height: .8rem; background: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--paper); margin-top: .34rem; }
.rc-prov-year { font-family: var(--grotesk); font-weight: 800; font-size: 1.05rem; color: var(--green-dk); line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }
.rc-prov-body { max-width: 42rem; }
.page-wrapper h3.rc-prov-title { font-family: var(--grotesk); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin: 0 0 .35rem; line-height: 1.2; }
.racecar .rc-prov-body .rc-prov-text p { margin: 0; max-width: none; font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink); }

/* ---- LIST RAIL ----------------------------------------------------------
   ⚠ The pre-rail numbered `.chapter-toc` — a CSS counter absolutely positioned at left:0
   in gold — was DELETED. The rebuilt rail renders its own `.ct-num`, and the orphaned
   counter fired alongside it, painting a SECOND gold numeral under every dot. Do not
   reintroduce a counter here. */
.rail-sticky { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 2.2rem; }
.rail-block, .rail-sections { display: block; }
.rail-head-link { text-decoration: none !important; }
.rail-head-link:hover { color: var(--green); }
.rail-head-arrow { color: var(--gold); }

/* All Chapters. A hollow-to-solid ghost numeral (the site's one identity device, used
   here at its smallest scale) replaces the old dot; a single left-border spine down the
   numeral column replaces the ten border-bottoms that used to read as a table row for
   row. Same spine idiom as the in-page section rail — one rail, one language. The
   active row is the only dark, only green, only gold-filled thing in the list; every
   other row recedes to --ink-muted so the eye is never in doubt which chapter it's on. */
.chapter-toc { list-style: none; margin: .9rem 0 0; padding: 0; }
.chapter-toc li { margin: 0; border-left: 2px solid var(--rule-soft); }
/* PROGRESS SPINE — the left rail fills Lotus green from the top down to the chapter you are on,
   then falls to the muted rule below it. The active chapter carries the strongest green plus its
   filled numeral; the chapters you have passed keep a green spine so the rail shows position, not
   just the current segment. */
.chapter-toc li.is-past { border-left-color: var(--green); }
.chapter-toc li.active { border-left-color: var(--green); border-left-width: 3px; }
.chapter-toc a { display: flex; align-items: center; gap: .7rem; padding: .55rem 0 .55rem .8rem; text-decoration: none !important; }
.ct-title { font-family: var(--grotesk); font-size: .82rem; line-height: 1.3; color: var(--ink-muted); }
.chapter-toc a:hover .ct-title { color: var(--green); }
.chapter-toc li.active .ct-title { color: var(--green); font-weight: 600; }

/* ---- QUOTATIONS — ONE principle, three components -------------------------------
   Face names the source. Indentation is the only quotation mark. Colour stays out of it.

   Five overlapping treatments (blockquote / .testimony / .pullquote / .sidenote-as-quote
   / .rq) used to be graded by LOUDNESS — an editorial "how excited am I" axis that told
   the reader nothing about the sentence, and quietly broke: `.testimony`'s auto-tagging
   regex matched a literal curly quote that Hugo's typographer never emits (it emits
   `&ldquo;`), so it fired on ZERO pages; `.pullquote`'s color param was silently beaten by
   this file's own blockquote rule on specificity, so every "gold" and "red" pullquote
   rendered green regardless of what the writer picked; and a factory press release
   quoted inline (`racing/1990.md`) got the identical treatment as a driver's own words
   (`racing/1993.md`) — on a site whose entire argument is the gap between what the
   factory claimed and what the record shows. Loudness was never the axis that mattered.

   The axis that matters is: who is speaking. There are exactly two answers —
     a person, in the room or on the phone           → .quotation  (this section)
     a document being read out, not a person talking  → .docquote  (below)
   — and the site already drew this line for full reprints (--document / Newsreader,
   "a reader flicking through can never mistake the factory's press release for the
   historian's text"). .docquote is that same rule, applied to an excerpt too short to
   earn its own {{< reprint >}}. Nothing new is being taxonomized; a gap is being closed.

   Both are QUIET by default: no italics at paragraph length (italic was cut for
   emphasis and marginalia, not extended reading — running a six-sentence oral history
   in italic serif is what a typewriter does, not what a monograph does), no quotation
   marks, no colour, no box. The hanging indent IS the quotation mark. A small-caps
   citation hangs one step further left again, the way a colophon hangs a source note.
   `.is-sourced` adds a rule above the citation for the rarer case where the PROVENANCE
   itself is the argument (a contested claim, an allegation) — still no colour, because
   colour is spent elsewhere (gold = a result, red = the record superseding a claim, see
   .record-note below) and a second colour economy for "pay attention to this source"
   would compete with both.

   At most ONE .reprise per chapter — see below — and it is the only loud thing here. */
.page-wrapper blockquote,
.page-wrapper .quotation {
  /* A TINTED TESTIMONY BOX. Earlier this component relied on scale-and-air alone (no box), and
     against long body columns the quotation stopped reading as a distinct object — a voice from
     outside our prose looked like our prose, only bigger. The page already uses colour-boxed
     callouts elsewhere, so a quotation now sits in a faint green-washed panel with a marque-green
     spine: unmistakably a reproduced voice, still no quotation marks, still the body serif (a
     person, not a document — that distinction stays with .docquote's Newsreader panel). Compact,
     so it breaks the page without shouting. */
  margin: 2.6rem 0 2.4rem;
  padding: 1.5rem 1.7rem;
  background: color-mix(in srgb, var(--green) 5%, var(--paper));
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--green);
  border-radius: 2px;
  max-width: var(--measure);
}
.page-wrapper .quotation blockquote {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.5;
  letter-spacing: -.003em;
  color: var(--ink);
  text-wrap: pretty;
}
.page-wrapper .quotation blockquote p { margin: 0 0 .8rem; font-size: inherit; line-height: inherit; color: inherit; font-family: inherit; }
.page-wrapper .quotation blockquote p:last-child { margin-bottom: 0; }

/* THE SPEAKER IS A CREDENTIAL, NOT A FOOTNOTE. On this site "who said this, and when" is the
   argument — testimony recalled decades later and period speech to a reporter are different kinds
   of evidence. So the name is promoted to an eyebrow and the occasion and source sit beneath it.
   The old form ran everything into one small-caps line and collided two em-dashes.
   Shared with .docquote below — the SAME attribution grammar for a person and for a document,
   because "who, when, from where" is the argument in both cases. */
.page-wrapper .q-attr {
  display: flex; flex-direction: column; gap: .18rem;
  margin-top: 1.15rem; padding-top: .8rem;
  border-top: 1px solid var(--rule-soft);
}
.page-wrapper .q-speaker {
  font-family: var(--grotesk); font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--green-dk);
}
.page-wrapper .q-meta {
  font-family: var(--serif); font-style: italic;
  font-size: .88rem; line-height: 1.45; color: var(--ink-muted);
}
.page-wrapper .q-meta em,
.page-wrapper .q-meta cite { font-style: normal; }
.page-wrapper .q-sep { color: var(--rule); font-style: normal; padding: 0 .1em; }

/* the provenance is itself the argument — rule it off harder. No new colour. */
.page-wrapper .quotation.is-sourced .q-attr,
.page-wrapper .docquote.is-sourced .q-attr { border-top-color: var(--rule); }

@media (max-width: 700px) {
  .page-wrapper .quotation blockquote,
  .page-wrapper .docquote blockquote { font-size: 1.1rem; }
}

/* DOCQUOTE — a document, not a person, sitting in a tinted panel: printed matter (a press
   release line, ad copy, a rulebook clause) short of a full {{< reprint >}}. Where .quotation
   gets its presence from scale and air (a voice needs no edges), .docquote gets it from being
   visibly an OBJECT laid on the page — the same --paper-2 ground and Newsreader face the
   reprint stands on, so an excerpt reads as a document whether it runs four hundred words or
   four. This is the one place the system keeps a box, and on purpose: paper has edges. */
.page-wrapper .docquote {
  margin: 2.2rem 0; padding: 1.2rem 1.4rem 1.3rem;
  background: var(--paper-2); border-left: 2px solid var(--ink);
  max-width: calc(var(--measure) - 1.4rem);
}
.page-wrapper .docquote blockquote {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--document); font-size: 1.1rem; line-height: 1.5; color: var(--ink);
}
.page-wrapper .docquote blockquote p { margin: 0 0 .7rem; }
.page-wrapper .docquote blockquote p:last-child { margin-bottom: 0; }
.page-wrapper .docquote .q-attr { border-top-color: var(--rule); }

/* THE REPRISE — a display REPETITION of a sentence already given, in full and sourced,
   in the prose above. Never a quotation's first or only appearance — the site used to
   extract a driver's words into 40px grotesk bold as the ONLY place on the page they
   appeared, which is the least accountable treatment given to the best evidence.
   Achromatic on purpose: a repetition asserts no new authority, so it gets no colour —
   and colour on a pull-quote is exactly the idiom whose "red/green/gold" param this file
   silently ignored for as long as it existed. At most ONE per chapter.

   THIS USED TO FLOAT (reprise-left/-right, 20rem, beside the running prose) and that is
   the bug the author flagged: floated white-ground grotesk sitting next to white-ground
   serif body copy — often beside a run-in subhead too — reads as a second column at the
   SAME weight as the paragraph, and a reader cannot tell which is the emphasis and which
   is the sentence they are already reading. A quotation gets its presence from scale and
   air (see .quotation above); a floated column instead fights the paragraph for the same
   air. Fix: the reprise no longer floats on the web. It takes the FULL column
   (var(--measure), same width as the prose it repeats — never wider, so it never reads
   as a breakout panel either) and STOPS the column rather than sitting beside it: a full
   stack break, generously aired top and bottom, at true display scale. `align="left|right"`
   is kept for the seven existing call sites but no longer moves the block — it now sets
   text-align, a quieter knob than float ever was. (Print `.spread`/`.spread-flip` still
   float this into the book's own margin column below — that IS a real place with its own
   rule and gutter, not the web bug being fixed here, so it is left untouched.) */
/* THE REPRISE IS NOW A MARGIN CALLOUT. A short, memorable line pulled into the right
   margin as a green box WITH the speaker named — the same place and width as .margin-note,
   so quotes and marginalia read as one system. It may repeat a sentence from the body; that
   is the point of a callout. A long, in-flow quote still uses .quotation (the inline box). */
.page-wrapper .reprise {
  float: right; clear: right;
  width: 16rem; max-width: 46%;
  margin: .5rem 0 1.6rem 2.2rem;
  padding: 1.15rem 1.35rem;
  background: color-mix(in srgb, var(--green) 6%, var(--paper));
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--green); border-radius: 2px;
}
.page-wrapper .reprise .reprise-quote { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.page-wrapper .reprise .reprise-attr { display: block; margin-top: .75rem; padding-top: .55rem; border-top: 1px solid var(--rule-soft); }
.page-wrapper .reprise .reprise-speaker { display: block; font-family: var(--grotesk); font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .11em; color: var(--green-dk); }
.page-wrapper .reprise .reprise-meta { display: block; margin-top: .14rem; font-family: var(--serif); font-style: italic; font-size: .78rem; line-height: 1.4; color: var(--ink-muted); }
.page-wrapper .reprise .reprise-meta em, .page-wrapper .reprise .reprise-meta cite { font-style: normal; }
.page-wrapper .reprise.reprise-left { float: left; clear: left; margin: .5rem 2.4rem 1.4rem 0; }
@media (max-width: 680px) {
  .page-wrapper .reprise, .page-wrapper .reprise.reprise-left { float: none; width: auto; max-width: var(--measure); margin: 1.8rem 0; }
}

/* SIDENOTE — a margin fact panel. NEVER a quotation: someone's spoken words are
   testimony, not a fact, and belong in .quotation. (One misuse shipped — racing/1992's
   grid-side fuel-pump story — and has been moved into .quotation; see content diff.) */
.page-wrapper .sidenote {
  float: right; clear: right; width: 16rem; margin: .5rem 0 1.6rem 2.2rem;
  padding: 1.15rem 1.35rem; background: var(--paper-2); border-top: 3px solid var(--gold);
}
.page-wrapper .sidenote .sidenote-body { font-size: .98rem; line-height: 1.55; color: var(--ink-muted); }
.page-wrapper .sidenote .sidenote-body p { margin-bottom: .6rem; }
.page-wrapper .sidenote .sidenote-body p:last-child { margin-bottom: 0; }

/* THE RECORD — our own voice, correcting a claim against the timing sheet or the
   chassis record. Grotesk (never mistaken for the source's voice or a quotation), and
   the ONE place this system spends colour: red, because red already means "superseded"
   everywhere else on the site (retirements, superseded parts). Sparing, opt-in, no
   shortcode — a claim being corrected is rare enough to write by hand. */
.page-wrapper .record-note {
  margin: 1.4rem 0; padding: .75rem 1.3rem .85rem;
  background: var(--paper-2); border-left: 2px solid var(--red); border-top: 1px solid var(--rule);
  font-family: var(--grotesk); font-size: .84rem; line-height: 1.55; color: var(--ink);
  max-width: calc(var(--measure) - 1.3rem);
}
.page-wrapper .record-note::before {
  content: "The record"; display: block; margin-bottom: .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}

/* ---- REPRINT (the document frame) ---------------------------------------
   A primary source reproduced VERBATIM. Deliberately not our voice, and visibly so. Set
   in --document (Newsreader), NOT Spectral — just loud enough that a reader flicking
   through can never mistake the factory's press release for the historian's text. That
   matters most where the source is WRONG: the 1991 Lotus Cars USA releases say "Aaerica",
   "Epsirt", "geting", "nad". We do not fix them.
   ⚠ NEVER ALTER A CHARACTER INSIDE A REPRINT.
     .reprint · .reprint.is-newsprint (two justified columns) · .rc-source (a listing)
   `.rc-source` was re-invented for the 2020 dealer listing and set in Spectral, i.e. as if
   WE had written it. It is a reprint — which matters more here than anywhere, because
   that listing is the document that CONTRADICTED the old Manufacturers'-title claim. */
.reprint, .rc-source {
  margin: 3rem 0; padding: 2rem 2.2rem 1.4rem;
  background: var(--paper-2); border-top: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  max-width: 52rem;
}
.rc-source { margin: 4.2rem 0 0; }
.reprint-head, .rc-source-head {
  background: transparent;   /* the theme paints bare <header> white */
  padding: 0 0 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem;
}
.reprint-slug {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 .55rem !important;
  font-family: var(--grotesk) !important;
  font-size: .62rem !important; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted) !important; max-width: none !important;
}
.reprint-slug .reprint-kind { color: var(--gold); }
.reprint-slug .reprint-src::before,
.reprint-slug .reprint-date::before { content: "·"; margin-right: .55rem; color: var(--rule); font-weight: 400; }
/* the publication's own NAMEPLATE. `multiply` drops its white ground onto the paper. */
.reprint-masthead { display: block; height: 2.1rem; width: auto; max-width: 100%; margin: 0 0 .7rem; mix-blend-mode: multiply; opacity: .88; }
.reprint-headline,
.page-wrapper h3.reprint-headline {
  font-family: var(--document);
  font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);            /* the theme colours h3 green; a headline is ink */
  margin: 0 0 .5rem; text-transform: none;
}
.reprint-dek {
  font-family: var(--document) !important;
  font-size: 1.04rem !important; line-height: 1.4 !important;
  color: var(--ink) !important; margin: 0 0 .6rem !important; max-width: 40rem !important;
}
.reprint-dek strong { font-weight: 600; }
.reprint-byline { --eb-ink: var(--ink-muted); --eb-size: .66rem; --eb-track: .13em; margin: 0 !important; max-width: none !important; }
.page-wrapper h3.reprint-title, .reprint-title {
  font-family: var(--grotesk); font-weight: 800;
  font-size: 1.24rem; line-height: 1.2; color: var(--ink);
  margin: .35rem 0 0; text-transform: none; letter-spacing: -.005em;
}
.reprint-meta { display: flex; flex-wrap: wrap; gap: .3rem 2rem; margin: .8rem 0 0; }
.reprint-meta > div { display: flex; align-items: baseline; gap: .45rem; }
.reprint-meta dt { margin: 0; font-family: var(--grotesk); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.reprint-meta dd { margin: 0; font-family: var(--document); font-size: .92rem; color: var(--ink); }

/* the document itself — roman, on the document ground. NOT the italic blockquote
   treatment: that reads as a pull-quote, and this is a whole document. */
.reprint-body,
.page-wrapper .reprint-body p:not([class]),
.page-wrapper .reprint-body li:not([class]),
.page-wrapper .rc-source-body blockquote,
.page-wrapper .rc-source-body blockquote p,
.page-wrapper .rc-source-body blockquote li {
  font-family: var(--document);
  font-size: 1.02rem; line-height: 1.62;
  font-optical-sizing: auto;
  color: var(--ink); font-style: normal; max-width: none;
}
.page-wrapper .reprint-body p:not([class])  { margin: 0 0 1rem; }
.page-wrapper .reprint-body li:not([class]) { margin-bottom: .5rem; }
.page-wrapper .reprint-body ul:not([class]) { max-width: none; }
.page-wrapper .reprint-body > p:first-of-type { font-size: 1.08rem; color: var(--ink); }
.reprint-body em { font-style: italic; color: var(--ink); }
.reprint-body h2, .reprint-body h3, .reprint-body h4 {
  font-family: var(--grotesk); font-size: 1rem; font-weight: 700;
  color: var(--ink); margin: 1.6rem 0 .6rem; text-transform: none; letter-spacing: 0;
}
.page-wrapper .reprint-body h2::before { content: none; }
/* OUR note ABOUT the document — grotesk, so it can never be read as part of the source */
.reprint-note {
  margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--grotesk) !important; font-size: .7rem !important;
  line-height: 1.5 !important; color: var(--ink-muted) !important; max-width: none !important;
}

.rq { quotes: none; font-style: italic; color: var(--ink); }
.rq::before, .rq::after { content: none; }
.rq-mark { color: var(--ink-muted); font-style: normal; font-weight: 600; } /* was --gold — a quotation mark is punctuation, not a result */
/* ⚠ TRAP — do NOT add a `.rq:only-child` block treatment. `:only-child` matches the only
   ELEMENT child regardless of the text around it, so an ordinary inline quotation became
   a block and tore the sentence into three pieces. Same trap as `strong:first-child`. */

/* NEWSPRINT — two justified columns, the way the piece was actually read in 1991. Press
   releases stay single-column: they were typed sheets. */
.reprint.is-newsprint .reprint-head { border-bottom: 3px double var(--ink); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.reprint.is-newsprint .reprint-body {
  column-count: 2; column-gap: 2.6rem; column-rule: 1px solid var(--rule-soft);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.page-wrapper .reprint.is-newsprint .reprint-body p:not([class]) {
  margin: 0 0 .55rem; font-size: .96rem; line-height: 1.52;
  text-indent: 1.1rem;      /* newsprint indents rather than spaces its paragraphs */
}
.page-wrapper .reprint.is-newsprint .reprint-body > p:first-of-type { text-indent: 0; font-size: 1rem; }
.reprint.is-newsprint .reprint-body > p:first-of-type::first-line { font-variant-caps: small-caps; letter-spacing: .02em; }
.reprint.is-newsprint .rq { break-inside: avoid; }

/* LISTING — the dealer/auction form */
.rc-source-meta { margin: 1.2rem 0 0; padding: 0; max-width: 44rem; }
.rc-source-meta > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rule-soft); }
.rc-source-meta dt { margin: 0; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--ink-muted); align-self: center; }
.rc-source-meta dd { margin: 0; font-family: var(--document); font-size: .96rem; line-height: 1.4; color: var(--ink); }
.page-wrapper .rc-source-body blockquote { border: 0; border-left: 2px solid var(--gold); max-width: 46rem; margin: 0; padding: .2rem 0 .2rem 1.6rem; }
.page-wrapper .rc-source-body blockquote p { margin: 0 0 1.05rem; }
.page-wrapper .rc-source-body blockquote ul { list-style: none; max-width: none; margin: .2rem 0 1.2rem; padding-left: 0; }
.page-wrapper .rc-source-body blockquote li { position: relative; margin: 0; padding: .34rem 0 .34rem 1.1rem; border-bottom: 1px solid var(--rule-soft); font-size: .95rem; line-height: 1.5; }
.page-wrapper .rc-source-body blockquote li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .45rem; height: 1px; background: var(--gold); }
.page-wrapper .rc-source-body blockquote li:last-child { border-bottom: 0; }

/* ---- SPEC LIST — a factory spec sheet: hairline rows with a gold tick ---- */
.page-wrapper .specs-section ul,
.page-wrapper .parts-group > ul { list-style: none; margin: 0 0 1.1rem; padding-left: 0; }
.page-wrapper .specs-section li {
  position: relative; margin: 0; padding: .42rem 0 .42rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1rem; line-height: 1.45;
}
.page-wrapper .specs-section li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .45rem; height: 1px; background: var(--gold); }
.page-wrapper .specs-section li:last-child,
.page-wrapper .parts-group > ul > li:last-child { border-bottom: 0; }
.page-wrapper .parts-group > ul { margin: 1.2rem 0 0; }
.page-wrapper .parts-group > ul > li { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); line-height: 1.5; }
.page-wrapper .parts-group > ul > li strong { font-weight: 600; }

/* ---- .is-transcription — LIGHT document marker (DDR-004 B5) -------------
   The verbatim owner's-handbook supplement was typographically identical to our OWN
   interpreted /about/equipment/ page, erasing the our-voice-vs-the-document line. This is
   NOT the full .reprint facsimile (Maeder restraint — it's a de-OCR'd transcription, and
   the part-kicker above it already labels it) — just a paper-2 ground, a left rule, and
   the transcribed VALUES (paragraphs, list items, the factory note) set in --document
   (Newsreader), so the factory's words read as reproduced rather than written by us. OUR
   structural labels — .specs-eyebrow, the #### sub-heads — stay grotesk; only the
   transcribed content itself moves. NO GOLD on the marker: gold is the FULL .reprint's
   signature, and this must read as a lighter, different treatment. */
/* NO SPECIAL BACKGROUND. A full paper-2 ground behind every spec section made the whole page a
   panel — and if everything is a special background, nothing is. The document register comes from
   the FACE (Newsreader on the transcribed values, below) plus the "Verbatim Transcription" kicker
   already labelling the block. A single hairline opens the reproduced section; no ground, no box. */
.is-transcription {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  margin: 1.8rem 0 2.4rem;
}
/* TWO COLUMNS of specifications, not one long stack — the author prefers it, and a spec list reads
   faster side by side. The sections carry break-inside:avoid, so multi-column flows them two-up
   without ever splitting a section across the gap. Collapses to one column when the page narrows. */
.is-transcription { column-count: 2; column-gap: 3.2rem; }
.is-transcription > .specs-section:first-of-type { margin-top: 0; }
@media (max-width: 760px) { .is-transcription { column-count: 1; } }
.is-transcription .specs-section > p:not(.specs-eyebrow),
.is-transcription .specs-section li,
.is-transcription .sidenote-body,
.is-transcription .sidenote-body p {
  font-family: var(--document);
}

/* ---- STANDFIRST (.lede) + the drop cap ---------------------------------- */
.page-wrapper .lede { max-width: 46rem; margin: 0 0 2.6rem; }
.page-wrapper .lede > p { color: var(--ink-muted); }
.page-wrapper .lede > p:first-of-type { font-size: 1.34rem; line-height: 1.55; font-weight: 500; color: var(--ink); }
.page-wrapper .lede > p:last-child { margin-bottom: 0; }

/* Float fallback first; browsers with `initial-letter` get a properly sunk cap. SERIF,
   because the body is Spectral — a grotesk initial reads as pasted on, and serif kerns the
   problem letters (L, A, T, W). The cap belongs to the LEDE, not to whichever container
   happens to wrap it: hooking it only to `.col-md-9 > p` and `.chapter-body > p` meant
   every reference page opened with no initial at all. */
.chapter-body > p:first-of-type::first-letter,
.page-wrapper .col-md-9 > p:first-of-type::first-letter,
.lede > p:first-of-type::first-letter,
.hub-intro-lede > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 600; color: var(--green);
  float: left; font-size: 3.9rem; line-height: .72;
  margin: .26rem .4rem -.05rem 0; padding: 0;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .chapter-body > p:first-of-type::first-letter,
  .page-wrapper .col-md-9 > p:first-of-type::first-letter,
  .lede > p:first-of-type::first-letter,
  .hub-intro-lede > p:first-of-type::first-letter {
    float: none; font-size: inherit; line-height: 1;
    margin: 0 .46rem 0 0; padding: 0;
    -webkit-initial-letter: 3; initial-letter: 3;
  }
}
.chapter-body > figure:first-child + p::first-letter { initial-letter: normal; float: none; font-size: inherit; }
.page-wrapper .col-md-9 > p:first-of-type,
.lede > p:first-of-type { font-size: 1.18rem; line-height: 1.5; font-weight: 400; }

/* ---- FIGURE SYSTEM ------------------------------------------------------
   ⚠ The `!important` gutter block is NOT redundant with the widths above it: the theme's
   styles.css fights these and only the higher-specificity rule wins. Do not merge them. */
.page-wrapper figure.imgfig { margin: .4rem 0 1.9rem; }
.page-wrapper figure.imgfig img { display: block; width: 100%; }
.page-wrapper figure.imgfig figcaption { max-width: none; }

.imgfig.xsmall { width: 10rem; }
.imgfig.small  { width: 15rem; }
.imgfig.medium { width: 21rem; }
.imgfig.large  { width: 28rem; }
.imgfig.xlarge { width: 34rem; }
.imgfig.full,
.imgfig.center { width: auto; max-width: var(--measure); display: block; margin: 2.6rem auto; float: none; }
.imgfig.right  { float: right; max-width: 44%; }
.imgfig.left   { float: left;  max-width: 44%; }

.page-wrapper figure.imgfig.left   { margin: .4rem 3rem 1.9rem 0 !important; }
.page-wrapper figure.imgfig.right  { margin: .4rem 0 1.9rem 3rem !important; }
.page-wrapper figure.imgfig.small  { width: 15rem !important; }
.page-wrapper figure.imgfig.medium { width: 21rem !important; }

.imgfig.framed img { border: 1px solid var(--rule); box-shadow: 0 12px 34px rgba(0,0,0,.20); }

/* cutout — objects shot on a white sweep must FLOAT on the paper, not sit in a white box
   pasted onto it. `multiply` drops the sheet-white ground into the page colour while
   preserving the object's own shadows. ⚠ NEVER combine with .framed. */
.imgfig.cutout img { mix-blend-mode: multiply; background: transparent; border: 0; box-shadow: none; padding: 0; }

/* bleed — escapes the column and the container. `100vw` includes the scrollbar, so this
   always overhangs by the scrollbar's width; `body { overflow-x: clip }` absorbs it. */
.imgfig.bleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); float: none; }
.imgfig.bleed img { width: 100%; }
.imgfig.bleed figcaption { max-width: var(--measure); margin: .7rem auto 0; padding: 0 1.5rem; }

/* ==== sidecaption — an integrated document exhibit, not a stranded float =======
   A tall period document (an advertisement, a scan) with a long caption, floated
   right against a short paragraph, leaves a dead half-page beside it and then a
   hard clear. This is the fix: the figure becomes a contained band — image on the
   left, its caption set BESIDE it and vertically centred, the whole thing clearing
   normally. The caption is part of the exhibit now, not an orphan under a tiny
   float, and no whitespace is stranded. The image still obeys the native cap. */
.imgfig.sidecaption {
  float: none !important; clear: both; width: auto !important; max-width: 52rem !important;
  display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1.6rem 2.2rem;
  align-items: center; margin: 2.6rem 0 !important;
}
.imgfig.sidecaption > a, .imgfig.sidecaption > img { grid-column: 1; margin: 0; display: block; }
.imgfig.sidecaption img { width: 100%; max-width: var(--cap); height: auto; }
.imgfig.sidecaption figcaption { grid-column: 2; margin: 0; max-width: none; align-self: center; font-size: .86rem; line-height: 1.55; }
@media (max-width: 680px) {
  .imgfig.sidecaption { grid-template-columns: 1fr; gap: .8rem; }
  .imgfig.sidecaption > a, .imgfig.sidecaption > img, .imgfig.sidecaption figcaption { grid-column: 1; }
}

.imgpair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 2.2rem 0 2.4rem; clear: both; }
.imgpair .imgfig { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 0 .6rem; }

/* ---- HERO (photographic) — only where a real photograph earns the screen. */
.page-title {
  position: relative; min-height: 46vh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  background-color: var(--ink); margin: 0;
}
.page-title::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,8,.86) 0%, rgba(12,10,8,.45) 45%, rgba(12,10,8,.15) 100%);
}
.page-title .container { position: relative; z-index: 2; }
.page-title .block { padding: 0 0 2.8rem; max-width: 60rem; }
.page-title .hero-eyebrow {
  --eb-size: .78rem; --eb-track: .3em;
  display: inline-block; margin: 0 0 1.1rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--gold);
}
.page-title .block h1 {
  font-family: var(--grotesk) !important;
  font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 6vw, 5rem); line-height: .95;
  color: #fff; margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.page-title .hero-dek {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.42rem); line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin: 1.2rem 0 0; max-width: min(34rem, 100%);
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* ============================================================================
   4. SURFACES
   ========================================================================== */

/* ---- HOME --------------------------------------------------------------- */
.home-hero { position: relative; min-height: 84vh; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; background-color: var(--ink); margin: 0; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,8,.88) 0%, rgba(12,10,8,.35) 55%, rgba(12,10,8,.55) 100%); }
.home-hero .container { position: relative; z-index: 2; }
.home-hero-block { max-width: 46rem; margin: 0 auto; }
.home-hero .hero-eyebrow { --eb-size: .82rem; --eb-track: .35em; display: inline-block; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gold); }
.home-hero-title { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(3.2rem, 12vw, 8rem); line-height: .9; color: #fff; margin: 0; text-shadow: 0 4px 32px rgba(0,0,0,.5); }
.home-hero-dek { font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.92); font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.5; margin: 1.4rem auto 0; max-width: 34rem; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.home-page { padding-top: 3.5rem; }
/* Front-door two-column: significance prose left, entry-point rail right. The rail is
   sticky so it stays in view as the (taller) prose column scrolls past on short pages. */
.home-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.home-intro { max-width: none; }
.home-nav { margin-top: 0; position: sticky; top: 2rem; }
.home-nav .part-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.home-nav .chapter-card { padding-block: 1rem; }
.home-nav .cc-dek { display: none; }
@media (max-width: 900px) {
  .home-columns { grid-template-columns: 1fr; gap: 2.6rem; }
  .home-nav { position: static; }
  .home-nav .cc-dek { display: block; }
}

/* ---- NAV (header) ------------------------------------------------------- */
.navigation .navbar-nav > li > a {
  font-family: var(--grotesk) !important;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem !important; font-weight: 600;
  color: var(--ink) !important;
}
.navigation .navbar-nav > li > a:hover,
.navigation .navbar-nav > li.dropdown:hover > a { color: var(--green) !important; }
.navigation .is-current > a { color: var(--green) !important; }
.navigation .is-current > a::after { content: ""; display: block; height: 2px; margin-top: .28rem; background: var(--gold); }
.navigation .navbar-nav .nav-caret,
.navigation .navbar-nav .dropdown-toggle .ion-ios-arrow-down { font-size: .7em; opacity: .5; margin-left: .2em; }

.navigation .navbar-nav .dropdown { position: relative; }
.navigation .navbar-nav .dropdown-menu {
  display: none; position: absolute; left: 0; right: auto; top: 100%;
  min-width: 23rem; max-width: 24rem; width: 24rem; z-index: 1000;
  background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  padding: .35rem 0; margin: 0; list-style: none;
}
.navigation .navbar-nav .dropdown:hover > .dropdown-menu,
.navigation .navbar-nav .dropdown.open > .dropdown-menu { display: block; }
.navigation .navbar-nav .dropdown-menu > li { border-bottom: 1px solid var(--rule-soft); }
.navigation .navbar-nav .dropdown-menu > li:last-child { border-bottom: 0; }
.navigation .navbar-nav .dropdown-menu > li > a {
  display: block; padding: .62rem 1.3rem;
  font-family: var(--grotesk) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--ink) !important; text-decoration: none;
  white-space: normal !important; overflow-wrap: anywhere; line-height: 1.25;
  transition: background .12s ease, padding-left .12s ease;
}
.navigation .navbar-nav .dropdown-menu > li > a:hover { background: rgba(11,92,46,.06); padding-left: 1.65rem; }
.navigation .navbar-nav .dropdown-menu .nav-chapter-label { --eb-size: .62rem; --eb-track: .16em; display: block !important; margin-bottom: .15rem; }
.navigation .navbar-nav .dropdown-menu .nav-chapter-title { display: block !important; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.2; white-space: normal !important; overflow-wrap: anywhere; }
.navigation .navbar-nav .dropdown-menu > li > a:hover .nav-chapter-title { color: var(--green); }
.dropdown-menu-plain li a { display: block; }

/* ---- FOOTER — the book-end ---------------------------------------------- */
.footer { background: #17140f; color: #cdc7ba; border-top: 3px solid var(--gold); font-family: var(--grotesk); margin-top: 4rem; padding: 3.6rem 0 2rem; }
.footer .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 2.5rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .footer-wordmark { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.7rem; line-height: 1; color: #fff; }
.footer .footer-wordmark em { font-style: normal; color: var(--gold); }
.footer .footer-tagline { font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: #a49e92; max-width: 30rem; margin: 1.1rem 0 1.2rem; }
.footer .footer-imprint { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: #8a8478; margin: 0; }
.footer .footer-imprint a { color: var(--gold) !important; text-decoration: none; }
.footer .footer-imprint a:hover { color: #fff; }
.footer .footer-col { display: flex; flex-direction: column; }
.footer .footer-col a { color: #cdc7ba !important; text-decoration: none; font-size: .95rem; letter-spacing: 0; text-transform: none; padding: .32rem 0; transition: color .15s; }
.footer .footer-col a:hover { color: #fff !important; }
.footer .footer-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; padding-top: 1.6rem; }
.footer .copyright { font-size: .82rem; color: #8a8478; margin: 0; }
.footer .copyright a { color: #a49e92; text-decoration: underline; }
.footer .copyright a:hover { color: var(--gold); }
.footer .footer-note { font-size: .82rem; color: #6f695e; margin: 0; font-style: italic; font-family: var(--serif); }
.footer-brand, .footer-connect { min-width: 0; }

.footer-subscribe { margin-top: 1.5rem; }
.footer-subscribe .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.footer-subscribe .sub-row { display: flex; gap: .5rem; }
.footer-subscribe input[type=email] { flex: 1; min-width: 0; background: #221e18; border: 1px solid rgba(255,255,255,.18); color: #f2efe7; padding: .6rem .75rem; font-family: var(--grotesk); font-size: .92rem; border-radius: 2px; }
.footer-subscribe input[type=email]::placeholder { color: #7a746a; }
.footer-subscribe input[type=email]:focus { outline: none; border-color: var(--gold); }
.footer-subscribe button { background: var(--gold); color: #17140f; border: 0; padding: .6rem 1rem; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.footer-subscribe button:hover { background: #c99a3a; }

/* ---- STORY: the hub ----------------------------------------------------- */
.story-hub .hub-intro {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 4rem; align-items: start; margin-bottom: 3.5rem;
}
.story-hub .hub-intro-lede { max-width: 40rem; }
.story-hub .hub-intro-lede p:first-of-type { font-size: 1.5rem; line-height: 1.5; font-weight: 500; color: var(--ink); }
@media (max-width: 900px) {
  .story-hub .hub-intro { grid-template-columns: 1fr; gap: 2rem; }
}
.story-part { margin: 0 0 3.5rem; }
.part-head { border-bottom: 3px solid var(--ink); padding-bottom: .55rem; margin-bottom: .2rem; }

/* a section title carrying its OWN rule must not also get the default h2 green tick */
.page-wrapper h2.part-title,
.page-wrapper .group-head h2,
.page-wrapper h2.reg-contribute-title,
.page-wrapper .rc-sec-title,
.page-wrapper h2.rc-sec-title {
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: .1rem 0 0; padding-top: 0;
  text-transform: uppercase; letter-spacing: -.01em;
}
.page-wrapper h2.part-title::before,
.page-wrapper .group-head h2::before,
.page-wrapper h2.reg-contribute-title::before,
.page-wrapper .rc-sec-title::before { content: none; display: none; }

/* right-rail entry card on the story hub — a column, not an inline bar, so it fills
   the space beside the lede and carries the first chapter's dek */
.hub-start {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  margin: .4rem 0; padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--green);
  background: var(--paper-2);
  text-decoration: none !important;
  transition: border-color .15s, background .15s, transform .15s;
}
.hub-start:hover { background: var(--paper); border-left-color: var(--gold); transform: translateX(2px); }
.hub-start-title { font-family: var(--grotesk); font-weight: 700; font-size: 1.28rem; line-height: 1.2; color: var(--ink); }
.hub-start:hover .hub-start-title { color: var(--green); }
.hub-start-dek { font-family: var(--serif); font-size: .96rem; line-height: 1.5; color: var(--ink-muted); }
.hub-start-arrow { margin-top: .3rem; font-family: var(--grotesk); font-weight: 700; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--green); }

/* ==== driver cards — the People page's drivers, given faces ==================
   The drivers are the faces of the program, so they lead the roster as cards
   rather than bullets: a portrait where the registry holds one, a monogram where
   it does not (never a fake face). Everyone else on the page stays a list. */
.driver-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.6rem; margin: 1.8rem 0 2.6rem;
}
.driver-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); overflow: hidden;
}
.driver-card .dc-photo {
  margin: 0; aspect-ratio: 4 / 3; position: relative; background: var(--paper-2);
}
.driver-card .dc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.driver-card .dc-credit {
  position: absolute; right: .4rem; bottom: .4rem;
  font-family: var(--grotesk); font-size: .58rem; letter-spacing: .02em;
  color: #f2efe7; background: rgba(0,0,0,.45); padding: .1rem .35rem; border-radius: 2px;
}
.driver-card .dc-photo--none {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--green) 8%, var(--paper-2));
}
.driver-card .dc-monogram {
  font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); text-transform: uppercase; letter-spacing: .02em;
  text-align: center; padding: 0 .6rem; line-height: 1.1;
  color: color-mix(in srgb, var(--green) 55%, var(--paper-2));
}
.driver-card .dc-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; }
.driver-card .dc-name { font-family: var(--grotesk); font-weight: 700; font-size: 1.06rem; color: var(--ink); margin: 0; }
.driver-card .dc-meta { font-family: var(--grotesk); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green-dk); margin: 0; }
.driver-card .dc-bio { font-family: var(--serif); font-size: .92rem; line-height: 1.5; color: var(--ink-muted); margin-top: .25rem; }
.driver-card .dc-bio p { margin: 0 0 .5rem; }
.driver-card .dc-bio p:last-child { margin-bottom: 0; }
.driver-card .dc-bio a { color: var(--green); }

/* ---- STORY: the chapter ------------------------------------------------- */
.chapter-page { padding-top: 3rem; }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3.5rem; align-items: start; }
.chapter-main { min-width: 0; }
.chapter-end { width: 100%; max-width: var(--measure); margin: 2.8rem 0 0; height: 1px; background: var(--rule); position: relative; }
.chapter-end::after { content: ""; position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.chapter-sources {
  max-width: var(--measure); margin-top: 2rem;
  font-family: var(--grotesk) !important;
  font-size: .76rem !important; line-height: 1.6 !important;
  color: var(--ink-muted) !important;
}

.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-top: 2px solid var(--ink); margin-top: 3.5rem; }
.cnav { background: var(--paper); padding: 1.6rem 1.7rem; text-decoration: none !important; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dir dir" "num title"; gap: .35rem .95rem; align-items: center; transition: background .15s ease; }
.cnav-empty { background: var(--paper); }
.cnav:hover { background: rgba(11,92,46,.06); }
.cnav-title { grid-area: title; font-family: var(--grotesk); font-weight: 700; font-size: 1.12rem; color: var(--ink); line-height: 1.15; }
.cnav:hover .cnav-title { color: var(--green); }
.cnav-next { text-align: right; grid-template-columns: 1fr auto; grid-template-areas: "dir dir" "title num"; }
.cnav-prev, .cnav-alt { display: inline-flex; flex-direction: column; gap: .15rem; }
.cnav-prev { text-align: left; }
.cnav-alt  { text-align: right; }
/* ⚠ PROTECTED — DO NOT REDESIGN. The author: "LOVE the chassis navigation on the bottom of each
   registry page." It walks the register chassis by chassis, which is what turns 25 separate pages
   into one catalogue raisonné. Do not restyle it as a side effect of other work.
   See docs/DESIGN-SYSTEM.md, "PROTECTED — do not redesign these". */
.chassis-nav { margin-top: 3.2rem; }

/* ---- RACING: the hub ---------------------------------------------------- */
/* the racing overview reads as SPREADS — the width and the lean come from .spread, so this
   only has to say where it sits and what escapes the measure. The old rule forced
   `max-width: 100%` onto the prose, which defeated the global measure clamp and let the
   lines run to ~90 characters. Deleted: prose is back on the measure. */
.racing-hub .content-body { margin: 2.5rem 0 0; }
.racing-hub .content-body > p:first-of-type { font-size: 1.34rem; line-height: 1.5; font-weight: 500; color: var(--ink); }
.racing-hub .content-body table { max-width: 100%; }
.racing-hub .content-body .imgfig.bleed { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }

/* ---- SPREAD — the asymmetric page ---------------------------------------
   THE MEASURE NEVER CHANGES. ~68 characters is the whole point of the design, so we do not
   widen the line — WE MOVE THE COLUMN, and hand the leftover width back as a real margin.

     .spread       prose hangs LEFT, the margin is on the right
     .spread-flip  mirrored — the margin is on the LEFT and the prose flows to its right

   The margin is a PLACE, not empty space: .sidenote, .reprise and .margin-note float into
   it. Alternate spreads down a long page and the book gets a spine instead of a centreline.
   Without a .spread ancestor a sidenote has nowhere to go and simply eats the measure — which
   is why the sidenote component was barely usable before this existed. */
.spread { max-width: 55rem; margin-left: 0; margin-right: auto; }   /* 36 measure + 3 gutter + 16 margin */
.spread-flip { margin-left: auto; margin-right: 0; }

.spread .sidenote,
.spread .margin-note,
.spread .reprise { float: right; clear: right; width: 16rem; max-width: 16rem; margin: .4rem 0 1.6rem 3rem; }
.spread-flip .sidenote,
.spread-flip .margin-note,
.spread-flip .reprise { float: left; clear: left; margin: .4rem 3rem 1.6rem 0; }

/* MARGIN NOTE — the quietest marginal component. Period detail, a figure worth knowing, a
   first-hand quote that shouldn't interrupt the sentence. Louder alternatives, ascending:
   .sidenote (gold-topped panel), .reprise (breaks the column). */
.margin-note { border-left: 2px solid var(--rule); padding-left: 1rem; }
.margin-note-label { display: block; margin-bottom: .4rem; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase; color: var(--ink-muted); font-size: .6rem; letter-spacing: .12em; }
.margin-note-body { font-family: var(--serif); font-size: .9rem; line-height: 1.55; color: var(--ink-muted); }
.page-wrapper .margin-note-body p { font-size: .9rem; line-height: 1.55; color: var(--ink-muted); margin: 0 0 .6rem; max-width: none; }
.page-wrapper .margin-note-body p:last-child { margin-bottom: 0; }
.margin-note-cite { display: block; margin-top: .5rem; font-family: var(--grotesk); font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* ---- RACING: THE CAREER RECORD — ONE GRAPHIC, ONE SHARED YEAR AXIS ------
   Dots (every race, in order) sit DIRECTLY ABOVE the ballast (IMSA's minimum weight), on the
   same axis. That adjacency IS the argument: the gold thins exactly as the bars rise. Do not
   put these side by side again — two graphics that share no coordinate cannot make a claim,
   they can only assert one. */
.career { margin: 3.4rem 0; padding: 2.2rem 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.career-head { margin-bottom: 1.6rem; }
.career-line { font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ink-muted); margin: .45rem 0 0; max-width: 46rem; }
.career-line b { font-family: var(--grotesk); font-weight: 800; font-size: 1.35rem; color: var(--green); font-variant-numeric: tabular-nums; }
.career-line .lg { display: inline-flex; align-items: center; gap: .3rem; margin-left: .9rem; font-family: var(--grotesk); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.career-line .lg .dot-race { position: static; }
.career-foot { font-family: var(--grotesk); font-size: .72rem; line-height: 1.6; color: var(--ink-muted); margin: 1.3rem 0 0; max-width: 52rem; }
.career-gap { font-family: var(--grotesk); font-weight: 700; color: var(--red); }

.tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; }
/* gap tuned so all nine columns — 1990 to the 2000 coda — fit the track without clipping */
.tl { list-style: none; display: flex; align-items: flex-end; gap: .72rem; margin: 0; padding: 0; max-width: none; }
.tl-col { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0; min-width: 0; }

/* ONE UNBROKEN ROW. Order is the only dimension this data has. NEVER wrap or grid these —
   a 4-wide brick puts race 5 underneath race 1 and destroys chronology. Wrap BETWEEN seasons. */
.tl-dots { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: .2rem; margin: 0; padding: 0; min-height: 14px; max-width: none; }

/* the plot: bars share one baseline, so a bar's height is comparable across seasons */
.tl-plot { position: relative; display: block; width: 100%; height: 6.5rem; border-bottom: 1px solid var(--rule); }
.tl-bar { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(to top, var(--green-dk), var(--green)); border-radius: 1px 1px 0 0; }
.tl-bar.is-unknown { height: 100%; background: none; border: 1px dashed var(--rule); border-bottom: 0; }
.tl-fig { position: absolute; left: 0; bottom: 0; transform: translateY(-.2rem); width: 100%; text-align: center; font-family: var(--grotesk); font-weight: 700; font-size: .6rem; color: var(--ink); font-variant-numeric: tabular-nums; z-index: 1; }
/* 1997-99: the silence, drawn */
.tl-elide { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-bottom: 2px dotted var(--rule); }
.tl-col.is-elision { opacity: .7; }
.tl-col.is-elision .tl-plot { border-bottom-color: transparent; }
.tl-year { font-family: var(--grotesk); font-weight: 700; font-size: .72rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-sub { font-family: var(--grotesk); font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.tl-col.is-norecord .tl-sub { color: var(--red); }

/* MARK HIERARCHY — size is a REDUNDANT channel, so rank survives greyscale, print and
   colour-blindness. A DNF is RED because it is a different KIND of event, not a worse finish;
   drawing it as a fainter ring was a category error and failed WCAG 1.4.11 at ~1.1:1. */
.dot-race { position: relative; flex: none; border-radius: 50%; margin: 0; }
.dot-race            { width: 7px;  height: 7px;  border: 1px solid var(--ink-muted); background: transparent; }
.dot-race.is-out     { width: 7px;  height: 7px;  border: 1px dashed var(--red); background: transparent; }
.dot-race.is-podium  { width: 10px; height: 10px; border: 0; background: var(--green); }
.dot-race.is-win     { width: 14px; height: 14px; border: 0; background: var(--gold); box-shadow: 0 0 0 2px rgba(169,130,42,.20); }
.dot-tip { position: absolute; bottom: calc(100% + .45rem); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .25rem .5rem; border-radius: 2px; background: var(--ink); color: var(--paper); font-family: var(--grotesk); font-size: .62rem; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5; }
.dot-race:hover .dot-tip { opacity: 1; }

/* 1990, SCCA — a DIFFERENT rulebook, deliberately off the IMSA axis */
.ballast-aside { margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); max-width: 34rem; }
.ballast-aside-line { font-family: var(--serif); font-size: .92rem; line-height: 1.55; color: var(--ink-muted); margin: .4rem 0 .7rem; }
.ballast-aside-line b { font-family: var(--grotesk); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ballast-aside-bar { display: flex; height: .55rem; width: 100%; max-width: 18rem; border-radius: 1px; overflow: hidden; }
.ballast-aside-base { flex: 0 0 79.4%; background: var(--green); }
.ballast-aside-raise { flex: 1 1 auto; background: repeating-linear-gradient(135deg, var(--red) 0 2px, rgba(165,52,42,.35) 2px 5px); }

/* the season index — every season is one square. 1997-99 are real gaps in the record, so
   they get inert dashed squares: the shape of the story — factory years, silence,
   privateer return — is visible at a glance. */
.season-index { margin: 0 0 3.5rem; }
.season-cards { --card-min: 11rem; margin: 1.2rem 0 2.6rem; }
.season-era { margin: 0 0 2rem; }
.season-era:last-child { margin-bottom: 0; }
.season-card {
  position: relative;
  display: flex; flex-direction: column; gap: .3rem;
  aspect-ratio: 1 / 1; padding: 1.05rem;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  text-decoration: none !important; overflow: hidden;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.season-card:hover { border-color: var(--green); background: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.10); }
  /* NO LINE CLAMP. A clamp silently truncates, and this project's hard rule is NO DATA LOSS —
     a component must never quietly eat the end of a sentence. If a highlight is too long,
     shorten the WORDS, in the data, where a human can see it happen. */
.season-card:hover .sc-highlight { color: var(--ink); }
.sc-arrow { margin-top: auto; align-self: flex-start; font-family: var(--grotesk); font-size: .9rem; color: var(--green); opacity: 0; transition: opacity .15s, transform .15s; }
.season-card:hover .sc-arrow { opacity: 1; transform: translateX(3px); }

/* the silent years — inert, unlinked, deliberately quiet. Their numeral is a ghost too,
   but stroked in the rule colour rather than gold: silence is not a result. */
.season-card.is-gap { background: var(--paper-2); border-style: dashed; border-color: var(--rule-soft); cursor: default; pointer-events: none; }
.season-card.is-gap .sc-year { color: transparent; -webkit-text-stroke: 1.2px var(--rule); opacity: .9; }
.sc-gap-mark { font-family: var(--grotesk); color: var(--ink-muted); opacity: .45; font-size: 1.1rem; }

/* THE TITLE SEASON. 1992 is the only championship the X180R ever took, and its card is the
   ONE card on the site that reverses out: a deep Lotus-green field with the year struck
   solid gold. Against a grid of pale cards carrying hollow gold outlines, the champion is
   the only solid, the only dark, and the only FILLED numeral. That contrast IS the design,
   and it is the sole licensed exception to the ghost-numeral rule. Data-driven off
   `champion:` in data/seasons.yaml — nothing is hard-coded to 1992.
   ⚠ The title claimed is the DRIVERS' championship (Doc Bundy). No Manufacturers' title is
   asserted anywhere on this site; the record does not support one. */
.season-card.is-champion { background: var(--green-dk); border-color: var(--green-dk); box-shadow: 0 14px 34px rgba(8,65,34,.30); }
.season-card.is-champion:hover { background: #06331b; border-color: var(--gold); box-shadow: 0 18px 44px rgba(8,65,34,.40); transform: translateY(-3px); }
.season-card.is-champion .sc-year { color: var(--gold); -webkit-text-stroke: 0; font-size: 2.3rem; }
.season-card.is-champion:hover .sc-year { color: #f3d98a; }
.season-card.is-champion .sc-series    { color: rgba(243,217,138,.75); }
.season-card.is-champion .sc-highlight { color: rgba(255,255,255,.82); }
.season-card.is-champion:hover .sc-highlight { color: #fff; }
.season-card.is-champion .sc-arrow { color: var(--gold); }
.sc-champion { --eb-size: .56rem; --eb-track: .13em; --eb-weight: 800; order: -1; margin-bottom: .15rem; padding-right: 1.5rem; line-height: 1.25; }
.season-card.is-champion .sc-champion {
  display: flex; align-items: center; gap: .4rem;
  padding-right: 0; color: var(--gold);
  font-size: .58rem; letter-spacing: .14em;
  padding-bottom: .55rem; margin-bottom: .15rem;
  border-bottom: 1px solid rgba(243,217,138,.28);
}
.sc-laurel { position: absolute; top: .75rem; right: .9rem; width: 1.05rem; height: 1.05rem; color: var(--gold); }
.sc-laurel svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.season-card.is-champion .sc-laurel { position: static; width: .85rem; height: .85rem; color: var(--gold); flex: none; }

/* The square is a MINIMUM, not a hard height. It used to be `aspect-ratio: 1/1` +
   `overflow: hidden`, which meant the champion card — which carries one element more than
   its siblings (the laurel banner) — clipped its own sentence at the bottom edge. Making
   only the champion `auto` cannot work: it is a grid item, so `align-self: stretch` pulls
   it back to the row height its square siblings set. Cards now size to their content and
   the row stretches to the tallest, so the grid stays even and nothing can clip. */
/* THE CARDS ARE SQUARES. An earlier pass abandoned the square (`aspect-ratio: auto`) because the
   champion card carries one element more than its siblings — the laurel — and was clipping its own
   sentence at the bottom edge. But the answer to "the text does not fit" is not to abandon the
   shape, and it is certainly not to CLAMP the text: a clamp silently eats the end of a sentence,
   and this project's hard rule is NO DATA LOSS.
   The answer is to make the text FIT. The square is restored with `overflow: visible` and no clamp,
   so if a card ever does overrun it GROWS — visibly, where a human will see it and shorten the
   words in data/seasons.yaml. A card that breaks its own shape is a bug report you can see. */
.season-card { aspect-ratio: 1 / 1; overflow: visible; }

/* ---- RACING: the season page -------------------------------------------- */
.season-head { margin: 0 0 2.4rem; max-width: var(--measure); }
.season-head-badge { display: flex; align-items: center; gap: .65rem; padding-bottom: .7rem; border-bottom: 2px solid var(--gold); }
.season-flag { width: 1.6rem; height: 1.5rem; color: var(--gold); flex: none; }
.season-head-highlight { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--green-dk); margin: 1rem 0 0; }

/* THE SEASON TABLE. Bold marks OUR CAR — NOT a result — and must never wear the gold
   badge. Its cells are `nowrap` so a lap time or a VIN can never break, which is exactly
   why the `table` shortcode wraps every table in a `.table-scroll` box. */
.season-body table.table { font-size: .96rem; }
.season-body table.table td { white-space: nowrap; }
.season-body table.table td:last-child { white-space: normal; }
.season-body table.table td strong { color: var(--green-dk); font-weight: 700; }

/* THE CHAMPIONSHIP STANDINGS — compact, because it carries a per-round grid: five identity
   columns, then one narrow equal-width column per round, ruled off from each other so a
   driver's season reads across as a row of results. */
.page-wrapper table.table.standings { font-size: .84rem; }
.page-wrapper table.table.standings thead th { padding: .5rem .5rem; font-size: .6rem; letter-spacing: .06em; }
.page-wrapper table.table.standings tbody td { padding: .42rem .5rem; }
.page-wrapper table.table.standings thead th:nth-child(n+6),
.page-wrapper table.table.standings tbody td:nth-child(n+6) {
  width: 3.1rem; text-align: center; white-space: nowrap;
  border-left: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
  padding-left: .3rem; padding-right: .3rem;
}
.page-wrapper table.table.standings thead th:nth-child(6) { border-left-color: rgba(255,255,255,.25); }
.page-wrapper table.table.standings tbody td:nth-child(-n+5) { white-space: normal; }
.page-wrapper table.table.standings tbody td:nth-child(5) { font-size: .8rem; color: var(--ink-muted); }

/* ---- RACING: the season results ---------------------------------------- */
.season-results { margin: 3rem 0 1rem; }
.sr-head { margin-bottom: 1.6rem; }
.sr-champion { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-muted); margin: .3rem 0 0; max-width: 42rem; }
.sr-series { margin-top: 2.4rem; }
.sr-series-name {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-family: var(--grotesk); font-size: 1.05rem; font-weight: 800;
  color: var(--green-dk); margin: 0 0 .2rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--ink);
}
.sr-series-note { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-muted); margin: .6rem 0 0; max-width: var(--measure); }
.sr-races { display: flex; flex-direction: column; }
.sr-race { padding: 1.2rem 0 1rem; border-bottom: 1px solid var(--rule-soft); }
.sr-race:last-child { border-bottom: 0; }
.sr-race-head { display: flex; align-items: baseline; gap: .7rem; }
.sr-round {
  flex: none;
  font-family: var(--grotesk); font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; color: var(--gold);
  border: 1px solid rgba(169,130,42,.45); border-radius: 2px;
  padding: .1rem .32rem; font-variant-numeric: tabular-nums;
}
.sr-venue { flex: 1 1 auto; margin: 0; font-family: var(--grotesk); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.sr-date { flex: none; font-family: var(--grotesk); font-size: .74rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-meta { font-family: var(--grotesk); font-size: .7rem; letter-spacing: .04em; color: var(--ink-muted); margin: .25rem 0 .7rem; }
.sr-entries { list-style: none; margin: 0; padding: 0; max-width: none; }
.sr-entry {
  display: grid;
  grid-template-columns: 3.1rem minmax(8rem, 12rem) minmax(0, 1fr);
  align-items: baseline; gap: .1rem .8rem;
  padding: .34rem 0; border-top: 1px solid var(--rule-soft);
  max-width: none;
}
.sr-entry:first-child { border-top: 0; }
.sr-driver { grid-column: 2; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; min-width: 0; }
.sr-dv { font-family: var(--serif); font-size: .98rem; color: var(--ink); white-space: nowrap; border-bottom: 2px solid var(--dc, transparent); padding-bottom: 1px; }
.sr-slash { color: var(--ink-muted); font-size: .8rem; }
.sr-facts { grid-column: 3; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sr-car, .sr-grid, .sr-entrant, .sr-vin, .sr-tag { font-family: var(--grotesk); font-size: .68rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-car { font-weight: 700; color: var(--ink); }
.sr-entrant { font-style: normal; }
.sr-vin { letter-spacing: .03em; }
.sr-tag { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.sr-figs { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .1rem; }
.sr-fig { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.sr-fig-v { font-family: var(--grotesk); font-size: .74rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sr-fig-s { font-family: var(--grotesk); font-size: .66rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sr-fig-best .sr-fig-v { color: var(--green-dk); font-weight: 700; }
.sr-note { grid-column: 2 / -1; font-family: var(--serif); font-size: .88rem; line-height: 1.45; color: var(--ink-muted); margin-top: .15rem; max-width: 46rem; }
.sr-noentry { font-family: var(--serif); font-style: italic; color: var(--ink-muted); margin: .4rem 0 0; }

/* ---- RACING: final standings (list form) -------------------------------- */
.season-standings { margin-top: 2.6rem; }
.st-sub, .st-sub-inline, .st-note { font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--ink-muted); margin: 0 0 .8rem; max-width: 42rem; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; align-items: start; }
.st-table { min-width: 0; }
.st-rows { list-style: none; margin: .6rem 0 0; padding: 0; }
.st-row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: baseline; gap: .6rem; padding: .34rem 0; border-top: 1px solid var(--rule-soft); }
.st-name { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.st-nm { font-family: var(--serif); font-size: .98rem; color: var(--ink); }
.st-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--rule); transform: translateY(-.2rem); min-width: .8rem; }
.st-pts { font-family: var(--grotesk); font-size: .82rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-nopoints { color: var(--ink-muted); font-weight: 400; }
.st-unranked { font-family: var(--serif); font-size: .92rem; color: var(--ink-muted); }
.st-trunc { font-style: italic; }

/* ---- RACING: standings ROUND STRIP ---------------------------------------
   R1..R8, one fixed-width cell per round, aligned down the whole table so the season
   reads as a SHAPE (a run of gold, a mid-season dash) rather than as prose. Same colour
   language as the dot rail in racing-career.html and the .badge component — a reader who
   has learned one must not have to learn a second vocabulary.
       .rd-win  gold, filled    — a win
       .rd-pod  green, TINTED   — a podium (only a WIN is filled)
       .rd-fin  neutral ink     — a finish outside the podium
       .rd-out  dashed red      — did not start / did not score
   GOLD ONLY EVER MEANS A RESULT.

   ALIGNMENT. `.st-table.has-rounds` carries `--rounds: N` (the widest row's round count).
   `.st-rounds` uses it for `repeat(var(--rounds), var(--rd-w))` — cells of one EXPLICIT
   width, so a cell's size depends only on its POSITION, never on the value string
   ("8 (10 OA)" occupies exactly the same box as "1"). Because explicit fixed tracks size
   the grid whether or not it has children, `.st-rounds.is-absent` (no `.rd` inside) still
   reserves the identical footprint — an absent strip and a strip of dashes must not look
   alike, and the row must not jump sideways because one driver lacks a strip.

   THE HEADER. `.st-head`/`.rd-h` (aria-hidden — decorative only) is the ONE visible R1…R8
   row, right-aligned to match `.st-rounds`' own right edge in every row below it. The
   per-cell `.rd-k` stays in the accessibility tree in every cell (screen readers get "R1"
   on every value, never just once) but is visually hidden on wide screens where the real
   header already says it; it reappears once the strip reflows on a phone, because at that
   point there is no longer one shared header for it to defer to. */
.st-grid:has(.st-table.has-rounds) { grid-template-columns: minmax(0, 1fr); }

.st-table.has-rounds { --rd-w: 2.75rem; }
.st-table.has-rounds .st-row { grid-template-columns: 1.9rem minmax(0, 1fr) auto auto; }
/* the strip claims real width from the name column — let the secondary team/car line
   wrap onto its own line before the driver's own name ever breaks mid-word */
.st-table.has-rounds .st-nm { flex-shrink: 0; white-space: nowrap; }
.st-table.has-rounds .st-sub { min-width: 0; }

.st-head { display: flex; justify-content: flex-end; margin: 1rem 0 .3rem; }
.st-head-rounds { display: grid; grid-template-columns: repeat(var(--rounds), var(--rd-w)); column-gap: .3rem; }
.rd-h {
  text-align: center; font-family: var(--grotesk); font-weight: 700; font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: .3rem; border-bottom: 2px solid var(--ink);
}

.st-rounds {
  display: grid;
  grid-template-columns: repeat(var(--rounds), var(--rd-w));
  column-gap: .3rem;
}

.rd {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .2rem .15rem;
  border-radius: 3px;
  background: var(--paper-2);
}
.rd-k, .visually-hidden {
  /* visually hidden, not display:none — content stays for a screen reader even where
     the sighted layout supplies the same information some other way (an icon, a
     ghost numeral, a shared header row) */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rd-v {
  display: block; width: 100%; text-align: center;
  font-family: var(--grotesk); font-size: .72rem; line-height: 1.15;
  color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: normal; overflow-wrap: break-word;   /* "8 (10 OA)" wraps, never clips */
}

.rd-win           { background: var(--gold); }
.rd-win  .rd-v    { color: #17140f; font-weight: 700; }
.rd-pod           { background: rgba(11,92,46,.10); box-shadow: inset 0 0 0 1px rgba(11,92,46,.42); }
.rd-pod  .rd-v    { color: var(--green-dk); font-weight: 700; }
.rd-fin  .rd-v    { color: var(--ink); }

/* THREE OUTCOMES THAT ARE NOT THE SAME FACT. They used to share one dashed-red mark:
     rd-skip  "-"    never contested — a faint absence, no border, no alarm
     rd-dnf   "DNF"  retired         — dashed red, the value struck through
     rd-nc    "NC"   not classified  — a neutral grey ring; entered, but off the sheet
   rd-out stays as a defensive fallback for any other non-numeric string. */
.rd-skip          { background: transparent; }
.rd-skip .rd-v    { color: var(--ink-muted); opacity: .55; }
.rd-dnf {
  background: transparent; border: 1px dashed var(--red);
}
.rd-dnf  .rd-v    { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1px; }
.rd-nc {
  background: transparent; box-shadow: inset 0 0 0 1px var(--rule);
}
.rd-nc   .rd-v    { color: var(--ink-muted); }
.rd-out {
  background: transparent; border: 1px dashed var(--red);
}
.rd-out  .rd-v    { color: var(--red); }

@media (max-width: 700px) {
  /* No room for a fixed multi-round strip beside pos/name/pts — drop it to its own
     full-width line below, let it wrap, and give every cell its label back: once the
     strip reflows there is no longer one shared header row for it to defer to. */
  .st-table.has-rounds .st-row {
    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
    grid-template-areas: "pos name pts" "rounds rounds rounds";
    row-gap: .5rem;
  }
  .st-pos  { grid-area: pos; }
  .st-name { grid-area: name; }
  .st-pts  { grid-area: pts; }
  .st-rounds {
    grid-area: rounds; grid-template-columns: none;
    display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  }
  .st-head { display: none; }
  .rd-k {
    position: static; width: auto; height: auto; margin: 0 0 .15rem; overflow: visible;
    clip: auto; white-space: normal; display: block; text-align: center;
    font-family: var(--grotesk); font-weight: 700; font-size: .58rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  }
  .rd { flex: 0 0 3.4rem; }
}

/* ---- RACING: season-viz sparklines -------------------------------------- */
.season-viz {
  --sv-surface: var(--paper) !important;
  margin: 2.5rem 0 2rem;
  display: block; float: none !important; clear: both;
  width: 100%; max-width: 100%;
}
.season-viz-cap { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1rem; }
.season-viz-sub { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--ink-muted); }
.season-viz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.season-viz-svg { display: block; width: 100%; height: auto; max-width: 780px; min-width: 540px; }
.season-viz .sv-podium { fill: var(--green); opacity: .06; }
.season-viz .sv-grid { stroke: var(--rule-soft); stroke-width: 1; }
.season-viz .sv-axis, .season-viz .sv-tick { stroke: var(--rule); stroke-width: 1; }
.season-viz .sv-lane-rule { stroke-dasharray: 2 3; }
.season-viz .sv-ylabel, .season-viz .sv-xlabel { font-family: var(--grotesk); fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.season-viz .sv-ylabel { font-size: 9px; font-weight: 600; }
.season-viz .sv-xlabel { font-size: 9px; }
.season-viz .sv-lane-label { font-weight: 700; letter-spacing: .03em; }
.season-viz .sv-zone5 { fill: var(--green); opacity: .035; }
.season-viz .sv-zone5-rule { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 3; }
.season-viz .sv-zone5-label { font-family: var(--grotesk); font-size: 8px; font-weight: 700; letter-spacing: .12em; fill: var(--ink-muted); opacity: .8; }
.season-viz .sv-colrule { stroke: var(--rule-soft); stroke-width: 1; }
.season-viz .sv-lane-band { fill: var(--red); opacity: .035; }
.season-viz .sv-round { font-family: var(--grotesk); font-size: 8px; font-weight: 800; letter-spacing: .06em; fill: var(--gold); }
.season-viz .sv-venue { font-family: var(--grotesk); font-size: 9px; font-weight: 700; fill: var(--ink); letter-spacing: .01em; }
.season-viz .sv-xdate { font-family: var(--grotesk); font-size: 8px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.season-viz .sv-driver { --dc: var(--ink-muted); }
.season-viz .sv-line { fill: none; stroke: var(--dc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.season-viz .sv-dot { fill: var(--dc); stroke: var(--sv-surface); stroke-width: 1.2; }
.season-viz .sv-dot-podium { stroke-width: 1.4; }
.season-viz .sv-dot-ret { fill: var(--sv-surface); stroke: var(--dc); stroke-width: 1.6; }
.season-viz .sv-pole { fill: none; stroke: var(--dc); stroke-width: 1; opacity: .45; }
.season-viz .sv-lane-mark { fill: var(--dc); stroke: var(--sv-surface); stroke-width: 1; opacity: .9; }
.season-viz-legend { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.15rem; }
.season-viz-legend-item { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--grotesk); font-size: .82rem; color: var(--ink); }
.season-viz-swatch { width: 18px; height: 4px; border-radius: 2px; background: var(--dc); flex: none; }
.season-viz-car { color: var(--ink-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.season-viz-name { font-family: var(--grotesk); font-size: .82rem; color: var(--ink); }
.season-viz .sv-series-name, .sv-series-name { font-family: var(--grotesk); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 1.4rem 0 .5rem; }
.season-viz-key {
  list-style: none; margin: .75rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-family: var(--grotesk); font-size: .72rem; color: var(--ink-muted);
}
.season-viz-key li { display: inline-flex; align-items: center; gap: .35rem; }
.season-viz-key svg { width: 14px; height: 12px; overflow: visible; }
.season-viz-key circle, .season-viz-key rect { fill: var(--ink-muted); }
.season-viz-key .k-ret { fill: var(--paper); stroke: var(--ink-muted); stroke-width: 1.4; }
.season-viz-key .k-lane { fill: var(--ink-muted); }
.season-viz-key .k-pole-o { fill: none; stroke: var(--ink-muted); stroke-width: 1; opacity: .5; }

/* ---- REGISTRY: the hub -------------------------------------------------- */
.registry-hub .hub-intro { max-width: 46rem; margin: 0 0 2.4rem; }
.registry-hub .hub-intro p:first-of-type { font-size: 1.4rem; line-height: 1.5; font-weight: 500; color: var(--ink); }
.registry-colophon { max-width: 62rem; border-left: 2px solid var(--gold); padding-left: 1.4rem; }
.registry-colophon p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-muted); margin-bottom: 0; }
.page-wrapper .registry-colophon p:not([class]) { max-width: none; }

.reg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.reg-table { width: 100%; border-collapse: collapse; background: transparent; margin: 1.6rem 0 1rem; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.reg-table thead th {
  font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .09em;
  font-size: .68rem; font-weight: 700; color: #f2efe7; background: var(--green-dk);
  padding: .72rem .85rem; text-align: left; white-space: nowrap; border: 0;
}
.reg-table thead th.rt-miles { text-align: right; }
.reg-table tbody.reg-car { border-bottom: 1px solid var(--rule-soft); transition: background .15s ease; }
.reg-table tbody.reg-car:hover { background: rgba(169,130,42,.10); }
.reg-table tbody.reg-car:last-child { border-bottom: 2px solid var(--ink); }
.reg-table td { border: 0; padding: .72rem .85rem; vertical-align: middle; line-height: 1.4; font-family: var(--serif); }
.reg-table .rt-badge, .reg-table .rt-window, .reg-table .rt-record { white-space: nowrap; }
.reg-table .rt-serial a { font-family: var(--grotesk); font-weight: 700; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.reg-table tbody.reg-car:hover .rt-serial a { color: var(--green); }
.reg-table .rt-miles { text-align: right; white-space: nowrap; }
.rt-unk { color: var(--ink-muted); opacity: .55; font-style: italic; }
.rt-year { font-family: var(--grotesk); font-weight: 600; font-size: .88rem; color: var(--ink-muted); }
.rt-year.is-cold { color: var(--red); border-bottom: 1px dotted rgba(165,52,42,.55); }
/* Mark what we HAVE, not what we lack: a "PHOTOS WANTED" pill fired on the MAJORITY of
   rows and told the reader nothing. A quiet camera glyph on the minority that DO have
   pictures is the informative signal. */
.rt-has-photos { display: inline-flex; align-items: center; margin-left: .5rem; vertical-align: middle; }
.rt-has-photos svg { width: .82rem; height: .72rem; fill: var(--gold); opacity: .75; }
.reg-row:hover .rt-has-photos svg { opacity: 1; }
.rt-dealer-name { display: block; }
.rt-pin { width: .5rem; height: .62rem; margin-right: .22rem; fill: var(--gold); opacity: .8; vertical-align: -1px; }
.reg-note-row td { padding-top: 0; }
.reg-table .rt-note { padding: 0 .85rem .85rem 1rem; border-left: 2px solid rgba(169,130,42,.35); font-family: var(--serif); font-size: .95rem; line-height: 1.5; color: var(--ink-muted); }
.reg-table .rt-note p { margin: 0; }
.reg-table .rt-note a { color: var(--green); }
.reg-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .4rem 0 0; font-family: var(--grotesk); font-size: .74rem; color: var(--ink-muted); }
.reg-legend-item { display: inline-flex; align-items: center; gap: .4rem; }

.reg-contribute { margin: 3.6rem 0 0; padding: 2rem 2.2rem; background: var(--paper-2); border-top: 3px solid var(--gold); }
.page-wrapper h2.reg-contribute-title { margin: .35rem 0 .7rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.reg-contribute-copy { max-width: 46rem; color: var(--ink-muted); font-size: 1.05rem; }
.reg-contribute-cta, .pw-cta {
  font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 700; color: var(--green); text-decoration: none !important;
}
.reg-contribute-cta:hover, .pw-cta:hover { color: var(--gold); }

/* Registry section intros ("Race Cars", "Homologation Cars") open with a block of prose
   and then a table, but the prose was rendering as one ~36rem measure column with the
   table's full width sitting empty beside it below. Extends the reprint's own two-column
   idiom (column-count, same gap) rather than inventing one — this is OUR prose, not a
   reprint, so it skips the newsprint's justify/hyphenate/indent treatment. Scoped
   structurally (there is no class to hook: the source is a plain paragraph straight out
   of Markdown) to the paragraph(s) immediately after a section's .part-head. */
.registry-hub .col-md-12 > header.part-head + p:not([class]),
.registry-hub .col-md-12 > header.part-head + p:not([class]) + p:not([class]) {
  column-count: 2; column-gap: 2.6rem; max-width: 58rem; margin: 0 0 1.2rem;
}

/* THE REGISTER GETS THE WHOLE PAGE. This was a two-up grid — intro prose left, the register
   squeezed into the remaining ~55% and clipped on the right, with columns the reader could not
   reach. A register is a WIDE TABLE and it is the most important thing on the page; it should not
   be fighting a paragraph for room.
   So: the intro prose sets in two columns (our own column-count idiom, same gap as the rest of the
   site), and the table sits BELOW IT AT FULL WIDTH. Text wraps; data does not. */
.reg-intro {
  column-count: 2; column-gap: 2.6rem;
  max-width: none; margin: 0 0 2.2rem;
}
.page-wrapper .reg-intro p:not([class]) { max-width: none; margin-top: 0; }
.reg-intro p:not([class]):first-child { margin-top: 0; }

.reg-register { min-width: 0; overflow-x: auto; margin-bottom: 2.6rem; }
.reg-register table.table { margin-top: 0; width: 100%; }

@media (max-width: 820px) {
  .reg-intro { column-count: 1; }
}

/* legacy aliases — older markup still resolves to the same behaviour */
.race-split { display: block; }
.race-split-prose { column-count: 2; column-gap: 2.6rem; margin-bottom: 2.2rem; }
.page-wrapper .race-split-prose p:not([class]) { max-width: none; }
.race-split-table { min-width: 0; overflow-x: auto; }
.race-split-table table.table { margin-top: 0; width: 100%; }
.race-split-table table.table tbody td:nth-child(2),
.race-split-table table.table tbody td:nth-child(3),
.race-split-table table.table tbody td:nth-child(8) { white-space: nowrap; }

/* ---- REGISTRY: the car page --------------------------------------------- */
.chassis-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.8rem; align-items: center; margin: 0 0 2.8rem; padding: .4rem 0 2.4rem; border-bottom: 1px solid var(--rule); }
.chassis-plaque .id-plaque { margin: 0; max-width: 520px; }
.chassis-vitals { margin: 0; padding: 0; }
.cv-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); }
.chassis-vitals dt { margin: 0; font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--ink-muted); align-self: center; }
.chassis-vitals dd { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; color: var(--ink); }
.chassis-vitals .cv-fig { font-family: var(--grotesk); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; }
.cv-unk { color: var(--ink-muted); opacity: .6; font-style: italic; }
.chassis-record { margin-top: 2rem; }
.chassis-body > p,
.chassis-body > ul,
.chassis-body > ol,
.chassis-body > blockquote,
.chassis-body > h2,
.chassis-body > h3,
.chassis-body > h4 { max-width: 46rem; }
.chassis-body table, .chassis-body figure { max-width: none; }
.chassis-body > p:first-of-type { font-size: 1.24rem; line-height: 1.55; color: var(--ink); }

/* the dash plaque — a data-driven inline SVG of the factory dash plate. It IS the hero of
   a car page now that the photographic banner is gone, and for most of these cars it is
   the only image that exists. */
.id-plaque { max-width: 480px; margin: 1.5rem auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.25)); }
.id-plaque-svg { display: block; width: 100%; height: auto; }
.id-plaque-cap { text-align: center; font-size: .85rem; color: var(--ink-muted); margin-top: .6rem; }
.id-plaque-text, .id-plaque-roundel { font-variant-numeric: lining-nums; }

.photos-wanted { font-family: var(--grotesk); }
.photos-wanted-panel {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 2rem; align-items: center; clear: both;
  margin: 3.2rem 0 0; padding: 1.8rem 2rem;
  background: var(--paper-2); border-top: 3px solid var(--gold);
}
.pw-drawing { display: block; width: 100%; height: auto; opacity: .18; filter: grayscale(1); }
.pw-lede { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: var(--ink-muted); max-width: 38rem; margin: .7rem 0 1.1rem; }
.pw-copy { font-family: var(--serif); font-size: .95rem; line-height: 1.55; color: var(--ink-muted); max-width: 40rem; }

/* ---- REGISTRY: the factory race car — a register entry WITH a record ---- */
.rc-band { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin: 0 0 2.8rem; padding: .4rem 0 2.4rem; border-bottom: 1px solid var(--rule); }
.rc-roundel { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.rc-roundel-svg { display: block; width: 100%; max-width: 260px; height: auto; }
.rc-stats { margin-top: 0; }
.rc-record-card { margin-top: 1.2rem; }
.rc-sec-head { margin: 0 0 1.6rem; }
.page-wrapper .rc-sec-title, .page-wrapper h2.rc-sec-title { border-bottom: 3px solid var(--ink); padding-bottom: .5rem; margin: .15rem 0 0; }
.racecar .rc-body { margin: 3rem 0 0; }
.racecar .rc-body > p:first-of-type { font-size: 1.24rem; line-height: 1.55; color: var(--ink); }

.rc-record { margin: 3.6rem 0 0; }
.rc-year { margin: 2.2rem 0 0; }
.rc-year-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .45rem; border-bottom: 2px solid var(--gold); }
.rc-year-num { font-family: var(--grotesk); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--green-dk); font-variant-numeric: tabular-nums lining-nums; }
.rc-year-sum { font-family: var(--grotesk); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); }
.rc-year-sum b { color: var(--gold); font-weight: 800; }
.rc-runs { list-style: none; margin: 0; padding: 0; }
.rc-run {
  display: grid; grid-template-columns: 3.4rem minmax(9rem, 1.1fr) minmax(7rem, .85fr) minmax(0, 1.5fr);
  gap: .25rem 1rem; align-items: baseline; padding: .62rem .45rem;
  border-bottom: 1px solid var(--rule-soft); transition: background .15s ease;
}
.rc-run:hover { background: rgba(169,130,42,.10); }
.rc-runs .rc-run:last-child { border-bottom: 2px solid var(--ink); }
.rc-race { display: flex; flex-direction: column; gap: .12rem; }
.rc-venue { font-family: var(--grotesk); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.15; }
.rc-date { font-family: var(--grotesk); font-size: .72rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rc-driver { font-family: var(--grotesk); font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--dc, var(--ink)); }
.rc-inf { color: var(--gold); font-weight: 800; cursor: help; margin-left: .1em; }
.rc-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.rc-facts > * { font-family: var(--grotesk); font-size: .68rem; letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; }
.rc-tag { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green-dk); border: 1px solid rgba(11,92,46,.3); border-radius: 2px; padding: .06rem .34rem; }
.rc-entrant { font-style: italic; font-family: var(--serif); font-size: .78rem; }
.racecar .rc-note { grid-column: 2 / -1; font-family: var(--serif); font-size: .86rem; line-height: 1.45; color: var(--ink-muted); max-width: 42rem; }
.rc-run.is-inferred { background: rgba(169,130,42,.04); }
.rc-run.is-inferred .rc-venue { color: var(--ink-muted); }
.racecar .rc-record-foot { margin: 1.1rem 0 0; max-width: 46rem; font-family: var(--grotesk); font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }

.rc-gallery { margin: 4rem 0 0; }
.rc-grid { --card-min: 20rem; --card-gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin: 1.8rem 0 0; }
.racecar .rc-shot { margin: 0; }
/* A PHOTOGRAPH HAS NO EDGES OF ITS OWN. Gallery shots sit flat — no frame, no
   document-shadow, no hover lift. The retired 0 12px 34px shadow is for a document
   (.framed), never for a photograph; the law gives this class no frame at all. */
.rc-shot img { display: block; width: 100%; height: auto; }
.racecar .rc-gallery-credit { margin: 1.3rem 0 0; max-width: 46rem; font-family: var(--grotesk); font-size: .78rem; color: var(--ink-muted); }

.rc-editnote { margin: 3.2rem 0 0; padding-left: 1.5rem; border-left: 3px solid var(--red); }
.racecar .rc-editnote p:not([class]), .racecar .rc-editnote ul:not([class]) { max-width: 46rem; }
.racecar .rc-editnote li:not([class]) { font-size: .98rem; line-height: 1.6; }
.racecar .rc-editnote li strong { color: var(--green-dk); }
.rc-related { margin: 3.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.racecar .rc-related ul:not([class]) { list-style: none; padding-left: 0; margin-top: .8rem; max-width: 46rem; }
.racecar .rc-related li:not([class]) { padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .98rem; }

/* ---- REFERENCE: specs, equipment, parts, bibliography -------------------- */
.specs-section { margin-top: 3.2rem; break-inside: avoid; }
.specs-section:first-of-type { margin-top: 1.6rem; }
/* Every .specs-section table on the comparison page shows the SAME three columns —
   Esprit SE (SCCA), X180R (homologation), X180R (IMSA) — but each is a SEPARATE <table>
   that used to compute its own column widths from its own row-label lengths, so the three
   value columns jogged left and right down the page and could not be compared at a
   glance, which is the entire reason the tables exist side by side. table-layout: fixed
   plus one shared width rule for every section locks all of them to the same geometry. */
.specs-section table.table { margin-top: 1.1rem; table-layout: fixed; }
.specs-section table.table th:first-child,
.specs-section table.table td:first-child { width: 20%; }
.specs-section table.table th:not(:first-child),
.specs-section table.table td:not(:first-child) { width: 26.67%; }

/* A cell the author has marked as differing between the three variants (wrap the value in
   **bold** in the source table) gets a quiet tint and a hairline marker — never gold,
   gold is reserved for a racing RESULT. Subtle by request: a tint, not a badge. */
.specs-section table.table td strong {
  display: block; margin: -.7rem -.95rem; padding: .7rem .95rem;
  background: rgba(11, 92, 46, .06);
  border-left: 2px solid var(--green);
  font-weight: 600; color: var(--ink);
}
.page-wrapper .specs-section > p:not(.specs-eyebrow) { font-size: 1rem; line-height: 1.55; color: var(--ink-muted); margin: 1rem 0; }
.page-wrapper .specs-section h4 { font-family: var(--grotesk); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--green-dk); margin: 1.6rem 0 .3rem; }

.parts-group { margin: 4.5rem 0 0; }
.parts-group:first-of-type { margin-top: 3rem; }
.group-head { border-bottom: 3px solid var(--ink); padding-bottom: .5rem; margin-bottom: .2rem; }
.page-wrapper table.parts-table { font-size: .94rem; margin: 1.2rem 0 2.4rem; }
.page-wrapper table.parts-table thead th { padding: .55rem .8rem; }
.page-wrapper table.parts-table tbody td { padding: .46rem .8rem; line-height: 1.35; }
.page-wrapper table.parts-table tbody td:nth-child(2) { font-family: var(--grotesk); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; font-weight: 500; color: var(--ink); }
/* a superseded part number is struck in red, and its whole row recedes */
.page-wrapper table.parts-table tbody tr:has(del) { background: rgba(165,52,42,.045); }
.page-wrapper table.parts-table tbody tr:has(del) td { color: var(--ink-muted); }
.page-wrapper table.parts-table tbody td del { text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }

/* the parts jump-nav rail FOLLOWS the reader: the catalogue is a very long document, and
   a jump list that scrolls away at the top is a jump list you cannot use. */
.parts-rail { position: sticky; top: 2rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; }
.parts-rail nav#TableOfContents { max-height: calc(100vh - 8rem); overflow-y: auto; }
.parts-rail nav#TableOfContents > ul { list-style: none; margin: 0; padding: 0; }
.parts-rail nav#TableOfContents > ul > li { margin: 0; }
.parts-rail nav#TableOfContents > ul > li > a {
  display: block; padding: .5rem 0;
  font-family: var(--grotesk); font-weight: 700; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  transition: color .15s, padding-left .15s;
}
.parts-rail nav#TableOfContents > ul > li > a:hover { color: var(--green); padding-left: .3rem; }
.parts-rail nav#TableOfContents ul ul { list-style: none; margin: 0 0 .3rem; padding-left: .8rem; }
.parts-rail nav#TableOfContents ul ul li a { display: block; padding: .26rem 0; font-family: var(--serif); font-size: .8rem; color: var(--ink-muted); text-decoration: none; }
.parts-rail nav#TableOfContents ul ul li a:hover { color: var(--green); }
.col-md-3.sticky-top > h2, .col-md-2.sticky-top > h2 { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--ink-muted); font-weight: 700; }

/* BOOKSHELF — the bibliography as a shelf of covers. Cover art is the fastest way for a
   reader to recognise a book they already own. Volumes with no cover on file get a typeset
   spine rather than a broken image, so the shelf never looks damaged. */
.bookshelf { --card-min: 11rem; --card-gap: 2rem 1.6rem; list-style: none; margin: 2rem 0 1rem; padding: 0; max-width: none; }
.book { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.book-cover-link { display: flex; align-items: flex-end; justify-content: center; height: 15rem; line-height: 0; }
.book-cover { max-height: 100%; width: auto; max-width: 100%; display: block; border: 1px solid var(--rule); box-shadow: 0 10px 26px rgba(0,0,0,.18); transition: transform .18s ease, box-shadow .18s ease; }
.book:hover .book-cover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.24); }
.book-spine { display: flex; align-items: center; justify-content: center; height: 100%; aspect-ratio: 2 / 3; padding: 1rem; background: linear-gradient(100deg, var(--green-dk) 0 6%, var(--green) 6% 100%); border: 1px solid var(--rule); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.book-spine-title { font-family: var(--serif); font-size: .95rem; line-height: 1.3; color: #f2efe7; text-align: center; text-wrap: balance; }
.book:hover .book-spine { transform: translateY(-3px); }
.book-meta { display: flex; flex-direction: column; gap: .16rem; }
.book-title { font-family: var(--grotesk); font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--ink); text-decoration: none !important; }
.book:hover .book-title { color: var(--green); }
.book-author { font-family: var(--serif); font-size: .92rem; color: var(--ink); }
.book-note { font-family: var(--serif); font-size: .84rem; line-height: 1.45; color: var(--ink-muted); margin-top: .25rem; }
.book-note p { margin: 0; font-size: inherit; }

/* ---- CREDITS ------------------------------------------------------------ */
.credits-grid { margin: 2.6rem 0; }
.credit-card { background: var(--paper); padding: 1.5rem 1.6rem; transition: background .15s ease; }
.credit-card:hover { background: rgba(11,92,46,.05); }
.credit-name { display: block; font-family: var(--grotesk); font-weight: 800; font-size: 1.2rem; color: var(--ink); line-height: 1.1; margin-bottom: .4rem; }
.credit-name a { color: var(--ink); text-decoration: none; }
.credit-card:hover .credit-name, .credit-card:hover .credit-name a { color: var(--green); }
.credit-role { display: block; font-family: var(--serif); font-size: .98rem; line-height: 1.45; color: var(--ink-muted); }

/* ---- 404 ---------------------------------------------------------------- */
.error-page .error-inner { text-align: center; padding: 2.5rem 0 4rem; }
.err-code { font-family: var(--grotesk); font-weight: 800; font-size: clamp(6rem, 18vw, 12rem); line-height: .9; color: var(--green); margin: .4rem 0 0; letter-spacing: -.02em; }
.err-title { font-family: var(--grotesk); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); margin: .4rem 0 1rem; }
.err-msg { font-family: var(--serif); color: var(--ink-muted); max-width: 34rem; margin: 0 auto 1.7rem; }
.err-links { display: flex; gap: 1.3rem; justify-content: center; flex-wrap: wrap; }
.err-links a { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 700; color: var(--green); text-decoration: none; }
.err-links a:hover { color: var(--gold); }

/* ---- THE DESIGN-SYSTEM CATALOGUE (internal, noindex) -------------------- */
.ds-toc { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 3rem; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ds-toc a { font-family: var(--grotesk); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); text-decoration: none; }
.ds-toc a:hover { color: var(--green); }
.ds-when { font-family: var(--grotesk); font-size: .82rem; line-height: 1.55; color: var(--ink-muted); max-width: 46rem; margin: 0 0 1rem; }
.ds-when b { color: var(--green-dk); }
.ds-when .no { color: var(--red); }
.ds-demo { padding: 1.6rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; }
.ds-demo.on-paper { background: var(--paper); }
.ds-code { margin: 0 0 1rem; padding: 1rem 1.2rem; background: #17140f; border-radius: 0 0 2px 2px; overflow-x: auto; }
.ds-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; line-height: 1.6; color: #cdc7ba; white-space: pre; background: none; padding: 0; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.ds-swatch { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.ds-swatch i { display: block; height: 3.6rem; }
.ds-swatch b { display: block; font-family: var(--grotesk); font-size: .72rem; font-weight: 700; padding: .5rem .6rem 0; }
.ds-swatch code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .68rem; color: var(--ink-muted); padding: 0 .6rem .55rem; background: none; }

/* ============================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (max-width: 991px) {
  .chassis-band { grid-template-columns: 1fr; gap: 1.8rem; }
  .rc-band { grid-template-columns: 1fr; gap: 2rem; }
  .chassis-plaque .id-plaque { margin: 0 auto; }
  .rc-roundel-svg { max-width: 190px; }
  .photos-wanted-panel { grid-template-columns: 1fr; }
  .pw-drawing { max-width: 22rem; margin: 0 auto; }
  .career { grid-template-columns: 1fr; gap: 2.4rem; }
  .navigation .navbar-nav .dropdown-menu { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--gold); background: transparent; min-width: 0; max-width: none; width: auto; }
  .navigation .navbar-nav .dropdown:hover .dropdown-menu { display: none; }
  .navigation .navbar-nav .dropdown.open .dropdown-menu { display: block; }
}
@media (max-width: 900px) {
  /* narrow: the spread has no margin to give, so marginalia falls UNDER the paragraph it
     annotates. It is never hidden — a note that disappears is a note that lied. */
  .spread, .spread-flip { max-width: 100%; margin-left: 0; margin-right: 0; }
  .spread .sidenote, .spread .margin-note, .spread .reprise,
  .spread-flip .sidenote, .spread-flip .margin-note, .spread-flip .reprise {
    float: none; width: auto; max-width: 100%; margin: 1.6rem 0;
  }

  .chapter-grid { grid-template-columns: 1fr; gap: 2rem; }
  .chapter-rail { order: -1; }
  .rail-sticky { position: static !important; }
  /* Pointer precision goes away with the sticky rail — a thumb needs a bigger target
     than a cursor did, so the row and numeral both grow here and nowhere else. */
  .chapter-toc a { padding: .75rem 0 .75rem 1rem; }
  .ct-num { font-size: 1.2rem; width: 1.9rem; }
  .ct-title { font-size: .88rem; }
  .race-split { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 767px) {
  body { font-size: 1.08rem; }
  .page-wrapper { padding: 2.2rem 0 3rem; }
  .home-hero { min-height: 70vh; }
  .pagehead { padding: 2.2rem 0 1.4rem; }

  .statstrip, .hub-stats, .reg-state { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .reg-state { gap: 1.4rem 1rem; }

  .chapter-card { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .cc-num { font-size: 2rem; }
  .cc-arrow, .sc-arrow { display: none; }
  .chapter-nav { grid-template-columns: 1fr; }
  .cnav-next { text-align: left; grid-template-columns: auto 1fr; grid-template-areas: "dir dir" "num title"; }

  .season-cards { grid-template-columns: 1fr; }

  .imgfig.right, .imgfig.left { float: none; max-width: 100%; width: auto; margin: 1.6rem 0; }
  .imgfig.medium, .imgfig.large, .imgfig.xlarge, .imgfig.small { width: auto; }
  .imgpair { grid-template-columns: 1fr; }
  /* .reprise no longer floats on the web at any width (see the component comment above),
     so there is nothing left for this breakpoint to undo. */
  .page-wrapper .quotation, .page-wrapper .docquote { margin-left: 1.2rem; max-width: calc(var(--measure) - 1.2rem); }
  .page-wrapper .sidenote { float: none; width: auto; margin: 1.6rem 0; }

  .cv-row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; }
  .reg-contribute, .photos-wanted-panel { padding: 1.5rem 1.3rem; }
  .reg-table { font-size: .92rem; }

  .rc-run { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .3rem .8rem; }
  .rc-driver, .rc-facts, .racecar .rc-note { grid-column: 2 / -1; }
  .rc-prov-item { grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0 1rem; }
  .rc-prov-year, .rc-prov-body { grid-column: 2; }
  .rc-prov-year { margin-bottom: .2rem; }
  .rc-grid { grid-template-columns: 1fr; }
  .rc-source { padding: 1.5rem 1.3rem 1rem; }
  .rc-source-meta > div { grid-template-columns: 7rem minmax(0, 1fr); gap: .7rem; }
  .page-wrapper .rc-source-body blockquote { padding-left: 1rem; }

  .footer .footer-top { grid-template-columns: 1fr; gap: 1.9rem; }
  .footer .footer-base { flex-direction: column; align-items: flex-start; }
  .footer-subscribe .sub-row { flex-direction: column; }

  .col-md-3.sticky-top, .col-md-2.sticky-top { margin-top: 2.5rem; }
  .parts-rail { position: static; max-height: none; overflow-y: visible; }
  .parts-rail nav#TableOfContents { max-height: none; overflow-y: visible; }
}
@media (max-width: 760px) {
  /* newsprint drops to one column: two justified columns on a phone is a ransom note */
  .reprint.is-newsprint .reprint-body { column-count: 1; text-align: left; hyphens: manual; }
  .page-wrapper .reprint.is-newsprint .reprint-body p:not([class]) { text-indent: 0; margin-bottom: 1rem; }

  .registry-hub .col-md-12 > header.part-head + p:not([class]),
  .registry-hub .col-md-12 > header.part-head + p:not([class]) + p:not([class]) {
    column-count: 1; max-width: none;
  }
}
@media (max-width: 720px) {
  .sr-entry { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .sr-facts, .sr-figs, .sr-note { grid-column: 2 / -1; }
}

/* ==== FIGURE TIERS =======================================================
   The old ceiling was .xlarge at 34rem — NARROWER than the 36rem measure. The largest picture
   on the site was smaller than the paragraph beside it, and between the measure and 100vw there
   was nothing at all. That is the mechanical reason every period scan looked too small: nobody
   chose small, small was all there was.

   THE CAP IS THE POINT. `--native` is the image's intrinsic pixel width, emitted per-figure by
   the imgfig shortcode. Every tier below is capped at native/2 — half, because a 2x display needs
   two device pixels per CSS pixel to stay crisp. So a figure CANNOT be enlarged past its own scan,
   whatever class anyone puts on it. Ask for a plate and you get a plate only if the pixels exist;
   otherwise you silently get the largest honest size. The 296px SCCA advertisement tagged `.plate`
   renders at 9rem, not 68rem — and when a better scan of it lands, it becomes a real plate with no
   code change, because the cap simply rises with the file.

   This replaces a rule a human had to remember on every figure, forever, with one the system
   enforces. */
:root { --breakout: 52rem; --plate: 68rem; --margin-fig: 22rem; }

.imgfig { --cap: calc(var(--native, 100000px) / 2); }
.imgfig.xsmall { width: 100%; max-width: min(10rem, var(--cap)); }
.imgfig.small  { width: 100%; max-width: min(15rem, var(--cap)); }
.imgfig.medium { width: 100%; max-width: min(21rem, var(--cap)); }
.imgfig.large  { width: 100%; max-width: min(28rem, var(--cap)); }
.imgfig.xlarge { width: 100%; max-width: min(34rem, var(--cap)); }
.imgfig.full,
.imgfig.center   { width: 100%; max-width: min(var(--measure), var(--cap)); display: block; margin: 2.6rem auto; float: none; }

/* the two tiers that did not exist */
.imgfig.breakout { width: 100%; max-width: min(var(--breakout), var(--cap)); display: block; margin: 2.8rem auto; float: none; }
.imgfig.plate    { width: 100%; max-width: min(var(--plate),    var(--cap)); display: block; margin: 3.2rem auto; float: none; }

/* margin figure — resolves the float conflict honestly: the line keeps its full measure and the
   picture takes margin that was doing nothing. */
.imgfig.margin { float: right; clear: right; width: min(var(--margin-fig), var(--cap)); margin: .4rem 0 1.6rem 3rem; }
.spread-flip .imgfig.margin { float: left; clear: left; margin: .4rem 3rem 1.6rem 0; }

.imgfig.right { float: right; max-width: min(44%, var(--cap)); }
.imgfig.left  { float: left;  max-width: min(44%, var(--cap)); }

/* BLEED WAS THE ONE TIER THE CAP NEVER REACHED. A small scan tagged .bleed used to
   stretch the full viewport regardless of its own pixels — the exact lie the native
   cap exists to prevent. Cap it at min(100vw, native/2). When the cap does NOT bite
   the negative margins still pull a true edge-to-edge bleed; when it DOES, the same
   term collapses to (50% − cap/2) and the capped figure centres in the measure. */
.imgfig.bleed {
  width: 100vw;
  max-width: min(100vw, var(--cap));
  margin-left:  calc(50% - min(50vw, var(--cap) / 2));
  margin-right: calc(50% - min(50vw, var(--cap) / 2));
  float: none;
}

/* A BOOK LAYS A DOCUMENT FLAT. Scale carries importance, not elevation — the old 0 12px 34px/20%
   shadow made a scanned document read as a floating web card. No tape, no deckle edge, no
   rotation: that is pastiche, and this is a record. */
.imgfig.framed img { border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(0,0,0,.10); }

/* a points cell is data, not a result — never gold, never green, never dashed. See season-standings.html. */
.st-rounds.is-points .rd { background: none; box-shadow: none; border: 0; }
.st-rounds.is-points .rd-num .rd-v { color: var(--ink); font-weight: 400; }

/* ---- LOTUSPORT MARK ----------------------------------------------------
   The team's own logo. Rare by design — see layouts/shortcodes/lotusport-mark.html. It marks the
   arrival of the TEAM as a subject; used more often than that it becomes wallpaper and means
   nothing.

   Reproduced in its OWN black. Not tinted green, not tinted gold: recolouring someone else's mark
   to match your palette is the graphic equivalent of editing a quotation. `multiply` drops its
   antialiased edge into the warm paper so it sits ON the page rather than in a box — the same
   treatment as .cutout, and for the same reason. NEVER frame it. */
/* The mark lives INSIDE the reading measure so it punctuates the prose column where the
   team arrives as a subject — not floated out into the dead gutter beside it, where its
   width and its own black would read as a stranded slab. A thin gold hairline under it
   ties it to the section rule vocabulary and makes it read as a deliberate plate. */
.lotusport-mark { margin: 2rem 0; line-height: 0; max-width: var(--measure); }
.lotusport-mark img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: multiply; opacity: .92;
}
.lotusport-mark.is-small  img { max-width: 11rem; }
.lotusport-mark.is-medium img { max-width: 15rem; }
.lotusport-mark.is-large  img { max-width: 22rem; }
.lotusport-mark.is-center img { margin-inline: auto; }
.lotusport-mark.is-right  img { margin-left: auto; }

/* on the dark champion card / footer the black mark would disappear — invert it there instead of
   shipping a second file. */
.footer .lotusport-mark img,
.is-champion .lotusport-mark img { mix-blend-mode: screen; filter: invert(1); opacity: .85; }

/* An unranked driver still has a season. The sources do not record where he finished in the
   points — that, and only that, is what is missing. The strip stays.
   The row carries no pos/pts cell, so on the has-rounds grid its name was auto-placed into
   the 1.9rem POSITION track and crushed. Give the unranked row its own explicit grid — a
   reserved position indent, a full-measure name, then the strip — and place the two real
   children by hand so nothing lands in the placeholder track. */
.st-row.is-unranked { opacity: .92; grid-template-columns: 1.9rem minmax(0, 1fr) auto; }
.st-table.has-rounds .st-row.is-unranked { grid-template-columns: 1.9rem minmax(0, 1fr) auto; }
.st-row.is-unranked .st-name   { grid-column: 2; }
.st-row.is-unranked .st-rounds { grid-column: 3; }

/* BREADCRUMB — a chassis page is a leaf, and the reader was stranded on it. Built on the eyebrow
   (same face, tracking and gold) so it reads as page furniture the reader already knows, not as a
   second navigation language. */
.crumbs { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumb-sep { opacity: .45; }
.crumb-here { color: var(--ink-muted); }

/* ==== THE RACE FIELD (dots) and THE BALLAST (bars) — TWO GRAPHICS, NOT ONE ================
   They were fused into a single track sharing one year axis. That was a CATEGORY ERROR: the dots
   are PER RACE (57 marks, and ORDER is the only dimension they have); the bars are PER SEASON
   (eight values). They do not share an x-axis. Forcing them to share one is exactly what wrecked
   the dot spacing — each season's dots were stretched or squeezed to line up with a year column
   they had nothing to do with. Split, each gets the axis it actually has, and the page can place
   them apart so the visual interest runs through the page instead of piling up in one block. */

.racefield, .ballast {
  margin: 3.4rem 0; padding: 2.2rem 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}

/* SEASONS WRAP. RACES INSIDE A SEASON NEVER DO — a wrapped season would put race 5 underneath
   race 1 and destroy the chronology, which is the only thing this graphic is for. */
.rf-seasons { list-style: none; display: flex; flex-wrap: wrap; gap: 2.2rem 2.8rem; margin: 0 auto; padding: 0; max-width: 66rem; justify-content: flex-start; }
.rf-season  { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; margin: 0; }
.rf-dots    { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: .34rem; margin: 0; padding: 0; min-height: 18px; max-width: none; }
.rf-year    { font-family: var(--grotesk); font-weight: 800; font-size: .96rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rf-sub     { font-family: var(--grotesk); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-top: -.35rem; }
.rf-season.is-norecord .rf-sub { color: var(--red); }
.rf-season.is-elision  { opacity: .55; }
.rf-gap { display: block; width: 3.5rem; height: 18px; border-bottom: 1px dotted var(--rule); }

/* the marks are BIGGER than before, because they are now hover targets and they were too small to
   hit. Weight ranks the result; colour names it — the same language as the badge and round strip. */
.dot-race { position: relative; display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--ink-muted); background: transparent; cursor: help; }
.dot-race.is-out    { border: 1px dashed var(--red); background: transparent; }
.dot-race.is-podium { width: 13px; height: 13px; border: 0; background: rgba(11,92,46,.16); box-shadow: inset 0 0 0 1px rgba(11,92,46,.55); }
.dot-race.is-win    { width: 17px; height: 17px; border: 0; background: var(--gold); }
.dot-race:hover, .dot-race:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(11,92,46,.18); }

/* THE BALLAST — its own axis, one column per season. */
.bl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; }
.bl { list-style: none; display: flex; align-items: flex-end; gap: .9rem; margin: 0; padding: 0; max-width: none; }
.bl-col { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin: 0; flex: 1 1 0; min-width: 4.6rem; }
.bl-plot { position: relative; display: flex; align-items: flex-end; height: 9rem; border-bottom: 1px solid var(--rule); }
.bl-bar { display: block; width: 100%; background: linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%); }
/* an UNKNOWN minimum weight is not a MAXIMUM one: a full-height bar was a lie. A low
   ghosted ground at the axis reads as "no sourced figure", claiming no magnitude. */
.bl-bar.is-unknown { height: .6rem; background: none; border: 1px dashed var(--rule); border-bottom: 0; }
.bl-fig { position: absolute; left: 0; right: 0; bottom: .35rem; text-align: center; font-family: var(--grotesk); font-weight: 800; font-size: .72rem; color: var(--paper); font-variant-numeric: tabular-nums; z-index: 2; }
.bl-elide { display: block; width: 100%; border-bottom: 1px dotted var(--rule); }
.bl-year { font-family: var(--grotesk); font-weight: 800; font-size: .96rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-sub  { font-family: var(--grotesk); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-top: -.35rem; }
.bl-col.is-norecord .bl-sub { color: var(--red); }
.bl-col.is-elision { opacity: .55; }

/* the race register — same grammar as the road register, different columns, because the two fleets
   left different records. A road car was SOLD (sticker, dealer, owner, mileage); a race car was
   CAMPAIGNED (a decal, a nickname, a location). Showing race cars under the road cars' columns
   produced a table that was mostly em-dashes — a column of nothing pretending to be data. */
.reg-race .rt-nick { white-space: nowrap; }
.rt-nick-name { font-family: var(--serif); font-size: 1.04rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(11,92,46,.3); }
.rt-nick-name:hover { color: var(--green); border-bottom-color: var(--green); }
.reg-race .rt-type { font-family: var(--grotesk); font-size: .8rem; color: var(--ink-muted); white-space: nowrap; }
.rt-vin-num  { font-family: var(--grotesk); font-size: .82rem; letter-spacing: .02em; }
.rt-vin-part { font-family: var(--grotesk); font-size: .82rem; color: var(--ink-muted); }
.rt-vin-flag { display: block; font-family: var(--grotesk); font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red); margin-top: .15rem; }
.rt-loc { display: block; }
.rt-open { font-family: var(--grotesk); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green); text-decoration: none; white-space: nowrap; }
.rt-open:hover { color: var(--gold); }

/* the photo glyph is a DOOR, not an ornament — a reader who learns that photographs exist wants to
   go and look at them, so it links to the car on both registers. */
a.rt-has-photos { display: inline-block; text-decoration: none; border: 0; }
a.rt-has-photos:hover svg { fill: var(--green); opacity: 1; }

/* every photograph carries its own credit. A photograph published without one is a photograph
   nobody can defend, cite, or seek permission for — and on a site that becomes a printed book,
   that is a liability, not an oversight. Where the photographer is unknown the line SAYS so; it
   does not quietly credit the listing that happened to carry the image. */
.rc-shot-credit {
  font-family: var(--serif); font-style: italic;
  font-size: .78rem; line-height: 1.4; color: var(--ink-muted);
  margin-top: .5rem; max-width: none;
}

/* the basis of a competition record travels WITH it. A qualification that trails its claim by
   eighty lines is not a qualification — the reader has already believed the table. */
.rc-basis {
  font-family: var(--serif); font-size: .92rem; line-height: 1.6; color: var(--ink-muted);
  margin: 1rem 0 0; padding: .85rem 1.1rem; max-width: 46rem;
  background: var(--paper-2); border-left: 2px solid var(--red);
}
.rc-basis b { color: var(--ink); font-weight: 600; }

/* THE HERO SETS FLUSH LEFT. page-title.html has said so in a comment for months — "the book sets
   type flush left; the override lives in site.css" — and the override was never written, so the
   theme's centring won on every page on the site. A centred display line over a photograph is the
   most generic gesture available; a monograph's chapter opener is flush to the left margin. */
.page-title .block { text-align: left; }
.page-title .block .hero-eyebrow { display: inline-block; }

/* ---- PRINT ---------------------------------------------------------------
   The chapter rail's whole idea is hover: hollow-to-solid needs a pointer, and "sticky"
   is a screen concept. Paper has neither, so the rail does not degrade into a smaller
   rail — it is chrome, and it goes. The book's own running chapter list is the
   contents index (story-parts.html) and the part heads, which is where a printed
   edition's table of contents and running heads should be built from. */
@media print {
  .chapter-rail { display: none; }
}

/* a no-record year on the season rail: shown, so the reader knows the season existed, but muted and
   un-linked, because there is no page to reach. */
.season-nav li.is-norec { opacity: .5; }
.season-nav li.is-norec .sn-series { color: var(--red); }

/* a no-record season CARD: same quiet treatment as a did-not-race card, but its mark is a question,
   not a dash — the season happened; we simply cannot source what the car did in it. */
.season-card.is-norec { opacity: .6; }
.season-card.is-norec .sc-gap-mark { color: var(--red); }


/* ==================================================================================
   DDR-003 DESIGN-WAVE INTEGRATION — 19 component deltas merged below (serial integrator).
   Source of truth / audit trail: docs/design-waves/<slug>.css (kept in place).
   DROPPED: rd-out-split — already present above (~L1471-1502) as PROTECTED round-strip
            internals; re-appending would override .rd-out .rd-v (red->grey). Not merged.
   Later rules win. Blocks are verbatim from their deltas except two integrator fixes,
   tagged /* INTEGRATOR FIX */, in daterail (off-brand red) and parts-type (del-row guard).
   ================================================================================== */


/* ==== DDR-003 evidence ==== */
/* ============================================================================
   .evidence — interpretation beside evidence (DDR-003 §4b, component 1 — THE KEYSTONE)
   ----------------------------------------------------------------------------
   The site's entire thesis as one object: a redrawn / colour-coded / titled diagram
   in OUR faces (larger, leading the eye) beside the ORIGINAL period document (smaller,
   corroborating), the source table it was made from immediately beneath as part of the
   same object, and a caveat italic under that. The redraw and the original are NEVER
   confusable — the redraw carries our grotesk title + a "Redrawn" tag; the original is
   a bare scan with an "As issued" tag and a document provenance line.

   Absorbs the racing ledger (chart + source table + caveat): with no original document
   the shortcode sets `.is-ledger` and the redraw owns the full width.

   Laws observed:
     · Native cap inviolable — the scan is capped at scan-width / 2 (--ev-native).
     · A document keeps its own edges — NO frame unless `.is-keyline` (white-on-white).
     · Prose is serif (title gloss, caveat); data is sans (the source table).
     · No gold FILL (no result lives here). Grey = estimated/unknown; red = a record
       superseding a claim (cell .is-record only). Tints are color-mix of the token,
       never a hardcoded colour.
   Tokens only. This file is a delta; the serial integrator merges it into site.css.
   ============================================================================ */

.evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);   /* Maeder's ratio, demoted to a default */
  column-gap: clamp(1.4rem, 3.2vw, 2.6rem);
  row-gap: 1.6rem;
  align-items: start;
  width: 100%;
  max-width: none;                 /* the evidence object may run wider than the measure */
  margin: 3rem 0;
}

/* an optional breakout, when a page can spare the width for a two-up reading */
.evidence.is-breakout { max-width: var(--breakout, 52rem); }

.ev-redraw   { grid-column: 1; min-width: 0; }
.ev-original { grid-column: 2; min-width: 0; }
.evidence.orig-left .ev-redraw   { grid-column: 2; }
.evidence.orig-left .ev-original { grid-column: 1; }

/* ledger mode: no original document → the redraw leads alone, full width */
.evidence.is-ledger { grid-template-columns: 1fr; }
.evidence.is-ledger .ev-redraw { grid-column: 1; }

.ev-source-wrap,
.ev-caveat { grid-column: 1 / -1; }

/* ── the two tags that keep the registers apart ──────────────────────────── */
.ev-tag {
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .16rem .5rem;
  border-radius: 1px;
}
/* ours = the marque green, quiet (chrome, not a result) */
.ev-tag-ours { color: var(--green-dk); background: color-mix(in srgb, var(--green) 10%, transparent); }
/* the document = neutral, keylined; it is not our voice */
.ev-tag-doc  { color: var(--ink-muted); border: 1px solid var(--rule); }

/* ── the redraw (ours) ───────────────────────────────────────────────────── */
.ev-redraw-head { margin-bottom: 1rem; }
.ev-title {
  font-family: var(--grotesk);            /* our display voice */
  font-weight: 800;
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: .55rem 0 .25rem;
}
.ev-sub {
  font-family: var(--serif);              /* our gloss = prose, serif */
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34rem;
  margin: 0;
}
.ev-figure { min-width: 0; }
.ev-figure > svg,
.ev-figure > img { display: block; max-width: 100%; height: auto; }

/* an optional legend/key for the redraw — swatch background set inline by the author */
.ev-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  margin: .9rem 0 0;
  padding: 0;
  font-family: var(--grotesk);
  font-size: .72rem;
  color: var(--ink-muted);
}
.ev-key li { display: flex; align-items: center; gap: .45rem; }
.ev-swatch {
  width: .8rem; height: .8rem; flex: none; border-radius: 1px;
  box-shadow: inset 0 0 0 1px var(--rule);   /* a white swatch still exists on white paper */
}

/* ── the original document (theirs) ──────────────────────────────────────── */
.ev-original {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.ev-scan {
  display: block;
  width: 100%;
  /* NATIVE CAP inviolable — a scan is never shown past half its own pixels. */
  max-width: min(100%, calc(var(--ev-native, 100000px) / 2));
  height: auto;
}
/* a document keeps its own edges → no frame by default. A keyline is added ONLY when
   the document is white-on-white and would otherwise dissolve into the page. */
.ev-original.is-keyline .ev-scan { border: 1px solid var(--rule); }

.ev-prov {
  font-family: var(--grotesk);            /* our provenance annotation, beside the doc */
  font-size: .72rem;
  line-height: 1.45;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .55rem;
}
.ev-prov-date { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ev-prov-src + .ev-prov-date::before { content: "·"; margin-right: .55rem; color: var(--rule); }

/* ── the source table (data, sans) ───────────────────────────────────────── */
.ev-source-wrap { margin-top: .4rem; overflow-x: auto; }   /* a wide table scrolls in its own box, never the page */
.ev-source-head { display: block; margin-bottom: .6rem; }
.ev-source {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--grotesk);            /* DATA is sans */
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.ev-source thead th {
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-dk);
  /* tinted group-header band (Carrera p.401) — green, the marque, never gold */
  background: color-mix(in srgb, var(--green) 8%, transparent);
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--rule);
}
.ev-source tbody td {
  padding: .46rem .7rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);   /* hairlines only — no zebra, no borders */
  vertical-align: baseline;
}
.ev-source tbody tr:last-child td { border-bottom: 0; }
.ev-source .is-left   { text-align: left; }
.ev-source .is-right  { text-align: right; }
.ev-source .is-center { text-align: center; }
/* grey = estimated / unknown — the ONLY meaning grey carries inside data */
.ev-source .is-est { color: var(--ink-muted); }
/* red = a record superseding a claim — sparing, declared per cell */
.ev-source .is-record { color: var(--red); }
.ev-cell-note {
  display: block;
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: .12rem;
}

/* ── the caveat (our voice, prose serif) ─────────────────────────────────── */
.ev-caveat {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: .2rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-soft);
}
.ev-caveat a { color: var(--green); }

/* ── stack on narrow viewports: the redraw always leads, the original corroborates
      below it (Dispute B — attention, not area). Source and caveat follow in DOM order. */
@media (max-width: 48rem) {
  .evidence,
  .evidence.orig-left { grid-template-columns: 1fr; }
  .ev-redraw,
  .ev-original,
  .evidence.orig-left .ev-redraw,
  .evidence.orig-left .ev-original { grid-column: 1; }
}

/* ── print: the object is print-native (Carrera p.23). No fact is hover-only, so
      nothing needs a print fallback — only keep the object whole on the page. */
@media print {
  .evidence { break-inside: avoid; margin: 1.6rem 0; }
  .ev-tag-doc { border-color: var(--ink-muted); }
  .ev-source thead th { background: var(--paper-2); }
}


/* ==== DDR-003 imsa-weight-diagram ==== */
/* ============================================================================
   .imsa-weight-diagram — the 1994 IMSA Code minimum-weight grid, drawn.
   DDR-003 §4b. Owner: design agent (imsa-weight-diagram). Merge into site.css.

   A horizontal weight axis (2,450–3,300 lb) with every eligible Supercar placed
   on the minimum IMSA assigned it. Marks stack into a beeswarm where weights
   collide. The X180R and the Porsche 911 Turbo S2 are called out and the 400 lb
   between them is drawn; the two Lotus Esprits are the only 16-inch fronts.

   LAWS OBSERVED
   · No gold FILL — nothing here is a race result. Gold appears only as the
     default eyebrow (chrome).
   · Green is the marque's colour: the two Lotus cars and the hero. TINTED fill +
     green ring (the podium's discipline: tinted, not shouted), never saturated so
     it can never be misread as a result mark.
   · The rival is ink; red is never used (nothing is superseded here).
   · Prose is serif (lead, caveat), data is sans (marks, table, axis, callouts).
   · No fact lives only in hover: the tooltip mirrors each mark's aria-label and
     the always-visible source table. @media print keeps table + labels, drops the
     hover chrome.
   · Tokens only. overflow-x on the table scroll region is auto (never hidden).
   ============================================================================ */

.imsa-weight-diagram {
  margin: 3.4rem 0;
  padding: 2.2rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* ---- header --------------------------------------------------------------- */
.iwd-head { margin-bottom: 2rem; max-width: var(--measure); }
.iwd-title {
  font-family: var(--grotesk); font-weight: 800; font-size: 1.5rem; line-height: 1.15;
  color: var(--ink); margin: .5rem 0 0; letter-spacing: -.01em;
}
.iwd-lead {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.6;
  color: var(--ink-muted); margin: .7rem 0 0; max-width: 44rem;
}
.iwd-lead b {
  font-family: var(--grotesk); font-weight: 800; color: var(--green);
  font-variant-numeric: tabular-nums;
}

.iwd-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.1rem 0 0; padding: 0;
}
.iwd-lg {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--grotesk); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-muted); white-space: nowrap;
}
.iwd-swatch { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; flex: none; }
.iwd-swatch.is-field   { border: 1.5px solid var(--ink-muted); background: transparent; }
.iwd-swatch.is-sixteen { border: 1.5px solid var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.iwd-swatch.is-lotus   { border: 2px solid var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--paper); }
.iwd-swatch.is-rival   { border: 2px solid var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }

/* ---- the plot ------------------------------------------------------------- */
.iwd-chart { position: relative; }

/* height = a top band for the callouts + the beeswarm stack, driven by --rows */
.iwd-plot {
  position: relative;
  height: calc(104px + var(--rows, 6) * 15px);
  margin: 0 0 .2rem;
}

/* the marks --------------------------------------------------------------- */
/* every car is a dot; left is its weight, --row lifts it in its stack. Weight and
   label rank the marks; colour only names the marque (green = Lotus, ink = rival). */
.iwd-mark {
  position: absolute;
  bottom: calc(9px + var(--row, 0) * 15px);
  left: 0;
  width: 12px; height: 12px;
  margin-left: -6px;                 /* centre on the weight */
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid var(--ink-muted);
  background: var(--paper);
  cursor: help;
  transition: transform .12s ease, box-shadow .12s ease;
}
.iwd-mark.is-sixteen {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent);
}
.iwd-mark.is-lotus {
  width: 17px; height: 17px; margin-left: -8.5px;
  border: 2px solid var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  box-shadow: inset 0 0 0 4px var(--green);   /* a solid green core = the hero */
  z-index: 3;
}
.iwd-mark.is-rival {
  width: 15px; height: 15px; margin-left: -7.5px;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--paper);
  z-index: 3;
}
.iwd-mark:hover, .iwd-mark:focus-visible {
  outline: none;
  transform: scale(1.28);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent);
  z-index: 20;
}
.iwd-mark.is-rival:hover, .iwd-mark.is-rival:focus-visible {
  box-shadow: inset 0 0 0 2.5px var(--paper), 0 0 0 4px rgba(27,24,21,.14);
}

/* the tooltip ------------------------------------------------------------- */
.iwd-tip {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 15rem;
  display: none;
  padding: .5rem .65rem;
  background: var(--ink); color: var(--paper);
  border-radius: 3px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 28%, transparent);
  text-align: left;
  pointer-events: none;
  z-index: 30;
}
.iwd-mark:hover .iwd-tip, .iwd-mark:focus-visible .iwd-tip { display: block; }
.iwd-tip::after {                                  /* the little pointer */
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.iwd-tip-make {
  display: block; font-family: var(--grotesk); font-weight: 700;
  font-size: .74rem; line-height: 1.2; letter-spacing: .01em;
}
.iwd-tip-w {
  display: block; font-family: var(--grotesk); font-weight: 800;
  font-size: .9rem; margin-top: .15rem; font-variant-numeric: tabular-nums;
}
.iwd-tip-min { font-weight: 400; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.iwd-tip-t {
  display: block; font-family: var(--grotesk); font-size: .72rem;
  margin-top: .3rem; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.iwd-tip-k { color: var(--ink-muted); font-weight: 700; } /* was --gold — an axle-width label is not a result; gold is reserved for a win */
.iwd-tip-sep { opacity: .4; margin: 0 .1rem; }
.iwd-tip-rim {
  display: block; font-family: var(--grotesk); font-size: .58rem;
  text-transform: uppercase; letter-spacing: .1em; opacity: .72;
  margin-top: .3rem;
}

/* subject guides — the subject dots sit on these vertical lines ----------- */
.iwd-guide {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--rule);
  pointer-events: none;
}
.iwd-guide.is-lotus { border-left-color: color-mix(in srgb, var(--green) 40%, transparent); }
.iwd-guide.is-rival { border-left-color: color-mix(in srgb, var(--ink) 28%, transparent); }

/* the gap between the two subjects, drawn as the argument ------------------ */
.iwd-gap {
  position: absolute; top: 14px; height: 0;
  border-top: 1px solid var(--rule);
  pointer-events: none;
}
.iwd-gap::before, .iwd-gap::after {
  content: ""; position: absolute; top: -4px; width: 0; height: 9px;
  border-left: 1px solid var(--rule);
}
.iwd-gap::before { left: 0; }
.iwd-gap::after  { right: 0; }
.iwd-gap-fig {
  position: absolute; left: 50%; top: -.72rem; transform: translateX(-50%);
  background: var(--paper); padding: 0 .4rem;
  font-family: var(--grotesk); font-weight: 700; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* subject callouts -------------------------------------------------------- */
.iwd-callout {
  position: absolute; top: 30px;
  display: flex; flex-direction: column; gap: .05rem;
  pointer-events: none; z-index: 4;
  max-width: 12rem;
}
.iwd-callout.is-lotus { transform: translateX(-50%); text-align: center; }
.iwd-callout.is-rival { transform: translateX(-100%); text-align: right; padding-right: .5rem; }
.iwd-co-make {
  font-family: var(--grotesk); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.15;
}
.iwd-callout.is-lotus .iwd-co-make { color: var(--green-dk); }
.iwd-callout.is-rival .iwd-co-make { color: var(--ink); }
.iwd-co-w {
  font-family: var(--grotesk); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.iwd-co-u { font-size: .64rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.iwd-co-rim {
  font-family: var(--grotesk); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-muted);
}

/* the ruler --------------------------------------------------------------- */
.iwd-axis {
  position: relative; height: 2.6rem;
  border-top: 1px solid var(--rule);
}
.iwd-tick {
  position: absolute; top: .4rem; transform: translateX(-50%);
  font-family: var(--grotesk); font-size: .68rem; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.iwd-tick::before {                                 /* tick mark up to the axis */
  content: ""; position: absolute; top: -.4rem; left: 50%; transform: translateX(-50%);
  width: 1px; height: .3rem; background: var(--rule);
}
.iwd-tick.is-lotus { color: var(--green-dk); font-weight: 800; }
.iwd-tick.is-rival { color: var(--ink); font-weight: 800; }
.iwd-tick.is-lotus::before { background: var(--green); height: .45rem; top: -.45rem; }
.iwd-tick.is-rival::before { background: var(--ink); height: .45rem; top: -.45rem; }
.iwd-axis-unit {
  position: absolute; right: 0; bottom: 0;
  font-family: var(--grotesk); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-muted);
}

/* ---- the source table (the record) --------------------------------------- */
.iwd-source-wrap { margin: 2.6rem 0 0; }
.iwd-source-head { display: block; margin-bottom: .7rem; }
.iwd-source-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iwd-source {
  width: 100%; border-collapse: collapse; min-width: 30rem;
  font-family: var(--grotesk); font-size: .82rem;
}
.iwd-source thead th {
  background: var(--green-dk); color: var(--paper);
  font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .5rem .7rem; white-space: nowrap;
}
.iwd-source td {
  padding: .38rem .7rem;
  border-bottom: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.iwd-source .is-left  { text-align: left; }
.iwd-source .is-right { text-align: right; }
.iwd-src-make { font-weight: 600; }
.iwd-src-t { color: var(--ink-muted); letter-spacing: .01em; }
.iwd-src-rim { font-weight: 700; }

/* the marque row highlights — a tint, not a fill; a left hairline names the car.
   Green for Lotus (subject + the 16-inch anomaly), ink for the rival. Never gold. */
.iwd-src-row.is-sixteen td { background: color-mix(in srgb, var(--green) 5%, transparent); }
.iwd-src-row.is-sixteen .iwd-src-rim { color: var(--green-dk); }
.iwd-src-row.is-lotus td { background: color-mix(in srgb, var(--green) 11%, transparent); }
.iwd-src-row.is-rival td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* a SINGLE left edge on the row, drawn on the (explicitly classed) make cell — never
   a per-cell bar, and keyed off a class, not DOM position. */
.iwd-src-row.is-lotus .iwd-src-make { color: var(--green-dk); box-shadow: inset 3px 0 0 var(--green); }
.iwd-src-row.is-rival .iwd-src-make { box-shadow: inset 3px 0 0 var(--ink); }

/* ---- caveat + source line ------------------------------------------------- */
.iwd-caveat {
  font-family: var(--serif); font-style: italic; font-size: .92rem; line-height: 1.6;
  color: var(--ink-muted); margin: 1.4rem 0 0; max-width: 44rem;
}
.iwd-source-line {
  font-family: var(--grotesk); font-size: .72rem; line-height: 1.5;
  color: var(--ink-muted); margin: .8rem 0 0;
}
.iwd-source-lab {
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink); margin-right: .45rem;
}

/* ---- narrow screens ------------------------------------------------------- */
@media (max-width: 640px) {
  .iwd-title { font-size: 1.25rem; }
  .iwd-callout { max-width: 8.5rem; }
  .iwd-co-w { font-size: 1rem; }
  .iwd-co-make { font-size: .62rem; }
  /* the whole chart earns a horizontal scroll rather than crushing the beeswarm */
  .iwd-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .iwd-plot, .iwd-axis { min-width: 34rem; }
}

/* ---- print: the record and the labels stay; the hover chrome goes --------- */
@media print {
  .imsa-weight-diagram { break-inside: avoid; }
  .iwd-mark { cursor: default; transition: none; }
  .iwd-mark:hover, .iwd-mark:focus-visible { transform: none; box-shadow: none; }
  .iwd-tip { display: none !important; }
  .iwd-source thead th { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .iwd-src-row.is-lotus td, .iwd-src-row.is-rival td, .iwd-src-row.is-sixteen td { background: none; }
}


/* ==== DDR-003 dossier ==== */
/* ============================================================================
   .dossier — the fixed registry-entry skeleton            (DDR-003 §4b.13, Wave 4)

   Delta for static/css/site.css. Merged by the single serial integrator; do not
   paste into site.css here. Depends only on classes ALREADY shipped: .chassis-band
   / .chassis-vitals / .cv-* (section 01 vitals), .rc-prov-list / .rc-prov-* (the
   ownership chain), .framed (document edges), .chip, .pw-cta, .rc-prov-source,
   .record-note. Everything else is the new dsr-* skeleton chrome.

   The skeleton is a ledger: a right-aligned marker rail (number · label · status)
   against a body column, eight sections deep, identical on all twenty cars. The
   dead 0.33 column the brief measured is spent on the marker rail and on bodies
   that now run to real width.

   COLOUR LAW obeyed: grey (--ink-muted) means ONLY "not on file / unknown"; there
   is no gold fill anywhere (a road car has no wins); green heads and gold ticks are
   chrome. Documents are .framed (edges); photographs are not framed. No selector
   infers meaning from position — the empty state keys off the .is-empty class the
   template sets from a data flag, never off :first-child / :nth-child.
   ============================================================================ */

.dossier {
  margin: 2.4rem 0 0;
}

/* --- the section: marker rail + body ------------------------------------- */
.dossier .dsr-sec {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  column-gap: 3rem;
  padding: 2.8rem 0;
  border-top: 1px solid var(--rule);
}
.dossier .dsr-sec-id { padding-top: 1.6rem; }

/* --- the marker rail (right-aligned, faces the body across the gutter) ---- */
.dsr-marker {
  text-align: right;
  position: sticky;
  top: 2rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.dsr-num {
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink-muted);
  opacity: .38;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .01em;
}
.page-wrapper .dossier h2.dsr-label {
  font-family: var(--grotesk);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  line-height: 1.25;
  color: var(--green);
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.page-wrapper .dossier h2.dsr-label::before,
.page-wrapper .dossier h2.dsr-label::after { content: none; }

/* status tag — green filled tick = on file, grey hollow ring = not on file */
.dsr-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--grotesk);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .58rem;
  color: var(--ink-muted);
}
.dsr-tick {
  width: .5rem; height: .5rem; border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  flex: none;
}
.dsr-status.is-onfile { color: var(--green-dk); }
.dsr-status.is-onfile .dsr-tick { background: var(--green); border-color: var(--green); }
.dsr-status.is-empty { color: var(--ink-muted); opacity: .8; }

/* an empty section recedes but never disappears (no data loss) */
.dossier .dsr-sec.is-empty .dsr-num { opacity: .22; }

/* --- the body ------------------------------------------------------------- */
.dsr-body { min-width: 0; }
.dsr-body-wide { max-width: none; }

/* prose bodies hold the book measure; wide bodies (vitals, chain, docs) don't */
.dsr-account > p,
.dsr-account > ul,
.dsr-account > ol,
.dsr-note { max-width: var(--measure); }
.dsr-account > p:first-of-type { font-size: 1.12rem; line-height: 1.6; }
.dsr-note {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 1rem 0 0;
}
/* markdownify wraps a line in <p>; neutralise its default prose margins so the
   note/caption/missing blocks read as one thing, not a stray paragraph */
.dsr-note p,
.dsr-doc-cap p,
.dsr-missing p { margin: 0; max-width: none; }

/* label:value fact rows — the chassis-vitals idiom, reused for 02/04/08 */
.dsr-facts { margin: 0; padding: 0; max-width: 34rem; }
.dsr-fact {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dsr-fact dt {
  margin: 0;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink-muted);
  align-self: center;
}
.dsr-fact dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink);
}
/* grey = unknown, per the colour law; italic so it can't read as a datum */
.dsr-facts .cv-unk,
.dsr-body .cv-unk { color: var(--ink-muted); font-style: italic; opacity: .85; }

/* --- the NOT ON FILE state ------------------------------------------------ */
.dsr-empty {
  font-family: var(--serif);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.dsr-empty-line {
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.dsr-empty-ask {
  font-style: normal;
  font-size: .95rem;
  color: var(--ink-muted);
  opacity: .85;
}
.dsr-gap { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* --- 01 identification: the plaque band inside the skeleton --------------- */
.dsr-idband { margin: 0; border-bottom: 0; padding: 0; }

/* --- 03 provenance: extend the ported rc-prov-list to the road-car scope --- */
/* (.rc-prov-body text was scoped to .racecar; re-assert it under .dossier)   */
.dossier .rc-prov-list.dsr-prov { margin: .4rem 0 0; }
.dossier .rc-prov-body .rc-prov-text p {
  margin: 0 0 .5rem;
  max-width: 40rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.dossier .rc-prov-body .rc-prov-text p:last-child { margin-bottom: 0; }
.dsr-prov-place {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* a contested owner claim rides in red beside the chain (record superseding) */
.dsr-prov-recnote { margin: .5rem 0 0; max-width: 40rem; }

/* --- 06 documents: the framed ledger ------------------------------------- */
.dsr-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.dsr-doc {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
/* a document keeps its own edges — .framed supplies border + shallow shadow.
   the thumbnail is far below any scan's native/2, so the figure cap is never
   at risk; the full scan opens in a new tab. */
.dsr-doc-thumb {
  display: block;
  margin: 0;
  padding: .35rem;
  background: var(--paper);
}
.dsr-doc-thumb img { display: block; width: 100%; height: auto; }
.dsr-doc-meta { display: flex; flex-direction: column; gap: .45rem; padding-top: .2rem; }
.dsr-doc-kind {
  font-family: var(--grotesk);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--green-dk);
}
.dsr-doc-cap {
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 30rem;
}

/* --- 08 record & sources -------------------------------------------------- */
.dsr-missing {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--measure);
  margin: 1.4rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule-soft);
}
.dsr-missing-lab {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .64rem;
  color: var(--ink-muted);
  margin-bottom: .35rem;
}
.dsr-sources { margin: 1.6rem 0 0; }
.dsr-sources-head {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .64rem;
  color: var(--ink-muted);
  margin-bottom: .5rem;
}
.dsr-sourcelist {
  margin: 0;
  padding-left: 1.2rem;
  max-width: 40rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.dsr-sourcelist li { margin: 0 0 .4rem; }
.dsr-sourcelist li p { margin: 0; display: inline; }

/* --- responsive: collapse the marker rail above the body ------------------ */
@media (max-width: 760px) {
  .dossier .dsr-sec { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .dsr-marker {
    position: static;
    text-align: left;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: baseline;
  }
  .dsr-num { font-size: 1.25rem; }
  .dsr-doc { grid-template-columns: 1fr; }
  .dsr-doc-thumb { max-width: 14rem; }
}

/* --- print: the skeleton is the point on paper ---------------------------- */
@media print {
  .dsr-marker { position: static; }
  .dsr-status { color: var(--ink-muted); }
  /* "Not on file" printed eight times, twenty times over, IS the argument —
     nothing here is hidden on paper. */
  .dossier .dsr-sec.is-empty { break-inside: avoid; }
  .dsr-doc-thumb { break-inside: avoid; }
}


/* ==== DDR-003 provbar ==== */
/* ============================================================================
   .provbar — the provenance bar (DDR-003 §4b component 8; Wave 4)
   ----------------------------------------------------------------------------
   A time-proportional ownership track, 1991 → the current year, for one X180R
   homologation chassis, plus a stacked twenty-car record-health chart. Reuses
   the dot-rail idiom (a spine of tenures on one channel) and answers the one
   question the register raises: which cars are actually accounted for?

   Honest encoding, three evidence states — and NO gold fill (a saturated gold
   fill means a race win, nowhere else). Gold appears here only as chrome
   (the eyebrow, the badge link, a hover ring):
     · documented tenure  → INK  (var(--ink))
     · inferred / dates reconstructed → GREY (var(--ink-muted); the R10 token
       "grey = estimated/unknown")
     · a gap (record lost) → the empty groove, never filled
   A faded segment edge marks an undated handover dissolving into a gap.

   No fact lives only in a hover: owner, dates and source are printed in the DOM
   (the .pv-key list in chassis mode; the .pv-sr summary, un-hidden for print, in
   stack mode). The `title` hover only re-surfaces that same text.

   Tokens only. Prose is serif; data/labels are grotesk.
   Merge target: static/css/site.css (integrator). Delta author owns THIS file.
   ============================================================================ */

.provbar {
  --pv-track-h: 15px;          /* channel height, chassis mode */
  --pv-track-h-mini: 11px;     /* channel height, stack row     */
  --pv-badge-col: 2.4rem;      /* stack: badge column width     */
  --pv-row-gap: .7rem;         /* stack: badge-to-track gap      */
  margin: 2.4rem 0;
  max-width: var(--measure);
}
.provbar-stack { max-width: 46rem; }   /* the whole register earns a wider plane */

/* ---- caption row: eyebrow left, span right -------------------------------- */
.pv-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 1.1rem;
}
.pv-cap-range {
  font-family: var(--grotesk); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- the axis ------------------------------------------------------------- */
.pv-axis { position: relative; height: 1.15rem; margin-bottom: .45rem; }
.pv-tick {
  position: absolute; left: var(--x); top: 0; transform: translateX(-50%);
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  letter-spacing: .03em; color: var(--ink-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.pv-tick::after {                        /* a short downward reference tick */
  content: ""; position: absolute; left: 50%; top: 1.15rem;
  width: 1px; height: 4px; background: var(--rule);
}
/* keep the edge labels from clipping — keyed off the tick VALUE in the
   template (is-start / is-end), never off DOM position */
.pv-tick.is-start { transform: translateX(0); }
.pv-tick.is-start::after { left: 0; }
.pv-tick.is-end { transform: translateX(-100%); }
.pv-tick.is-end::after { left: auto; right: 0; }

/* ---- the track (channel) + segments --------------------------------------- */
.pv-track {
  position: relative; height: var(--pv-track-h); border-radius: 4px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule-soft);   /* an empty channel = a gap */
}
.pv-seg {
  position: absolute; top: 0; bottom: 0;
  left: var(--l); width: var(--w); min-width: 5px;
  border-radius: 3px;
  background: var(--ink);                          /* documented = ink */
  transition: box-shadow .12s ease, filter .12s ease;
}
.pv-seg.is-inferred { background: var(--ink-muted); }  /* reconstructed = grey */

/* faded edges — an undated handover dissolving into a gap. The position is the
   best-supported bound; the fade says "not a hard date." */
.pv-seg.is-open-r {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}
.pv-seg.is-open-l {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 100%);
          mask-image: linear-gradient(to left, #000 52%, transparent 100%);
}
.pv-seg.is-open-l.is-open-r {                      /* both ends undated */
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 66%, transparent 100%);
}

/* hover enrichment (mouse): a gold chrome ring + the native title tooltip */
.pv-seg:hover {
  z-index: 2;
  filter: brightness(1.08);
  box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--gold);
}

/* ============================ CHASSIS MODE: the keyed list ================= */
/* the canonical, always-in-DOM, print form (Carrera p.23) */
.pv-key {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.pv-key-item {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr) auto;
  column-gap: .9rem; row-gap: .15rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft);
}
.pv-swatch {
  grid-column: 1; grid-row: 1; margin-top: .28rem;
  width: .8rem; height: .8rem; border-radius: 2px; flex: none;
  background: var(--ink);
}
.pv-key-item.is-inferred .pv-swatch { background: var(--ink-muted); }
.pv-key-owner {
  grid-column: 2; grid-row: 1;
  font-family: var(--grotesk); font-weight: 700; font-size: 1rem;
  color: var(--ink); line-height: 1.3;
}
.pv-key-place { font-weight: 400; color: var(--ink-muted); }
.pv-key-dates {
  grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap;
  font-family: var(--grotesk); font-weight: 600; font-size: .9rem;
  color: var(--green-dk); font-variant-numeric: tabular-nums lining-nums;
}
.pv-key-grade {
  grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap;
  font-family: var(--grotesk); font-weight: 700; font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.pv-key-item.is-documented .pv-key-grade { color: var(--green); }
.pv-key-source {
  grid-column: 2 / 3; grid-row: 2;   /* stays in the middle column; col 3/row 2 is the grade */
  font-family: var(--serif); font-size: .88rem; line-height: 1.5;
  color: var(--ink-muted); max-width: 40rem; padding-right: .5rem;
}

/* ---- the caveat line (honesty note under any data object) ----------------- */
.pv-caveat {
  margin: 1rem 0 0;
  font-family: var(--serif); font-style: italic; font-size: .9rem;
  line-height: 1.55; color: var(--ink-muted); max-width: 40rem;
}
.pv-caveat.pv-empty { margin-top: 1.2rem; }

/* ============================ STACK MODE: twenty rows ====================== */
.pv-axis-stack { margin-left: calc(var(--pv-badge-col) + var(--pv-row-gap)); }

.pv-rows { list-style: none; margin: 0; padding: 0; }
.pv-row {
  display: grid; align-items: center;
  grid-template-columns: var(--pv-badge-col) 1fr;
  column-gap: var(--pv-row-gap);
  padding: .32rem .4rem; border-radius: 4px;
  transition: background .12s ease;
}
.pv-row:hover { background: rgba(169, 130, 42, .08); }   /* gold chrome hover */
.pv-row + .pv-row { margin-top: .1rem; }

.pv-row-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.5rem; padding: 0 .35rem;
  font-family: var(--grotesk); font-weight: 800; font-size: .92rem;
  color: var(--gold); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 3px;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pv-row-badge:hover, .pv-row-badge:focus-visible {
  background: var(--gold); color: #fff; border-color: var(--gold);
  outline: none;
}
.pv-track-mini { height: var(--pv-track-h-mini); }
.pv-row.is-blank .pv-track { background: var(--paper-2); }  /* all gap = not on file */

/* ---- legend --------------------------------------------------------------- */
.pv-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.1rem 0 0; padding: 0;
  font-family: var(--grotesk); font-size: .78rem; color: var(--ink-muted);
}
.pv-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.pv-legend .pv-swatch { margin: 0; width: .8rem; height: .8rem; }
.pv-swatch.is-documented { background: var(--ink); }
.pv-swatch.is-inferred { background: var(--ink-muted); }
.pv-swatch.is-gap {
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule-soft);
}

/* ---- the DOM-resident owner summary (screen-hidden; printed) -------------- */
.pv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ responsive ================================== */
@media (max-width: 560px) {
  .pv-key-item { grid-template-columns: 1.05rem minmax(0, 1fr); }
  .pv-key-dates { grid-column: 2; grid-row: 2; text-align: left; }
  .pv-key-grade { grid-column: 2; grid-row: 3; text-align: left; }
  .pv-key-source { grid-column: 1 / 3; grid-row: 4; }
  .provbar { --pv-badge-col: 2rem; }
}

/* ============================ print ======================================= */
@media print {
  .provbar { break-inside: avoid; margin: 1.4rem 0; }
  .pv-seg, .pv-swatch, .pv-track {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pv-seg:hover { box-shadow: none; filter: none; }
  .pv-row:hover { background: none; }
  /* stack: the owner/date summary that is screen-hidden must print (no data loss) */
  .pv-sr {
    position: static; width: auto; height: auto; margin: 0; clip: auto;
    overflow: visible; white-space: normal;
    display: block; grid-column: 1 / -1;
    font-family: var(--serif); font-size: .82rem; color: var(--ink-muted);
    margin-top: .2rem;
  }
  .pv-row { break-inside: avoid; }
}


/* ==== DDR-003 dataplate ==== */
/* ============================================================================
   .dataplate  —  a section that is ONE figure and nothing else (Carrera p.263)
   DDR-003 §4b component 9.  Delta for static/css/site.css (merged by the integrator).

   Two named figures ship with it, plus a generic inner-content form:
     .dataplate.is-title    the decisive-numeral ledger (1992: "16" won / "3" lost)
     .dataplate.has-matrix  the record-health matrix (20 chassis × 5 kinds of record)
     .dataplate             a generic one-figure plate (author supplies the figure)

   THE COLOUR LAW.  The ONLY saturated gold fill here is a numeral that stands for a
   WIN (.dp-entry.is-win .dp-num). A loss is ink. A matrix "on file" chip is ink; an
   empty chip is an open hairline square. Grey is reserved for the caveat (unknown).
   Data is sans (Archivo); the caveat is prose (Spectral). Tokens only.
   ========================================================================== */

.dataplate {
  margin: 3.4rem auto;
  max-width: 40rem;
  padding: 2.4rem 0 2.1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

/* --- head (eyebrow + title) ------------------------------------------------ */
.dp-head { margin-bottom: 1.9rem; }
.dp-eyebrow { display: block; }
.dp-title {
  margin: .5rem 0 0;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: .002em;
  color: var(--ink);
  max-width: 32rem;
}

/* --- caveat + source (shared by every form) -------------------------------- */
.dp-caveat {
  margin: 1.6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.dp-source {
  margin: .85rem 0 0;
  font-family: var(--grotesk);
  font-size: .74rem;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.dp-source-lab {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .66rem;
  color: var(--ink);
  margin-right: .55rem;
}

/* ============================================================================
   FORM A — the title ledger.  Big display numerals over a ledger rule.
   ========================================================================== */
.dataplate.is-title { max-width: 42rem; }

.dp-ledger {
  display: grid;
  grid-template-columns: repeat(var(--dp-entries, 2), 1fr);
}
.dp-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.6rem;
}
.dp-entry + .dp-entry { border-left: 1px solid var(--rule); }

.dp-entry-label {
  --eb-size: .68rem;
  --eb-ink: var(--ink-muted);
  display: block;
  min-height: 2.4em;              /* two label lines align across columns */
  margin-bottom: .5rem;
}

/* the figure row carries the ledger rule; equal min-height keeps the rule
   continuous across every column, like the subtotal line of an account book */
.dp-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--ink);
}
.dp-verb {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.dp-num {
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: clamp(3.6rem, 11vw, 6.4rem);
  line-height: .82;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
/* THE ONE LICENSED GOLD FILL: a numeral that is a win. */
.dp-entry.is-win .dp-num { color: var(--gold); }

.dp-detail {
  margin-top: .8rem;
  font-family: var(--grotesk);
  font-size: .82rem;
  line-height: 1.4;
  letter-spacing: .008em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================================
   FORM B — the record-health matrix.  20 rows × N record columns.
   Filled chip = on file (ink); open chip = a gap (hairline square).
   ========================================================================== */
.dataplate.has-matrix { max-width: 44rem; }

.dp-scroll { overflow-x: auto; overflow-y: clip; }

.dp-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--grotesk);
  font-variant-numeric: tabular-nums lining-nums;
}

/* column heads — set vertical so five records fit a book column, still real text */
.dp-matrix thead th.dp-mx-col {
  vertical-align: bottom;
  padding: 0 0 .6rem;
  border-bottom: 2px solid var(--ink);
}
.dp-mx-col-lab {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.dp-matrix thead th.dp-mx-badge { border-bottom: 2px solid var(--ink); }

/* badge column (reuses the register's .reg-badge for one shared vocabulary) */
.dp-mx-badge {
  width: 3.2rem;
  text-align: left;
  padding: .32rem .9rem .32rem 0;
  white-space: nowrap;
}
.dp-mx-badge .reg-badge { padding: .12rem .5rem; font-size: .82rem; }

.dp-mx-row { transition: background .12s; }
.dp-mx-row + .dp-mx-row .dp-mx-cell,
.dp-mx-row + .dp-mx-row .dp-mx-badge { border-top: 1px solid var(--rule-soft); }
.dp-mx-row:hover { background: var(--paper-2); }

.dp-mx-cell {
  text-align: center;
  padding: .32rem 0;
  min-width: 2.6rem;
}

/* the chip — a solid square when the record exists, an open one when it does not */
.dp-chip {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  vertical-align: middle;
  transition: transform .12s;
}
.dp-mx-cell.is-on  .dp-chip { background: var(--ink); }
.dp-mx-cell.is-off .dp-chip { background: transparent; border: 1px solid var(--rule); }
.dp-mx-cell.is-on:hover .dp-chip { transform: scale(1.18); }

/* totals row */
.dp-mx-totals th,
.dp-mx-totals td { border-top: 2px solid var(--ink); padding-top: .7rem; }
.dp-mx-total { text-align: center; }
.dp-mx-total-n {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
}
.dp-mx-total-of { font-size: .72rem; color: var(--ink-muted); }
.dp-mx-total-lab,
.dp-mx-col-lab.dp-mx-total-lab {
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* legend */
.dp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 1.1rem 0 0;
  font-family: var(--grotesk);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.dp-legend-item { display: inline-flex; align-items: center; gap: .5rem; }
.dp-chip-on  { background: var(--ink); }
.dp-chip-off { background: transparent; border: 1px solid var(--rule); }

/* --- generic one-figure body ---------------------------------------------- */
.dp-body { display: block; }
.dp-body > svg,
.dp-body > img,
.dp-body > table { max-width: 100%; }

/* --- narrow screens -------------------------------------------------------- */
@media (max-width: 640px) {
  .dp-ledger { grid-template-columns: 1fr; }
  .dp-entry { padding: 1.4rem 0; }
  .dp-entry + .dp-entry { border-left: 0; border-top: 1px solid var(--rule); }
  .dp-entry-label { min-height: 0; }
}


/* ==== DDR-003 cited ==== */
/* ---------------------------------------------------------------------------------------
   .cited + .sourcelist — THE CITATION APPARATUS.
   DDR-003 §4b.3. Shortcodes: layouts/shortcodes/cited.html, layouts/shortcodes/sourcelist.html.

   31 `<!-- SOURCE: ... GRADE A -->` research comments in the story markdown, and the
   provenance notes in data/results/1992.yaml, currently render to NOTHING. This is the
   printed form of that research: a superscript numeral on the individual figure (Carrera
   p.23's device), keyed to a numbered italic-serif source list beneath the section, with
   a plain-English caveat above it. Confidence is carried typographically, never by a new
   colour — this component does not touch gold, green or red at all. See the colour law:
   gold is a WIN, red is a correction superseding a claim; a citation is neither, so it
   stays in ink / ink-muted the whole way down, exactly like .caveat and .inference.

   TWO DIFFERENT axes, both real, easy to conflate:
     - .cited[data-conf]   → is THIS figure measured or estimated (ink vs. --ink-muted)
     - .sourcelist-grade   → how reliable is THE SOURCE (A/B/C, text only, no colour)
   A grade-A source can back an estimated figure; a grade-B source can back a measured
   one. Keeping them as two separate, uncoloured signals is what makes both legible
   without inventing a colour scheme the standing law doesn't license.
   --------------------------------------------------------------------------------- */

/* ---- .cited — the superscript mark, optionally wrapping the figure it supports ---- */

.page-wrapper .cited { position: relative; }

/* The wrapped figure (only present in the "wrapping" call form). Measured (default) costs
   nothing: no colour change at all, so a bare {{< cited n="3" >}}fact{{< /cited >}} reads
   identically to plain prose until you notice the numeral. */
.page-wrapper .cited-fig { color: inherit; }
.page-wrapper .cited[data-conf="estimated"] .cited-fig { color: var(--ink-muted); }

/* The mark itself is chrome (a footnote pointer), not a result — always ink-muted,
   regardless of the figure's own confidence, exactly like a printed footnote number. */
.page-wrapper .cited-marks {
  font-family: var(--grotesk);
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .01em;
  margin-left: .05em;
}
.page-wrapper .cited-num {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.page-wrapper .cited-num:hover,
.page-wrapper .cited-num:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.page-wrapper .cited-sep { color: var(--ink-muted); margin: 0 .04em; }

/* ---- .sourcelist — the numbered italic-serif source list beneath the section ---- */

.page-wrapper .sourcelist {
  margin: 2.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
/* .sourcelist > .caveat (the plain-English line above the list) is the existing .caveat
   component (layouts/shortcodes/caveat.html, styled in docs/design-waves/caveat.css) —
   reused whole, not redeclared here. */
.page-wrapper .sourcelist > .caveat { margin: 0 0 1.1rem; }

.page-wrapper .sourcelist-items { list-style: none; margin: 0; padding: 0; }

.page-wrapper .sourcelist-item {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule-soft);
  scroll-margin-top: 5rem; /* clears a fixed header when a #src-N link is followed */
}
.page-wrapper .sourcelist-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* A reader who follows a {{< cited >}} link lands here — the only feedback that they
   arrived at the right row. Plain paper-2 wash, no new colour, fades on its own once the
   fragment loses focus (no JS: :target tracks the URL, not a click). */
.page-wrapper .sourcelist-item:target { background: var(--paper-2); }

.page-wrapper .sourcelist-num {
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .82rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-muted);
}

.page-wrapper .sourcelist-body { flex: 1 1 auto; min-width: 0; }

.page-wrapper .sourcelist-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
}
.page-wrapper .sourcelist-text p { margin: 0; }
.page-wrapper .sourcelist-text em,
.page-wrapper .sourcelist-text strong { font-style: italic; } /* a verbatim quote nested in
  an already-italic citation still needs to read as emphasis; weight carries it instead of
  a second, illegible layer of italics-on-italics. */
.page-wrapper .sourcelist-text strong { font-weight: 700; font-style: normal; }

.page-wrapper .sourcelist-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: .4rem 0 0;
  font-style: normal; /* the meta row is not prose — undo the italic the text row set */
}

.page-wrapper .sourcelist-link {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
}
.page-wrapper .sourcelist-link:hover { color: var(--gold); }

/* The research grade, legible as TEXT only — see the note at the top of this file on why
   A/B/C never gets a colour of its own. */
.page-wrapper .sourcelist-grade {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink-muted);
}

@media (max-width: 560px) {
  .page-wrapper .sourcelist-item { gap: .6rem; }
  .page-wrapper .sourcelist-num { min-width: 1.2rem; font-size: .76rem; }
}


/* ==== DDR-003 caveat ==== */
/* ---- .caveat — the one honesty-line idiom, folding in six prior names --------------------
   (.st-nopoints, .st-note, .sr-series-note, .career-foot, .h2h-foot, .rival-vitals-note)

   Prose, so serif, so italic: the author stepping in beside a table/standings/head-to-head to
   say what it does NOT claim. Sits directly under the data object it caveats, never floated
   off to a separate "notes" section — proximity is the whole point.

   Sizing is intentionally modest and fixed across every consumer: the prior six ranged from
   .72rem to .98rem depending on which component happened to define it, with nothing about the
   difference meaning anything. One size removes six accidental variances. */
.caveat {
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: .7rem 0 0;
  max-width: var(--measure);
}

/* A caveat nested inside a component that already constrains width (e.g. a table cell or a
   narrow side-panel) shouldn't fight that container for space. */
.caveat:last-child { margin-bottom: 0; }

/* inline emphasis inside a caveat (h2h-foot's <em>claimed</em>, etc.) reads as the marque's own
   claim being singled out, not as a design accent — weight only, no colour, no underline. */
.caveat em, .caveat strong { font-style: italic; font-weight: 700; color: var(--ink); }


/* ==== DDR-003 rail ==== */
/* ==========================================================================
   .rail — DDR-003 §4b — Maeder's right evidence rail.

   A LAYOUT LAW, not a widget: grid-template-columns: var(--measure) 3rem
   var(--margin-fig)  (36rem prose · 3rem gutter · 22rem evidence).

   Why: on story, racing, registry, technical and home pages the 0.33–0.35
   dead column beside the prose IS this rail, unbuilt. `.imgfig.margin`
   (22rem, float-right, defined in site.css line ~2016) already carries the
   evidence-column width and the native cap — it has simply never been
   given a gutter or a caption to sit in. This file gives it both, and adds
   the .rail grid so the prose column stops moving when a figure appears
   or disappears beside it.

   THE MECHANISM — why grid, not the existing float:
   `.imgfig.margin`'s current float rule works fine for ONE figure dropped
   into unconstrained prose, but this rail asks for two things a float
   cannot do on its own: (1) a caption that sits BESIDE the picture, in a
   dedicated 3rem gutter, rather than below it, and (2) a prose column
   whose width is fixed at var(--measure) regardless of how many figures
   stack in the evidence column. A 3-track grid gives both for free: prose
   is grid-column 1 (fixed), the gutter is grid-column 2 (fixed), evidence
   is grid-column 3 (capped). Multiple figures, each only naming a column,
   auto-place into successive rows — "stacked figures flush right" with no
   JS and no explicit row bookkeeping. `.rail-prose` spans every row
   (`grid-row: 1 / -1`), so it reads as one continuous column beside
   however many figures are stacked.

   CAPTION-HUGS-PICTURE — a figcaption is a child of <figure>, and <figure>
   is the grid item in column 3; a caption cannot be a *sibling* grid item
   in column 2 without either detaching it from its figure in the DOM
   (bad: breaks the imgfig shortcode's own markup contract) or using
   `display: contents` (fragile across the other .imgfig modifiers that
   style the figure box itself, e.g. .framed's border+shadow). Instead the
   figure is `position: relative` and the caption is absolutely positioned
   into the gutter, right-aligned, flush against the figure's own left
   edge — visually in column 2, structurally still the figure's own
   caption, still read by a screen reader as this image's caption, still
   in the DOM with zero hover-gating (NO DATA LOSS: nothing here is
   revealed only on hover).

   Overflow is deliberately `visible`, never clipped: the gutter caption
   grows DOWN if the text runs long. That is a pressure valve, not the
   design target — this component is written for the "short" captions the
   brief asks for; a long one still shows every word, just less tidily.

   Third-column safety valve: the evidence column is written as
   `minmax(0, var(--margin-fig))`, not a bare `22rem`. On the ten story
   chapters this rail nests inside `.chapter-main`, which already gives up
   15rem + a 3.5rem gap to the protected chapter TOC rail — there is not
   always a full 61rem (36+3+22) on offer. `minmax(0, …)` lets the evidence
   column give way before the layout overflows; the prose column and the
   gutter, the two tracks the caption mechanic and "prose never moves"
   depend on, stay literal and never shrink.
   ========================================================================== */

.rail {
  display: grid;
  grid-template-columns: var(--measure) 3rem minmax(0, var(--margin-fig, 22rem));
  column-gap: 0;
  align-items: start;
}

/* The prose column. Fixed at the measure, spans every row the evidence
   column creates, and never widens to fill leftover space — an empty
   .rail (a page with no evidence yet) still reads at book width, not
   full-bleed. */
.rail-prose {
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
  max-width: var(--measure);
}

/* An evidence figure: a direct child of .rail, still an .imgfig.margin so
   it keeps the native-cap machinery (--cap from --native) and any modifier
   (.framed, .cutout) untouched. This scoped override replaces the FLOAT
   behaviour with a grid placement; nothing here is !important — three
   classes (.rail .imgfig .margin) already out-specifies the two-class
   base rule. */
.rail > .imgfig.margin {
  grid-column: 3;
  float: none;
  clear: none;
  position: relative;
  width: 100%;
  max-width: min(var(--margin-fig, 22rem), var(--cap, 100000px));
  /* flush right even when the native cap makes a figure narrower than the
     column — "stacked figures flush right" is a column rule, not a figure
     rule. */
  justify-self: end;
  margin: 0 0 2.6rem;
}
.rail > .imgfig.margin:last-child { margin-bottom: 0; }

/* The gutter caption. Right-aligned italic serif per the brief (this is
   the one place on the site a caption is deliberately serif, not the
   sitewide sans .figure-caption voice — a margin gloss reads as a closer
   cousin of the prose it annotates than of the UI chrome). Positioned
   into the 3rem gutter, hugging the picture: its right edge sits a
   hairline short of the figure's own left edge, never touching. */
.rail > .imgfig.margin > .figure-caption {
  position: absolute;
  top: 0;
  right: calc(100% + .5rem);
  width: 2.3rem;
  max-width: none;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: .78rem;
  line-height: 1.4;
  text-align: right;
  color: var(--ink-muted);
}
.rail > .imgfig.margin > .figcaption-credit {
  display: block;
  margin: .25rem 0 0;
  opacity: .8;
}

/* Hard guard — a figure floated INSIDE the prose column (.imgfig.left /
   .imgfig.right used inline, mid-paragraph, as opposed to the .margin
   figures that live in the evidence column) is capped at 18rem here,
   overriding the sitewide 44%-of-container default. Inside a 36rem
   measure, 44% is a figure wide enough to leave running text an
   uncomfortably narrow, hyphen-heavy column; 18rem keeps a readable
   column beside it. */
.rail-prose .imgfig.left,
.rail-prose .imgfig.right {
  max-width: min(18rem, var(--cap, 100000px));
}

/* ---- responsive: below this width there is no honest way to hold a
   36rem prose column, a 3rem gutter AND an evidence column side by side
   without crowding the text. Collapse to a single column; the gutter
   caption mechanic (which depends on the gutter track existing) reverts
   to a normal figcaption sitting under its picture, same as every other
   .imgfig on the site at this breakpoint. ---- */
@media (max-width: 900px) {
  .rail { display: block; }
  .rail-prose { max-width: 100%; }
  .rail > .imgfig.margin {
    display: block;
    float: none;
    position: static;
    width: 100%;
    max-width: min(28rem, var(--cap, 100000px));
    margin: 1.8rem auto;
  }
  .rail > .imgfig.margin > .figure-caption {
    position: static;
    width: auto;
    max-width: none;
    margin-top: .6rem;
    text-align: left;
  }
}

/* ---- print: "it IS a print device; the caption flips into the gutter" —
   already true above (the grid holds under print media), this only keeps
   a figure and its caption from splitting across a page break. ---- */
@media print {
  .rail > .imgfig.margin { break-inside: avoid; }
}


/* ==== DDR-003 specpanel ==== */
/* ==========================================================================
   .specpanel — the spec panel (DDR-003 §4b.2)
   Template:  layouts/shortcodes/specpanel.html
   Data:      data/specpanel/*.yaml

   Two renderings, one component:
     .specpanel.is-dossier  — a <dl>, one value column   (glossary / vitals list)
     .specpanel.is-matrix   — a <table>, 2–3 value columns, tinted group-head rows

   No borders (no boxed bootstrap-table cells), no zebra (no alternating row fill).
   The only rule is the single hairline under the column-header row and a soft
   dotted hairline under every data row — a typographic device, not a box.

   DATA IS SANS: every label/value in this component is set in --grotesk. Prose
   set THROUGH a specpanel (there is none — this is a table/dl, not a lede) would
   stay --serif, but there is no such content here.

   COLOUR LAW: `.is-diff` uses font-weight, not fill, to carry its signal, plus an
   OUTLINED (never filled) gold ring — the same chrome-weight the pole badge uses,
   because a spec difference is not a win and may not take the filled colour. Grey
   (--ink-muted) marks `.is-unknown` / `.is-est`, which is a neutral ink shade, not
   part of the gold/green/red result vocabulary.
   ========================================================================== */

.specpanel-wrap { margin: 2rem 0 2.4rem; max-width: 100%; overflow-x: auto; }

/* ---- shared title (dossier) / caption (matrix) -------------------------- */
.specpanel-title,
table.specpanel caption {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  margin: 0 0 .7rem;
  caption-side: top;
}

/* ==========================================================================
   MATRIX MODE — table.specpanel.is-matrix
   ========================================================================== */
table.specpanel.is-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--grotesk);
  font-size: .92rem;
  color: var(--ink);
}

.specpanel.is-matrix .spx-colhead,
.specpanel.is-matrix .spx-corner {
  text-align: left;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 .85rem .55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
.specpanel.is-matrix .spx-corner { width: 1%; }

/* tinted group-header band — a full-width tint, never a solid fill bar */
.specpanel.is-matrix .specpanel-group-head th {
  background: var(--paper-2);
  border-left: 2px solid var(--green);
  text-align: left;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--green-dk);
  padding: .55rem .75rem;
}
.specpanel.is-matrix tbody + tbody .specpanel-group-head th { padding-top: .95rem; }
.specpanel.is-matrix .spx-group-num {
  display: inline-block;
  color: var(--ink-muted);
  font-weight: 600;
  margin-right: .6em;
  font-variant-numeric: tabular-nums;
}

/* data rows — right-aligned label, left-aligned value(s), soft dotted hairline */
.specpanel.is-matrix .spx-label {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  padding: .5rem .85rem .5rem 0;
  border-bottom: 1px dotted var(--rule-soft);
  vertical-align: baseline;
  white-space: nowrap;
}
.specpanel.is-matrix .spx-value {
  text-align: left;
  font-weight: 400;
  padding: .5rem .85rem .5rem 0;
  border-bottom: 1px dotted var(--rule-soft);
  vertical-align: baseline;
}
.specpanel.is-matrix .spx-value:last-child { padding-right: 0; }

.specpanel.is-matrix .spx-value.is-unknown { color: var(--ink-muted); }
.specpanel.is-matrix .spx-value.is-est { color: var(--ink-muted); font-style: italic; }

.specpanel.is-matrix .spx-value.is-diff { font-weight: 700; }
.specpanel.is-matrix .spx-value.is-diff::before {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .5em;
  border-radius: 50%;
  border: 1.5px solid var(--gold);   /* outline = chrome, never a fill; see colour law */
  vertical-align: middle;
}

/* narrow viewport: let the matrix scroll its own box rather than clip prose */
@media (max-width: 640px) {
  table.specpanel.is-matrix { font-size: .84rem; }
  .specpanel.is-matrix .spx-label,
  .specpanel.is-matrix .spx-value,
  .specpanel.is-matrix .spx-colhead { padding-left: .5rem; padding-right: .5rem; }
}

/* ==========================================================================
   DOSSIER MODE — dl.specpanel.is-dossier
   ========================================================================== */
dl.specpanel.is-dossier {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) minmax(8rem, 26rem);
  column-gap: 1.1rem;
  row-gap: 0;
  margin: 0;
  font-family: var(--grotesk);
  font-size: .92rem;
}
.specpanel.is-dossier .spx-row { display: contents; }

.specpanel.is-dossier .spx-label {
  grid-column: 1;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: .42rem 0;
  border-bottom: 1px dotted var(--rule-soft);
}
.specpanel.is-dossier .spx-value {
  grid-column: 2;
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  padding: .42rem 0;
  border-bottom: 1px dotted var(--rule-soft);
}
.specpanel.is-dossier .spx-value.is-unknown { color: var(--ink-muted); }
.specpanel.is-dossier .spx-value.is-est { color: var(--ink-muted); font-style: italic; }

/* the note — same "author steps in" idiom as .caveat, but short enough to hang directly
   off its own value rather than sit below the whole panel. Serif/italic on purpose:
   data is sans, but this is a sentence, not a spec. */
.specpanel.is-dossier .spx-note {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: .82rem; line-height: 1.4; color: var(--ink-muted);
  margin-top: .15rem;
}

@media (max-width: 480px) {
  dl.specpanel.is-dossier { grid-template-columns: minmax(7rem, 10rem) 1fr; column-gap: .7rem; }
}


/* ==== rival page: /racing/porsche-964-turbo-s2/ ==========================
   .rival-dossier, .h2h, .count-fork, .ledger, .rival-people had NEVER been
   styled — every rule below is new, not a revision. The page rendered as raw
   browser-default <dl>/<div> soup: no head-to-head layout, no championship
   ledger, unconstrained-width blocks. .rival-vitals was replaced separately
   with {{< specpanel data="specpanel/porsche-vitals" >}} (see the DOSSIER MODE
   section above) rather than hand-styled here — reuse over a one-off.

   COLOUR LAW, applied to a two-marque comparison: green identifies Lotus, ink
   identifies the rival — the same pairing already used on the era comparison
   (.iwd-*.is-rival) elsewhere in this file. Gold is withheld even from a real
   Porsche championship win in the ledger below: gold is Lotus's own signature,
   spent as a FILL only on Lotus's own results pages (badge-win), and reusing it
   here to mark a Porsche title would borrow the marque's colour for the rival's
   result. Marque identity (green/ink) does the work instead. No zebra, no
   heavy fills, no boxed borders — tinted bands and dotted hairlines only, the
   same restraint as the specpanel above it. */

.rival-dossier > *:not(:last-child) { margin-bottom: 0; }

/* ---- H2H — the head-to-head vitals strip -------------------------------- */
.h2h {
  margin: 2.2rem 0 2.6rem;
  padding: 1.6rem 0 .4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.h2h-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
  padding-bottom: 1.3rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.h2h-side { display: flex; flex-direction: column; gap: .15rem; }
.h2h-porsche { align-items: flex-end; text-align: right; }
.h2h-marque {
  font-family: var(--grotesk); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: .78rem;
}
.h2h-lotus .h2h-marque { color: var(--green-dk); }
.h2h-porsche .h2h-marque { color: var(--ink); }
.h2h-model { font-family: var(--grotesk); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.h2h-year { font-family: var(--grotesk); font-size: .78rem; color: var(--ink-muted); }
.h2h-vs {
  font-family: var(--grotesk); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}

.h2h-rows { display: flex; flex-direction: column; }
.h2h-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px dotted var(--rule-soft);
  font-family: var(--grotesk); font-size: .92rem;
}
.h2h-l { text-align: right; font-weight: 700; color: var(--green-dk); }
.h2h-r { text-align: left; font-weight: 700; color: var(--ink); }
.h2h-k {
  text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-muted); white-space: nowrap;
}
.h2h-row-title { padding-top: .8rem; border-top: 1px solid var(--rule); border-bottom: 0; }
.h2h-row-title .h2h-l, .h2h-row-title .h2h-r { font-size: 1.02rem; }

/* mirrored bars: each bar's block runs from the CENTRE gutter outward, achieved
   by flipping the left bar's writing direction rather than any JS measurement. */
.h2h-bars {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem;
  margin: -.15rem 0 .7rem;
}
.h2h-bar { position: relative; height: 5px; border-radius: 3px; background: var(--rule-soft); overflow: hidden; }
.h2h-bar i { display: block; height: 100%; border-radius: 3px; }
.h2h-bar-l { direction: rtl; }
.h2h-bar-l i { background: var(--green); }
.h2h-bar-r i { background: var(--ink); }
.h2h-bar-k {
  font-family: var(--grotesk); font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; text-align: center;
}

@media (max-width: 640px) {
  .h2h-head { grid-template-columns: 1fr; text-align: left; gap: .5rem; }
  .h2h-porsche { align-items: flex-start; text-align: left; }
  .h2h-vs { display: none; }
  .h2h-row, .h2h-bars { grid-template-columns: 1fr; text-align: left; gap: .15rem; }
  .h2h-l, .h2h-r, .h2h-k { text-align: left; }
  .h2h-row-title .h2h-l, .h2h-row-title .h2h-r { font-size: .95rem; }
}

/* ---- COUNT-FORK — the two readings of "twenty" side by side -------------- */
.count-fork {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem;
  margin: 2rem 0 2.4rem; padding: 1.6rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cf-branch:last-child { padding-left: 2.2rem; border-left: 1px solid var(--rule-soft); }
.cf-tag {
  display: block; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .68rem; color: var(--ink-muted); margin-bottom: .5rem;
}
.cf-fig {
  display: block; font-family: var(--grotesk); font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--ink); margin-bottom: .7rem;
}
.cf-sum { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--ink); margin: 0 0 .6rem; }
.cf-imp { font-family: var(--serif); font-style: italic; font-size: .88rem; line-height: 1.5; color: var(--ink-muted); margin: 0; }

@media (max-width: 640px) {
  .count-fork { grid-template-columns: 1fr; gap: 1.6rem; }
  .cf-branch:last-child { padding-left: 0; border-left: 0; padding-top: 1.6rem; border-top: 1px solid var(--rule-soft); }
}

/* ---- LEDGER — the championship-by-championship record -------------------- */
.ledger { margin: 2rem 0 2.4rem; }
.ledger-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .7rem; margin-bottom: .2rem; border-bottom: 1px solid var(--rule);
}
.ledger-label {
  font-family: var(--grotesk); font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-muted);
}
.ledger-score { font-family: var(--grotesk); font-weight: 800; font-size: .92rem; font-style: normal; white-space: nowrap; }
.ls-p { color: var(--ink); font-style: normal; }
.ls-l { color: var(--green-dk); font-style: normal; }
.ls-sep { color: var(--rule); font-style: normal; padding: 0 .4em; }

.ledger-row {
  display: grid; grid-template-columns: 3.6rem 1fr auto; align-items: start; gap: 1.1rem;
  padding: 1rem 0 1rem .9rem; border-bottom: 1px dotted var(--rule-soft);
  border-left: 3px solid transparent;
}
.ledger-row.is-lotus { border-left-color: var(--green); }
.ledger-row.is-porsche { border-left-color: var(--ink); }
.lg-year { font-family: var(--grotesk); font-weight: 700; font-size: 1rem; color: var(--ink-muted); }
.lg-body { display: flex; flex-direction: column; gap: .2rem; }
.lg-name { font-family: var(--grotesk); font-weight: 700; font-size: .98rem; color: var(--ink); }
.lg-car { font-family: var(--grotesk); font-size: .82rem; color: var(--ink-muted); }
.lg-note {
  display: block; font-family: var(--serif); font-size: .88rem; line-height: 1.5;
  color: var(--ink-muted); margin-top: .3rem; max-width: 34rem;
}
.lg-note em, .lg-note strong { font-style: italic; font-weight: 700; color: var(--ink); }
.lg-note a { color: var(--green-dk); }
.lg-pts { font-family: var(--grotesk); font-weight: 800; font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lg-pts em { font-style: normal; font-weight: 600; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-left: .25rem; }

@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 1fr auto; }
  .lg-year { grid-column: 1 / -1; }
}

/* ---- RIVAL-PEOPLE — the men on the other side ----------------------------- */
.rival-people {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.8rem;
  margin: 2rem 0 2.4rem;
}
.rp-card { border-top: 2px solid var(--rule); padding-top: .95rem; }
.rp-tag {
  display: block; font-family: var(--grotesk); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .66rem; color: var(--ink-muted); margin-bottom: .4rem;
}
.rp-name { display: block; font-family: var(--grotesk); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: .35rem; }
.rp-role { font-family: var(--serif); font-size: .92rem; line-height: 1.55; color: var(--ink-muted); margin: 0; }


/* ==== DDR-003 photoset ==== */
/* ==========================================================================
   .photoset — DDR-003 §4b — grouped photographs from ONE source.

   Replaces the .rc-gallery pattern's two failures:
     - /registry/8/  — the Gentry Lane set repeats the SAME set-level credit
       into 22 separate <figcaption>s. One provenance line belongs to the
       SET; a per-image caption should exist only when an image says
       something the set line does not (a name, an event, a date).
     - /registry/abby/2020-vintage-race-car-sales/ — 59 photographs of
       mixed aspect ratio forced into a uniform-column grid (rc-grid,
       minmax(20rem,1fr)) produce ragged holes: portrait and landscape
       shots share a column width, so row bottoms never line up.

   .photoset fixes both with one structural idea: a justified contact-sheet
   row (fixed row height, variable-width cells sized to each photo's own
   aspect ratio — the classic Flickr/Google-Photos "justified gallery"
   technique) plus a SINGLE provenance line in the set head. Per-image
   captions are opt-in: present in the DOM only for the photographs that
   need one, revealed on hover/focus so the sheet stays calm at rest.

   A photograph has no edges of its own — no frame, no shadow, no lift.
   That law is unchanged here; .photoset only changes how many rows of
   text stand next to the pictures.
   ========================================================================== */

.photoset { margin: 4rem 0 0; }

.photoset-head { margin: 0 0 1.6rem; }

/* THE set-level provenance line. One sentence, once, in the head — not
   restated under every frame. This is the line the old shortcode printed
   into every <figcaption> in the set; here it is printed exactly once. */
.photoset-credit {
  margin: .5rem 0 0;
  max-width: var(--measure, 46rem);
  font-family: var(--grotesk);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---- the justified row --------------------------------------------------
   Each .photoset-shot carries a `--ar` custom property (width / height,
   e.g. style="--ar: 1.5") supplied by the template from the image's own
   Fit() dimensions — no dimension is invented here. flex-basis is derived
   from --ar so a portrait shot claims a narrower cell and a panorama a
   wider one at the SAME row height; flex-wrap lets the browser complete
   each row, and the last, partial row simply falls short of full width
   rather than stretching photographs to fill a hole (no distortion, no
   invented crop beyond ordinary object-fit: cover framing). */
.photoset-grid {
  --row-h: 15rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .4rem;
  margin: 1.8rem 0 0;
}

.photoset-shot {
  position: relative;
  margin: 0;
  height: var(--row-h);
  flex-grow: 1;
  flex-basis: calc(var(--ar, 1.5) * var(--row-h));
  /* guard rail: an unusually wide pano still yields to its neighbours */
  max-width: calc(var(--ar, 1.5) * var(--row-h) * 1.8);
  overflow: clip;
}

.photoset-shot a { display: block; height: 100%; }

/* NO FRAME, NO SHADOW, NO LIFT — a photograph has no edges of its own.
   object-fit: cover crops to fill the fixed row height; the full,
   uncropped original is still one click away via the figure's <a>. */
.photoset-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- per-image caption: opt-in, hover/focus-revealed --------------------
   Present ONLY on the figures that need one (a name, an event, a date the
   set line doesn't cover) — most figures in a photoset carry no
   .photoset-cap at all, which is the whole fix for the 22-identical-
   captions case. Where present, the caption exists in the DOM
   unconditionally (a reader who never hovers still has it — no data
   loss); the overlay treatment only governs whether it is INK-VISIBLE
   at rest on a fine-pointer screen. */
.photoset-cap {
  margin: 0;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .6rem .4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .72rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* Fine-pointer screens: caption hidden until the shot is hovered or its
   link is focused (keyboard-navigable, not mouse-only). Touch and print
   fall through to the unconditional block below, where it is always ink. */
@media (hover: hover) and (pointer: fine) {
  .photoset-cap {
    opacity: 0;
    transform: translateY(.3rem);
    transition: opacity .15s ease, transform .15s ease;
  }
  .photoset-shot:hover .photoset-cap,
  .photoset-shot a:focus-visible ~ .photoset-cap,
  .photoset-shot a:focus-visible .photoset-cap {
    opacity: 1;
    transform: translateY(0);
  }
}

/* touch devices have no hover — a caption that only a mouse can find is a
   caption half the readership never sees, so it sits always-on instead */
@media (hover: none), (pointer: coarse) {
  .photoset-cap { padding: .9rem .5rem .3rem; }
}

@media print {
  /* paper has no hover; ink is cheap, so anything a screen reveals on
     hover is simply always visible in print */
  .photoset-cap {
    position: static;
    background: none;
    color: var(--ink-muted);
    padding: .3rem 0 0;
  }
}

@media (max-width: 640px) {
  .photoset-grid { --row-h: 9.5rem; gap: .3rem; }
}


/* ==== DDR-003 dwg ==== */
/* ============================================================================
   DDR-003 §4b.14 — .dwg, the line-drawing object class (the fourth figure tier)
   ============================================================================

   DESIGN-SYSTEM.md codifies three figure treatments — .framed (documents),
   plain (photographs, no frame at all), .cutout (objects on a white sweep) —
   but the site's own DNA has a fourth: a REDRAWN LINE DRAWING. The factory
   brake/suspension exploded views on /parts/ are this today, wearing neither
   .framed nor .cutout, which means the ONLY thing stopping a future editor
   from boxing one in `.framed` (because it "looks like it needs a border")
   is a habit, not a rule. This file makes the rule enforceable.

   A line drawing is not a document (it has no paper, no deckle, no scan
   bed to trim) and it is not a photographed object (nothing to lift off a
   sweep) — it is pure vector information: black ink, no background. It
   gets NO frame and NO shadow, ever, on purpose, and it is allowed to run
   larger than a photograph of the same subject would, because a diagram is
   read for its lines, not admired for its light.

   USAGE — add `dwg` alongside any existing size tier on the SAME .imgfig
   shortcode call already used everywhere else on the site:

     {{< imgfig src="/images/brake-assembly-front.jpg" class="dwg breakout" ... >}}

   No template change, no shortcode change — dwg is a pure CSS modifier,
   exactly like .framed and .cutout already are. Any size tier (column /
   breakout / plate / margin) still applies and is still capped by the
   figure's own --native scan width — .dwg does not defeat the native cap,
   it only removes the framing decision from the tier.
   ============================================================================ */

/* THE TREATMENT — pure black on white, no edge of its own.

   mix-blend-mode: multiply drops the scan's white background into --paper
   the same way .cutout already does for a photographed object — this is
   the same physics (a white sheet disappearing into the page), applied to
   a redrawn diagram instead of a studio photograph. grayscale + a touch of
   contrast is a defensive floor: it guarantees "pure black on white" even
   if a future scan of a drawing carries a faint sepia/toner cast, without
   ever pushing a genuinely monochrome line drawing any darker than it is. */
.imgfig.dwg img {
  mix-blend-mode: multiply;
  background: transparent;
  filter: grayscale(1) contrast(1.05);
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* THE GUARD — a line drawing supplies no edge of its own to frame, and it
   is not an object lifted off a sweep either. If `.dwg` is ever combined
   with `.framed` or `.cutout` by mistake (copy-paste from a neighbouring
   figure), `.dwg` wins: no border, no shadow, no double-blend. This is the
   refinement DDR-003 asks for — `.framed` is a decision made ONLY when a
   scanned document supplies no edge of its own; a `.dwg` supplies its own
   edge (the drawing itself) and so is never a `.framed` candidate. */
.imgfig.dwg.framed img,
.imgfig.framed.dwg img {
  border: 0;
  box-shadow: none;
}

/* .dwg + .cutout is a contradiction in terms (one is line art, the other a
   lit studio object) — collapse to the .dwg treatment rather than double
   multiply-blending, which would crush contrast on the line work. */
.imgfig.dwg.cutout img,
.imgfig.cutout.dwg img {
  filter: grayscale(1) contrast(1.05);
}

/* RUNS OVERSIZE INTO THE MARGIN — a technical diagram is read for its
   lines, not composed for light, so it is allowed the same breakout/plate
   tiers a photograph gets (already generic across every .imgfig — see
   DESIGN-SYSTEM.md's figure-tier table) WITHOUT needing `.bleed`, which
   DESIGN-SYSTEM.md reserves for a photograph only. `.dwg` never combines
   with `.bleed`: a line drawing that fills the viewport reads as a poster,
   not a parts diagram, so cap it at `plate` (68rem) even if `.bleed` is
   mistakenly applied. */
.imgfig.dwg.bleed {
  width: 100%;
  max-width: min(var(--plate), var(--cap));
  margin-left: auto;
  margin-right: auto;
}

/* THE CAPTION STAYS A CAPTION — a .dwg is data-adjacent but its label
   (part numbers, "LOTUS ESPRIT X180-R") is set INTO the drawing by the
   factory, not authored by us; the figcaption underneath remains our own
   prose voice and is untouched here (.figure-caption is shared, owned by
   the base stylesheet, not this delta). */


/* ==== DDR-003 inference ==== */
/* ---- INFERENCE (the third epistemic register) ----------------------------
   Component: .inference — layouts/shortcodes/inference.html
   DDR-003 §4b.7.

   The site now has three registers for a claim, and each earns a DIFFERENT kind of
   distinctness, not the same box in a different colour:
     · plain prose            → fact, black Spectral, no marking at all
     · .record-note           → our own correction against the record — boxed, red,
                                 grotesk, because a correction is rare and loud on purpose
     · .inference (this file) → reasoning offered AS reasoning — unboxed, muted, still
                                 Spectral, because the ONLY thing that changed is how sure
                                 we are, not who is speaking or what kind of object this is

   /story/aftermath/ is the reason this exists: it runs fact, a published self-correction,
   and openly-flagged inference in three back-to-back paragraphs of identical black serif —
   a reader cannot tell, on sight, which one is weakest. Boxing .inference like .record-note
   would fix that by making inference look like a correction (wrong: nothing is being
   corrected) or like a document (wrong: nothing is being quoted). The honest move is to
   change ONLY the one thing that is actually different — confidence — and change it
   quietly: same column, same measure, same serif, ink dialed down one notch, plus a small
   label so a reader who skims by colour/weight alone still catches it. A reader who never
   registers the label still reads a slightly greyer paragraph in the same place a normal
   one would sit; nothing is hidden, nothing moves.

   No colour: --ink-muted is already the token for "quieter, not a different kind of thing"
   (h4/h5/h6, captions, table-empty dashes all use it). Reaching for gold/green/red here
   would spend the site's one hard-won colour economy on a distinction that isn't a result,
   a marque mark, or a correction — it would just be noise next to .record-note's red.

   Print: the label prints as a small caps line, the body prints as grey text under it —
   --ink-muted has no dark-mode swap (it's a fixed mid-grey, see site.css:32), so this needs
   no separate print branch. Complete without a browser. */

.page-wrapper .inference {
  margin: 1.4rem 0;
  max-width: var(--measure);
}

.page-wrapper .inference-label {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 .4rem;
}

.page-wrapper .inference-body,
.page-wrapper .inference-body p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--ink-muted);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  margin: 0 0 1.25rem;
}
.page-wrapper .inference-body p:last-child { margin-bottom: 0; }

/* Between two epistemic registers stacked on the same page, DDR-003 §4b spends space rather
   than a rule: "fact/correction/inference are 21.4px apart — the same gap as two ordinary
   sentences." When .inference immediately follows a .record-note (the aftermath.md order —
   fact, correction, inference), let the two margins collapse to that same rhythm instead of
   stacking to a visibly bigger gap. */
.page-wrapper .record-note + .inference { margin-top: 1.4rem; }


/* ==== DDR-003 record-gap ==== */
/* ---------------------------------------------------------------------------------------
   RECORD GAP — a designed "what we don't have" state.
   DDR-003 §4b.12. Shortcode: layouts/shortcodes/record-gap.html.

   A gap in the record is a fact like any other in this book, so it gets the same
   grammar as a fact: eyebrow, a set line of prose, done. It borrows from two existing
   idioms rather than inventing a third —

     - the PANEL geometry of .sidenote / .docquote (paper-2 ground, a top rule, a left
       edge) because this too is a fact panel, not running prose;
     - .chip.is-open UNCHANGED (defined in site.css) for the "ask" row — this file does
       not redeclare .chip; it only lays out the row that holds them.

   Colour: none spent here beyond what .chip.is-open already owns (gold, meaning "open
   question," already the site's established idiom — see chassis-chip.is-open on the
   registry chips). The eyebrow and caveat are ink-muted grotesk/serif, same as any
   other panel that isn't asserting a result. No gold fill (gold fill = a win), no red
   (red = a record superseding a claim — a gap is not a correction, nothing here is
   being overturned). This is the one rule a designer could get wrong reflexively
   ("missing = bad = red"): it isn't a correction, so it stays achromatic except for
   the chip row's pre-existing gold.

   Ordering: eyebrow, then (optional) the confirmed fact set apart in ink so it reads
   as a fact, not a hedge — then the caveat, then the chip row. The confirmed fact is
   deliberately NOT chipped or coloured; the only gold in this component is the
   invitation to fill the gap, never the fact that survived.
   --------------------------------------------------------------------------------- */

.page-wrapper .record-gap {
  margin: 2rem 0;
  padding: 1.15rem 1.4rem 1.3rem;
  background: var(--paper-2);
  border-top: 3px solid var(--ink-muted);
  max-width: calc(var(--measure) - 1.4rem);
}

.page-wrapper .record-gap-eyebrow {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* the one line that survives the gap — set in prose serif so it reads as a fact,
   not as part of the caveat that follows it. No colour: it earns no gold (not a win)
   and needs no red (nothing here contradicts it). */
.page-wrapper .record-gap-have {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.page-wrapper .record-gap-caveat {
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.page-wrapper .record-gap-caveat p { margin: 0 0 .6rem; }
.page-wrapper .record-gap-caveat p:last-child { margin-bottom: 0; }

.page-wrapper .record-gap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* .chip.is-open itself is untouched — defined once in site.css and reused here. */

@media (max-width: 700px) {
  .page-wrapper .record-gap { padding: 1rem 1.1rem 1.15rem; }
}


/* ==== DDR-003 daterail ==== */
/* ============================================================================
   DATERAIL — a chronology in the margin (layouts/shortcodes/daterail.html)

   Floats right under .page-wrapper, exactly like .sidenote (site.css ~L725) —
   deliberately NOT gated behind a `.spread` ancestor, because the chapters this
   ships on (/story/homologation/, /story/aftermath/) are plain .chapter-body
   prose, not the /racing/ overview's .spread layout. Sidenote already proves
   that pattern works stand-alone inside .page-wrapper .chapter-body.

   Reuses the shared `.dotrail` spine (site.css ~L538: list-style none, the
   hairline ::before, the base .dot circle) — this file adds ONLY the
   daterail-specific layout and the three-state dot colouring on top of it.
   ========================================================================== */

.page-wrapper .daterail {
  float: right; clear: right; width: 14rem;
  margin: .3rem 0 1.8rem 2.4rem;
}

.daterail-head {
  display: block; margin: 0 0 1rem;
  font-family: var(--grotesk); font-weight: 700; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}

/* .daterail-list rides the shared .dotrail spine; --spine-x centers the line
   under the dot column used here (matches .rc-prov-list's own override). */
.daterail-list { --spine-x: .34rem; display: flex; flex-direction: column; gap: 1.1rem; }

.daterail-item {
  display: flex; align-items: flex-start; gap: .8rem;
}

/* base dot: an un-stated stop (state omitted or unrecognised) — visible, but
   deliberately inert, so a typo in `state:` reads as "undecorated," never as
   a false "happened." */
.daterail-dot {
  width: .68rem; height: .68rem; margin-top: .2rem;
  background: var(--paper); border: 2px solid var(--ink-muted);
}

.daterail-item.is-happened .daterail-dot {
  background: var(--green); border-color: var(--green);
}

.daterail-item.is-deadline .daterail-dot {
  background: var(--paper); border: 2px solid var(--ink);
}

/* fatal: the site's existing red register (a record that would have superseded
   the whole programme), not a new colour invented for this component. */
.daterail-item.is-fatal .daterail-dot {
  background: var(--paper); border: 2px solid var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent); /* INTEGRATOR FIX: was rgba(178,34,34,.14) firebrick, off-brand; keyed to --red token */
}
.daterail-item.is-fatal .daterail-date { color: var(--red); }

.daterail-body { display: flex; flex-direction: column; gap: .15rem; line-height: 1.3; }

.daterail-date {
  font-family: var(--grotesk); font-weight: 800; font-size: .82rem; color: var(--ink);
}

.daterail-label {
  font-family: var(--serif); font-size: .82rem; color: var(--ink-muted);
}

/* narrow viewports: the rail has nowhere to float beside — drop it back into
   the column, spine still intact, nothing lost. */
@media (max-width: 900px) {
  .page-wrapper .daterail { float: none; width: auto; max-width: var(--measure); margin: 1.6rem 0; }
}


/* ==== DDR-003 circuit-panel ==== */
/* ==========================================================================
   .circuit-panel — the circuit sidebar (DDR-003 §4b, item 11)
   Component: layouts/shortcodes/circuit-panel.html
             + layouts/partials/circuit-panel-shape.html
   Data:      data/circuits.yaml

   A race card gets a place, not just a result: a tinted field, an accent
   header bar naming the circuit, a schematic green track loop, the facts
   actually on file (never a guessed one — missing ones print "not on file"
   in muted ink, same honesty convention as the registry dossier), a short
   editorial gloss, and this race's qualifying order where given.

   Colour law: the only saturated fill anywhere in this component is the
   green accent bar and the green track stroke — that is the marque's
   colour doing chrome/identity work (an accent bar, a line drawing),
   never a race result. No gold appears here at all: this panel describes
   a PLACE, not a finish; a result belongs to .badge on the entry row next
   to it, not to the circuit that hosted it.
   ========================================================================== */

.circuit-panel {
  --cp-pad: 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0;
  max-width: 22rem;
  font-family: var(--grotesk);
  color: var(--ink);
  overflow: hidden;
}

.cp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6rem;
  padding: .9rem var(--cp-pad) .8rem;
  background: var(--green);
  border-bottom: 2px solid var(--green-dk);
}

.cp-eyebrow {
  flex-basis: 100%;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.cp-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}

.cp-type {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

/* --- the schematic track loop --------------------------------------- */

.cp-track {
  padding: .9rem var(--cp-pad) .4rem;
}

.cp-track-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 11rem;
  margin-inline: auto;
}

.cp-track-svg path {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cp-track-start {
  fill: var(--green-dk);
}

/* --- facts: label / value, tabular, never a guessed number ---------- */

.cp-facts {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: .6rem var(--cp-pad) .9rem;
  border-bottom: 1px solid var(--rule-soft);
}

.cp-fact {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cp-fact dt {
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cp-fact dd {
  margin: 0;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cp-fact dd.cp-nof {
  font-size: .82rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-muted);
}

/* --- gloss: prose, so it takes the serif per the type law ------------ */

.cp-gloss {
  padding: .9rem var(--cp-pad);
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}

.cp-gloss :first-child { margin-top: 0; }
.cp-gloss :last-child  { margin-bottom: 0; }

/* --- qualifying order: this race's grid, pole first ------------------ */

.cp-quali {
  padding: .85rem var(--cp-pad);
}

.cp-quali-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .4rem;
}

.cp-quali ol {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .88rem;
  line-height: 1.6;
}

.cp-quali li::marker {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* pole (the first list item) gets no colour treatment here — a badge already
   marks pole on the entry row itself (.sr-pole / .badge-pole), and gold is
   reserved for that result marker, not repeated as decoration on this list. */

/* --- source line ------------------------------------------------------ */

.cp-source {
  margin: 0;
  padding: .6rem var(--cp-pad) .85rem;
  font-size: .72rem;
  color: var(--ink-muted);
}

/* --- placement: a sidebar beside the race prose, not a full-width block */

@media (min-width: 60rem) {
  .circuit-panel {
    float: right;
    margin: 0 0 1rem 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  .cp-name { color: var(--paper); }
}

@media print {
  .circuit-panel { break-inside: avoid; }
}


/* ==== DDR-003 peer-table ==== */
/* ==========================================================================
   .peer-table — comparison table, X180R as the tinted subject row
   Component 16, DDR-003 §4b. Owner: peer-table agent.

   Reads as data, not prose: Car / Year / Built / Series / Road-legal as sold /
   Full cage as sold / Disposition. "The last caged street car sold new in America"
   is asserted four times elsewhere on the site and demonstrated nowhere — this table
   is the demonstration. Read the "Full cage as sold" column top-to-bottom.

   Blanks (no source states the fact) render as an unfilled grey glyph, never a
   guessed value and never a dash standing in for "no." A dash would read as data;
   an empty circle reads as absence. That distinction is the entire point of the
   component — see the shortcode's own comment for why this is a data array, not
   markdown prose.

   Wrapped in its own .peer-table-wrap > overflow-x:auto box (site convention, see
   .table-scroll in site.css) so a narrow viewport scrolls the table, never the page.
   ========================================================================== */

.peer-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
}

.peer-table {
  width: 100%;
  min-width: 46rem;               /* seven columns; scrolls below this rather than crush */
  border-collapse: collapse;
  font-family: var(--grotesk);    /* DATA IS SANS */
  font-size: .92rem;
}

.peer-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--grotesk);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-bottom: .6rem;
}

.peer-table thead th {
  font-family: var(--grotesk);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  color: var(--paper);
  background: var(--green-dk);
  padding: .6rem .85rem;
  white-space: nowrap;
}

.peer-row th[scope="row"],
.peer-row td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
  font-weight: 400;
}

.peer-row th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.peer-row:last-child th,
.peer-row:last-child td {
  border-bottom: 2px solid var(--ink);
}

/* The subject row — a tint, not a fill. Green (the marque's colour) at low opacity
   marks "this is the car the book is about," which is a different claim from gold
   (a WIN). No gold anywhere in this component: nothing here is a victory. */
.peer-row.is-subject th[scope="row"],
.peer-row.is-subject td {
  background: color-mix(in srgb, var(--green) 10%, var(--paper));
  border-bottom-color: color-mix(in srgb, var(--green) 30%, var(--rule-soft));
}
.peer-row.is-subject th[scope="row"] {
  color: var(--green-dk);
}

/* tri-state Yes/No/blank cells (road-legal, full-cage) */
.peer-tri {
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
.peer-tri.is-yes { color: var(--green-dk); }
.peer-tri.is-no  { color: var(--ink-muted); }

/* the cage column is the one the claim rests on — give it a touch more presence */
.peer-cage.is-yes::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--green);
  margin-right: .4rem;
  vertical-align: middle;
}

.peer-disposition {
  font-family: var(--serif);      /* PROSE IS SERIF, even inside a data table */
  font-weight: 400;
  max-width: 22rem;
  color: var(--ink);
}
.peer-disposition p { margin: 0; }

/* the "blank, never guessed" glyph — an outlined circle, not a dash (a dash reads
   as data; this must read as absence). Sits mid-cell, low-contrast on purpose. */
.peer-blank {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: transparent;
}

.peer-table-key {
  font-family: var(--grotesk);
  font-size: .78rem;
  color: var(--ink-muted);
  margin-top: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.peer-table-key .peer-blank { flex: none; }


/* ==== DDR-003 evidence-cell ==== */
/* ==========================================================================
   .evidence-cell — proof inside a table cell (DDR-003 §4b.15)
   Carrera p.265 / Turbo p.392: a filled paint chip, a material/artefact
   thumbnail, a plaque photo, sitting inside a register row as the datum
   itself rather than as decoration beside it.

   COLOUR LAW EXCEPTION — read before touching this file:
   Standing law reserves saturated gold for a win-fill and green for the
   marque stripe; no other literal colour is allowed to leak in as ornament.
   .evidence-cell is the one licensed exception: on /registry/ twenty road
   cars carry no colour of record, and where a primary source *does* state
   one (badge #8 — a dealer listing: "White with a Black interior") the
   colour is the fact being reported, not a mood. The swatch fill is read
   from --evidence-color / --evidence-color-2, set inline per cell from
   transcribed data (see data/registry-colors.yaml) — never hardcoded here,
   because this file must not itself assert what colour any chassis was.
   Nowhere else on the site may a literal colour appear this way.

   Two variants:
     .evidence-cell--swatch  paint chip(s) — exterior, or exterior/interior
                              split — for the registry colour column.
     .evidence-cell--photo   artefact/plaque thumbnail — for /credits/
                              contributors whose gift is an object.

   No-hover rule: the swatch's title text is a *supplement*, never the only
   copy of the fact. The colour name and its source always render as text
   in .evidence-label / .evidence-source, in the DOM, unconditionally.
   ========================================================================== */

.evidence-cell {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
}

/* the chip itself: a small filled rectangle, keylined so a white or near-white
   fill still reads as a swatch against --paper rather than disappearing */
.evidence-swatch {
  --evidence-color: transparent;
  --evidence-color-2: var(--evidence-color);
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.15rem;
  border-radius: 2px;
  border: 1px solid rgba(27, 24, 21, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  background: var(--evidence-color);
}

/* exterior-over-interior: two colours in one chip, split on the diagonal —
   reads as "paint / trim" at a glance without a second cell */
.evidence-swatch--split {
  background: linear-gradient(
    135deg,
    var(--evidence-color) 0%,
    var(--evidence-color) 47%,
    rgba(27, 24, 21, .35) 47%,
    rgba(27, 24, 21, .35) 53%,
    var(--evidence-color-2) 53%,
    var(--evidence-color-2) 100%
  );
}

/* unrecorded state: the column stays honest — a hollow chip, not a blank
   cell and not an omitted column. No data loss by silent absence. */
.evidence-swatch--unrecorded {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    rgba(27, 24, 21, .12) 3px 4px
  );
  border-style: dashed;
  border-color: var(--rule);
}

.evidence-label {
  font-family: var(--grotesk);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}

.evidence-cell--unrecorded .evidence-label {
  color: var(--ink-muted);
  font-weight: 400;
  font-style: italic;
}

/* the citation: colour asserted here is sourced, never assumed — this is
   what keeps the licensed exception honest rather than decorative */
.evidence-source {
  font-family: var(--grotesk);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  cursor: help;
  border-bottom: 1px dotted var(--rule);
}

/* --- .evidence-cell--photo: artefact/plaque thumbnail variant --------- */

.evidence-cell--photo {
  gap: .6rem;
}

.evidence-photo {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  border-radius: 2px;
  /* functional keyline only — not the document .framed treatment; a thumbnail
     this small needs definition against --paper, not a lift or a shadow */
  border: 1px solid var(--rule);
}

@media print {
  .evidence-swatch,
  .evidence-swatch--split,
  .evidence-swatch--unrecorded {
    /* colour survives to print; keylines guarantee a white chip still
       shows its edges on white stock */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* ==== DDR-003 record-note-token ==== */
/* ============================================================================
   .record-note-token — Estimated / Unknown Data Marker
   ========================================================================== */

/* The .record-note-token is a DATA TOKEN meaning ONLY "estimated/unknown".
   Applied to em-dashes, missing fields, and unverified values in data tables.

   Grey (`--ink-muted`) signals to the reader: "this value cannot be verified
   from the factory record." It is distinct from caption, secondary, legend and
   livery uses of grey elsewhere in the system.

   The token must live in the DOM — it is not a decoration, but a typographic
   signal about data certainty. Every cell displays its uncertainty status
   explicitly, honouring the "no data loss" law.

   Usage: wrap unknown values in a <strong class="record-note-token">—</strong>
   The strong tag leverages the existing table cell styling hook; the class
   overrides the base color from green (diff marker) to grey (unknown marker). */

.page-wrapper table.table td strong.record-note-token {
  color: var(--ink-muted);
}

/* When printed, the em-dash or value remains visible and readable, and the
   grey colour prints as a lighter mark on paper. No hidden content. */

@media print {
  .page-wrapper table.table td strong.record-note-token {
    color: var(--ink-muted);
  }
}


/* ==== DDR-003 parts-type ==== */
/* ============================================================================
   PARTS-TYPE COMPONENT — Table Typography Refactor

   Description column → serif (--serif); Part Number / Quantity / Replaces →
   grotesk (--grotesk) with tabular-nums. Remove zebra striping and tint the
   header band down from dark green to a subtle tint.

   Applies to:
   - .parts-table (all parts assembly tables on /parts/)
   - Markdown tables on /racing/YYYY/ season pages (driver championship and
     team points tables; NOT the visualized standings component)

   Standing Laws Respected:
   - COLOUR LAW: green header is a TINT (not a saturated fill); gold not used
   - PROSE IS SERIF / DATA IS SANS: Description/name columns get serif;
     part numbers and numeric results get grotesk with tabular-nums
   - NO DATA LOSS: no line-clamp, no truncation; all facts remain in DOM
   - Tokens only: --paper, --green, --green-dk, --ink, --rule-soft, --serif,
     --grotesk

   Selectors:
   - .page-wrapper table.parts-table (all parts assembly tables)
   - .season-body table.table (markdown tables on racing season pages)
   ========================================================================== */

/* ============================================================================
   PARTS TABLES — Description and Data Column Typography
   ========================================================================== */

/* Kill the zebra striping on parts tables */
.page-wrapper table.parts-table.table-striped tbody tr:nth-of-type(odd),
.page-wrapper table.parts-table.table-striped tbody tr:nth-of-type(even) {
  background: transparent;
}
/* INTEGRATOR FIX: the zebra-kill above out-specifies the shipped superseded-part tint
   (.parts-table tbody tr:has(del), site.css ~L1804 — red = a superseded part). Re-assert
   it so that data signal survives the zebra removal. */
.page-wrapper table.parts-table.table-striped tbody tr:has(del) {
  background: rgba(165, 52, 42, .045);
}

/* Soften the header band from dark green (--green-dk) to a subtle tint */
.page-wrapper table.parts-table thead th {
  background: rgba(11, 92, 46, 0.12);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* First column (Description) → serif, regular weight for prose readability */
.page-wrapper table.parts-table tbody td:first-child {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}

/* All data columns (Part Number, Quantity, Release Date, Notes) → grotesk, tabular nums */
.page-wrapper table.parts-table tbody td:nth-child(n+2) {
  font-family: var(--grotesk);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================================
   RACING SEASON TABLES — Name and Result Typography
   ========================================================================== */

/* Kill the zebra striping on racing markdown tables */
.page-wrapper .season-body table.table.table-striped tbody tr:nth-of-type(odd),
.page-wrapper .season-body table.table.table-striped tbody tr:nth-of-type(even) {
  background: transparent;
}

/* Soften the header band from dark green to a subtle tint */
.page-wrapper .season-body table.table thead th {
  background: rgba(11, 92, 46, 0.12);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Descriptive columns (Position, Driver, Points, Team, Car) → serif */
.page-wrapper .season-body table.table tbody td:nth-child(1),
.page-wrapper .season-body table.table tbody td:nth-child(2),
.page-wrapper .season-body table.table tbody td:nth-child(3),
.page-wrapper .season-body table.table tbody td:nth-child(4),
.page-wrapper .season-body table.table tbody td:nth-child(5) {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}

/* Result columns (R1–R8 and beyond) → grotesk, tabular nums, centered */
.page-wrapper .season-body table.table tbody td:nth-child(n+6) {
  font-family: var(--grotesk);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
}

/* ==== DDR-004 chapter marginalia ==== */
/* Let a .margin-note float into the dead right gutter INSIDE a story chapter, not only inside a
   .spread. This fills the ~312px empty right margin the critique measured, with real apparatus —
   promoted source lines, self-corrections, marginal facts. The prose column keeps its measure. */
.chapter-body .margin-note {
  float: right; clear: right;
  width: 15rem; max-width: 15rem;
  margin: .4rem 0 1.6rem 3rem;
  border-left: 2px solid var(--rule); padding-left: 1rem;
  font-family: var(--grotesk); font-size: .74rem; line-height: 1.5; color: var(--ink-muted);
}
.chapter-body .margin-note .mn-head { display: block; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--green-dk); margin-bottom: .3rem; font-size: .66rem; }
.chapter-body .margin-note em, .chapter-body .margin-note cite { font-style: italic; }
@media (max-width: 900px) {
  .chapter-body .margin-note { float: none; width: auto; max-width: var(--measure); margin: 1.4rem 0; }
}

/* ==== dossier Related footer (renders for every chassis; see bead x180r-wta.21) ==== */
.dsr-related { margin: 2.4rem 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); font-family: var(--grotesk); font-size: .82rem; color: var(--ink-muted); }
.dsr-related-label { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .62rem; color: var(--ink-muted); margin-right: .7rem; }
.dsr-related a { color: var(--green); text-decoration: none; }
.dsr-related a:hover { text-decoration: underline; }
.dsr-related-sep { margin: 0 .5rem; color: var(--rule); }

/* ==== ballast-spec — the min-weight / tire table on /racing/ (DDR-003 Wave 1) ====
   A clean spec table: data cells never break mid-token (no "225/50-\n15"), figures
   are tabular, the Notes column takes the slack. */
.page-wrapper table.ballast-spec { table-layout: auto; }
.page-wrapper table.ballast-spec th,
.page-wrapper table.ballast-spec td { white-space: nowrap; vertical-align: baseline; }
.page-wrapper table.ballast-spec th:last-child,
.page-wrapper table.ballast-spec td:last-child { white-space: normal; width: 100%; color: var(--ink-muted); font-size: .92rem; }
.page-wrapper table.ballast-spec td:first-child { font-family: var(--grotesk); font-weight: 600; }
.page-wrapper table.ballast-spec td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); padding-right: 1.6rem; }
.page-wrapper table.ballast-spec td:nth-child(3),
.page-wrapper table.ballast-spec td:nth-child(4) { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.page-wrapper table.ballast-spec tbody tr:nth-of-type(even) { background: color-mix(in srgb, var(--green) 4%, transparent); }