:root{--brand:#6b1a2a;--brand-ink:#4f1220;--text-link:#6b1a2a;--text-link-hover:#4f1220}
.menu-toggle{position:absolute;width:1px;height:1px;opacity:0}.burger,.menu-backdrop{display:none}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
h1,h2{color:var(--text-strong);margin:0;text-wrap:pretty}
h1{font:var(--type-h1);letter-spacing:var(--tracking-tight)}
p{margin:0}
header.site{position:sticky;top:0;z-index:10;height:96px;display:flex;align-items:center;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
header.site .wrap{display:flex;align-items:center;gap:32px;width:100%}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;font-weight:var(--weight-semibold);font-size:var(--text-lg)}
.brand img{width:60px;height:60px;display:block}
nav.site{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
nav.site a{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-muted);text-decoration:none}
nav.site a:hover{color:var(--brand-ink)}
main{padding:64px 0 96px}
.stack{display:flex;flex-direction:column;gap:24px}
.prose{max-width:68ch}
ol.src{list-style:none;counter-reset:s;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
ol.src li{counter-increment:s;position:relative;padding:18px 0 18px 44px;border-bottom:1px solid var(--border-subtle)}
ol.src li::before{content:counter(s);position:absolute;left:0;top:18px;width:28px;height:28px;border-radius:50%;background:var(--surface-sunken);color:var(--brand-ink);font:var(--type-label);display:flex;align-items:center;justify-content:center}
footer.site{background:#3a0d17;color:rgba(255,255,255,.78);padding:24px 0;font-size:var(--text-sm)}
footer.site .wrap{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer.site a{color:var(--neutral-0)}
footer.site img{width:56px;height:56px}
@media(max-width:960px){
header.site{padding:10px 0}
.brand img{width:44px;height:44px}
.burger{display:flex;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:30}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;background:var(--text-strong);transition:transform .25s,background .25s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-8px}.burger span::after{top:8px}
.menu-toggle:checked~.burger span{background:transparent}
.menu-toggle:checked~.burger span::before{transform:translateY(8px) rotate(45deg)}
.menu-toggle:checked~.burger span::after{transform:translateY(-8px) rotate(-45deg)}
.menu-toggle:focus-visible~.burger{outline:2px solid var(--text-strong);outline-offset:2px}
nav.site{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);margin:0;padding:88px 28px 28px;display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;background:var(--surface-card);transform:translateX(100%);transition:transform .3s ease;z-index:20;overflow-y:auto;visibility:hidden}
nav.site a{font-size:20px;padding:14px 0;border-bottom:1px solid var(--border-subtle);opacity:1;white-space:normal;color:var(--text-strong)}
nav.site a.hl{padding:14px 16px;margin:4px -16px}
.menu-toggle:checked~nav.site{transform:none;visibility:visible}
.menu-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15;opacity:0;pointer-events:none;transition:opacity .3s}
.menu-toggle:checked~.menu-backdrop{opacity:1;pointer-events:auto}
section[id],.band[id],#top{scroll-margin-top:80px}
header.site{height:auto}
}
@media(max-width:860px){main{padding:40px 0 64px}h1{font-size:36px}footer.site .wrap{flex-direction:column;align-items:flex-start!important;gap:16px}}