/* --hope-space-* 间距 token 已上移到 hope.css（全站加载）。
   这份样式表只在阅读专题页通过 caseStyle 引入，token 留在这里的话，
   /blog/ 的专题横幅这类专题外的组件就用不上同一套刻度。 */
:root {
  --reading-signal: #e63b32;
  --reading-signal-dark: #f05a50;
  --reading-paper: #eeeae8;
  --reading-ink: #121212;
}

.reading-series,
.reading-series-article {
  --reading-accent: var(--reading-signal);
}

@media (prefers-color-scheme: dark) {
  .reading-series,
  .reading-series-article {
    --reading-accent: var(--reading-signal-dark);
  }
}

html[color-scheme="dark"] .reading-series,
html[color-scheme="dark"] .reading-series-article {
  --t-bright: #ffffff;
  --t-medium: #b8bbc4;
  --t-muted: #9ca0aa;
  --st-medium: #45484d;
  --reading-accent: var(--reading-signal-dark);
}

.reading-series {
  position: relative;
  padding: var(--hope-space-8) 0 clamp(12rem, 16vw, 22rem);
}

.reading-overline,
.reading-series__breadcrumbs,
.reading-series__facts dt,
.reading-series__progress,
.reading-chapter__meta,
.reading-chapter__source,
.reading-article-nav span,
.reading-source-note > p:first-child,
.reading-note-figure figcaption {
  font-family: var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reading-overline {
  margin: 0;
  color: var(--reading-accent);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.reading-series__breadcrumbs {
  display: flex;
  gap: var(--hope-space-3);
  align-items: center;
  margin-bottom: clamp(7.2rem, 9vw, 12rem);
  color: var(--t-medium);
  font-size: 1.1rem;
}

.reading-series__breadcrumbs a {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  color: var(--t-bright);
}

.reading-series__hero-grid,
.reading-series__statement-grid,
.reading-series__source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(28rem, 0.65fr);
  gap: clamp(4rem, 8vw, 14rem);
}

.reading-series__intro h1 {
  margin: var(--hope-space-8) 0 0;
  color: var(--t-bright);
  font-size: clamp(5.2rem, 8.4vw, 13.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.reading-series__intro h1 span {
  display: block;
}

.reading-series__subtitle {
  max-width: 72rem;
  margin: var(--hope-space-8) 0 0;
  color: var(--t-medium);
  font-size: clamp(1.8rem, 1.8vw, 2.6rem);
  line-height: 1.55;
}

.reading-series__summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--hope-space-2);
}

.reading-series__summary > p {
  max-width: 48rem;
  margin: 0;
  color: var(--t-medium);
  font-size: clamp(1.6rem, 1.35vw, 2rem);
  line-height: 1.72;
}

.reading-series__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: var(--hope-space-12) 0 0;
  border-top: 1px solid var(--st-medium);
  border-bottom: 1px solid var(--st-medium);
}

.reading-series__facts div {
  padding: var(--hope-space-4) var(--hope-space-3) var(--hope-space-4) 0;
}

.reading-series__facts div + div {
  padding-left: var(--hope-space-3);
  border-left: 1px solid var(--st-medium);
}

.reading-series__facts dt {
  color: var(--t-medium);
  font-size: 1rem;
}

.reading-series__facts dd {
  margin: var(--hope-space-2) 0 0;
  color: var(--t-bright);
  font: 600 clamp(1.8rem, 2vw, 2.8rem)/1 var(--_font-default);
}

.reading-series__master-art {
  margin: clamp(7.2rem, 10vw, 14rem) auto 0;
  /* 不限高的话，1440 视口下这张 4:3 画稿会铺到 1380×1036——比一整屏还高，
     得滚一屏才看得完一张图。改成按高度定尺寸（见下面的 max-height）。
     宽度用 fit-content 让边框正好裹住画稿：如果留成整宽再 contain，
     画稿两侧会多出一圈纸色留白，看起来像「画框里又套了一个画框」。 */
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--st-medium);
  background: var(--reading-paper);
}

.reading-series__master-art img,
.reading-note-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* 普通文章（非专题）仍在正文上方放封面。同样要限高：不限的话 4:3 的图
   在宽轨道里会高过一整屏——和之前专题首图一模一样的毛病。 */
/* 封面那一块不分栏，退回单列 */
.reading-article-column--single {
  display: block;
}

.reading-article-cover {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 62svh;
  margin-inline: 0;
  overflow: hidden;
  border: 1px solid var(--st-medium);
  background: var(--reading-paper);
}

/* 限高统一走这一条：超过大半屏的图，读者得滚一屏才能看完一张画，阅读节奏就断了。
   宽度交给 auto 由高度反推，图片保持原比例，一个像素都不裁——这些是带标题和
   图注的编辑插画，不是照片，裁掉就少信息。 */
.reading-series__master-art img,
.reading-note-figure img {
  width: auto;
  max-width: 100%;
  max-height: 62svh;
}

.reading-series__statement,
.reading-series__chapters,
.reading-series__source {
  margin-top: clamp(12rem, 15vw, 22rem);
}

.reading-series__statement-grid {
  margin-top: var(--hope-space-12);
  align-items: start;
}

.reading-series__statement h2,
.reading-series__source h2 {
  margin: 0;
  color: var(--t-bright);
  font-size: clamp(4rem, 6vw, 9.2rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.reading-series__statement h2 span {
  display: block;
}

.reading-series__statement-grid > div > p {
  margin: 0;
  color: var(--t-medium);
  font-size: clamp(1.7rem, 1.5vw, 2.2rem);
  line-height: 1.78;
}

.reading-series__statement-grid > div > p + p {
  margin-top: var(--hope-space-6);
}

.reading-series__section-head {
  display: flex;
  gap: var(--hope-space-12);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--hope-space-16);
}

.reading-series__section-head h2 {
  max-width: 92rem;
  margin: var(--hope-space-6) 0 0;
  color: var(--t-bright);
  font-size: clamp(4rem, 6vw, 8.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.reading-series__progress {
  flex: 0 0 min(32rem, 28vw);
  color: var(--t-medium);
  font-size: 1.1rem;
}

.reading-series__progress strong {
  display: block;
  margin-top: var(--hope-space-3);
  color: var(--t-bright);
  font-size: 2rem;
}

.reading-series__progress-line {
  display: block;
  height: 2px;
  margin-top: var(--hope-space-4);
  background: var(--st-medium);
}

.reading-series__progress-line > span {
  display: block;
  width: var(--reading-progress);
  height: 100%;
  background: var(--reading-accent);
}

.reading-series__chapter-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--st-bright);
}

.reading-chapter {
  border-bottom: 1px solid var(--st-medium);
}

.reading-chapter__inner {
  display: grid;
  grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 2fr) minmax(18rem, 0.7fr);
  gap: var(--hope-space-8);
  align-items: start;
  padding: clamp(3.2rem, 4vw, 5.6rem) 0;
  color: inherit;
}

a.reading-chapter__inner {
  transition: color 0.3s ease, transform 0.3s ease;
}

a.reading-chapter__inner:hover,
a.reading-chapter__inner:focus-visible {
  color: var(--reading-accent);
  transform: translateX(var(--hope-space-2));
}

a.reading-chapter__inner:focus-visible,
.reading-article-nav a:focus-visible,
.reading-series__breadcrumbs a:focus-visible {
  outline: 2px solid var(--reading-accent);
  outline-offset: var(--hope-space-2);
}

.reading-chapter__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--hope-space-3);
  color: var(--t-medium);
  font-size: 1.05rem;
}

.reading-chapter__body h3 {
  margin: 0;
  color: var(--t-bright);
  font-size: clamp(2.4rem, 2.8vw, 4rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.reading-chapter__body p {
  max-width: 72rem;
  margin: var(--hope-space-4) 0 0;
  color: var(--t-medium);
  font-size: 1.5rem;
  line-height: 1.65;
}

.reading-chapter__source {
  color: var(--t-medium);
  font-size: 1.05rem;
  text-align: right;
}

.reading-chapter__source span {
  display: block;
}

.reading-chapter__source span + span {
  margin-top: var(--hope-space-3);
  color: var(--t-bright);
}

.reading-chapter.is-upcoming .reading-chapter__title {
  color: var(--t-medium);
}

.reading-series__source-grid {
  margin-top: var(--hope-space-12);
}

.reading-series__source dl {
  margin: 0;
  border-top: 1px solid var(--st-bright);
}

.reading-series__source dl div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--hope-space-6);
  padding: var(--hope-space-6) 0;
  border-bottom: 1px solid var(--st-medium);
}

.reading-series__source dt {
  color: var(--t-medium);
}

.reading-series__source dd {
  margin: 0;
  color: var(--t-bright);
  line-height: 1.6;
}

.reading-article .inner-headline__content {
  max-width: 150rem;
}

.reading-article .inner-headline__title h1 {
  max-width: 140rem;
  font-size: clamp(4.2rem, 6.6vw, 10rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.reading-article .inner-headline__title h1 span {
  display: block;
}

.reading-article .inner-headline__subtitle {
  max-width: 76rem;
}

/* 模板的 .mxd-grid-item 自带左右内距，而标题那一块不经过它。
   不抹掉的话，正文比标题多缩进 30px，左轴线还是对不齐。 */
.reading-article-column {
  padding-inline: 0;
  /* 这里不能用 align-items:start。sticky 元素只在它的父容器范围内粘着，
     start 会让副栏这个网格项收缩到内容高度（很矮），sticky 几乎没有可走的行程，
     一滚就跟着正文划走了。默认的 stretch 让副栏和正文栏等高，粘性才有意义。 */
  align-items: stretch;
}

.reading-article-aside {
  height: 100%;
}

/* ===== 正文右侧的专题副栏 ===== */
.reading-article-aside__inner {
  position: sticky;
  /* 让开固定头部 */
  top: 14rem;
  padding-top: var(--hope-space-4);
  border-top: 1px solid var(--st-bright);
}

/* 本文目录：副栏的第一块，读者最先需要的是「这篇讲了什么」 */
.reading-article-toc {
  margin-bottom: var(--hope-space-10);
  padding-bottom: var(--hope-space-6);
  border-bottom: 1px solid var(--st-medium);
}

.reading-article-toc ol {
  margin: var(--hope-space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.reading-article-toc li {
  margin-top: var(--hope-space-3);
}

.reading-article-toc a {
  display: block;
  padding-left: var(--hope-space-4);
  border-left: 2px solid transparent;
  color: var(--t-medium);
  font-size: 1.3rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.reading-article-toc a:hover,
.reading-article-toc a.is-current {
  border-left-color: var(--reading-accent);
  color: var(--t-bright);
}

/* 点目录跳转时，别让固定头部盖住小节标题 */
.reading-article-content h2 {
  scroll-margin-top: 12rem;
}

.reading-article-aside__series {
  display: block;
  margin-top: var(--hope-space-3);
  color: var(--t-bright);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.reading-article-aside__series:hover {
  color: var(--reading-accent);
}

.reading-article-aside__progress {
  margin: var(--hope-space-4) 0 0;
  font-family: var(--_font-accent);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--t-medium);
}

.reading-article-aside__progress > span {
  display: block;
}

.reading-article-aside__line {
  height: 2px;
  margin: var(--hope-space-2) 0;
  background: var(--st-medium);
}

.reading-article-aside__line > span {
  display: block;
  width: var(--reading-progress);
  height: 100%;
  background: var(--reading-accent);
}

.reading-article-aside__list {
  margin: var(--hope-space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--st-medium);
}

.reading-article-aside__list li {
  border-bottom: 1px solid var(--st-medium);
  font-size: 1.3rem;
  line-height: 1.45;
}

.reading-article-aside__list a,
.reading-article-aside__list li > span {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--hope-space-2);
  padding: var(--hope-space-3) 0;
  color: var(--t-medium);
  text-decoration: none;
  transition: color 0.2s ease;
}

.reading-article-aside__list a:hover {
  color: var(--reading-accent);
}

.reading-article-aside__list li > * > span {
  font-family: var(--_font-accent);
  font-size: 1rem;
  color: var(--t-muted);
}

.reading-article-aside__list .is-current > span {
  color: var(--t-bright);
  font-weight: 600;
}

.reading-article-aside__list .is-upcoming > span {
  color: var(--t-muted);
}

/* 文章标题按 DESIGN.md 的 H1 级：clamp(4rem, 5.5vw, 8rem) / 600 / 1.02 / -0.035em。
   模板给的字号没有上限，1920 下会涨到 95px；塞进 76rem 的阅读栏里，
   21 个字的中文标题会碎成 5 行，"价："和"在"各自孤零零占一行。
   按规范封到 8rem 之后是 3 行，断行也正常。 */
.reading-article .inner-headline__title h1 {
  font-size: clamp(4rem, 5.5vw, 8rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* ===== 文章头部：宽屏两栏 =====
   和 .hopeflow-hero__grid / .reading-series__hero-grid 同一套网格。
   之前试过「整栏居中 76rem」，宽屏下标题被压在窄栏里会碎成 5 行带孤字；
   也试过「全部贴左」，右边整片空。两栏才是这个站已有的答案。 */
.reading-article-head,
.reading-article-column {
  display: grid;
  /* 头部和正文必须用同一套轨道，否则第二栏落点对不齐。
     模板给 .inner-headline 限了宽（1920 下 1500px），而正文块是整宽 1780px，
     所以下面要把头部的宽度限制解开。 */
  grid-template-columns: minmax(0, 1.35fr) minmax(26rem, 0.65fr);
  gap: clamp(4rem, 6vw, 10rem);
}

.reading-article-head {
  align-items: end;
}

/* 限宽的是 .inner-headline__content（模板给了 max-width:1500px），
   而正文块是整宽 1780px。不解开这道限制，两个网格的第二栏会差出 189px。
   .reading-article-head 就加在这个元素上，所以直接覆盖它。 */
.reading-article .inner-headline,
.reading-article .inner-headline__content.reading-article-head {
  max-width: none;
  width: 100%;
}

.reading-article .inner-headline__title {
  grid-column: 1;
}

.reading-article .inner-headline__title h1 {
  font-size: clamp(4rem, 5.5vw, 8rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* 摘要与元信息叠在窄栏，底对齐 */
.reading-article .inner-headline__subtitle,
.reading-article .inner-headline__tags {
  grid-column: 2;
}

.reading-article .inner-headline__subtitle p {
  font: 400 clamp(1.6rem, 1.35vw, 2rem) / 1.72 var(--_font-default);
  letter-spacing: 0;
  color: var(--t-medium);
}

.reading-article .inner-headline__tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--hope-space-2) var(--hope-space-4);
  margin-top: var(--hope-space-6);
  padding-top: var(--hope-space-4);
  border-top: 1px solid var(--st-medium);
}

.reading-article .inner-headline__tags .meta-tag {
  font-family: var(--_font-accent);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--t-medium);
}

.reading-article .inner-headline {
  margin-bottom: var(--hope-space-16);
}

@media only screen and (max-width: 1199px) {
  /* 必须放在基础两栏网格之后，否则后面的 grid-template-columns 会把断点覆盖。
     平板和手机改成完整单栏，专题导航排到正文后面。 */
  .reading-article-column {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hope-space-16);
  }

  .reading-article-content,
  .reading-article-aside {
    min-width: 0;
  }

  .reading-article-aside__inner {
    position: static;
  }
}

@media only screen and (max-width: 991px) {
  .reading-article-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hope-space-8);
  }
  .reading-article .inner-headline__title,
  .reading-article .inner-headline__subtitle,
  .reading-article .inner-headline__tags {
    grid-column: 1;
  }
}


.reading-article-content {
  /* 容器撑满整条轨道，宽度限制下放到具体元素上：
     文字按 DESIGN.md 的阅读栏宽 76rem 收住，插图则可以铺满整栏。
     如果把 76rem 加在容器上，插图最宽也只能到 760px，比正文一样宽、没有分量。 */
  max-width: none;
  /* 整栏居中。这里踩过两个坑，记一下：
     原始状态是「正文居中(340) + 标题贴左(30)」——一篇文章里两条左轴线，
     从摘要读进正文视线要向右跳 310px。
     第一次修成了「全部贴左(30)」，轴线是一条了，但 76rem 的栏钉在最左边，
     宽屏右侧空出一大片，页面重心整个偏掉。
     现在是「整块居中」：标题、摘要、元信息、正文、插图共用同一条居中的轴线，
     既只有一条轴线，页面也平衡。见下面 .reading-article .inner-headline。 */
  /* 不能再 margin-inline:auto：它现在是网格第一栏的内容，居中会让正文
     从轨道左缘往右缩进 187px，和上方标题对不齐。 */
  margin-inline: 0;
  color: var(--t-medium);
  font-size: clamp(1.8rem, 1.6vw, 2.2rem);
  line-height: 1.78;
}

.reading-article-content > *:not(.reading-note-figure) {
  max-width: 76rem;
}

.reading-article-content > *:first-child {
  margin-top: 0;
}

/* 正文段落必须显式写字号，不能指望从容器继承。
   模板有一条裸元素规则 `p { font: normal 500 1.6rem/1.4 }`——继承值在 CSS 里
   输给任何直接命中的规则，哪怕它特异性只有 (0,0,1)。所以同一篇文章里
   <li> 乖乖继承了 22px/1.78，<p> 却被那条规则抓成 16px/500/1.4，
   段落比列表还小、还挤、还粗。这是文章读起来"没排版"的主因。
   下面按 DESIGN.md 的 Body / large 写死：22px / 400 / 1.78。 */
.reading-article-content p {
  margin: 0 0 var(--hope-space-6);
  font: 400 clamp(1.8rem, 1.6vw, 2.2rem) / 1.78 var(--_font-default);
  color: var(--t-medium);
}

/* 列表项和段落同级，别让两者错开 */
.reading-article-content li {
  font: 400 clamp(1.8rem, 1.6vw, 2.2rem) / 1.78 var(--_font-default);
}

.reading-article-content .reading-article-lead {
  margin-bottom: var(--hope-space-12);
  color: var(--t-bright);
  font-size: clamp(2.2rem, 2.3vw, 3.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.reading-article-content h2 {
  margin: clamp(7.2rem, 9vw, 12rem) 0 var(--hope-space-8);
  color: var(--t-bright);
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.reading-article-content h3 {
  margin: var(--hope-space-10) 0 var(--hope-space-4);
  color: var(--t-bright);
  font-size: clamp(2.2rem, 2.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.2;
}

.reading-article-content ul,
.reading-article-content ol {
  margin: var(--hope-space-6) 0 var(--hope-space-8);
  padding-left: var(--hope-space-6);
}

.reading-article-content li {
  margin-bottom: var(--hope-space-3);
  padding-left: var(--hope-space-2);
}

.reading-article-content li::marker {
  color: var(--reading-accent);
  font-family: var(--_font-accent);
}

.reading-article-content blockquote {
  margin: var(--hope-space-10) 0;
  padding: var(--hope-space-6) 0 var(--hope-space-6) var(--hope-space-6);
  border-left: 3px solid var(--reading-accent);
  color: var(--t-bright);
  font-size: clamp(2rem, 2vw, 2.8rem);
  line-height: 1.55;
}

.reading-note-figure {
  /* 撑满正文所在的那一栏（比 76rem 的文字栏宽，插图才有分量），左边界和正文、标题同轴。
     这里原来是 margin-left:50% + translateX(-50%)——那是正文还居中时的写法，
     以文字栏中心为轴向两侧撑开。正文改成靠左的网格轨道之后，同一条规则会把插图
     往左推出轨道、挂进左边的空白里，看着像放歪了。 */
  width: 100%;
  margin: clamp(6.4rem, 8vw, 10rem) 0;
  overflow: hidden;
  border: 1px solid var(--st-medium);
}

.reading-note-figure figcaption {
  display: flex;
  gap: var(--hope-space-4);
  justify-content: space-between;
  padding: var(--hope-space-4);
  border-top: 1px solid var(--st-medium);
  color: var(--t-medium);
  /* DESIGN.md 的 Caption 级：1.2rem / 500 / 0.04em */
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
}

.reading-note-figure figcaption span:last-child {
  max-width: 58rem;
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
}

.reading-source-note {
  margin-top: clamp(7.2rem, 9vw, 12rem);
  padding: var(--hope-space-6) 0 0;
  border-top: 1px solid var(--st-bright);
}

.reading-source-note > p:first-child {
  margin-bottom: var(--hope-space-3);
  color: var(--reading-accent);
  font-size: 1.1rem;
}

.reading-source-note > p:last-child {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.65;
}

.reading-article-nav {
  margin-top: clamp(10rem, 13vw, 18rem);
  border-top: 1px solid var(--st-bright);
  border-bottom: 1px solid var(--st-medium);
}

.reading-article-nav__series {
  display: flex;
  justify-content: space-between;
  gap: var(--hope-space-6);
  padding: var(--hope-space-6) 0;
  color: var(--t-bright);
}

.reading-article-nav__series strong {
  color: var(--reading-accent);
  font-family: var(--_font-accent);
}

.reading-article-nav__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--st-medium);
}

.reading-article-nav__links > * {
  min-height: 16rem;
  padding: var(--hope-space-6) 0;
}

.reading-article-nav__links > * + * {
  padding-left: var(--hope-space-8);
  border-left: 1px solid var(--st-medium);
}

.reading-article-nav__links a {
  color: var(--t-bright);
  transition: color 0.3s ease, transform 0.3s ease;
}

.reading-article-nav__links a:hover,
.reading-article-nav__links a:focus-visible {
  color: var(--reading-accent);
  transform: translateY(calc(var(--hope-space-1) * -1));
}

.reading-article-nav__links span {
  display: block;
  color: var(--t-medium);
  font-size: 1.05rem;
}

.reading-article-nav__links strong {
  display: block;
  max-width: 48rem;
  margin-top: var(--hope-space-4);
  font-size: clamp(2rem, 2vw, 3rem);
  line-height: 1.2;
}

.reading-article-nav__links .is-unavailable {
  opacity: 0.45;
}

@media only screen and (max-width: 991px) {
  .reading-series__hero-grid,
  .reading-series__statement-grid,
  .reading-series__source-grid {
    grid-template-columns: 1fr;
    gap: var(--hope-space-12);
  }

  .reading-series__summary {
    max-width: 68rem;
  }

  .reading-series__section-head {
    display: grid;
    align-items: start;
  }

  .reading-series__progress {
    width: min(100%, 36rem);
  }

  .reading-chapter__inner {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .reading-chapter__source {
    grid-column: 2;
    text-align: left;
  }
}

@media only screen and (max-width: 575px) {
  .reading-article .inner-headline__title h1 {
    font-size: clamp(3.4rem, 10.66vw, 4rem);
  }

  .reading-article .inner-headline__title h1 span {
    display: block;
  }

  .reading-series {
    padding-top: var(--hope-space-4);
  }

  .reading-series__breadcrumbs {
    margin-bottom: var(--hope-space-16);
  }

  .reading-series__facts {
    grid-template-columns: 1fr;
  }

  .reading-series__facts div + div {
    padding-left: 0;
    border-top: 1px solid var(--st-medium);
    border-left: 0;
  }

  .reading-series__statement,
  .reading-series__chapters,
  .reading-series__source {
    margin-top: 11.2rem;
  }

  .reading-chapter__inner {
    grid-template-columns: 1fr;
    gap: var(--hope-space-4);
  }

  .reading-chapter__meta {
    max-width: 18rem;
  }

  .reading-chapter__source {
    grid-column: auto;
  }

  .reading-note-figure {
    /* 窄屏正文本来就接近满宽，插图跟着满宽即可，仍然贴左不居中 */
    width: 100%;
    margin-top: var(--hope-space-16);
    margin-bottom: var(--hope-space-16);
  }

  .reading-note-figure figcaption {
    display: block;
  }

  .reading-note-figure figcaption span:last-child {
    margin-top: var(--hope-space-2);
    text-align: left;
  }

  .reading-article-nav__links {
    grid-template-columns: 1fr;
  }

  .reading-article-nav__links > * {
    min-height: 12rem;
  }

  .reading-article-nav__links > * + * {
    padding-left: 0;
    border-top: 1px solid var(--st-medium);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.reading-chapter__inner,
  .reading-article-nav__links a {
    transition: none;
  }

  a.reading-chapter__inner:hover,
  a.reading-chapter__inner:focus-visible,
  .reading-article-nav__links a:hover,
  .reading-article-nav__links a:focus-visible {
    transform: none;
  }
}