.site-header{
position:sticky;
top:0;
z-index:1000;
background:var(--color-bg-cream);
border-bottom:1px solid var(--color-border-soft-brown);
}
.site-header__inner{
max-width:var(--container-max);
margin:0 auto;
padding:0 var(--container-pad);
display:flex;
align-items:center;
justify-content:space-between;
min-height:72px;
position:relative;
}
.site-header__brand{
display:flex;
align-items:center;
justify-content:center;
}
.site-header__brand-link{
display:flex;
align-items:center;
gap:var(--space-2);
}
.site-header__logo{
width:52px;
height:auto;
}
.site-header__brand-text{
font-family:var(--font-heading);
font-size:1.25rem;
}
.site-header__nav{
display:flex;
gap:var(--space-3);
}
.site-header__nav a{
padding:0.5rem 0.75rem;
border-radius:var(--radius-pill);
}
.site-header__nav a:hover{
background:var(--color-card-sand);
}
.site-header__toggle{
display:none;
flex-direction:column;
gap:4px;
padding:0.5rem;
}
.site-header__toggle span{
width:24px;
height:2px;
background:var(--color-text-sage);
}
.site-header__mobile{
position:fixed;
top:72px;
left:0;
right:0;
background:var(--color-bg-cream);
border-top:1px solid var(--color-border-soft-brown);
padding:var(--space-4);
max-height:calc(100vh - 72px);
overflow:auto;
}
.site-header__mobile-nav{
display:flex;
flex-direction:column;
gap:var(--space-3);
}
@media (max-width:900px){
.site-header__nav{display:none;}
.site-header__toggle{display:flex;}
.site-header__brand{
position:absolute;
left:50%;
transform:translateX(-50%);
}
.site-header__logo{width:36px;}
.site-header__brand-text{font-size:1rem;}
}