/* MMB 雜誌編輯系統 —— 首頁、內頁、Blog 共用嘅單一出處。
   2026-09-24 由 index.html 個 inline <style> 抽出嚟（.design/extract_magazine.py）。
   🔴 改呢個檔會同時影響首頁、6 個內頁同 27 個 blog 頁,改完一定要跑
      python3 .design/computed_diff.py 同 node --test site-upgrade.test.mjs blog.test.mjs。*/

/* ---------- AUTHORITY STRIP ---------- */
  /* ---------- SECTION HEADS ---------- */
  .sec-idx{font-family:var(--mono);color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.1em}
  /* ---------- FIELD STRIP — 現場相片 marquee(hover 停) ---------- */
  /* ---------- ABOUT — offset selfie frame, broken grid ---------- */
  .about{background:var(--bg2)}
  .about h2{font-size:clamp(30px,4.6vw,52px);font-weight:900}
  .about .lead{font-family:var(--mono);color:var(--grey2);font-size:13px;font-weight:700;letter-spacing:.06em;margin-top:16px}
  .about p{font-size:16px;color:var(--grey);line-height:1.85;margin-bottom:16px}
  .about p b{color:var(--white);font-weight:800}
  .about .credits{margin-top:40px;padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
  .about .credits div{font-size:14px;color:var(--grey);padding-left:16px;position:relative;line-height:1.6}
  .about .credits div::before{content:"";position:absolute;left:0;top:8px;width:7px;height:2px;background:var(--cyan)}
  @media(max-width:820px){.about .credits{grid-template-columns:1fr}}

  /* ---------- SHOW (吹銷) — studio photo + overlapping quote card ---------- */
  .show{border-top:1px solid var(--line)}
  .show h2{font-size:clamp(32px,5vw,58px);font-weight:900;margin:16px 0}
  .show h2 .line{display:block;white-space:nowrap}
  .show h2 .cy{color:var(--orange)}
  .show p{font-size:16px;color:var(--grey);max-width:32em;line-height:1.75}
  .show .topics{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
  .show .topics span{border:1px solid var(--line);color:var(--grey);font-size:13px;font-weight:600;padding:8px 16px;border-radius:2px;transition:border-color .25s,color .25s}
  .show .topics span:hover{border-color:var(--orange);color:var(--white)}
  .show .handle{margin-top:32px;color:var(--white);font-weight:800;font-size:17px}
  .show-visual .q{font-size:clamp(18px,2.2vw,23px);color:var(--white);font-weight:800;line-height:1.45}
  .sec-idx{font-size:10px;color:var(--accent-deep);letter-spacing:.18em}
  .about{background:#11171d}.about h2{font-size:clamp(42px,6vw,78px)}.about p{font-size:17px;line-height:2}.about .credits{border-top:1px solid var(--line)}
  .show{background:var(--bg)}.show h2{font-size:clamp(46px,6.5vw,82px)}
  .show-visual .q{font-family:var(--disp);font-weight:600}
  /* ---------- CONVERSION + SERVICE STORY ---------- */
  .service-step{position:relative;transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
  .service-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
  .service-step.active::before{transform:scaleY(1)}
  .service-step:not(.active){opacity:.58}
  .service-step.active{opacity:1;transform:none}
  .service-cta{display:inline-flex;align-items:center;min-height:44px;gap:12px;margin-top:28px;color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid rgba(124,167,216,.55);padding-bottom:8px;transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
  .service-cta::after{content:"→";color:var(--orange);transition:transform .25s var(--ease)}
  .service-cta:hover{color:var(--orange);border-color:var(--orange);transform:translateX(3px)}
  .service-cta:hover::after{transform:translateX(4px)}
  .service-detail{display:inline-flex;align-items:center;min-height:44px;margin:16px 0 0 16px;color:var(--grey2);font-size:12px;font-weight:700;border-bottom:1px solid var(--grey2)}
  .show-visual .q{color:var(--white)}
  .faq{background:var(--bg);border-top:1px solid var(--line)}
  .faq h2{font-size:clamp(38px,5.6vw,68px);margin-top:16px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;min-height:76px;padding:24px 56px 20px 0;color:var(--white);font-size:18px;font-weight:800;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"＋";position:absolute;right:4px;top:20px;color:var(--orange);font-size:24px;font-weight:400;transition:transform .25s var(--ease)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{padding:0 56px 24px 0;max-width:48em;line-height:1.85}

  .booking-aside .sec-idx{color:#d7c7aa}@media(max-width:560px){
    .faq summary{font-size:16px;padding-right:40px}
    .faq details p{padding-right:8px}
  }

  /* ---------- LATEST ARTICLES ---------- */
  .latest-articles{background:#efe6d8;border-block:1px solid var(--line)}
  .latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .latest-card{display:flex;flex-direction:column;background:rgba(255,250,241,.62);border:1px solid var(--line);min-width:0;transition:transform .25s var(--ease),border-color .25s var(--ease)}
  .latest-card:hover{transform:translateY(-4px);border-color:rgba(164,72,47,.46)}
  .latest-card-media{display:grid;place-items:center;min-height:260px;padding:16px;background:rgba(233,223,207,.82);border-bottom:1px solid var(--line)}
  .latest-card-media img{width:auto;height:auto;max-width:100%;max-height:230px;object-fit:contain}
  .latest-card-copy{display:flex;flex-direction:column;flex:1;padding:24px}
  .latest-card-meta{font:600 10px/1.5 var(--mono);letter-spacing:.08em;color:var(--orange);margin-bottom:16px}
  .latest-card h3{font-size:clamp(22px,2.2vw,29px);line-height:1.35}
  .latest-card p{margin-top:16px;color:var(--grey2);font-size:14px;line-height:1.75}
  .latest-card b{margin-top:auto;padding-top:24px;color:var(--white);font-size:13px}
  @media(max-width:860px){.latest-grid{grid-template-columns:1fr 1fr}.latest-card:last-child{grid-column:1/-1}.latest-card:last-child{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr}.latest-card:last-child .latest-card-media{height:100%;min-height:260px;border-bottom:0;border-right:1px solid var(--line)}}
  @media(max-width:620px){.latest-grid{grid-template-columns:1fr}.latest-card:last-child{grid-column:auto;display:flex}.latest-card:last-child .latest-card-media{height:auto;min-height:270px;border-right:0;border-bottom:1px solid var(--line)}}
  /* — 部門頭：running head + 巨型欄號 — */
.mag-run{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:2px solid var(--ink-display);padding-top:10px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--ink-display);text-transform:uppercase}
.mag-run em{font-style:normal;color:var(--accent-soft)}
.mag-dept{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:start;margin-top:clamp(24px,3vw,40px)}
.mag-folio{font-family:var(--mag-display);font-weight:700;line-height:.76;
  font-size:clamp(88px,13vw,190px);color:var(--accent);letter-spacing:-.04em;
  margin-top:-.06em;font-feature-settings:"lnum" 1}
/* h1 同 h2 同一個尺寸：首頁嘅部門頭係 h2（H1 喺 hero）,blog 嘅部門頭係 h1。
   同一個視覺層級唔應該因為 heading level 唔同就變樣。 */
.mag-dept h1,.mag-dept h2{font-size:clamp(30px,3.9vw,50px);line-height:1.1;margin:0 0 14px}
.mag-standfirst{max-width:30em;font-size:clamp(15px,1.25vw,17.5px);line-height:1.8;color:var(--ink-body)}
.mag-standfirst b{font-weight:700;box-shadow:inset 0 -.42em 0 rgba(164,72,47,.16)}
.mag-standfirst a{color:var(--ink-display);border-bottom:1px solid var(--accent)}
.mag-index{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:22px;
  border-top:1px solid var(--rule);padding-top:10px;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted)}
.mag-index span::before{content:"— ";color:var(--accent-soft)}

/* 反轉區（深綠底）嘅部門頭 */
.mag-run--dark{border-top-color:var(--ink-on-dark);color:var(--ink-on-dark)}
.mag-run--dark em{color:var(--accent-on-dark)}
.mag-dept--dark h2{color:var(--ink-on-dark)}
.mag-dept--dark .mag-folio{color:var(--accent-on-dark)}
.mag-dept--dark .mag-standfirst{color:var(--ink-on-dark)}
.mag-dept--dark .mag-standfirst b{box-shadow:inset 0 -.42em 0 rgba(215,136,115,.22)}
.mag-dept--dark .mag-index{border-top-color:var(--rule-on-dark);color:var(--ink-muted-on-dark)}
.mag-dept--dark .mag-index span::before{color:var(--accent-on-dark)}

/* — 頭條：圖 + 文，圖破格伸出左欄 — */
.mag-feature{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.24fr);
  gap:clamp(24px,3.4vw,56px);margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,40px)}
.mag-figure{margin:0;position:relative}
.mag-figure img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.mag-scene{width:100%;height:auto;display:block;border:1px solid var(--rule);
  filter:saturate(.92) contrast(1.02);margin-bottom:clamp(12px,1.4vw,18px)}
.mag-sheet{border:1px solid var(--rule);background:var(--surface-2);
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(16px,1.8vw,22px)}
.sh-hd{display:flex;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--ink-display);padding-bottom:9px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-display)}
.sh-sec{margin-top:16px}
.sh-sec b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#7a5a2e;margin-bottom:7px}
.sh-sec ul{margin:0;padding:0;list-style:none}
.sh-sec li{font-size:13.5px;line-height:1.55;color:var(--ink-body);
  padding:7px 0;border-bottom:1px solid var(--rule)}
.sh-fine{margin-top:14px;font-size:11px;line-height:1.75;color:var(--ink-muted)}
.mag-cap{margin-top:10px;font-size:11.5px;line-height:1.7;color:var(--ink-muted);
  padding-left:10px;border-left:2px solid var(--accent)}
.mag-cap b{color:var(--ink-display);font-weight:700}
.mag-feature h3{font-family:var(--mag-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(30px,3.5vw,46px);line-height:1.14;margin:0 0 6px}
.mag-en{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent-soft);text-transform:uppercase}
.mag-drop{margin-top:20px;font-size:clamp(15px,1.2vw,17px);line-height:1.85;color:var(--ink-body)}
.mag-drop::first-letter{float:left;font-family:var(--mag-display);font-weight:700;
  font-size:2.7em;line-height:.9;padding:.08em .16em 0 0;color:var(--accent)}
.mag-specs{margin:24px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  border-top:1px solid var(--rule)}
.mag-specs li{padding:11px 16px 11px 0;border-bottom:1px solid var(--rule);
  font-size:14px;color:var(--ink-body);display:flex;gap:10px;align-items:baseline}
.mag-specs li i{font-style:normal;font-family:var(--mag-display);font-weight:700;
  font-size:13px;color:var(--accent-soft);min-width:1.6em}
.mag-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}

/* — 頁邊註（marginalia） — */
.mag-margin{margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.85;color:var(--ink-muted)}
.mag-margin b{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-display);margin-bottom:6px}

/* — 目錄行 — */
.mag-list{margin-top:clamp(40px,5vw,68px);border-top:2px solid var(--ink-display)}
.mag-row{display:grid;grid-template-columns:auto minmax(190px,.66fr) minmax(0,1.5fr) auto;
  gap:clamp(16px,2.4vw,40px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule);position:relative}
.mag-row>*{min-width:0}
.mag-row .no{font-family:var(--mag-display);font-weight:700;font-size:clamp(26px,2.9vw,40px);
  line-height:1;color:#9d855f;letter-spacing:-.03em;transition:color .35s var(--ease)}
.mag-row:hover .no{color:var(--accent)}
.mag-row h3{font-size:clamp(19px,1.8vw,24px);line-height:1.25;margin:0 0 4px}
.mag-row .mag-en{font-size:10.5px;letter-spacing:.16em}
.mag-row p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink-body)}
.mag-row .runs{margin-top:8px;font-size:12px;color:var(--ink-muted);line-height:1.8}
.mag-row .runs i{font-style:normal;color:var(--accent-soft);padding:0 6px}
.mag-go{align-self:center;white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-display);border-bottom:1px solid var(--accent);padding-bottom:3px}
.mag-go:hover{color:var(--accent)}
.mag-acts{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-top:12px}
.mag-acts .mag-go{align-self:auto;margin-top:0!important;display:inline-block}
.mag-cta{white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.04em;gap:8px;
  min-height:0;margin-top:0;padding-bottom:3px;
  color:var(--accent);border-bottom:1px solid var(--accent)}
.mag-cta::after{color:var(--accent)}
.mag-cta:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.mag-row--photo{grid-template-columns:auto minmax(190px,.66fr) minmax(0,1.5fr) minmax(170px,.46fr)}
.mag-thumb{margin:0}
.mag-thumb img{width:100%;height:118px;object-fit:cover;object-position:center top;display:block;
  border:1px solid var(--rule);filter:saturate(.82) contrast(1.04)}
.mag-thumb figcaption{margin-top:6px;font-size:10.5px;letter-spacing:.04em;color:var(--ink-muted)}
/* 相位交替：單數行相入左欄（標題下），雙數行相落最右 —— 唔好每行同一個位 */
.mag-thumb--inset{margin-top:14px}
.mag-thumb--inset img{height:132px}

/* — pull quote：深綠 full-bleed 條 — */
.mag-pull{margin:clamp(44px,5vw,76px) calc(50% - 50vw) 0;padding:clamp(40px,5vw,68px) 0;
  background:var(--surface-ink);color:var(--ink-on-dark)}
.mag-pull .wrap{max-width:1320px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:start}
.mag-pull .qm{font-family:var(--mag-display);font-weight:700;font-size:clamp(70px,9vw,128px);
  line-height:.62;color:var(--accent-on-dark)}
.mag-pull blockquote{margin:0;font-family:var(--mag-display);font-weight:700;font-style:normal;
  font-size:clamp(25px,3.2vw,44px);line-height:1.42;letter-spacing:.005em;max-width:15em}
.mag-pull cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted-on-dark)}

.proc-band{background:var(--surface-ink);color:var(--ink-on-dark);
  padding:clamp(56px,6.4vw,92px) 0 clamp(52px,6vw,84px)}
.proc-band .wrap{max-width:1320px}
.proc-rail{margin-top:clamp(36px,4.4vw,64px);position:relative;
  border-top:1px solid var(--rule-on-dark)}
.proc-rail::before{content:"";position:absolute;left:calc(clamp(52px,6vw,88px) / 2);top:0;bottom:44px;
  width:1px;background:var(--rule-on-dark)}
.proc-step{display:grid;grid-template-columns:clamp(52px,6vw,88px) minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,44px) 0;border-bottom:1px solid var(--rule-on-dark)}
.proc-step .pn{position:relative;font-family:var(--mag-display);font-weight:700;
  font-size:clamp(26px,3vw,42px);line-height:1;color:var(--accent-on-dark);
  background:var(--surface-ink);padding:2px 0 10px;text-align:center;font-feature-settings:"lnum" 1}
.proc-step h3{font-size:clamp(20px,2vw,27px);line-height:1.25;margin:0 0 8px;color:var(--ink-on-dark)}
.proc-step p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-muted-on-dark);max-width:30em}
.proc-tool{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-on-dark)}
.proc-dia{margin:0;color:var(--ink-on-dark)}
.proc-dia svg{width:100%;max-width:230px;height:auto;display:block}
.proc-step--flip .proc-dia{justify-self:end}
.proc-step--flip{grid-template-columns:clamp(52px,6vw,88px) minmax(0,1fr) minmax(0,1.45fr)}
.proc-step--flip .proc-dia{grid-column:2;grid-row:1}
.proc-step--flip .proc-body{grid-column:3;grid-row:1}
.proc-foot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  margin-top:clamp(26px,3vw,40px)}
.proc-foot .mag-go{color:var(--ink-on-dark);border-bottom-color:var(--accent-on-dark)}
.proc-foot .mag-go:hover{color:var(--accent-on-dark)}
.proc-foot .micro{font-size:12px;color:var(--ink-muted-on-dark)}

/* ===== 02 · Scroll 驅動編輯枱（2026-09-24）=====
   --p 由 JS 寫入（0→1，代表 .proc-stage 行緊幾多），所有效果由佢一條變數驅動。
   規矩：只郁 transform／opacity／stroke-dashoffset；唔做漂浮裝飾；
   三步唔係「逐個 fade-in」，係一條真軸線順住行，行到邊步邊步先實心。 */
.proc-stage{--p:0;position:relative}
/* 左欄嘅步驟指示：部門頭之下，講返而家行到邊 */
.proc-nav{margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--rule-on-dark)}
.proc-nav li{padding:9px 0;border-bottom:1px solid var(--rule-on-dark);
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-muted-on-dark);
  display:flex;gap:10px;transition:color .45s var(--ease)}
.proc-nav li[data-on]{color:var(--ink-on-dark)}
.proc-nav li[data-on]::before{content:"";width:16px;height:1px;background:var(--accent-on-dark);align-self:center}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .proc-stage{height:320vh}
  .proc-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .proc-sticky>.wrap{width:100%;display:grid;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    grid-template-areas:"run run" "head steps";
    column-gap:clamp(30px,4.4vw,80px);row-gap:clamp(16px,2.2vw,30px);align-items:center}
  .proc-sticky .mag-run{grid-area:run;align-self:start}
  .proc-sticky .mag-dept{grid-area:head;margin-top:0}
  .proc-sticky .proc-rail{grid-area:steps;margin-top:0;position:relative;
    min-height:min(56vh,440px);border-top:0}
  /* 三步疊喺同一格，一次淨出一步 */
  .proc-sticky .proc-step{position:absolute;left:0;right:0;top:50%;translate:0 -50%;
    border-bottom:0;padding:0;opacity:0;pointer-events:none;
    transform:translateY(22px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
  .proc-sticky .proc-step[data-on]{opacity:1;transform:none;pointer-events:auto}
  .proc-sticky .proc-step .pn{color:var(--accent-on-dark);background:transparent}
  .proc-sticky .proc-dia svg{max-width:280px}
  /* 圖解線條隨 scroll 自己畫 */
  .proc-dia svg [stroke]{stroke-dasharray:var(--len,260);stroke-dashoffset:calc(var(--len,260) * (1 - var(--sp,0)))}
  .proc-dia svg [fill]:not([stroke]){opacity:var(--sp,0);transition:opacity .45s var(--ease)}
}
@media(max-width:900px),(prefers-reduced-motion:reduce){.proc-nav{display:none}}
/* 軸線本體：底線用 CSS，accent 線用 SVG 畫 */
.proc-rail{position:relative}
.proc-railline{position:absolute;left:calc(clamp(52px,6vw,88px) / 2 - 1px);top:0;bottom:44px;
  width:2px;height:auto;overflow:visible;pointer-events:none;z-index:1}
.rl-draw{stroke-dashoffset:calc(1000 * (1 - var(--p,0)))}
@media(prefers-reduced-motion:reduce){
  .rl-draw{stroke-dashoffset:0}
  .proc-step{opacity:1}
  .proc-dia svg [stroke]{stroke-dasharray:none;stroke-dashoffset:0}
  .proc-dia svg [fill]:not([stroke]){opacity:1}
}
@media(max-width:900px){.rl-draw{stroke-dashoffset:0}}

/* ===== 編輯枱 · track 模式（2026-09-24，落 01／03／04）=====
   02 用嘅係 pin 模式：黐住 viewport、一次淨出一步，代價係 section 食 320vh。
   呢三段唔照抄——三段一齊 pin 等於成頁多九個 viewport 嘅空轉，而且服務目錄同
   文章列表本身係俾人掃嘅，一次淨出一項反而阻住睇。
   track 模式係同一部機器（--p 段落進度 ＋ 逐項 data-on），但唔 pin、唔加高度。
   🔴 呢度唔准做「逐個 element fade-in」（Marcus 否決過，appendix B-8）：
   落嘅係**方位**唔係入場——欄線畫到你讀到嘅位置，而家讀緊嗰項嘅行號同目錄
   entry 實心化。同 02 嘅 .proc-nav[data-on] 係同一個語言。 */
.stage{--p:0}
/* 🔴 running head 一定要黐頂,否則成件事白做：條進度線畫喺 section 最頂嗰行,
   唔黐住嘅話一 scroll 就出咗畫,由頭到尾冇人見過佢行。黐住 top:64px（nav 高度）
   之後佢就係雜誌真正嘅 running head——由頭到尾話你知讀緊邊個部門、讀到幾多。 */
.stage>.wrap>.mag-run{position:sticky;top:64px;z-index:20;background:var(--bg);
  padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--rule);
  /* 負 margin 撐返 .wrap 嘅左右留白:唔撐嘅話底色窄過內容,兩邊會漏返啲字出嚟。
     🔴 一定要食 .wrap 自己嗰個 --wrap-pad,唔可以寫死數字——寫死 24px 撞正手機
     嗰陣 .wrap 係 22px,兩邊各撐多 2px,成頁就多咗橫向 scroll。 */
  margin-inline:calc(var(--wrap-pad,24px) * -1);padding-inline:var(--wrap-pad,24px)}
.stage>.wrap>.mag-run::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;
  background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
.stage .mag-run--dark::before{background:var(--accent-on-dark)}
/* 目錄 entry 同行號：而家讀緊嗰項實心 */
.mag-index span{transition:color .35s var(--ease)}
.mag-index span[data-on]{color:var(--ink-display)}
.mag-index span[data-on]::before{color:var(--accent)}
.mag-dept--dark .mag-index span[data-on]{color:var(--ink-on-dark)}
.mag-row[data-on] .no{color:var(--accent)}
/* 讀緊嗰項嘅欄線轉 accent，一條線代替一段動畫 */
.mag-row[data-on]{border-bottom-color:var(--accent)}
.mag-feature[data-on] .mag-cap b,.wk[data-on] .wk-meta,.latest-card[data-on] .latest-card-meta{color:var(--accent)}
.wk[data-on] img{filter:saturate(1)}
@media(prefers-reduced-motion:reduce){
  .stage>.wrap>.mag-run::before{transform:none}
  .mag-index span,.mag-row .no{transition:none}
}

.mag-works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2.4vw,40px);row-gap:0;margin-top:clamp(36px,4.4vw,64px);
  border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,38px);align-items:start}
.wk-lead{grid-column:1/8}
.wk-s1{grid-column:8/13;margin-top:clamp(20px,3vw,54px)}
.wk-s2{grid-column:3/9;margin-top:clamp(30px,3.6vw,62px)}
.wk-note{grid-column:9/13;margin-top:clamp(30px,3.6vw,62px)}
.wk{display:block}
.wk img{width:100%;height:auto;display:block;border:1px solid var(--rule);filter:saturate(.9)}
.wk .wk-meta{margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-soft)}
.wk h3{font-family:var(--mag-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(21px,2.2vw,31px);line-height:1.2;margin:6px 0 8px;color:var(--ink-display)}
.wk p{margin:0;font-size:14px;line-height:1.8;color:var(--ink-body)}
.wk b{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;
  color:var(--ink-display);border-bottom:1px solid var(--accent);padding-bottom:3px}
.wk:hover h3{color:var(--accent)}
.wk-b h3{font-size:clamp(19px,1.7vw,23px)}

/* 內容產出：細格密排＋外圍大留白 */
.mag-strip{margin:clamp(48px,5.6vw,84px) calc(50% - 50vw) 0;
  background:var(--surface-ink);color:var(--ink-on-dark);
  padding:clamp(34px,4vw,56px) 0 clamp(34px,4vw,54px)}
.mag-strip>.wrap{max-width:1320px}
.mag-strip .strip-head{border-top:2px solid var(--ink-on-dark);padding-top:clamp(12px,1.6vw,18px)}
.mag-strip .strip-head h3{color:var(--ink-on-dark)}
.mag-strip .strip-head span,.mag-strip .strip-foot{color:var(--ink-muted-on-dark)}
.mag-strip .strip-grid img{border-color:var(--rule-on-dark)}
.mag-strip .strip-grid figcaption{color:var(--ink-muted-on-dark)}
.mag-strip .mag-go{color:var(--ink-on-dark);border-bottom-color:var(--accent-on-dark)}
.mag-strip .mag-go:hover{color:var(--accent-on-dark)}
.strip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.strip-head h3{font-size:clamp(17px,1.6vw,21px);margin:0;color:var(--ink-display)}
.strip-head span{font-size:11.5px;color:var(--ink-muted);letter-spacing:.04em}
.strip-grid{margin-top:clamp(18px,2.2vw,28px);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.strip-grid figure{margin:0}
.strip-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;
  border:1px solid var(--rule);filter:saturate(.74) contrast(1.02);transition:filter .35s var(--ease)}
.strip-grid figure:hover img{filter:saturate(1) contrast(1)}
.strip-grid figcaption{margin-top:7px;font-size:10px;line-height:1.6;letter-spacing:.03em;color:var(--ink-muted)}
.strip-foot{margin-top:clamp(18px,2.2vw,26px);display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;font-size:12.5px;color:var(--ink-muted)}

.mag-latest{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:0}
/* 首篇做頭條：圖高啲、標題大啲、摘要俾多兩行 */
.mag-latest .latest-card:first-child .latest-card-media img{aspect-ratio:4/3}
.mag-latest .latest-card:first-child h3{font-size:clamp(20px,1.9vw,26px);line-height:1.28}
.mag-latest .latest-card:first-child p{-webkit-line-clamp:6;font-size:13.5px}
.mag-latest .latest-card:first-child .latest-card-meta{color:var(--accent)}
.mag-latest .latest-card{display:flex;flex-direction:column;background:transparent;border:0;
  border-right:1px solid var(--rule);border-radius:0;box-shadow:none;
  padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,26px) clamp(24px,2.6vw,34px);
  color:var(--ink-body);transition:background .35s var(--ease)}
.mag-latest .latest-card:last-child{border-right:0}
.mag-latest .latest-card:hover{background:var(--surface-2)}
.mag-latest .latest-card-media{height:auto;min-height:0;border:0;border-radius:0;overflow:hidden}
.mag-latest .latest-card-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border:1px solid var(--rule);filter:saturate(.88)}
.mag-latest .latest-card-copy{padding:0;display:flex;flex-direction:column;flex:1}
.mag-latest .latest-card-meta{margin-top:14px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-soft);background:none;padding:0;border:0}
.mag-latest .latest-card h3{font-family:var(--mag-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.34;margin:8px 0 8px;color:var(--ink-display)}
.mag-latest .latest-card p{margin:0;font-size:13px;line-height:1.8;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mag-latest .latest-card b{margin-top:auto;padding-top:18px;font-size:12px;font-weight:700;
  color:var(--ink-display)}
.mag-latest .latest-card:hover b{color:var(--accent)}

/* ========== 05 · 關於：雜誌人物頁 ========== */
#about{background:transparent}
#about .wrap{max-width:1320px}
.mag-profile{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);
  gap:clamp(24px,3.4vw,58px);margin-top:clamp(36px,4.4vw,64px);
  border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,40px)}
.mag-profile .col-b{margin-top:clamp(0px,1.6vw,26px)}
.mag-profile .mag-figure img{filter:saturate(.92)}
.mag-credits{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.mag-credits li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;line-height:1.7;
  padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-body)}
.mag-credits li i{font-style:normal;font-family:var(--mag-display);font-weight:700;
  font-size:12px;color:var(--accent-soft);min-width:2.2em}
.mag-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em}
.mag-links a{color:var(--ink-display);border-bottom:1px solid var(--accent);padding-bottom:3px}
.mag-links a:hover{color:var(--accent)}

/* ========== 06 · 吹銷：深綠反轉 ========== */
#show{background:transparent;padding:0}
.show-band{background:var(--surface-ink);color:var(--ink-on-dark);
  padding:clamp(56px,6.4vw,92px) 0 clamp(52px,6vw,84px)}
.show-band .wrap{max-width:1320px}
.mag-show{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);margin-top:clamp(34px,4.2vw,60px);
  border-top:1px solid var(--rule-on-dark);padding-top:clamp(24px,3vw,40px);align-items:start}
.mag-show .topics{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:20px;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted-on-dark)}
.mag-show .topics span{color:var(--ink-muted-on-dark);border:0;padding:0;font-size:12px}
.mag-show .topics span::before{content:"— ";color:var(--accent-on-dark)}
.show-band h2 .cy{color:var(--accent-on-dark)}
.mag-show .handle{margin-top:18px;font-family:var(--mag-display);font-weight:700;
  font-size:clamp(19px,2vw,26px);color:var(--ink-on-dark)}
.mag-show .listen-embed{margin-top:22px}
.mag-show .listen-embed iframe{width:100%;border:0;display:block}
.mag-show .col-b{margin-top:clamp(0px,1.4vw,22px)}
.mag-show .col-b img{width:100%;height:auto;display:block;border:1px solid var(--rule-on-dark);filter:saturate(.88)}
.mag-show .mag-cap{border-left-color:var(--accent-on-dark);color:var(--ink-muted-on-dark)}
.mag-show .mag-cap b{color:var(--ink-on-dark)}
.mag-show .mag-go{color:var(--ink-on-dark);border-bottom-color:var(--accent-on-dark);margin-top:16px;display:inline-block}
.mag-show .mag-go:hover{color:var(--accent-on-dark)}

/* ========== 07 · FAQ：雜誌問答欄 ========== */
#faq{background:transparent}
#faq .wrap{max-width:1320px}
.mag-qa{margin-top:clamp(34px,4.2vw,60px);border-top:2px solid var(--ink-display);counter-reset:qa}
.mag-qa details{border-bottom:1px solid var(--rule);padding:0;counter-increment:qa}
.mag-qa summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2vw,32px);
  align-items:baseline;padding:clamp(18px,2.2vw,26px) 0;cursor:pointer;list-style:none;
  font-size:clamp(16px,1.6vw,20px);line-height:1.4;color:var(--ink-display);font-weight:700}
.mag-qa summary::-webkit-details-marker{display:none}
.mag-qa summary::before{content:counter(qa,lower-roman);font-family:var(--mag-display);font-weight:700;
  font-size:clamp(15px,1.5vw,19px);color:var(--surface-3);min-width:2.4em;transition:color .35s var(--ease)}
.mag-qa details[open] summary::before,.mag-qa summary:hover::before{color:var(--accent)}
.mag-qa summary::after{content:"＋";font-size:16px;color:var(--accent-soft);font-weight:400}
.mag-qa details[open] summary::after{content:"－"}
.mag-qa details p{margin:0 0 clamp(20px,2.4vw,28px);padding-left:clamp(38px,4.4vw,74px);
  max-width:46em;font-size:14.5px;line-height:1.9;color:var(--ink-body)}

/* 目錄行 hover：成條底線由左掃到右，指住「呢行撳得」。觸控機冇 hover，唔畫。 */
.mag-row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.mag-row:hover::after{transform:scaleX(1)}
@media(hover:none){.mag-row::after{display:none}}

/* 頭條欄闊容得落 49 個中文字，過闊；CJK 舒服區 40 字以內。
   ⚠️ 現有三段各得 27–28 字，唔會 wrap，所以呢條而家係防守性約束，文案寫長咗先會生效。 */
.wk p{max-width:40em}

/* ===== 手機內文字級 =====
   桌面行雜誌密度（13–15px），但手機 13px 讀落太吃力。
   只喺 ≤760px 升返，桌面密度唔郁。 */
@media(max-width:760px){
  .mag-standfirst,.mag-drop,.mag-show p{font-size:16px}
  .mag-row p,.proc-step p,.mag-qa details p,.mag-specs li,.wk p{font-size:15.5px}
  .mag-latest .latest-card p,.mag-latest .latest-card:first-child p,.mag-credits li,.sh-sec li{font-size:15px}
  .mag-row .runs,.mag-margin{font-size:13.5px}
  .mag-cap,.mag-thumb figcaption,.strip-grid figcaption{font-size:12px}
}

@media(max-width:1000px){
  .strip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mag-latest{grid-template-columns:1fr;border-top:0}
  .mag-latest .latest-card{border-right:0;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr);gap:20px;align-items:start}
  .mag-latest .latest-card b{margin-top:14px}
}
@media(max-width:900px){
  .mag-feature,.mag-profile,.mag-show{grid-template-columns:1fr}
  .mag-works{grid-template-columns:1fr;row-gap:clamp(26px,4vw,40px)}
  .wk-lead,.wk-s1,.wk-s2,.wk-note{grid-column:1;margin-top:0}
  .mag-profile .col-b,.mag-show .col-b{margin-top:0}
  .mag-row,.mag-row--photo{grid-template-columns:auto minmax(0,1fr);gap:10px 16px}
  .mag-row>*{grid-column:2}
  .mag-row .no{grid-column:1;grid-row:1}
  .mag-go{justify-self:start;margin-top:10px}
  .mag-thumb{margin-top:12px;max-width:260px}
  .mag-dept{grid-template-columns:1fr}
  .mag-folio{font-size:clamp(64px,20vw,110px)}
  .proc-step,.proc-step--flip{grid-template-columns:44px minmax(0,1fr)}
  .proc-rail::before{left:22px}
  .proc-step .proc-dia,.proc-step .proc-body,
  .proc-step--flip .proc-dia,.proc-step--flip .proc-body{grid-column:2;grid-row:auto}
  .proc-dia{margin-top:18px;justify-self:start!important}
  .proc-dia svg{max-width:190px}
}
@media(max-width:620px){
  .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-latest .latest-card{grid-template-columns:1fr}
  .mag-qa summary{grid-template-columns:auto minmax(0,1fr);row-gap:0}
  .mag-qa summary::after{display:none}
  .mag-qa details p{padding-left:clamp(28px,8vw,44px)}
}