/* Homepage archive → memory wall. Posters keep their full, uncropped artwork. */
.posters.wall{--ease:cubic-bezier(.16,1,.3,1)}
.wall .poster{position:relative;margin:0}
/* masking-tape strip pinning each poster */
.wall .poster:before{content:"";position:absolute;z-index:3;left:50%;top:-9px;width:64px;height:20px;margin-left:-32px;background:linear-gradient(180deg,#f0d9b04d,#d9b68a33);border:1px solid #f0d9b033;transform:rotate(calc(var(--tilt,0deg)*-1.4 - 2deg));pointer-events:none}
.wall .poster .photo-link{display:block;position:relative;border-radius:4px;overflow:hidden;border:1px solid #f0b36a40;box-shadow:0 22px 38px -16px #000d,0 0 0 1px #00000040}
.wall .poster .photo-link img{display:block;width:100%;height:auto}
.wall .poster figcaption{margin-top:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9b595}
.wall .poster figcaption:before{content:"";display:inline-block;width:18px;height:1px;margin-right:9px;vertical-align:middle;background:#f0b36a99}

/* ---------- mobile: swipeable memory rail (one dominant poster, small peek) ---------- */
@media(max-width:899px){
 .posters.wall{--pw:min(66vw,300px);display:flex;align-items:center;gap:14px;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1*var(--pad));padding:30px calc((100vw - var(--pw))/2) 34px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .posters.wall::-webkit-scrollbar{display:none}
 .wall .poster{flex:0 0 var(--pw);scroll-snap-align:center;scroll-snap-stop:always;opacity:.6;transform:scale(.9) rotate(var(--tilt,0deg));transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease;will-change:transform,opacity}
 .wall .poster.is-active{opacity:1;transform:scale(1) rotate(0deg)}
 .wall .poster.is-active .photo-link{border-color:#f0b36acc;box-shadow:0 22px 38px -16px #000d,0 0 22px -2px #f0a04e66}
 .wall .poster:nth-child(1){--tilt:-1.6deg}.wall .poster:nth-child(2){--tilt:1.2deg}.wall .poster:nth-child(3){--tilt:-1deg}
 .wall.wall-in .poster{animation:wall-drop .85s var(--ease) backwards}
 .wall.wall-in .poster:nth-child(2){animation-delay:.1s}.wall.wall-in .poster:nth-child(3){animation-delay:.2s}
}

/* ---------- desktop: pinned wall with depth ---------- */
@media(min-width:900px){
 .posters.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,4.5vw,70px);align-items:center;overflow:visible;padding:46px 5% 56px;perspective:1100px}
 .wall .poster{transform:rotate(var(--tilt,0deg));transition:transform .55s var(--ease),opacity .4s ease}
 .wall .poster:nth-child(1){--tilt:-2.2deg}.wall .poster:nth-child(2){--tilt:1.3deg;translate:0 -14px}.wall .poster:nth-child(3){--tilt:2.6deg}
 /* a darker echo of each poster behind it, offset the opposite way */
 .wall .poster:after{content:"";position:absolute;z-index:-1;inset:0 0 34px 0;border:1px solid #f0b36a33;border-radius:4px;background:#0c1114;transform:translate3d(calc(var(--tilt,0deg)*-4),14px,0) rotate(calc(var(--tilt,0deg)*-1.8));box-shadow:0 20px 30px -16px #000}
 .wall .poster:hover,.wall .poster:focus-within{transform:translateY(-12px) rotate(0deg) scale(1.04);z-index:4}
 .wall .poster:hover .photo-link,.wall .poster:focus-within .photo-link{border-color:#f0b36acc;box-shadow:0 34px 50px -18px #000f,0 0 26px -4px #f0a04e70}
 .wall:hover .poster:not(:hover){opacity:.72}
 .wall.wall-in .poster{animation:wall-drop .95s var(--ease) backwards}
 .wall.wall-in .poster:nth-child(2){animation-delay:.12s}.wall.wall-in .poster:nth-child(3){animation-delay:.24s}
}
@keyframes wall-drop{from{opacity:0;transform:translate3d(0,-38px,0) scale(1.08) rotate(calc(var(--tilt,0deg)*2.2))}}
@media(prefers-reduced-motion:reduce){.wall .poster,.wall.wall-in .poster{animation:none!important;transition:none!important}}
html.still .wall .poster,html.still .wall.wall-in .poster{animation:none!important;transition:none!important}