@font-face{font-family:InvitationScript;src:url('assets/fonts/delafield.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}
:root{--invitation-vw:min(1vw,4.3px)}
main{width:min(100%,430px);margin-inline:auto;box-shadow:0 0 70px #16081055}
body{background:#32131d url('assets/mughal-ivory.svg') center/180px 220px}
.manual-pin .paper-invitation-stage{max-width:430px;margin-inline:auto}
@font-face{font-family:InvitationSerif;src:url('assets/fonts/cormorant-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}

.paper-invitation,.paper-scroll-hint{display:none}
@media all{
  /* The paper is sampled from the supplied film, including its real deckled edges. */
  .paper-invitation{display:block;position:relative;height:calc(var(--mobile-vh,1svh)*100);min-height:480px;overflow:hidden;isolation:isolate;background:#57212e;color:#713343;font-family:InvitationSerif,Georgia,serif;text-align:center}
  .paper-invitation-stage{position:relative;height:calc(var(--mobile-vh,1svh)*100);min-height:480px;overflow:hidden;isolation:isolate;perspective:1400px}
  .paper-sheet{position:absolute;inset:0;z-index:2;background:url('assets/invitation-paper.webp') center/100% 100% no-repeat;transform-origin:center 35%}
  /* A sticky scene must not sit inside overflow:hidden (including the
     fallback used by browsers without overflow:clip). Clip the stage only. */
  .paper-invitation.scroll-ready{height:calc(var(--mobile-vh,1vh)*650);overflow:visible}
  .scroll-ready .paper-invitation-stage{position:-webkit-sticky;position:sticky;top:0;height:100vh;height:100dvh}
  .manual-pin .paper-invitation-stage{position:fixed;top:0;left:0;right:0}
  .manual-pin.pin-before .paper-invitation-stage{position:absolute;top:0;bottom:auto}
  .manual-pin.pin-after .paper-invitation-stage{position:absolute;top:auto;bottom:0}
  .scroll-ready .paper-sheet{will-change:transform}
  .paper-invitation~.film-scroll{display:none!important}
  .paper-invitation~.film-scroll+.families{margin-top:0;border-radius:0}
  .paper-frame{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .paper-frame p{margin:0;font-weight:400}
  .paper-cordial,.paper-names{visibility:hidden;pointer-events:none}
  .paper-cordial{text-transform:uppercase;padding-bottom:calc(var(--mobile-vh,1svh)*1.5)}
  .paper-you,.paper-invited{font-size:clamp(22px,calc(var(--invitation-vw,1vw)*6.2),38px);line-height:1.3;color:#807a72}
  .paper-cordially{font-size:clamp(36px,calc(var(--invitation-vw,1vw)*10.2),64px);line-height:1.4;letter-spacing:-.035em}
  .paper-word{display:inline-block;white-space:pre}
  .paper-letter{display:inline-block}
  .paper-names{justify-content:flex-start;padding-top:calc(var(--mobile-vh,1svh)*30.4)}
  .paper-married{font-size:clamp(14px,calc(var(--invitation-vw,1vw)*3.9),23px);line-height:1.7;letter-spacing:.19em;text-transform:uppercase}
  .paper-signatures{position:relative;width:83%;height:calc(var(--mobile-vh,1svh)*28);margin-top:calc(var(--mobile-vh,1svh)*2);font:400 clamp(68px,calc(var(--invitation-vw,1vw)*22),140px)/1.22 InvitationScript,cursive;text-align:left}
  .paper-groom,.paper-bride{position:absolute;white-space:nowrap;z-index:1}
  .paper-bride{left:0;top:0}
  .paper-groom{right:0;top:calc(var(--mobile-vh,1svh)*12.4)}
  .paper-ampersand{position:absolute;right:9%;top:calc(var(--mobile-vh,1svh)*6.8);font:400 clamp(95px,calc(var(--invitation-vw,1vw)*28),168px)/1 InvitationSerif,serif;color:#bba49f;opacity:.7}
  .paper-date{justify-content:flex-start;padding-top:calc(var(--mobile-vh,1svh)*8)}
  .paper-portrait{position:relative;width:58%;height:calc(var(--mobile-vh,1svh)*52);max-height:470px;padding:3.5%;border:1px solid #c7bcb0;border-radius:50% 50% 0 0 / 32% 32% 0 0}
  .paper-portrait-inner{height:100%;width:100%;overflow:hidden;border-radius:50% 50% 0 0 / 32% 32% 0 0;background:#e3d6c2}
  .paper-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
  .paper-star{position:absolute;top:55.5%;font-size:25px;line-height:1;color:#a79186;transform:translate(-50%,-50%)}
  .paper-star-left{left:0}.paper-star-right{left:100%}
  .paper-celebrate{margin-top:calc(var(--mobile-vh,1svh)*3.8)!important;font-size:clamp(9px,calc(var(--invitation-vw,1vw)*2.7),16px);letter-spacing:.25em;text-transform:uppercase}
  .paper-date-copy{margin-top:calc(var(--mobile-vh,1svh)*8);font-size:clamp(14px,calc(var(--invitation-vw,1vw)*4.2),24px);line-height:1.25;text-transform:uppercase}
  .paper-date-row{display:flex;align-items:center;justify-content:center;gap:calc(var(--invitation-vw,1vw)*3);margin:calc(var(--mobile-vh,1svh)*.5) 0}
  .paper-date-row>span{font-size:clamp(12px,calc(var(--invitation-vw,1vw)*3.8),22px)}
  .paper-date-row strong{font:400 clamp(30px,calc(var(--invitation-vw,1vw)*10),52px)/1 InvitationSerif,serif;border-left:1px solid #c9b9a9;border-right:1px solid #c9b9a9;padding:0 calc(var(--invitation-vw,1vw)*2.8)}
  .paper-continue{display:inline-flex;gap:12px;align-items:center;min-height:44px;margin-top:calc(var(--mobile-vh,1svh)*2.3);color:#713343;text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .paper-continue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .paper-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .paper-invitation a:focus-visible,.paper-invitation button:focus-visible{outline:1px solid #713343;outline-offset:4px}
  .scroll-ready .paper-invitation-stage{background:radial-gradient(ellipse at 38% 25%,#f3eddf,#dfd2bd 85%)}
  .paper-envelope,.paper-envelope-back{display:none}
  .scroll-ready .paper-envelope-back{display:block;position:absolute;inset:7% 5% 9%;z-index:1;border-radius:5px;background:linear-gradient(#39131d66,#250c1755),url('assets/envelope-cotton.webp') center/420px 420px;box-shadow:0 24px 35px -12px #3b241b70,0 3px 7px #32182044,inset 0 1px 2px #c18d7b66}
  .scroll-ready .paper-envelope{display:block;position:absolute;inset:7% 5% 9%;z-index:3;perspective:1400px;pointer-events:none}
  .paper-envelope-pocket,.paper-envelope-flap{position:absolute;inset:0}
  .paper-envelope-pocket{z-index:2;filter:drop-shadow(0 -2px 2px #280b1533)}
  .paper-envelope-pocket:before,.paper-envelope-pocket:after,.paper-envelope-bottom:before{content:'';position:absolute;inset:0;background-image:url('assets/envelope-cotton.webp');background-size:420px 420px}
  .paper-envelope-pocket:before{clip-path:polygon(0 0,54% 53%,0 100%);background-image:linear-gradient(95deg,#efb7a010,#230a1b44),url('assets/envelope-cotton.webp');background-position:left top;filter:drop-shadow(2px 0 1px #25101988)}
  .paper-envelope-pocket:after{clip-path:polygon(100% 0,46% 53%,100% 100%);background-image:linear-gradient(-95deg,#ecb7a00a,#22081955),url('assets/envelope-cotton.webp');background-position:right top}
  .paper-envelope-bottom{position:absolute;inset:0;z-index:1;filter:drop-shadow(0 -3px 3px #22081777)}
  .paper-envelope-bottom:before{clip-path:polygon(0 100%,0 94%,46% 48%,48% 46.5%,50% 46%,52% 46.5%,54% 48%,100% 94%,100% 100%);background-image:linear-gradient(180deg,#26081944,#a6657818 75%,#e8a99018),url('assets/envelope-cotton.webp');background-position:center bottom}
  .paper-envelope-bottom>span{position:absolute;top:76%;left:0;right:0;font:400 clamp(31px,calc(var(--invitation-vw,1vw)*9),60px)/1.2 InvitationScript,cursive;color:#d8b98b;text-shadow:0 1px 1px #28100f}
  .paper-envelope-flap{z-index:3;height:56%;transform-origin:center top;backface-visibility:hidden;filter:drop-shadow(0 5px 3px #22071599);will-change:transform}
  .paper-envelope-flap:before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 2%,54% 96%,51% 99%,50% 99.5%,49% 99%,46% 96%,0 2%);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#eeb29b22,#23081755),url('assets/envelope-cotton.webp') center/420px 420px;box-shadow:inset 0 2px 1px #edb9a333}
  .paper-envelope-seal{position:absolute;z-index:4;top:55%;left:50%;width:92px;height:92px;padding:0;transform:translate(-50%,-50%) rotate(-8deg);border:0;background:none;filter:drop-shadow(1px 5px 4px #250d1977);cursor:pointer;pointer-events:auto}
  .paper-envelope-seal img{display:block;width:100%;height:100%;object-fit:contain}
  .scroll-ready .paper-scroll-hint{position:absolute;z-index:4;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:7px;color:#62303c;pointer-events:none;text-align:left}
  .paper-scroll-label{display:block;font:500 8px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
  .paper-scroll-note{display:none}
  .paper-swipe-icon{width:14px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
  .paper-swipe-dot{fill:currentColor;stroke:none;animation:paper-swipe-guide 2.4s ease-in-out 3}
  .is-preparing .paper-swipe-dot{animation-play-state:paused}
  .paper-invitation .paper-envelope-seal:focus-visible{outline-color:#f0dcc0;outline-offset:7px}
}
@keyframes paper-swipe-guide{0%,15%{transform:translateY(0);opacity:.35}65%{transform:translateY(-13px);opacity:1}90%,100%{transform:translateY(-13px);opacity:0}}
@media(prefers-reduced-motion:reduce){.paper-swipe-dot{animation:none}}
@media all{
  .compact-mobile-viewport .paper-portrait{height:calc(var(--mobile-vh,1svh)*47)}
  .compact-mobile-viewport .paper-date{padding-top:calc(var(--mobile-vh,1svh)*5)}
  .compact-mobile-viewport .paper-date-copy{margin-top:calc(var(--mobile-vh,1svh)*5)}
  .compact-mobile-viewport .paper-signatures{font-size:calc(var(--invitation-vw,1vw)*18)}
}