/* Portfolio design tokens — v1 */
:root{color-scheme:light;--bg:#f7f7f5;--surface:#fff;--fg:#141414;--muted:#626262;--line:#d9d9d5;--inverse:#fff;--space-0:4px;--space-1:8px;--space-2:16px;--space-3:32px;--space-4:48px;--space-5:64px;--space-6:96px;--radius:16px}
:root[data-theme="dark"]{color-scheme:dark;--bg:#101010;--surface:#1b1b1b;--fg:#f4f4f2;--muted:#b1b1ac;--line:#383838;--inverse:#101010}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--fg);outline-offset:4px}.shell{max-width:1320px;margin:auto;padding:0 32px}.top{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--line);gap:24px}.brand{text-decoration:none;font-size:20px;font-weight:850;letter-spacing:-.065em;white-space:nowrap}.nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.nav a{text-decoration:none;font-size:13px;font-weight:650}.nav a:hover{text-decoration:underline}.lang{border:1px solid var(--line);border-radius:50px;padding:7px 12px}.theme-toggle{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:100px;padding:7px 12px;cursor:pointer;font-size:12px;font-weight:700}.hero{padding:clamp(88px,12vw,170px) 0 120px}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}.hero h1{font-size:clamp(56px,9vw,132px);line-height:.98;letter-spacing:-.045em;max-width:1100px;margin:24px 0 40px;font-weight:750}.intro{max-width:710px;color:var(--muted);font-size:clamp(18px,2vw,23px);line-height:1.55}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}.button{display:inline-block;padding:14px 23px;border-radius:100px;background:var(--fg);color:var(--inverse);text-decoration:none;font-size:13px;font-weight:750;transition:transform .2s ease}.button:hover{transform:translateY(-2px)}.button.secondary{background:transparent;color:var(--fg);border:1px solid var(--fg)}.section{padding:96px 0;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}.section h2{font-size:clamp(38px,5.5vw,76px);letter-spacing:-.075em;line-height:1.05;margin:12px 0 32px;font-weight:740}.section p{max-width:740px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}.tile{min-height:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s ease,border-color .25s ease}.tile:hover{transform:translateY(-4px);border-color:var(--muted)}.tile .num{color:var(--muted);font-size:12px;letter-spacing:.08em}.tile h3{font-size:clamp(26px,3.5vw,46px);line-height:1.08;letter-spacing:-.065em;margin:0}.tile p{font-size:14px;margin:16px 0 0}.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:40px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
@media(max-width:760px){.shell{padding:0 20px}.top{align-items:flex-start;flex-wrap:wrap}.nav{gap:14px}.nav a{font-size:12px}.hero{padding:88px 0 92px}.grid{grid-template-columns:1fr}.tile{min-height:240px}.section{padding:64px 0}}@media(max-width:400px){.hero h1{font-size:52px}.nav{gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile,.button{transition:none}.tile:hover,.button:hover{transform:none}}

/* Project gallery */
.work-showcase{padding-top:100px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 22px;margin-top:48px}.project-card{min-width:0}.project-art{min-height:330px;aspect-ratio:1.45;display:flex;flex-direction:column;justify-content:space-between;padding:28px;overflow:hidden;border-radius:var(--radius);background:#e4e4df;color:#161616}.project-art span{font-size:12px;font-weight:800;letter-spacing:.15em}.project-art strong{font-size:clamp(36px,5vw,75px);letter-spacing:-.085em;line-height:1;max-width:90%;overflow-wrap:anywhere}.art-coolblue{background:#ffdc00}.art-wehkamp{background:#e6e0ef}.art-vliegtickets{background:#d4e6ee}.art-hampshire{background:#e4dfd4}.art-kvk{background:#d6e7da}.art-travel{background:#e9ded4}.project-meta{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.project-card h3{font-size:clamp(23px,2.6vw,36px);letter-spacing:-.055em;line-height:1.15;margin:12px 0}.project-card p{font-size:14px;max-width:540px;margin:0;color:var(--muted)}@media(max-width:760px){.project-grid{grid-template-columns:1fr;gap:40px}.project-art{min-height:250px}.work-showcase{padding-top:70px}}

/* Keep large display letters readable without collisions */
.hero h1{letter-spacing:-.035em;overflow-wrap:normal;word-break:normal;font-weight:750}
@media(max-width:760px){.hero h1{letter-spacing:-.04em;line-height:1.04}}

/* Spacing system: 4 / 8 / 16 / 32 / 48 / 64 / 96px */
.shell{padding-inline:var(--space-3)}.top{padding-block:var(--space-2);gap:var(--space-2)}.nav{gap:var(--space-2)}.hero{padding-block:var(--space-6)}.hero h1{margin-block:var(--space-3)}.actions{gap:var(--space-2);margin-top:var(--space-3)}.section{padding-block:var(--space-6)}.section h2{margin-block:var(--space-2) var(--space-3)}.grid{gap:var(--space-2);margin-top:var(--space-3)}.tile{padding:var(--space-3)}.tile p{margin-top:var(--space-2)}.footer{gap:var(--space-2);padding-block:var(--space-3)}.work-showcase{padding-top:var(--space-6)}.project-grid{gap:var(--space-4) var(--space-2);margin-top:var(--space-4)}.project-art{padding:var(--space-3)}.project-meta{gap:var(--space-2);margin-top:var(--space-2)}.project-card h3{margin-block:var(--space-2)}
@media(max-width:760px){.shell{padding-inline:var(--space-2)}.top{gap:var(--space-2)}.nav{gap:var(--space-2)}.hero{padding-block:var(--space-5)}.section{padding-block:var(--space-4)}.project-grid{gap:var(--space-4)}.work-showcase{padding-top:var(--space-4)}}

/* Typography system — consistent, readable display titles site-wide */
:root{--tracking-display:-.025em;--tracking-heading:-.015em;--heading-leading:1.12}
.hero h1,.section h2,.tile h3,.project-card h3,.project-art strong{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;font-kerning:normal;font-variant-ligatures:common-ligatures;overflow-wrap:break-word;word-break:normal;hyphens:none}
.hero h1{font-weight:700;letter-spacing:var(--tracking-display);line-height:1.08;font-size:clamp(48px,7.5vw,108px);max-width:1100px}
.section h2{font-weight:700;letter-spacing:var(--tracking-heading);line-height:var(--heading-leading)}
.tile h3,.project-card h3{font-weight:700;letter-spacing:var(--tracking-heading);line-height:1.18}
.project-art strong{font-weight:700;letter-spacing:var(--tracking-heading);line-height:1.12}
@media(max-width:760px){.hero h1{font-size:clamp(42px,10vw,72px);letter-spacing:-.02em;line-height:1.1}.section h2{line-height:1.15}}

/* Sticky top navigation and smooth section navigation */
.top{position:sticky;top:0;z-index:100;background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background-color .25s ease,box-shadow .25s ease;border-bottom:1px solid var(--line)}
html{scroll-padding-top:112px}
section[id]{scroll-margin-top:112px}
@media(max-width:760px){html{scroll-padding-top:160px}section[id]{scroll-margin-top:160px}}
@media(prefers-reduced-motion:reduce){.top{transition:none}}

/* Project detail navigation and content */
.project-link{display:block;text-decoration:none;color:inherit}.project-link:focus-visible{outline:3px solid var(--fg);outline-offset:8px;border-radius:var(--radius)}.project-link:hover .project-art{filter:brightness(.96)}.project-link:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}.case-hero{padding-block:var(--space-6)}.case-hero h1{font-size:clamp(56px,10vw,140px)}.case-back{display:inline-block;margin-top:var(--space-4);text-decoration:underline;text-underline-offset:8px}.case-placeholder{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);min-height:320px;display:flex;flex-direction:column;justify-content:space-between}.case-placeholder span{font-size:clamp(32px,6vw,80px);font-weight:700;letter-spacing:-.02em}.case-placeholder p{margin:0}@media(max-width:760px){.case-hero{padding-block:var(--space-5)}.case-placeholder{min-height:240px;padding:var(--space-3)}}

/* Multi-page portfolio */
.inner-hero{padding-block:var(--space-5)}.inner-hero h1{max-width:1000px}.portfolio-more{margin-top:var(--space-4)}.project-grid>.project-link{min-width:0}.project-link .project-card{height:100%}@media(max-width:760px){.inner-hero{padding-block:var(--space-4)}}

/* Design System v2 — typography scale, responsive and shared */
:root{
 --type-h1-home:72px;--type-h1-page:64px;--type-h2:40px;--type-h3:24px;
 --type-intro:20px;--type-body:16px;--tracking-title:-.02em;
}
body{font-size:var(--type-body)}
.hero h1{font-size:var(--type-h1-home);line-height:1.12;letter-spacing:var(--tracking-title)}
.inner-hero h1,.case-hero h1{font-size:var(--type-h1-page);line-height:1.12;letter-spacing:var(--tracking-title)}
.section h2{font-size:var(--type-h2);line-height:1.2;letter-spacing:var(--tracking-title)}
.tile h3,.project-card h3{font-size:var(--type-h3);line-height:1.25;letter-spacing:-.01em}
.intro{font-size:var(--type-intro);line-height:1.55}
@media(max-width:760px){
 :root{--type-h1-home:40px;--type-h1-page:36px;--type-h2:28px;--type-h3:20px;--type-intro:16px}
 .hero h1,.inner-hero h1,.case-hero h1{font-size:var(--type-h1-home)}
 .inner-hero h1,.case-hero h1{font-size:var(--type-h1-page)}
 .section h2{font-size:var(--type-h2)}
 .tile h3,.project-card h3{font-size:var(--type-h3)}
 .intro{font-size:var(--type-intro)}
}

/* Portfolio art direction — neutral surfaces, original work first */
:root{--project-bg:#eeefed;--project-line:#e0e1de;--project-label:#7a7b75}
:root[data-theme="dark"]{--project-bg:#222321;--project-line:#363733;--project-label:#96978f}
.project-art[class*="art-"]{background:var(--project-bg);color:var(--fg);border:1px solid var(--project-line);position:relative;padding:24px;min-height:280px;isolation:isolate}
.project-art>span{font-size:11px;letter-spacing:.1em;color:var(--project-label);position:relative;z-index:2}
.project-art>strong{font-size:clamp(28px,3.6vw,48px);letter-spacing:-.025em;max-width:95%;font-weight:600}
.project-art.has-screen{padding:24px;justify-content:initial}
.project-art.has-screen>img{position:absolute;top:44px;left:8%;width:84%;height:auto;border-radius:5px;box-shadow:0 16px 40px #00000018;z-index:0;transition:transform .35s ease}
.project-art.has-screen>strong{position:absolute;bottom:20px;left:24px;font-size:17px;background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:100px;z-index:2;letter-spacing:-.015em}
.project-link:hover .has-screen>img{transform:translateY(-8px)}
.project-link:hover .project-art{filter:none}.project-art.has-screen>span{background:var(--surface);padding:3px 7px;border-radius:4px;align-self:flex-start}
.project-meta{font-weight:500;letter-spacing:.06em}.project-card p{line-height:1.65}.project-grid{gap:48px 24px}.case-placeholder{background:var(--project-bg)}
.footer{align-items:center}.skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:var(--surface);color:var(--fg);padding:12px 20px}.skip-link:focus{top:16px}
@media(max-width:760px){.project-art[class*="art-"]{min-height:260px}.project-grid{gap:40px}.project-art>strong{font-size:36px}}
@media(prefers-reduced-motion:reduce){.project-art.has-screen>img{transition:none}.project-link:hover .has-screen>img{transform:none}}