/* Header Pro v1 — responsive, polished header + mobile drawer */
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:1000;background:var(--primary);color:var(--on-primary,#000);padding:8px 14px;border-radius:var(--radius-sm,8px);font-weight:700;transition:top .2s}
.skip-link:focus{top:10px}
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);transition:box-shadow .25s,background .25s;padding-top:env(safe-area-inset-top)}
.site-header.is-scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.site-header .top-in{display:flex;align-items:center;gap:16px;min-height:68px}
.site-header .nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.site-header .nav>a,.site-header .header-more>summary{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:.92rem;transition:background .2s,color .2s;white-space:nowrap}
.site-header .nav>a:hover,.site-header .header-more>summary:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.site-header .nav>a[aria-current=page]{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.site-header .nav-actions{display:flex;align-items:center;gap:8px}
.nav-burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,transparent);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex:none}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.nav-burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav-backdrop{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mnav{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:190;width:min(86vw,340px);background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 0 60px rgba(0,0,0,.4)}
[dir=ltr] .mnav{transform:translateX(-105%)}
.mnav.open{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.mnav-close{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--ink);font-size:1rem;cursor:pointer}
.mnav-links{display:flex;flex-direction:column;gap:4px;padding:14px 0;overflow-y:auto;flex:1}
.mnav-links a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:var(--ink-2);font-weight:600}
.mnav-links a:hover,.mnav-links a[aria-current=page]{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--ink)}
.mnav-links a .i,.mnav-links a svg{width:20px;height:20px;color:var(--primary)}
.mnav-foot{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.mnav-foot .btn{justify-content:center;width:100%}
html.mnav-lock{overflow:hidden}
@media (max-width:1100px){.site-header .nav>a span{font-size:.86rem}.site-header .nav>a{padding:8px 9px}}
@media (max-width:960px){
 .nav-burger{display:inline-flex}
 .site-header .nav{display:none}
 .site-header .top-in{gap:10px;min-height:60px}
 .site-header .nav-actions{margin-inline-start:auto}
}
@media (max-width:560px){
 .site-header .auth-actions .btn.ghost{display:none}
 .site-header .nav-actions{gap:6px}
 .site-header .brand img{max-height:32px}
}
@media (min-width:961px){.mnav,.mnav-backdrop{display:none!important}}
@media (prefers-reduced-motion:reduce){.mnav,.nav-burger span{transition:none}}