/* ==========================================================
   STYLE.CSS — Scrapbook Birthday Gift Template (versi pacar)
   Organized: Tokens > Reset > Ornaments > Layout > Pages > Responsive
   ========================================================== */

/* ---------- 1. DESIGN TOKENS (default = palet referensi) ---------- */
:root{
  --paper:    #FAFAFA;
  --paper-2:  #F0F5F3;
  --red:      #FF6B35;  /* coral */
  --mustard:  #F59E0B;  /* amber */
  --teal:     #0A7C6E;  /* teal */
  --navy:     #064C43;  /* teal gelap */
  --pink:     #FFAB84;  /* coral muda */
  --ink:      #1C2B27;
  --ink-soft: #4F6A64;

  --font-display: "Anton", sans-serif;
  --font-script:  "Caveat", cursive;
  --font-body:    "Poppins", sans-serif;

  --page-pad: clamp(1.25rem, 6vw, 3rem);
  --ease-soft: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }

.grain-overlay{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image: radial-gradient(rgba(28,43,39,.06) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity:.5;
}

/* ---------- 3. AMBIENT FLOATING HEARTS ---------- */
.floating-hearts{ position:fixed; inset:0; z-index: 3; pointer-events:none; overflow:hidden; }
.floating-heart{
  position:absolute; bottom:-10%; font-size: 1.1rem; opacity:0;
  color: var(--red);
  animation: floatUp linear forwards;
}
@keyframes floatUp{
  0%{ opacity:0; transform: translateY(0) translateX(0) rotate(0deg); }
  10%{ opacity:.55; }
  90%{ opacity:.4; }
  100%{ opacity:0; transform: translateY(-115vh) translateX(var(--drift, 20px)) rotate(25deg); }
}

/* ---------- 4. AMBIENT SCATTER TEXTURE (bikin tiap halaman terasa "penuh") ---------- */
.page::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, var(--red) 2.5px, transparent 3px),
    radial-gradient(circle, var(--teal) 2.5px, transparent 3px),
    radial-gradient(circle, var(--mustard) 2.5px, transparent 3px),
    radial-gradient(circle, var(--pink) 2.5px, transparent 3px);
  background-position: 6% 12%, 78% 28%, 32% 82%, 90% 68%;
  background-repeat: repeat;
  background-size: 260px 260px, 300px 300px, 240px 240px, 280px 280px;
  opacity:.16;
}
.closing-page::before{ opacity:.22; }

/* ---------- 5. SHARED SCRAPBOOK PIECES ---------- */
.halftone-patch{
  position:absolute; border-radius:50%;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 8px 8px;
  opacity:.35; pointer-events:none; z-index:1;
}
.patch-red{ color:var(--red); width:220px; height:220px; top:-40px; left:-60px; }
.patch-teal{ color:var(--teal); width:180px; height:180px; bottom:-30px; right:-50px; }
.patch-pink{ color:var(--pink); width:150px; height:150px; bottom:6%; left:-40px; }
.patch-mustard{ color:var(--mustard); width:170px; height:170px; }
.hp-tl{ top:-30px; left:-50px; }
.hp-tr{ top:-30px; right:-50px; }
.hp-bl{ bottom:-30px; left:-50px; }
.hp-br{ bottom:-30px; right:-50px; }

.paper-scrap{
  position:absolute; top:0; left:0; width:100%; height:26px;
  background:var(--paper);
  clip-path: polygon(
    0% 100%, 3% 40%, 7% 90%, 12% 30%, 17% 80%, 22% 20%, 28% 70%,
    33% 15%, 39% 85%, 44% 25%, 50% 75%, 55% 10%, 61% 80%, 66% 30%,
    72% 90%, 77% 20%, 83% 70%, 88% 15%, 94% 85%, 100% 40%, 100% 0%, 0% 0%
  );
  z-index:2;
}
.paper-scrap.alt{ transform: scaleX(-1); }
.paper-scrap.torn-bottom{
  top:auto; bottom:0; transform: scaleY(-1);
  background: var(--paper);
}
.memories-page .paper-scrap.torn-bottom{ background: var(--paper-2); }
.wishes-page .paper-scrap.torn-bottom{ background: var(--paper-2); }
.paper-scrap.torn-bottom.alt{ transform: scaleY(-1) scaleX(-1); }

.cutout{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:400;
  color: var(--paper);
  padding: 0 .18em;
  line-height:1;
  border-radius: 10% 12% 8% 14% / 40% 35% 45% 38%;
  box-shadow: 0 3px 0 rgba(28,43,39,.25);
  transform: rotate(var(--r, -3deg));
}
.cutout:nth-child(odd){ --r: -4deg; }
.cutout:nth-child(even){ --r: 3deg; }
.cutout-space{ display:inline-block; width:.4em; }
.letter-red{ background:var(--red); }
.letter-teal{ background:var(--teal); }
.letter-mustard{ background:var(--mustard); color:var(--ink); }
.letter-pink{ background:var(--pink); color:var(--ink); }
.letter-navy{ background:var(--navy); }

.script-word{
  display:inline-block;
  font-family: var(--font-script);
  font-weight:700;
  color: var(--navy);
  font-size: 1.15em;
  transform: rotate(-2deg);
  padding: 0 .1em;
}
.script-word.small{ font-size:.9em; margin-inline-start:.25em; }
.hero-line{ margin-top:.1em; }
.hero-name{ color: var(--red); font-size: 1.35em; }

.doodle-underline{ width: min(70%, 220px); height:16px; margin: -.4rem 0 .2rem; }

.eyebrow{
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: var(--ink-soft);
  text-align:center;
  white-space: pre-line;
}

.section-heading{
  text-align:center;
  font-size: clamp(2rem, 9vw, 3.4rem);
  letter-spacing: .02em;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: .12em .05em;
  row-gap:.3em;
}

.section-caption{
  text-align:center;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: var(--ink-soft);
  margin-top:.4rem;
  white-space: pre-line;
}

/* washi tape */
.tape{
  position:absolute; width:90px; height:28px;
  background: repeating-linear-gradient(45deg, var(--mustard), var(--mustard) 6px, #f7cf6b 6px, #f7cf6b 12px);
  opacity:.85;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  z-index:2;
}
.tape-1{ top:10%; left:6%; transform:rotate(-18deg); }
.tape-2{ bottom:14%; right:8%; transform:rotate(12deg); background: repeating-linear-gradient(45deg, var(--pink), var(--pink) 6px, #ffcbae 6px, #ffcbae 12px); }
.corner-tape-1{ top:2%; right:14%; transform:rotate(8deg); }
.corner-tape-2{ bottom:4%; left:10%; transform:rotate(-10deg); background: repeating-linear-gradient(45deg, var(--teal), var(--teal) 6px, #4ea89b 6px, #4ea89b 12px); }

/* generic floating sticker */
.sticker{ position:absolute; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); z-index:2; }
.star-sticker{ font-size:2rem; color:var(--mustard); }
.top-left{ top:6%; left:5%; }
.top-right{ top:8%; right:6%; color:var(--pink); transform:rotate(15deg); }
.extra-star-1{ top:22%; left:14%; font-size:1.2rem; }
.mem-star{ top:14%; left:20%; font-size:1.3rem; }
.msg-star{ top:20%; left:10%; font-size:1.3rem; }
.wish-star{ top:26%; right:14%; font-size:1.3rem; }
.close-star-1{ top:6%; left:32%; font-size:1.2rem; }
.close-star-2{ bottom:30%; left:6%; font-size:1.1rem; color:var(--pink); }
.camera-sticker{ width:60px; top:8%; right:6%; transform:rotate(-8deg); }
.cassette-sticker{ width:64px; top:6%; left:5%; transform:rotate(10deg); }
.confetti-sticker{ width:100px; top:2%; right:0; }

.heart-sticker{
  font-size: 1.6rem; color: var(--red);
  animation: heartbeat 2.6s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{ transform: scale(1) rotate(var(--hr, 0deg)); }
  50%{ transform: scale(1.15) rotate(var(--hr, 0deg)); }
}
.c-heart-1{ top:16%; left:9%; --hr:-10deg; }
.c-heart-2{ bottom:22%; right:9%; color:var(--pink); --hr:8deg; }
.c-heart-3{ top:52%; left:6%; font-size:1.1rem; --hr:-6deg; }
.mid-left{ top:38%; left:4%; --hr:-8deg; }
.mid-right{ top:60%; right:5%; color:var(--pink); --hr:10deg; }
.extra-heart-1{ bottom:26%; left:12%; font-size:1.2rem; color:var(--pink); --hr:-14deg; }
.mem-heart{ bottom:6%; left:6%; --hr:-6deg; }
.mem-heart-2{ top:30%; right:8%; font-size:1.2rem; color:var(--pink); --hr:12deg; }
.msg-heart{ bottom:8%; right:5%; --hr:10deg; }
.msg-heart-2{ top:48%; left:5%; font-size:1.2rem; color:var(--pink); --hr:-9deg; }
.wish-heart-1{ top:5%; left:8%; --hr:-12deg; }
.wish-heart-2{ bottom:4%; right:7%; color:var(--pink); --hr:6deg; }
.close-heart-1{ top:14%; left:8%; color:var(--pink); --hr:-8deg; }
.close-heart-2{ bottom:10%; right:8%; color:var(--pink); --hr:12deg; }
.close-heart-3{ top:40%; right:12%; font-size:1.1rem; --hr:-4deg; }

.doodle-sticker{ width:56px; }
.c-doodle-1{ top:26%; right:8%; }
.mem-doodle{ bottom:16%; right:10%; width:40px; }

.flower-sticker{ width:44px; }
.c-flower-1{ bottom:32%; right:12%; }
.hero-flower{ bottom:14%; right:6%; }
.wish-flower{ top:8%; right:22%; width:36px; }

.ribbon-sticker{ width:54px; top:14%; right:20%; }
.msg-ribbon{ top:auto; right:auto; bottom:6%; left:8%; width:44px; }

.stamp-sticker{
  position:absolute; top:-14px; right:-10px; width:60px;
  transform: rotate(9deg);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.15));
}

.corner-scallop{
  position:absolute; width:26px; height:26px;
  border: 2px dashed var(--red); opacity:.5;
}
.corner-scallop.tl{ top:-8px; left:-8px; border-right:none; border-bottom:none; }
.corner-scallop.br{ bottom:-8px; right:-8px; border-left:none; border-top:none; }

.cover-kiss{
  position:absolute; font-size:1.6rem; bottom:10%; left:12%;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.closing-kiss{ top:16%; right:10%; bottom:auto; left:auto; transform:rotate(10deg); }

/* ---------- 6. COVER PAGE ---------- */
.cover-page{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: var(--navy);
  transition: opacity .9s var(--ease-soft), visibility .9s var(--ease-soft);
}
.cover-page.is-open{ opacity:0; visibility:hidden; pointer-events:none; }
.cover-paper{
  position:relative;
  width:min(92vw, 420px);
  padding: 3rem 1.75rem 2.5rem;
  background: var(--paper);
  border-radius: 6px;
  text-align:center;
  overflow:hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  animation: coverFloat 6s ease-in-out infinite;
}
@keyframes coverFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.cover-disco{ width: 110px; margin: 0 auto 1rem; display:block; position:relative; z-index:2; }
.cover-eyebrow{ font-family: var(--font-script); color: var(--ink-soft); font-size: 1.3rem; margin-bottom:.25rem; position:relative; z-index:2; white-space: pre-line; }
.cover-title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 10vw, 2.7rem);
  line-height:1.18;
  color: var(--navy);
  letter-spacing:.02em;
  text-shadow: 2px 2px 0 var(--mustard);
  position:relative; z-index:2;
}
.cover-name{ font-family: var(--font-script); font-size: clamp(1.8rem, 8vw, 2.4rem); color: var(--teal); margin-top:.1rem; margin-bottom:.6rem; position:relative; z-index:2; }
.open-gift-btn{
  position:relative; z-index:2;
  margin-top: 2rem;
  padding: .9rem 2.2rem;
  background: var(--red);
  color: var(--paper);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.03em;
  border-radius: 999px;
  box-shadow: 0 6px 0 #b8451d;
  transition: transform .15s ease, box-shadow .15s ease;
}
.open-gift-btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 #b8451d; }
.cover-star{ position:absolute; color:var(--mustard); font-size:1.4rem; z-index:1; }
.star-1{ top:12%; left:8%; }
.star-2{ bottom:18%; right:10%; color:var(--pink); }
.star-3{ top:45%; right:6%; font-size:1rem; }

/* ---------- 7. CONTENT / SCROLL FLOW ---------- */
.content{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.page{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  scroll-snap-align:start;
  padding: var(--page-pad);
  padding-top: calc(var(--page-pad) + 26px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1.1rem;
  overflow:hidden;
  transition: background-color .6s var(--ease-soft);
}
.hero-page{ background:var(--paper); }
.memories-page{ background: var(--paper-2); }
.message-page{ background:var(--paper); }
.wishes-page{ background: var(--paper-2); }
.closing-page{ background: var(--navy); color:var(--paper); }
.closing-page .section-caption{ color: #cfe6e0; }
.closing-page .heart-sticker{ color: var(--pink); }

.page-inner{
  display:flex; flex-direction:column; align-items:center; gap: 1.1rem;
  opacity:0; transform: translateY(30px) scale(.96);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
  position:relative; z-index:3;
}
.page-inner.active{ opacity:1; transform: translateY(0) scale(1); }

.reveal{
  opacity:0; transform: translateY(20px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--delay, 0s);
}
.page-inner.active .reveal{ opacity:1; transform: translateY(0); }

.cutout-heading{ text-align:center; }

.hero-photo{
  position:relative;
  width:min(58vw, 230px);
  margin: .3rem 0;
  background:#fffdf7;
  padding: 10px 10px 14px;
  border-radius: 3px;
  box-shadow: 0 12px 22px rgba(28,43,39,.22);
  transform: rotate(-4deg);
}
.hero-photo-img{
  width:100%; aspect-ratio: 1/1; object-fit:cover; display:block;
  background: linear-gradient(135deg,var(--teal),var(--navy));
  border-radius:1px;
}
.hero-photo-caption{
  font-family: var(--font-script); font-size:1.15rem; text-align:center;
  color: var(--ink); margin-top:.35rem;
}
.hero-photo .frame-tape{
  position:absolute; top:-12px; left:50%; transform: translateX(-50%) rotate(-3deg);
  width:58px; height:22px;
  background: repeating-linear-gradient(45deg, var(--mustard), var(--mustard) 5px, #f7cf6b 5px, #f7cf6b 10px);
  box-shadow: 0 2px 3px rgba(0,0,0,.2);
}

.hero-tagline{ text-align:center; max-width:32ch; font-size: clamp(1rem, 4vw, 1.15rem); color: var(--ink-soft); white-space: pre-line; }
.film-strip-deco{ width:min(90%, 320px); margin-top:.5rem; }

.scroll-cue{
  position:absolute; bottom: 1.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-family: var(--font-script); font-size:1rem; color:var(--ink-soft);
  animation: bob 2s ease-in-out infinite;
  z-index:3;
}
.scroll-cue span{ width:1px; height:22px; background:var(--ink-soft); }
@keyframes bob{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(6px);} }

/* ---------- 8. MEMORIES / FILMSTRIP ---------- */
.filmstrip-row{
  display:flex; flex-direction:column; gap: 1.4rem;
  width:100%; max-width: 420px;
  padding: .5rem .25rem;
}
.film-frame{
  position:relative;
  background: var(--ink);
  padding: 10px 10px 26px;
  border-radius: 3px;
  transform: rotate(var(--tilt, -2deg));
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  transition: transform .3s ease;
}
.film-frame:nth-child(2){ --tilt: 2deg; }
.film-frame:nth-child(3){ --tilt: -1.5deg; }
.film-frame::before, .film-frame::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 16px);
  background-position: 6px center; background-size: 16px 8px; background-repeat:repeat-x;
}
.film-frame::before{ top:0; }
.film-frame::after{ bottom:12px; }
.film-frame .frame-tape{
  position:absolute; top:-10px; left:50%; transform: translateX(-50%) rotate(-4deg);
  width:54px; height:20px;
  background: repeating-linear-gradient(45deg, var(--mustard), var(--mustard) 5px, #f7cf6b 5px, #f7cf6b 10px);
  opacity:.9; box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.film-photo{
  width:100%; aspect-ratio: 4/3; object-fit:cover;
  background: linear-gradient(135deg,var(--teal),var(--navy));
  border-radius:2px;
}
.film-caption{ color:var(--paper); font-family:var(--font-script); font-size:1.05rem; text-align:center; margin-top:.4rem; white-space: pre-line; }

/* ---------- 9. LETTER / MESSAGE ---------- */
.letter-card{
  position:relative;
  width:min(92%, 460px);
  background: #fffdf7;
  padding: 2rem 1.5rem;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(28,43,39,.15), 0 0 0 1px rgba(28,43,39,.05);
  transform: rotate(-1deg);
}
.letter-body{ font-family: var(--font-body); font-size: 1rem; line-height:1.8; color: var(--ink); white-space: pre-line; }
.letter-signature{ margin-top:1.2rem; font-family: var(--font-script); font-size:1.3rem; color: var(--red); text-align:right; white-space: pre-line; }

/* ---------- 10. WISHES GRID ---------- */
.wishes-grid{
  display:grid; grid-template-columns: 1fr; gap: 1rem;
  width:100%; max-width: 460px;
  padding:.5rem .25rem;
}
.wish-note{
  background: var(--mustard);
  padding: 1.1rem 1.2rem;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  transform: rotate(var(--rot, -1.5deg));
  font-size:.95rem;
  color: var(--ink);
  transition: transform .25s ease;
}
.wish-note:hover{ transform: rotate(0deg) scale(1.02); }
.wish-note:nth-child(2n){ background:var(--pink); --rot:1.5deg; }
.wish-note:nth-child(3n){ background:var(--teal); color:var(--paper); --rot:-1deg; }
.wish-note:nth-child(4n){ background:var(--paper); --rot:2deg; }
.wish-icon{ display:block; font-size:1.4rem; margin-bottom:.3rem; }
.wish-note p{ white-space: pre-line; margin:0; }

/* ---------- 11. CLOSING / CAKE ---------- */
.cake-wrap{ position:relative; width:min(85%, 300px); }
.cake-svg{ width:100%; }
.flame{ transform-origin: center bottom; animation: flicker 1.4s ease-in-out infinite; }
.flame:nth-child(2){ animation-delay:.2s; }
.flame:nth-child(3){ animation-delay:.4s; }
@keyframes flicker{ 0%,100%{ transform: scaleY(1) translateX(0); } 50%{ transform: scaleY(.85) translateX(1px); } }
.cake-wrap.blown .flames{ opacity:0; transition: opacity .4s ease; }
.cake-hint{ display:block; text-align:center; margin-top:.6rem; font-family: var(--font-script); font-size:1.1rem; color: var(--mustard); transition: opacity .3s ease; }
.after-blow{ font-family:var(--font-script); font-size:1.4rem; color: var(--mustard); text-align:center; white-space: pre-line; }
.closing-final{ text-align:center; max-width:30ch; color:#cfe6e0; font-size:.95rem; margin-top:.5rem; white-space: pre-line; }
.confetti-burst{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.confetti-piece{ position:absolute; top:-10%; width:8px; height:8px; opacity:0; animation: fall 1.6s ease-in forwards; }
@keyframes fall{ 0%{ opacity:1; transform: translateY(0) rotate(0); } 100%{ opacity:0; transform: translateY(110vh) rotate(400deg); } }

/* ---------- 12. MUSIC TOGGLE & DOTS ---------- */
.music-toggle{
  position:fixed; top: 1rem; right: 1rem; z-index: 200;
  display:flex; align-items:center; gap:.4rem;
  background: var(--ink); color: var(--paper);
  padding:.5rem .8rem; border-radius: 999px;
  font-size:.75rem; letter-spacing:.03em;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.music-bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.music-bars i{ width:2px; background:var(--mustard); display:block; animation: musicBar 1s ease-in-out infinite; }
.music-bars i:nth-child(1){ height:40%; animation-delay:0s; }
.music-bars i:nth-child(2){ height:100%; animation-delay:.2s; }
.music-bars i:nth-child(3){ height:60%; animation-delay:.4s; }
.music-toggle.paused .music-bars i{ animation-play-state: paused; height:30%; }
@keyframes musicBar{ 0%,100%{ height:30%; } 50%{ height:100%; } }

.page-dots{ position:fixed; right: .9rem; top:50%; transform:translateY(-50%); z-index:200; display:flex; flex-direction:column; gap:.6rem; }
.page-dots button{ width:9px; height:9px; border-radius:50%; background: rgba(28,43,39,.25); transition: background .3s ease, transform .3s ease; }
.page-dots button.active{ background: var(--red); transform:scale(1.3); }

/* ---------- 13. RESPONSIVE ADJUSTMENTS ---------- */
@media (min-width: 640px){
  .filmstrip-row{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
    max-height:none; overflow:visible; max-width: 640px;
  }
  .film-frame{ width:100%; }
  .wishes-grid{ grid-template-columns: 1fr 1fr; max-height:none; overflow:visible; max-width: 640px; }
}

@media (min-width: 900px){
  .filmstrip-row{ max-width: 720px; }
  .wishes-grid{ max-width: 760px; }
  .page{ padding-inline: 4rem; }
  .cutout{ padding: 0 .22em; }
  .letter-card{ padding: 2.6rem 3rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

@media (max-width: 360px){
  .cover-paper{ padding: 2.2rem 1.2rem 2rem; }
  .section-heading{ font-size: clamp(1.7rem, 9vw, 2.4rem); }
}