/* ==========================================================================
   XAD.Core 三核資訊 — 主樣式
   視覺方向：科技資訊型（深色 + 品牌橘 + 等寬字輔助）

   淺色主題：預設是深色（品牌定案的方向），淺色是使用者自己切換的選項，
   不是跟著系統 prefers-color-scheme 走。所有顏色都走變數，
   [data-theme="light"] 只覆寫這組變數，其他規則不用重寫一份。
   ========================================================================== */

:root {
  --brand: #e8590c;
  --brand-lt: #ffb067;
  --bg: #0a0c10;
  --bg-2: #0e1116;
  --bg-3: #121620;
  --fg: #e8e6e3;
  --dim: #8a8f98;
  --dim-2: #5a6069;
  --line: #ffffff14;
  --line-2: #ffffff26;
  --ok: #3fb950;
  --err: #f85149;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1300px;
}

/* 淺色主題覆寫。--brand-lt 在深色主題是給黑底用的淺桃色（漸層字尾端／
   時間軸首尾節點文字），原封不動搬到白底上幾乎看不見，所以換成同色系
   但夠深的鏽橘色，兩個主題各自在自己的底色上都讀得清楚。
   --dim / --dim-2 的深淺順序刻意對調：深色主題裡 --dim 比 --dim-2 亮
   （越亮＝越不顯眼），淺色主題反過來是越暗＝越顯眼，維持「--dim 是
   看得清楚的次要文字、--dim-2 更淡」這個語意不變，只是數值方向相反。 */
:root[data-theme="light"] {
  --brand-lt: #9a3412;
  --bg: #f7f7f8;
  --bg-2: #eef0f3;
  --bg-3: #e4e7ec;
  --fg: #14161a;
  --dim: #5b6472;
  --dim-2: #9aa1ac;
  --line: #00000014;
  --line-2: #00000026;
  --ok: #1a7f37;
  --err: #c92a2a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

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

/* ── 導覽列 ────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 30;
  padding: 18px 0;
  background: linear-gradient(
    color-mix(in srgb, var(--bg) 95%, transparent),
    color-mix(in srgb, var(--bg) 67%, transparent) 60%,
    transparent
  );
  transition: background 0.5s var(--ease), border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav .wrap { display: flex; justify-content: space-between; align-items: center; }
/* logo 是藍色識別色，附近不要放橘色元素，兩個高飽和色相鄰會打架 */
.brand { display: flex; align-items: center; }
.brand img { height: 26px; width: auto; }
/* 深色／淺色各一張圖，靠 data-theme 切換顯示，不用等 JS 判斷完再決定
   載入哪張、也不會有換圖瞬間的閃爍。同一組 class 名稱在頁尾 logo 也共用。 */
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.nav-links a { transition: color 0.4s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--brand); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--fg); cursor: pointer;
  transition: border-color 0.4s, color 0.4s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--fg); font-family: var(--mono); font-size: 12px; padding: 8px 12px; cursor: pointer;
}
@media (max-width: 760px) {
  /* .nav 是 fixed，所以 absolute 子元素以它為定位基準，
     top:100% 會自動貼齊導覽列底部，不必寫死高度 */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: color-mix(in srgb, var(--bg) 98%, transparent); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease);
  }
  .nav-links.open { max-height: 340px; }
  .nav-links a { padding: 16px var(--pad); border-top: 1px solid var(--line); font-size: 14px; }
  .nav-toggle { display: block; }
}

/* ── 捲動進場 ──────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1.05s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
#pipeline { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy {
  position: relative; z-index: 2; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none; padding: 120px 0 60px;
}
/* .hero-copy 是 column flex，.wrap 的 margin:0 auto 會讓它收縮成內容寬度並置中，
   蓋掉 align-items:stretch。必須明確給 width 才能撐滿並靠左對齊頁面邊界。 */
.hero-copy .wrap { pointer-events: auto; width: 100%; }

.tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--brand); margin-bottom: 24px;
}
.tag::before { content: "● "; font-size: 9px; vertical-align: middle; }

.hero h1 {
  font-size: clamp(32px, 6.4vw, 82px); font-weight: 600;
  line-height: 1.07; letter-spacing: -0.03em; max-width: 15ch;
  text-shadow: 0 4px 40px var(--bg);
}
.hero h1 .g {
  background: linear-gradient(96deg, var(--brand), var(--brand-lt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.typed {
  margin-top: 30px; font-family: var(--mono);
  font-size: clamp(12.5px, 1.2vw, 15px); color: var(--dim); min-height: 1.6em;
}
.typed .cur {
  display: inline-block; width: 8px; height: 1.05em; background: var(--brand);
  vertical-align: -2px; margin-left: 3px; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-meta { margin-top: clamp(36px, 5.5vw, 64px); display: flex; flex-wrap: wrap; gap: 10px; }

/* 資料流程圖在寬螢幕會佔用右半邊（見 pipeline.js 的 side 模式），
   文案必須收窄讓開，否則核心節點會被標題蓋住。斷點要和 pipeline.js 一致。 */
@media (min-width: 900px) {
  .hero .tag, .hero .typed, .hero .hero-meta { max-width: 47%; }
  /* 收窄後字級也要跟著降，否則 21 字的標題會斷成 5 行還留下孤字。
     這個字體的 1ch 約 0.55em，20ch 才容得下 11 個中文字。 */
  .hero h1 { font-size: clamp(32px, 3.4vw, 52px); max-width: min(20ch, 47%); }
}
@media (min-width: 640px) and (max-height: 520px) {
  .hero .tag, .hero .typed, .hero .hero-meta { max-width: 47%; }
  .hero h1 { max-width: min(20ch, 47%); }
}

/* 窄螢幕：文案本身就佔掉整個首屏（320×640 時佔 511px），
   再把資料流疊上去一定會壓到文字。改成畫布獨立佔一塊，各自有空間。
   這組媒體查詢是 pipeline.js 中 SIDE_QUERY 的補集，兩邊必須同時修改。 */
@media (max-width: 639px), (max-width: 899px) and (min-height: 520px) {
  .hero { min-height: auto; display: flex; flex-direction: column; }
  /* canvas 在 DOM 中排第一（疊圖模式需要），分塊模式要用 order 把文案拉回前面 */
  .hero-copy { order: 1; min-height: auto; padding: 104px 0 16px; }
  #pipeline { order: 2; position: relative; height: clamp(230px, 40vh, 320px); }
}

/* 橫向手機：可視高度只剩 ~360px，固定的上下 padding 會把內容擠爆 */
@media (max-height: 560px) and (orientation: landscape) {
  .hero, .hero-copy { min-height: auto; }
  .hero-copy { padding: 96px 0 56px; }
  .hero h1 { font-size: clamp(26px, 4.6vw, 40px); }
  .typed { margin-top: 18px; }
  .hero-meta { margin-top: 24px; }
}

/* 窄螢幕直向：縮短 Hero 上留白，讓標題早點進入視線 */
@media (max-width: 560px) {
  .hero-copy { padding: 100px 0 16px; }
}
.pill {
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  border: 1px solid var(--line); padding: 7px 13px;
  background: color-mix(in srgb, var(--fg) 2%, transparent); border-radius: 3px;
}

/* ── 區塊通用 ──────────────────────────────────────────────────────── */
.sec { padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.sec-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--brand); margin-bottom: 22px;
}
.sec-title {
  font-size: clamp(23px, 3.4vw, 44px); font-weight: 600;
  line-height: 1.26; letter-spacing: -0.022em; max-width: 20ch;
}
.sec-intro { margin-top: 22px; max-width: 54ch; line-height: 1.95; color: var(--dim); font-size: 15px; }

/* ── 服務清單 ──────────────────────────────────────────────────────── */
.list { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.item {
  display: grid; grid-template-columns: 64px 1.1fr 1.4fr 20px;
  gap: clamp(14px, 3vw, 40px); align-items: center;
  padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease), padding-left 0.6s var(--ease);
}
.item:hover { background: color-mix(in srgb, var(--fg) 2%, transparent); padding-left: 16px; }
.item-num { font-family: var(--mono); font-size: 12px; color: var(--dim-2); transition: color 0.5s; }
.item:hover .item-num { color: var(--brand); }
.item-name { font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; letter-spacing: -0.01em; }
.item-desc { font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--dim); }
.item-arrow { font-family: var(--mono); color: var(--dim-2); transition: transform 0.5s var(--ease), color 0.5s; }
.item:hover .item-arrow { transform: translateX(6px); color: var(--brand); }
@media (max-width: 860px) {
  .item { grid-template-columns: 44px 1fr; gap: 8px 16px; }
  .item-desc { grid-column: 2; }
  .item-arrow { display: none; }
}

/* .list-plain：純展示用的清單，不是可點的連結（例如 SERVICES）。
   拿掉 hover 效果跟箭頭欄——有 hover 動態、又有箭頭，會讓人以為點下去能連到別的頁面，
   點了卻沒反應，是誤導。 */
.list-plain .item { grid-template-columns: 64px 1.1fr 1.4fr; }
.list-plain .item:hover { background: none; padding-left: 0; }
.list-plain .item:hover .item-num { color: var(--dim-2); }
@media (max-width: 860px) {
  .list-plain .item { grid-template-columns: 44px 1fr; }
}

/* ── 流程時間軸（PROCESS）───────────────────────────────────────────── */
/* 跟服務清單刻意做成不同版型：這是有先後順序的步驟，不是平行的項目列表，
   一條線把節點連起來，順序感直接靠版面表達，不需要額外文字說明。
   純展示，同樣不做 hover 效果。 */
.timeline { margin-top: clamp(40px, 6vw, 72px); }
.tl-step {
  display: grid; grid-template-columns: 40px 1fr;
  gap: clamp(14px, 3vw, 28px);
  position: relative;
  padding-bottom: clamp(28px, 4.5vw, 48px);
}
.tl-step:last-child { padding-bottom: 0; }
/* 連接線：從這個節點的中心，往下接到下一個節點的中心 */
.tl-step:not(:last-child)::before {
  content: "";
  position: absolute; left: 19.5px; top: 40px; bottom: 0;
  width: 1px; background: var(--line);
}
.tl-marker {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  position: relative; z-index: 1; flex-shrink: 0;
}
/* 首尾節點用品牌橘標出來，框出「開始」跟「結束」，中間節點保持中性色不搶戲 */
.tl-step:first-child .tl-marker,
.tl-step:last-child .tl-marker {
  border-color: var(--brand); color: var(--brand-lt);
}
.tl-body { padding-top: 6px; }
.tl-name { font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; letter-spacing: -0.01em; }
.tl-desc { font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--dim); margin-top: 6px; }

/* 區塊結尾的一句收語，併進區塊本身裡（原本是獨立一個 .quote 大字級區塊），
   PROCESS 跟 PRICING 收尾共用同一款。字級介於 .sec-title 跟 .tl-name 之間，
   比照時間軸本身的份量，不是另一個獨立的大標語，是這個區塊的結論句。 */
.closing-note {
  margin-top: clamp(48px, 7vw, 88px);
  font-size: clamp(18px, 2.4vw, 28px); font-weight: 600;
  line-height: 1.5; letter-spacing: -0.015em; max-width: 40ch;
}

/* ── 報價參考（PRICING）───────────────────────────────────────────────
   四張卡片＝四個級距，卡片本身純展示不做 hover（比照 .list-plain 的理由：
   不能點的東西不該長得像能點）。下面接一個對照表，把「常見需求」直接
   換算成級距，讓訪客不用自己心算。 */
.price-tiers {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 980px) { .price-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-tiers { grid-template-columns: 1fr; } }

.price-tier { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); padding: 24px; }
.price-name { font-size: 15px; font-weight: 600; color: var(--fg); }
/* 字級要小到四張卡片的價格區間都能維持一行，不然「～」全形字元一寬，
   較長的兩個級距（小型／中型）會多繞一行，把下面的說明文字往下擠，
   四張卡片的說明文字起始位置就對不齊了。 */
.price-range {
  font-family: var(--mono); font-size: clamp(15px, 1.4vw, 17px); font-weight: 600;
  color: var(--brand); margin-top: 10px; letter-spacing: -0.01em; white-space: nowrap;
}
.price-desc { font-size: 13px; line-height: 1.9; color: var(--dim); margin-top: 16px; }

.price-map { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.price-map-label { font-size: 15px; font-weight: 600; margin-top: 22px; }
.price-map-row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--line);
}
.price-map-row span:first-child { font-size: 14px; color: var(--dim); line-height: 1.7; }
.price-map-tag {
  font-family: var(--mono); font-size: 11.5px; color: var(--brand);
  border: 1px solid var(--brand); padding: 6px 12px; border-radius: 3px; white-space: nowrap;
}
@media (max-width: 640px) {
  .price-map-row { grid-template-columns: 1fr; gap: 8px; }
  .price-map-tag { justify-self: start; }
}

.price-note { margin-top: clamp(28px, 4vw, 40px); max-width: 62ch; line-height: 1.9; color: var(--dim); font-size: 14px; }
.price-note strong { color: var(--fg); font-weight: 600; }

/* ── 案例卡片 ──────────────────────────────────────────────────────── */
.cards {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
/* 剛好 4 張卡片時改 2x2，避免三欄網格最後落單一張、右邊留一大塊空白。
   :has() 直接偵測「第 4 個子元素同時也是最後一個」＝正好 4 張，
   不用另外靠 view 端傳數量或加 class，卡片數變動時自動套用。
   只在桌機寬度生效——980px 以下本來就已經是 2 欄，4 張剛好也是 2x2，不會衝突。 */
@media (min-width: 981px) {
  .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.6s;
}
.card:hover { transform: translateY(-5px); border-color: var(--line-2); }
.card-cover { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-3); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover .card-cover img { transform: scale(1.04); }
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card-cat { font-family: var(--mono); font-size: 11.5px; color: var(--brand); letter-spacing: 0.08em; }
.card h3 { margin: 12px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.card p { font-size: 13.5px; line-height: 1.9; color: var(--dim); flex: 1; }
.card-go { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--brand); }
.card-go::after { content: " →"; transition: margin-left 0.4s var(--ease); }
.card:hover .card-go::after { margin-left: 6px; }

/* 首頁只顯示精選案例，這顆連結是讓人知道還有更多、不是只有卡片這幾筆。 */
.sec-more { margin-top: clamp(28px, 4vw, 40px); text-align: center; }

/* ── 案例內容 ──────────────────────────────────────────────────────── */
/* 原本是終端機視窗風格（# 註解、等寬字全文），對案例真正的目標讀者
   （店家老闆、HR、中小企業主）來說太像程式碼編輯器，會讓人下意識覺得
   「這是給工程師看的」而不想細讀。改用一般文章排版，
   但保留跟全站一致的品牌識別：等寬字小標籤＋橘色（跟 .sec-label 同款）、
   → 箭頭條列（跟 .item-arrow／.mail-link 同款），不是憑空發明新樣式。
   段落寬度收窄到 62ch，長句子在寬螢幕不會被拉成一整排難以閱讀。 */
.case-body { max-width: 62ch; }
.case-block {
  padding: clamp(26px, 4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
.case-block:first-child { padding-top: 0; }
.case-block:last-child { border-bottom: none; padding-bottom: 0; }
.case-block .sec-label { margin-bottom: 14px; }
.case-block p { font-size: 15.5px; line-height: 1.95; color: var(--fg); }
.case-block ul { list-style: none; }
.case-block li {
  padding-left: 22px; position: relative; margin-bottom: 10px;
  font-size: 15.5px; line-height: 1.75; color: var(--fg);
}
.case-block li:last-child { margin-bottom: 0; }
.case-block li::before { content: "→"; position: absolute; left: 0; color: var(--brand); }

/* 文字裡要點出的關鍵字，橘色但不到按鈕/連結那麼搶眼 */
.hl { color: var(--brand); }

/* ── 表單 ──────────────────────────────────────────────────────────── */
.form { margin-top: clamp(40px, 6vw, 68px); max-width: 660px; }
.field { margin-bottom: 26px; }
.field > label {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--dim); margin-bottom: 10px;
}
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 4px;
  /* 至少 16px，否則 iOS Safari 會在聚焦輸入框時自動放大整頁 */
  padding: 14px 16px; font-family: inherit; font-size: 16px; line-height: 1.7;
  transition: border-color 0.4s, background 0.4s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); background: var(--bg-3);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim-2); }
.field .help { margin-top: 8px; font-size: 12.5px; color: var(--dim-2); line-height: 1.7; }
.field .error { margin-top: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--err); }
.field-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 14px 18px; border-radius: 4px; font-size: 14px; line-height: 1.8;
  border: 1px solid var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
  color: var(--err); margin-bottom: 28px;
}

.btn {
  display: inline-block; font-family: var(--mono); font-size: 14px;
  background: var(--brand); color: #fff; border: none; border-radius: 4px;
  padding: 15px 30px; cursor: pointer; letter-spacing: 0.03em;
  transition: background 0.4s, transform 0.4s var(--ease);
}
.btn:hover { background: #cf4f0a; transform: translateY(-2px); }
.btn-ghost { background: none; border: 1px solid var(--line-2); color: var(--fg); }
.btn-ghost:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); border-color: var(--brand); }

/* ── CTA ───────────────────────────────────────────────────────────── */
.cta { padding: clamp(80px, 12vw, 150px) 0 clamp(50px, 7vw, 90px); border-top: 1px solid var(--line); }
.cta h2 {
  font-size: clamp(23px, 4vw, 52px); font-weight: 600;
  line-height: 1.22; letter-spacing: -0.025em; max-width: 18ch;
}
.cta-actions { margin-top: clamp(32px, 5vw, 54px); display: flex; flex-wrap: wrap; gap: 14px; }
.mail-link {
  display: inline-block; margin-top: clamp(30px, 4vw, 48px);
  font-family: var(--mono); font-size: clamp(16px, 2.4vw, 28px); color: var(--brand);
}
.mail-link::before { content: "→ "; color: var(--dim-2); }
.mail-link:hover { text-decoration: underline; text-underline-offset: 7px; }

/* ── 分頁 ──────────────────────────────────────────────────────────── */
.pager {
  margin-top: clamp(40px, 6vw, 64px); display: flex; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 13px; color: var(--dim);
}
.pager a {
  border: 1px solid var(--line); border-radius: 4px; padding: 9px 15px;
  transition: border-color 0.4s, color 0.4s;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }

/* ── 頁尾 ──────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: clamp(50px, 7vw, 80px) 0 40px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-grid h4 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  color: var(--dim-2); font-weight: 400; margin-bottom: 16px;
}
.footer-grid p, .footer-grid a { font-size: 14px; line-height: 2.1; color: var(--dim); }
.footer-grid a:hover { color: var(--brand); }
.footer-logo { height: 54px; width: auto; margin-bottom: 20px; }
.footer-bottom {
  margin-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim-2);
}

/* ── 內頁頁首 ──────────────────────────────────────────────────────── */
.page-head { padding: clamp(130px, 18vw, 200px) 0 clamp(40px, 6vw, 70px); }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--dim-2); margin-bottom: 20px; }
.crumb a:hover { color: var(--brand); }
.page-head h1 {
  font-size: clamp(28px, 5vw, 62px); font-weight: 600;
  line-height: 1.14; letter-spacing: -0.03em; max-width: 18ch;
}
.page-head .sub { margin-top: 24px; max-width: 56ch; line-height: 1.95; color: var(--dim); font-size: 15.5px; }

.meta-row {
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11.5px;
}
.meta-row span {
  border: 1px solid var(--line); padding: 7px 13px; border-radius: 3px;
  color: var(--dim); background: color-mix(in srgb, var(--fg) 2%, transparent);
}

.detail-cover {
  margin-top: clamp(36px, 5vw, 56px); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--bg-2);
}

.empty {
  padding: clamp(50px, 8vw, 90px) 0; font-family: var(--mono);
  font-size: 14px; color: var(--dim-2); line-height: 2;
}