.event-memories{background:#f7f5ef}
.memories-heading{text-align:center}
.memories-heading h2{margin:0 0 16px}
.memories-heading p{margin:0 auto;color:#555d52;font-size:14px;max-width:40ch}
.polaroid-table{position:relative;max-width:1000px;aspect-ratio:1.35;margin:64px auto 32px;isolation:isolate}
.event-polaroid{--x:50%;--y:50%;--tilt:-7deg;--size:23%;position:absolute;left:var(--x);top:var(--y);z-index:1;display:block;width:var(--size);margin:0;padding:8px 8px 0;border:1px solid #ebe9e2;border-radius:0;background:#fff;color:#282c26;box-shadow:0 8px 20px #282c2626;transform:translate(-50%,-50%) rotate(var(--tilt));transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-tap-highlight-color:transparent}
.event-polaroid:nth-child(1){--x:14%;--y:20%;--tilt:-12deg;--size:22%}
.event-polaroid:nth-child(2){--x:37%;--y:25%;--tilt:6deg;--size:25%;z-index:2}
.event-polaroid:nth-child(3){--x:62%;--y:18%;--tilt:-8deg;--size:20%}
.event-polaroid:nth-child(4){--x:85%;--y:26%;--tilt:13deg;--size:23%}
.event-polaroid:nth-child(5){--x:20%;--y:49%;--tilt:8deg;--size:24%;z-index:2}
.event-polaroid:nth-child(6){--x:46%;--y:51%;--tilt:-14deg;--size:21%}
.event-polaroid:nth-child(7){--x:72%;--y:47%;--tilt:5deg;--size:25%;z-index:3}
.event-polaroid:nth-child(8){--x:87%;--y:58%;--tilt:-9deg;--size:20%}
.event-polaroid:nth-child(9){--x:13%;--y:78%;--tilt:-6deg;--size:21%}
.event-polaroid:nth-child(10){--x:38%;--y:79%;--tilt:11deg;--size:24%;z-index:3}
.event-polaroid:nth-child(11){--x:61%;--y:76%;--tilt:-10deg;--size:23%;z-index:2}
.event-polaroid:nth-child(12){--x:83%;--y:84%;--tilt:7deg;--size:22%}
.event-polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;pointer-events:none;border-radius:0}
.event-polaroid::after{content:"";display:block;height:40px}
.event-polaroid.is-front{transform:translate(-50%,calc(-50% - 8px)) rotate(0deg) scale(1.28);box-shadow:0 20px 40px #282c2640}
.event-polaroid:focus-visible{outline:3px solid #738561;outline-offset:5px}
@media(hover:hover){.event-polaroid:not(.is-front):hover{transform:translate(-50%,calc(-50% - 6px)) rotate(var(--tilt))}}
@media(max-width:760px){
 .polaroid-table{aspect-ratio:.56;max-width:540px;margin-block:48px 32px}
 .event-polaroid{padding:5px 5px 0}
 .event-polaroid::after{height:28px}
 .event-polaroid:nth-child(1){--x:17%;--y:14%;--size:30%}
 .event-polaroid:nth-child(2){--x:47%;--y:18%;--size:35%}
 .event-polaroid:nth-child(3){--x:82%;--y:13%;--size:29%}
 .event-polaroid:nth-child(4){--x:22%;--y:37%;--size:33%}
 .event-polaroid:nth-child(5){--x:54%;--y:41%;--size:34%}
 .event-polaroid:nth-child(6){--x:82%;--y:35%;--size:28%}
 .event-polaroid:nth-child(7){--x:18%;--y:61%;--size:34%}
 .event-polaroid:nth-child(8){--x:48%;--y:64%;--size:30%}
 .event-polaroid:nth-child(9){--x:81%;--y:58%;--size:30%}
 .event-polaroid:nth-child(10){--x:20%;--y:85%;--size:34%}
 .event-polaroid:nth-child(11){--x:52%;--y:84%;--size:32%}
 .event-polaroid:nth-child(12){--x:83%;--y:82%;--size:30%}
 .event-polaroid.is-front{transform:translate(-50%,calc(-50% - 4px)) rotate(0deg) scale(1.28)}
}
@media(prefers-reduced-motion:reduce){.event-polaroid{transition:none}}

/* Mobile: fourteen loosely scattered photos use the full screen width. */
@media(max-width:760px){
 .home-page .event-memories{overflow:hidden;overflow:clip}
 .home-page .event-memories .polaroid-table{width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px;aspect-ratio:.4}
 .home-page .event-memories .event-polaroid.is-front{left:clamp(24%,var(--x),76%)}
}

.collage-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:48px}
.collage-controls button{min-height:44px;border:0;background:none;color:#526247;font-size:14px;padding:8px 0;text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.event-polaroid img{transition:none}}
.collage-controls .collage-next{padding:8px 24px;border:1px solid #738561;text-decoration:none}
.collage-controls .collage-next:disabled{opacity:.5;cursor:wait}
.collage-status{font-size:14px;text-align:center;margin:16px auto 0;max-width:45ch}
.collage-status:empty{display:none}

/* Desktop collage uses the available width; Polaroids keep their original scale. */
@media(min-width:761px){
 .event-memories>.container{width:calc(100% - 64px);max-width:none}
 .event-memories .polaroid-table{width:100%;max-width:none;aspect-ratio:auto;height:850px}
}