:root {
  --bg-a: #ff9a9e;
  --bg-b: #fad0c4;
  --accent: #e91e63;
  --muted: #6b4a57;
  --paper: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'DM Sans', sans-serif;
  background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
  display: flex;
  justify-content: center;
  color: #2b2730;
}

.stars,
.stars::before,
.stars::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,196,215,.45) 1px, transparent 1.5px);
  background-position: 0 0, 42px 58px;
  background-size: 92px 92px, 137px 137px;
  opacity: .12;
}

.stars::before { transform: rotate(17deg) scale(1.1); }
.stars::after { transform: rotate(-12deg) scale(1.2); }

main {
  width: min(1100px, calc(100% - 32px));
  margin: 48px auto;
  padding: 36px;
}

.hero {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

.dedication {
  margin: 0;
  color: rgba(0,0,0,0.45);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.main-title {
  margin: 6px 0 8px;
  font-family: 'Sacramento', cursive;
  color: #fff;
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  text-shadow: 0 6px 20px rgba(233,30,99,0.28);
}

.note {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
}

.scroll-cue { margin-top: 18px; color: rgba(255,255,255,0.85); }

.memories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }

.memory {
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 22px;
  min-height: 160px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  color: var(--muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .28s ease, box-shadow .28s ease;
}

.memory:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(0,0,0,0.18); }

.number { font-family: 'Caveat', cursive; color: rgba(0,0,0,0.12); font-size: 1rem; }
.emoji { font-size: 2.6rem; position: absolute; right: 18px; top: 14px; }

.copy small { display:block; font-weight:700; color: rgba(0,0,0,0.45); font-size: .72rem; }
.copy strong { font-family: 'Caveat', cursive; font-size: 2rem; margin-top: 6px; display:block; }
.copy em { color: var(--accent); font-size: .96rem; margin-top: 6px; display:block; }

footer { margin-top: 48px; text-align: center; color: rgba(255,255,255,0.95); }

.floating-hearts span { position: fixed; bottom: -40px; z-index: -1; color: rgba(255,255,255,0.14); font-size: 2rem; animation: float 13s linear infinite; }
.floating-hearts span:nth-child(1) { left: 8%; animation-delay: -2s; }
.floating-hearts span:nth-child(2) { left: 28%; animation-delay: -8s; font-size: 1.2rem; }
.floating-hearts span:nth-child(3) { left: 52%; animation-delay: -5s; }
.floating-hearts span:nth-child(4) { left: 76%; animation-delay: -11s; font-size: 1rem; }
.floating-hearts span:nth-child(5) { left: 92%; animation-delay: -4s; font-size: 1.5rem; }

#intro-sequence { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(255,154,158,0.88), rgba(250,208,196,0.95)); z-index: 50; }
#intro-text { font-family: 'Poppins', sans-serif; font-size: 2rem; color: white; opacity:0; transition: opacity .6s ease; }

@keyframes float { to { transform: translateY(-115vh) rotate(50deg); } }

@media (max-width: 820px) { .memories { grid-template-columns: 1fr; } .main-title { font-size: clamp(2.2rem, 12vw, 4rem); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }