/* Two self-contained compositions. Artwork participates in the grid. */
.hero { height: 280svh; }
/* Translucent glass numerals. The opening is deliberately candle-free. */
.hero { background:#f3dfd4; }
.hero-stage { color:#854456; background:radial-gradient(ellipse at 50% 34%,#fff9ee 0%,#f9eee3 45%,#f0d9ce 100%); }
.masthead { color:#894356; }
.masthead .edition { display:block; font-size:9px; letter-spacing:.08em; font-weight:500; text-transform:none; }
.glass-ambient { position:absolute; inset:-15%; background:radial-gradient(ellipse at 14% 22%,#eeb8c150,transparent 25%),radial-gradient(ellipse at 93% 80%,#ecc9aa66,transparent 30%),linear-gradient(120deg,transparent 35%,#fffaf466 50%,transparent 65%); filter:blur(16px); pointer-events:none; }
.glass-ambient::after { content:''; position:absolute; inset:0; background:linear-gradient(112deg,transparent 20%,#fffdf9aa 46%,#ecc2cf33 50%,transparent 72%); transform:translateX(var(--ambient-drift,-12%)); }
.age-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:0; padding:0; z-index:4; pointer-events:none; transform-origin:center; transform-style:preserve-3d; }
.age-digit { position:relative; display:block; flex:0 0 auto; width:min(46vw,33svh,360px); aspect-ratio:1/2; transform-origin:50% 56%; will-change:transform; }
.glass-number { position:absolute; inset:0; background:url('assets/glass-22-crystal-v8.webp') 0 0 / 200% 100% no-repeat; filter:drop-shadow(0 18px 18px #a16a681a); opacity:.94; }
.age-digit:last-child .glass-number { background-position:100% 0; }
.glass-number::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 34%,#fffaf9bb 46%,#fff 49%,transparent 58%); background-size:280% 100%; background-position:var(--glass-light,100%) 0; mask:url('assets/glass-22-crystal-v8.webp') 0 0 / 200% 100% no-repeat; opacity:.48; mix-blend-mode:screen; }
.age-digit:last-child .glass-number::after { mask-position:100% 0; }
.birthday-composition { width:min(1180px,100%); height:100%; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7%; padding:95px min(5.5vw,64px) 100px; position:relative; z-index:3; }
.birthday-intro { min-width:0; opacity:0; will-change:transform,opacity; }
.birthday-intro h1 { font-size:clamp(78px,8.6vw,136px); line-height:1.2; margin-left:-.06em; }
.title-mask { display:block; overflow:clip; padding:0 .12em 0 0; }
.title-line { display:block; will-change:transform; }
.birthday-intro .eyebrow { font-size:9px; letter-spacing:.25em; margin-bottom:6px; color:#a4616d; }
.birthday-intro>p:last-child { margin-top:15px; font-size:12px; color:#a36773; letter-spacing:.02em; }
.portrait-reveal { position:relative; display:block; justify-self:center; padding:0; width:min(100%,43svh,440px); height:auto; aspect-ratio:2/3; border-radius:16px; overflow:hidden; background:#ead4d1; box-shadow:0 28px 65px #9c625030,0 0 0 1px #fff9f0; transform-origin:50% 60%; opacity:0; will-change:transform,opacity,clip-path; }
.portrait-reveal img { width:100%; height:auto; aspect-ratio:2/3; object-fit:contain; }
.portrait-reveal .photo-shine { z-index:2; }
.hero-foot { z-index:8; }


/* Gallery: the photographs are the heading. */
.gallery { height:620svh; }
.gallery-stage { background:radial-gradient(ellipse at 50% 60%,#fff9ef,#f7e6df 76%); }
.motion-defs { position:absolute; pointer-events:none; }
.gallery-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(#f5d9da,#e7bbc5); opacity:var(--exit-wash,0); z-index:4; pointer-events:none; }
.memory-space { touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; -webkit-user-select:none; }
.memory-space.is-rushing { cursor:default; }
.music-toggle.needs-gesture { background:#fff4e4; color:#883b55; border-color:#e2b0bd; box-shadow:0 5px 28px #aa4d672d; }
.memory-space.is-dragging,.memory-space.is-dragging .photo-button { cursor:grabbing; }
.memory-space:focus-visible { outline:1px solid #a3627370; outline-offset:-12px; }
.memory-card { top:51%; }
.memory-card { box-shadow:0 22px 42px #7a45391c,0 2px 4px #7a453910; border-radius:3px; }
.memory-card img { -webkit-user-drag:none; }
.gallery-bottom { align-items:center; }
.gallery-bottom>span:first-child { min-width:62px; }
.gallery-bottom>span:first-child i { display:inline-block; margin-left:9px; font-size:23px; vertical-align:-1px; color:#a26174; opacity:.65; }
.gallery-bottom>span:last-child { font-size:7px; color:#985e6e; }
.gallery-nav { display:flex; align-items:center; gap:15px; pointer-events:auto; }
.gallery-nav button { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid #a8677833; border-radius:50%; color:#885064; background:#fff9f155; font-size:19px; transition:background .2s,border-color .2s; }
.gallery-nav button:hover { background:#fffcf8; border-color:#a8677880; }
.gallery-ticks { gap:5px; }
.gallery-ticks i { width:9px; height:3px; border-radius:3px; transition:opacity .2s,transform .2s; }
.gallery-ticks i.active { transform:scaleX(1.3); }

@media (max-width:1023px) and (min-width:768px) {
 .birthday-composition { gap:5%; }
 .birthday-intro h1 { font-size:11.5vw; }
}
@media (max-width:767px) {
 .hero { height:255svh; }
 .gallery { height:680svh; }
 .gallery-nav { gap:9px; }
 .gallery-ticks { gap:4px; }
 .gallery-ticks i { width:5px; height:3px; }
 .gallery-bottom>span:first-child { min-width:54px; }
 .gallery-bottom>span:last-child { display:none; }
 .birthday-composition { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:18px; padding:82px 7vw 102px; }
 .birthday-intro { grid-row:2; text-align:center; }
 .birthday-intro h1 { font-size:min(21vw,12svh,112px); line-height:1.13; margin-left:0; }
 .birthday-intro .eyebrow { font-size:8px; letter-spacing:.22em; margin-bottom:6px; }
 .birthday-intro>p:last-child { font-size:10px; margin-top:8px; }
 .portrait-reveal { grid-row:1; width:auto; height:min(100%,48svh); max-width:72vw; aspect-ratio:2/3; border-radius:12px; }
 .portrait-reveal img { width:100%; height:100%; object-fit:contain; }
 .hero-foot { bottom:max(26px,calc(var(--safe-bottom) + 22px)); }
 .hero-edition { font-size:6px; }
 .hero-year { font-size:7px; }
 .scroll-cue { font-size:7px; }
}
@media (max-height:620px) and (min-width:768px) {
 .birthday-composition { padding-top:74px; padding-bottom:78px; }
 .birthday-intro h1 { font-size:20svh; }
 .portrait-reveal { width:41svh; }
}
@media (max-width:767px) and (max-height:620px) {
 .birthday-composition { padding-top:75px; padding-bottom:90px; gap:12px; }
 .birthday-intro h1 { font-size:18vw; }
 .birthday-intro>p:last-child { margin-top:5px; font-size:9px; }
}
@media (max-height:500px) and (min-aspect-ratio:1/1) {
 .masthead { height:56px; }
 .birthday-composition { grid-template-columns:1fr 1fr; grid-template-rows:1fr; padding:58px 6vw 62px; gap:5vw; }
 .birthday-intro { grid-row:1; grid-column:1; text-align:left; }
 .birthday-intro h1 { font-size:min(12vw,21svh); }
 .birthday-intro>p:last-child { font-size:9px; }
 .portrait-reveal { grid-row:1; grid-column:2; width:min(100%,35svh); height:auto; max-width:100%; }
 .hero-foot { bottom:16px; }
 .hero-edition { display:none; }
 .scroll-cue { margin:auto; }
 .hero-year { display:none; }
 .memory-card { top:46%; }
 .gallery-bottom { bottom:18px; }
}

/* One folded keepsake, two illustrated moments. No detached character cards. */
.pop-up { height:340svh; background:#eac3ca; color:#773348; }
.pop-up-stage { background:radial-gradient(ellipse at 50% 40%,#fff1e4 0%,#f5d9da 48%,#e7bbc5 100%); }
.paper-light { position:absolute; width:80vmin; aspect-ratio:1; border-radius:50%; background:#fff4d755; filter:blur(55px); left:50%; top:40%; transform:translate(-50%,-50%); pointer-events:none; }
.book-composition { height:100%; padding:88px 5vw 80px; display:grid; place-items:center; perspective:1800px; }
.keepsake { position:relative; width:min(86vw,118svh,1060px); aspect-ratio:1.72; transform:translateX(var(--book-shift,-25%)) rotateX(var(--book-lean,9deg)) rotateZ(var(--book-tilt,-5deg)) scale(var(--book-scale,.9)); transform-style:preserve-3d; will-change:transform; }
.book-spread { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr; background:#fff9ef; border-radius:6px 10px 10px 6px; opacity:var(--paper-opacity,0); box-shadow:0 3px 0 #e9d6c2,0 6px 0 #fff1df,0 9px 0 #d8bdac,0 35px 65px #71334838; }
.book-note { grid-column:1; grid-row:1; position:relative; min-width:0; display:grid; align-content:center; justify-items:center; padding:32px; background:linear-gradient(90deg,#fff9ef,#fff6e9 90%,#e4d1bb 100%); border-radius:6px 0 0 6px; }
.book-note::before { content:''; position:absolute; inset:18px; border:1px solid #c8a17255; border-radius:1px; pointer-events:none; }
.book-note h2 { position:relative; text-align:center; width:100%; font-size:min(4.2vw,6.8svh,70px); line-height:1.15; color:#86394e; }
.book-note h2 span { display:block; font-size:.72em; letter-spacing:-.04em; }
.book-note h2 em { display:block; font-style:inherit; }
.paper-star { position:absolute; top:15%; left:50%; transform:translateX(-50%); color:#b48c55; font-size:min(3.6vw,4.8svh,45px); }
.paper-heart { position:absolute; bottom:14%; left:50%; transform:translateX(-50%) rotate(-12deg); font-family:Georgia,serif; color:#b36576; font-size:min(3vw,4.5svh,40px); }
.book-picture { grid-column:2; grid-row:1; min-width:0; min-height:0; position:relative; padding:22px; background:linear-gradient(90deg,#e9d8c6,#fff9f0 5%,#fff9ef); border-radius:0 10px 10px 0; }
.illustration-window { width:100%; height:100%; position:relative; perspective:1200px; }
.book-art { position:absolute; inset:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; padding:12px; border-radius:3px; }
.book-art img { width:100%; height:100%; min-height:0; object-fit:contain; object-position:center; }
.art-bears { background:#f6e6df; }
.art-shin { background:#ffd8d9; }
.art-shin img { transform:translateY(var(--shin-lift,18px)) scale(var(--shin-scale,.91)); transform-origin:center; }
.book-leaf { position:absolute; inset:0; transform-origin:0 50%; transform:rotateY(var(--leaf-angle,0deg)); opacity:var(--leaf-opacity,1); backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform,opacity; z-index:3; box-shadow:-12px 4px 24px rgb(110 56 63 / var(--fold-shadow,0)); }
.book-cover { position:absolute; top:0; bottom:0; left:50%; width:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:5px 10px 10px 5px; background:repeating-linear-gradient(96deg,#8a3c5406 0 1px,transparent 1px 4px),linear-gradient(130deg,#7b344b,#a75770 55%,#7d344f); color:#f4d5ab; box-shadow:inset 4px 0 6px #43192e44,0 4px 0 #663047,0 35px 60px #71334840; transform-origin:0 50%; transform:rotateY(var(--cover-angle,0deg)); opacity:var(--cover-opacity,1); backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform,opacity; z-index:8; }
.book-cover { overflow:hidden; }
.book-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 28%,#fff5df22 48%,transparent 68%); transform:translateX(var(--cover-shine,-100%)); pointer-events:none; }
.book-cover::before { content:''; position:absolute; inset:17px; border:1px solid #d9b27b88; outline:1px solid #d9b27b44; outline-offset:4px; border-radius:2px 5px 5px 2px; }
.cover-name { font-size:11px; letter-spacing:.32em; margin-top:6%; }
.cover-age { display:block; width:58%; aspect-ratio:1; flex:0 0 auto; margin:6px 0; background:url('assets/glass-22-crystal-v8.webp') center / contain no-repeat; }
.cover-date { font-size:10px; letter-spacing:.24em; }
.cover-star { position:absolute; bottom:13%; font-size:20px; color:#e8bf87; }
.cover-ribbon { position:absolute; width:15px; height:16%; top:-1px; right:12%; background:linear-gradient(90deg,#dfb477,#f8dba4,#d4a265); clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); }
.book-progress { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; color:#a66978; }
.book-dot { width:6px; height:6px; border:1px solid currentColor; border-radius:50%; transition:background .2s; }
.book-dot.active { background:currentColor; }
.book-progress>span { width:42px; height:1px; background:currentColor; opacity:.25; }
.book-progress>b { position:absolute; top:-4px; left:calc(100% + 20px); font-size:16px; font-weight:400; }

@media (max-width:767px) {
 .pop-up { height:320svh; }
 .book-composition { padding:74px 5vw 84px; }
 .keepsake { width:min(88vw,52svh,440px); aspect-ratio:.72; transform:rotateX(var(--book-lean,9deg)) rotateZ(var(--book-tilt,-5deg)) scale(var(--book-scale,.9)); }
 .book-spread { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 112px; border-radius:7px; }
 .book-note { grid-column:1; grid-row:2; padding:12px 20px; border-radius:0 0 7px 7px; background:linear-gradient(#e8d8c5,#fff8ed 5%,#fff6e9); }
 .book-note::before { inset:8px; }
 .book-note h2 { font-size:min(9vw,4.8svh,38px); }
 .paper-star { left:26px; top:50%; transform:translateY(-50%); font-size:23px; }
 .paper-heart { left:auto; right:25px; top:50%; bottom:auto; transform:translateY(-50%) rotate(-12deg); font-size:24px; }
 .book-picture { grid-column:1; grid-row:1; padding:12px; border-radius:7px 7px 0 0; background:#fff9f0; }
 .book-art { padding:9px; }
 .book-cover { left:0; width:100%; border-radius:7px; transform-origin:50% 0; transform:rotateX(var(--cover-angle,0deg)); }
 .cover-age { width:58%; }
 .cover-name { font-size:11px; }
 .cover-star { font-size:25px; }
 .book-progress { bottom:32px; }
}
@media (max-height:620px) and (min-width:768px) {
 .keepsake { width:min(86vw,112svh,1060px); }
 .book-picture { padding:16px; }
}
@media (max-height:500px) and (min-aspect-ratio:1/1) {
 .book-composition { padding:54px 5vw 42px; }
 .keepsake { width:min(86vw,100svh,900px); aspect-ratio:1.72; transform:translateX(var(--book-shift,-25%)) rotateX(var(--book-lean,9deg)) rotateZ(var(--book-tilt,-5deg)) scale(var(--book-scale,.9)); }
 .book-spread { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
 .book-note { grid-column:1; grid-row:1; padding:15px; border-radius:6px 0 0 6px; background:linear-gradient(90deg,#fff9ef,#fff6e9 90%,#e4d1bb); }
 .book-note::before { inset:8px; }
 .book-note h2 { font-size:7svh; }
 .paper-star { top:12%; left:50%; right:auto; font-size:18px; transform:translateX(-50%); }
 .paper-heart { top:auto; bottom:12%; left:50%; right:auto; font-size:18px; transform:translateX(-50%); }
 .book-picture { grid-column:2; grid-row:1; padding:10px; }
 .book-art { padding:6px; }
 .book-cover { left:50%; width:50%; transform-origin:0 50%; transform:rotateY(var(--cover-angle,0deg)); }
 .cover-age { width:52%; margin:0; }
 .cover-name,.cover-date { font-size:7px; }
 .cover-star { bottom:10%; font-size:14px; }
 .book-cover::before { inset:10px; outline-offset:3px; }
 .book-progress { bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
 .memory-space { filter:none!important; transform:none!important; opacity:1!important; }
 .gallery-stage::after { opacity:0!important; }
 .hero,.pop-up { height:auto; }
 .age-stage { opacity:.18!important; transform:scale(.9)!important; }
 .age-digit { transform:none!important; opacity:1!important; }
 .birthday-composition { min-height:100svh; }
 .portrait-reveal { height:auto!important; width:min(100%,43svh,440px)!important; }
 .portrait-reveal img { height:auto!important; }
 .birthday-intro,.portrait-reveal { opacity:1!important; transform:none!important; }
 .portrait-reveal { clip-path:none!important; }
 .title-line { transform:none!important; }
 .paper-star,.paper-heart,.book-cover,.book-progress { display:none; }
 .book-composition { height:auto; padding:88px 6vw; }
 .keepsake { width:min(88vw,1000px); aspect-ratio:auto; transform:none!important; }
 .book-spread { position:relative; opacity:1!important; grid-template-columns:1fr; grid-template-rows:auto auto; }
 .book-note { grid-column:1; grid-row:1; padding:55px 24px; background:#fff9ef; }
 .book-note h2 { font-size:clamp(30px,5vw,58px); }
 .book-picture { grid-column:1; grid-row:2; padding:20px; }
 .illustration-window { height:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; perspective:none; }
 .book-leaf { position:relative; transform:none!important; opacity:1!important; order:1; box-shadow:none; }
 .book-art { position:relative; padding:0; }
 .book-art img { height:auto; transform:none!important; }
 .art-shin { order:2; }
}
@media (prefers-reduced-motion:reduce) and (max-width:767px) {
 .illustration-window { grid-template-columns:1fr; }
}

/* The same transparent numerals carry through to the candle interaction. */
.candle b { font-size:0; color:transparent; -webkit-text-stroke:0; text-shadow:none; background:url('assets/glass-22.webp') 0 0 / 200% 100% no-repeat; }
.candle:nth-child(2) b { background-position:100% 0; }
.candle .wick { display:none; }
.candle .flame { top:auto; bottom:86.3%; left:52.6%; }
.candle:nth-child(2) .flame { left:46.6%; }

@media (max-width:767px) { .masthead .edition { font-size:8px; letter-spacing:.04em; } }