/* ==========================================================================
   Fysionotities, systeem brm- : het lexicon van een DOSSIER.
   Alles heet naar een map die je opslaat en naleest : kaft, band, tab, blad,
   kolom, marge, lade, rij, kaart, strook, lood, spoor, cijfer, voet.
   Palet : haverpapier met leisteeninkt, diep blauwgroen als merk, oker voor
   de cijfers. Letters uit het systeem, geen enkel extern verzoek, geen script,
   geen animatie behalve overgangen van 140 ms. Donkere modus meegeleverd.
   ========================================================================== */

:root {
  /* Haverpapier en leisteen. */
  --brm-papier: #f1ece0;
  --brm-blad: #fcfaf3;
  --brm-was: #e6e0ce;
  --brm-inkt: #1d2b2f;
  --brm-inktzacht: #59686b;
  --brm-diep: #0d5157;
  --brm-helder: #14757e;
  --brm-oker: #9a6b12;
  --brm-draad: #d5ccb4;
  --brm-schaduw: rgba(29, 43, 47, 0.10);

  /* Letters : oud-stijl schreef voor de koppen, brede humanistische schreefloze
     voor het lezen, monospace voor cijfers en artikelnummers. */
  --brm-kop: "Sitka Heading", "Sitka Display", Cambria, Constantia, "PT Serif", Georgia, serif;
  --brm-lees: Tahoma, Verdana, "DejaVu Sans", Geneva, "Segoe UI", sans-serif;
  --brm-cijferletter: ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;

  --brm-bandbreedte: 78rem;
  --brm-margebreedte: 17rem;
  --brm-hoek: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brm-papier: #14191b;
    --brm-blad: #1b2124;
    --brm-was: #1a2023;
    --brm-inkt: #eef1ec;
    --brm-inktzacht: #9daaad;
    --brm-diep: #7fc6cc;
    --brm-helder: #a2dbe0;
    --brm-oker: #d3a44a;
    --brm-draad: #33403f;
    --brm-schaduw: rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html {
  font-size: clamp(16px, 0.4vw + 15px, 19px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--brm-papier);
  color: var(--brm-inkt);
  font-family: var(--brm-lees);
  line-height: 1.68;
}

::selection { background: #0d5157; color: #f1ece0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brm-helder); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 140ms ease; }
a:hover { color: var(--brm-diep); text-decoration-color: var(--brm-oker); }
a:focus-visible, .brm-tabs__handle:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brm-oker); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--brm-kop); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
h1 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 2.2rem 0 0.7rem; }
h3 { font-size: 1.12rem; margin: 0 0 0.35rem; }

.brm-oversla { position: absolute; left: -9999px; }
.brm-oversla:focus { left: 0.6rem; top: 0.6rem; z-index: 20; background: var(--brm-diep); color: #fff; padding: 0.5rem 0.9rem; border-radius: var(--brm-hoek); }

.brm-band { width: min(100% - 2.4rem, var(--brm-bandbreedte)); margin-inline: auto; }

/* ---------- kaft : de kop van elke bladzijde ---------- */

.brm-kaft { border-bottom: 3px double var(--brm-draad); background: var(--brm-blad); }
.brm-kaft__rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; flex-wrap: wrap; }

.brm-merk { display: block; text-decoration: none; color: inherit; }
.brm-merk b { display: block; font-family: var(--brm-kop); font-size: 1.32rem; letter-spacing: 0.005em; color: var(--brm-inkt); }
.brm-merk span { display: block; font-size: 0.78rem; color: var(--brm-inktzacht); text-transform: lowercase; letter-spacing: 0.03em; }
.brm-merk:hover b { color: var(--brm-diep); }

/* Zes ingangen : op smal scherm achter een aanvinkvakje, op breed scherm een rij. */
.brm-tabs__toggle { position: absolute; opacity: 0; pointer-events: none; }
.brm-tabs__handle { display: inline-block; cursor: pointer; font-family: var(--brm-cijferletter); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brm-diep); border: 1px solid var(--brm-draad); border-radius: var(--brm-hoek); padding: 0.42rem 0.85rem; background: var(--brm-papier); }
.brm-tabs__lijst { list-style: none; margin: 0.7rem 0 0.3rem; padding: 0; display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.1rem; }
.brm-tabs__lijst a { display: block; padding: 0.5rem 0.2rem; text-decoration: none; color: var(--brm-inkt); border-bottom: 1px solid var(--brm-draad); font-size: 0.95rem; }
.brm-tabs__lijst a[aria-current="page"] { color: var(--brm-diep); font-weight: 700; box-shadow: inset 3px 0 0 var(--brm-oker); padding-left: 0.7rem; }
.brm-tabs__lijst a:hover { color: var(--brm-diep); }

@media (min-width: 60rem) {
  .brm-tabs__handle { display: none; }
  .brm-tabs > .brm-tabs__lijst { display: flex; flex-direction: row; margin: 0; gap: 0.15rem; }
  .brm-tabs__lijst a { border-bottom: 3px solid transparent; padding: 0.35rem 0.7rem; }
  .brm-tabs__lijst a[aria-current="page"] { box-shadow: none; padding-left: 0.7rem; border-bottom-color: var(--brm-oker); }
}

@media (max-width: 59.99rem) {
  .brm-tabs__handle { display: inline-block; cursor: pointer; }
  .brm-tabs__lijst { display: none; }
  .brm-tabs__toggle:checked ~ .brm-tabs__lijst { display: grid; gap: 0.5rem; padding-top: 0.8rem; }
}

/* ---------- spoor ---------- */

.brm-spoor { margin: 1rem 0 0; font-size: 0.8rem; color: var(--brm-inktzacht); }
.brm-spoor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.brm-spoor li + li::before { content: "› "; color: var(--brm-draad); }
.brm-spoor a { color: var(--brm-inktzacht); }
.brm-spoor [aria-current="page"] { color: var(--brm-inkt); }

/* ---------- kop van de voorpagina : beeld naast tekst, geen sluier ---------- */

.brm-kop { display: grid; gap: 1.6rem; padding: 2.2rem 0 2.6rem; align-items: center; }
.brm-kop__beeld img { width: 100%; border-radius: var(--brm-hoek); border: 1px solid var(--brm-draad); box-shadow: 0 2px 0 var(--brm-schaduw); }
.brm-kop__merken { font-family: var(--brm-cijferletter); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brm-oker); margin: 1rem 0 0; }

@media (min-width: 56rem) {
  .brm-kop { grid-template-columns: 1.05fr 0.95fr; gap: 2.6rem; }
}

.brm-aanhef { font-family: var(--brm-cijferletter); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brm-diep); margin: 0 0 0.6rem; }
.brm-lood { font-size: 1.05rem; color: var(--brm-inktzacht); margin: 0.4rem 0 0; max-width: 40rem; }

/* ---------- titelblok van een binnenbladzijde ---------- */

.brm-titelblok { display: grid; gap: 1.4rem; padding: 1.4rem 0 2rem; }
@media (min-width: 56rem) { .brm-titelblok { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 2.4rem; } }
.brm-titelblok--kaal { grid-template-columns: 1fr; }
.brm-titelblok__tekst { display: grid; gap: 0.9rem; align-content: end; min-width: 0; }
.brm-plaat { margin: 0; }
.brm-plaat img { width: 100%; border-radius: var(--brm-hoek); border: 1px solid var(--brm-draad); }

/* ---------- lezing : kolom plus marge rechts ---------- */

.brm-lezing { display: grid; gap: 2rem; padding-bottom: 2.6rem; align-items: start; }
@media (min-width: 62rem) {
  .brm-lezing { grid-template-columns: minmax(0, 1fr) var(--brm-margebreedte); gap: 3rem; }
  .brm-marge { position: sticky; top: 1.4rem; }
}

.brm-kolom { min-width: 0; }
.brm-kolom > p { margin: 0 0 1rem; }
.brm-kolom h2 { padding-top: 0.35rem; border-top: 1px solid var(--brm-draad); }
.brm-kolom h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.brm-kolom ul, .brm-kolom ol { margin: 0 0 1.15rem; padding-left: 1.15rem; }
.brm-kolom li { margin-bottom: 0.4rem; }
.brm-kolom dl { margin: 0 0 1.3rem; }
.brm-kolom dt { font-family: var(--brm-kop); font-weight: 700; font-size: 1.02rem; color: var(--brm-inkt); margin-top: 1rem; padding-top: 0.55rem; border-top: 1px solid var(--brm-draad); }
.brm-kolom dt:first-child { margin-top: 0.2rem; border-top: none; padding-top: 0; }
.brm-kolom dd { margin: 0.25rem 0 0; color: var(--brm-inkt); }
.brm-kolom blockquote { margin: 1.2rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--brm-oker); color: var(--brm-inktzacht); font-style: normal; }
.brm-inzet { font-size: 1.08rem; line-height: 1.6; color: var(--brm-inkt); background: var(--brm-blad); border-left: 4px solid var(--brm-diep); padding: 0.9rem 1.1rem; border-radius: 0 var(--brm-hoek) var(--brm-hoek) 0; margin: 0 0 1.5rem; }

/* Een tabel schuift in haar eigen blad : op 390 px duwt zij de bladzijde anders opzij. */
.brm-tabelblad { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--brm-draad); border-radius: var(--brm-hoek); background: var(--brm-blad); }
.brm-tabelblad table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.92rem; }
.brm-tabelblad caption { caption-side: bottom; text-align: left; padding: 0.6rem 0.85rem; font-size: 0.8rem; color: var(--brm-inktzacht); border-top: 1px solid var(--brm-draad); }
.brm-tabelblad th, .brm-tabelblad td { padding: 0.55rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--brm-draad); }
.brm-tabelblad thead th { font-family: var(--brm-cijferletter); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brm-diep); background: var(--brm-was); }
.brm-tabelblad tbody tr:last-child td { border-bottom: none; }

/* ---------- marge ---------- */

.brm-marge { background: var(--brm-blad); border: 1px solid var(--brm-draad); border-top: 3px solid var(--brm-diep); border-radius: var(--brm-hoek); padding: 1rem 1.1rem 1.2rem; font-size: 0.88rem; }
.brm-marge__kop { font-family: var(--brm-cijferletter); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brm-diep); margin: 0 0 0.7rem; border: none; padding: 0; }
.brm-marge__lijst { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; }
.brm-marge__lijst dt { font-family: var(--brm-cijferletter); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brm-inktzacht); }
.brm-marge__lijst dd { margin: 0; }
.brm-marge__noot { margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--brm-draad); color: var(--brm-inktzacht); font-size: 0.82rem; }

/* ---------- dek, lade, rijen en kaarten ---------- */

.brm-dek, .brm-onderlaag, .brm-lade { padding: 2.4rem 0; border-top: 1px solid var(--brm-draad); }
.brm-onderlaag { background: var(--brm-was); border-top: 3px double var(--brm-draad); border-bottom: 3px double var(--brm-draad); width: 100%; }
.brm-onderlaag > * { width: min(100% - 2.4rem, var(--brm-bandbreedte)); margin-inline: auto; }
.brm-dek__kop, .brm-lade__kop { max-width: 46rem; margin-bottom: 1.6rem; }
.brm-dek__kop h2, .brm-lade__kop h2 { margin: 0.2rem 0 0.4rem; }
.brm-dek__kop p { margin: 0; color: var(--brm-inktzacht); }
.brm-cijfer { font-family: var(--brm-cijferletter); font-size: 1.5rem; color: var(--brm-oker); letter-spacing: 0.05em; display: block; }

/* Rijen : het beeld neemt op desktop ruim een derde van de regel. Nooit een postzegel. */
.brm-rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.brm-rij { display: grid; gap: 1rem; background: var(--brm-blad); border: 1px solid var(--brm-draad); border-radius: var(--brm-hoek); overflow: hidden; }
.brm-rij__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.brm-rij__romp { padding: 0 1.2rem 1.2rem; }
.brm-rij--groot .brm-rij__romp { padding-bottom: 1.4rem; }
.brm-rij__romp p { margin: 0.3rem 0 0; color: var(--brm-inktzacht); }
.brm-rij__romp h3 a { color: var(--brm-inkt); text-decoration: none; }
.brm-rij__romp h3 a:hover { color: var(--brm-diep); text-decoration: underline; }
.brm-rij__datum, .brm-rij__telling { font-family: var(--brm-cijferletter); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brm-inktzacht); }
.brm-rij__telling { margin-top: 0.7rem; color: var(--brm-oker); }

@media (min-width: 48rem) {
  .brm-rij { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 0; align-items: stretch; }
  .brm-rij__beeld { height: 100%; }
  .brm-rij__beeld img { height: 100%; aspect-ratio: auto; min-height: 12rem; }
  .brm-rij__romp { padding: 1.3rem 1.5rem; }
}

.brm-kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.brm-kaart { background: var(--brm-blad); border: 1px solid var(--brm-draad); border-radius: var(--brm-hoek); overflow: hidden; display: flex; flex-direction: column; }
.brm-kaart__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.brm-kaart__romp { padding: 1rem 1.15rem 1.2rem; }
.brm-kaart__romp p { margin: 0.35rem 0 0; color: var(--brm-inktzacht); font-size: 0.93rem; }
.brm-kaart__merk { font-family: var(--brm-cijferletter); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brm-oker); margin: 0 0 0.3rem; }
.brm-kaart__romp h3 a { color: var(--brm-inkt); text-decoration: none; }
.brm-kaart__romp h3 a:hover { color: var(--brm-diep); text-decoration: underline; }
.brm-kaarten--drie { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.brm-bronnen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.brm-bronnen li { background: var(--brm-blad); border: 1px solid var(--brm-draad); border-left: 4px solid var(--brm-diep); border-radius: 0 var(--brm-hoek) var(--brm-hoek) 0; padding: 1rem 1.1rem 1.1rem; }
.brm-bronnen p { margin: 0.35rem 0 0; color: var(--brm-inktzacht); font-size: 0.92rem; }
.brm-bron__merk { font-family: var(--brm-cijferletter); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brm-oker); }

/* ---------- voet ---------- */

.brm-voet { margin-top: 2rem; border-top: 3px double var(--brm-draad); background: var(--brm-blad); padding: 2.2rem 0 1.6rem; }
.brm-voet__raster { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.brm-voet__raster h2 { font-family: var(--brm-cijferletter); font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brm-diep); margin: 0 0 0.6rem; }
.brm-voet__raster ul { list-style: none; margin: 0; padding: 0; }
.brm-voet__raster li { margin-bottom: 0.35rem; font-size: 0.92rem; }
.brm-voet__raster a { color: var(--brm-inkt); text-decoration: none; }
.brm-voet__raster a:hover { color: var(--brm-diep); text-decoration: underline; }
.brm-voet__regel { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--brm-draad); font-size: 0.85rem; color: var(--brm-inktzacht); }
.brm-voet__regel p { margin: 0 0 0.5rem; max-width: 52rem; }
.brm-voet__jaar { font-family: var(--brm-cijferletter); font-size: 0.75rem; letter-spacing: 0.07em; }

@media print {
  .brm-kaft, .brm-voet, .brm-marge { display: none; }
  body { background: #fff; color: #000; }
}