/* ═══════════════════════════════════════════════════════════
   婚礼邀请函 · 样式
   设计：黑白杂志编辑风（Editorial）
   象牙白 × 炭黑 × 香槟金
   字体：Playfair Display（英文标题）/ Noto Serif SC（中文大字）/ Noto Sans SC（正文）
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 色板 ── */
  --paper: #f7f4ee;          /* 象牙白 */
  --paper-2: #efeae0;
  --ink: #17150f;            /* 暖炭黑 */
  --ink-soft: #6f6a5e;
  --line: rgba(23, 21, 15, 0.14);
  --line-strong: rgba(23, 21, 15, 0.28);
  --gold: #b3915f;           /* 香槟金 */
  --gold-bright: #cbb07d;
  --gold-soft: rgba(179, 145, 95, 0.16);

  /* ── 字体 ── */
  --font-editorial: "Playfair Display", "Noto Serif SC", serif;
  --font-song: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ── 动效 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;

  /* ── 尺寸 ── */
  --max-w: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--paper); }

/* ── 通用元素 ── */
.container {
  width: min(var(--max-w), 100% - 3rem);
  margin-inline: auto;
}
.container--narrow { --max-w: 820px; }

.section {
  padding: clamp(5.5rem, 11vw, 8.5rem) 0;
  position: relative;
}
/* 段落之间的杂志分节细线 */
.section + .section { border-top: 1px solid var(--line); }

/* 滚动渐入（仅启用 JS 时隐藏；无 JS 内容直接可见） */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ── 编辑式排版元件 ── */
.kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker--gold { color: var(--gold-bright); }

.headline {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: clamp(2rem, 5.6vw, 3.3rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0.5rem 0 0.4rem;
}
.headline--light { color: #f4efe6; }
.headline--en {
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.2;
}

.section__head {
  text-align: center;
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
}
.section__sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* 金色斜体符号（& 等） */
.amp {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
}

/* ── 按钮 ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.95rem 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.3s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .intro__arrow { transition: transform 0.3s ease; }
.btn:hover .intro__arrow { transform: translateX(5px); }

/* ═══════════════════════════════
   开场门页
   ═══════════════════════════════ */
html:not(.js) .intro { display: none; }
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(179, 145, 95, 0.1), transparent 70%),
    var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.95s var(--ease-out), visibility 0s linear 0.95s;
}
.intro--out {
  transform: translateY(-101%);
  visibility: hidden;
}
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 0 1.4rem; }
.intro__kicker { letter-spacing: 0.5em; text-indent: 0.5em; }
.intro__names {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: 1.2;
  color: var(--ink);
}
.intro__amp { font-style: italic; font-weight: 600; color: var(--gold); }
.intro__date {
  font-size: 0.78rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-soft);
  font-family: var(--font-sans);
}
.intro__btn { margin-top: 2rem; }
.intro__hint {
  position: absolute;
  bottom: 2.4rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* ═══════════════════════════════
   首屏 Hero：杂志式大标题
   ═══════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 2.4rem;
}
.hero__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* 右侧预留背景音乐按钮(46px)的空间，避免与 SAVE THE DATE 重叠 */
  padding: 0 calc(max(1.5rem, 4vw) + 3.6rem) 0 max(1.5rem, 4vw);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__brand--right { color: var(--gold); }
.hero__brandAmp { font-style: normal; }

.hero__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.2rem 5rem;
}
.hero__kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.72rem, 2.2vw, 0.9rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.hero__title {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: clamp(3rem, 12vw, 8.5rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.hero__title .amp { font-weight: 500; font-size: 0.82em; padding: 0 0.12em; }
.hero__cn {
  margin-top: 1.4rem;
  font-family: var(--font-song);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--ink-soft);
}
.hero__cnDot { color: var(--gold); padding: 0 0.3em; }
.hero__meta {
  margin-top: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--ink-soft);
}
.hero__lunar {
  margin-top: 0.55rem;
  font-family: var(--font-song);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--gold);
}
.hero__btn { margin-top: 2.8rem; }
.hero__cue {
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.64rem;
  letter-spacing: 0.4em;
  color: var(--ink-soft);
  animation: cueFloat 2.2s ease-in-out infinite;
}
@keyframes cueFloat {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* 启封后的标题入场 */
html.entered .hero__kicker,
html.entered .hero__title,
html.entered .hero__cn,
html.entered .hero__meta,
html.entered .hero__lunar,
html.entered .hero__btn {
  animation: riseIn 0.9s var(--ease-out) both;
}
html.entered .hero__kicker { animation-delay: 0.1s; }
html.entered .hero__title  { animation-delay: 0.22s; }
html.entered .hero__cn     { animation-delay: 0.42s; }
html.entered .hero__meta   { animation-delay: 0.55s; }
html.entered .hero__lunar  { animation-delay: 0.62s; }
html.entered .hero__btn    { animation-delay: 0.7s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════
   沉浸大图横幅
   ═══════════════════════════════ */
.banner { padding: 0; }
.banner__wrap {
  position: relative;
  height: clamp(420px, 72vh, 720px);
  overflow: hidden;
  background: var(--paper-2);
}
.banner__img {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  object-fit: cover;
  will-change: transform;
}
.banner__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 11, 8, 0.18) 0%, rgba(12, 11, 8, 0) 35%),
    linear-gradient(0deg, rgba(12, 11, 8, 0.62) 0%, rgba(12, 11, 8, 0) 48%);
}
.banner__quote {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 6vw, 4.2rem);
  transform: translateX(-50%);
  width: min(760px, 90%);
  text-align: center;
  font-family: var(--font-editorial);
  font-size: clamp(1.35rem, 3.6vw, 2.1rem);
  line-height: 1.75;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.banner__quote em { font-style: italic; color: #ecd9ae; }
/* 主图缺失占位 */
.banner__img[data-missing="1"] { display: none; }
.banner__wrap:has(.banner__img[data-missing="1"]) {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(23, 21, 15, 0.05) 16px, rgba(23, 21, 15, 0.05) 32px),
    var(--paper-2);
}
.banner__wrap:has(.banner__img[data-missing="1"]) .banner__quote {
  color: var(--ink);
  text-shadow: none;
}
.banner__wrap:has(.banner__img[data-missing="1"]) .banner__quote em { color: var(--gold); }
.banner__wrap:has(.banner__img[data-missing="1"]) .banner__veil { display: none; }

/* ═══════════════════════════════
   邀请语（左右分栏）
   ═══════════════════════════════ */
.invite { overflow: hidden; }
.invite__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  position: relative;
}
.invite__lead .headline { margin-top: 1rem; }
.invite__body { padding-top: 0.6rem; }
.invite__p {
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 2.15;
  margin-bottom: 1.6rem;
}
.invite__p--lead { color: var(--ink); font-family: var(--font-song); font-weight: 500; }
.invite__sign {
  margin-top: 2.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.invite__quote {
  position: absolute;
  right: -1rem;
  top: -4.5rem;
  z-index: 0;
  font-family: var(--font-editorial);
  font-size: clamp(11rem, 26vw, 20rem);
  line-height: 1;
  color: rgba(179, 145, 95, 0.13);
  pointer-events: none;
  user-select: none;
}
.invite__lead, .invite__body { position: relative; z-index: 1; }

/* ═══════════════════════════════
   新人
   ═══════════════════════════════ */
.couple { --avatar: clamp(132px, 24vw, 240px); }
.couple__grid {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 6vw, 3.6rem);
}
.couple__item { text-align: center; }
/* 圆形头像框（新人并排展示） */
.couple__frame {
  position: relative;
  width: var(--avatar);
  height: var(--avatar);
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
}
.couple__item:hover .couple__frame {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(23, 21, 15, 0.5);
}
.couple__frame img { width: 100%; height: 100%; object-fit: cover; }
/* 新郎头像微调：原图人物偏上，圆形框居中裁切会切到头顶；
   裁切窗口略上移（第二个值越小窗口越靠上：50%=居中、0%=贴顶）。
   当前 35%：只比居中上移一点，露出完整头顶又不至于留白过多 */
.couple__item:first-child .couple__frame img { object-position: 50% 35%; }
/* 头像缺失占位 */
.couple__frame img[data-missing="1"] { display: none; }
.couple__frame:has(img[data-missing="1"])::before {
  content: "PHOTO";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--ink-soft);
}
.couple__tag {
  margin-top: 1.7rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
  text-transform: uppercase;
}
.couple__name {
  font-family: var(--font-song);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--ink);
  margin: 0.45rem 0 0.3rem;
}
.couple__desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.9; }
/* 中间的 & 连接符：圆形小徽章，随圆心中线叠放 */
.couple__amp {
  position: absolute;
  left: 50%;
  top: calc(var(--avatar) / 2);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  padding-bottom: 0.06em;
  color: var(--gold);
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

/* ═══════════════════════════════
   我们的故事
   ═══════════════════════════════ */
.story__list {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 6.5rem);
}
.story__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1fr;
  align-items: center;
  column-gap: clamp(1.2rem, 3.6vw, 3rem);
  row-gap: 1.4rem;
}
.story__num {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--gold);
  align-self: start;
  padding-top: 0.6rem;
}
.story__media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}
.story__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.story__row:hover .story__media img { transform: scale(1.04); }
.story__media img[data-missing="1"] { display: none; }
.story__media:has(img[data-missing="1"]) {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.story__text {
  grid-column: 3;
  grid-row: 1;
}
.story__row--flip .story__text { grid-column: 2; }
.story__row--flip .story__media { grid-column: 3; }
.story__text h3 {
  font-family: var(--font-song);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.story__text p {
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 2.4vw, 1.08rem);
  line-height: 2.1;
}

/* ═══════════════════════════════
   时间与地点
   ═══════════════════════════════ */
.info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: 780px;
  margin-inline: auto;
}
.info__card {
  border-top: 1px solid var(--line-strong);
  padding-top: 2rem;
  position: relative;
}
.info__kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--ink-soft);
}
.info__big {
  font-family: var(--font-editorial);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.8rem 0 0.2rem;
}
.info__venue {
  font-family: var(--font-song);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0.8rem 0 0.2rem;
}
.info__line {
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  margin: 1.1rem 0;
}
.info__note { font-size: 0.95rem; color: var(--ink); }
.info__note--muted { color: var(--ink-soft); margin-top: 0.2rem; }
.info__lunar {
  font-family: var(--font-song);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0.45rem 0 0;
}
.info__address {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 2;
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s ease;
}
.info__addressText { transition: color 0.3s ease; }
.info__address:hover .info__addressText,
.info__address:focus-visible .info__addressText { color: var(--ink); }
.info__addressCta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 1em;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--gold);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.info__addressCta svg { width: 12px; height: 12px; fill: currentColor; }
.info__address:hover .info__addressCta,
.info__address:focus-visible .info__addressCta {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
}
.info__address:active .info__addressCta { transform: scale(0.97); }

/* ═══════════════════════════════
   倒计时（黑色反白段）
   ═══════════════════════════════ */
.countdown {
  background: var(--ink);
  color: #f4efe6;
  border-top: 1px solid rgba(179, 145, 95, 0.5);
  border-bottom: 1px solid rgba(179, 145, 95, 0.5);
  text-align: center;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
}
.countdown__cell {
  padding: 1.6rem 0.5rem;
  border-left: 1px solid rgba(244, 239, 230, 0.16);
}
.countdown__cell:first-child { border-left: none; }
.countdown__num {
  display: block;
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #fff;
  transition: transform 0.4s var(--ease-out);
}
.countdown__num.tick { transform: translateY(-5px) scale(1.08); color: var(--gold-bright); }
.countdown__label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: rgba(244, 239, 230, 0.55);
}
.countdown__note {
  margin-top: 3rem;
  font-family: var(--font-song);
  font-size: 0.98rem;
  letter-spacing: 0.18em;
  color: rgba(244, 239, 230, 0.75);
}

/* ═══════════════════════════════
   婚礼日程
   ═══════════════════════════════ */
.agenda {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.agenda__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}
.agenda__time {
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.agenda__body h3 {
  font-family: var(--font-song);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.agenda__body p { color: var(--ink-soft); font-size: 0.92rem; }

/* ═══════════════════════════════
   照片墙
   ═══════════════════════════════ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 16vw, 180px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.5vw, 16px);
}
.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
  cursor: zoom-in;
}
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.gallery__item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.gallery__item:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(6) { grid-column: span 2; grid-row: span 1; }
.gallery__item:nth-child(7) { grid-column: span 1; grid-row: span 1; }
.gallery__item:nth-child(8) { grid-column: span 1; grid-row: span 1; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}
.gallery__item:hover img { transform: scale(1.06); filter: brightness(1.05); }
/* 预留位（photo-7/8 未放时） */
.gallery__item img[data-missing="1"] { display: none; }
.gallery__item--slot:has(img[data-missing="1"]) {
  border: 1px dashed var(--line-strong);
  cursor: default;
  display: grid;
  place-items: center;
}
.gallery__item--slot:has(img[data-missing="1"])::before {
  content: "PHOTO";
  font-size: 0.7rem;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: var(--ink-soft);
}

/* ═══════════════════════════════
   灯箱
   ═══════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 11, 8, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  padding: 2.4rem;
}
.lightbox.show { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.lightbox__stage { max-width: 94vw; text-align: center; }
.lightbox__stage img {
  max-width: 94vw;
  max-height: 80vh;
  margin-inline: auto;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
}
.lightbox__stage figcaption {
  margin-top: 1rem;
  color: rgba(244, 239, 230, 0.7);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: 1px solid rgba(244, 239, 230, 0.45);
  background: transparent;
  color: rgba(244, 239, 230, 0.9);
  font-size: 1.4rem;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, background 0.3s ease;
  font-family: var(--font-sans);
}
.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.lightbox__close { top: 1.8rem; right: 1.8rem; }
.lightbox__nav--prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }

/* ═══════════════════════════════
   地图导航面板（点击地点后弹出）
   ═══════════════════════════════ */
.navsheet {
  position: fixed;
  inset: 0;
  z-index: 320;   /* 需高于右上角音乐开关（300），避免挡住面板关闭按钮 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.navsheet.show { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.navsheet__veil {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 8, 0.55);
}
.navsheet__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2.2rem clamp(1.35rem, 5vw, 2.4rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -30px 70px -30px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.42s var(--ease-out);
}
.navsheet.show .navsheet__panel { transform: none; }
.navsheet__kicker {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
}
.navsheet__title {
  margin: 0.6rem 0 0.35rem;
  font-family: var(--font-song);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.navsheet__addr { font-size: 0.88rem; line-height: 1.9; color: var(--ink-soft); }
.navsheet__tip {
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  font-size: 0.78rem;
  line-height: 1.9;
  color: #7d6337;
}
.navsheet__tip[hidden] { display: none; }
.navsheet__list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.navsheet__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.navsheet__item:hover,
.navsheet__item:focus-visible { border-color: var(--gold); background: var(--gold-soft); }
.navsheet__item:active { transform: scale(0.99); }
.navsheet__item[hidden] { display: none; }
.navsheet__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.navsheet__icon svg { width: 100%; height: 100%; fill: currentColor; }
.navsheet__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.18rem; }
.navsheet__name { font-weight: 500; letter-spacing: 0.08em; }
.navsheet__desc { font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.05em; color: var(--ink-soft); }
.navsheet__arrow {
  flex: none;
  color: var(--gold);
  transition: transform 0.3s ease;
}
.navsheet__item:hover .navsheet__arrow { transform: translateX(4px); }
.navsheet__item--primary { border-color: var(--gold); background: var(--ink); color: var(--paper); }
.navsheet__item--primary .navsheet__icon { color: var(--gold-bright); }
.navsheet__item--primary .navsheet__desc { color: rgba(244, 239, 230, 0.62); }
.navsheet__item--primary:hover,
.navsheet__item--primary:focus-visible { border-color: var(--gold-bright); background: #221f17; }
.navsheet__item--ghost { border-style: dashed; }
.navsheet__item--done { border-color: var(--gold); background: var(--gold-soft); }
.navsheet__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.navsheet__close:hover,
.navsheet__close:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════
   结尾
   ═══════════════════════════════ */
.footer {
  background: var(--ink);
  color: #f4efe6;
  text-align: center;
  padding: clamp(6rem, 12vw, 9rem) 0;
  border-top: 1px solid rgba(179, 145, 95, 0.5);
}
.footer__kicker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold-bright);
}
.footer__names {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  line-height: 1.2;
  color: #fff;
  margin: 0.8rem 0 0.4rem;
}
.footer__amp { font-style: italic; font-weight: 600; color: var(--gold); }
.footer__cn {
  font-family: var(--font-song);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: rgba(244, 239, 230, 0.85);
  margin-top: 1rem;
}
.footer__meta {
  margin-top: 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: rgba(244, 239, 230, 0.5);
}
.footer__beian {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: rgba(244, 239, 230, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer__beian:hover,
.footer__beian:focus-visible { color: var(--gold-bright); }
.footer__beian:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; }

/* ═══════════════════════════════
   响应式
   ═══════════════════════════════ */
@media (max-width: 900px) {
  .invite__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .invite__quote { top: -2rem; right: 0; }
  .couple__grid { gap: 2.6rem; }
  /* 三张信息卡窄屏转单列竖排 */
  .info__grid { grid-template-columns: 1fr; gap: 2.6rem; }
}

@media (max-width: 720px) {
  .story__row {
    grid-template-columns: 1fr;
  }
  .story__num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 0.35em 0.7em 0.3em;
    background: rgba(23, 21, 15, 0.78);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
  }
  .story__media { grid-column: 1; grid-row: 1; }
  .story__text { grid-column: 1; grid-row: 2; }
  .story__row--flip .story__media { grid-column: 1; grid-row: 1; }
  .story__row--flip .story__text { grid-column: 1; grid-row: 2; }

  /* 备案号：窄屏缩小字号与字距防止长串溢出，并按触屏加大点按区域 */
  .footer__beian {
    margin-top: 1.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    color: rgba(244, 239, 230, 0.5);
    text-decoration: none;
  }
}

@media (max-width: 640px) {
  .hero__bar { padding-top: 0; }
  .hero__brand--right { display: none; }
  .hero__center { padding-bottom: 4rem; }

  /* 圆形头像并排：窄屏隐藏 & 徽章、头像自适应缩小 */
  .couple { --avatar: clamp(118px, 36vw, 150px); }
  .couple__grid { gap: clamp(1rem, 5vw, 1.8rem); }
  .couple__amp { display: none; }

  /* 倒计时与 PC 一致：天/时/分/秒始终单行四列（保留默认 repeat(4,1fr)），
     窄屏只缩小内边距与字号防止溢出 */
  .countdown__cell { padding: 1.1rem 0.15rem; }
  .countdown__num { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .countdown__label { font-size: 0.58rem; letter-spacing: 0.12em; text-indent: 0.12em; }

  .agenda__row { grid-template-columns: 110px 1fr; gap: 1rem; }
  .agenda__time { font-size: 1.15rem; }

  /* 照片墙 2 列大图版式 */
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 30vw, 170px); }
  .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery__item:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .gallery__item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .gallery__item:nth-child(4) { grid-column: span 1; grid-row: span 1; }
  .gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
  .gallery__item:nth-child(6) { grid-column: span 2; grid-row: span 1; }
  .gallery__item:nth-child(7) { grid-column: span 1; grid-row: span 1; }
  .gallery__item:nth-child(8) { grid-column: span 1; grid-row: span 1; }

  .lightbox { padding: 1.2rem; }
  .lightbox__stage img { max-height: 72vh; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__close { top: 1.2rem; right: 1.2rem; }

  /* 地图导航面板：窄屏满宽、内距收紧 */
  .navsheet__panel { border-radius: 16px 16px 0 0; padding-top: 1.9rem; }
  .navsheet__item { padding: 0.9rem 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
  .intro--out { transition: none; }
}

/* ═══════════════════════════════
   右上角背景音乐开关
   ═══════════════════════════════ */
html:not(.js) .music-btn { display: none; }
.music-btn {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(244, 239, 230, 0.22);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(23, 21, 15, 0.55);
  transition: transform 0.3s var(--ease-out), background 0.3s ease, opacity 0.25s ease;
}
/* 灯箱打开时收起音符按钮，避免与右上角关闭键重叠 */
body:has(.lightbox.show) .music-btn {
  opacity: 0;
  pointer-events: none;
}
.music-btn:hover { transform: translateY(-2px); background: rgba(23, 21, 15, 0.85); }
.music-btn:active { transform: translateY(0) scale(0.96); }

/* 音符图标 */
.music-btn__note {
  display: block;
  width: 19px;
  height: 19px;
  fill: var(--gold-bright);
}

/* 等化声波柱（默认静止 = 未播放） */
.music-btn__eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 8px;
}
.music-btn__eq i {
  width: 2px;
  border-radius: 1px;
  background: rgba(244, 239, 230, 0.9);
  height: 100%;
  transform-origin: bottom;
}
.music-btn__eq i:nth-child(1) { height: 55%; }
.music-btn__eq i:nth-child(2) { height: 100%; }
.music-btn__eq i:nth-child(3) { height: 75%; }

/* ── 播放中动效：音符轻浮 + 声波柱律动 ── */
.music-btn.is-playing .music-btn__note { animation: musicNoteFloat 1.6s var(--ease-out) infinite; }
.music-btn.is-playing .music-btn__eq i { animation: musicEqBar 1s ease-in-out infinite; }
.music-btn.is-playing .music-btn__eq i:nth-child(2) { animation-duration: 1.15s; animation-delay: 0.18s; }
.music-btn.is-playing .music-btn__eq i:nth-child(3) { animation-duration: 0.85s; animation-delay: 0.36s; }

@keyframes musicNoteFloat {
  0%, 100% { transform: translateY(1px); }
  50%      { transform: translateY(-3px); }
}
@keyframes musicEqBar {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}