/* =========================================================================
   Paul Goos, v3 (visueel experiment)
   Lichte achtergrond, alles in Inter: koppen, tekst en kleine labels
   in verschillende diktes en groottes.
   ========================================================================= */

/* ===== TOKENS ===== */
:root {
  /* Kleuren */
  --paper: #f2eff3;          /* achtergrond: licht, koel grijs met een vleug lavendel */
  --paper-2: #e8e3ea;        /* vlakken: tegels, placeholders (zelfde tint, iets donkerder) */
  --ink: #141414;            /* tekst, footer */
  --muted: #68606c;          /* secundaire tekst (contrast 5,3:1 op de achtergrond) */
  --line: rgba(20, 20, 20, 0.14);
  --card: #e7e6e9;           /* kaarten op Wat ik doe: neutraal grijs, nauwelijks paars */
  --frame: #d5ced9;          /* dunne rand om beelden: donkerdere tint van de achtergrond */
  --pink: #ff71d7;           /* accentkleur (roze uit het logo): accenten, cursorlabel, hovers */
  --band: #e8e4b8;           /* beige voor de achtergrondvlakken (secties) en de kaart-hover */
  --band-pad: clamp(56px, 6.5vw, 112px);   /* ruimte boven en onder in een roze vlak */
  --band-gap: clamp(64px, 7vw, 128px);      /* ruimte tussen de blokken in een roze vlak */
  --hover: var(--pink);      /* hover van tekstlinks (zelfde accentkleur) */

  /* Typografie: grote teksten (koppen, display) in Outfit, de rest in Inter. */
  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --display-stretch: 100%;
  --display-weight: 500;
  --display-track: -0.02em;
  --display-lh: 0.95;
  --font-text: "Inter", system-ui, sans-serif;
  --font-mono: "Inter", system-ui, sans-serif;   /* kleine labels: Inter in kapitalen */
  --label-weight: 500;
  --label-track: 0.06em;

  --fs-mega: clamp(52px, 10.4vw, 188px);
  --fs-xl: clamp(38px, 6.2vw, 112px);
  --fs-l: clamp(26px, 3.1vw, 54px);
  --fs-product: clamp(26px, 3vw, 52px);     /* titels van de kaarten op Wat ik doe */
  --fs-cloud: clamp(36px, 5.2vw, 96px);      /* Wat ik doe-blok op Werk (eigen roze sectie) */
  --fs-m: clamp(17px, 1.45vw, 21px);
  --fs-s: clamp(14px, 1.05vw, 16px);
  --fs-mono: clamp(11px, 0.8vw, 12.5px);

  /* Layout */
  --gutter: clamp(16px, 2.5vw, 40px);
  --radius: clamp(6px, 0.7vw, 12px);
  --section: clamp(80px, 11vw, 200px);
  /* Beweging: snappy. Snel op gang, kort uitlopen; staccato waar het kan */
  --ease: cubic-bezier(0.3, 0.9, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--font-text);
  font-optical-sizing: auto;
  font-size: var(--fs-m);
  font-weight: 380;
  line-height: 1.45;
  letter-spacing: 0;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: page-in 250ms var(--ease) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

::selection { background: var(--pink); color: var(--ink); }

main { flex: 1; }

/* Alleen voor schermlezers en zoekmachines */
.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;
}

/* ===== TYPE HELPERS ===== */
.display,
.footer-cta,
.about-lede {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  line-height: 1.4;
  text-transform: uppercase;
}

.muted { color: var(--muted); }

/* Knop: zwarte pil, pijltje schuift mee */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-s);
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease, gap 180ms var(--ease);
}
.button::after { content: "→"; font-size: 1.2em; line-height: 1; transition: transform 180ms var(--ease); }
.button:hover { background: var(--pink); color: var(--ink); gap: 14px; }

/* ===== HEADER: logo links, menu en taal rechts ===== */
.site-header {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding: calc(var(--gutter) * 0.6) var(--gutter) var(--gutter);   /* minder ruimte boven logo en menu */
  position: relative;
  z-index: 120;
}

/* Handgeschreven woordmerk; kleurt mee met de tekstkleur */
.brand { display: block; width: clamp(84px, 7.8vw, 128px); flex-shrink: 0; color: var(--ink); }
.brand-icon { width: 100%; height: auto; display: block; overflow: visible; fill: currentColor; }
.brand-icon .logo-accent { fill: var(--pink); }      /* rood lint */
.brand-icon .logo-knockout { fill: var(--paper); }   /* uitgespaarde letters in het zwarte lint */

/* Logo-hover: "tak-tak-tak" (animatie in app.js, initLogoMotion).
   Het logo groeit vanuit zijn midden, zodat het horizontaal en verticaal op zijn plek blijft. */
.brand-icon { transform-origin: 50% 50%; }
.brand-icon .logo-ribbon { transform-box: fill-box; transform-origin: center; }

.main-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: 0.1em;
}

/* Menu-items: bolletje in de accentkleur voor het actieve item; bij hover verschijnt het ook.
   Het bolletje staat links naast de tekst, zodat er niets verspringt. */
.nav-link {
  position: relative;
  white-space: nowrap;   /* menu-items breken nooit af */
  font-size: var(--fs-s);
  font-weight: 450;
  line-height: 1.2;
}
.nav-link::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--pink);
  transform: scale(0);
  transition: transform 200ms var(--spring);
}
.nav-link:hover::before,
.nav-link.active::before { transform: scale(1); }

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: clamp(16px, 2vw, 36px);
  border-left: 1px solid var(--line);
}

.availability { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.availability::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 113, 215, 0.8); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 113, 215, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 113, 215, 0); }
}

.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch button {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--muted);
  transition: color 200ms ease, background 200ms ease;
}
.lang-switch button[aria-pressed="true"] { color: var(--ink); background: var(--paper-2); }
.lang-switch button:hover { color: var(--ink); }

.menu-toggle {
  display: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
body.menu-open .menu-toggle { background: var(--paper); color: var(--ink); }

/* ===== MENU-OVERLAY (mobiel) ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--gutter) * 2) var(--gutter) calc(var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 320ms var(--ease);
  pointer-events: none;
}
.menu-overlay.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu-overlay a {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: clamp(30px, 9vw, 72px);
  line-height: 1.05;
  white-space: nowrap;
}
.menu-overlay a.active { color: var(--pink); }
body.menu-open .site-header .brand { color: var(--paper); }
body.menu-open .site-header .brand .logo-knockout { fill: var(--ink); }
body.menu-open .site-header .brand .logo-paul > g { fill: var(--ink); }   /* letters 'paul' blijven zwart */
body.menu-open .site-header { color: var(--paper); }
body.menu-open .header-right { border-color: rgba(242, 239, 243, 0.2); }

/* ===== SECTIES ===== */
.work-section,
.skill-list,
.personal-section { padding-top: clamp(24px, 3.5vw, 56px); }

/* ===== WERK-GRID: rustig, twee gelijke kolommen ===== */
.work-grid {
  display: grid;
  /* Speels ritme zoals op v2: per rij een 5:4- en een 16:9-tegel, om en om gespiegeld.
     Drie kolommen: buiten = 5:4-tegel, midden + buiten = 16:9-tegel. De buitenkolom is
     (breedte - gap) / (1 + 64/45), zodat beide tegels in een rij precies even hoog zijn. */
  grid-template-columns: calc((100% - var(--gutter)) / 2.42222) minmax(0, 1fr) calc((100% - var(--gutter)) / 2.42222);
  gap: clamp(40px, 4.5vw, 80px) var(--gutter);
  padding: 0 var(--gutter);
}
.work-grid > :nth-child(4n + 1) { grid-column: 1 / 2; }
.work-grid > :nth-child(4n + 2) { grid-column: 2 / 4; }
.work-grid > :nth-child(4n + 3) { grid-column: 1 / 3; }
.work-grid > :nth-child(4n + 4) { grid-column: 3 / 4; }
.work-grid > :nth-child(4n + 1) .work-thumb,
.work-grid > :nth-child(4n + 4) .work-thumb { aspect-ratio: 5 / 4; }

.work-link { display: block; }
@media (pointer: fine) {
  .has-cursor-label { cursor: none; }
}

.work-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
/* Dunne rand om alle beelden, zodat lichte beelden niet wegvallen.
   De rand zit op het vlak zelf (niet als laag erover), zodat het beeld
   netjes binnen de afgeronde hoek valt en de hoeken niet korrelig worden. */
.work-thumb,
.skill-image,
.detail-image-frame,
.detail-video-wrap,
.personal-item,
.about-image-wrap,
.hover-preview {
  border: 1px solid var(--frame);
  background-clip: padding-box;
}
.work-thumb img,
.work-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--ease);
}
.work-link:hover .work-thumb img,
.work-link:hover .work-thumb video { transform: scale(1.04); }

.work-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
}
.work-client { font-weight: 600; font-size: var(--fs-m); line-height: 1.3; }
.work-title { font-size: var(--fs-m); line-height: 1.3; color: var(--muted); }

/* Cursorlabel: roze pil met tekst + pijltje in een zwart rondje */
.cursor-follow,
.preview-follow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 140;
  pointer-events: none;
  will-change: transform;
}
.cursor-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  font-size: var(--fs-s);
  font-weight: 500;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: transform 240ms var(--spring), opacity 140ms ease;
}
.cursor-label.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cursor-text { display: inline-block; overflow: hidden; }
.cursor-arrow {
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  transform: rotate(-45deg) scale(0.4);
  transition: transform 300ms var(--spring) 40ms;
}
.cursor-label.show .cursor-arrow { transform: rotate(0deg) scale(1); }

/* Zwevend beeld: veegt van onder in, kantelt mee met de beweging */
.hover-preview {
  width: clamp(280px, 27vw, 460px);
  aspect-ratio: 3 / 2;   /* liggend: de foto's zijn 16:9 en 3:2 */
  border-radius: var(--radius);
  overflow: hidden;
  transform: translate(0, -50%);
  clip-path: inset(100% 0 0 0 round var(--radius));
  transition: clip-path 280ms var(--ease);
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.18);
}
.hover-preview.show { clip-path: inset(0 0 0 0 round var(--radius)); }
.hover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 220ms var(--ease);
}
.hover-preview.show img { transform: scale(1); }

/* ===== WAT IK DOE (blok op de homepage) ===== */
.skills-teaser { padding: var(--section) var(--gutter) 0; }
.skills-teaser .mono { margin-bottom: clamp(20px, 2.5vw, 36px); display: block; }
.skills-cloud { font-size: var(--fs-cloud); line-height: 1.02; }
.skills-cloud a { display: inline; transition: color 120ms ease, opacity 120ms ease; }
/* Bij hover: het aangewezen woord blijft scherp, de rest wijkt */
.skills-cloud:has(a:hover) a:not(:hover) { color: var(--muted); opacity: 0.45; }
.skills-cloud .sep { color: var(--muted); font-weight: 400; }
/* ===== OPDRACHTGEVERS (strook onderaan) ===== */
.clients { margin-top: var(--section); }
.clients-kicker { display: block; padding: 0 var(--gutter) clamp(20px, 2.5vw, 36px); }
/* Tekst en lijnen lopen tot de rand van het scherm */
.marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 1.6vw, 24px) 0;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
}
.marquee::before { top: 0; }
.marquee::after { bottom: 0; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 500;
  font-size: var(--fs-l);
  letter-spacing: var(--display-track);
  white-space: nowrap;
  padding-right: 0.6em;
}
.marquee-track span::after { content: "•"; color: var(--pink); padding-left: 0.6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== ROZE VLAK (Werk: Wat ik doe + opdrachtgevers; Wat ik doe: Zo werk ik + opdrachtgevers; project: credits + volgend project) =====
   Over de volle breedte, zonder ronde hoeken; loopt direct door in de zwarte footer.
   Tekst op roze is zwart; grijs wordt een doorschijnend zwart. */
.pink-band {
  --muted: rgba(20, 20, 20, 0.6);
  background: var(--band);
  color: var(--ink);
  margin-top: var(--section);
  padding: var(--band-pad) 0;
}
.pink-band .clients { margin-top: var(--band-gap); }
/* Pas tonen als de pagina-inhoud erboven er staat, anders springt het roze bij het laden in beeld */
body:not(.content-ready) .pink-band { visibility: hidden; }
.pink-band > :first-child { margin-top: 0; padding-top: 0; }
.pink-band .process .step-no { color: var(--ink); }
.pink-band .marquee-track span::after { color: var(--ink); }
.pink-band .skills-cloud a:hover { color: var(--ink); }
main:has(> .pink-band:last-child) + .site-footer { margin-top: 0; }

/* ===== FOOTER ===== */
.site-footer {
  margin-top: var(--section);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 8vw, 140px) var(--gutter) clamp(28px, 3vw, 48px);
}
/* Pagina's die eindigen met de klantenstrook (Werk, Wat ik doe): kleinere, gelijke ruimte tot de footer */
main:has(> .clients:last-child) + .site-footer { margin-top: clamp(48px, 5vw, 96px); }

/* Bovenregel van de footer: "Contact" en de beschikbaarheid */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin-bottom: 20px;
}
.footer-kicker { color: rgba(242, 239, 243, 0.55); }
.footer-top .availability { color: var(--paper); }
.footer-cta {
  display: inline-block;
  font-size: var(--fs-xl);
  font-weight: 400;   /* mailadres iets slanker dan de andere grote teksten */
  transition: color 250ms ease;
  word-break: break-word;
}
.footer-cta:hover { color: var(--pink); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: 20px;
  border-top: 1px solid rgba(242, 239, 243, 0.2);
  font-size: var(--fs-s);
}
.footer-row a { transition: color 200ms ease; }
.footer-row a:hover { color: var(--pink); }
.footer-row .copyright { margin-left: auto; color: rgba(242, 239, 243, 0.55); }

/* ===== WAT IK DOE (pagina): kaarten op een donkerder vlak ===== 
   Titel en tekst links (belangrijkst), beeld kleiner rechts. */
.skill-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 naast elkaar, dan 2, dan 1 (mobiel) */
  gap: var(--gutter);
  margin: 0 var(--gutter);
}

.skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* puur tekst; het icoon komt later terug */
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 1.4vw, 20px) clamp(20px, 2.4vw, 40px);
  --card-pad: clamp(20px, 2.4vw, 40px);
  padding: var(--card-pad);
  background: var(--card);
  transition: background-color 150ms ease;
  border-radius: var(--radius);
  scroll-margin-top: 24px;
}

.skill-title { grid-column: 1; grid-row: 1; font-size: var(--fs-product); line-height: 1; text-wrap: balance; }
.skill-body {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.skill-body p { font-size: var(--fs-s); line-height: 1.5; max-width: 30em; }
.skill-body .case-nav-link { margin-top: auto; align-self: flex-start; }

/* Rechts op de kaart: het icoon, rustig in het midden. De foto komt als zwevend beeld bij hover */
.skill-icon {
  grid-column: 2;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  min-height: clamp(180px, 15vw, 260px);
}
.skill-icon-mark { width: clamp(88px, 8vw, 140px); }
/* De hele kaart is klikbaar: de link "Bekijk een voorbeeld" spant over de kaart */
.skill { position: relative; }
.skill.is-link .skill-case::after { content: ""; position: absolute; inset: 0; }
/* Bij hover kleurt de kaart licht roze (zachter dan de roze vlakken) */
.skill.is-link:hover { background: var(--band); }
.skill.is-link:hover .skill-case { color: var(--ink); }
.skill.is-link:hover .skill-case .arrow { transform: translateX(4px); }
.skill-image {
  position: relative;
  border-radius: calc(var(--radius) * 0.75);
  overflow: hidden;
  background: var(--paper);
}
/* Foto op de kaart: alleen op mobiel zichtbaar (daar werkt hover niet) */
.skill-photo { display: none; }
.skill-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skill-image.placeholder {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: rgba(20, 20, 20, 0.3);
  color: var(--muted);
  padding: 20px;
  text-align: center;
}

/* Icoon: placeholder (leeg vlak met een lijntje) tot de getekende iconen er zijn */
.icon {
  display: inline-grid;
  place-items: center;
  width: clamp(56px, 5vw, 80px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.icon img { width: 100%; height: 100%; object-fit: contain; }
.icon--placeholder {
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Zo werk ik */
.process-section { margin-top: var(--section); }
.process-head { padding: 0 var(--gutter) clamp(32px, 4vw, 64px); }
/* "Zo werk ik" is een klein label, net als "Wat ik doe" en "Opdrachtgevers":
   labels kondigen aan, de grote letter is voor de inhoud zelf */
.process-head h2 { display: block; }
.process-intro { margin-top: clamp(20px, 2.5vw, 36px); font-size: var(--fs-m); line-height: 1.45; max-width: 34em; }
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 0 var(--gutter);
}
.process li { display: flex; flex-direction: column; gap: 10px; }
/* Grote stapnummers in plaats van iconen */
.process .step-no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-xl);
  line-height: 0.9;
  color: var(--pink);
  margin-bottom: clamp(8px, 1vw, 16px);
}
.process h3 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-l);
  line-height: 1;
}
.process p { font-size: var(--fs-s); color: var(--muted); line-height: 1.5; }

/* ===== PROJECTPAGINA ===== */
.case-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gutter);
  padding: clamp(24px, 3.5vw, 56px) var(--gutter) 0;
}
.case-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: color 250ms ease;
}
.case-nav-link .arrow { display: inline-block; transition: transform 180ms var(--ease); }
.case-nav-link:hover { color: var(--ink); }
.case-nav-link:hover .arrow { transform: translateX(-4px); }
.case-nav-next:hover .arrow { transform: translateX(4px); }

/* Tekstblokken: label links, tekst rechts op het 12-koloms grid */
.detail-block-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 12px;
  padding: 0 var(--gutter);
  margin-top: clamp(56px, 7vw, 120px);
}
.detail-block-row:first-child { margin-top: clamp(28px, 3.5vw, 56px); }
.detail-block-label {
  grid-column: 1 / span 2;
  font-family: var(--font-mono);
  font-weight: var(--label-weight);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  color: var(--muted);
  padding-top: 0.5em;
}
.detail-block-text {
  grid-column: 3 / span 7;
  font-size: var(--fs-m);
  line-height: 1.5;
}
.detail-block-text--lead {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-l);
  line-height: 1.05;
  grid-column: 3 / span 8;
}
/* Tags naast de eerste tekst: opdrachtgever, titel, jaar */
.detail-block-row--has-sidebar .detail-block-text--lead { grid-column: 3 / span 7; }
.detail-sidebar {
  grid-column: 10 / span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 1px solid var(--ink);
  font-size: var(--fs-s);
  line-height: 1.4;
}
.detail-sidebar-client { font-weight: 600; }
.detail-sidebar-title { color: var(--muted); }
.detail-sidebar-year-wrap { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.detail-sidebar-year-wrap .detail-sidebar-client {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  color: var(--muted);
}

.detail-image-row {
  display: grid;
  gap: var(--gutter);
  padding: 0 var(--gutter);
  margin-top: clamp(40px, 5vw, 80px);
}
.detail-image-frame { overflow: hidden; border-radius: var(--radius); }
.detail-image { width: 100%; height: auto; }

.detail-video-wrap {
  margin: clamp(40px, 5vw, 80px) var(--gutter) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}
.detail-video-iframe { width: 100%; height: 100%; border: 0; }

/* Credits */
.project-credits-section { display: none; margin: 0 var(--gutter); }
.project-credits-section.has-content { display: block; }
.detail-credits-title {
  font-family: var(--font-mono);
  font-weight: var(--label-weight);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--label-track);
  color: var(--muted);
  margin-bottom: 18px;
}
.detail-credits-inner { display: flex; flex-wrap: wrap; gap: 20px clamp(40px, 5vw, 96px); }
.detail-credit-item { display: flex; flex-direction: column; gap: 2px; }
.detail-credit-label { font-size: var(--fs-s); color: var(--muted); }
.detail-credit-value { font-size: var(--fs-s); font-weight: 500; }
.detail-credit-link { border-bottom: 1px solid currentColor; }
.detail-credit-link:hover { color: var(--hover); }

/* ===== PERSOONLIJK WERK ===== */
.personal-grid-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding: 0 var(--gutter);
}
.personal-col { flex: 1; display: flex; flex-direction: column; gap: var(--gutter); }
.personal-item { cursor: zoom-in; overflow: hidden; position: relative; border-radius: var(--radius); }
.personal-item img,
.personal-item video { width: 100%; height: auto; transition: transform 260ms var(--ease); }
.personal-item:hover img,
.personal-item:hover video { transform: scale(1.03); }
.personal-item.has-bg img { position: absolute; top: 12.5%; left: 12.5%; width: 75%; height: 75%; object-fit: contain; }
.personal-empty { color: var(--muted); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(242, 239, 243, 0.96); }
.lightbox-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 90vw; }
.lightbox-img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius); }
.lightbox-close {
  position: fixed;
  top: var(--gutter);
  right: var(--gutter);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
}
.lightbox-title { font-size: var(--fs-s); }

/* ===== OVER MIJ: grote foto links (blijft staan), titel en tekst rechts ===== */
.about-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 36px) var(--gutter);
  padding: clamp(24px, 3.5vw, 56px) var(--gutter) 0;
  align-items: start;
}
.about-image-col {
  grid-column: 1 / span 5;
  grid-row: 1;
  position: sticky;
  top: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-image-wrap { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.about-image { width: 100%; height: 100%; object-fit: cover; }
.about-tags { color: var(--muted); font-size: var(--fs-s); }
/* Tags op de foto: wit, onderin, op het zwarte shirt */
.about-image-wrap .about-tags {
  position: absolute;
  left: clamp(14px, 1.6vw, 24px);
  right: clamp(14px, 1.6vw, 24px);
  bottom: clamp(12px, 1.4vw, 22px);
  color: #fff;
  font-size: var(--fs-m);
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.pride-flag { display: inline-block; vertical-align: -0.1em; }
.pride-flag svg { display: block; width: 1.35em; height: 0.9em; }
.about-text-col { grid-column: 6 / span 6; grid-row: 1; padding-left: clamp(0px, 2vw, 32px); display: flex; flex-direction: column; gap: 1.1em; max-width: 40em; }
.about-lede { font-size: var(--fs-l); line-height: 1.05; margin-bottom: 0.4em; }
.about-paragraph { font-size: var(--fs-m); line-height: 1.55; }
.mail-link {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  transition: color 200ms ease;
}
.mail-link:hover { color: var(--hover); }

/* ===== REVEAL BIJ SCROLLEN ===== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Koppen in maskerregels */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; transform: translateY(105%); transition: transform 450ms var(--ease); transition-delay: var(--d, 0ms); }
.line.is-in > span { transform: none; }

/* Compatibel met bestaande scripts (persoonlijk werk) */
.grid-enter { animation: rise-in 380ms var(--ease) both; animation-delay: var(--enter-delay, 0ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .skill-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {

  .process { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  .detail-block-row--has-sidebar .detail-block-text--lead,
  .detail-sidebar { grid-column: 1 / -1; }

  .detail-block-label,
  .detail-block-text,
  .detail-block-text--lead { grid-column: 1 / -1; }

  .about-image-col,
  .about-text-col { grid-column: 1 / -1; grid-row: auto; position: static; padding-left: 0; }
  .about-image-col { max-width: 520px; }
}

/* Menu blijft zichtbaar tot telefoonformaat; pas daarna de knop "Menu" */
@media (max-width: 760px) {
  /* Mailadres in de footer past op één regel */
  .footer-cta { font-size: clamp(24px, 9vw, 60px); }
  /* Projectpagina: zijbalk naast de intro weg (staat ook in de projectdetails) */
  .detail-sidebar { display: none; }
  /* Projectdetails als tabel: labels links onder elkaar, invulling rechts */
  .detail-credits-inner { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; }
  .detail-credit-item { display: contents; }
  .main-nav { display: none; }
  .header-right { margin-left: auto; border-left: 0; padding-left: 0; }
  .menu-toggle { display: inline-flex; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid > * { grid-column: auto !important; }
  /* Projectpagina: beelden onder elkaar in plaats van naast elkaar */
  .detail-image-row { grid-template-columns: 1fr !important; }

  .process { grid-template-columns: 1fr; }

  .skill-list { grid-template-columns: 1fr; }
  /* Wat ik doe: foto onderaan de kaart, aflopend links, rechts en onder.
     Dun randje om de kaart en tussen de foto en de rest van de kaart. */
  .skill { grid-template-rows: auto auto auto; border: 1px solid var(--frame); overflow: hidden; }
  .skill-photo {
    display: block;
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: 3 / 2;   /* zelfde verhouding als het zwevende beeld bij hover */
    margin: clamp(4px, 1vw, 8px) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    border: 0;
    border-top: 1px solid var(--frame);
    border-radius: 0;
  }
  .footer-row .copyright { margin-left: 0; width: 100%; }
  .personal-grid-wrap { flex-direction: column; }
}

@media (pointer: coarse) {
  .cursor-follow,
  .preview-follow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .line > span,
  .reveal { transform: none; opacity: 1; }
  .marquee-track { animation: none; }
}