.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-height);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
main { padding-top: var(--header-height); }

.header-inner { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; }
.brand:hover { color: var(--accent); }
.brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-size: 0.8rem; font-weight: 700;
}

.site-nav { margin-left: auto; }
.nav-menu { display: flex; gap: 0.25rem; list-style: none; padding: 0; }
.nav-link {
  display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--step--1); font-weight: 500;
}
.nav-link:hover, .nav-link[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }

.header-actions { display: flex; gap: 0.5rem; }
.menu-toggle { display: none; }
.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-grid; }
  .nav-menu { display: none; }
  .nav-menu.is-open {
    display: flex; flex-direction: column; gap: 0.25rem;
    position: fixed; top: var(--header-height); left: 0; right: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .nav-menu.is-open .nav-link { padding: 0.85rem 1rem; font-size: var(--step-0); }
  body.menu-open { overflow: hidden; }
}