:root {
  --nav-rail-inline-start: max(.7rem, env(safe-area-inset-left));
  --nav-rail-inline-end: max(.7rem, env(safe-area-inset-right));
  --nav-rail-height: 64px;
  --nav-drawer-top: 4.75rem;
}

html[dir="rtl"] {
  --nav-rail-inline-start: max(.7rem, env(safe-area-inset-right));
  --nav-rail-inline-end: max(.7rem, env(safe-area-inset-left));
}

:where(
  #threshold,
  #universe,
  #observatory,
  #living-world,
  #making,
  #creator,
  #routes,
  #art-title,
  #process-title
) {
  scroll-margin-block-start: calc(var(--nav-rail-height) + 2.5rem);
}

.is-anchor-navigation .scene {
  content-visibility: visible;
}

.site-header,
.site-header.is-compact,
body[data-theme="light"][data-colour-vision="standard"] .site-header,
body[data-theme="light"][data-colour-vision="standard"] .site-header.is-compact {
  position: fixed;
  z-index: 103;
  inset-block: .65rem auto;
  inset-inline: var(--nav-rail-inline-start) var(--nav-rail-inline-end);
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: auto;
  block-size: var(--nav-rail-height);
  min-block-size: var(--nav-rail-height);
  max-block-size: var(--nav-rail-height);
  padding: .4rem .75rem;
  border: 1px solid rgb(255 142 76 / .24);
  background:
    linear-gradient(105deg, rgb(255 110 39 / .1), transparent 24%),
    radial-gradient(circle at 78% -50%, rgb(59 180 202 / .12), transparent 25rem),
    rgb(8 7 6 / .88);
  box-shadow:
    inset 0 1px rgb(255 238 220 / .09),
    0 .8rem 2.8rem rgb(0 0 0 / .32);
  clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, .8rem 100%, 0 calc(100% - .8rem));
  backdrop-filter: blur(14px) saturate(1.08);
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.site-header::before,
.site-header::after,
body[data-theme="light"][data-colour-vision="standard"] .site-header::before,
body[data-theme="light"][data-colour-vision="standard"] .site-header::after {
  pointer-events: none;
}

.site-brand {
  position: relative;
  z-index: 1;
}

.site-emblem-frame {
  display: grid;
  flex: 0 0 3rem;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  overflow: visible;
}

.site-brand img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  scale: 1;
  transform-origin: center;
}

.site-brand small {
  max-inline-size: 22rem;
}

.locale-state-copy {
  min-inline-size: 0;
}

.locale-state-copy small {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.main-navigation {
  position: fixed;
  z-index: 104;
  inset-block: .65rem auto;
  inset-inline: auto calc(var(--nav-rail-inline-end) + .7rem);
  display: flex;
  align-items: center;
  gap: clamp(.62rem, 1.15vw, 1.35rem);
  max-inline-size: calc(100vw - clamp(19rem, 28vw, 27rem));
  min-block-size: var(--nav-rail-height);
  padding-inline: .45rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.main-navigation > a {
  flex: 0 0 auto;
  background: transparent;
  white-space: nowrap;
}

.main-navigation > :is(.nav-socials, .nav-destinations, .locale-state) {
  flex: 0 0 auto;
}

.menu-button,
.menu-backdrop {
  display: none;
}

body[data-theme="light"][data-colour-vision="standard"] .site-header,
body[data-theme="light"][data-colour-vision="standard"] .site-header.is-compact {
  border-color: rgb(133 68 34 / .28);
  background:
    linear-gradient(105deg, rgb(255 109 39 / .12), transparent 24%),
    radial-gradient(circle at 78% -50%, rgb(58 170 191 / .12), transparent 25rem),
    rgb(239 220 197 / .86);
  box-shadow:
    inset 0 1px rgb(255 253 247 / .72),
    0 .8rem 2.8rem rgb(72 37 20 / .14);
}

body[data-theme="light"][data-colour-vision="standard"] .main-navigation,
body[data-theme="light"][data-colour-vision="standard"] .main-navigation > a {
  color: #56311f;
}

body[data-theme="light"][data-colour-vision="standard"] .solar-map-controls button[data-solar-projection-toggle] {
  border-color: rgb(72 172 193 / .64);
  background:
    linear-gradient(115deg, rgb(68 181 204 / .13), transparent 52%),
    linear-gradient(180deg, rgb(255 249 239 / .94), rgb(229 207 181 / .94));
  box-shadow:
    inset 0 1px rgb(255 255 255 / .76),
    0 0 1.2rem rgb(70 181 204 / .13);
  color: #492817;
}

body[data-theme="light"][data-colour-vision="standard"] .solar-map-controls button[data-solar-projection-toggle] :is(strong, small) {
  color: inherit;
}

@media (max-width: 1279px) {
  :root {
    --nav-rail-height: 58px;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-header,
  .site-header.is-compact,
  body[data-theme="light"][data-colour-vision="standard"] .site-header,
  body[data-theme="light"][data-colour-vision="standard"] .site-header.is-compact {
    z-index: 123;
    inset-block-start: .5rem;
    padding: .35rem .55rem .35rem .7rem;
  }

  .site-brand img {
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
  }

  .site-brand small {
    display: none;
  }

  .menu-button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-block-size: 44px;
    padding: .45rem .65rem;
    border: 1px solid rgb(255 133 65 / .32);
    background: rgb(12 9 7 / .12);
    color: inherit;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - .42rem) 0, 100% .42rem, 100% 100%, .42rem 100%, 0 calc(100% - .42rem));
  }

  .menu-button i,
  .menu-button i::before,
  .menu-button i::after {
    display: block;
    inline-size: 1.2rem;
    block-size: 1px;
    background: currentColor;
    content: "";
    transition:
      rotate .22s ease,
      translate .22s ease,
      background-color .22s ease;
  }

  .menu-button i::before {
    translate: 0 -.35rem;
  }

  .menu-button i::after {
    translate: 0 .3rem;
  }

  .menu-button[aria-expanded="true"] i {
    background: transparent;
  }

  .menu-button[aria-expanded="true"] i::before {
    rotate: 45deg;
    translate: 0;
  }

  .menu-button[aria-expanded="true"] i::after {
    rotate: -45deg;
    translate: 0 -.05rem;
  }

  .menu-backdrop {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: block;
    inline-size: auto;
    block-size: 100dvh;
    padding: 0;
    border: 0;
    background: rgb(7 5 4 / .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      visibility 0s linear .22s,
      opacity .2s ease;
  }

  body.nav-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .main-navigation {
    counter-reset: compact-nav;
    position: fixed;
    z-index: 122;
    inset-block: var(--nav-drawer-top) auto;
    inset-inline: auto max(.65rem, var(--nav-rail-inline-end));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    inline-size: min(24rem, calc(100vw - 1.3rem));
    min-block-size: 0;
    block-size: auto;
    max-block-size: none;
    overflow: visible;
    padding: .72rem;
    border: 1px solid rgb(255 137 75 / .38);
    background:
      linear-gradient(135deg, rgb(255 110 39 / .1), transparent 30%),
      radial-gradient(circle at 84% 8%, rgb(54 176 202 / .12), transparent 14rem),
      linear-gradient(145deg, rgb(24 16 12 / .98), rgb(8 7 6 / .98));
    box-shadow:
      inset 0 1px rgb(255 227 205 / .11),
      0 1.2rem 4rem rgb(0 0 0 / .48);
    clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% calc(100% - .65rem), calc(100% - .65rem) 100%, 0 100%);
    color: #f7e9db;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -.75rem, 0);
    transition:
      visibility 0s linear .26s,
      opacity .18s ease,
      transform .26s cubic-bezier(.2, .78, .2, 1);
  }

  html[dir="rtl"] .main-navigation {
    transform: translate3d(0, -.75rem, 0);
  }

  html[dir="rtl"] .main-navigation.is-open {
    transform: translate3d(0, 0, 0);
  }

  .main-navigation.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  body.nav-open :is(
    .experience-controls,
    .privacy-reopen,
    .audio-preview-tooltip,
    .privacy-banner
  ) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .main-navigation > a {
    counter-increment: compact-nav;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    place-items: center start;
    gap: .58rem;
    min-block-size: 44px;
    padding: .65rem .7rem;
    border: 1px solid rgb(255 144 87 / .14);
    background: linear-gradient(110deg, rgb(255 118 47 / .09), transparent 65%);
    color: #f6e8da;
    font-size: .62rem;
    text-align: start;
  }

  .main-navigation > a::before {
    color: #ff8042;
    content: "0" counter(compact-nav);
    font-family: "Axtlan Detector", monospace;
    font-size: .625rem;
  }

  .main-navigation > a::after {
    display: none;
  }

  .main-navigation > a:is(:hover, :focus-visible) {
    border-color: rgb(255 130 67 / .58);
    background: linear-gradient(110deg, rgb(255 118 47 / .23), transparent 72%);
    color: #fff9f2;
  }

  .nav-socials,
  .nav-destinations {
    grid-column: 1 / -1;
    min-block-size: 44px;
    border: 1px solid rgb(255 144 87 / .12);
    background: rgb(255 244 233 / .025);
  }

  .nav-socials {
    justify-content: start;
    gap: .4rem;
    padding: .5rem;
    opacity: 1;
    translate: 0;
    animation: none;
  }

  .nav-socials a {
    inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    opacity: 1;
    translate: 0;
  }

  .nav-destinations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    padding: .5rem;
  }

  .nav-destinations a {
    min-block-size: 44px;
    padding: .55rem;
    text-align: center;
  }

  .locale-state {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-block-size: 44px;
  }

  body[data-theme="light"][data-colour-vision="standard"] .main-navigation {
    border-color: rgb(132 67 33 / .4);
    background:
      linear-gradient(135deg, rgb(255 110 39 / .12), transparent 30%),
      radial-gradient(circle at 84% 8%, rgb(54 176 202 / .12), transparent 14rem),
      linear-gradient(145deg, rgb(249 238 224 / .985), rgb(222 198 169 / .985));
    color: #482718;
  }

  body[data-theme="light"][data-colour-vision="standard"] .main-navigation > a,
  body[data-theme="light"][data-colour-vision="standard"] .nav-destinations a {
    border-color: rgb(121 61 31 / .18);
    background: linear-gradient(110deg, rgb(194 75 27 / .1), transparent 70%);
    color: #4c2919;
  }

  body[data-theme="light"][data-colour-vision="standard"] :is(.nav-socials, .nav-destinations) {
    border-color: rgb(121 61 31 / .16);
    background: rgb(255 252 246 / .28);
  }

  body[data-theme="light"][data-colour-vision="standard"] .menu-button {
    border-color: rgb(127 63 31 / .3);
    background: rgb(255 252 246 / .24);
    color: #4a2818;
  }
}

@media (max-width: 620px) {
  :root {
    --nav-drawer-top: 4.45rem;
  }

  .site-header,
  .site-header.is-compact,
  body[data-theme="light"][data-colour-vision="standard"] .site-header,
  body[data-theme="light"][data-colour-vision="standard"] .site-header.is-compact {
    inset-block-start: .4rem;
    inset-inline: max(.4rem, env(safe-area-inset-left)) max(.4rem, env(safe-area-inset-right));
  }

  .site-brand strong {
    font-size: .78rem;
    letter-spacing: .16em;
  }

  .menu-button > span {
    display: none;
  }

  .main-navigation {
    inset-block-start: var(--nav-drawer-top);
    inset-block-end: auto;
    inset-inline-start: max(.4rem, var(--nav-rail-inline-start));
    inset-inline-end: max(.4rem, var(--nav-rail-inline-end));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .32rem;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
    box-sizing: border-box;
    padding: .52rem;
  }

  .main-navigation > a {
    gap: .38rem;
    padding: .5rem;
    font-size: .6875rem;
  }

  .nav-socials,
  .nav-destinations {
    padding: .32rem;
  }
}

@media (max-width: 1279px) and (max-height: 520px) {
  .main-navigation {
    inset-block-start: var(--nav-drawer-top);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    inline-size: min(46rem, calc(100vw - 1rem));
    padding: .5rem;
  }

  .main-navigation > a {
    min-block-size: 44px;
    padding: .42rem .5rem;
  }

  .nav-socials,
  .nav-destinations,
  .locale-state {
    grid-column: auto;
    min-block-size: 44px;
  }

  .nav-socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: center;
  }

  .nav-socials a {
    inline-size: 44px;
    min-block-size: 44px;
  }

  .nav-destinations {
    padding: 0;
  }

  .nav-destinations a {
    min-block-size: 44px;
    padding: .38rem;
  }

  .locale-state {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-backdrop,
  .main-navigation {
    transition-duration: .01ms;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .site-header.is-compact {
    background-color: rgb(8 7 6 / .97);
  }

  body[data-theme="light"][data-colour-vision="standard"] .site-header,
  body[data-theme="light"][data-colour-vision="standard"] .site-header.is-compact {
    background-color: rgb(239 220 197 / .98);
  }
}