* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* The page is the logo's cream with a faint gouache grain (inline SVG noise in ink, about 5% alpha). */
body { font-family: var(--font); font-size: 1rem; color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > main { flex: 1 0 auto; min-width: 0; width: 100%; }
img, canvas { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: 0; text-wrap: balance; color: var(--ink); }
a { color: var(--plate-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--plate-deeper); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--plate-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }