/* Writesides of History — encyclopedic design inspired by worldhistory.org */
:root {
  --header: #293744;
  --header-text: #ffffff;
  --accent: #b52600;
  --accent-dark: #8f1e00;
  --bg: #f4f5f6;
  --card: #ffffff;
  --text: #22272c;
  --muted: #66707a;
  --rule: #dde1e5;
  /* De scrim onder een full-bleed socialslide. Donkerder en koeler dan --header, want hij
     ligt over fotomateriaal en moet daar wegvallen in plaats van als merkvlak te lezen.
     Staat hier omdat ADR-027 deze stylesheet de enige bron van kleur maakt: de renderer
     mag geen hex kennen. */
  --social-scrim: #0d1319;
  --maxw: 72rem;
  --readw: 46rem;
  --sans: system-ui, "Segoe UI", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.7;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--header);
  padding: 0;
  border-bottom: 4px solid var(--accent);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.25rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.site-title {
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--header-text);
  text-decoration: none;
}
.site-title span { color: #f0b429; }

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  align-items: center;
  margin-left: auto;
}

.site-header nav a {
  color: #cdd6de;
  text-decoration: none;
  padding: 0.3rem 0;
}
.site-header nav a:hover { color: #ffffff; }

.btn-membership {
  background: var(--accent);
  color: #ffffff !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 4px;
  font-weight: 600;
}
.btn-membership:hover { background: var(--accent-dark); }

/* A-Z index */
.az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 1.5rem;
  font-family: var(--sans);
}
.az-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border: 1px solid #b9c2cb;
  border-radius: 4px;
  text-decoration: none;
  color: #293744;
  font-weight: 600;
}
.az-nav a:hover { background: #293744; color: #ffffff; }
.az-section h2 {
  border-bottom: 2px solid #f0b429;
  padding-bottom: 0.2rem;
  margin: 1.6rem 0 0.6rem;
}
.az-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  columns: 2;
  column-gap: 2.5rem;
  font-family: var(--sans);
  font-size: 0.93rem;
}
@media (min-width: 900px) { .az-list { columns: 3; } }
.az-list li { margin: 0.25rem 0; break-inside: avoid; }
.az-list a { text-decoration: none; color: #293744; }
.az-list a:hover { color: var(--accent); text-decoration: underline; }

/* Media library */
.media-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.2rem 0 0.5rem;
  font-family: var(--sans);
}
.media-filter {
  background: #eef1f3;
  border: 1px solid #b9c2cb;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: #293744;
}
.media-filter:hover { background: #e2e7ea; }
.media-filter.active { background: #293744; color: #ffffff; border-color: #293744; }
.media-filters input {
  margin-left: auto;
  border: 1px solid #b9c2cb;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.88rem;
  min-width: 10rem;
}
/* Het `hidden`-attribuut verbergt via de browserstijl `display: none`, en die
   verliest van elke auteursregel met een eigen display — zoals .media-grid met
   `display: grid`. Zonder deze regel bleef de volledige mediabibliotheek onder de
   zoekresultaten staan. */
[hidden] { display: none !important; }

/* Zoekbalk van de mediabibliotheek. Hergebruikt de .media-filters-balk, alleen
   staat het veld hier links en mag het breder worden — het is het hoofdelement
   van de rij in plaats van een aanhangsel naast de era-knoppen. */
.media-search-bar { margin: 1.2rem 0 0.4rem; }
.media-search-bar input {
  margin-left: 0;
  flex: 1 1 auto;
  max-width: 28rem;
  font-family: var(--sans);
}
.media-search-bar input:focus { outline: 2px solid #293744; }
.media-search-count {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.media-search-empty { font-family: var(--sans); font-size: 0.9rem; margin: 0.4rem 0 2rem; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.media-grid {
  display: grid;
  /* auto-FIT, niet auto-fill: auto-fill houdt lege tracks aan, dus vier kaarten in een
     grid dat er vijf kan dragen eindigen een hele kolombreedte vóór de rechterrand en
     lijken naar links geschoven. auto-fit klapt de lege track dicht en laat de kaarten
     de ruimte vullen. Zichtbaar bij weinig items: related media, een smal filter. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 2rem;
}
.media-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e2e7ea;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.media-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
/* Related media hoort BINNEN een kaart van artikelbreedte. Stond de grid los, dan viel
   hij terug op de volle breedte van `main` (72rem) terwijl het artikel --readw (46rem)
   is: 376px breder en 188px verder naar links. Twee kolommen, want vier tracks van
   210px passen niet in --readw en auto-fit laat er dan één op een tweede rij achter. */
.media-related h2 { margin-top: 0; }
.media-related .media-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}
/* Op een telefoon leveren twee kolommen kaarten van 142px op, terwijl de overzichtsgrid
   daar juist naar één kolom van 335px gaat. Twee formaten voor dezelfde kaart op hetzelfde
   scherm; hier volgt het related-blok de overzichtsgrid. */
@media (max-width: 640px) {
  .media-related .media-grid { grid-template-columns: 1fr; }
}
.media-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.media-card-title {
  display: block;
  padding: 0.5rem 0.7rem 0.65rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  color: #293744;
}
.media-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 2rem;
}
.media-hub-tile {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  min-height: 180px;
  background: #293744;
  text-decoration: none;
}
.media-hub-tile img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  opacity: 0.65;
}
.media-hub-tile:hover img { opacity: 0.85; }
.media-hub-label {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  color: #ffffff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.4rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.media-hub-label small {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: #e2e7ea;
}
.media-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  display: block;
}
.media-detail .media-caption { font-style: italic; color: #43525f; margin-top: 0.5rem; }
.media-detail .media-meta { font-family: var(--sans); font-size: 0.9rem; color: #5a6a78; }
.media-detail .media-license { font-size: 0.85rem; color: #7a8794; font-style: italic; }
.media-breadcrumb { font-family: var(--sans); font-size: 0.88rem; }

/* Header search */
.header-search { display: inline-flex; margin: 0; }
.header-search input {
  background: #f4f5f6;
  border: 1px solid #b9c2cb;
  border-radius: 6px;
  padding: 0.42rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: #293744;
  width: clamp(9rem, 16vw, 15rem);
}
.header-search input::placeholder { color: #7a8794; }
.header-search input:focus {
  outline: 2px solid #f0b429;
  outline-offset: 1px;
  background: #ffffff;
}

/* Header social icon */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #cdd6de;
  padding: 0 !important;
}
.social-icon svg { width: 1.1rem; height: 1.1rem; fill: #293744; }
.social-icon:hover { background: #f0b429; }

/* Membership dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-caret { font-size: 0.7em; }
/* Dropdown parents are <details><summary>; the summary looks like a nav link. */
.nav-summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  color: #cdd6de;
  padding: 0.3rem 0;
}
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::after { content: " \25BE"; font-size: 0.7em; }
.nav-summary:hover { color: #ffffff; }
.nav-summary.btn-membership { color: #ffffff !important; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 12rem;
  background: #1c2530;
  border: 1px solid #3a4a5a;
  border-radius: 4px;
  padding: 0.4rem 0;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.nav-dropdown[open] > .nav-dropdown-menu { display: block; }
/* Desktop: reveal on hover regardless of open state */
@media (min-width: 641px) {
  .nav-dropdown:hover > .nav-dropdown-menu { display: block; }
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.45rem 1rem !important;
  color: #cdd6de;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: #293744; color: #ffffff; }
.nav-dropdown-menu a small { color: #7a8794; font-size: 0.78em; margin-left: 0.4rem; }

/* ---------- Layout ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.post, .prose {
  max-width: var(--readw);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.5rem;
}

h1 { font-size: 2rem; line-height: 1.25; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; }

a { color: var(--accent); }

img { max-width: 100%; height: auto; border-radius: 4px; }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  margin: 1.25rem 0;
}
th, td { border: 1px solid var(--rule); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
th { background: #eef1f3; }

.lede { color: var(--muted); font-size: 1.1rem; max-width: 50rem; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 1.25rem 0 2rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

.card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 0;
}

.card-body { padding: 0.8rem 1rem 1rem; }

.card-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.card-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.25rem 0 0.35rem;
}

.card-snippet {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.card time {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------- Topic tiles ---------- */
.era-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 2rem;
}

.era-grid a {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--sans);
}
.era-grid a strong { display: block; margin-bottom: 0.2rem; }
.era-grid a span { font-size: 0.8rem; color: var(--muted); }
.era-grid a:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }

/* ---------- Article meta ---------- */
.post-meta {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.era-tag {
  display: inline-block;
  padding: 0.12rem 0.65rem;
  border-radius: 999px;
  background: #eef1f3;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.era-tag:hover { background: #e3e8ec; }

/* ---------- Artikel: de eerste viewport ---------- */

/* WAT HIER GEREGELD WORDT. De lezer moet zonder scrollen zien waar dit over gaat, waarom het
   ertoe doet en waar hij verder leest. Dat is een kwestie van rangorde en van hoogte: alles
   wat orienteert staat boven het beeld, en het beeld heeft een plafond. */
.post-header { margin: 0 0 1.6rem; }
/* DE KRUIMEL BLIJFT EEN REGEL. Hij eindigt met de titel van dit artikel, en die staat er
   direct onder ook als kop; over twee regels afbreken maakt daar een herhaling van in plaats
   van context. De volledige tekst blijft in de DOM staan, dus een schermlezer krijgt het hele
   pad - alleen het OOG krijgt een afkapping. */
.post > .breadcrumb {
  margin: 0 0 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-header h1 { margin: 0 0 0.7rem; }

/* HET DEK. Groter dan de body en rustiger van kleur: het leest als een samenvatting, niet als
   de eerste alinea. Het beperkt zijn eigen regellengte, want een dek van volle breedte gaat
   er weer uitzien als gewone tekst. */
.post-dek {
  font-family: var(--sans);
  font-size: 1.08rem;
  line-height: 1.55;
  color: #414b55;
  margin: 0 0 1rem;
  max-width: 40rem;
}

/* DATUM EN VERVOLGSTAP OP EEN REGEL. Twee losse regeltjes onder elkaar kosten hoogte en
   lezen als twee dingen; dit is er een. */
.post-header .post-meta { margin: 0 0 1.2rem; }
.post-meta-sep { color: var(--rule); }
.post-continue a { color: var(--accent); text-decoration: none; font-weight: 600; }
.post-continue a:hover { text-decoration: underline; }
.post-continue-count { color: var(--muted); font-weight: normal; }

/* HET BEELD MET EEN PLAFOND. Een vaste verhouding plus een absolute bovengrens: hoe groot het
   bronbestand ook is, het kan de eerste viewport niet meer opeten. `object-fit` snijdt in
   plaats van te vervormen. */
.post-header .featured {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 22rem;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

/* EEN STAAND BEELD WORDT NIET BIJGESNEDEN, MAAR INGEPAST. Bij `cover` zou de uitsnede het
   onderwerp opeten - bij het Danelaw-standbeeld verdween de kop. `contain` laat het beeld
   heel; de band eronder is dezelfde tint als de tegels, zodat de lege ruimte als opmaak leest
   en niet als een laadfout. Het hoogteplafond blijft hetzelfde. */
.post-header .featured[data-orientation="portrait"] {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #e9eef3;
  border: 1px solid #d3dce4;
}

/* DE TERUGVAL ZONDER BEELD. Geen grijs vlak dat om een plaatje vraagt, maar de tijd waarin je
   staat - dezelfde rode linkerrand als de tegels elders op de site. */
.post-era-band {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text);
  background: #e9eef3;
  border: 1px solid #d3dce4;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0;
}
.post-era-band span { color: var(--muted); }

@media (max-width: 640px) {
  /* Datum en vervolgstap passen hier niet naast elkaar. In de flexregel bleef het
     scheidingsteken dan achter aan de eerste regel hangen; onder elkaar heeft het geen
     werk meer te doen en verdwijnt het. */
  .post-header .post-meta { display: block; }
  .post-meta-sep { display: none; }
  .post-continue { display: block; margin-top: 0.3rem; }
  .post-header h1 { font-size: 1.6rem; }
  .post-dek { font-size: 1.02rem; }
}

.era-period { font-size: 1rem; font-weight: normal; color: var(--muted); font-family: var(--sans); }

.post-byline {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  margin: -0.4rem 0 0.9rem;
}
.post-byline a { color: var(--accent); text-decoration: none; font-weight: 600; }
.post-byline a:hover { text-decoration: underline; }

.affiliate-disclosure {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
}

img.featured { width: 100%; margin: 0.5rem 0 1.5rem; }

/* ---------- Recommended reading ----------
   De leeslijst van een historicus, niet een productrij. Alles hieronder gebruikt de
   bestaande tokens: --card, --rule, --accent, --muted, --sans, 6px radius en dezelfde
   box-shadow-overgang als .card en .media-card. Er komt geen tweede designsysteem bij.

   EEN KOLOM, OOK OP EEN BREED SCHERM. Dat is geen mobile-first-gemakzucht maar meting:
   het artikel is --readw (46rem) breed met 2.25rem padding, dus de tekstkolom is ~41rem.
   Twee tracks daarin leveren kaarten van ~20rem op, terwijl elke kaart een titel, een
   volledige redactionele zin en een knop draagt. Bovendien laat een oneven aantal — en
   drie tot vijf boeken is per contract vaak oneven — een gat op de laatste rij; dezelfde
   reden waarom .media-related hierboven al op twee vaste kolommen staat in plaats van op
   auto-fit. Eén kolom is stabiel bij 3, 4 én 5 boeken. */
.reading-list { margin: 2.2rem 0 1rem; }
.reading-list h2 { margin-top: 0; }

.reading-list-items {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.reading-item {
  background: var(--card);
  border: 1px solid var(--rule);
  /* De rug van het boek: het enige gekleurde element van de kaart, links, zoals een band
     in een kast. Betekenis hangt er niet aan — verdwijnt de kleur, dan blijft de kaart
     door rand, achtergrond en typografie precies zo leesbaar. */
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.15rem 1.05rem;
  transition: box-shadow 0.15s ease;
}
.reading-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }

/* TITEL EN ZIN ZIJN ÉÉN ZIN. Elke redactionele regel in het corpus is een werkwoordsgroep
   met de titel als onderwerp ("is the first monograph…"). Ze staan daarom in één alinea;
   `display: block` geeft de titel een eigen regel zonder de zin te breken. Voorgelezen
   blijft het één lopende zin. */
.reading-item-text { margin: 0; }

.reading-item-title {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.reading-item-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.reading-item-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.55rem 0 0;
}

.reading-item-cta { margin: 0.7rem 0 0; }
.reading-item-cta a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.reading-item-cta a:hover { color: var(--accent-dark); }
/* De focusring is hier expliciet, want de stylesheet kent geen globale :focus-visible en
   een knop zonder zichtbare focus is met een toetsenbord onvindbaar. */
.reading-item-cta a:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reading-item { transition: none; }
}

/* ---------- Lists ---------- */
.article-list { list-style: none; padding: 0; }
.article-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}
.article-list a { text-decoration: none; color: var(--text); font-weight: 600; }
.article-list a:hover { color: var(--accent); }
.article-list time { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* ---------- Breadcrumb / related ---------- */
/* Contact block on /about/ — <address> is italic by default, which reads as an
   aside rather than as the publisher's actual details. */
.contact-address {
  font-style: normal;
  font-family: var(--sans);
  line-height: 1.7;
  margin: 1rem 0 0;
}

.breadcrumb { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

/* HET BEELDBEWIJS. Objecten uit de medialibrary, met maker, collectie en licentie eronder.

   DE BREEDTE IS BEPERKT EN DE HOOGTE HEEFT EEN PLAFOND, om dezelfde reden als bij het heldbeeld:
   een cartularium van 1867 pixels breed zou anders de halve pagina vullen en het blok tot een
   galerij maken. `contain` in plaats van `cover`, want bij een manuscript of een muntstuk is de
   rand vaak juist het bewijs; bijsnijden zou het onderwerp opeten.

   DE CREDITREGEL STAAT ER KLEINER EN GEDEMPT ONDER, maar hij staat er altijd. Hij is de reden
   dat dit blok bestaat: een beeld zonder herkomst is precies wat het moest vervangen. */
.article-media { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.article-media h2 { margin-top: 0.5rem; }
.article-media-item { margin: 0 0 2rem; }
.article-media-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  object-fit: contain;
  object-position: center;
  background: #e9eef3;
  border: 1px solid #d3dce4;
}
.article-media-item figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.article-media-credit {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.related { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.related h2 { margin-top: 0.5rem; }

.hub-footer { color: var(--muted); font-family: var(--sans); font-size: 0.9rem; }

/* ---------- Support / membership blocks ---------- */
.support-block {
  background: var(--header);
  color: #e8edf1;
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
  margin: 2.5rem 0 1rem;
  font-family: var(--sans);
}
.support-block h2 { color: #ffffff; margin: 0 0 0.5rem; font-size: 1.3rem; }
.support-block p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.6; }
.support-block .btn { margin: 0 0.6rem 0.6rem 0; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 4px;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: #ffffff; color: var(--header); }
.btn-secondary:hover { background: #e8edf1; }

/* De membershippagina is geen leespagina maar een overzichtspagina: drie cijferblokken,
   vier posten en twee tiers naast elkaar. Op de leesbreedte van een artikel (46rem) worden
   die kolommen zo smal dat alles in smalle stroken breekt. Vandaar een eigen breedte —
   alleen voor deze pagina, want voor lopende artikeltekst blijft 46rem juist. */
.prose-wide { max-width: 62rem; }
/* Maar de LOPENDE TEKST blijft op leesbreedte. Een kaart van 62rem gaf regels van ruim
   900px, en dat leest te lang — het oog verliest de volgende regel. Alinea's en lijsten
   krijgen daarom hun eigen maat, links uitgelijnd zodat hun linkerkant precies op de
   grids eronder valt; alleen rechts ontstaat lucht. De grids en kaarten gebruiken de
   volle breedte, want die winnen er juist bij. */
.prose-wide > p,
.prose-wide > ul,
.prose-wide > ol { max-width: 46rem; }

/* Membership: waar het geld heen gaat.
   Bewust soberder dan de dossierkaart — dit is verantwoording, geen aanbieding, en het
   moet niet lezen als een tweede reeks producten naast de tiers eronder. */
.impact-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0.6rem;
  font-family: var(--sans);
}
.impact-figures span {
  flex: 1 1 10rem;
  background: #fdfbf6;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--muted);
}
.impact-figures strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
  color: #293744;
  margin-bottom: 0.15rem;
}
.impact-note {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 2rem;
}
.impact-grid {
  display: grid;
  /* 22rem, niet 16rem: op de bredere pagina zou 16rem drie kolommen geven en dan staan
     vier kaarten als 3+1, wat scheef leest. Zo blijft het 2x2 en op smal 1 kolom.
     min(22rem, 100%) is nodig omdat 22rem een MINIMUM is: een track krimpt daar niet
     onder, dus op een telefoon van 375px (binnenruimte ~300px) stak de kaart er rechts
     uit. De 100% klemt de ondergrens op de container zodra die smaller is dan 22rem. */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.impact-card {
  border: 1px solid var(--rule);
  border-top: 3px solid #b52600;
  border-radius: 6px;
  padding: 0.4rem 1.2rem 1rem;
  background: #ffffff;
}
.impact-card h3 {
  font-size: 1.05rem;
  margin: 0.9rem 0 0.5rem;
}
.impact-card p { margin-bottom: 0; }
@media (max-width: 640px) {
  /* Drie naast elkaar blijven, ook op een telefoon: gestapeld duwden ze de tiers ruim drie
     schermen naar beneden, en dat is te ver voor de vraag die deze pagina stelt. */
  .impact-figures { gap: 0.4rem; }
  .impact-figures span { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.5rem; font-size: 0.72rem; }
  .impact-figures strong { font-size: 1.3rem; }
  .impact-card { padding: 0.3rem 1rem 0.8rem; }
}
/* Member en Patron naast elkaar: ze zijn een keuze, en een keuze lees je beter
   naast elkaar dan onder elkaar. Onder 640px stapelen ze vanzelf. */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1rem;
}
.tier-grid .dossier-card { margin: 0; }
.impact-total {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  background: #293744;
  color: #e8edf1;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  /* Gecentreerd, niet links: dit is een <p>, dus `.prose-wide > p` klemt hem op 46rem
     terwijl de kaarten erboven de volle 62rem vullen. Met margin-left 0 hing hij dan
     links onder een breder blok. Het is een vlak, geen lopende tekst, dus centreren
     leest beter dan uitlijnen op de linkermarge. */
  margin: 0 auto 2rem;
}
.impact-total strong { color: #f0b429; }
.members-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f0b429;
  color: #3d2e00;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}

/* ---------- Pillar ---------- */
.pillar-intro { font-size: 1.15rem; }
.pillar-toc {
  background: #eef1f3;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.pillar-toc a { text-decoration: none; }

/* HET HELDBEELD VAN EEN GIDS. Een gidspagina begon met een kop op wit; er was niets dat haar van
   een willekeurige lijst onderscheidde. Dit beeld staat op de leesbreedte, met het onderschrift en
   de herkomst eronder — dezelfde behandeling als een archiefobject in een artikel, want dat is het. */
.guide-hero {
  max-width: var(--readw);
  margin: 0 auto 1.75rem;
  padding: 0;
}
.guide-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* EEN HANDSCHRIFTBLAD WORDT NIET BIJGESNEDEN. Met `cover` viel de bovenrand van de miniatuur
     en de brandstapel eronder weg; wie het beeld dan bekijkt, ziet een ander voorwerp dan er in
     de collectie ligt. `contain` houdt het blad heel en de hoogtegrens houdt het eerste scherm
     leesbaar. De achtergrond vult wat overblijft, in de kleur van de pagina zelf. */
  max-height: 24rem;
  object-fit: contain;
  background: #eef1f3;
  border-radius: 6px;
}
.guide-hero figcaption {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.6rem;
}
.guide-hero-credit { display: block; margin-top: 0.2rem; font-size: 0.82rem; }
.guide-hero-credit a { color: var(--accent); }

/* DE INHOUDSOPGAVE. Zij staat binnen de proza-kolom, tussen de inleiding en de eerste sectie, en
   is met opzet stiller dan de tekst eromheen: een wegwijzer hoort niet met het artikel te
   concurreren. Twee kolommen op een breed scherm, zodat acht secties niet acht regels worden. */
.guide-toc {
  background: #eef1f3;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.4rem 1.1rem;
  margin: 1.75rem 0 2rem;
  font-family: var(--sans);
}
.guide-toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.guide-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.94rem;
}
.guide-toc li { margin: 0.15rem 0; break-inside: avoid; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .guide-toc ol { columns: 1; }
  .guide-hero img { max-height: 15rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--header);
  color: #b9c4cd;
  margin-top: 3rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
}
.site-footer a { color: #dfe6ec; }
/* One compact identity line; <address> is italic by default. */
.footer-address {
  font-style: normal;
  font-size: 0.78rem;
  color: #9aa8b4;
  margin: 0.35rem 0 0.85rem;
  line-height: 1.6;
}

.empty { color: var(--muted); font-style: italic; }

.nav-toggle, .nav-burger { display: none; }

@media (max-width: 640px) {
  .post, .prose { padding: 1.25rem 1.1rem 1.75rem; }
  h1 { font-size: 1.6rem; }
  /* Mobile navigation: collapse the whole nav behind a hamburger toggle. */
  .nav-burger {
    display: inline-block;
    margin-left: auto;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--header-text);
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    user-select: none;
  }
  .site-header nav {
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.5rem 0 0.5rem;
  }
  .nav-toggle:checked ~ nav { display: flex; }
  /* Top-level items stack; dropdowns become tap-to-expand accordions. */
  .site-header nav > a,
  .nav-dropdown { display: block; width: 100%; }
  .site-header nav > a { padding: 0.6rem 0.1rem; }
  .nav-summary { display: block; padding: 0.6rem 0.1rem; }
  /* Submenu is collapsed until its <details> is open, then inline + indented. */
  .nav-dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.1rem 0 0.3rem 0.9rem;
  }
  .nav-dropdown-menu a { white-space: normal; padding: 0.45rem 0.1rem !important; }
  /* Keep the Instagram icon a small round button, not a full-width oval. */
  .site-header nav > a.social-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    margin: 0.3rem 0;
    padding: 0 !important;
  }
  /* Membership stays a compact red button. */
  .nav-dropdown > .btn-membership { display: inline-block; width: auto; }
  .header-search { width: 100%; margin: 0.4rem 0; }
  .header-search input { width: 100%; }
}

/* Placeholder for cards without a featured image */
.card-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #293744 0%, #3d5266 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-placeholder span {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cdd6de;
  border: 1px solid #4d637a;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}

/* EEN TEGEL, EEN KLEUR.

   Hier stonden twee tinten naast elkaar: era-tegels blauwgrijs, guide-tegels goud. Op de
   homepage staan die twee rasters direct onder elkaar, en dat kleurverschil suggereerde een
   betekenisverschil dat er niet is - het zijn allebei ingangen naar een verzameling. Wat
   overblijft is een tegel, in de blauwgrijze tint die de koptekst echoot.

   De rode linkerrand komt nu terug op ALLE tegels. Hij stond al in de basisregel hierboven,
   maar de `border-color`-shorthand overschreef ook die zijde; daarom waren de era-tegels hem
   stilletjes kwijt en zette het guide-blok hem apart terug. De guide-tegels dragen altijd
   ook `era-grid`, dus zij hebben hier geen eigen regel meer nodig. */
.era-grid a {
  background: #e9eef3;
  border-color: #d3dce4;
  border-left-color: var(--accent);
}
.era-grid a:hover { background: #dfe7ee; }


/* Guided Content — the full /guides/ index: same tiles, room for a description */
/* Guided Content — the All guides dropdown sits on the same row as the link,
   so the closed state costs the homepage a single line. */
/* EEN INGANG NAAR DE REST, NIET TWEE.

   Hier stonden een grijze uitklapper en daarnaast een losse "Browse all guides" - twee
   elementen die hetzelfde beloven en elkaar verzwakken. Wat overblijft is een knop met een
   dynamisch label; de tweede weg is verhuisd naar de voet van het paneel zelf.

   `<details>` doet het openklappen, dus dit werkt zonder een regel JavaScript: `<summary>` is
   uit zichzelf focusbaar, reageert op Enter en spatie, en meldt zijn open/dicht-toestand aan
   een schermlezer. De knopvorm is opmaak, geen gedrag. */
/* LUCHT BOVEN DE KNOP. De knop hoort bij de guides, maar hij is geen zesde tegel: zonder
   ruimte erboven plakte hij tegen de onderrand van het raster. `.home-section` zet de
   ondermarge van het raster op nul, dus die ruimte moet hier staan - en alleen hier,
   want de sectie regelt zelf al wat eronder komt. */
.guide-more { margin: 1.6rem 0 0; }
.guide-dropdown { font-family: var(--sans); font-size: 0.9rem; }
.guide-dropdown > summary {
  cursor: pointer;
  list-style: none;
}
.guide-dropdown > summary::-webkit-details-marker { display: none; }
.guide-dropdown > summary::after { content: " \25BE"; font-size: 0.8em; }
.guide-dropdown[open] > summary::after { content: " \25B4"; }
/* ALLES TEGELIJK ZICHTBAAR, NIET IN EEN KOKER.

   Het paneel was een kolom met een eigen schuifbalk: dertien guides pasten niet in 22rem, dus
   de lezer kreeg er acht te zien en moest binnen een uitklapper opnieuw scrollen om te weten
   wat er is. Precies het overzicht dat een overzichtspaneel hoort te geven ging zo verloren -
   terwijl er rechts een halve pagina leeg bleef.

   De era-groepen vallen nu in kolommen. `columns` vult naar beschikbare breedte in plaats van
   naar een vast aantal, dus dit klopt op elke schermbreedte zonder breekpunt per maat, en
   `break-inside` houdt een kop bij zijn eigen lijst. Geen schuifbalk meer op een ruim scherm;
   op een telefoon staat het weer onder elkaar en houdt de hoogtegrens hem hanteerbaar. */
.guide-dropdown-body {
  margin-top: 0.6rem;
  padding: 1rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  columns: 14rem;
  column-gap: 2rem;
}
.guide-dropdown-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1rem;
}
.guide-dropdown-body h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.guide-dropdown-body ul { list-style: none; margin: 0; padding: 0; }
.guide-dropdown-body li { padding: 0.18rem 0; }
/* Het aantal blijft een eenheid: zonder dit brak "9 articles" in een smalle kolom na de 9. */
.guide-dropdown-body li span { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
/* De voetlink hoort onder het geheel, niet onderaan de laatste kolom. */
.guide-dropdown-footer {
  column-span: all;
  margin: 0.4rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

/* ---------- Homepage: masthead, uitgelicht verhaal, ritme ---------- */

/* DE RODE KNOP. Een vorm, geen apart gedrag: hij dient zowel de hero-CTA als de
   guide-uitklapper, zodat er niet twee soorten primaire knop op een pagina staan. */
.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.72rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
/* Zichtbare focus, en niet alleen voor de muis: dit paneel moet met het toetsenbord te
   bedienen zijn en dan moet je kunnen zien waar je bent. */
.btn-accent:focus-visible { outline: 3px solid var(--header); outline-offset: 2px; }

.home-masthead { margin: 0 0 1.6rem; }
.home-masthead h1 { margin-bottom: 0.5rem; }
.home-masthead .lede { margin: 0; }

/* HET UITGELICHTE VERHAAL. Beeld en tekst naast elkaar, met het beeld eerst in de bron zodat
   het op een smal scherm bovenaan staat - daar is het de blikvanger, op een breed scherm is
   het de rechterhelft. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 2rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 3rem;
}
.home-hero-media { display: block; order: 2; }
.home-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.home-hero-body { order: 1; padding: 2rem 2.25rem; }
.home-hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.home-hero-eyebrow a { color: var(--accent); text-decoration: none; }
.home-hero-eyebrow a:hover { text-decoration: underline; }
.home-hero-title {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.home-hero-title a { color: var(--text); text-decoration: none; }
.home-hero-title a:hover { color: var(--accent); }
.home-hero-standfirst {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 34rem;
}
.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin: 0;
}
.home-hero-cta time { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }

/* HET RITME VAN DE PAGINA. Meer lucht tussen de secties dan tussen de kaarten, zodat de
   blokken als blokken lezen in plaats van als een doorlopende lijst. */
.home-section { margin: 0 0 3rem; }
.home-section > h2 {
  margin-top: 0;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--rule);
}
.home-section > .lede { margin-top: 0.6rem; }
.home-section .era-grid,
.home-section .card-grid { margin-bottom: 0; }

/* DE ZOEKINGANG OP DE PAGINA ZELF. Er stond er een in de koptekst, maar die is klein, staat
   tussen de navigatie en verdwijnt op een telefoon in het menu. Wie hier binnenkomt met een
   naam, een plaats of een jaartal, hoort niet eerst de navigatie te hoeven lezen. Zelfde
   formulier, zelfde /search/, geen tweede mechanisme. */
.home-search {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  max-width: 40rem;
  margin: 1.2rem 0 0.5rem;
}
.home-search input {
  flex: 1 1 auto;
  /* Zonder dit dwingt de eigen minimumbreedte van een input het formulier breder dan zijn
     kolom, en loopt de knop op een smal scherm buiten beeld. */
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.home-search input::placeholder { color: var(--muted); }
.home-search input:focus-visible { outline: 3px solid var(--header); outline-offset: 1px; }
.home-search .btn-accent { flex: 0 0 auto; }
.home-search-alt {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

/* DE INSTAPPUNTEN — met opzet geen tegels. Onder deze sectie staan al twee rasters (perioden
   en gidsen) en daaronder de kaarten; een vierde raster zou de rangorde helemaal uitvlakken.
   Dit zijn tekstblokken met een accentlijn erboven: leesbaar als redactie, niet als etalage. */
.pick-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  /* 24rem geeft op de inhoudsbreedte twee kolommen, dus vier instappunten vullen precies
     twee rijen; smaller valt het vanzelf terug naar één kolom. `min(24rem, 100%)` is geen
     versiering: zonder die grens houdt de kolom haar minimum van 384px vast op een telefoon
     van 375px, en dan schuift de hele pagina horizontaal. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem 2.25rem;
}
.pick { border-top: 2px solid var(--accent); padding-top: 0.75rem; }
.pick-era {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.pick-title { font-size: 1.1rem; line-height: 1.3; margin: 0 0 0.4rem; }
.pick-title a { color: var(--text); text-decoration: none; }
.pick-title a:hover { color: var(--accent); }
.pick-note { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* DE RECENTE SECTIE. Zes artikelen in een raster dat op deze breedte drie kolommen geeft: twee
   volle rijen in plaats van de weesrij van twee die veertien kaarten opleverden. */
.home-latest .card-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.home-latest-more {
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 1.1rem 0 0;
}

@media (max-width: 720px) {
  .home-hero { grid-template-columns: 1fr; gap: 0; }
  .home-hero-media { order: 1; }
  .home-hero-body { order: 2; padding: 1.4rem 1.25rem 1.6rem; }
  .home-hero-title { font-size: 1.5rem; }
  .home-hero-standfirst { font-size: 1rem; margin-bottom: 1.1rem; }
  /* Schermbreed en met een ruime raakzone: op een telefoon is dit de hoofdingang. */
  .home-hero-cta .btn-accent,
  .guide-dropdown > summary.btn-accent {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1.2rem;
  }
  .home-hero-cta { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .home-hero-cta time { text-align: center; }
  .home-section { margin-bottom: 2.25rem; }
  /* Naast elkaar zou het invoerveld hier tot een paar tekens worden geknepen; onder elkaar
     houden beide een volwaardige raakzone. */
  .home-search { flex-direction: column; gap: 0.55rem; }
  .home-search .btn-accent { width: 100%; text-align: center; padding: 0.8rem 1.2rem; }
  .pick-list { gap: 1.25rem; }
}

/* Discovery — compact cross-links on topic hubs, era pages and search results */
.hub-footer { font-family: var(--sans); font-size: 0.88rem; }
.hub-footer p { margin: 0.35rem 0; }
.hub-siblings, .hub-indexes, .era-indexes { color: var(--muted); }
.era-indexes { font-family: var(--sans); font-size: 0.88rem; margin: -1rem 0 1.75rem; }
.search-kind {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 0.5rem;
}

.guide-index { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.era-grid a span.guide-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.45rem;
}

/* Search */
.search-form { display: flex; gap: 0.5rem; margin: 1.25rem 0 1.5rem; }
.search-form input {
  flex: 1;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.search-form input:focus { outline: 2px solid #293744; }
.search-count { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }

/* Index page: search box + random link */
.idx-search {
  max-width: var(--readw);
  margin: 0 auto 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}
.idx-search form { display: flex; gap: 0.5rem; }
.idx-search input {
  flex: 1;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.idx-search input:focus { outline: 2px solid #f0b429; }
.idx-search button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}
.idx-search button:hover { background: var(--accent-dark); }
.idx-random-line { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin: 0.7rem 0 0; }

/* Index page: CSS-only tabs (radio-driven, no JS needed) */
.idx-tabs { margin: 0 auto; }
.idx-tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.idx-tab-labels {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.5rem;
  font-family: var(--sans);
}
.idx-tab-labels label {
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.idx-panel { display: none; }
.idx-tab-labels label:hover { color: var(--text); }
#idx-tab-alpha:checked ~ .idx-tab-labels label[for="idx-tab-alpha"],
#idx-tab-topic:checked ~ .idx-tab-labels label[for="idx-tab-topic"],
#idx-tab-era:checked ~ .idx-tab-labels label[for="idx-tab-era"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#idx-tab-alpha:checked ~ .idx-panel-alpha,
#idx-tab-topic:checked ~ .idx-panel-topic,
#idx-tab-era:checked ~ .idx-panel-era {
  display: block;
}
.idx-panel .az-section h2 a { color: inherit; text-decoration: none; }
.idx-panel .az-section h2 a:hover { color: var(--accent); }
.idx-panel .az-section h2 small { font-size: 0.65em; color: var(--muted); font-weight: normal; }
/* Inside the index page, favour one scannable column of bold, shortened
   titles (like worldhistory.org's index) over the multi-column layout used
   on the era/topic hub pages, which have shorter title sets. */
.idx-panel .az-list { columns: 1; font-size: 1rem; }
.idx-panel .az-list li { margin: 0 0 0.55rem; }
.idx-panel .az-list a { font-weight: 700; color: var(--accent); }
.idx-panel .az-list a:hover { color: var(--accent-dark); }
.idx-empty-msg { color: var(--muted); font-family: var(--sans); padding: 1rem 0; }

/* Index page: three-column layout (filters | list | sidebar) */
.idx-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 960px) {
  .idx-layout { grid-template-columns: 15rem 1fr 16rem; }
}

.idx-filters {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-family: var(--sans);
}
.idx-filters > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  list-style: none;
}
.idx-filters > summary::-webkit-details-marker { display: none; }
.idx-filters > summary::after { content: " \25BE"; color: var(--muted); }
.idx-filters[open] > summary::after { content: " \25B4"; }
.idx-filters-body { margin-top: 0.9rem; }
.idx-filters-help { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.75rem; }
.idx-clear-btn {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.idx-clear-btn:hover { background: var(--accent-dark); }
.idx-filter-group { margin-bottom: 1.25rem; }
.idx-filter-group h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.idx-checkbox {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  cursor: pointer;
}
.idx-checkbox input { margin: 0; accent-color: var(--accent); }
.idx-count { color: var(--muted); font-size: 0.8em; }
.idx-filter-scroll { max-height: 16rem; overflow-y: auto; padding-right: 0.25rem; }

.idx-aside-box {
  font-family: var(--sans);
}
.idx-aside-box + .idx-aside-box { margin-top: 1.5rem; }
.idx-latest {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
}
.idx-latest h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.idx-latest ul { list-style: none; margin: 0; padding: 0; }
.idx-latest li { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.4; }
.idx-latest a { color: var(--text); text-decoration: none; }
.idx-latest a:hover { color: var(--accent); text-decoration: underline; }
.idx-aside .support-block { margin: 0; }

.dossier-card {
  border: 1px solid var(--rule);
  border-left: 4px solid #f0b429;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: #fdfbf6;
}
.dossier-card h3 { margin-top: 0.5rem; }

/* ---------- Discovery: mobile compactness ----------
   The homepage is a shop window, not an index. On a phone the topic/guide
   tiles were the dominant scroll driver: at one tile per row, five guides plus
   five eras cost ten full-height rows. Two tiles per row with tighter padding
   halves that without touching the desktop layout or any card structure. */
@media (max-width: 640px) {
  .era-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.55rem;
    margin: 0.9rem 0 1.5rem;
  }
  .era-grid a { padding: 0.7rem 0.75rem; }
  .era-grid a strong { font-size: 0.92rem; line-height: 1.25; }
  .era-grid a span { font-size: 0.72rem; }
  /* The full /guides/ index carries descriptions, so it stays single column. */
  .guide-index { grid-template-columns: 1fr; }
  .guide-index a { padding: 0.85rem 0.95rem; }
  .guide-more { margin-top: 1.25rem; }
  /* `columns: auto` en niet `columns: 1`: bij een kolomaantal van 1 BLIJFT dit een
     meerkolomscontainer, en zo een container met een vaste hoogte pagineert zijwaarts.
     Dat leverde een horizontale schuifbalk op en duwde de laatste era buiten beeld.
     Met `auto` is het weer gewone blokstroom en werkt de hoogtegrens zoals bedoeld. */
  .guide-dropdown-body { columns: auto; max-height: 60vh; overflow-y: auto; }
  .guide-dropdown-group { margin-bottom: 0.8rem; }
}

/* ---------- Historical map plot (E2.4-1) ----------
   Two classes, both built from tokens that already exist: --card, --rule, --accent,
   --sans, --maxw. No new token, no new palette, no component library (ADR-027).
   Positions arrive as inline percentages from the map projection — those are data,
   not style, which is why they are not in this file. */
.map-plot {
  position: relative;
  aspect-ratio: 2 / 1;          /* plate carrée: 360° by 180° */
  max-width: var(--maxw);
  margin: 1.5rem auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.map-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  text-decoration: none;
}
.map-point span {
  position: absolute;
  left: 0.8rem;
  top: -0.4rem;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text);
}
/* Below the fold of a phone the labels overlap; the list underneath carries the
   same information, so the plot drops its labels rather than becoming unreadable. */
@media (max-width: 40rem) {
  .map-point span { display: none; }
}

/* ARCH-023 — de toestemmingspoort voor analytics. Onopvallend, toetsenbordbereikbaar, en
   alleen zichtbaar zolang er nog geen keuze is gemaakt. Zonder toestemming laadt GA4 niet. */
.wsoh-consent {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60;
  max-width: 34rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .85rem 1rem; border: 1px solid currentColor; border-radius: .4rem;
  background: Canvas; color: CanvasText;
  font-size: .85rem; line-height: 1.45;
  box-shadow: 0 2px 12px rgb(0 0 0 / .18);
}
.wsoh-consent p { margin: 0 0 .25rem; flex: 1 1 100%; }
.wsoh-consent button {
  flex: 0 0 auto; padding: .35rem .9rem; cursor: pointer;
  border: 1px solid currentColor; border-radius: .25rem;
  background: transparent; color: inherit; font: inherit;
}
.wsoh-consent button[data-consent="granted"] { font-weight: 600; }

/* BIBLIOGRAFIE (herziening ARCH-024). Geen notenapparaat meer: geen superscripts, geen
   terugpijlen, geen typelabels. Een rustige lijst die leest als een bibliografie en de lopende
   tekst met rust laat. De cursieve titel komt van `<cite>` zelf, niet van deze regels — zonder
   stylesheet blijft de opmaak dus correct. */
.bibliography { margin-top: 2.5rem; }
.bibliography-list { list-style: none; padding-left: 0; }
.bibliography-list li {
  margin-bottom: .6rem; line-height: 1.5;
  padding-left: 1.4rem; text-indent: -1.4rem;   /* hangende inspringing, zoals een bibliografie */
}
.bibliography-buy { font-size: .85em; margin-left: .35rem; opacity: .8; }

/* ============================================================================
   ARCH-030 — DE WINKELINGANG EN HET PRODUCTBLOK.

   HET BESTAANDE PATROON WINT. De kaarten hergebruiken de vorm die de site al kent:
   dezelfde rand, dezelfde radius van 6px, dezelfde accentkleur. Er komt geen tweede
   kaartsysteem naast `.card` en `.dossier-card`; wat hier bij komt is uitsluitend de
   indeling die een product nodig heeft en een artikel niet — een prijs, een lijst van
   wat je krijgt, en een preview met een echte beeldverhouding.

   GEEN OVERLAY, GEEN STICKY, GEEN ANIMATIE. Er staat hier met opzet geen `position: fixed`
   en geen `@keyframes`: een verkoopblok dat over de tekst schuift of knippert, concurreert
   met de inhoud waar het onder staat.

   RUIMTE VOOR ADVERTENTIES IS HIER NIET AAN DE ORDE (ARCH-031). Deze blokken zien er
   bewust niet uit als een advertentie: ze dragen de merkkleur, staan binnen de leeskolom
   en zijn als aankoop gelabeld. Dat onderscheid moet blijven staan wanneer er ooit een
   echte advertentie bij komt.
   ============================================================================ */

/* ── DE VIJF AFDELINGEN ───────────────────────────────────────────────────────
   Elke afdeling is een band: een kop met een redactionele inleiding, en daaronder een
   raster van kaarten die door hun BEELD worden gedragen. Er staat nergens een titelvlak
   zonder beeld; een kaart zonder foto is een gat met een lettertype erin, en die hoort
   niet op een pagina die zich als uitgeverij presenteert. */

/* DE LEDENPAGINA DEELT DEZE REGELS, ZIJ KOPIEERT ZE NIET.
   Gevraagd werd of /members/ eruit kon zien als /shop/. Dat kan op twee manieren: de waarden
   overschrijven onder een tweede naam, of dezelfde regel door beide pagina's laten gebruiken.
   Het eerste ziet er vandaag hetzelfde uit en loopt bij de eerste wijziging uiteen — dan is
   een van de twee pagina's stil achtergebleven en ziet niemand dat. Daarom staan de namen
   hier naast elkaar in een selector: wie de winkelkop verandert, verandert de ledenkop mee. */
.shop-hero,
.members-hero {
  max-width: var(--maxw);
  margin: 0 auto 2.6rem;
  padding: 2rem 1rem 0;
}
.shop-hero-kicker,
.members-hero-kicker {
  margin: 0 0 .5rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.shop-hero-title,
.members-hero-title { margin: 0 0 .8rem; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; }
.shop-hero-lead,
.members-hero-lead { margin: 0; max-width: var(--readw); font-size: 1.12rem; line-height: 1.6; color: var(--text); }

/* De afdelingsbalk is een inhoudsopgave, geen menu: hij noemt de vijf namen voluit, want
   "Educational Resources" en "Books & E-books" zijn juist het onderscheid dat de bezoeker
   zoekt. Afkorten tot "Books" en "Education" maakt hem korter en onbruikbaar. */
.shop-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; }
.shop-nav-link {
  font-family: var(--sans); font-size: .84rem; font-weight: 600; text-decoration: none;
  color: var(--text); background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: .5rem .9rem; min-height: 40px; display: inline-flex; align-items: center;
}
.shop-nav-link:hover { border-color: var(--accent); color: var(--accent); }

/* De staande verklaring. World History Encyclopedia zet boven zijn fonds wie zij zijn en
   waarom je hen zou geloven — redactionele onafhankelijkheid, wie hen aanbeveelt, wat er met
   het geld gebeurt. Een winkel zonder die alinea is een schap; met die alinea is het een
   uitgeverij die ook iets verkoopt. */
.shop-standing {
  max-width: var(--maxw); margin: 0 auto 2.6rem; padding: 1.1rem 1.2rem;
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.shop-standing p { margin: 0; max-width: 58rem; font-size: .96rem; line-height: 1.62; }

.shop-dept { max-width: var(--maxw); margin: 0 auto 3.4rem; padding: 0 1rem; scroll-margin-top: 1.5rem; }
.shop-dept-head,
.members-band-head { border-top: 3px solid var(--accent); padding-top: .9rem; margin-bottom: 1.4rem; }
.shop-dept-title,
.members-band-head > h2 { margin: 0 0 .45rem; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.shop-dept-lead { margin: 0 0 .5rem; max-width: var(--readw); font-size: 1rem; line-height: 1.6; color: var(--text); }
.shop-dept-count {
  margin: 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

.shop-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
/* De kledinglijn telt vijftien artikelen die elkaar sterk lijken; smallere kaarten laten
   de afdeling als één rek lezen in plaats van als vijftien losse aankondigingen. */
.shop-grid-dense { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.1rem; }

/* VIER TITELS HOREN OP EEN RIJ, OF IN EEN VIERKANT. Met `auto-fill` vielen er drie op de
   eerste rij en bleef de vierde als wees achter; dat leest als een fout in plaats van als een
   fonds. Vier kolommen breed, twee bij twee op een middenscherm. */
.shop-grid-quad { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .shop-grid-quad { grid-template-columns: repeat(2, 1fr); } }

/* VANAF VIJF TITELS SCHUIFT DE AFDELING DOOR IN PLAATS VAN AF TE BREKEN.
   Vier kaarten passen op een rij. De vijfde viel naar een tweede rij die op een breed scherm
   voor driekwart leeg stond, en zo'n halve rij leest als een restpartij — precies het beeld dat
   deze pagina niet mag geven van een fonds dat elke maand groeit. De rij loopt daarom door.

   DE MAAT IS ZO GEKOZEN DAT DE VIJFDE KAART ZICHTBAAR UITSTEEKT. `--rail-card` is smal genoeg
   dat er op een breed scherm ruim vier passen en de volgende half in beeld hangt. Dat randje IS
   de aanwijzing dat er meer staat; een rail die precies op vier eindigt ziet eruit als een raster
   en niemand scrolt hem. De "view all"-link eronder blijft er hoe dan ook staan, want een
   scrollrail is een aanwijzing en geen garantie dat iemand hem opmerkt.

   SCROLLBAAR MOET OOK BEDIENBAAR ZIJN. Het sjabloon geeft de rail tabindex en een naam, zodat
   het toetsenbord erin kan scrollen; hier hoort daar een zichtbare focusring bij, anders weet
   niemand dat hij er is. `scroll-padding` houdt de eerste kaart vrij van de rand bij het
   snappen. Wie "verminderde beweging" heeft ingesteld krijgt geen vloeiende sprong.

   GEEN STICKY OF JS-PIJLEN. Een rail die met vinger, muiswiel, trackpad en toetsenbord werkt
   heeft geen knoppen nodig die kapot kunnen gaan; deze pagina moet het ook doen als er geen
   script laadt. */
/* DE CAROUSEL: PRECIES DRIE HELE KAARTEN, TWEE, OF EEN.

   Hier stond een rij met een VASTE kaartbreedte van 15.5rem. Op 1440 px pasten er daardoor vier
   hele kaarten en een vijfde half; die vijfde rand las als een fout in de opmaak en niet als een
   uitnodiging om te schuiven. De breedte wordt nu uit het AANTAL gerekend, zodat er per definitie
   niets wordt afgesneden: --rail-visible kaarten en de tussenruimtes vullen samen exact de rij.

   ALIGN-ITEMS: START, EN DAAR ZIT DE WITRUIMTE IN. Een grid strekt zijn items tot de hoogte van
   de langste; de voet van een kaart staat met `margin-top: auto` onderaan. Op 390 px betekende dat
   tot 414 px leegte tussen "Read more" en de prijsregel van elke kaart in deze rij, want de langste
   kaart was daar 1073 px hoog en de kortste 665. Gemeten voor en na op /shop/: de gaten liepen van
   394-414 px terug naar 6 px. Elke kaart is nu zo hoog als haar eigen inhoud, en dat is precies wat
   een carousel nodig heeft, want er staat er toch maar een groep tegelijk in beeld.

   GEEN ZIJDELINGSE PADDING. Die was er voor de focusring; die tekent nu naar binnen. Padding zou
   de rekensom hierboven vertroebelen en een streepje van de buurkaart laten zien. */
.shop-grid-rail {
  --rail-visible: 3;
  --rail-gap: 1.1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rail-visible) - 1) * var(--rail-gap)) / var(--rail-visible));
  grid-template-columns: none;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* GEEN `scroll-behavior: smooth` HIER. De sprong wordt in /assets/shop-rail.js per frame
     gezet, omdat de vloeiende variant van de browser op een rij met mandatory snapping
     niets doet (gemeten 2026-09-03: scrollTo, scrollBy en scrollIntoView lieten scrollLeft
     op 0 staan). Stond hij hier wel, dan zou hij met die eigen animatie vechten. */
  gap: var(--rail-gap);
  padding: 0 0 1rem;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.shop-grid-rail > .shop-card { scroll-snap-align: start; }
.shop-grid-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.shop-grid-rail::-webkit-scrollbar { height: 8px; }
.shop-grid-rail::-webkit-scrollbar-track { background: transparent; }
.shop-grid-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.shop-grid-rail::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (max-width: 1024px) { .shop-grid-rail { --rail-visible: 2; } }
@media (max-width: 640px)  { .shop-grid-rail { --rail-visible: 1; } }

/* De rij zit in een blok dat de knoppen draagt; `position: relative` is er voor die knoppen en
   `overflow: hidden` houdt een kaart die net buiten de rij valt binnen de pagina, zodat er nooit
   horizontaal gescrold hoeft te worden op de pagina zelf. */
.shop-rail { position: relative; }

.shop-rail-controls { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .2rem; }
.shop-rail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.shop-rail-btn:hover { background: var(--bg); border-color: var(--muted); }
.shop-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wie beweging heeft afgezet, krijgt geen automatische beweging en ook geen vloeiende sprong;
   het script leest dezelfde voorkeur en zet de tijdklok dan helemaal niet aan. */
@media (prefers-reduced-motion: reduce) {
  .shop-grid-rail { scroll-behavior: auto; }
  .shop-rail-btn { transition: none; }
}

/* DRIE STRENGEN NAAST ELKAAR, EN OP EEN TELEFOON ONDER ELKAAR.
   Dossier, e-book en roman zijn geen willekeurige stapel maar het antwoord op "wat maken
   jullie eigenlijk". Drie vaste kolommen, want met `auto-fill` viel de roman als wees op een
   tweede rij zodra de kaart iets breder werd — precies de halve rij die de winkelpagina al
   niet mag tonen. Onder de 900 px worden het er twee, onder de 620 px een. */
.shop-grid-trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .shop-grid-trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .shop-grid-trio { grid-template-columns: 1fr; } }

/* TWEE TITELS NAAST ELKAAR. "Just released" toont er precies twee; met het standaardraster
   (`auto-fill`, minimaal 17rem) staan ze op een brede kolom uit elkaar getrokken en op een
   smalle onder elkaar, wat allebei goed is — maar op de tussenmaat kroop de tweede kaart soms
   alleen op een rij. Twee kolommen, tot de kaart echt te smal wordt. */
.shop-grid-duo { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .shop-grid-duo { grid-template-columns: 1fr; } }

/* De banden op de ledenpagina staan in de proza-kolom en niet in de brede winkelkolom;
   de kop erboven leent wel de accentlijn van de winkelafdeling (zie `.shop-dept-head`),
   zodat de twee pagina's als een huis lezen. */
.members-band { margin: 2.6rem 0; }
.members-band-head > p {
  margin: 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Een aangekondigde titel heeft geen prijsregel met een koopknop, dus de voet zou leeg
   afhangen. Hij draagt in plaats daarvan wat er wel te zeggen valt. */
.members-band .shop-card-foot .shop-card-tag { margin-left: auto; }

/* DE "ALLES ZIEN"-KNOP KRIJGT ZIJN EIGEN REGEL, EN WEL BIJ ALLE DRIE TEGELIJK.
   In de strengkaarten staat naast de knop een telling ("2 out now"). Met de standaardvoet —
   flex, space-between, wrap — paste dat paar bij "All e-books" nog net naast elkaar en brak
   het bij "All member dossiers" af naar een tweede regel. Drie kaarten naast elkaar met de
   knop op drie verschillende hoogtes leest als drie verschillende kaarten. De knop gaat
   daarom altijd onder de telling staan, over de volle breedte: dan liggen de drie knoppen
   gelijk, ongeacht hoe lang de naam van de streng is — en dat is precies het punt, want deze
   knop moet opvallen als de weg naar de hele collectie. */
.shop-grid-trio .shop-card-foot { flex-direction: column; align-items: stretch; gap: .55rem; }
.shop-grid-trio .shop-card-buy { justify-content: center; white-space: normal; text-align: center; }

.shop-more { margin: 1.2rem 0 0; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.shop-more-link {
  font-family: var(--sans); font-weight: 700; font-size: .9rem; text-decoration: none;
  color: var(--text); background: var(--card); border: 1px solid var(--rule);
  border-radius: 3px; padding: .65rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center;
}
.shop-more-link:hover { border-color: var(--accent); color: var(--accent); }
.shop-more-note { font-family: var(--sans); font-size: .82rem; color: var(--muted); }

/* De kopstukopmaak: één of twee titels liggen breed, met het beeld groot naast de tekst.
   Een uitgever zet zijn hoofdtitel ook niet als postzegel in een lege rij. */
.shop-grid-feature { grid-template-columns: 1fr; gap: 1.2rem; }
.shop-grid-feature .shop-card { flex-direction: row; align-items: stretch; }
.shop-grid-feature .shop-card-media { flex: 0 0 clamp(16rem, 42%, 30rem); border-right: 1px solid var(--rule); }

.shop-grid-feature .shop-card-body { padding: 1.4rem 1.6rem; gap: .55rem; justify-content: center; }
.shop-grid-feature .shop-card-title { font-size: 1.45rem; }
.shop-grid-feature .shop-card-note { font-size: .92rem; max-width: 34rem; }
.shop-grid-feature .shop-card-foot { margin-top: 1rem; }

.shop-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
.shop-card-media { position: relative; display: block; background: var(--bg); line-height: 0; }
.shop-card-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* `<picture>` is standaard inline en heeft geen eigen hoogte; de `height: 100%` van het beeld
   erin rekende daardoor tegen niets en liet het kopstuk half leeg. */
.shop-card-media picture { display: block; height: 100%; }
/* Boekomslagen staan rechtop. In een liggend vak drijven zij als postzegel tussen twee
   grijze balken; een staand vak van 4:5 laat de omslag het beeld dragen zonder hem bij te
   snijden — een omslag half afsnijden is een titel half tonen. */
.shop-grid:not(.shop-grid-dense) .shop-card-media img { aspect-ratio: 4 / 5; object-fit: contain; padding: .7rem; }

/* SPECIFICITEIT EN VOLGORDE, GEEN SMAAK. De regel hierboven telt drie klassen — `:not()` telt
   mee — en deze telde er evenveel; bij gelijkspel wint wie later staat, en dat was de regel
   hierboven. Het kopstuk kreeg daardoor `contain` in een 4:5-vak en stond half leeg. Hij staat
   nu ná zijn tegenhanger en draagt een klasse extra, zodat er niets meer aan toeval hangt. */
.shop-grid.shop-grid-feature li.shop-card .shop-card-media img,
.shop-grid.shop-grid-feature li.shop-card .shop-card-media picture img {
  height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; padding: 0;
}
.shop-grid.shop-grid-feature li.shop-card .shop-card-media picture { display: block; height: 100%; }

/* CONCEPT IS EEN TOESTAND, GEEN FOUT. De kaart blijft volledig zichtbaar — het product
   bestaat en is af genoeg om te tonen — maar draagt geen koopknop en geen link, want die
   zou op een 404 uitkomen. Het vaantje zegt waarom, in gewone woorden. */
.shop-card.is-pending .shop-card-media img { filter: saturate(.72); }
.shop-flag {
  position: absolute; left: .6rem; top: .6rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--header);
  padding: .3rem .55rem; border-radius: 3px; line-height: 1.2;
}
.shop-card-body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.shop-card-kicker {
  margin: 0; font-family: var(--sans); font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.shop-card-title { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.shop-card-title a { text-decoration: none; color: var(--text); }
.shop-card-title a:hover { color: var(--accent); text-decoration: underline; }
/* De beschrijving is de reden dat dit een fonds is en geen schap: WHE geeft elke titel een
   alinea die zegt wat erin staat, en zonder die alinea is een kaart een prijskaartje. */
.shop-card-blurb { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text); }
.shop-card-note { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* DE REST VAN DE BESCHRIJVING, INGEKLAPT.
   De kaarten staan in een grid, dus de langste tekst in een rij bepaalt de hoogte van de
   hele rij; op een telefoon is die rij een kolom en scrol je langs witruimte die een
   buurproduct veroorzaakt. <details> en niet een script: zonder JavaScript werkt het ook,
   en de tekst staat volledig in de HTML in plaats van te worden afgekapt. */
.shop-card-details { margin: 0; }
.shop-card-details > summary {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; color: var(--accent);
  cursor: pointer; list-style: none; padding: .15rem 0;
  /* 44px hoog, het tikdoel dat op een telefoon nog te raken is zonder mis te tikken.
     Stond eerst op 1.9rem en dat mat 30px — te klein, en dit staat tussen twee links in. */
  min-height: 44px; display: inline-flex; align-items: center;
}
.shop-card-details > summary::-webkit-details-marker { display: none; }
/* GEEN PIJLTJE. Een chevron via een CSS-escape hangt af van het lettertype en van hoe de
   parser de escape afkapt; hij kwam als een leeg blokje op het scherm. Twee woorden die
   wisselen zeggen bovendien preciezer wat de knop doet dan een gedraaide punthaak. */
.shop-card-details > summary .shop-card-less { display: none; }
.shop-card-details[open] > summary .shop-card-more { display: none; }
.shop-card-details[open] > summary .shop-card-less { display: inline; }
.shop-card-details > summary:hover { text-decoration: underline; }
.shop-card-details[open] > summary { color: var(--muted); }
.shop-card-blurb-rest { margin-top: .35rem; }

/* DE HELE KAART IS EEN KLIKTARGET, NIET ALLEEN DE KNOP.
   Tot 2026-08-31 waren alleen het beeld en de titel een link. De kicker, de prijs en alle
   witruimte ertussen waren dat niet, en op een telefoon — waar de shirtfoto's wit op wit
   zijn en dus niet als knop lezen — tikte je daardoor voortdurend naast het doel. De
   titel-link krijgt een overlay over de hele kaart: één link, met de productnaam als
   linktekst, dus voor een schermlezer verandert er niets.
   De z-index-volgorde is het hele mechanisme: de overlay ligt op 1, en alles waar je
   afzonderlijk op moet kunnen klikken — de koopknop en de uitklapper — op 2. */
.shop-card { position: relative; }
.shop-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.shop-card-buy { position: relative; z-index: 2; }
/* NIET het hele <details>-blok boven de overlay: dat is een blokelement over de volle
   breedte van de kaart, dus de witruimte NAAST "Read more" werd dood — gemeten, niet
   bedacht. Alleen de summary zelf, en die is inline-flex en dus zo breed als zijn tekst.
   De uitgeklapte alinea blijft bewust onder de overlay: daarop klikken hoort gewoon
   naar het product te gaan, net als de rest van de tekst op de kaart. */

.shop-card-details > summary { position: relative; z-index: 2; }
.shop-card:hover .shop-card-title a { color: var(--accent); }

.shop-card-buy {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--accent); border-radius: 3px; padding: .5rem .8rem;
  min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap;
}
.shop-card-buy:hover { background: var(--accent-dark); color: #fff; }
.shop-card-foot {
  margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}
.shop-card-price { font-family: var(--sans); font-weight: 700; font-size: 1rem; }
.shop-card-tag { font-family: var(--sans); font-size: .75rem; color: var(--muted); }

/* De sluitband beantwoordt de drie vragen die een koper stelt vlak voordat hij afhaakt:
   hoe krijg ik het, waar gaat het geld heen, en wie verstuurt het pakje. */
.shop-close {
  max-width: var(--maxw); margin: 0 auto 3rem; padding: 1.6rem 1rem 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.shop-close-col h2 { margin: 0 0 .5rem; font-size: 1.12rem; }
.shop-close-col p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--text); }

@media (max-width: 640px) {
  .shop-hero { padding-top: 1.4rem; }
  .shop-hero-lead { font-size: 1.02rem; }
  .shop-nav { gap: .4rem; }
  .shop-dept { margin-bottom: 2.6rem; }
  /* TWEE KOLOMMEN, EN DAT MOET AFGEDWONGEN. Met `auto-fill` en `minmax(9.5rem, 1fr)` bleef er
     op 390 px toch een enkele kolom staan: een rasteritem mag standaard niet smaller worden dan
     zijn min-content, en dat was hier de knop "View in the shop" met `white-space: nowrap` —
     samen met de prijs ruim 180 px, waardoor twee kolommen niet meer pasten. `minmax(0, 1fr)`
     haalt die bodem weg en de knop mag hieronder gewoon afbreken. Zonder dit werd elke kaart
     schermbreed en werd de pagina twee keer zo lang als nodig. */
  /* DE RAIL VALT HIER BUITEN, EN DAT MOET EXPLICIET. Deze regel staat later in het bestand
     dan `.shop-grid-rail` en telt evenveel klassen, dus hij won: de carousel kreeg op 390 px
     twee expliciete kolommen van 0 px, waardoor de eerste twee kaarten tot 2 px in elkaar
     schoven. De rail rekent haar eigen kolombreedte uit het aantal zichtbare kaarten.

     EN DE KOPSTUKKEN OOK, WANT ANDERS BLIJFT ER EEN LEGE KOLOM STAAN. `:not(.shop-grid-rail)`
     telt twee klassen; `.shop-grid-feature` één. Deze regel won dus van het kopstuk verderop
     in dit blok, en een afdeling met ÉÉN product kreeg op 390 px twee kolommen van 152,6 px:
     de kaart nam de halve breedte en naast haar stond een gereserveerde lege kolom. Gemeten op
     2026-09-05 bij Historical Infographics & Maps en The Guilds Collection, gemeld uit een
     menselijke controle op een telefoon. Het aantal kolommen hoort te volgen uit het AANTAL
     zichtbare producten en niet uit een vaste halve kaartbreedte — vandaar `shop-grid-single`,
     dat het sjabloon zet zodra er precies één kaart in de afdeling staat. */
  .shop-grid:not(.shop-grid-rail):not(.shop-grid-feature):not(.shop-grid-single),
  .shop-grid-dense:not(.shop-grid-single),
  .shop-grid-quad:not(.shop-grid-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .shop-grid.shop-grid-single { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  /* EEN KAART IS ZO HOOG ALS HAAR EIGEN INHOUD. Een grid strekt zijn items tot de hoogte van
     de langste in de rij, en `.shop-card-foot` staat met `margin: auto 0 0` onderaan; op twee
     smalle kolommen betekende dat een gat tussen "Read more" en de prijsregel van de kortste
     kaart. Dezelfde reden waarom de rail al `align-items: start` draagt. Op een breed scherm
     blijft strekken wél gewenst: daar staan de kaarten naast elkaar op één ooghoogte. */
  .shop-grid { align-items: start; }
  .shop-card-buy { white-space: normal; padding: .45rem .65rem; font-size: .78rem; min-height: 38px; }
  .shop-card-blurb { font-size: .82rem; line-height: 1.5; }
  /* Naast elkaar wordt op een telefoon twee smalle kolommen; het kopstuk stapelt daarom.
     `minmax(0, 1fr)` en niet `1fr`: een rasterkolom mag standaard niet smaller worden dan de
     min-content van wat erin staat, en dat is hier de koopknop. Met een bodem van nul kan een
     kaart nooit breder worden dan de contentbreedte, en dus ook geen horizontale overloop
     veroorzaken. De klasse staat er dubbel op om de tweekolomsregel hierboven te verslaan. */
  .shop-grid.shop-grid-feature { grid-template-columns: minmax(0, 1fr); }
  .shop-grid-feature .shop-card { flex-direction: column; }
  .shop-grid-feature .shop-card-media { flex: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .shop-grid-feature .shop-card-media img { aspect-ratio: 4 / 3; }
  .shop-grid-feature .shop-card-body { padding: .9rem 1rem 1.05rem; }
  .shop-grid-feature .shop-card-title { font-size: 1.1rem; }
  .shop-card-body { padding: .7rem .75rem .85rem; }
  .shop-card-title { font-size: .98rem; }
  .shop-card-foot { flex-direction: column; align-items: flex-start; gap: .15rem; }
}


/* Het productblok onder een artikel. Twee kolommen op een breed scherm, gestapeld op een
   telefoon — en de preview verdwijnt daar niet, want juist een kaart wil je zien. */
.product-cta {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
  margin: 2.5rem 0 1.5rem; padding: 1.25rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 6px; background: var(--bg);
}
.product-cta-media img { width: 100%; height: auto; display: block; border-radius: 3px; border: 1px solid var(--rule); }
.product-cta-kicker {
  margin: 0 0 .3rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.product-cta-title { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.25; }
.product-cta-body p { margin: 0 0 .6rem; }
.product-cta-meta { font-family: var(--sans); font-size: .9rem; }
.product-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .6rem; }

/* RAAKDOELEN VAN 44 PIXELS, EN ALLEEN HIER. Gemeten op 375px was een knop in het productblok
   42 pixels hoog; de richtlijn is 44. De gedeelde `.btn` wordt NIET aangepast, want die zit op
   elke pagina van de site en een globale maatverandering hoort niet in een winkelroute thuis.
   Het productblok haalt de maat zelf. De winkelkaarten dragen sinds de herindeling geen knop
   meer maar een link op de titel; hun raakdoel is de kaart, niet een los rechthoekje. */
.product-cta .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-cta-delivery { font-size: .88rem; }
.product-cta-free { font-size: .85rem; color: var(--muted); margin-bottom: 0; }

@media (max-width: 640px) {
  .product-cta { grid-template-columns: 1fr; padding: 1rem; }
  .product-cta-media { max-width: 16rem; }
  /* HIER STOND `.shop-grid { grid-template-columns: 1fr; }` — een restant van de vorige
     winkelpagina, in een TWEEDE `@media (max-width: 640px)`-blok verderop in dit bestand. Het
     zette elk winkelraster op mobiel terug naar een enkele kolom en won van de regel hierboven
     op bronvolgorde, niet op specificiteit. Dat is precies het soort fout dat je niet ziet in
     de code die je aan het schrijven bent: de nieuwe regel klopte, hij werd alleen overstemd. */
}

/* DE GILDELADDER. Drie rangen die in elk handboek als trap worden getekend, terwijl de meeste
   mensen die eraan begonnen de bovenste tree nooit haalden. Daarom staan de toegangsvoorwaarde en
   het werk náást elkaar per rang, en sluit het kader met de uitgang: wie alleen de trap tekent,
   vertelt de helft. Geen beeld, geen icoon — de vorm komt uit de tekst zelf, zodat de figuur op
   papier en in een schermlezer hetzelfde zegt. */
.guild-ladder {
  max-width: var(--readw);
  margin: 1.75rem auto 2rem;
  padding: 0;
}
.guild-ladder-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
.guild-ladder-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.guild-ladder-step {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  font-family: var(--sans);
}
/* Elke volgende rang springt een klein stukje in: de trap blijft zichtbaar zonder pijl of beeld.
   Op een smal scherm vervalt de inspringing, want daar kost zij leesbreedte en levert zij niets. */
@media (min-width: 40rem) {
  .guild-ladder-step + .guild-ladder-step { margin-left: 1.5rem; }
  .guild-ladder-step + .guild-ladder-step + .guild-ladder-step { margin-left: 3rem; }
}
.guild-ladder-rank {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
}
.guild-ladder-gate {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--accent-dark);
}
.guild-ladder-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.guild-ladder-exit {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  background: #eef1f3;
  border-radius: 6px;
  padding: 0.8rem 1.1rem;
  margin: 0.75rem 0 0;
}

/* HET DOCENTENKADER. Een bibliothecaris of docent scant een pagina op één vraag: kan ik hier een
   les mee beginnen. Dit blok zet leerdoelen, begrippen en discussievragen bij elkaar zodat dat
   antwoord in één oogopslag te geven is, en het blijft bij het afdrukken heel. */
.teacher-box {
  max-width: var(--readw);
  margin: 1.75rem auto 2rem;
  background: #eef1f3;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: 6px;
  padding: 1.1rem 1.4rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.94rem;
}
.teacher-box-title {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.teacher-box ol, .teacher-box ul { margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
.teacher-box li { margin-bottom: 0.35rem; line-height: 1.5; }
.teacher-box > :last-child { margin-bottom: 0; }

/* EEN BREDE TABEL MAG DE PAGINA NIET BREED MAKEN. De vergelijking heeft vier kolommen die op een
   telefoon niet passen; zonder deze wikkel schuift het hele document mee naar rechts. Nu schuift
   alleen de tabel, binnen haar eigen kader. */
.table-scroll { overflow-x: auto; margin: 1.25rem 0; }
.table-scroll table { margin: 0; min-width: 34rem; }

@media print {
  .guild-ladder-step, .teacher-box { break-inside: avoid; }
  .guild-ladder-step + .guild-ladder-step { margin-left: 0; }
  .table-scroll { overflow-x: visible; }
}

/* ---------- Datasets (ADR-056) ----------
   De drie datasetpagina's kwamen binnen als losstaande HTML met elk een eigen <head>, eigen
   webfonts en een eigen kopie van dezelfde regels. Dat is hier één blok geworden, op de tokens
   van deze stylesheet: geen tweede palet, geen tweede lettertype, geen `<style>` in een pagina.
   Alles onder het voorvoegsel `ds-`, zodat de sectie niets buiten zichzelf raakt. */

.ds { max-width: var(--maxw); margin: 0 auto; }
.ds-head h1 { margin-bottom: 0.4rem; }
.ds-standfirst { max-width: var(--readw); color: var(--muted); font-size: 1.1rem; margin: 0 0 1.4rem; }

.ds-counts {
  list-style: none; margin: 0 0 1.6rem; padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.2rem;
}
.ds-counts li { font-size: 0.85rem; color: var(--muted); }
.ds-counts b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.ds-counts span { display: block; }
/* De telregel bij het cijfer: de lezer kan hem tegen de tabel houden zonder de code te lezen. */
.ds-counts small { display: block; margin-top: 0.25rem; font-size: 0.7rem; line-height: 1.35; color: var(--muted); opacity: 0.85; }

.ds-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; }
.ds-controls input[type="search"], .ds-controls select {
  font: inherit; font-family: var(--sans); font-size: 0.95rem; color: var(--text);
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 0.55rem 0.7rem;
}
.ds-controls input[type="search"] { flex: 1 1 16rem; min-width: 0; }
.ds-btn {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 2px; padding: 0.55rem 0.9rem;
}
.ds-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.ds-btn-ghost { background: transparent; color: var(--accent); }
.ds-btn-ghost:hover { background: var(--accent); color: #fff; }

.ds-lede { max-width: var(--readw); }

.ds-tablewrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; background: var(--card); font-family: var(--sans); font-size: 0.92rem; }
.ds-table caption { text-align: left; padding: 0.8rem 0 0.7rem; color: var(--muted); font-size: 0.85rem; }
.ds-table th { text-align: left; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--text); padding: 0.6rem 0.7rem; white-space: nowrap; }
.ds-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ds-table th[aria-sort="ascending"] button::after { content: " \2191"; }
.ds-table th[aria-sort="descending"] button::after { content: " \2193"; }
.ds-table td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ds-table .ds-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table .ds-who { font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
.ds-table .ds-who small { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.ds-table .ds-src { font-size: 0.8rem; color: var(--muted); }
.ds-empty { padding: 1.2rem 0; color: var(--muted); }

.ds-dist { margin: 2rem 0; max-width: var(--readw); }
.ds-bar { display: flex; height: 0.85rem; border-radius: 2px; overflow: hidden; background: var(--rule); }
.ds-seg { display: block; height: 100%; }
.ds-key { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.ds-key i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.35rem; }
.ds-key b { color: var(--text); font-variant-numeric: tabular-nums; }
/* De vijf groepen van de verdelingsbalk. De BREEDTES worden geteld (site/lib/dataset-model.js);
   hier staat alleen welke kleur bij welke groep hoort. */
.ds-dis, i.ds-dis { background: #1f5654; }
.ds-kia, i.ds-kia { background: var(--accent); }
.ds-oth, i.ds-oth { background: #8a6b23; }
.ds-cap, i.ds-cap { background: #334267; }
.ds-unk, i.ds-unk { background: #98a2a6; }

.ds-notes { max-width: var(--readw); margin-top: 2rem; }
.ds-notes h2 { margin-top: 2rem; }
.ds-reuse { margin-top: 2rem; padding: 1rem 1.1rem; background: var(--card); border-left: 4px solid var(--accent); }
.ds-reuse p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ds-reuse p:last-child { margin-bottom: 0; }
.ds-cite { color: var(--muted); font-size: 0.88rem; }

/* De hubpagina. */
.ds-list { display: grid; gap: 1rem; margin: 1.6rem 0; }
.ds-item { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; background: var(--card); border: 1px solid var(--rule); padding: 1.2rem 1.3rem; }
.ds-item-body { flex: 1 1 26rem; min-width: 0; }
.ds-item h2, .ds-item h3 { margin: 0 0 0.5rem; font-size: 1.35rem; line-height: 1.25; }
.ds-item p { margin: 0 0 0.7rem; }
.ds-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.ds-item-grab { flex: 0 0 auto; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.ds-item-grab .ds-btn { display: inline-block; }

/* DE NOOT ONDER DE WINKELKNOP. Wat een research edition IS en wat de bundel wél en niet doet,
   hoorde nergens: de knop noemde alleen twee bedragen ("vijf los EUR 99.75, de bundel EUR 79.95")
   en liet de lezer raden of hij vijf bestanden kreeg of een samengevoegd document. Dat is precies
   het soort onduidelijkheid dat een koper laat afhaken. De uitleg staat er nu, in een kleinere en
   rustigere zet, want zij hoort ondergeschikt te zijn aan de knop en niet ernaast te concurreren. */
.ds-shop-note {
  max-width: 46rem;
  margin: .55rem 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}
.ds-item-soon { opacity: 0.85; }
.ds-status { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.ds-soon, .ds-about { max-width: var(--maxw); margin: 2.5rem auto 0; }

@media (max-width: 40rem) {
  .ds-counts { grid-template-columns: repeat(2, 1fr); }
  .ds-controls input[type="search"], .ds-controls select, .ds-controls .ds-btn { flex: 1 1 100%; text-align: center; }
  .ds-item-grab { width: 100%; }
}

/* ---------- Datasets: de eigen sectie op de voorpagina ----------
   Dezelfde tegel als het era- en gidsenraster — zelfde kaart, zelfde rand, zelfde typografie —
   maar in bredere kolommen, want een datasettitel is een hele zin ("European nobles who died on
   the first four crusades") en geen periodenaam. Er komt geen nieuw ontwerp bij; alleen de
   kolommaat verschilt, en de titel mag over twee regels lopen zonder de kaart te breken. */
.dataset-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.dataset-grid a strong { line-height: 1.3; margin-bottom: 0.35rem; }

/* ---------- Datasets: verfijning van de sectie zelf ----------
   De eerste overzetting was correct maar kaal. Wat hier bijkomt is uitsluitend typografie en
   rust: leesbare cijfers, een tabel die bij tweehonderd regels niet vermoeit, en een kop die
   blijft staan tijdens het scrollen. Geen nieuwe kleuren buiten de bestaande tokens. */
.ds-head { border-bottom: 1px solid var(--rule); padding-bottom: 0.2rem; margin-bottom: 1.4rem; }
.ds-counts {
  border-top: 0; padding-top: 0; margin-bottom: 1.4rem;
  gap: 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); overflow: hidden;
}
.ds-counts li { padding: 0.9rem 1.1rem; border-left: 1px solid var(--rule); }
.ds-counts li:first-child { border-left: 0; border-left: 4px solid var(--accent); }
.ds-counts b { font-size: 2.1rem; letter-spacing: -0.02em; }
.ds-counts span { font-weight: 600; color: var(--text); font-size: 0.82rem; }

.ds-controls { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--rule); }
.ds-table { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.ds-table thead th { position: sticky; top: 0; background: var(--card); z-index: 2; box-shadow: inset 0 -2px 0 var(--text); border-bottom: 0; }
.ds-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.018); }
.ds-table tbody tr:hover { background: rgba(181, 38, 0, 0.045); }
.ds-table tbody tr:last-child td { border-bottom: 0; }

.ds-dist { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 1.1rem 1.2rem; }
.ds-dist h2 { margin-top: 0; }
.ds-bar { height: 1.1rem; }

.ds-support { margin-top: 2rem; border-left: 4px solid var(--accent); padding: 0.2rem 0 0.2rem 1.1rem; }
.ds-support h2 { margin-top: 0; font-size: 1.15rem; }
.ds-support ul { margin: 0; padding-left: 1.1rem; }
.ds-support li { margin-bottom: 0.5rem; }

/* DE HUBKAARTEN DRAGEN DE TEGEL VAN DE VOORPAGINA. Era's, gidsen en datasets zijn drie
   bladerroutes naast elkaar; dat zij er verschillend uitzagen was een toevalligheid van twee
   losse ontwerpen en niet een onderscheid dat iets betekende. De waarden komen uit de huid
   (luxe-skin.css) en staan hier niet nog eens hardgecodeerd. */
.ds-item {
  background: var(--paper-2, var(--card));
  border: 1px solid var(--rule-strong, var(--rule));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  transition: box-shadow 0.15s ease;
}
.ds-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.ds-item h2 a { text-decoration: none; }
.ds-item h2 a:hover { text-decoration: underline; }

/* WAT NOG NIET BESTAAT, HOORT ER OOK NIET UIT TE ZIEN ALSOF HET AL KAN. De kaarten "in
   preparation" krijgen daarom papier zonder accent: dezelfde vorm, een rustiger vlak en een
   grijze rand. Zij lezen als aankondiging naast de sets die je nu kunt downloaden, zonder een
   tweede ontwerp te introduceren. */
.ds-item-soon {
  background: var(--card);
  border-left: 3px solid var(--rule-strong, var(--rule));
  border-style: dashed;
  border-left-style: solid;
}
.ds-item-soon:hover { box-shadow: none; }
.ds-status {
  display: inline-block; padding: 0.1rem 0.5rem;
  background: var(--rule); color: var(--muted); border-radius: 2px;
}
.ds-item-grab { min-width: 0; display: flex; align-items: flex-start; }