/* =========================================================
   Richting C · "Vitrine", derde ronde
   Opgebouwd op de paginagrammatica van de brand guide zelf: een smalle
   kaderregel boven en onder over de volle breedte, daartussen één kolom
   die exact in het midden staat, en een botanische lijntekening die van
   de rand afloopt.

   Derde ronde, na "C vind ik vet, maar iets meer richting de huisstijl".
   Wat er is veranderd en waarom, met de bladzijde erbij:

   - De opmaak is nu symmetrisch. De guide is dat op elke pagina: p12 zet
     kop en lopende tekst gecentreerd op een vlak veld, p13 doet hetzelfde
     met het logo op een foto, p14 zet het monogram precies in het midden.
     De vorige ronde zette de arrangementen links en de kolom rechts, en die
     asymmetrie komt in de hele guide niet voor. Daarvoor moest het beeld
     mee: vitrine3 zet dezelfde bronfoto twee keer neer, links het ene
     arrangement en rechts het andere, allebei van hun buitenrand aflopend,
     met een leeg Earthy-veld van 57% ertussen waar de kolom in staat.
   - De merkzin staat in Awaken en niet meer in Sinkin. Op p13 staat het
     lopende blok onder het logo ook in Awaken; Sinkin is in de guide het
     gezicht voor langere teksten en voor de functionele regels, en dat
     blijft hier het formulier, de kaderregels en de kleine lettertjes.
   - De lijntekening staat groter en sterker in beeld, van de linkerrand
     aflopend zoals op p3, p8 en p12, in plaats van als nauwelijks
     zichtbaar streepje.

   Wat er in ronde twee al uit ging:
   - het fond #1E1210, dat neutraal grijs-zwart was en geen huisstijlkleur;
     het is nu #1A0F0C, dezelfde tint als Earthy #3D241D maar dieper, en de
     foto is naar diezelfde zwarten toe gegradeerd
   - de accentkleur #E8C4AC, die zelfbedacht was; die is nu Muted Sage,
     een hoofdkleur uit de guide (22,7% van de beeldbank)
   ========================================================= */

:root {
  /* Earthy op schaduwsterkte. Zelfde tint als #3D241D, alleen dieper, en
     exact de kleur waar de zwarten van de foto naartoe zijn gegradeerd. */
  --ground:   #1A0F0C;
  --ink:      var(--white-lily);
  --ink-soft: rgba(246, 245, 243, 0.76);
  --rule:     rgba(246, 245, 243, 0.24);

  /* Muted Sage in plaats van de zelfbedachte perzikkleur van ronde één.
     6,06:1 op #1A0F0C, gerekend 31-07-2026. Onder het scrim gemeten in de
     browser, zie de notitie bij .scrim. */
  --accent:   var(--muted-sage);

  --pad: clamp(1.15rem, 3.2vw, 3rem);
}

body {
  min-height: 100svh;
  background: var(--ground);
}

.vitrine {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: var(--pad);
  isolation: isolate;
  /* De lijntekening loopt met opzet van de rand af (right: -6%). Zonder deze
     regel telt dat stuk mee als pagina-breedte: gemeten scrollWidth 1511 tegen
     clientWidth 1425 op een venster van 1440. Het kader klipt hem nu weg. */
  overflow: hidden;
}

/* ---------- Beeld ----------
   Sinds 03-08 geen montage meer maar twee vrijstaande takken van Dauji
   (webp met alpha) op het vlakke Earthy-fond. Ze lopen echt van de
   zijkanten in: links raakt de bloesemtak de rand al in het bronbeeld,
   rechts is de steel tegen de inhoudsrand gecropt en duwt right: -1.5%
   de buitenste bloemblaadjes een fractie over de rand. De maten hangen
   aan de viewporthoogte (intrinsieke verhouding ~0,57 staand), dus op
   1440x900 is links ~510px breed en blijft het middenveld vrij voor de
   kolom van 512px. */
.cover { position: absolute; inset: 0; z-index: -3; overflow: hidden; }

/* Belichting (03-08, Dauji, tweede ronde): de takken staan licht getemperd
   (links het meest, de witte bloesems dragen veel meer licht dan de rode
   steel rechts), en de hover is een lichtplek die met de muis over de tak
   meeloopt: dezelfde taal als de letters, alleen zonder waas. De lichtplek
   is een tweede kopie van de afbeelding (.cover-glow) op vol licht, met
   dezelfde radiale klokmask als het logo zodat er nergens een harde rand
   zit. Zonder muis (touch, reduced-motion, geen JS) blijft alleen de
   getemperde stand staan. */
.cover-links {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 103%;
  width: auto;
  filter: brightness(0.78) saturate(0.85);
}
.cover-rechts {
  position: absolute;
  right: -1.5%;
  bottom: -2%;
  height: 90%;
  width: auto;
  filter: brightness(0.86) saturate(0.92);
}
/* Na de basisregels, en met .cover ervoor, zodat deze filter en mask altijd
   van de per-kant-regels winnen. */
.cover .cover-glow {
  filter: brightness(1.06) saturate(1);
  opacity: 0;
  transition: opacity 500ms var(--ease);
  -webkit-mask-image: radial-gradient(circle 150px at var(--gx, 50%) var(--gy, 50%),
      rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.22) 65%,
      transparent 100%);
  mask-image: radial-gradient(circle 150px at var(--gx, 50%) var(--gy, 50%),
      rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.22) 65%,
      transparent 100%);
}
.cover .cover-glow.on { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cover .cover-glow { display: none; }
}

/* Het volledige stilleven (websitealternatief): bestaat alleen op smal,
   zie de mobiele media query. */
.cover-alt { display: none; }

/* Het scrim hoeft weinig te doen: de kolom staat in het lege middenveld, dat
   op het doek zelf al vlak Earthy is. Wat overblijft is de voet, want de
   onderste kaderregel loopt van rand tot rand en passeert daarbij de vazen
   en de tafelrand. Geen zijverloop meer; dat hoorde bij de asymmetrische
   opmaak en zou de symmetrie nu juist breken.

   De extra stop op 12% in het onderste verloop is gemeten werk, geen smaak:
   met een rechte lijn van 0,90 naar 0,32 stond er op de bovenrand van de
   voetregel (y 804 van 900) maar 0,59 dekking, en daar ligt rechts een
   lichte bloem. De legalregel haalde daar 3,24:1. Op 0,74 bij 12% zakt die
   pixel naar 78 van 255 en komt het vak op 5,49:1. */
.scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top,    rgba(26, 15, 12, 0.92) 0%, rgba(26, 15, 12, 0.74) 12%, rgba(26, 15, 12, 0.32) 22%, transparent 42%),
    linear-gradient(to bottom, rgba(26, 15, 12, 0.44) 0%, rgba(26, 15, 12, 0.12) 22%, transparent 40%);
  pointer-events: none;
}

/* Foto-slot, schakelbaar. Zodra Dauji's eigen foto er staat en dus wél
   voor deze compositie gemaakt is, hoeft er geen fade meer overheen: zet
   data-photo-ready op .vitrine naar "true" (in index.html) en het scrim
   verdwijnt in deze ene regel, zowel breed als smal. Zie foto-instructie.txt. */
.vitrine[data-photo-ready="true"] .scrim { display: none; }

/* ---------- Botanische lijntekening ----------
   Uit de brand guide zelf (pagina 3, 8 en 12 zetten hem steeds van de rand
   aflopend). Rasterbeeld van 536x627 uit de PDF; hij wordt daarom nergens
   groter getoond dan 340px, dus altijd boven 1,5x.

   Op breed staat hij niet meer in beeld, en dat is een correctie op de
   vorige ronde. De guide zet deze tekening op vlakke kleurvelden (p3, p8,
   p12); de pagina's mét fotografie, zoals de Instagram-opmaak op p13,
   dragen er geen. Nu de arrangementen aan allebei de randen staan is er ook
   geen vrije rand meer om hem van af te laten lopen: in de render van
   31-07-2026 kwam hij dwars over de vaas te liggen en werd het een krabbel
   tussen de stelen. Op smal blijft hij wel staan, want daar is de bovenste
   helft van de montage juist wel een vlak Earthy-veld.

   Let op: alleen display gaat uit, de rest van de regel blijft staan. Toen
   deze regel eerder tot `display: none` was ingekort, verloor de tekening op
   smal ook zijn absolute positie, kwam hij in de tekststroom terecht en werd
   de pagina 1367px hoog in plaats van 812 (gemeten 31-07-2026). */
.ornament {
  position: absolute;
  left: -5%;
  top: 24%;
  z-index: -1;
  width: min(340px, 34vw);
  aspect-ratio: 536 / 627;
  background: no-repeat center / contain;
  opacity: 0.26;
  pointer-events: none;
  user-select: none;
  display: none;
}

/* ---------- Kaderregels ----------
   De guide zet op elke pagina drie stukjes kapitaaltjes tegen de bovenrand:
   links het onderwerp, in het midden de uitgave, rechts het merk. Dat raster
   is hier de kop- en de voetregel. */
.rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rail > :nth-child(1) { justify-self: start;  text-align: left; }
.rail > :nth-child(2) { justify-self: center; text-align: center; }
.rail > :nth-child(3) { justify-self: end;    text-align: right; }
.rail p, .rail address { margin: 0; font-style: normal; }

.rail-bottom {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  row-gap: 0.35rem;
}
.rail-bottom .foot { font-size: inherit; letter-spacing: inherit; }

/* ---------- De kolom ----------
   Precies in het midden van de pagina, in het lege veld tussen de twee
   arrangementen. Het middenveld is 57% van het doek; op een venster van
   1440 bij 900 is dat na object-fit: cover 741px, en de kolom is 512px, dus
   er blijft aan weerszijden ruim 100px lucht tussen de letters en de eerste
   bloemen. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vh, 2.5rem) 0;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 32rem);
}

/* Het merk zelf is de kop, en het staat groot: op p13 van de guide beslaat
   het logo op een foto ruim de helft van de breedte. Bij deze maat is de
   verticale PROJECT naast de I ook echt te lezen; de kapitaalhoogte daarvan
   is 0,039 van de hoogte van het logo, dus vanaf circa 420px breed komt hij
   boven de 5px uit.

   Het logo staat als inline SVG (dezelfde letterpaden als logo-lily.svg) en
   niet meer als <img>. overflow: visible laat de R gewoon zijn eigen viewBox
   buiten lopen; dat is de "vervorming die in de F en R zit" uit de brand
   guide en geen clipping-fout.

   Sluier (03-08, verzoek Dauji na de mail van Danique van 31-07): het nieuwe
   logo is nog niet gelanceerd, dus het wordmark gaat achter een waas. De
   basislaag staat permanent vervaagd; de onthullingslaag eronder in de HTML
   is dezelfde tekening via <use>, minder vervaagd maar nooit scherp, en
   alleen zichtbaar in een zachte radiale mask rond de cursor (positie komt
   uit hover-logo.js als --mx/--my). De maskpiek is 0,6 alfa en de laag houdt
   blur 5px: ook pal onder de cursor staat er dus geen scherp logo. Het oude
   letter-magneet-effect is hiermee vervallen; vervaagde letters die los
   bewegen lazen als smeer, niet als spel. */
.lockup { margin: 0; position: relative; }
.lockup .wordmark {
  width: clamp(280px, 33vw, 500px);
  height: auto;
  overflow: visible;
}

/* Tweede kalibratie (03-08, Dauji): de eerste stand (blur 9-15px, opacity
   ~0,5) las nog als een leesbaar logo achter matglas. De bedoeling is
   andersom: als geheel nauwelijks waarneembaar, hooguit een vermoeden van
   iets in de ruimte boven de kop, en vrijwel alle zichtbaarheid komt uit de
   cursor-onthulling.

   Derde kalibratie: de blur zit niet meer hier maar als SVG-filter in de
   basislaag zelf (#veil-blur in index.html, stdDeviation 58 in
   viewBox-eenheden, ~19px op een wordmark van 450px). Reden: de CSS-blur
   werd door Chrome hard afgeknipt op de elementrand; het SVG-filtergebied
   is opgerekt zodat de waas een volledige uitloop krijgt. */
.wordmark-base {
  opacity: 0.16;
}

/* Heel trage ademhaling in de waas, zodat het vermoeden leeft en niet als
   laadfout leest. Gaat via de reduced-motion-kill-switch in base.css
   vanzelf uit. */
@keyframes veil-breathe {
  0%, 100% { opacity: 0.11; }
  50%      { opacity: 0.20; }
}
.wordmark-base { animation: veil-breathe 8.5s ease-in-out infinite; }

/* Het element is groter dan het logo (insets in dezelfde verhouding als de
   viewBox-marge, zie index.html), zodat gloed en maskverloop binnen het
   eigen canvas kunnen uitdoven in plaats van af te kappen op de blokrand.
   hover-logo.js rekent de maskpositie daarom om naar dít element.

   Selector mét .lockup, en maten expliciet in procenten: de eerste versie
   (kale .wordmark-reveal met width: auto) verloor van de breedte-clamp op
   .lockup .wordmark, waardoor de laag de basisbreedte kreeg op de
   verschoven positie en de glimp 17% te klein naast de waas stond
   (03-08, gezien door Dauji). 120% en 160% zijn exact de viewBox-verhouding
   1620/1350 en 784/490. */
.lockup .wordmark-reveal {
  position: absolute;
  inset: -30% -10%;
  width: 120%;
  height: 160%;
  /* base.css zet max-width: 100% op elke svg; zonder deze regel wordt de
     120% daardoor stilletjes 100% en staat de glimp te klein en verschoven
     (03-08 gemeten: schaal 0,176 tegen 0,211 van de basis). */
  max-width: none;
  filter: blur(5px);
  opacity: 0;
  transition: opacity 650ms var(--ease);
  pointer-events: none;
  /* Piek op 0,65: nu de basis vrijwel onzichtbaar is moet de glimp bij de
     cursor het alleen dragen, anders is er helemaal niets te ontdekken.
     Nooit 1, en de restblur van 5px blijft: ook pal onder de cursor geen
     scherp logo.

     Vierde kalibratie (03-08): klokprofiel dat pas op de volle straal
     uitdooft, zonder aanwijsbare cirkelrand. Vijfde: straal terug naar 80px
     (Dauji: kleiner), en de harde kap op de blokrand is opgelost met het
     ruimere canvas hierboven, niet met de gradiënt. */
  -webkit-mask-image: radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%),
      rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.22) 50%,
      rgba(0, 0, 0, 0.08) 75%, transparent 100%);
  mask-image: radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%),
      rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.22) 50%,
      rgba(0, 0, 0, 0.08) 75%, transparent 100%);
}
.lockup.is-peeking .wordmark-reveal { opacity: 1; }

/* Alleen reduced-motion verbergt de onthullingslaag volledig. NIET meer
   (hover: none): die stond hier sinds 03-08 en betekende dat de laag op
   elke telefoon display: none had, waardoor geen enkele mobiele
   logo-animatie ooit iets kon tonen (04-08 op het toestel van Dauji
   gebleken; de iframe-tests draaiden op een desktop-host en konden deze
   query nooit raken). Op touch stuurt gsap de laag met opacity. */
@media (prefers-reduced-motion: reduce) {
  .wordmark-reveal { display: none; }
}

.hair {
  width: 56px;
  height: 1px;
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 clamp(1.1rem, 2.4vh, 1.8rem);
  border: 0;
  background: var(--rule);
}

.lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  font-size: clamp(1.85rem, 3.1vw, 2.9rem);
  text-shadow: 0 1px 16px rgba(26, 15, 12, 0.55);
}

/* De merkzin in Awaken, niet in Sinkin. Zo staat hij in de guide: op p13
   loopt het blok onder het logo in Awaken, gecentreerd, in een smalle maat
   met korte regels. Volle inkt en niet de zachte variant, want in de guide
   staat dat blok in vol White Lily. */
.claim {
  margin: 0.9rem 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(26, 15, 12, 0.5);
}

/* Datum/countdown: eigen, stilstaande regel, gevuld door app.js. Staat in de
   leesvolgorde tussen de boodschap en het formulier (merk, boodschap, datum,
   e-mailveld), en dat is nu ook de brondode: geen order-truc nodig zoals bij
   de aftelling in ronde 2. Qua maat hoort hij bij de tweede hiërarchielaag,
   dus kleiner dan .claim maar duidelijk leesbaar; niet zo klein als .rail of
   .fineprint, want dit is een van de vier dingen die de bezoeker moet
   meekrijgen en geen kadertekst. */
.launch {
  margin: clamp(1.3rem, 2.8vh, 1.9rem) 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
}
.launch-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.launch-date {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.col .notify {
  width: 100%;
  max-width: 24rem;
  margin-top: clamp(1.7rem, 3.6vh, 2.6rem);
}

/* De finale-wrapper is op breed onzichtbaar als doos: de kinderen doen
   alsof ze losse kolomkinderen zijn. Op smal wordt hij een absoluut blok,
   zie de mobiele media query. */
.finale { display: contents; }

/* Kop van de mobiele scroll-finale; op breed bestaat hij niet. */
.kicker {
  display: none;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 1px 14px rgba(26, 15, 12, 0.5);
}

/* ---------- Hiërarchie, vierde ronde ----------
   Verzoek van Dauji: de onbelangrijke teksten mogen kleiner en stiller, meer
   eenvoud en overzicht. .lead en .claim (de eigenlijke boodschap) blijven op
   hun eigen maat; wat verandert is de kadertekst, de footer en de
   kleine lettertjes onder het formulier, dus alles wat ondersteunend is en
   niet de boodschap zelf.

   0,78rem/12,5px staat in base.css als de gemeten ondergrens voor leesbare
   kadertekst (31-07-2026, .count .lab); die grens wordt hier niet onderschreden.
   Wat wél verandert: .fineprint en .form-status komen van 0,82rem terug naar
   diezelfde 0,78rem-vloer (nog steeds leesbaar, wel duidelijk stiller dan de
   boodschap erboven), en de kadertekst boven en onder krijgt meer lucht ten
   opzichte van de kolom zodat hij optisch als kader leest en niet als tekst
   van gelijk gewicht. */
.col .fineprint,
.col .form-status {
  text-align: center;
  font-size: 0.78rem;
}
.rail-top { margin-bottom: clamp(0.4rem, 1.4vh, 0.9rem); }
.rail-bottom .foot { font-size: 0.78rem; }

/* ---------- Intro: match cut op het logo (04-08, Dauji, "net als Uchu") ----------
   html.laden (gezet door het inline snippet bovenin de body): alles
   behalve het gesluierde logo is onzichtbaar, het logo staat al exact op
   zijn definitieve plek. hover-logo.js speelt één glinstering (de
   lichtsweep) over het wordmark en haalt daarna .laden weg en zet één
   tel .intro-klaar: die draagt de fade-in van de rest van de pagina, op
   precies dezelfde compositie, en wordt daarna weer verwijderd zodat de
   transitie niet achter de scroll-gedreven opacity's aan gaat lopen. */
html.laden .rail-top,
html.laden .hair,
html.laden .lead,
html.laden .claim,
html.laden .launch,
html.laden .kicker,
html.laden .notify,
html.laden .rail-bottom,
html.laden .cover img,
html.laden .ornament {
  opacity: 0 !important;
}
html.intro-klaar .rail-top,
html.intro-klaar .hair,
html.intro-klaar .lead,
html.intro-klaar .claim,
html.intro-klaar .launch,
html.intro-klaar .kicker,
html.intro-klaar .notify,
html.intro-klaar .rail-bottom,
html.intro-klaar .cover img,
html.intro-klaar .ornament {
  transition: opacity 750ms var(--ease);
}

/* ---------- Smal ----------
   Op een telefoon staat de kolom over de volle breedte en dus wel in het
   midden van de pagina. De montage is daar staand: een donker veld boven,
   de arrangementen daaronder. */
@media (max-width: 899px) {
  /* Mobiel, zevende ronde (Dauji, 04-08): sticky hero + finale op scroll.
     De opbouw: (1) een hero van exact één schermvulling die vastplakt
     (position: sticky op .stage), met kaderregel, het gesluierde logo
     gecentreerd, de boodschap en één bloemsteel vanaf rechts; (2) daarna
     ~55svh scrollruimte waarin alleen de hero in beeld staat en de
     lichtplek (het hover-effect, scroll-gestuurd via --mx in
     hover-logo.js) over het wordmark trekt; (3) dan schuift de finale
     ("Ben je benieuwd?" + formulier) als eigen dichte sectie over de hero
     heen, met de compacte voetregel eronder. hover-logo.js verplaatst op
     smal de .finale en de rechterbloem in de DOM (uit de kolom, de bloem
     de hero in); de CSS hier rekent daarop. Pot-stilleven, linkertak en
     lijntekening bestaan op smal niet. */
  /* overflow: visible en niet hidden: een clippende voorouder schakelt
     position: sticky uit (04-08 gemeten: de hero scrolde gewoon weg). De
     horizontale clip voor de bloem die van rechts inloopt zit op de body
     met overflow-x: clip, wat géén scrollcontainer maakt en sticky dus
     intact laat. */
  html, body { overflow-x: clip; }
  /* Padding op de vitrine eraf: die duwde de sticky hero 18px onder de
     viewportrand, waardoor de pagina eerst een stukje scrolde voordat hij
     plakte (04-08, Dauji: "mag helemaal sticky zijn"). De hoogte van de
     vitrine ís de scrollreis: 100svh hero + 110svh animatieruimte. */
  .vitrine { display: block; padding: 0; height: 210svh; min-height: 0; overflow: visible; }

  /* Hero: sticky vanaf pixel nul, één schermvulling, kolom gecentreerd
     (dat doet de basisregel van .stage al). Kaderregel, bloem, finale en
     voetregel worden door hover-logo.js de hero in verplaatst zodat
     álles blijft staan; de scroll stuurt alleen de overgangen. */
  .stage {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 0 var(--pad);
  }
  .stage .rail-top {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    right: var(--pad);
    margin: 0;
  }
  .lockup { margin: 0; }
  .lockup .wordmark { width: min(64vw, 285px); }

  /* Teksthiërarchie (verzoek Dauji): één duidelijke kop (lead), daaronder
     de merkzin stiller en kleiner, en de datumregel als klein anker. Meer
     lucht tussen de lagen. */
  .hair { margin: 3.4svh 0 2.6svh; }
  .lead { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .claim {
    margin-top: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 26ch;
  }
  .col .launch { margin-top: 3svh; }
  .launch-label { font-size: 0.6rem; }
  .launch-date { font-size: 0.92rem; letter-spacing: 0.06em; }

  /* De bloemsteel vanaf rechts, in de sticky hero (verplaatst door
     hover-logo.js), achter de tekst. Rechtsonder in de hero: daar is de
     compositie leeg. */
  .stage .cover-rechts {
    display: block;
    position: absolute;
    z-index: -1;
    left: auto;
    top: auto;
    bottom: 3svh;
    right: -5vw;
    height: 38svh;
    width: auto;
    max-width: none;
    filter: brightness(0.8) saturate(0.88);
  }
  .cover-links, .cover .cover-glow, .cover .cover-rechts, .cover-alt,
  .ornament { display: none; }

  /* De logo-tease = het hover-effect, scroll-gestuurd: zelfde
     var-gedreven lichtplek als desktop, kleinere straal (60px, het logo
     is hier half zo groot), zelfde klokprofiel. Piek 0,65 + restblur
     2,5px: het logo is op geen enkel moment volledig zichtbaar. De
     650ms-desktop-fade staat uit; het script stuurt per scrollframe.
     Selector mét .lockup vanwege de specificiteit van de basisregel. */
  .lockup .wordmark-reveal {
    will-change: opacity;
    transition: none;
    filter: blur(2.5px);
    -webkit-mask-image: radial-gradient(circle 60px at var(--mx, 50%) var(--my, 50%),
        rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.08) 75%, transparent 100%);
    mask-image: radial-gradient(circle 60px at var(--mx, 50%) var(--my, 50%),
        rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.08) 75%, transparent 100%);
  }

  /* De finale: geen blok dat eroverheen schuift maar een echte overgang
     (04-08, Dauji): hij staat als overlay op de plek van de boodschap in
     de sticky hero, en hover-logo.js kruist per scrollframe de boodschap
     weg terwijl deze opkomt. Start onzichtbaar en onklikbaar; het script
     zet opacity, translate en pointer-events. */
  .finale {
    display: block;
    position: absolute;
    z-index: 2;
    left: var(--pad);
    right: var(--pad);
    top: 52%;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: center;
  }
  /* De beginstanden van de overgang alleen als het script draait
     (html.scrollhero): zonder JS blijft alles gewoon zichtbaar. */
  html.scrollhero .finale { opacity: 0; pointer-events: none; }
  .kicker {
    margin: 0;
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }
  .finale .notify {
    width: 100%;
    max-width: 24rem;
    margin: 1.6rem auto 0;
  }
  .finale .fineprint { font-size: 0.75rem; text-align: center; }
  .finale .form-status { min-height: 1.2em; font-size: 0.75rem; text-align: center; }

  /* Formulier gestapeld: de knop is met spatiëring 217px breed en liet op
     375 maar 109px over voor het invoerveld (gemeten 31-07). */
  .notify .field { flex-wrap: wrap; gap: 0.55rem; border-bottom: 0; }
  .notify .field input { flex: 1 1 100%; border-bottom: 1px solid var(--rule); }
  .notify .field:focus-within input { border-bottom-color: var(--accent); }
  .notify .field button { flex: 1 1 100%; justify-content: center; min-height: 48px; padding: 0; }

  /* ---- kaderregels op smal ---- */
  .rail {
    grid-template-columns: 1fr;
    justify-items: center;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
  .rail > :nth-child(1),
  .rail > :nth-child(2),
  .rail > :nth-child(3) { justify-self: center; text-align: center; }

  .rail-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.55rem;
    margin-bottom: 0;
  }
  .rail-top p + p::before { content: "·"; margin-right: 0.55rem; opacity: 0.55; }

  /* Compacte voetregel (verzoek Dauji: kleiner), onderin de sticky hero;
     komt samen met de finale op via de scroll-overgang. */
  .rail-bottom {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    row-gap: 0.3rem;
    margin: 0;
    padding: 0.2rem var(--pad) 0.7rem;
    background: transparent;
    border-top: 0;
  }
  html.scrollhero .rail-bottom { opacity: 0; }
  .rail-bottom .foot { font-size: 0.64rem; letter-spacing: 0.1em; }
  .rail-bottom .foot-left {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 0.45rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
    width: 100%;
  }
  .socials { gap: 0; }
  .socials a { width: 38px; height: 38px; }
  .socials svg { width: 14px; height: 14px; }
  .rail-bottom .foot-legal { display: flex; flex-direction: column; gap: 0.15rem; }
  .rail-bottom .foot-legal .dot { display: none; }

  /* Staging-balk (alleen aanwezig op webhost, niet op het domein). */
  .switch { font-size: 0.58rem; gap: 0; padding: 0.25rem 0.35rem; }
  .switch a { padding: 0.2rem 0.3rem; white-space: nowrap; }
  body:has(.switch) .rail-top { padding-top: 1.5rem; }
}

/* Korte telefoons (bijv. 360x740): de hero draagt alleen logo en
   boodschap en past ruim, maar een slag kleiner houdt de verhoudingen
   rustig. */
@media (max-width: 899px) and (max-height: 768px) {
  .lockup .wordmark { width: min(56vw, 250px); }
  .lead { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .hair { margin: 2.6svh 0 2svh; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .stage { padding: 0.4rem 0; }
  /* Was .lockup img en deed dus niets meer sinds het logo inline SVG werd. */
  .lockup .wordmark { width: clamp(200px, 22vw, 300px); }
  .lead { font-size: clamp(1.4rem, 5.4vh, 2rem); }
  .claim { display: none; }   /* staat ook in de og-kaart en in de kop */
  .hair { margin: 0.8rem 0 0.7rem; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: var(--white-lily); --rule: rgba(246, 245, 243, 0.55); }
  .scrim { background: rgba(26, 15, 12, 0.84); }
  .ornament { display: none; }
}