.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--smal {
	max-width: calc(var(--container-smal) + var(--gutter) * 2);
}

.inhoud {
	display: block;
	outline: none;
}

.sectie {
	position: relative;
	padding-block: var(--sectie-ruimte);
	isolation: isolate;
}

.sectie--bureau {
	background-color: var(--kleur-hout);
	background-image: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 255, 255, 0.016), transparent 70%), var(--hout-nerf), linear-gradient(180deg, var(--kleur-hout), var(--kleur-nacht));
	color: var(--kleur-tekst-licht);
}

.sectie--bureau::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--ruis);
	opacity: 0.35;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.sectie--dossier {
	background-color: var(--kleur-papier);
	background-image: var(--papier-vlek), var(--ruis);
	color: var(--kleur-inkt);
}

.sectie--dossier a:not(.knop) {
	color: var(--kleur-zegel);
}

.sectie--kurk {
	background-color: var(--kleur-kurk);
	background-image: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.18) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgba(255, 220, 170, 0.12) 0 1px, transparent 1.5px), radial-gradient(circle at 40% 80%, rgba(0, 0, 0, 0.14) 0 1.5px, transparent 2px), var(--ruis), linear-gradient(180deg, var(--kleur-kurk), var(--kleur-kurk-donker));
	background-size: 7px 7px, 11px 11px, 13px 13px, 160px 160px, 100% 100%;
	color: var(--kleur-inkt);
	box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.45);
}

.sectie--kaart {
	background-color: #e8d9b6;
	background-image: url("../img/kaart-lijnen.svg"), var(--papier-vlek), var(--ruis);
	background-size: 900px auto, 100% 100%, 160px 160px;
	color: var(--kleur-inkt);
}

.sectie-kop {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	max-width: 720px;
}

.sectie-kop--midden {
	margin-inline: auto;
	text-align: center;
}

.sectie-kop--rij {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ruimte-5);
	max-width: none;
}

.sectie-kop--rij > div {
	max-width: 680px;
}

.sectie-titel {
	margin-bottom: var(--ruimte-4);
}

.sectie-intro {
	font-size: var(--fs-groot);
	opacity: 0.85;
}

.sectie-voet {
	display: flex;
	justify-content: center;
	margin-top: var(--ruimte-7);
}

.label {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: var(--ruimte-3);
	font-family: var(--font-type);
	font-size: var(--fs-klein);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kleur-zegel);
}

.label::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
}

.sectie--bureau .label,
.label--licht {
	color: var(--kleur-messing-licht);
}

.sectie-kop--midden .label::after {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
}

.label--stempel {
	padding: 0.35em 0.8em;
	border: 2px solid currentColor;
	border-radius: 3px;
	color: var(--kleur-zegel-licht);
	transform: rotate(-2deg);
	background: rgba(158, 43, 37, 0.08);
}

.label--stempel::before {
	display: none;
}

.scheur {
	display: none;
}

.sectie + .sectie::after,
.hero + .sectie::after,
.paginakop + .sectie::after,
.sectie--rand::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 22px;
	z-index: 3;
	pointer-events: none;
	background: inherit;
	background-position: top center;
	-webkit-mask: url("../img/scheur.svg") top center / 1400px 100% repeat-x;
	mask: url("../img/scheur.svg") top center / 1400px 100% repeat-x;
}

.paginakop {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(320px, 42vh, 460px);
	padding: calc(var(--kop-hoogte) + 3rem) 0 4.5rem;
	overflow: hidden;
	background: var(--kleur-nacht);
	isolation: isolate;
}

.paginakop-beeld {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.paginakop-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85) brightness(0.55);
	transform: scale(1.04);
}

.paginakop-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 60% 70% at 20% 0%, rgba(255, 255, 255, 0.028), transparent 70%), linear-gradient(180deg, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.85));
}

.paginakop:not(.heeft-beeld) .paginakop-licht {
	background: radial-gradient(ellipse 60% 70% at 20% 0%, rgba(255, 255, 255, 0.022), transparent 70%), var(--hout-nerf), linear-gradient(180deg, var(--kleur-hout), var(--kleur-nacht));
}

.paginakop-titel {
	max-width: 16ch;
	margin-bottom: var(--ruimte-3);
	animation: kop-in var(--duur-traag) var(--ease-uit) both;
}

.paginakop-intro {
	max-width: 56ch;
	font-size: var(--fs-groot);
	color: var(--kleur-papier-donker);
	animation: tekst-in var(--duur-traag) 120ms var(--ease-uit) both;
}

.pagina-tekst {
	padding-top: var(--ruimte-8);
}

.leeg-dossier {
	text-align: center;
	color: var(--kleur-inkt-zacht);
}

.kruimelpad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--ruimte-4);
	font-size: var(--fs-klein);
	color: var(--kleur-gedempt);
}

.kruimelpad a {
	color: inherit;
	text-decoration: none;
}

.kruimelpad a:hover {
	color: var(--kleur-messing-licht);
}

.berichten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--ruimte-6);
}

.bericht-kaart a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bericht-kaart img {
	margin-bottom: var(--ruimte-4);
	border-radius: var(--radius-klein);
}

.bericht-datum {
	font-family: var(--font-type);
	font-size: var(--fs-klein);
	color: var(--kleur-zegel);
}

.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--ruimte-2);
	margin-top: var(--ruimte-7);
}

.nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-klein);
	text-decoration: none;
	color: inherit;
}

.nav-links .current {
	background: var(--kleur-inkt);
	color: var(--kleur-papier);
}

@media (max-width: 700px) {
	.sectie-kop--rij {
		align-items: flex-start;
	}
}