/* Reset + global typography + layout primitives + motion system */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--moon); color: var(--on-moon); }

/* Subtle film grain over everything — keeps dark surfaces from feeling flat */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--moon); color: var(--on-moon); padding: 8px 14px; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

/* Type helpers */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: var(--lh-tight); }
.display em { font-style: italic; color: var(--moon); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-3);
}
.lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 36em; }
.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Reveal system: add [data-reveal] to anything; JS toggles .is-in. Stagger via --i. */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------- Ambient background (smoke with parallax + dust) — behind everything ---------- */
.ambient { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient__layer { position: absolute; inset: 0; will-change: transform; }
.ambient__smoke { position: absolute; border-radius: 50%; opacity: .55;
  background: radial-gradient(closest-side, rgba(var(--tone), .30), rgba(var(--tone), .12) 45%, transparent 100%);
  animation: smokeDrift 90s var(--ease-in-out) infinite alternate; }
@keyframes smokeDrift { 0% { transform: translate(0, 0) scale(1) rotate(0); } 100% { transform: translate(8vw, -6vh) scale(1.15) rotate(10deg); } }
.ambient__dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Reduced motion: same drift, much slower. */
@media (prefers-reduced-motion: reduce) { .ambient__smoke { animation-duration: 240s !important; } }