/*
Theme Name: Nordevia
Theme URI: https://nordevia.org/
Author: Nordevia Studio
Author URI: https://nordevia.org/
Description: Licht thema voor de etalage van Nordevia, een singleplayer avonturenspel op het eiland Vardhelm, voor pc, PlayStation 5 en Xbox Series. Met vier eigen hulpmiddelen, speelverslagen met moderatie, poortberichten, een strook over de opslag en volledige Yoast-velden. Alle lettertypen staan in het thema zelf, er gaat geen enkel verzoek naar buiten.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nordevia
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Lettertypen uit het thema zelf
   -------------------------------------------------------------------------
   Beide families zijn getekend voor een schrift met duizenden tekens, en de
   dienst van Google knipt ze daarom in veel deelverzamelingen. Alleen 'latin'
   is opgehaald: die draagt alle letters, leestekens en accenten die de
   Nederlandse teksten van dit thema gebruiken. De deelverzameling 'latin-ext'
   bleek geen enkel teken te bevatten dat hier voorkomt en is er daarom uit
   gelaten. Zonder tweede bestand is er ook geen unicode-range nodig.
   ========================================================================= */

@font-face {
	font-family: 'Shippori Mincho';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/shippori-mincho-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Zen Kaku Gothic New';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/zen-kaku-gothic-new-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Zen Kaku Gothic New';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/zen-kaku-gothic-new-500-latin.woff2') format('woff2');
}

/* =========================================================================
   2. Kleuren en maten
   -------------------------------------------------------------------------
   Alle verhoudingen zijn vooraf doorgerekend, in beide richtingen:
     sumi op sneeuw 14,5:1   sumi op rijstblad 13,1:1
     vermiljoen op sneeuw 6,3:1   dennegroen op sneeuw 6,9:1
     asgrijs op sneeuw 5,6:1   asgrijs op rijstblad 5,1:1
     sneeuw op vermiljoen 6,3:1   sneeuw op dennegroen 6,9:1
     sneeuw op sumi 14,5:1   asgrijs-licht op sumi 6,4:1
     vermiljoen-licht op sumi 6,3:1   dennegroen-licht op sumi 7,3:1
   Het gewone vermiljoen haalt op sumi maar 2,3:1 en draagt daar dus nooit
   tekst; op donkere vlakken staat altijd de lichte variant.
   ========================================================================= */

:root {
	--sneeuw: #eef0f1;
	--rijstblad: #e2e5e8;
	--rand: #c6ccd1;
	--sumi: #1b1f24;
	--vermiljoen: #a02f28;
	--vermiljoen-diep: #7f231d;
	--dennegroen: #2c5a4c;
	--dennegroen-diep: #20463b;
	--asgrijs: #56606a;

	--sneeuw-licht: #f6f7f8;
	--asgrijs-licht: #98a2ac;
	--vermiljoen-licht: #e8837a;
	--dennegroen-licht: #7fb8a6;
	--rand-donker: #39414a;
	--paneel-donker: #242a31;

	--kop: 'Shippori Mincho', 'Times New Roman', serif;
	--lijf: 'Zen Kaku Gothic New', 'Segoe UI', system-ui, sans-serif;

	--breed: 1180px;
	--smal: 760px;
	--dakhoogte: 76px;
	--vouw: 3px;
}

/* =========================================================================
   3. Grondslag
   ========================================================================= */

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

/* Het kenmerk hidden verliest het van elke klasse die display zet. Deze regel
   zet dat een keer voor de hele site recht. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Anders komt een ankerlink onder de vaste kop terecht. */
	scroll-padding-top: calc(var(--dakhoogte) + 18px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sneeuw);
	color: var(--sumi);
	font-family: var(--lijf);
	font-size: 1.0125rem;
	font-weight: 400;
	line-height: 1.72;
	overflow-x: hidden;
}

body.menu-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--kop);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0.005em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.05rem, 4.6vw, 3.25rem);
}

h2 {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

h3 {
	font-size: clamp(1.15rem, 1.7vw, 1.36rem);
}

p {
	margin: 0 0 1.05em;
}

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

a {
	color: var(--vermiljoen);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--vermiljoen-diep);
}

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

code {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 0.92em;
	background: var(--rijstblad);
	border: 1px solid var(--rand);
	border-radius: 3px;
	padding: 0.06em 0.34em;
	white-space: nowrap;
}

:focus-visible {
	outline: 3px solid var(--vermiljoen);
	outline-offset: 2px;
}

.paviljoen--diep :focus-visible,
.sterrenveld :focus-visible,
.steenveld :focus-visible,
.banier :focus-visible,
.steenvoet :focus-visible,
.koekbalk :focus-visible {
	outline-color: var(--vermiljoen-licht);
}

/* Alleen voor schermlezers. */
.ingehouden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.doorsteek {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--sumi);
	color: var(--sneeuw);
	padding: 0.85rem 1.4rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0 0 6px 0;
}

.doorsteek:focus {
	left: 0;
	color: var(--sneeuw);
}

.binnenhof {
	width: min(100% - 2.6rem, var(--breed));
	margin-inline: auto;
}

.binnenhof--smal {
	width: min(100% - 2.6rem, var(--smal));
}

/* =========================================================================
   4. Kop van de pagina
   ========================================================================= */

.poortdak {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(238, 240, 241, 0.96);
	backdrop-filter: blur(7px);
	border-bottom: 1px solid var(--rand);
}

.poortdak__binnen {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: var(--dakhoogte);
	flex-wrap: wrap;
}

.zegelmerk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 40px;
	color: var(--sumi);
	text-decoration: none;
	flex: 0 0 auto;
}

.zegelmerk__teken {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
}

.zegelmerk__naam {
	font-family: var(--kop);
	font-size: 1.42rem;
	letter-spacing: 0.03em;
	line-height: 1;
	white-space: nowrap;
}

.zegelmerk__naam span {
	color: var(--vermiljoen);
}

.zegelmerk:hover .zegelmerk__naam span,
.zegelmerk:focus-visible .zegelmerk__naam span {
	color: var(--vermiljoen-diep);
}

.gongknop {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--rand);
	border-radius: 5px;
	background: var(--sneeuw-licht);
	cursor: pointer;
	position: relative;
}

.gongknop span,
.gongknop::before,
.gongknop::after {
	content: '';
	position: absolute;
	left: 11px;
	right: 11px;
	height: 2px;
	background: var(--sumi);
	border-radius: 2px;
}

.gongknop span {
	top: 21px;
}

.gongknop::before {
	top: 14px;
}

.gongknop::after {
	top: 28px;
}

.wandelpad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 1.05rem;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.wandelpad a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 0.15rem;
	color: var(--sumi);
	font-size: 0.94rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.wandelpad a:hover,
.wandelpad a:focus-visible {
	color: var(--vermiljoen);
	border-bottom-color: var(--vermiljoen);
}

.wandelpad .current-menu-item > a {
	border-bottom-color: var(--dennegroen);
	color: var(--dennegroen);
}

/* =========================================================================
   5. Knoppen
   ========================================================================= */

.schuifdeur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.7rem 1.45rem;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: var(--lijf);
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.schuifdeur--open {
	background: var(--vermiljoen);
	border-color: var(--vermiljoen);
	color: var(--sneeuw);
}

.schuifdeur--open:hover,
.schuifdeur--open:focus-visible {
	background: var(--vermiljoen-diep);
	border-color: var(--vermiljoen-diep);
	color: #ffffff;
}

.schuifdeur--stil {
	background: transparent;
	border-color: var(--dennegroen);
	color: var(--dennegroen);
}

.schuifdeur--stil:hover,
.schuifdeur--stil:focus-visible {
	background: var(--dennegroen);
	color: var(--sneeuw);
}

.schuifdeur--kort {
	min-height: 40px;
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
}

.schuifdeur[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Op een donker vlak haalt het gewone dennegroen maar 2,1:1; daar hoort de
   lichte variant te staan. De strook over de opslag en de voet vallen onder
   dezelfde regel: die staan allebei op sumi. */
.paviljoen--diep .schuifdeur--stil,
.sterrenveld .schuifdeur--stil,
.steenveld .schuifdeur--stil,
.banier .schuifdeur--stil,
.koekbalk .schuifdeur--stil,
.steenvoet .schuifdeur--stil {
	border-color: var(--dennegroen-licht);
	color: var(--dennegroen-licht);
}

.paviljoen--diep .schuifdeur--stil:hover,
.paviljoen--diep .schuifdeur--stil:focus-visible,
.sterrenveld .schuifdeur--stil:hover,
.sterrenveld .schuifdeur--stil:focus-visible,
.steenveld .schuifdeur--stil:hover,
.steenveld .schuifdeur--stil:focus-visible,
.banier .schuifdeur--stil:hover,
.banier .schuifdeur--stil:focus-visible,
.koekbalk .schuifdeur--stil:hover,
.koekbalk .schuifdeur--stil:focus-visible,
.steenvoet .schuifdeur--stil:hover,
.steenvoet .schuifdeur--stil:focus-visible {
	background: var(--dennegroen-licht);
	color: var(--sumi);
}

.deurrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1.6rem 0 0;
}

.deurrij--midden {
	justify-content: center;
	margin-top: 2.4rem;
}

.deurstapel {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	align-items: flex-start;
}

.pijl {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.pijl::after {
	content: '\2192';
	margin-left: 0.45rem;
}

/* =========================================================================
   6. Secties, koppen en de windvouw
   ========================================================================= */

.paviljoen {
	position: relative;
	padding: clamp(3rem, 6vw, 5.2rem) 0;
}

.paviljoen--kort {
	padding: clamp(2.1rem, 3.6vw, 3.2rem) 0;
}

.paviljoen--paneel {
	background: var(--rijstblad);
}

.paviljoen--stil {
	background: var(--sneeuw-licht);
	border-top: 1px solid var(--rand);
}

.paviljoen--diep {
	background: var(--sumi);
	color: var(--sneeuw);
}

.paviljoen--diep h1,
.paviljoen--diep h2,
.paviljoen--diep h3 {
	color: var(--sneeuw);
}

.paviljoen--diep a:not(.schuifdeur) {
	color: var(--vermiljoen-licht);
}

.paviljoen__kop {
	max-width: 46rem;
	margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.paviljoen__kop--breed {
	max-width: 58rem;
}

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

.paviljoen__kop--rechts {
	margin-left: auto;
	text-align: right;
}

.paviljoen__kop p:not(.opschrift) {
	color: var(--asgrijs);
}

.paviljoen--diep .paviljoen__kop p:not(.opschrift) {
	color: var(--asgrijs-licht);
}

.paviljoen__deur {
	margin: 2.2rem 0 0;
}

.paviljoen__deur--links {
	margin-top: 0;
}

.opschrift {
	margin: 0 0 0.7rem;
	font-size: 0.79rem;
	font-weight: 500;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--dennegroen);
}

.opschrift--licht {
	color: var(--dennegroen-licht);
}

.voorwoord {
	font-size: clamp(1.08rem, 1.7vw, 1.28rem);
	line-height: 1.66;
	color: var(--asgrijs);
}

.onderregel {
	margin-top: 1rem;
	font-size: 0.88rem;
	color: var(--asgrijs);
}

.windvouw {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	height: 62px;
	padding: 0 1.2rem;
	overflow: hidden;
}

/* Een span zonder display block tekent geen hoogte; deze streken zijn juist
   niets anders dan hoogte en breedte. */
.windvouw__streek {
	display: block;
	flex: 0 0 auto;
	height: var(--vouw);
	border-radius: 2px;
	background: var(--asgrijs);
	opacity: 0.5;
	transform: rotate(-24deg);
}

.windvouw__streek--rood {
	background: var(--vermiljoen);
	opacity: 1;
}

/* =========================================================================
   7. Kleine bouwstenen
   ========================================================================= */

.zegel {
	display: inline-flex;
	align-items: center;
	padding: 0.16rem 0.62rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--sneeuw-licht);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--asgrijs);
	white-space: nowrap;
}

.zegel--vol {
	background: var(--dennegroen);
	border-color: var(--dennegroen);
	color: var(--sneeuw);
	margin: 0;
}

.merkrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
}

.streeplijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.streeplijst li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.85rem;
}

.streeplijst li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.78em;
	width: 0.85rem;
	height: 2px;
	background: var(--vermiljoen);
}

.paviljoen--diep .streeplijst li::before {
	background: var(--vermiljoen-licht);
}

.streeplijst--genummerd {
	counter-reset: streep;
}

.streeplijst--genummerd li {
	counter-increment: streep;
	padding-left: 2rem;
}

.streeplijst--genummerd li::before {
	content: counter(streep);
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--vermiljoen);
	font-family: var(--kop);
	font-size: 1rem;
}

.feitrij,
.aanzicht__feiten,
.clankaart__cijfers,
.seizoenkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.3rem;
	margin: 1.4rem 0 0;
}

.feitrij dt,
.aanzicht__feiten dt,
.clankaart__cijfers dt,
.seizoenkaart__meta dt {
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--asgrijs);
	margin-bottom: 0.15rem;
}

.feitrij dd,
.aanzicht__feiten dd,
.clankaart__cijfers dd,
.seizoenkaart__meta dd {
	margin: 0;
	font-weight: 500;
}

.rolwerk {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.steentabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
	text-align: left;
}

.steentabel th,
.steentabel td {
	padding: 0.72rem 0.9rem;
	border-bottom: 1px solid var(--rand);
	vertical-align: top;
}

.steentabel thead th {
	font-family: var(--lijf);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--asgrijs);
	border-bottom: 2px solid var(--asgrijs);
	white-space: nowrap;
}

.steentabel tbody th {
	font-weight: 500;
	color: var(--sumi);
}

.steentabel--smal th,
.steentabel--smal td {
	padding-left: 0;
}

.steentabel--donker th,
.steentabel--donker td {
	border-bottom-color: var(--rand-donker);
	color: var(--sneeuw);
}

.steentabel--donker thead th {
	color: var(--asgrijs-licht);
	border-bottom-color: var(--asgrijs-licht);
}

.steentabel--donker tbody th {
	color: var(--sneeuw);
}

.lezing h2 {
	margin-top: 2.4rem;
	font-size: clamp(1.28rem, 2.1vw, 1.6rem);
}

.lezing h2:first-child {
	margin-top: 0;
}

.lezing > p,
.lezing > ul {
	margin-bottom: 1.15rem;
}

.lezing .rolwerk {
	margin: 1.4rem 0 1.8rem;
}

.lezing--stuk > p:first-of-type {
	font-size: 1.12rem;
	color: var(--asgrijs);
}

.bericht {
	margin: 0 0 1.4rem;
	padding: 0.95rem 1.1rem;
	border-left: 4px solid var(--dennegroen);
	background: var(--sneeuw-licht);
	border-radius: 0 3px 3px 0;
}

.bericht--fout {
	border-left-color: var(--vermiljoen);
}

.bericht strong {
	display: block;
	font-family: var(--kop);
	font-size: 1.06rem;
	margin-bottom: 0.2rem;
}

.wapenmerk {
	width: 30px;
	height: 32px;
	color: var(--vermiljoen);
}

/* =========================================================================
   8. Roosters en kaarten
   ========================================================================= */

.tatami {
	display: grid;
	gap: 1.4rem;
}

.tatami--twee {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tatami--drie {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tatami--vier {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.belofte {
	display: flex;
	flex-direction: column;
	padding: 1.7rem 1.6rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-top: 3px solid var(--dennegroen);
	border-radius: 2px;
}

.belofte__nummer {
	margin: 0 0 0.7rem;
	font-family: var(--kop);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--vermiljoen);
}

.belofte__cijfer {
	margin: auto 0 0;
	padding-top: 1.1rem;
}

.belofte__cijfer strong {
	display: block;
	font-family: var(--kop);
	font-size: 1.45rem;
	color: var(--dennegroen);
}

.belofte__cijfer span {
	font-size: 0.86rem;
	color: var(--asgrijs);
}

.clankaart {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.4rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.clankaart__zegel {
	margin-bottom: 0.9rem;
}

.clankaart h3 {
	margin-bottom: 0.3rem;
}

.clankaart__zin {
	margin: 0 0 0.8rem;
	color: var(--asgrijs);
	font-size: 0.95rem;
}

.clankaart__gewest {
	margin: auto 0 0;
	padding-top: 0.9rem;
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dennegroen);
}

.clankaart__cijfers {
	gap: 1.1rem;
	margin-top: 1rem;
}

.wapenkaart {
	padding: 1.4rem 1.35rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-left: 3px solid var(--vermiljoen);
	border-radius: 2px;
}

.wapenkaart h3 {
	margin-bottom: 0.45rem;
}

.wapenkaart p {
	font-size: 0.95rem;
	color: var(--asgrijs);
}

.telbord {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem 1.6rem;
	margin: 0;
}

.telbord__vak {
	padding: 1.2rem 1.3rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.telbord dt {
	font-family: var(--kop);
	font-size: 1.12rem;
	line-height: 1.3;
}

.telbord__cijfer {
	display: block;
	font-size: 2.5rem;
	line-height: 1.05;
	/* Een groot decoratief cijfer in de randkleur haalt 1,4:1; dit haalt 6,9:1. */
	color: var(--dennegroen);
}

.telbord dd {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	color: var(--asgrijs);
}

/* =========================================================================
   9. De kop van de voorpagina
   ========================================================================= */

.aanzicht {
	padding-top: clamp(2.4rem, 4vw, 3.6rem);
}

.aanzicht__binnen {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
}

.aanzicht__inleiding {
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	color: var(--asgrijs);
	max-width: 34rem;
}

.aanzicht__kader {
	margin: 0;
}

.aanzicht__beeld {
	width: 100%;
	border-radius: 2px;
	border: 1px solid var(--rand);
}

.aanzicht__kader figcaption {
	margin-top: 0.7rem;
	font-size: 0.84rem;
	color: var(--asgrijs);
}

.aanzicht__feiten {
	gap: 1.8rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rand);
}

/* =========================================================================
   10. Duo, tweeluik, gewest, mens
   ========================================================================= */

.duo,
.gewest,
.mens {
	display: grid;
	gap: clamp(1.6rem, 3.5vw, 3rem);
	align-items: center;
}

.duo {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.duo--klein {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

.gewest {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mens {
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
}

.gewest--omgekeerd .gewest__kader,
.mens--omgekeerd .mens__kader {
	order: 2;
}

.duo__kader,
.gewest__kader,
.mens__kader {
	margin: 0;
}

.duo__beeld,
.gewest__beeld,
.mens__beeld {
	width: 100%;
	border-radius: 2px;
	border: 1px solid var(--rand);
}

.duo__deur {
	margin-top: 1.5rem;
}

.gewest__kort {
	font-size: 1.08rem;
	color: var(--sumi);
	font-weight: 500;
}

.mens__woord blockquote {
	margin: 1.2rem 0 0;
	padding-left: 1.4rem;
	border-left: 3px solid var(--vermiljoen);
	font-size: clamp(1.05rem, 1.7vw, 1.22rem);
	line-height: 1.62;
}

.tweeluik {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 3.5vw, 3rem);
}

.tweeluik--licht {
	align-items: center;
}

.stilblok {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 3.5vw, 3rem);
	align-items: start;
}

/* =========================================================================
   11. De banier en de plank: tekst over een foto
   ========================================================================= */

.banier,
.plank {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.banier__beeld,
.plank__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.banier {
	color: var(--sneeuw);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.banier::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* De boom staat links in het kader; de sluier ligt daarom rechts, waar
	   alleen lucht is en er dus niets onder verdwijnt. */
	background: linear-gradient(100deg, rgba(15, 19, 24, 0.12) 0%, rgba(15, 19, 24, 0.5) 34%, rgba(15, 19, 24, 0.88) 62%);
}

.banier__binnen {
	display: flex;
	justify-content: flex-end;
}

.banier__woord {
	max-width: 33rem;
}

.banier h2 {
	color: var(--sneeuw);
}

.banier p {
	color: var(--sneeuw);
}

.banier .schuifdeur {
	margin-top: 1.4rem;
}

.plank::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Het linnen is bleek; deze sluier maakt het nog een tint bleker zodat de
	   donkere tekst er met ruime marge op leesbaar blijft. */
	background: linear-gradient(255deg, rgba(240, 240, 236, 0.62) 0%, rgba(240, 240, 236, 0.9) 40%);
}

.plank__binnen {
	position: relative;
}

/* =========================================================================
   12. De stempelkaarten met speelverslagen
   ========================================================================= */

.stempelkaart {
	position: relative;
	margin: 0;
	padding: 2rem 1.7rem 1.6rem;
	background: var(--sneeuw-licht);
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(27, 31, 36, 0.09), 0 10px 26px rgba(27, 31, 36, 0.09);
}

.stempelkaart__zegel {
	position: absolute;
	top: 1.1rem;
	right: 1.2rem;
	display: block;
	width: 46px;
	height: 46px;
	color: rgba(160, 47, 40, 0.55);
}

.stempelkaart__zegel svg {
	width: 100%;
	height: 100%;
}

.stempelkaart blockquote {
	margin: 0 3.4rem 1.1rem 0;
	font-size: 1.04rem;
	line-height: 1.65;
}

.stempelkaart figcaption {
	padding-top: 0.9rem;
	border-top: 1px solid var(--rand);
}

.stempelkaart__naam {
	display: block;
	font-family: var(--kop);
	font-size: 1.06rem;
}

.stempelkaart__regel {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: var(--asgrijs);
}

/* =========================================================================
   13. Hulpmiddelen: gedeeld
   ========================================================================= */

.werktuig {
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.werktuig--donker {
	background: rgba(20, 24, 29, 0.9);
	border-color: var(--rand-donker);
	color: var(--sneeuw);
}

.werktuig__kop {
	max-width: 48rem;
	margin-bottom: 1.8rem;
}

.werktuig__kop p:not(.opschrift) {
	color: var(--asgrijs);
}

.werktuig--donker .werktuig__kop p:not(.opschrift) {
	color: var(--asgrijs-licht);
}

.werktuig__voet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.8rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rand);
}

.werktuig--donker .werktuig__voet {
	border-top-color: var(--rand-donker);
}

/* =========================================================================
   14. Hulpmiddel 1: Sporenlezer
   ========================================================================= */

.spoorblad {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
}

.spoorblad__wijzers {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.wijzerkaart {
	padding: 1.1rem 1.2rem;
	background: var(--sneeuw);
	border: 1px solid var(--rand);
	border-left: 3px solid var(--dennegroen);
	border-radius: 2px;
}

.wijzerkaart__nummer {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--asgrijs);
}

.wijzerkaart h3 {
	font-size: 1.08rem;
	margin-bottom: 0.4rem;
}

.wijzerkaart__tekst {
	font-size: 0.94rem;
	color: var(--asgrijs);
}

.wijzerkaart__slot {
	margin: 0.6rem 0 0;
	font-size: 0.86rem;
	color: var(--dennegroen);
	font-weight: 500;
}

.wijzerkaart.is-dicht {
	border-left-color: var(--rand);
	background: var(--rijstblad);
}

.wijzerkaart.is-dicht .wijzerkaart__tekst,
.wijzerkaart.is-dicht .wijzerkaart__slot {
	display: none;
}

.wijzerkaart.is-dicht h3 {
	color: var(--asgrijs);
}

.spoorblad__teller {
	margin: 0 0 0.9rem;
	padding: 0.55rem 0.85rem;
	background: var(--dennegroen);
	color: var(--sneeuw);
	border-radius: 2px;
	font-weight: 500;
	font-size: 0.94rem;
}

.volgerlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.volger {
	padding: 0.75rem 0.95rem;
	background: var(--sneeuw);
	border: 1px solid var(--rand);
	border-radius: 2px;
	transition: opacity 0.2s ease;
}

.volger__naam {
	margin: 0 0 0.35rem;
	font-family: var(--kop);
	font-size: 1.02rem;
}

.volger__merken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.4rem;
}

.volger__slot {
	margin: 0;
	font-size: 0.88rem;
	color: var(--asgrijs);
}

.volger.is-weg {
	opacity: 0.42;
}

.volger.is-weg .volger__naam {
	text-decoration: line-through;
}

.volger.is-weg .volger__slot {
	display: none;
}

/* =========================================================================
   15. Hulpmiddel 2: Sterrenpad
   ========================================================================= */

.sterrenveld {
	position: relative;
	isolation: isolate;
	background-image: url('images/sterrenhemel.jpg');
	background-size: cover;
	background-position: center;
}

.sterrenveld::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 13, 19, 0.6);
}

.sterrenpad {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
	align-items: start;
}

.sterrenpad__kaart {
	width: 100%;
	height: auto;
	background: rgba(9, 12, 18, 0.72);
	border: 1px solid var(--rand-donker);
	border-radius: 2px;
	touch-action: manipulation;
}

.sterrenpad__kaart.is-herkend {
	border-color: var(--vermiljoen-licht);
}

.sterrenpad__rand {
	stroke: var(--vermiljoen-licht);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.sterrenpad__kaart.is-herkend .sterrenpad__rand {
	stroke: var(--dennegroen-licht);
	stroke-width: 3.2;
}

.ster {
	cursor: pointer;
}

.ster__stip {
	fill: var(--sneeuw);
	transition: r 0.12s ease;
}

.ster__nummer {
	fill: var(--asgrijs-licht);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 13px;
}

.ster:hover .ster__stip,
.ster:focus-visible .ster__stip {
	fill: var(--vermiljoen-licht);
	r: 8.5;
}

.ster.is-gekozen .ster__stip {
	fill: var(--vermiljoen-licht);
	r: 9.5;
	stroke: var(--sneeuw);
	stroke-width: 2;
}

.sterrenpad__zijkant {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.sterrenpad__uitslag {
	margin: 0;
	padding: 0.9rem 1.05rem;
	min-height: 5.4rem;
	background: rgba(44, 90, 76, 0.28);
	border: 1px solid var(--dennegroen-licht);
	border-radius: 2px;
	color: var(--sneeuw);
	font-size: 0.96rem;
}

.sterrenpad__sleutel {
	padding: 0.9rem 1.05rem;
	background: rgba(9, 12, 18, 0.66);
	border: 1px dashed var(--rand-donker);
	border-radius: 2px;
	font-size: 0.9rem;
	color: var(--sneeuw);
}

.sterrenpad__sleutelkop {
	margin: 0 0 0.4rem;
	font-weight: 500;
	color: var(--dennegroen-licht);
}

.sterrenpad__sleutel ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* =========================================================================
   16. Hulpmiddel 3: Zwaardstemming
   ========================================================================= */

.stemblad {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
	align-items: start;
}

.stemcurve {
	width: 100%;
	height: auto;
}

.stemcurve__grond {
	stroke: var(--rand);
	stroke-width: 1.5;
}

.stemcurve__goot {
	fill: var(--rand);
	opacity: 0.5;
}

.stemcurve__staaf {
	fill: var(--dennegroen);
	opacity: 0.8;
}

.stemcurve__lijn {
	fill: none;
	stroke: var(--vermiljoen);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.stemcurve__knoop {
	fill: var(--vermiljoen);
}

.stemcurve__naam {
	fill: var(--asgrijs);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 13px;
	text-anchor: middle;
}

.stemblad__schuiven {
	display: grid;
	gap: 0.7rem;
	margin-top: 1.2rem;
}

.schuifrij {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.3rem 1rem;
}

.schuifrij label {
	font-size: 0.9rem;
	font-weight: 500;
}

.schuifrij__uitersten {
	grid-column: 2;
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: 0.76rem;
	color: var(--asgrijs);
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	/* Ruim boven de 36 px die een vinger nodig heeft. */
	height: 40px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: var(--rand);
}

input[type='range']::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--rand);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border-radius: 50%;
	border: 2px solid var(--sneeuw-licht);
	background: var(--vermiljoen);
}

input[type='range']::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--sneeuw-licht);
	background: var(--vermiljoen);
}

.stemblad__uitkomst {
	padding: 1.3rem 1.4rem;
	background: var(--sneeuw);
	border: 1px solid var(--rand);
	border-top: 3px solid var(--vermiljoen);
	border-radius: 2px;
}

.stemblad__naam {
	margin: 0 0 0.55rem;
	font-family: var(--kop);
	font-size: clamp(1.7rem, 2.8vw, 2.1rem);
	line-height: 1.15;
	color: var(--dennegroen);
}

.stemblad__zin {
	margin: 0 0 1rem;
	color: var(--asgrijs);
}

.stemblad__tegen {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rand);
	font-size: 0.92rem;
}

.stemblad__tegen strong {
	color: var(--vermiljoen);
}

/* =========================================================================
   17. Hulpmiddel 4: Inktproef
   ========================================================================= */

.steenveld {
	position: relative;
	isolation: isolate;
	background-image: url('images/steenplaat.jpg');
	background-size: cover;
	background-position: center;
}

.steenveld::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* De plaat is een structuur zonder onderwerp; een stevige sluier haalt er
	   niets uit en maakt lichte tekst er ruim leesbaar op. */
	background: rgba(16, 20, 25, 0.82);
}

.inktblad {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
	align-items: start;
}

.inktblad__steen {
	padding: 1.6rem 1.5rem;
	background: rgba(9, 12, 16, 0.62);
	border: 1px solid var(--rand-donker);
	border-radius: 2px;
}

.inktregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.85em;
	margin: 0 0 0.8rem;
	font-family: var(--kop);
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	letter-spacing: 0.07em;
	line-height: 1.5;
}

/* Een woord blijft bij elkaar; de regel breekt alleen tussen twee woorden. */
.inktwoord {
	display: inline-flex;
	align-items: center;
	gap: 0.16rem;
}

.inktklaar {
	color: var(--asgrijs-licht);
}

.inktvak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.05em;
}

.inktteken {
	display: block;
	width: 0.86em;
	height: 1.03em;
	color: var(--vermiljoen-licht);
}

.inktteken--groot {
	width: 26px;
	height: 31px;
	color: var(--sneeuw);
}

.inktvak.is-open .inktteken {
	display: none;
}

.inktletter {
	color: var(--dennegroen-licht);
	font-weight: 700;
}

.inktblad__slot {
	margin: 1.4rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rand-donker);
	font-family: var(--lijf);
	font-size: 0.95rem;
	color: var(--sneeuw);
}

.inktblad__zijkant {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.inktblad__teller {
	margin: 0;
	padding: 0.55rem 0.85rem;
	background: rgba(44, 90, 76, 0.34);
	border: 1px solid var(--dennegroen-licht);
	border-radius: 2px;
	font-weight: 500;
	font-size: 0.94rem;
	color: var(--sneeuw);
}

.inktblad__keuzes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8rem;
}

.inktkeuze {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 0.4rem;
	background: rgba(9, 12, 16, 0.6);
	border: 1px solid var(--rand-donker);
	border-radius: 2px;
}

.inktkeuze.is-goed {
	border-color: var(--dennegroen-licht);
}

.inktkeuze.is-goed .inktteken--groot {
	color: var(--dennegroen-licht);
}

.inktkeuze.is-mis {
	border-color: var(--vermiljoen-licht);
}

.inktblad__sleutel {
	padding: 0.9rem 1.05rem;
	background: rgba(9, 12, 16, 0.6);
	border: 1px dashed var(--rand-donker);
	border-radius: 2px;
	font-size: 0.9rem;
	color: var(--sneeuw);
}

.inktblad__sleutelkop {
	margin: 0 0 0.4rem;
	font-weight: 500;
	color: var(--dennegroen-licht);
}

.inktblad__sleutel ul {
	margin: 0 0 0.8rem;
	padding-left: 1.1rem;
}

select,
input[type='text'],
input[type='email'],
input[type='number'],
textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--sneeuw-licht);
	color: var(--sumi);
	font-family: var(--lijf);
	font-size: 0.97rem;
	line-height: 1.5;
}

textarea {
	resize: vertical;
}

.inktkeuze select {
	min-height: 38px;
	padding: 0.3rem 0.35rem;
	text-align: center;
	font-weight: 500;
}

/* =========================================================================
   18. Hoofdstukken en seizoenen
   ========================================================================= */

.hoofdstukrij {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.seizoenkaart {
	display: grid;
	grid-template-columns: 4.2rem minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.4rem;
	align-items: start;
	padding: 1.3rem 1.4rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-left: 4px solid var(--asgrijs);
	border-radius: 2px;
}

.seizoenkaart--oker {
	border-left-color: #8a6a24;
}

.seizoenkaart--grijs {
	border-left-color: #5c6873;
}

.seizoenkaart--blauw {
	border-left-color: #2f5b86;
}

.seizoenkaart--bruin {
	border-left-color: #7a4a2c;
}

.seizoenkaart--groen {
	border-left-color: var(--dennegroen);
}

.seizoenkaart__nummer {
	margin: 0;
	font-family: var(--kop);
	font-size: 2.1rem;
	line-height: 1;
	/* Decoratieve cijfers in de randkleur halen geen 3:1; deze wel. */
	color: var(--asgrijs);
}

.seizoenkaart h3 {
	margin-bottom: 0.3rem;
}

.seizoenkaart__kort {
	margin: 0;
	font-size: 0.95rem;
	color: var(--asgrijs);
}

.seizoenkaart__meta {
	margin: 0;
	gap: 0.9rem;
	flex-direction: column;
}

.seizoenkaart__meta dd {
	font-size: 0.9rem;
	font-weight: 400;
}

.jaarband {
	display: flex;
	border: 1px solid var(--rand);
	border-radius: 2px;
	overflow: hidden;
}

.jaarband__vak {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	padding: 1rem 0.5rem;
	text-align: center;
	color: var(--sneeuw);
}

/* Als vlak met tekst erop moet oker donkerder dan de randkleur: #8a6a24 haalt
   met sneeuwwitte tekst maar 4,4:1, deze tint 5,4:1. */
.jaarband__vak--oker {
	background: #7a5c1e;
}

.jaarband__vak--grijs {
	background: #4c5762;
}

.jaarband__vak--blauw {
	background: #2f5b86;
}

.jaarband__vak--bruin {
	background: #7a4a2c;
}

.jaarband__vak--groen {
	background: var(--dennegroen);
}

.jaarband__nummer {
	font-family: var(--kop);
	font-size: 1.35rem;
	line-height: 1;
}

.jaarband__naam {
	font-size: 0.84rem;
}

.hoofdstukblad {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	padding-left: 1.4rem;
	border-left: 4px solid var(--asgrijs);
}

.hoofdstukblad--oker {
	border-left-color: #8a6a24;
}

.hoofdstukblad--grijs {
	border-left-color: #5c6873;
}

.hoofdstukblad--blauw {
	border-left-color: #2f5b86;
}

.hoofdstukblad--bruin {
	border-left-color: #7a4a2c;
}

.hoofdstukblad--groen {
	border-left-color: var(--dennegroen);
}

.hoofdstukblad__nummer {
	margin: 0 0 0.3rem;
	font-family: var(--kop);
	font-size: 1.2rem;
	color: var(--dennegroen);
}

.hoofdstukblad__seizoen {
	margin: 0 0 0.2rem;
	font-size: 0.86rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--asgrijs);
}

.hoofdstukblad__duur {
	margin: 0;
	font-size: 0.88rem;
	color: var(--asgrijs);
}

.hoofdstukblad__kort {
	font-size: 1.06rem;
	font-weight: 500;
}

.hoofdstukblad__verandert {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rand);
	font-size: 0.92rem;
}

.hoofdstukblad__verandert span {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--asgrijs);
}

/* =========================================================================
   19. Bladkoppen van de losse pagin
’
   ========================================================================= */

.bladkop {
	position: relative;
	isolation: isolate;
	padding: clamp(2.8rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4vw, 3.2rem);
	background-image: url('images/washi.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.bladkop::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Het papier is licht en heeft geen onderwerp; deze lichte sluier tilt de
	   verhouding met de donkere tekst naar ruim boven de tien. */
	background: rgba(240, 238, 230, 0.55);
}

.bladkop h1 {
	max-width: 22ch;
}

.bladkop__inleiding {
	max-width: 44rem;
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	color: var(--asgrijs);
}

.bladkop--stuk h1 {
	max-width: 26ch;
}

/* =========================================================================
   20. Stappen, tijdband, krijgerbladen
   ========================================================================= */

.staprij {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.stapkaart {
	display: grid;
	grid-template-columns: 5.2rem minmax(0, 1fr);
	gap: 1.4rem;
	padding: 1.5rem 1.5rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.stapkaart__nummer {
	margin: 0;
	font-family: var(--kop);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--vermiljoen);
}

.stapkaart__cijfer {
	margin: 1rem 0 0;
	font-size: 0.92rem;
	color: var(--asgrijs);
}

.stapkaart__cijfer strong {
	color: var(--dennegroen);
	font-family: var(--kop);
	font-size: 1.1rem;
}

.tijdband {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.tijdband__punt {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--rand);
}

.tijdband__punt:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tijdband__wanneer {
	margin: 0;
	font-family: var(--kop);
	font-size: 1.1rem;
	color: var(--dennegroen);
}

.krijgerblad {
	padding: clamp(1.3rem, 2.6vw, 2rem);
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.krijgerblad__kop {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.2rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--rand);
	flex-wrap: wrap;
}

.krijgerblad__kop h2 {
	margin: 0;
}

.krijgerblad__zin {
	margin: 0;
	color: var(--asgrijs);
}

.krijgerblad__kop .zegel--vol {
	margin-left: auto;
}

.krijgerblad__lijf {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
}

.krijgerblad__balkenkop {
	margin: 0 0 0.8rem;
	font-size: 0.76rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--asgrijs);
}

.balkenkaart {
	width: 100%;
	height: auto;
}

.balkenkaart__naam {
	fill: var(--sumi);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 13px;
}

.balkenkaart__goot {
	fill: var(--rand);
}

.balkenkaart__balk {
	fill: var(--dennegroen);
}

.balkenkaart__cijfer {
	fill: var(--vermiljoen);
	font-family: 'Shippori Mincho', serif;
	font-size: 15px;
	text-anchor: end;
}

/* =========================================================================
   21. Ontwikkeldagboek: de vouwstrook
   ========================================================================= */

.vouwstrook {
	display: flex;
	flex-direction: column;
}

.vouwstuk {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.2rem);
	padding: 1.9rem 0;
	border-top: 1px solid var(--rand);
}

.vouwstuk:first-child {
	border-top: 0;
	padding-top: 0;
}

.vouwstuk:last-child {
	padding-bottom: 0;
}

.vouwstuk__datum {
	margin: 0 0 0.2rem;
	font-family: var(--kop);
	font-size: 1rem;
}

.vouwstuk__duur,
.vouwstuk__soort {
	margin: 0;
	font-size: 0.84rem;
	color: var(--asgrijs);
}

.vouwstuk__soort {
	margin-top: 0.5rem;
	color: var(--dennegroen);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.vouwstuk__woord {
	max-width: 44rem;
}

.vouwstuk__woord h2,
.vouwstuk__woord h3 {
	margin-bottom: 0.5rem;
	font-size: clamp(1.24rem, 2.1vw, 1.6rem);
}

.vouwstuk__woord h2 a,
.vouwstuk__woord h3 a {
	display: inline-block;
	min-height: 36px;
	color: var(--sumi);
	text-decoration: none;
}

.vouwstuk__woord h2 a:hover,
.vouwstuk__woord h2 a:focus-visible,
.vouwstuk__woord h3 a:hover,
.vouwstuk__woord h3 a:focus-visible {
	color: var(--vermiljoen);
}

.vouwstuk__woord p {
	color: var(--asgrijs);
}

.vouwstuk__deur {
	margin-top: 0.9rem;
}

.vouwblad {
	border-top: 1px solid var(--rand);
}

.vouwblad__vraag {
	border-bottom: 1px solid var(--rand);
}

.vouwblad__vraag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 46px;
	padding: 0.85rem 0;
	font-family: var(--kop);
	font-size: 1.1rem;
	cursor: pointer;
	list-style: none;
}

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

.vouwblad__vraag summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--vermiljoen);
}

.vouwblad__vraag[open] summary::after {
	content: '\2013';
}

.vouwblad__vraag p {
	margin: 0 0 1.1rem;
	max-width: 54rem;
	color: var(--asgrijs);
}

/* =========================================================================
   22. Formulieren
   ========================================================================= */

.brieflade {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.6rem, 3.5vw, 3rem);
	align-items: start;
}

.brieflade--omgekeerd {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.brieflade__vel {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.brieflade__uitleg {
	padding: 1.5rem 1.5rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 2px;
}

.brieflade__uitleg h2,
.brieflade__uitleg h3 {
	font-size: 1.16rem;
	margin-bottom: 0.8rem;
}

.brieflade__uitleg h3 {
	margin-top: 1.6rem;
}

.veldrij {
	display: grid;
	gap: 0.35rem;
}

.veldrij label {
	font-size: 0.88rem;
	font-weight: 500;
}

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

.lokvak {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.koekwis {
	margin-top: 2rem;
	padding: 1.4rem 1.5rem;
	background: var(--sneeuw-licht);
	border: 1px solid var(--rand);
	border-radius: 2px;
	max-width: 46rem;
}

.koekwis .schuifdeur {
	margin-top: 1rem;
}

.koekwis .bericht {
	margin: 1.2rem 0 0;
}

/* =========================================================================
   23. Voet en opslagstrook
   ========================================================================= */

.steenvoet {
	background: var(--sumi);
	color: var(--sneeuw);
	padding: clamp(2.6rem, 5vw, 4rem) 0 1.8rem;
}

.steenvoet__rooster {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.6rem);
}

.steenvoet__merk {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.steenvoet__merk .zegelmerk__teken {
	width: 34px;
	height: 34px;
}

.steenvoet__merk .zegelmerk__naam {
	color: var(--sneeuw);
}

/* Het tweede deel van het merk staat in het accent. Op sumi haalt het gewone
   vermiljoen 2,3:1, dus daar hoort de lichte variant. */
.steenvoet__merk .zegelmerk__naam span {
	color: var(--vermiljoen-licht);
}

.steenvoet__rooster > div > p {
	color: var(--asgrijs-licht);
	font-size: 0.92rem;
}

.steenvoet__kop {
	margin: 0 0 0.7rem;
	font-family: var(--lijf);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dennegroen-licht);
}

.padlijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.padlijst a {
	display: inline-flex;
	align-items: center;
	/* Onder de 36 px valt een link in de voet niet meer met een duim te raken. */
	min-height: 36px;
	color: var(--sneeuw);
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.padlijst a:hover,
.padlijst a:focus-visible {
	color: var(--vermiljoen-licht);
	border-bottom-color: var(--vermiljoen-licht);
}

.padlijst--klein {
	margin-top: 0.8rem;
}

.padlijst--klein a {
	font-size: 0.86rem;
	color: var(--asgrijs-licht);
}

.steenvoet__gegevens {
	margin: 0 0 0.4rem;
}

.steenvoet__gegevens dt {
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--asgrijs-licht);
	margin-top: 0.6rem;
}

.steenvoet__gegevens dd {
	margin: 0;
}

.steenvoet__gegevens dd a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--sneeuw);
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 1px solid var(--rand-donker);
}

.steenvoet__gegevens dd a:hover,
.steenvoet__gegevens dd a:focus-visible {
	color: var(--vermiljoen-licht);
	border-bottom-color: var(--vermiljoen-licht);
}

.steenvoet__gegevens--groot {
	color: var(--sumi);
}

.steenvoet__gegevens--groot dt {
	color: var(--asgrijs);
}

.steenvoet__gegevens--groot dd,
.steenvoet__gegevens--groot dd a {
	color: var(--sumi);
	font-size: 1rem;
}

.steenvoet__gegevens--groot dd a {
	border-bottom-color: var(--rand);
}

.steenvoet__gegevens--groot dd a:hover,
.steenvoet__gegevens--groot dd a:focus-visible {
	color: var(--vermiljoen);
	border-bottom-color: var(--vermiljoen);
}

.steenvoet__streep {
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rand-donker);
	font-size: 0.84rem;
	color: var(--asgrijs-licht);
}

.steenvoet__streep p {
	margin: 0 0 0.3rem;
}

.koekbalk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background: var(--sumi);
	color: var(--sneeuw);
	border-top: 3px solid var(--vermiljoen);
	padding: 1rem 0;
}

.koekbalk__binnen {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.koekbalk p {
	flex: 1 1 22rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--sneeuw);
}

.koekbalk__knoppen {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.koekbalk__lezen {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--asgrijs-licht);
	font-size: 0.88rem;
}

.koekbalk__lezen:hover,
.koekbalk__lezen:focus-visible {
	color: var(--vermiljoen-licht);
}

/* =========================================================================
   24. De 404
   ========================================================================= */

.zoekgeraakt {
	text-align: center;
}

.zoekgeraakt .deurrij {
	justify-content: center;
}

.zoekgeraakt__cijfer {
	margin: 0 0 0.6rem;
	font-family: var(--kop);
	font-size: clamp(4rem, 12vw, 7.5rem);
	line-height: 1;
	/* Een groot cijfer in de randkleur haalt 1,3:1; deze kleur haalt 6,3:1. */
	color: var(--vermiljoen-licht);
}

.zoekgeraakt p:not(.zoekgeraakt__cijfer) {
	max-width: 40rem;
	margin-inline: auto;
	color: var(--sneeuw);
}

/* =========================================================================
   25. Verschijnen bij het scrollen
   -------------------------------------------------------------------------
   Alleen onder de klasse js, die de kop van de pagina met een scriptregel
   zet. Zonder scripts staat er dus niets op nul doorzichtigheid.
   ========================================================================= */

.js .paviljoen,
.js .windvouw,
.js .bladkop {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .paviljoen.is-binnen,
.js .windvouw.is-binnen,
.js .bladkop.is-binnen {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .paviljoen,
	.js .windvouw,
	.js .bladkop {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   26. Smallere schermen
   ========================================================================= */

@media (max-width: 1080px) {
	.tatami--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.telbord {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steenvoet__rooster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 920px) {
	.poortdak__binnen {
		gap: 0.6rem;
	}

	.gongknop {
		display: block;
		order: 3;
	}

	/* De marge hoort op de knop en niet op de hamburger: anders schuift de
	   hamburger naar rechts en valt de knop op de tweede regel. */
	.poortdak__knop {
		order: 2;
		margin-left: auto;
	}

	.wandelpad {
		order: 4;
		flex-basis: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0.4rem 0 0.9rem;
		border-top: 1px solid var(--rand);
	}

	.wandelpad--uit {
		display: flex;
	}

	/* Inline-flex laat de link net zo breed worden als zijn tekst, en dan wordt
	   de scheidingslijn eronder een ragged streepje in plaats van een regel. */
	.wandelpad a {
		display: flex;
		min-height: 48px;
		padding: 0 0.2rem;
		border-bottom: 1px solid var(--rand);
	}

	.wandelpad li:last-child a {
		border-bottom: 0;
	}

	.aanzicht__binnen,
	.duo,
	.duo--klein,
	.gewest,
	.mens,
	.tweeluik,
	.stilblok,
	.spoorblad,
	.sterrenpad,
	.stemblad,
	.inktblad,
	.brieflade,
	.brieflade--omgekeerd,
	.krijgerblad__lijf {
		grid-template-columns: minmax(0, 1fr);
	}

	.gewest--omgekeerd .gewest__kader,
	.mens--omgekeerd .mens__kader {
		order: 0;
	}

	.mens__kader {
		max-width: 18rem;
	}

	.tatami--drie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.seizoenkaart {
		grid-template-columns: 3.4rem minmax(0, 1fr);
	}

	.seizoenkaart__meta {
		grid-column: 2;
		flex-direction: row;
	}

	.hoofdstukblad,
	.tijdband__punt,
	.stapkaart,
	.vouwstuk {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}

	.stapkaart__nummer {
		font-size: 2rem;
	}

	.banier__binnen {
		justify-content: flex-start;
	}

	.banier::after {
		background: linear-gradient(180deg, rgba(15, 19, 24, 0.62) 0%, rgba(15, 19, 24, 0.86) 60%);
	}

	.plank::after {
		background: rgba(240, 240, 236, 0.86);
	}

	.paviljoen__kop--rechts {
		margin-left: 0;
		text-align: left;
	}

	.jaarband {
		flex-wrap: wrap;
	}

	.jaarband__vak {
		flex: 1 1 33%;
	}

	/* De sterrenkaart wordt op een smal scherm tot ongeveer de helft verkleind;
	   zonder deze bijstelling zijn de nummers nog maar zes pixels hoog. */
	.ster__nummer {
		font-size: 21px;
	}

	.ster__stip {
		r: 8.5;
	}
}

@media (max-width: 660px) {
	body {
		font-size: 0.99rem;
	}

	.binnenhof,
	.binnenhof--smal {
		width: min(100% - 1.8rem, var(--breed));
	}

	.tatami--twee,
	.tatami--drie,
	.tatami--vier,
	.telbord,
	.veldpaar,
	.steenvoet__rooster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Een brede tabel duwt anders de hele bladzijde uit het scherm. */
	.steentabel {
		font-size: 0.9rem;
		min-width: 34rem;
	}

	.steentabel thead th {
		white-space: normal;
	}

	.steentabel--smal {
		min-width: 0;
	}

	.zegelmerk__naam {
		font-size: 1.2rem;
	}

	.zegelmerk__teken {
		width: 32px;
		height: 32px;
	}

	.poortdak__knop {
		padding: 0.5rem 0.75rem;
		font-size: 0.82rem;
		min-height: 40px;
	}

	.schuifrij {
		grid-template-columns: minmax(0, 1fr);
	}

	.schuifrij__uitersten {
		grid-column: 1;
	}

	.stempelkaart blockquote {
		margin-right: 0;
		margin-top: 1.6rem;
	}

	.inktblad__keuzes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.deurrij .schuifdeur,
	.deurstapel .schuifdeur,
	.koekbalk__knoppen .schuifdeur {
		flex: 1 1 auto;
	}

	.jaarband__vak {
		flex: 1 1 50%;
	}

	.krijgerblad__kop .zegel--vol {
		margin-left: 0;
	}
}

@media (max-width: 420px) {
	.zegelmerk__naam {
		font-size: 1.06rem;
	}

	.poortdak__knop {
		padding: 0.5rem 0.6rem;
		font-size: 0.78rem;
	}
}