@font-face{font-family:Script;src:url('script.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#ede3d5;color:#66554e}body{font-family:Georgia,'Times New Roman',serif}.stage{position:relative;width:min(100%,470px);height:max(760px,100svh);margin:auto;isolation:isolate;background:#f6efdf;overflow:hidden;box-shadow:0 0 60px #725d4320}.invitation,.envelope{position:absolute;inset:0;background:#f8f1e4 url('floral.jpg') center/100% 100% no-repeat}.invitation{opacity:0;transform:scale(.92) translateY(45px);transition:opacity 1.2s .75s,transform 1.8s .5s}.content{height:100%;display:flex;align-items:center;flex-direction:column;text-align:center;padding:clamp(90px,13svh,135px) 20px 55px}.message{font-size:12px;line-height:1.8;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 29px}h1{font-family:Script,Georgia,serif;font-weight:400;font-size:76px;line-height:1.08;margin:0;color:#695452;padding:0 14px}h1 span{display:block;font-family:Georgia,serif;font-style:italic;font-size:26px;line-height:1.4;margin:3px 0 5px;color:#937c63}.divider{font-size:29px;line-height:1;color:#b09868;margin:19px 0 25px;width:90px;position:relative}.divider:before,.divider:after{content:'';position:absolute;top:50%;height:1px;width:24px;background:#bba575}.divider:before{left:0}.divider:after{right:0}.when{display:flex;align-items:center;justify-content:center;margin-bottom:28px;width:75%;gap:22px}.when>p:first-child{font-size:11px;letter-spacing:1px;margin:0}.date{border-left:1px solid #c5b390;margin:0;padding-left:24px;display:flex;flex-direction:column;align-items:center}.date strong{font-size:45px;font-weight:400;line-height:1.1}.date span{font-size:12px;letter-spacing:2px;line-height:1.4;margin-top:5px}.location svg{width:20px;height:25px;fill:#7e6969}.location p{font-size:13px;letter-spacing:1.7px;line-height:1.6;margin:9px 0 5px}.location>span{font-size:13px;font-style:italic;color:#8b776a}.bottom{margin:23px 0 15px}.replay{border:0;background:transparent;color:#897767;font:12px Georgia;cursor:pointer;padding:10px}.envelope{z-index:2;transition:transform 1.5s .7s,opacity .7s 1.4s;perspective:1200px}.paper{position:absolute;inset:0; background:url('floral.jpg') center/100% 100%}.pocket{position:absolute;inset:39% 0 0;background:#f4ebdc url('floral.jpg') center bottom/100% 164% no-repeat;clip-path:polygon(0 0,50% 36%,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 50px #937c5120;z-index:3}.left-fold,.right-fold{position:absolute;inset:39% 0 0;z-index:4;pointer-events:none}.left-fold{background:linear-gradient(40deg,transparent 48.9%,#bbab8938 49%,#fff8ec70 49.4%,transparent 50%);clip-path:polygon(0 0,50% 36%,0 74%)}.right-fold{background:linear-gradient(-40deg,transparent 48.9%,#bbab8950 49%,#fff8ec70 49.5%,transparent 50%);clip-path:polygon(100% 0,50% 36%,100% 74%)}.flap{position:absolute;inset:0 0 39%;background:#f8f1e4 url('floral.jpg') center top/100% 164% no-repeat;clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);transform-origin:top;z-index:5;filter:drop-shadow(0 3px 3px #685c3940);transition:transform 1.4s ease,opacity .7s .7s}.seal{position:absolute;z-index:6;left:50%;top:54%;transform:translate(-50%,-50%);width:118px;height:118px;background:transparent;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 4px 5px #65482148);transition:transform .5s,opacity .4s}.seal img{width:100%;height:100%;object-fit:contain}.seal:hover{transform:translate(-50%,-50%) scale(1.05)}button:focus-visible{outline:2px solid #7c6185;outline-offset:5px}.cover-label{position:absolute;top:70%;width:100%;z-index:5;text-align:center}.cover-label p{font-size:14px;letter-spacing:4px;margin:0 0 12px}.cover-label span{font-size:30px;color:#b69a65}.tap{position:absolute;bottom:7%;width:100%;z-index:5;text-align:center;font-size:12px;letter-spacing:1px;color:#8b7965}.stage.open .seal{opacity:0;transform:translate(-50%,-50%) scale(1.2)}.stage.open .flap{transform:rotateX(155deg);opacity:0}.stage.open .envelope{transform:translateY(110%);opacity:0;pointer-events:none}.stage.open .invitation{opacity:1;transform:none}.envelope[hidden]{display:none}@media(min-width:600px){body{padding:25px 0}.stage{height:820px;min-height:820px;border-radius:4px}.content{padding-top:115px}}@media(max-width:360px){h1{font-size:67px}.message{font-size:11px}.when{gap:14px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;transition-delay:0s!important}}

.when{width:88%;gap:17px}.date{padding-left:17px;padding-right:17px;border-right:1px solid #c5b390}.time{font-size:11px;letter-spacing:1px;margin:0}.time strong{display:block;font-size:18px;font-weight:normal;letter-spacing:0;margin-top:8px}.pocket{background-image:linear-gradient(135deg,#a88a4920,transparent 45%,#ffffff35),url("floral.jpg");background-size:100% 100%,100% 164%}.flap{background-image:linear-gradient(180deg,#ffffff20,transparent 75%,#b7a47925),url("floral.jpg");background-size:100% 100%,100% 164%}

@font-face{font-family:Names;src:url('names.ttf') format('truetype');font-display:swap}
.content{padding-top:clamp(118px,16svh,150px);padding-left:0;padding-right:0}
.message{width:66%;max-width:290px;font-size:10px;letter-spacing:.75px;line-height:1.85;margin:0 auto 25px;flex-shrink:0}
h1{font-family:Names,Georgia,serif;font-size:80px;line-height:1.03;width:76%;padding:0;margin:0 auto;text-align:center;flex-shrink:0}
h1 span{font-family:Georgia,serif;font-size:25px;line-height:1.4;margin:4px 0 8px}
.when{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:0;width:78%;max-width:340px;margin-left:auto;margin-right:auto}
.when>p:first-child{font-size:10px;letter-spacing:.4px;text-align:center}
.date{padding:0 10px;border-left:1px solid #c5b390;border-right:1px solid #c5b390;text-align:center}
.time{text-align:center;font-size:10px;letter-spacing:1px}.time strong{font-size:19px}
.location{width:68%;margin:0 auto;text-align:center}.location p{font-size:12px;letter-spacing:1.2px}.location>span{font-size:12px}
.divider{margin:17px auto 23px;flex-shrink:0}.bottom{margin:19px auto 8px}.replay{margin:0 auto}
@media(max-width:360px){h1{font-size:71px}.message{font-size:9px;letter-spacing:.5px}.when>p:first-child{font-size:9px}.when{width:80%}}
@media(min-width:600px){.content{padding-top:140px}}

.stage.open{height:max(1240px,100svh)}
.content{padding-top:125px;padding-bottom:95px;height:auto}
h1{font-size:72px}.message{margin-bottom:19px}
.event{width:72%;max-width:330px;margin:0 auto;text-align:center;flex-shrink:0}
.event h2{font:normal 19px Georgia,serif;letter-spacing:4px;color:#a28a59;margin:0 0 19px}
.event-time{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;margin:0 auto 17px}
.event-time p{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:83px}
.event-time p:nth-child(2){border-left:1px solid #c5b390;border-right:1px solid #c5b390}
.event-time strong{font-size:40px;font-weight:normal;line-height:1.1}
.event-time span{font-size:9px;letter-spacing:.6px;line-height:1.6;margin-top:5px}
.event-time .clock{font-size:26px;margin-top:8px}.event-time .year{font-size:26px}
.event-venue{font-size:19px;line-height:1.4;margin:0 0 9px}
.event-address{font-size:12px;line-height:1.7;margin:0 auto;width:100%;letter-spacing:0;text-transform:none}
.between{margin:25px auto}.bottom{margin-top:22px}
@media(max-width:360px){.event{width:74%}.event-time .clock{font-size:23px}.event-venue{font-size:17px}.event-address{font-size:11px}}
@media(min-width:600px){.stage.open{height:1240px}}

/* Compact invitation: both events share one balanced composition. */
.stage,.stage.open{height:max(760px,100svh);min-height:760px}
.content{padding:76px 0 32px;gap:0}
.message{width:64%;font-size:9px;line-height:1.6;letter-spacing:.55px;margin:0 auto 10px}
h1{font-size:52px;line-height:.98;width:76%}
h1 span{font-size:18px;line-height:1.2;margin:4px 0 5px}
.divider{font-size:20px;line-height:1;margin:9px auto 12px;width:76px}
.divider:before,.divider:after{width:23px}
.event{width:73%;max-width:335px}
.event h2{font-size:15px;letter-spacing:3px;margin:0 0 9px}
.event-time{margin:0 auto 8px}
.event-time p{min-height:61px}
.event-time strong{font-size:31px}
.event-time span{font-size:8px;letter-spacing:.5px;line-height:1.4;margin-top:3px}
.event-time .clock{font-size:23px;margin-top:5px}
.event-time .year{font-size:23px}
.event-venue{font-size:16px;line-height:1.25;margin:0 0 5px}
.event-address{font-size:10px;line-height:1.45;max-width:100%}
.between{margin:13px auto}
.bottom{margin:13px auto 3px}
.replay{font-size:10px;padding:6px;margin:0 auto}
@media(min-width:600px){.stage,.stage.open{height:820px;min-height:820px}.content{padding-top:100px}h1{font-size:58px}.event{width:72%}.event-venue{font-size:18px}.event-address{font-size:12px}.between{margin:15px auto}}
@media(max-width:360px){h1{font-size:50px}.event{width:76%}.event-time .clock{font-size:21px}.event-venue{font-size:15px}.event-address{font-size:10px}}

/* Give the event details a quieter, tighter rhythm within the flowers. */
.event{width:64%;max-width:300px}
.event h2{font-size:13px;letter-spacing:2.5px;margin-bottom:7px}
.event-time{margin-bottom:7px}
.event-time p{min-height:50px}
.event-time strong{font-size:27px}
.event-time span{font-size:8px;letter-spacing:.2px;line-height:1.35}
.event-time .clock{font-size:20px;margin-top:4px}
.event-time .year{font-size:20px}
.event-venue{font-size:14px;line-height:1.3;margin-bottom:4px}
.event-address{font-size:9px;line-height:1.5}
.between{margin:9px auto}
.bottom{margin:9px auto 3px}
@media(min-width:600px){.event{width:64%}.event h2{font-size:14px}.event-venue{font-size:16px}.event-address{font-size:11px}.between{margin:11px auto}}
@media(max-width:360px){.event{width:67%}.event-time .clock{font-size:19px}.event-venue{font-size:13px}.event-address{font-size:9px}}

/* Floral print belongs to the flap, not to the envelope lining. */
.envelope{background:#f5edde;transition:transform 1.4s 1s,opacity .65s 1.8s}
.paper{background:linear-gradient(145deg,#f8f1e5,#eee3d1)}
.flap{backface-visibility:hidden;transition:transform 1.2s ease;opacity:1}
.stage.open .flap{transform:rotateX(180deg);opacity:1}
.invitation{transition:opacity .9s 1.8s,transform 1.4s 1.5s}

.tap{bottom:12%;left:15%;width:70%;margin:0;font-size:11px;line-height:1.5;letter-spacing:.5px;color:#665247;text-align:center;text-shadow:0 1px 2px #fff8ee}

.cover-label .tap{position:static;bottom:auto;left:auto;width:58%;margin:12px auto 0;font-size:11px;line-height:1.5;letter-spacing:.2px;color:#665247;text-transform:none}