*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink-void);
  color: var(--ink-bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(1400px 700px at 85% -10%, rgba(155, 140, 255, 0.08), transparent 60%),
    radial-gradient(1000px 500px at 10% 120%, rgba(245, 166, 35, 0.05), transparent 60%),
    linear-gradient(180deg, var(--ink-void) 0%, #070810 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8), rgba(0,0,0,0.0) 75%);
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  z-index: 0;
  mix-blend-mode: overlay;
}

main, header, footer, section { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; transition: color 220ms var(--ease-out-soft); }
a:hover { color: var(--ink-cream); }

img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--aurora-amber); color: var(--ink-void); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-cream);
}
h1 { font-size: clamp(2.75rem, 7vw, 6.5rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
h4 { font-size: clamp(1.125rem, 1.4vw, 1.35rem); letter-spacing: -0.01em; }

p { color: var(--ink-bone); }
p.lead { color: var(--ink-mist); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; max-width: 58ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--size-1);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-mist);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--hair-strong);
}

.container { width: min(100% - 48px, var(--content-max)); margin-inline: auto; }
.container.narrow { max-width: var(--content-narrow); }
.container.text { max-width: var(--content-text); }

section {
  padding-block: clamp(80px, 10vw, 160px);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 84px);
  max-width: 840px;
}

.hair {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-strong), transparent);
  width: 100%;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.caps { text-transform: uppercase; letter-spacing: var(--tracking-wider); }