/* ── Font fallbacks ────────────────────────── Size-adjusted local fallbacks so the swap from system font → web font doesn't shift any layout. Each fallback's metrics are tuned to match the real font so text takes the same vertical space in either state. This is what brings CLS down to ~0. */ @font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia'); ascent-override: 91%; descent-override: 25%; line-gap-override: 0%; size-adjust: 96%; } @font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia Italic'), local('Georgia'); font-style: italic; ascent-override: 91%; descent-override: 25%; line-gap-override: 0%; size-adjust: 96%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 23%; line-gap-override: 0%; size-adjust: 107%; } @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Consolas'), local('Courier New'); ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; size-adjust: 132%; } /* ── Design tokens ───────────────────── */ :root { --color-bg: #08080C; --color-surface: #111118; --color-border: #1E1E2A; --color-accent: #FF4D2E; --color-accent-dim: rgba(255, 77, 46, 0.15); --color-text: #F0EDE8; --color-muted: #6B6B7A; --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: var(--font-body); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Reset ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } /* ── Layout ──────────────────────────── */ .agc-container { max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: clamp(20px, 4vw, 80px); padding-right: clamp(20px, 4vw, 80px); } /* ── Global chrome toggle ────────────── */ /* Class lives on (set by inline script before paint, then managed by React) or on . Either ancestor scope hides the wrapped global modules so the choice screen is fullbleed without a header flash on first paint. */ .hide-site-chrome #site-header, .hide-site-chrome #site-footer { display: none !important; } /* ── Anchor scroll offset ───────────── Every section with an id reserves headroom equal to the fixed global Header height so #hash navigation lands below the header, not behind it. */ section[id] { scroll-margin-top: 96px; }