/* ============================================================================
   page.css — de gewone pagina's van het museum: /tray, /mission, /partners.

   Waarom dit los staat van styles.css: dat bestand is gebouwd voor één vast
   scherm. Daar is .stage `position: fixed; inset: 0` en schoof de inhoud als
   paneel over de lade heen. Die drie zijn nu echte pagina's die gewoon
   scrollen, en dan is bijna niets uit dat bestand nog van toepassing — behalve
   de tokens, die hier herhaald worden zodat een pagina niet twee stylesheets
   nodig heeft waarvan hij er één grotendeels moet uitzetten.

   De klassen heten hetzelfde als in de oude panelen (.intro, .details__layers,
   .travel__card, .partners) zodat de bouwers in pages.js ongewijzigd konden
   verhuizen.
   ========================================================================== */

:root {
  --bg:    #FFFFFF;
  --fg:    #1C1D22;
  --muted: #6B6C72;
  --gold:  #C8A24C;
  --line:  rgba(28, 29, 34, 0.12);
  --surface: #F4F2EC;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto hoort altijd bij max-width:100%: zonder die regel blijft een
   height-attribuut uit de HTML gelden zodra het venster smaller is dan de foto,
   en wordt hij uitgerekt in plaats van kleiner. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── kop van de pagina ──────────────────────────────────────────────────── */
.lede { padding: 48px 0 8px; }
.eyebrow {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; display: flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ── de inhoud, gerenderd door pages.js ─────────────────────────────────── */
.page { padding: 0 0 80px; }
.page h1 {
  font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1.04;
  letter-spacing: .01em; text-transform: uppercase; margin: 14px 0 18px;
}
.page .intro { font-size: 1.05rem; line-height: 1.75; margin: 0 0 22px; }
.page p { font-size: .98rem; line-height: 1.8; color: var(--fg); opacity: .9; margin: 0 0 16px; }
.page a { color: var(--gold); }

.mission__img { border-radius: 16px; margin-bottom: 26px; width: 100%; }

.details__layers { list-style: none; padding: 0; margin: 28px 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: .9rem; }
.details__layers .n { color: var(--gold); min-width: 18px; }
.details__meta { margin-top: 22px; font-size: .82rem; color: var(--muted); }

/* ── partners ───────────────────────────────────────────────────────────── */
.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 .2s var(--ease), background-color .2s var(--ease);
}
.partner:hover { border-color: var(--gold); background: rgba(200, 162, 76, .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;
}
.partner__mono {
  display: grid; place-items: center; font-size: 13px; font-weight: 500;
  letter-spacing: .02em; color: var(--muted); background: rgba(28, 29, 34, .05);
}
.partner__name { font-size: 13px; line-height: 1.3; overflow: hidden; }
@media (max-width: 380px) { .partners { grid-template-columns: 1fr; } }

/* ── doorreizen naar een zusterdomein ───────────────────────────────────── */
.travel { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.travel__head { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.travel__card {
  display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--fg); margin-bottom: 10px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.travel__card:hover { border-color: var(--dot); transform: translateY(-1px); }
.travel__name { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.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); }

/* ── voettekst: de familie, in de geserveerde HTML ──────────────────────── */
footer.note { border-top: 1px solid var(--line); padding: 28px 0 60px; font-size: .82rem; color: var(--muted); }
footer.note a { color: var(--gold); }
footer.note p + p { margin-top: 10px; }