/* Winter garden invitation — approved reference, 5 September 2026.
   The new illustrated scenes replace the previous fixed ribbon system.
   Artwork keeps its own aspect ratio; text stays live and accessible. */
:root{
  --paper:#FFF9F6;
  --panel:#F8EEEB;
  --blush:#F3DCD7;
  --pink:#E8B7BC;
  --ribbon:#EDC9CE;
  --rose:#AA465E;
  --rose-soft:#CB8190;
  --berry:#A84C61;
  --sage:#787D6C;
  --ink:#514B50;
  --ink-soft:#73686E;
  --hair:#E5BDC2;
  --snow:#FFFCFA;
  --e:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'IBM Plex Sans Thai',sans-serif; color:var(--ink); background-color:var(--paper); font-weight:300; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,textarea{ font:inherit; }
button,a,input,textarea{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible{ outline:2px solid var(--rose); outline-offset:4px; }
[hidden]{ display:none !important; }
.th{ letter-spacing:0; line-height:1.75; }
.stage{ min-height:100vh; display:grid; place-items:start center; padding:28px 16px; background-color:#EEE7E5; }
.frame{ width:390px; height:calc(100dvh - 56px); min-height:560px; overflow-y:auto; overflow-x:hidden;
        scrollbar-width:none; box-shadow:0 14px 60px rgba(90,62,65,.12); background-color:var(--paper); scroll-behavior:smooth; }
.frame::-webkit-scrollbar{ display:none; }
.page{ position:relative; width:100%; overflow-x:clip; background-color:var(--paper); }
.sec{ position:relative; padding:26px 26px 35px; text-align:center; background-color:var(--paper);
      background-image:radial-gradient(ellipse at 0 18%,rgba(234,188,189,.13),transparent 55%),radial-gradient(ellipse at 100% 86%,rgba(235,198,195,.17),transparent 60%); }
.sec::after{ content:""; position:absolute; left:-2%; bottom:-1px; width:104%; height:21px; z-index:3;
             background-image:radial-gradient(ellipse at 20% 140%,var(--snow) 0 59%,transparent 63%),radial-gradient(ellipse at 80% 135%,var(--snow) 0 59%,transparent 65%);
             pointer-events:none; }
.scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.deco{ position:absolute; height:auto; z-index:2; pointer-events:none; mix-blend-mode:multiply; }
.head{ position:relative; z-index:10; margin:0 auto 19px; }
.head__t{ font-family:'Playfair Display',serif; font-style:italic; font-weight:600; color:var(--rose); font-size:24px; line-height:1.25; }
.head__r{ display:block; width:36px; height:7px; border-bottom:1px solid var(--hair); margin:5px auto 0; position:relative; }
.head__r::after{ content:""; position:absolute; width:10px; height:3px; bottom:-2px; left:13px; background-color:var(--paper); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.eyebrow{ font-family:'Playfair Display',serif; font-size:8px; line-height:1.5; font-weight:500; letter-spacing:.16em; }
.monogram{ width:60px; height:44px; object-fit:contain; margin:0 auto 9px; }
/* Tint the supplied black artwork to --rose (#AA465E), preserving its alpha
   and exact contours. The source logo remains untouched. */
.monogram{ filter:brightness(0) invert(50%) sepia(100%) saturate(470.000%) hue-rotate(302.114deg) brightness(66.634%); }
.winter-star{ position:absolute; z-index:1; color:var(--rose-soft); opacity:.25; font-family:Georgia,serif;
              font-size:34px; line-height:1; pointer-events:none; user-select:none; }
.winter-star--a{ top:42px; left:24px; }
.winter-star--b{ top:60px; right:26px; font-size:27px; }
.heart{ display:inline-block; color:var(--rose); font-size:17px; line-height:1; }

/* Two paper leaves use matching halves of one reference-derived illustration.
   The fixed shell matches the desktop card, and the phone's visible viewport. */
.opening{ position:fixed; top:28px; left:50%; width:390px; height:calc(100dvh - 56px); min-height:560px;
          --cover-ink:#876f4f; color:var(--cover-ink);
          background-color:var(--paper);
          transform:translateX(-50%); z-index:100; overflow:hidden; isolation:isolate; }
/* Full-bleed cover: both leaves fill the card on all four sides, not a
   contained portrait with letterbox/pillarbox margins. */
.opening__doors{ position:absolute; inset:0; width:100%; height:100%; perspective:1200px; z-index:2; }
.opening__glow{ position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; background-color:var(--snow);
                background-image:radial-gradient(ellipse at 50% 58%,#FFFFFF 0 20%,rgba(255,249,246,.95) 53%,rgba(243,220,215,.35) 100%); }
/* One sustained glow, never repeated flashes; it hides the contents until the flight. */
.opening.is-unfolding .opening__glow{ animation:openingGlow 4.4s ease-in-out both; }
@keyframes openingGlow{ 0%,54%{opacity:1;} 76%{opacity:.8;} 100%{opacity:0;} }
.opening__butterflies{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.opening__sprite{ display:none; }
.opening__butterfly{ position:absolute; left:0; top:0; width:var(--size); height:var(--size); opacity:0; will-change:transform,opacity; }
.opening__wings{ position:absolute; inset:0; perspective:180px; filter:drop-shadow(0 2px 3px rgba(170,70,94,.1)); }
.opening__wing{ position:absolute; top:0; width:50%; height:100%; overflow:hidden; backface-visibility:hidden; }
.opening__wing::before{ content:""; position:absolute; top:0; width:200%; height:100%; background-image:url('assets/winter-butterfly.webp'); background-size:100% 100%; }
.opening__wing--left{ left:0; transform-origin:right center; animation:wingLeft var(--flap) ease-in-out var(--phase) infinite alternate; }
.opening__wing--right{ right:0; transform-origin:left center; animation:wingRight var(--flap) ease-in-out var(--phase) infinite alternate; }
.opening__wing--left::before{ left:0; }
.opening__wing--right::before{ right:0; }
@keyframes wingLeft{ from{transform:rotateY(4deg);} to{transform:rotateY(68deg);} }
@keyframes wingRight{ from{transform:rotateY(-4deg);} to{transform:rotateY(-68deg);} }
.opening__door{ position:absolute; top:0; bottom:0; width:50%; overflow:hidden; background-color:transparent;
                filter:drop-shadow(0 1px 2px rgba(83,66,53,.16));
                backface-visibility:hidden; transition:transform 1.8s cubic-bezier(.45,0,.18,1); }
.opening__door--left{ left:0; transform-origin:left center; }
.opening__door--right{ right:0; transform-origin:right center; }
/* The two images are the same full sheet, clipped precisely at its centre seam. */
/* Remove the photo's outside matte AND map the retained 94.75% x 97.75%
   paper area exactly onto the cover. Both halves still share one continuous
   image; separate offsets account for the asymmetric 2.75%/2.5% margins. */
.opening__art{ position:absolute; top:-.97186701%; width:211.0817942%; max-width:none; height:102.3017903%; pointer-events:none;
               clip-path:inset(.95% 2.5% 1.3% 2.75%); }
.opening__door--left .opening__art{ left:-5.80474934%; }
.opening__door--right .opening__art{ right:-5.27704485%; }
/* Another two display steps smaller: 240 -> 192px at a 390px cover width.
   Centre the WHOLE visible name line now (ink midpoint x450 of 900), rather
   than the ampersand alone; this moves the composition right into balance. */
.opening__names{ position:absolute; top:25.42199488%; left:50%; width:49.23076923%; aspect-ratio:900/275;
                 transform:translateX(-50%); background-color:var(--cover-ink); transition:opacity .3s ease;
                 -webkit-mask:url('assets/cover-names-script-20261020.webp') center/100% 100% no-repeat;
                 mask:url('assets/cover-names-script-20261020.webp') center/100% 100% no-repeat; }
.opening__open{ position:absolute; inset:0; width:100%; height:100%; border:0; background-color:transparent;
                z-index:4; color:inherit; font-size:12px; letter-spacing:0; cursor:pointer; transition:opacity .3s ease; }
/* The supplied cover contains its original Thai instruction already.
   Keep the real full-screen button, but do not draw a second copy. */
.opening__open span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.opening__open:focus-visible{ outline-offset:-15px; }
.opening.is-unfolding .opening__open{ opacity:0; pointer-events:none; }
/* Open away into the light, not toward the camera. Receding inner corners
   stay within both top AND bottom bounds instead of hitting the shell clip. */
.opening.is-unfolding .opening__door--left{ transform:rotateY(105deg); }
.opening.is-unfolding .opening__door--right{ transform:rotateY(-105deg); }
.opening.is-unfolding .opening__names{ opacity:0; }
.opening-active,.opening-active body{ overflow:hidden; }
.opening-active .frame{ overflow-y:hidden; }

/* Opening scene: all dimensional art lives in a single generated drawing. */
.hero{ position:relative; min-height:545px; padding:99px 76px 74px; text-align:center; background-color:var(--paper); }
.hero::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:20px; background-image:linear-gradient(transparent,var(--paper)); z-index:3; pointer-events:none; }
.hero__scene{ object-position:50% 50%; }
.hero__content{ position:relative; z-index:10; }
/* The hero logo retains its exact source, size, tint and position. The former
   third section's full Thai invitation is now laid out below it. */
.hero__content > .monogram{ width:96px; height:96px; margin-bottom:12px; }
.hero__intro{ font-size:11.5px; line-height:1.9; margin-top:14px; }
.names{ display:flex; flex-direction:column; align-items:center; margin:10px 0; color:var(--rose); font-weight:400; }
.hero__names{ font-family:'IBM Plex Sans Thai',sans-serif; letter-spacing:0; margin:14px 0 12px; }
.nm{ display:block; font-family:'IBM Plex Sans Thai',sans-serif; font-style:normal; font-size:17.5px; line-height:1.75; font-weight:400; letter-spacing:0; }
.nm--and{ font-size:11px; line-height:1.8; font-weight:300; color:var(--ink-soft); }
.hero__details{ font-size:11.5px; line-height:1.75; }
.hero__details [lang="en"]{ font-family:'Playfair Display',serif; }
.hero__hotel{ font-size:10.5px; line-height:1.65; }
.winter-star--hero-l{ top:214px; left:24px; font-size:20px; }
.winter-star--hero-r{ top:274px; right:24px; font-size:25px; }
.scroll-cue{ position:absolute; bottom:14px; left:50%; translate:-50% 0; z-index:10; display:flex; align-items:center; flex-direction:column; justify-content:center;
             text-decoration:none; min-width:180px; min-height:44px; color:var(--ink-soft); }
.scroll-cue span:first-child{ font-family:'Playfair Display',serif; font-size:10.5px; line-height:1.5; letter-spacing:.1em; }
.scroll-cue span:last-child{ font-size:17px; line-height:1; }

/* Six overlapping album prints: native touch scrolling, a glimpse of the next
   memory, and no automatic advancing. The rail still works without JS. */
.story-sec{ padding-top:16px; padding-bottom:26px; }
.story__gallery{ --story-card:min(72vw,276px); position:relative; z-index:5; margin:0 -26px; }
.story__track{ display:flex; align-items:center; gap:0; padding:19px calc((100% - var(--story-card)) / 2) 25px;
               overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
               overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; cursor:grab; user-select:none; }
.story__track::-webkit-scrollbar{ display:none; }
.story__track:focus-visible{ outline:2px solid var(--rose); outline-offset:-3px; border-radius:6px; }
.story__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.story__slide{ position:relative; z-index:1; flex:0 0 var(--story-card); min-width:0; scroll-snap-align:center; scroll-snap-stop:always; }
.story__slide + .story__slide{ margin-left:-36px; }
.story__slide.is-current{ z-index:3; }
/* Realistic instant-film coating: one photographic material texture on the paper.
   The photo window covers the material so the supplied photographs stay intact. */
.story__photo{ --print-edge:12px; --print-foot:50px; position:relative; border:1px solid rgba(81,75,80,.16); border-radius:1px; overflow:hidden;
               aspect-ratio:1 / 1.13; background-color:#FFFEFB;
               background-image:url('assets/polaroid-paper-texture.webp'); background-size:300px 300px;
               box-shadow:0 1px 2px rgba(81,75,80,.2),0 4px 8px rgba(81,75,80,.1),0 16px 23px -10px rgba(81,75,80,.25),
                          inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.6),inset -1px -2px 1px rgba(81,75,80,.07);
               transform:rotate(-2deg); transition:transform .3s var(--e); }
.story__photo::before{ content:""; position:absolute; bottom:0; left:0; right:0; height:var(--print-foot); pointer-events:none;
                       background-image:linear-gradient(174deg,rgba(255,255,255,.2),transparent 45%,rgba(81,75,80,.035)); }
.story__photo::after{ content:""; position:absolute; z-index:1; inset:var(--print-edge) var(--print-edge) var(--print-foot); pointer-events:none;
                      border:1px solid rgba(81,75,80,.09); box-shadow:inset 0 1px 2px rgba(81,75,80,.07); }
.story__slide:nth-child(even) .story__photo{ transform:rotate(3deg); background-position:107px 53px; }
.story__slide:nth-child(3n) .story__photo{ background-position:41px 149px; }
.story__slide.is-current .story__photo{ transform:rotate(-1deg); }
.story__photo img{ position:absolute; inset:var(--print-edge) var(--print-edge) var(--print-foot); width:calc(100% - var(--print-edge) * 2); height:calc(100% - var(--print-edge) - var(--print-foot)); object-fit:cover; object-position:48% 55%; }
.story__photo--portrait{ aspect-ratio:3 / 4; }
.story__photo--portrait img{ object-fit:contain; object-position:center; }
.story__placeholder{ position:absolute; inset:var(--print-edge) var(--print-edge) var(--print-foot); display:flex; flex-direction:column; justify-content:center; align-items:center;
                     padding-top:0; border:1px solid rgba(229,189,194,.6); border-radius:0; color:var(--ink-soft);
                     background-image:linear-gradient(145deg,rgba(255,252,250,.85),rgba(243,220,215,.2)); }
.story__slot-number{ font-family:'Playfair Display',serif; font-size:34px; font-weight:400; font-style:italic; line-height:1.2; color:var(--rose-soft); }
.story__slot-label{ font-size:12px; margin-top:10px; }
.story__slot-heart{ font-family:Georgia,serif; color:var(--rose-soft); font-size:24px; line-height:1; margin-top:12px; }
.story__nav{ display:flex; align-items:center; justify-content:center; gap:5px; margin:0 26px; }
.story__arrow,.story__dot{ display:grid; place-items:center; height:44px; padding:0; border:0; background-color:transparent; color:var(--rose); cursor:pointer; }
.story__arrow{ width:44px; flex-shrink:0; border:1px solid var(--hair); border-radius:50%; font-family:Georgia,serif; font-size:20px; transition:background-color .2s,opacity .2s; }
.story__arrow:hover:not(:disabled){ background-color:var(--blush); }
.story__arrow:disabled{ opacity:.3; cursor:default; }
.story__dots{ display:flex; align-items:center; }
.story__dot{ width:27px; }
.story__dot::before{ content:""; width:5px; height:5px; border-radius:8px; background-color:var(--rose-soft); opacity:.45; transition:width .2s,opacity .2s; }
.story__dot[aria-current="true"]::before{ width:17px; background-color:var(--rose); opacity:1; }
.story__hint{ color:var(--ink-soft); font-size:12px; margin-top:7px; }
.story__hint > span{ color:var(--rose); margin-right:4px; }
.story__status{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story__caption{ position:relative; z-index:5; font-size:11px; color:var(--ink-soft); margin-top:16px; }
.story__foliage{ width:113px; left:-42px; bottom:3px; }

/* Hanging stationery calendar. The bow, loops and paper are one illustration;
   weekdays, grid and all 31 dates remain live, exact HTML. Sunday comes first. */
.date-sec{ padding:25px 18px 42px; }
.date-sec .head{ margin-bottom:15px; }
.head__t--calendar{ font-size:22px; line-height:1.35; text-wrap:balance; }
/* Photographic paper and silver rings have real alpha. Printed dates remain
   live text, placed below the satin bow, never generated into the picture. */
.cal{ position:relative; width:100%; aspect-ratio:780 / 585; margin:0 auto; }
.cal__art{ position:absolute; z-index:10; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.cal__g{ position:absolute; z-index:11; inset:38% 11.5% 16%; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
         grid-template-rows:repeat(6,minmax(0,1fr)); border:1px solid rgba(170,70,94,.13); }
.cal__g > span{ position:relative; display:grid; place-items:center; min-width:0; min-height:0; border-right:1px solid rgba(170,70,94,.13); border-bottom:1px solid rgba(170,70,94,.13);
                font-family:'Playfair Display',serif; font-size:12.5px; font-weight:500; line-height:1; }
.cal__g > span:nth-child(7n){ border-right:0; }
.cal__g > span:nth-last-child(-n+7){ border-bottom:0; }
.cal__g .cal__dw{ z-index:2; border-right:1px solid rgba(170,70,94,.13); font-size:11px; color:var(--rose); }
.cal__g > span:nth-child(8)::before,.cal__g > span:nth-child(41)::before{ content:"❄︎"; color:var(--rose-soft); opacity:.3; font-family:Georgia,serif; font-size:20px; }
.cal__d{ color:var(--ink); }
.cal__d--on{ color:var(--rose); font-style:italic; }
/* A broad heart keeps two digits clear of its taper, even on a 320px phone. */
.cal__g .cal__d--on{ font-size:clamp(10px,2.8vw,11px); padding-bottom:3px; }
.cal__ring{ position:absolute; width:calc(100% - 4px); height:calc(100% - 2px); inset:50% auto auto 50%; translate:-50% -50%; overflow:visible; pointer-events:none; }
.cal__ring path{ stroke:var(--rose); stroke-width:1.2; fill:none; }
.date__caption{ position:relative; z-index:10; margin-top:8px; font-size:11px; color:var(--ink-soft); }
.countdown-sec{ position:relative; z-index:10; margin:22px auto 0; }
.countdown__title{ font-family:'Playfair Display',serif; color:var(--rose); font-size:24px; font-style:italic; font-weight:600; margin-bottom:20px; }
.cd__g{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:start; gap:4px; max-width:300px; margin:0 auto; }
.cd__u{ min-width:0; }
.cd__n{ font-family:'Playfair Display',serif; font-size:29px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums; }
.cd__k{ font-family:'Playfair Display',serif; font-size:9px; line-height:1.3; font-weight:500; letter-spacing:.04em; margin-top:9px; color:var(--ink-soft); }
.cd__s{ font-family:'Playfair Display',serif; color:var(--rose-soft); font-size:25px; line-height:1; }
.date__foliage{ pointer-events:none; }
.date__foliage--l{ left:-41px; bottom:-9px; width:108px; }
.date__foliage--r{ right:-43px; bottom:-8px; width:142px; transform:scaleX(-1); }
.date-sec .winter-star--a{ top:195px; left:4px; font-size:29px; }
.date-sec .winter-star--b{ top:111px; right:4px; font-size:23px; }

/* Venue: arched photograph, a small name plaque, and practical directions. */
.venue-sec{ padding-top:24px; padding-bottom:33px; }
.venue__row{ position:relative; z-index:10; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; text-align:left; align-items:center; }
.venue__figure{ min-width:0; position:relative; padding-bottom:27px; }
.venue__photo{ height:105px; border:1px solid var(--hair); border-radius:38px 38px 0 0; overflow:hidden; }
.venue__photo img{ width:100%; height:100%; object-fit:cover; }
.venue__plaque{ position:absolute; left:12px; bottom:0; padding:6px 12px; background-color:#F0E3DA; border:1px solid #DFC9C1;
                box-shadow:0 3px 4px rgba(104,73,63,.08); color:var(--ink); font-family:'Playfair Display',serif; font-size:17px; font-style:italic; line-height:1.2; transform:rotate(-5deg); }
.venue__plaque span{ display:block; font-size:7px; line-height:1.5; font-style:normal; letter-spacing:.18em; text-align:center; }
.venue__name{ font-family:'Playfair Display',serif; font-size:16px; font-weight:600; }
.venue__copy{ min-width:0; }
.venue__hotel{ font-family:'Playfair Display',serif; font-size:9px; margin:3px 0 8px; }
.venue__address{ font-size:11px; }
.map-link{ display:inline-flex; align-items:center; min-height:44px; gap:9px; font-family:'Playfair Display',serif; font-size:13px; font-style:italic; color:var(--rose); text-underline-offset:4px; }
.venue__foliage{ width:75px; bottom:0; left:-27px; }
.venue-sec .winter-star--b{ top:45px; right:19px; }

/* One supplied complete sheet: paper, print, lace, bow and both ribbons
   already have their correct colors and occlusion in the same RGB image.
   The matte removes only the external tabletop; no second paper frame,
   inset crop or separate ribbon can create an interior seam. */
.agenda-sec{ padding:25px 8px 34px; }
.agenda-sheet{ position:relative; z-index:10; width:100%; aspect-ratio:2 / 3; container-type:inline-size; }
.agenda-sheet__art{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none;
                    -webkit-mask-image:url('assets/agenda-single-sheet-mask-20261018.webp');
                    -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
                    mask-image:url('assets/agenda-single-sheet-mask-20261018.webp');
                    mask-mode:alpha; mask-size:100% 100%; mask-repeat:no-repeat; }
/* Only open paper receives this small, transparent ivory tint. The original
   bitmap, external matte, illustration geometry and ink are not replaced. */
.agenda-sheet__paper-tone{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* The bitmap is the visual design; this real heading/list is its accessible,
   selectable transcript. Do not display a second set of substitute fonts. */
.agenda__transcript{ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.agenda{ list-style:none; }
.agenda__item,.agenda__copy{ display:block; }
.agenda__time,.agenda__text{ margin:0; }
.agenda__foliage{ width:135px; opacity:.82; }
.agenda__foliage--top{ top:-17px; right:-47px; transform:scaleX(-1) rotate(-5deg); }
.agenda__foliage--bottom{ bottom:-8px; left:-34px; transform:rotate(4deg); }
.agenda-sec .winter-star--a{ top:66px; left:24px; font-size:20px; opacity:.2; }
.agenda-sec .winter-star--b{ top:auto; right:24px; bottom:30px; font-size:25px; opacity:.22; }

/* The reference's grey screenshot rails and tiny printed header are outside
   this measured window: source crop x12/y118, 836 x 290 of the 860 x 426 asset.
   Swatches and outfits keep their original geometry; header is live, larger. */
.dress-sec{ padding:22px 0 21px; background-color:#FFF9F6; background-image:none; }
.dress__head{ position:relative; z-index:10; margin:0 auto 12px; padding:0 18px; text-align:center; }
.dress__head .head__t{ font-size:27px; }
.dress__subtitle{ font-family:'Playfair Display',serif; font-size:15px; line-height:1.5; font-weight:500; letter-spacing:.045em; color:var(--rose); margin-top:9px; text-wrap:balance; }
.dress__transcript{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.dress__lineup-window{ position:relative; z-index:10; width:100%; aspect-ratio:836 / 290; overflow:hidden;
                       -webkit-mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent);
                       mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent); }
.dress__lineup{ position:absolute; width:102.870814%; max-width:none; height:auto; left:-1.435407%; top:-40.689655%; }

/* Compact stationery RSVP panel, real labelled inputs and touch targets. */
.reply-sec{ padding:17px 19px 21px; }
.reply-card{ position:relative; z-index:5; padding:24px 21px 22px; border:1px solid var(--hair); border-radius:22px 3px 24px 3px;
             background-color:rgba(255,252,250,.63); box-shadow:0 0 0 3px rgba(237,201,206,.2),0 4px 12px rgba(170,70,94,.04); }
.reply-card::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(229,189,194,.65); border-radius:17px 0 19px 0; pointer-events:none; }
.reply-card .head{ margin-bottom:16px; }
.reply__deadline{ margin:9px auto 0; font-family:'IBM Plex Sans Thai',sans-serif; font-size:11px; line-height:1.8; letter-spacing:0; font-weight:300; color:var(--ink-soft); }
.reply__presence{ position:relative; z-index:10; margin-top:17px; padding-top:13px; border-top:1px solid var(--hair);
                  text-align:center; color:var(--rose); font-family:'Playfair Display',serif; font-size:12px; font-style:italic; line-height:1.6; text-wrap:balance; }
.reply__presence span{ font-style:normal; }
.reply__foliage{ width:100px; top:-3px; right:-4px; transform:rotate(180deg); opacity:.7; z-index:6; }
.form{ position:relative; z-index:10; text-align:left; }
.f{ margin-bottom:14px; min-width:0; }
.f__l{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:0; font-weight:300; }
.f__in{ width:100%; min-width:0; min-height:44px; padding:5px 0; color:var(--ink); background-color:transparent;
         border:0; border-bottom:1px solid var(--hair); border-radius:0; font-family:'IBM Plex Sans Thai',sans-serif; font-size:16px; font-weight:300; letter-spacing:0; }
.f__in:focus{ outline:none; border-bottom-color:var(--rose); box-shadow:0 1px 0 var(--rose); }
.f__in::placeholder{ color:var(--ink-soft); opacity:.7; }
.attendance{ border:0; margin-bottom:12px; min-width:0; }
.opt{ display:flex; gap:12px; }
.opt__b{ display:flex; align-items:center; gap:7px; min-height:44px; cursor:pointer; font-size:11px; }
.opt__b input{ width:16px; height:16px; accent-color:var(--rose); flex-shrink:0; }
.form__row{ display:grid; grid-template-columns:minmax(86px,.8fr) minmax(0,1.6fr); gap:16px; }
.btn{ display:flex; justify-content:center; align-items:center; gap:9px; min-height:44px; border:1px solid var(--rose-soft); border-radius:2px;
      background-color:var(--rose); color:var(--snow); font-family:'IBM Plex Sans Thai',sans-serif; font-size:12px; cursor:pointer; text-decoration:none; transition:background-color .2s; }
.btn:hover{ background-color:#933C52; }
.btn:disabled{ opacity:.55; cursor:wait; }
.form__go{ width:100%; margin-top:6px; }
.form__status{ font-size:11px; color:var(--rose); line-height:1.8; }
.form__status:not(:empty){ padding-top:12px; }
.thanks{ position:relative; z-index:10; padding:35px 0; }
.thanks__t{ font-family:'Playfair Display',serif; color:var(--rose); font-size:29px; font-style:italic; }
.thanks__b{ margin-top:12px; font-size:12px; }

/* Photograph dissolves into the snowy paper and the closing stationery. */
.closing{ position:relative; height:305px; background-color:var(--paper); overflow:hidden; }
.closing__i{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%;
             mask-image:linear-gradient(transparent 0%,#000 10%,#000 84%,transparent 100%); }
.closing__s{ position:absolute; inset:0; background-image:linear-gradient(transparent 35%,rgba(35,64,67,.08) 55%,rgba(29,55,48,.3) 76%,transparent 100%); }
.closing__foliage{ width:154px; left:-38px; bottom:-18px; }
.closing__t{ position:absolute; left:0; right:0; bottom:66px; text-align:center; z-index:10; color:var(--snow); text-shadow:0 1px 7px rgba(45,35,38,.55); }
.closing__n{ font-family:'Playfair Display',serif; font-style:italic; font-size:30px; font-weight:500; }
.closing__d{ margin-top:7px; font-family:'Playfair Display',serif; font-size:11px; line-height:1.5; letter-spacing:.1em; font-weight:500; }
.foot{ position:relative; padding:0 26px 24px; text-align:center; background-color:var(--paper); }
.foot__bow{ position:relative; width:176px; height:72px; margin:-4px auto 10px; overflow:hidden; mix-blend-mode:multiply; z-index:5;
            mask-image:radial-gradient(ellipse at 50% 25%,#000 42%,transparent 76%); }
.foot__bow img{ position:absolute; width:250px; height:auto; max-width:none; left:-37px; top:-3px; }
.foot__thank{ position:relative; z-index:10; font-family:'Playfair Display',serif; font-size:9px; line-height:1.8; letter-spacing:.12em; font-weight:500; }
.foot > .heart{ margin-top:11px; font-size:13px; }
.foot .winter-star--a{ top:72px; left:36px; font-size:24px; }
.foot .winter-star--b{ top:93px; right:32px; font-size:21px; }
.tel{ position:relative; z-index:10; display:flex; justify-content:center; gap:28px; margin:23px auto 0; padding-top:14px; border-top:1px solid rgba(229,189,194,.5); }
.tel__item{ min-height:44px; display:flex; flex-direction:column; justify-content:center; text-decoration:none; }
.tel__name{ font-size:9px; color:var(--ink-soft); }
.tel__number{ font-family:'Playfair Display',serif; font-size:11px; line-height:1.8; letter-spacing:.05em; }
.tel__item:hover{ color:var(--rose); }

/* Three depths: tiny powder, pearl flakes and complete six-arm crystals.
   Above opaque art, but a softer central lane keeps the invitation readable.
   Native compositor motion only; no continuously running JavaScript loop. */
.snow{ display:none; position:sticky; top:0; height:0; z-index:20; pointer-events:none; }
.snow__symbols{ position:absolute; width:0; height:0; overflow:hidden; }
.snow__in{ --snow-height:100dvh; position:absolute; inset:0 0 auto; height:var(--snow-height); overflow:hidden;
           -webkit-mask-image:linear-gradient(to right,#000 0%,#000 18%,rgba(0,0,0,.38) 38%,rgba(0,0,0,.38) 62%,#000 82%,#000 100%);
           mask-image:linear-gradient(to right,#000 0%,#000 18%,rgba(0,0,0,.38) 38%,rgba(0,0,0,.38) 62%,#000 82%,#000 100%); }
.motion .snow{ display:block; }
.sf{ position:absolute; top:-32px; left:var(--l); width:var(--s); height:var(--s); opacity:0;
     animation:snowfall var(--d) linear var(--t) infinite; }
.sf__body{ display:block; width:100%; height:100%; animation:snowSway var(--sd) ease-in-out var(--st) infinite alternate; }
.sf--far .sf__body,.sf--mid .sf__body{ border-radius:50%;
     background-image:radial-gradient(circle at 35% 30%,#FFFFFF 0 30%,#EFE0E7 100%);
     box-shadow:0 0 0 .7px rgba(170,114,139,.28),0 1px 2px rgba(151,114,133,.12); }
.sf--far .sf__body{ opacity:.8; }
/* All six arms are complete, with 6 viewBox units of safety around the tips.
   No source-image clipping or contrast/brightness filters. */
.sf--near .sf__body{ color:#C5D5DF; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.sf--near-alt .sf__body{ stroke-width:2; }
.snow--paused .sf,.snow--paused .sf__body{ animation-play-state:paused; }
/* Fade only after the whole crystal is inside, and before it reaches an edge. */
@keyframes snowfall{ 0%{ transform:translate3d(0,-24px,0); opacity:0; } 12%{opacity:0;} 20%{opacity:var(--o);} 80%{opacity:var(--o);} 88%{opacity:0;} 100%{transform:translate3d(var(--dx),calc(var(--snow-height) + 64px),0);opacity:0;} }
@keyframes snowSway{ from{transform:translate3d(calc(var(--sw) * -1),0,0) rotate(calc(var(--r) * -1));} to{transform:translate3d(var(--sw),0,0) rotate(var(--r));} }
@media (min-width:431px){ .snow__in{ --snow-height:max(560px,calc(100dvh - 56px)); } }
@keyframes riseIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
@keyframes write{ from{clip-path:inset(-14% 100% -14% 0);} to{clip-path:inset(-14% -15% -14% 0);} }
@keyframes softPulse{ from{opacity:.6;} to{opacity:1;} }
.motion .hero__content > *{ animation:riseIn .9s var(--e) .2s both; }
.motion .hero__content .hero__intro{ animation-delay:.35s; }
.motion .hero__content .names{ animation-delay:.55s; }
.motion .hero__content .hero__details{ animation-delay:1s; }
.motion .nm--1{ animation:write 1.2s var(--e) .5s both; }
.motion .nm--2{ animation:write 1.2s var(--e) .9s both; }
.opening-active.motion .hero__content > *,.opening-active.motion .nm{ animation-play-state:paused; }
.motion .rv [data-rv]{ opacity:0; transition:opacity .7s var(--e),transform .7s var(--e); transition-delay:calc(var(--i,0) * 55ms); }
.motion .rv [data-rv="up"]{ transform:translateY(12px); }
.motion .rv [data-rv="scale"]{ transform:scale(1.025); }
.motion .rv.in [data-rv]{ opacity:1; }
.motion .rv.in [data-rv="up"]{ transform:translateY(0); }
.motion .rv.in [data-rv="scale"]{ transform:scale(1); }
/* Fade the calendar's layers individually: opacity on their common parent
   would isolate multiply and briefly restore the white backdrop on entry. */
.motion .rv .cal[data-rv="fade"]{ opacity:1; }
.motion .rv .cal > *{ opacity:0; transition:opacity .7s var(--e); transition-delay:calc(var(--i,0) * 55ms); }
.motion .rv.in .cal > *{ opacity:1; }
/* Fade never owns transform: botanical positioning and parallax keep it. */
.motion .cd__n.tk{ animation:softPulse .35s ease; }
@media (max-width:430px){
  html{ overflow-x:clip; }
  .stage{ display:block; padding:0; background-color:var(--paper); }
  .frame{ width:100%; height:auto; min-height:0; overflow:visible; box-shadow:none; }
  .opening{ top:0; width:100%; height:100dvh; min-height:0; }
}
@media (max-width:360px){
  .hero{ padding-left:62px; padding-right:62px; }
  .story__caption{ font-size:10px; }
  .story__foliage{ width:97px; left:-41px; }
  .venue__row{ gap:13px; }
  .venue__name{ font-size:14px; }
  .venue__address{ font-size:10px; }
  .dress__head .head__t{ font-size:25px; }
  .dress__subtitle{ font-size:14px; }
  .reply-sec{ padding-left:14px; padding-right:14px; }
  .reply-card{ padding-left:18px; padding-right:18px; }
  .opt{ gap:9px; }
  .opt__b{ font-size:10px; }
  .form__row{ grid-template-columns:78px minmax(0,1fr); gap:12px; }
  .f__l{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .opening__glow,.opening__butterflies{ display:none !important; }
  html,.frame{ scroll-behavior:auto; }
  .story__gallery *{ transition:none !important; }
  .motion *,.motion *::before,.motion *::after{ animation:none !important; transition:none !important; }
  .motion .rv [data-rv]{ opacity:1 !important; transform:none !important; }
  .motion .rv .cal > *{ opacity:1 !important; }
  .motion .nm{ clip-path:none !important; }
  .snow{ display:none !important; }
}