/* Shared navigation: one stable track and one moving selection across pages. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  view-transition-name: none;
  --navigation-clearance: 104px;
}
.site-header.frame {
  min-height: 104px;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(calc(100% - 2 * var(--frame-gutter)), 1280px);
}
.site-header .header-navigation {
  display: flex;
  justify-content: flex-end;
}
.site-header .brand-logo {
  width: 164px;
}
.site-header .main-nav {
  --nav-index: 0;
  --nav-width: 384px;
  --nav-step: calc((var(--nav-width) - 14px) / 4 + 2px);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
  width: var(--nav-width);
  padding: 4px;
  isolation: isolate;
  border-radius: 999px;
  view-transition-name: none;
}
.site-header .main-nav > a,
.home-reference .site-header .main-nav > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aaa9b1;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: none;
}
.site-header .main-nav > a:hover { color: #f5f5f7; }
.site-header .main-nav > a:focus-visible {
  outline-offset: 2px;
}
.nav-selection {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  background: #222128;
  pointer-events: none;
  clip-path: inset(4px calc(4px + (3 - var(--nav-index)) * var(--nav-step)) 4px calc(4px + var(--nav-index) * var(--nav-step)) round 999px);
  view-transition-name: none;
}
.nav-selection > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 10px 12px;
  color: #f5f5f7;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header.frame { min-height: 76px; }
  .site-header .brand-logo { width: 132px; }
  .site-header .main-nav {
    --nav-width: 312px;
  }
  .site-header .main-nav > a,
  .home-reference .site-header .main-nav > a {
    padding-inline: 8px;
    font-size: 12px;
  }
  .nav-selection > span { padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 760px),
  (max-width: 960px) and (max-height: 500px) and (pointer: coarse) {
  .site-header.frame { min-height: 76px; }
  .site-header .brand-logo { width: 142px; }
  .site-header .main-nav,
  .home-reference .site-header .main-nav {
    position: relative;
    inset: auto;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, 52px);
    width: 100%;
    gap: 2px;
    padding: 4px;
    border-radius: 20px;
    view-transition-name: none;
  }
  .site-header .main-nav > a,
  .home-reference .site-header .main-nav > a {
    justify-content: flex-start;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 16px;
  }
  html { --navigation-clearance: 76px; }
  .nav-selection {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, 52px);
    clip-path: inset(calc(4px + var(--nav-index) * 54px) 4px calc(4px + (3 - var(--nav-index)) * 54px) 4px round 14px);
  }
  .nav-selection > span {
    justify-content: flex-start;
    height: 52px;
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* One live document avoids transition textures and duplicate contexts. */
@view-transition { navigation: none; }
body > main { view-transition-name: none; }
.navigation-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .nav-selection { transition: none; }
}