/* Shared navigation, loaded after scene or editorial styles on every document. */
.site-header.site-header,
.studio-header.studio-header,
.information-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  position: relative;
  z-index: 40;
  overflow: visible;
}
.site-header.site-header {
  position: fixed;
  inset: 0 0 auto;
  padding: 20px clamp(16px, 4vw, 64px) !important;
  background: linear-gradient(#081821f5, #081821ed);
}
.gallery-page .site-header.site-header {
  position: sticky;
  background: #081821f2;
}
.site-header.site-header > .site-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
}
.site-header .site-actions button,
.site-header .site-actions > a {
  min-height: 44px;
}
.site-header.site-header:has(.site-directory[open]),
.studio-header:has(.site-directory[open]),
.information-header:has(.site-directory[open]) {
  z-index: 80;
}
.site-header .studio-identity {
  min-width: 0;
}
.site-header .studio-gallery-shortcut {
  display: none;
}
.site-navigation.site-navigation {
  --nav-ink: #f6f0dd;
  --nav-muted: #c0cfca;
  --nav-gold: #eed49a;
  --nav-line: #d7b77566;
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--nav-line);
  color: var(--nav-ink);
  font:
    500 12px/1.45 Manrope,
    system-ui,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
.site-navigation *,
.site-navigation *::before,
.site-navigation *::after {
  box-sizing: border-box;
}
.site-navigation .site-primary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
}
.site-navigation.site-navigation a {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  color: var(--nav-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  text-decoration: none;
  letter-spacing: 0;
  white-space: normal;
}
.site-navigation.site-navigation a:hover,
.site-navigation.site-navigation a[aria-current="page"] {
  color: var(--nav-gold);
  border-color: var(--nav-line);
  background: #d7b77514;
  text-decoration: none;
}
.site-navigation.site-navigation a[aria-current="page"] {
  box-shadow: inset 0 -2px var(--nav-gold);
}
.site-navigation a:focus-visible,
.site-directory > summary:focus-visible {
  outline: 2px solid var(--nav-gold);
  outline-offset: 3px;
}
.site-directory {
  position: static;
  flex: 0 0 auto;
  display: block;
}
.site-directory > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--nav-ink);
  background: #0b222d;
  border: 1px solid var(--nav-line);
  border-radius: 3px;
  font: inherit;
  list-style: none;
  cursor: pointer;
}
.site-directory > summary::-webkit-details-marker {
  display: none;
}
.site-directory-icon {
  color: var(--nav-gold);
  font-size: 20px;
  line-height: 1;
}
.site-directory[open] > summary {
  border-color: var(--nav-gold);
}
.site-directory[open] .site-directory-icon {
  transform: rotate(45deg);
}
.site-directory-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  width: min(860px, 100%);
  max-height: calc(100svh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px;
  border: 1px solid var(--nav-line);
  border-radius: 5px;
  color: #f6f0dd;
  background: #0b222d;
  box-shadow: 0 22px 70px #0009;
}
.site-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--nav-line);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.site-directory-intro > span {
  color: var(--nav-muted);
  font-size: 12px;
}
.site-navigation.site-navigation .site-directory-intro a {
  color: var(--nav-gold);
  font-size: 12px;
}
.site-directory-groups {
  display: grid;
  grid-template-columns: 1fr 1.3fr 0.8fr;
  gap: 22px;
}
.site-directory-group h2 {
  margin: 0 0 10px;
  color: var(--nav-gold);
  font:
    600 10px/1.6 Manrope,
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.site-directory-group ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-directory-group li {
  margin: 0;
  padding: 0;
}
.site-navigation.site-navigation .site-directory-group a {
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.studio-header .site-navigation {
  --nav-ink: #173c32;
  --nav-gold: #654c25;
  --nav-line: #173c3238;
}
.studio-header .site-directory {
  --nav-ink: #f6f0dd;
  --nav-gold: #eed49a;
  --nav-line: #d7b77566;
}
.studio-header > .nav-contact {
  align-self: center;
  font-size: 12px;
}
.information-header {
  max-width: 1200px;
  margin: auto;
  padding: 24px;
}
.information-wordmark {
  font:
    600 24px/1.05 Georgia,
    serif;
  color: #f6f0dd;
  text-decoration: none;
}
.information-wordmark small {
  display: block;
  font:
    9px/1.5 system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
}
.information-contact {
  font-size: 12px;
  color: #eed49a;
}
.site-skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 500;
  padding: 12px;
  background: #0b222d;
  color: #f6f0dd;
}
.site-skip-link:focus {
  top: 12px;
}
#city-caption,
#chamber-caption,
#title-frame {
  top: 182px;
}
@media (max-width: 700px) {
  .site-header.site-header {
    padding: 16px !important;
    gap: 10px;
  }
  .site-header .studio-brand .brand-name {
    font-size: 22px;
  }
  .site-header .studio-brand small {
    font-size: 8px;
  }
  .site-header.site-header > .site-actions {
    gap: 8px;
    font-size: 11px;
  }
  .site-header #btn-explore,
  .site-header #motion-label {
    display: none;
  }
  .site-header #btn-journal,
  .site-header #btn-playbill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 11px;
  }
  .site-header #btn-motion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0;
  }
  .site-navigation.site-navigation {
    gap: 4px;
  }
  .site-navigation.site-navigation
    [data-primary-route]:not([data-compact-route]) {
    display: none;
  }
  .site-navigation.site-navigation a {
    padding: 8px;
  }
  .site-directory > summary {
    padding: 8px 10px;
    gap: 10px;
  }
  .site-directory-panel {
    padding: 16px;
    max-height: calc(100svh - 176px);
  }
  .site-directory-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .site-directory-groups {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .site-directory-group ul {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .site-directory-group h2 {
    margin-bottom: 6px;
  }
  .information-header {
    padding: 16px;
    gap: 12px;
  }
  .information-wordmark {
    font-size: 21px;
  }
  .information-contact,
  .studio-header > .nav-contact {
    max-width: 110px;
    font-size: 11px;
    text-align: right;
  }
  #city-caption,
  #chamber-caption,
  #title-frame {
    top: 166px;
  }
}
@media (max-width: 360px) {
  .site-navigation.site-navigation a {
    padding-inline: 6px;
    font-size: 11px;
  }
  .site-directory > summary {
    padding-inline: 8px;
    gap: 8px;
  }
}
@media print {
  .site-navigation,
  .site-actions,
  .information-contact,
  .site-skip-link {
    display: none !important;
  }
}

/* Leave room for the shared header without covering the scene's controls. */
#sky-encounter {
  top: 180px;
}
@media (min-width: 901px) {
  #title-frame {
    max-width: 350px;
  }
  #title-frame #chapter-title {
    font-size: clamp(44px, 4vw, 58px);
  }
  #title-frame .story-invitation {
    min-height: 32px;
  }
  #invitation-note {
    margin-bottom: 12px;
  }
  #invitation-panel {
    top: max(44%, 325px);
  }
}
@media (max-width: 700px) {
  #sky-encounter {
    top: 160px;
  }
}
/* Keyboard skip links must remain above the shared header and open directory. */
.skip-link {
  z-index: 500;
}
/* Native page changes must accept input immediately; scene animation is independent. */
@view-transition {
  navigation: none;
}
/* Closed menus must not retain a hit-testable layout during native disclosure updates. */
.site-directory:not([open]) > .site-directory-panel {
  display: none;
}

/* Keep the world destinations easy to find on large, short browser windows. */
.site-header .site-primary-links > a {
  background: #0b222ddd;
  border-color: #d7b77555;
  font-weight: 600;
}
.site-header .site-primary-links {
  gap: 6px;
}
.site-header .site-directory > summary {
  background: #d7b775;
  color: #081821;
  font-weight: 700;
}
.site-header .site-directory-icon {
  color: #081821;
}
@media (min-width: 1100px) {
  .site-header .site-primary-links > a,
  .site-header .site-directory > summary {
    font-size: 14px;
  }
}
@media (max-width: 700px) {
  .site-header .site-primary-links {
    gap: 2px;
  }
}
/* Short desktop windows still need room for the landing title and its actions. */
@media (min-width: 901px) and (max-height: 680px) {
  .site-header.site-header {
    padding-block: 12px !important;
    row-gap: 8px;
  }
  .site-header .studio-brand .brand-name {
    font-size: 20px;
  }
  .site-header .studio-brand small {
    font-size: 8px;
  }
  #app-root > main {
    padding-bottom: 24px;
  }
  #view-intro > p {
    margin-bottom: 20px;
  }
  #view-intro > h1 {
    margin-bottom: 16px;
  }
}