:root{--ink:#582f42;--muted:#775762;--pink:#f8eaec;--gold:#9e773d;--line:#d8bba7;--paper:#fffafa}*{box-sizing:border-box}body{margin:0;background:var(--pink);color:var(--ink);font-family:'Nunito Sans',sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-underline-offset:5px}button,a{touch-action:manipulation}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #974663;outline-offset:5px}header{display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;border-bottom:1px solid #d8bba760;background:#fff8f9e8;gap:25px}nav{display:flex;gap:25px;flex-wrap:wrap}nav a{text-decoration:none;font-size:14px;padding:6px 0}nav a[aria-current]{border-bottom:1px solid var(--gold)}.monogram{font:italic 42px 'Cormorant Garamond',serif;text-decoration:none;line-height:.8}.monogram span{display:block;font:10px 'Nunito Sans';letter-spacing:3px;margin-top:10px}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.25}h1{font-size:clamp(54px,7vw,88px);margin:14px 0 25px}h2{font-size:38px;margin:15px 0 24px}h3{font-size:26px;margin:15px 0}p{margin:0 0 22px}.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:500;color:var(--muted)}.hero{min-height:810px;display:grid;place-items:center;background:url('lantern-garden.png') center 46%/cover;text-align:center;padding:70px 22px}.hero-copy{max-width:600px;text-shadow:0 1px 9px #fff9f9}.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(3.5rem,12vw,8rem);font-weight:500;margin:25px 0 0;line-height:1.2}.eighteen{font:italic 2rem/1.5 'Cormorant Garamond',serif;margin-top:8px}.fine-line{width:80px;height:1px;background:var(--gold);margin:25px auto}.invitation{font:1.35rem/1.7 'Cormorant Garamond',serif}.event-date{font-size:14px;letter-spacing:.12em;margin-top:30px;margin-bottom:7px}.button{display:inline-block;padding:13px 32px;border:1px solid var(--gold);border-radius:2px;background:var(--ink);color:#fff8f9;text-decoration:none;letter-spacing:.07em;font-size:14px;transition:background .2s,transform .2s}.button:hover{background:#783f59;transform:translateY(-2px)}.text-link{display:block;margin:20px auto 0;font-size:14px;width:fit-content}.countdown-wrap{text-align:center;padding:58px 20px;background:#fff8f9}.countdown{display:flex;justify-content:center;gap:45px;margin:22px 0}.countdown b{font:48px 'Cormorant Garamond',serif;display:block}.countdown span{display:block;font-size:12px;letter-spacing:.15em}.small{font-size:13px;color:var(--muted)}.page-heading{text-align:center;padding:80px 20px 55px;background:linear-gradient(#fff8fa99,#f8eaec),url('lantern-garden.png') center 20%/cover}.script,.signature{font:italic 1.6rem/1.6 'Cormorant Garamond',serif}.paper{background:#fffafbe8;border:1px solid #d8bba775;padding:46px;box-shadow:0 16px 45px #682c4106}.story{max-width:750px;margin:0 auto 80px}.story p{font-size:18px;line-height:1.9}.chapter{color:var(--gold);font-size:12px;letter-spacing:.15em}.details-grid{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 auto 30px}.dress{font-size:21px}.swatch{background:#fff;width:50px;height:50px;border:1px solid #cfbdbd;border-radius:50%;margin-top:24px}.timeline{max-width:1120px;margin:0 auto 60px;text-align:center}.faq{max-width:850px;margin:0 auto 80px;padding:0 20px}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-size:18px}details p{margin:18px 0 0}.eighteen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1300px;margin:0 auto 80px;padding:0 24px}.names{padding:32px 25px}.names .eyebrow{font-size:12px;letter-spacing:.07em}.names h2{font-size:36px}.names ol{padding-left:30px}.names li{padding:8px 0 8px 9px;border-bottom:1px solid #e9dce0;font-size:16px}.names li::marker{color:var(--gold);font-family:'Cormorant Garamond';font-size:20px}.rsvp,.gallery-intro{max-width:860px;text-align:center;margin:0 auto 80px}.notice{background:#f4e4e8;padding:20px;margin:30px 0 16px}.contacts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);margin-top:35px;padding-top:25px}.contacts h3{font-size:25px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery:empty{display:none}.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}iframe{max-width:100%;border:0}footer{text-align:center;padding:45px 20px;border-top:1px solid #d8bba770}footer p:last-of-type{font-size:12px;letter-spacing:.14em}.opening{position:fixed;inset:0;z-index:30;background:#f6e5e9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;transition:opacity .8s,visibility .8s}.opening.dismissed{opacity:0;visibility:hidden;pointer-events:none}.envelope{position:relative;max-width:620px;width:100%;aspect-ratio:3/2;border:0;background:url('envelope.png') center/cover;cursor:pointer;box-shadow:0 25px 70px #672b4320;border-radius:6px;transition:transform .4s}.envelope:hover{transform:translateY(-5px)}.seal{display:none}.open-label{position:absolute;bottom:18px;left:0;right:0;font-size:14px;color:var(--ink);letter-spacing:.12em}.opening-name{font:500 3.5rem/1.3 'Cormorant Garamond',Georgia,serif;margin:30px 0 0}.opening-name span{font:italic 1.3rem/1.5 'Cormorant Garamond',serif;margin-left:10px}#music{border:1px solid var(--line);background:#fff6f8;padding:10px 20px;color:var(--ink);cursor:pointer}#social a{margin:0 12px}@media(min-width:1100px){.hero{background-size:100% auto;background-position:center 42%}}@media(max-width:760px){header{flex-direction:column;gap:20px;padding:22px 16px}nav{justify-content:center;gap:8px 20px}nav a{font-size:14px}.hero{min-height:740px;background-position:center}.hero .eyebrow{font-size:11px;letter-spacing:.15em}.countdown{gap:25px}.countdown b{font-size:40px}.page-heading{padding:60px 20px 30px}.paper{padding:30px 24px}.details-grid,.eighteen-grid{grid-template-columns:1fr}.details-grid,.timeline,.story,.rsvp,.gallery-intro{margin-left:18px;margin-right:18px}.eighteen-grid{padding:0 18px}.contacts{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.opening-name{font-size:2.75rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Clear invitation typography at narrow widths and enlarged text. */
.hero-copy{width:100%;min-width:0}.opening{overflow-y:auto}.opening-name{text-align:center}.opening-name span{display:block;margin:8px 0 0}.event-date{font-weight:600;letter-spacing:.06em}.names li{line-height:1.7}h1,h2,h3{overflow-wrap:break-word}

/* Reference typography: fine serif titles and flowing italic accents. */
h1,h2,h3{font-weight:400;line-height:1.15;letter-spacing:-.025em}.hero h1{font-weight:400;font-size:clamp(4rem,12vw,8.5rem);line-height:1.05;letter-spacing:-.045em}.eighteen{font-size:clamp(2.4rem,6vw,4.25rem);font-weight:400;line-height:1.2;color:#a65f82;margin-top:8px}.script,.signature{font-weight:400;color:#995474}.opening-name{font-weight:400;letter-spacing:-.025em}.opening-name span{color:#a65f82}.invitation{font-family:"Nunito Sans",sans-serif;font-size:1.125rem;line-height:1.75}.names li{font-family:"Nunito Sans",sans-serif}.eyebrow{letter-spacing:.2em}

/* Personal note, composed to match the supplied reference. */
.personal-note{min-height:75vh;text-align:center;background:#fffafa;padding:90px 24px 100px}.note-age{font:400 2rem/1.4 'Cormorant Garamond',Georgia,serif;color:#a65f82;letter-spacing:.15em;margin-bottom:48px}.personal-note .eyebrow{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:18px}.personal-note .eyebrow::before,.personal-note .eyebrow::after{content:"";width:38px;height:1px;background:#c4a3b0}.personal-note h1{font-size:clamp(2.6rem,5.8vw,5rem);max-width:1100px;margin:0 auto 36px;line-height:1.08}.personal-note h1 em{color:#a65f82;font-weight:400}.note-body{font-size:1.125rem;line-height:1.85;max-width:760px;margin:0 auto 44px;color:var(--muted)}.note-signature{font:400 1.9rem/1.5 'Cormorant Garamond',Georgia,serif;margin:0}.note-signature em{color:var(--muted);margin-right:16px}.note-signature strong{font-weight:600;font-style:italic}.hero .eighteen{font-size:clamp(2rem,5.5vw,3.8rem)}@media(max-width:600px){.personal-note{padding:65px 24px}.note-age{margin-bottom:35px}.personal-note .eyebrow{letter-spacing:.14em;gap:12px}.personal-note .eyebrow::before,.personal-note .eyebrow::after{width:22px}.note-body{font-size:1rem}.personal-note h1{line-height:1.12}}

/* Evening introduction matches the supplied left-aligned reference. */
.evening-intro{max-width:1120px;margin:0 auto;padding:80px 0 55px}.evening-intro .eyebrow{display:flex;align-items:center;gap:20px;margin-bottom:36px}.evening-intro .eyebrow::before,.evening-intro .eyebrow::after{content:"";width:42px;height:1px;background:#be9aaa}.evening-intro h1{font-size:clamp(3.4rem,6.5vw,5.75rem);line-height:1.04;margin:0 0 35px}.evening-intro h1 em{font-weight:400;color:#a65f82}.evening-description{font-size:1.125rem;line-height:1.9;max-width:680px;color:var(--muted);margin:0}@media(max-width:1168px){.evening-intro{padding-left:24px;padding-right:24px}}@media(max-width:600px){.evening-intro{padding-top:55px;padding-bottom:40px}.evening-intro .eyebrow{gap:14px;margin-bottom:28px}.evening-intro .eyebrow::before,.evening-intro .eyebrow::after{width:28px}.evening-description{font-size:1rem}}

/* Envelope lift followed by a soft invitation reveal. */
body.invitation-closed{overflow:hidden}.invitation-closed #site{opacity:0;transform:translateY(20px);transition:opacity .9s ease .55s,transform 1.1s cubic-bezier(.2,.7,.2,1) .45s}.invitation-revealing #site{opacity:1;transform:translateY(0)}.opening{transition:opacity .8s ease .65s}.opening .envelope{transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity .75s ease .18s;transform-origin:center}.opening .eyebrow,.opening .opening-name{transition:opacity .4s ease,transform .7s ease}.opening-in-progress{opacity:0;pointer-events:none}.opening-in-progress .envelope{transform:translateY(-65px) scale(1.055) rotate(-1deg);opacity:0}.opening-in-progress .eyebrow,.opening-in-progress .opening-name{opacity:0;transform:translateY(-12px)}@media(prefers-reduced-motion:reduce){.invitation-closed #site,.opening-in-progress .envelope,.opening-in-progress .eyebrow,.opening-in-progress .opening-name{transform:none!important;transition:none!important}.opening{transition:none!important}}

/* Isolated envelope, hinged flap, and rising invitation. */
.opening{background:#fff8fa;perspective:1400px;transition:opacity .7s ease 2.1s;overflow:hidden}.opening .envelope{background:none;border:0;box-shadow:none;border-radius:0;width:min(78vw,570px);max-width:570px;aspect-ratio:3/2;overflow:visible;transform:none;transition:none}.opening .envelope:hover{transform:none}.envelope-scene{position:absolute;inset:0;perspective:1200px;isolation:isolate;filter:drop-shadow(0 16px 18px #582f421f)}.envelope-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.envelope-back{z-index:0;filter:brightness(.86)}.envelope-pocket{z-index:3;clip-path:polygon(0 0,50% 65%,100% 0,100% 100%,0 100%)}.envelope-flap{position:absolute;inset:0;z-index:4;transform-origin:50% 0%;transition:transform 1s cubic-bezier(.4,0,.2,1),z-index 0s .5s;transform-style:preserve-3d}.envelope-flap img{clip-path:polygon(0 0,100% 0,61% 55%,61% 73%,39% 73%,39% 55%);backface-visibility:visible}.invitation-letter{position:absolute;left:10%;right:10%;top:8%;bottom:4%;z-index:2;background:#fffaf7;border:1px solid #dbc2af;box-shadow:0 0 15px #582f4212;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;transform:translateY(0);transition:transform 1.2s cubic-bezier(.22,.61,.36,1) .7s}.invitation-letter span{font-size:clamp(.55rem,1.6vw,.75rem);letter-spacing:.15em;color:var(--muted)}.invitation-letter strong{font:400 clamp(2rem,7vw,4rem)/1.2 'Cormorant Garamond',Georgia,serif;margin:10px 0}.invitation-letter em{font:italic clamp(1.4rem,4vw,2.5rem)/1.2 'Cormorant Garamond',Georgia,serif;color:#a65f82}.opening .open-label{bottom:-48px;transition:opacity .25s}.opening-in-progress .envelope{opacity:1;transform:none}.opening-in-progress .envelope-flap{transform:rotateX(180deg);z-index:1}.opening-in-progress .invitation-letter{transform:translateY(-74%)}.opening-in-progress .open-label{opacity:0}.invitation-closed #site{transition:opacity .8s ease 2.1s,transform .9s ease 2.1s}.opening-in-progress{opacity:0}.opening .envelope[aria-disabled="true"]{cursor:default}@media(prefers-reduced-motion:reduce){.opening,.envelope-flap,.invitation-letter,.invitation-closed #site{transition:none!important}.opening-in-progress .envelope-flap,.opening-in-progress .invitation-letter{transform:none!important}}
.envelope-pocket{clip-path:polygon(0 0,39% 55%,39% 73%,61% 73%,61% 55%,100% 0,100% 100%,0 100%)}.envelope-back{transition:opacity .35s ease .35s}.opening-in-progress .envelope-back{opacity:0}

/* Consistent iOS text colors and a gentler opening sequence. */
.opening .envelope{appearance:none;-webkit-appearance:none;color:var(--ink);-webkit-tap-highlight-color:transparent}.invitation-letter,.invitation-letter strong{color:#582f42;-webkit-text-fill-color:#582f42}.invitation-letter em{color:#a65f82;-webkit-text-fill-color:#a65f82}.invitation-letter span{color:#775762;-webkit-text-fill-color:#775762}.open-label{color:#775762;-webkit-text-fill-color:#775762}.monogram{border:0;box-shadow:none}.monogram:focus:not(:focus-visible){outline:none}main[tabindex="-1"]:focus{outline:none}.opening{transition:opacity .95s cubic-bezier(.4,0,.2,1) 2.55s}.envelope-flap{transition:transform 1.35s cubic-bezier(.45,0,.15,1),z-index 0s .675s}.invitation-letter{transition:transform 1.65s cubic-bezier(.22,.61,.36,1) .85s}.opening-in-progress .invitation-letter{transform:translateY(-65%)}.invitation-closed #site{transform:translateY(8px);transition:opacity 1s ease 2.5s,transform 1.05s cubic-bezier(.22,.61,.36,1) 2.5s}.invitation-revealing #site{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.opening,.envelope-flap,.invitation-letter,.invitation-closed #site{transition:none!important;transform:none!important}}

.guest-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.guest-actions .map-button{background:#fff9f7;color:var(--ink)}.guest-actions .map-button:hover{background:#f5e1e8}@media(max-width:480px){.guest-actions{flex-direction:column;align-items:center}.guest-actions .button{width:min(100%,290px)}}

/* Read the personal note once, on the letter, before entering the invitation. */
.opening{transition:opacity .9s ease;overflow-y:auto}.opening .invitation-letter{justify-content:center;padding:clamp(12px,3vw,28px);gap:8px}.invitation-letter strong{font-size:clamp(1.35rem,4.4vw,2.3rem);margin:0;line-height:1.05}.invitation-letter em{font-size:clamp(1.3rem,4vw,2rem);line-height:1.1}.invitation-letter .letter-message{font-size:clamp(.85rem,2vw,1rem);line-height:1.65;letter-spacing:0;margin-top:10px}.letter-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.letter-opening .envelope-back{opacity:0}.letter-opening .invitation-letter{transform:translateY(-55%)}.letter-opening .open-label{opacity:0}.letter-readable .envelope-scene{filter:none}.letter-readable .envelope-pocket,.letter-readable .envelope-flap{opacity:0;transition:opacity .55s ease}.letter-readable .invitation-letter{left:-3%;right:-3%;top:-25%;bottom:-25%;transform:translateY(0);z-index:5;transition:all .6s ease;box-shadow:0 15px 50px #582f4212}.letter-continue{margin-top:100px;position:relative;z-index:8}.letter-continue[hidden]{display:none}.letter-finished{opacity:0;pointer-events:none}.invitation-closed #site{transition:opacity .9s ease,transform .9s ease}.letter-continue:focus:not(:focus-visible){outline:none}@media(max-width:600px){.opening .envelope{width:82vw}.letter-readable .invitation-letter{top:-55%;bottom:-55%;padding:20px}.letter-continue{margin-top:135px}.invitation-letter .letter-message{font-size:.9rem}}@media(prefers-reduced-motion:reduce){.letter-opening .envelope-flap,.letter-opening .invitation-letter{transition:none!important}.letter-readable .invitation-letter{transition:none!important}}

/* Keep the current detail pages while restoring the earlier envelope. */
#site{min-height:100svh}header{padding:14px 4vw;gap:16px}main.details-page{min-height:calc(100svh - 92px);padding:0 24px 28px}.page-heading{padding:25px 16px 20px;background:none}.page-heading h1{font-size:clamp(2.5rem,5vw,4rem);margin:8px 0 12px}.page-heading p{margin-bottom:8px}.evening-intro{padding:24px 0 20px}.evening-intro .eyebrow{margin-bottom:12px}.evening-intro h1{font-size:clamp(2.4rem,4.5vw,3.7rem);margin-bottom:12px}.evening-description{font-size:1rem;line-height:1.6;max-width:850px}.details-grid{gap:18px;margin-bottom:22px}.details-grid .paper{padding:24px}.details-grid p{margin-bottom:12px}.details-grid h2{font-size:2rem;margin:12px 0}.details-grid h3{margin:10px 0}.swatch{margin-top:12px;width:32px;height:32px}.timeline{padding:24px;margin-bottom:24px}.faq{margin-bottom:24px}.rsvp{padding:28px;margin-bottom:0}.rsvp h2{margin-top:0}.contacts{margin-top:22px;padding-top:12px}.eighteen-grid{padding:0;gap:16px;margin-bottom:0}.names{padding:22px 18px}.names li{padding:4px 0 4px 6px}.names h2{margin:8px 0 14px}.names .eyebrow{margin-bottom:8px}.hero{min-height:calc(100svh - 86px);padding:30px 22px}.hero h1{margin-top:14px;font-size:clamp(3.6rem,10vw,7rem)}.hero p{margin-bottom:14px}.hero .fine-line{margin:18px auto}.guest-actions{margin-top:20px}footer{padding:12px 20px}footer:has(#social:empty):has(#music[hidden]){display:none}
@media(max-width:760px){header{flex-direction:row;gap:12px;padding:12px 16px}.monogram{font-size:32px;flex-shrink:0}.monogram span{font-size:10px;margin-top:8px}nav{gap:5px 14px;justify-content:flex-end}nav a{font-size:14px}main.details-page{padding:0 16px 24px}.details-grid,.timeline,.rsvp{margin-left:0;margin-right:0}.details-grid{grid-template-columns:1fr 1fr}.details-grid .paper{padding:18px}.details-grid .button{padding:12px 15px}.contacts{grid-template-columns:1fr 1fr}.eighteen-grid{padding:0}.hero{min-height:calc(100svh - 90px)}.evening-intro{padding:20px 0 16px}}
@media(max-width:520px){.details-grid{grid-template-columns:1fr}.page-heading{padding:22px 0 16px}.rsvp{padding:22px 18px}.contacts{gap:12px}.contacts a{font-size:14px}.opening.hero .eyebrow{font-size:12px}.hero .invitation{font-size:1rem}.hero .guest-actions{gap:8px}.hero .text-link{margin-top:14px}}


.invitation-letter .letter-signature{font:italic 1.5rem/1.3 "Cormorant Garamond",Georgia,serif;letter-spacing:0;color:#995474;-webkit-text-fill-color:#995474;margin-top:8px}


.envelope-flap img{clip-path:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

.envelope-pocket{clip-path:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200L500%20590L1000%200V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23p%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200L500%20590L1000%200V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23p%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* A straight pocket edge stays below the seal; lift, then gently enlarge. */
.envelope-pocket{-webkit-mask-image:none;mask-image:none;clip-path:polygon(0 53%,100% 53%,100% 100%,0 100%)}
.envelope-back{transition:opacity .8s ease 1.4s}
.envelope-flap{transition:transform 1.6s cubic-bezier(.45,0,.15,1),z-index 0s .8s}
.invitation-letter{transition:transform 1.8s cubic-bezier(.22,.61,.36,1) 1s}
.letter-opening .invitation-letter{transform:translateY(-55%)}
.letter-readable .invitation-letter{transition:top 1.2s cubic-bezier(.22,.61,.36,1),bottom 1.2s cubic-bezier(.22,.61,.36,1),left 1.2s cubic-bezier(.22,.61,.36,1),right 1.2s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1),box-shadow 1.2s ease}
.letter-readable .envelope-pocket,.letter-readable .envelope-flap{transition:opacity 1s ease}

.pocket-paper{position:absolute;left:0;right:0;top:53%;bottom:0;z-index:3;background:#e9bfb4;transition:opacity 1s ease}.letter-readable .pocket-paper{opacity:0}.envelope-pocket{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20530H1000V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22105%22%20ry%3D%22151%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23cut%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20530H1000V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22105%22%20ry%3D%22151%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23cut%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");clip-path:none}

/* Keep the original envelope size; center an unclipped, content-sized letter. */
.opening{padding:24px;overflow-y:auto;justify-content:safe center}
.opening .envelope{flex-shrink:0;width:min(82vw,570px);max-width:570px}
.letter-readable .envelope{width:min(100%,600px);aspect-ratio:auto;min-height:0}
.letter-readable .envelope-scene{position:relative;inset:auto;display:block;perspective:none;filter:none}
.letter-readable .invitation-letter{position:relative;inset:auto;width:100%;height:auto;min-height:0;transform:none;padding:clamp(24px,5vw,44px);gap:12px;animation:centered-letter .9s cubic-bezier(.22,.61,.36,1) both;transition:none}
.letter-readable .envelope-back,.letter-readable .envelope-pocket,.letter-readable .envelope-flap{display:none}
.letter-readable .invitation-letter strong{font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.15}
.letter-readable .invitation-letter em{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2}
.letter-readable .invitation-letter .letter-message{font-size:1rem;line-height:1.75;letter-spacing:0}
.letter-readable .letter-continue{margin-top:24px;flex-shrink:0}
@keyframes centered-letter{from{opacity:.3;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.letter-readable .invitation-letter{animation:none}}

/* Restore complementary full-envelope layers without the half-height crop. */
.envelope-pocket{-webkit-mask-image:none;mask-image:none;clip-path:polygon(0 0,39% 55%,39% 73%,61% 73%,61% 55%,100% 0,100% 100%,0 100%)}
.envelope-flap img{-webkit-mask-image:none;mask-image:none;clip-path:polygon(0 0,100% 0,61% 55%,61% 73%,39% 73%,39% 55%)}
.envelope-back{opacity:1;transition:opacity .35s ease .35s}
.letter-opening .envelope-back{opacity:0}

/* Gentle route entrances and exits, with navigation kept in place. */
main{animation:page-enter .65s cubic-bezier(.22,.61,.36,1) both;transition:opacity .28s ease,translate .28s ease}
.page-leaving main{opacity:0;translate:0 -6px}
@keyframes page-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){main{animation:none;transition:none}.page-leaving main{opacity:1;translate:none}}

/* Round seal edge, with matching full-envelope layers. */
.envelope-flap img{clip-path:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.envelope-pocket{clip-path:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200L500%20590L1000%200V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23p%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200L500%20590L1000%200V1000H0Z%22%2F%3E%3Cellipse%20fill%3D%22black%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20mask%3D%22url%28%23p%29%22%20d%3D%22M0%200H1000V1000H0Z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Intact envelope artwork: no cutout shapes during the letter reveal. */
.opening .envelope-back,.opening .envelope-flap{display:none}
.opening .envelope-pocket{clip-path:none;-webkit-mask:none;mask:none;opacity:1;transform:translateY(0);transition:transform 1.8s cubic-bezier(.22,.61,.36,1) .5s,opacity 1s ease 1.65s}
.letter-opening .envelope-pocket{transform:translateY(35px);opacity:0}
.letter-readable .envelope-pocket{display:none}
@media(prefers-reduced-motion:reduce){.opening .envelope-pocket{transition:none;transform:none}}

/* Hinged flap over a continuous pocket: the seal leaves no hole behind. */
.opening .envelope-back{display:block;opacity:1;filter:none;transition:opacity .8s ease 2s}
.opening .envelope-flap{display:block;opacity:1;z-index:4;transform:rotateX(0deg);transition:transform 1.6s cubic-bezier(.45,0,.15,1),z-index 0s .8s}
.opening .envelope-flap img{clip-path:polygon(0 0,100% 0,100% 70%,0 70%);-webkit-mask:none;mask:none}
.opening .envelope-pocket{position:absolute;inset:53% 0 0;display:block;overflow:hidden;z-index:3;clip-path:none;-webkit-mask:none;mask:none;opacity:1;transform:none;transition:opacity .8s ease}
.envelope-scene .envelope-pocket img{position:absolute;inset:auto 0 0;width:100%;height:333%;object-fit:fill;transform:none}
.letter-opening .envelope-flap{transform:rotateX(180deg);z-index:1}
.letter-opening .envelope-back{opacity:0}
.letter-opening .envelope-pocket{opacity:1;transform:none}
.letter-readable .envelope-back,.letter-readable .envelope-pocket,.letter-readable .envelope-flap{display:none}
@media(prefers-reduced-motion:reduce){.opening .envelope-flap{transition:none}.letter-opening .envelope-flap{transform:rotateX(180deg)!important}}

.opening .envelope-flap img{clip-path:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1000L500%20590Z%22%2F%3E%3Cellipse%20fill%3D%22white%22%20cx%3D%22498%22%20cy%3D%22523%22%20rx%3D%22101%22%20ry%3D%22145%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* Full-height front folds instead of a half-height rectangular cover. */
.opening .envelope-pocket{inset:0;clip-path:polygon(0 0,50% 59%,100% 0,100% 100%,0 100%)}

/* Persistent, compact record control outside the changing page content. */
#music.vinyl-music{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:45;width:120px;height:120px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;color:#582f42;-webkit-tap-highlight-color:transparent}
.vinyl-music svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 3px #fff8fa)}
.music-curved-label{fill:#582f42;font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.25px;paint-order:stroke;stroke:#fff8fa;stroke-width:3px;stroke-linejoin:round}
.vinyl-disc{transform-origin:60px 67px;animation:record-spin 9s linear infinite;animation-play-state:paused}
.is-playing .vinyl-disc{animation-play-state:running}
.music-pause-icon{display:none}.is-playing .music-play-icon{display:none}.is-playing .music-pause-icon{display:block}
#music.vinyl-music:focus-visible{outline:2px solid #9d5275;outline-offset:2px}
body:has(.vinyl-music) main{padding-bottom:136px}
@keyframes record-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vinyl-disc{animation:none}}

/* Trial: swap the title’s regular and italic styles. */
.hero h1{font-style:italic}.hero .eighteen{font-style:normal}

/* Move the lifted paper into its reading position without a layout jump. */
.letter-readable .invitation-letter{animation:none;transform-origin:top left}

.eighteen-rsvp{text-align:center;padding:36px 0 16px}

/* Fit the complete closed envelope above the floating music control. */
.opening:not(.letter-readable){padding:32px 24px 184px}
.opening:not(.letter-readable) .envelope{width:min(82vw,570px,calc(150svh - 390px));height:auto;aspect-ratio:3/2;min-height:0;padding:0}
.opening:not(.letter-opening) .envelope-back{filter:none;opacity:1}
@media(max-height:440px){.opening:not(.letter-readable){padding:24px 180px 70px 24px}.opening:not(.letter-readable) .envelope{width:min(calc(100vw - 220px),calc(150svh - 165px),570px)}}

/* Quiet ornamental accents for the invitation’s inner pages. */
main.details-page{background:radial-gradient(ellipse at 4% 6%,#dca0b51c,transparent 42%),radial-gradient(ellipse at 98% 38%,#fff8eb70,transparent 40%)}
.chapter-ornament{display:flex;align-items:center;justify-content:center;gap:9px;margin:4px auto 12px;height:12px;color:#ae8554}
.chapter-ornament::before,.chapter-ornament::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,#bb966b80)}
.chapter-ornament::after{transform:rotate(180deg)}
.chapter-ornament span{display:block;width:5px;height:5px;background:currentColor;transform:rotate(45deg);opacity:.6}
.chapter-ornament span:nth-child(2){width:9px;height:9px;opacity:.8;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);transform:none}
.evening-intro .chapter-ornament{justify-content:flex-start;margin-left:0}
.details-page .paper{position:relative;background:linear-gradient(145deg,#fffafcef,#fffaf8e8);border-color:#d5b7bd;box-shadow:0 7px 24px #79364f07}
.details-page .paper::before{content:"";position:absolute;top:10px;right:10px;width:22px;height:22px;border-top:1px solid #b8986766;border-right:1px solid #b8986766;pointer-events:none}
.details-page .paper::after{content:"";position:absolute;bottom:10px;left:10px;width:22px;height:22px;border-bottom:1px solid #b8986766;border-left:1px solid #b8986766;pointer-events:none}
.names h2::after{content:"";display:block;width:34px;height:1px;margin-top:12px;background:#b98b60a6}
.names li:last-child{border-bottom:0}
.details-page .contacts{border-top-color:#c99daf70;background:linear-gradient(180deg,#f6e7ed66,transparent);padding:16px 12px 0}
.eighteen-rsvp::before{content:"";display:block;width:100px;height:1px;margin:0 auto 22px;background:linear-gradient(90deg,transparent,#b18c60a6,transparent)}

/* Center the envelope again with a smaller music control. */
.opening:not(.letter-readable){padding:48px 24px 64px;justify-content:safe center}
.opening:not(.letter-readable) .envelope{width:min(82vw,570px,calc(150svh - 210px))}
@media(max-height:440px){.opening:not(.letter-readable){padding:24px 140px 64px 24px}.opening:not(.letter-readable) .envelope{width:min(calc(100vw - 180px),calc(150svh - 150px),570px)}}

/* A lighter floral frame and more floating lanterns for the main invitation. */
.hero{background-image:url("lantern-garden-watercolor-fast.webp")}

/* A slower opening and a delicate stationery finish for the personal letter. */
.opening .envelope-flap{transition:transform 2.8s cubic-bezier(.45,0,.2,1),z-index 0s 1.4s}
.opening .invitation-letter{transition:transform 3.2s cubic-bezier(.45,0,.2,1) 1.6s}
.opening .envelope-back{transition:opacity 1.4s ease 3.4s}
.letter-readable .invitation-letter{transition:none;background:radial-gradient(ellipse at 0 0,#f3d5e18c,transparent 55%),radial-gradient(ellipse at 100% 100%,#f9e8c45c,transparent 50%),#fffaf7;border:1px solid #c7a77d;box-shadow:0 16px 48px #582f4214;padding:44px clamp(28px,6vw,52px) 36px}
.letter-readable .invitation-letter::before{content:"";position:absolute;inset:10px;border:1px solid #d4b99980;pointer-events:none}
.letter-readable .invitation-letter::after{content:"";position:absolute;top:21px;left:calc(50% - 6px);width:12px;height:12px;background:#af8953;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);pointer-events:none}
.letter-readable .letter-signature{padding-top:12px;margin-top:12px;border-top:1px solid #c7a77d70}
@media(prefers-reduced-motion:reduce){.opening .envelope-flap,.opening .invitation-letter,.opening .envelope-back{transition:none!important}}

/* Reference typography, laid out as a landscape letter with live text. */
.opening .envelope-scene,.opening .envelope-scene *{pointer-events:none}
.opening .envelope{pointer-events:auto;touch-action:manipulation}
.opening.letter-readable .envelope{width:min(92vw,700px);max-width:700px;aspect-ratio:3/2}
.letter-readable .envelope-scene{height:100%}
.opening.letter-readable .invitation-letter{height:100%;padding:clamp(18px,4vw,34px);gap:clamp(5px,1.3vw,12px);text-align:center}
.letter-readable .invitation-letter strong{font-family:Georgia,serif;font-weight:400;font-size:clamp(20px,4.6vw,38px);line-height:1.1;max-width:90%}
.letter-readable .invitation-letter em{font-family:Georgia,serif;font-size:clamp(17px,3.5vw,29px);line-height:1.2}
.letter-readable .invitation-letter .letter-message{font-family:Georgia,serif;font-size:clamp(11px,2.5vw,19px);line-height:1.45;max-width:92%;margin-top:4px}
.letter-readable .letter-signature{border:0;padding:0;margin-top:2px;display:flex;flex-direction:column;align-items:center;gap:0}
.letter-readable .letter-signature .signoff{font:italic clamp(12px,2.5vw,20px)/1.2 Georgia,serif;letter-spacing:0;color:#a65f82}
.letter-readable .letter-signature .signed-name{font:400 clamp(32px,7vw,58px)/1 'Allura',cursive;letter-spacing:0;color:#582f42}
@media(max-height:450px){.opening.letter-readable .envelope{width:min(72vw,600px)}}

.letter-readable .invitation-letter::after{top:14px;left:calc(50% - 10px);width:20px;height:20px;clip-path:none;background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23d98aac%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%225%22%20ry%3D%227%22%20transform%3D%22rotate%280%2016%2016%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%225%22%20ry%3D%227%22%20transform%3D%22rotate%2872%2016%2016%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%225%22%20ry%3D%227%22%20transform%3D%22rotate%28144%2016%2016%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%225%22%20ry%3D%227%22%20transform%3D%22rotate%28216%2016%2016%29%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%229%22%20rx%3D%225%22%20ry%3D%227%22%20transform%3D%22rotate%28288%2016%2016%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22%23e7bd78%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* Rounded layered blossom and matching script name. */
.letter-readable .invitation-letter::after{top:12px;left:calc(50% - 14px);width:28px;height:28px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M22%2029Q35%2028%2034%2018Q25%2017%2022%2029M18%2029Q5%2029%205%2021Q14%2018%2018%2029%22%20fill%3D%22%239ba789%22%2F%3E%3Cg%20stroke%3D%22%23d68da5%22%20stroke-width%3D%22.6%22%3E%3Ccircle%20cx%3D%2227.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2225.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2213.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2211.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%224.3%22%20fill%3D%22%23e4ba70%22%2F%3E%3Cg%20fill%3D%22%23b48b47%22%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2217%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2220%22%20r%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.hero h1{font-family:"Allura",cursive;font-style:normal;font-weight:700;font-size:clamp(5rem,15vw,10rem);line-height:1.15;-webkit-text-stroke:.35px currentColor}

/* Keep the same letter and typography throughout the lift and reveal. */
.opening .invitation-letter strong{font-family:Georgia,serif;font-weight:400;font-size:clamp(20px,4.6vw,38px);line-height:1.1;max-width:90%}
.opening .invitation-letter em{font-family:Georgia,serif;font-size:clamp(17px,3.5vw,29px);line-height:1.2}
.opening .invitation-letter .letter-message{font-family:Georgia,serif;font-size:clamp(11px,2.5vw,19px);line-height:1.45;max-width:92%;margin-top:4px}
.opening .letter-signature{border:0;padding:0;margin-top:2px;display:flex;flex-direction:column;align-items:center;gap:0}
.opening .letter-signature .signoff{font:italic clamp(12px,2.5vw,20px)/1.2 Georgia,serif;letter-spacing:0;color:#a65f82}
.opening .letter-signature .signed-name{font:400 clamp(32px,7vw,58px)/1 'Allura',cursive;letter-spacing:0;color:#582f42}
.opening .invitation-letter{left:0;right:0;top:0;bottom:0;width:100%;height:100%;padding:clamp(28px,4vw,34px);gap:clamp(5px,1.3vw,12px);text-align:center;background:radial-gradient(ellipse at 0 0,#f3d5e18c,transparent 55%),radial-gradient(ellipse at 100% 100%,#f9e8c45c,transparent 50%),#fffaf7;border:1px solid #c7a77d}
.opening.letter-readable .envelope{width:min(82vw,570px,calc(150svh - 210px));max-width:570px}
.opening .envelope-scene{filter:none}
.opening.letter-readable .invitation-letter{padding:clamp(28px,4vw,34px);box-shadow:0 8px 24px #582f4214}
.hero{background-size:cover}
@media(min-width:1100px){.hero{background-size:115% auto;background-position:center 50%}}

.opening .invitation-letter::after{content:"";position:absolute;top:9px;left:calc(50% - 42px);width:84px;height:30px;clip-path:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M22%2029Q35%2028%2034%2018Q25%2017%2022%2029M18%2029Q5%2029%205%2021Q14%2018%2018%2029%22%20fill%3D%22%239ba789%22%2F%3E%3Cg%20stroke%3D%22%23d68da5%22%20stroke-width%3D%22.6%22%3E%3Ccircle%20cx%3D%2227.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2225.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2213.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2211.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%224.3%22%20fill%3D%22%23e4ba70%22%2F%3E%3Cg%20fill%3D%22%23b48b47%22%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2217%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2220%22%20r%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M22%2029Q35%2028%2034%2018Q25%2017%2022%2029M18%2029Q5%2029%205%2021Q14%2018%2018%2029%22%20fill%3D%22%239ba789%22%2F%3E%3Cg%20stroke%3D%22%23d68da5%22%20stroke-width%3D%22.6%22%3E%3Ccircle%20cx%3D%2227.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2225.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2213.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2211.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%224.3%22%20fill%3D%22%23e4ba70%22%2F%3E%3Cg%20fill%3D%22%23b48b47%22%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2217%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2220%22%20r%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M22%2029Q35%2028%2034%2018Q25%2017%2022%2029M18%2029Q5%2029%205%2021Q14%2018%2018%2029%22%20fill%3D%22%239ba789%22%2F%3E%3Cg%20stroke%3D%22%23d68da5%22%20stroke-width%3D%22.6%22%3E%3Ccircle%20cx%3D%2227.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2225.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2222.95%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2213.00%22%20cy%3D%2218.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2215.05%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3Ccircle%20cx%3D%2220.00%22%20cy%3D%2211.00%22%20r%3D%226%22%20fill%3D%22%23f6c2d2%22%2F%3E%3Ccircle%20cx%3D%2224.95%22%20cy%3D%2213.05%22%20r%3D%226%22%20fill%3D%22%23edacc3%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%224.3%22%20fill%3D%22%23e4ba70%22%2F%3E%3Cg%20fill%3D%22%23b48b47%22%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2217%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2220%22%20r%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:32px 32px,25px 25px,25px 25px;background-position:center,left center,right center;background-repeat:no-repeat;pointer-events:none}

.hero h1{font-weight:400;-webkit-text-stroke:0}

/* Clean white stationery, with one lantern and a continuous dissolve. */
.opening .invitation-letter,.opening.letter-readable .invitation-letter{background:#fff;border:1px solid #eadfe2;padding:28px 34px 24px 76px;gap:12px;justify-content:center}
.opening .invitation-letter::before{display:none}
.opening .invitation-letter::after{content:"";position:absolute;top:12px;left:12px;width:52px;height:82px;clip-path:none;background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%20110%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gold%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e5b167%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff0b5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d49855%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M35%200V20%22%20stroke%3D%22%23c09963%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M14%2027Q35%2017%2056%2027L52%2088Q35%2098%2018%2088Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23c79250%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M14%2027Q35%2037%2056%2027M18%2088Q35%2080%2052%2088M24%2030L26%2087M46%2030L44%2087%22%20fill%3D%22none%22%20stroke%3D%22%23c79250%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%2258%22%20r%3D%228%22%20fill%3D%22%23d59b4c%22%2F%3E%3Cg%20stroke%3D%22%23d59b4c%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M35%2044V40M35%2072V76M21%2058H17M49%2058H53M25%2048L22%2045M45%2048L48%2045M25%2068L22%2071M45%2068L48%2071%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M35%2092V101%22%20stroke%3D%22%23c09963%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.opening .invitation-letter strong{font:400 32px/1.12 Georgia,serif;max-width:100%;margin:0}
.opening .invitation-letter em{font:italic 25px/1.2 Georgia,serif;max-width:100%;margin:0}
.opening .invitation-letter .letter-message{font:400 17px/1.5 Georgia,serif;letter-spacing:0;max-width:100%;margin:8px 0}
.opening .letter-signature{border:0;margin:0;padding:0;gap:3px}
.opening .letter-signature .signoff{font:italic 17px/1.2 Georgia,serif;letter-spacing:0}
.opening .letter-signature .signed-name{font:400 52px/1 "Allura",cursive;letter-spacing:0;-webkit-text-stroke:0}
.opening,.invitation-closed #site{transition:opacity 2.4s cubic-bezier(.4,0,.2,1);transform:none}
.invitation-revealing #site{visibility:visible;opacity:1;transform:none}
.opening.letter-finished{opacity:0}
@media(max-width:600px){
.opening .invitation-letter,.opening.letter-readable .invitation-letter{padding:18px 16px 16px 46px;gap:6px}
.opening .invitation-letter::after{top:8px;left:5px;width:34px;height:58px}
.opening .invitation-letter strong{font-size:clamp(17px,4.4vw,25px)}
.opening .invitation-letter em{font-size:clamp(14px,3.5vw,20px)}
.opening .invitation-letter .letter-message{font-size:clamp(11px,2.6vw,15px);line-height:1.4;margin:4px 0}
.opening .letter-signature .signoff{font-size:12px}
.opening .letter-signature .signed-name{font-size:34px}
}
@media(prefers-reduced-motion:reduce){.opening,.invitation-closed #site{transition:none!important}}

@font-face{font-family:LetterSerif;src:url("letter-serif.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:LetterSerif;src:url("letter-serif-italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:block}
html{scrollbar-gutter:stable}
#site,.invitation-closed #site,.invitation-revealing #site{transform:none;transition:none}
.invitation-revealing #site{visibility:visible;opacity:1}
.opening.letter-finished{transition:none;opacity:0;will-change:opacity}
.hero h1{font-size:inherit;line-height:1;margin:12px 0 0}
.hero .gianna-handwriting{display:block;width:min(100%,440px);height:auto;margin:0 auto}
.opening .invitation-letter strong{font-family:LetterSerif,Georgia,serif;font-size:34px;line-height:1.05}
.opening .invitation-letter em{font-family:LetterSerif,Georgia,serif;font-size:28px}
.opening .invitation-letter .letter-message{font-family:LetterSerif,Georgia,serif;font-size:20px;line-height:1.3;margin:8px 0}
.opening .letter-signature .signoff{font-family:LetterSerif,Georgia,serif;font-size:21px}
.opening .letter-signature .signed-name{display:block;font-size:0;line-height:0}
.envelope-scene .letter-signature .gianna-handwriting{position:static;inset:auto;display:block;width:178px;height:auto;object-fit:contain;transform:none}
.opening .invitation-letter,.opening.letter-readable .invitation-letter{padding:24px 32px 20px 68px;gap:8px}
@media(max-width:600px){
.opening .invitation-letter,.opening.letter-readable .invitation-letter{padding:14px 14px 12px 42px;gap:4px}
.opening .invitation-letter strong{font-size:clamp(18px,5vw,28px)}
.opening .invitation-letter em{font-size:clamp(16px,4.3vw,24px)}
.opening .invitation-letter .letter-message{font-size:clamp(13px,3.4vw,18px);line-height:1.2;margin:4px 0}
.opening .letter-signature .signoff{font-size:15px}
.envelope-scene .letter-signature .gianna-handwriting{width:104px}
}

/* Invitation wording and essential details, without action buttons. */
.hero .eyebrow{margin-bottom:4px}
.hero .celebrate-line{font:italic 24px/1.25 LetterSerif,Georgia,serif;margin:0 0 6px}
.hero .invitation-details{margin-top:22px;font-size:16px;line-height:1.5}
.hero .invitation-details p{margin:0 0 6px}
.hero .invitation-details .attire-label{font-size:12px;letter-spacing:.18em;margin:18px 0 4px;color:var(--muted)}
.hero .text-link{margin-top:20px}
@media(max-width:600px){.hero .invitation-details{font-size:15px}.hero .celebrate-line{font-size:22px}.hero .gianna-handwriting{width:min(100%,360px)}}

/* Comfortable touch targets for the page tabs. */
nav{gap:8px;align-items:center}
nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;touch-action:manipulation;position:relative;z-index:1}
@media(max-width:760px){header{gap:12px;padding:18px 12px 10px}nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:4px}nav a{font-size:14px;line-height:1.25;text-align:center;min-height:48px;padding:10px 4px}}

/* Blush ribbon bookmarks with generous, unbroken touch targets. */
nav{gap:12px;padding:4px 0 12px;align-items:stretch}
nav a{--ribbon:#f5e1e9;min-height:52px;padding:12px 18px;border:1px solid #d5b888;border-bottom:0;border-radius:9px 9px 2px 2px;background:linear-gradient(110deg,#fff6f9,var(--ribbon));color:#61354b;font-weight:500;box-shadow:0 3px 8px #713f5210;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
nav a::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-8px;height:9px;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 38%,0 100%);pointer-events:none}
nav a[aria-current]{--ribbon:#eac3d3;border:1px solid #b99355;border-bottom:0;background:linear-gradient(110deg,#fae8ef,#eac3d3);color:#4e273b;font-weight:700;transform:translateY(-3px);box-shadow:0 4px 15px #c284a03b}
nav a:focus-visible{outline:2px solid #92526e;outline-offset:5px}
@media(hover:hover){nav a:hover{transform:translateY(-3px);box-shadow:0 5px 14px #c284a02b}}
nav a:active{transform:translateY(0)}
@media(max-width:760px){nav{gap:8px;padding:4px 0 12px}nav a{padding:10px 4px;min-height:54px;font-size:14px}header{gap:14px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){nav a{transition:none}}

/* Give each tap feedback without hiding the current page during a request. */
nav a[aria-busy="true"]{background:#eac3d3;box-shadow:0 0 0 2px #b9935560;transform:translateY(-3px)}

@media(max-width:760px){nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.invitation-details .text-link{display:inline-block;margin:8px 0 12px;min-height:44px;padding:10px 12px}
.eighteen-rsvp h2{margin-bottom:20px}

/* Immediate content with a brief, gentle fade on internal tab changes. */
main{animation:tab-content-enter .22s ease-out both}
@keyframes tab-content-enter{from{opacity:.8}to{opacity:1}}
@media(prefers-reduced-motion:reduce){main{animation:none}}

.evening-intro h1 em{color:#b76e91}

/* Preserve the artwork while softening its contrast behind the invitation. */
.hero{background-image:linear-gradient(rgba(255,250,252,.48),rgba(255,250,252,.48)),url("lantern-garden-watercolor-fast.webp");background-size:cover;background-position:center center;background-repeat:no-repeat}
@media(min-width:1100px){.hero{background-size:115% auto;background-position:center top}}

/* A light floral-and-lantern wash ties the inner tabs to the invitation. */
main.details-page{background-image:linear-gradient(to bottom,rgba(248,234,236,.72) 0,rgba(248,234,236,.9) 150px,#f8eaec 280px),url("lantern-garden-watercolor-fast.webp");background-size:100% 100%,100% auto;background-position:center top;background-repeat:no-repeat}

/* Original slow opening, isolated from the fast navigation transitions. */
.opening .envelope-flap{transition:transform 2.8s cubic-bezier(.45,0,.2,1),z-index 0s 1.4s}
.opening .invitation-letter{transition:transform 3.2s cubic-bezier(.45,0,.2,1) 1.6s}
.opening.letter-readable .invitation-letter{transition:none;transform:none;animation:none}
#site main.opening-content{animation:none}
.opening.letter-finished{opacity:1;transition:none;pointer-events:none}
@media(prefers-reduced-motion:reduce){.opening .envelope-flap,.opening .invitation-letter{transition:none!important}}