.atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;contain:strict}
.opening .opening-note{opacity:0;pointer-events:none}
.opening .seal{transform:translate(-50%,-65%) rotate(5deg) scale(1.14);opacity:0;pointer-events:none}
.opening .masthead{opacity:.3}
.opened .masthead{opacity:1}
.opening .card{pointer-events:none}
.skip-opening{position:absolute;top:29px;left:50%;transform:translateX(-50%);font:9px/1.7 system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#b4a283;background:none;border:0;border-bottom:1px solid #917b4c66;padding:6px 0;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s}
.opening .skip-opening{opacity:1;visibility:visible;transition-delay:3s}
.ready .skip-opening{opacity:0;visibility:hidden;transition-delay:0s}
.ready .envelope{visibility:hidden;transition:none}
.ready .card{opacity:1;transform:scale(1);transition:none}
.utilities{gap:20px;flex-wrap:wrap}
.motion-button{color:#d8c6a0;font-size:12px}
.theatre.motion-off .atmosphere{opacity:0}




@media(max-width:600px){.utilities{gap:17px}.motion-button{font-size:12px}}
/* JavaScript honors reduced motion by default and permits the explicit Play motion choice. */


/* Refined controls: the invitation's serif in gold small capitals, and a thin gold progress
   line in place of the "01 / 10" counter (kept for screen readers). Tap areas are unchanged. */
.text-button,.motion-button{font-family:Invitation,Georgia,serif;font-variant:small-caps;font-size:15px;letter-spacing:.07em;color:#dcc690;font-weight:400}
.text-button:hover,.motion-button:hover{color:#f2ddb0}
.text-button{border-bottom-color:#b8975a55}
.text-button svg{width:13px;height:13px;vertical-align:-1px}
.reading-hint,.download-details{font-family:Invitation,Georgia,serif;font-style:italic;text-transform:none;letter-spacing:.03em;font-size:13px;color:#b9ab8c}
.counter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-progress{display:block;position:relative;width:min(240px,62vw);height:1px;margin:10px auto 2px;background:#8e7a4b55;overflow:hidden}
.page-progress i{position:absolute;inset:0;background:linear-gradient(90deg,#a8843f,#e6cf97);transform-origin:0 50%;transform:scaleX(.1);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.page-progress i{transition:none}}

/* Closing ritual: the seal returns only after the flaps have closed, then settles. */
.closing .seal{transition:transform .7s 1.45s var(--ease),opacity .5s 1.45s,filter .5s;pointer-events:none}

/* Diya lighting on the verse pages (diya.js). The veil softly dims the printed verse until the
   guest lights the diya; then the flame takes hold and the veil lifts. */
.diya-veil{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .9s ease;color-scheme:only light;
 background:radial-gradient(ellipse 60% 46% at 50% 50%,rgba(12,9,4,.5),rgba(8,12,22,.78) 70%,rgba(6,10,20,.86))}
.diya-veil.on{opacity:1;transition:opacity .25s ease}
.diya-prompt{position:absolute;left:50%;top:50%;z-index:6;width:min(86%,420px);transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;transition:opacity .7s ease;color-scheme:only light}
.diya-prompt.on{opacity:1;transition:opacity .35s ease}
/* Soft dark halo so the card's central artwork (e.g. the flute on page 2) recedes behind the diya. */
.diya-prompt::before{content:'';position:absolute;left:50%;top:50%;width:116%;height:175%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(6,9,18,.94),rgba(6,9,18,.82) 55%,rgba(6,9,18,0))}
.diya-prompt.on .diya-button{pointer-events:auto}
.diya-button{display:block;margin:0 auto 6px;width:clamp(64px,22%,96px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;animation:diyaInvite 2.6s ease-in-out infinite}
.diya-button:focus-visible{outline:1px solid #e1c993;outline-offset:4px}
.diya-button svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 10px #0008)}
.diya-flame{transform-origin:60px 60px;transform:scale(0);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.3,1),opacity .4s}
.diya-glow{opacity:0;transition:opacity 1s}
.diya-prompt.lit .diya-button{animation:none}
.diya-prompt.lit .diya-flame{transform:scale(1);opacity:1;animation:diyaFlicker 1.6s ease-in-out .9s infinite}
.diya-prompt.lit .diya-glow{opacity:1}
.diya-title{margin:0;font:italic 400 clamp(15px,4.3vw,20px)/1.35 Invitation,Georgia,serif;color:#f3e2b5;text-shadow:0 1px 8px #000c}
.diya-line{margin:2px 0 0;font:italic 400 clamp(13px,3.6vw,17px)/1.35 Invitation,Georgia,serif;color:#e2cf9f;text-shadow:0 1px 8px #000c}
.diya-hint{margin:10px 0 0;font:400 12px/1.4 Invitation,Georgia,serif;font-variant:small-caps;letter-spacing:.12em;color:#cdb784;text-shadow:0 1px 6px #000c}
@keyframes diyaInvite{0%,100%{filter:drop-shadow(0 0 0 #ffd27a00)}50%{filter:drop-shadow(0 0 10px #ffd27a66)}}
@keyframes diyaFlicker{0%,100%{transform:scale(1)}30%{transform:scale(1.04,.97)}60%{transform:scale(.97,1.03)}}
@media(prefers-reduced-motion:reduce){.diya-button,.diya-prompt.lit .diya-flame{animation:none}}

/* Bell pages (3 and 5): the hint line invites a tap on the bells. */
.bell-hint{color:#e3c98d}
.reading-hint.hint-in{animation:hintIn .6s ease both}
@keyframes hintIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.reading-hint.hint-in{animation:none}}

/* Depth and tilt (tilt.js): a soft light that slides across the card as it leans. */
.card-sheen{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,238,200,.15),rgba(255,238,200,.05) 30%,rgba(255,238,200,0) 58%)}

/* Keepsakes (keepsakes.js): countdown under the names (no layout space taken), petal surprise. */
.masthead{position:relative}
.crafted{margin:2px 0 0;font:italic 400 14px/1.3 Invitation,Georgia,serif;letter-spacing:.06em;color:#c9b27a}
.countdown{margin:5px 0 0;font:italic 400 21px/1.25 Invitation,Georgia,serif;letter-spacing:.03em;color:#f0d699;text-shadow:0 0 16px #d4a35b55}
.countdown:before,.countdown:after{content:'✦';font-style:normal;font-size:10px;color:#c9a960;margin:0 9px;vertical-align:3px}
@media(max-height:580px) and (min-width:600px){.countdown,.crafted{display:none}}
.petal-surprise{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.card.surprise-glow{animation:surpriseGlow 3.2s ease-out}
@keyframes surpriseGlow{0%{box-shadow:0 0 0 1px #e6c98a00,0 0 0 #e6c98a00}25%{box-shadow:0 0 0 1px #e6c98acc,0 0 46px #e6c98a66}100%{box-shadow:0 0 0 1px #e6c98a00,0 0 0 #e6c98a00}}
@media(prefers-reduced-motion:reduce){.card.surprise-glow{animation:none}}

/* Premium guest links (premium.js). */
.envelope-name{position:absolute;left:8%;right:8%;top:17%;z-index:5;text-align:center;pointer-events:none;color-scheme:only light;transition:opacity .6s}
.envelope-name small{display:block;font:400 12px/1.4 Invitation,Georgia,serif;font-variant:small-caps;letter-spacing:.16em;color:#e8d29c;text-shadow:0 1px 6px #000c}
.envelope-name span{display:block;margin-top:2px;font:400 clamp(22px,6.4vw,34px)/1.15 Script,Invitation,serif;color:#f2dca6;text-shadow:0 2px 10px #000d}
.opening .envelope-name,.opened .envelope-name{opacity:0}
.envelope-name{top:21%}
.envelope-name.long{top:19%}
.envelope-name.long span{font-size:clamp(18px,5.2vw,28px);line-height:1.12}
.celebration-button{display:block;margin:10px auto 0;min-height:44px;padding:8px 22px;border:1px solid #c9a96088;border-radius:22px;background:linear-gradient(180deg,#2a2412cc,#14110acc);
 font-family:Invitation,Georgia,serif;font-variant:small-caps;font-size:15px;letter-spacing:.08em;color:#f0d999;cursor:pointer;box-shadow:0 0 18px #d4a35b22}
.celebration-button span{color:#c9a960;font-size:11px}
@media(min-width:740px){.celebration-button{grid-column:1/-1}}
dialog.celebration{width:min(560px,100vw);max-width:100vw;max-height:100svh;margin:auto;padding:0;border:1px solid #c9a96055;border-radius:14px;background:#0b1424;color:#eadfc4;color-scheme:only light;overflow:auto;overscroll-behavior:contain}
dialog.celebration::backdrop{background:#030711cc;backdrop-filter:blur(3px)}
@media(max-width:600px){dialog.celebration{width:100vw;height:100svh;max-height:100svh;border-radius:0;border:0}}
.celebration-inner{position:relative;padding:34px 22px 30px;font-family:Invitation,Georgia,serif;text-align:center}
.celebration-close{position:sticky;top:0;float:right;margin:-22px -8px 0 0;width:44px;height:44px;border:0;background:none;color:#e1c993;font-size:28px;cursor:pointer;z-index:2}
.confirm-seal svg{width:96px;height:96px;filter:drop-shadow(0 6px 14px #0009)}
.cel-kicker{margin:10px 0 0;font-variant:small-caps;letter-spacing:.14em;font-size:13px;color:#cdb784}
.confirm-seal h2{margin:4px 0 6px;font:400 30px/1.2 Script,Invitation,serif;color:#f0d999}
.confirm-seal p{margin:0 auto;max-width:400px;font-style:italic;font-size:15px;line-height:1.5;color:#d9cba9}
.celebration h3{margin:30px 0 12px;font-variant:small-caps;letter-spacing:.12em;font-size:17px;font-weight:400;color:#e3c98d;border-top:1px solid #c9a96033;padding-top:22px}
.cel-day h4{margin:18px 0 8px;font-weight:400;font-size:15px;color:#f0d999}
.cel-event{margin:0 auto 12px;max-width:420px;padding:10px 12px;border:1px solid #c9a96026;border-radius:10px;background:#ffffff06}
.cel-event p{margin:2px 0;font-size:14px;line-height:1.45;color:#d9cba9}
.cel-event .cel-name{font-size:16px;color:#f2dca6}
.cel-event .cel-venue{font-style:italic;color:#bfae86}
.cel-event .cel-dress{margin-top:6px;font-variant:small-caps;letter-spacing:.06em;color:#e3c98d}
.cel-note{margin:10px 0 0;font-style:italic;font-size:12.5px;color:#a99c7e}
.cel-calendar{margin-top:14px;min-height:44px;padding:8px 18px;border:1px solid #c9a96077;border-radius:22px;background:none;color:#f0d999;font:inherit;font-variant:small-caps;letter-spacing:.06em;cursor:pointer}
.cel-checklist ul{list-style:none;margin:0 auto;padding:0;max-width:420px;text-align:left}
.cel-checklist li{border-bottom:1px solid #c9a9601f}
.cel-checklist label{display:flex;gap:12px;align-items:center;min-height:44px;font-size:14.5px;color:#e0d3b3;cursor:pointer}
.cel-checklist input{width:20px;height:20px;accent-color:#c99a45;flex:none}
.cel-checklist input:checked+span{color:#9d927a;text-decoration:line-through;text-decoration-color:#c9a96088}

/* Noticeable surprises: Enlarge button in the hint line, and cues laid over the card. */
.card{cursor:default}
.enlarge-link{font:inherit;color:#e3c98d;background:none;border:0;border-bottom:1px solid #c9a96088;padding:6px 2px;margin:-6px 0;cursor:pointer;min-height:32px}
.card-cues{position:absolute;inset:0;z-index:6;pointer-events:none;color-scheme:only light}
.card-cues .cue-names{position:absolute;left:4%;right:4%;top:77%;margin:0;text-align:center;white-space:nowrap;font:italic 400 clamp(12.5px,3.8vw,19px)/1.3 Invitation,Georgia,serif;color:#f3dfa8;text-shadow:0 1px 8px #000,0 0 16px #d4a35b66;opacity:0;transition:opacity .8s}
.card-cues .cue-names.on{opacity:1;animation:cuePulse 2.4s ease-in-out .8s infinite}
.card-cues .cue-bell{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:3.5px solid #a86f1f;box-shadow:0 0 0 2px #fff4d6,0 0 20px 2px #d49a35,inset 0 0 14px #d49a35;opacity:0;transition:opacity .5s}
.card-cues .cue-bell.on{opacity:1;animation:cueRing 1.6s ease-out infinite}
@keyframes cuePulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes cueRing{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}65%{opacity:.95}100%{transform:translate(-50%,-50%) scale(1.3);opacity:.15}}
.card-cues .cue-bell:after{content:'';position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,#ffe39a99,#ffe39a00 62%)}
@media(prefers-reduced-motion:reduce){.card-cues .cue-names.on,.card-cues .cue-bell.on{animation:none}}
.nowrap{white-space:nowrap}
.card-cues .cue-guest{position:absolute;left:4%;right:4%;top:83%;margin:0;text-align:center;white-space:nowrap;font:400 clamp(17px,5.2vw,28px)/1.1 Script,Invitation,serif;color:#f2d995;text-shadow:0 1px 8px #000,0 0 16px #d4a35b66;opacity:0;transition:opacity .8s}
.card-cues .cue-guest.long{font-size:clamp(14px,4.3vw,24px)}
.card-cues .cue-guest.on{opacity:1}

/* Simplified controls: music lives on the floating button; motion follows the phone's own
   reduce-motion setting. With fewer controls the rows no longer wrap, so nothing shifts between pages. */
#toggleMusic,#toggleMotion,.download-details{display:none!important}

/* Event details for attending guests (premium.js). */
.guest-details{max-width:560px;width:90vw;margin:6px auto 56px;padding-top:26px;border-top:1px solid #c9a96033;text-align:center;font-family:Invitation,Georgia,serif;color:#d9cba9}
.guest-details h2{margin:0;font-weight:400;font-variant:small-caps;letter-spacing:.12em;font-size:18px;color:#e3c98d}
.guest-details .gd-venue{margin:6px 0 0;font-style:italic;font-size:14px;color:#bfae86}
.guest-details h3{margin:24px 0 10px;font-weight:400;font-size:16px;color:#f0d999}
.gd-event{margin:0 auto 10px;max-width:420px;padding:10px 12px;border:1px solid #c9a96026;border-radius:10px;background:#ffffff06}
.gd-event p{margin:2px 0;font-size:14px;line-height:1.45}
.gd-event .gd-name{font-size:16px;color:#f2dca6}
.gd-event .gd-where{font-style:italic;color:#bfae86}
.guest-details .gd-note{margin:14px 0 0;font-style:italic;font-size:12.5px;color:#a99c7e}
.guest-details .gd-open{margin-top:16px;min-height:44px;padding:8px 22px;border:1px solid #c9a96088;border-radius:22px;background:linear-gradient(180deg,#2a2412cc,#14110acc);font-family:inherit;font-variant:small-caps;font-size:15px;letter-spacing:.08em;color:#f0d999;cursor:pointer}
.guest-details .gd-open span{color:#c9a960;font-size:11px}

/* Opened envelope flaps sit a few pixels past the screen edge; clip them so the page never widens. */
.experience{overflow-x:clip}
/* Wider screens: the celebration button joins the control row instead of taking its own line. */
@media(min-width:601px){.celebration-button{display:inline-flex;align-items:center;gap:6px;margin:0 6px 0 0;padding:4px 16px;min-height:40px}.celebration-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:12px}}
@media(min-width:601px){#replayVerse[hidden]{display:inline-flex!important;visibility:hidden}}
/* Wider screens, attending-guest links (extra button): two centred rows instead of the side-by-side grid. */
@media(min-width:740px){html.celebration .viewer-tools{display:block}html.celebration .utilities,html.celebration .verse-controls{justify-content:center}html.celebration .verse-controls{margin-top:2px}}

/* Celebration sheet: personal line, wishes and WhatsApp help. */
.cel-personal{margin:12px auto 0!important;max-width:420px;font-style:italic;font-size:16px!important;color:#f0d999!important}
.cel-wishes p{margin:0 auto 10px;max-width:420px;font-style:italic;font-size:14px;color:#d9cba9}
.cel-wa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border:1px solid #c9a96088;border-radius:22px;background:linear-gradient(180deg,#2a2412cc,#14110acc);color:#f0d999;font-variant:small-caps;letter-spacing:.06em;text-decoration:none}
.cel-wa:before{content:'';width:16px;height:16px;margin-right:8px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.cel-wa-help{background:none}

a.wishes-button{text-decoration:none;text-align:center;width:max-content}

/* Celebration sheet: contact buttons at the top, then tabs (Events, Dress code, Checklist). */
.cel-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;max-width:460px}
.cel-contact .cel-note{flex-basis:100%;margin-top:4px}
.cel-tabs{position:sticky;top:-1px;z-index:1;display:flex;justify-content:center;gap:4px;margin:26px -22px 0;padding:10px 46px 0;background:#0b1424;border-bottom:1px solid #c9a96044}
.cel-tabs button{flex:1;max-width:150px;min-height:44px;border:0;border-bottom:2px solid transparent;background:none;color:#bfae86;font:inherit;font-variant:small-caps;letter-spacing:.04em;font-size:14.5px;white-space:nowrap;padding:0 4px;cursor:pointer}
.cel-tabs button[aria-selected=true]{color:#f0d999;border-bottom-color:#d9b866}
.cel-panel{padding-top:6px}
.cel-dresscode .cel-dress{margin-top:4px;font-variant:small-caps;letter-spacing:.06em;color:#e3c98d}
.guest-details .gd-open{margin:0 0 6px}
.guest-details .gd-hint{margin:0 0 22px;font-style:italic;font-size:13px;color:#bfae86}