@font-face{font-family:'Brittany Signature Embedded';src:url('assets/brittany-signature.ttf?v=38') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Kaixin Jiuxiao Embedded';src:url('assets/kaixin-jiuxiao.ttf?v=40') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#fcfbf8;--ink:#614d63;--muted:#7d717b;--apricot:#c99066;--hand:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;--serif:'Noto Serif SC','Songti SC',serif;--signature:'Brittany Signature Embedded',cursive}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif)}button{font:inherit}button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.opening{position:relative;min-height:760px;height:100svh;overflow:hidden;isolation:isolate}.scene{position:absolute;inset:0;max-width:520px;margin:auto;transform-origin:50% 62%;transition:opacity 1.5s ease,transform 2.4s cubic-bezier(.2,.65,.25,1)}.botanical{position:absolute;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:multiply}.names{position:absolute;z-index:3;top:10%;left:5%;width:90%;text-align:center;transition:opacity 1.3s,transform 1.5s}h1{font-family:var(--hand);font-size:clamp(27px,7.2vw,34px);font-weight:400;letter-spacing:.10em;margin:0;line-height:1.5}h1 span{font-family:var(--serif);font-size:16px;color:var(--apricot);vertical-align:middle;margin:0 .1em}.signature{font-family:var(--signature);font-weight:400;font-size:clamp(43px,11vw,53px);line-height:1.1;margin:2px 0 12px}.rule{width:25px;height:1px;background:#9d8990;margin:15px auto}.date{font-size:14px;letter-spacing:.22em;margin:0 0 8px}.venue{font-size:13px;letter-spacing:.08em;margin:0}.mirror-stage{position:absolute;top:35%;left:13%;width:74%;height:53%;perspective:1600px;transform-style:preserve-3d;transition:transform 2.2s cubic-bezier(.25,.1,.25,1)}.mirror-base,.mirror-lid,.lid-front,.lid-back{position:absolute;inset:0}.mirror-base>img,.lid-front img,.lid-back img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.mirror-base{filter:drop-shadow(0 6px 9px #76634713)}.mirror-window{position:absolute;left:18%;right:18%;top:20%;bottom:15%;border-radius:50%;overflow:hidden;background:#f5f0e8;display:grid;place-items:center}.pearl-light{position:absolute;inset:-20%;background:radial-gradient(ellipse at 35% 25%,#ffffffec,transparent 38%),radial-gradient(ellipse at 72% 65%,#e8dcebe0,transparent 40%),linear-gradient(130deg,#f8f6ef,#eee9dce0,#f9f8f5);transform:scale(1.1)}.mirror-window p{z-index:1;font-family:var(--signature);font-size:42px;opacity:0;transition:opacity 1.5s}.mirror-lid{transform-origin:16% 50%;transform-style:preserve-3d;transition:transform 3s cubic-bezier(.45,0,.22,1);will-change:transform}.lid-front,.lid-back{backface-visibility:hidden}.lid-back{transform:rotateY(180deg)}.lid-back img{filter:saturate(.3) brightness(1.025)}.opening.is-open .mirror-lid{transform:rotateY(-142deg)}.opening.is-open .mirror-window p{opacity:.8}.opening.is-open .mirror-stage{transform:translateX(9%)}.opening.is-arriving .scene{opacity:0;transform:scale(1.45)}.opening.is-arriving .names{opacity:0;transform:translateY(-12px)}.invitation{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity 2s ease,visibility 0s 2s;background:#f0ecf1}.opening.is-arriving .invitation{opacity:1;visibility:visible;transition:opacity 2s ease}.photo-space{position:absolute;inset:0;background:radial-gradient(ellipse at 24% 18%,#fff 0,transparent 50%),linear-gradient(150deg,#eae5ec,#faf9f6 55%,#e8e4e9);background-size:cover;background-position:50% 35%}.letter-botanicals{position:absolute;width:min(100%,600px);height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.7}.vellum{position:relative;width:min(84%,430px);margin:60px 0;min-height:510px;padding:48px 25px 32px;text-align:center;background:#ffffff8c;border:1px solid #fff9;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 15px 55px #65506c09;opacity:0;transform:translateY(18px);transition:opacity 1.5s,transform 1.8s}.opening.is-reading .vellum{opacity:1;transform:translateY(0)}.eyebrow{font-size:12px;letter-spacing:.24em;margin:0 0 28px}h2{font-family:var(--hand);font-size:34px;font-weight:400;margin:0 0 30px;letter-spacing:.12em}.letter-copy{font-size:16px;line-height:2}.letter-copy p{margin:0 0 22px}.letter-date{font-family:var(--hand);font-size:23px;letter-spacing:.12em;margin:33px 0 10px}.letter-venue{font-size:14px;line-height:1.8;margin:0 0 30px}.vellum .signature{font-size:46px}.controls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:24px;right:24px;z-index:20;display:flex;justify-content:space-between}.controls button{border:0;background:transparent;color:var(--muted);padding:10px 4px;font-size:12px;cursor:pointer;min-height:44px}.controls #replay{margin-left:auto}.controls span{font-size:18px;margin-left:5px}button[hidden]{display:none}.opening.is-reading #skip{visibility:hidden}@media(min-width:800px){.scene{max-width:520px}.opening:before,.opening:after{content:'';position:absolute;top:9%;bottom:9%;width:1px;background:#c8bec126}.opening:before{left:calc(50% - 300px)}.opening:after{right:calc(50% - 300px)}}@media(max-height:740px){.opening{min-height:650px}.names{top:6%}.mirror-stage{top:34%;height:55%}.vellum{padding-top:28px;min-height:480px;margin:45px 0}h2{margin-bottom:20px}.letter-copy p{margin-bottom:16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Both mirror surfaces share the source artwork aspect ratio. */
.mirror-stage{height:auto;aspect-ratio:1122/1402;mix-blend-mode:multiply}.mirror-window{left:21%;right:23%;top:21%;bottom:19%}.lid-front img,.lid-back img{position:absolute;inset:0}.lid-front .unwrapped{opacity:0;transition:opacity 1.5s ease}.opening.is-unwrapped .unwrapped{opacity:1}@media(max-height:740px){.mirror-stage{height:auto;width:65%;left:17.5%;top:34%}}

.mirror-stage{width:90%;left:5%;top:32%;max-height:none}.mirror-window{left:22%;right:23%;top:21%;bottom:19%}@media(max-height:740px){.mirror-stage{width:80%;left:10%;top:33%}}

/* Mask each physical surface before 3D compositing. Blend modes do not remove backgrounds. */
.mirror-stage,.mirror-base>img,.lid-front img,.lid-back img{mix-blend-mode:normal}
.mirror-base>img,.lid-back img,.lid-front .unwrapped{
 -webkit-mask-image:url('assets/mirror-bare-mask.svg');mask-image:url('assets/mirror-bare-mask.svg');
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha;
}
.lid-front>img:first-child{
 -webkit-mask-image:url('assets/mirror-wrapped-mask.svg');mask-image:url('assets/mirror-wrapped-mask.svg');
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha;
 transition:opacity 1.5s ease;
}
.opening.is-unwrapped .lid-front>img:first-child{opacity:0}

/* True volumetric scene; no rotating image planes or blend-mode cutouts. */
.mirror-stage{top:30%;left:-8%;width:116%;height:64%;aspect-ratio:auto;perspective:none;transform-style:flat;mix-blend-mode:normal;transition:none}
.opening.is-open .mirror-stage{transform:none}
#mirror-canvas{display:block;width:100%;height:100%;background:transparent}
@media(max-height:740px){.mirror-stage{top:30%;left:-8%;width:116%;height:64%}}

/* The photo aperture is the visual anchor; opening never recenters or zooms it. */
.opening.is-open .mirror-stage{transform:none}
.opening.is-arriving .scene{transform:none}

.enter{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:8;border:0;border-bottom:1px solid #9d899055;background:transparent;color:var(--ink);font-family:var(--hand);font-size:16px;letter-spacing:.12em;padding:12px 18px;min-height:44px;cursor:pointer;animation:enter-in 1s ease both}
@keyframes enter-in{from{opacity:0}to{opacity:1}}
.opening.is-arriving .enter{display:none}
.vellum{padding-top:66px;padding-bottom:52px;isolation:isolate}
.lace-edge{position:absolute;left:0;width:100%;height:76px;background:url('assets/letter-lace.png') center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none;opacity:.95}
.lace-top{top:-13px;transform:rotate(180deg)}.lace-bottom{bottom:-13px}
@media(max-height:740px){.vellum{padding-top:53px;padding-bottom:42px}.lace-edge{height:60px}}

/* A single, non-scrolling screen; the letter alone can scroll at enlarged text sizes. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
.opening{position:fixed;inset:0 0 auto;height:100svh;height:var(--screen-height,100svh);min-height:0}
.scene{display:grid;grid-template-rows:auto minmax(0,1fr) 48px;padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(32px,env(safe-area-inset-bottom,0px));gap:4px}
.names{position:relative;top:auto;left:auto;width:100%;padding:0 20px;grid-row:1}
.names h1{font-size:clamp(33px,8.6vw,41px);letter-spacing:.05em;line-height:1.25}
.names .signature{font-size:clamp(42px,11vw,53px);margin:0 0 4px}
.names .rule{margin:8px auto}
.names .venue{line-height:1.6}
.mirror-stage{position:relative;grid-row:2;top:auto;left:-8%;width:116%;height:100%;min-height:0;aspect-ratio:auto}
.enter{position:relative;grid-row:3;align-self:start;justify-self:center;left:auto;bottom:auto;transform:none;margin:0;z-index:8}
.invitation{padding:max(18px,env(safe-area-inset-top,0px)) 0 max(38px,env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.vellum{width:min(86%,430px);min-height:0;margin:auto;padding:48px 25px 38px}
.vellum .eyebrow{margin-bottom:20px}.vellum h2{margin-bottom:24px}
.letter-copy{line-height:1.9}.letter-copy p{margin-bottom:18px}
.letter-date{margin-top:24px}.letter-venue{margin-bottom:23px}
.controls{bottom:max(8px,env(safe-area-inset-bottom,0px))}
@media(max-height:700px){.scene{gap:2px;grid-template-rows:auto minmax(0,1fr) 44px}.names h1{font-size:34px}.names .signature{font-size:40px}.names .rule{margin:6px auto}.names .date{margin-bottom:4px}.vellum{padding:40px 22px 30px}.vellum h2{font-size:29px;margin-bottom:18px}.letter-copy p{margin-bottom:14px}.letter-date{margin-top:18px}.letter-venue{margin-bottom:18px}.vellum .signature{font-size:40px}}

/* One continuous embroidered border, with a transparent center for live text. */
.vellum{border:0;background:rgba(255,255,255,.68);box-shadow:0 8px 34px #65506c0a;padding-left:38px;padding-right:38px}
.letter-lace-frame{position:absolute;inset:-22px -20px;width:calc(100% + 40px);height:calc(100% + 44px);pointer-events:none;filter:drop-shadow(0 1px 1px #51435b16);z-index:-1}
@media(max-height:700px){.vellum{padding-left:31px;padding-right:31px}.letter-lace-frame{inset:-16px -16px;width:calc(100% + 32px);height:calc(100% + 32px)}}
/* The single next-step prompt is readable UI, separate from the handwritten names. */
.enter{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;font-size:16px;font-weight:500;letter-spacing:.08em;padding:12px 26px;min-height:46px;border:1px solid #8b71853d;border-radius:28px;background:rgba(255,255,255,.91);color:#59435d;box-shadow:0 3px 16px #59435d12;animation:enter-in 1.2s ease both;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.enter:hover{background:#fff;border-color:#8b718578}
.enter:active{background:#f6f0f7}
.vellum{padding-top:60px;padding-bottom:48px}
@media(max-height:700px){.vellum{padding-top:50px;padding-bottom:42px}}

/* The entire screen is the tap target; only a quiet instruction is visible. */
.enter{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:10;cursor:pointer;animation:enter-in 1.2s ease both}
.enter:hover,.enter:active{background:transparent;border:0}
.enter span{position:absolute;left:0;right:0;bottom:max(55px,env(safe-area-inset-bottom,0px));text-align:center;color:#59435d;font-size:15px;font-weight:400;letter-spacing:.1em;text-shadow:0 1px 5px #fff,0 0 12px #fff}
.letter-lace-frame{z-index:0;filter:drop-shadow(0 1px 1px #51435b30)}
.vellum>p,.vellum>h2,.vellum>.letter-copy{position:relative;z-index:1}

/* The photo grows from the centered mirror aperture into the full-screen backdrop. */
.invitation{clip-path:ellipse(21% 28% at 50% var(--photo-origin-y,55%));transition:opacity 1.4s ease,clip-path 2.2s cubic-bezier(.22,.61,.36,1),visibility 0s 2.2s}
.opening.is-arriving .invitation{clip-path:ellipse(150% 150% at 50% var(--photo-origin-y,55%));transition:opacity 1.4s ease,clip-path 2.2s cubic-bezier(.22,.61,.36,1)}
.photo-space{transform:scale(1.025);transition:transform 3s ease}
.opening.is-arriving .photo-space{transform:scale(1)}

/* Fine, lightly irregular needlelace follows the vellum edge without a heavy shadow. */
.letter-lace-frame{inset:-9px -9px;width:calc(100% + 18px);height:calc(100% + 18px);filter:none;opacity:.94}
.vellum{background:rgba(255,255,255,.60);box-shadow:0 7px 28px #65506c08;border-radius:2px;padding-left:30px;padding-right:30px}
@media(max-height:700px){.letter-lace-frame{inset:-7px -7px;width:calc(100% + 14px);height:calc(100% + 14px)}.vellum{padding-left:26px;padding-right:26px}}

/* The reference card itself supplies the rounded paper and irregular cutwork silhouette. */
.vellum{width:min(94vw,440px,calc((var(--screen-height,100svh) - 78px)*.7199));aspect-ratio:1064/1478;min-height:0;margin:auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.letter-lace-frame{inset:0;width:100%;height:100%;object-fit:contain;opacity:1;filter:drop-shadow(0 3px 7px #574c5a0b)}
.letter-content{position:absolute;inset:16% 19% 13%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.vellum .letter-content p,.vellum .letter-content h2{margin:0}
.vellum .eyebrow{font-size:11px;letter-spacing:.16em}
.vellum h2{font-size:34px;line-height:1.2;letter-spacing:.08em}
.vellum .letter-copy{font-size:16px;line-height:1.7}
.vellum .letter-copy p+p{margin-top:14px}
.vellum .letter-date{font-size:24px;line-height:1.25}
.vellum .letter-venue{font-size:13px;line-height:1.7}
.vellum .signature{font-size:40px;line-height:1.1;white-space:nowrap}
@media(max-height:700px){.letter-content{gap:9px}.vellum h2{font-size:30px}.vellum .signature{font-size:36px}.vellum .letter-copy{line-height:1.55}.vellum .letter-copy p+p{margin-top:9px}}

/* Original wedding photograph remains unfiltered beneath the lace card. */
.photo-space{background-position:55% 100%}
.opening.is-arriving .letter-botanicals{opacity:.18}

/* One photograph grows from the measured mirror aperture into the background. */
.invitation{clip-path:none;background:transparent;transition:opacity .72s ease,visibility 0s 2.1s}
.opening.is-arriving .invitation{clip-path:none;transition:opacity .72s ease}
.opening.is-arriving .scene{transition:opacity 1.6s ease;opacity:0}
.photo-space{inset:auto;left:var(--photo-left,28%);top:var(--photo-top,30%);width:var(--photo-width,44%);height:var(--photo-height,45%);border-radius:50%;background-repeat:no-repeat;background-size:var(--photo-start-size,cover);background-position:var(--photo-start-position,center);transform:none;transition:left 2.1s cubic-bezier(.22,.61,.36,1),top 2.1s cubic-bezier(.22,.61,.36,1),width 2.1s cubic-bezier(.22,.61,.36,1),height 2.1s cubic-bezier(.22,.61,.36,1),border-radius 2.1s ease,background-size 2.1s cubic-bezier(.22,.61,.36,1),background-position 2.1s cubic-bezier(.22,.61,.36,1)}
.opening.is-arriving .photo-space{left:0;top:0;width:100%;height:100%;border-radius:0;background-size:var(--photo-end-size,cover);background-position:var(--photo-end-position,center);transform:none}
/* Warm translucent paper, with a restrained botanical accent from the existing artwork. */
.letter-lace-frame{opacity:.89;filter:sepia(.12) saturate(.72) brightness(.96) drop-shadow(0 4px 12px #33233818)}
.vellum{color:#594653;transition:opacity 1.05s ease,transform 1.25s cubic-bezier(.22,.61,.36,1)}
.letter-content{gap:10px}
.letter-ornament{width:90px;height:38px;overflow:hidden;flex-shrink:0;mix-blend-mode:multiply;opacity:.62;position:relative}
.letter-ornament img{position:absolute;bottom:0;left:0;width:90px;height:135px;object-fit:cover}
.vellum .eyebrow{color:#8a6d67}
.vellum .letter-date{padding-top:9px;border-top:1px solid #aa8b723d}
@media(max-height:700px){.letter-ornament{height:25px;width:70px}.letter-ornament img{width:70px;height:105px}.letter-content{gap:7px}}

/* Clear reading hierarchy; the paper is translucent but the type stays fully opaque. */
.letter-lace-frame{opacity:.97;filter:sepia(.10) saturate(.74) brightness(.98) drop-shadow(0 4px 12px #33233818)}
.letter-content{inset:17% 19% 14%;gap:0;color:#493947}
.letter-heading{width:100%;flex-shrink:0}
.vellum .letter-heading .eyebrow{font-size:12px;line-height:1.3;letter-spacing:.12em;color:#79635e}
.vellum .letter-heading h2{font-size:34px;line-height:1.2;letter-spacing:.06em;margin-top:7px}
.vellum .letter-copy{font-size:16px;line-height:1.75;margin-top:20px}
.vellum .letter-copy p+p{margin-top:8px}
.letter-event{margin-top:20px;padding-top:12px;border-top:1px solid #aa8b7252;min-width:65%;flex-shrink:0}
.vellum .letter-event .letter-date{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:.12em;line-height:1.3;border:0;padding:0;color:#493947}
.vellum .letter-event .letter-venue{margin-top:8px;font-size:14px;line-height:1.65;letter-spacing:.04em}
.vellum .letter-content>.signature{font-size:37px;margin-top:20px;color:#675063}
.letter-ornament{position:absolute;top:-20px;width:64px;height:22px;opacity:.45}
.letter-ornament img{width:64px;height:96px}
@media(max-height:700px){.vellum .letter-heading h2{font-size:30px}.vellum .letter-copy{margin-top:14px;line-height:1.6}.letter-event{margin-top:14px;padding-top:9px}.vellum .letter-event .letter-venue{margin-top:6px}.vellum .letter-content>.signature{font-size:34px;margin-top:14px}}
@media(max-height:560px){.letter-content{overflow-y:auto;justify-content:flex-start;padding:4px 0}.letter-ornament{display:none}}

/* French garden stationery: clear handwritten kai and sparse lilac/apricot details. */
.names h1{font-size:clamp(28px,8.2vw,36px);font-weight:400;letter-spacing:.055em}
.vellum .letter-heading h2{font-family:var(--hand);font-size:31px;font-weight:400;letter-spacing:.055em;color:#614b66}
.card-garden-detail{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.letter-content{z-index:2}
.vellum .letter-heading .eyebrow{color:#98653f;font-size:11px;letter-spacing:.13em}
.letter-event{border-top-color:#c995687a}
.vellum .letter-content>.signature{color:#715573}
.letter-ornament{opacity:.58}
@media(max-height:700px){.names h1{font-size:31px}.vellum .letter-heading h2{font-size:29px}}

/* Floral marks belong to the typography and event rule, away from the lace. */
.letter-ornament{display:none}
.vellum .letter-heading .eyebrow{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.vellum .letter-heading .eyebrow::before{content:"";width:14px;height:14px;flex:0 0 14px;background:url('assets/letter-flower-mark.svg') center/contain no-repeat}
.letter-event{position:relative;border-top:0;padding-top:23px}
.letter-event::before{content:"";position:absolute;left:50%;top:-3px;transform:translateX(-50%);width:min(190px,110%);height:25px;background:url('assets/letter-flower-rule.svg') center/contain no-repeat;pointer-events:none}
@media(max-height:700px){.letter-event{padding-top:21px}}

/* A miniature crossed flower sprig joins the names like the original multiplication mark. */
.names h1 .names-floral-link{display:inline-flex;width:25px;height:32px;margin:0 1px;align-items:center;justify-content:center;vertical-align:-4px;line-height:0}
.names-floral-link img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:360px){.names h1 .names-floral-link{width:22px;height:28px;margin:0}}

/* The photo letter becomes the first page of a continuous, naturally scrolling invitation. */
.invitation{display:block;padding:0;overflow:hidden;overscroll-behavior-y:contain;scrollbar-width:none}
.invitation::-webkit-scrollbar{display:none}
.opening.is-reading .invitation{overflow-y:auto;touch-action:pan-y}
.invitation-hero{position:relative;height:var(--screen-height,100svh);min-height:560px;display:grid;place-items:center;padding:18px 0 38px;isolation:isolate}
.invitation-hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#fcfbf8);z-index:3;pointer-events:none}
.invitation-hero .vellum{z-index:2}
.opening.is-reading .invitation-hero .vellum{opacity:var(--letter-scroll-opacity,1);transform:translateY(var(--letter-scroll-rise,0px))}
.invitation-hero .letter-botanicals{inset:0;left:50%;transform:translateX(-50%);pointer-events:none}
.long-letter{position:relative;background:#fcfbf8;color:#584558;padding:8px 0 0;min-height:100vh}
.long-letter h2{font-family:var(--hand);font-size:29px;font-weight:400;line-height:1.5;letter-spacing:.035em;margin:10px 0 18px}
.long-letter p{font-size:16px;line-height:2;margin:0 0 20px}
.long-letter .chapter-label{font-family:var(--serif);font-size:12px;color:#98653f;letter-spacing:.15em;line-height:1.5;margin-bottom:12px}
.letter-welcome,.garden-venue{max-width:520px;margin:auto;padding:50px 30px 65px;text-align:center}
.long-letter .signature{font-family:var(--signature);font-size:40px;line-height:1.2;margin:28px 0 0;color:#735874}
.story-flower-rule{width:160px;height:27px;display:block;margin:0 auto 24px}
.story-photo{max-width:510px;margin:0 auto 70px;padding:0 28px}
.story-photo>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 65%;border-radius:110px 110px 0 0}
.story-photo figcaption{font-family:var(--signature);font-size:29px;color:#877087;text-align:right;padding:14px 4px}
.wedding-day{position:relative;max-width:570px;margin:auto;padding:55px 30px 60px;background:#f0ebf2;text-align:center;overflow:hidden}
.lace-seam{height:40px;position:absolute;top:0;left:0;right:0;background:url('assets/reference-card.png') center top/300px auto repeat-x;opacity:.65;pointer-events:none}
.long-letter .day-date{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:#745876;margin-bottom:42px}
.day-moment{display:flex;gap:15px;align-items:flex-start;text-align:left;max-width:330px;margin:0 auto;position:relative;z-index:1}
.day-moment .moment-number{font-family:var(--signature);font-size:37px;color:#b78055;line-height:1}
.day-moment h3{font-family:var(--hand);font-size:26px;font-weight:400;margin:3px 0 8px}
.day-moment .moment-period{font-size:12px;letter-spacing:.06em;color:#846087;margin:0;line-height:1.6}
.day-moment p{font-size:15px;line-height:1.8;margin:0}
.celebration-art{width:calc(100% + 30px);margin:20px -15px;mix-blend-mode:multiply}
.celebration-art img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.evening{margin-left:auto;margin-right:0;max-width:285px}
.portrait-second{margin-top:65px;max-width:470px;padding-left:45px;padding-right:35px}
.portrait-second>img{border-radius:0;aspect-ratio:4/5}
.garden-venue{position:relative;padding-bottom:80px}
.garden-venue .closing-note{margin-top:32px}
.garden-venue .lace-seam{top:auto;bottom:0;transform:rotate(180deg)}
.opening.is-reading .controls{pointer-events:none;opacity:var(--replay-scroll-opacity,1)}
.opening.is-reading .controls button{pointer-events:auto}
.story-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.scroll-motion .story-reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.3s ease}.scroll-motion .story-reveal.is-visible{opacity:1;transform:none}}
@media(min-width:700px){.long-letter h2{font-size:34px}.letter-welcome{padding-top:70px}.wedding-day{padding-left:65px;padding-right:65px}}
@media(max-height:560px){.invitation-hero{min-height:560px}}
.long-letter .detail-pending{font-size:14px;color:#897c83;line-height:1.8}
.mini-map-placeholder{margin:30px auto 18px;min-height:240px;border:1px solid #c4b4ca;border-radius:100px 100px 3px 3px;display:flex;flex-direction:column;justify-content:center;padding:30px;background:linear-gradient(145deg,#f0ebf25c,#faf6ef);outline:1px solid #d4c8cf;outline-offset:-9px}
.mini-map-placeholder span{font-size:12px;letter-spacing:.18em;color:#ad805d}.mini-map-placeholder h3{font:27px var(--hand);margin:20px 0 8px}.mini-map-placeholder p{font-size:14px;color:#8d7e8a;margin:0}
.dress-code{text-align:center;max-width:520px;margin:auto;padding:0 30px 65px}
.colour-ribbons{display:flex;justify-content:center;gap:24px;margin:30px auto}
.colour-ribbons div{display:flex;flex-direction:column;align-items:center;gap:13px;font-size:14px}.colour-ribbons i{display:block;width:48px;height:78px;background:linear-gradient(100deg,#ffffff33,transparent 30%,#ffffff30 55%,#0000000b),var(--swatch);clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%)}
.rsvp-section{position:relative;max-width:540px;margin:auto;padding:65px 32px 80px;background:#f2edf3;text-align:center}
.rsvp-section form{text-align:left;margin:32px auto;max-width:360px}.rsvp-section label{display:block;font-size:15px;line-height:1.6;margin:0 0 22px}.rsvp-section input:not([type=radio]),.rsvp-section textarea{width:100%;font:16px var(--serif);color:#584558;border:0;border-bottom:1px solid #bdacbf;background:#ffffff75;border-radius:0;padding:12px 10px;margin-top:8px}.rsvp-section textarea{resize:vertical;min-height:90px}.rsvp-section input:focus,.rsvp-section textarea:focus{outline:2px solid #b999b9;outline-offset:2px}.rsvp-section fieldset{border:0;padding:0;margin:0 0 24px}.rsvp-section legend{font-size:15px;margin-bottom:10px}.rsvp-section .attendance-choice{display:inline-flex;gap:6px;align-items:center;margin:0 15px 8px 0}.attendance-choice input{accent-color:#816287;width:17px;height:17px}.rsvp-preview{width:100%;padding:14px;border:1px solid #987799;background:#826388;color:white;font:16px var(--serif);cursor:pointer}.long-letter .draft-notice{font-size:13px;color:#7e647d;line-height:1.7}.long-letter #rsvp-result{font-size:15px;margin-top:20px;line-height:1.8}.rsvp-section .signature{font-size:35px}.rsvp-section [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.opening.is-reading .invitation-hero .vellum{transform:none}}
.replay-ending{margin-top:30px;border:0;background:transparent;color:#846c84;font:14px var(--serif);padding:12px;cursor:pointer}

.names h1 .names-floral-link{width:39px;height:35px;vertical-align:-5px;overflow:hidden;mix-blend-mode:multiply}
.names-floral-link img{width:46px;height:46px;max-width:none;flex-shrink:0;object-fit:contain}
@media(max-width:360px){.names h1 .names-floral-link{width:32px;height:31px}.names-floral-link img{width:40px;height:40px}}

/* Fine handwritten lettering follows the approved stationery reference. */
:root{--hand:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;--signature:'Brittany Signature Embedded',cursive}
.names h1{font-family:var(--hand);font-size:clamp(28px,7.7vw,33px);font-weight:400;letter-spacing:.08em;line-height:1.35;color:#715b72}
.names .signature{font-size:clamp(42px,11.3vw,50px);line-height:1.25;margin-top:4px;color:#715b72}
.vellum .letter-heading h2{font-size:32px;letter-spacing:.065em;font-weight:400;color:#665068}
.vellum .letter-content>.signature{font-size:41px;line-height:1.2}
.long-letter h2{font-size:31px;letter-spacing:.055em}.long-letter .signature{font-size:43px;line-height:1.3}
.story-photo figcaption{font-size:32px;line-height:1.3}.day-moment .moment-number{font-size:36px}
@media(max-height:700px){.names h1{font-size:29px}.names .signature{font-size:44px}.vellum .letter-heading h2{font-size:29px}.vellum .letter-content>.signature{font-size:37px}}

.names h1{font-size:clamp(27px,7.4vw,31px);letter-spacing:.10em}.names .signature{font-size:clamp(39px,10.5vw,46px)}
@media(max-height:700px){.names h1{font-size:28px}.names .signature{font-size:42px}}

/* Genuine alpha assets remain clean against every section background. */
.names h1 .names-floral-link,.celebration-art,.botanical,.letter-botanicals{mix-blend-mode:normal}

/* Contain the entire rings asset and lower the opening text without adding page overflow. */
:root{--signature:'Brittany Signature Embedded',cursive}
.names h1 .names-floral-link{width:40px;height:40px;overflow:visible;vertical-align:-8px;margin:0 1px}
.names-floral-link img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;flex-shrink:1}
.names{padding-top:clamp(18px,3.6svh,34px)}
.names .signature{font-size:clamp(38px,10.4vw,47px);line-height:1.32;margin-top:0;color:#715b72}
.vellum .letter-content>.signature{font-size:30px;line-height:1.4}
.long-letter .signature{font-size:32px;line-height:1.5}
.story-photo figcaption{font-size:25px;line-height:1.5}
.rsvp-section .signature{font-size:28px}
@media(max-height:700px){.names{padding-top:12px}.names .signature{font-size:40px}.vellum .letter-content>.signature{font-size:28px}}
@media(max-width:360px){.names h1 .names-floral-link{width:34px;height:34px}.names-floral-link img{width:100%;height:100%}.names .signature{font-size:36px}}

/* A single sculpted garden panel carries the reference's couture relief language. */
.garden-venue{
  width:min(96%,520px);
  max-width:520px;
  min-height:760px;
  margin:24px auto 56px;
  padding:154px 78px 150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#f8f2e9 url('assets/relief-garden-card.png') center/100% 100% no-repeat;
  box-shadow:0 14px 42px #5f46520e;
  isolation:isolate;
}
.garden-venue .chapter-label,.garden-venue h2,.garden-venue>p,.garden-venue .mini-map-placeholder{position:relative;z-index:1}
.garden-venue .chapter-label{color:#9b6b49}
.garden-venue h2{color:#685169}
.garden-venue .mini-map-placeholder{
  width:100%;
  min-height:210px;
  margin:18px auto 16px;
  border-color:#baa9bd99;
  outline-color:#d5c3ba8f;
  background:rgba(255,252,247,.78);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
@media(max-width:430px){
  .garden-venue{min-height:690px;padding:132px 58px 130px}
  .garden-venue .mini-map-placeholder{min-height:190px;padding:24px 18px}
}
@media(max-width:360px){.garden-venue{padding-left:48px;padding-right:48px}}

/* Opening-only signature: light, clean and naturally connected like the approved mockup. */
.names .signature{font-family:var(--signature);font-size:clamp(42px,10.8vw,48px);font-weight:400;line-height:1.18;letter-spacing:0;word-spacing:0;margin:4px 0 7px;white-space:nowrap}
@media(max-width:360px){.names .signature{font-size:39px}}

/* Rebuilt locket: every state uses the same approved artwork. Only pose changes. */
.mirror-stage{position:relative;grid-row:2;top:auto;left:-8%;width:116%;height:100%;min-height:0;perspective:980px;overflow:visible}
.locket-object{position:absolute;left:50%;top:50%;width:min(88%,430px);aspect-ratio:1122/1402;transform:translate(-50%,-50%);transform-style:preserve-3d}
.locket-base,.locket-lid{position:absolute;inset:0;transform-style:preserve-3d}
.locket-base{filter:drop-shadow(0 8px 11px rgba(91,70,48,.12))}
.locket-photo-shell{position:absolute;z-index:1;left:22.2%;top:20%;width:54%;height:66.1%;overflow:hidden;border-radius:50%;background:#eee7dc;box-shadow:inset 0 0 18px rgba(91,70,48,.16)}
.locket-photo-shell img{position:absolute;width:140%;height:140%;max-width:none;left:-22.8%;top:-34%;object-fit:cover;opacity:.62;transition:none}
.locket-open-frame,.locket-ribbon,.locket-lid-front,.locket-lid-back{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.locket-open-frame{z-index:2;-webkit-mask:url('assets/mirror-open-mask.svg') center/100% 100% no-repeat;mask:url('assets/mirror-open-mask.svg') center/100% 100% no-repeat;filter:saturate(.96)}
.locket-ribbon{z-index:3;opacity:0;-webkit-mask:url('assets/mirror-ribbon-mask.svg') center/100% 100% no-repeat;mask:url('assets/mirror-ribbon-mask.svg') center/100% 100% no-repeat;pointer-events:none}
.locket-lid{z-index:6;transform-origin:16.6% 51.7%;will-change:transform,filter}
.locket-lid-front,.locket-lid-back,.locket-lid-thickness,.locket-lid-sprig{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.locket-lid-front{z-index:3;-webkit-mask:url('assets/mirror-wrapped-mask.svg') center/100% 100% no-repeat;mask:url('assets/mirror-wrapped-mask.svg') center/100% 100% no-repeat;transform:translateZ(4px);filter:saturate(.96)}
.locket-lid-back{z-index:2;-webkit-mask:url('assets/mirror-bare-mask.svg') center/100% 100% no-repeat;mask:url('assets/mirror-bare-mask.svg') center/100% 100% no-repeat;transform:rotateY(180deg) translateZ(4px);filter:saturate(.88) brightness(1.025)}
.locket-lid-sprig{position:absolute;z-index:4;width:18%;height:auto;left:41%;top:57%;transform:rotateY(180deg) translateZ(6px) rotate(-17deg);opacity:.38;filter:sepia(1) saturate(.55) hue-rotate(350deg) brightness(.82)}
.locket-lid-thickness{position:absolute;inset:0;z-index:1;background:#b98d55;-webkit-mask:url('assets/mirror-bare-mask.svg') center/100% 100% no-repeat;mask:url('assets/mirror-bare-mask.svg') center/100% 100% no-repeat;transform:translateZ(-5px);box-shadow:inset 0 0 0 2px rgba(255,239,202,.55)}
@media(max-height:740px){.locket-object{width:min(80%,390px)}}
@media(max-width:360px){.locket-object{width:91%}}

/* V31 material pass: the approved illustration is the skin of one physical
   photo locket. Sculpted metal lives beneath it and stays consistent in every pose. */
.locket-object{
  --locket-open:0;
  transform:translate(-50%,-50%) rotateX(-1.6deg) rotateZ(-.25deg);
  filter:drop-shadow(-3px 10px 13px rgba(77,55,34,.18));
}
.locket-base{filter:none}
.locket-base-depth,.locket-base-well,.locket-base-glass,.locket-lid-edge{
  position:absolute;
  left:16.45%;top:15.35%;width:65.25%;height:72.05%;
  border-radius:50%;
  pointer-events:none;
}
.locket-base-depth{
  z-index:0;
  transform:translate3d(5px,8px,-18px);
  background:linear-gradient(112deg,#744627 0%,#ba7e42 9%,#f6dca2 22%,#9e6434 43%,#f9e6b5 64%,#a86c37 82%,#6e4026 100%);
  border:clamp(5px,1.1vw,8px) solid #a56e3d;
  box-shadow:inset 3px 0 4px #fff1c991,inset -5px -1px 8px #5a351f8c,0 7px 9px #62452e33;
}
.locket-base-well{
  z-index:0;
  left:20.15%;top:19.15%;width:57.85%;height:64.55%;
  transform:translateZ(-1px);
  background:#6d4930;
  border:5px solid #8f5b31;
  box-shadow:inset 0 0 14px #2e160faa,inset 3px 0 5px #f8deb173;
}
.locket-photo-shell{z-index:1;transform:translateZ(1px);background:#ddd0bd}
.locket-photo-shell::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.23) 3%,rgba(255,255,255,0) 34%,rgba(255,236,201,.06) 62%,rgba(78,47,27,.13) 100%);
  box-shadow:inset 7px 0 11px rgba(255,246,225,.24),inset -8px -3px 13px rgba(59,37,24,.19);
}
.locket-open-frame{transform:translateZ(5px);filter:saturate(.98) contrast(1.015)}
.locket-base-glass{
  z-index:2;left:22.2%;top:20%;width:54%;height:66.1%;transform:translateZ(5px);
  border:1px solid rgba(255,249,230,.58);
  background:linear-gradient(116deg,rgba(255,255,255,.18),transparent 28%,transparent 64%,rgba(255,231,190,.08));
  box-shadow:inset 3px 2px 4px rgba(255,255,255,.2),inset -3px -2px 5px rgba(92,59,33,.1);
}
.locket-hinge{
  position:absolute;z-index:8;left:15.7%;top:43.2%;width:3.6%;height:18%;
  transform:translateZ(8px);display:flex;flex-direction:column;justify-content:space-around;align-items:center;
  filter:drop-shadow(1px 1px 1px rgba(71,42,23,.35));pointer-events:none;
}
.locket-hinge i{
  display:block;width:74%;height:22%;border-radius:45%;
  background:linear-gradient(90deg,#6e4027 0%,#c38b4c 18%,#ffe2a0 48%,#ad713a 76%,#654027 100%);
  border:1px solid rgba(105,62,30,.66);box-shadow:inset 1px 0 1px #fff0bd9c;
}
.locket-lid{transform-origin:16.55% 51.5%}
.locket-lid-edge{
  z-index:1;
  background:linear-gradient(108deg,#694025 0%,#b7783d 8%,#f8d993 24%,#9b5d2f 46%,#fbe4aa 66%,#a46432 84%,#60391f 100%);
  border:clamp(4px,.9vw,7px) solid #a66e3c;
  box-shadow:inset 3px 0 3px rgba(255,242,194,.75),inset -4px -1px 6px rgba(75,41,22,.62);
}
.locket-lid-edge.edge-back{transform:translateZ(-14px);filter:brightness(.66)}
.locket-lid-edge.edge-deep{transform:translateZ(-9px);filter:brightness(.75)}
.locket-lid-edge.edge-mid-back{transform:translateZ(-4px);filter:brightness(.84)}
.locket-lid-edge.edge-mid-front{transform:translateZ(1px);filter:brightness(.94)}
.locket-lid-edge.edge-near{transform:translateZ(7px);filter:brightness(1.02)}
.locket-lid-edge.edge-front{transform:translateZ(12px);filter:brightness(1.1)}
.locket-lid-front{transform:translateZ(15px);filter:saturate(.98) contrast(1.012)}
.locket-lid-back{transform:rotateY(180deg) translateZ(15px);filter:saturate(.94) contrast(1.018) brightness(1.01)}
.locket-lid-sprig{transform:rotateY(180deg) translateZ(17px) rotate(-17deg)}
.locket-lid::after{
  content:"";position:absolute;z-index:5;left:20.05%;top:18.9%;width:58%;height:64.8%;border-radius:50%;
  transform:rotateY(180deg) translateZ(16px);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;
  border:1px solid rgba(255,244,209,.6);box-shadow:inset 7px 1px 11px rgba(255,255,255,.15),inset -6px -2px 9px rgba(83,50,27,.12);
}
/* The source art has a white canvas; these masks are the actual locket silhouettes,
   so canvas pixels never become a rotating rectangular plane. */
.locket-open-frame,.locket-lid-front,.locket-lid-back,.locket-ribbon{
  background:transparent;
  -webkit-mask:none;mask:none;
}
.locket-ribbon{transform:translateZ(7px)}
@media(prefers-reduced-motion:reduce){.locket-object{filter:drop-shadow(0 9px 11px rgba(77,55,34,.17))}}

/* V33 open-state refinement: a luminous mother-of-pearl lid interior. */
.locket-lid-inlay{
  position:absolute;z-index:4;left:20.15%;top:18.95%;width:57.8%;height:64.7%;border-radius:50%;
  transform:rotateY(180deg) translateZ(16px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 28% 22%,rgba(255,255,255,.32),transparent 30%),
    radial-gradient(ellipse at 70% 66%,rgba(226,194,157,.12),transparent 44%),
    linear-gradient(128deg,rgba(255,250,235,.13),transparent 37%,rgba(184,216,220,.07) 66%,rgba(255,234,204,.11));
  box-shadow:inset 7px 2px 12px rgba(255,255,255,.18),inset -8px -2px 14px rgba(91,57,32,.09);
}
.locket-lid-sprig.sprig-main{
  width:22%;left:39%;top:56%;opacity:.30;
  transform:rotateY(180deg) translateZ(17px) rotate(-18deg) scaleY(1.24);
  filter:sepia(1) saturate(.38) hue-rotate(345deg) brightness(.78);
}
.locket-lid-sprig.sprig-small{
  width:13%;left:31%;top:68%;opacity:.16;
  transform:rotateY(180deg) translateZ(17px) rotate(24deg) scaleY(1.18);
  filter:sepia(1) saturate(.3) hue-rotate(345deg) brightness(.82);
}

/* Approved wedding typography is embedded so every guest sees the same design. */
:root{
  --hand:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;
  --signature:'Brittany Signature Embedded',cursive;
  --section-wash:#f8f3ee;
}
.names .signature,.vellum .signature,.long-letter .signature,.english-display{font-family:var(--signature);font-weight:400;letter-spacing:0;text-transform:none}
.long-letter h2,.vellum h2,.ending-cn{font-family:var(--hand)}

/* Opening prompt is a quiet instruction, not a button-like call to action. */
.enter span{display:flex;flex-direction:column;align-items:center;gap:2px}
.enter span b{font:400 15px/1.5 var(--hand);letter-spacing:.12em}
.enter span small{font:400 22px/1 var(--signature);letter-spacing:0}

/* The first card stays airy even with the full invitation copy. */
.vellum{width:min(92vw,430px,calc((var(--screen-height,100svh) - 48px)*.7199));min-height:0;margin:auto}
.letter-content{inset:12.5% 15.5% 11%;gap:0;justify-content:center}
.vellum .letter-ornament{width:38px;height:29px;margin-bottom:4px}
.vellum .letter-heading .eyebrow{font-size:18px;line-height:1.15;margin-bottom:6px;color:#a16f4b}
.vellum .letter-heading h2{font-size:29px;line-height:1.25;margin:0 0 12px}
.vellum .letter-copy{font-size:13.5px;line-height:1.68;color:#5d4b5e}
.vellum .letter-copy p{margin:0 0 10px}
.vellum .letter-event{margin-top:2px;padding-top:16px}
.vellum .letter-event .letter-date{font-size:17px;letter-spacing:.07em;margin:0}
.vellum .letter-event .letter-venue{font-size:12.5px;line-height:1.55;margin:4px 0 0}
.letter-closing{font-size:12.5px;line-height:1.6;margin:9px 0 3px}
.couple-cn{font:400 17px/1.4 var(--hand);letter-spacing:.07em;margin:3px 0 0}
.vellum .letter-content>.signature{font-size:29px;line-height:1.05;margin:1px 0 0;white-space:nowrap}
@media(max-height:700px){
  .vellum{margin:16px 0}.letter-content{inset:11.5% 15% 9.5%}
  .vellum .letter-heading .eyebrow{font-size:16px}.vellum .letter-heading h2{font-size:26px;margin-bottom:8px}
  .vellum .letter-copy{font-size:12.5px;line-height:1.55}.vellum .letter-copy p{margin-bottom:7px}
  .vellum .letter-event{padding-top:12px}.letter-closing{margin-top:6px}.vellum .letter-content>.signature{font-size:26px}
}

/* One continuous paper garden: sections overlap through soft washes and floral seams. */
.long-letter{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 0 13%,rgba(216,192,220,.18),transparent 25%),
    radial-gradient(ellipse at 100% 44%,rgba(226,165,112,.13),transparent 24%),
    radial-gradient(ellipse at 0 76%,rgba(152,161,132,.13),transparent 26%),
    #fcfbf8;
}
.story-section,.wedding-day,.garden-venue,.dress-code,.rsvp-section,.invitation-ending{position:relative;isolation:isolate}
.story-section::after,.wedding-day::after,.garden-venue::after,.dress-code::after,.rsvp-section::after{
  content:"";position:absolute;left:50%;bottom:-31px;width:170px;height:62px;transform:translateX(-50%);
  background:url('assets/letter-flower-rule.svg') center/contain no-repeat;opacity:.58;z-index:4;pointer-events:none;
}
.long-letter .chapter-label{font-size:20px;line-height:1.05;color:#a16f4b;margin-bottom:8px}
.long-letter h2{font-size:31px;line-height:1.35;margin:8px 0 18px;color:#655066}
.letter-welcome{padding:76px 30px 84px}
.letter-welcome p:not(.chapter-label):not(.english-quote){font-size:15px;line-height:2.05;margin-bottom:24px}
.english-quote{font-size:26px!important;line-height:1.3!important;color:#846783;margin:30px auto 0!important;max-width:340px}
.story-photo{margin-bottom:62px}
.story-photo figcaption{font-size:27px}

.wedding-day{max-width:none;width:100%;padding:82px max(30px,calc((100% - 470px)/2)) 90px;background:linear-gradient(180deg,rgba(240,235,242,0),rgba(240,235,242,.86) 12%,rgba(248,241,236,.72) 88%,rgba(252,251,248,0));overflow:visible}
.wedding-day .lace-seam,.rsvp-section .lace-seam{opacity:.22;mix-blend-mode:multiply}
.section-intro{max-width:380px;margin:0 auto 38px!important;font-size:15px!important;line-height:2!important}
.schedule-list{max-width:360px;margin:0 auto;text-align:left;position:relative}
.schedule-list::before{content:"";position:absolute;left:55px;top:18px;bottom:18px;width:1px;background:linear-gradient(#c8936d55,#80688678,#c8936d55)}
.schedule-item{display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:center;min-height:82px;position:relative}
.schedule-time{font:14px/1.3 var(--serif);color:#a16f4b;white-space:nowrap}
.schedule-item h3{font:400 23px/1.25 var(--hand);margin:0 0 2px;color:#614d63}
.schedule-item p{font-size:21px;line-height:1.05;margin:0;color:#8a6d87}
.celebration-art{width:min(100%,420px);margin:18px auto -24px;opacity:.72}

/* The relief becomes an atmospheric chapter rather than a separate heavy board. */
.garden-venue{width:100%;max-width:none;min-height:760px;margin:0;padding:126px max(46px,calc((100% - 390px)/2)) 118px;background:linear-gradient(180deg,transparent,#f7f0e8b8 10%,#f7f0e8c9 90%,transparent);box-shadow:none}
.garden-venue::before{content:"";position:absolute;z-index:-1;left:50%;top:44px;width:min(96%,520px);height:calc(100% - 88px);transform:translateX(-50%);background:url('assets/relief-garden-card.png') center/100% 100% no-repeat;opacity:.43;mix-blend-mode:multiply;pointer-events:none}
.garden-venue .venue-name{font:400 22px/1.55 var(--hand);margin:0 0 4px}
.garden-venue .venue-address{font-size:13px;color:#806f78;margin-bottom:22px}
.garden-venue>p{font-size:14px;line-height:1.9;margin-bottom:18px}
.garden-venue .mini-map-placeholder{width:min(100%,310px);min-height:160px;margin:22px auto 16px;background:rgba(255,252,247,.58);border-color:#bba9bd68;outline-color:#d1c1b777}
.mini-map-placeholder span{font-size:18px;line-height:1;color:#a16f4b}.mini-map-placeholder h3{margin:13px 0 5px}.mini-map-placeholder p{margin:0}
.map-link{display:inline-flex;flex-direction:column;align-items:center;color:#684f68;text-decoration:none;margin:5px auto 0;padding:8px 22px;border-bottom:1px solid #9d7e8f66}
.map-link span{font-size:24px;line-height:1}.map-link small{font:13px/1.5 var(--serif);letter-spacing:.1em}

.dress-code{padding:84px 30px 92px}
.dress-code>p:not(.chapter-label):not(.english-quote){font-size:15px;line-height:2;margin-bottom:20px}
.colour-ribbons{gap:12px;margin:28px auto 34px;max-width:390px}
.colour-ribbons div{gap:9px;font-size:12px;flex:1}.colour-ribbons i{width:42px;height:68px;border-radius:20px 20px 3px 3px;box-shadow:inset 1px 1px 0 #fff7,0 5px 12px #69526510}

.rsvp-section{max-width:none;width:100%;padding:86px max(32px,calc((100% - 390px)/2)) 96px;background:linear-gradient(180deg,rgba(240,235,242,0),rgba(240,235,242,.88) 10%,rgba(242,237,243,.9) 90%,rgba(252,251,248,0))}
.rsvp-section form{max-width:380px;margin-top:34px}
.rsvp-section label,.rsvp-section legend{font-size:15px;color:#5b495c}
.field-english{display:block;font-size:20px;line-height:1.05;color:#8e7089;margin-top:1px}
.rsvp-section input:not([type=radio]),.rsvp-section textarea{background:rgba(255,255,255,.42);border-bottom-color:#ad99af}
.rsvp-section .attendance-choice{display:flex;margin:0 0 12px;align-items:flex-start}
.attendance-choice span{display:flex;flex-direction:column;line-height:1.25}.attendance-choice small{font-size:19px;color:#8e7089}
.rsvp-preview{display:flex;flex-direction:column;align-items:center;gap:1px;background:#765979;border-color:#765979;border-radius:2px}
.rsvp-preview b{font:400 15px/1.4 var(--serif);letter-spacing:.08em}.rsvp-preview span{font-size:20px;line-height:1.1}
.rsvp-success{padding:28px 8px;text-align:center}.rsvp-success h3{font:400 28px/1.5 var(--hand);margin:0 0 14px}.rsvp-success p{font-size:15px;line-height:2;margin:0}.rsvp-success .english-display{font-size:27px;line-height:1.2;margin-top:16px}
.rsvp-section form.is-submitted>*:not(#rsvp-result){display:none!important}

.invitation-ending{text-align:center;padding:95px 30px max(82px,calc(62px + env(safe-area-inset-bottom)));background:radial-gradient(ellipse at 50% 35%,#f4e9dc,transparent 60%)}
.invitation-ending .ending-cn{font-size:26px;letter-spacing:.08em;margin:14px 0 0}
.invitation-ending .signature{font-size:38px;line-height:1.15;margin:3px 0 14px}
.ending-date{font-size:14px!important;letter-spacing:.2em;line-height:1.5!important;margin:0 0 26px!important}
.invitation-ending>p:not(.signature):not(.ending-date):not(.ending-cn):not(.english-quote){font-size:15px;line-height:1.8;margin:0}
.invitation-ending::before,.invitation-ending::after{content:"";position:absolute;width:160px;height:260px;background:url('assets/botanical-clear.png') center/cover no-repeat;opacity:.22;mix-blend-mode:multiply;pointer-events:none;bottom:0}
.invitation-ending::before{left:-42px}.invitation-ending::after{right:-42px;transform:scaleX(-1)}

@media(max-width:380px){
  .letter-content{left:14%;right:14%}.vellum .letter-copy{font-size:12.5px}
  .garden-venue{padding-left:42px;padding-right:42px}.colour-ribbons{gap:6px}.colour-ribbons i{width:36px;height:62px}
}

/* Typography audit: one embedded English display face and one embedded Chinese title face. */
:root{
  --english-display:'Brittany Signature Embedded',cursive;
  --chinese-title:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;
  --signature:var(--english-display);
  --hand:var(--chinese-title);
}
.signature,.english-display,.names .signature,.vellum .signature,.long-letter .signature,
.chapter-label,.schedule-item .english-display,.field-english,.attendance-choice small,
.rsvp-preview .english-display,.map-link .english-display,.english-quote{
  font-family:var(--english-display);font-weight:400;font-style:normal;letter-spacing:0;
}
.names h1,.vellum h2,.long-letter h2,.schedule-item h3,.mini-map-placeholder h3,
.rsvp-success h3,.ending-cn,.enter span b{
  font-family:var(--chinese-title);font-weight:400;
}

/* Shorter first-card copy uses a calmer, centered editorial rhythm. */
.letter-content{inset:15% 16% 12%;justify-content:center}
.vellum .letter-heading .eyebrow{font-size:29px;line-height:1.08;margin:0;color:#9b6849;white-space:normal}
.vellum .letter-heading .eyebrow::before{width:13px;height:13px;flex-basis:13px}
.vellum .letter-heading h2{font-size:31px;line-height:1.3;margin:5px 0 0;letter-spacing:.07em}
.vellum .letter-copy{font-size:15px;line-height:1.95;margin-top:24px;color:#523f50}
.vellum .letter-copy p{margin:0 0 18px}
.vellum .letter-copy p+p{margin-top:0}
.vellum .letter-event{min-width:78%;margin-top:4px;padding-top:26px}
.vellum .letter-event .letter-date{font-size:18px;line-height:1.35;letter-spacing:.15em}
.vellum .letter-event .letter-venue{font-size:13px;line-height:1.6;margin-top:7px;letter-spacing:.035em;white-space:nowrap}
.vellum .letter-content>.signature{font-size:34px;line-height:1.1;margin-top:17px;color:#70536f}
@media(max-height:700px){
  .letter-content{inset:13% 15% 10%}
  .vellum .letter-heading .eyebrow{font-size:26px}
  .vellum .letter-heading h2{font-size:28px}
  .vellum .letter-copy{font-size:14px;line-height:1.78;margin-top:18px}
  .vellum .letter-copy p{margin-bottom:13px}
  .vellum .letter-event{padding-top:22px}
  .vellum .letter-content>.signature{font-size:31px;margin-top:12px}
}
@media(max-width:360px){
  .vellum .letter-heading .eyebrow{font-size:25px}
  .vellum .letter-copy{font-size:14px}
  .vellum .letter-event .letter-venue{font-size:12px}
}

/* V36 card-safe typography: display faces never leak into instructions or body copy. */
.enter span b{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.1em;
}
.vellum .letter-heading h2{font-family:var(--chinese-title)}
.vellum .letter-copy,.vellum .letter-event,.vellum .letter-date,.vellum .letter-venue{
  font-family:var(--serif);font-style:normal;font-weight:400;
}
.letter-content{top:13%;right:17%;bottom:21%;left:17%;justify-content:center;overflow:visible}
.vellum .letter-heading .eyebrow{max-width:94%;margin:0 auto;font-size:27px;line-height:1.12}
.vellum .letter-heading h2{font-size:30px;line-height:1.3;margin-top:7px;letter-spacing:.06em}
.vellum .letter-copy{font-size:15px;line-height:1.82;margin-top:19px}
.vellum .letter-copy p{margin:0 0 13px}
.vellum .letter-event{min-width:76%;margin-top:1px;padding-top:21px}
.vellum .letter-event .letter-date{font-size:17px;line-height:1.35;letter-spacing:.13em}
.vellum .letter-event .letter-venue{font-size:12.5px;line-height:1.55;margin-top:6px;letter-spacing:.025em}
.vellum .letter-content>.signature{font-size:31px;line-height:1.15;margin-top:10px;padding:0 8px;white-space:nowrap}
@media(max-height:700px){
  .letter-content{top:12%;right:16%;bottom:20%;left:16%}
  .vellum .letter-heading .eyebrow{font-size:24px}
  .vellum .letter-heading h2{font-size:27px;margin-top:4px}
  .vellum .letter-copy{font-size:14px;line-height:1.7;margin-top:14px}
  .vellum .letter-copy p{margin-bottom:9px}
  .vellum .letter-event{padding-top:18px}
  .vellum .letter-content>.signature{font-size:28px;margin-top:7px}
}

/* V37 metrics tuned against the supplied font files. */
.names .signature{font-family:var(--english-display);line-height:1.18;padding:.08em .12em .16em}
.vellum .letter-heading .eyebrow{font-size:25px;line-height:1.2;padding:.08em .08em .14em}
.vellum .letter-content>.signature{font-size:30px;line-height:1.2;padding:.08em 10px .2em}
.chapter-label,.schedule-item .english-display,.field-english,.attendance-choice small,
.rsvp-preview .english-display,.map-link .english-display,.english-quote{padding-bottom:.1em}
@media(max-height:700px){
  .vellum .letter-heading .eyebrow{font-size:23px}
  .vellum .letter-content>.signature{font-size:27px}
}
@media(max-width:360px){
  .vellum .letter-heading .eyebrow{font-size:22px}
  .vellum .letter-content>.signature{font-size:26px}
}
@media(max-width:360px){
  .letter-content{right:16%;left:16%}
  .vellum .letter-heading .eyebrow{font-size:22px}
  .vellum .letter-heading h2{font-size:26px}
  .vellum .letter-copy{font-size:13.5px}
  .vellum .letter-content>.signature{font-size:26px}
}

/* Typography Design System v1.0 — authoritative site-wide mapping. */
:root{
  --font-en-display:'Brittany Signature Embedded',cursive;
  --font-zh-title:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;
  --font-body:'Noto Serif SC','Songti SC','STSong',serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --english-display:var(--font-en-display);
  --chinese-title:var(--font-zh-title);
  --signature:var(--font-en-display);
  --hand:var(--font-zh-title);
  --serif:var(--font-body);
}
*,*::before,*::after{font-synthesis:none}
body,.letter-copy,.letter-event,.letter-date,.letter-venue,.long-letter p,
.section-intro,.schedule-time,.venue-name,.venue-address,.mini-map-placeholder h3,
.mini-map-placeholder p,.colour-ribbons,.rsvp-section label,.rsvp-section legend,
.rsvp-section input,.rsvp-section textarea,.rsvp-success p,.ending-date{
  font-family:var(--font-body);font-style:normal;
}
.names h1,.vellum .letter-heading h2,.long-letter h2,.rsvp-success h3,.ending-cn{
  font-family:var(--font-zh-title);font-weight:400;font-style:normal;
}
.schedule-item h3,.garden-venue .venue-name,.mini-map-placeholder h3{
  font-family:var(--font-body);font-weight:500;font-style:normal;letter-spacing:.02em;
}
.signature,.english-display,.enter span small,.names .signature,.vellum .signature,
.chapter-label,.schedule-item .english-display,.field-english,.attendance-choice small,
.rsvp-preview .english-display,.map-link .english-display,.english-quote{
  font-family:var(--font-en-display);font-weight:400;font-style:normal;
  letter-spacing:0;word-spacing:0;text-transform:none;
}
.enter span b,.controls button,.replay-ending,.rsvp-preview b,.map-link small{
  font-family:var(--font-ui);font-style:normal;
}
.names h1{font-size:clamp(28px,7.7vw,33px);line-height:1.35;letter-spacing:.08em}
.names .signature{font-size:clamp(42px,10.8vw,48px);line-height:1.18;padding:.08em .12em .16em;overflow:visible}
.names .date{font:400 14px/1.5 var(--font-body);letter-spacing:.2em}
.names .venue{font:400 13px/1.65 var(--font-body);letter-spacing:.06em}
.enter span b{font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.1em}
.enter span small{font-size:22px;line-height:1.12;padding:.08em .12em .14em;overflow:visible}

.letter-content{top:13%;right:17%;bottom:21%;left:17%;overflow:visible}
.vellum .letter-heading,.vellum .letter-heading .eyebrow,.vellum .letter-content>.signature{overflow:visible}
.vellum .letter-heading .eyebrow{font-size:25px;line-height:1.2;letter-spacing:0;padding:.08em .08em .14em;max-width:94%}
.vellum .letter-heading h2{font-size:30px;line-height:1.3;letter-spacing:.06em}
.vellum .letter-copy{font-size:15px;line-height:1.82;letter-spacing:0}
.vellum .letter-event .letter-date{font-size:17px;line-height:1.35;font-weight:500;letter-spacing:.13em}
.vellum .letter-event .letter-venue{font-size:12.5px;line-height:1.55;letter-spacing:.025em}
.vellum .letter-content>.signature{font-size:30px;line-height:1.2;letter-spacing:0;padding:.08em 10px .2em;white-space:nowrap}

.long-letter .chapter-label{font-size:20px;line-height:1.12;letter-spacing:0;padding-bottom:.1em}
.long-letter h2{font-size:31px;line-height:1.35;letter-spacing:.055em}
.letter-welcome p:not(.chapter-label):not(.english-quote),.section-intro,
.garden-venue>p,.dress-code>p:not(.chapter-label):not(.english-quote),.rsvp-intro{
  font-size:15px;line-height:2;letter-spacing:0;
}
.english-quote{font-size:26px;line-height:1.3;letter-spacing:0;padding-bottom:.1em}
.schedule-item h3{font-size:18px;line-height:1.45;margin-bottom:3px}
.schedule-item p{font-size:20px;line-height:1.12;padding-bottom:.1em}
.garden-venue .venue-name{font-size:19px;line-height:1.6}
.mini-map-placeholder h3{font-size:18px;line-height:1.5}
.field-english{font-size:20px;line-height:1.12;padding-bottom:.1em}
.attendance-choice small{font-size:19px;line-height:1.15;padding-bottom:.1em}
.rsvp-preview b{font-size:15px;font-weight:500;line-height:1.4;letter-spacing:.08em}
.rsvp-preview .english-display{font-size:20px;line-height:1.12;padding-bottom:.1em}
.rsvp-success h3{font-size:28px;line-height:1.5;letter-spacing:.05em}
.invitation-ending .ending-cn{font-size:26px;line-height:1.5;letter-spacing:.08em}
.invitation-ending .signature{font-size:38px;line-height:1.2;padding:.08em .12em .16em}
.controls button,.replay-ending,.map-link small{font-size:13px;font-weight:400;line-height:1.5}

@media(max-height:700px){
  .names h1{font-size:29px}.names .signature{font-size:40px}
  .vellum .letter-heading .eyebrow{font-size:23px}
  .vellum .letter-heading h2{font-size:27px}
  .vellum .letter-copy{font-size:14px;line-height:1.7}
  .vellum .letter-content>.signature{font-size:27px}
}
@media(max-width:360px){
  .names h1{font-size:28px}.names .signature{font-size:38px}
  .vellum .letter-heading .eyebrow{font-size:22px}
  .vellum .letter-heading h2{font-size:26px}
  .vellum .letter-copy{font-size:14px;line-height:1.72}
  .vellum .letter-content>.signature{font-size:26px}
}

/* Typography Design System v1.1 — lighter, restrained vintage hierarchy. */
:root{
  --font-en-secondary:'Noto Serif SC',Georgia,'Times New Roman',serif;
  --title-ink:#78677b;
  --title-ink-warm:#9a704f;
  --secondary-ink:#716872;
}

/* Display script is reserved for names and editorial chapter headings. */
.names .signature,.vellum .letter-content>.signature,.invitation-ending .signature,
.vellum .letter-heading .eyebrow,.long-letter .chapter-label{
  font-family:var(--font-en-display);font-weight:400;font-style:normal;
  letter-spacing:0;word-spacing:0;text-transform:none;color:var(--title-ink);
}
.names .signature{font-size:clamp(34px,9.2vw,40px);line-height:1.2;margin:2px 0 5px;padding:.08em .14em .18em}
.vellum .letter-heading .eyebrow{font-size:22px;line-height:1.24;color:var(--title-ink-warm);padding:.08em .1em .16em}
.vellum .letter-content>.signature{font-size:26px;line-height:1.24;margin-top:10px;padding:.08em 10px .2em}
.long-letter .chapter-label{font-size:17px;line-height:1.2;padding:.08em .08em .14em}
.invitation-ending .signature{font-size:32px;line-height:1.24;padding:.08em .12em .18em}

/* English secondary information returns to a quiet editorial serif. */
.english-display,.enter span small,.schedule-item .english-display,.field-english,
.attendance-choice small,.rsvp-preview .english-display,.map-link .english-display,
.english-quote,.rsvp-success .english-display{
  font-family:var(--font-en-secondary);font-weight:400;font-style:normal;
  color:var(--secondary-ink);letter-spacing:.055em;word-spacing:normal;text-transform:none;
}
.enter span small{font-size:11px;line-height:1.5;letter-spacing:.15em;padding:0;text-transform:none}
.schedule-item p{font-size:13px;line-height:1.5;letter-spacing:.04em;padding:0}
.field-english{font-size:13px;line-height:1.45;letter-spacing:.04em;margin-top:3px;padding:0}
.attendance-choice small{font-size:12px;line-height:1.45;letter-spacing:.035em;padding:0}
.rsvp-preview .english-display{font-size:12px;line-height:1.45;letter-spacing:.08em;padding:0}
.map-link .english-display{font-size:13px;line-height:1.45;letter-spacing:.08em;padding:0}
.english-quote,.rsvp-success .english-display{font-size:15px!important;line-height:1.8!important;font-style:italic;letter-spacing:.025em;padding:0}

/* Restore Brittany only where an English element is itself a title. */
.vellum .letter-heading .eyebrow,.long-letter .chapter-label{
  font-family:var(--font-en-display);font-style:normal;letter-spacing:0;
}

/* Kaixin Jiuxiao is supplied in Regular only: reduce perceived weight through scale, spacing and ink. */
.names h1,.vellum .letter-heading h2,.long-letter h2,.rsvp-success h3,.ending-cn{
  font-family:var(--font-zh-title);font-weight:400;font-style:normal;
  color:var(--title-ink);text-shadow:none;
}
.names h1{font-size:clamp(27px,7.2vw,30px);line-height:1.42;letter-spacing:.095em}
.vellum .letter-heading h2{font-size:27px;line-height:1.42;letter-spacing:.085em}
.long-letter h2{font-size:29px;line-height:1.48;letter-spacing:.085em}
.rsvp-success h3{font-size:25px;line-height:1.55;letter-spacing:.07em}
.invitation-ending .ending-cn{font-size:24px;line-height:1.55;letter-spacing:.085em}

/* Information remains crisp and never borrows the display handwriting. */
.schedule-item h3,.garden-venue .venue-name,.mini-map-placeholder h3{
  font-family:var(--font-body);font-weight:500;font-style:normal;color:#625762;
}
.letter-copy,.letter-event,.long-letter p,.section-intro,.garden-venue>p,
.dress-code>p,.rsvp-section label,.rsvp-section legend,.rsvp-success p{
  font-family:var(--font-body);font-weight:400;font-style:normal;
}

@media(max-height:700px){
  .names .signature{font-size:34px}
  .vellum .letter-heading .eyebrow{font-size:20px}
  .vellum .letter-content>.signature{font-size:24px}
  .names h1{font-size:27px}.vellum .letter-heading h2{font-size:25px}
}
@media(max-width:360px){
  .names .signature{font-size:33px}
  .vellum .letter-heading .eyebrow{font-size:20px}
  .vellum .letter-content>.signature{font-size:24px}
  .long-letter .chapter-label{font-size:16px}
  .names h1{font-size:26px}.vellum .letter-heading h2{font-size:25px}.long-letter h2{font-size:28px}
}

/* Typography Design System v1.2 — Kaixin Jiuxiao display face and tighter Brittany scale. */
:root{
  --font-zh-title:'Kaixin Jiuxiao Embedded','Kaiti SC','STKaiti',serif;
  --chinese-title:var(--font-zh-title);
  --hand:var(--font-zh-title);
}

/* Every Brittany Signature title and couple-name treatment is 2px smaller than v1.1. */
.names .signature{font-size:clamp(32px,8.8vw,38px)}
.vellum .letter-heading .eyebrow{font-size:20px}
.vellum .letter-content>.signature{font-size:24px}
.long-letter .chapter-label{font-size:15px}
.invitation-ending .signature{font-size:30px}

/* Keep the opening title below the lace crown and inside the paper safe area. */
.letter-content{top:17%;right:17%;bottom:18%;left:17%;justify-content:center;overflow:visible}
.vellum .letter-heading{width:100%;padding:0 6px;overflow:visible}
.vellum .letter-heading .eyebrow{
  width:100%;max-width:100%;margin:0 auto;line-height:1.28;
  padding:.12em .12em .22em;white-space:normal;overflow:visible;
}
.vellum .letter-heading h2{margin-top:3px}
.vellum .letter-copy{margin-top:14px}
.vellum .letter-event{padding-top:17px}
.vellum .letter-content>.signature{margin-top:7px}

@media(max-height:700px){
  .names .signature{font-size:32px}
  .letter-content{top:15.5%;right:16%;bottom:16%;left:16%}
  .vellum .letter-heading .eyebrow{font-size:18px}
  .vellum .letter-content>.signature{font-size:22px}
  .vellum .letter-copy{margin-top:10px}
  .vellum .letter-event{padding-top:13px}
}
@media(max-width:360px){
  .names .signature{font-size:31px}
  .letter-content{top:16.5%;right:16%;bottom:17%;left:16%}
  .vellum .letter-heading .eyebrow{font-size:18px}
  .vellum .letter-content>.signature{font-size:22px}
  .long-letter .chapter-label{font-size:14px}
}

/* Typography v1.3: a smaller cover signature with breathing room below the Chinese names. */
.names .signature{font-size:clamp(26px,7vw,30px);margin:12px 0 5px;line-height:1.2;padding:.08em .14em .18em}
@media(max-height:700px){.names .signature{font-size:26px;margin-top:10px}}
@media(max-width:360px){.names .signature{font-size:26px;margin-top:10px}}

/* V43 — airy hand-drawn photo wall and section illustrations. */
.photo-wall{
  position:relative;width:100%;max-width:560px;margin:0 auto 12px;padding:58px 0 66px;
  background:linear-gradient(180deg,rgba(252,251,248,0),rgba(249,244,239,.68) 46%,rgba(252,251,248,0));
  overflow:hidden;isolation:isolate;
}
.photo-wall-shell{position:relative;width:min(88vw,430px);aspect-ratio:4/5;margin:auto}
.photo-wall-window{
  position:absolute;z-index:1;inset:5% 9% 8%;overflow:hidden;
  border:1px solid rgba(172,136,108,.5);border-radius:47% 47% 18px 18px;background:#ded7cf;
  box-shadow:0 17px 42px rgba(80,60,47,.14),0 0 0 7px rgba(255,253,249,.72),0 0 0 8px rgba(145,119,143,.2);
}
.photo-wall-track{display:flex;width:100%;height:100%;transform:translate3d(0,0,0);transition:transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform}
.photo-wall-slide{flex:0 0 100%;width:100%;height:100%;margin:0}
.photo-wall-slide img{display:block;width:100%;height:100%;object-fit:cover}
.photo-wall-slide:nth-child(1) img{object-position:center 53%}
.photo-wall-slide:nth-child(2) img{object-position:center 58%}
.photo-wall-slide:nth-child(3) img{object-position:center 58%}
.photo-wall-botanicals{
  position:absolute;z-index:2;inset:-11% -15% -10%;width:130%;height:121%;object-fit:fill;
  pointer-events:none;filter:drop-shadow(0 4px 5px rgba(73,59,47,.07));opacity:.88;
}
.photo-wall-dots{position:absolute;z-index:3;left:50%;bottom:1%;transform:translateX(-50%);display:flex;gap:9px;padding:8px 12px}
.photo-wall-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#a99ba5;opacity:.46;transition:width .35s ease,opacity .35s ease,background-color .35s ease;cursor:pointer}
.photo-wall-dots button.is-active{width:18px;border-radius:6px;background:#d09669;opacity:.9}
.photo-wall-dots button:focus-visible{outline:1px solid #755c72;outline-offset:4px}

/* Clean information panels: illustrations live at the edges, never behind copy. */
.garden-venue{
  min-height:0;padding:92px max(38px,calc((100% - 390px)/2)) 104px;
  background:radial-gradient(ellipse at 9% 15%,rgba(229,215,232,.23),transparent 26%),radial-gradient(ellipse at 94% 84%,rgba(239,211,188,.22),transparent 28%),#fcfbf8;
  overflow:hidden;
}
.garden-venue::before{content:none}
.garden-venue>*:not(.section-sketch){position:relative;z-index:2}
.section-sketch{position:absolute;z-index:1;pointer-events:none}
.venue-illustration{
  left:50%;width:min(132%,540px);margin:8px 0 28px;transform:translateX(-50%);
  pointer-events:none;
}
.venue-illustration img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;
  filter:none;opacity:.94;
}
.garden-venue .mini-map-placeholder{
  position:relative;isolation:isolate;overflow:hidden;min-height:245px;padding:142px 24px 24px;
  background:linear-gradient(145deg,rgba(250,247,243,.92),rgba(245,240,246,.76));
}
.garden-map-sketch{position:absolute;z-index:-1;left:50%;top:12px;width:min(95%,300px);height:145px;transform:translateX(-50%);object-fit:contain;opacity:.82}
.mini-map-placeholder span{font-size:13px}

.dress-code{position:relative;overflow:hidden;padding:92px 30px 104px;background:radial-gradient(ellipse at 10% 75%,rgba(228,214,231,.21),transparent 29%),radial-gradient(ellipse at 95% 18%,rgba(239,211,188,.22),transparent 27%)}
.dress-code>*:not(.section-sketch){position:relative;z-index:2}
.dress-sketch{width:150px;left:-62px;bottom:22px;opacity:.3;transform:rotate(7deg)}

@media(max-width:380px){
  .photo-wall{padding-top:46px;padding-bottom:58px}
  .photo-wall-shell{width:91vw}
  .photo-wall-botanicals{inset:-9% -17% -9%;width:134%;height:118%}
  .garden-venue{padding-left:34px;padding-right:34px}
  .venue-illustration{width:136%;margin-top:4px;margin-bottom:24px}
  .dress-sketch{width:130px;left:-58px;opacity:.25}
}
@media(prefers-reduced-motion:reduce){.photo-wall-track{transition:none}}

/* V44 — compact bilingual RSVP labels and live submission states. */
.rsvp-section label:not(.attendance-choice),.rsvp-section legend{
  display:block;
}
.rsvp-section label:not(.attendance-choice)>.field-english,
.rsvp-section legend>.field-english{
  display:inline;margin:0 0 0 8px;vertical-align:baseline;white-space:nowrap;
}
.attendance-choice>span{display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;column-gap:8px;row-gap:0;white-space:nowrap}
.attendance-choice small{display:inline;margin:0;white-space:nowrap}
.rsvp-preview{display:flex;align-items:center;justify-content:center;gap:10px}
.rsvp-preview .english-display{display:inline;margin:0}
.rsvp-preview:disabled{cursor:wait;opacity:.66}
.rsvp-error{margin:18px 0 0;padding:13px 15px;border:1px solid rgba(160,99,93,.35);background:rgba(255,247,245,.78);color:#81524f;text-align:center;font:400 14px/1.7 var(--font-body)}
@media(max-width:360px){
  .rsvp-section label:not(.attendance-choice)>.field-english,
  .rsvp-section legend>.field-english{margin-left:6px;font-size:12px}
  .attendance-choice>span{column-gap:6px}
}

/* V48 — one footer divider, one clear closing rhythm. */
.rsvp-section{padding-bottom:72px}
.rsvp-section form{margin:34px auto 0}
.invitation-ending{
  padding-top:64px;
}
.invitation-ending .ending-cn{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin:0;font-family:var(--font-zh-title)!important;font-size:27px;
  font-weight:400;font-style:normal;line-height:1.45;letter-spacing:.1em;
}
.invitation-ending .ending-amp{
  font-family:var(--font-en-secondary);font-size:.72em;letter-spacing:0;color:#806f7f;
}
.invitation-ending .signature{margin:4px 0 13px}

/* V51 — original plum, sage and apricot DM mark; rings repeat the cover motif. */
.dm-monogram{display:block;width:auto;object-fit:contain;opacity:1;filter:none}
.dm-monogram-ending{height:92px;margin:0 auto 17px}
.dm-monogram-success{height:64px;margin:0 auto 17px;opacity:1}
.invitation-ending .ending-rings{
  display:inline-flex;width:39px;height:32px;align-items:center;justify-content:center;
  margin:0 1px;line-height:0;vertical-align:-7px;
}
.invitation-ending .ending-rings img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-height:700px){.dm-monogram-ending{height:80px;margin-bottom:14px}}
@media(max-width:360px){.invitation-ending .ending-rings{width:34px;height:29px}}

/* V52 — music begins only after the guest's first tap, with a quiet persistent control. */
.music-toggle{
  position:absolute;z-index:24;top:max(18px,calc(env(safe-area-inset-top) + 10px));right:18px;
  width:42px;height:42px;padding:0;border:1px solid rgba(117,97,118,.22);border-radius:50%;
  display:grid;place-items:center;background:rgba(252,251,248,.76);color:#756176;
  box-shadow:0 5px 18px rgba(70,53,70,.08);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  cursor:pointer;transition:opacity .3s ease,transform .3s ease;
}
.music-toggle span{font:400 17px/1 Georgia,serif;transform:translateY(-1px)}
.music-toggle[aria-pressed="false"]{opacity:.5}
.music-toggle[aria-pressed="false"] span{opacity:.55}
.music-toggle:active{transform:scale(.94)}
.music-toggle[hidden]{display:none}

/* V53 — one composed wedding signature ending. */
.invitation-ending{
  position:relative;overflow:hidden;text-align:center;
  padding:64px clamp(22px,7vw,34px) max(84px,calc(76px + env(safe-area-inset-bottom)));
}
.signature-lockup{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
}
.dm-monogram-ending{height:80px;margin:0 auto 24px}
.invitation-ending .ending-cn{
  display:inline-flex;width:max-content;max-width:100%;align-items:center;justify-content:center;
  flex-wrap:nowrap;gap:8px;margin:0;white-space:nowrap;
}
.invitation-ending .ending-rings{
  display:inline-flex;flex:0 0 auto;width:44px;height:36px;margin:0;
  align-items:center;justify-content:center;vertical-align:baseline;transform:translateY(2px);
}
.invitation-ending .signature{
  font-size:27px;line-height:1.24;margin:8px 0 0;padding:.08em .12em .18em;
}
.invitation-ending .ending-date{
  margin:18px 0 0!important;font-size:14px!important;line-height:1.5!important;
}
.closing-statement{
  position:relative;z-index:2;margin:58px auto 0;text-align:center;
}
.closing-statement .closing-cn{
  margin:0;font:400 15px/1.8 var(--font-body);color:#625762;letter-spacing:.04em;
}
.closing-statement .english-quote{
  max-width:100%;margin:12px auto 0!important;padding:0;
  font-size:14px!important;line-height:1.65!important;color:#716872;opacity:.85;
  white-space:normal;overflow-wrap:normal;
}
.invitation-ending .replay-ending{
  position:relative;z-index:2;margin-top:54px;padding:10px 12px;
  font-size:12px;line-height:1.5;color:#846c84;opacity:.72;
}
.invitation-ending::before,.invitation-ending::after{
  width:150px;height:255px;bottom:20px;background-position:center bottom;background-size:cover;
  opacity:.15;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 23%,#000 58%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 23%,#000 58%);
}
.invitation-ending::before{left:-52px}
.invitation-ending::after{right:-52px;transform:scaleX(-1)}

@media(max-width:360px){
  .invitation-ending{padding-left:18px;padding-right:18px}
  .dm-monogram-ending{height:78px}
  .invitation-ending .ending-cn{gap:7px;font-size:25px}
  .invitation-ending .ending-rings{width:42px;height:35px}
  .invitation-ending .signature{font-size:26px}
  .closing-statement .english-quote{font-size:13px!important;letter-spacing:.015em}
  .invitation-ending::before{left:-62px}
  .invitation-ending::after{right:-62px}
}

/* First curated photo selection: protect faces, joined hands and gown hems. */
.story-photo>img{object-position:50% 60%}
.photo-wall-slide:nth-child(1) img{object-position:50% 58%}
.photo-wall-slide:nth-child(2) img{object-position:50% 55%}
.photo-wall-slide:nth-child(3) img{object-position:50% 52%}
.photo-wall-slide:nth-child(4) img{object-position:50% 55%}
.photo-wall-slide:nth-child(5) img{object-position:50% 78%}
.photo-wall-slide:nth-child(6) img{object-position:50% 78%}

/* Full wedding album with quiet controls and the same frame. */
.photo-wall-track{touch-action:pan-y}
.photo-wall-slide img{object-position:50% 60%!important}
.photo-wall-slide img[src*="2478"],.photo-wall-slide img[src*="3613"]{object-position:50% 78%!important}
.photo-wall-slide img[src*="3532"],.photo-wall-slide img[src*="1844"]{object-fit:contain;background:#f4f0eb}
.gallery-controls{position:absolute;z-index:3;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;color:#78677b}
.gallery-controls button{border:0;background:transparent;color:inherit;min-width:36px;min-height:40px;font:18px Georgia,serif;cursor:pointer}
#gallery-count{font:12px/1.5 var(--font-en-secondary);letter-spacing:.12em}
.locket-photo-shell img,#photo{filter:sepia(.12) saturate(.9) brightness(.97) contrast(.97)}

/* Refined garden arch: full-frame photographs, fine champagne edge and quiet botanicals. */
.photo-wall{
  padding:46px 0 64px;
  background:
    radial-gradient(ellipse at 50% 54%,rgba(225,211,197,.22),transparent 64%),
    linear-gradient(180deg,transparent,rgba(247,242,236,.34) 52%,transparent)
}
.photo-wall-shell{width:min(88vw,420px);aspect-ratio:3/4}
.photo-wall-window{
  inset:2.5% 8.5% 8%;
  border:1px solid rgba(166,126,94,.42);
  border-radius:50% 50% 5px 5px / 30% 30% 5px 5px;
  background:linear-gradient(145deg,#f8f4ef,#eee7df);
  box-shadow:
    0 13px 30px rgba(76,55,43,.08),
    0 0 0 5px rgba(252,250,247,.94),
    0 0 0 6px rgba(169,132,102,.2),
    0 0 0 10px rgba(250,247,243,.72)
}
.photo-wall-window::after{
  content:"";
  position:absolute;
  inset:7px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(203,171,143,.28);
  border-radius:inherit
}
.photo-wall-slide{
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:0;
  background:linear-gradient(145deg,#f8f4ef,#eee7df)
}
.photo-wall-slide img,
.photo-wall-slide img[src*="2478"],
.photo-wall-slide img[src*="3613"],
.photo-wall-slide img[src*="3532"],
.photo-wall-slide img[src*="1844"]{
  width:100%;
  height:100%;
  object-fit:cover!important;
  object-position:50% 58%!important;
  background:transparent;
  filter:sepia(.06) saturate(.92) brightness(.99) contrast(.98);
  box-shadow:none
}
.photo-wall-slide img[src*="2478"],
.photo-wall-slide img[src*="3613"]{object-position:50% 72%!important}
.photo-wall-slide img[src*="3532"],
.photo-wall-slide img[src*="1844"]{object-position:50% 50%!important}
.photo-wall-botanicals{
  inset:7% -5% -7%;
  width:110%;
  height:100%;
  object-fit:fill;
  opacity:.34;
  filter:saturate(.78) brightness(1.08);
  z-index:3;
  -webkit-mask-image:linear-gradient(to bottom,transparent 31%,rgba(0,0,0,.08) 46%,#000 74%);
  mask-image:linear-gradient(to bottom,transparent 31%,rgba(0,0,0,.08) 46%,#000 74%)
}
.gallery-controls{bottom:-14px;gap:4px;color:#827282}
.gallery-controls button{min-width:40px;min-height:44px;font-size:16px;opacity:.74}
#gallery-count{letter-spacing:.17em;font-size:11px}
@media(max-width:380px){
  .photo-wall{padding-top:40px;padding-bottom:58px}
  .photo-wall-shell{width:90vw}
  .photo-wall-botanicals{inset:7% -4% -7%;width:108%;height:100%}
}

/* V66 — invitation cues as fine editorial ornaments, not web-app buttons. */
.enter span{
  left:50%;right:auto;bottom:max(43px,env(safe-area-inset-bottom,0px));
  min-width:146px;padding:7px 18px 8px;
  transform:translateX(-50%);
  color:#513c54;text-shadow:0 1px 7px rgba(255,255,255,.98),0 0 16px rgba(255,255,255,.9);
  background:linear-gradient(90deg,transparent,rgba(255,252,248,.64) 22%,rgba(255,252,248,.64) 78%,transparent);
  border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none
}
.enter span::before{
  content:"";position:static;width:58px;height:1px;margin-bottom:3px;
  background:linear-gradient(90deg,transparent,rgba(148,104,83,.78),transparent);
  pointer-events:none
}
.enter span::after{
  content:"";width:4px;height:4px;margin-top:3px;background:#bd815b;
  transform:rotate(45deg);box-shadow:0 0 0 3px rgba(189,129,91,.09);
  animation:prompt-jewel 2.2s ease-in-out infinite
}
.enter span small{color:#836a76}

.continue-hint{
  position:absolute;z-index:5;left:50%;bottom:max(11px,env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:112px;padding:6px 18px 4px;transform:translate(-50%,8px);
  color:#5e4860;text-shadow:0 1px 6px #fff,0 0 12px rgba(255,255,255,.9);
  background:linear-gradient(90deg,transparent,rgba(252,250,247,.55),transparent);
  border:0;border-radius:0;box-shadow:none;
  font-family:var(--font-ui);font-size:12px;line-height:1.2;letter-spacing:.16em;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease,transform .55s ease,visibility 0s .55s
}
.continue-hint i{
  display:block;width:8px;height:8px;border-right:1px solid #a36e50;border-bottom:1px solid #a36e50;
  transform:rotate(45deg);animation:continue-nudge 1.8s ease-in-out infinite
}
.opening.is-reading .continue-hint:not(.is-dismissed){
  opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.65s
}

.gallery-controls{
  bottom:-20px;gap:2px;padding:4px 9px;
  color:#5a455c;
  background:linear-gradient(90deg,transparent,rgba(255,252,248,.88) 12%,rgba(255,252,248,.88) 88%,transparent);
  border:0;border-radius:0;
  box-shadow:inset 0 1px rgba(158,119,98,.27),inset 0 -1px rgba(116,87,116,.2);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
}
.gallery-controls::before,.gallery-controls::after{
  content:"";width:4px;height:4px;flex:0 0 4px;background:#bd815b;transform:rotate(45deg);opacity:.72
}
.gallery-controls button{
  min-width:38px;min-height:38px;padding:0;border-radius:0;opacity:.88;
  transition:color .2s ease,background-color .2s ease,transform .2s ease
}
.gallery-controls button:active{transform:scale(.9);background:transparent}
#gallery-count{min-width:58px;text-align:center;color:#5d4a5d;font-size:11px;letter-spacing:.14em}
#gallery-pause{
  min-width:32px;min-height:32px;margin:0 3px;color:#956342;
  border:1px solid rgba(181,123,83,.42);border-radius:50%;background:rgba(255,251,246,.38)
}
#gallery-pause[aria-pressed="true"]{color:#674d69;border-color:rgba(103,77,105,.4);background:rgba(255,251,246,.38)}

.controls button{
  color:#58425b;background:transparent;border:0;border-bottom:1px solid rgba(155,107,80,.36);
  border-radius:0;padding:8px 5px 6px;box-shadow:none;
  text-shadow:0 1px 6px rgba(255,255,255,.95)
}

@keyframes prompt-jewel{0%,100%{opacity:.45;box-shadow:0 0 0 3px rgba(189,129,91,.07)}50%{opacity:1;box-shadow:0 0 0 6px rgba(189,129,91,.13)}}
@keyframes continue-nudge{0%,100%{transform:translateY(-1px) rotate(45deg)}50%{transform:translateY(3px) rotate(45deg)}}
@media(max-width:380px){
  .enter span{bottom:max(37px,env(safe-area-inset-bottom,0px));padding:6px 16px 7px}
  .gallery-controls{bottom:-20px}
}
@media(prefers-reduced-motion:reduce){
  .enter span::after,.continue-hint i{animation:none}
}

/* V67 — small lace signatures connect interaction cues to the invitation card. */
.enter span::before{
  width:94px;height:27px;margin:0 0 -1px;
  background:url('assets/letter-lace.png') center bottom/94px auto no-repeat;
  filter:sepia(.08) drop-shadow(0 1px 1px rgba(76,55,64,.2));opacity:.86
}
.continue-hint::before{
  content:"";display:block;width:88px;height:23px;margin-bottom:-3px;
  background:url('assets/letter-lace.png') center bottom/88px auto no-repeat;
  filter:sepia(.08) drop-shadow(0 1px 1px rgba(76,55,64,.18));opacity:.76
}
.gallery-controls::before,.gallery-controls::after{
  width:34px;height:15px;flex:0 0 34px;background:url('assets/letter-lace.png') center bottom/34px auto no-repeat;
  filter:sepia(.08) drop-shadow(0 1px 1px rgba(76,55,64,.18));transform:none;opacity:.8
}
.gallery-controls::after{transform:scaleX(-1)}

.story-photo-window{
  width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:110px 110px 0 0;background:#eee7df
}
.story-photo>.story-photo-window>img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 59%;
  border-radius:0;transform:scale(1.085);transform-origin:50% 56%
}
@media(max-width:380px){
  .gallery-controls::before,.gallery-controls::after{width:27px;flex-basis:27px;background-size:27px auto}
  .story-photo>.story-photo-window>img{transform:scale(1.075)}
}