/* ============================================================ base.css - Foundation layer ------------------------------------------------------------ Goal: set the page's baseline - the box-model reset, default element appearance (body / a / img), the fluid heading type scale, the motion baseline, the shared scroll-lock state, and the generic layout helper classes the markup composes (.container, .center, .lede …). Contains: reset, base elements, layout helpers, type scale, and the responsive rules for .container. The file is authored MOBILE-FIRST: base styles are the phone layout and min-width queries enhance upward (each media query is kept next to the rule it modifies so this file is self-contained; the canonical breakpoint scale is documented in tokens.css). Depends on: tokens.css (loads after it, before components.css). ============================================================ */ /* ─── reset & base elements ─── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth in-page scrolling is decorative motion - only for visitors who have not asked the OS for reduced motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-cereal); font-size: 16px; line-height: 1.45; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a, button { -webkit-tap-highlight-color: transparent; } img, svg { display: block; max-width: 100%; } /* ─── shared scroll-lock state ─── Added to by js/transcript_popover.js (modal open) and js/mobile_nav.js (menu sheet open) - both declare the same class name. The two can never be open at once (the modal's overlay blocks the bar), so a single class is safe. */ body.is-scroll-locked { overflow: hidden; } /* ─── layout helpers ─── */ .container { max-width: 1200px; margin: 0 auto; padding: 64px 24px; } .container-narrow { max-width: 780px; } .center { text-align: center; } .center-row { justify-content: center; } .center-lede { margin-left: auto; margin-right: auto; } .lede { color: var(--color-ink-secondary); font-size: 18px; line-height: 24px; max-width: 60ch; margin-bottom: 40px; font-weight: 400; } /* ─── type scale (Cereal - medium weights, tight tracking) ─── */ h1, h2, h3, h4 { color: var(--color-ink); } h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; } h2 { font-size: clamp(26px, 3.6vw, 32px); line-height: 1.13; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; } h3 { font-size: 22px; line-height: 26px; font-weight: 600; margin-bottom: 8px; } h4 { font-size: 16px; line-height: 20px; font-weight: 600; margin-bottom: 6px; } /* ─── inline accent - brand-pink emphasis for a word or phrase inside a heading or copy (e.g. "missed call"). font-style:normal lets it sit on an as colour emphasis without italics, matching the wordmark / hero treatment. ─── */ .accent { color: var(--color-rausch); font-style: normal; } /* ─── responsive - .container padding (mobile-first: md, then xl) ─── */ @media (min-width: 745px) { .container { padding: 96px 40px; } } @media (min-width: 1129px) { .container { padding: 96px 80px; } }