/* =====================================================================
   華新麗華永續發展基金會 · 首頁提案 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:#EFE3D4;
  --bg-warm:#EFE3D4;                    /* 米白暖調底（不隨 Hero 主題變，深色主題下 body／#cares 讀這個） */
  --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);

  /* 字體 */
  --font:"Geist","Noto Sans TC",system-ui,-apple-system,"PingFang TC",sans-serif;
  --font-tc:"Noto Sans TC","Geist",system-ui,-apple-system,"PingFang TC",sans-serif;
  --mono:"Geist Mono","Noto Sans TC",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 字級（桌機）· R3 字級階層（對齊 alethia h1 72／sec h2 64／news h2 56／h3 36）
     72 h1 / 60 h2 / 52 h2-sm / 48 name-lg / 40 字卡・h3-lg / 36 h3-xl / 30 h3 / 28 num / 22 h4 / 21 導言 / 20 name / 17 內文 / 16 ui / 14 / mono 12
     中文行高比 alethia 的 .95 放寬（方塊字需要呼吸）；中文字距歸零，只有 display 級（h1／h2）收 -.02em */
  --fs-h1:72px;      --lh-h1:1.06;   --ls-h1:-.02em;
  --fs-display:var(--fs-h1);           /* 別名：Hero h1／Footer 大標 */
  --ls-display:var(--ls-h1);
  --fs-h2:60px;      --lh-h2:1.12;   --ls-h2:-.02em;   /* section h2 */
  --fs-h2-sm:52px;   --lh-h2-sm:1.14;  /* 次級大標（news 等列表區塊的 h2） */
  --fs-name-lg:48px;                   /* 關注領域大名稱（cares__name 專用） */
  --fs-idea:40px;    --lh-idea:1.32;   /* Hero 理念陳述句 */
  --fs-h3-lg:40px;   --lh-h3-lg:1.2;   /* 大型卡片標題 */
  --fs-h3-xl:36px;   --lh-h3-xl:1.2;   /* 大圖卡標題（solutions 級，alethia .card-img h3 36） */
  --fs-h3:30px;      --lh-h3:1.28;     /* 卡片標題 */
  --fs-num:28px;                       /* 統計數字（alethia .step3-card .n 28/600） */
  --fs-h4:22px;      --lh-h4:1.4;      /* 小卡／列表標題 */
  --fs-lead:21px;    --lh-lead:1.6;    /* 導言（sec-head p、hero-bottom） */
  --fs-name:20px;    --lh-name:1.3;    /* 索引卡／列表項名稱 */
  --fs-body:17px;    --lh-body:1.72;
  --fs-body-lg:18px;
  --fs-ui:16px;                        /* UI 文字（中文連結、表單、次要按鈕） */
  --fs-small:14px;   --lh-small:1.6;
  --fs-pill:14px;
  --fs-mono:12px;    --lh-mono:1.4;
  --ls-tc:0;

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

  /* 文字墨色層級（淺底 / 暗底） */
  --ink-lead:rgba(21,37,26,.82);       /* 導言 */
  --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);

  /* 版面 */
  --gutter:28px;
  --nav-h:68px;
  --sec-pad:80px;
  --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(--bg-hero);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);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;opacity:.7;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 32px、.go 38px 內的 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：mono 15/600、1px 細框、右側 24px accent 方塊＋SVG 箭頭（alethia .btn 實測 166×58：padding 16/18、gap 14）
   .btn--dark = 淺底用（深字深框）；.btn--on-dark = 暗底用（淺字淺框、accent-on-dark 方塊）
   .btn--primary = 實心 accent 底、icon 方塊反轉（ink 底 accent 箭頭）；暗底上自動換 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(--mono);font-size:15px;font-weight:600;letter-spacing:0;text-transform:uppercase;line-height:18px;
  color:var(--btn-fg);border:1px solid var(--btn-bd);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;
  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: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:var(--ink);--btn-ico-fg:var(--accent);--btn-hover-bg:#DDEEBD;
  background:var(--accent);border:0;padding:17px 19px;
}
@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:var(--forest);--btn-ico-fg:var(--accent-on-dark);--btn-hover-bg:#E2F1C8;
  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：圓形 ← → 控制鈕（共好行動、永續映像）· alethia .controls span 32×32、1px 實心框、14px
   視覺 32px，::before 往外擴 6px 讓點擊區達 44px（觸控不用另外放大） */
.ctrls{display:flex;gap:8px}
.ctrl{
  position:relative;width:32px;height:32px;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:-6px;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:.3;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：38px accent 正圓箭頭鈕（alethia 大圖卡右上角）。放在 <a> 內，hover／focus-visible 父層或自身時箭頭右移 */
.go{
  display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;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))}}
.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(--sec-pad) var(--gutter);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-lead)}
.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}
.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)}
#about,#footer{background:var(--forest);color:var(--on-dark)}
#about .sec-placeholder,#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:rgba(21,37,26,.22);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:-1.44px}
/* 第 2 行 Figma 5.6px：Chrome 中文環境最小字級限制 → 11.2px＋scale(.5)，外框高度收回 6px */
.nav__name-en{display:block;height:6px;font-family:var(--font);font-size:11.2px;line-height:12px;font-weight:500;letter-spacing:2.12px;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)}}
/* 次選單：手風琴列語彙，米白玻璃圓角面板（跟 CTA 膠囊同一套圓潤語彙，radius 14）
   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);opacity:.5;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:#DDEEBD}.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:translateY(4px) rotate(45deg)}
.nav-open .nav__burger .l2{transform:translateY(-4px) rotate(-45deg)}

/* 暗底反白 */
.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:#D9D9D9}
.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(--gutter) 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:rgba(21,37,26,.22)}
.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（島嶼／主標組／理念句）與 js/hero-carousel.js（五張卡）驅動
   ▸ 桌機座標＝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;--font-en:"Lexend Exa","Geist",system-ui,-apple-system,sans-serif}
.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,.6);
  --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}
.layer--cards{z-index:5}
/* 共好行動預告帶：白底、露出 --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:40px;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:.28px}
.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:normal;font-weight:500;letter-spacing:-1.44px;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:#15251A;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.3125px}
@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(184 * var(--u));   /* 2026-09-14 IRON：理念句下移 56（128→184） */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}

/* 五大領域玻璃卡（Figma 206.8×136、底 rgba(251,249,245,.2)＋blur 14、r14、padding 18 20 20、gap 10）
   位置／縮放／旋轉／透明度／z-index 由 js/hero-carousel.js 逐幀寫入；父層不設 preserve-3d（會讓 backdrop-filter 失效） */
.hc{position:absolute;inset:0;pointer-events:none}
.hc__hit{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;touch-action:pan-y;cursor:grab}
.hc.is-ring .hc__hit{pointer-events:auto}
/* WebGL 曲面版（.is-gl）：卡片畫在 canvas；點擊／拖曳／hover 由 .hc__hit 帶子接（Raycaster 判斷），游標由 JS 設定
   a.hc-card 視覺隱藏但保留可聚焦（鍵盤／讀屏），focus-visible 內框畫在 GL 卡上；computed 字體與 padding 仍供貼圖排版讀取 */
.hc__gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hc.is-gl .hc__hit{pointer-events:auto;cursor:default}
.hc.is-gl .hc-card{transform:none!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hc.is-ring .hc-card{cursor:grab}
.hc.is-ring .hc-card.is-front{cursor:pointer}
.hc.is-dragging .hc__hit,.hc.is-dragging .hc-card{cursor:grabbing}
.hc-card{
  position:absolute;left:0;top:0;width:206.8px;height:136px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px 20px;
  border-radius:12px;background:var(--hs-card-bg);box-shadow:var(--hs-card-edge);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--hs-card-fg);pointer-events:auto;touch-action:pan-y;
  transform-origin:50% 50%;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  transition:background-color var(--dur-1) var(--ease-out);
}
html.js .hc-card{transform:translate3d(-400px,-400px,0)}   /* JS 第一幀寫入前不在 (0,0) 閃一下 */
.hc-card__no{font-family:var(--mono);font-size:12px;line-height:16.8px;font-weight:400;color:var(--hs-card-no)}
.hc-card__name{font-family:var(--font-tc);font-size:20px;line-height:26px;font-weight:500;white-space:nowrap}
.hc-card__stat{margin-top:auto;display:flex;align-items:flex-end;white-space:nowrap}
.hc-card__num{font-family:var(--font);font-size:28px;line-height:28px;font-weight:600;letter-spacing:-.56px}
.hc-card__num--text{font-family:var(--font-tc);font-size:22px;letter-spacing:0}
.hc-card__unit{font-family:var(--font-tc);font-size:12px;line-height:16.8px;font-weight:500;opacity:.7;padding-left:6px;padding-bottom:3px}
@media (hover:hover) and (pointer:fine){.hc-card:hover{background:var(--hs-card-bg-hover)}}
.hc-card:focus-visible{outline:2px solid var(--hs-fg);outline-offset:3px}

/* 共好行動標題（預告帶與 #actions 共用；Figma：Lexend Exa 14/32 op .5 ＋ Noto Sans TC Medium 56、tracking −1.44） */
.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;opacity:.5;white-space:nowrap}
.bt-title__tc{font-family:var(--font-tc);font-size:56px;line-height:normal;font-weight:500;letter-spacing:-1.44px;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);
}
html[data-hero="dark"] body{background:var(--bg-warm)}
html[data-hero="dark"] #cares{--bg-hero:var(--bg-warm)}
/* 舞台色組：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)}
/* 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}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hc-card{background:rgba(251,249,245,.9)}
  html[data-hero="dark"] .hc-card{background:rgba(52,62,50,.94)}
}

/* ---------- 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 ---------- */
@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:52px;--fs-h2:42px;--lh-h2:1.16;--fs-h2-sm:38px;--fs-name-lg:36px;--fs-idea:30px;--fs-h3-lg:32px;--fs-h3-xl:28px;--fs-h3:24px;--fs-num:24px;--fs-h4:20px;--fs-lead:18px;
    --fs-body:16px;--fs-body-lg:16px;--sec-pad:64px;--gutter:24px;--nav-h:64px;
  }
  .nav{--nav-x:var(--gutter)}
  .sec-head + *{margin-top:72px}
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:grid}
  /* 舞台窄版：文字靠 gutter、字級走 token；英文長句在窄版會壓到島嶼與圓環，隱藏 */
  .hero-title{left:var(--gutter);right:var(--gutter);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(--gutter);right:var(--gutter);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:34px;--lh-h1:1.18;--fs-h2:30px;--lh-h2:1.22;--fs-h2-sm:26px;--lh-h2-sm:1.24;--fs-name-lg:28px;--fs-idea:22px;--lh-idea:1.5;
    --fs-h3-lg:26px;--fs-h3-xl:22px;--fs-h3:20px;--fs-num:22px;--fs-lead:17px;--lh-lead:1.65;--gutter:18px;--sec-pad:56px;
  }
  .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}
  .hero-title h1{letter-spacing:-.5px}
  .teaser{left:var(--gutter)}
  .bt-title{align-items:flex-start}   /* 44px 中文比英文眉標窄，置中會讓標題看起來內縮 → 窄版改靠左（預告帶與 #actions 同步） */
  .bt-title__tc{font-size:44px;letter-spacing:-1px}
  .nav-drawer__inner > a:not(.btn),.nav-drawer summary{font-size:22px}
}
@media (max-width:370px){
  :root{--fs-h1:32px}
}

/* ---------- 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}
}