/* Shared Aperture chamber strip — lowercase, cyan hover, gold .here */
#ap-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  line-height: 1.2;
  pointer-events: auto;
}

#ap-nav a {
  color: var(--muted, #8a8880);
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.25s ease, color 0.25s ease;
}

#ap-nav a:hover {
  opacity: 0.9;
  color: var(--cyan, #4ecdc4);
}

#ap-nav a.here {
  color: var(--gold, #c9a84c);
  opacity: 0.75;
}

/* Fullscreen / instrument chambers: float top-left */
body > #ap-nav,
#ap-nav.ap-float {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  left: calc(0.85rem + env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 40;
  max-width: min(92vw, 42rem);
}

/* Document pages: sit in the brand row */
nav #ap-nav,
.topbar #ap-nav,
.nav #ap-nav {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  gap: 0.7rem 0.95rem;
}

nav #ap-nav a,
.topbar #ap-nav a,
.nav #ap-nav a {
  opacity: 0.7;
}

nav #ap-nav a.here,
.topbar #ap-nav a.here,
.nav #ap-nav a.here {
  opacity: 0.95;
}

/* Art fullscreen: keep strip present but quiet */
#ap-nav.ap-muted,
body.ap-art > #ap-nav {
  opacity: 0.38;
}
#ap-nav.ap-muted a,
body.ap-art > #ap-nav a {
  opacity: 0.55;
}
#ap-nav.ap-muted a:hover,
body.ap-art > #ap-nav a:hover {
  opacity: 0.95;
}
#ap-nav.ap-muted a.here,
body.ap-art > #ap-nav a.here {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  #ap-nav a { transition: none; }
}

@media (max-width: 720px) {
  body > #ap-nav,
  #ap-nav.ap-float {
    max-width: 58vw;
    gap: 0.5rem 0.65rem;
    font-size: 0.58rem;
  }
}