/* ---------- basis ---------- */
:root{--bg:#000;--fg:#fff;--mute:#8a8a8a;--line:#2e2e2e;
--g:clamp(20px,4vw,56px);       /* zijmarge: overal dezelfde */
--max:1440px;                   /* maximale breedte van de inhoud */
--sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--g);top:-60px;z-index:10;background:var(--fg);color:var(--bg);padding:8px 14px;font-family:var(--mono);font-size:.78rem;text-decoration:none}
.skip:focus{top:12px}
main{flex:1}

/* ---------- header & footer ---------- */
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:18px max(var(--g),calc((100% - var(--max))/2 + var(--g)))}
.logo img{height:34px;display:block}
nav{display:flex;gap:22px;justify-content:flex-end;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
nav a{text-decoration:none;color:var(--mute);padding:2px 0;border-bottom:1px solid transparent;transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--fg);border-bottom-color:var(--fg)}
#sound{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--line);color:var(--mute);padding:5px 10px;cursor:pointer;white-space:nowrap}
#sound:hover{color:var(--fg)}
#sound[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--mute);
  padding:22px max(var(--g),calc((100% - var(--max))/2 + var(--g)))}
footer a{text-decoration:none}footer a:hover{color:var(--fg)}
@media(max-width:700px){
  header{position:static;grid-template-columns:1fr auto;gap:14px;padding-top:14px;padding-bottom:12px}
  .logo img{height:28px}
  nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:10px;font-size:.72rem;letter-spacing:.05em}
}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 71px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px var(--g);text-align:center}
.hero>*:not(.heroMedia){position:relative;z-index:1}
.heroMedia{position:absolute;inset:0;background:center/cover no-repeat;opacity:.5;z-index:0}
.heroMedia video{width:100%;height:100%;object-fit:cover}
#logoCanvas{width:min(920px,100%);display:block;touch-action:manipulation;cursor:crosshair}
.tag{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-top:36px}
.soundtoggle{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;background:none;border:0;border-bottom:1px solid var(--line);color:var(--mute);padding:4px 0;margin-top:14px;cursor:pointer;transition:color .2s,border-color .2s}
.soundtoggle:hover,.soundtoggle[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
@media(max-width:700px){.hero{min-height:72svh}.tag{font-size:.75rem;letter-spacing:.1em}}

/* tegels: portfolio schermvullend (vloeit vanuit het zwart in het beeld); de andere drie kleiner eronder */
.tiles{display:block}
.tile{position:relative;display:block;width:100%;aspect-ratio:2048/858;min-height:60svh;max-height:92svh;overflow:hidden;text-decoration:none}
.tile .vis{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .8s ease;opacity:.85}
.tile .vis.empty{background:repeating-linear-gradient(0deg,#0c0c0c 0 30px,#1c1c1c 30px 31px)}
.tile:hover .vis{transform:scale(1.02)}
.tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(var(--bg) 0%,rgba(0,0,0,.6) 18%,transparent 45%)}
.tile .cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px var(--g) clamp(24px,4vw,48px);display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:end;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.tile .cap::after{content:"→";grid-column:2;grid-row:1/3;font-family:var(--mono);font-size:1rem;transition:transform .3s}
.tile:hover .cap::after{transform:translateX(6px)}
.tile .t{font-size:clamp(2rem,6vw,4.5rem);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.tile .d{color:var(--mute);font-size:.9rem}
.tile[data-k="portfolio"] .vis{background-position:35% center}   /* gezicht in beeld bij bijsnijden */
@supports (animation-timeline:view()){
  .tile .vis{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes reveal{from{filter:brightness(.25)}to{filter:brightness(1)}}
}
/* kleine tegels: drie naast elkaar binnen de marges, tekst onder het beeld */
.tiles-row{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) var(--g);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.tile.small{aspect-ratio:auto;min-height:0;max-height:none;overflow:visible}
.tile.small::before{content:none}
.tile.small .vis{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.tile.small .cap{position:static;background:none;padding:16px 0 0}
.tile.small .t{font-size:clamp(1.4rem,2.4vw,2rem)}
@media(max-width:700px){.tile{aspect-ratio:auto;min-height:0;height:75svh}.tile.small{height:auto}.tiles-row{grid-template-columns:1fr;gap:40px}}
@media(prefers-reduced-motion:reduce){.tile .vis,.tile .cap::after{transition:none;animation:none}}

/* ---------- pagina's ---------- */
.page{max-width:var(--max);margin:0 auto;padding:64px var(--g) 96px;width:100%}
h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:500;letter-spacing:-.03em;line-height:1;margin-bottom:24px}
h2{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:400;margin-bottom:10px}
.lead{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:32px;max-width:40ch}.lead.one{margin-top:48px}
.label{font-family:var(--mono);font-size:.78rem;margin-bottom:24px;color:var(--mute)}
.label a{text-decoration:none}.label a:hover{color:var(--fg)}
.label.end{margin:64px 0 0}
.note{margin-top:24px;font-size:.85rem}
@media(max-width:700px){.page{padding-top:40px;padding-bottom:64px}}

/* lijsten (portfolio, diensten) */
.list{border-top:1px solid var(--line);margin:40px calc(-1*var(--g)) 0}
.row{display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,6fr) 110px;gap:16px;align-items:baseline;padding:24px var(--g);border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,color .2s}
a.row:hover{background:var(--fg);color:var(--bg)}
a.row:hover .d,a.row:hover .n{color:var(--bg)}
.row .n{font-family:var(--mono);font-size:.78rem;color:var(--mute)}
.row .t{font-size:clamp(1.3rem,3.2vw,2.2rem);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.row .d{color:var(--mute);font-size:.95rem;max-width:52ch}
.row .a{font-family:var(--mono);white-space:nowrap;font-size:.78rem;justify-self:end}
.row .a.todo{outline:none;border:1px dashed #5a5a5a;padding:2px 8px}
.row.big{padding-top:36px;padding-bottom:36px}
.row .extra{display:block;margin-top:8px;font-size:.88rem}
.row .a.tag-op{color:var(--mute);border:1px solid var(--line);padding:2px 8px;align-self:center}
.row.soon .t{color:var(--mute)}
@media(max-width:700px){.row{grid-template-columns:32px minmax(0,1fr) auto;gap:6px 12px;padding-top:20px;padding-bottom:20px}.row .d{grid-column:2/4;grid-row:2}.row.big{padding-top:28px;padding-bottom:28px}}

/* portfolio: projectkaarten */
.group{margin-top:clamp(48px,6vw,80px)}
.group-h{border-top:1px solid var(--line);padding-top:14px;margin-bottom:24px}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,48px) clamp(16px,2.5vw,32px)}
.project{display:block;text-decoration:none}
.project .vis{aspect-ratio:16/9;background:center/cover no-repeat;border:1px solid var(--line);overflow:hidden;transition:transform .8s ease,filter .4s;filter:brightness(.85)}
.project .vis{position:relative;display:grid;place-items:center}
.play-ico{width:64px;height:64px;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center;padding-left:4px;font-size:1.1rem;background:rgba(0,0,0,.35);opacity:0;transform:scale(.92);transition:opacity .3s,transform .3s,background .3s}
a.project:hover .play-ico,a.project:focus-visible .play-ico{opacity:1;transform:none}
a.project:hover .play-ico{background:var(--fg);color:var(--bg)}
@media(hover:none){.play-ico{opacity:.85;transform:none}}
.project .vis.empty{background:repeating-linear-gradient(0deg,#0c0c0c 0 30px,#1c1c1c 30px 31px)}
a.project:hover .vis{filter:brightness(1);transform:scale(1.015)}
.project .cap{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding-top:16px}
.project .t{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.project .d{grid-row:2;color:var(--mute);font-size:.92rem;margin-top:4px}
.project .d .todo{font-size:.85rem}
.project .a{grid-row:1/3;grid-column:2;font-family:var(--mono);font-size:1rem;transition:transform .3s}
a.project:hover .a{transform:translateX(6px)}
.project .a.soon{font-size:.72rem;color:var(--mute);border:1px dashed #5a5a5a;padding:2px 8px;align-self:center}
.project.soon .t{color:var(--mute)}
@media(max-width:1000px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.projects{grid-template-columns:1fr}.group{margin-top:40px}}
/* videospeler als laag */
.player{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--fg);display:none;place-items:center}
.player[open]{display:grid;animation:fade .3s ease}
.player::backdrop{background:rgba(0,0,0,.92)}
.player-in{width:min(1280px,calc(100vw - 2*var(--g)),calc((100svh - 120px)*16/9))}
.player-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.player-t{color:var(--mute)}
.player-x{font:inherit;text-transform:inherit;letter-spacing:inherit;background:none;border:1px solid var(--line);color:var(--fg);padding:6px 12px;cursor:pointer}
.player-x:hover{border-color:var(--fg)}
.player-v{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.player-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
html:has(.player[open]){overflow:hidden}
@keyframes fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.project .vis,.project .a,.play-ico{transition:none}.player[open]{animation:none}}

/* projectpagina */
.frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:12px;background:#080808}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{width:72px;height:72px;border-radius:50%;border:1px solid var(--fg);background:none;color:var(--fg);font-size:1.3rem;cursor:pointer}
.play:hover{background:var(--fg);color:var(--bg)}
.frame>.todo{font-family:var(--mono);font-size:.8rem}
.kicker{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-bottom:12px}
.still{aspect-ratio:16/9;max-width:640px;margin:0 0 56px;border:1px solid var(--line);background:center/cover no-repeat;display:grid;place-items:center;font-size:.75rem}
.still.todo{outline:none;border:1px dashed #5a5a5a}
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:64px}
.stills div{aspect-ratio:16/9;border:1px dashed var(--line);display:grid;place-items:center;font-size:.75rem;background:center/cover no-repeat}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 64px;margin-bottom:48px}
.cols p{max-width:60ch}
.credits{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;border-top:1px solid var(--line);padding-top:24px;font-size:.95rem}
.credits dt{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);padding-top:.15em}
.credits dd.todo{width:fit-content;outline-offset:2px}
@media(max-width:700px){.stills{gap:6px;margin-bottom:48px}.credits{grid-template-columns:100px 1fr}}

/* over */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:40px}
.portrait{aspect-ratio:4/5;border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;background:center/cover no-repeat}
.about p{margin-bottom:16px;max-width:60ch;font-size:1.05rem}
@media(max-width:700px){.about{grid-template-columns:1fr}.portrait{max-width:280px}}

/* knoppen & contact */
.btn{display:inline-block;border:1px solid var(--fg);padding:12px 24px;text-decoration:none;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}
a.big{font-size:clamp(1.3rem,5vw,3rem);text-decoration:none;border-bottom:1px solid var(--fg);overflow-wrap:anywhere}
a.big:hover{color:var(--mute);border-color:var(--mute)}
#social{margin-top:32px;display:flex;gap:12px 24px;flex-wrap:wrap;font-family:var(--mono);font-size:.85rem}
#social a{color:var(--mute)}#social a:hover{color:var(--fg)}

/* placeholders: gestippeld = nog in te vullen */
.todo{color:var(--mute);outline:1px dashed #5a5a5a;outline-offset:3px}
.stills .todo,.portrait.todo{outline:none;border-color:#5a5a5a}