/* =========================================================================
   Niet Uitgespeeld 2.0 — "De tafel"

   Elk stuk ligt als voorwerp op een mint tafel. Kleuren, lettertypes en
   maten staan als tokens in theme.json; dit bestand bevat de vormen.

   Inhoud
   1.  Basis
   2.  Kop en voet
   3.  Kleine onderdelen: chips, metaregel, knoppen, pillen
   4.  Voorwerpen
   5.  Homepage: nieuwste stuk, filterbalk, raster
   6.  Overzichten, zoeken, onderwerpen
   7.  Artikel: kop, feitenregel, tekst
   8.  Beeld: breed, geplakt, galerij
   9.  Citaten, post-its, notities
   10. Oordeel
   11. Koopblok, cadeaus en verlanglijstje
   12. Lezen: inhoudsopgave, voortgang, delen, auteur, ligt ook op tafel
   13. Bestaande inhoudsblokken (gidsen, vergelijkingen, bronnen)
   14. Pagina's, 404, observaties
   15. Editor
   16. Responsief
   17. Print en minder beweging
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Basis
   ---------------------------------------------------------------------- */

:root {
	--nu-tafel: #dfeadf;
	--nu-inkt: #1e1a15;
	--nu-tekst: #2b2620;
	--nu-tekst-zacht: #4a4238;
	--nu-meta: #5d6b60;
	--nu-meta-warm: #6f6557;
	--nu-lijn: rgba(30, 26, 21, 0.2);
	--nu-wit: #ffffff;
	--nu-papier-licht: #f4efe4;
	--nu-tegel: #eef3ee;
	--nu-leeg: #cfd8cf;
	--nu-leeg-rand: #b5c2b7;
	--nu-rood: #dd3333;
	--nu-groen: #3f7a52;
	--nu-blauw: #4a6fa5;
	--nu-grijs: #5b5b60;
	--nu-geel: #e8b93a;
	--nu-oranje: #e8a92a;
	--nu-postit: #fff7c7;
	--nu-tape: rgba(232, 185, 58, 0.55);
	--nu-schaduw: 0 20px 28px -16px rgba(20, 40, 25, 0.55);
	--nu-schaduw-vel: 0 24px 40px -24px rgba(20, 40, 25, 0.5);
	--nu-schaduw-sticker: 0 10px 18px -10px rgba(20, 40, 25, 0.6);
	--nu-rand: var(--wp--custom--rand, clamp(20px, 4.6vw, 56px));
	--nu-breed: 1088px;
	--nu-kolom: 680px;
	--nu-radius: 8px;
	--nu-kop: var(--wp--preset--font-family--body, "Bricolage Grotesque", sans-serif);
	--nu-lees: var(--wp--preset--font-family--lees, "Newsreader", Georgia, serif);
	--nu-hand: var(--wp--preset--font-family--hand, "Permanent Marker", cursive);
	--nu-mono: var(--wp--preset--font-family--mono, "Space Mono", monospace);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: var(--nu-tafel);
	background-image: radial-gradient(rgba(30, 80, 45, 0.11) 1px, transparent 1.2px);
	background-size: 7px 7px;
	color: var(--nu-inkt);
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
}

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

::selection {
	background: var(--nu-postit);
	color: var(--nu-inkt);
}

a {
	text-underline-offset: 3px;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--nu-rood);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* WordPress zet tussen header, main en footer standaard een blockGap. De
   tafel loopt door, dus die ruimte regelen de onderdelen zelf. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.nu-tafel {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--nu-breed) + 2 * var(--nu-rand));
	margin-inline: auto;
	padding-inline: var(--nu-rand);
}

.nu-tafel > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   2. Kop en voet
   ---------------------------------------------------------------------- */

.nu-kop {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: calc(var(--nu-breed) + 2 * var(--nu-rand));
	margin: 0 auto;
	padding: 28px var(--nu-rand);
	position: relative;
	z-index: 30;
}

.nu-kop > * {
	margin: 0;
}

.nu-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.nu-logo img {
	width: 38px;
	height: 38px;
	flex: none;
}

.nu-logo:hover {
	color: var(--nu-inkt);
}

.nu-menu {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nu-menu__lijst {
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}

.nu-menu__lijst a,
.nu-terug a {
	color: var(--nu-inkt);
	text-decoration: none;
}

.nu-menu__lijst a:hover,
.nu-terug a:hover {
	color: var(--nu-rood);
}

.nu-terug {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.nu-rondknop {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--nu-wit);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	color: var(--nu-inkt);
	cursor: pointer;
	list-style: none;
}

.nu-rondknop::-webkit-details-marker {
	display: none;
}

.nu-rondknop::marker {
	content: "";
}

.nu-rondknop svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.nu-rondknop:hover {
	color: var(--nu-rood);
}

.nu-zoek,
.nu-menu-mobiel {
	position: relative;
}

.nu-zoek__paneel,
.nu-menu-mobiel__paneel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	box-sizing: border-box;
	padding: 12px;
	background: var(--nu-wit);
	border-radius: 14px;
	box-shadow: var(--nu-schaduw-vel), 0 2px 0 rgba(0, 0, 0, 0.06);
}

.nu-zoek__paneel {
	width: min(360px, calc(100vw - 2 * var(--nu-rand)));
}

.nu-zoekformulier {
	display: flex;
	gap: 8px;
}

.nu-zoekformulier input,
.nu-zoekblok .wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 10px 16px;
	border: 1.5px solid var(--nu-inkt);
	border-radius: 999px;
	background: var(--nu-wit);
	color: var(--nu-inkt);
	font: 500 16px/1.2 var(--nu-kop);
}

.nu-zoekformulier button,
.nu-zoekblok .wp-block-search__button {
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--nu-inkt);
	color: #f7f2e8;
	font: 600 15px/1 var(--nu-kop);
	cursor: pointer;
}

.nu-zoekformulier button:hover,
.nu-zoekblok .wp-block-search__button:hover {
	background: var(--nu-rood);
}

.nu-zoekblok .wp-block-search__inside-wrapper {
	gap: 8px;
	padding: 0;
	border: 0;
}

.nu-menu-mobiel {
	display: none;
}

.nu-menu-mobiel__streepjes,
.nu-menu-mobiel__streepjes::before,
.nu-menu-mobiel__streepjes::after {
	display: block;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.nu-menu-mobiel__streepjes {
	position: relative;
}

.nu-menu-mobiel__streepjes::before,
.nu-menu-mobiel__streepjes::after {
	content: "";
	position: absolute;
	left: 0;
}

.nu-menu-mobiel__streepjes::before {
	top: -5px;
}

.nu-menu-mobiel__streepjes::after {
	top: 5px;
}

.nu-menu-mobiel[open] .nu-menu-mobiel__streepjes {
	background: transparent;
}

.nu-menu-mobiel[open] .nu-menu-mobiel__streepjes::before {
	top: 0;
	transform: rotate(45deg);
}

.nu-menu-mobiel[open] .nu-menu-mobiel__streepjes::after {
	top: 0;
	transform: rotate(-45deg);
}

.nu-menu-mobiel__paneel {
	width: min(300px, calc(100vw - 40px));
}

.nu-menu-mobiel__paneel ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.nu-menu-mobiel__paneel li + li {
	border-top: 1px solid var(--nu-lijn);
}

.nu-menu-mobiel__paneel a {
	display: block;
	padding: 12px 6px;
	color: var(--nu-inkt);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

/* Voet */

.nu-voet {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	width: calc(100% - 2 * var(--nu-rand));
	max-width: var(--nu-breed);
	margin: 0 auto;
	padding: 28px 0 36px;
	border-top: 2px solid var(--nu-inkt);
}

.nu-voet > * {
	margin: 0;
}

.nu-voet__wouter {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nu-voet__wouter p {
	max-width: 520px;
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
}

.nu-portret {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #e6d9b8;
	object-fit: cover;
}

.nu-voet__meer {
	color: var(--nu-rood);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nu-voet__meer:hover {
	color: var(--nu-inkt);
}

.nu-voet__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	font-weight: 600;
}

.nu-voet__links a {
	color: var(--nu-inkt);
	text-decoration: none;
}

.nu-voet__links a:hover {
	color: var(--nu-rood);
}

/* -------------------------------------------------------------------------
   3. Kleine onderdelen
   ---------------------------------------------------------------------- */

.nu-chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nu-chip {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--nu-medium, var(--nu-inkt));
	color: var(--nu-wit);
	font-family: var(--nu-kop);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

.nu-chip--videogame { --nu-medium: var(--nu-grijs); }
.nu-chip--bordspel { --nu-medium: var(--nu-groen); }
.nu-chip--film { --nu-medium: var(--nu-inkt); }
.nu-chip--serie { --nu-medium: var(--nu-blauw); }
.nu-chip--verzamelen { --nu-medium: var(--nu-rood); }

.nu-chip--verhaal {
	padding: 2px 7px;
	border: 1.5px solid var(--nu-leeg-rand);
	background: var(--nu-wit);
	color: var(--nu-inkt);
}

.nu-chip--review {
	padding: 2px 7px;
	border: 1.5px solid var(--nu-inkt);
	background: transparent;
	color: var(--nu-inkt);
}

.nu-chip--review-donker {
	padding: 3px 9px;
	background: var(--nu-inkt);
	color: var(--nu-tafel);
	letter-spacing: 0.08em;
}

.nu-tekst--videogame { color: #46464b; }
.nu-tekst--bordspel { color: #2f6142; }
.nu-tekst--film { color: var(--nu-inkt); }
.nu-tekst--serie { color: #2f4d78; }
.nu-tekst--verzamelen { color: #b42626; }
.nu-tekst--verhaal { color: var(--nu-inkt); }

.nu-metaregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	color: var(--nu-meta-warm);
	font-family: var(--nu-kop);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.nu-metaregel a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.nu-metaregel a:hover {
	color: var(--nu-rood);
}

.nu-knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--nu-inkt);
	color: #f7f2e8;
	font-family: var(--nu-kop);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nu-knop:hover,
.nu-knop:focus-visible {
	background: var(--nu-rood);
	color: var(--nu-wit);
}

.nu-handkop {
	display: inline-block;
	margin: 0 0 12px;
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 24px;
	line-height: 1.2;
	transform: rotate(-2deg);
	transform-origin: left center;
}

.nu-eyebrow-mono {
	margin: 0 0 6px;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nu-bollen {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.nu-bollen > span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--nu-leeg);
}

.nu-bollen > .is-vol {
	background: var(--nu-oranje);
}

/* -------------------------------------------------------------------------
   4. Voorwerpen

   Eén component met een modifier per medium. Alle maten rekenen met de
   schaal --s, zodat hetzelfde voorwerp in het raster (md), groot in de kop
   (lg) en klein in lijstjes (sm) precies dezelfde verhoudingen houdt.
   ---------------------------------------------------------------------- */

.nu-voorwerp {
	position: relative;
	display: inline-grid;
	place-items: center;
	max-width: 100%;
}

.nu-object {
	--s: 1;
	position: relative;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	transform: rotate(var(--nu-kantel, 0deg));
	transition: transform 0.3s ease;
}

.nu-object--lg { --s: 1.38; }
.nu-object--lg.nu-object--tv { --s: 1.5; }
.nu-object--lg.nu-object--notitie { --s: 1.22; }
.nu-object--sm { --s: 0.42; }

.nu-object img,
.nu-object__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.nu-object__beeld {
	display: block;
	overflow: hidden;
}

.nu-object__leeg {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--nu-leeg-tint, #d7e3ea);
	background-image: repeating-linear-gradient(45deg, var(--nu-leeg-streep, rgba(30, 70, 110, 0.12)) 0 calc(8px * var(--s)), transparent calc(8px * var(--s)) calc(16px * var(--s)));
}

/* Gamekaartje — videogame (Nintendo Switch). Grijs in plaats van het rood
   van de echte Switch 2-kaart: rood hoort op de tafel bij de Flippo's en de
   accenten. Het rode logostreepje op het label blijft als knipoog.
   De schaduw zit als filter op
   de buitenkant, omdat de afgeschuinde hoek (clip-path) een gewone
   box-shadow zou wegknippen. */
.nu-object--cartridge {
	--nu-kaartrood: #d9221c;
	--nu-leeg-tint: #d7e3ea;
	--nu-leeg-streep: rgba(30, 70, 110, 0.12);
	width: calc(184px * var(--s));
	height: calc(268px * var(--s));
	filter: drop-shadow(0 calc(14px * var(--s)) calc(12px * var(--s)) rgba(20, 40, 25, 0.38));
}

.nu-object__kaart {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: calc(30px * var(--s)) calc(11px * var(--s)) calc(13px * var(--s));
	border-radius: calc(9px * var(--s));
	background: linear-gradient(180deg, #67676d 0%, var(--nu-grijs) 55%, #4d4d52 100%);
	clip-path: polygon(
		0 0,
		calc(100% - 26px * var(--s)) 0,
		100% calc(26px * var(--s)),
		100% 100%,
		0 100%,
		0 31%,
		calc(5px * var(--s)) 31%,
		calc(5px * var(--s)) 21%,
		0 21%
	);
}

.nu-object__ribbels {
	position: absolute;
	top: calc(8px * var(--s));
	left: 50%;
	width: 44%;
	height: calc(13px * var(--s));
	border-radius: 2px;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0 calc(2px * var(--s)), transparent calc(2px * var(--s)) calc(4.5px * var(--s)));
	transform: translateX(-50%);
}

.nu-object__label {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	padding: calc(10px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s));
	border-radius: calc(5px * var(--s));
	background: var(--nu-wit);
}

/* Het rode logostreepje bovenaan het label. */
.nu-object__label::before {
	content: "";
	position: absolute;
	top: calc(3.5px * var(--s));
	left: calc(6px * var(--s));
	width: calc(34px * var(--s));
	height: calc(3.5px * var(--s));
	border-radius: 2px;
	background: var(--nu-kaartrood);
}

.nu-object--cartridge .nu-object__beeld {
	flex: 1;
	min-height: 0;
	border-radius: calc(3px * var(--s));
}

/* Speelkaart — bordspel */
.nu-object--speelkaart {
	--nu-leeg-tint: #f2e6c9;
	--nu-leeg-streep: rgba(63, 122, 82, 0.14);
	width: calc(204px * var(--s));
	height: calc(280px * var(--s));
	border: calc(7px * var(--s)) solid var(--nu-wit);
	border-radius: calc(12px * var(--s));
	background: #f2e6c9;
	outline: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--nu-schaduw);
	overflow: hidden;
}

.nu-object--speelkaart .nu-object__beeld {
	width: 100%;
	height: 100%;
	border-radius: calc(5px * var(--s));
}

/* VHS — film */
.nu-object--vhs {
	display: flex;
	flex-direction: column;
	gap: calc(12px * var(--s));
	width: calc(270px * var(--s));
	height: calc(160px * var(--s));
	padding: calc(16px * var(--s)) calc(18px * var(--s));
	background: var(--nu-inkt);
	border-radius: calc(6px * var(--s));
	box-shadow: 0 20px 28px -16px rgba(20, 40, 25, 0.6);
}

.nu-object__etiket {
	display: flex;
	align-items: center;
	height: calc(44px * var(--s));
	padding: 0 calc(12px * var(--s));
	overflow: hidden;
	border-radius: 2px;
	background: var(--nu-papier-licht);
	color: var(--nu-inkt);
	font-family: var(--nu-hand);
	font-size: calc(15px * var(--s));
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nu-object__spoelen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 calc(20px * var(--s));
}

.nu-object__spoel {
	width: calc(46px * var(--s));
	height: calc(46px * var(--s));
	border-radius: 50%;
	background: #4a4540;
	box-shadow: inset 0 0 0 calc(12px * var(--s)) #2e2a26;
}

.nu-object__venster {
	width: calc(70px * var(--s));
	height: calc(20px * var(--s));
	border-radius: 3px;
	background: #2e2a26;
}

/* Flatscreen — serie */
.nu-object--tv {
	--nu-leeg-tint: #dbe3ef;
	--nu-leeg-streep: rgba(74, 111, 165, 0.16);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(290px * var(--s));
}

.nu-object__scherm {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: calc(7px * var(--s)) calc(7px * var(--s)) calc(14px * var(--s));
	border-radius: calc(7px * var(--s));
	background: #141414;
	box-shadow: 0 26px 36px -18px rgba(20, 40, 25, 0.6);
}

.nu-object--tv .nu-object__beeld {
	aspect-ratio: 16 / 9;
	border-radius: 2px;
}

.nu-object__led {
	position: absolute;
	bottom: calc(4px * var(--s));
	left: 50%;
	width: max(3px, calc(6px * var(--s)));
	height: max(3px, calc(6px * var(--s)));
	border-radius: 50%;
	background: var(--nu-blauw);
	transform: translateX(-50%);
}

.nu-object__hals {
	display: block;
	width: calc(16px * var(--s));
	height: calc(21px * var(--s));
	background: #2b2b2b;
}

.nu-object__voet {
	display: block;
	width: 42%;
	height: calc(8px * var(--s));
	border-radius: 4px;
	background: #2b2b2b;
}

/* Flippo — verzamelen. De afbeelding is de Flippo: hij loopt door tot vlak
   bij de rand. Rood is alleen de smalle plastic rand eromheen. */
.nu-object--flippo {
	display: grid;
	place-items: center;
	width: calc(240px * var(--s));
	height: calc(240px * var(--s));
	border-radius: 50%;
	background: var(--nu-rood);
	box-shadow:
		inset 0 0 0 calc(4px * var(--s)) rgba(255, 255, 255, 0.2),
		inset 0 0 0 calc(6px * var(--s)) var(--nu-rood),
		inset 0 0 0 calc(7.5px * var(--s)) rgba(255, 255, 255, 0.45),
		0 20px 28px -16px rgba(80, 10, 10, 0.6);
}

.nu-object--flippo .nu-object__beeld {
	position: relative;
	width: calc(206px * var(--s));
	height: calc(206px * var(--s));
	border-radius: 50%;
	box-shadow: 0 0 0 max(1px, calc(2px * var(--s))) rgba(255, 255, 255, 0.7);
}

/* Glans van het plastic. */
.nu-object--flippo .nu-object__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.14) 100%);
	pointer-events: none;
}

.nu-object--flippo .nu-object__leeg {
	background: radial-gradient(circle, #e85a52 0 58%, #e24a42 59%);
}

/* Disc — games op PlayStation of pc. De hoes is de opdruk; de schijf heeft
   een echt gat (mask), een doorzichtige naaf, een regenboogglans en bovenaan
   de band van het platform. De schaduw zit op de buitenkant, omdat de mask
   een box-shadow zou wegknippen. */
.nu-object--disc {
	--nu-leeg-tint: #d9dde3;
	--nu-leeg-streep: rgba(74, 111, 165, 0.14);
	width: calc(240px * var(--s));
	height: calc(240px * var(--s));
	filter: drop-shadow(0 calc(14px * var(--s)) calc(12px * var(--s)) rgba(20, 40, 25, 0.4));
}

.nu-object__schijf {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #c9ced6;
	-webkit-mask: radial-gradient(circle, transparent 0 calc(11px * var(--s)), #000 calc(11.5px * var(--s)));
	mask: radial-gradient(circle, transparent 0 calc(11px * var(--s)), #000 calc(11.5px * var(--s)));
}

.nu-object--disc .nu-object__beeld {
	position: absolute;
	inset: 0;
}

/* Rand, regenboogglans en lichtval. */
.nu-object__schijf::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%),
		conic-gradient(from 20deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.22) 30deg, rgba(120, 200, 255, 0.12) 60deg, rgba(255, 255, 255, 0) 95deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.2) 215deg, rgba(255, 150, 220, 0.12) 245deg, rgba(255, 255, 255, 0) 280deg);
	box-shadow:
		inset 0 0 0 calc(3px * var(--s)) rgba(255, 255, 255, 0.55),
		inset 0 0 0 calc(4px * var(--s)) rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

/* Doorzichtige naaf rond het gat. */
.nu-object__naaf {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: calc(76px * var(--s));
	height: calc(76px * var(--s));
	border-radius: 50%;
	background: radial-gradient(circle, rgba(235, 240, 245, 0.92) 0 calc(23px * var(--s)), rgba(255, 255, 255, 0.4) calc(23.5px * var(--s)) calc(37px * var(--s)), rgba(0, 0, 0, 0.18) calc(37.5px * var(--s)));
	transform: translate(-50%, -50%);
}

/* Band van het platform, zoals bovenaan een PS5-disc. */
.nu-object__band {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 21%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: calc(5px * var(--s));
	box-sizing: border-box;
	background: var(--nu-wit);
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: calc(17px * var(--s));
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
}

.nu-object--disc-pc .nu-object__band {
	background: var(--nu-inkt);
	color: var(--nu-wit);
}

/* Ruilkaart — verzamelen. Een Pokémon- of Magic-achtige kaart: gele rand,
   naambalk met energiebolletje, beeldvenster en tekstvak met regels. */
.nu-object--ruilkaart {
	--nu-leeg-tint: #f6e7b0;
	--nu-leeg-streep: rgba(180, 130, 20, 0.16);
	position: relative;
	box-sizing: border-box;
	width: calc(200px * var(--s));
	height: calc(280px * var(--s));
	padding: calc(9px * var(--s));
	overflow: hidden;
	border-radius: calc(11px * var(--s));
	background: linear-gradient(160deg, #f7d55a 0%, var(--nu-geel) 55%, #d9a524 100%);
	box-shadow: var(--nu-schaduw);
}

.nu-object__kaartvlak {
	display: flex;
	flex-direction: column;
	gap: calc(6px * var(--s));
	box-sizing: border-box;
	height: 100%;
	padding: calc(6px * var(--s)) calc(7px * var(--s)) calc(8px * var(--s));
	border-radius: calc(5px * var(--s));
	background: linear-gradient(180deg, #fbf3d6 0%, #f1e3b3 100%);
}

.nu-object__naam {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(6px * var(--s));
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: calc(13px * var(--s));
	font-weight: 800;
	line-height: 1.1;
}

.nu-object__naam span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nu-object__energie {
	flex: none;
	width: calc(15px * var(--s));
	height: calc(15px * var(--s));
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ff8a80, var(--nu-rood) 70%);
	box-shadow: 0 0 0 max(1px, calc(1.5px * var(--s))) rgba(255, 255, 255, 0.8);
}

.nu-object--ruilkaart .nu-object__venster {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	padding: calc(3px * var(--s));
	border-radius: calc(2px * var(--s));
	background: linear-gradient(135deg, #e9edf2, #aab3bf 50%, #e9edf2);
}

.nu-object--ruilkaart .nu-object__venster {
	position: relative;
	flex: none;
	min-height: 0;
	overflow: hidden;
}

.nu-object--ruilkaart .nu-object__beeld {
	position: absolute;
	inset: calc(3px * var(--s));
}

.nu-object__regels {
	flex: 1;
	margin: calc(4px * var(--s)) calc(3px * var(--s)) 0;
	background: repeating-linear-gradient(to bottom, transparent 0 calc(9px * var(--s)), rgba(30, 26, 21, 0.22) calc(9px * var(--s)) calc(10.5px * var(--s)));
}

/* Holografische glans die meebeweegt bij hover. */
.nu-object__holo {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 45%, rgba(180, 230, 255, 0.25) 52%, rgba(255, 255, 255, 0) 65%);
	background-position: 0% 0;
	background-size: 250% 100%;
	mix-blend-mode: soft-light;
	transition: background-position 0.6s ease;
	pointer-events: none;
}

a:hover .nu-object__holo,
.nu-kaart:hover .nu-object__holo,
.nu-object--ruilkaart:hover .nu-object__holo {
	background-position: 100% 0;
}

/* Polaroid — verhaal met een uitgelichte foto. Wit kader, plakband, de foto
   in 4:3 en het briefje als handgeschreven onderschrift. Zonder foto blijft
   een verhaal het notitieblaadje hieronder. */
.nu-object--polaroid {
	--nu-leeg-tint: #e6ece6;
	--nu-leeg-streep: rgba(63, 122, 82, 0.12);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: calc(250px * var(--s));
	padding: calc(12px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s));
	background: var(--nu-wit);
	box-shadow: 0 18px 26px -16px rgba(20, 40, 25, 0.5);
}

.nu-object--polaroid .nu-object__tape {
	z-index: 1;
	left: 50%;
	margin-left: calc(-45px * var(--s));
	transform: rotate(3deg);
}

.nu-object--polaroid .nu-object__beeld {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.nu-object__onderschrift {
	display: -webkit-box;
	min-height: calc(46px * var(--s));
	padding: calc(8px * var(--s)) calc(4px * var(--s)) 0;
	overflow: hidden;
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: calc(19px * var(--s));
	line-height: 1.15;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.nu-object--sm .nu-object__onderschrift {
	font-size: 0;
}

/* Notitieblaadje — verhaal */
.nu-object--notitie {
	width: calc(270px * var(--s));
	padding: calc(26px * var(--s)) calc(24px * var(--s)) calc(30px * var(--s));
	background-color: var(--nu-wit);
	background-image: repeating-linear-gradient(to bottom, transparent 0 calc(29px * var(--s)), rgba(70, 110, 170, 0.2) calc(29px * var(--s)) calc(30px * var(--s)));
	background-position: 0 calc(14px * var(--s));
	box-shadow: 0 18px 26px -16px rgba(20, 40, 25, 0.45);
}

.nu-object__tape {
	position: absolute;
	top: calc(-12px * var(--s));
	left: 40%;
	width: calc(90px * var(--s));
	height: calc(24px * var(--s));
	background: var(--nu-tape);
	transform: rotate(-4deg);
}

.nu-object__tekst {
	display: block;
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: calc(22px * var(--s));
	line-height: calc(30px * var(--s));
	overflow-wrap: anywhere;
}

/* Klein formaat: alleen de vorm, geen tekst. */
.nu-object--sm .nu-object__etiket,
.nu-object--sm .nu-object__tekst {
	font-size: 0;
}

.nu-object--sm.nu-object--notitie {
	min-height: calc(210px * var(--s));
}

.nu-object--sm .nu-object__tape {
	display: none;
}

/* Oordeelsticker op het voorwerp */
.nu-sticker-oordeel {
	position: absolute;
	right: -18px;
	bottom: -14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--nu-wit);
	box-shadow: var(--nu-schaduw-sticker);
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
	transform: rotate(var(--nu-kantel, 3deg));
}

.nu-sticker-oordeel--kast .nu-sticker-oordeel__waar,
.nu-sticker-oordeel--marktplaats .nu-sticker-oordeel__waar {
	color: var(--nu-meta);
}

.nu-voorwerp--lg .nu-sticker-oordeel {
	right: -28px;
	bottom: -18px;
	padding: 12px 14px;
	font-size: 15px;
}

.nu-voorwerp--lg .nu-sticker-oordeel .nu-bollen > span {
	width: 11px;
	height: 11px;
}

/* -------------------------------------------------------------------------
   5. Homepage
   ---------------------------------------------------------------------- */

.nu-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 56px;
	align-items: center;
	padding: 36px 0 64px;
}

.nu-hero__tekst > * {
	margin: 0;
}

.nu-hero__kop {
	margin: 0 0 14px !important;
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 24px;
	line-height: 1.2;
	transform: rotate(-2deg);
	transform-origin: left center;
}

.nu-hero .nu-metaregel {
	margin-bottom: 14px;
}

.nu-hero__titel {
	margin: 0 0 20px !important;
	font-family: var(--nu-kop);
	font-size: clamp(34px, 5.7vw, 68px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

.nu-hero__titel a {
	color: inherit;
	text-decoration: none;
}

.nu-hero__titel a:hover {
	color: var(--nu-inkt);
	text-decoration: underline;
	text-decoration-color: var(--nu-rood);
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
}

.nu-hero__intro {
	max-width: 560px;
	margin: 0 0 26px !important;
	color: var(--nu-tekst-zacht);
	font-family: var(--nu-lees);
	font-size: 21px;
	line-height: 1.5;
}

.nu-hero__voorwerp {
	display: block;
	justify-self: center;
	min-width: 0;
	max-width: 100%;
	transition: transform 0.3s ease;
}

.nu-hero__voorwerp:hover {
	transform: translateY(-6px);
}

/* Filterbalk */

.nu-filterbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 18px 0;
	border-top: 2px solid var(--nu-inkt);
	border-bottom: 1px solid var(--nu-lijn);
	scroll-margin-top: 16px;
}

.nu-filterbalk__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nu-pil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	box-sizing: border-box;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--nu-wit);
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.nu-pil:hover {
	color: var(--nu-rood);
}

.nu-pil.is-actief {
	background: var(--nu-inkt);
	color: var(--nu-papier-licht);
}

.nu-pil--reviews {
	margin-left: auto;
	padding: 6px 12px;
	border: 2px dashed var(--nu-inkt);
	background: transparent;
}

.nu-pil--reviews.is-actief {
	border-style: solid;
}

.nu-pil__icoon {
	display: inline-block;
	flex: none;
}

.nu-pil__icoon--videogame { width: 10px; height: 14px; border-radius: 2px; background: var(--nu-grijs); clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); }
.nu-pil__icoon--bordspel { width: 10px; height: 14px; border-radius: 2px; background: var(--nu-groen); }
.nu-pil__icoon--film { width: 16px; height: 10px; border-radius: 1px; background: var(--nu-inkt); }
.nu-pil__icoon--serie { width: 15px; height: 12px; border-radius: 3px; background: var(--nu-blauw); }
.nu-pil__icoon--verzamelen { width: 14px; height: 14px; border-radius: 50%; background: var(--nu-rood); }
.nu-pil__icoon--verhaal {
	box-sizing: border-box;
	width: 14px;
	height: 12px;
	border: 1px solid var(--nu-leeg-rand);
	background: var(--nu-wit) repeating-linear-gradient(to bottom, transparent 0 3px, #9bb3d4 3px 4px);
}

.nu-pil.is-actief .nu-pil__icoon--film {
	background: var(--nu-papier-licht);
}

.nu-pil__aantal {
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 11px;
	font-weight: 400;
}

/* Raster */

.nu-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 40px;
	margin: 0;
	padding: 56px 0 24px;
	list-style: none;
}

.nu-raster > li {
	margin: 0;
}

.nu-kaart__link {
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	color: var(--nu-inkt);
	text-decoration: none;
}

.nu-kaart__voorwerp {
	display: grid;
	place-items: center;
	height: 300px;
}

.nu-kaart__link:hover .nu-object,
.nu-kaart__link:focus-visible .nu-object {
	transform: rotate(0deg) translateY(-6px);
}

.nu-kaart__link:hover .nu-kaart__titel {
	color: var(--nu-rood);
}

.nu-kaart__labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.nu-kaart__tijd {
	flex: none;
	color: var(--nu-meta);
	font-size: 12px;
	font-weight: 600;
}

.nu-kaart__titel {
	margin: 0;
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: pretty;
	transition: color 0.2s ease;
}

.nu-kaart__mobielmeta,
.nu-kaart__oordeel {
	display: none;
}

.nu-meer,
.nu-paginering {
	gap: 8px;
	margin: 0;
	padding: 24px 0 56px;
	font-family: var(--nu-kop);
}

.nu-meer a {
	display: inline-block;
	padding: 14px 26px;
	border: 2px solid var(--nu-inkt);
	border-radius: 999px;
	color: var(--nu-inkt);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.nu-meer a:hover,
.nu-meer a:focus-visible {
	background: var(--nu-inkt);
	color: #f7f2e8;
}

.nu-meer a[aria-busy="true"] {
	opacity: 0.6;
}

.nu-paginering a,
.nu-paginering .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--nu-wit);
	color: var(--nu-inkt);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.nu-paginering .page-numbers.current {
	background: var(--nu-inkt);
	color: #f7f2e8;
}

.nu-paginering .page-numbers.dots {
	background: transparent;
}

.nu-leeg {
	margin: 0;
	padding: 48px 0;
	color: var(--nu-tekst-zacht);
	font-family: var(--nu-lees);
	font-size: 21px;
}

.nu-leeg a {
	color: var(--nu-inkt);
	text-decoration-color: var(--nu-rood);
}

/* -------------------------------------------------------------------------
   6. Overzichten, zoeken, onderwerpen
   ---------------------------------------------------------------------- */

.nu-overzichtkop {
	padding: 36px 0 40px;
}

.nu-overzichtkop > * {
	margin-block: 0;
}

.nu-overzichtkop__titel,
.nu-overzichtkop .wp-block-query-title {
	margin: 0 !important;
	font-family: var(--nu-kop);
	font-size: clamp(36px, 5.4vw, 64px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

.nu-overzichtkop__intro,
.nu-overzichtkop .wp-block-term-description,
.nu-overzichtkop .wp-block-post-author-biography {
	max-width: 560px;
	margin: 16px 0 0 !important;
	color: var(--nu-tekst-zacht);
	font-family: var(--nu-lees);
	font-size: 21px;
	line-height: 1.5;
}

.nu-overzichtkop .wp-block-term-description p {
	margin: 0;
}

.nu-overzichtkop .nu-zoekblok {
	max-width: 520px;
	margin-top: 22px !important;
}

.nu-overzichtkop + .nu-tafel-overzicht,
.nu-overzichtkop + .nu-observaties {
	border-top: 2px solid var(--nu-inkt);
}

.nu-onderwerpen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: var(--nu-kolom);
	margin: 32px auto 72px;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
   7. Artikel
   ---------------------------------------------------------------------- */

.nu-article > * {
	margin-block: 0;
}

.nu-artikelkop {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	padding: 32px 40px 56px;
}

.nu-artikelkop__voorwerp {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	min-width: 0;
}

/* De tv is het breedste voorwerp. In de artikelkop (kolom 380px) krijgt hij
   een eigen maat; de kolom zelf vangt de rest op, zodat geen voorwerp ooit
   over de titel schuift. */
.nu-artikelkop .nu-object--lg.nu-object--tv { --s: 1.24; }
.nu-artikelkop .nu-object--lg.nu-object--vhs { --s: 1.28; }

.nu-artikelkop .nu-voorwerp,
.nu-hero__voorwerp .nu-voorwerp {
	max-width: 100%;
}

.nu-artikelkop .nu-metaregel {
	margin-bottom: 16px;
}

.nu-artikelkop__titel {
	margin: 0;
	overflow-wrap: break-word;
	hyphens: manual;
	font-family: var(--nu-kop);
	font-size: clamp(34px, 5.3vw, 64px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

.nu-bijgewerkt {
	margin: 14px 0 0;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 12px;
}

.nu-artikelkop .nu-sticky {
	max-width: 520px;
	margin: 26px 0 0;
}

.nu-feitenregel {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	margin: 0;
	padding: 16px 0;
	border-top: 2px solid var(--nu-inkt);
	border-bottom: 1px solid var(--nu-lijn);
	font-family: var(--nu-mono);
	font-size: 13px;
	line-height: 1.5;
}

.nu-feitenregel > div {
	display: flex;
	gap: 0.6em;
}

.nu-feitenregel dt {
	color: var(--nu-meta);
}

.nu-feitenregel dd {
	margin: 0;
}

/* De tekst. Dezelfde regels gelden in de editor, zodat schrijven en lezen
   er hetzelfde uitzien. */
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) {
	color: var(--nu-tekst);
	font-family: var(--nu-lees);
	font-size: 21px;
	line-height: 1.65;
}

.nu-tafel--artikel .nu-tekst {
	padding-top: 48px;
	padding-bottom: 16px;
}

.nu-artikelkop + .nu-tekst {
	border-top: 2px solid var(--nu-inkt);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) > p:first-of-type {
	color: var(--nu-inkt);
	font-size: 24px;
	line-height: 1.55;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) > * + * {
	margin-block-start: 24px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(h2, h3, h4) {
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) h2 {
	margin-block-start: 48px;
	margin-block-end: 0;
	font-size: clamp(26px, 3vw, 32px);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) h2 + * {
	margin-block-start: 16px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) h3 {
	margin-block-start: 36px;
	font-size: 24px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) a:not([class]) {
	color: var(--nu-inkt);
	text-decoration-line: underline;
	text-decoration-color: var(--nu-rood);
	text-decoration-thickness: 2px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) a:not([class]):hover {
	color: var(--nu-rood);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(ul, ol):not([class*="nu-"]):not(.is-style-favorieten) {
	padding-left: 1.2em;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) li + li {
	margin-top: 6px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) hr.wp-block-separator {
	width: 120px;
	margin-block: 48px;
	border: 0;
	border-top: 2px solid var(--nu-inkt);
	opacity: 1;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-table {
	font-family: var(--nu-kop);
	font-size: 16px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-table table {
	border-collapse: collapse;
	background: var(--nu-wit);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-table :is(th, td) {
	padding: 10px 12px;
	border: 1px solid var(--nu-lijn);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-embed {
	max-width: 840px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-embed iframe {
	display: block;
	border-radius: 3px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-embed figcaption {
	font-family: var(--nu-kop);
	font-size: 15px;
}

/* Video zonder cookies vooraf: een donker tv-scherm met een rode
   afspeelknop. Na een klik vervangt de iframe de knop (inc/tafel.php). */
.nu-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.nu-video .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.nu-video__start {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 24px;
	border: 0;
	border-radius: 3px;
	background: radial-gradient(ellipse at center, #3a332b 0%, var(--nu-inkt) 70%);
	color: var(--nu-wit);
	font-family: var(--nu-kop);
	text-align: center;
	cursor: pointer;
}

.nu-video__knop {
	position: relative;
	width: 72px;
	height: 72px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--nu-rood);
	box-shadow: var(--nu-schaduw-sticker);
	transition: transform 0.2s ease;
}

.nu-video__knop::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -13px 0 0 -8px;
	border-width: 13px 0 13px 22px;
	border-style: solid;
	border-color: transparent transparent transparent var(--nu-wit);
}

.nu-video__start:hover .nu-video__knop,
.nu-video__start:focus-visible .nu-video__knop {
	transform: scale(1.08);
}

.nu-video__start:focus-visible {
	outline: 3px solid var(--nu-geel);
	outline-offset: 3px;
}

.nu-video__titel {
	max-width: 32em;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.nu-video__uitleg {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}

/* -------------------------------------------------------------------------
   8. Beeld
   ---------------------------------------------------------------------- */

/* Breed (standaard): de foto steekt aan beide kanten 80px uit de
   tekstkolom. Ook de oude stijlen "Getapete foto" en "Gewoon" krijgen deze
   rustige weergave. */
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:not(.is-style-geplakt):not(.is-style-geplakt-naast-tekst):not(.is-style-polaroid):not(.is-style-polaroid-breed):not(.is-style-fotokaart):not(.alignleft):not(.alignright):not(.is-resized) {
	max-width: calc(var(--nu-kolom) + 160px);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image img {
	border-radius: 3px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image figcaption {
	margin: 10px 0 0;
	color: #3b4a3f;
	font-family: var(--nu-kop);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:not(.is-style-geplakt):not(.is-style-geplakt-naast-tekst):not(.is-style-polaroid):not(.is-style-polaroid-breed):not(.is-style-fotokaart):not(.is-resized) figcaption {
	padding: 0 80px;
}

.nu-bijschrift-met-bron {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.nu-bron {
	flex: none;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 11px;
	line-height: 1.8;
}

/* Geplakt: wit polaroidkader met plakband en handgeschreven bijschrift.
   De oude stijlen Polaroid, Polaroid breed en Foto op notitiepapier krijgen
   automatisch deze look. */
.wp-block-image:is(.is-style-geplakt, .is-style-geplakt-naast-tekst, .is-style-polaroid, .is-style-polaroid-breed, .is-style-fotokaart) {
	position: relative;
	box-sizing: border-box;
	padding: 12px 12px 60px;
	background: var(--nu-wit);
	box-shadow: 0 20px 30px -18px rgba(20, 40, 25, 0.55);
	transform: rotate(-3deg);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.is-style-geplakt, .is-style-polaroid, .is-style-polaroid-breed, .is-style-fotokaart) {
	max-width: 440px;
	margin-block: 40px;
}

.wp-block-image:is(.is-style-geplakt, .is-style-geplakt-naast-tekst, .is-style-polaroid, .is-style-polaroid-breed, .is-style-fotokaart)::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	z-index: 1;
	width: 90px;
	height: 24px;
	margin-left: -45px;
	background: var(--nu-tape);
	transform: rotate(3deg);
}

.wp-block-image:is(.is-style-geplakt, .is-style-geplakt-naast-tekst, .is-style-polaroid, .is-style-polaroid-breed, .is-style-fotokaart) img {
	display: block;
	width: 100%;
	border-radius: 0 !important;
	object-fit: cover;
}

.wp-block-image:is(.is-style-geplakt, .is-style-geplakt-naast-tekst, .is-style-polaroid, .is-style-polaroid-breed, .is-style-fotokaart) figcaption {
	position: absolute;
	right: 16px;
	bottom: 12px;
	left: 16px;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--nu-tekst) !important;
	font-family: var(--nu-hand) !important;
	font-size: 18px !important;
	line-height: 1.15 !important;
	text-align: left;
}

.wp-block-image:is(.is-style-geplakt, .is-style-geplakt-naast-tekst) .nu-bron {
	display: none;
}

/* Naast de tekst: de polaroid ligt links in de kolom, de tekst loopt
   eromheen. */
.nu-tekst > .wp-block-image.is-style-geplakt-naast-tekst {
	float: left;
	width: 300px;
	max-width: 300px;
	margin-top: 32px !important;
	margin-right: 40px !important;
	margin-bottom: 24px !important;
	margin-left: max(0px, calc((100% - var(--nu-kolom)) / 2)) !important;
}

.nu-tekst > h2,
.nu-tekst > .wp-block-image:not(.is-style-geplakt-naast-tekst),
.nu-tekst > .nu-oordeel,
.nu-tekst > .nu-koopblok {
	clear: both;
}

/* Vaste beeldmaten (thema 2.3). De vormklasse zet inc/tafel.php op elk
   beeld (nu_beeld_vorm), op basis van de afmetingen in de mediabibliotheek.
   Breed: liggend, altijd de volle breedte en 16:9, zodat elk beeld in elk
   artikel even groot is. Foto: 4:3 of 3:2, volle breedte en 3:2. Panorama: heel brede banner, volle breedte in de
   eigen verhouding. Product: doos, boek of set (ook een liggende packshot op wit), op een wit vel ter breedte
   van de tekstkolom, met een vaste hoogte. */
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image.nu-beeld--breed,
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image.nu-beeld--foto,
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image.nu-beeld--panorama {
	max-width: calc(var(--nu-kolom) + 160px) !important;
	margin-block: 40px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--breed, .nu-beeld--foto, .nu-beeld--panorama) img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image.nu-beeld--breed img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image.nu-beeld--foto img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--product, .is-style-product) {
	box-sizing: border-box;
	max-width: var(--nu-kolom) !important;
	margin-block: 40px;
	padding: 28px 28px 18px;
	background: var(--nu-wit);
	border-radius: 4px;
	box-shadow: var(--nu-schaduw-vel);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--product, .is-style-product) img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: 340px !important;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 0;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--product, .is-style-product) figcaption {
	margin-top: 18px !important;
	padding: 0 !important;
}

/* Galerij */
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-gallery {
	max-width: calc(var(--nu-kolom) + 160px);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-gallery img {
	border-radius: 3px;
}

.wp-block-gallery.is-style-plakboek {
	gap: 34px 26px !important;
	padding: 18px 6px;
}

.wp-block-gallery.is-style-plakboek .wp-block-image {
	position: relative;
	box-sizing: border-box;
	padding: 10px 10px 46px;
	background: var(--nu-wit);
	box-shadow: 0 18px 26px -16px rgba(20, 40, 25, 0.5);
	transform: rotate(-2deg);
}

.wp-block-gallery.is-style-plakboek .wp-block-image:nth-child(3n + 2) { transform: rotate(2.5deg); }
.wp-block-gallery.is-style-plakboek .wp-block-image:nth-child(3n + 3) { transform: rotate(-1deg); }

.wp-block-gallery.is-style-plakboek .wp-block-image::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	z-index: 2;
	width: 70px;
	height: 20px;
	margin-left: -35px;
	background: var(--nu-tape);
	transform: rotate(-3deg);
}

.wp-block-gallery.is-style-plakboek .wp-block-image img {
	border-radius: 0 !important;
}

.wp-block-gallery.is-style-plakboek .wp-block-image figcaption {
	position: absolute !important;
	right: 12px;
	bottom: 8px;
	left: 12px;
	max-height: none !important;
	padding: 0 !important;
	overflow: visible !important;
	background: none !important;
	color: var(--nu-tekst) !important;
	font-family: var(--nu-hand) !important;
	font-size: 16px !important;
	line-height: 1.15 !important;
	text-align: left !important;
	text-shadow: none !important;
}

.wp-block-gallery.is-style-plakboek > figcaption,
.wp-block-gallery.is-style-fotostrip > figcaption {
	flex: 0 0 100%;
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: 18px;
	text-align: center;
}

.wp-block-gallery.is-style-fotostrip {
	flex-wrap: nowrap !important;
	gap: 14px !important;
	padding: 14px;
	overflow-x: auto;
	background: var(--nu-inkt);
	border-radius: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.wp-block-gallery.is-style-fotostrip .wp-block-image {
	flex: 0 0 min(260px, 72%) !important;
	width: auto !important;
	scroll-snap-align: start;
}

.wp-block-gallery.is-style-fotostrip .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 2px !important;
}

.wp-block-gallery.is-style-fotostrip .wp-block-image figcaption {
	font-family: var(--nu-kop) !important;
	font-size: 13px !important;
}

/* -------------------------------------------------------------------------
   9. Citaten, post-its, notities
   ---------------------------------------------------------------------- */

/* Briefje (standaard voor citaten): een wit briefje dat 60px uit de kolom
   steekt, met rood handschrift. De oude stijl "Rood-gerand citaat" valt hier
   ook onder. */
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote, .wp-block-pullquote):not(.is-style-post-it) {
	box-sizing: border-box;
	max-width: calc(var(--nu-kolom) + 120px);
	margin-block: 40px;
	padding: 28px 36px;
	border: 0;
	background: var(--nu-wit);
	box-shadow: 0 14px 24px -16px rgba(40, 25, 5, 0.4);
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: clamp(22px, 2.6vw, 30px);
	font-style: normal;
	line-height: 1.25;
	text-align: left;
	transform: rotate(-1deg);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote, .wp-block-pullquote):not(.is-style-post-it) :is(p, blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font: inherit;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote, .wp-block-pullquote):not(.is-style-post-it) p + p {
	margin-top: 12px;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote, .wp-block-pullquote) cite {
	display: block;
	margin-top: 12px;
	color: var(--nu-tekst-zacht);
	font-family: var(--nu-kop);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
}

/* Post-it: geel blaadje voor een korte, persoonlijke noot. */
.wp-block-quote.is-style-post-it,
.wp-block-pullquote.is-style-post-it,
.nu-sticky {
	position: relative;
	box-sizing: border-box;
	padding: 20px 24px 22px;
	border: 0;
	background: var(--nu-postit);
	box-shadow: 0 12px 20px -14px rgba(20, 40, 25, 0.5);
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: 19px;
	font-style: normal;
	line-height: 1.3;
	text-align: left;
	transform: rotate(-1deg);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote.is-style-post-it, .wp-block-pullquote.is-style-post-it, .nu-sticky) {
	max-width: 480px;
	margin-block: 36px;
}

.wp-block-quote.is-style-post-it::before,
.wp-block-pullquote.is-style-post-it::before,
.nu-sticky::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 30px;
	width: 80px;
	height: 22px;
	background: rgba(221, 51, 51, 0.22);
	transform: rotate(-4deg);
}

.wp-block-quote.is-style-post-it :is(p, blockquote),
.wp-block-pullquote.is-style-post-it :is(p, blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font: inherit;
}

.wp-block-quote.is-style-post-it cite,
.wp-block-pullquote.is-style-post-it cite {
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 16px;
}

.nu-sticky > * {
	margin: 0;
}

.nu-sticky__title {
	margin: 0 0 8px !important;
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 20px;
}

.nu-sticky__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: nu-tldr;
	font-family: var(--nu-hand);
	font-size: 17px;
	line-height: 1.3;
}

.nu-sticky__list li {
	margin: 0 !important;
	counter-increment: nu-tldr;
}

.nu-sticky__list li::before {
	content: counter(nu-tldr) ". ";
}

/* Geplakte tekst uit Notities of Pages neemt soms een inline lettertype
   mee. Binnen handschrift-elementen wint het handschrift altijd. */
.wp-block-quote:is(.is-style-post-it, .is-style-briefje) :where(span, em, strong, a),
.wp-block-pullquote:is(.is-style-post-it, .is-style-briefje) :where(span, em, strong, a),
.nu-sticky :where(span, em, strong, a),
.nu-hand :where(span, em, strong, a),
.nu-margin-note :where(span, em, strong, a),
:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-quote:not(.is-style-post-it) :where(span, em, strong, a) {
	font-family: var(--nu-hand) !important;
	font-size: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
}

.nu-hand {
	font-family: var(--nu-hand);
}

/* Kantlijnnotitie: één kleine gedachte, als geel briefje naast de tekst. */
.nu-margin-note,
.wp-block-group.is-style-kantlijn-links,
.wp-block-group.is-style-kantlijn-rechts {
	position: relative;
	box-sizing: border-box;
	padding: 16px 18px 18px;
	background: var(--nu-postit);
	box-shadow: 0 12px 20px -14px rgba(20, 40, 25, 0.5);
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: 17px;
	line-height: 1.3;
	transform: rotate(1.5deg);
}

.nu-margin-note > *,
.wp-block-group:is(.is-style-kantlijn-links, .is-style-kantlijn-rechts) > * {
	margin: 0;
	font: inherit;
}

.nu-margin-note > * + *,
.wp-block-group:is(.is-style-kantlijn-links, .is-style-kantlijn-rechts) > * + * {
	margin-top: 8px;
}

.nu-tekst > :is(.nu-margin-note, .is-style-kantlijn-rechts) {
	float: right;
	clear: right;
	width: 184px;
	margin-top: 4px !important;
	margin-right: max(0px, calc((100% - var(--nu-kolom)) / 2 - 204px)) !important;
	margin-left: 24px !important;
}

.nu-tekst > .is-style-kantlijn-links {
	float: left;
	clear: left;
	width: 184px;
	margin-top: 4px !important;
	margin-right: 24px !important;
	margin-left: max(0px, calc((100% - var(--nu-kolom)) / 2 - 204px)) !important;
	transform: rotate(-1.5deg);
}

/* Notitieblaadje en wit vel als groepsstijl. */
.wp-block-group.is-style-notepad,
.notepad {
	position: relative;
	box-sizing: border-box;
	padding: 34px 30px 34px;
	background-color: var(--nu-wit);
	background-image: repeating-linear-gradient(to bottom, transparent 0 33px, rgba(70, 110, 170, 0.2) 33px 34px);
	background-position: 0 16px;
	box-shadow: 0 24px 36px -18px rgba(40, 25, 5, 0.4);
	transform: rotate(-1deg);
}

.wp-block-group.is-style-notepad::before,
.notepad::before {
	content: "";
	position: absolute;
	top: -13px;
	left: 38%;
	width: 110px;
	height: 26px;
	background: var(--nu-tape);
	transform: rotate(-4deg);
}

.wp-block-group.is-style-paper-card {
	box-sizing: border-box;
	padding: clamp(22px, 3vw, 36px);
	background: var(--nu-wit);
	border-radius: 4px;
	box-shadow: var(--nu-schaduw-vel);
}

.wp-block-group.is-style-paper-card > :first-child {
	margin-top: 0;
}

/* Favorietenlijst: rode nummers. */
ol.is-style-favorieten,
.wp-block-list.is-style-favorieten {
	padding: 0 !important;
	list-style: none;
	counter-reset: nu-fav;
}

.is-style-favorieten > li {
	position: relative;
	padding-left: 2.6em;
	counter-increment: nu-fav;
}

.is-style-favorieten > li::before {
	content: counter(nu-fav, decimal-leading-zero);
	position: absolute;
	top: 0.05em;
	left: 0;
	color: var(--nu-rood);
	font-family: var(--nu-kop);
	font-size: 0.95em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   10. Oordeel
   ---------------------------------------------------------------------- */

.nu-oordeel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
	padding: 40px 44px 44px;
	background: var(--nu-wit);
	box-shadow: var(--nu-schaduw-vel);
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 17px;
	line-height: 1.35;
	transform: rotate(0.4deg);
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) > .nu-oordeel {
	max-width: 852px;
	margin-block: 64px 36px;
}

.nu-oordeel::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: 120px;
	height: 28px;
	margin-left: -60px;
	background: rgba(232, 185, 58, 0.5);
	transform: rotate(-3deg);
}

.nu-oordeel > * {
	margin: 0 !important;
}

.nu-oordeel__eyebrow {
	margin: 0 0 6px !important;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nu-oordeel__hoofd > * {
	margin: 0;
}

.nu-oordeel .nu-oordeel__kop {
	margin: 0;
	font-family: var(--nu-kop);
	font-size: clamp(28px, 3.4vw, 36px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.nu-oordeel__tegels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.nu-oordeel__tegel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	border-radius: 10px;
	background: var(--nu-tegel);
	color: var(--nu-meta);
}

.nu-oordeel__stip {
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border: 2px solid var(--nu-leeg-rand);
	border-radius: 50%;
}

.nu-oordeel__titel {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nu-oordeel__uitleg {
	font-size: 14px;
	line-height: 1.35;
}

.nu-oordeel__tegel.is-gekozen {
	background: var(--nu-inkt);
	box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.6);
	color: var(--nu-papier-licht);
	transform: rotate(-1.5deg);
}

.nu-oordeel__tegel.is-gekozen .nu-oordeel__stip {
	border: 0;
	background: var(--nu-rood);
}

.nu-oordeel__tegel.is-gekozen .nu-oordeel__uitleg {
	opacity: 0.8;
}

.nu-oordeel__avonden {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 22px 24px;
	border-radius: 10px;
	background: var(--nu-inkt);
	color: var(--nu-papier-licht);
}

.nu-bollen--groot {
	gap: 8px;
}

.nu-bollen--groot > span {
	width: 34px;
	height: 34px;
	background: #4a4540;
}

.nu-bollen--groot > .is-vol {
	background: var(--nu-geel);
}

.nu-oordeel__avonden-titel {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.nu-oordeel__avonden-uitleg {
	margin: 2px 0 0;
	font-size: 14px;
	opacity: 0.75;
}

.nu-oordeel__score {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	padding: 24px;
	border: 1.5px solid var(--nu-tegel);
	border-radius: 10px;
}

.nu-oordeel .nu-oordeel__totaal {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 18px 20px;
	border-radius: 50%;
	background: var(--nu-geel);
	box-shadow: var(--nu-schaduw-sticker);
	aspect-ratio: 1;
	justify-content: center;
	transform: rotate(-4deg);
}

.nu-oordeel__totaal-getal {
	font-size: 56px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.nu-oordeel__totaal-van {
	max-width: 7em;
	margin-top: 4px;
	font-family: var(--nu-mono);
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.nu-oordeel .nu-oordeel__criteria {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nu-oordeel__criterium {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 16px;
	align-items: baseline;
}

.nu-oordeel__criterium-naam {
	font-size: 17px;
	font-weight: 800;
}

.nu-oordeel__criterium-vraag {
	grid-column: 1;
	grid-row: 2;
	color: var(--nu-meta);
	font-size: 14px;
}

.nu-oordeel__criterium-punten {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.nu-oordeel__criterium-punten small,
.nu-sticker-oordeel__score small,
.nu-kaart__score small {
	font-size: 0.6em;
	font-weight: 700;
	opacity: 0.6;
}

.nu-oordeel__meter {
	grid-column: 1 / -1;
	grid-row: 3;
	height: 8px;
	margin-top: 6px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--nu-inkt) calc(var(--nu-deel, 0) * 100%), var(--nu-tegel) 0);
}

.nu-sticker-oordeel__score {
	font-size: 22px;
	letter-spacing: -0.03em;
	line-height: 1;
}

.nu-voorwerp--lg .nu-sticker-oordeel__score {
	font-size: 28px;
}

.nu-kaart__score {
	color: var(--nu-inkt);
}

.nu-oordeel .nu-oordeel__uitleg-link {
	display: inline-block;
	margin-top: 8px;
	color: var(--nu-meta);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nu-oordeel__rol {
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--nu-inkt);
	color: var(--nu-papier-licht);
}

.nu-oordeel .nu-oordeel__rol > p {
	margin: 0;
}

.nu-oordeel__rol-label {
	font-family: var(--nu-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	opacity: 0.7;
	text-transform: uppercase;
}

.nu-oordeel .nu-oordeel__rol-titel {
	margin-top: 4px;
	color: var(--nu-geel);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nu-oordeel .nu-oordeel__rol-uitleg {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.4;
	opacity: 0.85;
}

.nu-sticker-oordeel__rol {
	color: var(--nu-meta);
	font-size: 0.85em;
	font-weight: 700;
}

.nu-kaart__rol {
	color: var(--nu-meta);
}

.nu-oordeel__hint {
	padding: 16px;
	border: 1.5px dashed var(--nu-leeg-rand);
	border-radius: 10px;
	color: var(--nu-meta);
	font-size: 15px;
}

.nu-oordeel__punten,
.nu-oordeel__punten > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.nu-oordeel__punten > .block-editor-inner-blocks {
	grid-column: 1 / -1;
}

.nu-oordeel__kolom > * {
	margin: 0;
}

.nu-oordeel__kolomkop {
	margin: 0 0 10px !important;
	font-family: var(--nu-hand) !important;
	font-size: 21px !important;
	line-height: 1.2 !important;
}

.nu-oordeel__kolom--plus .nu-oordeel__kolomkop { color: var(--nu-groen); }
.nu-oordeel__kolom--min .nu-oordeel__kolomkop { color: var(--nu-rood); }

.nu-oordeel .nu-oordeel__lijst {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	font-family: var(--nu-kop);
	font-size: 17px !important;
	line-height: 1.35;
}

.nu-oordeel .nu-oordeel__lijst li {
	margin: 0 !important;
	padding-left: 1em;
	text-indent: -1em;
}

/* In de editor zit de tekst in een eigen tekstvak; houd hem naast het teken. */
.nu-oordeel .nu-oordeel__lijst li > [role="textbox"] {
	display: inline;
}

.nu-oordeel__kolom--plus .nu-oordeel__lijst li::before { content: "+ "; }
.nu-oordeel__kolom--min .nu-oordeel__lijst li::before { content: "– "; }

/* -------------------------------------------------------------------------
   11. Koopblok, cadeaus en verlanglijstje
   ---------------------------------------------------------------------- */

.nu-koopblok {
	display: flex;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	padding: 22px 26px;
	border-radius: 6px;
	background: var(--nu-inkt);
	color: var(--nu-papier-licht);
	font-family: var(--nu-kop);
	font-size: 16px;
	line-height: 1.4;
}

:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) > .nu-koopblok {
	max-width: 852px;
	margin-block: 36px;
}

.nu-koopblok > * {
	margin: 0 !important;
}

.nu-koopblok__tekst {
	flex: 1;
	min-width: 0;
}

.nu-koopblok__tekst > * {
	margin: 0 !important;
}

.nu-koopblok__titel,
.nu-koopblok h4 {
	color: var(--nu-papier-licht);
	font-family: var(--nu-kop);
	font-size: 22px !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.nu-koopblok__regel {
	margin-top: 4px !important;
	font-size: 15px;
	opacity: 0.85;
}

.nu-koopblok .nu-disclosure {
	margin-top: 6px !important;
	color: inherit;
	font-family: var(--nu-mono);
	font-size: 11px;
	line-height: 1.5;
	opacity: 0.7;
}

.nu-koopblok__knoppen,
.nu-cadeau-card__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nu-btn-bol,
.nu-btn-shop2,
.nu-bewaar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--nu-kop);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.nu-btn-bol {
	border: 2px solid var(--nu-rood);
	background: var(--nu-rood);
	color: var(--nu-wit) !important;
}

.nu-btn-bol:hover {
	border-color: #b82424;
	background: #b82424;
}

.nu-btn-shop2 {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--nu-inkt);
}

.nu-koopblok .nu-btn-shop2 {
	color: var(--nu-papier-licht);
}

.nu-btn-shop2:hover {
	color: var(--nu-rood);
}

.nu-bewaar {
	border: 2px dashed currentColor;
	background: transparent;
	color: var(--nu-inkt);
}

.nu-koopblok .nu-bewaar {
	color: var(--nu-papier-licht);
}

.nu-bewaar.is-bewaard {
	border-style: solid;
	color: var(--nu-rood);
}

.nu-bewaar:disabled {
	opacity: 0.6;
}

.nu-disclosure {
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 11px;
	line-height: 1.5;
}

/* Cadeaugids */
.nu-cadeau-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 36px 28px;
	max-width: calc(var(--nu-kolom) + 160px);
	margin-block: 40px;
	padding: 0;
	list-style: none;
}

.nu-cadeau-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 12px 12px 18px;
	background: var(--nu-wit);
	box-shadow: var(--nu-schaduw);
	font-family: var(--nu-kop);
	font-size: 15px;
	line-height: 1.4;
	transform: rotate(-1deg);
}

.nu-cadeau-card:nth-child(even) {
	transform: rotate(1.2deg);
}

.nu-cadeau-card > * {
	margin: 0 !important;
}

.nu-cadeau-card__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.nu-cadeau-card h3 {
	font-family: var(--nu-kop);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nu-cadeau-card__leeftijd {
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nu-cadeau-card__waarom {
	color: var(--nu-tekst-zacht);
}

.nu-prijs-sticker {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 2;
	padding: 8px 12px;
	background: var(--nu-postit);
	box-shadow: var(--nu-schaduw-sticker);
	color: var(--nu-inkt);
	font-family: var(--nu-hand);
	font-size: 18px;
	transform: rotate(6deg);
}

.nu-cadeau-card .nu-btn-bol,
.nu-cadeau-card .nu-btn-shop2,
.nu-cadeau-card .nu-bewaar {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
}

.nu-sponsored {
	display: inline-block;
	padding: 6px 10px;
	background: var(--nu-postit);
	color: var(--nu-inkt);
	font-family: var(--nu-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Zwevend chipje naar het eigen verlanglijstje. */
.nu-lijstje-chip {
	position: fixed;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: 50;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--nu-inkt);
	box-shadow: var(--nu-schaduw-sticker);
	color: var(--nu-papier-licht);
	font-family: var(--nu-kop);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.nu-lijstje-chip:hover {
	background: var(--nu-rood);
	color: var(--nu-wit);
}

/* -------------------------------------------------------------------------
   12. Lezen
   ---------------------------------------------------------------------- */

.nu-toc {
	box-sizing: border-box;
	margin-block: 0 32px !important;
	padding: 16px 20px;
	border-radius: 10px;
	background: var(--nu-wit);
	font-family: var(--nu-kop);
	font-size: 16px;
}

.nu-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.nu-toc__toggle::after {
	content: "−";
	font-size: 18px;
}

.nu-toc__toggle[aria-expanded="false"]::after {
	content: "+";
}

.nu-toc__list {
	margin: 10px 0 0;
	padding-left: 1.4em;
	line-height: 1.35;
}

.nu-toc__list li + li {
	margin-top: 6px;
}

.nu-toc__list a {
	color: var(--nu-inkt);
	font-weight: 600;
	text-decoration: none;
}

.nu-toc__list a:hover {
	color: var(--nu-rood);
}

.nu-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 0;
	height: 4px;
	background: var(--nu-rood);
}

.admin-bar .nu-reading-progress {
	top: 32px;
}

.nu-artikel-slot {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	max-width: var(--nu-kolom);
	margin: 32px auto 0;
}

.nu-artikel-slot > * {
	margin: 0 !important;
}

.nu-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--nu-kop);
}

.nu-share__label {
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 19px;
	transform: rotate(-2deg);
}

.nu-share__button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	box-sizing: border-box;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--nu-wit);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	color: var(--nu-inkt);
	font: 600 14px/1.1 var(--nu-kop);
	text-decoration: none;
	cursor: pointer;
}

.nu-share__button:hover {
	color: var(--nu-rood);
}

.nu-share__copy[hidden] {
	display: none;
}

.nu-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--nu-kop);
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.nu-tags a {
	padding: 5px 12px;
	border: 1.5px solid var(--nu-leeg-rand);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	color: var(--nu-inkt);
	text-decoration: none;
}

.nu-tags a:hover {
	border-color: var(--nu-inkt);
}

.nu-tags .wp-block-post-terms__separator {
	display: none;
}

.nu-auteurregel {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px !important;
	padding-top: 20px;
	border-top: 2px solid var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 16px;
}

.nu-auteurregel .nu-portret {
	width: 48px;
	height: 48px;
}

.nu-auteurregel p {
	margin: 0;
}

.nu-auteurregel a {
	color: var(--nu-inkt);
	text-decoration: none;
}

/* Ligt ook op tafel */
.nu-ookop {
	margin-top: 64px;
	padding: 48px 0 56px;
	border-top: 1px solid var(--nu-lijn);
}

.nu-ookop__kop {
	margin: 0 0 28px;
	color: var(--nu-rood);
	font-family: var(--nu-hand);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
}

.nu-ookop__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nu-ookop__item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	color: var(--nu-inkt);
	text-decoration: none;
}

.nu-ookop__voorwerp {
	display: grid;
	place-items: center;
	min-height: 110px;
}

.nu-ookop .nu-object--sm { --s: 0.46; }
.nu-ookop .nu-object--sm.nu-object--tv { --s: 0.4; }
.nu-ookop .nu-object--sm.nu-object--vhs { --s: 0.42; }
.nu-ookop .nu-object--sm.nu-object--speelkaart { --s: 0.38; }
.nu-ookop .nu-object--sm.nu-object--polaroid { --s: 0.34; }
.nu-ookop .nu-object--sm.nu-object--ruilkaart { --s: 0.38; }
.nu-ookop .nu-object--sm.nu-object--disc { --s: 0.34; }

.nu-ookop__item:hover .nu-object {
	transform: rotate(0deg) translateY(-4px);
}

.nu-ookop__label {
	display: block;
	margin-bottom: 6px;
	color: var(--nu-meta-warm);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nu-ookop__titel {
	display: block;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nu-ookop__item:hover .nu-ookop__titel {
	color: var(--nu-rood);
}

/* -------------------------------------------------------------------------
   13. Bestaande inhoudsblokken
   ---------------------------------------------------------------------- */

.nu-review-advice,
.nu-table-advice,
.nu-guide-method,
.nu-practical-tip,
.nu-sources,
.nu-comparison {
	box-sizing: border-box;
	margin-block: 36px;
	padding: clamp(18px, 3vw, 28px);
	background: var(--nu-wit);
	border-radius: var(--nu-radius);
	box-shadow: var(--nu-schaduw-vel);
	font-family: var(--nu-kop);
	font-size: 17px;
	line-height: 1.45;
}

.nu-table-advice,
.nu-guide-method {
	border-top: 4px solid var(--nu-rood);
}

.nu-practical-tip {
	border-left: 4px solid var(--nu-groen);
}

:is(.nu-review-advice, .nu-table-advice, .nu-guide-method, .nu-practical-tip, .nu-sources, .nu-comparison) > * {
	margin-block: 0 10px;
}

:is(.nu-review-advice, .nu-table-advice, .nu-guide-method, .nu-practical-tip, .nu-sources, .nu-comparison) > :last-child {
	margin-bottom: 0;
}

.nu-eyebrow,
.nu-utility {
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nu-advice-grid,
.nu-guide-method__grid,
.nu-comparison__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 14px;
	background: var(--nu-lijn);
	border: 1px solid var(--nu-lijn);
}

.nu-advice-item,
.nu-guide-method__grid > p,
.nu-comparison__choice {
	margin: 0;
	padding: 16px;
	background: var(--nu-wit);
}

.nu-comparison__choice > * {
	margin-block: 0 8px;
}

.nu-table-advice__grid,
.nu-conclusion-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.nu-table-advice__works,
.nu-table-advice__doesnt {
	padding: 16px;
	border-radius: 6px;
}

.nu-table-advice__works {
	background: #e3efe6;
}

.nu-table-advice__doesnt {
	background: var(--nu-tegel);
}

.nu-table-advice__grid h4 {
	margin-top: 0;
	font-size: 18px;
}

.nu-sources__list {
	margin-bottom: 0;
	font-size: 15px;
}

.nu-info-state {
	margin-block: 24px;
	padding: 12px 16px;
	border-left: 4px solid var(--nu-meta);
	border-radius: 6px;
	background: var(--nu-wit);
	font-family: var(--nu-kop);
	font-size: 16px;
}

.nu-info-state.is-updated { border-left-color: var(--nu-groen); }
.nu-info-state.is-outdated,
.nu-info-state.is-error { border-left-color: var(--nu-rood); }

.nu-info-state p {
	margin: 0;
}

.nu-guide-choices {
	display: grid;
	gap: 24px;
	margin-block: 36px;
}

.nu-guide-choice {
	display: grid;
	grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
	gap: 24px;
	align-items: center;
	padding: 16px;
	background: var(--nu-wit);
	border-radius: var(--nu-radius);
	box-shadow: var(--nu-schaduw-vel);
	font-family: var(--nu-kop);
	font-size: 17px;
}

.nu-guide-choice:nth-child(even) .nu-guide-choice__image {
	order: 2;
}

.nu-guide-choice--featured {
	border-top: 4px solid var(--nu-rood);
}

.nu-guide-choice__image,
.nu-guide-choice__copy > * {
	margin-block: 0 10px;
}

.nu-guide-choice__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.nu-arrow-link {
	font-weight: 700;
}

/* Oude Speelrapport-markup (vóór 2.0) blijft leesbaar. */
.nu-scorecard {
	box-sizing: border-box;
	padding: 28px;
	background: var(--nu-wit);
	box-shadow: var(--nu-schaduw-vel);
	font-family: var(--nu-kop);
	font-size: 17px;
}

/* -------------------------------------------------------------------------
   14. Pagina's, 404, observaties
   ---------------------------------------------------------------------- */

.nu-tafel--pagina {
	padding-bottom: 64px;
}

.nu-paginatitel {
	max-width: var(--nu-kolom);
	margin: 40px auto 32px !important;
	font-family: var(--nu-kop);
	font-size: clamp(36px, 5.4vw, 64px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

.nu-tafel--breed .nu-paginatitel {
	max-width: var(--nu-breed);
}

.nu-paginabeeld {
	max-width: calc(var(--nu-kolom) + 160px);
	margin: 0 auto 32px !important;
}

.nu-paginabeeld img {
	border-radius: 3px;
}

.nu-404 {
	max-width: 560px;
	margin: 56px auto !important;
	font-family: var(--nu-kop);
	font-size: 18px;
}

.nu-404 > * {
	margin-block: 0 16px;
}

.nu-404__titel {
	color: var(--nu-inkt);
	font-family: var(--nu-hand) !important;
	font-size: clamp(30px, 4vw, 40px) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.15 !important;
}

.nu-briefjes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 36px 28px;
	margin: 0;
	padding: 48px 0 24px;
	list-style: none;
}

.nu-briefje {
	box-sizing: border-box;
	height: 100%;
	padding: 22px 22px 18px;
	background: var(--nu-postit);
	box-shadow: 0 12px 20px -14px rgba(20, 40, 25, 0.5);
	transform: rotate(-1.5deg);
}

.nu-briefjes > li:nth-child(even) .nu-briefje {
	transform: rotate(1.5deg);
}

.nu-briefje > * {
	margin: 0;
}

.nu-briefje__tekst {
	color: var(--nu-tekst);
	font-family: var(--nu-hand);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.25;
}

.nu-briefje__tijd {
	margin-top: 12px !important;
	color: var(--nu-meta);
	font-family: var(--nu-mono);
	font-size: 11px;
}

/* -------------------------------------------------------------------------
   15. Editor
   ---------------------------------------------------------------------- */

.nu-editor-placeholder {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1.5px dashed var(--nu-meta);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.65);
	color: var(--nu-inkt);
	font-family: var(--nu-kop);
	font-size: 14px;
	line-height: 1.4;
}

.nu-editor-placeholder strong {
	font-size: 15px;
}

.editor-styles-wrapper .nu-oordeel .block-editor-block-list__layout > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   16. Responsief
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.nu-hero {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
	}

	.nu-hero .nu-object--lg.nu-object--tv { --s: 1.24; }
	.nu-hero .nu-object--lg { --s: 1.15; }

	.nu-artikelkop {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: 40px;
		padding-inline: 0;
	}

	.nu-artikelkop .nu-object--lg { --s: 1.15; }
	.nu-artikelkop .nu-object--lg.nu-object--tv { --s: 1.05; }
	.nu-artikelkop .nu-object--lg.nu-object--vhs { --s: 1.1; }

	.nu-tekst > :is(.nu-margin-note, .is-style-kantlijn-rechts, .is-style-kantlijn-links) {
		float: none;
		width: auto;
		max-width: 320px;
		margin: 32px auto !important;
	}
}

@media (max-width: 960px) {
	.nu-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nu-ookop__lijst {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image figcaption {
		padding-inline: 0 !important;
	}
}

@media (max-width: 719px) {
	body {
		font-size: 16px;
	}

	/* Kop */
	.nu-kop {
		padding: 20px 20px 8px;
	}

	.nu-logo {
		gap: 8px;
		font-size: 20px;
	}

	.nu-logo img {
		width: 30px;
		height: 30px;
	}

	.nu-menu {
		display: none;
	}

	.nu-menu-mobiel {
		display: block;
	}

	.nu-rondknop--groot {
		width: 44px;
		height: 44px;
	}

	.nu-terug {
		font-size: 14px;
	}

	.nu-terug a {
		display: inline-block;
		padding-block: 12px;
	}

	/* Nieuwste stuk */
	.nu-hero {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 20px 0 28px;
	}

	.nu-hero__voorwerp {
		order: -1;
		margin-top: 10px;
	}

	.nu-hero .nu-object--lg { --s: 1.1; }
	.nu-hero .nu-object--lg.nu-object--tv { --s: 1.08; }
	.nu-hero .nu-object--lg.nu-object--notitie { --s: 1; }

	.nu-hero__kop,
	.nu-hero__intro,
	.nu-hero .nu-knop {
		display: none !important;
	}

	.nu-hero .nu-metaregel {
		margin-bottom: 8px;
		font-size: 11px;
	}

	.nu-hero__titel {
		margin: 0 !important;
		font-size: 32px;
		letter-spacing: -0.035em;
		line-height: 1;
	}

	/* Filterbalk: één schuivende rij */
	.nu-filterbalk {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--nu-rand));
		padding: 0 var(--nu-rand) 18px;
		overflow-x: auto;
		border: 0;
		scrollbar-width: none;
	}

	.nu-filterbalk::-webkit-scrollbar {
		display: none;
	}

	.nu-filterbalk__pillen {
		display: contents;
	}

	.nu-pil {
		flex: none;
		min-height: 44px;
		padding: 10px 14px;
	}

	.nu-pil--reviews {
		margin-left: 0;
		padding: 8px 12px;
	}

	.nu-pil__icoon {
		display: none;
	}

	/* Raster wordt lijst */
	.nu-raster {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0;
	}

	.nu-raster > li {
		border-top: 1px solid var(--nu-lijn);
	}

	.nu-overzichtkop + .nu-tafel-overzicht .nu-raster > li:first-child {
		border-top: 0;
	}

	.nu-kaart__link {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding: 16px 0;
	}

	.nu-kaart__voorwerp {
		height: auto;
		min-height: 80px;
	}

	.nu-kaart .nu-object.nu-object--md { --s: 0.35; }
	.nu-kaart .nu-object.nu-object--md.nu-object--tv { --s: 0.31; }
	.nu-kaart .nu-object.nu-object--md.nu-object--vhs { --s: 0.32; }
	.nu-kaart .nu-object.nu-object--md.nu-object--speelkaart { --s: 0.3; }
	.nu-kaart .nu-object.nu-object--md.nu-object--flippo { --s: 0.33; }
	.nu-kaart .nu-object.nu-object--md.nu-object--polaroid { --s: 0.33; }
	.nu-kaart .nu-object.nu-object--md.nu-object--disc { --s: 0.33; }
	.nu-kaart .nu-object.nu-object--md.nu-object--ruilkaart { --s: 0.3; }
	.nu-kaart .nu-object.nu-object--md.nu-object--notitie { --s: 0.33; min-height: 70px; }

	.nu-kaart .nu-object__etiket,
	.nu-kaart .nu-object__tekst,
	.nu-kaart .nu-object__onderschrift {
		font-size: 0;
	}

	.nu-kaart .nu-object__tape,
	.nu-kaart .nu-sticker-oordeel,
	.nu-kaart__labels {
		display: none;
	}

	.nu-kaart__mobielmeta {
		display: block;
		margin: 0 0 4px;
		color: var(--nu-meta-warm);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.nu-kaart__titel {
		font-size: 18px;
		letter-spacing: -0.02em;
		line-height: 1.1;
	}

	.nu-kaart__oordeel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-top: 6px;
		color: var(--nu-meta);
		font-size: 12px;
		font-weight: 700;
	}

	.nu-kaart__oordeel--tafel {
		color: var(--nu-inkt);
	}

	.nu-kaart__oordeel .nu-bollen > span {
		width: 7px;
		height: 7px;
	}

	.nu-kaart__link:hover .nu-object {
		transform: rotate(var(--nu-kantel, 0deg));
	}

	.nu-meer {
		padding-top: 16px;
	}

	/* Overzichten */
	.nu-overzichtkop {
		padding: 16px 0 24px;
	}

	.nu-overzichtkop__intro,
	.nu-overzichtkop .wp-block-term-description {
		font-size: 18px;
	}

	/* Artikel */
	.nu-artikelkop {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 20px 0 32px;
	}

	.nu-artikelkop .nu-object--lg { --s: 1; }
	.nu-artikelkop .nu-object--lg.nu-object--tv { --s: 1.05; }

	.nu-voorwerp--lg .nu-sticker-oordeel {
		right: -8px;
		bottom: -14px;
		padding: 10px 12px;
		font-size: 13px;
	}

	.nu-artikelkop .nu-metaregel {
		font-size: 11px;
	}

	.nu-feitenregel {
		gap: 6px 20px;
		font-size: 12px;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) {
		font-size: 19px;
		line-height: 1.6;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) > p:first-of-type {
		font-size: 21px;
	}

	.nu-tafel--artikel .nu-tekst {
		padding-top: 32px;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) :is(.wp-block-quote, .wp-block-pullquote):not(.is-style-post-it) {
		padding: 22px 24px;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--product, .is-style-product) {
		padding: 18px 18px 14px;
	}

	:is(.nu-tekst, :where(.is-root-container.wp-block-post-content, .editor-styles-wrapper .wp-block-post-content)) .wp-block-image:is(.nu-beeld--product, .is-style-product) img {
		height: 240px !important;
	}

	.nu-tekst > .wp-block-image.is-style-geplakt-naast-tekst {
		float: none;
		margin: 36px auto !important;
		max-width: 300px;
	}

	.nu-bijschrift-met-bron {
		flex-direction: column;
		gap: 2px;
	}

	.nu-oordeel {
		gap: 24px;
		padding: 32px 22px 28px;
	}

	.nu-oordeel__tegels,
	.nu-oordeel__punten,
	.nu-oordeel__punten > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: 1fr;
	}

	.nu-oordeel__tegel:not(.is-gekozen) {
		padding-block: 12px;
	}

	.nu-oordeel__avonden {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 18px;
	}

	.nu-oordeel__score {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 18px;
	}

	.nu-oordeel .nu-oordeel__totaal {
		justify-self: center;
	}

	.nu-bollen--groot > span {
		width: 28px;
		height: 28px;
	}

	.nu-koopblok {
		flex-direction: column;
		align-items: stretch;
		padding: 20px;
	}

	.nu-koopblok__knoppen > * {
		flex: 1 1 auto;
	}

	.nu-guide-choice,
	.nu-advice-grid,
	.nu-guide-method__grid,
	.nu-comparison__grid,
	.nu-table-advice__grid,
	.nu-conclusion-grid {
		grid-template-columns: 1fr;
	}

	.nu-guide-choice:nth-child(even) .nu-guide-choice__image {
		order: 0;
	}

	.nu-ookop {
		margin-top: 40px;
		padding-top: 36px;
	}

	.nu-ookop__item {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
	}

	/* Voet */
	.nu-voet {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.nu-voet__wouter {
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
   17. Print en minder beweging
   ---------------------------------------------------------------------- */

@media print {
	body {
		background: #fff;
	}

	.nu-kop,
	.nu-voet,
	.nu-filterbalk,
	.nu-meer,
	.nu-paginering,
	.nu-share,
	.nu-toc,
	.nu-reading-progress,
	.nu-ookop,
	.nu-lijstje-chip,
	.nu-bewaar,
	.nu-tags {
		display: none !important;
	}

	.nu-object,
	.nu-oordeel,
	.nu-sticky,
	.wp-block-quote,
	.wp-block-image {
		box-shadow: none !important;
		transform: none !important;
	}

	.nu-oordeel,
	.nu-koopblok,
	.wp-block-image {
		break-inside: avoid;
	}

	.nu-koopblok {
		border: 1px solid #000;
		background: #fff;
		color: #000;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.nu-kaart__link:hover .nu-object,
	.nu-kaart__link:focus-visible .nu-object,
	.nu-ookop__item:hover .nu-object {
		transform: rotate(var(--nu-kantel, 0deg));
	}

	.nu-hero__voorwerp:hover {
		transform: none;
	}
}

/* Vangnet (2.5.1): niets in een artikel mag breder worden dan het scherm,
   ook geen geplakte iframe of video met een vaste breedte. */
html {
	overflow-x: clip;
}

.nu-tekst :is(iframe, video, embed, object) {
	max-width: 100%;
}

.nu-tekst > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}