/* ---------- Hero: 2-column with polaroid stack on right ---------- */
.page-hero .hero-grid{
  display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;
}
@media(max-width:980px){
  .page-hero .hero-grid{grid-template-columns:1fr;gap:60px;justify-items:start}
}
.page-hero .hero-grid > div:first-child h1{max-width:none}

/* Breadcrumbs in hero (dark bg variant) */
.page-hero .crumbs{
  font-size:12px;color:rgba(255,255,255,.55);margin-bottom:24px;
}
.page-hero .crumbs a{
  color:rgba(255,255,255,.55);
  transition:color .2s var(--ease);
}
.page-hero .crumbs a:hover{color:var(--gold-2)}
.page-hero .crumbs .sep{opacity:.35;margin:0 8px}
.page-hero .crumbs span:not(.sep){color:#fff}

/* === Polaroid stack scene === */
.polaroid-scene{
  position:relative;
  width:340px;height:340px;
  pointer-events:none;
  user-select:none;
}
@media(max-width:980px){
  .polaroid-scene{width:300px;height:300px}
}
@media(max-width:520px){
  .polaroid-scene{width:260px;height:260px}
}

/* Stat above the stack */
.polaroid-scene .stack-stat{
  position:absolute;top:-8px;left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:8px 16px;border-radius:99px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;font-weight:600;
  white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.polaroid-scene .stack-stat .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 var(--gold);
  animation:statDot 2s ease-out infinite;
}
@keyframes statDot{
  0%{box-shadow:0 0 0 0 rgba(184,140,84,.6)}
  100%{box-shadow:0 0 0 8px rgba(184,140,84,0)}
}
.polaroid-scene .stack-stat strong{
  color:var(--gold-2);font-weight:700;
  font-feature-settings:'tnum' 1;
}

/* Polaroids — absolutely positioned, layered */
.polaroid-scene .polaroid{
  position:absolute;
  top:50%;left:50%;
  width:200px;height:240px;
  background:#fff;
  border-radius:3px;
  padding:12px 12px 36px;
  box-shadow:
    0 18px 40px -10px rgba(0,0,0,.55),
    0 4px 10px -2px rgba(0,0,0,.3),
    0 0 0 1px rgba(0,0,0,.05);
  transform-origin:center center;
  transition:none; /* animation handles motion */
}
.polaroid-scene .polaroid img{
  width:100%;height:178px;
  object-fit:cover;
  display:block;
  border-radius:1px;
  background:#1a1d24;
  filter:saturate(.95) contrast(1.02);
}
.polaroid-scene .polaroid .meta{
  position:absolute;bottom:8px;left:14px;right:14px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--serif);font-size:13px;
  color:#1a1a1a;line-height:1;
  font-style:italic;font-weight:400;
}
.polaroid-scene .polaroid .meta .door-tag{
  font-family:var(--sans);font-style:normal;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:#888;font-weight:700;
}

/* Each polaroid — stacked rotation + cycling z-index/opacity */
.polaroid-scene .polaroid.p1{
  margin:-120px 0 0 -100px;
  animation:cycle1 12s ease-in-out infinite;
}
.polaroid-scene .polaroid.p2{
  margin:-120px 0 0 -100px;
  animation:cycle2 12s ease-in-out infinite;
}
.polaroid-scene .polaroid.p3{
  margin:-120px 0 0 -100px;
  animation:cycle3 12s ease-in-out infinite;
}
.polaroid-scene .polaroid.p4{
  margin:-120px 0 0 -100px;
  animation:cycle4 12s ease-in-out infinite;
}

/* Cycling animation — each card takes a turn at the front */
@keyframes cycle1{
  0%,100%   { transform:translate(-8px,-12px) rotate(-7deg) scale(.94); z-index:1; opacity:.85 }
  25%       { transform:translate(0,4px)      rotate(2deg)  scale(1.02);z-index:4; opacity:1   }
  50%       { transform:translate(8px,8px)    rotate(5deg)  scale(.96); z-index:3; opacity:.9  }
  75%       { transform:translate(4px,12px)   rotate(8deg)  scale(.92); z-index:2; opacity:.85 }
}
@keyframes cycle2{
  0%,100%   { transform:translate(0,4px)      rotate(2deg)  scale(1.02);z-index:4; opacity:1   }
  25%       { transform:translate(8px,8px)    rotate(5deg)  scale(.96); z-index:3; opacity:.9  }
  50%       { transform:translate(4px,12px)   rotate(8deg)  scale(.92); z-index:2; opacity:.85 }
  75%       { transform:translate(-8px,-12px) rotate(-7deg) scale(.94); z-index:1; opacity:.85 }
}
@keyframes cycle3{
  0%,100%   { transform:translate(8px,8px)    rotate(5deg)  scale(.96); z-index:3; opacity:.9  }
  25%       { transform:translate(4px,12px)   rotate(8deg)  scale(.92); z-index:2; opacity:.85 }
  50%       { transform:translate(-8px,-12px) rotate(-7deg) scale(.94); z-index:1; opacity:.85 }
  75%       { transform:translate(0,4px)      rotate(2deg)  scale(1.02);z-index:4; opacity:1   }
}
@keyframes cycle4{
  0%,100%   { transform:translate(4px,12px)   rotate(8deg)  scale(.92); z-index:2; opacity:.85 }
  25%       { transform:translate(-8px,-12px) rotate(-7deg) scale(.94); z-index:1; opacity:.85 }
  50%       { transform:translate(0,4px)      rotate(2deg)  scale(1.02);z-index:4; opacity:1   }
  75%       { transform:translate(8px,8px)    rotate(5deg)  scale(.96); z-index:3; opacity:.9  }
}

/* Floating decorative dots */
.polaroid-scene .deco{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold-2);
  opacity:.4;
}
.polaroid-scene .deco.d1{top:20%;left:8%;animation:decoDrift 7s ease-in-out infinite}
.polaroid-scene .deco.d2{bottom:15%;right:10%;animation:decoDrift 8s ease-in-out infinite -3s;width:3px;height:3px}
.polaroid-scene .deco.d3{top:75%;left:15%;animation:decoDrift 9s ease-in-out infinite -1.5s;width:3px;height:3px}
.polaroid-scene .deco.d4{top:30%;right:8%;animation:decoDrift 7.5s ease-in-out infinite -4s}
@keyframes decoDrift{
  0%,100%{transform:translate(0,0);opacity:.3}
  50%{transform:translate(6px,-10px);opacity:.8}
}

/* Soft glow behind stack */
.polaroid-scene::before{
  content:"";position:absolute;
  top:50%;left:50%;
  width:280px;height:280px;
  margin:-140px 0 0 -140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(184,140,84,.18) 0%,transparent 65%);
  filter:blur(20px);
  animation:stackGlow 6s ease-in-out infinite;
}
@keyframes stackGlow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.08)}
}

@media(prefers-reduced-motion:reduce){
  .polaroid-scene *,
  .polaroid-scene::before{animation:none !important}
}

.masonry{
  column-count:3;column-gap:18px;
}
@media (max-width:980px){.masonry{column-count:2}}
@media (max-width:560px){.masonry{column-count:1}}
.masonry .tile{
  break-inside:avoid;margin-bottom:18px;border-radius:6px;overflow:hidden;
  position:relative;cursor:pointer;display:block;
  background:var(--bg-2);
}
.masonry .tile img{width:100%;display:block;transition:transform .8s var(--ease)}
.masonry .tile:hover img{transform:scale(1.04)}
.masonry .tile .caption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
  color:#fff;opacity:0;transition:opacity .3s var(--ease);
  font-family:var(--serif);font-size:20px;
}
.masonry .tile:hover .caption{opacity:1}
.masonry .tile .door{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.92);color:var(--ink);
  padding:5px 12px;border-radius:999px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}