:root {
  --pink: #ff43a4;
  --paper: #ffffff;
  --shadow: 0 12px 28px rgba(33, 19, 26, .13), 0 2px 7px rgba(33, 19, 26, .08);
  --font: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", cursive;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--pink);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.intro {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  background: #fff;
  position: relative;
  z-index: 10;
}
.intro p {
  margin: 0;
  max-width: 880px;
  text-align: center;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.035em;
}
.scrapbook {
  position: relative;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 67, 164, .038), transparent 16%),
    radial-gradient(circle at 84% 22%, rgba(255, 67, 164, .026), transparent 18%),
    radial-gradient(circle at 30% 72%, rgba(255, 211, 102, .10), transparent 16%),
    #fff;
  padding: clamp(95px, 12vw, 170px) 0 clamp(130px, 16vw, 220px);
}
.gallery {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: clamp(6px, 1.4vw, 16px);
  row-gap: clamp(40px, 8vw, 86px);
  align-items: start;
  overflow: visible;
}
.scrap-item {
  position: relative;
  opacity: 0;
  transition: opacity .65s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.media-card {
  --rot: 0deg;
  --lift: 0px;
  --mstart: 1;
  --mspan: 10;
  --dstart: 1;
  --dspan: 4;
  grid-column: var(--mstart) / span var(--mspan);
  z-index: var(--z, 1);
}
.scrap-item.reveal {
  opacity: 1;
  transform: translateY(var(--lift)) rotate(var(--rot));
}
.scrap-item:not(.reveal) {
  transform: translateY(calc(var(--lift) + 34px)) rotate(calc(var(--rot) * .65));
}
.media-frame {
  position: relative;
  background: #fff;
  padding: var(--frame-pad, 8px);
  box-shadow: var(--shadow);
}
.media-card.polaroid .media-frame { padding: 9px 9px 34px; }
.media-frame img, .media-frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  background: #f4f4f4;
}
.video-badge {
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 5;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--pink);
  border: 2px solid rgba(255,67,164,.55);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.tape {
  position: absolute;
  display: block;
  width: clamp(48px, 14vw, 92px);
  height: clamp(16px, 4vw, 27px);
  z-index: 4;
  pointer-events: none;
  opacity: .76;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  background: rgba(255, 182, 221, .82);
  border-left: 2px dashed rgba(255,255,255,.38);
  border-right: 2px dashed rgba(255,255,255,.38);
}
.tape.cream { background: rgba(249, 233, 191, .82); }
.tape.clear { background: rgba(225, 229, 223, .65); }
.tape.pink { background: rgba(255, 164, 214, .78); }
.tape.top { top: -10px; left: 50%; transform: translateX(-50%) rotate(var(--trot, -2deg)); }
.tape.tl { top: -8px; left: -16px; transform: rotate(var(--trot, -39deg)); }
.tape.tr { top: -8px; right: -16px; transform: rotate(var(--trot, 39deg)); }
.tape.side { top: 24%; right: -32px; transform: rotate(87deg); }
.tape.bottom { bottom: -9px; left: 48%; transform: translateX(-50%) rotate(var(--trot, 3deg)); }
.tape.bold {
  width: clamp(70px, 18vw, 128px);
  height: clamp(20px, 5vw, 34px);
  opacity: .95;
  box-shadow: 0 7px 18px rgba(255, 67, 164, .12);
  background: repeating-linear-gradient(135deg, rgba(255, 164, 214, .96) 0 13px, rgba(255, 186, 224, .96) 13px 24px);
}
.tape.extra-bold { width: clamp(78px, 19vw, 140px); height: clamp(22px, 5.5vw, 36px); opacity: .97; }
.tape.decor-stars,.tape.decor-sun,.tape.decor-dog,.tape.decor-cat,.tape.decor-bunny,.tape.decor-stripes,.tape.decor-dots { overflow: visible; display: flex; align-items: center; justify-content: center; }
.tape.decor-stripes { background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 9px, rgba(255,67,164,.18) 9px 16px), rgba(255,164,214,.94); }
.tape.decor-dots { background: radial-gradient(circle, rgba(255,255,255,.76) 0 2px, transparent 2.5px) 0 0 / 13px 13px, rgba(255,182,221,.94); }
.tape.decor-stars::after,.tape.decor-sun::after,.tape.decor-dog::after,.tape.decor-cat::after,.tape.decor-bunny::after {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-54%); font-family: var(--font); line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.75); pointer-events: none;
}
.tape.decor-stars::after { content: "★  ☆  ★"; font-size: clamp(11px,2.6vw,18px); color: #ff43a4; letter-spacing: 2px; }
.tape.decor-sun::after { content: "☀"; font-size: clamp(17px,4vw,25px); color: #ff9f1c; }
.tape.decor-dog::after { content: "🐶"; font-size: clamp(16px,3.6vw,23px); }
.tape.decor-cat::after { content: "🐱"; font-size: clamp(16px,3.6vw,23px); }
.tape.decor-bunny::after { content: "🐰"; font-size: clamp(16px,3.6vw,23px); }
.media-card::after { content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid rgba(255, 67, 164, .25); border-radius: 50%; right: -7px; bottom: -7px; opacity: var(--scribble, 0); }
.wish {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: #fff; padding: clamp(64px, 10vw, 130px) max(22px, env(safe-area-inset-left)) max(80px, env(safe-area-inset-bottom));
}
.wish-inner { width: min(900px, 100%); font-size: clamp(18px, 2.1vw, 29px); line-height: 1.56; font-weight: 700; letter-spacing: -.015em; }
.wish-inner p { margin: 0; }
.signoff { margin-top: 2.3em !important; }
.music-toggle, .music-prompt {
  position: fixed; z-index: 100; font-family: var(--font); color: var(--pink); background: rgba(255,255,255,.9); border: 2px solid var(--pink); box-shadow: 0 5px 18px rgba(255,67,164,.15); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.music-toggle { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 999px; font-size: 23px; line-height: 1; }
.music-toggle.paused { opacity: .55; }
.music-prompt { left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; }
@media (min-width: 760px) {
  .media-card { grid-column: var(--dstart) / span var(--dspan); }
  .media-frame { padding: var(--frame-pad, 10px); }
}
@media (min-width: 1024px) {
  .gallery { width: min(1760px, 100%); padding: 0 clamp(18px, 2vw, 30px); grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: clamp(5px, .85vw, 13px); row-gap: clamp(24px, 3.4vw, 52px); }
  .scrapbook { padding-top: clamp(80px, 8vw, 110px); padding-bottom: clamp(110px, 10vw, 160px); }
}
@media (max-width: 759px) {
  .intro p { max-width: 330px; }
  .media-card.polaroid .media-frame { padding: 6px 6px 25px; }
  .media-frame { padding: 6px; }
  .tape { opacity: .72; }
  .wish { place-items: start center; }
  .wish-inner { padding-top: 4vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scrap-item, .scrap-item:not(.reveal), .scrap-item.reveal { transition: none; transform: rotate(var(--rot)); }
}