/* ═══════════════════════════════════════════════════════════════════════════
   Taha Riani — site stylesheet.

   Merged from the Claude Design handoff:
   · ds/styles.css          — the "Modernist" design-system tokens + components
   · the prototype's inline <helmet> block — palette taken from the speaker deck
     (warm cream paper, coral, pink) and the heading font resolved to Inter,
     which was the prototype's default `headingFont` prop.

   Everything below the "Site layer" rule is new: the bits the prototype got
   from its design-tool runtime (page routing, hover states) expressed as
   plain CSS instead.
   ═════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Palette — speaker deck: warm cream paper, coral, pink */
  --color-bg: #fff3e8;
  --color-surface: #ffe7d5;
  --color-text: #2a1a10;
  --color-accent: #f1552a;
  --color-accent-2: #f853af;
  --color-divider: color-mix(in srgb, #2a1a10 26%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #7c6354;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #ffe9db;
  --color-accent-200: #ffd6c0;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #d9431d;
  --color-accent-700: #a83513;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

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

html { background: var(--color-bg); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — treatments carried over from the prototype — */
.grayscale { filter: grayscale(.72) sepia(.22) saturate(1.15) contrast(1.02); }
.warmglow {
  background-image:
    radial-gradient(120% 90% at 8% 4%, #ffd9b8 0%, rgba(255,217,184,0) 58%),
    radial-gradient(90% 80% at 96% 92%, #ffd0dd 0%, rgba(255,208,221,0) 60%);
}
/* .ph — hatched placeholder for artwork still to be supplied */
.ph {
  background-color: #ffe9db;
  background-image: repeating-linear-gradient(135deg, rgba(42,26,16,.12) 0 2px, transparent 2px 9px);
}

/* — rules — */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   Site layer — the parts the prototype's design-tool runtime provided,
   rewritten as plain CSS.
   ═════════════════════════════════════════════════════════════════════════ */

/* De pagina loopt van rand tot rand.

   Het prototype werd getekend in een kader van 1440px en elke `cqi` in de
   opmaak is daartegen gemeten. Die maten zitten allemaal in een clamp() met een
   bovengrens, dus boven 1440px groeien tekst en witruimte niet verder mee: ze
   blijven staan op hun ontworpen maximum. Wat wél moest wijken zijn de
   `repeat(auto-fit, …)`-rasters — die bleven kolommen toevoegen. Zie de
   .g-*-klassen onderaan dit bestand.

   `container-type: inline-size` blijft staan: alle cqi-maten en de
   @container-queries meten daartegen. */
.page {
  width: 100%;
  container-type: inline-size;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
}

/* Anchors standing in for the prototype's onClick buttons and its one clickable
   <article>. Those elements were never links, so they must not pick up the
   accent colour or underline the `a` rule above would otherwise give them.
   Every one of them either carries its own inline `color` (which wins over
   this) or, like the keynote card, is meant to inherit the surrounding text
   colour -- which is what `inherit` restores. */
.as-btn { text-decoration: none; color: inherit; }
.as-btn:hover { color: inherit; }

/* Was `style-hover="background: var(--color-accent-100);"` in the prototype. */
.hov-accent { transition: background 120ms ease; }
.hov-accent:hover { background: var(--color-accent-100); }

/* Current page in the header nav. */
.nav-link {
  appearance: none; border: 0; background: transparent; padding: 0;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 13px;
  color: var(--color-text);
}
.nav-link[aria-current="page"] { color: var(--color-accent); }
.nav-link:hover { color: var(--color-accent); }

/* Skip link — keyboard users shouldn't have to tab the nav on every page. */
.skip {
  position: absolute; left: -9999px;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 14px; font-size: 13px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

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

/* The prototype's numbered rows — "Vijf domeinen" on the home page and
   "Historiek" on Over Taha — pin their tracks to `56px/60px + minmax(160px) +
   minmax(200px)`, which needs about 436px before the description column runs
   past the edge. The prototype never showed this: its frame had
   `overflow: hidden`, so on the 430px mobile preview the third column was
   silently clipped rather than wrapped. Stacking the tracks keeps that text
   readable on a phone. Above 500px the original three-column rule applies
   untouched, so the desktop layout is unchanged. */
@container (max-width: 500px) {
  .row-num { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Getuigenissen-carousel

   De baan is een gewone horizontaal scrollende flexcontainer met scroll-snap:
   swipen op een telefoon en slepen op een trackpad werken daardoor zonder
   JavaScript, en zonder script blijft alles gewoon leesbaar en scrollbaar.
   carousel.js voegt alleen de pijlen en de stippen toe.
   ═════════════════════════════════════════════════════════════════════════ */

.tcar-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(18px, 2.6cqi, 32px);
}

.tcar-track {
  display: flex; gap: clamp(14px, 1.8cqi, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* ruimte voor de kaartschaduw, anders knipt overflow hem af */
  padding-block: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tcar-track::-webkit-scrollbar { display: none; }

.tcar-card {
  flex: 0 0 clamp(268px, 30cqi, 430px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2.4cqi, 32px);
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
/* Het aanhalingsteken is decoratie; schermlezers slaan het over via aria-hidden.
   Het staat in de tekststroom en niet absoluut in de hoek: op een smalle kaart
   liep een lange eerste regel er anders dwars doorheen. */
.tcar-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 4.4cqi, 64px); line-height: .72; height: .5em;
  color: var(--color-accent); opacity: .32;
  pointer-events: none; user-select: none;
}
.tcar-quote {
  font-size: clamp(14px, 1.4cqi, 17px); line-height: 1.5; margin: 0; flex: 1;
  position: relative;
}
/* De naam van de organisatie is het bewijs, niet een voetnoot: die krijgt
   koptekstformaat in plaats van het kleine kapitaal van een bijschrift. */
.tcar-org {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(18px, 2cqi, 25px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--color-accent-700);
}
.tcar-org::before {
  content: ""; width: 34px; height: 3px; background: var(--color-accent); flex: none;
}

/* — bediening — */
.tcar-ctrl { display: flex; gap: 8px; }
.tcar-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  cursor: pointer; background: transparent; color: var(--color-text);
  border: 2px solid var(--color-divider); border-radius: 0;
}
.tcar-btn:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.tcar-btn:disabled { opacity: .3; cursor: default; }
.tcar-btn svg { display: block; }

.tcar-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(14px, 1.8cqi, 22px); }
.tcar-dot {
  width: 26px; height: 4px; padding: 0; cursor: pointer;
  border: 0; border-radius: 0; background: var(--color-divider);
}
.tcar-dot[aria-current="true"] { background: var(--color-accent); }
.tcar-dot:hover { background: var(--color-accent-400); }

/* Zonder JS zijn de knoppen zinloos, dus die blijven verborgen tot het script
   ze aanzet. De baan zelf blijft wel scrollbaar. */
.tcar:not([data-ready]) .tcar-ctrl,
.tcar:not([data-ready]) .tcar-dots { display: none; }

/* Past de hele reeks in beeld? Dan zijn pijlen en stippen zinloos. */
.tcar-static .tcar-ctrl, .tcar-static .tcar-dots { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Wisselende vraag in de hero

   Alle vragen staan in dezelfde grid-cel over elkaar heen. Daardoor is de
   hoogte van de kop altijd die van de lángste vraag en verspringt de layout
   niet bij het wisselen — geen gemeten hoogtes, geen JavaScript nodig.
   Zonder script blijft simpelweg de eerste vraag staan.
   ═════════════════════════════════════════════════════════════════════════ */

/* Alle vragen liggen in dezelfde grid-cel: de h1 zichtbaar, de andere met
   visibility:hidden erachter. De cel wordt zo hoog als de langste vraag en
   blijft dat bij het wisselen, zodat de pagina eronder niet op en neer
   springt. */
.qrot { display: grid; }
.qrot-item, .qrot-maat { grid-area: 1 / 1; margin: 0; font: inherit; letter-spacing: inherit; }
.qrot-maat { visibility: hidden; pointer-events: none; }
.qrot-item {
  opacity: 0;
  transform: translateY(.14em);
  transition: opacity .45s ease, transform .45s ease;
}
.qrot-item[data-active] { opacity: 1; transform: none; }

/* Het vraagteken in accentkleur — het gaat hier tenslotte om de vraag. */
.qrot-q { color: var(--color-accent); }

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

/* ═══════════════════════════════════════════════════════════════════════════
   Rasters met een maximum aantal kolommen

   Het ontwerp gebruikte overal `repeat(auto-fit, minmax(Npx, 1fr))`. Dat werkt
   prima binnen een kader van 1440px, maar zonder die limiet blijft auto-fit
   kolommen toevoegen: de hero van twee kolommen werd op een 2560px-scherm een
   rij van acht. Deze klassen leggen per patroon vast hoeveel kolommen er
   maximaal zijn, zodat de pagina op elke breedte klopt.

   De queries zijn @container: .page is de container, dus ze meten de
   paginabreedte en niet die van het browservenster.
   ═════════════════════════════════════════════════════════════════════════ */

.g-2, .g-3, .g-4, .g-6, .g-form { display: grid; }

/* Tweeluik: tekst naast beeld, of twee gelijkwaardige kolommen. */
.g-2 { grid-template-columns: 1fr; }
@container (min-width: 760px)  { .g-2 { grid-template-columns: 1fr 1fr; } }

.g-3 { grid-template-columns: 1fr; }
@container (min-width: 620px)  { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 980px)  { .g-3 { grid-template-columns: repeat(3, 1fr); } }

.g-4 { grid-template-columns: repeat(2, 1fr); }
@container (min-width: 880px)  { .g-4 { grid-template-columns: repeat(4, 1fr); } }

/* De logobalk: veel korte namen, mag breder uitwaaieren. */
.g-6 { grid-template-columns: repeat(2, 1fr); }
@container (min-width: 560px)  { .g-6 { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 900px)  { .g-6 { grid-template-columns: repeat(4, 1fr); } }
@container (min-width: 1240px) { .g-6 { grid-template-columns: repeat(6, 1fr); } }

.g-form { grid-template-columns: 1fr; }
@container (min-width: 560px)  { .g-form { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 1180px) { .g-form { grid-template-columns: repeat(3, 1fr); } }

/* Op een zeer breed scherm zou lopende tekst anders regels van 200 tekens
   krijgen. De kolom mag meegroeien, de regellengte niet. */
.row-num > span:last-child,
.tcar-quote,
.keynote-body { max-width: 68ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   Beeldblokken

   De portretten zijn 2:3. Stond op de <img> `height: 100%` terwijl de
   container alleen een min-height had, dan kon die procentuele hoogte niet
   oplossen: het beeld viel terug op zijn eigen verhouding en werd dus even
   hoog als de kolom breed was × 1,5. Op een breed scherm leverde dat een hero
   van 1650px op — en `object-fit: cover` sneed nooit bij.

   Door het beeld absoluut te positioneren vult het altijd precies de hoogte
   die de container krijgt, en snijdt het bij in plaats van de pagina op te
   rekken. De container mag nog steeds meegroeien met de tekstkolom ernaast.
   ═════════════════════════════════════════════════════════════════════════ */

.media { position: relative; overflow: hidden; }
.media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Organisaties, gegroepeerd per soort

   Het was een raster van losse omkaderde vakjes: alle namen even zwaar, en
   niets dat vertelde wát voor organisatie het is. Nu draagt de indeling de
   opmaak — een kolom per soort, met een lijst eronder.
   ═════════════════════════════════════════════════════════════════════════ */

/* Organisaties in doorlopende kolommen.

   Terug naar het eerste ontwerp: per categorie een label met een accentlijn,
   daaronder de namen elk op een eigen regel. Het verschil zit in de stroom.
   Eerder stond `break-inside: avoid` op elke categorie, waardoor een groep
   die niet meer paste in haar geheel naar de volgende kolom sprong en er
   onderaan een gat achterbleef. Nu mag een categorie over de kolomgrens
   doorlopen, zodat de kolommen even lang zijn en er nergens een sprong zit.
   Alleen de kop blijft bij zijn eerste namen. */
.orgkolommen {
  columns: 2; column-gap: clamp(20px, 2.8cqi, 48px);
  orphans: 3; widows: 3;
}
@container (min-width: 620px)  { .orgkolommen { columns: 3; } }
@container (min-width: 980px)  { .orgkolommen { columns: 4; } }
@container (min-width: 1500px) { .orgkolommen { columns: 5; } }

.orggroep { margin: 0 0 clamp(20px, 2.6cqi, 34px); }
.orggroep:first-child { margin-top: 0; }

.orggroep-kop {
  border-top: 3px solid var(--color-accent);
  padding-top: 11px; margin: 0 0 4px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; color: var(--color-accent-700);
  /* een kop onderaan een kolom, los van zijn lijst, is lelijk */
  break-after: avoid; -webkit-column-break-after: avoid;
}
.orggroep-aantal {
  margin-left: 6px; font-size: 10px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.orglijst { list-style: none; margin: 0; padding: 0; }
.orglijst li {
  font-family: var(--font-heading);
  /* 600 in plaats van 800: in het zwaarste gewicht trokken veertig namen
     meer aandacht dan de keynotes erboven */
  font-weight: 600;
  font-size: clamp(13px, 1.15cqi, 15px); line-height: 1.3;
  letter-spacing: -.01em;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
  break-inside: avoid;
}
.orglijst li.leeg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 400; font-size: 12px; letter-spacing: 0;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   "De realiteit vandaag" — compacte overgang tussen hero en keynotes

   Dit blok was eerst een donkerbruin vlak van bijna 900px met kolossale
   letters. Te veel ruimte voor wat in feite een brug is naar de keynotes, en
   het bruin maakte van de tekstkleur ongewild een tweede huisstijlkleur.
   Nu één compacte band op --color-surface: dezelfde warme papiertoon die de
   kaarten al gebruiken, dus geen nieuwe kleur.
   ═════════════════════════════════════════════════════════════════════════ */

.constateringen { list-style: none; margin: 0 0 clamp(14px, 1.8cqi, 20px); padding: 0; }
/* Deze drie constateringen stonden in het zwaarste gewicht, net als de kop
   ernaast en de omslagregel eronder. Drie soorten vet in één blok laat niets
   meer opvallen. De constateringen zijn nu gewone tekst; de omslagregel
   eronder houdt zijn vet en wordt daarmee weer het accent van het blok. */
.constateringen li {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.6cqi, 19px); line-height: 1.4;
  letter-spacing: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-divider);
}
.constateringen li::before {
  content: ""; flex: none; width: 14px; height: 2px;
  background: var(--color-accent); transform: translateY(-.35em);
}

.omslag-regel { margin: 0; font-size: clamp(14px, 1.4cqi, 17px); line-height: 1.5; }
.omslag-regel strong {
  font-family: var(--font-heading); font-weight: 800;
  display: block; margin-bottom: 4px;
}

/* De link in de omslagregel staat op een eigen regel onder de kop. */
.omslag-regel a { font-family: var(--font-heading); font-weight: 800; text-decoration: none; }
.omslag-regel a:hover { text-decoration: underline; }

/* Bijschrift over een foto. De donkere onderlegger staat er zodat het leesbaar
   blijft ongeacht wat er achter zit — bij deze foto is dat een fel magenta
   vlak, waar cremekleurige tekst zonder onderlegger in wegvalt. */
.beeld-bijschrift {
  position: absolute; left: 0; bottom: 0;
  margin: 0; padding: 7px 12px;
  background: rgba(42, 26, 16, .78);
  color: #ffeedd;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* Boekcover. Een PNG met transparante achtergrond, dus de slagschaduw valt op
   de paginakleur zelf — geen ingebakken vlak dat bij een andere ondergrond
   zichtbaar wordt als een rechthoek. De houder krijgt daarom géén eigen
   achtergrondkleur. `contain` in plaats van `cover` omdat de cover in drie
   verschillende kaders staat — liggend op de homepage, staand op de
   boekpagina — en er nooit iets van het boek af mag vallen. */
/* Let op: het beeld staat absoluut, net als bij .media. Met alleen `height:
   100%` in een houder zonder vaste hoogte kan die procentuele hoogte niet
   oplossen en legt het beeld zijn eigen verhouding op — dan werd dit blok
   838px hoog in plaats van de bedoelde 320. */
.cover { position: relative; overflow: hidden; }
.cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: clamp(12px, 2cqi, 28px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Wat de zaal meeneemt"

   Alle vier de punten beginnen met "Meer". Die herhaling ís het idee, dus die
   krijgt een eigen teken: een groot coral plusteken. Dat betekent letterlijk
   "meer" en rijmt op de 300+ en 10+ in de cijferbalk.

   Bewust géén kaartenraster met een streepje erboven en géén brede regels met
   groot-links/klein-rechts: die twee patronen dragen elders op de site al de
   getuigenissen, de organisaties en "De realiteit vandaag". Dit is een
   kwadrant van vier, met de vier plustekens als ritme.
   ═════════════════════════════════════════════════════════════════════════ */

.meeneem { display: grid; }

.meeneem-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(12px, 1.8cqi, 24px);
  padding: clamp(18px, 2.6cqi, 36px) 0;
  border-top: 1px solid var(--color-divider);
}

@container (min-width: 720px) {
  .meeneem { grid-template-columns: 1fr 1fr; }
  .meeneem-item:nth-child(odd)  { padding-right: clamp(20px, 3cqi, 60px); }
  .meeneem-item:nth-child(even) {
    padding-left: clamp(20px, 3cqi, 60px);
    border-left: 1px solid var(--color-divider);
  }
}

.meeneem-plus {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(46px, 6cqi, 82px);
  line-height: .72;
  color: var(--color-accent);
  align-self: start;
  /* optisch uitlijnen met de kaphoogte van de kop ernaast */
  margin-top: -.06em;
}

.meeneem-kop {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(22px, 2.7cqi, 35px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 8px;
}

.meeneem-tekst {
  margin: 0; max-width: 36ch;
  font-size: clamp(14px, 1.4cqi, 17px); line-height: 1.5;
}

/* Boeken naast elkaar. De scheiding tussen de twee kolommen hoort alleen bij
   de tweekolomsweergave: onder elkaar op een telefoon bleef het tweede boek
   anders ingesprongen staan met een verdwaalde verticale lijn ernaast. */
@container (min-width: 760px) {
  .boek-kolom:first-child { padding-right: clamp(20px, 3cqi, 56px); }
  .boek-kolom:last-child  { padding-left: clamp(20px, 3cqi, 56px);
                            border-left: 2px solid var(--color-divider); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Loopbaan-tijdlijn op Over Taha

   Gebruikt hetzelfde swipe-mechanisme als de getuigenissen (.tcar-klassen,
   zodat carousel.js ongewijzigd werkt), maar met een eigen kaartontwerp: een
   groot coral hoofdstuknummer en een coral lijn bovenaan elke kaart. Naast
   elkaar geschoven vormen die lijnen een onderbroken tijdslijn.
   ═════════════════════════════════════════════════════════════════════════ */

.tijdlijn .tcar-card {
  flex: 0 0 clamp(272px, 38cqi, 460px);
  gap: 0;
  padding: 0;
  background: var(--color-surface);
  border: 0;
  border-top: 3px solid var(--color-accent);
  box-shadow: none;
}

.tijdlijn-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: clamp(16px, 2cqi, 24px) clamp(18px, 2.2cqi, 30px) 0;
}
.tijdlijn-nr {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 3.6cqi, 48px); line-height: .85;
  color: var(--color-accent);
}
.tijdlijn-datum {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(13px, 1.4cqi, 16px); letter-spacing: .06em;
  color: var(--color-neutral-700);
}

.tijdlijn-body { padding: 12px clamp(18px, 2.2cqi, 30px) clamp(18px, 2.2cqi, 26px); flex: 1; }
.tijdlijn-titel {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(20px, 2.3cqi, 29px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 12px;
}
.tijdlijn-tekst { margin: 0 0 10px; font-size: clamp(13px, 1.35cqi, 16px); line-height: 1.55; }
.tijdlijn-tekst:last-child { margin-bottom: 0; }
.tijdlijn-prooflabel {
  margin: 0 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* Persvermeldingen onderaan de kaart. Vervangt de eerdere chips: een medium
   plus de echte kop zegt meer dan een los logo-woord, en het is een link naar
   het artikel zelf. */
.tijdlijn-voet {
  margin-top: auto;
  padding: clamp(12px, 1.6cqi, 18px) clamp(18px, 2.2cqi, 30px) clamp(14px, 1.8cqi, 20px);
  border-top: 1px solid var(--color-divider);
}
.pers-label {
  margin: 0 0 2px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 800;
  color: var(--color-neutral-700);
}
.pers-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none; color: inherit;
}
.pers-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* Medium en datum staan samen op de bovenste regel: het medium in het
   accent, de datum gedempt ernaast. Zo ziet een bezoeker in één oogopslag
   hoe recent de vermeldingen zijn. */
.pers-item { grid-template-areas: "bron bron" "kop pijl"; }
.pers-medium {
  grid-area: bron;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.pers-kop { grid-area: kop; }
.pers-pijl { grid-area: pijl; }
.pers-datum {
  grid-area: bron; justify-self: end;
  font-family: var(--font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--color-neutral-700); white-space: nowrap;
}
.pers-kop {
  font-size: 13px; line-height: 1.35;
  /* twee regels: de koppen lopen sterk uiteen in lengte en zouden de kaarten
     anders flink uit elkaar trekken. De volledige kop staat in het artikel. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pers-pijl { color: var(--color-accent); font-size: 14px; transition: transform 140ms ease; }
a.pers-item:hover .pers-kop { text-decoration: underline; text-underline-offset: 3px; }
a.pers-item:hover .pers-pijl { transform: translateX(3px); }
/* Vermelding zonder link (url nog niet aangeleverd). */
.pers-item--geenlink { cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   Uitgelicht citaat op Over Taha

   Het openingsaanhalingsteken hangt buiten de tekstkolom (hanging punctuation).
   Daardoor lijnt de eerste letter van het citaat uit met de regels eronder in
   plaats van een halve letter naar binnen te springen — een klassiek
   typografisch detail dat een citaat rustiger laat ogen.
   ═════════════════════════════════════════════════════════════════════════ */

.citaat-blok { margin: 0; }

.citaat-tekst {
  position: relative;
  /* De maat hoort op dít element: het draagt de grote letter. Op de
     <blockquote> zou `em` met de body-tekstgrootte van 15px rekenen en werd de
     kolom 330px breed — dertien regels van 44px. */
  max-width: 16em;
  margin: 0 0 clamp(18px, 2.4cqi, 30px);
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(23px, 3.2cqi, 44px);
  line-height: 1.14; letter-spacing: -.025em;
  text-wrap: balance;
}
.citaat-teken {
  position: absolute; right: 100%; top: -.02em;
  padding-right: .06em;
  color: var(--color-accent);
}
/* Op smalle schermen is er links geen ruimte om te laten hangen. */
@container (max-width: 620px) {
  .citaat-teken { position: static; padding-right: 0; }
}

.citaat-bron {
  display: flex; align-items: center; gap: 12px;
  font-style: normal;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.citaat-bron::before {
  content: ""; width: 30px; height: 2px; background: var(--color-accent); flex: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Thema's in het publieke debat (perspagina)

   Deelt opnieuw de .tcar-structuur, zodat carousel.js ook hier werkt. Geen
   kaartvlak dit keer maar een coral lijn aan de zíjkant: de tijdlijn gebruikt
   al een lijn bovenaan, en zo blijft de vormtaal gelijk zonder dat de twee
   carrousels op elkaar lijken.
   ═════════════════════════════════════════════════════════════════════════ */

.themas .tcar-card {
  flex: 0 0 clamp(230px, 25cqi, 310px);
  gap: 10px;
  padding: 4px 0 4px clamp(16px, 1.8cqi, 24px);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--color-accent);
  box-shadow: none;
}
.thema-titel {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(18px, 2cqi, 25px); line-height: 1.1; letter-spacing: -.02em;
}
.thema-tekst {
  margin: 0; font-size: clamp(13px, 1.35cqi, 16px); line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — persvermeldingen (perspagina) —

   Kolomstroom, geen raster. Een raster vult van links naar rechts: de nieuwste
   drie vermeldingen stonden dan naast elkaar op de bovenste rij en de lezer
   moest heen en weer springen om de tijdlijn te volgen. Met kolommen loopt de
   lijst van boven naar beneden door, zoals een krantenpagina. */
.perslijst { columns: 1; column-gap: clamp(20px, 3cqi, 56px); }
@container (min-width: 700px)  { .perslijst { columns: 2; } }
@container (min-width: 1100px) { .perslijst { columns: 3; } }
.perslijst .pers-item {
  padding: 14px 0;
  /* een vermelding mag nooit halverwege naar de volgende kolom springen */
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.perslijst .pers-item:last-child { padding-bottom: 14px; border-bottom: 1px solid var(--color-divider); }
.perslijst .pers-kop { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Videoblok

   Vaste 16:9-verhouding, zodat de pagina niet verspringt zodra de video laadt.
   Zolang er geen embed is ingesteld staat er een zichtbare placeholder.
   ═════════════════════════════════════════════════════════════════════════ */

.video {
  position: relative;
  /* Niet over de volle breedte: op 1440px zou 16:9 ruim 740px hoog worden,
     wat de pagina onnodig oprekt voor een blok dat nu nog leeg is. */
  max-width: 980px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-leeg {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 10px;
  text-align: center; padding: 24px;
}
.video-leeg span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Contactgegevens

   E-mail en telefoon groot en aanklikbaar: op een telefoon is `tel:` één tik
   bellen, en `mailto:` opent een leeg bericht aan het juiste adres.
   ═════════════════════════════════════════════════════════════════════════ */

/* Het blok is zelf een container: de rijen moeten reageren op de breedte van
   de kolom waarin ze staan, niet op die van de pagina. Zonder dit stonden ze
   in de smalle herokolom naast elkaar en brak het e-mailadres middenin af. */
.contact { container-type: inline-size; }
.contact-rijen { display: grid; gap: clamp(14px, 1.8cqi, 22px); }
@container (min-width: 660px) { .contact-rijen { grid-template-columns: 1fr 1fr; } }

.contact-rij {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 2px solid var(--color-accent); padding-top: 12px;
}
.contact-label {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.contact-waarde {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--contact-maat); line-height: 1.15; letter-spacing: -.02em;
  color: var(--color-text); text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-waarde:hover { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.contact-leeg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 45%, transparent);
  background: var(--color-surface); padding: 6px 10px; align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   Footer
   Vier kolommen: merk + contact, twee navigatiekolommen van gelijke lengte, en
   de praktische feiten. Daaronder een smalle balk met het jaartal. De kleuren
   staan als variabelen vast in plaats van als opacity, zodat het contrast
   voorspelbaar blijft en niet meeschuift met de achtergrond.
--------------------------------------------------------------------------- */
.ft {
  --ft-grond: #2a1a10;
  --ft-inkt: #fff3e8;
  --ft-zacht: #d8bfab;   /* gedempt, maar ruim boven de contrastdrempel */
  --ft-lijn: rgba(255, 243, 232, .18);
  background: var(--ft-grond);
  color: var(--ft-inkt);
  container-type: inline-size;
}
.ft-top {
  display: grid;
  gap: clamp(28px, 3.4cqi, 56px);
  padding: clamp(36px, 4.6cqi, 76px) var(--ft-padx) clamp(30px, 3.6cqi, 54px);
}
/* Smal: de twee linklijsten naast elkaar. Onder elkaar werd de footer een
   volledig scherm hoog op een telefoon. Merk en feiten lopen over de volle
   breedte, want die hebben de ruimte nodig. */
.ft-top { grid-template-columns: 1fr 1fr; }
.ft-top > :first-child, .ft-top > :last-child { grid-column: 1 / -1; }
.ft-top > :last-child .ft-feiten { grid-template-columns: 1fr 1fr; }

@container (min-width: 620px) {
  .ft-top > :first-child, .ft-top > :last-child { grid-column: auto; }
  .ft-top > :last-child .ft-feiten { grid-template-columns: 1fr; }
}
@container (min-width: 1000px) { .ft-top { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }

.ft-merk-naam {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(17px, 1.7cqi, 21px); letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 10px;
}
.ft-merk-tekst {
  font-size: clamp(13px, 1.25cqi, 15px); line-height: 1.55;
  color: var(--ft-zacht); margin: 0 0 clamp(18px, 2cqi, 26px); max-width: 30ch;
}
.ft-kop {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ft-zacht); margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ft-lijn);
}
.ft-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ft-links a, .ft-contact a {
  font-family: var(--font-body); font-size: clamp(13px, 1.25cqi, 15px);
  color: var(--ft-inkt); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color .15s ease;
}
.ft-links a:hover, .ft-links a:focus-visible,
.ft-contact a:hover, .ft-contact a:focus-visible { border-bottom-color: var(--ft-inkt); }

.ft-top > :first-child { display: flex; flex-direction: column; align-items: flex-start; }
.ft-contact { display: flex; flex-direction: column; gap: 7px; }
.ft-pijl { font-size: .8em; margin-left: .3em; color: var(--ft-zacht); }
.ft-contact a { font-family: var(--font-heading); font-weight: 800; overflow-wrap: anywhere; }

.ft-feiten { display: grid; gap: 12px; margin: 0; }
.ft-feiten > div { display: flex; flex-direction: column; gap: 2px; }
.ft-feiten dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ft-zacht); }
.ft-feiten dd { font-size: clamp(13px, 1.25cqi, 15px); line-height: 1.4; margin: 0; }

.ft-onder {
  border-top: 1px solid var(--ft-lijn);
  padding: 18px var(--ft-padx);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 12px; color: var(--ft-zacht);
}
.ft-onder p { margin: 0; }

/* ---------------------------------------------------------------------------
   Podcastgesprekken
   Twee spelers naast elkaar. .video zorgt voor de 16:9-verhouding; hier
   vervalt de maximumbreedte van 980px, want elke kolom is al de helft.
--------------------------------------------------------------------------- */
.podcasts { display: grid; gap: clamp(20px, 3cqi, 44px); }
@container (min-width: 760px) { .podcasts { grid-template-columns: 1fr 1fr; } }

.podcast { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.podcast .video { max-width: none; }
.podcast figcaption { display: flex; flex-direction: column; gap: 6px; }
.podcast-kanaal {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0;
}
.podcast-titel {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(17px, 2cqi, 25px); line-height: 1.15;
  letter-spacing: -.02em; margin: 0;
}
.podcast-titel a {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
.podcast-titel a:hover, .podcast-titel a:focus-visible { border-bottom-color: var(--color-accent); }
.podcast-pijl { font-size: .7em; margin-left: .35em; color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Uitgelicht gesprek (homepage)

   Anders dan een foto kan een videospeler niet bijgesneden worden: YouTube
   zet er zelf zwarte balken omheen zodra de cel geen 16:9 is. Daarom krijgt
   de cel een donkere ondergrond — dan gaan die balken erin op en oogt het
   blok als één vlak dat, net als de portretten elders, tot de celrand loopt
   in plaats van in witruimte te zweven.
--------------------------------------------------------------------------- */
.video-vlak {
  position: relative;
  background: #17100a;
  display: grid; align-content: center;
  padding: clamp(20px, 2.6cqi, 40px);
  gap: clamp(14px, 1.6cqi, 20px);
  container-type: inline-size;
}
.video-vlak .video { max-width: none; border: 0; background: #000; }
.video-bijschrift { display: flex; flex-direction: column; gap: 4px; }
.video-bijschrift .kanaal {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #d8bfab; margin: 0;
}
.video-bijschrift .titel {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(15px, 3.4cqi, 20px); line-height: 1.2;
  letter-spacing: -.02em; margin: 0;
}
.video-bijschrift .titel a {
  color: #fff3e8; text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
.video-bijschrift .titel a:hover,
.video-bijschrift .titel a:focus-visible { border-bottom-color: var(--color-accent); }
.video-bijschrift .titel .podcast-pijl { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Kop en navigatie

   Boven 760px staat alles op één regel. Daaronder brak de navigatie over twee
   regels en duwde ze de kop uit elkaar; daar komt een burgermenu.

   De burgerstijlen hangen aan [data-js]. Dat attribuut zet js/nav.js zelf, dus
   zonder JavaScript valt alles terug op de gewone, altijd zichtbare navigatie.
--------------------------------------------------------------------------- */
.hdr {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(14px, 2cqi, 28px);
  position: relative;
}
.hdr-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 1.8cqi, 26px);
  margin-left: auto;
}

/* De knop bestaat alleen wanneer het script hem heeft gemaakt. */
.hdr-knop { display: none; }
.hdr-knop-lijnen { display: block; width: 20px; height: 14px; position: relative; }
.hdr-knop-lijnen span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--color-text);
  transition: transform .2s ease, opacity .2s ease;
}
.hdr-knop-lijnen span:nth-child(1) { top: 0; }
.hdr-knop-lijnen span:nth-child(2) { top: 6px; }
.hdr-knop-lijnen span:nth-child(3) { top: 12px; }

@container (max-width: 760px) {
  .hdr[data-js] .hdr-knop {
    display: flex; align-items: center; gap: 9px;
    margin-left: auto;
    appearance: none; background: transparent; cursor: pointer;
    border: 2px solid var(--color-divider);
    padding: 8px 12px;
    font-family: var(--font-heading); font-weight: 800; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-text);
  }
  .hdr[data-js] .hdr-nav {
    display: none;
    /* volle breedte onder de merknaam, niet ernaast */
    flex-basis: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding-top: 6px;
  }
  .hdr[data-js][data-open] .hdr-nav { display: flex; }
  .hdr[data-js] .hdr-nav .nav-link {
    padding: 13px 0;
    border-top: 2px solid var(--color-divider);
    font-size: 16px;
  }
  .hdr[data-js] .hdr-cta { margin-top: 14px; align-self: flex-start; }

  /* open: de bovenste en onderste lijn vormen een kruis */
  .hdr[data-js][data-open] .hdr-knop-lijnen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hdr[data-js][data-open] .hdr-knop-lijnen span:nth-child(2) { opacity: 0; }
  .hdr[data-js][data-open] .hdr-knop-lijnen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hdr-knop-lijnen span { transition: none; }
}

/* ---------------------------------------------------------------------------
   Balk met kerncijfers

   De scheidingslijnen zaten eerst als border-left op elke cel behalve de
   eerste. Zolang de balk één rij is klopt dat, maar op een telefoon vouwt hij
   naar twee rijen: dan stond er een verdwaalde lijn links van de derde cel en
   ontbrak de lijn tússen de rijen.

   Nu is de achtergrond van de balk de lijnkleur en staat er 2px ruimte tussen
   de cellen. Die ruimte ís de lijn, en dat werkt in elke vouwing: horizontaal
   en verticaal, bij twee cellen of bij vijf.
--------------------------------------------------------------------------- */
.statband { background: var(--color-divider); gap: 2px; }
.statband > div { background: var(--color-bg); }

/* Twee boeken onder elkaar op een telefoon: zonder deze regel begon de cover
   van het tweede boek direct tegen de knoppen van het eerste. */
@container (max-width: 759px) {
  .boek-kolom + .boek-kolom {
    margin-top: clamp(28px, 5cqi, 44px);
    padding-top: clamp(24px, 4cqi, 40px);
    border-top: 2px solid var(--color-divider);
  }
}

/* Aankruisvak in het formulier: het vinkje links, het label ernaast, en het
   hele label aanklikbaar (dat regelt de for/id-koppeling). */
.field.keuze {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start;
}
.field.keuze input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--color-accent);
}
.field.keuze label { cursor: pointer; }

/* Juridische pagina's: één leeskolom, blokken onder elkaar met een fijne
   scheidingslijn. Smal gehouden — juridische tekst over de volle breedte
   van een 2560px-scherm leest niemand. */
.jur { display: grid; gap: 0; max-width: 46em; }
.jur-blok { border-top: 2px solid var(--color-divider); padding: clamp(20px, 2.6cqi, 32px) 0; }
.jur-blok:last-child { border-bottom: 2px solid var(--color-divider); }
.jur-blok p:last-child { margin-bottom: 0; }
.jur-blok a { color: var(--color-accent-700); }

/* De twee juridische links in de onderbalk van de footer. */
.ft-jur { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft-jur a { color: var(--ft-zacht); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.ft-jur a:hover, .ft-jur a:focus-visible { border-bottom-color: var(--ft-zacht); }

/* Perskit op Over Taha: drie gelijkwaardige downloadkaarten. Waren eerst
   twee doffe blokjes met "aan te leveren"; nu alle drie echte links. */
.perskit {
  border: 2px solid var(--color-divider);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.perskit:hover, .perskit:focus-visible { border-color: var(--color-accent); }
.perskit-naam { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.perskit-meta {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.perskit-pijl { margin-left: .4em; }

/* Een tijdlijnkaart die naar een lopende onderneming verwijst in plaats van
   naar een artikel: geen medium erboven, dus de kop vult de volle regel. */
.tijdlijn-link { grid-template-areas: "kop pijl"; }
.tijdlijn-link .pers-kop {
  font-family: var(--font-heading); font-weight: 800;
  -webkit-line-clamp: 2;
}

/* Onderwerpen onder de heroknoppen: klein, in één regel die netjes afbreekt.
   Geen knoppen — dan zouden ze concurreren met de twee echte knoppen erboven. */
.hero-onderwerpen {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px;
  margin: clamp(14px, 1.8cqi, 20px) 0 0;
  font-size: 12px; line-height: 1.4;
}
.hero-onderwerpen span {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.hero-onderwerpen a {
  color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
}
.hero-onderwerpen a:hover, .hero-onderwerpen a:focus-visible {
  color: var(--color-accent-700); border-bottom-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Linkpagina (/links)

   De bestemming voor de bio-link op Instagram en LinkedIn. Bezoekers komen
   hier van een telefoon, uit een app, met één duim — dus grote raakvlakken en
   één kolom, ook als er ruimte is voor twee. Een linktree die je moet
   bestuderen voor je weet waar je heen moet, mist zijn doel.
   ═════════════════════════════════════════════════════════════════════════ */

/* Eén kolom, met een bovengrens op de regellengte. Zonder die grens werd de
   toelichting onder elke knop op een breed scherm een regel van 180 tekens,
   terwijl de knop zelf van rand tot rand liep. */
.lt-kolom { max-width: 46em; }

/* De drie bestemmingen. Volledige rijen in plaats van knoppen: er staat een
   toelichting onder de titel, en die past niet in een knop zonder hem uit
   elkaar te trekken. De hele rij is klikbaar, niet alleen de titel. */
.lt-doel {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  align-items: center;
  padding: clamp(16px, 2.2cqi, 24px) 0;
  border-top: 2px solid var(--color-divider);
  text-decoration: none; color: inherit;
  transition: background .15s ease, padding .15s ease;
}
.lt-doel:last-child { border-bottom: 2px solid var(--color-divider); }
.lt-doel-titel {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(17px, 2.1cqi, 24px); line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.lt-doel-tekst {
  grid-column: 1; margin: 0;
  font-size: clamp(13px, 1.3cqi, 15px); line-height: 1.5;
  color: var(--color-neutral-700);
  max-width: 52ch;
}
.lt-doel-pijl {
  grid-row: 1 / -1; grid-column: 2;
  color: var(--color-accent); font-size: 20px;
  transition: transform 140ms ease;
}
.lt-doel:hover, .lt-doel:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.lt-doel:hover .lt-doel-titel, .lt-doel:focus-visible .lt-doel-titel {
  color: var(--color-accent-700);
}
.lt-doel:hover .lt-doel-pijl { transform: translateX(4px); }

/* Het inschrijfformulier. Twee velden naast elkaar zodra er ruimte is, met de
   knop op een eigen regel eronder: staat de knop in dezelfde rij, dan wordt hij
   even hoog als een invulveld en verliest hij het gewicht dat een
   verzendknop hoort te hebben.

   De @container-query meet de paginabreedte, net als de rest van de site. */
.lt-form { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 34em; }
@container (min-width: 560px) {
  .lt-form { grid-template-columns: 1fr 1fr; }
}
/* Knop en kleine letter lopen altijd over de volle breedte van het formulier. */
.lt-form-knop { grid-column: 1 / -1; justify-self: start; }
.lt-form-klein {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--color-neutral-700);
}

/* De artikellijst. Dezelfde opbouw als de persvermeldingen, maar de kop mag
   hier over drie regels: dit zijn geen krantenkoppen van vijf woorden. */
.lt-artikel {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none; color: inherit;
}
.lt-artikel:first-child { border-top: 1px solid var(--color-divider); }
.lt-artikel-datum {
  grid-column: 1 / -1;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.lt-artikel-kop {
  font-size: clamp(14px, 1.5cqi, 17px); line-height: 1.35;
  max-width: 60ch;
}
.lt-artikel-pijl { color: var(--color-accent); font-size: 14px; transition: transform 140ms ease; }
.lt-artikel:hover .lt-artikel-kop { text-decoration: underline; text-underline-offset: 3px; }
.lt-artikel:hover .lt-artikel-pijl { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lt-doel, .lt-doel-pijl, .lt-artikel-pijl { transition: none; }
}