*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-body); line-height: 1.55; }
body::before { position: fixed; z-index: -1; inset: 0; content: ''; background: radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 32rem), radial-gradient(circle at 3% 70%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 26rem); pointer-events: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 30; padding: .65rem 1rem; background: var(--gold); color: #101010; border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2rem), var(--max-width)); margin-inline: auto; }
.page { padding-block: clamp(3.5rem, 8vw, 7rem); }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: .73rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.05; text-wrap: balance; }
h1 { max-width: 16ch; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: clamp(2.7rem, 8vw, 6.5rem); font-weight: 500; letter-spacing: -.055em; }
h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; }
.lede { max-width: 60ch; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }