/* =========================================================
   Portfolio — fotokopie / scan-collage, ruwe versie
   ========================================================= */

@font-face { font-family: "Reenie Beanie"; src: url("../fonts/reenie-beanie.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "La Belle Aurore"; src: url("../fonts/la-belle-aurore.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #efeeec;
  --paper-hi: #f8f7f5;
  --ink: #121212;
  --soft: #5a5754;
  --green: #2f9c69;
  --blush: #dcc3cd;
  --dash: rgba(18, 18, 18, .35);

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;         /* gedrukte labels */
  --hand: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;                   /* snel ballpoint-gekrabbel */
  --cursive: "La Belle Aurore", "Segoe Script", cursive;                             /* schuin lopend schrift */
  --marker: "Permanent Marker", "Segoe Print", "Marker Felt", cursive;               /* dikke stift */
  --display: "Anton", Impact, "Arial Narrow", sans-serif;                            /* zware, smalle koppen */
  --typed: "Special Elite", "Courier New", Courier, monospace;                       /* typemachine */

  /* snelheid van alle animaties: 1 = oorspronkelijk, lager = sneller (0.75 = een kwart sneller) */
  --tempo: .75;

  --header-h: 60px;
  --maxw: clamp(1120px, 72vw, 1440px);

  /* hero: breedte/hoogte van het portret en de ruimte naar de "spookfoto's" */
  --pw: clamp(250px, 27vw, 360px);
  --ph: calc(var(--pw) * 1.2034);
  --gap: .36;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
html.no-motion { scroll-behavior: auto; }
/* na een klik in het menu krijgt de sectie focus (voor toetsenbordgebruikers), maar zonder kader */
[tabindex="-1"]:focus { outline: none; }

body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--sans);
  color: var(--ink);
  background: radial-gradient(130% 90% at 50% 0, #f8f7f5 0, var(--paper) 55%, #e6e4e1 100%) fixed;
  -webkit-font-smoothing: antialiased;
}

/* korrel van de scanner + kopieerstrepen over de hele pagina */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 199; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0 5.5%, rgba(0, 0, 0, .06) 5.5% calc(5.5% + 2px), transparent calc(5.5% + 2px) 94%,
    rgba(0, 0, 0, .05) 94% calc(94% + 1px), transparent calc(94% + 1px));
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
del { text-decoration: none; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px dashed var(--dash);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }

.brand {
  text-decoration: none; font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.brand small { font: 400 .8rem var(--typed); color: var(--soft); letter-spacing: .04em; margin-left: .7em; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 28px; }
.site-nav a {
  position: relative; display: inline-block; padding: 6px 0; text-decoration: none; white-space: nowrap;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-nav sup { font: 400 .68em var(--typed); color: var(--soft); margin-right: .5em; vertical-align: .45em; }

/* losse galerijpagina: alleen het logo en een link terug */
.back-link {
  margin-left: auto; padding: 6px 0; text-decoration: none; white-space: nowrap;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* taalkeuze: NL · EN · FR (de huidige taal is onderstreept) */
.lang-switch { display: flex; flex: none; gap: 2px; margin-left: 28px; font: 400 .74rem var(--typed); letter-spacing: .08em; }
.lang-switch a { padding: 6px 5px; text-decoration: none; color: var(--soft); }
.lang-switch a:hover, .lang-switch a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lang-switch a[aria-current] { text-decoration-thickness: 1.5px; }

.menu-btn {
  display: none; margin-left: auto; cursor: pointer;
  font: 700 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink); padding: 8px 12px;
}

/* ---------- Herbruikbare onderdelen ---------- */

/* plakbandlabel: zware, smalle drukletters met een misdruk-randje */
.tape {
  display: inline-block; position: relative;
  padding: .38em 1em .3em; margin: 0;
  font: 400 clamp(1.35rem, 3vw, 2rem)/1 var(--display);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  text-shadow: 1.5px 0 rgba(224, 40, 90, .3), -1.5px 0 rgba(0, 140, 220, .28);
  background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .62));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .16), 0 8px 18px -8px rgba(0, 0, 0, .3);
  border-inline: 1px solid rgba(0, 0, 0, .05);
}
/* het naamlabel blijft in nette Helvetica, zoals in het voorbeeld */
.tape-xl {
  font: 700 clamp(1.15rem, 2.5vw, 1.7rem)/1.1 var(--sans); letter-spacing: .015em; text-shadow: none;
  padding: .55em 1.4em; white-space: nowrap;
}

/* handschrift: klein, snel, schuin; elke letter wijkt een beetje af (zie main.js) */
.note {
  font-family: var(--hand); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; letter-spacing: .01em;
  color: var(--ink); rotate: var(--r, 0deg); margin: 0;
  filter: url(#ink);
}
.note .line { display: block; width: fit-content; }
/* dunne handschriften iets vetter, alsof er met een ballpoint wordt gedrukt */
.note, .checklist li, .proj-link { -webkit-text-stroke: .35px currentColor; }
.cur { font-family: var(--cursive); font-size: .8em; letter-spacing: 0; }
.caps { text-transform: uppercase; letter-spacing: .07em; }

.ww { rotate: var(--wr, 0deg); translate: 0 var(--wy, 0); }
.ch { display: inline-block; rotate: var(--cr, 0deg); translate: 0 var(--cy, 0); scale: var(--cs, 1); opacity: var(--co, 1); }

/* element + getekende lijn eromheen */
.write-wrap, .circled { position: relative; display: inline-block; }
.sk {
  fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible; max-width: none; filter: url(#ink);
}
.sk.g, .sk.ring { stroke: var(--green); }

/* doorgestreept: eerst geschreven, daarna weggekrabbeld */
.crossed { position: relative; display: inline-block; text-decoration: none; color: var(--soft); }
.strike { position: absolute; left: -8%; top: 16%; width: 116%; height: 68%; stroke-width: 1.6; pointer-events: none; }

.slug { font: 400 .78rem/1 var(--typed); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }

/* rubberstempel */
.stamp {
  position: absolute; z-index: 4; display: inline-block; padding: .1em .5em .05em;
  font: 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(18, 18, 18, .8); border: 3px solid currentColor; border-radius: 4px;
  rotate: var(--r, -10deg); mix-blend-mode: multiply; filter: url(#ink); pointer-events: none; white-space: nowrap;
}

/* stukje plakband (houdt kaarten en foto's vast) */
.tp {
  position: absolute; z-index: 3; width: 84px; height: 26px;
  background: rgba(238, 228, 170, .55); mix-blend-mode: multiply;
  clip-path: polygon(0 0, 4% 20%, 0 40%, 4% 60%, 0 80%, 3% 100%, 100% 100%, 96% 80%, 100% 60%, 96% 40%, 100% 20%, 97% 0);
}
.tp-l { left: -22px; top: -12px; rotate: -28deg; }
.tp-r { right: -22px; top: -12px; rotate: 24deg; }

/* reuzenwoord als contour achter een sectie */
.bigword {
  position: absolute; z-index: 0; right: -1vw; top: clamp(20px, 4vw, 56px);
  font: 400 clamp(7rem, 24vw, 19rem)/.8 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(18, 18, 18, .08);
  rotate: -5deg; pointer-events: none; user-select: none;
}
.bigword.l { right: auto; left: -1vw; rotate: 4deg; }

/* ---------- Animatiesysteem ----------
   Alles is zichtbaar zonder JS. Met JS (.js) is alles verborgen tot main.js
   het element in volgorde "aanzet" (.is-on). */
.js:not(.ready) [data-anim] { visibility: hidden; animation: failsafe 0s 4s forwards; }
@keyframes failsafe { to { visibility: visible; } }

/* 1. handschrift: elk woord wordt van links naar rechts geschreven, met een korte pen-pauze ertussen */
.ready [data-anim="write"] { display: inline-block; }
.ready .line[data-anim="write"] { display: block; }
.ready [data-anim="write"] .ww {
  display: inline-block;
  clip-path: polygon(-6% -40%, -6% -40%, -9% 140%, -6% 140%);
}
.ready [data-anim="write"].is-on .ww {
  animation: write var(--wl, .5s) calc(var(--delay, 0s) + var(--wd, 0s)) cubic-bezier(.4, .1, .5, 1) both;
}
@keyframes write {
  0%   { clip-path: polygon(-6% -40%, -6% -40%, -9% 140%, -6% 140%); }
  45%  { clip-path: polygon(-6% -40%, 48% -40%, 45% 140%, -6% 140%); }
  55%  { clip-path: polygon(-6% -40%, 53% -40%, 50% 140%, -6% 140%); }
  100% { clip-path: polygon(-6% -40%, 112% -40%, 109% 140%, -6% 140%); }
}

/* 1b. gewone tekst: woord voor woord tevoorschijn */
.ready [data-anim="reveal"] .w { display: inline-block; opacity: 0; translate: 0 .5em; }
.ready [data-anim="reveal"].is-on .w {
  opacity: 1; translate: 0 0;
  transition: opacity calc(.5s * var(--tempo)) ease calc(var(--delay, 0s) + var(--wi, 0) * .035s * var(--tempo)),
              translate calc(.7s * var(--tempo)) cubic-bezier(.2, .8, .2, 1) calc(var(--delay, 0s) + var(--wi, 0) * .035s * var(--tempo));
}

/* 2. pen-lijnen: de streek tekent zichzelf */
.ready [data-anim="draw"]:is(path, line, circle, ellipse, rect, polyline, polygon),
.ready [data-anim="draw"] :is(path, line, circle, ellipse, rect, polyline, polygon) {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
.ready [data-anim="draw"].is-on:is(path, line, circle, ellipse, rect, polyline, polygon),
.ready [data-anim="draw"].is-on :is(path, line, circle, ellipse, rect, polyline, polygon) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, .8s) cubic-bezier(.5, .1, .3, 1)
              calc(var(--delay, 0s) + var(--i, 0) * .04s * var(--tempo));
}

/* 3. plakken: label of strookje wordt vastgeplakt */
.ready [data-anim="stick"] { opacity: 0; translate: 0 -10px; scale: 1.05; }
.ready [data-anim="stick"].is-on {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity calc(.2s * var(--tempo)) linear var(--delay, 0s),
              translate calc(.4s * var(--tempo)) cubic-bezier(.2, 1.3, .4, 1) var(--delay, 0s),
              scale calc(.4s * var(--tempo)) cubic-bezier(.2, 1.3, .4, 1) var(--delay, 0s);
}

/* 3b. stempel: klap! */
.ready [data-anim="stamp"] { opacity: 0; scale: 1.9; }
.ready [data-anim="stamp"].is-on {
  opacity: 1; scale: 1;
  transition: opacity calc(.08s * var(--tempo)) linear var(--delay, 0s), scale calc(.28s * var(--tempo)) cubic-bezier(.3, 1.7, .5, 1) var(--delay, 0s);
}

/* 4. ontwikkelen: foto begint klein en doorzichtig en zoomt naar volle grootte */
.ready [data-anim="develop"] { opacity: 0; scale: .4; filter: brightness(2.2) contrast(.3) blur(8px); }
.ready [data-anim="develop"].is-on {
  opacity: 1; scale: 1; filter: none;
  transition: opacity calc(1s * var(--tempo)) ease-out var(--delay, 0s),
              scale var(--dur, 1.5s) cubic-bezier(.2, .85, .25, 1.04) var(--delay, 0s),
              filter var(--dur, 1.5s) ease-out var(--delay, 0s);
}

/* 5. markeerstift */
mark {
  color: inherit; padding: 0 .15em; margin: 0 -.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(100deg, rgba(47, 156, 105, 0), rgba(47, 156, 105, .34) 4%, rgba(47, 156, 105, .3) 96%, rgba(47, 156, 105, 0))
              no-repeat 0 62% / 100% 62%;
}
.ready mark[data-anim="mark"] { background-size: 0 62%; }
.ready mark[data-anim="mark"].is-on {
  background-size: 100% 62%;
  transition: background-size var(--dur, .7s) ease-out var(--delay, 0s);
}

/* "gentle": het systeem vraagt om minder beweging. Schrijven, tekenen en verschijnen blijven,
   maar er wordt niets meer geschoven en de foto zoomt maar licht (zie main.js, ?motion=1 forceert alles) */
.gentle [data-anim="stick"] { translate: none; scale: 1; }
.gentle [data-anim="stamp"] { scale: 1; }
.gentle [data-anim="reveal"] .w { translate: none; }
.gentle [data-anim="develop"] { scale: .88; }

/* "no-motion": ?motion=0, alles meteen op de eindstand */
.no-motion [data-anim], .no-motion [data-anim] * { transition: none !important; animation: none !important; }
.no-motion [data-anim="write"] .ww { clip-path: none !important; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow-x: clip; padding: 150px 0 0; }

.veins { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.veins path { fill: none; stroke: var(--green); stroke-width: 1; opacity: .75; stroke-linecap: round; }

/* geen z-index: dan mengen de notities over de foto ook met het papier eronder (zie .n-right, .n-left) */
.stage { position: relative; }
.photo-wrap { position: relative; width: var(--pw); margin: 0 auto 300px; }

.photo-row { position: relative; width: var(--pw); height: var(--ph); }

/* roze scanstrook achter de foto's */
.scan-band {
  position: absolute; z-index: 0; left: 50%; top: -30px; width: 100vw; height: calc(var(--ph) + 60px);
  translate: -50% 0;
  background: linear-gradient(rgba(214, 186, 200, .34), rgba(214, 186, 200, .34));
  border-block: 1px solid rgba(160, 120, 135, .14);
}
.reg { position: absolute; width: 30px; height: 30px; stroke-width: 1.2; }
.reg-l { left: 4%; top: -17px; }
.reg-r { right: 4%; bottom: -17px; }

/* doorschemerende tekst van een ander vel */
.bleed {
  position: absolute; margin: 0; width: min(30vw, 400px); overflow: hidden; pointer-events: none;
  font: 400 .7rem/1.6 var(--typed); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(18, 18, 18, .1); mix-blend-mode: multiply;
}
.bleed-l { left: 2%; top: 9%; height: 7.2em; rotate: -.7deg; }
.bleed-r { right: 2%; bottom: 10%; height: 7.2em; rotate: .6deg; text-align: right; }

/* de foto: met de schaar uitgeknipt, met slagschaduw eronder */
.photo { position: relative; z-index: 2; width: 100%; height: 100%; rotate: .4deg; }
.photo-shadow { position: absolute; inset: 0; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .32)) drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.photo-cut {
  position: absolute; inset: 0; overflow: hidden; background: #888;
  clip-path: polygon(0 1.4%, 3% 0, 52% .6%, 97% .8%, 100% 0, 99.4% 40%, 100% 97%, 99% 100%, 48% 99.3%, 2% 99.4%, 0 100%, .5% 55%);
}
/* iets minder contrast en wat lichter: het zwart van een donkere foto wordt donkergrijs in plaats van dichtgeslagen */
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.9) brightness(1.35); }

/* halftoon-raster + scanner-naden over foto's en schetsen */
.halftone {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(255, 255, 255, .6) 31% calc(31% + 1px), transparent calc(31% + 1px) 77%, rgba(255, 255, 255, .5) 77% calc(77% + 1px), transparent calc(77% + 1px)),
    radial-gradient(circle at center, rgba(0, 0, 0, .34) 0 34%, transparent 36%) 0 0 / 3px 3px;
}

.tp-photo { left: 50%; margin-left: -58px; top: -14px; width: 116px; height: 28px; rotate: -3deg; z-index: 4; }
.hatch { position: absolute; z-index: 3; left: calc(var(--pw) * -.5); top: 36%; width: 46px; height: 46px; stroke-width: 1.2; }

/* spookfoto's links en rechts, tot aan de rand van het scherm */
.ghost {
  position: absolute; z-index: 1; top: 0; height: 100%;
  width: calc((100vw - var(--pw)) / 2 - var(--pw) * var(--gap));
  overflow: hidden;
  background: rgba(238, 230, 234, .7);
}
/* de foto staat dubbel zo groot, zodat alleen een uitsnede zichtbaar is */
.ghost img {
  position: absolute; top: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: grayscale(1) contrast(.85) brightness(1.3); opacity: .3; mix-blend-mode: multiply;
}
.ghost-l { right: calc(100% + var(--pw) * var(--gap)); }
.ghost-l img { right: 0; }
.ghost-r { left: calc(100% + var(--pw) * var(--gap)); }
.ghost-r img { left: 0; }

/* notities rondom (en over) de foto */
.hero .note { position: absolute; z-index: 3; white-space: nowrap; }
/* wat over de donkere foto loopt, wordt wit (als een zilverstift); op het papier blijft het zwarte inkt */
.n-right { --ink: #fff; color: #fff; mix-blend-mode: difference; }

.n-top { left: 10%; top: -100px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.underline { position: absolute; left: 0; bottom: -9px; width: 100%; height: 12px; }

.measure { position: absolute; z-index: 3; right: calc(100% - 6px); top: -34px; width: 150px; height: 27px; }
.tick-label { position: absolute; z-index: 3; right: calc(100% + 124px); top: -16px; font: 400 .62rem var(--typed); letter-spacing: .1em; color: var(--soft); }
.dims { left: 8px; top: -54px; padding: 2px 8px; font-size: 1.3rem; }
.box { position: absolute; inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); }
.size-note { left: 130px; top: -48px; font-size: 1.25rem; }

.id { position: absolute; z-index: 3; left: 50%; top: calc(100% + 38px); translate: -50% 0; text-align: center; }
.arrow-id { position: absolute; right: calc(100% + 10px); top: -64px; width: 108px; height: 72px; }
.sub { margin: 14px 0 2px; font: 400 1.05rem/1.4 var(--sans); white-space: nowrap; }
.uline { position: relative; display: inline-block; }
.uline-svg { position: absolute; left: -2%; bottom: -6px; width: 104%; height: 8px; stroke-width: 2; }
.circled .ellipse { position: absolute; left: -22%; top: -38%; width: 144%; height: 176%; }
/* wat je doet, in twee regels onder je naam */
.role { margin: 12px 0 0; font: 400 .8rem/1.55 var(--typed); color: var(--soft); }
.role > span { display: block; white-space: nowrap; }
.role > span + span { color: var(--ink); }

.n-right { left: calc(100% - 64px); top: 38%; font-size: clamp(1.02rem, 1.25vw, 1.15rem); -webkit-text-stroke: .85px currentColor; }
.n-right .ch { opacity: 1; }
.n-right .crossed { margin-right: .2em; }
.arr-down { position: absolute; left: 34px; top: calc(100% + 6px); width: 34px; height: 76px; }

/* stempel links onder de foto: je zoekt een stage */
.stage-stamp { right: calc(100% + 30px); top: calc(100% - 46px); margin: 0; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.dash-left { position: absolute; z-index: 3; right: calc(100% + 14px); top: 56%; width: 120px; height: 24px; }

.sig { position: absolute; z-index: 3; left: calc(50% + 80px); top: calc(100% + 196px); }
.signature { width: 150px; height: 52px; stroke-width: 1.7; }
.hero .sig .note { position: static; margin: 2px 0 0 26px; font-size: 1.1rem; }

/* ---------- Secties ---------- */
.sheet { position: relative; overflow-x: clip; padding: clamp(72px, 10vw, 120px) 0; }
.sheet > .container { position: relative; z-index: 1; }
.hero + .sheet::before, .sheet + .sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--dash);
}
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 48px; }
.sheet-head .tape { rotate: -1.6deg; }
.inline-note { font-size: clamp(1.5rem, 2.8vw, 2rem); }

/* papierlagen met een uitgeknipt (golvend) randje; de tekst erboven blijft scherp */
.clipping, .index-card, .proj { position: relative; isolation: isolate; }
.clipping::before, .index-card::before, .proj::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 22px 44px -22px rgba(0, 0, 0, .4);
}
.clipping::before { filter: url(#rough-a); }
.index-card::before { filter: url(#rough-b); }
.proj::before { filter: url(#rough-c); }

/* Over mij */
.about-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(36px, 7vw, 96px); align-items: start; }
.clipping { rotate: -.6deg; padding: clamp(26px, 4vw, 44px); font: 400 1.02rem/1.75 var(--typed); }
.clipping p:last-of-type { margin-bottom: 0; }

.checklist li { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; rotate: var(--r, 0deg);
  font-family: var(--hand); font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.1; }
.check { width: 32px; height: 32px; flex: none; stroke-width: 1.7; }
.checklist .ellipse { position: absolute; left: -8%; top: -30%; width: 116%; height: 160%; }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: start; }
.skills-grid > :nth-child(2) { margin-top: 28px; }
.index-card { rotate: var(--r, 0deg); padding: 26px 24px 18px; }
.index-card::before {
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(18, 18, 18, .045) 31px 32px);
  background-position: 0 50px;
}
.label {
  display: inline-block; margin-bottom: 20px; padding: .4em .8em;
  font: 700 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-hi); background: var(--ink);
}
.strips { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.strips li {
  position: relative; padding: .45em .85em .35em; font: 400 .78rem/1.1 var(--typed); letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(18, 18, 18, .2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.strips li:nth-child(3n+1) { rotate: -1.4deg; }
.strips li:nth-child(3n+2) { rotate: .9deg; }
.strips li:nth-child(3n)   { rotate: -.4deg; }

/* Projecten */
/* kolommen via --cols; een onvolledige laatste rij staat in het midden */
.projects-grid { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px 32px; }
.projects-grid > .proj { width: calc((100% - (var(--cols) - 1) * 32px) / var(--cols)); }
.projects-grid > :nth-child(3n+2) { margin-top: 38px; }
.projects-grid > :nth-child(3n) { margin-top: 12px; }
.proj { rotate: var(--r, 0deg); padding: 16px 16px 24px; transition: rotate .3s ease, translate .3s ease; }
.proj:hover { rotate: 0deg; translate: 0 -4px; }
.proj-thumb { position: relative; aspect-ratio: 300 / 190; margin-bottom: 14px; overflow: hidden; background: #d8d7d3; }
.proj-thumb .sk { width: 100%; height: 100%; stroke-width: 1.7; }
/* omslagbeeld van een project (bv. het brandbook), klikbaar. Het beeld heeft zelf de verhouding van het kader
   (300:190), dus geen procent-hoogtes of object-fit nodig: die rekken het in sommige browsers uit tijdens de animatie */
.proj-thumb a { display: block; }
.proj-thumb img { display: block; width: 100%; height: auto; }
.proj-thumb .halftone { background: radial-gradient(circle at center, rgba(0, 0, 0, .2) 0 34%, transparent 36%) 0 0 / 4px 4px; }
.proj-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px;
  font: 400 .72rem/1 var(--typed); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.proj h3 { font: 400 1.65rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
  text-shadow: 1.2px 0 rgba(224, 40, 90, .26), -1.2px 0 rgba(0, 140, 220, .22); }
.proj p { font: 400 .95rem/1.6 var(--typed); color: #2d2b29; }
.proj-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--hand); font-size: 1.7rem; line-height: 1; }
.proj-link .sk { width: 48px; height: 20px; transition: translate .25s ease; }
.proj-link:hover .sk { translate: 6px 0; }
.proj-link:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }

/* Galerij: opgeplakte afdrukken */
/* kolommen via --cols; een onvolledige laatste rij staat in het midden */
.gallery-grid { --cols: 4; --gx: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px var(--gx); }
.gallery-grid > .print { width: calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); }
/* elke rij een beetje scheef opgeplakt */
.gallery-grid > :nth-child(4n+2) { margin-top: 46px; }
.gallery-grid > :nth-child(4n+3) { margin-top: 12px; }
.gallery-grid > :nth-child(4n+4) { margin-top: 58px; }

.print { position: relative; isolation: isolate; margin: 0; padding: 12px 12px 14px; rotate: var(--r, 0deg); transition: rotate .3s ease, translate .3s ease; }
.print::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 22px 44px -22px rgba(0, 0, 0, .42);
}
.print:nth-child(3n+1)::before { filter: url(#rough-a); }
.print:nth-child(3n+2)::before { filter: url(#rough-b); }
.print:nth-child(3n)::before   { filter: url(#rough-c); }
.print:hover { rotate: 0deg; translate: 0 -4px; }
.tp-top { left: 50%; margin-left: -42px; top: -13px; rotate: var(--tr, -3deg); }

.print-link { display: block; cursor: zoom-in; background: #d8d7d3; }
.print img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
/* liggende foto: twee kolommen breed */
.gallery-grid > .print.wide { width: calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols) * 2 + var(--gx)); }
.print.wide img { aspect-ratio: 3 / 2; }

/* de foto komt kleiner en doorzichtig tevoorschijn, net als het portret in de hero */
.ready .print [data-anim="develop"]:not(.is-on) { scale: .8; }
.gentle .print [data-anim="develop"]:not(.is-on) { scale: .94; }
.ready .proj-thumb [data-anim="develop"]:not(.is-on) { scale: .8; filter: brightness(1.6) contrast(.6); }
.gentle .proj-thumb [data-anim="develop"]:not(.is-on) { scale: .94; }

/* Video: staande clips, drie per rij, de laatste rij gecentreerd */
.video-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 32px; }
.video-grid .print { width: calc((100% - 64px) / 3); max-width: 330px; }
.video-grid > :nth-child(3n+2) { margin-top: 44px; }
.print video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #1c1c1c; }
.swipe-hint { display: none; }

/* onder elke video: soort en duur, titel, één zin uitleg en wat jij deed */
.clip-cap { display: block; margin-top: 12px; }
.clip-meta { display: flex; justify-content: space-between; gap: 10px;
  font: 400 .7rem/1 var(--typed); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.clip-title { display: block; margin: 8px 0 6px; font: 400 1.35rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.clip-desc { display: block; font: 400 .86rem/1.55 var(--typed); color: #2d2b29; }
.clip-role { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--dash);
  font: 400 .66rem/1.5 var(--typed); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }

/* Barrio-case: tekst links, vier opgeplakte foto's rechts */
.case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px clamp(36px, 5vw, 80px); align-items: start;
  margin-bottom: clamp(64px, 8vw, 104px); }
.case-sheet { rotate: -.4deg; }
.case-title { margin-bottom: 14px; font: 400 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  text-shadow: 1.5px 0 rgba(224, 40, 90, .28), -1.5px 0 rgba(0, 140, 220, .24); }
.case-facts { display: grid; gap: 12px; margin: 22px 0 0; }
.case-facts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 18px; padding-top: 12px; border-top: 1px dashed var(--dash); }
.case-facts dt { font: 700 .72rem/2.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.case-facts dd { margin: 0; font: 400 .95rem/1.65 var(--typed); }
.case-prints { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 22px; padding-top: 14px; }
.case-prints > :nth-child(even) { margin-top: 36px; }
.clips-note { width: fit-content; margin: 0 0 30px; font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* "See more": onder de galerij (naar galerij.html) en onder de video's (naar video.html) */
.more-row { display: flex; justify-content: center; margin-top: 64px; }
.more-btn { display: inline-flex; align-items: center; gap: .6em; rotate: -1.2deg; border-block: 0; cursor: pointer; }
.more-btn .sk { width: 40px; height: 16px; stroke-width: 1.7; transition: translate .25s ease, rotate .3s ease; }
.more-btn:hover .sk { translate: 6px 0; }

@media (min-width: 1800px) {
  .projects-grid { --cols: 4; }
  .gallery-grid { --cols: 5; }
  .gallery-grid.preview { --cols: 4; } /* de vier foto's op de homepagina blijven één volle rij */
  .video-grid .print { width: calc((100% - 128px) / 5); }
  .video-grid > :nth-child(n) { margin-top: 0; }
  .video-grid > :nth-child(even) { margin-top: 44px; }
}

/* vergroting */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: auto;
}
.lightbox::backdrop { background: rgba(14, 14, 14, .86); }
.lightbox[open] { display: grid; place-items: center; }
html:has(.lightbox[open]) { overflow: hidden; }
.lb-frame { position: relative; isolation: isolate; width: fit-content; max-width: 94vw; padding: 14px 14px 12px; rotate: -.6deg; }
.lb-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .75); filter: url(#rough-a);
}
.lb-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; margin-inline: auto; }
.lb-cap { margin: 10px 0 0; font-size: 1.6rem; line-height: 1.1; }
.lb-cap:empty { display: none; }
.lb-bar { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.lb-btn {
  font: 400 .78rem var(--typed); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(18, 18, 18, .25); box-shadow: 0 1px 0 rgba(0, 0, 0, .14);
  padding: .6em .9em .5em; cursor: pointer;
}
.lb-btn:hover { background: #fff; }
/* PDF van een project: een groot, recht vel (scheef zou de tekst op de pagina's wazig maken) */
.pdf-frame { width: min(880px, 94vw); rotate: 0deg; }
.pdf-title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.1; }
.pdf-title:empty { display: none; }
.pdf-pages, .pdf-view { display: block; width: 100%; height: min(78vh, 900px); height: min(76dvh, 900px); }
.pdf-pages[hidden], .pdf-view[hidden] { display: none; }
.pdf-view { border: 0; background: #fff; }
/* de pagina's onder elkaar, om door te scrollen */
.pdf-pages {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 14px;
  padding: 14px; overflow-y: auto; overscroll-behavior: contain; background: #d8d7d3;
}
.pdf-pages img { display: block; width: 100%; height: auto; box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 12px 26px -14px rgba(0, 0, 0, .5); }
.pdf-pages img.tall { width: calc((100% - 28px) / 3); }
.pdf-open { text-decoration: none; }

/* Contact */
.contact { padding-bottom: clamp(80px, 11vw, 140px); }
.big { font: 400 clamp(2.2rem, 7.6vw, 5rem)/1.12 var(--marker); margin-bottom: 28px; -webkit-text-stroke: 0; }
.big .crossed { margin-inline: .1em; }
.big .strike { stroke-width: 3; top: 18%; height: 66%; opacity: .9; }
.contact-text { max-width: 52ch; font: 400 1.05rem/1.75 var(--typed); margin-bottom: 36px; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 36px; }
/* tekst links, opgeplakte foto rechts; de handtekening komt eronder te staan */
.contact-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 300px); align-items: start; gap: 48px clamp(40px, 6vw, 96px); }
.contact-photo img { aspect-ratio: 4 / 5; }
.tape-link { text-decoration: none; padding: .55em 1.3em .45em; font-size: 1.15rem; transition: translate .2s ease, background-color .2s ease; }
.tape-link:hover { translate: 0 -3px; background: #fff; }
.circled-btn { position: relative; display: inline-block; }
.mail-plain { margin: 28px 0 0; font: 400 .95rem/1.6 var(--typed); color: var(--soft); }
.mail-plain a { color: var(--ink); text-underline-offset: 4px; overflow-wrap: anywhere; }
.ring { position: absolute; z-index: 2; left: -9%; top: -34%; width: 118%; height: 168%; pointer-events: none; stroke-width: 1.8; }
.sig-end { width: fit-content; margin: 56px 0 0 auto; font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--cursive); }
.sig-line { position: absolute; left: -4%; bottom: -10px; width: 108%; height: 12px; stroke-width: 1.7; }

/* Blog (blog.html en de posts in blog/) */
.blog-intro { max-width: 60ch; margin: -12px 0 56px; font: 400 1.02rem/1.75 var(--typed); }
.blog-list { display: grid; gap: 48px; max-width: 920px; }
/* een post in het overzicht: datum links, tekst in het midden, foto rechts */
.post-card {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 92px minmax(0, 1fr) 170px;
  gap: 28px; align-items: start; padding: 26px 26px 24px; rotate: var(--r, 0deg); transition: rotate .3s ease, translate .3s ease;
}
.post-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 22px 44px -22px rgba(0, 0, 0, .4); filter: url(#rough-c);
}
.post-card:hover { rotate: 0deg; translate: 0 -4px; }
.post-date { margin: 0; padding: 4px 22px 0 0; border-right: 1px dashed var(--dash); text-align: center; }
.post-date b { display: block; font: 400 3.4rem/.9 var(--display); }
.post-date span { display: block; margin-top: 8px; font: 400 .74rem/1.3 var(--typed); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font: 400 .72rem/1.4 var(--typed); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.post-card h2 {
  margin-bottom: 12px; font: 400 clamp(1.7rem, 3vw, 2.2rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em;
  text-shadow: 1.2px 0 rgba(224, 40, 90, .26), -1.2px 0 rgba(0, 140, 220, .22);
}
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-card p:not(.post-date):not(.post-meta) { max-width: 54ch; font: 400 .95rem/1.65 var(--typed); color: #2d2b29; }
.post-cover { display: block; padding: 8px 8px 10px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 12px 24px -14px rgba(0, 0, 0, .45); rotate: 2deg; }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.ready .post-cover [data-anim="develop"]:not(.is-on) { scale: .8; }
.gentle .post-cover [data-anim="develop"]:not(.is-on) { scale: .94; }

/* een post op zijn eigen pagina */
.post > .container { max-width: 820px; }
.post-top { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 32px 48px; align-items: end; margin-bottom: 64px; }
.post-head { margin-bottom: 0; }
.post-head .post-meta { margin-bottom: 20px; }
.post-title {
  margin-bottom: 24px; font: 400 clamp(2.8rem, 8vw, 5.4rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 2px 0 rgba(224, 40, 90, .3), -2px 0 rgba(0, 140, 220, .28);
}
.post-lead { max-width: 50ch; margin: 0; font: 400 clamp(1.1rem, 1.6vw, 1.25rem)/1.6 var(--typed); }
.post-photo { margin: 0; }
.post-photo img { aspect-ratio: 4 / 5; }
.post-photo figcaption { margin-top: 8px; font-size: 1.5rem; text-align: center; }
.post-body { rotate: -.4deg; padding: clamp(26px, 4vw, 48px); font: 400 1.02rem/1.8 var(--typed); }
.post-body p { max-width: 62ch; }
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 { margin: 1.8em 0 .8em; font: 400 clamp(1.4rem, 2.4vw, 1.75rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.post-body .uline-svg { bottom: -8px; }
.post-quote { margin: 1.6em 0; }
.post-quote .note { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.post-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; margin-top: 56px; }
.post-sig { margin: 0; }

/* Footer */
.site-footer { border-top: 1px dashed var(--dash); padding: 26px 0 40px; font: 400 .78rem var(--typed);
  letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.footer-inner { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.footer-inner p { margin: 0; }
.footer-inner a { text-decoration: none; font-size: 1rem; }
.footer-inner a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* notities rechts mogen niet buiten beeld vallen */
  .n-right { left: calc(100% - 40px); }
  .sig { left: calc(50% + 50px); }
}

@media (max-width: 960px) {
  .projects-grid { --cols: 2; }
  .gallery-grid { --cols: 2; }
  .gallery-grid > :nth-child(even) { margin-top: 40px; }
  .gallery-grid > :nth-child(4n+3) { margin-top: 0; }
  .video-grid .print { width: calc((100% - 32px) / 2); }
  .video-grid > :nth-child(n) { margin-top: 0; }
  .video-grid > :nth-child(even) { margin-top: 40px; }
}

@media (max-width: 860px) {
  .about-grid, .case { grid-template-columns: 1fr; }
  .case-prints { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .case-prints > :nth-child(even) { margin-top: 24px; }
}

/* het menu past niet meer naast het logo (in het Frans heeft het ±1005px nodig): dan een menuknop */
@media (max-width: 1060px) {
  .menu-btn { display: block; margin-left: 12px; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0; display: none;
    background: var(--paper); border-bottom: 1px dashed var(--dash); padding: 8px 20px 18px;
  }
  .site-nav.is-open { display: block; }
  .site-nav + .lang-switch { margin-left: auto; }
  .site-nav ul { flex-direction: column; gap: 4px; }
  .site-nav a { padding: 12px 0; font-size: .95rem; }
}

@media (max-width: 760px) {
  .back-link + .lang-switch { margin-left: 14px; }

  /* hero: dezelfde opzet als op desktop (alles rond en over de foto), herschaald naar de smalle ruimte
     naast de foto (zo'n 75px per kant) */
  :root { --pw: min(60vw, 280px); --gap: .12; }
  .hero { padding-top: 108px; }
  .photo-wrap { margin-bottom: 268px; }

  .n-top { left: 50%; top: -86px; translate: -50% 0; font-size: 1.15rem; }
  .dims { left: 4px; top: -46px; padding: 1px 6px; font-size: 1.02rem; }
  .size-note { left: 104px; top: -42px; font-size: 1rem; }
  .measure { right: calc(100% - 2px); top: -16px; width: 62px; height: 18px; }
  .tick-label { right: calc(100% + 50px); top: -1px; }
  .hatch { left: -48px; top: 26%; width: 36px; height: 36px; }
  .dash-left { right: calc(100% + 4px); top: 56%; width: 52px; height: 18px; }

  /* deels over de foto heen geschreven, zoals op desktop */
  .n-right { left: calc(100% - 96px); top: 57%; font-size: .9rem; }
  .n-right .contact { padding-bottom: 0; } /* niet de ruimte van de contact-sectie overnemen */
  .n-right .code { display: none; } /* de fotonummers zouden over je gezicht staan */
  .arr-down { left: 30px; height: 46px; width: 24px; }

  /* stempel onder je naam, links naast de handtekening, in twee regels */
  .stage-stamp { right: auto; left: -40px; top: calc(100% + 196px); font-size: .85rem; border-width: 2px; text-align: center; }
  .stage-stamp .dot { display: none; }
  .stage-stamp .when { display: block; }

  .id { top: calc(100% + 36px); }
  .arrow-id { right: auto; left: -46px; top: -46px; width: 64px; height: 44px; }
  .tape-xl { font-size: 1.15rem; padding: .55em 1.1em; }

  .sig { left: auto; right: -52px; top: calc(100% + 186px); max-width: 160px; text-align: center; }
  .role { font-size: .66rem; }
  .signature { width: 112px; height: 39px; margin-inline: auto; }
  .hero .sig .note { margin: 2px auto 0; font-size: .95rem; white-space: normal; }

  /* reuzenwoord: kleiner en boven de titel, zodat het niets overlapt */
  .sheet { padding: 86px 0 52px; }
  .bigword { top: 4px; font-size: clamp(4.2rem, 21vw, 5.4rem); -webkit-text-stroke-width: 1.2px; }

  .skills-grid > :nth-child(2), .projects-grid > :nth-child(n) { margin-top: 0; }
  .projects-grid { --cols: 1; }
  .gallery-grid { --gx: 16px; row-gap: 28px; }
  /* video's: een rij om opzij te vegen, de volgende steekt half in beeld */
  .video-grid {
    flex-wrap: nowrap; justify-content: flex-start; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    margin-inline: -20px; padding: 18px 20px 24px; scrollbar-width: none;
  }
  .video-grid::-webkit-scrollbar { display: none; }
  .swipe-hint { display: block; margin: 2px 0 0 auto; width: fit-content; font-size: 1.25rem; }
  .video-grid .print { flex: 0 0 66%; width: auto; max-width: none; scroll-snap-align: start; }
  .video-grid > :nth-child(n) { margin-top: 0; }
  .video-grid > :nth-child(even) { margin-top: 18px; }
  /* op video.html: geen veegrij maar twee kolommen onder elkaar, net als de galerij */
  .video-grid.all { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; row-gap: 28px; }
  .video-grid.all .print { flex: 0 0 calc((100% - 16px) / 2); }
  .gallery-grid > :nth-child(n) { margin-top: 0; }
  .gallery-grid > :nth-child(even) { margin-top: 26px; }
  .print { padding: 8px 8px 10px; }
  .sheet-head { margin-bottom: 30px; }
  .more-row { margin-top: 40px; }
  .big { margin-bottom: 22px; }
  /* PDF-venster: bijna schermbreed, gsm-schermen met twee naast elkaar */
  .pdf-frame { padding: 10px 10px 8px; }
  .pdf-pages { gap: 10px; padding: 10px; }
  .pdf-pages img.tall { width: calc((100% - 10px) / 2); }
  /* blog: datum, foto en tekst onder elkaar */
  .blog-intro { margin: -6px 0 36px; }
  .blog-list { gap: 36px; }
  .post-card { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px 20px; }
  .post-cover { order: -1; rotate: 1.2deg; }
  .post-cover img { aspect-ratio: 3 / 2; }
  .post-date { display: none; }
  .post-top { grid-template-columns: 1fr; margin-bottom: 44px; }
  .post-photo { width: 78%; justify-self: center; }
  .post-end { margin-top: 40px; }

  /* contact: de foto onder de knoppen, iets smaller en in het midden */
  .contact-body { grid-template-columns: 1fr; }
  .contact-photo { justify-self: center; width: min(70%, 260px); }

  /* Barrio-case: de feiten onder elkaar, de foto's twee per rij */
  .case-facts div { grid-template-columns: 1fr; gap: 0; }
  .case-prints { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .case-prints > :nth-child(even) { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .proj, .post-card, .tape-link, .proj-link .sk, .more-btn .sk { transition: none; }
}