
html:has(.invitation-page) { scroll-behavior: auto; }
.invitation-page { overflow-anchor: none; --invite-green: #7e8a6d; --invite-dark: #48543f; --blush: #e9c4c1; --rose: #a7636e; background: #f5f3eb; color: var(--invite-dark); }
.invitation-page::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 35%, #e8c4c126, transparent 42%), radial-gradient(ellipse at 87% 78%, #d8dfcf33, transparent 45%), repeating-linear-gradient(90deg, #89967808 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, #ffffff40 0 1px, transparent 1px 4px); content: ""; pointer-events: none; }
.invite-header { display: flex; align-items: center; justify-content: space-between; width: min(1380px, calc(100% - 80px)); margin: 0 auto; padding: 25px 0 18px; border-bottom: 1px solid #7e8a6d33; }
.invite-header .wordmark { color: var(--invite-dark); font-size: 43px; }
.invite-site-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border: 1px solid #a5ad93; border-radius: 26px; background: linear-gradient(180deg,#fffdf6,#f6f0e2); color: #48543f; box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px #bbc1ab77, 0 2px 5px #48543f0a; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; text-decoration: none; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.invite-site-link span { font-size: 17px; line-height: 1; }
.invite-site-link:hover { border-color: #7e8a6d; background: #f1eadb; }
.invite-site-link:focus-visible { outline: 2px solid #697859; outline-offset: 4px; }
.invitation-intro { padding: 43px 20px 0; text-align: center; }
.invite-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.invitation-intro h1 { margin: 13px 0 9px; font-family: var(--script); font-size: clamp(39px, 4.8vw, 64px); font-weight: 400; line-height: 1.15; }
.invite-sender { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.invite-sender span { padding: 0 12px; }
.invitation-stage { position: relative; width: min(1140px, calc(100% - 64px)); margin: 26px auto 0; }
.envelope-scene { overflow: clip; position: absolute; inset: 0; height: 490px; display: grid; place-items: center; transition: opacity .5s ease .7s, visibility 0s 1.2s; }
.envelope-scene[hidden] { display: none; }
.envelope { --flap-tip: 56%; isolation: isolate; position: relative; width: min(440px, 86%); aspect-ratio: 1.5; margin-top: -40px; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 1200px; filter: drop-shadow(0 24px 22px #3e49352b); transition: transform .8s ease .5s; }
.envelope > span:not(.visually-hidden) { position: absolute; display: block; }
.envelope-back { inset: 0; border: 1px solid #839373; border-radius: 3px; background: #a4b194; box-shadow: inset 0 1px 0 #e3ead6, 0 1px 2px #34422440, 0 7px 12px #34422424, 0 24px 34px #3442241c, 0 42px 65px #34422412; }
.envelope-pocket { inset: 0; z-index: 6; border-radius: 2px; background-image: url("assets/envelope-cotton-paper.jpg"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 293' preserveAspectRatio='none'%3E%3Cpath d='M0 293 220 155 440 293' fill='none' stroke='%23637350' stroke-opacity='.34' stroke-width='1.2'/%3E%3Cpath d='M1 291.5 220 153.8 439 291.5' fill='none' stroke='%23edf2e1' stroke-opacity='.55' stroke-width='.7'/%3E%3C/svg%3E"), linear-gradient(155deg,#c2ccb4 0%,#b5c1a5 44%,#a5b295 100%); background-size: 440px 440px, 100% 100%, 100% 100%; box-shadow: inset 1px 0 0 #e1e8d4aa, inset -1px 0 0 #62734e55, inset 0 -1px 0 #62734e66; clip-path: polygon(0 0,50% 53%,100% 0,100% 100%,0 100%); }
.envelope-flap { inset: 0; z-index: 7; transform-origin: top; backface-visibility: hidden; filter: drop-shadow(0 3px 2px #34432255); transition: transform .75s cubic-bezier(.4,0,.2,1), z-index 0s .36s; }
.envelope-lace { inset: 0; z-index: 7; background: url("assets/envelope-wedding-lace.svg?v=hanging-trim") center / 100% 100% no-repeat; transform-origin: top; backface-visibility: hidden; opacity: var(--flap-lace-opacity, 1); pointer-events: none; filter: drop-shadow(0 1px .3px #3c4e354d) drop-shadow(0 2px 1.5px #34442224); }

.envelope-back::before, .envelope-pocket, .envelope-pocket::before, .envelope-pocket::after, .envelope-flap::before { background-blend-mode: multiply, normal, normal; }
.envelope-back::before { position: absolute; inset: 3px; border: 1px solid #7f916c77; border-radius: 1px; background-image: url("assets/envelope-cotton-paper.jpg"), linear-gradient(180deg,#40502c30,transparent 35%,#45552d1c), repeating-linear-gradient(90deg,#d1dbc2 0 9px,#eef0e2 9px 18px); background-size: 440px 440px, 100% 100%, 100% 100%; box-shadow: inset 0 5px 12px #3545282b; content: ""; }
.envelope-pocket::before, .envelope-pocket::after { position: absolute; inset: 0; background-size: 440px 440px, 100% 100%; pointer-events: none; content: ""; }
.envelope-pocket::before { clip-path: polygon(0 0,50% 53%,0 100%); background-image: url("assets/envelope-cotton-paper.jpg"), linear-gradient(110deg,#bdc8ad,#99aa86); }
.envelope-pocket::after { clip-path: polygon(100% 0,50% 53%,100% 100%); background-image: url("assets/envelope-cotton-paper.jpg"), linear-gradient(250deg,#acb99a,#8f9f7d); }
.envelope-flap::before { position: absolute; inset: 0; background-image: url("assets/envelope-cotton-paper.jpg"), radial-gradient(ellipse at 25% 0%,#f4f5e43d,transparent 70%), var(--flap-paper,linear-gradient(158deg,#c0cbb2 0%,#b2bfa4 47%,#9eae8e 100%)); background-size: 440px 440px, 100% 100%, 100% 100%; clip-path: polygon(0 0,100% 0,50% var(--flap-tip)); box-shadow: inset 0 1px 0 #ecf0e0bb; content: ""; }
.envelope-flap::after { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 50 56 100 0' fill='none' stroke='%23748364' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; content: ""; }
.wax-seal { z-index: 8; top: var(--flap-tip); left: 50%; transform: translate(-50%, -50%) rotate(-6deg); display: grid !important; width: 88px; height: 88px; place-items: center; border: 0; background: url("assets/ivory-wax-seal-realistic.png") center / contain no-repeat; filter: drop-shadow(1px 2px 1px #34412459) drop-shadow(2px 6px 5px #34412445); transition: opacity .25s ease, transform .4s ease; }
.envelope-address { z-index: 7; right: 0; bottom: 10%; left: 0; color: #46533c; font-family: var(--script); font-size: 27px; line-height: 1.2; text-align: center; }
.envelope:hover { transform: translateY(-5px) rotate(-1deg); }
.envelope-trigger { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.envelope-trigger:focus-visible { outline: 2px solid #48543f; outline-offset: 14px; }
.envelope-trigger:disabled { pointer-events: none; }
.envelope-botanicals { inset: 0; z-index: -1; pointer-events: none; }
/* Keep the watercolor arch's lower edge level with the envelope base.
   Its native 4:3 ratio provides a taller, softly broken crown above the paper. */
.envelope-floral-arch { position: absolute; top: -63.125%; left: -22.5%; width: 145%; max-width: none; pointer-events: none; }
.open-hint { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; color: #7e8a6d; pointer-events: none; }
.scroll-label { display: block; margin-bottom: 12px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.mobile-open-label { display: block; margin-bottom: 0; }
.scroll-arrow { display: block; width: 24px; height: 44px; margin: 0 auto; }
.invitation-suite { display: grid; position: relative; grid-template-columns: 1fr 1.65fr 1fr; gap: 25px; align-items: center; padding: 30px 0; }
/* Cotton stock keeps its grain beneath the printed border and watercolor. */
.invitation-card { position: relative; isolation: isolate; overflow: hidden; padding: 13px; background-color: #fffef9; background-image: linear-gradient(115deg,#fffef9a6,#fffef970 45%,#fffdf660), url("assets/envelope-cotton-paper.jpg"); background-size: 100% 100%, 400px 400px; background-blend-mode: normal, multiply; border: 1px solid #c9bea84d; border-radius: 46% 46% 3px 3px / 13% 13% 0 0; box-shadow: inset 1px 1px 1px #ffffffd9, inset -1px -1px 2px #9d89611a, 0 1px 0 #eee6d6, 1px 3px 0 -1px #e0d6c2, 0 5px 8px #4b3c251c, 0 22px 42px #3e49351c; transform: rotate(-1deg); }
.card-inner { position: relative; z-index: 1; border: 1px solid #8f9b7970; border-radius: 46% 46% 0 0 / 13% 13% 0 0; box-shadow: 0 1px 0 #fffdf7b3, inset 0 1px 0 #fffdf780; padding: 53px 18px 24px; text-align: center; }
.card-inner::before { position: absolute; inset: 5px; border: 1px solid #c9a9a65c; border-radius: inherit; pointer-events: none; content: ""; }
.invitation-card .invite-eyebrow { font-size: 8px; letter-spacing: .14em; }
.invitation-card h2 { display: grid; margin: 31px 0 23px; font-family: var(--serif); font-size: clamp(38px, 4.5vw, 60px); font-weight: 400; line-height: 1; }
.invitation-card h2 i { color: var(--rose); margin: 5px 0 -1px; font-family: var(--script); font-size: 43px; font-weight: 400; }
.invitation-card h2:focus { outline: none; }
.invitation-request { font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.invite-date { margin: 26px 0 16px; }
.invite-date span { display: block; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }
.invite-date strong { display: block; margin: 3px 0 7px; font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1.2; }
.invite-location { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.invite-script { font-family: var(--script); font-size: 28px; line-height: 1.15; }
.invitation-card .invite-script { margin: 28px 0 18px; font-size: 25px; }
.card-monogram { display: flex; align-items: center; justify-content: center; gap: 5px; width: 66px; height: 66px; margin: 0 auto; border: 1px solid #bf95998c; border-radius: 50%; color: var(--rose); font-family: var(--serif); font-size: 24px; line-height: 1; }
.card-monogram i { font-family: var(--script); font-size: 20px; }
.card-botanical { position: absolute; z-index: 0; width: 145px; opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
.botanical-one { left: -55px; top: 54px; transform: rotate(10deg); }
.botanical-two { right: -34px; bottom: -8px; transform: scaleX(-1) rotate(-8deg); }
.invite-photo { position: relative; margin: 0; padding: 10px 10px 0; border: 1px solid #d7d1c366; background: linear-gradient(115deg,#fffef9bf,#fffef98c), url("assets/envelope-cotton-paper.jpg") center / 360px 360px, #fffef9; box-shadow: inset 1px 1px 1px #ffffffd9, inset -1px -1px 1px #a3977a1a, 0 1px 0 #e5dfd1, 0 3px 4px #4b3c2517, 0 12px 25px #3e493519; }
.invite-photo::before { position: absolute; z-index: 1; top: -9px; left: calc(50% - 30px); width: 60px; height: 22px; background: linear-gradient(100deg,#fff9,transparent 45%,#bb838315), repeating-linear-gradient(90deg,#e9c4c18c 0 1px,#edcfca9e 1px 3px), url("assets/envelope-cotton-paper.jpg") center / 180px 180px; background-blend-mode: normal, multiply, normal; clip-path: polygon(2% 0,98% 2%,96% 16%,100% 27%,97% 41%,100% 59%,97% 76%,99% 98%,1% 100%,3% 82%,0 65%,3% 47%,0 30%,3% 15%); transform: rotate(-8deg); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 1px #ab7a7633; opacity: .83; content: ""; }
.invite-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.invite-photo figcaption { padding: 12px 0 14px; font-family: var(--script); font-size: 22px; text-align: center; line-height: 1.1; }
.invite-left { display: flex; flex-direction: column; gap: 40px; align-self: center; }
.photo-one { transform: rotate(-7deg); margin-top: -55px; }
/* A wide admission ticket with punched tear-off notches and a sage stub. */
.wedding-ticket { position: relative; z-index: 2; display: block; width: min(290px,100%); margin: 0 auto; transform: rotate(-5deg); filter: drop-shadow(0 1px 1px #65583e38) drop-shadow(1px 6px 5px #48543f24); }
.ticket-paper { --ticket-stub-width: 56px; position: relative; display: grid; grid-template-columns: minmax(0,1fr) var(--ticket-stub-width); min-height: 138px; border: 1px solid #9da98d99; border-radius: 3px; background: linear-gradient(115deg,#fffef9a6,#fffef970), url("assets/envelope-cotton-paper.jpg") center / 360px 360px, #fffef9; box-shadow: inset 1px 1px 1px #fffffff0, inset -1px -2px 2px #9d896124; mask: radial-gradient(circle at calc(100% - var(--ticket-stub-width)) 0,transparent 8px,#000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--ticket-stub-width)) 100%,transparent 8px,#000 8.5px) bottom / 100% 51% no-repeat; }
.ticket-paper::before { position: absolute; inset: 5px; right: calc(var(--ticket-stub-width) + 5px); z-index: 1; border: 1px solid #a9b29888; content: ""; pointer-events: none; }
.ticket-main { min-width: 0; padding: 13px 14px; text-align: center; color: var(--invite-dark); }
.ticket-kicker { display: flex; justify-content: space-between; gap: 6px; margin: 0; color: var(--invite-green); font-size: 6.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.ticket-main h3 { margin: 7px 0 5px; color: var(--rose); font-family: var(--script); font-size: 26px; font-weight: 400; line-height: 1.1; }
.ticket-names { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.2; }
.ticket-date { display: block; margin: 9px 0 3px; font-size: 8px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.ticket-place { margin: 0; font-family: var(--serif); font-size: 12px; line-height: 1.3; }
.ticket-stub { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 10px 6px; background: repeating-linear-gradient(90deg,#dce3cf 0 12px,#f3f5e9 12px 24px); color: var(--invite-dark); }
.ticket-stub::before { position: absolute; top: 9px; bottom: 9px; left: -1px; width: 3px; background: radial-gradient(circle at 50% 2px,#657153aa 0 .7px,#fffdf9b3 1px,transparent 1.5px) 0 0 / 3px 5px repeat-y; content: ""; }
.ticket-stub svg { width: 14px; height: 14px; color: var(--rose); }
.ticket-stub-date { display: grid; gap: 2px; font-family: var(--serif); font-size: 17px; line-height: 1; }
.ticket-stub-date > span { padding: 3px 0; border-top: 1px solid #91a07c66; border-bottom: 1px solid #91a07c66; }
.ticket-barcode { display: block; width: 32px; height: 12px; background: repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px,currentColor 6px 7px,transparent 7px 11px); }
.ticket-stub-label { font-size: 6.5px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }

.photo-two { transform: rotate(6deg); margin: 0 0 30px; }
.photo-two img { aspect-ratio: 5 / 4; }
.invite-side { align-self: center; }
.reply-card { padding: 27px 12px 22px; border: 1px solid #a6b3917a; box-shadow: inset 0 0 0 7px #fffef733, inset 1px 1px 1px #ffffffb3, inset -1px -1px 2px #74805c26, 0 1px 0 #c9cfba, 1px 3px 0 -1px #d6dacb, 0 4px 7px #48543f17, 0 12px 25px #674d3914; text-align: center; transform: rotate(2deg); }
/* The sage stripes sit in the grain like ink on uncoated paper. */
.reply-card, .ticket-stub { background-image: linear-gradient(115deg,#fffef933,transparent 50%,#67714d0a), url("assets/envelope-cotton-paper.jpg"), repeating-linear-gradient(90deg,#dce3cf 0 12px,#f3f5e9 12px 24px); background-size: 100% 100%, 360px 360px, auto; background-blend-mode: normal, multiply, normal; }
.ticket-stub { box-shadow: inset 1px 0 1px #48543f14, inset -1px -1px 1px #74805c26, inset 0 1px 0 #ffffffb3; }
.reply-card .invite-script { margin: 0 0 14px; }
.reply-card > p:not(.invite-script) { margin: 0 0 18px; font-size: 10px; }
/* A small cream stationery label, with a second fine rule. */
.reply-card .button { justify-content: center; width: 100%; min-height: 54px; padding: 0 18px; border: 1px solid #a5ad93; border-radius: 30px; background: linear-gradient(180deg,#fffdf6,#f6f0e2); color: #48543f; box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px #bbc1ab99, 0 3px 6px #66715414; font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.reply-card .button:hover { background: #f1eadb; border-color: #7e8a6d; box-shadow: inset 0 0 0 4px #f8f3e7, inset 0 0 0 5px #a5af9299, 0 3px 6px #66715420; }
.reply-card .button:focus-visible { outline: 2px solid #697859; outline-offset: 4px; }
.reply-card nav { display: flex; justify-content: center; gap: 15px; margin-top: 19px; }
.reply-card nav a { font-size: 9px; text-underline-offset: 4px; }
.invitation-page a:focus-visible { outline: 2px solid #48543f; outline-offset: 6px; }
/* A final stationery panel leads guests to share their mailing address. */
.date-keepsake { position: relative; width: min(700px, calc(100% - 80px)); margin: 38px auto 0; padding: 34px 36px 36px; border: 1px solid #b5bea599; border-radius: 3px; background: linear-gradient(115deg,#fffef9a6,#fffef970), url("assets/envelope-cotton-paper.jpg") center / 400px 400px, #fffef9; box-shadow: inset 1px 1px 1px #ffffffd9, inset -1px -1px 2px #9d89611a, 0 1px 0 #e6e0d1, 1px 3px 0 -1px #dcd4c3, 0 5px 8px #4b3c2512, 0 15px 30px #48543f0e; text-align: center; }
.date-keepsake::before { position: absolute; inset: 6px; border: 1px solid #b5bea566; border-radius: 1px; pointer-events: none; content: ""; }
.date-keepsake .invite-eyebrow { margin: 0; color: #737e63; font-size: 8px; }
.date-keepsake h2 { margin: 12px 0 8px; font-family: var(--script); font-size: 38px; line-height: 1.15; font-weight: 400; }
.keepsake-date { margin: 0 0 26px; color: #657058; font-family: var(--serif); font-size: 17px; }
.keepsake-date span { margin: 0 8px; color: #b2868c; }
.keepsake-actions { display: flex; justify-content: center; }
.keepsake-actions .keepsake-button { width: min(380px, 100%); line-height: 1.5; padding-top: 10px; padding-bottom: 10px; }
.keepsake-button { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid #a5ad93; border-radius: 28px; color: #48543f; background: linear-gradient(180deg,#fffdf6,#f6f0e2); font-size: 9px; letter-spacing: .13em; box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px #bbc1ab77; }
.reply-card .button, .keepsake-button { background: linear-gradient(180deg,#fffef9c7,#fffdf59e), url("assets/envelope-cotton-paper.jpg") center / 360px 360px, #fffef9; }
@media (max-width: 760px) {
  .invitation-page { --mobile-envelope-lift: 48px; }
  .open-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .scroll-arrow { height: 26px; }
}
@media (max-width: 480px) {
  .date-keepsake { width: calc(100% - 40px); margin-top: 24px; padding: 30px 22px; }
  .date-keepsake h2 { font-size: 34px; }
  .keepsake-date { font-size: 15px; }
  .keepsake-date span { margin: 0 3px; }
}
/* Visual copies leave the pocket, then land exactly on the readable suite.
   The suite stays in document flow, including its taller mobile layout. */
.invite-enhanced .opening-track { position: relative; z-index: 2; --opening-distance: 1000px; height: calc(100svh + var(--opening-distance)); pointer-events: none; }
.invite-enhanced .opening-sticky { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh; overflow: clip; }
.invite-enhanced .invitation-intro { flex: none; opacity: var(--intro-opacity, 1); }
.invite-enhanced .envelope-scene { position: relative; flex: 1; width: min(1140px, calc(100% - 64px)); height: auto; min-height: 0; margin: 0 auto; overflow: visible; transition: none; }
.invite-enhanced .envelope, .invite-enhanced .envelope:hover { position: absolute; top: calc(48% - var(--mobile-envelope-lift, 0px)); left: 50%; margin: 0; transform: translate(-50%, -28%); filter: none; transition: none; }
.invite-enhanced .envelope-trigger { pointer-events: auto; }
.invite-enhanced .envelope-trigger:disabled { pointer-events: none; }
.invite-enhanced .envelope > span:not(.visually-hidden, .wax-seal, .envelope-lace) { opacity: var(--envelope-opacity, 1); }
.invite-enhanced .envelope-back { box-shadow: inset 0 1px 0 #e3ead6, 0 1px 2px #34422440, 0 7px 12px #34422424, 0 24px 34px #3442241c, 0 42px 65px #34422412; }
.invite-enhanced .envelope-pocket { transform: translateY(var(--envelope-y, 0px)); }
.invite-enhanced .envelope-back, .invite-enhanced .envelope-botanicals, .invite-enhanced .envelope-address { translate: 0 var(--envelope-y, 0px); }
.invite-enhanced .envelope-flap { z-index: var(--flap-layer, 7); transform: rotateX(var(--flap-angle, 0deg)); backface-visibility: visible; transition: none; }
.invite-enhanced .envelope-flap, .invite-enhanced .envelope-lace { translate: 0 var(--envelope-y, 0px); }
.invite-enhanced .envelope-lace { z-index: var(--flap-layer, 3); opacity: calc(var(--flap-lace-opacity, 1) * var(--envelope-opacity, 1)); transform: rotateX(var(--flap-angle, 0deg)); }
.invite-enhanced .wax-seal { opacity: var(--seal-opacity, 1); transform: translate(-50%, -50%) translateY(var(--seal-y, 0px)) scale(var(--seal-scale, 1)) rotate(-6deg); transition: none; }
.invite-enhanced .open-hint { bottom: 64px; left: 0; right: 0; text-align: center; opacity: var(--hint-opacity, 1); }
.invite-enhanced .invitation-stage { z-index: 1; margin-top: calc(130px - 100svh); visibility: hidden; }
.invite-enhanced.is-unpacked .invitation-stage { visibility: visible; }
.envelope-contents { position: absolute; inset: 0; z-index: 1; clip-path: inset(-200vmax -200vmax 2px); pointer-events: none; }
.envelope-contents.is-extracted { z-index: 10; clip-path: none; }
.flying-sheet[hidden] { display: none; }
.flying-sheet { position: absolute; top: 0; left: 0; z-index: 1; transform-origin: 0 0; pointer-events: none; }
.flying-sheet > * { width: 100% !important; max-width: none; margin: 0 !important; }
.invite-enhanced.is-unpacked .flying-sheet { visibility: hidden; }
.invite-enhanced.is-reduced-motion .opening-track { --opening-distance: 0px; }
.invite-enhanced.is-reduced-motion .opening-sticky { position: relative; }
.invite-enhanced.is-reduced-motion .invitation-stage { margin-top: 26px; visibility: visible; }
.invite-enhanced.is-reduced-motion .flying-sheet { display: none; }
@media (max-width: 850px) {
  .invitation-stage { width: min(650px, calc(100% - 40px)); }
  .invitation-suite { grid-template-columns: 1fr 1fr; gap: 25px; padding-bottom: 30px; }
  .invitation-card { grid-column: 1 / -1; grid-row: 1; width: min(430px, 100%); justify-self: center; }
  .invite-left { display: contents; }
  .photo-one { grid-column: 1; grid-row: 3; margin: 0; transform: rotate(-4deg); }
  .wedding-ticket { grid-column: 1 / -1; grid-row: 2; width: min(340px,100%); justify-self: center; margin: 8px auto 2px; transform: rotate(-3deg); }
  .invite-side { display: contents; }
  .photo-two { grid-column: 2; grid-row: 3; margin: 0; transform: rotate(4deg); }
  .photo-two img { aspect-ratio: 3 / 4; }
  .reply-card { grid-row: 4; grid-column: 1 / -1; width: min(430px,100%); justify-self: center; margin-top: 10px; transform: none; }
  .invitation-card h2 { font-size: 57px; }
  .invite-header { width: calc(100% - 40px); }
}
@media (max-width: 480px) {
  .invite-header { padding: 17px 0 12px; }
  .invite-header .wordmark { font-size: 35px; }
  .invite-site-link { gap: 9px; padding: 0 14px; font-size: 8px; letter-spacing: .08em; }
  .invitation-intro { padding-top: 34px; }
  .invite-eyebrow { font-size: 8px; }
  .invitation-intro h1 { max-width: 300px; margin: 16px auto 15px; font-size: 46px; }
  .invite-sender { font-size: 8px; letter-spacing: .09em; }
  .invite-sender span { padding: 0 4px; }
  .envelope-scene { height: 380px; }
  .invite-enhanced .opening-track { --opening-distance: 850px; }
  .invite-enhanced.is-reduced-motion .opening-track { --opening-distance: 0px; }
  .invite-enhanced .envelope-scene { width: calc(100% - 40px); }
  .invite-enhanced .open-hint { bottom: 94px; }
  .invite-enhanced .invitation-stage { margin-top: calc(80px - 100svh); }
  .invite-enhanced.is-reduced-motion .invitation-stage { margin-top: 26px; }
  .envelope { width: 74%; margin-top: -65px; }
  .envelope-floral-arch { top: -50.75%; left: -17%; width: 134%; }
  .wax-seal { --mobile-seal-size: 48px; width: 48px; height: 48px; }
  .envelope-address { bottom: 4%; font-size: 20px; }
  .open-hint { bottom: 5px; }
  .invitation-suite { gap: 18px; padding-top: 10px; }
  .card-inner { padding: 47px 12px 22px; }
  .invitation-card h2 { font-size: 49px; }
  .invitation-card .invite-script { font-size: 24px; }
  .invitation-request { font-size: 17px; }
  .invite-photo { padding: 6px 6px 0; }
  .invite-photo figcaption { font-size: 18px; }
}
@media (max-height: 700px) {
  .invite-enhanced .invitation-intro { padding-top: 18px; }
  .invite-enhanced .invitation-intro h1 { margin-top: 10px; margin-bottom: 10px; font-size: 38px; }
  .invite-enhanced .envelope, .invite-enhanced .envelope:hover { top: calc(46% - var(--mobile-envelope-lift, 0px)); width: min(240px, 74%); }
  .envelope-address { bottom: 4%; font-size: 20px; }
  .wax-seal { width: var(--mobile-seal-size, 64px); height: var(--mobile-seal-size, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-page *, .invitation-page *::before, .invitation-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}
@media print {
  .opening-track, .invite-header, .invitation-intro, .envelope-scene, .invite-photo, .invite-side, .wedding-ticket, .date-keepsake, .site-footer { display: none !important; }
  .invitation-stage, .invite-enhanced .invitation-stage { width: 100%; margin-top: 0; visibility: visible; }
  .invitation-suite { display: block; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .invitation-card { width: 125mm; margin: 0 auto; transform: none; box-shadow: none; }
}
