/* ============================================================
   assets/home-2b.css — 首頁版型 2b（交錯式）
   由 index-2b.html 載入（2b 首頁的完整副本，2026-10-13 首頁改版時保留）；現行首頁 index.html
   （花藝手記）也載入本檔，但只借用外殼那幾節（.page-2b、頂欄、右側選單、頁尾）與 --gutter-2b，
   下面提到「首頁」「本頁」的推導都是指 2b 那一版。site.css 是全站共用底盤，本檔只加「這個版型」
   需要的骨架與排版數值，不覆寫任何 token、不動任何全站行為。

   規格來源：D:\網站\design_handoff_strawflower_home\README.md（hifi 定稿，1280px 畫布）
   設計 spec：docs/superpowers/specs/2026-07-27-strawflower-home-2b-design.md

   命名：全部帶 -2b 後綴。這是一個「比較用的替代版型」，後綴讓它不可能與站上
   既有 class 相撞；選型定案後若淘汰，整檔刪除即可，不牽動其他 8 頁。
   ============================================================ */

:root{
  /* 導覽 gap：交付稿是固定 28px，但 site.css:216-224 記錄頂欄在 768px 只剩 25px 空隙
     （字標 Strawflower. 實測 123px），並明寫「再加任何元素都會直接折行」。本頁頂欄有
     7 個項目、6 道 gap，直接套 28px 會多吃 72px，必定折行。
     另有 site.js 注入的級距箭號不在上述 6 道 gap 內：.nav-toggle 14px（site.css:262）＋
     .nav-group--h 的 9px gap（site.css:252），實測替 .topnav 多長 23px（把箭號 display:none
     前後量 .topnav 寬度：361.02 → 338.02）。768px 實測含它仍單行、字標與 nav 之間餘 69px
     （navWidth 496、markWidth 123 與 site.css:217 記錄的 123px 一致）。
     ⚠ 量測必須在 JS 啟用下進行 —— 關掉 JS 時箭號還沒注入，量出來的空隙會樂觀 23px。
     用 clamp 讓 1280px 命中交付稿的 28px，往下走則線性收窄：
       2.2vw 在 768px ＝ 16.896px —— 下界在這裡並未生效。clamp(A,B,C) 等於 max(A,min(B,C))，
       下界只在中間值「低於」它時才夾，而 16.896 > 16。上界同理：28 ÷ 0.022 ＝ 1272.7，
       故 1272px 是 27.98px、要到 1273px 才滿 28px（1280px 由 max 夾住）。
     ⚠ 16px 這個下界不是死碼 —— 本變數有兩個消費者，只有其中一個吃不到它：
       · @media(min-width:768px) 內的 .nav-2b .topnav：要到 ≤727px 才會被夾回 16px
         （16 ÷ 0.022 ＝ 727.3），而那時 .topnav 已 display:none，所以它確實永遠拿不到 16px；
       · .nav-2b 自身：不在任何 media query 內，所有寬度都生效。375px 實測 2.2vw ＝ 8.25px
         → 被下界夾回 16.000px；≤727px 一律 16px（涵蓋所有手機寬度），728–767px 走 2.2vw
         （16.02–16.87px）。
       所以 16px 是行動版真正會發生的值。
       ⚠ 這個下界原本的理由是「讓行動版的 cart／☰ 間距與 index-legacy.html 頂欄的 gap-4
         （16px）一致」。2026-07-29 全站頂欄改回 gap-6（24px，見 site.css 的 .topnav 一節），
         那個一致性已經不存在：本頁行動版是 16px，其他頁是 24px。刻意留 16px 不跟進 ——
         clamp 的兩端都來自交付稿，動它就是偏離交付稿；而本頁 ≥1273px 拿到的 28px 本來就
         比 24px 寬，所以桌機沒有落差。要動這個下界請當成獨立的設計決定。
     ⚠ 768px 實跑的是 16.896px，比 site.css:243-262 那邊的 24px 窄，不是舊註解說的「多 0.896px」
       —— 該處已於 2026-07-29 改回 1.5rem，兩邊不再是同一個值。本頁 768px 的餘裕自成一套：
       字級 15px（其他頁 16px）、墨跡更窄，且 gap 更小，所以只會比 site.css 記的 82.3px 更寬。
     複審實測（JS 啟用、乾淨載入）：375px → .topnav display:none（.nav-2b 自身 16px）／
     768px → 16.896px／1024px → 22.528px／1280px → 28px；四者 distinctRowCenters 皆 1、
     navHeight 皆 24、maxScrollX 皆 0。
     驗收見 Task 4；若任一寬度折行，把 min 與 max 都改成 16px 並在此記錄實測值。 */
  --nav-gap-2b:clamp(16px,2.2vw,28px);

  /* 與 site.css 各處 hairline 同值（rgba(0,0,0,.12)），不新增第二種分隔線 */
  --rule-2b:rgba(0,0,0,.12);

  /* 三幕外層 padding 與欄間 gap 共用同一個值（交付稿兩者皆為 64px）。
     5vw 在 800px 恰為 40px、在 1280px 恰為 64px —— 正好命中交付稿建議的
     「768–1279 降到 40」與「≥1280 為 64」兩端。
     ⚠ 寫成流體值原本是為了不新增 1280 斷點（SPEC.md 規定 768 是唯一斷點）。2026-07-27 為了
       導覽形態的切換還是加了 1280 斷點（見檔尾），所以這個理由已經不成立；但流體值本身仍然
       是對的做法 —— 它讓 gutter 在 768–1280 之間連續變化，而那個斷點只切換導覽、不切換 gutter。 */
  --gutter-2b:clamp(40px,5vw,64px);
}

/* ---- 頁面容器：1280px 置中（交付稿畫布寬）---- */
.page-2b{max-width:1280px;margin:0 auto}

/* ---- 防禦性 margin 歸零 ----
   site.css 只重設了 img，沒有重設 figure／p —— index-legacy.html 的圖片能貼齊是靠
   Tailwind preflight。但 Tailwind 在本站是 browser runtime（<script src="unpkg...">），
   載入延遲或被公司網路封鎖時 preflight 不會生效，figure 會拿回預設的 1em 40px margin。
   本頁的版型數學全部建立在「margin 為 0」這個前提上（三幕 544×680、finale 640×800、
   收尾 80/88、幕間 hairline 的位置），所以明寫一次讓本檔自給自足。
   交付稿的參考稿也明確寫了 figure{margin:0}，這不是多餘的保險。 */
.hero-2b,.act-2b figure,.finale-2b figure{margin:0}
.closing-2b p{margin:0}
/* 取代 HTML 上的 Tailwind mt-3（0.75rem＝12px，同值）；Tailwind 沒載入時仍有間距。
   ⚠ 交付稿這一行是 14px（參考稿 strawflower-home-2b.html 的 .closing-zh{margin:14px 0 0}），
     此處刻意沿用現站 mt-3 的 12px、差 2px：收尾區在本頁只有兩行，交付稿的三行結構
     （14／10px，.closing-zh／.closing-meta）未採用（見 spec §4.6），沒有第三行要對齊，
     就沒有理由為這 2px 在兩頁之間多開一個非構圖差異。spec §4.1／§4.3 兩張表都沒有這一列，
     所以這是本次移植裡唯一只記在 CSS 註解的排版數值偏離。 */
.closing-2b p + p{margin-top:12px}

/* ---- Header ----
   交付稿此版的 header 直接接滿版圖、無下邊框，故不加 border-bottom。
   高度與左右內距由 HTML 的 h-16 md:h-20 / px-6 md:px-10 提供：桌機恰為交付稿的 80px / 40px。

   z-index:50 是為了兩件事：
     a) site.js 注入的 weekly bouquet 橫向子選單（.nav-sub--h，z-index:60）要疊在 hero 之上；
     b) 與 index-legacy.html 的 header z-50 同層，site.css 那條「遮罩 70 > header 50 > 左選單 30」
        的層級推導照樣成立 —— cart 抽屜開啟時遮罩必須蓋過頂欄，否則頂欄會全亮。

   定位見下一段「頂欄釘住」。**這一段原本寫的是 position:relative（交付稿的無 sticky header）**，
   2026-07-27 改為 fixed；下方 overflow-x:clip 的推導是在 relative 時代寫的，但結論在 fixed
   之下同樣成立 —— 見該段末尾的補註。

   ⚠ overflow-x:clip 是本頁獨有的必要條件，起因是一個跨檔耦合。
     本頁是全站第一個「header 被限寬在 1280 畫布內」且「橫向子選單會出現」的頁面：
       · index-legacy.html 有 .side-nav，site.js:807 給 [data-topnav] 加 .is-off
         （site.css:215 display:none!important），橫向子選單在首頁永不出現；
       · 其餘 6 個內頁的 header 是 fixed inset-x-0、本來就滿版，帶子與 header 同寬；
       · 本頁沒有 .side-nav（子選單會出現）＋ header 在 .page-2b 內（限寬 1280）。
     site.css:359-360 的 .nav-sub--h::before 是為「滿版 fixed header」寫的出血帶
     （left:calc(-1 * var(--nav-sub-x,0px)) ＋ width:100vw），放進本頁會壞兩件事：
       1 它帶著 border-top:1px solid rgba(0,0,0,.12)。視窗 >1280 時這道 hairline 會超出
         .page-2b 左右各 (100vw−1280)/2（1440→各 80px、1920→各 320px），成為全頁唯一
         越過畫布的線。本設計的 hairline 一律止於容器邊界（.footer-2b 止於 1280 畫布、
         .act-2b／.finale-2b 止於 1152 內容寬），這條會破例。底色與漸層看不出來
         （畫布內外都是 #F1EFEF），唯一可見的就是那條超寬 hairline。
       2 --nav-sub-x 只在子選單展開時由 site.js:202-210 寫入，載入時走 fallback 0px，
         出血帶因此從導覽群組的 x 往右拉滿 100vw。header 是 fixed 時這不計入文件的
         scrollable overflow，改成流內之後就會計入 —— 實測 1440px 下
         documentElement.scrollWidth 2197、可橫捲 757px（1280px 為 1957／677）。
         site.css:16-17 已把頁面捲軸隱藏，這段橫捲沒有任何視覺提示，→／End／
         Shift+滾輪會把整頁推進一片空白。錯誤窗口是「載入後到第一次展開級距之前」。
     overflow-x:clip 把出血帶夾回 header 的 border box（＝畫布寬）一次解掉兩件事：
     實測 1440px 下可橫捲歸零，帶子的左右緣正好落在 80／1360（＝畫布邊界）。
     overflow-y 保持 visible —— clip 與 visible 是合法組合、不會被強制成 auto，所以子選單
     照常往 header 下方浮出（實測 sub top 80.2／bottom 135.9 而 headerBottom 80，縱向未被裁；
     四個級距連結的 elementFromPoint 仍命中自己）。
     ⚠ 不支援 overflow:clip 的瀏覽器（Chrome <90／Firefox <81／Safari <16）會丟棄這條宣告
       —— 上面那 677px（1280）／757px（1440）的無提示橫捲會在那些瀏覽器上原封不動回來，
       也就是這次要修掉的缺陷本身；頁面捲軸已由 site.css:16-17 全站隱藏，所以沒有任何
       視覺提示。沒有可用的 fallback：overflow-x:hidden 會把 overflow-y 從 visible 強制成
       auto（CSS overflow 規範：一軸非 visible 時，另一軸的 visible 計算成 auto），header
       因此變成捲動容器、橫向子選單被縱向裁掉，比原問題更糟。知情接受。
     不改 site.css：那是 8 頁共用的對照組底盤，且滿版出血對其他 7 頁是正確行為。
     也評估過在本檔覆寫 ::before 的 left／width 把它算回畫布寬，未採用 —— 那組 calc 只在
     --nav-sub-x 已寫入時成立，載入時的 fallback 0px 狀態仍會溢出 677–757px，解不掉第 2 件，
     而且要把 site.css 的內部實作在這裡複製一份。
     驗收見計畫 Task 3 Step 5（必須在 1440px、且子選單展開的狀態下量）。

     ⚠ 補註（header 改 fixed 之後）：第 2 件（無提示橫捲）的成因是「出血帶進到文件流」，
       header 改回 fixed 之後 fixed 元素本來就不計入文件的 scrollable overflow，那一半的
       風險消失。但第 1 件（hairline 越過畫布）與 fixed／relative 無關 —— 出血帶仍是
       width:100vw、仍會超出被夾在 1280 內的 header，所以 overflow-x:clip 仍然必要。
       實測 fixed 之後 1500／1920 的 maxScrollX 皆為 0、帶子仍止於畫布邊界。 */
/* ---- 頂欄釘住（2026-07-27 追加）----
   ⚠ 這一條偏離交付稿：README:108 明寫「無 sticky header」，此版 header 原本刻意做成流內元素。
     使用者要求導覽列不隨頁面滾動 —— 在 768–1279px 頂欄那五項是桌機唯一的主導覽（見檔尾
     的 @media），header 一捲走就完全沒有導覽了，這是功能問題不是風格問題，故改回 fixed。
     index-legacy.html 的 header 本來就是 fixed，所以這也回到與對照組一致。

   ---- 2026-07-29：改成 inset-x-0 滿版，與其他 9 頁一致 ----
   使用者指出寬螢幕時本頁的 logo／cart 與其他頁不在同一條線上（1440 實測差 80px，
   偏移量＝(vw−1280)/2，1920 會差 320px），要求改滿版。

   ⚠ 這裡曾經寫著「left／right 必須夾回畫布，不能滿版」，理由是滿版會把頂欄最右項推到
     視窗右緣、而右側垂直選單對齊「畫布內縮 40px」那條線，兩者會錯開 160px（1920 時 320px）。
     那個推導的前提是「選單錨在畫布上」。解法不是保留夾寬，而是**把兩者都改錨在視窗上**：
     .side-nav 同時改成單純的 right:2.5rem（見該處註解），header 內距也是 md:px-10 ＝ 40px，
     所以選單右緣與 cart 右緣在**每個**寬度都對齊，錯開量恆為 0（1280／1440／1920 皆實測 0）。
   ⚠ 代價：幕 A／C 照片被選單疊到的量不再是恆定 109px，改為隨視窗遞減
     （選單往右走、畫布不動）：1280→108.9、1440→28.9、≥1498→0。這是變好的方向。
     幕 B 的讓位量也跟著改成流體（同一天，見檔尾 @media (min-width:1280px)）：
     773px − 50vw，1280→133（＝舊的寫死值，斷點連續）、1440→53、≥1546→0。

   bg-surface（HTML 上的 Tailwind class）現在遮住整個視窗寬，與其他 9 頁的 header 相同。

   fixed 之後 header 脫離文件流，高度要補回來 —— 見下方 .page-2b 的 padding-top。 */
.header-2b{position:fixed;top:0;z-index:50;overflow-x:clip;left:0;right:0}

/* header 改 fixed 之後補回它原本佔的流內高度（HTML 上是 h-16 md:h-20 ＝ 64／80px）。
   放在 .page-2b 而不是 hero 上：無論第一個區塊換成什麼都不會漏掉。
   site.css 的 *{box-sizing:border-box} 讓這個 padding 算在 1280 內，不影響橫向幾何。 */
.page-2b{padding-top:64px}
@media (min-width:768px){.page-2b{padding-top:80px}}

/* ---- 頂欄導覽 ---- */
.nav-2b{display:flex;align-items:center;gap:var(--nav-gap-2b);font-size:15px}
/* site.css 在 @media(min-width:768px) 內給 .topnav 寫死 gap:1.5rem（2026-07-29 前是 1rem）。
   .nav-2b .topnav 是 (0,2,0)，勝過 .topnav 的 (0,1,0) —— 不依賴載入順序，
   Tailwind runtime 的注入時機也影響不到。 */
@media (min-width:768px){
  .nav-2b .topnav{gap:var(--nav-gap-2b)}
}

/* ---- Hero：交付稿定高 520px ----
   RWD 未定稿，用流體值命中它建議的兩端（≥1280 → 520、768–1279 → 420）：
   520 ÷ 1280 = 40.625%，故 40.625vw 在 1280px 恰為 520px；下界 420 要到 ≤1033px 才生效
   （420 ÷ 0.40625 ＝ 1033.85）—— 1034px 實跑 420.06px ≈ 420px，那是 40.625vw 自己的值，
   不是被夾出來的。
   <768 另由檔尾的 media query 覆蓋為 320px —— clamp 的 min 是 420，不會自己降下去。
   高度寫在 figure 上；<img> 由 HTML 的 absolute inset-0 撐滿，裁切由 .photo 的 overflow:hidden 負責。

   ---- 滿版出血（2026-07-29）----
   header 改滿版之後，夾在 1280 畫布內的 hero 會比它上面的頂欄窄 —— 整頁最上面那塊視覺
   反而是最窄的。故 hero 也出血到視窗寬，但 DOM 位置不動（留在 .page-2b 內，抽屜開啟時
   才會跟著 setOutsideInert 整塊隔離）。
     margin-left:calc(50% - 50vw)　50% 是 .page-2b 內容盒的一半
     vw ≥ 1280：640 − vw/2（負值），左緣 ＝ (vw−1280)/2 + 640 − vw/2 ＝ 0 ✓
     vw < 1280：畫布＝視窗，50% ＝ vw/2，margin 為 0、width 等於視窗，與改動前完全相同
   元素剛好落在 [0, vw]，不會產生橫向 overflow（頁面捲軸已全站隱藏，故 100vw == innerWidth）。
   ⚠ HTML 上那個 w-full 已被本條的 width 蓋掉（Tailwind utility 在 @layer 內，unlayered 恆勝），
     留著是為了無 CSS 時的降級外觀。
   ⚠ 本檔第 69 行的 .hero-2b{margin:0} 與這裡同 specificity，靠「本條在後」勝出而拿到
     margin-left。把這一條搬到第 69 行之前，hero 會彈回畫布寬。
   ⚠ 三幕與引言仍是 1280 畫布 —— 滿版 hero ＋ 內縮內容是刻意的對比（index-legacy.html 的
     78vh/88vh hero 也是滿版），不是漏改。

   ---- 5 張交叉淡入輪播（DOM 見 index-2b.html 的 [data-hero-slides]，驅動見 site.js）----
   只切 opacity、不動 transform，與站上 .reveal／.lnk 同一組語彙；時長沿用 --motion-duration
   (.5s)，不新增第三個時長。想讓交叉更慢就在這裡單獨給一個值（例如 1.2s），
   那會是知情地多一個時長。
   無 JS 時只有第一張帶 .is-on，畫面就是原本的單張 hero —— 降級是乾淨的。
   prefers-reduced-motion:reduce 時 site.js 完全不啟動輪播，這裡也把過場關掉。 */
.hero-2b{height:clamp(420px,40.625vw,520px);width:100vw;margin-left:calc(50% - 50vw)}
.hero-2b > img{opacity:0;transition:opacity var(--motion-duration) var(--ease-out)}
.hero-2b > img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero-2b > img{transition:none}
}

/* ---- 暫停控件已移除（2026-08-03，使用者指定 hover 時不要漸層底、也不要 pause）----
   原本這裡是 .hero-2b figcaption（hover／focus-within 淡入、觸控常駐）＋ .hero-2b__toggle
   一顆 pause⇄play 文字鈕，2026-07-29 補上時是為了 WCAG 2.2.2（Pause, Stop, Hide）。
   整組連同 site.js 的 mode 狀態機、site.css 的 .photo--hero figcaption 一起清掉，
   hero 現在沒有任何疊在照片上的東西。
   ⚠ 那是知情的無障礙退讓（推導寫在 index-2b.html 的 hero 註解）：hover 暫停仍在（site.js），
     但觸控與鍵盤拿不到；真正剩下的豁免路徑只有 prefers-reduced-motion:reduce（整組不啟動）。
   ⚠ 要復原請一併回復三處：本節的兩段 CSS、index-2b.html 的 <figcaption>／.photo--hero、
     site.js initHeroSlides 的 btn 區塊與 mode 分支。單獨回復任何一處都不會生效。
   舊值留檔備查：figcaption 是 text-align:right、padding:14px 2.5rem（2.5rem＝header 的
   md:px-10，讓鈕的右緣與 cart／右側選單／頁尾右組同在 40px 那條線；刻意不用 64px 的
   --gutter-2b）；鈕是 padding:5px 0、font/color/letter-spacing 全繼承、hover 淡出 .55。 */

/* ---- 置中引言 ---- */
.quote-2b{max-width:640px;margin:0 auto;padding:96px 24px;text-align:center}
/* 20px/1.7 是交付稿值（現站為 19px/1.6）。letter-spacing 不寫：
   site.css 的 body 已給全站常數 .7px，正是交付稿要的值。
   font-family 與 font-style 也刻意不寫 —— 交付稿的引言是 Cormorant italic
   （README:58、Typography 段「展示／引言字體…僅用於引言 italic」，參考稿的 .quote-en
   也是 font-family:var(--display);font-style:italic），本頁只採它的 20px/1.7，
   字族與字style 沿用現站的 Nanum Myeongjo 非 italic（index-legacy.html:96 無 italic 類）。
   理由：spec §2 的「排版數值」軸只含容器寬／區塊高／grid／字級／行高／字距／圖片比例，
   不含字族與 font-style；補上 italic 會在 index-legacy.html 與本頁之間多出一個非構圖變因，
   破壞 §2「變因單一」的比較前提。這不是漏抄，已列入 spec §5.2 的已知偏離表。 */
.quote-2b p{margin:0;font-size:20px;line-height:1.7}

/* ---- 三幕交錯（本版型的核心）----
   推導：1280 − 64×2（外層 padding）= 1152；(1152 − 64)（扣 gap）÷ 2 = 每欄 544px；
   圖 544×680（4:5）。文字欄 max-width:400px 在 544px 內留 144px 鬆餘，這是交付稿刻意的。
   align-items:center 讓較短的文字欄對齊圖片的視覺中線。 */
.acts-2b{padding:0 var(--gutter-2b)}
.act-2b{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter-2b);
  align-items:center;border-top:1px solid var(--rule-2b);padding:64px 0}
.act-2b__copy{max-width:400px}
/* 圖在左的那一幕，文字欄要靠右對齊欄位邊緣（交付稿明寫）。
   沒有這條的話 400px 的文字欄會靠在 544px 欄位的左緣，與左邊的圖之間出現
   144px 的無主空隙，交錯的節奏就散了。 */
.act-2b--reverse .act-2b__copy{justify-self:end}
.act-2b h2{margin:0;font-size:16px;font-weight:700;line-height:1.5}
/* 段落間距用 gap 不用 margin（交付稿明寫，也與 SPEC 的「gap 優先於 margin」一致）。
   line-height:1.8 覆寫 site.css 的 body 1.625 —— 這是交付稿的幕內文行高。 */
.act-2b__body{margin-top:20px;display:flex;flex-direction:column;gap:16px;
  font-size:14px;line-height:1.8}
.act-2b__body p{margin:0}
/* 三幕統一 4:5（交付稿）。season.jpg 與 light.jpg 原生 3:4，由 object-fit:cover
   裁掉上下約 7% —— 已知並接受，見 spec §4.5。 */
.act-2b figure{aspect-ratio:4/5}

/* ---- finale 圖：第四拍 ----
   交付稿 2b 收尾無圖，但 index-legacy.html 有 images/finale.jpg，屬「內容」軸故保留。
   給它與三幕同一個節拍（hairline ＋ 64px 上下留白），讀成第四拍而不是外掛上去的。
   640px 對齊引言容器的量，4:5 即 640×800。

   ⚠ 橫向一定要用 margin、不能用 padding：border-top 永遠橫跨整個 border box，padding
     在 border 內側，只內縮 figure、一步都改不到線寬。.finale-2b 在 index-2b.html 是
     .acts-2b 的兄弟、吃不到 .acts-2b 的 padding，沒有這道 margin 的話它的 border box
     ＝ .page-2b 滿版（桌機 1280），比 .act-2b 的 1152 左右各長 64px —— 四條並列的
     hairline 中第四條突出，會讀成「footer 前的另一條滿版分隔線」，正是這一段要避免的
     觀感。margin 取與 .acts-2b 的 padding 同值，兩個斷點的內容寬因此都與三幕相同
     （桌機 1152、行動版 vw−48）。圖的位置不因這道 margin 改變：
     (1152−640)÷2 ＋ 64 ＝ 320 ＝ 滿版置中的 (1280−640)÷2。
     （.footer-2b 的滿版 hairline 相反地是交付稿的設計 —— 交付稿 README:97 就是
     border-top 滿版＋padding 內縮內容 —— 不要比照這裡把它也內縮。） */
.finale-2b{border-top:1px solid var(--rule-2b);margin:0 var(--gutter-2b);padding:64px 0}
.finale-2b figure{max-width:640px;margin:0 auto;aspect-ratio:4/5}

/* ---- 收尾字標區 ---- */
.closing-2b{padding:80px 0 88px;text-align:center}

/* ---- Footer ----
   交付稿是「兩組連結左右分開」的單列；現站另有一行 copyright（屬內容軸，保留），
   所以拆成 __rows（交付稿的那一列）＋ __meta（現站的 copyright）。 */
.footer-2b{border-top:1px solid var(--rule-2b);padding:36px 40px 30px}
.footer-2b__rows{display:flex;justify-content:space-between;gap:28px;font-size:13.5px}
.footer-2b__rows nav{display:flex;flex-wrap:wrap;gap:28px}
/* copyright 這一行交付稿完全沒有（它的收尾是 keep the season ／中文字標／studio meta 三行，
   見參考稿的 .closing-en／.closing-zh／.closing-meta），所以四個值沒有交付稿原文可抄。
   選擇「保留收緊」而不是對齊現站，四個值逐一交代出處：
     · margin-top 24px —— 刻意不沿用 index-legacy.html:175 的 mt-10（40px）。交付稿頁尾整體比現站緊
       （36/30 vs index-legacy.html:160 的 pt-10 pb-8 ＝ 40/32），copyright 的上距同比收斂；24px 在
       交付稿的 spacing scale 內（README:155），不是新造的數字。另一個理由是 40px 放進
       padding-top 只有 36px 的頁尾裡，內部間距會大於區塊自己的外距，節奏反而破。
     · line-height 1.4 —— 沿用 site.css:161-162 .opener-eyebrow 的既有值，不新增第二種小字
       行高（現站這一行是 leading-4 ＝ 16px ≈ 1.333，差 0.8px，非構圖差異）。
     · font-size 12px —— 與現站同值，交付稿的收尾 meta 也是 12px（README:151）。
     · color rgba(0,0,0,.6) —— 與 index-legacy.html:175 的 text-black/60、site.css 各處次要文字同值；
       不採交付稿的 .45，理由同 --rule-2b：不新增第二種灰。
   ⚠ 動它之前先讀完上面四條。（不要把這條說成「全檔唯一沒有交付稿出處的規則」——
     .finale-2b 那一組的元素在交付稿裡同樣不存在，檔尾 media query 的 (b)／(c) 類也另有
     一批取自現站而非交付稿的值。這一條特別的地方只是它四個值都要各自交代，不是它孤例。） */
.footer-2b__meta{margin:24px 0 0;text-align:center;font-size:12px;line-height:1.4;
  color:rgba(0,0,0,.6)}

/* ---- 桌機主導覽：原版垂直選單改靠右 ----
   本頁沿用 index-legacy.html 的 .side-nav（同 class 是刻意的，理由見 index-2b.html 該處註解），
   所以只需要覆寫「左」變「右」，其餘（position:fixed／top:6rem／z-index:30／gap／字級）
   全部沿用 site.css:554 與 HTML 上的 Tailwind class。

   ⚠ 這是本檔第一條真正與 site.css 同選擇器競爭的規則。在此之前兩檔沒有任何一條宣告
     進入層疊競爭（見 index-2b.html 裡 <link> 上方的註解），所以「home-2b.css 必須排在
     site.css 之後」從防禦性變成硬需求：兩條都是 .side-nav (0,1,0)，只靠來源順序決勝。
     調動兩個 <link> 的順序會讓選單彈回左邊。

   left:auto 必須明寫。site.css:554 給了 left:2.5rem，而 position:fixed 元素同時有 left
   與 right 且 width 為 auto 時，LTR 下 left 勝、right 被忽略 —— 只加 right 不歸零 left，
   選單會留在原地。

   ---- 為什麼 right 就是單純的 2.5rem（2026-07-29 起）----
   選單右緣要對齊頂欄最右項（cart）的右緣。header 改成滿版之後（見上方 .header-2b 一節），
   那條線就是「視窗右緣內縮 md:px-10 ＝ 40px」，而 fixed 的 right 正是相對視窗右緣量的，
   所以直接寫 2.5rem 就對齊，不需要任何 calc。
   footer 右組是 px-6 md:px-10 的滿版頁尾，也在同一條線上。
   頁面捲軸已全站隱藏（site.css 檔首），故 100vw == innerWidth，無捲軸誤差。

   ⚠ 這裡曾經是 calc(max(0px,(100vw - 1280px)/2) + 2.5rem) —— 那是 header 被夾在 1280 畫布內
     的時代，選單得跟著錨在畫布上才對得齊 cart。header 改滿版後兩者都錨在視窗上，
     公式退化成常數。實測選單右緣 − cart 右緣：1280→0、1440→0、1920→0。

   ⚠ 重疊量因此從「恆定 109px」變成隨視窗遞減 —— 選單往右走、畫布不動：
       重疊 ＝ 內容右緣 − 選單左緣 ＝ [(vw+1280)/2 − 64] − (vw − 173) ＝ 749 − vw/2
       1280→108.9（實測）　1440→28.9（實測）　1498→0　>1498 選單完全落在畫布之外
     疊照片是原版就有的語彙（index-legacy.html 的左選單疊在 hero 上），疊正文不是，
     故幕 B 的文字另外讓開，見檔尾 @media (min-width:1280px)。
     幕 B 的讓位量已同步改成流體（773px − 50vw），所以那條 24px 通道在 1280–1546 之間
     恆為 24px，不再只有 1280 那一格是準的。 */
.side-nav{left:auto;right:2.5rem}

/* site.js 會把 weekly bouquet 的四個級距子選單注入 .side-nav（site.js:132 的 SPOTS，
   垂直型態），那份 DOM 是執行期產生的、不在 HTML 裡，但它的三條對齊規則都寫死靠左，
   靠右之後會讓選單看起來沒對齊。逐條鏡像（全部加 .side-nav 前綴提高 specificity，
   所以與載入順序無關，也不影響漢堡選單裡同樣是垂直型態的那一份）：

   1 群組容器：site.css:251 是 align-items:flex-start。 */
.side-nav .nav-group--v{align-items:flex-end}
/* 2 「連結＋箭號」那一列：site.css:254 的順序是 [連結][箭號]。靠右時箭號在最右，
      連結的右緣會比其他四項縮進 23px（14px 箭號盒 ＋ 9px gap），五項右緣就對不齊。
      row-reverse 把箭號排到文字左側，文字右緣因此與其他四項齊平。
      箭號的 ::after 點擊區（24×24）與 aria-expanded 的 rotate(180deg) 都不受影響。 */
.side-nav .nav-row{flex-direction:row-reverse}
/* 3 子項清單：site.css:284-285 是 align-items:flex-start ＋ padding-left:1rem 的內縮。
      靠右後內縮要換到右邊，否則子項會朝著頁面邊緣縮、讀起來像溢出。 */
.side-nav .nav-sub--v .nav-sub-list{align-items:flex-end;padding:13px 1rem 3px 0}

/* ---- ≥1280px 才用右側垂直選單；768–1279 退回 2b 的頂欄導覽 ----
   ⚠ 這是本檔第二個斷點，破了 SPEC.md「768 是唯一斷點」。知情決定，理由如下。
   （這個門檻原訂 1500，2026-07-27 降到 1280 —— 使用者回報「桌面版有時候選單還是跑到上面」。
     成因是 1500 太高：Windows 顯示縮放 150% 會讓 1920 螢幕只剩 1280 CSS px，瀏覽器縮放與
     未最大化的視窗同理，所以同一台機器會一下在門檻上、一下在門檻下。1280 有硬理由，見下方。）

   .side-nav 是 position:fixed、永不捲離，而 2b 三幕的右欄在幕 A／C 是照片、在幕 B 是
   400px 寬的**正文**。實測選單墨跡寬 133px（五項最寬的 weekly bouquet，Nanum Myeongjo
   16px），貼視窗右緣 40px，於是：
     vw ≥ 1280   ：三幕右緣 ＝ (vw+1280)/2 − 64，選單左緣 ＝ vw − 40 − 133 ＝ vw − 173
                   → 重疊 ＝ max(0, 749 − vw/2)，零重疊的交界在 vw ＝ 1498
     768 ≤ vw <1280：畫布＝視窗，重疊 ＝ 173 − gutter
   （這兩條公式描述的是「選單貼視窗右緣」的舊版本，留著是因為它解釋了為什麼一開始會訂 1500。
     選單改為對齊畫布之後重疊變成恆定 109px，公式失效 —— 見上方 .side-nav 一節。）
   壓到照片還能當構圖看，壓到正文就是讀不到 —— 所以交界以下改用頂欄導覽，而不是讓內容讓位
   （讓位會讓整頁不再對稱置中，而 1280 畫布置中是 2b 的核心）。

   ---- 為什麼門檻是 1280，而且 1280 是硬下限 ----
   幕 B 的文字要讓開選單，需要「400px 欄寬 ＋ 左推量」塞得進軌道。兩者都隨視窗變化：
     軌道寬 ＝ (canvas − 3×gutter) / 2   ／  左推量 ＝ 173 − gutter
   算一遍（gutter ＝ clamp(40, 5vw, 64)，canvas ＝ min(vw, 1280)）：
     vw    軌道    400＋左推   結果
     768   324.0   533.0      溢出
     1024  435.2   521.8      溢出
     1152  489.6   515.4      溢出
     1210  514.2   512.5      剛好塞得進
     1280  544.0   509.0      塞得進，餘 35px
     ≥1280 544.0   509.0      canvas 飽和，之後全部是常數
   所以真正的下限在 1210px 附近；**1280 是最自然的門檻** —— 它就是畫布寬，畫布在此飽和、
   之後右欄恆為 544px、重疊恆為 109px（20%）、左推量恆為 133px，全部變成常數，沒有邊界情形。
   低於 1280 則右欄跟著視窗縮，重疊比例升到 28%（1024）、41%（768），而且左推量塞不進軌道
   —— 那個區間頂欄才是對的答案。

   1280 也涵蓋幾乎所有桌機實際寬度：1280／1366／1440／1536／1920 全在側選單那一側。

   ⚠ 133px 是字體載入後的實測值。改動導覽項目、字級或字族都要重量一次，並重算上表與
     .act-2b--reverse .act-2b__copy 的 margin-right。

   三條覆寫的勝出理由都不依賴載入順序：
     · .side-nav 的 display:none —— 本檔 unlayered，恆勝 Tailwind 的 md:flex（在
       @layer utilities 內，unlayered 恆勝任何 layer）。
     · .nav-2b .topnav.is-off (0,3,0) ＋ !important 勝 site.css:215 的
       .topnav.is-off (0,2,0) ＋ !important。
     · opacity／visibility／transition 必須一起給：site.css:226-229 讓 .topnav 在 ≥768
       預設 opacity:0／visibility:hidden，只有 .is-shown 才顯出，而 site.js:807 走的是
       .is-off 那條早退路徑、永遠不會加 .is-shown。transition:none 是為了跨斷點縮放時
       不要吃到 site.css:228-229 那個「visibility 延後 0.5s」的過場（否則 opacity 動完
       之後選單才突然出現）。 */
@media (min-width:768px) and (max-width:1279px){
  .side-nav{display:none}
  /* 改用漢堡，而不是把 2b 的頂欄水平列顯回來。
     理由：頂欄水平列只會在 768–1279 這一段出現，等於讓這個設計多出第三種導覽形態，
     而它與右側垂直選單在視覺語彙上沒有任何關係。收成兩種形態（右側選單／漢堡）之後，
     「非漢堡的狀態一律是右側選單」，切換點只有一個。
     ⚠ 代價：這一段的導覽要多點一下才看得到。index-legacy.html 在同寬度是看得見左側選單的，
       所以這是相對對照組的退步；知情決定（導覽形態由設計端定）。頁尾仍有次要連結。
     Tailwind 的 md:hidden 在 @layer utilities 內，本檔 unlayered 恆勝，且
     .nav-2b [data-open="menu"] 是 (0,2,0) > .md\:hidden 的 (0,1,0)，不依賴載入順序。
     display:inline-block ＝ <button> 的 UA 預設（<768 時的實際值），在 .nav-2b 這個
     flex 容器內會被 blockify，與 <768 的呈現完全一致。 */
  .nav-2b [data-open="menu"]{display:inline-block}
}

/* ---- 漢堡選單字級：已移出本檔（2026-07-30）----
   這裡原本有一段 @media (min-width:768px){.mobile-menu nav{font-size:16px}} ——
   只在非行動裝置把選單從 20px 降到 16px，理由是「20px 的連結與 22px 的字標幾乎同重、
   整份選單看起來過大」。那個理由與視窗寬度無關：真行動裝置（<768）的選單字標同樣是 22px，
   所以 375px 下也是 20 vs 22、一樣沒有層級。
   改成全站一律 16px（子項 14px），值直接寫在 9 個 HTML 的 .mobile-menu nav 上
   （text-[16px]），子項配對在 site.css 的 .nav-sub-list 一節。
   HTML 上寫死之後就不需要任何覆寫，這段連同它的 specificity 推導一起刪除。
   16px 不是新數字：.side-nav 就是 16px，而漢堡選單取代的正是那份導覽。 */

/* ---- ≥1280px：幕 B 的文字讓開選單（2026-07-29 改為流體）----
   幕 A／C 的右欄是照片，被選單疊到是可接受的編輯語彙；幕 B 的右欄是正文，不能被壓。
   必須用「整欄左推」而不是「收窄欄寬」：文字欄是 justify-self:end、右緣貼在軌道右緣，
   而被遮的正好就是右緣那一段 —— 收窄寬度右緣不動，一樣被壓。

   讓位量的定義沒變：**文字欄右緣要停在選單左緣再往左 24px 處**（24px 取自交付稿的
   spacing scale，README:155）。變的是選單的位置 —— header 改滿版後 .side-nav 錨在視窗上
   （right:2.5rem），選單相對畫布右緣的內縮量不再恆為 40px，而是 1280/2 + 40 − 50vw。
   代回原式即得下面那條 calc：
     讓位 ＝ 畫布半寬 1280/2 ＋ 選單距視窗右緣 2.5rem ＋ 選單墨跡 133 ＋ 通道 24
             − 三幕 gutter --gutter-2b ＝ 64 − 半視窗寬 50vw
           ＝ 773px − 50vw （夾在 0 以上）
     1280→133　1360→93　1440→53　1498→24　≥1546→0
   1280 那格算出來正好是舊的寫死值 133，所以斷點上連續，拉動視窗不會跳一下。

   ⚠ 六個項刻意攤開在 calc() 裡、不折成 773px：其中 133px 是**字體載入後的實測值**
     （見 PROGRESS 待辦 10 的警告），改導覽項目／字級／字族都要重量。攤開才能讓這個依賴
     出現在用到它的那一行，而不是藏在一個魔術數字裡。常數由瀏覽器自己折。
     --gutter-2b 在 ≥1280 恆為 64px（clamp 的 max），用 token 而非寫死，改 clamp 時會跟著走。

   ⚠ spec §4.2 的「文字靠右對齊欄位邊緣」：改流體之後這條在 ≥1546px **恢復**（讓位為 0、
     文字右緣與幕 A／C 照片右緣齊平），1280–1546 之間仍被打破但幅度隨視窗遞減。
     換來的是「文字讓到選單為止」這個意圖在**每個**寬度都成立 —— 舊的寫死 133px 只在
     1280 那一個寬度讓通道剛好是 24px，1440 時實際是 104px、讀起來只是個沒來由的偏移。
     768–1279 不套這條（選單隱藏，文字欄回到完整 400px 並貼齊軌道右緣）。
   ⚠ 寬度約束仍然恆成立且只會更寬鬆：讓位量 ≤ 133（隨視窗遞減），而軌道隨視窗變寬，
     故 400 ＋ 讓位 ≤ 軌道 恆真（1280 時 400 ＋ 133 ＝ 533 ≤ 544，餘 11px 是最緊的一格）。
   50vw 沒有捲軸誤差：頁面捲軸已全站隱藏（site.css 檔首），100vw == innerWidth。 */
@media (min-width:1280px){
  .act-2b--reverse .act-2b__copy{
    margin-right:max(0px, calc(1280px / 2 + 2.5rem + 133px + 24px - var(--gutter-2b) - 50vw));
  }
}

/* ---- <768px ----
   交付稿的 <768 建議只有三件事（README:119）：三幕改單欄（圖在上、文在下）、hero 改
   320px、導覽收成漢堡；其餘一律「未設計」，也沒有任何一句涉及引言／幕／收尾／頁尾的內距。
   因此這一段的原則是「只覆寫有出處的東西」，三類各自標在規則上：
     (a) 交付稿的 <768 建議明寫的；
     (b) 單欄之後屬性語意變了、非覆寫不可的（欄間 gap 變成上下 gap、max-width／
         justify-self／order、頁尾兩組連結改直排）；
     (c) 頁面的橫向 gutter 24px ＝ 現站 px-6（理由同 spec §5.2 末列的 Header padding）。
   不落在這三類的一律**不覆寫**，直接沿用交付稿的定稿值 —— 引言 96px、每幕 64px、
   finale 64px、收尾 80/88 在行動版原封不動。這樣少四個沒有出處的數字，行動版的縱向
   節奏也與交付稿（以及現站首頁行動版的 96／80／96／80）同量級。逐列對照見 spec §4.7。
   SPEC.md 規定 768 是唯一斷點，故不引入 1280 斷點；這是本檔唯一的 media query。 */
@media (max-width:767px){
  /* (a) 交付稿建議值。明寫覆蓋 clamp —— clamp 的 min 是 420px，不會自己降到 320。 */
  .hero-2b{height:320px}
  /* (c) 24px ＝ px-6；--gutter-2b 的 min 是 40px，不覆寫就會停在 40。 */
  .acts-2b{padding:0 24px}
  /* (a) 單欄 ＋ (b) gap 從「兩欄之間的橫向間距」變成「圖↔文的縱向間距」，
     同一個 64px 已不是同一件事，必須另定。32px 取自現站首頁行動版的內文→圖間距
     （index-legacy.html 幕內 figure 的 mt-8 ＝ 2rem ＝ 32px）：<768 兩頁都是單欄，
     這段的圖文距離讀起來應該一樣，比較才不會在行動版多出變因。
     上下 padding 不覆寫：維持交付稿的 64px。 */
  .act-2b{grid-template-columns:1fr;gap:32px}
  /* (b) 交錯規則失效，三幕一律「圖在上、文在下」（交付稿明寫）。
     幕 A／C 的 DOM 順序是 copy → figure，單欄下會變成文在上；order:-1 把圖拉到前面。
     幕 B（--reverse）的 figure 本來就是第一個子元素，order:-1 不改變它的位置。
     代價：幕 A／C 在 <768 的視覺順序（圖先）與 DOM 順序（文先）不一致。兩端皆不可聚焦
     （figure 與 <p>，767px 實測幕內可聚焦元素為 0），故不影響 WCAG 2.4.3 焦點順序；
     報讀器讀到的仍是「標題→內文→圖」這個有意義的序列。知情接受 —— 另一種寫法是三幕 DOM
     一律 figure 先、桌機再用 order 把幕 A／C 的文字拉到左邊，但那只是把不一致搬到桌機。 */
  .act-2b figure{order:-1}
  /* (b) 單欄下欄寬就是內容寬，400px 上限與靠右對齊都必須取消，
     否則文字欄會比圖窄一截且靠在右邊，讀起來像沒對齊。 */
  .act-2b__copy{max-width:none}
  .act-2b--reverse .act-2b__copy{justify-self:stretch}
  /* (c) 橫向與桌機同理用 margin（padding 內縮不到 border-top），24px 與 .acts-2b 同值，
     hairline 與三幕齊寬（vw−48）。圖不一定齊寬 —— .finale-2b figure 仍受 max-width:640
     限制，所以只有 vw ≤ 688（vw−48 ≤ 640）時與三幕同寬，689–767 維持 640 置中
     （與桌機同一個處理，刻意）。實測 767px：內容寬 719、圖 640、左右各縮 39.5px，而同斷點
     的三幕圖是整欄 719px；688px 三者同為 640。
     ⚠ 在 767px 量到「圖比 hairline 窄」不是回歸，不要去拿掉 max-width —— 那會把桌機的
       640×800（spec §4.4）一起改壞。上下 padding 不覆寫：維持 spec §4.4 的 64px。 */
  .finale-2b{margin:0 24px}
  /* (c) 只換橫向：36／30 是交付稿值（README:97），左右 40 → 24 對齊 px-6。 */
  .footer-2b{padding:36px 24px 30px}
  /* (b) space-between 在單欄沒有意義，兩組連結改直排。gap 不覆寫 —— 桌機那條的 28px
     是交付稿值（README:98-99，左右兩組各自的組內 gap；README:97 只有 footer 的 border-top／
     padding／display／justify-content／font-size，沒有 gap），直排後它成為兩組之間的縱向
     間距，仍是交付稿的數字。 */
  .footer-2b__rows{flex-direction:column}
}