/* ========================================================================== Base: reset, typography, layout helpers, focus, motion preferences ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; } ol, ul { padding: 0; list-style: none; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; } code, .mono { font-family: var(--font-mono); } ::selection { background: var(--yellow); color: var(--ink); } /* ---- focus ---------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; } /* ---- helpers --------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 12px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---- motion --------------------------------------------------------------- "Pause doodles" (a froink.com classic) sets data-doodles="paused" on . prefers-reduced-motion users get the same treatment by default. --------------------------------------------------------------------------- */ html[data-doodles="paused"] *, html[data-doodles="paused"] *::before, html[data-doodles="paused"] *::after { animation-play-state: paused !important; } @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; transition-delay: 0ms !important; } }