/*
Theme Name: Norvello
Theme URI: https://norvello.org/
Author: Norvello Kaartkamer
Author URI: https://norvello.org/over-ons/
Description: Promothema voor het strategiespel Norvello. Vier tijdperken, drie leiders en vier eigen widgets: de tijdperkschijf, de rijksweger, de zegelproef en de handelsruil. Nederlandstalig, gericht op spelers in Belgie, met eigen berichtentypes voor spelersverslagen en kanselarijpost, Yoast-velden die bij installatie worden gevuld en een cookiebanner met eigen beleidspagina.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: norvello
Tags: one-column, custom-menu, featured-images, translation-ready, blog, landing-page
*/

/* ==========================================================================
   1. Grondtoon
   ========================================================================== */

:root {
	--perkament: #f4ecdb;
	--perkament-diep: #e8dcc3;
	--perkament-rand: #d6c6a6;
	--charta: #f7f0e0;
	--inkt: #221f1a;
	--inkt-zacht: #4a4438;
	--inkt-flauw: #6d6553;
	--lapis: #1c4468;
	--lapis-diep: #14314b;
	--lapis-licht: #2f6b9e;
	--goud: #b08542;
	--goud-licht: #d3ab63;
	/* Diepere tinten voor kleine letters en pictogrammen op perkament,
	   zodat het contrast ook bij 0,74rem boven de richtlijn blijft. */
	--goud-diep: #7d5a22;
	--goud-mid: #9a7130;
	--terra: #9c4229;
	--loof: #3d6b4a;
	--wit: #fffdf7;

	--breed: 1180px;
	--smal: 760px;
	--ronding: 3px;
	--ronding-groot: 6px;
	--schaduw: 0 2px 10px rgba(34, 31, 26, .10);
	--schaduw-diep: 0 10px 34px rgba(20, 49, 75, .18);
	--lijn: 1px solid var(--perkament-rand);
	--soepel: 220ms cubic-bezier(.4, .1, .3, 1);

	--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
	--sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

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

body {
	margin: 0;
	background: var(--perkament);
	background-image:
		radial-gradient(circle at 12% 8%, rgba(176, 133, 66, .09), transparent 42%),
		radial-gradient(circle at 88% 82%, rgba(28, 68, 104, .08), transparent 46%);
	color: var(--inkt);
	font: 400 1.0625rem/1.68 var(--sans);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 .6em;
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.18;
	color: var(--lapis-diep);
	letter-spacing: .004em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--lapis);
	text-decoration-color: rgba(28, 68, 104, .38);
	text-underline-offset: .16em;
	transition: color var(--soepel);
}

a:hover { color: var(--terra); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
li { margin-bottom: .38em; }

strong { font-weight: 700; }

small { font-size: .85rem; }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--perkament-rand) 18%, var(--perkament-rand) 82%, transparent);
	margin: 2.4rem 0;
}

:focus-visible {
	outline: 3px solid var(--lapis-licht);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: rgba(28, 68, 104, .18);
}

.verborgen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Het valstrikveld voor automatische inzendingen mag ook geen eigen maat
   krijgen van de formulierstijl. */
.formulier .verborgen input[type="text"],
.formulier .verborgen label {
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
}

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: .7rem 1.1rem;
	background: var(--lapis-diep);
	color: var(--wit);
	font-weight: 600;
	text-decoration: none;
}

.overslaan:focus {
	left: .6rem;
	top: .6rem;
	color: var(--wit);
}

/* ==========================================================================
   2. Raster
   ========================================================================== */

.breed {
	width: 100%;
	max-width: var(--breed);
	margin: 0 auto;
	padding: 0 1.4rem;
}

.smal {
	max-width: var(--smal);
	margin-left: auto;
	margin-right: auto;
}

.veld {
	position: relative;
	padding: 4.6rem 0;
}

.veld--dun { padding: 3.2rem 0; }

.veld--charta {
	background: var(--charta) url("images/charta.jpg") center / cover no-repeat;
	border-top: var(--lijn);
	border-bottom: var(--lijn);
	box-shadow: inset 0 0 90px rgba(160, 132, 84, .22);
}

.veld--lapis {
	background: linear-gradient(160deg, var(--lapis-diep), var(--lapis) 62%, #17395a);
	color: rgba(255, 253, 247, .9);
}

.veld--lapis h2,
.veld--lapis h3 { color: var(--wit); }

.veld--lapis a { color: var(--goud-licht); }
.veld--lapis a:hover { color: var(--wit); }

.veld--gestreept {
	background: var(--perkament-diep);
	border-top: var(--lijn);
	border-bottom: var(--lijn);
}

.veld__kop {
	max-width: 44rem;
	margin-bottom: 2.6rem;
}

.veld__kop--midden {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.veld__kop p:last-child { margin-bottom: 0; }

.opschrift {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .9rem;
	font: 600 .74rem/1 var(--sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--goud-diep);
}

.opschrift::before {
	content: "";
	width: 2.1rem;
	height: 1px;
	background: currentColor;
}

.veld--lapis .opschrift { color: var(--goud-licht); }

.inleiding {
	font-size: 1.13rem;
	color: var(--inkt-zacht);
}

.veld--lapis .inleiding { color: rgba(255, 253, 247, .82); }

.rooster {
	display: grid;
	gap: 1.5rem;
}

.rooster--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rooster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 2.8rem;
	align-items: center;
}

.duo--gedraaid > *:first-child { order: 2; }

/* ==========================================================================
   3. Knoppen en links
   ========================================================================== */

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .82rem 1.55rem;
	border: 1px solid transparent;
	border-radius: var(--ronding);
	font: 600 .93rem/1.25 var(--sans);
	letter-spacing: .045em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--soepel), background var(--soepel), color var(--soepel), box-shadow var(--soepel), border-color var(--soepel);
}

.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--hoofd {
	background: var(--lapis);
	color: var(--wit);
	box-shadow: 0 6px 18px rgba(28, 68, 104, .28);
}

.knop--hoofd:hover {
	background: var(--lapis-diep);
	color: var(--wit);
	box-shadow: 0 10px 24px rgba(20, 49, 75, .34);
}

.knop--rand {
	background: transparent;
	border-color: var(--goud);
	color: var(--lapis-diep);
}

.knop--rand:hover {
	background: var(--goud);
	border-color: var(--goud);
	color: #2a2114;
}

.veld--lapis .knop--rand,
.baken .knop--rand {
	border-color: var(--goud-licht);
	color: var(--wit);
}

.veld--lapis .knop--rand:hover,
.baken .knop--rand:hover {
	background: var(--goud-licht);
	color: #2a2114;
}

.knop--zacht {
	background: rgba(28, 68, 104, .08);
	color: var(--lapis-diep);
	border-color: rgba(28, 68, 104, .16);
}

.knop--zacht:hover {
	background: rgba(28, 68, 104, .16);
	color: var(--lapis-diep);
}

.knop--klein {
	padding: .55rem 1rem;
	font-size: .8rem;
}

/* Op de donkere banden verdwijnt een lapis vulling in de achtergrond en is
   donkere ink onleesbaar; die knoppen krijgen daarom een eigen kleedje. */
.veld--lapis .knop--hoofd,
.ruil__blad .knop--hoofd {
	background: var(--goud-licht);
	color: #2a2114;
	box-shadow: 0 6px 18px rgba(9, 20, 32, .38);
}

.veld--lapis .knop--hoofd:hover,
.ruil__blad .knop--hoofd:hover {
	background: var(--wit);
	color: var(--lapis-diep);
}

.veld--lapis .knop--zacht,
.ruil__blad .knop--zacht {
	background: rgba(255, 253, 247, .12);
	border-color: rgba(255, 253, 247, .3);
	color: var(--wit);
}

.veld--lapis .knop--zacht:hover,
.ruil__blad .knop--zacht:hover {
	background: rgba(255, 253, 247, .22);
	color: var(--wit);
}

.ruil__blad .knop--rand {
	border-color: var(--goud-licht);
	color: var(--wit);
}

.ruil__blad .knop--rand:hover {
	background: var(--goud-licht);
	color: #2a2114;
}

.knop[disabled],
.knop[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.knoprij {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	align-items: center;
}

.tekstlink {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: .96rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 68, 104, .35);
	padding-bottom: 1px;
}

.tekstlink::after {
	content: "\2192";
	transition: transform var(--soepel);
}

.tekstlink:hover::after { transform: translateX(4px); }

.veld--lapis .tekstlink { border-bottom-color: rgba(211, 171, 99, .5); }

/* ==========================================================================
   4. Kop en navigatie
   ========================================================================== */

.tijdlint {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: .6rem;
	height: 4px;
	background: rgba(28, 68, 104, .12);
	/* Puur decoratief: mag de bovenste pixels van de kop niet afschermen. */
	pointer-events: none;
}

.tijdlint__vul {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--goud), var(--lapis-licht));
	transition: width 90ms linear;
}

.tijdlint__naam {
	position: absolute;
	right: .9rem;
	top: 8px;
	padding: .18rem .55rem;
	background: var(--lapis-diep);
	color: var(--wit);
	border-radius: 999px;
	font: 600 .66rem/1.5 var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--soepel), transform var(--soepel);
	pointer-events: none;
}

.tijdlint__naam.is-zichtbaar {
	opacity: 1;
	transform: translateY(0);
}

.kop {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(244, 236, 219, .94);
	backdrop-filter: blur(9px);
	border-bottom: var(--lijn);
	transition: box-shadow var(--soepel), background var(--soepel);
}

.kop.is-gezakt {
	box-shadow: 0 4px 18px rgba(34, 31, 26, .12);
	background: rgba(244, 236, 219, .98);
}

.kop__binnen {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-height: 4.6rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.kop__merk {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: var(--lapis-diep);
	flex-shrink: 0;
}

.kop__zegel {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--perkament-rand), var(--schaduw);
}

.kop__naam {
	display: block;
	font: 600 1.32rem/1.05 var(--serif);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.kop__leus {
	display: block;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
}

.kop__nav {
	margin-left: auto;
}

.kop__nav ul {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kop__nav li { margin: 0; }

.kop__nav a {
	display: block;
	padding: .5rem .68rem;
	border-radius: var(--ronding);
	font: 600 .87rem/1.4 var(--sans);
	text-decoration: none;
	color: var(--inkt-zacht);
	white-space: nowrap;
	transition: background var(--soepel), color var(--soepel);
}

.kop__nav a:hover,
.kop__nav .current-menu-item > a,
.kop__nav .current_page_item > a {
	background: rgba(28, 68, 104, .09);
	color: var(--lapis-diep);
}

.kop__actie { flex-shrink: 0; }

.kop__schakel {
	display: none;
	margin-left: auto;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--perkament-rand);
	border-radius: var(--ronding);
	cursor: pointer;
}

.kop__schakel span,
.kop__schakel span::before,
.kop__schakel span::after {
	display: block;
	position: relative;
	width: 1.15rem;
	height: 2px;
	margin: 0 auto;
	background: var(--lapis-diep);
	transition: transform var(--soepel), opacity var(--soepel);
}

.kop__schakel span::before,
.kop__schakel span::after {
	content: "";
	position: absolute;
	left: 0;
}

.kop__schakel span::before { top: -6px; }
.kop__schakel span::after { top: 6px; }

.kop__schakel[aria-expanded="true"] span { background: transparent; }
.kop__schakel[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.kop__schakel[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   5. Baken (hero)
   ========================================================================== */

.baken {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(38rem, 82vh);
	padding: 5rem 0 4.4rem;
	color: var(--wit);
	overflow: hidden;
}

.baken__beeld {
	position: absolute;
	inset: 0;
	background: var(--lapis-diep) center 38% / cover no-repeat;
	transform: scale(1.02);
}

.baken__beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(13, 28, 44, .93) 0%, rgba(15, 33, 51, .78) 42%, rgba(18, 40, 62, .30) 78%),
		linear-gradient(0deg, rgba(13, 28, 44, .62), transparent 55%);
}

.baken__inhoud {
	position: relative;
	max-width: 40rem;
}

.baken h1 {
	color: var(--wit);
	text-shadow: 0 2px 20px rgba(9, 20, 32, .5);
	margin-bottom: .5em;
}

.baken__lint {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1.15rem;
	padding: .34rem .85rem;
	background: rgba(176, 133, 66, .2);
	border: 1px solid rgba(211, 171, 99, .55);
	border-radius: 999px;
	font: 600 .72rem/1.5 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-licht);
}

.baken__tekst {
	font-size: 1.16rem;
	color: rgba(255, 253, 247, .88);
	margin-bottom: 1.9rem;
	max-width: 33rem;
}

.baken__knoppen { margin-bottom: 2.6rem; }

.baken__ring {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.2rem;
	padding: 1.15rem 0 0;
	border-top: 1px solid rgba(255, 253, 247, .22);
	max-width: 34rem;
}

.baken__cijfer {
	display: block;
	font: 600 1.5rem/1.1 var(--serif);
	color: var(--goud-licht);
}

.baken__cijfer small {
	display: block;
	margin-top: .2rem;
	font: 500 .72rem/1.4 var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 253, 247, .68);
}

.baken__pijl {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font: 600 .7rem/1 var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 253, 247, .74);
	text-decoration: none;
}

.baken__pijl:hover { color: var(--goud-licht); }

.baken__pijl::after {
	content: "\2193";
	animation: wenk 2.4s ease-in-out infinite;
}

@keyframes wenk {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* ==========================================================================
   6. Kaarten
   ========================================================================== */

.kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wit);
	border: var(--lijn);
	border-radius: var(--ronding-groot);
	box-shadow: var(--schaduw);
	overflow: hidden;
	transition: transform var(--soepel), box-shadow var(--soepel);
}

.kaart:hover {
	transform: translateY(-4px);
	box-shadow: var(--schaduw-diep);
}

.kaart__lijf {
	padding: 1.5rem 1.5rem 1.65rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.kaart__lijf h3 { margin-bottom: .45em; }

.kaart__lijf p { color: var(--inkt-zacht); font-size: .98rem; }

.kaart__lijf .tekstlink { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

.kaart__prent {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--perkament-diep) center / cover no-repeat;
}

.kaart__merk {
	position: absolute;
	top: .8rem;
	left: .8rem;
	padding: .26rem .66rem;
	background: rgba(20, 49, 75, .88);
	color: var(--wit);
	border-radius: 999px;
	font: 600 .68rem/1.5 var(--sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.kaart--vlak {
	background: rgba(255, 253, 247, .72);
	box-shadow: none;
}

.kaart--vlak:hover { transform: none; box-shadow: var(--schaduw); }

.kaart__nummer {
	font: 600 .8rem/1 var(--sans);
	letter-spacing: .2em;
	color: var(--goud-diep);
	margin-bottom: .8rem;
	display: block;
}

/* Tijdperkkaart */

.tijdkaart .kaart__prent { aspect-ratio: 8 / 5; }

.tijdkaart__jaren {
	font: 600 .74rem/1 var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goud-diep);
	margin-bottom: .5rem;
	display: block;
}

/* Leiderkaart */

.leiderkaart .kaart__prent {
	aspect-ratio: 3 / 4;
	background-position: center top;
}

.leiderkaart__rol {
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
	margin-bottom: .7rem;
	display: block;
}

.leiderkaart dl {
	margin: .2rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem .8rem;
	font-size: .93rem;
}

.leiderkaart dt {
	font-weight: 600;
	color: var(--lapis-diep);
}

.leiderkaart dd { margin: 0; color: var(--inkt-zacht); }

/* Stemkaart (getuigenis) */

.stemkaart {
	position: relative;
	padding: 1.7rem 1.6rem 1.5rem;
	background: var(--charta) url("images/charta.jpg") center / cover no-repeat;
	border: 1px solid var(--perkament-rand);
	border-radius: var(--ronding-groot);
	box-shadow: inset 0 0 40px rgba(160, 132, 84, .18), var(--schaduw);
	display: flex;
	flex-direction: column;
}

.stemkaart__sterren {
	color: var(--goud-mid);
	letter-spacing: .16em;
	font-size: 1.02rem;
	margin-bottom: .7rem;
}

.stemkaart__sterren span { color: rgba(109, 101, 83, .4); }

.stemkaart blockquote {
	margin: 0 0 1.1rem;
	font-family: var(--serif);
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--inkt);
}

.stemkaart__wie {
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px dashed rgba(139, 116, 74, .45);
	font-size: .9rem;
	font-weight: 600;
	color: var(--lapis-diep);
}

.stemkaart__wie small {
	display: block;
	font-weight: 500;
	color: #5d5647;
	letter-spacing: .04em;
}

/* Journaalkaart */

.journaalkaart .kaart__prent { aspect-ratio: 3 / 2; }

.journaalkaart__datum {
	display: block;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6a6250;
	margin-bottom: .55rem;
}

/* ==========================================================================
   7. Widget: tijdperkschijf
   ========================================================================== */

.schijf {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 0;
	background: var(--wit);
	border: var(--lijn);
	border-radius: var(--ronding-groot);
	box-shadow: var(--schaduw-diep);
	overflow: hidden;
}

.schijf__prent {
	position: relative;
	min-height: 24rem;
	background: var(--lapis-diep) center / cover no-repeat;
	transition: opacity var(--soepel);
}

.schijf__prent.is-wisselend { opacity: .35; }

.schijf__stempel {
	position: absolute;
	left: 1.2rem;
	bottom: 1.2rem;
	padding: .4rem .9rem;
	background: rgba(20, 49, 75, .9);
	color: var(--wit);
	border-radius: 999px;
	font: 600 .74rem/1.5 var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.schijf__lijf {
	padding: 2rem 1.9rem;
	display: flex;
	flex-direction: column;
}

.schijf__jaren {
	font: 600 .76rem/1 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-diep);
	margin-bottom: .6rem;
	display: block;
}

.schijf__tekst {
	color: var(--inkt-zacht);
	font-size: .99rem;
	min-height: 5.4rem;
}

.schijf__meters {
	margin: .4rem 0 1.4rem;
	display: grid;
	gap: .8rem;
}

.schijf__ruiters {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-bottom: 1.3rem;
}

.schijf__ruiter {
	padding: .42rem .85rem;
	background: transparent;
	border: 1px solid var(--perkament-rand);
	border-radius: 999px;
	font: 600 .8rem/1.3 var(--sans);
	color: var(--inkt-zacht);
	cursor: pointer;
	transition: background var(--soepel), color var(--soepel), border-color var(--soepel);
}

.schijf__ruiter:hover {
	border-color: var(--lapis-licht);
	color: var(--lapis-diep);
}

.schijf__ruiter[aria-selected="true"] {
	background: var(--lapis);
	border-color: var(--lapis);
	color: var(--wit);
}

.schijf__voet {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	padding-top: 1.2rem;
	border-top: var(--lijn);
}

.schijf__voet .tekstlink { margin-left: auto; }

.meter__kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--inkt-zacht);
	margin-bottom: .3rem;
}

.meter__kop b { color: var(--lapis-diep); font-variant-numeric: tabular-nums; }

.meter__spoor {
	height: 7px;
	background: rgba(28, 68, 104, .12);
	border-radius: 999px;
	overflow: hidden;
}

.meter__vul {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--lapis), var(--lapis-licht));
	border-radius: 999px;
	transition: width 520ms cubic-bezier(.3, .1, .2, 1);
}

.meter--goud .meter__vul { background: linear-gradient(90deg, #96702f, var(--goud-licht)); }
.meter--terra .meter__vul { background: linear-gradient(90deg, #7f3521, #c25c3b); }
.meter--loof .meter__vul { background: linear-gradient(90deg, #2f5539, #4e8560); }

/* ==========================================================================
   8. Widget: rijksweger
   ========================================================================== */

.weger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: 2.2rem;
	align-items: start;
}

.weger__keuze {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}

.erfenis {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: .95rem 1.05rem;
	background: rgba(255, 253, 247, .82);
	border: 1px solid var(--perkament-rand);
	border-radius: var(--ronding);
	cursor: pointer;
	transition: border-color var(--soepel), background var(--soepel), transform var(--soepel);
}

.erfenis:hover {
	border-color: var(--lapis-licht);
	transform: translateY(-2px);
}

.erfenis[aria-pressed="true"] {
	background: rgba(28, 68, 104, .1);
	border-color: var(--lapis);
	box-shadow: inset 0 0 0 1px var(--lapis);
}

.erfenis[aria-pressed="true"]::after {
	content: "\2713";
	position: absolute;
	top: .6rem;
	right: .75rem;
	color: var(--lapis);
	font-weight: 700;
}

.erfenis__naam {
	display: block;
	font: 600 1rem/1.3 var(--serif);
	color: var(--lapis-diep);
	margin-bottom: .18rem;
	padding-right: 1.4rem;
}

.erfenis__aard {
	display: block;
	font-size: .84rem;
	color: var(--inkt-flauw);
}

.weger__blad {
	padding: 1.6rem 1.5rem;
	background: var(--wit);
	border: var(--lijn);
	border-radius: var(--ronding-groot);
	box-shadow: var(--schaduw);
	position: sticky;
	top: 6rem;
}

.weger__teller {
	font-size: .84rem;
	letter-spacing: .06em;
	color: var(--inkt-flauw);
	margin-bottom: 1rem;
}

.weger__teller b { color: var(--lapis-diep); }

.weger__meters { display: grid; gap: .75rem; margin-bottom: 1.2rem; }

.weger__naam {
	font: 600 1.22rem/1.3 var(--serif);
	color: var(--lapis-diep);
	margin-bottom: .3rem;
	min-height: 1.6em;
}

.weger__oordeel {
	font-size: .95rem;
	color: var(--inkt-zacht);
	min-height: 3.2em;
	margin-bottom: 1.1rem;
}

.weger__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   9. Widget: zegelproef
   ========================================================================== */

.zegels {
	background: rgba(255, 253, 247, .8);
	border: var(--lijn);
	border-radius: var(--ronding-groot);
	padding: 2rem 1.9rem;
	box-shadow: var(--schaduw);
}

.zegels__rij {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1.6rem 0;
}

.zegel {
	width: 5.4rem;
	height: 5.4rem;
	display: grid;
	place-items: center;
	gap: .1rem;
	padding: 0;
	background: var(--charta) url("images/charta.jpg") center / cover no-repeat;
	border: 1px solid var(--perkament-rand);
	border-radius: 50%;
	cursor: pointer;
	color: var(--inkt-zacht);
	font: 600 .68rem/1.2 var(--sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: inset 0 0 18px rgba(160, 132, 84, .3);
	transition: transform 140ms ease, box-shadow var(--soepel), border-color var(--soepel), background-color var(--soepel);
}

.zegel b {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--lapis);
	font-weight: 400;
}

.zegel:hover:not([disabled]) {
	transform: translateY(-3px);
	border-color: var(--lapis-licht);
}

.zegel.is-licht {
	background-color: var(--goud-licht);
	background-image: none;
	border-color: var(--goud);
	box-shadow: 0 0 0 4px rgba(211, 171, 99, .35);
	transform: scale(1.06);
}

.zegel.is-licht b { color: #33260f; }

.zegel.is-mis {
	background-color: #c9705a;
	background-image: none;
	border-color: var(--terra);
	color: var(--wit);
}

.zegel.is-mis b { color: var(--wit); }

.zegel[disabled] { cursor: default; opacity: .82; }

.zegels__staat {
	text-align: center;
	font-size: 1rem;
	color: var(--inkt-zacht);
	min-height: 3em;
	margin-bottom: 1rem;
}

.zegels__staat b { color: var(--lapis-diep); }

.zegels__cijfers {
	display: flex;
	justify-content: center;
	gap: 2.2rem;
	margin-bottom: 1.4rem;
	text-align: center;
}

.zegels__cijfer {
	font: 600 1.6rem/1.1 var(--serif);
	color: var(--lapis-diep);
	font-variant-numeric: tabular-nums;
}

.zegels__cijfer small {
	display: block;
	font: 500 .7rem/1.4 var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
}

.zegels__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
}

/* ==========================================================================
   10. Widget: handelsruil
   ========================================================================== */

.ruil {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
	gap: 2.2rem;
	align-items: start;
}

.ruil__waren { display: grid; gap: 1rem; }

.waar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: .5rem 1rem;
	padding: 1.05rem 1.2rem;
	background: rgba(255, 253, 247, .85);
	border: var(--lijn);
	border-radius: var(--ronding);
}

.waar__naam {
	font: 600 1.06rem/1.2 var(--serif);
	color: var(--lapis-diep);
}

.waar__naam small {
	display: block;
	font: 500 .82rem/1.4 var(--sans);
	color: var(--inkt-flauw);
	margin-top: .15rem;
}

.waar__stel {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.waar__knop {
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--wit);
	border: 1px solid var(--perkament-rand);
	border-radius: var(--ronding);
	font: 600 1.1rem/1 var(--sans);
	color: var(--lapis-diep);
	cursor: pointer;
	transition: background var(--soepel), border-color var(--soepel);
}

.waar__knop:hover:not([disabled]) {
	background: rgba(28, 68, 104, .1);
	border-color: var(--lapis-licht);
}

.waar__knop[disabled] { opacity: .4; cursor: not-allowed; }

.waar__getal {
	min-width: 2.3rem;
	text-align: center;
	font: 600 1.16rem/1 var(--serif);
	color: var(--lapis-diep);
	font-variant-numeric: tabular-nums;
}

.waar__spoor {
	grid-column: 1 / -1;
	height: 5px;
	background: rgba(28, 68, 104, .1);
	border-radius: 999px;
	overflow: hidden;
}

.waar__vul {
	height: 100%;
	width: 0;
	border-radius: 999px;
	transition: width 320ms ease;
}

.waar--graan .waar__vul { background: linear-gradient(90deg, #9b7c2c, var(--goud-licht)); }
.waar--steen .waar__vul { background: linear-gradient(90deg, #4f5b66, #8595a3); }
.waar--zijde .waar__vul { background: linear-gradient(90deg, #7c2f4c, #b9647f); }

.ruil__blad {
	padding: 1.6rem 1.5rem;
	background: var(--lapis-diep);
	color: rgba(255, 253, 247, .88);
	border-radius: var(--ronding-groot);
	box-shadow: var(--schaduw-diep);
}

.ruil__blad h3 { color: var(--wit); }

.ruil__rest {
	font-size: .86rem;
	letter-spacing: .06em;
	color: rgba(255, 253, 247, .7);
	margin-bottom: 1rem;
}

.ruil__rest b { color: var(--goud-licht); }

.ruil__bod {
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .45rem;
	font-size: .95rem;
}

.ruil__bod li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-bottom: .4rem;
	border-bottom: 1px dashed rgba(255, 253, 247, .2);
}

.ruil__bod b { color: var(--goud-licht); font-variant-numeric: tabular-nums; }

.ruil__oordeel {
	min-height: 4.2em;
	font-size: .95rem;
	color: rgba(255, 253, 247, .82);
	margin-bottom: 1.1rem;
}

.ruil__oordeel strong { color: var(--goud-licht); }

.ruil__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   11. Lijsten, vragen, tijdlijn
   ========================================================================== */

.merklijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .85rem;
}

.merklijst li {
	position: relative;
	padding-left: 2rem;
	margin: 0;
	color: var(--inkt-zacht);
}

.merklijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: .8rem;
	height: .8rem;
	border: 2px solid var(--goud);
	border-radius: 50%;
	background: transparent;
}

.merklijst b { color: var(--lapis-diep); }

.veld--lapis .merklijst li { color: rgba(255, 253, 247, .82); }
.veld--lapis .merklijst b { color: var(--wit); }

.trap {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: trap;
	display: grid;
	gap: 1.3rem;
}

.trap > li {
	position: relative;
	margin: 0;
	padding: 1.3rem 1.5rem 1.4rem 4.2rem;
	background: rgba(255, 253, 247, .8);
	border: var(--lijn);
	border-left: 3px solid var(--goud);
	border-radius: var(--ronding);
	counter-increment: trap;
}

.trap > li::before {
	content: counter(trap, upper-roman);
	position: absolute;
	left: 1.3rem;
	top: 1.35rem;
	font: 600 1.16rem/1 var(--serif);
	color: var(--goud-diep);
}

.trap h3 { margin-bottom: .35em; }
.trap p { margin-bottom: 0; color: var(--inkt-zacht); font-size: .98rem; }

.tijdlijn {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tijdlijn::before {
	content: "";
	position: absolute;
	left: 7.5rem;
	top: .6rem;
	bottom: .6rem;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--perkament-rand) 8%, var(--perkament-rand) 92%, transparent);
}

.tijdlijn > li {
	position: relative;
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0 2.4rem;
	margin: 0 0 2.2rem;
	padding-bottom: .2rem;
}

.tijdlijn > li:last-child { margin-bottom: 0; }

.tijdlijn__jaar {
	text-align: right;
	font: 600 .84rem/1.6 var(--sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--goud-diep);
	padding-top: .18rem;
}

.tijdlijn__lijf { position: relative; }

.tijdlijn__lijf::before {
	content: "";
	position: absolute;
	left: -2.83rem;
	top: .55rem;
	width: .82rem;
	height: .82rem;
	background: var(--perkament);
	border: 2px solid var(--lapis);
	border-radius: 50%;
}

.tijdlijn__lijf h3 { margin-bottom: .3em; }
.tijdlijn__lijf p { color: var(--inkt-zacht); margin-bottom: 0; font-size: .98rem; }

.vraag {
	background: rgba(255, 253, 247, .85);
	border: var(--lijn);
	border-radius: var(--ronding);
	margin-bottom: .85rem;
	overflow: hidden;
}

.vraag > summary {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: 1.05rem 1.3rem;
	cursor: pointer;
	font: 600 1.03rem/1.45 var(--serif);
	color: var(--lapis-diep);
	list-style: none;
}

.vraag > summary::-webkit-details-marker { display: none; }

.vraag > summary::before {
	content: "+";
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	display: grid;
	place-items: center;
	margin-top: .05rem;
	border: 1px solid var(--goud);
	border-radius: 50%;
	color: var(--goud-diep);
	font: 600 1rem/1 var(--sans);
}

.vraag[open] > summary::before { content: "\2013"; }

.vraag > summary:hover { background: rgba(28, 68, 104, .05); }

.vraag__antwoord {
	padding: 0 1.3rem 1.25rem 3.5rem;
	color: var(--inkt-zacht);
	font-size: .98rem;
}

.vraag__antwoord p:last-child { margin-bottom: 0; }

.cijferrij {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.2rem;
	padding: 1.6rem 0 0;
	border-top: var(--lijn);
}

.cijferrij div { text-align: center; }

.cijferrij b {
	display: block;
	font: 600 2rem/1.1 var(--serif);
	color: var(--lapis);
}

.cijferrij span {
	display: block;
	margin-top: .25rem;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
}

.veld--lapis .cijferrij { border-top-color: rgba(255, 253, 247, .2); }
.veld--lapis .cijferrij b { color: var(--goud-licht); }
.veld--lapis .cijferrij span { color: rgba(255, 253, 247, .72); }
/* Iets lichter dan het gewone goud: dit label staat op een half doorzichtige
   kaart die de lapis eronder laat doorschijnen. */
.veld--lapis .kaart__nummer { color: #e3c485; }

/* ==========================================================================
   12. Artikelen en formulieren
   ========================================================================== */

.blad {
	background: var(--wit);
	border: var(--lijn);
	border-radius: var(--ronding-groot);
	box-shadow: var(--schaduw);
	padding: 2.6rem 2.4rem;
}

.blad--charta {
	background: var(--charta) url("images/charta.jpg") center / cover no-repeat;
	box-shadow: inset 0 0 70px rgba(160, 132, 84, .2), var(--schaduw);
}

.wetstekst h2 { margin-top: 2.2rem; font-size: 1.42rem; }
.wetstekst h2:first-child { margin-top: 0; }
.wetstekst h3 { margin-top: 1.6rem; font-size: 1.12rem; }
.wetstekst p, .wetstekst li { color: var(--inkt-zacht); }
.wetstekst ul { margin-bottom: 1.3rem; }

.wetstekst__datum {
	font-size: .84rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed rgba(139, 116, 74, .45);
}

.inhoudsblok {
	background: rgba(28, 68, 104, .06);
	border: 1px solid rgba(28, 68, 104, .14);
	border-radius: var(--ronding);
	padding: 1.2rem 1.4rem;
	margin-bottom: 2.2rem;
}

.inhoudsblok h2 {
	margin: 0 0 .6rem;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goud-diep);
}

.inhoudsblok ul {
	margin: 0;
	padding-left: 1.1rem;
	columns: 2;
	column-gap: 2rem;
	font-size: .95rem;
}

.formulier { display: grid; gap: 1.15rem; }

.formulier__rij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
}

.formulier label {
	display: block;
	font: 600 .84rem/1.5 var(--sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--inkt-zacht);
	margin-bottom: .35rem;
}

.formulier .nodig { color: var(--terra); }

.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="url"],
.formulier input[type="search"],
.formulier select,
.formulier textarea {
	width: 100%;
	padding: .78rem .9rem;
	background: var(--wit);
	border: 1px solid var(--perkament-rand);
	border-radius: var(--ronding);
	font: 400 1rem/1.5 var(--sans);
	color: var(--inkt);
	transition: border-color var(--soepel), box-shadow var(--soepel);
}

.formulier textarea { min-height: 9.5rem; resize: vertical; }

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
	border-color: var(--lapis-licht);
	box-shadow: 0 0 0 3px rgba(47, 107, 158, .16);
	outline: none;
}

.formulier__hulp {
	font-size: .84rem;
	color: var(--inkt-flauw);
	margin-top: .35rem;
}

.formulier__akkoord {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .92rem;
	color: var(--inkt-zacht);
}

.formulier__akkoord input { margin-top: .28rem; flex: 0 0 auto; }

.formulier__akkoord label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: .92rem;
	margin: 0;
}

.sterkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

/* De keuzerondjes blijven bedienbaar met het toetsenbord, maar mogen elkaar
   niet overlappen: de labels vangen de klikken op. */
.sterkeuze input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	pointer-events: none;
}

.sterkeuze label {
	margin: 0;
	padding: .5rem .95rem;
	background: var(--wit);
	border: 1px solid var(--perkament-rand);
	border-radius: 999px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	font-size: .92rem;
	color: var(--inkt-zacht);
	transition: background var(--soepel), color var(--soepel), border-color var(--soepel);
}

.sterkeuze label:hover { border-color: var(--goud); }

.sterkeuze input:checked + label {
	background: var(--lapis);
	border-color: var(--lapis);
	color: var(--wit);
}

.sterkeuze input:focus-visible + label {
	outline: 3px solid var(--lapis-licht);
	outline-offset: 2px;
}

.melding {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: 1rem 1.2rem;
	border-radius: var(--ronding);
	border-left: 3px solid var(--loof);
	background: rgba(61, 107, 74, .1);
	color: #2c4f36;
	margin-bottom: 1.8rem;
	font-size: .97rem;
}

.melding--fout {
	border-left-color: var(--terra);
	background: rgba(156, 66, 41, .1);
	color: #7d3521;
}

.melding p { margin: 0; }

/* ==========================================================================
   13. Voet en cookiebalk
   ========================================================================== */

.voet {
	background: linear-gradient(180deg, #16344f, #101f30);
	color: rgba(255, 253, 247, .74);
	padding: 3.6rem 0 1.6rem;
	font-size: .95rem;
}

.voet a { color: rgba(255, 253, 247, .8); text-decoration: none; }
.voet a:hover { color: var(--goud-licht); text-decoration: underline; }

.voet__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.4rem;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid rgba(255, 253, 247, .14);
}

.voet h2 {
	font: 600 .8rem/1.5 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-licht);
	margin-bottom: 1.1rem;
}

.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: .55rem; }

.voet__merk {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: 1rem;
	text-decoration: none;
}

.voet__merk img { width: 2.6rem; height: 2.6rem; border-radius: 50%; }

.voet__merk span {
	font: 600 1.24rem/1.1 var(--serif);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wit);
}

.voet__over { max-width: 26rem; color: rgba(255, 253, 247, .68); }

.voet__adres { font-style: normal; line-height: 1.8; }

.voet__staart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.4rem;
	font-size: .86rem;
	color: rgba(255, 253, 247, .58);
}

.voet__omhoog {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .95rem;
	border: 1px solid rgba(255, 253, 247, .24);
	border-radius: 999px;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.voet__omhoog:hover {
	border-color: var(--goud-licht);
	text-decoration: none;
}

.koekje {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	background: rgba(16, 31, 48, .97);
	color: rgba(255, 253, 247, .88);
	border-top: 2px solid var(--goud);
	transform: translateY(110%);
	transition: transform 420ms cubic-bezier(.2, .8, .3, 1);
}

.koekje.is-open { transform: translateY(0); }

.koekje__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding: 1.15rem 0 1.25rem;
}

.koekje__tekst {
	flex: 1 1 22rem;
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
}

.koekje__tekst a { color: var(--goud-licht); }

.koekje__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

/* ==========================================================================
   14. Berichten
   ========================================================================== */

.bericht__kop {
	padding: 3.4rem 0 2.4rem;
	border-bottom: var(--lijn);
	margin-bottom: 2.6rem;
}

.bericht__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	font-size: .84rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inkt-flauw);
	margin-bottom: 1rem;
}

.bericht__prent {
	border-radius: var(--ronding-groot);
	overflow: hidden;
	margin-bottom: 2.4rem;
	box-shadow: var(--schaduw);
}

.bericht__lijf > * { max-width: 100%; }

.bericht__lijf h2 { margin-top: 2rem; }

.bericht__lijf blockquote {
	margin: 1.8rem 0;
	padding: 1.2rem 1.6rem;
	border-left: 3px solid var(--goud);
	background: rgba(176, 133, 66, .08);
	font-family: var(--serif);
	font-size: 1.08rem;
}

.bericht__voet {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 2.8rem;
	padding-top: 1.6rem;
	border-top: var(--lijn);
}

.stapels {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.6rem;
}

.bladwijzer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin-top: 3rem;
}

.leegte {
	text-align: center;
	padding: 3.4rem 1.4rem;
	background: rgba(255, 253, 247, .8);
	border: 1px dashed var(--perkament-rand);
	border-radius: var(--ronding-groot);
}

/* ==========================================================================
   15. Beweging en aanpassing
   ========================================================================== */

/* Secties schuiven binnen, maar alleen als er javascript is om ze weer te
   laten verschijnen. Zonder script staat alles gewoon zichtbaar. */
.rijst {
	transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1);
}

.heeft-js .rijst {
	opacity: 0;
	transform: translateY(18px);
}

.heeft-js .rijst.is-op {
	opacity: 1;
	transform: none;
}

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

@media (max-width: 1080px) {
	.rooster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.schijf { grid-template-columns: 1fr; }
	.schijf__prent { min-height: 17rem; }
	.weger, .ruil { grid-template-columns: 1fr; }
	.weger__blad { position: static; }
}

@media (max-width: 900px) {
	.kop__nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		padding: .8rem 1.4rem 1.3rem;
		background: var(--perkament);
		border-bottom: var(--lijn);
		box-shadow: 0 14px 24px rgba(34, 31, 26, .14);
	}

	.kop__nav.is-open { display: block; }

	.kop__nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: .1rem;
	}

	.kop__nav a { padding: .72rem .8rem; font-size: .96rem; }

	.kop__schakel { display: block; }
	.kop__actie { display: none; }

	.duo { grid-template-columns: 1fr; gap: 2rem; }
	.duo--gedraaid > *:first-child { order: 0; }
	.rooster--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.veld { padding: 3.6rem 0; }
	.blad { padding: 2rem 1.5rem; }
	.inhoudsblok ul { columns: 1; }
}

@media (max-width: 720px) {
	body { font-size: 1rem; }
	.rooster--twee,
	.rooster--drie,
	.rooster--vier { grid-template-columns: 1fr; }
	.formulier__rij { grid-template-columns: 1fr; }
	.cijferrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.baken { min-height: auto; padding: 3.6rem 0 3.4rem; }
	.baken__pijl { display: none; }
	.baken__ring { gap: 1.2rem; }
	.weger__keuze { grid-template-columns: 1fr; }
	.tijdlijn::before { left: .4rem; }
	.tijdlijn > li { grid-template-columns: 1fr; gap: .2rem; padding-left: 2rem; }
	.tijdlijn__jaar { text-align: left; }
	.tijdlijn__lijf::before { left: -2rem; }
	.voet__raster { grid-template-columns: 1fr; gap: 1.8rem; }
	.zegels { padding: 1.5rem 1.2rem; }
	.zegel { width: 4.4rem; height: 4.4rem; }
	/* Ruimere raakvlakken voor duimen op de stelknoppen van de handelsruil. */
	.waar__knop { width: 2.7rem; height: 2.7rem; font-size: 1.2rem; }
	.waar__getal { min-width: 2.7rem; }
	.zegels__cijfers { gap: 1.4rem; }
	.blad { padding: 1.6rem 1.2rem; }
	.veld__kop { margin-bottom: 1.9rem; }
}

@media (max-width: 560px) {
	/* Alleen echte knoppen worden schermbreed; de ronde zegels, de stelknoppen
	   en de keuzeplaatjes houden hun eigen maat. */
	.knop { width: 100%; }
	.knoprij { flex-direction: column; align-items: stretch; }
	.schijf__voet, .zegels__knoppen, .weger__knoppen, .ruil__knoppen { flex-direction: column; align-items: stretch; }
	.schijf__voet .tekstlink { margin-left: 0; }
	.koekje__binnen { padding: .9rem 0 1rem; gap: .7rem 1rem; }
	.koekje__tekst { flex: 1 1 100%; font-size: .88rem; }
	.koekje__knoppen { width: 100%; gap: .5rem; }
	.knop--klein { padding: .72rem 1.05rem; }
	.koekje__knoppen .knop { flex: 1 1 8rem; width: auto; padding: .72rem .8rem; font-size: .78rem; }
	.koekje__knoppen .koekje__meer {
		flex: 1 1 100%;
		text-align: center;
		font-size: .84rem;
		color: var(--goud-licht);
	}
	.voet__staart { flex-direction: column; align-items: flex-start; }
	.blad { padding: 1.4rem 1.1rem; }
	.trap > li { padding: 1.1rem 1.1rem 1.2rem 3.4rem; }
	.trap > li::before { left: 1rem; }
}

@media print {
	.kop, .voet, .koekje, .tijdlint, .baken__pijl, .knoprij { display: none !important; }
	body { background: #fff; color: #000; }
	.blad { box-shadow: none; border: 1px solid #999; }
}