@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --night:#0B0806;--night-2:#15100C;--bone:#F5EDE4;--dust:#B8A698;--amber:#FFB347;--ember:#FF6A2B;--ink:#1A120D;
  --line-dark:rgba(245,237,228,.12);--heat:linear-gradient(100deg,var(--amber),var(--ember));
  --gut:clamp(20px,4vw,48px);--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--night);scrollbar-color:#4a3a2e var(--night)}
body{margin:0;background:radial-gradient(60% 40% at 80% 0%,#2a150a 0%,transparent 70%),var(--night);color:var(--bone);font-family:"Geist","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--amber);color:var(--ink)}
a{color:var(--amber);text-underline-offset:4px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 2*var(--gut),1100px);margin-inline:auto}
.nav{border-bottom:1px solid var(--line-dark)}
.nav-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.85rem;letter-spacing:-.035em;line-height:1;color:var(--bone);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;text-decoration:none;background:var(--heat);color:var(--ink);transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn svg{width:18px;height:18px}
.doc{padding-block:clamp(56px,8vw,104px)}
.doc-head{max-width:760px;margin-bottom:48px}
.doc h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2.4rem,5vw,4rem);margin:0;text-wrap:balance}
.doc-head p{color:var(--dust);margin:18px 0 0;max-width:60ch}
.meta{font-size:.9rem;color:var(--dust)}
.doc-body{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:24px;font-size:.92rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:6px 0;color:var(--dust);text-decoration:none}
.toc a:hover{color:var(--bone)}
.doc-body article{max-width:68ch}
.doc h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;letter-spacing:-.02em;margin:44px 0 12px;scroll-margin-top:24px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:#E3D3C4;text-wrap:pretty}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
.doc strong{color:var(--bone)}
.callout{border:1px solid rgba(255,160,90,.3);background:rgba(255,140,60,.06);border-radius:18px;padding:16px 20px;margin:20px 0}
.foot{border-top:1px solid var(--line-dark);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));color:var(--dust);font-size:.9rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot a{color:var(--dust);display:inline-block;padding-block:6px}
.foot a:hover{color:var(--bone)}
.lost{min-height:calc(100svh - 160px);display:grid;place-items:center;text-align:center;padding-block:64px}
.lost .code{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.06em;line-height:.85;font-size:clamp(7rem,26vw,16rem);color:rgba(255,179,71,.14);margin:0}
.lost h1{margin-top:-.4em}
.lost p{color:var(--dust);max-width:44ch;margin:18px auto 28px}
.lost .links{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}
@media (max-width:860px){.doc-body{grid-template-columns:1fr;gap:32px}.toc{position:static}.nav .btn{min-height:44px;padding:0 16px;font-size:.9rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}