/* Base */
:root{
  --pink-100: #ffe6f0;
  --pink-200: #ffc2dd;
  --pink-300: #ff99c7;
  --accent: #ff6fa8;
  --frame: #fff7f9;
  --shadow: rgba(0,0,0,0.12);
  --muted: #7a586a;
  --max-width: 720px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  background: linear-gradient(180deg,var(--pink-100),var(--pink-200));
  color:#3a2030;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  place-items:center;
  padding:32px 20px;
}
.header{ text-align:center; margin-bottom:12px }
.title{ margin:0; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:0.6px; font-family: 'Great Vibes', cursive; color:var(--accent) }
.subtitle{ margin:6px 0 0; color:var(--muted); font-size:1rem; font-weight:300 }

.frame-area{ width:100%; max-width:var(--max-width); display:flex; justify-content:center; align-items:center }
.photo-frame{
  width: min(92vw, 420px);
  background: linear-gradient(180deg,var(--frame), #fff);
  padding: clamp(12px,2.6vw,20px);
  border-radius:20px;
  box-shadow: 0 10px 30px var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.photo{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  object-fit:cover;
  border: 8px solid #fff6f8;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) inset;
}
.caption{
  margin:12px 0 0;
  color:var(--muted);
  font-size:0.98rem;
  font-style:italic;
}

.footer{ margin-top:18px; color:var(--muted); font-size:0.85rem }

/* Decorative corner hearts */
.photo-frame::before,
.photo-frame::after{
  content:"";
  position:absolute;
}

/* Ensure mobile-friendly touch target spacing */
@media (max-width:420px){
  .page{ padding:20px 16px }
  .photo-frame{ padding:14px }
  .title{ font-size:1.6rem }
}