/* ourword.ai/podcast — editorial, paper-toned, legible at 320px and 2560px. */

:root{
  /* 腳本用它確認這份樣式表真的生效了。為什麼需要：腳本會做依賴樣式的 DOM
     替換（摘掉原生 audio controls、換上自己畫的控件）。樣式表沒到位時那些
     替換會把可用的控件換成看不見的東西——線上真出過一輪（讀者瀏覽器緩存裡是
     舊 CSS，配的是新 HTML）。取不到 ok 就別做那些替換。 */
  --css:ok;
  --bg:#f4f2ec; --bg-tint:#eae7de; --surface:#fffefa; --surface-2:#f9f7f1;
  --ink:#14120e; --ink-2:#3d3830; --muted:#6f6959; --faint:#9b9484;
  --rule:#e2ddd0; --rule-2:#cec8b8;
  --accent:#a83c1b; --accent-soft:#f2e3dc;
  --ai:#a83c1b; --biz:#1f5546; --cn:#5a3a86;
  --shadow:0 1px 2px rgba(20,18,14,.05), 0 8px 24px -16px rgba(20,18,14,.18);
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","Source Han Serif",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1320px;
  color-scheme:light;
}
/* 默認淺色，不跟隨系統。深色只在用戶點了切換之後出現（見下面的
   [data-theme=dark]）。紙感的淺色是這個站的默認長相，不該由系統設置決定。 */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#121110; --bg-tint:#1a1917; --surface:#1a1917; --surface-2:#211f1c;
  --ink:#f1eee6; --ink-2:#d3cdc1; --muted:#9b9488; --faint:#7d776c;
  --rule:#2b2925; --rule-2:#3a3732;
  --accent:#e2764e; --accent-soft:#33251e;
  --ai:#e2764e; --biz:#5fb69c; --cn:#b394e0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,44px)}

/* ---------------------------------------------------------------- masthead */
.mast{padding:clamp(26px,5vw,54px) 0 0}
/* 字標和右側入口同一行；baseline 對齊讓膠囊坐在字標的基線上而不是頂上。
   不換行：窄屏字標只有 ~130px，右側那幾項放得下。 */
.mast-top{display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.brand{display:block; flex:none}
.brand h1, .brand .wordmark{
  display:block; font-family:var(--serif); font-weight:700; margin:0;
  font-size:clamp(34px,6.4vw,60px); line-height:.98; letter-spacing:-.015em;
}
.brand .dot{color:var(--accent)}
/* 叫 .slogan 而不是 .tag：.tag 是卡片上的標籤小膠囊（帶邊框和底色），
   兩者同名會讓 masthead 的這行字莫名套上一個框。 */
/* slogan 是 .mast-top 的兄弟節點，獨佔一行。放回 .brand 裡會讓字標那一塊佔滿
   寬度，把右側入口擠到下一行去。 */
.slogan{margin:9px 0 0; color:var(--muted); font-size:13.5px; letter-spacing:.02em}
.mast-side{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  justify-content:flex-end; padding-bottom:4px}
.pill{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  border:1px solid var(--rule-2); border-radius:999px; font-size:12.5px;
  color:var(--ink-2); background:var(--surface); white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.pill:hover{border-color:var(--accent); color:var(--accent)}
.pill.ghost{background:transparent}
.stat{font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}

/* ------------------------------------------------------------------ toolbar */
.toolbar{
  position:sticky; top:0; z-index:30; margin-top:clamp(24px,4vw,40px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.toolbar-in{display:flex; align-items:center; gap:12px; padding:10px 0; flex-wrap:wrap}
.search{
  flex:1 1 240px; display:flex; align-items:center; gap:9px; min-width:0;
  height:38px; padding:0 14px; background:var(--surface);
  border:1px solid var(--rule-2); border-radius:999px;
}
.search:focus-within{border-color:var(--accent)}
.search svg{flex:none; width:15px; height:15px; opacity:.5}
.search input{
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:14px;
  color:var(--ink); outline:0;
}
.search input::placeholder{color:var(--faint)}
.search kbd{
  font-family:var(--mono); font-size:10.5px; color:var(--faint);
  border:1px solid var(--rule-2); border-radius:4px; padding:1px 5px;
}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.chip{
  height:30px; padding:0 12px; border:1px solid var(--rule-2); border-radius:999px;
  font-size:12.5px; color:var(--muted); background:var(--surface); white-space:nowrap;
  transition:all .15s;
}
.chip:hover{color:var(--ink); border-color:var(--rule-2)}
.chip[aria-pressed=true]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .n{font-family:var(--mono); font-size:10.5px; opacity:.55; margin-left:5px}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--rule-2); background:var(--surface); flex:none;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn svg{width:15px; height:15px}

/* --------------------------------------------------------------------- feed */
.feed{
  display:grid; gap:clamp(16px,2vw,24px); padding:clamp(24px,4vw,40px) 0 72px;
  grid-template-columns:repeat(auto-fill, minmax(268px,1fr));
  align-items:start;
}
.card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s, box-shadow .18s;
}
.card:hover{transform:translateY(-3px); border-color:var(--rule-2);
  box-shadow:0 2px 4px rgba(20,18,14,.06), 0 18px 40px -22px rgba(20,18,14,.32)}
.card.hero{grid-column:span 2}
@media (max-width:620px){ .card.hero{grid-column:span 1} }
.cover{position:relative; aspect-ratio:16/9; background:var(--bg-tint); overflow:hidden}
.card.hero .cover{aspect-ratio:2/1}
/* 不認 aspect-ratio 的瀏覽器（Safari 15 之前）上，封面會塌成 0 高——
   頁內播放器就是踩了這一類的坑，這裡補上同一個 padding-top 兜底。 */
@supports not (aspect-ratio:16/9){
  .cover{padding-top:56.25%}
  .card.hero .cover{padding-top:50%}
  .cover img,.cover .fallback{position:absolute; top:0; right:0; bottom:0; left:0}
}
.cover img{width:100%; height:100%; object-fit:cover}
.cover .fallback{
  width:100%; height:100%; display:grid; place-items:center; font-family:var(--serif);
  font-size:26px; color:var(--faint); background:
    linear-gradient(135deg, var(--bg-tint), var(--surface-2));
}
.cover .dur{
  position:absolute; right:8px; bottom:8px; font-family:var(--mono); font-size:11px;
  padding:2px 7px; border-radius:5px; color:#fff; background:rgba(10,9,7,.72);
  backdrop-filter:blur(3px);
}
.card-body{padding:15px 17px 17px; display:flex; flex-direction:column; gap:9px; flex:1}
.kicker{display:flex; align-items:baseline; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.kicker .src{font-weight:600; color:var(--ai)}
.kicker[data-cat=biz] .src{color:var(--biz)}
.kicker[data-cat=cn] .src{color:var(--cn)}
.kicker .date{font-family:var(--mono); color:var(--faint); margin-left:auto; letter-spacing:.04em}
.card h2{
  font-family:var(--serif); font-weight:700; margin:0; letter-spacing:-.01em;
  font-size:19px; line-height:1.34;
}
.card.hero h2{font-size:clamp(22px,2.4vw,28px)}
.card p.dek{margin:0; color:var(--ink-2); font-size:14px; line-height:1.66;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.card.hero p.dek{-webkit-line-clamp:3; font-size:15px}
.card-foot{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  /* 10.5px 裡混著中文（要點 / 金句），手機上吃力；臺名和日期那行是大寫拉丁+數字，
     11px 站得住，不動。 */
  font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.03em;
}
.badge{display:inline-flex; align-items:center; gap:4px}
.badge b{color:var(--ink-2); font-weight:600}
.tag{
  font-family:var(--sans); font-size:12px; letter-spacing:0; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--rule); border-radius:5px; padding:1px 7px;
}
.empty{grid-column:1/-1; padding:80px 0; text-align:center; color:var(--muted)}
.empty b{display:block; font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:8px}

/* -------------------------------------------------------------- episode page */
/* 只覆蓋上內邊距。寫成 padding 簡寫會把 .wrap 的左右內邊距一起抹成 0，
   桌面端被 max-width + margin:auto 掩蓋，移動端就直接貼到屏幕邊緣。 */
.ep{padding-top:clamp(26px,4vw,44px); max-width:1180px; margin:0 auto}
.crumb{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); margin-bottom:26px; flex-wrap:wrap}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--rule-2)}
.ep-grid{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:940px){ .ep-grid{grid-template-columns:minmax(0,1fr)} }
/* 桌面端最後一塊是 .prevnext，它自帶 72px 下邊距；單列時 aside 排到最後，
   誰都沒給它下邊距，於是那張"這篇是怎麼來的"卡片緊貼頁腳的分隔線。 */
.ep{padding-bottom:0}
@media (max-width:940px){ .ep{padding-bottom:clamp(48px,9vw,72px)} }
.ep-head{border-bottom:1px solid var(--rule); padding-bottom:24px; margin-bottom:30px}
.ep-head .kicker{margin-bottom:14px}
.ep-head h1{
  font-family:var(--serif); font-weight:700; margin:0 0 16px;
  font-size:clamp(27px,4.4vw,43px); line-height:1.2; letter-spacing:-.018em;
}
.dek-lead{font-size:clamp(16px,1.6vw,18.5px); line-height:1.72; color:var(--ink-2); margin:0}
.ep-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:20px}

.section{margin:0 0 40px}
.section > h2{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 0 18px; padding-bottom:9px; border-bottom:1px solid var(--rule);
  font-weight:500;
}
.why{
  background:var(--accent-soft); border-left:2px solid var(--accent);
  padding:15px 18px; border-radius:0 8px 8px 0; font-size:15px; line-height:1.7; color:var(--ink-2);
}
.point{display:grid; grid-template-columns:66px minmax(0,1fr); gap:16px; padding:0 0 26px}
@media (max-width:560px){ .point{grid-template-columns:minmax(0,1fr); gap:7px} }
.ts{
  font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:3px;
  border-bottom:1px dotted transparent; justify-self:start; white-space:nowrap;
}
a.ts:hover{border-bottom-color:var(--accent)}
.point h4{font-family:var(--serif); font-size:19px; font-weight:700; margin:0 0 7px; line-height:1.36}
.point .body{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.78}
.point .spk{display:block; margin-top:7px; font-size:12px; color:var(--faint)}

.quote{
  border:1px solid var(--rule); border-radius:12px; background:var(--surface);
  padding:19px 21px; margin:0 0 14px;
}
.quote .raw{
  font-family:var(--serif); font-size:17.5px; line-height:1.62; margin:0 0 12px;
  color:var(--ink); font-style:normal;
}
.quote .raw::before{content:"“"; color:var(--accent); margin-right:1px}
.quote .raw::after{content:"”"; color:var(--accent)}
.quote .zh{margin:0; font-size:14.5px; line-height:1.72; color:var(--ink-2);
  padding-top:12px; border-top:1px solid var(--rule)}
/* baseline 而不是 center：人名是 sans、時間戳是 mono，兩種字體的字形高度不同，
   居中對齊後兩行文字的基線是錯開的（用戶指出來的）。 */
.quote .attrib{display:flex; align-items:baseline; gap:10px; margin-top:13px;
  font-size:12px; color:var(--faint); font-family:var(--mono)}
.quote .attrib b{font-family:var(--sans); color:var(--ink-2); font-weight:600; letter-spacing:0}
/* 全局 .ts 帶 padding-top:3px——那是給要點網格用的（時間戳要和小標題的第一行
   對齊）。在署名這一行裡它把時間戳往下推了 3px，人名和時間就錯位了。
   改容器的 align-items 治不了：padding 會把基線一起推下去。 */
.quote .attrib .ts{padding-top:0}

table.facts{width:100%; border-collapse:collapse; font-size:14.5px}
table.facts td{padding:11px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
table.facts tr:last-child td{border-bottom:0}
table.facts td.k{color:var(--muted); width:42%}
table.facts td.v{font-weight:600; font-variant-numeric:tabular-nums}
table.facts td.t{text-align:right; width:64px; white-space:nowrap}

dl.terms{margin:0; display:grid; gap:13px}
dl.terms > div{padding-bottom:13px; border-bottom:1px solid var(--rule)}
dl.terms > div:last-child{border-bottom:0; padding-bottom:0}
dl.terms dt{font-weight:600; font-size:15px; margin-bottom:3px}
dl.terms dt span{color:var(--muted); font-weight:400; font-size:13.5px; margin-left:7px}
dl.terms dd{margin:0; color:var(--ink-2); font-size:14px; line-height:1.68}

/* ------------------------------------------------------------------- aside */
.aside{position:sticky; top:64px; display:grid; gap:22px; font-size:13.5px}
@media (max-width:940px){ .aside{position:static} }
.panel{border:1px solid var(--rule); border-radius:12px; background:var(--surface); padding:16px 17px}
.panel h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px; font-weight:500;
}
.panel .row{display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:var(--ink-2)}
.panel .row span:first-child{color:var(--muted); flex:none}
.panel .row span:last-child{text-align:right; font-variant-numeric:tabular-nums}
.panel a.row:hover{color:var(--accent)}
.panel .note{color:var(--faint); font-size:12px; line-height:1.6; margin:11px 0 0}
/* 收聽指南是整句話，不是鍵值對。.panel .row 的右對齊是給「5 條」這種短值用的，
   長句右對齊會留下參差不齊的左邊緣。這裡改成標籤在上、正文在下，一律左對齊。 */
.guide{display:grid; gap:16px}
.guide > div{display:grid; gap:5px}
.guide .k{font-size:12.5px; color:var(--muted)}
.guide p{margin:0; font-size:15px; line-height:1.78; color:var(--ink-2); text-align:left}
audio{width:100%; margin-top:4px; height:34px}
.toc{display:grid; gap:1px}
.toc a{display:flex; gap:9px; padding:5px 0; color:var(--muted); font-size:13px; line-height:1.5}
.toc a:hover{color:var(--accent)}
.toc a .t{font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; padding-top:2px}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:48px 0 72px;
  padding-top:26px; border-top:1px solid var(--rule)}
@media (max-width:620px){ .prevnext{grid-template-columns:1fr} }
.prevnext a{border:1px solid var(--rule); border-radius:12px; padding:15px 17px; background:var(--surface)}
.prevnext a:hover{border-color:var(--accent)}
.prevnext .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.prevnext strong{display:block; margin-top:6px; font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.4}
.prevnext .r{text-align:right}

/* ------------------------------------------------------------------ sources */
.src-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  padding:8px 0 72px}
.src-card{border:1px solid var(--rule); border-radius:12px; background:var(--surface); padding:17px 18px;
  display:flex; flex-direction:column; gap:9px}
.src-card h3{font-family:var(--serif); font-size:18px; margin:0; font-weight:700}
.src-card p{margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.65}
.src-card .meta{margin-top:auto; padding-top:11px; border-top:1px solid var(--rule);
  display:flex; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.dead{opacity:.5}
h1.sec-title, h2.sec-title, .sec-title{font-family:var(--serif);
  font-size:clamp(20px,2.6vw,26px); font-weight:700; margin:38px 0 16px;
  letter-spacing:-.01em}
.empty h1{margin:0; font-size:inherit; font-weight:inherit}
.lede{max-width:66ch; color:var(--ink-2); font-size:15.5px; line-height:1.75; margin:0 0 8px}

/* ------------------------------------------------------------------ 更新日誌 */
.evlist{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:1px}
.ev{display:grid; grid-template-columns:88px 44px minmax(0,1fr) auto; gap:12px;
  align-items:baseline; padding:13px 0; border-bottom:1px solid var(--rule)}
@media (max-width:640px){
  .ev{grid-template-columns:76px minmax(0,1fr); gap:4px 10px}
  .ev-who{grid-column:2}
  .ev-score{grid-column:2; justify-self:start}
  .ev-why{grid-column:1/-1}
}
.ev-when{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.ev-what{font-size:12px; font-weight:600}
.ev.add .ev-what{color:var(--biz)}
.ev.drop .ev-what{color:var(--accent)}
.ev.down .ev-what{color:var(--muted)}
.ev-who{font-family:var(--serif); font-size:16px; font-weight:700}
.ev-score{font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap}
/* 收錄分來自標題與分集說明，還沒有任何一篇成稿過閘門——必須讓讀者看出區別 */
.ev-flag{font-family:var(--sans); font-style:normal; font-size:10px; font-weight:600;
  margin-left:6px; padding:1px 5px; border:1px solid var(--rule); border-radius:3px;
  color:var(--muted)}
.ev-why{grid-column:3/-1; font-size:13.5px; color:var(--ink-2); line-height:1.6}
@media (max-width:640px){ .ev-why{grid-column:1/-1} }

/* -------------------------------------------------------------------- share */
/* 組件自己聲明完整的排版，不從容器繼承 text-transform / letter-spacing：
   .kicker 是 uppercase + .08em 字距，繼承過來會把"分享"兩個字撐變形。
   在容器裡反覆覆蓋是治症狀，讓組件免疫才是治因。 */
.share-btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 11px 5px 9px; border:1px solid var(--rule); border-radius:999px;
  background:transparent; color:var(--muted); font:inherit; font-size:12px;
  font-weight:600; line-height:1.4; text-transform:none; letter-spacing:normal;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:color .15s, border-color .15s, background .15s}
.share-btn svg{width:14px!important;height:14px!important;max-width:14px;max-height:14px;flex:none;display:block;overflow:visible}
.share-btn:hover{color:var(--accent); border-color:var(--accent)}
.share-btn:active{transform:translateY(1px)}
/* 日期已經用 margin-left:auto 頂到行尾，分享跟在它後面只需要一點間距。
   窄到放不下三個（實測 310px：節目名 120 + 日期 80 + 按鈕 66 超過可用寬度）時
   允許換行，讓按鈕掉到第二行——否則 flex 會去壓縮前兩個，把節目名和日期都
   擠成兩行。日期本身一律不折字。 */
.kicker .share-btn{margin-left:12px}
.ep-head .kicker{align-items:center; flex-wrap:wrap; row-gap:8px}
.ep-head .kicker .date{white-space:nowrap}
.ep-head .kicker .src{min-width:0}
.page-head{display:flex; align-items:baseline; gap:16px; justify-content:space-between}
/* .toolbar-in 是 row + wrap：margin-left:auto 在桌面把它推到同一行右端，
   在手機上換行後同樣貼右——不需要額外的斷點覆蓋 */
.toolbar-in .share-btn{margin-left:auto; flex:none}

.toast{position:fixed; left:50%; bottom:26px; z-index:60; max-width:min(92vw,420px);
  transform:translate(-50%,14px); opacity:0; pointer-events:none;
  padding:11px 16px; border-radius:10px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink); font-size:13px;
  line-height:1.5; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.18);
  transition:opacity .18s ease, transform .18s ease}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------ 頁內播放器 */
/* 放正文第一屏、佔滿正文列寬：播放器是為時間戳服務的，側欄 264px 看不了視頻。
   音頻始終在，視頻是加分項——YouTube 放不出來時讀者不該什麼都沒有。

   長相跟站上其他卡片同一族：1px --rule 描邊、12px 圓角、--surface 底，
   時長徽標直接複用首頁卡片的 .dur，小標用 .panel h4 那套 mono 字。 */
.player{
  margin:0 0 32px; border:1px solid var(--rule); border-radius:12px;
  background:var(--surface); overflow:hidden; box-shadow:var(--shadow);
}

/* 16:9 一律用 padding-top 百分比撐，**不用 aspect-ratio**：給 img 寫 height
   屬性等於指定了 height，兩邊都定死時 aspect-ratio 不生效，16:9 的框會退回
   4:3，露出 YouTube 縮略圖自帶的黑邊——線上就是這麼醜起來的。padding 方案
   沒有這個坑，也沒有兼容門檻。同理絕對定位寫全 top/right/bottom/left，
   不寫 inset（Safari 14.1 之前不認，認不出就掉到靜態位置去）。 */
.video-facade{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
}
/* 作者寫的 display 永遠贏過瀏覽器默認的 [hidden]{display:none}——不是特異性
   問題，是作者樣式表本來就排在 UA 樣式表後面。凡是會帶 hidden 屬性出場、
   或者被腳本 .hidden=true 藏起來的元素，都得自己補這一條。
   線上後果：點播放之後假門根本沒藏起來，.vwrap 加在它旁邊，播放器卡片從
   192px 變成 381px，整頁往下跳 189px。 */
.video-facade[hidden]{display:none}
.video-facade .frame{
  position:relative; display:block; width:100%; padding-top:56.25%;
  background:var(--bg-tint); overflow:hidden;
}
.video-facade .frame img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.video-facade:hover .frame img{transform:scale(1.028)}
.video-facade .frame::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(rgba(10,9,7,0) 45%, rgba(10,9,7,.5));
}
/* 圈和三角都在內聯 SVG 裡（見 build.py 的 PLAY_SVG），這裡只管定位和動效。
   為什麼不用 CSS 畫：CSS 萬一沒加載上，空 span 就徹底看不見，讀者看不出這張
   圖能點——線上真這樣過一輪。SVG 零 CSS 也在。 */
.video-facade .play{
  position:absolute; top:50%; left:50%; width:62px; height:62px; z-index:1;
  margin:-31px 0 0 -31px; line-height:0;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.34));
  transition:transform .16s ease;
}
.video-facade .play svg{width:62px; height:62px; display:block}
.video-facade:hover .play{transform:scale(1.06)}
.video-facade:hover .play circle{fill:var(--accent)}
.video-facade:active .play{transform:scale(.95)}

/* 音頻那一欄。有視頻時它是 hidden 的，只在視頻放不出來時由腳本放出來。 */
.player .strip{padding:12px 14px; background:var(--surface-2)}
.player .video-facade + .strip{border-top:1px solid var(--rule)}
.player .strip .afallback{display:none}
.player .strip.fellback .afallback{
  display:block; margin:0 0 10px; color:var(--muted);
  font-size:12.5px; line-height:1.6;
}
.player .strip audio{width:100%; height:36px}   /* 腳本沒跑時的原生兜底 */

/* 自己畫的音頻控件：圓形播放鍵 + 進度軌 + mono 時碼。
   原生 controls 在每個平臺長得都不一樣，放在這張卡里像貼上去的。 */
.aui{display:flex; align-items:center; gap:13px}
/* 同上。這一條更隱蔽：.aui 是帶著 hidden 出場的（漸進增強，腳本跑起來才對調），
   而 display:flex 讓它一直可見——於是腳本跑起來之前，自繪控件和原生 controls
   同時顯示在 150 多個只有音頻的頁面上。 */
.aui[hidden]{display:none}
.aplay{
  flex:none; position:relative; width:38px; height:38px; border-radius:50%;
  background:var(--accent); border:0; cursor:pointer;
  transition:transform .14s ease, filter .14s ease;
}
.aplay:hover{transform:scale(1.06)}
.aplay:active{transform:scale(.95)}
/* 三角和暫停條都用 border/背景畫，不用字形——字形在各系統裡基線和大小不一，
   還會被當成 emoji 上色。 */
.aplay::before,.aplay::after{content:""; position:absolute; top:50%; left:50%}
.aplay::before{
  margin:-7px 0 0 -4px; width:0; height:0; border-style:solid;
  border-width:7px 0 7px 11px; border-color:transparent transparent transparent #fff;
}
.aplay::after{display:none}
.aui.playing .aplay::before{
  margin:-7px 0 0 -6px; width:4px; height:14px; border:0; background:#fff;
}
.aui.playing .aplay::after{
  display:block; margin:-7px 0 0 2px; width:4px; height:14px; background:#fff;
}
.abar{
  flex:1; min-width:0; height:22px; position:relative; cursor:pointer;
  touch-action:none;                    /* 拖進度時別觸發頁面滾動 */
}
.abar::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:3px;
  margin-top:-1.5px; border-radius:999px; background:var(--rule-2);
}
.afill{
  position:absolute; top:50%; left:0; width:0; height:3px; margin-top:-1.5px;
  border-radius:999px; background:var(--accent);
}
.afill::after{
  content:""; position:absolute; top:50%; right:-5px; width:10px; height:10px;
  margin-top:-5px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 2px var(--surface-2);
}
.abar:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.atime{
  flex:none; font-family:var(--mono); font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.atime .asep{margin:0 4px; color:var(--rule-2)}
.atime .atot{color:var(--faint)}

/* 點開之後：YT.Player 會把給它的元素**換成** iframe，換掉之後 class 不一定
   還在，所以尺寸交給外層，別指望 iframe 自己帶樣式。 */
.vwrap{position:relative; width:100%; padding-top:56.25%; background:#000}
.vwrap>iframe,.vwrap>div{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; border:0;
}
/* 放不出來時封面會被放回來，並改成"去 YouTube 打開"。加個角標，
   不然讀者點下去突然跳出站，沒有預告。 */
.video-facade.offsite .frame::before{
  content:"YouTube ↗"; position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:3px 8px; border-radius:5px; color:#fff; background:rgba(10,9,7,.72);
}

/* ---------------------------------------------------------------- 加載更多 */
.more{display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:0 0 72px}
.more button{
  padding:11px 26px; border:1px solid var(--rule-2); border-radius:999px;
  background:var(--surface); color:var(--ink-2); font-size:14px;
  transition:border-color .15s, color .15s}
.more button:hover{border-color:var(--accent); color:var(--accent)}
.more .note{margin:0; max-width:44ch; text-align:center; color:var(--faint);
  font-size:13px; line-height:1.6}

/* --------------------------------------------------------------------- foot */
.family{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px;
  margin:0 0 18px; font-size:13.5px; font-weight:600; letter-spacing:.02em}
.family a{color:var(--ink-2)}
.family a.on,.family a[aria-current="page"]{color:var(--ink)}
.family a:hover{color:var(--accent)}
.family-sep{color:var(--faint); font-weight:400}
.foot{border-top:1px solid var(--rule); padding:34px 0 54px; color:var(--faint); font-size:12.5px}
.foot-in{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap; align-items:baseline}
.foot a{color:var(--muted)} .foot a:hover{color:var(--accent)}
.foot .links{display:flex; gap:16px; flex-wrap:wrap}
@media print{ .toolbar,.aside,.prevnext,.icon-btn{display:none} body{background:#fff} }