/* --serif 是标题用的衬线栈（宋体；安卓无宋体会回退到系统衬线）。
   --gold/--deep/--muted 是文字三层：金色做小标记、墨蓝做标题、灰蓝做正文，
   避免整页只有 --primary 一个亮蓝、分不出主次。 */
:root{--primary:#2b7fd4;--accent:#f7b733;--ink:#2f4a63;--paper:#f3f9ff;
  --serif:"Songti SC","STSong","SimSun",Georgia,serif;
  /* 手写体栈：iOS 翩翩体/手札体、Windows 华文行楷/方正舒体；安卓微信一个都没有，会回退。
     最后的 cursive 是兜底，让系统自己挑一个可用的手写/装饰体。 */
  --hand:"Hanzipen SC","Hannotate SC","STXingkai","FZShuTi","Kaiti SC","STKaiti","KaiTi","SimKai",cursive;
  /* 正文色跟着底图走：底图换成蓝色系后，原来的 #7b8ea1 在浅蓝上对比不够、发糊，
     所以 --muted 再深一档。--deep 是烫金不生效时的回退色。 */
  --gold:#a3834f;--deep:#33557d;--muted:#3f5f7d}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--paper)}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}
.deck{height:100vh;height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.page{min-height:100vh;min-height:100dvh;scroll-snap-align:start;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:env(safe-area-inset-top) 26px env(safe-area-inset-bottom);
  background-color:var(--paper);
  background-image:var(--paper-img,none),radial-gradient(circle at 15% 12%,#ffe9b0 0 90px,transparent 91px),
             radial-gradient(circle at 88% 18%,#cfe6ff 0 70px,transparent 71px);
  background-size:cover,auto,auto;background-position:center;background-repeat:no-repeat}
/* 全屏照片层不参与缩放入场（.bg/.scrim 由各自页面单独定位） */
.page>*:not(.bg):not(.scrim){opacity:0;transform:scale(.92);transition:opacity .55s ease,transform .55s ease}
.page.in>*:not(.bg):not(.scrim){opacity:1;transform:scale(1)}
.page.in>*:nth-child(2){transition-delay:.12s}
.page.in>*:nth-child(3){transition-delay:.24s}
.page.in>*:nth-child(4){transition-delay:.36s}
.kicker{font-family:Georgia,serif;letter-spacing:.42em;font-size:11px;color:var(--gold);
  margin-bottom:14px;font-weight:normal}
.title{font-family:var(--serif);font-size:46px;color:var(--deep);margin-bottom:22px;
  letter-spacing:.06em;text-shadow:none}
.names{font-family:var(--serif);font-size:26px;color:var(--ink);margin-bottom:20px;letter-spacing:.08em}
.names i{font-style:normal;margin:0 10px}
.subtitle{font-size:16px;line-height:1.8;color:#6b849c}
.hint{position:absolute;bottom:32px;font-size:13px;color:var(--accent);font-weight:bold}
.hosts{font-size:20px;color:var(--primary);margin-bottom:26px;font-weight:bold}
.body{font-size:18px;line-height:2.1;max-width:25em}
.salute{margin-top:24px;font-size:17px;color:var(--primary);font-weight:bold}
h2{font-size:28px;color:var(--primary);margin-bottom:28px}
.sections{list-style:none;width:100%;max-width:330px}
.sections li{background:#fff;border-radius:16px;padding:15px;margin-bottom:12px;font-size:16px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 4px 12px rgba(43,127,212,.14)}
.sections .label{color:var(--primary);font-weight:bold;font-size:14px}
.address{margin-top:18px;font-size:15px;color:#6b849c}
.nav-btn{display:inline-block;margin-top:20px;font-size:15px;font-weight:bold;letter-spacing:.2em;color:#fff;background:var(--primary);border-radius:999px;padding:11px 30px;text-decoration:none;box-shadow:0 4px 12px rgba(43,127,212,.32)}
.photos{display:flex;gap:12px;overflow-x:auto;width:100%;max-width:400px;scroll-snap-type:x mandatory}
.ph{flex:0 0 78%;scroll-snap-align:center}
.ph img{width:100%;border-radius:18px;display:block;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:50}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:10px}
.deadline{color:#6b849c;font-size:14px;margin-bottom:20px}
#rsvp-form{width:100%;max-width:330px;display:flex;flex-direction:column;gap:13px;text-align:left}
#rsvp-form label{font-size:14px;color:var(--primary);font-weight:bold;display:flex;flex-direction:column;gap:5px}
#rsvp-form input,#rsvp-form textarea{font:inherit;padding:12px 14px;border:2px solid #bcd9f5;border-radius:14px;background:#fff;color:var(--ink)}
#rsvp-form button{padding:14px;font-size:17px;font-weight:bold;letter-spacing:.3em;background:var(--primary);color:#fff;border:none;border-radius:999px;margin-top:6px}
.form-msg{text-align:center;font-size:14px;color:var(--primary);min-height:1.4em}
.footer-text{font-size:17px;color:var(--primary);font-weight:bold}
#entry-overlay{position:fixed;inset:0;z-index:40;background:rgba(18,42,71,.86);display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#entry-overlay.hide{opacity:0;pointer-events:none}
.enter-btn{background:var(--accent);color:#2f4a63;border-radius:999px;padding:16px 30px;font-size:17px;font-weight:bold;line-height:1.7}
.enter-btn small{font-weight:normal;font-size:11px;opacity:.9}

/* 音乐开关：放左上角——封面右上角已有国风印章，会撞。
   on 状态旋转表示播放中（微信里 fixed 元素不随滚动走，所有屏都可见可点）。
   34px 且贴角落，是为了让右缘停在 42px、避开章节页 46px 起的章名——
   去掉页码后章名上移到 y43，原来 38px/left14 的按钮会压住它的左上角。 */
.music-btn{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:8px;z-index:30;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(255,255,255,.85);color:var(--gold);font-size:15px;
  display:flex;align-items:center;justify-content:center}
.music-btn.on{animation:disc 4s linear infinite}
@keyframes disc{to{transform:rotate(360deg)}}

/* ---- 全屏照片层（封面 / 照片书共用） ---- */
.bg{position:absolute;inset:0;background-image:var(--photo);background-size:cover;background-position:var(--focus,center)}
.scrim{position:absolute;inset:0}

/* ---- 封面：一组照片排成小拼贴 + 顶部标题 + 底部信息卡 ----
   照片走 cover.gallery，各自完整不裁；相框的轻微旋转写在 img 上——
   .page>* 的入场动画会覆盖直接子元素的 transform，写外层容器上会被吃掉。
   纸底由 .page 的背景图提供；浅底上原来那套白字要换成深色。
   国风题字/印章/莲花纹从客户那张拼图里拆出来，用 multiply 把裁切带进来的米色底融掉。 */
.cover-page{padding:0;justify-content:flex-start}
.cover-page .bg,.cover-page .scrim{display:none}
.cover-head{position:relative;z-index:1;margin-top:calc(env(safe-area-inset-top) + 3.5vh);padding:0 26px}
.cover-page .kicker{color:var(--gold);text-shadow:none}
.cover-page .title{color:var(--deep);text-shadow:none;font-size:40px;margin-bottom:10px}
.cover-page .names{color:var(--ink);text-shadow:none;margin-bottom:0}
.cover-page .hint{color:var(--gold)}

/* 印章落在右上角，像题款盖在画上。
   gf-mark.png 的米色底已在生成时抠成透明（见 assets/photos 生成脚本），
   不再依赖 mix-blend-mode:multiply —— 旧 WebView 不支持 multiply 时印章会带一块米色方块。 */
.cg-seal{position:absolute;top:calc(env(safe-area-inset-top) + 4vh);right:20px;width:38px;
  height:auto;opacity:.9;z-index:1}

/* 照片：第一张做拱形主图占住视觉中心，其余三张收成一排小图陪衬。
   全部走 object-fit:cover 让格子整齐——参考模板里儿童照普遍是「主图 + 小图」而不是等大平铺。 */
.cover-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  width:min(86vw,344px);margin:1.5vh auto 0}
.cg-item{display:block;width:100%;object-fit:cover;border:6px solid #ffffff;
  box-shadow:0 8px 22px rgba(92,72,40,.20),0 1px 3px rgba(0,0,0,.07)}
/* 主图与三张小图的总高按黄金分割：主图 61.8%、三小图 38.2%（两段高度比 = 1.618:1） */
.cg-item:first-child{grid-column:1/-1;height:31.7vh;
  border-radius:170px 170px 5px 5px;object-position:center 45%}
.cg-item:nth-child(n+2){height:19.6vh;border-radius:5px;object-position:center 38%}
.cg-item:only-child{grid-column:1/-1;height:44vh;border-radius:150px 150px 5px 5px}
.cover-card{position:absolute;left:22px;right:22px;bottom:calc(env(safe-area-inset-bottom) + 38px);z-index:1;
  background:rgba(255,255,255,.94);border-radius:24px;padding:16px 20px;box-shadow:0 14px 34px rgba(18,42,71,.24)}
.cover-page .subtitle{color:#4d6c86;white-space:pre-line;font-size:16px;line-height:1.8;font-family:var(--hand)}
.cover-body{margin-top:8px;font-size:14px;line-height:1.75;color:var(--ink);white-space:pre-line}
.cover-salute{margin-top:8px;font-size:13px;font-weight:bold;color:var(--primary);letter-spacing:.12em}
.cover-page .hint{bottom:calc(env(safe-area-inset-bottom) + 20px);transition-delay:.55s}

/* ---- 成长篇章：一屏一章，章内 1~3 张照片 ----
   左边缘一条年轮轴，每章一个点，翻到第几章就点亮几个——让「十年」是被看得见地累积出来的。
   照片保持各自比例不做裁切（横图竖图混排也不会切掉人脸）。 */
.chapter-page{padding:calc(env(safe-area-inset-top) + 4.5vh) 26px calc(env(safe-area-inset-bottom) + 30px) 46px;
  justify-content:flex-start;align-items:stretch;text-align:left}

/* 年轮轴 */
.ch-rail{position:absolute;left:18px;top:calc(env(safe-area-inset-top) + 6.5vh);height:58vh;width:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;z-index:1}
.ch-rail::before{content:"";position:absolute;top:5px;bottom:5px;width:1.5px;
  background:linear-gradient(180deg,rgba(43,127,212,.42),rgba(43,127,212,.10))}
.ch-rail i{position:relative;width:9px;height:9px;border-radius:50%;background:#ffffff;
  border:1.5px solid rgba(43,127,212,.38);transition:transform .45s ease,background .45s ease}
.ch-rail i.on{background:var(--primary);border-color:var(--primary);transform:scale(1.22)}

/* 章头 */
.ch-title{font-family:var(--serif);font-size:37px;line-height:1.25;color:var(--deep);
  letter-spacing:.1em;margin:5px 0 10px;text-shadow:none}
.ch-text{font-size:17px;line-height:1.8;color:var(--muted);font-family:var(--hand)}
/* 补句：比主句小一档、再淡一点，跟主句拉开层次，不至于两行字一样重 */
.ch-note{margin-top:6px;font-size:15px;line-height:1.75;color:var(--muted);opacity:.82;font-family:var(--hand)}

/* 章内照片：撑满章头以下的全部高度（否则空一大片），但**不等宽不等高**——
   等宽等高的竖排像表格，所以要错落：宽度、对齐、高矮、角度都错开，像照片摊在纸上。
   倾斜写在 img 上、不写 figure，配文保持水平好读。 */
.ch-photos{display:flex;flex-direction:column;gap:10px;width:100%;
  flex:1 1 auto;min-height:0;margin-top:2.2vh}
.chapter-page.last .ch-photos{margin-bottom:12px}
.ch-photo{margin:0;display:flex;flex-direction:column;min-height:0}
/* 尺寸走黄金分割：宽度按 100% / 61.8% / 61.8% 递降，高度权重按 φ / 1 / 1。
   第 1 张独占 61.8% 的高度，是画面的重心；后两张等分余下的 38.2%。 */
.ch-photo:nth-child(3n+1){width:100%;align-self:flex-start;flex:1.618 1 0}
.ch-photo:nth-child(3n+2){width:61.8%;align-self:flex-end;flex:1 1 0}
.ch-photo:nth-child(3n+3){width:61.8%;align-self:center;flex:1 1 0}
.ch-photo img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;
  border:6px solid #ffffff;border-radius:5px;
  box-shadow:0 10px 24px rgba(92,72,40,.22),0 2px 5px rgba(0,0,0,.07);
  transform:rotate(-1.1deg)}
.ch-photo:nth-child(3n+2) img{transform:rotate(1.2deg)}
.ch-photo:nth-child(3n+3) img{transform:rotate(-.75deg)}
/* 末章只有一张照片：不铺满左右（留在正常边距内），整体偏高（贴章头），
   高度收到 46vh 让格子比原图（0.667）扁，cover 才会真的裁掉顶部。 */
.ch-photo:only-child{width:100%;align-self:center;flex:0 0 auto;min-height:0}
.ch-photo:only-child img{flex:0 0 auto;height:55.2vh;object-position:center 100%;transform:rotate(-.8deg)}

/* 左下角的枝叶装饰：第 2、3 张照片按黄金比靠右/居中，左侧会空出一条，用图形元素补。
   透明度写在 stroke 上而不是元素上——.page.in>*{opacity:1} 会覆盖直接子元素自身的 opacity。 */
.ch-decor{position:absolute;left:50px;bottom:5vh;width:44px;height:136px;z-index:0;
  stroke:rgba(163,131,79,.6);stroke-width:1.4;fill:none}
.chapter-page.last .ch-decor{bottom:27vh}

/* 末章兼作收尾页：金色细线开场 + 手写体文案 + 描边按钮。
   原来是实心亮蓝胶囊 + 黑体字，"网页按钮"感，和整套请柬的烫金/手写语言不搭。 */
.album-closing{display:none}
.chapter-page.last .album-closing{display:block;width:100%;margin-top:2.4vh;text-align:center}
.album-closing::before{content:"";display:block;width:52px;height:1.5px;
  background:var(--gold);margin:0 auto 15px;opacity:.85}
.closing-text{font-size:16px;color:var(--muted);font-family:var(--hand);letter-spacing:.18em}
.closing-address{margin-top:9px;font-size:13px;color:var(--muted);opacity:.88;
  letter-spacing:.04em;font-family:var(--hand)}
.album-closing .nav-btn{margin-top:16px;font-size:14px;letter-spacing:.3em;color:var(--deep);
  background:transparent;border:1.5px solid var(--gold);border-radius:999px;padding:12px 34px;
  text-decoration:none;box-shadow:none}

/* 末章照片不是出血件，但宽度是整行（100%），左下角的装饰会压到照片上，末章隐藏 */
.chapter-page.last .ch-decor{display:none}

/* 照片入场：从下方漂上来 + 淡入，每张错开。
   曲线用前后都慢的（前段不抢跑、后段回稳），所以「看起来」也是慢的——
   原来用 ease-out 时 700ms 就走完 97%，1 秒的设定体感只像 0.6 秒。 */
.ch-photo,.cg-item{opacity:0;transform:translateY(34px)}
.chapter-page.in .ch-photo,.cover-page.in .cg-item{
  opacity:1;transform:none;
  transition:opacity 1.25s ease,transform 1.35s cubic-bezier(.36,.07,.28,1)}
.chapter-page.in .ch-photo:nth-child(2),.cover-page.in .cg-item:nth-child(2){transition-delay:.35s}
.chapter-page.in .ch-photo:nth-child(3),.cover-page.in .cg-item:nth-child(3){transition-delay:.7s}
.cover-page.in .cg-item:nth-child(4){transition-delay:1.05s}

@media (prefers-reduced-motion: reduce){
  .deck{scroll-behavior:auto}
  .page>*:not(.bg):not(.scrim){transition:none}
  .cover-page .bg{animation:none;transform:none}
  .ch-rail i{transition:none}
  .music-btn.on{animation:none}
  .ch-photo,.cg-item{opacity:1;transform:none;transition:none}
}

/* ---- 打印／导出 PDF ----
   H5 是滚动吸附的多屏，打印时会挤成一长条、且入场动画让内容停在 opacity:0。
   这里把滚动布局拆掉、每屏固定一页，并强制内容可见。浏览器里 Ctrl+P → 另存为 PDF 即得 6 页。
   注意：导出时要在打印对话框里勾选「背景图形」，否则烫金的渐变背景会被丢掉、只剩回退色。 */
@media print{
  @page{size:390px 844px;margin:0}
  html,body{height:auto;overflow:visible;background:#f8f7f5}
  .deck{height:auto;overflow:visible;scroll-snap-type:none}
  .page{height:844px;min-height:0;break-after:page;page-break-after:always}
  .page:last-child{break-after:auto;page-break-after:auto}
  .page>*:not(.bg):not(.scrim){opacity:1 !important;transform:none !important}
  .hint,#entry-overlay,#music-btn{display:none}
}

/* ---- 烫金标题 ----
   金属渐变 + background-clip:text，纯 CSS 无外链。放在文件最后，靠源码顺序压过上面的标题色。
   先给实心金做回退：不支持 background-clip 的浏览器若直接吃到 color:transparent，整行字会消失。
   渐变用偏深的金（#9a7433 起）而不是亮金——底图是极浅的米白，亮金会糊成一片看不清。 */
.page .title,.page .ch-title{color:#8a6a2f}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page .title,.page .ch-title{
    background-image:linear-gradient(158deg,#96702c 0%,#d9b775 18%,#a67c2e 38%,
      #eddaa4 55%,#9a7530 72%,#d5b272 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    filter:drop-shadow(0 1px 1px rgba(120,90,40,.30));
  }
}