/* ==========================================================================
   OLIVJÉ MEDIA — portfolio
   Paper-grey canvas, wonky serif display, signal red accent.
   ========================================================================== */

:root{
  --paper:#F2F1EE;
  --paper-2:#FAF9F7;
  --ink:#121211;
  --ink-60:rgba(18,18,17,.60);
  --ink-35:rgba(18,18,17,.35);
  --ink-12:rgba(18,18,17,.12);
  --red:#E5301C;

  --sand:#E7DCC9;
  --cool:#DBDFDD;
  --bone:#E9E6DF;
  --blue:#D6DCE4;
  --warm:#E5DCD2;
  --dark:#16181A;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --brand:'Olivje Media','Olivje Media Sans',ui-sans-serif,system-ui,sans-serif;
  --sans:'Olivje Media Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:min(1180px,92vw);
  --radius:28px;
  --bar-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);   /* lang uitlopend, rustig tot stilstand */
}

@font-face{
  font-family:'Olivje Media';font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/OlivjeMedia-Light.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/OlivjeMediaSans-Light.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/OlivjeMediaSans-Regular.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/OlivjeMediaSans-Bold.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url(assets/fonts/OlivjeMediaSans-ExtraBold.woff2) format('woff2');
}

@font-face{
  font-family:'Olivje Media';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/OlivjeMedia-Regular.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/OlivjeMedia-Bold.woff2) format('woff2');
}
@font-face{
  font-family:'Olivje Media';font-style:normal;font-weight:800;font-display:swap;
  src:url(assets/fonts/OlivjeMedia-ExtraBold.woff2) format('woff2');
}

/* het merkfont heeft geen &, @ of pijlen — die zetten we apart */
.sans{font-family:var(--ui);font-weight:600}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}

a{color:inherit}

:focus-visible{outline:2.5px solid var(--red);outline-offset:4px;border-radius:4px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:99px;
  font-size:14px;text-decoration:none;
}
.skip:focus{top:16px}

.wrap{width:var(--wrap);margin-inline:auto}

/* --- shared type ---------------------------------------------------------- */

.eyebrow{
  margin:0 0 28px;
  font-family:var(--brand);
  font-size:14px;font-weight:700;letter-spacing:.11em;
  color:var(--red);
}
.eyebrow--light{color:#FF7A66}

em{font-style:normal;color:var(--red)}

/* --- wordmark ------------------------------------------------------------- */

.wordmark{position:fixed;top:26px;left:max(22px,4vw);z-index:90;mix-blend-mode:difference}
.wordmark a{display:block;line-height:0}
.wordmark img{width:clamp(132px,13vw,178px);height:auto}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  /* geen vaste schermhoogte: die liet op hoge schermen een leeg gat achter */
  padding:clamp(104px,12vh,150px) 0 clamp(40px,6vh,80px);
}

.crate{
  --h:clamp(230px,30vh,370px);
  position:relative;
  height:var(--h);
  border-radius:var(--radius);
  background:var(--dark);
  margin-bottom:clamp(44px,6vh,84px);
  /* het vlak is een venster: onder en opzij snijdt het af, bovenlangs niet */
  clip-path:inset(-700px 0 0 0 round var(--radius));
}

.crate__sleeves{position:absolute;inset:0;display:grid;place-items:center}

.crate__sleeve{
  position:absolute;
  height:calc(var(--h) * 1.5);
  z-index:var(--z);
  transform:rotate(var(--a,0deg));
  transform-origin:50% 400%;   /* draaipunt onder de stapel: de rij buigt */
  transition:transform .45s var(--ease);
  animation:deal .75s var(--ease) backwards;
  animation-delay:calc(var(--i) * 45ms + 120ms);
}

/* de hoezen deinen heel licht, zodat je ziet dat er iets te klikken valt.
   De beweging zit op de foto zelf, want de hoes stuurt al de hoek en de hover aan */
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.crate__sleeve img{
  animation:zweef 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.42s);
  display:block;height:100%;width:auto;
  border-radius:3px;
  box-shadow:0 26px 46px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.13);
}

.crate__sleeve:hover,
.crate__sleeve:focus-visible,
.crate__sleeve.is-active{
  transform:rotate(var(--a,0deg)) translateY(-24px) scale(1.03);
  z-index:60;
}

/* zodra je met de pijltjes bladert laat de kaart onder de muis weer los */
.crate.keys .crate__sleeve:hover:not(.is-active),
.crate.keys .crate__sleeve:focus-visible:not(.is-active){
  transform:rotate(var(--a,0deg));
  z-index:var(--z);
}

.crate__hint{
  display:flex;align-items:center;gap:10px;
  margin:14px 2px 0;
  min-height:19px;
  font-family:var(--brand);font-weight:700;
  font-size:13px;letter-spacing:.09em;
  color:var(--ink-35);
  opacity:0;transition:opacity .3s ease;
}
.crate__hint b{font-weight:700;color:var(--red)}
.crate:hover + .crate__hint,
.crate:focus-within + .crate__hint{opacity:1}

@keyframes deal{
  from{transform:rotate(0deg) translateY(28px);opacity:0}
  to{transform:rotate(var(--a,0deg));opacity:1}
}

.hero__line{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 118;
  font-weight:800;
  font-size:clamp(2.6rem,7.2vw,6.4rem);
  line-height:.94;
  letter-spacing:-.038em;
  max-width:none;
  text-wrap:balance;
}

.hero__sub{
  margin:20px 0 0;
  max-width:70ch;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  color:var(--ink-60);
}

.hero__cue{
  margin:clamp(22px,3.2vh,46px) 0 0;
  font-family:var(--brand);
  font-size:15px;font-weight:700;letter-spacing:.11em;
  color:var(--ink-35);
  display:flex;align-items:center;gap:12px;
}
.hero__arrow{display:inline-block;font-family:var(--ui);animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ==========================================================================
   FILTERS
   ========================================================================== */

.filters{padding:clamp(34px,4.5vh,64px) 0 clamp(22px,3vh,38px)}
.filters .eyebrow{margin-bottom:20px}

.filters__row{display:flex;flex-wrap:wrap;gap:10px}

.filter{
  appearance:none;
  padding:11px 22px 12px;
  border-radius:99px;
  border:1px solid var(--ink-12);
  background:transparent;
  color:var(--ink-60);
  cursor:pointer;
  font-family:var(--brand);font-weight:700;
  font-size:14px;letter-spacing:.06em;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.filter:hover{border-color:var(--ink-35);color:var(--ink)}
.filter.is-on{background:var(--red);border-color:var(--red);color:#fff}

.grid__leeg{grid-column:1 / -1;margin:0;color:var(--ink-60)}

.case__cats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.case__cat{
  appearance:none;
  padding:8px 16px 9px;
  border-radius:99px;
  border:1px solid var(--ink-12);
  background:transparent;color:var(--ink-60);cursor:pointer;
  font-family:var(--brand);font-weight:700;font-size:12px;letter-spacing:.07em;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.case__cat:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ==========================================================================
   WERK — sleeve stack
   ========================================================================== */

.stack{padding-bottom:0}
.sleeve:last-child{margin-bottom:0}

.sleeve{
  position:sticky;
  top:48px;
  width:var(--wrap);
  margin-inline:auto;
  margin-bottom:clamp(70px,14vh,160px);
  transform-origin:50% 0;
  will-change:transform;
  background:var(--paper);   /* dekkend, anders schuiven de bijschriften door elkaar */
}

.sleeve__panel{
  --h:clamp(300px,52vh,560px);
  position:relative;
  height:var(--h);
  border-radius:var(--radius);
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--dark);
}

/* de discipline groot achter het werk, zodat het vlak niet leeg staat */
.sleeve__panel::before,
.tile__panel::before,
.case__panel::before{
  content:attr(data-word);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--brand);font-weight:800;
  line-height:1;letter-spacing:-.01em;white-space:nowrap;
  color:rgba(242,241,238,.09);
  pointer-events:none;
}
.sleeve__panel::before{font-size:clamp(4rem,13vw,11rem)}

.sleeve__panel img{
  position:relative;z-index:1;
  height:calc(var(--h) * .88);width:auto;max-width:62%;object-fit:contain;
  border-radius:3px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);
  transition:transform .45s var(--ease);
}

.sleeve__caption{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
  gap:20px 40px;
  padding:32px 6px 0;
  min-height:clamp(126px,16vh,180px);
}

.sleeve__line{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700;
  font-size:clamp(1.4rem,2.5vw,2.15rem);
  line-height:1.18;
  letter-spacing:-.022em;
  max-width:26ch;
}

.sleeve__meta{
  margin:0;
  text-align:right;
  padding-bottom:.35em;
  font-family:var(--brand);
  font-size:clamp(.9rem,1.05vw,1.05rem);
  font-weight:400;
  letter-spacing:.05em;
}
.sleeve__meta i{font-style:normal;color:var(--red);padding:0 6px}

/* ==========================================================================
   VERDER WERK — grid
   ========================================================================== */

.more{padding:clamp(72px,10vh,120px) 0 clamp(70px,12vh,150px)}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,34px);
}

.tile{margin:0}

.tile__panel{
  --h:clamp(240px,24vw,330px);
  position:relative;
  height:var(--h);
  border-radius:20px;
  display:grid;place-items:center;
  background:var(--dark);
  overflow:hidden;
}
.tile__panel::before{font-size:clamp(1.2rem,2.5vw,1.9rem)}

.tile__panel img{
  position:relative;z-index:1;
  height:calc(var(--h) * .78);width:auto;max-width:74%;object-fit:contain;
  border-radius:2px;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);
  transition:transform .45s var(--ease);
}

.tile figcaption{display:flex;flex-direction:column;gap:2px;padding:16px 2px 0}
.tile strong{
  font-family:var(--display);
  font-variation-settings:'wdth' 108;
  letter-spacing:-.018em;
  font-weight:700;font-size:1.15rem;
}
.tile span{font-family:var(--brand);font-weight:400;font-size:.85rem;letter-spacing:.06em;color:var(--ink-35)}

/* ==========================================================================
   KLANTEN — dark band
   ========================================================================== */

.clients{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(56px,9vh,110px) 0 clamp(64px,10vh,120px);
  overflow:hidden;
}

.marquee{margin-top:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

.marquee__track{
  display:flex;align-items:center;gap:0;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee__track span{
  font-family:var(--brand);
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(2.4rem,6.5vw,5.4rem);
  line-height:1.15;
  white-space:nowrap;
  padding:0 .18em;
}
.marquee__track i{color:var(--red);font-family:var(--ui);font-style:normal;font-size:clamp(1rem,2vw,1.6rem);padding:0 .3em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.clients__body{margin-top:clamp(52px,8vh,96px)}

.clients__lead{
  margin:0 0 clamp(34px,5vh,58px);
  font-family:var(--display);
  font-variation-settings:'wdth' 116;
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.7rem);
  line-height:1.12;
  letter-spacing:-.028em;
  max-width:20ch;
  text-wrap:balance;
}

.clients__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  margin-bottom:clamp(46px,7vh,80px);
}
.clients__cols p{margin:0;max-width:44ch;color:rgba(242,241,238,.72)}
.clients__hl{color:var(--paper);font-style:normal}

.clients__k{
  margin:0 0 18px;
  font-family:var(--brand);
  font-size:13px;font-weight:700;letter-spacing:.11em;
  color:rgba(242,241,238,.42);
}

.namelist{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 0;
  font-family:var(--brand);
  font-weight:400;
  font-size:clamp(.95rem,1.4vw,1.2rem);
  letter-spacing:.04em;
}
.namelist li{white-space:nowrap}
.namelist li:not(:last-child)::after{content:'·';color:var(--red);padding:0 .55em}

/* ==========================================================================
   OVER
   ========================================================================== */

.about{padding:clamp(80px,14vh,170px) 0 clamp(60px,10vh,120px)}

.about__lead{
  margin:0 0 clamp(56px,9vh,110px);
  font-family:var(--display);
  font-variation-settings:'wdth' 116;
  font-weight:800;
  font-size:clamp(1.9rem,4.2vw,3.4rem);
  line-height:1.1;
  letter-spacing:-.028em;
  max-width:20ch;
}

.about__body{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

.about__photos{position:relative;height:clamp(420px,58vh,620px)}
.about__photo{
  position:absolute;
  border:9px solid var(--paper-2);
  border-radius:4px;
  object-fit:cover;
  box-shadow:0 26px 48px -22px rgba(0,0,0,.5);
}
.about__photo--a{width:70%;aspect-ratio:3/4;top:0;left:0;transform:rotate(-2.5deg)}
.about__photo--b{width:52%;aspect-ratio:4/3;bottom:2%;right:0;transform:rotate(3.5deg);z-index:2}

/* polaroids onder de portretten, met de dikke onderrand van een echte afdruk */
/* los over elkaar gestrooid, net als de twee portretten erboven */
.polaroids{
  position:relative;
  height:clamp(300px,40vh,430px);
  margin-top:clamp(10px,2vh,24px);
}
.polaroid{
  position:absolute;
  width:41%;
  margin:0;
  padding:10px 10px 34px;
  background:var(--paper-2);
  border-radius:3px;
  box-shadow:0 20px 38px -18px rgba(0,0,0,.5);
  z-index:var(--z,1);
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));
  transition:transform .45s var(--ease),box-shadow .45s ease;
}
.polaroid img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}
.polaroid:nth-child(1){left:0;top:10%}
.polaroid:nth-child(2){left:31%;top:0}
.polaroid:nth-child(3){right:0;top:24%}
.polaroid:hover{
  transform:translate(var(--x,0px),calc(var(--y,0px) - 12px)) rotate(var(--r,0deg)) scale(1.06);
  box-shadow:0 32px 52px -18px rgba(0,0,0,.55);
  z-index:9;
}

.about__text{display:grid;gap:clamp(30px,4vh,46px);padding-top:6px}
.about__block p{margin:0}
.about__k{
  font-family:var(--brand);
  font-size:13px;font-weight:700;letter-spacing:.11em;
  color:var(--ink-35);
  margin-bottom:10px !important;
}
.about__block p:last-child{font-size:1.05rem;color:var(--ink);max-width:46ch}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:clamp(80px,13vh,150px) 0 clamp(90px,14vh,160px);
  margin-top:clamp(40px,7vh,90px);
}

.contact__body{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

.contact__k{
  margin:0 0 14px;
  font-family:var(--brand);
  font-size:13px;font-weight:700;letter-spacing:.11em;
  color:rgba(242,241,238,.42);
}

.contact__lead{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 118;
  font-weight:800;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.05;
  letter-spacing:-.032em;
  max-width:16ch;
}

.contact__side{padding-top:10px}
.contact__links{display:grid;gap:8px;margin-bottom:40px}
.contact__links a{
  font-family:var(--display);
  font-variation-settings:'wdth' 108;
  font-weight:600;
  letter-spacing:-.018em;
  font-size:clamp(1.25rem,2.6vw,2.1rem);
  text-decoration:none;
  width:fit-content;
  transition:color .25s ease;
}
.contact__links a:hover{color:var(--red)}

.contact__socials{display:flex;gap:12px;flex-wrap:wrap}
.contact__socials a{
  padding:12px 24px;border-radius:99px;
  border:1px solid rgba(242,241,238,.28);
  text-decoration:none;
  font-family:var(--brand);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.contact__socials a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{background:var(--ink);color:rgba(242,241,238,.45);padding:0 0 calc(var(--bar-h) + 46px)}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border-top:1px solid rgba(242,241,238,.14);padding-top:30px}
.footer__meta{font-family:var(--brand);font-weight:400}
.footer__logo{width:clamp(150px,15vw,200px);height:auto;opacity:.72}
.footer__meta{display:flex;gap:28px;flex-wrap:wrap;font-size:.8rem;letter-spacing:.06em}

/* ==========================================================================
   TRANSPORT BAR
   ========================================================================== */

.bar{
  position:fixed;
  left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:100;
  display:flex;align-items:center;gap:4px;
  height:var(--bar-h);
  padding:0 7px;
  border-radius:99px;
  background:rgba(250,249,247,.82);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--ink-12);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.4);
  overflow:hidden;
}

.bar__progress{position:absolute;top:0;left:0;right:0;height:2px;background:var(--ink-12)}
.bar__progress span{display:block;height:100%;width:0%;background:var(--red);transition:width .12s linear}

.bar__pill{
  display:flex;align-items:center;gap:8px;
  padding:0 20px;height:42px;border-radius:99px;
  text-decoration:none;
  font-family:var(--brand);
  font-weight:700;
  font-size:15px;letter-spacing:.06em;
  color:var(--ink-60);
  transition:background .3s ease,color .3s ease;
}
.bar__pill i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .3s ease}
.bar__pill.is-active{background:var(--red);color:#fff}
.bar__pill.is-active i{opacity:1;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ==========================================================================
   REVEAL
   ========================================================================== */

.reveal{
  opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none;filter:none}
/* grote beelden zonder blur, dat blijft soepel */
.shot.reveal,.tile.reveal,.polaroids.reveal,.about__photos.reveal,.case__next.reveal{filter:none}

/* ==========================================================================
   ANIMATIE
   ========================================================================== */

/* de opening: eerst de stapel, dan de kop, dan de rest */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

.hero__line,
.hero__sub,
.hero__cue{animation:rise .9s var(--ease) backwards}
.hero__line{animation-delay:.62s}
.hero__sub{animation-delay:.76s}
.hero__cue{animation-delay:.88s}

.wordmark{animation:rise .8s var(--ease) backwards;animation-delay:.15s}

/* het streepje achter een kopregel groeit mee */
.eyebrow{display:flex;align-items:center;gap:14px}
.eyebrow::after{
  content:'';height:1px;flex:0 0 0;background:currentColor;opacity:.5;
  transition:flex-basis .9s var(--ease) var(--d,0ms);
}
.eyebrow.is-in::after,
.no-js .eyebrow::after{flex-basis:56px}

/* tegels die na het filteren binnenkomen */
@keyframes tileIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.grid--nieuw .tile{animation:tileIn .6s var(--ease) backwards}

/* het grote woord achter het werk schuift mee met de muis en de scroll */
.sleeve__panel::before,
.tile__panel::before,
.case__panel::before{
  transform:translate(-50%,-50%) translateX(var(--drift,0px));
  transition:transform .6s var(--ease);
}
.tile__link:hover .tile__panel::before{transform:translate(-50%,-50%) translateX(18px)}

/* de projectpagina komt binnen in plaats van te knipperen */
@keyframes caseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.case__panel{animation:caseIn .7s var(--ease) backwards}
.case__title{animation:caseIn .7s var(--ease) backwards;animation-delay:.14s}
.case__client,
.case__cats{animation:caseIn .7s var(--ease) backwards;animation-delay:.2s}
.case__body{animation:caseIn .8s var(--ease) backwards;animation-delay:.26s}

/* fotografiekaart: drie foto's naast elkaar, om de beurt wisselend */
.sleeve__panel.trio,
.case__panel.trio{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.8vw,26px);
}
.sleeve__panel.trio img,
.case__panel.trio img{
  position:static;
  height:calc(var(--h) * .78);
  width:auto;max-width:28%;
  object-fit:cover;
  transform:rotate(var(--r,0deg));
  transition:transform .5s var(--ease),opacity .34s ease;
}
.sleeve__panel.trio img.is-wissel,
.case__panel.trio img.is-wissel{opacity:0}
.sleeve__link:hover .sleeve__panel.trio img,
.case__panel.trio img{transform:rotate(var(--r,0deg)) translateY(-8px)}
.sleeve__link:hover .sleeve__panel.trio img:nth-child(2){transform:rotate(var(--r,0deg)) translateY(-16px)}

/* knoppen naar het werk zelf: pillen zoals de rest van de site */
.links{
  display:flex;flex-wrap:wrap;
  gap:12px;
  margin:0 0 clamp(40px,6vh,80px);
}

.video{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 26px 14px;
  border:1px solid var(--ink-12);border-radius:99px;
  background:transparent;color:var(--ink);
  text-decoration:none;cursor:pointer;
  font-family:var(--brand);font-weight:700;
  font-size:14px;letter-spacing:.06em;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.video:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* een klein gekleurd bolletje in plaats van een groot icoon */
.video__play{
  flex:0 0 auto;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  transition:transform .3s ease;
}
.video[data-soort="muziek"] .video__play{background:#1DB954}
.video[data-soort="video"] .video__play{background:#FF3B30}
.video[data-soort="site"] .video__play{background:var(--ink-35)}
.video[data-soort="post"] .video__play{background:#C13584}
.video[data-soort="intern"] .video__play{background:var(--red)}
.video:hover .video__play{transform:scale(1.35)}

/* een video staat meteen op de pagina, net als de foto's */
.speler{margin:0 0 clamp(20px,3vh,34px)}
.speler iframe{
  display:block;width:100%;aspect-ratio:16/9;
  border:0;border-radius:var(--radius);
  background:var(--dark);
}
.speler figcaption{
  margin-top:12px;
  font-family:var(--brand);font-weight:400;
  font-size:.85rem;letter-spacing:.06em;
  color:var(--ink-35);
}

/* samenwerkingen op een projectpagina, op licht papier */
.case__samen{margin:0 0 clamp(48px,7vh,90px)}
.case__samen .namelist{color:var(--ink)}
.case__samen .namelist li:hover{color:var(--red)}


/* een losse laatste tegel komt in het midden te staan in plaats van links */
@media (min-width:901px){
  .grid .tile:last-child:nth-child(3n+1){grid-column:2}
}

/* knop naar alle projecten onder het raster */
.more__alles{display:flex;justify-content:center;margin-top:clamp(36px,5vh,60px)}
.more__alles[hidden]{display:none}
.alle{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px 16px;border-radius:99px;
  border:1px solid var(--ink);color:var(--ink);text-decoration:none;
  font-family:var(--brand);font-weight:700;font-size:15px;letter-spacing:.06em;
  transition:background .3s ease,color .3s ease;
}
.alle:hover{background:var(--ink);color:var(--paper)}
.alle .sans{transition:transform .3s ease}
.alle:hover .sans{transform:translateX(4px)}

/* pagina met alle projecten */
.index__titel{
  margin:0 0 10px;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 118;
  font-size:clamp(2.4rem,6vw,4.8rem);line-height:1;letter-spacing:-.034em;
}
.index__aantal{margin:0 0 clamp(24px,4vh,40px);font-family:var(--brand);font-size:14px;letter-spacing:.06em;color:var(--ink-35)}
.index .filters__row{margin-bottom:clamp(32px,5vh,56px)}
.index .filter{text-decoration:none;display:inline-flex;align-items:center}

/* vergroten van beelden op een projectpagina */
.shot img{cursor:zoom-in}
body.is-zoom{overflow:hidden}
.zoom{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,56px);
  background:rgba(12,12,11,.94);
  overflow:auto;cursor:zoom-out;
}
.zoom[hidden]{display:none}
.zoom img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;cursor:zoom-in}
.zoom.is-groot{align-items:flex-start;justify-content:flex-start}
.zoom.is-groot img{max-width:none;max-height:none;cursor:zoom-out;margin:auto}
.zoom__sluit{
  position:fixed;top:18px;right:18px;z-index:1;
  padding:10px 20px 11px;border-radius:99px;
  border:1px solid rgba(242,241,238,.3);background:rgba(12,12,11,.6);color:var(--paper);
  font-family:var(--brand);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer;
}
.zoom__sluit:hover{background:var(--paper);color:var(--ink)}
.zoom__tip{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);margin:0;
  font-family:var(--brand);font-size:12px;letter-spacing:.06em;color:rgba(242,241,238,.55);
  pointer-events:none;
}
.zoom.is-groot .zoom__tip{display:none}


/* kleine dingen die op aanraking reageren */
.namelist li{transition:color .25s ease}
.namelist li:hover{color:var(--paper)}
.strip img{transition:transform .5s var(--ease)}
.strip img:hover{transform:scale(1.04)}
.about__photo{transition:transform .6s var(--ease)}
.about__photos:hover .about__photo--a{transform:rotate(-4deg) translateY(-6px)}
.about__photos:hover .about__photo--b{transform:rotate(5deg) translateY(6px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:900px){
  .chapter{grid-template-columns:1fr;gap:10px}
  .about__body{grid-template-columns:1fr}
  .clients__cols{grid-template-columns:1fr;gap:22px}
  .contact__body{grid-template-columns:1fr;gap:48px}
  .sleeve__caption{grid-template-columns:1fr;gap:12px}
  .sleeve__meta{text-align:left;padding-bottom:0}
  .about__photos{height:clamp(340px,48vh,460px);order:2}
  .grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  .filters{padding:38px 0 22px}
  .filters__row{gap:8px}
  .filter{padding:12px 18px 13px;font-size:13px}
  .crate{--h:clamp(180px,24vh,250px)}
  .crate__sleeve{height:calc(var(--h) * 1.35)}
  :root{--radius:20px;--bar-h:52px}
  .hero{padding:76px 0 34px}
  .hero__line{letter-spacing:-.03em}
  .sleeve{top:24px;margin-bottom:78px}
  .sleeve__panel{--h:clamp(240px,40vh,340px)}
  .sleeve__panel img{max-width:76%;height:calc(var(--h) * .8)}
  .sleeve__caption{padding-top:22px;gap:10px;grid-template-columns:1fr}
  .sleeve__meta{text-align:left;padding-bottom:0}
  .grid{grid-template-columns:1fr;gap:26px}
  .tile__panel{--h:min(64vw,300px)}
  .contact__body{grid-template-columns:1fr;gap:44px}
  .about__photo{border-width:7px}
  .polaroid{padding:7px 7px 24px}
  .polaroids{height:min(64vw,330px)}
  .about__photo--a{width:72%}
  .about__photo--b{width:56%}
  .footer .wrap{flex-direction:column;align-items:flex-start;gap:20px}
  .footer__meta{flex-direction:column;gap:6px}
  .bar__pill{padding:0 15px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
  .crate__sleeve img{animation:none}
  .hero__line,.hero__sub,.hero__cue,.wordmark,.case__panel,.case__title,.case__client,.case__cats,.case__body,.grid--nieuw .tile{animation:none}
  .eyebrow::after{flex-basis:56px;transition:none}
}

/* ==========================================================================
   KAART WORDT LINK
   ========================================================================== */

.sleeve__link,.tile__link{display:block;text-decoration:none;color:inherit}

.sleeve__side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.sleeve__cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 20px 10px;border-radius:99px;
  border:1px solid var(--ink-12);
  background:transparent;
  font-family:var(--brand);
  font-weight:700;
  font-size:14px;line-height:1;letter-spacing:.06em;white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.sleeve__cta::after{content:'→';font-family:var(--ui);transition:transform .3s ease}
.sleeve__link:hover .sleeve__cta{background:var(--red);border-color:var(--red);color:#fff}
.sleeve__link:hover .sleeve__cta::after{transform:translateX(4px)}

.sleeve__link:hover .sleeve__panel img,
.tile__link:hover .tile__panel img{transform:translateY(-10px) rotate(-1deg)}

/* ==========================================================================
   PROJECTPAGINA
   ========================================================================== */

.bar__nav{display:flex;align-items:center;gap:4px}
.bar__back{display:none;gap:10px}
.is-case .bar__nav{display:none}
.is-case .bar__back{display:flex;background:var(--red);color:#fff}
.is-case .bar__progress{display:none}

.case[hidden]{display:none}
.case{display:block;padding:clamp(88px,12vh,132px) 0 calc(var(--bar-h) + 80px)}
.case:focus{outline:none}
.case__inner{display:block}

.case__panel{
  --h:clamp(320px,58vh,640px);
  position:relative;
  height:var(--h);
  border-radius:var(--radius);
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--vlak,var(--dark));
  margin-bottom:clamp(40px,6vh,72px);
}
.case__panel::before{font-size:clamp(4rem,12vw,10rem)}
.case__panel img{
  position:relative;z-index:1;
  height:calc(var(--h) * .88);width:auto;max-width:62%;object-fit:contain;
  border-radius:3px;
  box-shadow:0 34px 64px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);
}

.case__kind{margin-bottom:18px}

.case__chapters{
  margin:clamp(48px,7vh,86px) 0 clamp(56px,8vh,100px);
  display:grid;
  gap:0;
  border-top:1px solid var(--ink-12);
}
.chapter{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  padding:clamp(26px,4vh,44px) 0;
  border-bottom:1px solid var(--ink-12);
}
.chapter p:last-child{margin:0;font-size:1.02rem;line-height:1.62;max-width:62ch}
.chapter .case__k{margin:.25em 0 0}

/* beelden op een projectpagina: hoofdstukken met rijen donkere vlakken */
.case__media{margin:clamp(40px,7vh,88px) 0 clamp(24px,4vh,48px)}
.case__deel + .case__deel{margin-top:clamp(56px,10vh,120px)}
.deel{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,2.6vw,36px);align-items:end;
  margin:0 0 clamp(18px,3vh,30px);
  padding-top:clamp(18px,2.6vh,28px);
  border-top:1px solid var(--ink-12);
}
/* de cijfers in de eigen handgetekende letter */
.deel__nr{
  grid-row:span 2;align-self:center;
  font-family:'Olivje Media',var(--brand);font-weight:300;
  font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.82;letter-spacing:-.04em;
  min-width:1.75em;   /* titels staan in elk hoofdstuk op dezelfde lijn */
  color:var(--ink);
}
.deel__titel{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.02;letter-spacing:-.02em;
}
.deel__tekst{margin:.55em 0 0;max-width:56ch;font-size:1rem;line-height:1.55;opacity:.72}

.shots{
  display:grid;
  grid-template-columns:var(--kol,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin-bottom:clamp(12px,1.6vw,20px);
}
.shot{
  position:relative;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,3.2vw,48px) clamp(18px,3.2vw,48px) clamp(46px,5vw,64px);
  background:var(--vlak,var(--dark));
  border-radius:var(--radius);
  overflow:hidden;
}
.shot__kader{display:block;max-width:100%}
.shot img,
.shot video{
  display:block;width:auto;height:auto;max-width:100%;max-height:78vh;
  border-radius:4px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .6s var(--ease);
}
.shot:hover img{transform:translateY(-6px)}
.shot figcaption{
  position:absolute;left:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);bottom:clamp(16px,1.8vw,22px);
  margin:0;
  font-family:var(--brand);font-weight:400;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,241,238,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.case__title{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 118;
  font-weight:800;
  font-size:clamp(2.4rem,6vw,4.8rem);
  line-height:1;
  letter-spacing:-.034em;
  text-wrap:balance;
}

.case__client{
  margin:14px 0 0;
  font-size:clamp(1rem,1.4vw,1.2rem);
  color:var(--ink-60);
}





.case__k{
  margin:0 0 14px;
  font-family:var(--brand);
  font-size:13px;font-weight:700;letter-spacing:.11em;
  color:var(--ink-35);
}







.case__next{
  margin-top:clamp(40px,6vh,76px);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:clamp(20px,4vw,48px);
  padding-top:30px;
  border-top:1px solid var(--ink-12);
  text-decoration:none;color:inherit;
}
.case__nexttitle{
  grid-column:1;
  display:flex;align-items:center;gap:16px;
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:700;
  letter-spacing:-.024em;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.1;
}
.case__next .case__k{grid-column:1;margin:0}
.case__nexttitle i{font-style:normal;color:var(--red);transition:transform .3s ease}
.case__next:hover .case__nexttitle i{transform:translateX(8px)}
.case__next img{
  grid-column:2;grid-row:1 / span 2;
  width:clamp(88px,11vw,140px);height:auto;
  border-radius:6px;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.45);
  transition:transform .4s var(--ease);
}
.case__next:hover img{transform:translateY(-6px) rotate(-2deg)}

@media (max-width:900px){
}

@media (max-width:640px){
  .case{padding:76px 0 calc(var(--bar-h) + 56px)}
  .case__panel{--h:clamp(260px,44vh,380px)}
  .case__panel img{max-width:76%}
  .sleeve__side{align-items:flex-start}
  .case__next{grid-template-columns:1fr auto;gap:16px}
}

/* ==========================================================================
   KLEINE BEWEGINGEN
   ========================================================================== */

/* het logo veert even mee */
.wordmark a{transition:transform .35s var(--ease)}
.wordmark a:hover{transform:translateY(-3px)}

/* streepje groeit uit het label zodra de sectie in beeld komt */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::after{
  content:'';height:2px;width:0;background:currentColor;opacity:.55;
  transition:width .7s var(--ease) .25s;
}
.eyebrow.is-in::after,
.case .eyebrow::after{width:clamp(20px,3vw,40px)}

/* nav: de stip groeit onder de muis, de actieve pil klopt door */
.bar__pill{transition:background .3s ease,color .3s ease,transform .3s var(--ease)}
.bar__pill:hover{transform:translateY(-2px)}
.bar__pill i{transition:opacity .3s ease,transform .3s var(--ease)}
.bar__pill:hover i{opacity:.75;transform:scale(1.6)}

/* terugknop: het pijltje loopt vooruit */
.bar__back .sans{display:inline-block;transition:transform .3s var(--ease)}
.bar__back:hover .sans{transform:translateX(-5px)}

/* het woord achter het werk schuift een tik mee */
.sleeve__panel::before,
.tile__panel::before{transition:transform .6s var(--ease),opacity .6s ease}
.sleeve__link:hover .sleeve__panel::before{transform:translate(-50%,-50%) scale(1.05);opacity:.75}
.tile__link:hover .tile__panel::before{transform:translate(-50%,-50%) scale(1.06);opacity:.75}

/* contactlinks: de streep loopt van links binnen */
.contact__links a{position:relative;border-bottom:0;padding-bottom:6px}
.contact__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(242,241,238,.25);
}
.contact__links a::before{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);
  transition:width .45s var(--ease);
  z-index:1;
}
.contact__links a:hover::before{width:100%}

/* socials veren op */
.contact__socials a{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--ease)}
.contact__socials a:hover{transform:translateY(-3px)}

/* de tegels in het raster komen iets omhoog */
.tile__link{transition:transform .4s var(--ease)}
.tile__link:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  .eyebrow::after{transition:none;width:clamp(20px,3vw,40px)}
}

/* ==========================================================================
   TELEFOON
   ========================================================================== */

@media (max-width:640px){
  :root{
    --wrap:calc(100vw - 48px);   /* meer lucht aan de randen */
    --bar-h:46px;
  }

  body{font-size:15px;line-height:1.6}

  /* ruimte bovenaan zodat het logo vrij blijft staan */
  .hero{padding-top:118px}
  .case{padding-top:120px}
  .wordmark{top:22px;left:24px}
  .wordmark img{width:120px}

  /* tekst een maat kleiner */
  .hero__line{font-size:clamp(2rem,10.5vw,2.8rem);letter-spacing:-.022em}
  .hero__sub{font-size:.95rem;margin-top:16px}
  .hero__cue{font-size:12px;letter-spacing:.09em}
  .eyebrow{font-size:12px;letter-spacing:.09em;margin-bottom:20px}
  .eyebrow::after{width:18px}

  .sleeve__line{font-size:1.05rem;line-height:1.3}
  .sleeve__meta{font-size:.76rem;letter-spacing:.04em}
  .sleeve__cta{font-size:12px;padding:8px 15px 9px}
  .sleeve__caption{min-height:0;padding-top:18px;gap:10px}

  .about__lead{font-size:1.5rem;line-height:1.16}
  .about__k{font-size:11px;letter-spacing:.09em}
  .about__block p:last-child{font-size:.95rem}

  .clients__lead{font-size:1.35rem}
  .clients__cols p{font-size:.92rem}
  .clients__k{font-size:11px}
  .namelist{font-size:.85rem}
  .marquee__track span{font-size:2.1rem}

  .contact__lead{font-size:1.75rem;line-height:1.1}
  .contact__links a{font-size:1.15rem}
  .contact__k{font-size:11px}
  .contact__socials a{font-size:.82rem;padding:10px 18px}

  .case__title{font-size:2rem;line-height:1.04}
  .case__client{font-size:.95rem}
  .case__k{font-size:11px;letter-spacing:.09em}
  .chapter{padding:20px 0}
  .chapter p:last-child{font-size:.93rem;line-height:1.6}
  .case__nexttitle{font-size:1.4rem}

  .footer__meta{font-size:.72rem}

  /* verder werk: twee naast elkaar, zodat je het onderscheid ziet */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile__panel{--h:min(42vw,190px);border-radius:14px}
  .tile__panel::before{font-size:.8rem}
  .tile figcaption{padding-top:10px;gap:1px}
  .tile strong{font-size:.92rem}
  .tile span{font-size:.68rem;letter-spacing:.04em}

  /* projectbeelden: twee naast elkaar, brede en gemengde rijen onder elkaar */
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
  .shots--breed,.shots--gemengd{grid-template-columns:1fr}
  .shots--3 > .shot:last-child{grid-column:1 / -1}
  .shot{padding:14px 14px 40px;border-radius:14px}
  .shot figcaption{font-size:.62rem;left:14px;bottom:13px}
  .deel{grid-template-columns:1fr}
  .deel__nr{grid-row:auto;margin-bottom:6px}

  /* rustiger ritme tussen de blokken */
  .stack{padding-bottom:0}
  .sleeve{margin-bottom:44px}
  .more{padding:52px 0 56px}
  .clients{padding:48px 0 56px}
  .clients__body{margin-top:36px}
  .clients__lead{margin-bottom:26px}
  .clients__cols{gap:18px;margin-bottom:32px}
  .about{padding:56px 0 8px}
  .about__lead{margin-bottom:36px}
  .about__body{gap:30px}
  .about__photos{height:min(60vw,300px);margin-bottom:8px}
  .about__text{gap:26px}
  .contact{padding:56px 0 64px;margin-top:32px}
  .contact__lead{margin-bottom:30px}
  .marquee{margin-top:6px}
  .footer{padding-bottom:calc(var(--bar-h) + 34px)}
  .footer .wrap{padding-top:22px;gap:14px}

  /* de balk moet binnen het scherm blijven */
  .bar{
    max-width:calc(100vw - 24px);
    padding:0 5px;
    gap:2px;
  }
  .bar__nav{gap:2px}
  .bar__pill{padding:0 11px;height:36px;font-size:13px;gap:6px;letter-spacing:.04em}
  .bar__pill i{width:5px;height:5px}
  .bar__back{padding:0 14px;font-size:13px}
}


/* projectbanner: een eigen spread vult het hele vlak */
.case__panel.case__panel--banner{height:auto;aspect-ratio:2400/1250;display:block}
.case__panel.case__panel--banner::before{content:none}
.case__panel.case__panel--banner img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;border-radius:0;box-shadow:none;
}

/* artiestnamen linken naar Spotify */
.namelist a{color:inherit;text-decoration:none}
.namelist a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* knoppen bij het hoofdstuk waar ze over gaan */
.links.links--deel{margin:clamp(6px,1.2vh,14px) 0 0}

/* video's vergroten */
.shot__groot{
  position:absolute;top:clamp(10px,1.2vw,16px);right:clamp(10px,1.2vw,16px);z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;padding:0;
  border:1px solid rgba(242,241,238,.3);background:rgba(12,12,11,.55);color:var(--paper);
  cursor:zoom-in;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.shot__groot:hover{background:var(--paper);color:var(--ink);transform:scale(1.06)}
.shot__groot:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.shot__groot svg{width:16px;height:16px}
.zoom video{display:none;max-width:100%;max-height:100%;border-radius:6px;background:#000}
.zoom.is-video{cursor:default}
.zoom.is-video video{display:block}
.zoom.is-video img,
.zoom.is-video .zoom__tip{display:none}

/* ==========================================================================
   RUSTIGE AFWERKING
   ========================================================================== */

/* beelden zakken zacht op hun plek als ze in beeld komen */
.shot__kader{transition:opacity .8s var(--ease),scale 1.6s var(--ease) var(--d,0ms)}
.shot.reveal .shot__kader{scale:1.04}
.shot.reveal.is-in .shot__kader{scale:1}
.tile__panel img{transition:opacity .8s var(--ease),scale 1.6s var(--ease) var(--d,0ms),transform .6s var(--ease)}
.tile.reveal .tile__panel img{scale:1.07}
.tile.reveal.is-in .tile__panel img{scale:1}

/* een beeld dat nog laadt verschijnt zacht in plaats van te ploppen */
.shot__kader.laadt,
.tile__panel img.laadt{opacity:0}

/* het hoofdstuknummer schuift net na de kop binnen */
.deel__nr{transition:opacity .9s var(--ease) .12s,translate 1.2s var(--ease) .12s}
.deel.reveal .deel__nr{opacity:0;translate:-16px 0}
.deel.reveal.is-in .deel__nr{opacity:1;translate:0 0}

/* vergroten opent met een zachte fade */
@keyframes zoomIn{from{opacity:0}}
@keyframes zoomBeeld{from{opacity:0;transform:scale(.965)}}
.zoom:not([hidden]){animation:zoomIn .4s var(--ease)}
.zoom:not([hidden]) > img,
.zoom:not([hidden]) > video{animation:zoomBeeld .6s var(--ease)}

/* van pagina naar pagina: oud zakt weg, nieuw komt rustig op */
.bar{view-transition-name:bar}
@keyframes vtUit{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px)}}
::view-transition-old(root){animation:vtUit .3s var(--ease) both}
::view-transition-new(root){animation:vtIn .65s var(--ease) both}

/* knoppen geven een klein tikje terug */
.filter:active,.video:active,.alle:active,.case__cat:active,.bar__pill:active,.shot__groot:active{scale:.97}

@media (prefers-reduced-motion:reduce){
  .reveal{filter:none}
  .shot.reveal .shot__kader,.tile.reveal .tile__panel img{scale:1}
  .deel.reveal .deel__nr{opacity:1;translate:0 0}
  .zoom:not([hidden]),.zoom:not([hidden]) > img,.zoom:not([hidden]) > video{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* bewegende omslag: dezelfde maat en schaduw als een stilstaande */
video.omslag{display:block;aspect-ratio:600/740;object-fit:cover;background:#000}
.crate__sleeve video.omslag{
  animation:zweef 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.42s);
  height:100%;width:auto;border-radius:3px;
  box-shadow:0 26px 46px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.13);
}
.tile__panel video.omslag{
  position:relative;z-index:1;height:calc(var(--h) * .78);width:auto;max-width:74%;
  border-radius:2px;box-shadow:0 18px 34px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);
  transition:transform .6s var(--ease);
}
.tile__link:hover .tile__panel video.omslag{transform:translateY(-10px) rotate(-1deg)}
.case__panel video.omslag{
  position:relative;z-index:1;height:calc(var(--h) * .88);width:auto;max-width:62%;
  border-radius:3px;box-shadow:0 34px 64px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15);
}
@media (prefers-reduced-motion:reduce){.crate__sleeve video.omslag{animation:none}}

/* ==========================================================================
   BOEKJE OM DOORHEEN TE BLADEREN
   ========================================================================== */
.shot--boek{padding-bottom:clamp(52px,6vw,72px)}
.boek{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,22px);outline:none}
.boek:focus-visible .boek__vel{outline:2px solid var(--red);outline-offset:6px}
.boek__vel{position:relative;width:100%;aspect-ratio:2400/976;perspective:2600px;touch-action:pan-y}
/* de rest van het boekje ligt eronder, als dikte aan de rand */
.boek__vel::before,
.boek__vel::after{
  content:'';position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:rgba(242,241,238,.1);
}
.boek__vel::before{transform:translate(7px,7px)}
.boek__vel::after{transform:translate(14px,14px);opacity:.5}
.boek__blad{
  position:absolute;inset:0;margin:0;z-index:calc(100 - var(--n));
  transform-origin:left center;backface-visibility:hidden;
  border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);
  transition:transform 1.1s var(--ease),opacity .35s ease;
}
.boek__blad::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%);
  opacity:0;transition:opacity .9s var(--ease);
}
.boek__blad.is-om{
  transform:rotateY(-115deg);opacity:0;pointer-events:none;
  transition:transform 1.1s var(--ease),opacity .45s ease .5s;
}
.boek__blad.is-om::after{opacity:1}
.shot .boek__blad img{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;border-radius:0;box-shadow:none;cursor:zoom-in;
}
.shot:hover .boek__blad img{transform:none}
@keyframes tik{0%,100%{transform:none}30%{transform:translateX(-8px)}65%{transform:translateX(5px)}}
.boek__vel.is-tik{animation:tik .45s var(--ease)}

.boek__nav{display:flex;align-items:center;gap:18px;position:relative;z-index:2}
.boek__knop{
  width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;
  border:1px solid rgba(242,241,238,.3);background:rgba(12,12,11,.4);color:var(--paper);
  font-size:17px;cursor:pointer;
  transition:background .25s ease,color .25s ease,opacity .25s ease,transform .3s var(--ease);
}
.boek__knop:hover:not(:disabled){background:var(--paper);color:var(--ink);transform:translateY(-2px)}
.boek__knop:disabled{opacity:.3;cursor:default}
.boek__knop:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.boek__teller{
  min-width:5.5em;text-align:center;
  font-family:var(--brand);font-size:14px;letter-spacing:.12em;color:rgba(242,241,238,.6);
}
.boek__teller b{color:var(--paper);font-weight:700}
@media (max-width:700px){
  .boek__knop{width:36px;height:36px;font-size:15px}
  .boek__vel::after{transform:translate(9px,9px)}
  .boek__vel::before{transform:translate(4px,4px)}
}
@media (prefers-reduced-motion:reduce){
  .boek__blad,.boek__blad.is-om{transition:opacity .2s ease}
  .boek__blad.is-om{transform:none}
  .boek__vel.is-tik{animation:none}
}

/* een knop direct onder zijn eigen beeld */
.shot-met-knop{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.shot-met-knop > .shot{width:100%;flex:1}
.shot-met-knop .knoppen{display:flex;flex-wrap:wrap;gap:8px}
.shots--breed + .links,.shot-met-knop + .shots{margin-top:0}
.video.video--klein{padding:9px 16px 10px;font-size:.72rem}

/* ==========================================================================
   COVERWAND
   ========================================================================== */
.shot--wand{display:block;padding:clamp(18px,3vw,40px) clamp(18px,3vw,40px) clamp(46px,5vw,60px)}
.wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(12px,1.6vw,20px)}
.wand__cover{position:relative;display:block;border-radius:4px;overflow:hidden;text-decoration:none;color:var(--paper);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shot .wand__cover img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;max-height:none;border-radius:0;box-shadow:none;cursor:pointer;transition:transform .7s var(--ease)}
.shot:hover .wand__cover img{transform:none}
.wand__cover:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 34px 50px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.2)}
.shot .wand__cover:hover img{transform:scale(1.06)}
.wand__info{position:absolute;inset:auto 0 0 0;padding:28px 10px 9px;display:grid;gap:2px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));
  opacity:0;translate:0 8px;transition:opacity .35s ease,translate .45s var(--ease)}
.wand__info b{font-family:var(--display);font-weight:800;font-size:.86rem;line-height:1.1}
.wand__info span{font-family:var(--brand);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.wand__cover:hover .wand__info,.wand__cover:focus-visible .wand__info{opacity:1;translate:0 0}
.wand__cover:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wand__badge{position:absolute;top:8px;left:8px;padding:4px 9px 5px;border-radius:99px;background:var(--red);color:#fff;
  font-style:normal;font-family:var(--brand);font-weight:700;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.wand__label{position:absolute;left:clamp(18px,2vw,26px);bottom:clamp(16px,1.8vw,22px);margin:0;
  font-family:var(--brand);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,241,238,.55)}
.shot--wand{position:relative}
@media (max-width:700px){
  .wand{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .wand__info{display:none}
  .wand__badge{top:4px;left:4px;padding:3px 6px 4px;font-size:.5rem}
}

/* ==========================================================================
   PLATENBAK
   ========================================================================== */
.shot--bak{display:block;position:relative;padding:clamp(22px,3.4vw,48px) clamp(16px,3vw,44px) clamp(52px,6vw,72px)}
.bak{--w:clamp(170px,23vw,300px);outline:none}
.bak:focus-visible .bak__podium{outline:2px solid var(--red);outline-offset:8px;border-radius:6px}
.bak__podium{
  position:relative;height:calc(var(--w) * 1.22);
  perspective:1500px;transform-style:preserve-3d;touch-action:pan-y;
}
.bak__plaat{
  position:absolute;left:50%;top:4%;width:var(--w);aspect-ratio:1;margin-left:calc(var(--w) / -2);
  padding:0;border:0;background:none;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .85s var(--ease),opacity .5s ease;
}
.bak__plaat img{
  position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;
  box-shadow:0 30px 50px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1);
  -webkit-box-reflect:below 4px linear-gradient(transparent 72%,rgba(255,255,255,.14));
  transition:filter .5s ease;
}
.bak__plaat:not(.is-actief) img{filter:brightness(.62) saturate(.85)}
.bak__plaat:not(.is-actief):hover img{filter:brightness(.85)}
.bak__plaat:focus-visible{outline:none}
.bak__plaat:focus-visible img{outline:2px solid var(--red);outline-offset:4px}
/* de plaat zelf, die bij de actieve hoes naar rechts uitschuift en draait */
.bak__vinyl{
  position:absolute;z-index:1;top:3%;left:3%;width:94%;height:94%;
  transition:transform 1s var(--ease) .1s;
}
.bak__schijf{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.1) 0 1.2%,transparent 1.4%),
    radial-gradient(circle,transparent 0 17%,#0d0d0d 17.4% 19%,transparent 19.4%),
    repeating-radial-gradient(circle,#191919 0 1.5px,#0a0a0a 1.5px 3.5px);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);
}
.bak__schijf::before{
  content:'';position:absolute;left:33%;top:33%;width:34%;height:34%;border-radius:50%;
  background:var(--hoes) center/cover;
  box-shadow:0 0 0 2px rgba(0,0,0,.6);
}
.bak__schijf::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.08) 14%,transparent 20% 60%,rgba(255,255,255,.06) 64%,transparent 70%);
}
.bak__plaat.is-actief .bak__vinyl{transform:translateX(52%)}
@keyframes draai{to{transform:rotate(360deg)}}
.bak__plaat.is-actief .bak__schijf{animation:draai 3.2s linear infinite}
.bak__label{
  position:absolute;z-index:3;top:8px;left:8px;padding:4px 9px 5px;border-radius:99px;
  background:var(--red);color:#fff;font-style:normal;font-family:var(--brand);font-weight:700;
  font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
}
@keyframes bakTik{0%,100%{transform:none}30%{transform:translateX(-10px)}65%{transform:translateX(6px)}}
.bak__podium.is-tik{animation:bakTik .45s var(--ease)}
.bak__nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:clamp(28px,4vw,46px)}

/* wat er bij de gekozen cover hoort */
.bak__info{margin-top:clamp(24px,3.5vw,40px);color:var(--paper)}
@keyframes bladIn{from{opacity:0;transform:translateY(12px)}}
.bak__blad{animation:bladIn .6s var(--ease);display:grid;gap:clamp(18px,2.6vw,30px)}
.bak__blad[hidden]{display:none}
.bak__blad--verhaal{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.bak__blad:not(.bak__blad--verhaal){justify-items:center;text-align:center}
.bak__blad:not(.bak__blad--verhaal) .knoppen{justify-content:center}
.bak__jaar{margin:0 0 6px;font-family:var(--brand);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,241,238,.55)}
.bak__titel{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.02em}
.bak__artiest{margin:.45em 0 1.1em;font-family:var(--brand);font-size:.95rem;color:rgba(242,241,238,.75)}
.bak__info .video{color:var(--paper);border-color:rgba(242,241,238,.25)}
.bak__info .video:hover{background:var(--paper);color:var(--ink)}
.bak__werk .case__k{color:rgba(242,241,238,.55);margin:0 0 12px}
.bak__stap{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid rgba(242,241,238,.12)}
.bak__stap b{font-family:var(--brand);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,241,238,.6);padding-top:3px}
.bak__stap p{margin:0;font-size:.95rem;line-height:1.6;color:rgba(242,241,238,.88)}
.bak__extra{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.bak__extra figure{margin:0}
.shot .bak__extra img{display:block;width:100%;height:auto;max-height:none;border-radius:4px;cursor:zoom-in}
.shot:hover .bak__extra img{transform:none}
.shot .bak__extra figcaption{position:static;white-space:normal;overflow:visible;margin-top:8px;font-family:var(--brand);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,241,238,.5)}
@media (max-width:760px){
  .bak{--w:clamp(130px,42vw,200px)}
  .bak__blad--verhaal{grid-template-columns:1fr}
  .bak__extra{grid-template-columns:1fr}
  .bak__stap{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .bak__plaat,.bak__vinyl{transition:none}
  .bak__plaat.is-actief .bak__schijf,.bak__podium.is-tik,.bak__blad{animation:none}
}

/* ==========================================================================
   HOES MET VINYL (elke cover-artwork)
   ========================================================================== */
.hoes{position:relative;display:block;aspect-ratio:1;flex:none}
.hoes img{position:relative;z-index:2;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.hoes .bak__vinyl{transform:translateX(48%);transition:transform 1.3s var(--ease) .45s}
.hoes .bak__schijf{animation:draai 3.4s linear infinite}
.reveal:not(.is-in) .hoes .bak__vinyl{transform:none;transition:none}
@keyframes uitschuiven{from{transform:none}}
.case__panel .hoes .bak__vinyl,
.sleeve__panel .hoes .bak__vinyl{animation:uitschuiven 1.4s var(--ease) .6s backwards}
/* per plek: de hoes schuift iets naar links, zodat hoes en plaat samen in het midden staan */
.case__panel .hoes{position:relative;z-index:1;height:calc(var(--h) * .74);translate:-21% 0}
.case__panel .hoes img{height:100%;width:100%;border-radius:3px;box-shadow:0 34px 64px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}
.sleeve__panel .hoes{position:relative;z-index:1;height:calc(var(--h) * .74);translate:-21% 0;transition:transform .45s var(--ease)}
.sleeve__panel .hoes img{border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}
.sleeve__link:hover .sleeve__panel .hoes{transform:translateY(-8px)}
.sleeve__link:hover .sleeve__panel .hoes img{transform:none}
.sleeve__link:hover .hoes .bak__vinyl{transform:translateX(58%);transition-delay:0s}
.tile__panel .hoes{position:relative;z-index:1;height:calc(var(--h) * .66);translate:-21% 0}
.tile__panel .hoes img{border-radius:2px;box-shadow:0 18px 34px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}
.tile__link:hover .hoes .bak__vinyl{transform:translateX(58%);transition-delay:0s}
/* hoes en uitgeschoven plaat staan samen in het midden */
.shot .hoes{width:60%;translate:-21% 0}
.shot__kader:has(.hoes){width:100%;display:flex;justify-content:center}
.shot .hoes{max-width:min(60%,440px)}
.shot .hoes img{border-radius:4px;box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12)}
.shot:hover .hoes img{transform:none}
.shot:hover .hoes .bak__vinyl{transform:translateX(56%);transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .hoes .bak__schijf,.case__panel .hoes .bak__vinyl,.sleeve__panel .hoes .bak__vinyl{animation:none}
}

/* ==========================================================================
   INSTAGRAM-POSTS: de slides van één post naast elkaar
   ========================================================================== */
.shot--post{align-items:stretch}
.post{display:flex;gap:clamp(6px,.8vw,10px);justify-content:center;width:100%}
.post__slide{position:relative;flex:0 1 auto;width:calc((100% - (var(--n) - 1) * 10px) / var(--n));max-width:340px}
.shot .post__slide img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;max-height:none;border-radius:4px}
.shot:hover .post__slide img{transform:none}
.post__slide:hover img{transform:translateY(-6px)!important}
.post__nr{position:absolute;top:8px;right:8px;padding:3px 8px 4px;border-radius:99px;background:rgba(12,12,11,.65);color:var(--paper);
  font-style:normal;font-family:var(--brand);font-size:.58rem;letter-spacing:.08em}
/* een dun lijntje tussen de slides laat zien dat ze bij elkaar horen */
.post__slide + .post__slide::before{content:'';position:absolute;left:calc(clamp(6px,.8vw,10px) * -1);top:50%;width:clamp(6px,.8vw,10px);height:1px;background:rgba(242,241,238,.35)}
.shot--post figcaption b{color:rgba(242,241,238,.85);font-weight:700}

/* filters altijd op één rij: past het niet, dan veeg je er zijwaarts doorheen */
.filters__row{
  flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:-4px;padding:4px;
}
.filters__row::-webkit-scrollbar{display:none}
.filter{flex:none;white-space:nowrap;padding:10px 14px 11px;font-size:12.5px;letter-spacing:.05em}
@media (min-width:901px){.filters__row{gap:6px}}
@media (max-width:900px){
  .filters__row{margin-right:calc(-1 * max(16px,4vw));padding-right:max(16px,4vw)}
}

/* op een telefoon moeten hoes en plaat samen in het vak passen */
@media (max-width:700px){
  .sleeve__panel .hoes,.case__panel .hoes{height:auto;width:min(58%,calc(var(--h) * .62))}
  .tile__panel .hoes{height:auto;width:56%}
  .shot .hoes{width:56%}
  .sleeve__link:hover .hoes .bak__vinyl,.shot:hover .hoes .bak__vinyl{transform:translateX(48%)}
}

@media (max-width:700px){
  /* logo scrolt op een telefoon mee, zodat het niet over de tekst heen staat */
  .wordmark{position:absolute}
  /* een losse derde kaart in een rij pakt de volle breedte */
  .shots--3 > :last-child{grid-column:1 / -1}
  .shots--3 > .shot-met-knop:last-child{align-items:center}
  .shots--3 > .shot-met-knop:last-child > .shot{max-width:62%}
  .shot-met-knop .knoppen{max-width:100%}
  .video.video--klein{max-width:100%}
}

/* projectteksten op telefoon en tablet: label boven de tekst, tekst over de volle breedte */
@media (max-width:900px){
  .chapter{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .chapter .case__k{margin:0}
  .chapter p:last-child{max-width:none;font-size:1rem;line-height:1.65}
  .bak__stap{grid-template-columns:1fr;gap:6px}
}

/* knoppen op een telefoon: klein, op één regel en netjes in een rij */
@media (max-width:700px){
  .links,.knoppen{display:flex;flex-wrap:wrap;gap:6px}
  .links{margin-top:14px}
  .video,.video.video--klein{
    gap:7px;padding:7px 12px 8px;font-size:10.5px;letter-spacing:.05em;
    max-width:100%;min-width:0;white-space:nowrap;
  }
  .video__label{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .video__play{flex:none;width:6px;height:6px}
  .shot-met-knop{gap:8px}
}

/* telefoon: header en knoppen compacter */
@media (max-width:640px){
  /* de waaier: kleinere hoezen, zodat je de hele boog ziet */
  .crate{--h:clamp(170px,26vh,230px)}
  .crate__sleeve{height:calc(var(--h) * 1.02)}
  .crate__sleeve:hover,.crate__sleeve:focus-visible,.crate__sleeve.is-active{transform:rotate(var(--a,0deg)) translateY(-14px) scale(1.02)}
  /* overige knoppen */
  .alle{gap:9px;padding:10px 18px 11px;font-size:11.5px;white-space:nowrap}
  .sleeve__cta{padding:7px 14px 8px;font-size:10.5px;gap:7px}
  .boek__knop{width:34px;height:34px;font-size:14px}
  .bar__pill{padding:0 12px;height:38px;font-size:13px}
  .case__cat{padding:6px 11px 7px;font-size:10px}
}

.crate__sleeve.is-weg{display:none}
/* artiestenlijst op een telefoon: twee nette kolommen zonder puntjes */
@media (max-width:640px){
  .namelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;font-size:.8rem}
  .namelist{font-size:.74rem;letter-spacing:.03em}
  .namelist li{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:normal;line-height:1.25;overflow-wrap:anywhere}
  .namelist li:not(:last-child)::after{content:none}
  .namelist li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--red);transform:translateY(-.15em)}
}

/* telefoon: overal hetzelfde ritme tussen de blokken van een projectpagina */
@media (max-width:700px){
  .case__panel{margin-bottom:28px}
  .case__cats{margin-bottom:0}
  .case__chapters{margin-top:24px;margin-bottom:0}
  .case__kind{margin-bottom:10px}
  .case__samen{margin:28px 0 0}
  .case__media{margin:36px 0 0}
  .case__deel + .case__deel{margin-top:44px}
  .deel{margin-bottom:16px;padding-top:18px}
  .shots:last-child{margin-bottom:0}
  .links{margin:20px 0 0}
  .links.links--deel{margin-top:12px}
  .case__media + .links{margin-top:28px}
  .case__next{margin-top:36px;padding-top:24px}
}