.site-header{position:sticky;top:0;z-index:1000;height:var(--nav-height);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}
.site-nav{width:min(calc(100% - 1.25rem),var(--content));height:100%;margin:auto;display:flex;align-items:center;gap:.75rem}
.site-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:800 .88rem/1 var(--font-ui);letter-spacing:.03em;white-space:nowrap}
.site-brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent);color:#16110b;font:800 .72rem var(--font-mono)}
.nav-links{display:none;margin-left:auto;align-items:center;gap:.25rem}
.nav-link,.nav-icon,.nav-toggle{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);text-decoration:none;font:600 .72rem var(--font-mono);letter-spacing:.02em;cursor:pointer}
.nav-link{padding:.6rem .8rem}.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink);background:var(--surface);border-color:var(--border)}
.nav-actions{margin-left:auto;display:flex;gap:.4rem}.nav-icon,.nav-toggle{width:44px;color:var(--ink);border-color:var(--border)}
.nav-toggle[aria-expanded="true"]{background:var(--surface-2)}
.mobile-panel{position:fixed;inset:var(--nav-height) 0 auto;z-index:999;padding:.75rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);box-shadow:var(--shadow);transform:translateY(-130%);visibility:hidden;transition:transform .22s ease,visibility .22s}
.mobile-panel[data-open="true"]{transform:none;visibility:visible}
.mobile-panel .nav-link{display:flex;justify-content:flex-start;width:100%;padding:.85rem 1rem;font-size:.82rem}
.mobile-backdrop{position:fixed;inset:var(--nav-height) 0 0;z-index:998;background:rgba(0,0,0,.42);border:0;opacity:0;visibility:hidden;transition:.2s}
.mobile-backdrop[data-open="true"]{opacity:1;visibility:visible}
.breadcrumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-block:1rem;color:var(--dim);font:.7rem var(--font-mono)}
.breadcrumb a{text-decoration:none}.breadcrumb a:hover{color:var(--ink)}
@media (min-width:960px){.site-nav{width:min(calc(100% - 3rem),var(--content))}.nav-links{display:flex}.nav-actions{margin-left:.5rem}.nav-toggle{display:none}.mobile-panel,.mobile-backdrop{display:none}}