*, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); scroll-padding-top: var(--head-h); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; /* Transparent so the fixed backdrop layer shows; the ground colour is on . */ background: transparent; color: var(--ink); font: 15px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; } main { flex: 1; outline: none; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; } h1 { font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -0.045em; } h2 { font-size: clamp(24px, 3vw, 34px); } h3 { font-size: 18px; letter-spacing: -0.015em; } p { color: var(--ink-2); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } button:disabled { cursor: not-allowed; opacity: 0.5; } img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--accent); color: var(--accent-ink); } .backdrop { position: fixed; inset: 0; z-index: -1; background: var(--sky); pointer-events: none; } .backdrop::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 520px at 8% -10%, var(--glow-a), transparent 70%), radial-gradient(700px 420px at 100% 0%, var(--glow-b), transparent 70%); } .backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--inset); } .page { padding-block: 28px 96px; } .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .micro { font-size: 12.5px; color: var(--ink-3); } .small { font-size: 13.5px; } .up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--ink-3); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-weight: 600; transition: top 0.2s; } .skip-link:focus { top: 12px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: 16px; } .spacer { flex: 1; } .hide { display: none; } @media (max-width: 640px) { .hide-sm { display: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html.bd-grab, html.bd-grab body { cursor: grab; } html.bd-grabbing, html.bd-grabbing body { cursor: grabbing; user-select: none; } .view-slot { display: contents; }