/* The current route is bold; the hit area stays still as the key face rises. */
html body:is(.landing-mode, .interior-mode) #header .site-nav > a {
  --nav-lift: 0px;
  --nav-key-fill: transparent;
  --nav-key-shadow: none;
  position: relative;
  overflow: visible;
  text-shadow: none;
  font-weight: 400;
  transition: color 180ms ease;
}
html body:is(.landing-mode, .interior-mode) #header .site-nav > a[aria-current="page"] {
  font-weight: 700;
}
html body:is(.landing-mode, .interior-mode) #header .site-nav-label {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  border-radius: 4px;
  background: var(--nav-key-fill);
  box-shadow: var(--nav-key-shadow);
  transform: translateY(var(--nav-lift));
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1), background-color 180ms ease, box-shadow 180ms ease;
}
html body:is(.landing-mode, .interior-mode) #header .site-nav-label::before,
html body:is(.landing-mode, .interior-mode) #header .site-nav-label::after {
  content: none;
}

/* Keyboard users receive the same feedback, with the existing focus outline. */
html body:is(.landing-mode, .interior-mode) #header .site-nav > a:focus-visible {
  --nav-lift: -2px;
  --nav-key-fill: rgb(255 255 255 / 2%);
  --nav-key-shadow: 0 3px 5px rgb(0 0 0 / 14%);
  color: #fff;
  outline-color: rgb(255 255 255 / 50%);
}
@media (hover: hover) and (pointer: fine) {
  html body:is(.landing-mode, .interior-mode) #header .site-nav > a:hover {
    --nav-lift: -2px;
    --nav-key-fill: rgb(255 255 255 / 2%);
    --nav-key-shadow: 0 3px 5px rgb(0 0 0 / 14%);
    color: #fff;
  }
}
html body:is(.landing-mode, .interior-mode) #header .site-nav > a:active {
  --nav-lift: 0px;
  --nav-key-fill: rgb(255 255 255 / 1%);
  --nav-key-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  html body:is(.landing-mode, .interior-mode) #header .site-nav-label {
    transform: none;
    transition: none;
  }
}