/* base.css — reset + typography scale + shared primitives */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* the hidden attribute must always win over layout rules (e.g. display:grid on a .account-state) — otherwise toggled states/sections stack visibly */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; } img, video, canvas, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } .wrap--narrow { max-width: var(--wrap-narrow); } section { padding-block: var(--section-pad); position: relative; } /* type scale */ .t-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.9rem, 8.5vw, 7.2rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-weight: 750; font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } .t-h3 { font-family: var(--font-display); font-weight: 650; font-size: 1.22rem; line-height: 1.3; } .t-lead { font-size: clamp(1.08rem, 1.8vw, 1.3rem); line-height: 1.6; color: var(--ink-dim); max-width: 38em; } .t-body { color: var(--ink-dim); max-width: 42em; } .t-eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .6em; } .t-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); } .t-mono { font-family: var(--font-mono); font-size: .85em; } .t-muted { color: var(--muted); } .t-accent { color: var(--accent); } .t-miss { color: var(--miss); } /* section header rhythm */ .sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } /* utility */ .grid { display: grid; gap: 1.25rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stack { display: grid; gap: .9rem; } .row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* no-JS + reduced motion safety: content always visible by default. JS adds .motion-ok to ; scenes only hide/transform inside it. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }