*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-900); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-sans); font-size: var(--fs-1); line-height: var(--lh-body);
  color: var(--text); background: transparent;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--font-serif-tc); font-weight: 700; line-height: var(--lh-head); letter-spacing: 0.01em; text-wrap: balance; }
h4 { font-size: var(--fs-1); font-weight: 600; }
p { text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--pink) 55%, transparent); color: #fff; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--paper); color: var(--ink-900); border-radius: var(--r-1); font-weight: 600; text-decoration: none; transition: top var(--t-fast); }
.skip:focus { top: 1rem; }
.mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.latin { font-family: var(--font-display); font-variation-settings: "SOFT" 100; }

/* layout primitives */
.wrap { width: min(100% - var(--gutter) * 2, var(--w-content)); margin-inline: auto; }
.wrap--wide { width: min(100% - var(--gutter) * 2, var(--w-wide)); }
.wrap--text { width: min(100% - var(--gutter) * 2, var(--w-text)); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-3); margin-top: 2.2em; }
.prose h3 { font-size: var(--fs-2); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.4em; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }

/* scroll reveal: content is fully visible without JS; only .js opts in */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
/* same contract when reduced motion is forced by ?motion=reduce (tests) */
.reduced *, .reduced *::before, .reduced *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.reduced.js [data-reveal] { opacity: 1; transform: none; }