/* ============ 共用设计语言 · 婚礼请柬双站点 ============
   同一套结构与动效，仅通过 .skin-a / .skin-b 切换配色与字号
   ==================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: var(--fs-body);
  overflow-x: hidden;
}

/* ---------- 皮肤 A：平顶山 · 冷蓝银 ---------- */
.skin-a {
  --bg: #F4F7FB;
  --surface: #FFFFFF;
  --ink: #16283A;
  --ink-soft: #4C6178;
  --ink-faint: #8A9BAD;
  --accent: #2E6BA8;
  --accent-deep: #1B4A78;
  --accent-soft: #E7F0F9;
  --line: rgba(46, 107, 168, .16);
  --shadow: 0 2px 20px rgba(22, 40, 58, .06);
  --scale: 1;
}

/* ---------- 皮肤 B：云阳江口 · 暖米金（长辈版，字号更大） ---------- */
.skin-b {
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --ink: #332819;
  --ink-soft: #6E5C44;
  --ink-faint: #A2907A;
  --accent: #A8802F;
  --accent-deep: #80601F;
  --accent-soft: #F7EEDC;
  --line: rgba(168, 128, 47, .2);
  --shadow: 0 2px 20px rgba(51, 40, 25, .07);
  --scale: 1.14;
}

/* ---------- 字号阶梯（--scale 驱动，皮肤 B 整体放大） ---------- */
body {
  --fs-hero:   calc(38px * var(--scale));
  --fs-h2:     calc(21px * var(--scale));
  --fs-h3:     calc(17px * var(--scale));
  --fs-body:   calc(15px * var(--scale));
  --fs-small:  calc(13.5px * var(--scale));
  --fs-tiny:   calc(12.5px * var(--scale));
}

/* ---------- 版心 ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding: 0 26px; }

section { position: relative; }

.sec { padding: 54px 0 8px; }

.sec-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  text-align: center;
  color: var(--ink);
}

.sec-sub {
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-tiny);
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--ink-faint);
}

/* 分隔装饰 */
.rule {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 18px auto 26px; max-width: 150px;
}
.rule::before, .rule::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.rule i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .55; display: block;
}

/* ---------- 入场动效 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: var(--shadow);
}

/* ---------- 按钮 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border-radius: 12px;
  font-size: var(--fs-small);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: transform .15s ease, background .2s ease;
}
.btn:active { transform: scale(.975); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.btn-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { background: var(--accent-soft); }
  .btn-primary:hover { background: var(--accent-deep); }
}