.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:transparent;
  transition:background .3s ease, border-color .3s ease;
}

.site-header.scrolled{
  background:var(--bg-primary);
  border-bottom:1px solid var(--border-muted);
}

.header-inner{
  max-width:var(--container-max);
  margin-inline:auto;
  padding:1rem var(--container-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-width:0;
}

.brand-mark{
  width:44px;
  height:auto;
}

.brand-text{
  font-family:var(--font-heading);
  font-size:1.25rem;
  white-space:nowrap;
}

.nav-toggle{
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text-primary);
}

.site-nav{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(320px, 85%);
  background:var(--bg-secondary);
  transform:translateX(100%);
  transition:transform .3s ease;
  padding:2rem;
  display:flex;
}

.site-nav.open{
  transform:translateX(0);
  z-index: 111;
}

.nav-list{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.nav-list li{margin:0;padding:0;}

.nav-list a{
  font-size:1rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.nav-cta{
  color:var(--accent-gold);
}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.nav-overlay.active{
  opacity:1;
  pointer-events:auto;
}

@media(min-width:900px){
  .nav-toggle{display:none;}

  .site-nav{
    position:static;
    transform:none;
    height:auto;
    width:auto;
    background:transparent;
    padding:0;
  }

  .nav-list{
    flex-direction:row;
    gap:2rem;
    align-items:center;
  }

  .nav-overlay{display:none;}
}