@import url('./tokens.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); }
::selection { background: color-mix(in oklab, var(--brand-500) 32%, transparent); color: var(--ink); }
::-webkit-scrollbar { width: var(--s-3); }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: var(--s-1) solid var(--surface); }
.skip-link {
  position: fixed;
  left: var(--s-4);
  top: calc(var(--s-4) * -10);
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }
.surface-band { background: var(--surface); }
.surface-band-alt { background: var(--surface-2); }
.editorial-kicker {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-400);
  font-weight: var(--fw-bold);
}
.editorial-title {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.paper-grid {
  background-image: linear-gradient(color-mix(in oklab, var(--border) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--border) 30%, transparent) 1px, transparent 1px);
  background-size: var(--s-8) var(--s-8);
}
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--brand-100) 8%, transparent) 0, transparent 30%), radial-gradient(circle at 80% 10%, color-mix(in oklab, var(--brand-300) 10%, transparent) 0, transparent 26%), radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--brand-700) 12%, transparent) 0, transparent 22%);
}
.reveal-up { opacity: 0; transform: translateY(var(--s-6)); }
.card-lift { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.card-lift:hover { transform: translateY(calc(var(--s-1) * -0.5)); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.prose-copy { max-width: 66ch; color: var(--ink-muted); font-size: var(--fs-lg); }
.section-pad { padding-block: var(--s-20); }
@media (min-width: 48rem) { .section-pad { padding-block: var(--s-24); } }
@media (min-width: 80rem) { .section-pad { padding-block: var(--s-28); } }