/* Header and primary navigation. Markup: .site-header > .brand + .nav-cta + .menu-toggle + .primary-nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 max(1.2rem, calc((100% - var(--content)) / 2));
  height: 68px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 9, 8, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 360ms ease, transform 360ms ease, background 360ms ease;
}

/* Immersive homepage on desktop: the header recedes to a faint presence
   during the first chapters but stays in place and interactive, so other
   pages are always one hover away. It returns fully on the closing chapter.
   Default to muted before JS runs so the first paint never flashes bright.
   On small screens the header always remains available. */
@media (min-width: 901px) {
  .immersive-home .site-header {
    opacity: 0.14;
    border-bottom-color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .immersive-home .site-header.home-nav-revealed,
  .immersive-home .site-header.home-nav-muted:hover,
  .immersive-home .site-header.home-nav-muted:focus-within,
  .immersive-home .site-header:hover,
  .immersive-home .site-header:focus-within {
    opacity: 1;
    border-bottom-color: var(--hairline);
    background: rgba(11, 9, 8, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
}

.brand-mark {
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Cap-height box the mono stack aligns to. */
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
}

.brand-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.3rem;
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  /* Optical center: Spectral's cap height reads high, so lift the mono stack
     a hair so it sits in the visual middle of AAPI, not the metric middle. */
  transform: translateY(-0.12em);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  order: 1;
}

.primary-nav a {
  position: relative;
  padding: 0.4rem 0;
  color: var(--paper-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transition: right 220ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--paper);
  outline: none;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  right: 0;
}

.nav-cta {
  order: 2;
  min-height: 2.5rem;
  padding: 0.6rem 1.1rem;
  border-color: var(--red);
  background: var(--red);
  color: var(--on-red);
  white-space: nowrap;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--red-bright);
  background: var(--red-bright);
}

.menu-toggle {
  display: none;
  order: 3;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.menu-toggle-icon span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--paper);
  transition: transform 220ms ease, opacity 220ms ease;
}

.nav-open .menu-toggle-icon span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav-open .menu-toggle-icon span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

@media (max-width: 1150px) {
  .menu-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.4rem 1.2rem 1.2rem;
    border-bottom: 1px solid var(--hairline);
    background: var(--night);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--hairline);
  }

  .primary-nav a:last-child {
    border-bottom: 0;
  }

  .primary-nav a::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand-stack {
    display: none;
  }

  .nav-cta {
    padding: 0.6rem 0.8rem;
    font-size: 0.7rem;
  }
}

.primary-nav .partner-nav { text-transform: none; letter-spacing: 0; }
.primary-nav a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }