/* ==========================================================================
   HiCourt — brand theme: the [hi] mark on Matte Carbon
   --------------------------------------------------------------------------
   Carbon #111215 · Titanium #ECEADE · Amber #D59A40 — the three hexes Tre
   typed with the mark on 2026-09-11 (DECISIONS.md [2026-09-11n]). The mark is
   a hand-built vector (assets/hicourt-mark-on-dark.svg): amber brackets, a
   titanium "hi", and a titanium cursor arrow set into the split right
   bracket, its tip overhanging. tools/build-brand-mark.py builds it and the
   favicon, touch icon and og card from one set of measured numbers.

   This replaces the gold-and-umber theme (2026-09-02), which replaced the
   electric-blue / graphite theme (2026-08-17), which replaced navy/gold/linen
   (2026-08-11). The same property holds through this swap as through the last
   three: every token name below already existed, so every selector kept
   working. Tokens and scoped overrides were ADDED, never renamed or removed —
   this swap adds three raws (carbon, titanium, amber) and two mark inks, and
   re-points the aliases. --umber keeps its name and changes ROLE: it is no
   longer the logo's ground (carbon is) but the always-dark BAND, carbon
   lifted one step, so a band still reads on a carbon page and still reads
   near-black on a light one.

   THE REVERSAL, stated because it is the opposite of what [2026-09-03e] said:
   carbon is the DEFAULT GROUND on both sites. :root is the dark scope now.
   The pitch used to set nothing and stay white; it sets nothing and is carbon.
   Test Firm used to default to paper; it defaults to dark. "light" is a tone
   stop with a block of its own, like the other four.

   THE ONE FACT THAT SHAPES EVERYTHING HERE — measured, not estimated:

       titanium on carbon  7.30:1     amber on carbon   8.72:1
       titanium on white   2.56:1     amber on white    2.15:1  <-- neither is
       white on carbon    18.73:1     navy on white    14.06:1      text or a
                                                                    marker here

   Both brand inks are at home on carbon and useless on white — the same
   one-way asymmetry the gold had, pointing the same way, so the playbook is
   the one that theme already proved:

     · On carbon the LITERALS carry everything: the mark, the primary fill
       (with a CARBON label, never white), the focus ring, and the markers
       that carry meaning. Hover moves the fill AWAY from its label — lighter
       under a carbon label.
     · On the light stops amber darkens until a marker clears 3:1. On "light"
       that leaves room for a carbon label on the fill (4.81:1). On "paper" it
       does not: a fill dark enough to be a bar on paper's own surfaces cannot
       also carry carbon text, so paper's fill takes a WHITE label and its
       hover deepens. That window is empty, not overlooked — it was computed.
     · Body ink is an off-white slate, not white: white on carbon is 18.73:1
       and glares on a dark page. Titanium is SECONDARY text, which is what it
       is in the mark's own hierarchy.
     · Accent TEXT is not amber. The mark says how this palette divides:
       letters are titanium, the frame is amber. So links, numerals, eyebrow
       counters and fold glyphs take a titanium-family ink, and amber is kept
       for the mark, the one primary action, the focus ring and markers that
       carry meaning. Amber-500 and slate-400 are stock Tailwind values;
       spread everywhere they read as a template, and amber is also the stock
       warning colour, which a product that bans traffic-light states cannot
       afford to spend on decoration.
     · The selection wash (--accent-soft) is a TITANIUM tint on every stop,
       never an amber one: amber at 8 % over carbon composites to #231D14,
       which is the retired umber arriving through the back door.

   INVERSION: .inv redefines the tokens for its own subtree, so a band's
   children inherit correct colours without per-element overrides. On carbon
   .inv is a LIFT (a band one step above the page, not a white slab — a white
   band on carbon is a flashbang); on a light stop the same values read as the
   dark band they always were. Do not put .inv on a .band.alt — the .band.alt
   card cluster below swaps cards to var(--surface) and the two rules fight.

   LITERALS THE TOKEN SWAP DOES NOT REACH — each is named here so the next
   swap re-tunes it: .status-strip (its own --accent and text colour),
   .inv .status-strip (the pill's lift), .band.inv's border, the lw-auth /
   receipt theads, .dgm-badge, .lw-picker-head > span, and the print block.
   tenant/frontend/css/app.css carries its own eight (the rail foot and its
   bold, the tf-table thead, and the print block's five). All were re-derived
   on 2026-09-11; grep for #[0-9A-Fa-f]{3,6} and rgba( to find them again.

   Note: frontend/assets/flow-simple.svg and flow.svg are external <img>s, so
   CSS custom properties cannot reach them. Their palettes mirror these tokens
   by hand and are documented in a comment at the top of each file — change
   both together. The mark is the exception: Shell renders it INLINE, so it
   reads --mark-ink and --mark-frame and is correct on every stop without a
   second file; the static pages, which are always carbon, link the file.
   tenant/frontend/css/site.css is a copy of this file plus a chat-page tail
   and a signed-in-chrome tail; tools/apply-carbon-theme.py regenerates it
   from this one, and the twenty-sixth suite diffs the two outside the tails.

   Fonts are self-hosted OFL 1.1, unmodified upstream builds. See
   ../assets/fonts/README.md. Paths here must stay relative: nginx serves
   /var/www/hicourt/frontend, so a leading-slash /assets/… 404s in production.

   RESTYLE 2026-09-02 (DECISIONS.md [2026-09-02e], at the partner's request):
   the look moves toward an editorial calm — display type in Charis at 400,
   larger and quieter; wider-tracked mono eyebrows; tighter measures; more
   band and hero rhythm; hairline rules where lists used to be boxes; the
   accent held back — and the chrome toward a compact, precise topbar with
   120–150 ms colour transitions on links, buttons, chips, tabs and the rail,
   and one focus-ring token. The type families and every metric token survive
   this rebrand untouched: only colour moved.

   TONE STOPS 2026-09-03 (DECISIONS.md [2026-09-03e], [2026-09-03f]), re-spaced
   here: html[data-tone] carries FIVE complete palettes — light (L* 100),
   paper (a cool toned ground, L* 86, white cards), dusk (L* 41, the lightest
   ground the light ink can sit on), dim (L* 23) and dark (L* 5.5, which is
   :root and needs no block of its own). The ladder Tre rated 1-10 was
   100 · 86 · 41 · 25 · 8; carbon is darker than the umber it replaces, so dim
   moved from 25 to 23 and the dark end grades evenly again — 14, the flip,
   18, 17.5. The flip is still the one step that cannot be evened, because no
   ground between paper and dusk carries either ink at 4.5:1. Test Firm's
   shell sets the attribute from a slider and defaults to dark; the pitch sets
   nothing and gets :root, which is the same carbon. A stop is a whole token
   set, never a mix. Every stop's pairs are COMPUTED by
   tools/testfirm-ui-contract-test.php exactly as :root's and .inv's are, and
   the mark's two inks are computed against every stop's topbar ground with
   the text and marker floors — the mark claims no brand exemption either.
   The print block resets every stop to ink on paper.
   ========================================================================== */

/* ── Fonts ──────────────────────────────────────────────────────────────── */

/* Charis SIL — a Matthew Carter Charter descendant, standing in for LTC
   Charter. Carries the prose, the headings and the "Court" half of the mark. */
@font-face {
  font-family: "Charis SIL";
  src: url("../assets/fonts/charis-sil-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("../assets/fonts/charis-sil-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("../assets/fonts/charis-sil-400italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Charis SIL";
  src: url("../assets/fonts/charis-sil-700italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Fraunces Italic — sets the two glyphs of "hi" and nothing else. A stand-in
   for House Industries' Modular, which is retail and is not shipped. Its WONK
   axis gives the descending calligraphic swash on the h that the reference
   wordmark has. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand raws. Carbon is the hex Tre typed; the other two are MEASURED off
     the reference render he pointed at ("this is our logo and colors we want"),
     because the mark is a gold plate and warm off-white letters, not two flat
     swatches. --gold is the plate's sweep at mid height — the value a flat,
     single-colour use of it takes — and --cream is the letters exactly.
     The full sweep lives in the mark itself; see assets/hicourt-mark-on-dark.svg
     and tools/build-brand-mark.py. */
  --carbon:      #111215;
  --gold:        #D59A40;
  --cream:       #ECEADE;
  --white:       #FFFFFF;

  /* The names the first pass used, kept so nothing that referenced them
     breaks. Brushed Titanium and Auric Amber were the typed names; what the
     render actually carries is this cream and this gold. */
  --titanium:    var(--cream);
  --amber:       var(--gold);

  /* The always-dark band: carbon lifted one step. It keeps the name --umber
     because every rule that paints a band, a thead, the hero pill or the
     picker head already reads it; what changed is the role, not the job. */
  --umber:       #262623;

  /* The previous themes' raw names, retained so nothing that referenced them
     breaks. They are aliases and hold the CURRENT brand values — there is no
     gold, umber-brown, electric blue, graphite, navy or linen in this file
     any more. Prefer the names above in new rules. */
  --blue:        var(--gold);
  --graphite:    var(--umber);
  --navy:        var(--umber);
  --linen:       var(--white);

  /* Surfaces. Hierarchy on carbon comes from ELEVATION and hairlines, not
     from shadow: a shadow barely reads on a dark ground. The page is the
     floor, bands lift off it, cards lift off bands, and a well (--surface-2)
     sits just under the page for the things that are recessed — callouts,
     chips, code, a pressed button. */
  --bg:          var(--carbon);
  --bg-alt:      #1C1B1A;
  --surface:     #2A2826;
  --surface-2:   #1A1918;

  /* Text. An off-white slate, never white (18.73:1 glares on carbon), with
     titanium — the mark's own letter ink — carrying secondary text. */
  --fg:          #E7E2D8;
  --fg-strong:   #F3EFE6;
  --muted:       #A5A097;

  /* Lines: hairlines do the dividing that shadow cannot. */
  --rule:        #2E2C2A;
  --rule-strong: #454341;

  /* The one accent, in its two jobs.
     --accent      the gold, at the plate's mid tone: the primary fill, the
                   focus ring, and the markers that carry meaning. 7.60:1 on
                   carbon — which is why, unlike the amber this replaced, it
                   can also be TEXT without shouting.
     --accent-ink  accent text. On carbon it is the same gold; the light stops
                   need it darker than the fill (gold reaches 4.5:1 as text on
                   a toned ground only well below where it still reads as a
                   bar), which is why it stays a separate token.
     --accent-fg   what goes ON the gold: carbon, 7.60:1. Never white. */
  --accent:      var(--amber);
  --accent-ink:  #D59A40;
  --accent-fg:   var(--carbon);
  /* The selection wash is a TITANIUM tint, not an amber one: amber at 8 %
     over carbon composites to the retired umber. */
  --accent-soft: #242320;
  /* Hover is a token so it cannot desync from --accent-fg: each scope moves
     the fill away from its own label. Carbon label here, so the fill goes
     LIGHTER (carbon on it is 11.03:1). */
  --accent-hover: #F2B65E;

  /* Focus and control boundaries. Amber is the ring (8.72:1 on carbon);
     --field-line stays separate because --rule-strong is decorative and sits
     below the 3:1 a control boundary needs. */
  --focus:       var(--amber);
  --field-line:  #827B6E;

  /* The mark's two inks. Shell renders the mark INLINE, so these reach it and
     it is correct on every stop from one drawing; the static pages, which are
     always carbon, link assets/hicourt-mark-on-dark.svg, whose fills are
     these two values. The suite computes both against every stop's topbar
     ground: the letters at the text floor, the frame at the marker floor. */
  --mark-ink:    var(--cream);
  --mark-frame:  var(--amber);
  --mark-rim:    #A87A38;
  --mark-edge:   #8C6425;

  /* Metrics. The 2026-09-02 restyle lives here: every rhythm-defining value
     is a token so the two stylesheet copies, the deck twins and the Test Firm
     sheet all move together. --radius is a control radius now (buttons,
     inputs, callouts); the large surfaces take --radius-card, which is nearly
     square — rules, not boxes, do the separating. None of these carry colour,
     so .inv needs no counterpart and the print block no reset. */
  --maxw:        74rem;
  --maxw-narrow: 42rem;
  --measure:     42rem;    /* the reading column for body type */
  --measure-small: 36rem;  /* and for small type, which fits more characters into the same width */
  --radius:      6px;
  --radius-card: 3px;
  --gap:         1.5rem;

  /* Rhythm */
  --band-y:      6rem;     /* a .band's or a .dk-slide's vertical padding */
  --hero-top:    6.5rem;
  --hero-bottom: 5.5rem;
  --section-gap: 2.5rem;   /* a card grid's or a step list's outer margin */
  --card-pad:    1.6rem;

  /* Type scale. Display type is Charis at 400 — larger and quieter than the
     700 it replaced; Fraunces is loaded italic-only for the "hi" and is not a
     display face here. */
  --fs-mega:     clamp(2.8rem, 7vw, 5rem);
  --fs-h1:       clamp(2.3rem, 5.4vw, 3.4rem);
  --fs-h2:       clamp(1.7rem, 3.4vw, 2.35rem);
  --fs-h3:       1.25rem;
  --fs-h4:       1.05rem;
  --fs-lede:     1.1rem;
  --fs-lede-big: 1.2rem;
  --fs-eyebrow:  .72rem;
  --lh-display:  1.08;
  --track-display: -0.018em;
  --track-eyebrow: .2em;

  /* Motion — hover, focus and active only; nothing moves on scroll. The
     reduced-motion block at the bottom zeroes these. */
  --dur:         150ms;
  --dur-fast:    120ms;
  --ease:        cubic-bezier(.2, 0, 0, 1);

  /* The focus ring: one width and one offset everywhere a ring is drawn. */
  --ring-w:      2px;
  --ring-off:    2px;

  /* The topbar's hairline shadow, static (one that appears on scroll would
     need script). Umber at 6 % — a shade, never text. */
  --topbar-shadow: 0 1px 2px color-mix(in srgb, var(--carbon) 45%, transparent);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: "Charis SIL", Charter, "Bitstream Charter", "Sitka Text",
                Cambria, Georgia, serif;
  --font-display: "Fraunces", "Charis SIL", Charter, Georgia, serif;
}

/* ── Inversion ──────────────────────────────────────────────────────────────
   The always-dark band. Redefining the tokens here cascades to every
   descendant, so cards, rules, chips, tables and callouts all follow without
   being named.

   Under the gold theme this block was the inverse of the page. It still is —
   but the page is carbon now, so "inverse" means a LIFT: the band sits one
   step above the page and its cards one step above the band. On a light stop
   the same values are the dark band they have always been. The accent needs
   no flip at all here: amber is at home on both. */

.inv {
  --bg:           var(--umber);
  --bg-alt:       var(--umber);
  --surface:      #33322F;
  --surface-2:    #2C2B29;
  --fg:           #E7E2D8;
  --fg-strong:    #F3EFE6;
  --muted:        #A5A097;
  --rule:         #333230;
  --rule-strong:  #4B4A47;
  --accent:       var(--amber);
  --accent-ink:   #D59A40;
  --accent-fg:    var(--carbon);
  --accent-soft:  #2A2926;
  --accent-hover: #F2B65E;
  --focus:        var(--amber);
  --field-line:   #8C8678;
  --mark-ink:     var(--cream);
  --mark-frame:   var(--amber);
  --mark-rim:     #A87A38;
  --mark-edge:    #8C6425;
  color: var(--fg);
}
.band.inv, .dk-slide.inv, .foot.inv, .dk-foot.inv, .hero.inv {
  background: var(--umber);
  border-top-color: #333230;
}

/* ── Tone stops ([2026-09-03e], [2026-09-03f], re-spaced [2026-09-11n]) ─────
   Whole palettes, one per stop, on the root so every token below follows.
   Written as literals so the contract test reads each block on its own. There
   is no html[data-tone="dark"] block: dark IS :root, and a second copy of it
   could only drift. On the light stops the accent is a DARKENED amber — on
   "light" dark enough to be a marker and still carry a carbon label, on
   "paper" dark enough that only a white label clears 4.5:1, which is the one
   place the carbon-label rule cannot hold and the arithmetic says so. */
/* L* 100 — the white ground, which used to be :root */
html[data-tone="light"] {
  color-scheme: light;
  --bg:           #FFFFFF;
  --bg-alt:       #F5F3EE;
  --surface:      #FFFFFF;
  --surface-2:    #EDEBE6;
  --fg:           #413B2E;
  --fg-strong:    #1D1B18;
  --muted:        #6A6253;
  --rule:         #E3E1DC;
  --rule-strong:  #ABA9A4;
  --accent:       #AE7509;
  --accent-ink:   #8E5E00;
  --accent-fg:    #111215;
  --accent-soft:  #F4F2ED;
  --accent-hover: #C98A2B;
  --focus:        #AE7509;
  --field-line:   #787264;
  --mark-ink:     #111215;
  --mark-frame:   #8E5E00;
  --mark-rim:     #6B4718;
  --mark-edge:    #3E2609;
}
/* L* 86 — a cool toned ground with white cards */
html[data-tone="paper"] {
  color-scheme: light;
  --bg:           #D8D7D4;
  --bg-alt:       #CECCC9;
  --surface:      #FFFFFF;
  --surface-2:    #C6C4C1;
  --fg:           #413B2E;
  --fg-strong:    #241F17;
  --muted:        #575040;
  --rule:         #B6B4B1;
  --rule-strong:  #8B8986;
  --accent:       #8E5E00;
  --accent-ink:   #6A4501;
  --accent-fg:    #FFFFFF;
  --accent-soft:  #DFDDD8;
  --accent-hover: #714A01;
  --focus:        #8E5E00;
  --field-line:   #6E675A;
  --mark-ink:     #111215;
  --mark-frame:   #8E5E00;
  --mark-rim:     #6B4718;
  --mark-edge:    #3E2609;
}
/* L* 41 — as light as a ground carrying the light ink can go */
html[data-tone="dusk"] {
  color-scheme: dark;
  --bg:           #62605E;
  --bg-alt:       #565553;
  --surface:      #6C6B68;
  --surface-2:    #565553;
  --fg:           #F8F3EB;
  --fg-strong:    #FDFAF4;
  --muted:        #F7F1E2;
  --rule:         #767573;
  --rule-strong:  #8F8E8B;
  --accent:       #FBBF67;
  --accent-ink:   #F7F1E2;
  --accent-fg:    #111215;
  --accent-soft:  #686764;
  --accent-hover: #FDD69F;
  --focus:        #FBBF67;
  --field-line:   #D8D1C1;
  --mark-ink:     #EFEBE1;
  --mark-frame:   #FBBF67;
  --mark-rim:     var(--mark-frame);
  --mark-edge:    var(--mark-frame);
}
/* L* 23 — moved up from 25 so the dark end grades evenly to carbon */
html[data-tone="dim"] {
  color-scheme: dark;
  --bg:           #383634;
  --bg-alt:       #3F3E3C;
  --surface:      #4C4B49;
  --surface-2:    #3F3E3C;
  --fg:           #ECE8DE;
  --fg-strong:    #F6F2E9;
  --muted:        #C9C1AF;
  --rule:         #4A4948;
  --rule-strong:  #646361;
  --accent:       #D59A40;
  --accent-ink:   #F2B65E;
  --accent-fg:    #111215;
  --accent-soft:  #3A3937;
  --accent-hover: #F2B65E;
  --focus:        #D59A40;
  --field-line:   #A29B8C;
  --mark-ink:     #ECEADE;
  --mark-frame:   #D59A40;
  --mark-rim:     var(--mark-frame);
  --mark-edge:    var(--mark-frame);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.7 var(--font-serif);
  letter-spacing: 0;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg-strong);
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}
/* Display headings set in the regular weight: larger and quieter, the
   editorial register. h3 and h4 keep the bold — inside a card or a step they
   are the anchor, not the display. */
h1, h2 {
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 .55em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.05em; text-wrap: pretty; }
strong { color: var(--fg-strong); font-weight: 700; }
em { font-style: italic; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

code {
  font: 500 .84em/1.4 var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .08em .34em;
}

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-off);
  border-radius: 3px;
}

.sr-only, .dk-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip, .dk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-fg);
  font: 700 .9rem/1 var(--font-serif);
  padding: .8em 1.2em; border-radius: 0 0 var(--radius) 0;
}
.skip:focus, .dk-skip:focus { left: 0; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap.narrow { max-width: var(--maxw-narrow); }

.band { padding: var(--band-y) 0; border-top: 1px solid var(--rule); }
.band.alt { background: var(--bg-alt); }

.center { text-align: center; }

/* ── The wordmark and the mark ──────────────────────────────────────────────
   THE LOCKUP IS THE MARK PLUS "Court". The mark's own letters are the name's
   first syllable, so a mark that says "hi" beside a word that says "HiCourt"
   would say it twice — two logos in one bar. Beside the mark the "Hi" span is
   CLIPPED, not removed: the DOM, the accessible name, a copy-paste and the
   suite's pinned string all still read HiCourt, and print (which hides the
   mark) unclips it so the name prints whole.

   The mark is sized by TYPE, not by pixels: its "hi" x-height is 0.3756 of
   its bracket box and Charis SIL 700's is 0.4604 of the type size, so a mark
   1.226 type sizes tall sets its letters on the word's own x-height and its
   brackets just above the caps. Its baseline sits 0.2384 of its height above
   its bottom edge, which is the vertical-align below. The gap is measured
   from the BRACKET BOX, not the bounding box: the pointer's tip overhangs by
   0.06em and points INTO the word, which is the whole idea, so the margin is
   the gap minus the overhang. */

.brand, .dk-brand, .foot-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  white-space: nowrap;
}
.brand, .dk-brand { font-size: 1.24rem; }
.foot-brand { font-size: 1.32rem; }

/* The text wordmark, for every place the mark is not drawn — the footers and
   print. Its "hi" takes the mark's own letter ink, never the accent: an amber
   serif "hi" next to a titanium geometric one is two marks, and it spends the
   amber the ration holds back. */
.wm-hi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-transform: lowercase;
  color: var(--mark-ink);
  padding-right: .045em;
  letter-spacing: 0;
}
.wm-court { color: inherit; }
/* The optional .ai tail, as in the original reference lockup. */
.wm-tld {
  font: 400 .5em/1 var(--mono);
  color: var(--muted);
  letter-spacing: .04em;
  padding-left: .12em;
  vertical-align: baseline;
}
.brand-mark {
  height: 1.226em;
  width: 1.442em;
  vertical-align: -.292em;
  margin-right: .07em;
  flex: none;
}
/* Shell draws the mark INLINE, so these two reach it and it is right on every
   tone stop from one drawing. The file's own fills are the same two values,
   so a static page that links it looks identical. */
.brand-mark .mk-frame-edge { fill: var(--mark-edge); }
.brand-mark .mk-frame-rim { fill: var(--mark-rim); }
.brand-mark .mk-hi, .brand-mark .mk-cursor { fill: var(--mark-ink); }
/* The plate's face is a vertical sweep, the way the reference render has it,
   and a sweep has a dark foot: #95611E is 3.38:1 on carbon and clears the floor
   a marker needs, but only 2.09:1 on dim and 1.07:1 on dusk. So the sweep is
   used where it holds — carbon, and a darkened twin on the two light stops —
   and the two middle stops take the flat plate, whose colour is measured for
   each of them. Both gradients travel inside the inline mark. */
.brand-mark .mk-frame { fill: url(#hc-gold); }
html[data-tone="light"] .brand-mark .mk-frame,
html[data-tone="paper"] .brand-mark .mk-frame { fill: url(#hc-gold-light); }
html[data-tone="dusk"] .brand-mark .mk-frame,
html[data-tone="dim"] .brand-mark .mk-frame { fill: var(--mark-frame); }
/* Beside the mark, "Hi" is clipped rather than removed — see the note above.
   Not display:none: that would take it out of the accessible name too. */
.brand-mark + .wm-hi {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */

/* Solid, not translucent. The placeholder tinted this with the page colour at
   92% alpha, which was fine over a white page and goes muddy the moment a
   dark band scrolls under it. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--topbar-shadow);
}
.topbar-in {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  min-height: 3.6rem;
  padding-top: .5rem; padding-bottom: .5rem;
}

.topbar nav, .dk-top nav {
  display: flex; align-items: center; gap: 1.4rem;
  flex-wrap: wrap;
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: .9rem;
  letter-spacing: .005em;
}
/* Compact and precise: a colour shift and a hairline on hover, the accent
   kept for the current page's underline (app.css's aria-current rule), the
   ring on focus. Nothing slides. */
.topbar nav a, .dk-top nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .2em 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.topbar nav a:hover, .dk-top nav a:hover {
  color: var(--fg-strong);
  border-bottom-color: var(--rule-strong);
}
.topbar nav a:active, .dk-top nav a:active { color: var(--accent-ink); }
.nav-back { font-weight: 700; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: var(--hero-top) 0 var(--hero-bottom); }
.hero .wrap > * { max-width: var(--measure); }
.hero .wrap > .dgm, .hero .wrap > figure { max-width: none; }

.mega {
  font-size: var(--fs-mega);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: .18em 0 .5em;
}
.hl, .dk-hl { color: var(--accent); }   /* the one amber phrase on a page: it sits in a hero or a slide head, so the large-text floor governs it (3.88:1 at its worst, on paper) and a highlight that came out DIMMER than the heading around it was the thing to fix */

.lede { font-size: var(--fs-lede); color: var(--fg); line-height: 1.7; }
.lede.big { font-size: var(--fs-lede-big); line-height: 1.62; }
.lede-3 {
  font-size: 1.04rem;
  color: var(--muted);
  border-left: 3px solid var(--rule-strong);
  padding-left: 1.15rem;
  font-style: italic;
}

/* The pill is a deliberate dark anchor in the hero, and it stays one — and
   under this palette the reason it was inverted is back: gold needs a dark
   ground to exist at all (2.78:1 on white), and on the pill's umber the dot
   is 6.48:1. The pill is an always-dark surface sitting in the light scope,
   so it scopes its own --accent to the literal gold exactly as .inv does —
   one override rather than a per-element colour, so .dot keeps reading
   var(--accent). The text colour is .inv's --fg, 14.90:1 on umber. Both are
   literals the token swap does not reach; both are named in the header. */
.status-strip {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-serif);
  font-size: .92rem;
  --accent: #D59A40;
  color: #E7E2D8;
  background: var(--umber);
  border: 1px solid var(--umber);
  border-radius: 999px;
  padding: .48em 1.15em;
}
.status-strip strong { color: var(--white); }
/* Inside an umber band the pill has to lift off its own ground or it stops
   reading as a pill at all. The dot on that lifted ground is 4.84:1. */
.inv .status-strip { background: #31302E; border-color: #4F4E4B; }
.dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* Micro-labels are monospace throughout — the register the reference wordmark
   sample used, and the right voice for a product whose output is a receipt. */
.eyebrow, .category, .dk-eyebrow, .panel-mock, .illus-label, .table-label,
.lw-picker-profile, .dk-illus-label {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2em;
}

.sub {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 40rem;
}
.sub.center { margin-left: auto; margin-right: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.cta-row, .dk-cta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin: 2.4rem 0 0;
}

.btn, .dk-btn {
  display: inline-block;
  font: 700 .95rem/1 var(--font-serif);
  padding: .8em 1.4em;
  border-radius: var(--radius);
  border: 1px solid var(--field-line);
  text-decoration: none;
  color: var(--fg-strong);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover, .dk-btn:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
/* The press: the boundary goes to the strong ink and the fill to the deeper
   surface — pairs the suite already measures — and nothing transforms. */
.btn:active, .dk-btn:active {
  border-color: var(--fg-strong);
  color: var(--fg-strong);
  background: var(--surface-2);
}

/* Bronze fill, white label (6.12:1) on light grounds; gold fill, umber label
   (6.48:1) inside .inv — both through the tokens. The hover moves the fill
   AWAY from the label's luminance in each scope: deeper under a white label
   (8.49:1), lighter under an umber one (9.10:1). The 2026-08-11 gold and the
   2026-08-17 blue followed the same rule in opposite directions; this
   palette needs both directions at once, which is why hover is a token. */
.btn-primary, .dk-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover, .dk-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg);
}
.btn-primary:active, .dk-btn-primary:active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--carbon) 30%, transparent);
}
.btn-ghost, .dk-btn-ghost { background: transparent; }
.btn-lg { padding: .9em 1.6em; font-size: 1rem; }
.btn-wide { width: 100%; text-align: center; }

/* ── Callouts ───────────────────────────────────────────────────────────── */

.note, .warn, .how-note, .dk-note, .lw-build, .mock-banner, .dk-hedge, .dk-qualify {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
  font-size: .99rem;
}
.warn, .mock-banner, .dk-hedge {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.note > :last-child, .warn > :last-child, .dk-note > :last-child,
.lw-build > :last-child, .mock-banner > :last-child,
.dk-hedge > :last-child, .dk-qualify > :last-child { margin-bottom: 0; }

.dk-qualify h3, .dk-loop h3 { margin-top: 0; }

.muted { color: var(--muted); }
.small, .dk-small { font-size: .89rem; }

.kicker {
  font-size: 1.28rem;
  text-align: center;
  margin: 3rem auto 0;
  max-width: 40rem;
  color: var(--fg-strong);
  line-height: 1.45;
}
.kicker .muted { font-size: .97rem; }

.section-lede { font-size: 1.06rem; }

/* ── Generic card grids ─────────────────────────────────────────────────── */

.three, .lw-lead, .lw-opts, .dk-grid, .lw-pricing, .lw-legend, .findings, .dk-tiles {
  display: grid;
  gap: var(--gap);
  margin: var(--section-gap) 0;
}
.three, .lw-lead, .lw-opts, .lw-pricing, .dk-grid-3, .dk-tiles {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.dk-grid-2, .lw-invert, .findings, .lw-legend {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.th, .lw-l, .lw-opt, .dk-card, .dk-opt, .dk-tile, .lw-pr, .lw-leg,
.lw-inv, .d-sec, .seat, .lw-stage, .lw-lensbox, .lw-tradeoff, .lw-noclaim,
.dk-trade-box, .dk-loop, .illus, .honest-box, .dossier {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
.band.alt .th, .band.alt .lw-l, .band.alt .lw-opt, .band.alt .lw-pr,
.band.alt .lw-leg, .band.alt .lw-inv, .band.alt .lw-stage,
.band.alt .lw-lensbox, .band.alt .lw-tradeoff, .band.alt .lw-noclaim,
.band.alt .honest-box, .band.alt .dossier, .band.alt .illus {
  /* a card on a band LIFTS; under the white theme --surface and --bg were the
     same white, so this said --bg and meant "the lighter one" */
  background: var(--surface);
}
.th > :last-child, .lw-l > :last-child, .lw-opt > :last-child,
.dk-card > :last-child, .dk-opt > :last-child, .dk-tile > :last-child,
.lw-pr > :last-child, .lw-leg > :last-child, .lw-inv > :last-child,
.d-sec > :last-child, .seat > :last-child, .lw-stage > :last-child,
.dk-trade-box > :last-child { margin-bottom: 0; }

.th-n, .lw-l-n, .dk-card-n, .lw-stage-n, .dk-step-n, .dk-num {
  font: 700 .74rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1em;
}
.lw-l-n, .th-n { font-size: 1.55rem; letter-spacing: 0; }

.lw-opt-tag, .dk-opt-tag, .dk-tile-k, .dk-trade-t, .q-label, .lw-picker-count {
  font-family: var(--mono);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7em;
}
.dk-tile-k { color: var(--fg-strong); }
.lw-opt-lede { font-size: .99rem; color: var(--muted); font-style: italic; }

.dk-trade-n, .lw-pr-amt {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
.lw-pr-foot { font-size: .9rem; color: var(--muted); margin-bottom: 0; font-style: italic; }
.dk-tile-v { font-size: .97rem; margin-bottom: 0; }

.dk-trade { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: var(--section-gap) 0; }
.dk-trade-b, .dk-tile-ok, .lw-inv-sell, .d-consensus { border-left: 3px solid var(--accent); }

/* ── Definition lists inside cards ──────────────────────────────────────── */

.lw-opt-dl, .dk-dl, .run-meta { margin: 0; font-size: .97rem; }
.lw-opt-dl dt, .dk-dl dt, .run-meta dt {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--fg-strong);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 1.1em;
}
.lw-opt-dl dt:first-child, .dk-dl dt:first-child { margin-top: 0; }
.lw-opt-dl dd, .dk-dl dd, .run-meta dd { margin: .3em 0 0; color: var(--fg); }

.run-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.1rem;
  margin-top: 1.3rem;
}

/* ── Numbered step lists ────────────────────────────────────────────────── */

.steps { list-style: none; padding: 0; margin: var(--section-gap) 0 0; counter-reset: s; }
.steps > li {
  position: relative;
  padding: 0 0 2.2rem 3.3rem;
  border-left: 1px solid var(--rule-strong);
  margin-left: 1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps .num {
  position: absolute; left: -1rem; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--field-line);
  font: 700 .8rem/1 var(--mono);
  color: var(--fg-strong);
}
.band.alt .steps .num { background: var(--surface-2); }
.steps h3 { margin-top: -.15em; }

/* ── Chain / flow ───────────────────────────────────────────────────────── */

.lw-chain {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--section-gap) 0;
}
.lw-stage-check { border-left: 3px solid var(--accent); }
.lw-stage-tag {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1em 0 0;
}

.dk-flow { list-style: none; padding: 0; margin: var(--section-gap) 0; display: grid; gap: 1rem; }
.dk-step {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
.dk-step-check { border-left: 3px solid var(--accent); }
.dk-step > :last-child { margin-bottom: 0; }
.dk-step h3 { margin-bottom: .45em; }
.dk-run {
  display: inline-block;
  margin-left: .6em;
  font: 700 .68rem/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .25em .75em;
  color: var(--accent-ink);
  vertical-align: 1px;
}
.dk-step-plain {
  display: block;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--rule);
  font-size: .94rem;
  color: var(--muted);
}
.dk-rounds { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: .5rem; font-size: .95rem; }
.dk-rounds li { display: flex; gap: .75rem; align-items: baseline; }
.dk-rounds li::before {
  content: attr(data-r);
  flex: none;
  min-width: 1.55rem; height: 1.55rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--field-line);
  border-radius: 50%;
  font: 700 .7rem/1 var(--mono);
  color: var(--fg);
}
.dk-arrow { display: grid; place-items: center; color: var(--rule-strong); }
.dk-arrow svg { width: 1.4rem; height: 1.4rem; transform: rotate(90deg); }

/* ── Comparison rows ────────────────────────────────────────────────────── */

.dk-vs { margin: var(--section-gap) 0; border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; }
.dk-vs-row {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: 1.3rem;
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.dk-vs-row:first-child { border-top: 0; }
.dk-vs-row > p { margin: 0; font-size: .96rem; }
/* Selector matches .dk-vs-row > p above, so the size lands without !important. */
.dk-vs-row > p.dk-vs-k {
  font-family: var(--mono);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-strong);
  padding-top: .2em;
}
.dk-vs-a { color: var(--muted); }
.dk-vs-b { border-left: 3px solid var(--accent); padding-left: 1.1rem; }

/* ── Chips / lenses / statuses ──────────────────────────────────────────── */

.dk-lenses, .lw-lenses { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.dk-lens, .lw-lens {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: .48em 1.05em;
  font-size: .92rem;
}
.lw-lens-check { border-left: 3px solid var(--accent); border-radius: var(--radius); }

.st, .dk-st, .tag, .lw-varies {
  display: inline-block;
  font: 700 .68rem/1.5 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: .16em .75em;
  color: var(--muted);
  margin-right: .5em;
  vertical-align: 1px;
}
.lw-varies { float: right; margin: 0; }

/* Rules, not boxes (2026-09-02): each item sits between hairlines and the
   list closes with one. The boxed, left-barred card this replaces was the
   2026-08-11 treatment; inside .inv the hairline is that scope's --rule. */
.ent-list, .crosses, .rules, .dk-list {
  list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.ent-list li, .crosses li, .rules li, .dk-list li {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1rem 0 1rem .1rem;
  font-size: .98rem;
}
.band.alt .ent-list li, .band.alt .crosses li, .band.alt .rules li { background: transparent; }

/* Flags: the glyph carries the meaning, so the palette stays neutral. That was
   a deliberate call in the placeholder theme and it survives the rebrand —
   recolouring seven flag states into the brand gold would make the accent mean
   two different things and would put colour, not the glyph, in charge. */
.lw-flag, .dk-flag {
  display: inline-block;
  font: 700 .72rem/1.6 var(--mono);
  letter-spacing: .06em;
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: .12em .6em;
  color: var(--fg-strong);
  white-space: nowrap;
}
.lw-flag-ok, .dk-flag-ok { border-color: var(--accent-ink); color: var(--accent-ink); }
.lw-flag-stop, .dk-flag-stop { border-color: var(--fg-strong); color: var(--fg-strong); border-width: 2px; }
.lw-flag-diverge, .lw-flag-quote, .lw-flag-treat, .lw-flag-juris, .dk-flag-warn {
  background: var(--accent-soft);
  border-style: dashed;
}
.lw-flag-uncited { background: transparent; color: var(--muted); }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.lw-scroll, .table-scroll, .dk-scroll { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--rule); border-radius: var(--radius-card); }
table.lw-auth, table.receipt {
  border-collapse: collapse;
  width: 100%;
  min-width: 42rem;
  font-size: .94rem;
  background: var(--surface);
}
table.lw-auth th, table.lw-auth td,
table.receipt th, table.receipt td {
  text-align: left;
  vertical-align: top;
  padding: .8rem 1rem;
  border-top: 1px solid var(--rule);
}
table.lw-auth thead th, table.receipt thead th {
  border-top: 0;
  background: var(--umber);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E7E2D8;
  white-space: nowrap;
}
table.lw-auth tbody th, table.receipt tbody th { font-weight: 700; color: var(--fg-strong); }
table.lw-auth tbody tr:nth-child(even), table.receipt tbody tr:nth-child(even) { background: var(--surface-2); }
.lw-why { color: var(--muted); }
td.num { font-family: var(--mono); font-weight: 700; color: var(--accent-ink); }

/* ── Diagram figures ────────────────────────────────────────────────────── */

.dgm { margin: var(--section-gap) 0; }
.dgm-shot {
  display: block;
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  line-height: 0;
  transition: border-color var(--dur) var(--ease);
}
.dgm-shot:hover { border-color: var(--accent-ink); }
.dgm-shot img { width: 100%; display: block; }
.dgm-badge {
  position: absolute; right: .8rem; bottom: .8rem;
  font: 700 .64rem/1 var(--mono);
  letter-spacing: .14em;
  background: var(--umber);
  border: 1px solid var(--umber);
  border-radius: 999px;
  padding: .55em 1em;
  color: #E7E2D8;
}
.dgm figcaption {
  margin-top: .9rem;
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Link out to the full seat-by-seat diagram. Deliberately loud: the overview
   is what fits on a slide, but the detailed one is the thing to blow up on a
   projector, and it has to be reachable from every page that shows the
   overview. Accent-barred so it reads as the primary action on the figure. */
.dgm-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: 1rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.dgm-more a {
  font-weight: 700;
  font-size: 1.02rem;
  flex: none;
}
.dgm-more-note {
  font-size: .9rem;
  color: var(--muted);
  min-width: 0;
}

/* ── Worked example (tab panels shown stacked — see note in page) ───────── */

.dossier { padding: 0; overflow: hidden; }
.dossier-head { padding: 1.7rem; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.lw-matter {
  margin: 0;
  padding: 1.1rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.02rem;
  font-style: italic;
}

.tablist-scroll { overflow-x: auto; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.tablist { display: flex; gap: .45rem; padding: .85rem 1.1rem; }
.tablist a {
  flex: none;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: .62em 1.05em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tablist a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.tablist a:active { color: var(--fg-strong); border-color: var(--fg-strong); background: var(--surface-2); }

.panel { padding: 1.7rem; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
.panel:first-of-type { border-top: 0; }
.panel-title { font-size: 1.32rem; margin-bottom: .3em; }
.panel-intro { font-size: 1rem; }

.seat { margin: 1.1rem 0; }
.seat header { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.seat-lab {
  font: 700 .68rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-strong);
}
.lens {
  font: 500 .78rem/1.5 var(--mono);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .12em .6em;
}
.lw-seat-src {
  font: 400 .84rem/1.5 var(--mono);
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: .7em;
  margin-bottom: 0;
}

.d-sec h4 { margin-bottom: .5em; }
.d-sec ul { margin: 0; padding-left: 1.2rem; font-size: .97rem; }
.d-sec li { margin-bottom: .5em; }

.lw-prov { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; gap: .8rem; }
.lw-prov li {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 1rem 1.2rem;
  font-size: .98rem;
}
.lw-prov-cite {
  display: block;
  margin-top: .7em;
  padding-top: .7em;
  border-top: 1px solid var(--rule);
  font: 400 .82rem/1.7 var(--mono);
  color: var(--muted);
}

/* ── Panel picker ───────────────────────────────────────────────────────── */

.lw-picker { border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; margin: 1.7rem 0 .8rem; background: var(--surface); }
.lw-picker-head {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center;
  padding: 1rem 1.3rem;
  background: var(--umber);
  border-bottom: 1px solid var(--rule);
}
.lw-picker-head > span { margin: 0; color: #ECEADE; }
.lw-picker-head strong { color: var(--white); }
.lw-picker ul { list-style: none; margin: 0; padding: 0; }
.lw-picker li {
  display: grid;
  grid-template-columns: 7rem 7rem 1fr;
  gap: .85rem;
  padding: .7rem 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: .91rem;
  align-items: baseline;
}
.lw-picker li:first-child { border-top: 0; }
.lw-p-lab { font-weight: 700; color: var(--fg-strong); }
.lw-p-role {
  font: 700 .66rem/1.6 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.lw-p-lens { color: var(--muted); font-family: var(--mono); font-size: .8rem; }

/* ── Layers ─────────────────────────────────────────────────────────────── */

.lw-layers { list-style: none; padding: 0; margin: var(--section-gap) 0; counter-reset: l; display: grid; gap: 1rem; }
.lw-layers > li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.5rem 1.4rem 3.7rem;
}
.band.alt .lw-layers > li { background: var(--surface); }
.lw-ln {
  position: absolute; left: 1.2rem; top: 1.4rem;
  width: 1.85rem; height: 1.85rem;
  display: grid; place-items: center;
  border: 1px solid var(--field-line);
  background: var(--surface-2);
  border-radius: 50%;
  font: 700 .76rem/1 var(--mono);
  color: var(--fg-strong);
}
.lw-layers h4 { margin-bottom: .5em; }
.lw-layers > li > :last-child { margin-bottom: 0; }

/* ── Illustrated output ─────────────────────────────────────────────────── */

.illus-q { font-size: 1.12rem; font-weight: 700; color: var(--fg-strong); font-style: italic; }
.illus-out { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.3rem; }
.io {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.2rem;
}
.io-agree { border-left-color: var(--accent); }
.io-solo { border-left-style: dashed; }
.io-k { font: 700 .7rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-strong); margin-bottom: .5em; }
.io-v { font-size: .95rem; margin: 0; color: var(--muted); }

.honest-box { text-align: center; }
.big-honest { font-size: 1.42rem; color: var(--fg-strong); }

.lw-inv-k, .dk-tile-k { font: 700 .7rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .55em; }

.lw-noclaim ul, .lw-tradeoff p:last-child { margin-bottom: 0; }
.lw-noclaim ul { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.3rem; }
.lw-noclaim li { border-left: 3px solid var(--accent); padding-left: 1.1rem; font-size: .98rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.signup { max-width: 34rem; margin: 2rem 0 0; }
.field { margin-bottom: 1.2rem; border: 0; padding: 0; }
.field > label, .field legend {
  display: block;
  font-weight: 700;
  font-size: .94rem;
  color: var(--fg-strong);
  margin-bottom: .45em;
  padding: 0;
}
.opt { font-weight: 400; color: var(--muted); font-style: italic; }
.field input[type="email"], .field input[type="text"], .field input[type="password"], .field textarea {
  width: 100%;
  font: 400 1rem/1.5 var(--font-serif);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: .72em .9em;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.radio {
  display: flex; gap: .6rem; align-items: flex-start;
  font-weight: 400; font-size: .96rem;
  margin-bottom: .55em;
  cursor: pointer;
}
.radio input { margin-top: .35em; flex: none; accent-color: var(--accent-ink); }
.form-note { font-size: .89rem; color: var(--muted); margin-top: 1.1rem; }
.form-status { font-size: .94rem; color: var(--accent-ink); font-weight: 700; min-height: 1.4em; }
.contact-email { white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot, .dk-foot {
  border-top: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: 4rem 0;
  font-size: .93rem;
  color: var(--muted);
}
.foot-brand { color: var(--fg-strong); margin-bottom: .7em; }
.foot .wrap > p, .dk-foot .dk-in > p { max-width: 52rem; }
.dk-foot .dk-in { margin: 0 auto; }

/* ══ Deck pages ═════════════════════════════════════════════════════════ */

.dk-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  min-height: 3.6rem;
  padding: .5rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--topbar-shadow);
}
.dk-muted { color: var(--muted); font-weight: 400; }
.dk-counter {
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .1em;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: .5em .9em;
}

/* Slide rail: plain anchor links down the side. Every slide is always
   rendered — the deck reads as one continuous scroll, so no script is
   needed to reach any of the content.

   The rail is position:fixed, so it floats over whichever band happens to
   be scrolling past and cannot inherit .inv. It therefore carries its own
   CARBON ground at 88% alpha — it used to be white, which on a carbon page
   would be a lozenge of glare — so both dots are measured against the
   composite rather than against the token: over the page it composites to
   carbon itself (idle dot 4.45:1, active 11.66:1) and over a band to #131418
   (4.37:1 and 11.46:1).   The idle dot is the tightest control boundary in the file. */
.dk-rail {
  position: fixed;
  left: .75rem; top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .5rem;
  padding: .55rem .4rem;
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.dk-rail a {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  border: 1px solid var(--field-line);
  background: transparent;
  display: block;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dk-rail a:hover, .dk-rail a[aria-current="true"] { background: var(--accent-ink); border-color: var(--accent-ink); }

.dk-deck { display: block; }

/* Each slide fills the viewport below the sticky header, so arrow-key
   navigation lands on a full screen rather than a short section. min-height
   (not height) means a dense slide — the ten-row comparison, the seven-stage
   flow — simply grows past it and scrolls normally instead of clipping.
   justify-content only has an effect when there is spare room, so tall slides
   are unaffected by it.

   The 3.6rem is the sticky header's min-height, pinned explicitly on both
   .topbar-in and .dk-top so this arithmetic stays true if the wordmark or the
   bar's padding is ever retuned. */
.dk-slide {
  padding: var(--band-y) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 3.6rem;
  min-height: calc(100vh - 3.6rem);
  min-height: calc(100svh - 3.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dk-slide:first-child { border-top: 0; }
.dk-slide:nth-child(even) { background: var(--bg-alt); }
/* Deck banding is positional, so an inverted slide has to restate itself here:
   .dk-slide:nth-child(even) and .dk-slide.inv have equal specificity, and the
   nth-child rule is further down the file than the .inv block at the top. */
.dk-slide.inv { background: var(--umber); }

.dk-in { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem 0 2.6rem; }
.dk-in-narrow { max-width: var(--maxw-narrow); }
.dk-lede { font-size: 1.15rem; max-width: var(--measure); line-height: 1.65; }
.dk-sub { font-size: 1.04rem; max-width: var(--measure); }
.dk-slide h1 { max-width: 20ch; }
.dk-slide h2 { max-width: 24ch; }

/* ── The reading measure ([2026-09-12]) ──────────────────────────────────────
   Prose inside a full-width band inherits the wrap's 74rem, which put plain
   paragraphs at 135 characters a line, deck notes at 141, and a figure caption
   at 151 — against the 60-75 a reader is comfortable with. --measure is this
   site's own answer to that question (the hero and the deck lede have always
   used it); these are the blocks that were never told about it. The BOX keeps
   its own width where the box is the point — a card, a table, a diagram — and
   only the reading column is capped. */
/* A BOX keeps its own width — a callout narrowed to the reading column is
   stranded in the band, and the page loses the block rhythm the boxes give it.
   What gets capped is the reading column INSIDE it. */
.note > *, .warn > *, .how-note > *, .dk-note > *, .lw-build > *, .mock-banner > *,
.dk-hedge > *, .dk-qualify > *, .lw-matter > *, .dgm-more > *,
.section-lede, .panel-intro, .honest-box > *, .kicker {
  max-width: var(--measure);
}
/* A callout that holds its text directly has no child to cap, so the column is
   made by the padding instead — same result, and it works either way round. */
.note, .warn, .how-note, .dk-note, .lw-build, .mock-banner, .dk-hedge, .dk-qualify {
  padding-right: max(1.4rem, calc(100% - var(--measure)));
}
.lw-matter, .dgm-more { padding-right: max(1.3rem, calc(100% - var(--measure))); }
.seat p, .lw-lensbox p, .lw-tradeoff p, .illus p, .d-consensus p, .io-v,
.panel > p, .panel > ul, .panel > ol, .dossier-head > p,
.ent-list li, .crosses li, .rules li, .dk-list li,
.lw-noclaim li, .lw-prov li, .dk-rounds li, .dk-step > p, .dk-loop p,
.lw-seat-src, .d-sec ul, .lw-layers > li > p {
  max-width: var(--measure);
}
/* Smaller type needs a NARROWER column for the same character count, not the
   same one. The footer already had a 52rem cap and its 14px copy still ran to
   117 characters a line; a caption reached 160. */
.foot .wrap > p, .dk-foot .dk-in > p, .muted.small, .dk-small,
.dgm-more-note, .lw-stage-tag, .form-note,
figcaption, .dk-step-plain { max-width: var(--measure-small); }

/* A centred block keeps its centre: capping the width of anything that centres
   its own text would otherwise pin the column to the left and leave the text
   centred inside it, which reads as a mistake. Any capped block that centres
   its text centres itself too. */
.center, .center .section-lede, .honest-box, .kicker { margin-left: auto; margin-right: auto; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .dk-vs-row { grid-template-columns: 1fr; gap: .55rem; }
  .dk-vs-b { border-left-width: 3px; }
  .lw-picker li { grid-template-columns: 1fr; gap: .25rem; }
}

@media (max-width: 46rem) {
  /* The rhythm tokens step down here and every rule that reads them follows;
     nothing is restated. The contract test reads only the first root block
     of the file, so this one is invisible to it. */
  :root {
    --band-y:      3.5rem;
    --hero-top:    3rem;
    --hero-bottom: 2.75rem;
    --section-gap: 2rem;
    --card-pad:    1.15rem;
    --fs-mega:     clamp(2.3rem, 9.5vw, 3rem);
  }
  body { font-size: 16px; }
  .wrap, .dk-in { padding-left: 1.1rem; padding-right: 1.1rem; }
  .dk-rail { display: none; }
  /* The nav links are 30px tall here — over the 24px a target needs, under the
     44px that is comfortable. Padding them out to 44 was tried and reverted: it
     pushed the phone header to three tall rows and cost more than it bought. */
  .topbar nav, .dk-top nav { gap: .9rem; font-size: .86rem; }
  .brand, .dk-brand { font-size: 1.14rem; }
  .panel, .dossier-head { padding: 1.15rem; }
  .lw-layers > li { padding-left: 1.15rem; padding-top: 3.3rem; }
  .lw-ln { top: 1.15rem; left: 1.15rem; }
  .lw-varies { float: none; display: inline-block; margin-top: .4em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Print (partners will PDF these) ────────────────────────────────────── */

/* A carbon page is the one thing that cannot survive into print: it would
   burn a page of toner, and everything written for it would print pale on
   white. Every scope is therefore fully neutralised here — :root (which is
   the carbon scope now and so needs color-scheme: light back), the tone stops
   by attribute, and .inv — and the band backgrounds are dropped.

   The print accent is a dark amber, 5.59:1 on white and carrying a white
   label; amber itself is 2.15:1 on paper, the same failure mode as the
   white-on-white .status-strip strong bug: a value the token swap does not
   reach. The mark is hidden and the wordmark's "Hi" is UNCLIPPED in its
   place, so the name prints whole wherever a brand prints at all. */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff;
    --fg: #373530; --fg-strong: #1D1B18; --muted: #5C5A54;
    --rule: #C8C7C4; --rule-strong: #979593;
    --accent: #8E5E00; --accent-ink: #8E5E00; --accent-fg: #fff;
    --accent-hover: #8E5E00; --accent-soft: #fff;
    --mark-ink: #8E5E00; --mark-frame: #8E5E00;
  }
  /* the tone stops ([2026-09-03e]) outrank :root by their attribute, so they are reset by name */
  html[data-tone] {
    color-scheme: light;
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff;
    --fg: #373530; --fg-strong: #1D1B18; --muted: #5C5A54;
    --rule: #C8C7C4; --rule-strong: #979593;
    --accent: #8E5E00; --accent-ink: #8E5E00; --accent-fg: #fff;
    --accent-hover: #8E5E00; --accent-soft: #fff;
    --mark-ink: #8E5E00; --mark-frame: #8E5E00;
    --focus: #8E5E00; --field-line: #979593;
  }
  .inv, .band.inv, .dk-slide.inv, .foot.inv, .dk-foot.inv, .hero.inv {
    background: #fff !important;
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff;
    --fg: #373530; --fg-strong: #1D1B18; --muted: #5C5A54;
    --rule: #C8C7C4; --rule-strong: #979593;
    --accent: #8E5E00; --accent-ink: #8E5E00; --accent-fg: #fff;
    --accent-hover: #8E5E00; --accent-soft: #fff;
    --mark-ink: #8E5E00; --mark-frame: #8E5E00;
    color: #373530;
  }
  /* Every always-dark surface has a light-on-dark literal inside it, and a
     literal cannot follow a token swap. Each one is named here or it prints
     white on white — .status-strip strong actually did. */
  .status-strip, .status-strip strong, .dgm-badge, .lw-picker-head,
  table.lw-auth thead th, table.receipt thead th {
    background: #fff !important;
    color: #1D1B18 !important;
    border-color: #979593 !important;
  }
  .lw-picker-head > span, .lw-picker-head strong { color: #1D1B18 !important; }
  /* .status-strip also sets --accent for its dark ground; on paper the dot
     would print as a pale tint, so it is named here too. */
  .status-strip .dot { background: #1D1B18 !important; }
  .steps .num, .lw-ln { background: #fff !important; color: #1D1B18 !important; border-color: #979593 !important; }
  .brand-mark { display: none !important; }
  /* The two flow diagrams are external images drawn on carbon, so no print
     rule can reach inside them and they would otherwise lay down a page of
     toner. Inverting and rotating the hue back puts them on white with their
     hues about where they started; a browser that ignores filters in print
     simply gets what it got before. */
  .dgm-shot img { filter: invert(1) hue-rotate(180deg); }
  /* the mark is gone, so the word says the whole name again */
  .brand-mark + .wm-hi {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  }
  body { font-size: 11pt; }
  .topbar, .dk-top, .dk-rail, .skip, .dk-skip, .dgm-badge, .cta-row, .dk-cta,
  .signup, .tablist-scroll { display: none !important; }
  .band, .dk-slide { padding: 1.2rem 0; page-break-inside: avoid; border-top: 1px solid var(--rule); }
  /* Full-viewport slides would waste a page each in a PDF. */
  .dk-slide { min-height: 0; display: block; }
  .dk-slide:nth-child(even) { background: none; }
  a { text-decoration: none; color: inherit; }
  .th, .lw-l, .lw-opt, .dk-card, .dk-opt, .dk-tile, .lw-stage, .dk-step,
  .panel, .lw-layers > li, .seat { page-break-inside: avoid; border: 1px solid var(--rule-strong); }
  table.lw-auth, table.receipt { min-width: 0; font-size: 9pt; }
  table.lw-auth tbody tr:nth-child(even), table.receipt tbody tr:nth-child(even) { background: none; }
  .lw-scroll, .table-scroll { overflow: visible; }
}