html,body{height:100%;overflow:hidden}
.page{width:min(100%,980px);height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}
.page>section{height:100dvh;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(54px,7vh,82px) 30px}
.hero{padding-top:clamp(60px,8vh,88px)!important}
.hero-frame{min-height:auto!important;max-height:88dvh;justify-content:center}
.hero h1{font-size:clamp(48px,7vw,82px);line-height:.84;max-width:820px}
.count-frame{padding:clamp(28px,4vh,46px) 24px}
.event-grid{margin-top:clamp(18px,3vh,34px)}
.event-card{min-height:0;height:min(52dvh,410px);padding:clamp(15px,2.5vh,24px)}
.event-art{height:clamp(110px,18vh,165px);margin-bottom:10px}
.venue-grid{max-height:84dvh}.palace{min-height:0;height:min(54dvh,410px)}
.dress-shell{max-height:84dvh}.dress-head{padding:28px 24px 10px}.dress-person{padding:8px 22px 20px}.dress-person svg{height:min(33dvh,260px)}
.timeline{margin-top:clamp(22px,4vh,38px)}.step-icon{width:78px;height:78px;font-size:28px}.step h3{font-size:23px}
.story{padding:0!important}.story-photo{min-height:100dvh;height:100dvh;width:100%;place-items:center}.story-card{margin:0;max-height:72dvh}
.gallery-grid{margin-top:24px;grid-template-rows:min(31dvh,250px) min(25dvh,205px)}
.gallery-item{border:1px solid #b9945445;border-radius:26px;padding:0;overflow:hidden;background:transparent;min-width:0}
.gallery-item:first-child{grid-row:1/3}.gallery-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.76);transition:.45s ease}.gallery-item:hover img{transform:scale(1.035);filter:saturate(.9)}
.final{padding-bottom:clamp(64px,8vh,94px)!important}.final-frame{padding:clamp(34px,5vh,54px) 28px}
.scene-nav{position:fixed;z-index:1295;right:max(14px,calc((100vw - 980px)/2 + 14px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;pointer-events:none;transition:.35s}
.started .scene-nav{opacity:1;pointer-events:auto}
.scene-nav button{width:42px;height:42px;border:1px solid #ffffff90;border-radius:50%;background:#27362fe5;color:#fff;box-shadow:0 8px 22px #3d2e2438;backdrop-filter:blur(10px)}
.scene-nav button:disabled{opacity:.3;cursor:default}
.scene-nav span{min-width:42px;padding:6px 7px;border-radius:999px;background:#fffbeedc;color:#5c4a3e;text-align:center;font:600 9px/1 Arial,sans-serif;box-shadow:0 5px 16px #3d2e2422}
.scroll-button{bottom:max(14px,env(safe-area-inset-bottom));width:46px;height:46px}
.opening-stage{width:min(92vw,420px)!important;height:min(80dvh,690px)!important}
.open-cta{bottom:24px!important;min-width:188px!important;height:48px!important;background:#43362f!important;color:#fff!important;border:1px solid #d9bb8b!important;box-shadow:0 12px 30px #1d0b086e!important;font-size:14px!important}
.opening-note{bottom:3px!important;color:#ead8c7!important;font-size:10px!important}
.skip-opening{display:none!important}
.lightbox{position:fixed;z-index:3000;inset:0;background:#130b09e8;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}
.lightbox.show{opacity:1;visibility:visible}
.lightbox img{max-width:min(88vw,900px);max-height:82dvh;border-radius:22px;box-shadow:0 30px 80px #0008}
.lightbox button{position:absolute;width:46px;height:46px;border:1px solid #ffffff80;border-radius:50%;background:#30251fdd;color:#fff;font-size:25px}
.lightbox-close{right:18px;top:18px}.lightbox-prev{left:18px;top:50%}.lightbox-next{right:18px;top:50%}
@media(max-width:700px){
.page>section{padding:54px 14px 64px}
.hero-frame{padding:20px 10px!important}.hero h1{font-size:clamp(42px,15vw,62px);max-width:96%}.hero-bn{font-size:15px}.hero-date{font-size:11px}
.section-title{font-size:clamp(27px,9vw,36px)}.bn-copy{font-size:12px;line-height:1.55}
.event-grid{grid-template-columns:1fr 1fr!important;gap:8px}.event-card{height:auto;min-height:0!important;padding:12px 7px;border-radius:90px 90px 20px 20px}.event-art{height:96px}.event-card h3{font-size:21px}.event-card p{font-size:10.5px;line-height:1.35}.pin{width:22px;height:22px}
.venue-grid{grid-template-columns:1fr!important;gap:12px}.venue-copy h2{font-size:42px!important}.venue-copy .bn-copy{max-width:92%}.palace{height:30dvh;min-height:190px}
.dress-grid{grid-template-columns:1fr 1fr!important}.dress-person+ .dress-person{border-top:0!important;border-left:1px solid #b9945432!important}.dress-person{padding:4px 8px 15px}.dress-person svg{height:25dvh}.dress-person h3{font-size:18px}.dress-person p{font-size:10.5px}
.timeline{grid-template-columns:repeat(3,1fr)!important;gap:4px}.timeline:before{display:block!important;left:12%;right:12%;top:33px}.step{padding:0 3px}.step-icon{width:64px;height:64px;font-size:22px;margin-bottom:10px}.step h3{font-size:17px}.step p{font-size:10.5px}.step strong{font-size:10px}
.story-card{width:calc(100% - 24px);padding:24px 18px}.story-card h2{font-size:29px}.story-card p{font-size:12px}
.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:34dvh 23dvh;margin-top:18px;gap:8px}.gallery-item:first-child{grid-column:1/3;grid-row:auto}.gallery-item{border-radius:18px}
.final-frame{padding:34px 18px}.final h2{font-size:29px}.final p{font-size:12px}.rsvp{margin-top:16px}.rsvp input,.rsvp button{height:44px}
.scene-nav{right:8px;top:auto;bottom:70px;transform:none;flex-direction:row}.scene-nav button{width:38px;height:38px}.scene-nav span{min-width:38px}
.top-controls{top:8px}.top-controls a,.top-controls button{min-height:38px}.top-controls .round{width:38px}
.opening-stage{width:min(94vw,400px)!important;height:min(76dvh,650px)!important}
.open-cta{bottom:22px!important}.opening-note{bottom:2px!important}
}

.open-cta{animation:openPulse 2.2s ease-in-out infinite}
.opening.untie .open-cta{animation:none}@keyframes openPulse{50%{transform:translateX(-50%) translateY(-2px);box-shadow:0 17px 38px #1d0b0888,0 0 0 7px #ead3ad22}}
/* Screenshot alignment corrections */
.hero{
  background-size:96% 96%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
.hero-frame{width:100%!important;max-width:760px!important}
.hero h1{
  font-size:clamp(44px,5.1vw,64px)!important;
  line-height:.92!important;
  max-width:58%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  white-space:nowrap;
}
.hero .crest{width:70px;height:70px;font-size:29px}
.hero-bn{font-size:15px!important}
.hero-date{font-size:11px!important;margin-bottom:18px!important}
.hero-scroll{margin-top:14px!important}
.opening-card-copy{width:44%!important;top:48.5%!important}
.opening-card-copy h1{
  font-size:clamp(30px,4.1vw,38px)!important;
  line-height:.94!important;
  max-width:100%!important;
  margin:0 auto 8px!important;
}
.opening-monogram{font-size:29px!important;margin-bottom:8px!important}
.opening-bn{font-size:12px!important}
.opening-date{font-size:9px!important;margin-top:6px!important}
.opening-stage{height:min(78dvh,660px)!important}
.open-cta{bottom:18px!important}
.opening-note{bottom:0!important}
.scroll-button{bottom:24px!important}

@media(max-width:700px){
  .hero{background-size:97% 96%!important}
  .hero h1{font-size:clamp(38px,12vw,50px)!important;max-width:78%!important}
  .hero .crest{width:60px;height:60px;font-size:25px}
  .opening-card-copy{width:48%!important}
  .opening-card-copy h1{font-size:clamp(27px,8.4vw,34px)!important}
  .opening-stage{height:min(74dvh,620px)!important}
  .scroll-button{bottom:max(20px,env(safe-area-inset-bottom))!important}
}
/* Interactive attendance response */
.final-frame{max-width:820px!important;max-height:91dvh!important;padding:30px 26px 22px!important;border-radius:120px 120px 30px 30px!important}
.final .crest{width:58px;height:58px;font-size:25px;margin-bottom:7px}
.final h2{font-size:clamp(28px,4vw,39px)!important;line-height:1.16!important;margin:5px auto 8px!important}
.final> .final-frame>p,.final-frame>p{font-size:12px!important;line-height:1.55!important;max-width:680px!important}
.attendance-flow{position:relative;margin:14px auto 0;max-width:760px}
.response-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.response-card{position:relative;min-height:66px;padding:9px 10px 9px 38px;border:1px solid #b9945455;border-radius:18px;background:#fffaf2aa;text-align:left;font-size:11.5px;line-height:1.4;color:#5f4d40;cursor:pointer;transition:.22s ease;display:flex;align-items:center}
.response-card input{position:absolute;opacity:0;pointer-events:none}
.response-card .response-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:1px solid #b9945477;border-radius:50%;display:grid;place-items:center;font:600 12px/1 Arial,sans-serif;color:#86643e;background:#fffaf3}
.response-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px #6b53371b}
.response-card.active{border-color:#68735f;background:#f4f5ed;box-shadow:0 0 0 2px #68735f20}
.response-card.active .response-icon{background:#5b6a53;color:#fff;border-color:#5b6a53}
.response-panel{margin-top:10px}
.response-panel[hidden]{display:none!important}
.response-grid{display:grid;gap:8px}
.response-grid-attend{grid-template-columns:1.25fr .8fr .65fr 1.3fr}
.response-grid-two{grid-template-columns:.8fr 1.6fr}
.response-grid-gift{grid-template-columns:.8fr .8fr 1.35fr 1.2fr}
.response-grid label{display:flex;flex-direction:column;gap:4px;text-align:left;color:#69574a;font-size:10px;line-height:1.2}
.response-grid label>span{padding-left:7px}
.response-grid small{font-size:8px;color:#9d8b7d}
.response-grid input,.response-grid select,.response-grid textarea{width:100%;height:38px;border:1px solid #b9945450;border-radius:13px;background:#fffaf4;color:#493b32;padding:0 11px;outline:none;font:12px/1.25 "Kalpurush",sans-serif;box-shadow:inset 0 1px 0 #fff}
.response-grid textarea{height:54px;resize:none;padding-top:9px}
.response-grid input:focus,.response-grid select:focus,.response-grid textarea:focus{border-color:#6b7a60;box-shadow:0 0 0 3px #6b7a6014}
.guest-summary{margin:7px auto 0;padding:5px 11px;border-radius:999px;background:#f0eadc;color:#6b5949;font-size:10.5px;display:inline-block}
.guest-summary strong{color:#4d5c46}
.response-submit{margin-top:10px;min-height:42px;padding:0 20px;border:0;border-radius:999px;background:#56654f;color:#fff;box-shadow:0 8px 20px #56654f29;font-size:12px}
.response-success{min-height:17px;margin-top:5px;font-size:10.5px;color:#4e6749}
.final-actions{margin-top:8px!important}
.final-actions button{padding:8px 11px!important;font-size:10px!important}
.fine{margin-top:6px!important}
@media(max-width:700px){
  .final-frame{max-height:94dvh!important;padding:20px 12px 16px!important;border-radius:58px 58px 22px 22px!important}
  .final .crest{width:48px;height:48px;font-size:21px;margin-bottom:4px}
  .final h2{font-size:25px!important;margin:2px auto 5px!important}
  .final-frame>p{font-size:10.5px!important;line-height:1.4!important}
  .attendance-flow{margin-top:9px}
  .response-options{grid-template-columns:1fr;gap:4px}
  .response-card{min-height:42px;padding:6px 8px 6px 34px;font-size:10.5px;border-radius:13px}
  .response-card .response-icon{left:8px;width:19px;height:19px;font-size:10px}
  .response-panel{margin-top:7px}
  .response-grid-attend{grid-template-columns:1fr 1fr 1fr}
  .response-grid-attend .response-note{grid-column:1/4}
  .response-grid-two{grid-template-columns:1fr}
  .response-grid-gift{grid-template-columns:1fr 1fr}
  .response-grid label{font-size:9.5px}
  .response-grid input,.response-grid select{height:34px;font-size:11px}
  .response-grid textarea{height:46px;font-size:11px}
  .guest-summary{margin-top:5px;font-size:9.5px}
  .response-submit{margin-top:7px;min-height:38px;font-size:11px}
  .response-success{font-size:9.5px;min-height:14px}
  .final-actions{margin-top:5px!important}
  .fine{font-size:8px!important;margin-top:4px!important}
}
