/* Mobile controls stay separate from the decorative invitation styles. */
.mobile-actions{display:none}
#directions-dialog{color:var(--ink);background:var(--paper);border:1px solid #bca16c;border-radius:20px;padding:26px;width:min(440px,calc(100% - 28px));max-height:85svh;overflow:auto;box-shadow:0 24px 80px #10293755}
#directions-dialog::backdrop{background:#091e2bb8;backdrop-filter:blur(4px)}
.directions-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.directions-heading .kicker{margin-bottom:7px}.directions-heading h2{font-size:40px}.close-directions{border:1px solid #c5b48f;border-radius:50%;width:44px;height:44px;flex-shrink:0;color:var(--ink);background:transparent;font-size:29px;line-height:1}
.directions-venue{margin-top:24px;padding-top:23px;border-top:1px solid #cfc2a6}.directions-occasion{font-size:13px;line-height:1.7;color:#80612f}.directions-venue h3{font-size:29px;line-height:1.15;margin:10px 0}.directions-venue>p:not(.directions-occasion){font-size:14px;line-height:1.7;color:#536358}.directions-venue>a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:48px;margin-top:16px;padding:10px 15px;background:#ddc18b;border:1px solid #b79a61;font-size:14px;font-weight:500}
body.directions-open{overflow:hidden}
@media(max-width:600px){
 html{scroll-padding-top:22px;scroll-padding-bottom:90px}
 body{padding-bottom:calc(72px + 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}
 .mobile-actions{display:flex;position:fixed;inset:auto 0 0;z-index:20;gap:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:#102937f5;border-top:1px solid #d9b97966;box-shadow:0 -6px 22px #10293718;backdrop-filter:blur(14px)}
 .mobile-actions>a,.mobile-actions>button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;width:50%;border:0;border-radius:0;background:transparent;color:#f9efda;font-family:var(--sans);font-size:15px;font-weight:500;padding:10px}
 .mobile-actions>button{border-left:1px solid #d9b9794d;color:#e2c48c}
 .mobile-actions svg{height:20px;width:20px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0}
 .gate-open .mobile-actions{visibility:hidden;pointer-events:none}
 .toast{bottom:calc(85px + env(safe-area-inset-bottom,0px))}
 #directions-dialog{margin:auto auto 10px;border-radius:22px 22px 12px 12px;padding:24px;max-height:calc(90svh - env(safe-area-inset-bottom,0px));scroll-padding:20px}
}
@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}.mobile-actions{padding-left:10px;padding-right:10px}}
.hero-portrait-frame picture,.portrait-mat picture{display:block;border-radius:inherit;overflow:hidden}
@media(max-width:600px){.mobile-actions>a:first-child{display:flex}}
/* 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 clears the mobile navigation and 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(88px + env(safe-area-inset-bottom,0px))}.toast{bottom:calc(144px + 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}