/* ============================================================
   TESTIMONY † OF JESUS — couture stylesheet (scrub-editie)
   ============================================================ */
:root {
  --goud: #E7C707;
  --inkt: #141414;
  --kaars: #C7A707;
  --wit: #FFFFFF;
  --rood: #C8290D;
  --bodoni: "Bodoni Moda", Didot, serif;
  /* hero-displayfont: Fraunces — couture-editoriaal, optisch geschaald, met stevigere kapitalen
     dan Bodoni (geen breekbare haarlijnen op M/N/U/Y bij grote graden) + een rijke cursief */
  --display: "Fraunces", "Bodoni Moda", Didot, serif;
  /* masthead/de Naam: Cinzel — inscriptionele Romeinse kapitalen (Trajaanse traditie). Zit als
     in steen gehouwen, eeuwig, en lost de J structureel op: een Romeinse J staat op de baseline,
     geen dalende krul zoals Fraunces. Bewust een andere snit dan de poëtische coverlines. */
  --mast: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --archivo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --drag: cubic-bezier(.22, .61, .36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: #EAC402;
  scrollbar-width: thin; scrollbar-color: var(--inkt) var(--goud);
}
html.is-locked { overflow: hidden; }
body { background: #EAC402; color: var(--inkt); font-family: var(--archivo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kruis { display: inline-block; width: .62em; height: .88em; fill: currentColor; vertical-align: -.08em; }
.kicker { font: 700 11px/1 var(--archivo); letter-spacing: .42em; text-transform: uppercase; color: var(--inkt); }
.kicker.wit { color: var(--wit); }

/* ============ VEIL ============ */
#veil { position: fixed; inset: 0; z-index: 60; background: #EAC402; display: grid; place-items: center; transition: clip-path .9s var(--drag); clip-path: inset(0 0 0 0); }
#veil.lift { clip-path: inset(0 0 100% 0); }
.veil-inner { width: min(560px, 78vw); text-align: center; }
.veil-kicker { font: 700 10px/1 var(--archivo); letter-spacing: .4em; margin-bottom: 18px; }
.veil-masthead { font: 500 clamp(26px, 5vw, 50px)/1 var(--bodoni); letter-spacing: .04em; margin-bottom: 32px; white-space: nowrap; }
.veil-track { height: 2px; background: var(--kaars); overflow: hidden; }
#veil-bar { height: 100%; width: 100%; background: var(--inkt); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.veil-foot { display: flex; justify-content: space-between; margin-top: 12px; font: 400 9px/1 var(--mono); letter-spacing: .2em; }

/* ============ SCRUB-HERO ============ */
#hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #EAC402; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
/* leesbaarheids-floers onder de coverlines — nu op ALLE tiers; de gravure vult fullbleed,
   de chrome ligt als magazine-coverlines linksonder over het floers (licht/goud) */
#hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; z-index: 2;
  pointer-events: none; opacity: 1;
  background: linear-gradient(to top, rgba(20, 20, 20, .86), rgba(20, 20, 20, .36) 46%, rgba(20, 20, 20, 0)); }
.cover-chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 1.4vh; padding: 7vh 6vw 8.5vh;
  /* zachte, diffuse lift — onzichtbaar boven de donkere gravure, borgt leesbaarheid waar de
     plaat onder de coverlines geel is (de pill staat buiten .cover-chrome en blijft ongemoeid) */
  text-shadow: 0 1px 16px rgba(20, 20, 20, .42); }
.cover-chrome > * { position: static; max-width: min(1040px, 90vw); }
.cover-chrome { font-optical-sizing: auto; }   /* Fraunces kiest de display-optische grootte bij grote graden */
.cover-chrome a { pointer-events: auto; }

/* ---- TESTIMONY † OF JESUS (welkom-masthead) glijdt weg bij verlaten van welkom, weer in bij betreden ---- */
body[data-playing][data-cover="0"] .w-mast,
body[data-playing][data-cover="0"] .w-eyebrow { animation: wmast-down 1.35s cubic-bezier(.42, 0, .58, 1) both; }
body[data-playing][data-to="0"] .w-mast,
body[data-playing][data-to="0"] .w-eyebrow { animation: wmast-up 1.35s cubic-bezier(.42, 0, .58, 1) both; }
@keyframes wmast-down { from { transform: translateY(0); } to { transform: translateY(106vh); } }
@keyframes wmast-up { from { transform: translateY(106vh); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body[data-playing] .w-mast { animation: none; } }

/* ---- DE REDDER (kruis) — couture coverline-reveal -----------------------------------------
   "Het is" glijdt van LINKS in; "volbracht." fadet ÉN glijdt van RECHTS in, een halve tel
   later (stagger het is → volbracht), zodat het accent als tweede landt — leesritme. Entree =
   zachte glide-to-rest (easeOutExpo); exit = versnellend weg (easeIn), volbracht eerst weg
   (last-in-first-out, een nette "terugspoel"). Werkt beide kanten op via dezelfde data-haken
   als de welkom-masthead: data-to="1" = binnenkomen · data-cover="1" = verlaten. De glij-
   afstand staat in em, dus schaalt mee met de coverline op elk formaat. Alles tunebaar via
   de #cover-1 custom properties. ---- */
#cover-1 {
  --k-in-ease: cubic-bezier(.16, 1, .3, 1);     /* entree: glide-to-rest (easeOutExpo) */
  --k-out-ease: cubic-bezier(.5, 0, .9, .25);   /* exit: versnellend weg (easeIn) */
  --k-in-dur: 1s;     --k-out-dur: .62s;
  --k-left-in: .78s;  --k-right-in: .98s;        /* entree-stagger: het is, dan volbracht */
  --k-left-out: .1s;  --k-right-out: 0s;         /* exit-stagger: volbracht eerst (LIFO) */
}
body[data-playing] #cover-1 .k-left,
body[data-playing] #cover-1 .k-right { will-change: transform, opacity; }
body[data-playing][data-to="1"] .k-left   { animation: k-left-in   var(--k-in-dur)  var(--k-in-ease)  var(--k-left-in)   both; }
body[data-playing][data-to="1"] .k-right  { animation: k-right-in  var(--k-in-dur)  var(--k-in-ease)  var(--k-right-in)  both; }
body[data-playing][data-cover="1"] .k-left  { animation: k-left-out  var(--k-out-dur) var(--k-out-ease) var(--k-left-out)  both; }
body[data-playing][data-cover="1"] .k-right { animation: k-right-out var(--k-out-dur) var(--k-out-ease) var(--k-right-out) both; }
@keyframes k-left-in   { 0% { opacity: 0; transform: translateX(-.45em); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
@keyframes k-right-in  { from { opacity: 0; transform: translateX(.6em); } to { opacity: 1; transform: translateX(0); } }
@keyframes k-left-out  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-.45em); } }
@keyframes k-right-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(.6em); } }
@media (prefers-reduced-motion: reduce) { body[data-playing] #cover-1 .k-left, body[data-playing] #cover-1 .k-right { animation: none; } }

/* ---- DE HERDER (cover 2) — coverline-reveal, gechoreografeerd tégen "Het is volbracht" -----
   Axis-contrast als scène-wissel: de kruis-coverlines verlaten HORIZONTAAL (het is naar links,
   volbracht naar rechts — uiteen), en "Ik kom" / "terug" komen VERTICAAL binnen — ze faden in en
   ZAKKEN van boven naar hun rustplek (thematisch: "Het is volbracht" verstuift weg · "Ik kom terug"
   daalt neer). Estafette-timing: de vertrekkende regel gaat vroeg weg, de aankomende komt ná een
   korte adem binnen — zo delen ze nooit tegelijk dezelfde plek. Stagger Ik kom → terug (leesritme);
   exit terug-eerst (LIFO), omgekeerd en versnellend.
   We animeren de losse `translate`-property (NIET transform), zodat de breed-desktop centrering
   `transform: translateY(-50%)` intact blijft en de slide eroverheen componeert — één keyframe-set
   werkt zo voor zowel de mobiele stapel als de flankerende desktop-opmaak. Beide richtingen via de
   data-haken: data-to="2" = binnenkomen · data-cover="2" = verlaten. Tunebaar via #cover-2 vars. ---- */
#cover-2 {
  --h-in-ease: cubic-bezier(.16, 1, .3, 1);     /* entree: glide-to-rest (easeOutExpo) */
  --h-out-ease: cubic-bezier(.5, 0, .9, .25);   /* exit: versnellend weg (easeIn) */
  --h-in-dur: 1s;     --h-out-dur: .62s;
  --h-kom-in: .88s;   --h-terug-in: 1.04s;       /* entree-stagger: Ik kom, dan terug — ná de kruis-exit */
  --h-terug-out: 0s;  --h-kom-out: .1s;          /* exit-stagger: terug eerst (LIFO) */
}
body[data-playing] #cover-2 .h-kom,
body[data-playing] #cover-2 .h-terug { will-change: translate, opacity; }
body[data-playing][data-to="2"] .h-kom     { animation: h-drop-in  var(--h-in-dur)  var(--h-in-ease)  var(--h-kom-in)    both; }
body[data-playing][data-to="2"] .h-terug   { animation: h-drop-in  var(--h-in-dur)  var(--h-in-ease)  var(--h-terug-in)  both; }
body[data-playing][data-cover="2"] .h-kom   { animation: h-drop-out var(--h-out-dur) var(--h-out-ease) var(--h-kom-out)   both; }
body[data-playing][data-cover="2"] .h-terug { animation: h-drop-out var(--h-out-dur) var(--h-out-ease) var(--h-terug-out) both; }
@keyframes h-drop-in  { from { opacity: 0; translate: 0 -.5em; } to { opacity: 1; translate: 0 0; } }
@keyframes h-drop-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -.5em; } }
@media (prefers-reduced-motion: reduce) { body[data-playing] #cover-2 .h-kom, body[data-playing] #cover-2 .h-terug { animation: none; } }

/* ---- WELKOM (titelpagina) — de masthead/de Naam: witte caps, gouden kruis vóór "OF JESUS".
   Basis/mobiel: linksonder over het floers (stapel). Breed desktop: titelband bovenin (zie onder). ---- */
/* editie-ooglid + marge-spines: alleen op breed desktop (de inkt-frontispiece); elders verborgen */
.w-eyebrow, .w-spine { display: none; }
.w-mast { display: flex; flex-direction: column; align-items: flex-start; gap: .1vh; }
.w-mast span { display: flex; align-items: center; gap: .14em; writing-mode: horizontal-tb; transform: none;
  font: 700 clamp(62px, 12.4vw, 206px)/1.0 var(--mast); letter-spacing: .012em; color: var(--wit); }
/* het Latijnse kruis staat vóór "OF JESUS" (order:-1), rechtop, in goud — als in "TESTIMONY † OF JESUS" */
.w-mast .w-cross { order: -1; transform: none; width: .56em; height: .8em; margin-right: .06em; vertical-align: middle; fill: var(--goud); }

/* ---- DE REDDER (interne naam: kruis) — coverlines linksonder: "Het is" (wit) / "volbracht." (cursief goud) ---- */
.k-left, .k-right { position: static; transform: none; top: auto; left: auto; right: auto; text-align: left;
  font: 600 clamp(60px, 12vw, 200px)/.92 var(--display); letter-spacing: -.005em; }
.k-left { color: var(--wit); }
.k-right { font-style: italic; font-weight: 500; color: var(--goud); }

/* ---- DE HERDER — coverlines linksonder: "Ik kom" (wit) / "terug" (cursief goud) ---- */
.h-kom, .h-terug { font: 600 clamp(60px, 12vw, 200px)/.92 var(--display); letter-spacing: -.005em; }
.h-kom { color: var(--wit); }
.h-terug { font-style: italic; font-weight: 500; color: var(--goud); }

/* ---- pijl-navigatie: "de gravureplaat" — een geslagen inkt-plaat in plaats van een glazen pill.
   Scherpe hoeken + een ingezette gouden haarlijn-keyline (het couture dubbelkader, familie van de
   PL.-platen elders op de site). Eén bediening per omslag: kleine kapitalen-kicker, bestemming in
   Bodoni, en de geëtste pijl. Leesbaar boven zowel de donkere gravure als het open goud, want de
   plaat is bijna massief inkt. Bij hover/focus loopt een gouden INKT-veeg in de reisrichting over
   de plaat (tekst + pijl worden inkt, het kader wordt inkt zodat de rand ook op geel scherp blijft)
   en schuift de pijl een tik vooruit. Verschijnt na het settelen met een gechoreografeerde reveal:
   de plaat rijst op → de pijl tekent zichzelf → kicker en naam rijzen gestaffeld omhoog. */
.nav-arrows { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.nav-arrow {
  position: absolute; bottom: 7vh; right: 5vw; left: auto; top: auto;
  display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 26px; border-radius: 0;
  background: rgba(17, 17, 17, .82);
  border: 1px solid rgba(231, 199, 7, .30);
  -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05);
  color: var(--wit); cursor: pointer; overflow: hidden; isolation: isolate;
  box-shadow: 0 16px 46px -30px rgba(0, 0, 0, .78);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .6s var(--drag), transform .6s var(--drag),
              border-color .5s var(--drag), box-shadow .5s var(--drag), visibility 0s .6s;
}
/* ingezette haarlijn-keyline — het geëtste dubbelkader */
.nav-arrow::before {
  content: ""; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(231, 199, 7, .24);
  transition: border-color .5s var(--drag), inset .5s var(--drag);
}
/* gouden inkt-veeg — vult de plaat in de reisrichting (vooruit/links → vanaf rechts; terug/rechts → vanaf links) */
.nav-arrow::after {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--goud);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--drag);
}
.a-right.nav-arrow::after { transform-origin: left center; }
/* reisrichting = schermzijde: vooruit (a-left) verankert aan de LINKERrand, terug (a-right) aan
   de RECHTERrand — één bediening per hoek, de pijl wijst naar buiten in zijn eigen reisrichting.
   Zo wordt de positie zelf de aanwijzer en hoeft de bezoeker niets meer te lezen om te kiezen. */
.a-left  { left: 5vw;  right: auto; }
.a-right { right: 5vw; left: auto; }
.arr-text { position: relative; z-index: 3; display: flex; flex-direction: column; line-height: 1; }
.a-right .arr-text { align-items: flex-start; }
.a-left .arr-text { align-items: flex-end; }
.arr-kick { font: 700 8.5px/1 var(--archivo); letter-spacing: .36em; text-transform: uppercase; color: var(--goud); margin-bottom: 8px; opacity: 0; transform: translateY(11px); transition: opacity .55s var(--drag), transform .55s var(--drag), color .35s var(--drag); }
.arr-name { font: 500 clamp(18px, 1.5vw, 23px)/1 var(--bodoni); letter-spacing: .015em; color: var(--wit); white-space: nowrap; opacity: 0; transform: translateY(13px); transition: opacity .55s var(--drag), transform .55s var(--drag), color .35s var(--drag); }
.arr-ico { position: relative; z-index: 3; display: flex; align-items: center; transition: transform .5s var(--drag); }
.arr-svg { display: block; width: clamp(54px, 5vw, 80px); height: auto; color: currentColor; opacity: 0; transition: opacity .5s var(--drag), color .35s var(--drag); }
.arr-svg path { stroke-width: 1.2; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .85s var(--drag); }
.a-right .arr-svg { transform: scaleX(-1); }
/* hover/focus: de gouden inkt-veeg loopt over de plaat, het kader wordt inkt, de pijl schuift vooruit */
.nav-arrow:hover, .nav-arrow:focus-visible { border-color: var(--inkt); }
.nav-arrow:hover::after, .nav-arrow:focus-visible::after { transform: scaleX(1); }
.nav-arrow:hover::before, .nav-arrow:focus-visible::before { border-color: rgba(20, 20, 20, .42); inset: 5px; }
.nav-arrow:hover .arr-kick, .nav-arrow:focus-visible .arr-kick,
.nav-arrow:hover .arr-name, .nav-arrow:focus-visible .arr-name,
.nav-arrow:hover .arr-svg, .nav-arrow:focus-visible .arr-svg { color: var(--inkt); }
.a-left:hover .arr-ico, .a-left:focus-visible .arr-ico { transform: translateX(-7px); }
.a-right:hover .arr-ico, .a-right:focus-visible .arr-ico { transform: translateX(7px); }
.nav-arrow:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--inkt), 0 0 0 5px rgba(231, 199, 7, .55); }
/* tonen per omslag — De Redder: vooruit (De Herder); De Herder: vooruit (Ik kom terug) + terug (De Redder);
   Ik kom terug: terug (De Herder). De plaat rijst op, dan tekent de pijl zich, dan rijzen de labels. */
:is(body[data-cover="0"] .a-welkom,
    body[data-cover="1"] .a-kruis-l,
    body[data-cover="1"] .a-kruis-r,
    body[data-cover="2"] .a-herder-r) {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .85s var(--drag) .22s, transform .95s var(--drag) .22s, visibility 0s,
              border-color .5s var(--drag), box-shadow .5s var(--drag);
}
:is(body[data-cover="0"] .a-welkom, body[data-cover="1"] .a-kruis-l,
    body[data-cover="1"] .a-kruis-r, body[data-cover="2"] .a-herder-r) .arr-svg { opacity: 1; transition-delay: .42s; }
:is(body[data-cover="0"] .a-welkom, body[data-cover="1"] .a-kruis-l,
    body[data-cover="1"] .a-kruis-r, body[data-cover="2"] .a-herder-r) .arr-svg path { stroke-dashoffset: 0; transition-delay: .48s; }
:is(body[data-cover="0"] .a-welkom, body[data-cover="1"] .a-kruis-l,
    body[data-cover="1"] .a-kruis-r, body[data-cover="2"] .a-herder-r) .arr-kick { opacity: 1; transform: translateY(0); transition-delay: .54s; }
:is(body[data-cover="0"] .a-welkom, body[data-cover="1"] .a-kruis-l,
    body[data-cover="1"] .a-kruis-r, body[data-cover="2"] .a-herder-r) .arr-name { opacity: 1; transform: translateY(0); transition-delay: .62s; }
/* De Redder toont twee bedieningen op tegenoverliggende randen: vooruit (De Herder) linksonder,
   terug (Welkom) rechtsonder — geen verticale stapel meer, dus geen offset nodig. */
/* tijdens een overgang: schoon en snel naar beneden weg */
body[data-playing] .nav-arrow { opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none; transition: opacity .32s var(--drag), transform .32s var(--drag); }
@media (prefers-reduced-motion: reduce) {
  .nav-arrow, .nav-arrow::after, .arr-kick, .arr-name, .arr-svg, .arr-ico { transition-duration: .01ms !important; }
  .arr-svg, .arr-kick, .arr-name { opacity: 1 !important; transform: none !important; }
  .arr-svg path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ============ SECTIES ============ */
.folio-row { display: flex; justify-content: space-between; font: 400 8.5px/1 var(--mono); letter-spacing: .18em; color: var(--wit); margin-top: 14vh; }
.folio-row.donker { color: var(--inkt); }
.ghost-n { position: absolute; top: 3vh; right: 4vw; font: 460 26vh/1 var(--bodoni); color: transparent; -webkit-text-stroke: 1px var(--inkt); opacity: .35; pointer-events: none; }
.spine { position: absolute; top: 50%; left: 2.2vw; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 400 9px/1 var(--mono); letter-spacing: .42em; color: var(--kaars); pointer-events: none; white-space: nowrap; }
/* gespiegelde rechter-spine: alleen op brede schermen (zie widescreen-blok); standaard verborgen */
.spine-r { display: none; }

/* prestatie: render off-screen secties pas wanneer ze in beeld komen (geen visueel verschil) */
.missie, .werk, .achterflap { content-visibility: auto; contain-intrinsic-size: auto 1400px; }

.missie { position: relative; background: var(--inkt); color: var(--wit); padding: 11vh 8vw 9vh; overflow: hidden; }
.missie-inner { position: relative; max-width: 1180px; margin: 0 auto; text-align: center; }
/* twee-regelige titel (naam / werkwoord): iets bescheidener max zodat "Het Hemelse Koninkrijk"
   op brede schermen op één regel valt, met "bouwen" als cursieve flourish eronder gestapeld */
/* twee-tier lockup: stately romein "God's Koninkrijk" als kroon, met "Bouwen" eronder als
   grote cursieve flourish — het werkwoord als brandpunt. Strakke leading bindt ze tot één blok. */
.missie-head { font-family: var(--bodoni); font-weight: 500; font-size: clamp(40px, 6vw, 92px); line-height: .9; color: var(--wit); margin: 5vh 0 0; }
.missie-head em { display: inline-block; font-style: italic; font-weight: 500; font-size: 1.6em; letter-spacing: 0; color: var(--goud); }
/* manifest-filet: korte haarlijn met het kruis als centraal juweel. Geeft de kop lucht en
   rijmt op de --kaars haarlijnen van de geloofsbelijdenis eronder — één samenhangend systeem.
   De lijnen vervagen naar buiten zodat het kruis het middelpunt is. Marges (5vh boven/onder,
   klappen samen met de kop-marge 0 en de lede-marge 0) maken een rustige 10vh-band rond de filet. */
.missie-rule { display: flex; align-items: center; justify-content: center; gap: 17px; width: 200px; margin: 5vh auto; }
.missie-rule::before, .missie-rule::after { content: ""; flex: 1; height: 1px; }
.missie-rule::before { background: linear-gradient(to right, transparent, var(--kaars)); }
.missie-rule::after { background: linear-gradient(to left, transparent, var(--kaars)); }
.missie-rule .kruis { flex: none; width: 13px; height: 18px; fill: var(--goud); vertical-align: 0; }
.whisper { font: 600 10px/1.8 var(--archivo); letter-spacing: .5em; color: var(--wit); margin-bottom: 8.5vh; }
.missie-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; text-align: left; max-width: 980px; margin: 0 auto 9vh; }
/* solo-variant: één lopende alinea als gecentreerde editoriale kolom met de initiaal als focus */
.missie-cols--solo { display: block; max-width: 624px; text-align: left; }
.missie-cols p { font: 400 15px/1.9 var(--archivo); color: var(--wit); }
.missie-cols strong { font-weight: 700; }
.missie-cols em { font-family: var(--bodoni); font-style: italic; font-size: 1.12em; color: var(--goud); }
.missie-cols .lede { font: 400 clamp(17px, 1.35vw, 21px)/1.72 var(--bodoni); }
.missie-cols .lede::first-letter { font-family: var(--bodoni); font-weight: 600; font-size: 5em; float: left; line-height: .72; padding: .04em .14em 0 0; color: var(--goud); }
.creed { list-style: none; max-width: 760px; margin: 0 auto; text-align: left; }
.creed li { display: flex; align-items: baseline; gap: 26px; padding: 22px 4px; border-top: 1px solid var(--kaars); }
.creed li:last-child { border-bottom: 1px solid var(--kaars); }
.creed-n { font: italic 560 clamp(30px, 2.6vw, 42px)/1 var(--bodoni); color: var(--kaars); min-width: 64px; }
.creed-t { font: 400 14.5px/1.7 var(--archivo); letter-spacing: .04em; }
.creed-t strong { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-right: .5em; }

/* ============ MISSIE — WIDESCREEN MANIFESTO-SPREAD ============
   Op een breed scherm wordt de centrale kolom een echte spread: breder werkveld (in lijn met
   de werk-galerij eronder), de drie waarden als DRIELUIK over de volle breedte, en een
   gespiegelde vers-spine zodat de twee donkere zijbanden een bewuste gravure-lijst worden.
   Alleen ≥1100px — mobiel/tweener houden exact de gestapelde opmaak die al goedgekeurd is. */
@media (min-width: 1100px) {
  .missie { padding: 11vh 6vw 11vh; }
  .missie-inner { max-width: 1460px; }
  .missie-cols--solo { max-width: 680px; }   /* lede iets ruimer als leesmaat binnen de bredere lijst */

  /* drieluik: drie gelijke kolommen met verticale --kaars haarlijnen ertussen + kader boven/onder */
  .creed { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; margin: 4vh auto 0; text-align: left; }
  .creed li { display: block; padding: clamp(34px, 3vw, 56px) clamp(26px, 2.4vw, 46px);
    border-top: 1px solid var(--kaars); border-bottom: 1px solid var(--kaars); }
  .creed li + li { border-left: 1px solid var(--kaars); }   /* scheiders tussen de kolommen */
  .creed-n { display: block; min-width: 0; margin-bottom: clamp(14px, 1.5vw, 24px);
    font-size: clamp(46px, 3.4vw, 66px); line-height: 1; }
  .creed-t { display: block; font-size: 14.5px; line-height: 1.74; letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
  .creed-t strong { display: block; margin: 0 0 12px; color: var(--goud); font-size: 13px; letter-spacing: .2em; }

  /* gespiegelde spine: de rechtermarge krijgt een eigen gravure-regel (leest top→onder) */
  .spine-r { display: block; left: auto; right: 2.2vw; transform: translateY(-50%); }
}

.werk { position: relative; background: var(--goud); padding: 17vh 6vw 9vh; overflow: hidden; }
.werk-head { position: relative; max-width: 1480px; margin: 0 auto 9vh; border-bottom: 1px solid var(--inkt); padding-bottom: 5vh; }
.werk-kickrow { display: flex; justify-content: space-between; align-items: baseline; }
.folio-mini { font: 400 9px/1 var(--mono); letter-spacing: .18em; color: var(--inkt); }
.werk-title { font-family: var(--bodoni); font-weight: 560; font-size: clamp(46px, 7vw, 116px); line-height: 1.02; margin: 3.4vh 0 2.6vh; }
.werk-title em { font-style: italic; }
.werk-sub { font: 600 10px/1 var(--archivo); letter-spacing: .42em; color: var(--inkt); }
.plates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.4vw; max-width: 1480px; margin: 0 auto; align-items: start; }
/* solo: één gecentreerd 16:9-venster — "wie wij zijn" (één beeld i.p.v. de oude galerij) */
.plates--solo { display: block; max-width: 1100px; }
.plate { margin: 0; }
.plate.r169 { grid-column: span 8; } .plate.r11 { grid-column: span 4; } .plate.r916 { grid-column: span 4; }
.plate-img { position: relative; border: 1px solid var(--inkt); padding: 9px; background: var(--goud); }
.plate-img::before { content: ""; display: block; background: var(--inkt); transition: background .22s var(--drag); }
.plate.r169 .plate-img::before { aspect-ratio: 16/9; } .plate.r11 .plate-img::before { aspect-ratio: 1/1; } .plate.r916 .plate-img::before { aspect-ratio: 9/16; }
.plate-dag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--kaars); font-size: 30px; transition: color .22s var(--drag); }
.plate-no { position: absolute; top: 20px; left: 22px; font: italic 560 clamp(17px, 1.5vw, 24px)/1 var(--bodoni); color: var(--kaars); transition: color .22s var(--drag); }
.plate-ratio { position: absolute; right: 20px; bottom: 18px; font: 400 9px/1 var(--mono); letter-spacing: .2em; color: var(--kaars); transition: color .22s var(--drag); }
/* solo placeholder — "foto komt eraan"-bericht onder het kruis (tot het echte beeld er is) */
.plate-soon { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%);
  font: 700 clamp(9px, .85vw, 11px)/1 var(--archivo); letter-spacing: .26em; text-transform: uppercase;
  color: var(--kaars); white-space: nowrap; transition: color .22s var(--drag); }
.plate-soon em { font-family: var(--bodoni); font-weight: 500; font-style: italic; font-size: 1.25em;
  letter-spacing: .02em; text-transform: none; }
.plate:hover .plate-img::before { background: var(--wit); }
.plate:hover .plate-dag, .plate:hover .plate-no, .plate:hover .plate-ratio, .plate:hover .plate-soon { color: var(--inkt); }
.plate figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 700 9px/1.6 var(--archivo); letter-spacing: .22em; color: var(--inkt); margin-top: 11px; }
.plate figcaption span:last-child { font: 400 8.5px/1.6 var(--mono); letter-spacing: .16em; }
.werk-cta { text-align: center; margin-top: 13vh; }
.werk-mail { display: inline-block; font: italic 560 clamp(28px, 3.4vw, 52px)/1.2 var(--bodoni); color: var(--inkt); border-bottom: 1px solid var(--inkt); margin-top: 2.4vh; pointer-events: auto; }
.werk-mail:hover { color: var(--wit); border-color: var(--wit); }
.werk .folio-row { max-width: 1480px; margin-left: auto; margin-right: auto; }

.achterflap { background: var(--inkt); color: var(--wit); text-align: center; padding: 16vh 8vw 7vh; }
.flap-wordmark { font: 500 clamp(24px, 3.6vw, 46px)/1.2 var(--bodoni); letter-spacing: .18em; text-indent: .18em; color: var(--goud); }
.flap-wordmark .kruis { color: var(--wit); }
.flap-tagline { font: 600 10px/1 var(--archivo); letter-spacing: .46em; text-indent: .46em; margin-top: 3vh; color: var(--wit); }
/* ---- achterflap-socials: drie gegraveerde logo-plaatjes (IG · TikTok · YouTube) ----
   Elk een dunne gouden cirkel met het merkglyph; bij hover/focus vult de cirkel zich goud en
   wordt het glyph inkt + een kleine lift — dezelfde "plaat vult zich met goud"-taal als de
   nav-pijlen en de audio-play, zodat de footer aanvoelt als familie van de rest. */
.flap-socials { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(38px, 7vw, 104px); margin: 8vh 0; }
.soc { display: grid; justify-items: center; gap: 14px; }
.soc-ico { width: clamp(48px, 4vw, 58px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--kaars); color: var(--kaars);
  transition: background .45s var(--drag), color .35s var(--drag), border-color .35s var(--drag), transform .45s var(--drag), box-shadow .45s var(--drag); }
.soc-ico svg { width: 42%; height: 42%; fill: currentColor; display: block; }
.soc-k { font: 700 8.5px/1 var(--archivo); letter-spacing: .36em; color: var(--kaars); transition: color .35s var(--drag); }
.soc-v { font: italic 480 16px/1 var(--bodoni); color: var(--wit); transition: color .35s var(--drag); }
.soc:hover .soc-ico, .soc:focus-visible .soc-ico { background: var(--goud); color: var(--inkt); border-color: var(--goud); transform: translateY(-3px); }
.soc:hover .soc-v, .soc:focus-visible .soc-v { color: var(--goud); }
.soc:focus-visible { outline: none; }
.soc:focus-visible .soc-ico { box-shadow: 0 0 0 3px rgba(231, 199, 7, .32); }
.barcode { text-align: center; }
.bars { width: 118px; height: 34px; margin: 0 auto; background: repeating-linear-gradient(90deg, var(--wit) 0 2px, transparent 2px 5px, var(--wit) 5px 6px, transparent 6px 8px, var(--wit) 8px 12px, transparent 12px 14px, var(--wit) 14px 15px, transparent 15px 19px, var(--wit) 19px 22px, transparent 22px 24px); }
.bars-digits { font: 400 8.5px/1 var(--mono); letter-spacing: .22em; color: var(--wit); margin-top: 5px; }
.bars-price { font: 700 9px/1 var(--archivo); letter-spacing: .3em; color: var(--wit); margin-top: 7px; }
.bars-price.rood { color: var(--rood); }
.flap-small { font: 400 8.5px/1.9 var(--mono); letter-spacing: .14em; color: var(--kaars); margin-top: 7vh; }

/* ============ REVEALS ============ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: translateY(0); transition: opacity .75s var(--drag) var(--d, 0s), transform .75s var(--drag) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .hint { animation: none; } }

/* ============ BREED DESKTOP — typografische compositie per omslag ============ */
/* Het lees-floers is hier weg en de koppen zijn enorm → INKT op het open geel, NAAST de figuur
   (wit verzacht en goud verdwijnt op het felle geel zonder floers). Per omslag, op de plaat afgestemd:
   • WELKOM    — figuur centraal, armen wijd, kop bovenin → de Naam als titelband bovenin, gecentreerd
   • De Redder — figuur (gezicht/kruis) rechts → "Het is volbracht" links, verticaal gecentreerd
   • De Herder — figuur centraal → "Ik kom" links / "terug" rechts, flankerend */
@media (min-aspect-ratio: 7/5) {
  #hero::after { opacity: 0; }        /* het lees-floers/scrim onderaan weg op breed desktop */
  .cover-chrome { text-shadow: none; }

  /* WELKOM — FRONTISPIECE. De plaat is frontaal & symmetrisch (open armen, kop centraal-boven op 9%,
     gewaad centraal-onder). Inkt mag enkel op het geel: de smalle band BOVEN de kop (0–9%) en de open
     flanken naast de kop (tot ±35% / vanaf ±57%, tot de armen op 60%). Dus axiaal: een editie-ooglid +
     de Naam als gecentreerde architraaf in de topband, en het ankervers fijn verticaal langs beide
     marges als gegraveerd kader — de figuur blijft het serene midden. */
  #cover-0 { justify-content: flex-start; align-items: center; text-align: center; padding-top: 1.3vh; gap: .5vh; }

  #cover-0 .w-eyebrow { display: block; color: var(--inkt); opacity: .78;
    font: 700 clamp(9px, .78vw, 11px)/1 var(--archivo); letter-spacing: .46em; text-indent: .46em; }

  #cover-0 .w-mast { flex-direction: row; align-items: center; gap: .3em; max-width: 96vw; padding-left: .17em; }
  #cover-0 .w-mast span { color: var(--inkt); font-size: clamp(24px, 3vw, 48px); line-height: 1;
    white-space: nowrap; letter-spacing: .17em; }
  #cover-0 .w-cross { fill: var(--inkt); width: .44em; height: .66em; margin-right: .16em; }

  /* ankervers — fijn verticaal langs beide marges, in de open flanken (boven de armen),
     boven-uitgelijnd zodat het als bewust kader leest (recto/verso loopkop) */
  #cover-0 .w-spine { display: block; position: absolute; top: 21%; color: var(--inkt); opacity: .6;
    writing-mode: vertical-rl; white-space: nowrap;
    font: 700 clamp(8px, .72vw, 11px)/1 var(--archivo); letter-spacing: .4em; text-indent: .4em; }
  #cover-0 .w-spine-l { left: 3.2vw; transform: rotate(180deg); }
  #cover-0 .w-spine-r { right: 3.2vw; }

  /* DE REDDER — figuur (gezicht/kruis) rechts → "Het is volbracht" links, verticaal gecentreerd */
  #cover-1 { justify-content: center; }
  #cover-1 .k-left, #cover-1 .k-right { color: var(--inkt); font-size: clamp(46px, 7.1vw, 130px); }
  #cover-1 .k-right { font-style: italic; }

  /* DE HERDER — figuur centraal → "Ik kom" links / "terug" rechts, flankerend */
  #cover-2 .h-kom, #cover-2 .h-terug { position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--inkt); font-size: clamp(40px, 6vw, 104px); white-space: nowrap; }
  #cover-2 .h-kom { left: 5.5vw; right: auto; }
  #cover-2 .h-terug { right: 5.5vw; left: auto; text-align: right; font-style: italic; }
}

/* ============ SMAL / BIJNA-VIERKANT (halfscherm, niet-mobiel) ============ */
/* Zelfde coverlines-compositie als breed, alleen iets ingetogener geschaald zodat de masthead
   een bijna-vierkant venster niet overheerst. De gravure vult fullbleed (engine cover-fill). */
@media (min-aspect-ratio: 6/7) and (max-aspect-ratio: 7/5) {
  /* Tweetraps-compositie als mobiel: coverlines getild in de onderste derde, de nav-pills in een
     schone band eronder. De grote desktop-pill zit ~14vh hoog (incl. kicker), dus til de coverlines
     daar ruim bovenuit (18vh) — zo botst de linksonder-pill nooit meer met de stapel linksonder. */
  .cover-chrome { padding: 6vh 6vw 20vh; gap: 1.2vh; }
  .w-mast span { font-size: clamp(40px, 9vw, 92px); }
  .k-left, .k-right { font-size: clamp(40px, 9.2vw, 96px); }
  .h-kom, .h-terug { font-size: clamp(46px, 10.5vw, 112px); }
  .nav-arrow { bottom: 6vh; } /* horizontale verankering komt van de globale .a-left/.a-right */
}

/* ============ MOBIEL STAAND (aspect < 6/7) — VULLENDE GRAVURE + COVERLINES ============ */
/* Zelfde compositie als desktop (gravure fullbleed, coverlines linksonder over het floers),
   alleen ruimer op vw geschaald en met compacte nav-pillen in de onderste band (vooruit links, terug rechts). */
@media (max-aspect-ratio: 6/7) {
  /* extra ruimte onderaan: De Redder zet twee nav-pillen naast elkaar in de onderste band, de coverlines klaren ze */
  .cover-chrome { gap: 1.1vh; padding: 7vh 7vw 19vh; }
  .cover-chrome > * { max-width: 80vw; }
  body[data-playing] .w-mast { animation: none; }

  .w-mast span { font: 700 clamp(40px, 14vw, 96px)/1.0 var(--mast); }
  .w-mast .w-cross { width: .58em; height: .82em; margin-right: .05em; }

  .k-left, .k-right { font: 600 clamp(44px, 15vw, 100px)/.92 var(--display); }
  .h-kom, .h-terug { font: 600 clamp(50px, 16vw, 116px)/.92 var(--display); }

  /* nav: compacte inkt-plaatjes in de onderste band onder de coverlines; vooruit links, terug rechts —
     naast elkaar i.p.v. gestapeld, dus zelfs op een smal scherm geen twijfel welke waarheen leidt.
     Kicker verborgen en pijl/padding ingedikt zodat twee pillen op één rij passen. */
  .nav-arrow { bottom: 4.4vh; padding: 11px 15px; gap: 10px; }
  .a-left  { left: 6vw;  right: auto; }
  .a-right { right: 6vw; left: auto; }
  .nav-arrow::before { inset: 5px; }
  .arr-kick { display: none; }
  .arr-name { font-size: clamp(15px, 4.4vw, 20px); }
  .arr-svg { width: clamp(32px, 9vw, 46px); }
}

/* ============ SMALLE SECTIES (onder de vouw) ============ */
@media (max-width: 820px) {
  .missie { padding: 15vh 8vw 7vh; } .missie-cols { grid-template-columns: 1fr; gap: 28px; }
  .werk { padding: 13vh 6vw 7vh; } .plate.r169, .plate.r11 { grid-column: span 12; } .plate.r916 { grid-column: span 6; }
  .ghost-n { font-size: 13vh; }
  .flap-socials { flex-direction: column; align-items: center; gap: clamp(30px, 8vw, 44px); }
}
@media (max-width: 480px) { .plate.r916 { grid-column: span 12; } }