/* ══════════════════════════════════════════════════════════════
   切片 Qiepian —— weizhichao.info 专属主题
   所有样式都在这一个文件里。改颜色、改字号，只改这里的变量即可。
   ══════════════════════════════════════════════════════════════ */

/* ── 0. 自托管中文字体 ─────────────────────────────────────────
   不自托管的话，正文宋体全看读者电脑上装了什么。Windows 上多半
   掉到 SimSun，跟设计稿是两个东西。所以把用到的字切成子集自己放。

   字体：Noto Serif SC / Noto Sans SC，SIL Open Font License 1.1，
   许可原文在 assets/fonts/LICENSE.txt。

   正文是黑体，标题是宋体。分开切能省不少：
     黑体 400  全站正文        4134 字   559 KB
     黑体 700  加粗和小标题    2468 字   338 KB
     宋体 700  只有标题        2468 字   438 KB

   font-display: swap —— 字体还没到时先用系统字排版，到了再换，
   读者不会对着空白页等。
   ─────────────────────────────────────────────────────────── */
/* 宋体只剩标题在用了（全站所有 --f-serif 的地方都是 700），
   所以常规字重那一份不用再装，省 731 KB。 */
@font-face{
  font-family: "Qiepian Serif";
  src: url("../fonts/qiepian-serif-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Qiepian Sans";
  src: url("../fonts/qiepian-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Qiepian Sans";
  src: url("../fonts/qiepian-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── 1. 设计变量 ───────────────────────────────────────────── */
:root{
  /* 颜色 */
  --paper:      #F2EFE6;   /* 页面底色，暖纸 */
  --surface:    #FBFAF3;   /* 卡片、正文区底色 */
  --surface-2:  #E8E4D6;   /* 次级底色 */
  --ink:        #17150F;   /* 主文字、边框 */
  --ink-body:   #241F14;   /* 正文（比主文字略暖，长时间读更柔和）*/
  --ink-2:      #55503F;   /* 次级文字 */
  --muted:      #847E6B;   /* 弱化文字、元信息 */
  --rule:       #DCD7C7;   /* 细线 */
  --rule-soft:  #E7E2D4;
  --accent:     #C4265E;   /* 品红：当前位置、期号牌、链接 */
  --gold:       #C9A227;   /* 芥末金：列表标记、引用块、书封投影 */
  --yt:         #CC0000;   /* YouTube 红：全站只用在「去看视频」这一个动作上 */
  --bili:       #00A1D6;   /* B 站蓝：老视频的「去 B 站看」*/

  /* 字体。前面是自托管的子集，后面是万一没加载出来的退路。 */
  --f-serif: "Qiepian Serif", "Noto Serif SC", "Source Han Serif SC",
             "Songti SC", "STSong", "SimSun", Georgia, serif;
  --f-sans:  "Qiepian Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, sans-serif;
  --f-mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono",
             "Noto Sans SC", "PingFang SC", monospace;

  /* 尺寸 */
  --read-width: min(100% - 2.5rem, 40rem);   /* 阅读栏宽，约 36 个汉字 */
  --page-width: min(100% - 2.5rem, 72rem);
  --text-width: min(100% - 2.5rem, 46rem);
}

/* ── 2. 基础 ───────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16.5px;
  line-height: 1.85;
  /* 不设 -webkit-font-smoothing。antialiased 会把渲染从次像素切成灰度，
     西文无所谓，中文会明显变细发虚。 */
  text-rendering: optimizeLegibility;
}

img, video, iframe{ max-width: 100%; height: auto; }
img{ display: block; }

a{ color: var(--accent); text-underline-offset: .22em; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 700;
  font-style: normal;
  line-height: 1.38;
  text-wrap: balance;
}

p, ul, ol, figure, blockquote, pre, table{ margin: 0; }

.screen-reader-text{
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--surface); padding: .6rem 1rem;
}
.skip-link:focus{ left: 0; }

/* ── 3. 页头 ───────────────────────────────────────────────── */
.topbar{
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em;
}
/* 现在这条只剩 YouTube 一个入口，就让它靠左当这条的正主，别悬在右边 */
.topbar__in{
  width: var(--page-width); margin-inline: auto;
  display: flex; justify-content: flex-start; align-items: center;
  gap: 1rem; padding: .5rem 0; flex-wrap: wrap;
}
.topbar a{ color: var(--gold); text-decoration: none; }
.topbar a:hover{ text-decoration: underline; }

.masthead{ border-bottom: 2px solid var(--ink); background: var(--paper); }
.masthead__in{
  width: var(--page-width); margin-inline: auto;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .95rem 0 .65rem; flex-wrap: wrap;
}
.brand{ display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand__name{ font-family: var(--f-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.brand__sub{ font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em; color: var(--muted); }

/* 导航有两种来源：后台建的菜单（输出 ul>li>a）和代码里的兜底（直接是 a）。
   两种都要排成一行，所以 .nav 和它里面的 ul 都设成 flex。 */
.nav{ display: flex; flex-wrap: wrap; gap: .3rem 1.05rem; }
.nav__list{
  display: flex; flex-wrap: wrap; gap: .3rem 1.05rem;
  list-style: none; margin: 0; padding: 0;
}
.nav a{ font-size: .82rem; color: var(--ink-2); text-decoration: none; padding-bottom: .12rem; }
.nav a:hover{ color: var(--ink); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav__item--current > a{
  color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-toggle{
  display: none; background: none; border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer;
  /* 换成拉丁字母之后按等宽标签的样子排：字号收小、字距拉开，
     跟顶条那行 YouTube 链接、书带落款是同一套语汇 */
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  padding: .38rem .72rem;
}
.nav-toggle:hover{ border-color: var(--ink); }
@media (max-width: 720px){
  .nav-toggle{ display: block; }
  .nav{ display: none; width: 100%; flex-direction: column; gap: 0; padding-top: .6rem; }
  .nav.is-open{ display: flex; }
  .nav a{ padding: .5rem 0; border-top: 1px solid var(--rule-soft); }
}

/* ── 4. 通用版心 ───────────────────────────────────────────── */
.wrap{ width: var(--page-width); margin-inline: auto; }
.wrap--text{ width: var(--text-width); margin-inline: auto; }
main{ display: block; padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(2.5rem, 6vw, 4rem); }
/* 门头自带上边距，main 再叠一层就多了——页眉和大标题之间凭空多出 26px。
   凡是以门头开场的页面（首页、关于页），把 main 这一层撤掉。
   不支持 :has() 的老浏览器保持原样，只是松一点，不会坏。 */
main:has(> .hero){ padding-block-start: 0; }

.eyebrow{
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.badge{
  display: inline-block; background: var(--accent); color: #fff;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em;
  padding: .24rem .52rem; transform: rotate(-3deg);
}
.tag{
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em;
  border: 1px solid var(--rule); padding: .16rem .46rem; color: var(--ink-2);
  text-decoration: none;
}
.tag:hover{ border-color: var(--accent); color: var(--accent); }

.btn{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; padding: .42rem .95rem;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  text-decoration: none;
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn--yt{ background: var(--yt); border-color: var(--yt); color: #fff; }
.btn--yt:hover{ background: #a80000; border-color: #a80000; color: #fff; }

/* ── 5. 阅读页（最重要的一页）─────────────────────────────── */
.reading{ background: var(--surface); border-bottom: 1px solid var(--rule); }
.progress{ height: 3px; background: var(--rule-soft); position: sticky; top: 0; z-index: 20; }
.progress__bar{ height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

.article__head{
  width: var(--read-width); margin: 0 auto;
  padding: clamp(1.6rem,4vw,2.6rem) 0 1.3rem;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .7rem;
}
.article__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
.article__title{ font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.42; }
.article__dek{ font-size: .88rem; line-height: 1.8; color: var(--ink-2); }

.article__body{
  width: var(--read-width); margin-inline: auto;
  padding-block: clamp(1.6rem,4vw,2.4rem);
}

/* 正文排版——整套设计里最要紧的一段。
   正文用黑体不用宋体：宋体是为纸设计的，纸上墨会微微洇开，细横画正好；
   屏幕上没这回事，细横画要么不足一个像素被渲染成灰，要么被凑成一个像素
   而生硬，整段读下来发虚。中文屏幕正文用黑体是主流做法。
   标题仍然是宋体——几十像素的字号，宋体的笔锋正好发挥，杂志感在标题上。 */
.prose{
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 2.0;
  color: var(--ink-body);
}
.prose > p{ margin: 0 0 1.15em; }
.prose h2, .prose h3{
  font-family: var(--f-sans); font-weight: 700; color: var(--ink);
  font-size: 1.1em; line-height: 1.5;
  margin: 2.4em 0 .85em; padding-bottom: .35em;
  border-bottom: 2px solid var(--ink);
}
.prose h4, .prose h5, .prose h6{
  font-family: var(--f-sans); font-weight: 700; color: var(--accent);
  font-size: 1em; line-height: 1.6; margin: 1.9em 0 .6em;
}
.prose ul{ margin: 1.25em 0; padding-left: 0; list-style: none; }
.prose ul > li{
  position: relative; padding-left: 1.45em;
  margin-bottom: .5em; line-height: 1.8; font-size: .97em;
}
.prose ul > li::before{
  content: ""; position: absolute; left: .35em; top: .82em;
  width: .4em; height: .4em; background: var(--gold);
}
.prose ul > li > a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.prose ul > li > a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.prose ol{ margin: 1.25em 0 1.25em 1.4em; }
.prose ol > li{ margin-bottom: .5em; line-height: 1.8; }
.prose blockquote, .prose pre{
  margin: 1.7em 0; padding: .15em 0 .15em 1.15em;
  border-left: 3px solid var(--gold);
  color: var(--ink-2); font-family: inherit; font-size: .97em; line-height: 1.95;
  white-space: pre-wrap; background: none;
}
.prose code{
  font-family: var(--f-mono); font-size: .88em;
  background: var(--surface-2); padding: .1em .35em;
}
.prose pre code{ background: none; padding: 0; }
.prose img{ margin: 1.8em auto; }
.prose figure{ margin: 1.8em 0; }
.prose figure img{ margin: 0 auto .6em; }
.prose figcaption{
  font-family: var(--f-sans); font-size: .8em; line-height: 1.7;
  color: var(--muted); text-align: center; padding: 0 1em;
}
.prose hr{ border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.prose a{ color: var(--accent); }
.prose strong, .prose b{ color: var(--ink); font-weight: 700; }
.prose iframe{ display: block; width: 100%; aspect-ratio: 16/9; height: auto; margin: 1.8em 0; border: 0; background: var(--ink); }
.prose table{ width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: .92em; }
.prose th, .prose td{ border: 1px solid var(--rule); padding: .5em .7em; text-align: left; }
.prose th{ background: var(--surface-2); font-family: var(--f-sans); }

@media (max-width: 640px){
  .prose{ font-size: 16.2px; line-height: 1.95; }
}

/* 播放器的样式在文件末尾「假封面」那一节 */
.btn--bili{ background: var(--bili); border-color: var(--bili); color: #fff; }
.btn--bili:hover{ background: #0085b2; border-color: #0085b2; color: #fff; }

.cta-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.cta-row .hint{ font-family: var(--f-mono); font-size: .58rem; color: var(--muted); letter-spacing: .08em; }

/* 文章底部 */
.article__foot{
  width: var(--read-width); margin: 0 auto;
  padding-top: 1.6rem; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 1rem;
}
.taglist{ display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.adjacent{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 620px){ .adjacent{ grid-template-columns: 1fr; } }
.adjacent a{
  background: var(--surface); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .25rem; text-decoration: none;
}
.adjacent a:hover{ background: var(--surface-2); }
.adjacent .dir{ font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; color: var(--muted); }
.adjacent .t{ font-size: .84rem; line-height: 1.55; color: var(--ink); }
.adjacent .next{ text-align: right; }

/* ── 6. 列表 / 栏目页 ─────────────────────────────────────── */
.page-head{
  width: var(--page-width); margin-inline: auto;
  padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: .5rem;
}
.page-head h1{ font-size: clamp(1.4rem, 3.6vw, 2rem); }
.page-head .desc{ font-size: .92rem; color: var(--ink-2); max-width: 40em; }

.filters{ display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.1rem 0; }
.filters a{
  font-size: .78rem; padding: .3rem .7rem; border: 1px solid var(--rule);
  color: var(--ink-2); background: var(--surface); text-decoration: none;
}
.filters a:hover{ border-color: var(--ink); color: var(--ink); }
.filters a.is-on{ background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.filters .n{ font-family: var(--f-mono); font-size: .62rem; opacity: .7; margin-left: .3rem; }

.cardgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.1rem; }
@media (max-width: 900px){ .cardgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cardgrid{ grid-template-columns: 1fr; } }

.card{ display: flex; flex-direction: column; gap: .45rem; }
.card__thumb{ position: relative; display: block; background: var(--surface-2); }
.card__thumb img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card__dur{
  position: absolute; right: .3rem; bottom: .3rem;
  background: rgba(23,21,15,.82); color: #fff;
  font-family: var(--f-mono); font-size: .56rem; padding: .1rem .32rem;
}
.card__no{ font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em; color: var(--accent); }
.card__title{ font-size: .88rem; line-height: 1.55; font-weight: 500; font-family: var(--f-sans); font-style: normal; }
.card__title a{ color: var(--ink); text-decoration: none; }
.card__title a:hover{ color: var(--accent); }
.card__meta{ font-family: var(--f-mono); font-size: .58rem; color: var(--muted); letter-spacing: .05em; }

/* 纯文字列表（老文章用这个更清爽） */
.postlist{ display: flex; flex-direction: column; }
.postlist__item{
  display: grid; grid-template-columns: 6rem 1fr auto; gap: .9rem;
  align-items: baseline; padding: .85rem 0; border-top: 1px solid var(--rule-soft);
}
.postlist__item:first-child{ border-top: none; }
@media (max-width: 620px){
  .postlist__item{ grid-template-columns: 1fr auto; }
  .postlist__date{ display: none; }
}
.postlist__date{ font-family: var(--f-mono); font-size: .66rem; color: var(--muted); }
.postlist__title{ font-size: .95rem; line-height: 1.55; font-family: var(--f-sans); font-style: normal; }
.postlist__title a{ color: var(--ink); text-decoration: none; }
.postlist__title a:hover{ color: var(--accent); }
.postlist__cat{ font-family: var(--f-mono); font-size: .6rem; color: var(--gold); letter-spacing: .08em; white-space: nowrap; }

.pagination{ display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding-top: 2.2rem; }
.pagination .page-numbers{
  font-family: var(--f-mono); font-size: .76rem; padding: .35rem .7rem;
  border: 1px solid var(--rule); color: var(--ink-2); text-decoration: none;
}
.pagination .page-numbers.current{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .page-numbers:hover{ border-color: var(--ink); }

/* ── 7. 页脚（版式在文件末尾「首页」那一节）───────────────── */
/* :not(.btn) 很重要：不然会把红色 YouTube 按钮的白字染回墨色 */
.site-foot a:not(.btn){ color: var(--ink-2); text-decoration: none; }
.site-foot a:not(.btn):hover{ color: var(--accent); }

/* ── 8. 搜索框 ─────────────────────────────────────────────── */
.searchform{ display: flex; gap: .4rem; }
.searchform input[type="search"]{
  flex: 1; border: 1px solid var(--rule); background: var(--surface);
  padding: .45rem .7rem; font: inherit; font-size: .85rem; color: var(--ink);
}
.searchform button{
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  font: inherit; font-size: .8rem; font-weight: 700; padding: .45rem .9rem; cursor: pointer;
}

/* ── 9. 打印 ───────────────────────────────────────────────── */
@media print{
  .topbar, .masthead, .site-foot, .progress, .adjacent, .cta-row{ display: none; }
  body{ background: #fff; }
  .prose{ font-size: 11pt; line-height: 1.7; max-width: none; }
}

/* ── 10. 减少动效 ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════
   首页
   ═══════════════════════════════════════════════ */

/* ── 门头 ────────────────────────────────────── */
.hero{ border-bottom: 1px solid var(--rule); background: var(--paper); }
.hero__in{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2.4rem 3.2rem;
  align-items: center;
  padding: 3.4rem 0 3.6rem;
}
.hero__text{
  position: relative;
  padding-left: 1.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
/* 切一刀：一条不满高、往下错位的品红竖条 */
.hero__text::before{
  content: ""; position: absolute; left: 0; top: .55rem; bottom: 34%;
  width: 3px; background: var(--accent);
}
.eyebrow--accent{ color: var(--accent); }
.hero__line{
  font-size: clamp(1.9rem, 5.6vw, 3.35rem);
  line-height: 1.28;
  letter-spacing: .005em;
  margin: -.15rem 0 0;
}
.hero__dek{
  font-size: .95rem; line-height: 1.95; color: var(--ink-2);
  max-width: 30em; margin: 0;
}
.hero__cta{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem; }

.hero__fig{ position: relative; margin: 0; justify-self: end; width: min(100%, 24rem); }
.hero__fig img{ display: block; width: 100%; height: auto; position: relative; z-index: 1; }
/* 错位的金色框，只露出右下两边 */
.hero__fig::after{
  content: ""; position: absolute; z-index: 0;
  left: .85rem; top: .85rem; right: -.85rem; bottom: -.85rem;
  border: 1px solid var(--gold);
}
.hero__fig figcaption{
  position: relative; z-index: 1;
  margin-top: 1.15rem;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em;
  color: var(--muted); text-align: right;
}

@media (max-width: 860px){
  /* 手机上先给字后给照片：一屏之内就要看见「讲过的书，写过的字，拆过的电影」*/
  .hero__in{ grid-template-columns: 1fr; padding: 2.2rem 0 2.4rem; gap: 1.8rem; }
  .hero__fig{ justify-self: start; width: min(100%, 17rem); }
  .hero__fig::after{ display: none; }   /* 错位金框是桌面上的小把戏，手机上显得松散 */
  .hero__fig figcaption{ text-align: left; margin-top: .7rem; }
}
@media (max-width: 620px){
  /* 手机上门头不放照片。照片一放就占掉整屏，
     YouTube 那一栏被推到很下面——而首页的第一印象就该是频道。
     照片在「关于」页有。 */
  .hero__fig{ display: none; }
  .hero__in{ padding: 1.9rem 0 2rem; }
  .hero__line{ font-size: clamp(1.75rem, 8.5vw, 2.3rem); }
  .hero__dek{ font-size: .88rem; line-height: 1.85; }
}

/* ── 首页门头：不放人像，放作品 ─────────────────── */
/* 大头照撤了。空出来的半幅给了简介和入口，门头不再是「左边一堆字、
   右边一张脸」。真正接管视觉的是下面那条书带。
   注意：这些只作用于 .hero--home，「关于」页还用上面那套两栏 + 人像。 */
.hero--home .hero__in{
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: end;              /* 大标题和右边的按钮落在同一条底线上 */
  padding: 3.4rem 0 2.4rem;
  gap: 2.2rem 3.4rem;
}
.hero__head{
  position: relative; padding-left: 1.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.hero__head::before{           /* 那一刀品红：不满高，往下错位 */
  content: ""; position: absolute; left: 0; top: .3rem; bottom: 30%;
  width: 3px; background: var(--accent);
}
.hero__side{ display: flex; flex-direction: column; gap: 1.15rem; padding-bottom: .3rem; }
/* 没有照片抢地方了，标题可以放开写 */
.hero--home .hero__line{ font-size: clamp(2rem, 6.2vw, 4.05rem); }

/* ── 书带：一排真书，缓缓横移 ────────────────── */
/* 手机上门头原来是一堵字墙——这条书带就是那张缺掉的图。
   用的是他真讲过的书的封面，不是装饰素材。 */
.bookband{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent);
}
.bookband__track{
  display: flex; align-items: flex-end; gap: .5rem;
  width: max-content;
  animation: bookband-drift 115s linear infinite;
}
/* 暂停靠类名，不靠 :hover——触屏的 hover 会一直粘着，
   手机上点一下就永远停住，再点也解不开。开关在 reading.js 里。 */
.bookband{ cursor: pointer; }
.bookband:hover .bookband__track{ animation-play-state: paused; }
.bookband.is-paused .bookband__track{ animation-play-state: paused; }
@media (hover: none){
  .bookband:hover .bookband__track{ animation-play-state: running; }
  .bookband.is-paused .bookband__track{ animation-play-state: paused; }
}
.bookband:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.bookband img{
  display: block; height: 8.4rem; width: auto;
  box-shadow: .16rem -.16rem 0 rgba(23, 21, 15, .07);
}
/* 排了两遍，移动一半正好接回开头，看不出接缝 */
@keyframes bookband-drift{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-50%, 0, 0); }
}
.bookband__rule{ height: 1px; background: var(--ink); opacity: .26; }   /* 书架板 */
/* 一行小字不该占掉 60 多个像素——手机上每一格都在跟 YouTube 那一栏抢位置 */
.bookband__foot{ padding: .45rem 0 .9rem; text-align: right; }
.bookband__foot a{
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--muted); text-decoration: none;
}
.bookband__foot a:hover{ color: var(--accent); }

@media (max-width: 860px){
  .hero--home .hero__in{ grid-template-columns: 1fr; align-items: start; padding: 2.4rem 0 1.8rem; gap: 1.5rem; }
  .bookband img{ height: 7rem; }
}
@media (max-width: 620px){
  .hero--home .hero__line{ font-size: clamp(1.85rem, 9vw, 2.5rem); }
  /* 手机上书封再矮一点：它的活儿是「让门头有图、看出有很多书」，
     不需要看清书名——看清书名该去书架页。矮下来的位置让给 YouTube 那一栏。 */
  .bookband img{ height: 5rem; }
  .bookband__foot{ padding: .4rem 0 .75rem; }
  .bookband{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  }
}
/* 系统里关了动效的，就别动——改成可以自己横着拨 */
@media (prefers-reduced-motion: reduce){
  .bookband{ overflow-x: auto; scrollbar-width: none; }   /* 滚动条收掉，留着能拨就行 */
  .bookband::-webkit-scrollbar{ display: none; }
  .bookband__track{ animation: none; }
}

/* ── 分块 ────────────────────────────────────── */
.band{ padding: 3rem 0; border-bottom: 1px solid var(--rule); }
.band:last-of-type{ border-bottom: 0; padding-bottom: 3.4rem; }
.band--alt{ background: var(--surface); }
.band__head{
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.7rem;
}
.band__head h2{ font-size: clamp(1.1rem, 2.6vw, 1.45rem); white-space: nowrap; }
.band__head .rule{ flex: 1; height: 1px; background: var(--ink); opacity: .22; }
.more{
  font-family: var(--f-sans); font-size: .76rem; white-space: nowrap;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent;
}
.more:hover{ border-bottom-color: var(--accent); }

/* ── 卡片上的播放角标 ────────────────────────── */
.card__thumb{ overflow: hidden; }
.card__blank{ display: block; width: 100%; aspect-ratio: 16/9; background: var(--surface-2); }
.card__play{
  position: absolute; left: 0; bottom: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: .68rem; line-height: 1;
}
.card__thumb:hover .card__play{ background: var(--yt); color: #fff; }

/* ── 三条线 ──────────────────────────────────── */
.lanes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
@media (max-width: 880px){ .lanes{ grid-template-columns: 1fr; gap: 2.4rem; } }

.lane{ border-top: 1px solid var(--ink); padding-top: .9rem; }
.lane--lead{ border-top-width: 3px; border-top-color: var(--accent); }
.lane__title{
  display: flex; align-items: baseline; gap: .55rem;
  font-size: 1.25rem;
}
.lane--lead .lane__title{ color: var(--accent); }
/* 小标题是链接，但看上去不能变——「读书」那条本来就是品红的，
   靠变色提示可点对它无效，所以统一用 hover 下划线。 */
.lane__title a{ color: inherit; text-decoration: none; }
.lane__title a:hover{ text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.lane__n{ font-family: var(--f-mono); font-size: .62rem; color: var(--muted); letter-spacing: .08em; }
.lane__desc{ margin: .4rem 0 1rem; font-size: .78rem; line-height: 1.75; color: var(--muted); }

.lane__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lane__list li{
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .58rem 0; border-bottom: 1px solid var(--rule-soft);
}
.lane__list a{
  font-size: .84rem; line-height: 1.6; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lane__list a:hover{ color: var(--accent); }
.lane__date{
  font-family: var(--f-mono); font-size: .58rem; color: var(--muted);
  letter-spacing: .05em; white-space: nowrap; flex: none;
}
.lane > .more{ display: inline-block; margin-top: 1rem; }

/* ── 书架 ────────────────────────────────────── */
/* 底边对齐，不是顶边——四张封面长宽比各不相同，顶边对齐会让下面的书名
   参差出十几个像素。底边对齐既让书名落在同一条线上，也正好是「书立在
   书架上」该有的样子：高矮不齐，但都站在同一块板上。 */
.shelf{ display: flex; flex-wrap: wrap; gap: 1.8rem 2rem; align-items: flex-end; }
.shelf__item{
  width: 8.5rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .7rem;
}
.shelf__item img{
  display: block; width: 100%; height: auto;
  box-shadow: .45rem .45rem 0 var(--gold);
  transition: box-shadow .18s ease, transform .18s ease;
}
.shelf__item:hover img{ box-shadow: .2rem .2rem 0 var(--accent); transform: translate(.1rem, .1rem); }
.shelf__t{ font-size: .76rem; line-height: 1.5; color: var(--ink-2); }
.shelf__item:hover .shelf__t{ color: var(--accent); }

/* 卡片图有两种：视频缩略图撑满，书封居中陈列（硬裁 16:9 会把书封切烂） */
.card__thumb--video img{ object-fit: cover; }
.card__thumb--cover{ background: var(--surface-2); }
.card__thumb--cover img{
  object-fit: contain;
  padding: .7rem 0;
  filter: drop-shadow(0 2px 6px rgba(23,21,15,.22));
}

/* ── 页脚 ────────────────────────────────────── */
.site-foot{ border-top: 2px solid var(--ink); background: var(--surface); padding: 2.8rem 0 1.6rem; }
.foot__top{
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2rem 1.6rem;
  padding-bottom: 2.2rem;
}
@media (max-width: 900px){
  .foot__top{ grid-template-columns: repeat(2, 1fr); }
  .foot__brand{ grid-column: 1 / -1; }
}
.foot__brand{ display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.sig{ font-family: var(--f-serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.foot__note{ margin: 0; font-size: .78rem; line-height: 1.8; color: var(--muted); max-width: 22em; }

.foot__col{ display: flex; flex-direction: column; gap: .48rem; align-items: flex-start; }
.foot__h{
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em;
  color: var(--muted); padding-bottom: .35rem; margin-bottom: .1rem;
  border-bottom: 1px solid var(--rule); align-self: stretch;
}
.foot__col a{ font-size: .78rem; color: var(--ink-2); text-decoration: none; }
.foot__col a:hover{ color: var(--accent); }

.foot__bar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.fm{ font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; color: var(--muted); }
.foot__bar .nav a{ font-size: .76rem; }

/* 归档页：列表和内容之间的呼吸 */
.cardgrid--pad, .postlist--pad, .shelf--pad{ padding-top: 1.3rem; }
.shelf--pad{ padding-bottom: .6rem; }
.empty{ padding-top: 1.5rem; color: var(--ink-2); }

/* 出版物页的书架大一号，四本书是主角 */
.shelf--big{ gap: 2.2rem 2.6rem; }
.shelf--big .shelf__item{ width: 11rem; }
.band__head--sub{ margin-top: 2.6rem; margin-bottom: .4rem; }
.band__head--sub h2{ font-size: 1rem; }

/* 手机上卡片改横躺：图在左，字在右。一屏能看五六期，不然滚 54 期太累。
   用网格而不是 flex-direction:row —— 后者会把标题和日期也并排推到一行去。 */
@media (max-width: 560px){
  .card{
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas: "thumb title" "thumb meta" "thumb fill";
    grid-template-rows: auto auto 1fr;
    column-gap: .85rem; row-gap: .35rem;
  }
  .card__thumb{ grid-area: thumb; align-self: start; }
  .card__title{ grid-area: title; margin-top: -.15rem; }
  .card__meta{ grid-area: meta; }
  .cardgrid{ gap: 1.15rem; }
  .card__play{ width: 1.6rem; height: 1.6rem; font-size: .55rem; }
  .card__thumb--cover img{ padding: .3rem 0; }
}

/* ── 播放器：假封面 → 点了才载入真播放器 ─────────── */
.player{ position: relative; margin: 1.2rem 0 .9rem; background: var(--ink); cursor: pointer; }
.player img{ display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.player__blank{ display: block; width: 100%; aspect-ratio: 16/9; background: var(--ink); }
.player--live{ aspect-ratio: 16/9; cursor: default; }
.player--live iframe{ width: 100%; height: 100%; border: 0; display: block; }
.player__play{
  position: absolute; inset: 0; margin: auto;
  width: 4.2rem; height: 3rem; border: 0; border-radius: .55rem;
  background: rgba(23,21,15,.72); color: #fff; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.player__play--yt{ background: var(--yt); }
.player:hover .player__play{ transform: scale(1.06); }
.player:hover .player__play--yt{ background: #e00; }
.player:hover .player__play:not(.player__play--yt){ background: var(--ink); }
.player__play:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

/* B 站退到这一行小字里，不抢 YouTube 的戏 */
.alt-source{
  margin: -.5rem 0 1.4rem; font-size: .76rem; color: var(--muted);
}
.alt-source a{ color: var(--ink-2); border-bottom: 1px solid var(--rule); text-decoration: none; }
.alt-source a:hover{ color: var(--bili); border-bottom-color: var(--bili); }

/* 文章头图 */
.article__lead{ margin: 1.2rem 0 1.8rem; }
.article__lead img{ display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════
   书架：一格一本书
   没有真封面的用排版封面顶上——纯 CSS，不占带宽，
   也省得去别处扒图冒版权的风险。四个配色按书名轮换，
   整面墙看下来有节奏，又不会花。
   ═══════════════════════════════════════════════ */
.bookwall{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 2rem 1.5rem;
  padding-top: 1.4rem;
}
@media (max-width: 560px){
  .bookwall{ grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 1.5rem 1rem; }
}

.book{ display: flex; flex-direction: column; gap: .55rem; text-decoration: none; }

.book__cover{
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 3/4;
  padding: 1rem .85rem .85rem;
  overflow: hidden;
  box-shadow: .3rem .3rem 0 rgba(23,21,15,.13);
  transition: transform .16s ease, box-shadow .16s ease;
}
.book:hover .book__cover{ transform: translate(-.12rem, -.12rem); box-shadow: .5rem .5rem 0 rgba(23,21,15,.2); }

/* 真封面：底色垫着，原比例居中，不拉伸 */
.book__cover--photo{ padding: 0; background: var(--surface-2); }
.book__cover--photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* 排版封面的四种配色 */
.book__cover--ink{    background: var(--ink);       color: var(--paper); }
.book__cover--paper{  background: var(--surface);   color: var(--ink);   border: 1px solid var(--rule); }
.book__cover--accent{ background: var(--accent);    color: #FCF6EE; }
.book__cover--gold{   background: var(--gold);      color: var(--ink);   }

.book__rule{ display: block; width: 1.6rem; height: 2px; background: currentColor; opacity: .55; margin-bottom: .7rem; }
.book__name{
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.12rem); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.book__sub{
  margin-top: .4rem; font-size: .62rem; line-height: 1.5; opacity: .78;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.book__foot{
  margin-top: auto; padding-top: .6rem;
  font-family: var(--f-mono); font-size: .55rem; letter-spacing: .14em; opacity: .7;
}
.book__cover--paper .book__rule{ background: var(--accent); opacity: 1; }

.book__title{
  font-size: .78rem; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book:hover .book__title{ color: var(--accent); }
.book__meta{ font-family: var(--f-mono); font-size: .55rem; letter-spacing: .06em; color: var(--muted); }

.bookwall__note{
  margin: 2.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .74rem; color: var(--muted);
}

/* ═══════════════════════════════════════════════
   首页第一栏：YouTube 频道
   压成深色，跟纸色的站身拉开——一眼知道这是视频区，
   也让整个首页看起来像是从频道衍生出来的。
   ═══════════════════════════════════════════════ */
.channel{
  background: var(--ink);
  color: var(--paper);
  padding: 3rem 0 3.4rem;
  border-bottom: 1px solid var(--rule);
}
.channel__head{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; margin-bottom: 1.8rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(242,239,230,.18);
}
.channel__head h2{ font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--paper); margin-top: .35rem; }
.eyebrow--yt{ color: var(--yt); }
.channel__actions{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.more--light{ color: var(--paper); opacity: .72; }
.more--light:hover{ opacity: 1; border-bottom-color: var(--paper); }

.channel__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.7rem 1.3rem;
}
.vid{ display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.vid--lead{ grid-column: span 2; grid-row: span 2; }

.vid__thumb{
  position: relative; display: block; overflow: hidden;
  background: #000;
}
.vid__thumb img{
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  transition: transform .3s ease, opacity .2s ease;
}
.vid:hover .vid__thumb img{ transform: scale(1.035); opacity: .9; }

.vid__play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 3rem; height: 2.1rem; border-radius: .4rem;
  background: rgba(204,0,0,.9); color: #fff;
  display: grid; place-items: center; font-size: .7rem; line-height: 1;
  transition: background .16s ease, transform .16s ease;
}
.vid--lead .vid__play{ width: 4.2rem; height: 3rem; font-size: 1rem; border-radius: .55rem; }
.vid:hover .vid__play{ background: var(--yt); transform: translate(-50%,-50%) scale(1.08); }

.vid__len{
  position: absolute; right: .4rem; bottom: .4rem;
  padding: .1rem .3rem; border-radius: .2rem;
  background: rgba(0,0,0,.78); color: #fff;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .04em;
}

.vid__title{
  font-size: .85rem; line-height: 1.55; color: var(--paper);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vid--lead .vid__title{
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.35rem); line-height: 1.42; -webkit-line-clamp: 3;
  margin-top: .2rem;
}
.vid:hover .vid__title{ color: #fff; text-decoration: underline; text-underline-offset: .22em; }
.vid__dek{
  font-size: .78rem; line-height: 1.8; color: rgba(242,239,230,.62);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vid__meta{
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .07em;
  color: rgba(242,239,230,.5);
}

@media (max-width: 900px){
  .channel__grid{ grid-template-columns: repeat(2, 1fr); }
  .vid--lead{ grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px){
  .channel{ padding: 2.2rem 0 2.6rem; }
  .channel__grid{ grid-template-columns: 1fr; gap: 1.2rem; }
  /* 这一行必须有：头条还带着 span 2 的话，
     单列网格会被它硬撑出一个隐式的第二列，卡片就全叠在一起了 */
  .vid--lead{ grid-column: auto; grid-row: auto; }
  /* 除了头条，其余横躺，一屏能看好几期 */
  .vid:not(.vid--lead){
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-areas: "thumb title" "thumb meta" "thumb fill";
    grid-template-rows: auto auto 1fr;
    column-gap: .8rem; row-gap: .3rem;
  }
  .vid:not(.vid--lead) .vid__thumb{ grid-area: thumb; align-self: start; }
  .vid:not(.vid--lead) .vid__title{ grid-area: title; -webkit-line-clamp: 3; }
  .vid:not(.vid--lead) .vid__meta{ grid-area: meta; }
}

/* 只在 YouTube 讲过的书，角上标一下 */
.book__yt{
  position: absolute; right: 0; bottom: 0;
  width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  background: var(--yt); color: #fff; font-size: .5rem; line-height: 1;
}
.book:hover .book__yt{ background: #e00; }
.book__yt--inline{
  position: static; display: inline-grid; vertical-align: -.15em;
  width: 1.1rem; height: 1.1rem; font-size: .42rem;
}

/* ── 筛选条 + 已讲书单按钮 ──────────────────────
   「已讲书单」是一张索引，跟左边那排筛选不是一类东西，
   所以靠右单放，做成按钮的样子，一眼能看出它是另一种入口。 */
.filterbar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.2rem; padding: 1.1rem 0;
}
.filterbar .filters{ padding: 0; flex: 1 1 auto; }

/* 大标题跟书单按钮并排：一个是这条线的名字，一个是通往另一份清单的门，
   同一行、两端对齐，比上下堆着更能说清它们是平级的两样东西。 */
.page-head__row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem 1.2rem; flex-wrap: wrap;
}
.page-head__row h1{ margin: 0; }

.booklist-btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem;
  border: 1.5px solid var(--ink); background: var(--surface);
  color: var(--ink); text-decoration: none;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  box-shadow: .22rem .22rem 0 var(--gold);
  transition: box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.booklist-btn:hover{
  background: var(--ink); color: var(--paper);
  box-shadow: .34rem .34rem 0 var(--accent);
  transform: translate(-.06rem, -.06rem);
}
.booklist-btn.is-on{
  background: var(--ink); color: var(--paper);
  box-shadow: .22rem .22rem 0 var(--accent);
}
.booklist-btn__icon{ font-size: .95rem; line-height: 1; color: var(--gold); }
.booklist-btn:hover .booklist-btn__icon,
.booklist-btn.is-on .booklist-btn__icon{ color: var(--gold); }
.booklist-btn__n{
  font-family: var(--f-mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .06em; opacity: .72;
}
@media (max-width: 640px){
  /* 手机上这一条原来是三行：两排筛选标签 + 一个撑满整行的书单按钮。
     按钮一撑满就成了「第三行筛选」——既乱，也把它
     「这不是筛选、是一张索引」的身份弄丢了。
     现在让它缩回原来的大小、靠右站，跟上面那排一眼分得开。
     标签本身不改成横向滑动：那会藏起三个选项，是功能上的倒退。 */
  .filterbar{ justify-content: flex-start; gap: .5rem 1rem; }
  .filterbar .filters{ gap: .35rem; }
  /* 标题跟按钮在窄屏上挤不下就换行，按钮仍然靠右 */
  .page-head__row{ gap: .5rem .8rem; }
  .filters a{ font-size: .74rem; padding: .28rem .58rem; }
  .filters .n{ font-size: .58rem; margin-left: .24rem; }
  .booklist-btn{
    width: auto; margin-left: auto;            /* 靠右，不撑满 */
    padding: .4rem .7rem; font-size: .75rem;
    box-shadow: .16rem .16rem 0 var(--gold);   /* 投影也跟着收一档 */
  }
  .booklist-btn__icon{ font-size: .85rem; }
}

/* ── 帖子底下：这一期讲了哪些书 ────────────────────
   双向的另一半。书指向帖子，帖子也指回书。 */
.mentioned{ margin: 0 0 1.4rem; }
.mentioned .eyebrow{ display: block; margin-bottom: .7rem; }
.mentioned__row{ display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: flex-end; }
.mentioned__item{
  width: 5.2rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .45rem;
}
.mentioned__item img{
  display: block; width: 100%; height: auto;
  box-shadow: .2rem .2rem 0 var(--gold);
  transition: box-shadow .18s ease, transform .18s ease;
}
.mentioned__item:hover img{ box-shadow: .1rem .1rem 0 var(--accent); transform: translate(.05rem, .05rem); }
.mentioned__blank{
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 2/3; background: var(--surface-2); color: var(--ink-2);
  font-size: .68rem; line-height: 1.35; padding: .3rem;
  box-shadow: .2rem .2rem 0 var(--gold);
}
.mentioned__t{ font-size: .68rem; line-height: 1.45; color: var(--ink-2); }
.mentioned__item:hover .mentioned__t{ color: var(--accent); }
.mentioned__n{ font-family: var(--f-mono); font-size: .56rem; color: var(--accent); letter-spacing: .06em; }
@media (max-width: 620px){ .mentioned__item{ width: 4.4rem; } }

.bookwall__credit{ display: inline-block; margin-top: .3rem; font-size: .68rem; color: var(--muted); }
.bookwall__credit a{ color: var(--muted); text-decoration: underline; text-underline-offset: .18em; }
.bookwall__credit a:hover{ color: var(--accent); }

/* ── 一本书的节点页 ──────────────────────────────
   一本书被讲过不止一次时，封面点进来落在这里：
   左边是书，右边是它被讲过的每一篇。 */
.booknode{
  display: grid; grid-template-columns: 13rem 1fr;
  gap: 1.4rem 2.6rem; align-items: start;
  padding-top: 1.4rem;
}
.booknode__side{ display: flex; flex-direction: column; gap: .9rem; }
.booknode__cover{ width: 100%; }
.booknode__cover img{ display: block; width: 100%; height: auto; }
.booknode__back{
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em;
  color: var(--muted); text-decoration: none;
}
.booknode__back:hover{ color: var(--accent); }
.booknode__main .postlist__item:first-child{ border-top: 1px solid var(--rule-soft); }
.booknode__yt{ margin: 1.1rem 0 0; }
.booknode__yt a{
  font-size: .76rem; color: var(--yt); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .1rem;
}
@media (max-width: 620px){
  /* 手机上书封不该占掉整屏——它是提示，不是主角，右边那份清单才是 */
  .booknode{ grid-template-columns: 6.5rem 1fr; gap: 1rem 1.1rem; }
  .booknode__back{ font-size: .6rem; }
}

/* ── 重点项目大卡 ────────────────────────────────
   《天才在左》那种跟别人合作的正经项目，不该混在列表里 */
.flagship{
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  gap: 0; margin: 1.4rem 0 2.4rem;
  border: 1px solid var(--rule); background: var(--surface);
  text-decoration: none; overflow: hidden;
  box-shadow: .4rem .4rem 0 var(--gold);
  transition: box-shadow .18s ease, transform .18s ease;
}
.flagship:hover{ box-shadow: .6rem .6rem 0 var(--accent); transform: translate(-.08rem, -.08rem); }
.flagship__img{ display: block; background: var(--ink); }
.flagship__img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.flagship__body{
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.7rem 1.6rem;
}
.flagship__title{
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.05rem, 2.3vw, 1.5rem); line-height: 1.45; color: var(--ink);
}
.flagship__dek{ font-size: .82rem; line-height: 1.85; color: var(--ink-2); }
@media (max-width: 720px){
  .flagship{ grid-template-columns: 1fr; }
  .flagship__img img{ aspect-ratio: 16/9; }
  .flagship__body{ padding: 1.3rem 1.1rem; }
}

/* ── 页脚的播客入口 ──────────────────────────────
   「心理朋克」这个牌子他不用了，所以不做系列陈列，
   以前的免费音频基本都汇进这档播客，页脚给个入口就够。 */
.foot__pod{
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .2rem; padding: .42rem .7rem;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-2); text-decoration: none; font-size: .76rem;
}
.foot__pod:hover{ border-color: var(--ink); color: var(--ink); }
.foot__pod span:first-child{ font-size: .9rem; line-height: 1; }
.foot__pod em{ font-style: normal; color: var(--muted); }   /* 「（已停更）」要退后一步 */

/* 知乎蓝：只用在「去知乎看」这一个动作上 */
.btn--zhihu{ background: #0084FF; border-color: #0084FF; color: #fff; }
.btn--zhihu:hover{ background: #0068cc; border-color: #0068cc; color: #fff; }

/* 知乎：封面点了直接跳走（它的播放器嵌不进来，实测黑屏） */
.player--out{ display: block; }
.player__play--zh{ background: #0084FF; }
.player--out:hover .player__play--zh{ background: #0068cc; }

/* ── 关于页 ────────────────────────────────────── */
.hero--about .hero__line{ font-size: clamp(2.2rem, 6vw, 3.6rem); }

/* 数字带：先把「做了多少东西」摆出来，再讲他是谁 */
.numbers{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.4rem;
}
@media (max-width: 640px){ .numbers{ grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } }
.numbers__cell{
  display: flex; flex-direction: column; gap: .3rem;
  border-top: 2px solid var(--ink); padding-top: .8rem;
}
.numbers__cell:first-child{ border-top-color: var(--accent); }
.numbers__n{
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.numbers__n em{
  font-family: var(--f-sans); font-style: normal; font-weight: 400;
  font-size: .72rem; margin-left: .3rem; color: var(--muted);
}
.numbers__k{ font-size: .78rem; color: var(--ink-2); }

/* 关于页正文：微信二维码别撑满一栏 */
.prose--about img{ max-width: 16rem; margin: 1.6em 0; }
.prose--about h2{ margin-top: 2.4em; }
.prose--about h2:first-child{ margin-top: 0; }