/* Casepagina's: kop + scroll-show (tekst links, vast beeldvlak rechts) */
.progress{position:fixed;top:72px;left:0;height:2px;background:var(--violet);width:0;z-index:31;transition:width .4s ease}

.c-head{padding-block:9vh 6vh}
.c-back{font-size:15px;color:var(--muted);text-decoration:none}
.c-back:hover{color:var(--ink)}
.c-meta{display:flex;gap:6px 24px;flex-wrap:wrap;font-size:15px;color:var(--muted);margin:40px 0 22px}
.c-meta b{color:var(--ink);font-weight:500}
.c-meta{align-items:center}
.c-meta .logo{margin-right:6px}
.c-head h1{font-size:clamp(44px,7.4vw,108px);line-height:.97;margin:0;max-width:13ch}
.c-head .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:52ch;margin:34px 0 0}
.c-head .hint{margin-top:56px;font-size:14px;color:var(--muted)}

.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;border-top:1px solid var(--line)}
.steps{padding:12vh 0 30vh}
.step{min-height:88vh;display:flex;align-items:center}
.step:first-child{min-height:70vh}
.step>div{max-width:40ch;transition:opacity .35s}
.step:not(.on)>div{opacity:.28}
.step .k{font:500 15px 'Space Grotesk',sans-serif;color:var(--muted);display:block;margin-bottom:14px}
.step h2{font:500 clamp(26px,2.6vw,36px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-0.03em;margin:0 0 14px}
.step p{margin:0 0 12px}
.step .src{margin-top:16px}

.stage{position:sticky;top:96px;height:calc(100vh - 136px);display:flex;align-items:center}
.stage-in{width:100%;transition:opacity .22s ease,transform .22s ease}
.stage-in.out{opacity:0;transform:translateY(8px)}
.stage-count{position:absolute;top:0;right:0;font-size:13px;color:var(--muted)}

/* scène-onderdelen */
.sc-big{font:500 clamp(44px,6.4vw,96px)/.98 'Space Grotesk',sans-serif;letter-spacing:-0.045em}
.sc-big .hl{color:var(--violet)}
.sc-sub{font-size:17px;color:var(--muted);margin-top:22px;max-width:44ch}
.sc-quote{font:400 clamp(30px,3.4vw,48px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-0.03em;max-width:20ch}
.sc-quote::before{content:"\201C"}.sc-quote::after{content:"\201D"}
.sc-nums{display:grid;gap:0;border-top:1px solid var(--ink)}
.sc-nums>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.sc-nums .v{font:500 clamp(34px,3.6vw,52px)/1 'Space Grotesk',sans-serif;letter-spacing:-0.035em}
.sc-nums .hl{color:var(--violet)}
.sc-nums .k{color:var(--muted);font-size:16px}
.sc-waffles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.sc-waffle .w{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;max-width:340px}
.sc-waffle .w i{aspect-ratio:1;border-radius:50%;background:var(--soft);transform:scale(.4);opacity:0;animation:pop .35s forwards}
.sc-waffle .w i.on{background:var(--violet)}
.sc-waffle .w i.mid{background:var(--muted)}
.sc-waffle .cap{margin-top:18px;max-width:30ch}
.sc-waffle .cap b{display:block;font:500 34px 'Space Grotesk',sans-serif;letter-spacing:-0.03em}
@keyframes pop{to{transform:scale(1);opacity:1}}
.sc-list{list-style:none;margin:0;padding:0;counter-reset:l}
.sc-list li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:19px;color:var(--muted);transition:color .3s}
.sc-list li::before{counter-increment:l;content:counter(l);font:500 16px 'Space Grotesk',sans-serif}
.sc-list li.on{color:var(--ink)}
.sc-list li.on::before{color:var(--violet)}
svg.sc{width:100%;height:auto;display:block;overflow:visible}
svg.sc .ax{font:400 13px 'Geist',sans-serif;fill:var(--muted)}
svg.sc .lb{font:500 14px 'Geist',sans-serif;fill:var(--ink)}
svg.sc .lb2{font:400 13px 'Geist',sans-serif;fill:var(--muted)}
svg.sc .big{font:500 30px 'Space Grotesk',sans-serif;letter-spacing:-0.03em}
svg.sc .draw{animation:draw 1.3s cubic-bezier(.6,0,.2,1) forwards}
svg.sc .fade{opacity:0;animation:fade .5s .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.sc-cap{font-size:13px;color:var(--muted);margin-top:14px}

/* einde */
.c-end{padding-block:120px 140px;border-top:1px solid var(--line)}
.c-end h2{font-size:clamp(28px,3vw,40px);margin:0 0 32px}
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:32px;border-radius:6px;background:var(--band);text-decoration:none;color:inherit;margin-bottom:64px}
.next .meta{font-size:14px;color:var(--muted);margin-bottom:12px}
.next h3{font:500 clamp(26px,2.8vw,40px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-0.03em;margin:0}
.next .go{font-weight:500;color:var(--violet)}
.next:hover .go{text-decoration:underline}

@media (max-width:900px){
  .progress{top:72px}
  .scrolly{grid-template-columns:1fr;gap:0}
  .stage{grid-row:1;top:72px;height:50vh;height:50svh;z-index:5;background:var(--cream);padding:16px 0;border-bottom:1px solid var(--line)}
  .stage-count{display:none}
  .stage-in{transform-origin:center}
  .steps{grid-row:2;padding:0 0 30vh}
  /* een stap is precies het tekstvak onder het beeldvlak, zodat tekst en scène samen in beeld staan */
  .step,.step:first-child{min-height:calc(50svh - 72px);align-items:flex-start;padding:28px 0 40px}
  .step:not(.on)>div{opacity:.45}
  .sc-big{font-size:clamp(38px,11vw,60px)}
  .sc-quote{font-size:26px}
  .sc-waffle .w{gap:4px;max-width:150px}
  .sc-waffle .cap b{font-size:24px}
  .sc-waffles{grid-template-columns:1fr 1fr;gap:16px}
  .sc-nums>div{padding:10px 0}
  .sc-nums .v{font-size:30px}
  .sc-list li{font-size:16px;line-height:1.35;padding:9px 0;grid-template-columns:28px minmax(0,1fr)}
  .sc-list li:not(.on) span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .next{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  svg.sc .draw{animation:none;stroke-dashoffset:0!important}
  svg.sc .fade,.sc-waffle .w i{animation:none;opacity:1;transform:none}
  .stage-in{transition:none}
}