/*
 * blog.css — het overzicht van het blog en elk onderwerp (baserules regel 8).
 *
 * Eén bestand voor allebei: ze gebruiken hetzelfde sjabloon, blog.php (zie
 * inc/dekbedgekteBlog.php).
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * Nachtlectuur. De kop is dezelfde nacht als op de voorpagina en in de winkel,
 * maar opgemaakt als de voorkant van een tijdschrift: een grote titel, en
 * rechts een inhoudsopgave met genummerde onderwerpen en een stippellijn naar
 * het aantal artikelen. Daaronder loopt de pagina af van groot naar klein —
 * één artikel uitgelicht, twee ernaast, en de rest als leeslijst met een grote
 * datum per rij. Geen raster met twaalf gelijke kaarten: dat is wat elk blog
 * doet, en het laat je zigzaggen in plaats van lezen.
 *
 * ── Wat er waar staat ─────────────────────────────────────────────────────
 *
 *   1. de tokens
 *   2. de kop: de nacht, de titel, de inhoudsopgave
 *   3. wat alle artikelen delen: het label, de leestijd, de sectiekop
 *   4. het uitgelichte artikel
 *   5. net verschenen
 *   6. de leeslijst
 *   7. de paginering
 *   8. van lezen naar liggen
 *   9. smallere schermen
 */

/* ==========================================================================
   1. De tokens
   ========================================================================== */

.blog {
	--omhulselBreedte: 1200px;
	--blRonding: 26px;
	--blSectie: clamp(3rem, 6vw, 5rem);

	background-color: var(--kleurPapier);
}

@media (max-width: 1024px) {
	.blog {
		--omhulselBreedte: 748px;
	}
}

@media (max-width: 767px) {
	.blog {
		--omhulselBreedte: none;
	}
}

/* ==========================================================================
   2. De kop: de nacht, de titel, de inhoudsopgave
   ========================================================================== */

.blKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	/* Onderaan ruimte voor het uitgelichte artikel, dat eroverheen valt. */
	padding-block: clamp(0.5rem, 1.5vw, 1.25rem) clamp(7rem, 12vw, 10rem);
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(110% 90% at 80% 0%, rgb(83 70 128 / 55%) 0%, rgb(83 70 128 / 0%) 60%),
		linear-gradient(170deg, #07021B 0%, #150A3D 55%, #2A1A63 100%);
	color: var(--kleurWit);
}

.blKop--kort {
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

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

.blKop__maan {
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -10%;
	inline-size: clamp(260px, 36vw, 520px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at 34% 32%,
		rgb(255 255 255 / 18%) 0%,
		rgb(201 195 220 / 9%) 44%,
		rgb(201 195 220 / 0%) 70%
	);
}

.blKop__gloed {
	position: absolute;
	inset-block-end: -40%;
	inset-inline-start: 0;
	inline-size: clamp(320px, 54vw, 760px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(
		ellipse at center,
		rgb(255 188 125 / 16%) 0%,
		rgb(255 188 125 / 0%) 68%
	);
}

.blKop__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

/* Het kruimelpad op een donkere ondergrond, net als in de kop van de winkel. */
.blKop .esseoBreadcrumbs {
	padding-block: var(--ruimte3) var(--ruimte6);
	color: rgb(255 255 255 / 52%);
	font-size: var(--vloeiendLabel);
}

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

.blKop .esseoBreadcrumbs li {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
}

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

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

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

.blKop__titel {
	font-size: clamp(3rem, 1.4rem + 6vw, 6.5rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.92;
	text-transform: uppercase;
}

.blKop__geschreven {
	display: block;
	margin-block-start: 0.35rem;
	color: var(--kleurDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.5rem, 0.9rem + 2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.1;
	text-transform: none;
}

.blKop__intro {
	max-inline-size: 36rem;
	margin-block-start: 1.35rem;
	color: rgb(255 255 255 / 74%);
	font-size: var(--vloeiendLopend);
	line-height: 1.65;
}

/*
 * Op een schrijverspagina: de functie onder de naam, en daaronder waar hij
 * verstand van heeft (als labels) en zijn profielen. Alleen wat ingevuld is.
 */
.blKop__functie {
	margin-block-start: 0.85rem;
	color: var(--kleurDageraad);
	font-size: var(--vloeiendMidden);
	font-weight: 600;
}

.blKop__expertise {
	margin-block-start: 1.35rem;
}

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

.blKop__onderwerpen,
.blKop__profielen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.blKop__onderwerp {
	padding: 0.35rem 0.8rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 999px;
	color: var(--kleurWit);
	font-size: var(--vloeiendKlein);
	font-weight: 500;
}

.blKop__profielen {
	margin-block-start: 1rem;
}

.blKop__profiel {
	color: var(--kleurWit);
	font-size: var(--vloeiendKlein);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.blKop__profiel:hover {
	color: var(--kleurDageraad);
}

/*
 * De inhoudsopgave: de onderwerpen genummerd, met een stippellijn naar het
 * aantal artikelen — zoals voorin een tijdschrift. Het vak is een ruitje in de
 * nacht, net iets lichter dan wat erachter ligt.
 */
.blOnderwerpen {
	padding: clamp(1.1rem, 2vw, 1.5rem);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--blRonding);
	background-color: rgb(255 255 255 / 4%);
}

.blOnderwerpen__kop {
	margin-block-end: 0.6rem;
	padding-inline: 0.6rem;
	color: var(--kleurLilaLicht);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.blOnderwerpen__lijst {
	display: grid;
}

.blOnderwerp,
.blOnderwerpen__alles {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.65rem 0.6rem;
	border-radius: 14px;
	color: var(--kleurWit);
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.blOnderwerp:hover,
.blOnderwerpen__alles:hover {
	background-color: rgb(255 255 255 / 7%);
	color: var(--kleurWit);
	text-decoration: none;
}

.blOnderwerp__nummer {
	color: var(--kleurDageraad);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* De naam met een stippellijn erachter, tot aan het aantal. */
.blOnderwerp__naam {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-inline-size: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.blOnderwerp__naam::after {
	content: "";
	flex: 1 1 auto;
	min-inline-size: 1rem;
	border-block-end: 1px dotted rgb(255 255 255 / 28%);
	transform: translateY(-0.25em);
}

.blOnderwerp__aantal,
.blOnderwerpen__totaal {
	color: rgb(255 255 255 / 60%);
	font-size: var(--vloeiendKlein);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.blOnderwerp.isHier,
.blOnderwerpen__alles.isHier {
	background-color: rgb(255 188 125 / 12%);
}

.blOnderwerp.isHier .blOnderwerp__naam,
.blOnderwerpen__alles.isHier {
	color: var(--kleurDageraad);
}

.blOnderwerp.isHier .blOnderwerp__naam::after {
	border-block-end-color: rgb(255 188 125 / 45%);
}

/* "Alle artikelen": onderaan, met een lijn erboven, zonder nummer. */
.blOnderwerpen__alles {
	grid-template-columns: minmax(0, 1fr) auto;
	margin-block-start: 0.5rem;
	padding-block-start: 0.85rem;
	border-block-start: 1px solid rgb(255 255 255 / 10%);
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	font-size: var(--vloeiendKlein);
	font-weight: 700;
}

/* ==========================================================================
   3. Wat alle artikelen delen
   ========================================================================== */

.blInhoud {
	padding-block-end: var(--blSectie);
}

/* Het onderwerp als label: een eigen link, boven de link van de kaart. */
.blLabel {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.blLabel:hover {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	text-decoration: none;
}

.blMeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.9rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 500;
}

.blMeta__deel {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.blMeta__icoon {
	flex: none;
	inline-size: 0.95rem;
	block-size: 0.95rem;
	color: var(--kleurLila);
}

/* De kop boven een deel van de pagina, met een haarlijn die tot de rand
   doorloopt: de rust van een tijdschriftpagina. */
.blSectieKop {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.blSectieKop::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background-color: var(--kleurLijn);
}

/* ==========================================================================
   4. Het uitgelichte artikel
   ========================================================================== */

.blUitgelicht {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	margin-block-start: calc(clamp(5rem, 9vw, 7.5rem) * -1);
	overflow: hidden;
	border-radius: calc(var(--blRonding) + 4px);
	background-color: var(--kleurWit);
	box-shadow:
		0 2px 4px rgb(21 10 61 / 4%),
		0 30px 70px rgb(21 10 61 / 14%);
}

.blUitgelicht__beeld {
	position: relative;
	min-block-size: 26rem;
	overflow: hidden;
	background-color: var(--kleurMist);
}

.blUitgelicht__foto {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--soepel);
}

.blUitgelicht:hover .blUitgelicht__foto {
	transform: scale(1.04);
}

.blUitgelicht__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.5rem, 4vw, 3.25rem);
}

.blUitgelicht__boven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
}

.blUitgelicht__nieuw {
	padding: 0.3rem 0.7rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurDageraad);
	color: var(--kleurNacht);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blUitgelicht__titel {
	font-size: clamp(1.7rem, 1.1rem + 2vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: balance;
}

.blUitgelicht__titel a {
	color: inherit;
}

.blUitgelicht__titel a:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.blUitgelicht__samenvatting {
	max-inline-size: 34rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLopend);
	line-height: 1.65;
}

.blUitgelicht__verder {
	margin-block-start: 0.5rem;
}

/* ==========================================================================
   5. Net verschenen
   ========================================================================== */

.blVerschenen {
	margin-block-start: var(--blSectie);
}

.blVerschenen__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Geen kaart met een rand eromheen maar een foto met tekst eronder, zoals in
   een tijdschrift. De hele kaart is klikbaar via de titel. */
.blKaart {
	position: relative;
	display: grid;
	gap: 1.1rem;
}

.blKaart__beeld {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--blRonding);
	background-color: var(--kleurMist);
}

.blKaart__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--soepel);
}

.blKaart:hover .blKaart__foto {
	transform: scale(1.05);
}

.blKaart__tekst {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
}

.blKaart__boven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
}

.blKaart__datum {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
}

.blKaart__titel {
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.blKaart__link {
	color: inherit;
}

.blKaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blKaart:hover .blKaart__link {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.blKaart__samenvatting {
	color: var(--kleurSecundair);
	line-height: 1.6;
}

/* ==========================================================================
   6. De leeslijst
   ========================================================================== */

.blLeeslijst {
	margin-block-start: var(--blSectie);
}

.blLeeslijst__kop {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.blLeeslijst__kop .blSectieKop {
	flex: 1 1 auto;
}

.blLeeslijst__pagina {
	flex: none;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
}

.blLeeslijst__rijen {
	margin-block-start: 0.75rem;
}

/*
 * Een rij: links de datum groot, dan de foto, dan de tekst, en rechts een pijl.
 * In rust een lijn eronder; bij het zweven komt er een wit vlak achter, alsof
 * je het artikel uit de stapel trekt.
 */
.blRij {
	border-block-end: 1px solid var(--kleurLijn);
}

.blRij__artikel {
	position: relative;
	display: grid;
	grid-template-areas: "datum beeld tekst pijl";
	grid-template-columns: 5.5rem 13rem minmax(0, 1fr) 3rem;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: center;
	margin-inline: -1rem;
	padding: clamp(1.1rem, 2vw, 1.6rem) 1rem;
	border-radius: 22px;
	transition:
		background-color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.blRij__artikel:hover,
.blRij__artikel:focus-within {
	background-color: var(--kleurWit);
	box-shadow: 0 18px 44px rgb(21 10 61 / 9%);
}

.blRij__datum {
	display: grid;
	grid-area: datum;
	justify-items: start;
	gap: 0.2rem;
	line-height: 1;
}

.blRij__dag {
	color: var(--kleurLila);
	font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.5rem);
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.05em;
	transition: color var(--duurMiddel) var(--soepel);
}

.blRij__artikel:hover .blRij__dag {
	color: var(--kleurPrimair);
}

.blRij__maand {
	color: var(--kleurSecundair);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.blRij__beeld {
	grid-area: beeld;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--kleurMist);
}

.blRij__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--soepel);
}

.blRij__artikel:hover .blRij__foto {
	transform: scale(1.06);
}

.blRij__tekst {
	display: grid;
	grid-area: tekst;
	gap: 0.5rem;
	justify-items: start;
	min-inline-size: 0;
}

.blRij__boven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
}

.blRij__titel {
	font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: balance;
}

.blRij__link {
	color: inherit;
}

/* De hele rij is klikbaar via de titel. */
.blRij__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.blRij__artikel:hover .blRij__link {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.blRij__samenvatting {
	max-inline-size: 42rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
	line-height: 1.6;
}

.blRij__pijl {
	display: grid;
	grid-area: pijl;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--kleurLijn);
	color: var(--kleurPrimair);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.blRij__artikel:hover .blRij__pijl {
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	box-shadow: 0 8px 20px rgb(40 27 87 / 24%);
	transform: translateX(3px);
}

/* ==========================================================================
   7. De paginering
   ========================================================================== */

.blog .paginering {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.blog .paginering li .page-numbers {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.9rem;
	border: 0;
	border-radius: var(--rondingPil);
	background-color: var(--kleurWit);
	box-shadow: inset 0 0 0 1.5px var(--kleurLijn);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
}

.blog .paginering li a.page-numbers:hover {
	box-shadow: inset 0 0 0 1.5px var(--kleurPrimair);
}

.blog .paginering li .current {
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	box-shadow: 0 8px 20px rgb(40 27 87 / 24%);
}

.blog .paginering li .dots {
	background-color: transparent;
	box-shadow: none;
}

/* ==========================================================================
   8. Van lezen naar liggen
   ========================================================================== */

.blSlot {
	padding-block-end: var(--blSectie);
}

.blSlot__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) auto;
	gap: 1.5rem clamp(2rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: calc(var(--blRonding) + 4px);
	background-color: var(--kleurNacht2);
	background-image:
		radial-gradient(60% 120% at 100% 0%, rgb(255 188 125 / 16%) 0%, rgb(255 188 125 / 0%) 60%),
		radial-gradient(120% 100% at 0% 100%, rgb(83 70 128 / 60%) 0%, rgb(83 70 128 / 0%) 62%);
	color: var(--kleurWit);
}

.blSlot__titel {
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.blSlot__intro {
	max-inline-size: 36rem;
	margin-block-start: 0.85rem;
	color: rgb(255 255 255 / 74%);
	line-height: 1.65;
}

.blSlot__knoppen {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.blSlot__icoon {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
	.blUitgelicht__foto,
	.blKaart__foto,
	.blRij__foto {
		transition: none;
	}
}

/* ==========================================================================
   9. Smallere schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.blKop__inhoud {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

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

	.blUitgelicht__beeld {
		min-block-size: 0;
		aspect-ratio: 16 / 10;
	}

	.blRij__artikel {
		grid-template-columns: 4.5rem 10rem minmax(0, 1fr) 3rem;
	}

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

	.blSlot__knoppen {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.blKop {
		padding-block-end: clamp(5.5rem, 18vw, 7rem);
	}

	.blKop--kort {
		padding-block-end: 2.5rem;
	}

	.blKop .esseoBreadcrumbs {
		padding-block-end: var(--ruimte4);
	}

	.blUitgelicht {
		margin-block-start: -4rem;
		border-radius: var(--blRonding);
	}

	.blUitgelicht__tekst {
		padding: 1.35rem;
	}

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

	/*
	 * Een rij op een telefoon: de datum klein bovenaan, naast de pijl, en
	 * daaronder de foto naast de tekst. De datum groot links zou op 328 px de
	 * helft van de breedte kosten.
	 */
	.blRij__artikel {
		grid-template-areas:
			"datum pijl"
			"beeld tekst";
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 0.75rem 1rem;
		align-items: start;
		margin-inline: -0.5rem;
		padding: 1.1rem 0.5rem;
	}

	.blRij__datum {
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
	}

	.blRij__dag {
		font-size: 1.35rem;
		letter-spacing: -0.03em;
	}

	.blRij__pijl {
		justify-self: end;
		inline-size: 2.25rem;
		block-size: 2.25rem;
	}

	.blRij__beeld {
		aspect-ratio: 1;
		border-radius: 14px;
	}

	.blRij__titel {
		font-size: 1.05rem;
	}

	.blSlot__knoppen .knopPil {
		flex: 1 1 100%;
	}
}

/* De foto van de schrijver, op zijn eigen pagina boven zijn naam. */
.blKop__foto {
	inline-size: 6rem;
	block-size: 6rem;
	margin-block-end: var(--ruimte4);
	border: 3px solid rgb(255 255 255 / 85%);
	border-radius: 50%;
	object-fit: cover;
}