:root {
  color-scheme:light;
  --blue-night:#0A1726;
  --paper:#F6F2E9;
  --ivory:#FAF8F3;
  --wine:#7A2633;
  --muted-gold:#B69A68;
  --graphite:#262626;
  --muted-text:#77716A;
  --serif:"Songti SC",STSong,"Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --app-edge:max(28px,calc((100vw - 560px)/2 + 28px));
}

*,*::before,*::after { box-sizing:border-box; }
html { width:100%; margin:0; background:#080e14; }
body {
  width:100%; min-height:100%; margin:0; overflow-x:hidden; overflow-y:auto;
  background:var(--paper); color:var(--graphite); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button,a { color:inherit; font:inherit; }
button:focus-visible,a:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
img {
  display:block; width:100%; height:100%; object-fit:cover; opacity:1; visibility:visible;
  transition:opacity .55s ease; user-select:none; -webkit-user-drag:none;
}
img.is-loaded { opacity:1; }
img.is-failed { opacity:0; visibility:hidden; }
.image-failed { background:linear-gradient(135deg,rgba(182,154,104,.08),rgba(122,38,51,.05)),#e9e3d9!important; }
figure,h1,h2,h3,p { margin:0; }
.app { position:relative; width:100%; min-height:100vh; min-height:100dvh; overflow:hidden; background:var(--paper); isolation:isolate; }
.section { position:relative; width:100%; overflow:hidden; }
.paper,.light-act { background:var(--ivory); color:var(--graphite); }
.dark-act { background:var(--blue-night); color:#f8f8f6; }
.ceremony-act { background:var(--paper); color:var(--wine); }

/* restrained motion */
.reveal { opacity:1; visibility:visible; }
.fade-up,.mask-reveal,.blur-reveal { transform:none; clip-path:none; filter:none; }
.fade-up.is-visible,.mask-reveal.is-visible,.blur-reveal.is-visible { animation:stability-reveal .55s ease both; }
@keyframes stability-reveal { from{opacity:.86;transform:translate3d(0,8px,0)} to{opacity:1;transform:none} }
.slow-scale img { animation:slow-scale 20s ease-out both; }
@keyframes slow-scale { from{transform:scale(1)} to{transform:scale(1.035)} }
[data-parallax="x"] { transform:translate3d(var(--parallax-shift,0),0,0); }
[data-parallax="y"] { transform:translate3d(0,var(--parallax-shift,0),0); }

/* shared ambient layers */
.ambient-paper {
  background:
    radial-gradient(circle at 52% 42%,rgba(255,255,255,.78),transparent 38%),
    linear-gradient(112deg,transparent 0 61%,rgba(182,154,104,.045) 61.2% 72%,transparent 72.2%),
    repeating-linear-gradient(92deg,rgba(122,38,51,.009) 0 1px,transparent 1px 7px),
    var(--paper);
}
.ambient-paper::before {
  position:absolute; z-index:0; top:8%; right:-20%; width:72%; height:84%; content:""; pointer-events:none;
  border:1px solid rgba(182,154,104,.075); border-left:0; transform:skewY(-7deg);
  box-shadow:-48px 36px 90px rgba(182,154,104,.035);
}
.ambient-blue {
  background:
    radial-gradient(circle at 12% 28%,rgba(72,99,126,.18),transparent 38%),
    linear-gradient(170deg,#0d1d30 0%,var(--blue-night) 48%,#07111e 100%);
}
.ambient-blue::after,.ambient-editorial::after,.ambient-chinese::after {
  position:absolute; z-index:0; inset:0; content:""; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  background-size:140px; opacity:.042; mix-blend-mode:soft-light;
}
.scene,.chapter-head,.lyric-breath,.meet-heading,.meet-main,.portraits { position:relative; z-index:2; }

/* Opening */
.cover { height:100vh; height:100dvh; min-height:600px; background:var(--blue-night); color:#fff; }
.cover-photo,.cover-shade,.ember-layer { position:absolute; inset:0; }
.cover-photo img { object-position:50% 50%; }
.cover-shade { z-index:1; background:linear-gradient(180deg,rgba(5,13,25,.58),rgba(6,15,28,.05) 42%,rgba(6,15,28,.08) 64%,rgba(5,14,26,.65)); }
.cover-content {
  position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; height:100%;
  padding:calc(env(safe-area-inset-top,0px) + clamp(45px,8vh,78px)) 24px calc(env(safe-area-inset-bottom,0px) + 25px); text-align:center;
}
.cover-kicker { font:400 clamp(.7rem,2.8vw,.86rem)/1 Georgia,serif; letter-spacing:.43em; text-indent:.43em; }
.fine-rule { width:90px; height:1px; margin-top:23px; background:rgba(215,192,151,.72); }
.cover h1 { margin-top:24px; font:400 clamp(1.65rem,6.8vw,2.35rem)/1.35 var(--serif); letter-spacing:.1em; text-indent:.1em; text-shadow:0 2px 18px rgba(0,0,0,.22); }
.cover-date { margin-top:14px; font:400 .88rem/1 Georgia,serif; letter-spacing:.3em; text-indent:.3em; }
.open-invitation {
  width:220px; min-height:45px; margin-top:auto; margin-bottom:58px; border:0; border-bottom:1px solid rgba(235,218,188,.66);
  background:transparent; cursor:pointer; font-family:var(--serif); font-size:.9rem; letter-spacing:.17em; text-indent:.17em;
  animation:quiet-breathe 2.8s ease-in-out infinite; transition:opacity .32s ease,transform .32s ease;
}
.open-invitation.is-changing { opacity:0; transform:translateY(6px); }
.cover.music-started .open-invitation { opacity:.68; animation:none; }
@keyframes quiet-breathe { 0%,100%{opacity:.68} 50%{opacity:1} }
.scroll-cue { position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); left:50%; opacity:.82; pointer-events:none; transform:translateX(-50%); }
.scroll-cue span { display:block; font:400 .66rem/1 var(--serif); letter-spacing:.17em; white-space:nowrap; }
.scroll-cue i { display:block; width:1px; height:24px; margin:10px auto 0; background:linear-gradient(#fff,transparent); animation:scroll-line 1.9s ease-in-out infinite; }
@keyframes scroll-line { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.ember-layer { z-index:2; overflow:hidden; opacity:.65; pointer-events:none; transition:opacity .4s ease; }
.ember-layer:not(.is-active) { opacity:0; }
.ember-layer i {
  position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); border-radius:50%;
  background:#efb565; box-shadow:0 0 5px rgba(245,166,71,.68); opacity:0; animation:ember-float var(--duration) var(--delay) ease-in-out infinite;
}
@keyframes ember-float { 0%,100%{opacity:0;transform:translate3d(0,8px,0)} 28%{opacity:.2} 64%{opacity:.48} 88%{opacity:0;transform:translate3d(5px,-22px,0)} }

/* Prelude */
.prelude { display:grid; min-height:85vh; min-height:85dvh; place-items:center; padding:90px 28px; text-align:center; }
.prelude::after { position:absolute; top:9%; bottom:9%; left:50%; width:1px; background:linear-gradient(transparent,rgba(182,154,104,.14),transparent); content:""; }
.micro-type { position:absolute; z-index:1; right:-33px; bottom:16%; color:rgba(38,38,38,.045); font:400 2.2rem/1 Georgia,serif; letter-spacing:.12em; transform:rotate(-90deg); }
.prelude-copy { position:relative; z-index:2; width:100%; }
.eyebrow { color:var(--muted-gold); font:400 .67rem/1.4 Georgia,serif; letter-spacing:.3em; text-indent:.3em; }
.prelude h2 { margin-top:52px; font:400 clamp(1.65rem,6.8vw,2.1rem)/1.4 var(--serif); letter-spacing:.14em; text-indent:.14em; transition-delay:.08s; }
.prelude-message { margin-top:44px; color:var(--muted-text); font:400 .9rem/2.15 var(--serif); letter-spacing:.12em; transition-delay:.16s; }
.signature { margin-top:72px; color:#687364; font:400 .67rem/1 Georgia,serif; letter-spacing:.3em; text-indent:.3em; transition-delay:.24s; }

/* Meet Us */
.meet { min-height:138vh; padding:12vh 0 16vh; }
.meet-heading { margin:0 7% 46px; }
.meet-heading p { color:var(--graphite); font:400 .78rem/1 Georgia,serif; letter-spacing:.25em; }
.meet-heading span { display:block; margin-top:10px; color:var(--muted-gold); font:400 .58rem/1 Georgia,serif; letter-spacing:.22em; }
.meet-main { width:88%; aspect-ratio:3/4; margin:0 auto; background:#ddd8d0; }
.meet-main img { object-position:50% 48%; }
.portraits { height:620px; max-width:520px; margin:92px auto 0; padding:0 9%; }
.portrait { position:absolute; z-index:2; }
.portrait-groom { top:0; left:9%; }
.portrait-bride { right:9%; bottom:0; text-align:right; }
.avatar { overflow:hidden; background:#ddd4c8; }
.avatar-round { width:148px; aspect-ratio:1; border-radius:50%; }
.avatar-arch { width:166px; height:215px; border-radius:84px 84px 10px 10px; }
.avatar img { object-position:center; }
.portrait h3 { margin-top:16px; font:400 1.06rem/1.3 var(--serif); letter-spacing:.14em; }
.portrait p { margin-top:7px; color:var(--muted-gold); font:400 .59rem/1 Georgia,serif; letter-spacing:.28em; }
.portrait-line { position:absolute; z-index:1; top:235px; left:29%; width:43%; height:1px; background:rgba(182,154,104,.42); transform:rotate(-31deg); }
.portrait-date { position:absolute; z-index:2; top:292px; left:50%; color:rgba(119,113,106,.72); font:400 .57rem/1 Georgia,serif; letter-spacing:.18em; transform:translateX(-50%); white-space:nowrap; }
.initial { position:absolute; z-index:0; color:rgba(38,38,38,.03); font:400 16rem/1 Georgia,serif; }
.initial-r { top:-30px; left:-8px; }
.initial-y { right:-5px; bottom:-22px; }

/* Chapter shared */
.chapter-head { padding:0 7% 70px; }
.chapter-head > span { color:var(--muted-gold); font:400 .66rem/1 Georgia,serif; letter-spacing:.22em; }
.chapter-head h2 { margin-top:13px; font:400 clamp(1.7rem,7vw,2.35rem)/1.1 Georgia,serif; letter-spacing:.12em; }
.chapter-head p { margin-top:16px; font:400 .82rem/1.7 var(--serif); letter-spacing:.13em; }
.wide-photo { width:90%; aspect-ratio:3/4; margin:0 auto; background:#18283a; }
.film-frame { width:100%; padding:0 5%; }
.film-frame img { height:auto; object-fit:contain; }
.scene-caption { font:400 .63rem/1 Georgia,serif; letter-spacing:.28em; }
.lyric-breath { display:flex; height:31vh; min-height:220px; align-items:center; padding:0 8%; overflow:hidden; }
.lyric-breath > span { color:rgba(182,154,104,.2); font:400 1.4rem/1 Georgia,serif; letter-spacing:.18em; }

/* Blue Hour */
.blue-hour { padding:14vh 0 7vh; }
.blue-ambient-photo { position:absolute; z-index:0; top:17%; right:-35%; width:150%; height:36%; background-position:center; background-size:cover; filter:blur(50px) saturate(.62); opacity:.1; transform:scale(1.15); }
.giant-type { position:absolute; z-index:0; color:rgba(255,255,255,.045); font:400 clamp(4rem,21vw,8rem)/.9 Georgia,serif; white-space:nowrap; }
.blue-type { top:40%; left:-6%; transform:rotate(-90deg) translateX(-50%); transform-origin:left top; }
.blue-editorial-mark { position:absolute; z-index:1; top:7.5%; right:6%; display:grid; justify-items:end; color:rgba(225,232,239,.16); pointer-events:none; }
.blue-editorial-mark span { font:400 .56rem/1 Georgia,serif; letter-spacing:.34em; }
.blue-editorial-mark i { width:112px; height:1px; margin:13px 0 11px; background:linear-gradient(90deg,transparent,rgba(182,154,104,.42)); }
.blue-editorial-mark b { color:rgba(182,154,104,.36); font:400 .46rem/1 Georgia,serif; letter-spacing:.22em; }
.blue-scene-a { padding-bottom:13vh; }
.blue-scene-b { padding:4vh 0 6vh; }
.blue-scene-b .film-frame { background:rgba(5,13,23,.35); }
.blue-breath {
  height:38vh;
  min-height:0;
  justify-content:flex-end;
  background:radial-gradient(ellipse at 22% 56%,rgba(103,141,178,.13),rgba(45,74,104,.055) 34%,transparent 72%);
}
.blue-breath-mark { display:grid; width:min(62%,220px); justify-items:end; gap:14px; pointer-events:none; transform:translateY(-14%); }
.blue-breath-mark span { color:rgba(205,214,222,.16); font:400 1.35rem/1 Georgia,serif; letter-spacing:.28em; text-indent:.28em; }
.blue-breath-mark i { width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(182,154,104,.46)); }
.blue-scene-d { min-height:0; padding:0 0 3vh; }
.blue-closing { width:74%; aspect-ratio:3/4; margin-left:18%; background:#17283a; }
.blue-scene-d .scene-caption { margin:25px 0 0 8%; color:rgba(255,255,255,.64); }

/* White Wedding */
.white-wedding { padding:7vh 0 17vh; background:linear-gradient(148deg,#fffdf8 0%,var(--ivory) 43%,#f0ece5 100%); }
.white-wedding::before {
  position:absolute; z-index:0; top:35%; right:-5%; color:rgba(38,38,38,.04); content:"DAYLIGHT";
  font:400 clamp(5rem,25vw,9rem)/.82 Georgia,serif; letter-spacing:-.05em; white-space:nowrap; pointer-events:none;
}
.ivory-editorial-mark { position:absolute; z-index:1; top:30%; left:5%; display:flex; width:90%; align-items:center; gap:12px; color:rgba(80,75,69,.27); pointer-events:none; }
.ivory-editorial-mark span { font:400 .51rem/1 Georgia,serif; letter-spacing:.27em; white-space:nowrap; }
.ivory-editorial-mark i { height:1px; flex:1; background:rgba(122,38,51,.14); }
.white-landscape::before { position:absolute; z-index:-1; top:-4vh; right:-10%; width:58%; height:70%; border:1px solid rgba(182,154,104,.13); content:""; transform:rotate(4deg); box-shadow:-26px 32px 65px rgba(182,154,104,.07); }
.white-collage::before {
  position:absolute; z-index:-1; left:-1%; bottom:7%; color:rgba(72,68,63,.065); content:"WITH LOVE";
  font:400 clamp(3rem,13vw,5.4rem)/.86 Georgia,serif; letter-spacing:.08em; white-space:nowrap; pointer-events:none;
}
.white-collage::after {
  position:absolute; z-index:-1; left:7%; bottom:3.5%; width:35%; height:1px; content:"";
  background:linear-gradient(90deg,rgba(122,38,51,.22),rgba(182,154,104,.1),transparent); pointer-events:none;
}
.plant-shadow {
  position:absolute; z-index:0; top:16%; right:-20%; width:72%; height:31%; border-radius:50%;
  background:
    radial-gradient(ellipse at 34% 25%,rgba(82,102,78,.09) 0 7%,transparent 22%),
    radial-gradient(ellipse at 62% 48%,rgba(82,102,78,.075) 0 9%,transparent 25%),
    radial-gradient(ellipse at 40% 76%,rgba(82,102,78,.07) 0 8%,transparent 24%),
    linear-gradient(72deg,transparent 47%,rgba(82,102,78,.055) 49% 51%,transparent 53%);
  filter:blur(22px); transform:rotate(-18deg); animation:ambient-drift 18s ease-in-out infinite alternate;
}
.window-light { position:absolute; z-index:0; top:46%; left:-18%; width:105%; height:22%; background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.8) 34% 44%,transparent 45% 56%,rgba(255,255,255,.55) 57% 65%,transparent 66%); opacity:.5; transform:skewY(-8deg); animation:window-breathe 20s ease-in-out infinite alternate; }
@keyframes ambient-drift { to{transform:translate3d(-10px,8px,0) rotate(-18deg)} }
@keyframes window-breathe { to{opacity:.58;transform:translate3d(7px,-3px,0) skewY(-8deg)} }
.white-horse { width:92%; background:#e8e2d9; }
.white-horse-scene { padding-bottom:5vh; }
.white-breath { justify-content:flex-end; }
.white-breath-mark { width:36%; pointer-events:none; }
.white-breath-mark i { display:block; width:100%; height:1px; background:linear-gradient(90deg,rgba(122,38,51,.24),transparent); }
.white-landscape { padding:6vh 0 13vh; }
.ivory-frame { background:transparent; }
.white-collage { position:relative; z-index:2; min-height:650px; }
.white-collage figure { position:absolute; overflow:hidden; background:#ddd7cf; }
.collage-main { top:0; left:6%; width:70%; aspect-ratio:3/4; }
.collage-round { top:280px; right:6%; width:43%; aspect-ratio:1; border-radius:50%; }
.collage-round img { object-position:60% 42%; }
.save-date { position:absolute; bottom:18px; left:7%; display:flex; flex-direction:column; gap:10px; }
.save-date span { color:#687364; font:400 .64rem/1 Georgia,serif; letter-spacing:.24em; }
.save-date b { font:400 .94rem/1 Georgia,serif; letter-spacing:.18em; }
.soft-flash::after { position:fixed; z-index:45; inset:0; background:rgba(255,255,255,.65); content:""; pointer-events:none; animation:soft-flash .22s ease-out both; }
@keyframes soft-flash { from{opacity:.72} to{opacity:0} }

/* Hero */
.hero { background:linear-gradient(#211916,#17110f); color:#f8f2e8; padding-bottom:14vh; }
.hero-prelude { display:grid; height:31vh; min-height:235px; place-items:center; color:#d0b685; font:400 .65rem/1 Georgia,serif; letter-spacing:.31em; text-indent:.31em; }
.hero-photo { position:relative; display:grid; min-height:55vw; max-height:520px; place-items:center; overflow:hidden; background:#14100e; }
.hero-backdrop { position:absolute; inset:-20px; background-position:center; background-size:cover; filter:blur(22px) brightness(.4); opacity:.68; }
.hero-photo > img { position:relative; z-index:1; height:auto; max-height:520px; object-fit:contain; }
.hero-closing { padding:54px 30px 0; text-align:center; font:400 1rem/1.6 var(--serif); letter-spacing:.16em; }

/* Editorial */
.editorial { padding:15vh 0 17vh; background:linear-gradient(160deg,#f1f0ed,#f7f5f1 42%,#eceae6); }
.editorial-cover-type,.editorial-moments,.editorial-together { position:absolute; z-index:0; color:rgba(38,38,38,.052); font:400 clamp(5rem,27vw,10rem)/.86 Georgia,serif; letter-spacing:-.04em; white-space:nowrap; pointer-events:none; }
.editorial-cover-type { top:-6vh; left:-8%; }
.mag-cover { position:relative; z-index:2; width:88%; aspect-ratio:3/4; margin:0 auto 9vh; background:#d8d4ce; }
.portrait-spread { display:flex; align-items:center; gap:5%; margin:0 6% 6vh; }
.portrait-spread figure { width:64%; aspect-ratio:3/4; background:#ddd8d0; }
.duo-editorial { position:relative; min-height:540px; margin-bottom:8vh; }
.duo-editorial figure { position:absolute; overflow:hidden; background:#d8d4cd; }
.duo-editorial .duo-large { top:0; left:6%; width:61%; aspect-ratio:3/4; }
.duo-arch { top:270px; right:5%; width:46%; aspect-ratio:3/4; border-radius:100px 100px 4px 4px; }
.editorial-moments { top:11%; right:-9%; }
.narrow-portrait { position:relative; z-index:2; width:53%; aspect-ratio:2/3; margin:0 auto 9vh 11%; background:#d8d4cd; }
.editorial-together { top:-5vh; left:-9%; }
.editorial-finale { position:relative; z-index:2; width:90%; aspect-ratio:1200/1838; margin:0 auto; background:#d8d4cd; }
.editorial-finale img { height:100%; object-fit:cover; }
.editorial-finale figcaption { padding-top:23px; text-align:center; color:#625d56; font:400 .67rem/1 Georgia,serif; letter-spacing:.3em; }

/* Chinese transition */
.chinese-transition {
  display:grid; min-height:clamp(520px,72dvh,620px); place-items:center; color:var(--wine); text-align:center;
  background:linear-gradient(180deg,#efede8 0%,var(--paper) 62%);
}
.xi-watermark { position:absolute; color:rgba(122,38,51,.02); font:400 min(58vw,17rem)/1 var(--serif); }
.gold-haze { position:absolute; z-index:0; right:-28%; bottom:4%; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(182,154,104,.12),rgba(182,154,104,.035) 38%,transparent 69%); filter:blur(12px); pointer-events:none; }
.chinese-transition.is-joined .xi-watermark { animation:xi-pulse 1.55s ease both; }
@keyframes xi-pulse { 0%{color:rgba(122,38,51,.02)} 65%{color:rgba(122,38,51,.05)} 100%{color:rgba(122,38,51,.03)} }
.transition-copy { position:relative; z-index:2; }
.transition-copy h2 { font:400 clamp(1.8rem,7.5vw,2.45rem)/1.4 var(--serif); letter-spacing:.27em; text-indent:.27em; }
.transition-copy p { margin-top:18px; color:#805f58; font:400 .94rem/1.6 var(--serif); letter-spacing:.28em; text-indent:.28em; }
.ceremony-knot { position:absolute; z-index:1; top:50%; left:50%; display:flex; width:82%; align-items:center; opacity:1; transform:translate(-50%,-50%); }
.ceremony-knot i { flex:1; height:1px; background:rgba(122,38,51,.48); transform:scaleX(0); transition:transform 1.45s cubic-bezier(.72,0,.2,1); }
.ceremony-knot i:first-child { transform-origin:right; }
.ceremony-knot i:last-child { transform-origin:left; }
.ceremony-knot b { width:7px; height:7px; border:1px solid var(--wine); opacity:0; transform:rotate(45deg) scale(0); transition:opacity .3s 1.15s,transform .35s 1.15s; }
.ceremony-knot.is-visible i { transform:scaleX(1); }
.ceremony-knot.is-visible b { opacity:.7; transform:rotate(45deg) scale(1); }

/* Chinese Wedding */
.chinese-wedding { padding:13vh 0 16vh; background:linear-gradient(155deg,#f8f2e8,var(--paper) 55%,#eee3d4); }
.chinese-watermark { position:absolute; z-index:0; top:19%; right:-24%; color:rgba(122,38,51,.04); font:400 clamp(18rem,82vw,29rem)/1 var(--serif); transform:rotate(5deg); }
.chinese-structure { position:absolute; z-index:0; top:0; bottom:0; left:7%; width:1px; background:linear-gradient(transparent,rgba(122,38,51,.12),transparent); }
.structure-right { right:11%; left:auto; top:28%; bottom:8%; background:linear-gradient(transparent,rgba(122,38,51,.16) 18% 62%,transparent); }
.chinese-gold-haze { top:43%; right:-32%; bottom:auto; opacity:.8; }
.chinese-opening-scene { padding-bottom:14vh; }
.chinese-opening { width:92%; aspect-ratio:3/4; margin:0 auto; background:#d8c7b5; }
.chinese-portrait { display:flex; align-items:center; gap:7%; margin:0 7% 8vh; }
.chinese-portrait figure { width:67%; aspect-ratio:3/4; overflow:hidden; border-radius:140px 140px 8px 8px; background:#dbcbb8; }
.chinese-portrait p { font:400 clamp(1.5rem,7vw,2.2rem)/1 var(--serif); letter-spacing:.2em; writing-mode:vertical-rl; }
.duo-chinese { position:relative; min-height:660px; margin-bottom:13vh; }
.duo-chinese figure { position:absolute; overflow:hidden; background:#dacbb9; }
.duo-chinese figure:first-child { top:0; left:6%; width:64%; aspect-ratio:3/4; transform:rotate(-.5deg); }
.duo-chinese figure:last-child { top:310px; right:5%; width:49%; aspect-ratio:3/4; transform:rotate(.5deg); }
.chinese-single { width:80%; aspect-ratio:3/4; margin:0 auto 15vh; background:#ddcebc; }
.chinese-closing > p { margin-bottom:30px; text-align:center; font:400 clamp(1.7rem,8vw,2.5rem)/1 var(--serif); letter-spacing:.3em; text-indent:.3em; }
.chinese-closing figure { width:100%; background:#cfb9a3; }
.chinese-closing img { height:auto; object-fit:contain; }

/* Countdown */
.countdown { display:grid; min-height:90vh; min-height:90dvh; place-items:center; padding:90px 18px; text-align:center; }
.countdown-watermark { position:absolute; color:rgba(122,38,51,.028); font:400 min(62vw,18rem)/1 Georgia,serif; }
.countdown-inner { position:relative; z-index:2; width:100%; }
.countdown h2 { margin-top:34px; font:400 1.08rem/1.5 var(--serif); letter-spacing:.16em; text-indent:.16em; }
.countdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(7px,3vw,16px); margin:50px auto 0; max-width:400px; }
.countdown-grid div { display:flex; min-width:0; flex-direction:column; gap:13px; }
.countdown-grid b { color:var(--wine); font:400 clamp(1.65rem,8vw,2.45rem)/1 Georgia,serif; }
.countdown-grid span { color:var(--muted-text); font:400 .66rem/1 var(--serif); }
.wedding-day-status { margin-top:38px; color:var(--wine); font:400 1.2rem/1.6 var(--serif); letter-spacing:.14em; }

/* Invitation Turn */
.invitation-turn { height:100vh; height:100dvh; min-height:600px; color:#fff; background:var(--blue-night); }
.turn-photo,.turn-shade { position:absolute; inset:0; }
.turn-photo img { object-position:50% 50%; }
.turn-shade { z-index:1; background:linear-gradient(180deg,rgba(4,12,22,.13),rgba(5,12,21,.66)); }
.turn-copy { position:absolute; z-index:2; right:9%; bottom:14%; left:9%; max-width:72%; }
.turn-copy h2 { font:400 clamp(1.5rem,6.8vw,2.1rem)/1.7 var(--serif); letter-spacing:.09em; }
.turn-copy p { margin-top:22px; color:rgba(255,255,255,.78); font:400 .84rem/1.9 var(--serif); letter-spacing:.1em; }

/* Wedding Details */
.wedding-details { min-height:110vh; padding:14vh 8% 15vh; }
.wedding-details::after { position:absolute; z-index:0; right:-12%; bottom:7%; color:rgba(122,38,51,.026); content:"06 OCT 2026"; font:400 clamp(4rem,20vw,7.5rem)/.9 Georgia,serif; white-space:nowrap; transform:rotate(-90deg) translateX(40%); transform-origin:right bottom; pointer-events:none; }
.details-watermark { position:absolute; top:46%; left:-15%; color:rgba(38,38,38,.026); font:400 4rem/1 Georgia,serif; letter-spacing:.08em; transform:rotate(-90deg); white-space:nowrap; }
.details-inner { position:relative; z-index:2; }
.details-head { padding-bottom:8vh; border-bottom:1px solid rgba(182,154,104,.44); }
.details-head p,.detail-row > span { color:var(--muted-gold); font:400 .65rem/1 Georgia,serif; letter-spacing:.3em; }
.details-head h2 { margin-top:24px; color:var(--wine); font:400 clamp(1.75rem,8vw,2.45rem)/1.3 var(--serif); letter-spacing:.07em; }
.detail-row { padding:7vh 0; border-bottom:1px solid rgba(182,154,104,.34); }
.detail-row strong { display:block; margin-top:24px; color:var(--wine); font:400 clamp(2rem,10vw,3rem)/1.1 Georgia,var(--serif); letter-spacing:.08em; }
.venue-detail strong { font-family:var(--serif); font-size:clamp(1.8rem,8vw,2.5rem); }
.venue-detail p { margin-top:17px; color:var(--muted-text); font:400 .83rem/1.95 var(--serif); letter-spacing:.07em; }
.detail-actions { display:flex; flex-direction:column; align-items:center; padding-top:7vh; }
.primary-button { display:grid; width:min(100%,300px); min-height:49px; place-items:center; background:var(--wine); color:#fff9ef; text-decoration:none; font:400 .87rem/1 var(--serif); letter-spacing:.2em; text-indent:.2em; }
.copy-address { margin-top:24px; padding:7px 14px; border:0; border-bottom:1px solid rgba(122,38,51,.45); background:transparent; color:var(--wine); cursor:pointer; font:400 .78rem/1.3 var(--serif); letter-spacing:.15em; text-indent:.15em; }

/* Final Invitation */
.final-invitation {
  display:flex; min-height:115vh; min-height:115dvh; flex-direction:column; align-items:center;
  background:linear-gradient(115deg,rgba(182,154,104,.025),transparent 42%),repeating-linear-gradient(91deg,rgba(122,38,51,.01) 0 1px,transparent 1px 7px),var(--paper);
  padding:calc(env(safe-area-inset-top,0px) + 70px) 30px 0; text-align:center;
}
.final-watermark { position:absolute; top:42%; color:rgba(122,38,51,.03); font:400 min(75vw,20rem)/1 var(--serif); transform:translateY(-50%); }
.final-card { position:relative; z-index:2; display:flex; width:100%; max-width:390px; flex:1; flex-direction:column; align-items:center; justify-content:center; }
.double-happiness { color:var(--wine); font:400 clamp(3.2rem,15vw,4.5rem)/1 var(--serif); }
.final-kicker { margin-top:20px; color:var(--muted-gold); font:400 .71rem/1 var(--serif); letter-spacing:.25em; text-indent:.25em; }
.gold-rule { display:block; width:118px; height:1px; margin:27px auto; background:rgba(182,154,104,.6); }
.final-card h2 { color:var(--wine); font:500 clamp(1.5rem,6.7vw,2rem)/1.4 var(--serif); letter-spacing:.09em; }
.final-date { margin-top:17px; color:#60524d; font:400 .93rem/1 Georgia,serif; letter-spacing:.14em; }
.final-venue { margin-top:29px; color:#6e514b; font:400 .82rem/1 var(--serif); letter-spacing:.15em; }
.witness { margin-top:20px; color:var(--muted-text); font:400 .84rem/1.6 var(--serif); letter-spacing:.15em; }
.look-forward { margin-top:58px; color:var(--muted-gold); font:400 .76rem/1 var(--serif); letter-spacing:.33em; text-indent:.33em; }
.final-breath { flex:0 0 15vh; }

/* Fixed music */
.music-toggle {
  position:fixed; z-index:50; top:calc(env(safe-area-inset-top,0px) + 13px); right:max(12px,calc((100vw - 560px)/2 + 12px));
  display:grid; width:40px; height:40px; padding:9px; place-items:center; border:0; border-radius:50%;
  background:rgba(5,12,20,.16); color:rgba(255,255,255,.92); cursor:pointer; backdrop-filter:blur(3px);
}
.music-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.15; }
.music-toggle.is-playing svg { animation:record-spin 7s linear infinite; }
.music-toggle.is-muted { opacity:.58; }
.music-toggle.is-muted::after { position:absolute; width:18px; height:1px; content:""; background:currentColor; transform:rotate(-45deg); }
.music-toggle.on-light { background:rgba(250,248,243,.55); color:var(--wine); }
@keyframes record-spin { to{transform:rotate(360deg)} }

/* Scene-aware lyric layer */
.lyric-layer {
  position:fixed; z-index:40; bottom:calc(env(safe-area-inset-bottom,0px) + 15.5vh); top:auto;
  display:flex; max-width:min(72vw,400px); align-items:flex-end; padding:12px 0;
  color:#F7F2E9; font-family:var(--serif); font-size:clamp(20px,5.4vw,22px); font-weight:500; line-height:1.55; letter-spacing:.035em;
  opacity:0; pointer-events:none; filter:none; text-shadow:0 1px 2px rgba(0,0,0,.42),0 5px 18px rgba(0,0,0,.3);
  transition:opacity .32s ease,color .22s ease;
}
.lyric-layer::before { position:absolute; z-index:-1; inset:-16px -22px; content:""; background:radial-gradient(ellipse at center,rgba(8,17,28,.2),rgba(8,17,28,.08) 45%,transparent 76%); filter:blur(9px); pointer-events:none; }
.lyric-position-left-lower { left:clamp(28px,7.7vw,32px); right:auto; justify-content:flex-start; text-align:left; }
.lyric-position-right-lower { right:clamp(28px,7.7vw,32px); left:auto; justify-content:flex-end; text-align:right; }
.lyric-layer.is-shown { opacity:.96; }
.lyric-layer.is-relocating { opacity:0!important; transition-duration:.18s; }
.lyric-layer span {
  position:relative; z-index:0; display:-webkit-box; max-width:100%; overflow:hidden; white-space:pre-line; word-break:normal; overflow-wrap:break-word;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
  opacity:1; filter:blur(0); transform:translateY(0); transition:opacity .3s ease,filter .3s ease,transform .3s ease;
}
.lyric-layer span.is-changing { opacity:0; filter:blur(3px); transform:translateY(-4px); }
.lyric-layer span.is-entering { opacity:0; filter:blur(3px); transform:translateY(5px); transition:none; }
.lyric-light { color:#393531; text-shadow:0 1px 2px rgba(255,255,255,.9),0 4px 16px rgba(77,67,57,.24); }
.lyric-light::before { background:radial-gradient(ellipse at center,rgba(250,247,240,.36),rgba(250,247,240,.14) 45%,transparent 76%); }
.lyric-chinese { color:#7A2633; text-shadow:0 1px 2px rgba(255,250,240,.95),0 4px 16px rgba(122,38,51,.2); }
.lyric-chinese::before { background:radial-gradient(ellipse at center,rgba(250,244,234,.4),rgba(250,244,234,.15) 45%,transparent 76%); }
.level-normal { font-size:clamp(20px,5.4vw,22px); }
.level-featured { font-size:clamp(23px,6vw,25px); font-weight:500; }
.level-subtle { font-size:clamp(19px,5vw,20px); }
.level-subtle.is-shown { opacity:.56; }
.level-hidden { opacity:0!important; }

.toast {
  position:fixed; z-index:60; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 86px); max-width:calc(100% - 48px);
  padding:10px 15px; border:1px solid rgba(182,154,104,.35); background:rgba(53,35,31,.93); color:#fff8ec;
  font-size:.8rem; letter-spacing:.04em; white-space:nowrap; opacity:0; pointer-events:none;
  transform:translate(-50%,8px); transition:opacity .22s ease,transform .22s ease;
}
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (min-width:700px) {
  body { background:#080e14; }
  .app { width:min(100%,560px); margin:0 auto; box-shadow:0 0 90px rgba(0,0,0,.58); }
  .hero-photo { min-height:315px; }
}

@media (max-width:350px) {
  .avatar-round { width:132px; }
  .avatar-arch { width:145px; height:188px; }
  .portraits { height:560px; }
  .white-collage,.duo-chinese { min-height:590px; }
  .duo-editorial { min-height:520px; }
}

/* Mobile Stability Mode: photography and copy never depend on observers or heavy motion. */
@media (max-width:480px) {
  img,.reveal { opacity:1; visibility:visible; }
  .fade-up,.mask-reveal,.blur-reveal,.fade-up.is-visible,.mask-reveal.is-visible,.blur-reveal.is-visible {
    animation:none!important; filter:none!important; clip-path:none!important; transform:none!important; transition:opacity .2s ease;
  }
  [data-parallax] { transform:none!important; }
  .slow-scale:not(.cover-photo) img { animation:none!important; }
  .plant-shadow,.window-light { animation:none!important; }
  .meet,.wedding-details { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  .slow-scale img,.scroll-cue i,.open-invitation,.music-toggle svg,.ember-layer i,.plant-shadow,.window-light { animation:none!important; }
  .ember-layer { display:none; }
  .fade-up,.mask-reveal,.blur-reveal { filter:none; clip-path:none; transform:none; transition:opacity .2s ease; }
  [data-parallax] { transform:none!important; }
  .ceremony-knot i,.ceremony-knot b { transition-duration:.2s; transition-delay:0s; }
  .lyric-layer,.lyric-layer span { filter:none!important; transition:opacity .2s ease; transform:none; }
}