/* R.O.B. Concepting — publieke merklaag, afgeleid van Stylesheet v2 (31 juli 2026). */
:root {
  --cream: #e8e4dc;
  --paper: #f4f1ec;
  --paper-aging: #d5cfc6;
  --paper-old: #b9b2a8;
  --navy: #001a4d;
  --purple: #001a4d;
  --ink: #001a4d;
  --dark: #0d0d1a;
  --screen: #0e1525;
  --muted: #7a6e85;
  --cyan: #0fa8cb;
  --red: #e8391e;
  --white: #f4f1ec;
  --line: rgba(0, 26, 77, 0.12);
  --border: rgba(0, 26, 77, 0.12);
  --rule: rgba(0, 26, 77, 0.08);
}

html,
body,
button,
input,
textarea,
select {
  font-family: "DM Sans", Arial, sans-serif;
}

.rob-lockup {
  display: block;
  width: auto;
  height: 40px;
}

.rob-lockup-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.rob-meta {
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Ook metadata haalt op licht de vaste 4,5:1-contrastvloer. */
.serie .lbl,
.ingang .lbl,
.scan-cta .lbl,
.toc-title,
.toc .num,
.sec-label,
.levend b,
.b-datum,
.b-grond-kop,
.b-merk,
.reeksnav-kop,
.v-nr,
.v-grond-kop,
.bw-id {
  color: var(--ink);
}

.b-bron,
.v-bron,
.mee a,
.wp-mee a {
  color: var(--ink);
  text-decoration-color: var(--cyan);
}

@media (max-width: 520px) {
  .rob-lockup {
    height: 34px;
  }
}

/* ── Ritme: donker openen, licht lezen, donker sluiten ──────────────────────────
   Vastgesteld 2026-07-31. Elke pagina sluit op een donker vlak, zoals hij opent.
   Het is dezelfde schaal, anders verdeeld — het kost niets aan corporate karakter
   en het is de grootste sprong in levendigheid die er binnen dit palet te maken is.

   HIER EN NIET PER PAGINA. Deze regels stonden in twee bouwstappen apart, met
   dezelfde waarden. Bij de derde pagina zou dat drie exemplaren zijn geweest, en
   die lopen uiteen — dat is deze week al gebeurd met de hairline.

   ALTIJD EEN <div>, NOOIT EEN <section>. Een <footer> binnen een sectie-element
   verliest zijn contentinfo-landmark voor schermlezers. Die les is één keer betaald.

   Op donker mag cyaan wél tekst zijn: 6,9:1. De cream-tinten zijn nagerekend —
   0,82 geeft 10,3:1 en 0,58 geeft 5,6:1, allebei boven de vloer van 4,5:1. */
.afsluiter {
  background: var(--dark);
  margin-top: 46px;
  padding-top: 40px;
}
.afsluiter .mee,
.afsluiter .wp-mee {
  color: rgba(232, 228, 220, 0.82);
}
.afsluiter .mee a,
.afsluiter .wp-mee a {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.afsluiter .foot,
.afsluiter footer {
  color: rgba(232, 228, 220, 0.58);
  padding-bottom: 46px;
  border-top: 0;
}
.afsluiter .foot a,
.afsluiter footer a {
  color: rgba(232, 228, 220, 0.58);
}
.afsluiter .foot a:hover,
.afsluiter footer a:hover {
  color: var(--cyan);
}

/* De band loopt over de volle breedte; de INHOUD erbinnen wordt begrensd. Zonder deze
   regel begon de tekst van een losstaande voet tegen de rand van het scherm — dat gebeurde
   op de bewijspaspoorten en de board-brief, waar de voet geen eigen kolom had. Pagina's die
   hun voet al in een eigen kolom zetten (.foot, .mee) houden die: daar is max-width al gezet
   en 100% van 880 blijft 880. */
.afsluiter > footer,
.afsluiter > p {
  max-width: var(--kolom, 880px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kolom-pad, clamp(20px, 5vw, 40px));
  padding-right: var(--kolom-pad, clamp(20px, 5vw, 40px));
}

/* Een link in een lopende voettekst moet te zien zijn. In de losstaande voeten kreeg hij
   dezelfde cream-tint als de tekst eromheen: niet te onderscheiden zonder erop te wijzen.
   Op donker haalt cyaan 6,9:1, ruim boven de vloer.
   De mono-navigatierij (.foot) houdt de rustige cream met cyaan bij hover — daar is élk
   item een link en zou alles-cyaan schreeuwen. */
.afsluiter > footer a {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
}

/* Pagina's met een andere PAGINAKOLOM zeggen dat zelf: :root{--kolom:760px;--kolom-pad:24px}.
   De bewijspaspoorten doen dat, want die lezen op 760.

   De voet lijnt uit met de PAGINAKOLOM, niet met de binnenkant van een kaart. Op de
   board-brief staat de tekst in een sheet met een eigen inspringing van 54px; die volgen
   zou betekenen dat elk kaartje zijn eigen voetuitlijning krijgt. Een voet is een
   pagina-element en hoort bij de pagina.

   Gemeten op de gerenderde pagina, niet geschat — dit is aan de markup niet te zien. */

/* Op papier. Browsers printen standaard ZONDER achtergronden: de donkere band valt dan weg
   en wat overblijft is cream-op-wit — vrijwel onzichtbaar. Dat raakt vooral de board-brief,
   die expliciet om te printen is gemaakt en waar de twee vervolgstappen in de voet staan.
   Op papier is de afsluiter dus geen band maar een streep, met gewone donkere tekst. */
@media print {
  .afsluiter {
    background: transparent;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .afsluiter .mee,
  .afsluiter .wp-mee,
  .afsluiter .foot,
  .afsluiter footer,
  .afsluiter .foot a,
  .afsluiter footer a,
  .afsluiter > footer a {
    color: var(--ink);
  }
}