:root { --site-header-height: 64px; }
.site-navigation { position: fixed; z-index: 8; inset: 0 0 auto; height: var(--site-header-height); min-height: var(--site-header-height); pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; }
.site-brand { pointer-events: auto; }
.kd-wordmark { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.kd-wordmark img { display: block; width: 120px; height: auto; }
.footer-motto i { display: inline-block; width: 9px; height: 9px; background: #f59b37; }
.site-navigation-actions { display: flex; align-items: center; gap: 16px; }
.site-navigation-actions .hud-right { position: static; flex: none; gap: 14px; }
.site-brand img { width: 100px; }
.site-navigation-actions .lang { font-size: 17px; }
.site-navigation-actions .lang button { min-height: 44px; padding: 5px 7px; }
.explore-disclosure { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); pointer-events: auto; }
.hud-right .explore-disclosure { position: relative; inset: auto; transform: none; }
.explore-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: #07120df2; color: #def4e4; border: 1px solid #c4ad64; box-shadow: inset 0 0 0 2px #182d20; cursor: pointer; font: 500 13px/1.3 var(--f-mono); }
.explore-trigger:hover, .explore-trigger[aria-expanded=true] { background: #163525; border-color: #f2ca6e; }
.explore-caret { font: 16px/1 var(--f-mono); }
.explore-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 330px; max-width: calc(100vw - 24px); max-height: min(500px, calc(100svh - var(--site-header-height) - 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: #03160ffb; border: 2px solid #9fc9b5; outline: 1px solid #3b6755; outline-offset: 4px; box-shadow: inset 0 0 0 3px #12362a, 7px 7px 0 #102c20, 0 14px 40px #0009; scrollbar-color: #739c80 #10271a; scrollbar-width: thin; }
.explore-menu::before { content: ''; position: absolute; width: 8px; height: 8px; top: 6px; left: 6px; background: #ffb343; box-shadow: inset 2px 2px #ffe0a0; pointer-events: none; }
.explore-heading { display: flex; align-items: center; justify-content: space-between; }
.explore-heading p { margin: 0; color: #b7f5d8; font: 700 28px/1.15 var(--f-pixel); }
.explore-close { width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; color: #d5e6dd; background: transparent; cursor: pointer; font: 27px/1 var(--f-mono); }
.explore-close:hover { background: #214331; }
.explore-menu .explore-prompt { margin: 7px 0 16px; color: #d2e7dc; font: 11px/1.5 var(--f-mono); }
.explore-grid { display: grid; grid-template-columns: 1fr; border: 1px solid #4c7962; }
.explore-grid a { min-height: 44px; display: grid; grid-template-columns: 28px 1fr 18px; gap: 9px; align-items: center; color: #e6f2eb; padding: 9px 12px; font: 500 13px/1.5 var(--f-mono); text-decoration: none; }
.explore-grid a + a { border-top: 1px solid #4c7962; }
.explore-number { color: #b5efcf; font-weight: 700; }
.explore-arrow { font-size: 20px; }
.explore-grid a[aria-current] .explore-number { color: inherit; }
.explore-grid a:hover { background: #183a28; }
.explore-grid a[aria-current] { background: #afdcbc; color: #0c2618; }
.site-language { display: flex; gap: 3px; pointer-events: auto; }
.site-language button { min-height: 44px; min-width: 38px; padding: 5px 7px; background: transparent; border: 1px solid transparent; color: #a8c2b0; font: 12px var(--f-mono); cursor: pointer; }
.site-language button[aria-pressed=true] { color: #d0efda; border-color: #769b83; }
body.atlas-visible .site-navigation { background: #07110c; border-bottom: 1px solid #284e37; pointer-events: auto; }
body.atlas-visible .explore-disclosure { position: relative; inset: auto; transform: none; }
body:not(.atlas-visible) .hud-hint { top: 77px; }
/* One language control in the vertical header replaces repeated local toggles. */
.atlas-lang, .crew-lang, .collaboration-lang, .events-lang, .library-lang { display: none; }
.community-atlas, .community-crew, .community-collaboration, .community-events { padding-top: max(88px, 6vw); }
.community-atlas { padding-top: 84px; }
@media (max-width: 760px) {
  :root { --site-header-height: 96px; }
  .hud-right { display: grid; grid-template-areas: 'laptop language' 'sound explore'; column-gap: 8px; row-gap: 2px; }
  .hud-right .lang { grid-area: language; justify-self: end; }
  .hud-right .explore-disclosure { grid-area: explore; }
  .hud-right .hud-sound { grid-area: sound; }
  .hud-right .hud-laptop { grid-area: laptop; }
  #hud .music-popover { top: 101px; }
  body:not(.atlas-visible) .hud-hint { top: 101px; bottom: auto; font-size: 12px; }
  .site-navigation { padding: 4px 12px; }
  .site-brand img { width: 84px; }
  .site-navigation-actions { gap: 8px; }
  .site-navigation-actions .hud-right { gap: 0 8px; }
  .site-navigation-actions .lang { font-size: 15px; }
  .site-navigation-actions .lang button { padding: 5px; }
  .explore-trigger { font-size: 12px; padding: 8px 10px; gap: 7px; }
  .explore-disclosure { top: 60px; left: auto; right: 12px; transform: none; }
  .explore-menu { position: fixed; top: calc(var(--site-header-height) + 8px); right: 12px; width: min(336px, calc(100vw - 24px)); max-height: calc(100svh - var(--site-header-height) - 20px); padding: 12px; }
  body:not(.atlas-visible) .explore-menu { top: calc(var(--site-header-height) + 8px); max-height: calc(100svh - var(--site-header-height) - 20px); }
  .explore-grid a { padding: 9px 7px; font-size: 12px; }
  .site-language button { min-width: 33px; padding: 5px; }
  .community-atlas, .community-crew, .community-collaboration, .community-events { padding-top: 112px; }
}
@media (max-width: 360px) {
  .site-navigation-actions { gap: 6px; }
  .explore-trigger { font-size: 11px; gap: 5px; padding-inline: 8px; }
  .site-language button { min-width: 29px; }
}

.site-quick-links { display: none; gap: 24px; align-items: center; }
.site-quick-links a { color: #dceee4; font: 12px/1.5 var(--f-mono); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.site-quick-links a:hover { color: #b5f1cf; text-decoration: underline; text-underline-offset: 5px; }
body.atlas-visible .site-quick-links { display: flex; }
.explore-menu { background: linear-gradient(#ffb343,#ffb343) right 6px top 6px/8px 8px no-repeat, linear-gradient(#ffb343,#ffb343) left 6px bottom 6px/8px 8px no-repeat, linear-gradient(#ffb343,#ffb343) right 6px bottom 6px/8px 8px no-repeat, #03160ffb; }
@media (max-width: 1100px) { body.atlas-visible .site-quick-links { display: none; } }
/* Short landscape screens already have two clear opening actions. */
@media (max-height: 600px) { body:not(.atlas-visible) .hud-hint { display: none; } }