/* Pagina-eigen stijl van de voorpagina. Letterlijk overgenomen uit het
   <style>-blok van design/index.html; het gedeelde systeem staat in
   hcf.css. Niets aan veranderd. */
  /* ---------- VOORPAGINA · hero + blog/feed ----------
     De hero (#hero, full-bleed slideshow) staat in hcf.css — dat is een
     op zichzelf staand blok. Hieronder alleen wat bij deze pagina hoort:
     de feed-kolom, de posts en de strobe-leesbaarheid. */
  .wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 18px; }

  /* Kaderkleur van de posts. Kantelt met het thema mee, net als de
     hairline-tokens in hcf.css; alleen sterker, zie .post figure hieronder. */
  :root{ --frame:#6f6a5f; }
  body.theme-light{ --frame:#7d796e; }

  /* Hier stond een <hr class="rule"> als hairline tussen hero en feed. Weg per
     21-08: hij lag op 0px van de sectiegrens en las daardoor als naad in plaats
     van als scheiding — twee keer als bug gemeld. De reden dat hij er stond is
     bovendien vervallen: met een full-bleed video-hero is de overgang al
     duidelijk. Niet terugzetten zonder afstand tot de grens. */

  .feedhead{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; margin:34px auto 14px; padding:0 2px;
  }
  /* mono was het enige register op deze pagina — de kop las daardoor als
     systeemlabel in plaats van als getypte tekst. Times zit op elk systeem,
     dus geen extra webfont-request. Recht, geen italic. */
  .feedhead .t{
    font-family:'Times New Roman', Times, serif;
    font-weight:400; font-size:19px; letter-spacing:0; color:var(--bone);
  }
  /* de datum blijft mono (functioneel), maar zonder het brede label-spatiëren */
  .feedhead .label{ letter-spacing:.06em; text-transform:none; color:var(--dim); }

  /* feed */
  .feed{ padding:6px 0 60px; }
  article.post{ margin:0 auto 54px; }
  /* permanent kader om het beeld. Bewust NIET var(--ink): dat ís de
     canvaskleur, dus een --ink-ring is per definitie onzichtbaar — die deed
     alleen werk terwijl de strobe erachter flitste, vandaar dat hij in
     body.strobing zat. outline i.p.v. border: outline staat buiten het
     boxmodel en kan de layout niet verschuiven.

     Eigen kleur, niet --line-2 (21-08). Gemeten aan de getekende pixels liep
     het van buiten naar binnen 24 → 68 → 35: --line-2 (#444039) is een
     haarlijn tussen twee vlakken die tegen elkaar aan liggen en hoeft daar
     nauwelijks te contrasteren, maar hier moet hij een fotorand markeren
     tegen bijna-zwart — mét de gloed hieronder die het canvas ernaast al
     oplicht naar ~#181818. Eén pixel op 25% grijs tussen die twee tonen wordt
     wél getekend maar is op ware grootte niet te zien; drie keer als "kader
     ontbreekt" gemeld. --frame zet die stap terug. Los token, want --line-2
     doet elders (teller, gate-paneel, shopkaarten) precies wat het moet doen. */
  .post figure{ margin:0; outline:1px solid var(--frame);
    box-shadow:0 0 26px var(--glow); }

  /* Het kader om beeld EN caption samen (21-08). Wat als "het kader" gezien
     werd, was de 8px --ink-band die alleen bij body.strobing bestond: die
     bakent beeld en caption samen af als één kaart. Permanent maken kán niet
     door 'm uit body.strobing te halen — --ink IS het canvas, dus buiten de
     flits is die band per definitie onzichtbaar. Gemeten met strobe uit loopt
     het van canvas (#131313) via de gloed (#1b1b1b) naar één pixel --frame en
     dan het beeld; die pixel zit tégen de foto aan en de caption heeft niets.
     Vandaar de lijn hier: zelfde silhouet als de band, 8px buitenom, om de
     hele post. Getest tegen een zwarte mat van 8px (dichter bij het origineel)
     — die valt af: in het lichte thema komt de donkere captiontekst dan op
     zwart te staan en is niet meer te lezen.
     outline en niet border: staat buiten het boxmodel, kan dus niets
     verschuiven. Het spam-blok blijft er nadrukkelijk buiten (zie verderop). */
  article.post:not(.post--spam){
    outline:1px solid var(--frame); outline-offset:8px;
  }
  .post img{ display:block; width:100%; height:auto; }
  .post--graphic img{ background:#000; }

  /* paper / scanned sticker post */
  .paper{
    background:var(--paper);
    padding:30px;
    display:flex; align-items:center; justify-content:center;
  }
  .paper img{ width:min(62%, 320px); }

  /* ---------- aanmeldblok in de feed (HC.F spam) ----------
     Zie SpamPost.tsx. Bewust GEEN paneel: dit is dezelfde behandeling als het
     formulier op de under construction-pagina — op het canvas, mono, kale
     velden met een dunne rand, en alleen de knop gevuld. De eerdere versie was
     een licht vel met kader en Times-koppen; die lag als kaart op de pagina en
     las als banner die ertussen geplakt is.

     De tokens hebben hier hcf-betekenis: --ink is het canvas en --white de
     voorgrond, dus het blok kantelt mee met de thema-schakelaar. Op de under
     construction-pagina staat --ink juist voor de voorgrond; dat is dezelfde
     vormgeving, andere namen. */
  /* De kop maakt er een merkmoment van in plaats van nóg een formulier: het
     merkfont, niet het paginafont. De nav staat in datzelfde font, dus het
     onderscheid moet van de MAAT komen — 17px daar, 34px hier, ruim het
     dubbele. Ook groter dan de .feedhead (19px Times), zodat de onderbreking
     zwaarder weegt dan een rubriekkopje.

     letter-spacing:0 met opzet: Old English valt uit elkaar zodra je
     kapitalen uit elkaar trekt — de aanhechtingen van de gebroken schrift
     lopen dan los. Dat was eerder al de reden dat de terug-link '← terug'
     werd en niet '← TERUG'.

     font-weight:400 omdat de familie maar één snit heeft. Chromium negeert
     een zwaarder gewicht, WebKit vervalst het (synthetic bold) en zet dan een
     tweede contour naast elke letter — dezelfde valstrik als bij het
     wordmark. */
  .spam__kop{
    font-family:var(--gothic); font-weight:400;
    font-size:34px; line-height:1.05; letter-spacing:0;
    color:var(--white); margin:0 0 12px;
  }

  .spam__cta{
    font-family:var(--mono); font-size:13px; line-height:1.6;
    letter-spacing:.02em; color:var(--bone); margin:0 0 14px;
  }
  /* Volle kolombreedte, zonder max-width: op 26rem stond het blok links
     uitgelijnd binnen een kolom van 724px en las het als nóg een post met een
     caption eronder. Nu loopt het net zo breed als het beeld erboven, en is
     de onderbreking te zien vóórdat je de tekst leest. */
  .spam-form{ margin:0; width:100%; }
  .spam-form__veld{ margin-bottom:8px; }
  .spam-form__rij{
    display:flex;
    border:1px solid var(--white);
    background:var(--ink);
  }
  .spam-form__rij:focus-within{ box-shadow:0 0 0 1px var(--white); }
  /* fout veld: rode rand in de rauwe stijl, geen browser-popup */
  .spam-form__rij:has(input[aria-invalid='true']){ border-color:var(--blood); }
  .spam-form__input{
    flex:1 1 auto; min-width:0; appearance:none;
    background:transparent; border:0; color:var(--white);
    font-family:var(--mono); font-size:14px; padding:12px 14px;
  }
  .spam-form__input::placeholder{ color:var(--dim); }
  .spam-form__input:focus{ outline:none; }
  .spam-form__knop{
    flex:0 0 auto; appearance:none; border:0;
    border-left:1px solid var(--white);
    background:var(--white); color:var(--ink);
    font-family:var(--mono); text-transform:uppercase; letter-spacing:.15em;
    font-size:11px; font-weight:700; padding:0 18px; cursor:pointer;
    transition:background .08s linear, color .08s linear;
  }
  .spam-form__knop:hover:not(:disabled){ background:var(--blood); color:#fff; }
  .spam-form__input:disabled, .spam-form__knop:disabled{ opacity:.5; cursor:default; }
  .spam-form__fout{
    margin:6px 0 0; font-family:var(--mono); font-size:11px;
    letter-spacing:.02em; color:var(--blood-tekst);
  }
  /* Regel onder het aanmeldformulier: kleiner en gedimd, want het is
     furniture — de link moet vindbaar zijn, niet luid. */
  .spam-form__privacy{
    margin:12px 0 0; font-family:var(--mono); font-size:11px;
    letter-spacing:.04em; line-height:1.6; color:var(--dim);
  }
  .spam-form__privacy a{ color:var(--bone); text-underline-offset:3px; }
  .spam-form__melding{
    margin:14px 0 0; font-family:var(--mono); font-size:12px;
    letter-spacing:.02em; color:var(--white);
  }
  .spam-form__melding--fout{ color:var(--blood-tekst); }

  .cap{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:14px; margin-top:11px; padding:0 1px;
  }
  .cap .when{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; }
  /* Mono sinds 25-08 (wens Arie). Dat draait de eerdere keuze terug: de
     omschrijving stond in Times omdat het getypte tekst is en geen label, naast
     de mono datum die wél een functioneel getal is.

     Het onderscheid met dat getal blijft wél overeind, en dat is de reden dat
     het hier bij mono niet ophoudt: GEEN uppercase en GEEN wijde tracking. De
     datum heeft .18em en hoofdletters en leest daardoor als systeemlabel; deze
     regel houdt letter-spacing op 0 en de zin als zin. Zelfde familie, ander
     register.

     14px en niet 16: mono heeft een grotere x-hoogte en bredere letters, dus op
     gelijke px oogt het fors groter dan de Times die het vervangt. */
  .cap .what{
    font-family:var(--mono);
    font-size:14px; letter-spacing:0; text-transform:none; color:var(--white);
  }

  /* wide breakout posts */
  .post--wide{ max-width:1040px; }

  /* footer / web1 furniture */
  footer.foot{
    border-top:1px solid var(--line);
    padding:30px 0 60px;
    text-align:center;
  }
  .counter{
    display:inline-flex; gap:3px; padding:6px 8px;
    background:#000; border:1px solid var(--line-2);
    margin-bottom:14px;
  }
  .counter b{
    font-family:var(--mono); font-weight:700; font-size:14px;
    color:#7fe07f; background:#06120a;
    padding:3px 5px; letter-spacing:.1em;
    text-shadow:0 0 6px rgba(120,255,120,.4);
  }
  .foot .tlink{ margin:0 8px; }
  /* het colofon staat in hcf.css: /thuis en /shop delen die regel. */

  @media (max-width:640px){
    .post--wide{ max-width:760px; }
    article.post{ margin-bottom:40px; }
    .cap{ flex-direction:column; gap:3px; }
    /* de kop schaalt mee: op 360px liep 34px over twee regels */
    .spam__kop{ font-size:27px; }
  }

  /* laser show — vaste achtergrondlaag achter alle content.
     alleen in het zwarte thema (groene laser hoort niet op wit canvas).
     LET OP: dit canvas is position:fixed over de hele viewport, dus sinds de
     samenvoeging ligt het ook achter de hero — daar is het onzichtbaar omdat
     de slideshow er full-bleed overheen ligt. Waar de laser hoort te leven
     (alleen achter de feed? ook over de hero?) beslissen we als hij weer
     aangaat. */
  #laser{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:-2; display:block; pointer-events:none;
    /* TIJDELIJK var(--ink) zolang de laser uit staat: het groen hoorde bij de
       groene laser (fosforstraal op groenige backdrop) en is zonder die stralen
       een restje zonder functie. Terugzetten op #020603 zodra laser.js weer
       geladen wordt (zie onderaan deze pagina). */
    background:var(--ink);   /* was: #020603 */
  }
  body.theme-light #laser{ display:none; }

  /* ========= STROBOSCOOP — blog-specifieke leesbaarheid =========
     De kern-strobe (flitslaag, toggle-knop, reduced-motion) staat in
     hcf.css en wordt door hcf.js op elke pagina geïnjecteerd. Hier
     alleen de zwarte kaders zodat de posts leesbaar blijven terwijl
     de achtergrond flikkert. */
  /* de leesbaarheidsband is box-shadow i.p.v. outline, zodat hij naast het
     permanente 1px-kader kan bestaan: outline wordt bovenop de box-shadow
     getekend, dus de rand blijft zichtbaar in de --ink-band eromheen.
     De gloed staat hier IN dezelfde declaratie, achter de band. Dat moet:
     box-shadow vervangt zichzelf, dus een losse regel hier zou de gloed uit
     .post figure hierboven weggooien. Band eerst, want de eerste schaduw
     wordt bovenop getekend — de dekkende --ink-ring hoort over de gloed heen
     te liggen en de gloed loopt er vanaf 8px buitenom verder uit. */
  body.strobing .post figure{
    box-shadow:0 0 0 8px var(--ink), 0 0 26px var(--glow);
    background:var(--ink);
  }
  /* Het aanmeldblok krijgt NADRUKKELIJK GEEN band, in tegenstelling tot de
     posts eromheen. Die band bestaat om een BEELD leesbaar te houden door een
     flits heen; een formulier heeft dat niet nodig — de velden dragen hun
     eigen rand en de tekst staat op het canvas. Het blok is als .post
     gebouwd en zou de bescherming anders stilzwijgend meeërven.
     De leesbaarheid tijdens de flits komt hier van de halo's op de tekst
     zelf, hieronder. */
  /* Zonder band moet de tekst het zelf doen, en dat is hier zwaarder werk dan
     bij de kop 'Winkel': .wrap staat op z-index 2 en de flitslaag op 1, dus
     alles zonder eigen achtergrond laat de flits er dwars doorheen schijnen.
     Gemeten in het zwarte thema op de witte flits (contrastratio):

                        geen flits    flits, kaal    +halo    +dubbele halo
       kop                   17.12           2.38     2.83             3.36
       lopende tekst          9.47           1.53     2.56             4.15

     Vandaar de halo TWEE KEER: enkel bleef de kop onder AA-groot (3.0) en
     verdween de mono-regel zo goed als. Old English heeft bovendien haarfijne
     verbindingen die als eerste wegvallen, en 13px mono heeft te weinig
     inktoppervlak om een enkele gloed te dragen.

     De VELDEN krijgen niets: .spam-form__rij heeft een eigen dekkende
     --ink-achtergrond en houdt de flits daarmee zelf tegen. Gemeten blijft het
     veldlabel op 3.41, met of zonder flits, met of zonder halo.

     BEIDE THEMA'S. Stond hier eerst op :not(.theme-light), omdat --halo in het
     lichte thema een donkere gloed om donkere letters gaf. Dat was de
     themabug, niet de bedoeling: --halo stond op :root en loste var(--ink)
     daarom altijd naar donker op. Sinds die declaratie op body staat (zie
     hcf.css) kantelt hij mee en kan de uitzondering hier weg. */
  body.strobing .spam__kop,
  body.strobing .spam__cta{ text-shadow:var(--halo), var(--halo); }
  /* de caption hoort bij het beeld erboven, dus dezelfde 8px als de outline
     van .post figure — anders steekt de band onder de post 2px per kant uit. */
  body.strobing .cap{ background:var(--ink); box-shadow:0 0 0 8px var(--ink); }
  /* deze staan los van de content en houden hun eigen, ruimere band.
     Halo's altijd via box-shadow, nooit via padding — padding zit in het
     boxmodel en laat de pagina verspringen zodra de strobe aangaat. */
  body.strobing .feedhead, body.strobing footer.foot{
    background:var(--ink); box-shadow:0 0 0 10px var(--ink);
  }

  /* de hero heeft geen zwart kader nodig: het logo ligt daar op z-index 5,
     boven de flitslaag, en de scrim tempert de flits over het beeld. */

  /* ---------- geanimeerd wordmark in de hero ----------
     Het hero-wordmark is een video. De <h1> blijft in de markup staan — dat is
     de naam en de enige kop op deze pagina — maar wordt hier visueel verborgen.

     WAAROM VIDEO EN GEEN GEANIMEERDE WEBP. Die route is uitputtend onderzocht
     en liep vast op twee dingen; zie docs/TODO.md. Doorslaggevend was de
     decodeerlast: WebP codeert elk frame vrijwel als losse afbeelding zonder
     bewegingsvoorspelling, en 250 frames van 512x576 haperen zwaar op een
     telefoonprocessor. Video gaat naar de hardwaredecoder en loopt daar vloeiend.

     MAATVOERING. De bron is 1920x1080 met veel transparante ruimte eromheen.
     De bounding box van het niet-transparante deel is in de RUSTSTAND gemeten
     (de clip loopt naadloos; t=0,2s en t=10,3s zijn hetzelfde beeld):

         x 676 -> 1306  =  630px breed
         y 181 ->  939  =  758px hoog

     De negatieve marges hieronder zijn exact die transparante randen, waardoor
     de layoutbox samenvalt met het zichtbare mark en de bestaande flexbox in
     #hero .center hem net zo centreert als de tekst deed — inclusief de gap
     naar de tagline.

     De breedte is afgeleid van de tekstversie die hier ooit stond: font-size
     min(139px, 24vw) gaf 354px zichtbare letters. 354 x 1920/630 = 1079px, en
     op smalle schermen 61,1 x 1920/630 = 186vw.

     De derde term, 132vh, is er voor lage schermen. Het mark is smal en HOOG
     waar de tekst breed en laag was: bij dezelfde breedte ruim vier keer zo
     hoog. Op een telefoon in landscape liep het daardoor 79px boven en 36px
     onder het beeld uit — #hero heeft overflow:hidden, dus dat werd er
     stilletjes afgesneden. De zichtbare markhoogte is breedte x 0,468164; om
     die op maximaal 62% van de hoogte te houden: breedte <= 132vh.

     Wil je het mark kleiner: draai alleen aan --hero-anim-w. */
  #hero .center{
    /* Het doek is nu 512x576 (de krappe crop om het mark) in plaats van
       1920x1080 met lucht eromheen. Het zichtbare mark besloeg daar 0,328125
       van de elementbreedte en hier 0,880859 — alle drie de termen zijn dus
       met dezelfde factor 0,372495 meegeschaald, zodat het mark exact even
       groot op het scherm staat als eerst. De 132vh-term (die de afsnijding
       in landscape oploste) blijft daarmee gewoon werken, nu als 49,17vh. */
    --hero-anim-w:min(402px, 69.28vw, 49.17vh);  /* terugval zonder svh */
    /* svh en niet vh, om dezelfde reden als bij #hero zelf: vh volgt de
       viewport die meegroeit als de adresbalk bij het scrollen verdwijnt, en
       dan verspringt het mark midden in de beweging. svh blijft op de kleine
       viewport staan.

       LET OP welke term er bindt. In portret op een telefoon wint de
       vw-term ruim: op 390 breed is 69,28vw = 270px tegen 49,17vh = 369px bij
       844 hoog. Daar verandert deze regel dus niets. Gemeten wordt het mark in
       portret 270,2px breed, of de viewport nu 750 of 844 hoog is.
       In LANDSCHAP bindt de vh-term wel, en daar sloeg het hard door: op 844
       breed ging het mark van 162,3px bij 330 hoog naar 191,8px bij 390 hoog,
       een sprong van 18%. Dat is wat deze regel oplost. */
    --hero-anim-w:min(402px, 69.28vw, 49.17svh);
  }

  #hero .center .logo{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  #hero .center .hero-anim,
  #hero .center > .hero-anim-static{
    display:block;
    width:var(--hero-anim-w);
    height:auto;
    /* Expliciet, zodat het element ook afmetingen heeft voordat het canvas
       getekend is of de poster binnen is — anders valt het terug op 300x150
       en verspringt de hele hero. Doek is 512x576. */
    aspect-ratio:512 / 576;
    /* De transparante randen wegsnijden. Fracties van de ELEMENTBREEDTE, ook
       voor boven en onder — zelfde afspraak als in de vorige versie.
       Inkt in ruststand op x 57-508, y 19-563 van 512x576:
         links  57/512  = 0,111328
         rechts  4/512  = 0,007813
         boven  19/512  = 0,037109
         onder  13/512  = 0,025391
       Meet je het na met bbox=min_val=1 dan krijg je 55/1/16 — dat is de
       meetdrempel, niet het beeld; bij min_val 4 tot 32 komt dit eruit. */
    margin-left:calc(var(--hero-anim-w) * -0.111328);
    margin-right:calc(var(--hero-anim-w) * -0.007813);
    margin-top:calc(var(--hero-anim-w) * -0.037109);
    margin-bottom:calc(var(--hero-anim-w) * -0.025391);
    /* Dezelfde slagschaduw als het tekst-wordmark had. drop-shadow volgt de
       alpha, dus hij pakt de vorm van het mark en niet een rechthoek. */
    filter:drop-shadow(0 4px 26px rgba(0,0,0,.85));
    /* geen klikdoel in de hero */
    pointer-events:none;
  }

  /* De losse poster is er alleen voor reduced-motion; de <img> binnen de
     <video> is de fallback als video helemaal niet speelt en wordt door de
     browser zelf getoond. Een overbruggingsmechanisme is hier niet nodig: het
     poster-attribuut doet dat werk al vanaf de eerste render. */
  /* De bronvideo mag NIET uit de renderboom: een video met display:none wordt
     op iOS niet gedecodeerd en dan staat het canvas stil. Maar hij mag ook
     nooit in beeld komen — op iOS stond het rauwe dubbelhoge bestand er
     eerst wél, ondanks 1x1 en opacity 0.

     Daarom nu ver buiten beeld in plaats van klein-en-doorzichtig: een
     overlaylaag negeert dekking eerder dan meetkunde. En daarom staan deze
     regels óók inline in HeroAnim.tsx — een bron die alleen door een
     stylesheet onzichtbaar is, is één regel verwijderd van zichtbaar. Dit is
     het tweede slot, niet het eerste. */
  #hero .center .hero-anim-bron{
    position:fixed; left:-10000px; top:0;
    width:2px; height:4px; overflow:hidden;
    opacity:0; z-index:-1; pointer-events:none;
  }
  #hero .center .hero-anim-bron video{ width:2px; height:4px; display:block; }

  /* Tot het eerste frame getekend is staat het stilstaande mark er; daarna
     precies één van de twee. Allebei tegelijk zou dubbelbeeld geven — het mark
     is transparant, dus je kijkt er doorheen. */
  #hero .center .hero-anim{ display:none; }
  #hero .center .hero-anim--aan{ display:block; }
  #hero .center > .hero-anim-static--weg{ display:none; }

  @media (prefers-reduced-motion: reduce){
    #hero .center .hero-anim,
    #hero .center .hero-anim--aan{ display:none; }
    #hero .center > .hero-anim-static,
    #hero .center > .hero-anim-static--weg{ display:block; }
  }

/* ---------- winkel, als woord op de hero ----------
   Kaal: geen vlak, geen kader. Een strakke rechthoek onder het geglazuurde,
   beschadigde mark vloekte (getest 16-09, zie de DEVLOG).

   Vaste kleuren en een VASTE donkere contour, geen var(--halo). --halo kantelt
   mee met het canvas: in het lichte thema wordt hij licht. Maar de hero blijft
   in beide thema's een donkere foto, dus een lichte gloed om een lichte letter
   verdwijnt daar juist. Zelfde regel als het mark en de strobe-contour in
   hcf.css: tekst op beeld ligt vast. De contour houdt het woord ook leesbaar op
   de rode en lichte stukken van de foto's. */
#hero .center .hero-winkel{
  font-family:var(--gothic); font-weight:400;
  font-size:clamp(40px, 11vw, 64px);
  line-height:.9; letter-spacing:.01em;
  margin-top:-2px;
  color:#f3f3f0; text-decoration:none;
  text-shadow:0 0 1px #0a0a0a, 0 0 3px #0a0a0a, 0 0 9px #0a0a0a,
              0 4px 26px rgba(0,0,0,.85);
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  #hero .center .hero-winkel{
    text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:.14em; text-decoration-color:transparent;
    transition:text-decoration-color .15s;
  }
  #hero .center .hero-winkel:hover{ text-decoration-color:#f3f3f0; }
}

/* TELEFOON IN PORTRET: de lockup optisch gecentreerd in de hero.

   Geschiedenis, want de waarden hieronder zijn niet willekeurig. Toen het
   hoek-cluster op telefoons nog een paneel van ~245px was, viel het
   gecentreerd over tagline en "winkel", en stond de lockup daarom bovenin
   (flex-start). Sinds het cluster ingeklapt 119px is, is die reden vervallen:
   bovenin liet onder "winkel" 200 tot 440px meer ruimte dan boven het mark.

   Nu weer gecentreerd, gemeten op de zichtbare inkt: van de bovenrand van het
   mark (3,1% transparante rand in het beeld) tot de onderkant van de letters
   van "winkel" (basislijn plus measureText-descent). Een gewone centrering liet
   onder het woord 11-12px meer over dan boven het mark — dat is de regelhoogte
   onder de letters. Vandaar 12px meer padding boven dan onder: het blok zakt
   6px en het verschil is op alle gemeten maten 0 à 1px.

   Gemeten 17-09 op SE (548/629/667), iPhone 15 Pro (659/745/852) en Pro Max
   (739/832/932), met en zonder Safari-balken: "winkel" ingeklapt 0% achter het
   cluster, op alle negen. Uitgeklapt valt het paneel op de meeste maten wél
   over het woord (tot 38%); dat is zolang iemand het menu openheeft, en tikken
   ernaast klapt het in. */
@media (max-width:640px) and (orientation:portrait){
  #hero .center{
    justify-content:center;
    padding-top:36px;
    padding-bottom:24px;
    gap:14px;
  }
}
/* Scroll-aanwijzing onderin de hero, alleen op een telefoon in portret — daar
   is het pijltje uit het hoek-cluster gehaald (zie hcf.css). Absoluut en buiten
   .center, dus het telt niet mee in het centreren hierboven. Gecentreerd, op
   dezelfde hoogte als de onderrand van het cluster. Vaste kleuren en een vaste
   donkere contour: tekst op beeld ligt vast, zoals het mark en "winkel". */
.hero-verder{ display:none; }
@media (max-width:640px) and (orientation:portrait){
  #hero .hero-verder{
    position:absolute; z-index:5;
    left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;              /* tikvlak; de pijl zelf is smal */
    font-family:var(--mono); font-size:19px; line-height:1;
    color:#f3f3f0; text-decoration:none;
    text-shadow:0 0 1px #0a0a0a, 0 0 3px #0a0a0a, 0 0 9px #0a0a0a, 0 2px 14px rgba(0,0,0,.85);
    -webkit-tap-highlight-color:transparent;
  }
}

/* Lage schermen: het mark kleiner, anders valt "winkel" achter het cluster.
   Tot 640 hoog iets kleiner (56vw); tot 600 hoog — in de praktijk een iPhone SE
   met Safari-balken — nog iets kleiner (50vw). Zonder die tweede stap viel het
   woord daar gecentreerd voor 12% achter het cluster. */
@media (max-width:640px) and (orientation:portrait) and (max-height:640px){
  #hero .center{ --hero-anim-w:min(402px, 56vw, 44svh); }
}
@media (max-width:640px) and (orientation:portrait) and (max-height:600px){
  #hero .center{ --hero-anim-w:min(402px, 50vw, 40svh); }
}