:root{
  --bg:#efeeea; --ink:#0b0b0b;
  --rail-y:30svh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.kop{position:fixed;inset:0 0 auto 0;z-index:5;text-align:center;padding:max(20px,env(safe-area-inset-top)) 16px 0;pointer-events:none}
.kop h1{font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:.32em;padding-left:.32em}
.kop p{margin-top:6px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.5}

.scroll{height:520svh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}

.rek{position:absolute;left:0;right:0;top:var(--rail-y);padding:0 5vw}
.stang{position:absolute;left:4vw;right:4vw;top:0;height:7px;border-radius:4px;
  background:linear-gradient(#3a3a3a,#000 45%,#000 70%,#222);
  box-shadow:0 8px 14px -8px rgba(0,0,0,.45)}
.stang::before,.stang::after{content:"";position:absolute;top:-4px;width:12px;height:15px;border-radius:3px;background:#000}
.stang::before{left:-8px}.stang::after{right:-8px}

.items{list-style:none;display:flex;justify-content:space-around;align-items:flex-start;gap:1.5vw;position:relative;padding-top:3px}
.item{position:relative;flex:1 1 0;max-width:23vw;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;will-change:transform;cursor:default}
.haak{width:54px;height:34px;display:block;margin-bottom:-6px;position:relative;z-index:1}
.haak path{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.foto{position:relative;width:100%;height:min(calc(var(--k)*100svh),calc(var(--k)*190vw))}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;
  opacity:0;user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.18))}
.naam{margin-top:22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-align:center;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.item:hover .naam,.item.actief .naam{opacity:.75;transform:none}

.hint{position:absolute;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));text-align:center;font-size:10px;letter-spacing:.35em;text-transform:uppercase;opacity:.5;transition:opacity .4s}
.hint::after{content:"";display:block;width:1px;height:28px;background:var(--ink);margin:10px auto 0;animation:lijn 1.8s ease-in-out infinite;transform-origin:top}
@keyframes lijn{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hint.weg{opacity:0}

@media (max-width:700px){
  :root{--rail-y:15svh}
  .stang{display:none}
  .rek{padding:0 3vw}
  .items{display:grid;grid-template-columns:1fr 1fr;row-gap:7svh;gap:7svh 0}
  .item{max-width:none;padding:0 3vw}
  .item::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;background:#000;border-radius:3px}
  .item:nth-child(odd)::before{left:-3vw;border-radius:0 3px 3px 0}
  .item:nth-child(even)::before{right:-3vw;border-radius:3px 0 0 3px}
  .foto{height:calc(var(--k)*72svh)}
  .haak{width:40px;height:26px}
  .hint{display:none}
  .naam{font-size:8px;letter-spacing:.12em;margin-top:12px;opacity:.7;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .scroll{height:auto}.stage{position:relative;height:100svh}
  .hint{display:none}.hint::after{animation:none}
}