/* Zelf gehoste lettertypes (SIL Open Font License): Geist en Libre Baskerville */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-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:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/libre-baskerville-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:'Libre Baskerville';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/libre-baskerville-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/libre-baskerville-italic-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:'Libre Baskerville';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/libre-baskerville-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:104.8%;ascent-override:95.9%;descent-override:28.1%;line-gap-override:0%}
@font-face{font-family:'Libre Baskerville Fallback';src:local('Georgia');size-adjust:116.8%;ascent-override:83%;descent-override:23.1%;line-gap-override:0%}
/* ==========================================================================
   Lode Bellens, lodebellens.be
   Eén stylesheet, mobile first. Volgorde: tokens, basis, layout, componenten,
   pagina's, beweging, print.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #f1efea;
  --paper-2: #e8e5dd;
  --paper-3: #dcd8cd;
  --white: #ffffff;
  --ink: #333333;
  --ink-hover: #4a4a4a;
  --ink-2: #4a4845;
  --muted: #6e6a63;
  --line: rgb(51 51 51 / 0.14);
  --line-2: rgb(51 51 51 / 0.28);
  --accent: #006fab;
  --accent-hover: #004f7a;
  --live: #2db36b;

  --night: #333333;
  --on-night: #f1efe9;
  --on-night-2: #d6d2c8;
  --on-night-muted: #a9a59c;
  --line-night: rgb(241 239 233 / 0.18);

  --sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Libre Baskerville", "Libre Baskerville Fallback", Georgia, "Times New Roman", serif;

  --fs-display: clamp(3rem, 0.9rem + 7.9vw, 9.25rem);
  --fs-case: clamp(3.25rem, 1rem + 9vw, 11.5rem);
  --fs-h2: clamp(2.125rem, 1.15rem + 3.5vw, 5rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem);
  --fs-lead: clamp(1.3125rem, 1.05rem + 1vw, 2.125rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  /* Libre Baskerville is breed en heeft een grote x-hoogte: iets kleiner zetten, met ruime interlinie */
  --fs-serif: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-serif-lead: clamp(1.3125rem, 1.08rem + 0.85vw, 1.875rem);
  --fs-sm: 0.9375rem;
  --fs-nav: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-xs: 0.75rem;

  --gutter: clamp(1.25rem, 0.55rem + 3.3vw, 4rem);
  --gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  --maxw: 110rem;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --header-h: 3.75rem;
  --section: clamp(6rem, 3rem + 10vw, 12rem);

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --header-h: 4.25rem; }
}
@media (min-width: 1024px) {
  :root { --header-h: 100px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  hanging-punctuation: first;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Losse woorden (inline-block, zie splitWords in main.js) zijn voor Safari elk een eigen eerste regel:
   een haakje of aanhalingsteken vooraan zou dan uithangen en over het vorige woord schuiven */
.w, .w > span, .nf__title em { hanging-punctuation: none; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.55 var(--sans);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
img { border-radius: 4px; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
em { font-style: italic; }
sup { line-height: 0; }

::selection { background: var(--accent); color: var(--white); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

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

.skip {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

main:focus { outline: none; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Typografie ---------- */
.section-head {
  margin-bottom: clamp(2.5rem, 1rem + 5vw, 5.5rem);
}

.section-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 16ch;
}
.section-title--sm { max-width: 20ch; }
.section-title em,
.music__title em,
.cta em {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: 0.88em;
  line-height: 0;
}
/* Links: in de steunkleur, zonder onderlijning */
.link-u,
.link-arrow,
.link-draw {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.25s;
}
.link-u:hover,
.link-arrow:hover,
.link-draw:hover { color: var(--accent-hover); }

.link-u {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.link-u .icon { width: 0.75em; height: 0.75em; transition: transform 0.35s var(--ease-out); }
.link-u:hover .icon { transform: translate(0.08em, -0.08em); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding-block: 0.3em;
  font-weight: 560;
}
.link-arrow .icon { transition: transform 0.45s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(0.15em); }
.link-arrow--back:hover .icon { transform: translateX(-0.15em); }

/* ---------- Header ---------- */
/* De header scrolt gewoon mee met de pagina (absolute, het script zet --header-top). Zodra je terugscrolt,
   wordt hij vastgezet (.is-pinned) en schuift hij meteen weer in beeld. */
.site-header {
  position: absolute;
  inset: var(--header-top, 0px) 0 auto;
  z-index: 50;
  height: var(--header-h);
  color: var(--ink);
  transition: color 0.35s;
  view-transition-name: site-header;
}
.site-header.is-pinned,
.site-header.is-menu { position: fixed; inset: 0 0 auto; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: opacity 0.35s, border-color 0.35s;
}
.site-header.is-scrolled::before { border-color: var(--line); }
.site-header.is-menu::before { opacity: 0; }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  font-weight: 620;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.nav__list {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: var(--fs-nav);
  font-weight: 520;
  text-decoration: none;
  transition: background-color 0.25s;
}
.nav__link:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.nav__link.is-current::after { transform: scale(1); }

/* Beschikbaarheid: een witte pill met het bolletje, naar het contactblok. Bij hover vult hij zich
   zoals de andere knoppen. De kleur van het bolletje volgt de stand in het beheerscherm. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-left: 0.75rem;
  padding: 0 1.2rem 0 1.05rem;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.status:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.status:hover .status__dot { box-shadow: 0 0 0 2px var(--white); }

[data-status="beperkt"] { --live: #e39a1c; }
[data-status="volgeboekt"] { --live: #cf4f3c; }

.status__dot {
  position: relative;
  flex: none;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
}
.status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  animation: ping 3.2s var(--ease-out) infinite;
}
[data-status="volgeboekt"] .status__dot::after { animation: none; opacity: 0; }
@keyframes ping {
  0% { transform: scale(1); opacity: 0.35; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  height: 2.5rem;
  margin-right: -0.5rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 520;
}
.menu-toggle__icon {
  position: relative;
  width: 1.25rem;
  height: 0.6rem;
}
.menu-toggle__icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: calc(100% - 1.5px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }

@media (max-width: 767.98px) {
  .js .nav, .js .site-header .status { display: none; }
  .js .menu-toggle { display: inline-flex; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .status { display: none; }
}

/* Mobiel menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  background: var(--paper) var(--grain);
  color: var(--ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s linear 0.6s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s;
}
.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) max(2rem, env(safe-area-inset-bottom));
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.35rem;
  font-size: clamp(3.75rem, 15vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
}
.menu__label { display: inline-block; }
.menu li {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
}
.menu.is-open li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.25s + var(--i, 0) * 0.07s);
}
.menu__foot {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.menu__mail { font-size: 1.25rem; font-weight: 560; color: var(--accent); text-decoration: none; }
.menu__status { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-weight: 520; }
.menu__socials { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.menu__socials a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.menu__socials .icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Hero (start) ---------- */
.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 6vh, 4rem));
  padding-bottom: clamp(2rem, 6vh, 4rem);
}
.hero__inner {
  display: flex;
  flex-direction: column;
}

.hero__title {
  /* Op smalle schermen bepaalt het langste woord (‘communicator’) de grootte. */
  --fit: min(calc((100vw - 2 * var(--gutter)) / 6.5), 4.25rem);
  margin: auto 0 clamp(1.75rem, 5vh, 3.25rem);
  font-size: var(--fit);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -0.047em;
}
.hero__title em {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.86em;
  letter-spacing: -0.045em;
  line-height: 0.8;
  padding-right: 0.06em;
}
.hero__title .w {
  display: inline-block;
  vertical-align: top;
  overflow: clip;
  overflow-clip-margin: 0.05em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero__title .w > span { display: inline-block; }
.hero__title .nb { white-space: nowrap; }
.hero__foot {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.hero__lead {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__aside {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
  color: var(--ink-2);
}
/* Handmatige regelafbreking (token {br} in de inhoud): alleen op breed. */
.br-wide { display: none; }
@media (min-width: 900px) {
  .br-wide { display: inline; }
}

.hero__avail {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 1.6;
  text-wrap: pretty;
}
/* het bolletje van de status staat vooraan, op de hoogte van de x-hoogte */
.hero__avail .status__dot { margin-right: 0.6em; vertical-align: 0.12em; }
/* hangend inspringen: de volgende regels lijnen uit met de tekst, niet met het bolletje */
.hero__avail:has(> .status__dot:first-child) {
  padding-left: calc(0.5rem + 0.6em);
  text-indent: calc(-0.5rem - 0.6em);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Op een breed maar laag scherm (zoals een MacBook in Safari) volgt de titel ook de hoogte,
   zodat er boven de titel genoeg plaats blijft voor het bandje. Onder 1280 px breed (een liggende
   tablet) laat die grens geleidelijk los: daar blijft de titel groot en zoekt het bandje plaats
   naast de titel (js/bandje.js, minimumgrootte). */
@media (min-width: 768px) {
  .hero__title { font-size: min(var(--fs-display), calc(12svh + max(0px, (1280px - 100vw) * 0.3))); }
}
/* Mobiel staande: altijd genoeg ruimte boven de titel, zodat het bandje (dat dit vlak vult)
   groot blijft en rechts uit beeld loopt, ook op een laag scherm zoals een iPhone in Safari.
   Is het scherm hoger, dan vult de auto-marge van de titel de rest zoals voorheen. */
@media (max-width: 767px) and (orientation: portrait) {
  .hero__inner::before { content: ""; flex: none; height: 80vw; }
}

@media (min-width: 900px) {
  /* Lead op twee regels, beschikbaarheid eronder in dezelfde breedte,
     de knop rechts op dezelfde hoogte. */
  .hero__foot {
    grid-template-columns: minmax(0, calc(var(--fs-lead) * 24)) 1fr;
    column-gap: var(--gap);
  }
  .hero__aside { display: contents; }
  .hero__avail { grid-column: 1; }
  .hero__aside .hero__actions {
    justify-content: flex-end;
    grid-column: 2;
    /* over beide rijen: als de knoppen onder elkaar staan (middelbreed) groeit de rij
       niet mee en valt de onderkant van de knoppen samen met die van de tekst */
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: end;
  }
}
/* Het 3D-polsbandje (js/bandje.js) zweeft over het lege vlak boven de titel. Bij het scrollen
   verdwijnt het achter de witte header (die is 50). Het script zet de hoogte en schuift de laag mee.
   Met het mobiele menu open verdwijnt het even, anders ligt het boven het menu. */
.hero__band {
  position: absolute;
  inset: 0 0 auto;
  z-index: 49;
  pointer-events: none;
  transition: opacity 0.35s;
}
body:has(.menu.is-open) .hero__band { opacity: 0; }
.hero__band canvas {
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__band.is-ready canvas { opacity: 1; }

/* ---------- Werk ---------- */
.work { padding-top: var(--section); }
/* Ankers uit het menu: de sectie begint helemaal bovenaan, zodat er niets van de sectie erboven in beeld blijft.
   De header schuift bij naar beneden scrollen weg; de witruimte van padding-top blijft zichtbaar. */
.work, .about, .site-footer { scroll-margin-top: calc(-1 * (var(--header-h) + 1.5rem)); }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 2rem + 4vw, 5rem) var(--gap);
}
@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(12, 1fr);
    row-gap: clamp(5rem, 2rem + 7vw, 10rem);
  }
  .card--0 { grid-column: 1 / span 7; }
  .card--1 { grid-column: 9 / span 4; align-self: end; }
  .card--2 { grid-column: 1 / span 4; }
  .card--3 { grid-column: 6 / span 7; }
}

.card__link {
  display: block;
  text-decoration: none;
  outline-offset: 8px;
}
.card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  background: var(--ph, var(--paper-2));
}
.card__img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.03;
  transition: scale 1.4s var(--ease-out), filter 0.6s;
}
.card__link:hover .card__img { scale: 1.06; }

.card__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 1rem;
  padding-top: 1.1rem;
}
.card__title {
  grid-column: 1;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.card__sub {
  grid-column: 1;
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.4;
  color: var(--ink-2);
}
.card__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.card__arrow .icon { transition: transform 0.5s var(--ease-out); }
.card__link:hover .card__arrow { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card__link:hover .card__arrow .icon { animation: nudge 0.6s var(--ease-out); }
@keyframes nudge {
  0% { transform: translateX(0); }
  45% { transform: translateX(120%); }
  46% { transform: translateX(-120%); }
  100% { transform: translateX(0); }
}

/* ---------- Klanten ---------- */
.clients { padding-top: var(--section); }

.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 700px) {
  .logos { grid-template-columns: repeat(7, 1fr); }
}
.logos__item {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
@media (min-width: 700px) {
  .logos__item { aspect-ratio: 5 / 4; }
}
.logos__logo {
  width: 88%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- Over mezelf ---------- */
/* Beige zoals de rest van de pagina; het portret staat bovenaan gelijk met de tekst ernaast. */
.about { padding-top: var(--section); }

.about__grid {
  display: grid;
  gap: 2rem var(--gap);
}
.about__head { display: grid; gap: 1.25rem; }
.about__text { padding-bottom: clamp(1rem, 3vw, 2rem); }
.about__portrait {
  order: 1;                    /* smal: onder de tekst */
  margin: 0;
  width: min(72%, 20rem);
  margin-bottom: var(--section);
  overflow: hidden;
}
.about__img { display: block; width: 100%; height: auto; }
.about__lead {
  max-width: calc(40 * var(--fs-serif));   /* nooit breder dan de tekst eronder */
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.about__body {
  max-width: 40em;
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 2.1;
  color: var(--ink);
}
.about__body p { margin-bottom: 0.8em; }
.about__body p { text-wrap: pretty; }
.about__body p:last-child { margin-bottom: 0; }

.about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.about__cta-note {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-serif);
  color: var(--ink-2);
}

/* Knoppen: elke call to action krijgt dezelfde pill-vorm, alleen de vulling verschilt */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  /* vaste hoogte, zodat een pill met merkicoontje even hoog blijft als een zonder */
  min-height: 3rem;
  padding: 0 1.5rem;
  /* 1.5px: even dik als de streek van het pijltje in de pill */
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
/* Bij hover draait de pill om: vulling in de achtergrondkleur van de site, blauwe rand en tekst */
.button:hover { background: var(--paper); border-color: var(--accent); color: var(--accent); }
.button .icon { transition: transform 0.45s var(--ease-out); }
.button:hover .icon { transform: translateX(0.15em); }
/* Het merkicoontje vooraan blijft staan, alleen de pijl achteraan beweegt mee */
.button .icon--social { width: 1.15em; height: 1.15em; }
.button:hover .icon--social { transform: none; }

.button--down:hover .icon { transform: translateY(0.12em); }

/* Omlijnd: de tweede keuze naast een gevulde knop. Bij hover vult hij zich. */
.button--ghost { background: transparent; color: var(--accent); }
.button--ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: repeat(12, 1fr);
    row-gap: clamp(3rem, 6vw, 5rem);
    padding-bottom: var(--section);   /* buiten de tekstkolom, zodat de foto stopt bij de knop */
  }
  .about__head { grid-column: 1 / -1; }
  .about__portrait {
    order: 0;
    grid-column: 1 / span 4;
    grid-row: 2;
    width: auto;            /* 4 kolommen, even breed als de kleine thumbnails bij Mijn werk */
    align-self: start;
    margin: 0.35rem 0 0;       /* optisch gelijk met de bovenkant van de openingszin */
    /* de foto schuift mee tot haar onderkant gelijk ligt met de knop 'Stuur me een mailtje' */
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
  .about__text { grid-column: 6 / -1; grid-row: 2; padding-bottom: 0; }
}

/* ---------- Instagram (boven Over mezelf) ---------- */
/* Een trage rij posts die naar links drijft (js: initPosts), verspringend op de y-as zoals de platenhoezen.
   Zonder script of met minder beweging: gewoon een rij om zelf door te scrollen. */
.posts { padding-top: clamp(4rem, 2rem + 6vw, 8rem); overflow: hidden; }
.posts__title {
  max-width: 18ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.posts__title em {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: 0.88em;
  line-height: 0;
}
.posts__intro {
  max-width: 34em;
  margin: 1.25rem 0 0;
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 2.1;
}
.posts__rail {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-block: 0.5rem clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.posts__rail::-webkit-scrollbar { display: none; }
.posts__rail.is-live {
  overflow: hidden;
  touch-action: pan-y;        /* verticaal scrollt de pagina, horizontaal slepen doet het script */
  cursor: grab;
}
.posts__rail.is-dragging { cursor: grabbing; }
.posts__rail.is-dragging .post__card { pointer-events: none; }
.posts .posts__list {   /* .posts: wint van de reset op ul[role=list] */
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 0.75rem + 2.5vw, 3.5rem);
  width: max-content;
  margin: 0;
  padding: 0 var(--edge);
  list-style: none;
}
.posts__rail.is-live .posts__list { will-change: transform; }
.post { flex: 0 0 auto; width: clamp(16rem, 11rem + 11vw, 22rem); }
/* zelfde ritme als de platenhoezen: de middelste zakt het diepst, de derde hangt ertussenin (klassen uit build.py) */
.post--low { margin-top: clamp(2.5rem, 1rem + 5vw, 6rem); }
.post--mid { margin-top: clamp(1.25rem, 0.5rem + 2.5vw, 3rem); }
/* Bij het binnenkomen verschijnen de posts één voor één van links naar rechts, telkens als hun beeld klaar is
   (main.js zet .is-in). Posts die dan nog rechts buiten beeld staan, zijn er meteen zodra de rij vertrekt (.is-shown). */
.posts__rail.is-live .post {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
}
.posts__rail.is-live .post.is-in,
.posts__rail.is-shown .post { opacity: 1; translate: none; }
.posts__rail.is-shown .post:not(.is-in) { transition: none; }

.post__card {
  overflow: hidden;
  border-radius: 0.875rem;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(51 51 51 / 0.08), 0 22px 40px -28px rgb(51 51 51 / 0.55);
  transition: box-shadow 0.5s var(--ease-out), translate 0.6s var(--ease-out);
}
.post__card:hover,
.post__card:focus-within {
  translate: 0 -0.35rem;
  box-shadow: 0 1px 2px rgb(51 51 51 / 0.1), 0 30px 50px -28px rgb(51 51 51 / 0.6);
}
.post__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
}
.post__avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line);
}
.post__who { display: grid; min-width: 0; line-height: 1.25; }
.post__name {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.25s;
}
.post__name:hover { color: var(--accent); }
.post__date { font-size: 0.8125rem; color: var(--muted); }

.post__media {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  background: var(--paper-2);
  user-select: none;
  -webkit-user-select: none;
}
.post__media:has(.post__nav) { cursor: pointer; }
.posts .post__slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.post__slide {
  position: absolute;
  inset: 0;
  background: var(--ph);
  /* schuiven zoals een veeg op Instagram: het nieuwe beeld duwt het oude opzij (richting zet main.js).
     Bewust zonder will-change of 3D-transform: dan kreeg elk beeld in de rij (ruim 300) een eigen grafische
     laag, en daarvan sluit een iPhone de pagina af. Wie niet aan de beurt is, verdwijnt na het schuiven. */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.65s;
}
.post__slide.is-current { visibility: visible; transform: none; transition-delay: 0s; }
.post__img,
.post__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;   /* enkel de kaart is afgerond, niet de beelden erin */
  -webkit-user-drag: none;
}
/* een beeld dat main.js opnieuw laadt, komt zacht uit de placeholderkleur */
.post__img { transition: opacity 0.5s; }
.post__img.is-loading { opacity: 0; }
.post__video { opacity: 0; transition: opacity 0.4s; }
.post__slide.is-playing .post__video { opacity: 1; }

/* pijltjes enkel bij hover, bolletjes en teller in de stijl van Instagram */
.post__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.88);
  color: var(--ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.15);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s, scale 0.3s var(--ease-out);
}
.post__nav .icon { width: 1rem; height: 1rem; }
.post__nav--prev { left: 0.6rem; }
.post__nav--next { right: 0.6rem; }
.post__nav:hover { scale: 1.08; }
.post__card:hover .post__nav,
.post__nav:focus-visible { opacity: 1; }
@media (hover: none) { .post__nav { display: none; } }
.post__dots {
  position: absolute;
  inset: auto 0 0.7rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  pointer-events: none;
}
.post__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  box-shadow: 0 0 3px rgb(0 0 0 / 0.25);
  transition: background-color 0.4s, scale 0.4s;
}
.post__dot.is-current { background: var(--white); scale: 1.2; }
.post__count {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgb(26 26 26 / 0.62);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.post__card:hover .post__count { opacity: 1; }
.post__sound {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(26 26 26 / 0.62);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.3s, visibility 0.3s;
}
.post__sound .icon { width: 1.05rem; height: 1.05rem; }
.post__media.is-video .post__sound { opacity: 1; visibility: visible; }
.post__sound[aria-pressed="true"] .post__sound-off,
.post__sound[aria-pressed="false"] .post__sound-on { display: none; }

.post__foot { display: grid; gap: 0.55rem; padding: 0.9rem 1rem 1.1rem; }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.9rem;
  margin: 0;
  font-size: 0.9375rem;
}
.post__role { font-family: var(--serif); font-style: italic; font-size: 0.875rem; color: var(--ink-2); }
.post__caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.post__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--accent);
  text-decoration: none;
}
.post__link .icon { width: 0.85rem; height: 0.85rem; transition: transform 0.4s var(--ease-out); }
.post__link:hover .icon { transform: translate(0.1em, -0.1em); }

/* ---------- Muziek (onder Over mezelf) ---------- */
.music { padding-bottom: var(--section); }
.music { padding-top: clamp(4rem, 2rem + 6vw, 8rem); }
.music__title {
  max-width: 18ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.music__intro {
  max-width: 34em;
  margin: 0.75rem 0 0;
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 2.1;
}

/* Playlists als platenhoezen: het randje van de plaat steekt uit, bij hover schuift ze rustig verder */
.music .sleeves {   /* .music: wint van de reset op ul[role=list] */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2.75rem, 1.5rem + 4.5vw, 6.5rem);
  margin-top: 90px;
  padding-right: 0;
}
.sleeve__link {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  color: inherit;
  text-decoration: none;
  outline-offset: 6px;
}
.sleeve__art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  isolation: isolate;
}
.sleeve__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  background: var(--ph);
  box-shadow: 0 1px 2px rgb(51 51 51 / 0.12), 0 16px 30px -20px rgb(51 51 51 / 0.5);
  transform-origin: 30% 100%;
  transition: transform 1.2s var(--ease-out);
}
.sleeve__disc {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 2.4%, var(--label) 2.9% 16.5%, rgb(0 0 0 / 0.22) 17% 17.6%, transparent 18%),
    repeating-radial-gradient(circle, color-mix(in srgb, var(--vinyl, #3c3c3c) 88%, #000) 0 1.2px, var(--vinyl, #3c3c3c) 1.2px 2.6px);
  /* stevige schaduw zodat ook een witte plaat (Bleachers) loskomt van het papier */
  box-shadow: 0 1px 3px rgb(51 51 51 / 0.22), 0 12px 24px -10px rgb(51 51 51 / 0.85);
  transform: translateX(9%);
  transition: transform 1.2s var(--ease-out);
}
.sleeve__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent 0 9%, rgb(255 255 255 / 0.09) 13%, transparent 18% 57%, rgb(255 255 255 / 0.06) 61%, transparent 66%);
}
.sleeve__link:hover .sleeve__disc,
.sleeve__link:focus-visible .sleeve__disc { transform: translateX(18%) rotate(40deg); }
/* de hoes kantelt licht achterover terwijl de plaat eruit rolt */
.sleeve__link:hover .sleeve__img,
.sleeve__link:focus-visible .sleeve__img { transform: translateX(-6%) rotate(-3deg); }
.sleeve__text { display: grid; gap: 0.2rem; }
.sleeve__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  transition: color 0.25s;
}
.sleeve__link:hover .sleeve__name { color: var(--accent); }
.sleeve__meta { font-size: var(--fs-sm); color: var(--ink); }
.sleeve__with {
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}
/* hoogtes variëren: de middelste zakt het diepst, de derde hangt ertussenin */
@media (min-width: 641px) {
  .music .sleeves > :nth-child(3n+2) { margin-top: clamp(2.5rem, 1rem + 5vw, 6rem); }
  .music .sleeves > :nth-child(3n+3) { margin-top: clamp(1.25rem, 0.5rem + 2.5vw, 3rem); }
}
@media (max-width: 640px) {
  .music .sleeves { grid-template-columns: 1fr; gap: 1.75rem; padding-right: 0; }
  .sleeve__link { grid-template-columns: 6.5rem 1fr; align-items: center; gap: 0 1.9rem; }
}

/* Playlists: vier naast elkaar over de volle breedte, beeld met naam en artiesten eronder */
.plists { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.plists__title {
  max-width: 18ch;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--ink);
}
.plists__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.5rem, 0.75rem + 2.75vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .plists__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plist__link {
  --pad: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  /* het kader hoort bij de hover: padding erbij, negatieve marge eraf, zodat het raster niet verschuift */
  margin: calc(var(--pad) * -1);
  padding: var(--pad);
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.plist__link:hover,
.plist__link:focus-visible {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.plist__art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 0.7rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--ph, var(--paper-2));
}
.plist__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Spotify-afspeelknop, rechtsonder op de hoes */
.plist__play {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #1ed760;
  color: #000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.2s;
}
.plist__play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; margin-left: 0.1rem; }
.plist__link:hover .plist__play,
.plist__link:focus-visible .plist__play { opacity: 1; transform: none; }
.plist__play:hover { background: #3be477; }
@media (hover: none) { .plist__play { display: none; } }
.plist__name {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.plist__with { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); text-wrap: pretty; }

/* Onlangs beluisterd, als line-up op een affiche */
.lineup {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
  background: var(--white);
  text-align: center;
}
.lineup__label {
  margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-serif);
  color: var(--ink-2);
}
.lineup__line {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.3;
  text-wrap: balance;
}
.lineup__line + .lineup__line { margin-top: 0.55rem; }
.lineup__line li { display: inline; }
/* puntje ná elke naam behalve de laatste: een regel breekt altijd netjes tussen twee namen */
.lineup__line li:not(:last-child)::after { content: "·"; margin-left: 0.4em; font-weight: 400; color: var(--accent); }
.lineup__line--1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; }
.lineup__line--2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 560; letter-spacing: -0.025em; }
.lineup__line--3 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.lineup__a { color: inherit; text-decoration: none; transition: color 0.25s; }
.lineup__a:hover { color: var(--accent); }
.lineup__note { margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0; font-size: 0.8125rem; color: var(--muted); }

.music__profile { margin: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 0 0; }

/* ---------- Contactbalk (gsm) ---------- */
/* Vast onderaan zodra je voorbij de hero bent, weg zodra het contactblok in beeld komt. */
.dock { display: none; }
@media (max-width: 767.98px) {
  .dock {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 0.5rem 1.75rem rgb(51 51 51 / 0.16), 0 0 0 1px var(--line);
    opacity: 0;
    visibility: hidden;
    translate: 0 120%;
    transition: opacity 0.35s var(--ease-out), translate 0.55s var(--ease-out), visibility 0s linear 0.55s;
  }
  .has-scrolled-far .dock:not(.is-away) {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity 0.35s var(--ease-out), translate 0.55s var(--ease-out), visibility 0s;
  }
  html:not(.js) .dock { display: none; }
}
.dock__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0 auto 0 0.8rem;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 560;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dock__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 560;
  line-height: 1;
  text-decoration: none;
}
.dock__btn--mail { background: var(--accent); color: var(--white); }
.dock__btn .icon { width: 1.05em; height: 1.05em; }

/* ---------- Footer / contact ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--section);
  background: var(--white);
  color: var(--ink);
}

.cta-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: var(--fs-sm);
  font-weight: 560;
}
.cta-intro {
  max-width: 30ch;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-serif-lead);
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: balance;
}

.cta {
  max-width: 17ch;
  margin: 1.25rem 0 clamp(3.5rem, 2rem + 6vw, 7rem);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.cta a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: 0.88em;
}

.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.contact__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.contact__address {
  font-size: clamp(1.875rem, 1rem + 3.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.contact__address:hover { color: var(--accent-hover); }

.contact__mail { position: relative; flex-direction: column; align-items: flex-start; gap: 1.75rem; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr);
  gap: 2rem var(--gap);
  margin: 0;
}
@media (min-width: 700px) {
  .contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact__col { display: grid; align-content: start; gap: 0.35rem; }
.contact__grid p { margin: 0; }
.contact__grid { font-weight: 600; color: var(--ink); line-height: 1.6; }
.contact__socials { display: grid; align-content: start; gap: 0; list-style: none; margin: 0; padding: 0; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s;
}
/* icoon en naam samen in de tekstkleur, allebei blauw bij hover */
.social:hover { color: var(--accent); }
.social .icon { width: 1.5rem; height: 1.5rem; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-block: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  font-weight: 560;
  color: var(--accent);
  padding: 0.5rem 0;
  transition: color 0.25s;
}
.to-top .icon { transition: transform 0.4s var(--ease-out); }
.to-top:hover { color: var(--accent-hover); }
.to-top:hover .icon { transform: translateY(-0.12em); }

.site-footer__word {
  padding-inline: var(--edge);
  padding-bottom: 0;
  color: #eae7e3;
  line-height: 0;
  pointer-events: none;   /* de letters steken boven de balk uit en mogen ‘Terug naar boven’ niet afdekken */
}
.wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark text {
  font-family: var(--sans);
  font-size: 1000px;
  font-weight: 640;
  letter-spacing: -45px;
  fill: currentColor;
}

/* ---------- Case ---------- */
/* Projectpagina met een witte achtergrond (instelling per project in het beheerscherm) */
html:has(body.page-white),
body.page-white { background: var(--white); }
.page-white .site-footer { border-top: 1px solid var(--line); }

/* Donkergrijze projectpagina: de kleuren binnen de pagina draaien om, header en footer blijven wit */
html:has(body.page-dark),
body.page-dark { background: #333333; }
.page-dark main {
  --paper: #333333;
  --paper-2: #3d3d3d;
  --paper-3: #474747;
  --ink: #ffffff;
  --ink-hover: #e6e6e6;
  --ink-2: #e2e0db;
  --muted: #b3b0a9;
  --line: rgb(255 255 255 / 0.16);
  --line-2: rgb(255 255 255 / 0.32);
  --accent: #6fbbe8;
  --accent-hover: #a3d5f3;
  color: var(--ink);
}
.page-dark main ::selection { background: var(--accent); color: #333333; }

.case-head {
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 5vw, 5.5rem));
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.case-back {
  margin-bottom: clamp(2.5rem, 1rem + 6vw, 6rem);
  font-size: var(--fs-nav);
}

.case-title {
  font-size: var(--fs-case);
  line-height: 0.9;
  letter-spacing: -0.048em;
  text-wrap: balance;
}
.case-sub {
  margin: clamp(0.75rem, 2vw, 1.5rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-serif-lead);
  line-height: 1.1;
  color: var(--ink-2);
}

.case-hero {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ph);
}
.case-hero__media {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .case-hero { aspect-ratio: var(--ar-d, 16 / 9); max-height: 92svh; width: 100%; }
}

.case-intro {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3.5rem, 2rem + 6vw, 8rem);
}
@media (min-width: 1024px) {
  .case-intro { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .meta { grid-column: 1 / span 4; }
  .case-text { grid-column: 6 / -1; }
  .case-intro:not(:has(.meta)) .case-text { grid-column: 6 / -1; }
}
.case-text p {
  max-width: 40em;
  margin-bottom: 0.8em;
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 2.1;
  color: var(--ink);
  text-wrap: pretty;
}
.case-text p:last-child { margin-bottom: 0; }

.meta {
  display: grid;
  gap: 1.75rem;
  align-content: start;
  margin: 0;
}
.meta__row {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.meta dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.meta dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  font-weight: 520;
  color: var(--ink-2);
}
.meta__list { display: grid; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.meta__role { color: var(--muted); }
.meta__role::after { content: ":"; }

.case-media {
  display: grid;
  gap: var(--gap);
  padding-bottom: clamp(5rem, 3rem + 7vw, 10rem);
}
.row { display: grid; gap: var(--gap); }
.row--g2 { grid-template-columns: 1fr; }
.row--g2.row--keep { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .row--g2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .row--inset { padding-inline: calc(100% / 12); }
}

.media {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ar, auto);
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  background: var(--ph, var(--paper-2));
}
.media__zoom { display: block; height: 100%; }
.media__img,
.media__video {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--ease-out), opacity 0.5s;
}
.media__zoom:hover .media__img { scale: 1.012; }

.collage { grid-template-columns: repeat(6, 1fr); }
.collage__item { aspect-ratio: 1; }
.collage__item--0, .collage__item--1, .collage__item--2 { grid-column: span 2; }
.collage__item--3, .collage__item--4 { grid-column: span 3; }

.band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(var(--gap) * 3);
  overflow: hidden;
  background: var(--ph);
}
.band__img { width: 100%; height: auto; border-radius: 0; }

/* Videoknop */
.vbtn {
  position: absolute;
  right: clamp(0.6rem, 1.2vw, 1rem);
  bottom: clamp(0.6rem, 1.2vw, 1rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(51 51 51 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--paper);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s var(--ease-out), background-color 0.25s;
}
.vbtn:hover { background: rgb(51 51 51 / 0.85); transform: scale(1.03); }
.media--video:hover .vbtn,
.case-hero:hover .vbtn,
.vbtn:focus-visible,
.is-paused > .vbtn { opacity: 1; }
.vbtn__play { display: none; }
.is-paused .vbtn__play { display: grid; }
.is-paused .vbtn__pause { display: none; }
.vbtn .icon { width: 0.9rem; height: 0.9rem; }
.vbtn--hero { right: var(--gutter); bottom: 1.25rem; }
@media (hover: none) {
  .vbtn { opacity: 0.9; }
}

/* YouTube (pas geladen na klik) */
.media--yt { aspect-ratio: 16 / 9; }
.yt {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--paper);
  text-decoration: none;
}
.yt .media__img { filter: brightness(0.8); transition: filter 0.5s, scale 1.4s var(--ease-out); }
.yt:hover .media__img { filter: brightness(0.72); scale: 1.01; }
.yt__play {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.yt__btn {
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 5vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.5s var(--ease-out);
}
.yt__btn .icon { width: 1.1rem; height: 1.1rem; margin-left: 0.15rem; }
.yt:hover .yt__btn { transform: scale(1.04); }
.yt__label { font-weight: 600; line-height: 1.25; }
.yt__title { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.9375rem; opacity: 0.9; }
.yt__note {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  max-width: 18rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: right;
  color: rgb(241 239 233 / 0.7);
  pointer-events: none;
}
@media (max-width: 639.98px) { .yt__note { display: none; } }
.media--yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Volgende case */
.next {
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: var(--section);
  border-top: 1px solid var(--line);
}
.next__link {
  display: grid;
  gap: 1rem;
  text-decoration: none;
  outline-offset: 8px;
}
.next__label { font-size: var(--fs-sm); font-weight: 520; color: var(--muted); }
.next__title {
  font-size: calc(var(--fs-case) * 0.78);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  transition: transform 0.7s var(--ease-out);
}
.next__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-serif-lead);
  color: var(--ink-2);
}
.next__media {
  margin: 1rem 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  background: var(--ph);
}
.next__img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.02;
  transition: scale 1.4s var(--ease-out);
}
.next__link:hover .next__img { scale: 1.05; }
.next__arrow {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: background-color 0.3s, color 0.3s, transform 0.6s var(--ease-out);
}
.next__link:hover .next__arrow { background: var(--ink); color: var(--paper); transform: translateX(0.2rem); }
.next__aux {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-nav);
}
@media (min-width: 900px) {
  .next__link {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
  }
  .next__label { grid-column: 1 / span 7; grid-row: 1; align-self: start; }
  .next__title { grid-column: 1 / span 7; grid-row: 2; }
  .next__sub { grid-column: 1 / span 6; grid-row: 3; }
  .next__arrow { grid-column: 1; grid-row: 4; margin-top: 1rem; }
  .next__media { grid-column: 8 / -1; grid-row: 1 / span 4; margin: 0; }
  .next__link:hover .next__title { transform: translateX(0.2rem); }
}

.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: var(--accent);
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

/* ---------- Lichtbak ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(51 51 51 / 0.985);
  color: var(--on-night);
  opacity: 0;
  transition: opacity 0.35s var(--ease), display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}
.lightbox:not([open]) { display: none; }
.lightbox[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 1;
}
@starting-style {
  .lightbox[open] { opacity: 0; }
}
.lightbox::backdrop { background: transparent; }
.lightbox__stage {
  display: grid;
  /* vaste rij en kolom: anders is de hoogte van het rastervak 'auto' en negeert het beeld max-height */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-out);
}
.lightbox__img.is-loading { opacity: 0; transform: scale(0.995); }
.lightbox__img.is-left { transform: translateX(-0.75rem); opacity: 0; }
.lightbox__img.is-right { transform: translateX(0.75rem); opacity: 0; }
.lightbox__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem var(--gutter) max(0.9rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-night);
  font-size: var(--fs-sm);
}
.lightbox__caption { margin: 0; color: var(--on-night-2); }
.lightbox__credit { color: var(--on-night-muted); white-space: nowrap; }
.lightbox__credit:not(:empty)::before { content: "Foto: "; }
.lightbox__bar { grid-template-columns: 1fr auto auto; }
.lightbox__count {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--on-night-muted);
  font-variant-numeric: tabular-nums;
}
.lightbox__nav { display: flex; gap: 0.5rem; justify-self: end; }
.lb-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-night);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.lb-btn:hover { background: var(--on-night); color: var(--ink); border-color: var(--on-night); }
@media (min-width: 768px) {
  .lightbox__bar { grid-template-columns: 1fr auto auto; }
}

/* ---------- Cursorlabel ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  translate: var(--x, -100px) var(--y, -100px);
}
.cursor__label {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  transform: translate(0.9rem, 0.9rem) scale(0.4);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.25s;
}
.cursor.is-active .cursor__label { transform: translate(0.9rem, 0.9rem) scale(1); opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) {
  .cursor { display: none; }
}

/* ---------- 404 ---------- */
.nf {
  display: grid;
  gap: 1.5rem;
  min-height: 80svh;
  align-content: end;
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: var(--section);
}
.nf__title {
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.047em;
  max-width: 11ch;
  margin-bottom: 1rem;
}
/* Het cursieve woord tussen haakjes: de schuine haakjes leunen naar rechts, dus links iets meer lucht
   en rechts iets minder, zodat de inkt aan beide kanten even ver van ‘bestaat’ en ‘niet.’ staat */
.nf__title em {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.88em;
  letter-spacing: -0.035em;
  margin-inline: 0.03em -0.03em;
}
.nf__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.nf__note {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-serif);
  color: var(--ink-2);
}
/* De footer zonder grote oproep (die staat al op de 404 zelf): minder witruimte bovenaan */
.page-404 .site-footer { padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); }
@media (max-width: 479px) {
  /* op een gsm mag de lange knoptekst over twee regels lopen */
  .nf__cta .button { white-space: normal; min-height: 3.5rem; padding-block: 0.75rem; line-height: 1.25; }
}

/* ==========================================================================
   Beweging
   ========================================================================== */

/* Intro van de startpagina */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .w { overflow: visible; }
  .js .hero__title .w > span {
    opacity: 0;
    transform: translateY(0.18em);
    animation: rise 1.1s var(--ease-out) forwards;
    animation-delay: calc(0.1s + var(--w, 0) * 0.05s);
  }
  .js .hero__foot { animation: fade-up 1s var(--ease-out) 0.5s both; }
  .js .site-header { animation: fade 0.8s var(--ease) 0.1s both; }
  .js .site-header.is-pinned.is-sliding { animation: header-in 0.35s var(--ease-out) both; }
}
@keyframes header-in { from { transform: translateY(-101%); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(0.4rem); } }
@keyframes fade { from { opacity: 0; } }

/* Onthullen bij scrollen (JavaScript zet .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js [data-reveal="media"] {
    opacity: 1;
    transform: none;
    opacity: 0;
    clip-path: inset(3% 0 0 0);
    transition: opacity 0.9s var(--ease-out), clip-path 1.2s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal="media"] > .media__zoom > .media__img,
  .js [data-reveal="media"] > .media__video,
  .js [data-reveal="media"] > .about__img,
  .js [data-reveal="media"] > .band__img {
    scale: 1.03;
    transition: scale 1.6s var(--ease-out);
  }
  .js [data-reveal="media"].is-in { opacity: 1; clip-path: inset(0 0 0 0); }
  .js [data-reveal="media"].is-in > .media__zoom > .media__img,
  .js [data-reveal="media"].is-in > .media__video,
  .js [data-reveal="media"].is-in > .about__img,
  .js [data-reveal="media"].is-in > .band__img { scale: 1; }
  .js [data-reveal="media"].is-in > .media__zoom:hover > .media__img { scale: 1.012; }

  .js [data-reveal="words"] { opacity: 1; transform: none; }
  .js [data-reveal="words"] .w { display: inline-block; vertical-align: baseline; }
  .js [data-reveal="words"] .w > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.2em);
    transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: calc(var(--w, 0) * 0.035s);
  }
  .js [data-reveal="words"].is-in .w > span { opacity: 1; transform: none; }

  .js [data-reveal="stagger"] { opacity: 1; transform: none; }
  .js [data-reveal="stagger"] > * {
    opacity: 0;
    transition: opacity 0.9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 0.035s);
  }
  .js [data-reveal="stagger"].is-in > * { opacity: 1; }

  /* Klantenlogo's: elk logo veegt van links naar rechts open en zweeft licht omhoog, met een kleine vertraging per logo */
  .js .logos[data-reveal="stagger"] > * {
    opacity: 1;
    transition: none;
  }
  .js .logos[data-reveal="stagger"] .logos__logo {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateY(0.9rem) scale(0.94);
    transition: clip-path 1.1s var(--ease-out), opacity 0.7s var(--ease-out), transform 1.2s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 0.06s);
  }
  .js .logos[data-reveal="stagger"].is-in .logos__logo {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
  }

  .js .card { opacity: 0; transform: translateY(1rem); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
  .js .card.is-in { opacity: 1; transform: none; }
  .js .card .card__media { clip-path: inset(3% 0 0 0); transition: clip-path 1.3s var(--ease-out); }
  .js .card.is-in .card__media { clip-path: inset(0 0 0 0); }

  /* Terug van een project: kaarten staan er meteen (anders flikkeren ze na de overgang) */
  .js.from-case .card { opacity: 1; transform: none; transition: none; }
  .js.from-case .card .card__media { clip-path: none; transition: none; }

}

/* Vangnet: als het script niet laadt, is alles gewoon zichtbaar. */
.no-anim [data-reveal],
.no-anim [data-reveal] *,
.no-anim .card,
.no-anim .card__media {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  scale: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .status__dot::after { display: none; }
}

/* Scrollgestuurde effecten (waar de browser het ondersteunt) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .card__img {
      animation: parallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes parallax {
      from { translate: 0 -1.2%; }
      to { translate: 0 1.2%; }
    }

    @media (min-width: 768px) {
      .case-hero {
        animation: hero-open linear both;
        animation-timeline: scroll(root);
        animation-range: 0 75vh;
      }
      .case-hero > img.case-hero__media {
        animation: hero-settle linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
      }
    }
    @keyframes hero-open {
      from { clip-path: inset(0 calc(var(--edge) * 0.35)); }
      to { clip-path: inset(0 0); }
    }
    @keyframes hero-settle {
      from { scale: 1.025; }
      to { scale: 1; }
    }

    .progress {
      animation: grow linear both;
      animation-timeline: scroll(root);
    }
    @keyframes grow { to { scale: 1 1; } }

    .site-footer__word .wordmark {
      animation: word-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes word-up {
      from { translate: 0 12%; opacity: 0.6; }
      to { translate: 0 0; opacity: 1; }
    }
  }
}
@supports not (animation-timeline: scroll()) {
  .progress { display: none; }
}

/* Paginaovergangen tussen pagina's (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.3s var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 0.55s var(--ease-out) 0.05s both vt-in; }
/* Projectbeeld: het effen kleurvlak achter het kaartbeeld is de brug.
   Naar een project: het ontwerp vervaagt tot kleur, het vlak groeit naar de plek van
   het hoofdbeeld en de foto komt uit de kleur. Terug gaat het omgekeerd. overgang.js
   zet --vt-color en .vt-pair enkel als beide kanten in beeld zijn, en --vt-inset:
   de zijrand die hero-open bovenaan wegsnijdt, zodat het kleurvlak exact de foto volgt. */
::view-transition-group(case-media) {
  animation-duration: 0.7s;
  animation-timing-function: var(--ease-in-out);
  animation-delay: 0.1s;
  animation-fill-mode: both;
}
::view-transition-image-pair(case-media) { overflow: clip; }
:root.vt-pair::view-transition-image-pair(case-media) {
  background-color: var(--vt-color);
  animation: 0.7s var(--ease-in-out) 0.1s both vt-clip-open;
}
/* Terug: eerst fadet de foto op de projectpagina helemaal naar de kleur. Pas daarna wisselt
   de pagina naar het overzicht en krimpt het vlak naar de kaart. */
:root.vt-close::view-transition-old(root) { animation: 0.3s var(--ease-in-out) 0.45s both vt-out; }
:root.vt-close::view-transition-new(root) { animation: 0.55s var(--ease-out) 0.5s both vt-in; }
:root.vt-close::view-transition-group(case-media) { animation-delay: 0.45s; }
:root.vt-close::view-transition-image-pair(case-media) { animation-name: vt-clip-close; animation-delay: 0.45s; }
::view-transition-old(case-media),
::view-transition-new(case-media) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: clip;
  mix-blend-mode: normal;
}
:root.vt-open::view-transition-old(case-media) { animation: 0.3s var(--ease-in-out) both vt-sink; }
:root.vt-open::view-transition-new(case-media) { animation: 0.6s var(--ease-out) 0.7s both vt-rise; }
/* Titel en ondertitel staan de vlucht van het kleurvlak niet in de weg: ze komen pas als het vlak geland is */
:root.vt-open .case-title { view-transition-name: case-title; }
:root.vt-open .case-sub { view-transition-name: case-sub; }
:root.vt-open::view-transition-new(case-title) { animation: 0.6s var(--ease-out) 0.75s both vt-in; }
:root.vt-open::view-transition-new(case-sub) { animation: 0.6s var(--ease-out) 0.85s both vt-in; }
:root.vt-close::view-transition-old(case-media) { animation: 0.4s var(--ease-in-out) both vt-out; }
:root.vt-close::view-transition-new(case-media) { animation: 0.5s var(--ease-out) 1s both vt-rise; }
/* Maar één kant in beeld: gewoon zacht wisselen */
::view-transition-old(case-media):only-child { animation: 0.3s var(--ease-in-out) both vt-out; }
::view-transition-new(case-media):only-child { animation: 0.55s var(--ease-out) both vt-fade; }
@keyframes vt-sink { to { opacity: 0; transform: scale(0.97); } }
@keyframes vt-rise { from { opacity: 0; transform: scale(1.03); } }
@keyframes vt-clip-open { from { clip-path: inset(0 0); } to { clip-path: inset(0 var(--vt-inset, 0px)); } }
@keyframes vt-clip-close { from { clip-path: inset(0 var(--vt-inset, 0px)); } to { clip-path: inset(0 0); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(0.4rem); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .dock, .menu, .cursor, .vbtn, .skip, .next__aux, .site-footer__word, .progress, .yt__note, .hero__band { display: none !important; }
  body, .site-footer { background: #fff !important; color: #000 !important; }
  .contact__grid { color: #000 !important; }
  [data-reveal], .card, .card__media { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero { min-height: 0; }
  .case-text a[href^="http"]::after, .meta a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .media, .card { break-inside: avoid; }
}

/* Externe links in projecten: pill (.button) in de steunkleur van het project, kleinere variant in lijsten.
   build.py zet --tint, --tint-on (tekst op de vulling) en --tint-line (leesbaar op de pagina) op .case */
.button--ext { margin-block: 0.25rem; }
.case .button--ext { border-color: var(--tint, var(--accent)); background: var(--tint, var(--accent)); color: var(--tint-on, var(--white)); }
.case .button--ext:hover { background: var(--paper); border-color: var(--tint-line, var(--accent)); color: var(--tint-line, var(--accent)); }
.case .link-u--ext { color: var(--tint-line, var(--accent)); font-weight: 560; }
.button--sm { min-height: 2.5rem; padding: 0 1.15rem; font-size: 1rem; }

/* Drie favoriete platen, nonchalant op elkaar, dwars over het haarlijntje onder de mail en LinkedIn-knop */
.pile {
  position: absolute;
  right: 0;
  bottom: 0;
  translate: 0 50%;
  z-index: 2;
  width: clamp(11rem, 29vw - 47px, 18rem);   /* 2x zo groot als voorheen, maar botst op tablet niet met de tekst */
  aspect-ratio: 1;
  display: block;
}
.pile__cover {
  position: absolute;
  inset: 0;
  background: var(--ph, #ddd);
  box-shadow: 0 0.35rem 1rem rgb(51 51 51 / 0.22), 0 1px 2px rgb(51 51 51 / 0.2);
  transition: transform 0.5s var(--ease-out);
}
.pile__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pile__cover:nth-child(1) { transform: translate(-14%, 6%) rotate(-9deg); }
.pile__cover:nth-child(2) { transform: translate(6%, -10%) rotate(5deg); }
.pile__cover:nth-child(3) { transform: translate(-2%, 2%) rotate(-2deg); }
.pile:hover .pile__cover:nth-child(1), .pile:focus-visible .pile__cover:nth-child(1) { transform: translate(-26%, 8%) rotate(-14deg); }
.pile:hover .pile__cover:nth-child(2), .pile:focus-visible .pile__cover:nth-child(2) { transform: translate(14%, -14%) rotate(9deg); }
.pile:hover .pile__cover:nth-child(3), .pile:focus-visible .pile__cover:nth-child(3) { transform: translate(-2%, 0) rotate(-1deg) scale(1.04); }
/* Mobiel: kleiner en vooral onder de lijn, zodat de LinkedIn-knop en het adres vrij blijven */
@media (max-width: 640px) { .pile { width: 9rem; translate: 0 92%; } }
@media print { .pile { display: none !important; } }