/* The chapter links remain directly available above every scene. */
:root {
  --navigation-row: 56px;
  --navigation-height: calc(var(--navigation-row) + 8px + env(safe-area-inset-top));
  --logo-top: calc(var(--navigation-height) + 25px);
  scroll-padding-top: var(--navigation-height);
}
body { padding-top: var(--navigation-height); }

.site-navigation {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: var(--navigation-height);
  padding-top: env(safe-area-inset-top);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin;
  scrollbar-color: var(--rose) var(--plum);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
  background: var(--plum);
  color: var(--cream);
}
.site-navigation__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 40px);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left));
  list-style: none;
}
.site-navigation__links a {
  display: flex;
  align-items: center;
  min-height: var(--navigation-row);
  padding: 8px 0 6px;
  border-bottom: 2px solid transparent;
  color: inherit;
  font: 800 20px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.site-navigation__links a[aria-current="location"] { color: var(--rose); border-bottom-color: currentColor; }
.site-navigation__links a:hover { color: var(--rose); }
.site-navigation__links a:focus-visible { outline: 2px solid var(--rose); outline-offset: -4px; color: var(--rose); }

/* Sticky scenes use the space below the bar; their controls stay on screen. */
.scene,
.route.is-motion .route__stage,
.car.is-motion .car__stage,
.album.is-motion .album__stage {
  top: var(--navigation-height);
  height: calc(100svh - var(--navigation-height));
}
.team .team__stage, .car .car__stage { height: calc(100svh - var(--navigation-height)); }
.album.is-motion { height: calc(100svh - var(--navigation-height) + var(--album-distance, 0px)); }

@media (max-width: 700px) {
  :root { --navigation-row: 48px; --logo-top: calc(var(--navigation-height) + 20px); }
  .site-navigation__links { gap: 24px; }
  .site-navigation__links a { font-size: 18px; }
  .donations { padding-top: calc(20px + var(--logo-size) + 10px); }
}

@media (max-height: 500px) and (min-width: 701px) {
  :root { --logo-top: calc(var(--navigation-height) + 15px); }
}

:root:not(.has-js) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :root:not(.has-js) { scroll-behavior: auto; }
  .site-navigation__links a { transition: none; }
}