/* =====================================================================
   三十年打不開的門 — 互動式深度報導
   設計系統：門（暖報紙）× 洞（深墨地下）雙隱喻
   ===================================================================== */

:root{
  /* —— 門：暖報紙世界 —— */
  --paper:    #ECE4D2;
  --paper-2:  #E4DAC3;
  --paper-3:  #DFD3B8;
  --ink:      #1C1710;
  --ink-soft: #463C2D;
  --ink-mute: #8A7C63;
  --hair:     rgba(28,23,16,.16);

  /* —— 洞：深墨地下世界 —— */
  --dark:     #15120D;
  --dark-2:   #1E1A13;
  --dark-3:   #29241A;
  --cream:    #EDE4D2;
  --cream-soft:#D2C7AC;
  --cream-mute:#988B70;
  --hair-d:   rgba(237,228,210,.14);

  /* —— 主色 —— */
  --seal:     #C03A28;   /* 朱紅：封條 / 門 / 警示 */
  --seal-deep:#9C2E1E;
  --indigo:   #2C5160;   /* 靛藍：數據 / 制度 */
  --indigo-l: #4E8195;
  --gold:     #B98A3C;

  --serif:   "Noto Serif TC", "Songti TC", serif;
  --sans:    "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
  --display: "Libre Franklin", "Noto Sans TC", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 41rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 紙張顆粒紋理：固定覆蓋層 */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; }

/* ============ 版心 ============ */
.wrap{ width:min(var(--wrap),calc(100% - 2.6rem)); margin-inline:auto; }

section{ position:relative; }

/* ============ 閱讀進度 ============ */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:rgba(28,23,16,.08); z-index:8000;
}
.progress__bar{
  display:block; height:100%; width:0;
  background:var(--seal); transition:width .1s linear;
}

/* ============ 章節 rail 導覽 ============ */
.railnav{ position:fixed; right:1.4rem; top:50%; transform:translateY(-50%); z-index:7500; }
.railnav ul{ list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.railnav a{
  display:block; width:8px; height:8px; border-radius:50%;
  background:var(--ink); opacity:.22; position:relative;
  transition:opacity .3s, transform .3s; cursor:pointer;
}
.railnav a:hover{ opacity:.6; transform:scale(1.3); }
.railnav a.is-active{ opacity:1; background:var(--seal); transform:scale(1.35); }
.railnav a::after{
  content:attr(data-label);
  position:absolute; right:18px; top:50%; transform:translateY(-50%) translateX(6px);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; white-space:nowrap;
  background:var(--ink); color:var(--paper); padding:.25em .6em; border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.railnav a:hover::after{ opacity:.92; transform:translateY(-50%) translateX(0); }
body.theme-dark .railnav a{ background:var(--cream); }
body.theme-dark .railnav a.is-active{ background:var(--seal); }
body.theme-dark .railnav a::after{ background:var(--cream); color:var(--dark); }

/* ============ 通用：捲動揭露 ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =====================================================================
   封面 HERO
   ===================================================================== */
.hero{
  position:relative; height:185vh; background:#0a0806;
  --open:0.35vw; --openp:0;
}
.hero__stage{
  position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden; background:#0a0806;
}
/* 視覺隱藏，但保留語意（SEO／螢幕閱讀器） */
.hero__a11y{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* 門檻：門縫後方的暖光（開門後從縫裡透出） */
.hero__threshold{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(58% 66% at 50% 42%, rgba(255,206,140,.45), transparent 62%),
    linear-gradient(90deg, #0a0806 46.5%, rgba(255,216,152,.7) 50%, #0a0806 53.5%);
}
/* 緊閉時的細門縫光線（上下漸隱、柔光），開門時快速淡出 */
.hero__seamline{
  position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); z-index:3;
  pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent, rgba(255,226,184,.55) 24%, rgba(255,226,184,.7) 50%, rgba(255,226,184,.5) 76%, transparent);
  box-shadow:0 0 20px 3px rgba(255,205,150,.38);
  opacity:calc(1 - var(--openp,0) * 4);
}

/* 兩片門板（封面照切半） */
.hero__panel{
  position:absolute; inset:0; z-index:2;
  background-image:url("../img/cover.jpg"); background-size:cover; background-position:center 38%;
  filter:saturate(.82) contrast(1.02) brightness(.74);
  will-change:transform; backface-visibility:hidden;
}
.hero__panel::after{ /* 壓暗 */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,5,.5) 0%, rgba(10,8,5,.1) 30%, rgba(10,8,5,.55) 72%, rgba(10,8,5,.94) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(10,8,5,.5) 100%);
}
.hero__panel::before{ /* 門板內緣陰影（門的厚度感）：開門時才浮現 */
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:1;
  opacity:var(--openp,0);
}
.hero__panel--l{ clip-path:inset(0 50% 0 0);
  transform:translate3d(calc(-1 * (var(--open) + var(--shk,0px))),0,0); }
.hero__panel--l::before{ right:50%; background:linear-gradient(90deg, transparent, rgba(0,0,0,.7)); }
.hero__panel--r{ clip-path:inset(0 0 0 50%);
  transform:translate3d(calc(var(--open) + var(--shk,0px)),0,0); }
.hero__panel--r::before{ left:50%; background:linear-gradient(90deg, rgba(0,0,0,.7), transparent); }

/* 門卡住：開到一半撐不開，門板微微顫動 */
@property --shk{ syntax:'<length>'; inherits:true; initial-value:0px; }
.hero.is-stuck{ animation:doorRattle .36s ease-in-out infinite; }
@keyframes doorRattle{
  0%,100%{ --shk:0px; } 16%{ --shk:8px; } 34%{ --shk:-4px; }
  52%{ --shk:6px; } 72%{ --shk:-3px; } 88%{ --shk:3px; }
}

/* 鎖：扣在門縫中央 */
.hero__lock{
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; z-index:5;
  display:grid; place-items:center; color:#FBE9CC;
  background:rgba(20,14,8,.62); border:1px solid rgba(251,233,204,.5);
  backdrop-filter:blur(2px);
  animation:lockBreathe 4.5s ease-in-out infinite;
}
@keyframes lockBreathe{ 0%,100%{ box-shadow:0 0 0 0 rgba(251,233,204,.25);} 50%{ box-shadow:0 0 0 9px rgba(251,233,204,0);} }

.hero__inner{ position:absolute; left:0; right:0; bottom:0; z-index:6; width:100%;
  padding:0 1.6rem clamp(8.5rem, 15vh, 12rem);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__kicker{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.34em; text-indent:.34em;
  color:#E9C99B; margin-bottom:2.1rem;
  opacity:0; animation:heroUp .9s var(--ease) .2s forwards;
}
.hero__title{
  font-family:var(--serif); font-weight:900; color:#F6EEDD;
  font-size:clamp(2.9rem, 11.5vw, 8.4rem); line-height:.98; letter-spacing:.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero__title span{ display:block; opacity:0; animation:heroUp 1s var(--ease) forwards; }
.hero__title span:nth-child(1){ animation-delay:.35s; }
.hero__title span:nth-child(2){ animation-delay:.5s; color:#F3C9A0; }
.hero__sub{
  font-family:var(--serif); font-weight:400; color:#E6D9C2;
  font-size:clamp(1.02rem,2.7vw,1.4rem); letter-spacing:.06em; margin-top:1.6rem;
  max-width:30ch; opacity:0; animation:heroUp 1s var(--ease) .75s forwards;
}
.hero__meta{
  margin-top:2.6rem; display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; color:#C9B89C;
  opacity:0; animation:heroUp 1s var(--ease) .95s forwards;
}
.hero__meta b{ font-weight:700; color:#EAD9BD; }
.hero__cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(calc(-50% + 68px)); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; color:#E9C99B;
  opacity:0; animation:heroFade 1s var(--ease) 1.3s forwards;
}
.hero__cue-rail{ position:relative; width:1px; height:42px;
  background:linear-gradient(rgba(233,201,155,.5), rgba(233,201,155,0)); }
.hero__cue-dot{ position:absolute; top:0; left:50%; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:#FBE6C0; box-shadow:0 0 9px 2px rgba(251,220,160,.75);
  animation:cueDot 1.9s var(--ease) infinite; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }
@keyframes heroFade{ to{ opacity:1; } }
@keyframes cueDot{ 0%{ transform:translateY(-3px); opacity:0; } 18%{ opacity:1; }
  82%{ opacity:1; } 100%{ transform:translateY(40px); opacity:0; } }

/* =====================================================================
   引言 LEDE
   ===================================================================== */
.lede{ padding:13vh 0 11vh; }
.lede__lead{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,3.8vw,2.05rem); line-height:1.7; letter-spacing:.01em;
  margin-bottom:1.8rem; text-indent:0;
}
.lede__lead em{ font-style:normal; color:var(--seal); font-weight:700;
  border-bottom:3px solid rgba(192,58,40,.3); }
.lede__body{
  font-family:var(--serif); font-size:1.16rem; line-height:2.05; color:var(--ink-soft);
  margin-bottom:1.6rem;
}
.lede__body b{ color:var(--ink); font-weight:700; }

/* 0 → 4萬 反差 */
.flip{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.4rem;
  margin:3rem 0; padding:2.4rem 1.4rem;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.flip__col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.flip__tag{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--ink-mute); }
.flip__num{ font-family:var(--display); font-weight:900; font-size:clamp(3.2rem,11vw,5.4rem);
  line-height:.9; color:var(--ink); font-variant-numeric:tabular-nums; }
.flip__col--hot .flip__num{ color:var(--seal); }
.flip__unit{ font-size:.92rem; color:var(--ink-soft); letter-spacing:.04em; }
.flip__arrow{ display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--ink-mute); color:var(--seal); }
.flip__arrow svg{ color:var(--ink-mute); }

/* =====================================================================
   章節通用
   ===================================================================== */
.chapter{ padding:9vh 0 9vh; }
.chapter--flush{ padding-bottom:2vh; }

.chaphead{ margin:0 0 3.4rem; }
.chaphead__kick{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; color:var(--ink-mute);
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem;
}
.dot{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.dot--door{ background:var(--seal); }
.dot--hole{ background:var(--indigo); border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--dark-2); }
body.theme-dark .dot--hole{ background:#0b0906; box-shadow:inset 0 0 0 2px var(--cream-mute); }
.chaphead__title{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(2.3rem,7vw,4rem); line-height:1.1; letter-spacing:.01em;
}
.chaphead__lead{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem,3vw,1.5rem);
  color:var(--seal); margin-top:1.1rem; letter-spacing:.03em;
}

/* 內文 */
.prose{
  font-family:var(--serif); font-size:1.165rem; line-height:2.1; color:var(--ink-soft);
  margin-bottom:1.7rem; letter-spacing:.005em;
}
.prose b{ color:var(--ink); font-weight:700;
  background:linear-gradient(transparent 62%, rgba(192,58,40,.16) 0); padding:0 .05em; }

/* 引言句 */
.pull{ margin:3.4rem 0; padding:0 0 0 1.6rem; border-left:3px solid var(--seal); }
.pull p{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.6rem,5vw,2.5rem); line-height:1.5; color:var(--ink);
  letter-spacing:.01em;
}
.pull cite{ display:block; margin-top:1.1rem; font-style:normal; font-family:var(--sans);
  font-size:.86rem; letter-spacing:.08em; color:var(--ink-mute); }
.pull cite::before, .gap__q cite::before{ content:""; display:inline-block; width:1.5em; height:1px;
  background:currentColor; opacity:.5; vertical-align:middle; margin-right:.6em; }
.pull--big p{ font-size:clamp(1.8rem,5.6vw,2.9rem); }
.pull--seal{ border-left:none; padding-left:0; text-align:center; }
.pull--seal p{ color:var(--seal); position:relative; display:inline-block; }
.pull--seal cite{ color:var(--ink-mute); }

/* =====================================================================
   圖片
   ===================================================================== */
.figure{ margin:5vh 0; }
.figure--wide img{ width:100%; max-height:78vh; object-fit:cover;
  filter:saturate(.92) contrast(1.02); }
.figure--inset{ width:min(54rem,calc(100% - 2.6rem)); margin-inline:auto; }
.figure--inset img{ width:100%; }
figcaption{
  width:min(var(--wrap),calc(100% - 2.6rem)); margin:1rem auto 0;
  font-family:var(--sans); font-size:.84rem; line-height:1.7; color:var(--ink-soft);
  letter-spacing:.02em;
}
.figure__marker{ color:var(--seal); margin-right:.2em; }
.figure__credit{ color:var(--ink-mute); font-size:.78rem; }

/* =====================================================================
   圖表 通用
   ===================================================================== */
.viz{ width:min(56rem,calc(100% - 2.6rem)); margin:7vh auto; }
.viz__head{ margin-bottom:2rem; }
.viz__figno{ font-family:var(--mono); font-size:.66rem; letter-spacing:.4em; color:var(--seal); }
.viz__title{ font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,3.6vw,1.85rem);
  line-height:1.4; margin-top:.5rem; }
.viz__source{ font-family:var(--sans); font-size:.8rem; line-height:1.7; color:var(--ink-mute);
  margin-top:1.4rem; letter-spacing:.02em; }
.viz__source b{ color:var(--seal); font-weight:700; }
/* 圖表小標方格（放在資料來源前） */
.viz__tag{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:.82rem;
  color:var(--ink); background:var(--paper-3); border:1px solid var(--hair);
  border-radius:3px; padding:.2em .65em; margin-right:.7em; letter-spacing:.02em; }
.chapter--dark .viz__tag{ color:var(--cream); background:var(--dark-2); border-color:var(--hair-d); }
.viz__caption{ font-family:var(--serif); font-size:1.05rem; text-align:center; color:var(--ink-soft);
  margin-top:1.8rem; letter-spacing:.02em; }

/* —— 圖一：甜甜圈 —— */
.donutwrap{ display:flex; gap:2.6rem; align-items:center; flex-wrap:wrap; }
.donut{ position:relative; width:230px; height:230px; flex:0 0 auto; }
.donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.donut__track{ fill:none; stroke:var(--paper-3); stroke-width:14; }
.donut__val{ fill:none; stroke:var(--seal); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:314.159; stroke-dashoffset:314.159; transition:stroke-dashoffset 1.8s var(--ease); }
.donut.is-in .donut__val{ stroke-dashoffset:var(--off,55); }
.donut__center{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.donut__center .count, .donut__center .cnum{ font-family:var(--display); font-weight:900; font-size:2.7rem; color:var(--seal);
  line-height:1; font-variant-numeric:tabular-nums; transition:color .3s; }
.donut__center small{ font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); margin-top:.3rem; letter-spacing:.1em; }
.donut__legend{ flex:1 1 240px; }
.donut__cat{ font-family:var(--serif); font-weight:700; font-size:1.2rem; margin-bottom:1rem; }
.donut__cat span{ color:var(--ink-mute); font-weight:400; font-size:.95rem; }
.donut__legend ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem; }
.donut__legend li{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--ink-soft); }
.donut__legend li b{ color:var(--ink); }
.sw{ width:14px; height:14px; border-radius:3px; flex:0 0 auto; }
.sw--ind{ background:var(--seal); }
.sw--oth{ background:var(--paper-3); border:1px solid var(--hair); }
.donut__note{ font-family:var(--serif); font-size:1rem; line-height:1.8; color:var(--ink-soft);
  border-top:1px solid var(--hair); padding-top:1rem; }
.donut__note b{ color:var(--ink); }

/* —— 圖一：家事 vs 產業 雙圓餅對照 —— */
.viz--donut2{ width:min(60rem,calc(100% - 2.6rem)); }
.viz--donut2 .viz__source{ text-align:center; }
.donut2{ display:flex; align-items:flex-start; justify-content:center; gap:1.6rem; flex-wrap:wrap; }
.donutcell{ flex:1 1 300px; max-width:360px; display:flex; flex-direction:column; align-items:center; }
.donutcell__sector{ font-family:var(--serif); font-weight:700; font-size:1.18rem; margin-bottom:1.1rem; text-align:center; }
.donutcell__sector span{ display:block; font-family:var(--sans); font-weight:400; font-size:.84rem;
  color:var(--ink-mute); margin-top:.25rem; letter-spacing:.06em; }
.donut2 .donut{ width:200px; height:200px; margin-bottom:1.3rem; }
.donut__seg{ fill:none; stroke-width:15; stroke-linecap:butt; transform-origin:60px 60px;
  stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.3s var(--ease), opacity .35s ease; }
.donut.is-in .donut__seg{ stroke-dashoffset:0; }
.donut2 .donut__center .count, .donut2 .donut__center .cnum{ font-size:2.5rem; }
.donutcell__legend{ list-style:none; width:100%; max-width:230px; display:flex; flex-direction:column; gap:.55rem; }
.donutcell__legend li{ display:flex; align-items:center; gap:.6rem; font-family:var(--sans);
  font-size:.92rem; color:var(--ink-soft); padding-bottom:.5rem; border-bottom:1px solid rgba(28,23,16,.08);
  cursor:pointer; transition:opacity .3s; }
.donutcell__legend li i{ width:13px; height:13px; border-radius:3px; flex:0 0 auto; }
.donutcell__legend li span{ flex:1; }
.donutcell__legend li b{ font-family:var(--display); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.donutcell__legend li.is-dom span{ color:var(--ink); font-family:var(--serif); font-weight:700; }
.donutcell__legend li.is-dom b{ font-size:1.05rem; }
.donutcell__legend li:hover{ opacity:.7; }
.donutcell__legend li.is-faded{ opacity:.35; }
.donutcell__legend li.is-sel span{ color:var(--ink); font-weight:700; }
.donutcell__legend li.is-sel{ opacity:1; }
.donut2__hint{ text-align:center; font-family:var(--sans); font-size:.82rem; color:var(--seal);
  margin-top:1.4rem; letter-spacing:.02em; }
.donut2__vs{ align-self:center; margin-top:4.5rem; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--hair); background:var(--paper-2);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-mute); line-height:1.15; }

/* —— 圖二：薪資凍漲 —— */
.wage{ position:relative; }
.wage__svg{ width:100%; height:300px; overflow:visible; }
.wage__grid line{ stroke:var(--hair); stroke-width:1; }
.wage__area{ fill:rgba(44,81,96,.08); opacity:0; transition:opacity 1.4s ease .4s; }
.wage__line{ fill:none; stroke:var(--indigo); stroke-width:3; stroke-linejoin:round;
  stroke-linecap:round; }
.wage__dots circle{ fill:var(--paper); stroke:var(--indigo); stroke-width:3; }
.wage__dots circle.hot{ stroke:var(--seal); }
.wage.is-in .wage__area{ opacity:1; }
.wage__labels{ position:relative; margin-top:.4rem; height:54px; }
.wage__labels span{ position:absolute; transform:translateX(-50%); text-align:center;
  font-family:var(--mono); font-size:.68rem; color:var(--ink-mute); letter-spacing:.02em; }
.wage__labels span b{ display:block; font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--ink); margin-bottom:.2rem; }
.wage__labels span.hot b{ color:var(--seal); }
.wage__events{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }
.wage__ev{ font-family:var(--serif); font-size:.96rem; line-height:1.8; color:var(--ink-soft);
  padding-top:1rem; border-top:2px solid var(--seal); }
.wage__ev b{ color:var(--ink); }
.wage__y{ display:block; font-family:var(--mono); font-size:.74rem; color:var(--seal);
  letter-spacing:.08em; margin-bottom:.5rem; }
.wage__brace{ position:absolute; top:150px; height:46px;
  border-bottom:1px dashed rgba(28,23,16,.35);
  border-left:1px dashed rgba(28,23,16,.35); border-right:1px dashed rgba(28,23,16,.35);
  display:flex; align-items:flex-start; justify-content:center; pointer-events:none; }
.wage__brace span{ font-family:var(--sans); font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-mute); background:var(--paper); padding:0 .6em; transform:translateY(-50%); }

/* —— 圖三：來源國門牆 —— */
.gates{ display:flex; flex-direction:column; gap:1.5rem; }
.gaterow{ display:grid; grid-template-columns:5rem 1fr 4rem; align-items:center; gap:1rem; }
.gaterow__country{ font-family:var(--serif); font-weight:700; font-size:1.1rem; }
.gaterow__doors{ display:flex; gap:5px; flex-wrap:wrap; }
.gaterow__doors i{
  width:15px; height:26px; background:var(--seal); border-radius:2px 2px 1px 1px;
  position:relative; opacity:0; transform:translateY(8px) scaleY(.4); transform-origin:bottom;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.gaterow__doors i::after{ content:""; position:absolute; right:3px; top:11px; width:2px; height:2px;
  border-radius:50%; background:var(--paper); }
.gaterow.is-in .gaterow__doors i{ opacity:1; transform:none; }
.gaterow__n{ font-family:var(--sans); font-size:.92rem; color:var(--ink-soft); text-align:right; }
.gaterow__n b{ font-family:var(--display); font-weight:900; font-size:1.5rem; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.gaterow:first-child .gaterow__country{ color:var(--seal); }
.gaterow:first-child .gaterow__doors i{ background:var(--seal); }
.gaterow:not(:first-child) .gaterow__doors i{ background:var(--indigo); }
/* 長期掛零／剩個位數的來源國：刷淡 */
.gaterow__doors i.is-dim{ background:var(--paper-3) !important; border:1px solid var(--hair); }
.gaterow.is-in .gaterow__doors i.is-dim{ opacity:.45; }
.gaterow:not(:first-child) .gaterow__doors i::after{ background:var(--paper); }

/* =====================================================================
   敲門走廊 SCENE（核心互動）
   ===================================================================== */
.scene{ position:relative; }
.scene__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:13vh; overflow:hidden; z-index:1;
}
.scene__hint{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; color:var(--ink-mute);
  opacity:.7; }
.corridor{
  display:flex; align-items:flex-end; gap:1.6rem;
  transition:transform 1s var(--ease); will-change:transform;
}
.door{
  flex:0 0 auto; width:124px;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  opacity:.5; filter:saturate(.92);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transform:scale(.82);
}
.door.is-active{ opacity:1; transform:scale(1.06); filter:none; }
.door__panel{
  position:relative; width:108px; height:210px;
  border-radius:54px 54px 4px 4px;
  background:linear-gradient(160deg, var(--paper-3), var(--paper-2));
  border:2px solid rgba(28,23,16,.4);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.18), 0 16px 30px -18px rgba(28,23,16,.6);
  overflow:hidden;
}
.door__panel::before{ /* 門板分割線 */
  content:""; position:absolute; inset:14px 12px; border-radius:42px 42px 2px 2px;
  border:1.5px solid rgba(28,23,16,.18);
}
.door__knob{ position:absolute; right:12px; top:50%; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 2px rgba(28,23,16,.25); z-index:4; }
/* 門上的國旗牌 */
.door__flag{ position:absolute; top:20%; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; gap:3px; padding:3px; border-radius:3px;
  background:rgba(247,242,232,.92); box-shadow:0 3px 10px -3px rgba(0,0,0,.55), 0 0 0 1px rgba(28,23,16,.25); }
.door__flag img{ width:38px; height:26px; object-fit:cover; border-radius:1.5px;
  box-shadow:0 0 0 .5px rgba(28,23,16,.18); display:block; }
.door__flag--duo img{ width:26px; height:18px; }
.door__gap{ position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%);
  background:linear-gradient(180deg,#FFE6B8,#F4B45E); box-shadow:0 0 24px 6px rgba(255,200,120,.7);
  transition:width .8s var(--ease); }
.door__bar{ position:absolute; inset:0; opacity:0; transition:opacity .5s; }

/* 狀態：開（亮） */
.door[data-state="open"] .door__gap{ width:26px; }
/* 狀態：半開 */
.door[data-state="ajar"] .door__gap{ width:9px; }
/* 狀態：幾乎關閉（馬來西亞） */
.door[data-state="shut"] .door__panel{ filter:brightness(.86); }
.door[data-state="shut"] .door__gap{ width:2px; opacity:.5; }
/* 狀態：開了卻空（蒙古） */
.door[data-state="empty"] .door__panel{ background:linear-gradient(160deg,#2a251c,#15120d); border-color:rgba(28,23,16,.6); }
.door[data-state="empty"] .door__panel::before{ border-color:rgba(237,228,210,.12); }
.door[data-state="empty"] .door__gap{ width:30px; background:linear-gradient(180deg,#4a4636,#211d15);
  box-shadow:none; }
.door[data-state="empty"] .door__panel::after{
  content:"0"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:3.2rem; color:rgba(237,228,210,.5); }
/* 狀態：被甩上（緬甸） */
.door[data-state="slammed"] .door__panel{ background:linear-gradient(160deg,#3a1c16,#241310);
  border-color:var(--seal-deep); }
.door[data-state="slammed"] .door__bar{ opacity:1;
  background:repeating-linear-gradient(45deg, transparent 0 12px, rgba(192,58,40,.0) 12px 14px); }
.door[data-state="slammed"] .door__panel::after{
  content:""; position:absolute; top:50%; left:50%; width:140%; height:8px;
  background:var(--seal); transform:translate(-50%,-50%) rotate(-32deg);
  box-shadow:0 0 18px rgba(192,58,40,.6); }
/* 狀態：敲門中（印度） */
.door[data-state="knocking"] .door__panel{ border-color:var(--seal); }
.door[data-state="knocking"] .door__gap{ width:6px; }
.door[data-state="knocking"] .door__panel::after{
  content:""; position:absolute; top:50%; left:50%; width:40px; height:40px; border-radius:50%;
  border:2px solid var(--seal); transform:translate(-50%,-50%);
  animation:knock 1.8s ease-out infinite; }
.door.is-active[data-state="knocking"] .door__panel{ box-shadow:inset 0 0 0 6px rgba(192,58,40,.12), 0 0 36px -6px rgba(192,58,40,.6); }
@keyframes knock{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:.9;} 100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0;} }

.door__plate{ display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center; }
.door__yr{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--seal); }
.door__name{ font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--ink); }
.door__stat{ font-family:var(--sans); font-size:.7rem; color:var(--ink-mute); letter-spacing:.02em; }

/* 步進文字 */
.scene__steps{ position:relative; z-index:2; max-width:var(--wrap);
  margin:-32vh auto 0; padding:0 1.3rem; pointer-events:none; }
.step{ min-height:80vh; display:flex; align-items:flex-end; padding-bottom:7vh; }
/* 最後一扇門（印度）多停留一會，避免還沒看完就被捲過 */
#doorSteps .step:last-child{ min-height:135vh; }
.step p{
  font-family:var(--serif); font-size:1.18rem; line-height:2.05;
  background:rgba(236,228,210,.92); backdrop-filter:blur(3px);
  padding:1.7rem 1.7rem; border-radius:3px; color:var(--ink-soft);
  box-shadow:0 18px 40px -24px rgba(28,23,16,.5); border-left:3px solid var(--seal);
}
.step p b{ color:var(--ink); font-weight:700; }
.step__yr{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--seal); margin-bottom:.7rem; }

/* =====================================================================
   一道鎖（5%直聘）
   ===================================================================== */
.viz--lock .lock{ display:grid; grid-template-columns:1fr auto 1fr; gap:1.6rem; align-items:stretch; }
.lock__side{ padding:1.8rem 1.5rem; border:1px solid var(--hair); border-radius:4px;
  background:var(--paper-2); display:flex; flex-direction:column; }
.lock__side--left{ border-top:3px solid var(--indigo); }
.lock__side--right{ border-top:3px solid var(--seal); }
.lock__who{ font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; color:var(--ink-mute); }
.lock__read{ font-family:var(--serif); font-weight:900; font-size:clamp(2rem,6vw,3rem); line-height:1.05;
  margin:.6rem 0 1.4rem; }
.lock__side--left .lock__read{ color:var(--indigo); }
.lock__side--right .lock__read{ color:var(--seal); }
.lock__why{ list-style:none; display:flex; flex-direction:column; gap:1rem; }
.lock__why li{ font-family:var(--serif); font-size:.98rem; line-height:1.8; color:var(--ink-soft);
  padding-left:1rem; border-left:1px solid var(--hair); }
.lock__why li b{ color:var(--ink); }
.lock__core{ align-self:center; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--ink); }
.lock__core svg{ animation:lockShake 6s ease-in-out infinite; }
.lock__core span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--seal); }
@keyframes lockShake{ 0%,92%,100%{ transform:rotate(0);} 94%{ transform:rotate(-5deg);} 96%{ transform:rotate(5deg);} 98%{ transform:rotate(-3deg);} }

/* =====================================================================
   轉場：水面下（光 → 暗）
   ===================================================================== */
.dive{
  position:relative; min-height:108vh;
  background:linear-gradient(180deg, var(--paper) 0%, #b9a888 18%, #5d5240 42%, var(--dark-2) 72%, var(--dark) 100%);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
}
.dive__inner{ position:relative; z-index:2; padding:0 1.5rem; }
.dive__kick{ font-family:var(--mono); font-size:.74rem; letter-spacing:.24em; color:var(--cream-soft);
  margin-bottom:1.6rem; }
.dive__title{ font-family:var(--serif); font-weight:900; font-size:clamp(2.4rem,8vw,4.6rem);
  line-height:1.12; color:var(--cream); }
.dive__sub{ font-family:var(--serif); font-size:clamp(1rem,2.6vw,1.3rem); color:var(--cream-soft);
  margin-top:1.6rem; letter-spacing:.05em; }
.dive__waves{ position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:
    radial-gradient(60% 30% at 50% 86%, rgba(44,81,96,.4), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(0,0,0,.12) 38px 39px); }

/* =====================================================================
   暗場章節
   ===================================================================== */
.chapter--dark{ background:var(--dark); color:var(--cream); }
.chapter--dark .chaphead__kick{ color:var(--cream-mute); }
.chapter--dark .chaphead__lead{ color:var(--indigo-l); }
.chapter--dark .prose{ color:var(--cream-soft); }
.chapter--dark .prose b{ color:var(--cream); background:linear-gradient(transparent 62%, rgba(78,129,149,.28) 0); }
.chapter--dark .pull p{ color:var(--cream); }
.chapter--dark .pull--seal p{ color:#E8855F; }
.chapter--dark .pull cite{ color:var(--cream-mute); }
.chapter--dark figcaption{ color:var(--cream-soft); }
.chapter--dark .figure__credit{ color:var(--cream-mute); }
.chapter--dark .viz__title{ color:var(--cream); }
.chapter--dark .viz__source{ color:var(--cream-mute); }
.chapter--dark .viz__source b{ color:#E8855F; }
.dark-bg{ background:var(--dark); }

/* —— 偏食 —— */
.bias{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin:2.6rem 0 1rem; }
.bias__col{ padding:1.8rem 1.4rem; border:1px solid var(--hair-d); border-radius:4px;
  background:var(--dark-2); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.bias__flag{ font-family:var(--mono); font-size:.9rem; letter-spacing:.1em; color:var(--indigo-l); }
.bias__big{ font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,9vw,4rem); color:#E8855F;
  line-height:1; font-variant-numeric:tabular-nums; }
.bias__sub{ font-family:var(--serif); font-size:.95rem; line-height:1.7; color:var(--cream-soft); }
.bias__sub b{ color:var(--cream); }

/* —— 圖四：失聯曲線 —— */
.viz--missing{ }
.missing{ position:relative; }
.missing__svg{ width:100%; height:360px; overflow:visible; }
.missing__grid line{ stroke:var(--hair-d); stroke-width:1; }
.missing__grid text{ fill:var(--cream-mute); font-family:var(--mono); font-size:11px; }
.missing__area{ fill:url(#missingGrad); opacity:0; transition:opacity 1.6s ease .5s; }
.missing.is-in .missing__area{ opacity:1; }
.missing__cum{ fill:none; stroke:#E8855F; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.missing__rate{ fill:none; stroke:var(--indigo-l); stroke-width:2.5; stroke-dasharray:5 5; stroke-linecap:round; }
.missing__dots circle{ fill:var(--dark); stroke:#E8855F; stroke-width:3; }
.missing__dots text{ fill:var(--cream); font-family:var(--display); font-weight:700; font-size:15px; }
.missing__keys{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.key{ display:flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.82rem; color:var(--cream-soft); }
.key i{ width:20px; height:3px; border-radius:2px; }
.key--cum i{ background:#E8855F; }
.key--rate i{ background:var(--indigo-l); height:0; border-top:2px dashed var(--indigo-l); }
/* 失聯圖 HTML 疊加標籤 */
.missing__pt{ position:absolute; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%); background:#E8855F; box-shadow:0 0 0 3px rgba(232,133,95,.18);
  pointer-events:none; }
.missing__lab{ position:absolute; transform:translate(-50%,-50%); text-align:center;
  pointer-events:none; white-space:nowrap; }
.missing__lab b{ display:block; font-family:var(--display); font-weight:900; font-size:1.2rem;
  color:var(--cream); line-height:1; font-variant-numeric:tabular-nums; }
.missing__lab small{ display:block; font-family:var(--sans); font-size:.64rem; color:var(--cream-soft);
  margin-top:.3rem; letter-spacing:.04em; }
.missing__lab.lab--left{ transform:translate(-8%,-118%); }
.missing__lab.lab--top{ transform:translate(-108%,-50%); padding-right:.5rem; }
.missing__lab.lab--top b{ font-size:1rem; }
.missing__lab.lab--right{ transform:translate(-100%,-50%); text-align:right; padding-right:.6rem; }
.missing__lab.lab--rate{ transform:translate(-50%,-150%); }
.missing__lab.lab--rate em{ font-family:var(--display); font-style:normal; font-weight:600;
  font-size:.82rem; color:var(--indigo-l); background:var(--dark); padding:.12em .45em; border-radius:3px;
  border:1px solid rgba(78,129,149,.45); }
.missing__yL,.missing__yR{ position:absolute; transform:translateY(-50%); pointer-events:none;
  font-family:var(--mono); font-size:.82rem; color:var(--cream-mute); }
.missing__yR{ transform:translate(-100%,-50%); color:var(--indigo-l); }
.missing__axis{ position:relative; height:1.4rem; margin-top:.3rem; }
.missing__axis span{ position:absolute; transform:translateX(-50%); font-family:var(--mono);
  font-size:.84rem; color:var(--cream-mute); }
/* 圖四：圖例與資料來源置中 */
.viz--missing .missing__keys{ justify-content:center; }
.viz--missing .viz__source{ text-align:center; }

/* —— 圖五：日薪價差 —— */
.viz--wage-gap .gap{ display:flex; gap:2rem; align-items:flex-end; justify-content:center;
  height:340px; padding-top:1rem; }
.gap__bar{ flex:1 1 0; max-width:200px; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; gap:1rem; position:relative; }
.gap__val{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,6vw,3rem);
  display:flex; align-items:baseline; gap:.2rem; }
.gap__val small{ font-family:var(--sans); font-weight:400; font-size:.8rem; color:var(--cream-mute); }
.gap__bar--low .gap__val{ color:var(--cream-soft); }
.gap__bar--high .gap__val{ color:#E8855F; }
.gap__fill{ width:100%; border-radius:4px 4px 0 0; height:0; transition:height 1.4s var(--ease); }
.viz--wage-gap.is-in .gap__bar--low .gap__fill{ height:var(--h); }
.viz--wage-gap.is-in .gap__bar--high .gap__fill{ height:var(--h); }
.gap__bar--low .gap__fill{ background:linear-gradient(180deg,#4a4436,#2a261c); border:1px solid var(--hair-d); }
.gap__bar--high .gap__fill{ background:linear-gradient(180deg,#E8855F,#9C2E1E); box-shadow:0 0 40px -8px rgba(192,58,40,.5); }
.gap__label{ font-family:var(--serif); font-size:.92rem; line-height:1.6; color:var(--cream-soft); text-align:center;
  position:absolute; top:calc(100% + .8rem); width:100%; }
.gap__label small{ display:block; font-size:.78rem; color:var(--cream-mute); margin-top:.3rem; }
.gap__q{ font-family:var(--serif); font-size:clamp(1.2rem,3.6vw,1.6rem); text-align:center;
  margin-top:7rem; color:var(--cream); line-height:1.7; }
.gap__q b{ color:#E8855F; }
.gap__q cite{ display:block; font-family:var(--sans); font-style:normal; font-size:.84rem;
  color:var(--cream-mute); margin-top:.8rem; letter-spacing:.06em; }

/* —— 圖六：移工佔勞動力 —— */
.share{ display:flex; flex-direction:column; gap:1.5rem; }
.sharerow{ display:grid; grid-template-columns:6rem 1fr 4rem; align-items:center; gap:1rem; }
.sharerow__name{ font-family:var(--serif); font-weight:700; font-size:1.02rem; color:var(--cream); }
.sharerow__track{ height:30px; background:var(--dark-2); border:1px solid var(--hair-d); border-radius:3px; overflow:hidden; }
.sharerow__fill{ height:100%; width:0; background:var(--indigo); transition:width 1.4s var(--ease); border-radius:0 3px 3px 0; }
.viz--share.is-in .sharerow__fill{ width:var(--w); }
.sharerow--hl .sharerow__fill{ background:#E8855F; }
.sharerow--hl .sharerow__name{ color:#E8855F; }
.sharerow__v{ font-family:var(--display); font-weight:900; font-size:1.4rem; color:var(--cream); text-align:right;
  font-variant-numeric:tabular-nums; }

/* —— 圖七：犯罪率 —— */
.crime{ display:flex; flex-direction:column; gap:1.6rem; }
.crime__row{ display:grid; grid-template-columns:8rem 1fr 5rem; align-items:center; gap:1rem; }
.crime__name{ font-family:var(--serif); font-weight:700; font-size:1.02rem; color:var(--cream); }
.crime__track{ position:relative; height:36px; background:var(--dark-2); border:1px solid var(--hair-d); border-radius:3px; overflow:hidden; }
.crime__fill{ height:100%; width:0; transition:width 1.5s var(--ease); border-radius:0 3px 3px 0; }
.viz--crime.is-in .crime__fill{ width:var(--w); }
.crime__fill--low{ background:var(--indigo-l); border-radius:0; }
.crime__fill--high{ background:linear-gradient(90deg,#9C2E1E,#E8855F); }
.crime__range{ position:absolute; top:0; bottom:0; left:var(--from); width:0;
  background:repeating-linear-gradient(45deg, rgba(78,129,149,.6) 0 6px, rgba(78,129,149,.22) 6px 12px);
  transition:width 1.5s var(--ease) .25s; }
.viz--crime.is-in .crime__range{ width:var(--w); }
.crime__v{ font-family:var(--display); font-weight:900; font-size:1.3rem; color:var(--cream); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right; }
/* 長條圖座標軸與格線 */
.sharerow__track, .crime__track{ position:relative; }
.sharerow__track::before, .crime__track::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,
    transparent calc(25% - .5px), rgba(237,228,210,.12) 25%, transparent calc(25% + .5px),
    transparent calc(50% - .5px), rgba(237,228,210,.12) 50%, transparent calc(50% + .5px),
    transparent calc(75% - .5px), rgba(237,228,210,.12) 75%, transparent calc(75% + .5px)); }
.scaleaxis{ display:grid; grid-template-columns:6rem 1fr 4rem; gap:1rem; margin-top:.5rem; }
.scaleaxis--crime{ grid-template-columns:8rem 1fr 5rem; }
.scaleaxis__ticks{ position:relative; height:1.1rem; }
.scaleaxis__ticks i{ position:absolute; transform:translateX(-50%); font-style:normal;
  font-family:var(--mono); font-size:.64rem; color:var(--cream-mute); }
.scaleaxis__ticks i:first-child{ transform:translateX(0); }
.scaleaxis__ticks i:last-child{ transform:translateX(-100%); }

/* =====================================================================
   終章 / 結尾
   ===================================================================== */
.chapter--finale{ background:linear-gradient(180deg, var(--dark), #0e0c08); padding-bottom:14vh; }
.coda{ margin-top:5vh; padding-top:3rem; border-top:1px solid var(--hair-d); }
.coda p{ font-family:var(--serif); font-size:1.2rem; line-height:2.1; color:var(--cream-soft); margin-bottom:1.4rem; }
.coda p b{ color:#E8855F; font-weight:700; }
.coda__last{ font-family:var(--serif); font-weight:900; font-size:clamp(1.8rem,5.5vw,2.8rem) !important;
  line-height:1.5 !important; color:var(--cream) !important; margin-top:2.6rem !important; letter-spacing:.02em; }

/* 製作資訊 */
.colophon{ background:#0e0c08; color:var(--cream); padding:9vh 0 12vh; text-align:center; }
.colophon__title{ font-family:var(--serif); font-weight:900; font-size:clamp(1.6rem,5vw,2.4rem);
  color:var(--cream); margin-bottom:2.6rem; letter-spacing:.04em; }
.colophon__credits{ list-style:none; display:flex; flex-direction:column; gap:.9rem; max-width:24rem; margin:0 auto 2.6rem; }
.colophon__credits li{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--serif); font-size:1.02rem; color:var(--cream-soft);
  border-bottom:1px dotted var(--hair-d); padding-bottom:.7rem; }
.colophon__credits span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--cream-mute); }
.colophon__pub{ font-family:var(--mono); font-size:.74rem; letter-spacing:.24em; color:var(--cream-mute); margin-bottom:1.4rem; }
.colophon__note{ font-family:var(--sans); font-size:.78rem; line-height:1.7; color:var(--cream-mute);
  max-width:30rem; margin:0 auto; }

/* =====================================================================
   響應式
   ===================================================================== */
@media (max-width:760px){
  :root{ --wrap:34rem; }
  .railnav{ display:none; }
  .flip{ grid-template-columns:1fr; gap:.8rem; }
  .flip__arrow{ flex-direction:row; }
  .flip__arrow svg{ transform:rotate(90deg); }
  .wage__events{ grid-template-columns:1fr; }
  .donutwrap{ justify-content:center; }
  .donut2__vs{ margin:.4rem auto; }
  .viz--lock .lock{ grid-template-columns:1fr; }
  .lock__core{ flex-direction:row; }
  .bias{ grid-template-columns:1fr; }
  .gap__q{ margin-top:8.5rem; }
  .scene__steps{ margin-top:-20vh; }
  .step{ min-height:88vh; }
  .step p{ font-size:1.06rem; }
  .door{ width:104px; }
  .door__panel{ width:92px; height:178px; }
  .corridor{ gap:1rem; }
}
@media (max-width:760px){
  .missing__lab.lab--right{ transform:translate(-100%,-35%); text-align:right; }
  .missing__lab.lab--right small{ font-size:.6rem; }
}
@media (max-width:440px){
  .crime__row{ grid-template-columns:5.5rem 1fr; }
  .crime__v{ grid-column:2; text-align:right; }
  .sharerow{ grid-template-columns:4.5rem 1fr 3rem; }
}

/* 尊重減少動態偏好 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}