/* Mama to the Max-gids: Flemish feestkaart and nieuwjaarsbrief.
   Lilac envelope paper, white letter sheets with ornamental borders, paper-cut drawings,
   plum ink, spring green, ochre and poppy. Light only, by choice: it is paper. */

@font-face {
	font-family: "Gloock";
	src: url("/assets/fonts/gloock-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Alegreya Sans";
	src: url("/assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Alegreya Sans";
	src: url("/assets/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Alegreya Sans";
	src: url("/assets/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Playwrite BE VLG";
	src: url("/assets/fonts/playwrite-be-vlg-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;
	--page: #f3ecf4;
	--page-deep: #e7dcea;
	--sheet: #fffdf9;
	--ink: #36173f;
	--ink-soft: #5c4664;
	--shade: rgba(54, 23, 63, 0.16);
	--lijn: #b9c9ea;

	--plum: #7a3a84;
	--plum-deep: #4e1f57;
	--plum-soft: #e8d6ec;
	--lente: #5a9a36;
	--lente-deep: #2f6a1e;
	--lente-soft: #dcedc8;
	--oker: #e4a72c;
	--oker-deep: #8a5a06;
	--oker-soft: #f8e5b5;
	--klaproos: #ec5b43;
	--klaproos-deep: #b3341f;
	--klaproos-soft: #fbd6cb;

	--font-display: "Gloock", "Georgia", serif;
	--font-text: "Alegreya Sans", "Segoe UI", "Helvetica Neue", sans-serif;
	--font-hand: "Playwrite BE VLG", "Segoe Print", cursive;

	--wrap: 1180px;
	--gutter: clamp(16px, 4vw, 40px);
	--radius: 6px;
	--icon-tint: var(--plum-soft);

	/* the current tone, overridden per article and category */
	--tone: var(--klaproos);
	--tone-deep: var(--klaproos-deep);
	--tone-soft: var(--klaproos-soft);
}

.tone-klaproos { --tone: var(--klaproos); --tone-deep: var(--klaproos-deep); --tone-soft: var(--klaproos-soft); }
.tone-lente { --tone: var(--lente); --tone-deep: var(--lente-deep); --tone-soft: var(--lente-soft); }
.tone-oker { --tone: var(--oker); --tone-deep: var(--oker-deep); --tone-soft: var(--oker-soft); }
.tone-plum { --tone: var(--plum); --tone-deep: var(--plum-deep); --tone-soft: var(--plum-soft); }

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

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

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1.1875rem;
	line-height: 1.6;
	overflow-x: hidden;
}

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

a {
	color: var(--plum-deep);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
}
a:hover {
	color: var(--klaproos-deep);
}

:focus-visible {
	outline: 3px solid var(--plum-deep);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 6px var(--oker-soft);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0.002em;
	color: var(--ink);
	text-wrap: balance;
}

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

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

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 10;
	padding: 10px 16px;
	background: var(--plum-deep);
	color: var(--sheet);
	border-radius: var(--radius);
}
.skip:focus {
	top: 12px;
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* ---------- header ---------- */

.site-header {
	position: relative;
	padding: 18px 0 22px;
	background: var(--page);
}
/* ornamental strip under the header: dots and flowers like a letter border */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	background:
		radial-gradient(circle at 12px 6px, var(--plum) 2.4px, transparent 3px) 0 0 / 48px 12px repeat-x,
		radial-gradient(circle at 36px 6px, var(--klaproos) 3.2px, transparent 3.8px) 0 0 / 48px 12px repeat-x,
		linear-gradient(var(--oker), var(--oker)) 0 5px / 100% 2px no-repeat;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	flex-wrap: wrap;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}
.logo-mark {
	width: 46px;
	height: 46px;
	flex: none;
}
.logo-name {
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: 1.55rem;
	line-height: 1;
	letter-spacing: 0.005em;
}
.logo:hover .logo-mark {
	transform: rotate(-12deg);
}
.logo-mark {
	transition: transform 0.4s ease;
}

.nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
}
.nav a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 7px;
	border-radius: 999px;
	color: var(--ink);
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	line-height: 1.2;
}
.nav a:hover {
	background: var(--sheet);
	color: var(--plum-deep);
}
.nav a[aria-current] {
	background: var(--sheet);
	box-shadow: 0 0 0 2px var(--plum-soft);
}
.nav-icon {
	width: 30px;
	height: 30px;
}
.nav-flower {
	width: 24px;
	height: 24px;
	margin: 3px;
	color: var(--plum);
	--icon-tint: var(--oker);
}

/* ---------- shared pieces ---------- */

/* the ornamental letter frame: corner flowers and a dotted ochre rule */
.kader {
	border: 30px solid transparent;
	border-image: url("/assets/shapes/kader.svg") 32 round;
	background: var(--sheet) border-box;
	box-shadow: 0 3px 0 var(--shade);
}

.section-title {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	margin: 0 0 0.4em;
}
.section-title a {
	color: inherit;
	text-decoration: none;
}
.section-title a:hover {
	text-decoration: underline;
}
.title-icon {
	display: inline-block;
	vertical-align: -0.1em;
	margin-right: 0.35em;
	color: var(--plum);
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px 12px 18px;
	border-radius: 999px;
	background: var(--plum-deep);
	color: var(--sheet);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--plum-deep);
	transition: background 0.2s ease;
}
.button .icon {
	--icon-tint: var(--oker);
	color: var(--plum-deep);
}
.button:hover .icon {
	color: var(--klaproos-deep);
}
.button:hover {
	background: var(--klaproos-deep);
	color: var(--sheet);
}

.hand-note {
	position: absolute;
	font-family: var(--font-hand);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--plum-deep);
	background: var(--sheet);
	padding: 4px 12px 6px;
	border-radius: 3px;
	box-shadow: 0 2px 0 var(--shade);
	transform: rotate(-4deg);
	white-space: nowrap;
}

.card-cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--ink-soft);
	line-height: 1.2;
	margin: 0;
}
.card-cat-icon {
	width: 28px;
	height: 28px;
}

/* ---------- homepage: hero ---------- */

.hero {
	position: relative;
	padding-bottom: clamp(20px, 4vw, 48px);
}
.hero-garland {
	height: 88px;
	margin-top: 4px;
}
.hero-garland .slinger,
.footer-garland .slinger {
	width: 100%;
	height: 100%;
}
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	margin-top: -26px;
}
.hero-letter {
	position: relative;
	padding: clamp(14px, 2.4vw, 30px) clamp(12px, 2.4vw, 30px);
	transform: rotate(-1.2deg);
}
.hero-hello {
	margin: 0 0 0.6em;
	font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
	color: var(--plum);
}
.hero-title {
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.1rem);
	line-height: 1.02;
	margin: 0 0 0.35em;
}
.hero-lede {
	font-size: clamp(1.15rem, 1rem + 0.4vw, 1.32rem);
	line-height: 1.55;
	margin: 0 0 1em;
	max-width: 36em;
}
.hero-sign {
	margin: 0;
	text-align: right;
	color: var(--plum);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
}
.hero-art .hero-scene {
	width: 108%;
	max-width: none;
	height: auto;
	margin-left: -2%;
}

/* ---------- homepage: the featured guide as an envelope ---------- */

.feature-band {
	padding: clamp(28px, 5vw, 60px) 0;
}
.feature-envelope {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	padding: clamp(26px, 4vw, 48px);
	background:
		linear-gradient(var(--sheet), var(--sheet)) padding-box,
		repeating-linear-gradient(-45deg, var(--klaproos) 0 16px, var(--sheet) 16px 24px, var(--plum) 24px 40px, var(--sheet) 40px 48px) border-box;
	border: 12px solid transparent;
	border-radius: 4px;
	box-shadow: 0 4px 0 var(--shade);
}
.feature-art {
	position: relative;
}
.feature-art .illo {
	width: 100%;
	height: auto;
}
.feature-art .hand-note {
	left: 2%;
	bottom: 6%;
}
.feature-title {
	font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
	margin: 0.3em 0 0.4em;
}
.feature-desc {
	margin: 0 0 1.4em;
	max-width: 34em;
}
.postmark {
	position: absolute;
	top: -26px;
	right: clamp(10px, 3vw, 40px);
	width: clamp(92px, 11vw, 124px);
	height: auto;
	color: var(--plum-deep);
	opacity: 0.88;
	transform: rotate(12deg);
	font-family: var(--font-text);
	font-weight: 700;
	background: var(--sheet);
	border-radius: 50%;
}
.postmark .postmark-mid {
	font-family: var(--font-display);
	font-weight: 400;
}

/* ---------- homepage: the feestslinger ---------- */

.feest {
	position: relative;
	padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 56px);
	background: var(--oker-soft);
	border-block: 0 solid var(--oker-soft);
}
.feest::before,
.feest::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 16px;
	background: var(--oker-soft);
}
/* scalloped edges, like the rim of a cut paper card */
.feest::before {
	top: -15px;
	-webkit-mask: radial-gradient(circle at 14px 16px, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
	mask: radial-gradient(circle at 14px 16px, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
}
.feest::after {
	bottom: -15px;
	-webkit-mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
	mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
}
.feest-head {
	max-width: 40em;
}
.feest-lede {
	margin: 0;
	font-size: 1.2rem;
}
.feest-line {
	position: relative;
	margin-top: clamp(20px, 3vw, 34px);
}
.feest-string {
	position: absolute;
	left: -2%;
	top: 0;
	width: 104%;
	max-width: none;
	height: 90px;
	color: var(--plum-deep);
}
.moments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	position: relative;
}
.moment {
	position: relative;
	padding-top: 22px;
	filter: drop-shadow(0 3px 0 var(--shade));
}
/* the cards hang lower in the middle, where the string sags */
.moment:nth-child(1) { margin-top: 2px; }
.moment:nth-child(2) { margin-top: 28px; }
.moment:nth-child(3) { margin-top: 38px; }
.moment:nth-child(4) { margin-top: 28px; }
.moment:nth-child(5) { margin-top: 2px; }
.moment:nth-child(odd) .moment-card { transform: rotate(-1.6deg); }
.moment:nth-child(even) .moment-card { transform: rotate(1.4deg); }
/* the paper flower that pins each card to the string */
.moment::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	z-index: 2;
	background: url("/assets/shapes/bloemetje.svg") center / contain no-repeat;
}
/* a stamp with perforated edges */
.moment-card {
	--r: 4px;
	--s: 14px;
	position: relative;
	height: 100%;
	padding: 18px 16px 18px;
	background: var(--sheet);
	-webkit-mask:
		linear-gradient(#000 0 0) center / calc(100% - 4 * var(--r)) calc(100% - 4 * var(--r)) no-repeat,
		radial-gradient(circle at center, transparent var(--r), #000 calc(var(--r) + 0.5px)) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round;
	mask:
		linear-gradient(#000 0 0) center / calc(100% - 4 * var(--r)) calc(100% - 4 * var(--r)) no-repeat,
		radial-gradient(circle at center, transparent var(--r), #000 calc(var(--r) + 0.5px)) calc(var(--s) / -2) calc(var(--s) / -2) / var(--s) var(--s) round;
}
.moment-card::before {
	content: "";
	position: absolute;
	inset: 9px;
	border: 2px solid var(--tone-soft);
	pointer-events: none;
}
.moment-art .illo {
	width: 100%;
	height: auto;
	margin: -4px auto 2px;
	max-width: 200px;
}
.moment-name {
	font-size: 1.3rem;
	line-height: 1.12;
	margin: 0 0 0.45em;
}
.moment-age {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0.7em;
	padding: 3px 10px 3px 6px;
	border-radius: 999px;
	background: var(--tone-soft);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.25;
	--icon-tint: var(--sheet);
	color: var(--ink);
}
.moment-age .icon {
	color: var(--tone-deep);
}
.moment-facts {
	margin: 0 0 0.8em;
	font-size: 1.02rem;
	line-height: 1.4;
}
.moment-facts dt {
	font-family: var(--font-hand);
	font-size: 0.82rem;
	color: var(--tone-deep);
	margin-top: 0.5em;
}
.moment-facts dd {
	margin: 0.1em 0 0;
}
.moment-facts dd::first-letter {
	text-transform: uppercase;
}
.moment-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}
.moment-links a {
	color: var(--plum-deep);
}
.feest-source {
	margin: 34px 0 0;
	font-size: 1.02rem;
	color: var(--ink-soft);
	max-width: 52em;
}
.feest-source a {
	font-weight: 700;
}

/* ---------- homepage: categories as envelopes ---------- */

.cats {
	padding: clamp(48px, 6vw, 76px) 0 clamp(16px, 3vw, 28px);
}
.envelopes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}
.envelope a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 22px 22px;
	background: var(--sheet);
	color: var(--ink);
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 3px 0 var(--shade);
	overflow: hidden;
	transition: transform 0.25s ease;
}
/* the flap of the envelope, in the category colour */
.envelope a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 92px;
	background: var(--tone);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.envelope a:hover {
	transform: translateY(-4px) rotate(-0.6deg);
}
.envelope-art {
	position: relative;
	display: block;
	margin: 14px auto 4px;
	width: min(100%, 250px);
}
.envelope-art .illo {
	width: 100%;
	height: auto;
}
.envelope-name {
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.1;
	margin-bottom: 0.3em;
}
.envelope a:hover .envelope-name {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}
.envelope-intro {
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.45;
	margin-bottom: 14px;
}
.envelope-count {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--tone-deep);
}
.envelope-icon {
	width: 32px;
	height: 32px;
}

/* ---------- article cards ---------- */

.topic {
	padding: clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 16px);
}
.topic-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.topic-head .section-title {
	margin: 0;
}
.topic-icon {
	width: 52px;
	height: 52px;
}
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 26px;
}
.card-link {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: center;
	gap: 6px 16px;
	height: 100%;
	padding: 14px 20px 14px 10px;
	background: var(--sheet);
	border-radius: 4px;
	color: var(--ink);
	text-decoration: none;
	box-shadow: 0 3px 0 var(--shade);
	border-left: 6px solid var(--tone);
	transition: transform 0.25s ease;
}
.card:nth-child(4n + 2) .card-link { transform: rotate(0.5deg); }
.card:nth-child(4n + 3) .card-link { transform: rotate(-0.4deg); }
.card-link:hover {
	transform: translateY(-3px) rotate(-0.5deg);
}
.card-art .illo {
	width: 150px;
	height: auto;
}
.card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.card-title {
	font-family: var(--font-display);
	font-size: 1.38rem;
	line-height: 1.15;
	color: var(--ink);
}
.card-link:hover .card-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}
.card-desc {
	color: var(--ink-soft);
	font-size: 1.02rem;
	line-height: 1.45;
}
.empty {
	padding: 20px;
	background: var(--sheet);
}

/* ---------- article and page header ---------- */

.post-head {
	position: relative;
	padding: clamp(22px, 3vw, 36px) 0 clamp(70px, 8vw, 110px);
	background: color-mix(in srgb, var(--tone-soft) 58%, var(--sheet));
}
.cat-head {
	padding-bottom: clamp(30px, 4vw, 48px);
}
.post-head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;
	height: 16px;
	background: color-mix(in srgb, var(--tone-soft) 58%, var(--sheet));
	-webkit-mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
	mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
}
.post-head-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(12px, 3vw, 40px);
	align-items: center;
}
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 14px;
}
.crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ink);
}
.crumb-icon {
	--icon-tint: var(--sheet);
	color: var(--tone-deep);
}
.crumb-sep {
	color: var(--ink-soft);
}
.post-title {
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
	line-height: 1.04;
	margin: 0 0 0.45em;
}
.post-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}
.post-meta li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px 5px 7px;
	background: var(--sheet);
	border-radius: 999px;
	--icon-tint: var(--tone-soft);
}
.post-meta .icon {
	color: var(--tone-deep);
}
.post-art {
	position: relative;
	justify-self: center;
	width: min(100%, 360px);
}
.post-art .illo {
	width: 100%;
	height: auto;
}
.post-art .hand-note {
	right: -4%;
	bottom: 4%;
}
.cat-lede {
	font-size: 1.22rem;
	max-width: 34em;
	margin: 0 0 0.9em;
}
.cat-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 14px 4px 6px;
	border-radius: 999px;
	background: var(--sheet);
	font-weight: 700;
}
.cat-count-icon {
	width: 34px;
	height: 34px;
}
.topic-cat {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* ---------- the letter sheet ---------- */

.sheet-wrap {
	width: min(100% - 2 * var(--gutter), 900px);
	margin: clamp(-80px, -6vw, -48px) auto 0;
	position: relative;
	z-index: 1;
}
.sheet {
	border: 30px solid transparent;
	border-image: url("/assets/shapes/kader.svg") 32 round;
	background: var(--sheet) border-box;
	box-shadow: 0 4px 0 var(--shade);
	padding: clamp(12px, 3vw, 40px) clamp(6px, 3.4vw, 46px) clamp(16px, 3vw, 36px);
}

/* "In het kort": a page from a school exercise book */
.summary {
	position: relative;
	margin: 0 0 2.2rem;
	padding: 12px 22px 18px 64px;
	background:
		linear-gradient(90deg, transparent 48px, var(--klaproos) 48px 50px, transparent 50px),
		repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1.5px), var(--lijn) calc(2rem - 1.5px) 2rem) 0 8px,
		#fbfcff;
	border-radius: 3px;
	box-shadow: 0 0 0 1px var(--plum-soft), 0 3px 0 var(--shade);
	transform: rotate(-0.4deg);
}
.summary::before {
	/* binder holes */
	content: "";
	position: absolute;
	left: 14px;
	top: 18px;
	bottom: 18px;
	width: 16px;
	background: radial-gradient(circle, var(--page-deep) 6px, transparent 6.5px) center top / 16px 64px repeat-y;
}
.summary-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--font-hand);
	font-size: 1.15rem;
	line-height: 2rem;
	color: var(--klaproos-deep);
	--icon-tint: var(--klaproos-soft);
}
.summary-label .icon {
	color: var(--klaproos-deep);
}
.summary p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 2rem;
}

/* ---------- article text ---------- */

.prose {
	max-width: 40em;
	margin-inline: auto;
}
.prose > p:first-child {
	font-size: 1.28rem;
	line-height: 1.55;
}
.prose h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
	margin: 2em 0 0.5em;
}
.prose h2::before {
	/* a small paper flower before every section, the way a child decorates a letter */
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 8px;
	background: url("/assets/shapes/bloemetje.svg") center / contain no-repeat;
}
.prose .box h2::before,
.prose .faq h2::before,
.prose .bronnen h2::before {
	display: none;
}
.prose h3 {
	font-size: 1.36rem;
	margin: 1.6em 0 0.4em;
}
.prose p,
.prose ul,
.prose ol {
	margin: 0 0 1em;
}
.prose ul {
	list-style: none;
	padding-left: 0;
}
.prose ul:not(.checklist, .sources) > li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 0.45em;
}
.prose ul:not(.checklist, .sources) > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.38em;
	width: 16px;
	height: 16px;
	background: url("/assets/shapes/bloemetje.svg") center / contain no-repeat;
}
.prose strong {
	color: var(--plum-deep);
}

/* numbered steps, each in a stamp circle */
.steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
}
.steps > li {
	counter-increment: step;
	position: relative;
	padding: 6px 0 6px 56px;
	margin-bottom: 10px;
	min-height: 44px;
}
.steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--sheet);
	background: var(--plum);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--plum-soft);
}

/* tables */
.table-wrap {
	margin: 1.2em 0 1.6em;
	overflow-x: auto;
	border-radius: 6px;
	box-shadow: 0 0 0 2px var(--tone-soft);
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.02rem;
	line-height: 1.4;
	background: var(--sheet);
}
.prose th {
	text-align: left;
	vertical-align: bottom;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.12rem;
	padding: 12px 14px;
	background: var(--tone-soft);
	color: var(--ink);
}
.prose td {
	vertical-align: top;
	padding: 11px 14px;
	border-top: 1px dashed var(--plum-soft);
}
.prose td:first-child {
	font-weight: 700;
	color: var(--plum-deep);
}
.prose tbody tr:nth-child(even) td {
	background: #fbf7fb;
}

/* boxes: checklist, tip and let op */
.box {
	position: relative;
	margin: 2.2em 0;
	padding: 20px 24px 10px;
	border-radius: 4px;
}
.box-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0.6em !important;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem) !important;
}
.box-icon {
	width: 34px;
	height: 34px;
}
.box-checklist {
	background: var(--sheet);
	box-shadow: 0 0 0 2px var(--lente-soft), 0 3px 0 var(--shade);
}
.box-checklist .box-icon {
	color: var(--lente-deep);
	--icon-tint: var(--lente-soft);
}
.box-inline {
	margin: 1.4em 0;
}
.checklist {
	list-style: none;
	padding: 0;
}
.checklist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 0.5em 0;
	border-bottom: 1.5px dashed var(--lente-soft);
}
.checklist li:last-child {
	border-bottom: 0;
}
.checklist .tick {
	width: 28px;
	height: 28px;
	flex: none;
	margin-top: 0.05em;
}
.box-tip {
	background: var(--oker-soft);
	box-shadow: 0 3px 0 var(--shade);
	transform: rotate(-0.5deg);
	padding-top: 26px;
}
/* a paper flower pinning the note */
.box-tip::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	background: url("/assets/shapes/bloemetje.svg") center / contain no-repeat;
}
.box-tip .box-icon {
	color: var(--oker-deep);
	--icon-tint: var(--sheet);
}
.box-letop {
	background: var(--sheet);
	box-shadow: 0 0 0 2px var(--klaproos-soft);
	border-left: 8px solid var(--klaproos);
}
.box-letop .box-icon {
	color: var(--klaproos-deep);
	--icon-tint: var(--klaproos-soft);
}
.letop-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 1.2em;
	padding: 14px 18px;
	background: var(--klaproos-soft);
	border-radius: 4px;
	--icon-tint: var(--sheet);
	color: var(--ink);
}
.letop-note .letop-icon {
	width: 30px;
	height: 30px;
	color: var(--klaproos-deep);
}
.letop-note p {
	margin: 0;
}

/* frequently asked questions */
.faq {
	margin-top: 2.6em;
}
.faq-title {
	margin-bottom: 0.7em;
}
.faq-item {
	position: relative;
	margin-bottom: 14px;
	padding: 14px 20px 4px;
	background: var(--plum-soft);
	border-radius: 4px 18px 4px 4px;
}
.faq-item h3 {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 0.4em;
	font-size: 1.25rem;
}
.faq-icon {
	width: 28px;
	height: 28px;
	margin-top: -1px;
	color: var(--plum-deep);
	--icon-tint: var(--sheet);
}
.faq-item p {
	margin-left: 38px;
}

/* sources */
.bronnen {
	margin-top: 2.6em;
	padding-top: 1.2em;
	border-top: 2px dashed var(--plum-soft);
}
.bronnen-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem !important;
	margin-top: 0 !important;
}
.bronnen-icon {
	width: 32px;
	height: 32px;
	color: var(--plum-deep);
}
.sources {
	list-style: none;
	padding: 0;
	font-size: 1.02rem;
	line-height: 1.45;
}
.sources li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 0.6em;
	overflow-wrap: anywhere;
}
.source-icon {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	color: var(--plum);
	--icon-tint: var(--oker-soft);
}

.prose-page .page-updated {
	color: var(--ink-soft);
	font-size: 1rem;
}

/* ---------- related ---------- */

.related {
	padding: clamp(48px, 6vw, 72px) 0 clamp(24px, 4vw, 40px);
}

/* ---------- 404 ---------- */

.not-found {
	padding: clamp(28px, 5vw, 60px) 0 clamp(10px, 2vw, 20px);
}
.not-found-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(16px, 3vw, 40px);
	align-items: center;
}
.not-found-art {
	position: relative;
}
.not-found-art .illo {
	width: 100%;
	height: auto;
}
.not-found-art .hand-note {
	left: 6%;
	bottom: 6%;
}
.not-found-text {
	padding: clamp(12px, 2vw, 24px);
	transform: rotate(1deg);
}
.not-found-text .hero-title {
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
	margin-top: 0;
}

/* ---------- footer ---------- */

.site-footer {
	margin-top: clamp(48px, 6vw, 80px);
	background: var(--plum-deep);
	color: var(--sheet);
	position: relative;
}
.footer-garland {
	height: 80px;
	background: var(--page);
}
.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 79px;
	height: 16px;
	background: var(--page);
	-webkit-mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
	mask: radial-gradient(circle at 14px 0, #000 13px, transparent 13.5px) 0 0 / 28px 16px repeat-x;
}
.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 20px 40px;
	padding: 48px 0 36px;
}
.footer-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0 0 0.4em;
}
.footer-about p {
	max-width: 30em;
}
.footer-about p:not(.footer-name) {
	margin: 0;
	color: #f1e4f2;
}
.footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 24px;
}
.footer-nav li {
	margin-bottom: 6px;
}
.footer-nav a {
	color: var(--sheet);
	font-weight: 700;
}
.footer-nav a:hover {
	color: var(--oker-soft);
}
.site-footer :focus-visible {
	outline-color: var(--oker);
	box-shadow: none;
}
.footer-small {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.98rem;
	color: #e3cfe6;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
	.feest-string {
		display: none;
	}
	.moments {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 22px;
	}
	.moment:nth-child(n) {
		margin-top: 0;
	}
	.moment:nth-child(5) {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(100%, 420px);
	}
	.moment-art .illo {
		max-width: 180px;
	}
}

@media (max-width: 900px) {
	.hero-inner,
	.feature-envelope,
	.post-head-inner,
	.not-found-inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.hero-art {
		order: -1;
		width: min(100%, 460px);
		margin: -10px auto 0;
	}
	.hero-art .hero-scene {
		width: 100%;
		margin-left: 0;
	}
	.hero-inner {
		margin-top: -10px;
	}
	.feature-art {
		width: min(100%, 360px);
		margin-inline: auto;
	}
	.post-art {
		width: min(78%, 300px);
		order: -1;
		margin-bottom: -6px;
	}
	.cat-head .post-art {
		order: 0;
	}
	.envelopes,
	.cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.envelope-art {
		width: min(100%, 220px);
	}
	.not-found-art {
		width: min(100%, 360px);
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 1.125rem;
	}
	.site-header {
		padding: 12px 0 20px;
	}
	.logo-mark {
		width: 40px;
		height: 40px;
	}
	.logo-name {
		font-size: 1.32rem;
	}
	.nav {
		gap: 4px;
	}
	.nav a {
		font-size: 0.95rem;
		padding: 4px 10px 4px 5px;
		background: var(--sheet);
	}
	.nav-icon {
		width: 26px;
		height: 26px;
	}
	.hero-garland {
		height: 64px;
	}
	.kader,
	.sheet {
		border-width: 20px;
	}
	.hero-letter {
		transform: rotate(-0.6deg);
	}
	.sheet-wrap {
		width: calc(100% - 16px);
	}
	.sheet {
		padding-inline: 6px;
	}
	.feature-envelope {
		border-width: 9px;
		padding: 22px 18px 26px;
	}
	.postmark {
		top: -20px;
		right: 8px;
		width: 86px;
	}
	.moments {
		grid-template-columns: minmax(0, 1fr);
	}
	/* on a phone the string runs down the middle, behind the cards */
	.moments::before {
		content: "";
		position: absolute;
		top: -12px;
		bottom: 20px;
		left: 50%;
		width: 2px;
		background: var(--plum-deep);
		opacity: 0.7;
	}
	.moment:nth-child(5) {
		width: 100%;
	}
	.moment-card {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}
	.moment-art {
		grid-row: span 5;
	}
	.moment-art .illo {
		max-width: 110px;
		margin-top: 6px;
	}
	.card-link {
		grid-template-columns: 104px minmax(0, 1fr);
		padding: 12px 14px 12px 6px;
		gap: 4px 10px;
	}
	.card-art .illo {
		width: 104px;
	}
	.card-title {
		font-size: 1.22rem;
	}
	.card-desc {
		font-size: 0.98rem;
	}
	.post-head {
		padding-bottom: 62px;
	}
	.post-art .hand-note {
		right: -8%;
	}
	.summary {
		padding: 10px 14px 14px 46px;
		background:
			linear-gradient(90deg, transparent 34px, var(--klaproos) 34px 36px, transparent 36px),
			repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1.5px), var(--lijn) calc(2rem - 1.5px) 2rem) 0 8px,
			#fbfcff;
	}
	.summary::before {
		left: 8px;
		width: 14px;
		background-size: 14px 64px;
	}
	.summary p {
		font-size: 1.1rem;
	}
	.box {
		padding: 16px 16px 8px;
	}
	.faq-item {
		padding: 12px 14px 2px;
	}
	.faq-item p {
		margin-left: 0;
	}
	/* tables become one card per row */
	.table-wrap {
		box-shadow: none;
		overflow: visible;
	}
	.prose table,
	.prose tbody,
	.prose tr,
	.prose td {
		display: block;
		width: 100%;
	}
	.prose thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.prose table {
		background: none;
	}
	.prose tr {
		margin-bottom: 14px;
		background: var(--sheet);
		border-radius: 6px;
		box-shadow: 0 0 0 2px var(--tone-soft);
		overflow: hidden;
	}
	.prose td {
		border-top: 0;
		padding: 4px 14px 8px;
	}
	.prose td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--font-hand);
		font-size: 0.8rem;
		color: var(--tone-deep);
		font-weight: 400;
		margin-top: 4px;
	}
	.prose td:first-child {
		background: var(--tone-soft) !important;
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 1.2rem;
		color: var(--ink);
		padding-top: 6px;
		padding-bottom: 10px;
	}
	.prose tbody tr:nth-child(even) td {
		background: none;
	}
	.footer-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}