/* HEADROOM — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 + §10 MOTION. Design width 1920.
   Every size is N * var(--u) where N = CSS px at 1920 (mockup px × 1.1483). --u is set in index.html
   (viewport / 1920 from 1024 up, 0.75px below). Text never below 12px. No max-width cap anywhere.
   BORDERS (LUAT 56): this file is the ONLY place that draws borders/outlines. Route bodies use the .rule-* classes. */

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

  /* colour tokens (DESIGN §3) */
  --paper: #211601;          /* page ground, every route */
  --chrome: #3A2806;         /* nav + footer bands only */
  --code: #110F0F;
  --ink: #F3F0EC;
  --body: #B9BED1;
  --label: #A1A1AC;
  --nav: #CDBD96;            /* chrome file idle nav ink */
  --nav-hover: #FFF3D5;
  --nav-active: #19D8F4;
  --chrome-ink: #F3E7C8;
  --chrome-meta: #CBB88F;
  --chrome-gold: #E9A81B;
  --chrome-plate: #FFE7AE;
  --amber: #E2B443;
  --tick: #9D7223;
  --action: #FBA143;
  --on-action: #1B1000;
  --cyan: #31D8E8;
  --cyan-fill: #35D4FB;
  --magenta: #F933FF;
  --lamp-green: #00F84B;
  --lamp-amber: #FED902;
  --lamp-red: #FC1916;
  --grad-mark: linear-gradient(180deg, #E24AF9 0%, #4CD5F8 100%);   /* gauge body only, never text */

  /* rule tokens (DESIGN §4b) — width + colour per rule kind; hairlines never below 1px */
  --rule-w1: max(1px, calc(1 * var(--u)));
  --rule-w2: max(1px, calc(2 * var(--u)));
  --rule-w3: max(2px, calc(3 * var(--u)));
  --rule-chrome: #6B4E18;
  --rule-soft: #453414;
  --rule-readout: #49340F;
  --rule: #684B00;
  --rule-dim: #503501;
  --rule-strong: #9C7401;
  --rule-gold: #C2AE4D;
  --rule-gold-hi: #E2C047;
  --rule-select: #02E8FF;
  --rule-input: #7E7A74;
  --rule-input-amount: #B5965D;
  --rule-tag: #8E7338;
  --rule-channel: #4A3C1F;
  --rule-code: #3D3E3A;
  --rule-buy: #E9A81B;       /* chrome file wins over table #A37513 */
  --rule-plate: #E9A81B;     /* footer boundary plate left rule (chrome) */

  /* fonts (DESIGN §2) */
  --font-display: 'Teko', 'Heebo', sans-serif;
  --font-body: 'Heebo', system-ui, sans-serif;
  --font-mono: 'Intel One Mono', ui-monospace, monospace;

  /* type scale @1920 (USER FIX TYPE: real desktop sizes; layout keeps mockup geometry) */
  --fs-hero: calc(72 * var(--u));
  --fs-route: calc(48 * var(--u));
  --fs-section: calc(40 * var(--u));
  --fs-panel: max(18px, calc(28 * var(--u)));
  --fs-sub: max(14px, calc(18 * var(--u)));
  --fs-body: max(13px, calc(16 * var(--u)));
  --fs-ui: max(13px, calc(16 * var(--u)));
  --fs-cta: max(16px, calc(24 * var(--u)));
  --fs-value: max(14px, calc(20 * var(--u)));
  --fs-label: max(12px, calc(13 * var(--u)));
  --fs-meta: max(12px, calc(12 * var(--u)));
  --fs-nav: max(12px, calc(14 * var(--u)));
  --fs-num: max(24px, calc(44 * var(--u)));
  --fs-num-mini: max(20px, calc(34 * var(--u)));
  --fs-big: max(24px, calc(44 * var(--u)));

  /* page frame (LUAT 53 · USER FIX U1): gutters 65 / 67 @1920, container 1788 */
  --gutter-l: calc(65 * var(--u));
  --gutter-r: calc(67 * var(--u));
  --nav-h: calc(80 * var(--u));
  --section-gap: calc(80 * var(--u));      /* WEB_RULES #22: 48–96 */

  /* motion family (DESIGN §10) */
  --ease-hr: cubic-bezier(.2, 0, 0, 1);    /* "the load settles under the bar" */
  --t-scrub: 120ms;
  --t-short: 200ms;
  --t-mid: 300ms;
  --t-long: 600ms;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--paper); color: var(--body);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.42; letter-spacing: -0.01em;
  overflow-x: hidden;
}
/* restrained uniform grain over paper (≤3 %), fixed so it never scales or moves layout */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; padding: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--label); opacity: 1; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--rule-select); outline-offset: max(2px, calc(2 * var(--u))); }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; }
.mono, code, pre { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums slashed-zero; }
[hidden] { display: none !important; }
::selection { background: var(--cyan); color: var(--on-action); }

/* ───────── ONE PAGE FRAME (LUAT 53) — the only container; routes never set width, side padding or ground ───────── */
main.page {
  flex: 1; width: 100%;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
  background: transparent;
  display: flex; flex-direction: column;
}
main.page > * { width: 100%; }
main.page.is-leaving { opacity: .55; transition: opacity var(--t-short) linear; }
.page-section + .page-section { margin-top: var(--section-gap); }
.page-end { height: calc(64 * var(--u)); }

/* ───────── type roles (routes use these, never their own sizes for the same role) ───────── */
.t-kicker { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.t-hero { font: 500 var(--fs-hero)/.92 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.t-route { font: 600 var(--fs-route)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.t-section { font: 600 var(--fs-section)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.t-panel { font: 600 var(--fs-panel)/1 var(--font-display); letter-spacing: .025em; text-transform: uppercase; color: var(--ink); }
.t-panel .step, .t-step { color: var(--amber); }
.t-sub { font: 400 var(--fs-sub)/1.42 var(--font-body); color: var(--body); }
.t-body { font: 400 var(--fs-body)/1.5 var(--font-body); color: var(--body); }
.t-ui { font: 600 var(--fs-ui)/1.15 var(--font-body); letter-spacing: .04em; }
.t-cta { font: 600 var(--fs-cta)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.t-value { font: 500 var(--fs-value)/1.15 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum" 1, "zero" 1; }
.t-label { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.t-meta { font: 500 var(--fs-meta)/1.35 var(--font-mono); color: var(--label); }
.t-num { font: 600 var(--fs-num)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-num-mini { font: 600 var(--fs-num-mini)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-big { font: 600 var(--fs-big)/1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); font-feature-settings: "tnum" 1, "zero" 1; }
.c-ink { color: var(--ink); } .c-body { color: var(--body); } .c-label { color: var(--label); } .c-amber { color: var(--amber); }
.c-cyan { color: var(--cyan); } .c-magenta { color: var(--magenta); }

/* ───────── controls ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-height: calc(56 * var(--u)); padding: 0 calc(28 * var(--u)); text-decoration: none; transition: background-color var(--t-short) linear, opacity var(--t-short) linear; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: #FFB765; }
.btn-cyan { background: var(--cyan-fill); color: var(--on-action); }
.btn-cyan:hover { background: #6BE3FF; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn .arrow { display: inline-block; transition: transform var(--t-short) var(--ease-hr); }
.btn:hover .arrow { transform: translateX(calc(4 * var(--u))); }
.lamp { display: inline-block; width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 12px; min-height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, var(--lamp-c, var(--lamp-green)) 30% 100%); box-shadow: 0 0 calc(12 * var(--u)) var(--lamp-c, var(--lamp-green)); }
.lamp[data-state="CLEAR"], .lamp[data-state="clear"] { --lamp-c: var(--lamp-green); }
.lamp[data-state="AMBER"], .lamp[data-state="amber"] { --lamp-c: var(--lamp-amber); }
.lamp[data-state="RED"], .lamp[data-state="red"] { --lamp-c: var(--lamp-red); }

/* ───────── BORDER CLASSES (DESIGN §4b · BORDER_TABLE.md) — one class per framed component ─────────
   Widths from the table only: 1 = --rule-w1, 2 = --rule-w2, 3 = --rule-w3. Radius 0 unless the table says so. */
.rule-nav { border-bottom: var(--rule-w1) solid var(--rule-chrome); }
.rule-footer { border-top: var(--rule-w1) solid var(--rule-chrome); }
.rule-plate { border-left: max(2px, calc(3 * var(--u))) solid var(--rule-plate); }
.rule-buy { border: var(--rule-w1) solid var(--rule-buy); }
.rule-menu { border: var(--rule-w1) solid var(--rule-chrome); }
.rule-drawer { border-top: var(--rule-w1) solid var(--rule-chrome); }
/* home */
.rule-input-address { border: var(--rule-w2) solid var(--rule-soft); }       /* one frame round the whole address control */
.rule-box { border: var(--rule-w2) solid var(--rule-soft); }
.rule-box-dim { border: var(--rule-w2) solid var(--rule-dim); }
.rule-box-dim-thin { border: var(--rule-w1) solid var(--rule-dim); }
.rule-readout { border: var(--rule-w1) solid var(--rule-readout); }
.rule-row-soft { border-bottom: var(--rule-w2) solid var(--rule-soft); }
.rule-rail { border: var(--rule-w2) solid var(--rule-strong); }
.rule-panel-dim { border: var(--rule-w3) solid var(--rule-dim); }
/* position */
.rule-panel { border: var(--rule-w2) solid var(--rule); }
.rule-split { border-left: var(--rule-w1) solid var(--rule); }                /* inner vertical divider inside .rule-panel */
.rule-tag { border: var(--rule-w2) solid var(--rule-tag); }
.rule-input-amount { border: var(--rule-w2) solid var(--rule-input-amount); }
.rule-tabs { border-bottom: var(--rule-w2) solid var(--rule-soft); }
.rule-tabs > .is-active, .rule-tabs > [aria-selected="true"] { box-shadow: inset 0 calc(-1 * var(--rule-w3)) 0 var(--rule-select); }
.rule-step { border: var(--rule-w2) solid var(--rule-strong); }
.rule-panel-strong { border: var(--rule-w2) solid var(--rule-strong); }
.rule-row { border-bottom: var(--rule-w1) solid var(--rule-soft); }
/* drill */
.rule-underline-select { border-bottom: var(--rule-w3) solid var(--rule-select); }
.rule-card { border: var(--rule-w2) solid var(--rule-dim); }
.rule-table { border: var(--rule-w3) solid var(--rule-strong); }
.rule-table th { border-bottom: var(--rule-w2) solid var(--rule-strong); }
.rule-table td { border-bottom: var(--rule-w1) solid var(--rule-soft); }
.rule-table th + th, .rule-table td + td { border-left: var(--rule-w1) solid var(--rule-soft); }
.rule-table tr:last-child td { border-bottom: 0; }
/* shared edge: the selected row's outline IS the edge under the head / above the next row — never stack the head rule or the
   previous row's rule on top of it */
.rule-table:has(tbody > tr:first-child.rule-select-row) th { border-bottom-color: transparent; }
.rule-table tr:has(+ tr.rule-select-row) td { border-bottom-color: transparent; }
.rule-table tr.rule-select-row td { border-bottom-color: transparent; }
.rule-table:has(tbody > tr:last-child.rule-select-row) { border-bottom-color: transparent; }   /* selected last row draws the bottom edge itself */
.rule-select-col + .rule-divider { border-left-color: transparent; }   /* selected column outline already draws the shared edge */
.rule-select-row { outline: var(--rule-w3) solid var(--rule-select); outline-offset: calc(-1 * var(--rule-w3)); border-radius: 2px; }
/* ceilings */
.rule-select-col { outline: var(--rule-w2) solid var(--rule-select); outline-offset: calc(-1 * var(--rule-w2)); }
.rule-divider { border-left: var(--rule-w1) solid var(--rule); }
.rule-divider-gold { border-left: var(--rule-w1) solid var(--rule-gold); }   /* vertical rule between the two cells of each #/ceilings oracle / pool card (mockup: 1 px gold) */
.rule-card-gold { border: var(--rule-w2) solid var(--rule-gold); }
.rule-row-gold { border-bottom: var(--rule-w1) solid var(--rule-gold); }
.rule-panel-gold { border: var(--rule-w2) solid var(--rule-gold-hi); }
/* siren */
.rule-channel { border: var(--rule-w3) solid var(--rule-channel); }
.rule-input { border: var(--rule-w2) solid var(--rule-input); }
.rule-code { border: var(--rule-w1) solid var(--rule-code); }
/* instrument frame (gauge well / chart axes when drawn in HTML rather than SVG) */
.rule-well { border: var(--rule-w1) solid var(--tick); }

/* shared-edge rule: inside a .rule-joined row of framed boxes, only the first box draws its left edge
   (adjacent boxes never both draw the shared line — DESIGN §4b "how panel", "fix panel") */
.rule-joined { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (min-width: 1024px) { .rule-joined > * + * { border-left-width: 0; } }
.rule-stacked > * + * { border-top-width: 0; }
/* a frame around an input wraps the whole control: the wrapper draws the frame, the control inside draws none */
.rule-input, .rule-input-amount, .rule-input-address { display: flex; align-items: stretch; }
.rule-input > input, .rule-input > select, .rule-input > textarea,
.rule-input-amount > input, .rule-input-address > input { flex: 1; min-width: 0; padding: 0 calc(16 * var(--u)); min-height: calc(56 * var(--u)); outline: 0; }
.rule-input:focus-within, .rule-input-amount:focus-within, .rule-input-address:focus-within { border-color: var(--rule-select); }

/* ───────── NAV (chrome/nav.html verbatim, sizes × --u) ───────── */
.hr-nav {
  position: sticky; top: 0; z-index: 50;
  width: 100%; height: var(--nav-h); display: grid; grid-template-columns: calc(410 * var(--u)) 1fr calc(410 * var(--u));   /* links stay page-centred like the mockup after CA/BUY left the nav */
  align-items: center; gap: calc(28 * var(--u)); padding: 0 calc(64 * var(--u));
  background: var(--chrome); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .24);
}
.hr-nav .brand, .hr-footer .brand { display: flex; align-items: center; gap: calc(14 * var(--u)); color: var(--chrome-ink); text-decoration: none; }
/* LOGO LOCKUP (USER REVIEW R1 28/09): the mark IS the H, "EADROOM" follows in Teko 600.
   --lk-h = mark image height. Solid letter = 0.845 of it (bottom pad 0.083), Teko cap height = 0.636 em
   ⇒ font-size = 0.845 / 0.636 × --lk-h so cap height = H height; the image sits on the text baseline. */
.lockup { --lk-h: max(41px, calc(48 * var(--u))); display: inline-block; white-space: nowrap; color: var(--chrome-ink);
  font: 600 calc(var(--lk-h) * 1.3286)/1 var(--font-display); letter-spacing: .012em; text-transform: uppercase; }
.lockup-h { display: inline-block; vertical-align: baseline; height: var(--lk-h); width: calc(var(--lk-h) * 0.877);
  margin: 0 calc(var(--lk-h) * -0.012) calc(var(--lk-h) * -0.083) 0; object-fit: contain; }
.hr-nav .routes { display: flex; align-items: center; justify-content: center; gap: calc(44 * var(--u)); height: 100%; }
.hr-nav .routes a, .hr-nav .social, .hr-footer .social {
  position: relative; color: var(--nav); text-decoration: none; text-transform: uppercase;
  font: 600 var(--fs-nav)/1 var(--font-body); letter-spacing: .11em; white-space: nowrap; transition: color var(--t-short) linear;
}
.hr-nav .routes a { display: inline-block; padding: calc(8 * var(--u)) 0 calc(7 * var(--u)); }   /* chrome: underline sits under the word, not at the band edge */
.hr-nav .routes a:hover, .hr-nav .social:hover, .hr-footer .social:hover { color: var(--nav-hover); }
/* active = cyan + 3px underline (chrome) */
.hr-nav .routes a.is-active { color: var(--nav-active); box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--nav-active); }
/* hover strike: a sodium tick draws under the link (transform only) */
.hr-nav .routes a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(1px, calc(2 * var(--u))); background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-hr); }
.hr-nav .routes a:hover:not(.is-active)::after { transform: scaleX(1); }
.hr-nav .actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(22 * var(--u)); }
[data-launch-link][aria-disabled="true"] { cursor: default; }
.nav-menu, .nav-drawer { display: none; }
/* route change: the height bar under the nav lights once, left → right */
.hr-bar-sweep { position: absolute; left: 0; right: 0; bottom: calc(-1 * max(1px, calc(1 * var(--u)))); height: max(1px, calc(2 * var(--u))); background: var(--amber); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }

/* ───────── FOOTER (chrome/footer.html layout, SITE_SPEC §1 strings, sizes × --u) ───────── */
.hr-footer {
  width: 100%; min-height: calc(178 * var(--u)); display: grid; grid-template-columns: calc(320 * var(--u)) 1fr calc(640 * var(--u));
  gap: calc(34 * var(--u)); align-items: center; padding: calc(24 * var(--u)) calc(64 * var(--u)) calc(26 * var(--u));
  background: var(--chrome); color: var(--chrome-ink); margin-top: var(--section-gap);
}
.hr-footer .lockup { --lk-h: max(36px, calc(42 * var(--u))); }
.hr-footer .middle { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.hr-footer .boundary { padding: calc(10 * var(--u)) calc(20 * var(--u)); color: var(--chrome-plate); font: 500 max(16px, calc(22 * var(--u)))/1.25 var(--font-display); letter-spacing: .025em; text-transform: uppercase; }
.hr-footer .links { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); padding-left: calc(23 * var(--u)); color: var(--chrome-meta); font: 500 var(--fs-meta)/1.6 var(--font-mono); }
.hr-footer .links .social { font-size: var(--fs-meta); }
.hr-footer .dot { color: var(--chrome-gold); }
.hr-footer .ca-copy { color: var(--chrome-gold); font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hr-footer .ca-copy:hover { color: var(--nav-hover); }
.hr-footer .meta { text-align: right; color: var(--chrome-meta); font: 500 var(--fs-meta)/1.6 var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.hr-footer .meta b { color: var(--chrome-gold); font-weight: 600; }
.hr-footer .meta .plate { color: var(--chrome-plate); font: 600 max(14px, calc(18 * var(--u)))/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.hr-footer .meta .plate [data-cell] { letter-spacing: .04em; }

/* ───────── motion (DESIGN §10) — transform / opacity only, never moves layout ───────── */
[data-ruler] .tick, [data-ruler] > i { transform-origin: left center; }
[data-rise] { transform-origin: bottom center; }
[data-grow] { transform-origin: left center; }
.hr-sweep { position: absolute; left: 0; right: 0; top: 0; height: max(1px, calc(2 * var(--u))); background: var(--amber); opacity: 0; pointer-events: none; z-index: 2; }
.hr-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(28 * var(--u)); background: linear-gradient(0deg, rgba(226, 180, 67, .07), rgba(226, 180, 67, 0)); }
.is-sweeping { position: relative; }
[data-cell].is-ticking { position: relative; }
[data-cell].is-ticking::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-2 * var(--u)); height: max(1px, calc(1 * var(--u))); background: currentColor; transform-origin: left; animation: hr-tick var(--t-mid) var(--ease-hr) both; }
@keyframes hr-tick { from { transform: scaleX(0); opacity: .9; } to { transform: scaleX(1); opacity: 0; } }
video[data-art-video] { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; }
  .hr-sweep, .hr-bar-sweep { display: none; }
}

/* ───────── 1024–1279: same design, columns may drop to 2 (route bodies decide) ───────── */
/* ───────── below 1024: mobile layout (--u = 0.75px, 16px gutters, nav drawer) ───────── */
@media (max-width: 1023px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --nav-h: 60px; --section-gap: 48px; --fs-hero: 40px; --fs-route: 34px; --fs-section: 28px; }
  .hr-nav { grid-template-columns: 1fr auto; padding: 0 16px; gap: 12px; }
  .hr-nav .lockup { --lk-h: 38px; }
  .hr-nav .routes.nav-desktop, .hr-nav .actions { display: none; }
  .nav-menu { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; color: var(--chrome-ink); font: 600 13px/1 var(--font-body); letter-spacing: .11em; text-transform: uppercase; }
  .nav-menu-bars { position: relative; width: 16px; height: 10px; background: linear-gradient(var(--chrome-ink), var(--chrome-ink)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--chrome-ink), var(--chrome-ink)) 0 100% / 100% 2px no-repeat; }
  .nav-drawer:not([hidden]) { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 20px; background: var(--chrome); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
  .nav-drawer > a { display: flex; align-items: center; min-height: 48px; color: var(--nav); text-decoration: none; text-transform: uppercase; font: 600 15px/1 var(--font-body); letter-spacing: .11em; }
  .nav-drawer > a.is-active { color: var(--nav-active); }
  .nav-drawer .drawer-actions { display: flex; gap: 24px; padding-top: 12px; }
  .nav-drawer .drawer-actions .social { color: var(--nav); text-decoration: none; text-transform: uppercase; font: 600 14px/1 var(--font-body); letter-spacing: .11em; min-height: 44px; display: inline-flex; align-items: center; }
  .hr-footer { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px 28px; }
  .hr-footer .links { padding-left: 0; }
  .hr-footer .meta { text-align: left; }
  .hr-footer .boundary { font-size: 18px; }
  .rule-joined { grid-auto-flow: row; }
  .rule-joined > * + * { border-top-width: 0; }
  /* stacked columns: a side divider has nothing beside it any more */
  .rule-split { border-left-width: 0; border-top: var(--rule-w1) solid var(--rule); }
  .rule-divider[data-mobile-norule], .rule-divider-gold[data-mobile-norule] { border-left-width: 0; }
}