:root {
  --paper: #fbf5f3;
  --paper-deep: #f2e3e2;
  --ink: #171419;
  --ink-soft: #484047;
  --pink: #df7f9a;
  --pink-deep: #bd5776;
  --pink-wash: #f9dbe4;
  --blue: #1e4f83;
  --blue-soft: #cce1f2;
  --blue-deep: #102d50;
  --gold: #c89c54;
  --line: rgba(23, 20, 25, 0.14);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Outfit", Arial, sans-serif;
  --pad: clamp(1.15rem, 5vw, 4.5rem);
  --shadow: 0 24px 60px rgba(34, 18, 28, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.skip { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .65rem 1rem; background: var(--ink); color: white; font: .7rem var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 1rem; }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 40; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* First page — preserved playful birthday catch */
.birthday-intro { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; overflow: hidden; padding: var(--pad); background: radial-gradient(circle at 76% 18%, rgba(223,127,154,.36), transparent 29rem), linear-gradient(135deg, #fff8f9, #f1e6ec); transition: opacity .42s ease, visibility .42s ease; }
.birthday-intro[hidden] { display: none; }
.birthday-intro.is-leaving { opacity: 0; visibility: hidden; }
.birthday-intro-flower { position: absolute; right: -9rem; bottom: -8rem; width: min(80vw, 460px); opacity: .3; transform: rotate(-24deg); pointer-events: none; }
.birthday-intro-stars { position: absolute; inset: 0; pointer-events: none; }
.birthday-intro-stars span { position: absolute; color: var(--gold); opacity: .48; font-size: clamp(.85rem, 2vw, 1.35rem); animation: twinkle 3.4s ease-in-out infinite; }
.birthday-intro-stars span:nth-child(1){left:10%;top:14%}.birthday-intro-stars span:nth-child(2){left:22%;top:76%;animation-delay:-1.2s}.birthday-intro-stars span:nth-child(3){left:79%;top:12%;animation-delay:-2.4s}.birthday-intro-stars span:nth-child(4){left:91%;top:55%;animation-delay:-.6s}.birthday-intro-stars span:nth-child(5){left:7%;top:50%;animation-delay:-2.7s}.birthday-intro-stars span:nth-child(6){left:68%;top:76%;animation-delay:-1.7s}.birthday-intro-stars span:nth-child(7){left:42%;top:8%;animation-delay:-.9s}.birthday-intro-stars span:nth-child(8){left:54%;top:88%;animation-delay:-2.1s}.birthday-intro-stars span:nth-child(9){left:31%;top:38%;animation-delay:-1.4s}.birthday-intro-stars span:nth-child(10){left:87%;top:31%;animation-delay:-2.9s}.birthday-intro-stars span:nth-child(11){left:15%;top:91%;animation-delay:-.3s}.birthday-intro-stars span:nth-child(12){left:63%;top:25%;animation-delay:-1.9s}
@keyframes twinkle { 0%,100% { opacity:.2; transform:scale(.75) rotate(0) } 50% { opacity:.8; transform:scale(1.25) rotate(18deg) } }
.birthday-intro-card { position: relative; z-index: 1; width: min(100%, 37rem); text-align: center; }
.birthday-intro-kicker, .eyebrow { margin: 0 0 .55rem; color: var(--pink-deep); font: .68rem var(--sans); letter-spacing: .23em; text-transform: uppercase; }
.birthday-intro-number { margin: 0 0 -.8rem; color: var(--ink); font-size: clamp(5.5rem, 21vw, 9rem); font-weight: 500; letter-spacing: -.06em; line-height: .85; opacity: .14; }
.birthday-intro h1 { max-width: 10em; margin: 0 auto; font-size: clamp(2.5rem, 8vw, 4.6rem); font-weight: 500; letter-spacing: -.035em; line-height: .95; }
.birthday-intro-copy { max-width: 27rem; margin: 1.4rem auto 1.4rem; color: var(--ink-soft); font-size: clamp(1.05rem, 2.7vw, 1.25rem); }
.birthday-chase-progress { display:flex; justify-content:center; gap:.38rem; margin:0 auto 1.35rem; }.birthday-chase-progress span { width:.4rem; height:.4rem; border:1px solid var(--pink-deep); border-radius:50%; transition:.28s ease; }.birthday-chase-progress .is-found { background:var(--pink-deep); transform:scale(1.25); }
.birthday-intro-actions { display:flex; justify-content:center; }.birthday-yes { padding:.78rem 1.2rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-soft); cursor:pointer; font: .72rem var(--sans); letter-spacing:.15em; text-transform:uppercase; transition:left .32s cubic-bezier(.34,1.56,.64,1),top .32s cubic-bezier(.34,1.56,.64,1), color .2s ease; }.birthday-yes:hover { color:var(--ink); }.birthday-yes.is-dodging { position:fixed; z-index:65; background:rgba(255,248,249,.95); box-shadow:var(--shadow); }.birthday-yes.is-caught { position:relative; inset:auto; color:white; background:var(--pink-deep); border-color:var(--pink-deep); box-shadow:0 6px 0 rgba(189,87,118,.16); cursor:default; }.birthday-status { min-height:1.6em; margin:1.25rem 0 0; color:#86737b; font:.65rem var(--sans); letter-spacing:.15em; text-transform:uppercase; }.birthday-intro.is-caught .birthday-intro-card { animation:caught .8s ease both; }.birthday-intro.is-caught .birthday-intro-stars span { color:var(--pink-deep); animation-duration:.8s; opacity:.9; } @keyframes caught { 35% { transform:scale(1.035) } 100% { transform:scale(1) } }
body.intro-lock { overflow:hidden; }

/* Dream-world prelude — an original heart, wish, and song sequence */
.dream-world { position:relative; min-height:100svh; background:#111419; color:#fff9fa; transition:opacity .5s ease, transform .5s ease; }.dream-world[hidden] { display:none; }.dream-world.is-leaving { opacity:0; transform:scale(1.015); pointer-events:none; } body:has(.dream-world:not([hidden])) .mast { opacity:0; pointer-events:none; }
.dream-stage { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:var(--pad); isolation:isolate; }.dream-stage::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 17% 80%,rgba(30,79,131,.62),transparent 30rem),radial-gradient(circle at 82% 16%,rgba(223,127,154,.38),transparent 28rem),#101318; }.dream-stage-inner { position:relative; width:min(100%,42rem); margin-inline:auto; text-align:center; }.dream-stage .eyebrow { color:#f2a5ba; }.dream-stage h2 { margin:.15rem auto .8rem; max-width:50em; color:#fff9fa; font-size:clamp(2rem,8vw,50rem); font-weight:500; letter-spacing:-.055em; line-height:.9; }.dream-copy { width:min(100%,30rem); margin:0 auto; padding-inline:.75rem; color:#d5d1d5; font-size:clamp(1.1rem,2.8vw,1.35rem); }.dream-status { min-height:1.5em; margin:1.6rem 0 0; color:#97bedf; font:.66rem var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.heart-workshop { display:grid; grid-template-columns:8fr 11fr 8fr; align-items:center; gap:clamp(.35rem,2.5vw,1.25rem); width:min(100%,35rem); margin:2.7rem auto 0; }.heart-piece { position:relative; display:grid; place-items:center; width:100%; height:auto; aspect-ratio:1; justify-self:center; padding:0; overflow:visible; border:0; background:transparent; color:#f08ca8; cursor:pointer; filter:drop-shadow(0 9px 12px rgba(223,127,154,.22)); transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .28s ease,filter .28s ease; }.heart-piece:hover:not(:disabled) { transform:translateY(-8px) rotate(-4deg) scale(1.06); filter:drop-shadow(0 13px 18px rgba(223,127,154,.42)); }.heart-piece[data-piece="right"]:hover:not(:disabled) { transform:translateY(-8px) rotate(4deg) scale(1.06); }.heart-piece.is-placed { opacity:0; transform:scale(.5); pointer-events:none; }.heart-target { position:relative; display:grid; place-items:center; width:100%; height:auto; aspect-ratio:1; justify-self:center; overflow:visible; }.heart-target::before { display:none; }.heart-target-piece { position:absolute; inset:0; transition:filter .5s ease; }.heart-target-piece.is-left { clip-path:inset(0 50% 0 0); }.heart-target-piece.is-right { clip-path:inset(0 0 0 50%); }.heart-target-piece.is-set { filter:drop-shadow(0 0 14px rgba(240,140,168,.72)); }.heart-target.is-whole { animation:whole-heart 1.1s ease infinite; }.heart-target.is-whole .heart-target-piece { filter:drop-shadow(0 0 20px rgba(240,127,159,.72)); } @keyframes whole-heart { 50% { transform:scale(1.09); filter:drop-shadow(0 0 25px rgba(240,127,159,.7)); } }
.dream-wish::before { background:radial-gradient(circle at 50% 46%,rgba(226,119,154,.52),transparent 16rem),radial-gradient(circle at 13% 76%,rgba(30,79,131,.72),transparent 29rem),#131319; }.wish-halo { position:absolute; width:min(70vw,40rem); aspect-ratio:1; left:50%; top:50%; border:1px solid rgba(255,205,220,.18); border-radius:50%; transform:translate(-50%,-50%); animation:halo-pulse 4s ease-in-out infinite; }.wish-halo::before,.wish-halo::after { content:""; position:absolute; inset:10%; border:1px solid rgba(166,205,238,.16); border-radius:50%; }.wish-halo::after { inset:22%; }.whole-heart { position:relative; margin:0; color:#f184a1; font-family:Arial,sans-serif; font-size:clamp(9rem,30vw,17rem); line-height:.7; filter:drop-shadow(0 0 22px rgba(240,127,159,.55)); animation:whole-heart 2.1s ease-in-out infinite; }.dream-button,.dream-enter { margin-top:2.2rem; padding:.95rem 1.35rem; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff9fa; cursor:pointer; font:.7rem var(--sans); letter-spacing:.15em; text-transform:uppercase; transition:transform .25s ease, background .25s ease; }.dream-button:hover:not(:disabled),.dream-enter:hover { transform:translateY(-3px); background:var(--pink-deep); border-color:var(--pink-deep); }.dream-button:disabled { cursor:default; opacity:.88; }.dream-wish.is-wishing .whole-heart { animation:making-wish 2s ease both; }.dream-wish.is-wishing .wish-halo { animation:making-halo 2s ease both; } @keyframes halo-pulse { 50% { transform:translate(-50%,-50%) scale(1.12); opacity:.4; } } @keyframes making-wish { 0% { transform:scale(1) } 45% { transform:scale(.72); opacity:.6 } 100% { transform:scale(1.25); filter:drop-shadow(0 0 44px rgba(255,230,238,.85)); } } @keyframes making-halo { to { transform:translate(-50%,-50%) scale(1.8); opacity:0; } }
.dream-wish h2 { width:100%; font-size:clamp(1.15rem,5vw,3.2rem); font-weight:700; text-align:center; white-space:nowrap; }
.dream-song::before { background:radial-gradient(circle at 50% 42%,rgba(37,93,148,.6),transparent 22rem),radial-gradient(circle at 82% 78%,rgba(223,127,154,.3),transparent 30rem),#0d1826; }.song-stars { position:absolute; inset:0; pointer-events:none; }.song-stars span { position:absolute; color:#b8dcf8; font-size:clamp(1rem,3vw,2rem); opacity:.65; animation:twinkle 2.8s ease-in-out infinite; }.song-stars span:nth-child(1){left:13%;top:18%}.song-stars span:nth-child(2){left:80%;top:20%;animation-delay:-1.1s}.song-stars span:nth-child(3){left:20%;top:78%;animation-delay:-.5s}.song-stars span:nth-child(4){left:84%;top:70%;animation-delay:-1.9s}.song-stars span:nth-child(5){left:45%;top:10%;animation-delay:-2.4s}.song-stars span:nth-child(6){left:57%;top:83%;animation-delay:-1.5s}.record { position:relative; width:min(100%,12rem); height:min(42svh,19rem); margin:0 auto .45rem; overflow:hidden; border:6px solid rgba(255,205,221,.18); border-radius:1.1rem; background:#f7c4d5 url("./assets/b05d190afc4a8e0b5f38b7b7abf1d0d6.jpg") center/contain no-repeat; box-shadow:0 16px 26px rgba(0,0,0,.3); }.record-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }.record-label { display:block; margin:0 auto; color:#f4b6cc; font:.48rem var(--sans); font-weight:700; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.record.is-playing { animation:plush-bounce 2.5s ease-in-out infinite; } @keyframes plush-bounce { 50% { transform:translateY(-.35rem) rotate(-2deg); } }.dream-play { margin-top:2rem; }.dream-enter { display:inline-flex; align-items:center; gap:.7rem; margin-top:1.25rem; border-color:#a9cde9; color:#e6f3fd; }.dream-enter[hidden] { display:none; }

/* Navigation */
.mast { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.78rem var(--pad); background:rgba(251,245,243,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); color:var(--ink-soft); font:.65rem var(--sans); letter-spacing:.16em; text-transform:uppercase; }.mast a { text-decoration:none; }.mast a:hover { color:var(--pink-deep); }.mast-mark { color:var(--ink); font:600 1rem var(--serif); letter-spacing:.08em; }

/* Age reveal */
.age-reveal { position:relative; min-height:calc(100svh - 3rem); display:grid; place-items:center; overflow:hidden; padding:var(--pad); background:var(--ink); color:#fff8f9; isolation:isolate; }.age-reveal::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 22% 25%, rgba(223,127,154,.6), transparent 26rem), radial-gradient(circle at 82% 78%, rgba(30,79,131,.72), transparent 24rem); }.age-reveal-inner { text-align:center; }.age-reveal .eyebrow { color:#ffc8d6; }.age-number { margin:0; font-size:clamp(13rem, 42vw, 31rem); font-weight:500; letter-spacing:-.1em; line-height:.66; background:linear-gradient(120deg,#fff8fa,#f6a9bf 42%,#b9ddfa 105%); -webkit-background-clip:text; background-clip:text; color:transparent; animation:age-breathe 4s ease-in-out infinite; }.age-reveal h1 { margin:1.6rem 0 .25rem; font-size:clamp(2.3rem,6vw,4.4rem); font-weight:500; line-height:1; }.age-line { margin:0; color:#e8ced7; font-size:clamp(1.2rem,2.8vw,1.65rem); font-style:italic; }.age-next { display:inline-flex; gap:.65rem; margin-top:3.4rem; color:#fff8f9; font:.68rem var(--sans); letter-spacing:.18em; text-decoration:none; text-transform:uppercase; }.age-next span { transition:transform .2s ease; }.age-next:hover span { transform:translateY(4px); }.age-orbit { position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; }.age-orbit-one { width:min(75vw,700px); aspect-ratio:1; animation:spin 24s linear infinite; }.age-orbit-two { width:min(48vw,420px); aspect-ratio:1; border-color:rgba(246,169,191,.48); animation:spin 16s linear infinite reverse; } @keyframes spin { to { transform:rotate(360deg) } } @keyframes age-breathe { 50% { transform:scale(1.025); filter:drop-shadow(0 0 24px rgba(246,169,191,.2)) } }

/* Letters */
.letter-page { padding:clamp(5rem,11vw,9rem) var(--pad); }.letter-page-pink { background:linear-gradient(135deg,#fbe9ef,#f8f1ee 60%,#fff9fb); }.letter-page-blue { background:radial-gradient(circle at 80% 15%,rgba(111,173,224,.3),transparent 28rem), var(--blue-deep); color:#f7f5f4; }.letter-page-inner { max-width:52rem; margin:auto; }.journal-sheet { position:relative; max-width:44rem; margin-top:1.5rem; padding:clamp(2rem,6vw,4.8rem); background:repeating-linear-gradient(to bottom,transparent 0,transparent 2.22rem,rgba(189,87,118,.15) 2.28rem), #fffdfc; box-shadow:var(--shadow); transform:rotate(-.35deg); }.journal-sheet::before { content:""; position:absolute; inset:1rem; border:1px solid rgba(189,87,118,.22); pointer-events:none; }.journal-pin { position:absolute; top:-.65rem; left:50%; width:4.2rem; height:1.25rem; transform:translateX(-50%) rotate(-2deg); background:rgba(30,79,131,.28); }.journal-date { position:relative; margin:0 0 2rem; color:var(--pink-deep); font:.65rem var(--sans); letter-spacing:.18em; text-transform:uppercase; }.letter-copy { position:relative; }.letter-copy p { margin:0 0 1.2rem; font-size:clamp(1.2rem,2.8vw,1.55rem); line-height:1.62; }.letter-copy p:first-child { font-style:italic; }.letter-signature { position:relative; margin:2rem 0 0; color:var(--pink-deep); font-size:1.35rem; font-style:italic; }.journal-sheet-dark { background:repeating-linear-gradient(to bottom,transparent 0,transparent 2.22rem,rgba(188,220,243,.16) 2.28rem), #15365e; box-shadow:0 25px 65px rgba(0,0,0,.28); }.journal-sheet-dark::before { border-color:rgba(204,225,242,.28); }.journal-sheet-dark .letter-copy p { color:#f9f5f4; }.journal-sheet-dark .letter-copy p:first-child { color:#cce1f2; }.letter-page-blue .eyebrow { color:#a9cde9; }.closing-mark { position:relative; margin:3rem 0 0; color:#a9cde9; font-size:2.5rem; font-style:italic; }

/* Photo book */
.photobook-section { padding:clamp(5rem,11vw,9rem) var(--pad); background:#101318; color:#f8f6f6; }.photobook-head { max-width:43rem; margin:0 auto clamp(3rem,7vw,6rem); }.photobook-head .eyebrow { color:#f1a4ba; }.photobook-head h2,.section-intro h2,.bucket-head h2 { margin:.15rem 0 1rem; font-size:clamp(2.8rem,7vw,5.2rem); font-weight:500; letter-spacing:-.04em; line-height:.95; }.photobook-head > p:last-child { max-width:35rem; margin:0; color:#c7c1c5; font-size:1.2rem; }.photobook-pages { max-width:76rem; margin:auto; }.photobook-page { min-height:min(78svh,50rem); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr); align-items:center; gap:clamp(2rem,8vw,8rem); padding:clamp(2rem,7vw,5rem) 0; border-top:1px solid rgba(255,255,255,.17); scroll-margin-top:4rem; }.photobook-page.is-reversed .photobook-photo-wrap { order:2; }.photobook-page.is-reversed .photobook-thought { order:1; }.photobook-photo-wrap { position:relative; width:min(100%,34rem); justify-self:center; padding:.7rem; background:#f7f1f1; box-shadow:0 22px 50px rgba(0,0,0,.25); transform:rotate(-1.7deg); }.photobook-page.is-reversed .photobook-photo-wrap { transform:rotate(1.7deg); }.photobook-photo-wrap img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; filter:saturate(.88) contrast(1.06); }.photo-number { position:absolute; z-index:1; left:-1.4rem; top:-1.2rem; display:grid; place-items:center; width:3.4rem; aspect-ratio:1; border-radius:50%; background:var(--pink-deep); color:white; font:.8rem var(--sans); letter-spacing:.08em; }.photobook-thought { max-width:30rem; }.photobook-thought .eyebrow { color:#86b8e0; }.photobook-thought h3 { margin:.1rem 0 1.1rem; font-size:clamp(2.2rem,5vw,3.8rem); font-weight:500; letter-spacing:-.04em; line-height:1; }.photobook-thought > p:not(.eyebrow) { margin:0; color:#d7d1d5; font-size:clamp(1.15rem,2.5vw,1.42rem); line-height:1.58; }.page-count { display:block; margin-top:2rem; color:#8b9ab0; font:.68rem var(--sans); letter-spacing:.17em; }

/* Gallery */
.gallery-wrap { padding:clamp(5rem,11vw,9rem) var(--pad); background:linear-gradient(160deg,#d9e8f4 0,#f7edf0 46%,#fdf8f4 100%); }.section-intro { max-width:44rem; margin:0 auto 3rem; }.section-intro .eyebrow { color:var(--blue); }.section-intro > p:last-child { margin:0; color:var(--ink-soft); }.gallery { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:clamp(1.2rem,3.8vw,2.8rem) clamp(1rem,3vw,2rem); max-width:85rem; margin:auto; }.polaroid { width:min(80vw,270px); margin:0; padding:.62rem .62rem 0; background:#fffdfd; box-shadow:0 14px 32px rgba(33,28,34,.15); transition:transform .25s ease,box-shadow .25s ease; }.polaroid:nth-child(5n+1){transform:rotate(-2.4deg)}.polaroid:nth-child(5n+2){transform:rotate(2.1deg);margin-top:1.8rem}.polaroid:nth-child(5n+3){transform:rotate(-.8deg)}.polaroid:nth-child(5n+4){transform:rotate(2.8deg);margin-top:.8rem}.polaroid:nth-child(5n){transform:rotate(-1.8deg);margin-top:1.4rem}.polaroid:hover{transform:translateY(-7px) rotate(0);box-shadow:var(--shadow);z-index:1}.frame { overflow:hidden; aspect-ratio:1/1.05; background:#d9d4d5; }.frame img { width:100%; height:100%; object-fit:cover; object-position:center 28%; filter:saturate(.84) contrast(1.05); }.crop-print .frame{aspect-ratio:4/5}.crop-print .frame img{object-fit:contain}.crop-group img{object-position:62% 42%}.crop-view img{object-position:68% 28%}.crop-sea img{object-position:50% 30%}.crop-canopy img{object-position:50% 32%}.crop-walk img{object-position:50% 48%}.crop-stairs img{object-position:50% 46%}.crop-selfie img{object-position:48% 26%}.crop-call img{object-position:52% 38%}.crop-balcony img{object-position:61% 38%}.crop-portrait img{object-position:52% 30%}.crop-scope img{object-position:22% 38%}.crop-mural img{object-position:50% 16%}.crop-side img{object-position:48% 20%}.crop-museum img{object-position:42% 18%}.polaroid figcaption { min-height:3rem; padding:.78rem .3rem 1rem; color:var(--ink-soft); font-size:1.03rem; font-style:italic; }.polaroid.size-origin { width:min(88vw,320px); }.polaroid.size-sm { width:min(68vw,210px); }

/* Hanging bucket list */
.bucket-section { padding:clamp(5rem,11vw,9rem) var(--pad); background:radial-gradient(circle at 10% 15%,rgba(223,127,154,.22),transparent 24rem),#fff8f8; }.bucket-head { max-width:45rem; margin:0 auto 4rem; text-align:center; }.bucket-head .eyebrow { color:var(--pink-deep); }.bucket-head > p:last-child { margin:0; color:var(--ink-soft); }.bucket-line { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:3.7rem clamp(1rem,3vw,2rem); max-width:86rem; margin:auto; padding-top:2.8rem; }.bucket-line::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue) 5%,var(--blue) 95%,transparent); box-shadow:0 3px 4px rgba(16,45,80,.15); }.bucket-card { position:relative; min-height:12.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; padding:2.1rem 1.25rem 1.25rem; background:#fffdfd; box-shadow:0 16px 32px rgba(48,30,39,.13); color:var(--ink); cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }.bucket-card:nth-child(3n+1){transform:rotate(-1.35deg)}.bucket-card:nth-child(3n+2){transform:rotate(1.15deg);margin-top:.7rem}.bucket-card:nth-child(3n){transform:rotate(-.55deg)}.bucket-card:hover{transform:translateY(-5px) rotate(0);box-shadow:var(--shadow)}.bucket-string { position:absolute; left:50%; bottom:100%; width:1px; height:3rem; background:var(--blue); }.bucket-string::before { content:""; position:absolute; top:-.22rem; left:50%; width:.48rem; height:.48rem; transform:translateX(-50%); border:1px solid var(--blue); border-radius:50%; background:#fff8f8; }.bucket-card input { position:absolute; width:1px; height:1px; opacity:0; }.custom-check { display:grid; place-items:center; width:1.42rem; height:1.42rem; border:1px solid var(--blue); color:transparent; font:.85rem var(--sans); transition:.2s ease; }.bucket-card input:checked + .custom-check { background:var(--blue); color:white; }.bucket-number { color:var(--pink-deep); font:.66rem var(--sans); letter-spacing:.16em; }.bucket-text { font-size:1.26rem; line-height:1.2; }.bucket-card.is-checked { background:#eef5fa; }.bucket-card.is-checked .bucket-text { color:#53606d; text-decoration:line-through; text-decoration-color:var(--pink); }

@media (max-width:680px) { .mast { font-size:.56rem; letter-spacing:.11em; }.mast-from { display:none; }.photobook-page,.photobook-page.is-reversed { grid-template-columns:1fr; min-height:0; gap:2rem; padding:4rem 0; }.photobook-page.is-reversed .photobook-photo-wrap,.photobook-page.is-reversed .photobook-thought { order:initial; }.photobook-photo-wrap { width:min(88%,28rem); }.photobook-thought { margin:auto; }.photobook-page:nth-child(even) .photobook-photo-wrap { order:initial; }.bucket-line { grid-template-columns:1fr; max-width:31rem; }.bucket-card { min-height:10rem; }.polaroid.size-sm { width:min(77vw,270px); } }
@media (min-width:720px) { .polaroid { width:min(28vw,250px); }.polaroid.size-origin { width:min(37vw,300px); }.polaroid.size-sm { width:min(23vw,200px); } }

/* Real heart geometry for the dream prelude */
.heart-piece .heart-icon,.heart-target-piece { width:100%; height:100%; overflow:visible; }.heart-piece .heart-icon path { fill:#f08ca8; }.heart-piece .heart-icon.is-left { clip-path:inset(0 50% 0 0); transform:translateX(24%); }.heart-piece .heart-icon.is-right { clip-path:inset(0 0 0 50%); transform:translateX(-24%); }.heart-target-piece path { fill:rgba(240,140,168,.15); transition:fill .5s ease,filter .5s ease; }.heart-target-piece.is-set path { fill:#ed6f94; }.heart-target.is-whole .heart-target-piece path { fill:#f07f9f; }

@media (max-width: 520px) { .heart-workshop { grid-template-areas:"target target" "left right"; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem 2.25rem; width:min(100%,20rem); margin-top:2rem; }.heart-piece[data-piece="left"] { grid-area:left; width:min(100%,8rem); }.heart-piece[data-piece="right"] { grid-area:right; width:min(100%,8rem); }.heart-target { grid-area:target; width:min(100%,13.75rem); } }
.whole-heart { display:grid; place-items:center; width:clamp(9rem,30vw,17rem); height:clamp(9rem,30vw,17rem); margin:0 auto .75rem; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; filter:drop-shadow(0 0 22px rgba(240,127,159,.55)); }.whole-heart-icon { width:100%; height:100%; }.whole-heart-icon path { fill:#f184a1; }.whole-heart:hover { transform:scale(1.08); filter:drop-shadow(0 0 34px rgba(255,195,211,.85)); }.heart-instruction { margin:2rem auto 0; color:#b7d4ed; font:.68rem var(--sans); letter-spacing:.13em; line-height:1.55; text-transform:uppercase; }.dream-song .dream-copy { max-width:26rem; }.dream-song .dream-enter { margin-top:2.25rem; }

/* Click-led birthday pages — no manual scrolling required */
body.site-slides { overflow:hidden; }.site-slides main { height:100svh; overflow:hidden; }.site-slides main > section:not(.dream-world) { display:none; height:100svh; overflow:hidden; }.site-slides main > section.is-active-slide { display:block; }.site-slides main > .age-reveal.is-active-slide { display:grid; }.site-slides main > .letter-page.is-active-slide { display:grid; place-items:center; padding:clamp(1.5rem,5vw,3.5rem) var(--pad); }.site-slides .letter-page-inner { width:min(100%,52rem); }.site-slides .journal-sheet { margin-top:1rem; max-height:72svh; overflow:hidden; padding:clamp(1.6rem,4vw,3rem); }.site-slides .letter-copy p { margin-bottom:.75rem; font-size:clamp(1.05rem,2.3vw,1.32rem); line-height:1.45; }.site-slides .letter-signature { margin-top:1.2rem; }.page-continue { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.4rem; padding:.76rem 1rem; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font:.66rem var(--sans); letter-spacing:.13em; text-transform:uppercase; transition:background .2s ease,color .2s ease,transform .2s ease; }.page-continue:hover { transform:translateY(-2px); color:white; background:var(--ink); }.page-continue-light { border-color:#a9cde9; color:#e5f1fb; }.page-continue-light:hover { color:var(--blue-deep); background:#e5f1fb; }
.site-slides main > .photobook-section.is-active-slide,.site-slides main > .gallery-wrap.is-active-slide,.site-slides main > .bucket-section.is-active-slide { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:.65rem; padding:clamp(1.2rem,4vw,2.75rem) var(--pad); }.site-slides .photobook-head,.site-slides .section-intro,.site-slides .bucket-head { margin:0 auto; width:min(100%,47rem); }.site-slides .photobook-head h2,.site-slides .section-intro h2,.site-slides .bucket-head h2 { margin:.08rem 0 .35rem; font-size:clamp(2rem,5vw,3.6rem); }.site-slides .photobook-head > p:last-child,.site-slides .section-intro > p:last-child,.site-slides .bucket-head > p:last-child { font-size:1rem; }.site-slides .photobook-pages { display:grid; place-items:center; min-height:0; overflow:hidden; }.site-slides .photobook-page { display:none; min-height:0; width:min(100%,58rem); height:100%; grid-template-columns:minmax(0,.9fr) minmax(13rem,1fr); gap:clamp(1rem,5vw,4rem); padding:.5rem 0; border:0; }.site-slides .photobook-page.is-active-book { display:grid; }.site-slides .photobook-page.is-reversed .photobook-photo-wrap { order:initial; }.site-slides .photobook-page.is-reversed .photobook-thought { order:initial; }.site-slides .photobook-photo-wrap { width:min(100%,22rem); max-height:45svh; }.site-slides .photobook-photo-wrap img { max-height:43svh; aspect-ratio:4/5; }.site-slides .photobook-thought h3 { font-size:clamp(1.8rem,4vw,3.2rem); }.site-slides .photobook-thought > p:not(.eyebrow) { font-size:clamp(1rem,2.2vw,1.2rem); }.site-slides .page-count { margin-top:.75rem; }
.page-controls { display:flex; align-items:center; justify-content:center; gap:1rem; min-height:2.3rem; color:var(--ink-soft); font:.68rem var(--sans); letter-spacing:.12em; }.page-controls button { display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; cursor:pointer; transition:background .2s ease,color .2s ease; }.page-controls button:hover:not(:disabled) { background:var(--ink); color:white; }.page-controls button:disabled { cursor:not-allowed; opacity:.28; }.site-slides .gallery { display:grid; place-items:center; min-height:0; overflow:hidden; }.site-slides .gallery .polaroid { display:none; margin:0; width:min(62vw,19rem); }.site-slides .gallery .polaroid.is-active-gallery { display:block; }.site-slides .gallery .frame { max-height:43svh; }.site-slides .bucket-line { display:grid; place-items:center; min-height:0; padding-top:2rem; overflow:hidden; }.site-slides .bucket-line::before { top:0; }.site-slides .bucket-card { display:none; width:min(86vw,22rem); min-height:0; padding:1.7rem 1.25rem 1.25rem; }.site-slides .bucket-card.is-active-bucket { display:flex; }.site-slides .bucket-text { font-size:1.13rem; }.site-slides .bucket-string { height:2rem; }
@media (max-width:680px) { .site-slides .photobook-page,.site-slides .photobook-page.is-reversed { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; align-content:center; gap:.75rem; }.site-slides .photobook-photo-wrap { width:min(54vw,15rem); max-height:34svh; }.site-slides .photobook-photo-wrap img { max-height:32svh; }.site-slides .photobook-thought { text-align:center; }.site-slides .photobook-thought .eyebrow { margin-bottom:.25rem; }.site-slides .photobook-thought h3 { margin:.05rem 0 .35rem; font-size:clamp(1.7rem,7vw,2.3rem); }.site-slides .photobook-thought > p:not(.eyebrow) { font-size:.98rem; line-height:1.35; }.site-slides .photobook-thought .page-count { display:none; }.site-slides .journal-sheet { max-height:70svh; }.site-slides .letter-copy p { font-size:1.02rem; line-height:1.38; }.site-slides .journal-date { margin-bottom:1rem; }.site-slides .gallery .polaroid { width:min(72vw,18rem); }.site-slides .bucket-card { min-height:8.5rem; } }

/* Desktop keeps the gallery frame fixed while its existing photo grid scrolls inside it. */
@media (min-width: 681px) { body.site-slides.is-scrollable-slide { overflow-y:auto; } body.site-slides.is-scrollable-slide main { height:auto; overflow:visible; } .site-slides main > .gallery-wrap.is-active-slide { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100svh; max-height:100svh; overflow:hidden; }.site-slides .gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); align-content:start; align-items:start; gap:clamp(1rem,2.2vw,2rem); width:min(100%,78rem); height:100%; min-height:0; padding:.8rem 1rem 1.6rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:rgba(23,20,25,.28) transparent; }.site-slides .gallery::-webkit-scrollbar { width:.45rem; }.site-slides .gallery::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(23,20,25,.24); }.site-slides .gallery .polaroid { display:block; width:100%; min-width:0; }.site-slides .gallery .frame { max-height:none; }.site-slides .gallery-wrap .page-controls { display:none; }.site-slides main > .bucket-section.is-active-slide { display:block; height:auto; min-height:100svh; overflow:visible; }.site-slides .bucket-line { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); align-content:start; align-items:start; gap:clamp(2.25rem,4vw,3.6rem) clamp(1rem,2.2vw,1.7rem); width:min(100%,78rem); min-height:auto; height:auto; padding:3rem 1rem 2rem; overflow:visible; }.site-slides .bucket-card { display:flex; width:100%; min-width:0; min-height:11rem; }.site-slides .bucket-section .page-controls { display:none; } }

/* Keep the age-reveal action clear, large, and easy to tap. */
.age-next { align-items:center; padding:1rem 1.35rem; border:1px solid rgba(255,248,249,.78); background:rgba(255,255,255,.1); cursor:pointer; transition:background .2s ease,transform .2s ease; }.age-next:hover,.age-next:focus-visible { background:var(--pink-deep); border-color:var(--pink-deep); transform:translateY(-3px); }

/* Decorative rings must never sit above or block the real button. */
.age-orbit { pointer-events:none; }.age-reveal-inner { position:relative; z-index:2; }

/* One stable, looping typewriter area for the birthday-song page. */
.typewriter-stage { display:grid; place-items:center; min-height:clamp(8rem,18svh,11rem); max-width:39rem; margin:1rem auto .35rem; padding:0 .35rem; }.typewriter-message { margin:0; color:#fff9fa; font-size:clamp(1.85rem,5.4vw,3.25rem); font-weight:500; font-style:italic; letter-spacing:-.035em; line-height:1.14; text-align:center; text-wrap:balance; }.typewriter-cursor { display:inline-block; margin-left:.1em; color:#f2a5ba; font-family:var(--sans); font-style:normal; font-weight:300; animation:typewriter-blink .76s steps(1,end) infinite; } @keyframes typewriter-blink { 50% { opacity:0; } }

/* The full name gets a brief star-lit introduction, then remains as a quiet signature beneath the song message. */
.name-constellation { position:relative; display:grid; gap:.18rem; width:min(100%,38rem); max-height:3.2rem; margin:.65rem auto 1rem; overflow:hidden; color:#f6c7d8; font:.59rem var(--sans); letter-spacing:.18em; line-height:1.5; text-align:center; text-transform:uppercase; animation:name-constellation 4s ease both; }.name-constellation::before,.name-constellation::after { position:absolute; color:#b9ddfa; content:"✦"; font-size:.8rem; opacity:0; animation:name-star 1.3s .35s ease-out both; }.name-constellation::before { left:8%; top:35%; }.name-constellation::after { right:8%; top:9%; animation-delay:.65s; }.name-constellation span { opacity:0; animation:name-line 1s ease-out forwards; }.name-constellation span:nth-child(2) { animation-delay:.28s; }.star-signature { display:grid; gap:.08rem; margin:.85rem 0 0; color:#e7b5c9; font:.48rem var(--sans); letter-spacing:.13em; line-height:1.5; text-align:center; text-transform:uppercase; opacity:0; animation:star-signature 1.1s 3.45s ease-out forwards; }.star-signature span { display:block; } @keyframes name-line { from { opacity:0; transform:translateY(.55rem); letter-spacing:.34em; } to { opacity:1; transform:translateY(0); letter-spacing:.18em; } } @keyframes name-star { from { opacity:0; transform:scale(.2) rotate(-25deg); } 60% { opacity:1; } to { opacity:.75; transform:scale(1) rotate(0); } } @keyframes name-constellation { 0%,65% { max-height:3.2rem; margin:.65rem auto 1rem; opacity:1; } 100% { max-height:0; margin:0 auto; opacity:0; transform:translateY(-.45rem) scale(.97); } } @keyframes star-signature { from { opacity:0; transform:translateY(.4rem); } to { opacity:1; transform:translateY(0); } }

/* Keep the photo-book exit clear on its dark page. */
.photobook-section .page-continue { border-color:#a9cde9; color:#e9f4fc; }.photobook-section .page-continue:hover { background:#e9f4fc; color:#101318; }.site-slides .photobook-section .page-controls { color:#cce1f2; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } .polaroid,.polaroid:nth-child(n),.bucket-card,.bucket-card:nth-child(n) { transform:none; margin-top:0; } }