@font-face{font-family:"Wedding Serif";src:url("assets/fonts/noto-serif-sc-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Wedding Sans";src:url("assets/fonts/noto-sans-sc-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Wedding Brush";src:url("assets/fonts/zhi-mang-xing-subset.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Wedding Script";src:url("assets/fonts/great-vibes-subset.woff2") format("woff2");font-weight:400;font-display:swap}

:root{color-scheme:light;--paper:#f6f0e5;--paper2:#e9ddca;--ink:#3b2a26;--muted:#796d62;--gold:#b08a46;--gold2:#d6bd82;--red:#8c2630;--red2:#b64645;--plum:#443244;--line:rgba(99,75,51,.22);--serif:"Wedding Serif","Songti SC",serif;--sans:"Wedding Sans","PingFang SC",sans-serif;--brush:"Wedding Brush","STKaiti","KaiTi",serif;--script:"Wedding Script","Snell Roundhand","Segoe Script",cursive}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;color:var(--ink);font-family:var(--sans);background:#29231f;-webkit-font-smoothing:antialiased}
body.intro-open,body.modal-open{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
figure{margin:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wx-preview-image{position:fixed;top:0;left:-9999px;width:600px;height:600px;opacity:.01;pointer-events:none}

.page-deck{position:relative;width:min(100vw,560px);height:100svh;margin:0 auto;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior:contain;background:var(--paper);box-shadow:0 0 80px rgba(0,0,0,.34);scrollbar-width:none}
.page-deck::-webkit-scrollbar{display:none}
.page{position:relative;width:100%;height:100svh;min-height:580px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}
.page-motion{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.05s cubic-bezier(.18,.74,.18,1)}
.page.is-active .page-motion{opacity:1;transform:none}
.eyebrow{margin:0;font-family:var(--serif);font-size:9px;font-weight:700;letter-spacing:.27em;text-indent:.27em}
.eyebrow--gold{color:var(--gold)}
.eyebrow--red{color:var(--red)}
.line-lock{display:block;white-space:nowrap}
.button{display:grid;min-height:44px;place-items:center;padding:0 18px;border:1px solid;text-decoration:none;font-size:12px;letter-spacing:.14em;cursor:pointer}
.button--red{border-color:var(--red);color:#fff;background:var(--red)}
.button--gold{border-color:var(--gold);color:#6e5029;background:rgba(255,252,244,.72)}

.music-control{position:fixed;z-index:80;top:max(14px,env(safe-area-inset-top));left:calc(50% + min(230px,43vw));width:46px;height:46px;padding:0;border:0;border-radius:50%;color:#f7ecd8;background:rgba(75,47,39,.72);box-shadow:0 5px 18px rgba(22,12,8,.23);backdrop-filter:blur(8px);cursor:pointer}
.record-player{position:absolute;inset:7px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,rgba(255,255,255,.2) 4px 4.5px),#332826}
.record-player::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;border:2px solid #2f2523;border-radius:50%;background:var(--gold2);transform:translate(-50%,-50%)}
.record-player i{position:absolute;z-index:2;top:3px;right:3px;width:13px;height:2px;border-radius:2px;background:#e6d8bd;transform:rotate(48deg);transform-origin:right center}
.record-player i::after{content:"";position:absolute;left:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#e6d8bd}
.music-control[data-state="playing"] .record-player{animation:record-spin 3.2s linear infinite}

.page-progress{position:fixed;z-index:70;top:50%;left:calc(50% + min(248px,46vw));display:grid;gap:7px;transform:translateY(-50%)}
.page-progress button{width:6px;height:6px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(42,30,26,.24);transition:height .3s,background .3s,border-color .3s}
.page-progress button.is-current{height:20px;border-radius:9px;border-color:var(--gold2);background:var(--gold2)}

/* opening */
.intro{display:none}
.has-js .intro{position:fixed;z-index:100;inset:0;display:grid;grid-template-rows:1fr auto auto 1fr;justify-items:center;min-height:100svh;overflow:hidden;color:var(--ink);background:linear-gradient(135deg,#e7dccb,#faf6ee 50%,#d9c7af);perspective:1600px}
.intro__light{position:absolute;inset:-20%;background:radial-gradient(ellipse at 25% 12%,rgba(255,255,255,.9),transparent 34%),linear-gradient(115deg,transparent 25%,rgba(255,255,255,.42) 48%,transparent 68%);filter:blur(8px);animation:intro-light 8s ease-in-out infinite alternate}
.intro__heading{position:relative;z-index:5;align-self:end;margin:0 0 5svh;text-align:center}
.intro__heading p{margin:0 0 12px;font-family:var(--serif);font-size:9px;font-weight:700;letter-spacing:.27em;text-indent:.27em;color:#715a3a}
.intro__heading h1{margin:0;font-family:var(--brush);font-size:clamp(31px,9vw,45px);font-weight:400;letter-spacing:.05em}
.intro__heading h1 span{padding:0 .2em;color:var(--red);font-family:var(--serif);font-size:.65em}
.intro__heading time{display:block;margin-top:8px;color:var(--muted);font-family:var(--serif);font-size:10px;letter-spacing:.18em}
.intro__button{position:relative;z-index:8;min-width:142px;min-height:46px;margin-top:28px;border:1px solid rgba(72,50,38,.55);color:var(--ink);font-size:12px;letter-spacing:.22em;text-indent:.22em;background:rgba(255,251,244,.64);backdrop-filter:blur(8px);cursor:pointer}

.paper-envelope{position:relative;width:min(84vw,430px);aspect-ratio:1.48;transform-style:preserve-3d;filter:drop-shadow(0 28px 28px rgba(64,44,32,.18))}
.paper-envelope__back{position:absolute;inset:0;border:1px solid rgba(88,63,43,.16);background:linear-gradient(145deg,#e8ddcd,#d9c9b4)}
.paper-envelope__letter{position:absolute;z-index:2;top:8%;right:8%;left:8%;display:grid;height:84%;align-content:center;justify-items:center;padding:18px;border:1px solid rgba(92,70,47,.13);color:var(--ink);background:repeating-linear-gradient(0deg,rgba(126,102,72,.035) 0 1px,transparent 1px 31px),#fcf8ef;box-shadow:0 8px 22px rgba(60,40,28,.12);will-change:transform}
.paper-envelope__letter small{font-family:var(--serif);font-size:7px;font-weight:700;letter-spacing:.26em;text-indent:.26em;color:var(--gold)}
.paper-envelope__letter strong{margin:8px 0 3px;font-family:var(--script);font-size:clamp(38px,11vw,58px);font-weight:400;line-height:1}
.paper-envelope__letter strong i{padding:0 .08em;color:var(--red);font-style:normal}
.paper-envelope__letter>span{font-family:var(--serif);font-size:9px;letter-spacing:.18em;color:var(--muted)}
.paper-envelope__front{position:absolute;z-index:4;inset:0;clip-path:polygon(0 25%,50% 66%,100% 25%,100% 100%,0 100%);background:linear-gradient(145deg,#eee3d3 0 49.5%,#dfd0bc 50% 100%);border:1px solid rgba(86,62,42,.11)}
.paper-envelope__front::after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.5%,rgba(125,95,61,.09) 50%,transparent 50.5%),linear-gradient(-35deg,transparent 49.5%,rgba(125,95,61,.09) 50%,transparent 50.5%)}
.paper-envelope__flap{position:absolute;z-index:5;top:0;right:0;left:0;height:66%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(165deg,#eee5d8,#d6c5ae);transform-origin:top center;backface-visibility:visible;will-change:transform}
.paper-envelope__seal{position:absolute;z-index:7;top:45%;left:50%;width:43px;height:43px;border:1px solid rgba(255,220,190,.25);border-radius:50%;background:radial-gradient(circle at 35% 30%,#c66d61,#8d3031 70%);box-shadow:0 4px 12px rgba(82,30,29,.3),inset 0 0 0 4px rgba(255,225,200,.1);transform:translate(-50%,-50%)}
.paper-envelope__seal::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,226,194,.28);border-radius:50%}
.intro.is-opening .paper-envelope__seal{animation:seal-break .42s ease forwards}
.intro.is-opening .paper-envelope__flap{animation:flap-open .95s .28s cubic-bezier(.16,.76,.2,1) forwards}
.intro.is-opening .paper-envelope__letter{animation:letter-open 1.25s .92s cubic-bezier(.18,.74,.16,1) forwards}
.intro.is-opening .intro__heading{animation:fade-up .55s .15s ease forwards}
.intro.is-opening .intro__button{pointer-events:none;animation:fade-down .32s ease forwards}
.intro.is-leaving{animation:intro-leave .75s ease forwards}

/* cover */
.cover-page{display:grid;grid-template-rows:58% 42%;background:#fbfaf6}
.cover-triptych{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;background:#ddd}
.cover-triptych figure{position:relative;overflow:hidden;clip-path:inset(0 100% 0 0)}
.cover-page.is-active .cover-triptych figure{animation:panel-open .95s cubic-bezier(.18,.72,.2,1) forwards}
.cover-page.is-active .cover-triptych figure:nth-child(2){animation-delay:.1s}.cover-page.is-active .cover-triptych figure:nth-child(3){animation-delay:.2s}
.cover-triptych img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.93) brightness(1.05);transform:scale(1.08);transition:transform 7s ease}
.cover-page.is-active .cover-triptych img{transform:scale(1)}
.cover-triptych figure:nth-child(2) img{object-position:53% 45%}.cover-triptych figure:nth-child(3) img{object-position:49% 45%}
.cover-triptych figure>span{position:absolute;right:-.03em;bottom:-.13em;color:#fff;font-family:var(--serif);font-size:clamp(70px,24vw,125px);line-height:1;letter-spacing:-.1em;text-shadow:0 2px 12px rgba(0,0,0,.08);opacity:0;transform:translateY(30px)}
.cover-page.is-active .cover-triptych figure>span{animation:number-up .75s .5s ease forwards}
.cover-copy{display:grid;align-content:center;justify-items:center;padding:24px 18px 54px;text-align:center;opacity:0;transform:translateY(24px)}
.cover-page.is-active .cover-copy{animation:copy-up .8s .48s ease forwards}
.cover-copy h2{margin:10px 0 0;font-family:var(--brush);font-size:clamp(33px,9.5vw,48px);font-weight:400;letter-spacing:.04em}
.cover-copy h2 i{padding:0 .16em;color:var(--red);font-family:var(--serif);font-size:.58em;font-style:normal}
.script-name{margin:4px 0 0;font-family:var(--script);font-size:clamp(40px,12vw,62px);line-height:1;color:#2d2522}
.script-name i{color:var(--gold);font-style:normal}
.cover-date{display:flex;align-items:center;gap:11px;margin:9px 0 0;color:var(--red);font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.12em}.cover-date span{width:24px;height:1px;background:var(--gold)}
.page-cue{position:absolute;z-index:5;bottom:max(16px,env(safe-area-inset-bottom));left:50%;display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:9px;letter-spacing:.2em;transform:translateX(-50%)}
.page-cue i{width:1px;height:19px;background:var(--gold);animation:cue 1.6s ease-in-out infinite}

/* invitation */
.invitation-page{display:grid;align-content:center;gap:clamp(28px,6svh,54px);padding:64px 24px 48px;text-align:center;background:linear-gradient(rgba(139,101,58,.055) 1px,transparent 1px),radial-gradient(circle at 82% 10%,rgba(182,70,69,.08),transparent 28%),var(--paper);background-size:100% 40px,auto,auto}
.paper-grain{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);opacity:.45;transform:translateX(-100%)}
.invitation-page.is-active .paper-grain{animation:paper-light 3.4s ease .25s forwards}
.invitation-copy h2{margin:18px 0 0;font-family:var(--brush);font-size:clamp(25px,7vw,37px);font-weight:400;line-height:1.5}
.line-lock--accent{color:var(--red);font-size:1.18em}
.invitation-time{display:grid;gap:8px;margin:18px 0 0;color:var(--muted);font-size:12px;letter-spacing:.08em}.invitation-time b{color:var(--gold);font-family:var(--serif);font-size:13px}
.flip-clock{width:min(100%,440px);margin:auto}.flip-clock>p{margin:0 0 13px;color:var(--muted);font-size:10px;letter-spacing:.23em;text-indent:.23em}
.flip-clock__row{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:8px}
.flip-unit{display:grid;gap:7px}.flip-unit>span{color:var(--muted);font-size:10px}
.flip-card{position:relative;display:grid;height:63px;place-items:center;overflow:hidden;border:1px solid rgba(111,82,49,.18);border-radius:3px;background:linear-gradient(#eee3d0 0 49.5%,#dfd0b8 50%);box-shadow:0 7px 17px rgba(96,69,42,.11)}
.flip-card::after{content:"";position:absolute;right:0;left:0;top:50%;height:1px;background:rgba(93,65,38,.22)}
.flip-card strong{font-family:var(--serif);font-size:clamp(25px,7vw,38px);font-weight:500;color:#684c2f;font-variant-numeric:tabular-nums}
.flip-card.is-flipping strong{animation:flip-number .42s cubic-bezier(.35,.02,.2,1)}
.gold-rule{display:grid;grid-template-columns:1fr 9px 1fr;align-items:center;gap:10px;width:160px;margin:0 auto}.gold-rule i{height:1px;background:rgba(176,138,70,.52)}.gold-rule span{width:9px;height:9px;border:1px solid var(--gold);border-radius:50%}

/* photo story */
.portrait-page{background:#2d2425}.portrait-page__background{position:absolute;inset:0}.portrait-page__background img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 6s ease}.portrait-page.is-active .portrait-page__background img{transform:scale(1)}
.portrait-page__wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,13,17,.08),rgba(19,13,17,.24))}
.portrait-page--plum .portrait-page__background img{object-position:50% center}.portrait-page--plum .portrait-page__wash{background:linear-gradient(180deg,rgba(49,31,52,.02),rgba(34,24,37,.38))}
.floating-frame{position:absolute;z-index:2;width:41%;padding:5px;background:rgba(248,242,235,.94);box-shadow:0 18px 42px rgba(22,12,18,.32)}.floating-frame img{width:100%;aspect-ratio:.69;object-fit:cover}.floating-frame--one{left:7%;bottom:9%;transform:translate(-24px,30px) rotate(-3deg)}.floating-frame--two{right:7%;top:8%;transform:translate(24px,-24px) rotate(3deg)}
.portrait-page.is-active .floating-frame--one{transform:rotate(-3deg)}.portrait-page.is-active .floating-frame--two{transform:rotate(3deg)}
.portrait-mark{position:absolute;z-index:3;right:12%;bottom:13%;display:grid;color:#fff;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.26)}.portrait-mark span,.portrait-mark small{font-family:var(--serif);font-size:9px;letter-spacing:.2em}.portrait-mark strong{font-family:var(--serif);font-size:58px;font-weight:400;line-height:.9}
.portrait-page--gold .portrait-page__background img{object-position:55% center}.portrait-page--gold .portrait-page__wash{background:linear-gradient(180deg,rgba(57,34,19,.08),rgba(43,24,13,.43))}
.film-frame{position:absolute;z-index:2;width:58%;padding:7px 7px 24px;background:#eee2ce;box-shadow:0 19px 45px rgba(31,17,9,.34)}.film-frame img{width:100%;aspect-ratio:1.22;object-fit:cover}.film-frame--one{top:9%;left:5%;transform:translateX(-28px) rotate(-3deg)}.film-frame--two{right:5%;bottom:11%;transform:translateX(28px) rotate(3deg)}.portrait-page.is-active .film-frame--one{transform:rotate(-3deg)}.portrait-page.is-active .film-frame--two{transform:rotate(3deg)}
.hand-note{position:absolute;z-index:3;right:6%;top:49%;margin:0;color:#fff4df;font-family:var(--script);font-size:clamp(32px,9vw,48px);text-shadow:0 2px 15px rgba(34,18,8,.38)}
.portrait-page--red .portrait-page__background img{object-position:50% center}.portrait-page--red .portrait-page__wash{background:linear-gradient(180deg,rgba(85,8,16,.02),rgba(66,7,13,.38))}
.red-frame{position:absolute;z-index:2;right:7%;bottom:7%;width:54%;padding:6px;background:#e5c88f;box-shadow:0 20px 48px rgba(50,5,9,.36);transform:translate(25px,25px) rotate(2.5deg)}.red-frame img{width:100%;aspect-ratio:.77;object-fit:cover}.portrait-page.is-active .red-frame{transform:rotate(2.5deg)}
.double-happiness{position:absolute;z-index:3;left:7%;top:10%;color:#f2d9a3;font-family:var(--serif);font-size:88px;line-height:1;text-shadow:0 4px 18px rgba(80,7,12,.26)}
.red-caption{position:absolute;z-index:3;left:7%;bottom:12%;margin:0;color:#fff0d5;font-family:var(--brush);font-size:clamp(27px,7.8vw,42px);text-shadow:0 3px 16px rgba(69,5,11,.35)}

/* memory */
.memory-page{display:grid;grid-template-rows:auto auto auto auto;align-content:center;gap:clamp(24px,4svh,38px);padding:58px 0 34px;background:radial-gradient(circle at 12% 15%,rgba(182,70,69,.08),transparent 25%),linear-gradient(rgba(114,86,52,.05) 1px,transparent 1px),#efe6d8;background-size:auto,100% 42px,auto}
.memory-heading{text-align:center}.memory-heading h2{margin:11px 0 0;font-family:var(--brush);font-size:clamp(31px,8.4vw,44px);font-weight:400;color:var(--red)}
.photo-reel{position:relative;padding:22px 0;overflow:hidden;border-top:1px solid rgba(239,220,183,.8);border-bottom:1px solid rgba(239,220,183,.8);background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(239,220,183,.74) 10px 16px,transparent 16px 26px) top 6px left/auto 6px repeat-x,repeating-linear-gradient(90deg,transparent 0 10px,rgba(239,220,183,.74) 10px 16px,transparent 16px 26px) bottom 6px left/auto 6px repeat-x,#352a28}
.photo-reel::before,.photo-reel::after{content:"";position:absolute;z-index:4;top:0;bottom:0;width:28px;pointer-events:none}.photo-reel::before{left:0;background:linear-gradient(90deg,#352a28,transparent)}.photo-reel::after{right:0;background:linear-gradient(-90deg,#352a28,transparent)}
.photo-reel__track{display:flex;width:max-content;gap:9px;animation:reel 46s linear infinite;will-change:transform}.photo-reel__group{display:flex;flex-shrink:0;gap:9px}
.photo-reel button{flex:0 0 auto;width:116px;height:154px;padding:3px;border:0;background:#f0e2c8;box-shadow:0 7px 18px rgba(0,0,0,.24);cursor:zoom-in;transform:rotate(-.8deg)}.photo-reel button:nth-child(2n){transform:rotate(.8deg)}.photo-reel .photo-reel__square{width:150px}.photo-reel .photo-reel__wide{width:210px}.photo-reel button img{width:100%;height:100%;object-fit:cover}.photo-reel__wide img{object-position:50% 85%}
.growth-ribbon{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 22px}.growth-ribbon figure{position:relative;height:83px;padding:3px 3px 18px;background:#fff9ee;box-shadow:0 8px 20px rgba(74,47,32,.1);transform:rotate(-1.2deg)}.growth-ribbon figure:nth-child(2n){transform:rotate(1.2deg)}.growth-ribbon img{width:100%;height:100%;object-fit:cover}.growth-ribbon figcaption{position:absolute;right:5px;bottom:3px;color:var(--gold);font-family:var(--serif);font-size:8px}
.memory-foot{margin:0;text-align:center;color:var(--muted);font-family:var(--brush);font-size:22px}

/* venue */
.venue-page{display:grid;grid-template-rows:36% 64%;padding:22px;background:radial-gradient(circle at 86% 5%,rgba(182,70,69,.1),transparent 28%),var(--paper)}
.venue-map{padding-top:18px}.venue-map__placeholder{position:relative;height:100%;overflow:hidden;border:6px solid #fff9ee;outline:1px solid rgba(142,103,58,.24);background:linear-gradient(25deg,transparent 35%,rgba(180,153,111,.17) 35% 38%,transparent 38%),linear-gradient(118deg,transparent 43%,rgba(139,166,148,.2) 43% 48%,transparent 48%),#dfd6c4;box-shadow:0 13px 30px rgba(78,54,36,.13)}
.venue-map__placeholder::after{content:"地图截图位置";position:absolute;right:10px;bottom:8px;color:rgba(80,64,48,.55);font-size:8px;letter-spacing:.15em}.venue-map__placeholder>small{position:absolute;top:10px;left:12px;color:#745b38;font-family:var(--serif);font-size:9px;font-weight:700;letter-spacing:.18em}
.map-road{position:absolute;height:8px;border:2px solid rgba(255,252,241,.9);border-right:0;border-left:0;border-radius:50%;background:#c8bda9}.map-road--one{top:18%;right:-10%;left:-10%;transform:rotate(-12deg)}.map-road--two{top:58%;right:-15%;left:-15%;transform:rotate(16deg)}.map-road--three{top:8%;bottom:2%;left:61%;width:8px;height:auto;border-top:0;border-bottom:0;border-right:2px solid rgba(255,252,241,.9);border-left:2px solid rgba(255,252,241,.9);transform:rotate(7deg)}
.map-pin{position:absolute;top:50%;left:55%;width:28px;height:34px;border-radius:50% 50% 50% 0;background:var(--red);transform:translate(-50%,-68%) rotate(-45deg);box-shadow:0 7px 14px rgba(82,28,29,.25)}.map-pin b{position:absolute;top:8px;left:8px;width:12px;height:12px;border-radius:50%;background:#f4e6cb}
.venue-content{display:grid;align-content:center;padding:20px 5px 0;text-align:center}.venue-content h2{margin:9px 0 12px;font-family:var(--brush);font-size:clamp(25px,7vw,37px);font-weight:400;color:var(--red)}
.venue-date{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 auto 11px}.venue-date strong{font-family:var(--serif);font-size:37px;font-weight:400;color:var(--gold)}.venue-date span{padding-left:12px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.6;text-align:left}
.venue-content address{font-style:normal}.venue-content address h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:700}.venue-content address p{margin:4px 0;color:var(--muted);font-size:11px;line-height:1.55}.venue-content address small{color:var(--gold);font-size:9px}
.venue-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}

/* family + closing */
.family-page{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:64px 22px 24px;background:radial-gradient(circle at 50% 52%,rgba(214,189,130,.19),transparent 47%),linear-gradient(rgba(124,93,57,.04) 1px,transparent 1px),#f5eee3;background-size:auto,100% 40px,auto}
.family-halo{position:absolute;z-index:-1;top:19%;left:50%;width:78%;aspect-ratio:1;border:1px solid rgba(176,138,70,.22);border-radius:50%;transform:translateX(-50%)}.family-halo::after{content:"";position:absolute;inset:8%;border:1px dashed rgba(140,38,48,.13);border-radius:50%}
.family-copy{text-align:center}.family-copy h2{margin:10px 0 0;font-family:var(--brush);font-size:clamp(27px,7.5vw,40px);font-weight:400;color:var(--red)}
.family-illustration{align-self:end;width:min(88%,430px);max-height:70svh;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 18px rgba(73,46,31,.13))}
.family-ornament{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:150px;color:var(--gold);font-family:var(--serif);font-size:9px;letter-spacing:.15em}.family-ornament i{height:1px;background:rgba(176,138,70,.48)}
.closing-page{display:grid;grid-template-rows:1fr auto auto 1fr;justify-items:center;padding:48px 20px 30px;background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.7),transparent 30%),linear-gradient(135deg,#e5d8c7,#f8f2e8 52%,#d6c4ab)}
.closing-copy{align-self:end;margin-bottom:9svh;text-align:center}.closing-copy h2{margin:11px 0 0;font-family:var(--brush);font-size:clamp(29px,8vw,43px);font-weight:400;color:var(--red)}
.paper-envelope--closing .paper-envelope__flap{z-index:1;transform:rotateX(180deg)}.paper-envelope--closing .paper-envelope__letter{transform:translateY(-53%)}.paper-envelope--closing .paper-envelope__seal{opacity:0;transform:translate(-50%,-50%) scale(.72)}
.closing-page.is-active .paper-envelope--closing .paper-envelope__letter{animation:letter-close 2.7s .5s cubic-bezier(.28,.02,.15,1) forwards}.closing-page.is-active .paper-envelope--closing .paper-envelope__flap{animation:flap-close .92s 2.7s cubic-bezier(.22,.03,.16,.98) forwards}.closing-page.is-active .paper-envelope--closing .paper-envelope__seal{animation:seal-close .5s 3.58s ease forwards}
.closing-page>time{margin-top:34px;color:var(--muted);font-family:var(--serif);font-size:9px;letter-spacing:.17em}

/* overlays */
.photo-lightbox,.rsvp-modal{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));background:rgba(29,20,20,.91);backdrop-filter:blur(9px)}
.photo-lightbox img{max-width:min(92vw,620px);max-height:78svh;object-fit:contain;box-shadow:0 18px 55px rgba(0,0,0,.42)}.photo-lightbox p{margin:12px 0 0;color:#eee1ce;font-size:11px}.photo-lightbox__close,.rsvp-panel__close{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:#fff;font-size:26px;line-height:1;background:rgba(0,0,0,.2)}
.rsvp-modal{overflow:auto;place-items:start center;background:rgba(42,28,25,.88)}.rsvp-panel{position:relative;width:min(100%,520px);margin:auto;padding:35px 24px 30px;color:var(--ink);background:var(--paper);box-shadow:0 24px 70px rgba(0,0,0,.32)}.rsvp-panel__close{top:12px;right:12px;border-color:rgba(80,57,40,.25);color:var(--ink)}.rsvp-panel header{text-align:center}.rsvp-panel header h2{margin:8px 0 4px;font-family:var(--brush);font-size:37px;font-weight:400;color:var(--red)}.rsvp-panel header>p:last-child{margin:0;color:var(--muted);font-size:11px}
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.rsvp-form{display:grid;gap:16px;margin-top:25px}.field{display:grid;gap:7px}.field>span,.field-group legend{color:#705d4f;font-size:11px;letter-spacing:.07em}.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:0;color:var(--ink);background:rgba(255,255,255,.45);padding:11px 10px}.field textarea{border:1px solid var(--line);resize:vertical}.field-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0}.field-group legend{grid-column:1/-1;margin-bottom:7px}.field-group label{display:flex;align-items:center;gap:6px;padding:9px;border:1px solid var(--line);font-size:11px}.button--submit{width:100%;border-radius:0}.form-note{margin:0;color:var(--muted);font-size:9px;line-height:1.6;text-align:center}.rsvp-result{margin-top:22px;padding:18px;border:1px solid rgba(176,138,70,.35);text-align:center}.rsvp-result h3{margin:0 0 7px;font-family:var(--brush);font-size:28px;color:var(--red)}.rsvp-result p{margin:0;color:var(--muted);font-size:11px}
.toast{position:fixed;z-index:150;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));left:50%;max-width:calc(100% - 42px);padding:11px 16px;color:#fff;font-size:11px;text-align:center;background:rgba(74,38,37,.94);transform:translateX(-50%);box-shadow:0 10px 26px rgba(0,0,0,.2)}

@keyframes record-spin{to{transform:rotate(360deg)}}
@keyframes intro-light{from{transform:translateX(-3%) rotate(-3deg)}to{transform:translateX(3%) rotate(2deg)}}
@keyframes seal-break{to{opacity:0;transform:translate(-50%,-60%) scale(.65)}}
@keyframes flap-open{0%{z-index:5;transform:rotateX(0)}49%{z-index:5}50%,100%{z-index:1;transform:rotateX(180deg)}}
@keyframes letter-open{0%{transform:translateY(0)}76%{transform:translateY(-58%)}100%{transform:translateY(-54%)}}
@keyframes fade-up{to{opacity:0;transform:translateY(-16px)}}@keyframes fade-down{to{opacity:0;transform:translateY(12px)}}
@keyframes intro-leave{to{opacity:0;transform:scale(1.02)}}
@keyframes panel-open{to{clip-path:inset(0)}}@keyframes number-up{to{opacity:1;transform:none}}@keyframes copy-up{to{opacity:1;transform:none}}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.65);transform-origin:bottom}50%{opacity:1;transform:scaleY(1)}}
@keyframes paper-light{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes flip-number{0%{transform:rotateX(0);opacity:1}49%{transform:rotateX(-90deg);opacity:.25}50%{transform:rotateX(90deg);opacity:.25}100%{transform:rotateX(0);opacity:1}}
@keyframes reel{to{transform:translateX(calc(-50% - 4.5px))}}
@keyframes letter-close{0%,28%{opacity:1;transform:translateY(-53%)}88%{opacity:1;transform:translateY(4%)}100%{opacity:0;transform:translateY(6%)}}
@keyframes flap-close{0%{z-index:1;transform:rotateX(180deg)}49%{z-index:1}50%,100%{z-index:6;transform:rotateX(0)}}
@keyframes seal-close{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (max-width:620px){
  .page-deck{width:100vw;box-shadow:none}.page-progress{left:auto;right:8px}.music-control{left:auto;right:12px}.page{min-height:540px}
}
@media (max-width:370px){
  .invitation-page{padding-right:18px;padding-left:18px}.invitation-copy h2{font-size:23px}.venue-page{padding:15px}.venue-content h2{font-size:23px}.venue-content address h3{font-size:15px}.photo-reel button{width:100px;height:136px}.photo-reel .photo-reel__wide{width:184px}.growth-ribbon{padding:0 15px}.family-copy h2{font-size:25px}
}
.venue-content h2{font-size:clamp(20px,5.7vw,32px)}
.family-copy h2{font-size:clamp(19px,5.5vw,32px)}
.closing-copy h2{font-size:clamp(22px,6.2vw,34px)}
@media (max-width:370px){.venue-content h2{font-size:20px}.family-copy h2{font-size:19px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.page-deck{scroll-behavior:auto}.page-motion{opacity:1;transform:none}.cover-triptych figure{clip-path:none}.cover-triptych figure>span,.cover-copy{opacity:1;transform:none}.photo-reel{overflow-x:auto}.photo-reel__track{animation:none}
}