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

:root{
  --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}
.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;
  font-family:var(--mono); font-size:10.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:11px; 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)} }
.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)}
.quote .attrib{display:flex; align-items:center; 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}

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)}

/* --------------------------------------------------------------------- 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} }