/* ---------- 0. De letters, van deze server ----------

   ZELF GEHOST EN NIET VIA GOOGLE FONTS, en dat is geen voorkeur maar een eis die uit de
   privacyverklaring volgt. Die pagina zegt met zoveel woorden dat er geen verzoek naar Google
   gaat voordat de bezoeker daarmee instemt. Een <link> naar fonts.googleapis.com zou op elke
   pagina onvoorwaardelijk twee verbindingen naar Google openen en dat IP-adres meesturen -
   dan is die zin niet meer waar. Dus staan de bestanden in /assets/fonts/.

   Het scheelt bovendien twee DNS- en TLS-rondes. De latin-ext-sneden staan er wel maar
   worden alleen opgehaald als er een teken op de pagina staat dat erin zit; unicode-range
   regelt dat, niet wij. Bestanden komen van Google Fonts en staan onder de OFL.
   ---------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   WRITESIDES OF HISTORY - SKIN "LUXE UITGEVERIJ"
   ----------------------------------------------------------------------------
   Een OVERLAY op style.css, geen vervanging. Laadt NA de bestaande stylesheet:

       <link rel="stylesheet" href="/css/style.css?v={{ buildTime }}">
       <link rel="stylesheet" href="/css/luxe-skin.css?v={{ buildTime }}">

   Deze laag raakt uitsluitend de HUID: kleur, letter, lijn, hoek, en ruimte
   binnen bestaande blokken. Geen enkele regel hierin verandert de volgorde, de
   plaats of het raster van een element - geen display, geen grid-template, geen
   order, geen float, geen position op een inhoudsblok. Wie die regel wil breken
   hoort dat in style.css te doen, want dan is het geen huid meer maar een
   verbouwing.

   HET IDEE. Een uitgeverij van standing schreeuwt met haar TITELS en fluistert
   met haar rubrieken. Daarom staan de sectiekoppen hier klein, in kapitalen op
   een haarlijn - als de rubrieken in het voorwerk van een boek - en krijgen de
   verhaaltitels de titelletter.

   WAAROM GEEN SCHREEFTITELS. Twee proeven zijn hierop afgevallen. Bodoni was
   niet scherp: een didone heeft haarlijnen die op 96 dpi onder de pixelgrens
   vallen, en dan smeert de renderer ze uit. Baskerville was wel scherp maar
   niet strak: een boekletter is warm en breed, en warmte is niet waar dit
   ontwerp om vraagt.

   Wat overblijft is de grotesk. Een schreefloze letter heeft geen dun-dik
   verschil, dus er is niets dat onder de pixelgrens kan vallen - hij is scherp
   door zijn bouw, niet door hinting. En hij is strak omdat hij geen versiering
   heeft om achter te schuilen. Dat is geen concessie aan de luxe: Phaidon,
   MACK en Fitzcarraldo zetten hun titels al decennia in een grotesk en zijn
   het tegendeel van goedkoop. De schreef blijft waar hij hoort: in de
   lopende tekst, waar hij het lezen dient.
   ============================================================================ */

/* ---------- 1. De tokens ---------- */
:root {
  /* Zwart met een warme kern; puur #000 leest als scherm, niet als inkt. */
  --header: #14100e;
  --ink: #14100e;
  --ink-soft: #2b2420;
  --header-text: #f6f2ed;

  /* HET ROOD BLIJFT HET ROOD. Exact de bestaande accentkleur: de merkherkenning
     zit in deze waarde en die geven we niet weg voor een modekleur. */
  --accent: #b52600;
  --accent-dark: #7c1a00;
  /* Op zwart is #b52600 te donker om te lezen; deze tint haalt 5.2:1. */
  --accent-on-dark: #e8553c;

  --bg: #ffffff;
  --card: #ffffff;
  --paper-2: #f7f5f2;
  --text: #1b1512;
  --muted: #6b635c;
  --rule: #e3ded7;
  --rule-strong: #cdc5bb;

  /* DE TITELLETTER, EN HAAR MAATVOERING. Elke letter heeft een eigen kegel: een
     grotesk met grote x-hoogte oogt op 3 rem anders dan een schreefletter op
     dezelfde maat. Daarom staan maat, gewicht en spatiering hier als drie
     variabelen bij elkaar - een andere titelletter is dan een regel, geen
     herziening van de hele maatvoering.

     Negatieve spatiering hoort bij een grotesk en NIET bij een schreefletter:
     bij een schreef gaan de schreven elkaar raken en wordt de titel juist
     minder scherp. Wie hier een schreef terugzet, zet ook deze waarde op 0. */
  --display: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --display-scale: 0.92;
  --display-weight: 700;
  --display-tracking: -0.015em;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
}

body { font-size: 1.06rem; line-height: 1.72; }

/* RECHTE HOEKEN, EN WEL ZONDER VIJFTIG UITZONDERINGEN NA TE LOPEN.

   Een gedrukte pagina heeft rechte hoeken; die 4-8px radius is precies wat het
   vorige ontwerp als webtemplate laat lezen. style.css zet hem alleen op ruim
   vijftig plaatsen, en een lijst van vijftig overschrijvingen is bij de volgende
   component alweer incompleet - dat is hier ook echt gebeurd: de wispelknop op
   de index bleef een pil terwijl alle andere knoppen al vierkant waren.

   Vandaar een enkele regel. `!important` is nodig en niet lui: de universele
   selector heeft specificiteit nul, dus `.card { border-radius: 6px }` wint
   anders altijd, ongeacht de volgorde van de bestanden. Deze laag IS de
   overschrijvende laag; dat is precies waar dit sleutelwoord voor bedoeld is.

   Wat rond HOORT te zijn, staat er meteen onder en niet ergens verderop. */
*, *::before, *::after { border-radius: 0 !important; }
.social-icon { border-radius: 50% !important; }
.map-point    { border-radius: 50% !important; }
.story-round-button,
.story-timeline input[type="range"]::-webkit-slider-thumb,
.story-timeline input[type="range"]::-moz-range-thumb { border-radius: 50% !important; }

/* Schaduw is geen materiaal - een haarlijn wel. */
.card:hover,
.era-grid a:hover { box-shadow: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }

/* ---------- 2. De kop: het impressum ---------- */
.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--accent);
  box-shadow: inset 0 -4px 0 0 rgba(246, 242, 237, 0.14);
}
.header-inner { padding: 1.15rem 1.25rem 0.9rem; }

.site-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.site-title span {
  color: var(--accent-on-dark);
  font-style: italic;
  font-weight: 400;
}

.site-header nav {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  gap: 0.25rem 1.35rem;
}
.site-header nav a,
.nav-summary { color: #cbc2b8; }
.site-header nav a:hover { color: #ffffff; }

.nav-dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--ink);
  border-top: 3px solid var(--accent);
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0.02em;
}
/* DE UITKLAPPER STOND ONLEESBAAR, EN DAT WAS EEN SPECIFICITEITSKWESTIE.
   `.site-header nav a` zet hierboven #cbc2b8 — een lichte tint, bedoeld voor de DONKERE
   balk. Deze uitklapper kreeg in de huid een WITTE achtergrond, en een regel
   `.nav-dropdown-menu a` (0,1,1) verliest het van `.site-header nav a` (0,1,2), hoe ver hij
   ook naar achteren staat. Lichtgrijs op wit haalde geen enkele contrastnorm. Met het
   voorvoegsel erbij wint deze regel wél, en staat er bijna-zwart op wit: ruim 15:1. */
.site-header nav .nav-dropdown-menu a { color: var(--ink); }
.site-header nav .nav-dropdown-menu a:hover { background: var(--ink); color: #ffffff; }
.site-header nav .nav-dropdown-menu a small { color: var(--muted); }

.btn-membership {
  background: var(--accent);
  border-radius: 0;
  letter-spacing: 0.13em;
}
.btn-membership:hover { background: var(--accent-dark); }

.header-search input {
  border-radius: 0;
  font-family: var(--sans);
  letter-spacing: 0.01em;
}
.social-icon { background: #cbc2b8; }
.social-icon svg { fill: var(--ink); }
.social-icon:hover { background: var(--accent-on-dark); }
.social-icon:hover svg { fill: #ffffff; }

/* ---------- 3. Titels ---------- */
h1, .home-hero-title, .pick-title, .card-title, .home-hero-title a {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
h1 { font-size: calc(2.5rem * var(--display-scale)); line-height: 1.12; }

.home-masthead h1 { font-size: calc(3rem * var(--display-scale)); line-height: 1.08; margin: 0.2rem 0 0.8rem; }
/* De uitgeversstreep: drie millimeter rood boven de titel, meer niet. */
.home-masthead::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}
.home-masthead .lede { font-size: 1.18rem; line-height: 1.6; max-width: 44rem; }

/* DE SIGNATUUR - de rubrieklijn. Elke sectiekop is een rubriek uit het voorwerk:
   klein, in kapitalen, op een haarlijn met een rood segment aan de kop. Het is
   die omkering die het geheel als uitgeverij laat lezen in plaats van als
   portaal: de rubriek wijst aan, de titel spreekt. */
.home-section > h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--ink);
  border-bottom: 0;
  padding: 0 0 0.75rem;
  margin: 0 0 0.15rem;
  position: relative;
}
.home-section > h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule-strong);
}
.home-section > h2::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
  z-index: 1;
}
.home-section > .lede { font-size: 1.02rem; margin-top: 0.9rem; }

/* ---------- 4. Het uitgelichte verhaal ---------- */
.home-hero {
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--ink);
  gap: 0 2.5rem;
}
.home-hero-body { padding: 2.4rem 2.5rem; }
.home-hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  color: var(--ink);
}
.home-hero-eyebrow a { color: var(--accent); }
.home-hero-title { font-size: calc(2.35rem * var(--display-scale)); line-height: 1.18; margin-bottom: 0.85rem; }
.home-hero-standfirst { font-size: 1.06rem; line-height: 1.6; }
.home-hero-cta time {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. De knop: een stempel, geen pil ---------- */
.btn-accent, .btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 0;
  padding: 0.85rem 1.7rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Rood dat naar zwart keert bij aanraking - inkt die droogt. */
.btn-accent:hover,
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-secondary {
  background: transparent;
  color: #f6f2ed;
  border: 1px solid rgba(246, 242, 237, 0.45);
  padding: calc(0.85rem - 1px) calc(1.7rem - 1px);
}
.btn-secondary:hover { background: #f6f2ed; color: var(--ink); border-color: #f6f2ed; }

.home-search input {
  border: 1px solid var(--ink);
  font-family: var(--sans);
  padding: 0.85rem 1rem;
}
.home-search-alt { font-size: 0.82rem; letter-spacing: 0.01em; }

/* Dezelfde stempelvorm als elke andere knop; hij stond als enige nog los. */
.idx-clear-btn {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}
.idx-clear-btn:hover { background: var(--ink); }

/* In de smalle zijkolom is de knopmaat van de hoofdkolom te fors: het label brak
   over twee regels en dan is een stempel geen stempel meer. */
.idx-aside-box .btn {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.05rem;
}
.idx-aside-box .btn-secondary { padding: calc(0.7rem - 1px) calc(1.05rem - 1px); }
/* De kopjes in de zijkolom zijn paneelkoppen en geen tussenkoppen in een artikel;
   die dragen dus de titelletter, net als het steunblok waar ze naast staan. */
.idx-aside-box h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: calc(1.4rem * var(--display-scale));
}

/* ---------- 6. De kaart: een deel in een reeks ---------- */
.card {
  border: 1px solid var(--rule-strong);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.card:hover { border-color: var(--ink); }
.card-body { padding: 1rem 1.15rem 1.15rem; }

/* HET RUGLABEL. Een rood streepje voor de periode, zoals het label op de rug van
   een deel in een reeks: het zegt in welke serie dit verhaal thuishoort. */
.card-label, .pick-era {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.card-label::before, .pick-era::before {
  content: "";
  width: 2px;
  height: 0.85em;
  background: var(--accent);
  flex: 0 0 auto;
}
.pick-era { color: var(--ink); }

.card-title { font-size: calc(1.12rem * var(--display-scale)); line-height: 1.32; margin: 0.5rem 0; }
.card-snippet { font-family: var(--serif); font-size: 0.93rem; line-height: 1.55; }
.card time {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

/* ---------- 7. Instappunten en tegels ---------- */
.pick { border-top: 1px solid var(--ink); padding-top: 0.9rem; position: relative; }
.pick::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 2.25rem; height: 3px;
  background: var(--accent);
}
.pick-title { font-size: calc(1.2rem * var(--display-scale)); line-height: 1.3; }
.pick-note { font-size: 0.96rem; }

/* De tegels stonden blauwgrijs (#e9eef3, style.css r.1112) - dat is de laatste plek waar het
   portaalblauw nog zichtbaar zou blijven. Warm papier scheidt ze net zo goed van het wit. */
.era-grid a {
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  padding: 1.15rem 1.25rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.era-grid a strong {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: calc(1.06rem * var(--display-scale));
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.era-grid a span {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.era-grid a:hover { background: var(--ink); border-color: var(--ink); border-left-color: var(--accent); color: #f6f2ed; }
.era-grid a:hover span { color: #b3a99e; }

/* ---------- 8. Het steunblok: het colofon ---------- */
.support-block {
  background: var(--ink);
  color: #d5cec6;
  border-radius: 0;
  border-top: 3px solid var(--accent);
  padding: 2.4rem 2.6rem 2rem;
}
.support-block h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: calc(1.75rem * var(--display-scale));
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.support-block p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 44rem;
  margin-bottom: 1.6rem;
}

/* ---------- 9. De voet ---------- */
.site-footer {
  background: var(--ink);
  color: #a89e93;
  font-family: var(--sans);
  font-size: 0.8rem;
  border-top: 3px solid var(--accent);
}
.footer-inner { padding: 2.25rem 1.25rem 2.5rem; }
.site-footer a { color: #ded6cc; text-decoration: none; border-bottom: 1px solid rgba(222, 214, 204, 0.3); }
.site-footer a:hover { color: #ffffff; border-bottom-color: var(--accent-on-dark); }
.footer-address {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 0.9rem;
  margin-top: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.affiliate-disclosure { color: #7d746a; font-size: 0.72rem; line-height: 1.6; }

/* ---------- 10. De rest van de site draagt dezelfde huid ---------- */
.az-nav a { border-radius: 0; border-color: var(--rule-strong); color: var(--ink); font-family: var(--sans); }
.az-nav a:hover { background: var(--ink); color: #fff; }
.az-section h2 { border-bottom: 1px solid var(--rule-strong); }
.az-list a { color: var(--ink); }
th { background: var(--paper-2); }
blockquote { border-left: 2px solid var(--accent); font-family: var(--serif); }

@media (max-width: 720px) {
  .home-masthead h1 { font-size: calc(2.15rem * var(--display-scale)); }
  .home-hero-title { font-size: calc(1.7rem * var(--display-scale)); }
  .home-hero-body { padding: 1.6rem 1.35rem 1.8rem; }
  .support-block { padding: 1.8rem 1.4rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}