/* Reset + base typography */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-surface-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;

  background-image:
    radial-gradient(1200px 600px at 110% -10%, rgba(111,168,154,0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(207,227,221,0.35), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.21  0 0 0 0 0.22  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  font-variation-settings: "SOFT" 50, "opsz" 48;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.2rem); font-weight: 450; line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 500; }
h4 { font-size: 1.05rem; line-height: 1.3; font-weight: 500; }

p  { margin: 0 0 1em; color: var(--c-ink-2); }
small, .small { font-size: .86rem; color: var(--c-gray); }

a { color: var(--c-primary-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; }

::selection { background: var(--c-mint); color: var(--c-primary-700); }

.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
}
.container-narrow {
  width: min(720px, 92vw);
  margin: 0 auto;
}

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

.row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.muted { color: var(--c-gray); }
.ink   { color: var(--c-ink); }
.kbd   { font-family: var(--f-mono); font-size: .86em; padding: .1em .35em; background: var(--c-surface); border-radius: var(--r-xs); border: 1px solid var(--c-line); }

.eyebrow {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-primary-700);
}

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); animation: reveal .7s var(--ease) forwards; }
  .reveal.delay-1 { animation-delay: .08s; }
  .reveal.delay-2 { animation-delay: .16s; }
  .reveal.delay-3 { animation-delay: .24s; }
  .reveal.delay-4 { animation-delay: .32s; }
  .reveal.delay-5 { animation-delay: .40s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}