/*
 * 7PM Salon 主题样式 —— 方案 B「当代艺文机构」。
 *
 * 现在的目标不是「好看」,是把**结构性问题**先修掉,并让调性可以后续一次性替换:
 *   ① 层级:字号阶梯拉开、正文左对齐(生产站全站居中 + 等权重 → 无层级)
 *   ② 网格:卡片图统一 aspect-ratio(生产站方/4:3/竖图混用 → 每行高度不齐)
 *   ③ 扫读:分类色标(生产站无任何分类线索,播客/讲座/观影靠读标题分辨)
 *   ④ 元信息:文章页补分类/日期/作者(生产站完全没有)
 *   ⑤ 首屏:手机端不再被 logo+搜索框+重复标题占满一屏
 *
 * 所有颜色/字号/间距一律取自 tokens.css,这里不写字面量 —— 换调性只改令牌。
 */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  /* 实心 outline 承担可见性合规;半透明光晕不算焦点指示(firstanchor 实测 1.51:1 不达标) */
  /* 焦点环用纯黑实心:金黄在白底只有 1.91:1,做焦点指示不合规 */
  outline: 3px solid var(--line);
  outline-offset: 2px;
}
/* 黑底区域不能沿用黑色焦点环:抽屉搜索框与页脚链接会完全看不见焦点。 */
:where(.sp-nav__panel, .sp-search-toggle__panel, .sp-footer, .wp-block-pullquote)
  :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--signal);
}

.sp-skip {
  position: absolute;
  left: -9999px;
}
.sp-skip:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  background: var(--surface);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
}

/* ---------- 版面容器 ---------- */
.sp-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.sp-container--narrow { max-width: calc(var(--measure) + var(--sp-8)); }

/* ---------- 头部 ---------- */
/* 方案 B:结构性分隔用重线(3px 纯黑),而非发丝线 —— 气场靠对比不靠精致 */
.sp-header {
  border-bottom: var(--line-w-bold) solid var(--line);
  padding-block: var(--sp-4);
}
.sp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
/* 展示字统一:重字重 + 负字距,在系统 CJK 字体上逼近海报那种压缩感 */
.sp-brand__name,
.sp-page-head__title,
.sp-card__title,
.sp-article__title,
.sp-article__body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

/* the_custom_logo() 输出原图尺寸 —— 必须约束,否则 logo 会占掉整个首屏(踩过)。
   选择器不依赖嵌套关系:custom-logo-link 是 the_custom_logo() 自己产的 <a>。 */
.sp-brand { display: grid; gap: 2px; }
.sp-brand .custom-logo-link { display: block; }
.sp-brand img.custom-logo,
.custom-logo-link img {
  max-height: 56px;
  width: auto;
}
.sp-brand__link { text-decoration: none; display: grid; gap: 2px; }

.sp-brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 700;
}
/* 导航:中文为主,不再中英并排堆成一行 */
.sp-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-meta);
}
.sp-nav__list a {
  text-decoration: none;
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
}
.sp-nav__list a { border-bottom-width: 3px; }
.sp-nav__list a:hover { border-bottom-color: var(--line); }
/* 「当前页」用金黄下划块 + 加粗:黄色只作填充,不当文字色(白底上仅 1.91:1) */
.sp-nav__list .current-menu-item > a,
.sp-nav__list .current_page_item > a,
.sp-nav__list .current-menu-ancestor > a {
  border-bottom-color: var(--signal);
  font-weight: 800;
}

/* ---------- 页面标题区 ---------- */
.sp-page-head {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: var(--line-w-bold) solid var(--line);
  margin-bottom: var(--sp-7);
}
.sp-page-head__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}
/* 标题前的金黄方块 —— 呼应海报里那个黄点,是全站的品牌记号 */
/* 这里原先有一个 .sp-page-head__title::before 的金黄小方块。删掉了:
   现在「栏目 / 搜索 / 标签」已经由 .sp-page-head__kicker 的金黄块承担标记作用,
   标题前再来一个方块 = 金黄在同一处出现两次、语义重复,而且方块比标签弱。
   方案 B 的纪律是「金黄是结构不是装饰」—— 纯装饰的那一份就该去掉。 */
/* 归档类型标签:金黄块黑字(10.99:1),与卡片分类标签同一个视觉部件 */
.sp-page-head__kicker {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--signal);
  color: var(--on-signal);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.sp-page-head__lede {
  margin-top: var(--sp-3);
  max-width: var(--measure);
  color: var(--ink-muted);
}
/* 分类描述**强制左对齐**。
   term description 里每个 <p> 都带 **内联** `style="text-align: center"`
   (运营的排版习惯,正文里也有 7069 处同样的东西)。
   内联样式优先级最高,普通规则盖不住 —— 所以这里必须 `!important`,
   这正是它的正当用途:覆盖内容里的内联样式。
   (顺带:`:where()` 特异性为 0,拿它对付内联样式更是白费。)

   为什么覆盖是对的:分类描述是**站点的导航文案** —— 告诉读者这个栏目是什么 ——
   不是作者的排版表达。居中的多行 CJK 每行起点不固定,眼睛回扫找不到行首。
   范围严格限定在 .sp-page-head__lede 之内,**不碰正文**:
   要不要动正文那 7069 段是运营的决定,代码不擅自改。 */
.sp-page-head__lede,
.sp-page-head__lede p,
.sp-page-head__lede div { text-align: left !important; }

/* ---------- 分类标签:黑块反白(方案 B 不用多彩分类色) ---------- */
.sp-tag {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  background: var(--tag-bg);
  color: var(--tag-fg);
  text-decoration: none;
  padding: 3px var(--sp-2) 2px;
  line-height: 1.5;
  text-transform: none;
}
a.sp-tag:hover {
  /* hover 翻成金黄块 + 黑字(10.99:1),这是黄色的唯一合规用法 */
  background: var(--tag-bg-featured);
  color: var(--tag-fg-featured);
}

/* ---------- 列表网格 ---------- */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.sp-card__link {
  display: grid;
  gap: var(--sp-3);
  text-decoration: none;
}
.sp-card__media {
  /* 关键:统一比例,解决生产站网格发毛 */
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  background: var(--inset);
}
.sp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-card__body { display: grid; gap: var(--sp-2); justify-items: start; }
.sp-card__title {
  font-size: var(--fs-card);
  line-height: 1.34;
}
.sp-card__link:hover .sp-card__title { text-decoration: underline; text-underline-offset: 3px; }
.sp-card__date {
  font-size: var(--fs-meta);
  color: var(--ink-faint);
}

/* ---------- 文章 ---------- */
.sp-article { padding-block: var(--sp-7) var(--sp-8); }
.sp-article__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
}
.sp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--line-w-bold) solid var(--line);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
}
.sp-meta__date, .sp-meta__author { letter-spacing: var(--ls-label); text-transform: uppercase; }
/* 文章页大图:居中 + 限高。
   生产 519 张特色图里 **160 张是竖图**(比例最竖到 0.46,接近 1:2),另有 174 横 / 185 近方。
   原先只给了 margin,竖图就以原始尺寸靠左贴着容器左缘、右边留一大片空白,
   看着像排版漏了(31% 的文章都会这样)。
   限高 78vh 而不是不限:竖图占满整屏会把正文整段推到首屏之外,读者以为文章只有一张图。 */
.sp-article__hero {
  margin-block: var(--sp-6);
  display: flex;
  justify-content: center;
}
.sp-article__hero img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sp-article__body {
  margin-top: var(--sp-6);
  max-width: var(--measure);
}
/* 正文左对齐 —— CJK 长段落居中极难读(生产站 hero 引言就是) */
.sp-article__body > * + * { margin-top: var(--sp-5); }
.sp-article__body h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin-top: var(--sp-8);
  padding-bottom: var(--sp-2);
  border-bottom: var(--line-w) solid var(--line);
}
.sp-article__body h3 { font-size: var(--fs-card); margin-top: var(--sp-6); }
.sp-article__body blockquote {
  /* 金黄作装饰性引导条:非文字、非有意义图形,合规 */
  border-left: 6px solid var(--signal);
  padding-left: var(--sp-5);
  color: var(--ink-muted);
}
.sp-article__body :where(figure, img) { margin-inline: 0; }
/* 文章标签:站里有 271 个标签,但原先 6 个标签会连成一坨没有间隔。
   做成描边小块,与分类标签(实心黑块)刻意区分开 ——
   分类是「这篇属于哪个栏目」(结构),标签是「讲了什么」(自由词)。 */
.sp-article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--line-w) solid var(--line-soft);
  font-size: var(--fs-meta);
}
.sp-article__tags-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  margin-right: var(--sp-1);
}
.sp-article__tags a {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border: var(--line-w) solid var(--line);
  text-decoration: none;
  color: var(--ink);
  line-height: 1.6;
}
.sp-article__tags a:hover { background: var(--ink-block); color: var(--on-dark); }

.sp-article__pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--line-w) solid var(--line-soft);
  font-size: var(--fs-meta);
}
.sp-article__pages .post-page-numbers {
  display: inline-block;
  min-width: 2.4em;
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w) solid var(--line);
  text-align: center;
  text-decoration: none;
}
.sp-article__pages .post-page-numbers.current {
  background: var(--ink-block);
  color: var(--on-dark);
  font-weight: 800;
}

.sp-adjacent {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: var(--line-w-bold) solid var(--line);
  /* 原先整块 13px:标题跟元信息一样小,读者扫过去看不出那是「下一篇是什么」。
     标签留在 micro,标题提到 card 级 —— 层级靠这个字号差建立。 */
  font-size: var(--fs-card);
  line-height: var(--lh-heading);
}

/* ---------- 分页 ---------- */
.sp-pagination { padding-block: var(--sp-7); font-size: var(--fs-meta); }
.sp-pagination > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* li 摊平:隐藏中间页码时不会留下空的列表项,也省得用 :has() 去够父级。
   ⚠️ 下面所有页码规则都必须写成 `li .page-numbers` —— paginate_links(type=list)
   的外层 <ul> **自己也带 .page-numbers 类**,裸写会把 ul 一起命中,
   display:inline-block 直接把这里的 flex 覆盖掉(桌面折成两行、项宽 504px,踩过)。 */
.sp-pagination > ul > li { display: contents; }
/* 手机端那份状态文字,桌面不出 */
.sp-pagination__status { display: none; }
.sp-pagination li .page-numbers {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  border: 1px solid transparent;
}
.sp-pagination li .page-numbers { border-color: var(--line-soft); }
.sp-pagination li .page-numbers:hover { border-color: var(--line); }
.sp-pagination li .page-numbers.current {
  background: var(--ink-block);
  border-color: var(--ink-block);
  color: var(--on-dark);
  font-weight: 800;
}

/* ---------- 其它 ---------- */
.sp-btn {
  display: inline-block;
  background: var(--ink-block);
  color: var(--on-dark);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-6);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  border: var(--line-w-bold) solid var(--line);
}
.sp-btn:hover { background: var(--signal); color: var(--on-signal); }
.sp-empty, .sp-notfound { padding-block: var(--sp-8); color: var(--ink-muted); }
/* 空状态:原先只有一句话 + 一片空白,读者停在这里无路可走 */
.sp-empty__lead {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
}
.sp-empty__hint { margin-top: var(--sp-4); }
.sp-empty__search { margin-top: var(--sp-4); max-width: 420px; }
.sp-empty__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}
.sp-empty__cats a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: var(--line-w-bold) solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}
.sp-empty__cats a:hover { background: var(--ink-block); color: var(--on-dark); }
.sp-empty__count { font-size: var(--fs-micro); color: var(--ink-faint); margin-left: var(--sp-2); font-weight: 400; }
.sp-empty__cats a:hover .sp-empty__count { color: var(--on-dark-faint); }
/* 404 页正文里的搜索才是主要行动,导览条那份收起来 —— 否则同屏两个搜索框 */
.sp-notfound .sp-search { max-width: 420px; margin-top: var(--sp-4); }

/* 页脚整块反白 —— 方案 B 的收尾重音,也顺手解决生产站页脚三个空框的空洞感 */
.sp-footer {
  background: var(--ink-block);
  color: var(--on-dark);
  padding-block: var(--sp-8);
  /* 上一版 margin-top: sp-9(112px)+ 分页自身 padding 叠出一大段死白,像坏了不像留白 */
  margin-top: var(--sp-6);
  font-size: var(--fs-meta);
}
.sp-footer a { color: var(--on-dark); }
.sp-footer a:hover { color: var(--signal); }
.sp-footer__about { max-width: var(--measure); }
.sp-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.sp-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--line-w) solid var(--line-on-dark);
  letter-spacing: var(--ls-label);
}

@media (max-width: 600px) {
  .sp-container { padding-inline: var(--sp-4); }
  .sp-header__inner { gap: var(--sp-3); }
  .sp-page-head { padding-block: var(--sp-6) var(--sp-5); }
}

/* ==========================================================================
   方案 B 第二轮:构图重做
   起因(用户批评 + 我自查):
     1 首页 6 篇 × 4 列 = 4+2 裂行,且卡片高度 339/314 不齐 → 看着像坏了
     2 页脚挂了 WordPress 示例菜单(Yelp / facebook.com/wordpress / wordpress@example.com)
     3 页脚与页头重复同一段机构描述;分页到页脚约 150px 死白
     4 金黄只出现 2 次,是装饰不是结构;开场太弱,毫无海报气势
   ========================================================================== */

/* ---------- 报头:全宽黑块反白,首屏第一眼就是海报语言 ---------- */
.sp-masthead {
  background: var(--ink-block);
  color: var(--on-dark);
  /* 金黄在这里承担**结构**:黑块顶端的实心带 */
  border-top: 8px solid var(--signal);
  padding-block: var(--sp-8) var(--sp-7);
}
.sp-masthead__kicker {
  display: inline-block;
  background: var(--signal);
  color: var(--on-signal);          /* 黄底黑字 10.99:1 */
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 4px var(--sp-3) 3px;
}
.sp-masthead__title {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.sp-masthead__lede {
  margin-top: var(--sp-5);
  max-width: 52ch;
  color: var(--on-dark-muted);  /* 白底黑块上的次要文字,仍 >7:1 */
  line-height: var(--lh-body);
}

/* ---------- 分类导览条:把他们的内容分类学当设计材料 ---------- */

/* ---------- 头条卡:横向大版式,与网格形成非对称 ---------- */
.sp-feat {
  padding-block: var(--sp-7);
  border-bottom: var(--line-w-bold) solid var(--line);
  margin-bottom: var(--sp-7);
}
.sp-feat__link {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  text-decoration: none;
}
.sp-feat__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--inset);
}
.sp-feat__media img { width: 100%; height: 100%; object-fit: cover; }
.sp-feat__tags { display: flex; gap: var(--sp-2); }
.sp-feat__title {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
.sp-feat__excerpt {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
  line-height: var(--lh-body);
}
.sp-feat__meta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--line-w) solid var(--line-soft);
  font-size: var(--fs-meta);
  color: var(--ink-faint);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.sp-feat__link:hover .sp-feat__title { text-decoration: underline; text-underline-offset: 4px; }

/* 「最新」标记用金黄块(黄底黑字),这是黄色承担语义的地方 */
.sp-tag--signal { background: var(--tag-bg-featured); color: var(--tag-fg-featured); }

/* ---------- 网格改 3 列 + 等高对齐 ---------- */
.sp-grid {
  /* 固定 3 列而非 auto-fill:列数可预测,才能和每页文章数配合不裂行 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-5);
}
/* 标题裁到 2 行 —— 行数不同是上一版卡片高度 339/314 不齐的直接原因 */
.sp-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-card__body { min-height: 5.2em; }   /* 标题 2 行 + 日期,锁住卡片下半高度 */
.sp-card__date { letter-spacing: var(--ls-label); text-transform: uppercase; }

/* ---------- 分页:贴住内容,消掉到页脚的死白 ---------- */
.sp-pagination { padding-block: var(--sp-6) var(--sp-8); }

/* ---------- 页脚:三栏结构,不再重复页头文案 ---------- */
.sp-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.sp-footer__kicker {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--signal);              /* 黄字 on 黑底 10.99:1 ✓ */
}
.sp-footer__name {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
}
.sp-footer__nav { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.sp-footer__nav a { text-decoration: none; }
.sp-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 入场动效:一次性错位显现,只在首屏元素上 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sp-masthead__kicker, .sp-masthead__title, .sp-masthead__lede,
  .sp-feat, .sp-card {
    animation: sp-rise 620ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
  }
  .sp-masthead__title { animation-delay: 60ms; }
  .sp-masthead__lede  { animation-delay: 120ms; }
  .sp-feat            { animation-delay: 180ms; }
  .sp-card:nth-child(1) { animation-delay: 240ms; }
  .sp-card:nth-child(2) { animation-delay: 290ms; }
  .sp-card:nth-child(3) { animation-delay: 340ms; }
  .sp-card:nth-child(n+4) { animation-delay: 390ms; }
}
@keyframes sp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 1000px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-feat__link { grid-template-columns: 1fr; gap: var(--sp-5); }
  .sp-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-masthead { padding-block: var(--sp-7) var(--sp-6); }
  .sp-footer__inner { grid-template-columns: 1fr; }
  .sp-card__body { min-height: 0; }
}

/* ==========================================================================
   手机端导航抽屉 + 搜索
   起因:8 个栏目 ×「中文 | English」双语标题,在 390px 下平铺成 5 行,把首屏吃掉一半。
   内容站的第一屏应该是内容,不是导航。

   两处约定必须与 assets/js/nav.js 保持一致:
     - 抽屉断点 1239px(JS 里 DRAWER_MAX_WIDTH)
     - 开启状态类 html.sp-nav-is-open
   **断点是量出来的,不是猜的**:8 个双语菜单项加起来 979px,逐档实测
   1080 / 1120 / 1180 都折两行,1240 才排成一行。
   最初定 1079 是只测了 1024(折行)和 1512(一行),漏了中间整段 ——
   结果 1080~1239 的小笔记本一直顶着一个折行的顶栏。
   平板/小笔记本上出现汉堡是正常的,顶栏折行不是。
   ========================================================================== */

/* 汉堡:金黄块 + 黑线。金黄在这里第一次承担功能角色而非装饰。
   开启后仍要能点到(它浮在抽屉之上),所以 z-index 高于 panel。 */
.sp-nav__toggle {
  display: none;
  position: relative;
  z-index: 70;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w-bold) solid var(--line);
  background: var(--signal);
  color: var(--on-signal);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
.sp-nav__toggle-text { line-height: 1; }

/* 三条线 → X。中间条是元素本身,上下两条是伪元素。 */
.sp-nav__bars,
.sp-nav__bars::before,
.sp-nav__bars::after {
  display: block;
  width: 20px;
  height: 3px;
  background: var(--on-signal);
}
.sp-nav__bars {
  position: relative;
}
.sp-nav__bars::before,
.sp-nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.sp-nav__bars::before { top: -6px; }
.sp-nav__bars::after  { top: 6px; }

.sp-nav__toggle[aria-expanded="true"] .sp-nav__bars { background: transparent; }
.sp-nav__toggle[aria-expanded="true"] .sp-nav__bars::before { top: 0; transform: rotate(45deg); }
.sp-nav__toggle[aria-expanded="true"] .sp-nav__bars::after  { top: 0; transform: rotate(-45deg); }

/* 桌面:panel 就是原来的水平菜单容器,搜索那份不出现(桌面搜索在导览条里) */
.sp-nav__panel { display: flex; }
.sp-nav__search { display: none; }

/* ---------- 搜索表单(一份模板,两种上下文) ---------- */
.sp-search { display: flex; }
/* 视觉隐藏但保留给屏幕阅读器 —— 不用 display:none,那样屏读也读不到 */
.sp-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sp-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w) solid var(--line);
  border-right: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-meta);
}
.sp-search__input::placeholder { color: var(--ink-faint); }
.sp-search__submit {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  border: var(--line-w) solid var(--line);
  background: var(--ink-block);
  color: var(--on-dark);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  cursor: pointer;
}
.sp-search__submit:hover { background: var(--signal); color: var(--on-signal); }


/* ---------- 抽屉形态 ---------- */
@media (max-width: 1239px) {
  .sp-nav__toggle { display: inline-flex; }
  
  /* 顶栏吸顶 —— 这条是测试逼出来的,不是装饰:
     526 篇 / 76 页的内容站,读者滚到第 40 篇想换栏目时,汉堡早已滚出视口,
     必须先滚回页首才能开菜单。有汉堡的宽度区间就必须够得着它,所以 sticky 范围
     与抽屉断点严格一致。
     必须显式给背景色:sticky 元素默认透明,内容会从底下透过来。 */
  .sp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }

  /* 抽屉打开时汉堡改钉在视口右上角。
     原因:锁滚动靠 body{position:fixed; top:-Ypx},此时 sticky 顶栏会跟着 body
     被推到视口外 —— 汉堡(已变成 X)就看不见也点不到了,只剩 Esc 能关,手机上无解。 */
  html.sp-nav-is-open .sp-nav__toggle {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
  }

  /* 默认收起。注意:是 CSS 收起而不是 JS 收起 —— 无 JS 时 <noscript> 那段会把它掀开,
     菜单最多退回平铺,不会消失。 */
  .sp-nav__panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    gap: var(--sp-6);
    padding: calc(var(--sp-8) + var(--sp-4)) var(--sp-5) var(--sp-7);
    background: var(--ink-block);
    color: var(--on-dark);
    overflow-y: auto;
    /* 顶端金黄带:与首页报头同一套语言,抽屉不是一个陌生的白色下拉 */
    border-top: var(--sp-2) solid var(--signal);
  }
  html.sp-nav-is-open .sp-nav__panel { display: flex; }

  /* 抽屉打开时锁住背景滚动。
     只写 html{overflow:hidden} 不够:那只是不给滚动 UI,程序化滚动照样生效,
     且 iOS Safari 上对触摸滚动不可靠(滚动穿透)。所以把 body 钉成 fixed,
     位置由 JS 用负 top 保持、关闭时还原(见 assets/js/nav.js)。 */
  html.sp-nav-is-open { overflow: hidden; }
  html.sp-nav-is-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
  /* 抽屉内部仍可滚(小屏 + 大字号时菜单会超一屏),但不把滚动传给背景 */
  .sp-nav__panel { overscroll-behavior: contain; }

  .sp-nav__panel .sp-nav__list {
    flex-direction: column;
    gap: 0;
    font-size: var(--fs-h2);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--ls-display);
  }
  .sp-nav__panel .sp-nav__list li { border-bottom: var(--line-w) solid var(--line-on-dark); }
  .sp-nav__panel .sp-nav__list a {
    display: block;
    padding-block: var(--sp-4);
    border-bottom: 0;
    color: var(--on-dark);
  }
  /* 当前项:黄块黑字(10.99:1)。黄色仍然只作填充。 */
  .sp-nav__panel .sp-nav__list .current-menu-item > a,
  .sp-nav__panel .sp-nav__list .current_page_item > a,
  .sp-nav__panel .sp-nav__list .current-menu-ancestor > a {
    background: var(--signal);
    color: var(--on-signal);
    padding-inline: var(--sp-3);
    margin-inline: calc(var(--sp-3) * -1);
  }

  .sp-nav__search { display: block; }
  .sp-nav__panel .sp-search__input {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--field-border-on-dark);
  }
  .sp-nav__panel .sp-search__input::placeholder { color: var(--on-dark-faint); }
  .sp-nav__panel .sp-search__submit {
    background: var(--signal);
    color: var(--on-signal);
    border-color: var(--signal);
  }
}

/* ---------- 缺特色图占位 ----------
   生产 526 篇里 7 篇无特色图,运营忘记设图还会再出现。原先模板没有 else,
   图位整块塌掉:grid 行等高所以布局不破,但标题会跑到卡片顶部、与同行邻居的
   标题基线错开,看着像页面漏加载了(实测同行三张卡:两张标题在中部、一张在顶部)。
   占位不用灰色「暂无图片」——那是在承认缺失。黑块 + 栏目名 + 黄角标,
   让缺图变成一张最简的栏目牌,与报头/抽屉同一套语言。 */
.sp-card__media--empty {
  display: grid;
  place-items: center;
  aspect-ratio: var(--card-media-ratio);
  background: var(--ink-block);
  position: relative;
  overflow: hidden;
}
.sp-card__media-label {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-label);
  color: var(--on-dark);
  font-size: var(--fs-card);
  text-align: center;
  padding-inline: var(--sp-5);
  /* 长栏目名(如「《不栖》期刊 | Magazines」)不要撑破占位 */
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* 黄角标:占位不是空白,是有身份的一块 */
.sp-card__media--empty::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--sp-5);
  height: var(--sp-5);
  background: var(--signal);
}
.sp-card__media--featured { aspect-ratio: 4 / 3; }
.sp-card__media--featured .sp-card__media-label { font-size: var(--fs-h2); }

/* ==========================================================================
   正文排版(区块级)
   文章页是读者停留最久的地方,而这里原先只有 blockquote 三行样式。
   下面每一条都对着**实测的内容构成**写,不是照区块清单铺:
     242 张图 / 96 个图注 / 102 个分隔符 / 43 引用 / 13 pullquote /
     1449 个内链 / 128 ul / 51 ol / 7 视频 / 6 双栏图文 / 2 音频 / 1 相册
     h2 只有 13 个(几乎不用小标题 → 不做目录,做了也没内容可挂)
     alignwide / alignfull = 0(→ 不需要 add_theme_support('align-wide'))
   ========================================================================== */

/* —— 正文链接:1449 个内链,是正文里最高频的交互元素 ——
   不用变色区分(黑白+单一信号色的纪律),用下划线偏移 + hover 时黄色下划线块。 */
.sp-article__body a:not(.wp-block-button__link) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sp-article__body a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--signal);
}
/* pullquote 是黑块反白,正文通用的黑色链接在这里会变成黑字压黑底。 */
.sp-article__body .wp-block-pullquote a:not(.wp-block-button__link) {
  color: var(--on-dark);
  text-decoration-color: var(--signal);
}

.sp-article__body .post-password-form {
  padding: var(--sp-5);
  border: var(--line-w-bold) solid var(--line);
  background: var(--inset);
}
.sp-article__body .post-password-form p + p { margin-top: var(--sp-4); }
.sp-article__body .post-password-form label { display: grid; gap: var(--sp-2); }
.sp-article__body .post-password-form input[type="password"] {
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w) solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.sp-article__body .post-password-form input[type="submit"] {
  padding: var(--sp-2) var(--sp-4);
  border: var(--line-w-bold) solid var(--line);
  background: var(--ink-block);
  color: var(--on-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* —— 图与图注:96 个图注是内容站的重要元素,原先跟正文同字号、分不出来 —— */
.sp-article__body figure { margin-block: var(--sp-6); }
.sp-article__body img { max-width: 100%; height: auto; }
.sp-article__body figcaption,
.sp-article__body .wp-element-caption {
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--signal);
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: left; /* 图注左对齐:居中的短行在图下方会飘 */
}

/* —— 分隔符:102 个。默认是灰色渐隐的短线,在方案 B 里应该是黑色重线 —— */
.sp-article__body hr,
.sp-article__body .wp-block-separator {
  margin-block: var(--sp-7);
  border: 0;
  border-top: var(--line-w-bold) solid var(--line);
  /* WordPress 默认给 separator 一个 max-width,这里让它贯穿正文宽度 */
  max-width: none;
  height: 0;
  opacity: 1;
}
/* 「点状」变体保持它的语义(章节转场而非硬分隔) */
.sp-article__body .wp-block-separator.is-style-dots {
  border-top: 0;
  text-align: center;
  letter-spacing: var(--ls-label);
}

/* —— 引用 43 个 / pullquote 13 个:两者语义不同,给不同分量 —— */
.sp-article__body blockquote {
  border-left: 6px solid var(--signal);
  padding-left: var(--sp-5);
  color: var(--ink-muted);
}
.sp-article__body blockquote cite,
.sp-article__body .wp-block-quote__citation {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  font-style: normal;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}
/* pullquote 是「抽出来的重点」,用黑块反白 —— 与报头/抽屉同一套语言 */
.sp-article__body .wp-block-pullquote {
  margin-block: var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  border: 0;
  background: var(--ink-block);
  color: var(--on-dark);
  text-align: left;
}
.sp-article__body .wp-block-pullquote blockquote {
  border-left: 0;
  padding-left: 0;
  color: var(--on-dark);
}
.sp-article__body .wp-block-pullquote p {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
.sp-article__body .wp-block-pullquote cite { color: var(--signal); }

/* —— 列表 128 ul / 51 ol:原先没样式,标记符贴着正文左边缘 —— */
.sp-article__body :where(ul, ol) {
  padding-left: var(--sp-5);
  line-height: var(--lh-body);
}
.sp-article__body :where(ul, ol) li + li { margin-top: var(--sp-2); }
.sp-article__body ul { list-style: square; }   /* 直角方块,与 radius:0 的纪律一致 */
.sp-article__body ::marker { color: var(--signal-deep); }

/* —— 视频 7 / 音频 2 / 内嵌 63:必须能缩,否则手机端横向溢出 —— */
.sp-article__body :where(video, audio, iframe, embed, object) {
  max-width: 100%;
}
.sp-article__body audio { width: 100%; }
.sp-article__body .wp-block-embed__wrapper { position: relative; }
/* WordPress 自带 responsive embed 的 aspect-ratio 类,这里只补它没覆盖的裸 iframe */
.sp-article__body > iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }

/* —— 双栏图文 6 个:窄屏必须堆叠,否则文字被压成一列字 —— */
@media (max-width: 700px) {
  .sp-article__body .wp-block-media-text {
    display: block;
  }
  .sp-article__body .wp-block-media-text__content { padding: var(--sp-5) 0 0; }
}

/* —— 相册 1 个:默认 flex 会让最后一行图被拉伸 —— */
.sp-article__body .wp-block-gallery { gap: var(--sp-3); }

/* —— 表格:内容里现在是 0 个,但运营随时会加,且默认表格无边框极难读 —— */
.sp-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.sp-article__body :where(th, td) {
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w) solid var(--line-soft);
  text-align: left;
}
.sp-article__body th { background: var(--inset); font-weight: 700; }

/* —— 上下篇:原先左右两端对齐、没有标签,读者看不出哪个是上一篇 —— */
.sp-adjacent__prev, .sp-adjacent__next { max-width: 46%; }
/* 整块可点,不只是那行字 —— 手机上一行小字的点击区太小 */
.sp-adjacent a { display: block; padding-block: var(--sp-2); }
.sp-adjacent__prev::before,
.sp-adjacent__next::before {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}
.sp-adjacent__prev::before { content: "上一篇"; }
.sp-adjacent__next::before { content: "下一篇"; }
.sp-adjacent__next { text-align: right; margin-left: auto; }
.sp-adjacent a { text-decoration: none; border-bottom: 2px solid transparent; }
.sp-adjacent a:hover { border-bottom-color: var(--signal); }

/* ==========================================================================
   二级导航
   生产菜单本来就是两层,之前 depth=1 把 9 个二级项整个截掉:
     系列活动 | Activities ├ 主讲 180 / 众读 23 / 回顾 58 / 播客 29 / 友情转载 34
     《不栖》期刊 ├ 创刊号 3 / 第二期 20 / 第三期 1
     联系我们 └ 加入我们 15
   「主讲」180 篇是全站第二大栏目,却在导航里看不到 —— 这不是样式问题,是丢了半个导航。
   ========================================================================== */

/* ---------- 桌面:纯 CSS 下拉 ---------- */
/* 为什么用 opacity 而不是 display:none 来收起:
   display:none / visibility:hidden 的元素**不可聚焦**,`:focus-within` 就永远触发不了 ——
   键盘用户 Tab 到父项后没有任何办法进入二级(死锁)。
   opacity:0 的元素仍可聚焦,Tab 进去即触发 :focus-within 显示出来。
   pointer-events:none 负责让它在收起时不挡住下面的内容。 */
@media (min-width: 1240px) {
  .sp-nav__list > li { position: relative; }

  /* 有子项的父级给一个指示符 —— 否则读者不知道这里还有东西 */
  .sp-nav__list > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  .sp-nav__list .sub-menu {
    position: absolute;
    /* ⚠️ 必须紧贴 `top: 100%`,把视觉间隙做进自己的 padding 里。
       写成 `top: calc(100% + 8px)` 会在父项底边和面板之间留一条 8px 的死区:
       鼠标慢慢往下移时会落进那条缝 → `li:hover` 断开 → pointer-events 立刻变 none
       → 面板永远够不到。只有把鼠标甩得够快才点得中,这不是交互,是运气。 */
    top: 100%;
    left: 0;
    z-index: 80;
    min-width: max(180px, 100%);
    /* 限宽 + 允许换行,否则长栏目名会把面板撑得很宽:
       靠右的项即使右对齐,也会从**左**边缘溢出去(实测长标题下左溢出 60px)。
       宽度封顶之后,长标题换行处理,面板始终留在视口里。 */
    max-width: min(320px, 40vw);
    margin: 0;
    /* 上 padding 兼作与父项的视觉间隙,同时是连接鼠标路径的「桥」 */
    padding: var(--sp-4) 0 var(--sp-2);
    list-style: none;
    /* 黑块反白 —— 与报头、抽屉同一套语言,不是一个陌生的白色浮层 */
    background: var(--ink-block);
    color: var(--on-dark);
    /* 整圈金黄描边,不只是顶边:首页报头也是黑块,下拉浮在它上面时黑压黑、
       只剩一条顶边能分辨,几乎融进背景(实测截图确认)。
       金黄作边框是合规用法(非文字、非有意义图形),而且在白底页面上同样清晰。
       方案 B 不用阴影 —— 那是「有厚度的界面」语言,这套是平面海报。 */
    border: 2px solid var(--signal);
    border-top-width: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }
  @media (prefers-reduced-motion: no-preference) {
    .sp-nav__list .sub-menu { transition: opacity 120ms ease, transform 120ms ease; }
  }
  .sp-nav__list > li:hover > .sub-menu,
  .sp-nav__list > li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* 靠右的父项(生产菜单里「联系我们」是第 7 项、下面还挂着「加入我们」)
     用左对齐会把面板推出容器右缘、撑出横向滚动。最后三项改成右对齐。 */
  .sp-nav__list > li:nth-last-child(-n+3) .sub-menu {
    left: auto;
    right: 0;
  }
  .sp-nav__list .sub-menu a {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    color: var(--on-dark);
    border-bottom: 0;
    /* 不用 nowrap:长栏目名会把面板撑到溢出视口。换行比横向溢出好。 */
    white-space: normal;
    line-height: var(--lh-heading);
  }
  .sp-nav__list .sub-menu a:hover,
  .sp-nav__list .sub-menu a:focus-visible {
    background: var(--signal);
    color: var(--on-signal);
  }
  /* 当前项:黄块黑字。祖先项在顶栏保持原来的黄下划线,不再叠一层 */
  .sp-nav__list .sub-menu .current-menu-item > a {
    background: var(--signal);
    color: var(--on-signal);
    font-weight: 800;
  }
}

/* ---------- 手机抽屉:二级直接缩进展开 ---------- */
/* 不做折叠:抽屉是全屏专用空间,滚动成本远低于「再点一次才看得到」。
   17 项确实超过一屏,但 .sp-nav__panel 本来就可滚(且 overscroll-behavior: contain)。 */
@media (max-width: 1239px) {
  .sp-nav__panel .sp-nav__list .sub-menu {
    margin: 0;
    padding: 0 0 var(--sp-3) 0;
    list-style: none;
  }
  .sp-nav__panel .sp-nav__list .sub-menu li { border-bottom: 0; }
  .sp-nav__panel .sp-nav__list .sub-menu a {
    padding-block: var(--sp-3);
    padding-left: var(--sp-4);
    /* 一条金黄竖线标出层级,比缩进本身更清楚 */
    border-left: 3px solid var(--signal);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--on-dark-muted);
  }
  .sp-nav__panel .sp-nav__list .sub-menu .current-menu-item > a {
    background: var(--signal);
    color: var(--on-signal);
    font-weight: 700;
  }
  /* 有子项的父级不再显示底部分隔线 —— 它和自己的子项是一组 */
  .sp-nav__panel .sp-nav__list > li.menu-item-has-children { border-bottom: 0; }
  .sp-nav__panel .sp-nav__list > li.menu-item-has-children > a { padding-bottom: var(--sp-2); }
}

/* ---------- 同栏目相关文章 ----------
   文章页动辄 8000px(实测一篇 8291px),读到底原先只有按日期相邻的上下篇。
   这一块是尾部的重音:3 张卡片 + 一个「浏览全部 N 篇」的出口。
   卡片直接复用 .sp-grid / card.php —— 同一个站里「一篇文章的入口」只该有一种长相。 */
.sp-related {
  padding-block: var(--sp-8);
  border-top: var(--line-w-bold) solid var(--line);
}
.sp-related__kicker {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  background: var(--signal);
  color: var(--on-signal);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.sp-related__title {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}
.sp-related__more {
  margin-top: var(--sp-6);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-label);
}
.sp-related__more a {
  text-decoration: none;
  border-bottom: 3px solid var(--signal);
  padding-bottom: 2px;
}
.sp-related__more a:hover { background: var(--signal); color: var(--on-signal); border-bottom-color: var(--ink); }

/* 手机端分页:11 个元素在 390px 下折两行,而且「下一页」被挤到第二行末尾 ——
   最重要的行动落在最不显眼的位置。这里只留 上一页 / 状态 / 下一页 三件。
   两套都在 HTML 里,纯 CSS 切换,不需要知道视口、也不需要 JS。 */
@media (max-width: 700px) {
  .sp-pagination { display: flex; flex-direction: column; gap: var(--sp-3); }
  .sp-pagination li .page-numbers:not(.prev):not(.next) { display: none; }
  .sp-pagination > ul { justify-content: space-between; gap: var(--sp-3); }
  /* 第 1 页没有「上一页」,space-between 会把「下一页」推到最左 ——
     正好落在其它页「上一页」的位置上,方向感是反的。强制它始终靠右。 */
  .sp-pagination .page-numbers.next { margin-left: auto; }
  .sp-pagination__status {
    display: block;
    order: -1;
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-label);
    color: var(--ink-faint);
    text-align: center;
  }
}

/* 独立页面没有日期/作者,不出元信息;保留那条分隔线,让标题到正文的节奏和文章页一致 */
.sp-article__rule {
  margin-top: var(--sp-5);
  border-top: var(--line-w-bold) solid var(--line);
}

/* ==========================================================================
   打印
   内容站的读者会把讲座记录、书目单打出来。而方案 B 大量用黑块(报头、页脚、
   pullquote、标签),照原样打印会糊掉好几片实心黑 —— 既费墨又难读。
   打印时把「黑块反白」翻回「白底黑字 + 描边」,并去掉所有导航类元素:
   纸上点不了链接,它们只是噪音。
   ========================================================================== */
@media print {
  /* 导航类元素在纸上没有意义 */
  .sp-header,
  .sp-footer,
  .sp-nav,
  .sp-nav__toggle,
  .sp-skip,
  .sp-pagination,
  .sp-adjacent,
  .sp-related,
  .sp-search,
  .sp-empty__cats { display: none !important; }

  /* 黑块反白 → 白底黑字加描边,否则整片吃墨 */
  .sp-masthead,
  .sp-article__body .wp-block-pullquote,
  .sp-tag,
  .sp-card__media--empty {
    background: var(--print-bg) !important;
    color: var(--print-ink) !important;
    border: 1px solid var(--print-ink);
  }
  .sp-masthead__kicker,
  .sp-page-head__kicker,
  .sp-related__kicker {
    background: transparent !important;
    color: var(--print-ink) !important;
    border: 1px solid var(--print-ink);
  }

  /* 正文用满纸宽,不要保留屏幕上的 66ch 行宽 */
  .sp-container,
  .sp-container--narrow,
  .sp-article__body { max-width: none; padding-inline: 0; }

  /* 图片不要跨页断开;大图限高,免得一张图占满一页 */
  .sp-article__body :where(figure, img),
  .sp-article__hero img {
    break-inside: avoid;
    max-height: 12cm;
  }
  .sp-article__title { break-after: avoid; }
  .sp-article__body h2, .sp-article__body h3 { break-after: avoid; }

  /* 正文链接在纸上点不了,但保留下划线以示原文有链接;不展开 URL ——
     CJK 正文里 1449 个链接,展开会把版面撑烂。 */
  .sp-article__body a { text-decoration: underline; color: var(--print-ink) !important; }

  body { background: var(--print-bg); color: var(--print-ink); }
}

/* ---------- 顶栏搜索(details,零 JS) ----------
   原先挂在分类导览条右端,而那条导览条与主导航 100% 重复(8 项全在主导航里、
   零独有)已经删掉,搜索搬到顶栏。
   折叠态只占约 56px:顶栏 8 个双语菜单项已经吃掉 979px,放不下常驻输入框。 */
.sp-search-toggle {
  position: relative;
  flex: 0 0 auto;
}
.sp-search-toggle__button {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border: var(--line-w-bold) solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  cursor: pointer;
  /* 去掉浏览器默认的三角标记 */
  list-style: none;
}
.sp-search-toggle__button::-webkit-details-marker { display: none; }
.sp-search-toggle[open] .sp-search-toggle__button { background: var(--signal); color: var(--on-signal); }
.sp-search-toggle__panel {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: 80;
  width: min(320px, 70vw);
  padding: var(--sp-4);
  /* 与二级下拉同一套语言:黑块 + 整圈金黄描边 */
  background: var(--ink-block);
  border: 2px solid var(--signal);
}
.sp-search-toggle__panel .sp-search__input {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--field-border-on-dark);
}
.sp-search-toggle__panel .sp-search__input::placeholder { color: var(--on-dark-faint); }
.sp-search-toggle__panel .sp-search__submit {
  background: var(--signal);
  color: var(--on-signal);
  border-color: var(--signal);
}
/* 抽屉断点以下不出:手机端的搜索在抽屉里 */
@media (max-width: 1239px) {
  .sp-search-toggle { display: none; }
}

/* 归档页头的篇数 —— 接管被删掉的导览条唯一独有的信息 */
.sp-page-head__count {
  margin-left: var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  vertical-align: middle;
}