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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, .55vw + .88rem, 1.15rem);
  line-height: 1.55;
  overflow-x: clip;
  /* The page is drawn on paper, so give it paper: a faint fibre noise that
     stops the large flat areas reading as a browser default background. */
  background-image: var(--paper-noise);
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--brain); color: var(--ink); }

:focus-visible {
  outline: var(--rule) solid var(--cavity-mid);
  outline-offset: 3px;
}

.wrap { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--pad-x); }
.narrow { max-width: var(--measure); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── the hand-drawn frame ───────────────────────────────────────────────────
   Everything boxed on this site uses the same wobbly ink border as the art.
   A plain 3px solid border would read as a UI component; the double-offset
   shadow reads as something drawn twice by a shaky hand. */
.ink {
  border: var(--rule) solid var(--ink);
  border-radius: 14px 8px 16px 10px / 8px 16px 10px 14px;
  background: var(--paper);
  box-shadow: 5px 6px 0 var(--ink);
}
.ink--loose { box-shadow: 5px 6px 0 var(--ink), 10px 12px 0 rgb(20 16 16 / .12); }

/* Section rules drawn as a wobble rather than an <hr>. */
.rule-ink {
  height: 10px; border: 0; margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='10' viewBox='0 0 240 10'%3E%3Cpath d='M0 6 C 30 2, 55 9, 88 5 S 150 2, 182 7 218 4, 240 6' fill='none' stroke='%23141010' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 240px 10px;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .78em 1.35em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--rule) solid var(--ink);
  border-radius: 12px 7px 13px 8px / 7px 13px 8px 12px;
  box-shadow: 4px 5px 0 var(--ink);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 6px 8px 0 var(--ink); }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--brain { --btn-bg: var(--brain); --btn-fg: var(--ink); }
.btn--cavity { --btn-bg: var(--cavity-mid); --btn-fg: var(--paper); }

/* ── scroll reveal ────────────────────────────────────────────────────────────
   .reveal is inert until main.js adds .booted. The html:not(.js) and
   .js-stalled escapes below mean a 404, a throw, or JS-off still shows
   a complete page instead of a blank one. */
.reveal { opacity: 0; transform: translateY(14px); }
html.booted .reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.booted .reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal,
html.js-stalled .reveal { opacity: 1 !important; transform: none !important; }