/* ==========================================================================
   Open Ground — reset, ground, light, grain, and the browser's own surfaces
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: `hidden` would make the body a scroll container and
     break the masthead's sticky positioning. */
  overflow-x: clip;
  transition: background 420ms var(--out), color 420ms var(--out);
}

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

/* -- Browser surfaces, themed -----------------------------------------
   The parts we did not draw still belong to the palette. */
::selection { background: var(--pulse-wash); color: var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground-2); }
::-webkit-scrollbar-thumb {
  background: var(--ground-edge);
  border-radius: var(--r-pill);
  border: 3px solid var(--ground-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
* { scrollbar-color: var(--ground-edge) var(--ground-2); scrollbar-width: thin; }

:focus-visible {
  outline: 3px solid var(--pulse-ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:root[data-mode='dark'] :focus-visible { outline-color: var(--pulse); }

a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

input, textarea { caret-color: var(--pulse-ink); }
::placeholder { color: var(--ink-3); opacity: 1; }

/* -- The light, positioned by the pointer ---------------------------- */
.daylight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120vmax 90vmax at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    var(--lit-1) 0%, var(--lit-2) 30%, var(--lit-3) 74%);
  transition: background 700ms var(--out);
}

/* -- One grain, so nothing is a flat fill ---------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
:root[data-mode='dark'] .grain { mix-blend-mode: screen; opacity: calc(var(--grain) * 0.34); }

.page { position: relative; z-index: 2; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--brand);
  color: var(--on-brand);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.skip:focus { left: 16px; }

/* -- Type scale ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display);
  letter-spacing: -0.045em;
  line-height: 0.96;
}
/* The landing page owns the largest setting; inner pages step down one, so
   the wordmark still reads as the largest thing on those screens. */
body:not(.is-home) .t-display { font-size: var(--t-display-2); }
.t-h2 { font-size: var(--t-headline); letter-spacing: -0.035em; }
.t-h3 { font-size: var(--t-title); letter-spacing: -0.025em; }
.t-h4 { font-size: var(--t-subtitle); letter-spacing: -0.02em; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.micro {
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1; }

/* -- Sections --------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section__head { max-width: var(--measure); margin-bottom: clamp(30px, 4vw, 52px); }
.section__head > * + * { margin-top: 16px; }

/* more space above a heading than below it */
.stack > * + * { margin-top: 18px; }
.stack > h2 + *, .stack > h3 + * { margin-top: 14px; }
.stack > * + h2, .stack > * + h3 { margin-top: 44px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .daylight { transition: none; }
}