/*
 * Lettertypen, lokaal gehost.
 *
 * Stonden eerder als @import naar fonts.googleapis.com bovenaan dit bestand.
 * Dat kostte twee extra netwerkstappen voordat er tekst in de juiste letter
 * stond — de browser moest eerst dit bestand ophalen, daarin de @import
 * ontdekken, die CSS ophalen en pas daarna de lettertypen zelf. En het gaf
 * het IP-adres van elke bezoeker door aan Google.
 *
 * Alleen latin en latin-ext: genoeg voor Nederlands plus namen als Škoda en
 * Citroën. Dankzij unicode-range haalt de browser een latin-ext-bestand
 * alleen op wanneer zo'n teken echt op de pagina staat.
 *
 * JetBrains Mono is één variabel bestand voor alle gewichten — Google levert
 * voor 400 tot en met 700 exact hetzelfde bestand — dus staat het hier als
 * één @font-face met een gewichtsbereik.
 *
 * Archivo Black, Barlow Semi Condensed en JetBrains Mono staan onder de SIL
 * Open Font License 1.1; zie assets/fonts/OFL.txt.
 */

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

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

@font-face {
	font-family: 'Barlow Semi Condensed';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-600-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: 'Barlow Semi Condensed';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-600-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: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

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

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

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

@font-face {
	font-family: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-800-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: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-800-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: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-var-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: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-var-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;
}

/* ==========================================================================
   PWRSLIDE — design system
   Ported from the PWRSLIDE2.0 design-system project (tokens/ + page builds).
   Near-black canvas is the only mode. Orange = CTA/highlight, teal = kicker.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* base palette */
	--ps-black: #000000;
	--ps-card: #0d0d0d;
	--ps-surface-2: #242424;
	--ps-white: #ffffff;

	--ps-orange: #f58c00;
	--ps-orange-hover: #e79100;
	--ps-teal: #00a696;
	--ps-teal-hover: #00cbb7;
	--ps-blue-mark: #00758a;
	--ps-spotify: #1db954;

	/* semantic */
	--color-bg: var(--ps-black);
	--color-surface: var(--ps-card);
	--color-surface-raised: var(--ps-surface-2);
	--color-border: rgba(255, 255, 255, 0.12);
	--color-border-strong: rgba(255, 255, 255, 0.35);

	--color-fg: var(--ps-white);
	--color-fg-body: rgba(255, 255, 255, 0.82);
	--color-fg-muted: rgba(255, 255, 255, 0.65);
	--color-fg-faint: rgba(255, 255, 255, 0.45);

	--color-accent: var(--ps-orange);
	--color-accent-hover: var(--ps-orange-hover);
	--color-accent-2: var(--ps-teal);

	/* type */
	--font-display: 'Archivo Black', sans-serif;
	--font-body: 'Barlow Semi Condensed', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	--text-display-xl: clamp(34px, 6vw, 64px);
	--text-display-lg: clamp(28px, 4vw, 42px);
	--text-display-md: clamp(22px, 3vw, 30px);
	--text-display-sm: 22px;

	--text-body-lg: 20px;
	--text-body: 17px;
	--text-body-sm: 15px;
	--text-body-xs: 13.5px;

	--text-mono-lg: 30px;
	--text-mono: 13px;
	--text-mono-sm: 11px;

	--leading-tight: 1.02;
	--leading-snug: 1.28;
	--leading-body: 1.75;

	--tracking-display: -0.01em;
	--tracking-label: 0.1em;
	--tracking-label-wide: 0.14em;

	/* spacing + radius */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 44px;
	--space-9: 56px;
	--space-10: 72px;
	--space-11: 88px;
	--space-12: 100px;

	--content-max-wide: 1400px;
	--content-max-read: 760px;
	--content-max-mid: 900px;

	--gutter: clamp(20px, 4vw, 48px);

	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 10px;
	--radius-pill: 9999px;

	--gap-grid: 20px;
	--gap-row: 24px;

	/* effects */
	--border-hairline: 1px solid rgba(255, 255, 255, 0.12);
	--scrim-bottom-strong: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.96) 100%);
	--scrim-bottom-soft: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
	--glass-bg: rgba(0, 0, 0, 0.45);
	--glass-blur: blur(18px) saturate(140%);

	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--duration-fast: 0.15s;
	--duration-base: 0.25s;
	--duration-slow: 0.7s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background: var(--color-bg);
	color: var(--color-fg);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ps-orange);
	color: var(--ps-white);
}

a {
	color: var(--ps-orange);
	text-decoration: none;
}

a:hover {
	color: var(--ps-orange-hover);
}

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

figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--ps-teal);
	outline-offset: 3px;
}

.ps-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ps-orange);
	color: #fff;
	padding: 12px 20px;
	font-family: var(--font-display);
	font-size: 13px;
	text-transform: uppercase;
}

.ps-skip-link:focus {
	left: 8px;
	top: 8px;
	color: #fff;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.ps-wrap {
	max-width: var(--content-max-wide);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.ps-wrap--mid {
	max-width: var(--content-max-mid);
}

/* The reading-width story section on About. */
.ps-wrap--story {
	max-width: 1080px;
}

/*
 * De video- en podcastspeler lijnen precies uit met de lopende tekst.
 *
 * Hier stond eerder `margin-left: 50%` met `transform: translateX(-50%)` om
 * te centreren. Dat werkte niet: deze blokken hebben ook de scroll-animatie,
 * en die zet `transform: translateY(0)` zodra het blok in beeld komt. Die
 * transform overschrijft de andere, waardoor de speler een halve kolom naar
 * rechts sprong zodra je erlangs scrolde. Centreren met marges kan niet
 * overschreven worden door een animatie.
 */
.ps-article .ps-media-block {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.ps-wrap--read {
	max-width: var(--content-max-read);
}

.ps-section {
	padding-top: var(--space-11);
	padding-bottom: var(--space-11);
}

.ps-section--tight {
	padding-top: var(--space-10);
	padding-bottom: var(--space-8);
}

/* Section heading with beeldmerk + hairline rule */
.ps-section-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.ps-section-head__title {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	margin: 0;
}

.ps-section-head__rule {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.ps-section-head__meta {
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.ps-mark {
	width: 34px;
	height: auto;
	flex: none;
	display: block;
}

.ps-kicker {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.ps-kicker__text {
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	font-weight: 600;
	letter-spacing: var(--tracking-label-wide);
	color: var(--ps-teal);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.ps-h1,
.ps-h2,
.ps-h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	margin: 0;
	text-wrap: balance;
}

/*
 * Archivo Black is always uppercase in this brand. Applied with CSS, so the
 * stored title keeps its normal spelling for search results, browser tabs
 * and link previews.
 */
.ps-article-title,
.ps-postrow__title,
.ps-episode__title,
.ps-story__title,
.ps-next__title,
.ps-presenter__name,
.ps-h1,
.ps-h2,
.ps-h3,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	text-transform: uppercase;
}

/*
 * Long single words (AUTOLIEFHEBBERS, AFLEVERINGEN) must never be split
 * mid-word when a column gets narrow.
 */
.ps-h1,
.ps-h2,
.ps-h3,
.ps-article-title,
.ps-postrow__title,
.ps-episode__title,
.ps-story__title,
.ps-presenter__name,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.ps-h1 {
	font-size: clamp(40px, 6.5vw, 84px);
	line-height: 0.96;
}

.ps-h1--hero {
	font-size: clamp(44px, 7vw, 88px);
	line-height: 0.98;
}

.ps-h2 {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.04;
}

.ps-h3 {
	font-size: var(--text-display-sm);
	line-height: 1.15;
}

.ps-accent {
	color: var(--ps-orange);
}

.ps-lede {
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 660px;
	margin: 0;
	text-wrap: pretty;
}

.ps-body {
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-fg-body);
	max-width: var(--content-max-read);
	text-wrap: pretty;
}

.ps-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--color-fg-muted);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	padding: 13px 22px;
	min-height: 44px;
	cursor: pointer;
	border: none;
	transition: background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.ps-btn--primary {
	background: var(--ps-orange);
	color: #fff;
}

.ps-btn--primary:hover,
.ps-btn--primary:focus {
	background: var(--ps-orange-hover);
	color: #fff;
}

.ps-btn--lg {
	font-size: 14px;
	padding: 16px 30px;
	min-height: 52px;
}

.ps-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	padding: 16px 34px;
	min-height: 52px;
}

.ps-btn--ghost:hover,
.ps-btn--ghost:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

/* Underlined text link, e.g. "READ →" / "ALLE STORIES →" */
.ps-link-underline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--ps-orange);
	padding-bottom: 6px;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	cursor: pointer;
}

.ps-link-underline:hover {
	color: var(--ps-orange);
}

/*
 * Een verwijzing naar een ander verhaal, midden in de lopende tekst. Kwam uit
 * een blok van een verdwenen plugin, waar hij onzichtbaar was geworden.
 */
.ps-inline-link {
	margin: 0;
}

.ps-inline-link a {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 2px solid var(--ps-orange);
	padding-bottom: 4px;
	text-decoration: none;
}

.ps-inline-link a:hover {
	color: var(--ps-orange);
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.ps-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 200;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background var(--duration-fast) linear;
}

/* Transparent-over-hero variant, used on the front page + single article. */
.ps-header--overlay {
	position: fixed;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	/*
	 * Doorzichtig, niet 'none'. Met 'none' verdween de rand uit het model en
	 * werd de balk 80px; zodra .is-scrolled hem terugzette werd het 81px. Die
	 * ene pixel zag je als een sprongetje in de hoogte bij het scrollen.
	 */
	border-bottom: 1px solid transparent;
}

/*
 * Zodra je voorbij de hero scrolt, ziet de balk er overal hetzelfde uit: het
 * doorschijnende zwart met de vervaging erachter, precies zoals op de pagina's
 * zonder fotohero. Hier stond een bijna dichte kleurovergang, waardoor de balk
 * op een verhaal massief oogde en op About doorzichtig — dezelfde site, twee
 * verschillende balken.
 */
.ps-header--overlay.is-scrolled {
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * De beheerbalk van WordPress hoort de vaste kopbalk niet te overlappen.
 *
 * Alleen boven 782px, want daaronder maakt WordPress die balk 'absolute' en
 * scrolt hij gewoon mee weg — dan zou een offset juist een gat achterlaten.
 * Een uitgelogde bezoeker merkt hier niets van; dit is puur voor jezelf.
 */
@media screen and (min-width: 783px) {
	.admin-bar .ps-header--overlay {
		top: 32px;
	}
}

.ps-header__inner {
	max-width: var(--content-max-wide);
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.ps-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: opacity var(--duration-fast);
}

.ps-logo:hover {
	opacity: 0.75;
}

.ps-logo img {
	height: 22px;
	width: auto;
	display: block;
}

/* Text fallback when no custom logo is set — Archivo Black is the wordmark font. */
.ps-logo__text {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
}

.ps-nav {
	display: flex;
	align-items: center;
	gap: 38px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-nav a {
	position: relative;
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ps-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	height: 2px;
	width: 0;
	background: var(--ps-orange);
	transition: width var(--duration-base) ease;
}

.ps-nav a:hover::after,
.ps-nav a:focus::after {
	width: 100%;
}

/* Active page — solid orange, no underline animation (matches the source pages). */
.ps-nav .current-menu-item > a,
.ps-nav .current_page_item > a,
.ps-nav .current-menu-ancestor > a,
.ps-nav .current-post-ancestor > a {
	color: var(--ps-orange);
}

.ps-nav .current-menu-item > a::after,
.ps-nav .current_page_item > a::after {
	display: none;
}

.ps-header__cta {
	display: flex;
}

.ps-burger {
	display: none;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	width: 44px;
	height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}

.ps-burger:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.ps-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
}

.ps-mobile-menu {
	display: none;
	flex-direction: column;
	padding: 8px var(--gutter) 28px;
	gap: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	animation: ps-fade-in .18s ease;
}

.ps-mobile-menu.is-open {
	display: flex;
}

.ps-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ps-mobile-menu a {
	color: #fff;
	font-family: var(--font-display);
	font-size: 16px;
	padding: 14px 4px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: block;
}

.ps-mobile-menu a:hover {
	color: var(--ps-teal);
}

.ps-mobile-menu .ps-btn {
	margin-top: 16px;
}

@media (max-width: 900px) {
	.ps-nav,
	.ps-nav-wrap,
	.ps-header__cta {
		display: none;
	}

	.ps-burger {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/*
 * The hero is a Cover block (.ps-hero-cover, below). The hand-built variant
 * that came before it — .ps-hero with its own background, scrim and inner
 * wrapper — went away with the move from page templates to patterns.
 */
.ps-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

/*
 * Cover-block hero, used by the patterns. A Cover gives you the image
 * picker, focal point and overlay controls in the editor; these rules add
 * the PWRSLIDE scrim, the bottom-anchored content and the content width.
 */
.ps-hero-cover {
	align-items: flex-end;
	padding: 172px 0 150px;
}

.ps-hero-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.95) 100%);
	z-index: 1;
}

/*
 * The photo hero runs its gutter outside the content measure: the design
 * gives the hero headline the full 1400px and pushes it in by the gutter,
 * where a text page-head keeps the gutter inside the 1400px. Adding the
 * gutter to max-width keeps the content box at 1400px on wide screens and
 * still lets it shrink to the viewport below that.
 */
.ps-hero-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(var(--content-max-wide) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.ps-hero-cover.is-compact {
	padding: 120px 0 90px;
	min-height: 0 !important;
}

@media (max-width: 900px) {
	.ps-hero-cover {
		padding: 140px 0 100px;
	}
}

/* Page-header block used on Read / Watch (no photo) */
.ps-page-head {
	max-width: var(--content-max-wide);
	margin: 0 auto;
	padding: var(--space-10) var(--gutter) 40px;
}

.ps-page-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
}

.ps-page-head__intro {
	font-size: var(--text-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	max-width: 440px;
	margin: 0 0 8px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Stats row
   -------------------------------------------------------------------------- */
.ps-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--space-7);
	margin-top: var(--space-3);
}

.ps-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ps-stat__num {
	font-family: var(--font-mono);
	font-size: var(--text-mono-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Larger variant, used on the About page. */
.ps-stats--lg {
	gap: 48px;
}

.ps-stats--lg .ps-stat__num {
	font-size: 34px;
}

.ps-stat__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--tracking-label);
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
}

/* Small inline spec pair (MERK / MODEL) */
.ps-specpair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--space-5);
}

.ps-specpair__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ps-specpair__label {
	font-family: var(--font-mono);
	font-size: var(--text-mono-sm);
	letter-spacing: var(--tracking-label);
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}

.ps-specpair__value {
	font-family: var(--font-display);
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1.1;
}

.ps-specpair__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.14);
}

/*
 * In de uitgelichte kaart telt het ontwerp maar twee hairlines tussen het
 * filter en het eerste verhaal: die onder het filter en die boven de eerste
 * rij. De streep boven MERK/MODEL was de derde. De ruimte blijft, de lijn niet.
 */
.ps-lead .ps-specpair {
	border-top: 0;
}

/* --------------------------------------------------------------------------
   8b. Spotlight (front page)
   -------------------------------------------------------------------------- */
.ps-spotlight {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: var(--space-9);
	align-items: start;
}

.ps-spotlight__media {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.ps-spotlight__intro {
	font-size: var(--text-body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	max-width: 560px;
	margin: 0 0 28px;
	text-wrap: pretty;
}

.ps-spotlight .ps-embed {
	aspect-ratio: 16/10;
}

/* --------------------------------------------------------------------------
   9. Horizontal scroll rows (stories / shop)
   -------------------------------------------------------------------------- */
.ps-row {
	display: flex;
	gap: var(--gap-row);
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: var(--space-2);
	scrollbar-width: none;
}

.ps-row::-webkit-scrollbar {
	display: none;
}

/* Grid variant of the story cards, for a wrapping layout instead of a row. */
.ps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--gap-row);
}

.ps-grid .ps-story {
	flex: initial;
}

.ps-row__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-7);
}

.ps-row__nav {
	display: flex;
	gap: 10px;
}

.ps-row__nav button {
	width: 44px;
	height: 44px;
	border-radius: 4px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
}

.ps-row__nav button:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* Story card (4:5 photo tile with number + labels) */
.ps-story {
	flex: 0 0 340px;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: inherit;
}

.ps-story:hover {
	color: inherit;
}

.ps-story__media {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #111 center/cover no-repeat;
	transition: transform .2s ease;
}

.ps-story:hover .ps-story__media {
	transform: scale(1.02);
}

.ps-story__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--scrim-bottom-soft);
}

.ps-story__num {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 1;
	font-family: var(--font-mono);
	font-size: 44px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.32);
}

.ps-story__body {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
}

.ps-story__labels {
	font-family: var(--font-mono);
	font-size: var(--text-mono-sm);
	letter-spacing: var(--tracking-label-wide);
	color: var(--ps-teal);
	font-weight: 600;
}

.ps-story__title {
	font-family: var(--font-display);
	font-size: 19px;
	text-transform: uppercase;
	line-height: 1.15;
	margin-top: 6px;
	color: #fff;
}

.ps-story__meta {
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.03em;
	display: block;
	margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   10. CTA banner (the one glass moment)
   -------------------------------------------------------------------------- */
.ps-cta {
	position: relative;
	overflow: hidden;
	padding: 140px var(--gutter);
}

/*
 * The scrim: dark at the top and bottom, open in the middle, so the photo
 * fades into the black page instead of ending on a hard edge. Declared on
 * the element itself because the CTA is a Cover block — there is no separate
 * scrim div, and no separate background div either.
 */
.ps-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.25) 18%, rgba(0, 0, 0, 0.25) 82%, rgba(0, 0, 0, 0.95) 100%);
}

.ps-cta > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Bottom CTA: centred text straight on the photo, no glass panel. */
.ps-cta--plain > .wp-block-cover__inner-container {
	max-width: var(--content-max-mid);
	margin: 0 auto;
	padding: 0 var(--gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.ps-cta--plain h2 {
	font-family: var(--font-display);
	font-size: clamp(30px, 5vw, 52px);
	text-transform: uppercase;
	margin: 0;
}

.ps-cta__panel {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 48px 44px;
}

.ps-cta__panel h2 {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.4vw, 38px);
	text-transform: uppercase;
	margin: 0;
}

.ps-cta__panel p {
	font-size: var(--text-body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

.ps-cta__panel .ps-btn {
	margin-top: 10px;
}

/* --------------------------------------------------------------------------
   11. Filter pills
   -------------------------------------------------------------------------- */
.ps-filter {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding: var(--space-4) 0;
	flex-wrap: wrap;

	/*
	 * 36px onder de balk, zoals in het ontwerp. WordPress zet er zelf al 24px
	 * tussen twee blokken; aangrenzende marges vallen samen, dus dit wordt
	 * 36 en niet 60.
	 */
	margin-bottom: 36px;
}

.ps-filter__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--tracking-label);
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	flex: none;
}

.ps-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ps-pill {
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--duration-fast);
}

.ps-pill:hover {
	border-color: var(--ps-orange);
	color: rgba(255, 255, 255, 0.75);
}

.ps-pill.is-active {
	background: var(--ps-orange);
	color: #000;
	border-color: var(--ps-orange);
}

.ps-filter__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin-left: auto;
	flex: none;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Post list (Read)
   -------------------------------------------------------------------------- */
/*
 * Het uitgelichte verhaal staat ingeklemd tussen twee lijnen: de onderrand van
 * de filterbalk erboven, en de bovenrand van de eerste rij eronder. Anders dan
 * die rijen — die hun eigen padding van 30px hebben — droeg de kaart zelf geen
 * verticale ruimte, dus plakte de foto tegen allebei die lijnen aan.
 *
 * Het ontwerp zet 20px onder de uitgelichte sectie en 44px boven de lijst,
 * samen 64. De lijst is een flexkolom, dus die marge valt nergens mee samen en
 * komt er precies zo uit.
 */
.ps-lead {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
	color: inherit;
	margin-bottom: 64px;
}

.ps-lead:hover {
	color: inherit;
}

/*
 * Everywhere else the arrow link is white over an orange underline; on the
 * featured card the design colours the label itself orange.
 */
.ps-lead .ps-link-underline {
	color: var(--ps-orange);
}

.ps-lead__media {
	position: relative;
	aspect-ratio: 16/10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #111 center/cover no-repeat;
}

.ps-lead__media img,
.ps-postrow__media img,
.ps-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.ps-lead:hover .ps-lead__media img {
	transform: scale(1.03);
}

.ps-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	font-family: var(--font-mono);
	font-size: var(--text-mono-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-label-wide);
	color: #000;
	background: var(--ps-orange);
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
}

.ps-badge--teal {
	background: var(--ps-teal);
}

.ps-metarow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.7);
}

.ps-metarow__cat {
	color: var(--ps-teal);
	font-weight: 600;
}

.ps-metarow__sep {
	opacity: 0.4;
}

.ps-postlist {
	display: flex;
	flex-direction: column;
}

.ps-postrow {
	display: grid;
	grid-template-columns: 300px 1fr 150px;
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
	padding: 30px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: inherit;
	transition: opacity var(--duration-fast);
}

.ps-postrow:hover {
	opacity: 0.92;
	color: inherit;
}

.ps-postrow__media {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #111 center/cover no-repeat;
}

.ps-postrow:hover .ps-postrow__media img {
	transform: scale(1.05);
}

.ps-postrow__cat {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 1;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ps-teal);
	background: rgba(0, 0, 0, 0.6);
	padding: 4px 9px;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
}

.ps-postrow__title {
	font-family: var(--font-display);
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 12px;
	letter-spacing: var(--tracking-display);
	color: #fff;
}

.ps-postrow__intro {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	max-width: 640px;
	text-wrap: pretty;
}

.ps-postrow__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
	min-width: 120px;
}

/* Rows drop the columns they have no content for, so the text uses the
   space instead of leaving a gap. */
.ps-postrow--no-photo {
	grid-template-columns: 1fr 150px;
}

.ps-postrow--no-specs {
	grid-template-columns: 300px 1fr;
}

.ps-postrow--no-photo.ps-postrow--no-specs {
	grid-template-columns: 1fr;
}

.ps-lead--no-photo {
	grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   13. Watch / episodes
   -------------------------------------------------------------------------- */
.ps-watch-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: end;
	gap: clamp(24px, 4vw, 48px);
}

.ps-spotify-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	color: inherit;
	background: linear-gradient(150deg, rgba(29, 185, 84, 0.18) 0%, rgba(13, 13, 13, 1) 68%);
	border: 1px solid rgba(29, 185, 84, 0.4);
	border-radius: 12px;
	padding: clamp(24px, 3vw, 32px);
	transition: border-color .2s, transform .2s;
}

.ps-spotify-card:hover {
	border-color: var(--ps-spotify);
	transform: translateY(-2px);
	color: inherit;
}

.ps-spotify-card__icon {
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: 50%;
	background: var(--ps-spotify);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ps-spotify-card__title {
	font-family: var(--font-display);
	font-size: clamp(18px, 2vw, 24px);
	text-transform: uppercase;
	margin-top: 8px;
	line-height: 1.05;
}

.ps-spotify-card p {
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	margin: 8px 0 0;
}

.ps-spotify-card__cta {
	align-self: flex-start;
	background: var(--ps-spotify);
	color: #000;
	border-radius: var(--radius-pill);
	padding: 13px 24px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
}

.ps-episodes {
	display: flex;
	flex-direction: column;
	gap: clamp(44px, 6vw, 80px);
	max-width: 960px;
	margin: 0 auto;
}

.ps-episode {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.ps-embed {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ps-episode__title {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.03;
	text-transform: uppercase;
	margin: 0 0 var(--space-4);
	letter-spacing: var(--tracking-display);
}

.ps-episode__intro {
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 22px;
	max-width: 520px;
	text-wrap: pretty;
}

.ps-listen-link {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ps-spotify);
	text-transform: uppercase;
	white-space: nowrap;
}

.ps-listen-link:hover {
	color: #1ed760;
}

/* Click-to-load YouTube facade */
.ps-ytfacade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: block;
}

.ps-ytfacade img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-ytfacade__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ps-playbtn {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.ps-ytfacade:hover .ps-playbtn {
	background: rgba(245, 140, 0, 0.3);
	border-color: var(--ps-orange);
	transform: scale(1.06);
}

.ps-playbtn::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid #fff;
	margin-left: 6px;
}

/* --------------------------------------------------------------------------
   14. Article (single post)
   -------------------------------------------------------------------------- */
.ps-readbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #000;
	z-index: 300;
}

.ps-readbar__fill {
	height: 100%;
	background: var(--ps-orange);
	width: 0;
	transition: width .1s linear;
}

.ps-topscrim {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	z-index: 190;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

.ps-article-hero {
	position: relative;
	height: 80vh;
	min-height: 480px;
	max-height: 760px;
	overflow: hidden;
}

.ps-article-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

/*
 * De onderkant liep tot rgba(0,0,0,.9): op de laatste beeldrij was de foto nog
 * voor tien procent zichtbaar en daaronder begon meteen de volledig zwarte
 * pagina. Dat gaf precies de harde streep. De verloop eindigt nu op dezelfde
 * zwarte kleur als de achtergrond en begint eerder, zodat de foto er echt in
 * oplost in plaats van af te breken.
 */
.ps-article-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0) 22%,
		rgba(0, 0, 0, 0) 48%,
		rgba(0, 0, 0, 0.35) 68%,
		rgba(0, 0, 0, 0.78) 86%,
		var(--color-bg) 100%
	);
}

.ps-article-head {
	max-width: var(--content-max-mid);
	margin: 0 auto;
	padding: 44px var(--gutter) 8px;
}

.ps-article-head__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
	flex-wrap: wrap;
}

.ps-article-head__cats {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ps-article-head__cats span {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ps-teal);
	text-transform: uppercase;
}

.ps-article-head__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: rgba(255, 255, 255, 0.75);
}

.ps-article-title {
	font-family: var(--font-display);
	font-size: var(--text-display-xl);
	line-height: 1.02;
	margin: 0;
	letter-spacing: var(--tracking-display);
}

/* Het deel van de titel na het scheidingsteken, zoals in het ontwerp. */
.ps-title-accent {
	color: var(--ps-orange);
}

/*
 * De tekstkolom van een artikel. Het ontwerp houdt hier 900 aan en zet de
 * fotocollages op 1400.
 *
 * De marge zit in de max-width en niet erbuiten, want anders is de tekst
 * 900 min twee keer de marge — 804 dus — en dat is niet wat het ontwerp zegt.
 */
.ps-article {
	max-width: calc(var(--content-max-mid) + var(--gutter) * 2);
	margin: 0 auto;
	padding: var(--space-7) var(--gutter) 0;
}

.ps-article > * {
	margin-top: 0;
	margin-bottom: var(--space-8);
}

/* Same scoping as the canvas: spec labels, pull-quote credits and other
   pattern components are paragraphs too, and must keep their own styling. */
.ps-article p:not([class*="ps-"]) {
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-fg-body);
	text-wrap: pretty;
}

.ps-article > p:first-child,
.ps-article .ps-article__lede {
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	font-style: italic;
}

.ps-article h2 {
	font-family: var(--font-display);
	font-size: var(--text-display-md);
	text-transform: uppercase;
	margin: 0 0 18px;
	letter-spacing: -0.005em;
}

.ps-article h3 {
	font-family: var(--font-display);
	font-size: 22px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.ps-article img,
.ps-article .wp-block-image img {
	border-radius: var(--radius-lg);
	display: block;
}

.ps-article ul,
.ps-article ol {
	color: var(--color-fg-body);
	line-height: var(--leading-body);
	padding-left: 1.3em;
}

/*
 * Links in de lopende tekst krijgen het lichtblauw uit het beeldmerk —
 * rgb(0,166,150), de middelste schuine baan. Ze waren oranje, net als de
 * knoppen en de accenten in de koppen, en dan weet je bij een oranje woord
 * niet meer of je erop kunt klikken.
 *
 * :not([class]) laat de links die hun eigen opmaak meebrengen met rust, zoals
 * de knoppen en de verwijzing naar een ander verhaal.
 */
.ps-article a:not([class]) {
	color: var(--ps-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0, 166, 150, 0.45);
}

.ps-article a:not([class]):hover {
	color: var(--ps-teal-hover);
	text-decoration-color: currentColor;
}

/*
 * In de oude berichten staat op een paar plekken WordPress' eigen amberkleur
 * als tekstkleur, midden in zo'n link. Zonder deze regel bleef dat stuk oranje
 * terwijl de rest van de link blauw werd, en dan is één zin twee kleuren.
 */
.ps-article .has-luminous-vivid-amber-color,
.ps-article .has-vivid-amber-color,
.ps-article .has-luminous-vivid-orange-color {
	color: inherit !important;
}

/*
 * Blokken die uit de leeskolom breken: collages en alles wat als "breed" of
 * "volle breedte" is ingesteld.
 *
 * De oude formule was `margin-left: calc(50% - 50vw + gutter)` met daarnaast
 * een max-width. Op een breed scherm knipte die max-width de breedte terug
 * naar 1400, maar de negatieve marge bleef even groot — en dan schuift het
 * blok tegen de linkerrand aan met een gat rechts. Precies wat er te zien was.
 *
 * Nu wordt de breedte éérst bepaald en wordt de marge dáárvan afgeleid, dus
 * blijft het blok gecentreerd, hoe breed het scherm ook is.
 */
.ps-article .alignwide,
.ps-article .alignfull,
.ps-article .wp-block-gallery,
.ps-article > .ps-canvas-wide {
	--ps-breed: min(var(--content-max-wide), calc(100vw - var(--gutter) * 2));
	width: var(--ps-breed);
	max-width: none;
	margin-left: calc(50% - var(--ps-breed) / 2);
	margin-right: calc(50% - var(--ps-breed) / 2);
	padding-left: 0;
	padding-right: 0;
}

/*
 * Naast iets anders is smal juist de bedoeling: daar staat de collage in een
 * kolom en mag hij niet over de hele pagina uitwaaieren.
 *
 * Let op de :has(): het geldt alleen voor een rij met méér dan één kolom. De
 * oude paginabouwer zette namelijk ook losse blokken in een kolommenrij mét
 * maar één kolom, puur als omhulsel. Zonder die voorwaarde bleef de grote
 * shoot onderaan een verhaal op leesbreedte staan, terwijl er niets naast
 * stond om rekening mee te houden.
 */
.ps-article .wp-block-columns:has(.wp-block-column + .wp-block-column) .wp-block-gallery,
.ps-article .wp-block-columns:has(.wp-block-column + .wp-block-column) .alignwide,
.ps-article .wp-block-columns:has(.wp-block-column + .wp-block-column) .alignfull {
	--ps-breed: 100%;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Tekst naast een foto: die stond op leesbreedte, waardoor de tekstkolom nog
 * maar 433 pixels breed was en elke zin na een woord of vijf afbrak. Zo'n rij
 * hoort breed te staan — dan is de tekstkolom ruim 680 en leest hij gewoon.
 *
 * :has() kiest alleen de rijen met méér dan één kolom én een foto erin; een
 * enkele kolom met alleen tekst blijft op leesbreedte staan. Kent een oude
 * browser :has() niet, dan slaat hij deze regel over en blijft het zoals het
 * was — vervelend, niet stuk.
 */
.ps-article > .wp-block-columns:has(.wp-block-column + .wp-block-column):has(img),
.ps-article > .wp-block-media-text {
	--ps-breed: min(var(--content-max-wide), calc(100vw - var(--gutter) * 2));
	width: var(--ps-breed);
	max-width: none;
	margin-left: calc(50% - var(--ps-breed) / 2);
	margin-right: calc(50% - var(--ps-breed) / 2);
}

/*
 * De tekst hoort naast het midden van de foto te staan en niet bovenaan.
 * De ruimte tussen de twee komt van WordPress zelf (8% padding binnen de
 * tekstkolom); een gap erbij zou de twee kolommen samen breder maken dan de
 * rij zelf, want die staan op een vaste breedte.
 */
.ps-article .wp-block-media-text {
	align-items: center;
}


/* Pull quote */
.ps-pullquote {
	position: relative;
	padding: 8px 8px 8px 40px;
	max-width: var(--content-max-mid);
	margin: 0 auto var(--space-9);
}

.ps-pullquote::before {
	content: '"';
	position: absolute;
	left: -6px;
	top: -24px;
	font-family: var(--font-display);
	font-size: 110px;
	line-height: 1;
	color: var(--ps-orange);
	opacity: 0.35;
}

.ps-pullquote p {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(24px, 3.6vw, 36px);
	line-height: var(--leading-snug);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: var(--tracking-display);
	color: #fff;
}

.ps-pullquote cite,
.ps-pullquote footer,
.ps-pullquote p.ps-pullquote__cite {
	display: block;
	margin-top: 18px;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
	font-style: normal;
}

/* Spec table */
.ps-specs {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.ps-specs__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5);
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ps-specs__row:last-child {
	border-bottom: none;
}

.ps-specs__row:hover {
	background: rgba(255, 255, 255, 0.03);
}

.ps-specs__label {
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex: 0 0 220px;
}

.ps-specs__value {
	font-size: 16px;
	text-align: right;
}

/* Galleries */
.ps-gallery {
	display: grid;
	gap: var(--gap-grid);
	max-width: var(--content-max-wide);
	margin: 0 auto var(--space-9);
	padding: 0 var(--gutter);
}

.ps-gallery--2 {
	grid-template-columns: 1fr 1fr;
}

.ps-gallery--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ps-gallery--mixed {
	grid-template-columns: 1.3fr 1fr;
}

/* Also applies when the pattern uses a core gallery block, whose default
   flex layout and per-item width calculations must be neutralised. */
.ps-gallery.wp-block-gallery.has-nested-images {
	display: grid;
}

.ps-gallery figure,
.ps-gallery > div,
.ps-gallery.wp-block-gallery.has-nested-images > figure {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0;
	width: auto;
	flex-grow: 0;
	flex-basis: auto;
}

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

/*
 * WordPress levert bij een galerij zelf een regel mee die elke foto op haar
 * eigen afmeting zet:
 *
 *   .wp-block-gallery.has-nested-images figure.wp-block-image img {
 *       width: auto; height: auto; max-width: 100%;
 *   }
 *
 * Die weegt zwaarder dan `.ps-gallery img` hierboven. Gevolg: in een raster van
 * drie kolommen bleven de foto's op hun eigen breedte staan — klein, met gaten
 * ertussen. De patronen in dit thema leveren een lége galerij, dus dat viel
 * niet op tot er echte foto's in kwamen.
 *
 * Deze regel weegt zwaarder dan die van WordPress en zet ze wél op kolombreedte.
 * De vaste verhouding zorgt dat de rij één hoogte houdt, ook als de ene foto
 * staand is en de andere liggend; object-fit snijdt bij in plaats van te
 * vervormen.
 */
/*
 * En WordPress zet de foto's óók nog op een breedte: bij columns-3 krijgt elke
 * figure `width: calc(33.33% - …)`. In het raster hierboven is de kolom al een
 * derde van de galerij, dus dat werd een derde van een derde — vandaar die
 * kleine plaatjes met gaten ertussen. De kolom bepaalt de breedte, niet de foto.
 */
/*
 * !important is hier niet luiheid maar noodzaak. De regel van WordPress weegt
 * precies even zwaar als deze — vier klassen en een element, aan beide kanten —
 * en zijn stylesheet wordt ná die van het thema ingeladen. Bij gelijk gewicht
 * wint de laatste, dus zonder !important verliest deze regel altijd.
 */
.ps-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image {
	width: 100% !important;
	max-width: none;
	flex-basis: auto;
}

/*
 * De vaste verhouding hoort op de foto en niet op de figure eromheen. Een
 * rastervakje met een vaste verhouding rekt namelijk niet meer mee met zijn
 * kolom: de browser rekent dan de breedte uít de hoogte in plaats van andersom,
 * en dan blijven de foto's alsnog klein.
 */
.ps-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* De masonry-variant houdt juist de eigen verhouding, maar wel op kolombreedte. */
.ps-masonry.wp-block-gallery.has-nested-images > figure.wp-block-image {
	width: 100% !important;
	max-width: none;
	flex-basis: auto;
}

.ps-masonry.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: contain;
}

.ps-masonry {
	/* display:block is required to beat the core gallery's flex layout. */
	display: block;
	columns: 4 280px;
	column-gap: var(--gap-grid);
	max-width: var(--content-max-wide);
	margin: 0 auto var(--space-9);
}

.ps-masonry figure,
.ps-masonry .wp-block-image {
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0 0 var(--gap-grid);
	break-inside: avoid;
}

.ps-masonry img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
}

/* Tags + share */
.ps-article-foot {
	max-width: var(--content-max-read);
	margin: 0 auto;
	padding: var(--space-7) var(--gutter) var(--space-10);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ps-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-tags a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}

.ps-tags a:hover {
	border-color: var(--ps-orange);
	color: var(--ps-orange);
}

.ps-share {
	display: flex;
	gap: 10px;
}

.ps-share a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 13px;
	color: #fff;
}

.ps-share a:hover {
	border-color: var(--ps-orange);
	color: var(--ps-orange);
}

/* Next story card */
.ps-next {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	color: #fff;
	align-items: center;
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.ps-next:hover {
	border-color: rgba(245, 140, 0, 0.4);
	color: #fff;
}

.ps-next img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
}

.ps-next__body {
	padding: var(--space-6) clamp(16px, 3vw, 24px) var(--space-6) 0;
}

.ps-next__title {
	font-family: var(--font-display);
	font-size: 22px;
	text-transform: uppercase;
	margin: 10px 0 6px;
}

/* --------------------------------------------------------------------------
   15. Podcast player (facade)
   -------------------------------------------------------------------------- */
.ps-podcast {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-xl);
	padding: 26px 28px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.ps-podcast__btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ps-orange);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
}

.ps-podcast__btn:hover {
	background: var(--ps-orange-hover);
}

.ps-podcast__btn .ps-icon-play {
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 17px solid #000;
	margin-left: 3px;
}

.ps-podcast__btn .ps-icon-pause {
	display: none;
	gap: 4px;
}

.ps-podcast__btn .ps-icon-pause span {
	width: 4px;
	height: 18px;
	background: #000;
	display: block;
}

.ps-podcast.is-playing .ps-icon-play {
	display: none;
}

.ps-podcast.is-playing .ps-icon-pause {
	display: flex;
}

.ps-podcast__body {
	flex: 1;
	min-width: 220px;
}

.ps-podcast__title {
	font-family: var(--font-display);
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.ps-podcast__sub {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--color-fg-muted);
	margin-bottom: 14px;
}

.ps-progress {
	position: relative;
	height: 5px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	cursor: pointer;
	margin-bottom: 10px;
}

.ps-progress:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ps-progress__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--ps-orange);
	border-radius: 3px;
	width: 2%;
}

.ps-progress__knob {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
	left: 2%;
}

.ps-podcast__times {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--color-fg-muted);
}

.ps-podcast__link {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--color-fg-muted);
	white-space: nowrap;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: 22px;
}

.ps-podcast__link:hover {
	color: var(--ps-teal);
}

.ps-inline-label {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

/*
 * Het bolletje voor "BEKIJK DE VIDEO" krijgt het donkerblauw uit het beeldmerk
 * — rgb(0,117,138), de derde schuine baan. Stond op oranje, en dat vocht met
 * de knop rechtsboven om de aandacht.
 */
.ps-inline-label__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ps-blue-mark);
	flex: none;
}

.ps-inline-label__dot--teal {
	background: var(--ps-teal);
}

.ps-inline-label span {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: var(--tracking-label);
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   16. Presenters (About)
   -------------------------------------------------------------------------- */
.ps-presenters {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 44px);
}

.ps-presenter {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

/* Photo on the right — the alternating variant. Use the modifier class when
   building presenters in the editor, where nth-child would be unreliable. */
.ps-presenter--right,
.ps-presenters > .ps-presenter:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) 380px;
}

.ps-presenter--right .ps-presenter__media,
.ps-presenters > .ps-presenter:nth-child(even) .ps-presenter__media {
	order: 2;
}

.ps-presenter--right .ps-presenter__body,
.ps-presenters > .ps-presenter:nth-child(even) .ps-presenter__body {
	order: 1;
}

.ps-presenter__media {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* The figure a pattern wraps the image in must fill the 4:5 frame, or the
   frame grows with the photo and every presenter ends up a different size. */
.ps-presenter__media > .wp-block-image,
.ps-presenter__media figure {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
}

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

.ps-presenter__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
}

.ps-presenter__role {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: var(--tracking-label-wide);
	color: var(--ps-teal);
	font-weight: 600;
	text-transform: uppercase;
}

.ps-presenter__name {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 44px);
	text-transform: uppercase;
	margin: 12px 0 18px;
	letter-spacing: var(--tracking-display);
}

.ps-presenter__body p:not([class*="ps-"]) {
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 16px;
	max-width: 540px;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.ps-footer {
	padding: var(--space-10) var(--gutter) var(--space-7);
	max-width: var(--content-max-wide);
	margin: 0 auto;
}

.ps-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 48px;
	padding-bottom: var(--space-9);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ps-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-footer__nav a {
	color: #fff;
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
}

.ps-footer__nav a:hover {
	color: var(--ps-teal);
}

.ps-newsletter {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	padding: 26px;
}

.ps-newsletter__title {
	font-family: var(--font-display);
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ps-newsletter p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 18px;
	line-height: 1.5;
}

.ps-input {
	background: #000;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	min-height: 44px;
	width: 100%;
}

.ps-input:focus {
	border-color: var(--ps-teal);
	outline: none;
}

.ps-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-top: 28px;
}

.ps-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ps-footer__legal a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 13.5px;
}

.ps-footer__legal a:hover {
	color: #fff;
}

.ps-copyright {
	font-family: var(--font-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.ps-footer--slim {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--space-7);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   18. Pagination
   -------------------------------------------------------------------------- */
.ps-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: var(--space-9);
	flex-wrap: wrap;
}

.ps-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
}

.ps-pagination .page-numbers:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.ps-pagination .page-numbers.current {
	background: var(--ps-orange);
	border-color: var(--ps-orange);
	color: #000;
}

/* --------------------------------------------------------------------------
   19. Reveal on scroll
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* No JS / reduced motion — never hide content. */
.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

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

	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   19d. Lightbox
   -------------------------------------------------------------------------- */
.ps-zoomable {
	cursor: zoom-in;
}

.ps-lightbox {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(0, 0, 0, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ps-lightbox.is-open {
	display: flex;
	animation: ps-fade-in .18s ease;
}

.ps-lightbox-open {
	overflow: hidden;
}

.ps-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.ps-lightbox__figure img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius-lg);
	display: block;
}

.ps-lightbox__figure figcaption {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--color-fg-muted);
	text-align: center;
	max-width: 60ch;
}

.ps-lightbox__close,
.ps-lightbox__nav {
	position: absolute;
	background: rgba(0, 0, 0, 0.55);
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	transition: border-color var(--duration-fast), background var(--duration-fast);
}

.ps-lightbox__close:hover,
.ps-lightbox__nav:hover {
	border-color: var(--ps-orange);
	color: var(--ps-orange);
}

.ps-lightbox__close {
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	font-size: 26px;
}

.ps-lightbox__nav--prev {
	left: clamp(12px, 3vw, 28px);
	top: 50%;
	transform: translateY(-50%);
}

.ps-lightbox__nav--next {
	right: clamp(12px, 3vw, 28px);
	top: 50%;
	transform: translateY(-50%);
}

.ps-lightbox__counter {
	position: absolute;
	bottom: clamp(12px, 3vw, 28px);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--color-fg-muted);
}

/* Centred "load more" button below a listing. */
.ps-more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-9);
}

@keyframes ps-fade-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ps-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .45;
	}
}

/* --------------------------------------------------------------------------
   19b. Editor content wrappers
   -------------------------------------------------------------------------- */
/*
 * The canvas: a page is an empty full-width surface, so a pattern decides
 * its own width. Loose blocks you type straight onto the page still get a
 * sensible reading column; anything that is meant to span the viewport
 * (hero, CTA banner, alignfull) breaks out on its own.
 */
.ps-canvas {
	width: 100%;
}

.ps-canvas > * {
	max-width: var(--content-max-read);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: var(--space-6);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.ps-canvas > *:last-child {
	margin-bottom: 0;
}

/* 1. Edge-to-edge: these span the viewport and pad themselves inside. */
.ps-canvas > .ps-hero-cover,
.ps-canvas > .ps-cta,
.ps-canvas > .ps-article-hero,
.ps-canvas > .alignfull,
.ps-canvas > .wp-block-cover,
.ps-canvas > .wp-block-kadence-rowlayout {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.ps-canvas > .alignwide {
	max-width: var(--content-max-wide);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/*
 * 2. Self-contained containers. Declared AFTER the edge-to-edge rules on
 * purpose: a pattern section carries both `alignfull` and `ps-wrap`, and at
 * equal specificity the later rule wins — so these keep their own gutter
 * instead of being flattened to zero padding.
 */
.ps-canvas > .ps-wrap,
.ps-canvas > .ps-page-head,
.ps-canvas > .ps-section {
	max-width: var(--content-max-wide);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.ps-canvas > .ps-wrap--story {
	max-width: 1080px;
}

/*
 * A page header is followed directly by its content — 40px, as in the
 * design, instead of two stacked section paddings.
 */
.ps-canvas > .ps-page-head {
	padding-top: var(--space-10);
	padding-bottom: 40px;
}

.ps-canvas > .ps-page-head + .ps-wrap {
	padding-top: 0;
}

.ps-canvas > .ps-wrap.ps-wrap--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * A header section that sits directly on top of its own listing — the
 * design keeps these close together rather than stacking two full section
 * paddings.
 */
.ps-canvas > .ps-wrap--tight {
	padding-bottom: 34px;
}

.ps-canvas > .ps-wrap--tight + .ps-wrap {
	padding-top: 44px;
}

/*
 * Running copy on a page. Wrapped in :where() so the whole selector weighs
 * nothing: patterns build components out of paragraph blocks too, and at its
 * natural weight this rule outranks component styling and flattens it to
 * 18px body text. The :not() keeps paragraphs that carry their own PWRSLIDE
 * class out; :where() additionally protects paragraphs that merely sit
 * inside a component (.ps-spotify-card p, .ps-cta__panel p, presenter bios).
 * Nothing else styles a bare <p>, so plain page copy still lands here.
 */
:where(.ps-canvas p:not([class*="ps-"])) {
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-fg-body);
	text-wrap: pretty;
}

.ps-media-block {
	margin-bottom: var(--space-10);
}

/*
 * Media blocks nested in a column. `.ps-wrap` centres itself with
 * `margin: 0 auto`, and an auto cross-axis margin stops a flex item from
 * stretching — so without this the block shrinks to its content instead of
 * filling the column. Applies to the bare variant and, as a safety net, to
 * any media block dropped into a column layout.
 */
.ps-media-block--bare,
.ps-spotlight__media .ps-media-block,
.wp-block-column .ps-media-block,
.wp-block-kadence-column .ps-media-block {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.ps-media-block--bare {
	margin-bottom: 0;
}

.ps-spotlight__media .ps-media-block + .ps-media-block {
	margin-top: var(--space-5);
}

/* Section head rendered as a pattern (heading + rule, no beeldmerk img). */
.ps-section-head--pattern {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
}

.ps-section-head--pattern h2,
.ps-section-head--pattern h3 {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	font-family: var(--font-body);
	margin: 0;
}

/* --------------------------------------------------------------------------
   19c. Neutralising core's block layout inside PWRSLIDE components
   --------------------------------------------------------------------------
   Patterns build these components out of Group and Columns blocks. WordPress
   gives those a "constrained" layout whose generated CSS applies
   `margin-left/right: auto !important` and a `max-width` to every child. In a
   flex row that makes the first child swallow all free space and pushes the
   rest onto their own lines — which is what turned the stats row vertical.
   These rules restore the intended layout; `!important` is required here
   because that is what core uses.
   -------------------------------------------------------------------------- */
/*
 * WordPress renders a Group block as either
 *   <div class="wp-block-group ps-x">…children…</div>
 * or, when the block carries layout support,
 *   <div class="wp-block-group ps-x"><div class="wp-block-group__inner-container">…children…</div></div>
 *
 * Which of the two you get depends on the WordPress version and the block's
 * own layout attributes. Every component below therefore declares its
 * layout on BOTH levels, so the children line up either way.
 */
/*
 * WordPress wraps the children of a Group block in an extra
 * <div class="wp-block-group__inner-container">. That wrapper would become
 * the single flex/grid item of every component below, collapsing the
 * layout. `display: contents` removes it from the layout tree so the real
 * children line up as intended — and the CSS keeps working unchanged on
 * the WordPress versions that omit the wrapper.
 */
.ps-page-head__row > .wp-block-group__inner-container,
.ps-stats > .wp-block-group__inner-container,
.ps-stat > .wp-block-group__inner-container,
.ps-specpair > .wp-block-group__inner-container,
.ps-specpair__item > .wp-block-group__inner-container,
.ps-specs > .wp-block-group__inner-container,
.ps-specs__row > .wp-block-group__inner-container,
.ps-section-head > .wp-block-group__inner-container,
.ps-presenter > .wp-block-group__inner-container,
.ps-presenters > .wp-block-group__inner-container,
.ps-presenter__media > .wp-block-group__inner-container,
.ps-presenter__body > .wp-block-group__inner-container,
.ps-cta__panel > .wp-block-group__inner-container,
.ps-pullquote > .wp-block-group__inner-container,
.ps-filter > .wp-block-group__inner-container {
	display: contents;
}

.wp-block-group.ps-stats,
.wp-block-group.ps-specpair,
.wp-block-group.ps-section-head,
.wp-block-group.ps-filter {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* Read/Watch page header: heading left, intro right, both on the baseline. */
.wp-block-group.ps-page-head__row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
}

.wp-block-group.ps-stat,
.wp-block-group.ps-specpair__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
}

.wp-block-group.ps-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.wp-block-group.ps-specs__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--space-5);
}

.wp-block-group.ps-presenter {
	display: grid;
}

.wp-block-group.ps-presenters {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 44px);
}

.ps-stats .wp-block-group__inner-container > *,
.ps-specpair .wp-block-group__inner-container > *,
.ps-specs__row .wp-block-group__inner-container > *,
.ps-cta__panel .wp-block-group__inner-container > *,
.ps-page-head__row .wp-block-group__inner-container > *,
.ps-section-head .wp-block-group__inner-container > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

.wp-block-columns.ps-spotlight,
.wp-block-columns.ps-watch-head {
	display: grid;
}

/*
 * Core's Columns block sets `align-items: normal`, which lands after the
 * theme stylesheet and would stretch these columns. The design aligns the
 * Watch header on the baseline: heading and Spotify card share a bottom
 * edge, spotlight columns start at the top.
 */
.wp-block-columns.ps-watch-head {
	/* Core ships `.wp-block-columns { align-items: normal !important }`,
	   so matching it is the only way to keep the designed alignment. */
	align-items: end !important;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(24px, 4vw, 48px);
}

.wp-block-columns.ps-spotlight {
	align-items: start !important;
}

/*
 * Core caps every child of a constrained block at the global content size
 * (620px by default) and centres it. PWRSLIDE sections size themselves —
 * a section is 1400px wide, a reading column 760px — so inside a PWRSLIDE
 * surface that cap is switched off wholesale, then the intended widths are
 * declared again below.
 */
.ps-canvas .is-layout-constrained > *,
.ps-canvas > .is-layout-constrained > *,
.ps-wrap .is-layout-constrained > *,
.ps-article .is-layout-constrained > *,
.wp-block-cover__inner-container.is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * …behalve een collage die uit de leeskolom hoort te breken. De regel hierboven
 * zet met !important alle marges op nul, en daar sneuvelde de uitbraak van de
 * grote shoot onderaan een verhaal op: die zit in een groep en bleef daardoor
 * op leesbreedte staan terwijl de collages ernaast wel breed waren.
 */
.ps-article .is-layout-constrained > .wp-block-gallery,
.ps-article .is-layout-constrained > .alignwide,
.ps-article .is-layout-constrained > .alignfull {
	margin-left: calc(50% - var(--ps-breed) / 2) !important;
	margin-right: calc(50% - var(--ps-breed) / 2) !important;
}

/* Columns keep their own sizing rather than core's flex-basis. */
.wp-block-columns.ps-spotlight > .wp-block-column,
.wp-block-columns.ps-watch-head > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

/* Cover inner containers stay centred as a whole (their children do not). */
.ps-hero-cover > .wp-block-cover__inner-container,
.ps-cta > .wp-block-cover__inner-container {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- the measured widths the design actually calls for --------------- */
.ps-canvas .ps-lede,
.ps-hero-cover .ps-lede {
	max-width: 660px !important;
}

.ps-canvas .ps-spotlight__intro {
	max-width: 560px !important;
}

.ps-canvas .ps-page-head__intro {
	max-width: 440px !important;
}

/*
 * Only the measure needs forcing here — the type itself comes from
 * .ps-presenter__body above, which now outweighs the page-copy rule on its
 * own. (It used to need repeating; the :where() there made that redundant.)
 */
.ps-canvas .ps-presenter__body p:not([class*="ps-"]) {
	max-width: 540px !important;
}

.ps-canvas .ps-body,
.ps-article .ps-body {
	max-width: var(--content-max-read) !important;
}

.ps-canvas .ps-cta__panel,
.ps-cta .ps-cta__panel {
	max-width: 640px !important;
}

.ps-canvas .ps-episodes {
	max-width: 960px !important;
}

.ps-canvas .ps-episode__intro {
	max-width: 520px !important;
}

.ps-canvas .ps-postrow__intro {
	max-width: 640px !important;
}

/* --------------------------------------------------------------------------
   20. Kadence Blocks + core block overrides
        Anything built with Kadence Blocks inherits the PWRSLIDE look here.
   -------------------------------------------------------------------------- */
.kt-blocks-carousel .slick-slide,
.wp-block-kadence-rowlayout,
.wp-block-kadence-column {
	color: inherit;
}

/* Kadence Advanced Heading + core headings default to the display face. */
.wp-block-kadence-advancedheading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	color: #fff;
}

/* Kadence Advanced Button — match the brand button. */
.wp-block-kadence-advancedbtn .kt-button,
.wp-block-kadence-singlebtn .kb-button {
	font-family: var(--font-display) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
	min-height: 44px;
}

/* Kadence Info Box — flat card, hairline border, no shadow. */
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	box-shadow: none;
}

/* Kadence Advanced Gallery — brand radius. */
.wp-block-kadence-advancedgallery .kadence-blocks-gallery-item img {
	border-radius: var(--radius-lg);
}

/* Kadence Tabs / Accordion on dark. */
.wp-block-kadence-accordion .kt-accordion-panel-inner,
.wp-block-kadence-tabs .kt-tabs-content-wrap {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-xl);
	color: var(--color-fg-body);
}

/* Kadence Form fields. */
.wp-block-kadence-form input[type="text"],
.wp-block-kadence-form input[type="email"],
.wp-block-kadence-form textarea,
.wp-block-kadence-advancedform input,
.wp-block-kadence-advancedform textarea {
	background: #000;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font-body);
}

/* Core blocks. */
.entry-content .wp-block-quote {
	border-left: 3px solid var(--ps-orange);
	padding-left: var(--space-5);
	color: var(--color-fg-body);
}

/* Core buttons carry the brand CTA styling. Padding and sizing are declared
   here rather than inherited from the block library, so a button looks right
   even if core block styles are dequeued by an optimisation plugin. */
.wp-block-button__link,
.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ps-orange);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 16px 30px;
	min-height: 52px;
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-standard);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--ps-orange-hover);
	color: #fff;
}

/* Outline variant maps to the ghost button. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.entry-content .wp-block-table {
	color: var(--color-fg-body);
}

.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
	border-color: var(--color-border);
}

/*
 * Patterns build these components out of paragraph blocks, so the browser's
 * default <p> margin would otherwise push the parts apart. Every PWRSLIDE
 * component element manages its own spacing.
 */
p.ps-stat__num,
p.ps-stat__label,
p.ps-specs__label,
p.ps-specs__value,
p.ps-specpair__label,
p.ps-specpair__value,
p.ps-presenter__role,
p.ps-story__labels,
p.ps-story__title,
p.ps-story__meta,
p.ps-kicker__text,
p.ps-section-head__title,
.ps-pullquote p,
.ps-cta__panel p,
.ps-stats p,
.ps-specs p,
.ps-specpair p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Headings inside patterns keep the component's own rhythm. */
.ps-cta__panel h2,
.ps-section-head h2,
.ps-section-head h3 {
	margin-top: 0;
	margin-bottom: 0;
}

.ps-presenter__body p:not([class*="ps-"]) {
	margin-top: 0;
	margin-bottom: var(--space-4);
}

/* Editor colour palette names map to the brand tokens. */
.has-ps-orange-color { color: var(--ps-orange) !important; }
.has-ps-orange-background-color { background-color: var(--ps-orange) !important; }
.has-ps-teal-color { color: var(--ps-teal) !important; }
.has-ps-teal-background-color { background-color: var(--ps-teal) !important; }
.has-ps-black-color { color: var(--ps-black) !important; }
.has-ps-black-background-color { background-color: var(--ps-black) !important; }
.has-ps-card-color { color: var(--ps-card) !important; }
.has-ps-card-background-color { background-color: var(--ps-card) !important; }
.has-ps-white-color { color: var(--ps-white) !important; }
.has-ps-white-background-color { background-color: var(--ps-white) !important; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/*
	 * The two-column tracks are set on `.wp-block-columns.ps-watch-head`, so
	 * the single-column selector has to carry the same weight — a media query
	 * adds none. Without the `.wp-block-columns` part the Watch header kept
	 * its fixed 380px second track on a phone and pushed the Spotify card off
	 * the right edge.
	 */
	.wp-block-columns.ps-watch-head,
	.wp-block-columns.ps-spotlight,
	.ps-watch-head,
	.ps-spotlight {
		grid-template-columns: 1fr;
	}

	.ps-masonry {
		columns: 2 220px;
	}
}

@media (max-width: 900px) {
	.ps-lead,
	.ps-postrow,
	.ps-presenter,
	.ps-presenter:nth-child(even),
	.ps-next {
		grid-template-columns: 1fr;
	}

	.ps-presenter:nth-child(even) .ps-presenter__media,
	.ps-presenter:nth-child(even) .ps-presenter__body {
		order: initial;
	}

	.ps-postrow__side {
		flex-direction: row;
		gap: var(--space-7);
	}

	.ps-next__body {
		padding: 0 var(--space-6) var(--space-6);
	}

	.ps-gallery--2,
	.ps-gallery--3,
	.ps-gallery--mixed {
		grid-template-columns: 1fr 1fr;
	}

	.ps-specs__row {
		flex-direction: column;
		gap: var(--space-2);
	}

	.ps-specs__label {
		flex: none;
	}

	.ps-specs__value {
		text-align: left;
	}

	.ps-article-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.ps-section {
		padding-top: var(--space-9);
		padding-bottom: var(--space-9);
	}

	.ps-story {
		flex: 0 0 82vw;
	}

	.ps-gallery--2,
	.ps-gallery--3,
	.ps-gallery--mixed {
		grid-template-columns: 1fr;
	}

	.ps-masonry {
		columns: 1;
	}

	.ps-cta {
		padding: 90px var(--gutter);
	}

	.ps-cta__panel {
		padding: 32px 24px;
	}

	.ps-podcast__link {
		border-left: none;
		padding-left: 0;
	}

	.ps-filter__count {
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
   21. Link-in-bio (/links/)
   --------------------------------------------------------------------------
   De pagina die onder je socials hangt. Praktisch bedoeld: één kolom, dikke
   raakvlakken, en verder niets wat afleidt.

   Elke link is een gewoon knopblok. Dat is met opzet: je dupliceert er een in
   de editor om er een bij te zetten en je gooit er een weg om er een af te
   halen. Geen shortcode, geen veldenlijst, geen code.
   -------------------------------------------------------------------------- */
/*
 * De kolom wordt met padding op 560 gehouden en niet met max-width. Dat is
 * geen omweg maar noodzaak: het blok staat als alignfull in de canvas, en daar
 * zet een regel met !important alle max-widths op none. Padding raakt die regel
 * niet, en het resultaat is hetzelfde — een kolom van 560 in het midden, die op
 * een smal scherm netjes terugvalt op de gewone paginamarge.
 *
 * De tweede selector staat er omdat `.ps-canvas > .alignfull` de padding op
 * nul zet en zwaarder weegt dan een losse klasse. Dit blok is nu eenmaal
 * alignfull, dus die regel raakt hem.
 */
.ps-linkpage,
.ps-canvas > .ps-linkpage {
	padding-top: clamp(40px, 7vw, 88px);
	padding-bottom: clamp(56px, 8vw, 96px);
	padding-inline: max(var(--gutter), calc(50% - 280px));
	text-align: center;
}

/*
 * Geen menubalk op deze pagina. Je komt hier vanaf Instagram of TikTok en je
 * bent op zoek naar één link — een navigatie eromheen werkt dan tegen. De
 * pagina zet zelf het beeldmerk en de naam bovenaan, en "Naar PWRSLIDE.nl"
 * staat gewoon in de lijst.
 *
 * Wil je de balk toch, haal deze regel dan weg.
 */
body:has(.ps-linkpage) .ps-header {
	display: none;
}

.ps-linkpage .ps-mark {
	display: block;
	margin: 0 auto 20px;
}

.ps-linkpage__name {
	font-family: var(--font-display);
	font-size: clamp(32px, 7vw, 48px);
	line-height: 1;
	letter-spacing: var(--tracking-display);
	margin: 0 0 12px;
}

.ps-linkpage__tag {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 clamp(28px, 5vw, 44px);
}

.ps-linkpage__eyebrow {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--ps-orange);
	margin: 0 0 10px;
}

.ps-linkpage__note {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.4);
	margin: clamp(28px, 5vw, 40px) 0 0;
}

/* De links onder elkaar in plaats van naast elkaar. */
.ps-linkpage .wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 14px;
}

.ps-linkpage .wp-block-button {
	width: 100%;
}

.ps-linkpage .wp-block-button__link {
	--ps-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.2 4.6 20.6 12l-7.4 7.4-1.5-1.4 4.9-5H3.4v-2h13.2l-4.9-5z'/%3E%3C/svg%3E");
	--ps-ico-kleur: rgba(255, 255, 255, 0.55);

	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	min-height: 62px;
	padding: 16px 22px;
	background: var(--ps-card);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	transition: border-color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.ps-linkpage .wp-block-button__link:hover,
.ps-linkpage .wp-block-button__link:focus-visible {
	border-color: var(--ps-orange);
	background: #151515;
	color: #fff;
	transform: translateY(-2px);
}

/* Het merkje links in de rij. */
.ps-linkpage .wp-block-button__link::before {
	content: '';
	flex: none;
	width: 24px;
	height: 24px;
	background-color: var(--ps-ico-kleur);
	-webkit-mask: var(--ps-ico) center / contain no-repeat;
	mask: var(--ps-ico) center / contain no-repeat;
	transition: background-color var(--duration-fast) var(--ease-standard);
}

/*
 * Alleen background-color, niet de background-shorthand. Die zou ook
 * background-image wissen, en de rij naar de site zelf zet daar het beeldmerk
 * in — dan bleef er bij hover een oranje blok over in plaats van het merkje.
 */
.ps-linkpage .wp-block-button__link:hover::before {
	background-color: var(--ps-orange);
}

/*
 * Het merkje volgt het adres van de link, niet een klasse die je moet
 * onthouden. Plak je er een YouTube-link in, dan staat het YouTube-merkje er
 * vanzelf. De kleuren komen alle drie uit het beeldmerk.
 */
.ps-linkpage a[href*="youtube.com"],
.ps-linkpage a[href*="youtu.be"] {
	--ps-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.6 7.2a2.8 2.8 0 0 0-2-2C17.9 4.8 12 4.8 12 4.8s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.8 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.8zM9.8 15.3V8.7l5.7 3.3-5.7 3.3z'/%3E%3C/svg%3E");
	--ps-ico-kleur: var(--ps-orange);
}

.ps-linkpage a[href*="spotify.com"] {
	--ps-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.6 14.4a.6.6 0 0 1-.9.2c-2.3-1.4-5.3-1.8-8.8-1a.6.6 0 1 1-.3-1.2c3.8-.9 7.1-.5 9.7 1.1a.6.6 0 0 1 .3.9zm1.2-2.7a.8.8 0 0 1-1 .3c-2.7-1.7-6.8-2.2-10-1.2a.8.8 0 1 1-.5-1.5c3.7-1.1 8.2-.6 11.3 1.3a.8.8 0 0 1 .2 1.1zm.1-2.9C14.7 9 9.4 8.8 6.3 9.7a.9.9 0 1 1-.5-1.8c3.5-1 9.4-.9 13.1 1.3a.9.9 0 0 1-1 1.6z'/%3E%3C/svg%3E");
	--ps-ico-kleur: var(--ps-teal);
}

.ps-linkpage a[href*="instagram.com"] {
	--ps-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.1.4.3 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.1-1 .3-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.1-.4-.3-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.1 1-.3 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.8.1-1 0-1.5.2-1.9.3-.4.2-.7.4-1 .7-.3.3-.5.6-.7 1-.1.4-.3.9-.3 1.9-.1 1.3-.1 1.7-.1 4.8s0 3.5.1 4.8c0 1 .2 1.5.3 1.9.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.9.3 1.9.3 1.3.1 1.7.1 4.8.1s3.5 0 4.8-.1c1 0 1.5-.2 1.9-.3.4-.2.7-.4 1-.7.3-.3.5-.6.7-1 .1-.4.3-.9.3-1.9.1-1.3.1-1.7.1-4.8s0-3.5-.1-4.8c0-1-.2-1.5-.3-1.9-.2-.4-.4-.7-.7-1-.3-.3-.6-.5-1-.7-.4-.1-.9-.3-1.9-.3C15.5 4 15.1 4 12 4zm0 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm6.4-2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z'/%3E%3C/svg%3E");
	--ps-ico-kleur: var(--ps-blue-mark);
}

/*
 * Een link naar de site zelf krijgt het beeldmerk. Op klasse én op adres: de
 * klasse werkt altijd, ook op een testomgeving waar het adres nog geen
 * pwrslide.nl is, en het adres vangt de gevallen op waarin je zo'n rij later
 * met de hand toevoegt zonder aan de klasse te denken.
 */
.ps-linkpage .ps-linkrow--site a,
.ps-linkpage a[href*="pwrslide"] {
	--ps-ico: url('../img/pwrslide-beeldmerk.svg');
	--ps-ico-kleur: transparent;
	-webkit-mask: none;
	mask: none;
}

.ps-linkpage .ps-linkrow--site a::before,
.ps-linkpage a[href*="pwrslide"]::before {
	background-color: transparent;
	-webkit-mask: none;
	mask: none;
	background-image: var(--ps-ico);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
 * Het beeldmerk heeft zijn eigen drie kleuren en wordt dus niet omgekleurd bij
 * hover. De :hover in de selector staat er om de regel hierboven te verslaan,
 * die anders zwaarder weegt.
 */
.ps-linkpage .ps-linkrow--site a:hover::before,
.ps-linkpage a[href*="pwrslide"]:hover::before {
	background-color: transparent;
}

/* De uitgelichte link: dezelfde rij, maar met gewicht. */
.ps-linkpage .ps-linkfeat .wp-block-button__link {
	min-height: 84px;
	padding: 20px 24px;
	font-size: 18px;
	background: linear-gradient(135deg, rgba(245, 140, 0, 0.18) 0%, var(--ps-card) 62%);
	border-color: rgba(245, 140, 0, 0.45);
}

.ps-linkpage .ps-linkfeat .wp-block-button__link::before {
	width: 28px;
	height: 28px;
}

@media (max-width: 480px) {
	.ps-linkpage .wp-block-button__link {
		font-size: 14px;
		min-height: 58px;
		padding: 14px 18px;
		gap: 12px;
	}
}


/* --------------------------------------------------------------------------
   22. Nagekomen uit de laatste testronde
   -------------------------------------------------------------------------- */

/*
 * WordPress' markeerstift. In de oude berichten staat op twee plekken een
 * <mark> midden in een link, en de browser geeft dat element van zichzelf een
 * gele achtergrond. Op een zwarte pagina is dat een schreeuwend geel blok.
 * De kleur van de tekst volgt de link eromheen.
 */
.ps-article mark,
.ps-canvas mark {
	background-color: transparent;
	color: inherit;
}

/*
 * Eén maat tussen foto's.
 *
 * Binnen een collage stonden de foto's 20 pixels van elkaar, maar twee losse
 * fotoblokken onder elkaar 44 — de ruimte tussen gewone alinea's. Daardoor
 * oogde een reeks foto's ongelijk: naast elkaar dicht, boven elkaar ruim.
 *
 * Nu geldt dezelfde maat in beide richtingen, zodat een reeks foto's als één
 * raster leest. De ruimte rondom tekst blijft wél ruim: die verandert niet,
 * want de regel geldt alleen als er weer een fotoblok volgt.
 */
.ps-article {
	--ps-media-gap: var(--gap-grid);
}

/*
 * De eerste poging hier was `:has(+ …)` op het voorgaande blok, met daarin nog
 * een `:has(img)`. Dat mag niet: een :has() binnen een :has() maakt de hele
 * selector ongeldig, en dan valt de regel stil weg — precies wat er gebeurde.
 *
 * Daarom de omgekeerde weg: alle fotoblokken krijgen dezelfde onderkant, en het
 * vólgende fotoblok trekt zichzelf met een negatieve bovenmarge omhoog. Twee
 * marges naast elkaar vallen samen tot 44 + (20 - 44) = 20, en die rekensom
 * klopt alleen als die 44 overal hetzelfde is — vandaar de eerste regel.
 */
.ps-article > :is(.wp-block-image, .wp-block-gallery, .ps-masonry) {
	margin-bottom: var(--space-8);
}

.ps-article > :is(.wp-block-image, .wp-block-gallery, .ps-masonry) + :is(.wp-block-image, .wp-block-gallery, .ps-masonry),
.ps-article > .wp-block-columns:has(img) + .wp-block-columns:has(img),
.ps-article > .wp-block-columns:has(img) + :is(.wp-block-image, .wp-block-gallery, .ps-masonry),
.ps-article > :is(.wp-block-image, .wp-block-gallery, .ps-masonry) + .wp-block-columns:has(img) {
	margin-top: calc(var(--ps-media-gap) - var(--space-8));
}

/* Ook binnen een collage: drie klassen, want die van WordPress weegt twee. */
.ps-article .wp-block-gallery.has-nested-images {
	gap: var(--ps-media-gap);
}

/* Voor de kolommenrijen die als fotoraster zijn gebruikt. */
.ps-article > .wp-block-columns:has(img) {
	gap: var(--ps-media-gap);
}

/* Alleen voor schermlezers: de paginakop op /links/, waar het logo staat. */
.ps-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Het logo bovenaan de linkpagina. */
.ps-linkpage__logo {
	margin: 0 auto 14px;
}

.ps-linkpage__logo img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: min(280px, 70%);
	height: auto;
}

/*
 * Ruimte onder een sectiekop.
 *
 * .ps-h2 heeft `margin: 0`, en de koppen die in een patroon een eigen marge
 * meekrijgen zetten die als inline stijl. "VERS VAN DE WEG" op de homepage
 * kreeg er geen, en stond daardoor met nul ruimte bovenop de rij verhalen.
 *
 * :not(:last-child) zodat een kop die niets onder zich heeft geen ruimte gaat
 * reserveren, en een inline marge uit een patroon wint hier nog altijd van.
 */
.ps-wrap .ps-h2:not(:last-child),
.ps-canvas .ps-h2:not(:last-child) {
	margin-bottom: var(--space-7);
}