/*
檔案位置：jonaminz/pages/jonathan/assets/css/page-jonathan.css
用途：Jonathan 公開頁的 Page Layer（CSS 疊加第 7 層）。

2026-07-31：整份改寫成 Jonathan v2「Editorial Clarity」。
交接包：jonathan v2交接包/DESIGN_REFERENCE.md。
（v1 的「Dark Precision 深色精密工作室」與 .jonathan-pod 抽象展示艙一起退場，
 原始碼仍在 git 歷史。）

════════════════════════════════════════════════════════════
色盤為什麼定義在這裡（第 7 層），不是 reservoir 也不是 Supabase theme
════════════════════════════════════════════════════════════
v1 用的是 reservoir 02-tokens.css 那組 --color-*-jonathan（深藍灰）。
Editorial Clarity 是完全不同的色盤，但：
 · RULES §1-4 與交接包都禁止「為了單頁問題回頭改 CSS 疊加第 1–6 層本體」，
   而那組 token 就在第 2 層；直接改會把 v1 的語彙從共用層抹掉，而
   /pages/jonathan/about/ 還在用同一套。
 · 寫進 Supabase theme（第 8 層）等於在全站 theme 長出第二套色盤，
   交接包明文警告不可以。
所以照使用者裁決：**在這一層用頁面作用域的自訂屬性**，作用域鎖在
`.jonathan-page`，不外漏、不影響其他頁面，reservoir 一個字沒動。
刻意用 `--jonathan-*` 這組新名字而不去覆寫 `--color-*-jonathan`——覆寫同名
token 會讓「這頁到底吃哪一套」變成要追兩個檔案才知道的事。

════════════════════════════════════════════════════════════
柑橘紅（accent）的使用紀律
════════════════════════════════════════════════════════════
DESIGN_REFERENCE：「柑橘紅只用於有意義的焦點或狀態，不做萬用裝飾條」。
本檔 accent **只出現在兩個地方**：
 ① SLOT 的 UNASSIGNED 狀態——那是真的狀態，內容指派後會變。
 ② 鍵盤 focus 環——那是真的焦點。
字標的句點、規則線、標題一律 ink／muted。要加新的 accent 用法之前，先回答
「它在說什麼」；答不出來就不要加（工作區 CLAUDE.md 設計品味那節）。
*/

/* ── 頁面作用域 token ─────────────────────────────────────── */
.jonathan-page {
  --jonathan-paper: #F4F0E7;
  --jonathan-ink: #11110F;
  --jonathan-accent: #F04A23;
  --jonathan-muted: #777268;
  /* 規則線＝ink 的低透明度，跟著紙色走，不另外挑一個灰。 */
  --jonathan-rule: rgba(17, 17, 15, 0.16);

  --jonathan-display: Georgia, "Iowan Old Style", "Times New Roman",
    "Noto Serif TC", "Songti TC", serif;
  --jonathan-sans: "Helvetica Neue", Arial, "Noto Sans TC",
    "PingFang TC", system-ui, sans-serif;

  /* 版面節奏：左右留白隨視窗成長但有上下限——編輯版面的邊界感來自穩定的
     欄寬，不是無限拉伸。 */
  --jonathan-gutter: clamp(20px, 6vw, 96px);
  --jonathan-maxw: 1360px;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--jonathan-paper);
  color: var(--jonathan-ink);
  font-family: var(--jonathan-sans);
  -webkit-font-smoothing: antialiased;
}

.jonathan-page *,
.jonathan-page *::before,
.jonathan-page *::after {
  box-sizing: border-box;
}

/* ── 報頭 ─────────────────────────────────────────────────── */
.jonathan-masthead {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  padding: 22px var(--jonathan-gutter) 14px;
  border-bottom: 1px solid var(--jonathan-rule);
  width: 100%;
  max-width: var(--jonathan-maxw);
  margin: 0 auto;
}

.jonathan-masthead-brand {
  font-family: var(--jonathan-display);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--jonathan-ink);
  text-decoration: none;
}

.jonathan-masthead-nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 28px);
  margin-inline-start: auto;
}

/* 導覽是連結不是按鈕：沒有邊框、底色、圓角。底線平時透明，hover／focus
   才浮現，維持編輯版面的安靜。
   （也吃 <button>，因為登出是 button；讓它跟連結長得一樣。） */
.jonathan-masthead-link {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jonathan-muted);
  text-decoration: none;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.jonathan-masthead-link:hover,
.jonathan-masthead-link:focus-visible {
  color: var(--jonathan-ink);
  border-bottom-color: var(--jonathan-rule);
}

.jonathan-masthead-identity,
.jonathan-masthead-greeting {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--jonathan-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

/* ── 主體 ─────────────────────────────────────────────────── */
.jonathan-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--jonathan-maxw);
  margin: 0 auto;
  padding: 0 var(--jonathan-gutter);
}

/* ── 開場：非對稱 ─────────────────────────────────────────────
   桌面 12 欄格線：字標佔左 7 欄、照片佔右 5 欄，字標再往下推一段，
   讓兩者的視覺重心錯開——非對稱來自「兩個元素各自的節奏不同」，
   不是把東西隨便偏一邊。
   ⚠ 巢狀 grid 每一層都要 min-width:0，否則長字串會把欄位撐爆
   （工作區記憶 reference_css_grid_nested_min_width_pitfall）。 */
.jonathan-opening {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(40px, 8vw, 104px) clamp(48px, 9vw, 120px);
}

.jonathan-opening-type {
  grid-column: 1 / span 7;
  min-width: 0;
  padding-top: clamp(8px, 3vw, 56px);
}

.jonathan-wordmark {
  margin: 0;
  font-family: var(--jonathan-display);
  /* 下限確保手機仍然是「大」，上限避免超寬螢幕失控。 */
  font-size: clamp(3.25rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--jonathan-ink);
}

/* 句點是字標的一部分（DESIGN_REFERENCE 逐字寫 `Jonathan.`）。
   刻意**不上 accent**——它不是狀態也不是焦點。 */
.jonathan-wordmark-stop {
  color: var(--jonathan-ink);
}

.jonathan-standfirst {
  margin: clamp(20px, 3vw, 32px) 0 0;
  max-width: 32ch;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.75;
  color: var(--jonathan-muted);
}

/* 照片：大面積、非對稱裁切。
   ⚠ 只做色彩校正與低彩度（交接包允許範圍內）：輕微去飽和＋一點暖調，
   讓證件照的純白底不會跟象牙紙硬碰硬。
   **不改臉、不美化五官、不合成背景。** object-position 往上偏，讓臉落在
   視覺三分之一而不是正中央——這是裁切，不是修圖。 */
.jonathan-portrait {
  grid-column: 8 / span 5;
  min-width: 0;
  margin: 0;
}

.jonathan-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 22%;

  /* 低彩度：把證件照拉離「大頭照」的直白感，靠近印刷品的層次。 */
  filter: saturate(0.88) contrast(1.02);

  /* ⚠ 為什麼要 multiply（線上截圖驗收抓到的）：這是白底證件照，
     純白 (#FFF) 壓在象牙紙 (#F4F0E7) 上會變成一塊看得見邊的白方框，
     整個編輯版面被那個矩形切斷。multiply 讓白底**正好乘成紙色**、
     跟頁面接在一起，深色區域幾乎不受影響（乘以接近 1 的值）。
     這是色彩校正（交接包允許），不是修圖：臉部比例、五官、輪廓一律未動，
     膚色只是跟著紙調暖了約 5%。 */
  mix-blend-mode: multiply;
}

/* ── Editorial index（SLOT）────────────────────────────────── */
.jonathan-index {
  border-top: 1px solid var(--jonathan-rule);
  padding-block: clamp(24px, 4vw, 40px) clamp(40px, 7vw, 88px);
}

.jonathan-index-label {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-family: var(--jonathan-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jonathan-muted);
}

.jonathan-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 3vw, 40px);
}

/* SLOT：只有細規則線、編號與狀態。
   **沒有**卡片背景、圓角、陰影、hover lift、箭頭（DESIGN_REFERENCE 明文），
   也沒有 cursor:pointer——它不能點，就不該長得像能點。 */
.jonathan-slot {
  min-width: 0;
  border-top: 1px solid var(--jonathan-rule);
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.jonathan-slot-number {
  font-family: var(--jonathan-display);
  font-size: 1.125rem;
  color: var(--jonathan-ink);
  font-variant-numeric: tabular-nums;
}

/* accent 用法①：UNASSIGNED 是真的狀態，內容指派後會變。
   狀態同時用**文字**表達（不是只靠顏色），色盲與強制高對比模式下仍讀得到。 */
.jonathan-slot-state {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--jonathan-accent);
}

.jonathan-index-note {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  font-size: 0.8125rem;
  color: var(--jonathan-muted);
}

/* ── 版本記事列 ───────────────────────────────────────────── */
.jonathan-colophon {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--jonathan-maxw);
  margin: 0 auto;
  padding: 16px var(--jonathan-gutter) 24px;
  border-top: 1px solid var(--jonathan-rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--jonathan-muted);
}

.jonathan-colophon-brand {
  font-family: var(--jonathan-display);
  letter-spacing: 0.01em;
}

/* ── 鍵盤焦點 ─────────────────────────────────────────────────
   accent 用法②：焦點是真的狀態。用 outline 而不是改背景，才不會在編輯
   版面上突然長出一塊色塊。 */
.jonathan-page a:focus-visible,
.jonathan-page button:focus-visible {
  outline: 2px solid var(--jonathan-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── 進場動態 ─────────────────────────────────────────────────
   照片輕微顯影＋極小幅放大，文字分層淡入。沒有長時間 intro、
   SLOT 不做假互動。初始狀態寫在這裡，由 app.js 掛 .is-revealed 觸發。 */
.jonathan-wordmark,
.jonathan-standfirst,
.jonathan-portrait-img,
.jonathan-index {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.jonathan-portrait-img { transform: scale(1.015); }

.jonathan-standfirst,
.jonathan-index { transform: translateY(8px); }

.jonathan-page.is-revealed .jonathan-wordmark { opacity: 1; }
.jonathan-page.is-revealed .jonathan-portrait-img { opacity: 1; transform: scale(1); transition-delay: 0.06s; }
.jonathan-page.is-revealed .jonathan-standfirst { opacity: 1; transform: none; transition-delay: 0.14s; }
.jonathan-page.is-revealed .jonathan-index { opacity: 1; transform: none; transition-delay: 0.22s; }

/* ⚠ reduced-motion 的做法是「把過渡收成 0、直接呈現最終狀態」，不是在 JS 裡
   提早 return——那樣元素會永遠停在 opacity:0，等於內容消失。
   這裡把初始 opacity 直接設回 1，所以**就算 JS 整支載入失敗、class 掛不上，
   內容仍然看得到**。 */
@media (prefers-reduced-motion: reduce) {
  .jonathan-wordmark,
  .jonathan-standfirst,
  .jonathan-portrait-img,
  .jonathan-index {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 手機：重新排版，不是等比例縮小 ─────────────────────────────
   DESIGN_REFERENCE 明文要求。桌面的 7/5 非對稱在窄螢幕沒有意義（兩欄都
   太窄），改成單欄垂直節奏：字標 → 照片 → 定位文字 → index。
   用 display:contents 把 .jonathan-opening-type 拆掉，讓字標與定位文字
   直接成為 grid 項目，才能用 order 把照片插在兩者中間——先看到名字、
   再看到人、再讀一句話。 */
@media (max-width: 860px) {
  .jonathan-opening {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(22px, 5vw, 34px);
    padding-block: clamp(28px, 7vw, 44px) clamp(32px, 8vw, 52px);
  }

  .jonathan-opening-type {
    display: contents;
  }

  .jonathan-wordmark {
    grid-column: 1 / -1;
    order: 1;
  }

  .jonathan-portrait {
    grid-column: 1 / -1;
    order: 2;
  }

  .jonathan-standfirst {
    grid-column: 1 / -1;
    order: 3;
    max-width: none;
    margin-top: 0;
  }

  /* ⚠ 手機**不能**用橫幅比例（第一版寫 4/3，線上截圖驗收當場抓到）：
     原圖是 996×1280 的正面證件照（比例 0.78），用 4/3 去 cover 必然把下巴
     與嘴切掉——那不是「自然裁切」，是把人的臉切一半。
     改用 4/5（0.8），跟原圖比例幾乎一樣，等於只做極小幅修邊、整張臉完整。 */
  .jonathan-portrait-img {
    aspect-ratio: 4 / 5;
    object-position: 50% 26%;
  }

  .jonathan-index-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .jonathan-slot {
    padding-block: 12px;
  }

  .jonathan-masthead {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .jonathan-colophon {
    flex-direction: column;
    gap: 6px;
  }
}

/* 極窄螢幕：報頭換行後，導覽不要再靠右擠成一團。 */
@media (max-width: 420px) {
  .jonathan-masthead-nav {
    margin-inline-start: 0;
  }
}