* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(120% 140% at 78% 8%, var(--bg) 0%, var(--bg-edge) 70%);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* Full-page spiral wash: fixed, low-opacity, screen-blended so the SVG's own
   slate backdrop disappears into the page gradient, and radially masked so it
   fades out well before the text column and the viewport edges.
   No desaturation filter — the artwork's native teal comes through. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/spiral-svg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 62% 42%, var(--mask-solid) 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 80% at 62% 42%, var(--mask-solid) 25%, transparent 80%);
  animation: washIn 1.8s ease-out 0.2s forwards;
}

@keyframes washIn {
  from { opacity: 0; }
  to   { opacity: 0.22; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  margin-right: 0.6em;
  border-radius: 1px;
  vertical-align: middle;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 0 0 2.1rem;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: 0.22; }
}