/*
 * single.css — één blogbericht (baserules regel 8).
 *
 * Eén nacht, van boven naar beneden:
 *
 *   1. de kop         donker, met een maansikkel en sterren; de foto staat er
 *                     als een venster onder en valt over de bolling heen
 *   2. het lichaam    de tekst op papier, met ernaast de nachtlijn: de
 *                     inhoudsopgave als tijdlijn van 23:00 tot 07:00
 *   3. de tekst       elke tussenkop draagt zijn tijdstip op de nachtlijn
 *   4. de bronnen     waar de adviezen op steunen, als een notenlijst
 *   5. de voet        wie het schreef, en doorsturen
 *   6. de producten   wat bij het artikel past, als één plank
 *   7. de ochtend     goedemorgen, en wat je hierna leest
 *   8. de telefoon    inhoudsopgave boven de tekst en een leesbalk bovenin
 *
 * De kleuren zijn de nacht uit main.css en --kleurDageraad, de warme kleur uit
 * de kit van dekbedgekte.nl. Twee tinten komen erbij, hieronder bij .bericht,
 * met de reden erachter.
 */

.bericht {
	/* De tekstkolom: ongeveer 70 tekens per regel bij 17 px. */
	--brTekstBreedte: 43rem;
	--brLijnBreedte: 15rem;

	/* Hoeveel ruimte een kop of de nachtlijn onder de vaste header houdt. De
	   header is dan al ingeklapt (isKlein), en dat is ongeveer 7 rem. */
	--brOnderKop: 8.5rem;

	/* De ochtend is warm, maar --kleurDageraad (#FFBC7D) is op papier te licht
	   om te lezen. Dit is dezelfde tint, donker genoeg voor tekst (4,6:1). */
	--brOchtendDiep: #A2551B;

	/* Het ochtendlicht achter de laatste band: van papier naar dageraad. */
	--brOchtendLicht: #FFF3E7;

	--brRondingGroot: clamp(16px, 2vw, 26px);
}

/* De ochtendband loopt tot tegen de footer aan. */
body:has(.bericht) .siteVoet {
	margin-block-start: 0;
}

/* ==========================================================================
   1. De kop
   ========================================================================== */

.berichtKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(0.5rem, 1.5vw, 1.25rem) clamp(1.75rem, 3.5vw, 3rem);
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(90% 80% at 85% 0%, rgb(83 70 128 / 55%) 0%, rgb(83 70 128 / 0%) 62%),
		linear-gradient(172deg, #07021B 0%, #150A3D 55%, #2A1A63 100%);
	color: var(--kleurWit);
}

.berichtKop__nacht {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/*
 * De maansikkel: een lege cirkel met een schaduw aan de binnenkant. De schaduw
 * is de maan, de cirkel zelf is de nacht erachter — geen afbeelding nodig.
 */
.berichtKop__maan {
	position: absolute;
	inset-block-start: clamp(1.5rem, 5vw, 4rem);
	inset-inline-end: clamp(1.5rem, 9vw, 9rem);
	inline-size: clamp(4.5rem, 9vw, 8.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: inset -1.25rem 0.55rem 0 0 #FFEBD6;
	filter: drop-shadow(0 0 2.5rem rgb(255 188 125 / 38%));
	transform: rotate(-18deg);
	opacity: 0.92;
}

.berichtKop__gloed {
	position: absolute;
	inset-block-end: -35%;
	inset-inline-start: -10%;
	inline-size: clamp(320px, 60vw, 860px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(
		ellipse at center,
		rgb(255 188 125 / 16%) 0%,
		rgb(255 188 125 / 0%) 66%
	);
}

.berichtKop__sterren {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: 100%;
	block-size: clamp(200px, 60%, 320px);
	fill: var(--kleurWit);
	animation: brFlonker 6s ease-in-out infinite;
}

@keyframes brFlonker {
	0%,
	100% {
		opacity: 0.35;
	}

	50% {
		opacity: 0.7;
	}
}

.berichtKop__inhoud {
	position: relative;
	z-index: 1;
	padding-block-end: clamp(2rem, 4vw, 3.25rem);
}

/* Het kruimelpad op een donkere ondergrond. */
/* Met een eigen maat: --maatKlein wordt vanaf tablet 18 px (zie main.css), en
   dan loopt een kruimelpad met een lange titel over drie regels. */
.berichtKop .esseoBreadcrumbs {
	padding-block: var(--ruimte3) clamp(1.5rem, 3vw, 2.5rem);
	color: rgb(255 255 255 / 50%);
	font-size: var(--vloeiendKlein);
}

.berichtKop .esseoBreadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.4rem;
	align-items: center;
}

.berichtKop .esseoBreadcrumbs a {
	color: rgb(255 255 255 / 72%);
}

.berichtKop .esseoBreadcrumbs a:hover {
	color: var(--kleurWit);
}

.berichtKop .esseoBreadcrumbs [aria-current] {
	color: rgb(255 255 255 / 50%);
}

.berichtKop__categorie {
	color: inherit;
}

.berichtKop__categorie:hover {
	color: var(--kleurWit);
	text-decoration: none;
}

.berichtKop__titel {
	max-inline-size: 21ch;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.65rem);
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.06;
}

/* Wie, wanneer en hoe lang, op één regel met stipjes ertussen. */
.berichtKop__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1.1rem;
	margin-block-start: clamp(1.25rem, 2.5vw, 1.85rem);
	color: rgb(255 255 255 / 72%);
	font-size: var(--vloeiendKlein);
	font-weight: 500;
}

.berichtKop__meta > li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.berichtKop__meta > li + li::before {
	content: "";
	inline-size: 0.25rem;
	block-size: 0.25rem;
	margin-inline-end: 0.6rem;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 30%);
}

.berichtKop__meta strong {
	color: var(--kleurWit);
	font-weight: 700;
}

.berichtKop__letter {
	display: grid;
	place-items: center;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	border-radius: 50%;
	background-image: linear-gradient(140deg, #9D97B2 0%, #534680 100%);
	color: var(--kleurWit);
	font-size: 0.9rem;
	font-weight: 800;
	box-shadow: 0 0 0 3px rgb(255 255 255 / 10%);
}

.berichtKop__leestijd {
	padding: 0.35rem 0.8rem 0.35rem 0.6rem;
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 8%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
	color: var(--kleurWit);
}

/* Een pil heeft geen stip ervoor nodig. */
.berichtKop__meta > .berichtKop__leestijd::before {
	display: none;
}

.berichtKop__maanIcoon {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--kleurDageraad);
}

/* Het venster: de foto, die over de bolling heen de ochtend in valt. */

.berichtKop__venster {
	position: relative;
	z-index: 1;
}

.berichtKop__beeld {
	position: relative;
	overflow: hidden;
	aspect-ratio: 12 / 5;
	border-radius: var(--brRondingGroot);
	background-color: var(--kleurNacht2);
	box-shadow: 0 40px 80px -20px rgb(5 2 20 / 60%);
}

/* Een haarlijn van licht langs de rand, als het kozijn van het venster. */
.berichtKop__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
	pointer-events: none;
}

/* De <picture> om de foto doet niet mee in de opmaak: de foto vult het venster. */
.berichtKop__beeld picture {
	display: contents;
}

.berichtKop__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Het handgeschreven briefje, schuin op de rand van het venster. */
.berichtKop__briefje {
	position: absolute;
	inset-block-start: -1.35rem;
	inset-inline-end: clamp(2rem, 6vw, 5rem);
	z-index: 2;
	color: var(--kleurDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
	font-weight: 600;
	line-height: 1;
	transform: rotate(-4deg);
	text-shadow: 0 2px 14px rgb(7 2 27 / 70%);
}

/* Waar de nacht licht wordt — dezelfde bolling als op de voorpagina en in de
   winkel. Hij ligt onder het venster, dus de foto valt eroverheen. */
.berichtKop__ochtend {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: -12%;
	block-size: clamp(56px, 9vw, 130px);
	background-color: var(--kleurPapier);
	border-start-start-radius: 50% 100%;
	border-start-end-radius: 50% 100%;
}

/* ==========================================================================
   2. Het lichaam: de tekst en de nachtlijn
   ========================================================================== */

.berichtLichaam {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
	background-color: var(--kleurPapier);
}

.berichtLichaam__raster {
	display: grid;
	grid-template-columns: var(--brLijnBreedte) minmax(0, var(--brTekstBreedte));
	gap: clamp(2.5rem, 5vw, 5.5rem);
	justify-content: center;
	align-items: start;
}

.berichtLichaam__raster--enkel {
	grid-template-columns: minmax(0, var(--brTekstBreedte));
}

/* De nachtlijn */

.nachtlijn {
	block-size: 100%;
}

.nachtlijn__plak {
	position: sticky;
	inset-block-start: var(--brOnderKop);
	padding-block-start: 0.35rem;
}

.nachtlijn__klok {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--kleurNacht2);
	font-size: 2.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
}

.nachtlijn__klokIcoon {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	color: var(--kleurLila);
}

.nachtlijn__kop {
	margin-block: 0.85rem 1.1rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.nachtlijn__baan {
	position: relative;
	padding-inline-start: 1.6rem;
}

/* Het spoor begint een stukje boven de eerste kop: daar is het nog 23:00. */
.nachtlijn__spoor {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.4rem;
	inline-size: 2px;
	border-radius: 2px;
	background-color: rgb(83 70 128 / 14%);
}

/*
 * Wat er al gelezen is. Het verloop staat over de hele lengte en wordt
 * afgeknipt, zodat de kleur bij een plek op de lijn hoort en niet bij hoe ver
 * je bent: halverwege is het altijd paars, onderaan altijd ochtend.
 *
 * --maanHoogte zet het script: waar de maan nu op het spoor staat, in pixels,
 * tussen de stipjes van de koppen in.
 */
.nachtlijn__voortgang {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: linear-gradient(180deg, #2A1A63 0%, #534680 60%, #FFBC7D 100%);
	clip-path: inset(0 0 calc(100% - var(--maanHoogte, 0px)) 0);
}

/*
 * De maan die meeloopt: een wit schijfje met een paarse sikkel erin, dezelfde
 * vorm als de maan in de kop. Aan het einde van de nacht wordt hij de zon.
 */
.nachtlijn__maan {
	position: absolute;
	inset-block-start: var(--maanHoogte, 0px);
	inset-inline-start: 50%;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	border-radius: 50%;
	background-color: var(--kleurWit);
	box-shadow:
		inset -0.3rem 0.1rem 0 0 var(--kleurPrimair),
		0 0 0 1.5px var(--kleurPrimair),
		0 0 0 5px var(--kleurPapier),
		0 0 18px 4px rgb(83 70 128 / 35%);
	transform: translate(-50%, -50%) rotate(-18deg);
	transition: background-color var(--duurMiddel) var(--soepel), box-shadow var(--duurMiddel) var(--soepel);
}

.nachtlijn.isOchtend .nachtlijn__maan {
	background-color: var(--kleurDageraad);
	box-shadow:
		inset 0 0 0 0 var(--kleurPrimair),
		0 0 0 1.5px var(--kleurDageraad),
		0 0 0 5px var(--kleurPapier),
		0 0 20px 6px rgb(255 188 125 / 60%);
}

.nachtlijn__lijst {
	padding-block: 1.1rem 0.9rem;
}

.nachtlijn__item {
	position: relative;
}

/* Het stipje van elke kop op de lijn. */
.nachtlijn__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.95rem;
	inset-inline-start: calc(-1.6rem + 0.4rem + 1px);
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background-color: var(--kleurPapier);
	box-shadow: inset 0 0 0 2px rgb(83 70 128 / 30%);
	transform: translate(-50%, -50%);
	transition: box-shadow var(--duurMiddel) var(--soepel), background-color var(--duurMiddel) var(--soepel);
}

.nachtlijn__item.isVoorbij::before,
.nachtlijn__item.isHier::before {
	background-color: var(--kleurPrimair);
	box-shadow: inset 0 0 0 2px var(--kleurPrimair);
}

.nachtlijn__link {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0.4rem;
	padding-block: 0.5rem;
	color: var(--kleurSecundair);
	font-size: 0.875rem;
	line-height: 1.4;
	transition: color var(--duurKort) var(--soepel);
}

.nachtlijn__link:hover {
	color: var(--kleurTekst);
	text-decoration: none;
}

.nachtlijn__uur {
	padding-block-start: 0.12rem;
	color: var(--kleurLila);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.nachtlijn__item.isHier .nachtlijn__link {
	color: var(--kleurTekst);
	font-weight: 600;
}

.nachtlijn__item.isHier .nachtlijn__uur {
	color: var(--kleurPrimair);
}

.nachtlijn__einde {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-block-start: 1.1rem;
	color: var(--kleurNacht2);
	font-size: 0.9rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.nachtlijn__zon {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	border-radius: 50%;
	background-color: var(--kleurDageraad);
	box-shadow: 0 0 14px 3px rgb(255 188 125 / 55%);
}

.nachtlijn__goedemorgen {
	color: var(--brOchtendDiep);
	font-family: var(--letterGeschreven);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1;
}

/* In het kort */

.berichtKort {
	margin-block-end: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--brRondingGroot);
	background-color: var(--kleurWit);
	box-shadow: inset 0 0 0 1px var(--kleurLijn), 0 18px 40px -24px rgb(40 27 87 / 22%);
}

.berichtKort__titel {
	margin-block-end: 0.9rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.berichtKort__lijst {
	display: grid;
	gap: 0.7rem;
}

.berichtKort__regel {
	display: flex;
	gap: 0.7rem;
	font-size: var(--vloeiendLopend);
	font-weight: 500;
	line-height: 1.5;
}

.berichtKort__vink {
	margin-block-start: 0.2rem;
}

/* ==========================================================================
   3. De tekst
   --------------------------------------------------------------------------
   .rijkeTekst uit main.css is de basis; wat hier staat maakt er een leestekst
   van: groter, ruimer, en met de koppen als uren van de nacht.
   ========================================================================== */

.berichtTekst {
	font-size: var(--vloeiendLopend);
	font-weight: 400;
	line-height: 1.78;
}

.berichtTekst > * + * {
	margin-block-start: 1.15em;
}

/*
 * De tussenkop. Het tijdstip erboven zet dekbedgekteBericht::ankers() erop,
 * als data-uur — hetzelfde tijdstip als op de nachtlijn, met een streepje dat
 * de lijn naar de tekst doortrekt.
 */
.berichtTekst h2 {
	margin-block-start: clamp(2.5rem, 5vw, 3.75rem);
	font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
	letter-spacing: -0.02em;
	line-height: 1.22;
	scroll-margin-block-start: var(--brOnderKop);
}

.berichtTekst h2[data-uur]::before {
	content: attr(data-uur);
	display: block;
	inline-size: max-content;
	margin-block-end: 0.7rem;
	padding-inline-end: 3rem;
	background-image: linear-gradient(currentcolor, currentcolor);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 2.25rem 1px;
	color: var(--kleurLila);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	line-height: 1;
}

.berichtTekst > h2:first-child {
	margin-block-start: 0;
}

.berichtTekst h3 {
	margin-block-start: 2.1rem;
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	line-height: 1.35;
}

.berichtTekst h2 + *,
.berichtTekst h3 + * {
	margin-block-start: 0.75em;
}

.berichtTekst a {
	color: var(--kleurPrimair);
	font-weight: 500;
	text-decoration-color: rgb(83 70 128 / 35%);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--duurKort) var(--soepel);
}

.berichtTekst a:hover {
	text-decoration-color: currentcolor;
}

.berichtTekst strong {
	color: var(--kleurTekst);
	font-weight: 700;
}

/* Een opsomming met een maansikkeltje als bolletje. */
.berichtTekst ul {
	padding-inline-start: 0;
	list-style: none;
}

.berichtTekst ul > li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.berichtTekst ul > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-start: 0.1rem;
	inline-size: 0.8rem;
	block-size: 0.8rem;
	border-radius: 50%;
	box-shadow: inset -0.26rem 0.1rem 0 0 var(--kleurPrimair);
	transform: rotate(-18deg);
}

/* Een genummerde lijst: stappen, met het nummer in een rondje. */
.berichtTekst ol {
	padding-inline-start: 0;
	list-style: none;
	counter-reset: brStap;
}

.berichtTekst ol > li {
	position: relative;
	padding-inline-start: 2.6rem;
	counter-increment: brStap;
}

.berichtTekst ol > li::before {
	content: counter(brStap);
	position: absolute;
	inset-block-start: 0.1em;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1;
}

.berichtTekst li + li {
	margin-block-start: 0.55rem;
}

.berichtTekst img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin-block: 2rem;
	border-radius: var(--brRondingGroot);
}

.berichtTekst blockquote {
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--kleurDageraad);
	color: var(--kleurNacht2);
	font-size: var(--vloeiendMidden);
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Een tabel. Op een telefoon past hij niet: dan schuift hij binnen zijn eigen
 * vak en niet de hele pagina.
 */
.berichtTekst table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--kleurLijn);
	background-color: var(--kleurWit);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.berichtTekst th,
.berichtTekst td {
	padding: 0.8rem 1rem;
	text-align: start;
	vertical-align: top;
}

.berichtTekst th {
	background-color: var(--kleurNacht2);
	color: var(--kleurWit);
	font-size: 0.8125rem;
	font-weight: 700;
}

.berichtTekst thead th:first-child {
	border-start-start-radius: 16px;
}

.berichtTekst thead th:last-child {
	border-start-end-radius: 16px;
}

.berichtTekst tbody tr:nth-child(even) td {
	background-color: var(--kleurMist);
}

.berichtTekst td:first-child {
	color: var(--kleurTekst);
	font-weight: 600;
}

/* ==========================================================================
   4. De bronnen
   --------------------------------------------------------------------------
   Klein en rustig, zoals een notenlijst achterin een boek: wie wil nagaan
   waar een advies vandaan komt, vindt het; wie dat niet wil, leest eroverheen.
   ========================================================================== */

.berichtBronnen {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--brRondingGroot);
	background-color: var(--kleurMist);
}

.berichtBronnen__titel {
	margin-block-end: 0.9rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.berichtBronnen__lijst {
	display: grid;
	gap: 0.65rem;
	padding-inline-start: 1.35rem;
	list-style: decimal;
	font-size: var(--vloeiendKlein);
	line-height: 1.55;
}

.berichtBronnen__bron::marker {
	color: var(--kleurPrimair);
	font-weight: 700;
}

.berichtBronnen__link {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.berichtBronnen__uitgever {
	display: block;
	color: var(--kleurSecundair);
}

/* ==========================================================================
   5. De voet: schrijver en doorsturen
   ========================================================================== */

.berichtVoet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-block-start: clamp(2.5rem, 5vw, 3.75rem);
	padding-block-start: clamp(1.75rem, 3vw, 2.25rem);
	border-block-start: 1px solid var(--kleurLijn);
}

.berichtVoet__schrijver {
	display: flex;
	gap: 1rem;
	max-inline-size: 28rem;
}

.berichtVoet__foto {
	flex: none;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	object-fit: cover;
}

.berichtVoet__letter {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background-image: linear-gradient(140deg, #534680 0%, #150A3D 100%);
	color: var(--kleurWit);
	font-size: 1.25rem;
	font-weight: 800;
}

.berichtVoet__label {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.berichtVoet__naam {
	margin-block-start: 0.2rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: capitalize;
}

.berichtVoet__functie {
	color: var(--kleurPrimair);
	font-size: var(--vloeiendKlein);
	font-weight: 600;
}

.berichtVoet__expertise {
	margin-block-start: 0.4rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
	font-weight: 500;
}

.berichtVoet__bio {
	margin-block-start: 0.4rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
	line-height: 1.6;
}

.berichtVoet__meer {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.55rem;
	font-size: var(--vloeiendKlein);
	font-weight: 600;
}

.berichtVoet__meer:hover {
	text-decoration: none;
}

.berichtVoet__meer .icoon--pijl {
	transition: transform var(--duurMiddel) var(--soepel);
}

.berichtVoet__meer:hover .icoon--pijl {
	transform: translateX(3px);
}

.berichtVoet__knoppen {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 0.6rem;
}

.berichtVoet__icoon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.berichtVoet__melding {
	min-block-size: 1.4em;
	margin-block-start: 0.4rem;
	color: var(--kleurGroen);
	font-size: var(--vloeiendKlein);
	font-weight: 600;
}

/* ==========================================================================
   6. De producten: één plank met wat bij het artikel past
   ========================================================================== */

.berichtProducten {
	padding-block-end: clamp(3rem, 6vw, 5rem);
	background-color: var(--kleurPapier);
}

/* Eén paneel in het lila van de nacht, maar dan bij daglicht: --kleurMist. */
.berichtProducten__paneel {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(1.5rem, 3.5vw, 3rem);
	border-radius: calc(var(--brRondingGroot) + 6px);
	background-color: var(--kleurMist);
}

.berichtProducten__kop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.berichtProducten__titel {
	font-size: var(--vloeiendGroot);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	text-transform: uppercase;
}

.berichtProducten__verder {
	margin-block-start: 1.5rem;
}

.berichtProducten__lijst {
	display: grid;
	gap: 0.75rem;
}

.productTegel__link {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
	gap: 1.1rem;
	align-items: center;
	padding: 0.65rem 1.25rem 0.65rem 0.65rem;
	border-radius: 20px;
	background-color: var(--kleurWit);
	box-shadow: 0 1px 2px rgb(40 27 87 / 6%);
	color: var(--kleurTekst);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.productTegel__link:hover {
	transform: translateX(4px);
	box-shadow: inset 0 0 0 1px rgb(83 70 128 / 30%), 0 18px 36px -22px rgb(40 27 87 / 40%);
	text-decoration: none;
}

.productTegel__beeld {
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 14px;
	background-color: var(--kleurMist);
}

.productTegel__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.productTegel__tekst {
	display: grid;
	gap: 0.25rem;
}

.productTegel__naam {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.productTegel__prijs {
	font-size: 0.9375rem;
}

.productTegel__pijl {
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	transition: background-color var(--duurMiddel) var(--soepel), color var(--duurMiddel) var(--soepel);
}

.productTegel__link:hover .productTegel__pijl {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

/* ==========================================================================
   7. De ochtend
   ========================================================================== */

.berichtOchtend {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background-image: linear-gradient(180deg, var(--kleurPapier) 0%, var(--brOchtendLicht) 40%, #FFE3C8 100%);
}

/* De zon die opkomt achter "Goedemorgen". */
.berichtOchtend__zon {
	position: absolute;
	inset-block-start: clamp(0.5rem, 2vw, 1.5rem);
	inset-inline-start: 50%;
	z-index: -1;
	inline-size: clamp(16rem, 34vw, 26rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(circle, rgb(255 188 125 / 70%) 0%, rgb(255 188 125 / 25%) 42%, rgb(255 188 125 / 0%) 70%);
	transform: translateX(-50%);
}

.berichtOchtend__kop {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-end: clamp(2rem, 4vw, 3.25rem);
	text-align: center;
}

.berichtOchtend__tijd {
	color: var(--brOchtendDiep);
	font-size: 0.9375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.berichtOchtend__titel {
	margin-block-start: 0.3rem;
	color: var(--kleurNacht2);
	font-size: var(--vloeiendReus);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 0.95;
	text-transform: uppercase;
}

.berichtOchtend__geschreven {
	margin-block-start: 0.35rem;
	color: var(--brOchtendDiep);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 600;
	line-height: 1.1;
	transform: rotate(-2deg);
}

.berichtOchtend__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ochtendKaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	background-color: var(--kleurWit);
	box-shadow: 0 24px 48px -28px rgb(162 85 27 / 35%);
	transition: transform var(--duurMiddel) var(--soepel), box-shadow var(--duurMiddel) var(--soepel);
}

.ochtendKaart:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 56px -26px rgb(162 85 27 / 45%);
}

.ochtendKaart__beeld {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--brOchtendLicht);
}

.ochtendKaart__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 600ms var(--soepel);
}

.ochtendKaart:hover .ochtendKaart__foto {
	transform: scale(1.04);
}

.ochtendKaart__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.2rem 1.35rem 1.5rem;
}

.ochtendKaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.8rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ochtendKaart__categorie {
	color: var(--brOchtendDiep);
}

.ochtendKaart__titel {
	font-size: 1.125rem;
	line-height: 1.32;
}

.ochtendKaart__link {
	color: var(--kleurTekst);
}

.ochtendKaart__link:hover {
	text-decoration: none;
}

/* De hele kaart is de link; de link zelf blijft de titel, voor schermlezers. */
.ochtendKaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ochtendKaart__link:focus-visible {
	outline: none;
}

.ochtendKaart__link:focus-visible::after {
	outline: 2px solid var(--kleurPrimair);
	outline-offset: -2px;
}

.berichtOchtend__alles {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

/* ==========================================================================
   8. Smaller en op de telefoon
   ========================================================================== */

/*
 * Een smal venster op de desktopweergave: de nachtlijn heeft dan naast de
 * tekst geen plek meer en komt erboven te staan, als gewone inhoudsopgave.
 */
@media (max-width: 1024px) {
	.berichtLichaam__raster {
		grid-template-columns: minmax(0, var(--brTekstBreedte));
	}

	.nachtlijn__plak {
		position: static;
	}

	.berichtProducten__paneel {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.bericht {
		--brOnderKop: 5.5rem;
	}

	.berichtKop__maan {
		inset-block-start: 1rem;
		inset-inline-end: 1rem;
		inline-size: 3.5rem;
		box-shadow: inset -0.7rem 0.3rem 0 0 #FFEBD6;
	}

	/* Op een smal scherm breekt de regel af, en dan staat een stip aan het
	   begin van een regel. Hier geen stippen, maar wat meer lucht. */
	.berichtKop__meta {
		gap: 0.6rem 1.1rem;
	}

	.berichtKop__meta > li + li::before {
		display: none;
	}

	.berichtKop__beeld {
		aspect-ratio: 4 / 3;
	}

	.berichtKop__briefje {
		inset-block-start: -1.1rem;
		inset-inline-end: 1.25rem;
	}

	.berichtVoet {
		flex-direction: column;
	}

	.productTegel__link {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		gap: 0.85rem;
		padding-inline-end: 0.85rem;
	}

	.berichtOchtend__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Op een telefoon een liggende kaart: foto links, titel rechts. */
	.ochtendKaart {
		flex-direction: row;
		border-radius: 18px;
	}

	.ochtendKaart__beeld {
		flex: none;
		inline-size: 7.5rem;
		aspect-ratio: auto;
	}

	.ochtendKaart__tekst {
		justify-content: center;
		padding: 1rem 1.1rem;
	}

	.ochtendKaart__titel {
		font-size: 1rem;
	}
}

/* De inhoudsopgave boven de tekst, alleen in de mobiele weergave. */

.inhoudKlap {
	margin-block-end: 2rem;
	border-radius: 18px;
	background-color: var(--kleurWit);
	box-shadow: inset 0 0 0 1px var(--kleurLijn);
}

.inhoudKlap__knop {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	cursor: pointer;
	list-style: none;
}

.inhoudKlap__icoon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	color: var(--kleurPrimair);
}

.inhoudKlap__label {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-weight: 700;
	line-height: 1.3;
}

.inhoudKlap__aantal {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 500;
}

.inhoudKlap__pijl {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	transition: transform var(--duurMiddel) var(--soepel);
}

.inhoudKlap[open] .inhoudKlap__pijl {
	transform: rotate(180deg);
}

.inhoudKlap__lijst {
	display: grid;
	gap: 0.15rem;
	padding: 0 1.15rem 1rem 3.15rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.inhoudKlap__lijst a {
	display: block;
	padding-block: 0.45rem;
	color: var(--kleurTekst);
}

/* De leesbalk: de nacht als dunne streep bovenin, van indigo naar ochtend. */
.leesbalk {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 70;
	block-size: 3px;
	background-image: linear-gradient(90deg, #2A1A63 0%, #534680 55%, #FFBC7D 100%);
	transform: scaleX(var(--voortgang, 0));
	transform-origin: left center;
}

/* ==========================================================================
   Minder beweging en papier
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.berichtKop__sterren {
		animation: none;
	}

	.ochtendKaart,
	.ochtendKaart__foto,
	.productTegel__link {
		transition: none;
	}
}

@media print {
	.berichtKop {
		background: none;
		color: var(--kleurTekst);
	}

	.berichtKop__nacht,
	.berichtKop__briefje,
	.berichtKop__ochtend,
	.nachtlijn,
	.leesbalk,
	.berichtVoet__delen,
	.berichtProducten,
	.berichtOchtend {
		display: none;
	}

	.berichtLichaam__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}