/* Happily Ever Baby: a soft, illustrated announcement card. Pastel blobs on warm cream,
   wave dividers, a night-sky band, and a night-sky dark mode. Fonts are self-hosted (OFL). */

@font-face {
	font-family: "Fraunces";
	src: url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2-variations"), url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sue Ellen Francisco";
	src: url("/assets/fonts/sue-ellen-francisco-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--cream: #fbf5ec;
	--paper: #fffdf9;
	--ink: #2d2a4c;
	--ink-soft: #57536f;
	--link: #8a3b64;
	--link-hover: #6a2549;
	--shadow: rgba(45, 42, 76, 0.13);

	--blush: #f3c2be;
	--blush-deep: #e0938f;
	--butter: #f6dc8c;
	--butter-deep: #e7b957;
	--sage: #afcba4;
	--sage-deep: #7fa57a;
	--powder: #bcd5ec;
	--powder-deep: #8bb3d9;

	--tint-blush: #fbe3de;
	--tint-butter: #fbefc9;
	--tint-sage: #e2edd9;
	--tint-powder: #dfebf6;

	--night: #2b2f5a;
	--night-ink: #f8f1e4;
	--night-soft: #d5d0ea;
	--moon: #f6dc8c;
	--moon-dark: #434a85;

	--illo-paper: #fffcf6;
	--illo-ink: #3b3760;
	--illo-line: #7a7697;
	--rusk: #ebc995;
	--rusk-deep: #d4a56c;

	--icon-tint: var(--tint-blush);
	--footer-bg: var(--tint-sage);

	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-text: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-hand: "Sue Ellen Francisco", "Bradley Hand", cursive;

	--wrap: 72rem;
	--measure: 40rem;
	--gutter: clamp(16px, 4vw, 40px);
	--radius: 28px;

	color-scheme: light;
}

/* Night-sky dark mode: the same pastels, under a deep indigo sky. */
@media (prefers-color-scheme: dark) {
	:root {
		--cream: #1c1f3b;
		--paper: #272b4f;
		--ink: #f6efe3;
		--ink-soft: #cdc7e0;
		--link: #f7bfd0;
		--link-hover: #ffdbe5;
		--shadow: rgba(0, 0, 0, 0.35);

		--tint-blush: #3d2f51;
		--tint-butter: #3b3650;
		--tint-sage: #2a3d4c;
		--tint-powder: #29385e;

		--night: #13152b;
		--moon-dark: #333a6e;
		--illo-line: #b9b4d6;

		color-scheme: dark;
	}
}

.tone-blush { --tone: var(--blush); --tone-deep: var(--blush-deep); --tone-tint: var(--tint-blush); }
.tone-butter { --tone: var(--butter); --tone-deep: var(--butter-deep); --tone-tint: var(--tint-butter); }
.tone-sage { --tone: var(--sage); --tone-deep: var(--sage-deep); --tone-tint: var(--tint-sage); }
.tone-powder { --tone: var(--powder); --tone-deep: var(--powder-deep); --tone-tint: var(--tint-powder); }

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

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1.125rem;
	font-weight: 450;
	line-height: 1.7;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
main {
	flex: 1;
}

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

a {
	color: var(--link);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
}
a:hover {
	color: var(--link-hover);
	text-decoration-thickness: 2.5px;
}
:focus-visible {
	outline: 3px solid var(--link);
	outline-offset: 3px;
	border-radius: 10px;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

.skip {
	position: absolute;
	left: -999px;
	top: 0.5rem;
	background: var(--paper);
	color: var(--ink);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	z-index: 10;
}
.skip:focus {
	left: 1rem;
}

/* Icons */
.icon {
	width: 1.35em;
	height: 1.35em;
	flex: none;
	color: var(--ink);
}
.cat-icon {
	flex: none;
}

/* Wave dividers */
.wave {
	display: block;
	width: 100%;
	height: clamp(34px, 5vw, 72px);
	margin-bottom: -1px;
}
.wave-flip {
	transform: scaleY(-1);
	margin: -1px 0 0;
}

/* Header */
.site-header {
	position: relative;
	z-index: 2;
}
.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.1rem 0.6rem;
}
.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	text-decoration: none;
}
.logo:hover {
	color: var(--ink);
}
.logo-mark {
	width: 2.75rem;
	height: 2.75rem;
}
.logo-name {
	font-family: var(--font-display);
	font-weight: 620;
	font-size: 1.5rem;
	line-height: 1;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	letter-spacing: -0.01em;
}
.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 750;
}
.nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ink);
	text-decoration: none;
	padding: 0.35rem 0.85rem 0.35rem 0.45rem;
	border-radius: 999px;
}
.nav a:hover {
	background: var(--tint-butter);
}
.nav a[aria-current] {
	background: var(--tint-blush);
}
.nav-icon {
	width: 1.9rem;
	height: 1.9rem;
}
.nav-heart {
	width: 1.9rem;
	height: 1.9rem;
	padding: 0.3rem;
	color: var(--blush-deep);
}

/* Shared headings and buttons */
.section-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
	line-height: 1.12;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	letter-spacing: -0.01em;
	margin: 0 0 1.5rem;
}
.section-title a {
	color: inherit;
	text-decoration: none;
}
.section-title a:hover {
	color: var(--link);
}
.button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--ink);
	color: var(--cream);
	font-weight: 800;
	font-size: 1.02rem;
	text-decoration: none;
	padding: 0.8rem 1.15rem 0.8rem 1.5rem;
	border-radius: 999px;
}
.button .icon {
	color: inherit;
	width: 1.25rem;
	height: 1.25rem;
}
.button:hover {
	color: var(--cream);
	background: var(--link);
}
@media (prefers-color-scheme: dark) {
	.button,
	.button:hover {
		color: #2d2a4c;
	}
	.button {
		background: var(--butter);
	}
	.button:hover {
		background: var(--blush);
	}
}
.hand-note {
	font-family: var(--font-hand);
	font-size: 1.85rem;
	line-height: 1;
	color: var(--link);
	white-space: nowrap;
}

/* Hero: a mobile hanging over the headline */
.hero {
	position: relative;
	text-align: center;
	margin-top: -0.5rem;
}
.hero-scene-wrap {
	width: min(100%, 920px);
	margin: 0 auto;
	padding-inline: 0.5rem;
}
.hero-note {
	position: absolute;
	right: max(1rem, calc(50% - 25rem));
	top: clamp(-4rem, -6vw, -2rem);
	transform: rotate(-8deg);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}
.hero-text {
	margin-top: clamp(-3.5rem, -5vw, -1rem);
	position: relative;
	padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero-title {
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(2.45rem, 1.5rem + 4.4vw, 4.85rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	max-width: 15ch;
	margin: 0 auto 1.1rem;
}
.hero-lede {
	font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
	color: var(--ink-soft);
	max-width: 38rem;
	margin: 0 auto;
}

/* Bands */
.band-sage {
	background: var(--tint-sage);
}

/* Featured article */
.feature-band {
	padding-top: clamp(1.5rem, 4vw, 3rem);
}
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
}
.feature-art {
	position: relative;
}
.feature-art .illo-blob {
	fill: var(--paper);
}
.feature-art .hand-note {
	position: absolute;
	top: 6%;
	left: 6%;
	transform: rotate(-9deg);
}
.feature-card {
	position: relative;
	margin-left: -3.5rem;
	background: var(--paper);
	border-radius: 40px 40px 40px 12px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 24px 50px -30px var(--shadow);
}
.feature-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	margin: 0.4rem 0 0.75rem;
}
.feature-desc {
	color: var(--ink-soft);
	margin: 0 0 1.5rem;
}

/* Category label used on cards */
.card-cat {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.2;
}
.card-cat-icon {
	width: 1.9rem;
	height: 1.9rem;
}

/* "Waar ben je naar op zoek?": three blobs */
.cats {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
	text-align: center;
}
.cat-blobs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 2rem clamp(1rem, 3vw, 2.5rem);
}
.cat-blob a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: var(--ink);
	text-decoration: none;
	padding: 0.25rem 0.5rem 1rem;
	border-radius: var(--radius);
}
.cat-blob-art {
	width: min(100%, 300px);
}
.cat-blob-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1.15;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	margin-top: 0.25rem;
}
.cat-blob a:hover .cat-blob-name {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}
.cat-blob-intro {
	color: var(--ink-soft);
	font-size: 1rem;
	max-width: 22rem;
}
.cat-blob-count {
	font-size: 0.88rem;
	font-weight: 800;
	background: var(--paper);
	border-radius: 999px;
	padding: 0.15rem 0.8rem;
	margin-top: 0.35rem;
	box-shadow: 0 6px 16px -12px var(--shadow);
}

/* Night band: the geboortelijst timeline with a waxing moon */
.night-sky {
	background-color: var(--night);
	background-image:
		radial-gradient(1.6px 1.6px at 6% 18%, #fff9 60%, transparent 62%),
		radial-gradient(1.2px 1.2px at 14% 72%, #fff8 60%, transparent 62%),
		radial-gradient(2px 2px at 23% 34%, #ffeebb 60%, transparent 62%),
		radial-gradient(1.3px 1.3px at 37% 88%, #fff8 60%, transparent 62%),
		radial-gradient(1.6px 1.6px at 48% 12%, #fff9 60%, transparent 62%),
		radial-gradient(1.2px 1.2px at 61% 64%, #fff7 60%, transparent 62%),
		radial-gradient(2px 2px at 72% 26%, #ffeebb 60%, transparent 62%),
		radial-gradient(1.4px 1.4px at 83% 80%, #fff8 60%, transparent 62%),
		radial-gradient(1.6px 1.6px at 93% 16%, #fff9 60%, transparent 62%),
		radial-gradient(1.2px 1.2px at 97% 55%, #fff7 60%, transparent 62%);
	color: var(--night-ink);
	padding-block: clamp(1.5rem, 4vw, 3rem);
}
.night-title {
	text-align: center;
	color: var(--night-ink);
	margin-bottom: 0.6rem;
}
.night-lede {
	text-align: center;
	color: var(--night-soft);
	max-width: 34rem;
	margin: 0 auto 2.5rem;
}
.moon-line {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem;
	position: relative;
	text-align: center;
}
.moon-line::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 10%;
	right: 10%;
	border-top: 2px dashed rgba(246, 220, 140, 0.45);
}
.moon-stop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}
.moon-stop .moon {
	width: 64px;
	height: 64px;
	background: var(--night);
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--night);
}
.moon-stop:last-child .moon {
	filter: drop-shadow(0 0 14px rgba(246, 220, 140, 0.55));
}
.moon-when {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--moon);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	margin-top: 0.3rem;
}
.moon-text {
	color: var(--night-soft);
	font-size: 0.98rem;
	line-height: 1.55;
	max-width: 15rem;
}
.night-source {
	text-align: center;
	color: var(--night-soft);
	font-size: 0.92rem;
	margin: 2.5rem auto 0;
	max-width: 44rem;
}
.night-source a {
	color: var(--moon);
	font-weight: 800;
}
.night-source a:hover {
	color: #fff;
}

/* Topic sections and cards */
.topic {
	padding-block: clamp(2rem, 5vw, 3.5rem) 1rem;
}
.topic-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}
.topic-icon {
	width: 3.5rem;
	height: 3.5rem;
}
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.25rem clamp(1.25rem, 3vw, 2.25rem);
}
.cards > li {
	flex: 0 1 21.5rem;
	min-width: 0;
}
.card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius);
}
.card-link:hover {
	color: var(--ink);
}
.card-art {
	display: block;
	padding-inline: 0.75rem;
}
.card-body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: -2.6rem 0.4rem 0;
	background: var(--paper);
	border-radius: 30px 30px 30px 10px;
	padding: 1.15rem 1.35rem 1.3rem;
	box-shadow: 0 18px 36px -26px var(--shadow);
}
.cards li:nth-child(3n + 2) .card-body {
	border-radius: 30px 30px 10px 30px;
}
.card-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.18;
	letter-spacing: -0.005em;
	font-variation-settings: "SOFT" 100, "WONK" 0;
}
.card-link:hover .card-title {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}
.card-desc {
	color: var(--ink-soft);
	font-size: 0.98rem;
	line-height: 1.55;
}
.card-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 0.25rem;
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--link);
}
.card-arrow {
	color: inherit;
	width: 1.15rem;
	height: 1.15rem;
}
/* On the homepage the drawings do the talking: titles only. */
.is-home .card-desc,
.is-home .card-more {
	display: none;
}
/* Grouped lists already say the category. */
.topic .card-cat {
	display: none;
}
.is-404 .topic .card-cat {
	display: inline-flex;
}
.empty {
	color: var(--ink-soft);
}

/* Article and page headers */
.post-hero {
	background: var(--tone-tint);
	margin-top: 0.5rem;
}
.post-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 1rem clamp(1rem, 4vw, 3rem);
	padding-top: clamp(1.25rem, 3vw, 2.5rem);
}
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink-soft);
	margin-bottom: 0.9rem;
}
.crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--ink-soft);
}
.crumb-home {
	--icon-tint: var(--paper);
	width: 1.3rem;
	height: 1.3rem;
}
.post-title {
	font-family: var(--font-display);
	font-weight: 580;
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.018em;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	margin: 0 0 1.25rem;
}
.post-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--ink-soft);
	--icon-tint: var(--paper);
}
.post-meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.post-art {
	position: relative;
	margin: 0;
	justify-self: center;
	width: min(100%, 26rem);
}
.post-art .illo-blob {
	fill: var(--paper);
}
.post-art .hand-note {
	position: absolute;
	right: 0;
	top: 4%;
	transform: rotate(-8deg);
}
.cat-lede {
	font-size: 1.15rem;
	color: var(--ink-soft);
	margin: 0 0 1rem;
	max-width: 32rem;
}
.cat-count {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-weight: 800;
	font-size: 0.95rem;
	background: var(--paper);
	border-radius: 999px;
	padding: 0.25rem 0.9rem 0.25rem 0.5rem;
}
.cat-count .icon {
	color: var(--butter-deep);
	width: 1.2rem;
	height: 1.2rem;
}

/* "In het kort": a scalloped announcement card */
.summary {
	--icon-tint: var(--tint-butter);
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--gutter), 44rem);
	margin: clamp(-3.25rem, -4vw, -1.5rem) auto 2.75rem;
	background: var(--paper);
	padding: 1.6rem clamp(1.25rem, 4vw, 2.25rem) 1.5rem;
	border-radius: 6px;
	filter: drop-shadow(0 14px 22px var(--shadow));
}
.summary::before,
.summary::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 12px;
	background: radial-gradient(circle at 12px 12px, var(--paper) 11.5px, transparent 12.5px) 0 0 / 24px 12px repeat-x;
}
.summary::before {
	top: -11px;
}
.summary::after {
	bottom: -11px;
	transform: scaleY(-1);
}
.summary-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 620;
	font-size: 1.35rem;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	margin: 0 0 0.5rem;
}
.summary-label .icon {
	width: 2rem;
	height: 2rem;
}
.summary p {
	margin: 0;
	font-size: 1.1rem;
}

/* Article body */
.post .prose,
.prose-page {
	width: min(100% - 2 * var(--gutter), var(--measure));
	margin-inline: auto;
}
.prose-page {
	padding-top: 2.5rem;
}
.prose h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.55rem, 1.3rem + 0.9vw, 1.95rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	margin: 3rem 0 0.75rem;
}
.prose h2::before {
	content: "";
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	margin-bottom: 0.5rem;
	background: var(--tone-deep, var(--blush-deep));
	-webkit-mask: var(--sparkle) center / contain no-repeat;
	mask: var(--sparkle) center / contain no-repeat;
}
.prose h3 {
	font-size: 1.2rem;
	font-weight: 850;
	line-height: 1.3;
	margin: 2rem 0 0.4rem;
}
.prose p,
.prose ul,
.prose ol {
	margin: 0 0 1.15rem;
}
.prose strong {
	font-weight: 800;
}
.prose ul {
	list-style: none;
	padding: 0;
}
.prose li {
	position: relative;
	padding-left: 1.8rem;
	margin-bottom: 0.5rem;
}
.prose ul > li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.5em;
	width: 0.95rem;
	height: 0.95rem;
	background: var(--tone-deep, var(--blush-deep));
	-webkit-mask: var(--heart) center / contain no-repeat;
	mask: var(--heart) center / contain no-repeat;
}
.prose blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--tone-tint, var(--tint-blush));
	border-radius: 20px;
}

/* Checklists: a paper card with soft check circles */
.prose ul.checklist {
	background: var(--paper);
	border-radius: 24px;
	padding: 1.2rem 1.4rem 0.8rem;
	box-shadow: 0 16px 34px -28px var(--shadow);
	outline: 2px dashed color-mix(in srgb, var(--tone-deep, var(--sage-deep)) 45%, transparent);
	outline-offset: -9px;
}
.prose ul.checklist > li {
	padding-left: 2.3rem;
	margin-bottom: 0.65rem;
}
.prose ul.checklist > li::before {
	left: 0;
	top: 0.2em;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tone, var(--sage)) 55%, var(--paper));
	-webkit-mask: none;
	mask: none;
}
.prose ul.checklist > li::after {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: calc(0.2em + 0.3rem);
	width: 0.95rem;
	height: 0.95rem;
	background: var(--ink);
	-webkit-mask: var(--check) center / contain no-repeat;
	mask: var(--check) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
	.prose ul.checklist > li::before {
		background: color-mix(in srgb, var(--tone, var(--sage)) 35%, var(--paper));
	}
}

/* Callouts */
.callout {
	position: relative;
	margin: 1.5rem 0;
	padding: 1.2rem 1.4rem 0.4rem 4rem;
	border-radius: 24px 24px 24px 8px;
}
.callout-icon {
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	width: 2.1rem;
	height: 2.1rem;
}
.callout-tip {
	--icon-tint: var(--butter-deep);
	background: var(--tint-butter);
}
.callout-tip .callout-icon {
	color: #2d2a4c;
}
.callout-warn {
	--icon-tint: var(--blush-deep);
	background: var(--tint-blush);
}
.callout-warn .callout-icon {
	color: #2d2a4c;
}
.prose .nope-list > li::before {
	background: var(--blush-deep);
	-webkit-mask: var(--cross) center / contain no-repeat;
	mask: var(--cross) center / contain no-repeat;
	top: 0.45em;
}

/* Pros and cons */
.prose li.pro,
.prose li.con {
	padding-left: 2.1rem;
}
.prose li.pro::before,
.prose li.con::before {
	display: none;
}
.li-icon {
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.5rem;
	height: 1.5rem;
}
.pro .li-icon {
	--icon-tint: var(--tint-sage);
}
.con .li-icon {
	--icon-tint: var(--tint-blush);
}

/* Numbered steps (a real sequence) */
.prose ol.steps {
	list-style: none;
	padding: 0;
	counter-reset: step;
	position: relative;
}
.prose ol.steps::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 1rem;
	bottom: 1.5rem;
	border-left: 2px dashed var(--tone-deep, var(--butter-deep));
	opacity: 0.6;
}
.prose ol.steps > li {
	counter-increment: step;
	padding-left: 3.1rem;
	margin-bottom: 1rem;
	min-height: 2.2rem;
}
.prose ol.steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tone, var(--butter));
	color: #2d2a4c;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 0 0 5px var(--cream);
}

/* The timeline in "Wanneer maak je een geboortelijst?" */
.moon-steps {
	--moon-dark: #434a85;
	position: relative;
	padding-left: 3.4rem;
}
.moon-steps::before {
	content: "";
	position: absolute;
	left: 1.2rem;
	top: 1.5rem;
	bottom: 1rem;
	border-left: 2px dashed var(--butter-deep);
	opacity: 0.7;
}
.prose .moon-step {
	position: relative;
	margin-top: 1.75rem;
}
.moon-step .moon {
	position: absolute;
	left: -3.4rem;
	top: -0.45rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	box-shadow: 0 0 0 5px var(--cream);
	background: var(--cream);
}

.prose .topic-h3 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 2.25rem;
}
.h3-icon {
	--icon-tint: var(--tone, var(--sage));
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
}

/* Frequently asked questions as soft speech cards */
.faq-item {
	background: var(--paper);
	border-radius: 26px 26px 26px 8px;
	padding: 1.1rem 1.4rem 0.2rem;
	margin-bottom: 1rem;
	box-shadow: 0 14px 30px -26px var(--shadow);
}
.prose .faq-item h3 {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 0.4rem;
}
.faq-icon {
	color: var(--tone-deep, var(--blush-deep));
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
}

/* Sources */
.prose .sources-title {
	font-size: 1.3rem;
}
.prose ul.sources {
	font-size: 0.95rem;
	color: var(--ink-soft);
}
.prose ul.sources > li::before {
	width: 0.45rem;
	height: 0.45rem;
	top: 0.75em;
	left: 0.45rem;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
}

/* Tables */
.table-wrap {
	overflow-x: auto;
	margin: 1.5rem 0;
	background: var(--paper);
	border-radius: 20px;
	box-shadow: 0 14px 30px -26px var(--shadow);
}
.prose table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.98rem;
}
.prose th,
.prose td {
	padding: 0.65rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--tone-tint, var(--tint-sage));
}
.prose th {
	background: var(--tone-tint, var(--tint-sage));
	font-weight: 800;
}
.prose tr:last-child td {
	border-bottom: 0;
}
.prose hr {
	border: 0;
	height: 1.5rem;
	margin: 2.5rem 0;
	background: var(--sparkle-row) center / 6rem 1.5rem no-repeat;
	opacity: 0.6;
}
.page-updated {
	color: var(--ink-soft);
	font-size: 0.92rem;
}

/* Lees ook */
.related {
	margin-top: 3.5rem;
}
.related-body {
	background: var(--tint-blush);
	padding-block: 1rem 3.5rem;
}
.related .section-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}
.title-heart {
	color: var(--blush-deep);
	width: 1.6rem;
	height: 1.6rem;
}
.related .card-art .illo-blob {
	fill: var(--paper);
	opacity: 0.6;
}
.related .card-desc {
	display: none;
}
.is-post .site-footer {
	background: var(--tint-blush);
}

/* 404 */
.not-found {
	text-align: center;
	padding-block: 1rem 1.5rem;
}
.not-found-art {
	position: relative;
	width: min(100%, 22rem);
	margin: 0 auto;
}
.not-found-art .hand-note {
	position: absolute;
	left: -1.5rem;
	top: 38%;
	transform: rotate(-10deg);
}
.not-found .hero-title {
	margin-top: 0.5rem;
}
.not-found .hero-lede {
	margin-bottom: 1.75rem;
}

/* Footer */
.site-footer {
	margin-top: clamp(3rem, 6vw, 5rem);
}
.is-post .site-footer {
	margin-top: 0;
}
.footer-body {
	background: var(--footer-bg);
}
.footer-inner {
	display: grid;
	gap: 1rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	padding-block: 1.5rem 2.5rem;
	font-size: 0.98rem;
}
.footer-about p {
	margin: 0 0 0.5rem;
	color: var(--ink-soft);
	max-width: 26rem;
}
.footer-about .footer-name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	font-size: 1.6rem;
	margin-bottom: 0.6rem;
}
.footer-about .footer-name {
	white-space: nowrap;
}
.footer-name .logo-mark {
	width: 2.4rem;
	height: 2.4rem;
}
.footer-body {
	background-image:
		radial-gradient(3px 3px at 72% 22%, var(--blush-deep) 60%, transparent 62%),
		radial-gradient(2.5px 2.5px at 88% 60%, var(--butter-deep) 60%, transparent 62%),
		radial-gradient(2px 2px at 60% 78%, var(--powder-deep) 60%, transparent 62%),
		radial-gradient(3px 3px at 95% 18%, var(--sage-deep) 60%, transparent 62%);
}
.footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}
.footer-nav a {
	color: var(--ink);
	font-weight: 700;
}
.footer-small {
	grid-column: 1 / -1;
	color: var(--ink-soft);
	font-size: 0.88rem;
	margin: 0;
}

/* Shapes used as CSS masks (small SVG files in /assets/shapes/) */
:root {
	--heart: url("/assets/shapes/heart.svg");
	--check: url("/assets/shapes/check.svg");
	--cross: url("/assets/shapes/cross.svg");
	--sparkle: url("/assets/shapes/sparkle.svg");
	--sparkle-row: url("/assets/shapes/sparkle-row.svg");
}

/* Gentle motion, only when the visitor allows it */
.sway,
.twinkle {
	transform-box: view-box;
}
.twinkle {
	transform-box: fill-box;
	transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
	.sway {
		animation: sway 7s ease-in-out infinite alternate;
	}
	.sway-bar {
		animation-duration: 11s;
	}
	.hero-scene .twinkle {
		animation: twinkle 4s ease-in-out infinite;
	}
	.hero-scene .twinkle:nth-of-type(2n) {
		animation-delay: -2s;
	}
	.card-art svg,
	.cat-blob-art svg {
		transition: transform 0.35s ease;
	}
	.card-link:hover .card-art svg,
	.cat-blob a:hover .cat-blob-art svg {
		transform: translateY(-4px) rotate(-1.5deg);
	}
}
@keyframes sway {
	from {
		transform: rotate(-2.5deg);
	}
	to {
		transform: rotate(2.5deg);
	}
}
@keyframes twinkle {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.35;
		transform: scale(0.7);
	}
}

/* Smaller screens */
@media (max-width: 860px) {
	.feature {
		grid-template-columns: 1fr;
	}
	.feature-art {
		width: min(100%, 26rem);
		margin: 0 auto;
	}
	.feature-card {
		margin: -3rem 0 0;
	}
	.post-hero-inner {
		grid-template-columns: 1fr;
	}
	.post-art {
		grid-row: 1;
		width: min(78%, 20rem);
		margin-bottom: -0.5rem;
	}
	.moon-line {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: left;
		max-width: 30rem;
		margin-inline: auto;
	}
	.moon-line::before {
		top: 1.5rem;
		bottom: 1.5rem;
		left: 31px;
		right: auto;
		border-top: 0;
		border-left: 2px dashed rgba(246, 220, 140, 0.45);
	}
	.moon-stop {
		display: grid;
		grid-template-columns: 64px 1fr;
		column-gap: 1rem;
		align-items: start;
	}
	.moon-stop .moon {
		grid-row: span 2;
	}
	.moon-when {
		margin-top: 0.4rem;
	}
	.moon-text {
		max-width: none;
	}
}
@media (max-width: 640px) {
	body {
		font-size: 1.0625rem;
	}
	.header-inner {
		justify-content: center;
	}
	.nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		font-size: 0.88rem;
	}
	.nav a {
		width: 100%;
		padding-right: 0.5rem;
		line-height: 1.2;
		background: var(--paper);
	}
	.hero-text {
		margin-top: -0.5rem;
	}
	.cat-blobs {
		gap: 1.25rem;
	}
	.cat-blob a {
		display: grid;
		grid-template-columns: 8.5rem 1fr;
		column-gap: 0.75rem;
		align-items: center;
		text-align: left;
		padding: 0;
	}
	.cat-blob-art {
		grid-row: span 3;
	}
	.cat-blob-name {
		font-size: 1.25rem;
	}
	.cat-blob-intro {
		font-size: 0.95rem;
		line-height: 1.45;
	}
	.cat-blob-count {
		justify-self: start;
	}
	.callout {
		padding-left: 1.25rem;
		padding-top: 3.6rem;
	}
	.post-art .hand-note {
		right: -0.5rem;
	}
	.not-found-art .hand-note {
		left: 0;
		top: 30%;
	}
}