/* ==========================================================================
   BASIS
   Startbestand voor de persoonlijke site van Lucas Reinds.

   Hierin staat alleen wat op pankra.com bewezen en opgemeten is en wat op
   iedere site van dit merk terugkomt: de afspraken bovenin, de reset, de
   filmkorrel, de lichtkrant, de kaart, de voet en de beweging. Alles wat
   Pankra-eigen is, zoals de hero, de logobanen en de aanpaksectie, staat hier
   niet in. Kijk daarvoor in referentie/pankra.css.

   AFSPRAKEN. Hier staan alle keuzes één keer. Verderop verwijst alles hiernaar
   en krijgt niets meer zijn eigen maat, kleur of afstand. Wijk je toch af, dan
   schrijf je erbij waarom.

   Letters:  grote koppen en losse woorden met karakter -> --display
             (condensed kapitalen). Alles onder ongeveer 20 px -> --body, vet en
             ruim gespatieerd. Condensed kapitalen worden klein onleesbaar.
   Kleur:    één donkerwaarde. Beige en accent wisselen per sectie.
   Vlakken:  plat. Geen randen, geen lijntjes, geen schaduwen. Alleen de
             ronding van 6 px op dingen die je aanraakt.
   ========================================================================== */

:root{
  /* ---- kleur ----
     --vlak is de achtergrond van de sectie waar je in zit. Nodig zodra je een
     verloop over de rand van een bewegende baan legt: dat moet van de eigen
     achtergrond naar niets lopen, niet van een vaste kleur. */
  --vlak:#2D2D2D;
  --anthracite:#2D2D2D;        /* de enige donkerwaarde */
  --anthracite-2:#383838;      /* vlak achter beeld dat laadt, en de kaarten */
  --beige:#F1ECE0;
  --beige-2:#F6F1E6;
  --dim:#9A9384;
  /* Het accent: turkoois, de achtergrond van het profielportret. Sinds
     15 september 2026, daarvoor mintgroen #A1F8BC (de podcastkleur, gekozen
     op 2 augustus in plaats van Pankra-oranje). #3FE0D2 is de waarde die Lucas
     ook op Substack en elders gebruikt. Ter controle gemeten uit het portret
     (3000 x 3000 px): mediaan van de achtergrond #44E1D9, randen van #3EDCD4
     tot #5DE4DB, dus #3FE0D2 valt binnen de foto. Antraciet op turkoois haalt
     8,4 om 1 (mint: 10,9). Nog steeds een lichte kleur, dus tekst op het
     accent is altijd antraciet. De klassenamen .duo-mint en .sec-mint zijn
     bewust niet hernoemd. */
  --accent:#3FE0D2;
  --hair:rgba(234,225,204,.14);
  --hair-2:rgba(234,225,204,.26);

  --head:var(--beige-2);       /* grote koppen  */
  --kick:var(--accent);        /* kleine kopjes */
  --txt:var(--beige);          /* lopende tekst */

  /* ---- typografische trap ----
     De ondergrenzen zijn bewust hoog: op een telefoon worden koppen anders
     keurig en dat is precies wat ze niet moeten zijn. Ze zijn ook opgemeten,
     niet gegokt: op 390 px is het inhoudsvak 350 px, en de ondergrens is zo
     gekozen dat het langste woord in de kop daar nog net past. Verander je de
     tekst van een kop, controleer die grens dan opnieuw. */
  --kop-1:clamp(54px,21.5vw,148px);  /* alleen de eerste kop van de pagina */
  --kop-2:clamp(40px,12.5vw,88px);   /* iedere sectiekop */
  --kop-3:clamp(34px,6vw,60px);      /* labels en namen */
  --kop-5:clamp(20px,2.5vw,30px);    /* de lichtkrant en de knoppen */
  --tekst-1:clamp(18px,2vw,24px);    /* introregel onder de eerste kop */
  --tekst-2:clamp(17px,1.9vw,22px);  /* introregels en omschrijvingen */
  --tekst-3:13px;                    /* alle labels in kapitalen */
  --voet:clamp(15px,1.7vw,18px);     /* alle kleine lettertjes onder een blok */

  /* ---- ruimte en vorm ---- */
  --maxw:1280px;
  --gutter:clamp(20px,5vw,74px);
  --sectie:clamp(64px,9vw,120px);    /* lucht boven en onder elke sectie */
  --na-kop:clamp(34px,5vw,58px);     /* onder een sectiekop */
  --rond:6px;                        /* alleen op dingen die je aanraakt */

  /* HNXBlkCn op verzoek van Lucas (2 augustus 2026) aangezet, geladen via
     assets/font/lettertype.css. Licentiecheck via Adobe staat nog open; zie
     docs/OPEN-BESLISSINGEN.md punt 11 voordat dit publiek gaat. */
  --display:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --body:"Helvetica Neue","Helvetica",Arial,sans-serif;

  /* Dunne pijl: een haarlijn met een open punt. Bewust subtiel, zodat hij de
     zware kapitalen niet beconcurreert. Als masker gebruiken, dan neemt hij de
     kleur van zijn omgeving over. */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 12'%3E%3Cpath d='M0 6h39M34.4 1.6 38.8 6l-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");

  /* ---- optische correcties ----
     Opgemeten in de browser. Een browser centreert een letter op zijn regelvak,
     niet op zijn eigen zwart; deze waarden zetten het zwart in het midden.
     Let op: ze zijn gemeten aan HNXBlkCn. Kies je een ander displaylettertype,
     dan moet je ze opnieuw meten. Hoe dat gaat staat in docs/ONTWERPSYSTEEM.md. */
  --optic-mq:0.142em;          /* condensed kapitalen in een vak van vaste hoogte */
  --optic-dash:-0.067em;       /* de em-streep ten opzichte van die kapitalen */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--anthracite);color:var(--beige);
  font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section[id]{scroll-margin-top:80px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
::selection{background:var(--accent);color:var(--anthracite)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- filmkorrel ----------
   Eén vaste laag over de hele pagina. Zet in de HTML als eerste element:
   <div class="grain" aria-hidden="true"></div>
   Bij scrollen mag hij iets sterker worden; zet dan class beweegt op <html>. */
.grain{position:fixed;inset:-6%;z-index:200;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;transition:opacity .55s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:150px 150px;animation:grain 7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-1.5%)}60%{transform:translate(-1.5%,1.5%)}
  80%{transform:translate(1.5%,-1%)}100%{transform:translate(0,0)}}
html.beweegt .grain{opacity:.13}

/* ---------- de menubalk ----------
   Vast bovenaan, plat. Zodra je scrolt komt er een doorschijnend vlak met blur
   achter, zoals op pankra.com. Vijf woorden, en het woord van de sectie waar
   je bent krijgt de mint-streep eronder. Onderlangs loopt de voortgangsstreep
   mee: menu en waar-ben-ik in een element. */
.balk{position:fixed;top:0;left:0;right:0;z-index:300;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(20px,6vw,32px);transition:background .3s}
.balk.vast{background:var(--accent)}
/* Het logo linksboven: de naam gestapeld op twee regels, met de streep voor
   REINDS. Op 19 px vullen de twee regels de balk van 56 px bijna, dus het
   logo staat bewust dicht op de boven- en onderrand. */
.bnaam{white-space:nowrap;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:22px;line-height:.85;color:var(--beige-2);
  display:flex;flex-direction:column;align-items:flex-start;transition:color .2s;
  /* Optisch centreren: de letterkast laat onder de basislijn lucht, waardoor
     het zwart te hoog hing. Gemeten op 22 px: 7 boven, 15 onder; 4 px omlaag
     (0,18 em) maakt het 11 om 11. */
  transform:translateY(.18em)}
.balk.vast .bnaam{color:var(--anthracite)}
.bmenu{display:flex;gap:clamp(10px,2.6vw,26px)}
.bmenu a{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(11px,1.3vw,13px);line-height:1;color:var(--dim);
  padding:10px 0 8px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
/* Over de herofoto is de hover mint, net als de actief-markering daar; op de
   mintbalk (vast of open) geldt verderop de antraciet-variant. */
.bmenu a:hover{color:var(--accent)}
.balk.vast .bmenu a{color:rgba(45,45,45,.55)}
.balk.vast .bmenu a:hover{color:var(--anthracite)}
/* De actieve sectie markeert zich alleen met kleur; het streepje eronder is
   op 4 augustus 2026 geschrapt, dat was eerder gedoe dan houvast. */
.balk.vast .bmenu a.actief{color:var(--anthracite)}
.bmenu a.actief{color:var(--accent)}

/* ---------- de streep ----------
   Liggende balk voor een kop. Pakt de lettergrootte van waar hij staat en
   schaalt dus mee. De verschuiving: vertical-align:middle zet hem op halve
   x-hoogte, hij moet op halve kapitaalhoogte; opgemeten verschil -.0865em. */
.dash{display:inline-block;width:1.05em;height:.155em;background:currentColor;
  vertical-align:middle;margin-right:.3em;transform:translateY(-.0865em)}
/* In het logo staat de streep voor REINDS, met een spatie ertussen: de .3em
   van de basisregel is die spatie. In lopende citaten plakt de streep wel. */
/* De streep bij een sectiekop volgt gewoon de kopkleur (currentColor),
   net als overal elders. De accent-uitzondering is op 4 augustus 2026
   verwijderd: hij was nog de enige afwijkende streep op de pagina. */
/* Op een telefoon staat de streep boven de sectiekop in plaats van ervoor:
   inline pakt hij 1,35 em van de eerste regel en dan past het eerste woord
   niet meer. */
@media(max-width:620px){
  .shead h2 .dash{display:block;margin:0 0 .3em;transform:none}
}

/* ---------- het sectiesysteem: de beige strook ----------
   Een sectie kan donker of beige zijn en brengt zijn eigen tekstkleuren mee.
   De achtergrond breekt uit de kolom; de inhoud blijft netjes op zijn plek.
   Op beige is het accent te licht voor tekst, dus de streep wordt daar
   antraciet. */
.sec-beige{background:var(--beige);color:var(--anthracite);
  --vlak:var(--beige);--head:var(--anthracite);--kick:var(--anthracite);
  --txt:#3C3A35;--dim:#6E6A61;
  width:100vw;margin-left:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
figure{margin:0}
.duo{width:100vw;margin-left:calc(50% - 50vw);padding-inline:clamp(20px,6vw,72px)}
.sectie.duo{padding-block:calc(var(--sectie) * .45)}
.dbeeld img{width:100%;height:clamp(340px,50vh,520px);object-fit:cover;margin-top:var(--na-kop)}
@media(min-width:760px){
  .duo{display:grid;grid-template-columns:1.1fr 1fr;column-gap:clamp(28px,5vw,72px);align-items:center}
  .dbeeld img{height:clamp(420px,60vh,640px);margin-top:0}
}
/* Een duo op het accent: een eigen laag in de pagina. De quote gaat hier van
   accentkleur naar antraciet, anders is hij op mint niet leesbaar. */
.duo-mint{background:var(--accent);--vlak:var(--accent);
  --head:var(--anthracite);--txt:var(--anthracite);--dim:rgba(45,45,45,.6)}
/* De naam bij de quote in beige: leesbaar op mint en toch een eigen laag
   naast de antracieten quotetekst. */
.duo-mint .quote .wie{color:var(--beige-2)}

.sec-beige .rij.ook{background:var(--anthracite);color:var(--beige)}
.sec-beige .rij.ook .naamrij{color:var(--beige-2)}
.sec-beige .rij.ook:hover,.sec-beige .rij.ook:focus-visible{background:var(--accent);color:var(--anthracite)}
.sec-beige .rij.ook:hover .naamrij,.sec-beige .rij.ook:focus-visible .naamrij{color:var(--anthracite)}
.sec-beige .rij:hover,.sec-beige .rij:focus-visible{background:var(--accent);color:var(--anthracite)}

/* Het compacte volgen-blok naast de studiofoto, in het ritme van een quote. */
.vlink{display:flex;align-items:center;gap:12px;padding-block:10px;
  font-family:var(--body);font-weight:600;font-size:var(--tekst-2);color:var(--txt);
  transition:color .2s}
.qrechts .vlink{justify-content:flex-end}
.vlink:hover{color:var(--accent)}
.vlink:hover .pijl{transform:translateX(5px)}

/* De volg-iconen als mintknoppen: vierkant met de ronding van aanraakbare
   dingen, het icoon in antraciet. */
.volgregel .footsocs{gap:10px;margin-top:6px}
.volgregel .footsoc{width:54px;height:54px;background:var(--accent);color:var(--anthracite);
  border-radius:var(--rond);opacity:1;transition:background .2s}
/* De optische inktvak-correctie van de open voeticonen geldt hier niet:
   deze tegels hebben een zichtbaar vlak, dus de doos is de maat. */
.volgregel .footsocs .footsoc:first-child{margin-left:0}
.volgregel .footsocs .footsoc:last-child{margin-right:0}
.volgregel .footsocs .footsoc + .footsoc{margin-left:0}
.volgregel .footsoc:hover{background:var(--beige-2);color:var(--anthracite)}
.volgregel .footsoc svg{width:26px;height:26px}
.qrechts .footsocs{justify-content:flex-end;display:inline-flex}

/* De mint-sectie: de finale. Alles antraciet op het accent, en de knop keert
   om zodat hij het donkerste element op de pagina is. */
.sec-mint{background:var(--accent);color:var(--anthracite);
  --vlak:var(--accent);--head:var(--anthracite);--kick:var(--anthracite);
  --txt:var(--anthracite);--dim:rgba(45,45,45,.6);
  width:100vw;margin-left:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.sec-mint .mregel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.mzin{display:flex;flex-direction:column;gap:14px;font-size:var(--tekst-1)}
.sec-mint .mzin input,.sec-mint .mzin select{background:var(--beige-2)}
.sec-mint .btn-primary{background:var(--anthracite);color:var(--accent)}
.sec-mint .btn-primary:hover{background:var(--beige-2);color:var(--anthracite)}
.sec-mint .mvoet{color:rgba(45,45,45,.75)}
.sec-mint .mvoet a{color:var(--anthracite);font-weight:700;text-decoration:underline}
.sec-mint .mok{color:var(--anthracite)}

/* ---------- sectie met sfeerbeeld ----------
   Een foto vaag over de volle breedte achter een donkere sectie. Lage dekking,
   harde randen: de sectiegrenzen snijden hem af, geen verloop. */
.sfeer{position:relative;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.sfeer::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("../img/lucas-reinds-skyline.jpg") center 38% / cover no-repeat;
  filter:grayscale(1);opacity:.11}

/* ---------- lichtkrant ----------
   Vaste hoogte, alles op het midden. Zet in de HTML twee identieke rijen in
   .track, dan loopt de lus naadloos rond op -50%.

   De em-streep zit in de letter hoger dan het midden van een kapitaal, dus die
   krijgt een eigen correctie bovenop die van de kapitalen. */
.marquee{background:var(--accent);color:var(--anthracite);overflow:hidden;
  height:clamp(46px,4.8vw,64px);display:flex;align-items:center}
.marquee .track{display:inline-flex;white-space:nowrap;align-items:center;
  /* 25s is de basisduur van de kernzin-baan bij lettergrootte 20 px. De andere
     duren staan onderaan bij elkaar, per baan en per schermmaat. */
  animation:scroll 25s linear infinite}
/* Alleen de directe kinderen van .track. Een bredere selector als
   ".marquee span" raakt ook de .mdash erin, en dan krijgt het streepje de
   correctie van de kapitalen er een tweede keer bovenop. */
.marquee .track>span{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.02em;font-size:var(--kop-5);line-height:1;display:inline-block;
  transform:translateY(var(--optic-mq))}
.marquee .mdash{transform:translateY(var(--optic-dash));
  /* Geen lucht om de em-streep. Dat is het stijldingetje: overal waar de streep
     in de huisstijl staat, plakt hij tegen de tekst aan. Zet je hier padding,
     dan worden het gewone spaties. */
  padding-inline:0}

/* Beginstand er expliciet bij. Zonder from-regel leidt de browser die af uit de
   huidige stand, en dat gaat mis zodra de laag opnieuw wordt opgebouwd. */
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* De beige variant van de lichtkrant: kapitalen in het tekstgrijs van de
   beige secties (#3C3A35), dus geen nieuwe kleur. Staat in de kolom en breekt
   zelf uit naar de volle breedte, zoals de gekleurde secties dat doen. */
.marquee-beige{background:var(--beige);color:#3C3A35;
  width:100vw;margin-left:calc(50% - 50vw)}
/* De tikker hoort bij de voettekst erboven: de aanbodsectie eindigt daarom op
   0,35 x --sectie in plaats van de volle maat. Het mintvlak erna krijgt juist
   meer lucht, boven en onder evenveel (0,7 x --sectie). */
#uitnodigen{padding-bottom:calc(var(--sectie) * .35)}
.sectie.duo-mint{padding-block:calc(var(--sectie) * .7)}

/* ---------- de kaart ----------
   Eén rij is een aanraakvlak van minstens 66 px over de volle breedte. Op een
   telefoon is dat de enige maat die telt. */
.rij{display:flex;align-items:center;gap:16px;min-height:66px;
  /* Boven de kop evenveel lucht als tussen de rand en de tekst links. Onder
     blijft het krapper; het kleinere onderschrift geeft daar optisch al ruimte. */
  padding:clamp(16px,4vw,20px) clamp(16px,4vw,20px) 14px;
  border-radius:var(--rond);background:var(--anthracite-2);color:var(--beige);
  transition:background .2s,color .2s}
.rij:hover,.rij:focus-visible{background:var(--beige-2);color:var(--anthracite)}
.rij .tekst{flex:1 1 auto;min-width:0}
.rij .naamrij{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.005em;line-height:.94;font-size:clamp(21px,5.6vw,26px)}
.rij .bij{display:block;margin-top:6px;font-family:var(--body);
  font-size:14px;line-height:1.35;opacity:.6;
  /* Afspraak: een onderschrift past op één regel. Past het niet, dan is de
     tekst te lang, niet de opmaak. */
  text-wrap:balance}

/* Hetzelfde pijltje als in de knoppen, maar als masker, zodat het de kleur van
   de kaart overneemt in plaats van zwart te blijven. */
.pijl{flex:0 0 auto;width:26px;height:8px;background:currentColor;
  -webkit-mask:var(--arrow) center / contain no-repeat;
  mask:var(--arrow) center / contain no-repeat;
  transition:transform .2s}
.rij:hover .pijl{transform:translateX(5px)}

/* ---------- het statusblokje ----------
   Het blokje achter een naam, dat als een live-melding leest. Zet --naam op de
   regel eromheen gelijk aan de lettergrootte van die naam.

   Twee dingen die hier misgingen:
   - margin-bottom werkt niet. Die maakt het blokje hoger dan de regel, waarna
     de tekst zelf meeschuift en je de helft van de correctie kwijt bent.
     position met top verplaatst alleen, zonder de rij te veranderen.
   - de padding is links iets groter dan rechts, want de spatiering van 0,16em
     zet nog een lege ruimte achter de laatste letter.

   0,728 is de kapitaalhoogte van HNXBlkCn en 0,235 is hoever de onderkant van
   het regelvak onder de basislijn ligt. Allebei opgemeten. Ander lettertype
   betekent opnieuw meten. */
.bug{display:inline-flex;align-items:center;justify-content:center;
  height:calc(var(--naam) * .728);
  position:relative;top:calc(var(--naam) * -.235);
  background:var(--accent);color:var(--anthracite);
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:10px;line-height:1;
  padding:0 6px 0 7px;border-radius:var(--rond)}
/* Het zwart van de tekst exact in het midden van het blokje.
   Tot 15 september 2026 stond hier translate(.3px,3px). Nagemeten op die dag
   (Chrome, dpr 2, blokje 30,57 px hoog): 15,14 px boven de letters en 8,13
   eronder, dus 3,5 px te laag. Een vaste pixelcorrectie verloopt zodra
   lettertype of weergave verandert. Daarom nu text-box-trim: het regelvak
   wordt precies de kapitaalhoogte tot de basislijn en flex centreert het zwart
   zelf. Gemeten: 11,71 boven, 11,56 onder (0,15 px is de overshoot van de U).
   Browsers zonder text-box krijgen de gemeten pixelwaarde: 11,64 om 11,63.
   De .3px horizontaal is ongewijzigd. */
.bug .bugtekst{display:inline-block;transform:translate(.3px,-.5px)}
@supports (text-box:trim-both cap alphabetic){
  .bug .bugtekst{text-box:trim-both cap alphabetic;transform:translateX(.3px)}
}

/* ---------- sociale icoontjes ----------
   Het aanraakvlak is 34 px en de tekening 19. De rechthoek in die tekening laat
   2,05 van de 24 eenheden leeg, dus het zwart zit 9,12 px binnen het vak.
   Zonder correctie springt het eerste icoon zichtbaar naar binnen ten opzichte
   van de tekst erboven. */
.footsocs{display:inline-flex;align-items:center;gap:6px}
.footsoc{width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;opacity:.72;transition:opacity .2s,color .2s}
.footsoc:hover{opacity:1;color:var(--accent)}
.footsoc svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footsoc svg .vol{fill:currentColor;stroke:none}
.footsocs .footsoc:first-child{margin-left:calc((34px - 19px) / -2 - 19px * 2.05 / 24)}
.footsocs .footsoc:last-child{margin-right:calc((34px - 19px) / -2 - 19px * 2.05 / 24)}

/* ---------- beweging ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee .track,.grain{animation:none}
  html.beweegt .grain{opacity:.07}
}

/* ---------- klein scherm ---------- */
@media(max-width:620px){
  /* Op deze breedte valt de icoonrij op een eigen regel, en dan valt op dat er
     al 7,5 px lucht aan elke kant van elke tekening zit. Samen met de 6 px
     ertussen staat er optisch 21 px. De aanraakvlakken blijven 34 px, want daar
     tik je op; alleen de ruimte ertussen gaat eruit, tot de tekeningen 10 px
     uit elkaar staan. */
  .footsocs{gap:0}
  .footsocs .footsoc + .footsoc{margin-left:-5px}
}

/* ==========================================================================
   PAGINA: lucasreinds.nl
   Alles hieronder is van deze ene pagina. Het gebruikt alleen de afspraken
   hierboven; nieuwe maten alleen met uitleg erbij.
   ========================================================================== */

/* De pagina is één kolom. Smaller dan --maxw, want er staan geen rasters op;
   46 tot 48 tekens lopende tekst is de leesmaat uit het systeem en 720 px
   houdt de kaarten op die maat. */
.kolom{width:100%;max-width:720px;margin:0 auto;padding-inline:clamp(20px,6vw,32px)}

/* ---------- de kop van de pagina ----------
   De naam in HNXBlkCn (condensed, kapitaal-advance ~0,5 em). De langste regel
   is nu streep + spatie + REINDS: 1,05 + 0,3 + 6 x 0,5 = 4,35 em. Op 390 px is
   het vak op een telefoon van 375 px breed 335 px. Met de gemeten kapitalen
   (~0,52 em) is de regel 4,47 em, dus de letter mag maximaal ~75 px zijn:
   19vw houdt op alle smalle schermen een paar pixels marge. Groter maken kan
   alleen als de streep weer van de langste regel af gaat. */
.top{--naam:clamp(50px,19vw,148px);
  padding-top:calc(56px + clamp(150px,34vw,300px));
  display:flex;flex-direction:column;align-items:flex-start}
.naam{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.005em;line-height:.82;font-size:var(--naam);color:var(--head);display:block}
.top .zin{margin:clamp(18px,3.5vw,26px) 0 0;
  font-size:var(--tekst-1);line-height:1.4;color:var(--txt)}
.top .zin strong{color:var(--beige-2)}

/* ---------- knoppen ----------
   Twee varianten, niet meer. Onderkast, gewicht 500; de rust komt van de lucht
   in de knop, niet van kapitalen. */
.btn{display:inline-flex;align-items:center;gap:.7em;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;font-family:var(--body);
  height:clamp(51px,4.4vw,61px);padding-inline:clamp(22px,2.4vw,31px);
  border-radius:var(--rond);font-family:var(--body);font-weight:500;
  font-size:clamp(16px,1.7vw,19px);letter-spacing:-.005em;line-height:1;
  transition:background .2s,color .2s}
.btn .pijl{width:26px;height:8px;background:currentColor;
  -webkit-mask:var(--arrow) center / contain no-repeat;
  mask:var(--arrow) center / contain no-repeat;transition:transform .2s}
.btn:hover .pijl{transform:translateX(5px)}
.btn-primary{background:var(--accent);color:var(--anthracite)}
.btn-primary:hover{background:var(--beige-2)}
.top .btn{margin-top:clamp(26px,5vw,38px)}

/* ---------- sectiekop, het ene model ----------
   Geen klein kopje boven de kop meer (weggehaald op 4 augustus 2026): de kop
   begint direct op de sectiemaat, dus zonder eigen bovenmarge. */
.sectie{padding-block:var(--sectie)}
.shead h2{margin:0;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.005em;line-height:.9;
  font-size:var(--kop-2);color:var(--head);max-width:21ch}
.shead .intro{margin:18px 0 0;max-width:48ch;font-size:var(--tekst-2);
  line-height:1.5;color:var(--txt)}
.shead{margin-bottom:var(--na-kop)}

/* ---------- het aanbod ----------
   Drie vlakken. Ze zijn niet klikbaar en krijgen daarom geen ronding en geen
   hover: een statuskaart mag niet als knop ogen. De knop eronder is de enige
   uitgang. */
.aanbod{display:flex;flex-direction:column;gap:9px}
.vorm{background:var(--anthracite-2);padding:clamp(22px,5vw,42px) clamp(18px,4.5vw,38px)}
.vorm{--wat:clamp(24px,6vw,34px)}
.koprij{display:flex;align-items:flex-start;gap:14px}
/* Het vierkantje is exact zo hoog als het zwart van de titel: kapitaalhoogte
   is 0,728 van de lettergrootte (opgemeten aan HNXBlkCn). De titelkapitaal
   begint praktisch op de bovenkant van zijn regelvak, dus met beide bovenkanten
   gelijk staan ook de onderkanten op de basislijn. */
.vorm .num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:calc(var(--wat) * .728);height:calc(var(--wat) * .728);
  background:var(--accent);color:var(--anthracite-2);
  border-radius:calc(var(--rond) * .7);font-family:var(--body);font-weight:700;
  font-size:calc(var(--wat) * .42);
  /* De kapitaal steekt bij regelafstand .94 iets boven het regelvak uit:
     (0,728 + 0,235) - 0,94 = 0,023 em. Het blokje schuift precies mee. */
  margin-top:calc(var(--wat) * -.023)}
.vorm .wat{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.005em;line-height:.94;font-size:var(--wat);color:var(--beige-2);margin:0}
.vorm .hoe{margin:12px 0 0;font-size:var(--tekst-2);line-height:1.5;color:var(--txt);opacity:.85;max-width:60ch}
.themas .tlabel{color:var(--dim);margin-right:6px}
.themas{margin:var(--na-kop) 0 0;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--accent)}
.vorm .vkies{margin-top:18px}
/* margin-bottom 0: de standaardondermarge van een alinea (1 em) kwam bovenop
   de sectiepadding en maakte de overgang naar het mintvlak 18 px groter dan
   iedere andere sectieovergang. Nagemeten op 4 augustus 2026. */
.aanbod-voet{margin-top:clamp(20px,3vw,30px);margin-bottom:0;font-size:var(--voet);line-height:1.55;color:var(--dim);max-width:none}
.aanbod-cta{margin-top:var(--na-kop)}
/* De drie vlakken komen na elkaar binnen, niet tegelijk. */
.aanbod .vorm.reveal:nth-child(2){transition-delay:.12s}
.aanbod .vorm.reveal:nth-child(3){transition-delay:.24s}

/* ---------- de voortgangsstreep ----------
   Geen laadbalk maar het eigen element: 4 px accent over de volle breedte, dat
   meegroeit met hoever je bent. Het script zet --p tussen 0 en 1. */

/* ---------- het label rolt weg ----------
   De signatuur-interactie: bij hover rolt de knoptekst omhoog uit beeld en
   komt een kopie van onderen terug. */
.ls{display:inline-block;position:relative;overflow:hidden;vertical-align:top;line-height:1.2}
.ls>span{display:block;transition:transform .42s cubic-bezier(.65,0,.2,1)}
.ls>span.dup{position:absolute;left:0;top:0;transform:translateY(115%)}
.btn:hover .ls>span.org{transform:translateY(-115%)}
.btn:hover .ls>span.dup{transform:translateY(0)}

/* De lichtkrant op ~35 px per seconde. Een baan legt zijn halve breedte af, en
   die breedte schaalt mee met --kop-5, clamp(20px,2.5vw,30px).
   Nagemeten 28 augustus 2026 bij lettergrootte 20 px: de kernzin-baan is
   1775 px breed, de themabaan 2559 px. Eén duur voor allebei kon dus nooit
   kloppen; dat gaf 49 px/s voor de thema's op 320 px en 23 px/s voor de
   kernzin op 1280 px, terwijl de norm 35 is. Daarom per baan een eigen duur.
   De knikpunten liggen op 800 en 1200 px, want daar knikt de clamp van
   --kop-5 zelf: onder 800 is de letter 20 px, boven 1200 is hij 30 px.
   Gemeten na de wijziging: 35 en 35 px/s op 320 px, 35 en 35 op 1280 px. */
.marquee-beige .track{animation-duration:37s}
@media(min-width:800px){
  .marquee .track{animation-duration:32s}
  .marquee-beige .track{animation-duration:46s}
}
@media(min-width:1200px){
  .marquee .track{animation-duration:38s}
  .marquee-beige .track{animation-duration:55s}
}
@media(prefers-reduced-motion:reduce){
  .ls>span{transition:none}
  .aanbod .vorm.reveal{transition-delay:0s}
}

/* ---------- beeld over de volle breedte ----------
   De foto breekt uit de kolom en pakt het hele scherm; de sluier loopt van
   boven licht naar onder donker zodat het label leesbaar blijft, zoals de
   hero op pankra.com. Geen ronding: beeld raak je niet aan. */
.band{position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  background:var(--anthracite-2)}
/* 100vw telt de schuifbalk mee; zonder deze regel steekt de band rechts uit. */
body{overflow-x:clip}
.band img{width:100%;height:clamp(460px,80vh,860px);object-fit:cover}
.band.smal img{height:clamp(340px,52vh,560px)}
.band .label{position:absolute;left:0;right:0;bottom:clamp(18px,3.5vw,32px);z-index:1;
  padding-inline:clamp(20px,6vw,32px);max-width:720px;margin:0 auto;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--beige-2)}

.quote{margin:var(--na-kop) 0 0;padding:clamp(22px,4vw,30px) 0 0;
  }
.quote p{margin:0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.005em;line-height:.96;font-size:calc(var(--kop-3) * .8);color:var(--head)}
.quote .wie{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:1;font-size:calc(var(--kop-3) * .8);color:var(--accent);margin:10px 0 4px}
.quote .qdash{margin-right:0}
/* In een duo staat de quote rechts van het beeld en lijnt hij rechts uit. */
.qrechts{text-align:right}
@media(min-width:1040px){.kolom .quote{margin-left:-11%}.duo .quote{margin-left:0}}
.quote .rol{display:block;font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--dim)}
.quote figcaption{margin-top:0;font-family:var(--body);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--dim)}

/* ---------- agenda- en penkaarten: oranje variant van de kaart ---------- */
.rijen{display:flex;flex-direction:column;gap:9px}
.rij.ook{background:var(--accent);color:var(--anthracite)}
.rij.ook:hover{background:var(--beige-2)}
.rij.ook .bij{opacity:.72}
.rij.ook .naamrij{color:var(--anthracite);transition:color .2s}
.rij.ook:hover .naamrij,.rij.ook:focus-visible .naamrij{color:var(--anthracite)}

/* ---------- het slot: volgen en de voet als een geheel ----------
   De studiofoto vaag over de volle breedte erachter; VOLGEN met de twee
   minttegels op een regel, de voet er direct onder. */
.slot{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);
  /* Dezelfde rand-naar-inhoud als iedere sectie: 1 x --sectie, nagemeten. */
  padding-top:var(--sectie)}
.slot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("../img/lucas-reinds-studio.jpg") 15% 58% / cover no-repeat;opacity:.16}
.volgregel{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.slot .voet{margin-top:0;padding-top:clamp(12px,2vw,18px)}

/* ---------- de voet ---------- */
.voet{margin-top:0;padding-block:clamp(30px,7vw,44px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,18px)}
.voet .colofon{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;line-height:10px;color:var(--dim)}

/* ---------- de hero met de vage foto ----------
   De kop van de pagina met Lucas er vaag achter: laag contrast, en onderaan
   loopt hij over in de achtergrond zodat de pagina er niet op stuit. */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* Het portret op turkoois, sinds 15 september 2026 (daarvoor klimop-2).
     Door Lucas op dezelfde maat gemaakt als klimop-2, 1200 x 1203. Nagemeten:
     kruin op 13,5% van de hoogte (klimop-2: 13%), hoofdmidden op 48,9% van de
     breedte, dus positie 50% 20% en de uitsnede blijven kloppen. */
  background:url("../img/lucas-reinds-header.jpg") 50% 20% / cover no-repeat;opacity:.22}
/* Onder de knop dezelfde maat als een duo-rand (0,45 x --sectie), zodat de
   pagina maar twee overgangsmaten kent. */
.hero .top{position:relative;padding-bottom:calc(var(--sectie) * .45)}
/* De hero breekt uit de kolom: de naam begint op dezelfde linkermaat als het
   logo in de balk, en het blok krimpt tot de breedte van de naam zodat de
   knop rechts kan uitlijnen op de rand van REINDS. */
.hero .kolom{max-width:none;margin-inline:0}
.hero .top{width:fit-content}
/* De zin en de knop springen in tot de R van REINDS: streep (1,05 em) plus
   spatie (0,3 em) is 1,35 x de letterhoogte. */
.hero .top .zin,.hero .top .btn{margin-left:calc(var(--naam) * 1.35)}
@media(min-width:621px){.top .zin{white-space:nowrap}}

/* ---------- het invulformulier ----------
   De uitnodiging als invulzin: het formulier is zelf de demonstratie. De
   invulvakken zijn open plekken in de zin, met alleen een haarlijn eronder. */
.mform{margin-top:clamp(24px,4vw,34px)}
.mregel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.mzin{display:flex;flex-direction:column;gap:14px;font-size:var(--tekst-1)}
.mzin input,.mzin select{background:#FDFCF6;color:var(--anthracite);border:0;
  border-radius:var(--rond);height:46px;padding:0 16px;font-family:var(--body);
  font-size:15px;font-weight:600;text-align:center;text-align-last:center;
  flex:1 1 150px;min-width:0;max-width:100%}
.mzin input::placeholder{color:#9a9384;opacity:1;text-transform:uppercase;
  letter-spacing:.09em;font-size:11px;font-weight:700}
.mzin input:focus-visible,.mzin select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mzin input::placeholder{color:#9a9384;opacity:1;text-transform:uppercase;
  letter-spacing:.09em;font-size:11px;font-weight:700}
.mzin input:focus,.mzin select:focus{outline:none;border-bottom-color:var(--accent)}
.mzin select{appearance:none;-webkit-appearance:none;cursor:pointer}
.hp{position:absolute;left:-9999px}
.mvoet{margin:14px 0 0;font-size:var(--voet);color:var(--dim)}
.mvoet a{color:var(--beige);border-bottom:1px solid var(--hair-2)}
.mvoet a:hover{color:var(--accent)}
.mok{margin:0;font-size:var(--tekst-1);color:var(--beige-2)}


.mform .btn{margin-top:clamp(26px,4vw,40px)}


/* ---------- de hamburger en het uitklapmenu ----------
   Drie streepjes met de dikte van de streep, kruis zodra het menu open staat.
   Het paneel is een hard mintvlak onder de balk, links onder elkaar met
   haarlijnen ertussen, zoals het systeem voorschrijft. */
.hamb{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 4px 0 14px;background:none;border:0;cursor:pointer}
.hamb span{display:block;height:3px;width:26px;background:var(--beige-2);
  transition:transform .25s,opacity .2s}
.balk.vast .hamb span,.balk.open .hamb span{background:var(--anthracite)}
.balk.open .hamb span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.balk.open .hamb span:nth-child(2){opacity:0}
.balk.open .hamb span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:880px){
  .hamb{display:flex}
  .bmenu{display:none}
  .balk.open{background:var(--accent)}
  .balk.open .bnaam{color:var(--anthracite)}
  .balk.open .bmenu{display:flex;flex-direction:column;position:absolute;
    top:56px;left:0;right:0;background:var(--accent);
    padding:6px clamp(20px,6vw,32px) 18px;gap:0}
  .balk.open .bmenu a{color:var(--anthracite);font-size:13px;padding:16px 0;
    border-bottom:1px solid rgba(45,45,45,.18)}
  .balk.open .bmenu a.actief{border-bottom:1px solid rgba(45,45,45,.18);color:var(--anthracite)}
}