/**
 * Thema VoorWerk — huisstijl van de ABU.
 *
 * De waarden hieronder zijn overgenomen van de nieuwe ABU-site.
 * Verandert daar iets, dan hoef je alleen dit blok aan te passen.
 */

:root {
	/* Kleur */
	--abu-oranje: #f06021;
	/*
	 * Opgemeten op /styleguide/ van de nieuwe abu.nl: een link in lopende
	 * tekst kleurt bij hover naar --color-primary-600, een knop naar
	 * --color-primary-700. Niet op het oog nabouwen.
	 */
	--abu-oranje-link: #c9501c;
	--abu-oranje-diep: #a84317;
	--abu-geel: #ffb31c;
	--abu-blauw: #eff6ff;
	--abu-zand: #deddd7;
	--abu-inkt: #222222;
	--abu-zacht: #5b6470;
	--abu-lijn: #d7dde8;
	--abu-wit: #ffffff;

	/* Vorm */
	--abu-rond: 15px;
	--abu-cover: 1 / 1.32;
	--abu-breed: 1100px;

	/* Letter */
	--abu-letter: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
	--abu-blad: Georgia, "Times New Roman", serif;
}

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

body {
	margin: 0;
	background: var(--abu-wit);
	color: var(--abu-inkt);
	font-family: var(--abu-letter);
	font-size: 18px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-wrap: balance;
}

:focus-visible { outline: 3px solid var(--abu-oranje); outline-offset: 3px; }

.omt {
	max-width: var(--abu-breed);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--abu-inkt);
	color: #fff;
	padding: .75rem 1.25rem;
	z-index: 100;
}

.overslaan:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------
 * Kopbalk
 * ---------------------------------------------------------------- */

/* Zelfde lichtblauwe balk als op abu.nl. */
.kopbalk { background: var(--abu-blauw); }

.kopbalk__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1.1rem;
}

.merk { display: flex; align-items: center; gap: 1rem; text-decoration: none; }

/* Het officiële ABU-logo, inclusief "goed werk". */
.merk__logo {
	display: block;
	color: var(--abu-oranje);
	line-height: 0;
}

.merk__logo svg {
	display: block;
	height: 56px;
	width: auto;
}

.merk__abu {
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: -.03em;
	color: var(--abu-oranje);
	line-height: 1;
}

.merk__streep { width: 1px; height: 34px; background: rgba(34, 34, 34, .2); }

.merk__blad {
	font-family: var(--abu-blad);
	font-style: normal;
	font-size: 1.6rem;
	line-height: 1;
}

/*
 * Het blad heet *Voor*Werk: alleen het voorste deel staat schuin. Allebei de
 * helften krijgen hun stand expliciet mee, zodat het ook klopt als de naam in
 * een stuk tekst staat dat zelf al cursief is — dan blijft de Werk rechtop in
 * plaats van mee te kantelen.
 */
.blad__voor { font-style: italic; }
.blad__werk { font-style: normal; }

@media (max-width: 600px) {
	.merk { gap: .7rem; }
	.merk__logo svg { height: 42px; }
	.merk__streep { height: 26px; }
	.merk__blad { font-size: 1.25rem; }
}

.custom-logo-link img { max-height: 56px; width: auto; }

.menu {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .97rem;
	flex-wrap: wrap;
}

.menu a { text-decoration: none; padding-bottom: 3px; }

.menu a:hover,
.menu .current-menu-item a,
.menu .current_page_item a {
	border-bottom: 2px solid var(--abu-oranje);
	font-weight: 600;
}

/*
 * De menuknop zoals op abu.nl: drie streepjes die naar rechts korter worden,
 * met het woord Menu eronder.
 */
.menuknop {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	height: 46px;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.menuknop__streep {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
}

.menuknop__streep:nth-of-type(1) { width: 32px; }
.menuknop__streep:nth-of-type(2) { width: 24px; }
.menuknop__streep:nth-of-type(3) { width: 16px; }

.menuknop__woord,
.menulade__woord {
	margin-top: auto;
	font-size: .78rem;
	line-height: 1;
	text-transform: uppercase;
	font-weight: 400;
}

/* ------------------------------------------------------------------
 * Het menu op een telefoon
 *
 * Op een klein scherm schuift het menu van rechts naar binnen over de pagina
 * heen, net als op abu.nl. Het is een <dialog>: de browser legt hem dan zelf
 * bovenop alles (ook boven de leesbalk), zet er een donkere waas achter,
 * sluit hem met Escape en houdt de tab-toets binnen het menu.
 * ---------------------------------------------------------------- */

.menulade {
	position: fixed;
	inset: 0 0 0 40px;
	width: auto;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--abu-blauw);
	color: inherit;
	transform: translateX(100%);
	transition:
		transform .4s ease,
		overlay .4s ease allow-discrete,
		display .4s ease allow-discrete;
}

.menulade[open] { transform: translateX(0); }

@starting-style {
	.menulade[open] { transform: translateX(100%); }
}

.menulade::backdrop {
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition:
		opacity .4s ease,
		overlay .4s ease allow-discrete,
		display .4s ease allow-discrete;
}

.menulade[open]::backdrop { opacity: 1; }

@starting-style {
	.menulade[open]::backdrop { opacity: 0; }
}

.menulade__binnen {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* De kop blijft staan, zodat het kruisje bij een lang menu niet wegscrollt. */
.menulade__kop {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem clamp(1.25rem, 5vw, 1.75rem);
	background: var(--abu-blauw);
}

.menulade__kop .merk__logo svg { height: 38px; }
.menulade__kop .merk__streep { height: 24px; }
.menulade__kop .merk__blad { font-size: 1.2rem; }

.menulade__sluit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.menulade__kruis { position: relative; display: block; width: 26px; height: 26px; }

.menulade__kruis::before,
.menulade__kruis::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: var(--abu-oranje);
}

.menulade__kruis::before { transform: translateY(-50%) rotate(45deg); }
.menulade__kruis::after { transform: translateY(-50%) rotate(-45deg); }

.menulade__woord { margin-top: .3rem; }

.menulade__nav { padding: 1.25rem clamp(1.25rem, 5vw, 1.75rem) 2.5rem; }

.menu--lade {
	flex-direction: column;
	gap: 0;
	width: 100%;
	font-size: 1.25rem;
}

/*
 * Blok en geen flex: bij flex worden de woorden in 'Over VoorWerk' losse
 * items en valt de spatie ertussen weg.
 */
.menu--lade a {
	display: block;
	padding: .75rem 0;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none;
	border-bottom: 0;
}

/*
 * Waar je nu bent staat onderstreept, zoals op abu.nl. Geen streepje in de
 * kantlijn en geen ander vlak: dat leest onder elkaar als een scheiding in
 * plaats van als 'hier ben je'.
 */
.menu--lade a:hover,
.menu--lade a:focus-visible,
.menu--lade .current-menu-item > a,
.menu--lade .current_page_item > a,
.menu--lade .current-menu-ancestor > a {
	border-bottom: 0;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* Zolang het menu openstaat schuift de pagina eronder niet mee. */
.menu-open { overflow: hidden; }

@media (max-width: 800px) {
	.kopbalk__binnen { gap: 1rem; }
	.hoofdnav__breed { display: none; }
	.menuknop { display: flex; }
}

/*
 * Op een breed scherm staat het menu gewoon in de balk. De lade blijft dan
 * dicht — ook als iemand het scherm groter maakt terwijl hij openstaat.
 */
@media (min-width: 801px) {
	.menulade[open] { display: none; }
}

/* ------------------------------------------------------------------
 * Secties
 * ---------------------------------------------------------------- */

/*
 * De kopbalk is lichtblauw en de hero loopt daar naadloos in door — zoals de
 * hero op abu.nl. Zo is het nieuwste nummer één blok in plaats van een stuk
 * lege pagina met tekst erin.
 */
.hero {
	background: var(--abu-blauw);
	padding-block: clamp(1.75rem, 4.5vw, 2.75rem) clamp(2rem, 5vw, 3.25rem);
}

/*
 * De strapline: de H1 van de voorpagina. Klein gezet, want hij hoort de hero
 * niet weg te drukken - het uitgelichte nummer blijft waar de blik naartoe
 * moet. Wat hij wel doet is in een regel zeggen wat dit blad is, voor wie hier
 * binnenkomt zonder het te kennen.
 */
.strapline {
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	/* Nagemeten: de regel is 525 px breed, dus 60ch houdt hem op een regel. */
	max-width: 60ch;
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--abu-zacht);
}

/* Past het blok net niet? Dan haalt de hero er als eerste lucht uit. */
@media (max-height: 820px) {
	.hero { padding-block: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3.5vw, 2rem); }
}

.vlak { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.vlak--blauw { background: var(--abu-blauw); }
.vlak--zand { background: var(--abu-zand); }
.vlak--geel { background: var(--abu-geel); }

.vlak__titel {
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

.vlak__meer { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }

/* ------------------------------------------------------------------
 * Pagina's
 * ---------------------------------------------------------------- */

.pagina { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem); }

.kruimels { font-size: .88rem; color: var(--abu-zacht); margin-bottom: 1.25rem; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }
.kruimels__sep { margin-inline: .4rem; }

/*
 * Op een telefoon is een artikeltitel achterin het pad al gauw langer dan de
 * regel. Hij mag afbreken, maar het pad blijft een regel hoog beginnen.
 */
.kruimels__hier { overflow-wrap: anywhere; }

.pagina__kop { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.pagina__titel {
	margin: 0 0 .6rem;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.pagina__nr {
	display: inline-block;
	margin-left: .5em;
	font-size: .45em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--abu-zacht);
	vertical-align: middle;
}

.pagina__lood {
	max-width: 62ch;
	margin: 0;
	font-size: 1.1rem;
	color: var(--abu-zacht);
}

.pagina__lood p:last-child { margin-bottom: 0; }

.pagina__beeld {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--abu-rond);
	overflow: hidden;
}

.rijke-tekst { max-width: 65ch; }
.rijke-tekst > *:first-child { margin-top: 0; }
.rijke-tekst > *:last-child { margin-bottom: 0; }

.rijke-tekst h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.25rem; }
.rijke-tekst h3 { font-size: 1.25rem; margin-top: 1.75rem; }

.rijke-tekst ul,
.rijke-tekst ol { padding-left: 1.25rem; }

.rijke-tekst li { margin-bottom: .5rem; }

.rijke-tekst img,
.rijke-tekst .wp-block-image img { border-radius: var(--abu-rond); }

.rijke-tekst blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--abu-oranje);
	font-size: 1.15rem;
}

.rijke-tekst .alignwide { max-width: none; }

/* Knoppen uit de blokeditor in ABU-stijl */
.rijke-tekst .wp-block-button__link {
	background: var(--abu-oranje);
	color: #fff;
	border-radius: 999px;
	padding: .8rem 1.75rem;
	font-weight: 600;
	text-decoration: none;
}

.rijke-tekst .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--abu-inkt);
	border: 1px solid var(--abu-inkt);
}

/* ------------------------------------------------------------------
 * De lezer
 * ---------------------------------------------------------------- */

.pagina--lezer .lezerkop { margin-bottom: 1.5rem; }

.lezerkop__meta { margin: 0 0 .35rem; font-size: .9rem; color: var(--abu-zacht); }
.lezerkop__meta span { margin-inline: .35rem; }

.lezerkop__titel {
	margin: 0;
	font-size: clamp(1.6rem, 3.8vw, 2.4rem);
	line-height: 1.15;
}

.themas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	font-size: .9rem;
}

.themas__label { color: var(--abu-zacht); margin-right: .25rem; }

.themas__link {
	text-decoration: none;
	border: 1px solid var(--abu-lijn);
	border-radius: 999px;
	padding: .35rem .9rem;
}

.themas__link:hover { border-color: var(--abu-inkt); }

/* ------------------------------------------------------------------
 * Eenvoudige lijst (zoeken, overige archieven)
 * ---------------------------------------------------------------- */

.lijst { list-style: none; margin: 0; padding: 0; max-width: 70ch; }

.lijst__item { border-top: 1px solid var(--abu-lijn); }

.lijst__link {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
	text-decoration: none;
}

.lijst__titel { font-weight: 600; }
.lijst__meta { color: var(--abu-zacht); font-size: .9rem; white-space: nowrap; }
.lijst__link:hover .lijst__titel { color: var(--abu-oranje); }

.wp-block-search__input,
.search-field {
	border: 1px solid var(--abu-lijn);
	border-radius: 999px;
	padding: .7rem 1.1rem;
	font: inherit;
}

/* ------------------------------------------------------------------
 * Voettekst
 *
 * Nagebouwd naar de voet van de nieuwe abu.nl: een blauwe band met vier
 * kolommen, daaronder een witte balk. De maten zijn daar opgemeten
 * (18px tekst, 22,8px koppen, 24px onder een kop, 96px lucht in de band).
 * ---------------------------------------------------------------- */

.voet {
	background: var(--abu-blauw);
	color: var(--abu-inkt);
	font-size: 1.125rem;
	margin-top: clamp(3rem, 8vw, 5rem);
}

.voet__kolommen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 3rem;
	padding-block: clamp(3rem, 7vw, 6rem);
}

.voetkolom__kop {
	margin: 0 0 1.5rem;
	font-size: 1.27rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
}

.voetkolom__lijst {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.voetkolom__regel {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	line-height: 1.45;
}

.voeticoon {
	margin-top: .1em;
	color: var(--abu-inkt);
}

.voetkolom__regel a { text-decoration: none; }

.voetkolom__regel a:hover,
.voetkolom__regel a:focus-visible {
	color: var(--abu-oranje-link);
	text-decoration: underline;
}

/* De kanalen staan naast elkaar, alleen het merkteken. */
.voetkolom--sociaal .voetkolom__lijst {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.voetkolom__regel--sociaal { display: block; line-height: 0; }

.voetkolom__regel--sociaal a {
	display: block;
	color: var(--abu-inkt);
	line-height: 0;
}

.voetkolom__regel--sociaal a:hover { color: var(--abu-oranje-link); }

/* De witte balk onderaan. */
.voet__onder {
	background: var(--abu-wit);
	font-size: .875rem;
}

.voet__onder-binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 1.75rem;
}

.voet__regels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.voet__regels li:not(:last-child)::after {
	content: "|";
	margin-left: .8rem;
	color: var(--abu-lijn);
}

.voet__regels a { text-decoration: none; }

.voet__cookie {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.voet__regels a:hover,
.voet__cookie:hover {
	color: var(--abu-oranje-link);
	text-decoration: underline;
}

.voet__uitgave {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	color: var(--abu-zacht);
}

.voet__logo {
	display: block;
	color: var(--abu-inkt);
	line-height: 0;
}

.voet__logo svg {
	display: block;
	height: 34px;
	width: auto;
}

@media (max-width: 900px) {
	.voet__kolommen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

@media (max-width: 560px) {
	.voet { font-size: 1rem; }
	.voet__kolommen { grid-template-columns: minmax(0, 1fr); }
	.voet__onder-binnen { justify-content: flex-start; }
	.voet__uitgave { gap: 1rem; }
	.voet__logo svg { height: 28px; }
}

/* ------------------------------------------------------------------
 * Paginering
 * ---------------------------------------------------------------- */

.pagination { margin-top: 2.5rem; }

.pagination .page-numbers {
	display: inline-block;
	padding: .45rem .9rem;
	border-radius: 999px;
	text-decoration: none;
	font-size: .92rem;
}

.pagination .current { background: var(--abu-oranje); color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------
 * Een los artikel
 * ---------------------------------------------------------------- */

.pagina--artikel .artikelkop { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.artikelkop__cat {
	margin: 0 0 .7rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--abu-oranje);
}

.artikelkop__titel {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5.5vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 20ch;
}

.artikelkop__intro {
	max-width: 60ch;
	font-size: 1.15rem;
	line-height: 1.55;
	font-weight: 600;
}

.artikelkop__intro p { margin: 0 0 .8rem; }
.artikelkop__intro p:last-child { margin-bottom: 0; }

.artikelkop__meta {
	margin: 1rem 0 0;
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--abu-zacht);
}

.artikelkop__meta span { margin-inline: .35rem; }

/*
 * De foto boven een artikel komt uit het blad, en die is soms maar een paar
 * honderd beeldpunten breed. Op volle breedte uitrekken maakte hem zichtbaar
 * onscherp: een portret van 167 punten breed werd zes keer vergroot. Daarom
 * groeit het beeld hier nooit boven zijn eigen formaat uit, en is de maximale
 * breedte teruggebracht tot iets dat naast de tekstkolom in verhouding staat.
 */
.artikel__beeld {
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--abu-rond);
	overflow: hidden;
	width: fit-content;
	max-width: min(100%, 46rem);
}

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

/* Iets ruimer dan de standaard rijke tekst: dit is om te lézen. */
.artikel__tekst {
	max-width: 38rem;
	font-size: 1.075rem;
	line-height: 1.75;
}

/*
 * Het tussenkopje staat in kleinkapitaal, en dat leest bij een klein corps snel
 * als ruis in plaats van als kop. Een tandje groter — nog steeds duidelijk
 * kleiner dan de lopende tekst, maar het is nu een kop.
 */
.artikel__tekst > h3 {
	font-size: .94rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--abu-oranje);
	margin: 2.25rem 0 .6rem;
}

/*
 * De initiaal hoort even hoog te zijn als twee regels tekst, zodat hij onderaan
 * gelijk ligt met de tweede regel. De regelafstand is 1.75 en het corps 1.075rem,
 * dus twee regels zijn 3,76rem hoog. De kapitaalhoogte van Funnel Sans is
 * ongeveer 0,72 van het corps; daarom staat hier 5,2rem en niet 3,76.
 * De regelhoogte klemt de letter op precies die twee regels.
 */
.artikel__tekst > p:first-of-type::first-letter {
	float: left;
	font-weight: 800;
	font-size: 5.2rem;
	/*
	 * Precies twee regels hoog, en geen haar meer: een zwevend blok dat ook maar
	 * één beeldpunt boven twee regelhoogtes uitkomt duwt een derde regel opzij.
	 * Daarom geen marge of padding boven of onder.
	 */
	line-height: .715;
	padding: 0 .55rem 0 0;
	color: var(--abu-oranje);
}


.lijst__cat {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--abu-zacht);
	margin-bottom: .1rem;
}

/* ------------------------------------------------------------------
 * De voorkant van een nummer
 * ---------------------------------------------------------------- */

.pagina--nummer .nummerkop {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: center;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.nummerkop__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 18px 44px rgba(20, 24, 32, .22);
}

.nummerkop__meta {
	margin: 0 0 .5rem;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--abu-zacht);
}

.nummerkop__meta span { margin-inline: .35rem; }

.nummerkop__titel {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 5vw, 3rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 18ch;
}

.nummerkop__lood { max-width: 55ch; font-size: 1.05rem; }
.nummerkop__acties { margin-top: 1.5rem; }

@media (max-width: 700px) {
	.pagina--nummer .nummerkop { grid-template-columns: minmax(0, 1fr); }
	.nummerkop__cover { max-width: 12rem; }
}

/* Het artikel begint direct onder de leesbalk, dus iets minder lucht boven. */
.pagina--artikel { padding-top: clamp(1.25rem, 3vw, 2rem); }

/* ==================================================================
 * VoorWerk — artikelpagina, aansluiting op de ABU-styleguide
 * 7 september 2026
 *
 * Maten afgelezen op https://abu.wpacc01.yard.nl/styleguide/ :
 *
 *   lopende tekst  18 / 31,5 px      gewicht 400   #222222
 *   h1  46,2 / 57,7  800     h4  22,8 / 31,9  700
 *   h2  36,5 / 45,6  400     h5  20,2 / 28,3  700
 *   h3  28,8 / 36,0  400     h6  18,0 / 31,5  700
 *   citaat      18px, streep links 4px #f06021, 24px inspringing, naam vet
 *   bijschrift  16px, grijs, marge 8px boven / 16px onder
 *   link        #222222, onderstreept, vet — niet oranje
 *   hoek 15px
 *
 * Twee dingen staan er nergens: een kop in kapitalen, en een kop in het
 * oranje. Oranje is de citaatstreep, knoppen en accenten.
 *
 * Alle regels hieronder staan binnen .artikel__tekst. Ze gebruiken
 * afstammelingsselectors, niet ">", zodat ze ook gelden binnen een kader —
 * daar ging het eerder mis. De enige uitzondering is de initiaal: die hoort
 * bij de eerste alinea van het artikel zelf.
 * ================================================================ */

.artikel__tekst { font-size: 18px; line-height: 1.75; }

/* Het openingsbeeld liep tot 46rem, breder dan de leeskolom eronder; dat oogt
   als een bak in plaats van als de opening van een artikel. Even breed als de
   tekst is rustiger. De hoek van 15px zit op de figure, maar een beeld dat de
   figure precies vult laat dat niet altijd zien — dus ook op het beeld zelf. */
.pagina--artikel .artikel__beeld { max-width: min(100%, 38rem); }
.pagina--artikel .artikel__beeld img { border-radius: var(--abu-rond); }

/* Een vraag in een vraaggesprek is een kop op h4-niveau. Geen kapitalen en
   geen kleur: bij een vraag van twee regels leest dat als geschreeuw. */
.artikel__tekst h3.vraag {
	margin: 2.4rem 0 .25rem;
	font-size: 22.8px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
	max-width: 34ch;
	text-wrap: pretty;
}

/* Een kort rubriekslabel — "Goede basis", "Schaalbaar" — is h5. */
.artikel__tekst h3 {
	margin: 2.2rem 0 .25rem;
	font-size: 20.2px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

/* Een antwoord opent met een aanhalingsteken; dat hangt in de marge, anders
   begint elke eerste regel een halve letter naar binnen. */
.artikel__tekst p.spreekt { text-indent: -.42em; }

/* De initiaal staat op de eerste échte alinea: niet op een antwoord dat met
   een aanhalingsteken begint, en niet op een aanloopregel van één zin. */
.artikel__tekst > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
}

.artikel__tekst > p.opening::first-letter {
	float: left;
	font-weight: 800;
	font-size: 5.2rem;
	line-height: .715;
	padding: 0 .55rem 0 0;
	color: var(--abu-oranje);
}

/* Citaat: de blockquote van de styleguide. Het corps is groter dan de
   lopende tekst — een uitgelicht citaat is een pauze — maar wel een maat uit
   de reeks (h4). De naam eronder vet in de inktkleur. */
.artikel__tekst .vw-citaat {
	margin: 2rem 0;
	padding-left: 24px;
	border-left: 4px solid var(--abu-oranje);
}

.artikel__tekst .vw-citaat blockquote {
	font-size: 22.8px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
}

.artikel__tekst .vw-citaat figcaption {
	margin-top: .6rem;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-zacht);
}

/* Portret: loopt mee met de tekst zoals voorwerk.css het al deed. De tweede
   regel van het bijschrift — de functie — bestond al maar werd nooit gevuld.
   Twee portretten vlak na elkaar stapelen in plaats van naast elkaar. */
.artikel__tekst .vw-portret { clear: right; }

/* Is er te weinig tekst om omheen te lopen, dan zweeft het portret niet maar
   staat het over de kolom — anders blijft er een halve fotohoogte wit naast. */
.artikel__tekst .vw-portret--breed {
	float: none;
	width: auto;
	max-width: min(100%, 22rem);
	margin: 2rem 0;
}

/* Een staand portret over de kolom werd 529 punten hoog en stak daarmee boven
   het openingsbeeld uit. Dezelfde bovengrens als al het andere beeld. */
.artikel__tekst .vw-portret--breed img {
	max-height: 27rem;
	width: auto;
	max-width: 100%;
}

.artikel__tekst .vw-portret figcaption {
	margin: 8px 0 16px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

.artikel__tekst .vw-portret figcaption span {
	display: block;
	margin-top: .1rem;
	font-size: 16px;
	font-weight: 400;
	color: var(--abu-zacht);
}

.artikel__tekst .vw-bijschrift {
	margin: 8px 0 16px;
	font-size: 16px;
	color: var(--abu-zacht);
}

/* De ondertekening van een voorwoord. */
.artikel__tekst p.ondertekening {
	margin-top: 1.6rem;
	font-weight: 700;
}

/* Bron- en linkregels onder een kortnieuwsbericht. Een webadres is één woord
   zonder spaties; zonder deze regel steekt het buiten de kolom. */
.artikel__tekst p.bronregel {
	margin: .2rem 0 0;
	font-size: 16px;
	color: var(--abu-zacht);
	overflow-wrap: anywhere;
}

.artikel__tekst a { overflow-wrap: anywhere; }

/* Een stuk met drie of vier gesprekken achter elkaar liep als één lap door.
   Haarlijn van het thema, naam op h6-niveau, uitspraak op h3-niveau — de
   lichte kop van gewicht 400 uit de styleguide. */
.artikel__tekst .artikel__wie {
	margin: 3rem 0 .4rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--abu-lijn);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

/*
 * Een deel van een drieluik opent als een klein artikel: het oranje
 * kapitaallabel dat de site overal boven een kop zet, en daaronder de kop zelf.
 * In het blad is dat label een gele balk met een rond cijfer — vandaar het
 * bolletje. Er stonden hier eerder twee koppen pal op elkaar (de reeksregel en
 * het genummerde deel) en daarboven nog een losse naamregel; die naam staat al
 * in de eerste zin en onder het portret.
 */
.artikel__tekst .artikel__deel {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	margin: 3.5rem 0 .9rem;
	padding-top: 1.7rem;
	border-top: 1px solid var(--abu-lijn);
	font-size: .72rem;
	font-weight: 800;
	line-height: 1.7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--abu-oranje);
}

.artikel__tekst .artikel__deel__nr {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--abu-oranje);
	color: #fff;
	font-size: .85rem;
	line-height: 1;
	letter-spacing: 0;
}

/* De kop van het deel: een trede onder de artikelkop, op de h2 van de
   styleguide (36,5px, gewicht 400). */
.artikel__tekst .artikel__deelkop {
	margin: 0 0 1.2rem;
	font-size: 36.5px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: normal;
	max-width: 22ch;
}

@media (max-width: 34rem) {
	.artikel__tekst .artikel__deelkop { font-size: 28.8px; }
}

/* Een tussenkop in een kader gaat mee omlaag met de kadertekst: de kadertitel
   is 22,8px, de tekst 16px, en de tussenkop daartussenin. Stond hij eerder op
   de maat van de kadertitel, waardoor een stuk dat uit kaders bestaat groter
   opmaakte dan een gewoon stuk. */
.artikel__tekst .vw-kader__kop {
	margin: 1.4rem 0 .3rem;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

/* Een foto nooit groter tonen dan hij is: de aanlevering bevat beelden van
   vierhonderd tot zevenhonderd punten breed, en die opgerekt naar de volle
   kolom zien er zacht uit. Liever kleiner en scherp. */
.artikel__tekst .artikel__figuur { width: fit-content; max-width: 100%; }
.artikel__tekst .artikel__figuur img { width: auto; max-width: 100%; height: auto; }
.artikel__tekst .artikel__figuur--inline img { width: 100%; }
.artikel__tekst .vw-portret img { width: 100%; height: auto; }

/* In een kader gaat alles een trede omlaag. De naam bovenaan stond in oranje
   kapitaal — de laatste plek waar dat nog gebeurde. */
.artikel__tekst .vw-kader p { font-size: 16px; }

.artikel__tekst .vw-kader__wie {
	margin: 0 0 .3rem;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

.artikel__tekst .vw-kader h2,
.artikel__tekst .vw-kader__titel {
	margin: 0 0 .8rem;
	font-size: 22.8px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
}

.artikel__tekst .vw-kader h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--abu-inkt);
}

.artikel__tekst .vw-kader .vw-citaat blockquote { font-size: 20.2px; }
.artikel__tekst .vw-kader .vw-citaat figcaption { font-size: 16px; }

/* Een tweede foto van dezelfde spreker of een sfeerbeeld staat groot tussen de
   tekst, op de breedte van de leeskolom. */
.artikel__tekst .artikel__figuur {
	clear: both;
	margin: 2rem 0;
}

.artikel__tekst .artikel__figuur img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--abu-rond);
}

/* Meelopend met de tekst: breder dan een portret, want dit is beeld en geen
   gezicht bij een naam. Onder de 62rem gaat hij weer over de volle kolom. */
.artikel__tekst .artikel__figuur--inline {
	float: right;
	width: 13rem;
	margin: .4rem 0 1.5rem 1.75rem;
}

@media (max-width: 62rem) {
	.artikel__tekst .artikel__figuur--inline { float: none; width: 100%; margin: 2rem 0; }
}

/* Beeld dat nergens in de tekst thuishoort, zweeft niet mee: het staat als
   lijst onder aan het artikel, zodat de redactie het zelf plaatst. */
.artikel__tekst .beeld-zonder-plek {
	margin: 2.5rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--abu-lijn);
}

.artikel__tekst .beeld-zonder-plek h3 {
	margin: 0 0 .8rem;
	font-size: 18px;
}

.artikel__tekst .beeld-zonder-plek ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artikel__tekst .beeld-zonder-plek li { width: 9rem; font-size: 16px; color: var(--abu-zacht); }
.artikel__tekst .beeld-zonder-plek img { width: 100%; height: auto; border-radius: var(--abu-rond); }

/* ================================================================
 * Een staand beeld vult de kolom in de hoogte
 * ----------------------------------------------------------------
 * Gemeten over alle twaalf artikelen van nummer 11: een liggend
 * openingsbeeld komt op 405 tot 431 punten hoog uit, maar het staande
 * portret van Jana Retkowsky werd 466 bij 700 en dat van Luddo Oh 524
 * bij 700 — bijna twee schermen voordat de tekst begint. Hetzelfde
 * gebeurt met een staand beeld midden in de tekst (in het interview met
 * Nancy Rademaker 608 bij 905). Een hoogtegrens laat het beeld smaller
 * worden in plaats van hoger; de verhouding blijft heel en er wordt
 * niets afgesneden.
 * ================================================================ */

.pagina--artikel .artikel__beeld img { max-height: 27rem; }

.artikel__tekst .artikel__figuur:not(.artikel__figuur--inline) img {
	width: auto;
	max-width: 100%;
	max-height: 27rem;
	margin-inline: auto;
}

/* ================================================================
 * Het portret op telefoonbreedte
 * ----------------------------------------------------------------
 * Onder de 620px liet het portret zijn zweving los maar hield het zijn
 * breedte van 9rem. In een kolom van 350 punten bleef er dan tweehonderd
 * punten wit naast staan, met het bijschrift eronder: een gestrande
 * duimnagel in plaats van een gezicht bij een naam. Over de volle kolom
 * zetten kan niet — de aangeleverde portretten zijn meestal 168 punten
 * breed en worden dan zichtbaar zacht. Het bijschrift gaat er daarom
 * naast staan, zoals in het blad, en vult de ruimte die er toch al was.
 * ================================================================ */

@media (max-width: 620px) {
	.artikel__tekst .vw-portret {
		display: flex;
		align-items: center;
		gap: 1rem;
		float: none;
		width: auto;
		max-width: 100%;
		margin: 1.75rem 0;
	}

	.artikel__tekst .vw-portret img {
		flex: none;
		width: 9rem;
		max-width: 45%;
	}

	.artikel__tekst .vw-portret figcaption {
		margin: 0;
	}

	/* De brede variant blijft over de kolom: daar is het beeld groot genoeg. */
	.artikel__tekst .vw-portret--breed {
		display: block;
		margin: 2rem 0;
	}

	.artikel__tekst .vw-portret--breed img { width: 100%; max-width: 100%; }
	.artikel__tekst .vw-portret--breed figcaption { margin: 8px 0 16px; }
}