/* Shared navigation: equal side tracks keep tabs still across every page.
   Existing brand, cinematic motion and page content remain unchanged. */
body {
  --site-header-top: 24px;
  --site-header-height: 64px;
  --site-header-gutter: clamp(24px, 3.2vw, 52px);
}
body.content-page {
  padding-top: calc(var(--site-header-top) + var(--site-header-height));
}
body .topbar.topbar {
  position: fixed;
  top: var(--site-header-top);
  left: var(--site-header-gutter);
  right: var(--site-header-gutter);
  width: auto;
  height: var(--site-header-height);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body .topbar::before, body .topbar::after { display: none; }
body .topbar .brand { grid-column: 1; grid-row: 1; justify-self: start; gap: 10px; padding: 0; }
body .topbar .brand-icon { width: 44px; height: 44px; }
body .topbar .brand-copy { display: block; }
body .topbar .brand-copy strong { font-size: 14px; letter-spacing: .04em; }
body .topbar .brand-copy small, body .topbar .chapter-meter { display: none; }
body .topbar .site-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  height: 48px;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body .topbar .site-nav-link {
  box-sizing: border-box;
  width: 80px;
  min-width: 0;
  height: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #bacbdb;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 8px #02050c;
}
body .topbar .site-nav-link:hover,
body .topbar .site-nav-link[aria-current="page"] { color: #f4fbff; background: none; }
body .topbar .site-nav-link::after { left: 22px; right: 22px; bottom: 3px; height: 2px; background: #65e4ea; box-shadow: none; }
body .topbar .site-nav-link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
body .topbar .topbar-tools, body .topbar .header-action { grid-column: 3; grid-row: 1; justify-self: end; }
body .topbar .auto-play, body .topbar .header-action {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #bacbdb;
  white-space: nowrap;
}
body .topbar .auto-play:hover, body .topbar .header-action:hover { color: #f4fbff; background: none; transform: none; }
body .topbar .auto-play-icon { background: none; }
body .topbar a:focus-visible, body .topbar button:focus-visible { outline: 2px solid #65e4ea; outline-offset: 3px; }
@media (max-width: 900px) {
  body { --site-header-top: 14px; --site-header-height: 60px; --site-header-gutter: 16px; }
  body .topbar .header-action { display: none; }
  body .topbar .auto-play-label { display: none; }
  body .topbar .auto-play { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 560px) {
  body { --site-header-top: 8px; --site-header-height: 56px; --site-header-gutter: 8px; }
  body .topbar.topbar { gap: 4px; }
  body .topbar .brand-copy { display: none; }
  body .topbar .brand-icon { width: 38px; height: 38px; }
  body .topbar .site-nav { gap: 0; height: 44px; }
  body .topbar .site-nav-link { width: 68px; height: 44px; font-size: 13px; }
  body .topbar .site-nav-link::after { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body .topbar a, body .topbar button, body .topbar .site-nav-link::after { transition: none; }
}