/* Site header below 1024px.
   The kit's menu button and its full-screen sheet are not used on this site, so the four section
   words stay visible in the bar instead of hiding behind a toggle.
   768-1023: one row, the name on the left line, the words ending on the right line.
   Below 768: two rows, the name (56px), then the words spread across the wrap (44px tap height),
   the first on the left line and the last on the right one. The header grows to 100px, and
   scroll-padding keeps an in-page jump (#finance) landing with the same 40px gap under the header
   as on a one-row bar. */

@media (max-width: 1023px) {
  .nav .nav__links { display: flex; flex: none; margin-left: auto; gap: 0; }
  .nav.nav--split .nav__actions { display: none; }
  .nav .nav__item { height: 100%; }
  .nav .nav__link { padding: 0 var(--s-2); }
  .nav .nav__link::before,
  .nav .nav__link[aria-current="page"]::after { left: var(--s-2); right: var(--s-2); }
  .nav .nav__item:last-child > .nav__link { padding-right: 0; }
  .nav .nav__item:last-child > .nav__link::before,
  .nav .nav__item:last-child > .nav__link[aria-current="page"]::after { right: 0; }
}

@media (max-width: 767px) {
  :root { --nav: 100px; }
  html { scroll-padding-top: calc(var(--nav) - 56px); }
  .nav .nav__bar { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px 44px; align-items: center; gap: 0; }
  .nav .nav__logo { grid-row: 1; justify-self: start; }
  .nav .nav__links { grid-row: 2; margin: 0; align-self: stretch; justify-content: space-between; }
  .nav .nav__link { height: 44px; padding: 0; font-size: clamp(13px, 3.9vw, 15px); }
  .nav .nav__link::before,
  .nav .nav__link[aria-current="page"]::after { left: 0; right: 0; bottom: 6px; }
}
/* 640-767: spread across the full wrap the words drift apart, so they sit together from the left line */
@media (min-width: 640px) and (max-width: 767px) {
  .nav .nav__links { justify-content: flex-start; gap: var(--s-7); }
}

/* 1024-1279: the split bar (words left, the name centred) has no room: "Experience" ran under the
   name at 1032 (iPad Pro). The name goes first on the left line, the words follow, the actions stay
   on the right line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav.nav--split .nav__bar { display: flex; }
  .nav.nav--split .nav__logo { order: -1; font-size: 22px; }
  .nav.nav--split .nav__links { flex: 1; }
}

/* the name is a link home in the header and the footer: a 44px tap height (its text was 20-22px tall) */
.nav__logo { min-height: 44px; }