:root {
  --red: #651b23;
  --red-deep: #40121b;
  --red-warm: #79242c;
  --red-ink: #54131c;
  --bamboo-ink: #260e17;
  --gold: #ccb58a;
  --gold-light: #dfcba8;
  --gold-deep: #ab9065;
  --gold-muted: #b09a79;
  --gold-quiet: #9c8566;
  --cream: #dfd2bd;
  --gold-line: rgba(204, 181, 138, .26);
  --gold-faint: rgba(204, 181, 138, .012);
  --gold-press: rgba(204, 181, 138, .055);
  --paper-grain: rgba(223, 203, 168, .007);
  --ink-shade: rgba(35, 5, 12, .16);
  --desktop-background: #251017;
  --control-background: rgba(84, 19, 28, .88);
  --serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --calligraphy: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", "STSong", serif;
}

/* 绛红纸面：纤维纹理、淡窗格暗纹、局部光影与渐变底色。 */
* { box-sizing: border-box; }
/* proximity 保留整屏吸附，并让长第三屏和放大文字自然滚动。 */
html { background: var(--desktop-background); scroll-snap-type: y proximity; }
body { margin: 0; background: var(--red); overflow-x: hidden; color: var(--cream); font-family: var(--serif); text-align: center; -webkit-text-size-adjust: 100%; }
@media (min-width: 481px) { body { background: var(--desktop-background); } }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.invitation { max-width: 480px; margin-inline: auto; background: var(--red); }
.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  padding: 48px 36px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, var(--paper-grain) 3px 4px),
    repeating-linear-gradient(87deg, transparent 0 7px, var(--paper-grain) 7px 8px),
    repeating-linear-gradient(45deg, transparent 0 35px, var(--gold-faint) 35px 35.4px, transparent 35.4px 70px),
    repeating-linear-gradient(-45deg, transparent 0 35px, var(--gold-faint) 35px 35.4px, transparent 35.4px 70px),
    radial-gradient(ellipse at 50% 32%, var(--red-warm), transparent 65%),
    linear-gradient(160deg, var(--red), var(--red-deep));
}
/* 边线淡出，四角回纹收边，装饰均不接收点击。 */
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 24px 18px;
  pointer-events: none;
  background:
    linear-gradient(transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent) left / 1px 100% no-repeat,
    linear-gradient(transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent) right / 1px 100% no-repeat;
}
.page-corners { position: absolute; inset: 15px; z-index: -1; pointer-events: none; }
.bamboo-background { position: absolute; z-index: -1; left: 5px; bottom: 45px; width: 145px; height: 440px; color: var(--bamboo-ink); opacity: .12; pointer-events: none; }
.bamboo-right { left: auto; right: 6px; bottom: 65px; transform: scaleX(-1); opacity: .09; }
.corner { position: absolute; width: 48px; height: 48px; color: var(--gold); opacity: .65; }
.top-left { top: 0; left: 0; }
.top-right { top: 0; right: 0; transform: scaleX(-1); }
.bottom-left { bottom: 0; left: 0; transform: scaleY(-1); }
.bottom-right { bottom: 0; right: 0; transform: scale(-1); }
.ornament { display: block; width: 160px; height: 20px; margin-inline: auto; color: var(--gold); opacity: .75; }
.lunar-date { color: var(--gold-muted); font-size: 13px; line-height: 1.9; letter-spacing: 1px; }
.seal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--gold-deep); outline: 1px solid var(--gold-line); outline-offset: -4px; background: var(--red-ink); color: var(--gold); font-family: var(--calligraphy); font-weight: 400; }

/* 首页：竖题、金色书法题字与极淡纹章形成视觉中心。 */
.cover { display: flex; flex-direction: column; align-items: center; padding-top: 43px; padding-bottom: 34px; padding-top: max(43px, calc(16px + env(safe-area-inset-top, 0px))); padding-bottom: max(34px, calc(16px + env(safe-area-inset-bottom, 0px))); }
.cover-ornament { width: 238px; height: 32px; flex-shrink: 0; }
.cover-main { width: 100%; margin-block: auto; padding-block: 20px 25px; }
.cover-emblem { position: relative; display: grid; place-items: center; isolation: isolate; min-height: 275px; }
.medallion { position: absolute; z-index: -1; width: 290px; height: 290px; color: var(--gold); opacity: .065; }
.vertical-inscription { position: absolute; top: 12px; left: 12px; writing-mode: vertical-rl; font-size: 12px; letter-spacing: 5px; color: var(--gold-muted); }
.vertical-inscription::before { content: ""; display: block; width: 1px; height: 24px; margin: 0 6px 12px; background: var(--gold-line); }
.longevity { font-family: var(--calligraphy); font-size: clamp(208px, 29vh, 276px); font-size: clamp(208px, 29svh, 276px); line-height: 1.08; font-weight: 400; color: var(--gold); -webkit-text-stroke: .2px var(--gold-light); text-shadow: 0 2px 2px var(--ink-shade); transform: rotate(-3deg); }
/* 不支持文字背景裁切时，回退到哑金题字。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .longevity {
    background-image: repeating-linear-gradient(12deg, transparent 0 2px, var(--paper-grain) 2px 3px), linear-gradient(125deg, var(--gold) 8%, var(--gold-light) 43%, var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 2px var(--ink-shade));
  }
}
.emblem-cloud { position: absolute; top: 42%; width: 47px; height: 32px; color: var(--gold); opacity: .7; pointer-events: none; }
.cloud-left { left: -5px; }
.cloud-right { right: -5px; transform: scaleX(-1); }
.cover-dedication { position: absolute; bottom: 3px; right: 0; display: flex; align-items: center; gap: 8px; }
.cover-seal { width: 32px; height: 34px; font-size: 23px; line-height: 1; }
.cover-blessing { display: flex; flex-direction: row-reverse; gap: 4px; color: var(--gold-quiet); }
.cover-blessing span { writing-mode: vertical-rl; font-size: 9px; line-height: 1.4; letter-spacing: 2.5px; }
.cover h1 { margin-top: 27px; color: var(--gold-light); font-size: 30px; font-weight: 400; letter-spacing: 9px; text-indent: 9px; }
.cover-honoree { margin-top: 21px; color: var(--cream); font-size: 15px; line-height: 1.9; letter-spacing: 1.4px; }
.short-rule { display: block; width: 26px; height: 1px; margin: 23px auto; background: var(--gold-line); }
.cover-date { color: var(--gold-light); font-size: 18px; line-height: 1.8; letter-spacing: 1.4px; margin-bottom: 6px; }
.cover .lunar-date { color: var(--gold-quiet); font-size: 12px; letter-spacing: .8px; }
.cover-bottom { width: 100%; flex-shrink: 0; }
.countdown { width: 190px; margin-inline: auto; padding-top: 18px; border-top: 1px solid var(--gold-line); }
.countdown > p:first-child { color: var(--gold-muted); font-size: 11px; letter-spacing: 2px; }
.countdown-values { display: flex; justify-content: center; gap: 21px; margin-top: 8px; color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.countdown-values small { color: var(--gold-muted); font-size: 11px; }
.countdown-values b { font-weight: 400; font-variant-numeric: tabular-nums; }
.countdown-values > span { white-space: nowrap; }
.countdown.is-complete { min-height: 60px; display: grid; align-items: center; }
.countdown.is-complete > p:first-child { color: var(--gold-light); font-size: 13px; line-height: 1.8; letter-spacing: 1px; }
.scroll-hint { margin-top: 32px; color: var(--gold-muted); font-size: 10px; letter-spacing: 1.5px; }
.up-arrow { display: block; width: 6px; height: 6px; margin: 0 auto 12px; border-top: .75px solid var(--gold-muted); border-left: .75px solid var(--gold-muted); opacity: .7; transform: rotate(45deg); }
.up-arrow { animation: scroll-cue 2.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%, 55%, 100% { transform: translateY(0) rotate(45deg); } 75% { transform: translateY(-5px) rotate(45deg); } }

/* 邀请页：4:5 肖像双框、回纹角花和独立寿印。 */
.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: max(48px, calc(20px + env(safe-area-inset-top, 0px))); padding-bottom: max(48px, calc(20px + env(safe-area-inset-bottom, 0px))); }
.section-heading { width: 100%; }
.section-heading h2 { color: var(--gold-light); font-size: 27px; line-height: 1.6; font-weight: 400; letter-spacing: 7px; text-indent: 7px; }
.eyebrow { color: var(--gold-muted); font-size: 9px; letter-spacing: 5.5px; text-indent: 5.5px; margin-bottom: 12px; }
.portrait-frame { position: relative; width: min(57.6%, 189px); aspect-ratio: 4 / 5; flex-shrink: 0; padding: 8px; margin: 32px auto 24px; border: 1px solid var(--gold-line); outline: 1px solid var(--gold-line); outline-offset: 5px; }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 较旧 Safari 不支持 aspect-ratio 时，仍固定肖像外框，防止图片撑高。 */
@supports not (aspect-ratio: 4 / 5) {
  .portrait-frame::before { content: ""; display: block; padding-top: calc(125% + 4.5px); }
  .portrait-frame img { position: absolute; top: 9px; left: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
}
.portrait-corner { position: absolute; width: 26px; height: 26px; color: var(--gold); pointer-events: none; }
.portrait-corner.top-left { top: -7px; left: -7px; }
.portrait-corner.top-right { top: -7px; right: -7px; }
.portrait-corner.bottom-left { bottom: -7px; left: -7px; }
.portrait-corner.bottom-right { bottom: -7px; right: -7px; }
.portrait-seal { width: 28px; height: 30px; font-size: 21px; margin-bottom: 24px; color: var(--gold-muted); }
/* 手机正文约占屏宽 80%，桌面按请帖宽度限制；保留手动短行。 */
.invitation-copy { width: min(100%, 384px); max-width: 80vw; font-size: 16px; line-height: 2.1; letter-spacing: .6px; }
.invitation-copy p:first-child { color: var(--gold-light); }
.invitation-copy p + p { margin-top: 22px; }
.invitation-emphasis { color: var(--gold-light); font-weight: 400; }
.welcome-ornament { margin-top: 28px; flex-shrink: 0; }

/* 详情页：日期题字、传统小标题和细金线分区。 */
.details { padding-top: 54px; padding-bottom: 40px; padding-top: max(54px, calc(20px + env(safe-area-inset-top, 0px))); padding-bottom: max(40px, calc(20px + env(safe-area-inset-bottom, 0px))); }
.details .section-heading h2 { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 24px; letter-spacing: 4px; text-indent: 4px; }
.details .section-heading h2::before, .details .section-heading h2::after { content: ""; width: 24px; height: 1px; background: var(--gold-line); opacity: .65; }
.event-time { margin-top: 24px; }
.date-display { display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--gold); font-size: 54px; line-height: 1.2; font-weight: 400; }
.date-display i { color: var(--gold-deep); font-size: 24px; font-style: normal; }
.event-date { color: var(--gold-light); margin-top: 14px; font-size: 17px; line-height: 1.8; letter-spacing: 1px; }
.event-time .lunar-date { margin-top: 3px; }
.event-hour { margin-top: 12px; font-size: 16px; letter-spacing: 1px; }
.detail-block { margin-top: 34px; }
.detail-label { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 14px; color: var(--gold); font-size: 13px; letter-spacing: 4px; text-indent: 4px; }
.detail-label::before, .detail-label::after { content: ""; width: 3px; height: 3px; border: 1px solid var(--gold-deep); transform: rotate(45deg); }
.detail-block h3 { color: var(--gold-light); font-size: 24px; line-height: 1.6; font-weight: 400; letter-spacing: 1px; }
#venue-title { font-size: 26.5px; }
address { font-style: normal; font-size: 15px; line-height: 1.9; letter-spacing: .5px; margin-top: 12px; }
.venue-address span { display: block; white-space: nowrap; }
.button-row { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
.outline-button { position: relative; min-height: 46px; min-width: 0; padding: 10px 22px; border: 1px solid var(--gold-deep); border-radius: 0; background: transparent; color: var(--gold-light); font-size: 14px; line-height: 1.5; letter-spacing: 2.5px; appearance: none; -webkit-appearance: none; transition: background-color .18s ease, border-color .18s ease; }
.outline-button::before, .outline-button::after { content: ""; position: absolute; width: 4px; height: 4px; border: 1px solid var(--gold); pointer-events: none; }
.outline-button::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.outline-button::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.outline-button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.outline-button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) { .outline-button:hover { background: var(--gold-faint); border-color: var(--gold); } }
.outline-button:active { background: var(--gold-press); }
.quiet-note { color: var(--gold-muted); font-size: 11px; line-height: 1.9; letter-spacing: .5px; margin-top: 16px; }
.hotel { padding-top: 28px; border-top: 1px solid var(--gold-line); }
.hotel h3 { font-size: 23.5px; }
.hotel-button { width: 160px; margin-top: 20px; }
.local-trip { position: relative; isolation: isolate; margin-top: 35px; padding: 22px 0 23px; }
.landscape { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 112px; color: var(--gold); opacity: .08; pointer-events: none; }
.local-trip h3 { color: var(--gold-muted); font-size: 13px; font-weight: 400; letter-spacing: 3px; }
.attraction-grid { display: grid; grid-template-columns: 5.5em 1.5em 5.5em; justify-content: center; align-items: center; margin-top: 13px; color: var(--gold-muted); font-size: 14px; line-height: 2.1; letter-spacing: 0; }
/* 各地名单独居中，三字地名对齐五字地名的中间三字。 */
.attraction-grid > span { text-align: center; white-space: nowrap; }
.attraction-divider { position: relative; color: transparent; text-align: center; }
.attraction-divider::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 12px; background: var(--gold-muted); transform: translate(-50%, -50%); }

/* 落款留出独立空间，末端祥云与首页顶部呼应。 */
.closing { margin-top: 56px; padding-top: 9px; }
.closing > p { margin-top: 27px; color: var(--gold-light); font-size: 25px; line-height: 1.95; letter-spacing: 4px; text-indent: 4px; }
.signature-group { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 42px; }
.family-signature { font-size: 15px; line-height: 2; letter-spacing: 3px; }
.family-signature span { font-size: 13px; letter-spacing: 6px; padding-left: 3px; }
.signature-seal { width: 25px; height: 43px; font-size: 14px; line-height: 1.2; }
.closing-ornament { width: 238px; height: 32px; margin-top: 38px; transform: rotate(180deg); }

/* 小屏收紧装饰和留白；保留自然流，避免裁字和拉伸。 */
@media (max-height: 740px) {
  .cover { padding-top: 34px; padding-bottom: 27px; padding-top: max(34px, calc(16px + env(safe-area-inset-top, 0px))); padding-bottom: max(27px, calc(16px + env(safe-area-inset-bottom, 0px))); }
  .cover-main { padding-block: 8px 18px; }
  .cover-emblem { min-height: 220px; }
  .medallion { width: 238px; height: 238px; }
  .longevity { font-size: 210px; }
  .vertical-inscription { top: 8px; left: 20px; }
  .cover-dedication { bottom: -2px; right: 0; gap: 6px; }
  .emblem-cloud { width: 40px; height: 28px; }
  .cover h1 { margin-top: 15px; font-size: 28px; }
  .cover-honoree { margin-top: 13px; }
  .short-rule { margin-block: 15px; }
  .countdown { padding-top: 15px; }
  .scroll-hint { margin-top: 24px; }
  .welcome { padding-block: 35px; padding-top: max(35px, calc(16px + env(safe-area-inset-top, 0px))); padding-bottom: max(35px, calc(16px + env(safe-area-inset-bottom, 0px))); }
  .eyebrow { margin-bottom: 7px; }
  .portrait-frame { width: min(48.6%, 149.4px); margin-block: 22px 18px; }
  .portrait-seal { margin-bottom: 16px; width: 24px; height: 26px; font-size: 18px; }
  .invitation-copy { font-size: 15px; line-height: 2; }
  .invitation-copy p + p { margin-top: 15px; }
  .welcome-ornament { margin-top: 20px; }
}
@media (max-width: 360px) {
  .page { padding-inline: 30px; }
  .cover-honoree { font-size: 15px; letter-spacing: 1px; }
  .cover-date { font-size: 14px; letter-spacing: 1px; }
  .vertical-inscription { left: 4px; }
  .invitation-copy { font-size: 14px; letter-spacing: .3px; }
  .button-row { gap: 12px; }
  .outline-button { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .outline-button { transition: none; } }

/* Toast 浮层不改变正文布局，避开底部安全区域。 */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(calc(100vw - 48px), 380px);
  padding: 12px 20px;
  border: 1px solid var(--gold-line);
  background: var(--control-background);
  color: var(--gold-light);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .5px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 仅 JS 成功建立观察器后才隐藏；关闭 JS 或旧浏览器仍能读完整请帖。 */
.reveal-ready { transition: opacity .8s ease, transform .8s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-pending { opacity: 0; transform: translateY(14px); }
.clipboard-fallback { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .up-arrow { animation: none; }
  .reveal-ready, .toast { transition: none; }
  .reveal-pending { opacity: 1; transform: none; }
}