/* ==========================================================================
   zyjlrz.love —— 全站样式
   配色与结构对齐参考站(connectied.id/hansmonicawedding)。

   两处关键结构照抄参考站:
   1) 相册在第一屏内部(它的 seg01):照片条铺底,标题块 absolute 居中浮在上面,
      pointer-events:none 让手指直接拖到下面的照片。
   2) 开场是居中的圆角卡片(它的 greetingModal:420px 宽 / 20px 圆角 / 图头),
      不是全屏遮罩;背后 backdrop-filter 模糊。

   横向 padding 也跟它一致 —— 15px。之前用了 24–48px,竖屏正文被挤得又窄又小。
   ========================================================================== */

/* ---- 自托管字体(Google Fonts latin 子集,共 ~160KB) ------------------- */
@font-face { font-family:"Script";  src:url(../assets/fonts/script.woff2) format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Display"; src:url(../assets/fonts/display-300.woff2) format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Display"; src:url(../assets/fonts/display-500.woff2) format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Display"; src:url(../assets/fonts/display-italic.woff2) format("woff2");
             font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Body";    src:url(../assets/fonts/body.woff2) format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Body";    src:url(../assets/fonts/body-italic.woff2) format("woff2");
             font-weight:400; font-style:italic; font-display:swap; }

:root{
  --wine:        #630c12;
  --wine-deep:   #4a070c;
  --champagne:   #c39e83;
  --gold-light:  #e2c9a1;
  --gold-deep:   #935d16;
  --blush:       #c9978b;
  --blush-pale:  #e5d0ca;
  --cream:       #fffcf1;
  --white:       #ffffff;
  --ink:         #4d4d4d;

  /* 中文一律走系统字体,不下载任何 CJK 字体文件 */
  --f-script:  "Script", cursive;
  --f-display: "Display", Georgia, serif;
  --f-body:    "Body", Georgia, serif;
  --f-zh:      "Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;

  --pad: clamp(.95rem, 4vw, 2.5rem);    /* 390px 竖屏 ≈ 15px,与参考站一致 */
  --maxw: 48rem;
  --sec-pad: clamp(3.5rem, 9vh, 6rem);
}

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

/* 类选择器里的 display 会盖掉 [hidden] 的 UA 样式(.music 是 grid、
   .seats__box 是 inline-flex),导致 JS 设了 hidden 也还是显示出来。
   这条兜底必须留着。 */
[hidden]{ display:none !important; }

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

body{
  margin:0;
  background:var(--wine-deep);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(1.05rem, 1rem + .6vw, 1.25rem);
  line-height:1.8;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100dvh; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- 中英双文 ---------------------------------------------------------
   英文在上、中文在下;中文 0.85 倍字号、颜色略淡、字距略开。            */
.zh{
  display:block;
  font-family:var(--f-zh);
  font-size:.85em;
  letter-spacing:.05em;
  color:var(--blush-pale);
  opacity:.88;
  margin-top:.4em;
  line-height:1.9;
}

/* ---- 一屏一景 ---------------------------------------------------------
   dvh 而非 vh:iOS 地址栏收放不会切内容。
   min-height 而非 height:内容超高时自己长高,不被裁。                   */
.couple, .countdown, .venue, .seats, .thanks{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:var(--sec-pad) 0;
  text-align:center;
}
.couple > *, .countdown > *, .venue > *, .seats > *, .thanks > *{ width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---- 通用件 ----------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.4em; text-indent:.4em;
  font-size:clamp(.9rem, .8rem + .6vw, 1.1rem);
  color:var(--champagne);
  margin:0 0 1.1rem;
}
.eyebrow .zh{ letter-spacing:.3em; text-indent:.3em; font-size:.9em; margin-top:.5em; }

.section-title{
  font-family:var(--f-display);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.28em; text-indent:.28em;
  font-size:clamp(1.65rem, 1.2rem + 2.6vw, 2.6rem);
  line-height:1.35;
  color:var(--gold-light);
  margin:0 0 2rem;
}
.section-title .zh{ letter-spacing:.24em; text-indent:.24em; color:var(--champagne); }

.lede{
  font-family:var(--f-display);
  font-size:clamp(1.1rem, 1rem + .8vw, 1.45rem);
  line-height:1.9; margin:0 0 1.75rem;
}

.rule{
  width:clamp(4rem,20vw,7rem); height:1px; margin:1.5rem auto;
  background:linear-gradient(90deg, transparent, var(--champagne), transparent);
}
.rule--sm{ width:3.5rem; margin:1.25rem auto; }

.divider{ width:min(240px,62%); margin:2.25rem auto 0; opacity:.65;
          filter:sepia(1) saturate(.7) hue-rotate(-8deg); }

/* 名字:英文花体大字 + 中文小字紧随 */
.names{ margin:0; font-weight:400; }
.names__en{ display:block; font-family:var(--f-script); color:var(--gold-light); line-height:1.25; }
.names__zh{
  display:block; font-family:var(--f-zh); color:var(--champagne);
  letter-spacing:.3em; text-indent:.3em;      /* text-indent 抵消末字右侧多出的字距 */
  margin-top:.35em;
}
.names--cover  .names__en{ font-size:clamp(2.3rem, 1.4rem + 4.6vw, 3.2rem); }
.names--cover  .names__zh{ font-size:clamp(1rem, .9rem + 1.1vw, 1.3rem); }
.names--hero   .names__en{ font-size:clamp(4rem, 2.2rem + 14vw, 7rem); }
.names--hero   .names__zh{ font-size:clamp(1.35rem, 1rem + 2.4vw, 1.9rem); }
.names--thanks .names__en{ font-size:clamp(3.2rem, 2rem + 9.5vw, 4.8rem); }
.names--thanks .names__zh{ font-size:clamp(1.1rem, .9rem + 1.5vw, 1.4rem); }

/* ---- 按钮 ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 2.2rem; min-height:48px;
  border-radius:4px; border:1px solid var(--gold-deep);
  font-family:var(--f-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.9rem, .85rem + .4vw, 1.02rem);
  text-decoration:none; cursor:pointer;
  transition:background .35s, color .35s, border-color .35s;
}
.btn .zh{ letter-spacing:.1em; font-size:.9em; margin-top:.2em; opacity:.92; }
.btn--gold{ background:var(--gold-light); border-color:var(--gold-light); color:var(--wine); }
.btn--gold:hover,.btn--gold:focus-visible{ background:var(--white); border-color:var(--white); }
.btn--gold .zh{ color:var(--wine); }
.btn--outline{ background:transparent; color:var(--gold-light); }
.btn--outline:hover,.btn--outline:focus-visible{ background:var(--gold-light); color:var(--wine); }
.btn--outline:hover .zh,.btn--outline:focus-visible .zh{ color:var(--wine); }
.btn:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; }

/* ---- [0] 开场卡片 ------------------------------------------------------
   参考站 greetingModal:居中圆角卡片(不是全屏),背后整页模糊。       */
.cover{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:var(--pad);
  overflow-y:auto;
  background:rgba(30,4,7,.62);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:opacity .8s ease, visibility .8s;
}
/* 不支持 backdrop-filter 时(旧安卓 WebView)退回不透明底,避免文字糊在背景上 */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .cover{ background:rgba(30,4,7,.95); }
}
.cover.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

.cover__card{
  width:100%; max-width:420px; margin:auto;
  border-radius:20px; overflow:hidden;
  box-shadow:0 0 24px rgba(0,0,0,.8);
  background:rgba(74,7,12,.94);
  text-align:center;
}
.cover__photo{
  height:clamp(135px, 21dvh, 245px);
  background:url(../assets/images/bg-cover.webp) center/cover no-repeat;
}
.cover__body{ padding:clamp(1.25rem,5vw,2rem) clamp(1.15rem,5vw,1.75rem) clamp(1.5rem,5vw,2.25rem); }
.cover__body .eyebrow{ font-size:clamp(.72rem,.68rem+.3vw,.85rem); letter-spacing:.3em; text-indent:.3em; margin-bottom:.6rem; }
.cover__body .lede{ font-size:clamp(.95rem,.9rem+.4vw,1.1rem); line-height:1.65; margin-bottom:1.25rem; }
.cover__body .rule{ margin:1rem auto; }
.cover__dear{ margin:0 0 .4rem; font-family:var(--f-display); font-style:italic; color:var(--blush-pale); }
.cover__dear-label{ display:block; font-size:1rem; }
.cover__dear-label .zh{ display:inline; font-size:1em; margin:0 0 0 .4em; opacity:.75; }
.cover__guest{
  display:block; margin-top:.25rem;
  font-family:var(--f-display); font-style:normal; font-weight:500;
  font-size:clamp(1.35rem, 1.1rem + 1.8vw, 1.85rem);
  color:var(--gold-light); letter-spacing:.04em; line-height:1.35;
  overflow-wrap:anywhere;                  /* 超长姓名不撑破卡片 */
}

/* ---- [1] 首屏 = 标题 + 底部相册 ----------------------------------------
   相册条铺在下方,标题绝对居中浮在上面(pointer-events:none),
   手指直接拖照片、点一张开灯箱 —— 与参考站 seg01 一致。
   刻意不用 background-attachment:fixed,那是滚动卡顿的元凶。            */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--wine-deep);
  overflow:hidden;
}
.hero__strip{
  display:flex; gap:2px;
  width:100%;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:#000;
}
.hero__strip::-webkit-scrollbar{ display:none; }
.strip__item{
  flex:0 0 auto; scroll-snap-align:center;
  border:0; padding:0; margin:0; background:none; cursor:pointer;
}
/* 照片按高度铺满、宽度随原比例 —— 参考站手机端就是 height:80vh */
.strip__item img{
  height:78dvh; width:auto; max-width:none;
  object-fit:cover; display:block;
}
.strip__item:focus-visible{ outline:2px solid var(--gold-light); outline-offset:-4px; }

.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(74,7,12,.62) 0%, rgba(74,7,12,.34) 42%, rgba(74,7,12,.82) 100%);
}
.hero__inner{
  position:absolute; inset:0; margin:auto;
  height:fit-content; width:100%;
  padding-inline:var(--pad);
  z-index:2; text-align:center;
  pointer-events:none;                     /* 触摸穿透到下面的照片条 */
  /* 照片内容不可控(亮色花卉、浅色婚纱都可能),投影保底可读 */
  text-shadow:0 2px 12px rgba(30,4,7,.75), 0 1px 3px rgba(30,4,7,.6);
}
.hero__date{
  font-family:var(--f-display); font-weight:300;
  letter-spacing:.42em; text-indent:.42em;
  font-size:clamp(1.2rem, 1rem + 1.5vw, 1.7rem);
  color:var(--champagne); margin:1.75rem 0 0;
}
.scroll-hint{
  position:absolute; left:50%; z-index:3;
  bottom:calc(1.25rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  color:var(--gold-light); opacity:.9;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} }

/* ---- 区块底色 ---------------------------------------------------------- */
.couple{ background:var(--wine); }
.countdown{
  background:linear-gradient(rgba(74,7,12,.9), rgba(74,7,12,.9)),
             url(../assets/images/bg-venue.webp) center/cover no-repeat;
}
.venue{ background:var(--wine); }
.seats{
  background:linear-gradient(rgba(74,7,12,.9), rgba(74,7,12,.94)),
             url(../assets/images/bg-seats.webp) center/cover no-repeat;
}
.thanks{
  background:linear-gradient(rgba(74,7,12,.88), rgba(74,7,12,.94)),
             url(../assets/images/bg-thanks.webp) center/cover no-repeat;
}

/* ---- [2] 新人 ----------------------------------------------------------
   始终上下排列。左右分栏在竖屏里两边各占一半宽,名字被挤成两行。       */
.blessing{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.15rem, 1.05rem + .8vw, 1.4rem);
  line-height:2; margin:0 0 2.5rem; color:var(--blush-pale);
}
.blessing .zh{ font-style:normal; }

.couple__grid{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.person{ width:100%; }
.person__name{ margin:0 0 .8rem; font-weight:400; }
.person__en{
  display:block; font-family:var(--f-script);
  font-size:clamp(3.4rem, 2.2rem + 9vw, 4.6rem);
  color:var(--gold-light); line-height:1.2;
}
.person__zh{
  display:block; font-family:var(--f-zh);
  font-size:clamp(1.5rem, 1.2rem + 1.8vw, 1.9rem);
  color:var(--champagne); letter-spacing:.28em; text-indent:.28em;
}
.person__parents{
  margin:0; line-height:1.75; color:var(--blush-pale);
  font-size:clamp(1rem, .95rem + .5vw, 1.15rem);
}
.amp{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(2.6rem, 1.8rem + 4.5vw, 3.4rem);
  color:var(--champagne); line-height:1;
}

/* ---- [3] 婚礼日期 ------------------------------------------------------- */
.countdown__date{
  font-family:var(--f-display); letter-spacing:.14em;
  font-size:clamp(1.25rem, 1.05rem + 1.3vw, 1.6rem);
  color:var(--blush-pale); margin:0 0 2.5rem;
}
.timer{ display:flex; flex-wrap:nowrap; justify-content:center; gap:clamp(.4rem,2.5vw,1.4rem); }
.timer__cell{
  flex:1 1 0; min-width:0; max-width:7.5rem;
  padding:clamp(.9rem,3vw,1.4rem) .25rem;
  border:1px solid rgba(226,201,161,.32);
  border-radius:2px;
}
.timer__num{
  display:block;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(3rem, 2rem + 6vw, 3.8rem);
  line-height:1; color:var(--gold-light);
  font-variant-numeric:tabular-nums;       /* 等宽数字:每秒跳动不抖 */
}
.timer__lbl{
  display:block; margin-top:.55rem;
  font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(.78rem, .72rem + .35vw, .9rem);
  color:var(--champagne);
}
.timer__lbl i{ display:block; font-family:var(--f-zh); font-style:normal;
               font-size:1.15em; letter-spacing:.06em; opacity:.9; margin-top:.25em; }
.timer.is-over{ font-family:var(--f-display); font-size:1.5rem; color:var(--gold-light); }

/* ---- [4] 地点 ---------------------------------------------------------- */
.card{
  max-width:32rem; margin-inline:auto;
  border:1px solid rgba(226,201,161,.3);
  background:rgba(74,7,12,.45);
  overflow:hidden;
}
/* 场地图是线稿插画不是照片,按原比例完整显示,不要 cover 裁切 */
.card__photo{ width:100%; height:auto; }
.card__body{ padding:clamp(1.5rem,5vw,2.5rem) clamp(1.15rem,4.5vw,2.5rem); }
.card__time{
  font-family:var(--f-display);
  font-size:clamp(1.6rem, 1.3rem + 1.8vw, 2.1rem);
  letter-spacing:.08em; color:var(--gold-light); margin:0;
}
.card__note{
  margin:.5rem 0 0; color:var(--champagne); opacity:.92;
  font-size:clamp(.95rem, .88rem + .45vw, 1.05rem); letter-spacing:.04em;
}
.card__note .zh{ font-size:1em; margin-top:.2em; }
.card__hall{
  margin:0 0 .3rem; font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.22em; text-indent:.22em;
  font-size:clamp(.88rem, .8rem + .4vw, 1rem); color:var(--champagne);
}
.card__venue{
  margin:0 0 .7rem; font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.6rem, 1.3rem + 1.8vw, 2.1rem);
  color:var(--cream); letter-spacing:.03em; line-height:1.3;
}
.card__addr{
  margin:0 0 1.75rem; line-height:1.75; color:var(--blush-pale);
  font-size:clamp(1rem, .95rem + .5vw, 1.15rem);
}
.card__actions{ display:flex; flex-direction:column; gap:.75rem; align-items:stretch; }

/* ---- [6] 席位卡 -------------------------------------------------------- */
.seats__card{
  max-width:30rem; margin-inline:auto;
  padding:clamp(2.25rem,8vw,3rem) clamp(1.15rem,5vw,2.5rem);
  border:1px solid rgba(226,201,161,.4);
  background:rgba(74,7,12,.5);
}
.seats__guest{
  margin:0 0 1.5rem;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.7rem, 1.3rem + 2.4vw, 2.2rem);
  color:var(--cream); letter-spacing:.03em; line-height:1.4;
  overflow-wrap:anywhere;
}
.seats__box{
  display:inline-flex; flex-direction:column; align-items:center;
  padding:1.1rem 2.4rem; margin-bottom:1.1rem;
  border:1px solid var(--gold-deep);
}
.seats__num{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(4rem, 2.6rem + 9vw, 5.4rem); line-height:1;
  color:var(--gold-light); font-variant-numeric:tabular-nums;
}
.seats__unit{
  margin-top:.5rem;
  font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.18em; text-indent:.18em;
  font-size:clamp(.85rem, .78rem + .4vw, .98rem); color:var(--champagne);
}
.seats__unit i{ display:block; font-family:var(--f-zh); font-style:normal;
                letter-spacing:.1em; text-indent:.1em; font-size:1.1em; opacity:.9; margin-top:.25em; }
.seats__table{
  margin:0 0 1.25rem;
  font-family:var(--f-display); letter-spacing:.16em;
  font-size:clamp(1.25rem, 1.05rem + 1.2vw, 1.5rem); color:var(--gold-light);
}
.seats__table i{ font-family:var(--f-zh); font-style:normal; letter-spacing:.06em; opacity:.9; }
.seats__lead{
  margin:0; font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem, 1rem + .7vw, 1.3rem);
  color:var(--blush-pale);
}
.seats__lead .zh{ font-style:normal; }

/* ---- [7] 尾页 ---------------------------------------------------------- */
.closing{
  font-family:var(--f-display); font-style:italic; line-height:2;
  font-size:clamp(1.15rem, 1.05rem + .8vw, 1.4rem);
  margin:0 0 .5rem; color:var(--blush-pale);
}
.closing .zh{ font-style:normal; }
.thanks .names{ margin-top:1.75rem; }

/* ---- 悬浮音乐按钮 ------------------------------------------------------ */
.music{
  position:fixed; z-index:50;
  right:calc(1rem + env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--gold-deep);
  background:rgba(74,7,12,.88); color:var(--gold-light);
  cursor:pointer;
}
.music__off{ display:none; }
.music.is-paused .music__on{ display:none; }
.music.is-paused .music__off{ display:block; }
.music:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; }

/* ---- 灯箱 -------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  background:rgba(10,2,4,.95);
  padding:env(safe-area-inset-top) 1rem env(safe-area-inset-bottom);
}
.lightbox__img{ max-width:100%; max-height:86dvh; object-fit:contain; }
.lightbox__close,.lightbox__nav{
  position:absolute; z-index:1;
  background:none; border:0; color:var(--gold-light);
  cursor:pointer; line-height:1;
  min-width:48px; min-height:48px;
}
.lightbox__close{ top:calc(.5rem + env(safe-area-inset-top)); right:.5rem; font-size:2.4rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:3rem; padding:0 .5rem; }
.lightbox__nav--prev{ left:.25rem; }
.lightbox__nav--next{ right:.25rem; }
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }

/* ---- 滚动进场动效(IntersectionObserver 加 .is-in) --------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---- 横屏手机:一屏一景会挤,放宽高度限制 ------------------------------ */
@media (orientation:landscape) and (max-height:560px){
  .couple, .countdown, .venue, .seats, .thanks{ min-height:auto; padding:3.5rem 0; }
  .strip__item img{ height:70dvh; }
  .cover__photo{ height:130px; }
}

/* ---- 无障碍 / 降级 ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}