@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-v12-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-v12-latin-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-v22-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font:400 var(--step-0)/1.6 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--white);text-wrap:balance}
img,svg,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Section surface theming ───────────────────────────────────────────
   Each utility owns its palette by remapping the active context tokens
   (--text / --text-muted / --line) plus background + base color.
   Sections (R2–R4) just add one class to flip white / dark / red. */
.section--light{background:var(--surface-white);color:var(--on-white);
  --text:var(--on-white);--text-muted:var(--muted-white);--line:#e6e6ea}
.section--dark{background:var(--surface-dark);color:var(--on-dark);
  --text:var(--on-dark);--text-muted:var(--muted-dark);--line:#2a2a2a}
.section--red{background:var(--surface-red);color:var(--on-red);
  --text:var(--on-red);--text-muted:var(--muted-red);--line:rgba(255,255,255,.28)}
.section--light h1,.section--light h2,.section--light h3{color:var(--on-white)}
.section--red h1,.section--red h2,.section--red h3{color:var(--on-red)}
/* White / red panels that follow a dark section get large rounded top corners. */
.section--round-top{border-top-left-radius:var(--radius-panel);
  border-top-right-radius:var(--radius-panel);margin-top:-1px}
/* Badge variant for the red surface: black pill, white text. */
.section--red .badge-headline .badge{background:var(--black);color:#fff}

/* Cross-document View Transitions */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .25s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .3s var(--ease) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
}