/*
Theme Name: Gowragnar
Theme URI: https://gowragnar.org/
Author: Kring Gowragnar
Author URI: https://gowragnar.org/
Description: Nederlandstalige kring rond de noordse mythologie in God of War Ragnarok: de negen rijken, de verhaallijnen en de symboliek, met bijeenkomsten en een gezamenlijke kroniek. Onofficiele fansite, niet verbonden aan de uitgever of de ontwikkelaar van het spel.
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: gowragnar
Tags: gaming, community, dark, one-column, custom-menu
*/

/* ==========================================================================
   1. Lettertypen — uit de map fonts/ van het thema, niet van een cdn
   ========================================================================== */

@font-face {
	font-family: 'Metamorphous';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/metamorphous-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: 'Metamorphous';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/metamorphous-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Alegreya';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/alegreya-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: 'Alegreya';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/alegreya-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Alegreya';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/alegreya-700-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: 'Alegreya';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/alegreya-700-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Kleuren en maten
   ========================================================================== */

:root {
	--fjord: #0f1a1e;
	--fjord-diep: #0a1215;
	--paneel: #17252a;
	--paneel-hoog: #1e3037;
	--rand: #24383f;
	--rand-scherp: #35505a;
	--noorderlicht: #56c8b0;
	--noord-diep: #2f9280;
	--koper: #c98a55;
	--koper-diep: #9a6538;
	/* Lichter dan het bloedrood uit de eerste opzet: dat haalde op deze
	   achtergrond geen 4.5:1 en was dus niet te gebruiken voor tekst. */
	--bloed: #e2695e;
	--bloed-diep: #a33c33;
	--been: #e8e2d4;
	--been-stil: #9ea69f;

	--gesteente: 'Metamorphous', Georgia, 'Times New Roman', serif;
	--verhaal: 'Alegreya', Georgia, 'Times New Roman', serif;

	--wijd: 1240px;
	--nauw: 780px;
	--dakhoogte: 78px;
	--adem: clamp(3.5rem, 7vw, 6.5rem);
}

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

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

html {
	/* Anders verdwijnt het doel van een ankerlink onder het vaste dak. */
	scroll-padding-top: calc(var(--dakhoogte) + 18px);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--fjord);
	color: var(--been);
	font-family: var(--verhaal);
	font-size: 1.12rem;
	line-height: 1.76;
	overflow-x: hidden;
}

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

/* Een klasse die display zet, verslaat de regel van de browser voor hidden. */
[hidden] {
	display: none !important;
}

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

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

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

h1,
h2,
h3,
h4 {
	font-family: var(--gesteente);
	font-weight: 400;
	line-height: 1.18;
	margin: 0 0 0.62em;
}

h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.5rem);
}

h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.45rem);
}

h3 {
	font-size: clamp(1.22rem, 1.9vw, 1.55rem);
}

h4 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1.12em;
}

ul,
ol {
	margin: 0 0 1.12em;
	padding-left: 1.3em;
}

li {
	margin-bottom: 0.48em;
}

strong,
b {
	font-weight: 700;
	color: #fff;
}

hr {
	border: 0;
	border-top: 1px solid var(--rand);
	margin: 2.5rem 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

figure {
	margin: 0;
}

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

.overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--koper);
	color: var(--fjord-diep);
	padding: 0.85rem 1.4rem;
	font-family: var(--gesteente);
	text-decoration: none;
}

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

/* ==========================================================================
   4. Raamwerk: hof (breedte) en zaal (sectie)
   ========================================================================== */

.hof {
	width: 100%;
	max-width: var(--wijd);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.hof--nauw {
	max-width: var(--nauw);
}

.zaal {
	padding: var(--adem) 0;
	position: relative;
}

.zaal--diep {
	background: var(--fjord-diep);
}

.zaal--paneel {
	background: var(--paneel);
}

.zaal--kort {
	padding: calc(var(--adem) * 0.58) 0;
}

.zaal__kop {
	max-width: 62ch;
	margin-bottom: 2.6rem;
}

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

.zaal__kop p {
	color: var(--been-stil);
	font-size: 1.14rem;
	margin-bottom: 0;
}

/* Bovenkopje; per sectie boven of onder de titel. */
.opschrift {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--verhaal);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--koper);
	margin-bottom: 0.9rem;
}

.opschrift::before {
	content: '';
	width: 22px;
	height: 2px;
	background: var(--koper);
	flex: none;
}

.opschrift--onder {
	margin-bottom: 0;
	margin-top: 0.85rem;
	color: var(--noorderlicht);
}

.opschrift--onder::before {
	background: var(--noorderlicht);
}

.inleiding {
	font-size: 1.24rem;
	line-height: 1.7;
	color: var(--been);
}

.zegel {
	display: inline-block;
	font-family: var(--verhaal);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.22rem 0.68rem;
	border: 1px solid var(--rand-scherp);
	color: var(--been-stil);
	background: rgba(0, 0, 0, 0.22);
}

.zegel--noord {
	border-color: var(--noord-diep);
	color: var(--noorderlicht);
}

.zegel--koper {
	border-color: var(--koper-diep);
	color: var(--koper);
}

.zegel--bloed {
	border-color: var(--bloed-diep);
	color: var(--bloed);
}

/* ==========================================================================
   5. Runenband — de scheiding: gehouwen steen met een groef in het midden
   ========================================================================== */

.runenband {
	height: 26px;
	position: relative;
	background: var(--fjord-diep);
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
	overflow: hidden;
}

/* De groef over de volle breedte. */
.runenband::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--koper-diep);
	opacity: 0.85;
}

/* De kerven: schuine streepjes op vaste afstand. */
.runenband::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		68deg,
		transparent 0 26px,
		var(--koper) 26px 28px,
		transparent 28px 54px
	);
	opacity: 0.5;
}

.runenband--noord::before {
	background: var(--noord-diep);
}

.runenband--noord::after {
	background-image: repeating-linear-gradient(
		112deg,
		transparent 0 26px,
		var(--noorderlicht) 26px 28px,
		transparent 28px 54px
	);
}

/* ==========================================================================
   6. Hamer — knoppen
   ========================================================================== */

.hamer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--verhaal);
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.78rem 1.6rem;
	min-height: 48px;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.16s;
	line-height: 1.22;
	text-align: center;
}

.hamer--slag {
	background: var(--noorderlicht);
	color: var(--fjord-diep);
	border-color: var(--noorderlicht);
}

.hamer--slag:hover,
.hamer--slag:focus-visible {
	background: var(--noord-diep);
	border-color: var(--noord-diep);
	color: var(--fjord-diep);
	transform: translateY(-2px);
}

.hamer--rust {
	border-color: var(--rand-scherp);
	color: var(--been);
}

.hamer--rust:hover,
.hamer--rust:focus-visible {
	border-color: var(--koper);
	color: var(--koper);
	background: rgba(201, 138, 85, 0.1);
}

/* Alleen de maat; de kleur komt van --slag of --rust ernaast. */
.hamer--kort {
	font-size: 0.95rem;
	padding: 0.52rem 1rem;
	min-height: 40px;
}

.hamer[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
	transform: none;
}

.hamerrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

.wijzer {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--koper);
	text-decoration: none;
	min-height: 40px;
	padding: 0.5rem 0;
}

.wijzer::after {
	content: '\2192';
	transition: transform 0.16s;
}

.wijzer:hover,
.wijzer:focus-visible {
	color: var(--been);
}

.wijzer:hover::after,
.wijzer:focus-visible::after {
	transform: translateX(5px);
}

/* ==========================================================================
   7. Langhuis — de kop van de site
   ========================================================================== */

.langhuis {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(10, 18, 21, 0.96);
	border-bottom: 1px solid var(--rand);
	backdrop-filter: blur(8px);
}

.langhuis__binnen {
	max-width: var(--wijd);
	margin: 0 auto;
	padding: 0 1.5rem;
	min-height: var(--dakhoogte);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.langhuis__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.72rem;
	text-decoration: none;
	flex: none;
	min-height: 44px;
}

.langhuis__merk svg {
	flex: none;
	display: block;
}

.langhuis__naam {
	font-family: var(--gesteente);
	font-size: 1.44rem;
	color: var(--been);
	line-height: 1.05;
}

.langhuis__naam span {
	color: var(--koper);
}

.langhuis__onder {
	display: block;
	font-family: var(--verhaal);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--been-stil);
	text-transform: uppercase;
	margin-top: 0.26rem;
}

.padlijst {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.padlijst a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.42rem 0.58rem;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--been);
	text-decoration: none;
}

.padlijst a:hover,
.padlijst a:focus-visible {
	color: var(--koper);
	background: rgba(201, 138, 85, 0.1);
}

.padlijst .current-menu-item > a,
.padlijst .current_page_item > a {
	color: var(--koper);
	background: rgba(201, 138, 85, 0.14);
}

.padlijst ul {
	display: none;
}

.poortknop {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--rand-scherp);
	color: var(--been);
	font-family: var(--verhaal);
	font-size: 0.98rem;
	font-weight: 700;
	padding: 0.5rem 0.85rem;
	min-height: 44px;
	cursor: pointer;
}

.poortknop__balken {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 18px;
}

.poortknop__balken i {
	display: block;
	height: 2px;
	background: var(--noorderlicht);
}

.poortknop[aria-expanded='true'] {
	border-color: var(--koper);
	color: var(--koper);
}

/* ==========================================================================
   8. Noordkust — het eerste scherm
   ========================================================================== */

.noordkust {
	position: relative;
	padding: clamp(4rem, 9vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem);
	background-color: var(--fjord-diep);
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.4) 0%, rgba(10, 18, 21, 0.8) 55%, var(--fjord) 100%),
		url('images/kop-fjord.jpg');
	background-size: cover;
	background-position: center 42%;
	overflow: hidden;
}

.noordkust__binnen {
	max-width: 46ch;
}

.noordkust h1 {
	margin-bottom: 0.5em;
	text-shadow: 0 4px 26px rgba(0, 0, 0, 0.66);
}

.noordkust h1 em {
	font-style: normal;
	color: var(--noorderlicht);
}

.noordkust__tekst {
	font-size: 1.24rem;
	margin-bottom: 2rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   9. Werkplaats — de omhulling van elk hulpmiddel
   ========================================================================== */

.werkplaats {
	border: 1px solid var(--rand-scherp);
	background: var(--paneel);
}

.werkplaats__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 1.15rem 1.5rem;
	background: var(--fjord-diep);
	border-bottom: 1px solid var(--rand-scherp);
}

.werkplaats__kop h3 {
	margin: 0;
}

.werkplaats__wenk {
	font-size: 0.95rem;
	color: var(--been-stil);
	margin: 0;
}

.werkplaats__lijf {
	padding: 1.6rem 1.5rem;
}

/* --- Rafelrand: twee beelden onder een schuivende naad ---------------- */

.rafelrand__venster {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--rand-scherp);
	touch-action: pan-y;
	user-select: none;
}

.rafelrand__venster img {
	width: 100%;
	display: block;
	/* Zodat de browser bij het slepen het beeld niet oppakt. */
	-webkit-user-drag: none;
	user-select: none;
}

.rafelrand__na {
	position: absolute;
	inset: 0;
}

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

/* De naad zelf: een koperen lijn met een greep in het midden. */
.rafelrand__naad {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	margin-left: -1.5px;
	background: var(--koper);
	pointer-events: none;
}

.rafelrand__greep {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--fjord-diep);
	border: 3px solid var(--koper);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--koper);
	font-size: 1.1rem;
	line-height: 1;
}

.rafelrand__merken {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	padding: 0.7rem;
	pointer-events: none;
}

.rafelrand__merk {
	font-family: var(--verhaal);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(10, 18, 21, 0.82);
	color: var(--been);
	padding: 0.28rem 0.6rem;
}

/* De schuifregelaar staat eronder en is de eigenlijke bediening: die werkt
   ook met het toetsenbord, en slepen over het beeld stelt hem gewoon bij. */
.rafelrand__regel {
	margin-top: 1.2rem;
}

.rafelrand__regel input[type='range'] {
	width: 100%;
	min-height: 40px;
	accent-color: var(--noorderlicht);
	cursor: pointer;
}

.rafelrand__uitleg {
	margin: 1rem 0 0;
	font-size: 1rem;
	border-left: 3px solid var(--noorderlicht);
	padding-left: 0.9rem;
}

/* --- Winterklok: schuiven door drie jaar winter ----------------------- */

.winterklok {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.8rem;
}

.winterklok__regel input[type='range'] {
	width: 100%;
	min-height: 40px;
	accent-color: var(--koper);
	cursor: pointer;
}

.klokkop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.klokkop span {
	font-size: 0.95rem;
	color: var(--been-stil);
}

.klokkop b {
	font-family: var(--gesteente);
	font-size: 1.32rem;
	color: var(--koper);
}

.winterklok__weer {
	font-size: 1.06rem;
	margin: 1.3rem 0 0;
}

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

.staatlijst li {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 0.9rem;
	padding: 0.62rem 0;
	border-bottom: 1px dashed var(--rand);
	margin: 0;
	font-size: 1rem;
}

.staatlijst li:first-child {
	border-top: 1px dashed var(--rand);
}

.staatlijst span {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--been-stil);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-top: 0.2rem;
}

.rijkjes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1.2rem;
}

.rijkje {
	font-family: var(--verhaal);
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--rand-scherp);
	color: var(--been-stil);
}

.rijkje--open {
	border-color: var(--noord-diep);
	color: var(--noorderlicht);
}

.rijkje--dicht {
	opacity: 0.42;
	text-decoration: line-through;
}

/* --- Wapensmid: drie keuzes, een naam ---------------------------------- */

.wapensmid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 1.8rem;
}

.smidkeuze {
	margin-bottom: 1.4rem;
}

.smidkeuze > span {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--been-stil);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.55rem;
}

.smidkeuze__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.smidknop {
	background: var(--fjord-diep);
	border: 1px solid var(--rand);
	color: var(--been);
	font-family: var(--verhaal);
	font-size: 0.96rem;
	font-weight: 700;
	padding: 0.5rem 0.85rem;
	min-height: 40px;
	cursor: pointer;
}

.smidknop:hover,
.smidknop:focus-visible {
	border-color: var(--noorderlicht);
}

.smidknop[aria-pressed='true'] {
	border-color: var(--koper);
	color: var(--koper);
	background: rgba(201, 138, 85, 0.13);
}

.wapensmid__uitkomst {
	border: 1px solid var(--rand-scherp);
	background: var(--fjord-diep);
	padding: 1.4rem;
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.86), rgba(10, 18, 21, 0.96)),
		url('images/smidse.jpg');
	background-size: cover;
	background-position: center;
}

.wapensmid__naam {
	font-family: var(--gesteente);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	color: var(--noorderlicht);
	margin: 0 0 0.3rem;
	line-height: 1.18;
}

.wapensmid__soort {
	font-size: 1rem;
	color: var(--been-stil);
	margin: 0 0 1.1rem;
}

.wapensmid__lore {
	font-size: 1.02rem;
	margin: 0 0 1.2rem;
	border-top: 1px dashed var(--rand);
	padding-top: 1rem;
}

.wapensmid__rang {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0;
	flex-wrap: wrap;
}

.wapensmid__rang b {
	font-family: var(--gesteente);
	font-size: 1.2rem;
	color: var(--koper);
	font-weight: 400;
}

/* --- Toetredingspad: zes treden met een vinkje ------------------------- */

.toetredingspad {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 1.8rem;
	align-items: start;
}

.tredelijst {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: tredeteller;
}

.tredelijst li {
	margin: 0 0 0.5rem;
}

.trede {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	width: 100%;
	text-align: left;
	background: var(--fjord-diep);
	border: 1px solid var(--rand);
	color: var(--been);
	font-family: var(--verhaal);
	font-size: 1rem;
	padding: 0.8rem 1rem;
	min-height: 48px;
	cursor: pointer;
}

.trede:hover,
.trede:focus-visible {
	border-color: var(--noorderlicht);
}

.trede__vak {
	flex: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--rand-scherp);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15rem;
	color: var(--fjord-diep);
	font-size: 0.9rem;
	line-height: 1;
}

.trede[aria-pressed='true'] {
	border-color: var(--noord-diep);
}

.trede[aria-pressed='true'] .trede__vak {
	background: var(--noorderlicht);
	border-color: var(--noorderlicht);
}

.trede[aria-pressed='true'] .trede__titel {
	color: var(--been-stil);
	text-decoration: line-through;
}

.trede__titel {
	display: block;
	font-weight: 700;
}

.trede__uitleg {
	display: block;
	font-size: 0.93rem;
	color: var(--been-stil);
	margin-top: 0.15rem;
}

.toetredingspad__stand {
	border: 1px solid var(--rand-scherp);
	background: var(--fjord-diep);
	padding: 1.3rem;
}

.toetredingspad__teller {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--gesteente);
	font-size: 2.5rem;
	color: var(--noorderlicht);
	line-height: 1;
	margin-bottom: 0.9rem;
}

.toetredingspad__teller span {
	font-family: var(--verhaal);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--been-stil);
}

.toetredingspad__goot {
	display: block;
	height: 10px;
	background: var(--rand);
	margin-bottom: 1rem;
}

.toetredingspad__vul {
	display: block;
	height: 100%;
	background: var(--noorderlicht);
	transition: width 0.3s;
}

.toetredingspad__oordeel {
	font-size: 1rem;
	margin: 0 0 1.2rem;
}

/* ==========================================================================
   10. De negen rijken
   ========================================================================== */

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

.rijkkaart {
	border: 1px solid var(--rand);
	background: var(--paneel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.rijkkaart__beeld {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
}

.rijkkaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.rijkkaart:hover .rijkkaart__beeld img {
	transform: scale(1.04);
}

/* Vier van de negen rijken hebben geen foto: die krijgen een gehouwen vlak
   met het teken van het rijk, zodat het raster van drie bij drie heel blijft. */
.rijkkaart__beeld--leeg {
	background-color: var(--fjord-diep);
	background-image: repeating-linear-gradient(
			118deg,
			rgba(201, 138, 85, 0.16) 0 2px,
			transparent 2px 22px
		),
		linear-gradient(160deg, var(--paneel-hoog), var(--fjord-diep));
	display: flex;
	align-items: center;
	justify-content: center;
}

.rijkkaart__teken {
	font-family: var(--gesteente);
	font-size: 3.2rem;
	color: var(--koper);
	line-height: 1;
}

.rijkkaart__lijf {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.rijkkaart__lijf h3 {
	font-size: 1.28rem;
	margin-bottom: 0.4rem;
}

.rijkkaart__lijf p {
	color: var(--been-stil);
	font-size: 1rem;
}

.rijkkaart__lijf .zegel {
	align-self: flex-start;
	margin-bottom: 0.8rem;
}

/* ==========================================================================
   11. Kroniek — de doorlopende lijst met bijdragen
   ========================================================================== */

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

.kroniekregel {
	display: grid;
	grid-template-columns: 106px minmax(0, 1fr);
	gap: 1.8rem;
	padding: 2rem 0;
	border-bottom: 1px solid var(--rand);
}

.kroniekregel__nummer {
	font-family: var(--gesteente);
	font-size: 2.3rem;
	color: var(--koper);
	line-height: 1;
	text-align: right;
}

.kroniekregel__nummer span {
	display: block;
	font-family: var(--verhaal);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--been-stil);
	margin-bottom: 0.3rem;
}

.kroniekregel__citaat {
	font-family: var(--gesteente);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.34;
	color: var(--been);
	margin: 0 0 0.9rem;
}

.kroniekregel__tekst {
	color: var(--been-stil);
	margin-bottom: 0.9rem;
}

.kroniekregel__voet {
	margin: 0;
	font-size: 0.95rem;
	color: var(--been-stil);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.kroniekregel__voet b {
	color: var(--been);
}

/* Zeef boven de kroniek. */
.zeefbalk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.2rem;
	align-items: center;
}

.zeefbalk__woord {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--been-stil);
	margin-right: 0.4rem;
}

/* ==========================================================================
   12. Sagaraster — de blogindeling als tijdschrift
   ========================================================================== */

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

.saga {
	border: 1px solid var(--rand);
	background: var(--paneel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Het eerste stuk is breed en heeft een beeld; de rest is smal en zonder. */
.saga--groot {
	grid-column: span 2;
	grid-row: span 2;
}

.saga__beeld {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.saga__lijf {
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.saga h3 {
	font-size: 1.28rem;
	margin-bottom: 0.5rem;
}

.saga--groot h3 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.saga h3 a {
	color: var(--been);
	text-decoration: none;
	display: inline-block;
	min-height: 38px;
}

.saga h3 a:hover,
.saga h3 a:focus-visible {
	color: var(--koper);
}

.saga p {
	color: var(--been-stil);
	font-size: 1rem;
}

.saga__voet {
	margin: auto 0 0;
	font-size: 0.9rem;
	color: var(--been-stil);
	padding-top: 0.9rem;
}

/* ==========================================================================
   13. Telband, bijeenkomsten, leden
   ========================================================================== */

.telband {
	background: var(--fjord-diep);
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
	padding: 2.6rem 0;
}

.telband__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.telband__getal {
	font-family: var(--gesteente);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--noorderlicht);
	line-height: 1;
	margin: 0 0 0.4rem;
}

.telband__woord {
	margin: 0;
	font-size: 0.98rem;
	color: var(--been-stil);
}

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

.bijeenkomst {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) auto;
	gap: 1.4rem;
	align-items: center;
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

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

.bijeenkomst__wanneer {
	font-family: var(--gesteente);
	font-size: 1.08rem;
	color: var(--koper);
}

.bijeenkomst__wat h3 {
	font-size: 1.16rem;
	margin: 0 0 0.25rem;
}

.bijeenkomst__wat p {
	margin: 0;
	font-size: 0.98rem;
	color: var(--been-stil);
}

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

.lidkaart {
	border: 1px solid var(--rand);
	background: var(--paneel);
	overflow: hidden;
}

.lidkaart__beeld {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.lidkaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82);
}

.lidkaart__lijf {
	padding: 1.2rem;
}

.lidkaart__lijf h3 {
	font-size: 1.2rem;
	margin-bottom: 0.2rem;
}

.lidkaart__rol {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--koper);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.7rem;
}

.lidkaart__lijf p:last-child {
	margin-bottom: 0;
	color: var(--been-stil);
	font-size: 1rem;
}

/* ==========================================================================
   14. Steen en raadrij — losse blokken
   ========================================================================== */

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

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

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

.steen {
	border: 1px solid var(--rand);
	background: var(--paneel);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
}

.steen h3 {
	font-size: 1.2rem;
}

.steen p:last-child {
	margin-bottom: 0;
	color: var(--been-stil);
}

/* De huisregels: een genummerde rij met de regel groot en de uitleg klein. */
.raadrij {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: raadteller;
}

.raadkaart {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 1.3rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

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

.raadkaart::before {
	counter-increment: raadteller;
	content: counter(raadteller, upper-roman);
	font-family: var(--gesteente);
	font-size: 1.3rem;
	color: var(--koper);
	text-align: right;
	padding-top: 0.1rem;
}

.raadkaart h3 {
	font-size: 1.18rem;
	margin: 0 0 0.3rem;
}

.raadkaart p {
	margin: 0;
	color: var(--been-stil);
	font-size: 1rem;
}

/* Beeld naast tekst; per sectie wisselt de kant. */
.tweestand {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
}

.tweestand__beeld img {
	width: 100%;
	border: 1px solid var(--rand-scherp);
}

.tweestand--omgekeerd .tweestand__beeld {
	order: 2;
}

.tweestand__tekst h2 {
	margin-bottom: 0.7em;
}

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

/* Volle band met een korte oproep. */
.roepstem {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background-color: var(--fjord-diep);
	background-image: linear-gradient(90deg, rgba(10, 18, 21, 0.94) 0%, rgba(10, 18, 21, 0.3) 100%),
		url('images/raven.jpg');
	background-size: cover;
	background-position: center 40%;
	border-top: 1px solid var(--rand);
	border-bottom: 1px solid var(--rand);
}

.roepstem__binnen {
	max-width: 54ch;
}

.roepstem h2 {
	margin-bottom: 0.5em;
}

.roepstem p {
	font-size: 1.16rem;
	margin-bottom: 1.6rem;
}

/* Vragen en antwoorden. */
.vraagsteen {
	border-top: 1px solid var(--rand);
}

.vraagsteen__paar {
	border-bottom: 1px solid var(--rand);
	padding: 1.5rem 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.6rem;
}

.vraagsteen__paar h3 {
	font-size: 1.18rem;
	margin: 0;
}

.vraagsteen__paar p {
	margin: 0;
	color: var(--been-stil);
}

/* Gegevens op de contactpagina. */
.gegevensstaf {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gegevensstaf li {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

.gegevensstaf span {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--been-stil);
	padding-top: 0.15rem;
}

.gegevensstaf a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

/* ==========================================================================
   15. Zaalkop en juridische tekst
   ========================================================================== */

.zaalkop {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.2rem, 4vw, 3.4rem);
	background-color: var(--fjord-diep);
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.78), rgba(15, 26, 30, 0.95)),
		url('images/steentextuur.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--rand);
}

.zaalkop h1 {
	margin-bottom: 0.35em;
}

.zaalkop p {
	max-width: 62ch;
	color: var(--been-stil);
	font-size: 1.14rem;
	margin-bottom: 0;
}

.zaalkop--deur {
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.74), rgba(15, 26, 30, 0.94)),
		url('images/deur.jpg');
}

.zaalkop--runensteen {
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.74), rgba(15, 26, 30, 0.94)),
		url('images/runensteen.jpg');
}

.zaalkop--tafel {
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.76), rgba(15, 26, 30, 0.95)),
		url('images/langetafel.jpg');
}

.zaalkop--ijs {
	background-image: linear-gradient(180deg, rgba(10, 18, 21, 0.78), rgba(15, 26, 30, 0.95)),
		url('images/rijk-ijsgrot.jpg');
}

.wetsteen h2 {
	margin-top: 2.6rem;
	font-size: 1.62rem;
}

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

.wetsteen h3 {
	margin-top: 1.8rem;
	font-size: 1.2rem;
}

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

.wetsteen th {
	background: var(--paneel);
	font-family: var(--gesteente);
	font-weight: 400;
	font-size: 1.02rem;
	color: var(--been);
}

.wetsteen td {
	color: var(--been-stil);
	font-size: 1rem;
}

/* Een tabel met veel kolommen schuift binnen zijn eigen kader. */
.tabelvlot {
	margin: 1.4rem 0 2rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--rand);
}

.tabelvlot table {
	margin: 0;
	min-width: 540px;
}

/* ==========================================================================
   16. Formulieren
   ========================================================================== */

.hoornbrief,
.kroniekbrief {
	border: 1px solid var(--rand-scherp);
	background: var(--paneel);
	padding: 1.6rem;
}

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

.inschrift {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.inschrift > span,
.inschrift > label {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--been-stil);
}

.inschrift input[type='text'],
.inschrift input[type='email'],
.inschrift select,
.inschrift textarea {
	width: 100%;
	background: var(--fjord-diep);
	border: 1px solid var(--rand-scherp);
	color: var(--been);
	font-family: var(--verhaal);
	font-size: 1.04rem;
	padding: 0.7rem 0.85rem;
	min-height: 46px;
}

.inschrift textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.6;
}

.inschrift input:focus,
.inschrift select:focus,
.inschrift textarea:focus {
	border-color: var(--koper);
	outline: 2px solid rgba(201, 138, 85, 0.3);
	outline-offset: 0;
}

/* Valkuil: onzichtbaar voor mensen, niet op display:none want dan slaat een
   robot het veld over en vangt de val niets. */
.valkuil {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.valkuil input,
.valkuil label {
	width: 1px !important;
	height: 1px !important;
	min-height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
}

.omroeping {
	border: 1px solid var(--rand-scherp);
	border-left: 4px solid var(--noorderlicht);
	background: var(--fjord-diep);
	padding: 1rem 1.2rem;
	margin-bottom: 1.6rem;
	font-size: 1.02rem;
}

.omroeping--fout {
	border-left-color: var(--bloed);
	color: var(--bloed);
}

.omroeping p {
	margin: 0;
}

.fijnschrift {
	font-size: 0.9rem;
	color: var(--been-stil);
	margin: 1rem 0 0;
}

/* ==========================================================================
   17. Haardvuur — de voet van de site
   ========================================================================== */

.haardvuur {
	background: var(--fjord-diep);
	border-top: 1px solid var(--rand);
	padding: clamp(2.8rem, 5vw, 4rem) 0 1.6rem;
}

.haardvuur__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-bottom: 2.4rem;
}

.haardvuur__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	margin-bottom: 1rem;
	min-height: 44px;
}

.haardvuur__merk .langhuis__naam {
	font-size: 1.3rem;
}

.haardvuur__over {
	color: var(--been-stil);
	font-size: 1rem;
	max-width: 40ch;
}

.haardvuur h2 {
	font-size: 1.08rem;
	color: var(--been);
	margin-bottom: 1rem;
}

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

.haardvuur li {
	margin-bottom: 0.15rem;
}

.haardvuur li a,
.haardvuur__gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--been-stil);
	text-decoration: none;
	font-size: 1rem;
}

.haardvuur li a:hover,
.haardvuur li a:focus-visible,
.haardvuur__gegevens a:hover,
.haardvuur__gegevens a:focus-visible {
	color: var(--koper);
}

.haardvuur__gegevens {
	list-style: none;
	padding: 0;
	margin: 0 0 1.6rem;
	font-size: 1rem;
	color: var(--been-stil);
}

.haardvuur__slot {
	border-top: 1px solid var(--rand);
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 0.9rem;
	color: var(--been-stil);
}

.haardvuur__slot p {
	margin: 0;
	max-width: 78ch;
}

/* De verklaring dat dit geen officiele site is — op elke pagina. */
.geenverbond {
	border: 1px dashed var(--rand-scherp);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.4rem;
	font-size: 0.9rem;
	color: var(--been-stil);
	line-height: 1.62;
}

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

/* ==========================================================================
   18. Haardstrook — de mededeling onderaan het scherm
   ========================================================================== */

.haardstrook {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: var(--fjord-diep);
	border-top: 2px solid var(--koper);
	padding: 1rem 0;
	display: none;
}

.haardstrook[data-open='ja'] {
	display: block;
}

.haardstrook__binnen {
	max-width: var(--wijd);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	align-items: center;
	justify-content: space-between;
}

.haardstrook p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--been-stil);
	max-width: 72ch;
}

.haardstrook__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	flex: none;
}

/* ==========================================================================
   19. Verdwenen — 404
   ========================================================================== */

.verdwenen {
	padding: clamp(4rem, 9vw, 7rem) 0;
	text-align: center;
}

.verdwenen__cijfer {
	font-family: var(--gesteente);
	font-size: clamp(5rem, 17vw, 10rem);
	line-height: 0.95;
	color: var(--koper);
	margin: 0 0 0.6rem;
}

/* De algemene alinearegel is sterker dan de klasse van het cijfer, dus deze
   uitzondering staat er met opzet. */
.verdwenen p:not(.verdwenen__cijfer) {
	color: var(--been-stil);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.14rem;
}

.verdwenen__paden {
	list-style: none;
	padding: 0;
	margin: 2.4rem auto 0;
	max-width: 520px;
	text-align: left;
	border-top: 1px solid var(--rand);
}

.verdwenen__paden li {
	border-bottom: 1px solid var(--rand);
	margin: 0;
}

.verdwenen__paden a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: 0.7rem 0.2rem;
	text-decoration: none;
	color: var(--been);
	font-weight: 700;
}

.verdwenen__paden a:hover,
.verdwenen__paden a:focus-visible {
	color: var(--koper);
}

/* ==========================================================================
   20. Opdoemen — blokken die bij het scrollen verschijnen
   ========================================================================== */

/* De klasse js komt van een klein script in de kop. Zonder javascript blijft
   alles dus staan in plaats van onzichtbaar te zijn. */
html.js .opdoemen {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

html.js .opdoemen--nabij {
	opacity: 1;
	transform: none;
}

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

	html.js .opdoemen {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hamer,
	.rijkkaart__beeld img,
	.wijzer::after,
	.toetredingspad__vul {
		transition: none;
	}
}

/* ==========================================================================
   21. Smallere schermen
   ========================================================================== */

@media (max-width: 1080px) {
	.winterklok,
	.wapensmid,
	.toetredingspad {
		grid-template-columns: 1fr;
	}

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

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

	.saga--groot {
		grid-column: span 2;
		grid-row: auto;
	}

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

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

@media (max-width: 900px) {
	:root {
		--dakhoogte: 68px;
	}

	/* De navigatie gaat uit de rij staan, anders duwt hij het dak breder dan
	   het scherm ook al is de lijst dichtgeklapt. */
	.langhuis__navigatie {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
	}

	/* Op smalle schermen is de knop naar de kring overbodig: die staat in het
	   uitklapmenu en op het eerste scherm. */
	.langhuis__binnen > .hamer {
		display: none;
	}

	.padlijst {
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: var(--fjord-diep);
		border-bottom: 1px solid var(--rand);
		border-top: 1px solid var(--rand);
		padding: 0.6rem 1.5rem 1.2rem;
		max-height: calc(100vh - var(--dakhoogte));
		overflow-y: auto;
	}

	.padlijst[data-open='ja'] {
		display: flex;
	}

	.padlijst li {
		margin: 0;
		border-bottom: 1px solid var(--rand);
	}

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

	.padlijst a {
		min-height: 48px;
		padding: 0.7rem 0;
		font-size: 1.04rem;
		width: 100%;
	}

	.poortknop {
		display: inline-flex;
	}

	.langhuis__binnen {
		position: relative;
	}

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

	.lidkaart:nth-child(3) {
		grid-column: 1 / -1;
	}

	.lidkaart:nth-child(3) .lidkaart__beeld {
		aspect-ratio: 16 / 9;
	}

	.tweestand,
	.tweestand--omgekeerd {
		grid-template-columns: 1fr;
	}

	.tweestand--omgekeerd .tweestand__beeld {
		order: 0;
	}

	.vraagsteen__paar {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.bijeenkomst {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.bijeenkomst .hamer {
		justify-self: start;
	}
}

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

	.hof {
		padding: 0 1.1rem;
	}

	.langhuis__binnen {
		padding: 0 1.1rem;
		gap: 0.8rem;
	}

	/* De ondertitel is breed door zijn letterafstand en duwt het dak uiteen. */
	.langhuis__onder {
		display: none;
	}

	.padlijst,
	.haardstrook__binnen {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

	.rijkenraster,
	.sagaraster,
	.steenraster--twee,
	.steenraster--drie,
	.lidkaarten,
	.hoornbrief__rij,
	.kroniekbrief__rij {
		grid-template-columns: 1fr;
	}

	.saga--groot {
		grid-column: auto;
	}

	.lidkaart:nth-child(3) {
		grid-column: auto;
	}

	.lidkaart:nth-child(3) .lidkaart__beeld {
		aspect-ratio: 4 / 5;
	}

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

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

	.kroniekregel {
		grid-template-columns: 1fr;
		gap: 0.8rem;
		padding: 1.6rem 0;
	}

	.kroniekregel__nummer {
		text-align: left;
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		font-size: 1.8rem;
	}

	.kroniekregel__nummer span {
		margin-bottom: 0;
	}

	.raadkaart {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 0.9rem;
	}

	.staatlijst li,
	.gegevensstaf li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.werkplaats__lijf {
		padding: 1.2rem 1.1rem;
	}

	.werkplaats__kop {
		padding: 1rem 1.1rem;
	}

	.rafelrand__greep {
		width: 40px;
		height: 40px;
	}

	/* Grote raakvlakken voor een vinger. */
	.wijzer,
	.padlijst a,
	.haardvuur li a,
	.haardvuur__gegevens a,
	.gegevensstaf a,
	.saga h3 a {
		min-height: 44px;
	}

	.fijnschrift a,
	.wetsteen p a {
		display: inline-block;
		min-height: 40px;
		padding: 0.45rem 0;
	}

	.hamer {
		width: 100%;
	}

	.hamer--kort,
	.hamerrij--los .hamer,
	.bijeenkomst .hamer {
		width: auto;
	}

	.haardstrook__knoppen {
		width: 100%;
	}

	.haardstrook__knoppen .hamer {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   22. Afdrukken
   ========================================================================== */

@media print {
	.langhuis,
	.haardstrook,
	.poortknop,
	.roepstem,
	.werkplaats {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}