/* ============================================================
   字体 —— 已裁剪好打包在 fonts/ 里，不依赖任何外部服务
   标题：Cormorant Garamond（拉丁）+ 思源宋体 Noto Serif SC（中文）
   正文：霞鹜文楷 LXGW WenKai
   标签：DM Mono
   ============================================================ */
@font-face{
  font-family:"Site Display"; src:url("fonts/latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Site Display"; src:url("fonts/latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Site Display CJK"; src:url("fonts/serif-600.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Site Body"; src:url("fonts/body-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Site Mono"; src:url("fonts/mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   一座装着你的小宇宙 —— 给乔子的十八岁
   夜 → 昼，一章一个色温
   ============================================================ */

:root{
  /* 白天 */
  --pearl:#FBFAFF; --pearl-2:#F2F5FD;
  --sky:#DCEAFA;   --sky-deep:#B3CFEE;
  --peri:#C9CCF2;  --peri-deep:#9DA2E2;
  --lilac:#DED8F5;
  --cream:#FFF7EA;
  --gold:#FFD9A0;  --gold-deep:#FFB86B;
  --ink:#3E3E5C;   --ink-soft:#76768F; --ink-faint:#A3A3BC;
  --line:rgba(120,124,180,.20);

  /* 夜里 */
  --n-1:#0C0F2A; --n-2:#141739; --n-3:#1E1B42;
  --n-ink:#F0EEFB; --n-soft:#A6A4CE; --n-faint:#6E6C99;
  --n-line:rgba(255,255,255,.20);

  --shadow-s:0 3px 14px rgba(110,116,165,.09);
  --shadow-m:0 14px 40px rgba(105,112,165,.14);
  --shadow-l:0 30px 70px rgba(95,102,160,.20);
  --photo-shadow:0 26px 56px rgba(88,96,152,.22), 0 3px 10px rgba(88,96,152,.10);

  --ease:cubic-bezier(.22,.9,.26,1);
  /* 正文：文楷。字体没加载出来时退回系统字体，版式不会散 */
  --sans:"Site Body","PingFang SC","Hiragino Sans GB","Microsoft YaHei",
         -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  /* 标题：拉丁走 Cormorant，中文走思源宋体 */
  --serif:"Site Display","Site Display CJK","Songti SC","STSong",Georgia,serif;
  --mono:"Site Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; color:var(--ink);
  font-synthesis:none;
  font-family:var(--sans); line-height:1.9; letter-spacing:.02em;
  overflow-x:hidden;
  background:
    radial-gradient(1100px 720px at 14% -8%,  #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(880px 620px  at 88% 10%,  var(--sky) 0%, rgba(220,234,250,0) 66%),
    radial-gradient(1000px 820px at 50% 106%, var(--lilac) 0%, rgba(222,216,245,0) 72%),
    linear-gradient(178deg, var(--pearl) 0%, var(--pearl-2) 44%, #EDF1FC 78%, #E9EAFA 100%);
  background-attachment:fixed;
}
body.locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
button{ font-family:inherit; color:inherit; }

/* 夜色底：进入后淡出，露出白天 */
#backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% 108%, rgba(255,196,124,.26) 0%, rgba(255,196,124,0) 70%),
    radial-gradient(900px 620px at 78% 8%,  rgba(126,124,206,.34) 0%, rgba(126,124,206,0) 66%),
    linear-gradient(172deg, var(--n-1) 0%, var(--n-2) 46%, var(--n-3) 100%);
  transition:opacity 1.6s var(--ease);
}
body.day #backdrop{ opacity:0; }

#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
        transition:opacity 1.6s var(--ease); }
body.day #stars{ opacity:.5; }

#app{ position:relative; z-index:2; opacity:0; transition:opacity 1.2s var(--ease); }
body.day #app{ opacity:1; }

/* ---------- 排版基元 ---------- */
.wrap{ width:100%; max-width:940px; margin:0 auto; padding-inline:22px; }
section{ position:relative; isolation:isolate; padding-block:clamp(86px,15vw,168px); }

/* 每一章自己的色温，上下淡出，章与章之间自然过渡 */
section::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, var(--tint,transparent) 18%, var(--tint,transparent) 82%, transparent 100%);
}
[data-tint="dawn"]  { --tint:rgba(255,255,255,.34); }
[data-tint="cream"] { --tint:rgba(255,248,236,.72); }
[data-tint="sky"]   { --tint:rgba(198,224,250,.46); }
[data-tint="lilac"] { --tint:rgba(214,206,246,.46); }
[data-tint="warm"]  { --tint:rgba(255,240,220,.66); }
[data-tint="dusk"]  { --tint:rgba(190,195,243,.50); }

.ch-line{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--ink-faint); margin:0;
}
.ch-head{ text-align:center; margin-bottom:clamp(46px,8vw,86px); }
.ch-cn{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(27px,6.6vw,42px); letter-spacing:.14em;
  margin:16px 0 0; color:var(--ink);
}
.ch-sub{
  margin:14px 0 0; font-size:13.5px; letter-spacing:.1em; color:var(--ink-soft);
}
.ch-rule{
  width:1px; height:clamp(30px,6vw,48px); margin:26px auto 0;
  background:linear-gradient(180deg,var(--line),transparent);
}

/* 描边按钮 —— 全站统一 */
.ghost{
  border:1px solid var(--n-line); background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--n-soft); padding:13px 26px; border-radius:2px;
  transition:color .45s var(--ease), border-color .45s var(--ease),
             background .45s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ghost:hover{ color:var(--n-ink); border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.ghost:active{ transform:scale(.97); }
.ghost-lit{ color:#FFE9C6; border-color:rgba(255,213,158,.55); }
.ghost-lit:hover{ color:#fff; border-color:rgba(255,213,158,.9); background:rgba(255,205,140,.12); }
.ghost-ink{ color:var(--ink-soft); border-color:var(--line); }
.ghost-ink:hover{ color:var(--ink); border-color:rgba(120,124,180,.45); background:rgba(255,255,255,.5); }

/* ---------- 滚动淡入 ---------- */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d,0ms); will-change:opacity,transform;
}
.reveal.in{ opacity:1; transform:none; }
.reveal.from-left{ transform:translate(-24px,26px); }
.reveal.from-right{ transform:translate(24px,26px); }
.reveal.from-left.in,.reveal.from-right.in{ transform:none; }

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

/* ============================================================
   序幕 · 加载
   ============================================================ */
.veil{
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(26px,6vw,46px) 22px calc(24px + env(safe-area-inset-bottom));
  transition:opacity 1.2s var(--ease), visibility 1.2s;
  overflow:hidden;
}
.veil.gone{ opacity:0; visibility:hidden; pointer-events:none; }

.pre-box{ text-align:center; max-width:520px; width:100%; }
.pre-en{
  font-family:var(--mono); font-size:11px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--n-faint); margin:0 0 20px; padding-left:.5em;
  animation:up 1.5s var(--ease) both;
}
.pre-cn{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,6.4vw,38px); letter-spacing:.2em; line-height:1.5;
  white-space:pre-line; text-wrap:balance;
  color:var(--n-ink); margin:0; padding-left:.2em;
  animation:up 1.5s .18s var(--ease) both;
}
.pre-load{ margin-top:clamp(48px,10vw,78px); animation:up 1.5s .36s var(--ease) both; }
.pre-status{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  color:var(--n-soft); margin:0 0 16px;
}
.pre-bar{
  height:2px; width:min(280px,72vw); margin:0 auto;
  background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden;
}
.pre-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--peri-deep),#CFE0F6,var(--gold));
  transition:width .18s linear;
}
.pre-pct{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.24em;
  color:var(--n-faint); margin:14px 0 0; font-variant-numeric:tabular-nums;
}
.pre-btns{
  margin-top:clamp(40px,8vw,64px); display:flex; gap:14px; justify-content:center;
  opacity:0; transform:translateY(12px); transition:.9s var(--ease);
}
.pre-btns.show{ opacity:1; transform:none; }
.pre-or{
  min-height:1.6em; margin:26px 0 0; font-size:13px; letter-spacing:.08em;
  color:var(--n-soft); opacity:0; transition:opacity .8s var(--ease);
}
.pre-or.show{ opacity:1; }
@keyframes up{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ============================================================
   序章 · 收集十八根蜡烛（夜里）
   ============================================================ */
#opening{ justify-content:flex-start; }
.op-head{ text-align:center; animation:up 1.5s var(--ease) both; }
#opening .ch-line{ color:var(--n-faint); }
.op-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,7vw,42px); letter-spacing:.14em;
  color:var(--n-ink); margin:18px 0 0;
}
.op-sub{
  margin:14px 0 0; color:var(--n-soft); font-size:13.5px; letter-spacing:.08em;
  white-space:pre-line; line-height:1.9;
}

.op-count{
  margin-top:clamp(26px,5vw,40px); display:flex; align-items:baseline; gap:7px;
  font-variant-numeric:tabular-nums; font-family:var(--mono);
  animation:up 1.5s .3s var(--ease) both;
}
.op-count b{
  font-size:clamp(28px,7.4vw,38px); font-weight:500; color:#FFD9A0;
  transition:transform .35s var(--ease);
}
.op-count b.pop{ transform:scale(1.3); }
.op-count span{ color:var(--n-faint); font-size:12.5px; letter-spacing:.2em; }

/* 提示语 */
.op-hint{
  margin:16px 0 0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--n-faint);
  animation:hintPulse 2.6s ease-in-out infinite;
  transition:opacity .6s var(--ease);
}
.op-hint.hide{ opacity:0; animation:none; }
@keyframes hintPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* 跟着手指走的那簇火苗 */
.torch{
  position:fixed; left:0; top:0; z-index:6; pointer-events:none;
  width:0; height:0;
  opacity:0; transition:opacity .25s var(--ease);
}
.torch.on{ opacity:1; }
.torch::before{           /* 外焰 */
  content:''; position:absolute; left:50%; top:50%;
  width:22px; height:22px; translate:-50% -50%; rotate:45deg;
  border-radius:0 50% 50% 50%;
  background:linear-gradient(135deg,#FFEFC8 0%,#FFC079 46%,#FF9B48 100%);
  box-shadow:0 0 34px 12px rgba(255,178,98,.55);
  animation:flicker 1.1s ease-in-out infinite alternate;
}
.torch::after{            /* 内焰 */
  content:''; position:absolute; left:50%; top:56%;
  width:9px; height:9px; translate:-50% -50%; rotate:45deg;
  border-radius:0 50% 50% 50%;
  background:linear-gradient(135deg,#FFFFFF,#FFF4D2);
}


.fly{
  position:fixed; width:14px; height:14px; border-radius:50%; z-index:6;
  background:radial-gradient(circle,#FFF7E6,var(--gold-deep));
  box-shadow:0 0 18px rgba(255,190,110,.95); pointer-events:none;
  transition:transform .72s cubic-bezier(.4,0,.2,1), opacity .72s ease;
}

/* 蛋糕 */
.cake{
  margin-top:auto; position:relative;
  display:flex; flex-direction:column; align-items:center;
  animation:up 1.6s .5s var(--ease) both;
}
.candles{ display:flex; gap:clamp(5px,1.9vw,10px); align-items:flex-end; padding:0 6px; }
#opening{ touch-action:none; }
.candle{
  width:clamp(7px,2.1vw,9px); position:relative;
  border:0; background:none; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.candle u{                 /* 烛芯：点亮之前的靶子 */
  position:absolute; left:50%; top:-5px; translate:-50% 0;
  width:1.5px; height:6px; border-radius:1px;
  background:rgba(90,84,120,.85);
  transition:opacity .3s var(--ease);
}
.candle.lit u{ opacity:0; }
.candle.just i{ animation:candlePop .5s var(--ease); }
@keyframes candlePop{ 0%{ scale:1 } 40%{ scale:1.16 .94 } 100%{ scale:1 } }
.candle i{
  display:block; height:var(--h,26px); border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--c1,#F3F1FC) 48%,var(--c2,#DDE2F5) 100%);
  box-shadow:inset -1.2px 0 0 rgba(120,128,175,.28), 0 1px 3px rgba(10,12,40,.30);
}
.candle b{
  position:absolute; left:50%; top:-15px;
  width:11px; height:11px; translate:-50% 0; rotate:45deg;
  border-radius:0 50% 50% 50%;
  background:linear-gradient(135deg,#FFF3CE,#FFAE5E);
  box-shadow:0 0 18px 3px rgba(255,186,104,.9);
  opacity:0; scale:.3;
  transition:opacity .4s var(--ease), scale .4s var(--ease);
}
.candle.lit b{ opacity:1; scale:1; animation:flicker 1.6s ease-in-out infinite alternate; }
@keyframes flicker{ from{ scale:1; opacity:.88 } to{ scale:1.14 .96; opacity:1 } }

.cake-body{
  width:min(330px,82vw); height:clamp(80px,21vw,104px);
  border-radius:12px 12px 22px 22px; margin-top:2px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FBFAFE 0%,#EFEEFA 38%,#E4E5F5 62%,#D6DAEF 100%);
  box-shadow:0 22px 50px rgba(8,10,36,.45), inset 0 1px 0 #fff;
}
.cake-body::before{
  content:''; position:absolute; left:0; right:0; top:0; height:34px;
  background:
    radial-gradient(circle 7px at 7px 17px, #FFFFFF 98%, transparent 100%) 0 0/14px 34px repeat-x,
    linear-gradient(180deg,#FFFFFF 0 18px, transparent 18px);
}
.cake-body::after{
  content:''; position:absolute; left:0; right:0; top:62%; height:7px;
  background:linear-gradient(180deg, rgba(201,204,242,.55), rgba(185,212,242,.25));
}
.cake::after{
  content:''; position:absolute; left:50%; bottom:-11px; translate:-50% 0;
  width:min(400px,94vw); height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(6,8,30,.42), rgba(6,8,30,0));
}
.cake-glow{
  position:absolute; bottom:-8%; left:50%; translate:-50% 0;
  width:min(820px,160vw); height:min(600px,66vh); border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,196,124,.34), rgba(255,206,150,.12) 46%, rgba(255,196,124,0) 76%);
  opacity:0; transition:opacity 1.6s ease; pointer-events:none;
}
.cake.done .cake-glow{ opacity:1; }
.cake.done .cake-body{ box-shadow:0 22px 60px rgba(8,10,36,.45), 0 0 70px rgba(255,196,130,.35), inset 0 1px 0 #fff; }

.op-foot{ margin-top:clamp(26px,5vw,38px); display:flex; flex-direction:column; align-items:center; gap:16px; min-height:96px; }
.op-done{
  font-size:clamp(15px,4.2vw,18px);
  letter-spacing:.14em; color:#FFE6C2; margin:0; text-align:center;
  opacity:0; transform:translateY(10px); transition:.9s var(--ease);
}
.op-done.show{ opacity:1; transform:none; }
.btn-enter{ opacity:0; pointer-events:none; transform:translateY(10px); transition:.9s var(--ease); }
.btn-enter.show{ opacity:1; pointer-events:auto; transform:none; }
.op-skip{
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--n-faint); padding:6px 10px;
}
.op-skip:hover{ color:var(--n-soft); }

/* ============================================================
   首屏
   ============================================================ */
#hero{
  min-height:92svh; display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(52px,17vw,120px); line-height:1.1; letter-spacing:.12em;
  margin:26px 0 0; padding-left:.12em;
  background:linear-gradient(152deg,#4E4E7B 0%,#7C86C6 46%,#9CBEE2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-date{ margin:30px 0 0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hd-range{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.28em; color:var(--ink-soft);
}
.hd-note{
  font-size:11.5px; letter-spacing:.14em; color:var(--peri-deep);
  border:1px solid var(--line); border-radius:2px; padding:8px 18px;
}
.hero-sub{ margin:26px 0 0; color:var(--ink-soft); font-size:14px; letter-spacing:.06em; }
.scroll-cue{
  margin-top:clamp(44px,9vw,72px); display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--mono); color:var(--ink-faint); font-size:10px; letter-spacing:.34em;
}
.scroll-cue i{
  width:1px; height:52px; display:block;
  background:linear-gradient(180deg,var(--peri),transparent);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.28; transform:scaleY(.55); transform-origin:top } 50%{ opacity:1; transform:scaleY(1) } }

/* ============================================================
   一、回忆
   ============================================================ */
#memories .wrap{ max-width:1020px; }
.memline{
  position:relative; display:grid;
  grid-template-columns:1fr 54px 1fr; align-items:start;
  row-gap:clamp(48px,9vw,96px);
}
.memline::before{
  content:''; position:absolute; top:6px; bottom:6px; left:50%; translate:-50% 0;
  width:1px; background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}
.mem{
  position:relative; cursor:pointer;
  grid-column:1; width:min(100%,330px); justify-self:end;
  -webkit-tap-highlight-color:transparent;
}
.mem[data-side="right"]{ grid-column:3; justify-self:start; }
.mem-dot{
  position:absolute; top:14px; width:7px; height:7px; border-radius:50%;
  background:var(--peri-deep); box-shadow:0 0 0 5px rgba(157,162,226,.14);
  transition:box-shadow .7s var(--ease); z-index:2;
}
.mem[data-side="left"]  .mem-dot{ right:-30px; }
.mem[data-side="right"] .mem-dot{ left:-30px; }
.mem.in .mem-dot{ box-shadow:0 0 0 9px rgba(157,162,226,.10); }

/* 多张照片：横向滑动，一次看一张 */
.shots{ position:relative; }
.shots.multi{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:-2px; padding-inline:2px;
}
.shots.multi::-webkit-scrollbar{ display:none; }
.shots.multi .frame{ flex:0 0 100%; scroll-snap-align:center; }
.shot-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.shot-dots i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(120,124,180,.26); transition:background .4s var(--ease), scale .4s var(--ease);
}
.shot-dots i.on{ background:var(--peri-deep); scale:1.25; }

/* 照片本身就是主角：不套白卡片，只有一层薄边和柔和投影 */
.mem .frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:8px; background:linear-gradient(150deg,var(--sky),var(--lilac));
  box-shadow:var(--photo-shadow);
  transition:transform .7s var(--ease), box-shadow .7s var(--ease);
}
.mem .frame{ cursor:pointer; }
.mem .frame:hover{ transform:translateY(-8px); box-shadow:0 34px 70px rgba(88,96,152,.26); }
.mem .frame img,
.mem .frame video{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:transform 1s var(--ease), opacity .7s ease;
}
.mem .frame img.ok,
.mem .frame video.ok{ opacity:1; }
.mem .frame video{ cursor:default; }
.mem .frame:hover img{ transform:scale(1.045); }

.ph-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:16px;
  color:#fff; text-align:center;
  background:linear-gradient(150deg,var(--sky-deep),var(--peri));
}
.ph-placeholder .em{ font-size:24px; opacity:.85; }
.ph-placeholder small{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; opacity:.85; }

.mem-body{ padding:20px 2px 0; }
.mem-date{
  margin:0 0 9px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.22em; color:var(--peri-deep);
}
.mem-body h3{
  margin:0; font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:.08em;
}
.mem-text{ margin:10px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.95; }

/* 闯关问答 —— 横跨整条时间轴 */
.quiz{
  grid-column:1 / -1; justify-self:center;
  width:min(100%,460px); text-align:center;
  padding:clamp(30px,6vw,44px) clamp(22px,5vw,36px);
  border-radius:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(247,249,255,.58));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-m);
  backdrop-filter:blur(12px);
}
.quiz-no{
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  color:var(--ink-faint); margin:0 0 18px;
}
.quiz-q{
  font-size:clamp(16px,4.4vw,20px);
  letter-spacing:.08em; margin:0 0 26px; color:var(--ink); line-height:1.8;
}
.quiz-form{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.quiz-in{
  width:100%; max-width:300px; text-align:center;
  font-family:var(--sans); font-size:15px; color:var(--ink); letter-spacing:.06em;
  padding:13px 16px; border-radius:3px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.quiz-in::placeholder{ color:var(--ink-faint); letter-spacing:.14em; font-size:13px; }
.quiz-in:focus{ outline:0; border-color:var(--peri-deep); box-shadow:0 0 0 4px rgba(157,162,226,.14); }
.quiz.wrong .quiz-in{ animation:shake .5s var(--ease); border-color:#E2A6A6; }
@keyframes shake{ 0%,100%{translate:0} 20%{translate:-8px} 45%{translate:7px} 70%{translate:-4px} }
.quiz-tell{
  background:none; border:0; cursor:pointer; padding:4px 8px;
  font-size:12px; letter-spacing:.1em; color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-color:rgba(163,163,188,.4);
}
.quiz-tell:hover{ color:var(--ink-soft); }
.quiz-ok{
  margin:0; font-size:15.5px; letter-spacing:.1em;
  color:var(--peri-deep); line-height:2;
}
.quiz.done .quiz-form,.quiz.done .quiz-tell{ display:none; }

/* 还没答对的部分，先蒙起来（注意：不能叫 locked，那是 body 的滚动锁） */
.gated{
  filter:blur(11px) saturate(.7); opacity:.34;
  pointer-events:none; user-select:none;
  transition:filter 1.1s var(--ease), opacity 1.1s var(--ease);
}

/* ============================================================
   二、表情包 · 戳一戳
   ============================================================ */
.sticker-wall{
  display:grid; gap:clamp(12px,2.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
}
.sticker{
  position:relative; border:0; padding:0; cursor:pointer;
  aspect-ratio:1; border-radius:6px; overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(236,242,253,.8));
  box-shadow:var(--shadow-s);
  display:grid; place-items:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.sticker:hover{ transform:translateY(-6px) rotate(-1.5deg); box-shadow:var(--shadow-m); }
/* 注意：这里不能用 display:none —— 没有盒子的图片不会触发 lazy load，永远不加载 */
.sticker img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;          /* 表情包靠文字，别裁 */
  opacity:0; transition:opacity .5s var(--ease);
}
.sticker.has-img img{ opacity:1; }
.sticker.has-img .st-ph{ display:none; }
.st-ph{ font-size:26px; opacity:.4; }
.sticker.boing{ animation:boing .62s var(--ease); }
@keyframes boing{ 0%{scale:1} 28%{scale:1.22 .84} 52%{scale:.9 1.12} 76%{scale:1.06 .96} 100%{scale:1} }
.st-foot{ margin-top:clamp(30px,6vw,48px); text-align:center; }

.st-fly{
  position:fixed; z-index:7; pointer-events:none;
  border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(100,108,165,.24);
}
.st-fly img{ width:100%; height:100%; object-fit:contain; }
.st-fly-em{ display:grid; place-items:center; font-size:30px; background:none; box-shadow:none; }

/* ============================================================
   三、我们的歌
   ============================================================ */
.song-card{
  display:flex; align-items:center; gap:clamp(24px,5vw,46px);
  padding:clamp(26px,5vw,44px);
  border-radius:4px;
  background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(240,244,254,.5));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-m); backdrop-filter:blur(12px);
}
.disc{
  flex:0 0 auto; position:relative;
  width:clamp(100px,23vw,140px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.22) 0 2px, rgba(255,255,255,0) 2px 5px),
    linear-gradient(145deg,#9DA2E2,#8FB2DC);
  box-shadow:0 16px 36px rgba(120,130,195,.32), inset 0 0 0 1px rgba(255,255,255,.4);
}
.disc.spin{ animation:spin 7s linear infinite; }
@keyframes spin{ to{ rotate:360deg } }
.disc-img{ width:100%; height:100%; object-fit:cover; }
.disc-note{ font-size:28px; color:#fff; opacity:.8; }
.disc-hole{
  position:absolute; width:20%; aspect-ratio:1; border-radius:50%;
  background:var(--pearl); box-shadow:inset 0 0 0 1px rgba(150,158,205,.3);
}
.song-body{ min-width:0; }
.song-name{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(20px,5vw,27px); letter-spacing:.08em;
}
.song-artist{
  margin:8px 0 0; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.32em; color:var(--ink-faint); text-transform:uppercase;
}
.song-line{
  margin:24px 0 0;
  font-size:clamp(15px,4vw,17.5px); line-height:2.1; color:#54547A;
}
.song-note{ margin:10px 0 0; font-size:13.5px; color:var(--ink-soft); }
.song-play{ margin-top:24px; }

/* ============================================================
   四、信
   ============================================================ */
#letter .wrap{ max-width:740px; }
.envelope{
  width:min(400px,86vw); margin:0 auto; cursor:pointer; position:relative;
  aspect-ratio:3/2; border-radius:4px; overflow:hidden;
  background:linear-gradient(160deg,#FFFDF8,#F3EFE4);
  box-shadow:var(--shadow-m); border:1px solid rgba(255,255,255,.9);
  display:grid; place-items:center;
  transition:transform .6s var(--ease), opacity .7s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.envelope::before{
  content:''; position:absolute; top:0; left:0; right:0; height:56%;
  background:linear-gradient(160deg,#FFFEFA,#EEE8D9);
  clip-path:polygon(0 0,100% 0,50% 100%);
  box-shadow:0 3px 10px rgba(160,150,120,.14);
  transition:transform .8s var(--ease); transform-origin:top;
}
.envelope:hover{ transform:translateY(-6px); }
.envelope.opened{ transform:scale(.92); opacity:0; pointer-events:none; }
.envelope.opened::before{ transform:rotateX(180deg); }
.envelope.tucked{ display:none; }
.seal{
  position:relative; z-index:2; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(145deg,#C9A7A0,#B08D86);
  color:#fff; display:grid; place-items:center; font-size:19px;
  box-shadow:0 8px 20px rgba(160,130,120,.35); margin-top:14%;
}
.env-hint{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:#B5A996;
}
.paper{
  display:none; border-radius:4px;
  padding:clamp(30px,7vw,58px);
  background:linear-gradient(180deg,rgba(255,254,250,.94),rgba(253,251,245,.94));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-l);
}
.paper.show{ display:block; animation:up 1.1s var(--ease) both; }
.paper h3{
  font-family:var(--serif); font-size:19px; margin:0 0 26px;
  letter-spacing:.12em; font-weight:600;
}
.paper p{
  margin:0 0 20px; font-size:16px; line-height:2.3; color:#54544F;
  opacity:0; transform:translateY(12px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.paper p.in{ opacity:1; transform:none; }
.paper .sign{ text-align:right; color:#82826F; font-size:14px; margin-top:38px; }
.paper .ps{
  font-size:12px; letter-spacing:.04em; color:#A9A493;
}

/* ============================================================
   五、彩蛋
   ============================================================ */
#surprise{ text-align:center; padding-bottom:clamp(100px,18vw,170px); }
.wish-cake{ width:min(290px,78vw); margin:0 auto 34px; position:relative; cursor:pointer;
            -webkit-tap-highlight-color:transparent; }
.wc-flame{
  width:22px; height:22px; margin:0 auto -4px; rotate:45deg;
  border-radius:0 50% 50% 50%;
  background:linear-gradient(135deg,#FFF4D4,#FFAE5E);
  box-shadow:0 0 34px 8px rgba(255,186,104,.6);
  animation:flicker 1.5s ease-in-out infinite alternate;
  transition:opacity .6s ease, translate .6s var(--ease), scale .6s var(--ease), box-shadow .6s ease;
}
.wc-stick{
  position:relative; z-index:1; width:9px; height:42px; margin:0 auto;
  border-radius:4px; background:linear-gradient(180deg,#FFFFFF,#E6EBFA);
  box-shadow:inset -1px 0 0 rgba(160,168,205,.4);
}
.wc-base{
  position:relative; overflow:hidden; height:88px; border-radius:10px 10px 20px 20px;
  background:linear-gradient(180deg,#FDFCFF 0%,#F2F1FC 38%,#E9EAF8 62%,#DEE2F5 100%);
  box-shadow:var(--shadow-m), inset 0 1px 0 #fff;
}
.wc-base::before{
  content:''; position:absolute; left:0; right:0; top:0; height:34px;
  background:
    radial-gradient(circle 7px at 7px 17px, #FFFFFF 98%, transparent 100%) 0 0/14px 34px repeat-x,
    linear-gradient(180deg,#FFFFFF 0 18px, transparent 18px);
}
.wc-base::after{
  content:''; position:absolute; left:0; right:0; top:64%; height:7px;
  background:linear-gradient(180deg, rgba(201,204,242,.5), rgba(185,212,242,.22));
}
.wish-cake::after{
  content:''; position:absolute; left:50%; bottom:-12px; translate:-50% 0;
  width:118%; height:24px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(140,148,200,.24), rgba(140,148,200,0));
}
.wish-cake.blown .wc-flame{
  animation:none; opacity:0; translate:0 -26px; scale:.4;
  box-shadow:0 0 0 0 rgba(255,190,110,0);
}
.smoke{
  position:absolute; left:50%; top:-6px; translate:-50% 0;
  width:8px; height:8px; border-radius:50%;
  background:rgba(190,196,225,.55); opacity:0; pointer-events:none;
}
.wish-cake.blown .smoke{ animation:smoke 2.4s ease-out forwards; }
@keyframes smoke{ 0%{opacity:.7; transform:translateY(0) scale(1)} 100%{opacity:0; transform:translateY(-72px) scale(3.4)} }

.sp-hint{ color:var(--ink-soft); font-size:14px; letter-spacing:.08em; margin:0 0 26px; transition:opacity .7s; }
.sp-hint.hide{ opacity:0; }
.sp-final{ display:none; margin-top:clamp(40px,8vw,70px); }
.sp-final.show{ display:block; animation:up 1.3s var(--ease) both; }
.sp-final h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(27px,7.2vw,46px); letter-spacing:.16em; margin:0 0 34px;
  background:linear-gradient(140deg,#5F5F92,#8FB0DE);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-final .line{
  font-size:clamp(15px,4.2vw,18px);
  line-height:2.5; color:#54547A; margin:0;
  opacity:0; transform:translateY(12px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.sp-final .line.in{ opacity:1; transform:none; }

.confetti{ position:fixed; top:-14px; z-index:7; pointer-events:none; border-radius:2px; opacity:.9; }

footer{
  text-align:center; padding:0 22px calc(52px + env(safe-area-inset-bottom));
  font-family:var(--mono); color:var(--ink-faint); font-size:10px; letter-spacing:.24em;
}

/* 月亮 */
.moon{
  position:fixed; top:calc(18px + env(safe-area-inset-top)); right:18px; z-index:4;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.6); backdrop-filter:blur(8px);
  font-size:16px; line-height:1;
  transition:transform .45s var(--ease), opacity .5s;
  -webkit-tap-highlight-color:transparent;
}
.moon:hover{ transform:rotate(-14deg) scale(1.07); }
.moon:active{ transform:scale(.9); }

/* ============================================================
   浮层
   ============================================================ */
#lightbox,#secret{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(24,26,52,.7); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s ease;
}
#lightbox{ z-index:8; }
#secret{ z-index:9; }
#lightbox.open,#secret.open{ display:flex; }
#lightbox.show,#secret.show{ opacity:1; }

#lightbox figure{
  margin:0; max-width:560px; width:100%;
  background:#fff; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-l);
  transform:scale(.94); transition:transform .5s var(--ease);
}
#lightbox.show figure{ transform:scale(1); }
.lb-img{ width:100%; max-height:64svh; object-fit:contain; background:#F3F5FC; }
#lightbox figcaption{ padding:20px 24px 24px; }
#lightbox figcaption h4{
  margin:0 0 8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; color:var(--ink-soft);
}
#lightbox figcaption p{ margin:0; font-size:14.5px; color:var(--ink); line-height:1.95; }
.lb-close{
  position:absolute; top:calc(18px + env(safe-area-inset-top)); right:18px;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:18px; line-height:1;
}

.secret-card{
  max-width:440px; text-align:center; border-radius:4px;
  background:linear-gradient(160deg,#FFFFFF,#F1F3FD);
  padding:clamp(34px,7vw,50px) clamp(26px,6vw,38px);
  box-shadow:var(--shadow-l);
  transform:scale(.93); transition:transform .5s var(--ease);
}
#secret.show .secret-card{ transform:scale(1); }
.secret-card .em{ font-size:30px; }
.secret-card p{
  font-size:16.5px; line-height:2.2;
  margin:20px 0 30px; color:#54547A;
}

/* ============================================================
   手机端
   ============================================================ */
@media (max-width:820px){
  .memline{ grid-template-columns:26px 1fr; row-gap:clamp(38px,8vw,58px); }
  .memline::before{ left:13px; translate:0 0; }
  .mem,.mem[data-side="right"]{ grid-column:2; width:auto; justify-self:stretch; }
  .mem[data-side="left"] .mem-dot,
  .mem[data-side="right"] .mem-dot{ left:-16px; right:auto; top:16px; }
  .quiz{ grid-column:1 / -1; }
  .reveal.from-left,.reveal.from-right{ transform:translateY(26px); }
}

@media (max-width:640px){
  .wrap{ padding-inline:20px; }
  .mem .frame{ aspect-ratio:1/1; }
  .mem-body{ padding:16px 2px 0; }
  .mem-body h3{ font-size:16.5px; }
  .sticker-wall{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .song-card{ flex-direction:column; text-align:center; gap:22px; }
  .ghost{ padding:12px 22px; font-size:11px; letter-spacing:.14em; }
  .pre-btns{ gap:11px; }
  #lightbox{ padding:16px; }
}

@media (max-width:380px){
  .candles{ gap:3px; }
  .candle{ width:5px; }
  .pre-en{ letter-spacing:.34em; }
}

/* ============================================================
   会动的背景
   ============================================================ */

/* 极光：四团巨大的柔光，各自以不同的节奏慢慢飘 */
#aurora{
  position:fixed; inset:-25%; z-index:0; pointer-events:none;
  transition:opacity 1.6s var(--ease);
}
body.night #aurora{ mix-blend-mode:screen; opacity:.9; }
body.day   #aurora{ mix-blend-mode:normal; opacity:.62; }
.au{
  position:absolute; border-radius:50%;
  will-change:transform; transform:translate3d(0,0,0);
}
.au1{
  width:70vw; height:70vw; left:-12%; top:2%;
  background:radial-gradient(closest-side, var(--au-1), transparent 72%);
  animation:au1 46s ease-in-out infinite alternate;
}
.au2{
  width:82vw; height:82vw; right:-18%; top:22%;
  background:radial-gradient(closest-side, var(--au-2), transparent 72%);
  animation:au2 58s ease-in-out infinite alternate;
}
.au3{
  width:64vw; height:64vw; left:14%; bottom:6%;
  background:radial-gradient(closest-side, var(--au-3), transparent 74%);
  animation:au3 52s ease-in-out infinite alternate;
}
.au4{
  width:52vw; height:52vw; right:8%; bottom:-8%;
  background:radial-gradient(closest-side, var(--au-4), transparent 74%);
  animation:au4 64s ease-in-out infinite alternate;
}
body.night{
  --au-1:rgba(120,116,214,.30); --au-2:rgba(84,124,196,.26);
  --au-3:rgba(255,178,110,.20); --au-4:rgba(150,120,210,.24);
}
body.day{
  --au-1:rgba(186,214,248,.55); --au-2:rgba(214,206,246,.52);
  --au-3:rgba(255,238,214,.50); --au-4:rgba(202,226,246,.46);
}
@keyframes au1{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(9vw,7vh,0) scale(1.18) } }
@keyframes au2{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-11vw,-6vh,0) scale(.94) } }
@keyframes au3{ from{ transform:translate3d(0,0,0) scale(.95) } to{ transform:translate3d(8vw,-9vh,0) scale(1.2) } }
@keyframes au4{ from{ transform:translate3d(0,0,0) scale(1.12) } to{ transform:translate3d(-7vw,-5vh,0) scale(.92) } }

/* 跟着手指 / 鼠标走的一团光 */
#glow{
  position:fixed; left:0; top:0; z-index:0; pointer-events:none;
  width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%;
  opacity:0; transition:opacity .9s var(--ease);
  will-change:transform;
}
body.night #glow{ background:radial-gradient(closest-side, rgba(255,214,158,.16), transparent 70%); }
body.day   #glow{ background:radial-gradient(closest-side, rgba(255,255,255,.5), transparent 68%); }
#glow.on{ opacity:1; }

/* 点一下空白处冒出来的小星 */
.twinkle{
  position:fixed; z-index:7; pointer-events:none;
  font-size:14px; line-height:1; user-select:none;
}

/* ============================================================
   章节导航
   ============================================================ */
#chapnav{
  position:fixed; right:20px; top:50%; translate:0 -50%; z-index:4;
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  opacity:0; transition:opacity 1s var(--ease);
}
body.day #chapnav{ opacity:1; }
.cn-item{
  display:flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cn-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
  opacity:0; translate:8px 0;
  transition:opacity .45s var(--ease), translate .45s var(--ease);
}
.cn-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(120,124,180,.32);
  transition:background .5s var(--ease), scale .5s var(--ease), box-shadow .5s var(--ease);
}
.cn-item:hover .cn-label{ opacity:1; translate:0 0; }
.cn-item[aria-current="true"] .cn-dot{
  background:var(--peri-deep); scale:1.5;
  box-shadow:0 0 0 5px rgba(157,162,226,.16);
}
.cn-item[aria-current="true"] .cn-label{ opacity:1; translate:0 0; color:var(--ink-soft); }

/* 照片跟着鼠标轻轻侧一下 */
.mem{ transform-style:preserve-3d; transition:transform .5s var(--ease); }
.mem.tilting{ transition:transform .12s linear; }

@media (max-width:820px){
  #chapnav{ right:12px; gap:13px; }
  .cn-label{ display:none; }
  .cn-dot{ width:5px; height:5px; }
}
@media (prefers-reduced-motion:reduce){
  .au{ animation:none; }
  #glow{ display:none; }
}

/* ============================================================
   背景音乐开关
   ============================================================ */
.mute{
  position:fixed; top:calc(18px + env(safe-area-inset-top)); left:18px; z-index:4;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px); color:var(--ink-soft);
  display:grid; place-items:center;
  opacity:0; transition:transform .45s var(--ease), opacity .8s var(--ease), color .4s;
  -webkit-tap-highlight-color:transparent;
}
body.day .mute{ opacity:1; }
.mute:hover{ transform:scale(1.06); color:var(--ink); }
.mute:active{ transform:scale(.9); }
.mute .mt-off{ display:none; }
.mute[aria-pressed="false"] .mt-on{ display:none; }
.mute[aria-pressed="false"] .mt-off{ display:block; }
.mute[aria-pressed="true"]{ color:var(--peri-deep); border-color:rgba(157,162,226,.42); }

/* ============================================================
   最后再蹦出来的那一个
   ============================================================ */
.finale{
  display:none; margin-top:clamp(56px,11vw,96px);
  opacity:0; transform:translateY(24px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.finale.show{ display:block; }
.finale.in{ opacity:1; transform:none; }
.fin-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px;
}
.fin-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(18px,4.8vw,23px); letter-spacing:.1em; margin:0 0 26px; color:var(--ink);
}
.fin-video{
  width:min(320px,82vw); margin:0 auto; display:block;
  aspect-ratio:9/16; object-fit:cover;
  border-radius:4px; background:linear-gradient(160deg,var(--peri),var(--sky-deep));
  box-shadow:var(--shadow-l);
}
.fin-note{ margin:22px 0 0; font-size:13px; color:var(--ink-soft); letter-spacing:.06em; }
.fin-link{ display:inline-block; text-decoration:none; }

/* ============================================================
   一起吃过的饭 · 翻牌
   ============================================================ */
[data-tint="peach"]{ --tint:rgba(255,236,222,.62); }

.meal-grid{
  display:grid; gap:clamp(12px,2.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.meal{
  border:0; background:none; padding:0; cursor:pointer;
  aspect-ratio:3/4; perspective:1100px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.meal-in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
}
.meal.flipped .meal-in{ transform:rotateY(180deg); }
.meal-face{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:var(--shadow-s);
  transition:box-shadow .5s var(--ease);
}
.meal:hover .meal-face{ box-shadow:var(--shadow-m); }

/* 正面：只有一句话 */
.meal-front{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:16px 15px;
  background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,240,229,.78));
  border:1px solid rgba(255,255,255,.9);
}
.meal-no{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint);
}
.meal-teaser{
  font-size:13.5px; line-height:1.85; color:var(--ink); margin:0;
  text-wrap:pretty;
}
.meal-tap{
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  color:var(--ink-faint); text-transform:uppercase;
}

/* 背面：照片 */
.meal-back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg,var(--sky-deep),var(--peri));
}
.meal-back img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease;
}
.meal-back img.ok{ opacity:1; }
.meal-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:34px 14px 14px; color:#fff; text-align:left;
  background:linear-gradient(180deg,rgba(30,32,60,0),rgba(30,32,60,.66));
}
.meal-name{
  margin:0; font-family:var(--serif); font-size:14.5px;
  font-weight:600; letter-spacing:.06em; line-height:1.55;
}
.meal-date{
  margin:5px 0 0; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.22em; opacity:.82;
}

/* 时间轴里没有照片的那几条 */
.mem.no-photo .mem-body{ padding-top:0; }
.mem.no-photo .mem-card{
  border-left:1px solid var(--line); padding-left:18px;
}
.mem.no-photo .mem-body h3{ font-size:17px; }

@media (max-width:640px){
  .meal-grid{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .meal-teaser{ font-size:12.5px; }
}