/*
 * Header: a 64px top bar that scrolls away with the page, plus a fixed,
 * centered link group. nav.js adds .is-scrolled once the bar is gone, which
 * gives the group a backing and slides in its CTA.
 */
.header {
  position: absolute;
  z-index: 40;
  inset: 0 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}
/* once scrolled, content fades and blurs out under the pinned logo and nav
   instead of colliding with them (nav.js adds .is-scrolled to the header) */
.header::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--nav-h) + 40px);
  background: linear-gradient(to bottom, var(--bg) 35%, rgb(12 12 11 / 0.7) 65%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, #000 50%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.header.is-scrolled::before { opacity: 1; }
/* the logo stays pinned top left; nav.js compacts it to the ticker on scroll */
.header .logo { position: fixed; z-index: 50; top: 0; left: var(--gutter); height: var(--nav-h); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo__mark {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.logo__word { font: 400 24px/1 var(--sans); letter-spacing: -0.04em; }
.header__actions { display: flex; gap: 12px; margin-left: auto; }

.nav {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  padding: 4px;
  border-radius: 999px;
  transition: background 0.3s, backdrop-filter 0.3s;
}
.nav.is-scrolled {
  background: rgb(12 12 11 / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav__links { display: flex; align-items: center; }
.nav__links > li > a:not(.btn) {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: background 0.2s;
}
.nav__links > li > a:not(.btn):hover { background: rgb(255 255 255 / 0.08); }

/* CTA collapses to nothing until the top bar has scrolled away */
.nav__cta {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s;
}
.nav.is-scrolled .nav__cta { max-width: 160px; opacity: 1; }

@media (max-width: 1020px) {
  .nav { display: none; }
}
@media (max-width: 860px) {
  .header__actions .btn--ghost { display: none; }
  .logo__word { font-size: 21px; }
}