.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; z-index:50; background:transparent;
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background: var(--header-glass);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700 }
.brand svg{ width:28px; height:28px }
.brand b{ letter-spacing:.2px }

.nav{ display:flex; align-items:center; gap:.5rem; margin:0; padding:0;}
.nav > li{ list-style:none; position:relative }
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  height:38px; padding:0 12px; border-radius:10px;
  background:color-mix(in oklab, var(--panel) 6%, transparent);
  color:var(--ink); display:flex; align-items:center; gap:.5rem;
  transition: border-color .2s, background-color .2s, transform .05s;
}
.btn:hover{ border-color:color-mix(in oklab, var(--line) 70%, transparent) }
.btn:active{ transform:translateY(1px) }

.submenu{
  position:absolute; top:100%; right:0; min-width:160px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:6px; box-shadow: 0 20px 60px rgba(0,0,0,.18);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.submenu a{
  display:flex; align-items:center; gap:.5rem;
  padding:10px 10px; border-radius:10px; color:var(--ink); text-decoration:none;
}
.submenu a:hover{ background:color-mix(in oklab, var(--panel) 88%, #0000) }
.nav > li:hover .submenu{ opacity:1; transform:translateY(0); pointer-events:auto }
@media (pointer:coarse) {
  .nav > li:hover .submenu{ opacity:0; transform:translateY(-6px); pointer-events:none }
  .nav > li > .btn[aria-expanded="true"] + .submenu{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
}
.site-header .brand,
.site-header .brand:visited{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--text);           
  text-decoration: none;        
}

.site-header .brand:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.site-header .brand:hover{
  color: var(--accent);
}

.site-header .brand b{
  font-weight: 800;
  text-decoration: none;
}
:root[data-theme="light"] .site-header{ --text:#0f172a; --accent:#22c55e; }
:root[data-theme="dark"]  .site-header{ --text:#e5e7eb; --accent:#22c55e; }

.site-header .brand svg{
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

:root[data-theme="dark"] .site-header .brand svg{
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,.25));
}
@media (max-width: 640px){
  .site-header .brand b{
    display: none;
  }
}