/* =========================================================================
   HOUSE OF BESMA — one-pager
   Gebouwd op het merkhandboek (kleur, letter, vorm, taal).
   Regels: één verloop per vlak · tekst is inkt, nooit wit · kaarten vlak wit ·
   violet is een veld, geen tekstbed.
   ========================================================================= */

/* --- 01 · TOKENS ------------------------------------------------------- */
:root{
  /* veldkleuren */
  --zon:#FFF845;
  --koraal:#FF7A4B;
  --roze:#FF3389;
  --violet:#9F2EFF;
  --violet-label:#AC49FF;     /* enige violet-toon die kleine tekst draagt */
  --ink:#1A0010;

  /* inkt-ramp (inkt over wit) */
  --ink-80:#483340;
  --ink-60:#766670;
  --ink-40:#A3999F;
  --ink-15:#DDD9DB;
  --ink-08:#EDEBEC;

  --wit:#FFFFFF;

  /* ruimte — 4px basis */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* maten */
  --kolom:780px;              /* tekstkolom stopt op 780px */
  --breed:1360px;
  --rand:clamp(20px,5vw,96px);

  --lijn:3px;
  --navh:68px;          /* vaste hoogte van de plakkende balk: 44 + 2x12 padding */
  --ankermarge:76px;    /* iets ruimer, zodat een kop niet tegen de balk plakt */
}

/* --- 02 · RESET -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:clamp(17px,1.15vw,20px);line-height:1.45;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Op een inktvlak valt een inktring weg. Daar klapt hij om naar wit — dezelfde
   uitzondering die het handboek maakt waar het vlak zélf de inkt is.
   De inktknoppen blijven inkt: die staan op een mesh, waar wit 1,1:1 haalt. */
.hob-nav :focus-visible,.colofon :focus-visible,.vlak--inkt :focus-visible{outline-color:var(--wit)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth;scroll-padding-top:var(--ankermarge)}

/* --- 03 · LETTER ------------------------------------------------------- */
/* De !important is er niet voor de sier: de Use Any Font-plugin zet
   `h1, h2, h3 {font-family:"besma" !important}` klaar. Zonder tegenwicht
   verliest Anton het van die regel zodra dat blad ergens meekomt. */
.hob-display{font-family:"Anton",Impact,"Haettenschweiler",sans-serif!important;font-weight:400;
  text-wrap:balance;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased}
/* Het handboek schrijft .86 voor. Opgemeten op het scherm — kortste afstand
   tussen de inkt van twee regels — laat dat rond 12% van het korps liggen, en
   bij een komma boven een accent raken de vormen elkaar (0 px). Op .94 komt
   elke kop uit op ~20%; een regel met É Ë Î heeft 1.10 nodig voor diezelfde
   ~20%, want de accenten steken in de regel erboven. */
.hob-display-diacritic{line-height:1.10}

.hob-mono{font-family:"Space Mono","SFMono-Regular",Menlo,Consolas,monospace;
  font-weight:400;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(11px,.85vw,13px);line-height:1.4}
.hob-mono--wijd{letter-spacing:.24em}

.d-xl{font-size:clamp(46px,9.5vw,128px)}
.d-l {font-size:clamp(38px,6.4vw,84px)}
.d-m {font-size:clamp(30px,4.2vw,56px)}
.d-s {font-size:clamp(23px,2.5vw,34px)}
.d-xs{font-size:clamp(20px,1.9vw,26px)}

.lead{font-size:clamp(19px,1.5vw,25px);line-height:1.4}
.klein{font-size:clamp(15px,1vw,17px)}
.kolom{max-width:var(--kolom)}

/* --- 04 · VLAKKEN ------------------------------------------------------ */
.vlak{position:relative;scroll-margin-top:var(--ankermarge);padding:clamp(64px,9vw,128px) var(--rand)}
.vlak > .binnen{max-width:var(--breed);margin:0 auto}
.vlak--wit{background:var(--wit)}
.vlak--inkt{background:var(--ink);color:var(--wit)}

/* de mesh is de grond, nooit een element op de grond — één per vlak */
/* De mesh-stapels staan als variabele, zodat een vlak er een boog bij kan
   krijgen zonder dat het een tweede verloop wordt: het blijft één achtergrond. */
:root{
  --stapel-01:
    radial-gradient(130% 115% at 2% -12%, #FFF845 0%, rgba(255,248,69,.85) 22%, rgba(255,248,69,0) 58%),
    radial-gradient(100% 95%  at 26% 18%, #FF7A4B 0%, rgba(255,122,75,.72) 30%, rgba(255,122,75,0) 68%),
    radial-gradient(140% 150% at 124% 46%,#9F2EFF 0%, rgba(159,46,255,.88) 24%, rgba(159,46,255,0) 62%),
    radial-gradient(68% 68%  at 99% 122%, #AC49FF 0%, rgba(172,73,255,.62) 30%, rgba(172,73,255,0) 62%);
  --stapel-02:
    radial-gradient(130% 115% at 98% -12%, #FFF845 0%, rgba(255,248,69,.85) 22%, rgba(255,248,69,0) 58%),
    radial-gradient(100% 95%  at 74% 18%, #FF7A4B 0%, rgba(255,122,75,.72) 30%, rgba(255,122,75,0) 68%),
    radial-gradient(95% 95% at -18% 104%,#9F2EFF 0%, rgba(159,46,255,.84) 26%, rgba(159,46,255,0) 62%),
    radial-gradient(70% 70%  at 16% 124%, #AC49FF 0%, rgba(172,73,255,.62) 30%, rgba(172,73,255,0) 60%);
  --stapel-03:
    radial-gradient(120% 78% at 46% -16%, #FFF845 0%, rgba(255,248,69,.85) 24%, rgba(255,248,69,0) 62%),
    radial-gradient(110% 66% at 24% 14%,  #FF7A4B 0%, rgba(255,122,75,.7) 30%, rgba(255,122,75,0) 66%),
    radial-gradient(140% 90% at 56% 122%, #9F2EFF 0%, rgba(159,46,255,.86) 26%, rgba(159,46,255,0) 64%);
  --stapel-band:
    radial-gradient(60% 320% at 2% 50%,  #FFF845 0%, rgba(255,248,69,.9) 26%, rgba(255,248,69,0) 66%),
    radial-gradient(55% 320% at 30% 50%, #FF7A4B 0%, rgba(255,122,75,.8) 28%, rgba(255,122,75,0) 68%),
    radial-gradient(70% 320% at 101% 50%,#AC49FF 0%, rgba(172,73,255,.92) 26%, rgba(172,73,255,0) 72%);

  /* De boog: een grote zachte koepel die van onderen opkomt, met een dunne
     lichte rand op de kier. Geen tweede kleur, alleen een toonverschil in
     hetzelfde veld. */
  --koepel:
    radial-gradient(125% 95% at 50% 150%,
      rgba(159,46,255,.24) 0 86.8%,
      rgba(159,46,255,.16) 86.8% 88.4%,
      rgba(255,255,255,.22) 88.4% 89.1%,
      rgba(255,255,255,0) 89.8%);
  /* Gespiegelde variant: de koepel hangt van boven in het vlak. */
  --koepel-boven:
    radial-gradient(125% 95% at 50% -50%,
      rgba(255,248,69,.34) 0 86.8%,
      rgba(255,205,69,.22) 86.8% 88.4%,
      rgba(255,255,255,.20) 88.4% 89.1%,
      rgba(255,255,255,0) 89.8%);
}

.mesh-01{background:var(--stapel-01),var(--roze)}
.mesh-02{background:var(--stapel-02),var(--roze)}
.mesh-03{background:var(--stapel-03),var(--roze)}
.mesh-band{background:var(--stapel-band),var(--roze)}

.mesh-01.boog{background:var(--koepel),var(--stapel-01),var(--roze)}
.mesh-02.boog{background:var(--koepel),var(--stapel-02),var(--roze)}
.mesh-03.boog{background:var(--koepel),var(--stapel-03),var(--roze)}
.mesh-01.boog--boven{background:var(--koepel-boven),var(--stapel-01),var(--roze)}
.mesh-03.boog--boven{background:var(--koepel-boven),var(--stapel-03),var(--roze)}

/* --- 05 · NAVIGATIE ---------------------------------------------------- */
.hob-nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--wit)}
.hob-nav__binnen{max-width:var(--breed);margin:0 auto;padding:var(--s3) var(--rand);
  display:flex;align-items:center;gap:var(--s5);justify-content:space-between;
  min-height:44px;box-sizing:content-box}
.hob-nav__merk{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:19px;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.hob-nav__links{display:flex;gap:clamp(12px,1.8vw,28px);align-items:center}
.hob-nav__links a{text-decoration:none;opacity:.78}
.hob-nav__links a:hover,.hob-nav__links a:focus-visible,.hob-nav__links a[aria-current="true"]{opacity:1}
.hob-nav__knop{background:var(--zon);color:var(--ink);padding:12px 16px;text-decoration:none;opacity:1!important}
.hob-nav__toggle{display:none;background:none;border:2px solid currentColor;color:inherit;
  padding:12px 16px;cursor:pointer}
@media (max-width:900px){
  .hob-nav__toggle{display:block}
  .hob-nav__links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;padding:var(--s3) var(--rand) var(--s5)}
  .hob-nav__links a{padding:var(--s3) 0;width:100%}
  .hob-nav[data-open="true"] .hob-nav__links{display:flex}
}

/* --- 06 · KNOPPEN ------------------------------------------------------ */
.knop{display:inline-block;text-decoration:none;border:var(--lijn) solid var(--ink);
  padding:16px clamp(20px,2vw,28px);font-family:"Space Mono",monospace;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(11px,.85vw,13px);line-height:1;cursor:pointer}
.knop--inkt{background:var(--ink);color:var(--wit)}   /* het vlak is zélf de inkt: wit mag */
.knop--open{background:transparent;color:var(--ink)}
.knop--accent{background:var(--roze);color:var(--ink)}
.knop--zon{background:var(--zon);color:var(--ink)}
.knop:hover{transform:translateY(-2px)}
.knop{transition:transform .12s ease}
.knoppen{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* --- 07 · KAARTEN ------------------------------------------------------ */
/* vlak wit, geen glas, geen tint, geen schaduw, geen transparantie */
.kaart{background:var(--wit);color:var(--ink);border-radius:2px;
  padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;gap:var(--s3)}
/* Een beeld in een kaart loopt tot de kaartrand en trekt de padding dus terug.
   De kaart blijft eromheen vlak wit: geen tint, geen rand, geen schaduw. */
.kaart__beeld{display:block;margin:calc(-1 * clamp(24px,3vw,48px));
  margin-bottom:var(--s2);order:-1}
.kaart__beeld img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.kaart--inkt{background:var(--ink);color:var(--wit)}  /* alleen op een inkt-vlak */
.kaart__label{color:var(--ink-60)}
.kaart--inkt .kaart__label{color:var(--ink-40)}
.kaart__voet{margin-top:auto;padding-top:var(--s4)}

.raster{display:grid;gap:var(--s5)}
@media (min-width:720px){.raster--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:720px){.raster--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.raster--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:720px){.raster--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.raster--4{grid-template-columns:repeat(4,1fr)}}

/* --- 08 · FEITENTABEL -------------------------------------------------- */
/* een lijn boven elke rij en onder de laatste */
.feiten{border-bottom:var(--lijn) solid var(--ink)}
.feiten__rij{border-top:var(--lijn) solid var(--ink);
  display:grid;gap:var(--s2) var(--s5);padding:var(--s5) 0;align-items:start}
@media (min-width:860px){
  .feiten__rij{grid-template-columns:minmax(200px,1fr) minmax(0,2.2fr);}
  .feiten__rij--3{grid-template-columns:minmax(200px,1fr) minmax(0,2.2fr) minmax(140px,.9fr)}
}
.feiten__naam{align-self:start}
.feiten__rij > p:not(.feiten__naam):not(.feiten__pijler){max-width:68ch}
.feiten__pijler{color:var(--ink-60)}
@media (min-width:860px){.feiten__pijler{text-align:right;text-wrap:balance}}
@media (min-width:860px) and (max-width:1060px){
  .feiten__rij--3{grid-template-columns:minmax(180px,1fr) minmax(0,2fr)}
  .feiten__pijler{grid-column:1 / -1;text-align:left;margin-top:var(--s1)}
}

/* --- 09 · CHIPS / STALENRIJ ------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{padding:8px 12px;font-family:"Space Mono",monospace;text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--ink)}
.chip--zon{background:var(--zon)}
.chip--koraal{background:var(--koraal)}
.chip--roze{background:var(--roze)}
.chip--violet{background:var(--violet-label)}
.chip--inkt{background:var(--ink);color:var(--wit)}

/* --- 10 · HERO --------------------------------------------------------- */
/* Balk plus hero vullen samen precies één scherm. De hoogte is een ondergrens,
   geen bovengrens: past de inhoud er op een laag scherm niet in, dan groeit het
   vlak mee in plaats van dat er iets wegvalt. svh is de kleine viewport, dus op
   een telefoon springt er niets zodra de browserbalken wegschuiven. */
.hero{min-height:calc(100vh - var(--navh));
  min-height:calc(100svh - var(--navh));
  display:flex;align-items:center;
  padding-top:clamp(20px,5vh,104px);padding-bottom:clamp(20px,5vh,104px);
  position:relative;overflow:hidden}
.hero__binnen{max-width:var(--breed);margin:0 auto;width:100%;position:relative;z-index:2}

/* De uitgesneden figuur staat óp de mesh, zoals de letters dat doen: geen tweede
   grond, geen kader, geen schaduw. Ze staat op de onderrand van het vlak, rechts
   van de tekstkolom. Onder 1100 px is daar geen ruimte meer naast de kolom, dus
   dan blijft ze weg — liever geen figuur dan een figuur achter de tekst. */
.hero__figuur{display:none}
@media (min-width:1240px){
  .hero__figuur{
    display:block;position:absolute;bottom:0;z-index:1;pointer-events:none;
    right:max(var(--rand), calc((100% - var(--breed)) / 2));
    width:auto;height:min(90%, 440px);
    -webkit-user-select:none;user-select:none}
}
/* De hoogtes zijn nagerekend op de vrije ruimte naast de tekstkolom van 780 px:
   de figuur is 0,76 keer zo breed als hoog en mag daar nooit overheen lopen. */
@media (min-width:1400px){ .hero__figuur{height:min(76%, 680px)} }
@media (min-width:1600px){ .hero__figuur{height:min(84%, 740px)} }
.hero__kolom{max-width:min(var(--kolom),90%)}
.hero__merk{margin-bottom:var(--s2)}
.hero .d-m{font-size:clamp(26px,min(4.2vw,7vh),56px)}
.hero__kop{margin:clamp(10px,2.4vh,24px) 0 clamp(8px,1.6vh,16px);
  font-size:clamp(40px,min(9.5vw,15vh),128px)}
.hero__voet{margin-top:clamp(16px,4vh,88px);color:var(--ink)}

/* --- 11 · SECTIEKOP ---------------------------------------------------- */
.sectiekop{margin-bottom:clamp(32px,4vw,56px)}
.sectiekop .hob-mono{display:block;margin-bottom:var(--s3);color:var(--ink-60)}
.mesh-01 .sectiekop .hob-mono,.mesh-02 .sectiekop .hob-mono,
.mesh-03 .sectiekop .hob-mono{color:var(--ink)}
.vlak--inkt .sectiekop .hob-mono,.vlak--inkt .label{color:var(--ink-40)}
.sectiekop p{margin-top:var(--s4);max-width:var(--kolom)}

/* --- 12 · MANIFEST ----------------------------------------------------- */
.manifest__regels{margin-top:clamp(32px,4vw,56px);display:grid;gap:var(--s5)}
.manifest__regels li{border-top:var(--lijn) solid var(--wit);padding-top:var(--s4)}

/* --- 13 · CONTACT + VOETSTROOK ---------------------------------------- */
.contact__grid{display:grid;gap:var(--s7)}
@media (min-width:1080px){.contact__grid{grid-template-columns:1.1fr .9fr}}
.contact dl{display:grid;gap:var(--s5);margin:0}
.contact dt{color:var(--ink-60);margin-bottom:var(--s1)}
.contact dd{margin:0}
.contact a{text-decoration:none;border-bottom:2px solid var(--ink)}
.voetstrook{padding:var(--s5) var(--rand)}
.voetstrook__binnen{max-width:var(--breed);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:var(--s4);justify-content:space-between;align-items:center;color:var(--ink)}
.voetstrook a{color:inherit;text-decoration:none}
.colofon{padding:var(--s5) var(--rand);background:var(--ink);color:var(--ink-40)}
.colofon__binnen{max-width:var(--breed);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:var(--s4);justify-content:space-between}
.colofon a{color:var(--ink-15)}

/* --- 14 · OVERSLAAN-LINK ---------------------------------------------- */
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{position:static;display:inline-block;margin:var(--s3);padding:var(--s3);
  background:var(--zon);color:var(--ink)}

/* smalle variant van de feitentabel (naast een andere kolom) */
@media (min-width:860px){
  .feiten__rij--smal{grid-template-columns:minmax(150px,.8fr) minmax(0,1.6fr)}
}

/* --- 15 · SMAL EN MIDDEN SCHERM ----------------------------------------
   Zodra de tekstkolom het vlak vult — en dat doet hij tot ongeveer 1100 px —
   kantelt de mesh mee naar de staande opbouw: geel kroon boven, violet vloer
   onder. Zo blijft de kolom van het violet af. Opgemeten: op de liggende
   opbouw zakt de hero tussen 761 en 1070 px naar 4,2, op de staande haalt
   hij 5,1. Violet is een veld, geen tekstbed. */
@media (max-width:1100px){
  :root{
    --stapel-01:
      radial-gradient(130% 52% at 34% -10%, #FFF845 0%, rgba(255,248,69,.9) 26%, rgba(255,248,69,0) 64%),
      radial-gradient(120% 46% at 18% 16%,  #FF7A4B 0%, rgba(255,122,75,.75) 30%, rgba(255,122,75,0) 68%),
      radial-gradient(150% 60% at 60% 126%, #9F2EFF 0%, rgba(159,46,255,.9) 24%, rgba(159,46,255,0) 62%);
    --stapel-02:
      radial-gradient(130% 52% at 66% -10%, #FFF845 0%, rgba(255,248,69,.9) 26%, rgba(255,248,69,0) 64%),
      radial-gradient(120% 46% at 82% 16%,  #FF7A4B 0%, rgba(255,122,75,.75) 30%, rgba(255,122,75,0) 68%),
      radial-gradient(150% 60% at 40% 126%, #9F2EFF 0%, rgba(159,46,255,.9) 24%, rgba(159,46,255,0) 62%);
    --stapel-03:
      radial-gradient(130% 50% at 40% -10%, #FFF845 0%, rgba(255,248,69,.9) 26%, rgba(255,248,69,0) 64%),
      radial-gradient(120% 44% at 20% 14%,  #FF7A4B 0%, rgba(255,122,75,.75) 30%, rgba(255,122,75,0) 68%),
      radial-gradient(150% 58% at 58% 128%, #9F2EFF 0%, rgba(159,46,255,.9) 24%, rgba(159,46,255,0) 62%);
    /* staand staat de koepel lager en zachter, anders loopt hij in de tekst */
    --koepel:
      radial-gradient(150% 100% at 50% 155%,
        rgba(159,46,255,.22) 0 79.5%,
        rgba(159,46,255,.15) 79.5% 81%,
        rgba(255,255,255,.20) 81% 81.7%,
        rgba(255,255,255,0) 82.4%);
  }
}

@media (max-width:760px){
  .hero__kolom{max-width:100%}
}

/* --- 16 · PRINT ---------------------------------------------------------
   Op papier verdwijnt de mesh en blijft de inkt. De inktvlakken klappen om
   naar wit papier met zwarte tekst, anders komt er een blanco bladzij uit. */
@media print{
  .hob-nav,.overslaan{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  .vlak{padding:0 0 18pt;break-inside:avoid}
  .mesh-01,.mesh-02,.mesh-03,.mesh-band,.vlak--inkt,.colofon{
    background:#fff!important;color:#000!important}
  .vlak--inkt .label,.colofon,.colofon a{color:#444!important}
  .manifest__regels li{border-top-color:#000!important}
  .kaart{border:1pt solid #000;padding:10pt}
  .knop{border:1pt solid #000;background:#fff!important;color:#000!important}
  .knop[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:8pt}
  .kaart,.feiten__rij{break-inside:avoid}
}

/* alleen voor de voorlezer: benoemt een kolom die visueel al duidelijk is */
.alleen-voorlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 17 · BEELDSTROOK ---------------------------------------------------
   Drie staande vlakken naast elkaar, van rand tot rand. Het beeld ís hier de
   grond: er ligt geen mesh onder en er komt geen mesh overheen, en er staat
   geen tekst op. Het bijschrift hoort eronder, in mono op inkt. */
.beeldstrook{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink)}
.beeldstrook img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.beeldstrook figure{margin:0;min-width:0}
/* Onder 760 px draagt één beeld de strook: drie naast elkaar wordt daar een
   reep postzegels. */
@media (max-width:760px){
  .beeldstrook{grid-template-columns:1fr}
  .beeldstrook figure:not(:first-child){display:none}
  .beeldstrook img{aspect-ratio:3/4}
}
.beeldbijschrift{background:var(--ink);color:var(--ink-40);padding:var(--s4) var(--rand)}
.beeldbijschrift .binnen{max-width:var(--breed);margin:0 auto;display:flex;
  flex-wrap:wrap;gap:var(--s4);justify-content:space-between}