:root{--wine:#690b1c;--wine2:#850d25;--gold:#c8872c;--gold2:#f3cf82;--cream:#fff4dc;--ink:#4d1b19;--muted:#805b4d;--serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;color:var(--ink);font-family:var(--serif);font-size:18px;background:#fff0d2 url('assets/temple-backdrop.webp') center top/100% auto fixed no-repeat;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:rgba(255,244,220,.74);z-index:-1;pointer-events:none}.topbar{height:82px;position:sticky;top:0;z-index:20;background:linear-gradient(110deg,#580818,#790d21 55%,#590817);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,68px);box-shadow:0 4px 16px #3b071d35;border-bottom:1px solid #e3b45d}.brand{display:flex;align-items:center;gap:12px;color:#ffdf8c;text-decoration:none;font-family:var(--script);font-size:clamp(27px,3vw,40px);white-space:nowrap}.brand-mark{font-family:var(--serif);font-size:35px;color:#f6ce69}.brand i{font-size:.8em}.desktop-nav{display:flex;gap:clamp(12px,2vw,28px)}.desktop-nav a{color:#ffedc7;text-decoration:none;font-size:17px}.desktop-nav a:hover{color:#ffd477}.header-actions{display:flex;gap:14px;align-items:center}.download{background:var(--cream);border:1px solid #e9bd66;color:var(--wine);padding:12px 18px;border-radius:40px;font:600 16px var(--serif);cursor:pointer}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;background:#ffdc87;margin:5px}.section{position:relative;padding:84px max(22px,calc((100% - 1050px)/2));}.hero{min-height:calc(100vh - 82px);display:grid;place-items:center;text-align:center;padding-top:60px;padding-bottom:70px;overflow:hidden}.hero-content{width:min(100%,780px);padding:28px 25px 34px;background:linear-gradient(180deg,#fff4dfd9,#fff1d9ed);border:1px solid #dca34d;border-radius:220px 220px 26px 26px;box-shadow:0 14px 55px #7e3c1820;position:relative}.hero-content:before,.hero-content:after{content:"✿";position:absolute;color:#bd7921;font-size:28px;top:42%;}.hero-content:before{left:16px}.hero-content:after{right:16px}.eyebrow,.kicker{font-size:12px;letter-spacing:.2em;font-weight:700;color:#a35b1c}.lotus{color:#c52b46;font-size:32px;margin:10px}.script{font-family:var(--script)}.small-script{font-size:28px;margin:5px}.hero h1{font:clamp(58px,9vw,100px)/.9 var(--script);color:var(--wine);margin:12px 0 8px}.hero h1 span{font-size:.7em;color:#bd832e}.ornament{width:min(240px,70%);margin:18px auto;color:#c8872c;display:flex;align-items:center;gap:10px}.ornament:before,.ornament:after{content:"";height:1px;background:linear-gradient(90deg,transparent,#c8872c);flex:1}.ornament:after{background:linear-gradient(90deg,#c8872c,transparent)}.hero-sub{font-size:clamp(20px,3vw,27px);margin:12px}.hero-couple{width:min(380px,80%);height:240px;margin:22px auto 14px;border:5px solid #f3d18b;outline:1px solid #b97822;border-radius:180px 180px 20px 20px;overflow:hidden;box-shadow:0 9px 20px #6c142b24}.hero-couple img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.countdown{display:flex;justify-content:center;gap:0;background:#fff0d3;border:1px solid #e6bd75;border-radius:14px;max-width:500px;margin:20px auto 12px;padding:12px 0}.countdown div{flex:1;display:flex;flex-direction:column;border-right:1px solid #e4c58c}.countdown div:last-child{border:0}.countdown strong{font-size:30px;color:var(--wine);line-height:1.1}.countdown span{font-size:14px}.wedding-date{letter-spacing:.13em;font-size:13px;font-weight:700;color:#9c5a20}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;text-decoration:none;border:0;cursor:pointer;font:600 19px var(--serif);padding:14px 28px;border-radius:40px;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #5c081d24}.primary{color:#fff3d4;background:linear-gradient(120deg,#580718,#8b0e26);border:1px solid #e8b951;box-shadow:0 4px 0 #a66a20}.scroll-hint{margin-top:24px;font-size:10px;letter-spacing:.22em;color:#9b6128}.scroll-hint span{display:block;font-size:22px}.content-section{max-width:1180px;margin:0 auto}.section-heading{text-align:center;margin:0 auto 40px;max-width:700px}.section-heading h2{font:clamp(48px,7vw,72px)/1.05 var(--script);color:var(--wine);margin:8px 0}.lead{font-size:21px;margin:12px 0;color:#684036}.couple-grid{display:grid;gap:28px}.person-card{display:grid;grid-template-columns:minmax(200px, .8fr) 1.2fr;align-items:center;gap:30px;background:#fff6e4e8;border:1px solid #d99a3c;border-radius:16px;padding:22px;box-shadow:0 8px 30px #7b42151a}.person-card.reverse{grid-template-columns:minmax(200px,.8fr) 1.2fr}.portrait-frame{height:330px;padding:7px;border:2px solid #c48a30;background:#f7d89a;outline:1px solid #e9c77c;overflow:hidden;border-radius:150px 150px 12px 12px}.portrait-frame img{height:100%;width:100%;object-fit:cover;object-position:center 30%;border-radius:140px 140px 8px 8px}.person-card h3,.event-info h3,.venue-card h3{font-size:34px;color:var(--wine);margin:5px 0}.person-card p:not(.kicker){font-size:20px;line-height:1.4}.signature{font:32px var(--script);color:#9e6324}.event-list{display:grid;gap:18px}.event-card{display:grid;grid-template-columns:220px 1fr 55px;gap:24px;align-items:center;padding:18px;background:#fff6e4e8;border:1px solid #dca14a;border-radius:14px;box-shadow:0 8px 25px #7b42151a}.event-card>img{width:100%;height:155px;object-fit:cover;border:3px solid #f0ce86;border-radius:8px}.event-tag{font-size:11px;letter-spacing:.18em;color:#a56824;font-weight:bold}.event-info h3{font-size:32px}.event-info p{margin:7px 0;font-size:19px}.event-time{color:#9a6c3c!important;font-size:16px!important}.event-symbol{font-size:38px;color:#bd842f;text-align:center}.note{text-align:center;color:#815d49;font-style:italic}.filter-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;flex-wrap:wrap}.filter-tabs button{padding:10px 20px;border:1px solid #c78a32;border-radius:30px;background:#fff4dd;color:var(--wine);font:600 16px var(--serif);cursor:pointer}.filter-tabs button.active{background:var(--wine);color:#fff0ce}.gallery-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:220px;gap:14px}.gallery-item{position:relative;border:3px solid #d7a24d;border-radius:12px;overflow:hidden;padding:0;cursor:zoom-in;background:#f4d9a4}.gallery-item.large{grid-row:span 2}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gallery-item:hover img{transform:scale(1.05)}.gallery-item span{position:absolute;bottom:0;left:0;right:0;padding:24px 14px 12px;color:white;text-align:left;background:linear-gradient(transparent,#340612c9);font-size:18px}.venue-card{display:flex;align-items:center;gap:22px;padding:24px;background:#fff6e4e8;border:1px solid #dca14a;border-radius:16px}.venue-icon{display:grid;place-items:center;width:70px;height:70px;flex:none;border-radius:50%;background:#f9dfac;color:var(--wine);font-size:44px}.venue-card h3{font-size:30px}.venue-card p{margin:5px 0;font-size:19px}.muted{color:#8e6d58}.venue-art{height:240px;overflow:hidden;border:2px solid #dba14a;border-radius:14px;margin:20px 0;position:relative}.venue-art img{width:100%;height:100%;object-fit:cover;object-position:center 80%}.disabled-link{margin:auto;display:flex;width:max-content}.blessing-form{max-width:700px;margin:0 auto;background:#fff6e4e8;border:1px solid #dca14a;border-radius:16px;padding:26px;display:grid;gap:10px}.blessing-form label{font-size:16px;font-weight:700;color:#81421e}.blessing-form input,.blessing-form textarea{width:100%;border:1px solid #dfc18b;border-radius:10px;background:#fffaf0;padding:13px 15px;color:var(--ink);font:18px var(--serif);outline-color:#b97822}.blessing-form .button{margin-top:10px}.form-note{font-size:13px;color:#8a6b51;margin:0}.blessing-list{max-width:700px;margin:24px auto 0;display:grid;gap:12px}.blessing-message{background:#fff7e7;border:1px solid #e0b765;border-radius:12px;padding:16px 20px;box-shadow:0 4px 15px #7b421511}.blessing-message strong{color:var(--wine);font-size:21px}.blessing-message p{margin:7px 0 0;white-space:pre-wrap}.blessing-message time{float:right;font-size:13px;color:#98714c}footer{text-align:center;padding:45px 20px 35px;background:linear-gradient(#fff0d9dd,#fff0d9f7),url('assets/temple-backdrop.webp') center 80%/cover;border-top:1px solid #d49b42;color:#70402c}.footer-flower{font-size:35px;color:#b97822}.footer .script,footer .script{font-size:42px;color:var(--wine);margin:8px}.footer-date{letter-spacing:.25em;color:#9e6324}.back-top{color:var(--wine);font-weight:bold;text-decoration:none}.lightbox{position:fixed;inset:0;background:#21030cf0;z-index:50;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-width:min(90vw,1000px);max-height:85vh;object-fit:contain;border:3px solid #e5bd69;border-radius:8px}.lightbox-close{position:absolute;top:18px;right:25px;color:#fff0ce;background:none;border:0;font-size:44px;cursor:pointer}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#5b0818;color:#fff0ce;padding:12px 20px;border-radius:30px;z-index:60;transition:.25s;box-shadow:0 6px 20px #28020d55}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.desktop-nav{display:none;position:absolute;top:81px;left:0;right:0;background:#680b1c;padding:18px 25px 24px;flex-direction:column;box-shadow:0 12px 15px #30000b33}.desktop-nav.open{display:flex}.desktop-nav a{padding:8px 0;border-bottom:1px solid #ffffff22}.menu-toggle{display:block}.download{padding:11px 14px}.section{padding:65px 22px}.hero-content{border-radius:180px 180px 22px 22px}.event-card{grid-template-columns:170px 1fr 35px;gap:16px}.event-card>img{height:140px}.gallery-grid{grid-auto-rows:190px}}
@media(max-width:600px){body{background-size:auto 100vh;background-attachment:scroll;background-position:center top}.topbar{height:70px;padding:0 13px}.brand{font-size:25px;gap:6px}.brand-mark{font-size:27px}.download{font-size:14px;padding:10px 12px}.download span{display:inline}.header-actions{gap:5px}.desktop-nav{top:69px}.section{padding:55px 15px}.hero{min-height:auto;padding-top:30px;padding-bottom:45px}.hero-content{padding:25px 14px 28px;border-radius:150px 150px 18px 18px}.hero-content:before,.hero-content:after{display:none}.eyebrow{font-size:9px;letter-spacing:.13em}.small-script{font-size:24px}.hero h1{font-size:65px}.hero-couple{height:210px;width:88%}.countdown{margin:17px auto 12px}.countdown strong{font-size:24px}.countdown span{font-size:12px}.wedding-date{font-size:11px}.button{font-size:17px;padding:13px 20px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:52px}.lead{font-size:18px}.person-card,.person-card.reverse{grid-template-columns:1fr;gap:15px;padding:16px}.portrait-frame{height:280px;width:min(100%,320px);margin:auto}.person-card h3{font-size:30px}.person-card p:not(.kicker){font-size:18px}.event-card{grid-template-columns:105px 1fr;gap:12px;padding:12px}.event-card>img{height:125px}.event-info h3{font-size:25px;line-height:1.05}.event-info p{font-size:16px}.event-time{font-size:14px!important}.event-symbol{display:none}.event-tag{font-size:9px}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:9px}.gallery-item.large{grid-row:span 1;grid-column:span 2;height:210px}.gallery-item span{font-size:15px;padding:20px 10px 8px}.venue-card{align-items:flex-start;padding:17px;gap:14px}.venue-icon{width:50px;height:50px;font-size:34px}.venue-card h3{font-size:25px}.venue-card p{font-size:17px}.venue-art{height:190px}.blessing-form{padding:18px}.footer .script,footer .script{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Hero redesign: generated temple artwork with editable HTML invitation text */
.topbar{height:82px;background:linear-gradient(110deg,#580818,#790d21 55%,#590817);border-bottom:1px solid #e9bd66}
.brand{font-size:clamp(27px,3.3vw,43px);gap:13px}.brand-mark{font-size:40px;color:#ffdc75}
.download{background:#ffe5a8;border-color:#f2ca72;border-radius:40px;padding:13px 22px;font-size:17px}
.hero.section{position:relative;isolation:isolate;max-width:none;margin:0;padding:0;min-height:clamp(1050px,145vw,1672px);background:#fff0cf url('assets/hero-temple-wedding.webp') center top/100% 100% no-repeat;overflow:hidden;display:block}
.hero.section:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,239,201,.1) 0%,rgba(255,239,201,0) 45%,rgba(255,239,201,.03) 100%);z-index:-1;pointer-events:none}
.hero-content{width:100%;max-width:none;min-height:inherit;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;position:relative;text-align:center}
.hero-content:before,.hero-content:after{display:none}
.hero-intro{position:absolute;top:4.5%;left:5%;right:5%;margin:0 auto;max-width:850px;color:#5d101d}
.hero-intro .small-script{font-size:clamp(25px,3.6vw,42px);margin:0 0 5px;color:#5d101d}
.hero h1{font:clamp(54px,8.2vw,100px)/.95 var(--script);color:#790d21;margin:5px 0 0;text-shadow:0 1px 0 #fff2d0}
.hero h1 span{font-size:.7em;color:#b87926}
.hero-intro .ornament{margin:10px auto 8px;color:#c8872c}.hero-intro .ornament:before,.hero-intro .ornament:after{background:linear-gradient(90deg,transparent,#c8872c)}
.hero-sub{font-size:clamp(18px,2.8vw,28px);line-height:1.25;margin:8px 0;color:#5a211c;text-shadow:0 1px 3px #fff0d6}
.hero-bottom{position:absolute;top:67%;left:4%;right:4%;display:flex;flex-direction:column;align-items:center;gap:13px}
.countdown{width:min(780px,100%);max-width:780px;margin:0 auto;background:rgba(255,244,218,.96);border:1px solid #e7bd6c;box-shadow:0 4px 14px #6b2b1730;border-radius:18px;padding:12px 0}
.countdown strong{font-size:clamp(24px,4vw,42px);font-weight:700}.countdown span{font-size:clamp(12px,1.7vw,18px)}
.hero-details{width:min(900px,100%);display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;background:rgba(255,244,218,.94);border:1px solid #dfad58;border-radius:15px;padding:14px 10px;box-shadow:0 4px 15px #6b2b1725}
.hero-details>div{display:flex;align-items:center;justify-content:center;gap:9px;padding:2px 10px;border-right:1px solid #dfbd7d;min-width:0}.hero-details>div:last-child{border-right:0}
.detail-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#790d21;color:#ffe2a0;font-size:25px}.hero-details b,.hero-details small{display:block}.hero-details b{font-size:clamp(14px,1.9vw,21px);line-height:1.1}.hero-details small{font-size:clamp(12px,1.5vw,17px);margin-top:4px}
.hero-cta{min-width: min(440px,90%);justify-content:center;border-radius:40px;padding:16px 28px;font-size:clamp(20px,2.6vw,28px);box-shadow:0 5px 0 #9b651e,0 8px 18px #5c081d30;border:2px solid #f2cb73}
.hero .scroll-hint{color:#6c321d;text-shadow:0 1px 4px #fff0d3;margin-top:0;font-size:10px;letter-spacing:.2em}
@media(min-width:1000px){.hero.section{min-height:1450px;background-size:auto 100%;background-position:center top}.hero-bottom{top:67%;left:10%;right:10%}.hero-intro{top:4%}}
@media(max-width:600px){.topbar{height:70px;padding:0 12px}.brand{font-size:clamp(22px,5.8vw,29px);gap:5px}.brand-mark{font-size:28px}.download{font-size:13px;padding:9px 10px}.download span{display:inline}.hero.section{min-height:178vw;min-height:max(1080px,178vw);background-size:100% 100%;background-position:center top}.hero-intro{top:4.8%;left:4%;right:4%}.hero-intro .small-script{font-size:clamp(22px,6vw,29px)}.hero h1{font-size:clamp(48px,11vw,68px);line-height:1}.hero-sub{font-size:clamp(17px,4.6vw,22px)}.hero-bottom{top:67%;left:3%;right:3%;gap:10px}.countdown{border-radius:12px;padding:10px 0}.countdown strong{font-size:clamp(22px,6.4vw,30px)}.countdown span{font-size:12px}.hero-details{padding:10px 3px;border-radius:11px}.hero-details>div{gap:5px;padding:2px 4px}.detail-icon{width:30px;height:30px;font-size:19px}.hero-details b{font-size:clamp(11px,3vw,14px)}.hero-details small{font-size:clamp(10px,2.7vw,12px)}.hero-cta{min-width:78%;padding:12px 18px;font-size:21px}.hero .scroll-hint{font-size:9px}}
@media print{.hero.section{min-height:1000px;print-color-adjust:exact;-webkit-print-color-adjust:exact}.hero-bottom{top:67%}.topbar,.scroll-hint{display:none!important}}

/* Unified visual system + animated invitation entry */
:root{--wine:#690b1c;--wine-deep:#4b0614;--wine-bright:#850d25;--gold:#c8872c;--gold-light:#f3cf82;--cream:#fff4dc;--cream-paper:#fff8e9;--ink:#4d1b19;--muted:#805b4d}
body{background-color:#fff0d2;background-image:linear-gradient(rgba(255,244,220,.78),rgba(255,244,220,.78)),url('assets/temple-sunset-footer.webp');background-size:cover;background-position:center;background-attachment:fixed}
body:before{background:rgba(255,246,225,.34)}
.site-shell{opacity:1;transition:opacity .65s ease;min-height:100vh}
.site-shell[ inert]{opacity:0;visibility:hidden;max-height:100vh;overflow:hidden}
.welcome-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;padding:clamp(16px,4vw,42px);background:#fff0d0 url('assets/hero-temple-wedding.webp') center 42%/cover no-repeat;transition:opacity .8s ease,visibility .8s ease}
.welcome-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(73,4,18,.12),rgba(255,241,208,.24) 30%,rgba(255,239,203,.16) 72%,rgba(73,4,18,.18));pointer-events:none}
.welcome-screen:after{content:"";position:absolute;inset:12px;border:1px solid #f3cf82;border-radius:22px;box-shadow:inset 0 0 0 5px #7a0b1c12,inset 0 0 0 7px #d9a44955;pointer-events:none}
.welcome-card{position:relative;z-index:1;width:min(650px,100%);padding:clamp(28px,5vw,58px) clamp(20px,5vw,56px);text-align:center;background:linear-gradient(150deg,rgba(255,249,232,.96),rgba(255,236,195,.93));border:1px solid #dca64f;border-radius:240px 240px 24px 24px;box-shadow:0 20px 60px #4a061b42,inset 0 0 0 5px #f7dfa7,inset 0 0 0 7px #d9a44966;animation:card-arrive 1s both}
.welcome-lotus{font-size:clamp(34px,6vw,54px);color:#bd2d46;text-shadow:0 2px 0 #f7cf7a;margin-bottom:5px}
.welcome-kicker{font-size:clamp(9px,1.5vw,12px);font-weight:700;letter-spacing:.2em;color:#9b5c21;margin:8px 0 20px}
.welcome-script{font:clamp(25px,4vw,36px) var(--script);color:#6c1a25;margin:0}
.welcome-card h1{font:clamp(49px,9vw,83px)/.98 var(--script);color:var(--wine);margin:10px 0 0;text-shadow:0 1px #fff}
.welcome-card h1 span{color:#bd832e;font-size:.8em}
.welcome-card .ornament{margin:17px auto 14px}
.welcome-subtitle{font-size:clamp(16px,2.5vw,22px);margin:0 auto 22px;max-width:420px;line-height:1.35}
.welcome-date{display:grid;gap:7px;padding:14px 8px;margin:0 auto 23px;max-width:410px;border-top:1px solid #dfb566;border-bottom:1px solid #dfb566;color:#7a1825;font-size:clamp(10px,1.7vw,13px);letter-spacing:.12em;font-weight:700}
.open-invitation{min-width:min(330px,100%);font-size:clamp(19px,2.7vw,24px);padding:15px 26px;border-radius:50px;box-shadow:0 5px 0 #9b651e,0 12px 22px #5c081d2a;animation:button-glow 2.6s ease-in-out infinite}
.welcome-note{font-size:14px;color:#8b6041;font-style:italic;margin:23px 0 0}
.welcome-floral{position:absolute;z-index:1;left:0;right:0;text-align:center;color:#9c172e;text-shadow:0 2px #f3cf82;font-size:clamp(28px,5vw,48px);letter-spacing:.16em;pointer-events:none}
.floral-top{top:3%}.welcome-bottom{position:absolute;z-index:1;bottom:3%;color:#fff1c9;text-shadow:0 2px 7px #4b0614;font-size:clamp(15px,2vw,22px);letter-spacing:.16em}
.welcome-screen.opening{animation:curtain-open .95s ease-in forwards;pointer-events:none}
.welcome-screen.opening .welcome-card{animation:invitation-open .9s cubic-bezier(.2,.75,.25,1) forwards}
.welcome-screen.dismissed{visibility:hidden;opacity:0;pointer-events:none}
@keyframes card-arrive{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes invitation-open{0%{transform:scale(1);opacity:1}45%{transform:scale(1.04) translateY(-10px);opacity:1}100%{transform:scale(.88) translateY(-35px);opacity:0}}
@keyframes curtain-open{0%{opacity:1;clip-path:inset(0 0 0 0)}70%{opacity:1}100%{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes button-glow{0%,100%{box-shadow:0 5px 0 #9b651e,0 8px 18px #5c081d25}50%{box-shadow:0 5px 0 #9b651e,0 8px 28px #c8872c70}}
/* Matching paper panels, gold rules, and wine typography across all sections */
.content-section{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.section-heading h2{color:var(--wine);text-shadow:0 1px #fff9e9}
.person-card,.event-card,.venue-card,.blessing-form,.blessing-message{background:linear-gradient(135deg,rgba(255,249,235,.97),rgba(255,239,207,.95));border:1px solid #dca14a;box-shadow:0 9px 26px #7b42151a,inset 0 0 0 3px rgba(245,218,161,.32)}
.person-card,.event-card,.venue-card,.blessing-form{border-radius:5px;outline:1px solid #eac77c;outline-offset:3px}
.event-card>img,.portrait-frame,.gallery-item,.venue-art{border-color:#c8872c;box-shadow:0 3px 12px #6b2b1717}
.event-tag,.sample-tag{display:inline-block;color:#9c5a20;font-size:11px;letter-spacing:.16em;font-weight:700}
.venue-list{display:grid;gap:18px;margin-bottom:22px}
.venue-card{align-items:flex-start;padding:clamp(18px,3vw,28px);gap:20px}
.venue-featured{background:linear-gradient(115deg,#fff4d9,#ffedc4)}
.venue-copy{min-width:0}.venue-copy h3{line-height:1.1;margin:8px 0}.venue-copy p{line-height:1.35}.sample-disclaimer{display:inline-block;margin:5px 0 0;padding:8px 13px;border:1px dashed #c8872c;border-radius:30px;color:#89521f;background:#fff5df;font-size:14px}
.sample-tag{padding:5px 9px;background:#f8e2b3;border:1px solid #e4bd6d;border-radius:20px;font-size:10px}
.venue-link{display:inline-block;margin-top:7px;color:#780d21;font-weight:700;text-decoration:none;border-bottom:1px solid #c8872c;padding-bottom:2px}.venue-link:hover{color:#a42136}
.venue-art{height:clamp(190px,30vw,320px);border-radius:5px}
footer{background:linear-gradient(rgba(255,241,213,.83),rgba(255,241,213,.95)),url('assets/temple-sunset-footer.webp') center 78%/cover}
@media(max-width:600px){.welcome-screen{background-position:center center;padding:20px}.welcome-screen:after{inset:7px;border-radius:15px}.welcome-card{padding:29px 19px 26px;border-radius:170px 170px 20px 20px}.welcome-kicker{letter-spacing:.13em;margin-bottom:16px}.welcome-date{font-size:10px;padding:12px 4px}.welcome-note{font-size:12px;margin-top:18px}.welcome-floral{top:2%;font-size:26px}.welcome-bottom{bottom:2%;font-size:14px}.venue-card{gap:13px}.venue-icon{width:48px;height:48px;font-size:30px}.venue-copy h3{font-size:25px}.venue-copy p{font-size:16px}.sample-disclaimer{font-size:12px;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.welcome-card,.open-invitation{animation:none!important}.welcome-screen,.site-shell{transition:none!important}}
@media print{.welcome-screen{display:none!important}.site-shell{opacity:1!important;visibility:visible!important;max-height:none!important;overflow:visible!important}}

/* FINAL RESPONSIVE ARTWORK FIX
   Keep the generated portrait artwork at its native 941:1672 ratio on every device.
   Any unused viewport area is filled with a coordinated ivory/gold background instead
   of stretching or cropping the artwork. */
.hero.section{
  width:min(100%, 941px);
  aspect-ratio:941 / 1672;
  min-height:0;
  height:auto;
  margin-inline:auto;
  padding:0;
  background-color:#f8e4bd;
  background-size:100% 100%;
  background-position:center top;
  background-repeat:no-repeat;
}
.hero-content{width:100%;height:100%;min-height:0}
.hero-intro{top:4.5%;left:5%;right:5%}
.hero-bottom{top:67%;left:4%;right:4%}
.welcome-screen{
  background-color:#f8e4bd;
  background-image:url('assets/hero-temple-wedding.webp');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:min(100vw, 56.28vh) auto;
}
@media(min-width:1000px){
  .hero.section{width:min(100%, 941px);aspect-ratio:941 / 1672;min-height:0;background-size:100% 100%}
  .hero-intro{top:4.5%}
  .hero-bottom{top:67%;left:4%;right:4%}
}
@media(max-width:600px){
  .hero.section{width:100%;aspect-ratio:941 / 1672;min-height:0;height:auto;background-size:100% 100%;background-position:center top}
  .hero-intro{top:4.8%;left:4%;right:4%}
  .hero-bottom{top:67%;left:3%;right:3%;gap:10px}
  .welcome-screen{background-size:min(100vw, 56.28vh) auto;background-position:center center}
}
@media(prefers-reduced-motion:reduce){.hero.section{scroll-behavior:auto}}

/* ONE CONTINUOUS WEDDING CANVAS
   The supplied blank invitation frame is fixed behind the whole scrolling site.
   The hero couple is a separate transparent layer so the background remains visible. */
html { scroll-padding-top: 86px; }
body {
  background: #f8e8c8 !important;
  isolation: isolate;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('assets/main-scroll-background.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100vh;
  opacity: 1;
}
.site-shell { position: relative; background: transparent; }
main { background: transparent; }
.content-section { background: transparent; }
.section-heading {
  padding: 18px clamp(14px, 3vw, 28px);
  border-radius: 18px;
  background: rgba(255, 247, 226, .86);
  border: 1px solid rgba(200, 135, 44, .55);
  box-shadow: 0 8px 28px rgba(94, 36, 15, .08);
}
.person-card, .event-card, .venue-card, .blessing-form, .blessing-message {
  backdrop-filter: blur(3px);
}
footer {
  background: rgba(255, 242, 213, .84) !important;
  backdrop-filter: blur(3px);
}
.hero.section {
  width: 100%;
  max-width: 1100px;
  height: max(1000px, 100svh);
  min-height: 1000px;
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  background: transparent !important;
  isolation: isolate;
}
.hero-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-intro {
  position: absolute;
  top: 3.5%;
  left: 5%;
  right: 5%;
  z-index: 5;
  padding: 10px 12px 12px;
  border-radius: 20px;
  background: rgba(255, 247, 226, .72);
  backdrop-filter: blur(2px);
}
.hero-intro h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  font-size: clamp(32px, 5vw, 58px);
  color: #641023;
  text-shadow: 0 1px 0 #fff8e8;
}
.hero-intro h1 span { color: #a66a20; }
.hero-couple-cutout {
  position: absolute;
  z-index: 2;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: min(82%, 690px);
  height: 43%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 12px rgba(91, 32, 16, .15));
  pointer-events: none;
}
.curtain-stage {
  z-index: 6;
  top: 61%;
  left: 13%;
  right: 13%;
  height: clamp(190px, 22vw, 250px);
}
.hero-bottom {
  z-index: 4;
  top: 82%;
  left: 6%;
  right: 6%;
  gap: 12px;
}
.hero-details {
  background: rgba(255, 246, 224, .94);
  border: 1px solid #d7a24d;
  box-shadow: 0 5px 18px rgba(91, 27, 24, .13);
}
.hero-cta { min-width: min(420px, 90%); }
.welcome-screen {
  background-color: #f8e8c8;
  background-image: url('assets/main-scroll-background.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100vh;
}
.welcome-screen:before {
  background: rgba(255, 244, 220, .14);
}
@media (min-width: 1000px) {
  /* Laptop/desktop: let the invitation artwork fill the viewport width. Keep its proportions with cover; the coordinated ivory background fills any remaining area. */
  body:before { background-size: cover; background-position: center center; }
  .welcome-screen { background-size: cover; background-position: center center; }
  .hero.section { width: 100%; max-width: none; height: max(900px, 100svh); min-height: max(900px, 100svh); }
  .hero-intro { top: 3.5%; left: 12%; right: 12%; }
  .hero-couple-cutout { top: 20%; width: min(70%, 690px); height: 44%; }
  .curtain-stage { top: 61%; left: 18%; right: 18%; }
  .hero-bottom { top: 82%; left: 10%; right: 10%; }
}
@media (max-width: 700px) {
  body:before { background-size: auto 100svh; background-position: center center; }
  .hero.section { height: 1080px; min-height: 1080px; }
  .hero-intro { top: 2.5%; left: 4%; right: 4%; padding: 8px 8px 10px; }
  .hero-intro .small-script { font-size: clamp(15px, 4vw, 22px); }
  .hero-intro h1 { font-size: clamp(29px, 7.2vw, 42px); margin: 5px 0; }
  .hero-sub { font-size: clamp(14px, 3.8vw, 18px); }
  .hero-couple-cutout { top: 18%; width: 98%; height: 43%; }
  .curtain-stage { top: 57%; left: 5%; right: 5%; height: 205px; }
  .hero-bottom { top: 79%; left: 4%; right: 4%; gap: 8px; }
  .hero-details { padding: 8px 4px; }
  .hero-details>div { gap: 4px; padding: 2px 4px; }
  .hero-details b { font-size: clamp(9px, 2.7vw, 12px); }
  .hero-details small { font-size: clamp(8px, 2.4vw, 10px); }
  .hero-cta { min-width: 72%; padding: 10px 16px; font-size: 18px; }
  .hero .scroll-hint { margin-top: 0; }
  .welcome-screen { background-size: auto 100svh; }
  .section-heading { padding: 15px 12px; }
}
@media (max-width: 380px) {
  .hero-couple-cutout { top: 20%; height: 40%; width: 100%; }
  .curtain-stage { top: 57%; height: 190px; }
  .hero-bottom { top: 79%; }
}
@media (prefers-reduced-motion: reduce) {
  body:before { background-attachment: scroll; }
}
:root { --display: 'Playfair Display', Georgia, serif; }

/* HERO OVERLAP FIX — keep every hero layer anchored to the same portrait canvas. */
.hero.section{
  position:relative;
  width:min(100%,941px);
  aspect-ratio:941 / 1672;
  height:auto;
  min-height:0;
  margin-inline:auto;
  overflow:hidden;
  background:transparent !important;
}
.hero-content{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
.hero-intro{
  position:absolute;top:3.2%;left:7%;right:7%;z-index:8;
  padding:clamp(8px,1.5vw,16px) clamp(8px,2vw,20px);
  border:1px solid rgba(213,157,70,.42);
  border-radius:22px;
  background:rgba(255,247,226,.88);
  box-shadow:0 5px 18px rgba(80,22,18,.08);
  backdrop-filter:blur(4px);
}
.hero-intro .small-script{font-size:clamp(20px,3.3vw,38px);line-height:1.15;margin:0 0 5px}
.hero-intro h1{font-family:var(--display);font-size:clamp(34px,6.1vw,62px);font-weight:700;line-height:1.08;letter-spacing:-.035em;margin:4px 0 8px;color:#641023}
.hero-intro .ornament{margin:7px auto}
.hero-sub{font-size:clamp(16px,2.5vw,25px);line-height:1.25;margin:8px 0 0}
.hero-couple-cutout{
  position:absolute;z-index:3;top:22%;left:50%;transform:translateX(-50%);
  width:min(76%,650px);height:40%;display:block;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 8px 10px rgba(91,32,16,.13));pointer-events:none;
}
.curtain-stage{
  position:absolute;z-index:7;top:61%;left:12%;right:12%;height:clamp(175px,21vw,230px);
  isolation:isolate;overflow:visible;
}
.reveal-plaque{
  position:absolute;inset:10px 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px clamp(10px,2vw,24px);text-align:center;
  border:2px solid #d6a34b;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,249,233,.97),rgba(255,232,184,.96));
  box-shadow:inset 0 0 0 4px rgba(226,184,100,.25),0 7px 18px rgba(75,14,25,.14);
  color:#641023;
}
.reveal-kicker{font-size:clamp(9px,1.2vw,12px);font-weight:700;letter-spacing:.18em;color:#9b5c21}
.reveal-plaque>strong{font:700 clamp(21px,3.4vw,36px)/1.1 var(--display);color:#641023}
.reveal-venue,.reveal-small{font-size:clamp(12px,1.6vw,17px);line-height:1.2}
.reveal-countdown{width:min(100%,560px);margin:4px auto 0;padding:7px 0;background:rgba(255,243,215,.95);border-radius:9px}
.reveal-countdown strong{font-size:clamp(18px,2.8vw,29px)}
.reveal-countdown span{font-size:clamp(10px,1.3vw,14px)}
.curtain-panel{
  position:absolute;z-index:3;top:0;bottom:0;width:51%;
  background:repeating-linear-gradient(90deg,#5b0718 0,#8c1730 12%,#690b1c 24%,#a5263b 36%,#5b0718 48%);
  border:2px solid #e4b85f;box-shadow:inset 0 0 0 4px rgba(246,207,130,.2),0 4px 12px rgba(55,4,15,.2);
  transition:transform .95s cubic-bezier(.2,.75,.2,1);
}
.curtain-left{left:0;border-radius:12px 0 0 12px;border-right:3px solid #efc76f}
.curtain-right{right:0;border-radius:0 12px 12px 0;border-left:3px solid #efc76f}
.curtain-fold{position:absolute;top:0;bottom:0;width:18%;background:linear-gradient(90deg,transparent,rgba(255,209,117,.3),transparent)}
.curtain-left .curtain-fold{right:10%}.curtain-right .curtain-fold{left:10%}
.curtain-handle{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px solid #ffdf8c;border-radius:40px;background:linear-gradient(#8a1026,#590717);color:#ffe5a2;
  box-shadow:0 4px 12px rgba(50,3,12,.28);cursor:grab;touch-action:pan-y;
}
.curtain-handle span{font-size:25px;line-height:1}.curtain-handle small{font:700 9px var(--serif);letter-spacing:.12em}
.curtain-hint{position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:center;font-size:clamp(10px,1.4vw,14px);color:#71351e;text-shadow:0 1px 3px #fff3d7}
.curtain-stage.is-open .curtain-left{transform:translateX(-103%)}
.curtain-stage.is-open .curtain-right{transform:translateX(103%)}
.curtain-stage.is-open .curtain-handle{opacity:0;pointer-events:none;transition:opacity .25s}
.hero-bottom{position:absolute;z-index:5;top:80%;left:5%;right:5%;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-details{width:100%;padding:10px 8px;background:rgba(255,247,226,.95)}
.hero-cta{margin-top:2px}
@media(min-width:1000px){
 .hero-intro{top:3.2%;left:9%;right:9%}
 .hero-couple-cutout{top:22%;width:72%;height:40%}
 .curtain-stage{top:61%;left:14%;right:14%;height:220px}
 .hero-bottom{top:80%;left:8%;right:8%}
}
@media(max-width:700px){
 .hero.section{width:100%;aspect-ratio:941 / 1672}
 .hero-intro{top:2.6%;left:4%;right:4%;padding:7px 7px 9px;border-radius:14px}
 .hero-intro .small-script{font-size:clamp(17px,4.3vw,25px)}
 .hero-intro h1{font-size:clamp(27px,7.2vw,43px);margin:3px 0 5px}
 .hero-intro .ornament{margin:4px auto}
 .hero-sub{font-size:clamp(13px,3.6vw,18px);margin-top:4px}
 .hero-couple-cutout{top:23%;width:94%;height:37%}
 .curtain-stage{top:60%;left:4%;right:4%;height:clamp(165px,35vw,205px)}
 .reveal-plaque{gap:4px;padding:10px 6px}
 .reveal-plaque>strong{font-size:clamp(19px,5.2vw,27px)}
 .reveal-venue,.reveal-small{font-size:clamp(10px,2.8vw,13px)}
 .reveal-countdown{margin-top:2px;padding:5px 0}
 .reveal-countdown strong{font-size:clamp(17px,5vw,23px)}
 .reveal-countdown span{font-size:10px}
 .curtain-handle{width:52px;height:62px}
 .hero-bottom{top:79%;left:3%;right:3%;gap:7px}
 .hero-details{padding:7px 3px;grid-template-columns:1fr 1.2fr .8fr}
 .hero-details>div{gap:4px;padding:2px 3px}
 .detail-icon{width:27px;height:27px;font-size:16px}
 .hero-details b{font-size:clamp(9px,2.5vw,12px)}
 .hero-details small{font-size:clamp(8px,2.2vw,10px)}
 .hero-cta{min-width:68%;padding:9px 14px;font-size:17px}
 .hero .scroll-hint{font-size:8px}
}
@media(max-width:380px){
 .hero-couple-cutout{top:24%;height:35%;width:98%}
 .curtain-stage{top:60%;height:164px}
 .hero-bottom{top:79%}
 .hero-details .detail-icon{display:none}
}

/* Stability patch: family contacts and contained flower shower */
.contact-section{width:min(100% - 32px,1050px);margin:0 auto;padding:clamp(42px,6vw,76px) clamp(16px,4vw,42px);background:rgba(255,246,225,.94);border:1px solid #d9a34d;border-radius:22px;box-shadow:0 12px 34px rgba(92,25,18,.12);isolation:isolate}
.contact-section .section-heading{margin-bottom:26px}
.contact-section .section-heading h2{font-size:clamp(38px,5vw,58px);line-height:1.08}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;}
.contact-card{min-width:0;display:flex;align-items:center;gap:16px;padding:22px;background:linear-gradient(145deg,#fffaf0,#ffedca);border:1px solid #d6a04b;border-radius:16px;box-shadow:0 5px 15px rgba(92,25,18,.08)}
.contact-card>div{min-width:0;overflow-wrap:anywhere}
.contact-emblem{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#f8dfaa;border:1px solid #dfb766;color:#7a0c20;font-size:27px}
.contact-card h3{font-size:clamp(20px,2.5vw,27px);color:var(--wine);margin:4px 0 8px}
.contact-number{margin:0 0 12px;font-size:17px;letter-spacing:.03em;color:#6b3c2d}
.whatsapp-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;padding:10px 15px;border-radius:28px;background:#176b45;color:#fff8e9!important;text-decoration:none!important;font:600 15px/1.25 var(--serif);border:1px solid #2b865d;box-shadow:0 3px 0 #0e5133;overflow-wrap:anywhere;transition:transform .2s,background .2s}
.whatsapp-link:hover{background:#0f5838;transform:translateY(-1px)}
.whatsapp-link.is-placeholder{background:#7b1023;border-color:#d7a34f;box-shadow:0 3px 0 #4d0917;cursor:default}
.contact-note{margin:18px auto 0;max-width:650px;text-align:center;line-height:1.5}
.flower-button{position:fixed!important;right:18px!important;bottom:18px!important;left:auto!important;top:auto!important;z-index:80;display:flex;align-items:center;gap:9px;padding:12px 17px;border:1px solid #e6bd69;border-radius:999px;background:linear-gradient(135deg,#690b1c,#8d1530);color:#fff0ce;box-shadow:0 7px 22px rgba(55,4,15,.28);font:600 15px/1.1 var(--serif);cursor:pointer;white-space:nowrap;max-width:calc(100vw - 28px)}
.flower-button span{font-size:20px;line-height:1}.flower-button:hover{transform:translateY(-2px)}
/* Petals are scoped to the date plaque; never cover the whole screen. */
.petal-layer{position:absolute!important;inset:0!important;z-index:4!important;overflow:hidden!important;pointer-events:none!important;border-radius:inherit!important}
.falling-petal{position:absolute;top:-24px;left:var(--left);font-size:var(--size);line-height:1;opacity:0;animation:plaque-petal-fall var(--duration) ease-in var(--delay) forwards;filter:drop-shadow(0 1px 1px #9b531d55)}
@keyframes plaque-petal-fall{0%{transform:translate3d(0,-15px,0) rotate(0deg);opacity:0}12%{opacity:.95}85%{opacity:.9}100%{transform:translate3d(var(--drift),220px,0) rotate(300deg);opacity:0}}
.reveal-plaque{overflow:hidden}
@media(max-width:650px){.contact-section{width:calc(100% - 20px);padding:38px 14px;border-radius:16px}.contact-grid{grid-template-columns:1fr;gap:12px}.contact-card{padding:16px;gap:12px}.contact-emblem{flex-basis:44px;width:44px;height:44px;font-size:23px}.whatsapp-link{font-size:14px;padding:9px 12px}.flower-button{right:10px!important;bottom:10px!important;padding:10px 13px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.falling-petal{animation-duration:.01ms!important}.flower-button{transition:none}}

/* Final correction: scale the background only on laptops/desktops.
   Keep the hero canvas and every text/content layer at its established portrait size. */
@media (min-width: 701px) {
  body:before {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .welcome-screen {
    background-size: cover;
    background-position: center center;
  }
  .hero.section {
    width: min(100%, 941px);
    max-width: 941px;
    aspect-ratio: 941 / 1672;
    height: auto;
    min-height: 0;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  /* Preserve the existing mobile artwork and content layout. */
  body:before { background-size: auto 100svh; background-position: center center; }
  .welcome-screen { background-size: auto 100svh; background-position: center center; }
  .hero.section {
    width: 100%;
    max-width: none;
    aspect-ratio: 941 / 1672;
    height: auto;
    min-height: 0;
  }
}

/* Wedding-specific final updates */
.wedding-logo{display:block;width:88px;height:88px;object-fit:cover;margin:0 auto 10px;border-radius:50%;border:2px solid #d7a34f;box-shadow:0 5px 18px #0003}
.itsraneeverse{font:600 18px var(--serif);letter-spacing:.12em;color:#9c6322;margin:12px 0 4px}
.footer-pickup{font-size:17px!important}
.venue-list{display:grid;gap:18px}
.venue-copy{min-width:0;overflow-wrap:anywhere}
.venue-link{display:inline-block;margin-top:10px;color:var(--wine);font-weight:700;text-decoration:none;border-bottom:1px solid #c8872c;padding-bottom:3px}
.venue-link:hover{color:#a15b1c}
.blessings-wall{max-width:700px;margin:28px auto 0;padding:20px;background:#fff3d8;border:1px solid #dca14a;border-radius:16px}
.blessings-wall h3{margin:0;color:var(--wine);font-size:28px;text-align:center}
.blessings-wall-intro{text-align:center;margin:6px 0 16px;color:#805b4d}
.blessing-list{max-height:330px;overflow-y:auto;overscroll-behavior:contain;padding:2px 7px 2px 2px;scrollbar-color:#c8872c #fff0d2;scrollbar-width:thin}
.blessing-relation{display:inline-block;margin:6px 0 0 9px;padding:3px 9px;border-radius:20px;background:#f8e2b4;color:#80502a;font-size:13px}
.empty-blessings{text-align:center;color:#8e6d58;padding:20px}
@media(max-width:600px){.wedding-logo{width:72px;height:72px}.blessings-wall{padding:14px}.blessings-wall h3{font-size:24px}.blessing-list{max-height:280px}}


/* Responsive welcome card: keep the complete invitation inside the viewport. */
.welcome-screen{padding:clamp(12px,2.5vw,28px);}
.welcome-card{width:min(650px,calc(100vw - 32px));max-height:calc(100vh - 36px);max-height:calc(100svh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8872c transparent;padding:clamp(20px,3.6vh,42px) clamp(18px,4vw,48px);}
.wedding-logo{display:block;width:clamp(58px,8vh,88px);height:auto;max-height:88px;object-fit:contain;margin:0 auto 12px;}
.welcome-floral{pointer-events:none;}
.global-petal-layer{position:fixed;inset:0;z-index:75;overflow:hidden;pointer-events:none;contain:strict;}
.global-falling-petal{position:absolute;top:-42px;left:var(--left);font-size:var(--size);line-height:1;opacity:0;animation:whole-page-petal-fall var(--duration) linear var(--delay) forwards;filter:drop-shadow(0 2px 3px #7b163044);will-change:transform,opacity;}
@keyframes whole-page-petal-fall{0%{transform:translate3d(0,-5vh,0) rotate(0deg);opacity:0}8%{opacity:.96}88%{opacity:.9}100%{transform:translate3d(var(--drift),112vh,0) rotate(540deg);opacity:0}}
#datePetalLayer .falling-petal{animation-name:plaque-petal-fall;animation-duration:var(--duration);}
@media(max-width:700px){.welcome-screen{padding:12px}.welcome-screen:after{inset:5px}.welcome-card{width:min(560px,calc(100vw - 28px));max-height:calc(100svh - 28px);padding:clamp(16px,2.6vh,25px) clamp(15px,4.5vw,24px);border-radius:clamp(70px,18vw,140px) clamp(70px,18vw,140px) 18px 18px}.welcome-card h1{font-size:clamp(42px,10vw,66px);margin-top:5px}.welcome-card .ornament{margin:10px auto 8px}.welcome-script{margin:8px 0 0}.welcome-subtitle{margin:8px 0;font-size:clamp(15px,4vw,19px)}.welcome-date{padding:9px 3px;margin-top:8px}.open-invitation{margin-top:10px}.welcome-note{margin:10px 0 0}.wedding-logo{width:clamp(50px,7vh,68px);margin-bottom:8px}.welcome-floral,.welcome-bottom{display:none}}
@media(max-height:700px){.welcome-card{padding-top:14px;padding-bottom:14px}.wedding-logo{width:54px;margin-bottom:5px}.welcome-kicker{margin:8px 0;font-size:10px}.welcome-card h1{font-size:clamp(40px,8vh,60px)}.welcome-card .ornament{margin:7px auto}.welcome-note{margin-top:7px}.welcome-date{padding:7px 3px}}
@media(prefers-reduced-motion:reduce){.global-falling-petal{animation-duration:8s!important}}


/* Final welcome-screen fit: keep the invitation fully visible without a scrollbar. */
.welcome-screen {
  padding: clamp(8px, 1.8vh, 20px);
}
.welcome-card {
  width: min(650px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  overflow: hidden;
  padding: clamp(10px, 1.8vh, 24px) clamp(16px, 4vw, 44px);
}
.wedding-logo {
  width: clamp(48px, 6.8vh, 72px);
  max-height: 72px;
  margin-bottom: clamp(4px, .8vh, 10px);
}
.welcome-lotus {
  font-size: clamp(27px, 4.5vh, 42px);
  margin-bottom: 0;
}
.welcome-kicker {
  margin: clamp(4px, .8vh, 9px) 0 clamp(7px, 1.3vh, 14px);
  font-size: clamp(8px, 1.35vh, 11px);
}
.welcome-script {
  font-size: clamp(22px, 3.7vh, 32px);
}
.welcome-card h1 {
  font-size: clamp(42px, 7.2vh, 70px);
  margin-top: 4px;
}
.welcome-card .ornament {
  margin: clamp(7px, 1.3vh, 14px) auto clamp(5px, 1vh, 10px);
}
.welcome-subtitle {
  font-size: clamp(14px, 2.25vh, 20px);
  margin-bottom: clamp(8px, 1.4vh, 16px);
}
.itsraneeverse {
  margin-top: clamp(4px, .8vh, 8px);
  margin-bottom: clamp(4px, .8vh, 8px);
}
.welcome-date {
  gap: 4px;
  padding: clamp(7px, 1.1vh, 12px) 6px;
  margin-bottom: clamp(9px, 1.5vh, 16px);
  font-size: clamp(9px, 1.35vh, 11px);
}
.open-invitation {
  max-width: 100%;
}
@media (max-height: 720px) {
  .welcome-card { padding-top: 8px; padding-bottom: 8px; }
  .wedding-logo { width: 46px; max-height: 46px; margin-bottom: 3px; }
  .welcome-lotus { font-size: 25px; }
  .welcome-kicker { margin: 4px 0 6px; }
  .welcome-card h1 { font-size: clamp(38px, 6.2vh, 54px); }
  .welcome-card .ornament { margin: 5px auto; }
  .welcome-subtitle { margin-bottom: 6px; }
  .welcome-date { padding: 5px; margin-bottom: 7px; }
}

.welcome-note {
  font-size: clamp(10px, 1.45vh, 13px);
  margin: clamp(4px, .8vh, 8px) 0 0;
  line-height: 1.15;
}
.welcome-bottom { display: none; }
@media (max-height: 720px) {
  .welcome-note { display: none; }
}


/* Mobile-first hero refinement: keep the same wedding artwork, with clearer spacing on narrow screens. */
.welcome-card .itsraneeverse { letter-spacing: .01em; font-size: clamp(15px, 2.3vw, 19px); font-weight: 600; }
.welcome-script, .hero-sub { letter-spacing: normal; }
@media (max-width: 600px) {
  .welcome-screen { padding: 12px; background-position: center center; }
  .welcome-card { width: min(100%, 430px); padding: 22px 16px 20px; border-radius: 145px 145px 20px 20px; }
  .welcome-kicker { letter-spacing: .08em; line-height: 1.35; }
  .welcome-card h1 { font-size: clamp(43px, 12vw, 60px); line-height: 1; }
  .welcome-subtitle { font-size: clamp(14px, 4vw, 17px); line-height: 1.3; }
  .welcome-date { letter-spacing: .035em; line-height: 1.45; font-size: 10px; }
  .welcome-card .itsraneeverse { font-size: 16px; letter-spacing: .01em; }
  .hero.section { width: 100%; max-width: none; aspect-ratio: 390 / 850; min-height: 0; height: auto; background-size: 100% 100%; }
  .hero-intro { top: 2.5%; left: 4%; right: 4%; padding: 10px 9px 12px; border-radius: 18px; }
  .hero-intro .small-script { font-size: clamp(18px, 5.2vw, 24px); line-height: 1.2; }
  .hero-intro h1 { font-size: clamp(35px, 9.5vw, 47px); line-height: 1.05; margin: 5px 0; letter-spacing: -.02em; }
  .hero-intro .ornament { margin: 5px auto; }
  .hero-sub { font-size: clamp(14px, 3.8vw, 17px); line-height: 1.3; margin: 6px 0 0; }
  .hero-couple-cutout { top: 24%; left: 50%; width: 94%; height: 34%; object-fit: contain; object-position: center bottom; }
  .curtain-stage { top: 57%; left: 5%; right: 5%; height: 21%; min-height: 160px; max-height: 200px; }
  .reveal-plaque { padding: 10px 8px; gap: 4px; }
  .reveal-kicker { letter-spacing: .08em; font-size: 9px; }
  .reveal-plaque>strong { font-size: clamp(19px, 5.6vw, 25px); }
  .reveal-venue, .reveal-small { font-size: clamp(10px, 3vw, 12px); line-height: 1.25; }
  .reveal-countdown { padding: 4px 0; }
  .reveal-countdown strong { font-size: clamp(18px, 5vw, 23px); }
  .reveal-countdown span { font-size: 10px; }
  .curtain-hint { font-size: 10px; }
  .hero-bottom { top: 80%; left: 5%; right: 5%; gap: 8px; }
  .hero-details { padding: 7px 5px; }
  .hero-details>div { gap: 5px; padding: 3px 2px; }
  .hero-details b { font-size: clamp(10px, 2.9vw, 12px); line-height: 1.2; }
  .hero-details small { font-size: clamp(9px, 2.5vw, 10px); line-height: 1.2; }
  .detail-icon { width: 25px; height: 25px; font-size: 16px; }
  .hero-cta { min-width: 70%; padding: 10px 16px; font-size: 17px; }
  .hero .scroll-hint { margin-top: 4px; font-size: 9px; letter-spacing: .08em; }
}
@media (max-width: 360px) {
  .welcome-card { padding: 18px 12px; }
  .hero-intro { left: 3%; right: 3%; }
  .hero-bottom { left: 3%; right: 3%; }
  .hero-details small { overflow-wrap: anywhere; }
}


/* Final mobile spacing: keep the curtain hint separate from venue details. */
@media (max-width: 700px) {
  .curtain-stage {
    top: 54.5%;
    left: 5%;
    right: 5%;
    height: clamp(145px, 25vw, 175px);
    min-height: 145px;
    max-height: 175px;
  }
  .curtain-hint {
    top: calc(100% + 4px);
    padding: 0 6px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.2;
    white-space: normal;
  }
  .hero-bottom { top: 79.5%; gap: 8px; }
  .hero-details { margin-top: 0; }
  .welcome-date {
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    gap: 5px;
    padding: 9px 5px;
  }
  .welcome-date span { display: block; }
}
@media (max-width: 380px) {
  .curtain-stage { top: 54%; height: 145px; min-height: 145px; }
  .curtain-hint { font-size: 10px; }
  .hero-bottom { top: 79%; }
  .welcome-date { font-size: 11px; }
}


/* Final mobile hero de-cluttering: remove duplicate labels and reserve clear space
   between the revealed date plaque and the venue summary below. */
@media (max-width: 700px) {
  .curtain-stage {
    top: 53.5%;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
  }
  .reveal-plaque {
    inset: 0;
    padding: 8px 8px 7px;
    gap: 3px;
    overflow: hidden;
  }
  .reveal-kicker,
  .reveal-small,
  .curtain-hint {
    display: none !important;
  }
  .reveal-plaque > strong {
    font-size: clamp(20px, 5.5vw, 25px);
    line-height: 1.05;
  }
  .reveal-venue {
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.15;
    max-width: 100%;
  }
  .reveal-countdown {
    margin-top: 2px;
    padding: 3px 0;
    flex-shrink: 0;
  }
  .reveal-countdown strong {
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1;
  }
  .reveal-countdown span {
    font-size: 9px;
    line-height: 1;
  }
  .hero-bottom {
    top: 79.5%;
    gap: 8px;
  }
}
@media (max-width: 380px) {
  .curtain-stage { top: 53%; height: 154px; min-height: 154px; max-height: 154px; }
  .hero-bottom { top: 79%; }
}