:root{color-scheme:light;--ink:#1d1d1f;--muted:#686873;--bg:#f5f5f7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}.header{position:sticky;top:0;z-index:10;background:#f5f5f7df;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid #1d1d1f0a}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:27px;font-weight:750;letter-spacing:-1.4px}.brand-dot{color:#6764dc}.nav-link{font-size:13px;color:#575760;min-height:44px;display:flex;align-items:center;gap:15px}.intro{padding:72px 0 60px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#7874dd}h1{font-size:clamp(36px,4.5vw,57px);letter-spacing:-2.7px;line-height:1.12;margin:25px 0 25px;font-weight:700}h1>span{color:#85858c}.lead{font-size:17px;color:#62626c;line-height:1.7;letter-spacing:-.15px;max-width:720px;margin:0 0 12px}.interests{font-size:15px;max-width:730px}.intro-link{display:inline-flex;align-items:center;gap:17px;font-size:12px;min-height:44px;margin-top:10px;color:#52525c}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.section-label h2{font-size:16px;letter-spacing:-.3px;margin:0;font-weight:600}.section-label>span{font-size:11px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;grid-auto-rows:440px}.card{border-radius:27px;overflow:hidden;position:relative;display:flex;flex-direction:column;background:white;box-shadow:0 5px 18px #25254704;transition:transform .35s,box-shadow .35s;isolation:isolate;min-width:0}.card:hover{transform:translateY(-5px);box-shadow:0 17px 35px #25254712}a:focus-visible{outline:3px solid #0071e3;outline-offset:5px}.portrait,.icon-stage,.cinema-image,.logo-stage{height:225px;flex:0 0 225px;position:relative;overflow:hidden;display:grid;place-items:center}.portrait{background:#e9e9f5}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 12%;transition:transform .5s}.personal:hover .portrait img{transform:scale(1.025)}.card-content{padding:24px 26px;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:stretch;min-height:0}.category{font-size:9px;letter-spacing:1.3px;font-weight:650;color:#62626e}h3{font-size:26px;line-height:1.15;letter-spacing:-.8px;margin:10px 0}.card p{font-size:13px;line-height:1.6;color:#62626d;margin:0}.card-link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;font-size:12px;font-weight:550;min-height:41px}.arrow{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#00000007;font-size:17px;transition:background .3s,transform .3s}.card:hover .arrow{background:#00000012;transform:rotate(5deg)}.social-badge{position:absolute;right:20px;top:20px;background:#fffc;color:#424272;display:grid;place-items:center;width:29px;height:29px;font-size:18px;font-weight:700;border-radius:8px;z-index:2}.instagram svg{width:20px;height:20px}.map{background:#f0f0e8}.spool{background:#eeeef9}.app-icon{width:119px;height:119px;border-radius:28px;box-shadow:0 17px 26px #242e2925,0 1px 2px #0002;transition:transform .5s;object-fit:cover}.card:hover .app-icon{transform:translateY(-5px) rotate(-4deg)}.map-lines{position:absolute;inset:-30px -90px 190px;opacity:.3;background:repeating-radial-gradient(ellipse at 62% 30%,transparent 0 22px,#a6ae8d 23px 24px,transparent 25px 42px);transform:rotate(-25deg)}.spool-rings{position:absolute;top:0;left:10%;height:235px;width:80%;background:repeating-radial-gradient(circle at center,transparent 0 27px,#b6b5d22a 28px 29px,transparent 30px 44px)}.cinema{background:#0b0b0e;color:#f5f5f7}.cinema-image{background:radial-gradient(ellipse at center,#212126,#090909)}.cinema-image img{display:block;width:100%;height:100%;object-fit:contain}.cinema .category{color:#a6a6b0}.cinema p{color:#b3b3bd}.cinema .arrow{background:#ffffff16}.cinema:hover .arrow{background:#ffffff2a}.print{background:#e6edf0}.logo-stage{background:radial-gradient(ellipse at center,#fff9,transparent 70%)}.logo-stage img{width:165px;height:165px;object-fit:contain;transition:transform .5s}.print:hover .logo-stage img{transform:rotate(-5deg) scale(1.04)}.closing{text-align:center;padding:43px 0}.closing p{font-size:12px;line-height:1.7;margin:0;color:#797982}.footer{border-top:1px solid #dddde2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:28px 32px}.footer .brand{font-size:20px}.footer p,.footer>span{font-size:10px;color:#70707b}.skip{position:fixed;left:20px;top:-90px;z-index:20;padding:15px;background:white;border-radius:12px}.skip:focus{top:10px}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.wrap{width:calc(100% - 40px)}.nav{height:66px}.brand{font-size:25px}.nav-link{font-size:11px;gap:9px}.intro{padding:42px 0}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:37px;letter-spacing:-1.7px;margin:22px 0}.lead{font-size:15px;line-height:1.7}.interests{font-size:14px}.section-label{margin-bottom:17px}.section-label h2{font-size:15px}.section-label>span{display:none}.grid{grid-template-columns:1fr;grid-auto-rows:440px;gap:20px}.card{border-radius:24px}.card-content{padding:23px 25px}.footer p{display:none}.footer{padding-block:25px}.footer>span{font-size:10px}.closing{padding:33px 0}}@media(max-width:360px){h1{font-size:32px}.wrap{width:calc(100% - 32px)}.card-content{padding-inline:22px}.card p{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Een vaste portretmaat houdt ook de baard en het volledige hoofd in beeld. */
.portrait{background:#b4c4f7;align-items:start}.portrait img{width:260px;height:260px;max-width:100%;object-fit:contain;object-position:center top}
/* Beelden en tegel vormen één geheel, zonder losse afbeeldingsvlakken. */
.personal{background:linear-gradient(150deg,#edf0ff 0%,#e5e8f7 100%)}
.portrait{background:transparent;align-items:end;overflow:hidden}
.portrait img{width:245px;height:245px;max-width:90%;object-fit:contain;object-position:center bottom;align-self:end}
.cinema{background:#030508}
.cinema-image{background:transparent}
.cinema-image img{width:100%;height:100%;object-fit:cover;object-position:center;mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
@media(max-width:600px){.desktop-break{display:none}}
.portrait img{mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}

/* Compacte introductie legt de nadruk op de projecten. */
.compact-intro{padding:54px 0 40px}.compact-intro h1{font-size:clamp(30px,3.5vw,44px);letter-spacing:-1.7px;margin:0 0 14px}.compact-intro .lead{margin:0;font-size:16px}@media(max-width:600px){.compact-intro{padding:37px 0 32px}.compact-intro h1{font-size:31px;letter-spacing:-1.2px}.compact-intro .lead{font-size:14px}}