/* ===== v9 合成版 =====
   Freddy 2026-08-19 挑版後的合成：從八個探索版各留一件他點名的東西。
     · v2 → 每段左側一條軸線＋節點（引導視覺）
     · v6 → 左側 sticky 章節導覽（但欄寬加寬、目錄改用短標籤）
     · v4 → #door 的 token 漸層幕（那段沒配圖，漸層是它現在的解）
   不採用：v8 的 sticky 大標（Freddy：有用但版面切法不好看）、v1／v3／v5／v7。
   顏色一律用 site.css 既有 token，未引入新色。 */

/* ---------- 版面骨架：左側欄 + 右內容 ---------- */
/* 2026-09-04 正式站實測：Seraphinite earlyPaint 會在合併 CSS 注入 html,html.async-hide,body{display:block!important}，
   把這條 body grid 壓掉（匿名訪客看到側欄佔滿全寬、hero 被推到 1000px 下）。要更高特異性＋!important 才壓得過；
   手機那條同樣加 !important（同特異性、排在後面就贏）。 */
html>body{display:grid!important;grid-template-columns:210px 1fr}
header.site,footer.site{grid-column:1/-1}
/* 2026-09-05 Freddy：頁尾左邊被側欄蓋住（.labnav sticky 且有實色底、grid-row 1/-1 跨到頁尾那列，
   positioned 元素畫在頁尾上面）。頁尾本身有 --ink-deep 底，改成 positioned＋更高 z-index 蓋回去；手機那條 .labnav 是 z-index:30。 */
footer.site{position:relative;z-index:31}
.ah,.sec,.end{grid-column:2}

/* ---------- 側欄章節導覽（v6，收窄到 210px，標籤短所以夠用） ---------- */
.labnav{grid-column:1;grid-row:1/-1;align-self:start;position:sticky;top:84px;
  height:calc(100vh - 84px);overflow-y:auto;padding:30px 14px 30px 22px;
  background:var(--ink-deep)}
.labnav-progress{height:3px;background:var(--line);border-radius:3px;margin-bottom:24px;overflow:hidden}
.labnav-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--hot))}
.labnav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.labnav-list a{display:flex;align-items:baseline;gap:9px;padding:9px 9px;border-radius:8px;
  font-size:.92rem;color:var(--cream-dim);line-height:1.5;white-space:nowrap;
  transition:color .2s,background .2s}
.labnav-list a:hover{color:var(--cream);background:rgba(200,230,232,.06)}
.labnav-list a.on{color:var(--hot);background:rgba(79,216,234,.1)}
.labnav-n{font-size:.72rem;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;flex:none}
.labnav-list a.on .labnav-n{color:var(--hot)}

/* ---------- 內容欄：比 v6 的 900px 加寬，左右留白收掉 ---------- */
/* --axis 是軸線距內容欄左緣的距離，文字再往右讓 44px，讓節點不貼著字 */
.sec .lane2,.end .lane2,.ah .lane2{--axis:34px;position:relative;
  max-width:1120px;padding-left:calc(var(--axis) + 44px);padding-right:clamp(20px,3vw,40px)}
.sec .lane2,.end .lane2{--textw:920px}
.solo{max-width:var(--textw)}
/* 並排照片（#after）也收到同寬。不收的話它是滿 1002px、右邊界比內文突出 82px，
   Freddy 兩次圈過同一個問題（§12.4 坑 #3）。綁同一個 --textw 才不會日後又走鐘。 */
.duo{max-width:var(--textw)}
.cols{grid-template-columns:minmax(0,1fr) clamp(200px,17vw,270px)}
.cols.flip{grid-template-columns:clamp(200px,17vw,270px) minmax(0,1fr)}
.sec.beat p{max-width:880px}

/* hero 不掛軸線，但要跟內文左緣對齊 */
.ah .lane2::before,.ah .lane2::after{content:none}

/* ---------- 軸線與節點（v2）---------- */
/* 每段各畫一段 top:0→bottom:0 的線，section 之間沒有空隙，接起來就是一條 */
.sec .lane2::before,.end .lane2::before{content:"";position:absolute;left:var(--axis);
  top:0;bottom:0;width:2px;background:var(--line)}
.sec.light .lane2::before{background:var(--line-d)}
.sec .lane2::after,.end .lane2::after{content:"";position:absolute;
  left:calc(var(--axis) - 5px);top:10px;width:12px;height:12px;border-radius:50%;
  background:var(--hot);box-shadow:0 0 0 4px var(--ink0)}
.sec.light .lane2::after{box-shadow:0 0 0 4px var(--paper)}
.sec.key.light .lane2::after{box-shadow:0 0 0 4px #fff}
.end .lane2::after{box-shadow:0 0 0 4px var(--ink-deep)}

/* ---------- #door：沒配圖，用 token 漸層當幕（v4）---------- */
/* HTML 上它掛的是 .sec.light，這裡整段翻成深色，字色要一起翻回來 */
#door{background:linear-gradient(155deg,var(--navy) 0%,var(--ink2) 58%,var(--ink1) 100%);
  border-top:0}
#door+.sec{border-top:0}
#door .kk{color:var(--hot)}
#door h2{color:#fff}
#door p{color:rgba(244,250,252,.92)}
#door p b{color:#fff}
#door p.pq{color:var(--hot)}
#door p.pq small{color:var(--cream-dim)}
#door .lane2::before{background:rgba(202,230,232,.28)}
#door .lane2::after{box-shadow:none}

/* ---------- 內文超連結 ---------- */
/* site.css:24 的 a{color:inherit;text-decoration:none} 會把內文連結洗成純文字，
   這裡照 site.css 既有的 .prose a／.mile-body .ref a 兩種寫法補回來，只用既有 token */
.sec p a{color:var(--hot);border-bottom:1px solid rgba(79,216,234,.45);transition:border-color .2s}
.sec p a:hover{border-bottom-color:var(--hot)}
.sec.light p a{color:var(--navy);border-bottom-color:rgba(31,89,126,.35)}
.sec.light p a:hover{border-bottom-color:var(--navy)}

/* ---------- 手機 ---------- */
@media(max-width:900px){
  /* ⚠️ 上面那條 .cols 覆寫沒有包 media query，會壓過 base.css 裡
     @media(max-width:900px){.cols{grid-template-columns:1fr}}（同特異性、排在後面就贏），
     手機因此還是兩欄、文字欄被壓到剩 110px。這裡補回單欄。§12.4 坑 #2 的同一個坑。 */
  .cols,.cols.flip{grid-template-columns:1fr;gap:26px}
  html>body{display:block!important}
  .labnav{position:sticky;top:84px;height:auto;width:100%;padding:10px clamp(20px,4vw,40px);
    border-bottom:1px solid var(--line);z-index:30}
  .labnav-list{display:none}
  .labnav-progress{margin-bottom:0}
  .ah,.sec,.end{grid-column:auto}
  .sec .lane2,.end .lane2,.ah .lane2{max-width:100%}
}
@media(max-width:640px){
  .sec .lane2,.end .lane2,.ah .lane2{--axis:14px;padding-left:34px;padding-right:20px}
  .sec .lane2::after,.end .lane2::after{width:10px;height:10px;left:calc(var(--axis) - 4px)}
}

/* 圖說一律置中（2026-08-21 Freddy：靠左很難看）。
   覆寫 about-lab-base.css:55/76/80 的預設靠左，不動顏色與字級。 */
.side figcaption,.duo figcaption,.shot2 figcaption{text-align:center}

/* 2026-09-03 根字級改 18 之後，開場 h1「我是阿里巴巴國際站的業務。」在 1470 斷成「業／務。」；
   上限從 2.7rem 收到 2.4rem（13 字×43px＝559px，放得進約 600px 的左欄）。手機不受影響（走 1.8rem 那端）。 */
.ah h1{font-size:clamp(1.5rem,3.4vw,2.4rem)}  /* 下限 1.8→1.5rem：手機 13 字「我是阿里巴巴國際站的業務。」一行放得下 */