/* VLAME sectiestijlen.
 *
 * Laadt na primitives.css. Drie afspraken die vanaf hier voor elke sectie gelden:
 *
 * 1. HET MATERIAAL IS LAMINAAT EN BRAND, NIET STEMPEL EN KANTELING.
 *    Herzien 2026-09-14. Hier stonden harde offset-schaduwen, dikke inktkaders
 *    en blokken van twee graden scheef. Dat is de signatuur van
 *    wearecrotona.nl - het festival waar Vera zelf voor werkt - en haar site
 *    mag niet op die van haar opdrachtgever lijken. Wat ervoor in de plaats
 *    komt is het enige dat alleen van deze site is: de laminaatpas aan het
 *    koord (.vl-frame, zie primitives.css) en het vuur (.spark, .vl-cut--burn).
 *    Geen enkele regel in dit bestand zet nog een gekleurde offset-schaduw of
 *    een hoek boven één graad.
 *
 * 2. DE RUIMTE IS DEEL VAN HET ONTWERP.
 *    Secties ademen (padding-block uit base.css), een hoes of plaat houdt
 *    minstens 1,5em afstand van lopende tekst tenzij hij er BEWUST overheen
 *    valt, en een kop houdt .6em van wat eronder staat.
 *
 * 3. vlame_img() GEEFT EEN <picture>, GEEN <img>.
 *    Waar het ontwerpbestand `.blok__fig img` schrijft, hoort hier
 *    `.blok__fig picture` (positionering) en de meegegeven klasse voor de
 *    afbeelding zelf (`.hero__img` -> maat, crop, ronding).
 */

/* ==========================================================================
   Reveal zonder de motion-laag
   base.css zet .rv op opacity:0 en onthult pas als er ergens .in bijkomt.
   Die klasse komt van assets/js/reveal.js. Zolang die laag er niet is - en bij
   iedere bezoeker zonder JS - mag .rv niets verbergen en niets verschuiven.
   ========================================================================== */

html:not(.js-motion) .rv{opacity:1;transform:var(--rv-rest)}

/* ==========================================================================
   Eén vlamkleur per sectie
   De hero draagt koraal. Daaronder loopt het palet de pagina af in de volgorde
   van --flame: amber, magenta, violet, en dan weer koraal. Die kleur zit nu in
   de emberstreep onder een knop, in de actieve chip en in de hoverkleur van een
   link - niet meer in een schaduw, want die bestaat niet meer.
   ========================================================================== */

/* Sinds 2026-09-15 is de ember overal inkt (en papier op inkt): de klant wil
   geen oranje of andere vlamkleur meer op de pagina. De sectieklassen blijven
   als rolnaam staan, maar wijzen allemaal naar dezelfde kleur. */
.vl-sec--amber,.vl-sec--magenta,.vl-sec--violet,.vl-sec--coral{--vl-ember:var(--ink)}
.sec--dark,.vl-on-ink{--vl-ember:var(--paper)}

.sechead{margin-bottom:clamp(2.4rem,4vw,4rem)}
.sechead .lead{margin-top:0}

/* ==========================================================================
   Hero
   Twee blokken die over elkaar liggen: een inktplaat die links het beeld uit
   loopt met VLAME. in het midden, en een gelamineerde portretprint die met zijn
   linkerrand over de rechterrand van die plaat valt.

   De plaat staat RECHT sinds de Crotona-ronde en heeft geen schaduw meer; wat
   hem afmaakt is zijn onderrand, die gebrand is - alsof het vuurwoord de rand
   van zijn eigen plaat heeft geschroeid. Dat is de enige rand op de pagina die
   ook echt beweegt (.vl-cut--burn--live), omdat het brandende woord er vlak
   boven staat.

   .hero klipt HORIZONTAAL en verticaal niet: de plaat mag links buiten beeld
   beginnen en de print mag onderaan over de band heen hangen.
   ========================================================================== */

.hero{
  position:relative;
  overflow-x:clip;overflow-y:visible;
  padding:clamp(2rem,3.4vw,3.4rem) 0 clamp(3rem,5vw,5rem);
}

/* Tijdens de pin scrubt motion.js de schaal van .hero__slab van 2,38 naar 1:
   de pagina opent uit het brandende woord. De hero vult dan het scherm, en de
   twee andere blokken komen pas in het laatste deel van de pin binnen - ze
   staan daarom op 0 zolang de motion-laag er is, zodat je ze niet eerst ziet en
   dan weg ziet springen. Zonder GSAP zet motion.js .vl-pin-off en staat alles
   gewoon op zijn plek: de rustlayout IS de eindstand van de scrub. */
.vl-pin-on .hero{min-height:100svh;display:grid;align-content:center}
.vl-pin-on .hero__fig,.vl-pin-on .hero__actions{opacity:0}
.hero.is-zoom{overflow:clip}

/* De scroll-aanwijzing staat sinds 2026-09-15 volledig in system.css
   (dertiende ronde): een pil, vast aan het scherm, buiten de hero. */

.hero__in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:28% 29% 35% 8%;
  align-items:start;
}
.hero__in>*{min-width:0}

/* ---- Blok A: de plaat ---- */
/* calc(50% - 50vw) is precies de afstand van de linkerrand van de wrap tot de
   linkerrand van het scherm; een halve em erbovenop en de plaat begint
   gegarandeerd buiten beeld, op elk formaat. */
.hero__slab{
  grid-column:1/-1;grid-row:1;
  position:relative;z-index:1;
  font-size:clamp(52px,9.8vw,142px);
  margin-inline-start:calc(50% - 50vw - .5em);
  margin-inline-end:38%;
}
/* Het woord staat in het midden van de plaat, horizontaal en verticaal. Omdat
   de plaat links buiten beeld begint, valt dat midden links van het midden van
   het scherm - en dat is de bedoeling: het woord hoort bij de plaat. */
.hero__slab-in{
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  padding:.46em .5em .54em;
}
.hero__slab h1{font-size:1em;line-height:.82;text-align:center;margin:0}

/* ---- Blok B: de print ---- */
/* De foto hangt als laminaat over de rechterrand van de plaat. grid-row 1/3 met
   een negatieve ondermarge: hij loopt door tot naast de tekstkolom maar telt
   niet mee voor de hoogte van het raster, en steekt onderaan de hero uit tot op
   de band. */
.hero__fig{
  grid-column:3;grid-row:1/3;
  position:relative;z-index:3;
  margin:4em 0 -9em;
  font-size:clamp(15px,1.3vw,21px);
  --vl-tape-x:6%;
  --vl-tape-y:2%;
}
.hero__print{position:relative}
.hero__shot{position:relative;z-index:2;--vl-hang:-.7deg}
/* Tape in em. Hij loopt van de print af de plaat op - dat is wat twee losse
   blokken tot één compositie maakt, en tape heeft Crotona niet. */
.hero__fig .vl-tape{
  --vl-tape-tilt:-4.2deg;
  min-width:10em;padding:.42em 1.1em;
  font-size:.54em;letter-spacing:.24em;
}
.hero__fig picture{display:block;position:relative;z-index:2}
.hero__img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 34%;
  border-radius:calc(var(--vl-lam-radius) - .25em);
}
/* Naamplaatje, hangt links buiten de print. */
.hero__tag{
  position:absolute;z-index:5;left:-.7em;bottom:1.1em;
  padding:.6em .9em;border-radius:2px;
  background:var(--ink);color:#fff;
  font-family:var(--font-body);font-size:.62em;font-weight:600;
  letter-spacing:.005em;line-height:1.45;
}
.hero__tag b{display:block;font-weight:400;color:rgba(255,255,255,.66)}

/* ---- De knoppen ---- */
.hero__copy{grid-column:1/3;grid-row:2;margin-top:clamp(2.2rem,3.4vw,3.4rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8em}

/* ==========================================================================
   Marquee
   Een rechte band van rand tot rand die zich in het papier erboven en eronder
   heeft gebrand: geen scheve strook meer (skew is Crotona), maar twee gebrande
   randen met een gloeiend lijntje erlangs. De hero-print valt er met zijn
   onderhoek overheen.
   ========================================================================== */

.marquee-bleed{overflow-x:clip;overflow-y:visible;--vl-over:clamp(-36px,-2.5vw,-14px)}
.marquee{
  position:relative;
  padding:clamp(2.2rem,3.4vw,3.2rem) 0 clamp(2rem,2.8vw,2.6rem);
  overflow:hidden;
  background:var(--ink);color:#fff;
}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:vl-slide 34s linear infinite;will-change:transform}
/* Konami: twintig seconden dubbele snelheid, daarna zet easter.js de klasse
   zelf weer weg. */
.vl-uptempo .marquee__track{animation-duration:17s}
.marquee span{
  font-family:var(--font-display);font-weight:900;font-stretch:112%;
  font-size:clamp(19px,2vw,27px);letter-spacing:-.01em;
  white-space:nowrap;opacity:.94;
}
/* De vlam is het enige symbool dat hier mag staan, en hij staat op 1em. */
/* Scheiding tussen de woorden: een inktpunt, geen vlammetje meer (klant,
   2026-09-15). */
.marquee__dot{display:block;width:.3em;height:.3em;border-radius:50%;background:currentColor;opacity:.85;align-self:center}
@keyframes vl-slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   Eigen events
   Vier gelamineerde prints. Het papieren label onder elke print valt met zijn
   bovenrand over de onderrand van de hoes - dat is de bewuste overlap; overal
   elders houdt een blok afstand. De rechterkolom hangt lager, dus de vier staan
   nooit op een lijn.
   ========================================================================== */

/* Vier foto's, vier maten, vier plekken - geen raster van gelijke kaarten. Het
   twaalfkoloms hulpraster is alleen een plaatsingshulp: wat je ziet is losse
   foto's op papier met veel wit ertussen. Geen twee delen een bovenrand. */
.events{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1.4rem,2.4vw,2.6rem);row-gap:clamp(4rem,8vw,9rem)}
.ev{margin:0;position:relative;font-size:clamp(15px,1.05vw,18px)}
.ev--a{grid-column:1/8;grid-row:1}
.ev--b{grid-column:9/13;grid-row:1;margin-block-start:clamp(4rem,9vw,11rem)}
.ev--c{grid-column:2/5;grid-row:2}
.ev--d{grid-column:7/13;grid-row:2;margin-block-start:clamp(2.4rem,6vw,7rem)}

/* Bijschrift BOVEN de foto: veertien pixels, zinnenkast, geen letterspatiëring.
   Event en jaartal komen uit de projectmeta; staat er geen jaartal in de data,
   dan staat er ook geen jaartal. */
.ev__cap{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted);margin:0 0 .9em}
.ev__link{display:block}
/* Kaal: geen rand, geen ronding, geen schaduw, geen hoes. */
.ev__img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover}
.ev__body{margin-block-start:2em;max-width:40ch}
.ev__body h3{font-size:clamp(22px,2.2vw,34px)}
.ev__body p{margin:0;font-size:1em;line-height:1.65;color:#3B333F;text-wrap:pretty}
.ev__go{display:inline-flex;align-items:center;gap:.45em;margin-top:1.1em;font-size:.95em;font-weight:600}
.ev__go .arw{flex:0 0 auto}

/* ==========================================================================
   Wat ik doe
   Zes gelamineerde inktblokken op papier. Daaronder de uitspraak op een
   inktplaat die aan de RECHTERkant het beeld uit loopt - recht, met een
   gebrande bovenrand.
   ========================================================================== */

/* Geen zes donkere kaartjes meer maar een gewone lijst in twee kolommen: titel
   in 600, zin in 400, en verder niets. De sectie wordt gedragen door de
   uitspraak erboven, niet door zes doosjes. */
.svc{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(2.4rem,5vw,6rem);row-gap:clamp(2rem,3.4vw,3.4rem);margin:0}
.svc__i{margin:0}
.svc dt{font-size:clamp(17px,1.4vw,21px);font-weight:600;margin:0 0 .35em}
.svc dd{margin:0;font-size:16px;line-height:1.7;color:#3B333F;max-width:42ch;text-wrap:pretty}

/* De uitspraak IS de sectie. Op 1440 haalt de regel 128px, en dat is geen
   smaak maar criterium B19: onder 96px valt het vuur niet in vlammen uiteen
   maar wordt het een oranje streep - dat is precies waarom het brandende woord
   hier eerder was weggehaald. */
.pull{margin-bottom:clamp(4rem,8vw,8rem);overflow-x:clip;overflow-y:visible}
.pull__in{
  margin-inline-start:clamp(20px,10vw,180px);
  margin-inline-end:-1.2em;
  padding:1.1em calc(var(--pad) + 1.2em) 1.2em 1.2em;
  background:var(--ink);color:var(--paper);
  font-size:clamp(40px,8.9vw,128px);
}
/* Regelafstand 1,3 en niet de 0,9 die de rest van de display-tekst aanhoudt.
   Reden: dit is de enige display-tekst op de site die over meer regels loopt EN
   een brandend woord draagt. De vlammen reiken ongeveer een halve em boven de
   letters uit; op 0,9 landen ze midden in de regel erboven en lees je twee
   woorden door elkaar. Leesbaarheid wint hier van de regel, net als bij de
   h3-uitzondering in base.css. */
.pull__line{font-size:1em;line-height:1.3;margin:0 0 .5em;max-width:15ch}
.pull__p{
  margin:0;max-width:56ch;
  font-family:var(--font-body);font-size:clamp(15px,1.05vw,17px);font-weight:400;
  line-height:1.7;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.74);text-wrap:pretty;
}

/* ==========================================================================
   Gewerkt voor
   Eén inktplaat die links het beeld uit loopt met de namen erop - een
   creditsblok, zoals achterop een flightcase. De plaat is recht en heeft een
   gebrande bovenrand. Het archiefstrookje eronder houdt ruim afstand: de klant
   wees er expliciet op dat het tegen de laatste namen aan zat.
   ========================================================================== */

.logos{position:relative;margin-top:clamp(1.6rem,3vw,2.6rem);margin-block-end:clamp(3rem,5vw,5rem);overflow-x:clip;overflow-y:visible}
.logos__in{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.4em;
  margin-inline:-1.2em clamp(20px,9vw,170px);
  padding:1.8em calc(var(--pad) + 1.2em) 2em;
  background:var(--ink);color:var(--paper);
  font-size:clamp(22px,3.1vw,46px);
}
.lg{
  position:relative;display:inline-flex;align-items:baseline;gap:.26em;
  font-family:var(--font-display);font-weight:900;font-stretch:112%;
  font-size:1em;line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--paper);transition:color var(--dur-fast) ease;
}
.lg b{font-weight:inherit}
.lg i{
  font-style:normal;font-family:var(--font-body);font-size:.3em;font-weight:400;
  letter-spacing:.005em;text-transform:none;color:rgba(255,255,255,.5);
}
.lg__out{font-size:.42em;opacity:0;transition:opacity var(--dur-fast) ease}
a.lg:hover,a.lg:focus-visible{color:var(--vl-ember)}
a.lg:hover .lg__out,a.lg:focus-visible .lg__out{opacity:1}

.logos__also{
  position:relative;z-index:3;
  width:min(560px,84%);
  margin:2.4rem 0 0 clamp(20px,7vw,110px);
  padding:1.4em;
  background:var(--paper);color:var(--ink);
  border-radius:2px;
  box-shadow:0 1em 2.2em -.9em rgba(0,0,0,.28);
  font-size:15px;
}
.logos__also p{margin:0;line-height:1.7;color:#3B333F}
.logos__also .vl-tape{
  position:absolute;top:-1.2em;left:1.6em;
  min-width:7em;padding:.4em .9em;font-size:.72em;letter-spacing:.22em;
}

/* ==========================================================================
   Over mij
   De twee alinea's waarmee ze zich voorstelt stonden tot 2026-09-14 in de hero.
   Ze staan hier beter: een tweede gelamineerde print naast lopende tekst, met
   ruimte eromheen in plaats van tegen een knop aan.
   ========================================================================== */

.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,5vw,6rem);align-items:start}
.about__fig{margin:0;position:relative}
.about__cap{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted);margin:0 0 .9em}
/* Kaal, net als elke andere contentfoto. */
.about__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* De enige doodle op de pagina: een kantlijn-notitie in inkt naast de foto.
   Met .vl-doodle erbij, want doodles.css laadt ná dit bestand en zou anders
   met gelijke specificiteit winnen. */
.vl-doodle.about__note{width:clamp(48px,5vw,80px);right:-1.6em;bottom:-1.4em;top:auto;left:auto;color:var(--ink);opacity:.45}
.about__body p{margin:0 0 1.2em;max-width:52ch;color:#3B333F;text-wrap:pretty}
/* Haar eigen zin, in de typewriter: getikt, niet gezet. */
.about__say{
  font-family:var(--font-quote);font-style:normal;font-weight:400;
  font-size:clamp(19px,1.9vw,27px);line-height:1.35;
  color:var(--ink);max-width:26ch;margin:1.6em 0 1.8em;
}
.about__body .btn{margin-top:.4em}

/* ==========================================================================
   Projecten
   Chips als papieren labels, kaarten als gelamineerde prints. Op smal scherm
   wordt het raster een .vl-rail - zie parts/section-projects.php.
   ========================================================================== */

.filters{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:clamp(2rem,2.8vw,2.8rem)}
.chip{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:7px;
  padding:.62em 1em;border-radius:2px;
  border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.005em;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.chip::after{
  content:"";position:absolute;left:0;bottom:0;height:.14em;width:100%;
  background:var(--vl-ember,var(--coral));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-fast) var(--ease-out);
}
.chip:hover::after,.chip:focus-visible::after{transform:scaleX(1)}
.chip[aria-current]{background:var(--ink);color:var(--paper)}
.chip[aria-current]::after{transform:scaleX(1)}

/* Boven 760px is het een raster; de .vl-rail-eigenschappen uit primitives.css
   worden hier teruggezet, zodat het rail-primitief (en rail.js, en de
   toetsenbordbediening uit B10) alleen op smal scherm meedoet. */
@media (min-width:761px){
  .grid.vl-rail{
    display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2.4vw,2.4rem);
    overflow:visible;scroll-snap-type:none;cursor:auto;
    padding-block-end:0;padding-inline-end:0;
  }
  .grid.vl-rail>*{flex:initial}
}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2.4vw,2.4rem)}

/* FLIGHTCASE-LABEL. Vierkant, geen rand, geen ronding, geen schaduw. Uit de
   rechteronderhoek is een tab weggesneden waar de jaren in staan. Die snede
   zit op een ::before-laag en niet op de kaart zelf: een clip-path op het
   element knipt ook zijn kinderen weg, en dan verdwijnt juist het jaartal dat
   in de uitsnede hoort te staan. */
.card{position:relative;display:flex;flex-direction:column;font-size:15px;isolation:isolate}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Een tint donkerder papier dan de pagina. Zonder dat verschil is het label
     papier op papier en zie je de uitgesneden hoek helemaal niet - dan is het
     geen flightcase-label maar gewoon tekst op een pagina. */
  background:var(--paper-2);
  clip-path:polygon(
    0 0,100% 0,
    100% calc(100% - 2.4em),calc(100% - 7.4em) calc(100% - 2.4em),
    calc(100% - 7.4em) 100%,0 100%
  );
}
/* Eigen concepten staan andersom: papier op inkt. */
.card--own::before{background:var(--ink)}
.card--own,.card--own p,.card--own .card__role{color:var(--paper)}
.card--own .card__cap{color:rgba(255,255,255,.55)}
.card--own p{color:rgba(255,255,255,.76)}
.card--own .tags{color:rgba(255,255,255,.5)}
.card__fig{margin:0;padding:1.4em 1.4em 0}
.card__cap{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted);margin:0 0 .8em}
.card__pic{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.card__b{display:flex;flex-direction:column;gap:.6em;flex:1;padding:1.4em 1.4em 3.2em}
.card__role{font-family:var(--font-body);font-size:.85em;font-weight:600;letter-spacing:.005em;color:var(--muted)}
.card h3{font-size:clamp(17px,1.5vw,22px);margin:0}
.card h3 a{display:inline}
.card p{margin:0;font-size:.95em;line-height:1.6;color:#3B333F;text-wrap:pretty}
.tags{margin:0;font-size:.82em;color:var(--muted)}
.card__link{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;font-size:.9em;font-weight:600;padding-top:.4em}
/* Het jaartal in de uitsnede. */
.card__tab{
  position:absolute;right:0;bottom:0;z-index:1;
  width:7.4em;height:2.4em;
  display:grid;place-items:center;
  font-size:14px;font-weight:400;color:var(--muted);
}
.card.is-out{display:none}
.more{margin-top:clamp(2.4rem,3vw,3.4rem);display:flex}

/* ==========================================================================
   Wat ze zeggen
   Drie gelamineerde papieren kaarten op een zwarte wand.
   ========================================================================== */

/* Geen kaartjes: drie citaten los op de zwarte wand, om en om naar links en
   rechts. Wat een citaat tot een citaat maakt is de stem - hier de cursieve
   serif, de enige plek op de site waar een derde face is toegestaan. */
.quotes{display:grid;gap:clamp(3rem,6vw,6rem)}
.q{margin:0;max-width:44ch}
.q--l{justify-self:start}
.q--r{justify-self:end;text-align:right}
/* Citaten in de typewriter (klant, 2026-09-15: twee fonts en een accent).
   Kleiner dan de serif van hiervoor: een monospace is breed, en een citaat
   van 44 tekens op 48px werd een muur. */
.q p{
  font-family:var(--font-quote);font-style:normal;font-weight:400;
  font-size:clamp(19px,2.2vw,31px);line-height:1.4;letter-spacing:0;
  margin:0 0 .9em;text-wrap:pretty;
}
.q footer{display:grid;gap:.15em;font-family:var(--font-body);font-size:15px}
.q footer b{font-weight:600}
.q footer span{color:rgba(255,255,255,.5)}
.vl-demo-note{margin-top:2.6rem;color:rgba(255,255,255,.5)}

/* ==========================================================================
   Hitte-contouren
   Dunne opstijgende lijnen aan de rand van een sectie, op tien procent inkt.
   Eén per sectie, hooguit één in de emberkleur. motion.js tekent ze terwijl de
   sectie voorbijkomt via het bestaande .vl-draw-contract; zonder die laag staan
   ze gewoon getekend.
   ========================================================================== */

.vl-heat{
  position:absolute;z-index:0;pointer-events:none;line-height:0;
  color:var(--ink);opacity:.1;
}
.vl-heat svg{width:100%;height:100%;display:block;overflow:visible}
.vl-heat--left{left:0;top:14%;width:clamp(64px,6vw,110px);height:clamp(240px,28vw,420px)}
.vl-heat--right{right:0;top:20%;width:clamp(90px,9vw,160px);height:clamp(180px,20vw,300px)}
.vl-heat--ember{color:var(--vl-ember);opacity:.3}
.sec--dark .vl-heat{color:var(--paper);opacity:.14}
.sec--dark .vl-heat--ember{color:var(--vl-ember);opacity:.4}
@media (max-width:760px){
  .vl-heat{display:none}
}

/* ==========================================================================
   Statrij - staat niet meer op de voorpagina (zie parts/section-stats.php:
   de cijfers waren verzonnen, criterium B15).
   ========================================================================== */

.sechead p.lead{max-width:38ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.2vw,2.2rem)}
.stat__in{padding:1.6em}
.stat b{
  display:block;
  font-family:var(--font-display);font-weight:900;font-stretch:118%;
  font-size:clamp(40px,5.4vw,74px);line-height:.86;letter-spacing:-.03em;
  color:var(--ink);
}
.stat i{
  display:block;margin-top:.8em;font-style:normal;
  font-family:var(--font-body);font-size:14px;font-weight:400;
  letter-spacing:.005em;line-height:1.6;
  color:rgba(255,255,255,.62);
}

/* ==========================================================================
   Projectarchief
   Dezelfde opening als de voorpagina: een rechte inktplaat die links het beeld
   uit loopt met de paginakop erin, en een gebrande onderrand.
   ========================================================================== */

.arch{padding-bottom:clamp(4rem,7vw,7rem)}
.arch__head{padding-top:clamp(2rem,3.4vw,3.4rem);overflow-x:clip;overflow-y:visible}
.arch__slab{
  display:grid;place-items:center;
  margin-inline-start:-.5em;margin-inline-end:24%;
  padding:.46em calc(var(--pad) + .5em) .54em;
  background:var(--ink);color:var(--paper);
  font-size:clamp(34px,6.2vw,88px);
}
.arch__slab h1{font-size:1em;line-height:.84;margin:0}
.arch__lead{margin:clamp(2.4rem,3vw,3.4rem) 0 clamp(1.6rem,2.4vw,2.4rem);max-width:52ch}
.arch .pagination{margin-top:clamp(2.4rem,3.4vw,3.4rem)}
.arch .nav-links{display:flex;flex-wrap:wrap;gap:.5em}
.arch .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6em;padding:.55em .8em;border-radius:2px;
  border:2px solid var(--ink);color:var(--ink);
  font-family:var(--font-body);font-size:14px;font-weight:600;
}
.arch .page-numbers.current{background:var(--ink);color:var(--paper)}

/* ==========================================================================
   Contact-CTA
   Slotsectie van de voorpagina, en onderaan de contactpagina. Staat in
   sections.css en niet in pages.css: de voorpagina laadt pages.css niet, en
   daar stond deze sectie dus ongestyled - kale opsommingstekens en een kop van
   24px. De maat haalt op 1440 ruim de 96px die criterium B19 eist voor een
   uitspraak met een brandend woord.
   ========================================================================== */

.cta__say{font-size:clamp(38px,7.2vw,104px);line-height:1.26;margin:0 0 clamp(2.4rem,4vw,4rem);max-width:16ch}
.cta__cols{display:flex;flex-wrap:wrap;gap:clamp(1.8rem,4vw,4rem) clamp(2.4rem,6vw,7rem);align-items:start}
.cta__list{margin:0;padding:0;list-style:none;display:grid;gap:.5em;font-size:16px}
.cta__list a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgba(255,255,255,.28)}
.cta__list a:hover{color:var(--paper);text-decoration-color:currentColor}
.cta__list li{color:rgba(255,255,255,.6)}
.cta__go{margin-inline-start:auto}

/* ==========================================================================
   Responsief
   ========================================================================== */

@media (max-width:1080px){
  .hero__in{display:block}
  .hero__slab{
    font-size:clamp(52px,13.6vw,132px);
    /* Een halve em ruimer dan het scherm: een blok dat precies zo breed is als
       het beeld laat aan weerszijden een rand papier staan. */
    margin-inline:calc(50% - 50vw - .5em);
  }
  .hero__slab-in{padding:.46em calc(.5em + var(--pad)) .54em}
  .hero__fig{margin:-2.4em 0 0 auto;width:min(64%,440px)}
  .hero__copy{margin-top:clamp(2.4rem,3.4vw,3.4rem)}

  .ev--a{grid-column:1/9}
  .ev--b{grid-column:9/13;margin-block-start:clamp(3rem,7vw,6rem)}
  .ev--c{grid-column:1/6}
  .ev--d{grid-column:7/13;margin-block-start:clamp(2rem,5vw,4rem)}
  .svc{column-gap:clamp(1.8rem,3.4vw,3rem)}
  .logos__in{margin-inline-end:5%;font-size:clamp(22px,4.6vw,40px)}
  .logos__also{width:min(560px,92%)}
  .cta__go{margin-inline-start:0}
  .about{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .about__fig{max-width:520px}
  .pull__in{margin-inline-start:6%;font-size:clamp(40px,10vw,84px)}
  .grid,.grid.vl-rail{grid-template-columns:repeat(2,1fr)}
  .arch__slab{margin-inline-end:8%;font-size:clamp(34px,8.6vw,76px)}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  /* Elke uitstek terug of kleiner. primitives.css doet dat al voor de
     primitieven (.vl-over, .vl-tape, .vl-frame--hang); wat deze sectie zelf
     heeft geplaatst, zetten we hier zelf terug. */
  .hero{padding-top:1.4rem;padding-bottom:2rem}
  .hero__slab{font-size:clamp(46px,22vw,104px);margin-inline:calc(50% - 50vw - .4em)}
  .hero__slab-in{padding:.5em calc(.4em + var(--pad)) .58em}
  .hero__fig{width:auto;margin:-2em 0 0;font-size:15px;--vl-tape-x:24%}
  .hero__copy{margin-top:1.6rem}
  .hero__tag{left:0;bottom:.8em}

  .marquee-bleed{--vl-over:0px}
  .marquee{padding:1.6rem 0 1.4rem}
  .marquee__track{gap:24px}

  /* Op smal scherm staan de vier foto's gewoon onder elkaar op volle breedte,
     met hetzelfde bijschrift erboven. */
  .events{grid-template-columns:1fr;row-gap:clamp(2.6rem,9vw,4rem)}
  .ev--a,.ev--b,.ev--c,.ev--d{grid-column:1;grid-row:auto;margin-block-start:0}
  .ev__body{margin-block-start:1.4em;max-width:none}
  .svc{grid-template-columns:1fr;row-gap:1.8rem}
  .pull{margin-bottom:2.6rem}
  .pull__in{
    margin-inline:0 -.6em;
    padding:.9em calc(var(--pad) + .6em) 1em var(--pad);
    font-size:clamp(34px,11vw,52px);
  }
  .logos__in{
    margin-inline:-.6em 0;
    padding:1.4em var(--pad) 1.6em calc(var(--pad) + .6em);
    font-size:clamp(21px,7.4vw,34px);
  }
  /* Naam en ondertitel onder elkaar: op een smalle kolom wrapt een lange naam
     en belandt de ondertitel er los naast, wat eruitziet als een fout. */
  .lg{display:block}
  .lg i{display:block;font-size:.34em;margin-top:.2em}
  .logos__also{width:auto;margin:2rem 0 0}
  .logos__also .vl-tape{left:1.1em}
  .about__fig{max-width:none}
  /* De kantlijn-notitie steekt rechts buiten de foto; op smal scherm is er geen
     kantlijn en duwt hij de pagina 6px breder. Weg ermee. */
  .vl-doodle.about__note{display:none}
  /* Twaalf kaarten onder elkaar is een muur; hier wordt het raster de rail uit
     primitives.css - sleepbaar, snappend en met de pijltjestoetsen te bedienen. */
  /* Alleen een raster dat ook echt een rail IS wordt hier een strip. Een gewone
     .grid (404, zoekresultaten) blijft een raster van één kolom - anders staan
     die kaarten op smal scherm naast elkaar en duwen ze de pagina breder. */
  .grid{grid-template-columns:1fr}
  .grid.vl-rail{display:flex;grid-template-columns:none}
  .grid.vl-rail>.card{width:min(80vw,320px)}
  .card__b{padding-bottom:3em}
  .q,.q--r{max-width:none;text-align:left;justify-self:start}
  .arch__slab{
    margin-inline:-.4em 0;
    padding:.5em calc(var(--pad) + .4em) .58em;
    font-size:clamp(30px,9vw,52px);
  }
  .stats{grid-template-columns:1fr}
  .stat{padding:1.3em}
}