/* ============================================================
   De fotomuur — het hele archief op één oneindig vlak
   ============================================================ */
.muur-body{
  margin:0;overflow:hidden;background:var(--blue-950);
  height:100vh;height:100svh;
}

.muur{position:fixed;inset:0;cursor:grab;touch-action:none;overscroll-behavior:none}
.muur.sleept{cursor:grabbing}
.muur-vlak{position:absolute;inset:0;transform-origin:0 0;will-change:transform}

.tegel{
  position:absolute;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.05);
  box-shadow:0 10px 26px rgba(3,5,28,.45);
  transition:outline-color .18s ease;
  outline:2px solid transparent;outline-offset:-2px;
}
.tegel img{width:100%;height:100%;object-fit:cover;display:block}
.muur:not(.sleept) .tegel:hover{outline-color:var(--yellow);z-index:2}

.muur-vignet{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(4,7,32,.72) 100%),
    linear-gradient(180deg,rgba(4,7,32,.9),transparent 22%,transparent 76%,rgba(4,7,32,.92));
}

/* ---- hulpregel onderin ---- */
.muur-hulp{
  position:fixed;left:50%;bottom:clamp(.8rem,3vh,1.6rem);transform:translateX(-50%);z-index:20;
  padding:.5rem 1rem;border-radius:99px;
  background:rgba(6,10,43,.6);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.72);
  transition:opacity .5s ease;text-align:center;max-width:min(92vw,44rem);
}
.muur-hulp b{color:var(--yellow)}
.muur-hulp.weg{opacity:0;pointer-events:none}

/* ---- zoomknoppen ---- */
.muur-zoom{
  position:fixed;right:clamp(.7rem,2vw,1.4rem);bottom:clamp(.8rem,3vh,1.6rem);z-index:20;
  display:flex;flex-direction:column;gap:.4rem;
}
.muur-zoom button{
  width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(6,10,43,.65);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#fff;font-size:1.2rem;line-height:1;
}
.muur-zoom button:hover{background:var(--yellow);color:var(--ink)}

/* ---- de kaart die opengaat ---- */
.muur-kaart{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(4,7,32,.86);backdrop-filter:blur(14px);
  padding:clamp(1rem,4vw,3rem);
  animation:muurIn .28s ease-out;
}
@keyframes muurIn{from{opacity:0}to{opacity:1}}
.muur-kaart[hidden]{display:none}
.muur-kaart figure{margin:0;max-width:min(1000px,92vw);text-align:center}
.muur-kaart img{
  max-width:100%;max-height:min(70vh,760px);border-radius:14px;display:block;margin-inline:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.muur-kaart figcaption{
  margin-top:1rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center;
}
.muur-kaart .jaar{
  font-family:var(--font-display);color:var(--yellow);font-size:1.4rem;line-height:1;
}
.muur-kaart b{font-size:1.05rem}
.muur-sluit{
  position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;
}
.muur-sluit:hover{background:var(--yellow);color:var(--ink)}

/* ---- tekstversie onderaan (buiten beeld, wel leesbaar voor zoekmachines) ---- */
.muur-uitleg{
  position:fixed;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.muur-uitleg:focus-within{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,36rem);height:auto;z-index:50;
  background:var(--blue-900);padding:1.6rem;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

@media (max-width:720px){
  .muur-hulp{font-size:.66rem}
}