/* ============================================================ Element defaults, global resets and text/layout utilities. Tokens in tokens.css, primitives in components.css. ============================================================ */ html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } body { margin: 0; } /* The HTML hidden attribute must always win — several display: rules (.btn, .overlay scrims, …) would otherwise override it and leak hidden wizard controls / modals onto the page. */ [hidden] { display: none !important; } /* Clip the off-canvas mobile menu so it can't create horizontal scroll. `clip` (not `hidden`) doesn't establish a scroll container, so it leaves the sticky header working. */ html, body { overflow-x: clip; } /* Reserve the scrollbar gutter so the overlay lock below, which removes it, can't reflow the page behind. */ html { scrollbar-gutter: stable; } /* The overlay lock must land on : the UA only propagates body's overflow to the viewport when the root's own overflow is `visible`, which the `clip` above rules out. */ html.scroll-locked { overflow: hidden; } h1, h2, h3, h4, .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } h4 { font-size: var(--step-2); } .eyebrow { font-family: var(--font-sans); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute); font-weight: 500; } a.eyebrow { transition: color var(--dur-1); } a.eyebrow:hover, a.eyebrow:focus-visible { color: var(--ink); } /* No underline by default; an inline prose link has to opt back in. */ a { color: inherit; text-decoration: none; } /* hairlines */ .hair { height: 1px; background: var(--line); border: 0; } /* layout utils */ .wrap { width: min(1280px, 100% - 48px); margin-inline: auto; } .wrap-wide { width: min(1600px, 100% - 48px); margin-inline: auto; } .wrap-narrow { width: min(780px, 100% - 48px); margin-inline: auto; } /* text utils */ .muted { color: var(--ink-mute); } .small { font-size: 12px; } .center { text-align: center; } /* button_to renders a
; keeps inline controls inline. */ .inline-form { display: inline; } /* selection */ ::selection { background: var(--accent); color: var(--bg); } /* scrollbar (subtle) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; }