@font-face { font-family:'Geist'; src:url('assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist'; src:url('assets/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Geist Pixel'; src:url('assets/fonts/GeistPixel-Square.woff2') format('woff2'); font-display:swap; }

:root {
  --paper:#edf0f5; --ink:#1c2a40; --muted:#5b6981; --navy:#172638; --sky:#4f6fb3; --line:rgba(28,42,64,.12);
  --gutter:clamp(16px,4vw,56px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Geist',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible { outline:2px solid var(--sky); outline-offset:4px; border-radius:4px; }
.skip { position:absolute; left:16px; top:-100px; padding:10px 14px; background:#fff; border-radius:8px; z-index:5; }
.skip:focus { top:12px; }

header, main, .footer-row { width:min(1120px, calc(100% - 2 * var(--gutter))); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Geist Pixel',monospace; font-size:26px; text-decoration:none; }
.brand img { image-rendering:pixelated; }
.back { font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--ink); }

.guide-intro { padding:clamp(40px,7vh,80px) 0 clamp(36px,6vh,64px); max-width:780px; }
.eyebrow { margin:0 0 18px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
h1 { margin:0; font-size:clamp(40px,6vw,72px); line-height:1.02; letter-spacing:-.04em; font-weight:600; }
.lede { margin:20px 0 0; max-width:52ch; font-size:clamp(16px,1.1vw + 11px,19px); line-height:1.5; color:var(--muted); }
.release { display:inline-block; margin-top:22px; padding:7px 12px; border:1px solid var(--line); border-radius:20px; font-size:12px; font-weight:500; }

.guide-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; border-top:1px solid var(--line); padding:42px 0 80px; }
.guide-layout nav { display:flex; flex-direction:column; gap:14px; align-self:start; position:sticky; top:32px; font-size:13px; color:var(--muted); }
.guide-layout nav a { text-decoration:none; }
.guide-layout nav a:hover { color:var(--ink); }
section { margin-bottom:54px; }
h2 { margin:0 0 18px; font-size:26px; font-weight:600; letter-spacing:-.03em; }
h3 { margin:28px 0 6px; font-size:17px; }
article p { margin:0 0 16px; font-size:16px; line-height:1.7; color:#42536b; }

footer { background:var(--navy); color:rgba(223,230,240,.7); font-size:12px; }
.wave { display:block; width:100%; height:48px; background:var(--paper); }
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:8px 0 28px; }
.footer-row span { display:inline-flex; align-items:center; gap:10px; }
.footer-row nav { display:flex; gap:22px; }

@media (max-width:760px) {
  header { padding:18px 0; }
  .brand { font-size:22px; }
  .guide-layout { grid-template-columns:1fr; gap:32px; }
  .guide-layout nav { position:static; flex-direction:row; flex-wrap:wrap; gap:12px 20px; }
  h2 { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }