:root{
  --paper:#fffafc;
  --paper-2:#fff2f7;
  --pink-50:#fff5f9;
  --pink-100:#fde6ef;
  --pink-200:#f7c9db;
  --pink-300:#efabc6;
  --pink-400:#de86aa;
  --pink-500:#c9658d;
  --berry:#8f4f6c;
  --berry-dark:#563445;
  --ink:#3f2b35;
  --muted:#866c78;
  --cream:#fff8ee;
  --green:#e8f4e8;
  --shadow:0 20px 60px rgba(92,50,69,.12);
  --shadow-soft:0 12px 32px rgba(92,50,69,.09);
  --radius:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Avenir Next', 'Segoe UI', sans-serif;
  --hand:'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(247,201,219,.55), transparent 24rem),
    radial-gradient(circle at 95% 35%, rgba(255,229,240,.8), transparent 28rem),
    var(--paper);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
}
body.gift-open{overflow:auto}
button,a{font:inherit}
button{color:inherit}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--pink-200);color:var(--berry-dark)}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.section-shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
section{position:relative}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--berry)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink-400);margin-right:7px;vertical-align:1px}
em{font-family:var(--serif);font-weight:400;color:var(--berry)}

.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  width:min(1220px,calc(100% - 24px));margin:12px auto 0;padding:11px 14px 11px 18px;
  border:1px solid rgba(143,79,108,.12);border-radius:999px;
  background:rgba(255,250,252,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px rgba(92,50,69,.08)
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:850;letter-spacing:-.02em}
.brand-paw{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--pink-100);color:var(--berry);font-family:var(--serif);font-size:1.2rem}
.topbar nav{display:flex;gap:6px}
.topbar nav a{text-decoration:none;color:var(--muted);font-size:.84rem;font-weight:700;padding:9px 12px;border-radius:999px;transition:.2s ease}
.topbar nav a:hover{background:var(--pink-100);color:var(--berry)}

.gift-gate{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;
  background:rgba(255,239,246,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:opacity .65s ease,visibility .65s ease;
}
.gift-gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.gift-card{
  position:relative;width:min(520px,100%);padding:54px 38px 34px;text-align:center;
  background:var(--paper);border:1px solid rgba(143,79,108,.15);border-radius:34px;box-shadow:var(--shadow);
  transform:rotate(-.6deg)
}
.gift-card::before,.gift-card::after{content:"";position:absolute;width:84px;height:28px;background:rgba(239,171,198,.38);top:-12px;transform:rotate(-6deg)}
.gift-card::before{left:38px}.gift-card::after{right:38px;transform:rotate(7deg)}
.gift-card h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,7vw,3.2rem);line-height:1.05;margin:14px 0 12px;color:var(--berry-dark)}
.gift-card p{color:var(--muted);margin:0 auto 24px;max-width:340px}
.gift-card small{display:block;margin-top:18px;color:#a58995;font-size:.75rem}
.tiny-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--pink-500)}
.gift-stamp{width:58px;height:58px;border:1px dashed var(--pink-400);border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:1.5rem;background:var(--pink-50)}

.primary-btn,.secondary-btn,.ghost-btn,.tiny-btn,.chat-random,.boop{
  border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.primary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:var(--berry);color:white;border-radius:999px;padding:13px 19px;font-weight:800;box-shadow:0 10px 24px rgba(143,79,108,.23)
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(143,79,108,.28)}
.secondary-btn{background:var(--paper);border:1px solid rgba(143,79,108,.17);border-radius:999px;padding:12px 17px;font-weight:800;color:var(--berry);box-shadow:var(--shadow-soft)}
.secondary-btn:hover{transform:translateY(-2px)}
.ghost-btn{background:transparent;border:1px solid rgba(143,79,108,.22);border-radius:999px;padding:12px 17px;font-weight:800;color:var(--berry)}
.ghost-btn:hover{background:var(--pink-50)}

.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center;min-height:calc(100vh - 72px);padding:92px 0 92px}
.hero-copy h1{font-size:clamp(3.4rem,6.7vw,6.35rem);line-height:.93;letter-spacing:-.065em;margin:16px 0 24px;max-width:780px;font-weight:800}
.hero-copy h1 span{display:inline-block;color:var(--berry)}
.hero-lead{font-size:1.08rem;color:var(--muted);max-width:630px;margin:0 0 28px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px;max-width:650px}
.mini-stats>div{padding:14px 15px;border-top:1px solid rgba(143,79,108,.16)}
.mini-stats strong{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--berry-dark)}
.mini-stats span{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}

.hero-visual{position:relative;min-height:650px;display:grid;place-items:center}
.photo-frame{position:relative;background:#fff;padding:14px 14px 48px;border-radius:9px;box-shadow:0 30px 70px rgba(76,48,61,.18);will-change:transform;transition:transform .18s ease}
.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.hero-frame{width:min(470px,88%);height:600px;transform:rotate(3.8deg)}
.hero-frame img{object-position:center 38%}
.scribble{position:absolute;bottom:13px;left:24px;font-family:var(--hand);font-size:1.06rem;color:var(--berry);transform:rotate(-2deg)}
.tape{position:absolute;width:88px;height:27px;background:rgba(255,222,234,.78);top:-8px;left:50%;transform:translateX(-50%) rotate(-4deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.floating-note{position:absolute;background:#fff9d9;padding:11px 14px;box-shadow:var(--shadow-soft);font-family:var(--hand);font-size:.96rem;z-index:2}
.note-one{left:0;top:25%;transform:rotate(-7deg)}
.note-two{right:-6px;bottom:14%;transform:rotate(6deg)}
.paw-badge{position:absolute;right:4%;top:6%;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--pink-200);border:2px solid white;box-shadow:var(--shadow-soft);font-size:2rem;transform:rotate(9deg)}

.ticker{overflow:hidden;border-block:1px solid rgba(143,79,108,.12);background:rgba(247,201,219,.24)}
.ticker-track{display:flex;width:max-content;gap:32px;padding:11px 0;animation:ticker 32s linear infinite;color:var(--berry);font-family:var(--hand);font-size:1rem}
.ticker-track span{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-50%)}}

.story{padding:118px 0 125px}
.section-heading{max-width:700px;margin-bottom:42px}
.section-heading h2{font-size:clamp(2.5rem,5vw,4.6rem);line-height:.98;letter-spacing:-.05em;margin:9px 0 16px}
.section-heading p{color:var(--muted);max-width:610px;margin:0}
.centered{text-align:center;margin-inline:auto}.centered p{margin-inline:auto}

.scrapbook-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start}
.scrap{margin:0;background:white;padding:10px 10px 38px;border-radius:7px;box-shadow:0 16px 40px rgba(76,48,61,.13);position:relative;transition:transform .2s ease;will-change:transform}
.scrap img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.scrap figcaption{position:absolute;left:15px;bottom:10px;font-family:var(--hand);color:var(--berry-dark);font-size:.92rem}
.photo-a{grid-column:1/5;height:460px;transform:rotate(-3deg);margin-top:20px}.photo-a img{object-position:center 30%}
.photo-b{grid-column:5/9;height:535px;transform:rotate(2deg)}
.photo-c{grid-column:9/13;height:420px;transform:rotate(-1.5deg);margin-top:48px}
.photo-d{grid-column:2/6;height:360px;transform:rotate(2.2deg);margin-top:18px}
.photo-e{grid-column:6/10;height:430px;transform:rotate(-2deg);margin-top:-5px}
.photo-f{grid-column:10/13;height:350px;transform:rotate(3deg);margin-top:28px}

.bonnie-oracle{margin-top:78px;padding:28px 30px;border:1px solid rgba(143,79,108,.14);border-radius:var(--radius);display:flex;gap:26px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fff,#fff2f7);box-shadow:var(--shadow-soft)}
.bonnie-oracle h3{font-size:1.8rem;margin:4px 0 4px}.bonnie-oracle p{margin:0;font-family:var(--serif);font-style:italic;color:var(--berry);font-size:1.05rem}

.chat-section{background:var(--berry-dark);color:#fff;padding:108px 0;overflow:hidden}
.chat-section::before{content:"♡";position:absolute;right:-70px;top:35px;font-family:var(--serif);font-size:26rem;line-height:1;color:rgba(255,255,255,.035);transform:rotate(15deg)}
.light .eyebrow{color:var(--pink-300)}.light h2 em{color:var(--pink-300)}.light p{color:#d8c9d0}
.chat-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}
.phone{max-width:380px;margin-inline:auto;background:#f6eff2;color:var(--ink);padding:12px;border-radius:42px;border:7px solid #281d22;box-shadow:0 28px 80px rgba(0,0,0,.26);position:relative}
.phone-notch{width:105px;height:22px;border-radius:0 0 16px 16px;background:#281d22;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.phone-top{background:#fff8fb;padding:26px 14px 12px;border-radius:29px 29px 14px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid rgba(143,79,108,.08)}
.phone-top .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pink-100)}
.phone-top strong{display:block;font-size:.82rem}.phone-top small{display:block;font-size:.64rem;color:var(--muted)}
.messages{height:440px;overflow:auto;padding:18px 8px 8px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),radial-gradient(circle at 20% 10%,rgba(247,201,219,.5),transparent 15rem)}
.bubble{max-width:84%;padding:10px 11px 7px;border-radius:15px;box-shadow:0 4px 10px rgba(76,48,61,.05)}
.bubble span{display:block;font-size:.82rem;line-height:1.35}.bubble small{display:block;margin-top:5px;font-size:.57rem;opacity:.55;text-align:right}
.incoming{align-self:flex-start;background:white;border-bottom-left-radius:4px}.outgoing{align-self:flex-end;background:#f5cfdf;border-bottom-right-radius:4px}
.chat-random{width:calc(100% - 16px);margin:8px;border-radius:999px;padding:10px;background:var(--berry);color:#fff;font-weight:800;font-size:.8rem}
.lore-card{background:#fff;color:var(--ink);padding:18px 18px 26px;border-radius:32px;box-shadow:0 28px 70px rgba(0,0,0,.18);transform:rotate(.8deg)}
.lore-photo{height:390px;overflow:hidden;border-radius:22px;margin-bottom:22px}.lore-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.lore-card h3{font-family:var(--serif);font-size:2.6rem;font-weight:400;margin:6px 0 8px;color:var(--berry-dark)}
.lore-card>p{color:var(--muted);font-size:1.05rem}.text-btn{border:0;background:none;padding:0;cursor:pointer;color:var(--berry);font-weight:800}
.lore-story{margin-top:18px;padding-top:16px;border-top:1px dashed var(--pink-200);color:var(--muted);font-family:var(--serif)}

.timeline{padding:115px 0}
.timeline-track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.timeline-track::before{content:"";position:absolute;top:62px;left:7%;right:7%;height:1px;background:var(--pink-200)}
.milestone{position:relative;padding:18px 16px 22px;background:rgba(255,255,255,.65);border:1px solid rgba(143,79,108,.09);border-radius:22px;min-height:250px}
.milestone .date{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted)}
.milestone i{position:relative;z-index:2;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;margin:17px 0 18px;background:var(--pink-200);border:4px solid var(--paper);font-family:var(--serif);font-style:normal;color:var(--berry-dark)}
.milestone h3{margin:0 0 8px;font-size:1.15rem}.milestone p{margin:0;color:var(--muted);font-size:.88rem}

.game-section{padding:110px 0 120px;background:linear-gradient(180deg,#fff3f8,#f9dce8)}
.game-wrap{width:min(760px,100%);margin:0 auto;background:rgba(255,255,255,.82);border:1px solid rgba(143,79,108,.1);border-radius:32px;padding:22px;box-shadow:var(--shadow)}
.game-status{display:flex;align-items:center;gap:18px;padding:3px 2px 18px;color:var(--muted);font-size:.84rem}.game-status strong{color:var(--berry)}.tiny-btn{margin-left:auto;border-radius:999px;padding:7px 11px;background:var(--pink-100);font-size:.74rem;font-weight:800;color:var(--berry)}
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;perspective:1000px}
.memory-card{aspect-ratio:1/1.12;position:relative;border:0;background:transparent;padding:0;cursor:pointer;perspective:900px;border-radius:18px}
.memory-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);border-radius:18px;box-shadow:0 10px 24px rgba(76,48,61,.1)}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;overflow:hidden}
.memory-back{display:grid;place-items:center;background:linear-gradient(135deg,var(--pink-200),var(--pink-100));border:1px solid rgba(143,79,108,.11);font-size:2.1rem;color:var(--berry)}
.memory-back::after{content:"♡";font-family:var(--serif)}
.memory-front{transform:rotateY(180deg);background:white;padding:5px}.memory-front img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.memory-card.matched .memory-front{outline:3px solid rgba(201,101,141,.35);outline-offset:-3px}
.game-win{text-align:center;padding:30px 16px 12px}.game-win h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:8px 0}.game-win p{max-width:480px;margin:0 auto 18px;color:var(--muted)}.win-paw{font-size:3rem}

.little-moments{padding:112px 0}
.moment-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:280px;gap:16px}
.moment{margin:0;position:relative;overflow:hidden;border-radius:26px;background:var(--pink-100)}
.moment img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.moment:hover img{transform:scale(1.035)}
.moment figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,250,252,.86);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px;font-family:var(--hand);font-size:.84rem;color:var(--berry-dark)}
.moment.wide{grid-row:span 2}.moment.tall{grid-row:span 2}.moment.wide img{object-position:center}.moment.tall img{object-position:center 25%}

.love-note{padding:40px 0 125px}
.note-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;background:var(--cream);border:1px solid rgba(143,79,108,.09);border-radius:38px;padding:38px;box-shadow:var(--shadow)}
.note-card::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(143,79,108,.13);border-radius:30px;pointer-events:none}
.note-sticker{position:absolute;right:28px;top:-22px;background:var(--pink-200);padding:10px 16px;border-radius:999px;font-family:var(--hand);transform:rotate(4deg);box-shadow:var(--shadow-soft)}
.note-photo{position:relative;z-index:1;transform:rotate(-2deg);background:white;padding:11px 11px 40px;border-radius:8px;box-shadow:var(--shadow-soft)}
.note-photo img{width:100%;height:460px;object-fit:cover;border-radius:3px;object-position:center 38%}
.note-copy{position:relative;z-index:1}.note-copy h2{font-size:clamp(2.6rem,5vw,4.4rem);line-height:.96;letter-spacing:-.05em;margin:8px 0 20px}.note-copy p{color:var(--muted);font-size:1rem}.signature{font-family:var(--hand);font-size:1.4rem;color:var(--berry);margin:22px 0 20px;transform:rotate(-1deg);transform-origin:left}.strike{text-decoration:line-through;text-decoration-color:var(--pink-500);text-decoration-thickness:2px}.secret-line{margin-top:16px;background:#fff;border-radius:16px;padding:13px 15px;color:var(--berry);font-family:var(--serif);font-style:italic}

footer{width:min(1180px,calc(100% - 36px));margin:0 auto 28px;padding-top:20px;border-top:1px solid rgba(143,79,108,.13);display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:.78rem}
.boop{background:var(--pink-100);color:var(--berry);border-radius:999px;padding:8px 12px;font-size:.73rem;font-weight:800}

.heart-layer{position:fixed;inset:0;pointer-events:none;z-index:450;overflow:hidden}
.float-heart{position:absolute;bottom:-30px;font-family:var(--serif);color:var(--pink-500);animation:heartFly 1.9s cubic-bezier(.2,.7,.2,1) forwards;filter:drop-shadow(0 4px 4px rgba(143,79,108,.1))}
@keyframes heartFly{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate3d(var(--drift),-105vh,0) rotate(var(--spin));opacity:0}}
.toast{position:fixed;left:50%;bottom:24px;z-index:460;transform:translate(-50%,20px);opacity:0;background:var(--berry-dark);color:white;padding:10px 15px;border-radius:999px;font-size:.8rem;box-shadow:var(--shadow);transition:.25s ease;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:30px;padding-top:70px}.hero-visual{min-height:580px}.hero-frame{height:540px;width:min(430px,88%)}
  .scrapbook-grid{grid-template-columns:repeat(2,1fr)}
  .photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{grid-column:auto;height:430px;margin-top:0}.photo-b,.photo-e{height:500px}
  .chat-layout{grid-template-columns:1fr;gap:45px}.lore-card{max-width:650px;margin:auto}.phone{order:2}.lore-card{order:1}
  .timeline-track{grid-template-columns:repeat(2,1fr)}.timeline-track::before{display:none}
  .note-card{grid-template-columns:1fr}.note-photo{max-width:520px;margin:auto}.note-photo img{height:auto;max-height:600px}
}

@media(max-width:720px){
  .topbar{top:7px;width:calc(100% - 14px);padding:8px 9px 8px 12px}.brand span:last-child{display:none}.topbar nav{gap:1px}.topbar nav a{font-size:.72rem;padding:8px 8px}
  .section-shell{width:min(100% - 24px,1180px)}
  .hero{padding:58px 0 72px;min-height:auto}.hero-copy h1{font-size:clamp(3rem,16vw,4.6rem)}.hero-lead{font-size:.98rem}
  .mini-stats{grid-template-columns:1fr 1fr}.mini-stats>div:last-child{grid-column:1/-1}
  .hero-visual{min-height:510px}.hero-frame{height:450px}.floating-note{font-size:.8rem}.note-one{left:2%;top:22%}.note-two{right:0}.paw-badge{width:61px;height:61px;font-size:1.5rem}
  .story,.timeline,.little-moments{padding:82px 0}.section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(2.45rem,12vw,3.4rem)}
  .scrapbook-grid{gap:12px}.photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{height:320px;padding:7px 7px 34px}.photo-b,.photo-e{height:380px}.scrap figcaption{font-size:.75rem;left:11px}
  .bonnie-oracle{flex-direction:column;align-items:flex-start;margin-top:48px;padding:22px}.bonnie-oracle h3{font-size:1.45rem}
  .chat-section{padding:82px 0}.lore-photo{height:300px}.lore-card h3{font-size:2.1rem}
  .timeline-track{grid-template-columns:1fr}.milestone{min-height:auto;display:grid;grid-template-columns:auto 1fr;column-gap:12px}.milestone .date{grid-column:1/-1}.milestone i{grid-column:1;grid-row:2/4;margin:13px 0}.milestone h3{grid-column:2;margin-top:13px}.milestone p{grid-column:2}
  .game-section{padding:82px 0}.game-wrap{padding:13px;border-radius:24px}.memory-grid{gap:7px}.memory-card{border-radius:14px}.memory-face,.memory-card-inner{border-radius:14px}.memory-back{font-size:1.6rem}.game-status{gap:9px;font-size:.74rem}
  .moment-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.moment.wide,.moment.tall{grid-row:span 2}.moment.wide{grid-column:1/-1;grid-row:span 1}.moment.tall{grid-row:span 2}
  .love-note{padding:20px 0 90px}.note-card{padding:25px 18px 24px;border-radius:28px;gap:28px}.note-card::before{inset:8px}.note-photo{padding:8px 8px 32px}.note-copy h2{font-size:clamp(2.5rem,13vw,3.5rem)}
  footer{width:calc(100% - 24px);flex-direction:column;align-items:flex-start}
}

@media(max-width:430px){
  .topbar nav a:nth-child(2){display:none}
  .hero-frame{height:420px}.hero-visual{min-height:470px}
  .scrapbook-grid{grid-template-columns:1fr}.photo-a,.photo-b,.photo-c,.photo-d,.photo-e,.photo-f{height:420px;transform:rotate(0)}
  .photo-b,.photo-e{height:500px}
  .phone{max-width:100%;border-width:6px;border-radius:35px}.messages{height:390px}
  .memory-grid{grid-template-columns:repeat(4,1fr)}
  .moment-grid{grid-template-columns:1fr;grid-auto-rows:300px}.moment.wide,.moment.tall{grid-column:auto;grid-row:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.ticker-track{animation:none}.reveal{opacity:1;transform:none;transition:none}.photo-frame,.scrap{transition:none}.float-heart{animation-duration:.01ms}.memory-card-inner{transition:none}
}

/* 21st birthday letter */
.birthday-section{padding:28px 0 105px}
.birthday-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#fff8fb 0%,#fff0f6 58%,#fde3ee 100%);
  border:1px solid rgba(143,79,108,.12);border-radius:40px;padding:46px;
  box-shadow:var(--shadow)
}
.birthday-card::before{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-120px;top:-140px;
  background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.7)
}
.birthday-confetti{position:absolute;right:34px;top:24px;font-family:var(--hand);letter-spacing:.45em;color:var(--pink-400);transform:rotate(5deg)}
.birthday-head{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;max-width:930px}
.birthday-number{
  width:126px;height:126px;border-radius:34px;display:grid;place-items:center;
  background:var(--berry);color:white;font-family:var(--serif);font-size:4.9rem;line-height:1;
  box-shadow:0 18px 34px rgba(143,79,108,.2);transform:rotate(-4deg)
}
.birthday-head h2{font-size:clamp(2.7rem,5vw,4.9rem);line-height:.95;letter-spacing:-.055em;margin:7px 0 13px}
.birthday-head p{margin:0;color:var(--muted);max-width:690px}
.birthday-envelope{position:relative;z-index:1;margin-top:36px;background:rgba(255,255,255,.72);border:1px solid rgba(143,79,108,.11);border-radius:28px;box-shadow:var(--shadow-soft);overflow:hidden}
.birthday-open{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;text-align:left;border:0;background:transparent;padding:20px 22px;cursor:pointer;color:var(--ink)}
.birthday-open:hover{background:rgba(255,255,255,.5)}
.birthday-open strong{display:block;font-size:1rem;color:var(--berry-dark)}
.birthday-open small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.envelope-icon{width:48px;height:48px;border-radius:15px;background:var(--pink-100);display:grid;place-items:center;font-size:1.45rem}
.birthday-arrow{font-family:var(--serif);font-size:1.4rem;color:var(--berry);transition:transform .25s ease}
.birthday-open[aria-expanded="true"] .birthday-arrow{transform:rotate(180deg)}
.birthday-letter{border-top:1px dashed rgba(143,79,108,.18);padding:26px 28px 30px;background:rgba(255,253,249,.78);font-family:var(--serif);font-size:1.04rem;line-height:1.8;color:#59404c}
.birthday-letter p{margin:0 0 18px;max-width:900px}
.birthday-letter p:last-of-type{margin-bottom:24px}
.birthday-signature{font-family:var(--hand);font-size:1.35rem;color:var(--berry);transform:rotate(-1deg);transform-origin:left}
.birthday-signature span{font-size:.88rem;color:var(--muted)}
.birthday-wishbox{position:relative;z-index:1;margin-top:28px;padding:24px;border:1px dashed rgba(143,79,108,.18);border-radius:25px;text-align:center;background:rgba(255,255,255,.38)}
.birthday-candles{display:flex;justify-content:center;align-items:flex-end;gap:7px;flex-wrap:wrap;max-width:620px;margin:0 auto 22px;min-height:55px}
.birthday-candle{position:relative;width:10px;height:31px;border-radius:5px 5px 3px 3px;background:linear-gradient(90deg,var(--pink-300),#fff 48%,var(--pink-200));box-shadow:inset 0 0 0 1px rgba(143,79,108,.07);transition:opacity .45s ease,transform .45s ease}
.birthday-candle::before{content:"";position:absolute;left:50%;top:-15px;width:9px;height:14px;transform:translateX(-50%);border-radius:55% 55% 55% 55%;background:#ffcc76;box-shadow:0 0 12px rgba(255,181,77,.65);transform-origin:center bottom;animation:candleFlicker .9s ease-in-out infinite alternate}
.birthday-candle:nth-child(3n)::before{animation-delay:.2s}.birthday-candle:nth-child(4n)::before{animation-delay:.35s}
.birthday-candles.blown .birthday-candle::before{opacity:0;transform:translateX(-50%) scale(.2)}
.birthday-candles.blown .birthday-candle{opacity:.72;transform:translateY(3px)}
.birthday-wish{margin:17px 0 0;font-family:var(--serif);font-style:italic;color:var(--berry);font-size:1.04rem}
@keyframes candleFlicker{from{transform:translateX(-50%) rotate(-3deg) scale(.92)}to{transform:translateX(-50%) rotate(4deg) scale(1.08)}}

@media(max-width:720px){
  .birthday-section{padding:10px 0 82px}.birthday-card{padding:28px 18px;border-radius:30px}.birthday-confetti{display:none}
  .birthday-head{grid-template-columns:1fr;gap:18px}.birthday-number{width:92px;height:92px;border-radius:26px;font-size:3.55rem}
  .birthday-head h2{font-size:clamp(2.7rem,13vw,3.7rem)}.birthday-envelope{margin-top:27px;border-radius:22px}
  .birthday-open{padding:16px 15px;gap:11px}.envelope-icon{width:42px;height:42px;border-radius:13px}
  .birthday-letter{padding:22px 18px 24px;font-size:.98rem;line-height:1.72}.birthday-signature span{display:block;margin-top:3px}
  .birthday-wishbox{padding:20px 12px}.birthday-candles{gap:6px}.birthday-candle{width:9px;height:27px}
}