*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-4)); overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-base)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* decorative blobs never cause sideways scroll; clip keeps sticky header working */
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 var(--s-4); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
p { overflow-wrap: break-word; }
img { height: auto; }
[hidden] { display: none !important; } /* component display rules must never override the hidden attribute */
.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hand { font-family: var(--font-hand); }

.section { padding: var(--section-y) var(--gutter); max-width: var(--max-w); margin-inline: auto; }
.section--ink { background: var(--c-ink); color: var(--c-paper); max-width: none; position: relative; overflow: hidden; }
.section { position: relative; }
.split { display: grid; gap: var(--stack-lg); }
.split > * { min-width: 0; } /* long words/iframes can't blow out grid columns */
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; align-items: start; } }

:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-yellow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}