/* Template "polaroid": a framed instant photo next to a handwritten letter.
   Built on the slideshow kit in site.css (.show, .slide, .letter …); colours only from themes.css. */

body[data-layout="polaroid"] .show {
  display: grid; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px;
  padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50% 45% at 90% 85%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%),
    var(--bg);
}
body[data-layout="polaroid"] .viewer { display: grid; place-items: center; min-height: 0; }
body[data-layout="polaroid"] .frame {
  position: relative; inset: auto; height: 100%; max-height: 100%; aspect-ratio: 4 / 4.6; max-width: 100%;
  background: #fff; padding: 12px 12px 54px; border-radius: 4px; overflow: visible;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 26px 60px rgba(0, 0, 0, .35);
  transform: rotate(-2.2deg);
}
body[data-layout="polaroid"] .stage { inset: 12px 12px 54px; overflow: hidden; background: #ece7e2; }
body[data-layout="polaroid"] .slide .fg { object-fit: cover; }
body[data-layout="polaroid"] .vignette, body[data-layout="polaroid"] .glow { display: none; }
body[data-layout="polaroid"] .nav { top: 12px; bottom: 54px; }
body[data-layout="polaroid"] .hud { left: 18px; right: 18px; bottom: 16px; }
body[data-layout="polaroid"] .count { color: #6b5a60; text-shadow: none; font-family: 'Caveat', cursive; font-size: 1.15rem; letter-spacing: .06em; }
body[data-layout="polaroid"] .bar { background: rgba(0, 0, 0, .1); }
body[data-layout="polaroid"] .letter {
  flex: none; min-height: 0; border: 0; border-radius: 6px; color: var(--ink); padding: 1rem 1.2rem .2rem;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(80, 120, 180, .16) 31px, rgba(80, 120, 180, .16) 32px),
    var(--paper);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 20px 50px rgba(0, 0, 0, .28);
  transform: rotate(1.2deg) translate3d(0, 28px, 0);
}
body[data-layout="polaroid"] .show.reading .letter { transform: rotate(1.2deg); }
body[data-layout="polaroid"] .letter .eyebrow { color: color-mix(in srgb, var(--ink) 60%, transparent); }
body[data-layout="polaroid"] .letter-head h2 { font-family: 'Caveat', cursive; font-style: normal; font-weight: 600; font-size: 2.1rem; color: var(--ink); }
body[data-layout="polaroid"] .letter-text { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.5rem; line-height: 32px; color: var(--ink); opacity: 1; text-align: left; padding-left: .4rem; }
body[data-layout="polaroid"] .letter-text p { margin: 0 0 32px; }
body[data-layout="polaroid"] .nowplaying, body[data-layout="polaroid"] .mute { position: fixed; }
@media (min-width: 860px) {
  body[data-layout="polaroid"] .show { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4vw; padding: 76px 6vw 56px; align-items: center; }
  body[data-layout="polaroid"] .viewer { height: 100%; }
  body[data-layout="polaroid"] .frame { height: min(100%, 78vh); }
  body[data-layout="polaroid"] .letter { height: min(100%, 74vh); padding: 1.6rem 1.8rem .4rem; }
  body[data-layout="polaroid"] .letter-text { font-size: 1.7rem; }
}