@charset "UTF-8";
/* ==========================================================================
   聖堤亞冰淇淋 SENTIA ICE CREAM — 全站樣式
   設計方向：南洋熱帶為主調，大量留白、克制的裝飾，維持清爽而精緻。
   色票取樣自品牌主視覺 hero.jpg（叢林綠、芒果黃、椰奶白）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 設計變數（Design Tokens）
   -------------------------------------------------------------------------- */
:root {
  /* 主色：叢林綠系 —— 深色底才能承載品牌白字 logo */
  --jungle-deep: #0F2E23;
  --jungle: #1B4A3A;
  --jungle-soft: #2E6B54;

  /* 輔色：芒果黃系 —— 只用於重點與 CTA，避免大面積使用 */
  --mango: #E0952C;
  --mango-light: #F4C578;
  --mango-wash: #FCF3E2;

  /* 中性色：椰奶白系 */
  --coconut: #FCFAF5;
  --paper: #FFFFFF;
  --sand: #F4EFE4;

  /* 文字 */
  --ink: #22302A;
  --ink-soft: #5D6B64;
  --ink-faint: #8C978F;
  --on-dark: #F6F2E9;
  --on-dark-soft: rgba(246, 242, 233, 0.72);

  /* 線條與陰影 */
  --line: rgba(27, 74, 58, 0.12);
  --line-strong: rgba(27, 74, 58, 0.22);
  --shadow-sm: 0 1px 3px rgba(15, 46, 35, 0.06), 0 4px 12px rgba(15, 46, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 46, 35, 0.08), 0 16px 32px rgba(15, 46, 35, 0.06);
  --shadow-lg: 0 12px 28px rgba(15, 46, 35, 0.12), 0 32px 64px rgba(15, 46, 35, 0.08);

  /* 金褐 —— 用於英文斜體副標等細緻處，與芒果黃形成層次
     2026-09-11 13:47 Owen 定案：「金色字 選C」。#B8863F → #8F6528。
     原因是舊值對卡片底 #FBF0DE 的對比只有 2.86，低於 WCAG AA 的 4.5；
     三案打樣：A #B8863F 2.86 ❌／B #765628 5.95 ✅但偏深咖啡／C #8F6528 4.59 ✅。
     ⚠ 這個變數只走「英文斜體小標」四處（section eyebrow、口味卡英文名、
       系列英文名、tagline 英文）。.flavor-detail__rule 的細金線漸層
       （1197／1341 行）仍是 #B8863F —— 那是裝飾線、不是文字，
       沒有對比門檻，同色系並排不衝突。要一起改再說。 */
  --gold: #8F6528;

  /* 分類卡片底色 —— 四大系列各自的柔和色調 */
  /* 2026-09-07 17:01 Nick 定案：「就全部這個顏色，不要再分家族分顏色了」。
     四個系列統一成同一個暖米 #FBF0DE（色值量自 Owen 17:00 傳來的 Gemini 試做圖）。
     原本的四色保留在下面，要恢復分色只要把四行換回來、球圖換回
     _生成圖\球圖\系列色版備份\ 即可：
       tasteful #F5EEE0 / chocolate #E4D3BB / fruits #FDECC6 / sherbet #DEEBE1 */
  --cat-tasteful-bg: #FBF0DE;
  --cat-chocolate-bg: #FBF0DE;
  --cat-fruits-bg: #FBF0DE;
  --cat-sherbet-bg: #FBF0DE;

  /* 白卡方案用的系列細線色：由上面四個底色加深而來，1px 才看得見 */
  --cat-tasteful-line: #C9A96A;
  --cat-chocolate-line: #9A6B43;
  --cat-fruits-line: #E0952C;
  --cat-sherbet-line: #5E9E7C;

  /* 字體 */
  --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft JhengHei", "PingFang TC", sans-serif;
  /* 英文專用的優雅斜體襯線，用於口味英文名與區塊引言 */
  --font-script: "Playfair Display", Georgia, "Times New Roman", serif;

  /* 版面 */
  --wrap: 1120px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-lg: 22px;

  /* 節奏（垂直間距） */
  --space-section: clamp(64px, 10vw, 128px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 錨點跳轉時預留頁首高度，避免目標被固定的頁首蓋住 */
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--coconut);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--jungle-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--mango);
}

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

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 鍵盤操作可見的焦點框 —— 不移除 outline，只換成品牌色 */
:focus-visible {
  outline: 3px solid var(--mango);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 螢幕閱讀器專用文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 跳至主要內容（無障礙） */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--jungle);
  color: var(--on-dark);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  color: var(--on-dark);
}

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

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: var(--space-section);
}

.section--sand {
  background: var(--sand);
}

/* --------------------------------------------------------------------------
   3.1 壓紋葉框（淺色區專用）
   --------------------------------------------------------------------------
   2026-09-22 Owen 傳來一張實拍壓紋紙，並說：
     「淺色底 用金色線條不太適合，可以套用這種」（14:21）
   這正好補上淺色區那一半 —— 金線葉框（.leaf-frame）只在深綠底上成立。

   🔴 為什麼這張做得出來、而 09-18 自己做的壓花做不出來：
      09-18 的做法是「葉形剪影填一個比底色亮一點的單色，濃淡走 opacity」。
      壓紋看起來凹進去靠的是**一側亮、一側暗**，平塗只有一個亮度，
      所以濃了是色塊、淡了是消失，中間沒有東西（Owen 當時：「這部份我看不到圖」）。
      這張是實拍，亮邊暗邊本來就在紙上，不需要 CSS 模擬。
      ⇒ 做法不對的時候調參數是在錯的軸上移動；換素材才換得掉。

   ⚠ 這兩段區塊在 09-21 16:35 被 Owen 撤掉過葉子（「包括淺色部份的葉子也拿掉」）。
      現在放回去的是**不同的東西**：撤掉的是那批做壞的平塗壓花，
      這次是他自己 09-22 傳來、指名要套的實拍壓紋。HTML 那兩處的註解也一併更新了。

   ── 2026-09-22 16:25／16:26 Owen 退回第一版，兩句話改掉整個做法 ──
     「兩側的葉子是右邊要出血，現在這看起來很奇怪，你可以參考頁腳那樣。」
     「越往中間的部份不用漸層遮罩，這種印子的方式不會影響閱讀，
       有必要時，調整一點透明度就好了。」

   第一版錯在兩件事，兩件都已經移到素材端處理，所以這裡的 CSS 反而變簡單了：

   1. 沒出血。量出來他那張紙的左葉叢 x 39～280、右葉叢 x 743～981，
      兩叢**都**離紙緣還有 39／42px 空白（實體紙張自己的留白）。
      照原樣貼上來，葉子就停在離螢幕邊緣一段距離的地方。
      ⇒ 裁切時從葉叢外緣再往內切 12%，切口因此落在視窗邊緣＝畫框上。

   2. 靠羽化蓋住底色不合。他那張紙在葉叢處平均亮度 215.6，--sand 是 239.3，
      差 24 階；漸層一拿掉，邊帶立刻變成一塊看得見的暗色板。
      ⇒ 改成只取壓痕不取紙：輸出 `--sand + (原像素 − 平坦紙面) × 強度`。
         壓痕以外差值為 0 ⇒ 顏色正好等於 --sand ⇒ 四邊都不必羽化，切口自動隱形。
         實測內側切口與純 --sand 只差 1～2 階（242,237,226 vs 244,239,228）。

   邊帶由 _腳本\_切壓紋邊帶.ps1 產生（出血、去紙底、強度都在那支裡）。
   要壓痕再淡一點就跑 `-強度 0.7`，不要回頭在這裡加遮罩。
   Owen 補上高解析原檔後重跑那支腳本即可，CSS 不用動 ——
   葉叢位置是腳本自己量出來的，沒有寫死任何像素座標。
   -------------------------------------------------------------------------- */
.section--paper-frame {
  position: relative;
  /* 🔴 底色寫 background-color，不可以用 background: 簡寫 ——
     簡寫會把下面的 background-image 一起重設成 none，而且不報錯
     （09-07 hover 金邊踩過同一個坑，查法是看 computed 的 backgroundImage 是不是 none）。 */
  background-color: var(--sand);
  /* 第三層是中段砂紋（2026-09-22 17:02 Owen：「中間部份沒有砂紋」）。
     兩側是照片、紙的顆粒在裡面；中間原本是純色 var(--sand)，完全平的 ——
     亮度對上了但質地沒對上，交界是「有顆粒→沒顆粒」的一整塊面。
     這一條同樣用 `auto 100%`，所以顆粒的顯示比例永遠跟兩側一致，
     不管區塊多高都不用換算。橫向 repeat-x，素材首尾已做交叉淡化可以無縫接。
     疊在最後 ＝ 最底層，兩條葉帶不透明，會蓋在它上面。 */
  background-image: url("../img/paper-emboss-left.jpg"),
                    url("../img/paper-emboss-right.jpg"),
                    url("../img/paper-grain-mid.jpg");
  background-repeat: no-repeat, no-repeat, repeat-x;
  /* 橫向：出血已經做進素材的裁切，所以直接貼齊左右兩邊。
     縱向：`auto 100%` 讓帶子撐滿區塊高度 —— 這是照 Owen 指的頁尾做法
     （.site-footer 用的也是 `background-size: auto 100%`）。
     這樣上下切口正好落在區塊的上下邊界，那裡是 --sand 與相鄰區塊換色的地方，
     ＝畫框。09-08 的規則：直邊只有貼齊畫框才成立。

     🔴 不要再用「留白寬度」去算 background-size 了。第一版那樣寫，
        寬度一超過「區塊高 × 素材比例」帶子就比區塊高，上下會被切掉；
        為此加的 420px 上限又讓它在寬螢幕停止跟著長。
        改成 auto 100% 之後高度恆等於區塊高，那整組問題不存在，
        寬度由素材比例決定（目前 0.546，即 237x434）。 */
  background-position: left top, right top, left top;
  background-size: auto 100%, auto 100%, auto 100%;
}

/* 窄視窗不顯示：帶寬 = 區塊高 × 0.546，而窄螢幕的區塊會因為文字換行變得很高，
   帶子反而比整個螢幕還寬，只看得到一小塊局部 —— 那不是裝飾，是雜訊。
   門檻沿用金線葉框的 1320px，兩種裝飾一起收，不會出現只剩一半的中間狀態。 */
@media (max-width: 1320px) {
  .section--paper-frame {
    /* 收掉的是兩條葉帶，砂紋留著 —— 它沒有「只看得到一小塊局部」的問題
       （紙的顆粒沒有構圖，放大縮小都還是紙），而且收掉的話窄螢幕會變回純色平面，
       正是 Owen 說的那個問題。 */
    background-image: url("../img/paper-grain-mid.jpg");
    background-repeat: repeat-x;
    background-position: left top;
    background-size: auto 100%;
  }
}

.section--paper {
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   4. 區塊標題
   -------------------------------------------------------------------------- */
.section-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-head__eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-head__title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: var(--jungle-deep);
}

.section-head__lead {
  max-width: 46em;
  margin: 18px auto 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* 葉片分隔飾線 —— 南洋意象，但僅一筆，維持克制 */
.leaf-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px auto 0;
  max-width: 220px;
  color: var(--mango-light);
}

.leaf-rule::before,
.leaf-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

.leaf-rule svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   5. 按鈕
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease,
    color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--mango);
  color: #3A2408;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--mango-light);
  color: #3A2408;
  box-shadow: var(--shadow-md);
}

.btn--ghost-light {
  border-color: rgba(246, 242, 233, 0.45);
  color: var(--on-dark);
}

.btn--ghost-light:hover {
  background: rgba(246, 242, 233, 0.12);
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--jungle);
}

.btn--ghost:hover {
  border-color: var(--jungle);
  background: var(--jungle);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   6. 頁首導覽
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 底色一律寫 background-color，不用 shorthand —— 見 CLAUDE.md 坑表 */
  background-color: var(--jungle-deep);
  /* 內距在捲動後收窄，讓閱讀區域變大 */
  transition: padding 0.25s ease, box-shadow 0.25s ease,
              background-color 0.25s ease, backdrop-filter 0.25s ease;
  padding-block: 18px;
}

/* 捲動後：92% 不透明 ＋ 背景模糊，讓頁首浮在內容上方而不是壓著它。
   2026-09-21 依 Owen 轉來的建議加的（原文給了「陰影」或「毛玻璃」兩個做法，
   陰影本來就有，這裡補的是毛玻璃那一半）。
   ⚠ 只在 is-scrolled 生效：停在最頂端時頁首要與主視覺深色圖融成一體，
   那是原本就對的效果，不要動它。
   92% 疊在奶白 #F4EFE4 上實際呈色約 #213D32，白字對比仍遠高於 WCAG 需求。
   瀏覽器不支援 backdrop-filter 時只會少掉模糊，底色照樣是 92% 深綠，不會壞。 */
.site-header.is-scrolled {
  padding-block: 10px;
  background-color: rgba(15, 46, 35, 0.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(15, 46, 35, 0.28);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: block;
  flex: none;
}

.site-logo img {
  /* logo 為透明底白字，僅能置於深色背景。
     2026-09-21 改用 logo-clean.png（284x71，比例 4.000），
     原 logo.png 是 600x113、比例 5.310 —— 寬度數值換算成「高度維持不變」：
     260px→196px、180px→136px、26vw→19.6vw。直接沿用舊數值會讓頁首長高 16px。 */
  width: clamp(136px, 19.6vw, 196px);
  transition: width 0.25s ease;
}

.site-header.is-scrolled .site-logo img {
  width: clamp(120px, 16.6vw, 166px);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  display: block;
  position: relative;
  /* 右內距扣掉一個字距：letter-spacing 會在「最後一個字後面」也加空隙，
     左右寫一樣的 20px 時文字會看起來偏左 0.2em（約 3px）。
     2026-09-21 把字距從 0.16em 拉到 0.2em 時一併修掉。 */
  padding: 10px calc(20px - 0.2em) 10px 20px;
  color: var(--on-dark-soft);
  font-size: 0.98rem;
  letter-spacing: 0.2em;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav a:hover {
  color: var(--on-dark);
  background: rgba(246, 242, 233, 0.08);
}

/* 目前所在頁面：芒果黃底線 */
.site-nav a[aria-current="page"] {
  color: var(--mango-light);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 20px;
  /* 與上面的右內距一致，底線才會停在文字真正結束的地方 */
  right: calc(20px - 0.2em);
  bottom: 4px;
  height: 2px;
  background: var(--mango);
  border-radius: 2px;
}

/* 手機版漢堡鈕 —— 桌機隱藏 */
.nav-toggle {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(246, 242, 233, 0.3);
  border-radius: 12px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. 首頁 Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(78vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--jungle-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* 雙層遮罩：左側加深以承載文字，整體壓暗提升白字對比 */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(15, 46, 35, 0.92) 0%,
      rgba(15, 46, 35, 0.72) 42%,
      rgba(15, 46, 35, 0.34) 72%,
      rgba(15, 46, 35, 0.5) 100%
    ),
    linear-gradient(to top, rgba(15, 46, 35, 0.55), transparent 45%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 12vw, 128px);
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.2rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--mango-light);
  margin-bottom: 20px;
}

.hero__title {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  color: var(--on-dark);
  line-height: 1.3;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

.hero__title em {
  font-style: normal;
  color: var(--mango-light);
}

.hero__lead {
  margin-top: 24px;
  max-width: 30em;
  color: var(--on-dark-soft);
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  line-height: 2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* --------------------------------------------------------------------------
   8. 品牌重點三欄
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

/* 卡片化：原本只有圖示配文字浮在白底上，左右留白過多顯得空曠。
   加上底色與圓角讓三個重點各自成塊，畫面才站得住 */
.pillar {
  text-align: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--sand);
  border: 1px solid var(--line);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


.pillar__icon {
  /* 2026-09-24 17:36 Owen：「白圓不要放大　看看效果會不會比較飽滿」。
     17:26 他先說「三個ICON放大10%」，我做成整顆等比放大（56→62／26→29）；17:34 他補了理由 ——
     「你既然要讓這三個ICON當成一個標示 單獨一行，圖過小的話就會被字搶走，你的ICON看起來比主題字還小」。
     ⇒ 要的不是整顆再大一點，是圖案本身要壓得過標題字。所以白圓退回原本的 56px，
     成長全部給裡面的圖案（26 → 38px，佔白圓 68%）。
     為什麼 38 是上限：三顆圖案的墨水寬度不一樣，最寬的是盾牌（38px 時墨水 28.5x33.3），
     離白圓邊緣只剩 5.5px；推到 42px 只剩 3.1px 就貼邊，白圓會看不出是個圓底。
     （水滴留 7.7px、甜筒留 9.5px —— 盾牌才是決定上限的那一顆，改尺寸前先量它。）
     ⚠ 同語彙的 .promise__icon（口味頁承諾帶 44px／slim 34px）這次沒動，他指名的是首頁。 */
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* 卡片底色是米色，圖示改用白底才浮得出來 */
  background: var(--paper);
  /* 2026-09-30 16:34 Owen 傳參考圖：「讓他內外兩圈，顏色不用參考」。
     白圓當內圈，外面一圈細金線、中間留一道空隙 —— 用 outline 而不是 box-shadow 環：
     outline-offset 的空隙是透明的，底色是什麼就透出什麼，不必另外抄一份 --sand 進來；
     而且 outline 不佔版面，三顆的位置、間距一格都不會動。
     原本的 --shadow-sm 拿掉：陰影會落在內外圈之間的空隙裡，把那道乾淨的間隔弄髒。
     16:39 Owen 補：「一圈粗的一圈細的線條」「你好像沒有粗的線條」—— 第一版只做了一圈細線。
     把參考圖（59px）放大十倍逐欄量：外圈 3px、亮；空隙 1px；內圈 2px、暗 ⇒ **外粗內細**，
     內圈直徑約為外圈的 0.85。對應到這裡：內圈＝白圓自己的 border（細），外圈＝outline（粗）。
     白圓 56 ⇒ 外圈外徑 56 + 2×(2+3) = 66，56/66 ≒ 0.85，跟參考圖同比例。 */
  border: 1.5px solid var(--mango);
  outline: 3px solid var(--mango);
  outline-offset: 2px;
  color: var(--mango);
}

.pillar__icon svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
}

.pillar__title {
  font-size: 1.15rem;
  color: var(--jungle-deep);
  margin-bottom: 10px;
}

.pillar__text {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   9. 品牌故事（圖文並列）
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.story__media {
  position: relative;
  /* 建立 stacking context，讓下方 ::before 的 z-index:-1 停在本元素內，
     而不是沉到 section 背景之後（否則襯底色塊會看不見） */
  z-index: 0;
}

/* 不對稱圓角：右上角大幅收圓，讓方正的場景照多一點柔軟感 */
.story__media img {
  border-radius: 24px 110px 24px 24px;
  box-shadow: var(--shadow-lg);
}

/* 圖片後方的芒果黃色塊，做出層次而不喧賓奪主 */
.story__media::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border-radius: 24px 110px 24px 24px;
  background: var(--mango-wash);
  z-index: -1;
}

/* --------------------------------------------------------------------------
   9-1. 冰淇淋球拼貼（品牌故事區）
   原本這裡用的是首頁最上方那張場景照，同一頁出現兩次。改用現有去背球圖
   組出畫面，不需新素材就能去掉重複感
   -------------------------------------------------------------------------- */
.story__media--collage img {
  /* 覆蓋場景照專用的不對稱圓角與陰影——去背球圖套上去會很怪 */
  border-radius: 0;
  box-shadow: none;
}

.scoop-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(4px, 1.5vw, 16px);
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  /* 沿用場景照的不對稱圓角，維持與其他區塊一致的形狀語彙 */
  border-radius: 24px 110px 24px 24px;
  background: radial-gradient(circle at 50% 42%, var(--paper) 0%, var(--mango-wash) 72%);
  box-shadow: var(--shadow-lg);
}

.scoop-collage__item {
  width: 100%;
  max-width: 210px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 四顆球各自微幅偏移與旋轉，避免排成呆板的九宮格 */
.scoop-collage__item:nth-child(1) { transform: translateY(-6px) rotate(-4deg); }
.scoop-collage__item:nth-child(2) { transform: translateY(10px) rotate(3deg); }
.scoop-collage__item:nth-child(3) { transform: translateY(-10px) rotate(2deg); }
.scoop-collage__item:nth-child(4) { transform: translateY(6px) rotate(-3deg); }

.story__media--collage:hover .scoop-collage__item {
  transform: translateY(0) rotate(0) scale(1.04);
}


/* --------------------------------------------------------------------------
   9-3. 數字帶
   整頁原本一路白／米色，中段缺少視覺落點
   -------------------------------------------------------------------------- */
.stats-band {
  position: relative;
  z-index: 0;                  /* 建立堆疊環境，讓底紋停在本區塊內 */
  background: var(--jungle-deep);
  color: var(--on-dark);
  padding: clamp(44px, 6vw, 72px) 0;
  overflow: hidden;            /* 底紋不外溢到相鄰區塊 */
}

/* 裝飾底紋：Owner 提供的花紋原圖是紫底金線，與品牌的深綠＋金褐衝突。
   這裡不改圖檔，改用濾鏡處理——先去色再上 sepia，紫色就被中和成金褐，
   金線條則保留下來；最後壓到極低透明度，只當質感不搶內容 */
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/pattern-tile.jpg");
  background-size: 340px;
  background-repeat: repeat;
  filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(-6deg);
  opacity: 0.10;
  z-index: -2;                 /* -2 是為了讓葉框（-1）疊在花紋之上，見「13.4b」 */
  pointer-events: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
  text-align: center;
}

/* 用分隔線代替方框，維持整體的輕盈感 */
.stat + .stat {
  border-left: 1px solid rgba(246, 242, 233, 0.16);
}

.stat__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
  color: var(--mango-light);
  margin-bottom: 10px;
}

/* 單位字級縮小，讓數字本身成為視覺主體 */
.stat__unit {
  font-size: 0.42em;
  margin-left: 4px;
  color: var(--on-dark-soft);
}

.stat__label {
  display: block;
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  letter-spacing: 0.04em;
}

.story__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--jungle-deep);
  margin-bottom: 20px;
}

.story__text p + p {
  margin-top: 18px;
}

.story__text {
  color: var(--ink-soft);
}

.story__actions {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   10. 口味卡片
   -------------------------------------------------------------------------- */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}

/* 口味頁：每排固定最多三個（.flavor-section 僅出現於口味頁） */
.flavor-section .flavor-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 34px);
}

.flavor-card {
  position: relative;
  /* 底色由 data-category 指定，未指定時退回白卡 */
  background: var(--paper);
  /* 2px 而不是 1px：Nick 2026-09-07 17:13「可以加粗 2~3 px」。1px 的漸層金邊
     在一般螢幕上只剩一條細線，看不出「金色在流動」。平常就先占 2px（透明），
     hover 只換顏色，內容才不會因為框變寬而跳一下。
     box-sizing 全域是 border-box，所以外框尺寸不受影響。 */
  border: 2px solid transparent;
  border-radius: 26px;
  padding: 28px 22px 32px;
  text-align: center;
  /* 🔴 裝飾葉是 left:-18%／bottom:-7%，設計上就預期超出的部分被卡片裁掉。
     少了這一行，葉子會整叢畫到卡片外的頁面背景上，加上 nth-child 的翻轉與
     旋轉各卡方向不同，看起來就是滿地散落的葉影（Owen 2026-09-04 17:38
     「那樹葉的影子 亂七八糟的」）。動葉子的位置或大小時，這行不能拿掉 */
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* 2026-09-07 17:10 Owen：「還是說我們選取時才加框呢，這樣不會一堆框」。
   Gemini 那張範本的卡片確實有一圈細框（量出來約 #D5C6B3～#C1B29D，1～2px），
   但 15 張全掛常駐框，版面會被框切得很碎。
   ⇒ 平常不畫框，滑過去才浮出來。
   手機沒有 hover，所以手機上永遠看不到這個框 —— 這裡可以接受，因為
   底色統一之後框已經不帶任何資訊（不再標示系列），卡片邊界靠
   卡片底 #FBF0DE 與頁面底 #FCFAF5 的色差就分得出來。 */
/* .is-hover 是給「選取狀態」與截圖驗證用的鉤子：滑鼠 hover 之外，
   要讓某張卡片保持在同樣的外觀時加這個 class 即可（Nick 17:12
   「onMouseOver & selected 時才有框」）。 */
.flavor-card:hover,
.flavor-card.is-hover {
  transform: translateY(-6px);
  /* Owen 17:12「MOUSE OVER 也要在框上面加陰影」——框與陰影一起出現，
     卡片同時上浮 6px，三件事一起做完才有「被拿起來」的感覺 */
  box-shadow: var(--shadow-md);
  /* Nick 17:12：細框改成漸層金邊，而且金色會緩慢流動。
     border 不吃漸層，所以用兩層 background 疊出來：
       第一層（padding-box）＝ 卡片底色，蓋住內側
       第二層（border-box）  ＝ 金色漸層，只有 border 那一圈露出來
     金色 stop 首尾同色，位移一整圈才不會有接縫。 */
  border-color: transparent;
  background-image:
    linear-gradient(var(--cat-tasteful-bg), var(--cat-tasteful-bg)),
    linear-gradient(115deg,
      #C9A96A 0%, #F2DFA8 18%, #A8813C 36%,
      #FFF3D6 54%, #B8912F 72%, #EBD59B 86%, #C9A96A 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  animation: gold-edge-flow 7s linear infinite;
}

/* 金邊緩慢流動。只有被滑過的那一張在動，不會 15 張一起跑 */
@keyframes gold-edge-flow {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 300% 50%; }
}

/* 使用者在系統設定裡要求「減少動態效果」時，金邊就停著不動 —— 顏色還在，只是不流 */
@media (prefers-reduced-motion: reduce) {
  .flavor-card:hover,
  .flavor-card.is-hover { animation: none; }
}

.flavor-card__media {
  position: relative;
  /* 三欄時欄位較寬，讓球圖跟著放大 */
  width: min(206px, 82%);
  margin: 0 auto 18px;
}

/* ============================================================
   卡片裝飾葉（2026-08-28）
   Owen 要求「讓畫面看起來活潑一點」。素材是自己生成後去背、
   壓成品牌綠三階的 PNG（449KB → 62KB），沒有版權問題。

   🔴 兩個上限都是量出來的，不要憑感覺調大：
   ① 葉子壓到「文字」→ 巧克力家族底色最深，超過 10% 說明文字
      對比就低於 4.5（10% 時 4.59、18% 時 4.03）
   ② 葉子壓到「冰淇淋」→ 淺色的球（香草／芒果／檸檬）在葉子
      上方時，主體與背景明暗差從 17 掉到 1，輪廓會糊掉
      ⇒ 所以葉子只放**左下角**，完全避開球的位置（Owen 14:53 也是同一個判斷）
   ============================================================ */
.flavor-card::before {
  content: "";
  position: absolute;
  /* 2026-08-28 傍晚：球圖改成「帶底色的方形圖」之後它是不透明的，
     原本畫在下層的葉子會被那個方形切出一條直線邊（Owen 18:30 回報）。
     解法（Owen 18:34 提出）：把葉子拉到球圖「上層」——因為圖片背景已經
     校成與卡片完全相同的顏色，葉子畫在圖片上看起來跟畫在卡片上一模一樣。
     ⚠️ 唯一限制：不可壓到冰淇淋本體（Owen 18:37「不要壓到冰淇淋的邊緣」）。
     實測（球體＋攤開都算）：72%/-18%/-7% → 0 點。Owen 18:41 選 72（「比較剛好」，再大會變成背景圖案不是點綴），18:42 再降到 **70%**，理由是「**怕其他口味構圖會存在誤差**」——15 支的冰淇淋不會落在完全相同的位置，留 2% 當安全邊際。⚠️ 若日後要放大，位置必須同步往左下外推，否則 76% 就會碰到冰淇淋。 */
  /* 2026-09-07～09-08 的四輪修正（換單片 → 換對片 → 去雜塊 → 貼齊邊緣）
     已被 09-08 13:10 的換素材取代，過程見 _變更記錄.md P-19～P-24。
     只有兩條結論仍然有效：
       ① 直邊只有貼齊畫框才成立 —— 直邊落在卡片中間 ⇒ 讀成「這片葉子破了」；
          同一條直邊壓在卡片邊緣上 ⇒ 讀成「葉子延伸到畫面外」，那是正常的出血。
       ② 換葉子圖必定要重算寬度 —— padding-top 是 width x 比例，
          比例一變，同一個 width 就是不同的高度，葉子會爬到冰淇淋上。 */

  /* 🔴 2026-09-08 13:10 換成 Owen 提供的素材（參考圖\leaf.png 的第 8 片，圓扇棕櫚）。
     起因是 Nick 09:48：「這個葉子看著好像沒有襯到下面的字背景不夠，看起來虛虛的」。
     Owen 12:56 上傳一整張各自獨立去背的葉子，他 13:10 選 8 號。
     8 號的扇面是一整塊實心的圓，剛好落在名字與說明底下，輪廓又單純。

     🔴 這批素材四周都有透明留白，「切邊落在哪」的問題自動消失 ——
     葉子直接往左下超出卡片，overflow: hidden 沿圓角裁掉，切邊天生就是卡片邊緣。
     這才是前面卡三輪那個問題的真正解法：不是把直邊藏起來，
     是換一份不會產生直邊的素材。

     尺寸是回推的，不是喬的（_腳本\_套用葉子.ps1）：
       素材 344x229、比例 0.6657（高/寬）
       球圖方框佔卡片上方 0~54.1%，葉頂限制在 60% 以下 ⇒ 葉高上限 202.8px
       實取葉高 202px、葉寬 303.4px，葉頂落在 60.2%，留 6.1 個百分點
     ⚠️ 想放大就會壓到冰淇淋，那條限制是量出來的（見上方 08-28 那段），不要動。 */
  /* 🔴 2026-10-01 16:26 Owen：換成 Gemini_plant 線稿「左下那組」（龜背芋＋姑婆芋），透明度同前。
     素材由 _腳本\_套用植物線稿.ps1 產生並回推尺寸：397x457、比例 1.1511（直式），
     葉頂仍限制在卡片高 60%（球圖方框底 54.1%），所以葉高 185px、葉寬 161px。
     舊的圓扇棕櫚備份在 _生成圖\葉子\leaf-decor_圓扇棕櫚8號_已停用.png；
     要還原：換回該檔，並把下面四行改回 -19.0% / -6.5% / 95.1% / 63.3%、rotate(20deg)。 */
  /* 🔴 2026-10-01 16:34～16:35 Owen：改用「左上第三個」（天堂鳥／芭蕉類，B 案），
     位置「中間靠左」「更靠左 但不要像第一版那麼靠邊」。
     素材 381x486、比例 1.2756；葉心落在卡寬約 38%（與「中間靠右」B 案 61.75% 左右對稱）。
     _腳本\_檢查_小卡葉子重疊.ps1 -LeafWPct 0.455 -LeafXPct 0.155：15 支重疊 0 px，葉頂 61.0%。
     左下那組（A）留在 _生成圖\葉子\leaf_Gemini植物線稿_左下.png，還原值 -5.0% / -2.5% / 50.4% / 58.0%。 */
  /* 🔴 2026-10-01 16:54～16:56 Owen：「主要怕影響文字閱讀」→ 改「琴葉榕」、線條「暗的金色」(#8F6528)。
     _腳本\_檢查_葉子壓字.ps1 量出「位置」比植物種類影響大：上面那版壓字 1276 px，
     往下沉 12% 後品名、英文 0 px，只剩說明一行擦過（348 px）。
     暗金 op 0.2 對比：說明 5.41／英文金 3.57／品名 10.09（綠色同透明度 4.96／3.27／9.25）。
     素材 373x458、比例 1.2279。15 支重疊 0 px。 */
  /* 17:02 Owen：「琴葉榕可以放大10%嗎」→ 47.2% → 51.9%，left／bottom 不動（往右上長）。
     放大後壓字 520 px（品名 0／英文 55／說明 465），重疊 0 px。 */
  left: 10%;
  bottom: -12%;
  width: 51.9%;
  padding-top: 63.7%;   /* = width x 1.2279（葉子圖比例） */
  background: url("../img/leaf-decor.png") no-repeat left bottom / contain;
  /* 2026-10-01 16:30 Owen：線稿比實心扇葉淡，「太淺了 透明度增加一倍」0.1 → 0.2。
     最壞情況（字正好壓在線上）：說明 5.90 → 4.96、品名 9.25，仍過 4.5；
     英文金字 3.89 → 3.27（原本就未達 4.5，線條細、實際被壓到的筆畫很少）。 */
  opacity: 0.2;
  /* 🔴 2026-09-08 13:20 Owen：「如果葉子順時針旋轉20度，會不會看起來更自然」——會。
     轉過去之後扇面是從左下角「長出來」的，不是平躺在底下。

     ⚠️ transform-origin 一定要維持 center（預設值），這裡寫出來是為了擋掉
     09-07 那個坑：以 left bottom 當原點做變形，會把整個元素平移出卡片外
     （見下方 09-07 17:31 那段）。以自身中心旋轉，佔位範圍不變。

     角度上限是量出來的（_腳本\_葉子旋轉對照.ps1，用最淺的香草當受害者）：
       角度   葉頂    左緣   壓到球圖方框   壓到冰淇淋
        0°   60.1%   27%        0 px          0 px
       20°   53.9%   26%        0 px          0 px   ← 採用
       30°   51.1%   22%       20 px          0 px   ← 開始碰到方框
     注意「葉頂 54.1% 以下」那條舊限制在這裡會誤判 —— 20° 的最高點在卡片
     最左邊（x < 56px），根本不在球圖方框的水平範圍內。要量的是實際重疊
     像素，不是高度。 */
  /* 2026-10-01 16:28 Owen：線稿一樣「傾斜20度 看起來比較自然」。
     直式素材轉 20° 後外框會變高，用 _腳本\_卡片整排預覽.ps1 -LeafRot 20 驗過 15 支都沒壓到冰淇淋。 */
  transform: rotate(20deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 2;
}

/* 巧克力家族底色最深，10% 時說明文字對比是 4.47、差 0.03 沒過標準，
   所以再降一階（8% → 4.66）。其餘三個系列 10% 都在 5.3 以上。 */
/* 2026-10-01：四系列底色已統一成 #FBF0DE，這條的前提（巧克力底較深）不再成立；
   照 Owen「增加一倍」同比例改 0.08 → 0.16，保留差異以便日後回頭比對。 */
.flavor-card[data-category="chocolate"]::before {
  opacity: 0.16;
}

/* 15 張同一叢葉子會很呆，交錯翻轉與微旋轉製造變化 */
/* 🔴 2026-09-07 17:31 Owen：「樹葉影子 不是每一個口味都有出現」——是 bug，不是設定。
   原本這裡是 transform-origin: left bottom，而葉子本身已經 left: -18%（大半在卡片外）。
   以左下角為原點做 scaleX(-1)，等於把整個元素鏡射到原點的左邊 ——
   佔位範圍從 [-18%, 52%] 變成 [-88%, -18%]，**整叢跑到卡片外**，再被
   overflow: hidden 裁光，偶數位置的卡片就完全看不到葉子。
   改成 center bottom：鏡射以自身中心為軸，佔位範圍不變，只有朝向翻過來。 */
/* 🔴 2026-09-07 18:35 鏡射與旋轉全部移除（Nick：「有的被水平翻轉」）。
   當初交錯翻轉是為了讓 15 張不要長得一樣，但那個前提是「整叢葉子」——
   一叢的輪廓是團狀的，翻過來看不太出來。換成單片之後，
   葉子有明確的朝向，翻轉就變成同一頁裡有兩種朝向的同一片葉子，
   讀起來像是排版出錯，不是變化。
   ⚠️ 想再加變化的話，改用「不同葉種」而不是「同一片翻面」。 */

/* 疊放順序：球圖(1) → 葉子(2) → 文字(3)
   葉子壓在球圖上但壓在文字下，所以文字永遠清楚，
   而葉子不會被球圖的方形邊緣切斷。 */
.flavor-card__media {
  z-index: 1;
}

.flavor-card__name,
.flavor-card__en,
.flavor-card__desc {
  position: relative;
  z-index: 3;
}
/* 2026-09-07：移除球圖下方的柔和光暈（原 .flavor-card__media::after，
   rgba(15,46,35,0.14) + blur(9px)）。Owen 選 A：直接拿掉。

   他用取色器抓出來的：卡片底色 245,238,224，球圖那圈量到 238,233,221，
   差 7 階 —— 反推透明度 0.02~0.03，正好是這層陰影擴散到圖外側的殘值。
   在卡片上看起來就是球圖周圍浮出一圈方框；滑鼠移上去因為圖 scale(1.07)
   蓋住外側，框才變淡。

   根本原因是兩層影子：球圖本身自帶影子（_處理球圖.ps1 的 5c 有專門條件
   保護它不被壓平），CSS 這層是多的。移除後只留圖自己的影子。

   🔴 不要再加回來。要調整球圖的影子請改圖，不要用 CSS 疊上去。 */

.flavor-card__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.flavor-card:hover .flavor-card__media img {
  transform: scale(1.07) rotate(-2deg);
}

/* 2026-08-28：Owen 指出卡片上的分類標籤與所屬區塊的大標題完全重複
   （每張卡都排在同名 <h2> 底下，篩選時區塊標題也會跟著卡片一起顯示／隱藏，
   任何狀態下都不會出現「看得到卡片卻看不到分類」的情況）。
   HTML 已移除全部 15 個 <span class="flavor-card__tag">。
   樣式保留備用；若確定不再使用，可連同此段一併刪除。 */.flavor-card__tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  /* 白底標籤浮在各分類底色上，維持足夠對比又不搶戲 */
  background: rgba(255, 255, 255, 0.92);
  color: var(--jungle);
}

.flavor-card__name {
  font-size: 1.3rem;
  color: var(--jungle-deep);
  margin-bottom: 2px;
}

/* 英文副標：優雅斜體襯線，金褐色 */
.flavor-card__en {
  display: block;
  font-family: var(--font-script);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin-bottom: 16px;
}

.flavor-card__desc {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #47554E;
}

/* 四大系列各自的柔和底色 */
/* 2026-09-07 實驗：經典系列改「白卡 ＋ 1px 系列色細線」（Owen 16:26 要求先做經典系列上線體驗）
   ── 為什麼是白：白是無彩度，任何顏色擺上去都最跳。576 種候選底色掃過，沒有一種贏得過白。
   ── 為什麼用細線而不是陰影：陰影會給卡片厚度，看起來像「一塊板子」（Owen 16:21 的經驗）。
      1px 邊線沒有厚度，只負責告訴眼睛卡片到哪裡結束，順便標示系列。
   ── border 本來就宣告成 1px solid transparent，這裡只換顏色，版面尺寸完全不變。
   要還原：background 改回 var(--cat-tasteful-bg)、border-color 改回 transparent，
   並把 assets/img/balls/ 的五張換回 _生成圖/球圖/經典舊版備份/ 裡的檔案。 */
.flavor-card[data-category="tasteful"] {
  background-color: var(--cat-tasteful-bg);
}

.flavor-card[data-category="chocolate"] {
  background-color: var(--cat-chocolate-bg);
}

.flavor-card[data-category="fruits"] {
  background-color: var(--cat-fruits-bg);
}

.flavor-card[data-category="sherbet"] {
  background-color: var(--cat-sherbet-bg);
}

/* 卡片底部的圓形箭頭鈕（參考網頁的元素之一）。
   只掛在「連得出去」的卡片上——沒有去處的卡片放箭頭等於騙點擊。
   掛了就必須多留底部空間（--go），否則會壓到說明文字 */
.flavor-card--go {
  padding-bottom: 74px;
}

.flavor-card__go {
  position: absolute;
  left: 50%;
  bottom: 22px;
  /* transform 之後被 hover 覆寫時，這個 -50% 必須一起帶著，否則會往右偏 */
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--jungle-deep);
  color: var(--coconut);
  box-shadow: var(--shadow-sm);
  transition: background 0.25s ease, transform 0.25s ease;
}

.flavor-card__go svg {
  width: 18px;
  height: 18px;
}

/* 滑過卡片任一處都亮起來，讓整張卡看起來是可點的。
   ⚠ color 必須跟著換：底色由深綠翻成芒果黃之後，原本的白色線條
   對比只剩約 2.3:1，那條 2.2px 的細線遠看等於消失
   （Owner 2026-08-13 16:31 回報「滑鼠指上去十字不見」）。
   改成深綠約 6.5:1，而且「亮底配深色圖示」的反轉本來就更有按下去的感覺。 */
.flavor-card:hover .flavor-card__go,
.flavor-card__go:hover,
.flavor-card__go:focus-visible {
  background: var(--mango);
  color: var(--jungle-deep);
  transform: translateX(-50%) translateY(-2px);
}

/* 窄螢幕的口味卡：只留「球圖 + 中文名 + 按鈕」
   （bro 2026-08-17 13:40 指定：「只要保留口味中文名稱及按鈕就好，保持畫面乾淨」）

   起因：他在手機上看到按鈕壓到說明文字。
   量了一下才發現餘裕本來就很薄——桌機三欄時，說明文字底緣距離按鈕只剩 10px。
   ＋ 按鈕是 position:absolute 貼在卡片底部的，只要卡片一變窄、
   說明文字多換一行，就一定疊上去。加大 padding 只是把問題往後推，
   窄到某個寬度還是會撞。

   隱藏的三項在彈出層裡都看得到，資訊沒有消失。 */
/* 手機版：整張卡片就是點擊區，圓鈕收起（bro 2026-08-17 13:52）

   這一版推翻了同日稍早「收起說明文字」的做法，而且比它好：
   問題的根源是那顆 position:absolute 的圓鈕貼在卡片底部、會壓到文字
   （實測連桌機三欄時，說明文字底緣距離按鈕都只剩 10px，餘裕本來就極薄）。
   既然手機上整張卡都能點，圓鈕就不需要存在——它一消失，底部不必再留空間，
   說明文字自然也不會被擋，**分類標籤、中英文名、說明文字全部保留**。

   點擊行為寫在 site.js 的 initFlavorModal，只在 720px 以下生效。
   原本那顆 <a> 仍留在 DOM 裡（只是視覺隱藏），鍵盤與螢幕閱讀器仍靠它操作。 */
@media (max-width: 720px) {
  /* 手機上點擊區是整張卡片，所以這裡不需要一顆實心圓鈕，
     只需要一個「這張可以點」的視覺提示——右下角一個淡淡的小加號
     （bro 2026-08-17 14:01 要提示、14:07 定案沿用加號）。

     ⚠️ 圖示維持「＋」不改成箭頭，這是 Owner 2026-08-13 的判斷：
     加號代表「就地展開」，箭頭會被讀成「帶你去別的地方」——
     而這顆按鈕實際上是在原地疊出視窗，看完關掉人還停在原處。
     「做得淡而小」跟「換成什麼圖示」是兩件事，這裡只調前者。

     SVG 的 stroke 是 currentColor，所以顏色直接用 color 控制即可，
     不需要另外畫一份圖示。桌機的深綠實心圓鈕不受影響。 */
  /* 🔴 2026-10-01 17:31 Owen 改成深綠長條鈕：
     17:15「那個+號 有點不明顯 會不會不知道可以按」、17:27「有一個口味 那個+ 跟口味內容快要疊在一起了」
     → 看了 A 實心圓／B 細框圓／C 膠囊「看介紹＋」三案，選 C 但「不要中文 用一個+ 就好 一樣長條型的按鈕」。
     舊版 34% 淡加號在 390px 寬時，說明文字兩行的卡片（繽紛軟糖、芋頭、泰式奶茶…）＋ 壓進文字 6px，
     375 以下繽紛軟糖連左右都撞到。改成置中長條鈕，並用 padding-bottom 留一條專屬軌道：
     底留白 52 = 鈕底距 14 ＋ 鈕高 26 ＋ 與文字間距 12。 */
  .flavor-card__go {
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    width: 64px;
    height: 26px;
    border-radius: 13px;
    background: var(--jungle-deep);
    box-shadow: none;
    color: var(--coconut);
  }

  .flavor-card__go svg {
    width: 14px;
    height: 14px;
  }

  /* ⚠ 寫成 .flavor-card.flavor-card--go：後面另一段窄螢幕規則 .flavor-card { padding: 18px 10px 22px } 排在後面、
     同權重會把這裡的 52px 蓋回 22px（17:35 實測量到 pb=22px、鈕壓文字 14px）。 */
  .flavor-card.flavor-card--go {
    padding-bottom: 52px;
    cursor: pointer;
  }

  /* 觸控沒有 hover，點下去必須立刻有回饋，
     否則使用者不確定自己有沒有點到 */
  .flavor-card--go:active {
    transform: scale(0.985);
  }

  /* 桌機那組 hover 會把圖示翻成芒果黃底＋深綠字，
     觸控裝置點完會卡在高亮狀態不會復原，所以手機上取消。
     ⚠️ 但 :focus-visible 不能一起取消——鍵盤使用者需要看得見焦點在哪。 */
  .flavor-card:hover .flavor-card__go,
  .flavor-card__go:hover {
    background-color: var(--jungle-deep);
    color: var(--coconut);
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   10-1. 口味詳細介紹（型錄風）與彈出層
   Owner 2026-08-13 指定：點卡片上的圓點，介紹「疊」在畫面上，
   看完關掉人還停在原處，不要被帶到別頁。

   同一份內容有兩種呈現方式，這是刻意的：
     沒有 JS → 區塊就直接顯示在頁面下方，圓點是普通錨點連結，跳過去看得到
     有  JS → 由 initFlavorModal 搬進彈出層，原區塊隱藏
   舊站就是因為用 JS 生成口味而讓搜尋引擎讀不到，所以內容一律寫在 HTML 裡。

   色系取自 Owner 2024 年自製的 MENU（深綠底 + 燙金 + 白字），
   不是新發明的風格。
   -------------------------------------------------------------------------- */

/* 有 JS 時把原區塊收起來，避免同一份內容在頁面上出現兩次 */
.js-flavor-modal .flavor-details { display: none; }

.flavor-details {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.flavor-detail__shot {
  position: relative;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--jungle-deep);
}

/* 照片與「產品示意圖」標註綁成一組。
   有了這一層，標註才能永遠貼在**照片**的右下角——
   窄螢幕時文字改排到照片下方，shot 會變高，
   若標註仍相對 shot 定位就會掉到文字底下
   （Owner 2026-08-17 14:32：「示意圖應該疊在圖片右下角落，而不是最下方」）。 */
.flavor-detail__frame {
  position: relative;
}

.flavor-detail__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左側漸層遮罩：這是「換任何照片都成立」的關鍵。
   不管照片左邊是深灰石板還是滿版亮色水果，都壓得出一塊穩定的暗區；
   58% 之後完全透明，右半邊照片一點都不會被蓋到。 */
.flavor-detail__shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(8, 18, 14, 0.88) 0%,
    rgba(8, 18, 14, 0.74) 26%,
    rgba(8, 18, 14, 0.38) 44%,
    rgba(8, 18, 14, 0) 58%);
}

/* 照片左半本身偏亮時，預設遮罩壓不出足夠暗區的補強版（2026-09-15 新增）。
   目前適用：抹茶（文字區無遮罩底色 #A6A7BD，是 8 支預設版裡唯一的亮色離群值，
   套上預設遮罩後品名只有 2.88，差 WCAG 大字門檻 3.0 一步）。

   只把 alpha 往上推一階（.88→.90 / .74→.79 / .38→.47），58% 的透明終點不動——
   右半邊主體照樣一點都不會被蓋到。實測抹茶：品名 2.88→3.25、英文 4.51→5.08、
   敘述 9.23→10.40，三行全過。

   ⚠️ 沒有再推更深（試過 .92/.82/.50 得品名 3.46）：遮罩越深，照片左側的
   質感被壓掉越多，而 3.25 已有餘裕。這是「剛好夠」而不是「越高越好」的取捨。
   ⚠️ 換照片後要重跑 `_腳本\_檢查_遮罩對比度.ps1 -Variant Default`，
   底色變了就可能不再需要這個 modifier（或反過來不夠用）。 */
.flavor-detail--mask-strong .flavor-detail__shot::before {
  background: linear-gradient(90deg,
    rgba(8, 18, 14, 0.90) 0%,
    rgba(8, 18, 14, 0.79) 26%,
    rgba(8, 18, 14, 0.47) 44%,
    rgba(8, 18, 14, 0) 58%);
}

.flavor-detail__text {
  position: absolute;
  top: 43.5%;
  left: 6.5%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 34%;
  text-align: left;
}

/* 型錄常見的細金線，放在標題上方當引導 */
.flavor-detail__rule {
  width: clamp(44px, 5vw, 66px);
  height: 2px;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  background: linear-gradient(90deg, #E6CD8E, #B8863F 60%, rgba(184, 134, 63, 0));
}

/* 燙金字。先給純色金打底，萬一瀏覽器不支援 background-clip: text，
   字會維持這個顏色而不是變成透明——關鍵內容不能由效果決定看不看得見。 */
.flavor-detail__name {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 2px;
  color: #E3C77E;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .flavor-detail__name {
    background: linear-gradient(158deg, #F7E3AC 0%, #D8B26A 34%, #A97C33 52%, #F2DFA6 78%, #C99B48 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
  }
}

/* 中文沒有真正的斜體，斜體只給英文用 */
.flavor-detail__en {
  display: block;
  font-style: italic;
  font-size: clamp(0.82rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
  color: #C9A253;
  margin-bottom: clamp(10px, 1.6vw, 20px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 暖白，不用純白：純白在型錄裡偏刺、偏廉價 */
.flavor-detail__desc {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.75;
  margin: 0;
  color: #F2EDE0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* 「產品示意圖」標註。照片是依基準圖生成的，質地與擺盤都不是實際出貨的樣子；
   食品業最容易的客訴就是「圖跟實品不一樣」，這行字成本極低但擋得住。
   低調的意思是不搶戲，不是看不到——做太淡等於沒標。 */
.flavor-detail__note {
  position: absolute;
  right: clamp(12px, 1.6vw, 24px);
  bottom: clamp(10px, 1.4vw, 20px);
  z-index: 2;
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  letter-spacing: 0.05em;
  /* 2026-08-17 由 0.82 調到 0.62（Owner：「產品示意圖本來就不是圖片的主角，
     過度清楚會讓人把焦點放在上面」）。判準是「不會第一眼看到，但想找就找得到」。

     ============================================================
     2026-08-19 改版：字色改為依「照片右下角的實際亮度」分兩組，
     不再跟著風格版（--light）走。

     起因（Owner 16:41）：「手機版有些口味超級清楚，已經到了會直接注視
     的地步，薄荷巧克力剛好相反，完全看不清楚」。

     實測九支的對比度是 1.51～6.94，差 4.6 倍。根因是**風格版 ≠ 右下角
     亮度**——薄荷是明亮版、套深棕字，偏偏那張右下角是餐巾陰影（亮度
     只有 88.7），深字配暗底等於隱形。所以分組必須看照片本身，不能看版型。

     Owner 16:50 指定做法：不加框也不加光暈（手機上字太小，描邊會糊成
     一團），單純「底色深用淺灰字、底色淺用深灰字」。
     下面這兩組值是掃過所有灰階×透明度組合後的最佳解，改善後為 4.01～8.15，
     九支都不再有看不清的。

     ⚠️ 取捨（Owner 17:00 選擇接受）：泰式奶茶右下角是全部裡最暗的（34），
     淺灰字調到能救藍絲帶的程度，它就必然更明顯（6.94→8.15）。
     純色字無法同時照顧最暗與最亮兩端，這是數學限制不是參數沒調好。

     🔴 **換圖後必須重跑 `_檢查_示意圖標註.ps1` 重新分組**——
     底色變了，該用哪一組就可能跟著變。剩下 6 支現在用的是暫用圖。
     ============================================================
============================================================
     2026-08-20 再改版：兩組不夠，改成四組。

     起因有二：
     (1) 檸檬 08-19 換上定案圖後，右下角底色是 148.3（中間亮度），
         淺灰字 2.08、深灰字 3.17 —— **兩組都不及格**。中間亮度本來
         就是兩端配色都吃虧的地帶。
     (2) 🔴 更關鍵：`_檢查_示意圖標註.ps1` 當時寫的是 (232,232,232,0.82)
         / (42,42,42,0.72)，**跟這裡實際套用的值不一樣**，等於那支腳本
         一直在量一個不存在的版本。昨天回報「9 支有 7 支達標」是假的，
         用真值重量只有 5 支。已同步修正腳本。

     重新掃描（最大化最差對比、上限 6.5）得到四組，10 支落在 4.80~6.53：
       極深底 <65      rgba(252,252,252,0.60)  泰奶 6.43、巧克力 5.22
       中深底 65~100   rgba(255,255,255,0.80)  榴槤 6.53 … 藍絲帶 4.80  ← 預設
       中底   100~180  rgba(12,12,12,0.95)     檸檬 6.16
       淺底   >180     rgba(5,5,5,0.66)        香草 5.71、椰子 6.41

     Owner 16:50 的原則沒變（底深用淺字、底淺用深字，不加框不加光暈），
     只是「深」與「淺」各自再分一級 —— 單一組字色跨不了 34~234 的底色範圍，
     這是數學限制不是參數沒調好。
     ============================================================ */
  color: rgba(255, 255, 255, 0.8);
}

/* 右下角底色極深（<65）的照片：預設的淺字會太搶，改用不透明度更低的淺字。
   目前適用：泰式奶茶（底色 34.2）、巧克力（56.7）。
   ⚠️ 這是獨立的 modifier，與 --light／--plain 無關，可自由疊加。 */
.flavor-detail--note-vdark .flavor-detail__note {
  color: rgba(252, 252, 252, 0.6);
}

/* 右下角底色偏亮的照片改用深灰字。
   目前適用：香草（底色 206.6）、椰子（234），以及還在用暫用圖的 5 支（230.9）。
   ⚠️ 這是獨立的 modifier，與 --light／--plain 無關，可自由疊加。 */
.flavor-detail--note-dark .flavor-detail__note {
  color: rgba(5, 5, 5, 0.66);
}

/* 中間亮度（100~180）：兩端配色都吃虧的地帶，只有近乎實心的深字夠力。
   目前適用：檸檬（148.3）。 */
.flavor-detail--note-mid .flavor-detail__note {
  color: rgba(12, 12, 12, 0.95);
}

/* ============================================================
   明亮版 modifier（2026-08-17 Owner 定案後由 _驗證_明亮版遮罩.html 移入）

   由來：2026-08-14 Owner 要求「不要全部口味都偏深色，也要有明亮風」。
   上面那套遮罩是深色的（rgba(8,18,14,...)），註解寫明用意是「換任何照片都成立」——
   不管照片多亮都壓得出穩定暗區。但那正好跟明亮風牴觸：左半被壓暗，
   明亮感只剩右半邊。所以明亮照片改用這一組：遮罩翻成米白、字改暗金與深棕。

   ⚠️ 字的 text-shadow 也必須跟著翻成白色，否則深色陰影落在淺底上會變成髒邊。
   ============================================================ */
.flavor-detail--light .flavor-detail__shot { background: #F4F1EA; }

.flavor-detail--light .flavor-detail__shot::before {
  background: linear-gradient(90deg,
    rgba(252, 250, 246, 0.94) 0%,
    rgba(252, 250, 246, 0.82) 26%,
    rgba(252, 250, 246, 0.44) 44%,
    rgba(252, 250, 246, 0) 58%);
}

.flavor-detail--light .flavor-detail__rule {
  background: linear-gradient(90deg, #8B6914, #B8863F 60%, rgba(184, 134, 63, 0));
}

/* ⚠️ 特異性 (0,2,0)，刻意壓過上面 @supports 區塊內的 (0,1,0)。
   少了這一層，那邊的 color: transparent 會生效但漸層是深金色的，
   在淺底上等於字整個消失——這是實作時最容易踩的一步。 */
.flavor-detail--light .flavor-detail__name {
  background: linear-gradient(158deg, #9A7521 0%, #7A5A1E 34%, #5E4415 52%, #A97C33 78%, #6B4E16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.85));
}

.flavor-detail--light .flavor-detail__en {
  color: #8B6914;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.75);
}

.flavor-detail--light .flavor-detail__desc {
  color: #2E2419;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
}
/* 中文左側視覺對齊（2026-08-25 Owen 指出：「介紹詞和口味名稱沒有對齊左邊，
   我看你的線條和英文都有對齊左邊，這應該是因為中文字本身都有字距的關係」）

   他的判斷正確。中文字型為了讓字排在一起不擠，每個字左右都內建一小塊留白
   （側邊軸承）。線上站實測（等 document.fonts.ready 後把每行畫進 canvas
   逐像素掃描墨水左邊界，4 倍取樣）：

     金色線條           0.00px  ✓ 貼齊
     品名（41.6px）     1.25px  ← 內縮
     英文（18.4px 斜體）3.25px  ← 內縮最多（合成斜體整個右傾，Owen 未要求調整）
     敘述（16.8px）     0.50px  ← 內縮

   1.25/41.6 ≈ 0.5/16.8 ≈ **3%**，是 Noto 家族的固定比例
   ⇒ 用 em 而不是 px，字級在 clamp() 裡隨視窗變動時會自動跟著調整。

   ⚠️ 用 margin-left 不用 text-indent：敘述是多行，text-indent 只縮第一行，
      其餘行仍內縮，反而更不齊。 */
.flavor-detail__name { margin-left: -0.03em; }
.flavor-detail__desc { margin-left: -0.03em; }


/* ⚠️ 這裡原本有一條 `.flavor-detail--light .flavor-detail__note`
   （深棕 0.52 ＋ 白色陰影），2026-08-19 移除。

   移除原因：它把標註字色綁在「風格版」上，但真正決定可讀性的是
   **照片右下角的亮度**，兩者並不一致——薄荷是明亮版卻因為右下角
   是餐巾陰影（亮度 88.7）而完全看不見（對比度只有 1.51）。
   現在改由獨立的 `--note-dark` 依實測亮度分組，見上方 __note 區塊。

   這條若留著，特異性 (0,2,0) 會壓過新的預設值，明亮版又會變回深棕字。 */

/* ============================================================
   無遮罩 modifier（2026-08-19 Owner 決定）

   用途：照片左半本身就夠淺、夠乾淨時，遮罩反而是負擔。
   薄荷巧克力那張白大理石，米白遮罩把大理石的紋理蓋成一片白霧，
   質感全失（Owner 12:53「這個版因為已經夠亮了，你試看看不要加白色遮罩」）。

   與 --light 疊用：class 寫 `flavor-detail flavor-detail--light flavor-detail--plain`。
   --light 負責深色字，--plain 只負責拿掉遮罩與補強英文字色。
   ⚠️ 必須放在 --light 區塊之後，特異性同為 (0,2,0)，靠順序取勝。

   ⚠️ 用這個 modifier 等於放棄「換任何照片都成立」的保險。
   遮罩原本的用意就寫在上面 __shot::before 的註解裡：不管照片左邊是
   深灰石板還是滿版亮色水果，都壓得出一塊穩定的暗區。拿掉之後，
   照片一換就可能讓文字消失在背景裡。

   **啟用前必須量過對比度**（WCAG：正文 4.5、大字 3.0）：
   量文字區的實際底色，三行字（品名／英文／敘述）全部達標才能用。
   判準是「文字區那一塊」，不是整張平均亮度——這兩件事會脫鉤：
   整體很亮但左邊有深色道具或陰影，那塊照樣把字吃掉。

   薄荷巧克力實測（文字區底色 #E0E0E2）：
     品名 4.81（大字門檻 3.0）通過、敘述 11.52 通過，
     英文原本的 #8B6914 只有 3.86 不足 → 下面加深到 #6B5010（5.6）。

   窄螢幕不必處理：上面 @media 已經把 __shot::before 整個 display:none。
   ============================================================ */
.flavor-detail--plain .flavor-detail__shot::before {
  display: none;
}

/* 英文名加深一階才過門檻。仍是金色，只是不再靠亮度取巧。

   2026-09-15 把 --en-deep 併進同一條：有遮罩但底色偏亮的明亮版也需要這個色，
   跟「有沒有拿掉遮罩」是兩件事。芋頭是米白遮罩＋#8B6914 只有 4.16，
   而米白遮罩已經 0.94，再往上推到 1.0 也只到 4.34——瓶頸在字色不在底色，
   所以只換字色：4.16 → 6.18。品名 5.19 本來就過，不動。

   ⚠️ 兩個 modifier 同為 (0,2,0)，靠「排在 --light 之後」取勝，別往前搬。 */
.flavor-detail--plain .flavor-detail__en,
.flavor-detail--en-deep .flavor-detail__en {
  color: #6B5010;
}

/* 窄螢幕：文字疊在左側只剩不到 100px 寬，一個字一行完全沒法讀。
   改成照片在上、文字在下，遮罩也改成由下往上。 */
@media (max-width: 720px) {
  /* 窄螢幕整個拿掉漸層遮罩。
     遮罩的用途是讓「疊在照片上的文字」讀得清楚；文字既然已經改排到
     照片下方，它就沒有存在的理由，留著只會把冰淇淋主體壓暗
     （Owner 14:31「沒有必要做漸層」；bro 14:33「漸層會遮到上方圖片的冰淇淋主體」）。 */
  .flavor-detail__shot::before {
    display: none;
  }

  /* ⚠️ margin-top: -34% 已移除（2026-08-17 Owner 回報「草莓的字都跑到圖片外了」）。

     原意是讓文字往上疊進照片下半部，但 -34% 是相對「寬度」算的，
     而文字高度取決於字數，兩者沒有關聯——字一多就從照片下緣溢出來，
     變成一半壓在照片上、一半掉在照片外的底色上。
     實測 360px 寬時，草莓的文字超出照片下緣 79px。

     改成照片與文字上下各自完整、不重疊。可讀性反而更好，
     也不必再賭文字長度。 */
  .flavor-detail__text {
    position: relative;
    /* 🔴 這一行是「段落太靠右邊」的真正原因（Owner 2026-08-17 14:31）。

       桌機版是 position:absolute 搭 left:6.5% 把文字定位到照片左側。
       窄螢幕改成 position:relative 之後，left 並沒有失效——
       它變成「相對自己原本的位置往右推 6.5%」，
       於是整塊文字右移，左邊留白變兩倍、右邊被擠到幾乎貼邊。

       更隱蔽的是：這段原本寫 position:static（此時 left 無效，畫面正常），
       後來又補了一行 position:relative 覆蓋掉它，才把這個 bug 啟動。
       改動 position 時必須一併檢查 top/left/right/bottom 有沒有殘留。 */
    left: auto;
    transform: none;
    max-width: none;
    /* 左右留白用百分比，與桌機版的 left: 6.5% 同一個比例。
       原本寫死 20px：在 360px 的手機上還算合理，但在 700~720px 的
       平板或大手機上只佔 2.8%，文字幾乎貼著邊
       （Owner 2026-08-17 14:28「字的右邊已經頂到圖片的邊界了」）。 */
    padding: 18px 6.5% 22px;
    margin-top: 0;
  }

  /* ⚠️ 這裡曾經加過 max-width: 30ch 想收住行寬，但那是錯的：
     ch 是「0」這個字元的寬度，對中文完全不準——30ch 實際只排得下
     約 15 個中文字，於是右邊空出一大塊，左右反而更不對稱，
     正好是 Owner 要修的那個毛病。

     左右各留 6.5%、不設上限，對稱最重要。
     真要收行寬得用 em（中文一字約 1em），不能用 ch。 */

  /* 「產品示意圖」維持疊在照片右下角，不要跟著文字掉到最下面。
     它是在標註「這張照片」不是實品，離開照片就失去意義了
     （Owner 2026-08-17 14:32）。
     定位基準是 .flavor-detail__frame＝照片本身，所以不必特別覆寫，
     這裡只調間距，讓它在小螢幕上不要太貼邊。 */
  .flavor-detail__note {
    right: 4.5%;
    bottom: 10px;
  }

  /* 這裡原本有兩條明亮版的窄螢幕覆寫，2026-08-17 一併移除：

     · `--light .flavor-detail__shot::before` 的米白漸層
       —— 窄螢幕的遮罩已整個 display:none，這條沒有作用了。

     · `--light .flavor-detail__note` 的顏色
       —— 標註現在窄螢幕與桌機同樣疊在照片右下角，沒有理由分開設色；
          留著只會把上面剛調淡的 0.52 又蓋回 0.7，
          變成「桌機淡、手機不淡」的怪現象。

     **改動共用樣式後，要回頭查窄螢幕區塊有沒有殘留的舊覆寫。**
     這與同日那個 `left: 6.5%` 的坑是同一類問題：
     舊規則不會自己消失，只會安靜地贏過新規則。 */
}

/* --- 彈出層 --- */
.flavor-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: clamp(14px, 3vw, 40px);
}

.flavor-modal.is-open {
  display: grid;
  place-items: center;
}

.flavor-modal__backdrop {
  position: absolute;
  inset: 0;
  /* 0.52 = 原本的 0.74 調亮三成（Owner 2026-08-13 16:09）。
     底下的頁面看得更清楚，「只是疊一層」的感覺比較對，
     不會像被整個蓋掉。 */
  background: rgba(8, 18, 14, 0.52);
  /* Owner 指定：點圖片以外的地方就關閉 */
  cursor: pointer;
}

.flavor-modal__panel {
  position: relative;
  z-index: 1;
  /* 寬度同時受三個上限，取最小值：
       94vw            不超出視窗寬
       980px           桌機上的舒適上限（Owner 16:25「卡片可以縮小一點」）
       calc(78vh*1.5)  ★由視窗高度反推★
     第三項是這次修正的重點。照片是 3:2，先前只限寬度（1120px），
     在比較矮的視窗上照片高度就會撐出畫面；再加上外層是置中對齊，
     溢出的部分會上下各切一半，而上緣那一半捲不回來——
     Owner 2026-08-13 16:25 回報「小卡上緣被截掉」就是這個。
     由高度反推寬度之後，不論視窗多矮，整張照片都完整入鏡，也不必裁切。 */
  width: min(94vw, 980px, calc(78vh * 1.5));
  /* 手機版文字改排在照片下方會增加高度，保留這兩行當保險 */
  max-height: 94vh;
  overflow-y: auto;
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* 面板帶 tabindex="-1" 是為了讓開啟時能把焦點接住（見 site.js 的 open()）。
   它不是互動元件，聚焦時本來就不該畫框；這行是保險，
   避免某些瀏覽器仍替它畫出預設外框。真正需要焦點提示的是裡面的關閉鈕。 */
.flavor-modal__panel:focus { outline: none; }

/* 關閉鈕放在浮層右上角外緣，不壓到照片內容 */
.flavor-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 18, 14, 0.62);
  color: var(--coconut);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.flavor-modal__close:hover,
.flavor-modal__close:focus-visible {
  background: var(--mango);
  transform: scale(1.06);
}

.flavor-modal__close svg {
  width: 18px;
  height: 18px;
}

/* 彈出時鎖住背景捲動，否則關掉之後會發現位置跑掉 */
body.has-modal { overflow: hidden; }

/* --------------------------------------------------------------------------
   11. 口味頁分類篩選
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.filter-btn {
  padding: 10px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--jungle-soft);
  color: var(--jungle);
}

.filter-btn[aria-pressed="true"] {
  background: var(--jungle);
  border-color: var(--jungle);
  color: var(--on-dark);
}

/* 篩選時隱藏不符合的卡片 */
.flavor-card[hidden] {
  display: none;
}

/* 分類小節（無 JS 時的自然分段） */
.flavor-section + .flavor-section {
  margin-top: clamp(56px, 7vw, 88px);
}

.flavor-section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.flavor-section__title {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--jungle-deep);
}

/* 英文系列名：斜體襯線（中文無真斜體，故與數量分開標記） */
.flavor-section__count {
  font-family: var(--font-script);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* 數量：中文，維持無襯線正體 */
.flavor-section__num {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* 產品說明聲明 */
.disclaimer {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   12. 關於頁：品牌歷程時間軸
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--mango-light),
    var(--line-strong)
  );
}

.timeline__item + .timeline__item {
  margin-top: clamp(34px, 5vw, 52px);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--mango);
}

.timeline__year {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--mango);
  line-height: 1.2;
  margin-bottom: 8px;
}

.timeline__title {
  font-size: 1.15rem;
  color: var(--jungle-deep);
  margin-bottom: 10px;
}

.timeline__text {
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* 關於頁的引言區塊 */
.pull-quote {
  margin: clamp(48px, 7vw, 80px) 0;
  padding: clamp(32px, 5vw, 48px);
  background: var(--jungle-deep);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--on-dark);
}

.pull-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.pull-quote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  color: var(--mango-light);
}

/* --------------------------------------------------------------------------
   13. 內頁頁首橫幅
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--jungle-deep);
  color: var(--on-dark);
  padding-block: clamp(56px, 9vw, 96px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 極淡的放射狀光暈，避免大面積深色過於沉重 */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 120%,
    rgba(224, 149, 44, 0.22),
    transparent 62%
  );
}

.page-hero__inner {
  position: relative;
}

.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.18rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--mango-light);
  margin-bottom: 16px;
}

.page-hero__title {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
}

.page-hero__lead {
  max-width: 40em;
  margin: 18px auto 0;
  color: var(--on-dark-soft);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   13-1. 關於頁的照片式頁首（.page-hero--photo）
   照片當背景、標題文字疊在上面。用專屬 class 而非直接改 .page-hero，
   因為口味頁也共用同一個區塊。

   ★ 換照片只要改下面那一行 url()，其餘參數都已定案（Owner 2026-08-10 確認）
   -------------------------------------------------------------------------- */
.page-hero--photo {
  /* 文字落在整塊高度約 9% 處——依 Owner 的標注圖箭頭位置量測 */
  padding-block: clamp(24px, 3.5vw, 52px) 0;
  /* 照片以 100% 寬顯示時高度 = 42.86vw（圖片比例 2.333 = 21:9 = 100/42.86），剛好等於容器：
     照片填滿整塊，沒有多出來的深綠色塊——標題直接落在照片自己的暗色區。
     （2026-09-04 Owner：「上半部顏色已經相對乾淨，你把它去掉」）

     🔴 2026-09-23 14:26 Owen：「"關於"的主頁圖，我希望也是 21:9，現在這樣拉得太長，
        圖片也都放得太大看起來沒有精緻度」。瀏覽器實測佐證他說得沒錯：
        1680x846 的視窗裡，舊的 1.852 讓頁首高 907px ＝ **視窗高的 107%**，一屏裝不下。
        改 21:9 之後是 720px（85%），與他喜歡的口味頁首（44.47vw，同視窗 747px）同一個量級。

     ★ 換照片時這個比例要一起算：比例大於 2.333 會在上方露出深綠色塊、
     形成上下兩截顏色；小於 2.333 則照片被裁頂，暗色區不夠標題就會壓到碗上 */
  /* 上限 730px（原 920）：容器一旦停止長高、照片卻還在按 vw 長，
     多出來的高度會從照片頂端裁掉，暗色區被吃掉、標題就沒地方站。
     730 = 1704px 寬時的 42.86vw —— 沿用舊值「照片剛好填滿的區間要涵蓋到 1700px 寬螢幕」
     這個判準，只是換算到新比例（舊值 920 = 1704 x 0.54）。
     再更寬（2000px 以上）仍會裁頂，屆時要改的是圖片比例不是這個數字 */
  min-height: clamp(440px, 42.86vw, 730px);
  /* 哪一張照片由這個變數決定，::after 只讀 var()——加新的一頁不用複製整段規則。
     ⚠️ 每一張都必須是 1.852 比例，理由見上方註解

     2026-09-22 13:50 Owen「把 關於 那張圖改成這張」：深綠亞麻桌布＋椰子＋芒果＋金湯匙。
     他傳來的原圖 1264x848（比例 1.491，比 1.852 高出許多，直接用會被裁頂、
     標題落到碗上）⇒ 自底部裁 165px 成 1264x683 ＝ 1.851。
     裁底部而不是裁頂：頂部的龜背芋葉與椰子是這張的暗色區，標題要站在那裡；
     而且右下角那個半透明四芒星（AI 生圖的浮水印，原圖 y 703~752）剛好一併裁掉。
     ⚠️ 這張只有 1264px 寬（前一張 scoops-banner 是 2906px）——
        Telegram 傳照片會壓到 1280px 以內，已請 Owen 用「檔案」方式補原圖。

     🔴 2026-09-23 改 21:9 時，這一行從 about-banner.jpg 換成 about-banner-scoops.jpg。
        兩個檔都是 21:9，隨時可以換回來（只改這一行，其餘參數都不用動）：
          · about-banner.jpg        1264x542 椰子＋芒果（Owen 09-22 傳的那張，自原圖 y140 起裁）
          · about-banner-scoops.jpg 2906x1245 六球拼盤（09-22 之前那張，自頂端裁 324px）
        會先用 scoops 的兩個理由：
        ① 解析度 —— 1264px 那張在 1665px 寬的版面上要放大 1.32 倍，
           這正是 Owen 說的「看起來沒有精緻度」；2906px 這張是縮小 0.57 倍，銳利。
        ② 構圖 —— 六球集中在下半部，上面大片深色空景本來就是留給標題的，
           21:9 裁掉頂端 324px 之後碗盤一個都沒切到。
        Owen 09-23 14:29 已在重做一張 21:9 的新圖，到了就換上來。
     🔴 2026-09-30 換成 about-banner-c.jpg（2750x1179）：Owen 15:18～16:25 丟了 A／B／C 三張＋兩張提亮版，
        Nick 15:33 投 C，Owen 16:25 傳 C 提亮版原檔（參考圖\About banner4.jpeg 2750x1536），
        16:58 問「關於那個圖片還沒換過來嗎」。自原圖 y 184 起全寬裁 21:9（起點 12%），
        碗盤從 y≈0.40 起，全落在導言第二行（32.2%）以下。裁切工具：_腳本\_關於橫幅候選預覽.ps1。
        要退回舊圖：把下一行改回 about-banner-scoops.jpg。 */
  --hero-photo: url("../img/about-banner-c.jpg");
}

/* 口味頁：整片冰淇淋杯（Owner 2026-09-04 提供的 Gemini 生成圖） */
.page-hero--flavors {
  --hero-photo: url("../img/flavors-banner.jpg");
}


.page-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* 上半部近乎純色，照片細節不透出來，標題才立得住
       （Owner：「這個區域的背景盡量不要露出底紋」）。
       過了導言才快速淡出，下半部完全放開，照片保持明亮

       🔴 2026-09-22 換圖後加厚 24%~38% 這一段。舊停點是 .60@24% → .20@33%，
          那是為**舊照片**訂的 —— 那張上半部整片是暗色天空，遮罩淡得早也沒事。
          新照片右上角是椰子白肉（原圖 x 820~1140、y 60~320），
          導言第一行的右半邊正好落在上面：底色 #A0AFA6，對比只有 1.71（需要 4.5）。
          ⇒ 這不是「遮罩本來就該這麼淡」，是判準綁在上一張照片上。
          量法與逐次數值見 _腳本\_檢查_橫幅對比.ps1（它會讀這幾行，改完直接重跑）。
          38% 之後照樣快速放開，椰子下半部、芒果與金湯匙維持明亮。 */
    linear-gradient(180deg,
      rgba(15,46,35,.98) 0%,
      rgba(15,46,35,.96) 14%,
      rgba(15,46,35,.92) 24%,
      rgba(15,46,35,.82) 31%,
      rgba(15,46,35,.52) 39%,
      rgba(15,46,35,.18) 47%,
      rgba(15,46,35,0)   56%),
    var(--hero-photo);
  /* 照片用 100% auto 而非 cover：cover 會為了填滿容器高度而放大並裁掉左右，
     看到的範圍變窄、冰淇淋顯得過大（Owner：「你不要放大照片」）。
     靠底對齊，超出容器的部分自然從底部裁掉 */
  background-size: cover, 100% auto;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  /* 提亮並略降飽和：Owner 要「中度明亮」，且草莓紅太跳會與品牌色打架 */
  filter: brightness(1.14) saturate(.94);
}

/* 口味頁的遮罩要比關於頁厚。關於頁那張照片上半部本來就是暗色天空，
   漸層到 33% 淡成 .20 就夠；這張整片都是明亮的冰淇淋，同一條漸層會讓
   導言第二行落在淺紫與淺黃的球上、白字直接糊掉。導言底約在 36% 處，
   該處要保留 .50 才壓得住。
   ⚠️ 必須放在 .page-hero--photo::after 之後——兩者特異性相同，先寫的會被蓋掉 */
.page-hero--flavors::after {
  background-image:
    linear-gradient(180deg,
      rgba(15,46,35,.98) 0%,
      rgba(15,46,35,.94) 16%,
      rgba(15,46,35,.78) 28%,
      rgba(15,46,35,.50) 36%,
      rgba(15,46,35,.16) 46%,
      rgba(15,46,35,0)   56%),
    var(--hero-photo);
}

.page-hero--photo .page-hero__inner {
  position: relative;
  /* 2 而不是 1：葉框（.leaf-frame）用 z-index 1 疊在遮罩之上，文字要再高一層 */
  z-index: 2;
}

/* --------------------------------------------------------------------------
   13-2. 口味頁的左右分割頁首（.page-hero--split）
   --------------------------------------------------------------------------
   2026-09-22 17:47 Owen：「口味的頁首 試試看這個排版風格，我把圖上傳給你使用」
             17:50「上傳了 字的部份讓你合」　17:51「手機版的部份你可以從我的圖片取大小」

   左邊深綠（含燙金線稿葉子，貼著左下角出血）放文字，右邊四格直向照片，
   四格剛好對應站上的四大系列：tasteful / chocolate / fruits / sherbet。

   🔴 這一版把「頁首是一張大照片」整個換掉了 —— 順帶解掉同日 17:20 他說的
      「口味頁置頂那張太糊」（flavors-banner.jpg 原尺寸看杯緣就是糊的，量測見 _變更記錄.md）。

   🔴 2026-09-24 17:13 Owen 換上第三版來源 Gemini_Flavor3.jpeg（3168x1344）：
      「我重新上傳 Gemini_Flavor3 修正了椰子冰淇淋的顏色，原本太白了 你重新換圖」
      17:13「好了 重新上傳了 這次我自己修色 其它都不會變」
      —— 定案的是**修色版**：他直接對第二版的圖調色，幾何完全沒動，
      所以本節的版面數字與第二版一模一樣（1431 / 394 / 394 / 409 / 394、44.47vw）。
      椰奶那格本體色 #EBE6E2（飽和 3.8%）→ #ECE8DB（飽和 7.2%），死白轉成帶黃的奶白。
   ⚠ 中間有一版 16:52 的「Gemini 重生版」（3172x1344、四格 400/430/438/414），
     17:08 Owen 自己發現「圖片好像在生圖中失真了」—— 杯子與椰子被橫向拉開。
     那一版已經被他覆蓋掉，不要再拿 400/430/438/414 那組數字。
     🔴 教訓：四格寬度從 394/394/409/394 變成 400/430/438/414 時（同高度、同版型，
        最寬/最窄 1.038 → 1.095），我把它當成「他圖上本來就有的硬邊位置」照切了，
        還寫進註解當設計。**欄寬各長各的＝每一格被拉伸的倍率不一樣**，那是失真的指紋。
        腳本的守衛 1.25 太寬鬆，攔不到這種程度；真正該看的是「跟前一版比，欄寬關係變了沒」。
   素材由 _腳本 目錄的 _切口味頁首.ps1 從他的整張圖切出來：
     flavors-hero-leaf.jpg          1431x1344　左綠區（佔內容寬 47.35%）
     flavors-series-tasteful.jpg     394x1344　13.0%
     flavors-series-chocolate.jpg    394x1344　13.0%
     flavors-series-fruits.jpg       409x1344　13.5%   ← 這格原圖就比別格寬 15px
     flavors-series-sherbet.jpg      394x1344　13.0%
   ⚠ 欄寬直接寫原圖的像素數當 fr，不是換算好的百分比 ——
     比例綁在素材上，換圖重跑腳本、把新數字抄過來就好，不必自己再算一次
     （09-21 的教訓：量測／版面公式裡寫死換算過的常數，那一刻它就跟本體脫鉤了）。
   🔴 四格「不是等寬」，所以這裡不能再寫 repeat(4, …)。
     那 15px 是 Owen 圖上本來就有的硬邊位置 —— 照實際硬邊切，桌機四格並排才還原成他原本那張圖；
     硬湊成等分反而會讓每一格都錯位一點點。
   ⚠ 來源右邊原本還有一條 144px 的平塗灰（沒填滿的畫布），已由切圖腳本的「平塗邊帶」偵測切掉，
     所以上面的百分比分母是「內容寬 3022px」而不是原圖的 3168px。
   -------------------------------------------------------------------------- */
.page-hero--split {
  display: grid;
  grid-template-columns: 1431fr 394fr 394fr 409fr 394fr;
  align-items: stretch;
  padding-block: 0;
  text-align: left;
  /* 🔴 底色用 --jungle-deep，而且切圖那一步已經把 Owen 原圖的綠平移對上它了。
     深綠導覽列（sticky）就貼在這塊正上方，不對齊會在交界處出現一條橫向色帶。
     對齊方向是「圖配色票」不是「色票配圖」—— --jungle-deep 三頁共用，改它會連別頁一起變。
     🔴 2026-09-24：基準色不能一律取眾數。第二版的綠區有一塊給文字站的平塗底板，
        眾數佔 28.5%，取眾數沒問題；但第三版（Gemini 重生版 2.3%、Owen 修色版 2.1%）
        都沒有那塊平塗 —— 眾數變成一個噪點色，照它算位移，輸出會落在 rgb(13,43,33)，
        離品牌綠差 (-2,-3,-2)，而做這整件事的理由就是不要有橫向色帶。
        已在 _切口味頁首.ps1 加分歧：眾數佔比 <10% 改用逐通道中位色。
        定案的修色版：基準 rgb(22,46,34) → 位移 R-7 G0 B+1，輸出切片中位 rgb(15,46,36)，
        與 --jungle-deep rgb(15,46,35) 只差藍色 1 階（JPEG 量化）。 */
  background-color: var(--jungle-deep);
  /* 高度跟著原圖比例走：1344 / 3022（內容寬，不含那條平塗灰）= 44.47vw。
     🔴 換圖一定要重算這個數字 —— 第一版是 600/1296 = 46.30vw，第二版圖比較扁，
        沿用舊值會讓頁首比圖高、四格被拉伸（09-04 踩過反過來的那次：
        換照片沒重算比例，標題直接壓到冰淇淋上）。
        第三版修色版的幾何與第二版相同，所以這個數字沒變 —— 但那是量出來的結果，不是假設。
     下限 420px 讓文字在窄螢幕不會擠爆；上限 820px 之後四格會從上下裁，
     裁掉的是背景，水果與杯子還在中間，可以接受 */
  min-height: clamp(420px, 44.47vw, 820px);
}

/* 徑向光暈是為「深綠純色頁首」做的，疊在照片上只會讓右半邊髒掉 */
.page-hero--split::before { display: none; }

.page-hero--split__text {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 燙金葉子在原圖的左下角，靠左靠下對齊才不會把它裁掉（09-08：直邊要貼齊畫框） */
  background-color: var(--jungle-deep);
  background-image: url("../img/flavors-hero-leaf.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  /* 左內距吃掉 31%：那是原圖裡留給葉子的地帶，文字壓上去會讓兩邊都不乾淨。
     31% 是量葉子線稿在文字帶（原圖高度 30%~75%）最遠伸到哪、再留一點餘裕。
     ⚠ 第一版量到 23%（餘裕 8 點）；第二版 Gemini_Flavor2 的葉子變大，量到 28.44%
        —— 還在 31% 以內，但餘裕只剩 2.56 點（約 36px）。
        第三版修色版幾何沒動，2026-09-24 重量仍是 28.44%（綠區 1431px 裡的 x=407）。
        再換圖務必重量這一項，葉子只要再長一點就會被文字壓到。
        量法：文字帶內逐欄數亮度 >=60 的像素，取「該欄 >=3 點」的最右欄
        （單點會被 JPEG 雜訊騙到）。 */
  padding: clamp(28px, 4vw, 64px) clamp(18px, 4.5%, 60px)
           clamp(28px, 4vw, 64px) clamp(18px, 31%, 400px);
}

.page-hero--split__inner { max-width: 26em; }

.page-hero--split .page-hero__title { margin: 0; }

.page-hero--split .page-hero__lead {
  margin: 18px 0 0;
  max-width: 24em;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
}

.page-hero--split__panel {
  background-repeat: no-repeat;
  /* 52% 而不是 center：四格的冰淇淋杯都落在原圖高度的 38%~72%
     —— 2026-09-23 14:25 在第二版來源 Gemini_Flavor2 上重量過，球頂 38~40%、杯底 70~72%，
     與第一版的 37~71% 幾乎相同（Owen 兩版是照同一個版面做的），所以 52% 沿用不動。
     2026-09-24 第三版修色版的幾何與第二版相同（他只調色），這一項不必重量
     （產物：_生成圖\診斷\四格修色版對照_20260924.png，四格新舊並排，構圖逐格對得起來）。
     驗法：四格切開並排、每 10% 畫一條水平線目視比對
     （產物在 _生成圖 底下的 診斷 目錄，檔名 四格杯子高度比對_20260923.png）。
     🔴 不要用「逐列標準差」找杯子：那量的是「哪裡有細節」，不是「杯子在哪」——
        水果與果香那兩格上下都擺了水果道具，整條都會被算進去
        （09-23 踩過，四格量出 26~85% / 43~74% / 7~91% / 4~90%，看起來像完全沒對齊，
        其實是尺不對。同 09-11「尺對了，量的東西不對」。）
     中心偏下一點，裁上下時杯子才留得完整 */
  background-position: center 52%;
  background-size: cover;
}

.page-hero--split__panel--tasteful  { background-image: url("../img/flavors-series-tasteful.jpg"); }
.page-hero--split__panel--chocolate { background-image: url("../img/flavors-series-chocolate.jpg"); }
.page-hero--split__panel--fruits    { background-image: url("../img/flavors-series-fruits.jpg"); }
.page-hero--split__panel--sherbet   { background-image: url("../img/flavors-series-sherbet.jpg"); }

/* 手機版照 Owen 示意圖：文字整條在上，四格排成 2x2。
   斷點 860 不是隨便取的 —— 再窄下去左欄只剩 47.35% x 860 約 409px，
   扣掉 31% 的葉子地帶只剩 282px 放標題，「15 種幸福的味道」就會斷成三行 */
@media (max-width: 860px) {
  .page-hero--split {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .page-hero--split__text {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: clamp(32px, 8vw, 56px) clamp(20px, 6vw, 40px);
  }

  .page-hero--split__inner { max-width: none; }

  /* 直式 3:4：四格原圖細長（394~409 x 1344，約 1:3.4），照原比例排 2x2 會長到快兩個螢幕高。
     3:4 時一格約 190x253px，杯子（原圖 38%~72%）整個留得住 */
  .page-hero--split__panel { aspect-ratio: 3 / 4; }
}

/* 13.4b 兩側金線葉框（.leaf-frame，leaf-gold-mon.png 龜背芋）—— 已移除
   2026-10-02 00:43 Owen 在正式站看到：「左右兩側多了 兩株 龜背芋」「這邊也出現龜背芋」「檢查問題並去除掉龜背芋」。
   原本 09-22 加在關於頁橫幅與首頁數字帶左右留白（≥1321px 才顯示，所以平常的筆電寬度看不到）。
   原 CSS 備份：_備份/網頁與樣式/_停用_金線葉框CSS_20261002.css */

.page-hero--photo .page-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  max-width: 34em;
  text-shadow: 0 2px 14px rgba(15, 46, 35, .7), 0 1px 4px rgba(15, 46, 35, .5);
}

/* 標題改用芒果黃（Owner：「改色讓它更有對比感」）。
   不用純白：白字碰到淺色冰淇淋會糊在一起；芒果黃與上方
   「About Sentia」的金色同一家族，在深綠與照片上都跳得出來 */
.page-hero--photo .page-hero__title {
  color: var(--mango-light);
  text-shadow: 0 2px 18px rgba(15, 46, 35, .75), 0 1px 4px rgba(15, 46, 35, .5);
}

/* --------------------------------------------------------------------------
   13.5 雙語標語區（品牌 slogan）
   -------------------------------------------------------------------------- */
.tagline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.tagline__body {
  /* 2026-09-23 17:32 26em → 28em。量出來的因果：桌機字級被 clamp 壓在上限 2rem＝32px，
     而「讓你每一口都是幸福的滋味！」是 13 個全形字 ＝ 416px，26em 正好也是 416px
     （em 對的是繼承來的 16px，不是這段自己的 32px）—— 剛好卡在臨界，
     於是 <br> 之後那行又被斷一次，「味！」兩個字單獨掉到第三行。
     欄位本身有 476px（.tagline 是 1fr 1fr），28em＝448px 仍有 28px 餘裕。
     ⚠ 這組數字的上限該由**最長的那一句**決定，跟今天 16:40 聯絡資訊 Email 那條同一個毛病：
       原本的 26em 從來沒拿實際文案驗算過。往後改這段文案要重算這一行。
     窄視窗不受影響：900px 以下變單欄，且字級 3vw 會先降下來（901px 時 27px × 13 ＝ 351px）。 */
  max-width: 28em;
}

.tagline__zh {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.7;
  color: var(--jungle-deep);
}

.tagline__en {
  margin-top: 20px;
  font-family: var(--font-script);
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--gold);
  font-style: italic;
}

.tagline__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   14. 聯絡資訊
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}

.contact-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mango);
  margin-bottom: 8px;
}

.contact-item__value {
  font-family: var(--font-serif);
  /* 🔴 2026-09-23 16:40 Owen：「我看到 EMAIL 為什麼最[後]一個字 換行了」。
     量出來的因果：上面的 grid 排到四欄時每欄只有 229px，
     而 sentiaserve@gmail.com 在 1.2rem（19.2px）需要 240px ⇒ 差 11px，
     `word-break: break-word` 就把最後一個字母 m 擠到第二行（只有 20px 寬的一行）。
     1200px 以上必現，1100px 以下因為變三欄、欄寬 279px 以上反而正常。

     ⚠ 這一組值的字級上限應該由**最長的那一筆**決定，不是挑一個好看的數字 ——
       原本的 220px / 1.2rem 都沒有拿 Email 驗算過。
     1.06rem ≈ 17px ⇒ Email 約 212px（餘裕 17px），服務時間那筆也從 217px 降到約 192px，
     四欄版面維持不變。往後若聯絡項目變長，要重算的是這一行。 */
  font-size: clamp(0.98rem, 1.8vw, 1.06rem);
  color: var(--jungle-deep);
  word-break: break-word;
}

/* 2026-09-23 16:40 Owen：「傳真底下沒有底線 電話有，這部份你要統一」。
   傳真沒有底線是因為它**不是連結**（沒有 fax: 這種 URI 可以用），
   所以不能靠「幫傳真也補一條底線」來統一 —— 那會讓一個不能點的東西看起來可以點。
   反過來做：平常四筆長得一模一樣，滑過去才出現底線與變色，點擊能力完全保留。
   底線用 transparent 而不是拿掉，版面高度才不會在 hover 當下跳一下（同卡片金邊那條坑）。 */
.contact-item__value a {
  color: inherit;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}

.contact-item__value a:hover,
.contact-item__value a:focus-visible {
  color: var(--mango);
  border-color: var(--mango);
}

/* 線上留言彈窗（2026-10-02 Owen：點 Email 才彈出，不常駐在頁面上）
   骨架照抄口味彈窗（.flavor-modal）：同一個遮罩色、同一顆關閉鈕、同樣鎖背景捲動，
   兩種彈窗看起來是同一套東西。
   面板底用 --coconut（奶白）不用 --paper —— --paper 是純白；輸入框才用純白，
   讓「可以填」的地方比面板本身亮一階 */
.contact-modal {
  position: fixed;
  inset: 0;
  /* 110：要壓過 sticky 頁首（z-index 100）。口味彈窗是 90、頁首會浮在遮罩上，
     那邊面板不高沒差；這張表單在手機上幾乎滿高，頁首會正好蓋住右上角的關閉鈕 */
  z-index: 110;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 40px);
}

.contact-modal[hidden] { display: none; }

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 14, 0.52);
  cursor: pointer;
}

.contact-modal__panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 640px);
  max-height: 94vh;
  display: flex;               /* 捲動交給裡面的表單：關閉鈕掛在面板上，捲表單時它不會跟著捲走 */
  overflow: hidden;
  background-color: var(--coconut);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.contact-modal__panel:focus { outline: none; }

.contact-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 18, 14, 0.62);
  color: var(--coconut);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-modal__close:hover,
.contact-modal__close:focus-visible {
  background: var(--mango);
  transform: scale(1.06);
}

.contact-modal__close svg {
  width: 18px;
  height: 18px;
}

.contact-form {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 40px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;            /* 手機上表單比視窗高，在面板裡捲（實測 375 寬內容 1059 ／可視 654） */
}

.contact-form__alt {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}

.contact-form__alt a {
  color: var(--jungle);
  border-bottom: 1px solid var(--line-strong);
}

.contact-form__title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--jungle-deep);
  text-align: center;
}

.contact-form__lead {
  margin: 0 0 24px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
}

/* 零售包裝提示：要寫信的人第一眼就看到，但不搶表單本身 —— 淡芒果底、置中一行 */
.contact-form__note {
  margin: -8px auto 22px;
  padding: 9px 16px;
  width: fit-content;          /* 短句時縮成一顆膠囊；手機上放不下就折行，不撐破面板 */
  max-width: 100%;
  border-radius: 10px;          /* 不用全圓：手機上折成兩行時全圓會變成怪形狀 */
  background-color: var(--mango-wash);
  font-size: 0.85rem;
  color: var(--jungle-deep);
  text-align: center;
}

/* 兩段各自不斷行：手機上只會在逗號後折，不會把「包裝」拆到兩行 */
.contact-form__note span { display: inline-block; }

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__field--full,
.contact-form__agree,
.contact-form__actions {
  grid-column: 1 / -1;
}

.contact-form label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}

.contact-form label small {
  margin-left: 4px;
  font-weight: 400;
  color: var(--ink-faint);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;           /* 手機 iOS 低於 16px 會在聚焦時自動放大，見下方 @media */
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 14px;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
}

.contact-form .contact-form__agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.contact-form__agree input {
  margin-top: 3px;
  padding: 0;
}

.contact-form__actions {
  margin-top: 6px;
  text-align: center;
}

.contact-form__actions .btn[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* 防機器人欄位：人看不到，機器人會自動填，Netlify 就把那筆丟掉 */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  text-align: center;
  background-color: var(--mango-wash);
  color: var(--jungle-deep);
}

/* 送出成功：欄位收起，只留標題＋感謝訊息＋關閉鈕（site.js showSent） */
.contact-form.is-sent .contact-form__lead,
.contact-form.is-sent .contact-form__note,
.contact-form.is-sent .contact-form__grid,
.contact-form.is-sent .contact-form__alt { display: none; }
.contact-form.is-sent .contact-form__status {
  padding: 22px 20px;
  font-size: 1.02rem;
  line-height: 1.8;
}
.contact-form__done {
  display: block;
  margin: 20px auto 0;
}
.contact-form__done[hidden] { display: none; }

.contact-form__status.is-error {
  background-color: #FBE9E4;
  color: #8A2E1C;
}

@media (max-width: 640px) {
  .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   14-1. 服務保證列（三頁共用，緊貼頁尾上方）
   深綠頁尾之前先墊一條淺沙色帶，讓頁面收尾不會從白直接切到深色。
   內容全部取自站上既有事實，沒有新增任何承諾
   -------------------------------------------------------------------------- */
.promise-band {
  /* ⚠ 2026-09-22 試過在這裡鋪壓紋葉框，撤掉了：這一帶的三欄文字佔滿整個
     內容欄、左右沒有留白，葉子直接壓在字上；而且帶高只有 240px，
     邊帶上下的羽化會被切掉，又冒出硬邊。壓紋改掛在「品牌故事摘要」與
     「品牌歷程」那兩段（見 .section--paper-frame）。 */
  background: var(--sand);
  border-top: 1px solid var(--line);
  /* 下緣要多留一個 --wave-h：頁尾用負 margin 往上疊了那麼多來畫波浪
     （見「15. 頁尾」那節），不補這段的話波峰會啃到「二十年品牌」那排字。
     這個區塊在三頁都緊接著頁尾，所以直接寫在這裡，不必另開修飾類別。 */
  padding-block: clamp(28px, 4vw, 44px)
                 calc(clamp(28px, 4vw, 44px) + var(--wave-h));
}

.promise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(20px, 3vw, 38px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.promise {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.promise__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* 沙色底上用白底圓形，與首頁三大重點的圖示同一套語彙 */
  background: var(--paper);
  /* 2026-09-30 內外兩圈（外粗內細），理由見 .pillar__icon。白圓小一號，線與空隙跟著收 */
  border: 1px solid var(--mango);
  outline: 2.5px solid var(--mango);
  outline-offset: 2px;
  color: var(--mango);
}

/* 2026-09-29 14:57 Owen：「承諾帶的白圈比例 比照上方的首頁上方那三個」。
   首頁三大重點是白圓 56 ／ 圖案 38 ＝ 68%（09-28 量出來的上限，盾牌離圓邊剩 5.5px）。
   這裡白圓 44，等比就是 44 × 0.68 ≒ 30。**白圓不動，只放大圖案** ——
   09-28 與 09-29 兩次都證實過：跟著白圓一起縮放，「圖案在白圓裡佔多少」不會變，
   而那正是唯一看得出差別的量。 */
.promise__icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.promise__title {
  font-size: 1rem;
  color: var(--jungle-deep);
  margin: 0 0 2px;
}

.promise__text {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

/* 口味頁的精簡版（2026-09-24 16:36 Owen 選 C：「口味頁縮成一行細字」）
   口味頁本身就是 15 支口味的完整清單，再擺一次三欄說明等於同樣的話講第三遍。
   ⚠ 底色仍是 --sand、上下仍留 --wave-h —— 頁尾波浪那段（見 15. 頁尾）
     假設「三頁頁尾上方都是 .promise-band 且底色 --sand」，這條不能動。 */
.promise-band--slim {
  padding-block: clamp(16px, 2.2vw, 24px)
                 calc(clamp(16px, 2.2vw, 24px) + var(--wave-h));
}

.promise-band--slim .promise-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* 2026-09-24 16:43 Owen：「中間也要保持間距 才不會覺得東西縮成一團」
     桌機的實際間隔 = 這個 gap ＋ 分隔點 4px ＋ 點的 margin ＋ .promise 自己的 gap
     ⇒ 44 + 4 + 30 + 10 = 88px（原本只有 48px）。
     用 vw 中段而不是固定值：窄螢幕要收得回來，否則三個詞在 480px 就會折行。 */
  gap: clamp(16px, 3.4vw, 44px);
}

.promise-band--slim .promise {
  align-items: center;
  gap: 10px;
}

/* 項目之間點一個細點當分隔，第一項前面不放 */
.promise-band--slim .promise + .promise::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mango);
  opacity: 0.55;
  margin-right: clamp(10px, 2.2vw, 30px);
}

/* 2026-09-24 16:43 Owen：「你的字就變得太小了，另外 外面的圈圈也也不見了」
   第一版把圈圈拿掉、字壓到 0.82rem，理由是「精簡＝要更輕」—— 錯了兩件事：
   ① 白底圓圈是這個網站的圖示語彙（見上面 .promise__icon 的註解，首頁三大重點同一套），
      拿掉等於這一頁自己長得不一樣，那不是精簡是走樣
   ② 一行裡只剩三個詞的時候，字級要往上不是往下 ——
      原本 0.82rem 是「標題 1rem ＋ 說明 0.82rem」裡說明文的級數，
      現在標題就是唯一的內容，卻套了說明文的字級，整條看起來像註腳
   改成：圈圈留著（44 → 34px 等比縮），字級 0.82 → 0.95rem、顏色回品牌深綠 */
.promise-band--slim .promise__icon {
  width: 34px;
  height: 34px;
  outline-width: 2px;
  outline-offset: 1.5px;
}

/* 口味頁精簡版的桌機：白圓 34，同樣套 68% ⇒ 34 × 0.68 ≒ 23（原本 18 ＝ 53%）。
   手機版另外在下面的 media query 指定（26/18 ＝ 69%、22/16 ＝ 73%），
   那兩組是 Owen 14:43「圖案不要縮」＋ 14:53「改這樣可以」定下來的，不跟著動。 */
.promise-band--slim .promise__icon svg {
  width: 23px;
  height: 23px;
}

/* 2026-09-24 16:47 Owen：「你用了不一樣的字體，修正一下」
   我把 h3 改成 span 想避免「沒有下轄內容的假標題」，結果標題掉出
   `h1, h2, h3, h4 { font-family: var(--font-serif) }`（site.css:130），
   整條從 Noto Serif TC 變成內文的 Noto Sans TC —— 換了元素就換了字體，而且不會報錯。
   已改回 h3；這裡只留字級，字體／字重／字距一律讓 h3 的規則決定。
   ⚠ 網頁字型只載了 Noto Serif TC 700（見三頁 <head> 的 Google Fonts 連結），
      在這裡自訂 font-weight 會逼瀏覽器合成假粗細，不要加。 */
.promise-band--slim .promise__title {
  font-size: 0.95rem;
  margin: 0;
}

/* 2026-09-29 14:40 Owen：「那你白圈縮小一點」——
   他要的是「排成一排」，但不肯讓字變小（9/24 已判 0.82rem「太小」），
   所以省空間只能從**圈圈與間距**下手。這是他指定的手段，不是我挑的。

   預算表（390 寬的手機，扣掉下面改小的 gutter 12px，可用 366px）：

   | 項目                          | 寬度  |
   |-------------------------------|-------|
   | 17 個字 × 1.03em × 14.08px    | 246.5 |  ← 1.03 是 h3 的 letter-spacing 0.03em
   | 三個白圈 3 × 22               |  66   |
   | 項內間距 3 × 6                |  18   |
   | 項間間距 2 × 10               |  20   |
   | **合計**                      | 350.5 |  餘 15.5

   🔴 三個數字是一路試出來的，**動其中一個就要重算整張表**：
   ① `letter-spacing: 0.03em` 來自 `h1,h2,h3,h4` 的通則（site.css:134），
      而且 CSS 會在**最後一個字後面也加一次**，17 個字要算 17 份不是 16 份。
      我第一次算漏了它，整條差了 7px —— 剛好是「看起來還有空間」與「擠爆」的距離。
   ② 分隔點已在下面拿掉。留著的話兩項之間要多 4px ＋ margin，一排就塞不下。
   ③ gutter 從站台通則的 clamp(20px,5vw,48px) 改成 12px，只給這一條帶子。
      多出來的 16px 正是讓 375 寬的機子也排得下的那 16px。

   ⚠ **360 寬以下仍然會折成兩排**（可用 336 < 350.5），這是刻意留的 ——
      再壓下去就要動字級，那是 Owen 明確否決過的方向。折行後靠 row-gap 撐開，
      看起來是「兩排」不是「被擠下去」。 */
@media (max-width: 560px) {
  .promise-band--slim .wrap { padding-inline: 12px; }

  .promise-band--slim .promise-list {
    gap: 10px;
    row-gap: 14px;
  }

  /* 分隔點在折行時會跑到第二排的行首，語意上變成「這項是被擠下來的」。
     一排排得下的時候它也只是在吃寬度，手機版一律不要。 */
  .promise-band--slim .promise + .promise::before { display: none; }

  .promise-band--slim .promise { gap: 6px; }
  /* 2026-09-29 14:43 Owen：「你縮白圈就好了 圖案不要縮」。
     ⇒ svg 維持改版前的 18px，只把白圈從 34 收到 26（圖案佔圓 69%）。
     這個比例正好落在 09-28 首頁三大重點定下的 68% 上 —— 那次量過，
     盾牌是三顆裡最寬的一顆，68% 時離圓邊還有 5.5px，再大就貼邊了。 */
  .promise-band--slim .promise__icon { width: 26px; height: 26px; }
  .promise-band--slim .promise__icon svg { width: 18px; height: 18px; }
}

/* 420 以下再收一級。字級 0.95 → 0.88rem 是 2026-09-24 就定的（桌機仍是 0.95，
   Owen 當時說小的是桌機那一版），這裡只再把白圈從 26 收到 22，圖案不動。 */
@media (max-width: 420px) {
  .promise-band--slim .promise__title { font-size: 0.88rem; }
  /* 圖案同樣不縮（維持 16px），只有白圈再收一級 26 → 22（圖案佔圓 73%）。
     盾牌的墨水約是外框的 75%，16px 時墨水 12px，離 22px 的圓邊還有 5px —— 到底了，不要再收。 */
  .promise-band--slim .promise__icon { width: 22px; height: 22px; }
  /* Owen 2026-09-29 17:30：「375為可入就好了 往下不考慮」。
     買寬度挑「不影響觀感」的地方，不動字級、圖案、白圈（14:43 與 14:53 已定案）：
     ① wrap 左右內距 12 → 8。這一列是置中的（justify-content: center），
        看得到的左右留白是 (可用 − 需要) 的一半，跟這個內距無關 ——
        它只決定上限，收小不會讓東西看起來更靠邊。
     ② 項間距 10 → 8（寫 column-gap，不要用 gap，否則會把上面的 row-gap 14 一起重設）。
     ③ 字距歸零（見下）。

     🔴🔴 2026-09-29 18:05 的「更正」本身是錯的，18:12 撤回 —— 留在這裡當警告。
     當時用桌機 Chrome 的 iframe 量，得到「375 餘裕 −2.56px、折成兩排」，
     據此判定 `_檢查_版面預算.ps1` 漏算捲軸、差點對客戶發出假警報。
     **真正的錯在量測環境**：桌機 Chrome 的古典捲軸在這台機器上吃掉 **30 CSS px**
     （dPR 0.5 × 15 實體 px），而**手機是 overlay 捲軸、不佔寬度**。
     於是 iframe 量到的「可用」比真手機少 30px，數字看起來完全正常。
     在 iframe 內注入 `html{scrollbar-width:none}` ＋ `::-webkit-scrollbar{display:none}`
     之後，`innerWidth === clientWidth === 目標寬度`，媒體查詢與可用寬度才同時正確。
     ⇒ 重量：375 可用 360／需要 346.56／餘裕 **+12.44** —— **腳本從頭到尾都是對的。**
     ⇒ 同 09-18 `resize_window`、09-21 背景分頁 rAF：**工具回報成功、數字看起來正常，
       但量的根本不是那件事。**判定「既有實作有 bug」之前，先懷疑量尺。

     ③④ 以下兩項不是為了修 bug（沒有 bug），是**順手把覆蓋範圍往下推一級**：

     ③ 字距歸零：`h1,h2,h3,h4` 的全域 `letter-spacing: 0.03em`
        在 14.08px 下是 0.4224px/字，而 CSS 的字距**最後一個字後面也會加**，
        6 字＝6 份。三支標題共 17 字 ⇒ 7.18px，扣掉後 需要 346.56 → 339.38。
        14px 上的 0.42px 看不出來，這是這一段裡最划算的一筆。
     ④ 項間距再 8 → 6，換 4px。每一項自己還有 6px 的圈到字留白，
        Owen 09-24「中間也要保持間距 才不會覺得東西縮成一團」仍然成立。

     ⇒ 需要 335.38／可用 344／**餘裕 8.6px**（瀏覽器實測，不是算的）。
       360 仍是兩排（他明講「往下不考慮」）。
     🔴 這一段的數字**以瀏覽器 iframe 實測為準**，`_檢查_版面預算.ps1` 只是便宜的前置檢查。 */
  .promise-band--slim .wrap { padding-inline: 8px; }
  .promise-band--slim .promise-list { column-gap: 6px; }
  .promise-band--slim .promise__title { letter-spacing: 0; }
  .promise-band--slim .promise__icon svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   15. 頁尾
   -------------------------------------------------------------------------- */
/* 頁尾的葉叢底圖（2026-09-21 15:56 Owen：「瑞瑞這張圖拿來做 FOOT」）
   用的是他 16:22 重生的 5:2 版 `tg_20260921_162203`（1280x514），不是 15:56 那張。
   他自己問「需要我把它改成 5:2 比例嗎 你會比較好裁切嗎」，然後就做了 ——
   量出來左右葉叢各佔 16.2%、中央 67.6% 完全淨空（`_腳本\_量_頁尾葉叢.ps1`），
   第一張是左右各 30% 且中央有葉尖飄進來，這張好得多。

   為什麼仍然切成左右兩塊、不整張鋪：
     5:2 已經接近頁尾比例，但頁尾的實際比例會隨視窗寬度在 2.3~3.1 之間跑，
     手機版更是變成直的（約 0.5）。切成兩塊之後左塊貼左、右塊貼右、
     中間交給 background-color，**任何寬度都成立**，葉叢大小只跟頁尾高度連動。
   圖的底色已經從 #1B3628 平移到 --jungle-deep #0F2E23，接縫量到只差 1 階。
   🔴 底色必須寫 background-color，不能用 `background:` shorthand ——
      shorthand 會把 background-image 一起重設成 none（09-07 金邊那次踩過）。 */
.site-footer {
  background-color: var(--jungle-deep);
  background-image: url("../img/footer-leaves-left.jpg"),
                    url("../img/footer-leaves-right.jpg");
  /* 往外出血 40px：把最外側那一段葉子推出畫面，換取文字側 40px 的餘裕。
     原圖左右緣的葉子本來就是被畫框切斷的構圖，切口又落在畫框上，
     再切一點不會露出破綻。
     🔴 出血量不是抓的，是從下面那條安全線回推的 —— 40px 讓葉叢右緣落在
        206→166px，1366（最常見的筆電寬度）的深入率因此從 52% ✗ 變成 65% ✅。 */
  background-position: -40px 0, calc(100% + 40px) 0;
  background-repeat: no-repeat, no-repeat;
  background-size: auto 100%, auto 100%;
  color: var(--on-dark-soft);
  font-size: 0.92rem;

  /* 🔴 波浪交界由頁尾自己畫，上方不再放 .wave 元素。
     2026-09-21 16:35 Owen：「你的圖片沒有切齊波浪邊」。
     舊做法是 .wave 畫一條純色波浪、頁尾的底圖從波浪「下方」才開始 ——
     於是葉叢上緣是一條水平直線，停在波浪下面的深綠裡。
     那正是 09-08 學到的那條規則反過來踩：**直邊只有貼齊畫框才成立**，
     停在畫面中間的直邊一律讀成「這張圖被切壞了」。

     做法：頁尾往上吃掉一個 --wave-h，再用兩層遮罩把上緣裁成波形。
     這樣 background-size 的 100% 從波浪頂端起算，葉叢是連續的一整塊，
     上緣自動跟著波浪走，不需要對齊任何東西。
     被遮掉的部分會透出上方 .promise-band 的 --sand，
     與舊的 .wave--sand-to-dark 呈現完全相同的配色。 */
  margin-top: calc(-1 * var(--wave-h));
  padding-block: calc(var(--wave-h) + clamp(52px, 7vw, 72px)) 28px;

  /* 🔴 2026-09-21 18:00 做法 7 上站：改用「覆蓋層」，不再用 mask 裁自己。
     Nick 18:00 回「a」＝ 形狀＋金邊＋會漂，全套照 09-18 定案搬上來。

     為什麼不能沿用 16:35 那版的 mask：
       mask 會連同子元素與**偽元素**一起裁掉 ——
       金色層放進頁尾裡就永遠冒不出波浪上緣，等於看不到。
     改法：頁尾維持完整矩形，在上緣鋪兩層覆蓋層（見下方 ::before / ::after），
     用 --wave-tile-b-top（填曲線以上的補形）當遮罩把它們裁成波浪。
       · 奶白層蓋住的部分，本來在 mask 版就是要透出 .promise-band 的 --sand
         ⇒ 顏色一模一樣，改的只是「誰畫這塊」
       · 兩層都只有 --wave-h 高、動的是 translate（走合成層）
         ⇒ 頁尾本體與兩張葉叢底圖**一格都不重繪**，比測試頁那版還省
     ⚠ 這條成立的前提是「三頁頁尾上方都是 .promise-band 且底色 --sand」。
        改版面時要一起看，換成別的底色就要同步改 ::after 的 background-color。 */
  position: relative;
  overflow: hidden;      /* 覆蓋層是 175~190% 寬，要裁在頁尾裡面 */
}

/* ---- 做法 7 的兩層波浪覆蓋層 ------------------------------------------
   由上而下：奶白（::after）→ 金邊（::before）→ 頁尾本體。
   可見的交界線一律是奶白層的曲線；金邊在它下面，厚度 = 兩條曲線的落差，
   兩層波長不同（90% vs 75% 頁寬）⇒ **金邊自己變粗變細**，不是等寬描邊。
   這是刻意的，不是沒對齊。 */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* 🔴 2026-10-01 B-02：盒子比波浪帶多長 12px，遮罩高度仍是 --wave-h（見兩層的 mask-size）。
     Nick 14:01 截圖量到線在 y=831~832：1 CSS px、全寬、x=100/450/800 三處顏色一模一樣
     （深綠 +7~8，約 3.5% 淺色）⇒ 與波形無關，是某個「盒子邊」。
     而波浪帶下緣這個 y 同時是兩件東西的邊：這兩層覆蓋層的盒底、.promise-band 的盒底
     （瀏覽器實測兩者都在 5177.98，分數像素）。
     盒底往下移 12px、而這 12px 落在遮罩外（看不見）：線消失＝修好；
     線跟著往下 12px＝元凶是覆蓋層盒邊；線不動＝元凶是 .promise-band 盒邊。
     ⚠ 9/30 在兩層「帶底墊深綠」那一招已撤掉 —— 墊的位置在遮罩透明區，從來沒有畫出來過。 */
  /* 🔴 2026-10-02 B-02 真正的根因與修法（取代上面 10-01 那個 +12px 實驗）：
     Owen 00:41 正式站截圖（2559 寬、縮放約 1.43）線在波浪帶底、亮 +28；本機 1920／縮放 1 重現不出來，
     html zoom 1.43 ＋ 波浪動畫停在中途就重現（亮 +14、1 列）。
     ⇒ 是**遮罩磚的上下緣**：磚高 = --wave-h，非整數縮放時 GPU 取樣會讓磚的最後一列和第一列混色，
        帶底那一列奶白層變成半透明奶白 ＝ 深綠上一條淡線；同理帶頂那列會在奶白上露出一條暗線。
        盒子加高 12px 沒用，因為磚的邊仍然停在帶底。
     修法：磚上下各墊一段（viewBox 0 -20 1080 120，上墊填滿、下墊透明，曲線座標不動），
        磚高 1.5 倍、盒子往上提 0.25 倍 ⇒ 磚頂落在頁尾外（被 overflow:hidden 裁掉）、
        磚底在 1.25 倍處，比盒底（1.15 倍；scale 1.12 後 1.168）更低 ⇒ 兩個邊都不在可見範圍。 */
  top: calc(var(--wave-h) * -0.25);
  height: calc(var(--wave-h) * 1.4);
  pointer-events: none;
  transform-origin: 50% calc(var(--wave-h) * 1.25);   /* 帶底（scale 的支點不變） */
}

/* 金色層：磚 = 90% 頁寬，等速左移。
   🔴 底色寫 background-color、漸層寫 background-image ——
      用 `background:` shorthand 會把另一個重設掉（09-07 金邊那次踩過）。
   三個停點不是抄參考圖的原值：Owen 16:29 那張量到的是 #B09A5F → #DFC875，
   明度只差 14 個百分點，但**那顆按鈕只有 70px 寬，這裡是整個畫面寬** ——
   同樣的明度差攤在 20 倍寬度上就看不出來了（Nick 09-18 16:46 退過一次）。
   ⇒ 深端換成品牌金 --gold #8F6528（明度 36%）、亮端提到 #F2E09C（76%），
     差距拉到 40 個百分點；中間多一個停點讓亮帶收窄成「反光」而不是一片平均的亮。
   漸層週期刻意等於一塊磚（元素寬 175% ÷ 2 = 87.5%）⇒ 橫移之後漸層接回原位，
     不會看到一塊亮斑在畫面上爬。

   🔴 18:13 Owen 截圖「好像還有漏邊」——「金層用另一個波長」那版是錯的，這裡是修正後的版本。
      錯在哪：做法 7 原本是「金在深綠**後面**、從上緣往上露」，我搬過來時翻成
      「金在奶白**下面**」，但沒有重推兩條曲線交叉時會怎樣 ——
      金層曲線一旦升到奶白曲線之上，**深綠就直接頂到奶白底下**，
      在波峰處夾出一條深綠細楔（放大 5 倍確認：`_生成圖診斷頁尾漏邊_5倍.png`）。
      翻轉前後關係不是換個寫法，是換一組可見性規則，要整個重推一次。
   ⇒ 金層改成**與奶白層同波長、同相位、同一個位移動畫**，曲線往下偏移 6%。
      這樣 金線 = 奶白曲線 + 6%，恆為正，兩條線永遠不會交叉。
      🔴 那 6% 是做在**磚**裡的（--wave-tile-b-top-6，整條路徑 y 加 4.8），不是靠元素 translate。
         理由寫在 :root 那條變數的註解：元素下移會讓金層上緣退到帶高 6%，
         而奶白層 scale 1.12 時波峰會升到 4.5%，中間那 1.5% 又會漏出深綠。
      厚度仍會呼吸（奶白層多一個 scale 1.12 而金層沒有 ⇒ 落差在 8.6%~16.3% 帶高之間擺動），
      但不會再出現做法 7 那種「粗到 50px」的金塊 —— 這也比較貼近 Owen 09-18 的
      「金色只是點綴與對比效果，用太多看起來就太花了」。 */
.site-footer::before {
  width: 175%;
  z-index: 1;
  background-color: var(--gold);
  background-image: repeating-linear-gradient(90deg,
                      var(--gold)  0,
                      #C9A75A      14%,
                      #F2E09C      23.684211%,
                      #C9A75A      33.5%,
                      var(--gold)  47.368421%);
  -webkit-mask: var(--wave-tile-b-top-6-pad) repeat-x left top / calc(100% / 2.3333333) calc(var(--wave-h) * 1.5);
          mask: var(--wave-tile-b-top-6-pad) repeat-x left top / calc(100% / 2.3333333) calc(var(--wave-h) * 1.5);
  animation: wave-gold-drift 22s ease-in-out infinite alternate;
}

/* 奶白層：磚 = 75% 頁寬，來回擺 ＋ 微幅起伏。這層畫的就是看得見的那條交界線。
   scale 從 bottom 起算，1.12 倍時波峰距底 0.8531 × 1.12 = 0.9555 < 1 ⇒ 不會被切平。 */
.site-footer::after {
  width: 175%;
  z-index: 2;
  background-color: var(--sand);
  -webkit-mask: var(--wave-tile-b-top-pad) repeat-x left top / calc(100% / 2.3333333) calc(var(--wave-h) * 1.5);
          mask: var(--wave-tile-b-top-pad) repeat-x left top / calc(100% / 2.3333333) calc(var(--wave-h) * 1.5);
  animation: wave-edge-drift 22s ease-in-out infinite alternate,
             wave-edge-swell  7s ease-in-out infinite alternate;
}

/* translate 的 x/y 是同一個屬性，Y 的位移必須寫進 keyframes，分開寫會互相覆蓋 */
@keyframes wave-gold-drift {
  from { translate: 0 0; }
  to   { translate: calc(-100% / 2.3333333) 0; }
}
@keyframes wave-edge-drift {
  from { translate: 0 0; }
  to   { translate: calc(-100% / 2.3333333) 0; }
}
@keyframes wave-edge-swell {
  from { scale: 1 1; }
  to   { scale: 1 1.12; }
}

/* 尊重系統的「減少動態效果」—— Nick 09-18 17:06 選 A。
   關掉之後兩層停在上面寫的靜態值，波浪與金邊照樣在，只是不動。 */
@media (prefers-reduced-motion: reduce) {
  .site-footer::before,
  .site-footer::after { animation: none; }
}

/* 🔴 下面三段斷點是量出來的，不是抓的。
   量法：文字左緣落在葉叢的第幾 %（0% = 最外側、金線最密），
   再回頭量「文字從第 N% 壓上去」的最壞對比：

     從 50% 起　95 分位 3.18 ✗      從 63% 起　6.28 ✅
     從 60% 起　95 分位 5.73 ✅     從 84% 起　7.25 ✅

   ⇒ 安全線是「文字不要深入超過葉叢的 60%」。

   🔴 量的必須是「頁尾裡最左邊那個有墨的元素」，不是隨手挑一個文字區塊。
      這裡最左的其實是頁尾 LOGO 的 <img>，比 tagline 還左 48px ——
      先前挑 .site-footer__tagline 量，得到的深入率偏樂觀（09-11「尺對了、
      量的東西不對」同型）。

   文字左緣實測是 (視窗寬 - 1120) / 2 + 33（wrap 1120 置中，LOGO 再往內 33px），
   葉叢右緣出血後是 165~166px ⇒ 要 60% 得有 99px ⇒ 視窗至少 1252px。
   取 1260 留 8px 餘裕。各寬度實測（停用斷點、強制大葉叢模式量出來的）：

     1600 → 273/166 = 164% ✅   1280 → 113/165 = 68% ✅
     1440 → 193/166 = 116% ✅   1200 →  73/161 = 45% ✗
     1366 → 156/166 =  94% ✅   1100 →  48/156 = 31% ✗
     1360 → 153/166 =  92% ✅   1000 →  48/148 = 32% ✗

   ⚠ 1366（最常見的筆電）與 1280 都落在安全側 —— 出血 40px 就是為了這個。
     換圖或改 wrap 寬度時這一串要重算，不要沿用。
   ⚠ 判準用 95 分位不是 99 分位：99 分位量的是「最亮的那 1% 像素」，
     也就是單獨一條金線剛好穿過筆畫的情況。WCAG 的 4.5 是為大面積背景訂的，
     拿去判一條細線會過嚴（09-18 那條：把 1.48 說成「看不到」是講過頭了）。 */

@media (max-width: 1260px) {
  /* 這個寬度以下，頁尾文字會從很靠左的位置開始排，葉叢無論怎麼縮都會被壓到。
     改成讓葉叢退進「文字上方那條空白帶」，金色仍然看得到，但完全不跟文字重疊。

     🔴 那條空白帶就是頁尾自己的 padding-top ＝ var(--wave-h) + clamp(52px,7vw,72px)，
        **會隨視窗寬度縮小**：1260 寬時 143px，1100 寬只剩 134px，861 寬只剩 108px。
        所以葉叢高度必須壓在最窄處（861，緊接著下一段就關掉圖）也放得下的尺寸。
        100px 是這樣訂出來的 —— 一度寫 140px，量出 1100 寬會超出空白帶 6px 壓到文字。

     🔴 同時取消出血（position 回到 left/right top）。
        出血 40px 是為了大葉叢訂的；100px 高的圖塊只有 47px 寬，
        再出血 40px 就只剩 7px，等於整片葉子都推出畫面了。 */
  .site-footer {
    background-size: auto 100px, auto 100px;
    background-position: left top, right top;
  }
}

@media (max-width: 860px) {
  /* 空白帶只剩 52~72px，葉叢縮到那個尺度只有 30px 寬 —— 看起來像髒點不像裝飾。
     不如不放，讓手機版的頁尾保持乾淨。 */
  .site-footer {
    background-image: none;
  }
}

/* LINE 按鈕是 grid 的直屬子元素（手機版要把它挪到「聯絡方式」標題右邊），
   桌機仍排在 logo 下方，位置改由 grid-template-areas 決定。
   列間距設 0：各區塊上下的距離本來就由自己的 margin 控制，
   若讓 row-gap 跟著欄距走，logo -> LINE 的 20px 會被撐成 32~64px */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  grid-template-areas:
    "brand contact qr"
    "line  contact qr";
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: 0;
  align-items: start;
}

.sf-brand {
  grid-area: brand;
}

.sf-contact {
  grid-area: contact;
}

/* 頁尾使用直式 logo（椰子樹造型），南洋識別度較橫式高 */
.site-footer__logo img {
  width: 168px;
  margin-bottom: 22px;
}

/* LINE 分享按鈕 */
.share-line {
  grid-area: line;
  /* 成為 grid item 後預設會被拉滿整欄，要收回成內容寬度 */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 20px;
  border: 1px solid rgba(246, 242, 233, 0.28);
  border-radius: 999px;
  color: var(--on-dark-soft);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.share-line:hover {
  background: #06C755;
  border-color: #06C755;
  color: #fff;
}

.share-line svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}

/* 2026-09-18 Owen：「這樣太囉唆，排版也長得很奇怪」→ 只留一句（Q2 選 1）。
   量出來的根因不只是字多：原本 max-width 26em 讓這塊寬 383px，
   而它要對齊的 LOGO 只有 168px，差 2.3 倍，看起來就像沒對齊。
   收到 13em（約 190px）跟 LOGO 同一個量級；一行字本來就不會被它截斷。 */
.site-footer__tagline {
  max-width: 13em;
  line-height: 1.8;
}

.site-footer__title {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mango-light);
  margin-bottom: 18px;
}

.footer-contact li + li {
  margin-top: 10px;
}

.footer-contact dt {
  display: inline;
  color: var(--on-dark);
}

.footer-contact dd {
  display: inline;
  margin: 0 0 0 12px;
}

.footer-contact a {
  color: var(--on-dark-soft);
  border-bottom: 1px solid rgba(246, 242, 233, 0.24);
}

.footer-contact a:hover {
  color: var(--mango-light);
  border-color: var(--mango-light);
}

.site-footer__qr {
  grid-area: qr;
  display: block;
  /* 原本是 <figure>，靠瀏覽器預設的 margin（1em 40px）跟相鄰欄拉開距離。
     換成 <a> 之後那份預設就沒了，這裡明寫回來，桌機版面才跟改版前一致 */
  margin: 1em 40px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

.site-footer__qr img {
  width: 108px;
  padding: 8px;
  background: var(--on-dark);
  border-radius: 10px;
}

.site-footer__qr-caption {
  display: block;
  margin-top: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--on-dark-soft);
}

.site-footer__bottom {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(246, 242, 233, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(246, 242, 233, 0.5);
}

/* --------------------------------------------------------------------------
   16. 進場動畫（尊重使用者的減少動態偏好）
   -------------------------------------------------------------------------- */
/* 進場動畫的隱藏狀態，只在 <html> 帶有 .js-reveal 時才套用。
   該 class 由 site.js 在確認動畫機制可運作後才加上，因此在
   停用 JS、瀏覽器不支援、或動畫機制失效的情況下，內容一律
   直接可見 —— 動畫失敗只會失去動畫，不會讓內容消失。 */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   17. 響應式
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .story {
    grid-template-columns: 1fr;
  }

  .story__media {
    order: -1;
  }

  /* 窄螢幕收斂不對稱圓角，避免右上角切掉太多畫面 */
  .story__media img,
  .story__media::before {
    border-radius: 20px 56px 20px 20px;
  }

  .story__media::before {
    inset: 18px -14px -14px 18px;
  }

  /* 拼貼跟著收斂圓角，與上面的場景照規則保持一致 */
  .scoop-collage {
    border-radius: 20px 56px 20px 20px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand contact"
      "line  contact"
      "qr    qr";
  }

  /* 2026-09-18 Owen：「讓 QR CODE 置中」。降為兩欄後這一列獨佔整寬，
     原本靠左會看起來像沒排好；桌機版本來就是 center。 */
  .site-footer__qr {
    margin-top: clamp(32px, 5vw, 64px);
    text-align: center;
  }

  /* 口味頁：窄於 900px 時由三欄降為兩欄
     （特異性須與桌機規則相同，否則會被 .flavor-section .flavor-grid 蓋掉） */
  .flavor-section .flavor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tagline {
    grid-template-columns: 1fr;
  }

  .tagline__media {
    order: -1;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  /* 手機版：選單改為由上展開的面板 */
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--jungle-deep);
    /* 🔴 2026-10-01：收合時 max-height 0，但 border-top 不算在 max-height 裡，
       照樣在頁首下緣畫出一條 1px 淺線（Nick 14:01 截圖 y=239~240，深綠 +10）。
       ⇒ 收合時邊線透明，展開才顯色。陰影同理，收合時也不該有。 */
    border-top: 1px solid transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, border-color 0.3s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
    border-top-color: rgba(246, 242, 233, 0.12);
    box-shadow: 0 18px 30px rgba(15, 46, 35, 0.28);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }

  .site-nav a {
    padding: 14px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(246, 242, 233, 0.08);
  }

  .site-nav a[aria-current="page"]::after {
    left: 4px;
    right: auto;
    width: 28px;
    bottom: 8px;
  }

  .site-header__inner {
    position: relative;
  }

  .hero {
    min-height: auto;
  }

  .hero__media img {
    object-position: center 38%;
  }

  .flavor-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .flavor-card {
    padding: 18px 10px 22px;
  }

  .flavor-card__media {
    width: min(160px, 94%);
  }

  .flavor-card__name {
    font-size: 1.12rem;
  }

  /* 英文副標在窄螢幕仍維持易讀的字級 */
  .flavor-card__en {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .flavor-card__desc {
    font-size: 0.95rem;
  }
}

@media (max-width: 560px) {
  /* 2026-09-29 Owen：「QRCODE 移到 LOGO 的右邊，LINE 分享則是放到聯絡方式右邊，
     這樣縮短頁腳比較好」。頁腳高度 847 -> 579（390 寬實測）。
     LINE 按鈕不能跟聯絡清單並排成兩欄：清單最長的 Email 那行要 224px 才不換行，
     360 寬時整個頁腳只有 290px 可用，並排一定擠爆。
     改成把 LINE 疊進 contact 這一格、靠右上 —— 視覺上就落在「聯絡方式」標題右邊，
     清單仍然佔滿整行寬度。 */
  .site-footer__grid {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand qr"
      "contact contact";
    column-gap: 14px;
    row-gap: 24px;
    align-items: center;
  }

  /* 縮一點讓 QR 在同一列有位置（168 在 360 寬剛好卡滿，標語會被擠掉） */
  .site-footer__logo img {
    width: 140px;
    margin-bottom: 14px;
  }

  .site-footer__tagline {
    max-width: none;
    font-size: 0.88rem;
  }

  .site-footer__qr {
    margin: 0;
    justify-self: end;
  }

  /* Owen 2026-09-29 13:07：「用 LINE 分享 按鈕，和「時間」對齊高度」。
     標題 16px ＋ 它的 margin-bottom 18px ＝ 34px，就是清單第一行的頂端；
     「時間」那行高 27、按鈕高 44，要中線對齊得再往上 (44-27)/2 ≈ 9px */
  .share-line {
    grid-area: contact;
    align-self: start;
    justify-self: end;
    margin: 28px 0 0;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  /* Owen 2026-09-29 13:14：「可以 寫分享就好」。
     按鈕與「時間」那行同高之後會跟它搶同一排，寫滿「用 LINE 分享」在 360 寬
     會直接蓋到時間的文字上（實測重疊 25px）。圖示留著，看得出是 LINE */
  .share-line__long {
    display: none;
  }

  /* 窄螢幕改成 grid 兩行（3+2），避免橫向捲動把後面的分類藏起來。
     6 等分欄位：前三個各跨 2 格（第一行三等分），後兩個各跨 3 格（第二行對半） */
  .filter-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    overflow-x: visible;
    justify-content: stretch;
    padding-bottom: 0;
  }

  .filter-btn {
    flex: none;
    white-space: nowrap;
    padding: 10px 8px;
    letter-spacing: 0.02em;
    min-width: 0;
  }

  .filter-btn:nth-child(-n + 3) {
    grid-column: span 2;
  }

  .filter-btn:nth-child(n + 4) {
    grid-column: span 3;
  }

  /* 窄螢幕下按鈕各佔一行，避免文字被擠成兩行，也更好點擊 */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    justify-content: center;
  }

  /* 三欄數字在窄螢幕會擠成兩行字，改為直向排列 */
  .stats {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* 直向排列後，分隔線要從左邊改到上方 */
  .stat + .stat {
    border-left: 0;
    border-top: 1px solid rgba(246, 242, 233, 0.16);
    padding-top: 28px;
  }
}

/* --------------------------------------------------------------------------
   18. 列印
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .hero__actions,
  .filter-bar,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .flavor-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}

/* --------------------------------------------------------------------------
   21. 區塊交界波浪（2026-09-18）
   Owen 的規格是四則訊息長出來的：
     14:25「像這樣的波形呢」＋參考圖 tg_20260918_142515_538802936.jpg
     14:25「自然一點」
     14:28「交界的地方疊一層裝飾，這樣視覺上會比較立體」        → 做了兩層
     14:50「你的波浪看起來好僵硬，你再看看我剛剛給你的網頁，先照作看看
            另外，也不要半透明的區塊，看起來太多層了」          → 兩層撤回，改單層＋照抄波形

   🔴 「僵硬」的根因不是感覺問題，是**週期數量差了三倍**。
      第一版我用「整個頁寬一個週期」＋振幅 2%，那等於一條慢慢彎的斜線。
      重新逐欄量他的參考圖（439px 寬截圖，逐欄找連續 8 列亮度 ≥231 的第一列）：

        x  36  56  72  92 112 132 152 172 192 212 232 252
        y 132 130 127 128 127 125 122 123 127 131 131 125

      → 波峰 x≈155、波谷 x≈220，**週期只有頁寬的 0.28~0.32 ⇒ 整頁三個多波**，
        高低差卻只有 10px ＝ 頁寬的 2.3%。**短週期 ＋ 極淺**才是他要的「自然」。
        （x>252 的數字不可信 —— 玫瑰與酥皮壓在交界上，會抓到亮的糕點像素）

   ★ 下面的 path 不是手畫的：上表座標乘 3.28 倍搬進 1440x80 的 viewBox
     （x／y 同一個倍率，等比放大才保持原樣），右半照同樣的週期與振幅延伸，
     再用 Catmull-Rom 轉貝茲。**要改波形就改座標點重算，不要手動喬控制點。**

   ★ preserveAspectRatio='none' ＋ mask-size 100% 100%：
     整條波浪固定等於一個頁寬，1280 與 1920 是同一條線只是拉長。
     若改成重複鋪排，視窗越寬波越多 —— 那才是真的範本感。
   -------------------------------------------------------------------------- */
:root {
  --wave-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 27 C30 33.9 60 44.7 90 49.7 C120 54.7 150 53.1 180 48.6 C210 44.2 240 39 270 37.9 C300 36.9 330 39.4 360 39.1 C390 38.8 420 34.4 450 28.9 C480 23.3 510 18.4 540 20.6 C570 22.8 600 32.3 630 40.5 C660 48.8 690 54 720 52.8 C750 51.5 780 44.9 810 41.2 C840 37.4 870 37.4 900 38.3 C930 39.3 960 39.6 990 35.6 C1020 31.6 1050 24 1080 21.2 C1110 18.3 1140 21.7 1170 29.4 C1200 37.1 1230 47.4 1260 51.2 C1290 54.9 1320 51.8 1350 47.1 C1380 42.4 1410 38.1 1440 37.7 L1440 80 Z' fill='%23000'/%3E%3C/svg%3E");
  /* 左右翻轉版，給頁尾的上緣遮罩用。
     頁尾不能靠 .wave--flip 那個 `transform: scaleX(-1)` ——
     那是翻 ::after 這個元素，而頁尾翻的會是整塊頁尾（含文字）。
     mask-image 沒有 flip 屬性，所以在 SVG 裡把 path 包進
     `translate(1440,0) scale(-1,1)`，path 本身與 --wave-front 完全相同。 */
  --wave-front-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,0) scale(-1,1)'%3E%3Cpath d='M0 80 L0 27 C30 33.9 60 44.7 90 49.7 C120 54.7 150 53.1 180 48.6 C210 44.2 240 39 270 37.9 C300 36.9 330 39.4 360 39.1 C390 38.8 420 34.4 450 28.9 C480 23.3 510 18.4 540 20.6 C570 22.8 600 32.3 630 40.5 C660 48.8 690 54 720 52.8 C750 51.5 780 44.9 810 41.2 C840 37.4 870 37.4 900 38.3 C930 39.3 960 39.6 990 35.6 C1020 31.6 1050 24 1080 21.2 C1110 18.3 1140 21.7 1170 29.4 C1200 37.1 1230 47.4 1260 51.2 C1290 54.9 1320 51.8 1350 47.1 C1380 42.4 1410 38.1 1440 37.7 L1440 80 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  /* 振幅 = 本值 x 0.4125（波形在 viewBox 裡占 33/80 的高度）。
     5.6vw 換算下來，各視窗寬度的高低差都落在頁寬 2.3% 附近，與參考圖同量級 */
  --wave-h: clamp(26px, 5.6vw, 92px);

  /* ★ 2026-09-21 18:00 Nick 回「a」＝ 全套換成 09-18 定案的做法 7。
     B 波形：一頁 1.3 個波（磚 = 75% 頁寬）、振幅 ×1.5（y 11.75~61.25，佔帶高 61.9%）。
     Nick 09-18 16:26：「B, 1頁 1.3 個波試看看，淺綠色有辨法作成金黃色漸層嗎？波幅再加高約 0.5倍。」
     ⚠ 加高之後最大斜率 0.1864，仍比舊波形（0.2854）柔 35% ——
       「拉長＝更柔」與「加高＝更陡」方向相反，是算過才確定不互相抵銷的。

     🔴 這一條是「補形」：填的是曲線**以上**，跟 --wave-front 相反。
        頁尾不再用 mask 把自己裁掉（那樣偽元素會一起被裁，金色層永遠冒不出來），
        改成在頁尾上緣鋪兩層覆蓋層，用這個補形當遮罩。
        path 與 wave-test.html 的 --tp-tile-b 一字不差，只把頭尾的 80 換成 0。 */
  --wave-tile-b-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 23.7 C45 30.9 90 40.4 135 47.7 C180 55.1 225 59.9 270 61 C315 62.1 360 59.6 405 56.2 C450 52.8 495 48.7 540 45 C585 41.3 630 37.7 675 33.4 C720 29.1 765 23.9 810 19.4 C855 14.9 900 11.4 945 11.8 C990 12.1 1035 16.6 1080 23.7 L1080 0 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-tile-b-top-pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1080 120' preserveAspectRatio='none'%3E%3Cpath d='M0 -20 L0 23.7 C45 30.9 90 40.4 135 47.7 C180 55.1 225 59.9 270 61 C315 62.1 360 59.6 405 56.2 C450 52.8 495 48.7 540 45 C585 41.3 630 37.7 675 33.4 C720 29.1 765 23.9 810 19.4 C855 14.9 900 11.4 945 11.8 C990 12.1 1035 16.6 1080 23.7 L1080 -20 Z' fill='%23000'/%3E%3C/svg%3E");
  /* 同一條曲線整條往下挪 4.8（＝ 80 的 6%），但填色區仍然從 y=0 起算。
     🔴 為什麼不用「元素 translate 下移 6%」達成同一件事：
        translate 會把元素**整塊**往下推，元素上緣就退到帶高 6% 的位置，
        而奶白層在 scale 1.12 的瞬間波峰會升到帶高 4.5% —— 那 1.5% 沒有任何一層蓋，
        深綠又從波峰頂露出來，等於 18:13 那條漏邊換個小一號的形式回來。
        把位移做進「磚」裡就沒有這個問題：金層元素永遠從帶頂 0 開始畫。 */
  --wave-tile-b-top-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 28.5 C45 35.7 90 45.2 135 52.5 C180 59.9 225 64.7 270 65.8 C315 66.9 360 64.4 405 61 C450 57.6 495 53.5 540 49.8 C585 46.1 630 42.5 675 38.2 C720 33.9 765 28.7 810 24.2 C855 19.7 900 16.2 945 16.6 C990 16.9 1035 21.4 1080 28.5 L1080 0 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-tile-b-top-6-pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1080 120' preserveAspectRatio='none'%3E%3Cpath d='M0 -20 L0 28.5 C45 35.7 90 45.2 135 52.5 C180 59.9 225 64.7 270 65.8 C315 66.9 360 64.4 405 61 C450 57.6 495 53.5 540 49.8 C585 46.1 630 42.5 675 38.2 C720 33.9 765 28.7 810 24.2 C855 19.7 900 16.2 945 16.6 C990 16.9 1035 21.4 1080 28.5 L1080 -20 Z' fill='%23000'/%3E%3C/svg%3E");

  /* ★ 2026-09-22 主視覺下方那三條波浪也換成做法 7。
     Nick 09-21 18:11：「頁首的曲線沒換，還是靜態的」——前一天只換了頁尾。

     這兩條是 --wave-tile-b-top / -6 的「前形」：同一條曲線，填的是曲線**以下**。
     🔴 為什麼不能沿用頁尾那兩條補形：
        頁尾是「上方的淺色蓋下來」，填曲線以上剛好；
        主視覺這裡相反，上面是照片、下面是淺色區塊，要填的是曲線以下。
        兩者互補，共用會把該留給照片的地方塗掉。
     金層落在主層的**上**那一側（＝照片側、深色側），與頁尾一致 ——
     頁尾的金邊也是落在深綠那一邊，不是落在奶白那一邊。 */
  --wave-tile-b-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 23.7 C45 30.9 90 40.4 135 47.7 C180 55.1 225 59.9 270 61 C315 62.1 360 59.6 405 56.2 C450 52.8 495 48.7 540 45 C585 41.3 630 37.7 675 33.4 C720 29.1 765 23.9 810 19.4 C855 14.9 900 11.4 945 11.8 C990 12.1 1035 16.6 1080 23.7 L1080 80 Z' fill='%23000'/%3E%3C/svg%3E");
  /* 同一條曲線整條往上挪 4.8（＝ 80 的 6%），填色區仍然到 y=80。
     🔴 一樣把位移做進「磚」裡，不是靠元素 translate。
        元素上移會讓金層的下緣退到帶高 94%，而主層 scale 1.12 時曲線往下跑，
        帶底就會夾出一條沒有任何一層蓋到的縫 —— 與 09-21 18:20 那條漏邊同型，只是上下顛倒。 */
  --wave-tile-b-front-up6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 18.9 C45 26.1 90 35.6 135 42.9 C180 50.3 225 55.1 270 56.2 C315 57.3 360 54.8 405 51.4 C450 48 495 43.9 540 40.2 C585 36.5 630 32.9 675 28.6 C720 24.3 765 19.1 810 14.6 C855 10.1 900 6.6 945 7 C990 7.3 1035 11.8 1080 18.9 L1080 80 Z' fill='%23000'/%3E%3C/svg%3E");
}

.wave {
  --wave-up: var(--coconut);
  --wave-down: var(--coconut);
  position: relative;
  height: var(--wave-h);
  margin: 0;
  line-height: 0;
  background-color: var(--wave-up);
  overflow: hidden;
  pointer-events: none;
}

/* 🔴 這裡原本寫著「單層，不要再加第二層」，原文保留：
     曾經做過「後層半透明（波峰較高）＋前層實色」的兩層版 —— 那是 09-18 14:28 他自己要的
     「疊一層裝飾比較立體」，但 14:50 看到實頁後他撤回：「不要半透明的區塊，看起來太多層了」。
   ⇒ 那條講的是「兩層都看得到自己的曲線」的堆疊，那種確實是雜訊。
     2026-09-22 加的金層不是那種：它只露出 6% 帶高的一條細邊，看不到第二條曲線，
     與頁尾（09-21 18:00 Nick 回「a」＝全套照做法 7 搬上站）是同一個做法、同一組數值。
     ⚠ 真正不能再加的是「第三條看得見的曲線」。 */

/* 主層：填曲線**以下**，顏色 = 下方區塊底色（--wave-down）。
   這層畫的就是看得見的那條交界線。
   🔴 scale 的 transform-origin 是 top，與頁尾的 bottom 相反 ——
      判準不是「抄頁尾」，是「填色區靠哪一邊就從哪一邊長」：
      這裡填色在下方，從 top 長才不會在帶底露出照片。
      1.12 倍時波谷 62/80 × 1.12 = 0.868 < 1，不會被切平。 */
.wave::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 175%;
  height: 100%;
  z-index: 2;
  background-color: var(--wave-down);
  -webkit-mask: var(--wave-tile-b-front) repeat-x left top / calc(100% / 2.3333333) 100%;
          mask: var(--wave-tile-b-front) repeat-x left top / calc(100% / 2.3333333) 100%;
  transform-origin: top;
  animation: wave-edge-drift 22s ease-in-out infinite alternate,
             wave-edge-swell  7s ease-in-out infinite alternate;
}

/* 金層：與主層同波長、同相位、同一個位移動畫，曲線往上偏移 6%。
   露出來的就是照片側那一條會呼吸的金邊（落差在 8.6%~16.3% 帶高之間擺動）。
   兩條曲線永遠不會交叉：主層在 scale s≥1 時 y·s ≥ y−4.8 恆成立。
   🔴 底色寫 background-color、漸層寫 background-image ——
      用 `background:` shorthand 會把另一個重設掉（09-07 金邊那次踩過）。
   漸層停點與 .site-footer::before 一字不差：上下兩條波浪的金要是同一種金。 */
.wave::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 175%;
  height: 100%;
  z-index: 1;
  background-color: var(--gold);
  /* 🔴 2026-09-30 17:02 Owen 截圖：關於頁橫幅波浪下方「偶爾」出現一條全寬金色細線，
     Nick 的螢幕也有、Owen 的口味頁沒有。
     根因：金層一路填到帶底最後一列，主層在 swell 回到 scale≈1 時，最後一列遮罩在
     某些縮放比例下點陣化成半透明 → 金色從縫裡透出。「偶爾」＝swell 週期，
     「有人有、有人沒有」＝devicePixelRatio 不同。
     改法：金層最底 14% 改塗 --wave-down（下方區塊色）當墊底。
     這一帶永遠在主層底下（波谷最低 62/80 × 1.12 = 86.8%），看不到金，
     就算主層再漏一列，透出來的也是與下方同色的奶白。
     第一層寫在前面＝疊在最上面。 */
  background-image: linear-gradient(to top, var(--wave-down) 0 14%, transparent 14%),
                    repeating-linear-gradient(90deg,
                      var(--gold)  0,
                      #C9A75A      14%,
                      #F2E09C      23.684211%,
                      #C9A75A      33.5%,
                      var(--gold)  47.368421%);
  -webkit-mask: var(--wave-tile-b-front-up6) repeat-x left top / calc(100% / 2.3333333) 100%;
          mask: var(--wave-tile-b-front-up6) repeat-x left top / calc(100% / 2.3333333) 100%;
  animation: wave-gold-drift 22s ease-in-out infinite alternate;
}

/* 尊重系統的「減少動態效果」—— 與頁尾同一條政策（Nick 09-18 17:06 選 A）。
   關掉之後兩層停在上面寫的靜態值，波浪與金邊照樣在，只是不動。 */
@media (prefers-reduced-motion: reduce) {
  .wave::before,
  .wave::after { animation: none; }
}

/* 相鄰的交界左右翻轉，一路往下滑才不會看出規律 */
.wave--flip::after {
  transform: scaleX(-1);
}

/* 配色：--wave-up = 上方區塊底色，--wave-down = 下方區塊底色 */
.wave--dark-to-paper   { --wave-up: var(--jungle-deep); --wave-down: var(--paper); }
.wave--dark-to-sand    { --wave-up: var(--jungle-deep); --wave-down: var(--sand); }
.wave--dark-to-coconut { --wave-up: var(--jungle-deep); --wave-down: var(--coconut); }
.wave--paper-to-dark   { --wave-up: var(--paper);       --wave-down: var(--jungle-deep); }
.wave--sand-to-dark    { --wave-up: var(--sand);        --wave-down: var(--jungle-deep); }

/* 交界上的葉子壓紋（2026-09-18）
   Owen：「都喜歡在交界的地方疊一層裝飾」＋「但是我們那些圖是剪影，效果好嗎」
   → 量過 leaf-decor.png（含他當初的 8 號原檔）：不透明像素 100% 是單一色 #1B4A3A，
     確實是純剪影。剪影當主角會變貼紙，但壓到 10% 就成了紙上的壓痕。
   ⚠ 它掛在「下方那個區塊」上（不是掛在 .wave 裡）—— .wave 只有 26~48px 高，
     葉子放進去會被切斷；掛在下方區塊才能往上跨過波浪線。
   撤銷＝刪本區塊 ＋ index.html 的 <span class="leaf-mark"> 那一行。 */
.has-leaf-mark {
  position: relative;
}

.leaf-mark {
  position: absolute;
  left: clamp(4px, 5vw, 88px);
  top: -34px;                      /* 往上跨過波浪帶，深色側 10% 幾乎看不見，自然淡出 */
  width: clamp(112px, 13vw, 196px);
  aspect-ratio: 344 / 229;         /* leaf-decor.png 的原始比例，換圖必須重算 */
  /* 用遮罩而不是 background-image —— 剪影只有輪廓有意義，顏色改由
     --leaf-tint 決定；日後要改成淺色壓在深綠上，只要換一個變數 */
  background-color: var(--leaf-tint, #1B4A3A);
  -webkit-mask: url("../img/leaf-decor.png") no-repeat left top / contain;
          mask: url("../img/leaf-decor.png") no-repeat left top / contain;
  opacity: 0.1;                    /* 與口味卡上的葉子同一個值，全站一致 */
  transform: rotate(-12deg);
  pointer-events: none;
}

@media (max-width: 700px) {
  /* 手機版版面已經很窄，壓紋會疊到第一段文字上 */
  .leaf-mark { display: none; }
}

/* 🔴 2026-09-18 14:42 Owen：「圖片也要跟著修改 這樣看起來不正確」＋截圖
   症狀：大照片被平切一刀，照片與白色區之間多出一條純深綠色橫槓。
   根因：.wave 會自己畫一塊「上方區塊色」的底色，那在純色區塊之間是對的，
         但上面是照片時，純色底填不出照片 —— 於是照片的直邊與那條假底色同時暴露。
   改法：交界在照片下緣時，把整條波浪往上拉一個自己的高度疊在照片上，
         底色改成透明。照片的下緣就是波浪線，兩層的淺帶也照樣疊在照片上。 */
.wave--over-image {
  margin-top: calc(-1 * var(--wave-h));
  background-color: transparent;
  /* 🔴 2026-09-30：帶底最後一列墊一條不受遮罩影響的實色（見 .wave::before 同日註解）。
     Nick 首頁那條是淡灰、Owen 關於頁那條是金 —— 兩層遮罩的最後一列同時點陣化成半透明時，
     透出來的是底下的照片；只有金層漏時透出的是金。元素自己的背景不吃遮罩，才擋得住兩種。
     3px 永遠在主層底下：最矮 26px 帶高時，波谷最低點離帶底還有 26 × 13.2% ≈ 3.4px。 */
  background-image: linear-gradient(to top, var(--wave-down) 0 3px, transparent 3px);
}

/* 紙質工藝裝飾（.has-deco / .deco* / .edge-zone / .edge-leaf*）已於
   2026-09-29 整段移出本檔 —— Owen 2026-09-21 16:35 要求拿掉葉子後，
   三頁的 HTML 就沒有任何對應元素了，規則留在這裡只會被誤用，
   而且每次部署都跟著上公網。
   原文（含 09-18~09-21 三輪退件的判斷理由）搬到：
     _備份/網頁與樣式/_停用_紙質工藝裝飾CSS_20260929.css
   一併刪除的素材：leaf-monstera.png / leaf-emboss-mon.png /
   leaf-emboss-palm.png / leaf-gold-palm.png（只有這段在用）。
   🔴 leaf-decor.png 與 leaf-gold-mon.png **沒有刪** —— 它們同時被
      活著的 .leaf-mark / site.css 口味卡葉影 / .leaf-frame 用到。
      「出現在死碼裡」不等於「只出現在死碼裡」。 */