/* Jessica Larive Academy.
   Tokens, lettertypes, kop, footer en knoppen komen uit het thema jessica-larive
   (jessicalarive.nl, wordpress/DESIGN.md). Regels daar gelden hier ook: elke
   lettergrootte van de ladder, geen losse hexwaarden voor tekst, vlakken
   zweven, knoppen in de inhoud 66px, leeskolom 620px. */

@font-face {
	font-family: Archivo;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/archivo-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: Archivo;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/archivo-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: "Libre Baskerville";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/libre-baskerville-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: "Libre Baskerville";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/libre-baskerville-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: "Libre Baskerville";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/libre-baskerville-italic-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;
}

:root {
	--black: #121110;
	--charcoal: #242321;
	--gold: #b9863d;
	--gold-light: #d5b477;
	--gold-deep: #86602a;
	--gold-edge: #a37436;
	--laser: #6f675e;
	--paper: #f3f1ed;
	--white: #fbfaf7;
	--muted: #bdb7af;
	--ink: #3f3b36;
	--ink-soft: #58524b;
	--rule: #c5beb6;
	--on-dark: #d2c8b8;
	--on-dark-soft: #a89d8e;

	--r-sm: 14px;
	--r-md: 24px;
	--r-lg: clamp(30px, 3.2vw, 44px);

	--t-label: 11px;
	--t-meta: 13px;
	--t-small: 15px;
	--t-body: 17px;
	--t-body-lg: 19px;
	--t-item: clamp(21px, 1.8vw, 26px);
	--t-quote: clamp(24px, 2.2vw, 33px);
	--t-section: clamp(34px, 3.4vw, 48px);
	--t-statement: clamp(40px, 4.4vw, 62px);
	--t-page: clamp(46px, 5vw, 78px);
	--t-display: clamp(58px, 6.6vw, 96px);

	--measure: 56ch;
	/* Leeskolom, zoals op /jessica/ (WCAG 1.4.8: ongeveer 70 tekens). */
	--reading: 620px;
	--sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--serif: "Libre Baskerville", Baskerville, Georgia, serif;
	--content: min(1240px, calc(100vw - 48px));
	--gutter: clamp(12px, 3vw, 42px);

	--z-raised: 2;
	--z-header: 100;
	--z-skip-link: 200;

	--anchor-offset: 108px;
	--ease-out-quart: cubic-bezier(.25, 1, .5, 1);

	--space-tight: clamp(56px, 6vw, 84px);
	--space-normal: clamp(78px, 9vw, 120px);
	--space-wide: clamp(104px, 13vw, 172px);
}
@media (max-width: 640px) {
	:root { --t-small: var(--t-body); --gutter: 12px; }
}

/* --- Basis ---------------------------------------------------------------- */

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: var(--anchor-offset); }
body {
	background: var(--paper);
	color: var(--black);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.65;
	margin: 0;
	max-width: 100%;
	overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; overflow-wrap: break-word; }
h1 { font-family: var(--sans); letter-spacing: -.045em; }
a { color: inherit; }
img { height: auto; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.screen-reader-text { clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--gold); color: var(--black); left: 16px; padding: 12px 18px; position: fixed; top: -100px; z-index: var(--z-skip-link); }
.skip-link:focus { top: 16px; }

.eyebrow {
	color: var(--gold);
	font-size: var(--t-label);
	font-weight: 750;
	letter-spacing: .14em;
	margin: 0 0 22px;
	text-transform: uppercase;
}

.aged-black {
	background:
		radial-gradient(circle at 78% 18%, rgba(185, 134, 61, .14), transparent 28%),
		radial-gradient(circle at 10% 86%, rgba(213, 180, 119, .07), transparent 25%),
		linear-gradient(132deg, #0c0c0c, #181715 54%, #0e0d0c);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}
.aged-black::before {
	background: repeating-linear-gradient(96deg, transparent 0, rgba(255,255,255,.07) 1px, transparent 2px, rgba(36,23,10,.07) 5px, transparent 8px);
	content: "";
	inset: 0;
	mix-blend-mode: soft-light;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* --- Knoppen ---------------------------------------------------------------- */

.button {
	align-items: center;
	background: var(--gold);
	border: 0;
	border-radius: 999px;
	color: var(--black);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--sans);
	font-size: var(--t-meta);
	font-weight: 700;
	justify-content: center;
	min-height: 54px;
	padding: 0 26px;
	text-decoration: none;
	transition: background 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart), transform 140ms var(--ease-out-quart);
}
.button:hover { background: var(--gold-light); }
.button:active { transform: translateY(1px); }
.button-small { min-height: 45px; padding-inline: 20px; }
main .button:not(.button-small) { font-size: 1.1rem; letter-spacing: .01em; min-height: 66px; padding-inline: 38px; }
@media (max-width: 640px) { main .button:not(.button-small) { font-size: 1.05rem; padding-inline: 26px; } }
@media (max-width: 400px) { main .button:not(.button-small) { max-width: 100%; text-align: center; white-space: normal; } }

/* --- Kop ---------------------------------------------------------------------- */

.site-header {
	align-items: center;
	background: rgba(13, 13, 12, .96);
	border: 1px solid rgba(185, 134, 61, .68);
	border-radius: 999px;
	box-shadow: rgba(17, 17, 17, .09) 0 16px 40px;
	color: var(--gold-light);
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(210px, 1fr) auto;
	margin: 16px var(--gutter) 0;
	min-height: 80px;
	padding: 11px 13px 11px 28px;
	position: sticky;
	top: 12px;
	z-index: var(--z-header);
}
.admin-bar .site-header { top: 44px; }
.site-brand { display: inline-flex; flex-direction: column; text-decoration: none; width: max-content; }
.site-brand strong { color: var(--gold-light); font-family: var(--serif); font-size: var(--t-item); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.site-brand span { color: var(--gold); font-size: var(--t-label); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.primary-nav { align-items: center; display: flex; gap: 18px; margin: 0; }
.site-menu { align-items: center; display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.site-menu > li > a {
	align-items: center;
	border-radius: 999px;
	color: var(--on-dark);
	display: inline-flex;
	font-size: var(--t-small);
	font-weight: 720;
	line-height: 1;
	min-height: 44px;
	padding: 0 14px;
	position: relative;
	text-decoration: none;
	transition: color .2s;
}
.site-menu > li > a::after {
	background: currentcolor;
	bottom: 8px;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%) scaleX(0);
	transition: transform 260ms var(--ease-out-quart);
	width: calc(100% - 28px);
}
.site-menu > li > a:hover, .site-menu > .current-menu-item > a { color: var(--gold-light); }
.site-menu > li > a:hover::after, .site-menu > .current-menu-item > a::after { transform: translateX(-50%) scaleX(1); }
.site-menu .sub-menu { display: none; }
.nav-cta { flex: 0 0 auto; min-width: 150px; }
.menu-toggle { display: none; }

@media (max-width: 1120px) {
	.site-header { grid-template-columns: 1fr auto; }
	.menu-toggle {
		align-items: center;
		background: rgba(185, 134, 61, .1);
		border: 1px solid rgba(213, 180, 119, .45);
		border-radius: 999px;
		color: var(--gold-light);
		cursor: pointer;
		display: inline-flex;
		font-family: var(--sans);
		font-size: var(--t-meta);
		font-weight: 800;
		gap: 11px;
		min-height: 46px;
		padding: 0 16px;
	}
	.menu-toggle-icon { display: grid; gap: 5px; }
	.menu-toggle-icon i { background: currentcolor; display: block; height: 1px; transition: transform .2s; width: 18px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform: translateY(3px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
	.primary-nav {
		background: radial-gradient(circle at 85% 10%, rgba(185, 134, 61, .16), transparent 30%), linear-gradient(145deg, #0d0d0c, #171512);
		border: 1px solid rgba(185, 134, 61, .62);
		border-radius: var(--r-md);
		box-shadow: rgba(0, 0, 0, .34) 0 28px 70px;
		display: block;
		left: 0;
		max-height: calc(100dvh - 118px);
		opacity: 0;
		overflow-y: auto;
		padding: 18px 28px 28px;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: calc(100% + 9px);
		transform: translateY(-10px);
		transition: opacity .2s, transform .24s, visibility .2s;
		visibility: hidden;
	}
	.primary-nav.is-open { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
	.site-menu { align-items: stretch; flex-direction: column; gap: 0; }
	.site-menu > li { border-bottom: 1px solid rgba(213, 180, 119, .17); }
	.site-menu > li > a { border-radius: 0; display: flex; font-size: var(--t-quote); font-weight: 600; letter-spacing: -.02em; min-height: 74px; padding: 13px 2px; width: 100%; }
	.site-menu > li > a::after { content: none; }
	.nav-cta { display: flex; margin-top: 18px; min-height: 56px; width: 100%; }
}
@media (max-width: 640px) {
	.site-header { border-radius: var(--r-md); gap: 8px; margin: 10px 12px 0; min-height: 68px; padding: 9px 10px 9px 18px; top: 8px; }
	.site-brand strong { font-size: var(--t-body-lg); }
	.menu-toggle { min-height: 43px; padding-inline: 14px; }
	.primary-nav { max-height: calc(100dvh - 96px); padding: 12px 22px 24px; }
	.site-menu > li > a { font-size: var(--t-item); min-height: 64px; }
}
@media (max-width: 360px) {
	.site-header { grid-template-columns: minmax(0, 1fr) auto; }
	.menu-toggle { padding: 0 12px; }
	.menu-toggle-label { clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}

/* --- Paginakop en leeskolom ------------------------------------------------ */

.page-head {
	border-radius: var(--r-lg);
	color: var(--paper);
	margin: 14px var(--gutter) 0;
	padding: clamp(48px, 7vw, 104px) clamp(26px, 6vw, 96px);
}
.page-head h1 {
	color: var(--gold-light);
	font-family: var(--serif);
	font-size: var(--t-page);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: .98;
	margin: 0;
	max-width: 18ch;
}
.page-head-intro { color: var(--on-dark); font-size: var(--t-body-lg); line-height: 1.6; margin: 26px 0 0; max-width: var(--measure); }
@media (max-width: 640px) { .page-head { border-radius: var(--r-md); } }

.reading {
	margin: 0 auto;
	max-width: calc(var(--reading) + 48px);
	padding: var(--space-tight) 24px 0;
}
.reading :where(p, li) { color: var(--ink-soft); line-height: 1.65; }
.reading :where(h2) { font-size: var(--t-section); line-height: 1.1; margin: 1.6em 0 .5em; }
.reading :where(h3) { font-size: var(--t-item); line-height: 1.25; margin: 1.6em 0 .4em; }
.reading :where(a:not(.button)) { color: var(--gold-deep); text-underline-offset: 3px; }

/* Architect-inhoud binnen de leeskolom: secties en vakken lopen er niet uit. */
.reading.is-architect :is(.thrv-page-section, .thrv_wrapper, .tve-page-section-in) { max-width: 100% !important; }
.reading.is-architect img { border-radius: var(--r-md); }

/* --- Footer ------------------------------------------------------------------- */
/* Gelijk aan jessicalarive.nl (theme.css, blok "Footer, nieuw ontwerp", eindstand 1-10-2026):
   naam groot, vier kolommen met kopjes, juridische regel. Zwevend blok met marge rondom. */

.site-footer.site-footer--jl {
	background: radial-gradient(circle at 78% 18%, rgba(185, 134, 61, .14), transparent 28%), radial-gradient(circle at 10% 86%, rgba(213, 180, 119, .07), transparent 25%), linear-gradient(132deg, #0c0c0c, #181715 54%, #0e0d0c);
	border: 1px solid rgba(213, 180, 119, .28);
	border-radius: var(--r-lg);
	box-shadow: 0 20px 48px rgba(17, 17, 17, .12);
	color: var(--paper);
	margin: clamp(36px, 4vw, 60px) clamp(12px, 3vw, 42px) clamp(12px, 2vw, 24px);
	overflow: hidden;
	padding: clamp(36px, 4vw, 56px) clamp(22px, 5vw, 72px) 30px;
	text-align: left;
}
.jl-footer { margin: 0 auto; max-width: 1240px; position: relative; z-index: 1; }
.jl-footer-top { align-items: end; border-bottom: 1px solid rgba(213, 180, 119, .24); display: flex; flex-wrap: wrap; gap: 18px 48px; justify-content: space-between; padding-bottom: clamp(28px, 3vw, 40px); }
.jl-footer-wordmark { color: var(--gold-light); display: inline-flex; flex-direction: column; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.035em; line-height: .95; text-decoration: none; }
/* "Academy" onder de naam, zoals in de kop van deze site. */
.jl-footer-wordmark span { color: var(--gold); font-family: var(--sans); font-size: var(--t-label); font-weight: 800; letter-spacing: .14em; margin-top: 10px; text-transform: uppercase; }
.jl-footer-wordmark:hover, .jl-footer-wordmark:focus-visible { color: var(--paper); }
.jl-footer-tag { text-align: right; }
.jl-footer-tag span { color: var(--gold); display: block; font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.jl-footer-tag p { color: var(--on-dark-soft); font-family: var(--serif); font-size: var(--t-body); font-style: italic; margin: 8px 0 0; }
.jl-footer-cols { display: grid; gap: 32px clamp(24px, 3vw, 48px); grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); padding: clamp(28px, 3vw, 40px) 0; }
.site-footer--jl .jl-footer-col h2 { color: var(--gold); font-family: var(--sans); font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; line-height: 1.4; margin: 0 0 16px; max-width: none; text-align: left; text-transform: uppercase; }
.jl-footer-col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.jl-footer-col a { color: var(--on-dark); font-size: var(--t-small); line-height: 1.4; text-decoration: none; text-underline-offset: 4px; }
.jl-footer-col a:hover, .jl-footer-col a:focus-visible { color: var(--gold-light); text-decoration: underline; text-decoration-thickness: 1px; }
.jl-footer-col small { color: var(--on-dark-soft); font-size: var(--t-label); margin-left: 4px; }
.jl-footer-contact address { color: var(--on-dark-soft); font-size: var(--t-small); font-style: normal; line-height: 1.6; margin-top: 18px; }
.jl-footer-meta { align-items: center; border-top: 1px solid rgba(213, 180, 119, .24); color: var(--on-dark-soft); display: flex; flex-wrap: wrap; font-size: var(--t-label); gap: 10px 24px; justify-content: space-between; padding-top: 18px; }
.jl-footer-meta > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.jl-footer-meta a { color: var(--on-dark-soft); text-decoration: none; text-underline-offset: 3px; }
.jl-footer-meta a:hover, .jl-footer-meta a:focus-visible { color: var(--gold-light); text-decoration: underline; }
.jl-footer-credit { border-left: 1px solid rgba(213, 180, 119, .24); margin-left: 20px; padding-left: 20px; }
@media (max-width: 1000px) {
	.jl-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.site-footer.site-footer--jl { border-radius: var(--r-md); margin: 32px 12px 12px; padding: 32px 22px 22px; }
	.jl-footer-top { align-items: start; flex-direction: column; }
	.jl-footer-tag { text-align: left; }
	.jl-footer-cols { gap: 28px 20px; }
	.jl-footer-contact { grid-column: 1 / -1; }
	.jl-footer-meta { align-items: flex-start; flex-direction: column; }
	.jl-footer-credit { border-left: 0; display: block; margin: 6px 0 0; padding: 0; }
	/* Tikruimte voor de footerlinks op de telefoon. */
	.site-footer--jl .jl-footer-col ul { gap: 2px; }
	.site-footer--jl .jl-footer-col ul a { display: inline-block; padding: 8px 0; }
	.site-footer--jl .jl-footer-meta a { display: inline-block; padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   WishList Member: inlog- en registratieformulieren
   ========================================================================== */
.wlm3-form { display: grid; font-family: var(--sans); gap: 18px; max-width: 460px; }
.wlm3-form .wlm3-form-group { display: grid; gap: 6px; margin: 0; }
.wlm3-form label { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.wlm3-form :is(input[type="text"], input[type="email"], input[type="password"], select, textarea) {
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	color: var(--black);
	font: inherit;
	font-size: var(--t-body);
	min-height: 52px;
	padding: 0 16px;
	width: 100%;
}
.wlm3-form :is(input, select, textarea):focus { border-color: var(--gold-deep); outline: 2px solid rgba(185, 134, 61, .35); outline-offset: 1px; }
.wishlist-member-login-password { align-items: center; display: flex; position: relative; }
.wishlist-member-login-password .dashicons { color: var(--laser); position: absolute; right: 14px; text-decoration: none; }
.wlm3-form input[type="checkbox"] { accent-color: var(--gold-deep); margin-right: 8px; }
.wlm3-form label:has(input[type="checkbox"]) { align-items: center; display: flex; font-weight: 500; }
.wlm3-form p { margin: 0; }
.wlm3-form :is(input[type="submit"], button[type="submit"]) {
	background: var(--gold);
	border: 0;
	border-radius: 999px;
	color: var(--black);
	cursor: pointer;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .01em;
	min-height: 66px;
	padding: 0 38px;
	transition: background 220ms var(--ease-out-quart);
}
.wlm3-form :is(input[type="submit"], button[type="submit"]):hover { background: var(--gold-light); }
.wlm3-form a { color: var(--gold-deep); font-size: var(--t-small); text-underline-offset: 3px; }

/* ==========================================================================
   Cookiemelding (Cookie Notice). De plugin zet een grijze achtergrond inline.
   Ignition verborg de melding met display:none; hier is hij zichtbaar.
   ========================================================================== */
#cookie-notice.cn-position-bottom {
	background: var(--black) !important;
	border: 1px solid rgba(213, 180, 119, .4);
	border-radius: var(--r-md);
	bottom: var(--gutter);
	box-shadow: 0 20px 48px rgba(17, 17, 17, .25);
	font-family: var(--sans);
	left: var(--gutter);
	min-width: 0;
	right: var(--gutter);
	width: auto;
}
#cookie-notice .cookie-notice-container { color: var(--on-dark) !important; font-size: var(--t-small); line-height: 1.5; padding: 18px 24px; }
#cookie-notice .cn-button { background: var(--gold) !important; border-radius: 999px !important; color: var(--black) !important; font-family: var(--sans); font-size: var(--t-meta) !important; font-weight: 700; min-height: 44px; padding: 0 22px !important; }
#cookie-notice a { color: var(--gold-light); }

/* De menuknop ook op desktop op de ladder (verborgen, maar telt mee in metingen). */
.menu-toggle { font-family: var(--sans); font-size: var(--t-meta); }

/* Uitloggen in de balk: rustiger dan de gouden inlogknop. */
.nav-cta--quiet { background: transparent; border: 1px solid rgba(213, 180, 119, .45); color: var(--gold-light); }
.nav-cta--quiet:hover { background: rgba(185, 134, 61, .14); }

/* ==========================================================================
   Home
   ========================================================================== */
.home-intro {
	align-items: center;
	border-radius: var(--r-lg);
	color: var(--paper);
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
	margin: 14px var(--gutter) 0;
	padding: clamp(40px, 6vw, 88px);
}
.home-intro h1 { color: var(--gold-light); font-family: var(--serif); font-size: var(--t-page); font-weight: 500; letter-spacing: -.035em; line-height: .98; margin: 0; }
.home-intro-text { color: var(--on-dark); font-size: var(--t-body-lg); line-height: 1.6; margin: 24px 0 34px; max-width: var(--measure); }
.home-intro .button { font-size: 1.1rem; min-height: 66px; padding-inline: 38px; }
.home-intro-portrait { justify-self: end; }
.home-intro-portrait img { aspect-ratio: 800 / 788; border-radius: var(--r-md); display: block; height: auto; max-width: 440px; object-fit: cover; width: 100%; }
.home-intro--member { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }

.continue-card {
	background:
		repeating-linear-gradient(91deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px),
		linear-gradient(110deg, var(--gold-edge), var(--gold) 27%, var(--gold-light) 50%, var(--gold) 72%, var(--gold-edge));
	border-radius: var(--r-md);
	color: var(--black);
	display: grid;
	gap: 8px;
	padding: clamp(26px, 3vw, 38px);
	text-decoration: none;
}
.continue-card-label { font-size: var(--t-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.continue-card-course { font-family: var(--serif); font-size: var(--t-item); font-weight: 500; line-height: 1.2; }
.continue-card-lesson { font-size: var(--t-body); }
.continue-card .continue-card-button { background: var(--black); color: var(--paper); font-size: 1.1rem; justify-self: start; margin-top: 14px; min-height: 66px; padding-inline: 38px; }
.continue-card:hover .continue-card-button { background: var(--charcoal); }

.my-courses { margin: var(--space-tight) auto 0; width: var(--content); }
.my-courses h2, .course-index-heading { font-size: var(--t-section); line-height: 1.1; margin: 0 0 28px; }
.my-courses-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; }
.paper-card {
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
	border: 1px solid rgba(143, 100, 43, .14);
	border-radius: var(--r-md);
	box-shadow: 0 20px 48px rgba(39, 29, 18, .075);
	padding: 26px 26px 22px;
}
.my-course { position: relative; }
.my-course-number { color: var(--gold-deep); font-size: var(--t-label); font-weight: 750; letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }
.my-course h3 { font-size: var(--t-item); line-height: 1.2; margin: 0 0 14px; }
.my-course h3 a { color: var(--black); text-decoration: none; }
.my-course h3 a::after { content: ""; inset: 0; position: absolute; }
.my-course:hover h3 a { color: var(--gold-deep); }
.my-course-progress-text { color: var(--laser); font-size: var(--t-meta); margin: 0 0 10px; }
/* Beschrijving in Jessica's stem; de voortgang zakt naar de onderkant zodat de balken in een rij gelijk staan. */
.my-course { display: flex; flex-direction: column; }
.my-course-line { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; margin: -4px 0 18px; }
.my-course-progress-text { margin-top: auto; }
.progress-line { background: rgba(143, 100, 43, .14); border-radius: 999px; display: block; height: 4px; overflow: hidden; }
.progress-line > span { background: var(--gold); display: block; height: 100%; }

.home-catalog { margin: var(--space-normal) auto 0; width: min(1040px, calc(100vw - 48px)); }
.course-index + .course-index { margin-top: var(--space-tight); }
.course-index-list { list-style: none; margin: 0; padding: 0; }
.course-index-item {
	border-top: 1px solid var(--rule);
	display: grid;
	gap: 6px clamp(18px, 3vw, 40px);
	grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
	padding: 26px 0;
	position: relative;
}
.course-index-number { color: var(--gold); font-family: var(--serif); font-size: var(--t-section); grid-row: span 2; line-height: 1; }
.course-index-title { font-size: var(--t-item); grid-column: 2; line-height: 1.2; margin: 0; }
.course-index-title a { color: var(--black); text-decoration: none; }
.course-index-title a::after { content: ""; inset: 0; position: absolute; }
.course-index-item:hover .course-index-title a { color: var(--gold-deep); }
.course-index-line { color: var(--ink-soft); grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.course-index-meta { color: var(--laser); font-size: var(--t-meta); grid-column: 2; margin: 0; }

.home-closing { border-radius: var(--r-lg); color: var(--paper); margin: var(--space-normal) var(--gutter) 0; padding: clamp(44px, 6vw, 80px); text-align: center; }
.home-closing h2 { color: var(--gold-light); font-size: var(--t-section); line-height: 1.1; margin: 0 0 16px; }
.home-closing p { color: var(--on-dark); font-size: var(--t-body-lg); margin: 0 auto 30px; max-width: var(--measure); }
.home-closing .button { font-size: 1.1rem; min-height: 66px; padding-inline: 38px; }

@media (max-width: 900px) {
	.home-intro, .home-intro--member { grid-template-columns: 1fr; }
	.home-intro-portrait { justify-self: start; }
	.home-intro-portrait img { max-width: 360px; }
	.course-index-item { grid-template-columns: 52px minmax(0, 1fr); }
	.course-index-line { grid-column: 2; grid-row: auto; }
}
@media (max-width: 640px) {
	.home-intro, .home-closing { border-radius: var(--r-md); }
	.course-index-number { font-size: var(--t-item); }
}

/* ==========================================================================
   Training en lessenlijst
   ========================================================================== */
.course-head { border-radius: var(--r-lg); color: var(--paper); margin: 14px var(--gutter) 0; padding: clamp(44px, 6vw, 88px) clamp(26px, 6vw, 96px); }
.course-head h1 { color: var(--gold-light); font-family: var(--serif); font-size: var(--t-page); font-weight: 500; letter-spacing: -.035em; line-height: .98; margin: 0; max-width: 20ch; }
.course-head-state { color: var(--on-dark); font-size: var(--t-body-lg); margin: 22px 0 30px; }
.course-head .button { font-size: 1.1rem; min-height: 66px; padding-inline: 38px; }
.button-outline { background: transparent; border: 1px solid var(--black); color: var(--black); }
.button-outline:hover { background: var(--black); color: var(--paper); }
.course-restricted { padding-bottom: 0; }
.course-restricted :where(p) { color: var(--ink-soft); }
.course-restricted-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.course-about h2, .course-lessons h2 { font-size: var(--t-section); line-height: 1.1; margin: 0 0 22px; }
.course-lessons { margin: var(--space-tight) auto 0; width: min(820px, calc(100vw - 48px)); }

.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-list-item { align-items: baseline; border-top: 1px solid var(--rule); display: grid; gap: 16px; grid-template-columns: 40px minmax(0, 1fr) 20px; padding: 16px 0; position: relative; }
.lesson-list-number { color: var(--gold-deep); font-family: var(--serif); font-size: var(--t-body-lg); }
.lesson-list-title { color: var(--black); font-size: var(--t-body); line-height: 1.4; text-decoration: none; }
.lesson-list-title::after { content: ""; inset: 0; position: absolute; }
.lesson-list-item:hover .lesson-list-title { color: var(--gold-deep); }
.lesson-list-item.is-current .lesson-list-title { color: var(--gold-deep); font-weight: 700; }
.lesson-list-item.is-locked .lesson-list-title { color: var(--laser); }
.lesson-list-state { color: var(--gold-deep); height: 16px; width: 16px; }
.lesson-list-item.is-locked .lesson-list-state { color: var(--laser); }
.lesson-list-state svg { display: block; height: 16px; width: 16px; }
@media (max-width: 640px) { .course-head { border-radius: var(--r-md); } }

/* ==========================================================================
   Les
   ========================================================================== */
.lesson-bar { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 24px auto 0; width: min(1040px, calc(100vw - 48px)); }
.lesson-bar-back { color: var(--ink); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.lesson-bar-back:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.lesson-bar-count { color: var(--laser); font-size: var(--t-label); font-weight: 750; letter-spacing: .14em; margin-left: auto; text-transform: uppercase; }
.lesson-bar-toggle { background: var(--black); border: 0; border-radius: 999px; color: var(--paper); cursor: pointer; font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; min-height: 44px; padding: 0 20px; }
.lesson-bar-toggle:hover { background: var(--charcoal); }

.lesson-media { border-radius: var(--r-lg); margin: 22px auto 0; overflow: hidden; width: min(1040px, calc(100vw - 48px)); }
.lesson-media :is(iframe, video) { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; width: 100%; }
.lesson-media audio { display: block; margin: 28px; width: calc(100% - 56px); }

.lesson-article { margin: 0 auto; max-width: calc(var(--reading) + 48px); padding: var(--space-tight) 24px 0; }
.lesson-title { font-family: var(--serif); font-size: var(--t-section); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 30px; }
.lesson-content { color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; }
.lesson-nav, .lesson-restricted-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin: 56px 0 0; }
.lesson-nav .button, .lesson-restricted-actions .button { font-size: 1.1rem; min-height: 66px; padding-inline: 34px; }
.lesson-nav-next, .lesson-nav-end { margin-left: auto; }

.lessons-panel {
	background: var(--paper);
	border-left: 1px solid rgba(143, 100, 43, .2);
	bottom: 0;
	box-shadow: -24px 0 60px rgba(17, 17, 17, .14);
	max-width: 100%;
	overflow-y: auto;
	padding: 26px 28px 40px;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform .24s var(--ease-out-quart);
	width: 420px;
	z-index: calc(var(--z-header) + 10);
}
.lessons-panel.is-open { transform: none; }
.lessons-panel-head { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 12px; }
.lessons-panel-course { font-family: var(--serif); font-size: var(--t-item); line-height: 1.2; margin: 0; }
.lessons-panel-close { background: transparent; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; min-height: 40px; padding: 0 16px; }
.lessons-panel-progress { color: var(--laser); font-size: var(--t-meta); margin: 0 0 18px; }
.lessons-panel .lesson-list-title { font-size: var(--t-small); }
@media (max-width: 640px) {
	.lesson-bar { flex-wrap: wrap; width: calc(100% - 24px); }
	.lesson-bar-count { margin-left: 0; order: 3; width: 100%; }
	.lesson-media { border-radius: var(--r-md); width: calc(100% - 24px); }
	.lessons-panel { padding: 20px 20px 32px; width: 100%; }
	.lesson-nav .button { font-size: 1.05rem; padding-inline: 24px; }
}
/* Een Architect-knop op /inloggen/ staat gecentreerd in een vak van 88px en liep op
   320px 3px buiten beeld. Op smalle schermen minder binnenruimte. */
@media (max-width: 400px) { .reading.is-architect .tcb-button-link { padding-inline: 22px !important; } }

/* ==========================================================================
   Inloggen: gesplitst scherm (patroon "SignInPage", 21st.dev), in de vormtaal
   van de site: links een zwevend zwart vlak met Jessica, rechts het formulier.
   ========================================================================== */
.login-split {
	align-items: stretch;
	display: grid;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin: 14px var(--gutter) 0;
	min-height: calc(100dvh - 140px);
}
.login-split-visual { border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: clamp(26px, 4vw, 56px); position: relative; }
.login-split-visual picture { inset: 0; position: absolute; }
.login-split-visual img { display: block; height: 100%; object-fit: cover; object-position: center 30%; opacity: .78; width: 100%; }
.login-split-visual::after { background: linear-gradient(180deg, transparent 45%, rgba(12, 12, 12, .82)); content: ""; inset: 0; position: absolute; }
.login-split-visual figcaption { color: var(--paper); font-family: var(--serif); font-size: var(--t-quote); line-height: 1.3; max-width: 22ch; position: relative; z-index: 1; }

.login-split-form { align-self: center; justify-self: center; max-width: 440px; padding: clamp(32px, 5vw, 64px) 0; width: 100%; }
.login-split-form .eyebrow { color: var(--gold-deep); }
.login-split-form h1 { font-family: var(--serif); font-size: var(--t-section); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.login-intro { color: var(--ink-soft); font-size: var(--t-body-lg); margin: 12px 0 34px; }
.login-form { display: grid; gap: 20px; }
.login-field { display: grid; gap: 8px; margin: 0; }
.login-field label { color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.login-field input {
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	color: var(--black);
	font: inherit;
	font-size: var(--t-body);
	min-height: 56px;
	padding: 0 18px;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}
.login-field input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(185, 134, 61, .18); outline: none; }
.login-password { display: block; position: relative; }
.login-password input { padding-right: 84px; }
.login-reveal { background: transparent; border: 0; color: var(--gold-deep); cursor: pointer; font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; padding: 8px 12px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.login-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; }
.login-remember { align-items: center; color: var(--ink); display: inline-flex; font-size: var(--t-small); gap: 8px; }
.login-remember input { accent-color: var(--gold-deep); height: 18px; margin: 0; width: 18px; }
.login-row a, .login-foot a { color: var(--gold-deep); font-size: var(--t-small); font-weight: 600; text-underline-offset: 3px; }
main .login-submit { font-size: 1.1rem; margin-top: 6px; min-height: 66px; width: 100%; }
.login-foot { border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--t-small); margin: 34px 0 0; padding-top: 22px; }

@media (max-width: 900px) {
	.login-split { grid-template-columns: 1fr; min-height: 0; }
	.login-split-visual { border-radius: var(--r-md); min-height: 220px; }
	.login-split-form { padding-top: 20px; }
}
.login-error { background: rgba(185, 134, 61, .1); border: 1px solid rgba(143, 100, 43, .35); border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-small); line-height: 1.5; margin: -14px 0 24px; padding: 14px 16px; }

/* ==========================================================================
   Foto's bij de trainingen (fotoserie Altea, 19-9-2026). Het focuspunt per foto
   staat inline als object-position, uit inc/academy-meta.php.
   ========================================================================== */
.course-photo { display: block; overflow: hidden; }
.course-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* Kaart bij "Jouw trainingen": foto bovenaan, tot aan de rand van de kaart. */
.my-course { overflow: hidden; }
.my-course-photo { aspect-ratio: 3 / 2; margin: -26px -26px 22px; }

/* Lijst met trainingen: kleine foto links, dan nummer, titel en zin. */
.course-index-item { grid-template-columns: 132px 56px minmax(0, 1fr) minmax(0, 1fr); }
.course-index-photo { aspect-ratio: 4 / 3; border-radius: var(--r-sm); grid-row: span 2; }
.course-index-number { grid-column: 2; }
.course-index-title, .course-index-meta { grid-column: 3; }
.course-index-line { grid-column: 4; }

/* Kop van de trainingspagina: tekst links, foto rechts. */
.course-head.has-photo { align-items: center; display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); }
.course-head-photo { aspect-ratio: 4 / 5; border-radius: var(--r-md); max-height: 520px; }

@media (max-width: 900px) {
	.course-index-item { grid-template-columns: 96px 40px minmax(0, 1fr); }
	.course-index-line { grid-column: 3; grid-row: auto; }
	.course-head.has-photo { grid-template-columns: minmax(0, 1fr); }
	.course-head-photo { aspect-ratio: 3 / 2; max-height: none; order: -1; }
}
@media (max-width: 640px) {
	.course-index-item { grid-template-columns: 84px minmax(0, 1fr); }
	.course-index-number { display: none; }
	.course-index-title, .course-index-meta, .course-index-line { grid-column: 2; }
}
/* Lange woorden in de cursustitel ("taxichauffeur") braken op 320px midden door. Een trap lager op de ladder. */
@media (max-width: 440px) { .course-head h1 { font-size: var(--t-section); } }
/* Op de smalste telefoons (320px) paste ook "verbondenheid" en "afhankelijkheid" niet: de kop schaalt mee met de
   schermbreedte. 76px is de ruimte naast de kop (marge en binnenrand), 8.3 de breedte van het langste woord per px letter. */
@media (max-width: 400px) { .course-head h1 { font-size: min(var(--t-section), calc((100vw - 76px) / 8.3)); } }
/* Zoals op jessicalarive.nl: op de telefoon lange woorden (14+ letters) echt afbreken, met streepje. */
@media (max-width: 640px) { .course-head h1, .home-intro h1 { hyphenate-limit-chars: 14 5 5; hyphens: auto; } }
/* Na wegklikken klapt de melding in tot 0 hoogte, maar de rand bleef als lijn onderin het scherm staan. */
#cookie-notice.cookie-notice-hidden { border: 0 !important; box-shadow: none; display: none !important; }

/* --- Etalage: homepage voor bezoekers (template-parts/etalage.php, goedgekeurd 2-10-2026) ------- */
.etalage-acties { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 30px; }
.etalage-acties .button { margin: 0; }
.eyebrow--donker { color: var(--gold-deep); }

/* KernPositie: tekst naast een grote foto op een zwevend licht vlak, met haar eigen zin als citaat. */
.etalage-kern { align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .25)); border: 1px solid rgba(143, 100, 43, .14); border-radius: var(--r-lg); box-shadow: 0 30px 70px -40px rgba(39, 29, 18, .35); display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin: var(--space-normal) auto 0; padding: clamp(18px, 2vw, 26px); width: var(--content); }
.etalage-kern-foto { aspect-ratio: 4 / 5; border-radius: calc(var(--r-lg) - 10px); display: block; overflow: hidden; }
.etalage-kern-foto img { display: block; height: 100%; object-fit: cover; object-position: 50% 30%; width: 100%; }
.etalage-kern-tekst { padding: clamp(8px, 2vw, 24px) clamp(8px, 3vw, 48px) clamp(8px, 2vw, 24px) 0; }
.etalage-kern h2, .etalage-workshops h2 { font-size: var(--t-section); line-height: 1.08; margin: 10px 0 0; max-width: 18ch; }
.etalage-kern h2 { margin-bottom: 22px; max-width: 16ch; }
.etalage-kern-tekst > p:not(.eyebrow) { color: var(--ink); font-size: var(--t-body-lg); line-height: 1.6; margin: 0 0 1em; max-width: var(--measure); }
.etalage-kern-citaat { border-top: 1px solid rgba(143, 100, 43, .3); margin: 30px 0 0; max-width: 30ch; padding-top: 24px; }
.etalage-kern-citaat p { color: var(--black); font: italic 400 var(--t-quote)/1.3 var(--serif); margin: 0; }
.etalage-kern-citaat footer { color: var(--gold-deep); font: 700 var(--t-label)/1 var(--sans); letter-spacing: .14em; margin-top: 16px; text-transform: uppercase; }

.etalage-workshops { margin: var(--space-normal) auto 0; width: var(--content); }
/* Workshops: kop met één zin links, vier kerncijfers rechts. */
.etalage-workshops-kop { align-items: end; display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.etalage-workshops-kop h2 { margin-bottom: 18px; }
.etalage-workshops-intro { color: var(--ink); font-size: var(--t-body-lg); line-height: 1.6; margin: 0; max-width: 40ch; }
.etalage-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.etalage-cijfer { border-top: 1px solid var(--rule); padding: 20px 20px 22px 0; }
.etalage-cijfer:nth-child(odd) { border-right: 1px solid var(--rule); }
.etalage-cijfer:nth-child(even) { padding-left: 24px; }
.etalage-cijfer:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.etalage-cijfer strong { color: var(--gold-deep); display: block; font: 400 clamp(40px, 4.2vw, 60px)/1 var(--serif); letter-spacing: -.03em; }
.etalage-cijfer span { color: var(--ink-soft); display: block; font-size: var(--t-small); line-height: 1.5; margin-top: 10px; }
@media (max-width: 900px) {
	.etalage-kern, .etalage-workshops-kop { grid-template-columns: minmax(0, 1fr); }
	.etalage-kern-tekst { padding: 4px 6px 10px; }
}
@media (max-width: 400px) {
	.etalage-cijfer { padding-right: 12px; }
	.etalage-cijfer:nth-child(even) { padding-left: 14px; }
}

.etalage-toegang { margin-bottom: var(--space-tight); margin-top: var(--space-normal); }
.etalage-toegang > p:not(.eyebrow) { margin-left: auto; margin-right: auto; max-width: 60ch; }
.etalage-trajecten { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px auto; max-width: 860px; }
.etalage-traject { align-content: start; border: 1px solid rgba(213, 180, 119, .35); border-radius: var(--r-md); color: var(--on-dark); display: grid; gap: 10px; padding: clamp(24px, 3vw, 34px); text-align: left; text-decoration: none; transition: border-color .2s; }
.etalage-traject:hover, .etalage-traject:focus-visible { border-color: var(--gold-light); }
.etalage-traject strong { color: var(--gold-light); font: 400 var(--t-item)/1.2 var(--serif); }
.etalage-traject-duur { color: var(--on-dark-soft); font: 600 var(--t-label)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.etalage-traject-kern { color: var(--white); font: 400 var(--t-body-lg)/1.45 var(--serif); }
.etalage-traject-voor { color: var(--on-dark-soft); font-size: var(--t-small); line-height: 1.55; }
.etalage-traject-meer { color: var(--gold-light); font: 500 var(--t-meta)/1.4 var(--sans); margin-top: 6px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 720px) {
	.etalage-trajecten { grid-template-columns: minmax(0, 1fr); }
}

/* Twaalf workshops als index met meelopende foto (variant B, gekozen 2-10-2026).
   Links een foto die meeloopt met het scrollen, rechts de genummerde lijst; de gekozen
   workshop toont zijn beschrijving. Op de telefoon: lijst met kleine foto en alle teksten open. */
.werk-index { align-items: start; display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: clamp(56px, 7vw, 96px); }
.werk-index-foto { aspect-ratio: 4 / 5; border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(18, 17, 16, .45); overflow: hidden; position: sticky; top: calc(var(--anchor-offset) + 8px); }
.werk-index-beeld { inset: 0; opacity: 0; position: absolute; transform: scale(1.04); transition: opacity .6s var(--ease-out-quart), transform 1.2s var(--ease-out-quart); }
.werk-index-beeld.is-actief { opacity: 1; transform: none; }
.werk-index-beeld img { display: block; height: 100%; object-fit: cover; width: 100%; }
.werk-index-label { background: rgba(12, 11, 10, .72); border: 1px solid rgba(213, 180, 119, .35); border-radius: 999px; bottom: 18px; color: var(--gold-light); font: 700 var(--t-label)/1 var(--sans); left: 18px; letter-spacing: .14em; padding: 10px 16px; position: absolute; text-transform: uppercase; z-index: 2; }
.werk-index-lijst { list-style: none; margin: 0; padding: 0; }
.werk-index-rij { border-top: 1px solid var(--rule); display: grid; gap: 4px 22px; grid-template-columns: 54px minmax(0, 1fr); padding: 22px 0; transition: padding-left .45s var(--ease-out-quart); }
.werk-index-rij:last-child { border-bottom: 1px solid var(--rule); }
.werk-index-thumb { display: none; }
.werk-index-nr { color: var(--gold); font: 400 var(--t-quote)/1 var(--serif); grid-row: span 2; transition: color .3s; }
.werk-index-rij h3 { font: 400 var(--t-item)/1.2 var(--serif); letter-spacing: -.01em; margin: 0; }
.werk-index-knop { background: none; border: 0; color: var(--black); cursor: pointer; font: inherit; letter-spacing: inherit; padding: 0; text-align: left; transition: color .3s; }
.werk-index-knop:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.werk-index-line { color: var(--ink-soft); display: grid; font-size: var(--t-small); grid-template-rows: 1fr; line-height: 1.6; margin: 8px 0 0; transition: grid-template-rows .5s var(--ease-out-quart), opacity .4s, margin .5s; }
.werk-index-line > span { overflow: hidden; }
/* Met script: alleen de gekozen workshop open, de rest ingeklapt en gedempt. */
.werk-index.is-interactief .werk-index-rij:not(.is-actief) .werk-index-nr { color: var(--rule); }
.werk-index.is-interactief .werk-index-rij:not(.is-actief) .werk-index-knop { color: var(--ink-soft); }
.werk-index.is-interactief .werk-index-rij:not(.is-actief) .werk-index-line { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.werk-index.is-interactief .werk-index-rij.is-actief { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) {
	.werk-index-beeld, .werk-index-rij, .werk-index-line { transition: none; }
}
@media (max-width: 900px) {
	.werk-index { grid-template-columns: minmax(0, 1fr); }
	.werk-index-foto { display: none; }
	.werk-index-rij, .werk-index.is-interactief .werk-index-rij.is-actief { gap: 4px 16px; grid-template-columns: 84px minmax(0, 1fr); padding-left: 0; }
	.werk-index-thumb { aspect-ratio: 1; border-radius: var(--r-sm); display: block; grid-row: span 2; overflow: hidden; }
	.werk-index-thumb img { display: block; height: 100%; object-fit: cover; width: 100%; }
	.werk-index-nr { display: none; }
	/* Op de telefoon alle teksten open: tikken om te lezen is een stap te veel. */
	.werk-index.is-interactief .werk-index-rij:not(.is-actief) .werk-index-knop { color: var(--black); }
	.werk-index.is-interactief .werk-index-rij:not(.is-actief) .werk-index-line { grid-template-rows: 1fr; margin-top: 8px; opacity: 1; }
	.werk-index-knop { cursor: default; }
}
@media (max-width: 400px) {
	.werk-index-rij, .werk-index.is-interactief .werk-index-rij.is-actief { grid-template-columns: 64px minmax(0, 1fr); }
	.werk-index-rij h3 { font-size: 19px; }
}

/* ==========================================================================
   Cookiemelding (4-10-2026), zelfde kaart als jessicalarive.nl: zwevend linksonder,
   weigeren even groot als toestaan. Meten pas na "Ja, dat mag" (inc/consent.php).
   ========================================================================== */
.consent-card {
	background: linear-gradient(145deg, #fffdfa, #f5f1ea);
	border: 1px solid rgba(143, 100, 43, .2);
	border-radius: var(--r-md);
	bottom: 22px;
	box-shadow: 0 24px 60px rgba(39, 29, 18, .18), inset 0 1px 0 rgba(255,255,255,.9);
	color: var(--ink);
	left: 22px;
	max-width: 420px;
	opacity: 0;
	padding: 26px 26px 20px;
	position: fixed;
	transform: translateY(12px);
	transition: opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart);
	z-index: 1000;
}
.consent-card.is-open { opacity: 1; transform: none; }
.consent-card p { font-size: var(--t-small); line-height: 1.55; margin: 0 0 16px; }
.consent-card .consent-card-title { color: #111; font-family: var(--serif); font-size: var(--t-item); line-height: 1.25; margin-bottom: 10px; }
.consent-card-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.consent-card .button { cursor: pointer; font-size: var(--t-small); min-height: 48px; padding: 0 16px; width: 100%; }
.consent-card .consent-no { background: transparent; border: 1.5px solid #111; color: #111; }
.consent-card .consent-no:is(:hover, :focus-visible) { background: rgba(17, 17, 17, .06); }
.consent-card-more { color: var(--gold-deep); display: inline-block; font-size: var(--t-meta); margin-top: 14px; }
@media (max-width: 640px) {
	.consent-card { bottom: 12px; left: 12px; max-width: none; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.consent-card { transform: none; transition: none; }
}

/* Geen toegang en systeempagina's van WishList (4-10-2026, inc/access.php) */
.restricted-note p { color: var(--ink-soft); }
.restricted-note a { color: inherit; }
.system-page .system-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.system-page .system-actions .button { text-decoration: none; }