/* One shared header with a clear way back to the Blueprint. */
.v2-page .site-header .nav {
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
}

.v2-page .site-header .nav-menu a {
  min-height: 44px;
}

.v2-page .site-header .nav-toggle:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

@media (min-width: 1100px) {
  .v2-page .site-header .nav {
    grid-template-columns: auto 1fr auto;
  }

  .v2-page .site-header .nav-menu {
    gap: clamp(14px, 1.8vw, 24px);
  }

  .v2-page .site-header .nav-menu a {
    white-space: nowrap;
  }
}

@media (max-width: 1099px) {
  .v2-page .site-header .nav {
    grid-template-columns: minmax(0, auto) 1fr auto auto;
    gap: 10px;
  }

  .v2-page .site-header .nav-toggle {
    display: grid;
    grid-column: 4;
    grid-row: 1;
  }

  .v2-page .site-header .nav > .nav-cta {
    grid-column: 3;
    grid-row: 1;
  }

  .v2-page .site-header .nav-menu {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: 16px var(--page-pad) 24px;
    color: var(--bone);
    background: var(--dark);
    border-bottom: 1px solid var(--bone);
  }

  .v2-page .site-header .nav-menu.is-open {
    display: grid;
    gap: 0;
  }

  .v2-page .site-header .nav-menu a {
    min-height: 60px;
    padding: 12px 0;
    color: var(--bone);
    border-bottom: 1px solid rgba(232, 228, 220, .2);
    font: 400 24px/1.2 "Anton", Impact, sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: normal;
  }

  .v2-page .site-header .nav-menu a::after {
    display: none;
  }

  .v2-page .site-header .nav-menu a:is(:hover, :focus-visible, [aria-current="page"]) {
    color: #fff;
    border-bottom-color: var(--bone);
  }
}

@media (max-width: 520px) {
  .v2-page .site-header .nav {
    gap: 6px;
    padding-inline: 12px;
  }
}