/* xORBIS site — ENGRAVED LIGHT (DESIGN-V2 contract build)
   Shared by /, /how, /trust. One stylesheet: pages consume components, never redraw them
   (DESIGN-V2 §10.3 — the fix-one-site-miss-the-neighbour law).

   Constraints encoded here, per section:
   §2   BONE light default · VAULT dark first-class · ceremony tokens local to a canvas.
   §3   the compression signature — width IS register; body never condenses.
   §4   chamber engraving as shared data: SVG vars; grounds + rosettes only, never behind prose.
   §5   aperture geometry, registration ticks, radius 2/6/10/16.
   §6   motion = exposure + traverse only. No springs, no bounce, no cascades.
   §7   ink-slab CTAs, verdigris focus, gold spent three ways only.
   §7b  logical properties throughout (RTL) — no physical left/right.
   v1§9 reduced motion gets designed static states, not holes. */

/* ============ 1. TOKENS (§2, §4, §5.3, §6) ============ */
:root {
  /* §2.1 BONE — light theme, default */
  --bg-base:   #F5F3ED;
  --bg-raised: #FCFBF8;
  --bg-sunken: #EBE7DC;
  --ink-1:     #171511;
  --ink-2:     #555147;
  --ink-3:     #726C61;
  --line-subtle:  #DDD7C9;
  --line-strong:  #BFB7A4;
  --line-control: #8A8272;   /* every interactive boundary ≥3:1 (§8 DO) */
  --verdi: #2E5F53;          /* structure: links, focus, diagram strokes */
  --gold:  #B08D2E;          /* LIVE tag · approve-fill · particle. Nothing else (§1.4) */
  --pos:  #1E7A4C;
  --warn: #A85B00;
  --dang: #B3372F;
  --btn-pri-bg:    #171511;  /* §7: primary is an ink slab */
  --btn-pri-ink:   #F5F3ED;
  --btn-pri-hover: #2A251C;
  --tick: #726C61;
  --e1: 0 1px 2px rgb(23 21 17 / 6%);
  --e2: 0 4px 16px rgb(23 21 17 / 8%);
  --e3: 0 12px 40px rgb(23 21 17 / 14%);
  --e-card: 0 2px 6px rgb(23 21 17 / 12%);   /* physical contact shadow (credential card only) */

  /* §4 CHAMBER ENGRAVING — hairline arcs struck from two opposed corners, 56px-ish
     radius step over a 1200px tile. Ink at 4.5%. Static; never animated. */
  --engrave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cg fill='none' stroke='%23171511' stroke-opacity='.045'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3Cg fill='none' stroke='%23171511' stroke-opacity='.045' transform='translate(1200 1200)'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3C/svg%3E");
  /* §4 ROSETTE — twice-de-centered rings; interiors of evidence-grade objects only */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg fill='none' stroke='%23171511' stroke-opacity='.07'%3E%3Cg transform='translate(150 100)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3Cg transform='translate(159 106)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* §5.1 APERTURE — a closed boundary with one 45° opening at NE. Shared, never redrawn. */
  --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%232E5F53' stroke-width='3' stroke-dasharray='110 16' transform='rotate(-58 24 24)'/%3E%3C/svg%3E");

  /* §5.3 radius — the language squares its shoulders */
  --r-xs: 2px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  /* v1 §5 motion tokens (carried verbatim); §6 permits exposure + traverse only */
  --dur-instant: 80ms;
  --dur-quick: 160ms;
  --dur-base: 240ms;
  --dur-ceremony: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* out-quint: enters fast, decelerates late */
}

/* §2.3 CEREMONY MODE — single-theme by design, applied only via .ceremony-active */
:root {
  --cer-bg:        #0C0A06;
  --cer-surface:   #17130C;
  --cer-ink:       #F0ECE0;
  --cer-particle:  #E8C766;   /* unchanged from v1 — the brand gesture is law */
  --cer-withheld:  #59503C;
  --cer-dim:       #9A9280;
  --cer-line:      #2A2416;
  --cer-line-2:    #3A3320;   /* the raised ceremony hairline (chips, controls, dashed result) */
  --cer-slide-bg:  #110E08;   /* the slide track inside the darkened chamber */
  --cer-thread:    #3E3728;   /* fabric threads */
  --cer-verdi:     #7FB5A6;   /* focus inside the canvas (see §7 note in README) */
  --engrave-cer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cg fill='none' stroke='%23F0ECE0' stroke-opacity='.05'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F0ECE0' stroke-opacity='.05' transform='translate(1200 1200)'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3C/svg%3E");
  --aperture-cer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%235E5638' stroke-width='2' stroke-dasharray='110 16' transform='rotate(-58 24 24)'/%3E%3C/svg%3E");
}

/* §2.2 VAULT — dark theme, warm lamp-lit archive. Never a cool blue-black (§8 DON'T).
   Guarded so an explicit light choice still wins over the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:#17130B; --bg-raised:#201A10; --bg-sunken:#100D07;
    --ink-1:#F2EEE3; --ink-2:#B5AE9E; --ink-3:#8D8574;
    --line-subtle:#2C2618; --line-strong:#453C28; --line-control:#756A52;
    --verdi:#7FB5A6; --gold:#D9B45A;
    --pos:#43A374; --warn:#D08A2E; --dang:#E06A5C;
    --btn-pri-bg:#F2EEE3; --btn-pri-ink:#17130B; --btn-pri-hover:#E4DDCB;
    --tick:#877F6E;
    --e1:0 1px 2px rgb(0 0 0 / 45%); --e2:0 4px 16px rgb(0 0 0 / 50%); --e3:0 12px 40px rgb(0 0 0 / 60%); --e-card:0 2px 6px rgb(0 0 0 / 55%);
    --engrave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.04'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.04' transform='translate(1200 1200)'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3C/svg%3E");
    --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.07'%3E%3Cg transform='translate(150 100)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3Cg transform='translate(159 106)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%237FB5A6' stroke-width='3' stroke-dasharray='110 16' transform='rotate(-58 24 24)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --bg-base:#17130B; --bg-raised:#201A10; --bg-sunken:#100D07;
  --ink-1:#F2EEE3; --ink-2:#B5AE9E; --ink-3:#8D8574;
  --line-subtle:#2C2618; --line-strong:#453C28; --line-control:#756A52;
  --verdi:#7FB5A6; --gold:#D9B45A;
  --pos:#43A374; --warn:#D08A2E; --dang:#E06A5C;
  --btn-pri-bg:#F2EEE3; --btn-pri-ink:#17130B; --btn-pri-hover:#E4DDCB;
  --tick:#877F6E;
  --e1:0 1px 2px rgb(0 0 0 / 45%); --e2:0 4px 16px rgb(0 0 0 / 50%); --e3:0 12px 40px rgb(0 0 0 / 60%); --e-card:0 2px 6px rgb(0 0 0 / 55%);
  --engrave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.04'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.04' transform='translate(1200 1200)'%3E%3Ccircle r='64'/%3E%3Ccircle r='128'/%3E%3Ccircle r='192'/%3E%3Ccircle r='256'/%3E%3Ccircle r='320'/%3E%3Ccircle r='384'/%3E%3Ccircle r='448'/%3E%3Ccircle r='512'/%3E%3Ccircle r='576'/%3E%3Ccircle r='640'/%3E%3Ccircle r='704'/%3E%3Ccircle r='768'/%3E%3Ccircle r='832'/%3E%3Ccircle r='896'/%3E%3Ccircle r='960'/%3E%3Ccircle r='1024'/%3E%3Ccircle r='1088'/%3E%3Ccircle r='1152'/%3E%3C/g%3E%3C/svg%3E");
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg fill='none' stroke='%23F2EEE3' stroke-opacity='.07'%3E%3Cg transform='translate(150 100)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3Cg transform='translate(159 106)'%3E%3Ccircle r='12'/%3E%3Ccircle r='24'/%3E%3Ccircle r='36'/%3E%3Ccircle r='48'/%3E%3Ccircle r='60'/%3E%3Ccircle r='72'/%3E%3Ccircle r='84'/%3E%3Ccircle r='96'/%3E%3Ccircle r='108'/%3E%3Ccircle r='120'/%3E%3Ccircle r='132'/%3E%3Ccircle r='144'/%3E%3Ccircle r='156'/%3E%3Ccircle r='168'/%3E%3Ccircle r='180'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='none' stroke='%237FB5A6' stroke-width='3' stroke-dasharray='110 16' transform='rotate(-58 24 24)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ============ 2. BASE + THE COMPRESSION SIGNATURE (§3) ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-base);          /* explicit, per §10.1 */
  color: var(--ink-1);
  /* §3: Archivo Variable (OFL, self-hosted in production; axes wght 100–900, wdth 62–125).
     Zero external requests here — nothing is fetched. Where Archivo is absent the system
     stack stands in AT NATURAL WIDTH; never a transform-based fake condense (§8 DON'T). */
  font-family: "Archivo", "Archivo Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;                     /* body never below 16px on mobile (§3) */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 768px) { body { font-size: 17px; } }

.mono { font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; }
/* numerals inside claims are mono + tabular (§3) */
.num { font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* WIDTH IS REGISTER. The more declarative the text, the narrower the set.
   Nothing lives between 92 and 100 — there is no half-condensed UI. */
.display { font-stretch: 82%; font-weight: 650; letter-spacing: -0.015em; }
h1        { font-stretch: 85%; font-weight: 640; letter-spacing: -0.010em; }
h2        { font-stretch: 88%; font-weight: 620; letter-spacing: -0.0075em; }
h3        { font-stretch: 92%; font-weight: 600; letter-spacing: -0.005em; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }

/* §3 scale — desktop / mobile. Display clamps 72→44 but its WIDTH never responds (§7b). */
.display { font-size: clamp(44px, 6.4vw, 72px); line-height: 1.04; margin: 0.3em 0 0.25em; }
h1 { font-size: clamp(34px, 4.4vw, 48px); margin: 0.4em 0 0.25em; }
h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 12px; }
h3 { font-size: 19px; margin: 24px 0 8px; }
@media (min-width: 768px) { h3 { font-size: 22px; } }

p { max-width: 68ch; color: var(--ink-2); margin: 0.5em 0 1em; }   /* body: wdth 100, never condensed */
.lede { font-size: 17px; }
@media (min-width: 768px) { .lede { font-size: 19px; } }
a { color: var(--verdi); }
strong, b { color: var(--ink-1); }
.caption { font-size: 14px; color: var(--ink-3); }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 479px) { .wrap { padding-inline: 16px; } }

.section { padding-block: 64px; }
@media (min-width: 1024px) { .section { padding-block: 96px 32px; } }
.section + .section { border-block-start: 1px solid var(--line-subtle); }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-block-start: -80px; inset-inline-start: 16px;
  background: var(--bg-raised); color: var(--ink-1); padding: 12px 16px;
  border-radius: var(--r-sm); box-shadow: var(--e2); z-index: 50;
}
.skip-link:focus { inset-block-start: 8px; }

/* §7 focus ring: 2px verdigris, 2px offset, both themes. Gold interior retired. */
:focus-visible { outline: 2px solid var(--verdi); outline-offset: 2px; border-radius: var(--r-xs); }
.ceremony-active :focus-visible, .fabric-band :focus-visible { outline-color: var(--cer-verdi); }

/* ============ 3. THE SIGNATURE MATERIAL (§4) ============ */
/* Ground engraving: hero bands, divider strips, footer, ceremony grounds. NEVER behind
   a 68ch reading column, never above 6%, never animated, never a border substitute. */
.engraved { background-image: var(--engrave); background-size: 1200px 1200px; }
@media (max-width: 479px) { .engraved { background-image: none; } }  /* §7b: may drop below 480 */
.rule-engraved {
  block-size: 88px; border-block: 1px solid var(--line-subtle);
  background-image: var(--engrave); background-size: 1200px 1200px;
}
/* Rosette: interiors of evidence-grade objects only — it IS the object, never drops (§7b) */
.rosetted {
  background-image: var(--rosette);
  background-position: center; background-repeat: no-repeat;
}

/* §5.2 registration ticks — evidence-grade surfaces only, max ONE per viewport.
   Logical insets so they mirror TL/BR → TR/BL in RTL. */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ""; position: absolute; inline-size: 8px; block-size: 8px;
  pointer-events: none; z-index: 7;
}
.ticked::before {
  inset-block-start: -1px; inset-inline-start: -1px;
  border-block-start: 1px solid var(--tick); border-inline-start: 1px solid var(--tick);
}
.ticked::after {
  inset-block-end: -1px; inset-inline-end: -1px;
  border-block-end: 1px solid var(--tick); border-inline-end: 1px solid var(--tick);
}

/* §5.1 the aperture — shared mark, consumed never redrawn. Gap sits NE; mirrors in RTL. */
.apt {
  display: inline-block; flex: none;
  inline-size: 18px; block-size: 18px;
  background-image: var(--aperture); background-size: contain; background-repeat: no-repeat;
}
.apt-lg { inline-size: 28px; block-size: 28px; }
[dir="rtl"] .apt { transform: scaleX(-1); }
/* index marks: the aperture framing a section number (§5.1) */
.apt-index {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; flex: none;
  background-image: var(--aperture); background-size: contain; background-repeat: no-repeat;
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ============ 4. HONESTY TAG (§7 — anatomy is LAW, restyle only) ============ */
.tag {
  display: inline-block;
  font-family: "Berkeley Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.6;
  padding: 3px 10px; border-radius: var(--r-xs);
  letter-spacing: 0.02em; text-decoration: none;
  vertical-align: middle; white-space: nowrap;
}
.tag-live  { background: var(--gold); color: #171511; }              /* gold use 1 of 3 */
.tag-build { border: 1px solid var(--warn); color: var(--warn); background: transparent; }
.tag-plan  { border: 1px solid var(--line-control); color: var(--ink-3); background: transparent; }
a.tag:hover { text-decoration: underline; }
:root[data-theme="dark"] .tag-live { color: #17130B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-live { color: #17130B; } }

.chip {
  font-family: "Berkeley Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-subtle); border-radius: var(--r-xs);
  padding: 2px 8px; white-space: nowrap;
}
.kicker {
  font-family: "Berkeley Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--verdi); letter-spacing: 0.02em;
  display: block; margin-block-end: 8px;
}

/* ============ 5. NAV (§7: structure v1, CTA becomes an ink slab) ============ */
.nav {
  position: sticky; inset-block-start: 0; z-index: 40;
  block-size: 64px; background: var(--bg-base);
  transition: background var(--dur-base) var(--ease-out);
}
.nav.scrolled { background: var(--bg-raised); border-block-end: 1px solid var(--line-subtle); }
.nav-inner {
  max-width: 1200px; margin-inline: auto; padding-inline: 24px;
  block-size: 64px; display: flex; align-items: center; gap: 16px;
}
.wordmark {
  font-stretch: 85%; font-weight: 640; font-size: 19px; letter-spacing: -0.01em;
  color: var(--ink-1); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: 44px;
}
.nav-links { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; gap: 4px; margin-inline: auto; list-style: none; padding: 0; }
  .nav-links a {
    display: inline-flex; align-items: center;
    min-block-size: 44px; padding-inline: 12px;
    color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500;
    border-radius: var(--r-sm); transition: color var(--dur-instant);
  }
  .nav-links a:hover { color: var(--ink-1); }
  .nav-links a[aria-current="page"] { color: var(--ink-1); box-shadow: inset 0 -1px 0 var(--verdi); }
}
.nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 1024px) { .nav-actions { margin-inline-start: 0; } }
@media (max-width: 767px) { .nav .locale, .nav .theme-btn { display: none; } }
@media (max-width: 479px) {
  .nav-inner { padding-inline: 16px; gap: 8px; }
  .nav .wordmark { font-size: 16px; }
  .nav .btn-pri { padding-inline: 10px; font-size: 13px; }
  .menu-btn { padding-inline: 10px; font-size: 14px; }
}
.sheet-tools { display: flex; align-items: center; gap: 8px; margin-block-start: 24px; }

.locale { position: relative; }
.locale summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 10px;
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--ink-2); border: 1px solid var(--line-control); border-radius: var(--r-sm);
}
.locale summary::-webkit-details-marker { display: none; }
.locale-pop {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px);
  background: var(--bg-raised); border: 1px solid var(--line-subtle);
  border-radius: var(--r-md); box-shadow: var(--e2);
  padding: 12px 16px; inline-size: 240px; font-size: 14px;
}
.locale-pop p { margin: 0 0 6px; max-width: none; }

.theme-btn {
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 10px;
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--ink-2); background: none;
  border: 1px solid var(--line-control); border-radius: var(--r-sm); cursor: pointer;
}
.theme-btn:hover { color: var(--ink-1); }

/* ============ 6. BUTTONS (§7: primary = ink slab; gold retired from buttons) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  block-size: 48px; padding-inline: 24px;
  border-radius: var(--r-sm); font-size: 16px; font-weight: 500;
  font-family: inherit; cursor: pointer; text-decoration: none;
  border: none; white-space: nowrap;
  transition: background var(--dur-instant) var(--ease-out);   /* ground shifts; translate 0 */
}
.btn-pri { background: var(--btn-pri-bg); color: var(--btn-pri-ink); }
.btn-pri:hover { background: var(--btn-pri-hover); }
.btn-sec { background: transparent; border: 1px solid var(--line-control); color: var(--ink-1); }
.btn-sec:hover { background: var(--bg-sunken); }
.btn-ter { background: none; border: none; color: var(--verdi); text-decoration: underline; padding-inline: 8px; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--bg-sunken); color: var(--ink-3);
  border: 1px solid var(--line-control); cursor: not-allowed;
}
.nav .btn-pri { block-size: 44px; padding-inline: 18px; font-size: 15px; }

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: 12px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-1);
  background: none; border: 1px solid var(--line-control); border-radius: var(--r-sm);
  cursor: pointer;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg-raised);
  display: none; flex-direction: column;
  padding: 16px 24px 24px;
}
.sheet.open { display: flex; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.sheet-links {
  list-style: none; padding: 0; margin-block: auto 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.sheet-links a {
  display: flex; align-items: center; min-block-size: 48px;
  font-size: 22px; font-stretch: 92%; font-weight: 600; color: var(--ink-1); text-decoration: none;
}
.sheet .btn-pri { inline-size: 100%; }
body.sheet-locked { overflow: hidden; }

/* ============ 7. HERO + CEREMONY DEMO (§7: mechanics unchanged, v2 skin) ============ */
.hero { padding-block: 40px 64px; }
@media (min-width: 1024px) { .hero { padding-block: 64px 96px; } }
.hero-sub { font-size: 17px; }
@media (min-width: 768px) { .hero-sub { font-size: 19px; } }
.hero-hint { font-size: 14px; color: var(--ink-3); margin-block-start: 24px; }

/* The demo is a CHAMBER, not a floating card: a recess in the page, hairline-edged.
   NOC law (noc.css) — in-flow surfaces separate by one background step + a hairline;
   shadows belong to floating overlays only. Dropping e3 here also retires the
   "1px border + 40px blur" generated-UI signature, and the recess makes the ceremony
   inversion read as the chamber darkening rather than a card changing colour. */
.demo {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);                      /* §7: r/lg 16 */
  background: var(--bg-sunken);
  border: 1px solid var(--line-subtle);
  margin-block: 16px 8px;
  --tick: #59503C;                                  /* ticks read on both grounds */
  transition: background var(--dur-ceremony) var(--ease-out);
}
/* the inversion. The ≤8% single-hue tonal ramp is the sole gradient exception (§2.3). */
.demo.ceremony-active {
  background: var(--cer-bg);
  background-image: radial-gradient(ellipse at 50% 40%, #14100A 0%, #0C0A06 70%);
  border-color: var(--cer-line);
}
/* demo grain (estate law, separate texture from engraving): 2% noise */
.demo-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sim-label { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 5; }
.ceremony-active .sim-label.tag-plan { border-color: var(--cer-line-2); color: var(--cer-dim); }

.demo-inner {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  padding: 48px 20px 20px; position: relative;
}
@media (min-width: 1024px) { .demo-inner { grid-template-columns: 1fr 1fr; padding: 40px; } }

/* Outline-only inside the chamber (NOC law: a nested surface gets a border, never a
   second fill). The requester is CONTEXT — the shop asking. The phone is the SUBJECT
   and is the only filled object in the chamber, so the eye lands where the story is. */
.requester {
  align-self: center; padding: 24px;
  border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--line-strong);
  transition: background var(--dur-ceremony) var(--ease-out),
              border-color var(--dur-ceremony) var(--ease-out),
              color var(--dur-ceremony) var(--ease-out);
}
.ceremony-active .requester { background: var(--cer-surface); border-color: var(--cer-line); color: var(--cer-ink); }
.rq-name { font-weight: 600; font-size: 15px; }
.rq-ask { font-size: 22px; font-stretch: 88%; font-weight: 620; margin-block: 8px 4px; line-height: 1.2; }
@media (min-width: 768px) { .rq-ask { font-size: 26px; } }
.rq-sub { font-size: 14px; color: var(--ink-3); }
.ceremony-active .rq-sub { color: var(--cer-dim); }
.rq-result {
  margin-block-start: 16px; min-block-size: 56px;
  border-radius: var(--r-sm); border: 1px dashed var(--line-control);
  display: flex; align-items: center; justify-content: center;
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 14px;
  color: var(--ink-3); padding: 8px 12px; text-align: center;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.ceremony-active .rq-result { border-color: var(--cer-line-2); color: var(--cer-dim); }
.rq-result.got { border-style: solid; border-color: var(--pos); color: var(--pos); font-weight: 500; }

/* The ONE ConsentSheet render (v1 law): every consent depiction reuses this markup. */
.phone {
  justify-self: center; inline-size: min(320px, 100%);
  border-radius: var(--r-lg);
  background: var(--bg-raised); border: 1px solid var(--line-control);
  /* raised-on-sunken: ONE background step carries the depth. No shadow — the phone sits
     in the chamber, it does not hover above it (NOC: overlays only). */
  padding: 20px 18px 18px; position: relative;
  transition: background var(--dur-ceremony) var(--ease-out),
              border-color var(--dur-ceremony) var(--ease-out),
              color var(--dur-ceremony) var(--ease-out);
}
.ceremony-active .phone { background: var(--cer-surface); border-color: var(--cer-line); color: var(--cer-ink); }

.cs-verb {
  font-size: 13px; letter-spacing: 0.04em; color: var(--ink-3);
  font-family: "Berkeley Mono", ui-monospace, monospace;
}
.ceremony-active .cs-verb { color: var(--cer-dim); }
.cs-req { display: flex; align-items: center; gap: 8px; margin-block: 6px 14px; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.cs-req .chip { margin-inline-start: auto; }
.ceremony-active .cs-req .chip { border-color: var(--cer-line-2); color: var(--cer-dim); }
.ceremony-active .apt { background-image: var(--aperture-cer); }

.cs-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm); margin-block-end: 6px;
  font-size: 14px; border: 1px solid transparent;
}
/* §7: share-row highlight = gold at 12% — the moment of truth (gold use 2 of 3) */
.cs-row.share {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: var(--gold); color: inherit; font-weight: 500;
}
.cs-row.hold { background: var(--bg-sunken); color: var(--ink-3); }
.ceremony-active .cs-row.hold { background: var(--cer-slide-bg); color: var(--cer-withheld); }
.cs-hold-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.i-lock { inline-size: 11px; block-size: 13px; flex: none; }
.cs-row.hold.shake { animation: shk var(--dur-quick) 2; }
@keyframes shk { 50% { transform: translateX(2px); } }

.cs-storage { font-size: 12.5px; color: var(--ink-3); margin-block: 10px 14px; padding-inline: 2px; }
.ceremony-active .cs-storage { color: var(--cer-dim); }

.slide {
  position: relative; block-size: 48px; border-radius: var(--r-sm);
  background: var(--bg-sunken); border: 1px solid var(--line-control);
  overflow: hidden; cursor: pointer; user-select: none;
  -webkit-user-select: none; touch-action: none;
  inline-size: 100%; padding: 0; font: inherit;
}
.ceremony-active .slide { background: var(--cer-slide-bg); border-color: var(--cer-line-2); }
/* gold use 3 of 3: the approve-fill */
.slide-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0;
  background: var(--gold); transition: inline-size 0.12s linear;
}
.slide-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: var(--ink-2); z-index: 2;
}
.ceremony-active .slide-txt { color: var(--cer-ink); }
.slide.done .slide-txt { color: #171511; }
.slide.done .slide-fill { inline-size: 100%; }

.receipt {
  display: none; align-items: center; gap: 8px;
  margin-block-start: 12px; padding: 10px 12px;
  border: 1px solid var(--line-subtle); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-3);
}
.ceremony-active .receipt { border-color: var(--cer-line); color: var(--cer-dim); }
.receipt.shown { display: flex; animation: expose var(--dur-base) var(--ease-out); }
/* §6 EXPOSURE: opacity resolving like film, with a ≤8px settle. No spring, no overshoot. */
@keyframes expose { from { transform: translateY(8px); opacity: 0; } }

/* the ONE particle — the sole glow anywhere on the site (§2.3) */
.particle {
  position: absolute; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--cer-particle);
  box-shadow: 0 0 12px 4px color-mix(in srgb, var(--cer-particle) 55%, transparent);
  z-index: 6; opacity: 0; pointer-events: none;
}

.demo-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 0 20px 20px; position: relative; z-index: 4;
}
@media (min-width: 1024px) { .demo-controls { padding-inline: 40px; } }
.demo-controls button {
  min-block-size: 44px; padding-inline: 14px;
  font: inherit; font-size: 14px; font-weight: 500;
  background: none; border: 1px solid var(--line-control); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
}
.ceremony-active .demo-controls button { border-color: var(--cer-line-2); color: var(--cer-ink); }
.demo-controls button:hover { color: var(--ink-1); }
.ceremony-active .demo-controls button:hover { color: var(--cer-ink); }
.demo-controls button[disabled] { opacity: 0.45; cursor: default; }
.step-label { font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
.ceremony-active .step-label { color: var(--cer-dim); }
.demo-cap { font-size: 14px; color: var(--ink-3); margin-block-start: 12px; }

/* ============ 8. TRUTH PANELS + FIGURES ============ */
.truth-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.truth-head h2 { margin: 0; }
.truth-claim { font-size: 17px; color: var(--ink-1); margin-block: 8px 4px; }
@media (min-width: 768px) { .truth-claim { font-size: 19px; } }
.truth-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .truth-grid { grid-template-columns: minmax(0, 68ch) minmax(280px, 1fr); gap: 48px; } }

/* figures: hairline + background-shift over shadow (§5.4). Never card-in-card. */
.fig {
  border: 1px solid var(--line-subtle); border-radius: var(--r-md);
  background: var(--bg-raised); box-shadow: var(--e1);
  padding: 24px;
}
.fig-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-block: 10px; border-block-start: 1px solid var(--line-subtle);
  font-size: 14px;
}
.fig-row:first-of-type { border-block-start: none; }
.fig-row .k { color: var(--ink-3); }
.fig-row .v { font-weight: 500; }
.fig-row .v.none { color: var(--ink-3); font-weight: 400; }
.fig-title { font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; margin-block-end: 8px; }
.fig details summary {
  cursor: pointer; font-weight: 500; font-size: 15px; color: var(--ink-1);
  min-block-size: 44px; display: flex; align-items: center;
}
.fig-note { font-size: 13px; color: var(--ink-3); margin-block-start: 12px; }

.keyfig { display: flex; flex-direction: column; gap: 12px; }
.keyfig .device {
  border: 1px solid var(--line-control); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px;
}
.keyfig .device.dead { border-style: dashed; color: var(--ink-3); }
.keyfig .arrow { text-align: center; font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
/* structural glyph — verdigris, never gold (§1.4: gold is spent three ways only) */
.keyglyph {
  inline-size: 28px; block-size: 28px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-control); color: var(--verdi);
  display: inline-flex; align-items: center; justify-content: center;
}
.keyglyph svg { inline-size: 14px; block-size: 14px; }

.steps-fig { counter-reset: st; display: flex; flex-direction: column; gap: 0; padding-inline-start: 0; margin: 0; }
.steps-fig li {
  list-style: none; counter-increment: st;
  display: flex; gap: 12px; align-items: baseline;
  padding-block: 10px; border-block-start: 1px solid var(--line-subtle);
  font-size: 14px; color: var(--ink-2);
}
.steps-fig li:first-child { border-block-start: none; }
.steps-fig li::before {
  content: counter(st);
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--verdi); border: 1px solid var(--line-control); border-radius: 50%;
  inline-size: 22px; block-size: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}

.anatomy { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .anatomy { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 48px; } }
.legend { list-style: none; padding: 0; margin: 0; }
.legend li {
  display: flex; gap: 12px; align-items: baseline;
  padding-block: 12px; border-block-start: 1px solid var(--line-subtle);
  font-size: 15px; color: var(--ink-2); max-inline-size: 60ch;
}
.legend li:first-child { border-block-start: none; }
.legend b { color: var(--ink-1); }
.n-chip {
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--bg-base); background: var(--ink-1); border-radius: 50%;
  inline-size: 20px; block-size: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-note { position: relative; }
.cs-note .n-chip { position: absolute; inset-inline-end: -10px; inset-block-start: -8px; z-index: 3; }

/* credential card — evidence-grade: rosette interior + ticks + aperture mark (§7) */
.cred {
  inline-size: min(300px, 100%); aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background-color: var(--bg-raised);
  /* v1 §6 keeps a TRUE shadow here on purpose — this object is meant to feel physical.
     Tightened from e2 (0 4px 16px): a real card casts a short contact shadow, not a
     diffuse halo. The diffuse version was reading as the generated-UI elevation tell. */
  border: 1px solid var(--line-strong); box-shadow: var(--e-card);
  padding: 18px 20px; position: relative;
}
.cred .iss {
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.cred .ttl { font-stretch: 88%; font-weight: 620; font-size: 19px; margin-block: 6px 14px; }
.cred .clm {
  display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
  padding-block: 5px; border-block-start: 1px solid var(--line-subtle);
}
.cred .clm span:first-child { color: var(--ink-3); }

/* ============ 9. FABRIC BAND — permanent ceremony surface, engraved ground (§7) ============ */
.fabric-band {
  background-color: var(--cer-bg); color: var(--cer-ink);
  background-image: var(--engrave-cer); background-size: 1200px 1200px;
}
.fabric-band h2 { color: var(--cer-ink); }
.fabric-band p { color: var(--cer-dim); }
.fabric-band .truth-claim { color: var(--cer-ink); }
.fabric-canvas { position: relative; block-size: min(180px, 70vh); margin-block: 24px; }
.cell {
  position: absolute; inline-size: 64px; block-size: 64px;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--aperture-cer); background-size: contain; background-repeat: no-repeat;
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--cer-dim);
}
[dir="rtl"] .cell { transform: scaleX(-1); }
/* the site's one permanent loop: ~0.2Hz breathing (§5.1, v1 §5) */
.cell::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, #5E5638 62%, transparent); /* aperture stroke tone — gold is reserved (§1.4) */
  animation: breathe 5s ease-in-out infinite;
}
.cell.pending { opacity: 0.55; }
.cell.pending::after { animation: none; opacity: 0.25; }
.fabric-band.paused .cell::after { animation-play-state: paused; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.4; } }
.thread { position: absolute; block-size: 1px; background: var(--cer-thread); }
/* The data-source caption appears on THREE different grounds (BONE page, VAULT page, and the
   permanent ceremony surface). It was one hardcoded #6E6E64 chosen for one of them and failing
   AA on the other two (3.35:1 on VAULT raised). It follows the ground now. */
.data-src { font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
.fabric-band .data-src, .ceremony-active .data-src { color: var(--cer-dim); }

/* ============ 10. JOIN / FORMS ============ */
.exits { list-style: none; padding: 0; margin: 24px 0 48px; max-inline-size: 68ch; }
.exits li { padding-block: 20px; border-block-start: 1px solid var(--line-subtle); }
.exits li:first-child { border-block-start: none; }
.exits h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.exits p { margin: 0 0 8px; font-size: 15px; }
.exits a { font-size: 15px; }

.join-form { max-inline-size: 480px; }
.join-form label { display: block; font-weight: 500; font-size: 15px; margin-block-end: 6px; }
.join-row { display: flex; flex-wrap: wrap; gap: 8px; }
.join-form input[type="email"] {
  flex: 1 1 240px; block-size: 48px;
  padding-inline: 14px; font: inherit; font-size: 16px;
  color: var(--ink-1); background: var(--bg-raised);
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
}
.join-form input[type="email"]:focus-visible { outline-offset: 0; }
.field-error { display: none; font-size: 14px; color: var(--dang); margin-block-start: 6px; }
.field-error.on { display: block; }
.join-note { font-size: 14px; color: var(--ink-3); margin-block-start: 10px; }

/* ============ 11. /how — THE JOURNEY OF A PROOF (the page's one bold move) ============
   No-JS default: every keyframe renders in flow as a readable stepped sequence.
   .is-scrub  → sticky stage, scroll drives the film, bidirectional (≥1024px, motion allowed)
   .is-steps  → one card at a time with next/prev (<1024px, or reduced motion) */
.film-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.film-track { position: relative; }
.film-stage { position: relative; }
.film-panel {
  padding-block: 40px;
  border-block-start: 1px solid var(--line-subtle);
}
.film-panel:first-child { border-block-start: none; }
.panel-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .panel-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); gap: 56px; } }
.panel-head { display: flex; align-items: center; gap: 16px; margin-block-end: 4px; }
.panel-head h3 { margin: 0; font-size: 26px; font-stretch: 88%; font-weight: 620; }
@media (min-width: 768px) { .panel-head h3 { font-size: 34px; } }
.panel-body { font-size: 17px; }
@media (min-width: 768px) { .panel-body { font-size: 19px; } }
.panel-art {
  display: flex; align-items: center; justify-content: center;
  min-block-size: 220px;
}
.panel-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 12px 0; }
.eng-note { margin-block-start: 16px; max-inline-size: 68ch; }
.eng-note summary {
  cursor: pointer; font-size: 14px; color: var(--verdi);
  min-block-size: 44px; display: flex; align-items: center;
}
.eng-note .eng-body {
  font-size: 14px; color: var(--ink-2);
  border-inline-start: 1px solid var(--line-subtle); padding-inline-start: 16px;
}
.eng-note .eng-body p { font-size: 14px; margin-block: 0 8px; }

.film-rail {
  position: sticky; inset-block-start: 64px; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-block: 12px; background: var(--bg-base);
  border-block-end: 1px solid var(--line-subtle);
}
.film-rail .bar { flex: 1 1 120px; block-size: 2px; background: var(--line-subtle); position: relative; }
.film-rail .bar i {
  position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0;
  background: var(--verdi); display: block;
}
.film-rail .pos { font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.film-nav { display: flex; gap: 8px; }
.film-nav button {
  min-block-size: 44px; padding-inline: 14px;
  font: inherit; font-size: 14px; font-weight: 500;
  background: none; border: 1px solid var(--line-control); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
}
.film-nav button:hover { color: var(--ink-1); }
.film-nav button[disabled] { opacity: 0.45; cursor: default; }

/* scrub mode: the film runs on the scroll, settling at each keyframe */
.is-scrub .film-track { block-size: 520vh; }
.is-scrub .film-stage {
  position: sticky; inset-block-start: 108px;
  block-size: min(640px, calc(100vh - 132px));
}
.is-scrub .film-panel {
  position: absolute; inset: 0; border: none; padding-block: 0;
  display: grid; align-content: center; overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out);   /* exposure, never a slide-cascade */
}
.is-scrub .film-panel.on { opacity: 1; visibility: visible; }

/* stepped mode: one card at a time, same keyframes */
.is-steps .film-panel { display: none; border: none; padding-block: 24px 8px; }
.is-steps .film-panel.on { display: block; animation: expose var(--dur-base) var(--ease-out); }

/* ============ 12. /trust — THE CAPABILITY REGISTER (the page's one bold move) ============ */
.reg-head {
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background-color: var(--bg-raised);
  padding: 28px 24px; margin-block: 24px 0;
  --tick: var(--ink-3);
}
.reg-head h2 { margin-block-end: 6px; }
.counts { display: flex; flex-wrap: wrap; gap: 28px; margin-block-start: 20px; }
.counts .c-n { font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink-1); }
.counts .c-l { font-size: 13px; color: var(--ink-3); }

.reg-tool { margin-block-start: 24px; }
.reg-tool input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.filters label {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.filters label:hover { color: var(--ink-1); }
#f-all:checked   ~ .filters label[for="f-all"],
#f-live:checked  ~ .filters label[for="f-live"],
#f-build:checked ~ .filters label[for="f-build"],
#f-plan:checked  ~ .filters label[for="f-plan"] {
  background: var(--btn-pri-bg); color: var(--btn-pri-ink); border-color: var(--btn-pri-bg);
}
#f-all:focus-visible   ~ .filters label[for="f-all"],
#f-live:focus-visible  ~ .filters label[for="f-live"],
#f-build:focus-visible ~ .filters label[for="f-build"],
#f-plan:focus-visible  ~ .filters label[for="f-plan"] { outline: 2px solid var(--verdi); outline-offset: 2px; }
#f-live:checked  ~ .register .reg-row:not([data-state="live"]),
#f-build:checked ~ .register .reg-row:not([data-state="build"]),
#f-plan:checked  ~ .register .reg-row:not([data-state="plan"]) { display: none; }

.register { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-raised); }
.reg-row { padding: 20px; border-block-start: 1px solid var(--line-subtle); }
.reg-row:first-child { border-block-start: none; }
.reg-row h3 { margin: 0; font-size: 17px; font-stretch: 92%; }
@media (min-width: 768px) { .reg-row h3 { font-size: 19px; } }
.reg-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.reg-row p { font-size: 15px; margin-block: 8px; }
.reg-row .evid summary {
  cursor: pointer; font-size: 13px; color: var(--verdi);
  min-block-size: 44px; display: flex; align-items: center;
}
.reg-row .evid .e-body {
  font-family: "Berkeley Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--ink-2);
  background: var(--bg-sunken); border-radius: var(--r-sm);
  padding: 12px 14px; margin-block-end: 4px; overflow-x: auto;
}

/* honest empty states — designed, never a hole (§8 DO) */
.empty {
  border: 1px dashed var(--line-control); border-radius: var(--r-md);
  padding: 28px 24px; margin-block: 16px; background: var(--bg-raised);
}
.empty .e-title { font-stretch: 92%; font-weight: 600; font-size: 17px; color: var(--ink-1); }
.empty p { margin-block: 8px 0; font-size: 15px; }
.empty ul { margin: 12px 0 0; padding-inline-start: 20px; font-size: 15px; color: var(--ink-2); }
.empty li { margin-block-end: 4px; }

.what-table { inline-size: 100%; border-collapse: collapse; margin-block: 16px; font-size: 15px; }
.what-table th, .what-table td { text-align: start; padding: 10px 12px 10px 0; border-block-end: 1px solid var(--line-subtle); vertical-align: top; }
.what-table th { font-size: 11px; font-family: "Berkeley Mono", ui-monospace, monospace; color: var(--ink-3); font-weight: 400; }
.table-scroll { overflow-x: auto; }

/* ============ 13. FOOTER ============ */
.footer {
  background-color: var(--bg-sunken); border-block-start: 1px solid var(--line-subtle);
  margin-block-start: 96px;
  background-image: var(--engrave); background-size: 1200px 1200px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: 48px 24px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h4 { font-size: 13px; font-stretch: 92%; font-weight: 600; margin: 0 0 10px; color: var(--ink-1); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-block-end: 4px; }
.footer a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; min-block-size: 32px;
}
.footer a:hover { color: var(--ink-1); text-decoration: underline; }
.footer .keys-sentence {
  font-size: 15px; color: var(--ink-1); font-weight: 500;
  border-block-start: 1px solid var(--line-subtle);
  padding-block: 24px; margin: 0; max-width: none;
}
.footer .fine { font-size: 12.5px; color: var(--ink-3); padding-block-end: 32px; margin: 0; max-width: none; }

/* ============ 14. REDUCED MOTION (v1 §5, carried): designed static states ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cell::after { animation: none; opacity: 0.35; }
  .cs-row.hold.shake { animation: none; }
  .receipt.shown, .is-steps .film-panel.on { animation: none; }
}

/* ============ 15. OVERFLOW DISCIPLINE (§7b): the body never scrolls horizontally ============ */
body { overflow-x: clip; }
img, svg { max-inline-size: 100%; }

/* ============ 16. /business — WHITE-LABEL PREVIEW + BUYER LANES ============
   The preview is a SIMULATED canvas (demo-grain law). Everything else on the page
   reuses shared components: steps-fig, what-table, register rows, empty states. */
/* grid items carry implicit min-width:auto — zero it so the preview's track can
   never grow past its canvas at narrow widths (§7b overflow discipline) */
#wl-form, #wl-cred { min-inline-size: 0; }
.wl-form { display: flex; flex-direction: column; gap: 14px; }
.wl-form label { font-weight: 500; font-size: 15px; }
.wl-input {
  inline-size: 100%; max-inline-size: 360px; block-size: 48px; padding-inline: 14px;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--ink-1); font: inherit; font-size: 16px;
}
/* fieldset's UA default min-inline-size:min-content would force the unwrapped swatch
   row's width onto the page at 320px — zero it (§7b overflow discipline) */
.wl-form fieldset { min-inline-size: 0; border: none; padding: 0; margin: 0; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.swatch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-control); border-radius: 999px;
  padding: 6px 14px 6px 8px; font-size: 13px; color: var(--ink-2); background: var(--bg-raised);
}
.swatch i { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--sw); flex: none; }
.swatches input:checked + .swatch { border-color: var(--ink-1); color: var(--ink-1); }
.swatches input:focus-visible + .swatch { outline: 2px solid var(--verdi); outline-offset: 2px; }
/* the simulated tenant's brand mark on the card — square bar, no second radius (§5.3) */
.cred .brandline { block-size: 4px; background: var(--wl-brand, var(--verdi)); margin-block: 10px 12px; }

/* ============ 17. /developers — CODE BLOCKS + SANDBOX PREVIEW ============
   Code is a first-class designed object (§7): token highlighting is a verdigris
   underline — gold is retired from code by law. */
.codeblock {
  background: var(--bg-sunken); border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm); padding: 16px 18px; overflow-x: auto;
  font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-1);
  margin-block: 16px 8px;
}
.codeblock code { font: inherit; white-space: pre; }
.tok {
  color: var(--ink-1); text-decoration: underline;
  text-decoration-color: var(--verdi); text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.codeblock .cmt { color: var(--ink-3); }
.term {
  background: var(--bg-sunken); border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm); padding: 16px 18px; overflow-x: auto;
  font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 13px; line-height: 1.75; color: var(--ink-2);
}
.term-line { display: block; white-space: pre; }
.term-line.t-in { color: var(--ink-1); }
.term-line.t-in::before { content: "$ "; color: var(--verdi); }
.term-line.t-ok { color: var(--pos); }
/* replay: lines re-expose one by one (§6 exposure — opacity resolving, ≤8px settle) */
.term-line.replaying { visibility: hidden; }
.term-line.on { visibility: visible; animation: expose var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .term-line.replaying { visibility: visible; }
  .term-line.on { animation: none; }
}
/* §17 guard: the transcript's pre lines must never push the phone column off the
   canvas — columns may shrink, the transcript scrolls inside its own rail (§7b). */
#sandbox .demo-inner > * { min-inline-size: 0; }