/*
  split.css: de splitscreen-homepage van jacko.be (desktop, statisch).
  Bron van waarheid: design-richting.md. Deze taak (Task 2) bouwt de visuele
  fundering: twee werelden, de intro-overlay met gradient-clip, de panelen en de
  fotolaag. Nog geen JS, geen hover-states, geen animatie en geen footer: die
  komen in latere taken (Task 3 interactie, Task 4 naad-animatie, Task 5 footer
  en mobiel). Alles wat op de naad leeft, leidt af van een enkele custom
  property --seam.
*/

/* De naad als variabele. Default 50%: de twee werelden zijn even groot.
   Task 3 laat --seam bij hover naar 60% of 40% schuiven; die klasse hoort dan
   op de body te staan zodat alle naad-lagen (panelen, foto en intro) samen
   mee bewegen. Hier staat de naad stil. */
body {
  --seam: 50%;
  /* De footer-hoogte (--footer-h) is een generiek layout-token en woont sinds de
     footer-verhuizing in base.css. De fotolaag en de naad-strook eindigen tegen de
     bovenkant van de footer (bottom: var(--footer-h)), zodat de foto op de balk staat. */
  position: relative;
  /* Kolom van twee lagen binnen 100dvh: de split (flex: 1) en de footer (auto).
     De decoratieve lagen (intro, naad-strook, foto) blijven absoluut gepositioneerd
     ten opzichte van de body en tellen dus niet mee in deze kolom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* De splitscreen-container en de twee panelen                         */
/* ------------------------------------------------------------------ */

.split {
  display: flex;
  /* Vult de vrije ruimte boven de footer binnen de body-kolom. min-height: 0 laat
     de flex-child krimpen tot precies die ruimte, zodat de footer altijd zichtbaar
     blijft en de pagina op desktop niet scrollt. */
  flex: 1;
  min-height: 0;
}

/* De flex-verhouding leidt af van de naad. */
.panel--strategy {
  flex: 0 0 var(--seam);
}
.panel--art {
  flex: 0 0 calc(100% - var(--seam));
}

/* Basis van een paneel: het hele paneel is de link. Inhoud verticaal rond het
   midden, en horizontaal naar de buitenste helft (weg van de foto). */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: var(--ruimte-xl) 5vw;
  text-decoration: none;
}

/* --- Wereld links: papier (Strategy) --- */
.panel--strategy {
  align-items: flex-start;
  text-align: left;
  color: var(--inkt);
  background-color: var(--papier);
  /* Fijn, statisch raster van rasterlijnen om de 56px. Rustig, geen drift:
     bewuste keuze (vrijwel onzichtbaar op deze schaal, niet de complexiteit
     waard). */
  background-image:
    repeating-linear-gradient(to right, var(--rasterlijn) 0, var(--rasterlijn) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to bottom, var(--rasterlijn) 0, var(--rasterlijn) 1px, transparent 1px, transparent 56px);
  font-family: var(--font-structuur);
}

/* --- Wereld rechts: atelier (Art) --- */
.panel--art {
  align-items: flex-end;
  text-align: right;
  color: var(--licht-op-donker);
  background-color: var(--atelier);
  /* Zachte, statische gloed-vlekken in de verfkleuren: lage dekking, grote
     spreiding. De rgba-waarden komen uit de verf-tokens uit base.css
     (magenta, cyaan, geel, lime). Task 3 laat de gloed subtiel de cursor
     volgen; hier is de gloed statisch. */
  background-image:
    /* Cursor-gloed (Task 3): volgt --mx/--my die split.js zet. Zonder JS of
       onder reduced-motion blijft deze op de rustige standaardpositie staan,
       vlak bij de bestaande magenta-vlek, zodat het basisbeeld gelijk blijft. */
    radial-gradient(26% 34% at calc(var(--mx, 0.72) * 100%) calc(var(--my, 0.42) * 100%), rgba(216, 71, 155, 0.16), rgba(216, 71, 155, 0) 68%),
    radial-gradient(58% 50% at 70% 26%, rgba(216, 71, 155, 0.20), rgba(216, 71, 155, 0) 70%),
    radial-gradient(55% 55% at 90% 72%, rgba(47, 192, 214, 0.16), rgba(47, 192, 214, 0) 72%),
    radial-gradient(52% 46% at 44% 86%, rgba(240, 197, 54, 0.12), rgba(240, 197, 54, 0) 70%),
    radial-gradient(46% 42% at 82% 48%, rgba(168, 207, 63, 0.10), rgba(168, 207, 63, 0) 72%);
  font-family: var(--font-kunst);
}

/* ------------------------------------------------------------------ */
/* Paneel-inhoud: label, blurb (verborgen op desktop) en CTA           */
/* ------------------------------------------------------------------ */

/* Label links: structuurstem, klein kapitaal-gevoel met ruime tracking. */
.panel--strategy .panel__label {
  font-family: var(--font-structuur);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--inkt-zacht);
}

/* Label rechts: kunststem, cursief, iets groter. */
.panel--art .panel__label {
  font-family: var(--font-kunst);
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--licht-op-donker);
}

/* De blurb is op desktop visueel verborgen (geen display:none, zodat Task 3
   hem soepel kan onthullen bij hover of focus). */
.panel__blurb {
  margin: 0;
  max-width: 24ch;
  max-height: 0;
  opacity: 0;
  /* Startpositie van de onthulling (Task 3): 8px lager, schuift naar 0. */
  transform: translateY(8px);
  overflow: hidden;
  font-family: var(--font-structuur);
  font-size: 1rem;
  line-height: 1.5;
}
.panel--art .panel__blurb {
  font-family: var(--font-kunst);
  font-style: italic;
}

/* CTA: de bestemming, als tekst met een pijl-accent. */
.panel__cta {
  margin-top: var(--ruimte-md);
  font-size: 1.05rem;
  font-weight: 600;
}
.panel__cta::after {
  content: " \2192"; /* rechter pijl, geen streepje */
  font-weight: 700;
}

/* Links: structuurstem, met het spaarzame oranje accent uit jackobormans.be
   (alleen hier). */
.panel--strategy .panel__cta {
  font-family: var(--font-structuur);
  color: var(--inkt);
}
.panel--strategy .panel__cta::after {
  color: var(--knipoog-oranje);
}

/* Rechts: licht op donker, met een verfkleur als accent. */
.panel--art .panel__cta {
  font-family: var(--font-kunst);
  font-style: italic;
  color: var(--licht-op-donker);
}
.panel--art .panel__cta::after {
  color: var(--verf-cyaan);
}

/* ------------------------------------------------------------------ */
/* De fotolaag: op de naad, decoratief, niet-klikbaar                  */
/* ------------------------------------------------------------------ */

.split-photo {
  position: absolute;
  /* Onderkant tegen de bovenkant van de footer: de figuur staat op de donkere balk. */
  bottom: var(--footer-h);
  left: var(--seam);
  /* De zichtbare pak/verf-scheiding zit op ongeveer 46% van de beeldbreedte;
     door 46% van de eigen breedte naar links te schuiven valt die scheiding
     samen met de naad. */
  transform: translateX(-46%);
  height: 62vh;
  width: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* ------------------------------------------------------------------ */
/* De intro-overlay: titel en intro-regel, gecentreerd op de naad      */
/* ------------------------------------------------------------------ */

.intro {
  position: absolute;
  top: 6vh;
  left: var(--seam);
  transform: translateX(-50%);
  width: min(46rem, 92vw);
  margin: 0;
  padding: 0 var(--ruimte-md);
  text-align: center;
  /* Klikken gaat door de intro heen naar het paneel eronder, zodat de hele
     splitscreen klikbaar blijft. */
  pointer-events: none;
  z-index: 3;
}

.intro h1 {
  margin: 0;
  font-family: var(--font-structuur);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.intro__lead {
  margin: var(--ruimte-sm) 0 0;
  font-family: var(--font-structuur);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
}

/* De gradient-clip: de tekst is inkt boven de papier-helft en licht boven de
   atelier-helft. De intro staat gecentreerd op de naad, dus de kleurwissel op
   50% van het tekstvak valt samen met de naad. */
.intro h1,
.intro__lead {
  background-image: linear-gradient(
    to right,
    var(--inkt) 0,
    var(--inkt) 50%,
    var(--licht-op-donker) 50%,
    var(--licht-op-donker) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Fallback zonder background-clip: text: een inktkleur op een subtiele
   semi-transparante papier-achtergrond achter de intro. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .intro {
    padding: var(--ruimte-md);
    background: rgba(245, 242, 236, 0.82); /* papier, half doorschijnend */
    border-radius: 6px;
  }
  .intro h1,
  .intro__lead {
    background: none;
    color: var(--inkt);
    -webkit-text-fill-color: var(--inkt);
  }
}

/* ================================================================== */
/* Task 3: interactie, load-overvloei en reduced-motion               */
/* ================================================================== */

/* De naad als registered property: hierdoor interpoleert de verschuiving van
   50% naar 60% of 40% soepel, en volgen panelen, foto en intro vanzelf omdat
   ze allemaal var(--seam) lezen. Browsers zonder @property negeren deze regel:
   de naad wisselt dan abrupt maar correct (aanvaarde degradatie). */
@property --seam {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

/* Gedeelde duur en easing voor de staat-overgang (richtwaarde 380 tot 450 ms,
   rustige ease-out). */
:root {
  --duur-staat: 420ms;
  --ease-rustig: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- De actieve/inactieve staat (geldt met en zonder reduced-motion) --- */

/* De naad schuift naar de actieve wereld. */
body.is-hovering-strategy { --seam: 60%; }
body.is-hovering-art { --seam: 40%; }

/* Het inactieve paneel dimt en desatureert: kies je de ratio, dan dooft de
   kleur uit de Art-kant (en omgekeerd). */
body.is-hovering-strategy .panel--art,
body.is-hovering-art .panel--strategy {
  filter: grayscale(0.55) brightness(0.92);
  opacity: 0.85;
}

/* De blurb van het actieve paneel schuift in beeld. max-height is de bovengrens
   van de onthul-overgang, ruim genoeg voor de langste blurb van drie zinnen (de
   Strategy-blurb wikkelt in de smalle 24ch-kolom tot ongeveer zeven regels); een
   cap die te krap staat, kapt de laatste regel af. opacity en verschuiving dragen
   het gevoel van de onthulling. */
body.is-hovering-strategy .panel--strategy .panel__blurb,
body.is-hovering-art .panel--art .panel__blurb {
  max-height: 13rem;
  opacity: 1;
  transform: translateY(0);
}

/* --- Focus zichtbaar in beide werelden (toetsenbord-bereikbaarheid) --- */
.panel:focus-visible {
  outline-offset: -5px;
}
.panel--strategy:focus-visible {
  outline: 3px solid var(--inkt);
}
.panel--art:focus-visible {
  outline: 3px solid var(--licht-op-donker);
}

/* --- Alle beweging zit achter no-preference; onder reduce wisselt de staat
       nog steeds, maar zonder animatie (blurb meteen leesbaar). --- */
@media (prefers-reduced-motion: no-preference) {
  /* De naad interpoleert; de derde lagen volgen automatisch. */
  body {
    transition: --seam var(--duur-staat) var(--ease-rustig);
  }
  /* Dim en desatureer soepel. */
  .panel {
    transition:
      filter var(--duur-staat) var(--ease-rustig),
      opacity var(--duur-staat) var(--ease-rustig);
  }
  /* De blurb onthult zich soepel. */
  .panel__blurb {
    transition:
      opacity var(--duur-staat) var(--ease-rustig),
      max-height var(--duur-staat) var(--ease-rustig),
      transform var(--duur-staat) var(--ease-rustig);
  }
}

/* ------------------------------------------------------------------ */
/* Load-overvloei: eenmalige verf-wash bij het laden                   */
/* ------------------------------------------------------------------ */

/* Standaard onzichtbaar en inert. Zonder JS (of onder reduced-motion) blijft
   de laag zo: ze blokkeert de pagina nooit. pointer-events: none zorgt dat de
   splitscreen ook tijdens de wash klikbaar blijft. */
.load-wash {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Zachte meerkleurige verf-wash uit de verf-tokens. De transparante stops
     geven zachte randen (de maskerrand uit de design-richting). */
  background:
    radial-gradient(42% 55% at 18% 30%, rgba(216, 71, 155, 0.85), rgba(216, 71, 155, 0) 66%),
    radial-gradient(46% 58% at 46% 68%, rgba(47, 192, 214, 0.80), rgba(47, 192, 214, 0) 66%),
    radial-gradient(40% 52% at 72% 38%, rgba(240, 197, 54, 0.72), rgba(240, 197, 54, 0) 64%),
    radial-gradient(48% 60% at 90% 74%, rgba(168, 207, 63, 0.68), rgba(168, 207, 63, 0) 66%),
    radial-gradient(60% 80% at 60% 50%, rgba(238, 125, 49, 0.55), rgba(238, 125, 49, 0) 70%);
}

@media (prefers-reduced-motion: no-preference) {
  /* De animatie speelt alleen als split.js de class is-geladen toevoegt (en
     dat doet het enkel wanneer reduced-motion uit staat). Deze media-query is
     de tweede verdedigingslinie. */
  body.is-geladen .load-wash {
    animation: load-overvloei 1400ms var(--ease-rustig) forwards;
  }
}

/* De wash golft over het scherm en trekt zich dan terug in de rechter
   (Art-)helft. clip-path krimpt alleen, dus geen overflow en geen scrollbalk;
   de einde-staat is onzichtbaar en inert. */
@keyframes load-overvloei {
  0% {
    opacity: 0;
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
  30% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  55% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 0 62%);
  }
}

/* ================================================================== */
/* Task 4: verbindende animatie op de naad                            */
/* ================================================================== */

/* De naad-strook: een smalle, decoratieve laag (ongeveer 14vw) gecentreerd op de
   naad, waar de twee werelden in elkaar lekken. Ze volgt --seam net als de foto
   (left: var(--seam) plus een halve eigen breedte terug), dus ze schuift mee bij
   hover. pointer-events: none en een lage z-index (1: boven de paneel-achtergronden,
   maar onder de foto op 2 en de intro op 3) houden klikken, hover en leesbaarheid
   intact. Een verticaal masker dooft de strook uit bovenaan, waar de intro-tekst
   staat, en heel zacht onderaan, zodat de menging nergens hard afkapt. */
.seam {
  position: absolute;
  top: 0;
  /* Eindigt tegen de bovenkant van de footer, net als de fotolaag. */
  bottom: var(--footer-h);
  left: var(--seam);
  width: 14vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 21vh,
    #000 30vh,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 21vh,
    #000 30vh,
    #000 90%,
    transparent 100%
  );
}

/* De twee menglagen vullen de hele strook; de horizontale maskers hieronder geven
   elke laag zijn eigen kant (verf naar links, lijnen naar rechts). */
.seam__paint,
.seam__grid {
  position: absolute;
  inset: 0;
}

/* --- Laag 1: verf-tongen vanuit het atelier, een stukje het licht in --- */
/* Lage dekking (0.26 tot 0.32), organische ovale vorm via radiale gradients met
   zachte transparante randen. Kleuren uit de verf-tokens. Het horizontale masker
   houdt de verf links van en net over de naad, zodat ze het licht in reikt en de
   rasterlijnen rechts niet vertroebelt. In rust (ook onder reduced-motion) staan de
   tongen er al: het basisbeeld draagt de menging. Twee tongen op deze laag, twee op
   het pseudo-element hieronder, elk op een eigen trage tijdlijn voor een organisch,
   niet-synchroon gevoel. */
.seam__paint {
  background-image:
    radial-gradient(36% 4.5% at 46% 30%, rgba(216, 71, 155, 0.32) 0%, rgba(216, 71, 155, 0) 72%),
    radial-gradient(33% 4% at 44% 52%, rgba(238, 125, 49, 0.27) 0%, rgba(238, 125, 49, 0) 72%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 74%);
  mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 74%);
}
.seam__paint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(35% 4% at 45% 41%, rgba(47, 192, 214, 0.30) 0%, rgba(47, 192, 214, 0) 72%),
    radial-gradient(30% 4% at 42% 63%, rgba(168, 207, 63, 0.26) 0%, rgba(168, 207, 63, 0) 72%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 74%);
  mask-image: linear-gradient(to right, #000 0, #000 52%, transparent 74%);
}

/* --- Laag 2: rasterlijnen vanuit het papier, een stukje de verf in --- */
/* Dunne horizontale lijnen om de 56px, exact het raster van de papier-wereld
   (repeating-linear-gradient met 56px in .panel--strategy), zodat ze de bestaande
   lijnen lijken voort te zetten over de naad. Op het donker zijn ze licht in plaats
   van inkt, anders onzichtbaar. De achtergrond-oorsprong ligt op y=0 net als het
   paneel-raster, dus de lijnen vallen samen. Het horizontale masker houdt ze rechts
   van en net over de naad: ze lopen de verf in en doven daar uit. */
.seam__grid {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(242, 237, 228, 0.11) 0,
    rgba(242, 237, 228, 0.11) 1px,
    transparent 1px,
    transparent 56px
  );
  -webkit-mask-image: linear-gradient(to right, transparent 44%, #000 58%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 44%, #000 58%, #000 84%, transparent 100%);
}

/* De lichtgolf over de rasterlijnen: een zachte lichte band die traag op en neer
   trekt over de lijnen. In rust (onder reduced-motion) staat de band op een
   zichtbare rustpositie, zodat de menging ook stil een lichtaccent houdt. */
.seam__grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(
    to bottom,
    rgba(242, 237, 228, 0) 0,
    rgba(242, 237, 228, 0.15) 50%,
    rgba(242, 237, 228, 0) 100%
  );
  transform: translateY(70%);
}

/* --- Beweging: alleen zonder reduced-motion; het basisbeeld hierboven blijft
       staan (statische menging) als de gebruiker beweging afwijst. --- */
@media (prefers-reduced-motion: no-preference) {
  /* Trage, kleine drift van de verf-tongen; twee tijdlijnen zodat de lagen niet
     synchroon lopen. Alleen transform en opacity (compositor-vriendelijk). */
  .seam__paint {
    animation: verf-drift-a 24s ease-in-out infinite;
  }
  .seam__paint::before {
    animation: verf-drift-b 30s ease-in-out infinite;
  }
  /* De lichtgolf trekt traag op en neer; alternate, dus geen sprong bij het
     herhalen (geen flikkering aan het lus-eind). */
  .seam__grid::before {
    animation: licht-golf 26s ease-in-out infinite alternate;
  }
}

/* Kleine verplaatsingen en een zachte adem in de dekking: de verf leeft, ze
   schuift niet zichtbaar als blok. De verplaatsingen zijn klein (hooguit 4% van de
   smalle strook horizontaal, ruwweg 8px, en ongeveer 12 pixels verticaal) en spelen zich
   af over tientallen seconden. */
@keyframes verf-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; }
  50% { transform: translate3d(-4%, 1.4%, 0) scale(1.05); opacity: 1; }
}
@keyframes verf-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.03); opacity: 1; }
  50% { transform: translate3d(3%, -1.2%, 0) scale(1); opacity: 0.9; }
}
/* De lichtgolf reist traag door de rasterlijnen, op en neer (alternate). */
@keyframes licht-golf {
  0% { transform: translateY(24%); }
  100% { transform: translateY(150%); }
}

/* ================================================================== */
/* Task 5: footer en responsieve, gestapelde mobiel-layout             */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* De footer woont in base.css                                          */
/* ------------------------------------------------------------------ */
/* De .site-footer-regels zijn generiek (elke pagina deelt dezelfde footer) en
   staan sinds de footer-verhuizing in base.css, samen met het --footer-h-token.
   Hier blijft alleen wat homepage-specifiek is. */

/* De staande portret-foto in de intro hoort bij de mobiele stapeling. Op desktop
   verborgen: daar draagt de armen-open-foto op de naad het split-signaal. */
.intro__portret {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Mobiel (onder 720px): gestapeld, geen naad, alles direct zichtbaar   */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
  /* Geen naad-mechaniek op een horizontale stapeling: neutraliseer het
     hover-effect op --seam en het dimmen/desatureren, zodat beide werelden
     altijd volledig leesbaar blijven. Geen hover-afhankelijkheid. */
  body.is-hovering-strategy,
  body.is-hovering-art {
    --seam: 50%;
  }
  body.is-hovering-strategy .panel--art,
  body.is-hovering-art .panel--strategy {
    filter: none;
    opacity: 1;
  }

  /* Decoratieve lagen die op de verticale naad slaan, hebben hier geen
     betekenis: verberg ze. Het staande portret in de intro draagt het
     split-in-een-beeld-signaal. */
  .seam { display: none; }
  .split-photo { display: none; }

  /* De intro valt in de gewone flow bovenaan: een compact kopblok op papier.
     Geen overlay, geen naad-centrering, geen gradient-clip. */
  .intro {
    position: static;
    transform: none;
    width: auto;
    padding: var(--ruimte-lg) var(--ruimte-md) var(--ruimte-md);
    background: var(--papier);
    pointer-events: auto;
    z-index: auto;
  }
  /* Volle kleur in plaats van de gradient-clip: die maakt de helft van de tekst
     licht, wat op papier onleesbaar zou zijn. H1 in inkt, lead in gedempt inkt. */
  .intro h1,
  .intro__lead {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
  }
  .intro h1 {
    color: var(--inkt);
    /* Lage ondergrens zodat "Jacko Bormans" ook op smallere telefoons (360, 320px)
       niet afkapt; op 390px blijft 8vw (31px) leidend, ongewijzigd. */
    font-size: clamp(1.55rem, 8vw, 2.6rem);
  }
  .intro__lead {
    max-width: 32ch;
    margin: var(--ruimte-sm) auto 0;
    color: var(--inkt-zacht);
    font-size: 1.02rem;
  }

  /* De staande portret-foto: eigen split (pak links, verf rechts), echoot de
     twee werelden boven de gestapelde panelen. De bron heeft een donkere
     achtergrond; een zachte kaderrand laat ze als bewuste foto op het papier
     staan. */
  .intro__portret {
    display: block;
    width: min(60vw, 250px);
    height: auto;
    margin: var(--ruimte-md) auto 0;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(23, 25, 29, 0.20);
  }

  /* De panelen stapelen verticaal, elk minstens ~55vh, elk in de eigen
     wereld-stijl. De naad-afhankelijke flex-basis vervalt; de split krijgt zijn
     natuurlijke hoogte en de pagina mag scrollen. De specifieke selectors staan
     erbij zodat ze de desktop-uitlijning (flex-start/flex-end) overschrijven. */
  .split {
    flex-direction: column;
    flex: 0 0 auto;
  }
  .panel,
  .panel--strategy,
  .panel--art {
    flex: 0 0 auto;
    min-height: 55vh;
    align-items: center;
    text-align: center;
    padding: var(--ruimte-lg) 8vw;
  }

  /* Blurb direct in beeld: geen hover-onthulling op mobiel. */
  .panel__blurb {
    max-height: none;
    max-width: 34ch;
    margin: var(--ruimte-sm) auto 0;
    opacity: 1;
    overflow: visible;
    transform: none;
  }
}