/*
 * 五年回响：常用排版数值设置
 * ============================================================
 * 只需要修改下面“桌面端设置”和“手机端设置”中冒号后面的数值。
 *
 * px  = 像素，例如 17px
 * 行距不写单位，例如 1.82
 * 章节交错距离必须是负数；数值越小（例如 -200px），交错越紧、页面越短。
 * 保存文件并刷新页面即可看到变化。
 */

:root {
  /* ---------- 桌面端设置 ---------- */

  /* 页面总标题“五年回响” */
  --history-page-title-size: 52px;

  /* 页面总标题下面的英文 RETROSPECT */
  --history-page-english-size: 10px;

  /* 开篇标题“一切，都从一个故事开始。” */
  --history-opening-title-size: 35px;

  /* 每章标题，例如“故事开始以前” */
  --history-chapter-title-size: 25px;

  /* 正文文字大小 */
  --history-body-size: 15px;

  /* 正文行距：数字越大，每一行之间越宽 */
  --history-body-line-height: 1.5;

  /* 相邻正文段落之间的距离 */
  --history-paragraph-gap: 10px;

  /* 二级小标题大小（以后在文案中加入小标题时使用） */
  --history-subtitle-size: 21px;

  /* 二级小标题和下一段正文之间的距离 */
  --history-subtitle-gap: 12px;

  /* 章节编号 01、02、03……的文字大小 */
  --history-number-size: 14px;

  /* 流星线圆点内 01、02、03……的文字大小 */
  --history-timeline-number-size: 10px;

  /* 编号旁边的“萌芽 / 重生 / 相遇……” */
  --history-stage-label-size: 11px;

  /* 年份 2017—2019 等文字大小 */
  --history-years-size: 13px;

  /* 每章最后一句重点文案的文字大小 */
  --history-quote-size: 15px;

  /* 章节标题区域与正文之间的距离 */
  --history-title-body-gap: 20px;

  /* 重点文案与上一段正文之间的距离 */
  --history-quote-gap: 20px;

  /* 每个章节上、下的内部留白 */
  --history-chapter-padding-top: 36px;
  --history-chapter-padding-bottom: 40px;

  /* 整条时间线的最大宽度：越小，两边文字越靠近中线 */
  --history-timeline-layout-width: 940px;

  /* 中央流星线所在列的宽度 */
  --history-timeline-column-width: 56px;

  /* 标题到流星线的细连接线长度 */
  --history-timeline-connector-width: 38px;

  /* 左右正文与中央流星线之间的距离 */
  --history-timeline-side-gap: 20px;

  /* 每个章节边框的圆角、内边距和颜色 */
  --history-entry-border-radius: 16px;
  --history-entry-padding-x: 22px;
  --history-entry-padding-top: 20px;
  --history-entry-padding-bottom: 22px;
  --history-entry-border-color: rgba(117, 143, 171, .24);

  /* 左右章节向上交错的距离：负数越大，页面越短 */
  --history-chapter-overlap: -220px;
}

/* ---------- 将上面的数值应用到页面 ---------- */

#history .fe-history__title h2 {
  font-size: var(--history-page-title-size);
}

#history .fe-history__title > span {
  font-size: var(--history-page-english-size);
}

.fe-history__foreword h3 {
  font-size: var(--history-opening-title-size);
}

.fe-history__chapter h3 {
  font-size: var(--history-chapter-title-size);
}

.fe-history__foreword > p:not(.fe-history__perspective),
.fe-history__subsection p {
  margin-top: 0;
  margin-bottom: var(--history-paragraph-gap);
  font-size: var(--history-body-size);
  line-height: var(--history-body-line-height);
}

.fe-history__foreword > p:not(.fe-history__perspective):last-of-type,
.fe-history__subsection p:last-child {
  margin-bottom: 0;
}

.fe-history__subsection h4 {
  margin-bottom: var(--history-subtitle-gap);
  font-size: var(--history-subtitle-size);
}

.fe-history__chapter-index span {
  font-size: var(--history-number-size);
}

.fe-history__meteor-marker {
  font-size: var(--history-timeline-number-size);
}

.fe-history__chapter-index b {
  font-size: var(--history-stage-label-size);
}

.fe-history__years {
  font-size: var(--history-years-size);
}

.fe-history__chapter::before {
  display: none;
  content: none;
}

.fe-history__foreword blockquote,
.fe-history__chapter blockquote {
  font-size: var(--history-quote-size);
}

.fe-history__chapter-header {
  margin-bottom: 0;
  padding: var(--history-entry-padding-top) var(--history-entry-padding-x) var(--history-title-body-gap);
  border: 1px solid var(--history-entry-border-color);
  border-bottom: 0;
  border-radius: var(--history-entry-border-radius) var(--history-entry-border-radius) 0 0;
}

.fe-history__chapter-body {
  padding: 0 var(--history-entry-padding-x) var(--history-entry-padding-bottom);
  border: 1px solid var(--history-entry-border-color);
  border-top: 0;
  border-radius: 0 0 var(--history-entry-border-radius) var(--history-entry-border-radius);
}

.fe-history__chapter blockquote {
  margin-top: var(--history-quote-gap);
}

.fe-history__chapter {
  padding-top: var(--history-chapter-padding-top);
  padding-bottom: var(--history-chapter-padding-bottom);
}

@media (min-width: 901px) {
  .fe-history__manuscript {
    position: relative;
    left: 50%;
    width: min(100%, var(--history-timeline-layout-width));
    max-width: var(--history-timeline-layout-width);
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
    transform: translateX(-50%);
  }

  .fe-history__chapter {
    box-sizing: border-box;
    grid-template-columns:
      minmax(0, 1fr)
      var(--history-timeline-column-width)
      minmax(0, 1fr);
  }

  .fe-history__chapter-header,
  .fe-history__chapter-body {
    width: calc(100% - var(--history-timeline-side-gap));
    max-width: none;
    box-sizing: border-box;
    justify-self: center;
    margin-right: 0;
    margin-left: 0;
  }

  .fe-history__chapter:nth-child(odd) .fe-history__chapter-header,
  .fe-history__chapter:nth-child(odd) .fe-history__chapter-body {
    justify-self: center;
    margin-right: 0;
    margin-left: 0;
  }

  /* 覆盖旧版右侧章节的单边 padding，确保边框内左右留白完全相等。 */
  .fe-history__chapter:nth-child(odd) .fe-history__chapter-header {
    padding: var(--history-entry-padding-top) var(--history-entry-padding-x) var(--history-title-body-gap);
  }

  .fe-history__chapter:nth-child(odd) .fe-history__chapter-body {
    padding: 0 var(--history-entry-padding-x) var(--history-entry-padding-bottom);
  }

  .fe-history__chapter-header::after {
    right: calc(0px - var(--history-timeline-connector-width));
    width: var(--history-timeline-connector-width);
  }

  .fe-history__chapter:nth-child(odd) .fe-history__chapter-header::after {
    right: auto;
    left: calc(0px - var(--history-timeline-connector-width));
  }

  .fe-history__chapter + .fe-history__chapter {
    margin-top: var(--history-chapter-overlap);
  }
}

@media (max-width: 900px) {
  .fe-history__chapter-header,
  .fe-history__chapter:nth-child(odd) .fe-history__chapter-header {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: var(--history-entry-padding-top) var(--history-entry-padding-x) var(--history-title-body-gap);
  }

  .fe-history__chapter-body,
  .fe-history__chapter:nth-child(odd) .fe-history__chapter-body {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 0 var(--history-entry-padding-x) var(--history-entry-padding-bottom);
  }
}

@media (max-width: 560px) {
  :root {
    /* ---------- 手机端设置 ---------- */
    --history-page-title-size: 42px;
    --history-page-english-size: 10px;
    --history-opening-title-size: 27px;
    --history-chapter-title-size: 26px;
    --history-body-size: 15px;
    --history-body-line-height: 1.86;
    --history-paragraph-gap: 15px;
    --history-subtitle-size: 18px;
    --history-subtitle-gap: 11px;
    --history-number-size: 10px;
    --history-timeline-number-size: 9px;
    --history-stage-label-size: 10px;
    --history-years-size: 12px;
    --history-quote-size: 19px;
    --history-title-body-gap: 17px;
    --history-quote-gap: 18px;
    --history-chapter-padding-top: 28px;
    --history-chapter-padding-bottom: 36px;
  }
}