@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Great+Vibes&family=Jost:wght@300;400;500;600;700&display=swap');
:root{--paper:#fbf3f3;--wine:#58182b;--ink:#5e4446;--gold:#ad8a60;--floral:url('assets/floral-paper.png')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#271018;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-size:18px}body.sealed{overflow:hidden}main{max-width:480px;margin:auto;background:var(--paper);overflow:clip;box-shadow:0 0 100px #11050a80}a{color:inherit}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}p{line-height:1.65;margin:0 0 22px}h1,h2,h3{font-weight:400;margin:0}.script{font-family:'Great Vibes','Cormorant Garamond',cursive;font-weight:400}.eyebrow{font:8px/1.6 'Jost',sans-serif;letter-spacing:2px;color:#a89489}.ornament{color:var(--gold);font-size:19px;margin:24px 0}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;border-bottom:1px solid #cbb3a780;font:11px/1.7 'Cormorant Garamond',serif;color:#8b6c67;margin:18px auto 0;padding:4px 10px;cursor:pointer}.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid #d5c2b3;color:#8d7867;padding:12px 24px;font:8px/1.5 'Jost',sans-serif;letter-spacing:1.8px;text-decoration:none;transition:all .3s ease}.outline-button:hover{background:#f1e5e1;border-color:#caa67e;color:#674326}.btn-arrow{display:inline-block;vertical-align:middle;flex-shrink:0;transition:transform .3s ease}.outline-button:hover .btn-arrow,.text-button:hover .btn-arrow,.skip:hover .btn-arrow{transform:translate(2px,-2px)}.hero{height:100svh;min-height:650px;max-height:980px;position:relative;isolation:isolate}.hero-art{position:absolute;inset:0;background:url('assets/palace.png') center center/100% 100% no-repeat;z-index:-1}.hero-copy{position:absolute;top:22%;left:11%;right:11%;text-align:center;text-shadow:0 1px 12px #f4d5cb}.blessing{font-style:italic;font-size:clamp(16px,4.3vw,21px);line-height:1.65;opacity:0;transform:translateY(16px);transition:opacity 1.8s,transform 1.8s}.hero h1{font-size:clamp(36px,9vw,46px);white-space:nowrap;margin:24px -7% 14px;color:#632f38;opacity:0;transform:translateY(15px);transition:opacity 1.8s .8s,transform 1.8s .8s}.hero h1 span{font-size:.62em;font-style:italic}.hero-promise{font-size:15px;font-style:italic;opacity:0;transition:opacity 2s 1.6s}.entered .blessing,.entered .hero h1{opacity:1;transform:none}.entered .hero-promise{opacity:1}.hero-scroll{position:absolute;bottom:12px;left:calc(50% - 15px);text-decoration:none;font-size:30px;color:#754c4b;animation:breathe 2s infinite}.date-section{text-align:center;padding:55px 27px 30px}.date-section h2{font-size:42px;margin:16px -10px 12px}.date-section>p:not(.eyebrow):not(.scratch-hint):not(.date-caption){font-size:18px}.scratch-hint{font-size:11px;color:#9d8580;margin:27px 0 22px}.scratch-cards{display:flex;gap:11px;justify-content:center}.scratch-card{position:relative;width:96px;height:125px;display:flex;align-items:center;justify-content:center;border:1px solid #d5bcb9}.date-number{font-size:30px}.date-month{font-size:21px}.scratch-card canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .8s}.scratch-card.revealed canvas{opacity:0;pointer-events:none}.date-caption{font-size:13px;color:#967d75;margin-top:25px}.countdown-block{margin:52px auto 25px;padding:0 8px;text-align:center}.countdown-block>p{font-size:19px;font-style:italic;color:#6d434d;margin-bottom:22px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:10px}.countdown-block>p:before,.countdown-block>p:after{content:'✧';color:#bfa587;font-size:13px;font-style:normal}.countdown{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 auto}.countdown div{background:linear-gradient(155deg,#fffdfa 0%,#f5ebd8 100%);border:1px solid #d5bea8;border-radius:14px;padding:14px 6px 11px;min-width:68px;box-shadow:0 6px 16px #58182b12,inset 0 1px 0 #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.countdown div:hover{transform:translateY(-2px);box-shadow:0 10px 22px #58182b20,inset 0 1px 0 #fff;border-color:#caa67e}.countdown strong{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,8vw,38px);font-weight:700;line-height:1;color:#551324;display:block;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.5px;text-shadow:0 1px 1px #ffffffcc}.countdown span{font-family:'Jost',sans-serif;font-size:8px;font-weight:600;letter-spacing:2px;color:#8f6d5c;margin-top:8px;text-transform:uppercase;display:block}.countdown>b{font-size:22px;font-weight:600;color:#caa589;margin-top:-6px;line-height:1;text-shadow:0 1px 0 #fff}.letter-section{text-align:center;padding-top:55px}.letter-section>h2{font-size:48px}.letter-hint{font-size:11px;font-style:italic;color:#ac9690;margin-top:10px}.letter-track{height:1370px;position:relative}.letter-stage{height:790px;position:sticky;top:0;margin:0 25px;--lift:0px;perspective:1000px}.pocket-back{position:absolute;top:330px;left:0;right:0;height:340px;background:linear-gradient(#44101c55,#44101c55),var(--floral) center/cover;clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%)}.invitation-letter{position:absolute;top:365px;left:13px;right:13px;transform:translateY(var(--lift));padding:8px;background:var(--paper);border:1px solid #b89b8b;box-shadow:0 0 0 4px #fbf3f3,0 0 0 5px #ceb8ac;z-index:2;will-change:transform}.letter-inner{border:1px solid #d4bfb2;padding:22px 18px 20px}.letter-inner>.script{font-size:29px;line-height:1.2;margin:0 -10px 25px}.letter-inner>p{font-size:16px;line-height:1.65;margin-bottom:20px}.letter-inner .ornament{margin:15px}.letter-inner .with-love{font-style:italic;font-size:14px;margin:18px 0 8px}.person{font-size:29px;color:#6a3944}.letter-inner .qualification{font-size:12px;line-height:1.7;margin:5px 0 8px;color:#8d716e}.couple-amp{font-style:italic;font-size:26px;color:#ac8d77;display:block;margin:9px 0}.letter-inner .letter-closing{font-style:italic;font-size:13px;margin:0}.pocket-front{position:absolute;z-index:3;top:500px;left:0;right:0;height:255px;background:linear-gradient(#30051055,#30051066),var(--floral) center bottom/cover;clip-path:polygon(0 0,50% 32%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -4px 3px #36121c33);pointer-events:none}.lace{position:absolute;top:0;left:0;width:100%;height:111px}.pocket-monogram{position:absolute;top:139px;left:0;right:0;font-size:36px;color:#ebd5be}.pocket-monogram i{font-size:24px}.pocket-monogram small{display:block;font:6px 'Jost';letter-spacing:2px;margin-top:10px;color:#d1b5a4}.events{padding:55px 28px 25px;text-align:center}.events>h2{font-size:39px;margin-top:13px}.timeline{position:relative;margin:38px 0 30px}.timeline:before{content:'';position:absolute;width:1px;top:44px;bottom:20px;left:50%;background:#bfa587}.day-heading{position:relative;z-index:1;background:var(--paper);font-style:italic;font-size:17px;padding:18px 0;margin:15px 0}.event{display:grid;grid-template-columns:1fr 1fr;min-height:170px;position:relative}.event-left>div{padding-right:24px;text-align:right}.event-right>div{grid-column:2;padding-left:24px;text-align:left}.event-dot{position:absolute;left:calc(50% - 9px);top:2px;background:var(--paper);width:18px;color:#a28a6e;font-size:20px}.event time{font-size:27px;color:#9b7d60}.event time small{font-size:12px}.event h3{font-size:25px;line-height:1.1;margin:8px 0 10px}.event p{font-size:13px;line-height:1.6;color:#a38a82}.event-note{font-size:11px;color:#9c8880;font-style:italic}.venue{padding:30px 28px 55px;text-align:center}.venue-frame{border:1px solid #c6afa0;border-radius:50% 50% 2px 2px;padding:65px 24px 40px;outline:1px solid #dfcec7;outline-offset:6px}.venue-frame h2{font-size:32px;line-height:1.1;margin:20px 0 10px}.venue-frame>p{font-size:17px}.venue-frame .venue-kind{font-style:italic;font-size:14px;margin-top:-15px}.venue-frame .ornament{margin:15px 0}.venue-frame .outline-button{margin-top:5px}footer{text-align:center;padding:25px 22px 60px}footer h2{font-size:44px;margin:10px 0 40px}footer p{font-size:17px;margin-bottom:29px}footer .footer-names{font-size:26px;color:#68414a}.footer-monogram{font-size:54px;letter-spacing:6px;color:#b09273;margin:34px 0 24px}.footer-monogram i{font-size:38px}.footer-date{font:8px 'Jost';letter-spacing:2px}.music-button{position:fixed;bottom:22px;right:max(18px,calc((100vw - 480px)/2 + 18px));z-index:30;width:43px;height:43px;border:1px solid #ba83827a;border-radius:50%;background:#60152ce8;box-shadow:0 3px 12px #300b2225;align-items:center;justify-content:center;gap:3px}.music-button:not([hidden]){display:flex}.music-button span{width:2px;height:8px;background:#d6b0a3;border-radius:2px}.music-button span:nth-child(2),.music-button span:nth-child(4){height:15px}.music-button span:nth-child(3){height:21px}.music-button.playing span{animation:equalizer 1s ease-in-out infinite alternate}.music-button.playing span:nth-child(2){animation-delay:.3s}.music-button.playing span:nth-child(3){animation-delay:.6s}.music-button.playing span:nth-child(4){animation-delay:.2s}.opening{position:fixed;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);z-index:50;perspective:1600px;overflow:hidden;background:#471022;transition:opacity 1s}.opening[hidden]{display:none}.envelope-base{position:absolute;inset:0;background:linear-gradient(#42102155,#42102155),var(--floral) center/cover;transition:opacity 1s}.cream-liner{position:absolute;inset:1%;background:#f4e7df;clip-path:polygon(0 0,100% 0,100% 16%,50% 52%,0 16%)}.panel{position:absolute;inset:0;background-image:linear-gradient(#30091544,#30091544),var(--floral);background-size:100% 100%;will-change:transform;transition:transform 2s cubic-bezier(.5,0,.2,1);backface-visibility:hidden}.panel-left{clip-path:polygon(0 0,52% 53%,0 100%);transform-origin:left;filter:brightness(.88);z-index:2}.panel-right{clip-path:polygon(100% 0,48% 53%,100% 100%);transform-origin:right;filter:brightness(.78);z-index:2}.panel-bottom{clip-path:polygon(0 100%,50% 51%,100% 100%);transform-origin:bottom;z-index:3;filter:brightness(.88)}.panel-top{clip-path:polygon(0 0,100% 0,100% 15%,50% 52%,0 15%);transform-origin:top;z-index:4;filter:drop-shadow(0 7px 6px #19050e);background-position:top;transition:transform 1.8s cubic-bezier(.4,0,.25,1)}.wax{position:absolute;z-index:6;left:calc(50% - 47px);top:calc(52% - 47px);width:94px;height:94px;padding:9px;border:0;border-radius:46% 53% 44% 49%/48% 43% 56% 48%;background:radial-gradient(ellipse at 24% 10%,#e17882 0,#9f163d 20%,#6c102c 47%,#a9354e 75%,#5c1025 95%);box-shadow:2px 7px 8px #22031199,inset 1px 2px 2px #ef98a4,inset -3px -4px 4px #390616;transition:transform .7s,opacity .7s}.wax>span{border:2px solid #c48d58;box-shadow:0 0 0 3px #620d2a,0 0 0 4px #b15660;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;color:#ecd3a4;font-size:29px;gap:4px;text-shadow:0 1px 1px #240911}.wax i{font-size:18px}.wax:hover{transform:scale(1.04)}.seal-hint{position:absolute;z-index:5;top:calc(52% + 60px);left:0;right:0;text-align:center;font-size:13px;font-style:italic;color:#e2bca9;text-shadow:0 2px 5px #000;transition:opacity .3s}.skip{position:absolute;bottom:26px;right:24px;z-index:7;background:#692036d9;border:1px solid #b97f86;color:#edc6c1;padding:8px 16px;border-radius:30px;font-size:12px;letter-spacing:1px;display:inline-flex;align-items:center;gap:6px}.opening.break-seal .wax{transform:scale(1.3) rotate(-18deg);opacity:0}.opening.break-seal .seal-hint{opacity:0}.opening.unfold .panel-top{transform:rotateX(165deg)}.opening.spread .panel-left{transform:rotateY(-130deg)}.opening.spread .panel-right{transform:rotateY(130deg)}.opening.spread .panel-bottom{transform:rotateX(-130deg)}.opening.spread .cream-liner,.opening.spread .envelope-base{opacity:0;transition:opacity 1s}.opening.spread{background:transparent}.opening.vanish{opacity:0;pointer-events:none}.fade-in{opacity:0;transform:translateY(18px);transition:opacity 1.1s,transform 1.1s}.fade-in.visible{opacity:1;transform:none}@keyframes equalizer{to{transform:scaleY(.35)}}@keyframes breathe{50%{transform:translateY(6px);opacity:.5}}@media(min-width:650px){body{background:linear-gradient(#210710d9,#210710e8),var(--floral) center/500px fixed}.hero{height:850px}.hero h1{font-size:46px}}@media(max-width:360px){.hero h1{font-size:34px}.hero-copy{left:10%;right:10%}.blessing{font-size:16px}.scratch-card{width:86px;height:115px}.letter-stage{margin:0 19px}.letter-inner{padding:20px 14px}.letter-inner>p{font-size:15px}.person{font-size:26px}.date-section{padding-inline:20px}.countdown{gap:7px}.countdown div{min-width:58px;padding:10px 4px 8px;border-radius:10px}.countdown strong{font-size:28px}.countdown span{font-size:7px;letter-spacing:1.5px}.countdown>b{font-size:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.fade-in{opacity:1;transform:none}.letter-track{height:auto;padding:45px 0}.letter-stage{height:auto;position:relative}.pocket-back,.pocket-front{display:none}.invitation-letter{position:relative;top:auto;left:auto;right:auto;transform:none!important;margin:10px}.hero h1,.hero-promise,.blessing{opacity:1;transform:none}}
/* Envelope folds and the scroll-revealed letter stay within their paper frame. */
.panel-left{filter:brightness(.7)}.panel-right{filter:brightness(.6)}.panel-top{filter:brightness(1.06)}.panel-top:after{content:'';position:absolute;inset:0;background:#240610;clip-path:polygon(0 14.3%,50% 51.3%,100% 14.3%,100% 15%,50% 52%,0 15%)}
.letter-stage{overflow:hidden}.eyebrow{color:#8b736e}.scratch-hint,.date-caption,.letter-hint{color:#896d68}.text-button{color:#76554f}.event-note{color:#806b64}
@media(prefers-reduced-motion:reduce){.letter-stage{overflow:visible}}
.letter-stage{clip-path:inset(0 0 35px 0)}.letter-inner>.script{font-size:25px}
@media(prefers-reduced-motion:reduce){.letter-stage{clip-path:none}}
/* The seal is attached to the hinged flap, so both share one 3D motion. */
.opening{background:transparent;perspective:1800px;transition:opacity .4s}
.flap-hinge{position:absolute;inset:0;z-index:6;transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.35s cubic-bezier(.42,0,.2,1);pointer-events:none}
.flap-hinge .panel-top{pointer-events:none;transform:none!important;transition:none;backface-visibility:hidden}
.flap-hinge .wax{pointer-events:auto;backface-visibility:hidden;transform:translateZ(3px);transition:box-shadow .18s;opacity:1!important;background:radial-gradient(ellipse at 24% 10%,#b85064 0,#8d1432 24%,#500b22 60%,#923348 82%,#3f0919 100%)}
.flap-hinge .wax:hover{transform:translateZ(3px)}
.opening.break-seal .wax{transform:translateZ(3px);opacity:1;box-shadow:2px 9px 10px #220311aa,inset 1px 2px 2px #ef98a4,inset -3px -4px 4px #390616}
.opening.unfold .flap-hinge{transform:rotateX(155deg)}
.opening .panel-left,.opening .panel-right{transition:transform 1.45s cubic-bezier(.55,0,.2,1)}
.opening .panel-bottom{transition:transform 1.35s cubic-bezier(.55,0,.2,1)}
.opening.spread .panel-left{transform:translateX(-105%)}
.opening.spread .panel-right{transform:translateX(105%)}
.opening.spread .panel-bottom{transform:none}
.opening.lower .panel-bottom{transform:translateY(105%)}
.opening.break-seal .skip{opacity:.75}
@media(prefers-reduced-motion:reduce){.flap-hinge{transition:none}}
/* Reset text immediately on replay; reveal it only after the paper opens. */
body.sealed .blessing,body.sealed .hero h1,body.sealed .hero-promise{opacity:0;transition:none}
/* Ceremony details and supplied illustrations remain side by side on phones. */
.events .event{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:252px;padding:12px 0 22px}
.events .event-left>div{grid-column:1;grid-row:1;padding:0 19px 0 0;text-align:right}
.events .event-dot{top:46%;transform:translateY(-50%)}
.event-art{grid-column:2;grid-row:1;margin:0;padding-left:17px;align-self:center}
.event-art img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;filter:drop-shadow(0 6px 14px #58182b14)}
.events .event p{margin-bottom:0;color:#876e68}
@media(max-width:360px){.events{padding-inline:20px}.events .event-left>div{padding-right:14px}.event-art{padding-left:12px}.events .event{min-height:224px}.events .event h3{font-size:23px}}
/* Alternate Sangeet and Wedding Muhurat across the centre timeline. */
.events .event-right>div{grid-column:2;grid-row:1;padding:0 0 0 19px;text-align:left}
.events .event-right .event-art{grid-column:1;padding:0 17px 0 0}
@media(max-width:360px){.events .event-right>div{padding-left:14px}.events .event-right .event-art{padding-right:12px}}
/* Styled for the royal watercolor couple monogram logo */
.wedding-logo{display:block;height:auto;object-fit:contain}
.flap-hinge .wax{width:146px;height:146px;left:calc(50% - 73px);top:calc(52% - 73px);padding:8px}
.wax>span{border-radius:50%;background:#f6ebd5;box-shadow:0 0 0 3px #620d2a,0 0 0 4px #b15660;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wax .wedding-logo{width:116px;height:auto;max-height:116px;object-fit:contain;filter:drop-shadow(0 2px 4px #3a081533)}
.seal-hint{top:calc(52% + 86px)}
.pocket-monogram{top:96px;text-align:center}
.pocket-monogram .wedding-logo{width:142px;height:auto;margin:0 auto;display:block;filter:drop-shadow(0 4px 10px #1a030c66)}
.pocket-monogram small{display:block;font:7px 'Jost';letter-spacing:2px;margin-top:8px;color:#f0ded3;text-shadow:0 1px 2px #20040c}
.footer-monogram{margin:28px auto 20px;text-align:center}
.footer-monogram .wedding-logo{width:230px;max-width:85%;height:auto;margin:auto;display:block;filter:drop-shadow(0 6px 18px #58182b12)}
.photo-button{display:block;width:100%;padding:0;border:0;background:none;line-height:0;cursor:zoom-in;position:relative}
.photo-button img{display:block;width:100%;height:auto}
.couple-intro{text-align:center;padding:40px 38px 10px}.couple-intro .eyebrow{margin-bottom:24px}
.portrait-frame{border:1px solid #b89c80;padding:7px;background:#fff9f4;box-shadow:0 10px 24px #62312612;overflow:hidden;transition:border-color .5s ease,box-shadow .5s ease}
.portrait-frame:hover{border-color:#caa67e;box-shadow:0 12px 28px #58182b20}
.portrait-frame img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.portrait-frame:hover img,.portrait-frame:focus img{transform:scale(1.025)}
.couple-intro>.script{font-size:34px;margin:25px -15px 10px}.couple-intro>.ornament{display:block;margin:20px}
.story-photo{max-width:280px;margin:32px auto 0;padding:6px 6px 0;border:1px solid #d2bdad;background:#fff9f4;overflow:hidden;border-radius:4px;box-shadow:0 8px 24px #58182b10;transition:border-color .5s ease,box-shadow .5s ease}
.story-photo:hover{border-color:#caa67e;box-shadow:0 12px 28px #58182b22}
.story-photo .photo-button img{transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.story-photo .photo-button:hover img,.story-photo .photo-button:focus img{transform:scale(1.02)}
.story-photo figcaption{text-align:center;font-style:italic;font-size:15px;line-height:1.5;padding:13px 8px 16px;color:#785750}
.couple-gallery{text-align:center;padding:30px 24px 10px}.couple-gallery h2{font-size:45px;margin:15px 0 18px}
.gallery-hint{font-size:15px;color:#886c66;line-height:1.7;margin-bottom:30px}
.photo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.photo-grid .photo-button{padding:4px;background:#fffaf6;border:1px solid #d9c8bd;box-shadow:0 3px 10px #5326370d;overflow:hidden;border-radius:2px;transition:border-color .5s ease,box-shadow .5s ease}
.photo-grid .photo-button:hover,.photo-grid .photo-button:focus,.photo-grid .photo-button.is-revealed{border-color:#caa67e;box-shadow:0 8px 22px #58182b20}
.photo-grid .photo-button img{filter:grayscale(100%) contrast(1.08) brightness(.97);transition:filter .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1);will-change:filter,transform}
.photo-grid .photo-button:hover img,.photo-grid .photo-button:focus img,.photo-grid .photo-button:active img,.photo-grid .photo-button.is-revealed img{filter:grayscale(0%) contrast(1) brightness(1);transform:scale(1.035)}
.photo-grid .photo-button::after{content:'⤢';position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:#2e1523b0;color:#fff2e0;font-size:12px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.75);transition:opacity .4s ease,transform .4s ease;pointer-events:none;backdrop-filter:blur(4px);border:1px solid #d9c3a566;line-height:1}
.photo-grid .photo-button:hover::after,.photo-grid .photo-button:focus::after,.photo-grid .photo-button.is-revealed::after{opacity:1;transform:scale(1)}
.photo-grid .photo-wide{grid-column:1/-1}
.gallery-caption{margin:27px 0 12px;font-size:17px}
#photo-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:54px 18px 30px;background:#1f1018f5;border:0;color:#fff5e7;overflow:hidden}
#photo-full{filter:none!important}
#photo-viewer::backdrop{background:#1f1018f5}
#photo-viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
#photo-full{max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;min-height:0}
#photo-caption{font:italic 17px/1.4 'Cormorant Garamond',serif;text-align:center;margin:0}
.photo-close{position:absolute;right:18px;top:12px;width:40px;height:40px;border:1px solid #bda688;border-radius:50%;background:#321727;color:#fff5e7;font:28px Georgia;cursor:pointer}
@media(min-width:650px){#photo-full{max-width:min(100%,1000px)}}

/* A gold-foil keepsake, with arched windows and a tactile reveal. */
.scratch-keepsake{position:relative;margin:30px -10px 0;padding:24px 12px 22px;border:1px solid #d9c3a5;border-radius:160px 160px 12px 12px / 35px 35px 12px 12px;background:radial-gradient(ellipse at top,#fff9e9,transparent 70%),#f7eee8;box-shadow:0 9px 25px #6c243309;isolation:isolate}
.scratch-flourish{display:block;color:#aa8244;font-size:20px;letter-spacing:5px}.scratch-keepsake .scratch-hint{font-size:15px;font-style:italic;margin:12px 0 24px;color:#775a48}
.scratch-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scratch-piece{min-width:0}.scratch-card{width:100%;height:auto;aspect-ratio: .69;border-radius:70px 70px 7px 7px;overflow:hidden;border:1px solid #b59050;background:linear-gradient(150deg,#fffdf5,#f3e3cc);box-shadow:0 5px 10px #77503412;transition:box-shadow .7s,transform .7s}
.scratch-card canvas{cursor:crosshair}.date-inside{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#652d3d}.date-bloom{font-size:24px;color:#b38c50}.date-number{font-size:clamp(29px,8vw,39px);line-height:1}.date-month{font-size:clamp(17px,4.8vw,23px);line-height:1}.date-detail{font:7px/1.5 'Jost',sans-serif;letter-spacing:1px;color:#9b7b56}.scratch-label{display:block;font:9px 'Jost',sans-serif;letter-spacing:2px;color:#815e47;margin-top:13px}.scratch-card.revealed{box-shadow:0 0 0 3px #d3b17426,0 7px 16px #77503415;transform:translateY(-3px)}
.scratch-instruction{font-size:13px;margin:25px 0 7px;color:#765345}#scratch-status{font-size:13px;line-height:1.6;color:#9c7b64;margin:0;min-height:42px}.scratch-keepsake #reveal{font-size:13px;margin:9px auto 0;padding:8px 10px}.scratch-keepsake.complete{border-color:#b59459}.scratch-keepsake.complete #scratch-status{color:#702e43;font-style:italic}.scratch-keepsake.complete .scratch-instruction{color:#9c7b64}
.scratch-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}.scratch-sparkles i{position:absolute;left:var(--x);top:62%;color:#b79853;font-style:normal;opacity:0;font-size:var(--size);animation:golden-bloom 1.8s ease-out var(--delay) both}@keyframes golden-bloom{15%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-210px) rotate(100deg)}}
.footer-family{display:block;font-size:18px;font-style:italic;color:#8d6e67;margin-top:10px;line-height:1.45;letter-spacing:.3px}
.letter-closing .family-note{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-style:normal;color:#6b3f49;margin:6px 0 10px;line-height:1.4;font-weight:600;letter-spacing:.5px}