/* ============================================================
   Base — pure-black ground, type, a whisper-soft white spotlight,
   very fine grain, custom scrollbar, helpers.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-top: var(--menubar-h);
}

/* A single, very soft top glow — restrained, monochrome. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(60vw 40vw at 50% -10%, rgba(255,255,255,0.06), transparent 62%),
    radial-gradient(50vw 50vw at 50% 120%, rgba(255,255,255,0.03), transparent 60%);
}

/* Whisper-soft white spotlight following the cursor. */
.spotlight {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(320px 320px at var(--cx, 50%) var(--cy, 30%),
              rgba(255,255,255,0.05), transparent 70%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.spotlight.on { opacity: 1; }

/* Fine grain. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

::selection { background: var(--ink); color: #000; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #26262a; border-radius: 8px; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #35353b; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; }
h1 { font-weight: 700; }
h2 { font-size: var(--fs-h2); text-wrap: balance; }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-small);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.lead { font-size: var(--fs-lead); color: var(--ink-dim); max-width: 46ch; line-height: 1.5; }

/* "Bright" text — subtle white-to-grey sheen for emphasis words. */
.bright { background: linear-gradient(180deg, #fff, #c9c9ce); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--mono); }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }

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