/* Reset, typography, focus. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--s5)); } /* The ground field. The wordmark is four dots on a 9px pitch; so is the page. It is one background-image on — no overlay element, no image request, and it scrolls with the document, so the page reads as measured paper rather than as a fixed screen texture. Base44 does the same thing with a 13px SVG dot grid; ours reuses the brand's own pitch instead of inventing one, and radial-gradient beats a data-URI SVG here because it needs no escaping and re-colours from a token in both themes. */ body { background-color: var(--ground); background-image: radial-gradient(circle var(--ground-dot-r) at 1px 1px, var(--ground-dot) 99%, transparent 100%); background-size: var(--ground-pitch) var(--ground-pitch); background-position: 0 0; color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: var(--track-tight); text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-text); } button, input, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3 { font-weight: 600; line-height: 1.05; letter-spacing: var(--track-display); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--track-tight); font-weight: 600; } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); } .lead { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; letter-spacing: 0; color: var(--ink-2); max-width: 52ch; } .serif { font-family: var(--serif); letter-spacing: 0; } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .small { font-size: var(--fs-small); } [hidden] { display: none !important; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); } :focus:not(:focus-visible) { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s4); top: var(--s4); z-index: 200; transform: translateY(-200%); background: var(--ink); color: var(--ground); padding: var(--s3) var(--s5); border-radius: var(--radius); font-weight: 600; } .skip-link:focus-visible { transform: none; color: var(--ground); } /* The eyebrow is the page's technical voice: a bracketed section index in the accent, then the label. `content: var(--frame-label)` means one CSS rule serves every instance and each one only sets a custom property — Firecrawl's trick, and it is why the whole labelling system costs four lines. */ .framelab::before { content: var(--frame-label, ""); color: var(--accent-text); margin-right: 0.75em; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }