/* ══════════════════════════════════════════════════════════════
   《作家會客室》設計系統
   ──────────────────────────────────────────────────────────────
   配色直接取自這次的主視覺與 EDM（不是天恩的森林綠那一套）：
     亞麻米 #E9E1D2 底　深藍 #0B2560 主色　亮藍 #285BA6 強調
     赭金 #916A23 副標與分隔　磚紅 #B46431 書名

   ⚠️ 變數名沿用舊的（--green / --gold / --paper …），值換成上面這組。
      沒有改名是為了不動到底下九百多行樣式；--green 現在是深藍，不是綠色。
      新寫的樣式請用底下語意正確的別名（--navy / --blue / --linen / --brick）。
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 代幣 ──────────────────────────────────────────── */
:root {
  /* 主視覺配色（語意正確的名字） */
  --navy:     #0B2560;   /* 大標、正文 */
  --blue:     #285BA6;   /* 日期、連結、強調 */
  --linen:    #E9E1D2;   /* 底色 */
  --brick:    #B46431;   /* 書名、星期圓 */
  --gold-dk:  #7E5B1D;   /* 小字用的金（#916A23 在米底上對比只有 3.8:1，小字看不清楚）*/

  /* 舊名沿用 —— 值換成主視覺那一套 */
  --green:    #0B2560;   /* ← 深藍。名字是舊的，不是綠色 */
  --gold:     #916A23;
  --paper:    #E9E1D2;
  --card:     #F2ECDF;
  --sand:     #D8CEB8;
  --ink:      #071B45;
  --muted:    #485373;   /* 帶藍的灰，對比 5.8:1 */
  --gold-lt:  #C9A96A;

  /* 衍生 */
  --green-08: rgba(11, 37, 96, .08);
  --green-14: rgba(11, 37, 96, .14);
  --green-28: rgba(11, 37, 96, .28);
  --gold-12:  rgba(145, 106, 35, .12);
  --gold-30:  rgba(145, 106, 35, .34);

  /* 字體 */
  --serif: 'Noto Serif TC', 'Songti TC', serif;
  --sans:  'Noto Sans TC', system-ui, -apple-system, sans-serif;

  /* 字級 —— 讀者以中高齡為主，手機上再往上加一級 */
  --t-display: clamp(42px, 8.4vw, 92px);
  --t-h1:      clamp(32px, 5.2vw, 58px);
  --t-h2:      clamp(26px, 3.5vw, 40px);
  --t-h3:      clamp(22px, 2.2vw, 29px);
  --t-body:    clamp(18px, 1.3vw, 19px);
  --t-small:   17px;
  --t-label:   15px;

  /* 間距 */
  --gap:   clamp(56px, 8vw, 112px);
  --pad:   clamp(20px, 5vw, 48px);
  --max:   1180px;
  --grid:  27px;          /* 稿紙格邊長 */

  --radius: 3px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. 基礎 ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  /* 300 太細，中文在手機上會糊成一片。這次的讀者年紀偏大，一律 400 起跳 */
  font-weight: 400;
  line-height: 1.9;
  color: var(--navy);
  background: var(--linen);
  letter-spacing: .015em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 稿紙格 ── 整站底紋，純 CSS，無圖檔。
   主視覺本身沒有格線，所以這裡壓得很淡，只當紙的紋理，不要跟文字搶。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--green-08) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(to bottom, var(--green-08) 0 1px, transparent 1px var(--grid));
  opacity: .28;
}
/* 手機螢幕小、像素密，格線會讓字看起來毛毛的 —— 直接關掉 */
@media (max-width: 720px) {
  body::before { display: none; }
}
body > * { position: relative; z-index: 1; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.42;
  margin: 0;
  letter-spacing: .01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold-30); color: var(--ink); }

/* ── 3. 版面 ──────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

section { padding-block: var(--gap); }

.rule { height: 1px; background: var(--sand); border: 0; margin: 0; }

/* 只給螢幕閱讀器看的文字 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 區塊眉標 — 走書籍版權頁的排法，不用等寬字 */
.eyebrow {
  font-family: var(--serif);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-30);
}

.section-title { font-size: var(--t-h2); margin-bottom: .55em; }
.section-lede  { max-width: 46em; color: var(--muted); }

.hl { color: var(--gold); }

/* 鉤狀曲線 — 天恩標誌的嫩芽母題 */
.hook { display: block; color: var(--gold); }
.hook path { fill: none; stroke: currentColor; stroke-linecap: round; }

/* ── 4. 按鈕 ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  padding: 17px 34px;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover  { background: var(--ink); border-color: var(--ink); }
.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--sand); border-color: var(--sand); color: var(--muted); cursor: not-allowed;
}

.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--paper); }

.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: #a87e3c; border-color: #a87e3c; }

.btn-sm { padding: 12px 22px; font-size: 16.5px; }
.btn-lg { padding: 20px 42px; font-size: 19px; font-weight: 700; }
.btn-block { width: 100%; }

/* ── 4b. 預覽標示 ─────────────────────────────────────── */
.previewbar {
  position: relative; z-index: 60;
  background: var(--ink); color: var(--gold-lt);
  font-size: 16px; line-height: 1.7; letter-spacing: .04em;
  text-align: center; padding: 11px 18px;
}
.previewbar b { color: #fff; font-weight: 500; }
/* 後端已接上、還在測試階段：換個顏色，免得被當成純預覽 */
.previewbar.is-testing { background: #8c5a1c; color: #fff2dc; }

/* ── 5. 頁首 ──────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 238, 226, .94);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--sand);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 62px;
}
.topbar-mark {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  letter-spacing: .18em; text-decoration: none; white-space: nowrap;
}
.topbar-meta {
  font-size: var(--t-label); letter-spacing: .2em; color: var(--muted);
  font-family: var(--serif);
}
@media (max-width: 700px) { .topbar-meta { display: none; } }

/* ── 5b. 進度條 ───────────────────────────────────────── */
.stepper { background: var(--card); border-bottom: 1px solid var(--sand); }
.stepper-in {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding-block: 16px;
}
.wiz-step {
  display: flex; align-items: center; gap: 10px;
  flex: none; color: var(--muted);
}
.wiz-no {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  border: 1.5px solid var(--green-28); color: var(--muted);
  flex: none;
}
.wiz-label { font-size: 16.5px; letter-spacing: .04em; white-space: nowrap; }
.wiz-line { flex: 1 1 auto; height: 1px; background: var(--green-28); min-width: 14px; }

.wiz-step.now .wiz-no { background: var(--green); border-color: var(--green); color: var(--paper); }
.wiz-step.now .wiz-label { color: var(--green); font-weight: 500; }
.wiz-step.done .wiz-no { background: var(--gold); border-color: var(--gold); color: #fff; }
.wiz-step.done .wiz-label { color: var(--green); }

@media (max-width: 640px) {
  .wiz-label { display: none; }
  .wiz-step.now .wiz-label { display: inline; }   /* 手機只留目前這一步的字 */
  .stepper-in { gap: 8px; }
}

/* ── 6. Hero ──────────────────────────────────────────── */
/* Hero ── 直接照主視覺的版面。素材都是從主視覺切出來的 PNG／WebP，
   去背後放在同一個亞麻米底色上，所以邊緣看不出接縫。 */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--linen);
  padding-block: clamp(26px, 3.6vw, 54px) clamp(32px, 4.6vw, 64px);
}
.hero .deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
}
.deco-tl { top: 0;    left: 0;  width: clamp(112px, 15vw, 300px); }
.deco-tr { top: 0;    right: 0; width: clamp(88px, 11.5vw, 232px); }
.deco-bl { bottom: 0; left: 0;  width: clamp(112px, 14vw, 288px); }
.deco-br { bottom: 0; right: 0; width: clamp(112px, 15vw, 296px); }

.kv { position: relative; text-align: center; }
.kv-tag { display: block; margin: 0 auto; width: clamp(228px, 32vw, 420px); height: auto; }

/* 舞台：左兩位 — 中間標題 — 右兩位 */
.kv-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  /* 主視覺裡四個人是「貼著標題站」的，間距小。
     拉太開會變成中間一塊空地，人像看起來也跟著縮水。 */
  gap: clamp(6px, 1vw, 16px);
  margin-top: clamp(-18px, -1.2vw, -6px);
}
.kv-cast { display: flex; align-items: flex-end; gap: clamp(6px, 1vw, 16px); }
.kv-who  { margin: 0; }
/* ⚠️ 一定要用「高度」控制，不能用寬度。
   四張插畫的長寬比不一樣（陳志偉最瘦最高），設同寬會讓他整個人大一號。 */
/* 桌機人像高度。對照主視覺量出來的比例是「人像高 ÷ 大標寬 ≈ 0.58」，
   大標是 540px，所以人像要 310px 上下。原本 21vw 在 1280 只有 269px，
   比例掉到 0.50 —— 標題放大、人像縮小，兩邊反向偏移，人看起來就扁了。
   ⚠️ 上限不能再往上加：版面 --max 是 1180px，內容寬固定 1084px，
      一排人像總寬 = 1.488 × 高度，330px 就會把大標欄擠到剩 540px 以下。 */
.kv-who img { display: block; height: clamp(168px, 25vw, 320px); width: auto; }
.kv-pair > span { display: flex; align-items: flex-end; gap: clamp(2px, .4vw, 6px); }
/* 講者名字要夠大 —— 使用者的話：「他們都有知名度，希望更吸引人。」 */
.kv-who figcaption {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(17px, 1.55vw, 25px);
  letter-spacing: .08em; color: var(--navy);
  margin-top: 14px; white-space: nowrap;
}

.kv-mid { padding-bottom: clamp(4px, 1.4vw, 24px); }
.kv-title { margin: 0; }
.kv-title img { display: block; margin: 0 auto; width: min(100%, 540px); height: auto; }
.kv-sub {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(19px, 2vw, 29px);
  letter-spacing: .08em; color: var(--navy);
  width: fit-content;
  margin: clamp(8px, 1.2vw, 16px) auto clamp(12px, 1.5vw, 20px);
  padding: clamp(7px, .9vw, 13px) clamp(6px, 1vw, 16px);
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
}
.kv-meta {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: .14em; color: var(--gold); margin: 0 0 .35em;
}
.kv-line {
  font-size: clamp(15px, 1.25vw, 19px);
  color: var(--gold-dk); margin: 0; line-height: 1.7;
}
/* margin-inline: auto 不能省 —— 全域的 img { display: block }（第 101 行）
   會讓固定寬度的圖靠左，text-align: center 對 block 元素沒有用。 */
.kv-dates { width: clamp(178px, 24vw, 340px); height: auto;
            margin: clamp(12px, 1.6vw, 22px) auto 0; }
.kv-actions { justify-content: center; margin-top: clamp(22px, 2.8vw, 38px); }

/* 手機：標題整段拉到最上面，四個人像併成一列站在下面
   ⚠️ 這一段每個數值都跟「第一屏看不看得到主按鈕」直接相關。
      實測 375×812：原本按鈕頂端在 y=785，整顆被瀏覽器網址列蓋掉。
      下面這些收緊 + 半身人像，把它拉到 y≈630。改動前先量，不要憑感覺調。 */
@media (max-width: 860px) {
  .kv-tag { width: clamp(175px, 26vw, 420px); }
  .kv-stage {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: flex-end;
    gap: 8px; margin-top: -6px;
    /* 往兩側各借 14px。四個人並排在 375px 的螢幕上本來就很擠，
       多這 28px 可以讓人像高一級（120px → 128px）。 */
    margin-inline: -14px;
  }
  .kv-cast { gap: 4px; }
  .kv-pair > span { gap: 2px; }
  .kv-mid { order: -1; flex: 1 0 100%; padding-bottom: 6px; padding-inline: 14px; }
  .kv-sub { margin: 4px auto 8px; padding-block: 6px; }
  .kv-dates { margin-top: 8px; }
  /* 手機用的是新版 EDM（醒報.png）切出來的半身圖，姿勢跟桌機版不一樣：
     王建煊端咖啡、蔡麗貞揮手、陳志偉與陳凱莉比愛心。

     ⚠️ 三張圖是「共用同一個畫布高度（339px）」做出來的，
        矮的人上方補透明、底部對齊。所以這裡給同一個 height，
        四個人的相對大小就自動跟原始 EDM 一致 —— 不要改成各給各的高度，
        那會讓被截斷得最短的王建煊變成頭最大的那個。

     ⚠️ 高度上限一樣是被「寬度」決定的：三張圖的長寬比合計 2.00，
        一排總寬 = 2.00 × 高度。可用 349px、扣間距約 12px，
        最大高度 ≈ 168px。超過就換行，hero 反而變高。

     ⚠️ 三張圖的長寬比合計 2.14，一排總寬 = 2.14 × 高度。
        可用 349px、扣間距 12px → 上限約 157px。取 39vw（375 時 146px）
        留 20px 以上餘裕：不同手機的中文字型寬度會差幾個 px，抓太剛好會換行。 */
  .kv-who img { height: clamp(112px, 39vw, 230px); width: auto; }

  /* 比愛心的手是連在一起的，手機版必須用同一張合成圖。
     兩個 <picture> 的 mobile source 指向同一個網址（瀏覽器只下載一次），
     第二張在這裡藏起來。 */
  .kv-pair > span > picture + picture { display: none; }
}

/* 很窄的手機（iPhone SE 這一類）
   ⚠️ 這裡的瓶頸不是圖，是「陳志偉 × 陳凱莉」那行字：
      nowrap 在 16.5px 下約 135px 寬，比圖本身還寬，
      整列就被它撐到換行、hero 一下多 150px，主按鈕掉出第一屏。
      所以字級跟圖要一起收。 */
@media (max-width: 360px) {
  .kv-who img { height: 37vw; }
  .kv-who figcaption { font-size: 15px; margin-top: 8px; }
  .kv-who figcaption { font-size: 16.5px; letter-spacing: .02em; margin-top: 10px; }
  .kv-actions { margin-top: 20px; }
  .deco-tl, .deco-bl, .deco-br { width: clamp(92px, 26vw, 150px); }
  .deco-tr { width: clamp(74px, 21vw, 120px); }
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* 直排書名 — 像書脊 */
.spine {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: .1em;
  color: var(--green);
  border-right: 3px solid var(--gold);
  padding-right: clamp(14px, 2vw, 26px);
  margin: 0;
  align-self: start;
}
.hero-body { padding-top: clamp(4px, 1.4vw, 16px); max-width: 30em; }
.hero-tag {
  font-family: var(--serif); font-size: var(--t-label);
  letter-spacing: .3em; color: var(--gold); margin-bottom: 20px;
}
/* 主標語：整頁最大的一句話 */
.hero-lede {
  font-family: var(--serif);
  font-size: clamp(25px, 3.4vw, 44px);
  font-weight: 700; line-height: 1.6;
  letter-spacing: .01em;
  margin-bottom: .7em;
}
.hero-text { color: var(--muted); max-width: 27em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-orgs { font-size: var(--t-small); color: var(--muted); }
.hero-orgs b { font-weight: 500; color: var(--green); }

/* ── 6b. 重點條 ───────────────────────────────────────
   Hero 底下橫貫一條暖金，把最該記住的數字拉出來 */
.factbar { background: var(--gold); color: #fff; }
.factbar-in {
  display: flex; flex-wrap: wrap;
  gap: 10px clamp(20px, 3.4vw, 46px);
  padding-block: 16px;
  font-size: var(--t-small); letter-spacing: .04em;
}
.factbar-in span { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; }
.factbar-in b {
  font-family: var(--serif); font-weight: 900;
  font-size: 1.45em; letter-spacing: .02em;
}

/* ── 6c. 地點 ─────────────────────────────────────────
   三場分在兩個城市，跑錯地方是這次最大的風險。 */
.map {
  width: 100%; border: 1px solid var(--sand); border-radius: var(--radius);
  display: block; filter: saturate(.86);
}

/* 城市名一律加底線。三場分在兩個城市，這是最容易看漏的一個字。 */
u.city {
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}
.city-tag {
  font-family: var(--serif); font-weight: 900;
  font-size: 18px; letter-spacing: .2em;
  margin-left: 12px;
}
/* 深綠底上的城市底線改用淺金，才看得出來 */
.session-head u.city { text-decoration-color: var(--gold-lt); }

/* 行內重點：像用螢光筆在書上畫過一道 */
.mark {
  background: linear-gradient(transparent 60%, var(--gold-30) 60%);
  padding: 0 .08em;
}

@media (max-width: 900px) {
  .hero {
    display: block; min-height: 0; padding-top: 0;
    background-image: none;
  }
  .hero::before { display: none; }
  .hero-art-m {
    display: block; width: 100%; height: auto;
    margin-bottom: clamp(24px, 5vw, 40px);
  }
  .hero-in { grid-template-columns: auto 1fr; }
  .hero-body { max-width: none; }
}
@media (max-width: 600px) {
  .hero-in { grid-template-columns: 1fr; gap: 18px; }
  .spine {
    writing-mode: horizontal-tb;
    border-right: 0;
    border-bottom: 3px solid var(--gold);
    padding-right: 0; padding-bottom: 12px;
    letter-spacing: .06em;
    font-size: clamp(38px, 12vw, 60px);
  }
}

/* ── 7. 目次 ──────────────────────────────────────────── */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: 4px; }
.toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
  transition: color .25s var(--ease);
}
.toc a:hover { color: var(--gold); }
.toc-no {
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  letter-spacing: .2em; flex: none; width: 4.6em;
}
.toc-name { font-family: var(--serif); font-size: var(--t-h3); font-weight: 500; }
.toc-dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--green-28);
  transform: translateY(-.28em);
  min-width: 20px;
}
.toc-when { font-size: var(--t-small); color: var(--muted); flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .toc-dots { display: none; }
  .toc a { flex-wrap: wrap; }
  .toc-name { flex: 1; }
  .toc-when { width: 100%; padding-left: calc(4.6em + 12px); }
}

/* ── 8. 場次卡 ────────────────────────────────────────── */
.sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .sessions { grid-template-columns: 1fr; gap: 26px; } }

.session {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.session:hover, .session:focus-within { border-color: var(--gold-30); }

/* 深綠色的場次頭：三張卡並排時最先被看到的地方 */
.session-head {
  padding: 26px 28px 24px;
  background: var(--green);
  color: var(--paper);
}
.session-mark {
  display: inline-block;
  font-family: var(--serif); font-weight: 900; font-size: 16px;
  letter-spacing: .3em; color: var(--ink); background: var(--gold);
  padding: 5px 12px 5px 15px; margin-bottom: 14px;
}
/* 講者名字 —— 藍色區塊裡最醒目的一行，僅次於日期。
   四位講者都有知名度，是最能把人留住的資訊，所以放在最上面、用暖金。 */
.session-cast {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(23px, 1.95vw, 28px);
  line-height: 1.35; letter-spacing: .04em;
  color: var(--gold-lt);
  margin-bottom: 12px;
  /* 固定兩行高：第一行是單獨的講者，第二行是成組的（夫婦同台）。
     只有一行的場次也留著空間，三張卡的藍色區塊才會切齊。 */
  min-height: 2.7em;
}
.session-cast span { display: block; }
.session-when {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 29px);
  font-weight: 900; line-height: 1.28; letter-spacing: .01em;
}
.session-when em { font-style: normal; color: var(--gold-lt); }
.session-where { font-size: var(--t-small); margin-top: 9px; opacity: .88; }

.session-body { padding: 24px 28px 26px; flex: 1; display: flex; flex-direction: column; }

.session-pair { display: grid; gap: 20px; }
.pair-item { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; }
.pair-item img {
  width: 76px; height: auto; border-radius: 1px;
  filter: drop-shadow(0 3px 8px rgba(11, 37, 96, .22));
}
.pair-book { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--brick); }
.pair-who  { font-size: 16.5px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
/* EDM 上那一句切入 —— 同一本書在不同場次講的角度不一樣 */
.pair-take {
  font-size: 16.5px; line-height: 1.75; color: var(--navy);
  margin: 9px 0 0; padding-left: 11px;
  border-left: 2px solid var(--gold-30);
}

/* 主持人固定貼在卡片底部，三張卡才會對齊 —— 上面的書介長短不一樣 */
.session-host {
  margin-top: auto; padding-top: 16px; border-top: 1px dotted var(--green-28);
  font-size: 16.5px; color: var(--muted);
}
.session-host b { font-weight: 700; color: var(--blue); }
/* 頭銜另起一行，不然「宇宙光全人關懷機構總幹事」會把卡片撐爆 */
.session-host span { display: block; font-size: 15px; margin-top: 2px; }

/* ── 書腰 ── 全站唯一的大膽動作 ────────────────────────── */
.session-foot { position: relative; padding-top: 54px; }

.session-cta {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: center;
  gap: .5em;
  font-size: 17px; font-weight: 500; letter-spacing: .06em;
  background: var(--green); color: var(--paper);
  text-decoration: none;
  transition: background .28s var(--ease);
}
.session-cta:hover { background: var(--ink); }
.session-cta[aria-disabled='true'] { background: var(--sand); color: var(--muted); pointer-events: none; }

.band {
  position: relative;
  transform: translateY(-54px);
  background: var(--gold);
  color: #fff;
  padding: 13px 22px;
  min-height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  transition: transform .46s var(--ease);
}
.band-quote {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  line-height: 1.6; letter-spacing: .02em;
}
.band-seats {
  flex: none; font-size: 15.5px; letter-spacing: .1em;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .38);
  white-space: nowrap;
}
/* 滑過／鍵盤聚焦時，書腰往下滑，露出底下的報名鈕 */
.session:hover .band,
.session:focus-within .band { transform: translateY(0); }

/* 沒有滑鼠的裝置：書腰一開始就在下面，報名鈕永遠看得到 */
@media (hover: none) {
  .band { transform: translateY(0); }
}

/* ── 9. 書卡 ──────────────────────────────────────────── */
.book {
  display: grid;
  grid-template-columns: minmax(140px, 216px) 1fr;
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 54px);
  border-top: 1px solid var(--sand);
}
.book:first-of-type { border-top: 0; }
.book-cover { width: 100%; filter: drop-shadow(0 8px 22px rgba(11, 37, 96, .18)); }
.book-title { font-size: var(--t-h3); margin-bottom: .3em; }
.book-sub   { font-family: var(--serif); font-size: 17px; color: var(--muted); margin-bottom: 16px; }
.book-hook  {
  font-family: var(--serif); font-size: clamp(17px, 1.7vw, 21px); font-weight: 500;
  line-height: 1.8; color: var(--gold); margin-bottom: .9em;
}
.book-note {
  margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--gold-30);
  font-size: var(--t-small); color: var(--muted);
}
/* 版權頁式的書籍資料 */
.colophon {
  margin-top: 20px; padding-top: 16px; border-top: 1px dotted var(--green-28);
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  font-family: var(--serif); font-size: 15.5px; letter-spacing: .12em; color: var(--muted);
}
@media (max-width: 620px) {
  .book { grid-template-columns: 1fr; }
  .book-cover { max-width: 168px; }
}

/* ── 10. 人物 ─────────────────────────────────────────── */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.person { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.person-in { padding: 22px 24px 24px; }
.person-name { font-family: var(--serif); font-size: 23px; font-weight: 700; }
.person-role { font-size: 16px; color: var(--gold); letter-spacing: .06em; margin: 6px 0 13px; }
.person-bio  { font-size: var(--t-small); color: var(--muted); line-height: 1.9; }

/* 人物：主視覺的水彩插畫，去背後站在亞麻米底上。
   高度統一，人像靠底對齊，四張卡的頭頂高度自然會有差 —— 那是插畫本來的樣子。 */
.avatar {
  width: 100%; height: 260px;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px;
  background: var(--linen);
  border-bottom: 1px solid var(--gold-30);
}
.avatar-art img { width: auto; height: 100%; object-fit: contain; display: block; }
/* 兩個人擠一張卡（陳志偉×陳凱莉）時各縮一點 */
.avatar-art img + img { margin-left: -4px; }
.avatar-art:has(img + img) img { height: 94%; }
/* 沒有插畫的用姓氏字塊 */
.avatar-word {
  align-items: center;
  background: var(--navy); color: var(--gold-lt);
  font-family: var(--serif); font-size: 56px; font-weight: 900; letter-spacing: .1em;
}
@media (max-width: 720px) { .avatar { height: 216px; } }

/* ── 10b. 主辦單位標誌列 ──────────────────────────────── */
.orgs-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 30px; margin-bottom: 16px;
}
.orgs-row img { height: 26px; width: auto; opacity: .9; }
.orgs-row .org-text {
  font-size: var(--t-small); letter-spacing: .04em; opacity: .82;
}
/* 頁尾是深綠底，沒有反白版的標誌就轉成白色 */
.footer .orgs-row img.invert { filter: brightness(0) invert(1); }

/* ── 11. 流程 ─────────────────────────────────────────── */
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li {
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--sand);
}
.sch-time { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .06em; }
.sch-title { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.sch-desc  { font-size: 16.5px; color: var(--muted); margin-top: 3px; }
.sch-min   { font-size: 15.5px; color: var(--muted); letter-spacing: .12em; white-space: nowrap; }
@media (max-width: 620px) {
  .schedule li { grid-template-columns: 68px 1fr; }
  .sch-min { grid-column: 2; }
}

/* ── 12. 票種 ─────────────────────────────────────────── */
.tickets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 800px) { .tickets { grid-template-columns: 1fr; } }

.ticket {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--sand);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.ticket.is-gold { border-top-color: var(--gold); }
.ticket-name { font-family: var(--serif); font-size: var(--t-h3); font-weight: 700; }
.ticket-sub  { font-size: 16px; color: var(--muted); letter-spacing: .1em; margin-top: 4px; }
.ticket-price {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(34px, 4vw, 46px); line-height: 1; margin: 18px 0 4px;
}
.ticket-price small { font-size: .42em; font-weight: 500; letter-spacing: .1em; margin-right: .3em; }
.ticket-lead { font-size: var(--t-small); color: var(--gold); margin-bottom: 18px; }
.ticket ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.ticket li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: var(--t-small); line-height: 1.75; color: var(--muted);
}
.ticket li::before {
  content: ''; position: absolute; left: 2px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-28);
}
.ticket li.hl { color: var(--green); font-weight: 500; }
.ticket li.hl::before { background: var(--gold); }
.ticket-note { font-size: 15.5px; color: var(--muted); margin-top: -8px; margin-bottom: 18px; }

/* 三場的雙書不同，套票價也不同 */
.price-table { margin: 0 0 20px; border-top: 1px dotted var(--green-28); }
.price-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px dotted var(--green-28);
  font-size: 16px; line-height: 1.6;
}
.price-row s { color: var(--muted); opacity: .7; }
.price-row b { font-family: var(--serif); font-size: 19px; font-weight: 900; white-space: nowrap; }
.price-save {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--brick); color: #fff; border-radius: 3px;
  font-size: 13.5px; font-style: normal; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}

/* ── 12b. 選票種頁 ────────────────────────────────────
   整張卡可點。人數的 +/- 在卡片裡面，點它不會取消選取。 */
.pick-list { display: grid; gap: 18px; }

.pick {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius);
  padding: 26px 28px 26px 56px;
  cursor: pointer;
  transition: border-color .24s var(--ease), background .24s var(--ease);
}
.pick:hover { border-color: var(--gold-30); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }

/* 左上角的圓點 */
.pick-dot {
  position: absolute; left: 22px; top: 30px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--green-28); background: #fff;
  transition: border-color .24s var(--ease);
}
.pick-dot::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--gold);
  transform: scale(0); transition: transform .24s var(--ease);
}

/* 選中：左緣金條、底色轉卡片米、圓點填滿 */
.pick.on { border-color: var(--green); background: var(--card); }
.pick.on::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold); border-radius: var(--radius) 0 0 var(--radius);
}
.pick.on .pick-dot { border-color: var(--gold); }
.pick.on .pick-dot::after { transform: scale(1); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pick-name { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.pick-sub  { font-size: 16px; color: var(--muted); margin-top: 5px; }
.pick-price { text-align: right; flex: none; }
.pick-price b {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 3vw, 36px); line-height: 1; display: block;
}
.pick-price small { font-size: 16px; font-weight: 500; }
.pick-price s { font-size: 15.5px; color: var(--muted); }
/* 「現省 NT$321」—— 劃掉的原價要人自己心算，具體金額才有感。
   現場書攤照定價賣、不打折，所以這個數字是真的。 */
.pick-save {
  /* ⚠️ 一定要自己一行。跟「原價」擠在同一行，價格欄會被撐到 216px，
     在 320px 的小螢幕上整張卡溢出。 */
  display: block; width: fit-content; margin: 6px 0 0 auto; padding: 3px 10px;
  background: var(--brick); color: #fff; border-radius: 3px;
  font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}

/* 書封 —— 看得到書比看得到書名有效得多 */
.pick-covers { display: flex; gap: 12px; margin-top: 16px; }
.pick-covers img {
  height: 108px; width: auto; border-radius: 2px;
  box-shadow: 0 3px 10px rgba(7, 27, 69, .18);
}

.pick-books {
  margin-top: 16px; padding: 14px 16px;
  background: var(--paper); border-radius: var(--radius);
  font-size: 16px; line-height: 1.9;
}
.pick.on .pick-books { background: #fff; }

.pick ul { list-style: none; margin: 16px 0 0; padding: 0; }
.pick li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 16.5px; line-height: 1.8; color: var(--muted);
}
.pick li::before {
  content: ''; position: absolute; left: 3px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-28);
}
.pick li.hl { color: var(--green); font-weight: 500; }
.pick li.hl::before { background: var(--gold); }

.pick-qty {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px dotted var(--green-28);
}
.pick-qty-label { font-size: 16.5px; }

/* 底部結算列：跟著捲動黏在下緣。
   下面留 padding 讓最後一張卡片捲得過去，不會被它蓋住。 */
.pick-list { padding-bottom: 8px; }
.tally-space { padding-bottom: 108px; }

.tally {
  position: sticky; bottom: 16px; z-index: 40;
  background: var(--green); color: var(--paper);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 26px;
  box-shadow: 0 10px 34px rgba(11, 37, 96, .26);
}
.tally-detail { font-size: 16px; opacity: .85; }
.tally-amount {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 38px); line-height: 1.2;
}
.tally-amount small { font-size: .5em; font-weight: 500; margin-right: .2em; }
.tally .btn { background: var(--gold); border-color: var(--gold); color: #fff; }
.tally .btn:hover { background: #a87e3c; border-color: #a87e3c; }
.tally .btn:disabled { background: rgba(255,255,255,.16); border-color: transparent; color: rgba(251,248,242,.5); }

/* 已選場次的提示條 */
.chosen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--card); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 26px;
}
.chosen-when { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.5; }
.chosen-where { font-size: 16px; color: var(--muted); margin-top: 4px; }

/* ── 13. 場地 ─────────────────────────────────────────── */
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .venues { grid-template-columns: 1fr; } }
.venue { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.venue-in { padding: 22px 24px 24px; }
.venue-mark { font-family: var(--serif); font-weight: 900; letter-spacing: .3em; color: var(--gold); font-size: 16px; }
.venue-city {
  font-family: var(--serif); font-weight: 900;
  font-size: 30px; letter-spacing: .12em; line-height: 1.3; margin-top: 8px;
}
.venue-name { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 2px 0 8px; }
.venue-addr { font-size: var(--t-small); color: var(--muted); }
/* 交通方式。夏隆咖啡廳有五條路線，列成清單比擠成一行好讀 */
.venue-transit {
  font-size: var(--t-small); color: var(--muted);
  margin: 8px 0 0; padding-left: 1.15em; list-style: none;
}
.venue-transit li { position: relative; line-height: 1.75; margin-bottom: 3px; }
.venue-transit li::before {
  content: '・'; position: absolute; left: -1.1em; color: var(--gold);
}
p.venue-transit { padding-left: 0; }
.venue-link { display: inline-block; margin-top: 14px; font-size: 16.5px; color: var(--gold); }

/* ── 14. FAQ ──────────────────────────────────────────── */
.faq { border-top: 1px solid var(--sand); }
.faq details { border-bottom: 1px solid var(--sand); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0;
  font-family: var(--serif); font-size: 19px; font-weight: 500; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '＋'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 19px;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { content: '－'; }
.faq-a { padding: 0 0 22px; color: var(--muted); font-size: var(--t-small); max-width: 50em; }

/* ── 15. 結語 & 頁尾 ──────────────────────────────────── */
.coda {
  background: var(--ink); color: var(--paper);
  text-align: center;
}
.coda .hook { margin: 0 auto 26px; }
.coda-q {
  font-family: var(--serif); font-size: var(--t-h2); font-weight: 500;
  line-height: 1.7; max-width: 20em; margin: 0 auto .5em;
}
.coda-sub { color: var(--gold-lt); }

.footer { background: var(--green); color: var(--paper); padding-block: 48px; font-size: var(--t-small); }
.footer a { color: var(--gold-lt); }
.footer-in { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-end; }
.footer-orgs { opacity: .82; line-height: 2; }
.footer-logo { height: 34px; width: auto; opacity: .9; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-fine { opacity: .55; font-size: 15.5px; letter-spacing: .08em; }

/* ── 16. 表單（報名頁）────────────────────────────────── */
.checkout { display: grid; grid-template-columns: 1fr 336px; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 940px) { .checkout { grid-template-columns: 1fr; } }

.step { padding-block: clamp(30px, 4vw, 44px); border-top: 1px solid var(--sand); }
.step:first-of-type { border-top: 0; padding-top: 0; }
.step-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.step-no {
  font-family: var(--serif); font-weight: 700; font-size: 16px;
  letter-spacing: .28em; color: var(--gold); flex: none;
}
.step-title { font-size: var(--t-h3); }

.field { margin-bottom: 20px; }
.field-label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 16px; font-weight: 500; margin-bottom: 8px;
}
.field-opt { font-size: 15px; color: var(--muted); letter-spacing: .12em; }
.field-help { font-size: 15.5px; color: var(--muted); margin-top: 6px; }

input[type='text'], input[type='tel'], input[type='email'], input[type='number'], select, textarea {
  width: 100%;
  font-family: var(--sans); font-size: 18px; font-weight: 300;
  color: var(--green); background: #fff;
  border: 1px solid var(--sand); border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-12);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.8; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

.field.err input, .field.err select, .field.err textarea { border-color: #a8443a; }
.field-err { display: none; font-size: 15.5px; color: #a8443a; margin-top: 6px; }
.field.err .field-err { display: block; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

/* 選項卡（票種 / 場次 / 發票別）*/
.choice { display: grid; gap: 12px; }
.choice-item {
  display: block; position: relative; cursor: pointer;
  border: 1px solid var(--sand); border-radius: var(--radius);
  background: #fff; padding: 18px 20px;
  transition: border-color .24s var(--ease), background .24s var(--ease);
}
.choice-item:hover { border-color: var(--gold-30); }
.choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.choice-item:has(input:checked) { border-color: var(--green); background: var(--card); }
.choice-item:has(input:checked)::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
}
.choice-item:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.choice-name { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.choice-sub  { font-size: 16px; color: var(--muted); margin-top: 4px; }
.choice-price { font-family: var(--serif); font-size: 21px; font-weight: 900; flex: none; }
.choice-price small { font-size: .55em; font-weight: 500; margin-right: .25em; }
.choice-full { opacity: .5; cursor: not-allowed; }
/* 沒得選的時候（這一版一律現場繳費）：長得像已選中，但不可點 */
.choice-item.is-fixed { cursor: default; border-color: var(--green); background: var(--card); }
.choice-item.is-fixed::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
}
.choice-item.is-fixed:hover { border-color: var(--green); }

.qty { display: flex; align-items: center; gap: 0; width: fit-content; border: 1px solid var(--sand); border-radius: var(--radius); background: #fff; }
.qty button {
  width: 42px; height: 42px; border: 0; background: none; cursor: pointer;
  font-size: 20px; color: var(--green); font-family: var(--serif);
}
.qty button:disabled { color: var(--sand); cursor: not-allowed; }
.qty output { width: 46px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 19px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; color: var(--muted); line-height: 1.8; cursor: pointer; }
.consent input { margin-top: .42em; width: 17px; height: 17px; accent-color: var(--green); flex: none; }

/* 座位承諾 —— 刻意跟上面的個資同意長得不一樣。
   個資同意是法律條款，人會自動跳過；這一條是想讓人真的讀進去，
   所以給它自己的底色、深一點的字、大一級的字級。 */
.pledge {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--linen); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: 14px 16px; margin-bottom: 10px;
  font-size: 17px; line-height: 1.75; color: var(--ink);
}
.pledge input { margin-top: .38em; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.pledge b { color: var(--brick); font-weight: 700; }

/* 側邊訂單摘要 — 做成一條直立書腰 */
.summary { position: sticky; top: 86px; }
.summary-in { background: var(--card); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; }
.summary-band {
  background: var(--gold); color: #fff; padding: 14px 22px;
  font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: .16em;
}
.summary-body { padding: 22px; }
.summary-when { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.45; }
.summary-where { font-size: 16px; color: var(--muted); margin-top: 5px; }
.summary-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px dotted var(--green-28); font-size: 16px;
}
.summary-line:first-of-type { margin-top: 18px; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-top: 2px solid var(--green); margin-top: 6px; padding-top: 14px;
}
.summary-total b { font-family: var(--serif); font-size: 27px; font-weight: 900; }
.summary-books { font-size: 15.5px; color: var(--muted); margin-top: 12px; line-height: 1.8; }
.summary-foot { padding: 0 22px 22px; }
.summary-fine { font-size: 15px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.7; }

.notice {
  padding: 16px 18px; border-radius: var(--radius); font-size: 16.5px; line-height: 1.8;
  background: var(--gold-12); border-left: 3px solid var(--gold); color: var(--green);
}
.notice.is-err { background: rgba(168, 68, 58, .08); border-left-color: #a8443a; color: #8c382f; }

/* ── 17. 藏書票（電子報到證）──────────────────────────── */
.exlibris {
  max-width: 400px; margin: 0 auto;
  /* 比頁面底色亮一階，卡片才會浮起來。
     手機沒有稿紙格底紋，用 --paper 的話卡片會跟背景融成一片。 */
  background: #FAF6ED;
  border: 1px solid var(--green-28);
  border-radius: var(--radius);
  padding: 34px 30px 26px;
  text-align: center;
  position: relative;
  box-shadow: 0 14px 40px rgba(11, 37, 96, .15);
}
.exlibris::before, .exlibris::after {
  content: ''; position: absolute; left: 12px; right: 12px; height: 1px; background: var(--gold-30);
}
.exlibris::before { top: 12px; }
.exlibris::after  { bottom: 12px; }

.ex-corner { position: absolute; width: 34px; height: 34px; color: var(--gold); }
.ex-corner.tl { top: 10px; left: 10px; }
.ex-corner.tr { top: 10px; right: 10px; transform: scaleX(-1); }
.ex-corner.bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.ex-corner.br { bottom: 10px; right: 10px; transform: scale(-1); }

.ex-kicker { font-family: var(--serif); font-size: 14.5px; letter-spacing: .34em; color: var(--gold); }
.ex-event  { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 10px 0 20px; letter-spacing: .06em; }
.ex-no {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(60px, 17vw, 88px); line-height: 1; letter-spacing: .04em;
  margin: 0;
}
.ex-tone {
  display: inline-block; margin-top: 14px; padding: 7px 20px;
  font-size: 16px; font-weight: 500; letter-spacing: .16em;
  border-radius: 999px; color: #fff; background: var(--green);
}
.ex-tone.is-gold { background: var(--gold); }
.ex-name { font-family: var(--serif); font-size: 21px; font-weight: 700; margin-top: 18px; }
/* 報到證上的場地資訊：僅次於編號的第二層。當天最常被看的就是這一塊 */
.ex-meta { margin-top: 18px; padding-top: 18px; border-top: 1px dotted var(--green-28); }
.ex-when  { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.ex-city  { font-family: var(--serif); font-size: 34px; font-weight: 900; letter-spacing: .16em; color: var(--gold); margin: 6px 0 2px; }
.ex-venue { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.5; }
.ex-addr  { font-size: 16px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.ex-qr { margin: 20px auto 0; width: 152px; height: 152px; }
.ex-qr canvas, .ex-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ex-foot { font-family: var(--serif); font-size: 13.5px; letter-spacing: .26em; color: var(--muted); margin-top: 16px; }

/* ── 18. 報到台 ───────────────────────────────────────── */
.desk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.desk-stat { background: var(--card); border-radius: var(--radius); padding: 14px; text-align: center; }
.desk-stat b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 900; line-height: 1.2; }
.desk-stat span { font-size: 15px; color: var(--muted); letter-spacing: .1em; }

.desk-list { list-style: none; margin: 0; padding: 0; }
.desk-row {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 12px; border-bottom: 1px solid var(--sand); background: #fff;
}
.desk-row.done { background: var(--card); opacity: .62; }
.desk-no { font-family: var(--serif); font-weight: 900; font-size: 21px; letter-spacing: .04em; }
.desk-name { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.desk-sub { font-size: 15.5px; color: var(--muted); }
.desk-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14.5px; color: #fff; background: var(--green); letter-spacing: .08em; }
.desk-tag.is-gold { background: var(--gold); }
/* 要跟這個人收現金 — 門口一眼要看得到 */
.desk-tag.is-cash { background: #a8443a; }
.desk-row.owes { box-shadow: inset 3px 0 0 #a8443a; }
.desk-act.cash { background: #a8443a; }
.desk-empty { padding: 40px 0; text-align: center; color: var(--muted); }

/* ── 19. 動效紀律 ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .band { transform: translateY(0) !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── 20. 列印（現場紙本名單）──────────────────────────── */
@media print {
  body::before, .topbar, .session-cta, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .desk-row { break-inside: avoid; }
}