/* ===========================================================
   計畫成果網站　樣式系統
   識別參考：台北當代藝術館（純白、純黑、單一訊號紅、硬邊方塊、無襯線）
   =========================================================== */

:root{
  --num:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --w:#FFFFFF;
  --k:#000000;
  --k-2:#272727;
  --grey:#737373;
  --grey-2:#A8A8A8;
  --rule:#E4E4E4;
  --wash:#F4F4F4;
  --red:#E83434;
  --red-2:#FF6060;

  /* 拉丁字型置前：英數與數學符號取自 Helvetica，中文字不在其字符集內會自動回退到中文字型。
     這可避免 U+2212 減號落到中文字型而被渲染成近似「一」的長橫。 */
  --sans:"Helvetica Neue",Helvetica,Arial,"Noto Sans TC","PingFang TC","PingFang SC",
         "Microsoft JhengHei","Heiti TC",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --pad:clamp(20px,4vw,64px);
  --maxw:1440px;
  --mast-h:96px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--w); color:var(--k);
  font-family:var(--sans); font-size:16px; line-height:1.95;
  font-weight:400; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--k); text-decoration:none}
a:hover{color:var(--red)}

/* ---------- 骨架 ---------- */
.shell{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ---------- 標頭 ---------- */
.mast{position:sticky; top:0; z-index:100; background:var(--w); border-bottom:1px solid var(--rule)}
.mast-in{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  min-height:var(--mast-h); display:flex; align-items:center; justify-content:space-between; gap:24px}
.mark{display:block; line-height:1.15; padding:18px 0}
.mark .en{font-size:19px; font-weight:800; letter-spacing:.16em}
.mark .en span{color:var(--red)}
.mark .zh{font-size:12.5px; letter-spacing:.28em; color:var(--k); margin-top:4px; font-weight:500}
.mark:hover{color:var(--k)}

.nav{display:flex; align-items:stretch; gap:0}
.nav a{display:flex; align-items:center; padding:0 18px; font-size:14px; font-weight:700; letter-spacing:.08em;
  border-left:1px solid var(--rule); align-self:stretch}
.nav a.on{color:var(--red)}
.nav a.cta{background:var(--red); color:var(--w); border-left:0; margin-left:14px; padding:0 26px}
.nav a.cta:hover{background:var(--k); color:var(--w)}

.burger{display:none; width:52px; height:52px; background:var(--k); border:0; cursor:pointer; padding:0}
.burger i{display:block; width:22px; height:2px; background:var(--w); margin:4px auto}

@media(max-width:900px){
  :root{--mast-h:72px}
  .nav{position:fixed; inset:var(--mast-h) 0 auto 0; background:var(--w); flex-direction:column;
    border-bottom:1px solid var(--rule); transform:translateY(-140%); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav.open{transform:none}
  .nav a{border-left:0; border-top:1px solid var(--rule); padding:18px var(--pad); font-size:15px}
  .nav a.cta{margin-left:0; padding:18px var(--pad)}
  .burger{display:block}
  .mark .en{font-size:16px} .mark .zh{font-size:11px; letter-spacing:.22em}
}

/* ---------- 頁首主視覺 ---------- */
.ph{border-bottom:1px solid var(--rule)}
.ph-in{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,84px) var(--pad) clamp(36px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,5vw,64px); align-items:center}
@media(max-width:1000px){.ph-in{grid-template-columns:1fr; gap:28px}}
.kicker{font-size:12px; font-weight:800; letter-spacing:.34em; color:var(--red); margin-bottom:20px;
  max-width:100%; overflow-wrap:break-word}
/* 補助單位名稱較長，窄螢幕收斂字距以免撐破版面 */
@media(max-width:560px){.kicker{letter-spacing:.16em; font-size:11.5px; line-height:1.9}}
.ph h1{margin:0; font-weight:800; letter-spacing:.005em;
  font-size:clamp(27px,3.5vw,46px); line-height:1.34}
.ph .stand{margin:20px 0 0; font-size:16px; color:var(--grey); max-width:52ch; line-height:1.95}
.ph .kv{margin:0; border:1px solid var(--rule)}
.ph .kv img{width:100%; height:auto}

/* 首頁的加大版 */
.ph.lead .ph-in{padding-top:clamp(52px,7vw,104px)}
.ph.lead h1{font-size:clamp(30px,4.4vw,60px); line-height:1.26}

/* ---------- 區段 ---------- */
.sec{padding:clamp(56px,7vw,104px) 0; border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.sec.wash{background:var(--wash)}
.sec.ink{background:var(--k); color:var(--w)}
.sec.ink .lab{color:#4A4A4A}
.sec.ink h2, .sec.ink a{color:var(--w)}
.sec.ink .rule{background:#333}

/* 需高於 .sec h2（同為 0,1,1 且在其前），故加上 .sec 前綴 */
.sec h2.lab{font-size:clamp(34px,6vw,72px); font-weight:800; letter-spacing:.01em; line-height:1;
  color:#EDEDED; margin:0 0 clamp(22px,3vw,44px); text-transform:uppercase;
  /* 最長的標為 DOCUMENTATION；窄螢幕下以 vw 收斂，並保留斷字作為最後防線 */
  overflow-wrap:break-word}
.sec h2{margin:0 0 22px; font-size:clamp(21px,2.4vw,29px); font-weight:800; letter-spacing:.02em; line-height:1.45}
.sec h3{margin:0 0 12px; font-size:18px; font-weight:800; letter-spacing:.02em}
.sec p{margin:0 0 18px; max-width:35em}
.sec p:last-child{margin-bottom:0}
.lead-p{font-size:clamp(17px,1.6vw,20px); line-height:1.8; max-width:22em; font-weight:500}
.muted{color:var(--grey)}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(20px,3vw,44px)}

/* ---------- 數字 ---------- */
.figs{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--k)}
.figs .f{padding:26px 20px 30px; border-right:1px solid var(--rule)}
.figs .f:last-child{border-right:0}
.figs b{display:block; font-family:var(--num); font-size:clamp(32px,4vw,54px); font-weight:700;
  line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.figs .f:nth-child(2) b{color:var(--red)}
.figs span{display:block; margin-top:12px; font-size:13px; color:var(--grey); letter-spacing:.06em; line-height:1.7}
@media(max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}
  .figs .f{border-bottom:1px solid var(--rule)}
  .figs .f:nth-child(2n){border-right:0}}

/* ---------- 索引卡（首頁導引） ---------- */
.index-list{border-top:2px solid var(--k)}
.ix{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:clamp(14px,3vw,40px);
  align-items:center; padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--rule)}
.ix:hover{color:var(--k)}
.ix .n{font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--grey-2)}
.ix h3{margin:0 0 6px; font-size:clamp(19px,2.1vw,26px); font-weight:800; letter-spacing:.02em}
.ix p{margin:0; font-size:14.5px; color:var(--grey); max-width:60ch; line-height:1.8}
.ix .go{width:46px; height:46px; background:var(--wash); display:grid; place-items:center; flex:none;
  font-size:17px; transition:background .25s, color .25s}
.ix:hover .go{background:var(--red); color:var(--w)}
.ix:hover h3{color:var(--red)}
@media(max-width:700px){.ix{grid-template-columns:1fr auto; gap:14px} .ix .n{grid-column:1/-1}}

/* ---------- 階段 ---------- */
.stage{display:grid; grid-template-columns:96px minmax(0,1fr); gap:clamp(16px,3vw,36px);
  padding:28px 0; border-bottom:1px solid var(--rule)}
.stage:first-of-type{border-top:2px solid var(--k)}
.stage .n{font-family:var(--num); font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stage.loop .n{color:var(--red)}
.stage h3{margin:0 0 8px}
.stage p{margin:0; color:var(--grey); font-size:15px; max-width:64ch}
@media(max-width:700px){.stage{grid-template-columns:56px minmax(0,1fr)} .stage .n{font-size:26px}}

.cond{border-top:2px solid var(--k); padding-top:22px}
.cond h3{margin:0 0 10px; font-size:17px}
.cond p{margin:0; font-size:14.5px; color:var(--grey)}

/* ---------- 發現 ---------- */
.find{--stat-w:208px; --stat-gap:clamp(22px,3.4vw,56px);
  border-top:2px solid var(--k); padding:clamp(30px,3.6vw,46px) 0 clamp(38px,4.4vw,58px);
  border-bottom:1px solid var(--rule)}
.find:last-of-type{border-bottom:0; padding-bottom:0}

/* 數字欄固定為窄欄，避免短數字占住半個版面而留下大片空白 */
.find-grid{display:grid; grid-template-columns:minmax(0,var(--stat-w)) minmax(0,1fr);
  gap:var(--stat-gap); align-items:start}
@media(max-width:860px){.find-grid{grid-template-columns:1fr; gap:4px}}

.find .stat-col{position:sticky; top:calc(var(--mast-h) + 28px)}
@media(max-width:860px){.find .stat-col{position:static}}
.find .rq{font-size:11.5px; font-weight:800; letter-spacing:.3em; color:var(--red); margin-bottom:14px}
.find .big{font-family:var(--num); font-size:clamp(42px,5vw,66px); font-weight:700; line-height:.95;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:10px}
.find .cap{font-size:12.5px; color:var(--grey); letter-spacing:.04em; line-height:1.7; margin-bottom:0}
@media(max-width:860px){.find .cap{margin-bottom:20px}}

/* 中文一行以 32 至 34 字最易讀，em 對 CJK 即為字寬 */
.find h2{margin:0 0 16px; max-width:24em}
.find p{max-width:33em}
.find .find-grid > div + div > p + p{margin-top:0}

figure.plate{margin:clamp(32px,4.4vw,56px) 0 0; padding:0}
/* 發現區塊內的圖表：與文字欄對齊，並限制寬度。
   ENA 圖原生寬度為 1031 與 1063 px，上限 760px 可避免放大而失真。 */
.find > figure.plate{margin-left:calc(var(--stat-w) + var(--stat-gap)); max-width:760px}
@media(max-width:860px){.find > figure.plate{margin-left:0; max-width:100%}}
figure.plate img{width:100%; border:1px solid var(--rule)}
figure.plate figcaption{margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--grey); line-height:1.75; letter-spacing:.03em; max-width:44em}

/* ---------- 揭露 ---------- */
.disclose{border:2px solid var(--red); padding:clamp(24px,3.5vw,44px)}
.disclose .tag{display:inline-block; background:var(--red); color:var(--w); font-size:12px; font-weight:800;
  letter-spacing:.24em; padding:6px 14px; margin-bottom:22px}
.disclose p{max-width:36em}

/* ---------- 表列 ---------- */
.list{border-top:2px solid var(--k)}
.list li{list-style:none; padding:22px 0; border-bottom:1px solid var(--rule)}
.list ul{margin:0; padding:0}
.list .t{font-size:16px; font-weight:700; line-height:1.7}
.list .m{margin-top:8px; font-size:13.5px; color:var(--grey); letter-spacing:.04em; line-height:1.75}

/* ---------- 影音 ---------- */
.video{border:1px solid var(--rule); background:#000; position:relative; aspect-ratio:16/9}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.gal{display:grid; grid-template-columns:repeat(12,1fr); gap:10px}
.g{grid-column:span 4; min-width:0; aspect-ratio:4/3; overflow:hidden; background:var(--wash); cursor:zoom-in; position:relative}
.g.w{grid-column:span 6; aspect-ratio:16/10}
.g.t{grid-column:span 3; aspect-ratio:3/4}
.g img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.g:hover img{transform:scale(1.05)}
.g .pl{position:absolute; left:0; bottom:0; background:var(--red); color:var(--w); font-size:11px;
  font-weight:800; letter-spacing:.14em; padding:6px 12px}
@media(max-width:860px){.g,.g.w,.g.t{grid-column:span 6; aspect-ratio:4/3}}
@media(max-width:540px){.gal{grid-template-columns:1fr} .g,.g.w,.g.t{grid-column:auto}}

.lb{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.95); display:none; place-items:center; padding:28px}
.lb.on{display:grid}
.lb img,.lb video{max-width:94vw; max-height:84vh}
.lb .cap{position:absolute; left:0; right:0; bottom:20px; text-align:center; color:#bbb; font-size:13px; padding:0 24px}
.lb .x{position:absolute; top:16px; right:18px; width:44px; height:44px; background:var(--red); color:var(--w);
  border:0; font-size:20px; cursor:pointer}

/* ---------- 頁尾 ---------- */
footer.foot{background:var(--k); color:var(--w); padding:clamp(44px,6vw,80px) 0 clamp(36px,5vw,56px)}
/* 深色區段直接接深色頁尾時會連成一片，補一道分隔線與額外留白 */
.sec.ink + footer.foot{border-top:1px solid #333; padding-top:clamp(52px,7vw,92px)}
footer.foot a{color:var(--w)} footer.foot a:hover{color:var(--red-2)}
footer.foot .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:32px}
footer.foot h4{margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.28em; color:#6E6E6E}
footer.foot p{margin:0 0 8px; font-size:14px; line-height:1.9; color:#D6D6D6}
footer.foot .fund{margin-top:clamp(32px,5vw,56px); padding-top:26px; border-top:1px solid #2C2C2C;
  font-size:15px; font-weight:700; color:var(--w); letter-spacing:.12em; line-height:1.7}
footer.foot .bar{margin-top:18px; padding-top:16px; border-top:1px solid #2C2C2C;
  font-size:12.5px; color:#7A7A7A; letter-spacing:.06em}

/* ---------- 進場 ---------- */
.js .rv{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1; transform:none; transition:none}}


/* ===========================================================
   響應式補強
   =========================================================== */

/* 錨點捲動時避開固定標頭 */
:target,.find,.sec h2{scroll-margin-top:calc(var(--mast-h) + 24px)}

/* 瀏海與圓角螢幕的安全區 */
@supports(padding:max(0px)){
  .shell,.mast-in,.ph-in{
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right));
  }
  footer.foot{padding-bottom:max(clamp(36px,5vw,56px),env(safe-area-inset-bottom))}
}

/* 觸控裝置：hover 效果無法觸發，改以點擊回饋取代，避免停在放大狀態 */
@media(hover:none){
  .g:hover img{transform:none}
  .g:active img{transform:scale(1.03)}
  .ix:hover .go{background:var(--wash); color:var(--k)}
  .ix:hover h3{color:var(--k)}
  .ix:active .go{background:var(--red); color:var(--w)}
  .ix:active h3{color:var(--red)}
  .nav a:hover,a:hover{color:inherit}
  .nav a.on{color:var(--red)}
}

/* 行動版選單：項目多或橫向持機時仍可捲動 */
@media(max-width:900px){
  .nav{max-height:calc(100svh - var(--mast-h)); overflow-y:auto; -webkit-overflow-scrolling:touch}
  .nav a{min-height:52px}
}

/* 橫向持機的矮螢幕：壓縮標頭與區段留白 */
@media(max-height:520px) and (orientation:landscape){
  :root{--mast-h:56px}
  .mark{padding:10px 0}
  .mark .zh{display:none}
  .sec{padding:40px 0}
  .ph-in{padding-top:28px; padding-bottom:24px}
}

/* 平板：主視覺與內文並排會過擠，改為堆疊但限制圖高 */
@media(min-width:701px) and (max-width:1000px){
  .ph .kv img{max-height:46svh; width:100%; object-fit:cover; object-position:center}
}

/* 手機：關鍵數字由二欄改為單欄，避免換行破碎 */
@media(max-width:420px){
  .figs{grid-template-columns:1fr}
  .figs .f{border-right:0; border-bottom:1px solid var(--rule); padding:20px 0 22px}
  .figs .f:last-child{border-bottom:0}
  .figs span br{display:none}
  .sec h2.lab{font-size:clamp(23px,8.4vw,34px)}
  .find .big{font-size:44px}
  .stage{grid-template-columns:44px minmax(0,1fr); gap:14px}
  .stage .n{font-size:23px}
  .ph .kv img{max-height:40svh; object-fit:cover}
}

/* 圖表在小螢幕上縮到不可讀，提示可點開放大 */
@media(max-width:860px){
  figure.plate{position:relative; cursor:zoom-in}
  figure.plate::after{content:"點擊放大"; position:absolute; right:0; bottom:0;
    background:var(--k); color:var(--w); font-size:11px; font-weight:700;
    letter-spacing:.14em; padding:5px 10px}
}

/* 大螢幕：避免行長過長 */
@media(min-width:1600px){
  .sec p{max-width:36em}
}