/* ============================================================
   NAV — Figma frame "Nav bar" (node 11:302). Desktop only for now.
   Fixed and always visible; only the name moves into it on scroll.
   The logo is NOT a separate element: the hero <h1> flies here on
   scroll (see js/hero-logo.js). .nav__logo-slot is an invisible
   copy that only marks the exact end position and size.
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  padding-inline: var(--nav-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  background: var(--color-bg);
  color: var(--color-text);
}

.nav__logo-slot {
  visibility: hidden;
  font-size: var(--fs-logo);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  font-size: var(--fs-nav);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Underline grows from the left on hover */
.nav__links a {
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease-out), color 0.15s ease;
}
.nav__links a:hover { color: inherit; background-size: 100% 1px; }