/*
Theme Name: Spelvoro
Theme URI: https://spelvoro.org/
Author: Fanpagina Spelvoro
Author URI: https://spelvoro.org/
Description: Onofficiële Nederlandstalige fanpagina over het spel Cult of the Lamb. Donker thema met kaarslicht, vier eigen werktuigen rond de kudde, de rituelen, de volgelingen en de tochten. Niet verbonden aan de uitgever of de ontwikkelaar van dat spel.
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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spelvoro
Tags: dark, one-column, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   Lettertypen uit de map fonts, niet van een server buiten deze site
   ========================================================================= */

@font-face {
	font-family: 'Uncial Antiqua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/uncial-antiqua-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Uncial Antiqua';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/uncial-antiqua-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/literata-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/literata-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/literata-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/literata-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Grondslag
   ========================================================================= */

:root {
	--nachtwol: #1a1220;
	--kaarshoek: #241a2c;
	--dieper: #150e1a;
	--rand: #3a2b45;
	--linnen: #ece3dc;
	--zacht: #c3b4bd;
	--kaarsvlam: #e9a94a;
	--wolgroen: #86c08a;
	--wolrood: #e07a68;
	--gedoofd: #a3874f;
	--dak: 4.75rem;
	--breed: 74rem;
	--smal: 52rem;
}

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

/* Het attribuut hidden wordt door elke klasse met display overstemd; deze
   regel zet dat een keer voor de hele site recht. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dak) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--nachtwol);
	color: var(--linnen);
	font-family: 'Literata', Georgia, 'Times New Roman', serif;
	font-size: 1.0625rem;
	line-height: 1.72;
}

h1,
h2,
h3,
h4 {
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: 0.01em;
	margin: 0 0 0.7em;
}

h1 {
	font-size: clamp(2rem, 4.6vw, 3.05rem);
}

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

h3 {
	font-size: 1.28rem;
}

h4 {
	font-size: 1.06rem;
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--kaarsvlam);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

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

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

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

figure {
	margin: 0;
}

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

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 60;
	background: var(--kaarsvlam);
	color: var(--nachtwol);
	padding: 0.85rem 1.4rem;
	font-weight: 600;
	text-decoration: none;
}

.overslaan:focus {
	left: 0.75rem;
	top: 0.75rem;
	color: var(--nachtwol);
}

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

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

/* =========================================================================
   Knoppen: de staf
   ========================================================================= */

.staf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.9rem;
	padding: 0.72rem 1.35rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: transparent;
	color: var(--linnen);
	font: inherit;
	font-size: 0.98rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.staf:hover,
.staf:focus-visible {
	background: var(--kaarshoek);
	border-color: var(--kaarsvlam);
	color: var(--linnen);
}

.staf--vlam {
	background: var(--kaarsvlam);
	border-color: var(--kaarsvlam);
	color: var(--nachtwol);
	font-weight: 600;
}

.staf--vlam:hover,
.staf--vlam:focus-visible {
	background: var(--linnen);
	border-color: var(--linnen);
	color: var(--nachtwol);
}

.staf--stil {
	border-color: var(--rand);
	background: var(--kaarshoek);
}

.staf--kort {
	min-height: 2.5rem;
	padding: 0.55rem 1rem;
	font-size: 0.92rem;
}

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

.stafrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 1.4rem 0 0;
}

/* =========================================================================
   Scheidingsband: kaarsdruppels
   ========================================================================= */

.kaarsrand {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(0.9rem, 3vw, 2.4rem);
	height: 76px;
	margin: 0;
	border-top: 2px solid var(--gedoofd);
	padding-top: 0;
	overflow: hidden;
}

.kaarsrand i {
	display: block;
	position: relative;
	width: 7px;
	height: var(--druppel, 30px);
	border-radius: 0 0 7px 7px;
	background: linear-gradient(180deg, var(--kaarsvlam) 0%, var(--gedoofd) 72%, rgba(163, 135, 79, 0.15) 100%);
}

.kaarsrand i::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 17px;
	height: 7px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(163, 135, 79, 0.4);
}

.kaarsrand--kort {
	height: 52px;
}

.kaarsrand--kort i {
	height: calc(var(--druppel, 30px) * 0.6);
}

/* =========================================================================
   Kop van de site: de klokstoel
   ========================================================================= */

.klokstoel {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(21, 14, 26, 0.97);
	border-bottom: 1px solid var(--rand);
}

.klokstoel__binnen {
	width: min(100% - 2rem, var(--breed));
	margin-inline: auto;
	min-height: var(--dak);
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.klokstoel__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 2.6rem;
	padding: 0.25rem 0;
	color: var(--linnen);
	text-decoration: none;
}

.klokstoel__naam {
	display: block;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 1.35rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.klokstoel__naam span {
	color: var(--kaarsvlam);
}

.klokstoel__onder {
	display: block;
	font-family: 'Literata', Georgia, serif;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zacht);
}

.beltouw {
	display: none;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.7rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--kaarshoek);
	color: var(--linnen);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
}

.beltouw__strengen {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
}

.beltouw__strengen i {
	display: block;
	width: 19px;
	height: 2px;
	background: var(--kaarsvlam);
}

.klokstoel__navigatie {
	margin-left: auto;
}

.processie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.processie li {
	margin: 0;
}

.processie a {
	display: inline-flex;
	align-items: center;
	min-height: 2.6rem;
	color: var(--linnen);
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

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

/* De knop naar contact staat rechts van het menu; de marge hangt hier en niet
   aan de menuknop, anders valt de kop op 390px in twee rijen uiteen. */
.klokstoel .staf--vlam {
	margin-left: 0;
	flex: 0 0 auto;
}

/* =========================================================================
   Secties: de tempel
   ========================================================================= */

.tempel {
	padding: clamp(3rem, 6vw, 5.25rem) 0;
}

.tempel--diep {
	background: var(--dieper);
}

.tempel--paneel {
	background: var(--kaarshoek);
}

.tempel--kort {
	padding: clamp(2rem, 4vw, 3rem) 0;
}

.tempel__kop {
	max-width: 46rem;
	margin: 0 0 2.4rem;
}

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

.tempel__kop p {
	color: var(--zacht);
	margin-bottom: 0;
}

.wenkbrauw {
	display: block;
	margin: 0 0 0.7rem;
	font-family: 'Literata', Georgia, serif;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

/* =========================================================================
   Eerste scherm
   ========================================================================= */

.eerstelicht {
	position: relative;
	isolation: isolate;
	padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(3rem, 7vw, 5.5rem);
	background-image: url('images/kop-kaarsweide.jpg');
	background-size: cover;
	background-position: center 62%;
}

.eerstelicht::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(15, 9, 19, 0.95) 0%, rgba(19, 12, 24, 0.9) 46%, rgba(26, 18, 32, 0.72) 100%);
}

.eerstelicht__binnen {
	max-width: 40rem;
}

.eerstelicht h1 {
	margin-bottom: 0.55em;
}

.eerstelicht__lead {
	font-size: 1.12rem;
	color: var(--linnen);
}

.eerstelicht__platform {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	margin: 1.8rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	color: var(--zacht);
}

.eerstelicht__platform li::before {
	content: '\25C6';
	color: var(--wolgroen);
	margin-right: 0.5rem;
	font-size: 0.7em;
	vertical-align: 0.15em;
}

/* =========================================================================
   Kop van een binnenbladzijde
   ========================================================================= */

.wolkop {
	position: relative;
	isolation: isolate;
	padding: clamp(2.6rem, 6vw, 4.5rem) 0;
	background-image: url('images/wolweefsel.jpg');
	background-size: 520px auto;
	background-position: center;
}

.wolkop::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(19, 12, 24, 0.93);
}

.wolkop__binnen {
	max-width: 44rem;
}

.wolkop p {
	margin-bottom: 0;
	color: var(--linnen);
}

.kruimel {
	display: block;
	margin: 0 0 0.8rem;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

/* =========================================================================
   Kaarten
   ========================================================================= */

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

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

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

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

.volgelingkaart,
.plekkaart,
.leerkaart {
	display: flex;
	flex-direction: column;
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
}

.volgelingkaart img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.volgelingkaart__lijf,
.plekkaart__lijf,
.leerkaart__lijf {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.35rem 1.4rem 1.5rem;
}

.volgelingkaart h3,
.plekkaart h3,
.leerkaart h3 {
	margin-bottom: 0.5rem;
}

.volgelingkaart p,
.plekkaart p,
.leerkaart p {
	color: var(--zacht);
}

.volgelingkaart ul,
.plekkaart ul {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	color: var(--zacht);
	font-size: 0.95rem;
}

.volgelingkaart li,
.plekkaart li {
	margin-bottom: 0.5rem;
}

/* De plekkaart draagt de meta boven de kop in plaats van eronder. */
.plekkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 0 0 0.7rem;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.plekkaart__let {
	margin: 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--gedoofd);
	background: rgba(26, 18, 32, 0.7);
	font-size: 0.93rem;
	color: var(--linnen);
}

/* =========================================================================
   Tweeluik: beeld naast tekst
   ========================================================================= */

.tweeluik {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.2rem);
	align-items: center;
}

.tweeluik--omgekeerd .tweeluik__beeld {
	order: 2;
}

.tweeluik__beeld img {
	width: 100%;
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.tweeluik__lijst {
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
}

.tweeluik__lijst li {
	position: relative;
	margin-bottom: 0.85rem;
	padding-left: 1.6rem;
	color: var(--zacht);
}

.tweeluik__lijst li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: var(--wolgroen);
}

/* =========================================================================
   Telstenen
   ========================================================================= */

.telsteen {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.4rem;
	background: var(--nachtwol);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.telsteen__getal {
	display: block;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 2.7rem;
	line-height: 1;
	color: var(--kaarsvlam);
}

.telsteen__kop {
	display: block;
	margin: 0.55rem 0 0.7rem;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.telsteen p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--zacht);
}

/* =========================================================================
   Wimpels: de verslagen van spelers
   ========================================================================= */

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

.wimpelbalk::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(15, 9, 19, 0.9);
}

.wimpelrij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin: 0;
	padding: 2.4rem 0 0;
	list-style: none;
	border-top: 3px solid var(--gedoofd);
}

.wimpel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.6rem 1.2rem 2.4rem;
	background: linear-gradient(180deg, var(--kaarshoek) 0%, rgba(36, 26, 44, 0.86) 100%);
	border: 1px solid var(--rand);
	border-top: none;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 88% 100%, 74% calc(100% - 16px), 60% 100%, 46% calc(100% - 16px), 32% 100%, 18% calc(100% - 16px), 0 100%);
}

.wimpel--laag {
	margin-top: 2.2rem;
}

.wimpel--lager {
	margin-top: 1.1rem;
}

.wimpel__oog {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 1.1rem;
	border: 2px solid var(--kaarsvlam);
	border-radius: 50%;
	position: relative;
}

.wimpel__oog::after {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--wolgroen);
}

.wimpel__citaat {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--linnen);
}

.wimpel__tekst {
	margin: 0 0 1.2rem;
	font-size: 0.93rem;
	color: var(--zacht);
}

.wimpel__naam {
	display: block;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 1.02rem;
	color: var(--kaarsvlam);
}

.wimpel__staat {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.79rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

/* =========================================================================
   Drieluik: het journaal
   ========================================================================= */

/* minmax(0, 1fr) en niet 1fr: een breed drieluik met een vast beeldspoor heeft
   een grote min-content en duwt anders de kolommen scheef, waarna de tekst in
   het brede luik tot een kolom van een woord breed inzakt. */
.luikrij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Het rasteronderdeel is het lijstonderdeel en niet het drieluik erbinnen; een
   span op het drieluik zelf doet dus niets. */
.luikrij > li {
	display: grid;
}

.luikrij__breed {
	grid-column: span 2;
}

.drieluik {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color 0.2s;
}

.drieluik:hover,
.drieluik:focus-within {
	border-color: var(--kaarsvlam);
}

.drieluik__stulp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.9rem;
	padding: 1.2rem 0.5rem;
	background: var(--dieper);
	border-right: 1px solid var(--rand);
}

.drieluik__nummer {
	display: block;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--gedoofd);
}

.drieluik__datum {
	writing-mode: vertical-rl;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.drieluik__midden {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.35rem 1.4rem 1.5rem;
}

.drieluik__kop {
	font-size: 1.16rem;
	margin-bottom: 0.6rem;
}

.drieluik__kop a {
	color: var(--linnen);
	text-decoration: none;
}

.drieluik__kop a:hover,
.drieluik__kop a:focus-visible {
	color: var(--kaarsvlam);
}

.drieluik__midden p {
	color: var(--zacht);
	font-size: 0.95rem;
}

.drieluik__duur {
	margin-top: auto;
	padding-top: 0.6rem;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gedoofd);
}

.drieluik--breed {
	grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 13rem);
}

.drieluik__rechterstulp {
	border-left: 1px solid var(--rand);
}

.drieluik__rechterstulp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   Vragen
   ========================================================================= */

.twijfel {
	border: 1px solid var(--rand);
	border-radius: 3px;
	background: var(--kaarshoek);
	margin-bottom: 0.9rem;
}

.twijfel summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.1rem;
	padding: 0.85rem 1.2rem;
	cursor: pointer;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 1.04rem;
	color: var(--linnen);
	list-style: none;
}

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

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

.twijfel[open] summary::after {
	content: '\2212';
}

.twijfel__antwoord {
	margin: 0;
	padding: 0 1.2rem 1.3rem;
	color: var(--zacht);
}

/* =========================================================================
   Tabellen
   ========================================================================= */

.tafelrol {
	overflow-x: auto;
	margin: 0 0 1.6rem;
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.leerstaat {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.leerstaat caption {
	padding: 0.9rem 1rem;
	text-align: left;
	color: var(--zacht);
	font-size: 0.88rem;
	border-bottom: 1px solid var(--rand);
}

.leerstaat th,
.leerstaat td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--rand);
}

.leerstaat thead th {
	background: var(--dieper);
	color: var(--wolgroen);
	font-family: 'Literata', Georgia, serif;
	font-weight: 600;
	font-size: 0.79rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.leerstaat tbody th {
	color: var(--linnen);
	font-weight: 600;
	white-space: nowrap;
}

.leerstaat td {
	color: var(--zacht);
}

.leerstaat tbody tr:last-child th,
.leerstaat tbody tr:last-child td {
	border-bottom: none;
}

/* =========================================================================
   Tijdband
   ========================================================================= */

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

.tijdband li {
	position: relative;
	padding: 0 0 2.2rem 4.4rem;
	border-left: 2px solid var(--rand);
	margin-left: 1.4rem;
}

.tijdband li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.tijdband__fase {
	position: absolute;
	left: -1.45rem;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.85rem;
	height: 2.85rem;
	border: 2px solid var(--gedoofd);
	border-radius: 50%;
	background: var(--nachtwol);
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 0.95rem;
	color: var(--kaarsvlam);
}

.tijdband h3 {
	margin-bottom: 0.35rem;
}

.tijdband__wanneer {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.tijdband p {
	margin: 0;
	color: var(--zacht);
}

/* =========================================================================
   Werktuig 1: de leerstelweegschaal
   ========================================================================= */

.weegschaal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3.5vw, 2.8rem);
	align-items: start;
}

.weegschaal__beeld {
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
	padding: 1.4rem;
}

.weegschaal__tekening {
	width: 100%;
	height: auto;
	display: block;
}

/* Zonder transform-box rekent de browser de oorsprong vanaf het svg-element
   zelf, en dan kantelt het koormhout om een punt buiten beeld. */
.weegschaal__arm {
	transform-box: view-box;
	transform-origin: 300px 62px;
	transition: transform 0.4s ease;
}

.weegschaal__cijfers {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.weegschaal__cijfers b {
	color: var(--kaarsvlam);
	font-size: 1.15rem;
}

.weegschaal__uitkomst {
	margin-top: 1.4rem;
	padding: 1.25rem 1.3rem;
	background: var(--nachtwol);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.weegschaal__uitkomst h3 {
	margin-bottom: 0.6rem;
	color: var(--kaarsvlam);
}

.weegschaal__uitkomst p {
	color: var(--zacht);
	font-size: 0.96rem;
}

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

.weegschaal__vast {
	border-top: 1px solid var(--rand);
	padding-top: 0.9rem;
	color: var(--linnen) !important;
}

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

.jeton {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem 0.85rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--rand);
}

.jeton:first-child {
	border-top: 1px solid var(--rand);
}

.jeton__naam {
	display: block;
	font-weight: 600;
	font-size: 0.99rem;
}

.jeton__kort {
	display: block;
	font-size: 0.85rem;
	color: var(--zacht);
}

.jeton__gewicht {
	color: var(--gedoofd);
	font-size: 0.85rem;
}

.jeton__keuze {
	display: inline-flex;
	gap: 0.4rem;
}

.jetonknop {
	min-width: 5.6rem;
	min-height: 2.4rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--kaarshoek);
	color: var(--zacht);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.jetonknop:hover {
	border-color: var(--kaarsvlam);
	color: var(--linnen);
}

.jetonknop[aria-pressed='true'] {
	background: var(--kaarsvlam);
	border-color: var(--kaarsvlam);
	color: var(--nachtwol);
	font-weight: 600;
}

.jetonknop--vrees[aria-pressed='true'] {
	background: var(--wolrood);
	border-color: var(--wolrood);
}

/* =========================================================================
   Werktuig 2: de ritueelkring
   ========================================================================= */

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

.ringkring__beeld {
	position: relative;
	isolation: isolate;
	padding: 1.2rem;
	border: 1px solid var(--rand);
	border-radius: 3px;
	background-image: url('images/ringgrond.jpg');
	background-size: cover;
	background-position: center;
}

.ringkring__beeld::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(15, 9, 19, 0.72);
}

.ringkring__tekening {
	width: 100%;
	height: auto;
	display: block;
}

.ringkring__ring {
	transform-box: view-box;
	transform-origin: 180px 180px;
	transition: transform 0.4s ease;
}

.ringkring__spaak {
	fill: none;
	stroke: rgba(154, 127, 74, 0.55);
	stroke-width: 2;
}

.ringkring__merk {
	fill: var(--kaarshoek);
	stroke: var(--gedoofd);
	stroke-width: 2;
}

.ringkring__merk--aan {
	fill: var(--kaarsvlam);
	stroke: var(--kaarsvlam);
}

.ringkring__inkeping {
	fill: var(--wolgroen);
}

.ringkring__stel {
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
}

.ringstel {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.45rem 1rem;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--rand);
}

.ringstel:first-child {
	border-top: 1px solid var(--rand);
}

.ringstel__naam {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.ringstel__stand {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
}

.ringstel__kort {
	display: block;
	font-size: 0.85rem;
	color: var(--zacht);
}

.ringstel__knoppen {
	display: inline-flex;
	gap: 0.4rem;
}

.draaiknop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--kaarshoek);
	color: var(--kaarsvlam);
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.draaiknop:hover {
	border-color: var(--kaarsvlam);
	color: var(--linnen);
}

.ringkring__uitkomst {
	padding: 1.3rem;
	background: var(--nachtwol);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.ringkring__uitkomst h3 {
	margin-bottom: 0.5rem;
	color: var(--kaarsvlam);
}

.ringkring__uitkomst p {
	color: var(--zacht);
	font-size: 0.96rem;
}

.ringkring__lijst {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rand);
}

.ringkring__lijst div {
	padding: 0.75rem 0 0;
}

.ringkring__lijst dt {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.ringkring__lijst dd {
	margin: 0.25rem 0 0;
	font-size: 0.94rem;
	color: var(--linnen);
}

/* =========================================================================
   Werktuig 3: het volgelingenveld
   ========================================================================= */

.veldkaart {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
}

.veldkaart__vlak {
	position: relative;
	isolation: isolate;
	padding: 1.15rem;
	border: 1px solid var(--rand);
	border-radius: 3px;
	background-image: url('images/veldgrond.jpg');
	background-size: cover;
	background-position: center;
}

.veldkaart__vlak::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(15, 9, 19, 0.76);
}

.veldkaart__rooster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
}

.veldpunt {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 2.5rem;
	padding: 0;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: rgba(36, 26, 44, 0.72);
	cursor: pointer;
}

.veldpunt i {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gedoofd);
}

.veldpunt:hover {
	border-color: var(--kaarsvlam);
}

.veldpunt[aria-pressed='true'] {
	background: var(--kaarsvlam);
	border-color: var(--kaarsvlam);
}

.veldpunt[aria-pressed='true'] i {
	width: 13px;
	height: 13px;
	background: var(--nachtwol);
}

.veldkaart__assen {
	display: flex;
	justify-content: space-between;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.veldkaart__zijas {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zacht);
}

.veldkaart__uitkomst {
	padding: 1.3rem;
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.veldkaart__uitkomst h3 {
	margin-bottom: 0.6rem;
	color: var(--kaarsvlam);
}

.veldkaart__uitkomst dl {
	margin: 0;
}

.veldkaart__uitkomst dt {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
	margin-top: 0.9rem;
}

.veldkaart__uitkomst dd {
	margin: 0.25rem 0 0;
	color: var(--zacht);
	font-size: 0.96rem;
}

/* =========================================================================
   Werktuig 4: het kruistochtpad
   ========================================================================= */

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

.tochtrooster__vlak {
	padding: 1.15rem;
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.tochtrooster__rooster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.tochtvak {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	aspect-ratio: 1;
	min-height: 3.4rem;
	padding: 0.3rem;
	border: 1px dashed var(--rand);
	border-radius: 2px;
	background: var(--dieper);
	color: var(--zacht);
	font: inherit;
	font-size: 0.72rem;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.tochtvak--bezet {
	border-style: solid;
	border-color: var(--gedoofd);
	background: var(--nachtwol);
	color: var(--linnen);
}

.tochtvak--poort {
	box-shadow: inset 0 0 0 2px rgba(134, 192, 138, 0.55);
}

.tochtvak--diepte {
	box-shadow: inset 0 0 0 2px rgba(224, 122, 104, 0.55);
}

.tochtvak:hover {
	border-color: var(--kaarsvlam);
}

.tochtvak b {
	display: block;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.tochtrooster__wijzers {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.tochtrooster__wijzers b {
	color: var(--kaarsvlam);
	font-size: 1.1rem;
}

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

.tochttegel {
	min-height: 2.5rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--kaarshoek);
	color: var(--linnen);
	font: inherit;
	font-size: 0.87rem;
	cursor: pointer;
}

.tochttegel span {
	color: var(--gedoofd);
	margin-left: 0.4rem;
	font-size: 0.8rem;
}

.tochttegel:hover {
	border-color: var(--kaarsvlam);
}

.tochttegel[aria-pressed='true'] {
	background: var(--kaarsvlam);
	border-color: var(--kaarsvlam);
	color: var(--nachtwol);
	font-weight: 600;
}

.tochttegel[aria-pressed='true'] span {
	color: var(--nachtwol);
}

.tochttegel--gelegd {
	opacity: 0.42;
}

.tochtrooster__uitkomst {
	padding: 1.3rem;
	background: var(--nachtwol);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.tochtrooster__uitkomst h3 {
	margin-bottom: 0.6rem;
	color: var(--kaarsvlam);
}

.tochtrooster__uitkomst p {
	color: var(--zacht);
	font-size: 0.96rem;
}

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

/* =========================================================================
   Formulieren
   ========================================================================= */

.offerblad {
	padding: clamp(1.4rem, 3vw, 2.1rem);
	background: var(--kaarshoek);
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.offerblad__veld {
	margin-bottom: 1.2rem;
}

.offerblad label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.86rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.offerblad input,
.offerblad select,
.offerblad textarea {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--rand);
	border-radius: 2px;
	background: var(--nachtwol);
	color: var(--linnen);
	font: inherit;
	font-size: 1rem;
}

.offerblad textarea {
	min-height: 9rem;
	resize: vertical;
}

.offerblad input:focus,
.offerblad select:focus,
.offerblad textarea:focus {
	border-color: var(--kaarsvlam);
	outline: 2px solid var(--wolgroen);
	outline-offset: 1px;
}

.offerblad__hint {
	margin: 0.4rem 0 0;
	font-size: 0.84rem;
	color: var(--zacht);
}

.offerblad__paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

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

.omroep {
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	border-left: 4px solid var(--wolgroen);
	background: rgba(134, 192, 138, 0.1);
}

.omroep p {
	margin: 0;
	color: var(--linnen);
}

.omroep--fout {
	border-left-color: var(--wolrood);
	background: rgba(224, 122, 104, 0.1);
}

/* =========================================================================
   Gegevenslijst
   ========================================================================= */

.gegevens {
	margin: 0;
}

.gegevens div {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rand);
}

.gegevens div:first-child {
	border-top: 1px solid var(--rand);
}

.gegevens dt {
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.gegevens dd {
	margin: 0.3rem 0 0;
	color: var(--linnen);
}

.gegevens dd a {
	display: inline-flex;
	align-items: center;
	min-height: 2.4rem;
}

/* Een verwijzing midden in een alinea is maar zo hoog als de regel en dus met
   een vinger nauwelijks te raken. Vulling op een inline-element rekt het
   raakvlak op zonder de regelafstand te veranderen. */
.tempel p a:not(.staf),
.tempel li a:not(.staf),
.tempel dd a:not(.staf) {
	padding-block: 0.42rem;
}

/* =========================================================================
   Slotband
   ========================================================================= */

.slotband {
	position: relative;
	isolation: isolate;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background-image: url('images/slotpad.jpg');
	background-size: cover;
	background-position: center right;
}

.slotband::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(15, 9, 19, 0.96) 0%, rgba(19, 12, 24, 0.92) 52%, rgba(26, 18, 32, 0.7) 100%);
}

.slotband__binnen {
	max-width: 36rem;
}

.slotband p {
	color: var(--linnen);
}

/* =========================================================================
   Voet van de site: de kelder
   ========================================================================= */

.kelder {
	background: var(--dieper);
	border-top: 1px solid var(--rand);
	padding: clamp(2.8rem, 5vw, 4rem) 0 2rem;
}

.kelder__raster {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.4rem;
}

.kelder__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.6rem;
	margin-bottom: 0.9rem;
	color: var(--linnen);
	text-decoration: none;
}

.kelder__over {
	margin: 0;
	font-size: 0.94rem;
	color: var(--zacht);
	max-width: 26rem;
}

.kelder h2 {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wolgroen);
	font-family: 'Literata', Georgia, serif;
	margin-bottom: 0.9rem;
}

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

.kelder ul a {
	display: inline-flex;
	align-items: center;
	min-height: 2.35rem;
	font-size: 0.94rem;
	color: var(--linnen);
	text-decoration: none;
}

.kelder ul a:hover,
.kelder ul a:focus-visible {
	color: var(--kaarsvlam);
}

.kelder__gegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	margin: 0 0 1.6rem;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--rand);
	list-style: none;
	font-size: 0.9rem;
	color: var(--zacht);
}

.kelder__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 2.35rem;
	color: var(--kaarsvlam);
	text-decoration: none;
}

.geenverbond {
	margin: 0 0 1.6rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--rand);
	border-left: 4px solid var(--wolrood);
	border-radius: 3px;
	background: var(--kaarshoek);
	font-size: 0.9rem;
	color: var(--linnen);
}

.geenverbond b {
	color: var(--wolrood);
}

.kelder__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rand);
	font-size: 0.86rem;
	color: var(--zacht);
}

.kelder__slot p {
	margin: 0;
}

/* =========================================================================
   Kaarsstrook onderaan het scherm
   ========================================================================= */

.kaarsstrook {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--kaarshoek);
	border-top: 2px solid var(--kaarsvlam);
}

.kaarsstrook__binnen {
	width: min(100% - 2.5rem, var(--breed));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 1.6rem;
	padding: 1rem 0;
}

.kaarsstrook p {
	margin: 0;
	max-width: 46rem;
	font-size: 0.9rem;
	color: var(--linnen);
}

.kaarsstrook__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* =========================================================================
   Losse bladzijde, journaal en 404
   ========================================================================= */

.stukinhoud p {
	color: var(--linnen);
}

.stukdeel {
	position: relative;
	margin-bottom: 2.4rem;
	padding-left: 4.2rem;
}

.stukdeel__nummer {
	position: absolute;
	left: 0;
	top: -0.15rem;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--gedoofd);
}

.stukkop {
	margin-bottom: 1.6rem;
}

.stukkop__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wolgroen);
}

.stukbeeld {
	margin: 0 0 2rem;
}

.stukbeeld img {
	width: 100%;
	border: 1px solid var(--rand);
	border-radius: 3px;
}

.verdwaald {
	padding: clamp(3rem, 8vw, 6rem) 0;
	text-align: center;
}

.verdwaald__getal {
	display: block;
	margin: 0 0 0.6rem;
	font-family: 'Uncial Antiqua', 'Palatino Linotype', Palatino, serif;
	font-size: clamp(4.5rem, 15vw, 9rem);
	line-height: 1;
	color: var(--gedoofd);
}

.verdwaald p:not(.verdwaald__getal) {
	max-width: 34rem;
	margin-inline: auto;
	color: var(--zacht);
}

.verdwaald .stafrij {
	justify-content: center;
}

/* =========================================================================
   Opdoemen bij het scrollen
   ========================================================================= */

.js .ontwaakt {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .ontwaakt--op {
	opacity: 1;
	transform: none;
}

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

	.js .ontwaakt {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.weegschaal__arm,
	.ringkring__ring {
		transition: none;
	}
}

/* =========================================================================
   Smallere schermen
   ========================================================================= */

@media (max-width: 68rem) {
	.raster--vier {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kelder__raster {
		grid-template-columns: 1fr 1fr;
	}

	.drieluik--breed {
		grid-template-columns: 5.5rem 1fr;
	}

	.drieluik__rechterstulp {
		display: none;
	}
}

@media (max-width: 60rem) {
	.klokstoel__binnen {
		flex-wrap: wrap;
		padding: 0.7rem 0;
	}

	.beltouw {
		display: inline-flex;
	}

	.klokstoel__navigatie {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
	}

	.processie {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.4rem 0 0.6rem;
		border-top: 1px solid var(--rand);
	}

	.processie a {
		min-height: 2.9rem;
		border-bottom: 1px solid var(--rand);
		width: 100%;
	}

	.klokstoel .staf--vlam {
		margin-left: auto;
	}

	.weegschaal,
	.ringkring,
	.veldkaart,
	.tochtrooster,
	.tweeluik {
		grid-template-columns: 1fr;
	}

	.tweeluik--omgekeerd .tweeluik__beeld {
		order: 0;
	}

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

	.wimpel--laag,
	.wimpel--lager {
		margin-top: 0;
	}
}

@media (max-width: 41.25rem) {
	:root {
		--dak: 4.2rem;
	}

	body {
		font-size: 1rem;
	}

	.kudde,
	.kudde--smal,
	.klokstoel__binnen,
	.kaarsstrook__binnen {
		width: min(100% - 1.6rem, var(--breed));
	}

	/* Op 390px moeten merk, menutoets en knop samen op een rij passen. Valt de
	   kop in twee rijen uiteen, dan eet de vaste kopbalk een kwart van het
	   scherm op. Alles hieronder is daarvoor gemeten en niet geschat. */
	.klokstoel__binnen {
		gap: 0.5rem;
	}

	.klokstoel__merk {
		gap: 0.45rem;
	}

	.klokstoel__merk svg {
		width: 28px;
		height: 28px;
	}

	.klokstoel__naam {
		font-size: 1.02rem;
	}

	.klokstoel__onder {
		display: none;
	}

	.klokstoel .staf--vlam {
		padding: 0.45rem 0.65rem;
		font-size: 0.8rem;
	}

	.beltouw {
		gap: 0.4rem;
		padding: 0.45rem 0.6rem;
		font-size: 0.8rem;
	}

	.beltouw__strengen i {
		width: 16px;
	}

	.raster--vier,
	.raster--drie,
	.raster--twee,
	.wimpelrij,
	.luikrij {
		grid-template-columns: 1fr;
	}

	.luikrij__breed {
		grid-column: span 1;
	}

	.offerblad__paar {
		grid-template-columns: 1fr;
	}

	.leerstaat thead th,
	.leerstaat tbody th {
		white-space: normal;
	}

	.leerstaat th,
	.leerstaat td {
		padding: 0.65rem 0.7rem;
	}

	.tijdband li {
		padding-left: 3.4rem;
	}

	.stukdeel {
		padding-left: 0;
		padding-top: 3rem;
	}

	.stukdeel__nummer {
		top: 0;
	}

	.kelder__raster {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.kaarsstrook__binnen {
		padding: 0.85rem 0;
	}

	.kaarsstrook p {
		font-size: 0.86rem;
	}
}