@font-face{font-family:"Caprasimo";src:url("fonts/caprasimo.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
  --roze:#FC9AC0;--inkt:#15101C;--paars:#3B1457;--groen:#0B6B4A;--goud:#F7B500;--bruinrood:#841C0B;--rood:#EE5230;--witgeel:#FFF8E8;
  --kant:clamp(18px,4vw,56px);
  --rand:clamp(64px,9vw,140px);
  --dik:"Caprasimo",Georgia,serif;--strak:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--inkt);scrollbar-color:var(--groen) var(--roze)}
body{margin:0;overflow-x:clip;background:var(--roze);color:var(--inkt);font:500 clamp(16px,1.3vw,19px)/1.55 var(--strak)}
::selection{background:var(--goud);color:var(--inkt)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}
a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
h1,h2,h3,p{margin:0}
h2{font:700 clamp(28px,3.2vw,44px)/1.08 var(--strak);letter-spacing:-.025em;text-wrap:balance}
h3{font:700 clamp(19px,1.7vw,24px)/1.2 var(--strak);letter-spacing:-.012em;margin-bottom:8px}

.kop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px 36px;padding:18px var(--kant) 0;font-weight:700}
.kop nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.merk img{height:46px;width:auto}

.opening{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(500px,52vw,780px)}
.poster{position:absolute;right:0;bottom:0;height:100%;width:62%;object-fit:cover;object-position:left bottom}
.opening-tekst{position:relative;z-index:2;padding:96px var(--kant) 48px;max-width:56%}
h1{font:400 clamp(58px,10vw,150px)/.9 var(--dik);letter-spacing:-.01em;margin-bottom:14px}
.zin{font:400 clamp(23px,2.8vw,40px)/1.1 var(--dik);color:var(--bruinrood);margin-bottom:14px}
.opening-tekst>p:not(.zin):not(.knoppen){max-width:34ch;margin-bottom:20px}
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-weight:700}
.knop{display:inline-block;background:var(--goud);color:var(--inkt);border:2.5px solid var(--inkt);border-radius:99px;padding:10px 22px;font-weight:700;text-decoration:none;transition:background-color .2s ease-out}
.knop:hover{background:var(--witgeel)}

.blok{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr);gap:22px 36px;padding:clamp(34px,5vw,72px) var(--kant)}
.groen{background:var(--groen);color:var(--witgeel)}
.groen h3{color:var(--goud)}
.goud{background:var(--goud);grid-template-columns:repeat(3,minmax(0,1fr))}
.goud h2{grid-column:1/-1}

.over{position:relative;z-index:2;display:grid;padding-bottom:calc(clamp(34px,5vw,72px) + var(--rand)) !important;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr);gap:24px 36px;align-items:center;padding:clamp(34px,5vw,72px) var(--kant);background:var(--roze)}
.foto{position:relative;margin:0;aspect-ratio:4/5;transform:rotate(-2deg)}
.foto img{position:relative;width:100%;height:100%;object-fit:cover}
.foto-achter,.foto-rand{position:absolute;display:block;pointer-events:none}
.foto-achter{left:-7.5%;top:-6%;width:115%;height:112%;overflow:visible}
.foto-rand{inset:0;width:100%;height:100%;overflow:visible}
.over div{grid-column:2/4;max-width:min(62ch,38vw);display:grid;gap:12px}
.tros{position:absolute;right:0;bottom:0;height:calc(100% + var(--rand)*.4);width:auto;max-width:31vw;object-fit:contain;object-position:right bottom;pointer-events:none}

.rand{position:relative;height:var(--rand);margin-block:-1px;overflow:hidden}
.rand svg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:max(100%,760px);height:100%;display:block}
.lijn{stroke:var(--inkt);stroke-width:2.5;vector-effect:non-scaling-stroke}
.r1{margin-top:calc(var(--rand)*-1);z-index:2}
.r2{background:var(--goud)}
.r3{background:var(--goud)}
.r4{margin-top:calc(var(--rand)*-1);z-index:3}
.r5{background:var(--rood)}
.overgang{position:relative;z-index:3}
.tak{position:absolute;height:auto;pointer-events:none}
.tak-a{left:-3vw;top:50%;width:clamp(290px,37vw,600px);transform:translateY(-52%) rotate(-5deg)}
.tak-b{right:-3vw;bottom:calc(var(--rand)*-.1);width:clamp(250px,40vw,640px);transform:rotate(-6deg) scaleX(-1)}

.slot{background:var(--rood);padding:clamp(40px,6vw,88px) var(--kant);display:grid;gap:14px;justify-items:start}
.slot h2{font-size:clamp(32px,4.4vw,60px)}
.slot p{max-width:46ch}

.voet{display:flex;flex-wrap:wrap;gap:22px 56px;align-items:center;background:var(--inkt);color:var(--roze);padding:clamp(30px,4vw,56px) var(--kant)}
.voet img{height:38px;width:auto}
.gegevens{font-size:.92em}

.fout{display:grid;place-items:center;min-height:100vh;padding:24px;text-align:center}
.fout h1{font:700 clamp(36px,6vw,72px)/1.05 var(--strak);letter-spacing:-.025em;margin-bottom:12px}
.fout img{height:46px;width:auto;margin:0 auto 28px}
.fout p{margin-bottom:18px}

@media (max-width:720px){
  .kop{position:relative}
  .opening{flex-direction:column;align-items:stretch}
  .poster{position:relative;width:100%;height:auto;aspect-ratio:5/4;order:2}
  .opening-tekst{max-width:100%;padding-top:24px;padding-bottom:12px;order:1}
  .blok,.over{grid-template-columns:minmax(0,1fr)}
  .over div{grid-column:auto;max-width:none}
  .tros{height:250px;bottom:auto;top:-30px;right:-6px;max-width:52vw}
  .tak-a{left:-12px;width:250px}
  .tak-b{right:-16px;width:230px;bottom:-14px}
  .kop nav a,.voet a,.knoppen>a:not(.knop),.blok h3 a{display:inline-block;padding-block:10px}
  .kop nav{row-gap:0}
  .blok h3:has(a){margin-bottom:0}
  .foto{max-width:270px;margin-left:10px;z-index:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.knop{transition:none}}