/* ===== Tokens ===== */
:root {
  /* color strategy: full palette, drenched per-section — see s4s-site-prompt.md */
  --bg: #0a0a0f;
  --bg-deep: #050506;
  --fg: #f5f2ea;
  --muted: #8d8b96;
  --muted-dim: #55535e;

  --magenta: #ff2079;
  --magenta-dim: #7a1240;
  --cyan: #16e8e0;
  --cyan-dim: #0d6f6b;
  --orange: #ff8a1e;

  --haiti-blue: #00209f;
  --haiti-red: #d21034;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --container: min(72rem, 92vw);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

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

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--font-mono); }

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--cyan);
  color: var(--bg-deep);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-weight: 700;
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-2); }

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

/* ===== Typography scale ===== */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: block;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  max-width: 16ch;
}

.lede {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--fg);
  opacity: 0.86;
  max-width: 46ch;
  margin-top: var(--space-3);
  line-height: 1.6;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95em 1.7em;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.btn--primary {
  background: var(--magenta);
  color: #12040a;
  box-shadow: 0 0 0 1px rgba(255,32,121,0.4), 0 8px 30px -8px rgba(255,32,121,0.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--magenta), 0 14px 34px -8px rgba(255,32,121,0.7); }

.btn--ghost {
  border: 1px solid rgba(245,242,234,0.28);
  color: var(--fg);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

/* ===== Atmosphere: grain + scanline overlays, shared ===== */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ===== Scroll-reveal base state (progressively enhanced by JS) ===== */
.reveal {
  opacity: 1;
  transform: none;
}
.js-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
}
/* js/main.js adds .is-revealed the moment an element's entrance tween
   starts, and the tween itself clears its own inline transform once done
   (see that file's comment on why: so a later CSS transform, e.g. a hover
   scale, isn't permanently blocked by a leftover inline one). Without
   this rule, clearing the inline style let the plain ".js-motion .reveal"
   rule above (transform: translateY(28px)) win again on specificity,
   snapping every already-revealed element permanently back down by
   28px — harmless-looking in normal document flow, but it broke CSS
   grid layouts outright (e.g. css/chain.css's bento cards), since a
   transform offset doesn't move a grid item's actual track/cell, only
   its paint, so the shifted card spills out of its cell into whatever
   is next. This rule outranks the base one (0,3,0 vs 0,2,0) so the
   resting state stays put once revealed, with or without the inline
   style still present. */
.js-motion .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ===== Container ===== */
.container { width: var(--container); margin-inline: auto; }