/* ═══════════════════════════════════════════
   I. POLAROIDS & PICTURES
═══════════════════════════════════════════ */
.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 36px; align-items: start;
}
.polaroid-wrap {
  position: relative; cursor: pointer;
  transition: transform 0.4s cubic-bezier(.175,.885,.32,1.275);
}
.polaroid-wrap:nth-child(6n+1) { transform: rotate(-2.2deg); }
.polaroid-wrap:nth-child(6n+2) { transform: rotate(1.5deg); margin-top: 20px; }
.polaroid-wrap:nth-child(6n+3) { transform: rotate(-0.8deg); }
.polaroid-wrap:nth-child(6n+4) { transform: rotate(2.5deg); margin-top: 12px; }
.polaroid-wrap:nth-child(6n+5) { transform: rotate(-1.8deg); }
.polaroid-wrap:nth-child(6n+6) { transform: rotate(1.1deg); margin-top: 16px; }
.polaroid-wrap:hover { transform: rotate(0deg) scale(1.04) translateY(-6px) !important; z-index: 5; }

.polaroid {
  background: #fffef8; padding: 12px 12px 0;
  box-shadow: 3px 4px 20px rgba(44,36,22,0.14), 0 1px 4px rgba(44,36,22,0.06);
  border: 0.5px solid rgba(44,36,22,0.08); position: relative; transition: all 0.4s ease;
}
.polaroid-front { backface-visibility: hidden; }
.polaroid-img {
  width: 100%; aspect-ratio: 1;
  background: var(--paper-warm); display: flex; align-items: center;
  justify-content: center; overflow: hidden; position: relative;
}
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-placeholder { font-size: 44px; opacity: 0.2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.polaroid-placeholder span { font-family: 'Special Elite', monospace; font-size: 10px; letter-spacing: 1px; opacity: 0.6; text-align: center; padding: 0 8px; }
.polaroid-caption { position: static; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 14px 10px 18px; }
.polaroid-caption p { font-family: 'Caveat', cursive; font-size: 14px; color: var(--ink-mid); text-align: center; line-height: 1.35; }

.washi { position: absolute; height: 20px; border-radius: 1px; pointer-events: none; opacity: 0.65; }
.washi-h { left: 50%; transform: translateX(-50%); width: 60px; }
.washi-1 { background: repeating-linear-gradient(45deg, rgba(200,180,130,0.45), rgba(200,180,130,0.45) 4px, rgba(220,200,150,0.25) 4px, rgba(220,200,150,0.25) 8px); }
.washi-2 { background: repeating-linear-gradient(45deg, rgba(180,160,200,0.35), rgba(180,160,200,0.35) 4px, rgba(200,180,220,0.2) 4px, rgba(200,180,220,0.2) 8px); }
.washi-3 { background: repeating-linear-gradient(45deg, rgba(160,200,170,0.35), rgba(160,200,170,0.35) 4px, rgba(180,220,190,0.2) 4px, rgba(180,220,190,0.2) 8px); }

.pressed-flower { position: absolute; font-size: 22px; opacity: 0.4; filter: sepia(50%); pointer-events: none; transform: rotate(var(--rot, 15deg)); }

.film-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 16px 4px; margin-top: 40px;
  scrollbar-width: thin; scrollbar-color: var(--paper-aged) transparent;
}
.film-frame { flex-shrink: 0; width: 120px; background: #111; border: 3px solid #111; position: relative; border-radius: 2px; }
.film-frame::before, .film-frame::after { content: ''; display: block; height: 12px; background: repeating-linear-gradient(90deg, #111 0px, #111 6px, #333 6px, #333 16px, #111 16px, #111 22px); }
.film-inner { aspect-ratio: 1; background: var(--paper-dark); display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: 0.3; }
.film-inner img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }

@media(max-width:640px) { .polaroid-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media(max-width:380px) { .polaroid-grid { grid-template-columns: 1fr; } }

/* ---- reels: several short film-strip sections instead of one long strip ---- */
.film-strip-section { margin-top: 44px; }
.film-strip-label {
  font-family: 'Special Elite', monospace; font-size: 9px; letter-spacing: 2px;
  color: var(--ink-muted); text-transform: uppercase; margin-bottom: 4px;
}
.film-strip { margin-top: 10px; }