:root {
  --bg:    #FFFFFF;
  --fg:    #1C1D22;
  --muted: #6B6C72;
  --gold:  #C8A24C;
  --line:  rgba(28, 29, 34, 0.12);
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --bar-h: 60px;
  --tabbar-h: calc(84px + env(safe-area-inset-bottom));  /* reserved for the always-on menu */
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.8s var(--ease), color 0.8s var(--ease);
}

/* De balk met vijf slots, de kop, het universum-paneel en het terugkeer-lipje
   komen uit /shared/moonmars-frame.css — hetzelfde onderdeel dat de andere drie
   MoonMars-sites dragen. Hieronder staat alleen wat van het museum zelf is. */

/* ---------- Stage / tray ---------- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: clamp(130px, 22vh, 210px);
  touch-action: none;
}
.tray {
  position: relative;
  width: min(84vw, calc(100vh - 230px), 720px);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  outline: none;
}

/* Deze twee stonden vóór de regel hierboven, en met gelijke specificiteit wint
   dan de laatste — dus de bredere schermen kregen nooit hun eigen maat. Nu
   staan ze erna, waar ze horen. */
/* Desktop / wider viewports: give the tray some breathing room at the top.
   Reserve enough vertical space in the tray sizing so it never grows into
   the top/bottom padding and stays clear of the edges. */
@media (min-width: 601px) {
  .stage { padding-top: clamp(40px, 8vh, 96px); }
  .tray { width: min(72vw, calc(100vh - 340px), 720px); }
}
/* Op een echt bureaublad hoort de lade te zweven, en dat deed hij niet: er zat
   vijftien pixel lucht boven en honderdzestig eronder, dus hij hing tegen de
   kop aan. De 62px is de hoogte van de balk daar; de stage ligt eronder omdat
   hij op inset:0 staat, dus zonder die optelling zit de lucht achter de balk.
   Nagemeten op 1009×959: 144 boven, 154 onder. */
@media (min-width: 900px) and (pointer: fine) {
  .stage {
    padding-top: calc(62px + clamp(40px, 7vh, 96px));
    padding-bottom: clamp(56px, 8vh, 110px);
  }
  .tray { width: min(64vw, calc(100vh - 360px), 660px); }
}
.tray__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Hard cut between layers — no flip, no fade. */
.tray__layer.is-active { opacity: 1; }
.tray:focus-visible { outline: 2px solid var(--gold); outline-offset: 14px; border-radius: 8px; }
/* Zie closePanel() in app.js: na het sluiten van een paneel krijgt de lade de
   focus terug, en daar hoort geen rand bij. */
.tray.is-quiet-focus:focus-visible { outline: none; }

/* ---------- Hotspots ---------- */
.hs-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hs {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hs:hover::before,
.hs:focus-visible::before {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 162, 76, 0.16);
}
/* Pill-shaped buttons baked into the tray (LINKEDIN / METAVERSE) */
.hs--pill, .hs--pill::before { border-radius: 999px; }
.hs:focus { outline: none; }
.hs__label {
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.hs:hover .hs__label,
.hs:focus-visible .hs__label { opacity: 1; }

/* ---------- Details panel ---------- */
.details {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease), background-color 0.8s var(--ease);
  z-index: 50;
  overflow-y: auto;
}
.details[aria-hidden="false"] { transform: translateX(0); }
.details__close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.details__close:hover { border-color: var(--gold); color: var(--gold); }
.details__inner { padding: clamp(64px, 12vh, 96px) clamp(24px, 6vw, 40px) calc(48px + var(--tabbar-h)); }
.details__inner h1 { font-size: clamp(24px, 5vw, 32px); font-weight: 500; line-height: 1.1; margin: 0 0 18px; }
.mission__img { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 22px; }
.details__inner .intro { font-size: 16px; line-height: 1.7; margin: 0 0 22px; }
.details__inner p { font-size: 15px; line-height: 1.7; color: var(--fg); opacity: 0.9; margin: 0 0 16px; }
.details__layers { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.details__layers li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.details__layers .n { color: var(--gold); min-width: 18px; }
.details__meta { margin-top: 24px !important; font-size: 13px !important; color: var(--gold) !important; letter-spacing: 0.03em; }

/* ---------- Partners list ---------- */
.partners {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.partner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.partner:hover { border-color: var(--gold); background: rgba(200, 162, 76, 0.06); }
.partner__logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  object-fit: cover;   /* for <img> logos */
}
.partner__mono {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: rgba(28, 29, 34, 0.05);
}
.partner__name {
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Profile sign-up form ---------- */
.gsi { display: flex; justify-content: center; margin: 8px 0 4px; }
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form { margin-top: 8px; }
.form__row { margin: 0 0 14px; }
.form__row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.form__row input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.form__row input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
/* ---------- Sign-in ----------------------------------------------------
   One MoonMars account, shared with moonmars.com — but this panel belongs to
   the museum: hairline rules, gold as the only accent. The
   identity is shared; the styling deliberately is not. */
.auth { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; }
.auth__btn {
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.auth__btn:hover { border-color: var(--gold); color: var(--gold); }
.auth__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.auth__email { display: flex; flex-direction: column; gap: 10px; }
.auth__email[hidden] { display: none; }
.auth__email input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.auth__email input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

/* Sign out is a way back out, not a call to action — a quiet link under the
   form rather than a second button competing with Save. */
.form__signout {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  margin: 18px 0 0;
  text-decoration: underline;
  cursor: pointer;
}
.form__signout:hover { color: var(--gold); }

/* Consent tick box. Sentence case and full size, not the shrunken grey small
   print that asks people to agree to something they can't read. */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.form__consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.form__consent a { color: inherit; text-decoration: underline; }
.form__consent a:hover { color: var(--gold); }
.form__consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.form__submit {
  font: inherit;
  font-size: 15px;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.form__submit:hover:not(:disabled) { background: var(--gold); }
.form__submit:disabled { opacity: 0.5; cursor: default; }
.form__note {
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  min-height: 18px;
}
.form__note.is-error { color: #b3261e !important; opacity: 1 !important; }
.form__note.is-ok { color: var(--gold) !important; opacity: 1 !important; }

@media (max-width: 380px) { .partners { grid-template-columns: 1fr; } }

/* ---------- Scrim ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 9, 0.55);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.scrim.is-on { opacity: 1; }

@media (max-width: 600px) {
  .details { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: opacity 0.2s linear, background-color 0.2s linear !important; }
}

/* Het paneel schuift onder de gedeelde kop door; de sluitknop moet daar vrij
   van blijven. */
.details__close { top: calc(var(--mm-topbar-h) + 12px); }

/* ---------- Travelling on ----------
   De kaarten die in de plaats komen van de twee ingesloten sites. Ze dragen de
   kleur van de bestemming als stip en streep, maar verder helemaal de opmaak
   van het museum: haarlijnen, veel wit, goud alleen als accent. Zo blijft het
   een kaart van ons over hen, en geen stukje van hun site in het onze. */
.travel { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.travel__head {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 14px;
}
.travel__card {
  display: block; text-decoration: none; color: var(--fg);
  border: 1px solid var(--line); border-left: 4px solid var(--dot);
  border-radius: 14px; padding: 15px 16px; margin-bottom: 10px;
  transition: border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.travel__card:hover { border-color: var(--dot); transform: translateY(-1px); }
.travel__card:active { transform: scale(0.99); }
.travel__name {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
}
.travel__name i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.travel__name b { margin-left: auto; color: var(--dot); font-size: 15px; }
.travel__text { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }