@font-face{font-family:"Chunko";src:url("../fonts/Chunko-Bold.woff2") format("woff2"),url("../fonts/Chunko-Bold.otf") format("opentype"),url("../fonts/Chunko-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--ink:#000;--paper:#fff;--pink:#f08cb0}
*{box-sizing:border-box;margin:0}
body{font-family:"Open Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
img{display:block}
.title{font-family:"Chunko","Arial Black",Impact,sans-serif;font-weight:700;font-size:clamp(3.5rem,13vw,11rem);line-height:1;letter-spacing:.01em}

/* homepagina */
body.home{height:100vh;height:100dvh;overflow:hidden;position:relative}
.slot{position:absolute;display:block;z-index:1}
.slot img{max-width:24vw;max-height:44vh;width:auto;height:auto;transition:transform .5s ease,opacity 1.4s ease}
.slot:hover img{transform:scale(1.03)}
.s1{top:5vh;left:16vw}
.s2{top:7vh;right:17vw}
.s3{bottom:12vh;left:6vw}
.s3 img{max-width:27vw}
.s4{bottom:12vh;right:7vw}
.home-logo{position:absolute;top:50%;left:50%;width:min(32vw,460px);transform:translate(-50%,-50%);z-index:0}
.home-nav{position:absolute;bottom:3.5vh;left:0;right:0;display:flex;justify-content:center;gap:clamp(1.5rem,6vw,6rem);font-size:clamp(1.1rem,2vw,1.9rem);z-index:2}
.home-nav a:hover{color:var(--pink)}
#snake{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#snake path{fill:none;stroke:var(--pink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* balk en pagina's */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1rem,4vw,3rem);background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.bar-logo img{height:clamp(34px,5vw,52px);width:auto}
.bar nav{display:flex;gap:clamp(1rem,3vw,2.5rem);font-size:1.05rem}
.bar nav a:hover{color:var(--pink)}
main{padding:0 clamp(1rem,4vw,3rem) 6rem}
.hero{min-height:62vh;display:flex;align-items:flex-end;padding-bottom:3vh}
.stack{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:2vh}
.stack img{width:100%;height:auto}
.stack img.small{width:68%;align-self:flex-start}
.video{aspect-ratio:16/9;width:100%;margin-top:-4vh}
.video iframe{width:100%;height:100%;border:0}
.project{padding:8vh clamp(1rem,7%,6rem) 2vh;max-width:900px}
.project h2{font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4.7vw,3.8rem);line-height:1.05;margin-bottom:1.4rem}
.project p+p{margin-top:1.2rem}
.project p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:2vh clamp(.6rem,2vw,1.5rem)}
.gallery img:first-child{grid-column:1/-1}
.gallery.two img:first-child{grid-column:auto}
.gallery.two img:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .75rem)}
.fade{opacity:0;will-change:opacity}
.about{padding-top:2rem}
.contact{padding-top:12vh}
.contact .title{margin-bottom:6vh}
.contact p{font-size:clamp(1.3rem,3vw,2.2rem);margin-bottom:1.2rem}
.contact a{border-bottom:2px solid var(--pink)}
.contact a:hover{color:var(--pink)}

/* mobiel en staand scherm: vaste indeling zodat foto's nooit over het logo gaan */
@media (max-width:900px),(orientation:portrait){
 body.home{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr auto;gap:2dvh 3vw;padding:4dvh 4vw 3dvh}
 .slot{position:static;display:flex;align-self:center;min-height:0}
 .s1,.s3{justify-self:start;justify-content:flex-start}
 .s2,.s4{justify-self:end;justify-content:flex-end}
 .s1{grid-area:1/1}.s2{grid-area:1/2}.s3{grid-area:3/1}.s4{grid-area:3/2}
 .slot img,.s3 img{max-width:44vw;max-height:calc((100dvh - 17vw - 18dvh) / 2)}
 .home-logo{position:static;transform:none;grid-area:2/1/3/3;justify-self:center;width:56vw;max-width:420px}
 .home-nav{position:static;grid-area:4/1/5/3;gap:1.4rem;font-size:1.05rem}
 .bar nav{gap:.8rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.slot img{transition:none}}