*{box-sizing:border-box}
:root{--cream:#f8f0e5;--paper:#fffaf1;--ink:#3f2c2c;--maroon:#922b4a;--rose:#c95c78;--sage:#687c68;--gold:#b88b50;--line:#e3d4c5;--shadow:0 16px 45px rgba(70,35,30,.13)}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#eee7dd;color:var(--ink);font-family:"DM Sans",sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.site-shell{max-width:520px;margin:auto;background:var(--cream);box-shadow:0 0 50px rgba(0,0,0,.14);min-height:100vh;position:relative}
main{overflow:hidden}.screen{min-height:100svh;position:relative;padding:58px 18px 90px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-bottom:1px solid #e5d9cc}
.screen:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(#b99d88 0.6px,transparent .6px);background-size:13px 13px}
.section-inner{width:100%;position:relative;z-index:1}.centered{text-align:center}
.topbar{position:fixed;z-index:30;top:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(255,250,241,.76);backdrop-filter:blur(10px);border-bottom:1px solid rgba(150,100,80,.1)}
.mini-logo{font-family:"Allura","Great Vibes",cursive;font-size:30px;color:var(--maroon);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:5px;min-width:108px;text-align:center}
.mini-logo .logo-char{display:block}
.mini-logo .logo-heart{display:block;line-height:1;transform:translateY(1px)}
.icon-btn{border:0;background:none;font-size:21px;color:var(--ink);padding:6px}
.music-toggle-wrap{position:relative;display:flex;align-items:center}
#musicBtn.needs-tap{animation:musicPulse 1.6s ease-in-out infinite}
@keyframes musicPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.65}}
.music-cta{position:absolute;top:100%;right:0;margin-top:8px;background:var(--maroon);color:#fff;font-size:10px;letter-spacing:.2px;padding:5px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.22);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:31}
.music-cta:after{content:"";position:absolute;bottom:100%;right:14px;border:5px solid transparent;border-bottom-color:var(--maroon)}
.music-cta.show{opacity:1;transform:translateY(0)}
.drawer{position:fixed;z-index:50;top:0;right:-320px;width:290px;height:100vh;background:var(--paper);box-shadow:-20px 0 50px rgba(0,0,0,.15);transition:right .3s;padding:22px}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.drawer nav{display:grid;gap:7px}.drawer nav button{padding:13px;text-align:left;border:1px solid var(--line);background:white;border-radius:12px;color:var(--ink)}
.hero{background:linear-gradient(180deg,rgba(250,228,211,.2),rgba(100,60,50,.1)),url("assets/hero.jpg") center/cover no-repeat;color:#fff;text-align:center;min-height:100svh}.hero:before{opacity:.1}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,239,224,.18),rgba(40,20,20,.55))}
.hero-content{position:relative;z-index:2;margin-top:45px}.eyebrow{font-size:14px}.hero-kicker{font-size:12px;line-height:1.8;letter-spacing:2px}.hero h1{font-family:"Great Vibes";font-size:64px;font-weight:400;margin:20px 0 4px}.hero h1 span{font-size:35px}.date{letter-spacing:3px;font-size:13px}.quote{font-size:15px;line-height:2;margin:24px auto;max-width:320px}
.primary{border:0;border-radius:30px;background:linear-gradient(135deg,var(--maroon),#b63f61);color:#fff;padding:13px 24px;box-shadow:0 8px 18px rgba(146,43,74,.22);transition:.2s}.primary:hover{transform:translateY(-1px)}.music-hint{display:block;margin:18px auto 0;border:0;background:none;color:inherit;font-size:12px}
.floral{position:absolute;color:#ba7890;font-size:42px;z-index:1}.floral-tl{top:10px;left:8px}.floral-br{bottom:18px;right:12px}
.script-title{font-family:"Great Vibes","Cormorant Garamond";font-size:36px;color:var(--maroon);margin:0 0 2px;text-align:center}.subtitle{text-align:center;font-size:10px;letter-spacing:2px;margin:0 0 25px;color:#6b5a55}
.devanagari{font-family:"Noto Sans Devanagari",sans-serif}
.paper-note{background:#dfc5a7;padding:42px 24px}.paper{width:100%;min-height:80vh;padding:42px 28px 38px;background:#f7e9d5;box-shadow:var(--shadow);position:relative;transform:rotate(-.7deg);background-image:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(120,75,50,.035) 32px)}.paper:after{content:"";position:absolute;inset:10px;border:1px solid rgba(130,80,50,.15);pointer-events:none}.paper-date{text-align:right;font-size:12px}.letter-greeting{font-size:20px;margin-top:35px}.letter-body{font-size:15px;line-height:2.15}.letter-sign{text-align:center;margin-top:25px;line-height:1.8;color:var(--maroon)}.wax{position:absolute;right:28px;bottom:28px;width:58px;height:58px;border-radius:50%;background:#8f2e40;color:#f5d6b2;display:grid;place-items:center;box-shadow:inset 0 0 0 5px rgba(255,255,255,.08),4px 5px 10px rgba(0,0,0,.15)}
.beginning{background:#fbf4e9}.poem{font-size:16px;line-height:2.00;max-width:350px;margin:auto}.divider{text-align:center;color:var(--maroon);margin:18px}.closing-line{line-height:1.8}.couple-script{font-family:"Great Vibes";font-size:42px;font-weight:400;color:var(--maroon);margin:10px 0 20px}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.photo-card{
  height:120px;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(70,35,30,.12);
  background:#ead8c4;
  position: relative;
}

.photo-card.large{
  grid-column:1/3;
  height:270px;
}

.photo-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.photo-card.large img{
  object-position:center;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--maroon);
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.gallery-prev {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.gallery-arrow:hover {
  background: var(--maroon);
  color: white;
}


.photo-placeholder,.venue-photo,.family-photo{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#d8c0ad,#efdcc9 45%,#b99485);
  color:white;
  text-shadow:0 1px 4px #593c36;
  font-size:10px;
  letter-spacing:1.5px;
}

.photo-caption{
  text-align:center;
  font-size:15px;
  line-height:1.9;
  margin:18px 0;
  color:#654b46;
}
.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.family-card{background:#fffaf2;border:1px solid var(--line);border-radius:14px;padding:20px 12px;text-align:center;box-shadow:0 6px 20px rgba(60,30,25,.06)}.family-icon{font-size:35px;color:var(--maroon)}.family-card h3{font-family:"Cormorant Garamond";font-size:20px;margin:8px 0}.family-card p{font-size:12px;line-height:1.7;color:#695a55}.outline{border:1px solid var(--maroon);color:var(--maroon);background:transparent;border-radius:22px;padding:8px 13px;font-size:11px}.family-photo{height:210px;border-radius:12px;margin-top:18px}
.event-list{display:grid;gap:9px}.event-card{display:flex;align-items:center;gap:11px;background:#fffaf3;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 5px 15px rgba(60,30,25,.06)}.event-thumb{width:72px;height:100%;flex-shrink:0;align-self:stretch;border-radius:13px 0 0 13px;object-fit:cover;object-position:center;display:block}.event-card h3{font-family:"Cormorant Garamond";font-size:18px;margin:9px 0 3px;color:#4a3433}.event-card p{font-size:11px;margin:0 0 4px}.event-card span{font-size:10px;color:#7b6963;display:block;line-height:1.4}.event-card>div:last-child{padding-right:8px}.event-card.featured{border:2px solid #c48a64}.events .primary{display:block;margin:18px auto 0}
.location{text-align:left}.venue-copy{padding:0 10px}.venue-copy h2{font-family:"Cormorant Garamond";font-size:26px;margin:0}.venue-copy p{font-size:13px;line-height:1.6}.venue-photo{height:190px;border-radius:12px;margin-top:15px}.location-actions{display:flex;gap:8px;margin:10px 0}.location-actions>*{flex:1}.map-placeholder{height:170px;border-radius:12px;background:linear-gradient(135deg,#d9e0d1,#eee6d7);display:grid;place-items:center;color:#6d665d;font-size:11px;letter-spacing:1px}.venue-notes{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:10px;line-height:1.5;margin-top:12px}
.countdown{background:linear-gradient(#fbf4e9,#f8eee2)}.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:35px 0}.count-grid div{background:#fffaf3;border:1px solid var(--line);border-radius:9px;padding:14px 4px}.count-grid strong{display:block;color:var(--maroon);font-size:27px;font-weight:500}.count-grid span{font-size:9px}
.wish-form,.rsvp form{display:grid;gap:12px}.wish-form textarea,.wish-form input,.rsvp select{width:100%;border:1px solid var(--line);background:#fffdf8;border-radius:10px;padding:13px;outline:none}.wish-form textarea{min-height:125px;resize:vertical}.wishes{margin-top:25px}.wishes h3{font-family:"Cormorant Garamond";font-size:19px}.wishes article{background:#fffdf8;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:12px;line-height:1.7}.wishes article span{display:block;text-align:right;color:var(--maroon);margin-top:5px}
.choice{display:block}.choice input{display:none}.choice span{display:block;text-align:center;padding:15px;border:1px solid var(--line);border-radius:10px;background:#fffdf8}.choice input:checked+span{background:#8f2e40;color:white;border-color:#8f2e40}.rsvp label:not(.choice){font-size:12px}.stepper{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;background:#fffdf8;margin-top:6px;padding:5px}.stepper button{border:0;background:transparent;font-size:20px}.stepper output{font-weight:600}.rsvp select{margin-top:6px}.form-message{text-align:center;color:var(--maroon);font-size:13px}
.final{color:#5a3435;background:linear-gradient(180deg,rgba(255,250,241,.2),rgba(126,75,62,.18)),url("assets/final.jpg") center/cover no-repeat;text-align:center}.final-overlay{position:absolute;inset:0;background:rgba(255,250,241,.12)}.final-content{position:relative;z-index:2;max-width:330px;text-shadow:0 1px 2px rgba(255,250,241,.8)}.final .script-title{color:#a64b4e;text-shadow:none}.final p{line-height:1.8;color:#5a3435}.final .couple-script{color:#a64b4e}.final .divider{color:#a64b4e}.final-actions .primary,.final-actions .share-btn{color:#fff8ed}
.bottom-nav{position:fixed;z-index:25;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);height:65px;background:rgba(255,250,241,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;overflow-x:auto;scrollbar-width:none}.bottom-nav::-webkit-scrollbar{display:none}.bottom-nav button{min-width:82px;border:0;background:none;color:#6a5a55;font-size:9px;display:grid;place-items:center;gap:1px}.bottom-nav button.active{color:var(--maroon);font-weight:600}.bottom-nav .nav-icon{font-size:18px}
@media(min-width:700px){.site-shell{border-radius:20px;overflow:hidden;margin:25px auto}.topbar,.bottom-nav{border-radius:0}.screen{min-height:760px}.hero{min-height:850px}}

/* ===== V2 refinements ===== */
.desk-scene{width:100%;min-height:88vh;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.18),transparent 24%),linear-gradient(135deg,#caa786,#8e644d);border-radius:20px;padding:28px 16px;box-shadow:inset 0 0 45px rgba(64,31,18,.25);overflow:hidden}
.petal{position:absolute;color:#f0d3c0;font-size:28px;opacity:.75;z-index:1}.p1{left:18px;top:24px}.p2{right:20px;top:64px}.p3{left:28px;bottom:30px}
.rich-letter{min-height:77vh;max-width:390px;padding:38px 30px 46px;transform:rotate(-1.2deg);background:linear-gradient(rgba(255,250,239,.92),rgba(248,232,210,.94));border-radius:4px 16px 8px 14px;box-shadow:0 24px 50px rgba(41,22,14,.32)}
.letter-topline{display:flex;justify-content:space-between;align-items:center;color:#735443}.tiny-motif{font-size:20px;color:var(--maroon)}.letter-ornament{text-align:center;letter-spacing:2px;color:#8a694f;margin:18px 0}.rich-letter .letter-greeting{font-size:22px}.rich-letter .letter-body{font-size:15.5px;line-height:2.05}.rich-letter .lead-line{color:#6f3947}.rich-letter .invite-verse{padding-left:12px;border-left:2px solid rgba(146,43,74,.25)}.rich-letter .letter-sign span{font-family:"Great Vibes";font-size:30px;color:var(--maroon)}.rich-letter .letter-sign em{font-style:normal;color:var(--maroon);padding:0 6px}.rich-letter .wax{width:66px;height:66px;font-size:16px}
.event-hint{text-align:center;font-size:11px;color:var(--maroon);margin:-12px 0 14px}.event-click{cursor:pointer;transition:.18s;position:relative}.event-click:after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--maroon)}.event-click:hover,.event-click:focus{transform:translateY(-2px);box-shadow:0 10px 25px rgba(78,40,34,.12);outline:none}.event-click>div:last-child{padding-right:28px}
.event-location-screen{background:linear-gradient(180deg,#fffaf1,#f7efe5)}.back-link{border:0;background:none;color:var(--maroon);padding:0;margin:0 0 20px;font-size:12px}.live-map-card{height:280px;margin:22px 0 12px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;background:repeating-linear-gradient(25deg,#dfe7d8 0 12px,#f2ecdf 12px 24px);border:1px solid #ddd0c0}.map-pin{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--maroon);color:white;font-size:28px}.live-map-card strong{font-family:"Cormorant Garamond";font-size:22px}.live-map-card span{font-size:11px;color:#6b625d}.location-note{text-align:center;font-size:11px;line-height:1.7;color:#77645e;margin:16px auto 0;max-width:340px}

/* ===== V3: visual polish, Mithila-inspired ornament, transitions ===== */
body{background:#d9cec0}
.screen{isolation:isolate;transition:background .4s ease}
.screen:after{content:"";position:absolute;inset:9px;border:1px solid rgba(160,106,74,.13);pointer-events:none;border-radius:3px;z-index:0}
.floral-screen:before{opacity:.14;background-image:radial-gradient(#9f624e .7px,transparent .7px),linear-gradient(45deg,transparent 47%,rgba(157,89,69,.12) 48% 52%,transparent 53%);background-size:15px 15px,30px 30px}
.floral-screen .section-inner:before,.floral-screen .section-inner:after{content:"❁  ❦  ❁";position:absolute;left:50%;transform:translateX(-50%);color:#a45456;letter-spacing:11px;font-size:17px;opacity:.48;white-space:nowrap}
.floral-screen .section-inner:before{top:-38px}.floral-screen .section-inner:after{bottom:-48px}
.event-card{position:relative}
.event-card>div:last-child{padding:9px 42px 10px 0}
.event-location-btn{position:absolute;right:9px;bottom:9px;border:1px solid var(--maroon);background:#fff8f0;color:var(--maroon);border-radius:18px;padding:6px 10px;font-size:10px;z-index:2}
.event-location-btn span{font-size:13px;margin-left:2px}
.event-location-btn:hover{background:var(--maroon);color:white}
.location-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end}
.location-modal.open{display:flex}
.location-backdrop{position:absolute;inset:0;background:rgba(39,20,20,.5);backdrop-filter:blur(4px)}
.location-sheet{position:relative;width:min(520px,100%);margin:auto;background:#fff9ef;border-radius:24px 24px 0 0;padding:22px 20px 30px;box-shadow:0 -20px 55px rgba(30,15,15,.28);transform:translateY(30px);max-height:92vh;overflow:auto}
.modal-close{position:absolute;right:15px;top:12px;border:0;background:#f1e5d8;width:34px;height:34px;border-radius:50%;font-size:23px;color:#5d4540}
.mithila-mini-art{text-align:center;color:#a44e52;letter-spacing:14px;font-size:16px;margin:0 0 5px}
.live-map-card{height:220px;position:relative;overflow:hidden;background:#e6e6d9;border-radius:16px}
.map-roads{position:absolute;inset:-20%;background:repeating-linear-gradient(18deg,transparent 0 26px,rgba(255,255,255,.9) 27px 31px),repeating-linear-gradient(103deg,transparent 0 39px,rgba(210,190,157,.55) 40px 44px),linear-gradient(130deg,#cbd8c2,#e9dfc8 45%,#c9d5c2);transform:rotate(-5deg)}
.map-pin{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--maroon);color:white;font-size:27px;box-shadow:0 9px 25px rgba(70,20,35,.28)}
.live-map-card strong,.live-map-card span{position:relative;z-index:2;text-shadow:0 1px 4px rgba(255,255,255,.9)}
.gallery-lightbox{position:fixed;inset:0;z-index:110;background:rgba(25,13,13,.9);display:none;align-items:center;justify-content:center;color:white;padding:50px 45px}
.gallery-lightbox.open{display:flex}
.lightbox-stage{width:min(420px,100%);text-align:center}.lightbox-photo{height:min(68vh,520px);border-radius:14px;background:linear-gradient(135deg,#d7bda8,#9d6a61,#e7c9af);box-shadow:0 15px 50px rgba(0,0,0,.35);display:grid;place-items:center;font-family:"Cormorant Garamond";font-size:20px;padding:20px}.lightbox-photo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}.lightbox-stage p{font-size:13px;line-height:1.6}
.lightbox-photo{overflow:hidden;max-width:100%;max-height:calc(100vh - 150px)}
.lightbox-photo img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox-close,.lightbox-arrow{position:absolute;border:0;background:rgba(255,255,255,.12);color:white;border-radius:50%;width:42px;height:42px;font-size:28px}.lightbox-close{right:18px;top:18px}.lightbox-arrow{top:50%;transform:translateY(-50%)}.lightbox-arrow.prev{left:12px}.lightbox-arrow.next{right:12px}
.photo-card{cursor:pointer;transition:transform .2s ease, height .48s cubic-bezier(.2,.75,.25,1)}
#engagementGallery.is-gallery-animating .photo-card{transition:transform .48s cubic-bezier(.2,.75,.25,1),height .48s cubic-bezier(.2,.75,.25,1);will-change:transform,height}
#engagementGallery.is-gallery-animating .gallery-arrow{pointer-events:none}
.final-actions{display:grid;gap:9px;margin-top:14px}.share-btn{border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.08);color:white;border-radius:30px;padding:11px 18px;font-size:12px}
.screen.is-visible .section-inner > *,
.screen.is-visible .final-content > *,
.screen.is-visible .hero-content > *,
.screen.is-visible .hero-ornament,
.screen.is-visible .desk-scene > *{
  animation:scrollReveal .82s cubic-bezier(.2,.75,.25,1) both;
}
.screen.is-visible .section-inner > .script-title,
.screen.is-visible .hero-ornament{animation-delay:0ms}
.screen.is-visible .section-inner > .subtitle{animation-delay:150ms}
.screen.is-visible .section-inner > .poem,
.screen.is-visible .section-inner > .photo-grid,
.screen.is-visible .section-inner > .family-grid,
.screen.is-visible .section-inner > .event-hint,
.screen.is-visible .section-inner > .count-grid,
.screen.is-visible .section-inner > form,
.screen.is-visible .final-content > p:first-child{animation-delay:350ms}
.screen.is-visible .section-inner > .photo-caption,
.screen.is-visible .section-inner > .divider,
.screen.is-visible .section-inner > .closing-line,
.screen.is-visible .final-content > .divider{animation-delay:500ms}
.screen.is-visible .photo-card,
.screen.is-visible .family-card,
.screen.is-visible .event-card,
.screen.is-visible .count-grid > div{
  animation:scrollReveal .72s cubic-bezier(.2,.75,.25,1) both;
}
.screen.is-visible .photo-card:nth-child(1),
.screen.is-visible .family-card:nth-child(1),
.screen.is-visible .event-card:nth-child(1),
.screen.is-visible .count-grid > div:nth-child(1){animation-delay:500ms}
.screen.is-visible .photo-card:nth-child(2),
.screen.is-visible .family-card:nth-child(2),
.screen.is-visible .event-card:nth-child(2),
.screen.is-visible .count-grid > div:nth-child(2){animation-delay:600ms}
.screen.is-visible .photo-card:nth-child(3),
.screen.is-visible .event-card:nth-child(3),
.screen.is-visible .count-grid > div:nth-child(3){animation-delay:700ms}
.screen.is-visible .photo-card:nth-child(4),
.screen.is-visible .event-card:nth-child(4),
.screen.is-visible .count-grid > div:nth-child(4){animation-delay:800ms}
.screen.is-visible .photo-card:nth-child(5),
.screen.is-visible .event-card:nth-child(5){animation-delay:900ms}
@keyframes scrollReveal{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* handwritten letter refinement */
.rich-letter{background-color:#f7ead6;background-image:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(120,75,50,.04) 31px),radial-gradient(circle at 20% 20%,rgba(164,78,82,.06),transparent 30%)}
.rich-letter:after{border-color:rgba(139,76,57,.2)}

/* ===== V4 — premium Mithila invitation frame ===== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Kalam:wght@300;400;700&display=swap');
:root{--hand:"Kalam","Noto Sans Devanagari",cursive;--hand-latin:"Caveat","Great Vibes",cursive;--terracotta:#a64b4e;--mithila-green:#5c7663;--ochre:#c58a4e}
body{background:#d2c3b0;overflow-x:hidden}
.screen{background:#fbf3e6;padding:62px 22px 96px;overflow:hidden}
.mithila-page{border-bottom:0}
.mithila-page .mithila-frame{position:absolute;inset:7px;z-index:5;pointer-events:none;background:url("assets/mithila-border_1.jpg") center/100% 100% no-repeat;filter:drop-shadow(0 2px 1px rgba(86,44,34,.08));opacity:.98}
.mithila-page .section-inner,.mithila-page .desk-scene,.mithila-page .hero-card{z-index:6}
.mithila-page:after{display:none}
/* Give every page the printed-card feel from the reference */
.screen{box-shadow:inset 0 0 0 1px rgba(119,74,57,.12), inset 0 0 50px rgba(140,86,55,.05)}
.floral-screen .section-inner:before,.floral-screen .section-inner:after{z-index:7}
/* Handwritten look */
.handwritten,.rich-letter .letter-body,.rich-letter .letter-greeting,.rich-letter .letter-sign,.paper-date.devanagari{font-family:var(--hand)}
.handwritten{font-weight:400;letter-spacing:.15px}
.rich-letter .letter-body{font-size:17px;line-height:1.95}
.rich-letter .letter-greeting{font-size:25px}
.rich-letter .letter-sign{font-size:17px}
.rich-letter .letter-sign span{font-family:var(--hand-latin);font-size:35px}
.letter-topline .paper-date{font-family:var(--hand);font-size:15px}
/* Hero is a real invitation-card composition */
.hero{padding:18px 18px 84px;background:radial-gradient(circle at 50% 24%,rgba(255,250,238,.55),transparent 30%),linear-gradient(180deg,#f9e6d3 0%,#efc6ad 45%,#c58c79 100%);color:#4d2d2c;align-items:center}
.hero .hero-overlay{display:none}
.hero-card{width:min(410px,92%);min-height:calc(100svh - 110px);padding:32px 24px 26px;border-radius:7px;background:linear-gradient(180deg,rgba(255,249,239,.9),rgba(252,233,214,.74));box-shadow:0 22px 55px rgba(65,34,26,.25);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:12px;border:1px solid rgba(166,75,78,.35);border-radius:3px;pointer-events:none}
.hero-card:after{content:"❁  ❦  ❁";position:absolute;bottom:11px;left:0;right:0;text-align:center;color:var(--terracotta);letter-spacing:8px;font-size:17px;opacity:.75}
.hero-ornament{font-family:var(--hand);font-size:16px;color:var(--terracotta);margin-top:3px;position:relative;z-index:2}
.hero-content{width:100%;margin-top:18px;color:#4e3030;position:relative;z-index:2}
.hero-kicker{font-family:var(--hand-latin);font-size:19px;line-height:1.2;letter-spacing:.8px;margin:6px 0 4px}
.hero h1{font-family:var(--hand-latin);font-size:70px;color:var(--terracotta);line-height:.95;margin:8px 0 6px;text-shadow:0 1px 0 #fff}
.hero h1 span{font-family:inherit;color:var(--terracotta);font-size:36px;vertical-align:middle}
.hero .date{font-family:var(--hand);font-size:17px;letter-spacing:2px;color:#7c3c3d}
.hero .quote{font-family:var(--hand);font-size:17px;line-height:1.7;margin:10px auto 12px;color:#65423c}
.hero-portrait-slot{width:min(255px,76%);aspect-ratio:3/4;margin:5px auto 13px;border:8px solid #f7e9d5;outline:1px solid rgba(166,75,78,.45);box-shadow:0 10px 26px rgba(61,34,27,.18);background:linear-gradient(145deg,#d4b09d,#a77b6e 50%,#e5c8ad);position:relative;overflow:hidden}
.hero-portrait-slot:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.7);z-index:1}
.portrait-placeholder{height:100%;display:grid;place-items:center;text-align:center;padding:20px;font-family:var(--hand);font-size:18px;color:#fff;text-shadow:0 2px 5px rgba(50,20,20,.45)}
.invite-letter-trigger{width:min(260px,84%);height:78px;margin:8px auto 0;position:relative;cursor:pointer;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#f7e4c7,#ebcda4);border:1px solid rgba(140,90,62,.45);box-shadow:0 8px 18px rgba(77,40,29,.18);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:transform .28s ease, box-shadow .28s ease}
.invite-letter-trigger:focus-visible{outline:2px solid #9a3f57;outline-offset:3px}
.invite-letter-trigger:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(77,40,29,.22)}
.letter-flap{position:absolute;left:-1px;right:-1px;top:-1px;height:52px;background:linear-gradient(180deg,#f1d9b7,#e8c59a);border:1px solid rgba(140,90,62,.45);border-bottom:0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.letter-seal{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;display:grid;place-items:center;font-size:15px;box-shadow:0 3px 9px rgba(71,24,37,.35);transition:opacity .25s ease}
.letter-note{font-family:var(--hand);font-size:14px;color:#5f3a33;letter-spacing:.5px;position:relative;z-index:3}
.invite-letter-trigger.open .letter-flap{transform:rotateX(165deg)}
.invite-letter-trigger.open .letter-seal{opacity:0}
.hero .primary{font-family:var(--hand);font-size:16px;padding:10px 25px;border-radius:28px;background:var(--terracotta);box-shadow:0 7px 16px rgba(166,75,78,.22)}
.hero .music-hint{font-family:var(--hand);font-size:14px;color:#66443f;margin-top:9px}
/* paper letter sits on a warm desk like the reference */
.paper-note{background:linear-gradient(135deg,#c9a482,#a9785f);padding:30px 18px}
.paper-note .desk-scene{background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.2),transparent 22%),linear-gradient(135deg,#cba786,#8c604c);border-radius:0;box-shadow:inset 0 0 55px rgba(46,24,17,.22);padding:30px 18px}
.paper-note .rich-letter{box-shadow:0 22px 42px rgba(47,24,16,.32);border-radius:3px 14px 6px 11px}
/* More authentic ink feel on the beginning page */
.beginning .poem,.beginning .closing-line{font-family:var(--hand);font-size:17px;line-height:1.5}
.beginning .script-title{font-family:var(--hand-latin);font-size:43px}
/* Cards use hand lettering for event titles while keeping utility text readable */
.event-card h3,.family-card h3{font-family:var(--hand-latin);font-size:23px;color:var(--terracotta);font-weight:500}
.event-card p,.event-card span{font-family:"DM Sans",sans-serif}
.event-location-btn{font-family:var(--hand);font-size:13px;padding:5px 11px}
/* Mithila corner motif accents */
.floral-tl,.floral-br{display:none}
.section-inner:has(.script-title):before{content:"❧";position:absolute;top:-24px;left:10px;color:var(--terracotta);font-size:23px;opacity:.75}
.section-inner:has(.script-title):after{content:"❧";position:absolute;bottom:-27px;right:10px;color:var(--mithila-green);font-size:23px;opacity:.75;transform:rotate(180deg)}
/* Location sheet gets the same printed border language */
.location-sheet{border:7px solid #f6ead9;outline:1px solid rgba(166,75,78,.35);box-shadow:0 -20px 55px rgba(30,15,15,.32)}
.location-sheet:before{content:"";position:absolute;inset:7px;border:1px dashed rgba(166,75,78,.25);pointer-events:none;border-radius:14px}
/* Better bottom navigation */
.bottom-nav{background:rgba(250,242,229,.97);border-top:2px solid rgba(166,75,78,.18)}
.bottom-nav button{font-family:var(--hand);font-size:11px}.bottom-nav .nav-icon{font-size:17px;color:var(--terracotta)}
@media(max-width:430px){.hero-card{width:94%;min-height:calc(100svh - 104px);padding-left:20px;padding-right:20px}.hero h1{font-size:63px}.hero-portrait-slot{width:62%;}.rich-letter{padding-left:24px;padding-right:24px}.rich-letter .letter-body{font-size:16px}}

@media(max-width:600px){
  .screen.page-design{min-height:100svh;height:auto;padding-top:clamp(52px,9vh,76px)!important;padding-bottom:clamp(64px,10vh,90px)!important}
  .screen.page-design>.section-inner,.screen.page-design>.desk-scene,.screen.page-design>.hero-card{width:min(78%,430px);max-height:none}
  #moments.page-design>.section-inner{width:min(86%,430px)}
  .photo-grid{gap:clamp(6px,2vw,10px)}
  .photo-card{height:clamp(105px,28vw,145px)}
  .photo-card.large{height:clamp(220px,62vw,300px)}
  .gallery-lightbox{padding:48px 42px 28px}
  .lightbox-photo{height:min(68svh,520px)}
}


/* ============================================================
   CONTINUOUS PARCHMENT FLOW (APPROVED MOCKUP)
   ============================================================ */

#invitation.page-design{
  padding-bottom:38px !important;
}

.story-flow{
  position:relative;
  background:#ead5b3;
  margin-top:0;
  padding-top:0;
  overflow:hidden;
}

.story-flow::before,
.story-flow::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:56px;
  pointer-events:none;
  z-index:1;
  background-image:url("assets/mithila side borders.png");
  background-repeat:repeat-y;
  background-size:520px auto;
}

.story-flow::before{left:0;background-position:left top}
.story-flow::after{right:0;background-position:right top}

.story-flow > .screen.page-design{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  min-height:auto !important;
  height:auto !important;
  padding-top:24px !important;
  padding-bottom:24px !important;
}

.story-flow > .screen.page-design::before,
.story-flow > .screen.page-design::after,
.story-flow > .screen.page-design > .page-art{
  display:none !important;
}

.story-flow > .screen.page-design > .section-inner,
.story-flow > .screen.page-design > .desk-scene,
.story-flow > .screen.page-design > .hero-card{
  position:relative;
  z-index:2;
}

/* One-line breathing space between page 2 end and page 3 heading. */
.story-flow > #beginning.page-design{
  padding-top:14px !important;
}

#beginning .chapter-heading{
  margin-top:12px !important;
}

@media (max-width:699px){
  .story-flow > #beginning.page-design{
    padding-top:12px !important;
  }

  #beginning .chapter-heading{
    margin-top:10px !important;
  }
}

/* Page 3 is shorter than later sections; avoid motif shrink by preventing stretch. */
#beginning.page-design > .page-art{
  object-fit:cover !important;
  object-position:center top !important;
}

/* ============================================================
   FINAL STACK FLOW: PAGE3 -> PAGE4 CONTINUOUS CONTENT
   ============================================================ */

.story-flow > .screen.page-design{
  display:block !important;
  min-height:auto !important;
  height:auto !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}

.story-flow > #beginning.page-design,
.story-flow > #moments.page-design,
.story-flow > #events.page-design,
.story-flow > #countdown.page-design{
  min-height:auto !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.story-flow > #beginning.page-design > .section-inner{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.story-flow > #moments.page-design > .section-inner,
.story-flow > #events.page-design > .section-inner,
.story-flow > #countdown.page-design > .section-inner{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#beginning .chapter-heading{margin-top:0 !important;margin-bottom:10px !important}
#beginning .poem{margin:0 auto 8px !important}
#beginning .chapter-closing{margin:8px 0 0 !important}

@media (max-width:699px){
  .story-flow > .screen.page-design{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  #beginning .chapter-heading{margin-bottom:8px !important}
  #beginning .poem{margin:0 auto 6px !important}
  #beginning .chapter-closing{margin-top:6px !important}
}

.story-flow #beginning.page-design{
  margin-top:0 !important;
  padding-top:10px !important;
}

.story-flow #beginning.page-design > .section-inner{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s ease, transform .7s ease;
}

.story-flow #beginning.page-design.is-visible > .section-inner{
  opacity:1;
  transform:translateY(0);
}

.story-flow #moments.page-design,
.story-flow #events.page-design,
.story-flow #countdown.page-design{
  margin-top:0 !important;
}

@media (max-width:699px){
  .story-flow::before,
  .story-flow::after{
    width:48px;
    background-size:440px auto;
  }

  #invitation.page-design{padding-bottom:34px !important}

  .story-flow > .screen.page-design{padding-top:20px !important;padding-bottom:20px !important}
  .story-flow #beginning.page-design{padding-top:8px !important}
}

@media(prefers-reduced-motion:reduce){
  .story-flow #beginning.page-design > .section-inner,
  .story-flow #beginning.page-design.is-visible > .section-inner{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}
@media(max-width:380px){
  .screen.page-design>.section-inner,.screen.page-design>.desk-scene,.screen.page-design>.hero-card{width:84%}
  #moments.page-design>.section-inner{width:90%}
  .photo-card.large{height:56vw}
}

/* The welcome artwork has a tighter inner safe zone than the other pages. */
#welcome.page-design > .hero-card{
  width:72%;
  max-width:370px;
  padding:20px 17px 18px;
}

#welcome .hero-content{margin-top:12px}
#welcome .hero-portrait-slot{width:min(215px,72%);margin:7px auto 11px}

@media(max-width:430px){
  #welcome.page-design > .hero-card{width:70%;padding:18px 14px 16px}
  #welcome .hero-portrait-slot{width:64%}
}

/* Keep page content inside the illustrated top and bottom frame bands. */
.screen.page-design{
  padding-top:78px !important;
  padding-bottom:92px !important;
}

#finale.page-design > .final-content{
  width:72%;
  max-width:390px;
  margin-left:auto;
  margin-right:auto;
}

/* Vertical-only compact layout: preserve the established frame widths. */
.screen.page-design{
  padding-top:48px !important;
  padding-bottom:56px !important;
}

#welcome.page-design{
  padding-top:42px !important;
  padding-bottom:48px !important;
}

#welcome.page-design > .hero-card{
  padding-top:14px;
  padding-bottom:13px;
}

#welcome .hero-content{margin-top:7px}
#welcome .hero-kicker{margin-top:3px;line-height:1.08}
#welcome h1{margin-top:5px;margin-bottom:2px}
#welcome .quote{margin-top:6px;margin-bottom:8px;line-height:1.45}
#welcome .hero-portrait-slot{margin-top:4px;margin-bottom:8px}
#welcome .invite-letter-trigger{width:min(188px,60%);height:64px;margin:4px auto 0;padding-bottom:8px}
#welcome .letter-note{font-size:12px;letter-spacing:.3px}
#welcome .letter-flap{height:44px}
#welcome .letter-seal{top:8px;width:22px;height:22px;font-size:11px}
#welcome .music-hint{margin-top:5px}

#invitation.page-design > .desk-scene{padding-top:10px;padding-bottom:10px}
#invitation.page-design .rich-letter{padding-top:13px;padding-bottom:15px}
#invitation .letter-ornament{margin-top:10px;margin-bottom:9px}
#invitation .letter-greeting{margin-top:7px;margin-bottom:3px}
#invitation .letter-body{font-size:13.5px;line-height:1.28}
#invitation .letter-body p{margin-top:4px;margin-bottom:4px}
#invitation .letter-sign{margin-top:8px;line-height:1.12}

#beginning .poem{font-size:14px;line-height:1.2}
#beginning .poem p{margin-top:7px;margin-bottom:7px}
#beginning .divider{margin-top:10px;margin-bottom:10px}
#beginning .couple-script{
  margin-top:3px;
  margin-bottom:4px;
  font-size:29px;
  line-height:1;
  text-align:right;
  width:100%;
  box-sizing:border-box;
  padding-right:20%;
}

#moments .subtitle,#families .subtitle,#events .subtitle{margin-bottom:15px}
#moments .photo-caption{margin-top:10px;margin-bottom:8px;line-height:1.55}

#families .family-grid{gap:7px}
#families .family-card{padding-top:12px;padding-bottom:12px}
#families .family-card h3{margin-top:4px;margin-bottom:4px}
#families .family-card p{line-height:1.45;margin-top:4px;margin-bottom:8px}
#families .family-photo{height:150px;margin-top:10px}

#events .event-list{gap:6px}
#events .event-thumb{width:72px}
#events .event-card>div:last-child{padding-top:7px;padding-bottom:7px}
#events .event-card h3{font-size:21px;line-height:1.1;margin-top:2px;margin-bottom:3px}
#events .event-card p{font-size:12px;line-height:1.28;margin-bottom:3px}
#events .event-card>div>span{font-size:12px;line-height:1.3}
#events .event-location-btn{right:7px;bottom:6px;padding-top:4px;padding-bottom:4px;font-size:11px}

#beginning .script-title{
  font-size:30px;
  white-space:nowrap;
  line-height:1.05;
  margin-top:34px;
}

/* Remove the old corner signs from the final four content pages. */
#beginning.page-design .section-inner:before,
#beginning.page-design .section-inner:after,
#moments.page-design .section-inner:before,
#moments.page-design .section-inner:after,
#families.page-design .section-inner:before,
#families.page-design .section-inner:after,
#events.page-design .section-inner:before,
#events.page-design .section-inner:after,
#countdown.page-design .section-inner:before,
#countdown.page-design .section-inner:after,
#finale.page-design .section-inner:before,
#finale.page-design .section-inner:after{
  display:none;
}

/* Pages 1 and 2 use the parchment area built into the frame artwork. */
#welcome.page-design > .hero-card{
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}

#welcome.page-design > .hero-card:before,
#welcome.page-design > .hero-card:after{
  display:none;
}

#invitation.page-design > .desk-scene{
  background:transparent;
  box-shadow:none;
  border-radius:0;
}

#invitation.page-design .rich-letter{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  transform:rotate(-0.8deg);
  transform-origin:center center;
}

#invitation.page-design .rich-letter:after{
  display:none;
}

/* The finale can grow with its message instead of being clipped by a fixed viewport. */
#finale.page-design{
  min-height:100svh;
  height:auto;
  min-height:calc(100svh + 72px);
  align-items:center;
  overflow:visible;
  padding-top:92px !important;
  padding-bottom:145px !important;
}

#finale.page-design > .final-content{
  margin-top:0;
  transform:none;
}

#finale .script-title{font-size:32px;margin-bottom:0}
#finale p{line-height:1.45;margin-top:8px;margin-bottom:8px}
#finale .divider{margin-top:9px;margin-bottom:9px}
#finale .final-actions{gap:6px;margin-top:8px}
#finale .final-actions .primary,
#finale .final-actions .share-btn{padding-top:9px;padding-bottom:9px}
#finale .couple-script{font-size:34px;margin-top:8px;margin-bottom:8px}
#events .primary{margin-top:10px}

/* ===== Final visual updates ===== */
.mithila-page .mithila-frame{
  position:absolute;
  inset:6px;
  z-index:12;
  pointer-events:none;
  background:url("assets/mithila-border_1.jpg") center center / 100% 100% no-repeat;
  opacity:1;
  filter:drop-shadow(0 1px 1px rgba(74,42,30,.08));
}
.mithila-page{
  --frame-gap:18px;
  padding-left:calc(var(--frame-gap) + 5px);
  padding-right:calc(var(--frame-gap) + 5px);
}
.hero{
  padding-left:calc(var(--frame-gap) + 4px);
  padding-right:calc(var(--frame-gap) + 4px);
  background:
    radial-gradient(circle at 50% 14%,rgba(255,255,255,.65),transparent 28%),
    linear-gradient(180deg,#f8e5d2 0%,#f0cdb7 52%,#d3a184 100%);
}
.hero-card{
  width:min(430px,91%);
  min-height:calc(100svh - 112px);
  padding:30px 24px 22px;
  background:linear-gradient(180deg,rgba(255,250,242,.96),rgba(249,229,208,.9));
  border:1px solid rgba(157,83,67,.22);
}
.hero-card:before{
  inset:14px;
  border:1px solid rgba(166,75,78,.38);
}
.hero-portrait-slot{
  width:min(270px,78%);
  aspect-ratio:3/4;
  margin:9px auto 15px;
  padding:0;
  background:#ead6be;
  border:7px solid #f8ead7;
  outline:1px solid rgba(139,66,61,.5);
  box-shadow:0 13px 30px rgba(61,34,27,.2);
  overflow:hidden;
}
.hero-portrait-slot:before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.72);
  z-index:2;
  pointer-events:none;
}
.hero-portrait-slot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.95) contrast(.97);
}
.portrait-placeholder{display:none}

/* Keep the left and right border artwork visually mirrored and uninterrupted. */
.screen .mithila-frame{will-change:auto}
@media(max-width:430px){
  .mithila-page{--frame-gap:13px}
  .hero-card{width:92%;padding-left:19px;padding-right:19px}
  .hero-portrait-slot{width:69%}
  #welcome .invite-letter-trigger{width:min(164px,56%);height:60px}
}
/* ============================================================
   FINAL MITHILA PAGE FRAME SYSTEM
   One PNG artwork = one complete page frame.
   Content is kept inside the artwork safe-zone.
   ============================================================ */

.screen.page-design {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 70px 0 80px !important;

    background: #ead5b3;
    border-bottom: 0;
}

/* ============================================================
   MITHILA PNG FRAME
   ============================================================ */

.screen.page-design > .page-art {
    position: absolute;

    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center center;

    z-index: 0;
    pointer-events: none;

    display: block;

    background-image: none;
    background-color: #ead5b3;

    border: 0;
    opacity: 1;
    transform: none;
    transform-origin: center center;
    animation: none !important;
}

/* ============================================================
   REMOVE ALL OLD CSS / SVG BORDERS
   ============================================================ */

.screen.page-design::before,
.screen.page-design::after,
.mithila-frame {
    display: none !important;
}

/* ============================================================
   CONTENT SAFE ZONE
   ============================================================ */

.screen.page-design > .section-inner,
.screen.page-design > .desk-scene,
.screen.page-design > .hero-card {

    position: relative;
    z-index: 2;

    box-sizing: border-box;

    /*
       IMPORTANT:
       This controls how far the content sits
       from the Mithila side artwork.
    */

    width: 72%;
    max-width: 430px;

    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   PAGE 1 — WELCOME
   ============================================================ */

#welcome.page-design {

    padding-top: 55px !important;
    padding-bottom: 70px !important;
}

#welcome.page-design > .hero-card {

    width: 76%;
    max-width: 390px;

    min-height: 0;
    height: auto;

    margin: 0 auto;

    padding: 24px 20px 22px;

    box-sizing: border-box;
}

/* Portrait */

#welcome .hero-portrait-slot {

    width: min(235px, 76%);

    aspect-ratio: 3 / 4;

    margin: 10px auto 12px;
}

/* ============================================================
   PAGE 2 — HANDWRITTEN INVITATION
   ============================================================ */

#invitation.page-design {

    padding-top: 55px !important;
    padding-bottom: 70px !important;
}

#invitation.page-design > .desk-scene {

    width: 76%;
    max-width: 405px;

    min-height: 0;
    height: auto;

    margin: 0 auto;

    padding: 16px 12px;

    box-sizing: border-box;

    overflow: visible;
}

/* Actual handwritten paper */

#invitation.page-design .rich-letter {

    width: 100%;
    max-width: 100%;

    min-height: 0;
    height: auto;

    margin: 0 auto;

    padding: 24px 24px 30px;

    box-sizing: border-box;

    overflow: visible;
}

/* Handwritten text */

#invitation .letter-greeting {

    margin-top: 12px;
    margin-bottom: 5px;
}

#invitation .letter-body {

    line-height: 1.68;
}

#invitation .letter-body p {

    margin-top: 9px;
    margin-bottom: 9px;
}

#invitation .letter-sign {

    line-height: 1.45;
}

/* ============================================================
   OTHER PAGES
   ============================================================ */

#beginning.page-design > .section-inner,
#moments.page-design > .section-inner,
#families.page-design > .section-inner,
#events.page-design > .section-inner,
#location.page-design > .section-inner,
#countdown.page-design > .section-inner,
#blessings.page-design > .section-inner,
#rsvp.page-design > .section-inner,
#finale.page-design > .section-inner {

    width: 72%;
    max-width: 430px;

    margin-left: auto;
    margin-right: auto;
}

  #events.page-design > .section-inner {
    width: 76%;
    max-width: 500px;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }

/* ============================================================
   EVENTS
   ============================================================ */

#events.page-design .event-list {

    width: 100%;
    box-sizing: border-box;
}

  #moments .script-title,
  #events .script-title {

    margin-top: 12px;
  }

  #calendarBtn {

    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 12px;
    margin-bottom: 14px;
  }

/* ============================================================
   FAMILY CARDS
   ============================================================ */

#families.page-design .family-grid {

    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   PHOTO GRID
   ============================================================ */

#moments.page-design .photo-grid {

    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   LOCATION
   ============================================================ */

#location.page-design .location {

    width: 100%;
}

/* ============================================================
   REMOVE FOOTER / BOTTOM NAV
   ============================================================ */

.bottom-nav,
.bottom-navigation,
footer {

    display: none !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .screen.page-design {

        padding-top: 60px !important;
        padding-bottom: 70px !important;
    }

    /*
       Main safe-zone.
       Increase this number if text touches the border.
       Decrease it if too much empty space appears.
    */

    .screen.page-design > .section-inner,
    .screen.page-design > .desk-scene,
    .screen.page-design > .hero-card {

        width: 72%;
        max-width: none;

        margin-left: auto;
        margin-right: auto;
    }

    /* PAGE 1 */

    #welcome.page-design > .hero-card {

        width: 76%;

        padding: 22px 18px 20px;
    }

    #welcome .hero-portrait-slot {

        width: 68%;
    }

    /* PAGE 2 */

    #invitation.page-design > .desk-scene {

        width: 76%;

        padding-left: 10px;
        padding-right: 10px;
    }

    #invitation.page-design .rich-letter {

        padding: 21px 18px 27px;
    }

    /* Other pages */

    #beginning.page-design > .section-inner,
    #moments.page-design > .section-inner,
    #families.page-design > .section-inner,
    #events.page-design > .section-inner,
    #location.page-design > .section-inner,
    #countdown.page-design > .section-inner,
    #blessings.page-design > .section-inner,
    #rsvp.page-design > .section-inner,
    #finale.page-design > .section-inner {

        width: 72%;
    }
}

/* ============================================================
   EXTRA SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .screen.page-design > .section-inner,
    .screen.page-design > .desk-scene,
    .screen.page-design > .hero-card {

        width: 69%;
    }

    #welcome.page-design > .hero-card {

        width: 73%;
    }

    #invitation.page-design > .desk-scene {

        width: 73%;
    }
}

/* Desktop presentation: the invitation grows with the browser instead of
   remaining a narrow phone-sized card. Mobile rules above stay unchanged. */
@media (min-width: 700px) {
  .site-shell{width:min(92vw,860px);max-width:none;margin-left:auto;margin-right:auto}
  .topbar{width:min(92vw,860px)}
  .screen.page-design{min-height:900px}
  .screen.page-design > .section-inner,
  .screen.page-design > .desk-scene,
  .screen.page-design > .hero-card{width:72%;max-width:700px}
  #welcome.page-design > .hero-card{width:70%;max-width:520px}
  #invitation.page-design > .desk-scene{width:76%;max-width:650px}
  #moments.page-design > .section-inner{width:78%;max-width:720px}
  .script-title{font-size:42px}
  .subtitle{font-size:12px}
  .section-inner{font-size:17px}
  .photo-card{height:150px}
  .photo-card.large{height:300px}
  .lightbox-stage{width:min(620px,100%)}
  .lightbox-photo{height:min(76vh,720px)}

  /* Give the first three pages a fuller handwritten reading scale. */
  #welcome .hero-kicker{font-size:24px;line-height:1.2}
  #welcome h1{font-size:86px}
  #welcome .date{font-size:20px}
  #welcome .quote{font-size:20px;line-height:1.65;margin-top:16px;margin-bottom:18px}
  #welcome .hero-portrait-slot{width:min(270px,76%)}
  #welcome .music-hint{font-size:16px;margin-top:12px}

  #invitation.page-design .rich-letter{padding-top:24px;padding-bottom:28px}
  #invitation .paper-date{font-size:18px}
  #invitation .letter-ornament{font-size:20px;margin-top:18px;margin-bottom:14px}
  #invitation .letter-greeting{font-size:29px;margin-top:16px}
  #invitation .letter-body{font-size:18px;line-height:1.7}
  #invitation .letter-body p{margin-top:10px;margin-bottom:10px}
  #invitation .letter-sign{font-size:19px;line-height:1.35}

  #beginning .script-title{font-size:45px;line-height:1.1}
  #beginning .poem{font-size:19px;line-height:1.55}
  #beginning .poem p{margin-top:16px;margin-bottom:16px}
  #beginning .divider{margin-top:18px;margin-bottom:18px}
  #beginning .closing-line{font-size:19px;line-height:1.65}
  #beginning .couple-script{font-size:39px;margin-top:8px;margin-bottom:8px;text-align:right;padding-right:20%;box-sizing:border-box}

  #beginning.page-design > .section-inner{width:62%;max-width:520px}
  #moments.page-design > .section-inner{width:70%;max-width:680px}
  #moments .script-title{margin-top:18px}
  #events.page-design > .section-inner{width:72%;max-width:700px}
  #finale.page-design > .final-content{width:64%;max-width:360px}
  #events .event-thumb{width:80px}
}

/* Keep the text and gallery safely inside the painted side borders. */
@media (max-width: 699px) {
  #beginning.page-design > .section-inner{width:68%}
  #moments.page-design > .section-inner{width:72%;padding-left:6px;padding-right:6px;box-sizing:border-box}
  #events.page-design > .section-inner{width:68%;padding-left:8px;padding-right:8px;box-sizing:border-box}
  #events .script-title{font-size:31px;line-height:1.08;margin-top:16px}
  #events .event-card{align-items:stretch}
  #events .event-card>div:last-child{padding:8px 10px 8px 0}
  #events .event-location-btn{position:static;display:inline-flex;align-items:center;margin-top:6px}
  #calendarBtn{font-size:11px;padding:7px 16px;margin-bottom:18px}
  #finale.page-design > .final-content{width:68%}
}

.screen.page-design.is-visible > .section-inner,
.screen.page-design.is-visible > .desk-scene,
.screen.page-design.is-visible > .hero-card,
.screen.page-design.is-visible > .final-content{
  animation-delay:120ms;
}

/* Shift the existing content tiers behind the border reveal. */
.screen.page-design.is-visible .script-title,
.screen.page-design.is-visible .hero-ornament{
  animation-delay:120ms !important;
}
.screen.page-design.is-visible .subtitle{
  animation-delay:270ms !important;
}
.screen.page-design.is-visible .poem,
.screen.page-design.is-visible .photo-grid,
.screen.page-design.is-visible .family-grid,
.screen.page-design.is-visible .event-hint,
.screen.page-design.is-visible .count-grid,
.screen.page-design.is-visible .section-inner > form,
.screen.page-design.is-visible .final-content > p:first-child{
  animation-delay:470ms !important;
}
.screen.page-design.is-visible .photo-caption,
.screen.page-design.is-visible .divider,
.screen.page-design.is-visible .closing-line{
  animation-delay:620ms !important;
}
.screen.page-design.is-visible .photo-card:nth-child(1),
.screen.page-design.is-visible .family-card:nth-child(1),
.screen.page-design.is-visible .event-card:nth-child(1),
.screen.page-design.is-visible .count-grid > div:nth-child(1){animation-delay:620ms !important}
.screen.page-design.is-visible .photo-card:nth-child(2),
.screen.page-design.is-visible .family-card:nth-child(2),
.screen.page-design.is-visible .event-card:nth-child(2),
.screen.page-design.is-visible .count-grid > div:nth-child(2){animation-delay:720ms !important}
.screen.page-design.is-visible .photo-card:nth-child(3),
.screen.page-design.is-visible .event-card:nth-child(3),
.screen.page-design.is-visible .count-grid > div:nth-child(3){animation-delay:820ms !important}
.screen.page-design.is-visible .photo-card:nth-child(4),
.screen.page-design.is-visible .event-card:nth-child(4),
.screen.page-design.is-visible .count-grid > div:nth-child(4){animation-delay:920ms !important}
.screen.page-design.is-visible .photo-card:nth-child(5),
.screen.page-design.is-visible .event-card:nth-child(5){animation-delay:1020ms !important}
.screen.page-design.is-visible .desk-scene > .paper{animation-delay:120ms !important}

/* Handwritten reveal for the invitation letter only. */
#invitation.page-design.is-visible > .desk-scene > .rich-letter{
  animation:none !important;
  opacity:1;
  transform:rotate(-0.8deg);
}

#invitation.page-design.is-visible .letter-ornament,
#invitation.page-design.is-visible .paper-date,
#invitation.page-design.is-visible .letter-greeting,
#invitation.page-design.is-visible .letter-body p,
#invitation.page-design.is-visible .letter-sign{
  animation:handwrittenReveal .72s cubic-bezier(.2,.75,.25,1) both;
}

#invitation.page-design.is-visible .letter-ornament{animation-delay:120ms}
#invitation.page-design.is-visible .paper-date{animation-delay:270ms}
#invitation.page-design.is-visible .letter-greeting{animation-delay:420ms}
#invitation.page-design.is-visible .letter-body p:nth-child(1){animation-delay:540ms}
#invitation.page-design.is-visible .letter-body p:nth-child(2){animation-delay:670ms}
#invitation.page-design.is-visible .letter-body p:nth-child(3){animation-delay:800ms}
#invitation.page-design.is-visible .letter-body p:nth-child(4){animation-delay:930ms}
#invitation.page-design.is-visible .letter-sign{animation-delay:1190ms}

@keyframes handwrittenReveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  #invitation.page-design.is-visible .letter-ornament,
  #invitation.page-design.is-visible .paper-date,
  #invitation.page-design.is-visible .letter-greeting,
  #invitation.page-design.is-visible .letter-body p,
  #invitation.page-design.is-visible .letter-sign{
    animation:none;
    opacity:1;
    transform:none;
  }
}

/* Event cards arrive like invitation cards being placed one after another. */
.screen.events.page-design.is-visible .event-card{
  animation:eventCardReveal .72s cubic-bezier(.2,.75,.25,1) both !important;
  transition:transform .24s ease, box-shadow .24s ease;
}
.screen.events.page-design.is-visible .event-card:nth-child(1){animation-delay:120ms !important}
.screen.events.page-design.is-visible .event-card:nth-child(2){animation-delay:240ms !important}
.screen.events.page-design.is-visible .event-card:nth-child(3){animation-delay:360ms !important}
.screen.events.page-design.is-visible .event-card:nth-child(4){animation-delay:480ms !important}
.screen.events.page-design.is-visible .event-card:nth-child(5){animation-delay:600ms !important}
@keyframes eventCardReveal{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@media (hover:hover){
  .screen.events.page-design.is-visible .event-card:hover{
    transform:translateY(-4px);
  }
}

  /* Quiet button feedback: lift on hover and compress gently on press. */
  .primary,
  .outline,
  .event-location-btn,
  .drawer nav button,
  .bottom-nav button{
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .primary:hover,
  .outline:hover,
  .event-location-btn:hover,
  .drawer nav button:hover,
  .bottom-nav button:hover{
    transform:translateY(-2px);
  }
  .primary:active,
  .outline:active,
  .event-location-btn:active,
  .drawer nav button:active,
  .bottom-nav button:active{
    transform:translateY(0) scale(.97);
  }

/* Event-location modal: soft backdrop, upward sheet, then content. */
.location-modal.open,
.location-modal.closing{
  display:flex;
}
.location-modal.open .location-backdrop{
  animation:locationBackdropIn .45s ease both;
}
.location-modal.closing .location-backdrop{
  animation:locationBackdropOut .45s ease both;
}
.location-modal.open .location-sheet{
  animation:locationSheetIn .46s cubic-bezier(.2,.8,.2,1) both;
}
.location-modal.closing .location-sheet{
  animation:locationSheetOut .46s cubic-bezier(.4,0,.8,.2) both;
}
.location-modal.open .location-sheet > *:not(.modal-close){
  animation:locationContentIn .36s ease both;
  animation-delay:.16s;
}
.location-sheet .modal-close{
  z-index:4;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  line-height:1;
  cursor:pointer;
}

/* A one-time, barely-there cinematic settle for the wedding photographs. */
.photo-card img{
  transform:scale(1);
  transform-origin:center center;
  animation:none;
  will-change:auto;
}
@keyframes photoCinematic{
  from{transform:scale(1)}
  to{transform:scale(1.02)}
}
@media(prefers-reduced-motion:reduce){
  .photo-card img{
    animation:none;
    transform:none;
    will-change:auto;
  }
}

/* Calm, one-time motion for existing Mithila decorative details. */
.screen.is-visible .petal,
.screen.is-visible .hero-ornament,
.screen.is-visible .tiny-motif,
.location-modal.open .mithila-mini-art span{
  animation:decorativeDrift 8s ease-in-out 1 both;
  will-change:auto;
}
.screen.is-visible .p2{animation-delay:.35s}
.screen.is-visible .p3{animation-delay:.7s}
.location-modal.open .mithila-mini-art span:nth-child(2){animation-delay:.25s}
@keyframes decorativeDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .screen.is-visible .petal,
  .screen.is-visible .hero-ornament,
  .screen.is-visible .tiny-motif,
  .location-modal.open .mithila-mini-art span{
    animation:none;
    transform:none;
    will-change:auto;
  }
}
@keyframes locationBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes locationBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes locationSheetIn{from{opacity:0;transform:translateY(36px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes locationSheetOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(36px) scale(.98)}}
@keyframes locationContentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Subtle staggered reveal for the countdown cards and numbers. */
.screen.countdown.page-design.is-visible .count-grid > div{
  animation:countdownCardReveal .72s cubic-bezier(.2,.75,.25,1) both !important;
}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(1){animation-delay:120ms !important}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(2){animation-delay:240ms !important}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(3){animation-delay:360ms !important}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(4){animation-delay:480ms !important}
.screen.countdown.page-design.is-visible .count-grid strong{
  animation:countdownNumberReveal .5s ease both;
}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(1) strong{animation-delay:220ms}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(2) strong{animation-delay:340ms}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(3) strong{animation-delay:460ms}
.screen.countdown.page-design.is-visible .count-grid > div:nth-child(4) strong{animation-delay:580ms}
@keyframes countdownCardReveal{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes countdownNumberReveal{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .screen.countdown.page-design.is-visible .count-grid > div,
  .screen.countdown.page-design.is-visible .count-grid strong{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}

/* Combined countdown and closing invitation composition. */
#countdown.page-design{
  min-height:100svh;
  height:auto;
  align-items:center;
  overflow:hidden;
}
#countdown.page-design > .section-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:430px;
}
#countdown .script-title{margin-bottom:4px}
#countdown .subtitle{margin-bottom:20px}
#countdown .count-grid{width:100%;margin:0 0 46px;gap:8px}
#countdown .count-grid div{padding:11px 3px}
#countdown .count-grid strong{font-size:25px}
#countdown .closing-divider{margin:0 0 14px}
#countdown .closing-thanks{text-align:center}
#countdown .closing-thanks p{margin:5px 0;line-height:1.5}
#countdown .closing-thanks .closing-title{
  color:var(--terracotta);
  font-family:var(--hand-latin);
  font-size:38px;
  line-height:1.05;
  margin:0 0 6px;
}
#countdown .closing-thanks .devanagari{font-size:15px;margin-top:10px}
#countdown .closing-actions{
  --closing-button-size:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px 0 8px;
}
#countdown .contact-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
#countdown .phone-button,
#countdown .whatsapp-button{
  width:var(--closing-button-size);
  height:var(--closing-button-size);
  flex:0 0 var(--closing-button-size);
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:20px;
}
#countdown .phone-button{background:var(--maroon)}
#countdown .whatsapp-button{background:#25D366;border-color:#25D366}
#countdown .closing-actions .primary{margin:0}
#countdown .closing-actions > .primary{
  height:var(--closing-button-size);
  padding:0 14px;
  line-height:1.2;
}
#countdown .closing-actions .share-icon{
  border:1px solid rgba(184,139,80,.65);
}
#countdown .closing-actions .share-svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#countdown .closing-names{
  font-size:40px;
  line-height:1;
  margin:6px 0 4px;
  text-align:right;
  width:100%;
  padding-right:18px;
  box-sizing:border-box;
}
#countdown .closing-date{
  margin:0;
  letter-spacing:2px;
  font-size:12px;
}

/* Closing-page sequence: title, countdown, thanks, then signature. */
#countdown.page-design.is-visible .closing-divider{animation-delay:620ms !important}
#countdown.page-design.is-visible .closing-thanks{animation:scrollReveal .72s cubic-bezier(.2,.75,.25,1) both;animation-delay:720ms !important}
#countdown.page-design.is-visible .closing-actions{animation:scrollReveal .72s cubic-bezier(.2,.75,.25,1) both;animation-delay:870ms !important}
#countdown.page-design.is-visible .closing-names{animation:scrollReveal .72s cubic-bezier(.2,.75,.25,1) both;animation-delay:1020ms !important}
#countdown.page-design.is-visible .closing-date{animation:scrollReveal .72s cubic-bezier(.2,.75,.25,1) both;animation-delay:1120ms !important}

@media (max-width:699px){
  #countdown.page-design{padding-top:52px !important;padding-bottom:68px !important}
  #countdown.page-design > .section-inner{width:72%;max-width:330px}
  #countdown .script-title{font-size:32px}
  #countdown .subtitle{font-size:9px;letter-spacing:1.5px;margin-bottom:16px}
  #countdown .count-grid{gap:5px;margin-bottom:34px}
  #countdown .count-grid div{padding:9px 2px}
  #countdown .count-grid strong{font-size:22px}
  #countdown .count-grid span{font-size:8px}
  #countdown .closing-thanks .closing-title{font-size:34px}
  #countdown .closing-thanks p{font-size:13px}
  #countdown .closing-thanks .devanagari{font-size:13px}
  #countdown .closing-names{font-size:36px}
}

@media (min-width:700px){
  #countdown.page-design > .section-inner{max-width:560px}
  #countdown .script-title{font-size:46px}
  #countdown .count-grid{margin-bottom:26px}
  #countdown .count-grid div{padding:14px 5px}
  #countdown .count-grid strong{font-size:30px}
  #countdown .closing-thanks .closing-title{font-size:46px}
  #countdown .closing-names{font-size:52px}
}

/* Closing-page reveal: atmosphere first, then the handwritten message. */
.screen.final.page-design.is-visible .final-overlay{
  animation:finalAtmosphere .9s ease both;
}
.screen.final.page-design.is-visible > .final-content > *{
  animation:finalContentReveal .72s cubic-bezier(.2,.75,.25,1) both !important;
}
.screen.final.page-design.is-visible .final-content > .script-title{animation-delay:200ms !important}
.screen.final.page-design.is-visible .final-content > p:nth-of-type(2){animation-delay:250ms !important}
.screen.final.page-design.is-visible .final-content > .divider{animation-delay:320ms !important}
.screen.final.page-design.is-visible .final-content > p:nth-of-type(3){animation-delay:380ms !important}
.screen.final.page-design.is-visible .final-actions{animation-delay:450ms !important}
.screen.final.page-design.is-visible .final-content > .couple-script{animation-delay:530ms !important}
.screen.final.page-design.is-visible .final-content > p:last-child{animation-delay:600ms !important}
@keyframes finalAtmosphere{from{opacity:0}to{opacity:1}}
@keyframes finalContentReveal{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   HOTFIX: PAGE-2 SAFE-ZONE + PAGE-2/3 SEAM ALIGNMENT
   ============================================================ */

#invitation.page-design{
  background:#ead5b3 !important;
  padding-bottom:0 !important;
  min-height:auto !important;
  height:auto !important;
  align-items:flex-start !important;
  --invitation-frame-gutter: clamp(68px, 16vw, 100px);
}

#invitation.page-design > .page-art{
  /* Show the intact frame's top 1400 of 1536 pixels, excluding its bottom band.
     The section clips the excess while keeping both side borders continuous. */
  height:calc(100% * 1536 / 1400);
  object-fit:fill;
  object-position:center top !important;
}

#invitation.page-design > .desk-scene{
  width:auto !important;
  max-width:min(348px, calc(100% - (var(--invitation-frame-gutter) * 2))) !important;
  padding:6px 6px 12px !important;
  min-height:auto !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#invitation.page-design .rich-letter{
  width:100% !important;
  max-width:100% !important;
  padding:12px 18px 8px !important;
  min-height:0 !important;
  height:auto !important;
  transform:none !important;
}

#invitation .letter-topline{
  justify-content:space-between !important;
}

#invitation .tiny-motif{
  display:inline-block !important;
}

#invitation .paper-date{
  text-align:right !important;
}

#invitation .letter-ornament,
#invitation .letter-sign{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#invitation .letter-sign{margin-bottom:0 !important}

#invitation .letter-greeting,
#invitation .letter-body{
  width:100%;
  max-width:none;
  margin-left:auto !important;
  margin-right:auto !important;
}

#invitation .letter-greeting{
  margin-top:8px !important;
}

#invitation .letter-greeting{
  text-align:left;
}

#invitation .letter-body{
  text-align:left;
}

#invitation .letter-body p{
  text-align:left;
}

#invitation .letter-body .invite-verse{
  border-left:2px solid rgba(146,43,74,.25) !important;
  padding-left:8px !important;
}

#invitation .letter-body{
  line-height:1.58 !important;
  font-size:15.6px;
  letter-spacing:.08px;
}

.story-flow{
  margin-top:-1px !important;
  background:#ead5b3 !important;
}

/* Match page-2 side edge thickness with explicit left/right border strips. */
.story-flow::before,
.story-flow::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:52px;
  pointer-events:none;
  z-index:1;
  background-image:url("assets/mithila side borders.png");
  background-repeat:repeat-y;
  background-size:520px auto;
}

.story-flow::before{left:0;background-position:left top}
.story-flow::after{right:0;background-position:right top}

.story-flow > .screen.page-design{
  padding-top:10px !important;
  padding-bottom:20px !important;
}

.story-flow #beginning.page-design{
  padding-top:0 !important;
}

.story-flow #beginning.page-design .script-title{
  margin-top:0 !important;
}

#beginning .chapter-heading{
  font-size:31px;
  line-height:1.16;
  font-weight:700;
  max-width:92%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:14px;
}

#beginning .poem{
  max-width:340px;
  margin:0 auto;
  font-size:17px;
  line-height:1.7;
}

#beginning .chapter-closing{
  margin:14px 0 0;
  font-size:28px;
  color:var(--maroon);
  font-family:"Great Vibes","Cormorant Garamond",cursive;
  font-weight:700;
  text-align:right;
  width:100%;
}

@media (max-width:699px){
  #invitation.page-design{--invitation-frame-gutter: clamp(64px, 16vw, 96px)}

  #invitation.page-design > .desk-scene{
    max-width:min(346px, calc(100% - (var(--invitation-frame-gutter) * 2))) !important;
    padding-top:4px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  #invitation.page-design .rich-letter{
    padding:10px 14px 22px !important;
    transform:none !important;
  }

  #invitation .letter-body{font-size:15.1px;line-height:1.55 !important}

  #beginning .chapter-heading{font-size:26px;line-height:1.18;font-weight:700;max-width:94%}
  #beginning .poem{font-size:15.5px;line-height:1.62;max-width:286px}
  #beginning .chapter-closing{font-size:24px;margin-top:10px}

  .story-flow > .screen.page-design{
    padding-top:8px !important;
  }

  .story-flow::before,
  .story-flow::after{
    width:44px;
    background-size:440px auto;
  }
}
@media(prefers-reduced-motion:reduce){
  .screen.final.page-design.is-visible .final-overlay,
  .screen.final.page-design.is-visible > .final-content > *{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}

/* ============================================================
   CONNECTED BORDER SEQUENCE (PAGES 3-7)
   ============================================================ */

#beginning.page-design,
#moments.page-design,
#families.page-design,
#events.page-design,
#countdown.page-design{
  align-items:flex-start;
  border-bottom:0;
  min-height:0;
  height:auto;
  background:#ead5b3 !important;
}

/* Pages 1-2 share the same background color as pages 3-7 for a universal look. */
#welcome.page-design,
#invitation.page-design{
  background:#ead5b3 !important;
}

#beginning.page-design:after,
#moments.page-design:after,
#families.page-design:after,
#events.page-design:after,
#countdown.page-design:after{
  display:none;
}

/* Pages 3-6 now use dedicated artwork variants (top/side/lower). */
#beginning.page-design > .page-art,
#moments.page-design > .page-art,
#families.page-design > .page-art,
#events.page-design > .page-art{
  clip-path:none;
  background-color:#ead5b3;
}

/* Page 3 artwork is a complete frame (top + both sides + bottom),
   same as the other bordered pages, so it is shown uncropped. */
#beginning.page-design > .page-art{
  object-fit:fill;
  object-position:center top;
}

/* Keep page-3 content visually inside the bordered canvas. */
#beginning.page-design{
  align-items:center;
  background:#ead5b3 !important;
  padding-top:96px !important;
  padding-bottom:34px !important;
}

#beginning.page-design > .section-inner{
  width:68% !important;
  max-width:336px;
  margin-top:8px;
  padding-left:10px;
  padding-right:10px;
  box-sizing:border-box;
}

/* The closing page uses the lower-border artwork. */
#countdown.page-design > .page-art{clip-path:none}

/* Leave room for the painted bottom band below the closing buttons. */
.story-flow > #countdown.screen.page-design{
  padding-bottom:96px !important;
}

/* Reuse removed border space for content instead of leaving empty strips. */
#beginning.page-design{padding-top:62px !important;padding-bottom:22px !important}
#moments.page-design,
#families.page-design{padding-top:24px !important;padding-bottom:22px !important}
#events.page-design,
#countdown.page-design{padding-top:24px !important;padding-bottom:76px !important}

/* Slight overlap removes hairline seams between stacked bordered pages. */
#moments.page-design,
#events.page-design,
#countdown.page-design{margin-top:-3px}

/* Overlap page 4 onto page 3 so they read as one continuous page. */
#moments.page-design{margin-top:-15px !important}

@media (max-width:699px){
  /* Keep page 3 and 4 border scaling consistent so side art does not look mismatched. */
  #beginning.page-design,
  #moments.page-design{min-height:80svh}

  #beginning.page-design > .page-art,
  #moments.page-design > .page-art,
  #families.page-design > .page-art,
  #events.page-design > .page-art{clip-path:none}
  #countdown.page-design > .page-art{clip-path:none}

  #beginning.page-design{padding-top:92px !important;padding-bottom:22px !important;background:#ead5b3 !important}
  #beginning.page-design > .section-inner{width:68% !important;max-width:336px;margin-top:6px;padding-left:10px;padding-right:10px;box-sizing:border-box}
  #moments.page-design,
  #families.page-design{padding-top:18px !important;padding-bottom:14px !important}
  #events.page-design,
  #countdown.page-design{padding-top:18px !important;padding-bottom:64px !important}

  #moments.page-design,
  #events.page-design,
  #countdown.page-design{margin-top:-3px}

  #moments.page-design{margin-top:-15px !important}
}

/* ============================================================
   FINAL OVERRIDE: MATCH PAGE-2 BORDER SCALE ON PAGE-3+
   ============================================================ */

.story-flow{
  --flow-border-strip:52px;
  --flow-content-gap:12px;
}

.story-flow::before,
.story-flow::after{
  width:var(--flow-border-strip) !important;
  background-size:520px auto !important;
}

/* Force one continuous bordered parchment area from page 3 onward. */
.story-flow > .screen.page-design{
  margin-top:0 !important;
  padding-top:14px !important;
  padding-bottom:22px !important;
  min-height:0 !important;
  height:auto !important;
  border-bottom:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.story-flow > #beginning.page-design{
  padding-top:6px !important;
}

/* Never let section content enter border lanes. */
.story-flow > .screen.page-design > .section-inner,
.story-flow > .screen.page-design > .desk-scene,
.story-flow > .screen.page-design > .hero-card{
  width:min(620px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  max-width:calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}

/* Beginning copy remains intentionally narrower than gallery/events sections. */
.story-flow > #beginning.page-design > .section-inner{
  width:min(460px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
}

@media (max-width:699px){
  .story-flow{
    --flow-border-strip:52px;
    --flow-content-gap:10px;
  }

  .story-flow::before,
  .story-flow::after{
    width:var(--flow-border-strip) !important;
    background-size:520px auto !important;
  }

  .story-flow > .screen.page-design{
    padding-top:10px !important;
    padding-bottom:18px !important;
  }

  .story-flow > .screen.page-design > .section-inner,
  .story-flow > .screen.page-design > .desk-scene,
  .story-flow > .screen.page-design > .hero-card{
    width:min(360px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  }

  .story-flow > #beginning.page-design > .section-inner{
    width:min(332px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  }
}

/* ============================================================
   FINAL LOCK: PAGE-3+ SIDE BORDER CONTINUITY
   ============================================================ */

.story-flow{
  --flow-content-gap:10px;
  position:relative;
  overflow:hidden;
  background:#ead5b3 !important;
  margin-top:0 !important;
}

.story-flow > .screen.page-design{
  position:relative;
  z-index:2;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:12px !important;
  border-bottom:0 !important;
  min-height:auto !important;
  height:auto !important;
  display:block !important;
  background:transparent !important;
  box-shadow:none !important;
}

.story-flow > #beginning.page-design{padding-top:0 !important}

.story-flow > .screen.page-design > .section-inner,
.story-flow > .screen.page-design > .desk-scene,
.story-flow > .screen.page-design > .hero-card{
  width:min(620px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  max-width:calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

.story-flow > #beginning.page-design > .section-inner{
  width:min(460px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
}

@media (max-width:699px){
  .story-flow{margin-top:0 !important}

  .story-flow > .screen.page-design{padding-top:0 !important;padding-bottom:10px !important}

  .story-flow > .screen.page-design > .section-inner,
  .story-flow > .screen.page-design > .desk-scene,
  .story-flow > .screen.page-design > .hero-card{
    width:min(360px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  }

  .story-flow > #beginning.page-design > .section-inner{
    width:min(332px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  }
}

/* ============================================================
   PATCH: RESTORE VISIBLE PAGE-3+ SIDE BORDERS
   ============================================================ */

/* Disable container-painted strips and render side-border artwork per section. */
.story-flow::before,
.story-flow::after{
  display:none !important;
}

.story-flow > .screen.page-design{
  position:relative;
  background:#ead5b3 !important;
}

.story-flow > .screen.page-design > .page-art{
  display:block !important;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center top;
  z-index:1;
}

.story-flow > .screen.page-design > .section-inner,
.story-flow > .screen.page-design > .desk-scene,
.story-flow > .screen.page-design > .hero-card{
  position:relative;
  z-index:2;
}

#invitation .invitation-lotus{
  display:block;
  width:120px;
  max-width:100%;
  height:auto;
  margin:14px auto 0;
  opacity:.95;
}

/* Keep only a small one-line separation before page-3 heading. */
#beginning .chapter-heading{
  margin-top:0 !important;
}

@media (max-width:699px){
  #beginning .chapter-heading{margin-top:0 !important}

  #invitation .invitation-lotus{
    width:clamp(84px, 24vw, 100px);
    margin:12px auto 0;
  }
}

#invitation .letter-sign .letter-family-line{
  display:inline-block;
  white-space:nowrap;
  font-size:clamp(15px,3.8vw,19px);
}



/* Keep border color intensity consistent through page-2 -> page-3 -> page-4. */
#invitation.page-design > .page-art,
#beginning.page-design > .page-art,
#moments.page-design > .page-art{
  opacity:1 !important;
  filter:saturate(1.08) contrast(1.04);
}

/* Page 2 should use only its top Mithila artwork (no injected side strips). */
#invitation.page-design::before,
#invitation.page-design::after,
#invitation.page-design > .desk-scene::after{
  content:none !important;
  display:none !important;
  background:none !important;
}


/* Keep only a tiny seam overlap between page-2 and page-3. */
#beginning.page-design{margin-top:-1px !important}

/* Floral texture on page-4 was muting the border artwork at transitions. */
.story-flow > #moments.floral-screen::before{
  display:none !important;
}

@media (max-width:699px){
  #beginning.page-design{margin-top:-1px !important}
}

/* ============================================================
   FINAL SAFETY: PAGE-4+ CONTENT INSIDE BORDERS
   ============================================================ */

.story-flow{
  --flow-border-strip:52px;
  --flow-content-gap:18px;
}

.story-flow > #moments.page-design > .section-inner,
.story-flow > #events.page-design > .section-inner,
.story-flow > #countdown.page-design > .section-inner{
  width:min(540px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  max-width:calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:4px !important;
  padding-right:4px !important;
  box-sizing:border-box;
}

@media (max-width:699px){
  .story-flow{
    --flow-border-strip:52px;
    --flow-content-gap:16px;
  }

  .story-flow > #moments.page-design > .section-inner,
  .story-flow > #events.page-design > .section-inner,
  .story-flow > #countdown.page-design > .section-inner{
    width:min(324px, calc(100% - ((var(--flow-border-strip) + var(--flow-content-gap)) * 2))) !important;
  }
}

/* Invitation sharing */
.invitation-share-dialog { margin: auto; width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid #d9bb80; border-radius: 18px; background: #fff9ef; color: #472b31; box-shadow: 0 16px 60px #0005; }
.invitation-share-dialog::backdrop { background: #20131bb3; }
.invitation-share-dialog h2 { margin: 0 0 20px; }
.invitation-share-dialog label, .invitation-share-dialog small { display: block; }
.invitation-share-dialog input { box-sizing: border-box; width: 100%; margin: 8px 0; padding: 12px; border: 1px solid #ad8b70; border-radius: 8px; font: inherit; background: white; color: #472b31; }
.invitation-share-dialog small { line-height: 1.5; }
.invitation-share-dialog p { margin: 18px 0; line-height: 1.5; }
.invitation-share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.invitation-share-actions button { padding: 10px 16px; border: 1px solid #805147; border-radius: 8px; background: #fff9ef; color: #472b31; font: inherit; cursor: pointer; }
#chooseInvitationApp { background: #733943; color: white; }
.invitation-share-actions button:disabled { opacity: .5; cursor: wait; }

/* Fit the cover to the actual browser viewport, including mobile toolbars. */
:root{--welcome-viewport:100vh}
@supports (height:100dvh){:root{--welcome-viewport:100dvh}}
html.intro-locked, html.intro-locked body{overflow:hidden}
#welcome.page-design{
  height:var(--welcome-viewport);
  min-height:0;
  padding-top:56px !important;
  padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  scroll-padding-top:56px;
}
#welcome.page-design > .hero-card{
  min-height:0;
  flex-shrink:0;
  padding:8px 8px 12px;
  overflow:visible;
}
#welcome .hero-content{margin-top:4px}
#welcome .hero-ornament{font-size:clamp(12px, calc(var(--welcome-viewport) * .023), 18px)}
#welcome .hero-kicker{font-size:clamp(13px, calc(var(--welcome-viewport) * .026), 20px);line-height:1.12;margin:4px 0}
#welcome h1{font-size:clamp(38px, calc(var(--welcome-viewport) * .085), 70px);line-height:1;margin:6px 0}
#welcome h1 span{font-size:.48em}
#welcome .date{font-size:clamp(12px, calc(var(--welcome-viewport) * .022), 17px);letter-spacing:1.5px;margin:8px 0}
#welcome .quote{font-size:clamp(13px, calc(var(--welcome-viewport) * .023), 18px);line-height:1.4;margin:6px auto 10px}
#welcome .hero-portrait-slot{
  height:clamp(70px, calc(var(--welcome-viewport) * .25), 250px);
  width:auto;
  max-width:76%;
  aspect-ratio:3 / 4;
  margin:6px auto 10px;
}
#welcome .invite-letter-trigger{min-height:60px;width:min(188px,90%);margin:6px auto 0}
@media(min-width:700px){
  #welcome.page-design{height:calc(var(--welcome-viewport) - 25px)}
}

@media(max-width:360px), (max-height:560px){
  #welcome h1{font-size:clamp(30px, 10vw, 42px)}
  #welcome .hero-kicker{font-size:13px}
  #welcome .hero-portrait-slot{height:clamp(60px, calc(var(--welcome-viewport) * .18), 110px)}
  #welcome .quote{font-size:13px;line-height:1.3}
}

/* Center the envelope between the portrait and the frame's inner lower edge.
   The artwork's lower border occupies approximately 8% of its height. */
#welcome.page-design{
  padding-bottom:max(calc(var(--welcome-viewport) * .08), env(safe-area-inset-bottom)) !important;
}
#welcome.page-design > .hero-card{
  min-height:100%;
  padding-bottom:0;
}
#welcome .hero-content{
  display:flex;
  flex-direction:column;
  flex:1;
}
#welcome .hero-content > *{flex-shrink:0}
#welcome .hero-portrait-slot{
  align-self:center;
  margin-bottom:0;
}
#welcome .welcome-open-space{
  flex:1 0 auto;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 0;
}
#welcome .invite-letter-trigger{margin:0}

/* Contain cover scrolling only until the invitation has been opened. */
html.intro-locked #welcome.page-design{overscroll-behavior-y:contain}

/* Avoid a content-first flash while the high-priority welcome frame decodes. */
html.welcome-loading #welcome > .hero-card{visibility:hidden}
/* Fixed blur layers require repainting the moving page beneath them. */
.topbar{background:rgba(255,250,241,.97);backdrop-filter:none}
@media(max-width:699px){
  #invitation.page-design > .page-art,
  #beginning.page-design > .page-art,
  #moments.page-design > .page-art{filter:none}
}