/* Retained Olive composition, scoped to the opened invitation. */

/* celebration.css */
@font-face{font-family:'Ballet';src:url('fonts/ballet/Ballet-opsz.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
#invitation .wedding{min-height:100svh;isolation:isolate}
#invitation .opening-fireworks{position:fixed;inset:0;z-index:20;width:100%;height:100%;pointer-events:none}
#invitation .welcome{opacity:1;transition:opacity .32s ease,transform .5s ease}
#invitation .welcome.is-leaving{opacity:0;transform:scale(.98);pointer-events:none}
#invitation .welcome.is-returning{animation:welcome-return .45s ease both}
#invitation{position:relative;min-height:100svh;padding:28px 20px 38px;text-align:center;opacity:0;transition:opacity .24s ease}
#invitation.is-visible{opacity:1}
#invitation .celebration-heading{display:flex;justify-content:space-between;align-items:center;width:min(850px,100%);margin:0 auto;color:#f4e8d5b8;font-size:13px;letter-spacing:.16em}
#invitation .celebration-heading span:first-child{font:400 30px/1 'Pinyon Script',cursive;letter-spacing:0}
#invitation .wedding-scene{position:relative;isolation:isolate;container-type:inline-size;width:min(870px,100%);aspect-ratio:1000/1060;margin:0 auto}
#invitation .wedding-scene img{display:block;user-select:none}
#invitation .scene-envelope{position:absolute;left:2%;top:15%;width:63%;aspect-ratio:1105/1424;transform:rotate(-5deg);filter:drop-shadow(0 12px 15px #18010850)}
#invitation .oval-invitation{position:absolute;z-index:3;left:51%;top:23%;width:49%;margin:0;container-type:inline-size;filter:drop-shadow(0 12px 14px #19010750);--delay:0s}
#invitation .oval-invitation>img{width:100%;height:auto}
#invitation .oval-copy{position:absolute;inset:27% 19% 22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#641e31;text-shadow:0 1px 0 #ffffff45}
#invitation .oval-copy p{margin:0}
#invitation .oval-intro{font-size:2.9cqw;line-height:1.25;font-variant-caps:small-caps;letter-spacing:.055em;white-space:nowrap}
#invitation .oval-copy h1{display:flex;flex-direction:column;flex-shrink:0;margin:3.1cqw 0 1.8cqw;font:400 12.5cqw/.9 'Pinyon Script',cursive;outline:none}
#invitation .oval-ampersand{font-size:6.2cqw;line-height:1.05}
#invitation .oval-request{font-size:3.2cqw;line-height:1.25;font-variant-caps:small-caps;letter-spacing:.05em}
#invitation .oval-date{margin-top:4.1cqw!important;font-size:4.4cqw;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;font-variant-numeric:lining-nums;white-space:nowrap}
#invitation .oval-place{margin-top:1.2cqw!important;font-size:3.65cqw;line-height:1.2;font-variant-caps:small-caps;letter-spacing:.035em;white-space:nowrap}
#invitation .scene-locket{position:absolute;z-index:4;left:3%;top:57%;width:43%;transform:rotate(-7deg);filter:drop-shadow(0 8px 8px #19010755)}
#invitation.is-visible .oval-invitation{animation:paper-arrive 1s cubic-bezier(.2,.75,.2,1) var(--delay) both}
#invitation.is-visible .emerging-piece{animation:emerge-from-envelope 1.7s cubic-bezier(.18,.7,.23,1) var(--delay) both}
#invitation.is-visible .scene-envelope{animation:envelope-arrive .6s ease both}
#invitation.is-visible .scene-locket{animation:locket-arrive .9s ease .25s both}
#invitation .date-vignette{position:relative;isolation:isolate;width:min(650px,100%);aspect-ratio:1.06;margin:8px auto 25px}
#invitation .lace-heart{position:absolute;left:9%;top:-11%;width:58%;aspect-ratio:1;container-type:inline-size;transform:rotate(-6deg);filter:drop-shadow(0 8px 9px #17020845)}
#invitation .lace-heart>img{display:block;width:100%;height:auto;user-select:none}
#invitation .heart-date{position:absolute;inset:33% 24% 29%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f8efdf;text-shadow:0 1px 5px #24071080;font-variant-numeric:lining-nums;transform:rotate(6deg)}
#invitation .heart-day{font-size:18cqw;line-height:.9}
#invitation .heart-month{margin-top:1.2cqw;font:400 13cqw/1.05 'Pinyon Script',cursive}
#invitation .heart-year{margin-top:1.6cqw;font-size:5cqw;line-height:1.2;letter-spacing:.16em;text-indent:.16em}
#invitation .wedding-rings{position:absolute;z-index:1;right:0;top:15%;width:28%;height:auto;pointer-events:none;user-select:none}
#invitation .details-card{position:absolute;z-index:1;left:3%;top:57%;width:73%;margin:0;filter:drop-shadow(0 8px 9px #17020845);transition:transform .2s ease,filter .2s ease;scroll-margin-top:80px}
#invitation .details-card:hover{transform:translateY(-3px);filter:drop-shadow(0 11px 11px #17020860)}
#invitation .details-card:focus-visible{outline:2px solid var(--ivory);outline-offset:6px}
#invitation .details-card img{display:block;width:100%;height:auto;user-select:none}
#invitation .date-bouquet{position:absolute;z-index:2;right:1%;bottom:0;width:35%;height:auto;transform:rotate(10deg);filter:drop-shadow(0 10px 10px #17020850);pointer-events:none;user-select:none}
#invitation .section-divider{display:flex;align-items:center;gap:12px;width:min(360px,76%);height:24px;margin:20px auto 26px;color:#f4e8d5b3;pointer-events:none}
#invitation .section-divider::before,#invitation .section-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
#invitation .section-divider::after{background:linear-gradient(90deg,currentColor,transparent)}
#invitation .section-divider svg{display:block;flex:0 0 72px}
#invitation .wedding-countdown{width:min(500px,100%);margin:0 auto 24px;padding:12px 12px 20px;color:#f4e8d5}
#invitation .countdown-kicker{margin:0;font-size:10px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:#e3cfb9}
#invitation .wedding-countdown h2{margin:13px 0 22px;font:400 45px/1.15 'Pinyon Script',cursive}
#invitation .countdown-units{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);align-items:start}
#invitation .countdown-unit{display:flex;flex-direction:column;min-width:0}
#invitation .countdown-number{font-size:46px;line-height:1.05;font-variant-numeric:lining-nums tabular-nums}
#invitation .countdown-label{margin-top:9px;font-size:10px;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:#e3cfb9}
#invitation .countdown-dot{font-size:30px;line-height:1.6;color:#cfae98}
#invitation .countdown-date{margin:24px 0 0;font-size:15px;line-height:1.5;letter-spacing:.03em;color:#e3cfb9}
#invitation .countdown-finish{margin:18px 0 0;font-size:20px;font-style:italic}
#invitation .rsvp-vignette{display:block;width:min(440px,92%);margin:0 auto 24px;filter:drop-shadow(0 12px 14px #17020850);transition:transform .2s ease,filter .2s ease;scroll-margin-top:60px}
#invitation .rsvp-vignette:hover{transform:translateY(-3px);filter:drop-shadow(0 15px 16px #17020865)}
#invitation .rsvp-vignette:focus-visible{outline:2px solid var(--ivory);outline-offset:5px}
#invitation .rsvp-vignette img{display:block;width:100%;height:auto;user-select:none}
#invitation .our-story{display:block;position:relative;isolation:isolate;container-type:inline-size;width:min(500px,96%);aspect-ratio:1;margin:0 auto 24px;scroll-margin-top:60px;text-decoration:none;transition:transform .2s ease}
#invitation .our-story:hover{transform:translateY(-3px)}
#invitation .our-story:focus-visible{outline:2px solid var(--ivory);outline-offset:5px}
#invitation .story-photo-window{position:absolute;inset:18%;border-radius:16%;overflow:hidden;background:#2b1019}
#invitation .story-photo-window>img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--story-photo-position,50% 50%);transform:scale(var(--story-photo-zoom,1));user-select:none}
#invitation .story-photo-window::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 43%,#17070d45 54%,#17070db8 72%,#17070de6);pointer-events:none}
#invitation .story-lace-frame{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 8px 10px #17020845);pointer-events:none;user-select:none}
#invitation .story-copy{position:absolute;z-index:2;top:66%;left:23%;width:54%;height:12%;display:flex;align-items:center;justify-content:center;color:#fff5e4;text-shadow:0 2px 7px #17070dc9;pointer-events:none}
#invitation .story-copy h2{margin:0;font:400 10cqw/1.1 'Pinyon Script',cursive;white-space:nowrap}
#invitation .wedding-footer{container-type:inline-size;width:min(680px,100%);margin:0 auto;padding:24px 24px 32px;text-align:center;color:var(--ivory)}
#invitation .footer-monogram{position:relative;width:3.05em;height:1.55em;margin:0 auto 30px;font:400 min(31cqw,200px)/1 'Ballet',cursive;font-optical-sizing:none;font-variation-settings:'opsz' 72;font-synthesis:none;isolation:isolate}
#invitation .footer-initial{position:absolute;display:block;white-space:nowrap}
#invitation .footer-initial-first{z-index:1;left:.42em;top:.31em}
#invitation .footer-initial-second{left:1.085em;top:.36em}
#invitation .footer-contact{margin:0 0 30px;font-size:clamp(17px,4.2cqw,26px);font-style:italic;line-height:1.5}
#invitation .footer-contact p{margin:0}
#invitation .footer-contact a{display:inline-block;max-width:100%;padding:2px 0;color:inherit;text-decoration:none;overflow-wrap:anywhere;text-underline-offset:.2em}
#invitation .footer-contact a:hover{text-decoration:underline;text-decoration-thickness:1px}
#invitation .footer-contact a:focus-visible{outline:1px solid currentColor;outline-offset:5px;border-radius:2px}
#invitation .footer-with-love{margin:0;font-size:clamp(20px,4.4cqw,29px);line-height:1.4;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase}
#invitation .footer-names{margin:12px 0 26px;padding:.12em .2em .2em;font:400 clamp(34px,13cqw,84px)/1.5 'Ballet',cursive;font-optical-sizing:none;font-variation-settings:'opsz' 72;font-synthesis:none;white-space:nowrap}
#invitation .back-to-envelope{border:1px solid #f0e0cc75;border-radius:99px;padding:11px 21px;background:#360a151a;color:#f7eddf;font-size:16px;line-height:1.2;letter-spacing:.025em;min-height:44px;transition:background .2s ease}
#invitation .back-to-envelope:hover{background:#f0e0cc12}
#invitation .back-to-envelope span{margin-left:8px}
#invitation .back-to-envelope:focus-visible{outline:2px solid #f8efdf;outline-offset:5px}
@keyframes paper-arrive{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@keyframes emerge-from-envelope{0%{opacity:0;translate:var(--rise-x,0px) 72cqw}18%{opacity:1}100%{opacity:1;translate:0 0}}
@keyframes envelope-arrive{from{opacity:0;scale:.98}to{opacity:1;scale:1}}
@keyframes locket-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes welcome-return{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:scale(1)}}
@media(min-width:1000px){#invitation{padding-top:24px}
#invitation .wedding-scene{width:min(870px,calc((100svh - 100px)*1000/1060))}}
@media(max-width:600px){#invitation{padding:24px 12px 32px}
#invitation .celebration-heading{padding:0 9px;font-size:10px}
#invitation .celebration-heading span:first-child{font-size:26px}
#invitation .wedding-scene{margin-top:12px;aspect-ratio:1000/1760}
#invitation .scene-envelope{left:5%;top:20cqw;width:86%}
#invitation .oval-invitation{left:37%;top:85cqw;width:63%}
#invitation .scene-locket{left:-1%;top:100cqw;width:48%}
#invitation .wedding-footer{padding:18px 12px 24px}
#invitation .footer-monogram{margin-bottom:24px}
#invitation .footer-contact{margin-bottom:25px}
#invitation .footer-names{margin-top:10px;margin-bottom:22px}
#invitation .back-to-envelope{font-size:15px}}
@media(prefers-reduced-motion:reduce){#invitation .opening-fireworks{display:none}
#invitation .welcome,#invitation .celebration,#invitation .our-story{transition:none}
#invitation .our-story:hover{transform:none}
#invitation.is-visible .oval-invitation,#invitation.is-visible .emerging-piece,#invitation.is-visible .scene-envelope,#invitation.is-visible .scene-locket,#invitation .welcome.is-returning{animation:none}}
@media(max-width:600px){#invitation .section-divider{gap:9px;margin:16px auto 20px}
#invitation .wedding-countdown{margin:0 auto 20px;padding:8px 6px 18px}
#invitation .countdown-kicker{font-size:9px;letter-spacing:.1em}
#invitation .wedding-countdown h2{font-size:39px;margin:12px 0 20px}
#invitation .countdown-units{grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr)}
#invitation .countdown-number{font-size:38px}
#invitation .countdown-label{font-size:9px;letter-spacing:.08em}
#invitation .countdown-dot{font-size:26px}
#invitation .countdown-date{font-size:14px;margin-top:21px}}
@media(max-width:600px){#invitation .date-vignette{aspect-ratio:.9;margin:8px auto 24px}
#invitation .lace-heart{left:8.5%;top:-11%;width:69%}
#invitation .wedding-rings{right:-1%;top:25%;width:27%}
#invitation .details-card{left:0;width:78%}
#invitation .date-bouquet{right:1%;bottom:0;width:36%}}

/* envelope-scene.css */
#invitation .envelope-liner,#invitation .envelope-pocket{position:absolute;top:0;left:0;display:block;width:100%;height:auto;pointer-events:none}
#invitation .envelope-liner{z-index:0}
#invitation .envelope-pocket{z-index:2}
#invitation .envelope-contents{
  position:absolute;inset:0;z-index:1;
  
  clip-path:polygon(-50% -100%,150% -100%,150% 42%,98.5% 42%,98.5% 92.3%,1.5% 92.3%,1.5% 42%,-50% 42%);
}
#invitation .polaroid{position:absolute;z-index:2;width:43%;aspect-ratio:.85;margin:0;background:#fffaf0;padding:1.25cqw 1.25cqw 4.5cqw;box-shadow:0 .6cqw 1.1cqw #16010755;transform:rotate(var(--rotation));transform-origin:50% 90%}
#invitation .envelope-contents .polaroid img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:grayscale(1)}
#invitation .polaroid-one{left:40%;top:-11%;--rotation:-3deg;--delay:.18s}
#invitation .polaroid-two{left:38%;top:20%;--rotation:8deg;--delay:.38s}
#invitation .envelope-contents .polaroid-two img{object-position:50% 44%}
#invitation .envelope-contents>.scene-swan{position:absolute;z-index:1;left:-11%;top:15%;width:47%;height:auto;transform:rotate(-3deg);filter:drop-shadow(0 .5cqw .55cqw #25110b35);--delay:.55s;--rise-x:12cqw}
@media(max-width:600px){#invitation .polaroid{padding:1.8cqw 1.8cqw 6.5cqw}
#invitation .envelope-contents>.scene-swan{left:0;top:16%;width:46%}}
#invitation .polaroid-photo-window{width:100%;height:100%;overflow:hidden}

/* locket.css */
#invitation .photo-locket{aspect-ratio:1214/1295;isolation:isolate}
#invitation .photo-locket>.locket-art{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none}
#invitation .locket-photo{position:absolute;z-index:1;display:block;overflow:hidden;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--photo-angle));background:#ddd5cb}
#invitation .locket-photo-one{left:39.46%;top:76.42%;width:24.7%;height:24.2%;--photo-angle:-23.5deg}
#invitation .locket-photo-two{left:74.61%;top:65.48%;width:27%;height:23.9%;--photo-angle:26.4deg}
#invitation .photo-locket .locket-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-position,50% 42%);filter:grayscale(1);transform:rotate(calc(-1 * var(--photo-angle))) scale(var(--photo-zoom,1.08));pointer-events:none;user-select:none}
#invitation .locket-photo::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 5px #291c164a;pointer-events:none}

/* guest-ui.css */
#invitation .guest-toolbar{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;width:min(800px,calc(100% - 24px));margin:0 auto 22px;color:#f8efdf}
#invitation .guest-nav{display:grid;grid-template-columns:repeat(var(--guest-pages,4),minmax(0,1fr));flex:1;max-width:530px;border-block:1px solid #ead7bc38}
#invitation .guest-nav a{display:flex;justify-content:center;align-items:center;min-height:44px;padding:9px 8px;color:inherit;font:400 16px/1.3 'EB Garamond',Georgia,serif;text-decoration:none;white-space:nowrap;transition:background .18s ease}
#invitation .guest-nav a:hover,#invitation .guest-nav a[aria-current="page"]{background:#f8efdf10}
#invitation .guest-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.32em;text-decoration-thickness:1px;text-decoration-color:#e3c7a8}
#invitation .guest-toolbar a:focus-visible,#invitation .music-toggle:focus-visible{outline:2px solid #f8efdf;outline-offset:4px}
#invitation .music-toggle{position:relative;display:block;flex:0 0 118px;width:118px;height:118px;padding:0;border:0;border-radius:50%;background:transparent;color:#f8efdf;cursor:pointer;isolation:isolate;transition:transform .22s ease;filter:drop-shadow(0 5px 7px #12020770)}
#invitation .music-toggle:hover{transform:translateY(-2px) scale(1.025)}
#invitation .music-toggle:active{transform:scale(.98)}
#invitation .music-toggle:disabled{opacity:.7;cursor:wait}
#invitation .music-record{position:absolute;inset:0;display:block;border-radius:50%;background:url('assets/vinyl-record-dusty-blue-v1.svg') center/100% 100% no-repeat;animation:vinyl-turn 18s linear infinite}
#invitation .music-record-face{position:relative;display:block;width:100%;height:100%;overflow:visible;fill:currentColor;pointer-events:none}
#invitation .music-caption{fill:#2b0715;font:400 17px/1 'EB Garamond',Georgia,serif;letter-spacing:1px;text-transform:uppercase}
#invitation .music-pause{display:none}
#invitation .music-toggle[aria-pressed="true"] .music-note{display:none}
#invitation .music-toggle[aria-pressed="true"] .music-pause{display:block}
@keyframes vinyl-turn{to{transform:rotate(360deg)}}
#invitation .guest-music-status{position:absolute;top:100%;left:0;width:100%;padding-top:3px;text-align:center;color:#f8efdf;font:400 12px/1.2 'EB Garamond',Georgia,serif}
#invitation .guest-music-status:empty{display:none}
#invitation .guest-toolbar [hidden]{display:none!important}
#invitation .guest-toolbar{margin-top:13px;margin-bottom:14px}
@media(max-width:560px){#invitation .guest-toolbar{flex-wrap:wrap;gap:12px;margin-bottom:19px}
#invitation .guest-nav{flex-basis:100%;max-width:none}
#invitation .guest-nav a{font-size:14px;padding-inline:3px}
#invitation .music-toggle{flex-basis:104px;width:104px;height:104px}
#invitation .guest-music-status{font-size:11px}
#invitation .guest-toolbar{width:100%;margin-top:10px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#invitation .guest-nav a,#invitation .music-toggle{transition:none}
#invitation .music-record{animation:none}
#invitation .music-toggle:hover,#invitation .music-toggle:active{transform:none}}

/* interactions.css */
#invitation{--control-ease:cubic-bezier(.2,.8,.2,1);--control-shadow:0 8px 20px #203c5626,0 2px 5px #203c5610}
#invitation .button,#invitation .text-action,#invitation .open-invitation,#invitation .back-to-envelope{border-radius:999px;touch-action:manipulation;transition:transform .22s var(--control-ease),box-shadow .22s var(--control-ease),background-color .2s ease,border-color .2s ease,color .2s ease}
#invitation .button:focus-visible,#invitation .text-action:focus-visible,#invitation .open-invitation:focus-visible,#invitation .back-to-envelope:focus-visible{border-radius:999px;outline-offset:4px}
#invitation .button .icon,#invitation .registry-link::after,#invitation .action-arrow,#invitation .return-link .icon{transition:transform .22s var(--control-ease)}
#invitation .open-invitation{padding:11px 22px;border:1px solid #f0e0cc4d;background:#f0e0cc0a;--control-shadow:0 8px 20px #17020845}
#invitation .back-to-envelope{--control-shadow:0 8px 20px #17020845}
#invitation .story-rsvp{--control-shadow:0 9px 22px #17020860}
#invitation .text-action{padding-inline:10px}
#invitation .button:disabled,#invitation .button[aria-disabled="true"]{transform:none;cursor:default;box-shadow:none}
#invitation .music-toggle{touch-action:manipulation}
#invitation .music-toggle:focus-visible,#invitation .seal:focus-visible{border-radius:50%}
#invitation .guest-nav{gap:4px;padding:4px}
#invitation .guest-nav a{border-radius:999px;transition:transform .2s var(--control-ease),background-color .2s ease,color .2s ease}
#invitation .chapter-nav{border-radius:16px}
#invitation .chapter-nav a{border-radius:11px;transition:transform .2s var(--control-ease),background-color .2s ease,color .2s ease}
#invitation .return-link,#invitation .rsvp-details-link,#invitation .story-details,#invitation .signoff-return,#invitation .hotel-phone,#invitation .hotel-website{border-radius:12px;transition:transform .2s var(--control-ease),color .2s ease,background-color .2s ease;text-decoration-thickness:1px;text-underline-offset:.24em}
#invitation .return-link:focus-visible,#invitation .rsvp-details-link:focus-visible,#invitation .story-details:focus-visible,#invitation .signoff-return:focus-visible{border-radius:12px}
#invitation .calendar-options{border-radius:16px;box-shadow:0 12px 32px #4b2a1d1f}
#invitation .calendar-options a{border-radius:10px;transition:background-color .18s ease,color .18s ease}
#invitation .calendar-menu[open]>.text-action{background:#203c560a}
#invitation .guest-faq summary{border-radius:12px;padding-inline:12px;transition:background-color .2s ease,color .2s ease}
#invitation .guest-faq details>p{padding-left:12px}
#invitation .reply-form input:not([type=radio]),#invitation .reply-form select,#invitation .reply-form textarea{border-radius:12px;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
#invitation .reply-form input:focus-visible,#invitation .reply-form select:focus-visible,#invitation .reply-form textarea:focus-visible{border-radius:12px;box-shadow:0 0 0 4px #203c560c}
#invitation .attendance-option{border-radius:16px;touch-action:manipulation;transition:transform .2s var(--control-ease),box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
#invitation .attendance-option:has(input:checked){box-shadow:0 3px 12px #203c560c}
#invitation .attendance-option input:checked~.choice-dot{transform:scale(1.06)}
#invitation .choice-dot{transition:transform .2s var(--control-ease),background-color .2s ease,border-color .2s ease}
#invitation .guest-card,#invitation .reply-summary{border-radius:16px}
#invitation .reply-preview,#invitation .reply-error{border-radius:12px}
#invitation .details-card,#invitation .rsvp-vignette,#invitation .our-story{border-radius:18px;touch-action:manipulation;transition:transform .26s var(--control-ease),filter .26s var(--control-ease)}
@media(hover:hover) and (pointer:fine){#invitation .button:not(:disabled):not([aria-disabled="true"]):hover,#invitation .open-invitation:hover,#invitation .back-to-envelope:hover{transform:translateY(-2px);box-shadow:var(--control-shadow)}
#invitation .open-invitation:hover{opacity:1;background:#f0e0cc14;border-color:#f0e0cc85}
#invitation .button:not(:disabled):not([aria-disabled="true"]):hover>.icon:last-child,#invitation .registry-link:not([aria-disabled="true"]):hover::after,#invitation .open-invitation:hover .action-arrow{transform:translate(2px,-2px)}
#invitation .text-action:not(:disabled):hover{background:#203c5609;transform:translateY(-1px)}
#invitation .guest-nav a:hover,#invitation .chapter-nav a:hover{transform:translateY(-1px)}
#invitation .return-link:hover .icon{transform:translateX(-2px)}
#invitation .guest-faq summary:hover{background:#203c5607}
#invitation .attendance-option:not(:has(input:disabled)):hover{transform:translateY(-2px);border-color:#203c5680;box-shadow:0 6px 16px #203c5610}}
#invitation .button:not(:disabled):not([aria-disabled="true"]):active,#invitation .open-invitation:active,#invitation .back-to-envelope:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px #203c561a}
#invitation .text-action:not(:disabled):active,#invitation .guest-nav a:active,#invitation .chapter-nav a:active{transform:scale(.98)}
#invitation .attendance-option:not(:has(input:disabled)):active{transform:scale(.995)}
#invitation .details-card:active,#invitation .rsvp-vignette:active,#invitation .our-story:active{transform:translateY(0) scale(.99)}
#invitation .seal:active{transform:translate(-50%,-50%) scale(.98)}
@media(hover:none){#invitation .button:hover,#invitation .text-action:hover,#invitation .open-invitation:hover,#invitation .back-to-envelope:hover,#invitation .music-toggle:hover,#invitation .details-card:hover,#invitation .rsvp-vignette:hover,#invitation .our-story:hover{transform:none}
#invitation .button-wine:hover{background:var(--wine)}
#invitation .pinterest-link:hover{background:#fff9ef70}
#invitation .story-rsvp:hover{background:#f8efdf}
#invitation .open-invitation:hover{opacity:1;background:#f0e0cc0a}
#invitation .back-to-envelope:hover{background:#360a151a}
#invitation .details-card:hover{filter:drop-shadow(0 8px 9px #17020845)}
#invitation .rsvp-vignette:hover{filter:drop-shadow(0 12px 14px #17020850)}
#invitation .guest-nav a:hover:not([aria-current="page"]){background:transparent}
#invitation .chapter-nav a:hover:not([aria-current]){color:var(--muted);background:transparent}
#invitation .button:not(:disabled):not([aria-disabled="true"]):active,#invitation .open-invitation:active,#invitation .back-to-envelope:active,#invitation .music-toggle:active{transform:scale(.98)}
#invitation .text-action:not(:disabled):active,#invitation .details-card:active,#invitation .rsvp-vignette:active,#invitation .our-story:active{transform:scale(.99)}
#invitation .seal:hover{transform:translate(-50%,-50%)}
#invitation .seal:active{transform:translate(-50%,-50%) scale(.98)}}
@media(max-width:560px){#invitation .guest-nav{gap:2px;padding:4px 1px}
#invitation .guest-faq summary{padding-inline:9px}
#invitation .guest-faq details>p{padding-left:9px}}
@media(prefers-reduced-motion:reduce){#invitation html{scroll-behavior:auto}
#invitation .button,#invitation .text-action,#invitation .open-invitation,#invitation .back-to-envelope,#invitation .music-toggle,#invitation .guest-nav a,#invitation .chapter-nav a,#invitation .attendance-option,#invitation .choice-dot,#invitation .details-card,#invitation .rsvp-vignette,#invitation .our-story,#invitation .button .icon,#invitation .registry-link::after,#invitation .action-arrow,#invitation .return-link .icon{transition:none!important}
#invitation .button:hover,#invitation .button:active,#invitation .text-action:hover,#invitation .text-action:active,#invitation .open-invitation:hover,#invitation .open-invitation:active,#invitation .back-to-envelope:hover,#invitation .back-to-envelope:active,#invitation .music-toggle:hover,#invitation .music-toggle:active,#invitation .guest-nav a:hover,#invitation .guest-nav a:active,#invitation .chapter-nav a:hover,#invitation .chapter-nav a:active,#invitation .attendance-option:hover,#invitation .attendance-option:active,#invitation .choice-dot,#invitation .details-card:hover,#invitation .details-card:active,#invitation .rsvp-vignette:hover,#invitation .rsvp-vignette:active,#invitation .our-story:hover,#invitation .our-story:active,#invitation .button:hover>.icon:last-child,#invitation .registry-link:hover::after,#invitation .open-invitation:hover .action-arrow,#invitation .return-link:hover .icon{transform:none!important}
#invitation .seal:hover,#invitation .seal:active{transform:translate(-50%,-50%)!important}}

/* olive-scene.css */
@font-face{font-family:'Pinyon Script';src:url('fonts/pinyon-script.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
#invitation{--wine:var(--olive);--control-shadow:0 8px 20px #203c5626,0 2px 5px #203c5610}
#invitation .celebration-heading,#invitation .section-divider,#invitation .wedding-countdown,#invitation .wedding-footer,#invitation .guest-toolbar{color:var(--olive)}
#invitation .celebration-heading span:first-child{font-family:'Pinyon Script',cursive}
#invitation .countdown-kicker,#invitation .countdown-label,#invitation .countdown-date{color:var(--quiet)}
#invitation .countdown-dot{color:#203c56}
#invitation .guest-nav{border-color:#203c5638}
#invitation .guest-nav a:hover,#invitation .guest-nav a[aria-current="page"]{background:#203c560d;text-decoration-color:var(--olive)}
#invitation .guest-toolbar a:focus-visible,#invitation .music-toggle:focus-visible,#invitation .details-card:focus-visible,#invitation .rsvp-vignette:focus-visible,#invitation .our-story:focus-visible,#invitation .back-to-envelope:focus-visible{outline-color:var(--olive-dark)}
#invitation .music-record{filter:none}
#invitation .music-caption{fill:#203c56}
#invitation .guest-music-status{color:var(--olive)}
#invitation .scene-hanging-bouquet{position:absolute;z-index:1;left:0;top:-3%;width:26%;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 8px 8px #253f5b25);pointer-events:none}
#invitation .envelope-contents>.scene-swan{width:50%}
#invitation .scene-envelope{aspect-ratio:1105/1424;filter:drop-shadow(0 12px 15px #253f5b38)}
#invitation .envelope-contents{clip-path:polygon(-50% -100%,150% -100%,150% 42%,98.5% 42%,98.5% 92.3%,1.5% 92.3%,1.5% 42%,-50% 42%)}
#invitation .oval-invitation{filter:drop-shadow(0 12px 14px #253f5b30)}
#invitation .oval-copy{inset:25% 22% 21%;color:var(--olive-dark)}
#invitation .oval-copy h1{font-size:13.7cqw}
#invitation .oval-intro{font-size:3.1cqw}
#invitation .oval-request{font-size:3.4cqw}
#invitation .oval-date{font-size:4.7cqw}
#invitation .oval-place{font-size:3.8cqw}
#invitation .scene-locket{left:1%;width:50%}
#invitation .date-vignette{aspect-ratio:.65;margin-top:10px}
#invitation .lace-heart{top:-6%}
#invitation .heart-date{color:var(--olive-dark);text-shadow:0 1px 0 #fff7df66}
#invitation .details-card{left:0;top:40%;width:46%;container-type:inline-size;filter:drop-shadow(0 8px 9px #253f5b38)}
#invitation .details-card-copy{position:absolute;top:18%;left:18%;width:64%;height:39%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;text-align:center;color:var(--olive-dark);pointer-events:none}
#invitation .details-card-copy p{margin:0}
#invitation .details-kicker{font-size:4.2cqw;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
#invitation .details-card-copy h2{margin:0;white-space:nowrap;font:400 15cqw/1.5 'Pinyon Script',cursive}
#invitation .details-topics{font-size:5.3cqw;line-height:1.45;font-variant:small-caps}
#invitation .details-card-cta{font-size:4.9cqw;line-height:1.4;font-style:italic}
#invitation .date-bouquet{right:0;bottom:0;width:56%;transform:rotate(2deg);filter:drop-shadow(0 10px 10px #253f5b30)}
#invitation .wedding-footer .back-to-envelope{color:var(--olive);border-color:#203c5673;background:#fbf7ed8c}
#invitation .wedding-footer .back-to-envelope:hover{background:#fff9e8}
#invitation .welcome .open-invitation{background:var(--olive);border-color:var(--olive);color:var(--ivory)}
#invitation .welcome .open-invitation:hover{background:var(--olive-dark);border-color:var(--olive-dark)}
#invitation .welcome .open-invitation:focus-visible{outline-color:var(--olive-dark)}
@media(max-width:600px){#invitation .scene-hanging-bouquet{left:0;top:-2%;width:31%}
#invitation .envelope-contents>.scene-swan{width:49%}
#invitation .scene-locket{left:0;width:55%}
#invitation .date-vignette{aspect-ratio:.65}
#invitation .lace-heart{top:-6%}
#invitation .details-card{left:0;top:39%;width:51%}
#invitation .date-bouquet{right:0;bottom:8%;width:56%}}

/* readability.css */
#invitation{--reading-paper:#fbf7eef5;--reading-ink:#203c56;--reading-line:#7895ac30;--reading-shadow:0 8px 28px #203c5612,0 1px 3px #203c5608}
#invitation .guest-nav,#invitation .page-bar,#invitation .celebration-heading,#invitation .wedding-countdown,#invitation .wedding-footer,#invitation .story-intro,#invitation .story-lead,#invitation .story-chapters,#invitation .story-signoff,#invitation .page-end,#invitation .welcome-kicker,#invitation .welcome-footnote,#invitation .seal-hint,#invitation .story-portrait figcaption{background:var(--reading-paper);color:var(--reading-ink);border:1px solid var(--reading-line);box-shadow:var(--reading-shadow)}
#invitation .guest-nav{border-radius:999px;padding:5px;gap:3px;min-width:0}
#invitation .guest-nav a{color:var(--reading-ink);font-size:17px;min-height:46px;padding:10px 12px}
#invitation .guest-nav a[aria-current="page"]{background:#203c5614;text-decoration-color:var(--reading-ink)}
#invitation .guest-nav a:hover{background:#203c560d}
#invitation .page-bar{padding:6px 20px;border-radius:22px;min-height:76px;margin-top:18px;margin-bottom:18px}
#invitation .page-bar a:focus-visible,#invitation .story-page a:focus-visible{outline-color:var(--reading-ink)}
#invitation .celebration-heading{padding:10px 20px;border-radius:999px;color:var(--reading-ink);font-size:13px}
#invitation .guest-toolbar{margin-top:18px}
#invitation .wedding-countdown{position:relative;isolation:isolate;border-radius:28px;padding:26px 25px 28px;margin-top:8px;margin-bottom:32px}
#invitation .wedding-countdown::before,#invitation .wedding-footer::before,#invitation .story-chapters::before,#invitation .story-signoff::before{content:'';position:absolute;inset:9px;z-index:-1;border:1px solid #7895ac22;border-radius:inherit;pointer-events:none}
#invitation .countdown-kicker,#invitation .countdown-label,#invitation .countdown-date,#invitation .countdown-dot{color:#203c56}
#invitation .heart-date{isolation:isolate;text-shadow:none}
#invitation .heart-date::before{content:none}
#invitation .wedding-footer{position:relative;isolation:isolate;border-radius:32px;padding:26px 30px 34px;margin-top:8px;margin-bottom:16px;color:var(--reading-ink)}
#invitation .footer-contact{color:var(--reading-ink)}
#invitation .welcome-kicker{display:table;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-radius:999px;padding:8px 18px;font-size:13px}
#invitation .welcome-footnote{width:fit-content;max-width:calc(100% - 40px);left:50%;right:auto;transform:translateX(-50%);border-radius:999px;padding:7px 18px;font-size:14px;text-shadow:none}
#invitation .seal-hint{display:table;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-radius:999px;padding:5px 13px;color:#203c56}
#invitation .story-intro{border-radius:28px;padding:22px 18px 26px}
#invitation .story-intro h1{margin-top:0;color:var(--reading-ink)}
#invitation .story-subtitle,#invitation .story-page .eyebrow{color:#203c56}
#invitation .story-portrait figcaption{display:table;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;border-radius:999px;padding:7px 18px;color:#203c56}
#invitation .story-lead{border-radius:24px;padding:24px 26px;color:var(--reading-ink)}
#invitation .story-chapters{position:relative;isolation:isolate;width:min(640px,100%);border-radius:30px;padding:32px 28px 5px}
#invitation .story-chapter,#invitation .story-chapter h2,#invitation .story-chapter p,#invitation .story-chapter-number{color:var(--reading-ink)}
#invitation .story-signoff{position:relative;isolation:isolate;border-radius:30px;padding:25px 24px 28px;margin-top:32px}
#invitation .story-closing,#invitation .story-signature,#invitation .story-details,#invitation .story-page .signoff-return{color:var(--reading-ink)}
#invitation .page-end{display:table;width:fit-content;max-width:calc(100% - 32px);margin:26px auto;border-radius:999px;padding:9px 20px;color:#203c56}
#invitation .guest-music-status:not(:empty){left:50%;width:fit-content;max-width:100%;transform:translateX(-50%);border-radius:999px;padding:7px 15px;background:var(--reading-paper);color:var(--reading-ink);box-shadow:var(--reading-shadow)}
@media(hover:hover) and (pointer:fine){#invitation .guest-nav a:hover{background:#203c5614}}
@media(max-width:600px){#invitation .guest-nav{padding:4px;gap:1px}
#invitation .guest-nav a{padding:10px 4px;font-size:15px;min-height:44px}
#invitation .celebration-heading{padding:9px 15px;font-size:11px}
#invitation .page-bar{padding:5px 12px;min-height:66px;border-radius:20px;margin-top:12px;margin-bottom:15px}
#invitation .wedding-countdown{padding:24px 14px 26px;border-radius:24px}
#invitation .wedding-countdown h2{font-size:37px}
#invitation .wedding-footer{padding:24px 20px 30px;border-radius:26px}
#invitation .welcome-kicker{font-size:11px;padding:8px 15px}
#invitation .welcome-footnote{font-size:12px;padding:7px 14px;max-width:calc(100% - 28px);white-space:nowrap}
#invitation .seal-hint{font-size:12px}
#invitation .story-intro{padding:18px 14px 22px;border-radius:24px}
#invitation .story-lead{padding:22px 20px;border-radius:24px}
#invitation .story-chapters{padding:26px 14px 2px;border-radius:26px}
#invitation .story-chapter{padding-inline:13px}
#invitation .story-signoff{padding:22px 15px 26px;border-radius:26px}
#invitation .story-portrait figcaption{font-size:14px;padding:7px 14px}
#invitation .page-end{font-size:13px;padding:8px 14px}}
@media(max-width:340px){#invitation .guest-nav a{font-size:13px}
#invitation .welcome-footnote{font-size:11px}
#invitation .wedding-countdown h2{font-size:32px}
#invitation .countdown-number{font-size:32px}
#invitation .footer-names{font-size:11.5cqw}}

/* Dusty Blue text palette; artwork is replaced gradually. */
#invitation{isolation:isolate;--olive:#203c56;--olive-dark:#203c56;--ivory:#fff7df;--paper:#fbf7ed;--quiet:#203c56;--wine:var(--olive);color:var(--olive)}
#invitation .invitation-silk{position:fixed;inset:0;z-index:-1;display:block;pointer-events:none;background:#dce6ef}
#invitation .invitation-silk img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* All invitation-page lettering uses the same navy as the accepted cover. */
#invitation .music-toggle{color:#203c56}
#invitation .music-caption{fill:#203c56}
#invitation .guest-nav{border-color:#203c5630}
#invitation .guest-nav a:hover{background:#203c560d}
#invitation .guest-nav a[aria-current="page"]{background:#203c5614}
#invitation .story-copy{color:#203c56;text-shadow:none;background:var(--paper);border:1px solid #203c5630;border-radius:999px}