/* Sticky header shell */
#site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--gray-900);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--gray-900) 28%, transparent);
}

/* Bar & brand */
#site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  position: relative;
}
#site-header .logo {
  font-family: 'Lora', serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-100);
}

/* Nav */
#site-header nav.primary-nav ul {
  display: flex; gap: clamp(16px, 4vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
#site-header nav.primary-nav a {
  padding: 6px 2px; border-radius: 6px;
  transition: color 160ms ease, background 160ms ease;
  color: var(--gray-100);
}
#site-header nav.primary-nav a:hover,
#site-header nav.primary-nav a:focus-visible {
  color: var(--blue-200);
  outline: none;
}

/* Mobile hamburger (≤768px) */
#site-header .nav-toggle { display: none; }
#site-header .hamburger { display: none; }

@media (max-width: 768px) {
  #site-header nav.primary-nav {
    position: absolute; top: 100%; right: 0; left: 0;
    background: var(--gray-900);
    border-top: 1px solid var(--gray-700);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 220ms ease, opacity 180ms ease;
  }
  #site-header nav.primary-nav ul {
    flex-direction: column; gap: 0; padding: 8px 0;
  }
  #site-header nav.primary-nav li { border-bottom: 1px solid var(--gray-700); }
  #site-header nav.primary-nav li:last-child { border-bottom: none; }
  #site-header nav.primary-nav a { display: block; padding: 12px 16px; }

  #site-header .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; padding: 8px; border-radius: 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #site-header .hamburger .line {
    width: 24px; height: 2px; background: var(--gray-100); border-radius: 2px;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  /* Toggle */
  #site-header .nav-toggle:checked ~ nav.primary-nav { max-height: 260px; opacity: 1; }
  #site-header .nav-toggle:checked + label.hamburger .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #site-header .nav-toggle:checked + label.hamburger .line:nth-child(2) { opacity: 0; }
  #site-header .nav-toggle:checked + label.hamburger .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Logo size tweak on small screens */
  #site-header .logo { font-size: 0.98rem; }
}