/* ==========================================================================
   關於我們頁專屬版面
   --------------------------------------------------------------------------
   ⚠️ 這裡只放本頁的**版面**。共用元件（.prose／.section-head／.form／.btn／
      .page-head）一律在 style.css —— 複製到這裡會產生隱形分叉。
   🔴 **視覺來源＝PM 的設計稿 `關於我們設計稿/`（2026-08-17 R3b 重切）**，
      不是 `D2-關於我們頁規劃.md`（那份是 08-06 版，只剩區塊結構的參考價值）。
   🔴 文案來源＝客戶正式文案（台南鹽埕林姓宗親會_網站文案.md 的「關於我們」段）。

   🔴 **三處刻意與設計稿不同**（不要「修正」回去）：
   ① **hero 不照設計稿**——PM 明示沿用現行 `.page-head--photo`，只換背景照。
   ② **縱向細條紋不實作**——PM 確認那是設計稿的參考線，不是元素。
   ③ **編號 `01.` 用莓紅不用珊瑚粉**——設計稿量到的是 #D99981（約 2.2:1），
      而 CLAUDE.md 3.1 的鐵則是「珊瑚粉不得承載任何文字」。與 eyebrow 同一類換色。
   ========================================================================== */

/* ==========================================================================
   ① 家族起源．左長文、右兩張直向照片、左下手繪枝葉
   ========================================================================== */
.origin__grid {
  position: relative;   /* 手繪枝葉的定位基準 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

/* `.prose` 預設限寬 720 並置中——在分欄裡要交給 grid 決定寬度，
   否則欄位變窄時它會在自己的欄內再縮一次、左右留不對稱的白。 */
.origin__prose {
  margin-top: var(--sp-8);
  max-width: none;
  margin-inline: 0;
}

.origin__media {
  display: grid;
  gap: var(--sp-6);
}
/* 🔴 R6f（2026-08-18 PM：「右側兩張照片高度縮減」）：`3 / 2` → `16 / 9`。
   **實測**（1440px）：改前右欄 888px、左欄長文 723px → **右欄多出 165px**；
   改後右欄 753px → 只差 30px，兩欄視覺上齊平。
   ⚠️ **用 `aspect-ratio` 不用固定 `height`**：固定高度換一張不同比例的圖就會變形，
      而 `aspect-ratio` ＋ `object-fit: cover` 是「裁切」不是「壓扁」，構圖仍由上傳前決定。
   🔴 **不可加 `max-height`**（9.4）：它與 `aspect-ratio` 併用時，
      瀏覽器會反過來**縮寬度**來維持比例 → 照片只佔容器左半邊、右邊一大塊白。
   ⚠️ 899／599 兩個斷點各有 `.origin__media` 的欄數覆寫，**三種寬度都量過**（見收工紀錄）。 */
.origin__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* 🔴 直角，不加圓角：demo 的照片一律直角，那是這套視覺的特徵。 */
}

/* 手繪枝葉：設計稿放在左欄文字底下、往左出血。
   ⚠️ 用 `top: 100%` 從文字區底端起算，不用 bottom 的負值——
      負值綁在圖片高度上，換一張比例不同的裝飾圖就會壓到文字，而且不會報錯
      （與 index.css 的 .about__decor 同一個判準）。 */
/* 🔴 R9-11（PM 2026-08-19）：「有插圖地方用筆電大小瀏覽時，會被視窗切掉一半。」
   實測四張都一樣：1920 離視窗 204.5–212.5px，**1440 全部落到 0 或負數**（被裁）。
   **根因與 R9-10 的粉色方塊相同**：固定的 `left`／`right` 負值 ＋ `.wrap` 的留白會隨視窗變化
   （1920 有 273px、1440 只剩 33px）。→ **四張與 R9-10 用同一套收斂寫法，不各寫一份。**
   🔴 **這四張的定位基準是 `.wrap` 本身**（不是 `.wrap` 的子欄），
      而絕對定位的 `left`／`right` 從 **padding box**（＝ `.wrap` 外緣）起算，
      比內容邊緣多出一份 `--container-pad` → **必須扣回去**，否則會多浮出 20px。
      ⚠️ 這是實測確認的（`offsetParent` 就是 `.wrap`），不是推的——見 CLAUDE.md 9.22。
   ✅ 式子在 1400px 以下會變成**負數（往內縮）**，那是刻意的：讓插圖停在容器的
      **內容**邊緣而不是外緣，窄螢幕才不會貼死視窗。 */
.origin__decor {
  position: absolute;
  left: calc(min(var(--sp-12), var(--decor-bleed) - var(--container-pad)) * -1);
  /* 🔴 R15-01（PM 2026-08-30：「會和文字太接近，要往下一點距離」）：`100%` → 再加 `--sp-6`。
     **實測（版面穩定後，逐行 `Range`）**：改前 **+3.9px**、改後 **+27.9px**（1025／1200／1280／1350 同值）。
     1440 以上原本就有 +34.2，加了之後 +58.2，**那一段本來就不緊，加大不會有副作用**。
     ⚠️ **用 `--sp-6` 不寫死 24px**：這一段距離的性質是「版面間距」，要跟著間距刻度走。
     🔴 **不要改 `top` 的基準（`100%`）去湊距離**——`100%` 表達的是「貼著 `.wrap` 下緣」，
        那是它的定位語意；要多少空隙就在後面加，兩件事不要混在一個數字裡。 */
  top: calc(100% + var(--sp-6));
  width: 6.25rem;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* ==========================================================================
   ② 家訓橫幅．淡米色方塊、左上大引號、置中、右下粉色筆刷
   🔴 **全頁唯一沒有 eyebrow 的一區，這是刻意的**（打斷節奏＋承上啟下）。
      不要「順手統一」把 eyebrow 加回去。
   ⚠️ 這一區是**方塊**不是滿版底色——設計稿左右兩側仍看得到頁面底色。
      因此不可用 `.section--alt`（那是滿版）。
   ========================================================================== */
.creed__box {
  position: relative;
  padding: var(--sp-16) var(--sp-12) var(--sp-14);
  background-color: var(--bg-alt);
  text-align: center;
  /* 出血的筆刷靠 main 的 overflow-x: clip 裁掉，這裡不可設 overflow: hidden
     ——那會把筆刷連同它超出方塊的部分一起切掉。 */
}

/* 大引號：用 CSS content 產生，不另外做圖。
   ⚠️ 它是裝飾，`content` 產生的文字不進無障礙樹，報讀器不會念到。
   ⚠️ 這個字元會被 `產生-子集字體.py` 掃到（它讀 CSS 的 content: 值），
      所以子集字體會含它——改這裡的字元要重產子集。 */
/* 🔴 R4a（2026-08-17）：放大一階、往上壓在「上一區與米色框」的交界線上。
   ⚠️ `top` 是負值 → 引號的上半部跨出 `.creed__box` 的上緣。
      這行得通是因為 `.creed__box` **刻意沒有 `overflow: hidden`**（見上方註解），
      而 `main` 的 `overflow-x: clip` 只裁水平、不裁垂直。**不要順手加 overflow。**
   ⚠️ 用 `em` 綁在自己的 `font-size` 上，不用 px——放大字級時它自動跟著跨同樣的比例，
      不必兩個值一起手調（也就不會有人只改一個）。

   🔴 **R5a（2026-08-18 PM：「只要出去一半就好」）：`-0.42em` → `-0.22em`。**
   **這個值是量出來的，不是 `font-size ÷ 2`**——引號的墨跡只佔 em box 的一小段：
   120px 時**墨跡高只有 35px**（不是 120），且位置偏上（在框內 9 ～ 44.1px 之間）。
   用 canvas `measureText()` 的 `actualBoundingBox*` ＋ `fontBoundingBox*` 換算出
   「墨跡中心在框內 26.6px」→ 要讓墨跡中心正好落在框的上緣，`top` 就是 **-26.6px**。
   ⚠️ **手機 80px 算出來是 -17.5px**，兩者換成 em 都是 **-0.22em**（-26.4／-17.6，差 0.2px 內）
      → **一個值就同時服務兩組**，不必再各寫一個。
   🔴 **換字體或換字元就要重量**——不同字體的引號墨跡比例不一樣，這個值不可沿用到別處。 */
.creed__box::before {
  content: "“";
  position: absolute;
  left: var(--sp-8);
  top: -0.22em;            /* 墨跡中心落在框的上緣＝剛好露出一半 */
  font-size: 7.5rem;       /* R4a：5rem → 7.5rem */
  line-height: 1;
  color: var(--c-coral);   /* 純圖形、不承載文字，珊瑚粉可用 */
  pointer-events: none;
}

.creed__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
/* 說明兩行：比一般內文大一階、行距更寬，讓這幾句話「站得住」 */
.creed__text {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--text-main);   /* on 奶油 5.23:1 ✅（--text-on-warm 是給珊瑚粉底用的，不是這裡） */
}
.creed__text + .creed__text { margin-top: var(--sp-2); }

/* 🔴 R4b（2026-08-17）：筆刷的垂直中心要落在 `section.creed` 與 `section.work` 的交界線上。
   **交界線不是米色框的下緣**——框下面還有 section 的下 padding，
   舊寫法 `bottom: -sp-16` 是相對米色框算的，筆刷因此停在那段 padding 裡（PM 截圖 35）。

   🔴 **改成相對 `section.creed` 定位，不要把負值加大到剛好跨線**：
      加大負值等於把「section padding」這個會變的數字寫死進位移量，
      `--sp-*` 一改、或手機的 padding 覆寫一生效，它就錯位，**而且不會報錯，只會看起來怪**。
      貼著 section 的邊則是語意直接、換斷點自動成立。
   **做法**：定位基準是 `.wrap`（水平要對齊容器邊緣，不是視窗邊緣），
   垂直則用 `calc(var(--section-pad) * -1)` 走到 section 的下緣——
   🔴 **`--section-pad` 正是製造那段間距的那個 token**，所以這不是「推算出來的數字」：
      間距改了它自動跟著改，斷點覆寫也自動成立。**不要換成算好的 px。**
   ⚠️ 圖必須放在 `.creed__box` **外面**（見 about.html 的註解）——
      那個框自己是 relative（給大引號用），放裡面定位基準就會變成它。

   ⚠️ 跨線之後下半塊會壓在 `section--alt` 的粉米色底上——
      `aboutus-02.png` 是透明背景 png，會自然透出 ✅。
   🔴 **不可為它填任何背景色**：同一支筆刷跨兩種底色，填死任一色都會在另一邊錯。 */
.creed .wrap { position: relative; }
.creed__decor {
  position: absolute;
  /* R9-11：收斂寫法見 `.origin__decor` 上方那段（四張同一套） */
  right: calc(min(var(--sp-12), var(--decor-bleed) - var(--container-pad)) * -1);
  bottom: calc(var(--section-pad) * -1);   /* 走到 section 下緣 */
  /* 🔴 R5b（2026-08-18 PM：「筆刷位置要再往下一點」）：50% → 54.3%。
     **原因不是「幾何中心沒對準」——實測幾何中心早就精準落在交界線（差 0px）。**
     真正的原因是**墨跡的重量分布**：`aboutus-02.png` 有 **62.2% 的墨量集中在上半部**，
     用 alpha 加權重心量出來，**視覺中心比畫布中心高 14.2px（＝畫布高的 4.3%）**。
     → 往下多推 4.3%（也是自己高度的百分比），**墨跡的視覺中心**才真的落在交界線上。
     ⚠️ 一開始的假設是「bbox 中心 ≠ 畫布中心」，**實測後推翻了**：bbox 中心只差 3.5px（1.1%）。
        **是「墨量重心」不是「墨跡邊界」——邊界只看得到範圍，看不到重量往哪邊偏。**
     🔴 換圖就要重量（`getchannel('A')` 逐列加總算重心），這個 4.3% 綁在這一張圖上。 */
  transform: translateY(54.3%);
  width: 13.75rem;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   ③ 我們在做的事．三項「左照片、右編號＋標題＋內文」
   ⚠️ 這三段與首頁 ③ 的三卡是**同一組內容的長短版**（首頁濃縮、這裡完整）。
      標題必須兩邊一致，否則讀者會以為是不同的三件事。
   ========================================================================== */
/* 🔴 R15-02（PM 2026-08-30）：**`.work__leaf` 整張移除**（連同 `about.html` 的 `<img>`）。
   **PM 原話**：「葉子會壓到創辦人的話背景照片上，就乾脆把葉子隱藏吧。」
   ⚠️ **R14-01 才剛把它改成跨過交界線**（`translateY(25%)` ＋ `z-index: 1`），
      **那一項到這裡等於被推翻**——不是白做：正因為做了才看得出「跨線」這個方向本身不對，
      葉子是細線稿，下半截落在深色照片上讀不出來，加陰影或描邊又會變成另一種東西。
      **要看當時的做法與實測數字：`git show a10258b -- about.css`。**
   ✅ **`.work .wrap` 的 `position: relative` 一併移除**——實測 `.work .wrap` 內已無任何
      絕對定位的子元素（葉子是最後一個），留著就是一句沒有理由的宣告，
      而它的舊註解正好寫著「它還在用」，**留著會變成一句錯的保證**（CLAUDE.md 9.21）。
   ⚠️ `assets/img/aboutus-03.png` 沒有刪（已購授權素材，其他地方日後可能會用）。
      打包腳本的「沒有多餘檔案」只掃 md／sh／py／docx，不會因為它沒被引用而紅燈。 */


.work__list {
  margin-top: var(--sp-12);
  display: grid;
  gap: var(--sp-12);
}
.work__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
/* ⚠️ 這裡是 2:1 不是照片原始的 3:2——設計稿的橫向圖就是這個扁比例（實測約 2.2:1），
   而且 3:2 會讓圖高出右欄文字一大截、每一項下面空一塊。 */
.work__media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* 編號：小字、在標題上方。
   🔴 用莓紅不用設計稿的珊瑚粉——見檔頭第 ③ 條。 */
.work__no {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--text-eyebrow);
}
.work__title {
  margin-top: var(--sp-3);
  /* ⚠️ 走 `--fs-lead`（22）不是 `--fs-h3`（40）——h3 只比區塊主標的 h2（45）小一階，
     兩個標題會看起來一樣大、階層消失。全站的項目／卡片標題都是這個級距
     （首頁三卡 `.service-card__title`、家庭樹卡 `.branch-card__label`）。 */
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.work__body {
  margin-top: var(--sp-5);
  line-height: var(--lh-prose);
  color: var(--text-main);   /* on 奶油 5.23:1 ✅ */
}

/* ==========================================================================
   ④ 創辦人的話．照片底＋深色遮罩＋視差、白色卡片、右下親筆簽名
   🔴 R4d（2026-08-17 PM）：底色從米色改成照片。**改的是區塊背景，不是卡片。**
      卡片寬度完全不動（`.prose` 的 720px）——PM 一度想要全寬，實測一行 73 字太長，
      他自己改了設計改成「照片底＋深色遮罩」，讓左右兩邊不空。**全寬那一版作廢。**
   ========================================================================== */
.letter {
  position: relative;
  background-image: url("../img/2273434843.jpg");
  background-position: center;
  /* `background-size: cover` ／ `no-repeat` ／ `attachment` 由 `.bg-parallax` 提供
     （style.css §11.22）——兩個區塊共用同一段視差邏輯，不在這裡再寫一份。 */
}

/* 深色遮罩。🔴 濃度是算出來的，不是抄內頁 hero 的：
   由「最壞情況＝底色純白」回推，奶油白小字 4.5:1 需 alpha ≥ 0.62，取 0.72（6.35:1）。
   ⚠️ 這張圖實測最亮處亮度 0.954（逆光的太陽光斑），**設計稿上看起來暗是遮罩造成的**。
   ⚠️ 平的、不是漸層——理由見 style.css 的 `--overlay-photo` 註解（fixed 會改變裁切）。 */
.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-photo);
  pointer-events: none;
}
.letter > .wrap { position: relative; z-index: 1; }

/* 深底上的文字一律奶油白。
   🔴 eyebrow 不可留莓紅——與 `.page-head` 是同一條規則（style.css §11.7c）：
      莓紅壓在照片遮罩上只有 1.13–1.50，完全讀不到。層次改由字級與字距撐。 */
.letter .eyebrow,
.letter .section-lead { color: var(--text-inverse); }
.letter .section-title { color: var(--c-white); }

/* 左下筆刷（R4c 搬過來的 aboutus-04）。
   ⚠️ 與 R4b 的筆刷用**同一套做法**：貼著 section 的邊、往下推自己的一半跨過交界線，
      不要改成「算出來的負值」——那個值綁著 section padding，一改就錯位且不報錯。 */
.letter__brush {
  position: absolute;
  /* R9-11：收斂寫法見 `.origin__decor` 上方那段（四張同一套） */
  left: calc(min(var(--sp-12), var(--decor-bleed) - var(--container-pad)) * -1);
  bottom: calc(var(--section-pad) * -1);   /* 同 R4b：走到 section 下緣 */
  /* ⚠️ **位置維持 50%，PM 2026-08-18 確認「看起來可以」，只放大尺寸。**
     `aboutus-04.png` 的墨量重心只比畫布中心低 2.4%（與 `aboutus-02` 的 −4.3% 相反），
     所以它的視覺中心本來就略低於交界線——那正是 PM 覺得順眼的狀態，不要「順手校正」。
     ✅ **放大不會破壞它**：`translateY` 是自己高度的百分比，**相對關係不變**；
        絕對偏移只從 2.8px 變 3.8px（180→240px），實測差 1px，肉眼無感。 */
  transform: translateY(50%);
  width: 15rem;                            /* R5b：11.25rem(180px) → 15rem(240px)，PM 說偏小 */
  height: auto;
  z-index: 2;          /* 要壓在遮罩之上，否則會被 ::before 蓋掉 */
  pointer-events: none;
}

/* 🔴 R5c（2026-08-18 PM：「創辦人的話可以加寬一點，否則高度太高，一個視窗看不完」）：
   **720px → 960px**（`.prose` 的預設是 720）。
   ⚠️ **覆寫在這裡，不可改 `.prose` 本身**——那是共用元件，消息內頁與隱私權政策都在用。
   ✅ **這是 PM 指定的例外，不是推翻 720 的通則**：
      720px→一行 35 字／**960px→約 48 字**／曾否決的 1400px→73 字（舒適區 30–36）。
      48 字略高於舒適區上緣，是「換高度」換來的，PM 知情。
   🔴 `CLAUDE.md` 6.2 的 `.prose` 那一列已同步註記這個例外——
      那裡原本寫「720px 上限沒有例外」，不更新的話下一個人會照它把這裡改回去。 */
.letter__card {
  max-width: 60rem;        /* 960px */
  margin-top: var(--sp-12);
  padding: var(--sp-12) var(--sp-10);
  background-color: var(--bg-card);
  border-left: 4px solid var(--c-coral);
  box-shadow: var(--shadow-sm);
}

.letter__sign {
  margin-top: var(--sp-10);
  text-align: right;
}
/* 親筆簽名圖（R4d，客戶 2026-08-17 提供）。
   🔴 **要設 `max-width`，不可用 `width: 100%`**：原圖只有 234px 寬，
      放大顯示就是一團模糊，而它在 `.prose` 的 720px 卡片裡會被拉大三倍。
   ⚠️ `.letter__sign` 是 `text-align: right`，inline-block 會自己靠右，不必再定位。 */
.letter__signature {
  display: inline-block;
  /* 🔴 PM 2026-08-18：「簽名改小一點點就好」——234px（＝原圖 1:1）→ 190px。
     ⚠️ 用 px 不用 rem 是刻意的：它是圖片不是文字，不該跟著字級放大按鈕縮放。
     ⚠️ 上限仍是 234px（原圖寬），超過就模糊。 */
  width: 190px;
  max-width: 100%;
  height: auto;
}
.letter__date {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.letter__name {
  margin-top: var(--sp-1);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
/* `.prose > * + *` 會給簽名區 24px 的段距，這裡的 margin-top 已經接手，
   兩個都吃會多出一段——明寫讓 .prose 的那條讓位。 */
.prose > .letter__sign { margin-top: var(--sp-10); }
.letter__sign > * + * { margin-top: 0; }

/* ==========================================================================
   ⑤ 聯絡我們．左組織資訊、右聯絡表單
   🔴 錨點 #contact：日後拿到完整聯絡資訊，只要在導覽列加一項指向它，
      頁尾與其他頁面都不用改。
   🔴 表單的設計與欄位完全不動（PM 2026-08-17 明示「直接沿用」）。
   ========================================================================== */
.contact .wrap { position: relative; }

.contact__grid {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.org__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}
.org__row:first-child { padding-top: 0; }
/* 最後一列不畫線：設計稿的分隔線是「列與列之間」，收尾那一條會像斷掉的表格 */
.org__row:last-child { border-bottom: 0; }

.org__label {
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.org__value {
  line-height: var(--lh-prose);
  color: var(--text-main);
}
.org__line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.org__line + .org__line { margin-top: var(--sp-2); }
.org__line i,
.org__line svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-berry);
}
.org__line a {
  color: var(--text-heading);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 表單在這一區不置中、也不限寬 480px——它與左欄並排，寬度由 grid 決定 */
.contact__form { max-width: none; margin-inline: 0; }

/* 🔴 R6h（2026-08-18）：姓名與聯絡電話同一排。
   **只在這一頁加一層 grid，不動 `.form`／`.field` 共用元件**——
   那兩個是 8 張表單共用的（`style.css` §14.1），改它們會波及登入／註冊／我的帳號等頁面。
   ✅ `.form` 本身是 `flex-direction: column` ＋ `gap`，所以這一列在它眼中就是一個子項，
      **間距自動沿用那個 gap**，不必在這裡再補 margin。 */
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* ==========================================================================
   響應式．斷點 1024 ／ 899 ／ 768 ／ 599
   --------------------------------------------------------------------------
   🔴 **R10-06／07（PM 2026-08-24）：單欄與裝飾隱藏從 899 上移到 1024。**
      原本 899 → 1024 仍是左右分欄，長文欄被擠成 448.5px；實測 1024 時
      左欄高 989.6px、右欄兩張照片只有 528.6px，**兩欄落差 461px**，PM 回報「顯得擁擠」。

   🔴 **為什麼寫 `max-width: 1024px` 而不是全站慣用的 1023**：
      媒體查詢比的是 `window.innerWidth`（**含捲軸**），不是 `documentElement.clientWidth`。
      實測（`_量測台` iframe 寬 768）：`innerWidth = 768`、`clientWidth = 753`，
      而 `@media (min-width: 768px)` **確實有生效** → 媒體查詢看到的就是 768。
      因此 PM 口中的「1024px」在媒體查詢眼中也是 1024，**寫 1023 會剛好不套用**，
      而畫面上看起來與「根本沒改」一模一樣（不會有任何訊號）。

   ⚠️ **引號那兩條刻意留在 899**——它們是「大引號要用的空間」，與分欄無關，
      上移會連帶改到 900–1024 的米色框內距，那不是 PM 要的。
   ========================================================================== */
@media (max-width: 1024px) {
  /* R10-06：文字在上、圖在下 */
  .origin__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  /* ⚠️ **`.origin__media` 必須跟著一起上移，不可只搬 `.origin__grid`**：
     單欄之後照片欄的容器變成整個 `.wrap`（1024 時 961px），
     兩張 16/9 直排會各自高到 540px、光照片就 1100px —— 比原本的分欄更擠。
     並排後實測 1024：**468.5×263.5，`aspect-ratio` 仍是 1.778**（沒有被拉長或壓扁）。 */
  .origin__media { grid-template-columns: 1fr 1fr; }

  .work__item { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contact__grid { grid-template-columns: 1fr; gap: var(--sp-10); }

  /* 🔴 **R10-07：四張裝飾圖在這個寬度會壓到文字**（原本這條也在 899，1024 完全沒保護）。
     實測用 `Range.getClientRects()` **逐行**量，不是元素框——
     元素框在置中／短尾行的段落上會誤判（CLAUDE.md 9.24）：
     同一份頁面用元素框量，1440 的 `.work__leaf` 報「疊 10.7px」，改逐行量是「距 23.5px」。
     逐行量的實測值：**1024 時 `.work__leaf` 真的疊進第三段內文 43.5px**、
     `.origin__decor` 距內文只剩 3.4px。 */
  .origin__decor,
  .creed__decor,
  .letter__brush { display: none; }   /* R15-02：`.work__leaf` 已整張移除，不必再列 */
}

@media (max-width: 899px) {
  /* 🔴 上內距 48 → 64：R4a 放大後的引號往上跨出 0.42em，
     **下半截會落回框內**，48px 時它的下緣與標題文字只差 1.6px，實測在 ≤599px 真的疊到。
     ⚠️ 這裡加的是「引號要用的空間」，不是視覺留白微調——
        改引號字級時要回頭確認這個值還夠（引號下半截約佔 0.58em）。 */
  .creed__box { padding: var(--sp-16) var(--sp-8) var(--sp-10); }
  /* 🔴 R4a／R5a：手機這一組也要跨出框外，否則手機上引號停在框內、與桌機不一致。
     `top` 用同一個 em 值——實測手機 80px 該用 -17.5px、桌機 120px 該用 -26.6px，
     換算成 em 都是 -0.22，**所以兩邊共用一個值是量出來的結果，不是圖方便**。 */
  .creed__box::before { left: var(--sp-5); top: -0.22em; font-size: 5rem; }
}

/* ==========================================================================
   🔴 R10-08（PM 2026-08-24）：768px 時「理念區與上方照片的間距減半」＋ 內文字級對齊一般內文
   --------------------------------------------------------------------------
   ⚠️ **斷點是 768 不是 767**：`--section-pad` 由 `style.css` 的 `@media (min-width: 768px)`
      切換（手機 64 / 桌機 96），**768 本身落在「96」那一側**，
      而 `--fs-lead` 的手機覆寫也在 767 以下才生效（768 時仍是桌機的 22px）。
      → PM 在 768 看到的正是「96+96 的間距 ＋ 22px 的內文」，斷點寫 767 兩件事都改不到。

   ① **間距＝ origin 的下內距 ＋ creed 的上內距**（各 96 ＝ 合計 192，實測 `gapImgCreed` 192）。
      🔴 **必須兩邊各減半才是「減半」**：只動一邊是 96+48=144（＝ ¾），不是一半。
      ⚠️ **不是 `blockquote` 的 margin**——CLAUDE.md 9.23 那次已把 `blockquote` 的預設
         margin reset 成 0，實測 `.creed__box` 上下 margin 都是 0，間距全部來自兩個 section 的
         padding。**先量清楚是誰提供的，才不會對著錯的東西減半。**
      🔴 **用 `--section-pad` 除以 2，不寫 48px**：那個 token 正是製造這段間距的來源，
         日後 token 一改這裡自動跟著改（同 R4b 筆刷的判準）。
      ⚠️ 只動 `.creed` 的 **上**內距，下內距不碰——`.creed__decor` 是靠
         `bottom: calc(var(--section-pad) * -1)` 貼在 section 下緣的。

   ② **`.creed__text` 由 `--fs-lead` 改成 `--fs-body`。**
      🔴 **覆寫在這個 media query 裡，不改上面的全域宣告**——桌機的大小 PM 沒有說要改。
      實測：1440／1280／1200／1024 的 computed `font-size` 改前改後都是 **22px（完全相同）**；
      768 由 22px → 18px、375 由 19px → 18px。
   ========================================================================== */
@media (max-width: 768px) {
  .origin { padding-bottom: calc(var(--section-pad) / 2); }
  .creed  { padding-top:    calc(var(--section-pad) / 2); }

  .creed__text { font-size: var(--fs-body); }
}

@media (max-width: 599px) {
  .origin__media { grid-template-columns: 1fr; }
  /* 🔴 R6h：兩個欄位並排在 320px 會擠到不能點（點擊區 ≥44×44 是硬需求），一定要塌回單欄。 */
  .contact__form-row { grid-template-columns: 1fr; }
  .letter__card { padding: var(--sp-8) var(--sp-6); }
  .org__row { grid-template-columns: 1fr; gap: var(--sp-2); }
}