/* Zelf-gehoste fonts (geen Google Fonts — AVG-vriendelijk) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

/* WordPress: ruimte voor de admin-balk boven de vaste navigatie */
body.admin-bar .nav { top: 32px; }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 10000; padding: .75rem 1rem; background: var(--nacht); color: var(--nacht-papier); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--brons); outline-offset: 4px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ————————————————————————————————————————————————
   Designsysteem — rustig, warm, klassiek
   ———————————————————————————————————————————————— */

:root {
  /* kleur — bewust weinig: porselein, inkt, brons */
  --porselein: #f5f2ec;
  --papier: #ede8df;
  --inkt: #1b1815;
  --inkt-60: rgba(27, 24, 21, 0.62);
  --inkt-40: rgba(27, 24, 21, 0.42);
  --brons: #9a7b52;
  --lijn: rgba(27, 24, 21, 0.14);

  /* donkere band */
  --nacht: #161311;
  --nacht-papier: #eae4da;
  --nacht-60: rgba(234, 228, 218, 0.6);
  --nacht-lijn: rgba(234, 228, 218, 0.16);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter Variable', system-ui, sans-serif;
	--font-display: var(--serif);
	--font-heading: var(--serif);
	--font-body: var(--sans);
	--font-ui: var(--sans);

  --marge: clamp(1.25rem, 5vw, 5rem);
  --sectie: clamp(6rem, 14vh, 10rem);

  --vloeiend: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Live Builder motion tokens. Entree- en scrolleffecten worden gecombineerd. */
.heeft-js .lp-motion {
  --lp-progress: 0;
  --lp-entrance-opacity: 1;
  --lp-entrance-transform: translate3d(0,0,0);
  --lp-parallax-transform: translate3d(0,0,0);
  --lp-scroll-transform: translate3d(0,0,0);
  opacity: var(--lp-scroll-opacity,var(--lp-entrance-opacity));
  transform: var(--lp-entrance-transform) var(--lp-parallax-transform) var(--lp-scroll-transform);
}
.heeft-js .lp-effect-fade,
.heeft-js .lp-effect-slide-up,
.heeft-js .lp-effect-slide-left,
.heeft-js .lp-effect-scale {
  --lp-entrance-opacity: 0;
  transition: opacity var(--lp-duration,1200ms) var(--vloeiend), transform var(--lp-duration,1200ms) var(--vloeiend);
}
.heeft-js .lp-effect-slide-up { --lp-entrance-transform: translateY(var(--lp-strength-px,20px)); }
.heeft-js .lp-effect-slide-left { --lp-entrance-transform: translateX(var(--lp-strength-px,20px)); }
.heeft-js .lp-effect-scale { --lp-entrance-transform: scale(var(--lp-scale-start,.96)); }
.heeft-js .lp-motion.is-lp-active { --lp-entrance-opacity: 1; --lp-entrance-transform: translate3d(0,0,0); }
.heeft-js .lp-effect-parallax,
.heeft-js .lp-effect-parallax-subtle {
  will-change:transform;
  transition: transform var(--lp-duration,1200ms) var(--vloeiend);
}
.lp-transition-fade { box-shadow: inset 0 5rem 5rem -6rem color-mix(in srgb,var(--inkt) 28%,transparent); }
.lp-transition-overlap { margin-top:var(--lp-overlap,-10px); border-radius:var(--lp-overlap-radius,5px) var(--lp-overlap-radius,5px) 0 0; }
.lp-transition-line::after { content:'';position:absolute;inset:0 var(--marge) auto;height:1px;background:var(--lijn); }
.lp-sticky-top { position:sticky!important;top:0; }
.lp-sticky-bottom { position:sticky!important;bottom:0; }
[data-lp-scroll]:not([data-lp-scroll="none"]){will-change:transform,opacity,filter;}
@media(max-width:782px){[data-lp-disable-mobile="1"]{opacity:1!important;transform:none!important;transition:none!important;margin-top:0!important}}
@media(prefers-reduced-motion:reduce){.lp-motion{opacity:1!important;transform:none!important;transition:none!important;margin-top:0!important}}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 1025px) { html.lp-scroll-instant-desktop { scroll-behavior: auto; } }
@media (min-width: 601px) and (max-width: 1024px) { html.lp-scroll-instant-tablet { scroll-behavior: auto; } }
@media (max-width: 600px) { html.lp-scroll-instant-mobile { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--font-body-size, 1rem);
  font-weight: 380;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--porselein);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
/* Per-device <picture> is transparant voor de layout, zodat alle bestaande
   afbeeldingsregels (object-fit, hoogte 100%, aspect-ratio) ongewijzigd op de
   <img> blijven werken. */
picture { display: contents; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[data-lp-part][hidden], [data-lp-parts-group][hidden] { display: none!important; }
[data-lp-section-number][hidden] { display: none!important; }

::selection { background: var(--brons); color: var(--porselein); }

/* ————— typografie ————— */

.serif { font-family: var(--font-heading); }

.kicker {
	font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 480;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brons);
}

.nav-link,
.nav-hamburger,
.hero-scroll,
.over-feiten dt,
.werk-filter,
.werk-meta,
.werk-jaar,
.showreel-titel,
.video-bijschrift,
.taal-media.is-typo .klein,
.taal-audio,
.taal-naam .niveau,
.lp-lightbox-inhoud figcaption,
.contact-links,
.footer { font-family: var(--font-ui); }

/* Schaal per typografierol; lokaal overschrijfbaar op iedere sectie. */
.hero-naam,
.nav-merk,
.taal-media.is-typo .groot,
.contact-mail { zoom: var(--font-display-scale, 1); }

.kop,
.menu-overlay a:not(.menu-taal),
.over-intro,
.werk-titel,
.taal-naam .naam,
.pers-quote { zoom: var(--font-heading-scale, 1); }

.showreel-toelichting,
.werk-modal-tekst { zoom: var(--font-body-scale, 1); }

.kicker,
.nav-link,
.nav-hamburger,
.hero-scroll,
.over-feiten dt,
.werk-filter,
.werk-jaar,
.showreel-titel,
.video-bijschrift,
.taal-media.is-typo .klein,
.taal-audio,
.taal-naam .niveau,
.lp-lightbox-inhoud figcaption,
.contact-links,
.footer { zoom: var(--font-ui-scale, 1); }

.kop {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.kop em {
  font-style: italic;
  font-weight: 450;
  color: var(--brons);
}

.sectiekop { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.sectiekop .kicker { display: flex; align-items: center; gap: 0.9rem; }
.sectiekop .kicker::after {
  content: '';
  height: 1px; width: 3.5rem;
  background: var(--brons);
  opacity: 0.5;
}

/* ————— layout ————— */

.wrap { padding-inline: var(--marge); max-width: 90rem; margin-inline: auto; }

section { padding-block: var(--sectie); position: relative; }

section[data-lp-block] {
	margin-top: var(--lp-space-before, 0);
	margin-bottom: var(--lp-space-after, 0);
}

section.lp-custom-background {
	background: var(--lp-section-background) !important;
}

section.lp-section-typography {
	font-family: var(--font-body);
	font-size: var(--font-body-size, 1rem);
}

section.lp-section-bg-dark,
section.lp-section-bg-accent,
section.lp-section-custom-dark {
	--inkt: var(--nacht-papier);
	--inkt-60: color-mix(in srgb, var(--nacht-papier) 62%, transparent);
	--inkt-40: color-mix(in srgb, var(--nacht-papier) 42%, transparent);
	--lijn: color-mix(in srgb, var(--nacht-papier) 16%, transparent);
	color: var(--nacht-papier);
}

section.lp-section-bg-background,
section.lp-section-bg-surface,
section.lp-section-custom-light {
	color: var(--inkt);
}

section.lp-section-bg-background :is(.uitgelicht-tekst, .video-bijschrift, .showreel-toelichting, .contact-tekst, .contact-links a, .footer),
section.lp-section-bg-surface :is(.uitgelicht-tekst, .video-bijschrift, .showreel-toelichting, .contact-tekst, .contact-links a, .footer),
section.lp-section-custom-light :is(.uitgelicht-tekst, .video-bijschrift, .showreel-toelichting, .contact-tekst, .contact-links a, .footer) {
	color: var(--inkt-60);
}

section.lp-section-bg-background .footer,
section.lp-section-bg-surface .footer,
section.lp-section-custom-light .footer {
	border-color: var(--lijn);
}

.hairline { border-top: 1px solid var(--lijn); }

/* ————— reveal-animaties (subtiel) —————
   Alleen actief wanneer JS draait (html.heeft-js): zonder JS is alles zichtbaar. */

.heeft-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition:
    opacity 1.1s var(--vloeiend),
    transform 1.1s var(--vloeiend),
    filter 1.1s var(--vloeiend);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}

.heeft-js .reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
  filter: none;
}

/* beeld dat zich langzaam 'opent': een gordijn (::after) schuift weg.
   Bewust geen clip-path op het element zelf — een volledig weggeknipt element
   triggert in Chrome geen IntersectionObserver en laadt geen lazy images. */
.onthul { position: relative; }

.heeft-js .onthul::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--onthul-kleur, var(--porselein));
  transform-origin: bottom;
  transition: transform 1.4s var(--vloeiend);
  transition-delay: var(--d, 0s);
  pointer-events: none;
}

.heeft-js .onthul.is-zichtbaar::after { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .onthul {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .heeft-js .onthul::after { content: none !important; }
  [data-parallax] { transform: none !important; }
  .hero-beeld img { animation: none !important; }
}

/* ————— navigatie ————— */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--marge);
  transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease;
}

.nav.nav-sticky-disabled { position: absolute; }

/* als het overlay-menu open is, blijft de balk (merk + sluitknop) erboven */
.nav.menu-open { z-index: 60; }

.nav.is-vast {
  background: color-mix(in srgb, var(--lp-sticky-bg, var(--porselein)) var(--lp-sticky-opacity, 82%), transparent);
  -webkit-backdrop-filter: blur(var(--lp-sticky-blur, 14px));
  backdrop-filter: blur(var(--lp-sticky-blur, 14px));
  box-shadow: 0 1px 0 var(--lijn);
  padding-block: 0.8rem;
}

.nav-merk {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 60;
}

.nav-merk-tekst { color: var(--lp-logo-color, var(--brons)); transition: color .35s ease; }
.nav.is-vast .nav-merk-tekst { color: var(--lp-logo-sticky-color, var(--inkt)); }
.nav.menu-open .nav-merk-tekst { color: var(--lp-logo-sticky-color, var(--inkt)); }

.nav-merk-afbeelding {
  display: block;
  width: auto;
  height: auto;
  max-width: min(12rem, 36vw);
  max-height: 2.25rem;
  object-fit: contain;
}

.nav-links { display: flex; gap: 2.2rem; align-items: center; }

.nav-link {
  font-size: 0.72rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-nav-sticky-color, var(--inkt-60));
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brons);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--vloeiend);
}

.nav-link:hover { color: var(--lp-nav-sticky-color, var(--inkt)); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* bovenaan de pagina staan de links over de herofoto — dan licht */
.nav:not(.is-vast) .nav-link,
.nav:not(.is-vast):not(.menu-open) .nav-hamburger { color: var(--lp-nav-color, var(--porselein)); }
.nav:not(.is-vast) .nav-link:hover { color: var(--lp-nav-color, var(--porselein)); }

@media (max-width: 860px) {
  /* op mobiel staat ook het woordmerk over de foto */
  .nav:not(.is-vast):not(.menu-open) .nav-merk:not(.nav-merk-tekst) { color: #f9f7f2; }
}

/* taalwissel: zelfde stijl als nav-link, met subtiel scheidingsteken */
.nav-links .nav-taal {
  border-left: 1px solid var(--lijn);
  padding-left: 2.2rem;
}

.nav:not(.is-vast) .nav-links .nav-taal { border-color: rgba(245, 242, 236, 0.3); }

/* mobiel: taalwissel + menuknop naast elkaar */
.nav-mobiel {
  display: none;
  align-items: center;
  gap: 1.7rem;
  z-index: 60;
}

.nav-mobiel .nav-taal { color: var(--lp-nav-sticky-color, var(--brons)); }

.nav-hamburger {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 460;
}

/* als het overlay-menu open is: donkere tekst op het porseleinen overlay */
.nav.menu-open .nav-mobiel .nav-link,
.nav.menu-open .nav-hamburger { color: var(--lp-nav-sticky-color, var(--inkt)); }

/* mobiel menu-overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--porselein);
  display: grid;
  place-content: center;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-overlay a {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--vloeiend), transform 0.5s var(--vloeiend), color 0.3s;
  transition-delay: calc(var(--i) * 60ms);
}

.menu-overlay.is-open a { opacity: 1; transform: none; }
.menu-overlay a:hover { color: var(--brons); font-style: italic; }

.menu-overlay .menu-taal {
  margin-top: 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 460;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brons);
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-mobiel { display: flex; }
}

/* ————— hero ————— */

.hero {
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 0;
  overflow: clip;
}

.hero-beeld {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(46vw, 44rem);
  height: 100%;
  overflow: clip;
}

.hero-beeld figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-beeld figure.is-actief { opacity: 1; }

.hero-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--lp-hero-x, 50%) var(--lp-hero-y, 50%);
  animation: kenburns 9s ease-out both paused;
}

.hero-beeld figure.is-actief img { animation-play-state: running; }

@keyframes kenburns {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* beeld vloeit over in de achtergrond */
.hero-beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 19, 17, 0.32) 0%, transparent 20%),
    linear-gradient(90deg, var(--porselein) 0%, transparent 32%),
    linear-gradient(0deg, color-mix(in srgb, var(--porselein) 55%, transparent) 0%, transparent 30%);
  pointer-events: none;
}

.hero-inhoud {
  position: relative;
  z-index: 2;
  padding: 9rem var(--marge) 7rem;
  max-width: 68rem;
}

.hero-kicker { margin-bottom: 1.6rem; }

.hero-naam {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 8.6vw, 7.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-naam .r { display: block; overflow: clip; }

.heeft-js .hero-naam .r > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.3s var(--vloeiend);
  transition-delay: var(--d, 0s);
}

.is-geladen .hero-naam .r > span { transform: none; }

/* Naamdelen los styleerbaar: gewicht, cursief en grootte per deel via
   custom properties op de sectie. De defaults reproduceren de oorspronkelijke
   look (voornaam normaal, achternaam cursief in brons). */
.hero-naam .hero-naam-deel { display: block; }
.hero-naam .deel-1 {
  font-weight: var(--lp-hero-d1-weight, 500);
  font-style: var(--lp-hero-d1-style, normal);
  font-size: calc(1em * var(--lp-hero-d1-size, 1));
}
.hero-naam .deel-2 {
  font-weight: var(--lp-hero-d2-weight, 440);
  font-style: var(--lp-hero-d2-style, italic);
  font-size: calc(1em * var(--lp-hero-d2-size, 1));
  color: var(--brons);
}

.hero-sub {
  margin-top: 2rem;
  max-width: 26rem;
  font-size: 0.95rem;
  color: var(--inkt-60);
  line-height: 1.75;
}

.hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: var(--marge);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkt-40);
}

.hero-scroll::after {
  content: '';
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(var(--inkt-40), transparent);
  animation: scrolllijn 2.6s var(--vloeiend) infinite;
  transform-origin: top;
}

@keyframes scrolllijn {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* extreem hoge viewports (o.a. full-page captures): hero niet oneindig laten meegroeien */
@media (min-height: 5000px) {
  .hero { min-height: 58rem; }
  .hero-beeld { max-height: 58rem; }
}

@media (max-width: 860px) {
  .hero { align-items: stretch; grid-template-rows: min(62svh, 34rem) auto; }
  .hero-beeld { position: relative; inset: auto; width: 100%; height: 100%; grid-row: 1; }
  .hero-beeld::after {
    background:
      linear-gradient(180deg, rgba(22, 19, 17, 0.32) 0%, transparent 22%),
      linear-gradient(0deg, var(--porselein) 0%, transparent 22%);
  }
  .hero-inhoud { grid-row: 2; padding-block: 0 6rem; }
  .hero-scroll { display: none; }
}

/* ————— over ————— */

.over-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.over-portret { position: relative; }

.over-portret .kader {
  position: relative;
  overflow: clip;
  aspect-ratio: 4 / 5;
}

.over-portret .kader img { width: 100%; height: 100%; object-fit: cover; object-position: var(--lp-over-x, 50%) var(--lp-over-y, 50%); }

/* bronzen kaderlijn, licht verschoven — klassiek accent */
.over-portret::before {
  content: '';
  position: absolute;
  inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--brons) 55%, transparent);
  pointer-events: none;
}

.over-intro {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 470;
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 2rem;
  color: var(--inkt);
}

.over-bio p { max-width: 38rem; color: var(--inkt-60); margin-bottom: 1.2rem; }

.over-feiten {
  margin-top: 3rem;
  display: grid;
  gap: 0;
}

.over-feiten > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.875rem;
}

.over-feiten dt {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 480;
  color: var(--inkt-40);
  padding-top: 0.15rem;
}

.over-feiten dd { color: var(--inkt); }

@media (max-width: 860px) {
  .over-grid { grid-template-columns: 1fr; }
  .over-portret { max-width: 26rem; }
}

/* ————— werk ————— */

.werk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  margin-bottom: 2.5rem;
}

.werk-filter {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 460;
  color: var(--inkt-40);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.werk-filter[aria-pressed='true'] { color: var(--inkt); border-color: var(--brons); }
.werk-filter:hover { color: var(--inkt); }

.werk-inhoud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  position: relative;
}

.werk-inhoud.heeft-preview { grid-template-columns: minmax(0, 1fr) clamp(14rem, 24vw, 20rem); }

.werk-lijst { min-width: 0; list-style: none; }

.werk-rij {
  border-top: 1px solid var(--lijn);
  transition: opacity 0.45s ease;
}

.werk-rij:last-child { border-bottom: 1px solid var(--lijn); }

.werk-rij.is-verborgen { display: none; }

.werk-rij-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 2rem;
  padding-block: 1.6rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.5s var(--vloeiend);
}

.werk-rij-inner:focus-visible { outline: 2px solid var(--brons); outline-offset: 4px; }

#werk.lp-part-off-details .werk-rij-inner { cursor: default; }

@media (pointer: fine) {
  .werk-rij:hover .werk-rij-inner { transform: translateX(0.9rem); }
}

.werk-titel {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  transition: color 0.3s;
}

.werk-rij:hover .werk-titel { color: var(--brons); }

.werk-meta {
  grid-column: 1;
  font-size: 0.82rem;
  color: var(--inkt-60);
}

.werk-meta .rol { color: var(--inkt); }

.werk-jaar {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--inkt-40);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.werk-open-pijl {
  position: relative;
  width: .85rem;
  height: .85rem;
  color: var(--brons);
  flex: 0 0 auto;
  transition: transform .35s var(--vloeiend);
}
.werk-open-pijl::before {
  content: '';
  position: absolute;
  top: .08rem;
  right: .08rem;
  width: .46rem;
  height: .46rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.werk-open-pijl::after {
  content: '';
  position: absolute;
  top: .42rem;
  right: .03rem;
  width: .82rem;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}
.werk-rij:hover .werk-open-pijl, .werk-rij-inner:focus-visible .werk-open-pijl { transform: translate(.18rem,-.18rem); }

/* Productiebeeld rechts van de credits. Sticky blijft binnen de sectie. */
.werk-preview {
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
  width: 100%;
  aspect-ratio: 4 / 5;
  pointer-events: none;
  overflow: clip;
  opacity: 0;
  transform: translateX(1.5rem) scale(0.97);
  border-radius: .2rem;
  background: var(--papier);
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--inkt) 14%, transparent);
  transition: opacity 0.45s ease, transform 0.65s var(--vloeiend);
}

.werk-preview img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.45s ease, transform 0.8s var(--vloeiend);
}

.werk-preview img.is-actief { opacity: 1; transform: scale(1); }
.werk-preview.is-actief { opacity: 1; transform: translateX(0) scale(1); }

@media (pointer: coarse), (max-width: 900px) {
  .werk-inhoud.heeft-preview { grid-template-columns: minmax(0, 1fr); }
  .werk-preview { display: none; }
}

#werk.lp-part-off-media .werk-inhoud,
#werk.lp-part-off-items .werk-inhoud { grid-template-columns: minmax(0, 1fr); }

/* Productiedetails gebruiken de dialog top-layer; layout en animatie zijn los instelbaar. */
.werk-modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--inkt);
  overflow: hidden;
  opacity: 0;
  transition: opacity .45s ease;
}

.werk-modal::backdrop {
  background: color-mix(in srgb, var(--nacht) 70%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.werk-modal-paneel {
  position: absolute;
  top: 5dvh;
  left: 50%;
  width: min(72rem, 92vw);
  height: 90dvh;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--porselein);
  box-shadow: 0 2rem 7rem rgba(0,0,0,.24);
  border-radius: .25rem;
  --lp-modal-position: translateX(-50%);
  --lp-modal-enter: translateY(1.25rem) scale(.975);
  transform: var(--lp-modal-position) var(--lp-modal-enter);
  transform-origin: center bottom;
  clip-path: inset(0 0 0 0);
  opacity: .6;
  transition: transform .52s var(--vloeiend), opacity .4s ease, clip-path .7s var(--vloeiend);
}

.werk-modal.is-open { opacity: 1; }
.werk-modal.is-open .werk-modal-paneel { transform: var(--lp-modal-position) translateY(0) scale(1); clip-path: inset(0 0 0 0); opacity: 1; }

.werk-modal-sluiten {
  position: sticky;
  display: grid;
  place-items: center;
  z-index: 2;
  top: 0;
  margin: 0 0 -3rem auto;
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  background: color-mix(in srgb, var(--porselein) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .3s var(--vloeiend), border-color .3s;
}

.werk-modal-sluiten::before,
.werk-modal-sluiten::after {
  content: '';
  position: absolute;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
}
.werk-modal-sluiten::before { transform: rotate(45deg); }
.werk-modal-sluiten::after { transform: rotate(-45deg); }

.werk-modal-sluiten:hover { transform: rotate(8deg) scale(1.05); border-color: var(--brons); }
.werk-modal-kop { max-width: 52rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.werk-modal-kop .kop { margin-top: .8rem; font-size: clamp(3rem, 8vw, 7rem); line-height: .88; }
.werk-modal-meta { max-width: 42rem; margin-top: 1.5rem; color: var(--inkt-60); }
.werk-modal-tekst { max-width: 48rem; margin-bottom: clamp(3rem, 7vw, 6rem); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.werk-modal-tekst p + p { margin-top: 1.2em; }
.werk-modal-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.werk-modal-medium { margin: 0; overflow: hidden; background: var(--papier); }
.werk-modal-medium:nth-child(3n + 1), .werk-modal-medium.is-video { grid-column: 1 / -1; }
.werk-modal-medium img { width: 100%; height: auto; }
.werk-modal-medium video { display: block; width: 100%; max-height: 80dvh; background: #000; }
.werk-modal-medium figcaption { padding-top: .65rem; color: var(--inkt-60); font-size: .78rem; }

/* Layouts */
#werk.lp-detail-style-split .werk-modal-paneel {
  inset: 0 0 0 auto;
  left: auto;
  width: min(68rem, 92vw);
  height: 100dvh;
  border-radius: 0;
  --lp-modal-position: translateX(0);
}

#werk.lp-detail-style-cinematic .werk-modal-paneel {
  inset: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  border-radius: 0;
  background: var(--nacht);
  color: var(--nacht-papier);
  --lp-modal-position: translateX(0);
}
#werk.lp-detail-style-cinematic .werk-modal-kop,
#werk.lp-detail-style-cinematic .werk-modal-tekst { margin-inline: auto; }
#werk.lp-detail-style-cinematic .werk-modal-kop .kop { color: var(--nacht-papier); text-align: center; }
#werk.lp-detail-style-cinematic .werk-modal-kop .kicker { text-align: center; }
#werk.lp-detail-style-cinematic .werk-modal-meta,
#werk.lp-detail-style-cinematic .werk-modal-medium figcaption { color: var(--nacht-60); }
#werk.lp-detail-style-cinematic .werk-modal-sluiten { color: var(--nacht-papier); border-color: var(--nacht-lijn); background: color-mix(in srgb,var(--nacht) 86%,transparent); }
#werk.lp-detail-style-cinematic .werk-modal-medium { background: color-mix(in srgb,var(--nacht-papier) 8%,transparent); }

#werk.lp-detail-style-minimal .werk-modal-paneel {
  top: 50%;
  width: min(50rem, 92vw);
  height: auto;
  max-height: 88dvh;
  padding: clamp(4rem, 7vw, 6rem);
  border: 1px solid var(--lijn);
  box-shadow: 0 1rem 4rem rgba(0,0,0,.14);
  --lp-modal-position: translate(-50%,-50%);
}
#werk.lp-detail-style-minimal .werk-modal-kop .kop { font-size: clamp(2.5rem, 6vw, 4.5rem); }
#werk.lp-detail-style-minimal .werk-modal-media { grid-template-columns: 1fr; }
#werk.lp-detail-style-minimal .werk-modal-medium:nth-child(n) { grid-column: 1; }

/* Openingsanimaties */
#werk.lp-detail-animation-slide-up .werk-modal-paneel { --lp-modal-enter: translateY(12%) scale(1); }
#werk.lp-detail-animation-curtain .werk-modal-paneel { --lp-modal-enter: translateY(0) scale(1); clip-path: inset(0 0 100% 0); opacity: 1; }
#werk.lp-detail-animation-none .werk-modal,
#werk.lp-detail-animation-none .werk-modal-paneel { transition: none; }
#werk.lp-detail-animation-none .werk-modal-paneel { --lp-modal-enter: translateY(0) scale(1); opacity: 1; }

@media (max-width: 620px) {
  .werk-modal-paneel,
  #werk.lp-detail-style-minimal .werk-modal-paneel { inset: 0; left: 0; width: 100%; height: 100dvh; max-height: none; padding-top: 5rem; border-radius: 0; --lp-modal-position: translateX(0); }
  .werk-modal-media { grid-template-columns: 1fr; }
  .werk-modal-medium:nth-child(n) { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .werk-modal, .werk-modal-paneel { transition: none; }
}

/* ————— uitgelicht (donkere band) ————— */

.uitgelicht {
  background: var(--nacht);
  color: var(--nacht-papier);
}

.uitgelicht .kicker { color: var(--brons); }
.uitgelicht .sectiekop .kicker::after { background: var(--brons); }

.uitgelicht-tekst { color: var(--nacht-60); max-width: 30rem; }

.showreel { margin: 0; }

.showreel-stage {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
	aspect-ratio: 16 / 9;
  overflow: clip;
  background: #000;
}

.showreel-paneel { position: absolute; inset: 0; will-change: opacity, transform, filter; }
.showreel-paneel[hidden] { display: none; }
.showreel .video-kader { width: 100%; height: 100%; margin-top: 0; }
.showreel .video-kader.is-foto { isolation: isolate; background: #141210; }
.showreel .video-kader.is-foto::before { content: ''; position: absolute; z-index: 0; inset: -8%; background-image: var(--lp-photo-bg); background-position: center; background-size: cover; filter: blur(24px); opacity: .42; transform: scale(1.08); }
.showreel .video-kader.is-foto img { position: relative; z-index: 1; opacity: 1; object-fit: contain; }
.showreel .video-kader.is-foto:hover img { opacity: 1; transform: none; }
.showreel-foto-open { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.showreel-foto-open:disabled { cursor: default; }

.showreel-galerij {
  display: flex;
	flex-wrap: wrap;
  gap: clamp(.55rem, 1vw, .8rem);
	width: 100%;
  max-width: 100%;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding: 0 0 .35rem;
}

.showreel-keuze {
	flex: 0 0 var(--lp-thumb-width, 7rem);
	min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  opacity: .58;
  transition: opacity .35s, transform .5s var(--vloeiend);
}

.showreel-keuze:hover,
.showreel-keuze.is-actief { opacity: 1; }
.showreel-keuze:hover { transform: translateY(-3px); }

.showreel-thumb {
  position: relative;
	display: grid;
	place-items: center;
	height: clamp(4.75rem, 7vw, 5.75rem);
  overflow: clip;
  border: 1px solid rgba(234, 228, 218, .18);
  background: color-mix(in srgb, var(--nacht-papier) 8%, transparent);
}

.showreel-thumb::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--brons);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--vloeiend);
}

.showreel-keuze.is-actief .showreel-thumb::after { transform: scaleX(1); }
.showreel-thumb img { width: 100%; height: 100%; object-fit: contain; background: rgba(0,0,0,.16); }
.showreel-titel { display: block; margin-top: .45rem; overflow: hidden; font-size: .64rem; letter-spacing: .09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.video-kader {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: #000;
}

.video-kader img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s, transform 1.2s var(--vloeiend); }

.video-kader:hover img { opacity: 0.7; transform: scale(1.015); }

.video-kader video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.video-afspelen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
}

.video-afspelen .knop {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 8vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(234, 228, 218, 0.5);
  background: color-mix(in srgb, var(--nacht) 30%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.5s var(--vloeiend), background 0.4s, border-color 0.4s;
}

.video-afspelen:hover .knop { transform: scale(1.08); background: var(--brons); border-color: var(--brons); }

.video-afspelen svg { width: 26%; margin-left: 6%; fill: var(--nacht-papier); }

.video-bijschrift {
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nacht-60);
}

.showreel-toelichtingen { max-width: 48rem; margin-top: clamp(1.1rem, 2vw, 1.6rem); }
.showreel-toelichting { color: var(--nacht-60); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; }
.showreel-toelichting[hidden] { display: none; }
.showreel-toelichting > * + * { margin-top: 1em; }

/* ————— talen ————— */

.talen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.taal-kaart { position: relative; }

/* typografische kaart */
.taal-media.is-typo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--inkt);
  color: var(--porselein);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.6rem;
  transition: background 0.6s ease;
}

/* subtiele bronzen gloed onderin */
.taal-media.is-typo::before {
  content: '';
  position: absolute;
  inset: auto -40% -55% -40%;
  height: 90%;
  background: radial-gradient(ellipse at 50% 100%, rgba(154, 123, 82, 0.28), transparent 65%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.taal-kaart:hover .taal-media.is-typo::before,
.taal-media.is-typo:has(.taal-audio.is-actief)::before { opacity: 1; }

.taal-media.is-typo .groot {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 450;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
}

.taal-media.is-typo .klein {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brons);
}

/* audiodemo-knop */
.taal-audio {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.85);
  border: 1px solid rgba(245, 242, 236, 0.28);
  border-radius: 99px;
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}

.taal-audio:hover { border-color: var(--brons); color: #fff; background: rgba(154, 123, 82, 0.18); }

.taal-audio svg { width: 0.6rem; fill: currentColor; flex: none; }
.taal-audio .icoon-pauze { display: none; }
.taal-audio.is-actief .icoon-speel { display: none; }
.taal-audio.is-actief .icoon-pauze { display: block; }

/* mini-equalizer, beweegt alleen tijdens het afspelen */
.taal-audio .eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 0.8rem;
}

.taal-audio.is-actief .eq { display: flex; }
.taal-audio.is-actief .label { display: none; }

.taal-audio .eq i {
  width: 2px;
  height: 100%;
  background: var(--brons);
  animation: eq 1.1s ease-in-out infinite;
  transform-origin: bottom;
}

.taal-audio .eq i:nth-child(2) { animation-delay: 0.25s; }
.taal-audio .eq i:nth-child(3) { animation-delay: 0.5s; }
.taal-audio .eq i:nth-child(4) { animation-delay: 0.12s; }

@keyframes eq {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.taal-naam {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.taal-naam .naam { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; }

.taal-naam .niveau {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-40);
}

/* ————— galerij ————— */

.galerij { background: var(--papier); --onthul-kleur: var(--papier); }

.galerij-raster {
  columns: 3;
  column-gap: clamp(1.2rem, 2.5vw, 2rem);
}

@media (max-width: 1000px) { .galerij-raster { columns: 2; } }
@media (max-width: 560px) { .galerij-raster { columns: 1; } }

.galerij-item {
  break-inside: avoid;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
  overflow: clip;
  position: relative;
}

.galerij-item img {
  width: 100%;
  transition: transform 1.6s var(--vloeiend);
}

.galerij-item:hover img { transform: scale(1.035); }
.galerij-lightbox-open { display: block; width: 100%; cursor: zoom-in; }
.galerij-lightbox-open:disabled { cursor: default; }

/* ————— gedeelde afbeeldingslightbox ————— */
.lp-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: clamp(1rem, 3vw, 2.5rem); border: 0; background: rgba(15,13,12,.96); color: #fff; opacity: 0; transition: opacity .25s ease; }
.lp-lightbox[open] { display: grid; place-items: center; }
.lp-lightbox.is-open { opacity: 1; }
.lp-lightbox::backdrop { background: rgba(15,13,12,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lp-lightbox-inhoud { display: grid; place-items: center; gap: .8rem; width: 100%; height: 100%; margin: 0; }
.lp-lightbox-inhoud img { width: auto; max-width: min(90vw, 110rem); height: auto; max-height: 86dvh; object-fit: contain; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.3); }
.lp-lightbox-inhoud figcaption { min-height: 1em; color: rgba(255,255,255,.68); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.lp-lightbox-sluiten,.lp-lightbox-nav { position: fixed; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(20,18,17,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lp-lightbox-sluiten { top: 1.25rem; right: 1.25rem; width: 3rem; aspect-ratio: 1; }
.lp-lightbox-sluiten::before,.lp-lightbox-sluiten::after { content:'';position:absolute;width:1.15rem;height:1.5px;background:currentColor; }
.lp-lightbox-sluiten::before { transform:rotate(45deg); }
.lp-lightbox-sluiten::after { transform:rotate(-45deg); }
.lp-lightbox-nav { top: 50%; width: 3.2rem; aspect-ratio: 1; transform: translateY(-50%); }
.lp-lightbox-nav::before { content:'';width:.75rem;height:.75rem;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor; }
.lp-lightbox-nav.is-vorige::before { transform:rotate(-135deg);margin-left:.3rem; }
.lp-lightbox-nav.is-volgende::before { transform:rotate(45deg);margin-right:.3rem; }
.lp-lightbox-nav.is-vorige { left: 1.25rem; }
.lp-lightbox-nav.is-volgende { right: 1.25rem; }
.lp-lightbox-nav[hidden] { display: none; }
@media (max-width: 620px) { .lp-lightbox-nav { top: auto; bottom: 1.25rem; transform: none; } .lp-lightbox-inhoud img { max-width: 94vw; max-height: 78dvh; } }

/* ————— pers ————— */

.pers-lijst { display: grid; gap: clamp(3rem, 7vw, 5rem); max-width: 52rem; margin-inline: auto; text-align: center; }

.pers-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.4;
}

.pers-quote::before { content: '“'; color: var(--brons); }
.pers-quote::after { content: '”'; color: var(--brons); }

.pers-bron {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkt-40);
}

/* ————— contact / footer ————— */

.contact {
  background: var(--nacht);
  color: var(--nacht-papier);
  text-align: center;
  padding-bottom: 0;
}

.contact .kicker { color: var(--brons); }

.contact-tekst { max-width: 28rem; margin: 1.4rem auto 3rem; color: var(--nacht-60); }

.contact-mail {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2em;
  transition: color 0.35s;
}

.contact-mail::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brons);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.6s var(--vloeiend);
}

.contact-mail:hover { color: var(--brons); }
.contact-mail:hover::after { transform: scaleX(1); }

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 3rem;
}

.contact-links a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nacht-60);
  transition: color 0.3s;
}

.contact-links a:hover { color: var(--nacht-papier); }

.footer {
  margin-top: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--nacht-lijn);
  padding: 1.6rem var(--marge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--nacht-60);
}

/* ————— sectiestijlen —————
   Ieder Luisa-blok heeft vier vaste varianten. Classic gebruikt steeds de
   basisregels hierboven; alternate, bold en minimal veranderen uitsluitend
   de presentatie, zodat inhoud en semantiek gelijk blijven. */

/* Hero: cinematisch / editorial split / statement type / minimal */
.hero.lp-style-alternate { background: var(--nacht); color: var(--nacht-papier); align-items: center; }
.hero.lp-style-alternate .hero-beeld { inset: 0 auto 0 0; width: 50%; }
.hero.lp-style-alternate .hero-beeld::after { background: linear-gradient(90deg, transparent 55%, var(--nacht) 100%); }
.hero.lp-style-alternate .hero-inhoud { margin-left: 50%; padding-left: clamp(2rem, 6vw, 7rem); }
.hero.lp-style-alternate .hero-sub { color: var(--nacht-60); }
.hero.lp-style-alternate .hero-scroll { left: calc(50% + var(--marge)); color: var(--nacht-60); }
.hero.lp-style-bold { background: var(--nacht); }
.hero.lp-style-bold .hero-beeld { width: 100%; opacity: .34; filter: grayscale(1); }
.hero.lp-style-bold .hero-beeld::after { background: linear-gradient(90deg, color-mix(in srgb,var(--nacht) 75%,transparent), color-mix(in srgb,var(--nacht) 15%,transparent)); }
.hero.lp-style-bold .hero-inhoud { color: var(--nacht-papier); max-width: 90rem; width: 100%; text-align: center; margin-inline: auto; }
.hero.lp-style-bold .hero-naam { font-size: clamp(4rem, 12vw, 11rem); line-height: .82; text-transform: uppercase; }
.hero.lp-style-bold .hero-sub { color: var(--nacht-60); margin-inline: auto; }
.hero.lp-style-bold .hero-scroll { color: var(--nacht-60); }

/* Over: portret split / magazine / profielkaart / minimal */
#over.lp-style-alternate .over-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
#over.lp-style-alternate .over-portret { grid-column: 2; grid-row: 1; }
#over.lp-style-alternate .over-tekst { grid-column: 1; grid-row: 1; columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
#over.lp-style-alternate .over-intro,
#over.lp-style-alternate .over-feiten { column-span: all; }
#over.lp-style-bold { padding-block: 0; background: var(--papier); }
#over.lp-style-bold .over-grid { grid-template-columns: minmax(14rem, 22rem) 1fr; background: var(--papier); padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid var(--lijn); }
#over.lp-style-bold .over-portret .kader { aspect-ratio: 1; border-radius: 50%; }
#over.lp-style-bold .over-portret::before { inset: .8rem -.8rem -.8rem .8rem; border-radius: 50%; }
#over.lp-style-bold .over-intro { font-size: clamp(2rem, 4vw, 3.4rem); }

/* Werk: creditslijst / kaarten / tijdlijn / minimal */
#werk.lp-style-alternate .werk-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#werk.lp-style-alternate .werk-rij { border: 1px solid var(--lijn); background: var(--papier); padding: clamp(1rem, 2vw, 1.8rem); }
#werk.lp-style-alternate .werk-rij:last-child { border-bottom: 1px solid var(--lijn); }
#werk.lp-style-alternate .werk-rij-inner { min-height: 10rem; align-content: space-between; padding: 0; }
#werk.lp-style-alternate .werk-titel { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
#werk.lp-style-bold .werk-lijst { border-left: 1px solid var(--brons); margin-left: .5rem; padding-left: clamp(1.5rem, 4vw, 4rem); }
#werk.lp-style-bold .werk-rij { position: relative; border-top: 0; }
#werk.lp-style-bold .werk-rij::before { content: ''; position: absolute; left: calc(clamp(1.5rem, 4vw, 4rem) * -1 - .32rem); top: 2.25rem; width: .6rem; aspect-ratio: 1; border-radius: 50%; background: var(--brons); }
#werk.lp-style-bold .werk-titel { font-size: clamp(2rem, 4.5vw, 3.8rem); }

/* Uitgelicht: breed cinema / split feature / ingelijst / minimal */
.uitgelicht.lp-style-alternate > .wrap { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.uitgelicht.lp-style-alternate .sectiekop,
.uitgelicht.lp-style-alternate .uitgelicht-tekst { grid-column: 1; }
.uitgelicht.lp-style-alternate figure { grid-column: 2; grid-row: 1 / span 2; }
.uitgelicht.lp-style-alternate .showreel-stage { margin-top: 0; }
.uitgelicht.lp-style-bold { background: var(--porselein); color: var(--inkt); }
.uitgelicht.lp-style-bold .uitgelicht-tekst,
.uitgelicht.lp-style-bold .video-bijschrift,
.uitgelicht.lp-style-bold .showreel-toelichting { color: var(--inkt-60); }
.uitgelicht.lp-style-bold figure { border: 1px solid var(--brons); padding: clamp(.7rem, 2vw, 1.5rem); }
.uitgelicht.lp-style-bold .showreel-stage { margin-top: 0; }
.uitgelicht.lp-style-bold .showreel-thumb { border-color: var(--lijn); }

/* Talen: grid / horizontale banden / compact / minimal */
#talen.lp-style-alternate .talen-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--lijn); }
#talen.lp-style-alternate .taal-kaart { display: grid; grid-template-columns: minmax(12rem, 1fr) 1fr; border-bottom: 1px solid var(--lijn); }
#talen.lp-style-alternate .taal-media.is-typo { aspect-ratio: auto; min-height: 9rem; place-content: center start; text-align: left; padding: 2rem; background: transparent; color: var(--inkt); }
#talen.lp-style-alternate .taal-audio { left: auto; right: 1rem; bottom: 50%; transform: translateY(50%); color: var(--inkt); border-color: var(--lijn); }
#talen.lp-style-alternate .taal-naam { padding: 2rem; margin: 0; align-self: center; }
#talen.lp-style-bold .talen-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; border: 1px solid var(--lijn); }
#talen.lp-style-bold .taal-kaart { padding: 1rem; border-right: 1px solid var(--lijn); }
#talen.lp-style-bold .taal-media.is-typo { aspect-ratio: 1; border-radius: 50%; }
#talen.lp-style-bold .taal-naam { justify-content: center; text-align: center; }
#talen.lp-style-bold .taal-naam .niveau { display: none; }

/* Galerij: mozaïek / editorial grid / filmstrip / minimal */
.galerij.lp-style-alternate .galerij-raster { columns: initial; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.galerij.lp-style-alternate .galerij-item { margin: 0; }
.galerij.lp-style-alternate .galerij-item:nth-child(3n + 1) { grid-column: 1 / -1; }
.galerij.lp-style-alternate .galerij-item:nth-child(3n + 1) img { aspect-ratio: 16 / 8; object-fit: cover; }
.galerij.lp-style-bold .galerij-raster { columns: initial; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.galerij.lp-style-bold .galerij-item { flex: 0 0 min(72vw, 34rem); margin: 0; scroll-snap-align: center; }
.galerij.lp-style-bold .galerij-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Pers: quotegrid / spotlight / pull quotes / minimal */
#pers.lp-style-alternate .pers-lijst { max-width: 62rem; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; gap: clamp(2rem, 5vw, 5rem); }
#pers.lp-style-alternate .pers-quote { font-size: clamp(1.2rem, 2vw, 1.7rem); }
#pers.lp-style-alternate .pers-quote:first-child { grid-column: 1 / -1; text-align: center; font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.05; }
#pers.lp-style-bold .pers-lijst { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; gap: 1px; background: var(--lijn); }
#pers.lp-style-bold .pers-quote { background: var(--porselein); padding: clamp(2rem, 5vw, 5rem); font-size: clamp(1.3rem, 2.3vw, 2rem); }

/* Contact: gecentreerd / split contact / donkere kaart / minimal */
.contact.lp-style-alternate { text-align: left; }
.contact.lp-style-alternate > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; }
.contact.lp-style-alternate .contact-tekst { margin: 1.4rem 0 3rem; }
.contact.lp-style-alternate .contact-mail { grid-column: 2; grid-row: 1 / span 3; overflow-wrap: anywhere; }
.contact.lp-style-alternate .contact-links { justify-content: flex-start; }
.contact.lp-style-bold { background: var(--porselein); color: var(--inkt); padding: var(--sectie) var(--marge) 0; }
.contact.lp-style-bold > .wrap { max-width: 72rem; background: var(--nacht); color: var(--nacht-papier); padding: clamp(2rem, 7vw, 7rem); }
.contact.lp-style-bold .footer { color: var(--inkt-60); border-color: var(--lijn); }

/* Minimal: één rustig designsysteem over alle secties heen */
section.lp-style-minimal {
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--porselein);
  color: var(--inkt);
  border-top: 1px solid var(--lijn);
}
section.lp-style-minimal > .wrap { max-width: 76rem; }
section.lp-style-minimal .sectiekop { gap: .75rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
section.lp-style-minimal .sectiekop .kicker::after { width: 1.5rem; background: var(--lijn); opacity: 1; }
section.lp-style-minimal .kop { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.015em; }
section.lp-style-minimal .kop em { color: inherit; }
section.lp-style-minimal [data-parallax] { transform: none!important; }

/* Hero minimal: tekstgedreven, zonder decoratief openingsbeeld */
.hero.lp-style-minimal { min-height: max(70svh, 42rem); padding: 0; align-items: center; border-top: 0; border-bottom: 1px solid var(--lijn); grid-template-rows: 1fr; }
.hero.lp-style-minimal .hero-beeld { display: none; }
.hero.lp-style-minimal .hero-inhoud { grid-row: 1; align-self: center; width: min(100%, 76rem); max-width: none; margin-inline: auto; padding: clamp(9rem, 18vh, 13rem) var(--marge) clamp(6rem, 12vh, 9rem); }
.hero.lp-style-minimal .hero-kicker { margin-bottom: 2rem; color: var(--inkt-40); }
.hero.lp-style-minimal .hero-naam { max-width: 58rem; font-size: clamp(3.4rem, 9vw, 7rem); line-height: .94; letter-spacing: -.025em; }
.hero.lp-style-minimal .hero-naam .deel-2 { color: inherit; }
.hero.lp-style-minimal .hero-sub { max-width: 34rem; margin-top: 2.5rem; }
.hero.lp-style-minimal .hero-scroll { display: none; }
.hero.lp-style-minimal.has-hero-image { background: var(--nacht); color: var(--nacht-papier); }
.hero.lp-style-minimal.has-hero-image .hero-beeld { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero.lp-style-minimal.has-hero-image .hero-beeld::after {
  background:
    linear-gradient(90deg, rgba(10,9,8,.68) 0%, rgba(10,9,8,.34) 55%, rgba(10,9,8,.12) 100%),
    linear-gradient(0deg, rgba(10,9,8,.38) 0%, transparent 45%);
}
.hero.lp-style-minimal.has-hero-image .hero-inhoud { width: min(100%, 90rem); }
.hero.lp-style-minimal.has-hero-image .hero-kicker,
.hero.lp-style-minimal.has-hero-image .hero-sub { color: var(--nacht-papier); }
.hero.lp-style-minimal.has-hero-image .hero-sub { opacity: .82; }

/* Hero alleen tekst: expliciet typografisch, ook wanneer media is ingevuld */
.hero.lp-style-text-only { min-height: 42rem; padding: 0; align-items: center; grid-template-rows: 1fr; background: var(--porselein); border-bottom: 1px solid var(--lijn); }
.hero.lp-style-text-only .hero-beeld { display: none!important; }
.hero.lp-style-text-only .hero-inhoud { grid-row: 1; align-self: center; width: min(100%, 76rem); max-width: none; margin-inline: auto; padding: clamp(10rem, 20vh, 14rem) var(--marge) clamp(6rem, 14vh, 10rem); text-align: center; }
.hero.lp-style-text-only .hero-kicker { margin-bottom: 2rem; color: var(--inkt-40); }
.hero.lp-style-text-only .hero-naam { max-width: 70rem; margin-inline: auto; font-size: clamp(4rem, 11vw, 9rem); line-height: .86; letter-spacing: -.035em; }
.hero.lp-style-text-only .hero-naam .deel-2 { color: inherit; }
.hero.lp-style-text-only .hero-sub { max-width: 36rem; margin: 2.5rem auto 0; }
.hero.lp-style-text-only .hero-scroll { display: none; }

/* Hero full page: exact de dynamische viewport van het apparaat */
.hero.lp-style-full-page { height: 100vh; height: 100dvh; min-height: 100svh; max-height: none; padding: 0; align-items: end; grid-template-rows: 1fr; overflow: clip; background: var(--nacht); color: var(--nacht-papier); }
.hero.lp-style-full-page .hero-beeld { display: none; }
.hero.lp-style-full-page.has-hero-image .hero-beeld { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.hero.lp-style-full-page.has-hero-image .hero-beeld::after { background: linear-gradient(0deg, rgba(8,7,6,.68) 0%, rgba(8,7,6,.12) 62%), linear-gradient(90deg, rgba(8,7,6,.34), transparent 72%); }
.hero.lp-style-full-page .hero-inhoud { grid-row: 1; align-self: end; width: min(100%, 90rem); max-width: none; margin-inline: auto; padding: clamp(8rem, 16vh, 12rem) var(--marge) clamp(6rem, 11vh, 8rem); }
.hero.lp-style-full-page .hero-naam { max-width: 68rem; font-size: clamp(4rem, 10vw, 8.5rem); line-height: .9; }
.hero.lp-style-full-page .hero-naam .deel-2 { color: inherit; }
.hero.lp-style-full-page .hero-kicker,
.hero.lp-style-full-page .hero-sub,
.hero.lp-style-full-page .hero-scroll { color: var(--nacht-papier); }
.hero.lp-style-full-page .hero-sub { opacity: .82; }

/* Over minimal: compacte portretintro en een rustige tekstkolom */
#over.lp-style-minimal .over-grid { max-width: 68rem; grid-template-columns: minmax(calc(8rem * var(--lp-over-size, 1)), calc(12rem * var(--lp-over-size, 1))) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
#over.lp-style-minimal .over-portret::before { display: none; }
#over.lp-style-minimal .over-portret .kader { aspect-ratio: 1; }
#over.lp-style-minimal .over-portret img { filter: grayscale(var(--lp-over-grayscale, 1)); }
#over.lp-style-minimal .over-intro { max-width: 42rem; margin-bottom: 1.5rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-style: normal; line-height: 1.35; }
#over.lp-style-minimal .over-bio p { max-width: 42rem; }
#over.lp-style-minimal .over-feiten { max-width: 42rem; margin-top: 2rem; }
#over.lp-style-minimal .over-feiten > div { padding-block: .7rem; }
#over.lp-part-off-media .over-grid { grid-template-columns: minmax(0, 1fr); }
#over.lp-part-off-media .over-tekst { grid-column: 1; }

/* Werk minimal: functionele credits zonder kaarten of hoverbeeld */
#werk.lp-style-minimal > .wrap { max-width: 68rem; }
#werk.lp-style-minimal .werk-inhoud { grid-template-columns: minmax(0, 1fr); }
#werk.lp-style-minimal .werk-filters { margin-bottom: 1.5rem; gap: .4rem 1.25rem; }
#werk.lp-style-minimal .werk-preview { display: none; }
#werk.lp-style-minimal .werk-rij-inner { padding-block: 1.1rem; }
#werk.lp-style-minimal .werk-titel { font-family: var(--font-heading); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 520; }
#werk.lp-style-minimal .werk-rij:hover .werk-rij-inner { transform: none; }
#werk.lp-style-minimal .werk-rij:hover .werk-titel { color: inherit; }

/* Uitgelicht minimal: lichte videosectie met een eenvoudige afspeelknop */
.uitgelicht.lp-style-minimal .uitgelicht-tekst { max-width: 38rem; color: var(--inkt-60); }
.uitgelicht.lp-style-minimal figure { max-width: 68rem; margin-inline: auto; }
.uitgelicht.lp-style-minimal .showreel-stage { margin-top: 2rem; background: var(--papier); }
.uitgelicht.lp-style-minimal .video-afspelen .knop { width: 4rem; border-color: rgba(255,255,255,.75); background: rgba(0,0,0,.18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.uitgelicht.lp-style-minimal .video-bijschrift { color: var(--inkt-40); }
.uitgelicht.lp-style-minimal .showreel-toelichting { color: var(--inkt-60); }
.uitgelicht.lp-style-minimal .showreel-thumb { border-color: var(--lijn); }
.uitgelicht.lp-part-off-media.lp-style-alternate > .wrap { grid-template-columns: 1fr; }
.uitgelicht.lp-part-off-media.lp-style-alternate .sectiekop,
.uitgelicht.lp-part-off-media.lp-style-alternate .uitgelicht-tekst { grid-column: 1; }

@media (max-width: 720px) {
	.showreel-galerij { flex-wrap: nowrap; width: auto; max-width: none; margin-inline: calc(var(--gutter, 1.25rem) * -1); padding-inline: var(--gutter, 1.25rem); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .uitgelicht.lp-style-alternate > .wrap { grid-template-columns: 1fr; }
  .uitgelicht.lp-style-alternate .showreel { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel-keuze { transition: none; }
}

/* Talen minimal: één dunne lijst in plaats van visuele kaarten */
#talen.lp-style-minimal .talen-grid { max-width: 62rem; grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--lijn); }
#talen.lp-style-minimal .taal-kaart { border-top: 1px solid var(--lijn); }
#talen.lp-style-minimal .taal-media.is-typo { min-height: 5.5rem; aspect-ratio: auto; padding: 1.25rem 10rem 1.25rem 0; place-content: center start; text-align: left; gap: .2rem; background: transparent; color: var(--inkt); }
#talen.lp-style-minimal .taal-media.is-typo::before { display: none; }
#talen.lp-style-minimal .taal-media.is-typo .groot { font-size: 1.35rem; font-style: normal; }
#talen.lp-style-minimal .taal-media.is-typo .klein { color: var(--inkt-40); }
#talen.lp-style-minimal .taal-audio { left: auto; right: 0; bottom: 50%; transform: translateY(50%); color: var(--inkt); border-color: var(--lijn); }
#talen.lp-style-minimal .taal-naam { display: none; }

/* Galerij minimal: gelijkmatig raster zonder masonry of hoverzoom */
.galerij.lp-style-minimal { --onthul-kleur: var(--porselein); }
.galerij.lp-style-minimal .galerij-raster { max-width: 68rem; margin-inline: auto; columns: initial; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.galerij.lp-style-minimal .galerij-item { margin: 0; }
.galerij.lp-style-minimal .galerij-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galerij.lp-style-minimal .galerij-item:hover img { transform: none; }

/* Pers minimal: eenvoudige, links uitgelijnde citatenlijst */
#pers.lp-style-minimal > .wrap { max-width: 68rem; }
#pers.lp-style-minimal > .wrap > div:first-child { text-align: left!important; }
#pers.lp-style-minimal .pers-lijst { max-width: 54rem; margin: 0; gap: 0; text-align: left; }
#pers.lp-style-minimal .pers-quote { padding-block: 1.6rem; border-top: 1px solid var(--lijn); font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-style: normal; }
#pers.lp-style-minimal .pers-quote:last-child { border-bottom: 1px solid var(--lijn); }
#pers.lp-style-minimal .pers-quote::before,
#pers.lp-style-minimal .pers-quote::after { content: none; }
#pers.lp-style-minimal .pers-bron { margin-top: .8rem; }

/* Contact minimal: lichte afsluiting, links uitgelijnd en zonder kaart */
.contact.lp-style-minimal { padding-bottom: 0; text-align: left; }
.contact.lp-style-minimal > .wrap { max-width: 68rem; }
.contact.lp-style-minimal .contact-tekst { max-width: 36rem; margin: 1.25rem 0 2.5rem; color: var(--inkt-60); }
.contact.lp-style-minimal .contact-mail { font-size: clamp(1.5rem, 3.8vw, 2.7rem); overflow-wrap: anywhere; }
.contact.lp-style-minimal .contact-mail::after { background: var(--inkt); transform: scaleX(1); }
.contact.lp-style-minimal .contact-links { justify-content: flex-start; margin-top: 2.5rem; gap: 1.25rem 2rem; }
.contact.lp-style-minimal .contact-links a { color: var(--inkt-60); }
.contact.lp-style-minimal .contact-links a:hover { color: var(--inkt); }
.contact.lp-style-minimal .footer { margin-top: clamp(3rem, 7vw, 5rem); border-color: var(--lijn); color: var(--inkt-40); }
.contact.lp-style-alternate.lp-part-off-info > .wrap { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .hero.lp-style-alternate { background: var(--nacht); }
  .hero.lp-style-alternate .hero-beeld { inset: auto; width: 100%; }
  .hero.lp-style-alternate .hero-inhoud { margin-left: 0; padding-left: var(--marge); }
  .hero.lp-style-bold .hero-beeld { position: absolute; height: 100%; }
  .hero.lp-style-bold .hero-inhoud { grid-row: 1 / -1; align-self: end; padding-block: 10rem 7rem; }
  #over.lp-style-alternate .over-grid,
  #over.lp-style-bold .over-grid,
  #over.lp-style-minimal .over-grid { grid-template-columns: 1fr; }
  #over.lp-style-alternate .over-portret,
  #over.lp-style-alternate .over-tekst { grid-column: 1; grid-row: auto; }
  #over.lp-style-alternate .over-tekst { columns: initial; }
  .uitgelicht.lp-style-alternate > .wrap { grid-template-columns: 1fr; }
  .uitgelicht.lp-style-alternate .sectiekop,
  .uitgelicht.lp-style-alternate .uitgelicht-tekst,
  .uitgelicht.lp-style-alternate figure { grid-column: 1; grid-row: auto; }
  .contact.lp-style-alternate > .wrap { grid-template-columns: 1fr; }
  .contact.lp-style-alternate .contact-mail { grid-column: 1; grid-row: auto; }
  #over.lp-style-minimal .over-portret { max-width: 10rem; }
}

@media (max-width: 620px) {
  #werk.lp-style-alternate .werk-lijst,
  #pers.lp-style-alternate .pers-lijst,
  #pers.lp-style-bold .pers-lijst,
  .galerij.lp-style-alternate .galerij-raster { grid-template-columns: 1fr; }
  .galerij.lp-style-alternate .galerij-item:nth-child(3n + 1) { grid-column: 1; }
  .galerij.lp-style-minimal .galerij-raster { grid-template-columns: 1fr; }
  #talen.lp-style-alternate .taal-kaart { grid-template-columns: 1fr; }
  #talen.lp-style-alternate .taal-naam { display: none; }
  #talen.lp-style-minimal .taal-media.is-typo { padding-right: 7rem; }
  #talen.lp-style-minimal .taal-audio { padding-inline: .8rem; }
  #talen.lp-style-minimal .taal-audio .label { display: none; }
}