/* LAB6 — generated by tools/build-css.py from assets/css/src/. Do not edit this file. */
/* ===== 00-fonts.css ===== */
/**
 * LAB6 — self-hosted fonts (OFL 1.1, see assets/fonts/OFL-*.txt).
 * One Archivo variable file serves two Divi font names:
 *   LAB6 Display = Archivo width 125 (clamped by the font-stretch descriptor)
 *   LAB6 Grotesk = Archivo width 100
 * LAB6 Sans = Schibsted Grotesk. latin-ext only downloads when such a glyph is used.
 * Generated from assets/fonts/fonts.json — edit that, not the rules by hand.
 */

@font-face {
	font-family: 'LAB6 Display';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 125%;
	font-display: swap;
	src: url('../fonts/archivo-normal-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: 'LAB6 Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-normal-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: 'LAB6 Display';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 125%;
	font-display: swap;
	src: url('../fonts/archivo-normal-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: 'LAB6 Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-normal-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: 'LAB6 Sans';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/schibsted-grotesk-italic-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: 'LAB6 Sans';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/schibsted-grotesk-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;
}

@font-face {
	font-family: 'LAB6 Sans';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/schibsted-grotesk-normal-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: 'LAB6 Sans';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/schibsted-grotesk-normal-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;
}

/* ===== 10-tokens.css ===== */
/**
 * LAB6 — technical tokens.
 *
 * Brand values live in Divi (Global Colors --gcid-lab6-*, Global Variables
 * --gvid-lab6-*, fonts --et_global_*); Divi prints them on :root. This file
 * only adds aliases and technical tokens that Divi has no store for.
 * Never hard-code a brand value here — point at the Divi variable.
 */
:root {
	--lab6-font-display: 'LAB6 Display', 'Arial Black', sans-serif;
	--lab6-font-grotesk: 'LAB6 Grotesk', 'Arial', sans-serif;
	--lab6-font-sans: 'LAB6 Sans', 'Arial', sans-serif;

	/* Focus indicator: LAB6 red passes 3:1 on paper, band and ink. */
	--lab6-focus-ring-color: var(--gcid-lab6-red);
	--lab6-focus-ring-width: 3px;
	--lab6-focus-ring-offset: 3px;

	/* Minimum interactive target size (WCAG 2.2 AA = 24px; we design 44–48px). */
	--lab6-target-min: 48px;

	/* Height of the sticky header, used for scroll-margin (WCAG 2.4.11). */
	--lab6-header-h: 64px;

	/* Motion. Components read these so reduced motion can zero them centrally. */
	--lab6-duration-fast: 150ms;
	--lab6-duration-base: 250ms;
	--lab6-duration-slow: 400ms;
	--lab6-stagger: 30ms; /* menu items arrive one after another */
	--lab6-easing-standard: cubic-bezier(0.2, 0, 0, 1);

	/* Arrow glyphs as masks (decorative: not announced by screen readers). */
	--lab6-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 6h17.2l-4.6-4.6L14 0l7 7-7 7-1.4-1.4L17.2 8H0z'/%3E%3C/svg%3E");
	--lab6-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h12v12h-2V4.4L2.4 15 1 13.6 11.6 3H3z'/%3E%3C/svg%3E");

	/* Stacking order for site-level layers. */
	--lab6-z-header: 100;
	--lab6-z-nav-panel: 9990;
	--lab6-z-skip-link: 100000;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--lab6-duration-fast: 0ms;
		--lab6-duration-base: 0ms;
		--lab6-duration-slow: 0ms;
		--lab6-stagger: 0ms;
	}
}

/* ===== 20-base.css ===== */
/**
 * LAB6 — base typography and elements.
 *
 * Sets the default type roles from DESIGN.md §4. Divi module settings made in
 * the Visual Builder are more specific and always win; that is intended.
 * Font families/colours come from Divi's customizer + global variables.
 */

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

body {
	font-size: var(--gvid-lab6-fs-body);
	line-height: 1.55;
	color: var(--gcid-lab6-ink);
	font-kerning: normal;
}

/* Divi sets a small body size on #page-container / .et_pb_text; align with the scale. */
#page-container .et_pb_text,
#page-container .et_pb_text p {
	font-size: inherit;
	line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
	padding-bottom: 0;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

h1,
h2 {
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.01em;
	hyphens: manual; /* big Display lines break between words, never "ge-beurde" */
}

h1 {
	font-size: var(--gvid-lab6-fs-h1);
}

h2 {
	font-size: var(--gvid-lab6-fs-h2);
}

h3,
h4,
h5,
h6 {
	font-family: var(--lab6-font-grotesk);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

h3 {
	font-size: var(--gvid-lab6-fs-h3);
}

h4 {
	font-size: 1.125em;
}

p {
	text-wrap: pretty;
}

/* Body links: underline, never colour-only (WCAG 1.4.1). */
.et_pb_text a:not(.et_pb_button),
.lab6-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--lab6-duration-fast) var(--lab6-easing-standard);
}

.et_pb_text a:not(.et_pb_button):hover,
.lab6-prose a:hover {
	color: var(--gcid-lab6-red);
}

/* Links inside dark (ink) sections: red-bright on hover keeps contrast. */
.lab6-mode-screening .et_pb_text a:not(.et_pb_button):hover {
	color: var(--gcid-lab6-red-bright);
}

::selection {
	background: var(--gcid-lab6-red);
	color: #fff;
}

img {
	height: auto;
}

/* Anchors and focused elements are never hidden below the sticky header. */
:target,
[id] {
	scroll-margin-top: calc(var(--lab6-header-h) + 1rem);
}

:focus-visible {
	scroll-margin-top: calc(var(--lab6-header-h) + 1rem);
}

/* Hard edges: the system has one radius (0). Divi buttons inherit it from the
   customizer; images get it here. */
.et_pb_image_wrap,
.et_pb_image img {
	border-radius: var(--gvid-lab6-radius);
}

/* ===== 30-accessibility.css ===== */
/**
 * LAB6 — accessibility baseline.
 *
 * Low specificity on purpose: nothing here should fight Divi module settings.
 * The skip link markup is output by lab6-core (accessibility.php).
 */

/* Visually hidden, still announced (WordPress core class name). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link: hidden until focused, then visible top-left. */
.lab6-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: var(--lab6-z-skip-link);
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: #fff;
	color: #000;
	font-weight: 600;
	text-decoration: underline;
	outline: var(--lab6-focus-ring-width) solid var(--lab6-focus-ring-color);
	outline-offset: 2px;
}

/* Visible keyboard focus everywhere; mouse clicks keep the native behaviour. */
:focus-visible {
	outline: var(--lab6-focus-ring-width) solid var(--lab6-focus-ring-color);
	outline-offset: var(--lab6-focus-ring-offset);
}

/* Respect reduced motion on the front end (not inside the Visual Builder UI). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	body:not(.et-fb) *,
	body:not(.et-fb) *::before,
	body:not(.et-fb) *::after {
		/* !important is deliberate: this must win over any animation source. */
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== 40-navigation.css ===== */
/**
 * LAB6 — navigation: the programme guide ([lab6_nav], inc/navigation.php + js/modules/nav.js).
 * Header shows only MENU ■ at every breakpoint. Without JS that control is a link to the
 * footer navigation; with JS it is a <button> that opens the fullscreen ink panel.
 * Motion = "editorial cut": the panel wipes down, items arrive staggered (DESIGN.md §13).
 */

.lab6-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--lab6-font-grotesk);
}

/* ---------- MENU control (fallback link + button share one look) ---------- */
.lab6-nav__fallback,
.lab6-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: var(--lab6-target-min);
	min-width: var(--lab6-target-min);
	padding: 0 0 0 0.75rem;
	border: 0;
	background: transparent;
	color: var(--gcid-lab6-ink);
	font: 700 0.875rem/1 var(--lab6-font-grotesk);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.lab6-nav__toggle {
	display: none;
	position: relative;
	z-index: calc(var(--lab6-z-nav-panel) + 1);
}

.lab6-nav.is-enhanced .lab6-nav__fallback {
	display: none;
}

.lab6-nav.is-enhanced .lab6-nav__toggle {
	display: inline-flex;
}

/* The red square: the block of the logo's 6. */
.lab6-nav__mark {
	display: block;
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background: var(--gcid-lab6-red);
	transition: transform var(--lab6-duration-base) var(--lab6-easing-standard);
}

.lab6-nav__toggle:hover .lab6-nav__mark,
.lab6-nav__fallback:hover .lab6-nav__mark {
	transform: scale(1.25);
}

.lab6-nav.is-open .lab6-nav__toggle {
	color: #fff;
}

.lab6-nav.is-open .lab6-nav__mark {
	transform: rotate(45deg);
}

/* ---------- Panel ---------- */
.lab6-nav__panel {
	display: none;
}

.lab6-nav.is-enhanced .lab6-nav__panel {
	display: grid;
	grid-template-rows: var(--lab6-header-h) 1fr auto;
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	z-index: var(--lab6-z-nav-panel);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--gcid-lab6-ink);
	color: #fff;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
}

.lab6-nav.is-open .lab6-nav__panel {
	visibility: visible;
	clip-path: inset(0);
	transition: clip-path var(--lab6-duration-slow) var(--lab6-easing-standard);
}

.lab6-nav__bar,
.lab6-nav__body,
.lab6-nav__foot {
	width: min(100% - 2 * var(--gvid-lab6-gutter), var(--gvid-lab6-wide));
	margin-inline: auto;
}

.lab6-nav__bar {
	display: flex;
	align-items: center;
}

.lab6-nav__logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--lab6-target-min);
}

.lab6-nav__logo img {
	display: block;
	width: auto;
	height: clamp(26px, 2.4vw, 34px);
}

.lab6-nav__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	gap: var(--gvid-lab6-space-m);
	padding-block: var(--gvid-lab6-space-m);
}

/* ---------- Numbered list ---------- */
ol.lab6-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--gvid-lab6-hairline) solid rgba(255, 255, 255, 0.22);
}

.lab6-nav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--gvid-lab6-hairline) solid rgba(255, 255, 255, 0.22);
}

.lab6-nav__list a {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	align-items: baseline;
	min-height: var(--lab6-target-min);
	padding: 0.35rem 0;
	color: #fff;
	text-decoration: none;
}

.lab6-nav__no {
	font: 700 var(--gvid-lab6-fs-label) / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	color: var(--gcid-lab6-muted-inverse);
	transition: color var(--lab6-duration-fast);
}

.lab6-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font: 800 clamp(1.75rem, 1rem + 4.6vw, 2.75rem) / 1.05 var(--lab6-font-grotesk);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	transition: transform var(--lab6-duration-fast) var(--lab6-easing-standard), color var(--lab6-duration-fast);
}

.lab6-nav__list a:hover .lab6-nav__label,
.lab6-nav__list a:focus-visible .lab6-nav__label {
	transform: translateX(0.12em);
}

.lab6-nav__list a:hover .lab6-nav__no,
.lab6-nav__list a:focus-visible .lab6-nav__no,
.lab6-nav__list a[aria-current="page"] .lab6-nav__no {
	color: var(--gcid-lab6-red-bright);
}

/* Current page: the red square after the label. */
.lab6-nav__list a[aria-current="page"] .lab6-nav__label::after {
	content: "";
	width: 0.32em;
	height: 0.32em;
	background: var(--gcid-lab6-red);
}

.lab6-nav__list a:focus-visible {
	outline-offset: 2px;
}

/* Items arrive with a short stagger once the panel is open. */
.lab6-nav.is-open .lab6-nav__list li {
	animation: lab6-nav-in var(--lab6-duration-base) var(--lab6-easing-standard) both;
	animation-delay: calc(120ms + var(--i, 0) * var(--lab6-stagger));
}

@keyframes lab6-nav-in {
	from {
		opacity: 0;
		transform: translateY(0.35em);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Preview monitor (desktop only) ---------- */
.lab6-nav__monitor {
	display: none;
}

.lab6-nav__monitor-label,
.lab6-nav__feature-kicker,
.lab6-nav__meta,
.lab6-channels--nav a {
	font: 700 var(--gvid-lab6-fs-label) / 1.2 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lab6-nav__monitor-label {
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--gcid-lab6-muted-inverse);
}

.lab6-nav__screen {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #1c1c1c;
}

.lab6-nav__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--lab6-duration-fast) linear;
}

.lab6-nav__screen img.is-loaded {
	opacity: 1;
}

.lab6-nav__feature {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 1rem;
	padding: 0.25rem 0;
	color: #fff;
	text-decoration: none;
}

.lab6-nav__feature-kicker {
	color: var(--gcid-lab6-red-bright);
}

.lab6-nav__feature-title {
	font: 700 1.125rem/1.25 var(--lab6-font-grotesk);
}

.lab6-nav__feature-title::after {
	content: " ↗";
	content: " ↗" / "";
	display: inline-block;
	transition: transform var(--lab6-duration-fast) var(--lab6-easing-standard);
}

.lab6-nav__feature:hover .lab6-nav__feature-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.lab6-nav__feature:hover .lab6-nav__feature-title::after {
	transform: translate(3px, -3px);
}

/* ---------- Foot: channels + meta ---------- */
.lab6-nav__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding: 0.75rem 0 1.25rem;
	border-top: var(--gvid-lab6-hairline) solid rgba(255, 255, 255, 0.22);
}

ul.lab6-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-channels li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-channels--nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	text-decoration: none;
}

.lab6-channels--nav a:hover {
	color: var(--gcid-lab6-red-bright);
}

.lab6-nav__meta {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	color: var(--gcid-lab6-muted-inverse);
}

/* ---------- ≥ 768px: bigger guide ---------- */
@media (width >= 768px) {
	.lab6-nav__list a {
		grid-template-columns: 4rem minmax(0, 1fr);
		padding: 0.5rem 0;
	}

	/* Longest item (SAMENWERKEN ≈ 10.5em) must fit the list column. */
	.lab6-nav__label {
		font-family: var(--lab6-font-display);
		font-size: min(5rem, calc((92vw - 4rem) / 11), 8.5vh);
		line-height: 1;
		letter-spacing: -0.015em;
	}
}

/* ---------- ≥ 1200px: list + preview monitor ---------- */
@media (width >= 1200px) {
	.lab6-nav__body {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
		align-items: center;
		column-gap: clamp(3rem, 6vw, 7rem);
	}

	.lab6-nav__monitor {
		display: block;
	}

	.lab6-nav__label {
		font-size: min(4.75rem, calc((min(100vw, 1440px) - 8rem) * 0.55 / 11), 8.5vh);
	}
}

/* Short viewports (landscape phones, small laptops): tighter list. */
@media (height <= 560px) {
	.lab6-nav__label {
		font-size: clamp(1.5rem, 6vh, 2.5rem);
	}
}

/* Scroll lock while the panel is open. On body only: it propagates to the viewport, so the
   sticky header keeps its position (overflow on <html> shifts it by the admin-bar margin). */
html.lab6-nav-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.lab6-nav.is-open .lab6-nav__list li {
		animation: none;
	}

	/* The global reduced-motion rule gives every element a 0.01ms transition on all
	   properties; for `visibility` that would keep the links hidden (unfocusable) for a
	   frame when the panel opens. Nothing in the panel transitions under reduced motion. */
	.lab6-nav__panel,
	.lab6-nav__panel * {
		transition-property: none;
	}
}

/* ---------- Footer nav ---------- */
.lab6-footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-footer-nav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-footer-nav__list a {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	color: inherit;
	font-family: var(--lab6-font-grotesk);
	font-weight: 700;
	text-decoration: none;
}

.lab6-footer-nav__list a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ===== 50-components.css ===== */
/**
 * LAB6 — components, Broadcast Editorial (DESIGN.md). Layout around them is native Divi.
 * Class names are role-based (lab6-<component>), never page-specific.
 */

/* ---------- Section modes ---------- */
/* Screening: Ink band for watch/listen moments. The background itself is set in Divi
   (section background = LAB6 Ink); this class only flips text colours. */
.lab6-mode-screening,
.lab6-mode-screening h1,
.lab6-mode-screening h2,
.lab6-mode-screening h3,
.lab6-mode-screening h4,
.lab6-mode-screening p,
.lab6-mode-screening li,
.lab6-mode-screening dt,
.lab6-mode-screening dd {
	color: #fff;
}

.lab6-mode-screening .lab6-muted,
.lab6-mode-screening .lab6-muted p,
.lab6-mode-screening .lab6-tile__info,
.lab6-mode-screening .lab6-tile__text,
.lab6-mode-screening .lab6-entry__text,
.lab6-mode-screening .lab6-entry__meta,
.lab6-mode-screening .lab6-wall__meta {
	color: var(--gcid-lab6-muted-inverse);
}

/* The one red band on the site (home call to join). */
.lab6-mode-red,
.lab6-mode-red h1,
.lab6-mode-red h2,
.lab6-mode-red h3,
.lab6-mode-red p {
	color: #fff;
}

.lab6-mode-red :focus-visible {
	outline-color: #fff;
}

/* ---------- Text roles ---------- */
.lab6-display h1,
.lab6-display h2,
.lab6-display .et_pb_heading_container > * {
	font-family: var(--lab6-font-display);
	font-size: var(--gvid-lab6-fs-display);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

/* Mega: the poster-size statement (home, footer). Size is set natively in Divi. */
.lab6-mega h1,
.lab6-mega h2,
.lab6-mega .et_pb_heading_container > * {
	font-family: var(--lab6-font-display);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	hyphens: manual;
}

.lab6-lead,
.lab6-lead p {
	font-size: var(--gvid-lab6-fs-lead);
	line-height: 1.38;
	max-width: 38ch;
}

.lab6-measure {
	max-width: var(--gvid-lab6-measure);
}

.lab6-muted,
.lab6-muted p {
	color: var(--gcid-lab6-muted);
}

/* The red block from the logo, used on one word inside a statement. */
.lab6-mark {
	display: inline-block;
	padding: 0 0.1em;
	background: var(--gcid-lab6-red);
	color: #fff;
}

/* ---------- Metadata: slate line, section marker, slate ---------- */
/* Slate line: opens every page — "■ LAB6 / PRODUCTIES / 16". */
.lab6-slateline,
.lab6-kicker,
.lab6-meta {
	font: 700 var(--gvid-lab6-fs-label) / 1.3 var(--lab6-font-grotesk);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lab6-slateline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0;
	padding: 0;
}

.lab6-slateline__mark {
	display: block;
	flex: none;
	width: 0.85em;
	height: 0.85em;
	background: var(--gcid-lab6-red);
}

.lab6-slateline__end {
	margin-left: auto;
	color: var(--gcid-lab6-muted);
}

.lab6-mode-screening .lab6-slateline__end {
	color: var(--gcid-lab6-muted-inverse);
}

/* Phones: one clean line — the square stays beside the label, the right-hand part goes. */
@media (width <= 600px) {
	.lab6-slateline {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.lab6-slateline__mark {
		margin-top: 0.2em;
	}

	.lab6-slateline__end {
		display: none;
	}
}

/* Section marker: "02 — Uit het archief" on a hairline. */
.lab6-kicker {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	padding: 0.8rem 0 0;
	border-top: var(--gvid-lab6-hairline) solid currentColor;
}

.lab6-kicker__no {
	color: var(--gcid-lab6-red);
	min-width: 1.75em;
}

.lab6-mode-screening .lab6-kicker__no {
	color: var(--gcid-lab6-red-bright);
}

.lab6-mode-red .lab6-kicker__no {
	color: #fff;
}

/* Format slate: white label on a red block (formats only). */
.lab6-slate {
	display: inline-block;
	padding: 0.3em 0.5em 0.25em;
	background: var(--gcid-lab6-red);
	color: #fff;
	font: 700 var(--gvid-lab6-fs-label) / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Buttons (Divi button module) ----------
   Primary = customizer default (red, white text). Secondary = .lab6-button-ghost (native
   outline settings). Text link = .lab6-button-text. All carry a decorative arrow (CSS mask,
   so screen readers don't announce it). */
body .et_pb_button.et_pb_button {
	min-height: var(--lab6-target-min);
	display: inline-flex;
	flex-direction: row; /* Divi's .et_flex_module stacks children in a column */
	align-items: center;
	gap: 0.7em;
	letter-spacing: 0.08em;
}

/* Buttons carry no Divi icon (customizer: no icon); the arrow beats `.et_button_no_icon .et_pb_button::after`. */
body .et_pb_button.et_pb_button::after {
	content: "";
	display: inline-block;
	position: static;
	flex: none;
	width: 1.1em;
	height: 0.75em;
	margin: 0;
	opacity: 1;
	background: currentColor;
	-webkit-mask: var(--lab6-arrow) no-repeat center / contain;
	mask: var(--lab6-arrow) no-repeat center / contain;
	transform: none;
	transition: transform var(--lab6-duration-fast) var(--lab6-easing-standard);
}

body .et_pb_button.et_pb_button:hover::after {
	transform: translateX(4px);
}

.lab6-button-text .et_pb_button,
.lab6-button-text.et_pb_button {
	min-height: var(--lab6-target-min);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

@media (width <= 600px) {
	.lab6-full-mobile .et_pb_button,
	.lab6-full-mobile.et_pb_button {
		width: 100%;
		justify-content: space-between;
	}
}

/* ---------- Editorial index (archive) ---------- */
ul.lab6-entries {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-entry {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-mode-screening .lab6-entry {
	border-bottom-color: #333;
}

.lab6-entry__inner {
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) 2rem;
	grid-template-areas:
		"media media media"
		"no body arrow";
	gap: 1rem 0.75rem;
	padding: 1.5rem 0;
}

.lab6-entry__no {
	grid-area: no;
	font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) / 1 var(--lab6-font-display);
	letter-spacing: -0.02em;
	transition: color var(--lab6-duration-fast);
}

.lab6-entry__body {
	grid-area: body;
	min-width: 0;
}

.lab6-entry__meta,
.lab6-wall__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0 0 0.6rem;
	padding: 0;
	color: var(--gcid-lab6-muted);
	font: 700 var(--gvid-lab6-fs-label) / 1.2 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lab6-entry__title,
.lab6-wall__title {
	margin: 0;
	padding: 0;
	font-family: var(--lab6-font-grotesk);
	font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.lab6-entry__link,
.lab6-wall__link {
	color: inherit;
	text-decoration: none;
}

/* One link per item; the whole item is the click target. */
.lab6-entry__link::after,
.lab6-wall__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lab6-entry__link:focus-visible,
.lab6-wall__link:focus-visible {
	outline: none;
}

.lab6-entry__inner:focus-within,
.lab6-wall__inner:focus-within {
	outline: var(--lab6-focus-ring-width) solid var(--lab6-focus-ring-color);
	outline-offset: var(--lab6-focus-ring-offset);
}

.lab6-entry__text {
	display: -webkit-box;
	margin: 0.6rem 0 0;
	padding: 0;
	overflow: hidden;
	color: var(--gcid-lab6-muted);
	font-size: var(--gvid-lab6-fs-small);
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 60ch;
}

.lab6-entry__arrow {
	grid-area: arrow;
	justify-self: end;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: var(--lab6-arrow-ne) no-repeat center / contain;
	mask: var(--lab6-arrow-ne) no-repeat center / contain;
	transition: transform var(--lab6-duration-fast) var(--lab6-easing-standard), background-color var(--lab6-duration-fast);
}

.lab6-entry__media,
.lab6-wall__media {
	overflow: hidden;
	background: var(--gcid-lab6-ink);
}

.lab6-entry__media {
	grid-area: media;
	aspect-ratio: 3 / 2;
}

.lab6-entry__media img,
.lab6-wall__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lab6-duration-slow) var(--lab6-easing-standard);
}

.lab6-entry__inner:hover .lab6-entry__no,
.lab6-entry__inner:focus-within .lab6-entry__no,
.lab6-wall__inner:hover .lab6-wall__no,
.lab6-wall__inner:focus-within .lab6-wall__no {
	color: var(--gcid-lab6-red);
}

.lab6-mode-screening .lab6-entry__inner:hover .lab6-entry__no,
.lab6-mode-screening .lab6-entry__inner:focus-within .lab6-entry__no {
	color: var(--gcid-lab6-red-bright);
}

.lab6-entry__inner:hover .lab6-entry__media img,
.lab6-wall__inner:hover .lab6-wall__media img {
	transform: scale(1.04);
}

.lab6-entry__inner:hover .lab6-entry__arrow {
	transform: translate(3px, -3px);
	background-color: var(--gcid-lab6-red);
}

.lab6-mode-screening .lab6-entry__inner:hover .lab6-entry__arrow {
	background-color: var(--gcid-lab6-red-bright);
}

.lab6-entry__inner:hover .lab6-entry__link,
.lab6-wall__inner:hover .lab6-wall__link {
	text-decoration: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.14em;
}

@media (width >= 768px) {
	.lab6-entry__inner {
		grid-template-columns: 4.5rem minmax(0, 1fr) minmax(12rem, 30%) 2rem;
		grid-template-areas: "no body media arrow";
		align-items: start;
		column-gap: clamp(1rem, 2.5vw, 2.5rem);
		padding: 1.75rem 0;
	}
}

/* ---------- Media wall (home, 404, related) ---------- */
ul.lab6-wall {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 4.5rem) var(--gvid-lab6-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-wall__item {
	grid-column: span 12;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-wall__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.lab6-wall__media {
	aspect-ratio: 16 / 9;
}

.lab6-wall__meta {
	margin: 0;
}

.lab6-wall__no {
	color: var(--gcid-lab6-ink);
	transition: color var(--lab6-duration-fast);
}

.lab6-mode-screening .lab6-wall__no {
	color: #fff;
}

@media (width >= 768px) {
	.lab6-wall__item {
		grid-column: span 6;
	}

	.lab6-wall--5 .lab6-wall__item:first-child,
	.lab6-wall--3 .lab6-wall__item:first-child {
		grid-column: span 12;
	}
}

@media (width >= 1200px) {
	/* 5: large + offset, then a row of three. */
	.lab6-wall--5 .lab6-wall__item:nth-child(1) {
		grid-column: 1 / span 7;
	}

	.lab6-wall--5 .lab6-wall__item:nth-child(2) {
		grid-column: 9 / span 4;
		align-self: end;
	}

	.lab6-wall--5 .lab6-wall__item:nth-child(n + 3),
	.lab6-wall--3 .lab6-wall__item,
	.lab6-wall--3 .lab6-wall__item:first-child {
		grid-column: span 4;
	}

	.lab6-wall--5 .lab6-wall__item:nth-child(1) .lab6-wall__title {
		font-family: var(--lab6-font-display);
		font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem);
		line-height: 1;
	}
}

/* ---------- Legacy tiles (kept for [lab6_producties] without weergave) ---------- */
ul.lab6-tiles {
	display: grid;
	grid-template-columns: repeat(var(--lab6-tile-cols, 3), minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem) var(--gvid-lab6-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-tiles--2 { --lab6-tile-cols: 2; }
.lab6-tiles--3 { --lab6-tile-cols: 3; }
.lab6-tiles--4 { --lab6-tile-cols: 4; }

.lab6-tile__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lab6-tile__media {
	order: -1;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gcid-lab6-ink);
}

.lab6-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lab6-tile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0;
	padding: 0;
	font: 700 var(--gvid-lab6-fs-label) / 1.2 var(--lab6-font-grotesk);
	letter-spacing: 0.06em;
}

.lab6-tile__info {
	color: var(--gcid-lab6-muted);
	text-transform: uppercase;
}

.lab6-tile__title {
	margin: 0;
	font: 800 clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem) / 1.12 var(--lab6-font-grotesk);
}

.lab6-tile__link {
	color: inherit;
	text-decoration: none;
}

.lab6-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (width <= 980px) {
	.lab6-tiles--3,
	.lab6-tiles--4 { --lab6-tile-cols: 2; }
}

@media (width <= 600px) {
	.lab6-tiles.lab6-tiles { --lab6-tile-cols: 1; }
}

/* ---------- Player ---------- */
.lab6-player {
	margin: 0;
}

.lab6-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gcid-lab6-ink);
}

.lab6-player__poster,
.lab6-player__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.lab6-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	padding: clamp(1rem, 3vw, 2rem);
	color: #fff;
	text-decoration: none;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0) 55%);
}

.lab6-player__icon {
	flex: none;
	position: relative;
	width: clamp(3.5rem, 7vw, 5.5rem);
	aspect-ratio: 1;
	background: var(--gcid-lab6-red);
	transition: background-color var(--lab6-duration-fast), transform var(--lab6-duration-fast) var(--lab6-easing-standard);
}

.lab6-player__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.75em 0 0.75em 1.25em;
	border-color: transparent transparent transparent #fff;
	font-size: clamp(0.85rem, 1.4vw, 1.25rem);
}

.lab6-player__label {
	align-self: flex-end;
	margin-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) / 2 - 0.6em);
	font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.25rem) / 1.2 var(--lab6-font-grotesk);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.lab6-player__play:hover .lab6-player__icon,
.lab6-player__play:focus-visible .lab6-player__icon {
	background: var(--gcid-lab6-ink);
	outline: 3px solid #fff;
}

.lab6-player__note {
	margin-top: 0.75rem;
	color: var(--gcid-lab6-muted);
	font-size: var(--gvid-lab6-fs-label);
}

.lab6-mode-screening .lab6-player__note {
	color: var(--gcid-lab6-muted-inverse);
}

/* ---------- Facts (production info) and external links ---------- */
.lab6-facts {
	margin: 0;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-facts__row {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) 3fr;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-facts dt {
	font: 700 var(--gvid-lab6-fs-label) / 1.5 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lab6-facts dd {
	margin: 0;
}

.lab6-facts dd ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.lab6-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.lab6-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-links__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: var(--lab6-target-min);
	color: var(--gcid-lab6-ink);
	font: 700 0.9375rem / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.lab6-links__item::after {
	content: "";
	width: 0.85em;
	height: 0.85em;
	background: currentColor;
	-webkit-mask: var(--lab6-arrow-ne) no-repeat center / contain;
	mask: var(--lab6-arrow-ne) no-repeat center / contain;
	transition: transform var(--lab6-duration-fast) var(--lab6-easing-standard);
}

.lab6-links__item:hover {
	color: var(--gcid-lab6-red);
}

.lab6-links__item:hover::after {
	transform: translate(2px, -2px);
}

@media (width <= 600px) {
	.lab6-facts__row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* ---------- Index list (steps / timeline) ---------- */
ol.lab6-index {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lab6-index;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-index li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1rem;
	padding: 1.5rem 0;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
	counter-increment: lab6-index;
}

.lab6-index li::before {
	content: counter(lab6-index, decimal-leading-zero);
	white-space: nowrap;
	font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) / 1 var(--lab6-font-display);
	color: var(--gcid-lab6-red);
}

.lab6-index li strong {
	display: block;
	margin-bottom: 0.25rem;
	font: 800 var(--gvid-lab6-fs-h3) / 1.15 var(--lab6-font-grotesk);
}

.lab6-mode-screening .lab6-index li::before {
	color: var(--gcid-lab6-red-bright);
}

.lab6-mode-screening .lab6-index li {
	border-bottom-color: #333;
}

/* Timeline: big years in Display. */
.lab6-index--timeline li::before {
	content: attr(data-year);
	font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem);
	line-height: 0.85;
	letter-spacing: -0.02em;
}

.lab6-index--timeline li {
	grid-template-columns: clamp(7rem, 5rem + 9vw, 14rem) 1fr;
	padding: 1.75rem 0;
}

.lab6-index--timeline a {
	color: inherit;
}

@media (width <= 600px) {
	.lab6-index li,
	.lab6-index--timeline li {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* ---------- Ticker (verified facts, see docs/LAB6-RESEARCH.md) ---------- */
dl.lab6-ticker {
	display: grid;
	margin: 0;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-ticker > div {
	display: grid;
	gap: 0.5rem;
	padding: 1rem 0 1.1rem;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-ticker dt {
	font: 800 clamp(2.25rem, 1.5rem + 2vw, 3.5rem) / 0.9 var(--lab6-font-display);
	letter-spacing: -0.03em;
}

.lab6-ticker dd {
	margin: 0;
	font: 700 var(--gvid-lab6-fs-label) / 1.35 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Tablet: one row of three. */
@media (width >= 768px) and (width < 1200px) {
	dl.lab6-ticker {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--gvid-lab6-space-m);
	}

	.lab6-ticker > div {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		border-bottom: 0;
	}
}

/* ---------- Manifesto (big words, numbered, alternating) ---------- */
ol.lab6-manifesto {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-manifesto li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	grid-template-areas:
		"no word"
		". text";
	align-items: start;
	gap: 0.75rem 0.75rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0;
	list-style: none;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-mode-screening .lab6-manifesto li {
	border-bottom-color: #333;
}

.lab6-manifesto__no {
	grid-area: no;
	padding-top: 0.45em;
	color: var(--gcid-lab6-red);
	font: 700 var(--gvid-lab6-fs-label) / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
}

.lab6-mode-screening .lab6-manifesto__no {
	color: var(--gcid-lab6-red-bright);
}

/* Longest word (VERTELLEN, 9 letters ≈ 8.2em) must fit the row at every width. */
.lab6-manifesto__word {
	grid-area: word;
	display: block;
	font: 800 min(var(--gvid-lab6-fs-display), calc((100vw - 6rem) / 9)) / 0.9 var(--lab6-font-display);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	hyphens: manual;
	overflow-wrap: normal;
}

.lab6-manifesto__text {
	grid-area: text;
	max-width: 44ch;
	margin: 0;
}

@media (width >= 768px) {
	.lab6-manifesto li {
		grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"no word word"
			". . text";
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}

	.lab6-manifesto__word {
		font-size: min(var(--gvid-lab6-fs-display), calc((100vw - 14rem) / 9.4));
	}
}

@media (width >= 1200px) {
	/* Alternate: every second word steps in, like a contact sheet. */
	.lab6-manifesto li:nth-child(even) .lab6-manifesto__word {
		padding-left: 14%;
	}

	.lab6-manifesto li:nth-child(even) {
		grid-template-areas:
			"no word word"
			". text .";
	}
}

/* ---------- Numbered statements (Doe mee "Dit is voor jou als je…") ---------- */
ol.lab6-statements {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lab6-st;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-statements li {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0.75rem;
	padding: 1.1rem 0;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
	counter-increment: lab6-st;
	font: 800 clamp(1.25rem, 1rem + 1vw, 1.875rem) / 1.2 var(--lab6-font-grotesk);
}

.lab6-statements li::before {
	content: counter(lab6-st, decimal-leading-zero);
	padding-top: 0.35em;
	color: var(--gcid-lab6-red);
	font: 700 var(--gvid-lab6-fs-label) / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
}

/* ---------- Format list (slate + line) ---------- */
dl.lab6-formats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--gvid-lab6-space-m);
	margin: 0;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

.lab6-formats > div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	align-items: baseline;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-formats dd {
	margin: 0;
	font-size: var(--gvid-lab6-fs-body);
}

dl.lab6-formats--single {
	grid-template-columns: 1fr;
}

.lab6-formats--single > div {
	grid-template-columns: 11.5rem 1fr;
}

@media (width <= 768px) {
	dl.lab6-formats {
		grid-template-columns: 1fr;
	}
}

@media (width <= 430px) {
	.lab6-formats > div {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* Large facts list (Samenwerken: vormen). */
.lab6-facts--large .lab6-facts__row {
	grid-template-columns: minmax(10rem, 1fr) 3fr;
	padding: 1.4rem 0;
}

.lab6-facts--large dt {
	font: 800 var(--gvid-lab6-fs-h3) / 1.15 var(--lab6-font-grotesk);
	letter-spacing: 0;
	text-transform: none;
}

.lab6-facts--large dd {
	font-size: var(--gvid-lab6-fs-body);
	align-self: center;
}

/* ---------- Production template ---------- */
.lab6-production-title {
	margin: clamp(1rem, 2vw, 1.75rem) 0 0;
	font-family: var(--lab6-font-display);
	font-size: var(--gvid-lab6-fs-h1);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.015em;
	max-width: 18ch;
}

.lab6-production-intro {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	font-size: var(--gvid-lab6-fs-lead);
	line-height: 1.38;
	max-width: 46ch;
}

/* ---------- Header (Theme Builder global header, class lab6-header) ---------- */
/* Sticky on the Theme Builder wrapper (a sticky element can't leave its parent). */
header.et-l--header:has(.lab6-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--lab6-z-header);
}

.lab6-header {
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-ink);
}

.lab6-header__descriptor,
.lab6-header__descriptor p {
	margin: 0;
	text-align: center;
	font: 700 var(--gvid-lab6-fs-label) / 1.2 var(--lab6-font-grotesk);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lab6-logo img {
	display: block;
	width: auto;
	height: clamp(26px, 2.4vw, 34px);
}

/* ---------- Home hero ---------- */
.lab6-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 92% 45%;
}

@media (width >= 601px) {
	.lab6-hero-media img {
		aspect-ratio: 16 / 9;
		object-position: 60% 45%;
	}
}

.lab6-media-caption,
.lab6-media-caption p {
	margin: 0;
	color: var(--gcid-lab6-muted);
	font: 700 var(--gvid-lab6-fs-label) / 1.3 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Footer (colophon) ---------- */
.lab6-footer a {
	color: #fff;
}

.lab6-footer a:hover {
	color: var(--gcid-lab6-red-bright);
}

.lab6-footer .lab6-kicker {
	border-top-color: rgba(255, 255, 255, 0.35);
}

.lab6-footer .lab6-plainlist a {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	text-decoration: none;
}

.lab6-footer .lab6-plainlist a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lab6-footer .lab6-plainlist li {
	padding: 0;
}

ul.lab6-channels.lab6-plainlist {
	flex-direction: column;
	gap: 0;
}

ul.lab6-channels.lab6-plainlist a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: var(--lab6-font-grotesk);
	font-weight: 700;
	text-decoration: none;
}

/* The full-width wordmark at the bottom (decorative; the logo link is in the header). */
.lab6-wordmark,
.lab6-wordmark .et_pb_image_wrap {
	width: 100%;
	max-width: none;
}

.lab6-wordmark img {
	display: block;
	width: 100%;
	height: auto;
}

.lab6-footer-bottom,
.lab6-footer-bottom p {
	color: var(--gcid-lab6-muted-inverse);
	font: 700 var(--gvid-lab6-fs-label) / 1.4 var(--lab6-font-grotesk);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lab6-footer-bottom p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.lab6-footer-bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Divi gives every ul/ol inside its layouts disc bullets and padding (specificity 0,1,1).
   LAB6 lists are reset with an element-qualified class (same specificity, later). */
ul.lab6-plainlist,
ul.lab6-checklist,
ul.lab6-links,
ul.lab6-tiles,
ul.lab6-entries,
ul.lab6-wall,
ul.lab6-channels,
ul.lab6-footer-nav__list,
ol.lab6-nav__list,
ol.lab6-index,
ol.lab6-manifesto,
ol.lab6-statements,
.lab6-facts dd ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.lab6-links {
	margin-top: 2rem;
}

/* Pull statement / colophon line (Text module; sizes are native Divi body font settings). */
.lab6-mega-text p {
	margin: 0;
	padding: 0;
	font-family: var(--lab6-font-display);
	font-weight: 800;
	text-transform: uppercase;
	hyphens: manual;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* Production text (post content in the template): short, so it reads as an intro. */
.lab6-prose .et_pb_post_content,
.lab6-prose .et_pb_post_content p {
	font-size: var(--gvid-lab6-fs-lead);
	line-height: 1.42;
	max-width: 40ch;
}

/* ===== 60-forms.css ===== */
/**
 * LAB6 — forms (DESIGN.md §10). Markup: lab6-core/forms.php.
 */

.lab6-form {
	display: grid;
	gap: 1.5rem;
	max-width: 40rem;
}

.lab6-form__intro,
.lab6-form__privacy {
	margin: 0;
	color: var(--gcid-lab6-muted);
	font-size: var(--gvid-lab6-fs-small);
}

.lab6-form__privacy a {
	color: var(--gcid-lab6-ink);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.lab6-form__field {
	display: grid;
	gap: 0.4rem;
}

.lab6-form label {
	font: 700 1rem / 1.3 var(--lab6-font-grotesk);
	color: var(--gcid-lab6-ink);
}

.lab6-form__hint {
	margin: 0;
	padding: 0;
	color: var(--gcid-lab6-muted);
	font-size: var(--gvid-lab6-fs-small);
}

.lab6-form input[type="text"],
.lab6-form input[type="email"],
.lab6-form select,
.lab6-form textarea {
	width: 100%;
	min-height: var(--lab6-target-min);
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--gcid-lab6-ink);
	border-radius: 0;
	background: #fff;
	color: var(--gcid-lab6-ink);
	font: 400 1.0625rem / 1.4 var(--lab6-font-sans);
	box-sizing: border-box;
}

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

.lab6-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--gcid-lab6-ink) 50%), linear-gradient(135deg, var(--gcid-lab6-ink) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.lab6-form [aria-invalid="true"] {
	border-color: var(--gcid-lab6-red);
	border-width: 3px;
}

.lab6-form__error {
	margin: 0;
	padding: 0;
	color: var(--gcid-lab6-red);
	font: 700 var(--gvid-lab6-fs-small) / 1.3 var(--lab6-font-grotesk);
}

.lab6-form__error::before {
	content: "! ";
}

.lab6-form__summary {
	padding: 1.25rem 1.5rem;
	border: 3px solid var(--gcid-lab6-red);
	background: #fff;
}

.lab6-form__summary-title {
	margin: 0 0 0.5rem;
	font: 800 1.25rem / 1.2 var(--lab6-font-grotesk);
}

.lab6-form__summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

.lab6-form__summary a {
	color: var(--gcid-lab6-ink);
	text-decoration: underline;
}

.lab6-form__success {
	padding: 1.5rem;
	border-left: var(--gvid-lab6-rule) solid var(--gcid-lab6-red);
	background: #fff;
}

.lab6-form__success p {
	margin: 0;
}

.lab6-form__submit {
	justify-self: start;
	min-height: var(--lab6-target-min);
	padding: 0.85rem 1.6rem;
	border: 2px solid var(--gcid-lab6-red);
	border-radius: 0;
	background: var(--gcid-lab6-red);
	color: #fff;
	font: 700 1rem / 1 var(--lab6-font-grotesk);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--lab6-duration-fast), border-color var(--lab6-duration-fast);
}

.lab6-form__submit:hover {
	background: var(--gcid-lab6-ink);
	border-color: var(--gcid-lab6-ink);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.lab6-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (width <= 600px) {
	.lab6-form__submit {
		justify-self: stretch;
	}
}

/* ---------- Simple content lists used in pages ---------- */
.lab6-checklist,
.lab6-plainlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lab6-checklist li {
	position: relative;
	padding: 0.65rem 0 0.65rem 2rem;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

.lab6-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.9rem;
	height: 0.9rem;
	background: var(--gcid-lab6-red);
}

.lab6-plainlist li {
	padding: 0.25rem 0;
}

.lab6-plainlist a {
	font-family: var(--lab6-font-grotesk);
	font-weight: 700;
}

.lab6-faq {
	margin: 0;
	border-top: var(--gvid-lab6-rule) solid var(--gcid-lab6-ink);
}

.lab6-faq dt {
	padding-top: 1.25rem;
	font: 800 var(--gvid-lab6-fs-h3) / 1.2 var(--lab6-font-grotesk);
}

.lab6-faq dd {
	margin: 0.5rem 0 0;
	padding-bottom: 1.25rem;
	border-bottom: var(--gvid-lab6-hairline) solid var(--gcid-lab6-line);
}

/* Pillar columns: the thick rule from the logo above each item. */
.lab6-pillar {
	padding-top: 1.25rem;
	border-top: var(--gvid-lab6-rule) solid currentColor;
}

/* Prose (privacy etc.). */
.lab6-prose h2 {
	margin: 2.5rem 0 0.75rem;
	font-family: var(--lab6-font-grotesk);
	font-size: var(--gvid-lab6-fs-h3);
	line-height: 1.2;
}