/* Responsive invitation layouts. */
@media(max-width:600px){
 html{scroll-padding-top:22px;scroll-padding-bottom:82px}
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 header{height:70px;padding:0 23px}
 .hero{padding:98px 24px 42px;min-height:0;gap:0}
 .hero-inner{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;width:100%;order:1}
 .hero .ik{order:1;font-size:29px;margin-bottom:10px}
 .hero .blessing{order:2;font-size:19px;line-height:1.4;max-width:290px;margin:0 0 20px}
 .hero h1{order:3;font-size:clamp(49px,14vw,66px);line-height:.92;letter-spacing:-1.5px;width:100%;margin:0}
 .hero h1 .surname{font-size:21px;line-height:1.1;letter-spacing:1.7px;margin-top:7px}
 .hero h1 .ampersand{font-size:33px;line-height:.8;margin:12px 0}
 .hero-intro{order:4;font-size:14px;line-height:1.6;margin:21px 0 0;max-width:280px}
 .hero-date{order:5;font-size:16px;line-height:1.5;flex-direction:column;gap:1px;margin:19px 0 22px}
 .hero #open-invitation{order:6;min-height:52px;min-width:245px;font-size:16px;padding:12px 20px}
 .hero .hero-foot,.hero .scroll-cue{display:none}
 .hero-portrait{order:2;width:148px;max-width:148px;margin:32px auto 0}
 .hero-portrait img{height:188px;object-position:center 28%}
 .hero-frame{inset:82px 12px 19px;border-radius:46% 46% 0 0/17% 17% 0 0;border-color:#d9b97938}
 .hero-frame:after{display:none}.hero-frame>span{font-size:21px;bottom:-15px;padding:0 12px}
 .section{padding-top:52px;padding-bottom:52px}
 .invitation h2{font-size:43px}.invitation .ornament{margin-bottom:20px}
 .invitation .punjabi{margin-bottom:23px}
 .couple-arch{margin:30px auto 25px;padding:40px 20px 29px;gap:16px}
 .couple h3{font-size:39px}.couple p{font-size:13px}
 .countdown{margin-top:25px;padding-top:14px}
 .celebrations .section-heading{margin-bottom:29px}.celebrations .section-heading>p{font-size:22px;margin-top:13px}
 .celebrations .event{padding:166px 23px 27px;margin-bottom:24px}
 .celebrations .event:before{height:166px}
 .celebrations .event:after{background:linear-gradient(180deg,transparent 0,transparent 90px,#fbf7eea6 142px,#fbf7ee 168px)}
 .event .date-block{margin-bottom:19px;padding-bottom:17px;gap:11px}
 .event .date-block b{font-size:43px}.event .date-block span:first-child{font-size:19px}.event .date-block span:last-child{font-size:12px}
 .event .kicker{margin-bottom:8px;line-height:1.6}
 .event h3{font-size:42px;margin-bottom:13px}
 .event-main>p:not(.kicker){font-size:14px;line-height:1.75}
 .event-place{margin:18px 0;padding-top:17px}
 .event-place h4{font-size:28px;line-height:1.2}
 .event-actions{gap:10px;margin-top:19px;display:grid;grid-template-columns:1fr}
 .event-actions .text-link,.event-actions .calendar{display:flex;justify-content:center;align-items:center;min-height:48px;padding:11px 12px;font-size:14px}
 .event-actions .calendar{border:1px solid #bca67b}
 .event .day-timeline{margin:20px 0 16px;padding:15px 0;justify-content:space-between;gap:12px}
 .wedding-lunch{margin-top:16px;padding:17px}
 .wedding-lunch .text-link{display:flex;align-items:center;justify-content:space-between;min-height:46px;margin-top:12px}
 .portraits{padding:52px 25px}.portrait-heading{margin-bottom:28px}.portrait-heading h2{font-size:46px}.portrait-gallery{gap:27px}.portrait-closing{font-size:24px;margin-top:29px}
 .blessing-band{padding:54px 30px}.blessing-band blockquote{font-size:29px}footer{padding:30px 24px;gap:20px}
 .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:49px}.hero .blessing{font-size:18px}.event .date-block{gap:8px}.event .date-block span:first-child{font-size:18px}.event .date-block b{font-size:40px}.event .date-block span:last-child{padding-left:9px}.celebrations .event{padding-left:20px;padding-right:20px}.event h3{font-size:39px}.event-place h4{font-size:26px}}
.hero-portrait-frame picture,.portrait-mat picture{display:block;border-radius:inherit;overflow:hidden}
/* Older browsers still receive the original decorative artwork. */
@media(max-width:600px){.hero-portrait{display:none}}
@supports not (background-image:image-set(url('engagement-rings.webp') type('image/webp'))){
 .celebrations .engagement:before{background-image:url('engagement-rings.jpg')}
 .celebrations .anand:before{background-image:url('anand-karaj-laavan.jpg')}
 .hero-art{background-image:linear-gradient(#10293718,#10293718),url('heritage-backdrop.jpg')}
 .blessing-band{background-image:linear-gradient(#102937e6,#102937e6),url('heritage-backdrop.jpg')}
}
/* Give ceremony and wedding-lunch locations the same clear treatment. */
.event .wedding-location{background:#fbf7eef5;border:1px solid #c7b58c88;padding:22px 24px;margin:22px 0;max-width:480px}
.event .wedding-location .location-label{font-size:14px;font-weight:600;color:#183342;margin:0 0 12px;line-height:1.5}
.event .wedding-location .event-time{font-size:14px;color:#80612f}
.event .wedding-location .location-map{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-top:18px;padding:10px 15px;background:#dfc48e;border:1px solid #b99a60;font-size:14px;color:#183342}
@media(max-width:600px){.event .wedding-location{padding:19px;margin:19px 0}.event .wedding-location .location-label{font-size:14px}.event .wedding-location .location-map{margin-top:15px}.event .wedding-location h4{font-size:27px}}

/* Matching typography connects the blessings and family invitation. */
.elder-blessings{max-width:760px;margin:0 auto 30px}
.invitation .elder-intro,.invitation .elders,.invitation .intro{font-family:var(--serif);font-size:25px;font-weight:400;font-style:normal;line-height:1.6;color:var(--ink);letter-spacing:normal;text-wrap:pretty}
.elder-blessings .elder-intro{margin-bottom:12px}
.invitation .intro{max-width:700px;margin:0 auto}
.invitation .intro strong{font-weight:600}
@media(max-width:600px){.elder-blessings{margin-bottom:26px}.invitation .elder-intro,.invitation .elders,.invitation .intro{font-size:22px;line-height:1.6}}

/* Let the blessing wrap naturally, with room between its lines. */
.blessing-band blockquote{max-width:920px;margin:30px auto;line-height:1.55;word-spacing:normal}
@media(max-width:600px){.blessing-band{padding:58px 36px}.blessing-band blockquote{font-size:29px;line-height:1.6;margin:28px auto 30px}.blessing-band>span{display:block;line-height:1.8}footer{justify-content:center;text-align:center}}

/* Preserve the complete supplied monogram and its original proportions. */
.footer-monogram{display:block;flex-shrink:0;width:112px;max-width:100%;line-height:0}
.footer-monogram img{display:block;width:100%;height:auto;border-radius:6px}
@media(max-width:600px){footer .footer-monogram{width:108px;margin:0 auto}footer>p{width:100%}}

/* Audio control respects device safe areas. */
.music-toggle[hidden]{display:none}
.music-toggle{position:fixed;right:22px;bottom:22px;z-index:21;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid #d9b979;border-radius:24px;background:#102937f5;color:#f9efda;font-size:13px;box-shadow:0 4px 18px #10293730}
.music-toggle>span:first-child{font-size:22px;line-height:1}
@media(max-width:600px){.music-toggle{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* The supplied monogram also serves as the header home link. */
.header-monogram{display:block;flex-shrink:0;width:52px;line-height:0}
.header-monogram img{display:block;width:100%;height:auto;border-radius:4px}
@media(max-width:600px){.header-monogram{width:44px}}

/* Center the remaining portrait after removing the evening photo. */
.portrait-gallery{grid-template-columns:minmax(0,1fr);max-width:420px;margin-left:auto;margin-right:auto}

/* Serve the supplied Edwardian Script ITC font on every device. */
@font-face{font-family:"Edwardian Script ITC";src:url("fonts/edwardian-script-itc.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.invitation-gate .gate-blessing{font-size:clamp(60px,12vw,80px);line-height:1.3;text-align:center;margin:0 auto 24px}
.gate-content #gate-title,.gate-content .gate-family{font-family:"Edwardian Script ITC","Snell Roundhand","Apple Chancery","URW Chancery L",cursive;font-weight:400;font-style:normal;letter-spacing:0;line-height:1.25}
.gate-content #gate-title{font-size:clamp(44px,9vw,76px);margin:0 0 40px;text-wrap:balance}
.gate-content .gate-family{font-size:clamp(36px,7vw,52px);color:var(--gold);margin:26px auto 0}
@media(max-height:650px){.invitation-gate .gate-blessing{font-size:54px;margin-bottom:16px}.gate-content #gate-title{font-size:42px;margin-bottom:28px}.gate-content .gate-family{font-size:34px;margin-top:20px}}

.invitation-gate .gate-content{min-width:0}
.gate-content #gate-title{overflow-wrap:break-word}

/* A miniature navy-and-gold invitation emerges from the paper envelope. */
.envelope .envelope-card{inset:10px 14px 0;align-items:center;justify-content:center;padding:25px 20px;background:radial-gradient(ellipse at top,#d9b97918,transparent 65%),#102937;color:#f8eddb;border:1px solid #d9b979;box-shadow:0 0 0 4px #f1e2bf,0 8px 24px #07151d40;overflow:hidden}
.envelope-card:before{content:"";position:absolute;inset:8px;border:1px solid #d9b97980;border-radius:45% 45% 0 0/28% 28% 0 0;pointer-events:none}
.envelope-card:after{content:"✧  ❧  ✧";position:absolute;bottom:12px;left:0;right:0;color:var(--gold);font-family:var(--serif);font-size:18px;letter-spacing:7px;text-align:center;pointer-events:none}
.envelope-card .slip-message{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:32px;line-height:1.15;text-align:center;text-shadow:0 1px 8px #0003}
.invitation-gate.unsealing .envelope-card{transform:translateY(-75%)}
.invitation-gate.unsealing #gate-title{opacity:0;transition:opacity .35s}
@media(max-width:600px){.envelope .envelope-card{inset:10px 12px 0;padding:20px 15px}.envelope-card .slip-message{font-size:26px}.envelope-card:after{font-size:15px;bottom:9px;letter-spacing:5px}}
@media(prefers-reduced-motion:reduce){.invitation-gate.unsealing #gate-title{transition:none}}

/* A quieter name-led wedding cover, with the details link lower down. */
.hero h1 .wedding-word{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:1px;margin:20px 0;font-style:italic}
.hero #open-invitation{margin-top:34px}
@media(max-width:600px){.hero .ik{margin-bottom:28px}.hero h1 .wedding-word{font-size:25px;margin:17px 0}.hero-date{margin-top:30px;margin-bottom:20px}.hero #open-invitation{margin-top:38px;margin-bottom:20px}.hero{padding-bottom:55px}}

/* A three-line date with the celebration days as the focal point. */
.hero .hero-date{flex-direction:column;gap:16px;letter-spacing:0}
.wedding-date{display:flex;flex-direction:column;align-items:center;gap:6px;color:#f8eddb;font-family:var(--serif);line-height:1.15}
.wedding-date .date-month{font-size:38px}
.wedding-date .date-days{font-size:64px;font-weight:500;white-space:nowrap}
.wedding-date .date-days>span{font-size:.7em;font-weight:400;color:var(--gold);padding:0 10px;vertical-align:5%}
.wedding-date .date-year{font-size:34px;letter-spacing:4px;padding-left:4px}
.hero-date .date-location{font-size:16px}
@media(max-width:600px){.wedding-date .date-month{font-size:32px}.wedding-date .date-days{font-size:54px}.wedding-date .date-year{font-size:30px}.hero-date .date-location{font-size:15px}}

/* Couple names and event titles share the requested calligraphic face. */
.hero h1,.couple h3,.event h3,.couple-names{font-family:"Edwardian Script ITC","Snell Roundhand","Apple Chancery","URW Chancery L",var(--serif);font-weight:400}
footer>p>.couple-names{font-size:inherit;line-height:inherit}

/* Allow the script capitals and flourishes room in name and event headings. */
.hero h1,.couple h3,.event h3{letter-spacing:0;line-height:1.15}
.hero h1 .surname,.couple h3 .surname{letter-spacing:0}

/* Keep the return shortcut opposite the music control. */
.back-to-top[hidden]{display:none}
.back-to-top{position:fixed;left:22px;bottom:22px;z-index:21;display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 14px;border:1px solid #d9b979;border-radius:24px;background:#102937f5;color:#f9efda;font-size:13px;box-shadow:0 4px 18px #10293730}
.back-to-top>span{font-size:21px;line-height:1}
@media(max-width:600px){.back-to-top{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* Reserve room for the floating controls on iOS too. */
@media(max-width:600px){
 :root{--mobile-controls-space:calc(82px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:var(--mobile-controls-space)}
 .hero{height:auto;max-height:none;overflow:visible;padding-bottom:calc(var(--mobile-controls-space) + 24px)}
 .hero-inner{flex-shrink:0}
 .hero #open-invitation{flex-shrink:0;width:min(100%,340px);min-width:0;min-height:56px;gap:14px;line-height:1.4;scroll-margin-bottom:var(--mobile-controls-space)}
 .hero #open-invitation>span{flex-shrink:0}
}

/* Compact reading control matches the music button on the opposite side. */
.scroll-down[hidden]{display:none}
.scroll-down{position:fixed;left:22px;bottom:22px;z-index:21;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid #d9b979;border-radius:24px;background:#102937f5;color:#f9efda;font-size:13px;box-shadow:0 4px 18px #10293730}
.scroll-down>span{font-size:22px;line-height:1}
.back-to-top{bottom:80px}
@media(max-width:600px){.scroll-down{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.back-to-top{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}

/* RSVP sits in the footer flow above the family monogram. */
footer{flex-direction:column;justify-content:center;text-align:center;padding-bottom:110px}
.footer-rsvp{width:100%;max-width:620px;margin:0 auto 10px;padding:8px 0 28px;border-bottom:1px solid #d9b97945}
.footer-rsvp h2{font-family:var(--serif);font-size:32px;font-style:normal;letter-spacing:3px;line-height:1.3;color:var(--gold);margin-bottom:22px}
.rsvp-contacts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rsvp-contact p{font-family:"Edwardian Script ITC",var(--serif);font-size:34px;line-height:1.3;color:var(--paper);margin:0 0 6px}
.rsvp-contact a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 8px;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--gold);text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
@media(max-width:600px){footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}.rsvp-contacts{grid-template-columns:1fr;gap:20px}.footer-rsvp{padding-bottom:24px}.rsvp-contact p{font-size:32px}}