*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}
::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 650;
  font-synthesis: none;
  letter-spacing: -0.055em;
  line-height: 1.16;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { max-width: 9.5em; font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.06em; }
h2 { max-width: 12em; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); font-weight: 400; line-height: 1.3; }

.lead { font-size: var(--text-lead); line-height: 1.7; max-width: 34em; color: var(--color-ink-2); margin-top: var(--space-md); }
p { margin: 0; text-wrap: pretty; }
img, video, svg, canvas { max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.num { font-variant-numeric: tabular-nums; font-weight: 400; }
.u { color: var(--color-muted); font-size: 0.75em; font-weight: 300; margin-left: 0.35em; letter-spacing: 0; }

.skip {
  position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-pill); text-decoration: none;
}
.skip:focus { top: var(--space-md); }

/* corner ticks: a hairline frame drawn only at its corners */
.ticks { position: relative; }
.ticks::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--rule-hair) solid var(--color-rule-2);
  -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick));
  mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick));
}

@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 72px; --section-gap: 88px; --section-gap-l: 104px; }
}
@media (max-width: 40rem) {
  :root { --gutter: 18px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 88px; }
  body { font-size: 1rem; }
}
@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;
  }
}