:root {
  --wine: #711f28;
  --wine-dark: #451016;
  --wine-soft: #9a4a51;
  --cream: #f4eadc;
  --ivory: #fffaf2;
  --paper: #fbf5eb;
  --ink: #2e2724;
  --muted: #86756d;
  --gold: #b78a58;
  --line: rgba(113,31,40,.16);
  --shadow: 0 22px 64px rgba(61, 25, 22, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0; color: var(--ink); overflow-x: hidden;
  background: radial-gradient(circle at 10% 5%, rgba(183,138,88,.09), transparent 28%), linear-gradient(180deg,#fffaf2 0%,#f3e8d9 100%);
  font-family: "Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","PingFang SC",serif;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
button,input,select,textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { -webkit-tap-highlight-color: transparent; }

.paper-noise { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .17; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E"); }

.entry-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 28px; overflow: hidden; background: radial-gradient(circle at 50% 35%,#8d3940 0,#6e1c24 42%,#3e0d12 100%); transition: opacity .85s ease, visibility .85s ease; }
.entry-gate::before,.entry-gate::after { content:""; position:absolute; width:390px; height:390px; border:1px solid rgba(244,217,177,.15); border-radius:50%; }
.entry-gate::before { top:-190px; left:-160px; box-shadow:0 0 0 30px rgba(244,217,177,.025),0 0 0 62px rgba(244,217,177,.025); }
.entry-gate::after { bottom:-220px; right:-170px; box-shadow:0 0 0 36px rgba(244,217,177,.025),0 0 0 75px rgba(244,217,177,.025); }
.entry-gate.hidden { opacity:0; visibility:hidden; }
.entry-frame { position:absolute; inset:22px; border:1px solid rgba(246,223,187,.36); }
.entry-frame::before,.entry-frame::after { content:"❦"; position:absolute; color:#d9b883; font-size:21px; }
.entry-frame::before { left:50%; top:14px; transform:translateX(-50%); }
.entry-frame::after { left:50%; bottom:14px; transform:translateX(-50%) rotate(180deg); }
.entry-card { position:relative; z-index:1; width:min(88vw,390px); color:#fff7ed; text-align:center; }
.seal,.final-monogram { width:72px; height:72px; margin:0 auto 24px; display:grid; place-items:center; border:1px solid #e0bd87; transform:rotate(45deg); }
.seal span,.final-monogram span { transform:rotate(-45deg); font-size:34px; }
.entry-card h1 { margin:12px 0 14px; font-size:clamp(31px,8vw,44px); font-weight:500; letter-spacing:.07em; }
.entry-card h1 span { color:#dfbd8b; font-size:.7em; }
.entry-date { margin:10px 0 31px; color:rgba(255,246,235,.78); letter-spacing:.13em; font-size:13px; }
.entry-date i { display:inline-block; width:4px; height:4px; margin:0 8px 3px; border-radius:50%; background:#d9b47d; }
.entry-card small { display:block; margin-top:13px; opacity:.6; }

.music-btn { position:fixed; z-index:60; top:max(18px,env(safe-area-inset-top)); right:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.52); background:rgba(62,12,18,.56); color:#fff; backdrop-filter:blur(8px); cursor:pointer; }
.music-disc { display:grid; place-items:center; width:100%; height:100%; }
.music-btn.playing .music-disc { animation:spin 4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.section { position:relative; padding:96px max(22px,calc((100vw - 960px)/2)); }
.section-full { min-height:100svh; }
.eyebrow,.section-kicker { font:11px/1.4 Georgia,"Times New Roman",serif; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.eyebrow.light { color:#efd4ac; }
.section h3,.quote-divider h3 { margin:9px 0 24px; color:var(--wine); font-weight:500; font-size:clamp(30px,7vw,44px); letter-spacing:.08em; }
.section-head { max-width:620px; margin:0 auto 34px; text-align:center; }
.section-head p:last-child,.details-lead,.blessings-lead { color:var(--muted); line-height:1.9; }
.chapter-no { position:absolute; top:34px; right:max(22px,calc((100vw - 960px)/2)); font:60px/1 Georgia,serif; color:rgba(113,31,40,.065); }
.light-no { color:rgba(255,255,255,.08); }

.hero { position:relative; display:grid; overflow:hidden; color:#fff; }
.hero-bg { position:absolute; inset:0; background:url('assets/hero.svg') center/cover no-repeat; transform:scale(1.02); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,9,11,.17),rgba(36,7,10,.08) 42%,rgba(41,8,12,.72)); }
.hero::after { content:""; position:absolute; inset:22px; border:1px solid rgba(255,244,228,.45); pointer-events:none; }
.hero-topline { position:absolute; z-index:2; top:max(44px,calc(env(safe-area-inset-top) + 28px)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; font:10px Georgia,serif; letter-spacing:.25em; opacity:.82; }
.hero-topline i { width:42px; height:1px; background:rgba(255,255,255,.65); }
.hero-content { position:relative; z-index:2; align-self:end; padding:0 28px max(94px,calc(env(safe-area-inset-bottom) + 84px)); text-align:center; }
.hero-date { margin-top:12px; font:clamp(31px,9vw,50px)/1 Georgia,serif; letter-spacing:.10em; }
.hero-rule { width:min(220px,55vw); margin:17px auto 15px; display:flex; align-items:center; gap:10px; color:#e8c391; }
.hero-rule::before,.hero-rule::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.53); }
.hero-rule span { font-size:11px; }
.hero h2 { margin:0; font-size:clamp(28px,7.5vw,43px); font-weight:500; letter-spacing:.1em; }
.hero h2 span { color:#e5c18d; font-size:.72em; }
.hero-sub { margin:14px 0 8px; font-size:18px; letter-spacing:.28em; }
.hero-place { margin:0; font-size:12px; letter-spacing:.08em; opacity:.86; }
.scroll-tip { position:absolute; z-index:3; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font:8px Georgia,serif; letter-spacing:.2em; opacity:.65; }
.scroll-tip i { width:1px; height:22px; background:#fff; animation:pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scaleY(.45); transform-origin:top; opacity:.45; } }

.invitation { text-align:center; background:var(--paper); }
.ornament { color:var(--gold); font-size:25px; margin-bottom:17px; }
.invitation-copy { margin:22px auto; max-width:610px; color:#66574f; line-height:2.15; font-size:15px; }
.invitation-copy.strong { color:var(--wine); }
.mini-heart { color:var(--wine); font-size:12px; }
.signature-script { margin-top:31px; font:italic 28px/1.2 Georgia,serif; color:var(--gold); }

.story { background:#eee0cf; }
.story-grid { max-width:780px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.photo-card { margin:0; padding:8px 8px 12px; background:#fffaf1; box-shadow:var(--shadow); transform:rotate(-1.2deg); }
.photo-card:nth-child(2) { margin-top:34px; transform:rotate(1.4deg); }
.photo-card:nth-child(3) { margin-top:-25px; transform:rotate(.7deg); }
.photo-card:nth-child(4) { transform:rotate(-.8deg); }
.photo-card img { aspect-ratio:3/4; object-fit:cover; }
.photo-card figcaption { margin-top:9px; text-align:center; color:#8c7164; font-size:11px; letter-spacing:.14em; }

.quote-divider { position:relative; min-height:58svh; padding:88px 26px; display:grid; place-items:center; text-align:center; color:#fff8ef; overflow:hidden; }
.quote-divider::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(70,14,20,.76),rgba(70,14,20,.84)),url('assets/photo-04.svg') center/cover no-repeat; filter:saturate(.7); transform:scale(1.03); }
.quote-divider-b::before { background:linear-gradient(rgba(46,25,22,.67),rgba(62,18,21,.78)),url('assets/photo-11.svg') center/cover no-repeat; }
.quote-divider-c::before { background:linear-gradient(rgba(61,14,18,.67),rgba(61,14,18,.8)),url('assets/photo-14.svg') center/cover no-repeat; }
.quote-inner { position:relative; z-index:1; max-width:670px; }
.quote-number { font:10px Georgia,serif; color:#e4bf8e; letter-spacing:.28em; }
blockquote { margin:25px 0 0; font-size:clamp(21px,5.6vw,32px); line-height:1.9; font-weight:400; letter-spacing:.05em; }
.quote-sign { margin-top:26px; font:italic 17px Georgia,serif; color:#e9ca9d; }
.tiny-rule { margin:30px auto 0; display:flex; justify-content:center; align-items:center; gap:10px; color:#dcb77f; }
.tiny-rule i { width:48px; height:1px; background:rgba(255,255,255,.45); }
.tiny-rule span { font-size:10px; }

.photo-essay { background:#faf4ea; }
.photo-feature { position:relative; max-width:760px; margin:0 auto 70px; }
.photo-feature img { aspect-ratio:4/5; object-fit:cover; box-shadow:var(--shadow); }
.photo-feature-label { position:absolute; right:-20px; bottom:-36px; width:min(72%,380px); padding:19px 22px; background:var(--wine); color:#fff6ea; box-shadow:var(--shadow); }
.photo-feature-label b { display:block; margin-bottom:7px; color:#e1bc88; font:10px Georgia,serif; letter-spacing:.24em; }
.photo-feature-label span { line-height:1.7; font-size:13px; }
.photo-pair { max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.photo-pair figure { margin:0; }
.photo-pair .offset { margin-top:70px; }
.photo-pair img { aspect-ratio:3/4; object-fit:cover; }
.photo-pair figcaption { margin:13px 6px 0; color:#7d6b63; font-size:12px; line-height:1.8; }

.countdown-section { text-align:center; color:#fff6ec; background:linear-gradient(145deg,#501019,#7b2630 60%,#521018); }
.countdown-section h3 { color:#fff7ed; }
.countdown { max-width:700px; margin:40px auto 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.countdown div { padding:20px 6px 17px; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.16); }
.countdown strong { display:block; font:clamp(36px,9vw,57px)/1 Georgia,serif; color:#f0c997; }
.countdown span { display:block; margin-top:9px; font-size:11px; opacity:.7; }
.countdown-note { color:rgba(255,247,237,.72); font-size:12px; }

.gallery { background:#f7efe4; }
.editorial-grid { max-width:800px; margin:0 auto; display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }
.editorial-grid figure { margin:0; overflow:hidden; background:#ddd; }
.editorial-grid img { height:100%; object-fit:cover; }
.editorial-main { grid-row:span 2; position:relative; }
.editorial-main figcaption { position:absolute; left:16px; bottom:14px; color:white; font:9px Georgia,serif; letter-spacing:.18em; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.editorial-grid > figure:not(.editorial-main):not(.editorial-wide) { aspect-ratio:1/1; }
.editorial-wide { grid-column:1/-1; aspect-ratio:16/9; }

.film-gallery { background:#efe0ce; padding-left:0; padding-right:0; }
.film-title { padding:0 max(22px,calc((100vw - 960px)/2)); margin-bottom:24px; }
.film-title span { display:block; color:var(--gold); font:10px Georgia,serif; letter-spacing:.22em; }
.film-title b { display:block; margin-top:8px; color:var(--wine); font-size:26px; font-weight:500; letter-spacing:.05em; }
.film-strip { display:flex; gap:10px; overflow-x:auto; padding:8px 22px 18px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.film-strip::-webkit-scrollbar { display:none; }
.film-strip figure { position:relative; flex:0 0 min(72vw,330px); margin:0; padding:7px 7px 32px; background:#fff9ef; box-shadow:0 15px 35px rgba(57,28,23,.11); scroll-snap-align:center; }
.film-strip img { aspect-ratio:3/4; object-fit:cover; }
.film-strip figcaption { position:absolute; left:12px; bottom:8px; color:#a17d63; font:10px Georgia,serif; letter-spacing:.18em; }
.gallery-caption { max-width:620px; margin:34px auto 0; padding:0 24px; text-align:center; color:#745f55; line-height:1.9; }

.details { background:var(--paper); text-align:center; }
.calendar-card { max-width:610px; margin:34px auto 35px; padding:28px 26px 24px; text-align:left; background:#fffdf8; border:1px solid rgba(113,31,40,.14); box-shadow:var(--shadow); }
.calendar-heading { display:flex; justify-content:space-between; align-items:end; padding-bottom:18px; border-bottom:1px solid var(--line); }
.calendar-heading small { display:block; color:var(--gold); font:11px Georgia,serif; letter-spacing:.26em; }
.calendar-heading strong { display:block; margin-top:2px; color:var(--wine); font:33px Georgia,serif; letter-spacing:.08em; }
.calendar-heading > span { color:#927e72; font-size:12px; }
.calendar-week,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }
.calendar-week { padding:19px 0 11px; color:#a68b7c; font-size:11px; }
.calendar-grid { row-gap:4px; }
.calendar-grid > span { position:relative; min-height:42px; display:grid; place-items:center; font:15px Georgia,serif; color:#5f504a; }
.calendar-grid .wedding-day { color:white; isolation:isolate; }
.calendar-grid .wedding-day i { position:absolute; z-index:-1; top:50%; left:50%; transform:translate(-50%,-48%) scaleX(1.16); color:var(--wine); font-style:normal; font-size:39px; line-height:1; }
.calendar-grid .wedding-day b { font-weight:400; transform:translateY(-1px); }
.calendar-footer { margin-top:15px; padding-top:17px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:baseline; }
.calendar-footer span { color:var(--wine); font:10px Georgia,serif; letter-spacing:.15em; }
.calendar-footer strong { color:var(--wine); font:27px Georgia,serif; }
.calendar-footer em { justify-self:end; color:#846f64; font-size:12px; font-style:normal; }
.detail-list { max-width:610px; margin:0 auto 30px; text-align:left; border-top:1px solid var(--line); }
.detail-row { display:grid; grid-template-columns:47px 1fr; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); }
.detail-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(113,31,40,.24); color:var(--wine); font-size:13px; }
.detail-row b { color:var(--wine); font-size:14px; font-weight:600; }
.detail-row p { margin:6px 0 0; color:#73625a; line-height:1.7; font-size:13px; }
.button-row { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }

.btn { min-height:47px; padding:0 24px; border:1px solid transparent; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease,opacity .2s ease,background .2s ease; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--wine); color:#fff9f0; box-shadow:0 9px 25px rgba(113,31,40,.18); }
.btn-outline { background:transparent; border-color:rgba(113,31,40,.32); color:var(--wine); }
.btn-ivory { background:#f7e7d0; color:var(--wine-dark); box-shadow:0 9px 25px rgba(50,10,15,.17); }
.btn-block { width:100%; }

.rsvp { text-align:center; background:#e8d6c0; }
.rsvp-intro { max-width:610px; margin:-6px auto 30px; color:#705f57; line-height:1.9; font-size:13px; }
.form-card { max-width:610px; margin:0 auto; padding:26px; text-align:left; background:rgba(255,250,243,.95); border:1px solid rgba(113,31,40,.11); box-shadow:var(--shadow); }
.form-card label { display:block; margin-bottom:17px; color:var(--wine); font-size:13px; }
.form-card input,.form-card select,.form-card textarea { width:100%; margin-top:7px; padding:12px 13px; border:1px solid rgba(113,31,40,.16); border-radius:0; background:#fffdf9; color:var(--ink); outline:none; }
.form-card input:focus,.form-card select:focus,.form-card textarea:focus { border-color:rgba(113,31,40,.55); }
.form-card textarea { resize:vertical; }
.check-row { display:flex!important; gap:9px; align-items:flex-start; color:#6d5c55!important; line-height:1.65; }
.check-row input { width:16px!important; height:16px; margin:2px 0 0!important; accent-color:var(--wine); flex:0 0 auto; }
.hp-field { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }
.form-status { min-height:20px; margin:12px 0 0; text-align:center; color:#765f55; font-size:12px; line-height:1.6; }
.form-status.error { color:#9a2730; }
.privacy-note { color:rgba(64,44,39,.62); font-size:11px; line-height:1.7; }

.blessings { text-align:center; background:var(--paper); }
.blessing-list { max-width:610px; margin:25px auto 0; text-align:left; }
.blessing-list article { position:relative; padding:18px 8px 18px 31px; border-bottom:1px dashed rgba(113,31,40,.18); }
.blessing-list article::before { content:"♥"; position:absolute; left:4px; top:20px; color:#c29a6b; font-size:10px; }
.blessing-list span { color:var(--gold); font-size:12px; letter-spacing:.14em; }
.blessing-list p { margin:7px 0 0; color:#675850; line-height:1.8; }
.text-button { margin-top:24px; padding:8px 2px; border:0; border-bottom:1px solid rgba(113,31,40,.35); background:none; color:var(--wine); cursor:pointer; }

.final-photo { padding-top:90px; padding-bottom:90px; text-align:center; background:#eadbc8; }
.final-photo-frame { max-width:630px; margin:0 auto; padding:9px; background:#fffaf1; box-shadow:var(--shadow); }
.final-photo-frame img { aspect-ratio:4/5; object-fit:cover; }
.final-photo p { margin:27px 0 0; color:#6f5e56; line-height:1.9; }
.final-section { min-height:88svh; display:grid; align-content:center; justify-items:center; text-align:center; color:#fff8ef; background:radial-gradient(circle at 50% 20%,#8a333b,#5a1219 52%,#3e0b11); }
.final-section h3 { color:#fff5e9; }
.final-monogram { width:92px; height:92px; }
.final-monogram span { font-size:40px; }
.final-date { font:23px Georgia,serif; letter-spacing:.13em; color:#e8c28f; }
.final-place { margin-bottom:30px; color:rgba(255,244,231,.78); }
.footer-note { margin-top:48px; font:10px Georgia,serif; letter-spacing:.15em; opacity:.46; }

.toast { position:fixed; z-index:120; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translate(-50%,20px); padding:10px 16px; border-radius:999px; background:rgba(20,15,14,.9); color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:.25s ease; white-space:nowrap; max-width:88vw; text-overflow:ellipsis; overflow:hidden; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.wechat-guide { position:fixed; inset:0; z-index:130; padding:max(30px,env(safe-area-inset-top)) 24px 24px; background:rgba(0,0,0,.84); color:#fff; text-align:right; opacity:0; visibility:hidden; transition:.2s ease; }
.wechat-guide.show { opacity:1; visibility:visible; }
.guide-arrow { font-size:54px; line-height:1; }
.wechat-guide p { margin:12px 0 24px; line-height:1.8; }
.wechat-guide button { border:1px solid rgba(255,255,255,.65); border-radius:999px; padding:8px 16px; background:transparent; color:#fff; }

[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .85s ease,transform .85s ease; }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.hero[data-reveal] { opacity:1; transform:none; }

@media (max-width:620px) {
  .section { padding:82px 20px; }
  .chapter-no { top:24px; right:20px; font-size:49px; }
  .hero::after { inset:14px; }
  .story-grid { gap:9px; }
  .photo-card { padding:5px 5px 9px; }
  .photo-card:nth-child(2) { margin-top:24px; }
  .photo-card:nth-child(3) { margin-top:-14px; }
  .photo-feature { margin-bottom:62px; }
  .photo-feature-label { right:-6px; bottom:-34px; width:84%; }
  .photo-pair { gap:10px; }
  .photo-pair .offset { margin-top:48px; }
  .countdown { gap:4px; }
  .countdown div { padding-left:2px; padding-right:2px; }
  .countdown strong { font-size:34px; }
  .editorial-grid { gap:7px; }
  .film-title b { font-size:23px; }
  .calendar-card { padding:22px 15px 20px; }
  .calendar-grid > span { min-height:39px; }
  .calendar-footer { grid-template-columns:auto auto; }
  .calendar-footer em { grid-column:1/-1; justify-self:start; }
  .form-card { padding:22px 18px; }
  blockquote { font-size:21px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}