/* Keep each photo slot in the same 500×600 proportion as the supplied frame. */
.photo-frame{justify-self:center;align-self:center;width:auto;height:100%;aspect-ratio:5/6}
.photo-frame.landscape{height:auto;width:100%;aspect-ratio:6/5}.photo-frame.landscape .photo{left:6.35%;top:12.12%;width:87.48%;height:67.48%}.visitor-gallery-grid .photo-frame.landscape{aspect-ratio:6/5}
.photo-frame.css-polaroid{box-sizing:border-box;width:100%;height:auto;aspect-ratio:4/3;background:#f2e7d2;border:1px solid #c7ae87;box-shadow:4px 7px 13px #0009}.photo-frame.css-polaroid .photo{left:5%;top:5%;width:90%;height:73%;display:grid;place-items:center;background:#17130f}.photo-frame.css-polaroid .photo:after{display:none}.photo-frame.css-polaroid .captured-photo{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#17130f}.photo-frame.css-polaroid figcaption{left:6%;right:6%;bottom:3%;color:#4b3421;font-size:clamp(9px,.78vw,16px)}.visitor-gallery-grid .photo-frame.css-polaroid{aspect-ratio:4/3}
.photo-frame.css-polaroid::before{content:"";position:absolute;z-index:5;left:44%;top:-5%;width:13%;height:18%;background:linear-gradient(100deg,#fff9,#ffffffbd 42%,#e9e9e9bb);box-shadow:0 1px 3px #46341d55;opacity:.84;transform:rotate(-2deg);clip-path:polygon(0 5%,12% 0,25% 5%,38% 0,50% 5%,63% 0,75% 5%,88% 0,100% 5%,100% 95%,88% 100%,75% 95%,63% 100%,50% 95%,38% 100%,25% 95%,12% 100%,0 95%);pointer-events:none;transition:opacity .2s}.photo-frame.css-polaroid:nth-child(5n + 1)::before{background:linear-gradient(100deg,#ffd7dfc7,#ffb7c7b0)}.photo-frame.css-polaroid:nth-child(5n + 2)::before{background:linear-gradient(100deg,#b9dcffc9,#83b9f2ad)}.photo-frame.css-polaroid:nth-child(5n + 3)::before{background:linear-gradient(100deg,#fff2a9ce,#f0d66cb0)}.photo-frame.css-polaroid:nth-child(5n + 4)::before{background:linear-gradient(100deg,#c5f0dcc9,#91d4b3af)}.photo-frame.css-polaroid:nth-child(5n)::before{background:linear-gradient(100deg,#dfccf6cf,#b99ce5ae)}.photo-frame.css-polaroid.flipped::before{opacity:0}

/* The camera wall is intentionally a nine-photo contact sheet, not the
   freeform archive: fixed 3×3 slots make each memory large and breathable. */
.camera-stage .photo-wall{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:4.5% 4%;
  padding:2.25%;
  box-sizing:border-box;
  align-content:stretch;
  justify-content:stretch
}
.camera-stage .photo-wall .photo-frame.css-polaroid{
  width:100%;
  height:100%;
  min-width:0;
  flex:none;
  aspect-ratio:auto!important
}
.camera-stage .photo-wall .photo-frame.css-polaroid .photo{
  left:5%;
  top:5%;
  width:90%;
  height:72%;
  aspect-ratio:auto
}
.photo-wall{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:3.5% 4%;padding:3.5%;box-sizing:border-box}.photo-wall .photo-frame.css-polaroid{flex:0 0 var(--polaroid-width,22%);width:var(--polaroid-width,22%);height:auto;aspect-ratio:var(--frame-ratio,1);transform:rotate(var(--tilt,0deg));transition:transform .22s,filter .22s}.photo-frame.css-polaroid:nth-child(2n){transform:rotate(var(--tilt,0deg))}.photo-frame.css-polaroid:hover,.photo-frame.css-polaroid:nth-child(2n):hover{transform:translateY(-5px) rotate(var(--tilt,0deg)) scale(1.035)}.photo-frame.css-polaroid .photo{height:auto;aspect-ratio:var(--image-ratio,4 / 3)}.photo-frame.css-polaroid .captured-photo{object-fit:cover}.visitor-gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:58px 48px}.visitor-gallery-grid .photo-frame.css-polaroid{flex:0 0 clamp(165px,16vw,250px);width:clamp(165px,16vw,250px);aspect-ratio:var(--frame-ratio,1)}.visitor-gallery-grid .photo-frame.css-polaroid.wide{flex-basis:clamp(250px,22vw,340px);width:clamp(250px,22vw,340px)}

/* Keep this last: it intentionally supersedes the freeform archive rules above. */
.camera-stage .photo-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4.5% 4%;padding:2.25%;box-sizing:border-box;align-content:stretch;justify-content:stretch}
.camera-stage .photo-wall .photo-frame.css-polaroid{width:100%;height:100%;min-width:0;flex:none;aspect-ratio:auto!important}
.camera-stage .photo-wall .photo-frame.css-polaroid .photo{left:5%;top:5%;width:90%;height:72%;aspect-ratio:auto}