/* nav.css — fixed site header, brand lockup, desktop nav, header CTA
   (.primary-action shared button lives here; hero + form reuse it),
   mobile nav drawer + no-js nav fallback.
   Also owns anchor-scroll clearance for the fixed header. */

/* ---- Anchor clearance: the fixed header must never cover section headlines.
   scroll-padding covers native jumps (no-js), scroll-margin covers
   scrollIntoView. Overrides the base.css default. ---- */
html {
  scroll-padding-top: 6.5rem;
}

[id] {
  scroll-margin-top: 6.5rem;
}

.site-header {
  --header-h: 4.75rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  /* Hard floor: the chrome must never alpha-blend with page content.
     A duplicated intro pass can strand a stale inline opacity on the
     header (nav.js sweeps it); this makes that failure mode — content
     compositing through the glass and over the open drawer — struct-
     urally impossible even if a future script race reintroduces it. */
  opacity: 1 !important;
  transition: background-color var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard);
}

/* Phosphor scanline under the glass — appears with the scrolled state. */
.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 6%, rgba(var(--phosphor-rgb), 0.26) 50%, transparent 94%);
  transition: opacity var(--dur-5) var(--ease-glide);
}

.site-header.is-scrolled {
  --header-h: 3.9rem;
  border-color: var(--hairline-soft);
  background: rgba(var(--ink-rgb), 0.8);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.site-header.nav-is-open {
  border-color: var(--hairline);
  background: rgba(var(--ink-rgb), 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 1600px);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  transition: min-height var(--dur-5) var(--ease-glide);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.65rem;
  width: max-content;
  color: var(--paper);
  font-family: var(--display);
  line-height: 1;
}

.brand > img {
  width: 1.45rem;
  height: 1.45rem;
  filter: invert(91%) sepia(75%) saturate(409%) hue-rotate(33deg) brightness(103%) contrast(94%);
}

.brand-name {
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.brand-divider {
  width: 1px;
  height: 1.05rem;
  background: var(--hairline);
}

.brand-detail {
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- Desktop nav: mono instrument labels with indexed readouts.
   Hover vocabulary = character decode (nav.js); color is state only. ---- */
.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 2.3vw, 2.6rem);
  counter-reset: nav-index;
}

.desktop-nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  counter-increment: nav-index;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-standard);
}

.desktop-nav a::before {
  content: "0" counter(nav-index);
  transform: translateY(-0.42em);
  color: var(--muted);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  transition: color var(--dur-1) var(--ease-standard);
}

/* Settled hover state: a phosphor terminal caret rises after the label —
   the resting frame of the decode vocabulary, legible in a still. */
.desktop-nav a::after {
  position: absolute;
  top: 52%;
  right: -0.68em;
  width: 0.34em;
  height: 0.92em;
  content: "";
  transform: translateY(-50%) scaleY(0.25);
  transform-origin: bottom;
  opacity: 0;
  background: var(--phosphor);
  transition: opacity var(--dur-1) var(--ease-standard), transform var(--dur-2) var(--ease-glide);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--paper);
}

.desktop-nav a:hover::before,
.desktop-nav a:focus-visible::before {
  color: var(--phosphor);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

/* ---- Footer + social links keep the phosphor underline sweep (owned here). ---- */
.footer-column a,
.social-links a {
  position: relative;
  color: var(--paper-soft);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-standard);
}

.footer-column a::after,
.social-links a::after {
  position: absolute;
  right: 0;
  bottom: -0.4rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--phosphor);
  transition: transform var(--dur-2) var(--ease-standard);
}

.footer-column a:hover,
.footer-column a:focus-visible,
.social-links a:hover,
.social-links a:focus-visible {
  color: var(--phosphor);
}

.footer-column a:hover::after,
.social-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Shared primary button: phosphor block, terminal-invert on hover. ---- */
.header-cta,
.primary-action {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
  min-height: 3rem;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  border: 1px solid var(--phosphor);
  background: var(--phosphor);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--dur-3) var(--ease-glide), transform var(--dur-1) var(--ease-standard);
}

.header-cta::before,
.primary-action::before {
  position: absolute;
  inset: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ink);
  transition: transform var(--dur-4) var(--ease-glide);
}

.header-cta > *,
.primary-action > * {
  position: relative;
  z-index: 1;
}

.header-cta {
  justify-self: end;
}

.header-cta img,
.primary-action img {
  width: 1.25rem;
  height: 1.25rem;
  filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
  transition: transform var(--dur-2) var(--ease-glide), filter var(--dur-3) var(--ease-glide);
}

.header-cta:hover,
.header-cta:focus-visible,
.primary-action:hover,
.primary-action:focus-visible {
  color: var(--phosphor);
}

.header-cta:hover::before,
.header-cta:focus-visible::before,
.primary-action:hover::before,
.primary-action:focus-visible::before {
  transform: scaleX(1);
}

.header-cta:hover img,
.header-cta:focus-visible img,
.primary-action:hover img,
.primary-action:focus-visible img {
  transform: translateX(3px);
  filter: invert(91%) sepia(75%) saturate(409%) hue-rotate(33deg) brightness(103%) contrast(94%);
}

.header-cta:active,
.primary-action:active {
  transform: scale(0.985);
}

/* ---- Mobile toggle: hairline instrument switch, lines morph to X. ---- */
.nav-toggle {
  position: relative;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline);
  background: rgba(var(--paper-rgb), 0.04);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}

.nav-toggle:hover {
  border-color: rgba(var(--phosphor-rgb), 0.5);
}

.nav-toggle:active {
  background: var(--phosphor-soft);
}

.nav-toggle-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15rem;
  height: 2px;
  margin: -1px 0 0 -0.575rem;
  background: var(--phosphor);
  transition: transform var(--dur-4) var(--ease-glide);
}

.nav-toggle .nav-toggle-line:first-child {
  transform: translateY(-4px);
}

.nav-toggle .nav-toggle-line:last-child {
  transform: translateY(4px);
}

.nav-is-open .nav-toggle .nav-toggle-line:first-child {
  transform: rotate(45deg);
}

.nav-is-open .nav-toggle .nav-toggle-line:last-child {
  transform: rotate(-45deg);
}

/* ---- Mobile drawer: opaque glass, indexed ledger rows, coordinates footer. ---- */
.mobile-nav[hidden] {
  display: none;
}

.mobile-nav {
  position: absolute;
  z-index: var(--z-modal);
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100svh - var(--header-h));
  padding: 1.4rem var(--page-gutter) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background:
    radial-gradient(130% 42% at 50% 0%, rgba(var(--phosphor-rgb), 0.05), transparent 68%),
    linear-gradient(180deg, var(--charcoal), var(--ink) 46%),
    var(--ink);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.35rem;
  border-top: 1px solid var(--hairline-soft);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.mobile-nav a:active {
  color: var(--phosphor);
}

.drawer-index {
  flex: 0 0 1.9rem;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.mobile-nav a:last-of-type {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--phosphor);
}

.mobile-nav a:last-of-type .drawer-index {
  color: rgba(var(--phosphor-rgb), 0.55);
}

.drawer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Staggered reveal each time the drawer unhides. */
@media (prefers-reduced-motion: no-preference) {
  .js .nav-is-open .mobile-nav {
    animation: drawer-veil var(--dur-3) var(--ease-standard) both;
  }

  .js .nav-is-open .mobile-nav a,
  .js .nav-is-open .drawer-meta {
    animation: drawer-item var(--dur-7) var(--ease-out-expo) both;
  }

  .js .nav-is-open .mobile-nav a:nth-child(1) { animation-delay: 60ms; }
  .js .nav-is-open .mobile-nav a:nth-child(2) { animation-delay: 105ms; }
  .js .nav-is-open .mobile-nav a:nth-child(3) { animation-delay: 150ms; }
  .js .nav-is-open .mobile-nav a:nth-child(4) { animation-delay: 195ms; }
  .js .nav-is-open .mobile-nav a:nth-child(5) { animation-delay: 240ms; }
  .js .nav-is-open .mobile-nav a:nth-child(6) { animation-delay: 285ms; }
  .js .nav-is-open .drawer-meta { animation-delay: 340ms; }
}

@keyframes drawer-veil {
  from { opacity: 0; }
}

@keyframes drawer-item {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (max-width: 1240px) {
  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
  }

  .desktop-nav {
    justify-content: flex-end;
  }

  .header-cta {
    display: none;
  }
}

@media (max-width: 980px) {
  .desktop-nav {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: block;
  }

  .no-js .nav-toggle {
    display: none;
  }

  .no-js .header-inner {
    grid-template-columns: 1fr;
  }

  .no-js .mobile-nav[hidden] {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    width: 100%;
    height: auto;
    padding: 0 var(--page-gutter);
    overflow: visible;
    border-top: 1px solid var(--hairline);
    background: var(--ink);
  }

  .no-js .mobile-nav a {
    min-height: 3rem;
    padding: 0.55rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-family: var(--body);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  .no-js .drawer-index,
  .no-js .drawer-meta {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    --header-h: 4.25rem;
  }

  .site-header.is-scrolled {
    --header-h: 3.7rem;
  }

  html {
    scroll-padding-top: 5.5rem;
  }

  [id] {
    scroll-margin-top: 5.5rem;
  }

  .brand-detail,
  .brand-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand-name {
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::after,
  .header-inner,
  .desktop-nav a,
  .desktop-nav a::before,
  .desktop-nav a::after,
  .header-cta,
  .header-cta::before,
  .header-cta img,
  .primary-action,
  .primary-action::before,
  .primary-action img,
  .nav-toggle,
  .nav-toggle-line {
    transition: none;
  }
}