@font-face {
  font-family: "Invitation Serif";
  src: url("fonts/serif-arrival.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+4E0A, U+5165, U+573A, U+FF1A;
}
/* Additional Chinese glyphs absent from the original font subset. */
@font-face {
  font-family: "Invitation Serif";
  src: url("fonts/serif-extra.ttf?v=2") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+5171, U+5EA6, U+5FB7, U+767E, U+76FC, U+7EA6, U+8D74, U+8FCE, U+97F3, U+9AD8;
}
@font-face {
  font-family: "Invitation Serif";
  src: url("fonts/serif-0.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Invitation Display";
  src: url("fonts/display-1.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Invitation Display";
  src: url("fonts/display-0.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ivory: #f4efe7;
  --paper: #faf7f1;
  --ink: #30362f;
  --green: #536457;
  --gold: #a98a57;
  --blush: #d9c6ba;
  --serif: "Invitation Serif", "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif;
  --display: "Invitation Display", Didot, "Bodoni 72", "Times New Roman", var(--serif);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

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

.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  padding: 70px 24px 100px; text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.8), transparent 42%),
    linear-gradient(155deg, #f5eee4 0%, #eee5d9 55%, #f8f4ed 100%);
}
.hero::before {
  content: ""; position: absolute; width: 70vw; max-width: 330px; aspect-ratio: 1; border: 1px solid rgba(169,138,87,.3); border-radius: 50%;
}
.hero::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(83,100,87,.18); }
.hero-content { position: relative; z-index: 2; }
.eyebrow, .section-kicker, .photo-caption { font: 11px/1.2 var(--display); letter-spacing: .36em; color: var(--gold); }
.monogram { margin: 22px 0 16px; font: italic 48px/1 var(--display); color: var(--green); }
.monogram span { font-size: 25px; color: var(--gold); vertical-align: 10px; }
.date-line { display: flex; align-items: center; justify-content: center; gap: 12px; font: 15px var(--display); letter-spacing: .22em; }
.date-line span { width: 38px; height: 1px; background: var(--gold); }
.lunar-date { margin: -7px 0 0; color: var(--gold); font-size: 11px; letter-spacing: .2em; }
h1 { margin: 24px 0; font-weight: 400; font-size: clamp(32px, 10vw, 48px); letter-spacing: .18em; }
h1 > span { display: inline-block; white-space: nowrap; }
h1 i { margin: 0 9px; font: italic 25px var(--display); color: var(--gold); }
.hero-copy { margin: 0; font-size: 14px; line-height: 2.1; letter-spacing: .18em; color: #62675f; }
.scroll-cue { position: absolute; z-index: 3; bottom: 33px; color: var(--green); text-decoration: none; font: 9px var(--display); letter-spacing: .2em; }
.scroll-cue i { display: block; margin: 10px auto 0; width: 1px; height: 25px; background: var(--gold); animation: breathe 1.8s ease-in-out infinite; }
.corner { position: absolute; z-index: 1; width: 150px; height: 220px; opacity: .36; }
.corner::before, .corner::after { content: ""; position: absolute; border: 1px solid var(--green); border-radius: 100% 0; transform: rotate(32deg); }
.corner::before { width: 80px; height: 180px; }
.corner::after { width: 45px; height: 120px; left: 54px; top: 52px; }
.corner-left { left: -25px; bottom: -35px; transform: rotate(-22deg); }
.corner-right { right: -25px; top: -30px; transform: rotate(158deg); }

.section { position: relative; padding: 86px 24px; text-align: center; overflow: hidden; }
.section h2 { margin: 9px 0 28px; font-weight: 400; font-size: 28px; letter-spacing: .18em; }
.invitation { background: var(--paper); }
.flourish svg { width: 32px; height: 32px; }
.flourish { color: var(--gold); font-size: 26px; margin-bottom: 30px; }
.invitation-copy { font-size: 14px; line-height: 2.5; letter-spacing: .08em; }
.signature { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--green); font-size: 13px; letter-spacing: .12em; }
.signature i { color: var(--gold); font: italic 22px var(--display); }

.photos { padding-top: 100px; background: #e7e4dc; }
.photo-stack { position: relative; width: min(76vw, 340px); margin: 0 auto 54px; }
.photo-card { width: 100%; aspect-ratio: 3/4; border: 8px solid #fff; box-shadow: 0 18px 44px rgba(45,49,43,.13); }
.photo-main { position: relative; z-index: 2; }
.photo-back { position: absolute; inset: 0; transform: rotate(5deg) translate(13px, 2px); background-color: #c9cec3; }
.placeholder { display: grid; place-items: center; background: linear-gradient(145deg, #dad9d2, #bbbdb4); }
.photo-slot { position: relative; overflow: hidden; }
.photo-slot > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.photo-slot.photo-error > img { visibility: hidden; }
.photo-slot.has-photo .placeholder-mark { opacity: 0; }
.placeholder-mark { display: grid; place-items: center; gap: 8px; color: rgba(255,255,255,.85); }
.placeholder-mark span { font: 13px var(--display); letter-spacing: .35em; }
.placeholder-mark small { font-size: 11px; letter-spacing: .18em; }
.botanical { position: absolute; z-index: 3; right: -27px; bottom: -28px; width: 64px; height: 100px; color: var(--green); transform: rotate(34deg); opacity: .75; }
.botanical svg { width: 100%; height: 100%; }
.photo-caption { margin: 0 0 18px; }
.photo-quote { margin: auto; max-width: 420px; line-height: 2; font-size: 14px; color: #5f655e; }

.details { background: var(--paper); }
.details-card { max-width: 460px; margin: 0 auto; padding: 38px 25px; border: 1px solid rgba(169,138,87,.48); background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(169,138,87,.2); }
.detail-block { padding: 6px 0; }
.detail-label { font: 10px var(--display); letter-spacing: .26em; color: var(--gold); }
.detail-block strong { display: block; margin: 14px 0 9px; font-size: 23px; font-weight: 400; letter-spacing: .15em; }
.detail-block strong.big-date { font: 30px var(--display); letter-spacing: .1em; }
.big-date i { color: var(--gold); font-weight: 300; }
.detail-block p { margin: 0; line-height: 2; font-size: 13px; color: #666a64; }
.detail-block .banquet-label { font-size: 20px; text-align: center; color: var(--green); }
.divider { display: flex; align-items: center; gap: 10px; margin: 24px 0; color: var(--gold); font-size: 8px; }
.divider svg { display: block; width: 9px; height: 9px; flex: 0 0 9px; fill: currentColor; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(169,138,87,.36); }
.map-preview { display: block; position: relative; margin-top: 30px; overflow: hidden; border: 1px solid rgba(169,138,87,.38); background: #e4e1d8; }
.map-preview img { display: block; width: 100%; height: auto; }
.map-preview:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.map-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 13px 22px; border: 1px solid var(--green); color: var(--green); text-decoration: none; font-size: 12px; letter-spacing: .15em; transition: .25s ease; }
.map-button svg { width: 15px; height: 15px; flex: 0 0 15px; fill: currentColor; }
.map-button:hover { background: var(--green); color: white; }

.timeline { background: var(--green); color: #f5f0e7; }
.timeline .section-kicker { color: #c8ad7f; }
.timeline-list { width: min(100%, 440px); margin: 38px auto 0; text-align: left; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 16px; min-height: 90px; }
.timeline-item i { position: relative; width: 7px; height: 7px; margin-top: 5px; border: 1px solid #d7c39d; border-radius: 50%; }
.timeline-item:not(:last-child) i::after { content: ""; position: absolute; width: 1px; height: 75px; left: 2px; top: 9px; background: rgba(215,195,157,.4); }
.timeline-item strong { display: block; font-size: 15px; font-weight: 400; letter-spacing: .14em; }
.timeline-item span { display: block; margin-top: 7px; color: rgba(255,255,255,.52); font: italic 12px var(--display); letter-spacing: .08em; }

.closing { padding: 0 0 80px; background: #ece4dc; }
.closing-photo { width: 100%; aspect-ratio: 4/3; }
.closing-copy { padding: 66px 24px 0; }
.script { color: var(--gold); font: italic 20px var(--display); }
.closing-copy h2 { margin-bottom: 22px; }
.closing-copy > p:not(.script) { font-size: 13px; line-height: 2.1; color: #63665f; }
.names { margin-top: 30px; font-size: 20px; letter-spacing: .16em; }
.names i { font: italic 16px var(--display); color: var(--gold); }
footer { padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); text-align: center; background: #313a32; color: rgba(255,255,255,.55); }
footer a { color: #d0b990; text-decoration: none; font: italic 19px var(--display); }
footer p { margin: 8px 0 0; font: 9px var(--display); letter-spacing: .22em; }

.reveal { opacity: 1; }
.reveal-pending { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes breathe { 0%, 100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (max-width: 374px) {
  h1 { font-size: 30px; letter-spacing: .1em; }
  h1 i { margin: 0 5px; }
  .details-card { padding-inline: 18px; }
  .detail-block strong.big-date { font-size: 26px; letter-spacing: .05em; }
}
@media (min-width: 680px) {
  .section { padding-top: 110px; padding-bottom: 110px; }
  .hero::before { max-width: 400px; }
  .closing { display: grid; grid-template-columns: 1fr 1fr; padding: 0; align-items: center; }
  .closing-photo { min-height: 620px; }
  .closing-copy { padding: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.music-toggle {
  position: fixed;
  z-index: 30;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 24px;
  background: var(--paper);
  color: var(--green);
  font: 12px "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(48,54,47,.08);
}
.music-toggle[hidden] { display: none; }
.music-toggle[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.music-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.music-toggle:disabled { opacity: .65; cursor: default; }

.detail-block .arrival-time { margin-top: 8px; font-size: 15px; text-align: center; }