/* ============================================================
   電子婚紗 · 樣式表
   想微調顏色 / 字體，改最上面「配色」這一段就好
   ============================================================ */

:root{
  /* ---------- 配色 ---------- */
  --紙:        #F6F1E9;   /* 頁面米白 */
  --紙深:      #ECE4D8;   /* 書邊、陰影用的深一階 */
  --底:        #E3DACD;   /* 整個螢幕的背景 */
  --底深:      #CFC3B2;
  --墨:        #3B352E;   /* 主要文字 */
  --淡墨:      #8C8175;   /* 小字、說明 */
  --金:        #B08D57;   /* 點綴線條 */

  /* ---------- 字體 ---------- */
  --標題字: "Noto Serif TC", "Songti TC", "宋體", "PMingLiU", Georgia, serif;
  --內文字: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* ---------- 翻頁動畫的單一真相（2026-08-21 重做） ----------
     整套翻頁陰影只由這兩個變數驅動：書頁旋轉、書縫掃光都讀同一組值，
     所以不可能再發生「改了其中一個、另一個沒跟上」的失準。
     book.js 也是讀 --flip（不再自己寫死 FLIP_MS）。 */
  --flip: 1.05s;
  --flip-ease: cubic-bezier(.61,.04,.21,1);

  /* ---------- 由 JS 計算，勿手動改 ---------- */
  --pw: 420px;
  --ph: 560px;
}

/* 手機（短邊<700px，直橫都算）：翻頁短一點才跟手。
   只要改這裡，旋轉 / 掃光 / JS 的翻頁鎖會全部一起跟著變。 */
body.thin{
  --flip: .62s;
  --flip-ease: cubic-bezier(.38,.66,.32,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%;
  background:
    radial-gradient(120% 90% at 50% 0%, #EFE8DC 0%, var(--底) 55%, var(--底深) 100%);
  color:var(--墨);
  font-family:var(--內文字);
  overflow:hidden;
  overscroll-behavior:none;
}

/* ============================ 舞台 ============================ */
#stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  perspective: 2100px;
  perspective-origin: 50% 50%;
}

#book{
  position:relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4,.05,.2,1);
  /* 用 box-shadow 取代 filter:drop-shadow —— drop-shadow 每一幀都要把底下所有
     3D 葉子攤平成一張點陣圖再套模糊，葉子一多就是翻頁卡頓的主因之一；
     box-shadow 只描書本自己的矩形範圍，效果幾乎一樣但便宜很多。 */
  box-shadow: 0 26px 46px rgba(80,64,44,.28);
}
#book.closed  { transform: translateX(calc(var(--pw) / -2)); }
#book.finished{ transform: translateX(calc(var(--pw) / 2)); }

/* 書縫 */
#spine{
  position:absolute; top:0; bottom:0; left:50%; width:34px;
  margin-left:-17px; z-index:900; pointer-events:none;
  /* ⚠️ 光靠 z-index 沒用。#book 是 transform-style:preserve-3d 的容器，
     裡面的子元素是照 **3D 幾何深度** 排序，z-index 只在完全共平面時才有效。
     書頁靜止時跟 #spine 共平面（z-index 有效、書縫在上面），但只要開始
     旋轉就變成 3D 排序，繞左緣往鏡頭方向轉的書頁立刻跑到 #spine 前面
     —— 這就是「一按下翻頁，中間的書縫陰影直接消失」的原因，而且是在
     旋轉的第一幀就發生，所以看起來像瞬間關掉。
     解法：讓 #spine 本身也往鏡頭方向推一點點。書頁是繞左緣轉的，靠近
     書縫那 17px 內書頁的 z 幾乎是 0，所以只要 14px 就足夠一直蓋在上面。 */
  transform: translateZ(14px);
  background:linear-gradient(90deg,
     rgba(90,74,54,0) 0%, rgba(90,74,54,.13) 32%,
     rgba(90,74,54,.30) 50%, rgba(90,74,54,.13) 68%, rgba(90,74,54,0) 100%);
  opacity:0; transition:opacity .5s;
}
#book.opened #spine{ opacity:1; }

/* ============================ 書頁 ============================ */
.leaf{
  position:absolute; top:0; left:50%;
  width:var(--pw); height:var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--flip) var(--flip-ease);
}
.leaf.flipped{ transform: rotateY(-180deg); }

/* 翻頁中的那一片：只需要延長 transition（其餘由 --flip 決定）。
   ------------------------------------------------------------
   2026-08-21 重做：原本這裡還有一個 leafLift（用 keyframes 動 box-shadow
   做「書頁被拿起來」的投影）。已經整個拿掉，理由三個：
   1. box-shadow 是 paint 屬性，而 .leaf 是 transform-style:preserve-3d 的
      容器 —— 在它身上跑 keyframes 等於每一幀重畫整頁含大圖，是手機翻頁
      卡頓/閃爍的來源（跟 2026-08-20 那次 filter 是同一類成本）。
   2. 它本來就已經在手機上被關掉，等於桌機手機長得不一樣，多一條分支。
   3. 書本的立體感由「靜態的 #spine ＋ .face::after 書縫內陰影」撐住，
      翻頁的動態感由下面那道角度驅動的掃光負責，這兩層就夠了。
   結果：翻頁陰影從三條各自寫死的時間軸，收斂成「旋轉」＋「掃光」兩條，
   而且掃光的 keyframes 是從旋轉曲線反推出來的，不可能再失準。 */
.leaf.flipping{ transition-duration: var(--flip); }

.face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--紙);
}
.face.back{ transform: rotateY(180deg); }

/* 靠書縫那側的內陰影 */
.face.front::after,
.face.back::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none;
  z-index:5;
}
.face.front::after{ left:0;  background:linear-gradient(90deg, rgba(92,76,55,.17), rgba(92,76,55,0)); }
.face.back::after { right:0; background:linear-gradient(270deg, rgba(92,76,55,.17), rgba(92,76,55,0)); }

/* 翻頁瞬間掃過的光影，模擬紙張轉到側面時最暗、
   轉平之後光影散開的樣子（翻頁翻到一半通常最有「立體感」） */
.face.front::before,
.face.back::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  z-index:6; opacity:0;
}
/* 掃光只鋪到半頁（原本 62%）、峰值稍微降一點（原本 .5）：
   這道漸層是「書縫那側最暗」，收窄之後跟靜態的 .face::after 書縫陰影同一個語言，
   消失時整體亮度變化小很多，比較不會被看成「一大片陰影忽然關掉」。 */
.face.front::before{ background:linear-gradient(90deg, rgba(25,18,9,.44) 0%, rgba(25,18,9,0) 50%); }
.face.back::before { background:linear-gradient(270deg, rgba(25,18,9,.44) 0%, rgba(25,18,9,0) 50%); }
/* 掃光的時間軸與旋轉完全綁在一起：同樣的 --flip，keyframes 由 --flip-ease
   反推。所以「最暗」一定落在書頁側轉的那一刻、「歸零」一定落在書頁攤平的
   那一刻 —— 不是調出來的，是算出來的。 */
.leaf.flipping .face::before{
  animation: pageShadePC var(--flip) linear both;
}
body.thin .leaf.flipping .face::before{ animation-name: pageShadeM; }

/* pageShadePC —— 由 cubic-bezier(0.61,0.04,0.21,1) 反推。
   每個 %% 對應書頁在那個時間點「真正的角度」，不透明度＝|sin(角度)|：
   側轉 90 度最暗、攤平 0/180 度剛好是 0。桌機／平板，對應 :root 的 --flip-ease。
   ⚠️ animation-timing-function 必須是 linear，%% 才等於時間，這組數字才成立。
   要換加速曲線的話，這組 keyframes 要重新推算，不能用手調的。 */
@keyframes pageShadePC{
    0%{ opacity:0.000; }   /*    0.0° */
    5%{ opacity:0.018; }   /*    1.0° */
   10%{ opacity:0.053; }   /*    3.0° */
   15%{ opacity:0.111; }   /*    6.4° */
   20%{ opacity:0.199; }   /*   11.5° */
   25%{ opacity:0.327; }   /*   19.1° */
   30%{ opacity:0.507; }   /*   30.5° */
   35%{ opacity:0.741; }   /*   47.8° */
   40%{ opacity:0.958; }   /*   73.3° */
   45%{ opacity:0.976; }   /*  102.7° */
   50%{ opacity:0.809; }   /*  126.0° */
   55%{ opacity:0.612; }   /*  142.2° */
   60%{ opacity:0.444; }   /*  153.6° */
   65%{ opacity:0.312; }   /*  161.8° */
   70%{ opacity:0.211; }   /*  167.8° */
   75%{ opacity:0.136; }   /*  172.2° */
   80%{ opacity:0.081; }   /*  175.3° */
   85%{ opacity:0.043; }   /*  177.5° */
   90%{ opacity:0.018; }   /*  179.0° */
   95%{ opacity:0.004; }   /*  179.8° */
  100%{ opacity:0.000; }   /*  180.0° */
}

/* pageShadeM —— 由 cubic-bezier(0.38,0.66,0.32,1) 反推。
   每個 %% 對應書頁在那個時間點「真正的角度」，不透明度＝|sin(角度)|：
   側轉 90 度最暗、攤平 0/180 度剛好是 0。手機，對應 body.thin 的 --flip-ease。
   ⚠️ animation-timing-function 必須是 linear，%% 才等於時間，這組數字才成立。
   要換加速曲線的話，這組 keyframes 要重新推算，不能用手調的。 */
@keyframes pageShadeM{
    0%{ opacity:0.000; }   /*    0.0° */
    5%{ opacity:0.277; }   /*   16.1° */
   10%{ opacity:0.548; }   /*   33.2° */
   15%{ opacity:0.781; }   /*   51.3° */
   20%{ opacity:0.941; }   /*   70.2° */
   25%{ opacity:1.000; }   /*   89.4° */
   30%{ opacity:0.953; }   /*  107.7° */
   35%{ opacity:0.828; }   /*  124.1° */
   40%{ opacity:0.673; }   /*  137.7° */
   45%{ opacity:0.524; }   /*  148.4° */
   50%{ opacity:0.397; }   /*  156.6° */
   55%{ opacity:0.294; }   /*  162.9° */
   60%{ opacity:0.212; }   /*  167.7° */
   65%{ opacity:0.149; }   /*  171.4° */
   70%{ opacity:0.101; }   /*  174.2° */
   75%{ opacity:0.065; }   /*  176.2° */
   80%{ opacity:0.039; }   /*  177.8° */
   85%{ opacity:0.021; }   /*  178.8° */
   90%{ opacity:0.009; }   /*  179.5° */
   95%{ opacity:0.002; }   /*  179.9° */
  100%{ opacity:0.000; }   /*  180.0° */
}

/* 手機直式（單頁模式）不要書縫掃光 —— 這是版面問題不是效能問題：
   單頁翻的時候畫面上根本沒有書縫（#spine 和 .face::after 也早就在手機關掉），
   留著只會在畫面最左邊多一條忽明忽暗的暗帶。
   雙頁跨頁（含手機橫式）有書縫，掃光是對的，保留。 */
body.mobile .face.front::before,
body.mobile .face.back::before{ display:none; }

/* 手機的翻頁時間與曲線已經統一由上面的 `body.thin{ --flip / --flip-ease }`
   決定，這裡不再重複寫死。（歷史紀錄：一開始這些規則掛在 body.mobile，
   結果手機橫式是雙頁跨頁、body.mobile=false，完全沒吃到，症狀跟直式一樣，
   而電腦因為算力夠看不出來。版面看 mobile、效能看 thin。） */

/* 手機直式的章名：抵銷內距之後還是不夠。實測 390px 手機頁面內容寬 318px，
   「我們的樣子」5 個字用原本的 fs=ph*.093 + 0.20em 字距需要 347px，仍會折行
   （就是使用者看到的「花拱之」＋「下」那種 3+1 分段）。
   字級縮到 ph*.084、字距收到 .17em 之後需要 305px，7 個章名全部一行放得下。
   小手機 360×640 同樣通過（需要 271px / 可用 282px）。 */
body.mobile .chapter h2{
  font-size: calc(var(--ph)*.084);
  letter-spacing:.17em; text-indent:.17em;
}

/* 手機單頁模式 */
body.mobile #book{ width:var(--pw); transform:none !important; }
body.mobile .leaf{ left:0; }
body.mobile #spine{ display:none; }
body.mobile .face.front::after,
body.mobile .face.back::after{ display:none; }

/* ============================ 頁面內容 ============================ */
.page{
  position:absolute; inset:0;
  padding: calc(var(--ph) * .055) calc(var(--pw) * .075);
  display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%),
    var(--紙);
}
.pnum{
  position:absolute; bottom:calc(var(--ph)*.028); left:0; right:0;
  text-align:center; font-size:calc(var(--ph)*.019);
  letter-spacing:.22em; color:var(--淡墨); font-family:var(--標題字);
}
.face.front .pnum{ text-align:right; padding-right:calc(var(--pw)*.09); }
.face.back  .pnum{ text-align:left;  padding-left:calc(var(--pw)*.09); }
body.mobile .pnum{ text-align:center !important; padding:0 !important; }

/* --- 照片 --- */
.shots{ flex:1; display:flex; gap:calc(var(--pw)*.045); min-height:0; }
.shots.col{ flex-direction:column; }
.shot{
  flex:1; min-height:0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.shot img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; display:block;
  box-shadow:0 6px 18px rgba(90,72,50,.20);
  background:#EFE9E0;
}

/* --- 說明小字 --- */
.cap{
  margin-top:calc(var(--ph)*.026);
  font-size:calc(var(--ph)*.0205);
  line-height:1.75; letter-spacing:.06em; color:var(--淡墨);
  display:flex; align-items:center; gap:.7em;
  min-height:1.2em;
}
.cap::before{
  content:""; width:calc(var(--pw)*.075); height:1px;
  background:var(--金); opacity:.65; flex:none;
}
.cap.empty::before{ display:none; }

/* --- 連拍頁 ---------------------------------------------------
   一頁三張同一組動作的橫式照片，由上往下、左→中→右錯開，
   讀起來就是「時間往前走」的一條底片。
   刻意**不重疊**：疊圖很容易壓到人臉（雙直的錯位版就吃過這個虧），
   連拍頁的重點是看得懂順序，不是視覺花招。
   尺寸推算（3:2 橫圖、頁面內容區高度約 0.89*ph 扣掉說明列）：
     桌機 ph=768 → 每張 62% 內容寬 ≈ 304×203，三張＋兩道間距 ≈ 640，放得下。
     手機直式 ph=603 → 放大到 72%，每張 ≈ 229×153，三張 ≈ 485，也放得下。 */
.strip{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap: calc(var(--ph)*.020);
}
.strip .shot{ width:62%; display:block; overflow:visible; }
.strip .shot:nth-child(1){ align-self:flex-start; }
.strip .shot:nth-child(2){ align-self:center;     }
.strip .shot:nth-child(3){ align-self:flex-end;   }
.strip img{
  width:100%; height:auto; max-width:none; max-height:none; display:block;
  box-shadow:0 6px 16px rgba(90,72,50,.20); background:#EFE9E0;
}
/* 手機直式頁面更窄，照片可以放大一點 */
body.mobile .strip .shot{ width:72%; }

/* --- 章名頁 --- */
.chapter{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:calc(var(--ph)*.022);
  padding:0 calc(var(--pw)*.06);
}
.chapter .num{
  font-family:var(--標題字); font-size:calc(var(--ph)*.021);
  letter-spacing:.42em; text-indent:.42em; color:var(--金);
}
.chapter .rule{ width:calc(var(--pw)*.16); height:1px; background:var(--金); opacity:.55; }
.chapter h2{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.093); letter-spacing:.20em; text-indent:.20em;
  color:var(--墨);
  /* 章名要盡量排成一行。.chapter 為了引言留了左右各 6% 頁寬的內距，
     但標題不需要那圈內距 —— 用等量的負 margin 抵銷掉，讓標題可以用滿
     整個頁面的內容寬度。桌機實測「我們的樣子」需要 441px，原本只有
     421px 可用（所以會排成 4+1），抵銷後可用 490px，一行放得下。 */
  margin-inline: calc(var(--pw)*-.06);
  /* 萬一之後有更長的章名，至少折成上下平均的兩行，不會掉一個孤字 */
  text-wrap: balance;
}
.chapter .en{
  font-family:var(--標題字); font-style:italic;
  font-size:calc(var(--ph)*.026); letter-spacing:.18em; color:var(--淡墨);
}
.chapter .lead{
  margin-top:calc(var(--ph)*.03);
  font-size:calc(var(--ph)*.0225); line-height:2.2; letter-spacing:.09em;
  color:var(--淡墨); white-space:pre-line;
}

/* --- 純文字頁 --- */
.textpage{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:0 calc(var(--pw)*.08);
}
.textpage p{
  margin:0; font-family:var(--標題字);
  font-size:calc(var(--ph)*.031); line-height:2.5; letter-spacing:.12em;
  white-space:pre-line; color:var(--墨);
}
.textpage .sign{
  margin-top:calc(var(--ph)*.05); font-size:calc(var(--ph)*.020);
  letter-spacing:.2em; color:var(--淡墨); font-family:var(--內文字);
}

/* --- 封面 / 封底（米白雜誌感） --- */
.cover, .ending{
  position:absolute; inset:0;
  padding: calc(var(--ph)*.062) calc(var(--pw)*.085) calc(var(--ph)*.05);
  display:flex; flex-direction:column; align-items:center;
  background:
    linear-gradient(180deg, #FBF7F0 0%, var(--紙) 42%, #EFE7DA 100%);
  overflow:hidden;
}
.cover::before, .ending::before{
  content:""; position:absolute; inset:calc(var(--ph)*.028) calc(var(--pw)*.04);
  border:1px solid rgba(176,141,87,.32); pointer-events:none;
}
.cover .head, .ending .head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:calc(var(--ph)*.014); flex:none;
}
.cover .shot, .ending .shot{
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  margin:calc(var(--ph)*.035) 0 calc(var(--ph)*.028);
}
.cover img, .ending img{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  box-shadow:0 10px 26px rgba(90,72,50,.24);
}
.cover .foot, .ending .foot{ flex:none; text-align:center; }

.cover .en, .ending .en{
  font-family:var(--標題字); font-size:calc(var(--ph)*.021);
  letter-spacing:.52em; text-indent:.52em; color:var(--金);
}
.cover h1{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.105); letter-spacing:.26em; text-indent:.26em;
  color:var(--墨); line-height:1.2;
}
.cover .rule, .ending .rule{
  width:calc(var(--pw)*.20); height:1px; background:var(--金); opacity:.6;
  margin:calc(var(--ph)*.012) 0;
}
.cover .sub, .ending .en2{
  font-family:var(--標題字); font-style:italic;
  font-size:calc(var(--ph)*.026); letter-spacing:.2em; color:var(--淡墨);
}
.cover .tiny{
  font-size:calc(var(--ph)*.020); letter-spacing:.14em; color:var(--淡墨);
}

.ending h2{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:calc(var(--ph)*.078); letter-spacing:.24em; text-indent:.24em; color:var(--墨);
}
.ending p{
  margin:0; font-family:var(--標題字);
  font-size:calc(var(--ph)*.027); line-height:2.2; letter-spacing:.12em;
  white-space:pre-line; color:var(--墨);
}
.ending .sign{
  margin-top:calc(var(--ph)*.028); font-size:calc(var(--ph)*.019);
  letter-spacing:.2em; color:var(--淡墨);
}

/* ============================ 控制列 ============================ */
#ui{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  gap:14px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
}
#ui > *{ pointer-events:auto; }

.btn{
  border:1px solid rgba(59,53,46,.22);
  background:rgba(255,253,249,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--墨); font-family:var(--內文字); font-size:14px;
  letter-spacing:.08em; border-radius:999px;
  padding:9px 18px; cursor:pointer; user-select:none;
  transition:background .2s, transform .12s, opacity .2s;
}
.btn:hover{ background:#fff; }
.btn:active{ transform:scale(.96); }
.btn[disabled]{ opacity:.35; cursor:default; }
.btn.round{ width:42px; height:42px; padding:0; font-size:17px; line-height:1; }
/* 開著的狀態（音樂開、自動播放中）：加一點金色提示正在作用中 */
.btn.on{
  background:rgba(176,141,87,.16);
  border-color:rgba(176,141,87,.55);
}
.btn.on:hover{ background:rgba(176,141,87,.24); }

#counter{
  font-family:var(--標題字); font-size:13px; letter-spacing:.2em;
  color:var(--淡墨); min-width:78px; text-align:center;
}

#corner{
  position:fixed; top:0; right:0; z-index:1000;
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:10px; padding:14px 16px; max-width:64vw;
}

/* ============================ 目錄 ============================ */
#toc{
  position:fixed; inset:0; z-index:1500;
  background:rgba(232,224,212,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
  padding:32px;
}
#toc.on{ display:flex; }
#toc .box{ width:min(520px,100%); max-height:82vh; overflow:auto; }
#toc h3{
  margin:0 0 22px; text-align:center; font-family:var(--標題字);
  font-weight:500; font-size:15px; letter-spacing:.5em; text-indent:.5em; color:var(--淡墨);
}
#toc a{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 8px; border-bottom:1px solid rgba(59,53,46,.13);
  cursor:pointer; color:var(--墨); text-decoration:none;
}
#toc a:hover{ background:rgba(255,255,255,.5); }
#toc .n{ font-family:var(--標題字); font-size:12px; letter-spacing:.2em; color:var(--金); width:30px; flex:none; }
#toc .t{ font-family:var(--標題字); font-size:19px; letter-spacing:.14em; }
#toc .e{ margin-left:auto; font-family:var(--標題字); font-style:italic; font-size:13px; color:var(--淡墨); }

/* ============================ 開場 ============================ */
#intro{
  position:fixed; inset:0; z-index:2000;
  background:radial-gradient(120% 90% at 50% 30%, #F3EDE3 0%, #E0D6C7 60%, #CFC3B2 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; text-align:center; padding:36px;
  transition:opacity .8s;
}
#intro.hide{ opacity:0; pointer-events:none; }
#intro .en{ font-family:var(--標題字); font-size:13px; letter-spacing:.6em; text-indent:.6em; color:var(--金); }
#intro h1{
  margin:0; font-family:var(--標題字); font-weight:500;
  font-size:clamp(34px,7vw,58px); letter-spacing:.28em; text-indent:.28em; color:var(--墨);
}
#intro .sub{ font-family:var(--標題字); font-style:italic; font-size:15px; letter-spacing:.2em; color:var(--淡墨); }
#intro .rule{ width:70px; height:1px; background:var(--金); opacity:.6; }
#intro .row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
#intro .note{ font-size:12px; letter-spacing:.1em; color:var(--淡墨); opacity:.85; }

/* 提示 */
#hint{
  position:fixed; left:50%; top:22px; transform:translateX(-50%);
  z-index:900; font-size:12px; letter-spacing:.16em; color:var(--淡墨);
  opacity:0; transition:opacity .6s; pointer-events:none; white-space:nowrap;
}
#hint.on{ opacity:.9; }

@media (max-width:760px){
  .btn{ font-size:13px; padding:8px 14px; }
  #ui{ gap:10px; }
  #hint{ top:auto; bottom:calc(60px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   雙直頁 · 手機直式的「錯位疊圖」版型（2026-08-21）
   ------------------------------------------------------------
   手機直式（body.mobile＝單頁模式）下，兩張直式照片並排每張只剩
   約四成頁寬，人臉太小。改成一主一副錯開相疊：主圖 80% 頁寬、
   副圖 52% 壓在右下角，說明小字移到左下的空隙。
   桌機與手機橫式（雙頁跨頁）不套用，維持原本的並排。
   ============================================================ */
body.mobile .duopage .shots.duo{
  position:relative; display:block; gap:0;
}
body.mobile .duopage .shots.duo .shot{
  position:absolute; display:block; overflow:visible;
}
body.mobile .duopage .shots.duo .shot:first-child{
  top:0; left:0; width:80%;
}
body.mobile .duopage .shots.duo .shot:last-child{
  right:0; bottom:calc(var(--ph)*.02); width:52%;
}
body.mobile .duopage .shots.duo img{
  width:100%; height:auto; max-width:none; max-height:none;
}
body.mobile .duopage .shots.duo .shot:last-child img{
  /* 副圖加一圈紙色外框，壓在主圖上時才分得出前後 */
  outline:calc(var(--pw)*.014) solid var(--紙);
  box-shadow:0 10px 26px rgba(90,72,50,.34);
}
body.mobile .duopage .cap{
  position:absolute; margin:0;
  left:calc(var(--pw)*.075); bottom:calc(var(--ph)*.078);
  /* 40% 是副圖左緣以前能用的最大寬度，剛好讓 12 字以內的說明排成一行，
     不會掉下一個孤字。更長的說明會自動折成兩行。 */
  width:40%; display:block;
  font-family:var(--標題字); line-height:1.9;
  text-wrap:pretty;
}
body.mobile .duopage .cap::before{
  display:block; margin-bottom:.6em;
}
body.mobile .duopage .cap.empty{ display:none; }