/* ══════════════════════════════════════
   GLOBAL — Tungsten & Grain
   ══════════════════════════════════════ */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Grain & glow atmosphere ── */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }
.glow-field { position: absolute; width: 60vw; height: 55vh; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(12px); pointer-events: none; }

/* ── Layout ── */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-4); }
.section { padding-block: var(--sp-7); }
.prose { max-width: 65ch; }

/* ── Type ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.04; }
.display-hero { font-size: var(--fs-hero); font-weight: 900; }
.display-xl { font-size: var(--fs-3xl); font-weight: 900; }
.display-lg { font-size: var(--fs-2xl); }
.display-md { font-size: var(--fs-xl); }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--amber); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.mono-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.08em; }
.lede { font-size: var(--fs-lg); color: var(--ink-soft); line-height: 1.5; }
.text-soft { color: var(--ink-soft); }
.text-mute { color: var(--ink-mute); }
.accent { color: var(--amber); }

/* ── Metric callout ── */
.metric { display: flex; flex-direction: column; gap: var(--sp-1); }
.metric__number { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); line-height: 1; }
.metric__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.8rem 1.5rem; border-radius: var(--r-md); border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn--amber { background: var(--amber); color: #171207; }
.btn--amber:hover { background: var(--amber-bright); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }

/* ── One-sheet artwork treatment ── */
.sheet { border-radius: var(--r-md); box-shadow: var(--shadow-sheet); border: 1px solid var(--line); overflow: hidden; }
.sheet--tilt-l { transform: rotate(-3deg); }
.sheet--tilt-r { transform: rotate(2.5deg); }

/* ── Reveal (same contract as old animations.js) ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }