/* ==========================================================================
   Ledger — B2B advisory / consultancy template
   A Templatorium template · https://templatorium.com

   HOW TO RE-THEME (the 30-second version — full guide in docs/README.md):
   every color, font, and size the design uses is a custom property in the
   :root block directly below. Change the values there and the whole site
   follows. Everything below the tokens is structure; you should rarely need
   to touch it.

   The idea of this template: an advisory that argues with evidence. Every
   claim is a mono figure on a ruled page — and the figure is set LARGER than
   the headline it belongs to, because data outranks rhetoric. That inversion
   is the whole design. Keep it.

   A promise this template makes that yours should keep: every text/background
   pair in the shipped palette meets WCAG 2.2 AA (the worst real-text pair is
   5.4:1). If you swap colors, re-check: https://webaim.org/resources/contrastchecker/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — the re-theme contract
   -------------------------------------------------------------------------- */
:root {
  /* Color story: warm ledger paper / ink / one flat imperial violet.
     The violet is used on LESS than 5% of any viewport — one primary button,
     the active nav underline, the hairline under the live metric, the leading
     marker of the current ledger row. No gradients. No violet fills. No blue.
     Restraint is what keeps a spec-sheet look premium instead of clinical. */
  --paper:        #F6F5F1; /* page ground (warm ledger off-white) */
  --surface:      #EFEDE6; /* alt sections, ruled cells, panels, zebra */
  --ink:          #14161A; /* all body/display text; the terminal-band ground */
  --muted:        #5C6067; /* secondary text: captions, receipts, labels (5.8:1) */
  --rule:         #CFCBBF; /* THE ledger hairline — the visible structural rules */
  --grid-faint:   #E6E3DB; /* background column grid lines (barely-there scaffold) */

  --violet:       #4A2A82; /* THE buy-action + signal. Flat. <5%. (9.90:1 on paper) */
  --violet-hover: #3C2169; /* primary button hover (white-on stays AAA) */
  --violet-lift:  #B9A3E0; /* accent role on the ink terminal band ONLY (8.1:1) */
  --ash:          #9A9DA4; /* secondary text on the ink terminal band ONLY (6.7:1) */

  /* --- Builder / re-theme aliases -----------------------------------------
     The browser builder ("bring your brand color", palette swaps) drives the
     accent through --accent. Everything above maps onto the builder's
     vocabulary here so the CSS never hardcodes a hex twice. */
  --accent:         var(--violet);
  --accent-hover:   var(--violet-hover);
  --accent-ink:     #FFFFFF;        /* text on the violet fill (10.80:1) */
  --accent-on-dark: var(--violet-lift);
  --muted-on-dark:  var(--ash);
  --inverse-bg:     var(--ink);
  --inverse-ink:    var(--paper);
  --input-border:   var(--muted);   /* hairline is too faint for inputs (needs 3:1) */

  /* Reserved decorative field token. Follows the accent by default (so it is
     value-preserving today). The builder's "bring your brand color" mode lands
     a too-light hue HERE — a decorative-only role, never text — when the color
     can't be darkened to a readable accent. Do not set text in it. */
  --field:          var(--accent);

  /* Type. All three faces are vendored in /fonts (SIL OFL 1.1 — free for
     commercial use, self-hostable, no CDN, no rendering lottery).
       display = Space Grotesk (variable 300–700) — statement lines
       body    = IBM Plex Sans (400/500/600)      — all running prose
       mono    = IBM Plex Mono  (400/500)         — THE proof voice: every
                 numeral, every metric, section micro-labels, receipts */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale. The rule that IS the design: the mono metric is always LARGER than
     the display headline (min ratio 56/32 = 1.75×; it only grows from there).
     Data outranks rhetoric — never let the headline out-scale the number. */
  --t-metric:  clamp(56px, 9vw, 104px);   /* the metric masthead — biggest thing */
  --t-display: clamp(32px, 4.4vw, 54px);  /* statement headline (SMALLER by design) */
  --t-h2:      clamp(26px, 3.2vw, 38px);
  --t-h3:      20px;
  --t-lede:    19px;
  --t-body:    16px;
  --t-small:   14px;
  --t-data:    13px;   /* ledger rows, spec tables, chips (mono) */
  --t-label:   11px;   /* section micro-labels, receipt markers (mono) */

  /* Space & structure */
  --sp-section: clamp(56px, 7vw, 96px);
  --gutter:     24px;
  --max:        1200px;
  --rule-gap:   clamp(28px, 4vw, 52px);

  /* Radius is 0 everywhere on purpose. A ledger has no rounded corners; the
     softness lives in the warm paper, not in radii. */
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* --------------------------------------------------------------------------
   2. FONT FACES — vendored woff2, no CDN
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* a full-bleed terminal band uses width:100vw; clip (not hidden) prevents a
     horizontal scrollbar while keeping the sticky nav working */
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* Sticky nav → every in-page anchor (basis footnotes) clears the nav. */
[id] { scroll-margin-top: 88px; }

/* Focus is visible on EVERY ground. Light grounds: 2px violet (9.9:1 as a
   non-text indicator, far over the 3:1 floor). The ink terminal band and
   footer override to violet-lift below. Never outline:none — anywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.on-ink :focus-visible {
  outline-color: var(--accent-on-dark); /* 8.1:1 on ink */
}

/* Layout primitives */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sp-section); }
.section--surface { background: var(--surface); }

/* Builder grounds — the browser editor switches a section's band between
   paper and surface. A section with NO data-ground renders as its class
   always has; the attribute selector (specificity 0,1,1) lets an editor
   choice override .section--surface. Both grounds keep ink text, so every
   readable pair is palette-independent and clears AA on every offered palette
   AND a stress brand color (verified in pipeline/builder/contrast.mjs). */
section[data-ground="paper"]   { background: var(--paper); }
section[data-ground="surface"] { background: var(--surface); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: var(--gutter); top: -100px;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  font: 500 var(--t-small) var(--font-body);
  padding: 10px 18px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
}
p { max-width: 66ch; }
.muted { color: var(--muted); }
.lede {
  font-family: var(--font-body);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

/* Section micro-label — "02 / MANDATES". Mono is load-bearing here: this is
   Ledger's sanctioned signature (spec §1), the datasheet field-label voice.
   The NUMBER is violet (machine data, the accent's micro-label role); the word
   is muted. Never a running word set in mono — only this register-label form. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 20px;
}
.eyebrow .n { color: var(--accent); }        /* the section number — violet */
.on-ink .eyebrow { color: var(--muted-on-dark); }
.on-ink .eyebrow .n { color: var(--accent-on-dark); }

/* Mono utility label — corner tags, spec captions, helper text */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Figures: always mono, always tabular so metrics and count-ups never reflow */
.fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   5. THE PROOF LEDGER — the signature system (spec §9). Runs through every
      page: a big mono metric masthead (larger than the headline) over a stack
      of numbered, hairline-ruled data rows, each terminating in a receipt
      marker that links the page's "Basis of figures" footnote ledger.
   -------------------------------------------------------------------------- */

/* 5a. The metric masthead — one mono figure at display scale, larger than any
   headline near it. A violet hairline under the "live" metric is the accent's
   masthead role; the receipt-caption below is IBM Plex Sans (prose is the
   number's caption, never the reverse). */
.masthead { margin-block: clamp(20px, 3vw, 32px); }
.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-metric);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-block;
  padding-bottom: 10px;
  /* the violet under-rule of the live metric. It reads from --field (a
     decorative-only token, default = the accent) so the "bring your brand
     color" mode has a non-text place to land a too-light hue on demotion —
     the text/button roles fall back to ink, this rule keeps the raw brand
     tint. Non-text (2px), so it carries no contrast requirement. */
  border-bottom: 2px solid var(--field);
}
.metric .u {           /* the unit riding the figure: "bn", "%", "×" */
  font-size: 0.42em;
  letter-spacing: 0.02em;
  margin-left: 0.12em;
  color: var(--muted);
}
.on-ink .metric { color: var(--inverse-ink); }
.on-ink .metric { border-bottom-color: var(--accent-on-dark); }
.on-ink .metric .u { color: var(--muted-on-dark); }
.metric-cap {                 /* the receipt-caption under the masthead */
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 42ch;
}
.on-ink .metric-cap { color: var(--muted-on-dark); }

/* 5b. The ruled ledger strip — numbered mono rows on a hairline grid.
   Column rules (grid-faint) run behind as a quiet scaffold; every row is
   separated by a rule-weight hairline (drawn as ::after so motion can rule it
   up). No icons, ever. */
.ledger {
  border-top: 1px solid var(--rule);
  margin-top: clamp(20px, 3vw, 32px);
}
.ledger--tight { margin-top: 0; }
.lrow {
  display: grid;
  grid-template-columns: 2.75rem minmax(4.5rem, max-content) 1fr auto;
  align-items: stretch;
  position: relative;
}
.lrow > * {
  display: flex;
  align-items: center;
  padding-block: 14px;              /* the cramped 44px-ish ledger row (spec §4) */
}
/* the drawable row hairline — an element so M1 can scaleX it from the left */
.lrow::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--rule);
}
.lindex {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data);
  color: var(--muted);
  border-right: 1px solid var(--grid-faint);  /* the column scaffold */
  padding-right: clamp(12px, 2vw, 18px);
}
.lrow--active .lindex { color: var(--accent); font-weight: 500; } /* violet leading marker: the current row */
.lfig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  border-right: 1px solid var(--grid-faint);
  padding-inline: clamp(12px, 2vw, 18px);
  white-space: nowrap;
}
.lfig .u { color: var(--muted); font-weight: 400; margin-left: 0.25em; font-size: 0.82em; }
.llabel {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink);
  padding-inline: clamp(12px, 2vw, 18px);
}
.lreceipt {
  align-items: flex-start;
  padding-left: 10px;
}
/* the superscript receipt marker linking the basis footnote */
.receipt {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  vertical-align: super;
}
.receipt:hover { color: var(--accent); text-decoration: underline; }
.on-ink .receipt { color: var(--muted-on-dark); }
.on-ink .receipt:hover { color: var(--accent-on-dark); }

/* 5c. Basis of figures — the page-foot receipt ledger. Every figure on the
   page states its basis here (house rule: numbers have receipts). */
.basis {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.basis-title {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.basis-list { list-style: none; display: grid; gap: 10px; max-width: 90ch; }
.basis-list li {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  gap: 10px;
}
.basis-list .m {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  flex: 0 0 auto;
  padding-top: 2px;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — one height ladder, reused identically everywhere (Linear
      discipline). Primary = flat violet, square. One primary per view.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: 600 15px/1.2 var(--font-body);
  padding: 12px 24px;
  min-height: 44px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { transform: none; box-shadow: inset 0 0 0 1px var(--accent-hover); }
.btn--secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
/* On the ink terminal band the primary inverts: paper fill, ink text (16.6:1) */
.btn--inverse {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--inverse:hover { background: var(--surface); border-color: var(--surface); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* Tertiary — an ink text link with a violet underline that thickens on hover */
.tlink {
  font: 500 var(--t-small)/1.3 var(--font-body);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tlink:hover { text-decoration-thickness: 2px; }
.on-ink .tlink { color: var(--inverse-ink); text-decoration-color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   7. NAV — solid paper, sticky. Borderless at top; gains a hairline after an
      8px scroll (js/main.js adds .scrolled; with no JS the hairline is simply
      always present, which is fine). Active item: 2px violet underline.
   -------------------------------------------------------------------------- */
.nav {
  background: var(--paper);
  position: sticky; top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { border-bottom-color: var(--rule); }
html:not(.js) .nav { border-bottom-color: var(--rule); } /* no-JS: always ruled */
.nav .wrap {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.wordmark .tld { color: var(--muted); } /* the quiet half of the wordmark */

/* Nav disclosure. On desktop the summary is hidden and the links show inline;
   on mobile the summary is the menu button and the list drops as a panel. The
   <details> element makes the menu work WITH NO JAVASCRIPT — no sticky-nav
   no-JS trap, no toggle script required. */
.nav-disc { position: static; }
.nav-disc > summary { display: none; }
.nav-links {
  display: flex; gap: 26px; list-style: none;
  align-items: center;
}
.nav-links a {
  font: 500 15px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  padding-block: 10px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--rule); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--accent); } /* violet active underline */

.nav-cta { white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. HERO — 7/5 split. The metric masthead hangs into the left margin, past
      the text column's edge (the one deliberate grid break per §4).
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 88px); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
}
.split > .split-main  { padding-right: var(--rule-gap); }
.split > .split-aside { border-left: 1px solid var(--rule); padding-left: var(--rule-gap); }

.hero h1 { margin-top: 8px; max-width: 15ch; }
.hero .lede { margin-top: 24px; }
.hero .btn-row { margin-top: 32px; }
/* the metric hangs left, breaking the text column's edge (asymmetry, §4) */
.hero-metric { margin-top: clamp(36px, 5vw, 56px); margin-left: clamp(-24px, -3vw, 0px); }

/* Page hero (interior pages) — same voice, smaller stakes */
.page-hero { padding-block: clamp(48px, 6vw, 76px); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 20px; }

/* --------------------------------------------------------------------------
   9. SECTIONS, HEADS, PROSE COLUMNS
   -------------------------------------------------------------------------- */
.sec-head { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head h2 { margin-top: 4px; }
.sec-head .lede { margin-top: 16px; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose p { color: var(--ink); }

/* two-column body: a statement left, a ledger/aside right, ruled between */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.duo > .duo-aside { border-left: 1px solid var(--rule); padding-left: var(--rule-gap); }
.duo > .duo-main  { padding-right: var(--rule-gap); }

/* --------------------------------------------------------------------------
   10. NUMBERED MANDATES — each case opens on its number in the outer gutter
       (breaking the text rule, §4). Metric masthead IS the outcome; the
       sentence is its caption. Used on Home and the Mandates index.
   -------------------------------------------------------------------------- */
.mandates { border-top: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 44px); }
.mandate {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(28px, 4vw, 44px);
  position: relative;
}
.mandate-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data);
  color: var(--accent);           /* the violet leading marker */
  padding-top: 6px;
  /* hang the number into the outer gutter, breaking the text block's left rule */
  margin-left: clamp(-24px, -2.4vw, 0px);
}
.mandate-body { min-width: 0; }
.mandate .metric { font-size: clamp(40px, 5.2vw, 64px); }  /* still > the h3 outcome line */
.mandate-outcome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  margin-top: 18px;
  max-width: 34ch;
}
.mandate-context {
  margin-top: 12px;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 60ch;
}
.mandate .tlink { display: inline-block; margin-top: 16px; }
.mandate-tags {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* --------------------------------------------------------------------------
   11. RULED INDEX — the disciplines / notes as numbered ruled rows, NOT icon
       cards. name · one-line scope · representative metric, whole row a link.
   -------------------------------------------------------------------------- */
.rindex { border-top: 1px solid var(--rule); }
.rrow {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: baseline;
  gap: 0 clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(20px, 2.6vw, 30px);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.16s ease;
}
a.rrow:hover { background: var(--surface); }
.rrow-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data);
  color: var(--muted);
}
.rrow-main { min-width: 0; }
.rrow-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
a.rrow:hover .rrow-name { text-decoration: underline; text-underline-offset: 4px; }
.rrow-scope {
  margin-top: 6px;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 62ch;
}
.rrow-metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
.rrow-metric .u { color: var(--muted); font-size: 0.8em; margin-left: 0.2em; }
.rrow-go { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }

/* Numbered ruled STEPS (engagement model / how we work) — no link, no metric */
.steps { border-top: 1px solid var(--rule); counter-reset: step; margin-top: 8px; }
.step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(20px, 2.6vw, 28px);
}
.step-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data);
  color: var(--accent);
}
.step-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); }
.step-body { margin-top: 8px; font-size: var(--t-small); color: var(--muted); max-width: 60ch; }

/* --------------------------------------------------------------------------
   12. IMAGE SLOTS — art-directed placeholders, never a bare box (spec §8).
       A faint ruled/registration motif masked from --rule (re-themes, and
       :has(img) retires it under a buyer photo); the spec label anchors to a
       corner, never centered. Portraits sit contained in ruled cells.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
}
/* the empty-state motif: a faint ruled ledger sheet — a corner registration
   tick, three baseline rules, and a column divider. Masked out of --rule so it
   re-themes and never taxes text contrast; retires the instant a photo lands. */
.plate::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--rule);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 400' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M40 96H280M40 168H280M40 240H280M40 312H280'/%3E%3Cpath d='M116 96V312' stroke-dasharray='2 6'/%3E%3Cpath stroke-width='1.4' d='M40 40H70M40 40V70M280 360H250M280 360V330'/%3E%3C/svg%3E") center / cover no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 400' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M40 96H280M40 168H280M40 240H280M40 312H280'/%3E%3Cpath d='M116 96V312' stroke-dasharray='2 6'/%3E%3Cpath stroke-width='1.4' d='M40 40H70M40 40V70M280 360H250M280 360V330'/%3E%3C/svg%3E") center / cover no-repeat;
}
.plate:has(img)::before { display: none; }
.plate--45 { aspect-ratio: 4 / 5; }   /* principal portraits */
.plate--32 { aspect-ratio: 3 / 2; }   /* mandate exhibit / artifact */
.plate--169 { aspect-ratio: 16 / 9; }
/* the spec label — anchored TOP-LEFT as a ledger annotation, never centered
   (the "centred-label-in-empty-box" generic tell). On a solid --surface chip
   so the mono label reads at full --muted contrast over the motif. */
.plate-spec {
  position: absolute; left: 0; top: 0; z-index: 1;
  max-width: min(84%, 280px); padding: 10px 12px;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.plate-spec span {
  background: var(--surface); padding: 5px 9px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* a dropped-in photo renders as an ink-on-paper duotone at cell scale, so faces
   sit in the monochrome system (spec §8) */
.plate img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
/* the mono corner caption ("PRINCIPAL / 4:5", initials) rides the opposite
   bottom-left corner and survives a photo (it's a sibling over a mount) */
.plate-mount { position: relative; }
.plate-cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--paper); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); padding: 6px 12px;
}
/* full-bleed mandate exhibit — height-capped so 3:2 doesn't become a band */
.plate--bleed { aspect-ratio: auto; height: clamp(300px, 38vw, 520px); }

/* the AI editorial figure the /edit builder can insert (spec §8: a single flat
   redacted-exhibit slot, monochrome). Latent — ships commented out. */
.plate-figure { border: 1px solid var(--rule); margin-top: 24px; overflow: hidden; }
.plate-figure img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.04); }

/* --------------------------------------------------------------------------
   13. CLIENT ROSTER — monochrome ink wordmarks in ruled cells (spec §8). Never
       color logos, never a carousel, never fabricated brands.
   -------------------------------------------------------------------------- */
.roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: clamp(20px, 3vw, 32px);
}
.roster-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 96px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  text-align: center;
}
.roster-cell .wm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.roster-cell .ph {   /* the honest placeholder: "CLIENT ##" */
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   14. PRINCIPAL CELLS — portraits contained in a ruled grid, mono credential
       line. The hairline is the frame; no cards, no rounded avatars.
   -------------------------------------------------------------------------- */
.principals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 3vw, 40px);
}
.principal .plate-mount { margin-bottom: 14px; }
.principal .p-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; }
.principal .p-role { font-size: var(--t-small); color: var(--muted); margin-top: 4px; }
.principal .p-cred {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   15. TERMINAL BAND — the one dark passage per page. Ink ground, paper text,
       violet-lift accents, internal #2A2D33 rules. Point-of-view / pre-footer.
   -------------------------------------------------------------------------- */
.terminal {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding-block: var(--sp-section);
  margin-inline: calc(50% - 50vw);   /* full-bleed */
}
.terminal .band-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), calc(50vw - var(--max) / 2));
}
.terminal h2 { max-width: 20ch; }
.terminal .pov {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-top: 8px;
}
.terminal .pov em { font-style: normal; border-bottom: 2px solid var(--accent-on-dark); }
.terminal .sub { color: var(--muted-on-dark); margin-top: 20px; font-size: var(--t-small); max-width: 56ch; }
.terminal .btn-row { margin-top: 30px; }
/* internal rules on the terminal band */
.terminal .band-rule { border: 0; border-top: 1px solid #2A2D33; margin-block: clamp(24px, 3vw, 40px); }
.terminal .metric { margin-block: 8px; }

/* a terminal-band ledger (engagement model / firm facts stated on dark) */
.terminal .lrow::after { background: #2A2D33; }
.terminal .lindex, .terminal .lfig { border-right-color: #2A2D33; }
.terminal .lindex { color: var(--muted-on-dark); }
.terminal .lfig { color: var(--inverse-ink); }
.terminal .lfig .u { color: var(--muted-on-dark); }
.terminal .llabel { color: var(--inverse-ink); }
.terminal .ledger { border-top-color: #2A2D33; }

/* --------------------------------------------------------------------------
   16. NOTES — editorial article index as ledger-grid rows, and the article
       layout: <=66ch prose, mono metric pull-outs, one optional cited quote.
   -------------------------------------------------------------------------- */
.note-row {
  display: grid;
  grid-template-columns: 6.5rem 2.75rem 1fr;
  align-items: baseline;
  gap: 0 clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(20px, 2.6vw, 28px);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.16s ease;
}
.notes-index { border-top: 1px solid var(--rule); }
a.note-row:hover { background: var(--surface); }
.note-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data);
  color: var(--muted);
}
.note-n { font-family: var(--font-mono); font-size: var(--t-data); color: var(--muted); }
.note-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
a.note-row:hover .note-title { text-decoration: underline; text-underline-offset: 4px; }
.note-dek { margin-top: 6px; font-size: var(--t-small); color: var(--muted); max-width: 62ch; }

/* Article body */
.article { max-width: 66ch; margin-inline: auto; }
.article p { margin-top: 1.1em; }
.article h2 { margin-top: 1.4em; }
.article .pull-metric { margin-block: clamp(28px, 4vw, 44px); }
.article .pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-top: 1px solid var(--accent);
  padding-top: 20px;
  margin-block: clamp(28px, 4vw, 44px);
  font-style: italic; /* the ONE sanctioned italic — a full cited quote (spec §3) */
}
.article .pull-quote cite {
  display: block; margin-top: 14px;
  font: 400 var(--t-label) var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-style: normal; color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. FORMS — qualifying lead form. Square inputs, rule border, 44px targets.
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px var(--gutter);
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 760px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 var(--t-small)/1.3 var(--font-body); }
.field .hint {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  font: 400 16px/1.4 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--input-border);
  border-radius: 0;
  padding: 11px 13px;
  min-height: 44px;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "↓";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--muted);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   18. FOOTER — ink ground, four columns, mono microline with the firm counts.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  border-top: 1px solid #2A2D33;
  padding-block: 60px 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px var(--gutter);
}
.site-footer .wordmark { color: var(--inverse-ink); }
.site-footer .f-blurb { margin-top: 16px; font-size: var(--t-small); color: var(--muted-on-dark); max-width: 34ch; }
.footer-col h2 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { padding-block: 5px; }
.footer-col a {
  font: 400 var(--t-small)/1.5 var(--font-body);
  color: var(--inverse-ink);
  text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-micro {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid #2A2D33;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between;
  align-items: baseline;
}
.footer-micro p {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  max-width: none;
}
.footer-micro a { color: var(--muted-on-dark); }

/* --------------------------------------------------------------------------
   19. MOTION — restraint that shows control (spec §6). Two moves only:
       M1 the section rules + ledger row hairlines draw in (scaleX 0→1); M2 a
       metric masthead ticks 0→final once (js/main.js, tabular so zero reflow).
       NOTHING is hidden by default: the .in class PLAYS a keyframe whose
       `backwards` fill supplies the start frame, so print / no-JS / full-page
       screenshots / reduced-motion all render the complete, final ledger.
       (html.js is set by js/main.js.) prefers-reduced-motion defines no
       animation at all, so the resting state is simply the finished page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.in { animation: led-rise 0.32s ease backwards; }
  /* M1 — the ledger rules up: each row hairline draws from the left, staggered */
  html.js .ledger.in .lrow::after,
  html.js .mandates.in .mandate::after {
    transform-origin: left;
    animation: led-draw 0.4s ease backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  html.js .ledger.in .lrow { animation: led-rise 0.34s ease backwards; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes led-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes led-draw { from { transform: scaleX(0); } }
/* the mandate rows share the drawable-hairline pattern for M1 */
.mandate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: transparent;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE — the ruled grid collapses to a phone statement; the metric
       masthead floors at 44px and STAYS larger than its headline (spec §11).
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .split, .duo { grid-template-columns: 1fr; }
  .split > .split-main, .duo > .duo-main { padding-right: 0; }
  .split > .split-aside, .duo > .duo-aside {
    border-left: 0; border-top: 1px solid var(--rule);
    padding-left: 0; padding-top: 36px; margin-top: 36px;
  }
  .hero-metric { margin-left: 0; }
  .principals { grid-template-columns: 1fr 1fr; }
  .roster { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Nav collapses to the <details> disclosure; the primary CTA stays visible
     and shortens to "Engage". No JS required — <details> is native. */
  .nav .wrap { gap: 14px; }
  .nav-disc {
    position: static;
  }
  .nav-disc > summary {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--ink);
    font: 500 14px/1 var(--font-body);
    cursor: pointer; list-style: none; margin-left: auto;
  }
  .nav-disc > summary::-webkit-details-marker { display: none; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px;
  }
  .nav-links a { display: block; padding-block: 14px; font-size: 16px; border-bottom: 0; }
  .nav-links a[aria-current="page"] { color: var(--accent); }
  .nav-cta { padding: 12px 16px; font-size: 14px; }
  .wordmark .tld { display: none; }

  .principals { grid-template-columns: 1fr; }
  .roster { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }

  /* the ledger reads as a phone statement: the column scaffold collapses to a
     single left rule + row hairlines; the receipt marker stays in-row */
  .lrow { grid-template-columns: 2.25rem 1fr auto; row-gap: 0; }
  .lrow .lfig { grid-column: 2; border-right: 0; padding-inline: clamp(12px,2vw,18px) 0; }
  .lrow .llabel { grid-column: 2; padding-inline: clamp(12px,2vw,18px) 0; padding-top: 0; }
  .lrow .lfig { padding-bottom: 4px; }
  .lrow .llabel { padding-top: 0; padding-bottom: 14px; align-items: start; }
  .lindex { align-self: stretch; }

  .rrow { grid-template-columns: 2rem 1fr; }
  .rrow-metric { grid-column: 2; text-align: left; margin-top: 8px; }
  .rrow-go { display: none; }
  .note-row { grid-template-columns: 1fr; gap: 4px; }
  .note-n { display: none; }
  .mandate { grid-template-columns: 1fr; }
  .mandate-n { margin-left: 0; padding-top: 0; margin-bottom: 6px; }

  .section, .hero, .page-hero, .terminal { padding-block: 52px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px var(--gutter); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .roster { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   20b. AMBIENT MOTION LAYER — a hand-authored raw-WebGL ledger-rule field
        (js/ledger-motion.js) behind the hero and the ink terminal band: slow
        hairline rules drifting upward, with one soft "resolve" sweep passing
        through. It sits BEHIND the content and UNDER a token scrim, so the copy
        always computes on ~the ground colour no matter what the shader draws.
        The page is COMPLETE without it: with no JS or no WebGL the layer keeps
        a faint static ruled CSS poster over the ground — never a blank box, and
        never a contrast risk. Whisper-faint on purpose: Ledger is a sober,
        credible brand, so the field is a texture you feel more than see.
   -------------------------------------------------------------------------- */
.hero, .page-hero, .terminal { position: relative; isolation: isolate; overflow: clip; }
/* content rides above the motion layer */
.hero > .wrap, .page-hero > .wrap, .terminal > .band-inner { position: relative; z-index: 1; }

.motion-layer {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.motion-layer .motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the no-JS / no-WebGL poster: a faint static ruled gradient over the ground —
   the still frame of the same field. Re-themes through the palette tokens. */
.motion-layer[data-ledger-bg="paper"] {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 45px,
      color-mix(in srgb, var(--violet) 7%, transparent) 45px,
      color-mix(in srgb, var(--violet) 7%, transparent) 46px),
    var(--paper);
}
.motion-layer[data-ledger-bg="ink"] {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 45px,
      color-mix(in srgb, var(--violet-lift) 10%, transparent) 45px,
      color-mix(in srgb, var(--violet-lift) 10%, transparent) 46px),
    var(--ink);
}
/* the scrim — a wash in the GROUND colour, over the motion and under the copy.
   The contrast guarantee: the effective background reduces to the ground
   (paper / ink), whose text pairs the palette already proves at AA. */
.motion-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.motion-layer[data-ledger-bg="paper"]::after { background: color-mix(in srgb, var(--paper) 40%, transparent); }
.motion-layer[data-ledger-bg="ink"]::after   { background: color-mix(in srgb, var(--ink) 52%, transparent); }

/* --------------------------------------------------------------------------
   21. PRINT — an evidence-led site should print as a clean statement
   -------------------------------------------------------------------------- */
@media print {
  .nav, .terminal, .nav-disc, .motion-layer { display: none; }
  .ledger, .plate { border: 1px solid #000; }
  body { overflow-x: visible; }
}