/* ========================================================================== BASE — fonts, resets, root typography, focus rings, paper grain. ========================================================================== */ /* ---- webfonts (self-hosted, no external CDN) ------------------------- */ @font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-800-italic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; } /* ---- reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } html, body { min-height: 100%; } /* The header's torn edge deliberately overhangs the viewport, which would otherwise add a horizontal scrollbar. `overflow-x: clip` trims it WITHOUT breaking `position: sticky` on the header — `overflow-x: hidden` would. */ html { overflow-x: clip; } body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--paper-light); background: var(--teal); /* NO overflow-x here. Combined with height:100% it turned into the scroll container, which breaks window.scrollTo/scrollY and makes scroll position hard to reason about. `html { overflow-x: clip }` above already trims the header's overhanging torn edge. */ } img, picture, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration-color: var(--teal-bright); text-underline-offset: 0.15em; } ul, ol { list-style: none; padding: 0; } /* ---- headings ---------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } /* the section heading that receives programmatic focus on route change needs to be focusable but must not show a visible ring — it's not a user-initiated focus, it's an a11y announcement mechanism. Specificity has to beat the generic [tabindex]:focus-visible rule below. */ h1[tabindex="-1"], h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; } .pull-quote { font-weight: 800; font-style: italic; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; } /* ---- focus rings — visible everywhere, always --teal-bright ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; border-radius: 2px; } /* ---- screen-reader only utility -------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- skip link ---------------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-3); top: -3.5rem; background: var(--red); color: var(--white); padding: var(--space-2) var(--space-3); font-weight: 800; text-transform: uppercase; z-index: 999; transition: top 150ms ease; } .skip-link:focus { top: var(--space-3); } /* ---- paper grain overlay ---------------------------------------------- A fixed, full-viewport noise wash sitting above everything but never intercepting clicks — gives the kraft-paper ground a bit of texture. */ .grain { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; }