/* ============================================================
   olive.is — the front page's essay components.

   THIS FILE DECLARES NO PALETTE AND NO FACE (rebuilt 2026-09-23 onto
   DESIGN_SYSTEM.md, the owner's ruling that the inner pages' system is the
   truth). Every colour, face, size, space, rule and motion value below is a
   token from site/assets/css/tokens.css, which reaches this page folded into
   assets/css/site.css; the header, footer, buttons, pills, the closing band
   and the base type (Romie capitals for h1 and h2, Figtree 18/1.67 body) are
   site.css's own and are not restyled here. What this file adds is only what
   the essay has and no other page does: the scroll-driven scenes and their
   cards, the hero card and its search, the press marks, the run cards and
   facsimiles, the sample report and the receipts.

   The one pair of literals is §4.5's masthead grid, `--grid-line`: 10px
   squares one step of OKLab lightness either side of the paper — a pattern,
   not a colour. It is a literal hex because the canvas composites it with
   an alpha by parsing #rrggbb.

   The canvases read their colours and fonts from these same custom
   properties at runtime (js/engine.js theme()), so a token that moves here
   moves in the charts with no second edit.
   ============================================================ */

:root { --grid-line: #efefef; }
:root[data-theme="dark"] { --grid-line: #1c1c15; }

/* ---------- the reading indicator ----------
   A 2px line whose fill scales with scroll: flat colour, never a gradient
   (DESIGN_SYSTEM.md §9). Above the sticky header, or it would draw under it. */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--stroke-display);
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}
.progress > i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- scrollytelling scenes ----------
   A scene is a tall section whose canvas sticks for its whole height while
   the step cards scroll over it; js/engine.js turns scroll into progress. */
.scene {
  position: relative;
  min-height: var(--h, 400vh);
}
.scene-visual {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
}
.scene-visual canvas { display: block; width: 100%; height: 100%; }
.scene-steps {
  position: relative;
  z-index: 2;
  pointer-events: none;
  margin-top: -100svh;
}
.step {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}
.step[data-align="left"]   { justify-content: flex-start; }
.step[data-align="center"] { justify-content: center; }
.step[data-align="right"]  { justify-content: flex-end; }

/* The step card is a card (§7.10): the lift, the 1px ink frame and the 3px
   green offset. It lands on empty ground — main.js keeps every chart left of
   where this card actually starts — so it needs no veil over the canvas. */
.step-card {
  max-width: 30rem;
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  box-shadow: var(--shadow-control) var(--shadow);
  padding: var(--space-5) var(--space-6);
  pointer-events: auto;
}
/* THE HIDDEN START STATE BELONGS TO THE SCRIPT (§9: "without script the page
   is simply visible"). js/main.js sets data-scenes on <html> as it starts,
   and only then do the cards wait for their step; with script off, or before
   it arrives, every card and the masthead's title sit at rest. The :where()
   keeps each selector at the weight it had before, so the retire rules for
   the cue and the reduced-motion block below still win where they did. */
:where(:root[data-scenes]) .step-card {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}
:where(:root[data-scenes]) .step.is-active .step-card { opacity: 1; transform: translateY(0); }
.step-card p { font-size: var(--text-body); line-height: var(--leading-body); }
.step-card p + p { margin-top: var(--space-3); }
.step-card .kicker {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  line-height: 1.55;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* The headline number. A number stated as a statement is Romie (§3.4 rule
   7). site.css owns an unrelated block-level `.figure` (a framed chart
   plate), and the cascade is per property, so every box property it sets is
   reset here rather than inherited from a component this is not. */
.step-card .figure {
  display: block;
  margin: var(--space-2) 0;
  max-width: none;
  width: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
/* The checking figure — the one the chart's green series draws. Colour never
   carries emphasis (§13); the one emphasis a Romie line has is its 500
   italic (§3.4 rule 2). */
.step-card .figure.gold { font-weight: var(--weight-medium); font-style: italic; }
.step-card strong { font-weight: var(--weight-semi); }

/* The chart tooltip (js/engine.js tip()): a lifted thing, so framed. */
.viz-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 15rem;
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-meta);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.viz-tip .tip-label { color: var(--ink-muted); }
.viz-tip .tip-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.viz-tip.on { opacity: 1; }

@media (min-width: 768px) {
  .step { padding: 0 7vw; }
}
/* On a phone the canvas works in the upper band and the card sits below it
   rather than over it; the desktop half of the rule is main.js's stage().
   Change one of the two and tools/verify3.mjs is what tells you. */
@media (max-width: 899px) {
  .step { align-items: flex-end; justify-content: center; padding-bottom: 6svh; }
  .step-card { max-width: 100%; padding: var(--space-5); }
}

/* ---------- the hero ----------
   One step, one screen, no chart: the canvas behind it is §4.5's grid
   paper, lit under the pointer. The title card reveals on the same
   step-activation contract every other scene uses. */
.masthead {
  position: relative;
  min-height: var(--h, 100svh);
}
.masthead-title {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-5);
  max-width: 44rem;
  text-align: center;
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  box-shadow: var(--shadow-control) var(--shadow);
  padding: var(--space-7) var(--space-7);
  pointer-events: auto;
}
:where(:root[data-scenes]) .masthead-title {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}
:where(:root[data-scenes]) .step.is-active .masthead-title { opacity: 1; transform: translateY(0); }
/* The page h1 is site.css's Display rung — Romie 700 capitals at tracking 0,
   `--text-display`, 1.15 leading — and nothing here changes its face, size,
   tracking or features. Only its measure is set. */
.masthead h1 { max-width: 16ch; }
/* Founder edit, 2026-09-03: one word of the title a rung down, as a ratio of
   the rung so it tracks the clamp. */
.masthead h1 .masthead-h1-sm { font-size: 0.857em; }
.masthead-title .press-row { margin-top: var(--space-3); }

/* THE HERO STEP IS A CENTRED COLUMN, and its bottom padding is the header.
   `.c-header` is sticky but still holds its 73px of flow, so #scene-hero
   spans page-y 73..(73 + 100svh) and its last 73px sit under the fold.
   Reserving exactly the header's height at the bottom makes the centred
   region the visible one. Scoped by id so it beats `.step` and the phone
   override above at any source position. */
#scene-hero .step {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 0;
  padding-bottom: var(--header-h);
}
#scene-hero .masthead-title { width: 100%; }

/* ---------- the hero search: a field and a primary button (§7.12) ----------
   A grid of two columns. The field's ground, the ghost completion and the
   input all sit in the first cell, stacked: ::after paints the lift, ::before
   paints the ghost (js/search.js writes the typed text plus its completion
   into data-ghost, and the input draws the typed half over it in ink), and
   the input on top carries the frame and a transparent ground so the ghost
   shows through. Placing the ghost in the cell rather than absolutely is
   what keeps it inside the field and off the button. */
.masthead-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  /* Above the press row, which follows it and would otherwise paint over
     the open results panel. Still below .c-header (100). */
  z-index: 60;
}
.masthead-search::after {
  content: "";
  grid-column: 1; grid-row: 1;
  background: var(--lift);
  z-index: 0;
}
.masthead-search input {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 2;
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: var(--frame-border) solid var(--rule);
  border-radius: var(--radius-field);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--ink);
  appearance: none; -webkit-appearance: none;
}
.masthead-search input::placeholder { color: var(--ink-muted); }
.masthead-search input::-webkit-search-decoration,
.masthead-search input::-webkit-search-results-button,
.masthead-search input::-webkit-search-results-decoration { -webkit-appearance: none; }
.masthead-search[data-ghost]:not([data-ghost=""])::before {
  content: attr(data-ghost);
  grid-column: 1; grid-row: 1;
  z-index: 1;
  align-self: stretch;
  padding: calc(var(--space-3) + var(--frame-border)) calc(var(--space-4) + var(--frame-border));
  font-size: var(--text-ui);
  line-height: 1.5;
  white-space: pre;
  overflow: hidden;
  color: var(--ink-faint);
  pointer-events: none;
}
.masthead-search .btn { grid-column: 2; grid-row: 1; align-self: stretch; }

/* The results panel hangs off the form, absolutely, so opening it cannot
   move the card. A floating panel over the page: the lift, the frame and
   the 4px green offset, like the mega menu. */
.search-panel {
  position: absolute; z-index: 60;
  top: calc(100% + var(--space-2)); left: 0; right: 0;
  max-height: 26rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  box-shadow: var(--shadow-box) var(--shadow);
  text-align: left;
}
.search-list { list-style: none; margin: 0; padding: 0; }
.search-row {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule-hair) solid var(--rule);
  color: var(--ink);
}
.search-list li:last-child .search-row { border-bottom: 0; }
.search-row:hover,
.search-row[aria-selected="true"] { background: var(--row-tint); }
.search-row_q { display: block; font-size: var(--text-ui); line-height: 1.35; color: var(--ink); }
.search-row_q mark { background: none; color: inherit; font-weight: var(--weight-bold); }
.search-row_h { display: block; margin-top: var(--space-1); font-size: var(--text-meta); line-height: 1.43; color: var(--ink-muted); }
.search-row_c {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--text-label); font-weight: var(--weight-semi); line-height: 1.55;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- the scroll cue ----------
   The site's one bounce (§9): 6px on a 2.4s loop, stopped under reduced
   motion. Out of flow, pinned to the fold (the step's bottom padding is the
   header, so the fold is --header-h above the step's bottom edge). */
.masthead-cue {
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--header-h) + var(--space-5));
  display: flex; justify-content: center;
  pointer-events: none;
}
:where(:root[data-scenes]) .masthead-cue {
  opacity: 0;
  transition: opacity var(--reveal-dur) var(--ease) var(--dur-base);
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  font-size: var(--text-label); font-weight: var(--weight-semi); line-height: 1;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink);
  animation: cue 2.4s ease-in-out infinite;
}
.scroll-cue svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
:where(:root[data-scenes]) .step.is-active .masthead-cue { opacity: 1; }
/* It retires the moment the reader scrolls, and gets out of the way of an
   open results panel. */
:root[data-scrolled] .step.is-active .masthead-cue,
.masthead-title:has(.masthead-search [aria-expanded="true"]) ~ .masthead-cue,
:root[data-search-open] .masthead-cue {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease) 0s;
}
/* The press row leaves while the panel is open: the panel is only as wide
   as the field, and the row's outer marks stick out past it. `opacity` keeps
   the row's box, so nothing reflows. */
:root[data-search-open] .press-row {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease) 0s;
}
@media (max-height: 600px) {
  #scene-hero .step { padding-top: var(--space-5); padding-bottom: calc(var(--header-h) + var(--space-4)); }
}
@media (max-height: 480px) { #scene-hero .masthead-cue { display: none; } }

/* ---------- the press marks (§7.18) ----------
   Each outlet's supplied mark as a CSS mask painted in the muted ink, so it
   carries no colour of its own and inverts with the theme from one file.
   Heights are per outlet, set optically against each other; widths follow
   each crop's own aspect. */
.press-row {
  --press-ink: var(--ink-muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin: 0; padding: 0; list-style: none;
  transition: opacity var(--dur-base) var(--ease) 0.05s;
}
.press-row li { display: flex; }
.press-row a {
  display: inline-flex; align-items: center;
  color: var(--press-ink);
  transition: color var(--dur-fast) var(--ease);
}
.press-row a:hover, .press-row a:focus-visible { color: var(--ink); }
.press-mark {
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.press-mark--wsj {
  width: 42px; height: 21px;
  -webkit-mask-image: url("../assets/press/wsj.png");
  mask-image: url("../assets/press/wsj.png");
}
.press-mark--vanity-fair {
  width: 90px; height: 18px;
  -webkit-mask-image: url("../assets/press/vanity-fair.png");
  mask-image: url("../assets/press/vanity-fair.png");
}
.press-mark--the-times {
  width: 118px; height: 14px;
  -webkit-mask-image: url("../assets/press/the-times.png");
  mask-image: url("../assets/press/the-times.png");
}
.press-mark--semafor {
  width: 96px; height: 15px;
  -webkit-mask-image: url("../assets/press/semafor.png");
  mask-image: url("../assets/press/semafor.png");
}
.press-mark--fast-company {
  width: 104px; height: 16px;
  -webkit-mask-image: url("../assets/press/fast-company.svg");
  mask-image: url("../assets/press/fast-company.svg");
}
@media (max-width: 640px) {
  .masthead-title { padding: var(--space-6) var(--space-5); }
  .press-row { gap: var(--space-3) var(--space-5); }
  .press-mark--wsj          { width: 35px; height: 17px; }
  .press-mark--vanity-fair  { width: 74px; height: 15px; }
  .press-mark--the-times    { width: 96px; height: 11px; }
  .press-mark--semafor      { width: 78px; height: 12px; }
  .press-mark--fast-company { width: 85px; height: 13px; }
}

/* ---------- the reading column ----------
   Every block of reading sits in the site's 680px measure, centred, with
   the site's gutter. `.prose` is also site.css's own reading class, so the
   body rung, paragraph spacing and the em-dash list device (the six
   dimensions in Act VI) are the site's and not restated here. */
.prose,
.section-head,
.pull,
.runs,
.deflist,
.report,
.display-screen,
.receipts {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { padding-block: var(--space-9); }
.section-head + .prose { padding-top: var(--space-8); }
.prose.bridge { padding-block: var(--space-6); }

/* The drop cap: the display face, in the ink, the first letter of the
   prologue only. */
.prose .lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: 0.85;
  padding-right: var(--space-2);
  padding-top: var(--space-1);
}

/* A section intro: eyebrow and Display h2 set solid over a 1px ink rule. */
.section-head { padding-top: var(--space-8); }
.section-head .rule { border-top: var(--rule-hair) solid var(--rule); padding-top: var(--space-6); }
.section-head .eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  line-height: 1.55;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section-head h2 { max-width: 24ch; }
.section-head .dek {
  margin-top: var(--space-3);
  font-size: var(--text-lead);
  line-height: 1.36;
  color: var(--ink);
}

/* The bridge into each sibling case: secondary body, muted, on a hanging
   1px ink rule (§5.2), so its text still aligns the column. */
.prose.bridge p {
  color: var(--ink-muted);
  border-left: var(--frame-border) solid var(--rule);
  margin-left: calc(-1 * var(--space-3) - var(--frame-border));
  padding-left: var(--space-3);
}

/* ---------- the pull quote and the display screen ----------
   A pull quote is a sentence, so the sans (h3 large, §3.2) on the essay's
   5px yellow bar (§4.3 `--highlight`), the same device the research essay
   uses. */
.pull { padding-block: var(--space-8); }
.display-screen { padding-block: var(--space-8) var(--space-9); }
.pull blockquote,
.display-screen p {
  position: relative;
  padding-left: calc(var(--bar-accent) + var(--space-5));
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  line-height: 1.29;
  color: var(--ink);
}
.pull blockquote::before,
.display-screen p::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--bar-accent);
  background: var(--highlight);
}
.pull cite {
  display: block;
  margin-top: var(--space-4);
  padding-left: calc(var(--bar-accent) + var(--space-5));
  font-style: normal;
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

/* ---------- run cards and facsimiles ----------
   A worked check, one statement at a time: a card (§7.10), holding a
   facsimile of the packet line it is about. */
.runs {
  padding-block: var(--space-6) var(--space-8);
  display: grid;
  gap: var(--space-5);
}
.run-card {
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  box-shadow: var(--shadow-control) var(--shadow);
  padding: var(--space-5) var(--space-6);
}
.run-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
/* The Label rung's mono register: a reference, not a heading. */
.run-id,
.run-src,
.fac-cap,
.plate dt,
.report-footer,
.sample-band {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1.55;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.run-id { font-weight: var(--weight-semi); color: var(--ink); }
.run-card > p { font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
.run-card--punch > p { font-size: var(--text-h3); font-weight: var(--weight-semi); line-height: 1.29; }

/* The facsimile: a tinted panel (§5.1 — a tint is the one filled panel
   inside content, at the 5px tint radius) carrying the packet's own lines. */
.facsimile {
  background: var(--row-tint);
  border-radius: var(--radius-tint);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.fac-line {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  margin: 0;
}
.fac-line.fac-h { color: var(--ink); font-weight: var(--weight-semi); }
.fac-line.fac-row { color: var(--ink); }
/* The planted line, highlighted — yellow is every highlight (§4.3), and a
   green rule under it would read as a link. */
.fac-line--mark { color: var(--ink); background: var(--highlight); }
.fac-cap { margin: var(--space-3) 0 0; }

/* ---------- the definition lists closing Acts VII and VIII ----------
   Rows between 1px ink rules (the list-row device); secondary body in the
   muted ink at the body size, the dimension named in the ink. */
.deflist { padding-block: var(--space-4) var(--space-8); }
.deflist p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  padding: var(--space-4) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  margin: 0;
}
.deflist p:first-child { border-top: var(--rule-hair) solid var(--rule); }
.deflist p b { color: var(--ink); font-weight: var(--weight-semi); }

/* ---------- the sample report ----------
   One framed sheet in the shipped render order: plates on the lift between
   1px ink rules, the head under a 3px section rule. The band that marks it a
   sample is the caution fill (§4.3) — authored, not a record — and rides
   under the header while the plates scroll. */
.report { padding-block: var(--space-6) var(--space-8); }
.sample-band {
  position: sticky;
  top: calc(var(--header-h) + var(--rule-hair));
  z-index: 3;
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--warn-fill);
  color: var(--on-warn);
  font-weight: var(--weight-semi);
}
.plate {
  background: var(--lift);
  border: var(--frame-border) solid var(--rule);
  padding: var(--space-5) var(--space-6);
}
.plate + .plate { border-top: 0; }
.plate--head { border-top: var(--rule-section) solid var(--rule); }
.plate-role { margin: 0 0 var(--space-2); }
.plate-dek { margin: 0; font-size: var(--text-lead); line-height: 1.36; }
.plate-head { display: flex; align-items: center; gap: var(--space-3); }
.plate-head h3 { margin: 0; font-size: var(--text-lead); line-height: 1.27; }
/* Each dimension's tag takes its tone (§4.4) through site.css's own `.pill`
   — square, the Label rung — whose ground is `--cluster-ground`. Identity,
   never rank. */
#plate-d1 .pill { --cluster-ground: var(--wash-mint);   color: var(--ink-mint); }
#plate-d2 .pill { --cluster-ground: var(--wash-lilac2); color: var(--ink-lilac); }
#plate-d3 .pill { --cluster-ground: var(--wash-cyan);   color: var(--ink-cyan); }
#plate-d4 .pill { --cluster-ground: var(--wash-yellow); color: var(--ink-yellow); }
#plate-d5 .pill { --cluster-ground: var(--wash-pink);   color: var(--ink-pink); }
#plate-d6 .pill { --cluster-ground: var(--wash-teal);   color: var(--ink-teal); }
.plate-short { margin: var(--space-2) 0 var(--space-4); color: var(--ink-muted); }
.plate dl { margin: 0; display: grid; gap: var(--space-3); }
.plate dl div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); }
.plate dt { padding-top: var(--space-1); }
.plate dd { margin: 0; line-height: var(--leading-body); }
.plate .excerpt dd {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--ink-muted);
}
.plate--note p { margin: 0; font-size: var(--text-lead); line-height: 1.36; }
.plate-role {
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  line-height: 1.55;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.report-footer { margin: var(--space-4) 0 0; }
@media (max-width: 599px) {
  .plate { padding: var(--space-5); }
  .plate dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ---------- the receipts ----------
   Rows between 1px ink rules. The summary is the h3 rung; its kind is a
   label; the body is the references rung (§3.2 Meta) in the ink. */
.receipts { padding-block: var(--space-8) var(--space-9); }
.receipts details { border-top: var(--rule-hair) solid var(--rule); }
.receipts details:last-child { border-bottom: var(--rule-hair) solid var(--rule); }
.receipts summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: var(--text-lead);
  font-weight: var(--weight-semi);
  line-height: 1.27;
}
.receipts summary::-webkit-details-marker { display: none; }
.receipts summary .aff {
  flex: 0 0 auto;
  font-size: var(--text-label);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.receipts details[open] summary .aff { color: var(--ink); }
.receipts .r-body {
  padding: 0 0 var(--space-5);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  color: var(--ink);
}
.receipts .r-body p + p { margin-top: var(--space-3); }
.receipts .r-body .mono { font-family: var(--font-mono); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .masthead-cue { transition: none; }
  .step-card { opacity: 1; transform: none; transition: none; }
  .masthead-title { opacity: 1 !important; transform: none !important; }
  .progress { display: none; }
}