body > header > .button {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (width > 1280px) {
  body > header > #navigation > :is(a, details) {
    white-space: nowrap;
  }
  body > header > #navigation .dropdown > div {
    white-space: normal;
  }
}

@media (1280px < width <= 1360px) {
  body > header {
    padding-inline: 3%;
    gap: 14px;
  }
  body > header > #navigation {
    gap: 12px;
    font-size: 12px;
  }
}

/* Use the existing compact navigation before the desktop links wrap. */
@media (1050px < width <= 1280px) {
  body > header > #navigation {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
    padding: 25px;
    max-height: 75vh;
    overflow: auto;
    box-shadow: 0 15px 30px #073f5220;
  }
  body > header > #navigation.open,
  body > header > #navigation > a {
    display: block;
  }
  body > header > #navigation .dropdown > div {
    position: static;
    width: auto;
    box-shadow: none;
  }
  body > header > .menu {
    display: block;
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 8px;
    font-size: 27px;
    color: var(--navy);
  }
  body > header > .button {
    margin-left: 0;
  }
}

/* Keep the same compact controls even on pages with their own tour styles. */
@media (width <= 360px) {
  body > header:has(> #navigation) > .logo {
    width: 84px;
    flex: 0 0 84px;
    min-width: 0;
  }
  body > header:has(> #navigation) > .logo img {
    width: 84px;
    max-width: 100%;
    height: auto;
  }
  body > header:has(> #navigation) > .menu {
    width: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    padding: 5px;
  }
  body > header:has(> #navigation) > .button {
    min-height: 44px;
    padding: 12px 7px;
    font-size: 9px;
    gap: 4px;
  }
}

/* Match the accessible top-strip contrast on pages with bundled styles. */
body > .topline { background: #0076a6; color: #fff; }