/* The realistic Signature collection: shared scene layout (see js/occasi-signature-scenes.js).
   Each design sets its own fonts and colours on :root (--ink, --ink-soft, --paper, --accent, --display, --serif). */
:root{--ink:#26324a;--ink-soft:#4e5a73;--paper:#f6f3ee;--accent:#8a9bb8;--display:'Cormorant Garamond',Georgia,serif;--serif:'EB Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;--page:#eef1f6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.signature-scenes{margin:0;background:var(--page);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
body.signature-scenes main{display:grid;gap:clamp(18px,4vw,40px);padding-bottom:64px}
html.invitation-opening-locked,html.invitation-opening-locked body{overflow:hidden}
#signature-status{position:fixed;inset:auto 0 24px;text-align:center;font:500 13px/1.4 var(--sans);letter-spacing:.08em;color:var(--ink-soft)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the guest's language picker sits in a small footer at the end of the invitation, not over the screens (9 Oct) */
.signature-footer{display:flex;justify-content:center;padding:4px 16px calc(28px + env(safe-area-inset-bottom))}
body.signature-scenes .signature-footer #oc-language{position:static;left:auto;bottom:auto;z-index:auto}

/* a scene: the render, its film and the words placed on it */
figure.scene{position:relative;margin:0 auto;width:min(100%,600px);aspect-ratio:var(--scene-ratio,2/3);container-type:inline-size;overflow:hidden;background:var(--page)}
figure.scene>picture{display:contents}figure.scene>.scene-poster,figure.scene>picture>.scene-poster,figure.scene>.scene-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
figure.scene>.scene-film{opacity:0;transition:opacity .6s ease}
figure.scene.is-moving>.scene-film{opacity:1}
figure.scene [data-region]{position:absolute;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--ink)}
figure.scene [data-region][hidden]{display:none}
@media (prefers-reduced-motion:reduce){figure.scene>.scene-film{display:none}}
/* timed words (data-at): hidden while their film is on its way to them, then a fade */
[data-at].is-waiting{opacity:0;transition:none}
[data-at].is-waiting.is-in{opacity:1;transition:opacity var(--at-fade,.6s) ease}
@media (prefers-reduced-motion:reduce){[data-at].is-waiting{opacity:1}}

/* section headings above or on scenes */
.scene-section{position:relative}
.scene-section>header{width:min(100% - 40px,560px);margin:0 auto 14px;text-align:center}
.scene-section .eyebrow{font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.scene-section h2{font:400 clamp(34px,9vw,52px)/1 var(--display);margin:0;color:var(--ink)}

/* a stretchable panel for lists that grow (the render supplies top, a tiling middle and bottom) */
.scene-panel{width:min(100%,600px);margin:-1px auto 0;container-type:inline-size;
 background:var(--panel-top) top center/100% auto no-repeat,var(--panel-bottom) bottom center/100% auto no-repeat,var(--panel-mid) top center/100% auto repeat-y;
 padding:calc(var(--panel-pad-top,18) * 1cqw) calc(var(--panel-pad-x,14) * 1cqw) calc(var(--panel-pad-bottom,18) * 1cqw)}

/* stacks: a list that grows, made of rendered panels (top, repeating tiles, bottom) */
.scene-stack{width:min(100%,600px);margin:0 auto;display:grid;container-type:inline-size}
.stack-panel{position:relative;width:100%;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.stack-panel+.stack-panel{margin-top:-1px}  /* panels overlap by a pixel so fractional heights never leave a hairline */
.stack-film{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.stack-film.is-moving{opacity:1}
.stack-text{position:absolute;display:flex;flex-direction:column;justify-content:center;z-index:1;color:var(--ink)}
.stack-text p{margin:0}
@media (prefers-reduced-motion:reduce){.stack-film{display:none}}

/* steppers: one chapter at a time; the step film crossfades in over the loop, the words fade out and back in */
.step-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s linear;pointer-events:none}
.step-film.is-on{opacity:1}
figure.scene[data-stepper] [data-region="chapter"],figure.scene[data-stepper] [data-region="photo"]{transition:opacity .35s ease}
figure.scene.chapter-out [data-region="chapter"],figure.scene.chapter-out [data-region="photo"]{opacity:0}
[data-spill-host][hidden]{display:none}
@media (prefers-reduced-motion:reduce){.step-film{display:none}}
.scene-controls{display:flex;align-items:center;gap:2.4cqw}
.scene-controls [data-dots]{display:flex;gap:2cqw}
.scene-controls [data-dot]{width:2.6cqw;height:2.6cqw;min-width:10px;min-height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:transparent;padding:0;cursor:pointer}
.scene-controls [data-dot].is-on{background:#fff}
.scene-controls [data-next]{font:500 2.6cqw/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:1.6cqw 3cqw;cursor:pointer}

/* the opening and the hero fill the screen */
.signature-hero-window{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--page)}
.signature-hero-window figure.scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none}
#opening{z-index:3;transition:opacity .9s ease}
body:not(.signature-opening) #opening{opacity:0;pointer-events:none}
body.opening-playing #opening .scene-film{opacity:1}
#open-invitation{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:15px 26px;backdrop-filter:blur(8px);cursor:pointer}
body:not(.signature-opening) #open-invitation,body.opening-playing #open-invitation{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s,visibility 0s .35s}   /* v280 (K3): out of the Tab order once hidden */
#hero .scene-film{opacity:1}
.signature-scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:grid;justify-items:center;gap:4px;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none;text-shadow:0 1px 8px rgba(30,40,70,.45)}
.signature-scroll-cue svg{stroke:currentColor;stroke-width:1.4}
body.signature-opening .signature-scroll-cue{display:none}
.invitation-music[hidden]{display:none}

/* several events (10 Oct 2026): a row of tabs above a stack (days of the schedule, a menu for each event, dress codes);
   the chosen one is drawn whole underneath. Each design can recolour them with --tab-* on :root. */
.sig-tabs{width:min(100%,600px);margin:0 auto -4px;display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sig-tabs::-webkit-scrollbar{display:none}
.sig-tab{flex:0 0 auto;scroll-snap-align:center;display:grid;gap:2px;justify-items:start;text-align:left;min-height:44px;max-width:15em;padding:8px 14px;border:1px solid var(--tab-line,color-mix(in srgb,var(--accent) 55%,transparent));border-radius:999px;background:var(--tab-bg,color-mix(in srgb,var(--paper) 88%,transparent));color:var(--tab-ink,var(--ink));cursor:pointer;font:inherit;box-shadow:0 6px 14px -10px rgba(20,30,50,.5)}
.sig-tab[aria-selected="true"]{background:var(--tab-on,var(--ink));border-color:var(--tab-on,var(--ink));color:var(--tab-on-ink,var(--paper))}
.sig-tab:focus-visible{outline:2px solid var(--tab-on,var(--ink));outline-offset:3px}
.sig-tab-k{font:600 9.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.sig-tab-t{font:italic 400 15px/1.2 var(--display);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a long row of tabs scrolls inside its strip; it must never widen the page (a grid item grows to its content) */
.scene-section:has(>.sig-tabs),.scene-section:has(.sig-tabs){min-width:0}
/* v285.1 (owner 2 Nov): an event's name up to its cap (30) shows whole on its tab, never "…": the row wraps onto more lines
   (no sideways strip) and a long name wraps inside its tab; the small day line is 10 px; five tabs show at a time, the
   sixth to the twelfth on the row's page 2 (.sig-tabs-more, js/occasi-signature-scenes.js and the Pearl Lake dress code) */
.sig-tabs{flex-wrap:wrap;justify-content:center;overflow:visible;scroll-snap-type:none}
.sig-tab{flex:0 1 auto;max-width:min(15em,100%);min-width:44px}
.sig-tab[hidden]{display:none}
.sig-tab-k{font-size:10px}
.sig-tab-t{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:balance}
.sig-tabs-more{display:block;margin:2px auto 8px;min-height:44px;min-width:88px;padding:8px 14px;border:0;border-radius:0;background:none;font:italic 400 15px/1.2 var(--display);color:var(--tab-ink,var(--ink));text-decoration:underline;text-decoration-color:var(--tab-line,color-mix(in srgb,var(--accent) 55%,transparent));text-underline-offset:5px;cursor:pointer}
.sig-tabs-more[hidden]{display:none}