.site-header{position:sticky;top:0;z-index:1000;background:var(--color-surface-bg);border-bottom:var(--border-subtle);} 
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:var(--space-4);} 
.brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text-primary);} 
.brand-mark{height:48px;width:auto;display:block;} 
.brand-text{font-family:var(--font-heading);font-size:1.2rem;} 

.nav{display:flex;} 
.nav-header{display:none;}
.nav-list{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;align-items:center;} 
.nav-list li{margin:0;padding:0;} 
.nav a{color:var(--color-text-primary);font-size:var(--fs-5);} 
.nav a:hover{color:var(--color-accent);} 

.nav-toggle, .nav-close{display:none;flex-direction:column;justify-content:center;align-items:center;min-height:44px;min-width:44px;padding:0;border:none;background:none;cursor:pointer;} 
.nav-toggle{gap:4px;}
.nav-toggle-line{width:24px;height:2px;background:var(--color-text-primary);display:block;transition:transform var(--transition-fast),opacity var(--transition-fast);} 

.nav-close{position:relative;}
.nav-close .nav-toggle-line{position:absolute;}
.nav-close .nav-toggle-line:nth-child(1){transform:rotate(45deg);}
.nav-close .nav-toggle-line:nth-child(2){transform:rotate(-45deg);}

.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:998;} 

@media(max-width:960px){
  .nav{position:fixed;top:0;left:0;height:100%;width:280px;background:var(--color-surface-alt);box-shadow:var(--shadow-soft);transform:translateX(-100%);transition:transform var(--transition-fast);z-index:999;padding:var(--space-5);flex-direction:column;} 
  .nav.open{transform:translateX(0);} 
  .nav-header{display:flex;justify-content:flex-end;width:100%;margin-bottom:var(--space-3);}
  .nav-list{flex-direction:column;align-items:flex-start;gap:var(--space-4);} 
  .nav-toggle, .nav-close{display:flex;} 
}

@media(max-width:600px){
  .ribbon{padding:var(--space-2) var(--space-3);font-size:.82rem;line-height:1.4;}
  .header-inner{min-height:64px;gap:var(--space-2);}
  .brand-mark{height:32px;}
  .brand-text{font-size:1rem;}
  .nav{width:min(86vw,320px);padding:var(--space-5) var(--space-4);}
  .nav-list{width:100%;gap:var(--space-3);}
  .nav a{font-size:1.05rem;}
}