/* tastemaker · macrostructure: Product Demo / Workbench · mood: premium (night highway, user-specified) · page: sales
 * arc: hook(H2 live billboard) -> problem(dead email, paper) -> solution(one sign, four surfaces) -> how(F4 mile markers) -> inside(F2 bento of live output) -> proof(live counters + founder letter) -> offer(gold) -> guarantee -> faq -> close(C2 exit sign) + C4 sticky bar
 * nav: N3 · hero: H2 · footer: Ft4 · knobs: hero=live-billboard/title-over-stage/xxl; features=bento/irregular
 * palette: user-specified aurora + reference photos (night/paper/gold) · contrast: pass (matrix, 2026-09-21)
 * critique: ShowTell 5 · Phil 5 · Hier 4 · Spec 5 · Restr 4 · Var 4 */

:root {
  /* night */
  --night: #0a0613;
  --asphalt: #15101f;
  --haze-violet: #3a2440;
  --haze-warm: #5a3a3e;
  --ink-night: #f4eeff;
  --muted-night: #c9bee8;
  --dim-night: #9a8db5;
  --hairline: #3a2d52;
  --sign-navy: #1a1440;
  /* paper */
  --paper: #f3eee3;
  --paper-card: #fffdf8;
  --ink: #15101c;
  --muted-ink: #5b5368;
  --amber-text: #a4580a;
  /* the one accent, plus tail-lights */
  --gold: #f5b829;
  --gold-ink: #170e30;
  --tail: #f0398b;
  --violet-haze: #a855f7;

  --display: 'Syne', 'Arial Black', Arial, sans-serif;
  --body: 'Hanken Grotesk', Arial, Helvetica, sans-serif;
  --sign: 'Overpass', 'Arial Narrow', Arial, sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --pad-connective: clamp(3rem, 6vw, 4rem);
  --pad-standard: clamp(4.5rem, 9vw, 7rem);
  --pad-pivotal: clamp(5.5rem, 12vw, 10rem);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink-night);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 12px 16px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.nb { white-space: nowrap; }
.when-narrow { display: none; }
@media (max-width: 520px) { .when-wide { display: none; } .when-narrow { display: inline; } }

/* ── Canvases ─────────────────────────────────────────────────────────────── */
section { position: relative; padding-block: var(--pad-standard); }
.night { background: var(--night); color: var(--ink-night); }
.dusk { background: linear-gradient(180deg, var(--night) 0%, #170d24 55%, #24142f 100%); color: var(--ink-night); }
.paper { background: var(--paper); color: var(--ink); }
.gold { background: var(--gold); color: var(--gold-ink); }

/* ── Type ─────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; text-wrap: balance; }
h1, h2 { text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

.lede { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); color: var(--muted-night); max-width: 40em; }
.paper .lede, .paper p { color: var(--muted-ink); }
.paper h2, .paper h3, .paper strong, .paper b { color: var(--ink); }
.gold .lede { color: var(--gold-ink); }
.fine { font-size: 0.875rem; color: var(--dim-night); margin: 0; }
.fine-ink { color: #3b2f12; }

/* the lit word: gold on night */
.lit { color: var(--gold); }
/* the marker swipe: gold behind ink, for paper only (gold text fails contrast there) */
.swipe {
  background: linear-gradient(transparent 12%, var(--gold) 12%, var(--gold) 88%, transparent 88%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.12em; margin: 0 -0.06em;
}

.section-head { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin: 1rem 0 1.25rem; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .lede { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.6em;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--display); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.01em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out);
}
.btn-gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 0 rgba(245, 184, 41, 0), 0 10px 34px -12px rgba(245, 184, 41, 0.7); }
.btn-ghost { border-color: rgba(244, 238, 255, 0.34); color: var(--ink-night); background: rgba(10, 6, 19, 0.35); }
.btn-small { min-height: 44px; font-size: 0.8125rem; padding: 0 1.25em; }
.btn-big { min-height: 64px; font-size: 1.0625rem; padding: 0 2.2em; }
.btn:focus-visible, .switch:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gold .btn:focus-visible, .paper a:focus-visible, .paper summary:focus-visible { outline-color: var(--ink); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[aria-disabled="true"] { background: rgba(23, 14, 48, 0.12); color: var(--gold-ink); box-shadow: none; cursor: default; border-color: rgba(23, 14, 48, 0.4); }
.night .btn[aria-disabled="true"], .cta-bar .btn[aria-disabled="true"] { background: transparent; color: var(--muted-night); border-color: var(--hairline); }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(245, 184, 41, 0.16), 0 16px 40px -12px rgba(245, 184, 41, 0.8); }
  .btn-ghost:hover { background: rgba(244, 238, 255, 0.1); }
  .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
}

/* ── Reveal baseline (GSAP takes over when it loads; without it everything is simply visible) */
.js-motion [data-reveal] { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}