/*
Theme Name: MichelMones
Theme URI: https://michelmones.nl/
Author: Michel Mones
Author URI: https://michelmones.nl/
Description: Maatwerk hybrid theme voor michelmones.nl. Klassieke PHP-templates met theme.json voor designtokens en editor-styling.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: michelmones
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, translation-ready, blog, portfolio
*/

/* ============================================================================
   Inhoud

   1.  Tokens: vaste kleuren, vorm, kolommen, hero, type, spacing
   2.  Thema's: licht en donker
   3.  Reset en basis
   4.  Kolomklassen
   5.  Type-rollen
   6.  Bouwstenen: knop, chip, streepje, media
   7.  Header
   8.  Blog-dropdown
   9.  Thema-schakelaar
   10. Hero
   11. Kaart en lijstregel
   12. Paginering
   13. Footer
   14. Berichttekst: full-bleed leesgrid
   15. Fotogrid
   16. Lightbox
   17. Tags, delen en waarderen
   18. Auteursblok
   19. Reacties en formuliervelden
   20. Nieuwsbrief
   21. Responsive
   22. Kleine telefoons
   ========================================================================= */


/* 1. Tokens ================================================================ */

:root {
	/* Vaste kleuren, gelijk in beide thema's */
	--mint:       #1DE9B6; /* alleen als vlak, lijn of vulling. Nooit als tekst op licht */
	--mint-deep:  #15D8A7; /* mint bij hover, tekst erop houdt 9:1 */
	--on-mint:    #07231C;
	--img-bg:     #E7DFD3;
	--panel-dark: #1B1712;

	/* Donker glas, in beide thema's donker */
	--glass:        rgba(28, 26, 19, .66);
	--glass-hair:   rgba(255, 255, 255, .14);
	--glass-ink:    #FFFFFF;
	--glass-mut:    rgba(255, 255, 255, .45);
	--glass-hover:  rgba(255, 255, 255, .08);

	/* Vorm */
	--r:    16px; /* 4px = scherp, 16px = rond, 32px = royaal */
	--r-sm: 8px;
	--pill: 999px;

	/* Kolombreedtes */
	--gutter:        max(48px, calc(50vw - 452px));  /* 904px inhoud */
	--gutter-narrow: max(200px, calc(50vw - 300px)); /* 600px leeskolom */
	--gutter-mid:    max(120px, calc(50vw - 380px)); /* 760px */
	--gutter-wide:   max(48px, calc(50vw - 720px));  /* 1440px */

	/*
	 * Hero. De verhouding staat als min-height en niet als aspect-ratio: een
	 * grid-container met aspect-ratio heeft een vaste hoogte, en dan loopt een lange
	 * titel eruit in plaats van dat de hero meegroeit. 66.67vw = 3/2, 56.25vw = 16/9,
	 * 42.86vw = 21/9.
	 */
	--hero-h: max(560px, 66.67vw);

	/* Hoogte van de header: logo 48px plus 2 x 28px padding. De hero gebruikt dit om
	   z'n tekst eronder te houden, dus deze waarde staat op één plek. */
	--header-h: 104px;

	/* Type. Golos Text heeft 400 t/m 900, dus geen Light: waar het ontwerp 300
	   voorschreef gebruiken we 400. IBM Plex Serif laden we in 400 plus cursief. */
	--sans:  'Golos Text', Helvetica, Arial, sans-serif;
	--serif: 'IBM Plex Serif', Georgia, serif;

	/* Spacing, 4/8-schaal */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;  --s6: 32px;
	--s7: 40px; --s8: 48px; --s9: 56px; --s10: 64px; --s11: 88px; --s12: 92px;
}

/*
 * Op een telefoon meegroeien met de schermhoogte, in svh en niet vh: die laatste rekent
 * met het scherm zonder de balken van de browser, waardoor de hero bij het scrollen
 * verspringt. Achter @supports, zodat oudere browsers de vaste 460px houden.
 */
@supports (height: 1svh) {
	@media (max-width: 767px) { :root { --hero-h: max(560px, 72svh) } }
}

@media (min-width: 768px)  { :root { --hero-h: max(440px, 56.25vw) } }
@media (min-width: 1536px) { :root { --hero-h: max(560px, 42.86vw) } }


/* 2. Thema's =============================================================== */

:root,
[data-theme="light"] {
	--pg:    #FAF9F6;
	--pg2:   #F1F0EB;
	--ink:   #22211D;
	--ink2:  #5D5A54;
	--mut:   #726F68;
	/*
	 * Aparte kleur voor lange leesteksten. --ink2 haalt 6,5:1 en dat is genoeg voor
	 * losse regels, maar niet voor een heel artikel; deze zit op 8,7:1 en dus op AAA,
	 * gelijk aan wat het donkere thema al deed. Bewust niet --ink2 zelf aanpassen: die
	 * lichtere grijs is op kaarten en in samenvattingen juist bedoeld.
	 */
	--read:  #4A4842;
	--hair:  #E5E3DC;
	--ghost: #EAE8E1;
	--accT:  #05563E; /* accent voor tekst, 8,3:1 op --pg. Was #0A7A5E met 5,0:1 */

	/*
	 * Knopvlak. Mint tegen een lichte pagina haalt maar 1,5:1, dus de pil is dan
	 * nauwelijks een vorm en dat botst met WCAG 1.4.11 (3:1 voor de begrenzing van een
	 * bedienbaar element). In de lichte modus daarom een donkergroen vlak met witte
	 * tekst; in de donkere modus blijft het mint, want daar haalt dat 11,6:1.
	 */
	--btn:       #066045;
	--btn-hover: #05543C;
	--on-btn:    #FFFFFF;
	--btn-glow:  rgba(6, 96, 69, .45);
	--sh:    0 32px 66px -26px rgba(35, 32, 25, .34), 0 8px 18px -12px rgba(35, 32, 25, .12);
	--bar:   rgba(250, 249, 246, .56);
	--bar-solid: #FAF9F6; /* fallback zonder backdrop-filter */
	--hero-mask: none;
	--logo-filter: invert(1);
}

[data-theme="dark"] {
	--pg:    #17150F;
	--pg2:   #221F17;
	--ink:   #F4F1E9;
	--ink2:  #B3AFA2;
	--mut:   #8A867B;
	--read:  #B3AFA2; /* haalt hier al 8,3:1 */
	--hair:  rgba(240, 235, 220, .13);
	--ghost: rgba(240, 235, 220, .08);
	--accT:  #1DE9B6;
	--btn:       #1DE9B6; /* mint haalt hier 11,6:1 tegen de pagina */
	--btn-hover: #15D8A7;
	--on-btn:    #07231C;
	--btn-glow:  rgba(29, 233, 182, .6);
	--sh:    0 32px 66px -26px rgba(0, 0, 0, .78), 0 8px 18px -12px rgba(0, 0, 0, .42);
	--bar:   rgba(23, 21, 15, .56);
	--bar-solid: #17150F;
	--hero-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - 88px),
	             rgba(0, 0, 0, .55) calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
	--logo-filter: none;
}


/* 3. Reset en basis ======================================================== */

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

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

body {
	margin: 0;
	background: var(--pg);
	color: var(--ink);
	font: 400 16px/1.6 var(--serif);
	font-variant-numeric: oldstyle-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0 }
ul, ol { padding: 0 }

a { color: var(--accT); text-decoration: none; transition: opacity .18s ease, color .18s ease }
a:hover { opacity: .82 }

/*
 * Ook de input-varianten meenemen: die krijgen van de browser anders een 3D-rand
 * (border: 2px outset) en op iOS een eigen vorm met verloop.
 *
 * In :where() gezet, want dat heeft specificiteit nul. Zonder die haakjes weegt
 * input[type="submit"] zwaarder dan .mm-btn en overschrijft de reset juist de
 * knopstijl die we eroverheen willen leggen.
 */
:where(button),
:where(input[type="submit"]),
:where(input[type="button"]),
:where(input[type="reset"]) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

input, textarea, select { font: inherit; color: inherit }

:focus-visible {
	outline: 2px solid var(--accT);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-inline-start: var(--s4);
	inset-block-start: var(--s4);
	z-index: 100;
	clip-path: none;
	width: auto; height: auto;
	padding: var(--s3) var(--s4);
	background: var(--pg);
	color: var(--ink);
	border-radius: var(--r-sm);
	box-shadow: var(--sh);
}

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


/* 4. Kolomklassen ========================================================== */

.mm-wrap         { padding-inline: var(--gutter) }
.mm-wrap--narrow { padding-inline: var(--gutter-narrow) }
.mm-wrap--mid    { padding-inline: var(--gutter-mid) }
.mm-wrap--wide   { padding-inline: var(--gutter-wide) }
.mm-bleed        { max-width: 1440px; margin-inline: auto }


/* 5. Type-rollen =========================================================== */

.t-hero    { font: 700 56px/1.08 var(--sans); letter-spacing: -.024em; color: #fff; text-wrap: pretty }
.t-h1      { font: 700 40px/1.14 var(--sans); letter-spacing: -.02em;  color: var(--ink); text-wrap: pretty }
.t-lead-xl { font: 700 32px/1.2  var(--sans); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty }
.t-h2      { font: 600 24px/1    var(--sans); color: var(--ink) }
.t-h3      { font: 600 20px/1.35 var(--sans); color: var(--ink); text-wrap: pretty }
.t-card    { font: 600 18px/1.34 var(--sans); color: var(--ink); text-wrap: pretty }
.t-row     { font: 500 16px/1.35 var(--sans); color: var(--ink); text-wrap: pretty }
/* 13px is de ondergrens die we voor deze site aanhouden, ook al stond er 12 in het ontwerp */
.t-kicker  { font: 400 13px/1    var(--sans); letter-spacing: .01em; color: var(--mut) }
.t-lead    { font: 400 24px/1.62 var(--serif); color: var(--ink); text-wrap: pretty }
.t-body    { font: 400 18px/1.72 var(--serif); color: var(--ink2) }
.t-intro   { font: 400 18px/1.6  var(--serif); color: var(--ink2); text-wrap: pretty }
.t-text    { font: 400 16px/1.6  var(--serif); color: var(--ink2) }
.t-quote   { font: 400 28px/1.45 var(--serif); font-style: italic; color: var(--ink); text-wrap: pretty }
.t-meta    { font: 400 14px/1    var(--serif); color: var(--mut) }
.t-stat    { font: 600 32px/1    var(--sans); letter-spacing: -.02em; color: var(--accT) }
.t-year    { font: 600 40px/.8   var(--sans); letter-spacing: -.04em; color: var(--ghost) }

.t-kicker--acc { color: var(--accT) }


/* 6. Bouwstenen ============================================================ */

/*
 * De radius in rust is bewust de helft van de hoogte en niet --pill (999px). Optisch
 * hetzelfde, maar wel animeerbaar: de browser klemt 999px bij het tekenen af op de
 * helft van de hoogte, terwijl de animatie met de letterlijke 999 rekent. Van 999 naar
 * 8 zie je dan 97% van de tijd niets gebeuren en daarna een sprong.
 */
.mm-btn {
	--btn-h: 48px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	/*
	 * Een vaste hoogte en geen verticale padding: dan is de gerenderde hoogte gelijk aan
	 * --btn-h en klopt de radius van de helft altijd. Met min-height plus padding werd de
	 * knop 48px terwijl de radius uit een andere waarde kwam, en dan is hij niet rond.
	 */
	height: var(--btn-h);
	padding: 0 var(--s6);
	border: 0;
	border-radius: calc(var(--btn-h) / 2);
	background: var(--btn);
	color: var(--on-btn);
	font: 500 16px/1 var(--sans);
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-radius .18s ease;
}

/*
 * Bij hover een kleine lift met een mint-getinte gloed, en de mint zelf iets dieper.
 * Bewust geen opacity: dat maakt de knop bleek in plaats van actief, en over een foto
 * in de hero zou de achtergrond erdoorheen schijnen. De reduced-motion-regel bovenaan
 * zet de beweging uit voor wie daar last van heeft, de kleurwissel blijft.
 */
.mm-btn:hover {
	background: var(--btn-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -10px var(--btn-glow);
	/* Van pil naar bijna vierkant: kleine grap die de knop even vastpakt */
	border-radius: var(--r-sm);
	opacity: 1;
}
.mm-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Secundaire actie: geen vlak, dus ook geen hoogte, radius of achtergrond van de basisknop */
.mm-btn--ghost {
	height: auto;
	padding: 0 0 var(--s1);
	border-radius: 0;
	background: none;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	transition: border-color .18s ease;
}
/* De secundaire actie is tekst, dus geen lift en geen vorm: alleen de streep wordt mint */
.mm-btn--ghost:hover {
	background: none;
	transform: none;
	box-shadow: none;
	border-radius: 0;
	border-bottom-color: var(--mint);
}

.mm-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	white-space: nowrap;
	padding: var(--s2) var(--s4);
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	background: transparent;
	color: var(--ink2);
	font: 400 14px/1 var(--sans);
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.mm-chip:hover { border-color: var(--mint); opacity: 1 }

/*
 * De actieve chip gebruikt de knopkleur en niet de mint.
 *
 * Mint heeft ongeveer dezelfde lichtheid als de pagina: 1,49:1. Je ziet het als kleur, maar
 * niet als contrast, en dus valt het weg zodra iemand minder scherp ziet of in grijstinten
 * kijkt. Voor iets dat aanwijst welke keuze aan staat vraagt WCAG 1.4.11 3:1. De knopkleur
 * haalt 7,21:1 en de tokens draaien met het thema mee, dus op donker blijft het mint, want
 * daar haalt mint 11,6:1.
 */
.mm-chip[aria-current="true"],
.mm-chip[aria-current="page"],
.mm-chip.is-on {
	background: var(--btn);
	border-color: var(--btn);
	color: var(--on-btn);
}

/* Het mint streepje boven een kopje */
.mm-rule {
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--mint);
	vertical-align: middle;
}

.mm-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s3);
}

.mm-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--img-bg);
	box-shadow: var(--sh);
}
.mm-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}

.mm-icon { display: inline-block; flex: none; vertical-align: middle }

/* Hele kaart of rij klikbaar, zonder de link uit de titel te halen */
.mm-stretch { position: relative }
.mm-stretch__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}


/* 7. Header ================================================================ */

.mm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: var(--s5);
	color: var(--ink);
	background: var(--bar-solid);
	transition: background .3s ease, color .3s ease;
}

/* Op pagina's met hero start de header transparant en loopt de hero eronder door */
.mm-header--over-hero {
	margin-bottom: calc(var(--header-h) * -1);
	padding-block: 28px;
	color: #fff;
	background: transparent;
}

/*
 * Zolang de header op de foto staat is de bodem donker, en dan is mint juist het
 * contrastrijkst: 4,3 tot 9,3:1 afhankelijk van de foto, tegen 1,1 tot 1,9:1 voor het
 * donkergroen. Zodra de header dichtslaat is het omgekeerd (1,49 tegen 7,21) en valt dit
 * weg, waarna de gewone knopkleur weer geldt. Dezelfde afspraak als bij de knop in de hero.
 */
.mm-header--over-hero:not(.is-solid) {
	--btn:    var(--mint);
	--on-btn: var(--on-mint);
}

.mm-header.is-solid {
	color: var(--ink);
	background: var(--bar);
}

/*
 * Het glas van de header: één laag, en die zit op ::before en niet op de header zelf.
 *
 * Dat is geen detail. Een element met een backdrop-filter wordt de bodem waar al zijn
 * kinderen doorheen kijken. Stond deze filter op de header, dan keek het submenu naar de
 * header in plaats van naar de pagina, en dan kon dat submenu zelf geen blur hebben.
 *
 * Hier stond eerst een progressieve blur in drie lagen, van 16px bovenaan naar 4px onderaan.
 * Die stapeling was mooi bedacht maar in de praktijk niet te zien, en ze kostte wel dat
 * submenu. Eén laag van 8px doet visueel hetzelfde werk.
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mm-header.is-solid::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		-webkit-backdrop-filter: blur(8px) saturate(150%);
		backdrop-filter: blur(8px) saturate(150%);
	}
}

.mm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
}

.mm-logo { display: block; flex: none }
.mm-logo img,
.mm-logo svg {
	height: 48px;
	width: auto;
	transition: filter .3s ease;
}
.mm-header.is-solid .mm-logo img,
.mm-header.is-solid .mm-logo svg { filter: var(--logo-filter) }

.mm-nav { display: flex; align-items: center; gap: var(--s5) }

/*
 * Op de desktop bestaat dit paneel visueel niet: display: contents haalt de div uit de
 * indeling, dus de lijst en de themaschakelaar liggen gewoon in .mm-nav. Onder 768px
 * wordt hetzelfde element het uitschuifpaneel.
 */
.mm-nav__panel { display: contents }

.mm-menu-toggle { display: none }

/*
 * Hamburger die naar een kruisje draait. Drie balkjes in plaats van een icoon, want
 * losse elementen kun je animeren. De stand hangt aan aria-expanded, dus er is geen
 * extra klasse nodig en de opmaak kan nooit uit de pas lopen met de toegankelijkheid.
 */
.mm-menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}
.mm-menu-toggle__bars span {
	position: absolute;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.mm-menu-toggle__bars span:nth-child(1) { top: 0 }
.mm-menu-toggle__bars span:nth-child(2) { top: 7px }
.mm-menu-toggle__bars span:nth-child(3) { top: 14px }

.mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle__bars span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.4);
}
.mm-menu-toggle[aria-expanded="true"] .mm-menu-toggle__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
.mm-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s5);
	list-style: none;
}
.mm-nav__link {
	color: currentColor;
	font: 400 16px/1 var(--sans);
	opacity: .8;
	transition: opacity .18s ease;
}
.mm-nav__link:hover,
.mm-nav__item.is-current > .mm-nav__link,
.mm-nav__link[aria-current] { opacity: .95 }


/* 7b. Leesvoortgang ======================================================== */

/*
 * Streepje langs de onderrand van de header. Alleen op een bericht, en het meet over
 * [data-mm-read]: de tekst en de foto's, niet de reacties. We animeren met transform en
 * niet met width, want dat laatste dwingt de browser tot herberekenen bij elke scrollstap.
 */
.mm-progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
}
.mm-progress[hidden] { display: none }

.mm-progress__bar {
	height: 100%;
	background: var(--mint);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}


/* 8. Blog-dropdown ========================================================= */

.mm-drop { position: relative }

.mm-drop__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	color: currentColor;
	font: 400 16px/1 var(--sans);
	opacity: .8;
}
.mm-drop__toggle:hover,
.mm-drop.is-open .mm-drop__toggle { opacity: .95 }
.mm-drop__toggle .mm-icon { transition: transform .18s ease }
.mm-drop.is-open .mm-drop__toggle .mm-icon { transform: rotate(180deg) }

.mm-drop__panel {
	position: absolute;
	top: calc(100% + var(--s3));
	inset-inline-end: 0;
	z-index: 50;
	width: 248px;
	padding: 6px;
	/* Loopt niet van het scherm af als er categorieën bijkomen */
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/*
	 * Doorzichtig glas met een echte blur. Dat werkt alleen omdat het glas van de header op
	 * een pseudo-element zit en niet op de header zelf: anders was de header de bodem waar
	 * dit paneel doorheen kijkt en bleef de pagina eronder scherp.
	 */
	background: var(--glass);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid var(--glass-hair);
	border-radius: var(--r);
	box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
	list-style: none;
	display: none;
}
.mm-drop.is-open .mm-drop__panel { display: block }

.mm-drop__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	padding: 7px var(--s3);
	border-radius: min(var(--r), 8px);
	color: var(--glass-ink);
	font: 400 14px/1.3 var(--sans);
	transition: background .15s ease;
}
.mm-drop__row:hover { background: var(--glass-hover); opacity: 1 }
.mm-drop__row.is-empty { color: rgba(255, 255, 255, .4) }
.mm-drop__count { font: 400 13px/1 var(--serif); color: var(--glass-mut) }
.mm-drop__sep { height: 1px; margin: 5px var(--s3); background: var(--glass-hair) }


/* 9. Thema-schakelaar ====================================================== */

.mm-theme {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	height: 32px;
	padding: 3px;
	border: 1px solid var(--hair);
	border-radius: var(--pill);
}
.mm-header:not(.is-solid).mm-header--over-hero .mm-theme { border-color: rgba(255, 255, 255, .28) }

.mm-theme__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--pill);
	color: currentColor;
	opacity: .8;
	transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.mm-theme__btn:hover { opacity: 1 }
/* Zelfde reden als bij de chips: dit wijst aan welke stand aan staat. */
.mm-theme__btn[aria-checked="true"] {
	background: var(--btn);
	color: var(--on-btn);
	opacity: 1;
}


/* 10. Hero ================================================================= */

/*
 * De tekst staat bewust in de normale flow, niet absoluut. Een lange titel maakt de
 * hero dan hoger in plaats van dat hij onder de header uit loopt.
 */
/*
 * Onder de hero ligt altijd een donkere foto met een donkere gradient, ook in de lichte
 * modus. Daarom gelden hier de donkere knopwaarden: het donkergroene vlak zou op zo'n
 * foto wegvallen, mint haalt er 11,6:1.
 */
.mm-hero {
	--btn:       var(--mint);
	--btn-hover: var(--mint-deep);
	--on-btn:    var(--on-mint);
	--btn-glow:  rgba(29, 233, 182, .6);

	position: relative;
	display: grid;
	align-items: end;
	min-height: var(--hero-h);
	background: var(--panel-dark);
	-webkit-mask-image: var(--hero-mask);
	mask-image: var(--hero-mask);
}
.mm-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .78;
}
.mm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(34, 26, 14, .5), rgba(34, 26, 14, .18) 45%, rgba(30, 23, 14, .6));
}
.mm-hero__body {
	position: relative; /* boven de gradient van ::after */
	z-index: 1;
	max-width: calc(656px + var(--gutter) * 2);
	/*
	 * Bovenaan de hoogte van de header die eroverheen valt, plus lucht tot de tekst.
	 * Die lucht staat op 48px en niet op 24: bij 24 begon de tekst te dicht onder de
	 * navigatie. Onderaan de 88px uit het ontwerp.
	 */
	padding-block: calc(var(--header-h) + var(--s8)) var(--s11);
}
.mm-hero__kicker { color: var(--mint) }
.mm-hero__title { margin-top: var(--s3) }
.mm-hero__meta {
	margin-top: var(--s4);
	font: 400 16px/1.5 var(--serif);
	color: rgba(255, 255, 255, .82);
}
.mm-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--s6);
	margin-top: var(--s6);
	flex-wrap: wrap;
}

/* Onzichtbare peiler onder de hero: bepaalt wanneer de header dichtslaat */
.mm-hero-sentinel { height: 1px; margin-top: -1px }


/* 10b. Filterbalk en zoeken ================================================ */

.mm-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	padding-block: var(--s5);
}

.mm-filters__chips { min-width: 0 }

.mm-filters__list {
	display: flex;
	gap: var(--s2);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.mm-filters__list::-webkit-scrollbar { display: none }

.mm-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
}
.mm-search__icon {
	position: absolute;
	inset-inline-start: var(--s4);
	display: inline-flex;
	color: var(--mut);
	pointer-events: none;
}
.mm-search__input {
	width: 100%;
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	background: var(--pg2);
	color: var(--ink);
	appearance: none;
}
.mm-search__input::placeholder { color: var(--mut) }
.mm-search__input:focus-visible { border-color: var(--mint) }

.mm-search--pill .mm-search__input {
	height: 40px;
	width: 200px;
	padding-inline: var(--s8) var(--s4);
	font: 400 14px/1 var(--serif);
}

.mm-search--large { width: 100% }
.mm-search--large .mm-search__icon { inset-inline-start: var(--s6) }
.mm-search--large .mm-search__input {
	height: 64px;
	padding-inline: 64px var(--s6);
	font: 400 20px/1 var(--serif);
}
.mm-search__clear {
	position: absolute;
	inset-inline-end: var(--s6);
	color: var(--accT);
}


/* 10c. Uitgelicht ========================================================== */

.mm-featured {
	position: relative;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--s6);
	align-items: center;
	padding-block: var(--s5) var(--s7);
}
.mm-featured__media { aspect-ratio: 3 / 2 }
/* Bericht zonder beeld: de tekst neemt de volle breedte in plaats van halve */
.mm-featured__body:only-child { grid-column: 1 / -1 }
.mm-featured:hover .mm-featured__media img { opacity: .9 }
.mm-featured__title { margin-top: var(--s3) }
.mm-featured__sum { margin-top: var(--s4) }
.mm-featured__date { margin-top: var(--s4) }


/* 11. Kaart en lijstregel ================================================== */

.mm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s7) var(--s6);
	list-style: none;
}

.mm-card { position: relative; display: flex; flex-direction: column }
.mm-card__media { aspect-ratio: 3 / 2 }

/*
 * Op de homepage is het beeld van een kaart 152px hoog en niet 3:2, zoals het ontwerp
 * voorschrijft: daar staan de kaarten onder een hero, en dan blijft de rij rustiger.
 * Het blogoverzicht en de gerelateerde berichten houden 3:2.
 */
.mm-grid--compact .mm-card__media {
	aspect-ratio: auto;
	height: 152px;
}
.mm-card:hover .mm-card__media img { opacity: .9 }
.mm-card__cat { margin: var(--s4) 0 var(--s2) }
.mm-card__sum { margin-top: var(--s2); line-height: 1.62 }
.mm-card__date { margin-top: var(--s3) }
.mm-card__title a { color: inherit }

.mm-rows { list-style: none }
.mm-row {
	position: relative;
	display: grid;
	align-items: center;
	gap: var(--s4);
	padding: var(--s4) var(--s2);
	border-top: 1px solid var(--hair);
	border-radius: var(--r-sm);
	transition: background .18s ease;
}
.mm-row:hover { background: var(--ghost) }

/* In de overzichten: thumbnail, titel, meta met pijl */
.mm-row--archive { grid-template-columns: 56px 1fr auto }
.mm-row--archive .mm-row__thumb { width: 56px; height: 56px }

/* In "Alles op een rij" op de homepage: datum ervoor, categorieën erachter */
.mm-row--year { grid-template-columns: 56px 64px 1fr auto }
.mm-row--year .mm-row__thumb { width: 64px; height: 40px }

.mm-row__date { font: 400 14px/1 var(--serif); color: var(--mut) }
.mm-row__thumb {
	display: block;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--img-bg);
}
.mm-row__thumb img { width: 100%; height: 100%; object-fit: cover }
.mm-row__title a { color: inherit }
.mm-row__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--s3);
	font: 400 14px/1 var(--serif);
	color: var(--mut);
	white-space: nowrap;
}
.mm-row__arrow { color: var(--mut); opacity: 0; transition: opacity .18s ease }
.mm-row:hover .mm-row__arrow { opacity: 1 }


/* 11a. Beeldweergave: mozaïek in kolommen ================================== */

.mm-tiles {
	columns: 3;
	column-gap: var(--s6);
}
.mm-tiles[hidden] { display: none }

.mm-tile {
	break-inside: avoid;
	margin-bottom: var(--s6);
}
.mm-tile__media { box-shadow: none }
.mm-tile:hover .mm-tile__media img { opacity: .9 }
.mm-tile__cat { margin: var(--s3) 0 var(--s2) }
.mm-tile__date { margin-top: var(--s2) }
.mm-tile__title a { color: inherit }


/* 11b. Archiefblok: jaarfilter, weergave, meer laden ======================= */

.mm-archive { padding-block: var(--s7) var(--s10) }

/*
 * Twee bij twee: de kop met de jaren eronder, en rechts de teller met de weergaveschakelaar
 * eronder. Elke rij centreert zijn twee cellen op elkaar, dus de schakelaar staat precies
 * midden naast de rij chips.
 *
 * De eerste kolom is minmax(0, 1fr) en niet 1fr: anders neemt hij als kleinste maat de
 * min-content van zijn inhoud, en dat is bij zestien jaartallen de hele rij chips. Dan rekt
 * het raster buiten de container en loopt de teller rechts uit beeld, in plaats van dat de
 * lijst gaat schuiven zoals bedoeld.
 */
.mm-archive__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"kop     teller"
		"jaren   weergave";
	align-items: center;
	column-gap: var(--s5);
	row-gap: var(--s4);
	margin-bottom: var(--s5);
}

/* Het jaarfilter geeft zijn twee delen aan het raster door, als losse cellen. */
.mm-archive__head .mm-years { display: contents }
.mm-archive__head .mm-years__head { grid-area: kop; margin-bottom: 0 }
.mm-archive__head .mm-years__chips { grid-area: jaren; min-width: 0 }
.mm-archive__head .mm-counter { grid-area: teller; justify-self: end }
.mm-archive__head .mm-view { grid-area: weergave; margin-bottom: 0 }

.mm-years { margin-bottom: var(--s5) }
.mm-years__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s5);
	margin-bottom: var(--s4);
}
.mm-years__list {
	display: flex;
	gap: var(--s2);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.mm-years__list::-webkit-scrollbar { display: none }

.mm-view {
	display: inline-flex;
	gap: var(--s1);
	padding: 3px;
	margin-bottom: var(--s5);
	border: 1px solid var(--hair);
	border-radius: var(--pill);
}
.mm-view[hidden] { display: none }
.mm-view__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	height: 34px;
	padding-inline: var(--s4);
	border-radius: var(--pill);
	color: var(--ink2);
	font: 400 14px/1 var(--sans);
	transition: background .18s ease, color .18s ease;
}
.mm-view__btn[aria-checked="true"] { background: var(--btn); color: var(--on-btn) }

.mm-more { margin-top: var(--s6) }
.mm-more.is-busy { opacity: .6; pointer-events: none }
.mm-more__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	width: 100%;
	height: 48px;
	border: 1px solid var(--hair);
	border-radius: 24px; /* helft van de hoogte, zie de opmerking bij .mm-btn */
	background: var(--pg2);
	color: var(--ink);
	font: 500 16px/1 var(--sans);
	transition: border-color .18s ease, background .18s ease, transform .18s ease, border-radius .18s ease;
}
.mm-more__btn:hover {
	border-color: var(--mint);
	background: var(--ghost);
	transform: translateY(-1px);
	border-radius: var(--r-sm);
	opacity: 1;
}
.mm-more__btn:active { transform: translateY(0) }
.mm-more__count { color: var(--mut) }
.mm-more__end {
	margin-top: var(--s6);
	font-style: italic;
	text-align: center;
}


/* 11c. Kruimelpad en lege staat ============================================ */

.mm-crumbs { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4) }
.mm-crumbs a { color: var(--mut) }
.mm-crumbs a:hover { color: var(--accT) }

.mm-page-head__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s5);
}

.mm-empty__hint { margin-top: var(--s5) }
.mm-empty__hint a { color: var(--accT); border-bottom: 1px solid var(--mint) }


/* 11b. Pagina- en sectiekoppen ============================================= */

.mm-page-head { padding-block: var(--s10) var(--s7) }
.mm-header.is-solid + .mm-main .mm-page-head { padding-top: var(--s8) }
.mm-page-head .t-h1 { margin-top: var(--s4) }
.mm-page-head__intro { margin-top: var(--s5); max-width: 616px }

.mm-section { padding-block: var(--s7) var(--s10) }

.mm-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s5);
	margin-bottom: var(--s6);
}


/* 12. Paginering =========================================================== */

.mm-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	margin-top: var(--s10);
}
.mm-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--s3);
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	color: var(--ink2);
	font: 400 14px/1 var(--sans);
}
.mm-pager .page-numbers.current,
.mm-pager .page-numbers:hover {
	border-color: var(--mint);
	opacity: 1;
}
.mm-pager .page-numbers.current { background: var(--btn); color: var(--on-btn) }
.mm-pager .dots { border-color: transparent }


/* 13. Footer =============================================================== */

.mm-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	flex-wrap: wrap;
	padding-block: 34px 38px;
	margin-top: var(--s12);
	border-top: 1px solid var(--hair);
}
/*
 * Eindigt de pagina met een blok dat zijn eigen vlak heeft, dan sluit de footer daar direct
 * op aan. De ruimte hierboven is bedoeld voor pagina's die met tekst eindigen; onder een
 * grijs vlak leest diezelfde ruimte als een gat. Dat zijn de nieuwsbrief op de homepage en
 * het luisterblok op Over mij.
 *
 * De algemene broer-selector en niet de directe: op pagina's met een lightbox staat die
 * tussen de main en de footer in. Zonder :has() blijft de marge staan, en dat is de oude
 * situatie, dus niets valt om.
 */
.mm-main:has(.mm-newsletter:last-child) ~ .mm-footer,
.mm-main:has(.mm-listen:last-child) ~ .mm-footer { margin-top: 0 }

.mm-footer__left { font: 400 14px/1.4 var(--serif); color: var(--mut) }
.mm-footer__right { font: 400 14px/1.4 var(--serif); color: var(--accT) }

/*
 * Hetzelfde rondje met "in" als bij het blok op de homepage en de kaart op Over mij, maar
 * kleiner: 24px past bij tekst van 14. De tekst erin blijft 13px.
 */
.mm-footer__right a {
	display: inline-flex;
	align-items: center;
	gap: var(--s3);
}
.mm-footer__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--mint);
	border-radius: var(--pill);
	font: 500 13px/1 var(--sans);
	color: var(--ink);
}
.mm-footer__right a:hover .mm-footer__mark { background: var(--mint); color: var(--on-mint) }


/* 14. Berichttekst: full-bleed leesgrid ==================================== */

/*
 * De leeskolom is 600px, maar beelden moeten eruit kunnen breken. Daarom een grid
 * met benoemde kolommen in plaats van padding: alignwide en alignfull werken dan
 * meteen, ook in 17 jaar oude content met losse img-tags en align-classes.
 */
.mm-prose {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--s5), 1fr)
		[wide-start] minmax(0, 420px)
		[content-start] min(600px, 100% - var(--s8)) [content-end]
		minmax(0, 420px) [wide-end]
		minmax(var(--s5), 1fr) [full-end];
	padding-top: var(--s9);
}

.mm-prose > * {
	grid-column: content;
	margin-block: 0 var(--s5);
	min-width: 0;
}

.mm-prose > .alignwide,
.mm-prose > .wp-block-gallery,
.mm-prose > .wp-block-embed {
	grid-column: wide;
	margin-block: var(--s7);
}

.mm-prose > .alignfull {
	grid-column: full;
	margin-block: var(--s7);
}

/*
 * Tekst. De ruimte tussen alinea's is bewust groter dan de regelafstand (32 tegen 31):
 * anders leest een alinea-einde als een kleinere sprong dan een regelovergang, en dan
 * loopt de tekst als één blok aan elkaar.
 */
.mm-prose > p {
	font: 400 18px/1.72 var(--serif);
	color: var(--read);
	margin-bottom: var(--s6);
}

.mm-prose > ul,
.mm-prose > ol,
.mm-prose > figure,
.mm-prose > blockquote { margin-bottom: var(--s6) }

/* De eerste alinea is de lead */
.mm-prose > p:first-of-type {
	font: 400 24px/1.62 var(--serif);
	color: var(--ink);
	text-wrap: pretty;
}

/*
 * Kopschaal in de leeskolom. De broodtekst is 20px serif, dus een kop van 24px valt
 * daar nauwelijks tegen op. Daarom: h2 op 32, h3 op 24, en h4 blijft op 20 maar wordt
 * schreefloos en vet, wat genoeg is om een kop te zijn zonder groter te worden.
 * Deze maten komen uit de schaal in theme.json, zodat editor en site hetzelfde tonen.
 */
.mm-prose > h2 {
	font: 700 32px/1.2 var(--sans);
	letter-spacing: -.015em;
	color: var(--ink);
	margin-block: var(--s9) var(--s4);
	text-wrap: pretty;
}

.mm-prose > h3 {
	font: 600 24px/1.3 var(--sans);
	letter-spacing: -.01em;
	color: var(--ink);
	margin-block: var(--s7) var(--s3);
	text-wrap: pretty;
}

.mm-prose > h4 {
	font: 600 20px/1.4 var(--sans);
	color: var(--ink);
	margin-block: var(--s6) var(--s2);
	text-wrap: pretty;
}

.mm-prose > h5,
.mm-prose > h6 {
	font: 600 16px/1.45 var(--sans);
	color: var(--ink);
	margin-block: var(--s5) var(--s2);
}
.mm-prose > h6 { color: var(--mut) }

/* Een kop direct na een kop hoeft niet zoveel lucht */
.mm-prose > h2 + h3,
.mm-prose > h3 + h4,
.mm-prose > h4 + h5 { margin-top: var(--s4) }

/* Inline links: tekstkleur met mint onderstreping */
.mm-prose a {
	color: var(--ink);
	border-bottom: 1px solid var(--mint);
}
.mm-prose a:hover { opacity: 1; background: var(--ghost) }

/*
 * Een link om een afbeelding heen is geen tekstlink: daar hoort geen streep en geen
 * hover-vlak onder. Komt veel voor in oude berichten, waar de afbeelding naar het
 * bestand of de bijlagepagina linkt. De :has()-regel dekt alle gevallen; de twee
 * regels erna zijn het vangnet voor browsers zonder :has().
 */
.mm-prose a:has(img),
.mm-prose a:has(picture),
.mm-prose figure > a {
	border-bottom: 0;
	background: none;
}
.mm-prose a:has(img):hover,
.mm-prose figure > a:hover { background: none }

.mm-prose > ul,
.mm-prose > ol {
	padding-inline-start: var(--s5);
	font: 400 18px/1.72 var(--serif);
	color: var(--read);
}
.mm-prose li + li { margin-top: var(--s2) }

.mm-prose > blockquote {
	border: 0;
	border-block: 1px solid var(--hair);
	padding-block: var(--s6);
	margin-block: var(--s7);
	font: 400 28px/1.45 var(--serif);
	font-style: italic;
	color: var(--ink);
	text-wrap: pretty;
}
.mm-prose > blockquote p { margin: 0 }
.mm-prose > blockquote cite,
.mm-prose > blockquote footer {
	display: block;
	margin-top: var(--s4);
	font: 400 14px/1.4 var(--serif);
	font-style: normal;
	color: var(--mut);
}

.mm-prose img { border-radius: var(--r); background: var(--img-bg) }
.mm-prose figure { margin: 0 }

/*
 * Foto's in de tekst openen in dezelfde lightbox als het fotogrid. Stond de foto al in
 * een link naar het bestand, dan laten we die met rust en veranderen we alleen de cursor:
 * die links zitten soms om een zwevende foto en dan zou display:block de tekst eromheen
 * onderuit duwen. Losse foto's krijgen van JavaScript wel een eigen link, en die mag zich
 * gedragen als de foto die erin zit.
 */
.mm-prose .mm-zoom { cursor: zoom-in }

/*
 * De nieuwe link neemt de plek van de foto over. Verder laten we hem met rust: core heeft
 * voor een link om een afbeelding al regels staan (inline-block, en width: 100% zodra het
 * blok op volle of brede breedte staat), en die willen we niet overschrijven. Zetten we
 * hier bijvoorbeeld width: fit-content, dan valt zo'n foto terug op haar eigen maat en
 * vult ze de breedte niet meer. Alleen de zetlijn zetten we goed, anders komt er onder een
 * inline-block een paar pixel witruimte vrij voor de staartletters.
 */
.mm-prose a.mm-zoom--wrap { vertical-align: bottom }

/*
 * Bij deze drie hoort de link zich wél om de foto heen te vouwen. Het zijn de classes uit
 * oude berichten, die JavaScript van de foto naar de link verhuist: staat de link op de
 * volle breedte, dan centreert de automatische marge niets en zweeft een zwevende foto in
 * haar eigen regel in plaats van naast de tekst.
 */
.mm-prose a.mm-zoom--wrap.aligncenter,
.mm-prose a.mm-zoom--wrap.alignleft,
.mm-prose a.mm-zoom--wrap.alignright {
	display: block;
	width: fit-content;
	max-width: 100%;
}

.mm-prose .mm-zoom:focus-visible {
	outline: 2px solid var(--accT);
	outline-offset: 3px;
}

/* Loopt de foto van rand tot rand, dan geen ronde hoeken. Net als bij het fotogrid. */
.mm-prose .alignfull img,
.mm-prose img.alignfull { border-radius: 0 }
.mm-prose figcaption,
.mm-prose .wp-caption-text {
	max-width: 600px;
	margin: var(--s3) auto 0;
	font: 400 16px/1.55 var(--serif);
	font-style: italic;
	color: var(--mut);
	text-align: start;
}

/*
 * Oude galerijblokken, het formaat van vóór WordPress 5.9 (dus zonder has-nested-images).
 * In berichten van 2015 tot 2021 staan ze er nog zo in.
 *
 * De rij met foto's is niet altijd hetzelfde element. Meestal zit er een
 * ul.blocks-gallery-grid in de figure, maar in de eerste versie van het blok was de
 * wp-block-gallery zelf die lijst. Alleen dat ene element mag de flexrij worden: staat er
 * onder de galerij een onderschrift voor het geheel, dan hoort dat gewone tekst onder de
 * rij te zijn en geen kolom ernaast.
 *
 * Kent een browser :has() niet, dan valt die tweede regel weg en pakt core zijn eigen
 * flex-layout op de figure. Dat rendert nog steeds goed, alleen met een spatie tussen de
 * rij en het onderschrift.
 */
.mm-prose .blocks-gallery-grid,
.mm-prose .wp-block-gallery:not(.has-nested-images):not(:has(.blocks-gallery-grid)) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Zit de rij in een figure, dan is die figure zelf gewoon een blok. Core maakt er ook een
 * flexcontainer van, met de rij en het onderschrift als twee items naast elkaar, en dat
 * hebben we hier niet nodig.
 */
.mm-prose .wp-block-gallery:not(.has-nested-images):has(.blocks-gallery-grid) {
	display: block;
	padding: 0;
	/* Geen marge hier: die komt uit het leesraster, anders valt de ruimte eromheen weg. */
}

.mm-prose .columns-1 { --mm-gal: 1 }
.mm-prose .columns-2 { --mm-gal: 2 }
.mm-prose .columns-3 { --mm-gal: 3 }
.mm-prose .columns-4 { --mm-gal: 4 }
.mm-prose .columns-5 { --mm-gal: 5 }
.mm-prose .columns-6 { --mm-gal: 6 }
.mm-prose .columns-7 { --mm-gal: 7 }
.mm-prose .columns-8 { --mm-gal: 8 }

/*
 * De losse foto's. Het uitrekken van een laatste item dat alleen op een regel staat blijft:
 * dat geeft juist een prettig ritme van kleine foto's met af en toe een grote. Wat niet
 * klopte was de rekenkunde: core geeft de items een vaste breedte die met de tussenruimte
 * niet op 100% uitkomt, waardoor een volle rij smaller eindigt dan een uitgerekt item
 * eronder. Daarom hier de flex-basis exact uitrekenen én flex-grow aanzetten, zodat elke
 * regel precies de volle breedte vult.
 *
 * De selectors hebben evenveel gewicht als die van core, dat is nodig: core gebruikt drie
 * classes plus een :not(), en een kortere selector verliest dan. Met :is() staat elke
 * variant er één keer in plaats van vier keer.
 */
.mm-prose :is(.blocks-gallery-grid, .wp-block-gallery:not(.has-nested-images))
	:is(.blocks-gallery-item, .blocks-gallery-image) {
	display: flex;
	/* Basis is exact één kolom, en groeien mag: een volle rij vult 100%, een enkel item ook */
	flex: 1 1 calc((100% - (var(--mm-gal, 3) - 1) * var(--s3)) / var(--mm-gal, 3));
	min-width: 0;
	width: auto;
	margin: 0;
}

/*
 * Core zet die figure op display: flex met align-items: flex-end, wat alleen logisch is als
 * de caption over de foto valt. Met een kolom komt de caption eronder.
 *
 * De figure vult de hele tegel, en dat is niet cosmetisch: alleen met een vaste hoogte kan
 * de foto eronder op 100% staan. Daarmee krijgen alle foto's op een regel dezelfde hoogte,
 * de langste bepaalt de maat. Zonder dit houdt elke foto haar eigen verhouding en staan de
 * liggende foto's naast een staande te zweven.
 */
.mm-prose :is(.blocks-gallery-grid, .wp-block-gallery:not(.has-nested-images))
	:is(.blocks-gallery-item, .blocks-gallery-image) figure {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	height: 100%;
}

/*
 * Stond in de editor "afbeeldingen bijsnijden" aan (is-cropped), dan krijgen alle foto's op
 * een regel dezelfde hoogte: de hoogste bepaalt de maat, de rest wordt bijgesneden. Staat
 * het uit, dan houdt elke foto haar eigen verhouding, want dan heb je dat zo gewild.
 *
 * flex-basis: auto is hier het hele punt. Core rekent met basis 0, wat klopt zolang de
 * figure een rij is: dan gaat het over de breedte. Wij hebben er een kolom van gemaakt om
 * het onderschrift eronder te krijgen, en dan gaat basis 0 over de hoogte en klapt de foto
 * dicht. Met basis auto geldt height: 100% als uitgangsmaat, en mag een onderschrift daar
 * onderaan alsnog ruimte van afsnoepen.
 *
 * De link doet mee, want in oude berichten zit de foto vaak in een link naar het bestand en
 * dan is dát het element dat de hoogte moet doorgeven.
 */
.mm-prose :is(.blocks-gallery-grid, .wp-block-gallery:not(.has-nested-images)).is-cropped
	:is(.blocks-gallery-item, .blocks-gallery-image) :is(a, img) {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * WordPress legt bij het oude galerijblok de caption als donkere balk over de foto, met
 * position: absolute en een gradient. Die balk pakt niet de breedte van de foto maar van de
 * leeskolom, en heeft geen ronde hoeken, dus hij loopt scheef over het beeld. Hier zetten we
 * hem terug naar een gewone caption onder het beeld, zoals overal elders op de site.
 */
.mm-prose :is(.blocks-gallery-grid, .wp-block-gallery:not(.has-nested-images))
	:is(.blocks-gallery-item, .blocks-gallery-image) figcaption,
.mm-prose .wp-block-gallery figcaption,
.mm-prose .blocks-gallery-item figcaption,
.mm-prose .blocks-gallery-image figcaption {
	position: static;
	max-width: none;
	/* Zelfde afstand als een onderschrift bij een gewone foto in de tekst. */
	margin: var(--s3) 0 0;
	padding: 0;
	background: none;
	color: var(--mut);
	font: 400 14px/1.45 var(--serif);
	font-style: italic;
	text-align: start;
	/* Core kapt deze captions af op één regel; dat willen we niet */
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

/*
 * Het onderschrift van de galerij als geheel, dus niet van een losse foto. Iets meer lucht
 * dan bij een foto, want het hoort bij de hele rij. De flex-basis is er alleen voor
 * browsers zonder :has(): daar blijft de figure de flexrij en is dit een item op een
 * eigen regel. Deze regel moet ná de opmaak hierboven staan, anders wint die marge.
 */
.mm-prose figcaption.blocks-gallery-caption {
	flex-basis: 100%;
	/* Ruimer dan bij een losse foto: dit hoort bij de hele rij, niet bij één beeld. */
	margin-top: var(--s5);
}

.mm-prose > pre {
	overflow-x: auto;
	padding: var(--s4);
	border-radius: var(--r-sm);
	background: var(--pg2);
	font-size: 14px;
	line-height: 1.6;
}
.mm-prose code { font-size: .9em; background: var(--pg2); padding: 2px 4px; border-radius: 4px }
.mm-prose pre code { background: none; padding: 0 }

.mm-prose > table {
	width: 100%;
	border-collapse: collapse;
	font: 400 16px/1.5 var(--serif);
}
.mm-prose th,
.mm-prose td {
	padding: var(--s3) var(--s2);
	border-bottom: 1px solid var(--hair);
	text-align: start;
}
.mm-prose th { font-family: var(--sans); font-weight: 600; color: var(--ink) }

.mm-prose > hr {
	border: 0;
	border-top: 1px solid var(--hair);
	margin-block: var(--s7);
}

.mm-prose iframe,
.mm-prose video,
.mm-prose embed,
.mm-prose object { max-width: 100%; border-radius: var(--r) }

/* Erfenis uit oude berichten: center-tags en de klassieke align-classes */
.mm-prose center { display: block; text-align: center }
.mm-prose .aligncenter { margin-inline: auto }
.mm-prose .alignleft { float: left; margin: 0 var(--s5) var(--s4) 0 }
.mm-prose .alignright { float: right; margin: 0 0 var(--s4) var(--s5) }
.mm-prose > .alignleft,
.mm-prose > .alignright { grid-column: content }

.mm-post__meta { margin-top: var(--s4) }


/* 14b. Routeblok =========================================================== */

/*
 * Wordt als patroon in de editor ingevoegd en bestaat uit kernblokken, dus de styling
 * hangt aan de classes en niet aan een eigen blok. Zie inc/patterns.php.
 */
.mm-prose > .mm-route {
	padding: var(--s5);
	margin-block: var(--s7);
	border-radius: var(--r);
	background: var(--pg2);
	box-shadow: var(--sh);
}

.mm-route__label {
	margin: 0 0 var(--s4);
	font: 400 13px/1 var(--sans);
	letter-spacing: .01em;
	color: var(--mut);
}

.mm-route .mm-route__steps {
	margin: 0;
	padding-inline-start: var(--s5);
	font: 400 16px/1.6 var(--serif);
	color: var(--ink2);
}
.mm-route__steps li + li { margin-top: var(--s3) }

/* De nummers in het tekstaccent, in de schreefloze letter */
.mm-route__steps li::marker {
	color: var(--accT);
	font-family: var(--sans);
	font-weight: 600;
}

.mm-route__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
	margin-top: var(--s4);
	padding-top: var(--s4);
	border-top: 1px solid var(--hair);
}
.mm-route__foot p { margin: 0 }

.mm-route__map a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font: 400 14px/1 var(--sans);
	color: var(--accT);
	border-bottom: 0;
}
/*
 * Het icoon als masker en niet als background-image: currentColor werkt niet in een
 * los SVG-bestand, met een masker volgt de vorm wel de tekstkleur.
 */
.mm-route__map a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url(assets/icons/map.svg) center / contain no-repeat;
	mask: url(assets/icons/map.svg) center / contain no-repeat;
}

.mm-route__fun { font: 400 14px/1 var(--serif); color: var(--mut) }


/* 14c. Over mij: verhaal met profielkaart ================================== */

.mm-about {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--s9);
	align-items: start;
	padding-block: var(--s9) var(--s10);
}

/*
 * Op deze pagina is de tekst een gewone kolom en geen full-bleed leesgrid: er staat een
 * kaart naast, dus beelden kunnen niet uit de kolom breken.
 */
.mm-prose--column {
	display: block;
	padding-top: 0;
}
.mm-prose--column > * { max-width: none }
.mm-prose--column > .alignwide,
.mm-prose--column > .alignfull {
	width: auto;
	margin-inline: 0;
}

.mm-profile {
	position: sticky;
	top: calc(var(--header-h) + var(--s5));
	padding: var(--s5);
	border-radius: var(--r);
	background: var(--pg2);
	box-shadow: var(--sh);
}

.mm-profile__portrait img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--pill);
	background: var(--img-bg);
}

.mm-profile__name { margin-top: var(--s4) }
.mm-profile__bio {
	margin-top: var(--s2);
	font: 400 16px/1.55 var(--serif);
	color: var(--ink2);
}

.mm-profile__label { margin-top: var(--s5) }

.mm-profile__skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s3);
	list-style: none;
}
.mm-profile__skill {
	padding: 6px var(--s3);
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	font: 400 13px/1.2 var(--sans);
	color: var(--ink2);
}

.mm-profile__link {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--hair);
}
.mm-profile__link a {
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: var(--s3);
	font: 400 14px/1.3 var(--sans);
	color: var(--mut);
}
.mm-profile__link a:hover { color: var(--ink); opacity: 1 }
.mm-profile__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--mint);
	border-radius: var(--pill);
	font: 500 13px/1 var(--sans);
	color: var(--ink);
}
.mm-profile__link a:hover .mm-profile__mark { background: var(--mint); color: var(--on-mint) }


/* 15. Fotogrid ============================================================= */

.mm-photos { padding-block: var(--s10) }
.mm-photos .mm-section-head { margin-bottom: var(--s7) }

/*
 * Het raster loopt van rand tot rand, en een regel die niet volloopt staat in het midden.
 *
 * Dat vraagt twee dingen die elkaar in de weg zitten. Centreren kan alleen met flex, want
 * de lege kolommen van een raster nemen ruimte in. Maar dan mogen de tegels niet groeien,
 * anders wordt een laatste losse tegel groter dan de rest. Dus rekenen we de tegelbreedte
 * exact uit, en daarvoor moet het aantal kolommen bekend zijn: vandaar --cols per
 * bandbreedte in plaats van auto-fill met een minimumbreedte. De grenzen zijn zo gekozen
 * dat een tegel tussen ongeveer 200 en 340px blijft.
 */
.mm-photos__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s1);
	list-style: none;
	--cols: 3;
}

@media (min-width: 1024px) { .mm-photos__grid { --cols: 4 } }
@media (min-width: 1344px) { .mm-photos__grid { --cols: 5 } }
@media (min-width: 1664px) { .mm-photos__grid { --cols: 6 } }
@media (min-width: 1984px) { .mm-photos__grid { --cols: 7 } }
@media (min-width: 2304px) { .mm-photos__grid { --cols: 8 } }

/* Een volle regel vult zo precies 100%, een halve regel houdt dezelfde tegelmaat. */
.mm-photos__item { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--s1)) / var(--cols)) }

/*
 * Een contactblad, geen rij losse kaarten: dus van rand tot rand, vierkante hoeken en
 * geen schaduw. Die laatste twee horen bij een element dat los staat, en dat is een tegel
 * in een dicht raster niet.
 */
.mm-photos__tile {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: zoom-in;
}
.mm-photos__tile:hover img { opacity: .9 }


/* 16. Lightbox ============================================================= */

.mm-no-scroll { overflow: hidden }

.mm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s5);
	padding: var(--s8) var(--s5);
	background: rgba(14, 12, 9, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	/* Tempo: iets rustiger dan de rest van de site, want dit vult je hele scherm. */
	transition: opacity .3s ease;
}
.mm-lightbox[hidden] { display: none }
.mm-lightbox.is-open { opacity: 1 }

/*
 * Zolang de overlay niet open is vangt hij geen klikken. Dat is nodig omdat hij tijdens het
 * wegfaden nog even in beeld staat: zonder dit zou die laatste kwart seconde je klik op de
 * pagina opslokken.
 */
.mm-lightbox:not(.is-open) { pointer-events: none }

.mm-lightbox__figure {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	width: 100%;
	max-width: 1440px;
	margin: 0;
	/* Van net iets kleiner naar zijn maat: 1,5 procent, net genoeg om te voelen. */
	transform: scale(.985);
	transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
.mm-lightbox.is-open .mm-lightbox__figure { transform: none }

.mm-lightbox__img {
	height: calc(100vh - 176px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity .24s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}

/* De foto komt pas in beeld als hij binnen is, dus je ziet hem niet in stukken opbouwen. */
.mm-lightbox__img.is-loading { opacity: 0 }

/*
 * Bij bladeren dezelfde beweging als bij openen. Alleen dan, want bij openen schaalt de
 * figure eromheen al en zou de foto het een tweede keer doen.
 */
.mm-lightbox__img.is-loading.is-turning { transform: scale(.985) }

.mm-lightbox__caption {
	color: rgba(255, 255, 255, .7);
	font-style: italic;
	text-align: center;
}

.mm-lightbox__nav {
	display: flex;
	align-items: center;
	gap: var(--s5);
}

.mm-lightbox__btn,
.mm-lightbox__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--pill);
	color: #fff;
	transition: border-color .18s ease, background .18s ease;
}
.mm-lightbox__btn:hover,
.mm-lightbox__close:hover {
	border-color: var(--mint);
	background: rgba(255, 255, 255, .08);
}

.mm-lightbox__close {
	position: absolute;
	top: var(--s5);
	inset-inline-end: var(--s5);
}

.mm-lightbox__count { color: rgba(255, 255, 255, .7) }


/* 17. Tags, delen en waarderen ============================================= */

.mm-tags { padding-top: var(--s7) }
.mm-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
}

.mm-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	flex-wrap: wrap;
	padding-block: var(--s6);
}
.mm-share__list { display: flex; gap: var(--s3); list-style: none }
.mm-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	color: var(--ink2);
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.mm-share__btn:hover {
	border-color: var(--mint);
	color: var(--ink);
	background: var(--ghost);
	transform: translateY(-1px);
	opacity: 1;
}
.mm-share__btn:active { transform: translateY(0) }

.mm-like {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2) var(--s4);
	border: 1px solid var(--hair);
	border-radius: var(--pill);
	color: var(--ink2);
	font: 400 14px/1 var(--sans);
	transition: border-color .18s ease, color .18s ease;
}
.mm-like:hover { border-color: var(--mint); color: var(--ink) }
.mm-like[aria-pressed="true"] { border-color: var(--mint); color: var(--accT) }
.mm-like[aria-pressed="true"] .mm-icon { fill: var(--mint); stroke: var(--mint) }
.mm-like__count { font-family: var(--serif); color: var(--mut) }

.mm-flash {
	position: absolute;
	bottom: calc(100% + var(--s2));
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: var(--s2) var(--s3);
	border-radius: var(--r-sm);
	background: var(--ink);
	color: var(--pg);
	font: 400 13px/1 var(--sans);
	white-space: nowrap;
	pointer-events: none;
}


/* 18. Auteursblok ========================================================== */

.mm-author {
	margin-top: var(--s7);
	background: var(--pg2);
	border-block: 1px solid var(--hair);
}
.mm-author__inner {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: var(--s5);
	padding-block: var(--s6);
}
/* Staat er geen portret ingesteld, dan ook geen lege kolom ervoor. */
.mm-author__inner:not(:has(.mm-author__avatar)) { grid-template-columns: 1fr auto }

.mm-author__avatar img,
.mm-author__img {
	width: 72px;
	height: 72px;
	border-radius: var(--pill);
	background: var(--img-bg);
}
.mm-author__bio { margin-top: var(--s2) }


/* 19. Reacties en formuliervelden ========================================== */

.mm-comments-wrap { padding-block: var(--s10) }

.mm-comments__title,
.mm-comments__form-title { margin-bottom: var(--s6) }

.mm-comments__list { list-style: none }
.mm-comments__list ol { list-style: none; padding-inline-start: var(--s8) }

.mm-comment { padding-block: var(--s5); border-top: 1px solid var(--hair) }
.mm-comment__body { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4) }
.mm-comment__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pill);
	background: var(--pg2);
	color: var(--ink2);
	font: 600 16px/1 var(--sans);
}
.mm-comment__head {
	display: flex;
	align-items: baseline;
	gap: var(--s3);
	flex-wrap: wrap;
}
.mm-comment__text { margin-top: var(--s2); line-height: 1.65 }
.mm-comment__text p + p { margin-top: var(--s3) }
.mm-comment__reply { margin-top: var(--s3) }
.mm-comment__pending { margin-top: var(--s2); font-style: italic }

.mm-comments__closed { margin-block: var(--s5) }

.comment-respond { margin-top: var(--s9) }

.mm-comments__notes { margin-bottom: var(--s5) }

.comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s4);
}
.mm-field { display: flex; flex-direction: column; gap: var(--s2) }
.mm-field--full,
.comment-form .form-submit,
.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent { grid-column: 1 / -1 }

.mm-field input,
.mm-field textarea {
	padding: var(--s3) var(--s4);
	border: 1px solid var(--hair);
	border-radius: min(var(--r), 8px);
	background: var(--pg2);
	color: var(--ink);
	font: 400 16px/1.5 var(--serif);
}
.mm-field textarea { min-height: 88px; resize: vertical }
.mm-field input:focus-visible,
.mm-field textarea:focus-visible { border-color: var(--mint) }

.comment-form .form-submit { margin: 0 }
.comment-form input[type="submit"] { min-height: 40px }
.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font: 400 14px/1.4 var(--serif);
	color: var(--mut);
}
.comment-form .comment-form-cookies-consent input { width: auto }


/* 19b. Homepage: even voorstellen ========================================== */

.mm-intro {
	padding-block: var(--s10) 62px;
	border-block: 1px solid var(--hair);
}

.mm-intro__grid {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: var(--s7);
	margin-top: var(--s5);
}

.mm-intro__portrait { position: relative }
.mm-intro__img {
	width: 192px;
	height: 240px;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: var(--r);
	background: var(--img-bg);
}
/* Cirkel met "in" plus het adres ernaast, zoals in het ontwerp */
.mm-intro__social {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: var(--s3);
	margin-top: var(--s5);
	color: var(--mut);
	/* Breekt na "linkedin.com/in/" af, zoals in het ontwerp */
	max-width: 240px;
}
.mm-intro__social:hover { opacity: 1; color: var(--ink) }
.mm-intro__social-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--mint);
	border-radius: var(--pill);
	font: 500 14px/1 var(--sans);
	color: var(--ink);
}
.mm-intro__social:hover .mm-intro__social-mark { background: var(--mint); color: var(--on-mint) }
.mm-intro__social-label { font: 400 16px/1.3 var(--sans) }

/* Golos Text heeft geen Light, dus 400 in plaats van de 300 uit het ontwerp */
.mm-intro__text {
	font: 400 24px/1.52 var(--sans);
	color: var(--ink);
	text-wrap: pretty;
}
.mm-intro__text p { margin: 0 }
.mm-intro__text p + p { margin-top: var(--s4) }
.mm-intro__text strong { font-weight: 600 }

.mm-intro__link { margin-top: var(--s5) }
.mm-intro__link a {
	font: 600 16px/1.35 var(--sans);
	color: var(--ink);
	border-bottom: 2px solid var(--mint);
	padding-bottom: 2px;
}

.mm-stats {
	display: flex;
	gap: var(--s6);
	margin: var(--s7) 0 0;
	padding-top: var(--s6);
	border-top: 1px solid var(--hair);
}
.mm-stats__item {
	flex: 1;
	padding-inline-start: var(--s6);
	border-inline-start: 1px solid var(--hair);
}
.mm-stats__item:first-child { padding-inline-start: 0; border-inline-start: 0 }
.mm-stats dt { margin: 0 }
.mm-stats__label {
	margin: var(--s2) 0 0;
	font: 400 14px/1.35 var(--sans);
	color: var(--mut);
}


/* 19c. Homepage: waar ik nu naar luister =================================== */

.mm-listen {
	background: var(--pg2);
	border-bottom: 1px solid var(--hair);
}
.mm-listen__inner { padding-block: var(--s10) }

.mm-podcasts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s6);
	list-style: none;
}

/*
 * Flex en geen grid: als er geen cover is wordt die cel niet gerenderd, en dan zou de
 * tekst in de kolom van 64px belanden en per woord afbreken.
 */
.mm-podcast {
	display: flex;
	align-items: flex-start;
	gap: var(--s4);
}
.mm-podcast__cover { flex: 0 0 64px; width: 64px; height: 64px; box-shadow: none }
.mm-podcast__body { flex: 1; min-width: 0 }
.mm-podcast__title { font: 600 16px/1.3 var(--sans); color: var(--ink) }
/* Iets kleiner dan de titel en de omschrijving: het is een bijregel, geen inhoud. */
.mm-podcast__makers {
	margin-top: var(--s1);
	font: 400 14px/1.4 var(--serif);
	color: var(--mut);
}
.mm-podcast__text {
	margin-top: var(--s3);
	font: 400 16px/1.55 var(--serif);
	color: var(--ink2);
}
.mm-podcast__link { margin-top: var(--s3) }
.mm-podcast__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font: 400 16px/1 var(--sans);
	color: var(--accT);
}

.mm-listen__now {
	display: flex;
	align-items: baseline;
	gap: var(--s5);
	margin-top: var(--s7);
	padding-top: var(--s5);
	border-top: 1px solid var(--hair);
}
.mm-listen__now .t-kicker { flex: none }
.mm-listen__now .t-text { font-size: 20px; line-height: 1.6 }


/* 19d. Homepage: foto van de maand ========================================= */

/*
 * Dit paneel is max-width 1440 met automatische marges, dus het raakt de schermranden
 * zolang het venster smaller is dan 1440. Ronde hoeken horen alleen bij een vlak dat
 * los staat, dus de radius komt er pas bij zodra er echt ruimte naast zit. Zie de
 * media query onder aan deze sectie.
 */
.mm-fotm {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	margin-block: var(--s10);
	overflow: hidden;
	background: var(--panel-dark);
	border-radius: 0;
}
/*
 * Een staande foto niet hoger dan hij breed is, dus maximaal vierkant.
 *
 * Liggende foto's merken hier niets van: die zijn al breder dan hoog, dus de grens wordt
 * nooit geraakt en ze houden hun eigen verhouding. Alleen bij een staande foto wordt er
 * boven en onder iets afgesneden, in plaats van dat hij op een telefoon anderhalf keer de
 * schermhoogte inneemt.
 *
 * De grens komt uit de breedte van het vlak zelf (100cqw), niet uit de schermbreedte. Dat
 * klopt dus ook in de tweekolomsopmaak op een breed scherm, waar dit vlak maar een deel van
 * het venster is. Kent een browser geen containerqueries, dan valt de grens weg en is het
 * de oude situatie.
 */
.mm-fotm__media { container-type: inline-size }
.mm-fotm__media img {
	width: 100%;
	height: 100%;
	max-height: 100cqw;
	object-fit: cover;
}
.mm-fotm__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--s9) var(--s8);
}
.mm-fotm__kicker { color: var(--mint) }
.mm-fotm__title { margin-top: var(--s3); color: #fff }
.mm-fotm__text {
	margin-top: var(--s4);
	font: 400 16px/1.55 var(--serif);
	color: rgba(255, 255, 255, .8);
}
.mm-fotm__link { margin-top: var(--s5) }
.mm-fotm__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font: 400 14px/1 var(--sans);
	color: var(--mint);
}

/* Vanaf hier staat het paneel los van de schermranden en mogen de hoeken rond */
@media (min-width: 1441px) {
	.mm-fotm { border-radius: calc(var(--r) * 2) }
}


/* 19e. Homepage: alles op een rij ========================================== */

.mm-timeline { padding-block: var(--s12) var(--s4) }
.mm-timeline__title { font: 500 16px/1 var(--serif); color: var(--ink) }
.mm-timeline__cats a { color: var(--mut) }
.mm-timeline__cats a:hover { color: var(--accT) }

.mm-timeline__year {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--s4);
	align-items: start;
}
.mm-timeline__number { padding-top: var(--s4) }

.mm-timeline__more { margin-top: var(--s6) }
.mm-timeline__more a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font: 400 14px/1 var(--sans);
	color: var(--accT);
}


/* 19f. Homepage: uit het archief =========================================== */

.mm-flashback { padding-block: var(--s10) }

.mm-flashback__card {
	display: grid;
	grid-template-columns: 192px 1fr;
	gap: var(--s5);
	overflow: hidden;
	border: 1px solid var(--hair);
	border-radius: var(--r);
}
.mm-flashback__media { background: var(--img-bg) }
.mm-flashback__media img { width: 100%; height: 100%; object-fit: cover }
.mm-flashback__body { padding: var(--s5) var(--s5) var(--s5) 0 }
.mm-flashback__title { margin-top: var(--s2) }
.mm-flashback__text { margin-top: var(--s3) }

.mm-flashback__foot {
	display: flex;
	align-items: center;
	gap: var(--s4);
	flex-wrap: wrap;
	margin-top: var(--s5);
}
.mm-flashback__link {
	color: var(--ink);
	border-bottom: 2px solid var(--mint);
}
.mm-flashback__shuffle {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin-inline-start: auto;
	color: var(--accT);
}
.mm-flashback__shuffle:hover { opacity: .82 }


/* 19g. Zoeken en 404 ======================================================= */

.mm-page-head__search { margin-top: var(--s6) }
.mm-page-head__count { margin-top: var(--s4) }

.mm-noresults__line {
	font: 400 24px/1.45 var(--serif);
	font-style: italic;
	color: var(--ink);
	text-wrap: pretty;
}
.mm-noresults__hint { margin-top: var(--s5) }
.mm-noresults__hint a { color: var(--accT) }
.mm-noresults__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
	list-style: none;
}

.mm-404 { padding-block: var(--s10) var(--s12) }
.mm-404__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--s9);
	align-items: start;
}
.mm-404__number {
	font: 600 160px/.8 var(--sans);
	letter-spacing: -.06em;
	color: var(--ghost);
	margin-bottom: var(--s5);
}
.mm-404__text { margin-top: var(--s5) }
.mm-404__search { margin-top: var(--s6) }
.mm-404__actions {
	display: flex;
	align-items: center;
	gap: var(--s6);
	flex-wrap: wrap;
	margin-top: var(--s6);
}
.mm-404__link { color: var(--ink); border-bottom: 1px solid var(--mint) }

.mm-404__aside {
	padding: var(--s5);
	background: var(--pg2);
	border-radius: var(--r);
	box-shadow: var(--sh);
}
.mm-404__list { margin-top: var(--s3) }
.mm-404__list .mm-row { grid-template-columns: 1fr; gap: var(--s1) }
.mm-404__list .mm-row__thumb,
.mm-404__list .mm-row__arrow { display: none }


/* 20. Nieuwsbrief ========================================================== */

/*
 * Het formulier komt van Jetpack, dus we stylen hun markup. Dat zijn de selectors met
 * jetpack of wp-block-jetpack erin: die zien er vreemd uit, maar ze horen bij het
 * abonneerblok. Alles wat wij zelf renderen zit in .mm-newsletter.
 */
.mm-newsletter {
	background: var(--pg2);
	border-block: 1px solid var(--hair);
}

.mm-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s6);
	flex-wrap: wrap;
	padding-block: var(--s6);
}

.mm-newsletter__text { max-width: 480px }

.mm-newsletter__sub {
	margin-top: var(--s2);
	font: 400 14px/1.55 var(--serif);
	color: var(--ink2);
}

.mm-newsletter__actions {
	display: flex;
	align-items: center;
	gap: var(--s5);
	flex-wrap: wrap;
}

.mm-newsletter__rss {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: var(--accT);
}

/* Jetpack-formulier naar het ontwerp trekken */
.mm-newsletter__form form,
.mm-newsletter__form .wp-block-jetpack-subscriptions__form {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin: 0;
}

.mm-newsletter__form p { margin: 0 }

.mm-newsletter__form input[type="email"] {
	width: 224px;
	height: 40px;
	padding-inline: var(--s4);
	border: 1px solid var(--hair);
	border-radius: min(var(--r), 8px);
	background: var(--pg);
	color: var(--ink);
	font: 400 14px/1 var(--serif);
}
.mm-newsletter__form input[type="email"]:focus-visible { border-color: var(--mint) }
.mm-newsletter__form input[type="email"]::placeholder { color: var(--mut) }

.mm-newsletter__form button,
.mm-newsletter__form input[type="submit"],
.mm-newsletter__form .wp-block-button__link {
	height: 40px;
	padding-inline: var(--s5);
	border: 0;
	border-radius: 20px; /* helft van de hoogte, zie de opmerking bij .mm-btn */
	background: var(--btn);
	color: var(--on-btn);
	font: 500 14px/1 var(--sans);
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, border-radius .18s ease;
}
.mm-newsletter__form button:hover,
.mm-newsletter__form input[type="submit"]:hover {
	background: var(--btn-hover);
	transform: translateY(-1px);
	border-radius: var(--r-sm);
	opacity: 1;
}

/* Jetpack zet er soms een eigen melding of teller onder */
.mm-newsletter__form .jetpack_subscription_widget h2,
.mm-newsletter__form #subscribe-text,
.mm-newsletter__form .subscribe-count { display: none }

.mm-newsletter__form .success,
.mm-newsletter__form #subscribe-submit .success {
	font: 400 14px/1.5 var(--serif);
	color: var(--accT);
}


/* 21. Responsive =========================================================== */

@media (max-width: 1024px) {
	:root {
		--gutter:      max(32px, calc(50vw - 452px));
		--gutter-mid:  max(32px, calc(50vw - 380px));
		--gutter-wide: max(32px, calc(50vw - 720px));
	}
	.mm-grid { grid-template-columns: repeat(2, 1fr) }
	.mm-tiles { columns: 2 }
	.mm-featured { grid-template-columns: 1fr; gap: var(--s5) }
	.mm-podcasts { grid-template-columns: repeat(2, 1fr) }
	.mm-about { grid-template-columns: 1fr 280px; gap: var(--s7) }
	.mm-intro__grid { grid-template-columns: 1fr; gap: var(--s5) }
	.mm-fotm { grid-template-columns: 1fr }
	.mm-fotm__body { padding: var(--s6) }
}

@media (max-width: 767px) {
	:root {
		--gutter:        24px;
		--gutter-narrow: 24px;
		--gutter-mid:    24px;
		--gutter-wide:   24px;
	}

	.t-hero    { font-size: 34px }
	.t-h1      { font-size: 28px }
	.t-lead-xl { font-size: 24px }
	.t-lead    { font-size: 20px; line-height: 1.55 }
	.t-body    { font-size: 18px; line-height: 1.68 }

	.mm-grid { grid-template-columns: 1fr }

	/*
	 * Op de homepage lopen de kaartbeelden van rand tot rand: ze breken met een negatieve
	 * marge uit de gutter. Dan hoort er ook geen radius of schaduw meer bij, want die
	 * kunnen aan de zijkanten niets doen dan afgekapt worden.
	 */
	.mm-grid--compact .mm-card__media {
		margin-inline: calc(var(--gutter) * -1);
		/* Van rand tot rand voelt 152px als een smalle band, dus hier 16 op 9 */
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 0;
		box-shadow: none;
	}

	/* Dezelfde lucht boven de tekst als op de desktop, alleen onderaan iets krapper */
	.mm-hero__body { padding-block: calc(var(--header-h) + var(--s8)) var(--s8) }

	/* Een backdrop-filter over de volle breedte is duur op mobiel, dus daar dekkend glas */
	.mm-header.is-solid::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.mm-header.is-solid { background: var(--bar-solid) }

	/* Thumbnail blijft, de meta gaat onder de titel */
	.mm-row--archive,
	.mm-row--year {
		grid-template-columns: 56px 1fr;
		row-gap: var(--s2);
	}
	.mm-row--year .mm-row__date { grid-column: 1 / -1 }
	.mm-row__meta { grid-column: 2; white-space: normal }
	.mm-row__arrow { display: none }

	.mm-tiles { columns: 1 }
	.mm-featured { grid-template-columns: 1fr }

	.mm-filters { flex-direction: column; align-items: stretch }
	.mm-search--pill .mm-search__input { width: 100%; height: 44px }

	/* Op een telefoon onder elkaar: kop, teller, jaren, en dan de schakelaar. */
	.mm-archive__head {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"kop"
			"teller"
			"jaren"
			"weergave";
		align-items: stretch;
		row-gap: var(--s3);
	}
	.mm-archive__head .mm-counter { justify-self: start }
	.mm-archive__head .mm-view { justify-self: start }
	.mm-view__btn { height: 38px }

	/*
	 * Portret vierkant en kleiner, met de LinkedIn-regel ernaast in plaats van eronder.
	 * Op de desktop blijft het staande portret van 192 bij 240 uit het ontwerp.
	 */
	.mm-intro__portrait {
		display: flex;
		align-items: center;
		gap: var(--s4);
	}
	.mm-intro__img { width: 96px; height: 96px }
	.mm-intro__social { margin-top: 0; max-width: none }

	.mm-intro__text { font-size: 20px }
	/*
	 * Onder elkaar, en dat is een keuze en geen restant. Naast elkaar geprobeerd, ook
	 * gecentreerd: dan passen ze wel (drie kolommen van 107px, blok van 108 hoog in plaats
	 * van 260), maar twee van de drie labels vallen over twee regels en dat leest rommelig.
	 * Onder elkaar is het rustiger en heb je op een telefoon toch ruimte genoeg.
	 */
	.mm-stats { flex-direction: column; gap: var(--s4) }
	.mm-stats__item { padding-inline-start: 0; border-inline-start: 0 }

	.mm-podcasts { grid-template-columns: 1fr }
	.mm-listen__now { flex-direction: column; gap: var(--s2) }

	/* Op mobiel ook de marge weg, zodat het donkere vlak aansluit op de blokken erom */
	.mm-fotm { margin-block: 0 }

	.mm-timeline__year { grid-template-columns: 1fr }
	.mm-timeline__number { padding-top: var(--s5) }

	.mm-flashback__card { grid-template-columns: 1fr }
	.mm-flashback__media { aspect-ratio: 3 / 2 }
	.mm-flashback__body { padding: var(--s5) }
	.mm-flashback__shuffle { margin-inline-start: 0 }

	.mm-404__grid { grid-template-columns: 1fr; gap: var(--s7) }
	.mm-404__number { font-size: 96px }

	/* Kaart onder het verhaal, en dan niet meer meescrollen */
	.mm-about { grid-template-columns: 1fr; gap: var(--s7) }
	.mm-profile { position: static }

	/*
	 * De footer had 92px marge boven zich. Op mobiel levert dat een lege witte strook op
	 * tussen een gekleurde band (podcasts, nieuwsbrief) en de footer. De footer heeft zelf
	 * 34px padding boven de tekst, dus dat is genoeg lucht.
	 */
	.mm-footer { margin-top: 0 }

	.mm-newsletter__inner { flex-direction: column; align-items: stretch }
	.mm-newsletter__form form { flex-direction: column; align-items: stretch }
	.mm-newsletter__form input[type="email"] { width: 100%; height: 44px }
	.mm-newsletter__form button { height: 44px }

	/*
	 * Geen eigen --btn-h op mobiel: de 48px van de basis is al ruimer dan de 44px die je
	 * minimaal wil voor een tikdoel, en zo blijft de radius gelijk aan de halve hoogte.
	 */

	/* ----- Mobiele navigatie -------------------------------------------------
	 * Zonder JavaScript (dan staat er geen .js op html) blijft dit een gestapelde lijst
	 * onder het logo: niet mooi, maar volledig te gebruiken. Met JS wordt het een
	 * hamburger met een paneel dat vanaf de rechterkant inschuift.
	 */
	.mm-header__inner { flex-wrap: wrap; row-gap: var(--s4) }

	.mm-nav,
	.mm-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s3);
		width: 100%;
	}

	/*
	 * Iets omlaag, want het logo is een schriftletter met een hoge uithaal: de inkt vult
	 * het hele kader, maar het zwaartepunt van de letters ligt 9px onder het midden en de
	 * x-hoogte 11px. Opgemeten in het logo zelf, 8px is daar het optische midden van.
	 */
	.js .mm-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline-start: auto;
		transform: translateY(8px);
		border-radius: min(var(--r), 12px);
		color: currentColor;
	}
	.js .mm-menu-toggle:hover { background: rgba(255, 255, 255, .12) }
	.js .mm-header.is-solid .mm-menu-toggle:hover { background: var(--ghost) }

	/*
	 * Het menu komt als een cirkel op vanaf de hamburger en groeit schermvullend. De
	 * header blijft er bovenop staan (hoger z-index), zodat het logo op z'n plek blijft
	 * en het kruisje zichtbaar is. clip-path clipt alleen wat je ziet, niet de tabvolgorde,
	 * dus visibility moet mee: die schakelt direct bij openen en pas na de animatie bij
	 * sluiten, anders klapt het paneel er meteen uit.
	 */
	.js .mm-nav {
		--mm-blob: circle(0 at var(--mm-blob-x, calc(100% - 46px)) var(--mm-blob-y, 50px));

		position: fixed;
		inset: 0;
		z-index: 50;
		display: block;
		width: auto;
		background: rgba(23, 21, 15, .92);
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		backdrop-filter: blur(18px) saturate(140%);
		color: var(--glass-ink);
		-webkit-clip-path: var(--mm-blob);
		clip-path: var(--mm-blob);
		visibility: hidden;
		transition: -webkit-clip-path .42s cubic-bezier(.4, 0, .2, 1),
			clip-path .42s cubic-bezier(.4, 0, .2, 1),
			visibility 0s linear .42s;
	}
	.js .mm-nav.is-open {
		--mm-blob: circle(150% at var(--mm-blob-x, calc(100% - 46px)) var(--mm-blob-y, 50px));

		visibility: visible;
		transition: -webkit-clip-path .42s cubic-bezier(.4, 0, .2, 1),
			clip-path .42s cubic-bezier(.4, 0, .2, 1),
			visibility 0s;
	}

	/* De inhoud komt iets later op, zodat je eerst de cirkel ziet groeien */
	.js .mm-nav__panel {
		display: flex;
		flex-direction: column;
		gap: var(--s4);
		height: 100%;
		padding: calc(var(--header-h) + var(--s5)) var(--gutter) var(--s8);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .22s ease, transform .22s ease;
	}
	.js .mm-nav.is-open .mm-nav__panel {
		opacity: 1;
		transform: none;
		transition-delay: .18s;
	}

	/*
	 * Zolang het menu open staat is de header alleen nog een laag met het logo en het
	 * kruisje: geen glas, geen blur, geen leesbalk, en het logo blijft wit op het donker.
	 */
	.js .mm-header { z-index: 60 }

	/*
	 * De nav staat in de header, dus in dezelfde stapelcontext. Zonder deze regel schuift
	 * het schermvullende paneel over z'n eigen buren en verdwijnen het logo en het kruisje.
	 */
	.js .mm-logo,
	.js .mm-menu-toggle {
		position: relative;
		z-index: 70;
	}
	.js body.mm-no-scroll .mm-header {
		color: #fff;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.js body.mm-no-scroll .mm-header::before,
	.js body.mm-no-scroll .mm-header::after,
	.js body.mm-no-scroll .mm-progress { display: none }
	.js body.mm-no-scroll .mm-logo img,
	.js body.mm-no-scroll .mm-logo svg { filter: none }

	.js .mm-nav .mm-nav__link,
	.js .mm-nav .mm-drop__toggle {
		display: block;
		width: 100%;
		padding-block: var(--s3);
		/* Een button centreert zijn tekst standaard, dus expliciet links uitlijnen */
		text-align: start;
		color: var(--glass-ink);
		font-size: 20px;
		opacity: 1;
	}

	/* In het paneel staat de categorielijst gewoon open: hover bestaat hier niet */
	.js .mm-nav .mm-drop { width: 100% }
	.js .mm-nav .mm-drop__toggle .mm-icon { display: none }
	.js .mm-nav .mm-drop__panel {
		position: static;
		display: block;
		width: auto;
		max-height: none;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	.js .mm-nav .mm-drop__row { padding-inline: 0; font-size: 16px }
	.js .mm-nav .mm-drop__sep { margin-inline: 0 }

	/* Themaschakelaar onderaan het paneel, achter een hairline */
	.js .mm-nav .mm-theme {
		height: auto;
		gap: var(--s2);
		margin-top: auto;
		padding: var(--s5) 0 0;
		border: 0;
		border-top: 1px solid var(--glass-hair);
		border-radius: 0;
	}
	.js .mm-nav .mm-theme__btn { width: 44px; height: 44px; color: var(--glass-ink) }

	.mm-prose { padding-top: var(--s7) }
	.mm-prose > p:first-of-type { font-size: 20px }
	.mm-prose > blockquote { font-size: 22px }
	.mm-prose > .alignleft,
	.mm-prose > .alignright,
	.mm-prose .alignleft,
	.mm-prose .alignright { float: none; margin-inline: 0 }

	/* Op een tablet blijven het drie kolommen, dat is de basiswaarde. */

	.mm-lightbox { padding: var(--s10) var(--s4) var(--s5) }
	.mm-lightbox__img { height: calc(100vh - 220px) }
	.mm-lightbox__btn,
	.mm-lightbox__close { width: 44px; height: 44px }

	.mm-author__inner {
		grid-template-columns: 72px 1fr;
		row-gap: var(--s4);
	}
	.mm-author__inner:not(:has(.mm-author__avatar)) { grid-template-columns: 1fr }
	.mm-author__link { grid-column: 2 }
	.mm-author__inner:not(:has(.mm-author__avatar)) .mm-author__link { grid-column: 1 }

	.comment-form { grid-template-columns: 1fr }
}


/* 22. Kleine telefoons ===================================================== */

@media (max-width: 479px) {
	/* Drie tegels naast elkaar wordt hier te klein om nog iets te zien. */
	.mm-photos__grid { --cols: 2 }
}