:root {
  --basalt: #0A0A0B; --stone-900: #111113; --stone-800: #1A1A1D; --stone-700: #2A2A2E; --stone-600: #3A3A3F; --stone-400: #8E8E94;
  --bone: #ECE7DD; --bone-400: #B9B4AA; --ink: #16140F; --ink-600: #5A554B;
  --filament: #F0B25A; --filament-ink: #7A5410; --filament-stroke: #C4761C; --ion: #9A7BFF;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --display-sans: 'Archivo Black', 'Hanken Grotesk', system-ui, sans-serif; /* brand voice: bold condensed uppercase, from mariotrujillo.com */
  --fs-display-xl: clamp(64px, 11.2vw + 20px, 172px);
  --fs-display: clamp(50px, 4.4vw + 33px, 96px);
  --fs-headline: clamp(40px, 3.05vw + 28px, 72px);
  --fs-lede: clamp(29px, 1.62vw + 23px, 46px);
  --fs-pull: clamp(64px, 8vw + 33px, 148px);
  --fs-title: clamp(22px, 1.15vw + 17.5px, 34px);
  --fs-numeral: clamp(64px, 3.8vw + 49px, 104px);
  --fs-body: clamp(17px, .1vw + 16.6px, 18px);
  --fs-caption: 14px; --fs-meta: clamp(11px, .1vw + 10.6px, 12px); --fs-label: clamp(10px, .1vw + 9.6px, 11px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:192px;--s12:256px;
  --margin: clamp(16px, 6.1vw - 8px, 80px);
  --gutter: clamp(12px, 1.15vw + 7.5px, 24px);
  --seam: 16px;
  --content-gap: 20px;
  --scene-gap: clamp(128px, 12.2vw + 80px, 256px);
  --max: 1520px;
  --r-glass: 2px; --r-device: 36px; --r-pill: 999px;
  --elev-pane: 0 40px 80px -24px rgba(0,0,0,.7);
  --elev-plate: 0 60px 120px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  --glass-fill: rgba(10,10,11,.42); --glass-edge: rgba(236,231,221,.12); --glass-blur: 28px;
  --glow-node: 0 0 0 6px rgba(240,178,90,.14), 0 0 24px 4px rgba(240,178,90,.45);
  --settle: cubic-bezier(.16,1,.3,1); --traverse: cubic-bezier(.65,0,.35,1);
  --d-instant:120ms; --d-hover:240ms; --d-reveal:480ms; --d-scene:800ms; --d-page:1200ms; --stagger:60ms;
}
@media (min-width: 900px) and (max-width: 1439px) { :root { --seam: calc(var(--margin) + 22vw); --content-gap: 60px; } }
@media (min-width: 1440px) { :root { --margin: calc(max(0px, (100vw - var(--max)) / 2) + 80px); --seam: calc(var(--margin) + 314px); --content-gap: 60px; } }