/* Header (builds on base.css) */
.site-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in oklab, var(--color-surface) 88%, black); backdrop-filter: blur(8px); border-bottom: 1px solid var(--divider-color); box-shadow: var(--shadow-sm); }

.skip-link { position: absolute; left: -9999px; top: -9999px; background: var(--color-primary); color: var(--color-on-primary); padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; z-index: 1001; outline: 2px solid var(--color-focus); }

.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-16); }

.brand__link { display: inline-flex; align-items: center; gap: var(--space-12); text-decoration: none; color: var(--gray-100); }
.brand__logo { width: 36px; height: 36px; border-radius: 6px; box-shadow: var(--shadow-sm); }
.brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(20px, 2.4vw, 28px); background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Navigation */
.primary-nav { display: flex; align-items: center; gap: var(--space-24); }
.nav__list { display: flex; align-items: center; gap: clamp(var(--space-12), 2.2vw, var(--space-24)); list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-block; padding: 8px 6px; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; border-radius: var(--radius-sm); border: 1px solid transparent; }
.nav__link:hover { color: var(--color-accent); }
.nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.nav__cta { display: inline-flex; }

/* Mobile toggle */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-elevated); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); color: var(--color-text); cursor: pointer; transition: background var(--duration-normal) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.nav-toggle:hover { background: color-mix(in oklab, var(--color-elevated) 85%, black); transform: translateY(-1px); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-toggle__bar { width: 22px; height: 2px; background: var(--color-text); display: block; margin: 3px 0; border-radius: 1px; transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard); }

/* State: menu open transforms */
.site-header[data-menu-open="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header[data-menu-open="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header[data-menu-open="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Responsive behavior (progressive enhancement) */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; flex-direction: column; }
  .primary-nav { width: 100%; }
  /* JS-enabled: collapse nav by default on small screens */
  .js .site-header .primary-nav { position: fixed; inset: 64px 0 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 94%, black), var(--color-surface)); border-top: 1px solid var(--divider-color); box-shadow: var(--shadow-lg); display: none; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: var(--space-24) clamp(var(--space-16), 4vw, var(--space-32)); gap: var(--space-24); }
  .js .site-header[data-menu-open="true"] .primary-nav { display: flex; animation: menuDrop var(--duration-slow) var(--ease-standard); }
  .primary-nav:focus { outline: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-12); background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 94%, black), var(--color-surface)); padding: 20px; width: 100%; }
  .nav__link { padding: 12px 10px; border: 1px solid var(--divider-color); border-radius: var(--radius-md); background: var(--color-elevated); }
  .nav__link:hover { background: color-mix(in oklab, var(--color-elevated) 90%, black); }
  .nav__cta { width: 100%; }
  .nav__cta .btn { width: 100%; }
}

@keyframes menuDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }