@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500&display=swap');

/* Shared stationery: calligraphy, fine serif lettering, blush paper and muted gold. */
:root{--paper:#fffdf7;--ink:#484c40;--muted:#77776c;--deep:#59634d;--gold:#a58a58;--line:#dcd4c4;--blush:#eed6d7;--script:'Pinyon Script','Cormorant Garamond',Georgia,serif;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
body.stationery{background:#f6f1e9}
body.stationery::after{opacity:.045}
.stationery .eyebrow{font-size:10px;font-weight:400;letter-spacing:2.9px}
.stationery .button{min-height:49px;padding:13px 27px;background:var(--deep);border:1px solid var(--deep);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;border-radius:2px}
.stationery .button:hover{background:#424b3b}
.stationery .text-button{font-size:10px;letter-spacing:.6px;text-transform:none;color:#777465}
.stationery .faith-cross{width:18px;height:28px;margin:0 auto 23px}
.stationery .faith-cross::before{left:8px;width:1px}
.stationery .faith-cross::after{top:8px;height:1px}
.preview-note{text-align:center;font:8px/1.8 var(--sans);letter-spacing:1.6px;color:#8c877c;padding:10px 15px 16px;margin:0}

/* The envelope rests on a soft, lightly textured surface. */
.stationery.invitation-page{background:radial-gradient(ellipse at 50% 52%,#fffdfa 0%,#f4ece6 62%,#eee5df 100%)}
.stationery .invitation-stage{min-height:calc(100svh - 95px);padding:45px 20px 30px;justify-content:center;overflow:hidden;isolation:isolate}
.stationery .invite-heading{position:relative;z-index:3}
.stationery .invite-heading h1{font:400 clamp(70px,7.8vw,106px)/1.2 var(--script);letter-spacing:0;margin:10px 0 4px;color:#5f6652}
.stationery .invite-heading .intro{font:italic 20px/1.6 var(--serif);color:#80766e}
.stationery .envelope-scene{width:min(530px,83vw);height:308px;margin-top:57px;transform:rotate(-3deg);perspective:1500px}
.stationery .envelope{inset:0 0 12px;filter:drop-shadow(0 14px 14px #66544a24);border-radius:2px}
.stationery .envelope-lining{background:#e0bbc0;border-radius:2px;box-shadow:inset 0 0 0 1px #b1848830}
.stationery .envelope-lining::after{inset:8px;background:#f6eae5 url('assets/floral-frame.png') center/100% 160% no-repeat;opacity:1;border:1px solid #c99d9938}
.stationery .envelope-pocket{background:linear-gradient(153deg,#edd6d5,#e0babc);clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%);border-radius:2px;box-shadow:inset 0 -1px #b88e8e4a}
.stationery .envelope-pocket::after{background:linear-gradient(20deg,#faf0e840,#9d747715);clip-path:polygon(0 100%,50% 46%,100% 100%)}
.stationery .envelope-fold.left{background:#fff4f426;clip-path:polygon(0 0,50% 60%,0 100%)}
.stationery .envelope-fold.right{background:#a8788010;clip-path:polygon(100% 0,50% 60%,100% 100%)}
.stationery .envelope-flap{background:linear-gradient(164deg,#f1dddd 8%,#e5c4c7 75%);clip-path:polygon(0 0,100% 0,50% 61%);filter:drop-shadow(0 1px 1px #a3777a70)}
.stationery .envelope-caption{bottom:42px;font:32px/1.1 var(--script);color:#806264;letter-spacing:0}
.stationery .wax-seal{width:78px;height:77px;top:calc(55% - 40px);border:2px solid #b89964;border-radius:48% 45% 50% 46%;background:radial-gradient(ellipse at 30% 20%,#efdcaa 0%,#d5b678 37%,#b39254 72%,#d7b77a 100%);box-shadow:0 5px 8px #8664614a,inset 1px 2px 3px #f9e9c4,inset -2px -2px 3px #8c6b43}
.stationery .seal-ring{width:61px;height:61px;border:1px solid #96754288;box-shadow:inset 0 1px 2px #fff0ba88,0 1px 2px #f9df9d88;color:#876b3c;font:24px var(--serif)}
.stationery .envelope-shadow{bottom:-4px;left:4%;right:3%;height:35px;filter:blur(23px);background:#5b47343a}
.table-botanical{position:absolute;width:210px;height:330px;object-fit:contain;left:-161px;bottom:-58px;transform:rotate(-43deg);z-index:-1;filter:drop-shadow(6px 11px 5px #75604c20);opacity:.85;pointer-events:none}
.silk-ribbon{position:absolute;width:55px;height:490px;right:-38px;top:-67px;transform:rotate(29deg);background:linear-gradient(90deg,#dbc2b962,#f9e4daaa 38%,#d7b8b061 73%,#f4ded199);box-shadow:8px 3px 18px #8a6a5020;z-index:-1;clip-path:polygon(5% 0,100% 2%,93% 94%,55% 90%,0 99%);opacity:.6;pointer-events:none}
.stationery .letter-peek{inset:13px 22px 16px;padding-top:38px;border:0;box-shadow:0 0 0 1px #dfd4bf;background:var(--paper);overflow:hidden}
.letter-peek>img{position:absolute;inset:0;width:100%;height:155%;object-fit:fill;opacity:.8;z-index:-1}
.stationery .letter-peek .eyebrow{font-size:8px;letter-spacing:2px}
.stationery .peek-names{font:38px/1.4 var(--script);padding-top:18px}
.stationery .open-hint{display:flex;align-items:center;gap:15px;font-size:9px;letter-spacing:2px;color:#787666;margin-top:40px;z-index:3}
.stationery .open-hint .hint-line{display:block;width:28px;height:1px;background:#b7a17b;margin:0;font-size:inherit}
.stationery .invitation-footer{min-height:50px;margin:0 6%;border-top-color:#d8cbbe;align-items:center}
.stationery .invitation-footer>span:first-child{font:26px/1.2 var(--script)}
.stationery .invitation-footer>span:last-child{font:8px/1.6 var(--sans);letter-spacing:1.9px}
.stationery.opening .letter-peek{transform:translateY(-165px)}
.stationery.departing .envelope-scene{transform:translateY(70px) rotate(-3deg) scale(.98)}
.stationery.opened .invitation-stage{padding:50px 20px 26px;overflow:hidden}

/* The invitation is presented as a real paper card; its navigation sits below it. */
.stationery .invitation-card{position:relative;width:min(520px,100%);padding:0;background:transparent;box-shadow:none;isolation:isolate;overflow:visible}
.stationery .card-border{position:relative;z-index:2;padding:0;border:1px solid #e8e0d2;outline:0;border-radius:2px;background:var(--paper);box-shadow:0 2px 2px #715a4320,0 20px 35px #806b4924;overflow:hidden;isolation:isolate}
.stationery-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none}
.letter-content{position:relative;padding:61px 75px 63px;text-align:center;min-height:750px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.letter-content .faith-cross{margin-bottom:18px}
.letter-kicker{font:9px/1.8 var(--serif);letter-spacing:2.3px;color:#6a7059;margin-bottom:24px}
.stationery .invitation-names{font-size:inherit;letter-spacing:0;line-height:1;width:100%;margin:0;color:#626c53}
.stationery .invitation-names .person{display:block}
.stationery .invitation-names .given-name{font:400 64px/1.05 var(--script);padding:0 5px}
.stationery .invitation-names .family-name{font:500 13px/1.5 var(--serif);letter-spacing:3.5px;text-transform:uppercase;margin-top:8px}
.stationery .invitation-names em{font:italic 24px/1 var(--serif);margin:16px 0 12px;color:#a48c59}
.stationery .invitation-line{font:17px/1.45 var(--serif);max-width:280px;margin:27px auto 0;color:#66695b}
.date-divider{display:flex;gap:12px;align-items:center;justify-content:center;margin:20px auto 15px}
.date-divider>span:not(.date-flower){height:1px;width:28px;background:#c4b189}
.date-flower{font:17px/1 var(--serif);color:#a99062}
.stationery .invite-date{font:500 16px/1.5 var(--serif);text-transform:uppercase;letter-spacing:1.5px}
.stationery .invite-time{font:italic 15px/1.5 var(--serif);margin-top:6px;color:#777363}
.stationery .invite-location{font:500 12px/1.5 var(--serif);letter-spacing:1.8px;text-transform:uppercase;margin-top:22px}
.stationery .invite-city{font:16px/1.5 var(--serif);margin-top:4px}
.stationery .reception-note{font:italic 15px/1.5 var(--serif);margin:18px 0 0;color:#787463}
.stationery .card-verse{font:italic 15px/1.6 var(--serif);margin-top:25px;color:#86816d}
.stationery .card-verse span{font:7px/1.7 var(--sans);letter-spacing:1.4px;display:block;margin-top:6px}
.display-envelope{position:absolute;width:460px;height:320px;right:-160px;top:210px;background:#ddbdbe;transform:rotate(14deg);border-radius:2px;box-shadow:7px 14px 25px #7a574a2b;z-index:0;pointer-events:none}
.display-liner{position:absolute;inset:-110px 0 0;clip-path:polygon(0 26%,50% 0,100% 26%,100% 100%,0 100%);background:#f2dfd9 url('assets/floral-frame.png') center/cover;border-radius:2px;box-shadow:inset 0 0 0 12px #d9b6b7}
.display-pocket{position:absolute;inset:0;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#edcfce,#d7b0b5)}
.invitation-actions{position:relative;z-index:2;margin-top:28px;text-align:center}
.stationery .card-footnote{font:italic 16px/1.5 var(--serif);letter-spacing:0;color:#777565;margin-top:12px}
.invitation-actions .text-button{margin-top:3px;padding:14px}

/* Carry the same lettering, borders and paper colors into the information website. */
.stationery.website-page{background:#fffaf5}
.stationery .site-header{height:81px;border-bottom-color:#e6dace}
.stationery .monogram{font:35px/1.2 var(--script);color:#747a61}
.stationery .site-header nav{font-size:10px;letter-spacing:.4px;gap:30px}
.stationery .site-header nav .nav-rsvp{border-color:#cbbd9e}
.stationery .hero{min-height:825px;padding:95px 25px 105px;background:radial-gradient(ellipse at center,#fffaf4,#f4e6e4);isolation:isolate}
.stationery .hero::before{display:none}
.hero-frame{position:absolute;top:20px;bottom:20px;left:50%;transform:translateX(-50%);height:calc(100% - 40px);width:min(650px,96%);object-fit:fill;z-index:-1;pointer-events:none}
.stationery .hero-inner{width:min(455px,80%);padding:15px 0 5px}
.stationery .hero .faith-cross{margin-bottom:24px}
.stationery .hero h1{font:400 clamp(83px,9vw,116px)/1.15 var(--script);letter-spacing:0;margin:25px 0 30px;color:#687357}
.stationery .hero h1 em{font:italic 33px/.8 var(--serif);margin:9px 0 14px}
.stationery .hero .eyebrow{font-size:9px;letter-spacing:2.7px}
.stationery .hero-details{flex-direction:column;gap:8px;font:500 13px/1.6 var(--serif);letter-spacing:1.6px;margin-bottom:16px}
.stationery .hero-details .tiny-star{display:none}
.stationery .hero-bottom{bottom:28px;left:5%;right:5%;color:#8d8375;font-size:7px}
.stationery .hero .underlined-link{font:italic 19px/1.6 var(--serif);letter-spacing:0;gap:20px;padding:4px 0}
.stationery h2{font-size:clamp(43px,4.8vw,64px);letter-spacing:-.9px;line-height:1.12;color:#59634e}
.stationery h2 em{font:400 1.25em/.9 var(--script);letter-spacing:0;display:inline-block;margin-top:10px}
.stationery .welcome{background:#f6e7e7;position:relative;padding-top:95px;padding-bottom:85px}
.stationery .welcome h2{max-width:620px}
.stationery .body-copy{font:18px/1.7 var(--serif);color:#747868;max-width:570px}
.stationery .scripture{font:36px/1.4 var(--script);color:#7e795e;margin-top:30px}
.stationery .scripture cite{font:8px/1.8 var(--sans);letter-spacing:1.8px;margin-top:14px}
.stationery .story-grid{gap:55px}
.stationery .story-number{font:36px var(--script);color:#a38d60;margin-bottom:24px}
.stationery .story-item h3{font-size:30px;color:#616c56}
.stationery .story-item>p:last-child,.stationery .people-item>p:last-child{font:17px/1.7 var(--serif);color:#737969}
.stationery .people{background:#f2efe5}
.stationery .family-emblem{width:100px;height:120px;border-color:#c9baa2;background:#fff9ee80;border-radius:48% 48% 3px 3px}
.stationery .people-item h3{font-size:29px}
.stationery .gallery-heading>p{font:italic 19px/1.5 var(--serif)}
.stationery .gallery-item figcaption{font:28px/1.25 var(--script);padding-top:18px;color:#777a62}
.stationery .photo-placeholder{background:linear-gradient(145deg,#e9ece2,#cbd0bd)}
.stationery .photo-placeholder::before{border-color:#fffcf5b0;inset:11px}
.stationery .celebration{background:#5b654f;gap:80px}
.stationery .celebration h2{color:#fff8ec}
.stationery .celebration h2 em{color:#f0d9d7}
.stationery .event h3{font-size:32px}
.stationery .event>p{font:17px/1.65 var(--serif)}
.stationery .event .event-place{font-size:17px}
.stationery .event-time{font-size:9px;letter-spacing:1.6px}
.stationery .travel{background:#faf1ec}
.stationery summary{font:20px/1.4 var(--serif)}
.stationery details p{font:17px/1.7 var(--serif)}
.stationery .rsvp{background:#f2e1e1}
.stationery .rsvp>p:not(.eyebrow){font:18px/1.6 var(--serif)}
.stationery .rsvp-floral{opacity:.45;height:350px;left:-40px}
.stationery .site-footer p{font:30px var(--script);color:#797b65}
.stationery .underlined-link{border-bottom-color:#b9a47b}

@media(max-width:760px){
  .stationery .invitation-stage{padding:48px 18px 32px;min-height:calc(100svh - 103px)}
  .stationery .invite-heading h1{font-size:79px;margin:13px 0 5px}
  .stationery .invite-heading .eyebrow{font-size:9px;letter-spacing:2.3px;max-width:none}
  .stationery .invite-heading .intro{font-size:18px;max-width:250px;line-height:1.5;margin:auto}
  .stationery .envelope-scene{height:224px;width:min(360px,83vw);margin-top:67px;transform:rotate(-3deg)}
  .stationery .envelope-caption{font-size:26px;bottom:32px}
  .stationery .wax-seal{width:66px;height:65px;top:calc(55% - 33px)}
  .stationery .seal-ring{width:51px;height:51px;font-size:21px}
  .stationery .envelope-flap{clip-path:polygon(0 0,100% 0,50% 61%)}
  .table-botanical{width:125px;height:220px;left:-85px;bottom:-46px;transform:rotate(-30deg);opacity:.75}
  .silk-ribbon{width:36px;height:325px;right:-25px;top:-44px}
  .stationery .letter-peek{inset:10px 15px 14px;padding-top:25px}
  .stationery .letter-peek .eyebrow{font-size:7px}
  .stationery .peek-names{font-size:29px;padding-top:17px}
  .stationery .open-hint{font-size:8px;letter-spacing:1.5px;margin-top:39px;gap:10px}
  .stationery .open-hint .hint-line{width:20px}
  .stationery .invitation-footer{margin:0 7%;gap:20px;min-height:53px}
  .stationery .invitation-footer>span:first-child{font-size:23px}
  .stationery .invitation-footer>span:last-child{font-size:7px;letter-spacing:1.2px;text-align:right;max-width:140px}
  .stationery.opening .letter-peek{transform:translateY(-135px)}
  .stationery.opened .invitation-stage{padding:25px 14px 18px}
  .stationery .invitation-card{width:min(430px,100%)}
  .letter-content{padding:48px 49px 59px;min-height:730px}
  .letter-content .faith-cross{margin-bottom:17px;width:16px;height:25px}
  .letter-kicker{font-size:8px;letter-spacing:1.8px;line-height:1.8;margin-bottom:22px}
  .stationery .invitation-names .given-name{font-size:58px}
  .stationery .invitation-names .family-name{font-size:12px;letter-spacing:3px;margin-top:7px}
  .stationery .invitation-names em{font-size:22px;margin:16px 0 12px}
  .stationery .invitation-line{font-size:17px;margin-top:25px;line-height:1.4}
  .stationery .invite-date{font-size:15px;letter-spacing:.8px}
  .stationery .invite-time{font-size:14px}
  .stationery .invite-location{font-size:11px;letter-spacing:1px;margin-top:21px}
  .stationery .invite-city{font-size:15px}
  .stationery .reception-note{font-size:14px;margin-top:17px}
  .stationery .card-verse{font-size:14px;margin-top:23px}
  .stationery .card-verse span{font-size:7px;letter-spacing:.9px}
  .display-envelope{width:270px;height:240px;right:-60px;top:190px;opacity:.6;transform:rotate(10deg)}
  .display-liner{inset:-50px 0 0}
  .invitation-actions{margin-top:25px}
  .stationery .card-footnote{font-size:15px;max-width:280px;margin:12px auto 0}
  .stationery .site-header{height:72px;margin:0 6%}
  .stationery .site-header nav{top:72px;background:#fffaf5}
  .stationery .site-header nav a{padding:14px 0}
  .stationery .hero{min-height:750px;padding:95px 22px 105px}
  .hero-frame{width:calc(100% - 18px);top:15px;height:calc(100% - 30px)}
  .stationery .hero-inner{width:80%;padding:0}
  .stationery .hero h1{font-size:83px;margin:27px 0}
  .stationery .hero h1 em{font-size:26px;margin:6px 0 14px}
  .stationery .hero .eyebrow{font-size:8px;letter-spacing:2px;max-width:none}
  .stationery .hero-details{font-size:11px;letter-spacing:1.2px;gap:7px;max-width:210px}
  .stationery .hero .underlined-link{font-size:18px;gap:17px}
  .stationery .hero-bottom{display:none}
  .stationery .section{padding:75px 8%}
  .stationery .body-copy{font-size:18px}
  .stationery .story-grid{gap:34px}
  .stationery .story-item>p:last-child,.stationery .people-item>p:last-child{font-size:17px}
  .stationery .people-grid{gap:32px}
  .stationery .gallery-item figcaption{font-size:23px}
  .stationery .celebration{gap:35px}
  .stationery .rsvp-floral{height:250px;left:-80px}
  .stationery .site-footer{padding:35px 8% 20px}
}
@media(max-width:350px){
  .stationery .invite-heading h1{font-size:67px}
  .stationery .envelope-scene{height:195px}
  .stationery .envelope-caption{font-size:24px;bottom:28px}
  .letter-content{padding:47px 40px 58px;min-height:740px}
  .stationery .invitation-names .given-name{font-size:54px}
  .stationery .letter-kicker{font-size:7px;letter-spacing:1.2px}
  .stationery .invitation-line{font-size:16px}
  .stationery .invite-date{font-size:14px;letter-spacing:.6px}
  .stationery .hero h1{font-size:74px}
  .stationery .hero .eyebrow{font-size:7px}
  .stationery .hero{min-height:735px}
}
@media(prefers-reduced-motion:reduce){.stationery:not(.motion-enabled) *, .stationery:not(.motion-enabled) *::before,.stationery:not(.motion-enabled) *::after{animation:none!important;transition:none!important}}

/* One continuous scene: the same card lifts from behind the envelope pocket. */
.stationery.invitation-page .invitation-stage{height:740px;min-height:calc(100svh - 95px);display:block;padding:0;transition:height 3.4s cubic-bezier(.25,.65,.25,1)}
.stationery.invitation-page .invite-heading{position:absolute;top:44px;left:20px;right:20px;margin:auto}
.stationery.invitation-page .envelope-scene{position:absolute;top:310px;left:50%;margin:0;transform:translateX(-50%);transition:top 3.4s cubic-bezier(.25,.65,.25,1);perspective:1600px}
.stationery.invitation-page .envelope{filter:none;overflow:visible}
.stationery.invitation-page .envelope-lining{box-shadow:0 15px 30px #806b4928}
.stationery.invitation-page .envelope-flap{transition:transform 1.8s cubic-bezier(.3,.1,.25,1);backface-visibility:visible}
.stationery.invitation-page .envelope-lining,.stationery.invitation-page .envelope-pocket,.stationery.invitation-page .envelope-fold{transition:translate 3.4s ease;translate:0}
.stationery.invitation-page .envelope-caption{transition:opacity .8s}
.stationery.invitation-page .open-hint{position:absolute;top:663px;left:0;right:0;justify-content:center;margin:0}
.stationery.invitation-page .invitation-card{position:absolute;left:50%;top:0;width:min(490px,calc(100vw - 32px));z-index:3;animation:none;transform:translate(-50%,16px) scale(.94);transform-origin:50% 0;clip-path:inset(0 0 75% 0);text-align:center;outline:none;transition:transform 2.5s cubic-bezier(.2,.6,.25,1),clip-path 2.5s cubic-bezier(.2,.6,.25,1)}
.stationery.invitation-page .letter-content{padding:53px 66px 60px;min-height:850px}
.stationery.invitation-page .letter-content>*{opacity:0;transform:translateY(12px);transition:opacity 1.6s ease,transform 1.6s ease}
.stationery.invitation-page .invitation-actions{opacity:0;transition:opacity 1s}
.stationery.invitation-page .letter-rsvp{margin-top:25px;width:100%}
.stationery.invitation-page .rsvp-deadline{font:italic 17px/1.5 var(--serif);color:#73735f}
.stationery.invitation-page .letter-rsvp .button{margin-top:14px;min-height:44px;padding:11px 25px;font-size:9px;background:#657052}
.stationery.invitation-page .rsvp-pending{font:10px/1.6 var(--sans);letter-spacing:1px;margin-top:10px;color:#88806e}
.stationery.invitation-page .wedding-details-link{display:inline-block;font:italic 15px/1.5 var(--serif);text-decoration:none;border-bottom:1px solid #c8b791;margin-top:14px}
.stationery.invitation-page.opening .envelope-scene{display:block;opacity:1}
.stationery.invitation-page.opening .invite-heading,.stationery.invitation-page.opening .open-hint{display:block;pointer-events:none}
.stationery.invitation-page.opening .open-hint{display:flex}
.stationery.invitation-page.opening .envelope-caption{opacity:0}
.stationery.invitation-page.drawing .invitation-card{transform:translate(-50%,-210px) scale(.94);clip-path:inset(0 0 52% 0)}
.stationery.invitation-page.unfolding .invitation-stage{height:var(--open-height)}
.stationery.invitation-page.unfolding .envelope-scene{top:var(--open-top)}
.stationery.invitation-page.unfolding .invitation-card{transform:translate(-50%,-470px) scale(1);clip-path:inset(-40px -45px -20px -45px);z-index:8;transition-duration:3.4s}
.stationery.invitation-page.unfolding .envelope-lining,.stationery.invitation-page.unfolding .envelope-pocket,.stationery.invitation-page.unfolding .envelope-fold{translate:90px}
.stationery.invitation-page.unfolding .envelope-flap{translate:90px;transition:transform 1.8s,translate 3.4s}
.stationery.invitation-page.unfolding .silk-ribbon{opacity:.2;transition:opacity 2s}
.stationery.invitation-page.reading .letter-content>*{opacity:1;transform:none}
.stationery.invitation-page.reading .letter-content>:nth-child(2){transition-delay:.15s}
.stationery.invitation-page.reading .letter-content>:nth-child(3){transition-delay:.35s}
.stationery.invitation-page.reading .letter-content>:nth-child(4){transition-delay:.55s}
.stationery.invitation-page.reading .letter-content>:nth-child(n+5){transition-delay:.8s}
.stationery.invitation-page.reading .letter-content>.letter-rsvp{transition-delay:1.1s}
.stationery.invitation-page.reading .letter-content>.card-verse{transition-delay:1.3s}
.stationery.invitation-page.reading .invitation-actions{opacity:1;transition-delay:1.5s}
.stationery.invitation-page.opened .envelope-scene{display:block}
@media(max-width:760px){
  .stationery.invitation-page .invitation-stage{height:675px;min-height:calc(100svh - 103px)}
  .stationery.invitation-page .invite-heading{top:44px}
  .stationery.invitation-page .envelope-scene{top:313px}
  .stationery.invitation-page .open-hint{top:589px}
  .stationery.invitation-page .invitation-card{width:min(430px,calc(100vw - 30px));transform:translate(-50%,12px) scale(.82);clip-path:inset(0 0 79% 0)}
  .stationery.invitation-page .letter-content{padding:44px 47px 55px;min-height:875px}
  .stationery.invitation-page.drawing .invitation-card{transform:translate(-50%,-170px) scale(.82);clip-path:inset(0 0 56% 0)}
  .stationery.invitation-page.unfolding .invitation-card{transform:translate(-50%,-390px) scale(1);clip-path:inset(-30px -25px -20px -25px)}
  .stationery.invitation-page.unfolding .envelope-lining,.stationery.invitation-page.unfolding .envelope-pocket,.stationery.invitation-page.unfolding .envelope-fold,.stationery.invitation-page.unfolding .envelope-flap{translate:45px}
  .stationery.invitation-page .rsvp-deadline{font-size:16px}
  .stationery.invitation-page .wedding-details-link{font-size:14px}
}
@media(max-width:350px){
  .stationery.invitation-page .letter-content{padding:44px 39px 54px}
  .stationery.invitation-page .envelope-scene{top:300px}
  .stationery.invitation-page .open-hint{top:550px}
  .stationery.invitation-page .invitation-stage{height:630px}
}
@media(prefers-reduced-motion:reduce){.stationery.invitation-page:not(.motion-enabled) *{transition:none!important;animation:none!important}}

/* Intentional motion is started by the seal; a quiet alternative remains available. */
.stationery.invitation-page .quiet-open{position:absolute;top:696px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:#898272}
.stationery.invitation-page.opening .quiet-open{display:none}
.stationery.invitation-page .letter-content{padding-top:108px}
.stationery.invitation-page .letter-kicker{max-width:230px;font-size:8px}
.stationery.invitation-page [aria-disabled=true]{cursor:default}
.stationery.invitation-page .button[aria-disabled=true]:hover{transform:none;background:#657052}
.stationery.invitation-page .invitation-stage{overflow-anchor:none}
@media(max-width:760px){.stationery.invitation-page .quiet-open{top:617px}.stationery.invitation-page .letter-content{padding-top:104px}.stationery.invitation-page .letter-kicker{max-width:160px;letter-spacing:1.4px}}
@media(max-width:350px){.stationery.invitation-page .quiet-open{top:579px}}

.stationery.invitation-page .letter-rsvp{display:flex;flex-direction:column;align-items:center}
.stationery.invitation-page .wedding-details-link{overflow-wrap:anywhere;max-width:100%;font-size:13px}
.stationery.invitation-page .letter-content{padding-top:125px;padding-bottom:120px}
.stationery.invitation-page .stationery-frame{mask-image:linear-gradient(to right,#000 10%,transparent 33%,transparent 67%,#000 90%),linear-gradient(to bottom,#000,transparent 13%,transparent 88%,#000)}
@media(max-width:760px){.stationery.invitation-page .letter-content{padding-top:120px;padding-bottom:115px}.stationery.invitation-page .letter-kicker{font-size:7px;max-width:140px}}

/* A traditional 5 × 7 card, with typography scaled to the paper rather than a long webpage. */
.stationery.invitation-page .card-border{aspect-ratio:5 / 7;container-type:inline-size}
.stationery.invitation-page .letter-content{position:absolute;inset:0;min-height:0;padding:10cqw 13cqw 8cqw;justify-content:center}
.stationery.invitation-page .letter-content .faith-cross{width:3cqw;height:4.2cqw;margin:0 auto 2cqw;flex-shrink:0}
.stationery.invitation-page .letter-content .faith-cross::before{left:calc(50% - .5px)}
.stationery.invitation-page .letter-content .faith-cross::after{top:1.35cqw}
.stationery.invitation-page .letter-kicker{font:400 1.6cqw/1.5 var(--serif);letter-spacing:.38cqw;margin:0 0 2.8cqw;max-width:none}
.stationery.invitation-page .invitation-names .given-name{font-size:9.2cqw;line-height:1}
.stationery.invitation-page .invitation-names .family-name{font-size:2cqw;line-height:1.3;letter-spacing:.58cqw;margin-top:.8cqw}
.stationery.invitation-page .invitation-names em{font-size:3.8cqw;line-height:1;margin:1.5cqw 0}
.stationery.invitation-page .invitation-line{font-size:2.9cqw;line-height:1.35;margin:3cqw auto 0;max-width:58cqw}
.stationery.invitation-page .date-divider{margin:2cqw auto;gap:2cqw}
.stationery.invitation-page .date-flower{font-size:2.5cqw}
.stationery.invitation-page .date-divider>span:not(.date-flower){width:5cqw}
.stationery.invitation-page .invite-date{font-size:2.9cqw;line-height:1.4;letter-spacing:.18cqw}
.stationery.invitation-page .invite-time{font-size:2.5cqw;line-height:1.4;margin-top:.6cqw}
.stationery.invitation-page .invite-location{font-size:2.35cqw;line-height:1.5;letter-spacing:.2cqw;margin-top:2.6cqw}
.stationery.invitation-page .invite-city{font-size:2.65cqw;line-height:1.4;margin-top:0}
.stationery.invitation-page .letter-rsvp{margin-top:3cqw}
.stationery.invitation-page .rsvp-deadline{font-size:2.9cqw;line-height:1.4}
.stationery.invitation-page .letter-rsvp .button{min-height:8cqw;margin-top:1.8cqw;padding:1.8cqw 4.5cqw;font-size:1.85cqw;letter-spacing:.2cqw;gap:3cqw}
.stationery.invitation-page .wedding-details-link{font-size:2.35cqw;line-height:1.4;margin-top:1.5cqw;max-width:66cqw}
.stationery.invitation-page .card-verse{font-size:2.5cqw;line-height:1.4;margin-top:3cqw}
.stationery.invitation-page .card-verse span{font-size:1.25cqw;line-height:1.5;letter-spacing:.2cqw;margin-top:.9cqw}
.stationery.invitation-page.unfolding .invitation-card{transform:translate(-50%,-320px) scale(1)}
.stationery.invitation-page .invitation-actions{margin-top:18px}
.stationery.invitation-page:not(.motion-enabled).opening *{transition:none!important;animation:none!important}
@media(max-width:760px){
 .stationery.invitation-page.unfolding .invitation-card{transform:translate(-50%,-260px) scale(1)}
 .stationery.invitation-page .invite-heading h1{font-size:62px;white-space:nowrap}
 .stationery.invitation-page .invite-heading .intro{margin-top:15px}
}
@media(max-width:350px){.stationery.invitation-page .invite-heading h1{font-size:53px}}

/* Keep the opened envelope visibly present, as a companion piece of stationery. */
.stationery.invitation-page.unfolding .invitation-card{transform:translate(-50%,var(--card-lift,-320px)) scale(1)}
.stationery.invitation-page.unfolding .envelope-lining,.stationery.invitation-page.unfolding .envelope-pocket,.stationery.invitation-page.unfolding .envelope-fold,.stationery.invitation-page.unfolding .envelope-flap{translate:210px}
@media(max-width:760px){
 .stationery.invitation-page.unfolding .envelope-lining,.stationery.invitation-page.unfolding .envelope-pocket,.stationery.invitation-page.unfolding .envelope-fold,.stationery.invitation-page.unfolding .envelope-flap{translate:0}
 .stationery.invitation-page .invitation-actions{margin-top:150px}
}

/* A quiet, formal opening with the instruction on the envelope itself. */
.stationery.invitation-page .invite-heading h1{font-size:clamp(58px,7.4vw,96px);margin:0 0 14px}
.stationery.invitation-page .invite-heading .intro{font:400 32px/1.4 var(--script);color:#80766e;max-width:none;margin:0 auto}
.stationery.invitation-page .envelope-scene .open-hint{top:calc(55% + 52px);left:12px;right:12px;margin:0;font:9px/1.5 var(--sans);letter-spacing:1.6px;text-transform:uppercase;justify-content:center;color:#806264;z-index:7;pointer-events:none}
.stationery.invitation-page .invitation-footer{justify-content:center;border:0;min-height:64px}
.stationery.invitation-page .invitation-footer>span{font:28px/1.3 var(--serif);color:var(--gold);letter-spacing:2px;max-width:none;text-align:center}
.stationery.invitation-page .letter-content .faith-cross{margin-bottom:4cqw}
@media(max-width:760px){
 .stationery.invitation-page .invite-heading h1{font-size:clamp(43px,12.7vw,62px);white-space:nowrap}
 .stationery.invitation-page .invite-heading .intro{font-size:29px}
 .stationery.invitation-page .envelope-scene .open-hint{top:calc(55% + 43px);font-size:7px;letter-spacing:1.25px}
 .stationery.invitation-page .seal-ring{font-size:18px;white-space:nowrap}
}
.stationery.invitation-page:not(.opening) .invitation-stage{height:clamp(650px,calc(100svh - 64px),740px);min-height:0}