.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  min-height: 6rem;
  padding: var(--space-3) max(var(--space-5), calc((100vw - var(--page-max)) / 2));
  border-bottom: 1px solid var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-logo {
  display: inline-flex;
  flex: 0 0 auto;
}

.nav img.nav-img {
  display: block;
  width: auto;
  height: clamp(7rem, 10vw, 10rem);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  min-width: 0;
  margin-left: auto;
}

.nav-links > * {
  flex: 0 0 auto;
}

.nav a,
.nav button,
.nav-dropdown-trigger {
  color: var(--color-ink);
  text-decoration: none;
}

.nav a,
.nav button {
  transition: color var(--motion-fast);
}

.nav a:hover,
.nav button:hover,
.nav-dropdown-trigger:hover {
  color: var(--color-racing-red);
}

.nav form {
  margin: 0;
}

.nav button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  transition: color var(--motion-fast);
}

.nav-dropdown-trigger::-webkit-details-marker {
  display: none;
}

.nav-dropdown-trigger::after {
  border: 0.25rem solid transparent;
  border-top-color: currentColor;
  margin-top: 0.3rem;
  content: "";
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  display: none;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-racing-blue);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.nav-dropdown-menu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--space-3);
  content: "";
}

.nav-dropdown[open] .nav-dropdown-menu {
  display: block;
  z-index: 1;
}

/* The menus share name="primary-nav", so opening one closes the others. Where
   a browser ignores that, the menu whose tab was clicked last still sits on
   top: clicking a summary focuses it, and :focus-within follows the focus. */
.nav-dropdown:focus-within .nav-dropdown-menu {
  z-index: 2;
}

/* A tap anywhere outside an open menu closes it. The open tab stretches an
   invisible layer over the page, and a tap on that layer is a tap on the tab.
   At z-index -1 inside the nav it sits above the page but under the tabs, the
   logo and the menu, so those still take a tap directly. */
.nav-dropdown[open] .nav-dropdown-trigger::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  cursor: default;
  content: "";
}

.nav-dropdown-menu a,
.nav-dropdown-menu button {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  white-space: nowrap;
}

.nav-dropdown-menu hr {
  border: 0;
  border-top: 1px solid var(--color-border-light);
}

.nav-dropdown-form {
  width: 100%;
}

.nav-hr {
  display: none;
}

/* Narrow layouts open on tap only: a full-width sheet opening on hover would
   flash across the page as the pointer crosses the tab row. */
@media (hover: hover) and (min-width: 721px) {
  .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
  }
}

@media (max-width: 720px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: auto;
    padding: var(--space-3) var(--space-4) 0;
  }

  .nav-logo {
    justify-self: center;
    justify-content: center;
    width: 100%;
    padding-bottom: var(--space-3);
  }

  .nav-links {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% + (2 * var(--space-4)));
    margin: 0 calc(-1 * var(--space-4));
    gap: 0;
    border-top: 1px solid var(--color-ink);
  }

  /* A menu hung off its own tab runs past the screen edge from the outer tabs.
     Static tabs hand the menu to the tab row, which spans the screen, so every
     menu opens as a sheet exactly the width of the screen under the tabs. */
  .nav-dropdown {
    position: static;
    min-width: 0;
    border-right: 1px solid rgb(21 20 17 / 24%);
  }

  .nav-dropdown:last-child {
    border-right: 0;
  }

  /* Three tabs share the screen; at 1.35rem "MARKETPLACE" alone was wider than
     a third of a 320px phone and ran into its neighbors. */
  .nav-dropdown-trigger {
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    min-height: 3rem;
    padding: var(--space-2) var(--space-1);
    font-size: clamp(0.95rem, 4.4vw, 1.35rem);
    white-space: nowrap;
  }

  .nav-dropdown[open] .nav-dropdown-trigger {
    background: var(--color-paper);
    box-shadow: inset 0 -0.2rem 0 var(--color-racing-red);
    color: var(--color-racing-red);
  }

  .nav-dropdown[open] .nav-dropdown-trigger::after {
    margin-top: -0.3rem;
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    top: 100%;
    right: 0;
    left: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    column-gap: var(--space-5);
    min-width: 0;
    padding: var(--space-1) var(--space-4);
    border: 0;
    border-top: 1px solid var(--color-ink);
    border-bottom: 0.2rem solid var(--color-racing-blue);
  }

  .nav-dropdown-menu::before {
    content: none;
  }

  .nav-dropdown[open] .nav-dropdown-menu {
    display: grid;
  }

  .nav-dropdown-menu a,
  .nav-dropdown-menu button {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .nav-dropdown-menu > a:last-child,
  .nav-dropdown-menu > :last-child button {
    border-bottom: 0;
  }

  /* The group divider sits over the row line above it rather than doubling it. */
  .nav-dropdown-menu hr {
    grid-column: 1 / -1;
    height: 0;
    margin: -1px 0 0;
    border-top: 2px solid var(--color-border);
  }
}