/* ── nav ────────────────────────────────────────────────────── */

nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
}

/* Three items: the logo, the live ticker, and the links. A 1fr/auto/1fr
   grid holds the logo and links to the two ends while the ticker sits
   dead-center of the row, independent of how wide either side is —
   a flex row with space-between can't do that without the ticker
   drifting toward whichever side is narrower. */
nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  min-height: 76px;
}

.logo { justify-self: start; }
.nav-links { justify-self: end; }

@media (max-width: 880px) {
  nav .wrap { gap: 14px; }
}

.logo {
  display: flex;
  align-items: center;
}

.logo-lockup {
  height: 30px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--ink-2);
  /* Navigation gives up neither a line nor a word to the ticker
     beside it: at the tightest tablet widths the row used to take
     the difference out of "Sign in" and break it in two. The chip
     yields instead — it is the only thing on the row that can. */
  flex: none;
  white-space: nowrap;
}

.nav-links a:not(.btn) {
  transition: color var(--fast) var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--ink); }

.nav-links .btn { height: 40px; padding-inline: 18px; }

@media (max-width: 640px) {
  nav .wrap { min-height: 64px; }
  .nav-links { gap: 18px; font-size: 13px; }
  /* "Sign in" duplicates the Start button's destination on a phone. */
  .nav-links a[href$="/login"] { display: none; }
}