/* Customer invitation shell. The original artwork keeps its portrait geometry. */
.signature-loading main{visibility:hidden}
/* v285 (2 Nov): the opening shows once its own parts have run (js/occasi-signature-runtime.js opening()); the chapters wait */
.signature-loading.signature-opening-ready main{visibility:visible}.signature-loading.signature-opening-ready main>:not(.signature-hero-window):not(#hero){visibility:hidden}
.signature-invitation [hidden]{display:none!important}
#signature-status{text-align:center;padding:30px;font:16px/1.6 Georgia,serif}
.signature-invitation main{max-width:none;padding:0;margin:0}
.signature-invitation .review-tools,.signature-invitation .chapter-links,.signature-invitation .personalise-panel,.signature-invitation .inspection,.signature-invitation .review-footer{display:none!important}
.signature-hero-window{position:relative;height:100svh;min-height:580px;overflow:hidden;background:#f7f3ea;display:flex;align-items:center;justify-content:center}
.signature-hero-window>.scene,.signature-hero-window>.hero{margin:0;flex:none;width:calc(100svh * 2 / 3);max-width:none;min-width:387px;aspect-ratio:2/3;height:auto;box-shadow:none}
.signature-invitation .invitation-chapters{max-width:1000px;margin:auto}
.signature-invitation .signature-wardrobe{display:grid;grid-template-columns:repeat(var(--outfits,4),minmax(0,1fr));gap:0;position:relative;width:100%;max-width:850px;margin:auto}
.signature-invitation .dress-wardrobe{aspect-ratio:auto;padding-inline:3%;box-sizing:border-box}
.signature-wardrobe>div{position:relative;z-index:1;min-width:0}
.signature-wardrobe svg{width:100%;height:auto;display:block}
/* The hook tops are at y=24 in the 1024px artwork; the rail sits inside
   their curves, behind the garments, rather than across the shoulders. */
.signature-wardrobe .ae-hanging-rail{position:absolute;left:2%;right:2%;top:4%;height:2px;border-radius:2px;background:linear-gradient(#ead8a9,#a3834f);z-index:0}
/* Saved travel notes have no numbered marker. Do not place the copy in
   the 38px marker column used by the original multi-stop route. */
.signature-invitation .travel-route{padding-left:0}
.signature-invitation .travel-route li{display:block;min-width:0;padding-bottom:0}
.signature-invitation .travel-route p{white-space:pre-line;overflow-wrap:break-word}
.signature-invitation .signature-wardrobe+img{display:none}
.signature-invitation .invitation-music{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:25}
.signature-invitation h1,.signature-invitation h2,.signature-invitation h3,.signature-invitation p{overflow-wrap:anywhere}
@media(max-width:760px) and (orientation:portrait){
 .signature-hero-window{height:100svh;min-height:0}
 .signature-hero-window>.scene,.signature-hero-window>.hero{width:max(100vw,calc(100svh * 2 / 3));min-width:0}
 .signature-hero-window .names{font-size:clamp(36px,10vw,64px);gap:8px;flex-wrap:wrap}
 .signature-hero-window .hero .wording{left:50%;right:auto;width:90vw;transform:translateX(-50%)}
 .signature-hero-window .scene .couple{max-width:88vw;margin-inline:auto}.signature-hero-window .scene .couple .name{font-size:clamp(40px,12vw,66px)}
 .signature-hero-window .where,.signature-hero-window .event-meta{max-width:86vw;margin-inline:auto}
}
@media(max-height:500px) and (orientation:landscape){.signature-hero-window{height:100svh;min-height:0}.signature-hero-window>.scene,.signature-hero-window>.hero{width:calc(100svh * 2 / 3);min-width:0}}

.signature-invitation .personalisation-study{display:none!important}
.signature-invitation .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* The opening is its own full-screen stage. Invitation details enter the
   document flow only after the film reaches its hero frame. */
html.invitation-opening-locked,.signature-invitation.signature-opening{overflow:hidden;overscroll-behavior:none}
.signature-opening main>:not(.signature-hero-window){display:none!important}
.signature-opening .signature-hero-window{position:fixed;inset:0;z-index:30;width:100%;height:100svh;min-height:0}
.signature-opening .invitation-music{display:none!important}
.signature-hero-window h1:focus{outline:none}

/* Keep the invitation's next step inside the viewport, not the cropped artwork. */
html:has(.signature-invitation){scroll-behavior:smooth}
.signature-scroll-cue{position:absolute;z-index:12;left:50%;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:8px 19px 6px;border:1px solid #ffffff73;border-radius:32px;background:#fbf8edb8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 12px #3c34260a;color:#59442e;text-align:center;text-decoration:none;font:500 10px/1.4 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent}
[data-signature=aegean] .signature-scroll-cue{color:#264d68;background:#fffaf0c2}
.signature-scroll-cue svg{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:signature-scroll-nudge 2.8s ease-in-out infinite}
.signature-scroll-cue:hover,.signature-scroll-cue:focus-visible{background:#fffaf0ed;border-color:currentColor;outline:2px solid currentColor;outline-offset:4px}
.signature-opening .signature-scroll-cue{display:none}
/* v284 (sense-check #19): on a phone the language picker (bottom left) sat across "Scroll to explore"; it now sits above it. */
@media (max-width:600px){body:not(.signature-opening):has(.signature-scroll-cue) #oc-language{bottom:calc(max(14px,calc(env(safe-area-inset-bottom) + 8px)) + 58px)}}
@keyframes signature-scroll-nudge{0%,100%{transform:translateY(-2px);opacity:.6}50%{transform:translateY(2px);opacity:1}}

/* A warm light around the real handle, with a readable instruction below it. */
.signature-invitation #enter{z-index:8}
.signature-invitation #enter::before{content:'';position:absolute;inset:5%;border-radius:50%;border:1px solid #fff0c7c9;box-shadow:0 0 14px 4px #ffdb8f55,inset 0 0 12px #ffe1a55c;pointer-events:none;animation:signature-enter-halo 3s ease-in-out infinite}
.signature-invitation #enter span{width:max-content;max-width:min(310px,84vw);min-height:44px;padding:12px 23px;border:1px solid #dfbf7da8;border-radius:28px;background:linear-gradient(120deg,#fffaf0ed,#fff0c9e8,#fffaf0ed);box-shadow:0 0 18px #ffe2a469,0 3px 12px #5b3b1914;color:#49351f;font:500 clamp(15px,2.8cqw,19px)/1.25 Georgia,serif;letter-spacing:.03em;text-align:center;text-shadow:0 1px #fff;animation:signature-enter-light 3s ease-in-out infinite}
.signature-invitation #enter:hover span,.signature-invitation #enter:focus-visible span{background:#fff7df;box-shadow:0 0 24px #ffd992ad,0 3px 12px #5b3b1926}
.signature-invitation #enter:focus-visible{outline:2px solid #76572f;outline-offset:5px}
@media(max-height:500px) and (orientation:landscape){.signature-invitation #enter span{top:calc(50% + 45.5cqw - 28px)}}
@keyframes signature-enter-halo{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
@keyframes signature-enter-light{0%,100%{box-shadow:0 0 12px #ffe2a455,0 3px 12px #5b3b1914}50%{box-shadow:0 0 25px #ffd992a6,0 3px 12px #5b3b1924}}

/* Aegean's live wording arrives line by line only after the card has opened. */
.signature-invitation[data-signature=aegean] .hero:not([data-state=hero])>.wording{visibility:hidden}
.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>:is(.family,.names,.occasion,.where){animation:signature-aegean-line .95s cubic-bezier(.22,.61,.36,1) both}
.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>.family{animation-delay:.15s}
.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>.names{animation-delay:.7s}
.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>.occasion{animation-delay:1.25s}
.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>.where{animation-delay:1.8s}
@keyframes signature-aegean-line{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html:has(.signature-invitation){scroll-behavior:auto}.signature-scroll-cue svg,.signature-invitation #enter::before,.signature-invitation #enter span,.signature-invitation[data-signature=aegean] .hero[data-state=hero]>.wording>:is(.family,.names,.occasion,.where){animation:none}}