/* V24: responsive scenes with overlapping artwork crossfades. */
main{width:100%;max-width:480px;container-type:inline-size}
@media(min-width:768px){main{width:min(100%,56.25svh);max-width:760px}}
.scene.hero,.portrait-scene{container-type:inline-size;aspect-ratio:9/16;height:auto!important;min-height:0!important;padding:0!important;isolation:isolate;overflow:hidden}
.portrait-scene{--side:8%;background:#f8eedf}
.portrait-scene.night{background:#062134}
.portrait-scene .portrait-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;mask-image:none;pointer-events:none}
.portrait-scene .scene-tint{display:none}
.portrait-scene .portrait-copy{position:absolute;top:calc(var(--reading-top,.18)*100%);left:var(--side);right:var(--side);width:auto!important;max-width:none;margin:0;padding:0!important;z-index:4;translate:none!important;text-align:center}
.portrait-copy p{max-width:none;margin:0}
.portrait-copy .eyebrow{font:500 2.3cqw/1.3 var(--sans);letter-spacing:.7px;margin:0 0 1.4cqw;text-wrap:balance}
.portrait-copy h2{font:500 7.7cqw/1.03 var(--serif);margin:0 0 1.3cqw;letter-spacing:-.3px;text-wrap:balance}
.portrait-copy .event-poem{font:italic 3.85cqw/1.2 var(--serif);margin:0 0 1.5cqw}
.portrait-copy .event-date{margin:0 auto 1.5cqw;gap:2.5cqw;justify-content:center}
.portrait-copy .event-date strong{font-size:8.2cqw;line-height:1;padding-right:2.5cqw}
.portrait-copy .event-date>span{font:2.3cqw/1.5 var(--sans);letter-spacing:.35px}
.portrait-copy .event-time{font:4.6cqw/1.15 var(--serif);margin:0 0 1.4cqw}
.portrait-copy .venue{font:4.6cqw/1.15 var(--serif);margin:0}
.portrait-copy .venue-sub{font:3.85cqw/1.15 var(--serif);margin:0 0 1.4cqw}
.portrait-copy .dress-code{font:2.3cqw/1.2 var(--sans);letter-spacing:.7px;margin:0 0 .8cqw}
.portrait-copy .dress-code>.editable-text{font:inherit;display:block;margin:0}
.portrait-copy .dress-code>span:last-child{display:block;font:italic 4.1cqw/1.15 var(--serif);letter-spacing:0;margin:0}
.portrait-copy .dress-code>span:last-child .editable-text{display:inline;font:inherit;margin:0}
.portrait-copy .text-link{font:500 2.5cqw/1.3 var(--sans);letter-spacing:.6px;min-height:8.2cqw;display:inline-flex;align-items:center;justify-content:center;padding:1cqw;border-bottom:1px solid currentColor}
.portrait-copy .wedding-actions{display:flex;justify-content:center;gap:3cqw;margin:1cqw 0 0}
.portrait-scene .portrait-stage{position:absolute;inset:0;z-index:2;height:100%!important;min-height:0!important;overflow:visible;pointer-events:none}
.portrait-stage:after,.portrait-stage:before{display:none!important}
.portrait-stage .couple-stage{left:50%;width:33%;max-width:none;bottom:10%;max-height:none!important;z-index:3;opacity:1;transform:translateX(-50%)}
.portrait-stage .couple{width:100%;height:auto;max-height:none;object-fit:contain;transform-origin:50% 97%}
#sangeet{--reading-top:.17}
#sangeet .portrait-stage .couple-stage{width:33%;bottom:8%}
#sangeet .couple{animation:none!important;transform:none!important}
#haldi{--reading-top:.12}
#haldi .portrait-stage .couple-stage{width:32%;bottom:11%}
#wedding{--reading-top:.18}
#wedding .portrait-stage .couple-stage{width:32%;bottom:12%}
.portrait-scene .chandelier{top:0;left:35.5%;width:29%;height:14%;z-index:2}
.portrait-scene .left-chandelier{left:4%;width:22%;height:11%}
.portrait-scene .right-chandelier{left:74%;width:22%;height:11%}
.portrait-scene .chandelier img{object-fit:contain;object-position:center top;width:100%;height:100%}
#wedding .wedding-canopy{top:2.5%;height:14%;z-index:2;overflow:visible}
#wedding .wedding-canopy .chandelier{top:0;left:39%;width:22%;height:100%}
#wedding .wedding-canopy .left-chandelier{left:9%;width:17%;height:83%}
#wedding .wedding-canopy .right-chandelier{left:74%;width:17%;height:83%}
/* Original full-scene sweeping spotlights, brighter but behind readable text. */
#sangeet .moving-lights{inset:0;width:100%;height:100%;opacity:.75;overflow:hidden;z-index:1;mask-image:none}
#sangeet .moving-lights i{top:0;left:5%;width:55%;height:110%;filter:blur(6px);background:linear-gradient(#ffe6b800,#f2cf8866 35%,#fae5bb18);animation:spotlight 9s ease-in-out infinite alternate}
#sangeet .moving-lights i:nth-child(2){left:40%;animation-delay:-5s;background:linear-gradient(#e3c3ff00,#c8abe866 35%,#e3ccff18)}
#sangeet .bokeh{inset:0;opacity:.65;overflow:hidden;z-index:2;pointer-events:none}
#sangeet .bokeh i{width:clamp(10px,4cqw,28px);height:clamp(10px,4cqw,28px);filter:blur(2px)}
#sangeet .floor-mist{bottom:5%;height:14%;opacity:.95;z-index:4}
#sangeet .floor-mist i{filter:blur(7px);animation:sangeet-mist-drift 5s ease-in-out infinite alternate;background:radial-gradient(ellipse at 22% 65%,#e2e5f2d9,transparent 38%),radial-gradient(ellipse at 68% 68%,#f3e9d8bb,transparent 40%)}
#sangeet .floor-mist i:nth-child(2){animation-delay:-2.5s;animation-duration:7s;opacity:.65}
#sangeet .floor-mist i:nth-child(3){animation-delay:-4s;animation-duration:9s;opacity:.45}
@keyframes sangeet-mist-drift{from{transform:translateX(-22%) scaleY(.75)}to{transform:translateX(22%) scaleY(1.1)}}
.portrait-scene .glints{top:65%;bottom:0;left:0;right:0;opacity:.5;z-index:3}
#welcome .petals,#haldi .haldi-petals{inset:0;opacity:1;z-index:5;pointer-events:none}
#welcome .petals i,#haldi .haldi-petals i{width:clamp(9px,2.8cqw,14px);height:clamp(14px,4cqw,20px);animation-name:portrait-petal-fall;animation-duration:var(--duration,9s)}
@keyframes portrait-petal-fall{0%{opacity:0;transform:translate(0,-30px) rotate(0)}8%{opacity:.9}50%{opacity:.85;transform:translate(5px,calc(var(--fall-distance,700px)*.5)) rotate(230deg)}92%{opacity:.85}100%{opacity:0;transform:translate(-5px,var(--fall-distance,700px)) rotate(510deg)}}
#haldi .water-motion,#rsvp .fountain-motion{inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.4}
#wedding .fireworks{top:0;left:0;width:100%;height:17%;z-index:1;pointer-events:none;opacity:1;mask-image:none}
#haldi:before,#wedding:before,#rsvp:before{display:none!important}
/* Sky-only blessings page: the full canvas is a reading area. */
#families{--reading-top:.055;--side:7%;background:#f2c5d4}
#families .family-copy p{font:4.35cqw/1.22 var(--serif);margin:0 0 1.4cqw}
#families .family-copy .eyebrow{font:500 2.3cqw/1.4 var(--sans);letter-spacing:.5px;margin-bottom:2cqw}
#families .family-copy h2{font:italic 7.8cqw/1.08 var(--serif);margin:0 0 2.4cqw}
#families .family-copy h3{font:500 7cqw/1.08 var(--serif);margin:1.8cqw 0}
#families .family-copy .grandparents{font:3.7cqw/1.3 var(--serif);margin-bottom:2cqw}
#families .family-copy .intro-line,#families .family-copy .small-italic{font:italic 4.35cqw/1.22 var(--serif)}
#families .family-copy .family-end{font:italic 4.35cqw/1.25 var(--serif);margin:2cqw 0}
#families .with{font:italic 4.6cqw/1.1 var(--serif);margin:.8cqw 0}
#families .fine-rule{margin:2cqw auto}
#families .countdown-section{padding:1.5cqw 0 0}
#families .countdown-section h2{font:italic 6.3cqw/1.1 var(--serif);margin:1.5cqw 0 2cqw}
#families .countdown{gap:3cqw}#families .countdown strong{font-size:7.2cqw}#families .countdown span{font-size:2.2cqw}
#rsvp{--reading-top:.15}
#rsvp .portrait-copy h2{font:italic 8.2cqw/1.08 var(--serif);margin:0 0 3cqw}
#rsvp .rsvp-label{font:2.5cqw/1.4 var(--sans);letter-spacing:1px;margin:0 0 2cqw}
#rsvp .hosts{font:5.2cqw/1.3 var(--serif);margin:0 0 2cqw}
#rsvp .fine-rule{margin:2cqw auto}
#rsvp .closing-message{font:italic 5cqw/1.25 var(--serif);margin:0 0 2cqw}
#rsvp .signature{font:7.2cqw/1.1 var(--serif);margin:0 0 2cqw}
#rsvp .location-line{font:2.5cqw/1.5 var(--sans);letter-spacing:.35px;margin:0 0 1.5cqw}
/* Opening recomposed with normal typography in the original open sky. */
#welcome .scene-bg{object-fit:cover;mask-image:none}
#welcome .hero-copy{position:absolute;top:6%;left:8%;right:8%;width:auto!important;max-width:none;padding:0!important;translate:none!important}
#welcome .blessing{font-size:3.8cqw;margin:0 0 3cqw}
#welcome .eyebrow{font:2.5cqw/1.4 var(--sans);letter-spacing:.8px}
#welcome h2{font:500 14.5cqw/.9 var(--serif);margin:4cqw 0;letter-spacing:-1px}
#welcome .ampersand{font-size:7cqw;margin:1cqw 0}
#welcome .hero-subtitle{font:italic 4.7cqw/1.3 var(--serif);margin:3cqw auto}
#welcome .fine-rule{margin:3cqw auto}
#welcome .date-line{font-size:4.8cqw;margin:2cqw 0}
#welcome .location-line{font:2.5cqw/1.4 var(--sans)}
#welcome .scroll-cue{font:2.3cqw var(--sans);margin:3cqw auto 0;min-height:7cqw}
#welcome .scroll-mark{height:5cqw;margin:2cqw auto 0}
.portrait-copy .editable-text{max-width:100%;overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){.moving-lights i,.bokeh i,.floor-mist i{animation:none!important}}
/* RSVP typography uses its own hierarchy and compact, deliberate spacing. */
#rsvp{--reading-top:.13}
#rsvp .portrait-copy .eyebrow{font-size:2.2cqw;margin-bottom:1.2cqw}
#rsvp .portrait-copy h2{font-size:7.2cqw;line-height:1.05;margin-bottom:1.5cqw}
#rsvp .rsvp-label{font-size:2.3cqw;margin-bottom:1.2cqw}
#rsvp .hosts{font-size:4.8cqw;line-height:1.15;margin-bottom:1.2cqw}
#rsvp .closing-message{font-size:4.6cqw;line-height:1.15;margin-bottom:1.2cqw}
#rsvp .signature{font-size:6.8cqw;margin-bottom:1.2cqw}
#rsvp .location-line{font-size:2.2cqw;line-height:1.2;margin-bottom:1.2cqw}
#rsvp .fine-rule{margin:1.2cqw auto}
/* Keep intended title lines intact; each phrase remains independently editable. */
.portrait-copy h2>.editable-text,.portrait-copy h3>.editable-text{white-space:nowrap}
.portrait-copy .text-link{display:inline-block;min-height:0;height:8.2cqw;line-height:8.2cqw;padding:0 1cqw;vertical-align:middle}
#sangeet .bokeh i{width:4cqw;height:4cqw;min-width:10px;min-height:10px;max-width:28px;max-height:28px}
#wedding{--reading-top:.17}
.portrait-copy .wedding-actions{gap:2cqw}
.portrait-copy .wedding-actions .text-link{flex:none;width:25cqw;text-align:center;white-space:nowrap}
#rsvp{--reading-top:.12}
#sangeet .lamp-glows{top:64%;bottom:0;height:36%}

/* The illustration sets section height; no empty viewport wrapper or snap pause. */
.scene.hero,.portrait-scene{height:auto!important;aspect-ratio:auto;display:block;margin:0;scroll-snap-align:none}
.scene-frame{position:relative;isolation:isolate;width:100%;aspect-ratio:9/16;min-height:100svh;overflow:hidden}
html{scroll-snap-type:none;scroll-padding-top:0}
#rsvp{--reading-top:.11}
#rsvp .portrait-copy .text-link{height:7cqw;line-height:7cqw}
#rsvp .closing-message{line-height:1.1}
#wedding .fireworks{z-index:1}

/* Responsive art: backgrounds cover; separate foreground PNGs stay uncropped.
   Short screens retain the minimum height needed for the complete composition. */
.scene.hero,.portrait-scene{--join-depth:clamp(22px,6cqw,34px);background:transparent}
#invitation>.scene{background:transparent}
.scene.hero+.portrait-scene,.portrait-scene+.portrait-scene{margin-top:calc(-1*var(--join-depth))}
.portrait-scene .portrait-background{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--join-depth),#000 100%)}
/* Fade decorative top layers with their backdrop, keeping copy fully opaque. */
.portrait-scene .chandelier{mask-image:linear-gradient(to bottom,transparent,#000 var(--join-depth))}
.scene-frame:before{display:none}
#rsvp .scene-frame:after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--join-depth);z-index:6;pointer-events:none;background:linear-gradient(transparent,#f8eedf)}
/* Small details have readable floors; the copy remains in normal text flow. */
.portrait-copy .eyebrow,.portrait-copy .event-date>span,.portrait-copy .dress-code,
#families .family-copy .eyebrow,#rsvp .rsvp-label{font-size:clamp(10px,2.3cqw,12px)}
.portrait-copy .text-link,#rsvp .location-line,#families .countdown span,
#rsvp .portrait-copy .eyebrow,#welcome .location-line,#welcome .eyebrow,
#welcome .scroll-cue{font-size:clamp(10px,2.5cqw,12px)}
.portrait-copy .event-poem,.portrait-copy .venue-sub{font-size:clamp(13px,3.85cqw,18px)}
.portrait-copy .event-time,.portrait-copy .venue{font-size:clamp(15px,4.6cqw,22px)}
#families .family-copy .grandparents{font-size:clamp(13px,3.7cqw,18px)}
#families .family-copy p,#families .family-copy .intro-line,#families .family-copy .small-italic,
#families .family-copy .family-end{font-size:clamp(14px,4.35cqw,21px)}
/* Keep the opening copy together inside the quiet sky at every height. */
#welcome .scroll-cue{position:static;display:block}
@media(max-width:359px){.portrait-copy{--side:7%}.portrait-copy .eyebrow{letter-spacing:.35px}.portrait-copy h2{margin-bottom:1cqw}.portrait-copy .event-poem{margin-bottom:1cqw}}
@media(prefers-reduced-motion:reduce){.scene-frame:before,.scene-frame:after{transition:none}}

/* V29: a hinged top flap opens before the intact envelope withdraws. */
#envelope{perspective:1600px}
#envelope .envelope-fold{display:none}
#envelope .envelope-flap{display:block;clip-path:polygon(0 0,100% 0,100% 33%,50% 54%,0 33%);transform-origin:50% 0;filter:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 2s cubic-bezier(.5,.02,.2,1) .35s}
#envelope.opening{bottom:auto;height:var(--opening-height)}
#envelope.opening .envelope-flap{transform:rotateX(-165deg)}
#envelope .envelope-back{transition:transform 2s cubic-bezier(.5,.02,.2,1) 1.2s,opacity .8s 2.2s}
#envelope.opening .envelope-back{transform:translateY(100%);opacity:0}
#welcome-title:focus{outline:none}
/* SVG and background share identical native coordinates and cover cropping. */
#rsvp .fountain-motion{aspect-ratio:auto;opacity:.65}

/* V26: seal and monogram centred on the intact envelope. */
#envelope .seal{top:50%;left:50%;padding:0;place-items:center}

/* V27: monogram fits and centres within the seal, independently of name edits. */
#envelope .seal-inner{padding:0;gap:2px;line-height:1;font-size:clamp(22px,6vw,27px);flex-shrink:0}
#envelope .seal-inner span{padding:0;line-height:1}
#envelope .seal-inner>.editable-text{font:inherit;flex:none}
#envelope .seal-inner>span:not(.editable-text){font:italic .65em/1 var(--serif);flex:none}

/* V28: measured clearance preserves saved wording positions on short screens. */
#envelope .seal{top:var(--seal-center,56%);width:var(--seal-size,85px);height:var(--seal-size,85px)}
#envelope .seal-inner{width:70%;height:70%;font-size:calc(var(--seal-size,85px)*.28);gap:1px}

/* Symmetric monogram columns keep the ampersand on the seal centre. */
#envelope .seal-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:center;gap:2px}
#envelope .seal-inner>.editable-text:first-child{justify-self:end}
#envelope .seal-inner>.editable-text:last-child{justify-self:start}
#envelope .seal-inner>span:not(.editable-text){justify-self:center}