@font-face{font-family:"Wedding Serif";src:url("assets/fonts/noto-serif-sc-subset.974b5a3def.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Wedding Sans";src:url("assets/fonts/noto-sans-sc-subset.4989b83b7b.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Wedding Brush";src:url("assets/fonts/zhi-mang-xing-subset.5005d4f457.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Wedding Script";src:url("assets/fonts/great-vibes-subset.df6ff3b832.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);--deck-width:min(100vw,calc(100svh * .6661),560px);--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:absolute;top:0;left:-9999px;width:300px;height:300px;opacity:.01;pointer-events:none}

.page-deck{position:relative;width:var(--deck-width);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::after{content:"";position:absolute;z-index:60;inset:0;pointer-events:none;background:linear-gradient(180deg,#f8f3ea,#eadfce);opacity:1;transform:translateY(0)}
.page.is-active::after{animation:page-reveal .72s cubic-bezier(.22,.72,.2,1) forwards}
.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));right:calc((100vw - var(--deck-width))/2 + 12px);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%;right:calc((100vw - var(--deck-width))/2 + 8px);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.5;transform-style:preserve-3d;filter:drop-shadow(0 24px 24px rgba(64,44,32,.17))}
.paper-envelope::before{content:"";position:absolute;right:5%;bottom:-11%;left:5%;height:18%;border-radius:50%;background:rgba(78,54,38,.18);filter:blur(18px);transform:scaleY(.48)}
.paper-envelope__back{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(88,63,43,.18);background:repeating-linear-gradient(14deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),linear-gradient(145deg,#eadfce,#d7c5ad)}
.paper-envelope__back::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.2);pointer-events:none}
.paper-envelope__letter{position:absolute;z-index:2;top:9%;right:8%;left:8%;display:grid;height:82%;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,opacity}
.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 22%,50% 67%,100% 22%,100% 100%,0 100%);border:1px solid rgba(86,62,42,.12);background:linear-gradient(34deg,rgba(203,185,160,.25) 0 49.5%,transparent 50%) left bottom/50% 100% no-repeat,linear-gradient(-34deg,rgba(236,225,208,.6) 0 49.5%,transparent 50%) right bottom/50% 100% no-repeat,linear-gradient(160deg,#eee3d3,#d9c7ae)}
.paper-envelope__front::after{content:"";position:absolute;inset:0;background:linear-gradient(34deg,transparent 49.4%,rgba(116,85,57,.13) 49.8%,transparent 50.3%),linear-gradient(-34deg,transparent 49.4%,rgba(116,85,57,.1) 49.8%,transparent 50.3%),repeating-linear-gradient(10deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.paper-envelope__flap{position:absolute;z-index:5;top:-1px;right:-1px;left:-1px;height:68%;clip-path:polygon(0 0,100% 0,50% 100%);border-top:1px solid rgba(255,255,255,.28);background:repeating-linear-gradient(16deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(165deg,#efe6d8,#d3c0a7);transform-origin:top center;backface-visibility:visible;will-change:transform}
.paper-envelope__flap::after{content:"";position:absolute;inset:0;background:linear-gradient(146deg,transparent 49.7%,rgba(112,82,54,.09) 50%,transparent 50.3%)}
.paper-envelope__seal{position:absolute;z-index:7;top:46%;left:50%;width:43px;height:43px;border:1px solid rgba(255,220,190,.25);border-radius:50%;background:radial-gradient(circle at 34% 28%,#d17b6c 0 9%,#b34f4b 26%,#8c2d30 73%,#742328 100%);box-shadow:0 5px 12px rgba(82,30,29,.32),inset 0 0 0 3px rgba(255,225,200,.08),inset 2px 2px 4px rgba(255,235,215,.14);transform:translate(-50%,-50%)}
.paper-envelope__seal::after{content:"";position:absolute;inset:8px;border:1px double rgba(255,226,194,.3);border-radius:50%}
.paper-envelope--intro .paper-envelope__letter{opacity:0}
.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:.075em;bottom:.012em;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}
.intro-open .cover-page.is-active::after{opacity:1;transform:translateY(0);animation:none}.intro-open .cover-page.is-active .cover-triptych figure{clip-path:inset(0 100% 0 0);animation:none}.intro-open .cover-page.is-active .cover-triptych img{transform:scale(1.08)}.intro-open .cover-page.is-active .cover-triptych figure>span{opacity:0;transform:translateY(30px);animation:none}.intro-open .cover-page.is-active .cover-copy{opacity:0;transform:translateY(24px);animation:none}
.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;perspective:900px}.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:8px}.flip-unit>span{color:#8b755d;font-family:var(--serif);font-size:10px;font-weight:650;letter-spacing:.16em}
.flip-card{position:relative;display:grid;height:67px;place-items:center;overflow:hidden;border:1px solid rgba(79,61,43,.34);border-radius:5px;background:linear-gradient(180deg,#d8cbb7 0%,#c9b99f 49.2%,#b5a287 50.8%,#cbb99d 100%);box-shadow:0 11px 18px rgba(75,53,33,.2),inset 0 1px 0 rgba(255,255,255,.52),inset 0 -8px 13px rgba(82,61,40,.1);transform-style:preserve-3d}
.flip-card::after{content:"";position:absolute;z-index:4;right:0;left:0;top:50%;height:2px;background:linear-gradient(90deg,rgba(64,48,34,.48),rgba(255,255,255,.17) 18%,rgba(55,40,28,.45) 50%,rgba(255,255,255,.14) 82%,rgba(64,48,34,.48));box-shadow:0 1px 0 rgba(255,255,255,.17)}
.flip-card::before{content:"";position:absolute;z-index:5;top:50%;left:4px;width:4px;height:10px;border-radius:1px;background:#79654e;box-shadow:calc(100% + var(--flip-hinge-span,50px)) 0 #79654e;transform:translateY(-50%)}
.flip-card strong{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(27px,7.4vw,40px);font-weight:650;line-height:1;color:#4f3b29;text-shadow:0 1px 0 rgba(255,255,255,.4);font-variant-numeric:tabular-nums;transform-origin:50% 50%;backface-visibility:hidden}
.flip-card.is-flipping strong{animation:mechanical-flip .58s cubic-bezier(.36,.03,.2,1)}
.flip-unit:first-child .flip-card{--flip-hinge-span:calc(100% - 16px)}
.flip-unit:not(:first-child) .flip-card{--flip-hinge-span:calc(100% - 16px)}
.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 — restrained editorial layouts, with one clear primary image */
.portrait-page{padding:42px 23px 27px;background:#2d2425}
.editorial-rule{position:absolute;z-index:2;top:22px;right:23px;left:23px;height:1px;background:rgba(255,255,255,.28)}
.editorial-rule::before,.editorial-rule::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:currentColor}.editorial-rule::before{left:0}.editorial-rule::after{right:0}
.editorial-primary{height:52%;padding:6px;overflow:hidden;background:#f5f0e7;box-shadow:0 18px 42px rgba(18,10,14,.22)}
.editorial-primary img,.editorial-secondary img,.red-editorial img{width:100%;height:100%;object-fit:contain}
.editorial-footer{display:grid;height:48%;gap:18px;padding-top:18px}
.editorial-footer--plum{grid-template-columns:.82fr 1.18fr}
.editorial-date{align-self:center;display:grid;color:#e6dbc9;text-transform:uppercase}
.editorial-date>span{font-family:var(--serif);font-size:8px;font-weight:700;letter-spacing:.25em}
.editorial-date>strong{margin:5px 0 0;font-family:var(--serif);font-size:58px;font-weight:300;line-height:.86}
.editorial-date>small{font-family:var(--serif);font-size:9px;letter-spacing:.28em}
.editorial-date>i{width:38px;height:1px;margin:13px 0;background:var(--gold2)}
.editorial-date>b{font-family:var(--serif);font-size:7px;font-weight:500;line-height:1.65;letter-spacing:.14em}
.editorial-secondary{min-height:0;padding:5px;background:#f5f0e7;box-shadow:0 14px 32px rgba(18,10,14,.2)}
.portrait-page--plum{color:#efe9df;background:radial-gradient(circle at 87% 8%,rgba(164,142,178,.16),transparent 30%),linear-gradient(152deg,#25232d,#413a4b)}
.portrait-page--plum .editorial-rule{color:#c4adcf}
.editorial-primary--plum{background:#ddd7df}.editorial-primary--plum img{object-fit:cover;object-position:center center}
.editorial-secondary--plum img{object-fit:cover;object-position:center 20%}
.portrait-page--gold{background:radial-gradient(circle at 12% 8%,rgba(255,232,187,.36),transparent 31%),linear-gradient(145deg,#e9d7bb,#b18a5f)}
.portrait-page--gold .editorial-rule{color:#7c5b3e;background:rgba(91,62,37,.28)}
.editorial-primary--gold{height:51%;background:#f2e5cf}.editorial-primary--gold img{object-fit:cover;object-position:center 19%}
.editorial-footer--gold{grid-template-columns:1.25fr .75fr;height:49%}
.editorial-secondary--gold{background:#f0e3cf}.editorial-secondary--gold img{object-fit:cover;object-position:center center}
.editorial-signature{align-self:center;color:#4d3325;text-align:center}
.editorial-signature small{display:block;font-family:var(--serif);font-size:7px;font-weight:700;letter-spacing:.22em}
.editorial-signature strong{display:block;margin:9px -8px 7px;font-family:var(--script);font-size:clamp(31px,8.5vw,44px);font-weight:400;line-height:.78}
.editorial-signature strong i{color:var(--red);font-style:normal}.editorial-signature span{font-family:var(--serif);font-size:8px;letter-spacing:.12em}
.portrait-page--red{padding:26px 22px 24px;background:radial-gradient(circle at 90% 8%,rgba(234,198,123,.17),transparent 27%),linear-gradient(145deg,#801923,#a92f35 58%,#6f111b)}
.red-editorial{display:grid;height:100%;grid-template-rows:64% 36%;gap:15px}
.red-editorial__primary{min-height:0;padding:6px;background:#f7ebd8;box-shadow:0 17px 38px rgba(64,5,10,.3)}
.red-editorial__primary img{object-fit:cover;object-position:center 20%;background:#f8f6f0}
.red-editorial__side{position:relative;display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr);gap:16px;min-height:0;align-items:center}
.red-editorial__secondary{height:100%;min-height:0;padding:5px;background:#e7c987;box-shadow:0 13px 28px rgba(64,5,10,.27)}
.red-editorial__secondary img{object-fit:contain;background:#f7f4ed}
.double-happiness{position:absolute;z-index:-1;right:-4px;top:-13px;color:rgba(242,217,163,.16);font-family:var(--serif);font-size:104px;line-height:1}
.red-caption{min-width:0;align-self:end;margin:0 0 18px;color:#fff0d5;font-family:var(--brush);font-size:clamp(20px,5.5vw,30px);line-height:1.28;text-shadow:0 3px 16px rgba(69,5,11,.24)}

/* 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 .photo-reel__costume{width:150px;background:#eee9df}.photo-reel button img{width:100%;height:100%;object-fit:cover}.photo-reel__wide img{object-position:50% 85%}.photo-reel__costume img{object-fit:contain;object-position:center}
.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;display:grid;height:100%;place-content:center;justify-items:center;gap:6px;overflow:hidden;border:6px solid #fff9ee;outline:1px solid rgba(142,103,58,.24);text-align:center;background:radial-gradient(circle at 50% 48%,rgba(140,38,48,.08) 0 35px,transparent 36px),repeating-radial-gradient(circle at 50% 48%,transparent 0 42px,rgba(176,138,70,.12) 43px 44px),linear-gradient(135deg,#e6ddce,#d8cbb7);box-shadow:0 13px 30px rgba(78,54,36,.13)}
.venue-map__placeholder>small{position:absolute;top:11px;left:13px;color:#745b38;font-family:var(--serif);font-size:8px;font-weight:700;letter-spacing:.2em}.venue-map__placeholder>strong{margin-top:4px;color:#533b2c;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.05em}.venue-map__placeholder>p{margin:0;color:#715d4c;font-size:9px;letter-spacing:.08em}.venue-map__placeholder>em{margin-top:2px;color:#8c6b42;font-size:8px;font-style:normal;letter-spacing:.1em}
.map-pin{position:relative;width:30px;height:36px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);box-shadow:0 7px 14px rgba(82,28,29,.25)}.map-pin b{position:absolute;top:9px;left:9px;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;gap:9px;width:min(100%,250px);margin:14px auto 0}

/* 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;gap:0;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:7svh;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)}
.closing-card{position:relative;align-self:center;display:grid;width:min(86%,390px);min-height:290px;align-content:center;justify-items:center;padding:36px 24px;overflow:hidden;border:1px solid rgba(133,91,47,.27);text-align:center;background:rgba(255,251,243,.78);box-shadow:0 18px 42px rgba(82,52,35,.13)}
.closing-card::before,.closing-card::after{content:"";position:absolute;width:53px;height:53px;border-color:rgba(176,138,70,.35);border-style:solid}.closing-card::before{top:8px;left:8px;border-width:1px 0 0 1px}.closing-card::after{right:8px;bottom:8px;border-width:0 1px 1px 0}
.closing-card__number{position:absolute;right:7px;top:-20px;color:rgba(140,38,48,.055);font-family:var(--serif);font-size:140px;line-height:1}
.closing-card>small{color:var(--gold);font-family:var(--serif);font-size:8px;font-weight:700;letter-spacing:.24em}.closing-card>strong{margin:14px 0 7px;color:var(--ink);font-family:var(--brush);font-size:clamp(29px,8vw,42px);font-weight:400}.closing-card>strong i{padding:0 .12em;color:var(--red);font-family:var(--serif);font-size:.55em;font-style:normal}.closing-card>p{margin:0;color:var(--muted);font-family:var(--serif);font-size:11px;line-height:1.8;letter-spacing:.1em}.closing-card__rule{display:grid;grid-template-columns:1fr 7px 1fr;align-items:center;gap:9px;width:130px;margin:17px 0 11px}.closing-card__rule i{height:1px;background:rgba(176,138,70,.52)}.closing-card__rule b{width:7px;height:7px;border:1px solid var(--red);border-radius:50%}.closing-card>em{font-family:var(--script);font-size:31px;font-style:normal;color:#5a3b2e}
.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:30px;color:var(--muted);font-family:var(--serif);font-size:9px;letter-spacing:.17em}
.icp-link{margin-top:9px;color:#8d7c6c;font-size:9px;line-height:1.4;text-decoration:none;letter-spacing:.04em}

/* overlays */
.photo-lightbox{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{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)}
.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 page-reveal{0%{opacity:.94;transform:translateY(0)}100%{opacity:0;transform:translateY(-100%)}}
@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%{opacity:0;transform:translateY(0)}12%{opacity:1}76%{opacity:1;transform:translateY(-58%)}100%{opacity:1;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:var(--deck-width);box-shadow:none}.page-progress{right:calc((100vw - var(--deck-width))/2 + 8px)}.music-control{right:calc((100vw - var(--deck-width))/2 + 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 (max-height:620px){.page{min-height:100svh}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.page::after{display:none}.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}
}

/* --------------------------------------------------------------------------
   V8 — real page deck, editorial photo layouts and satin-envelope treatment
   -------------------------------------------------------------------------- */

body{overscroll-behavior:none;touch-action:pan-x pan-y}
.page-deck{position:relative;overflow:hidden;perspective:1500px;transform-style:preserve-3d;scroll-snap-type:none;scroll-behavior:auto}
.page{position:absolute;inset:0;height:100%;min-height:0;visibility:hidden;overflow:hidden;opacity:0;transform:translateY(7%) scale(.985);transform-origin:50% 100%;backface-visibility:hidden;will-change:transform,opacity,clip-path}
.page::after{display:block;z-index:65;opacity:0;transform:none;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(74,49,33,.18) 76%,rgba(255,255,255,.63));pointer-events:none}
.page.is-active{z-index:2;visibility:visible;opacity:1;transform:none}
.page.is-active::after{animation:none;opacity:0}
.page.is-leaving-forward,.page.is-leaving-backward,.page.is-entering-forward,.page.is-entering-backward{visibility:visible;pointer-events:none}
.page.is-leaving-forward{z-index:3;animation:v8-page-out-forward .82s cubic-bezier(.45,.02,.18,1) both}
.page.is-entering-forward{z-index:4;animation:v8-page-in-forward .82s cubic-bezier(.22,.72,.18,1) both}
.page.is-leaving-backward{z-index:3;animation:v8-page-out-backward .78s cubic-bezier(.45,.02,.18,1) both}
.page.is-entering-backward{z-index:4;animation:v8-page-in-backward .78s cubic-bezier(.22,.72,.18,1) both}
.page.is-entering-forward::after,.page.is-entering-backward::after{animation:v8-fold-shadow .82s ease both}
.page-motion{opacity:0;transform:translateY(22px);transition:opacity .7s ease .12s,transform .82s cubic-bezier(.18,.74,.18,1) .12s}
.page.is-active .page-motion,.page.is-entering-forward .page-motion,.page.is-entering-backward .page-motion{opacity:1;transform:none}

/* satin background inspired by the restored Canva references */
.intro{background:#e9dfd1}
.silk-field{position:absolute;z-index:-2;inset:-12%;overflow:hidden;background:linear-gradient(132deg,#eee6db 0%,#d9c9b5 28%,#fbf8f1 51%,#d8c6ae 76%,#efe6d9 100%);filter:saturate(.76)}
.silk-field::before{content:"";position:absolute;inset:-8%;background:radial-gradient(ellipse at 8% 35%,rgba(255,255,255,.9),transparent 25%),radial-gradient(ellipse at 78% 18%,rgba(255,255,255,.75),transparent 28%),linear-gradient(108deg,transparent 17%,rgba(255,255,255,.62) 31%,rgba(139,112,82,.08) 42%,transparent 55%,rgba(255,255,255,.54) 72%,transparent 86%);filter:blur(13px);animation:silk-drift-a 9s ease-in-out infinite alternate}
.silk-field::after{content:"";position:absolute;inset:-18%;background:repeating-linear-gradient(116deg,transparent 0 11%,rgba(255,255,255,.21) 15%,rgba(117,91,65,.08) 20%,transparent 27%);filter:blur(20px);opacity:.72;animation:silk-drift-b 12s ease-in-out infinite alternate}
.silk-field i,.silk-field b,.silk-field span{position:absolute;display:block;width:70%;height:145%;top:-20%;border-radius:48%;filter:blur(18px);opacity:.55;will-change:transform}
.silk-field i{left:-22%;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(222,208,188,.02));transform:rotate(19deg);animation:silk-fold-one 11s ease-in-out infinite alternate}
.silk-field b{right:-28%;background:linear-gradient(90deg,rgba(151,124,94,.12),rgba(255,255,255,.68));transform:rotate(-17deg);animation:silk-fold-two 13s ease-in-out infinite alternate}
.silk-field span{left:27%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),rgba(145,116,83,.09),transparent);transform:rotate(8deg);animation:silk-fold-three 10s ease-in-out infinite alternate}
.intro__heading{margin-bottom:3.3svh}
.intro__heading time{font-size:12px;font-weight:650;letter-spacing:.2em}
.paper-envelope{filter:drop-shadow(0 28px 30px rgba(62,39,24,.2)) drop-shadow(0 3px 3px rgba(255,255,255,.3))}
.paper-envelope__back,.paper-envelope__front,.paper-envelope__flap{background-size:180% 180%;animation:envelope-sheen 9s ease-in-out infinite alternate}
.paper-envelope__back{background-image:linear-gradient(116deg,rgba(255,255,255,.62),transparent 24%,rgba(146,112,74,.12) 48%,rgba(255,255,255,.48) 72%,transparent),repeating-linear-gradient(14deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),linear-gradient(145deg,#eee3d2,#cfb99c)}
.paper-envelope__front{background-image:linear-gradient(34deg,rgba(203,185,160,.25) 0 49.5%,transparent 50%),linear-gradient(-34deg,rgba(240,230,214,.66) 0 49.5%,transparent 50%),linear-gradient(116deg,rgba(255,255,255,.4),transparent 36%,rgba(117,82,50,.08) 55%,rgba(255,255,255,.36)),linear-gradient(160deg,#efe5d6,#d5c0a3);background-position:left bottom,right bottom,center,center;background-size:50% 100%,50% 100%,180% 180%,180% 180%;background-repeat:no-repeat}
.paper-envelope__flap{background-image:linear-gradient(116deg,rgba(255,255,255,.58),transparent 34%,rgba(111,76,45,.1) 56%,rgba(255,255,255,.35)),repeating-linear-gradient(16deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(165deg,#f2e9dc,#ceb89a)}
.intro__button{box-shadow:0 10px 26px rgba(83,57,37,.1);transition:background .25s,transform .25s}
.intro__button:active{transform:scale(.97);background:rgba(255,255,255,.8)}

/* invitation */
.invitation-copy h2{display:grid;gap:4px}
.invitation-copy .invitation-lead{font-size:1.08em;letter-spacing:.16em;text-indent:.16em}
.invitation-copy .line-lock--accent{font-size:.96em;letter-spacing:.08em;text-indent:.08em}

/* photo chapters */
.photo-page{padding:0;background:#f5f1e8}
.photo-page .photo-frame{position:absolute;overflow:hidden;opacity:0;box-shadow:0 20px 45px rgba(34,24,18,.2);transform:translateY(30px) scale(.965);will-change:transform,opacity}
.photo-page .photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform 5.5s cubic-bezier(.16,.72,.18,1)}
.photo-page.is-active .photo-frame,.photo-page.is-entering-forward .photo-frame,.photo-page.is-entering-backward .photo-frame{animation:photo-arrive .82s cubic-bezier(.18,.72,.18,1) both}
.photo-page.is-active .photo-frame:nth-of-type(2),.photo-page.is-entering-forward .photo-frame:nth-of-type(2),.photo-page.is-entering-backward .photo-frame:nth-of-type(2){animation-delay:.12s}
.photo-page.is-active .photo-frame:nth-of-type(3),.photo-page.is-entering-forward .photo-frame:nth-of-type(3),.photo-page.is-entering-backward .photo-frame:nth-of-type(3){animation-delay:.23s}
.photo-page.is-active .photo-frame img,.photo-page.is-entering-forward .photo-frame img,.photo-page.is-entering-backward .photo-frame img{transform:scale(1.025)}
.photo-caption{position:absolute;z-index:5;display:grid;gap:4px;margin:0;color:#243529;font-family:var(--serif);letter-spacing:.16em}.photo-caption small{font-size:7px;font-weight:700}.photo-caption span{font-size:11px}
.photo-folio{position:absolute;z-index:0;color:rgba(56,85,62,.075);font-family:var(--serif);font-size:160px;line-height:1}

.photo-page--garden{background:radial-gradient(circle at 78% 14%,rgba(204,218,187,.52),transparent 27%),linear-gradient(145deg,#eef0e4,#dce3d4 58%,#f6f1e5)}
.garden-layout{position:absolute;inset:0}
.garden-main{z-index:1;top:5%;left:6%;width:69%;height:82%;padding:7px;background:#f7f3e9}
.garden-main img{object-position:48% 48%}
.garden-detail{z-index:3;right:5%;bottom:5%;width:43%;height:48%;padding:6px;background:#f7f3e9;transform:translateY(30px) rotate(1.2deg) scale(.965)!important}
.garden-detail img{object-position:50% 45%}
.photo-page--garden .photo-caption{z-index:4;left:7%;bottom:5.2%}
.photo-folio--garden{right:-12px;top:1%}

.photo-page--sky{background:linear-gradient(160deg,#547fb1,#81aad2 54%,#d6e4ed)}
.sky-layout{position:absolute;inset:0}
.sky-main{z-index:1;inset:4.5% 5.5% 5.5%;padding:6px;background:rgba(248,247,242,.9)}
.sky-main img{object-position:50% 50%}
.sky-detail{z-index:3;left:7%;bottom:7.5%;width:39%;height:24%;padding:5px;background:#f4f1e9;box-shadow:0 16px 34px rgba(20,40,69,.28)!important}
.sky-detail img{object-position:88% 79%;transform:scale(2.3)!important}
.photo-page--sky .photo-caption{z-index:4;right:8%;top:8%;align-items:end;color:#fff;text-align:right;text-shadow:0 2px 12px rgba(31,55,83,.25)}
.photo-page--sky .photo-caption span{font-size:28px;font-weight:300}

.photo-page--plum{background:radial-gradient(circle at 95% 6%,rgba(148,132,171,.24),transparent 30%),linear-gradient(148deg,#272631,#3f3b4d 58%,#27242e)}
.plum-layout{position:absolute;inset:4.8% 5.2%}
.plum-couple{z-index:1;top:0;bottom:0;left:0;width:57%;padding:6px;background:#ded9df}
.plum-couple img{object-position:50% 47%}
.plum-bride{z-index:2;right:0;width:39%;height:47%;padding:5px;background:#e8e3e7}
.plum-bride--down{top:0}.plum-bride--front{bottom:0}
.plum-bride img{object-position:50% 34%}
.plum-index{position:absolute;z-index:4;right:2.5%;top:43%;color:rgba(255,255,255,.88);font-family:var(--serif);font-size:22px;letter-spacing:.08em;text-shadow:0 3px 14px rgba(15,12,21,.35)}

.photo-page--amber{background:radial-gradient(circle at 8% 10%,rgba(255,244,214,.55),transparent 31%),linear-gradient(145deg,#d7bc93,#9f7758 72%,#6d4c39)}
.amber-layout{position:absolute;inset:0}
.amber-main{z-index:1;top:6%;left:5%;width:90%;height:56%;padding:7px;background:#f2e5d0}
.amber-main img{object-position:50% 43%}
.amber-detail{z-index:3;right:6%;bottom:6%;width:67%;height:36%;padding:6px;background:#efe1ca;transform:translateY(30px) rotate(-1.1deg) scale(.965)!important}
.amber-detail img{object-position:50% 46%}
.film-note{position:absolute;z-index:4;left:6%;bottom:12%;display:grid;gap:7px;margin:0;color:#3d2b23;font-family:var(--serif);writing-mode:vertical-rl}.film-note span{font-size:8px;font-weight:700;letter-spacing:.18em}.film-note small{font-size:7px;letter-spacing:.14em}

.photo-page--red{background:radial-gradient(circle at 90% 8%,rgba(241,204,126,.17),transparent 30%),linear-gradient(150deg,#76121f,#9e2730 57%,#5e0d18)}
.chinese-layout{position:absolute;inset:0}
.chinese-main{z-index:2;top:5%;left:6%;width:65%;height:87%;padding:7px;background:#f3e7d1}
.chinese-main img{object-position:50% 42%}
.chinese-detail{z-index:4;right:5%;bottom:7%;width:38%;height:45%;padding:6px;background:#d9b66e;box-shadow:0 18px 40px rgba(50,2,9,.32)!important}
.chinese-detail img{object-position:50% 42%}
.bamboo-ornament{position:absolute;z-index:1;right:-15%;bottom:-3%;width:69%;height:70%;object-fit:contain;object-position:right bottom;opacity:.58;filter:sepia(.18) saturate(.85) brightness(1.2);mix-blend-mode:screen}
.happiness-mark{position:absolute;z-index:3;right:5.5%;top:6%;color:#efd28e;font-family:var(--serif);font-size:82px;line-height:1;text-shadow:0 8px 26px rgba(72,3,9,.23)}
.chinese-caption{position:absolute;z-index:5;right:7%;top:22%;margin:0;color:#f8e8c4;font-family:var(--brush);font-size:22px;writing-mode:vertical-rl;letter-spacing:.08em}

/* daily reel: manual horizontal movement; only growth photos open in lightbox */
.memory-page{grid-template-rows:auto auto auto auto auto;gap:clamp(11px,2.5svh,24px);padding:42px 0 25px}
.photo-reel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.photo-reel::-webkit-scrollbar{display:none}
.photo-reel__track{display:flex;width:max-content;gap:9px;padding:0 22px;animation:reel-marquee 42s linear infinite;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.photo-reel figure{flex:0 0 auto;width:116px;height:154px;padding:3px;border:0;scroll-snap-align:center;background:#f0e2c8;box-shadow:0 7px 18px rgba(0,0,0,.24);transform:rotate(-.7deg)}
.photo-reel figure:nth-child(2n){transform:rotate(.7deg)}
.photo-reel figure img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.photo-reel .photo-reel__square{width:150px}.photo-reel .photo-reel__wide{width:210px}.photo-reel .photo-reel__costume{width:150px;background:#eee9df}.photo-reel__wide img{object-position:50% 85%}.photo-reel__costume img{object-fit:contain;object-position:center}
.reel-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:-2px 0 0;color:#8a7663;font-size:8px;letter-spacing:.16em}.reel-hint i{width:30px;height:1px;background:rgba(176,138,70,.45)}
.growth-ribbon button{position:relative;height:86px;padding:3px 3px 18px;border:0;background:#fff9ee;box-shadow:0 8px 20px rgba(74,47,32,.1);cursor:zoom-in;transform:rotate(-1.2deg)}
.growth-ribbon button:nth-child(2n){transform:rotate(1.2deg)}
.growth-ribbon button img{width:100%;height:100%;object-fit:cover}
.growth-ribbon button span{position:absolute;right:5px;bottom:3px;color:var(--gold);font-family:var(--serif);font-size:8px}

/* map card: functional whole-card link with a restrained illustrated road layer */
.venue-map{text-decoration:none;color:inherit}
.venue-map__canvas{position:relative;display:grid;height:100%;place-content:center;justify-items:center;gap:8px;overflow:hidden;border:6px solid #fff9ee;outline:1px solid rgba(142,103,58,.24);background:linear-gradient(150deg,#e8e1d1,#d7ddcc);box-shadow:0 13px 30px rgba(78,54,36,.13)}
.venue-map__canvas::before{content:"";position:absolute;inset:0;background:linear-gradient(28deg,transparent 0 39%,rgba(255,255,255,.88) 40% 46%,rgba(190,169,132,.44) 47%,transparent 48%),linear-gradient(128deg,transparent 0 55%,rgba(255,255,255,.78) 56% 62%,transparent 63%);opacity:.86}
.venue-map__canvas::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 18%,rgba(84,127,79,.19) 0 18px,transparent 19px),radial-gradient(circle at 82% 78%,rgba(84,127,79,.17) 0 25px,transparent 26px),repeating-linear-gradient(90deg,rgba(139,118,82,.08) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(139,118,82,.07) 0 1px,transparent 1px 34px)}
.venue-map__canvas>*{position:relative;z-index:2}.venue-map__canvas small{position:absolute;top:10px;left:12px;color:#72593d;font-family:var(--serif);font-size:8px;font-weight:700;letter-spacing:.18em}.venue-map__canvas strong{font-family:var(--serif);font-size:15px}.venue-map__canvas .map-pin{margin-top:8px}

/* closing silk and envelope */
.closing-page{isolation:isolate;background:#e8ddce}
.closing-page .silk-field{z-index:-2}
.closing-copy{position:relative;z-index:3;margin-bottom:4svh}
.closing-page .paper-envelope{z-index:3}
.closing-page>time{position:relative;z-index:3;font-weight:650}

@keyframes v8-page-out-forward{0%{opacity:1;transform:none;filter:none}100%{opacity:.34;transform:translateY(-18%) rotateX(4deg) scale(.975);filter:brightness(.84)}}
@keyframes v8-page-in-forward{0%{opacity:.85;clip-path:inset(100% 0 0);transform:translateY(18%) rotateX(-7deg) scale(.985)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes v8-page-out-backward{0%{opacity:1;transform:none}100%{opacity:.36;transform:translateY(18%) rotateX(-4deg) scale(.975)}}
@keyframes v8-page-in-backward{0%{opacity:.82;clip-path:inset(0 0 100%);transform:translateY(-16%) rotateX(6deg) scale(.985)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes v8-fold-shadow{0%{opacity:.72;transform:translateY(0)}58%{opacity:.28}100%{opacity:0;transform:translateY(-65%)}}
@keyframes photo-arrive{0%{opacity:0;transform:translateY(30px) scale(.965)}100%{opacity:1;transform:none}}
@keyframes silk-drift-a{0%{transform:translate3d(-3%,-1%,0) rotate(-2deg)}100%{transform:translate3d(4%,2%,0) rotate(2deg)}}
@keyframes silk-drift-b{0%{transform:translate3d(5%,-2%,0) scale(1.02)}100%{transform:translate3d(-4%,3%,0) scale(1.08)}}
@keyframes silk-fold-one{0%{transform:translateX(-5%) rotate(16deg) scaleX(.9)}100%{transform:translateX(16%) rotate(23deg) scaleX(1.12)}}
@keyframes silk-fold-two{0%{transform:translateX(7%) rotate(-20deg) scaleX(1.12)}100%{transform:translateX(-15%) rotate(-13deg) scaleX(.9)}}
@keyframes silk-fold-three{0%{transform:translateX(-13%) rotate(5deg)}100%{transform:translateX(18%) rotate(11deg)}}
@keyframes envelope-sheen{0%{background-position:left bottom,right bottom,0% 50%,0% 50%}100%{background-position:left bottom,right bottom,100% 50%,100% 50%}}
@keyframes mechanical-flip{0%{transform:rotateX(0);filter:brightness(1)}42%{transform:rotateX(-88deg);filter:brightness(.7)}50%{transform:rotateX(88deg);filter:brightness(.78)}100%{transform:rotateX(0);filter:brightness(1)}}
@keyframes reel-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% + 17.5px),0,0)}}

@media (prefers-reduced-motion:reduce){.photo-reel__track{animation:reel-marquee 54s linear infinite!important}}

@media (max-width:370px){
  .garden-main{height:79%}.garden-detail{height:44%}.photo-page--garden .photo-caption{bottom:3.5%}
  .memory-page{padding-top:33px;gap:10px}.photo-reel figure{width:98px;height:132px}.photo-reel .photo-reel__square,.photo-reel .photo-reel__costume{width:128px}.photo-reel .photo-reel__wide{width:174px}.growth-ribbon button{height:76px}
}

@media (max-height:690px){
  .intro__heading{margin-bottom:2svh}.intro__button{margin-top:16px}.paper-envelope{width:min(76vw,360px)}
  .memory-page{padding-top:30px;gap:9px}.memory-heading h2{margin-top:6px;font-size:31px}.photo-reel{padding-top:18px;padding-bottom:18px}.growth-ribbon button{height:73px}.memory-foot{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .page{transition:none}.page.is-leaving-forward,.page.is-leaving-backward,.page.is-entering-forward,.page.is-entering-backward{animation:none!important}.photo-page .photo-frame{opacity:1;transform:none}.silk-field::before,.silk-field::after,.silk-field i,.silk-field b,.silk-field span,.paper-envelope__back,.paper-envelope__front,.paper-envelope__flap{animation:none!important}
}

/* second-pass crop and balance corrections from the 390 × 844 review */
.cover-triptych figure>span{right:.13em;bottom:.055em}
.sky-detail{background:#f4f1e9}
.sky-detail img{opacity:0!important;transform:none!important}
.plum-layout{inset:4.8% 5.2%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:55% 41%;gap:4% 4%}
.plum-layout .photo-frame{position:relative;inset:auto;width:auto;height:auto}
.plum-couple{grid-column:1/-1;grid-row:1;padding:6px}
.plum-couple img{object-position:50% 43%}
.plum-bride--down{grid-column:1;grid-row:2}.plum-bride--front{grid-column:2;grid-row:2}
.plum-bride img{object-position:50% 27%}
.plum-index{right:3%;top:57%;font-size:18px}
.venue-map__canvas{background:#e4e1d9 url("assets/images/venue-map.be53f4cf19.webp") center/cover no-repeat}
.venue-map__canvas::before{background:linear-gradient(180deg,rgba(248,244,235,.15),rgba(241,230,207,.2));backdrop-filter:sepia(.08) saturate(.82)}
.venue-map__canvas::after{background:radial-gradient(circle at 50% 50%,transparent 45%,rgba(70,53,37,.1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.venue-map__canvas .map-pin{position:absolute;left:40%;top:39%}
.venue-map__canvas strong{position:absolute;left:11px;bottom:10px;padding:5px 8px;color:#553f2e;background:rgba(255,250,240,.82);box-shadow:0 4px 12px rgba(77,55,35,.1)}
/* third-pass refinements: type consistency, moving film strip and deeper envelopes */
.cover-copy{row-gap:2px;padding-bottom:58px}
.cover-copy .eyebrow{font-size:10px;line-height:1.75}
.cover-copy h2{margin-top:11px;font-size:clamp(36px,10.2vw,52px);line-height:1.25}
.script-name{margin-top:5px;font-size:clamp(44px,13vw,67px);line-height:1.08}
.cover-date{gap:12px;margin-top:11px;font-size:13px;line-height:1.75}
.cover-date span{width:27px}

.intro__heading time{font-size:14px;font-weight:700;line-height:1.8;letter-spacing:.2em}
.paper-envelope{perspective:1000px;filter:drop-shadow(0 34px 34px rgba(55,34,20,.31)) drop-shadow(0 7px 8px rgba(62,39,25,.12)) drop-shadow(0 -2px 2px rgba(255,255,255,.52))}
.paper-envelope::before{right:2%;bottom:-14%;left:2%;height:22%;background:rgba(67,43,27,.27);filter:blur(21px);transform:scaleY(.54)}
.paper-envelope::after{content:"";position:absolute;z-index:6;inset:0;pointer-events:none;border:1px solid rgba(83,56,35,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -13px 22px rgba(92,61,37,.12),inset 12px 0 18px rgba(255,255,255,.12),inset -12px 0 18px rgba(79,53,33,.07)}
.paper-envelope__back{box-shadow:inset 0 14px 24px rgba(255,255,255,.2),inset 0 -18px 28px rgba(93,62,38,.17)}
.paper-envelope__letter{box-shadow:0 17px 30px rgba(58,37,23,.2),0 -1px 0 rgba(255,255,255,.85),inset 0 0 18px rgba(170,139,101,.045)}
.paper-envelope__front{filter:drop-shadow(0 -7px 8px rgba(73,47,29,.18))}
.paper-envelope__flap{filter:drop-shadow(0 10px 11px rgba(67,42,25,.23))}
.paper-envelope__seal{box-shadow:0 8px 15px rgba(74,25,25,.4),0 1px 1px rgba(255,255,255,.42),inset 0 0 0 3px rgba(255,225,200,.1),inset 3px 3px 5px rgba(255,235,215,.18),inset -3px -4px 6px rgba(72,13,20,.25)}

.sky-main{inset:4.5% 5.5% 5.5%}
.plum-couple img{object-position:34% 50%}

.invitation-copy h2,.chinese-caption,.memory-heading h2,.memory-foot,.family-copy h2,.closing-copy h2{font-synthesis:none}

.memory-page{grid-template-rows:auto auto auto auto auto auto;gap:clamp(8px,1.8svh,17px);padding-top:34px;padding-bottom:22px}
.photo-reel{cursor:grab}
.photo-reel:active{cursor:grabbing}
.photo-reel{contain:layout paint}.photo-reel__track{will-change:transform}.photo-reel.is-interacting .photo-reel__track{animation-play-state:paused}
.growth-era{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:10px;margin:-2px 30px 0;color:#9b7841;font-family:var(--serif);font-size:9px;font-weight:650;letter-spacing:.18em;white-space:nowrap}
.growth-era i{position:relative;height:1px;background:linear-gradient(90deg,rgba(176,138,70,.18),rgba(176,138,70,.72),rgba(176,138,70,.18))}
.growth-era i::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border:1px solid rgba(140,38,48,.62);background:#efe6d8;transform:translate(-50%,-50%) rotate(45deg)}

@media (max-width:370px){
  .cover-copy .eyebrow{font-size:9px}.cover-copy h2{font-size:34px}.script-name{font-size:43px}.cover-date{font-size:12px}
  .growth-era{margin-right:20px;margin-left:20px;font-size:8px}
}

@media (max-height:690px){
  .memory-page{gap:7px;padding-top:26px}.growth-era{margin-top:-3px}.memory-foot{font-size:18px}
}

/* performance and WebKit compatibility */
.has-js img[data-src],.has-js img.is-loading{color:transparent;opacity:0}
.has-js img.is-loaded{opacity:1;transition:opacity .34s ease}
.paper-envelope,.flip-clock{-webkit-perspective:1000px}
.paper-envelope__back,.paper-envelope__front,.paper-envelope__flap,.flip-card{-webkit-transform-style:preserve-3d}
.paper-envelope__flap,.flip-card strong{-webkit-backface-visibility:hidden}
.cover-triptych figure{-webkit-clip-path:inset(0 100% 0 0)}
.cover-page.is-active .cover-triptych figure{-webkit-animation:panel-open .95s cubic-bezier(.2,.7,.18,1) forwards}
@-webkit-keyframes panel-open{to{-webkit-clip-path:inset(0);clip-path:inset(0)}}
.sky-detail{background:#f4f1e9}
.sky-detail img{opacity:1!important;object-position:88% 79%;transform:scale(2.3)!important}