.section-navigation {
  position: fixed;
  inset: var(--zero);
  z-index: var(--z-section-nav);
  visibility: hidden;
  opacity: var(--zero);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
}

.section-navigation.is-visible {
  visibility: visible;
  opacity: var(--scale-base);
}

.section-nav-rail {
  position: absolute;
  top: var(--section-nav-rail-center);
  left: var(--section-nav-rail-left);
  transform: translateY(var(--direction-half));
  pointer-events: auto;
}

.section-nav-rail ol {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--section-nav-rail-gap);
  list-style: none;
}

.section-nav-rail a {
  position: relative;
  display: flex;
  min-width: var(--section-nav-rail-hit-width);
  min-height: var(--section-nav-rail-hit-height);
  align-items: center;
}

.section-nav-tick {
  display: block;
  width: var(--section-nav-tick-width);
  height: var(--section-nav-tick-height);
  background: var(--color-steel);
  transition: width var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.section-nav-rail a:is(:hover, :focus-visible) .section-nav-tick {
  width: var(--section-nav-tick-active-width);
  background: var(--color-steel-dark);
}

.section-nav-rail a.is-active .section-nav-tick {
  width: var(--section-nav-tick-active-width);
  background: var(--color-signal);
}

.section-nav-rail strong {
  position: absolute;
  left: var(--section-nav-label-left);
  display: grid;
  grid-template-columns: var(--grid-section-nav-label);
  width: max-content;
  min-width: var(--section-nav-label-min-width);
  max-width: var(--section-nav-label-max-width);
  align-items: center;
  gap: var(--space-3);
  padding: var(--section-nav-label-padding);
  border: var(--border-thin) solid var(--color-line-dark);
  border-radius: var(--radius-md);
  background: var(--color-ink-soft);
  box-shadow: var(--shadow-header);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--section-nav-label-line-height);
  white-space: nowrap;
  opacity: var(--zero);
  transform: translateX(calc(var(--space-2) * var(--direction-reverse)));
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.section-nav-rail strong small {
  color: var(--color-steel-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
}

.section-nav-rail strong > span {
  min-width: var(--zero);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-nav-rail a:is(:hover, :focus-visible) strong {
  opacity: var(--scale-base);
  transform: translateX(var(--zero));
}

.section-nav-mobile {
  display: none;
}

body.menu-open .section-navigation {
  visibility: hidden;
  opacity: var(--zero);
  pointer-events: none;
}

@media (max-width: 74rem) {
  .section-nav-rail {
    display: none;
  }

  .section-nav-mobile {
    position: absolute;
    top: var(--header-height);
    left: var(--half-size);
    display: grid;
    width: min(calc(var(--size-full) - (var(--gutter) * var(--section-nav-gutter-multiplier))), var(--section-nav-mobile-max-width));
    min-height: var(--section-nav-mobile-height);
    grid-template-columns: var(--grid-section-nav-mobile);
    align-items: center;
    gap: var(--space-3);
    padding: var(--section-nav-mobile-padding);
    border: var(--border-thin) solid var(--color-line-dark);
    border-radius: var(--radius-round);
    background: var(--color-ink-soft);
    box-shadow: var(--shadow-header);
    color: var(--color-paper);
    transform: translateX(var(--direction-half));
    pointer-events: auto;
  }

  .section-nav-mobile span {
    color: var(--color-steel-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .section-nav-mobile select {
    width: var(--size-full);
    min-width: var(--zero);
    height: var(--section-nav-mobile-control-height);
    padding: var(--zero) var(--section-nav-mobile-select-right) var(--zero) var(--space-2);
    overflow: hidden;
    border: var(--zero);
    outline: var(--zero);
    appearance: none;
    background: transparent;
    color: var(--color-paper);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .section-nav-mobile:focus-within {
    outline: var(--border-strong) solid var(--color-signal);
    outline-offset: var(--space-1);
  }

  .section-nav-mobile i {
    position: absolute;
    right: var(--section-nav-mobile-chevron-right);
    width: var(--section-nav-chevron-size);
    height: var(--section-nav-chevron-size);
    border-right: var(--border-strong) solid var(--color-signal);
    border-bottom: var(--border-strong) solid var(--color-signal);
    transform: rotate(var(--expanded-angle));
    pointer-events: none;
  }

  main [id] {
    scroll-margin-top: calc(var(--header-height) + var(--section-nav-mobile-height) + var(--section-nav-mobile-gap));
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-navigation,
  .section-nav-tick,
  .section-nav-rail strong {
    transition-duration: var(--motion-minimal);
  }
}