:root{
  /* Monocle 編輯系統:奶油紙 · 近黑墨 · 編輯紅只用在 kicker 與行動 · 橄欖綠當結構色 */
  --paper:#FFFFFF;
  --deep:#1C1A14;       /* 冰河深藍近黑 —— 內嵌暗段 */
  --ink:#191712;
  --ink-2:#4B463C;
  --ink-3:#8A8478;
  --stone:#2E4A34;      /* 冰河藍 —— 結構、表頭 */
  --stone-line:#E2E0D8;
  --accent:#D89311;     /* 高海拔天光藍 —— kicker、行動、進度 */
  --accent-lit:#F2B63C; /* 暗底上的天光藍 */
  --cold:#F6F4EE;

  --serif:"Songti TC","Noto Serif CJK TC","Source Han Serif TC",Georgia,"Times New Roman",serif;
  --sans:"PingFang TC","Noto Sans CJK TC","Helvetica Neue",Helvetica,Arial,sans-serif;

  --s1:4px;--s2:8px;--s3:14px;--s4:22px;--s5:36px;--s6:56px;--s7:88px;
  --measure:34em;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12100C; --deep:#0A0906; --cold:#1B1913;
    --ink:#F3F0E8; --ink-2:#BAB4A6; --ink-3:#8B8578;
    --stone:#8FB88F; --stone-line:#2A281F; --accent:#F2B63C; --accent-lit:#F2B63C;
  }
}
:root[data-theme="dark"]{
  --paper:#12100C; --deep:#0A0906; --cold:#1B1913;
  --ink:#F3F0E8; --ink-2:#BAB4A6; --ink-3:#8B8578;
  --stone:#8FB88F; --stone-line:#2A281F; --accent:#F2B63C; --accent-lit:#F2B63C;
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --deep:#1C1A14; --cold:#F6F4EE;
  --ink:#191712; --ink-2:#4B463C; --ink-3:#8A8478;
  --stone:#2E4A34; --stone-line:#E2E0D8; --accent:#D89311; --accent-lit:#F2B63C;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.75 var(--sans);-webkit-text-size-adjust:100%}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── 語言切換 ─────────────────────────── */
body[data-l="zh"] .en, body[data-l="en"] .zh{display:none}
#bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--stone-line);
  display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);flex-wrap:wrap}
#bar b{font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--stone);text-transform:uppercase}
.spacer{flex:1}
.jump{display:flex;gap:var(--s3);flex-wrap:wrap}
.jump a{font:500 13px/1 var(--sans);color:var(--ink-3);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent}
.jump a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.jump a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section{scroll-margin-top:64px}
.part{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:var(--s2)}

.hisword .wrap{margin-inline:auto}
.src{font:400 .78rem/1.6 var(--sans);color:var(--ink-3);margin-top:var(--s2)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s5);margin-top:var(--s4)}
.arc{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  font-family:var(--sans);font-weight:600;font-size:1.3rem;margin:var(--s4) 0}
.arc i{font-style:normal;color:var(--accent)}
button{font:500 13px/1 var(--sans);background:none;border:1px solid var(--stone-line);
  color:var(--ink-2);border-radius:2px;padding:7px 12px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--stone);color:var(--ink)}
button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

main{max-width:74rem;margin:0 auto;padding:0 var(--s4) 22vh}
section{padding:var(--s7) 0;border-bottom:1px solid var(--stone-line)}
section:last-of-type{border-bottom:0}
.wrap{max-width:var(--measure)}

/* ── Monocle 三段式層次:小紅 kicker → 粗襯線標題 → 斜體襯線導言 ── */
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:var(--s3)}
.eyebrow.inside{color:var(--stone)}

h1,h2,h3{font-family:var(--sans);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.8vw,4.3rem);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.2;margin-bottom:var(--s4);
  letter-spacing:-.025em}
h3{font-size:1.14rem;line-height:1.4;margin-bottom:var(--s2);letter-spacing:-.012em}
p{margin:0 0 var(--s3)}
.lead{font-family:var(--sans);font-weight:400;font-size:1.24rem;line-height:1.55;
  color:var(--ink-2);letter-spacing:-.012em}
.small{font-size:.84rem;color:var(--ink-3);line-height:1.6}

/* ── 圖 ── */
figure{margin:var(--s5) 0}
figure img{display:block;width:100%;height:auto;background:var(--cold)}
figure figcaption{font:400 .8rem/1.55 var(--sans);color:var(--ink-3);
  margin-top:10px;padding-top:8px;border-top:1px solid var(--stone-line);max-width:46em}
figure figcaption b{color:var(--stone);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:.72rem;display:block;margin-bottom:3px}
figure.bleed{margin-inline:calc(-1 * var(--s4))}
figure.bleed figcaption{margin-inline:var(--s4)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.duo figure{margin:0}
/* 首屏:引言與人像並置 */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s5);align-items:start}
.hero figure{margin:0;position:sticky;top:78px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:var(--s4)}
  .hero figure{position:static;order:-1}}

/* 引述:純文字,不配圖 —— 沒有修飾的引言讀起來像證詞 */
blockquote{margin:0 0 var(--s4);font-family:var(--sans);font-weight:500;
  font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.5;text-wrap:balance}
blockquote cite{display:block;margin-top:var(--s3);font:400 .8rem/1.6 var(--sans);
  font-style:normal;color:var(--ink-3);letter-spacing:.02em}
.voice,.hisword{background:var(--deep);color:#E4E9E7;margin:0 calc(-1 * var(--s4));
  padding:var(--s7) var(--s4)}
.voice h2,.hisword h2,.voice blockquote,.hisword blockquote{color:#F1F5F3}
.voice p,.hisword p{color:#AEBAB6}
.voice .small,.hisword .small{color:#8A9793}
.voice cite,.hisword cite{color:#8A9793}
.voice .eyebrow.inside,.hisword .eyebrow.inside{color:var(--accent-lit)}
.voice .eyebrow.inside::before,.hisword .eyebrow.inside::before{background:var(--accent-lit)}
.voice b,.hisword b{color:#FFF}
.voice .wrap{margin-inline:auto}

/* 數字 */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--stone-line);border:1px solid var(--stone-line);margin:var(--s4) 0}
.fig{background:var(--paper);padding:var(--s3) var(--s4)}
.fig b{display:block;font:600 2.05rem/1.1 var(--sans);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.fig span{display:block;font-size:.78rem;color:var(--ink-3);margin-top:6px;letter-spacing:.04em}
.fig.lamp b{color:var(--accent)}

.prog{height:6px;background:var(--stone-line);margin:var(--s4) 0 var(--s2);position:relative}
.prog i{display:block;height:100%;background:var(--accent);width:50%}
.prog+.small{display:flex;justify-content:space-between}

table{width:100%;border-collapse:collapse;font-size:.94rem;margin:var(--s3) 0}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--stone-line);
  vertical-align:top}
th{font:500 .76rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;padding-right:0}

/* 故事拍點 */
ol.beats{list-style:none;counter-reset:b;padding:0;margin:var(--s4) 0 0}
ol.beats li{counter-increment:b;position:relative;padding:0 0 var(--s4) 46px;
  border-left:1px solid var(--stone-line);margin-left:9px}
ol.beats li::before{content:counter(b);position:absolute;left:-10px;top:0;
  width:19px;height:19px;border-radius:50%;background:var(--paper);border:1px solid var(--stone);
  color:var(--stone);font:500 10px/17px var(--sans);text-align:center}
ol.beats li:last-child{border-left-color:transparent}
ol.beats li.key::before{background:var(--accent);border-color:var(--accent);color:var(--paper)}
ol.beats b{font-weight:500}

/* 四方意見 */
.views{display:grid;gap:var(--s2);margin-top:var(--s4)}
details{border:1px solid var(--stone-line);background:var(--paper)}
details[open]{border-color:var(--stone)}
summary{cursor:pointer;padding:var(--s3) var(--s4);display:flex;gap:var(--s3);
  align-items:baseline;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--stone);font:400 1.2rem/1 var(--sans)}
details[open] summary::after{content:"−"}
summary:hover{background:var(--cold)}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.role{font-family:var(--sans);font-weight:600;font-size:1.12rem}
.claim{font-size:.9rem;color:var(--ink-3);flex:1;min-width:0}
.body{padding:0 var(--s4) var(--s4);max-width:var(--measure)}
.body .pull{font-family:var(--sans);font-weight:500;font-size:1.2rem;line-height:1.5;
  border-left:2px solid var(--accent);padding-left:var(--s3);margin:var(--s3) 0}
.body ul{padding-left:1.1em;margin:0 0 var(--s3)}
.body li{margin-bottom:6px}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.tag{font:500 .72rem/1 var(--sans);letter-spacing:.06em;padding:5px 9px;
  border:1px solid var(--stone-line);color:var(--stone)}
.tag.no{border-color:var(--accent);color:var(--accent)}

/* 決策 */
.dec{border-left:2px solid var(--stone);padding-left:var(--s4);margin-bottom:var(--s5)}
.dec.open{border-left-color:var(--accent)}
.dec h3{margin-bottom:6px}
.status{font:500 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);display:block;margin-bottom:8px}
.dec.open .status{color:var(--accent)}

/* 調色盤示範 */
.pal{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s2);
  margin:var(--s4) 0}
.sw{border:1px solid var(--stone-line)}
.sw .chip{height:62px}
.sw p{margin:0;padding:9px 11px;font-size:.76rem;line-height:1.5;color:var(--ink-3)}
.sw p b{display:block;color:var(--ink);font-weight:500;font-size:.84rem}

footer{padding:var(--s6) 0 0;color:var(--ink-3);font-size:.84rem;line-height:1.7}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:var(--s6) 0}
  summary{flex-direction:column;gap:4px}
  summary::after{position:absolute;right:var(--s4)}
  summary{position:relative}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ══ 多頁版:首頁元件 ══════════════════════════════════ */
#bar #mark{font:600 13px/1 var(--sans);letter-spacing:.14em;color:var(--ink);
  text-transform:uppercase;text-decoration:none}
.jump a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* 全幅首屏 */
.hero-full{position:relative;padding:0;border-bottom:0;
  margin:0 calc(-1 * var(--s4)) var(--s7)}
.hero-full img{display:block;width:100%;height:clamp(340px,64vh,660px);object-fit:cover}
.hero-full .over{position:absolute;inset:auto 0 0 0;padding:var(--s6) var(--s4) var(--s5);
  background:linear-gradient(to top,rgba(20,16,10,.93) 0%,rgba(20,16,10,.80) 45%,rgba(20,16,10,0) 100%);
  color:#fff}
.hero-full .over h1{color:#fff;max-width:22ch}
.hero-full .over .lead{color:#E4DECD;max-width:44ch;margin-top:var(--s3)}
.hero-full .over .eyebrow{color:var(--accent-lit)}

.cta{display:inline-block;margin-top:var(--s4);font:600 14px/1 var(--sans);
  letter-spacing:.02em;background:var(--accent);color:#241B05;text-decoration:none;
  padding:14px 22px;border:0;transition:.15s}
.cta:hover{background:var(--accent-lit)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.progress-band .cta,.entries .cta{color:#04222D}

/* 語錄牆:大圖 + 短句,給沒耐心的人 */
.quotes{padding-top:0}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s4);margin-top:var(--s4)}
figure.qt{margin:0;display:flex;flex-direction:column}
figure.qt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
figure.qt figcaption{border-top:2px solid var(--ink);padding-top:var(--s3);margin-top:0}
figure.qt blockquote{font:500 1.06rem/1.45 var(--sans);letter-spacing:-.012em;
  color:var(--ink);margin:0 0 var(--s2)}
figure.qt cite{font:400 .76rem/1.5 var(--sans);font-style:normal;color:var(--ink-3);
  letter-spacing:.04em;display:block}

/* 進度帶 */
.progress-band{background:var(--cold);margin:0 calc(-1 * var(--s4));
  padding:var(--s7) var(--s4);border-bottom:0}
.progress-band .wrap{max-width:46em;margin-inline:auto}
.progress-band .prog{height:10px}

/* 入口卡 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s4);margin-top:var(--s4)}
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border-bottom:2px solid var(--stone-line);transition:.15s}
a.card:hover{border-bottom-color:var(--accent)}
a.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a.card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
a.card>div{padding:var(--s3) 0 var(--s4)}
a.card .k{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px}
a.card p{font-size:.94rem;line-height:1.55;color:var(--ink-2);margin:0}
a.card:hover .k{color:var(--ink)}

@media (max-width:640px){
  .hero-full .over{padding:var(--s5) var(--s4) var(--s4)}
  .hero-full img{height:clamp(300px,54vh,420px)}
}

/* 亮版首屏:文字在白底,圖在旁邊 —— 不用暗遮罩 */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s5);align-items:center;padding-top:var(--s6);border-bottom:0}
.hero-split .ht h1{max-width:20ch}
.hero-split .ht .lead{max-width:42ch;margin-top:var(--s3)}
.hero-split figure.hi{margin:0}
.hero-split figure.hi img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-split figure.hi figcaption{border-top:1px solid var(--stone-line)}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr;gap:var(--s4);padding-top:var(--s5)}
  .hero-split figure.hi{order:-1}
}