/* Matthijs Klaassen, portfoliothema.
   Tokens 1-op-1 uit het design system "Captured by Matthijs" (reference/tokens). Breekpunt 768px. */

/* ---------- Lettertypen (zelf gehost) ---------- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrains-mono-pijlen.woff2) format("woff2");unicode-range:U+2190-2193,U+2197}

/* ---------- Tokens ---------- */
:root{
  --foot:61px;
  --ink-950:#0c0a09;--ink-900:#141110;--ink-800:#1d1917;--ink-600:#4a433e;--bone:#e9e5de;--bone-dim:#a39d94;
  --bg:var(--ink-950);--surface:var(--ink-900);--text:var(--bone);--text-muted:var(--bone-dim);--line:rgba(233,229,222,.16);--text-on-light:var(--ink-950);
  --scrim:linear-gradient(to top,rgba(12,10,9,.7),rgba(12,10,9,0) 55%);
  --font:"Archivo","Helvetica Neue",sans-serif;--font-text:"JetBrains Mono",ui-monospace,monospace;
  --fs-xl:clamp(40px,7vw,104px);--fs-l:clamp(28px,3.4vw,48px);--fs-body:16px;--fs-small:12px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:40px;--s-7:64px;--s-8:112px;--r-0:0;--r-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-snap:cubic-bezier(.7,0,.2,1);--dur-fast:120ms;--dur:280ms;--dur-slow:600ms;
  --gutter:clamp(14px,2vw,28px);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 calc(var(--fs-body) - 2px)/1.65 var(--font-text)}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--text-muted)}
::selection{background:var(--bone);color:var(--ink-950)}
img{display:block;-webkit-user-drag:none}
h1,h2,h3,p,figure,ol,ul{margin:0}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid var(--text);outline-offset:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Typografie ---------- */
.t-xl{font:800 var(--fs-xl)/.86 var(--font);font-stretch:62%;letter-spacing:-.01em;text-transform:uppercase}
.t-l{font:700 var(--fs-l)/.95 var(--font);font-stretch:70%;text-transform:uppercase}
.t-body{font:400 calc(var(--fs-body) - 2px)/1.65 var(--font-text);letter-spacing:-.01em}
.t-label{font:400 var(--fs-small)/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.logo-wide{display:inline-block;font-family:var(--font);font-weight:300;font-stretch:125%;letter-spacing:.14em;line-height:1;margin-right:-.14em;text-transform:uppercase;white-space:nowrap}
.only-m{display:none}

/* ---------- Overgang, laadbalk, cursor ---------- */
.fade{position:fixed;inset:0;z-index:50;background:var(--bg);pointer-events:none;opacity:0}
.js .fade{animation:mk-fade-in .35s var(--ease-out) both}
@keyframes mk-fade-in{from{opacity:1}to{opacity:0}}
.loadbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:999;pointer-events:none;transition:opacity .3s}
.loadbar-fill{height:100%;width:8%;background:var(--text);transition:width .25s var(--ease-out)}
.loadbar.is-done{opacity:0}
html:not(.js) .loadbar{display:none}

/* ---------- Navigatie (alle pagina's behalve home) ---------- */
.topnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);color:#fff;mix-blend-mode:difference;pointer-events:none}
.topnav a,.topnav button{color:#fff;pointer-events:auto}
.topnav a:hover{color:#fff}
.topnav-mark .logo-wide{font-size:20px}
.topnav-links{display:flex;gap:24px}
.topnav-toggle{display:none;background:none;border:0;padding:0;min-width:64px;min-height:44px;text-align:right;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.menu-sheet{display:none}

/* ---------- Home ---------- */
.stage{height:100vh;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26vw,380px);overflow:hidden}
.stage-media{position:relative;display:flex;align-items:center;min-width:0}
.strip{position:relative;display:flex;gap:2dvh;width:100%;overflow-x:auto;scrollbar-width:none;padding:0 4vw 0 0;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip-item{flex:none;display:block;scroll-snap-align:center}
.strip-item img{height:68dvh;width:auto}
.stage-meta{position:absolute;left:var(--gutter);right:16px;bottom:20px;display:flex;justify-content:space-between;gap:16px;color:var(--text-muted);pointer-events:none}
.stage-hint{transition:opacity .3s}
.stage.is-moved .stage-hint{opacity:0}
.stage-count{white-space:nowrap}
.stage-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right;padding:28px var(--gutter)}
.stage-name{font-family:var(--font);font-weight:300;font-stretch:125%;font-size:clamp(26px,2.9vw,44px);line-height:1.25;letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase}
.stage-tag{margin-top:14px;line-height:1.6;color:var(--text-muted)}
.stage-menu{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.stage-menu a{font-size:clamp(18px,1.8vw,26px);text-align:right;transition:opacity var(--dur-fast)}
@media (hover:hover){.stage-menu:has(a:hover) a:not(:hover){opacity:.35}}
.stage-total{color:var(--text-muted)}

/* ---------- Overzicht ---------- */
.index{display:grid;grid-template-columns:minmax(240px,28vw) 1fr;height:calc(100vh - var(--foot));overflow:hidden}
.index-list{position:relative;z-index:2;display:flex;flex-direction:column;padding:64px var(--gutter) var(--gutter);overflow:auto}
.tags{display:flex;flex:none;flex-wrap:wrap;gap:16px;margin:0 0 28px}
.tag{flex:none;display:flex;align-items:center;color:var(--text);opacity:.45;transition:opacity var(--dur-fast)}
.tag:hover{color:var(--text)}
.tag span{font:400 12px/1 var(--font-text);letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:4px}
.tag.is-active{opacity:1}
.tag.is-active span{border-bottom-color:var(--text)}
.index-empty{color:var(--text-muted);padding-top:16px}
.index-empty[hidden]{display:none}
.index-rows{list-style:none;padding:0}
.index-rows li[hidden]{display:none}
.row{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding:7px 0;transition:opacity var(--dur-fast)}
@media (hover:hover){.index-rows:has(.row:hover) .row:not(:hover){opacity:.3}}
.index-rows:has(.row:focus-visible) .row:not(:focus-visible){opacity:.3}
.row-num{width:28px;flex:none;color:var(--text-muted)}
.row-main{flex:1;min-width:0}
.row-title{display:block;font-size:clamp(16px,1.7vw,26px)}
.row-meta{display:none}
.row-count{color:var(--text-muted)}
.row-thumb{display:none}
.index-preview{position:relative;overflow:hidden;background:var(--bg)}
.index-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:mk-cut .18s var(--ease-snap)}
@keyframes mk-cut{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
.index-preview-empty{position:absolute;right:16px;bottom:16px;z-index:1;color:#fff;mix-blend-mode:difference}
.index-preview-cap{position:absolute;left:16px;bottom:16px;z-index:1;color:#fff;mix-blend-mode:difference}

/* ---------- Project ---------- */
.project{padding:96px var(--gutter) 0}
.project-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10vh}
.project-title{min-width:0;font-size:clamp(36px,5.5vw,84px)}
.project-meta{text-align:right;line-height:1.7;color:var(--text-muted)}
.project-grid{display:flex;flex-direction:column;gap:12vh}
.project-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.frame{grid-row:1;grid-column:var(--c)/span var(--w);align-self:start;margin-top:var(--dy)}
.frame.is-end{align-self:end}
.frame-link{display:block}
.frame-img{width:100%;height:auto}
.js .frame-img{opacity:0;transform:translateY(32px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.js .frame-img.is-on{opacity:1;transform:none}
.frame-nr{margin-top:8px;color:var(--text-muted)}
.next{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16vh;padding-top:6vh;border-top:1px solid var(--line)}
.next-label{display:block;margin-bottom:12px;color:var(--text-muted)}
.next-title{display:block;font-size:clamp(32px,5vw,76px)}
.next-img{height:22vh;width:auto;max-width:100%}
.project-foot{display:flex;justify-content:space-between;padding:6vh 0 calc(6vh + env(safe-area-inset-bottom))}
.project-foot a{min-height:44px;display:flex;align-items:center}

/* ---------- Viewer ---------- */
.viewer{position:fixed;inset:0;z-index:80;overflow:hidden;background:var(--ink-950);touch-action:pan-y;opacity:0;transition:opacity var(--dur) var(--ease-out)}
.viewer[hidden]{display:none}
.viewer.is-open{opacity:1}
.viewer:focus{outline:none}
.viewer-track{position:absolute;inset:0;display:flex;align-items:center;transition:transform .32s var(--ease-snap)}
.viewer-img{flex:none;height:78vh;width:auto;max-width:none;margin-right:2vh;opacity:.25;transition:opacity .32s}
.viewer-img.is-active{opacity:1}
.viewer-zone{position:absolute;top:0;bottom:0;width:50%;padding:0;border:0;background:none;cursor:pointer}
.viewer-zone.is-prev{left:0;cursor:w-resize}
.viewer-zone.is-next{right:0;cursor:e-resize}
.viewer-zone:focus-visible{outline-offset:-6px}
.viewer-close{position:absolute;z-index:2;top:calc(8px + env(safe-area-inset-top));right:var(--gutter);min-width:64px;min-height:44px;padding:0;border:0;background:none;color:var(--text);text-align:right;cursor:pointer}
.viewer-title,.viewer-count{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));pointer-events:none}
.viewer-title{left:var(--gutter)}
.viewer-count{right:var(--gutter)}

/* ---------- Over mij ---------- */
.about{display:grid;grid-template-columns:1fr minmax(0,34vw);min-height:calc(100dvh - var(--foot))}
.about-text{display:flex;flex-direction:column;justify-content:center;padding:80px var(--gutter) var(--gutter)}
.about-inner{max-width:460px}
.about-kop{margin:0 0 20px}
.about-body p{margin:1em 0}
.about-body p+p{color:var(--text-muted)}
.about-clients{margin-top:24px;line-height:1.7}
.about-clients span{display:block;color:var(--text-muted)}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;margin-top:16px}
.about-photo{background:var(--bg)}
.about-photo img{width:100%;height:100%;object-fit:contain}

/* ---------- Contact ---------- */
.contact{min-height:100dvh;display:flex;flex-direction:column;align-items:flex-start;padding:80px var(--gutter) var(--gutter)}
.contact-inner{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:520px}
.contact-inner>.btn{align-self:flex-start}
.contact-line{margin:0 0 20px;line-height:1.7;color:var(--text-muted)}
.contact-kop{margin:0 0 16px}
.contact-intro p{margin:1em 0;color:var(--text-muted)}
.contact-lines{line-height:2;margin:0 0 20px}
.contact-mail{text-decoration:underline;text-underline-offset:4px;word-break:break-all}
.contact-copied{margin-left:12px;color:var(--text-muted);opacity:0;transition:opacity .2s}
.contact-copied.is-on{opacity:1}
.contact-legal{margin:40px 0 0;line-height:2;color:var(--text-muted)}
.contact-legal a{color:var(--text-muted);text-decoration:underline;text-underline-offset:4px}
.contact-legal a:hover{color:var(--text)}

/* ---------- Knop ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:15px 22px;border-radius:var(--r-pill);border:1px solid var(--bone);background:var(--bone);color:var(--text-on-light);font:400 12px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur) var(--ease-out)}
.btn:hover{color:var(--text-on-light)}
.btn:active{transform:scale(.95)}
.btn--outline{background:transparent;color:var(--text);border-color:var(--text)}
.btn--outline:hover{color:var(--text)}

/* ---------- Eindblok: contact onderaan elke pagina (niet op home en contact) ---------- */
.site-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;box-sizing:border-box;height:var(--foot);margin:0 var(--gutter);padding:8px 0;border-top:1px solid var(--line)}
.site-foot a,.site-foot span{display:inline-flex;align-items:center;min-height:44px}
.site-foot-place{color:var(--text-muted)}

/* ---------- Tekstpagina's ---------- */
.textpage{max-width:760px;padding:120px var(--gutter) 80px}
.textpage-kop{margin:0 0 32px}
.prose p,.prose ul,.prose ol{margin:0 0 1em}
.prose ul,.prose ol{padding-left:1.2em}
.prose h2,.prose h3,.prose h4{margin:40px 0 14px;color:var(--text-muted);font:400 var(--fs-small)/1.4 var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.prose a{text-decoration:underline;text-underline-offset:4px}
.prose strong,.prose b{font-weight:500}

/* ---------- Cookiemelding ---------- */
#cbm-consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));z-index:90;max-width:380px;padding:16px;background:var(--surface);border:1px solid var(--line);font:400 12px/1.6 var(--font-text);letter-spacing:-.01em;opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
#cbm-consent[hidden]{display:none}
#cbm-consent.is-open{opacity:1;transform:none}
#cbm-consent p{margin:0 0 12px}
.cbm-consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cbm-consent-actions button{min-height:44px;padding:0 18px;border-radius:var(--r-pill);font:400 12px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out)}
.cbm-consent-actions button:active{transform:scale(.95)}
.cbm-consent-actions [data-cbm-consent=granted]{background:var(--bone);color:var(--text-on-light);border:1px solid var(--bone)}
.cbm-consent-actions [data-cbm-consent=denied]{background:transparent;color:var(--text);border:1px solid var(--text)}
.cbm-consent-actions a{display:inline-flex;align-items:center;min-height:44px;margin-left:4px;color:var(--text-muted);font:400 12px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.menu-sheet.is-open~#cbm-consent{visibility:hidden}

/* ---------- Mobiel ---------- */
@media (max-width:768px){
  .only-d{display:none}
  .only-m{display:inline}

  .topnav{height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0}
  .topnav-mark .logo-wide{font-size:14px}
  .topnav-links{display:none}
  .topnav-toggle{display:block}
  .topnav.is-open{mix-blend-mode:normal}
  .menu-sheet{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:0 var(--gutter) calc(32px + env(safe-area-inset-bottom));background:var(--bg);opacity:0;visibility:hidden;transition:opacity .28s var(--ease-out),visibility 0s linear .28s}
  .menu-sheet.is-open{opacity:1;visibility:visible;transition:opacity .28s var(--ease-out)}
  .menu-sheet a{font-size:clamp(30px,10vw,44px);padding:8px 0;min-height:44px}

  .stage{height:100dvh;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"name label" "media media" "menu menu";column-gap:16px;row-gap:12px;padding:calc(20px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom))}
  .stage-side{display:contents}
  .stage-title{grid-area:name;padding-left:var(--gutter);text-align:left}
  .stage-name{margin-right:0;font-size:clamp(20px,6.4vw,28px)}
  .stage-tag{margin-top:10px}
  .stage-label{grid-area:label;align-self:start;padding:4px var(--gutter) 0 0;text-align:right;color:var(--text-muted)}
  .stage-media{grid-area:media;display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:0}
  .strip{flex:0 1 auto;height:54dvh;min-height:0;gap:1.2dvh;padding:0 var(--gutter);scroll-snap-type:x proximity}
  .strip-item img{height:100%}
  .stage-meta{position:static;flex:none;padding:14px var(--gutter) 0}
  .stage-menu{grid-area:menu;align-items:stretch;gap:0;padding:0 var(--gutter)}
  .stage-menu a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--line);font-size:clamp(20px,6vw,26px);text-align:left}
  .stage-total{display:none}

  .index{display:block;height:auto;min-height:100dvh;overflow:visible;padding:72px var(--gutter) 40px}
  .index-list{display:block;padding:0;overflow:visible}
  .tags{flex-wrap:nowrap;gap:24px;margin:0 calc(-1*var(--gutter)) 8px;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
  .tags::-webkit-scrollbar{display:none}
  .tag{min-height:44px}
  .row{align-items:center;gap:14px;min-height:64px;padding:12px 0}
  .row-num{width:24px}
  .row-title{font-size:clamp(20px,6vw,26px)}
  .row-meta{display:block;margin-top:6px;color:var(--text-muted)}
  .row-count{display:none}
  .row-thumb{display:block;flex:none;height:64px;width:auto;max-width:34vw}
  .index-preview{display:none}

  .project{padding-top:80px}
  .project-head{margin-bottom:6vh}
  .project-title{font-size:clamp(40px,13vw,64px)}
  .project-grid{gap:5vh}
  .project-row{display:contents}
  .frame{margin-top:0}
  .next{flex-direction:column;align-items:flex-start;gap:20px;margin-top:10vh}
  .next-img{height:28vh}

  .viewer-img{height:64dvh}

  .about{grid-template-columns:1fr;min-height:100dvh}
  .about-text{padding:88px var(--gutter) 40px}
  .about-photo img{height:auto}

  .contact{padding:88px var(--gutter) 40px}
  .contact-tel{display:inline-block;min-height:44px}

  .textpage{padding:88px var(--gutter) 40px}

  .site-foot{height:auto;gap:0 20px;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
  .about+.site-foot{margin-top:40px}
}