/* REKEY — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 and §10.
   PAGE SCALE (LUAT 50): the build width is 1920. One page unit --u = 100vw / 1920, so at 1920 every
   calc(N * var(--u)) equals N CSS px = the mockup 1:1 (mockup px x 1.1483); 1280–2560 scale in proportion.
   No max-width cap anywhere. Write every size in a route as calc(N * var(--u)) with N = the @1920 value.
   Text uses the --fs-* tokens / .t-* classes (never below 12px). Hairlines use the --rule-* tokens (max(1px, …)).
   BORDERS (LUAT 56): route files contain ZERO border/outline declarations — use the .rule-* classes below.
   FRAME (LUAT 53 + USER FIX U1): <main class="frame"> owns the page ground #342B23 and the 46/43 gutters
   (container 1831 @1920); routes never set their own max-width, side padding or page background. */

:root {
  --u: calc(100vw / 1920);

  /* colour (DESIGN.md §3) */
  --paper: #342B23;
  --chrome: #342C24;
  --surface: #322E24;
  --surface-deep: #262222;
  --well: #2F2C22;
  --text: #F6F6F6;
  --text-nav: #F3F2EC;
  --data: #CFCDC6;
  --muted: #88827B;
  --muted-nav: #A7A398;
  --muted-2: #76726A;
  --boundary: #D0CDC4;
  --plate: #C4BDB0;
  --emerald: #5AC19B;
  --emerald-ink: #6BC199;
  --emerald-dim: #4B8763;
  --emerald-dim-ink: #63A988;
  --emerald-fill: #99C5A1;
  --coral: #D54C53;
  --coral-chip: #E56661;
  --lock: linear-gradient(90deg, #D1495B 0%, #52B788 100%);

  /* fonts (DESIGN.md §2 — Unbounded replaces Michroma, measured) */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Kode Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* type scale, @1920 px values from DESIGN.md §2 */
  --fs-hero: calc(63 * var(--u));          /* Unbounded 300, home headline */
  --fs-display: calc(83 * var(--u));       /* route display word (sweep/open/agents) */
  --fs-title: calc(57 * var(--u));         /* route title (inspect) */
  --fs-subtitle: calc(46 * var(--u));
  --fs-section: calc(35.5 * var(--u));     /* Unbounded 400 UPPER */
  --fs-num: calc(57 * var(--u));           /* big number 813 / 16 SEP / 01 */
  --fs-data: max(12px, calc(18.5 * var(--u)));   /* Kode Mono 500 values */
  --fs-label: max(12px, calc(16 * var(--u)));    /* Kode Mono caps labels */
  --fs-body: max(12px, calc(17 * var(--u)));     /* Onest 400 */
  --fs-lede: max(13px, calc(19.9 * var(--u)));   /* the one-line lede under a title */
  --fs-nav: max(12px, calc(15 * var(--u)));
  --fs-foot: max(12px, calc(13 * var(--u)));
  --fs-brand: max(13px, calc(21 * var(--u)));
  --fs-foot-brand: max(12px, calc(19 * var(--u)));

  /* page frame (USER FIX U1: 46 left / 43 right @1920, container 1831) */
  --gutter-l: calc(46 * var(--u));
  --gutter-r: calc(43 * var(--u));
  --gap-section: calc(72 * var(--u));      /* section gap 48–96 (WEB_RULES #22) */
  --chrome-pad: calc(52 * var(--u));       /* nav/footer side padding (chrome/nav.html) */

  /* rules (DESIGN.md §4 / §4b — widths @1920, hairlines never under 1px) */
  --rule-hair: max(1px, calc(1.1 * var(--u)));
  --rule-frame: max(1px, calc(2 * var(--u)));
  --rule-c: #6F6A5E;
  --rule-dim-c: #524C43;
  --rule-strong-c: #9A9489;
  --rule-cta-c: #5AC19B;
  --rule-cta-dim-c: #4B8763;
  --rule-coral-c: #DC5E5B;
  --rule-coral-dim-c: #7E4A40;

  /* chamfers (DESIGN.md §4: panels 45° on all four corners 14 @1920; controls 8 on one corner) */
  --ch-panel: calc(14 * var(--u));
  --ch-ctl: max(5px, calc(8 * var(--u)));

  /* motion (DESIGN.md §10 — the locksmith's bench): one easing family, four durations */
  --ease-detent: cubic-bezier(.2, .9, .1, 1);      /* fast travel, hard stop: a pin dropping to the shear line */
  --ease-mill: cubic-bezier(.45, 0, .2, 1);        /* the cutter pass: steady feed across the blank */
  --t-click: 180ms;
  --t-pin: 240ms;
  --t-cut: 450ms;
  --t-pass: 600ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45;
  background-color: var(--paper);
  /* faint grain, <= 3 % (DESIGN.md §0/§4) — no gradient band, no vignette */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .86 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
input, textarea, select { border: 0; outline: 0; background: transparent; border-radius: 0; }
table { border-collapse: collapse; width: 100%; }
td, th, .num, .t-data, .t-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--emerald); outline-offset: 2px; }
::selection { background: rgba(90, 193, 155, .35); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--chrome); padding: 8px 12px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type (DESIGN.md §2) ---------- */
.t-hero { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: 1.07; letter-spacing: -.006em; margin: 0; }
.t-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1; text-transform: uppercase; margin: 0; }
.t-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title); line-height: 1; text-transform: uppercase; margin: 0; }
.t-subtitle { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-subtitle); line-height: 1.05; text-transform: uppercase; margin: 0; }
.t-section { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-section); line-height: 1.1; letter-spacing: .032em; text-transform: uppercase; margin: 0; }
.t-num { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-num); line-height: 1; letter-spacing: .04em; }
.t-data { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-data); line-height: 1.3; letter-spacing: -.031em; color: var(--data); }
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-body); line-height: 1.35; }
.t-label { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.45; }
.t-lede { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lede); line-height: 1.4; color: var(--muted); margin: 0; }
.t-muted { color: var(--muted); }
.t-exposed { color: var(--coral); }
.t-valid { color: var(--emerald-ink); }
.addr { font-family: var(--font-mono); overflow-wrap: anywhere; }

/* ---------- page frame (one container for every route) ---------- */
main.frame {
  flex: 1; width: 100%;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
  background: transparent; /* page ground = body paper, never set per route */
}
main.frame:focus { outline: none; }
.section + .section { margin-top: var(--gap-section); }

/* ---------- nav (mockup/v1/chrome/nav.html, scaled with --u; CA + BUY removed by the user) ---------- */
.site-nav {
  position: relative; z-index: 20;
  height: calc(108 * var(--u)); min-height: 56px;
  background: var(--chrome); color: var(--text-nav);
  display: grid; grid-template-columns: calc(551 * var(--u)) auto 1fr; align-items: center; gap: calc(26 * var(--u));
  padding: 0 var(--chrome-pad);
  font-family: var(--font-body); font-size: var(--fs-nav); white-space: nowrap;
}
.brand {
  display: inline-flex; align-items: center; gap: calc(13 * var(--u)); color: var(--text-nav); text-decoration: none;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; justify-self: start;
}
.brand-mark { height: calc(48 * var(--u)); min-height: 36px; width: auto; flex: none; }
.brand-word { font-size: var(--fs-brand); line-height: 1; }
.routes { position: relative; display: flex; align-items: center; gap: calc(28 * var(--u)); }
.routes a, .actions a { color: var(--muted-nav); text-decoration: none; transition: color var(--t-click) var(--ease-detent); }
.routes a { position: relative; padding: calc(7 * var(--u)) 0; }
.routes a:hover, .actions a:not(.is-soon):hover { color: var(--text-nav); }
.routes a.is-active { color: var(--text-nav); }
/* active route: 2 px lock-gradient underline (DESIGN.md §3/§5) that is milled in left -> right */
.routes a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(1px, calc(2 * var(--u)));
  background: var(--lock); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-cut) var(--ease-mill);
}
.routes a.is-active::after { transform: scaleX(1); }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(18 * var(--u)); }
a.is-soon { opacity: .6; cursor: default; }
.nav-toggle { display: none; }
.nav-drawer { display: none; }
/* route change: one cutter pass along the nav's bottom rule (DESIGN.md §10) */
.shear {
  position: absolute; left: 0; bottom: calc(-1 * var(--rule-hair)); width: 100%; height: max(1px, calc(2 * var(--u)));
  background: var(--lock); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.shear.is-pass { animation: rk-pass var(--t-pass) var(--ease-mill) both; }
@keyframes rk-pass {
  0% { transform: scaleX(0); opacity: 1; transform-origin: 0 50%; }
  55% { transform: scaleX(1); opacity: 1; transform-origin: 0 50%; }
  56% { transform-origin: 100% 50%; }
  100% { transform: scaleX(0); opacity: 1; transform-origin: 100% 50%; }
}

/* ---------- footer (mockup/v1/chrome/footer.html, scaled; mark kept, CA = TBA, BUY waits for launch) ---------- */
.site-foot {
  min-height: calc(136 * var(--u));
  background: var(--chrome); color: var(--muted-nav);
  display: grid; grid-template-columns: calc(240 * var(--u)) 1fr auto; align-items: center; gap: calc(28 * var(--u));
  padding: calc(22 * var(--u)) var(--chrome-pad);
  font-family: var(--font-body); font-size: var(--fs-foot); line-height: 1.4;
}
.foot-brand { gap: calc(12 * var(--u)); }
.foot-mark { height: calc(45 * var(--u)); min-height: 34px; width: auto; flex: none; }
.foot-word { font-size: var(--fs-foot-brand); }
.site-foot .copy { display: grid; gap: calc(9 * var(--u)); }
.site-foot .boundary { color: var(--boundary); }
.site-foot .links { display: flex; align-items: center; gap: calc(24 * var(--u)); white-space: nowrap; }
.site-foot .links a { text-decoration: none; }
.site-foot .links a:not(.is-soon):hover { color: var(--text-nav); }
.foot-ca { font-family: var(--font-body); }
.foot-ca [data-launch="ca"] { font-family: var(--font-mono); color: var(--data); }
.ca-copy { padding: 0 0 0 .5em; color: var(--emerald-dim-ink); font-family: var(--font-mono); font-size: inherit; text-decoration: underline; }
.ca-copy:disabled { opacity: .5; cursor: default; text-decoration: none; }
.buy {
  padding: calc(12 * var(--u)) calc(18 * var(--u)); color: var(--emerald-dim-ink) !important;
  font-family: var(--font-mono); letter-spacing: .05em; text-decoration: none;
}

/* ================= RULES — the only place borders are drawn (DESIGN.md §4 / §4b) =================
   Straight rules: .rule-nav (nav bottom) · .rule-foot (footer top) · .rule-row (bottom hairline) ·
   .rule-row-top (top hairline) · .rule-col (left hairline divider) · add .is-dim / .is-strong for the colour.
   Framed components (chamfered, frame drawn by ::before/::after so the 45° corner carries the line):
   .rule-panel (chamfer 14 on all four corners) · .rule-card (hairline, chamfer 8 tl+br) · .rule-input (wraps the
   whole control incl. its button, chamfer 8 bottom-left) · .rule-button (rule-strong, chamfer 8 top-right) ·
   .rule-cta (emerald) · .rule-cta-dim (emerald-dim) · .rule-coral (coral) · .rule-tab (tab strip / toggle) ·
   .rule-chip (hairline chip). Framed elements own their ::before/::after — never use those pseudo-elements on
   them in a route. Fill inside a frame: set --fill (default transparent; .rule-panel = surface, .rule-input = well).
   Adjacent framed boxes: put a gap between them or use rows inside one frame — never two frames sharing an edge. */
.rule-nav { border-bottom: var(--rule-hair) solid var(--rule-c); }
.rule-foot { border-top: var(--rule-hair) solid var(--rule-c); }
.rule-row { border-bottom: var(--rule-hair) solid var(--rule-c); }
.rule-row-top { border-top: var(--rule-hair) solid var(--rule-c); }
.rule-col { border-left: var(--rule-hair) solid var(--rule-c); }
.rule-row.is-dim, .rule-row-top.is-dim, .rule-col.is-dim { border-color: var(--rule-dim-c); }
.rule-row.is-strong, .rule-row-top.is-strong, .rule-col.is-strong { border-color: var(--rule-strong-c); }
.rule-row.is-coral, .rule-row-top.is-coral { border-color: var(--rule-coral-dim-c); }

.rule-panel, .rule-card, .rule-input, .rule-button, .rule-cta, .rule-cta-dim, .rule-coral, .rule-tab, .rule-chip {
  --bw: var(--rule-hair); --bc: var(--rule-c); --fill: transparent;
  --c-tl: 0px; --c-tr: 0px; --c-br: 0px; --c-bl: 0px;
  position: relative; isolation: isolate;
}
.rule-panel::before, .rule-card::before, .rule-input::before, .rule-button::before, .rule-cta::before,
.rule-cta-dim::before, .rule-coral::before, .rule-tab::before, .rule-chip::before,
.rule-panel::after, .rule-card::after, .rule-input::after, .rule-button::after, .rule-cta::after,
.rule-cta-dim::after, .rule-coral::after, .rule-tab::after, .rule-chip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
/* ::before = the ring (frame colour, one evenodd polygon: outer chamfered edge + inner edge offset by --bw,
   so the 45° corners carry the line too); ::after = the fill under it (transparent unless --fill is set) */
.rule-panel::before, .rule-card::before, .rule-input::before, .rule-button::before, .rule-cta::before,
.rule-cta-dim::before, .rule-coral::before, .rule-tab::before, .rule-chip::before {
  z-index: -1; background: var(--bc);
  --i-tl: max(var(--bw), calc(var(--c-tl) + var(--bw) * .414)); --i-tr: max(var(--bw), calc(var(--c-tr) + var(--bw) * .414));
  --i-br: max(var(--bw), calc(var(--c-br) + var(--bw) * .414)); --i-bl: max(var(--bw), calc(var(--c-bl) + var(--bw) * .414));
  clip-path: polygon(evenodd,
    var(--c-tl) 0, calc(100% - var(--c-tr)) 0, 100% var(--c-tr), 100% calc(100% - var(--c-br)),
    calc(100% - var(--c-br)) 100%, var(--c-bl) 100%, 0 calc(100% - var(--c-bl)), 0 var(--c-tl), var(--c-tl) 0,
    var(--i-tl) var(--bw), calc(100% - var(--i-tr)) var(--bw), calc(100% - var(--bw)) var(--i-tr),
    calc(100% - var(--bw)) calc(100% - var(--i-br)), calc(100% - var(--i-br)) calc(100% - var(--bw)),
    var(--i-bl) calc(100% - var(--bw)), var(--bw) calc(100% - var(--i-bl)), var(--bw) var(--i-tl), var(--i-tl) var(--bw));
  transition: background-color var(--t-click) var(--ease-detent);
}
.rule-panel::after, .rule-card::after, .rule-input::after, .rule-button::after, .rule-cta::after,
.rule-cta-dim::after, .rule-coral::after, .rule-tab::after, .rule-chip::after {
  z-index: -2; background: var(--fill);
  clip-path: polygon(var(--c-tl) 0, calc(100% - var(--c-tr)) 0, 100% var(--c-tr), 100% calc(100% - var(--c-br)),
    calc(100% - var(--c-br)) 100%, var(--c-bl) 100%, 0 calc(100% - var(--c-bl)), 0 var(--c-tl));
}
.rule-panel { --bw: var(--rule-frame); --bc: var(--rule-strong-c); --fill: var(--surface); --c-tl: var(--ch-panel); --c-tr: var(--ch-panel); --c-br: var(--ch-panel); --c-bl: var(--ch-panel); }
.rule-panel.is-dim { --bc: var(--rule-c); }
.rule-panel.is-deep { --fill: var(--surface-deep); }
.rule-card { --bc: var(--rule-c); --fill: var(--surface); --c-tl: var(--ch-ctl); --c-br: var(--ch-ctl); }
.rule-input { --bw: var(--rule-frame); --bc: var(--rule-strong-c); --fill: var(--well); --c-bl: var(--ch-ctl); display: flex; align-items: stretch; padding: var(--bw); }
.rule-input:focus-within { --bc: var(--emerald); }
.rule-input.is-invalid, .rule-input[aria-invalid="true"] { --bc: var(--coral); }
.rule-input.is-valid { --bc: var(--emerald); }
.rule-input input, .rule-input textarea, .rule-input select { flex: 1; min-width: 0; width: 100%; padding: 0; margin: 0; font-family: var(--font-mono); color: var(--text); }
.rule-input input::placeholder, .rule-input textarea::placeholder { color: var(--muted); opacity: 1; }
.rule-button { --bw: var(--rule-frame); --bc: var(--rule-strong-c); --c-tr: var(--ch-ctl); }
.rule-cta { --bw: var(--rule-frame); --bc: var(--rule-cta-c); --c-tr: var(--ch-ctl); color: var(--emerald-ink); }
.rule-cta-dim { --bc: var(--rule-cta-dim-c); --c-tl: var(--ch-ctl); --c-br: var(--ch-ctl); }
.rule-coral { --bc: var(--rule-coral-c); --c-tl: var(--ch-ctl); --c-br: var(--ch-ctl); color: var(--coral-chip); }
.rule-tab { --bw: var(--rule-frame); --bc: var(--rule-strong-c); --c-tr: var(--ch-ctl); --c-bl: var(--ch-ctl); display: flex; padding: var(--bw); }
.rule-chip { --c-tl: var(--ch-ctl); --c-br: var(--ch-ctl); }
/* hover: the frame catches the light (a machined edge), no glow */
a.rule-panel:hover, a.rule-card:hover, .rule-button:hover, .rule-chip:hover { --bc: var(--rule-strong-c); }
.rule-button:hover { --bc: var(--text-nav); }
.rule-cta:hover { --bc: #7FD9B6; }
/* inside a frame, give the content room from the ring */
.rule-panel { padding: calc(30 * var(--u)); }

/* ================= RULES — .rule-notch (added by hydrate-rekey-cut; defined once, used by #/cut) =================
   .rule-notch = the CLI panel frame (BORDER_TABLE cut#32 / cut#42: hairline, rule-strong, chamfer 14): a panel whose
   lower-right corner is taken by a neighbouring framed panel (the exploded view, cut#36/#44/#47). The ring is drawn
   on the left, top, upper-right and lower-left edges only; the two notch edges are left OPEN because the neighbour
   panel draws them (adjacent boxes never both draw a shared edge). --nx / --ny = notch corner inside the box. */
.rule-notch {
  --bw: var(--rule-hair); --bc: var(--rule-strong-c); --fill: transparent; --c: var(--ch-panel);
  --nx: 50%; --ny: 50%;
  position: relative; isolation: isolate;
}
.rule-notch::before, .rule-notch::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rule-notch::before {
  z-index: -1; background: var(--bc);
  --ci: calc(var(--c) + var(--bw) * .414);
  clip-path: polygon(evenodd,
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% var(--ny), var(--nx) var(--ny), var(--nx) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0,
    var(--ci) var(--bw), calc(100% - var(--ci)) var(--bw), calc(100% - var(--bw)) var(--ci), calc(100% - var(--bw)) var(--ny),
    var(--nx) var(--ny), var(--nx) calc(100% - var(--bw)), var(--ci) calc(100% - var(--bw)), var(--bw) calc(100% - var(--ci)),
    var(--bw) var(--ci), var(--ci) var(--bw));
}
.rule-notch::after {
  z-index: -2; background: var(--fill);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% var(--ny), var(--nx) var(--ny), var(--nx) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* plate button — light plate fill, ink = paper, one chamfered corner (the "Inspect ->" key) */
.btn-plate {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: var(--plate); color: var(--paper); font-family: var(--font-body); font-weight: 500;
  padding: 0 calc(26 * var(--u)); min-height: calc(69 * var(--u)); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--ch-ctl)) 0, 100% var(--ch-ctl), 100% 100%, 0 100%);
  transition: transform var(--t-click) var(--ease-detent), background-color var(--t-click) var(--ease-detent);
}
.btn-plate:hover { background: #D5CFC3; }
.btn-plate:active, .rule-button:active, .rule-cta:active { transform: translateY(max(1px, calc(1.5 * var(--u)))); }
.btn-plate:disabled, .btn-plate[aria-disabled="true"] { opacity: .5; cursor: default; }
/* a plate/tab segment that is selected */
.is-plate { background: var(--plate); color: var(--paper); }
.is-emerald-fill { background: var(--emerald-fill); color: var(--paper); }

/* ================= MOTION (DESIGN.md §10 — "the locksmith's bench") =================
   data-pin        children drop into place one by one like key pins reaching the shear line (240 ms, 40 ms apart)
   data-cut        a rule / SVG stroke is milled left -> right (600 ms, the cutter pass)
   data-countup    a number indexes up in detent clicks (app.js)
   data-tick       live value: only changed digits index up one notch (RK_FX.tick)
   data-lamp       exposure lamp: data-state="exposed|clear"; RK_FX.pulse(el) on a new head block (400 ms)
   data-flip       the key card turns over (450 ms) when data-state changes to "cut"
   data-press      the receipt stamp presses once (180 ms) when .is-pressed is added
   video[data-loop]  muted looping art that plays only while visible
   Everything is transform/opacity only and switched off under prefers-reduced-motion. */
/* entrances never hide content at rest (full-page screenshots and no-JS readers see every line):
   the animation starts only when the element enters the view */
.rk-motion [data-pin].is-in > * { animation: rk-pin var(--t-pin) var(--ease-detent) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rk-pin { from { opacity: .6; transform: translateY(calc(-10 * var(--u))); } to { opacity: 1; transform: none; } }
.rk-motion [data-cut]:not(svg).is-in { transform-origin: 0 50%; animation: rk-mill var(--t-pass) var(--ease-mill) both; }
@keyframes rk-mill { from { transform: scaleX(0); } to { transform: none; } }
.rk-motion svg[data-cut].is-in :is(path, line, polyline, circle, rect) { stroke-dasharray: var(--len, 1200); animation: rk-stroke var(--t-pass) var(--ease-mill) both; }
@keyframes rk-stroke { from { stroke-dashoffset: var(--len, 1200); } to { stroke-dashoffset: 0; } }
.rk-digit { display: inline-block; }
.rk-digit.is-notch { animation: rk-notch var(--t-pin) var(--ease-detent) both; }
@keyframes rk-notch { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }
[data-lamp] { transition: opacity var(--t-click) linear; }
[data-lamp].is-pulse { animation: rk-pulse 400ms var(--ease-detent) both; }
@keyframes rk-pulse { 0% { opacity: 1; } 35% { opacity: .45; } 100% { opacity: 1; } }
[data-flip] { transform-style: preserve-3d; transition: transform var(--t-cut) var(--ease-detent); }
[data-flip][data-state="cut"].is-turning { animation: rk-turn var(--t-cut) var(--ease-detent) both; }
@keyframes rk-turn { 0% { transform: perspective(1200px) rotateY(0); } 50% { transform: perspective(1200px) rotateY(90deg); } 100% { transform: perspective(1200px) rotateY(0); } }
[data-press].is-pressed { animation: rk-press var(--t-click) var(--ease-detent) both; }
@keyframes rk-press { 0% { transform: none; } 45% { transform: translateY(calc(6 * var(--u))) scale(.995); } 100% { transform: none; } }
/* route change: the page comes in on a short fade (200 ms) while the cutter passes along the nav */
/* USER FIX R1: a route change never blanks the page — short (120 ms) and never from zero */
main.frame.is-entering { animation: rk-enter-route 120ms ease-out both; }
@keyframes rk-enter-route { from { opacity: .7; } to { opacity: 1; } }
@keyframes rk-enter { from { opacity: 0; } to { opacity: 1; } }
/* cross-fade for tab / toggle bodies (300 ms) — add .is-swap to the body that just changed */
.is-swap { animation: rk-enter 300ms ease-out both; }

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

/* ---------- mobile (< 1024) ---------- */
@media (max-width: 1023px) {
  :root {
    --u: .75px;
    --gutter-l: 16px; --gutter-r: 16px; --chrome-pad: 16px;
    --gap-section: 48px;
    --fs-hero: 38px; --fs-display: 42px; --fs-title: 32px; --fs-subtitle: 26px; --fs-section: 24px; --fs-num: 36px;
    --fs-data: 14px; --fs-label: 12px; --fs-body: 15px; --fs-lede: 16px; --fs-nav: 16px; --fs-foot: 13px;
    --fs-brand: 18px; --fs-foot-brand: 16px;
  }
  .site-nav { height: 64px; grid-template-columns: 1fr auto; gap: 12px; }
  .brand-mark { height: 38px; }
  .routes, .site-nav .actions { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-nav); }
  .nav-drawer:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; z-index: 19;
    padding: 12px 16px 20px; background: var(--chrome); font-size: 17px;
  }
  .nav-drawer a { color: var(--muted-nav); text-decoration: none; padding: 10px 0; }
  .nav-drawer a.is-active { color: var(--text-nav); }
  .drawer-tools { display: flex; gap: 24px; padding-top: 8px; }
  .site-foot { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }
  .site-foot .links { flex-wrap: wrap; gap: 16px; white-space: normal; }
  .rule-panel { padding: 20px; }
  /* wide ledgers: wrap them in .ledger-scroll */
  .ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}