/* ───── design tokens ───── */
:root {
  --bg: oklch(0.13 0.02 290);
  --bg-2: oklch(0.16 0.03 290);
  --ink: oklch(0.94 0.01 280);
  --ink-dim: oklch(0.70 0.02 285);
  --ink-faint: oklch(0.45 0.03 285);
  --rule: oklch(0.30 0.04 290);
  --accent: oklch(0.62 0.22 300);
  --accent-soft: oklch(0.55 0.18 300);
  --accent-glow: oklch(0.70 0.24 300);
  --danger: oklch(0.65 0.22 25);
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
}

/* ───── reset ───── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }

/* ───── grain + scanline overlay ───── */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    );
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 101;
  background:
    radial-gradient(ellipse at 50% 0%, oklch(0.30 0.10 300 / 0.25), transparent 60%),
    radial-gradient(ellipse at 50% 100%, oklch(0.25 0.08 300 / 0.20), transparent 60%);
}

/* ───── shared utilities ───── */
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; }
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.accent { color: var(--accent-glow); }
.strike { text-decoration: line-through; text-decoration-color: var(--ink-faint); }

/* ───── section base ───── */
section {
  position: relative;
  padding: 120px 64px;
  border-top: 1px solid var(--rule);
}
section:first-of-type { border-top: none; }