/* =====================================================================
   華新麗華永續發展基金會 · 首頁提案 v1 · base.css
   tokens／reset／共用元件（pill、btn、sec-head、eyebrow、link-arrow、ctrl）
   nav／preloader／Hero 舞台／RWD／reduced motion
   區塊專屬樣式請寫在 css/<section>.css，並以 #<section> 開頭限定範圍
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* 色彩（DESIGN_SPEC 第 1 節） */
  --bg-hero:#111C11;                    /* Hero 舞台影片底色（元件 token，僅限舞台）· v1.2 淘汰淺色 Hero 遺留的 #EFE3D4 */
  --paper:#F4EFE6;
  --paper-2:#EAE2D5;
  --white:#FBF9F5;
  --ink:#15251A;
  --ink-2:rgba(21,37,26,.66);
  --line:rgba(21,37,26,.14);
  --accent:#CFE6A6;
  --forest:#0F1F10;
  --accent-on-dark:#D4EBAF;
  --gold:#F1D08A;
  --on-dark:#F4EFE6;                    /* 暗底上的一般文字 */
  --on-dark-2:rgba(244,239,230,.66);    /* 暗底次要文字 */
  --line-on-dark:rgba(244,239,230,.18);
  /* 手冊 v1.2：分隔線淺底 .08／.14／.32、深底 .18／.40；深底文字 strong／default／body .78／.66／.50；亮綠 hover 一律變亮 */
  --line-subtle:rgba(21,37,26,.08);
  --line-strong:rgba(21,37,26,.32);
  --line-on-dark-strong:rgba(244,239,230,.4);
  --on-dark-strong:#fff;
  --on-dark-3:rgba(244,239,230,.5);     /* 暗底眉標、裝飾（4.65） */
  --accent-hover:#DDEEBD;
  --accent-on-dark-hover:#E2F1C8;
  --hover-layer:rgba(21,37,26,.05);
  --press-layer:rgba(21,37,26,.08);
  /* 領域五色（手冊 D8）＋50% 淺色；HTML inline style 一律引用這組 */
  --area-01:#A6E6C1;--area-01-tint:rgba(166,230,193,.5);
  --area-02:#E6B6A6;--area-02-tint:rgba(230,182,166,.5);
  --area-03:#E6CFA6;--area-03-tint:rgba(230,207,166,.5);
  --area-04:#CFE6A6;--area-04-tint:rgba(207,230,166,.5);
  --area-05:#B5A6E6;--area-05-tint:rgba(181,166,230,.5);

  /* 字體（手冊 v1.2，2026-09-14 業主指示「英文一律 Lexend Exa」）
     中文與中文為主的 UI：Noto Sans TC；英文、數字、日期、編號、麵包屑、版權列：Lexend Exa。Geist／Geist Mono 退場，--font／--mono 保留為別名 */
  --font-tc:"Noto Sans TC",system-ui,-apple-system,"PingFang TC",sans-serif;
  --font-en:"Lexend Exa","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --font:var(--font-tc);
  --mono:var(--font-en);

  /* 字級（手冊 04 章；桌機值，≤1100／≤640 在 RWD 段覆寫）
     Display 72／H2 48／H2-compact 32／H3 30／H4 24／H5 20／H6 17／Lead 21／Body-L 17／Body 16／Small 14／Caption 12／Overline 14／Meta 12・14／Stat 40・28
     行高：標題 1.3、卡片標題 1.4；字距一律 em（Display −.02、H2 −.03、H3 −.01、H4 −.02、數字 −.02，其餘 0） */
  --fs-h1:72px;       --lh-h1:1.3;     --ls-h1:-.02em;   /* Display */
  --fs-display:var(--fs-h1);
  --ls-display:var(--ls-h1);
  --fs-h2:48px;       --lh-h2:1.3;     --ls-h2:-.03em;
  --fs-h2-sm:32px;                       /* H2 compact：兩欄並排的欄標題 */
  --fs-h3:30px;       --lh-h3:1.3;     --ls-h3:-.01em;
  --fs-h4:24px;       --lh-h4:1.4;     --ls-h4:-.02em;
  --fs-h5:20px;       --lh-h5:1.4;
  --fs-h6:17px;       --lh-h6:1.4;
  --fs-lead:21px;     --lh-lead:1.6;
  --fs-body-l:17px;   --lh-body-l:1.72;
  --fs-body:16px;     --lh-body:1.8;
  --fs-small:14px;    --lh-small:1.45;
  --fs-caption:12px;  --lh-caption:1.5;
  --fs-overline:14px; --lh-overline:32px;
  --fs-meta:12px;     --fs-meta-l:14px; --lh-meta:1.6;
  --fs-stat-l:40px;   --fs-stat-m:28px; --ls-stat:-.02em;
  --fs-num:var(--fs-stat-m);
  --fs-idea:40px;     --lh-idea:1.32;   /* Hero 理念句（元件） */
  --fs-ui:16px;
  --fs-pill:14px;
  --fs-mono:var(--fs-meta);  --lh-mono:var(--lh-meta);
  --ls-tc:0;

  /* 間距：pill → 標題（alethia sec-head h2 mt 48；緊湊版給 Hero／卡片內） */
  --gap-pill-h:48px;
  --gap-pill-h-tight:24px;

  /* 文字墨色層級（淺底 / 暗底） */
  --ink-body:rgba(21,37,26,.8);        /* 內文 */
  --on-dark-body:rgba(244,239,230,.78);/* 暗底導言／內文 */

  /* 玻璃三階（backdrop-filter 值；對應 alethia blur 18／14／10） */
  --glass-lg:blur(18px);
  --glass-md:blur(14px) saturate(1.1);
  --glass-sm:blur(10px) saturate(1.1);
  /* 玻璃底色兩階（米白紙感；取代各區自寫的 .5~.9 alpha）＋ 1px 內亮邊 */
  --glass-paper-thin:rgba(251,249,245,.5);
  --glass-paper:rgba(251,249,245,.66);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.5);

  /* 版面 */
  --margin:40px;              /* 左右邊界 40／24／18（手冊 5.1），內容隨視窗延展 */
  --section:120px;            /* 區塊留白 standard 120／80／64 */
  --section-compact:80px;     /* 區塊留白 compact 80／64／56 */
  --split-gap:48px;           /* 分割樣板欄距 default／wide（手冊 5.3） */
  --split-gap-wide:96px;
  --container-reading:1360px; /* 閱讀型內文頁的內容上限（業主 2026-09-14 指示；首頁區塊不用） */
  --nav-h:68px;
  --radius-card:12px;   /* 2026-09-14 IRON：全站卡片圓角 12 */
  --radius-img:12px;

  /* Motion：非 scrub 的 UI 轉場只用這兩條曲線、三個時長
     ▸ --dur-1 .25s：顏色／底色／透明度（hover 換色）
     ▸ --dur-2 .45s：位移／底線劃出／caret／drawer／nav 底板
     ▸ --dur-3 .95s：大面積換場（布幕、圖卡交叉淡化）
     ▸ 按壓 :active 一律 .08s；hover 位移量一律 --nudge */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-curtain:cubic-bezier(.76,0,.24,1);   /* preloader 揭幕 */
  --dur-1:.25s;
  --dur-2:.45s;
  --dur-3:.95s;
  --nudge:3px;
  --focus-ring:2px solid var(--ink);
  --focus-ring-on-dark:2px solid var(--on-dark);
  --dur-reveal:1s;
  --stagger-reveal:80ms;
  --stage-px:1800px;                    /* app.js 會以 CONFIG.stagePx 覆寫 */
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
html.is-locked,html.is-locked body{overflow:hidden!important;height:100vh}
/* ?static&y／?jump：body 當捲動容器（headless 截圖用，見 app.js bodyScroll） */
html.is-bodyscroll{height:100%;overflow:hidden}
html.is-bodyscroll body{height:100%;overflow-x:hidden;overflow-y:auto}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:500;letter-spacing:var(--ls-tc)}
:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.on-dark :focus-visible,.nav--on-dark :focus-visible{outline:var(--focus-ring-on-dark)}
::selection{background:var(--accent);color:var(--ink)}
[data-rb-pre]{visibility:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--mono)}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nobr{white-space:nowrap}
.phr{display:inline-block}
/* 字距規則（R3）：mono 大寫英文（pill、link-arrow）.02em；btn、t-mono、eyebrow 0；
   中文與數字一律 0（var(--ls-tc)）；display 級（h1／h2）與大數字 -.02em
   mono 標籤只有三種：.pill（14/500 底色）、.t-mono（12/400 日期編號分類）、.eyebrow（12/400 區段小標）
   alethia .tag／.date：mono 12、400、無字距 */

/* 數字＋單位（alethia .step3-card .n 28/600、small mono op .7 ml 6）
   <span class="num">16,489<small class="num__unit">人次</small></span>；字級由使用端給（var(--fs-num)） */
.num{font-family:var(--font-en);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.num__unit{font-family:var(--font-tc);font-size:12px;font-weight:500;letter-spacing:0;margin-left:6px;color:currentColor}
/* 計數器「01 / 05」：<span class="count"><b class="count__cur">01</b>/<span>05</span></span> */
.count{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:var(--fs-mono);line-height:var(--lh-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.count b,.count__cur{color:var(--ink);font-weight:500}
.on-dark .count{color:var(--on-dark-2)}
.on-dark .count b,.on-dark .count__cur{color:var(--on-dark)}
.t-mono{font-family:var(--mono);font-size:var(--fs-mono);line-height:var(--lh-mono);font-weight:400;letter-spacing:0;text-transform:uppercase;color:var(--ink-2)}
.on-dark .t-mono,.t-mono--on-dark{color:var(--on-dark-2)}

/* ---------- 3. 共用元件 ----------
   icon 線寬規則（全站 inline SVG，stroke 風格）
   ▸ 實際線寬一律 1.5px：下方 icon 段以 vector-effect:non-scaling-stroke 固定，
     不論 viewBox 16／24／12、顯示 12／14／20px，畫出來都是 1.5px（alethia 各 icon 同一字體筆畫）
   ▸ 箭頭（→ ← ↓ ↗）：viewBox 0 0 16 16；加減號與其他線條 icon：viewBox 0 0 24 24
   ▸ 控制鈕 .ctrl、前往鈕 .go 皆 40px（手冊 10.5），內部 svg 一律 14px
   ▸ 新增 icon 若不在下方選擇器內，請加上 class 或併入清單 */

/* pill：mono、accent 底、直角。格式「中文<i class="pill__sep">·</i>ENGLISH」 */
.pill{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-pill);font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;
  background:var(--accent);color:var(--ink);padding:5px 8px;white-space:nowrap;
}
.pill__sep{font-style:normal;margin:0 .32em;opacity:.55}
.pill--on-dark{background:var(--accent-on-dark);color:var(--forest)}
.pill--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}

/* eyebrow：小型 mono 標籤（無底色） */
.eyebrow{font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:0;text-transform:uppercase;line-height:var(--lh-mono);color:var(--ink-2)}
.on-dark .eyebrow,.eyebrow--on-dark{color:var(--on-dark-2)}

/* btn：外框按鈕（手冊 10.4）Noto Sans TC 15/700、1px 框、12 圓角、右側 24px accent 實心圓＋SVG 箭頭（padding 16/18、gap 14、高 50）
   .btn--dark = 淺底用（深字深框）；.btn--on-dark = 暗底用（淺字淺框、accent-on-dark 方塊）
   .btn--primary = 膠囊主按鈕（手冊 10.4）：accent 底、全圓、500、箭頭無底；暗底上自動換 accent-on-dark／forest
   .btn--plain = 只有文字、靠左、不顯示 icon（alethia FULL STORY 列按鈕）
   狀態：hover 換底＋箭頭右移 --nudge；:active 下沉 1px（.08s）；focus-visible 走全域 --focus-ring */
.btn{
  --btn-fg:var(--ink);--btn-bd:rgba(21,37,26,.32);--btn-ico-bg:var(--accent);--btn-ico-fg:var(--ink);--btn-hover-bg:rgba(21,37,26,.05);
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-tc);font-size:15px;font-weight:700;letter-spacing:0;line-height:18px;
  color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:12px;padding:16px 18px;white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
  pointer-events:auto;
}
.btn .btn__ico{
  display:inline-grid;place-items:center;flex:0 0 24px;width:24px;height:24px;
  border-radius:50%;background:var(--btn-ico-bg);color:var(--btn-ico-fg);overflow:hidden;
}
.btn .btn__ico svg{width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--btn-hover-bg);border-color:var(--btn-fg)}}
@media (hover:hover) and (pointer:fine){.btn:hover .btn__ico svg{transform:translateX(var(--nudge))}}
.btn:active{transform:translateY(1px);background:var(--btn-hover-bg);border-color:var(--btn-fg);transition-duration:.08s}
.btn--dark{--btn-fg:var(--ink);--btn-bd:rgba(21,37,26,.32)}
.btn--on-dark{--btn-fg:var(--on-dark);--btn-bd:var(--wl-border-on-dark-medium,rgba(244,239,230,.32));--btn-ico-bg:var(--accent-on-dark);--btn-ico-fg:var(--forest);--btn-hover-bg:rgba(244,239,230,.08)}
.btn--solid{--btn-hover-bg:#fff;background:var(--white);border-color:transparent}
/* 實心主按鈕：邊框透明，padding 各 +1px 補回邊框寬，外框尺寸與外框版一致 */
.btn--primary{
  --btn-fg:var(--ink);--btn-ico-bg:transparent;--btn-ico-fg:var(--ink);--btn-hover-bg:var(--accent-hover);
  background:var(--accent);border:0;border-radius:100px;padding:17px 19px;font-weight:500;
}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{background:var(--btn-hover-bg)}}
.on-dark .btn--primary,.btn--primary.btn--on-dark{
  --btn-fg:var(--forest);--btn-ico-bg:transparent;--btn-ico-fg:var(--forest);--btn-hover-bg:var(--accent-on-dark-hover);
  background:var(--accent-on-dark);
}
.btn--plain{justify-content:flex-start}
.btn--plain .btn__ico{display:none}

/* link-arrow：文字連結＋箭頭，hover／focus-visible 底線由左劃出 */
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.2;
  color:currentColor;padding-bottom:4px;
}
.link-arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform var(--dur-2) var(--ease-out)}
.link-arrow:focus-visible::after{transform:scaleX(1);transform-origin:left center}
@media (hover:hover) and (pointer:fine){.link-arrow:hover::after{transform:scaleX(1);transform-origin:left center}}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur-2) var(--ease-out)}
.link-arrow:focus-visible svg{transform:translateX(var(--nudge))}
@media (hover:hover) and (pointer:fine){.link-arrow:hover svg{transform:translateX(var(--nudge))}}
.link-arrow:active svg{transform:translateX(var(--nudge)) scale(.94);transition-duration:.08s}
.link-arrow--tc{font-family:var(--font-tc);text-transform:none;letter-spacing:0;font-size:var(--fs-ui)}

/* ctrl：圓形 ← → 控制鈕（共好行動、永續映像）· 手冊 10.5 圖示鈕 40、1px 實心框、14px
   視覺 40px，::before 往外擴 2px 讓點擊區達 44px */
.ctrls{display:flex;gap:8px}
.ctrl{
  position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);color:var(--ink);
  display:grid;place-items:center;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.ctrl::before{content:"";position:absolute;inset:-2px;border-radius:50%}
.ctrl svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){.ctrl:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}}
.ctrl:disabled,.ctrl[aria-disabled="true"]{opacity:.2;pointer-events:none}
.on-dark .ctrl,.ctrl--on-dark{border-color:var(--on-dark);color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){.on-dark .ctrl:hover,.ctrl--on-dark:hover{background:var(--accent-on-dark);color:var(--forest);border-color:var(--accent-on-dark)}}

/* go：40px accent 正圓箭頭鈕（手冊 10.5）（alethia 大圖卡右上角）。放在 <a> 內，hover／focus-visible 父層或自身時箭頭右移 */
.go{
  display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.go svg{width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
a:focus-visible .go svg{transform:translateX(var(--nudge))}
@media (hover:hover) and (pointer:fine){a:hover .go svg,.go:hover svg{transform:translateX(var(--nudge))}}
/* hover 實心：底變亮（手冊 D4／10.5） */
@media (hover:hover) and (pointer:fine){
  a:hover .go:not(.go--ink):not(.go--on-dark),.go:not(.go--ink):not(.go--on-dark):hover{background:var(--accent-hover)}
  a:hover .go--on-dark,.go--on-dark:hover{background:var(--accent-on-dark-hover)}
}
.go--ink{background:var(--ink);color:var(--white)}
.go--on-dark{background:var(--accent-on-dark);color:var(--forest)}
/* 按壓（alethia 無 :active；這裡補最小回饋，reduced motion 由全域 .001ms 吃掉） */
/* 收尾 L3：只縮短時長，不用 transition 簡寫覆蓋（按住時底色／邊框仍走原本的過渡） */
.ctrl:active,.go:active,a:active > .go{transform:scale(.94);transition-duration:.08s}

/* icon 實際線寬統一 1.5px（CMP-05）。hero-hint、preloader、社群實心 icon 不在清單內 */
:is(.btn__ico,.go,.ctrl,.nav__cta-ico,.link-arrow,.nav__sub,.nav-drawer summary,.vid-play,.ft-social__btn,.ft-bottom__top,.vlb__ext,.vlb__close) svg,
.nav__caret,.cares__plus{overflow:visible}
:is(.btn__ico,.go,.ctrl,.nav__cta-ico,.link-arrow,.nav__sub,.nav-drawer summary,.vid-play,.ft-social__btn,.ft-bottom__top,.vlb__ext,.vlb__close) svg :is(path,line,polyline,circle,rect),
.nav__caret :is(path,line,polyline),.cares__plus :is(path,line,polyline){vector-effect:non-scaling-stroke;stroke-width:1.5px}

/* ---------- 4. Section 共用 ---------- */
.sec{position:relative;z-index:5;padding:var(--section) var(--margin);background:var(--paper);color:var(--ink)}
.sec--white{background:var(--white)}
.sec--paper{background:var(--paper)}
.sec--paper-2{background:var(--paper-2)}
.sec--forest,.on-dark{background:var(--forest);color:var(--on-dark)}

/* sec-head：左 pill＋h2，右側可放 .sec-head__aside（控制鈕、查看全部） */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sec-head__main{max-width:980px}
.sec-head h2,.h2{
  font-family:var(--font);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:500;letter-spacing:var(--ls-h2);
  margin-top:var(--gap-pill-h);text-wrap:balance;
}
.sec-head p,.sec-head__lead{margin-top:28px;max-width:30em;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-body)}
.on-dark .sec-head p,.sec--forest .sec-head p{color:var(--on-dark-body)}
/* 標題區到內容的大留白（alethia cards2 mt 120）：外距收、內距放 */
.sec-head + *{margin-top:112px}
.sec-head__aside{display:flex;align-items:center;gap:20px}

/* more-link：區塊「查看更多／了解更多」前往完整列表（09-15；與 #news .news-more 同規格：15／18／700、24px 亮綠圓箭頭、padding 16 12 16 18、hover 淺底＋箭頭右移） */
.more-link{display:inline-flex;align-items:center;gap:14px;padding:16px 12px 16px 18px;border-radius:12px;background:transparent;font-family:var(--font-tc);font-size:15px;line-height:18px;font-weight:700;color:var(--ink);white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out)}
.more-link__ico{display:grid;place-items:center;width:24px;height:24px;margin-block:-3px;border-radius:50%;background:var(--accent);color:var(--ink)}
.more-link__ico svg{display:block;width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
.more-link:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.more-link-wrap{display:flex;justify-content:flex-end}
@media (hover:hover) and (pointer:fine){.more-link:hover{background:var(--hover-layer)}.more-link:hover .more-link__ico svg{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.more-link,.more-link__ico svg{transition:none}.more-link:hover .more-link__ico svg{transform:none}}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center .sec-head__main{margin:0 auto}

/* 骨架佔位（區塊 agent 注入後就不會出現） */
.sec-placeholder{
  min-height:70vh;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink-2);
  border:1px dashed var(--line);border-radius:var(--radius-card);
}
#actions{background:var(--white)}
#footer{background:var(--forest);color:var(--on-dark)}   /* 2026-09-14 R2：#about 改暖白底＋深字，移出此列，實際色值交給 about.css 掌管 */
#footer .sec-placeholder{color:var(--on-dark-2);border-color:var(--line-on-dark)}
#footer{z-index:8}

/* ---------- 5. Preloader ---------- */
/* 米白布幕：載完後以 clip-path 由下往上收起（.95s），同時 Hero 去模糊開始，兩段重疊成一個換場。
   內容同步上移 24px 淡出，布幕邊緣不會切過文字 */
.preloader{
  position:fixed;inset:0;z-index:100;background:var(--bg-hero);color:var(--ink);
  display:grid;place-items:center;align-content:center;gap:18px;
  clip-path:inset(0 0 0 0);
  transition:clip-path .95s var(--ease-curtain),visibility 0s linear .95s;
}
.preloader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none}
.preloader > *{transition:opacity .35s var(--ease-out),transform .95s var(--ease-curtain)}
.preloader.is-done > *{opacity:0;transform:translateY(-24px)}
.preloader.is-done .preloader__pct{transform:translate(-50%,-24px)}
.preloader__mark{color:var(--ink);animation:plPulse 1.2s var(--ease-io) infinite}
.preloader__logo{display:block;width:96px;height:40px}   /* 2026-09-14 小草 icon → WALSIN 字標（單色 currentColor） */
.preloader__label{font-family:var(--font-tc);font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--ink-2)}
.preloader__bar{width:160px;height:1px;background:var(--line);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease-out)}
.preloader__pct{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:var(--ink-2)}
@keyframes plPulse{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-4px);opacity:.55}}
html.is-static .preloader{display:none}

/* ---------- 6. Nav（2026-09-13 IRON Figma 改版，全站套用；規格 _spec/hero_redesign.md「共用元素 › Nav」）
   ▸ 品牌組：logo → 1px 分隔線 → 中英兩行字標；主選單置中；右側 #CFE6A6 膠囊 CTA
   ▸ 桌機舞台頂端（非 solid／over-media）：內容往下 36px，垂直中心落在 Figma 的 y 52（top 30＋高 44）；蓋上後收回 --nav-h 內置中
   ▸ 暗底（舞台）白字白 logo；米白 solid 狀態深字 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;gap:20px;padding:0 var(--nav-x,40px);
  color:var(--ink);
  transition:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),padding-top var(--dur-2) var(--ease-out);
}
/* 底板：無底線（alethia nav 無底無線、大圖卡穿過無色帶）。
   收尾 M1：模糊與漸散拆兩層，blur 不再跟著漸散帶外溢到 nav 下方
   ▸ ::before 只做玻璃 blur：高度固定 nav-h、mask 在 nav 下緣歸 0，下方內容永遠清晰
   ▸ ::after 只做色彩：nav-h 內近實色，往下 --nav-tail 漸散到 0，無 blur */
/* 2026-09-13 IRON：header 邊界不要模糊效果 → 底板下緣改成俐落硬邊：不做 mask 羽化、不往下漸散（--nav-tail 0） */
.nav{--nav-tail:0px;--nav-tint-0:rgba(244,239,230,.88);--nav-tint-1:rgba(244,239,230,.8);--nav-blur:blur(14px) saturate(1.1)}
.nav::before,.nav::after{
  content:"";position:absolute;inset:0 0 auto 0;z-index:-1;opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out);
}
.nav::before{
  height:var(--nav-h);
  -webkit-backdrop-filter:var(--nav-blur);backdrop-filter:var(--nav-blur);
}
.nav::after{
  height:var(--nav-h);
  background:linear-gradient(180deg,var(--nav-tint-0) 0,var(--nav-tint-1) 100%);
}
.nav--solid::before,.nav--solid::after{opacity:1}
/* 2026-09-14 IRON：header 在白底區塊時底色改白 → solid 底板為 --white 實色（硬邊）；暗底段由後方 .nav--on-dark 覆寫，over-media 與 solid 互斥不受影響 */
.nav--solid{--nav-tint-0:var(--white);--nav-tint-1:var(--white)}
/* 釘住的滿版影像段（關注領域）：底板同樣硬邊，不往下漸散 */
.nav--over-media{--nav-tail:0px;--nav-tint-0:rgba(244,239,230,.7);--nav-tint-1:rgba(244,239,230,.38);--nav-blur:blur(10px)}
.nav--over-media::before,.nav--over-media::after{opacity:1}
@media (min-width:1101px){
  .nav:not(.nav--solid):not(.nav--over-media){padding-top:36px}
}
/* 品牌組（Figma：logo 129 → gap 12 → 分隔線 1×26 → gap 10 → 兩行字標 gap 2） */
.nav__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-right:auto;pointer-events:auto}
.nav__logo{position:relative;top:-4px;height:30px;width:auto}   /* L5：Figma logo 框 38 高、圖靠上 → 圖形上緣 y33（原置中落在 y37） */
.nav__logo--white{display:none;filter:brightness(0) invert(1)}
.nav__divider{flex:0 0 1px;width:1px;height:26px;background:var(--line-strong);margin-right:-2px}
.nav__name{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.nav__name-tc{font-family:var(--font-tc);font-size:14px;line-height:20px;font-weight:500;letter-spacing:0}   /* 手冊：≤14px 字距 0 */
/* 第 2 行 Figma 5.6px：Chrome 中文環境最小字級限制 → 11.2px＋scale(.5)，外框高度收回 6px */
.nav__name-en{display:block;height:6px;font-family:var(--font-en);font-size:11.2px;line-height:12px;font-weight:500;letter-spacing:0;transform:scale(.5);transform-origin:0 0;white-space:nowrap}
/* 主選單置中（Figma left 50%／gap 10／項目 padding 8×10、14/16.8） */
.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:top var(--dur-2) var(--ease-out)}
@media (min-width:1101px){
  .nav:not(.nav--solid):not(.nav--over-media) .nav__menu{top:calc(50% + 18px)}
}
.nav__menu ul{display:flex;align-items:center;gap:10px}
.nav__menu li{position:relative}
.nav__menu li > a{
  display:flex;align-items:center;gap:5px;padding:8px 10px;
  font-family:var(--font-tc);font-size:14px;font-weight:500;line-height:16.8px;letter-spacing:var(--ls-tc);white-space:nowrap;
  position:relative;
}
.nav__menu li > a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease-out)}
.nav__menu li > a:focus-visible::after,.nav__menu li.has-sub:focus-within > a::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover) and (pointer:fine){.nav__menu li > a:hover::after,.nav__menu li.has-sub:hover > a::after{transform:scaleX(1);transform-origin:left}}
.nav__caret{transition:transform var(--dur-2) var(--ease-out)}
.has-sub:focus-within .nav__caret{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.has-sub:hover .nav__caret{transform:rotate(180deg)}}
/* 次選單：手風琴列語彙，米白玻璃圓角面板（radius 12，與 .wl-dropdown 面板同一套規格，見手冊 10.24）
   hover-intent：離開後 .18s 才開始收；開啟不延遲。overflow hidden 會裁掉外推的 focus 外框 → 列 focus 外框內縮 -2px */
.nav__sub{
  position:absolute;top:calc(100% + 8px);left:-4px;min-width:236px;padding:12px 6px 6px;overflow:hidden;
  background:rgba(251,249,245,.92);-webkit-backdrop-filter:var(--glass-md);backdrop-filter:var(--glass-md);
  color:var(--ink);border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -24px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-1) var(--ease-out) .18s,transform var(--dur-2) var(--ease-out) .18s,visibility 0s linear calc(.18s + var(--dur-2));
}
.nav__menu li.has-sub::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.has-sub:hover .nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
.nav__sub-label{font-family:var(--mono);font-size:12px;line-height:var(--lh-mono);letter-spacing:0;color:var(--ink-2);padding:0 10px 8px}
.nav__sub a{display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:8px;font-family:var(--font-tc);font-size:15px;font-weight:500;line-height:1.3;transition:background-color var(--dur-1) var(--ease-out)}
.nav__sub a .mono{font-size:12px;color:var(--ink-2);min-width:26px}
@media (hover:hover) and (pointer:fine){.nav__sub a:hover{background:rgba(21,37,26,.05)}}
.nav__sub a:focus-visible{outline:var(--focus-ring);outline-offset:-2px;background:rgba(21,37,26,.05)}
.nav__sub a:active{background:rgba(21,37,26,.09);transition-duration:.08s}
.nav__sub-sep{height:1px;background:var(--line);margin:6px 10px}
.nav__sub-plan svg{margin-left:auto;color:var(--ink-2)}
/* CTA 膠囊（Figma：radius 100、#CFE6A6、padding 12 16 12 24、gap 4、字 #15251A 14/16.8、右側 20px 框內 12px 箭頭）；暗底亮底同色 */
.nav__cta{
  flex:0 0 auto;position:relative;display:inline-flex;align-items:center;gap:4px;padding:12px 16px 12px 24px;
  border-radius:100px;background:var(--accent);color:var(--ink);
  font-family:var(--font-tc);font-size:14px;font-weight:500;line-height:16.8px;white-space:nowrap;pointer-events:auto;
  transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.nav__cta-ico{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:currentColor}
.nav__cta-ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav__cta:hover{background:var(--accent-hover)}.nav__cta:hover .nav__cta-ico svg{transform:translateX(var(--nudge))}}
.nav__cta:focus-visible .nav__cta-ico svg{transform:translateX(var(--nudge))}
.nav__cta:active{transform:scale(.97);transition-duration:.08s}
.nav__burger{display:none;width:44px;height:44px;place-items:center;margin-right:-10px;pointer-events:auto}
.nav__burger path{transition:transform var(--dur-2) var(--ease-out);transform-origin:12px 12px}
.nav-open .nav__burger .l1{transform:rotate(45deg) translateY(4px)}   /* 09-15：先轉再移，✕ 交點落在正中（原寫法右偏 1.66px） */
.nav-open .nav__burger .l2{transform:rotate(-45deg) translateY(-4px)}

/* 暗底反白 */
.nav--on-dark{color:#fff;--nav-tint-0:rgba(15,31,16,.8);--nav-tint-1:rgba(15,31,16,.7);--nav-blur:blur(18px) saturate(1.15)}
.nav--on-dark .nav__logo--ink{display:none}
.nav--on-dark .nav__logo--white{display:block}
.nav--on-dark .nav__divider{background:var(--line-on-dark-strong)}
.nav--on-dark::before,.nav--on-dark::after{opacity:1}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav::after{height:var(--nav-h);background:rgba(244,239,230,.97)}
  .nav--on-dark::after{background:rgba(15,31,16,.97)}
  .nav__sub{background:var(--white)}
}

/* 手機全螢幕選單 */
.nav-drawer{
  position:fixed;inset:0;z-index:89;background:var(--paper);color:var(--ink);
  padding:calc(var(--nav-h) + 24px) var(--margin) 40px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);
}
.nav-open .nav-drawer{opacity:1;visibility:visible;transition-delay:0s}
.nav-open .nav{color:var(--ink)}
.nav-open .nav .nav__logo--ink{display:block}
.nav-open .nav .nav__logo--white{display:none}
.nav-open .nav .nav__divider{background:var(--line-strong)}
.nav-open .nav::before,.nav-open .nav::after{opacity:1}
.nav-open .nav::before{-webkit-mask-image:none;mask-image:none}
.nav-open .nav::after{height:var(--nav-h);background:rgba(244,239,230,.96);box-shadow:0 1px 0 var(--line)}
.nav-drawer__inner{display:flex;flex-direction:column}
.nav-drawer__inner > a:not(.btn),.nav-drawer summary{
  display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-tc);font-size:26px;font-weight:500;line-height:1.2;list-style:none;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out);
}
.nav-drawer__inner > a:not(.btn):focus-visible,.nav-drawer summary:focus-visible,.nav-drawer__sub a:focus-visible{outline-offset:-2px}
.nav-drawer__inner > a:not(.btn):active,.nav-drawer summary:active{background:rgba(21,37,26,.05);transition-duration:.08s}
.nav-drawer summary::-webkit-details-marker{display:none}
.nav-drawer summary svg{margin-left:auto}
.nav-drawer__plus-v{transform-origin:12px 12px;transition:transform var(--dur-2) var(--ease-out)}
.nav-drawer details[open] .nav-drawer__plus-v{transform:scaleY(0)}
.nav-drawer .mono{font-size:12px;color:var(--ink-2);min-width:26px}
.nav-drawer__sub{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:14px 0 18px 42px;border-bottom:1px solid var(--line)}
.nav-drawer__sub a{font-family:var(--font-tc);font-size:17px;padding:6px 0;color:var(--ink-2)}
/* 抽屜 CTA：跟桌機 nav CTA 同一個膠囊語彙（accent 底、ink 字、radius 100），撐滿寬 */
.nav-drawer__inner > .btn{align-self:stretch;justify-content:space-between;margin-top:32px;border-bottom:0;border-radius:100px;padding:17px 18px 17px 26px;font-family:var(--font-tc);text-transform:none}
.nav-drawer__inner > .btn .btn__ico{border-radius:50%}

/* ---------- 7. Hero 舞台（2026-09-13 IRON Figma 改版：hero → hero-2 兩幕；規格與實作結果見 _spec/hero_redesign.md）
   ▸ 捲動空間＝stagePx＋100vh−--teaser-h；所有圖層 fixed，由 app.js timeline（島嶼／主標組／理念句）驅動；五大領域卡片 2026-09-14 移除
   ▸ 桌機座標＝Figma 1440×900 px × --u（min(100vw/1440, 100vh/900)）；左右邊距與 nav 對齊固定 40px
   ▸ 顏色走 --hs-*：預設（?hero=light）深字米白玻璃；html[data-hero="dark"] 覆寫成白字、Figma 玻璃 rgba(251,249,245,.2) ---------- */
:root{--teaser-h:125px}
.stage{
  position:relative;z-index:3;height:calc(var(--stage-px) + var(--vh-px,100vh) - var(--teaser-h));background:var(--bg-hero);
  --u:min(calc(100vw / 1440),calc(100vh / 900));
  --hs-fg:var(--ink);--hs-line:rgba(21,37,26,.32);--hs-hover:rgba(21,37,26,.05);
  --hs-card-bg:rgba(251,249,245,.46);--hs-card-bg-hover:rgba(251,249,245,.62);--hs-card-fg:var(--ink);--hs-card-no:rgba(21,37,26,.66);
  --hs-card-edge:inset 0 0 0 1px rgba(255,255,255,.5);
  color:var(--hs-fg);
}
.layer{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;pointer-events:none}
.layer--media{z-index:1;overflow:hidden}
.layer--copy,.layer--idea,.layer--tagline{z-index:4}
/* 共好行動預告帶：白底、露出 --teaser-h；#actions 捲到同一位置時由真正的標題接手（見 actions.css） */
.layer--teaser{z-index:6;top:calc(var(--vh-px,100vh) - var(--teaser-h));bottom:auto;height:var(--teaser-h);overflow:hidden;background:var(--white);color:var(--ink)}
.teaser{position:absolute;left:var(--margin);top:39px}
#heroTeaser .bt-title{align-items:flex-start}   /* 與 #actions 新標題（靠左）同位置接手 */

/* 逐格序列：外層常駐羽化遮罩 */
.hero-media,.hero-intro,.hero-float{position:absolute;inset:0;transform-origin:50% 50%}
.hero-media{
  -webkit-mask-image:radial-gradient(ellipse 40% 60% at 50% 46%,#000 38%,rgba(0,0,0,.4) 70%,transparent 94%),linear-gradient(to bottom,transparent 0,#000 6%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 40% 60% at 50% 46%,#000 38%,rgba(0,0,0,.4) 70%,transparent 94%),linear-gradient(to bottom,transparent 0,#000 6%,#000 86%,transparent 100%);
  mask-composite:intersect;
  will-change:transform;
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;filter:brightness(var(--seq-tone,1))}
.hero-particles{position:absolute;inset:0}

/* 狀態 1 主標組（Figma left 40、top 213、直向 gap 31） */
.hero-title{position:absolute;left:40px;top:calc(213 * var(--u));display:flex;flex-direction:column;align-items:flex-start;gap:calc(31 * var(--u))}
.hero-eyebrow{display:flex;align-items:center;white-space:nowrap;color:var(--hs-fg)}
.hero-eyebrow__tc{font-family:var(--font-tc);font-size:14px;line-height:14px;font-weight:500;letter-spacing:.02em}
.hero-eyebrow__en{font-family:var(--font-en);font-size:14px;line-height:32px;font-weight:500}   /* IRON：SINCE 2025 字級 14 */
/* L4：「・」在 Lexend Exa 缺字、後備字形太細小 → 字元保留佔位（透明），改畫視覺直徑 5px 的實心圓點 */
.hero-eyebrow__dot{position:relative;color:transparent}
.hero-eyebrow__dot::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--hs-fg)}
.hero-title h1{font-family:var(--font-tc);font-size:max(44px,calc(64 * var(--u)));line-height:var(--lh-h1);font-weight:500;letter-spacing:var(--ls-h1);color:var(--hs-fg);white-space:nowrap}
.hero-title h1 .phr{display:inline}
/* CTA「認識基金會」：1px 框、padding 16×18、gap 14、Bold 15/18、24px #CFE6A6 方塊＋14px 箭頭 */
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--hs-line);border-radius:12px;
  font-family:var(--font-tc);font-size:15px;line-height:18px;font-weight:700;color:var(--hs-fg);white-space:nowrap;pointer-events:auto;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.hero-cta__ico{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--ink);overflow:hidden}   /* Figma 10759:13124：24px #CFE6A6 實心圓＋深色箭頭 */
.hero-cta__ico svg{width:14px;height:14px;overflow:visible;transition:transform var(--dur-2) var(--ease-out)}
.hero-cta__ico svg path{vector-effect:non-scaling-stroke;stroke-width:1.5px}
@media (hover:hover) and (pointer:fine){.hero-cta:hover{background:var(--hs-hover);border-color:var(--hs-fg)}.hero-cta:hover .hero-cta__ico svg{transform:translateX(var(--nudge))}}
.hero-cta:focus-visible .hero-cta__ico svg{transform:translateX(var(--nudge))}
.hero-cta:active{transform:translateY(1px);transition-duration:.08s}
html.js:not(.is-static) .hero-in{opacity:0}

/* 狀態 2 理念句（Figma left 40、top 128、寬 634、40px／52.8px） */
.idea__text{position:absolute;left:40px;top:calc(375 * var(--u) + 48px - 1.32 * max(30px, calc(40 * var(--u))));   /* 2026-09-14 IRON：理念句上下置中，與右側英文長句同水平（第 2 幕長句 top 375u、三行高 96px → 中線 375u＋48；理念句兩行高 2×1.32×字級） */width:max-content;max-width:calc(100vw - 80px);margin:0;font-family:var(--font-tc);font-size:max(30px,calc(40 * var(--u)));line-height:1.32;font-weight:500;letter-spacing:0;color:var(--hs-fg);opacity:0}
.idea__text .phr{display:block}

/* 英文長句（兩幕常駐；Figma 右緣 x 1399、top 423、Lexend Exa 14/32、右對齊） */
.hero-tagline{position:absolute;right:41px;top:calc((423 + var(--tag-shift, 0)) * var(--u));   /* --tag-shift：進入圓環時 0→−48（app.js 舞台時間軸） */margin:0;text-align:right;font-family:var(--font-en);font-size:14px;line-height:32px;font-weight:500;color:var(--hs-fg);white-space:nowrap}
.hero-tagline span{display:block}


/* 共好行動標題（預告帶與 #actions 共用；手冊：Overline 14/32 secondary ＋ H2 48／44／40、−.03em） */
.bt-title{display:inline-flex;flex-direction:column;align-items:center;margin:0;color:var(--ink);font-weight:500}
.bt-title__en{font-family:var(--font-en);font-size:14px;line-height:32px;font-weight:500;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.bt-title__tc{font-family:var(--font-tc);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:500;letter-spacing:var(--ls-h2);white-space:nowrap}

/* ---------- 7b. 深色 Hero（v16，html[data-hero="dark"]；?hero=light 時整段不生效）----------
   範圍只到 #stage 內所有圖層＋preloader＋舞台期間的 nav；#actions 之後的區塊維持米白暖調 */
html[data-hero="dark"]{
  --bg-hero:#111C11;                               /* v16 影片背景實測 ≈ rgb(18,28,17) */
  --hero-fg:var(--on-dark);
  --hero-fg-2:rgba(244,239,230,.66);
  background:var(--bg-hero);
}
/* 舞台色組：Figma 白字、玻璃底 rgba(251,249,245,.2)、無內亮邊 */
html[data-hero="dark"] .stage{
  --hs-fg:#fff;--hs-line:rgba(255,255,255,.32);--hs-hover:rgba(255,255,255,.08);
  --hs-card-bg:rgba(251,249,245,.2);--hs-card-bg-hover:rgba(251,249,245,.28);--hs-card-fg:#fff;--hs-card-no:rgba(255,255,255,.66);
  --hs-card-edge:none;
}
/* 逐格序列遮罩：左右／上下兩道 linear（直線、寬、不成環）；下緣 78%：v16 接地陰影落在透明區 */
html[data-hero="dark"] .hero-media{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 78%,transparent 100%);
}
@media (max-width:640px){
  html[data-hero="dark"] .hero-media{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 74%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 74%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 78%,transparent 100%);
  }
}
/* 靜態 grain（color-interpolation-filters='sRGB'，見 _spec/hero_dark_v16.md 第 8 節） */
html[data-hero="dark"] .layer--media{background:var(--bg-hero)}
html[data-hero="dark"] .layer--media::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
html[data-hero="dark"] #heroParticles canvas{opacity:var(--pt-op,1)}
html[data-hero="dark"] .preloader{color:var(--hero-fg)}
html[data-hero="dark"] .preloader__mark{color:#fff}   /* 白色 logo，與布幕收起後 nav 的白色 logo（filter 反白）同色 */
html[data-hero="dark"] .preloader__label,
html[data-hero="dark"] .preloader__pct{color:var(--hero-fg-2)}
html[data-hero="dark"] .preloader__bar{background:var(--line-on-dark)}
html[data-hero="dark"] .preloader__bar span{background:var(--hero-fg)}
html[data-hero="dark"] .stage :focus-visible{outline:var(--focus-ring-on-dark)}
html[data-hero="dark"] .layer--teaser :focus-visible{outline:var(--focus-ring)}
/* v28（2026-09-14 IRON）：Hero 影片改為滿版場景（深綠 #111C11 → 暖米白＋底部前景植物）
   ▸ 逐格畫面鋪滿舞台，不羽化（app.js CONFIG.island.fullBleed）
   ▸ 第 warmFrom 幀起 app.js 切 html.is-hero-warm：舞台文字、英文長句、玻璃卡改深墨綠字＋米白玻璃（沿用淺色 Hero 色組），nav 舞台段不反白 */
html[data-hero="dark"] .hero-media{-webkit-mask-image:none;mask-image:none}
html[data-hero="dark"].is-hero-warm .stage{
  --hs-fg:var(--ink);--hs-line:var(--line-strong);--hs-hover:var(--hover-layer);
  --hs-card-bg:rgba(251,249,245,.46);--hs-card-bg-hover:rgba(251,249,245,.62);--hs-card-fg:var(--ink);--hs-card-no:var(--ink-2);
  --hs-card-edge:inset 0 0 0 1px rgba(255,255,255,.5);
}
html[data-hero="dark"].is-hero-warm .stage :focus-visible{outline:var(--focus-ring)}
.idea__text,.hero-tagline,.hero-eyebrow{transition:color var(--dur-2) var(--ease-out)}
html[data-hero="dark"] .layer--media::after{transition:opacity var(--dur-3) var(--ease-out)}
html[data-hero="dark"].is-hero-warm .layer--media::after{opacity:.16}   /* 亮暖場景上顆粒感減半，避免畫面顯髒 */
/* Nav：舞台期間反白但不鋪底板；#actions 蓋上後 nav--solid 接手 */
html[data-hero="dark"]:not(.nav-open) .nav--on-dark:not(.nav--solid):not(.nav--over-media)::before,
html[data-hero="dark"]:not(.nav-open) .nav--on-dark:not(.nav--solid):not(.nav--over-media)::after{opacity:0}

/* ---------- 8. Debug HUD ---------- */
#hud{position:fixed;left:12px;bottom:12px;z-index:200;font-family:var(--mono);font-size:11px;line-height:1.5;background:rgba(15,31,16,.82);color:var(--accent);padding:8px 10px;display:none;pointer-events:none;white-space:pre}
html.debug #hud{display:block}

/* ---------- 9. RWD ---------- */
/* 元件防碰撞例外斷點（手冊 5.1 允許並須註明）：主選單在 1280／1240 以下會壓到品牌組 */
@media (max-width:1280px){
  .nav__menu ul{gap:4px}
  .nav__menu li > a{padding:8px 7px}
  .nav__menu li > a::after{left:7px;right:7px}
}
/* 1101~1240：置中選單會壓到品牌組 → 改回流式排列（靠右、CTA 前） */
@media (min-width:1101px) and (max-width:1240px){
  .nav__menu{position:static;transform:none;margin-left:auto}
  .nav__brand{margin-right:0}
}
@media (max-width:1100px){
  :root{
    --fs-h1:56px;--fs-h2:44px;--fs-h3:26px;--fs-h4:22px;--fs-lead:18px;--fs-idea:30px;
    --margin:24px;--section:80px;--section-compact:64px;--split-gap-wide:48px;--nav-h:64px;
  }
  .nav{--nav-x:var(--margin)}
  .sec-head + *{margin-top:72px}
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:grid}
  /* 舞台窄版：文字靠 gutter、字級走 token；英文長句在窄版會壓到島嶼與圓環，隱藏 */
  .hero-title{left:var(--margin);right:var(--margin);top:calc(var(--nav-h) + 6vh);gap:20px}
  .hero-title h1{font-size:var(--fs-h1);white-space:normal}
  .hero-title h1 .phr{display:inline-block}
  .hero-tagline{display:none}
  .idea__text{left:var(--margin);right:var(--margin);width:auto;max-width:none;top:calc(var(--nav-h) + 20px);font-size:var(--fs-idea);line-height:var(--lh-idea)}
  /* 逐格媒體框維持 16:9（置中、左右出血），canvas cover 才不會把島嶼左右裁掉 */
  .hero-media{--hm-w:max(100vw,calc(100lvh * 16 / 9));left:50%;right:auto;width:var(--hm-w);margin-left:calc(var(--hm-w) / -2)}
}
@media (hover:none) and (pointer:coarse) and (min-width:1101px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:grid}
}
@media (pointer:coarse){
  .link-arrow{min-height:44px;padding-block:10px}
}
@media (max-width:640px){
  .hero-media{
    -webkit-mask-image:radial-gradient(ellipse 34% 56% at 50% 46%,#000 40%,rgba(0,0,0,.4) 72%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%);
    mask-image:radial-gradient(ellipse 34% 56% at 50% 46%,#000 40%,rgba(0,0,0,.4) 72%,transparent 96%),linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%);
  }
  :root{
    --fs-h1:44px;--fs-h2:40px;--fs-h2-sm:40px;--fs-h3:24px;--fs-h4:20px;--fs-h5:18px;--fs-h6:16px;--fs-lead:16px;--lh-lead:1.7;
    --fs-body-l:16px;--lh-body-l:1.8;--fs-stat-l:32px;--fs-stat-m:24px;--fs-idea:22px;--lh-idea:1.5;
    --margin:18px;--section:64px;--section-compact:56px;--split-gap:32px;--split-gap-wide:40px;
  }
  .nav__logo{height:24px;top:0}
  .hero-eyebrow__dot::after{width:4px;height:4px;margin:-2px 0 0 -2px}
  .nav__divider,.nav__name{display:none}
  .hero-eyebrow__tc{font-size:12px}
  .hero-eyebrow__en{font-size:14px}
  .bt-title{align-items:flex-start}   /* 44px 中文比英文眉標窄，置中會讓標題看起來內縮 → 窄版改靠左（預告帶與 #actions 同步） */
  .nav-drawer__inner > a:not(.btn),.nav-drawer summary{font-size:22px}
}

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .hero-in{opacity:1}
  .nav__sub{transition-delay:0s!important}
  .hero-cta:active,.nav__cta:active,.btn:active,.ctrl:active,.go:active,a:active > .go{transform:none}
}