/* ============================================================================ Reset, document defaults, typography primitives, accessibility baseline. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Lenis drives scrolling; when it is active it adds .lenis to and the native smooth behaviour must get out of the way or the two fight. */ } html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { min-height: 100svh; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; /* No global feature settings: the admin console's Inter-era 'cv02'/'cv03' stylistic sets do nothing in Poppins and map to unwanted alternates in JetBrains Mono (the slashed zero reads as an 8 at eyebrow sizes). Tabular figures are opted into per element with .tnum instead. */ font-feature-settings: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } /* Pinned + horizontally-scrolled scenes are wider than the viewport by design. `clip` on both axes keeps them from producing a page-level scrollbar without creating a scroll container (which `hidden` would, and which would break position: sticky inside). */ html { overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; border: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } /* ------------------------------------------------------------- typography */ h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--fs-display); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.015em; } p { text-wrap: pretty; } strong, b { font-weight: 600; color: var(--ink); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: var(--maxw-prose); } .muted { color: var(--ink-soft); } .prose { max-width: var(--maxw-prose); } /* Mono eyebrow above every section heading — the one place --font-mono is used. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-lt); } .eyebrow::before { content: ''; inline-size: 1.75rem; block-size: 1px; background: currentColor; opacity: 0.55; } /* Gradient headline fragment. Uses the live --accent pair, so it recolors with the scene. Falls back to plain ink where background-clip:text is unsupported. */ .grad { color: var(--accent-lt); } @supports (background-clip: text) or (-webkit-background-clip: text) { .grad { background: linear-gradient(100deg, var(--accent-lt), var(--accent) 55%, var(--accent-lt)); -webkit-background-clip: text; background-clip: text; color: transparent; } } .tnum { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- accessibility */ :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -150%; z-index: 200; padding: 0.75rem 1.25rem; background: var(--accent); color: #fff; font-weight: 600; border-radius: 0 0 var(--r-sm) var(--r-sm); transition: translate var(--dur) var(--ease-out); } .skip-link:focus-visible { translate: -50% 0; } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } ::selection { background: var(--accent); color: #fff; } /* Scrollbar — Lenis still uses the native one, so it should not look native. */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { inline-size: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid var(--bg-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } } /* ------------------------------------------------------- reduced motion The single switch. Everything scroll-driven checks prefersReducedMotion in JS (Lenis, ScrollTrigger scrubs and the WebGL hero never start); this block handles the pure-CSS half — marquees, ambient loops, and all transitions. */ @media (prefers-reduced-motion: reduce) { :root { --motion: 0; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Reveal states are opt-in via .is-in; with no ScrollTrigger to add it, the content would stay invisible. Force everything visible and untransformed. */ [data-reveal], [data-reveal-group] > * { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; clip-path: none !important; } }