/* VLAME basisstijlen. Reset, opmaak-primitieven en gedeelde utility classes. */

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(16px,1.04vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- wrap ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- type ---------- */
/* Anybody 900 op breedte-as 125%: breed en zwaar, met negatieve letterafstand
   en een regelafstand onder 0,9. De schaal is op deze metriek afgesteld.

   overflow-wrap:normal en hyphens:none zijn een bewuste keuze, geen omissie.
   Een display-face die een woord middenin afbreekt (HARDSTY / LE) ziet er
   kapot uit; een woord dat zichtbaar buiten zijn doos steekt zie je meteen en
   los je op met een maat kleiner. Liever een fout die opvalt. */
h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:900;font-stretch:125%;
  text-transform:uppercase;line-height:.86;letter-spacing:-.02em;
  /* Lucht onder elke kop. De klant wees erop dat alles tegen elkaar aan zat;
     een kop die aan zijn eigen alinea plakt is daarvan het duidelijkste geval. */
  margin:0;margin-block-end:.6em;
  overflow-wrap:normal;hyphens:none;text-wrap:balance;
}
h1:last-child,h2:last-child,h3:last-child,.display:last-child{margin-block-end:0}
h1{font-size:clamp(32px,7.3vw,108px)}
h2{font-size:clamp(26px,4.8vw,66px)}
/* Uitzondering op de regel hierboven (spec-wijziging d79d586): h3 is de
   kleinste display-maat en wrapt het vaakst naar twee regels, dus mag tot
   0,95 - op 0,86 plakken die twee regels aan elkaar. */
h3{font-size:clamp(17px,1.85vw,26px);line-height:.92;letter-spacing:-.02em}

/* .eyebrow staat hier nog als haak voor het ontwerpbestand, maar geen enkel
   sjabloon rendert hem nog: de rij kleine gespatieerde hoofdletters met een
   bolletje ervoor is het duidelijkste sjabloonteken van een gegenereerde site
   (criterium B13). Het bolletje dat ervoor stond is per 2026-09-14 helemaal
   weg - regel en keyframe allebei - op verzoek van de klant. */
.eyebrow{
  font-family:var(--font-body);
  font-size:13px;font-weight:700;letter-spacing:.01em;
  color:var(--muted);margin:0;
}
.grad{color:var(--ink)}
.lead{font-family:var(--font-body);font-size:clamp(17px,1.4vw,21px);color:#3B333F;max-width:56ch;text-wrap:pretty}
.small{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--muted)}

/* ---------- geen vervorming op koppen ----------
   Hier stond tot 2026-09-14 een turbulentiefilter op h1/h2/.display - eerst als
   glitch, daarna als hitteflikkering. Het is er op verzoek van de klant
   helemaal uit: "zolang alles maar correspondeert met een echt vlam-effect en
   samenhangt". Een kop die zelf al staat te trillen leidt af van het enige
   effect dat de site draagt, en dat effect is het vuur op het accentwoord
   hieronder. Koppen zijn gewoon inkt. #vl-warp bestaat niet meer in
   parts/filters.php. */

/* ---------- vuur op accentwoorden (aanvullende spec 2.2, amendement 2026-09-15) ---------- */
/* VLAME betekent vlam. Drie versies vuur sneuvelden op één dag bij de klant
   (vervormde letterkopie, vlamtongen uit een ruistegel, gloed achter het
   woord): alles wat als getekend vuur leest is "nep" of "raar". Wat overblijft
   is het minst mogelijke: de letter zelf, in de face en maat van zijn regel,
   met aan zijn bovenrand een warme gloed - inkt (of papier) die naar amber
   loopt. Geen pseudo-element, geen filter, geen beweging. Het woord is heet,
   meer niet. Het budget (≤ 1 per sectie, ≤ 5 per pagina) blijft.
   .spark zet zelf GEEN font-family, font-weight of font-size: het accentwoord
   staat in de face en maat van de regel waar het in hoort. */
.spark{
  --spark-ink:var(--ink);
  position:relative;display:inline-block;cursor:default;
  background:none;
}
.sec--dark .spark,.vl-on-ink .spark{--spark-ink:var(--paper)}
/* Vierde ronde (klant: "geen oranje meer, zo clean mogelijk"): ook de warme
   rand is weg. Het accentwoord is gewoon inkt of papier, in de face en maat
   van zijn regel. De klasse blijft, zodat het budget (≤ 1 per sectie) en de
   plek van het accent in de opmaak overeind staan. */
.spark__t{color:var(--spark-ink)}

/* Het strobe-easter-egg. Bewust GEEN felle wit-zwartflits op acht keer per
   seconde: dat is een epilepsierisico. Dit is een amberwas op 14% die vier keer
   per seconde aan- en uitgaat - je ziet dat er iets gebeurt, en het kan geen
   kwaad. Het echte effect zit in het vuur, dat via .is-strobe feller wordt.
   Bij prefers-reduced-motion zet easter.js de klasse niet eens. */
html.is-strobe::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--paper);opacity:0;
  animation:vl-strobe .26s steps(2,end) infinite;
}
@keyframes vl-strobe{0%,60%{opacity:0}61%,100%{opacity:.14}}

/* ---------- buttons ---------- */
/* Geen kleine gespatieerde hoofdletters (sjabloon), geen pil (sjabloon), en
   sinds de Crotona-ronde ook geen harde offset-schaduw meer: die stempel is
   het handelsmerk van wearecrotona.nl. Wat overblijft is een rechthoek met
   rechte hoeken, en bij hover een dunne emberstreep die van links aangroeit -
   de enige plek buiten het vuurwoord waar de vlamkleur op een knop komt. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;padding:.9em 1.4em;border-radius:2px;
  font-family:var(--font-body);
  font-size:16px;font-weight:600;letter-spacing:.005em;
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;
}
/* De streep onder de knop bij hover is sinds 2026-09-15 inkt of papier
   (currentColor), geen vlamkleur: de klant wil geen oranje meer. */
.btn::after{
  content:"";position:absolute;left:0;bottom:0;height:.14em;width:100%;
  background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--flame{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ghost-light{border-color:var(--paper);color:var(--paper)}
/* De primaire actie in een formulier: inktvlak, zoals de belknop in de balk. */
.btn--ember{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn .arw{flex:0 0 auto}

/* ---------- sections ---------- */
section{scroll-margin-top:86px}
/* Ruime verticale lucht per sectie - de klant noemde het met zoveel woorden:
   "alles zit te dicht op elkaar". */
.sec{position:relative;padding-block:clamp(6rem,12vw,11rem);padding-inline:0}
.sec--dark{background:var(--ink);color:#fff}
.sec--dark .eyebrow{color:rgba(255,255,255,.5)}
.sec--tint{background:var(--paper-2)}
.sechead{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sechead p.lead{margin:14px 0 0}
.sec--dark .lead{color:rgba(255,255,255,.72)}

/* ---------- reveal ---------- */
/* .rv is de standaard: een blok komt van onderen omhoog. De drie varianten
   eronder zijn de entree van de hero-compositie: de plaat schuift van links
   in, de print valt er 120ms later op, de band komt van rechts. Alleen
   transform en opacity bewegen.

   De RUSTSTAND (de scheefstand van plaat, print en band) staat bewust NIET
   hier maar op de omhullende elementen in sections.css. Zo eindigt elke
   variant op transform:none en kan .rv.in - en de no-JS-regel - dat gewoon
   zetten zonder de compositie te wissen. */
/* --rv-rest is de stand waar elke variant op eindigt. Hij is niet leeg maar
   componeert de scheefstand van .vl-offset door: een kaart die zowel .rv als
   .vl-offset draagt zou anders bij het onthullen recht komen te staan, omdat
   .rv.in zwaarder weegt dan .vl-offset en transform maar één keer bestaat.
   Op een element zonder .vl-offset valt het terug op de identiteit. */
.rv{
  --rv-rest:rotate(var(--vl-tilt,0deg)) translateY(var(--vl-drop,0px));
  opacity:0;transform:translateY(26px) var(--rv-rest);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.rv.in{opacity:1;transform:var(--rv-rest)}
.rv--slab{transform:translateX(-6%) rotate(-3.5deg) var(--rv-rest)}
.rv--drop{transform:translateY(5%) rotate(3deg) var(--rv-rest);transition-delay:.12s}
.rv--band{transform:translateX(4%) var(--rv-rest)}
/* Gewone opkomst, maar in em: een blok dat met zijn eigen tekengrootte
   meeschaalt in plaats van met een vaste 26px. */
.rv--rise{transform:translateY(1.4em) var(--rv-rest)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:var(--rv-rest)}
  html{scroll-behavior:auto}
  /* Koppen dragen sowieso geen filter meer (zie hierboven), dus hier hoeft
     niets uitgezet te worden. Wat overblijft is het vuur. */
  /* Het vuur is sinds 2026-09-15 alleen nog de warme rand in de letter zelf:
     geen beweging, dus hier niets uit te zetten. */
  /* De gebrande rand staat stil bij reduced motion. */
  .vl-cut--burn--live::before,.vl-cut--burn--live::after{filter:url(#vl-burn)}
}
:focus-visible{outline:2.5px solid currentColor;outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .sechead{grid-template-columns:1fr}
}

/* Smal scherm: de breedte-as in plaats van de tekengrootte.
   Op 390px is er 375px werkruimte. Een lang Nederlands samengesteld woord
   (PROJECTMANAGEMENT, ARTIESTENBEGELEIDING) meet op breedte 125% ruim 480px en
   steekt dus buiten beeld - en afbreken middenin het woord is geen optie.
   Condenseren naar 88% brengt datzelfde woord op ~340px zonder ook maar een
   punt kleiner te worden. Dit is precies waarvoor we een variabele
   display-face hebben gekozen. */
@media (max-width:760px){
  h1,h2,h3,.display{font-stretch:88%}
}

/* ---------- toegankelijkheid & media (niet in DESIGN) ---------- */
.vl-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 8px 0;
  font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:.01em;
}
.vl-skip:focus{left:0}

/* Fluid media default, voorkomt horizontale overflow. */
img,svg,video,iframe{max-width:100%;height:auto}