/* ========================================================================== Reset, typography and the handful of layout primitives every section uses. Component styling lives in site.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The sticky header would otherwise cover the top of any anchored section. */ scroll-padding-top: 88px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* No overflow-x:hidden here on purpose. On it turns the element into a scroll container, which quietly breaks position:sticky and makes IntersectionObserver miss most of the page. If something ever does stick out sideways, check.mjs fails on it — fix the element, not the symptom. */ h1, h2, h3, h4 { margin: 0; font-weight: 680; letter-spacing: -.022em; line-height: 1.08; } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); letter-spacing: -.014em; line-height: 1.25; } h4 { font-size: var(--fs-lg); letter-spacing: -.01em; line-height: 1.3; } p { margin: 0; } a { color: inherit; text-decoration: none; } a:not([class]) { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-line); } a:not([class]):hover { text-decoration-color: var(--accent-hot); } img, svg, video { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } /* One visible focus ring for the whole site. Keyboard users get it, pointer users do not — but it is never removed outright. */ :focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: var(--r-sm); } ::selection { background: var(--accent); color: var(--accent-ink); } /* --------------------------------------------------------------- layout --- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--band { background: var(--bg-2); border-block: 1px solid var(--line); } /* Section heading block: a small label, a title, and one paragraph of lede. Repeated six times down the page, so it is a component, not a copy-paste. */ .shead { max-width: var(--maxw-text); margin-bottom: clamp(32px, 4vw, 56px); } .shead { max-width: var(--maxw-text); margin-bottom: clamp(24px, 2.6vw, 36px); } .shead .eyebrow { margin-bottom: var(--s-3); } .shead p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); opacity: .7; } .grid { display: grid; gap: clamp(16px, 2vw, 24px); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------ utilities --- */ .u-mono { font-family: var(--font-mono); } .u-dim { color: var(--ink-2); } .u-dimmer { color: var(--ink-3); } .u-sm { font-size: var(--fs-sm); } .u-center { text-align: center; } .u-nowrap { white-space: nowrap; } /* Visible only to screen readers — used for the skip link and form hints. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-weight: 620; transition: top var(--t-fast) var(--ease); } .skip:focus { top: var(--s-4); } /* --------------------------------------------------------------- motion --- */ /* Sections rise slightly as they come into view. The hiding is scoped to html.is-ready, which main.js sets only once it has run. Without JavaScript — or if a script fails — nothing is ever hidden, so the page cannot end up blank waiting for an observer that will not fire. */ html.is-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } html.is-ready .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }