/* Duncan Kenneth Bailey: één stylesheet voor alle pagina's.
   Kleuren, letters en ornament volgen het identiteitsbord (de werkpagina /identity/, weg sinds 27-10-2026). Geen inline styles: de CSP
   staat alleen deze file toe (style-src 'self'). */

@font-face {
	font-family: "Bodoni Moda";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/bodoni-moda-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Bodoni Moda";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/bodoni-moda-latin-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/assets/fonts/josefin-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url("/assets/fonts/newsreader-latin-italic.woff2") format("woff2");
}

:root {
	--green: #1e461e;
	--green-deep: #163416;
	--green-tone: #234f23;
	--ivory: #f4eee2;
	--linen: #eae0cc;
	--card: #fffdf8;
	--walnut: #3a2417;
	--brass: #a9824c;
	--brass-text: #7a5a31;
	--brass-light: #d4b781;
	--ink: #1b211b;
	--muted: #574d42;
	--closed: #6e6458;
	--step: #3f382f;
	--rule: #d9ccb3;
	--rule-soft: #e2d6bf;
	--on-dark: #e4dccb;
	--on-dark-em: #e8dcc2;
	--line-dark: rgba(212, 183, 129, 0.28);
	color-scheme: only light;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

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

html:has(dialog[open]) {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: "Newsreader", Georgia, serif;
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul,
address {
	margin: 0;
}

/* Alles regular (besluit Bart-Jan, 19-10-2026): ook koppen, tabelkoppen en strong. Italic mag. */
h1,
h2,
h3,
h4,
th,
b,
strong {
	font-weight: 400;
}

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

a {
	color: inherit;
}

[hidden] {
	display: none !important;
}

/* Letterrollen: d = display (Bodoni Moda), l = label (Josefin Sans, kapitalen).
   Bodoni Moda staat vast op opsz 16 (wght 400), op elke grootte: geen automatische optische
   grootte, die maakt de haarlijnen op grote koppen te dun. Alleen de H1 houdt auto (zie .h1).
   Besluit Bart-Jan, 19-10-2026. */
.d {
	font-family: "Bodoni Moda", Didot, "Times New Roman", serif;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 16;
}

.l {
	font-family: "Josefin Sans", "Gill Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.mono {
	display: block;
	fill: currentColor;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
}

.skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--ivory);
	color: var(--green);
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
}

.skip:focus {
	top: 16px;
}

/* Knoppen en links */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid currentColor;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-sm {
	min-height: 44px;
	padding: 0 22px;
	font-size: 12px;
}

.btn-ivory {
	background: var(--ivory);
	color: var(--green);
	border-color: var(--ivory);
}

.btn-ivory:hover {
	background: #fff;
	border-color: #fff;
}

.btn-green {
	background: var(--green);
	color: var(--ivory);
	border-color: var(--green);
}

.btn-green:hover {
	background: var(--green-deep);
	border-color: var(--green-deep);
}

.btn-ghost-light {
	background: transparent;
	color: var(--ivory);
	border-color: rgba(244, 238, 226, 0.5);
	font-weight: 400;
}

.btn-ghost-light:hover {
	border-color: var(--ivory);
}

.btn-ghost {
	background: transparent;
	color: var(--green);
	border-color: var(--green);
}

.btn-ghost:hover {
	background: var(--green);
	color: var(--ivory);
}

.textlink {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.textlink:hover {
	text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
.opt:focus-within {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--green);
	color: var(--ivory);
	border-bottom: 1px solid var(--line-dark);
}

.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
}

.brand .mono {
	width: 58px;
	height: 40px;
}

.brand-name {
	padding-top: 3px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.24em;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 36px;
}

.navlinks {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 12px;
}

.navlink {
	padding: 14px 0;
	border-bottom: 1px solid transparent;
	text-decoration: none;
}

.navlink:hover,
.navlink[aria-current="page"] {
	border-bottom-color: var(--brass-light);
}

.menubtn {
	display: none;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--ivory);
	font-size: 12px;
	cursor: pointer;
}

.mobile-menu {
	border-top: 1px solid var(--line-dark);
	background: var(--green);
}

.mobile-menu .wrap {
	display: flex;
	flex-direction: column;
	padding-top: 8px;
	padding-bottom: 24px;
	font-size: 14px;
}

.mobile-menu .navlink {
	border-bottom: 1px solid rgba(212, 183, 129, 0.2);
}

.mobile-menu .navlink:last-child {
	border-bottom: 0;
}

/* Gedeelde sectie-onderdelen */
.section {
	padding: 136px 0;
}

.kicker {
	margin-bottom: 24px;
	font-size: 12px;
	color: var(--brass-text);
}

.h2 {
	font-size: 56px;
	line-height: 1.06;
	font-weight: 400;
}

.h2 em {
	font-weight: 400;
}

.diamond {
	display: inline-block;
	width: 7px;
	height: 7px;
	border: 1px solid currentColor;
	transform: rotate(45deg);
}

.rule {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 36px 0;
	color: var(--brass);
}

.rule span:not(.diamond) {
	width: 64px;
	height: 1px;
	background: currentColor;
}

.two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	align-items: start;
}

.two-center {
	align-items: center;
}

.prose p {
	max-width: 520px;
}

.prose p + p {
	margin-top: 20px;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 44px;
}

/* Fotokaarten, als cabinet cards */
.card {
	background: var(--card);
	padding: 12px;
	border: 1px solid var(--rule-soft);
	box-shadow: 0 18px 40px rgba(58, 36, 23, 0.16);
}

.card img {
	width: 100%;
	object-fit: cover;
	filter: saturate(0.85) contrast(1.04) sepia(0.06);
}

.card figcaption {
	padding: 12px 2px 2px;
	font-size: 10px;
	color: var(--muted);
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--green);
	color: var(--ivory);
}

.hero-mono {
	position: absolute;
	right: -260px;
	top: 40px;
	width: 1100px;
	height: 754px;
	color: var(--green-tone);
	pointer-events: none;
}

.hero .wrap {
	position: relative;
	padding-top: 112px;
	padding-bottom: 128px;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: center;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 32px;
	font-size: 12px;
	color: var(--brass-light);
}

.h1 {
	font-weight: 400;
	letter-spacing: -0.01em;
	/* Uitzondering op .d: de H1 houdt de automatische optische grootte (display-tekening). */
	font-optical-sizing: auto;
	font-variation-settings: normal;
}

.h1-name {
	display: block;
	font-size: 84px;
	line-height: 1.02;
}

.h1-sub {
	display: block;
	margin-top: 20px;
	font-size: 40px;
	line-height: 1.12;
	font-weight: 400;
	color: var(--on-dark-em);
}

.lede {
	margin-top: 36px;
	max-width: 560px;
	font-size: 20px;
	color: var(--on-dark);
}

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin-top: 56px;
	padding: 28px 0 0;
	border-top: 1px solid rgba(212, 183, 129, 0.35);
	list-style: none;
	font-size: 11px;
	color: var(--brass-light);
}

.portrait {
	justify-self: center;
	width: 100%;
	max-width: 400px;
}

.portrait-card {
	padding: 14px 14px 0;
	background: var(--ivory);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
	outline: 1px solid var(--brass-light);
	outline-offset: 10px;
}

.portrait img {
	width: 100%;
	aspect-ratio: 4 / 4.6;
	object-fit: cover;
	object-position: 72% 30%;
	filter: saturate(0.82) contrast(1.04) sepia(0.08);
}

.portrait figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px 16px;
	color: var(--ink);
}

.portrait figcaption .d {
	font-size: 17px;
	font-style: italic;
}

.portrait figcaption .l {
	font-size: 10px;
	color: var(--muted);
}

/* De studio: vier kaarten in twee kolommen, de rechter een halve kaart lager */
.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding-bottom: 48px;
}

.gallery .card {
	padding: 10px;
	box-shadow: 0 14px 30px rgba(58, 36, 23, 0.14);
}

.gallery .card:nth-child(even) {
	transform: translateY(48px);
}

.gallery img {
	aspect-ratio: 4 / 5;
}

.gallery figcaption {
	padding: 10px 2px 0;
}

/* In zijn woorden: portret, quote en klantwerk (foto's van Instagram) */
.words-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 80px;
	align-items: center;
}

.words-portrait {
	max-width: 380px;
}

.words-portrait img {
	aspect-ratio: 4 / 5;
	object-position: 50% 30%;
	filter: saturate(0.85) contrast(1.04) sepia(0.06);
}

.quote {
	margin: 0;
}

.quote-text {
	font-size: 28px;
	font-style: italic;
	line-height: 1.45;
	color: var(--ivory);
}

.quote-by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
	font-size: 12px;
	color: var(--brass-light);
}

.quote-by span {
	width: 48px;
	height: 1px;
	background: currentColor;
}

.work-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px 40px;
	margin: 112px 0 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(212, 183, 129, 0.35);
}

.work-head p {
	font-size: 12px;
	color: var(--brass-light);
}

.work-head a {
	font-size: 11px;
	color: var(--ivory);
}

.work {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	padding: 0;
	list-style: none;
}

.work img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	padding: 8px;
	background: var(--ivory);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.work .work-top {
	object-position: 50% 25%;
}

/* De afspraak */
.band {
	padding: 128px 0;
	background: var(--linen);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.ritual-head {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: end;
	margin-bottom: 72px;
}

.card-shave {
	max-width: 360px;
}

.card-shave img {
	aspect-ratio: 3 / 4;
	filter: saturate(0.85) contrast(1.05) sepia(0.06);
}

.ritual-intro {
	margin-top: 28px;
	max-width: 560px;
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	padding: 0;
	list-style: none;
}

.steps li {
	padding-top: 24px;
	border-top: 1px solid var(--brass);
}

.step-num {
	display: block;
	font-size: 34px;
	font-style: italic;
	line-height: 1;
	color: var(--brass-text);
}

.steps h3 {
	margin: 20px 0 12px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.18em;
}

.steps p {
	font-size: 17px;
	color: var(--step);
}

/* Diensten en prijzen */
.svc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 24px 48px;
	margin-bottom: 56px;
}

.svc-intro {
	max-width: 420px;
	font-size: 17px;
	color: var(--muted);
}

.menu-card {
	padding: 48px 56px 32px;
	background: var(--card);
	border: 1px solid var(--brass);
	outline: 1px solid var(--brass);
	outline-offset: -8px;
}

.menu-card > h3 {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 400;
	color: var(--brass-text);
}

.menu-card > h3.later {
	margin-top: 40px;
}

.svc-list {
	padding: 0;
	list-style: none;
}

.svc {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 120px 96px 132px;
	gap: 24px;
	align-items: center;
	padding: 28px 0;
	border-top: 1px solid var(--rule);
}

.svc-num {
	font-size: 26px;
	font-style: italic;
	line-height: 1;
	color: var(--brass-text);
}

.svc-name h4 {
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}

.svc-name p {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--muted);
}

.svc-name .saving {
	margin-top: 10px;
	font-size: 10px;
	line-height: 1.6;
	color: var(--green);
}

.svc-dur {
	font-size: 11px;
	color: var(--muted);
}

.svc-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.svc-price .d {
	font-size: 28px;
	font-weight: 400;
}

.svc-price .l {
	font-size: 10px;
	color: var(--muted);
}

.only-m {
	display: none;
}

.svc-book {
	min-height: 46px;
	padding: 0 18px;
	font-size: 11px;
}

.menu-note {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	font-size: 14px;
	color: var(--muted);
}

/* Duncan */
.dark {
	background: var(--green);
	color: var(--ivory);
}

.dark .kicker {
	color: var(--brass-light);
}

.prose-dark p:not(.kicker) {
	margin-top: 20px;
	color: var(--on-dark);
}

.prose-dark p.first {
	margin-top: 36px;
}

.creds-col {
	padding-top: 8px;
}

.creds-col h3 {
	margin-bottom: 28px;
	font-size: 12px;
	font-weight: 400;
	color: var(--brass-light);
}

.creds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px 40px;
}

.creds > div {
	padding-top: 20px;
	border-top: 1px solid rgba(212, 183, 129, 0.45);
}

.creds dt {
	font-size: 22px;
	line-height: 1.25;
}

.creds .meta {
	margin: 8px 0 12px;
	font-size: 10px;
	color: var(--brass-light);
}

.creds .text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--on-dark);
}

/* Onderwijs voor barbiers */
.edu {
	padding: 80px 0;
	background: var(--walnut);
	color: var(--ivory);
}

.edu .kicker {
	margin-bottom: 18px;
	color: var(--brass-light);
}

.edu-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 64px;
}

.edu-text {
	flex: 1 1 520px;
	min-width: 0;
}

.edu h2 {
	font-size: 40px;
	line-height: 1.12;
	font-weight: 400;
}

.edu-body {
	margin-top: 18px;
	max-width: 620px;
	color: #e4d6c6;
}

.edu-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 32px;
}

.edu-price .d {
	font-size: 36px;
}

.edu-price .l {
	font-size: 11px;
	color: var(--brass-light);
}

/* Bezoek */
.visit-title {
	margin-bottom: 64px;
}

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

.visit h3 {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 400;
}

.visit address {
	margin-bottom: 20px;
	font-style: normal;
}

.visit .note {
	margin-bottom: 20px;
	font-size: 16px;
	color: var(--muted);
}

.maplink {
	font-size: 12px;
	color: var(--green);
}

.hours {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.hours tr {
	border-bottom: 1px solid var(--rule-soft);
}

.hours th {
	padding: 9px 0;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.hours td {
	padding: 9px 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hours .closed {
	color: var(--closed);
}

.contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 32px;
	padding: 0;
	list-style: none;
}

/* Footer */
.site-footer {
	background: var(--green-deep);
	color: var(--on-dark);
}

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-top: 72px;
	padding-bottom: 40px;
	text-align: center;
}

.site-footer .mono {
	width: 120px;
	height: 82px;
	color: var(--brass-light);
}

.foot-name {
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--ivory);
}

.foot-tag {
	font-size: 18px;
	font-style: italic;
	color: var(--brass-light);
}

.foot-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	width: 100%;
	margin-top: 24px;
	padding-top: 28px;
	border-top: 1px solid rgba(212, 183, 129, 0.25);
	font-size: 10px;
	color: #c9bfae;
}

/* Boekbalk op de telefoon */
.mbar {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 20;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	background: var(--green);
	color: var(--ivory);
	border-top: 1px solid rgba(212, 183, 129, 0.4);
}

.mbar-price {
	line-height: 1.3;
}

.mbar-price .l {
	display: block;
	font-size: 10px;
	color: var(--brass-light);
}

.mbar-price .d {
	font-size: 22px;
}

.mbar .btn {
	flex: 1 1 auto;
	max-width: 240px;
	font-size: 12px;
}

/* Boekingspaneel (dialog, gebouwd door site.js) */
.book {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(540px, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ivory);
	color: var(--ink);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.book::backdrop {
	background: rgba(12, 24, 14, 0.62);
}

.book-panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.book-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 28px;
	background: var(--green);
	color: var(--ivory);
}

.book-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.book-brand .mono {
	width: 44px;
	height: 30px;
	color: var(--brass-light);
}

.book-brand h2 {
	font-size: 24px;
	font-weight: 400;
}

.book-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	color: var(--ivory);
	border: 1px solid rgba(244, 238, 226, 0.4);
	cursor: pointer;
}

.book-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.book-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 28px;
	background: var(--linen);
	border-bottom: 1px solid var(--rule);
	list-style: none;
	font-size: 10px;
	color: var(--muted);
}

.book-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.book-steps li.line {
	flex: 1 1 auto;
	height: 1px;
	background: #c9b994;
}

.book-steps .n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding-top: 2px;
	border: 1px solid #8a7c69;
}

.book-steps .now {
	font-weight: 400;
	color: var(--green);
}

.book-steps .now .n {
	background: var(--green);
	border-color: var(--green);
	color: var(--ivory);
}

.book-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 28px;
	padding: 28px;
}

.book-body fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.book-body legend {
	margin-bottom: 14px;
	padding: 0;
	font-size: 11px;
	font-weight: 400;
	color: var(--brass-text);
}

.opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.opt {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--rule);
	cursor: pointer;
}

.opt:has(input:checked) {
	background: var(--card);
	border-color: var(--green);
}

.opt input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--green);
}

.opt-name {
	display: block;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.25;
}

.opt-meta {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	color: var(--muted);
}

.opt-price {
	font-size: 21px;
	font-weight: 400;
}

.summary {
	padding: 22px 22px 24px;
	background: var(--card);
	border: 1px solid var(--brass);
}

.summary .l {
	margin-bottom: 10px;
	font-size: 10px;
	color: var(--brass-text);
}

.summary-name {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
}

.summary-meta {
	margin-top: 6px;
	font-size: 16px;
	color: var(--muted);
}

.summary-meta + .summary-meta {
	margin-top: 2px;
}

.summary-next {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--rule-soft);
}

.summary-next p:not(.l) {
	font-size: 16px;
	line-height: 1.55;
}

.summary strong {
	font-weight: 400;
}

.book-cta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
}

.book-cta .btn {
	justify-content: space-between;
	min-height: 58px;
}

.book-cta .btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.book-cta p {
	font-size: 14px;
	color: var(--muted);
	text-align: center;
}

/* Voorwaarden */
.legal .wrap {
	max-width: 856px;
}

.legal h2 {
	margin: 56px 0 18px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	font-weight: 400;
	color: var(--brass-text);
}

.legal p,
.legal li {
	font-size: 17px;
	line-height: 1.65;
}

.legal p + p,
.legal p + .defs,
.legal .defs + p {
	margin-top: 14px;
}

.legal-intro {
	font-size: 19px !important;
}

.legal .defs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
	padding: 0 0 0 24px;
	list-style: none;
}

/* 404 */
.notfound p:not(.kicker) {
	max-width: 560px;
}

/* Responsief */
@media (min-width: 981px) {
	.mobile-menu {
		display: none !important;
	}
}

@media (max-width: 980px) {
	.words-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.hero-grid,
	.two,
	.ritual-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

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

	.h1-name {
		font-size: 72px;
	}

	/* Zonder JavaScript blijven de links zichtbaar; met JavaScript klappen ze in onder Menu. */
	.bar {
		flex-wrap: wrap;
	}

	.navlinks {
		flex-wrap: wrap;
		gap: 0 20px;
	}

	.js .bar {
		flex-wrap: nowrap;
	}

	.js .navlinks {
		display: none;
	}

	.js .menubtn {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	.quote-text {
		font-size: 22px;
	}

	.work {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.work-head {
		margin-top: 72px;
	}

	body {
		font-size: 17px;
	}

	.wrap {
		padding: 0 20px;
	}

	.section,
	.band {
		padding: 72px 0;
	}

	.hero .wrap {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.hero-mono {
		display: none;
	}

	.h1-name {
		font-size: 48px;
		line-height: 1.04;
	}

	.h1-sub {
		margin-top: 14px;
		font-size: 28px;
	}

	.lede {
		font-size: 18px;
	}

	.h2 {
		font-size: 38px;
	}

	.brand-name {
		font-size: 11px;
		letter-spacing: 0.18em;
	}

	.brand .mono {
		width: 44px;
		height: 30px;
	}

	.hide-m {
		display: none;
	}

	.steps,
	.visit,
	.creds {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.visit {
		gap: 40px;
	}

	.menu-card {
		padding: 32px 20px 24px;
	}

	.svc {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		grid-template-areas:
			"num name name"
			"num meta book";
		gap: 12px;
		padding: 24px 0;
	}

	.svc-num {
		grid-area: num;
		align-self: start;
	}

	.svc-name {
		grid-area: name;
	}

	.svc-dur {
		display: none;
	}

	.svc-price {
		grid-area: meta;
		align-self: center;
	}

	.svc-book {
		grid-area: book;
	}

	.only-m {
		display: block;
	}

	.edu h2 {
		font-size: 32px;
	}

	.mbar {
		display: flex;
	}

	.book-head,
	.book-steps,
	.book-body {
		padding-left: 20px;
		padding-right: 20px;
	}

	.legal .defs {
		padding-left: 0;
		margin-left: 0;
	}

	.book-brand h2 {
		font-size: 20px;
	}
}

/* Smalle telefoons: de naam in de header mag over twee regels. */
@media (max-width: 400px) {
	.brand {
		gap: 12px;
	}

	.brand-name {
		white-space: normal;
		line-height: 1.5;
	}

	.site-nav {
		gap: 16px;
	}
}