/* ═══════════════════════════════════════════════════════════════
   20 for Future 專區 /future/ — 頁面專屬樣式（pages/future.py）
   只用 site.css 的代幣，不重定義共用元件（.sec / .kpi / .tag / .btn / .card / .chips 在 site.css）。
   手機優先：375 → 640 → 900 → 1200。橘色只給即時數字（.kpi-live）、行動按鈕（.btn-org）與「待公布」標記。
   ═══════════════════════════════════════════════════════════════ */

/* ── 進場：site.js 進視窗時加 .in；<html class="js"> 由本頁 head_extra 加上，沒有 JS 直接顯示 ── */
.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.in{ opacity:1; transform:none; }
.js .layers-grid > li:nth-child(2) .reveal, .js .join-grid > .reveal:nth-child(2), .js .how-steps > .reveal:nth-child(3){ transition-delay:.08s; }
.js .layers-grid > li:nth-child(3) .reveal, .js .join-grid > .reveal:nth-child(3), .js .how-steps > .reveal:nth-child(5){ transition-delay:.16s; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ── 區塊內共用小件 ── */
.sec-link{ font-weight:700; white-space:nowrap; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.page-future section[id]{ scroll-margin-top:calc(var(--topbar-h) + 16px); }

/* ═══ 1. 開場 ═══ */
.ft-hero{ overflow:hidden; padding-top:clamp(26px,4.5vw,60px); padding-bottom:clamp(24px,3vw,40px); }
.ft-hero-in{ position:relative; display:grid; gap:34px; align-items:center; }
.ft-hero-copy{ position:relative; z-index:1; max-width:60ch; }
.ft-logo{ height:44px; width:auto; display:block; margin-bottom:18px; }
.ft-title{ font-size:var(--fs-h1); font-weight:900; line-height:1.2; letter-spacing:-.02em; margin:4px 0 16px; }
.ft-title b{ color:var(--blue); font-weight:900; }
.ft-core{ margin:20px 0 0; padding:14px 18px 14px 20px; border-left:4px solid var(--sky); background:var(--card); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink); font-size:var(--fs-small); line-height:1.8; max-width:52ch; }
.ft-core-label{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; color:var(--ink-dim); margin-bottom:4px; }
.ft-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.ft-hero-visual{ position:relative; z-index:1; margin:6px auto 0; width:min(100%,300px); }
.ft-hero-stage{ position:relative; }
.ft-hero-card{ transform:rotate(2deg); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--card); }
.ft-sym{ position:absolute; width:68px; height:68px; mix-blend-mode:multiply; pointer-events:none; }
.ft-sym-a{ left:-20px; bottom:-18px; }
.ft-sym-b{ right:-16px; top:-20px; width:56px; height:56px; }
.ft-hero-cap{ margin-top:16px; text-align:center; font-size:var(--fs-xs); color:var(--ink-dim); }
@media (min-width:900px){
  .ft-hero-in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; }
  .ft-logo{ height:52px; }
  .ft-hero-visual{ width:min(100%,520px); margin:0 0 0 auto; }
  .ft-sym{ width:96px; height:96px; }
  .ft-sym-a{ left:-36px; bottom:-26px; }
  .ft-sym-b{ right:-30px; top:-30px; width:84px; height:84px; }
  .ft-hero-cap{ text-align:right; padding-right:8px; }
}

/* ═══ 2. 20% 機制：三步（與原首頁三步同一版型）═══ */
.how-steps{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.step{ position:relative; padding:22px 22px 24px; overflow:hidden; }
.step .tag{ position:relative; z-index:1; }
.step h3{ font-size:var(--fs-h3); font-weight:900; margin:12px 0 8px; }
.step p{ font-size:var(--fs-small); line-height:1.8; max-width:34ch; }
.step-sym{ position:absolute; right:14px; top:14px; width:56px; height:56px; mix-blend-mode:multiply; pointer-events:none; }
.how-arrow{ display:flex; align-items:center; justify-content:center; color:var(--sky); font-size:28px; font-weight:900; line-height:1; }
.how-arrow::before{ content:"↓"; }
.how-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-top:26px; }
.ft-mech .step{ background:var(--page); box-shadow:none; border:1px solid var(--line); }   /* 白底區段裡卡片改用頁面底色 */
@media (min-width:900px){
  .how-steps{ grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); gap:12px; align-items:stretch; }
  .how-arrow::before{ content:"→"; }
  .step p{ max-width:none; }
}

/* ═══ 3. 三層數字 ═══ */
.layers-grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:none; }
.layer{ display:grid; gap:10px; align-content:start; }
.layer-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.layer-n{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; color:var(--ink-dim); text-transform:uppercase; }
.layer-name{ font-size:var(--fs-h3); font-weight:900; color:var(--ink); }
.layer .kpi{ min-height:150px; }
.layer .kpi-num{ font-size:clamp(28px,3vw,38px); }
.layer-desc{ font-size:var(--fs-small); color:var(--ink-dim); line-height:1.75; max-width:40ch; }
.ratios{ margin-top:clamp(24px,3vw,36px); background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; display:grid; gap:12px; }
.ratios h3{ font-size:var(--fs-h3); font-weight:900; }
.ratio-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ratio-list li{ display:grid; gap:2px; padding:12px 14px; background:var(--page); border-radius:var(--r-sm); }
.ratio-list b{ font-weight:900; color:var(--blue); }
.ratio-formula{ font-size:var(--fs-small); color:var(--ink); font-variant-numeric:tabular-nums; }
.ratios-note{ font-size:var(--fs-xs); color:var(--ink-dim); line-height:1.7; }
@media (min-width:640px){ .ratio-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){
  .layers-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .ratios{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:start; padding:24px 28px; }
  .ratios h3{ grid-column:1; }
  .ratio-list{ grid-column:2; grid-row:1 / span 3; }
  .ratios-note,.ratios .sec-link{ grid-column:1; }
}

/* ═══ 4. 公益去了哪裡 ═══ */
.facts{ list-style:none; margin:0 0 clamp(22px,3vw,32px); padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
.fact{ display:flex; align-items:center; gap:14px; background:var(--page); border-radius:var(--r); padding:14px 16px; }
.fact-ic{ flex:0 0 40px; height:40px; }
.fact-ic img,.fact-ic picture img{ height:40px; width:auto; }
.fact-label{ display:flex; align-items:center; font-size:var(--fs-small); font-weight:700; color:var(--blue); }
.fact-num{ display:block; font-size:clamp(26px,3vw,34px); font-weight:900; color:var(--blue); line-height:1.1; letter-spacing:-.01em; }
.fact-num small{ font-size:.5em; font-weight:900; margin-left:.1em; }
.fact-sub{ display:block; font-size:var(--fs-xs); color:var(--ink-dim); margin-top:2px; }
.where-grid{ display:grid; gap:24px; }
.where-col{ display:grid; gap:12px; align-content:start; }
.where-col h3{ font-size:var(--fs-h3); font-weight:900; }
.ch-list,.st-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ch-item{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; background:var(--page); border-radius:var(--r-sm); font-size:var(--fs-small); }
.ch-item b{ font-weight:700; color:var(--ink); }
.st-item a{ display:grid; gap:4px; padding:12px 14px; background:var(--page); border-radius:var(--r-sm); color:var(--ink); }
.st-item a:hover{ text-decoration:none; background:var(--blue-tint); }
.st-item a:hover b{ color:var(--blue); }
.st-meta{ font-size:var(--fs-xs); color:var(--ink-dim); font-weight:700; }
.st-item b{ font-size:var(--fs-small); font-weight:900; line-height:1.5; }
.st-read{ font-size:var(--fs-xs); font-weight:700; color:var(--blue); }
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; } }
@media (min-width:900px){ .where-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; } }

/* ═══ 5. Run for Future 入口 ═══ */
.run-grid{ display:grid; gap:14px; }
.ed{ padding:20px 22px 22px; display:grid; gap:8px; align-content:start; }
.ed-label{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; color:var(--ink-dim); text-transform:uppercase; }
.ed-title{ font-size:var(--fs-h3); font-weight:900; display:flex; align-items:baseline; gap:10px; }
.ed-year{ font-size:var(--fs-small); font-weight:700; color:var(--blue); }
.ed-facts{ font-size:var(--fs-small); color:var(--ink); }
.ed-date{ font-weight:700; }
.ed-rows{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:6px; font-size:var(--fs-small); }
.ed-rows li{ display:grid; grid-template-columns:5.5em minmax(0,1fr); gap:8px; }
.ed-rows b{ color:var(--ink-dim); font-weight:700; font-size:var(--fs-xs); padding-top:2px; }
.ed-upcoming .ed-title{ color:var(--ink-dim); }
.run-foot{ margin-top:20px; }
@media (min-width:640px){ .run-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }

/* ═══ 6. 如何參與／分享（藍底收尾）═══ */
.ft-join .wrap{ position:relative; }
.ft-join .sec-head{ position:relative; z-index:1; }
.join-grid{ position:relative; z-index:1; display:grid; gap:14px; }
.join{ position:relative; overflow:hidden; padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; }
.join-sym{ position:absolute; right:14px; top:14px; width:56px; height:56px; mix-blend-mode:multiply; pointer-events:none; }
.join-kicker{ position:relative; z-index:1; font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; color:var(--blue); text-transform:uppercase; }
.join h3{ position:relative; z-index:1; font-size:var(--fs-h3); font-weight:900; }
.join-text{ font-size:var(--fs-small); color:var(--ink-dim); line-height:1.75; flex:1; max-width:34ch; }
.join .btn{ align-self:flex-start; margin-top:8px; }
.join-status{ align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; min-height:48px; padding:12px 22px; border-radius:var(--r-pill); border:2px dashed var(--line); color:var(--ink-dim); font-weight:900; font-size:15px; line-height:1; }
@media (max-width:639px){ .ft-join .deco{ display:none; } }
@media (min-width:900px){ .join-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .join-text{ max-width:none; } }