/* ========================================================================== base.css — reset, fonts, element defaults, a11y, motion kill-switch Depends on tokens.css. Load SECOND. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- Inter carries the entire site — display, body, and numerals (Space Grotesk and Neue Montreal are retired). SELF-HOSTED, subset, and preloaded: This was an @import of fonts.googleapis.com, which is the slowest way to load a webfont. An @import inside a stylesheet cannot be discovered until that stylesheet has been fetched and parsed, so first paint waited on a chain of four round trips — base.css, then Google's CSS, then the woff2, from two third-party hosts — and no preconnect can shorten a chain it does not know about. Now the files sit in assets/fonts/ and the pages preload the latin one directly from the (see scripts/lib/render.js), which is what BRAND_GUIDE §10's "fonts subset + preloaded" asks for. ONE variable file per subset covers every weight the site uses (400/500/600/ 700): 48 KB for latin, and latin-ext loaded only if a page actually contains a character in its range. Inter is SIL Open Font License 1.1, which permits self-hosting; the files are the same subsets Google Fonts serves. font-display:swap keeps text visible during the swap, so a slow font can never blank the page. -------------------------------------------------------------------------- */ @font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; /* variable: one file, every weight */ font-display:swap; src:url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Modern reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing:border-box; } * { margin:0; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } html:focus-within { scroll-behavior:smooth; } body { min-height:100vh; } img, picture, video, canvas, svg { display:block; max-width:100%; } img, video { height:auto; } input, button, textarea, select { font:inherit; color:inherit; } button { background:none; border:none; cursor:pointer; } a { color:inherit; text-decoration:none; } ul[role="list"], ol[role="list"] { list-style:none; padding:0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap:break-word; } :where(table) { border-collapse:collapse; } /* --- Body defaults -------------------------------------------------------- */ body { background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:var(--type-body); line-height:var(--lh-body); font-weight:400; font-feature-settings:"ss01"; /* Inter alternate glyphs (single-storey a) */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* --- Headings & prose (map to §3.2) --------------------------------------- */ h1, .type-h1 { font-size:var(--type-h1); font-weight:500; letter-spacing:-0.025em; line-height:var(--lh-heading); } h2, .type-h2 { font-size:var(--type-h2); font-weight:500; letter-spacing:-0.02em; line-height:var(--lh-heading); } h3, .type-h3 { font-size:var(--type-h3); font-weight:600; letter-spacing:-0.01em; line-height:1.2; } .type-hero { font-size:var(--type-hero); font-weight:500; letter-spacing:-0.03em; line-height:var(--lh-display); } .type-body-lg { font-size:var(--type-body-lg); font-weight:400; line-height:var(--lh-lead); } .type-body { font-size:var(--type-body); line-height:var(--lh-body); } .type-caption { font-size:var(--type-caption); line-height:1.4; letter-spacing:0.01em; color:var(--ink-60); } .type-label { font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label); text-transform:uppercase; line-height:1; } .type-index { font-family:var(--font-tech); font-size:var(--type-index); font-weight:500; letter-spacing:0.06em; font-variant-numeric:tabular-nums; color:var(--ink-30); } .type-stat { font-family:var(--font-tech); font-size:var(--type-stat); font-weight:500; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums; } /* Prose readability: cap the measure at 68ch (§3.2). */ p { max-width:68ch; } /* Space between consecutive paragraphs everywhere (class-based margins on tiles/meta/etc. keep their own spacing — they out-specify this rule). */ p + p { margin-top:1em; } .measure-full { max-width:none; } /* opt-out where a p must span full width */ strong, b { font-weight:600; } /* Links inside running prose get the left→right underline draw on hover. */ .prose a, a.link { color:var(--ink); background-image:linear-gradient(var(--accent), var(--accent)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size 200ms var(--ease-out), color 200ms var(--ease-out); } .prose a:hover, a.link:hover { color:var(--accent); background-size:100% 1px; } /* --- Accessibility -------------------------------------------------------- */ :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .band-dark :focus-visible, .site-footer :focus-visible { outline-color:var(--accent-on-dark); } ::selection { background:var(--accent-tint); color:var(--ink); } /* Skip-to-content link (visually hidden until focused). */ .skip-link { position:absolute; left:var(--frame-inset); top:-64px; z-index:1000; padding:12px 16px; background:var(--ink); color:var(--paper); font-size:var(--type-label); font-weight:500; letter-spacing:var(--track-label); text-transform:uppercase; transition:top var(--t-micro) var(--ease-out); } .skip-link:focus { top:var(--frame-inset); } /* Screen-reader-only utility. */ .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; } /* --- Motion kill-switch (§7 hard rule) ------------------------------------ */ @media (prefers-reduced-motion:reduce) { html:focus-within { scroll-behavior:auto; } *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }