:root{
  --bg:#d9e7e4; --hi:#f6fffd; --lo:#a9c0bc;
  --ink:#123633; --muted:#486864; --accent:#0d6e66; --fill:#2aa597; --well:#cfdfdb;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1c2928; --hi:#283b39; --lo:#0f1817; --ink:#dcefeb; --muted:#9db9b4; --accent:#57c3b4; --fill:#3fb3a4; --well:#182322; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Lexend,system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}

/* het materiaal: --e is de hoogte (0 = vlak in het oppervlak, 1 = volledig opgerezen, negatief = ingedrukt) */
.m{--e:1;background:var(--bg);
  box-shadow: calc(var(--e)*10px) calc(var(--e)*10px) calc(var(--e)*20px) var(--lo), calc(var(--e)*-10px) calc(var(--e)*-10px) calc(var(--e)*20px) var(--hi)}
.in{background:var(--well);box-shadow:inset 6px 6px 12px var(--lo),inset -6px -6px 12px var(--hi)}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}

/* opening */
.intro{min-height:100svh;display:grid;place-items:center;padding:24px 16px;position:relative}
.introcard{border-radius:40px;padding:48px;max-width:960px;width:100%;display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.portret{width:220px;height:220px;border-radius:50%;padding:14px}
.portret img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:8px 8px 16px var(--lo),-8px -8px 16px var(--hi)}

.intro h1{font-size:clamp(44px,6.6vw,80px);line-height:1;font-weight:700;letter-spacing:-1.5px;margin:0 0 18px}
.intro h1 .w{display:inline-block}
.intro .lead{font-size:clamp(17px,2.2vw,21px);color:var(--muted);margin:0;max-width:40ch}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.btn{--e:1;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:0;font:500 16px/1 Lexend,system-ui,sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;transition:--e .2s, transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);background:var(--well);box-shadow:inset 6px 6px 12px var(--lo),inset -6px -6px 12px var(--hi)}
.btn.primary{color:var(--accent)}
.hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hint .knob{width:28px;height:44px;border-radius:16px;position:relative}
.hint .knob::after{content:"";position:absolute;left:50%;top:9px;width:6px;height:10px;border-radius:3px;background:var(--accent);transform:translateX(-50%);animation:scrollhint 1.8s ease-in-out infinite}
@keyframes scrollhint{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* het verhaal (vastgepind) */
.story{position:relative;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 32px}
.chapters{position:relative;height:260px}
.chapter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.chapter .step{color:var(--accent);font-weight:500;font-size:15px;margin:0 0 8px}
.chapter h2{font-size:clamp(30px,4.2vw,48px);line-height:1.08;font-weight:700;letter-spacing:-.6px;margin:0 0 14px}
.chapter p{margin:0;color:var(--muted);max-width:38ch;font-size:18px}
.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:470px;justify-self:center;border-radius:40px;padding:34px;overflow:hidden}
/* labo-plaat */
.plate{position:absolute;inset:34px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);gap:12px}
.wellc{border-radius:50%;position:relative;overflow:hidden;aspect-ratio:1/1;width:100%;max-height:100%;align-self:center;justify-self:center}
.wellc i{position:absolute;inset:20%;border-radius:50%;background:var(--fill);transform:scale(0);box-shadow:0 0 8px var(--fill)}
/* serverlades */
.rack{position:absolute;inset:34px;display:grid;grid-template-rows:repeat(6,1fr);gap:12px}
.drawer{--e:0;border-radius:16px;display:flex;align-items:center;gap:10px;padding:0 18px}
.drawer b{width:10px;height:10px;border-radius:50%;background:var(--fill);box-shadow:0 0 10px 2px var(--fill);animation:led 2.4s ease-in-out infinite}
.drawer:nth-child(2n) b{animation-delay:.6s}.drawer:nth-child(3n) b{animation-delay:1.2s}
@keyframes led{0%,100%{opacity:1}50%{opacity:.35}}
.drawer s{flex:1;height:8px;border-radius:4px;background:var(--well);box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
/* code-panelen */
.code{position:absolute;inset:34px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:16px}
.pane{--e:0;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:9px;opacity:0}
.pane.wide{grid-column:1/3}
.pane s{display:block;height:9px;border-radius:5px;background:var(--well);box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
.pane s.a{background:var(--fill);box-shadow:0 0 8px var(--fill)}
/* mainframe-kast */
.frame{position:absolute;inset:34px;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0}
.tower{--e:0;width:28%;height:100%;border-radius:22px;padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.tower span{flex:1;border-radius:8px;display:flex;align-items:center;padding:0 9px}
.tower span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fill);box-shadow:0 0 9px 2px var(--fill);animation:led 1.8s ease-in-out infinite}
.tower span:nth-child(2n)::before{animation-delay:.5s}.tower span:nth-child(3n)::before{animation-delay:1s}
.tower.mid{height:100%}.tower.side{height:86%}


/* indrukbare tegels */
.sec-sub{margin:-18px 0 28px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.tile{border-radius:30px;overflow:hidden;will-change:transform}
.tile{text-decoration:none;color:inherit;display:block}
.tilehead{box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:64px 1fr 40px;gap:18px;align-items:center;padding:26px;border-radius:30px;transition:box-shadow .15s ease, background .15s ease}
.tilehead:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.tilehead{transition:box-shadow .2s ease, background .2s ease, transform .2s ease}
.tilehead.pressing{background:var(--well);box-shadow:inset 12px 12px 22px var(--lo),inset -10px -10px 20px var(--hi);transform:scale(.985)}
.tilehead.pressing .pico{transform:translate(3px,3px)}
.tilehead.pressing .go{transform:translate(6px,-6px)}
.pico{transition:transform .2s ease}
.tile:hover .go{transform:translate(2px,-2px)}
.tt{display:flex;flex-direction:column;gap:4px;min-width:0}
.tname{font-size:21px;font-weight:600;line-height:1.2}
.tshort{color:var(--muted);font-size:14.5px}
.go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--accent);transition:transform .25s ease}
.go svg{width:18px;height:18px}
@media (max-width:820px){.tiles{grid-template-columns:1fr}.tilehead{padding:20px;grid-template-columns:56px 1fr 36px}}
@media (prefers-reduced-motion:reduce){.tilehead,.go{transition:none}}

/* projecten en rest */
.wrap{max-width:900px;margin:0 auto;padding:40px 22px 90px}
section{margin-top:96px}
.sec-title{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.5px;margin:0 0 30px;line-height:1.1}
.projects{display:grid;gap:30px}
.project{border-radius:28px;padding:30px;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
.pico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:var(--accent)}
.project h3{margin:0;font-size:22px;font-weight:600}
.project p{margin:8px 0 14px;color:var(--muted);max-width:56ch}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:999px}
.status{font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.status .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.status.live{color:var(--accent)} .status.wip{color:var(--muted)}
.status .icon svg{width:16px;height:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{border-radius:26px;padding:28px}
.panel h3{margin:0 0 4px;font-size:19px;font-weight:600}
.panel .when{color:var(--muted);font-size:14.5px;margin:0 0 10px}
.panel p{margin:0;color:var(--muted)}
.skills{display:flex;flex-wrap:wrap;gap:26px 24px;padding:6px 4px}
.skills .chip{font-size:15px;padding:10px 17px}
.skill{--e:.7;display:inline-flex;align-items:center;gap:10px}
.skill svg{width:20px;height:20px;color:var(--accent);flex:none}
.contact{border-radius:40px;padding:56px 40px;text-align:center}
.contact h2{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.8px;margin:0 0 12px;line-height:1.05}
.contact p{margin:0 auto 30px;color:var(--muted);max-width:44ch}
.contact .actions{justify-content:center}
footer{margin-top:44px;color:var(--muted);font-size:14px;text-align:center}

@media (max-width:820px){
  .story{grid-template-columns:1fr;grid-template-rows:auto auto;gap:18px;padding:70px 18px 24px;align-content:center}
  .chapters{height:190px;order:2}
  .stage{max-width:330px;padding:22px;border-radius:30px}
  .plate,.rack,.code,.frame{inset:22px}.plate{gap:8px}.rack{gap:9px}
  .chapter p{font-size:16px}
  .introcard{padding:32px 22px;border-radius:32px;grid-template-columns:1fr;gap:26px}
  .portret{width:150px;height:150px;padding:10px}
  .hint{display:none}
  .intro{min-height:auto;padding:28px 16px 40px}
  .cols{grid-template-columns:1fr}
  .project{grid-template-columns:1fr;padding:24px}
  .contact{padding:40px 22px}
  section{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .hint .knob::after,.drawer b,.tower span::before{animation:none}
  .btn{transition:none}.btn:hover{transform:none}
}

/* projectpagina */
.back{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:500;margin:28px 0 0}
.back svg{width:18px;height:18px}
.phero{border-radius:36px;padding:40px;margin-top:26px;display:grid;grid-template-columns:84px 1fr;gap:26px;align-items:center}
.phero .pico{width:84px;height:84px;border-radius:24px}
.phero .pico svg{width:34px;height:34px}
.phero h1{font-size:clamp(32px,5vw,54px);line-height:1.05;font-weight:700;letter-spacing:-.8px;margin:0 0 8px}
.phero p{margin:0;color:var(--muted);font-size:18px}
.pbody{margin-top:44px;display:grid;gap:30px}
.pblock{border-radius:28px;padding:30px}
.pblock h2{font-size:22px;font-weight:600;margin:0 0 12px}
.pblock p{margin:0 0 12px;color:var(--muted);max-width:64ch}
.pblock p:last-child{margin:0}
.media{border-radius:28px;padding:30px;display:grid;place-items:center;min-height:180px;color:var(--muted);text-align:center}
.pnav{display:flex;justify-content:space-between;gap:16px;margin-top:44px;flex-wrap:wrap}
@media (max-width:820px){.phero{grid-template-columns:1fr;padding:28px 22px}.pblock,.media{padding:24px 22px}}

.shots{display:grid;grid-template-columns:2.2fr 1fr;gap:26px;align-items:end}
.frame-d{border-radius:24px;padding:12px}
.frame-d img{display:block;width:100%;border-radius:14px}
.frame-p{border-radius:34px;padding:10px;max-width:220px;justify-self:center}
.frame-p img{display:block;width:100%;border-radius:26px}
.shots.solo{grid-template-columns:1fr}
.shots figcaption{grid-column:1/-1;color:var(--muted);font-size:14px}
@media (max-width:820px){.shots{grid-template-columns:1fr}}

html.herstel body{visibility:hidden}

/* blokken op de projectpagina rijzen na de overgang een voor een op */
.pbody > *, .pnav{animation:rijs .6s cubic-bezier(.2,.7,.2,1) both}
.pbody > *:nth-child(1){animation-delay:.35s}.pbody > *:nth-child(2){animation-delay:.45s}.pbody > *:nth-child(3){animation-delay:.55s}.pbody > *:nth-child(4){animation-delay:.65s}.pnav{animation-delay:.75s}
.back{animation:rijs .5s ease .3s both}
.phero{animation:rijs .55s cubic-bezier(.2,.7,.2,1) .05s both}
@keyframes rijs{from{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.pbody > *,.pnav,.back,.phero{animation:none}}

/* eigen overgang: de tegel groeit uit tot hij het scherm vult */
.groei{position:fixed;z-index:50;margin:0;pointer-events:none;background:var(--bg);border-radius:30px;
  box-shadow:10px 10px 20px var(--lo),-10px -10px 20px var(--hi);overflow:hidden}
.groei .tilehead{height:100%}