/* =========================================================================
   basis.css — fundament van het thema ruwaybida
   Eigenaar: Agent A. Bevat de lettertypen, ALLE ontwerptokens, de reset,
   de basistypografie en de sitebrede toegankelijkheidsregels.

   Volgorde in dit bestand is niet willekeurig:
   1. @font-face   — moet vóór alles staan zodat de browser vroeg kan laden
   2. tokens       — :root, donkere modus, opschaling vanaf 960px
   3. reset        — zo klein mogelijk
   4. typografie   — body, koppen, links, lijsten
   5. toegankelijkheid — focus, skip-link, screenreader-tekst
   6. uitzonderingen — reduced motion, print

   Alle andere stylesheets (layout.css, artikel.css, reacties.css) gebruiken
   uitsluitend de variabelen hieronder. Hex-waarden staan alleen hier en in
   theme.json — dat is de afspraak uit CLAUDE.md §5 en CONTRACT §2.
   ========================================================================= */


/* =========================================================================
   1. LETTERTYPEN — lokaal gehost (CLAUDE.md §5: geen Google-CDN, AVG)
   =========================================================================
   Elke subset staat als eigen @font-face met een eigen unicode-range. De
   browser haalt alleen het bestand op waarvan hij werkelijk een teken nodig
   heeft: een pagina zonder Arabisch downloadt het Arabische bestand niet.

   font-display:swap — de tekst is meteen leesbaar in de systeemletter en
   wisselt daarna. Dat is bij een leessite belangrijker dan een perfecte
   eerste verf; 'optional' zou op een trage verbinding betekenen dat de
   huisstijlletter helemaal nooit verschijnt.
   ------------------------------------------------------------------------- */

/* --- Gentium Basic 400 --- */
@font-face {
	font-family: 'Gentium Basic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gentium-400-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;
}
/*
 * latin-ext is op deze site geen luxe maar noodzaak: hier zitten ā ī ḥ ḍ ṣ ʾ in,
 * de translitteratie die in vrijwel elke alinea voorkomt (ḥadīth, Qurʾān, ruwaybiḍa).
 * Gentium is juist voor dat soort tekst ontworpen en dekt U+1E00-1EFF volledig —
 * gecontroleerd in de unicode-range die Google meelevert. Zonder deze subset valt de
 * tekst middenin een woord terug op de systeemletter, en dat zie je.
 */
@font-face {
	font-family: 'Gentium Basic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gentium-400-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;
}

/* --- Gentium Basic 700 --- *
 * Gentium Basic kent alleen 400 en 700; er is geen 500 of 600. De tokens die eerder
 * op 500 (labels) en 600 (koppen) stonden, wijzen daarom nu naar 700. Laat je ze op
 * 600 staan, dan synthetiseert de browser een halfvet — dat ziet er op een schreef-
 * letter merkbaar slechter uit dan de echte vette snede.
 */
@font-face {
	font-family: 'Gentium Basic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/gentium-700-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: 'Gentium Basic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/gentium-700-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;
}

/* --- Gentium Basic cursief ---
 * De bronsite zet de datumregel en aangehaalde werktitels cursief. Een schreefletter
 * heeft daar een echte cursieve snede voor; een schuingetrokken rechte letter is bij
 * een schreef direct herkenbaar als namaak. */
@font-face {
	font-family: 'Gentium Basic';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gentium-400-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: 'Gentium Basic';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gentium-400-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;
}

/* --- KFGQPC Uthman Taha Naskh ---
   De Arabische letter van het King Fahd-complex voor de druk van de Qurʾān, door de
   opdrachtgever aangeleverd en lokaal gehost (CLAUDE.md §5).

   Waarom déze KFGQPC-snede en niet Uthmanic Script HAFS, die ook op de machine stond:
   HAFS is gemaakt voor Qurʾān-tekst in Uthmani-spelling en mist tekens die in dit
   artikel wél voorkomen. Gemeten in de cmap van beide bestanden:
     - Uthmanic Script HAFS : 277 glyphs, MIST U+FDFA (ﷺ) en U+FD3E/FD3F (﴿ ﴾)
     - Uthman Taha Naskh    : 313 glyphs, alles compleet
   De ontbrekende tekens zouden als blokjes verschijnen, precies in de zin over de
   Profeet en rond elk Qurʾān-vers.

   Omgezet van TTF naar woff2 met fontTools; 139 KB -> 58 KB per snede. */
@font-face {
	font-family: 'KFGQPC Uthman Taha Naskh';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/kfgqpc-uthman-taha-naskh-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'KFGQPC Uthman Taha Naskh';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/kfgqpc-uthman-taha-naskh-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* --- Dezelfde Arabische letter, aangemeld ONDER de naam 'Gentium Basic' ---
   Dit is de kern van CONTRACT §7 en ziet er expres raar uit, dus: waarom.

   De echte content zet Arabisch middenin een Nederlandse alinea. Gentium heeft geen
   Arabische tekens, dus zonder deze regel valt de browser terug op de systeemletter —
   een Arabische letter die niet bij de rest past, en op sommige toestellen tofu.

   Door hetzelfde bestand als extra 'Gentium Basic'-face te registreren mét de
   Arabische unicode-range, kiest de browser hem automatisch voor precies die tekens.
   De ranges overlappen niet, dus de Latijnse tekst blijft Gentium.

   Zelfde bestands-URL als hierboven: de browser haalt hem één keer op. */
@font-face {
	font-family: 'Gentium Basic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/kfgqpc-uthman-taha-naskh-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'Gentium Basic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/kfgqpc-uthman-taha-naskh-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}


/* =========================================================================
   2. TOKENS — CONTRACT §2 (kleur) en §3 (overig)
   ------------------------------------------------------------------------- */

:root {
	/* --- kleur, lichte modus --- */
	--bg: #f2f1ed;
	--surface: #faf9f5;
	--surface-2: #fdfcfa;
	--callout: #eceef4;
	--text: #363431;
	--muted: #6b6359;
	--heading: #7d746a;        /* alleen vanaf 24px — 4,06:1 */
	--heading-safe: #6b6359;   /* elke maat — 5,23:1 */
	--accent: #2b3a67;
	--accent-hover: #1f2a4a;
	/*
	 * Paars en niet blauwgrijs. De vorige waarde (#353f5c) verschilde maar 1,06:1 van
	 * --accent; op het scherm was dat niet te zien, dus het onderscheid bestond alleen
	 * in de code.
	 *
	 * Let op de grens hiervan: twee kleuren die allebei >= 4,5:1 op een lichte
	 * achtergrond moeten halen, zijn allebei donker en kunnen onderling nooit 3:1
	 * verschillen — doorgerekend, geen enkele kandidaat kwam boven 1,51. Het
	 * onderscheid tussen bezocht en onbezocht komt hier dus uit de kleurTOON, niet uit
	 * helderheid, en is daarmee een hulpsignaal en geen dragende informatie. Dat mag:
	 * WCAG stelt geen eis aan de bezochte staat. Draag nooit iets essentieels op deze
	 * manier over.
	 *
	 * #5f4b8b haalt 6,96:1 op --surface en 6,48:1 op --bg.
	 */
	--visited: #5f4b8b;
	--accent-strong: #2b3a67;
	--on-accent: #faf9f5;
	--rule: #d9d6d0;           /* uitsluitend decoratief — 1,38:1 */
	--border: #857d73;         /* rand van bedienbare elementen */
	--focus: #2b3a67;
	--danger: #8c2f14;

	/*
	 * Een gevulde knop heeft een EIGEN kleurenpaar en leent niet dat van de links.
	 *
	 * Waarom: --accent moet in donkere modus licht zijn om als link leesbaar te
	 * blijven op een donkere achtergrond. Een gevulde knop in diezelfde kleur wordt
	 * dan een lichtblauw vlak met bijna-zwarte tekst — meetbaar in orde (6,19:1),
	 * maar het leest als blauw op blauw en oogt vaal. Met een eigen paar kan het
	 * knopvlak helderder worden zonder dat de linkkleur verandert.
	 *
	 * Licht: donker vlak, lichte tekst — 10,47:1.
	 */
	--knop-vlak: #2b3a67;
	--knop-tekst: #faf9f5;
	--knop-vlak-hover: #1f2a4a;

	/* Laat de browser formuliervelden, scrollbalken en de standaard
	   selectiekleur bij de modus passen. Zonder dit blijft een <select> in
	   donkere modus een wit blok. */
	color-scheme: light;

	/* --- letterstapels --- */
	--font-body: 'Ruwaybida Eretitels', 'Gentium Basic', Georgia, 'Times New Roman', serif;
	--font-display: 'Ruwaybida Eretitels', 'Gentium Basic', Georgia, 'Times New Roman', serif;
	--font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
	--font-arabic: 'Ruwaybida Eretitels', 'KFGQPC Uthman Taha Naskh', 'Noto Naskh Arabic', serif;

	/* --- tekstmaten, mobiel = basis --- */
	--fs-label: 0.875rem; /* 14px */
	--fs-meta: 1rem; /* 16px */
	--fs-caption: 1rem; /* 16px */
	--fs-code: 0.9375rem; /* 15px */
	--fs-body: 1.125rem; /* 18px */
	--fs-lead: 1.1875rem; /* 19px */
	--fs-h3: 1.125rem; /* 18px */
	--fs-h2: 1.375rem; /* 22px */
	--fs-h1: 1.875rem; /* 30px */
	--fs-site: 1.1875rem; /* 19px */

	--lh-body: 1.7;
	--lh-head: 1.3;
	--lh-tight: 1.15;
	--lh-meta: 1.5;

	--tr-label: .1em;
	--tr-display: .01em;

	/* --- samengestelde tekststijlen --- */
	--t-body: 400 var(--fs-body)/var(--lh-body) var(--font-body);
	--t-lead: 400 var(--fs-lead)/1.6 var(--font-body);
	--t-meta: 400 var(--fs-meta)/var(--lh-meta) var(--font-body);
	--t-label: 700 var(--fs-label)/1.4 var(--font-display);
	/*
	 * 1,6 en niet 1,5: --t-caption wordt gebruikt op bijschriften, de notenlijst en
	 * de AVG-regel onder het reactieformulier. Dat zijn alledrie lopende tekst, en
	 * CLAUDE.md §3 eist daar minimaal 1,6. Gemeten met check-mobiel.py: 24px/16px
	 * = 1,50 op .rb-reactieformulier__avg.
	 */
	--t-caption: 400 var(--fs-caption)/1.6 var(--font-body);
	--t-code: 400 var(--fs-code)/1.55 var(--font-mono);
	--t-h1: 700 var(--fs-h1)/var(--lh-tight) var(--font-display);
	--t-h2: 700 var(--fs-h2)/var(--lh-head) var(--font-display);
	--t-h3: 700 var(--fs-h3)/1.35 var(--font-body);
	--t-site: 700 var(--fs-site)/1.2 var(--font-display);

	/* --- ruimte, basisritme 4px --- */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 20px;
	--s6: 24px;
	--s7: 32px;
	--s8: 40px;
	--s9: 48px;
	--s10: 64px;
	--s11: 80px;

	--gutter: 20px;
	--block: 30px;
	--section: 48px;

	/*
	 * De ch-eenheid is de breedte van het cijfer "0", NIET de gemiddelde tekenbreedte
	 * van lopende tekst. Hoe die twee zich verhouden verschilt per lettertype, dus
	 * deze waarde moet opnieuw gemeten worden zodra de letter verandert.
	 *
	 * Geschiedenis van dit ene getal, allemaal gemeten met check-mobiel.py:
	 *   70ch in Poppins           -> 91 tekens (ruim buiten de 60-75 uit CLAUDE.md §3)
	 *   55ch in Poppins           -> 61-68 tekens
	 *   53ch in Gentium + KFGQPC  -> 58-62 tekens (net te smal)
	 *   57ch in Gentium + KFGQPC  -> 62-66 tekens op 640, 768, 960 en 1280px
	 *
	 * 57ch is gekozen omdat het op geen enkele breedte tegen een grens aanligt. De
	 * meting deelt de kolombreedte door de GEMIDDELDE tekenbreedte van die alinea, en
	 * die verschilt per tekst: een alinea met Arabisch of veel kapitalen telt zwaarder.
	 * Een waarde die precies 60 haalt, zakt bij de volgende alinea alsnog door.
	 *
	 * min(..., 100%) en geen kale ch-waarde: op een smal scherm moet de kolom
	 * gewoon de beschikbare breedte nemen (MEMORY.md B5).
	 */
	--measure: min(57ch, 100%);
	--tap: 48px;
	--row: 52px;
	--header-h: 56px;
	--container: 1200px;
	/*
	 * Breedte van de kantlijn met de inhoudsopgave, vanaf 960px. Staat hier en niet
	 * in artikel.css omdat het reactieblok dezelfde waarde nodig heeft: dat moet op de
	 * leeskolom uitlijnen, en die staat door deze kantlijn NIET in het midden van de
	 * pagina. Gemeten raster op 1280px: 200px | 760px | 112px.
	 */
	--toc-breedte: 200px;
	--leeskolom: 760px;

	/* --- vorm --- */
	--radius: 0px;
	--radius-pill: 999px;
	--bw: 1px;
	--bw-thick: 2px;
	--focus-w: 3px;
	--focus-off: 2px;
	--shadow-overlay: 0 8px 24px rgba(54, 52, 49, .16);

	/* --- beweging --- */
	--motion-fast: 120ms;
	--motion-base: 180ms;
	--easing: cubic-bezier(.2, .6, .3, 1);

	/* --- initiaal (uit het ontwerpbestand; Agent C gebruikt ze in artikel.css) --- */
	--dropcap-fs: 3.25rem; /* 52px */
	--dropcap-lh: .86;
	--dropcap-mr: 10px;
	--dropcap-pt: 6px;
}

/* -------------------------------------------------------------------------
   DONKERE MODUS
   -------------------------------------------------------------------------
   Twee blokken met dezelfde waarden, en dat is opzet:

   1. html[data-theme="dark"]  — de expliciete keuze van de bezoeker.
   2. @media (prefers-color-scheme: dark) html:not([data-theme="light"])
      — de systeemvoorkeur, maar alleen als de bezoeker niet zelf voor licht
        heeft gekozen.

   Zo wint de keuze van de bezoeker in béide richtingen, zonder JavaScript en
   zonder !important: kiest hij licht op een donker systeem, dan matcht de
   :not() niet en blijft :root staan. Kiest hij donker op een licht systeem,
   dan matcht blok 1. Kiest hij niets, dan beslist het systeem.

   Het inline script in de <head> (inc/enqueue.php) zet alleen het attribuut
   uit localStorage; zet het script niets, dan werkt de systeemvoorkeur nog
   steeds. De site is nooit afhankelijk van JavaScript voor leesbaarheid.
   ------------------------------------------------------------------------- */

html[data-theme="dark"] {
	--bg: #1a1917;
	--surface: #201f1c;
	--surface-2: #252420;
	--callout: #22262e;
	--text: #ece9e2;
	--muted: #a8a096;
	--heading: #b8b0a4;
	--heading-safe: #a8a096;
	--accent: #8798cd;
	--accent-hover: #a4b1d9;
	--visited: #b0a0d8;
	--accent-strong: #8798cd;
	--on-accent: #1a1917;
	--rule: #34322e;
	--border: #706a61;
	--focus: #8798cd;
	--danger: #e8836a;

	/*
	 * Donker: helder vlak, inktzwarte tekst — 9,80:1 (was 6,19:1 toen de knop de
	 * linkkleur #8798cd leende). Het vlak haalt 9,39:1 tegen de paginaachtergrond,
	 * dus de vorm van de knop is ook duidelijk (WCAG 1.4.11 vraagt 3:1).
	 */
	--knop-vlak: #a9bdf0;
	--knop-tekst: #101422;
	--knop-vlak-hover: #c3d0f2;

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--bg: #1a1917;
		--surface: #201f1c;
		--surface-2: #252420;
		--callout: #22262e;
		--text: #ece9e2;
		--muted: #a8a096;
		--heading: #b8b0a4;
		--heading-safe: #a8a096;
		--accent: #8798cd;
		--accent-hover: #a4b1d9;
		--visited: #b0a0d8;
		--accent-strong: #8798cd;
		--on-accent: #1a1917;
		--rule: #34322e;
		--border: #706a61;
		--focus: #8798cd;
		--danger: #e8836a;
		--knop-vlak: #a9bdf0;
		--knop-tekst: #101422;
		--knop-vlak-hover: #c3d0f2;

		color-scheme: dark;
	}
}

/* -------------------------------------------------------------------------
   WordPress-paletvariabelen laten meebewegen met de modus
   -------------------------------------------------------------------------
   theme.json zet vaste hex-waarden in --wp--preset--color--*, zodat de
   kleurstalen in de blokeditor de echte kleur tonen in plaats van een leeg
   vakje. Die waarden zijn de LICHTE set, dus in donkere modus wijzen ze naar
   de verkeerde kant. Hier koppelen we ze alsnog aan onze eigen tokens.

   De selector noemt zowel het html-element als body, omdat WordPress zijn
   globale stijlen afhankelijk van de kernversie op :root óf op body zet; een
   declaratie op body zou een geërfde waarde van html anders overstemmen.
   ------------------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
	--wp--preset--color--bg: var(--bg);
	--wp--preset--color--surface: var(--surface);
	--wp--preset--color--surface-2: var(--surface-2);
	--wp--preset--color--callout: var(--callout);
	--wp--preset--color--text: var(--text);
	--wp--preset--color--muted: var(--muted);
	--wp--preset--color--heading: var(--heading);
	--wp--preset--color--heading-safe: var(--heading-safe);
	--wp--preset--color--accent: var(--accent);
	--wp--preset--color--accent-hover: var(--accent-hover);
	--wp--preset--color--visited: var(--visited);
	--wp--preset--color--accent-strong: var(--accent-strong);
	--wp--preset--color--on-accent: var(--on-accent);
	--wp--preset--color--rule: var(--rule);
	--wp--preset--color--border: var(--border);
	--wp--preset--color--focus: var(--focus);
	--wp--preset--color--danger: var(--danger);
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]),
	html:not([data-theme="light"]) body {
		--wp--preset--color--bg: var(--bg);
		--wp--preset--color--surface: var(--surface);
		--wp--preset--color--surface-2: var(--surface-2);
		--wp--preset--color--callout: var(--callout);
		--wp--preset--color--text: var(--text);
		--wp--preset--color--muted: var(--muted);
		--wp--preset--color--heading: var(--heading);
		--wp--preset--color--heading-safe: var(--heading-safe);
		--wp--preset--color--accent: var(--accent);
		--wp--preset--color--accent-hover: var(--accent-hover);
		--wp--preset--color--visited: var(--visited);
		--wp--preset--color--accent-strong: var(--accent-strong);
		--wp--preset--color--on-accent: var(--on-accent);
		--wp--preset--color--rule: var(--rule);
		--wp--preset--color--border: var(--border);
		--wp--preset--color--focus: var(--focus);
		--wp--preset--color--danger: var(--danger);
	}
}

/* -------------------------------------------------------------------------
   OPSCHALING VANAF 960px (CONTRACT §3)
   -------------------------------------------------------------------------
   Alleen min-width, nooit max-width als hoofdstructuur (CLAUDE.md §3).
   Alle samengestelde --t-*-tokens verwijzen naar deze variabelen, dus ze
   schalen automatisch mee; er hoeft hier niets over te worden herhaald.
   ------------------------------------------------------------------------- */
@media (min-width: 960px) {
	:root {
		--fs-body: 1.25rem; /* 20px */
		--fs-lead: 1.3125rem; /* 21px */
		--fs-h1: 2.8125rem; /* 45px */
		--fs-h2: 1.75rem; /* 28px */
		--fs-h3: 1.375rem; /* 22px */
		--fs-meta: 1.0625rem; /* 17px */
		--fs-site: 1.625rem; /* 26px */

		--gutter: 48px;
		--block: 34px;
		--section: 64px;
		--header-h: 48px;

		--dropcap-fs: 4rem; /* 64px */
	}
}


/* =========================================================================
   3. RESET — zo klein mogelijk
   ------------------------------------------------------------------------- */

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

html {
	/* Voorkomt dat mobiel Safari tekst opblaast bij een draai naar liggend.
	   Blokkeert NIET het inzoomen door de gebruiker (WCAG 1.4.4). */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/*
	 * Het kijkgebied voor élke scroll-actie, niet alleen voor een hash-sprong.
	 *
	 * Verderop staat `scroll-margin-top` op `:target, [id]`, en dat dekt te weinig.
	 * Bij achteruit tabben (Shift+Tab) scrolt de browser zélf, en dan kijkt hij naar
	 * de scroll-padding van de scroll-container, niet naar de scroll-margin van het
	 * element. Gemeten op 390x780: van de 18 stappen terug belandden er twee achter
	 * de kop van 57px — het reactieveld (40,6px verborgen) en de reekslink (23,0px),
	 * en die laatste heeft niet eens een id, dus de scroll-margin gold daar sowieso
	 * niet. WCAG 2.2 SC 2.4.11 Focus Not Obscured.
	 */
	scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
}

ul[class],
ol[class] {
	/* Alleen lijsten die als component worden gebruikt (menu, paginering)
	   verliezen hun inspringing; lijsten ín een artikel houden hem. */
	padding: 0;
	list-style: none;
}

img,
picture,
svg,
video,
iframe {
	display: block;
	/* max-width, nooit width — zie MEMORY.md V5: een vaste breedte naast een
	   max-height pletdrukt een staande foto en rekt een kleine foto op boven
	   zijn eigen resolutie. */
	max-width: 100%;
	height: auto;
}

/* Formulierelementen erven de letter niet uit zichzelf. */
input,
button,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Een sticky header dekt anders de kop af waar een ankerlink naartoe springt
   (inhoudsopgave, voetnoten). Ruimte = kophoogte plus een regel lucht. */
:target,
[id] {
	scroll-margin-top: calc(var(--header-h) + var(--s4));
}


/* =========================================================================
   4. BASISTYPOGRAFIE
   ------------------------------------------------------------------------- */

body {
	background: var(--bg);
	color: var(--text);
	font: var(--t-body);
	/* Geen overflow-x:hidden. Dat verbergt horizontale overloop in plaats van
	   hem op te lossen, en breekt position:sticky. Overloop hoort nul te zijn
	   (CONTRACT §5.6) en moet zichtbaar blijven als hij dat niet is. */
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	/* Koppen zijn kort; balance verdeelt de regels gelijkmatig zodat er geen
	   losse hangende laatste regel overblijft. */
	text-wrap: balance;

	/*
	 * Een lang woord in een kop mag de pagina niet uitduwen. Op deze site is dat
	 * geen randgeval: translitteraties als "Al-Ruwaybiḍa:" zijn lang en bevatten
	 * geen afbreekpunt. Gemeten met check-mobiel.py: bij 200% tekstvergroting op
	 * 320px liep de H1 78px buiten beeld (WCAG 1.4.4 én 1.4.10).
	 *
	 * overflow-wrap en niet word-break: break-all — die laatste breekt élk woord
	 * op een willekeurige plek, ook als het gewoon past. overflow-wrap grijpt
	 * alleen in als het woord anders niet past.
	 */
	overflow-wrap: break-word;
}

h1 {
	font: var(--t-h1);
	letter-spacing: var(--tr-display);
	color: var(--heading);
}

/* --heading mag volgens CONTRACT §2 pas vanaf 24px (4,06:1). Op mobiel is een
   h2 22px, dus daar --heading-safe (5,23:1); vanaf 960px is hij 28px en mag
   de lichtere tint wel. */
h2 {
	font: var(--t-h2);
	letter-spacing: var(--tr-display);
	color: var(--heading-safe);
}

@media (min-width: 960px) {
	h2 {
		color: var(--heading);
	}
}

h3 {
	font: var(--t-h3);
	color: var(--text);
}

h4, h5, h6 {
	font: var(--t-h3);
	color: var(--text);
}

p, li, dd {
	/* pretty voorkomt een laatste regel met één woord erop. */
	text-wrap: pretty;
}

ul, ol {
	padding-left: var(--s5);
}

li + li {
	margin-top: var(--s2);
}

/*
 * ...maar niet in navigatie, paginering of de inhoudsopgave.
 *
 * De regel hierboven gaat over LOPENDE TEKST: opsommingen in een artikel lezen
 * prettiger met wat lucht tussen de punten. Een menu is geen lopende tekst, en in
 * de brede navigatie is het zelfs een horizontale rij — daar betekent een
 * bovenmarge niets, behalve dat het tweede item scheef komt te staan.
 *
 * Zo zag dat eruit: "Home" stond op top=8 en "Artikelen" op top=12, terwijl beide
 * items 48px hoog waren en de lijst align-items:center had. De 4px kwam uit deze
 * marge, niet uit de uitlijning. Verticale ruimte in de menulade komt uit
 * --row (52px per rij), niet hieruit.
 */
:is(nav, .rb-toc__lijst, .rb-paginering) li + li {
	margin-top: 0;
}

strong, b {
	font-weight: 700;
}

small {
	/* Nooit onder 15px voor lopende tekst (CLAUDE.md §3). */
	font-size: var(--fs-caption);
}

code, kbd, samp, pre {
	font: var(--t-code);
}

hr {
	border: 0;
	border-top: var(--bw) solid var(--rule);
	margin: var(--block) 0;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

/* Arabisch: kapitalen en letterspatiëring bestaan er niet en breken de
   letterverbindingen — een woord valt letterlijk uit elkaar (CONTRACT §5.14).
   Deze regel staat sitebreed zodat een label- of kopstijl met text-transform
   nooit per ongeluk over Arabische tekst heen valt. */
:lang(ar) {
	font-family: var(--font-arabic);
	text-transform: none;
	letter-spacing: normal;
}


/* =========================================================================
   5. LINKS
   ------------------------------------------------------------------------- */

a {
	color: var(--accent);
	text-decoration: underline;
	/* Dun en met afstand: de onderstreping snijdt anders door de staarten van
	   de p, g en j van Poppins heen. */
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:visited {
	/* Bezochte links onderscheiden is bij een naslagsite geen detail: de lezer
	   moet kunnen zien wat hij al gelezen heeft. */
	color: var(--visited);
}

/* Elke hover binnen @media (hover:hover) — op een touchscreen blijft een
   hover-stand anders "plakken" na een tik (CONTRACT §5.2). */
@media (hover: hover) {

	a:hover {
		color: var(--accent-hover);
		text-decoration-thickness: 2px;
	}
}

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


/* =========================================================================
   6. TOEGANKELIJKHEID
   ------------------------------------------------------------------------- */

/* Zichtbare focus op alles wat focus kan krijgen. :focus-visible en niet
   :focus, zodat een muisklik geen ring achterlaat maar de toetsenbordgebruiker
   hem wél altijd ziet. Nooit outline:none zonder vervanging. */
:focus-visible {
	outline: var(--focus-w) solid var(--focus);
	outline-offset: var(--focus-off);
}

/* Sommige browsers geven <details><summary> een eigen focusstijl; gelijktrekken. */
summary:focus-visible {
	outline: var(--focus-w) solid var(--focus);
	outline-offset: var(--focus-off);
}

/* --- Skip-link ---
   Zit als eerste element in de <body> en is onzichtbaar tot hij focus krijgt.
   We gebruiken geen display:none of visibility:hidden: die halen het element
   uit de tab-volgorde en dan is de link onbereikbaar. Positioneren buiten
   beeld is de enige techniek die werkt.

   Ondersteunde klassenamen: .rb-skiplink (eigen conventie) en .skip-link
   (wat WordPress-templates en veel controlescripts verwachten). */
.rb-skiplink,
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	/* min-height, nooit height: bij 200% tekstvergroting moet het vlak
	   meegroeien in plaats van de tekst af te knippen (CONTRACT §5.4). */
	min-height: var(--tap);
	padding: 0 var(--s5);
	background: var(--surface);
	color: var(--accent);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	text-decoration: none;
	border: var(--bw) solid var(--border);
	/* Buiten beeld, maar wel in de tab-volgorde en leesbaar voor hulpsoftware. */
	transform: translateY(-200%);
}

.rb-skiplink:focus,
.skip-link:focus {
	transform: translateY(0);
	outline: var(--focus-w) solid var(--focus);
	outline-offset: calc(var(--focus-off) * -1);
}

/* --- Alleen voor schermlezers ---
   .rb-visueel-verborgen is de eigen naam; .screen-reader-text moet er ook in,
   want WordPress-kern zet die klasse zelf op labels in het zoekformulier en
   het reactieformulier. Zonder deze regel verschijnt daar zichtbaar
   "Zoeken naar:" boven het veld. */
.rb-visueel-verborgen,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	/* clip-path én clip: oude WebKit kent alleen clip. */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Krijgt zo'n element toch focus (bv. "Ga naar reacties"), dan moet het
   zichtbaar worden — anders verdwijnt de focus voor een ziende
   toetsenbordgebruiker. */
.rb-visueel-verborgen:focus,
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}


/* =========================================================================
   7. BEWEGINGSVOORKEUR
   =========================================================================
   prefers-reduced-motion gaat over vestibulaire prikkels: verplaatsing,
   parallax, zoom. Alles op 0s zetten is grover dan de voorkeur vraagt — een
   kleur die in een tiende seconde overvloeit is geen prikkel, en een harde
   omslag voelt juist onrustiger (MEMORY.md V11).

   Daarom: animaties uit, maar de transition blijft bestaan en wordt beperkt
   tot eigenschappen die niets verplaatsen. transform, translate, scale,
   width, height en top/left vallen daarmee weg; kleur, rand en opaciteit
   blijven vloeiend.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}


/* =========================================================================
   8. PRINT
   =========================================================================
   Dit is een naslagsite: een artikel uitprinten of als PDF bewaren is een
   reële behoefte, geen bijzaak.
   ------------------------------------------------------------------------- */
@media print {

	/* Tokens omzetten naar inkt op papier. Alle vlakken wit, alle tekst zwart:
	   een lichtgrijze --muted van 5:1 op scherm wordt op papier onleesbaar.

	   Alle drie de selectors uit de donkere-modus-blokken staan hier opnieuw,
	   en dat is nodig: `html:not([data-theme="light"])` telt één attribuut méér
	   dan `:root` en zou anders van deze printregels winnen. Iemand met een
	   donker systeemthema kreeg dan witte tekst op wit papier. Gelijke
	   specificiteit plus latere plaats in het bestand = print wint. */
	:root,
	html[data-theme="dark"],
	html:not([data-theme="light"]) {
		--bg: #fff;
		--surface: #fff;
		--surface-2: #fff;
		--callout: #fff;
		--text: #000;
		--muted: #000;
		--heading: #000;
		--heading-safe: #000;
		--accent: #000;
		--accent-hover: #000;
		--visited: #000;
		--accent-strong: #000;
		--on-accent: #fff;
		--rule: #999;
		--border: #333;
		--shadow-overlay: none;

		color-scheme: light;
	}

	body {
		background: #fff !important;
		color: #000;
		font-size: 11pt;
	}

	/* Navigatie, zoeken, paginering, reacties en de skip-link horen niet op
	   papier. De inhoudsopgave wel: die is bij een lang artikel juist nuttig. */
	.rb-skiplink,
	.skip-link,
	.rb-header nav,
	.rb-nav,
	.rb-menu,
	.rb-paginering,
	.rb-reacties,
	#comments,
	.rb-zoekformulier,
	form[role="search"],
	.rb-lees-ook {
		display: none !important;
	}

	/* De URL erbij, anders is een link op papier een dood woord.
	   Alleen bij externe links: interne verwijzingen leveren een lange,
	   onleesbare regel op zonder dat iemand hem overtypt. */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	a[href^="#"]::after,
	a[href^="mailto"]::after {
		content: "";
	}

	a {
		text-decoration: underline;
		color: #000;
	}

	/* Een kop onderaan een vel met de tekst op het volgende vel is de
	   klassieke printfout. */
	h1, h2, h3, h4 {
		break-after: avoid;
		page-break-after: avoid;
	}

	p, blockquote, figure, table, li {
		break-inside: avoid;
		page-break-inside: avoid;
		orphans: 3;
		widows: 3;
	}

	img {
		max-width: 100% !important;
	}
}

/* =========================================================================
   9. ERETITELS — een eigen lettertype

   De eretitels (sallallahu, jalla jalaluhu, tarahhum, radiyallahu) zaten hiervoor
   als CSS-masker op een <span>: acht losse SVG's, een filter in de mu-plugin dat
   tekens door markup verving, een verborgen kopie van het teken voor kopieren-en-
   plakken, en een handmatige vertical-align-formule. Dat werkte, maar het is een
   omweg om iets te doen wat een lettertype van huis uit kan.

   Nu is de eretitel gewoon TEKST. Ctrl+F vindt hem, een schermlezer leest het
   codepunt, kopieren werkt vanzelf, de kleur volgt de tekst en de uitlijning zit
   in de fontmetriek. Een bestand van 16 kB in plaats van acht SVG's van samen
   ~120 kB, en een verzoek in plaats van een per gebruikte vorm.

   De unicode-range dekt alleen de LOSSTAANDE ligaturen. Die zijn Unicode-
   categorie So en Lo - gewone tekens. De combinerende varianten (U+0610-U+0613)
   zijn categorie Mn: een tekstshaper behandelt die als nul-breedte accenten en
   plaatst ze boven de vorige letter. Daarom staat er in de content U+FD40 in
   plaats van U+0612, en U+FD41 in plaats van U+0613.

   Deze familie staat VOORAAN in elke fontstapel hierboven. Dat moet: de Arabische
   letter is ook onder de naam 'Gentium Basic' aangemeld met een range die
   U+FB50-FDFF omvat, en die zou deze tekens anders opeisen - en ze niet hebben
   (gemeten breedte 0px, zie MEMORY.md).

   font-display: swap, en dat is een meting geweest.

   Eerst stond hier 'block', met het argument dat er geen terugval is die deze
   tekens heeft en 'swap' dus een leeg vakje zou tonen. Dat argument klopt, maar de
   prijs is te hoog: 'block' houdt élke tekstregel waar zo'n teken in staat tegen,
   en op de homepage staat de eretitel in de kaarttitels — dus in het element dat
   de LCP bepaalt. Gemeten op 4x CPU-rem en 1,6 Mbit, mediaan over drie runs:

       homepage  936 ms met swap -> 1408 ms met block
       artikel  1432 ms met swap -> 2048 ms met block

   Bijna een halve seconde wachten op een letter, om te voorkomen dat één teken
   honderd milliseconden onzichtbaar is. Dat is de verkeerde ruil op een leessite.

   Tekeningen: arabic-honorific-ligatures van BaAlwi Heritage (ID), CC BY 4.0,
   omgezet naar een lettertype met tools/bouw-eretitelfont.py. Zie CREDITS.md.
   ========================================================================= */

/*
 * font-weight: 100 900 en een tweede face voor cursief — allebei om SYNTHESE te
 * voorkomen.
 *
 * Er is maar één snede. Zou die alleen 400 en 'normal' claimen, dan verzint de browser
 * er in een kop (700) een vette bij door de vorm te verdikken, en in een cursief citaat
 * een schuine door hem scheef te trekken. Bij een Latijnse letter valt dat nog mee; bij
 * een kalligrafische ligatuur met haarfijne verbindingen loopt de vorm dicht en wordt
 * hij onleesbaar.
 *
 * Door het bereik 100-900 te claimen en dezelfde snede ook als cursief aan te melden,
 * pakt de browser overal exact deze tekening. De letter ernaast wordt gewoon vet of
 * cursief; alleen de eretitel blijft zichzelf, en dat is precies goed — een eretitel
 * kent geen vette variant.
 */
@font-face {
	font-family: 'Ruwaybida Eretitels';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/ruwaybida-eretitels.woff2') format('woff2');
	unicode-range: U+FD40-FD4F, U+FDFA, U+FDFB;
}
@font-face {
	font-family: 'Ruwaybida Eretitels';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/ruwaybida-eretitels.woff2') format('woff2');
	unicode-range: U+FD40-FD4F, U+FDFA, U+FDFB;
}