.site-header{
position:sticky;
top:0;
z-index:1000;
background:var(--color-surface-elevated);
border-bottom:1px solid var(--color-border-soft);
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:72px;
gap:var(--space-3);
}
.brand{
display:flex;
align-items:center;
gap:0.6rem;
text-decoration:none;
}
.brand-mark{
height:44px;
width:auto;
}
.brand-text{
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
color:var(--color-text-primary);
white-space:nowrap;
}
.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:44px;
height:44px;
border:1px solid var(--color-border-soft);
border-radius:var(--radius-sm);
}
.nav-toggle-line{
height:2px;
width:20px;
background:var(--color-text-primary);
margin:auto;
}
.site-nav{
display:flex;
align-items:center;
gap:var(--space-4);
}
.nav-list{
display:flex;
align-items:center;
gap:var(--space-4);
margin:0;
padding:0;
}
.nav-list li+li{
margin:0;
}
.nav-link{
position:relative;
padding:0.25rem 0;
color:var(--color-text-primary);
}
.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:var(--color-accent-gold);
transition:width var(--transition-base);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
width:100%;
}
.nav-actions{
display:flex;
align-items:center;
}
.nav-search{
font-size:1.2rem;
}
@media(max-width:900px){
.nav-toggle{display:flex;}
.site-nav{
position:fixed;
top:72px;
right:0;
width:min(320px,100%);
height:calc(100vh - 72px);
background:var(--color-surface-elevated);
flex-direction:column;
align-items:flex-start;
padding:var(--space-4);
transform:translateX(100%);
transition:transform var(--transition-base);
overflow-y:auto;
}
.site-nav.open{
transform:translateX(0);
}
.nav-list{
flex-direction:column;
align-items:flex-start;
width:100%;
gap:var(--space-3);
}
}