/*
Theme Name: Buğra Gedik
Theme URI: https://bugragedik.nl
Author: Strila
Author URI: https://strila.nl
Description: Eén scherm, één foto, vier links. Persoonlijk thema voor stand-upcomedian Buğra Gedik, gebouwd op zijn design system.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.4.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bugra-gedik
*/

/* ==========================================================================
   0. Arimo Bold
   Metrisch identiek aan Arial Bold, als fallback voor systemen zonder Arial
   (Android, Linux). Arial staat vooraan in --font-poster, dus wie Arial heeft
   downloadt niets. Deze @font-face staat bewust hier en niet in theme.json:
   WordPress hernoemt elke fontFace naar de eerste naam uit de fontFamily-lijst
   ("Arial"), en dan zou de webfont de systeem-Arial overschaduwen.
   ========================================================================== */

@font-face {
	font-family: "Arimo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/arimo-bold-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;
}

/* De ğ (U+011F) zit in latin-ext; die moet het altijd doen. */
@font-face {
	font-family: "Arimo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/arimo-bold-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;
}

/* ==========================================================================
   1. Design tokens
   Overgenomen uit design-system/tokens/*.css. Bewust op specificiteit 0
   (:where) zodat de stijlvariatie "Poster" ze via global styles kan
   overschrijven. Het selector-paar dekt front-end (:root) en blokeditor.
   ========================================================================== */

:where(:root, .editor-styles-wrapper) {
	/* Papier (achtergrond persfoto) */
	--paper-000: #FFFDF9;
	--paper-050: #FAF7F0;
	--paper-100: #F4F0E8;
	--paper-200: #F0ECE3;
	--paper-300: #E4DED2;

	/* Blush (het perzikkleurige overhemd) */
	--blush-050: #FDF3EB;
	--blush-100: #FAE8DA;
	--blush-200: #F9E8D8;
	--blush-300: #F0DED0;
	--blush-400: #E8C9B2;

	/* Klei (warme middentoon) */
	--clay-400: #D6A181;
	--clay-600: #A9704F;

	/* Posterrood */
	--red-500: #A81E17;
	--red-600: #881913;
	--red-700: #6C1512;
	--red-900: #501113;

	/* Inkt (warm bijna-zwart) */
	--ink-900: #171310;
	--ink-800: #292219;
	--ink-600: #4A4137;
	--ink-400: #7A7065;
	--ink-200: #A9A196;

	/* Semantische aliassen */
	--surface-page: var(--wp--custom--surface-page, var(--paper-050));
	--surface-raised: var(--wp--custom--surface-raised, var(--paper-000));
	--surface-blush: var(--wp--custom--surface-blush, var(--blush-100));
	--surface-invert: var(--wp--custom--surface-invert, var(--red-600));
	--surface-ink: var(--wp--custom--surface-ink, var(--ink-900));

	--text-primary: var(--wp--custom--text-primary, var(--ink-900));
	--text-secondary: var(--wp--custom--text-secondary, var(--ink-600));
	--text-muted: var(--wp--custom--text-muted, var(--ink-400));
	--text-on-invert: var(--wp--custom--text-on-invert, var(--paper-050));
	--text-accent: var(--wp--custom--text-accent, var(--red-600));

	--link-rest: var(--wp--custom--link-rest, var(--ink-900));
	--link-hover: var(--wp--custom--link-hover, var(--red-600));
	--link-visited: var(--wp--custom--link-visited, var(--clay-600));
	--link-active: var(--wp--custom--link-active, var(--red-900));

	--border-hairline: var(--wp--custom--border-hairline, var(--paper-300));
	--border-strong: var(--wp--custom--border-strong, var(--ink-900));
	--border-blush: var(--wp--custom--border-blush, var(--blush-400));

	--focus-ring: var(--wp--custom--focus-ring, var(--red-600));

	/* Postertitel: de inkt van de titel op de poster. */
	--display-ink: var(--wp--custom--display-ink, var(--ink-900));

	/* Typografie */
	--font-display: "Baskervville", Georgia, "Times New Roman", serif;
	--font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
	--font-poster: Arial, Arimo, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, monospace;

	--size-display-xl: clamp(64px, 13vw, 190px);
	--size-display-l: clamp(44px, 7vw, 96px);
	--size-display-m: clamp(32px, 4.4vw, 60px);
	--size-link-xl: clamp(28px, 3.6vw, 52px);
	--size-link-l: clamp(22px, 2.4vw, 32px);
	--size-body-l: 20px;
	--size-body: 17px;
	--size-body-s: 15px;
	--size-meta: 13px;
	--size-micro: 11px;

	--lh-display: 0.92;
	--lh-heading: 1.06;
	--lh-body: 1.5;
	--lh-tight: 1.2;

	--ls-display: -0.02em;
	--ls-heading: -0.01em;
	--ls-body: 0em;
	--ls-meta: 0.08em;
	--ls-micro: 0.16em;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* Postertitel (sectie 5b). Nagemeten aan de originele titel-PNG: Arial Bold,
	   tracking -80, glyphs 1,77x zo breed (inktbreedte gedeeld door x-hoogte,
	   over beide regels van "ğelukkig ğeboren"), baseline-tot-baseline 0,80 em.
	   De blur staat in em zodat hij meeschaalt met de lettergrootte. */
	--poster-rek: 1.77;
	--poster-spatie: -0.08em;
	--poster-regel: .8;
	--poster-waas: .005em;
	--poster-smeer-1-schaal: 1.009;
	--poster-smeer-1-dekking: .30;
	--poster-smeer-1-waas: .004em;
	--poster-smeer-2-schaal: 1.020;
	--poster-smeer-2-dekking: .13;
	--poster-smeer-2-waas: .008em;

	--type-nameplate: italic var(--weight-regular) var(--size-display-xl)/var(--lh-display) var(--font-display);
	--type-title: var(--weight-regular) var(--size-display-l)/var(--lh-heading) var(--font-display);
	--type-subtitle: var(--weight-regular) var(--size-display-m)/var(--lh-heading) var(--font-display);
	--type-link: var(--weight-regular) var(--size-link-xl)/1.15 var(--font-display);
	--type-body: var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-sans);
	--type-body-l: var(--weight-regular) var(--size-body-l)/var(--lh-body) var(--font-sans);
	--type-meta: var(--weight-medium) var(--size-meta)/1.3 var(--font-sans);

	/* Ruimte */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 144px;

	--gutter-page: clamp(20px, 5vw, 64px);
	--stack-tight: var(--space-2);
	--stack-default: var(--space-5);
	--stack-section: var(--space-8);

	--measure-prose: 58ch;
	--measure-narrow: 40ch;
	--max-page: 1440px;

	--radius-0: 0px;
	--radius-1: 2px;
	--radius-2: 4px;
	--radius-pill: 999px;

	--hairline: 1px;
	--rule-strong: 2px;

	/* Beweging: alleen kleurovergangen */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-instant: 90ms;
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 520ms;
	--transition-link: color var(--dur-fast) var(--ease-out);
	--transition-surface: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	:where(:root, .editor-styles-wrapper) {
		--dur-instant: 0ms;
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

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

html {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body,
.editor-styles-wrapper {
	margin: 0;
	text-wrap: pretty;
}

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

figure {
	margin: 0;
}

/* ==========================================================================
   3. Links, focus en selectie
   Volgorde link → visited → hover → active is bindend: :visited moet winnen
   van de theme.json-linkkleur (:root :where(a...)) en verliezen van :hover
   (die uit theme.json komt met hogere specificiteit).
   ========================================================================== */

a {
	color: var(--link-rest);
	text-decoration: none;
	transition: var(--transition-link);
}

a:visited {
	color: var(--link-visited);
}

a:hover {
	color: var(--link-hover);
}

a:active {
	color: var(--link-active);
}

/* Externe links krijgen een pijl rechtsboven. Knoppen en ticketlinks niet. */
a[target="_blank"]:not(.wp-element-button):not(.bg-event__action)::after {
	content: "\2197";
	margin-left: .35em;
	opacity: .55;
	font: var(--weight-medium) 13px/1 var(--font-sans);
	letter-spacing: .08em;
	vertical-align: .35em;
}

:focus-visible {
	outline: var(--rule-strong) solid var(--focus-ring);
	outline-offset: 3px;
}

::selection {
	background: var(--wp--custom--selection-bg, var(--blush-300));
	color: var(--wp--custom--selection-text, var(--ink-900));
}

/* ==========================================================================
   4. Paginaschil
   ========================================================================== */

.wp-block-group.bg-site {
	padding-inline: var(--gutter-page);
}

.wp-block-group.bg-site--page {
	/* Als variabele, want de portretkolom (sectie 8) rekent ermee: de figuur
	   loopt door de ondermarge van de pagina heen tot de echte rand. */
	--bg-page-pad: clamp(24px, 4vw, 56px);
	padding-block: var(--bg-page-pad);
}

/* De post-content-wrapper mag geen extra ruimte of breedte introduceren. */
.bg-site > .wp-block-post-content {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   5. Micro-labels en titels
   ========================================================================== */

.bg-meta {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

.bg-kicker {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.bg-kicker::after {
	content: "";
	flex: 1;
	height: var(--hairline);
	background: var(--border-hairline);
}

/* Typografie: sectie 5b. Hier alleen ruimte: de staart van de ğ en de g moet
   onder de krappe regel vrij blijven. */
.wp-block-heading.bg-title,
.bg-title {
	margin: 0 0 var(--space-6);
	padding-bottom: .18em;
}

.bg-lead {
	font: var(--weight-regular) var(--size-display-m)/1.06 var(--font-display);
	letter-spacing: var(--ls-heading);
	color: var(--text-primary);
	max-width: var(--measure-prose);
	margin: 0 0 var(--space-5);
}

.bg-prose {
	max-width: var(--measure-prose);
	font: var(--weight-regular) 20px/1.5 var(--font-sans);
	color: var(--text-secondary);
	margin: 0 0 var(--space-7);
}

.bg-prose p {
	margin: 0;
}

.bg-prose p + p {
	margin-top: var(--space-4);
}

/* ==========================================================================
   5b. Postertitel
   De typografie van de theaterposter "ğelukkig ğeboren": Arial Bold in
   onderkast, horizontaal uitgerekt, met een krappe regelafstand en de zachte
   zoomblur uit Photoshop.

   De rek is een scaleX op een smallere box: de tekst breekt af binnen
   100% / --poster-rek en vult na het rekken precies de kolom. transform raakt
   de layout niet aan, dus de regelboxen blijven kloppen.

   De zoomblur is een stapel van drie lagen. Het element zelf krijgt een lichte
   blur; ::before en ::after herhalen dezelfde tekst uit data-text (gezet in
   inc/postertitel.php), iets groter geschaald vanuit het midden, zachter en
   doorzichtiger. Zonder data-text blijven ze leeg en gebeurt er niets.
   ========================================================================== */

/* De kolom waarin een postertitel staat, bepaalt de maat: de titel mag nooit
   breder worden dan zijn eigen kolom. De expliciete breedte hoort erbij: een
   inline-size-container die als flex- of gridkind wordt uitgerekt, kent zijn
   eigen breedte nog niet als de hoogte wordt berekend, en zou de titel dan op
   nul breedte laten afbreken. width: 100% maakt die breedte wel bepaald. */
.wp-block-group.bg-nameplate,
.wp-block-group.bg-linklist,
.wp-block-group.bg-two-col__main,
.wp-block-group.bg-agenda-page,
.wp-block-group.bg-site--page {
	container-type: inline-size;
	width: 100%;
}

/* De rek zelf hoort bij wat een hele kolom vult. De navigatieregel rekt als
   geheel (sectie 7b), zodat de losse items ernaast blijven passen. */
:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
.bg-home .bg-linklist .bg-link__label {
	display: block;
	width: calc(100% / var(--poster-rek));
	transform: scaleX(var(--poster-rek));
	transform-origin: 0 50%;
}

:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
.bg-home .bg-linklist .bg-link__label,
.bg-terug,
.bg-nav__item {
	position: relative;
	isolation: isolate;
	display: block;
	font-family: var(--font-poster);
	font-style: normal;
	font-weight: 700;
	line-height: var(--poster-regel);
	letter-spacing: var(--poster-spatie);
	text-transform: lowercase;
	color: var(--display-ink);
	overflow-wrap: break-word;
	filter: blur(var(--poster-waas));
}

/* De twee smeerlagen. pointer-events en user-select staan uit zodat de echte
   tekst gewoon klikbaar en selecteerbaar blijft; het element zelf houdt ze. */
:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
)::before,
:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
)::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	/* De laag is precies zo breed als zijn eigen tekst, tot de breedte van de
	   titel. Alleen dan valt het midden van de zoom samen met het midden van de
	   letters; bij een vaste breedte zou een korte titel scheef weg smeren.
	   Een titel die afbreekt, breekt hier op dezelfde plek af. */
	width: max-content;
	max-width: 100%;
	z-index: -1;
	pointer-events: none;
	user-select: none;
	/* Het element heeft al een scaleX; hier alleen de zoom vanuit het midden. */
	transform-origin: 50% 50%;
}

:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
)::before {
	transform: scale(var(--poster-smeer-1-schaal));
	opacity: var(--poster-smeer-1-dekking);
	filter: blur(var(--poster-smeer-1-waas));
}

:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
)::after {
	transform: scale(var(--poster-smeer-2-schaal));
	opacity: var(--poster-smeer-2-dekking);
	filter: blur(var(--poster-smeer-2-waas));
}

/* De link erft de kleur van de titel, zodat de smeerlagen (currentColor)
   meeverkleuren bij hover. Volgorde uit sectie 3 blijft daar in stand. */
:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
) a {
	color: inherit;
}

:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
):has(a:hover) {
	color: var(--link-hover);
}

:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
):has(a:active) {
	color: var(--link-active);
}

/* De pijl van een externe link staat op de a, niet op de titel, en zou dus
   mee uitrekken. Terugschalen houdt hem rond. */
:is(
	:is(h1, h2, h3, h4):is(.wp-block-heading, .wp-block-post-title),
	.bg-home .bg-linklist .bg-link__label,
	.bg-terug,
	.bg-nav__item
) a[target="_blank"]:not(.wp-element-button):not(.bg-event__action)::after {
	display: inline-block;
	transform: scaleX(calc(1 / var(--poster-rek)));
	transform-origin: 0 50%;
	/* Meeschalen met de titel in plaats van de vaste 13px uit sectie 3. */
	font-size: .26em;
	margin-left: .5em;
	vertical-align: .55em;
}

/* Maten. Door de rek is een titel 1,77x zo breed als zijn lettergrootte doet
   vermoeden, dus de displaymaten uit sectie 1 zijn hier te groot. Elke maat
   hangt aan de breedte van de eigen kolom (cqw), zodat het langste woord op
   elke breedte past en nooit middenin afbreekt. */
h1.wp-block-heading,
:is(h1, h2, h3, h4).wp-block-post-title {
	font-size: min(var(--size-display-l), 15cqw);
}

/* De naam op de voorpagina staat op een brede kolom op één regel over de volle
   breedte, net als de bovenregel van de poster. */
.wp-block-heading.bg-nameplate__name {
	font-size: min(11.2cqw, 15vh);
}

/* Is de kolom te smal om daar nog iets van te maken, dan breekt de naam in
   tweeën ("buğra" boven "gedik") en mag hij fors groter, precies zoals de titel
   op de poster. De maat is groot genoeg dat de volle naam niet meer op één
   regel past en klein genoeg dat het langste woord dat wel doet. */
@container (max-width: 600px) {
	.wp-block-heading.bg-nameplate__name {
		font-size: min(22cqw, 17vh);
	}
}

.bg-home .bg-linklist .bg-link__label {
	/* Naast de titel staat een notitie van vaste breedte; die trekken we van
	   de kolom af zodat de uitgerekte tekst er op smalle schermen vanaf blijft. */
	font-size: clamp(18px, min(9cqw, calc((100cqw - 150px) / 7.7)), 72px);
}

.bg-terug,
.bg-nav__item {
	font-size: clamp(16px, 1.7vw, 24px);
}

/* ==========================================================================
   6. Home
   ========================================================================== */

.wp-block-group.bg-home {
	/* vmin in plaats van vw: op een laag venster krimpt de marge mee zodat de
	   voorpagina op desktop niet gaat scrollen. */
	--bg-home-pad: clamp(24px, 3.8vmin, 56px);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	gap: clamp(24px, 4vw, 72px);
	min-height: 100dvh;
	padding-block: var(--bg-home-pad);
	align-items: stretch;
	box-sizing: border-box;
}

.wp-block-group.bg-home__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: clamp(24px, 4vmin, 48px);
	min-width: 0;
}

.wp-block-group.bg-nameplate {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Typografie: sectie 5b. Op een laag venster krimpt de naam mee via de vh-tak
   van zijn maat, zodat de voorpagina zonder scrollen op één scherm past. */
.bg-nameplate__name {
	margin: 0;
	/* Staart van ğ en g vrijhouden van de kicker (regelafstand .82). */
	padding-bottom: .2em;
}

/* Nog lager: ook de linkregels worden iets compacter. */
@media (max-height: 760px) {
	.bg-home .bg-linklist > .bg-link {
		padding-block: clamp(10px, 1.6vmin, 16px);
	}
}

.bg-home__footer {
	margin: 0;
}

/* De foto loopt door tot de venstranden: hij breekt uit de paginagoot en de
   verticale marge van het raster, zodat hij geen los vlak in de pagina is.
   Stretch in plaats van height:100%, want alleen dan telt de negatieve marge
   mee in de hoogte. */
.wp-block-image.bg-home__photo {
	position: relative;
	align-self: stretch;
	min-height: 0;
	min-width: 0;
	margin: calc(-1 * var(--bg-home-pad)) calc(-1 * var(--gutter-page)) calc(-1 * var(--bg-home-pad)) 0;
}

/* De foto is een link naar de voorpagina. De link vult het hele vlak, anders
   is alleen de nulbrede inline-doos klikbaar en niet de foto zelf. */
.bg-home__photo a {
	position: absolute;
	inset: 0;
	display: block;
}

/* Absoluut gepositioneerd zodat de eigen hoogte van de foto de rasterrij nooit
   oprekt: de rij volgt de tekstkolom en 100dvh. De foto's zijn vrijstaand
   (achtergrond weggesneden), dus contain in plaats van cover: de hele figuur
   staat op de pagina, met zijn voeten op de onderrand. */
.bg-home__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	display: block;
}

.bg-home__photo figcaption {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	margin: 0;
	padding: 0;
	background: none;
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Twee foto's in het patroon: de lichte persfoto is standaard, de posterfoto
   verschijnt alleen in de stijlvariatie "Poster" (styles/poster.json). */
.wp-block-image.bg-swap--licht {
	display: var(--wp--custom--swap-licht, block);
}

.wp-block-image.bg-swap--poster {
	display: var(--wp--custom--swap-poster, none);
}

/* ==========================================================================
   7. Linklijst
   ========================================================================== */

.wp-block-group.bg-linklist {
	display: block;
	min-width: 0;
}

.bg-linklist > .bg-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--hairline) solid var(--border-hairline);
	margin: 0;
}

.bg-linklist > .bg-link:first-child {
	border-top: var(--hairline) solid var(--border-hairline);
}

.bg-link__label {
	font: var(--weight-regular) var(--size-link-xl)/1.12 var(--font-display);
	letter-spacing: var(--ls-heading);
	margin: 0;
	min-width: 0;
}

.bg-link--l .bg-link__label,
.bg-linklist--l .bg-link__label,
.bg-link__label--l {
	font-size: var(--size-link-l);
}

.bg-link__note {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	flex-shrink: 0;
	margin: 0;
}

/* ==========================================================================
   7b. Paginanavigatie
   De regel boven aan elke subpagina: terug naar de voorpagina links, de drie
   pagina's en Instagram rechts. Typografie: sectie 5b.

   De rek staat hier op de regel als geheel, niet op de losse items. Een
   transform verandert de layout niet, dus items die zichzelf rekken gaan over
   elkaar heen staan; nu meet de flexregel de ongerekte maat en rekt de hele
   rij daarna in een keer uit. De rek is alleen horizontaal, dus de ruimte
   tussen de items staat op hun eigen maat gedeeld door --poster-rek en de
   ruimte tussen de regels op de gewone maat.
   ========================================================================== */

.wp-block-group.bg-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: calc(var(--space-5) / var(--poster-rek));
	row-gap: var(--space-3);
	width: calc(100% / var(--poster-rek));
	transform: scaleX(var(--poster-rek));
	transform-origin: 0 50%;
	margin: 0 0 var(--space-7);
}

/* De terug-link houdt links; de rest schuift naar de andere kant. */
.bg-nav > .bg-terug {
	margin-inline-end: auto;
}

/* De pagina waar je al bent blijft staan als merkteken, zonder link. Dempen
   met dekking en niet met een kleur: in de postervariatie liggen de inkt en
   de gedempte tekstkleur te dicht bij elkaar om verschil te zien. */
.bg-nav__item.is-current {
	opacity: .45;
}

/* Instagram: hetzelfde beeldmerk als op de voorpagina, in de maat van de
   letters ernaast. De regel rekt alles 1,77x uit; het merkje moet rond
   blijven, dus het schaalt zelf terug en reserveert de smallere breedte.
   De negatieve marge zet het midden van het teruggeschaalde vierkant weer
   op het midden van die smallere plek. */
.bg-nav__ig {
	--ig-teken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.15' fill='%23fff' stroke='none'/%3E%3C/svg%3E");

	position: relative;
	isolation: isolate;
	display: block;
	width: calc(1em / var(--poster-rek));
	height: 1em;
	font-size: clamp(16px, 1.7vw, 24px);
	color: var(--display-ink);
	margin: 0;
	filter: blur(var(--poster-waas));
}

.bg-nav__ig a {
	color: inherit;
	display: block;
}

/* Geen pijl bij deze externe link: het beeldmerk zegt zelf waar hij heen gaat.
   De uitzonderingen uit sectie 3 staan erbij, anders wint die regel. */
.bg-nav__ig a[target="_blank"]:not(.wp-element-button):not(.bg-event__action)::after {
	content: none;
}

.bg-nav__ig svg {
	display: block;
	width: 1em;
	height: 1em;
	margin-inline-start: calc((1em / var(--poster-rek) - 1em) / 2);
	transform: scaleX(calc(1 / var(--poster-rek)));
	transform-origin: 50% 50%;
}

/* Dezelfde twee smeerlagen als bij de letters, nu als masker van hetzelfde
   beeldmerk: de vulling is currentColor, dus het merkje verkleurt mee. */
.bg-nav__ig::before,
.bg-nav__ig::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc((1em / var(--poster-rek) - 1em) / 2);
	width: 1em;
	height: 1em;
	z-index: -1;
	pointer-events: none;
	background: currentColor;
	-webkit-mask: var(--ig-teken) center / contain no-repeat;
	mask: var(--ig-teken) center / contain no-repeat;
	transform-origin: 50% 50%;
}

.bg-nav__ig::before {
	transform: scaleX(calc(1 / var(--poster-rek))) scale(var(--poster-smeer-1-schaal));
	opacity: var(--poster-smeer-1-dekking);
	filter: blur(var(--poster-smeer-1-waas));
}

.bg-nav__ig::after {
	transform: scaleX(calc(1 / var(--poster-rek))) scale(var(--poster-smeer-2-schaal));
	opacity: var(--poster-smeer-2-dekking);
	filter: blur(var(--poster-smeer-2-waas));
}

.bg-nav__ig:has(a:hover) {
	color: var(--link-hover);
}

.bg-nav__ig:has(a:active) {
	color: var(--link-active);
}

/* ==========================================================================
   8. Twee kolommen: bio en contact
   ========================================================================== */

/* De pagina vult minstens het venster en de paginaschil geeft onderaan geen
   marge meer: die verhuist naar de tekstkolom. Zo reikt de portretkolom tot de
   echte onderrand, ook op contact, waar de tekst maar een half scherm vult.
   Twee flexschakels eronder geven het raster de resterende hoogte door. */
.wp-block-group.bg-site--page:has(.bg-two-col) {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	padding-bottom: 0;
}

.bg-site--page:has(.bg-two-col) > .wp-block-post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bg-site--page:has(.bg-two-col) > .wp-block-post-content > .bg-two-col {
	flex: 1;
}

.wp-block-group.bg-two-col {
	display: grid;
	/* De portretkolom is ruimer dan voorheen, zodat de figuur groter mag staan
	   zonder in de breedte klem te lopen. */
	grid-template-columns: minmax(0, 1fr) minmax(240px, 400px);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.wp-block-group.bg-two-col--contact {
	grid-template-columns: minmax(0, 1fr) minmax(240px, 480px);
}

.wp-block-group.bg-two-col__main {
	min-width: 0;
	/* De ondermarge die de paginaschil hierboven inlevert. */
	padding-bottom: var(--bg-page-pad);
}

/* De figuur staat onderaan zijn kolom en blijft met sticky aan de onderrand
   van het venster plakken. Op contact valt dat samen: de kolom loopt tot de
   onderrand. Op bio is de tekst langer dan het scherm; daar schuift de figuur
   mee tot hij bij het scrollen zijn rustplek onderaan de pagina bereikt. Zo
   staat hij overal op een rand en zweeft hij nergens. */
.wp-block-image.bg-portrait {
	margin: 0;
	align-self: end;
	position: sticky;
	bottom: 0;
}

/* Ook dit portret is een link naar de voorpagina. De link is precies zo breed
   als de foto en neemt het centreren over, zodat er naast het beeld geen
   onzichtbare klikbare strook overblijft. */
.bg-portrait a {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* Vrijstaande foto: geen uitsnede, de figuur houdt zijn eigen verhouding en
   staat direct op de pagina. De hoogtegrens is het venster min de kop van de
   pagina (ondermarge plus navigatieregel), zodat de foto van net onder de
   navigatie tot de onderrand loopt en contact niet om die paar pixels hoeft
   te scrollen. */
.bg-portrait img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(calc(100dvh - var(--bg-page-pad) - 4.5rem), 1080px);
	margin-inline: auto;
}

/* Binnen de link centreert de link zelf al; een tweede auto-marge zou de foto
   in een te brede doos nog een keer verschuiven. */
.bg-portrait a img {
	margin-inline: 0;
}

/* De posterfoto loopt door tot de rechter vensterrand, net als de foto op de
   voorpagina: hij breekt uit de paginagoot in plaats van als los vlak in de
   hoek te staan. Deze figuur staat alleen in de Poster-versie aan (de crème-
   versie toont zijn eigen foto met display: none hierop), dus de regel hoeft
   niet op de variatie gescoped te worden. */
.wp-block-image.bg-portrait--poster {
	margin-right: calc(-1 * var(--gutter-page));
}

.bg-portrait--poster img {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.bg-portrait figcaption {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
	margin: var(--space-3) 0 0;
}

/* Bio: afstand tussen kicker en perslijst. */
.bg-two-col__main .bg-kicker {
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   9. Contact
   ========================================================================== */

.wp-block-group.bg-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: var(--measure-narrow);
}

.wp-block-group.bg-contact-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.wp-block-separator.bg-rule {
	width: 100%;
	max-width: none;
	height: var(--hairline);
	border: 0;
	border-top: var(--hairline) solid var(--border-hairline);
	background: none;
	opacity: 1;
	margin: 0;
}

/* ==========================================================================
   10. Knoppen
   Specificiteit ligt bewust boven :root :where(...) uit theme.json en boven
   de core-stijl voor is-style-outline.
   ========================================================================== */

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

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: var(--weight-medium) var(--size-meta)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 20px;
	border: var(--hairline) solid transparent;
	border-radius: var(--radius-1);
	background-color: var(--border-strong);
	color: var(--surface-page);
	transition: var(--transition-surface);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: var(--link-hover);
	color: var(--surface-page);
	border-color: transparent;
}

.wp-block-button .wp-block-button__link:visited {
	color: var(--surface-page);
}

.wp-block-button.is-style-pill > .wp-block-button__link {
	border-radius: var(--radius-pill);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--text-primary);
	border: var(--hairline) solid var(--border-strong);
	padding: 11px 20px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:visited {
	color: var(--text-primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--border-strong);
	color: var(--surface-page);
	border-color: var(--border-strong);
}

/* ==========================================================================
   11. Agenda (blok bugra-gedik/agenda)
   ========================================================================== */

.bg-agenda {
	border-top: var(--rule-strong) solid var(--border-strong);
	margin: 0 0 var(--space-5);
}

.bg-event {
	display: grid;
	grid-template-columns: minmax(96px, 120px) minmax(90px, 160px) 1fr auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: var(--hairline) solid var(--border-hairline);
	color: var(--text-primary);
	transition: var(--transition-link);
}

.bg-event__date {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-accent);
}

.bg-event__city {
	font: var(--type-body);
	color: inherit;
}

.bg-event__time {
	color: var(--text-muted);
	margin-left: var(--space-2);
}

.bg-event__venue {
	font: var(--weight-regular) var(--size-link-l)/1.1 var(--font-display);
	color: inherit;
	transition: var(--transition-link);
}

/* De opmerking staat in een kleinere sans naast de zaalnaam in de serif; een
   kale spatie is daar te krap. Zelfde ademruimte als bij stad en tijd. */
.bg-event__note {
	color: var(--text-muted);
	font: var(--type-body);
	margin-left: var(--space-2);
}

.bg-event:hover .bg-event__venue {
	color: var(--link-hover);
}

.bg-event__action {
	font: var(--weight-medium) var(--size-micro)/1.3 var(--font-sans);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--text-secondary);
	justify-self: end;
}

a.bg-event__action:visited {
	color: var(--text-secondary);
}

a.bg-event__action:hover {
	color: var(--link-hover);
}

.bg-event.is-sold-out,
.bg-event.is-past {
	color: var(--text-muted);
}

.bg-event.is-sold-out .bg-event__date,
.bg-event.is-past .bg-event__date {
	color: var(--text-muted);
}

.bg-event.is-sold-out:hover .bg-event__venue,
.bg-event.is-past:hover .bg-event__venue {
	color: inherit;
}

.bg-agenda__empty {
	font: var(--type-body);
	color: var(--text-secondary);
	padding: var(--space-4) 0;
	margin: 0;
}

/* Agendapagina: titel, ondertitel, lijst, afsluitende regel. */
.bg-agenda-page .bg-title {
	margin-bottom: var(--space-3);
}

.bg-agenda-page .bg-title + .bg-meta {
	margin-bottom: var(--space-6);
}

.bg-agenda-page > .bg-meta:last-child {
	margin-top: var(--space-5);
}

/* ==========================================================================
   12. Berichtenlijst (index.html) en losse berichten
   ========================================================================== */

.bg-postlist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bg-postlist .wp-block-post {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--hairline) solid var(--border-hairline);
}

.bg-postlist .wp-block-post:first-child {
	border-top: var(--hairline) solid var(--border-hairline);
}

.bg-postlist .bg-link__label {
	font-size: var(--size-link-l);
}

/* ==========================================================================
   13. Mobiel
   ========================================================================== */

@media (max-width: 760px) {
	/* Eén scherm, geen scrollen: naam boven, foto vult de resterende hoogte,
	   links en footer eronder. Het raster is precies de viewporthoogte. */
	.wp-block-group.bg-home {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		height: 100dvh;
		min-height: 0;
		gap: var(--space-4);
		padding-block: var(--space-5);
	}

	/* De tekstkolom valt weg als grid-item zodat de foto tussen de naam en
	   de links kan staan. */
	.wp-block-group.bg-home__text {
		display: contents;
	}

	.wp-block-group.bg-nameplate {
		order: 1;
		grid-row: 1;
		gap: var(--space-2);
	}

	/* Doorlopend van rand tot rand; verticaal houdt de foto zijn plek tussen
	   de naam en de linklijst. */
	.wp-block-image.bg-home__photo {
		order: 2;
		grid-row: 2;
		min-height: 0;
		overflow: hidden;
		margin: 0 calc(-1 * var(--gutter-page));
	}

	.wp-block-group.bg-linklist {
		order: 3;
		grid-row: 3;
	}

	.bg-home .bg-linklist > .bg-link {
		padding-block: var(--space-3);
	}

	.bg-home__footer {
		order: 4;
		grid-row: 4;
	}

	.wp-block-group.bg-two-col,
	.wp-block-group.bg-two-col--contact {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Eén kolom: de posterfoto raakt nu beide vensterranden, net als de foto
	   op de voorpagina. */
	.wp-block-image.bg-portrait--poster {
		margin-inline: calc(-1 * var(--gutter-page));
	}

	/* In één kolom staat de foto onder de tekst en dus al op de onderrand van
	   de pagina. Sticky zou hem daar losmaken en over de tekst laten schuiven,
	   dus die zetten we hier uit. */
	.wp-block-image.bg-portrait {
		position: static;
	}

}

/* Lage liggende telefoonschermen: dan past het niet op één scherm en mag
   de pagina gewoon scrollen, met de foto op een vaste verhouding. */
@media (max-width: 760px) and (max-height: 560px) {
	.wp-block-group.bg-home {
		height: auto;
		min-height: 100dvh;
	}

	.bg-home__photo img {
		position: static;
		inset: auto;
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	.bg-event {
		grid-template-columns: 1fr auto;
		gap: var(--space-1) var(--space-4);
	}

	.bg-event__date {
		grid-column: 1;
		grid-row: 1;
	}

	.bg-event__action {
		grid-column: 2;
		grid-row: 1;
	}

	.bg-event__city {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.bg-event__venue {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* Onder deze breedte past de navigatieregel niet meer op één regel. Dan krijgt
   de terug-link een regel voor zichzelf en verdelen de andere items zich over
   de volle breedte eronder, zodat er geen losse staart onder "terug" hangt. */
@media (max-width: 520px) {
	.wp-block-group.bg-nav {
		justify-content: space-between;
		row-gap: var(--space-4);
	}

	.bg-nav > .bg-terug {
		flex-basis: 100%;
		margin-inline-end: 0;
	}
}