/* ==========================================================================
   Kairo — earthy system.
   Tokens are the spec in brand/earthy-concept-design-system.md, converted from
   the 1920px authoring stage to fluid clamp() values. Nothing from the archived
   navy/amber system survives here: no bronze, no Fraunces, no italic device.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-var.woff2') format('woff2');
  font-weight: 600 800;  /* subset to the range the site sets; see npm run fonts */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dmsans-var.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/dmmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/dmmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* Ground */
  --bg-dark: #232E26;
  --bg-dark-alt: #2E3D30;
  /* Paper */
  --bg-cream: #EDE6D0;
  --bg-cream-alt: #E4DAC4;
  /* Ink */
  --ink-cream: #F0E8D2;
  --ink-cream-2: rgba(240, 232, 210, .58);
  --ink-cream-3: rgba(240, 232, 210, .3);
  --ink-dark: #1E2820;
  --ink-dark-2: rgba(30, 40, 32, .74);  /* spec says .6; .6 measures 3.7:1 on cream and fails AA for body copy */
  --ink-dark-3: rgba(30, 40, 32, .55);  /* metadata only, never prose */
  /* Accent — one hue */
  /* One hue, three steps. The pinned spec fixes the swatch at #C07030 and says
     the accent is never a background. Both are deviated from here, on purpose:
     #C07030 measures 3.8:1 on the forest ground and 3.0:1 on cream, so it
     cannot carry 12-13px text on either, and a primary action with no filled
     state is not a primary action. The spec's own reference page fills its
     solid button and status chip with the accent, so the fill follows the
     components it ships rather than the sentence. The steps are tinted from
     the swatch, not picked beside it. */
  --accent-orange: #C07030;   /* the swatch: marks, rules, station squares, focus */
  --accent-lift: #D98A47;     /* small text and filled controls ON DARK. 5.1:1 on #232E26 */
  --accent-deep: #8A4A18;     /* small text ON CREAM. 5.5:1 on #EDE6D0 */
  --wood-glow: #7A4E24;

  /* Hairlines. 1px, low opacity, never coloured, never thicker. */
  --rule-on-dark: rgba(240, 232, 210, .14);
  --rule-on-dark-2: rgba(240, 232, 210, .07);
  --rule-on-cream: rgba(30, 40, 32, .16);
  --rule-on-cream-2: rgba(30, 40, 32, .08);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Scale. Authored at 1920, fluid here. */
  --size-label: 12.5px;
  --size-caption: clamp(14px, .35vw + 13px, 16px);
  --size-body: clamp(16px, .55vw + 14px, 20px);
  --size-lead: clamp(19px, 1.1vw + 15px, 29px);
  --size-h3: clamp(21px, 1.5vw + 15px, 44px);
  --size-h2: clamp(30px, 3.2vw + 16px, 68px);
  --size-h1: clamp(38px, 6.2vw + 10px, 116px);
  --size-stat: clamp(46px, 6vw + 16px, 104px);

  /* One spacing rhythm. */
  --gutter: clamp(20px, 4vw, 56px);
  --spine: clamp(30px, 6vw, 92px);
  --stack-1: 8px;
  --stack-2: 14px;
  --stack-3: 22px;
  --stack-4: 36px;
  --stack-5: 56px;
  --stack-6: clamp(64px, 8vw, 112px);
  --measure: 34em;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg-dark);
  /* Themed browser chrome: the parts we did not draw still carry the design. */
  scrollbar-color: rgba(240, 232, 210, .22) var(--bg-dark);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--ink-cream);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

::selection { background: var(--accent-orange); color: #1E2820; }
:where(.paper) ::selection { background: var(--accent-orange); color: #F0E8D2; }

:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}

img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; width: 14px; height: 14px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h2 { font-weight: 700; font-size: var(--size-h2); letter-spacing: -.022em; line-height: 1.05; }
h3 { font-weight: 700; font-size: var(--size-h3); letter-spacing: -.018em; line-height: 1.12; }
h1 { font-size: var(--size-h1); }
p { margin: 0; text-wrap: pretty; }

em { font-style: normal; color: var(--accent-lift); }
.paper em { color: var(--accent-deep); }

a { color: inherit; }

/* --------------------------------------------------------------- skip link -- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--accent-lift); color: #1E2820;
  padding: 14px 20px; text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- surfaces -- */
.surface {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--rule-on-dark-2);
}
.surface:first-of-type { border-top: 0; }

/* The atmospheric glow is part of every dark surface, not a flourish. */
.surface--dark::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 80%,
    rgba(122, 78, 36, .28) 0%, rgba(80, 50, 20, .14) 40%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.surface--dark.glow-tl::before { background: radial-gradient(ellipse at 18% 8%,
  rgba(122, 78, 36, .3) 0%, rgba(80, 50, 20, .13) 42%, transparent 70%); }
.surface--dark.glow-r::before { background: radial-gradient(ellipse at 96% 46%,
  rgba(122, 78, 36, .26) 0%, rgba(80, 50, 20, .12) 44%, transparent 72%); }

.surface--recessed { background: var(--bg-dark-alt); }

.paper {
  background: var(--bg-cream);
  color: var(--ink-dark);
  border-top-color: var(--rule-on-cream-2);
}
.paper .rule, .paper hr { border-color: var(--rule-on-cream); }

/* ------------------------------------------------------------------ shell -- */
.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pad { padding-block: var(--stack-6); }
.pad-sm { padding-block: clamp(44px, 5vw, 72px); }

/* ------------------------------------------------------- mono label / kicker */
.label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin: 0;
}
.paper .label { color: var(--accent-deep); }
.label--quiet { color: var(--ink-cream-3); }
.paper .label--quiet { color: var(--ink-dark-2); }

.lead {
  font-size: var(--size-lead);
  line-height: 1.42;
  color: var(--ink-cream-2);
  max-width: 24ch;
  max-width: 30em;
}
.paper .lead { color: var(--ink-dark-2); }
.body-2 { color: var(--ink-cream-2); max-width: var(--measure); }
.paper .body-2 { color: var(--ink-dark-2); }
.meta {
  font-family: var(--font-mono); font-size: var(--size-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-cream-3);
}
.paper .meta { color: var(--ink-dark-2); }

/* --------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 17px 28px; min-height: 52px;
  border: 1px solid var(--accent-lift);
  /* Filled, against the spec's "never a background". See the token block. The
     lift is what makes the #1E2820 label clear AA at 13px: 5.6:1, not 4.1:1. */
  background: transparent; color: var(--accent-lift);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .35s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--accent-lift); color: #1E2820; }
.btn:hover svg { transform: translateX(4px); }
.btn--solid { background: var(--accent-lift); color: #1E2820; }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--accent-lift); }
.paper .btn--solid:hover, .paper .btn--solid:focus-visible { color: var(--ink-dark); }

.link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-lift);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
}
.link svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(4px); }

.paper .link { color: var(--accent-deep); }
.paper .btn { border-color: var(--accent-deep); color: var(--accent-deep); }
.paper .btn--solid { background: var(--accent-deep); color: #F0E8D2; }
.paper .btn--solid:hover, .paper .btn--solid:focus-visible { background: transparent; color: var(--accent-deep); }

.acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ------------------------------------------------------------------- nav --- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(35, 46, 38, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-on-dark-2);
  padding-top: env(safe-area-inset-top);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink-cream);
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; letter-spacing: -.02em;
  min-height: 44px;
}
.brand img { width: 26px; height: 26px; }
.nav { display: none; gap: clamp(16px, 2vw, 30px); align-items: center; }
.nav a {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-cream-2);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink-cream); border-bottom-color: var(--accent-lift); }
.masthead .btn { padding: 12px 20px; min-height: 44px; display: none; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .masthead .btn { display: inline-flex; }
}

/* Phone: the primary action sits in thumb reach at the bottom, not in a
   header the visitor has to stretch for. */
.thumbbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  background: rgba(30, 40, 32, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule-on-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.thumbbar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-cream-2);
}
.thumbbar a + a { border-left: 1px solid var(--rule-on-dark); }
.thumbbar a.is-primary { background: var(--accent-lift); color: #1E2820; }
.thumbbar a svg { width: 14px; height: 14px; flex: none; }
.thumbbar a { white-space: nowrap; }
@media (min-width: 900px) { .thumbbar { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 899px) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------------ hero --- */
.hero { padding-block: clamp(44px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--stack-4); }
.hero .acts { margin-top: var(--stack-5); }
.hero__note {
  margin-top: var(--stack-3); font-size: var(--size-caption);
  color: var(--ink-cream-2); max-width: 46ch;
}

/* ============================ THE SPINE ==================================
   The job walk's through-line. One hairline runs the full height of the
   walk; each station is a mark on it. Gravity sets the reading order.
   ======================================================================== */
.walk { position: relative; }
.walk::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--gutter) + 5px);
  width: 1px; background: var(--rule-on-dark);
}
.paper.walk::before { background: var(--rule-on-cream); }
@media (min-width: 900px) {
  .walk::before { left: calc(50% - 620px + var(--gutter) + 5px); }
  .walk { --walk-indent: calc(var(--spine) + 22px); }
}

.station {
  position: relative;
  padding-block: clamp(40px, 5.5vw, 82px);
  padding-left: 34px;
  border-top: 1px solid var(--rule-on-dark-2);
}
.station:first-child { border-top: 0; }
.paper .station { border-top-color: var(--rule-on-cream-2); }
.station::before {
  content: "";
  position: absolute; left: 2px; top: clamp(46px, 5.8vw, 90px);
  width: 7px; height: 7px; background: var(--accent-orange);
}
@media (min-width: 900px) {
  .station { padding-left: var(--walk-indent, 114px); }
  .station::before { left: 2px; }
}

.station__code {
  font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lift);
}
.paper .station__code { color: var(--accent-deep); }
.station h2 { margin-top: var(--stack-2); max-width: 17ch; }
.station__lead { margin-top: var(--stack-3); }
.station__body { margin-top: var(--stack-3); }

/* The strict spec strip. Every station carries the identical label grid, so
   the walk reads as one system rather than as five prose sections. */
.spec {
  margin-top: var(--stack-4);
  border-top: 1px solid var(--rule-on-dark);
  display: grid; grid-template-columns: 1fr;
}
.paper .spec { border-top-color: var(--rule-on-cream); }
.spec > div {
  display: grid;
  grid-template-columns: minmax(96px, 132px) 1fr;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule-on-dark-2);
  align-items: baseline;
}
.paper .spec > div { border-bottom-color: var(--rule-on-cream-2); }
.spec dt, .spec .k {
  font-family: var(--font-mono); font-size: var(--size-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-cream-3);
  margin: 0;
}
.paper .spec dt, .paper .spec .k { color: var(--ink-dark-2); }
.spec dd, .spec .v {
  margin: 0; font-size: var(--size-caption); line-height: 1.55;
  color: var(--ink-cream);
}
.paper .spec dd, .paper .spec .v { color: var(--ink-dark); }

/* Em-dash bullet marks in mono orange. Never a dot, never a check. */
.marks { list-style: none; margin: var(--stack-3) 0 0; padding: 0; display: grid; gap: 13px; }
.marks li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: baseline; font-size: var(--size-caption); line-height: 1.55;
  color: var(--ink-cream-2);
}
.paper .marks li { color: var(--ink-dark-2); }
.marks li::before {
  content: "\2014"; font-family: var(--font-mono); color: var(--accent-orange);
}

/* ------------------------------------------------------------ scope sheet -- */
/* The dense passage. A takeoff, not a card grid. */
.sheet { border-top: 1px solid var(--rule-on-cream); margin-top: var(--stack-5); }
.sheet__group {
  display: grid; grid-template-columns: 1fr;
  gap: 4px 40px;
  padding-block: var(--stack-3);
  border-bottom: 1px solid var(--rule-on-cream-2);
}
.sheet__group > .label { padding-top: 4px; }
.sheet__rows { display: grid; gap: 2px; }
.sheet__row {
  display: grid; grid-template-columns: 1fr;
  gap: 2px 32px;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-on-cream-2);
}
.sheet__row:last-child { border-bottom: 0; }
.sheet__row b {
  font-family: var(--font-display); font-weight: 700; font-size: var(--size-caption);
  letter-spacing: -.01em; color: var(--ink-dark);
}
.sheet__row span { font-size: var(--size-caption); color: var(--ink-dark-2); line-height: 1.55; }
@media (min-width: 820px) {
  .sheet__group { grid-template-columns: 190px 1fr; }
  .sheet__row { grid-template-columns: 260px 1fr; align-items: baseline; }
}

.excl { list-style: none; margin: var(--stack-3) 0 0; padding: 0; display: grid; gap: 0; }
.excl li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding-block: 13px; border-bottom: 1px solid var(--rule-on-dark-2);
  font-size: var(--size-caption); color: var(--ink-cream-2); line-height: 1.55;
}
.paper .excl li { border-bottom-color: var(--rule-on-cream-2); color: var(--ink-dark-2); }
.excl li::before { content: "\2014"; font-family: var(--font-mono); color: var(--ink-cream-3); }
.paper .excl li::before { color: var(--ink-dark-2); }

/* ------------------------------------------------------------- the number -- */
.number { display: grid; gap: var(--stack-3); }
.number__old {
  font-family: var(--font-body); font-size: var(--size-lead);
  color: var(--ink-cream-3); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.paper .number__old { color: var(--ink-dark-2); }
.number__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--size-stat); letter-spacing: -.03em; line-height: .92;
  font-variant-numeric: tabular-nums;
}
.number__value em { color: var(--accent-orange); font-style: normal; }
.split-pay { display: grid; gap: 0; margin-top: var(--stack-4); border-top: 1px solid var(--rule-on-cream); }
.split-pay > div {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  padding-block: 18px; border-bottom: 1px solid var(--rule-on-cream-2);
  align-items: baseline;
}
.split-pay .k { font-family: var(--font-mono); font-size: var(--size-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dark-2); }
.split-pay .v { font-family: var(--font-display); font-weight: 700;
  font-size: var(--size-h3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.split-pay .n { grid-column: 1 / -1; font-size: var(--size-caption); color: var(--ink-dark-2); }

/* ------------------------------------------------------------------- faq --- */
.qa { border-top: 1px solid var(--rule-on-dark); margin-top: var(--stack-5); }
.paper .qa { border-top-color: var(--rule-on-cream); }
.qa__item { border-bottom: 1px solid var(--rule-on-dark-2); padding-block: var(--stack-3); }
.paper .qa__item { border-bottom-color: var(--rule-on-cream-2); }
/* The heavy rule above the question — the one weight change in the system,
   borrowed from a magazine program's grid discipline. */
.qa__item h3 {
  position: relative; padding-top: 20px; max-width: 26ch;
  font-size: clamp(19px, 1vw + 16px, 28px);
}
.qa__item h3::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px;
  background: var(--accent-orange);
}
.qa__item p { margin-top: var(--stack-2); color: var(--ink-cream-2); max-width: 62ch; }
.paper .qa__item p { color: var(--ink-dark-2); }

/* ------------------------------------------------------------- two column -- */
.cols { display: grid; gap: var(--stack-4); }
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); }
  .cols--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ---------------------------------------------------------- the estimator -- */
/* The one thing on the site that demonstrates instead of asserting. */
.demo {
  border: 1px solid var(--rule-on-dark);
  background: rgba(30, 40, 32, .55);
}
.paper .demo { border-color: var(--rule-on-cream); background: var(--bg-cream-alt); }
.demo__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-on-dark);
}
.paper .demo__bar { border-bottom-color: var(--rule-on-cream); }
.demo__bar i { width: 7px; height: 7px; background: var(--ink-cream-3); display: block; }
.paper .demo__bar i { background: var(--ink-dark-2); }
.demo__url {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-cream-3); margin-left: 8px; text-transform: lowercase;
}
.paper .demo__url { color: var(--ink-dark-2); }
.demo__body { padding: clamp(20px, 3vw, 34px); }

.field-row { display: grid; gap: 8px; margin-top: var(--stack-3); }
.field-row:first-of-type { margin-top: var(--stack-3); }
label.f {
  font-family: var(--font-mono); font-size: var(--size-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-cream-2);
}
.paper label.f { color: var(--ink-dark-2); }
input.f, select.f {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px so iOS does not zoom on focus */
  line-height: 1.4;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--ink-cream);
  background: rgba(240, 232, 210, .05);
  border: 1px solid var(--rule-on-dark);
  border-radius: 0;
  appearance: none;
  caret-color: var(--accent-orange);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.paper input.f, .paper select.f {
  color: var(--ink-dark); background: rgba(255, 255, 255, .45);
  border-color: var(--rule-on-cream);
}
input.f::placeholder { color: var(--ink-cream-2); }
.paper input.f::placeholder { color: var(--ink-dark-2); }
input.f:focus-visible, select.f:focus-visible { border-color: var(--accent-orange); outline-offset: 0; }
select.f {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-orange) 50%),
                    linear-gradient(135deg, var(--accent-orange) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.hint { font-size: 13.5px; color: var(--ink-cream-2); line-height: 1.55; }
.paper .hint { color: var(--ink-dark-2); }
.demo__out {
  margin-top: var(--stack-4); padding-top: var(--stack-3);
  border-top: 1px solid var(--rule-on-dark);
}
.paper .demo__out { border-top-color: var(--rule-on-cream); }
.demo__range {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.03em; line-height: 1;
  margin-top: var(--stack-2); font-variant-numeric: tabular-nums;
  color: var(--accent-lift);
}
.paper .demo__range { color: var(--accent-deep); }
.demo__toast {
  margin-top: var(--stack-3); padding: 13px 16px;
  border: 1px solid var(--rule-on-dark);
  font-size: 13.5px; color: var(--ink-cream-2);
  display: grid; grid-template-columns: 8px 1fr; gap: 12px; align-items: baseline;
}
.paper .demo__toast { border-color: var(--rule-on-cream); color: var(--ink-dark-2); }
.demo__toast::before { content: ""; width: 7px; height: 7px; background: var(--accent-orange); }
.err { color: var(--accent-lift); font-size: 13.5px; margin-top: 10px; }
.paper .err { color: var(--accent-deep); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ prose -- */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: clamp(22px, 1.6vw + 16px, 34px); margin-top: var(--stack-5); }
.prose h3 { font-size: clamp(18px, 1vw + 15px, 24px); margin-top: var(--stack-4); }
.prose p, .prose li { font-size: var(--size-caption); line-height: 1.7; color: var(--ink-dark-2); }
.prose p { margin-top: var(--stack-2); }
.prose ul, .prose ol { margin: var(--stack-2) 0 0; padding-left: 22px; }
.prose li { margin-top: 7px; }
.prose strong { color: var(--ink-dark); font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--rule-on-cream); margin: var(--stack-5) 0; }
.prose table { width: 100%; border-collapse: collapse; margin-top: var(--stack-3); font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule-on-cream-2); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dark-2); font-weight: 400; }

/* ----------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--rule-on-dark); padding-block: var(--stack-5) var(--stack-4); }
.foot__grid { display: grid; gap: var(--stack-4); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot a { color: var(--ink-cream-2); text-decoration: none; font-size: var(--size-caption); }
.foot a:hover { color: var(--ink-cream); }
.foot ul { list-style: none; margin: var(--stack-2) 0 0; padding: 0; display: grid; gap: 4px; }
.foot li a { display: inline-flex; min-height: 40px; align-items: center; }
.foot__legal {
  margin-top: var(--stack-5); padding-top: var(--stack-3);
  border-top: 1px solid var(--rule-on-dark-2);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-cream-2);
}

/* ------------------------------------------------------------------ motion -- */
/* One authored moment, and it belongs to the first viewport: the kicker, the
   headline, the lead and the action arrive in sequence, and the walk's spine
   draws down through the page behind them. Content is visible by default at
   every other point on the page, because a section that needs JavaScript to be
   readable is a section that sometimes is not. */
.rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero .label,
  .hero h1,
  .hero .lead,
  .hero .acts,
  .hero .hero__note {
    animation: enter .85s var(--ease) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .lead { animation-delay: .13s; }
  .hero .acts { animation-delay: .2s; }
  .hero .hero__note { animation-delay: .27s; }

  .walk::before {
    transform-origin: top;
    animation: draw 1.6s var(--ease) both .1s;
  }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}


/* Section headings hold their own measure; the inline max-widths were forcing
   four-line headlines at desktop. */
.surface h2 { max-width: 20ch; }
.station h2 { max-width: 15ch; }
@media (min-width: 900px) { .surface h2 { max-width: 24ch; } }