/* ========================================================================== Base — reset, typography defaults, grain texture, focus states ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Kept on rather than deliberately: setting overflow-x without overflow-y forces the paired axis to compute as "auto" (per the CSS Overflow spec), which turns whichever element it's set on into its own independent scroll container. already is the document's scrolling element, so this is a no-op there — but on it would silently split scrolling onto a second container, breaking window.scrollTo()/scrollY and anything else that assumes the viewport itself is what scrolls. */ overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); } ::selection { background: var(--accent); color: var(--text-on-accent); } /* Visible keyboard focus everywhere — never removed, only restyled */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Skip link */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 999; padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-mono); font-size: var(--text-small); font-weight: 600; border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* Film-grain overlay: fixed, whole-viewport, barely-there, non-interactive */ .grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 160px 160px; } @media (prefers-reduced-motion: reduce) { .grain { opacity: 0.035; } } /* Utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mono { font-family: var(--font-mono); } .accent { color: var(--accent); font-style: normal; }