/* ═══════════════════════════════════════════════════════════════════
   婚禮邀請函 — 主樣式

   目前主頁只保留一行邀請卡文字，開場（海報→影片）樣式在 envelope.css。
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #f1e7d1;
  color: #6a5341;
  font-family: 'Noto Serif TC', serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; }

/* ── 主頁：頁首橫幅在最上方，內容由上往下排列可捲動 ──────────── */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 頁首橫幅：滿版寬度 */
.site-header {
  position: relative;
  width: 100%;
  line-height: 0;            /* 消除 img 底部的行內間隙 */
}

.site-header img {
  display: block;
  width: 100%;
  height: auto;
}

/* 底部漸層：由透明過渡到背景色，讓圖片下緣平順融入頁面，消除接縫 */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5%;               /* 漸層覆蓋圖片下緣的比例，可依需要調整 */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(241, 231, 209, 0) 0%, #f1e7d1 100%);
}

/* ── 時間軸：向上重疊頁首並淡入，讓兩張圖無縫銜接 ─────────────
   兩張圖共用同一米色亞麻底，故只需在接縫處做交叉淡化：
   1) 負的 margin-top 讓時間軸上緣蓋住頁首下緣（重疊區）
   2) 上下漸層遮罩：上緣淡入露出同色頁首、下緣淡出融入頁面背景
   兩者相加即消除「兩張圖拼接」的硬邊，上下皆無縫銜接。 */
.site-timeline {
  width: 100%;
  margin-top: -7%;           /* 與頁首重疊的比例，可依需要調整 */
  line-height: 0;            /* 消除 img 底部的行內間隙 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 14%, #000 90%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 14%, #000 90%, rgba(0, 0, 0, 0) 100%);
}

.site-timeline img {
  display: block;
  width: 100%;
  height: auto;
}

.site p {
  margin: 0;
  padding: 2rem;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: .08em;
  color: #4e3a29;
}