:root{color-scheme:light;--ink:#594638;--gold:#a68b59;--invitation-font:Baskerville,"Palatino Linotype",Georgia,serif}
*{box-sizing:border-box}
html{background:#f1ede4;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-y:none}
html::-webkit-scrollbar{display:none}
body{margin:0;color:var(--ink);font-family:var(--invitation-font);overscroll-behavior-y:none}
.experience{position:sticky;top:0;height:100svh;min-height:350px;overflow:clip;background:radial-gradient(ellipse at 46% 36%,#faf7ee,#f1ede4 60%,#e9e4d9)}
/* A fixed phone stage cannot ride with native touch momentum before sticky
   compositing catches up. Its picture fills the changing visible viewport;
   PhoneViewport separately keeps the story's scroll distances stable. */
.experience[data-phone-pinned=true]{position:fixed;inset:0;height:100vh;height:100dvh;min-height:0;overscroll-behavior:none}
.experience::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.15 * var(--film-grain,1));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.14' filter='url(%23n)'/%3E%3C/svg%3E")}
.monogram{position:absolute;z-index:2;left:50%;top:max(22px,env(safe-area-inset-top));transform:translateX(-50%);font-size:26px;font-style:italic;letter-spacing:3px;color:var(--ink);opacity:.8;user-select:none;pointer-events:none}
.monogram span{font-size:17px;padding:0 5px;color:var(--ink)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .55s}
.scene canvas{display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;outline:none}
.thread-hit-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.thread-hit-stroke{pointer-events:stroke;touch-action:none;cursor:grab}
.thread-hit-stroke:active{cursor:grabbing}
.scroll-film{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;display:block}
[data-ready=true] .scene{opacity:1}
.thread-end{position:absolute;left:0;top:0;width:48px;height:48px;border:0;border-radius:50%;padding:0;background:transparent;cursor:grab;touch-action:none;z-index:3;opacity:0}
[data-ready=true] .thread-end{opacity:1}.thread-end:active{cursor:grabbing}
.thread-end:focus-visible{outline:1px solid #a78b59;outline-offset:2px;background:#a78b5910}
.thread-end[hidden]{display:none}
.hint{position:absolute;left:0;top:0;width:44px;height:44px;pointer-events:none;opacity:0;z-index:2;transition:opacity .25s}
.hint span{position:absolute;inset:0;border:1px solid #ae9267;border-radius:50%;animation:beckon 4.6s infinite}
.hint i{position:absolute;width:4px;height:4px;left:20px;top:20px;border-radius:50%;background:#be9a68;animation:glimmer 4.6s infinite}
@keyframes beckon{0%,30%,100%{transform:scale(.5);opacity:0}8%{opacity:.65}25%{transform:scale(1.12);opacity:0}}
@keyframes glimmer{0%,30%,100%{opacity:0}10%{opacity:.7;transform:translate(4px,-2px)}25%{opacity:0;transform:translate(0,0)}}
.replay{position:absolute;z-index:4;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);background:transparent;border:0;border-bottom:1px solid #71836260;padding:10px 15px;color:var(--ink);font:15px var(--invitation-font);letter-spacing:.04em;cursor:pointer;min-width:60px;min-height:44px;animation:appear .4s}
.replay[hidden]{display:none}.replay:focus-visible{outline:2px solid #7c9159;outline-offset:4px}
@keyframes appear{from{opacity:0}to{opacity:1}}
.scroll-space{height:calc(300svh + 500px);pointer-events:none}
.bride-chapter{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;pointer-events:none;color:var(--ink)}
.bride-chapter::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#faf0deda 0%,#faf0de9c 38%,#faf0de26 75%,transparent)}
.bride-chapter-inner{width:min(1120px,92vw);padding:0 0 25px}
.bride-chapter h2{text-align:center;margin:0 0 clamp(36px,6vh,72px);font-size:clamp(38px,5.5vw,65px);font-weight:400;line-height:1.15;letter-spacing:-.03em}
.bride-chapter h2 span{display:inline-block;will-change:transform,opacity}
.family-tree{position:relative;height:clamp(340px,51svh,480px);width:100%}
.family-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.family-lines path{stroke:#9e7c53;stroke-width:1.4;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round;stroke-linejoin:round}
.family-person{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;width:22%;opacity:0;transform:translate(-50%,-100%);padding-bottom:12px}
.family-person i{position:absolute;bottom:0;left:calc(50% - 2.5px);width:5px;height:5px;background:#ac8457;border-radius:50%}
.family-role{font-family:var(--invitation-font);font-size:12px;letter-spacing:.09em;color:var(--ink);margin-bottom:8px}
.family-honorific{font-size:13px;font-style:italic;color:var(--ink);margin-bottom:3px}
.family-name{font-size:clamp(16px,2vw,23px);line-height:1.25;text-wrap:balance}
.family-person.family-parent{width:40%}
.family-person.family-bride{width:70%;padding-bottom:0}
.family-bride .family-role{margin-bottom:9px;letter-spacing:.14em}
.family-bride .family-name{font-size:clamp(34px,4.6vw,53px);letter-spacing:-.02em}
.family-bride i{display:none}
.experience[data-journey="immersed"] .replay{color:var(--ink);border-color:#92744a80;background:#f9f0dd55}
@media(max-width:600px){.bride-chapter-inner{width:94vw;padding-top:22px}.bride-chapter h2{font-size:38px;margin-bottom:55px}.family-tree{height:clamp(325px,47svh,440px)}.family-person{width:22%;padding-bottom:10px}.family-name{font-size:14px;line-height:1.3}.family-honorific{font-size:12px}.family-role{font-size:12px;letter-spacing:.035em;margin-bottom:6px}.family-bride .family-name{font-size:34px}}
@media(max-height:620px){.bride-chapter-inner{padding:10px 0}.bride-chapter h2{font-size:32px;margin-bottom:24px}.family-tree{height:min(280px,calc(100svh - 112px))}.family-role{font-size:11px;margin-bottom:5px}.family-honorific{font-size:11px}.family-name{font-size:15px}.family-bride .family-name{font-size:29px}}
@media(max-height:450px) and (max-width:600px){.family-name{font-size:12px}.family-role,.family-honorific{font-size:10px}.family-person{padding-bottom:8px}.family-bride .family-name{font-size:27px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fallback{position:absolute;left:50%;top:50%;width:min(86vw,calc(78svh * .66667),453px);aspect-ratio:2/3;transform:translate(-50%,-50%)}.fallback img{display:block;width:100%;height:100%;object-fit:contain}.fallback[hidden]{display:none}
@media(max-width:600px){.monogram{top:max(18px,env(safe-area-inset-top));font-size:23px}.replay{bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-height:450px){.monogram{left:28px;transform:none;top:20px}.replay{left:auto;right:18px;transform:none}}
@media(prefers-reduced-motion:reduce){.scene{transition:none}.hint{display:none}.replay{animation:none}}

/* Reserve room for the portrait, lifting the existing heading and ancestry. */
.bride-chapter{display:block}
.bride-chapter-inner{position:absolute;left:50%;top:var(--chapter-top,80px);transform:translateX(-50%) scale(var(--chapter-scale,1));transform-origin:center top;width:var(--chapter-width,92vw);padding:0}
.bride-chapter h2{font-size:var(--title-size,38px);line-height:1.15;margin:0 0 var(--heading-gap,28px)}
.family-tree{height:var(--tree-height,340px)}
.family-role{line-height:1.2}
.family-bride .family-role{font-size:var(--role-size,12px);margin-bottom:9px}
.family-bride .family-name{font-size:var(--bride-size,34px);line-height:1.25;white-space:nowrap}
.bride-portrait{display:block;height:var(--portrait-height,190px);width:auto;max-width:none;margin-top:var(--photo-gap,12px);object-fit:contain;user-select:none;-webkit-user-drag:none}

.chapter-pages{position:absolute;inset:0;z-index:0;perspective:1400px;perspective-origin:50% 45%;isolation:isolate;pointer-events:none}
.bride-page{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse at 46% 36%,#faf7ee,#f1ede4 60%,#e9e4d9);transform-origin:50% 45%;pointer-events:auto;will-change:transform}
.bride-page::after{content:"";position:absolute;inset:0;z-index:3;background:#3f342b;opacity:var(--depth-shade,0);pointer-events:none}
.groom-page{z-index:1;overflow:hidden;background:#faf0de;box-shadow:0 -20px 55px #3f342b26;will-change:transform;visibility:hidden;touch-action:pan-y}
.groom-background{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.groom-page::before{background:radial-gradient(ellipse at 50% 34%,#fff5e9eb 0%,#fff5e9c7 40%,#fff5e947 77%,transparent 100%)}
.groom-page .family-name{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.bride-page,.groom-page{will-change:auto}}

.sangeet-chapter{position:absolute;inset:0;z-index:3;visibility:hidden;pointer-events:none}
.sangeet-chapter canvas{display:block;width:100%;height:100%;pointer-events:none;touch-action:pan-y}
.experience[data-page="sangeet"] .replay{color:var(--ink);border-color:#e7cda580;background:#23180e55}

/* One continuous sheet of stationery, with video painted into each vignette. */
.event-card-scene{position:absolute;inset:0;z-index:3;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;perspective:1600px;background:radial-gradient(ellipse at 46% 36%,#f5f1e9,#ece6dc 80%);color:var(--ink)}
.event-card-turn{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.event-front-face{position:absolute;inset:0;overflow:clip;contain:paint;transform:rotateY(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.event-paper{position:absolute;left:0;top:0;width:var(--card-width);height:var(--card-height);transform-origin:0 0;will-change:transform;isolation:isolate;font-family:var(--invitation-font)}
.event-paper{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.event-card-scene[data-finalizing=true] .event-paper-surface{filter:none}
/* Filter only the static paper silhouette; video frames and text stay outside
   this tall filtered surface. The inner masks leave its deckled shadow free. */
.event-paper-surface{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:drop-shadow(-5px 9px 12px #66533d26) drop-shadow(0 1px 2px #5b48322b)}
.event-paper-surface::before,.event-paper-surface::after{content:"";position:absolute;inset:0;-webkit-mask-image:url('./assets/cotton-deckle-mask.svg');mask-image:url('./assets/cotton-deckle-mask.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.event-paper-surface::before{background:#fcf8ef url('./assets/cotton-paper-texture.svg') repeat;background-size:240px 240px}
.event-paper-surface::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 12% 36%,#d8c4a41a,transparent 55%),linear-gradient(90deg,#c5ae8826,transparent 3%,transparent 97%,#c5ae8826);box-shadow:inset 0 0 22px #c6ad8226}
.event-paper-header{height:var(--header-height);padding:64px var(--padding) 0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.event-eyebrow{margin:0 0 15px;font:22px var(--invitation-font);letter-spacing:.1em;color:var(--ink)}
.event-couple{margin:0;font:400 78px/1.2 var(--invitation-font);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.event-dates{margin:18px 0 14px;font:22px/1.4 var(--invitation-font);letter-spacing:.10em;color:var(--ink)}
.event-flourish{width:270px;color:#a78478}
.event-flourish svg{display:block;width:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.event-row{height:var(--row-height);padding:0 var(--padding);display:grid;grid-template-columns:var(--art-width) minmax(0,1fr);column-gap:var(--column-gap);align-items:center}
.event-row-right{grid-template-columns:minmax(0,1fr) var(--art-width)}
.event-row-right .event-art{grid-column:2;grid-row:1}
.event-row-right .event-details{grid-column:1;grid-row:1}
.event-art{position:relative;width:var(--art-width,100%);aspect-ratio:16/9;transform:rotate(-.4deg)}
.event-row-right .event-art{transform:rotate(.45deg)}
.event-effects{position:absolute;left:-9%;top:-28%;width:118%;height:156%;z-index:1;pointer-events:none;touch-action:pan-y;display:block}
.event-effects[hidden]{display:none}
.event-art::before{content:"";position:absolute;inset:10% 1% 3%;z-index:-1;border-radius:44%;background:#ae96752b;filter:blur(20px)}
.event-row[data-event=haldi] .event-art::before{background:#d4aa6426}
.event-row[data-event=wedding] .event-art::before{background:#9baf6526}
.event-film{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.91) contrast(.97);-webkit-mask-image:var(--event-mask,url('./assets/event-cutout-mask.svg?v=effects-studies-1'));mask-image:var(--event-mask,url('./assets/event-cutout-mask.svg?v=effects-studies-1'));-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.event-details{text-align:center;will-change:transform,opacity}
.event-details>*{will-change:transform,opacity}
.event-portal-edge{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.event-portal-edge canvas{display:block;width:100%;height:100%;pointer-events:none}
.event-number{margin:0 0 12px;font:18px var(--invitation-font);letter-spacing:.2em;color:var(--ink)}
.event-title{margin:0 0 22px;font:400 56.1px/1.2 var(--invitation-font);letter-spacing:-.025em;color:var(--ink)}
.event-schedule,.event-venue,.event-address,.event-pending{margin:0 0 10px;font:25px/1.45 var(--invitation-font);color:var(--ink);text-wrap:balance}
.event-schedule{letter-spacing:.025em}
.event-venue{font-size:27px}
.event-address{font-size:22px;color:var(--ink)}
.event-pending{font-size:23px;font-style:italic;color:var(--ink)}
.event-dress{margin:15px 0 10px;font:24px/1.4 var(--invitation-font);color:var(--ink)}
.event-card-scene[data-phone=true] .event-paper-header{padding-top:48px}
.event-card-scene[data-phone=true] .event-eyebrow{font-size:26px;letter-spacing:.05em}
.event-card-scene[data-phone=true] .event-couple{font-size:60px}
.event-card-scene[data-phone=true] .event-dates{font-size:26px;letter-spacing:.035em}
.event-card-scene[data-phone=true] .event-row{grid-template-columns:minmax(0,1fr);grid-template-rows:380px 390px;align-content:center;gap:0}
.event-card-scene[data-phone=true] .event-art{grid-column:1;grid-row:1;width:var(--art-width);justify-self:center;transform:translateX(-4px) rotate(-.4deg)}
.event-card-scene[data-phone=true] .event-row-right .event-art{justify-self:center;transform:translateX(4px) rotate(.4deg)}
.event-card-scene[data-phone=true] .event-details{grid-column:1;grid-row:2;width:90%;justify-self:end;align-self:start;padding-top:22px}
.event-card-scene[data-phone=true] .event-row-right .event-details{justify-self:start}
.event-card-scene[data-phone=true] .event-number{font-size:24px;margin-bottom:12px}
.event-card-scene[data-phone=true] .event-title{font-size:61.2px;margin-bottom:18px}
.event-card-scene[data-phone=true] .event-schedule,.event-card-scene[data-phone=true] .event-venue,.event-card-scene[data-phone=true] .event-address,.event-card-scene[data-phone=true] .event-pending{font-size:32px}
.event-card-scene[data-phone=true] .event-dress{font-size:30px}
.event-card-scene[data-compact=true] .event-schedule,.event-card-scene[data-compact=true] .event-venue,.event-card-scene[data-compact=true] .event-address,.event-card-scene[data-compact=true] .event-pending,.event-card-scene[data-compact=true] .event-dress{font-size:var(--body-font)}
.experience[data-page=events] .replay{color:var(--ink);border-color:#a68c7180;background:#faf4e7b3}
@media(prefers-reduced-motion:reduce){.event-paper,.event-details,.event-details>*{will-change:auto}}

/* The reverse of the same cotton sheet. The film remains a complete landscape
   image on phones so no family member is lost to a portrait crop. */
.invitation-back{position:absolute;inset:0;overflow:clip;contain:paint;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;visibility:hidden;color:var(--ink);font-family:var(--invitation-font)}
.invitation-back-face{position:absolute;left:0;top:0;width:var(--card-width);height:var(--card-height);transform-origin:0 0;isolation:isolate}
.invitation-back-content{position:absolute;left:50%;top:50%;width:var(--content-width);height:var(--content-height);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;text-align:center}
.invitation-heading{margin:0;font:400 var(--title-size)/1.25 var(--invitation-font);letter-spacing:-.025em;text-wrap:balance}
.invitation-film{display:block;flex:none;width:100%;aspect-ratio:16/9;object-fit:contain;-webkit-mask-image:url('./assets/invitation-cutout.png');mask-image:url('./assets/invitation-cutout.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.invitation-map{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:15px;max-width:100%;min-height:var(--venue-height,102px);padding:8px 18px;color:var(--ink);font:var(--map-size)/1.35 var(--invitation-font);text-decoration:none;border-radius:8px}
.invitation-map-label{display:block;min-width:0;text-wrap:balance}.invitation-map-city{display:block;font-size:.85em}
.invitation-map-logo{width:var(--hotel-width,160px);height:auto;aspect-ratio:4/3;flex:none;object-fit:contain}
.invitation-back[data-interactive=true] .invitation-map{pointer-events:auto;cursor:pointer}
.invitation-map:hover .invitation-map-label{text-decoration:underline;text-underline-offset:5px}
.invitation-map:focus-visible{outline:3px solid var(--ink);outline-offset:5px;background:#dfd0b929}
.invitation-back[data-compact=true] .invitation-back-content{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);grid-template-rows:1fr 1fr;gap:12px 24px}
.invitation-back[data-compact=true] .invitation-heading{grid-column:1;grid-row:1;align-self:end}
.invitation-back[data-compact=true] .invitation-map{grid-column:1;grid-row:2;align-self:start;padding:8px 0;gap:8px}
.invitation-back[data-compact=true] .invitation-film{grid-column:2;grid-row:1/3}
.experience[data-page=invitation] .replay{color:var(--ink);border-color:#a68c7180;background:#faf4e7b3}
@media(prefers-reduced-motion:reduce){.event-card-turn{will-change:auto}}

/* A compositor-only, left-to-right memory ribbon. Equal duplicate groups make
   the loop seamless; motion is independent of the scroll-controlled film. */
.invitation-memories{position:absolute;overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.memory-track{display:flex;align-items:center;width:max-content;height:100%;animation:memories-right var(--memory-duration,36s) linear infinite;animation-play-state:paused;will-change:transform}
.invitation-memories[data-running=true] .memory-track{animation-play-state:running}
.memory-group{display:flex;flex:none;align-items:center;gap:12px;height:100%;padding-right:12px}
.memory-photo{flex:none;margin:0;padding:5px 5px 9px;background:#fffbf2;border:1px solid #b7a18330;box-shadow:0 2px 5px #59463812;transform:rotate(1deg)}
.memory-photo:nth-child(3n+1){transform:rotate(-1.5deg)}
.memory-photo:nth-child(3n+2){transform:rotate(1.5deg)}
.memory-image{display:block;width:auto;height:var(--memory-image-height);object-fit:contain;user-select:none;-webkit-user-drag:none}
.memory-pause{position:absolute;right:8px;top:6px;display:grid;place-items:center;width:44px;height:44px;padding:11px;border:1px solid #a68c7140;border-radius:50%;background:#faf4e7ed;color:var(--ink);cursor:pointer;pointer-events:none;box-shadow:0 2px 6px #59463812}
.memory-pause svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.memory-pause[aria-pressed=true] svg{fill:currentColor;stroke:none}
.memory-pause[hidden]{display:none}
.invitation-back[data-interactive=true] .memory-pause{pointer-events:auto}
.memory-pause:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes memories-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.invitation-memories{overflow-x:auto;-webkit-mask-image:none;mask-image:none;pointer-events:auto}.memory-track{animation:none;transform:none;will-change:auto}.memory-group[aria-hidden=true],.memory-photo[aria-hidden=true]{display:none}}

@font-face{font-family:"La Belle Aurore";src:url('./assets/fonts/LaBelleAurore.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.closing-paper{position:absolute;left:0;top:0;transform-origin:0 0;isolation:isolate;color:var(--ink);font-family:var(--invitation-font);will-change:transform}
.closing-cutout{display:block;object-fit:contain;-webkit-mask-image:url('./assets/invitation-cutout.png');mask-image:url('./assets/invitation-cutout.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.closing-venue{position:absolute;top:var(--venue-top);left:50%;transform:translateX(-50%);width:var(--venue-width);height:var(--venue-height)}
.closing-location{position:absolute;left:50%;top:var(--venue-link-top);transform:translateX(-50%);min-height:var(--venue-link-height);max-width:90%;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 12px;text-align:center;color:var(--ink);text-decoration:none;border-radius:8px}
.closing-location-name{display:block;font:36px/1.25 var(--invitation-font);text-wrap:balance}
.closing-location-city{display:block;margin-top:10px;font-size:26px}
.closing-maps-icon{flex:none;width:58px;height:58px;object-fit:contain}
.closing-card[data-interactive=true] .closing-location{pointer-events:auto}
.closing-location:hover .closing-location-name{text-decoration:underline;text-underline-offset:6px}
.closing-location:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.closing-story{position:absolute;left:0;top:var(--stage-top);width:100%;height:var(--stage-height)}
.story-quote{position:absolute;z-index:4;left:50%;top:20px;transform:translateX(-50%) rotate(-1deg);width:var(--quote-width);margin:0;font:400 var(--quote-size)/1.28 "La Belle Aurore","Snell Roundhand",cursive;text-align:left;color:var(--ink)}
.story-quote-ink{background:linear-gradient(transparent 69%,#e3a7b450 69%,#e3a7b450 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.story-dog{position:absolute;z-index:3;top:var(--dog-top);width:var(--dog-width);height:var(--dog-height)}
.story-dog-left{left:var(--dog-side)}.story-dog-right{right:var(--dog-side)}
.story-photo-stack{position:absolute;z-index:2;left:50%;top:var(--photo-center);transform:translate(-50%,-50%);isolation:isolate}
.story-photo{position:absolute;left:50%;top:50%;margin:0;border:10px solid #fffaf0;border-radius:1px;box-shadow:0 0 0 2px #d89cab80,0 9px 24px #59463824;background:#fffaf0;animation:photo-stack-cycle var(--photo-cycle) linear infinite;animation-delay:var(--photo-delay);animation-play-state:paused;will-change:transform,opacity}
.story-photo img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.story-photo-stack[data-running=true] .story-photo{animation-play-state:running}
.stack-pause{position:absolute;z-index:20;right:-20px;bottom:12px;width:var(--control-size,44px);height:var(--control-size,44px);display:grid;place-items:center;padding:0;background:#faf4e7f2;border:1px solid #a68c7140;border-radius:50%;color:var(--ink);pointer-events:none;cursor:pointer}
.stack-pause svg{display:block;width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.stack-pause[aria-pressed=true] svg{fill:currentColor;stroke:none}.stack-pause[hidden]{display:none}
.closing-card[data-interactive=true] .stack-pause{pointer-events:auto}.stack-pause:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@keyframes photo-stack-cycle{
  0%{opacity:0;z-index:10;animation-timing-function:cubic-bezier(.16,.8,.25,1);transform:translate(-50%,-50%) translate3d(18px,-90px,0) rotate(10deg) scale(1.035)}
  3.4%,14.28%{opacity:1;z-index:10;transform:translate(-50%,-50%) translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-angle)) scale(1)}
  14.29%,28.56%{opacity:1;z-index:9;transform:translate(-50%,-50%) translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-angle)) scale(1)}
  28.57%,42.85%{opacity:1;z-index:8;transform:translate(-50%,-50%) translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-angle)) scale(1)}
  42.86%{opacity:1;z-index:7;transform:translate(-50%,-50%) translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-angle)) scale(1)}
  46%,99.99%{opacity:0;z-index:6;transform:translate(-50%,-50%) translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-angle)) scale(1)}
  100%{opacity:0;z-index:10;transform:translate(-50%,-50%) translate3d(18px,-90px,0) rotate(10deg) scale(1.035)}
}
.closing-footer{position:absolute;left:50%;top:var(--footer-top);width:var(--copy-width);transform:translateX(-50%);text-align:center}
.closing-copy{margin:0;font:400 var(--copy-size)/1.55 var(--invitation-font);text-wrap:balance;color:var(--ink)}
.closing-tamul{display:block;width:var(--tamul-width);height:auto;margin:32px auto 0;object-fit:contain}
.site-music{position:fixed;z-index:12;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:44px;height:44px;display:grid;place-items:center;padding:10px;border:1px solid #a68c7150;border-radius:50%;background:#faf4e7e8;box-shadow:0 2px 8px #59463812;color:var(--ink);cursor:pointer}
.site-music svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.site-music .music-off{stroke-width:1.8}
.site-music:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.story-photo{animation:none;opacity:0;transform:translate(-50%,-50%) rotate(var(--photo-angle));will-change:auto}.story-photo:first-child{opacity:1}}

.interaction-hint{position:absolute;z-index:5;left:max(16px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:5px;max-width:104px;color:var(--ink);font:12px/1.3 var(--invitation-font);opacity:.7;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.interaction-hint[data-mode=none],.interaction-hint[data-mode=scroll][data-quiet=false]{opacity:0}
.interaction-hint-icon{flex:none;width:15px;height:18px}.interaction-hint-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.interaction-hint[data-mode=scroll] .interaction-hint-icon{animation:scroll-nudge 3.6s ease-in-out infinite}
@keyframes scroll-nudge{0%,55%,100%{transform:translateY(-2px)}75%{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.closing-paper{will-change:auto}.interaction-hint{transition:none}.interaction-hint-icon{animation:none!important}}
