/* ══════════════════════════════════════════════════════════════════════
   VACANT — HALL OF EVIDENCE
   全站設計系統 v3（博物館級重製，2026-07-26）

   設計語言：黑色展館。三種材料，不多不少——
     骨白（文字與結構）、國際橘（唯一的信號色：互動、警示、活資料）、
     髮絲線（展間分隔）。通過/失敗只在資料判讀裡用語義綠/橘。
   字體：拉丁與數字用 Space Grotesk（OFL，fonts/ 內自帶，22KB 可變字重）；
     中文走系統粗黑體。雙語展覽的標準配置。
   動態：canvas 鏈星座、捲動揭示、里程計數字、行情帶、自訂游標。
     prefers-reduced-motion 與 ?static=1 時全部退場。
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --stage:   #060505;            /* 展館地面 */
  --stage-2: #0B0A09;            /* 展台 */
  --stage-3: #121110;            /* 展台浮起 */
  --ink:     #E9E4D8;            /* 骨白 */
  --ink-dim: rgba(233, 228, 216, .60);
  --ink-faint: rgba(233, 228, 216, .34);
  --line:    rgba(233, 228, 216, .13);   /* 髮絲線 */
  --line-strong: rgba(233, 228, 216, .28);

  --signal:  #FF4D00;            /* 國際橘——唯一的信號色 */
  --signal-bright: #FF6A26;
  --signal-dim: rgba(255, 77, 0, .38);
  --signal-faint: rgba(255, 77, 0, .12);

  --pass:    #8FD694;            /* 只准出現在資料判讀 */
  --fail:    var(--signal-bright);

  --ff-display: "Space Grotesk", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --ff-body: "PingFang TC", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --ff-mono: "Space Grotesk", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --ff-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --wall-x: clamp(1.25rem, 5vw, 4.5rem);       /* 展牆左右留白 */
  --wall-max: 1180px;
  --read-max: 76ch;

  --ease-museum: cubic-bezier(.16, 1, .3, 1);  /* 厚重推門感 */
  --t-slow: 1.1s;
  --t-med: .55s;
  --t-fast: .22s;
}

/* 舊 tokens 相容別名（各頁內嵌樣式還引用它們）。
   本站為深色單一主題（展館控制自己的燈光）；data-theme 一律解析到同一組。 */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --bg: var(--stage); --bg-2: var(--stage-2); --bg-3: var(--stage-3);
  --bg-card: var(--stage-2); --bg-sunk: #030303;
  --text: var(--ink); --text-2: var(--ink-dim); --text-3: var(--ink-faint);
  --border: var(--line); --border-2: var(--line-strong);
  --accent: var(--signal); --accent-2: var(--signal-bright);
  --accent-soft: var(--signal-faint); --accent-line: var(--signal-dim);
  --on-accent: #000;
  --ok: var(--pass); --bad: var(--fail); --warn: var(--signal-bright);
  --ff-head: var(--ff-display);

  /* 舊資料視覺 token（各頁圖表與內嵌樣式仍引用）。
     博物館語彙下的對應：主資料線＝骨白、對照／壞＝國際橘、
     好＝語義綠、警示＝橘。soft 系一律映到弱化底色。 */
  --indigo: var(--ink-dim);       --indigo-soft: var(--stage-3);
  --red: var(--signal-bright);    --red-soft: var(--signal-faint);
  --green: var(--pass);           --ok-soft: rgba(143, 214, 148, .12);
  --amber: var(--signal);         --warn-soft: var(--signal-faint);
  --bad-soft: var(--signal-faint);
  --blue: var(--ink-dim);         --info: var(--ink-dim);
  --accent-dim: var(--signal-dim);
  --glow: rgba(255, 77, 0, .22);
  --ease: var(--ease-museum);
  --nav-h: 58px;
  --r-sm: 0; --r-md: 0; --r-lg: 0;   /* 展櫃直角——圓角是上一版的語彙 */
  --shadow-1: none; --shadow-2: none; --shadow-pop: 0 0 0 1px var(--line-strong);
}

/* ── 2. 地基 ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 展館空氣：噪點 + 暗角。fixed 疊層，完全不擋事件。 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(0,0,0,.5) 100%);
}

[hidden] { display: none !important; }
::selection { background: var(--signal); color: #000; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 640;
  letter-spacing: -.015em;
  line-height: 1.14;
  margin: 0 0 1rem;
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
a { color: var(--ink); text-decoration-color: var(--signal-dim); text-underline-offset: .22em; }
a:hover { color: var(--signal-bright); text-decoration-color: var(--signal); }
strong, b { color: var(--ink); font-weight: 640; }
code { font-family: var(--ff-data); font-size: .86em; background: var(--stage-3); padding: .1em .4em; border-radius: 3px; }
img, svg, canvas { max-width: 100%; }

.skip-link {
  position: absolute; left: -200vw; top: 0; z-index: 99;
  background: var(--signal); color: #000; padding: .6rem 1.2rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ── 3. 字級系統：展覽標題到說明牌 ────────────────────────────────── */
.display {
  font-family: var(--ff-display);
  font-weight: 680;
  font-size: clamp(2.6rem, 8.5vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
}
.display .sig { color: var(--signal); }
.display .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-dim);
}

.eyebrow {
  font-family: var(--ff-data);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.4rem;
}
.eyebrow::before { content: "▪ "; }

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.95;
  color: var(--ink-dim);
  max-width: var(--read-max);
}
.mono, .hash { font-family: var(--ff-data); }
.hash { font-size: .78em; color: var(--signal); letter-spacing: .02em; }
.num { font-family: var(--ff-display); font-variant-numeric: tabular-nums; }

/* 展品編號：超大描邊數字 */
.exhibit-no {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
}

/* ── 4. 展牆（版面）──────────────────────────────────────────────── */
.wall { max-width: var(--wall-max); margin: 0 auto; padding: 0 var(--wall-x); }
.hall { padding: clamp(4.5rem, 10vh, 8.5rem) 0; border-top: 1px solid var(--line); }
.hall:first-of-type { border-top: 0; }

/* ── 5. 導覽：館名 + 展間索引 ─────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 var(--wall-x);
  height: 58px;
  background: color-mix(in srgb, var(--stage) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.site-nav-brand {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: .01em; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.site-nav-brand .dot { color: var(--signal); }
.site-nav-brand .tagline {
  font-family: var(--ff-data); font-weight: 400; font-size: .6rem;
  letter-spacing: .28em; color: var(--ink-faint); text-transform: uppercase;
}
.brand-chain { display: inline-flex; gap: 3px; align-items: center; }
.brand-chain i {
  width: 7px; height: 7px; background: var(--signal); display: block;
  animation: chainpulse 2.8s infinite;
}
.brand-chain i:nth-child(2) { animation-delay: .35s; opacity: .7; }
.brand-chain i:nth-child(3) { animation-delay: .7s; opacity: .45; }
@keyframes chainpulse { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }

.site-nav-links {
  display: flex; gap: .1rem; list-style: none; margin: 0 0 0 auto; padding: 0;
  counter-reset: navno;
}
.site-nav-links a {
  display: block; padding: .5rem .78rem;
  font-family: var(--ff-data); font-size: .74rem; letter-spacing: .08em;
  color: var(--ink-dim); text-decoration: none;
  counter-increment: navno;
  transition: color var(--t-fast);
}
.site-nav-links a::before {
  content: counter(navno, decimal-leading-zero) " ";
  color: var(--ink-faint); font-size: .82em; margin-right: .15em;
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a[aria-current="page"] { color: var(--signal); }
.site-nav-links a[aria-current="page"]::before { color: var(--signal-dim); }

.site-nav-actions { display: flex; align-items: center; gap: .5rem; }

.ladder-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .14em;
  color: var(--ink-dim); text-decoration: none;
  border: 1px solid var(--line-strong); padding: .34rem .7rem;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.ladder-chip:hover { border-color: var(--signal); color: var(--ink); }
.ladder-chip .dots { display: inline-flex; gap: 3px; }
.ladder-chip .dots i { width: 5px; height: 5px; border: 1px solid var(--ink-faint); }
.ladder-chip .dots i.on { background: var(--signal); border-color: var(--signal); }

.lang-toggle, .icon-btn {
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .1em;
  background: none; border: 1px solid var(--line-strong); color: var(--ink-dim);
  padding: .34rem .66rem; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-toggle:hover, .icon-btn:hover { border-color: var(--signal); color: var(--ink); }
.lang-toggle .on { color: var(--signal); font-weight: 700; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--ink); padding: .3rem .55rem; cursor: pointer; font-size: 1rem;
}

@media (max-width: 900px) {
  .site-nav { flex-wrap: wrap; height: auto; padding-top: .6rem; padding-bottom: .6rem; }
  .site-nav-brand .tagline { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav-links {
    display: none; width: 100%; flex-direction: column; gap: 0;
    border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .4rem;
  }
  .site-nav-links.open { display: flex; }
  .site-nav-links a { padding: .7rem .2rem; font-size: .84rem; }
  .site-nav-actions { margin-left: .4rem; }
}

/* 次導覽（頁內章節條） */
.subbar {
  position: sticky; top: 58px; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .45rem var(--wall-x);
  background: color-mix(in srgb, var(--stage) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-data); font-size: .68rem; letter-spacing: .1em;
  overflow-x: auto; scrollbar-width: none;
}
.subbar::-webkit-scrollbar { display: none; }
.subbar-label { color: var(--signal); white-space: nowrap; }
.subbar-links { display: flex; gap: 1.1rem; }
.subbar-links a { color: var(--ink-faint); text-decoration: none; white-space: nowrap; }
.subbar-links a:hover { color: var(--ink); }
.subbar-spacer { flex: 1; }
.subbar-actions { display: flex; gap: .5rem; }
@media (max-width: 900px) { .subbar { top: 0; position: static; } }

/* ── 6. 行情帶（活資料跑馬）──────────────────────────────────────── */
.ticker {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: .55rem 0;
  font-family: var(--ff-data); font-size: .7rem; letter-spacing: .12em;
  color: var(--ink-dim);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: inline-flex; gap: 3.2rem; padding-right: 3.2rem; animation: tick 46s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker b { color: var(--signal); font-weight: 500; }
.ticker .lab { color: var(--ink-faint); }
html.static .ticker-track, html.reduced .ticker-track { animation: none; }

/* ── 7. 展品組件 ─────────────────────────────────────────────────── */
/* 說明牌（誠實聲明的位階：實體銅牌，不是頁尾小字） */
.plaque, .callout {
  position: relative;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--stage-2), var(--stage));
  padding: 1.5rem 1.7rem 1.4rem;
  max-width: 62ch;
}
.plaque::before, .callout::before {
  content: attr(data-label);
  position: absolute; top: -0.62em; left: 1.2rem;
  background: var(--stage); padding: 0 .6em;
  font-family: var(--ff-data); font-size: .6rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--signal);
}
.plaque p:last-child, .callout p:last-child { margin: 0; }
.callout { border-left: 3px solid var(--signal); }

.card {
  border: 1px solid var(--line);
  background: var(--stage-2);
  padding: 1.6rem;
  transition: border-color var(--t-med) var(--ease-museum), transform var(--t-med) var(--ease-museum);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat .num {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 640; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat .lab {
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}

.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--ff-data); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--ink-dim);
  padding: .28rem .62rem;
}
.badge.ok { border-color: var(--pass); color: var(--pass); }
.badge.accent, .badge.warn { border-color: var(--signal); color: var(--signal); }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ff-display); font-weight: 600; font-size: .88rem;
  letter-spacing: .04em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: none;
  border: 1px solid var(--line-strong);
  padding: .85rem 1.7rem;
  position: relative; overflow: hidden;
  z-index: 0;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--signal); transform: translateY(101%);
  transition: transform .34s var(--ease-museum);
  z-index: -1;
}
.btn:hover { color: #000; border-color: var(--signal); }
.btn:hover::before { transform: translateY(0); }
.btn-primary { border-color: var(--signal); color: var(--signal); }
.btn-sm { padding: .5rem 1rem; font-size: .76rem; }

.chainrule { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0 1.8rem; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; }
th {
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); text-align: left;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
td { font-size: .86rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--signal-faint); }

/* ── 8. 動態：揭示、計數、游標 ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity var(--t-slow) var(--ease-museum), transform var(--t-slow) var(--ease-museum); }
.reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-museum), transform .8s var(--ease-museum); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .14s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .23s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .32s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .41s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .5s; }

/* 大字揭示：整行從遮罩下推出 */
.mask-reveal { overflow: hidden; }
.mask-reveal > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease-museum); }
.mask-reveal.in > span { transform: none; }

html.reduced .reveal, html.static .reveal,
html.reduced [data-stagger] > *, html.static [data-stagger] > *,
html.reduced .mask-reveal > span, html.static .mask-reveal > span {
  opacity: 1; transform: none; transition: none;
}

/* 自訂游標（pointer:fine 才出現） */
.cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--signal); border-radius: 50%;
  transition: transform .18s ease, opacity .3s;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor-ring.show { opacity: 1; }
/* JS 每幀寫 transform（位移＋縮放），transition 只留給透明度，否則跟手會拖泥帶水 */
.cursor-ring.js { transition: opacity .3s; }
.cursor-ring::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: var(--signal);
}
@media (pointer: coarse) { .cursor-ring { display: none; } }

/* 捲動進度軌（右緣） */
.progress-rail {
  position: fixed; top: 0; right: 0; width: 2px; height: 100vh; z-index: 40;
  background: var(--line);
}
.progress-rail i { display: block; width: 100%; height: 0; background: var(--signal); }

/* ── 9. 頁尾 ─────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); margin-top: 5rem; }
.site-footer-inner {
  max-width: var(--wall-max); margin: 0 auto; padding: 3rem var(--wall-x) 3.4rem;
  display: grid; grid-template-columns: 1.4fr repeat(2, minmax(9ch, auto)); gap: 2.5rem;
  font-size: .82rem; color: var(--ink-dim);
}
.site-footer h4 {
  font-family: var(--ff-data); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
.site-footer a { color: var(--ink-dim); text-decoration: none; display: block; padding: .18rem 0; }
.site-footer a:hover { color: var(--signal-bright); }
@media (max-width: 700px) { .site-footer-inner { grid-template-columns: 1fr 1fr; } }

/* ── 10. 無障礙與退場 ────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}