@font-face{font-family:"FT88";src:url(fonts/ft88.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Roboto Mono";src:url(fonts/robotomono-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Roboto Mono";src:url(fonts/robotomono-500.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Roboto Mono";src:url(fonts/robotomono-700.woff2) format("woff2");font-weight:700;font-display:block}
:root{--bg:#f2fffa;--ink:#000;--green:#8cff94}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Roboto Mono",monospace;overflow-x:hidden}

/* tekst in het midden */
:root{--U:min(calc(100vw / 2000),calc(100dvh / 1100))}
html,body{height:100%;overflow:hidden}
.stage{position:relative;width:100vw;height:100dvh;overflow:hidden}
.gap{display:none}
.copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(1050*var(--U));
  max-height:94%;overflow:auto;font-size:calc(21*var(--U));line-height:1.55;z-index:1}
.copy section+section{margin-top:4.35em}
.copy h2{margin:0 0 .4em;font-size:1em;font-weight:700}
.copy p{margin:0 0 1.2em}
#updates{list-style:none;margin:0;padding:0}
#updates li{margin:0 0 .6em}
#updates time{font-weight:500;margin-right:1.2ch}

.float{--u:var(--U);position:absolute;z-index:2;display:block;width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;color:inherit;text-decoration:none}
.title{z-index:3;margin:0;font-family:"FT88","Roboto Mono",monospace;font-size:calc(208*var(--u));line-height:1;font-weight:400;letter-spacing:-.07em;white-space:nowrap}
.float.dragging{cursor:grabbing;filter:drop-shadow(0 calc(10*var(--u)) calc(14*var(--u)) rgba(0,0,0,.22))}
.float:focus-visible{outline:3px solid #000;outline-offset:4px}
.float img,.float span{position:absolute;pointer-events:none;display:block}
.drift>img:first-child{left:0;top:0;width:100%;height:100%}
.float .logo,.float .pic{height:auto}
.float .pic{object-fit:cover}
.float img[style*="--l:"],.float span[style*="--l:"],.float button[style*="--l:"],.float a[style*="--l:"]{left:calc(var(--l)*var(--u));top:calc(var(--t)*var(--u));width:calc(var(--wd)*var(--u))}
.float img[style*="--ht"],.float span[style*="--ht"],.float button[style*="--ht"],.float a[style*="--ht"]{height:calc(var(--ht)*var(--u))}
.tab{font-size:calc(41*var(--u));display:flex!important;align-items:center;justify-content:center;line-height:1}
.vibe{left:0;right:0;top:calc(66*var(--u));bottom:0;display:flex!important;align-items:center;justify-content:center;
  color:#fff;font:700 calc(130*var(--u))/1 Helvetica,Arial,sans-serif;letter-spacing:-.03em}

@media (max-width:700px){
  :root{--U:calc(100vw / 1000)}
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .stage{height:auto;min-height:max(100dvh,calc(2500*var(--U)))}
  .copy{position:static;transform:none;width:auto;max-height:none;overflow:visible;padding:24vw 8% calc(1900*var(--U));font-size:max(14px,3.8vw)}
}
.float[href]:active,.float[data-gallery]:active{cursor:pointer}
.float.dragging{cursor:grabbing!important}
.zoom .float{cursor:ns-resize!important}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);opacity:0;visibility:hidden;cursor:zoom-out;outline:none;
  transition:opacity .25s,visibility 0s .25s}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .25s}
.lightbox img{max-width:92vw;max-height:92dvh;object-fit:contain;cursor:default;transform:scale(.9);transition:transform .25s ease-out}
.lightbox.open img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.lightbox,.lightbox img{transition:none}}
.contact{position:absolute;left:calc(40*var(--U));bottom:calc(40*var(--U));z-index:2;font-size:calc(22*var(--U));line-height:1.5}
.contact a{color:inherit;text-underline-offset:.15em}
.contact a:focus-visible{outline:3px solid #000;outline-offset:3px}
@media (max-width:700px){.contact{left:6%;bottom:5vw;font-size:max(14px,3.6vw)}}
.float iframe{position:absolute;border:0;border-radius:calc(12*var(--u));cursor:auto;background:transparent}

/* rustig zweven */
.js .float{visibility:hidden}
.js.ready .float{visibility:visible}
.drift{position:absolute;inset:0;--D:calc(var(--U)*12);animation:drift1 var(--dur,26s) ease-in-out var(--del,0s) infinite alternate}
.drift.v2{animation-name:drift2}.drift.v3{animation-name:drift3}
.float.dragging .drift{animation-play-state:paused}
@keyframes drift1{0%{translate:0 0}33%{translate:var(--D) calc(var(--D)*-.8)}66%{translate:calc(var(--D)*-.7) calc(var(--D)*-1.2)}100%{translate:calc(var(--D)*-1.1) calc(var(--D)*.7)}}
@keyframes drift2{0%{translate:0 0}33%{translate:calc(var(--D)*-.9) calc(var(--D)*.9)}66%{translate:calc(var(--D)*.8) calc(var(--D)*1.1)}100%{translate:calc(var(--D)*1.2) calc(var(--D)*-.6)}}
@keyframes drift3{0%{translate:0 0}33%{translate:calc(var(--D)*.6) calc(var(--D)*1.2)}66%{translate:calc(var(--D)*-1.1) calc(var(--D)*.4)}100%{translate:calc(var(--D)*.5) calc(var(--D)*-1)}}
@media (max-width:700px){.drift{--D:calc(var(--U)*9)}}   /* gsm: kleiner zweven, zodat mapjes elkaar niet raken */
@media (prefers-reduced-motion:reduce){.drift{animation:none}}
.spin{animation:spin 14.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* racehorsepablo-mapje (pagina "andere projecten") */
.rhp>img:first-child,.eo>img:first-child{left:0;top:0;width:100%;height:100%}
.float .rt{font-size:calc(85*var(--u));line-height:1;text-align:right;white-space:nowrap}
.float .rtab{font-size:calc(103*var(--u));line-height:1;white-space:nowrap}
.float button,.float .rlink{position:absolute;display:block;margin:0;padding:0;border:0;background:none;color:#000;cursor:pointer;pointer-events:auto}
.float button img,.float .rlink img{position:static;display:block;width:100%;height:100%;pointer-events:none}
.float button:focus-visible,.float .rlink:focus-visible{outline:3px solid #000;outline-offset:3px;border-radius:50%}

/* muziekspeler (naar "Progress bar for music CSS" van evochrome), in onze kleuren */
.float .rt2{font-size:calc(60*var(--uk));line-height:1;white-space:nowrap}
.float .tc,.float .tt,.float .vlabel{font-size:calc(46*var(--uk));line-height:1;white-space:nowrap}
.float .tc{text-align:right}
.float .bar{pointer-events:auto;cursor:pointer;--p:0;touch-action:none}
.float .bar::before{content:"";position:absolute;left:50%;top:50%;width:calc(100% + 40*var(--uk));height:max(calc(100% + 80*var(--uk)),28px);transform:translate(-50%,-50%)}
.float .bar:focus-visible{outline:3px solid #000;outline-offset:2px}
.float .btr,.float .bfl,.float .knob{pointer-events:none}
.float .btr{left:0;right:0;top:calc(37*var(--uk));height:calc(6*var(--uk));background:rgba(0,0,0,.5);border-radius:calc(6*var(--uk))}
.float .bfl{left:0;top:calc(37*var(--uk));height:calc(6*var(--uk));width:calc(var(--p)*1%);background:#000;border-radius:calc(6*var(--uk))}
.float .knob{top:calc(21*var(--uk));left:calc(var(--p)*1%);width:calc(38*var(--uk));height:calc(38*var(--uk));margin-left:calc(-19*var(--uk));border-radius:50%;background:#000}
.float .pp{box-sizing:border-box;border:calc(7*var(--uk)) solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pp .pi{position:absolute;inset:0;display:block}
.pp .pi b{position:absolute;inset:0;background:#000;transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
.pp .pi b:nth-child(1){clip-path:polygon(32% 24%,44% 24%,44% 76%,32% 76%)}
.pp .pi b:nth-child(2){clip-path:polygon(56% 24%,68% 24%,68% 76%,56% 76%)}
.pp.play .pi b:nth-child(1){clip-path:polygon(35% 24%,57.6% 37%,57.6% 63%,35% 76%)}
.pp.play .pi b:nth-child(2){clip-path:polygon(57% 37%,79% 50%,79% 50%,57% 63%)}
@media (prefers-reduced-motion:reduce){.pp .pi b{transition:none}}
.drift.still{animation:none}
.og{position:relative;display:inline-block;width:.7em;height:.5em;margin-right:-.07em}
.og .spin{left:50%;top:50%;width:.56em;height:.53em;margin:-.265em 0 0 -.28em}
.float .rtxt{font-size:calc(50*var(--u));line-height:1;white-space:nowrap;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:calc(4*var(--u))}
.float .rtxt:focus-visible{border-radius:4px}
.pixels{position:absolute;inset:0;pointer-events:none;z-index:0}
.pixels i{position:absolute;display:block}

/* pixels: ver weg, subtiel zwevend */
.pixels i{animation:pd1 var(--dur,38s) ease-in-out var(--del,0s) infinite alternate}
@keyframes pd1{0%{translate:0 0}50%{translate:var(--A) calc(var(--A)*-.7)}100%{translate:calc(var(--A)*-.8) calc(var(--A)*.9)}}
@keyframes pd2{0%{translate:0 0}50%{translate:calc(var(--A)*-.9) calc(var(--A)*.8)}100%{translate:calc(var(--A)*.9) calc(var(--A)*.6)}}
@keyframes pd3{0%{translate:0 0}50%{translate:calc(var(--A)*.6) calc(var(--A)*.9)}100%{translate:calc(var(--A)*-.7) calc(var(--A)*-.8)}}
@media (prefers-reduced-motion:reduce){.pixels i{animation:none}}

/* kleinpunk-mapje: dezelfde tegel, onderaan verlengd met exact dezelfde kleur */
.kpa{position:absolute;left:0;top:0;width:100%;height:calc(150*var(--u));background:url(img/kleinpunk-mapje.png) 0 0/100% auto no-repeat;pointer-events:none}
.kpb{position:absolute;left:0;right:0;top:calc(135*var(--u));bottom:0;background:#ffec53;pointer-events:none}
.rhp .rtab{font-size:calc(83*var(--u))}
.kp .rtab{font-size:calc(106*var(--u))}
.float .rlink:not([href]){cursor:default}

/* groter klikgebied (onzichtbaar): minstens 28 px */
.float .pp::before,.float .rlink::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,28px);height:max(100%,28px);transform:translate(-50%,-50%)}

/* zweven pauzeert zodra je erboven staat of focus hebt; zachte hover-lift */
.float:hover .drift,.float:focus-within .drift{animation-play-state:paused}
.drift{transition:scale .25s ease,filter .25s ease}
.float:not(.title):hover>.drift{scale:1.025;filter:drop-shadow(0 calc(8*var(--u)) calc(12*var(--u)) rgba(0,0,0,.16))}
.rhp:not(.dragging):hover,.kp:not(.dragging):hover,.eo:not(.dragging):hover{filter:drop-shadow(0 calc(8*var(--u)) calc(12*var(--u)) rgba(0,0,0,.14))}
@media (prefers-reduced-motion:reduce){.drift{transition:none}.float:not(.title):hover>.drift{scale:1}}

/* laadplek voor de Spotify-speler */
.playlist .ph{left:calc(48*var(--u));top:calc(48*var(--u));width:calc(680*var(--u));height:var(--ih);border-radius:calc(12*var(--u));background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:calc(34*var(--u));color:rgba(0,0,0,.5);text-align:center}
.playlist .ph.klaar{display:none}
.float .playlist .ph,.playlist button.ph{cursor:pointer;flex-direction:column;gap:.5em;font-family:"Roboto Mono",monospace;padding:0 6%;border:0;color:#000}
.playlist .ph .ph1{position:static;font-size:1em;text-decoration:underline;text-underline-offset:.15em}
.playlist .ph .ph2{position:static;font-size:.7em;color:rgba(0,0,0,.6)}
.playlist .ph:hover{background:rgba(0,0,0,.1)}
.playlist .ph:focus-visible{outline:3px solid #000;outline-offset:3px}
.playlist .ph.laden{cursor:default}
.playlist .ph{z-index:2}
.playlist iframe:not([src]){visibility:hidden;pointer-events:none}

/* assets-link rechtsonder: het gele mapje verschijnt na een klik */
.gone{display:none!important}
.assetlink{position:absolute;right:calc(40*var(--U));bottom:calc(40*var(--U));z-index:2;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:calc(22*var(--U));line-height:1.5;text-decoration:underline;text-underline-offset:.15em;cursor:pointer;transition:opacity .2s}
.assetlink.weg{opacity:0;pointer-events:none}
.assetlink:focus-visible{outline:3px solid #000;outline-offset:3px}
@media (max-width:700px){.assetlink{right:6%;bottom:5vw;font-size:max(14px,3.6vw)}}

/* Eosine-mapje */
.eo .rtab{font-size:calc(93.5*var(--u))}
.eoa,.eob,.eoc{position:absolute;background:#3e7f8e;pointer-events:none}
.eoa{left:calc(1155*var(--u));top:calc(122*var(--u));right:0;bottom:0}
.eob{left:0;top:calc(733*var(--u));width:calc(1160*var(--u));bottom:0}
.eoc{left:calc(1876*var(--u));top:0;width:calc(461*var(--u));height:calc(130*var(--u))}

/* speler: overal dezelfde weergavegrootte. --k = schaal racehorsepablo / schaal van de tegel (zie LAYOUT in andere.js) */
.float{--uk:calc(var(--u)*var(--k,1))}
.rhp{--k:1}.kp{--k:1.282}.eo{--k:1.129}
.eoa{left:calc(1344*var(--u))}
.eob{width:calc(1349*var(--u))}
.eoc{left:calc(2064*var(--u))}


/* doorschijnend plastic mapje rond de titel */
.title{font-size:inherit;letter-spacing:normal}
.title .ttl{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding-top:calc(var(--tt)*var(--u));
  font:400 calc(208*var(--u))/1 "FT88","Roboto Mono",monospace;letter-spacing:-.07em;white-space:nowrap;color:#000;pointer-events:none}
.title .gl,.title .gs{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.title .gl{--T:calc(var(--tt)*var(--u));--X1:calc(var(--tx)*var(--u));--X2:calc((var(--tx) + var(--tw))*var(--u));
  background:rgba(200,228,245,.005);
  -webkit-backdrop-filter:blur(2.5px) saturate(1.1);backdrop-filter:blur(2.5px) saturate(1.1)}
.title .tabk{position:absolute;left:calc(var(--tx)*var(--u));top:0;width:calc(var(--tw)*var(--u));height:calc(var(--tt)*var(--u));
  display:flex;align-items:center;justify-content:center;font:400 calc(30*var(--u))/1 "Roboto Mono",monospace;color:#000;pointer-events:none}
.title.float{z-index:3}
.eyes-tab{font-size:calc(32.6*var(--u))}
/* lander: elke letter zweeft apart in het steeltje */
.lbl{display:block}
.lbl i{position:absolute;left:0;width:100%;top:calc(var(--i)*55.3*var(--u));height:calc(55.3*var(--u));display:flex;align-items:center;justify-content:center;font:400 calc(var(--lf,47)*var(--u))/1 "Roboto Mono",monospace;font-style:normal;
  animation:lf1 calc(9s + var(--i)*1.8s) ease-in-out calc(var(--i)*-2.3s) infinite alternate}
.lbl i:nth-child(even){animation-name:lf2}
@keyframes lf1{0%{translate:calc(var(--u)*-4) calc(var(--u)*-3);rotate:-7deg}100%{translate:calc(var(--u)*4) calc(var(--u)*4);rotate:8deg}}
@keyframes lf2{0%{translate:calc(var(--u)*4) calc(var(--u)*3);rotate:7deg}100%{translate:calc(var(--u)*-4) calc(var(--u)*-4);rotate:-8deg}}
@media (prefers-reduced-motion:reduce){.lbl i{animation:none}}
/* kalender */
.optredens{display:none}
.cal{--c:#8cff94;--ink:#000}
.cal .body{position:absolute;left:0;top:calc(32*var(--u));width:100%;bottom:0;background:var(--c);border-radius:calc(6*var(--u))}
.cal .ctab{position:absolute;left:calc(26*var(--u));top:0;height:calc(40*var(--u));padding:0 calc(22*var(--u));background:var(--c);border-radius:calc(6*var(--u)) calc(6*var(--u)) 0 0;
  display:flex;align-items:center;font-size:calc(24*var(--u));font-weight:500;line-height:1;color:var(--ink);white-space:nowrap}
.cal .cdate{position:absolute;left:calc(26*var(--u));top:calc(59*var(--u));font-size:calc(44*var(--u));font-weight:700;line-height:1;color:var(--ink);white-space:nowrap}
.cal .cwhere{position:absolute;left:calc(340*var(--u));right:calc(26*var(--u));top:calc(64*var(--u));font-size:calc(28*var(--u));font-weight:500;line-height:1.3;white-space:nowrap;color:var(--ink)}
.cal .cwhere a{color:inherit;text-underline-offset:.15em;pointer-events:auto}
.cal .cwhere a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cal .drift{--D:calc(var(--U)*3.5)}
.kfoto{position:absolute;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.kfoto .drift{--D:calc(var(--U)*3.5);position:relative;inset:auto}
.kfoto img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.kfoto.dragging{cursor:grabbing;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.cal.past{opacity:.4}
.cal.dark{--ink:#fff}

/* video in het lime mapje */
.vid{cursor:grab}
.vid video{position:absolute;left:calc(217*var(--u));top:calc(205*var(--u));width:calc(2040*var(--u));height:calc(1741*var(--u));object-fit:cover;background:#000;pointer-events:none}
.float.vid .vplay{position:absolute;left:calc(217*var(--u));top:calc(205*var(--u));width:calc(2040*var(--u));height:calc(1741*var(--u));pointer-events:none;background:none;border:0;padding:0;color:#d5ff59}
.float.vid .vplay{display:block}
.vid .vplay svg{position:absolute;right:calc(60*var(--u));bottom:calc(60*var(--u));width:calc(210*var(--u));height:calc(210*var(--u));filter:drop-shadow(0 0 calc(10*var(--u)) rgba(0,0,0,.45))}
.vid .v-on,.vid.sound .v-off{display:none}
.vid.sound .v-on{display:block}
.vid.onvid{cursor:pointer}
.float.vid .vplay:focus-visible{outline:3px solid #000;outline-offset:3px}
.title.dragging{filter:none}
.kfoto{transition:none}.kfoto img{transition:opacity .22s ease}.kfoto:focus-visible{outline:3px solid #000;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.kfoto img{transition:none}}
.drift.fast{--D:calc(var(--U)*10)}

/* ===== gsm ===== */
@media (max-width:700px){
  .stage{min-height:0}
  .copy{padding:13vw 8% 0}
  .copy section+section{margin-top:0}
  .lbl{--lf:64}   /* gsm: even groot als "kalender" */
  .float{touch-action:none;-webkit-touch-callout:none;overscroll-behavior:contain}
  .float img{-webkit-user-drag:none}   /* gsm: mapjes versleepbaar met de vinger; scrollen kan naast de mapjes */
  .float:not(.title):hover>.drift{scale:1;filter:none}
  .back{position:absolute!important}
}

/* titel bovenaan kalender en andere projecten: alleen op gsm */
.mtitle{display:none}
@media (max-width:700px){
  .mtitle{display:block;position:absolute;z-index:5;left:50%;top:6vw;transform:translateX(-50%);width:min(72vw,400px);aspect-ratio:1130/250;--u:calc(min(72vw,400px)/1130);color:#000;text-decoration:none}
  .mtitle .og{vertical-align:baseline}
  .mtitle .spin{position:absolute;display:block}
  .mtitle:focus-visible{outline:3px solid #000;outline-offset:4px}
}

/* gsm: doorschijnende openingsmap over het hele scherm, 8x de titel; tik = weg */
.sluier{display:none}
@media (max-width:700px){
  .sluier{display:flex;position:fixed;inset:0;z-index:3000;flex-direction:column;align-items:center;justify-content:space-evenly;padding:4vh 0;
    background:rgba(200,228,245,.07);-webkit-backdrop-filter:blur(5px) saturate(1.15);backdrop-filter:blur(5px) saturate(1.15);
    border:1px solid rgba(120,185,225,.18);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .45s ease}
  .sluier.weg{opacity:0;pointer-events:none}
  .sl-t{display:block;font:400 min(17vw,10.1vh)/1 "FT88","Roboto Mono",monospace;letter-spacing:-.07em;white-space:nowrap;color:#000;user-select:none;-webkit-user-select:none}
  .sl-t .og .spin{position:absolute;display:block}
  .sl-t{--D:calc(100vw/1000*9);animation:drift1 var(--dur,26s) ease-in-out var(--del,0s) infinite alternate}   /* licht zweven, zoals de mapjes */
  .sl-t:nth-child(3n+2){animation-name:drift2}.sl-t:nth-child(3n){animation-name:drift3}
  .sluier:focus-visible{outline:3px solid #000;outline-offset:-6px}
  html.sluier-open,html.sluier-open body{overflow:hidden}
  .float.title{display:none!important}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.sluier{transition:none}.sl-t{animation:none}}

/* computer: projectmapjes als uitklapmenu (andere projecten) */
.dk .rtab{pointer-events:auto;cursor:pointer;display:flex!important;align-items:center;gap:.45em}
.dk .rtab .tchev{position:static;display:block;flex:none;width:.32em;height:.32em;border-right:.075em solid currentColor;border-bottom:.075em solid currentColor;transform:translateY(.08em) rotate(225deg);transition:transform .2s}
.dk.dicht .rtab .tchev{transform:translateY(-.1em) rotate(45deg)}
.dk:not(.dicht) .rtab{top:0!important;height:calc(var(--th)*var(--u));background:var(--c);padding-right:.4em}   /* steeltje loopt door tot naast het pijltje */
.dk.rhp{--th:115}.dk.kp{--th:136}.dk.eo{--th:130}
.dk .rtab:focus-visible{outline:3px solid #000;outline-offset:3px}
.dk.dicht{width:auto!important;height:auto!important}
.dk.dicht>.drift{position:relative;inset:auto}
.dk.dicht>.drift>*:not(.rtab){display:none!important}
.dk.dicht .rtab{position:relative!important;left:auto!important;top:auto!important;background:var(--c);padding:.32em .6em .28em;font-size:calc(var(--U)*32)!important}