/* ---- 故事视图：左年代、右事件的时间轴 ---- */
/* 正文列按 40em 定宽：年代栏 72 + 18 + 年份栏 112 + 36 + 640，两侧内边距另计 */
.story-scroll .wrap{max-width:calc(878px + 2 * var(--pad-x))}

.story-scroll{
  position:relative;
  flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(224,224,224,.2) transparent;
  /* 浮在正文列右侧的说明卡的宽度与它离正文列的距离，居中和卡片自身都取这两个数 */
  --tl-note-w:300px;--tl-note-gap:36px;
}
.story-scroll:focus-visible{outline:1px solid rgba(224,224,224,.28);outline-offset:-1px}
.story-scroll::-webkit-scrollbar{width:8px}
.story-scroll::-webkit-scrollbar-track{background:transparent}
.story-scroll::-webkit-scrollbar-thumb{background:rgba(224,224,224,.16);border-radius:4px}
.story-scroll::-webkit-scrollbar-thumb:hover{background:rgba(224,224,224,.28)}

/* 标题上下的留白相等：上 36 + 标题 + 下 36，与段首那条线的距离一致 */
.story{padding-top:36px;padding-bottom:80px}
.story-title{
  display:block;margin:0;
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,3.4vw,44px);line-height:1.2;letter-spacing:.04em;
}
.story-title:focus{outline:none}

.era{
  display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:18px;
  margin-top:52px;padding-top:18px;
  border-top:1px solid rgba(224,224,224,.2);
}
/* 首段的分隔线就是标题的下界，间距跟着标题走 */
.era:first-of-type{margin-top:36px}
/* 年代标签停在自己的年代内，被下一个年代顶走；比年份再低 10px，免得贴上阅读区上缘 */
.era-name{
  align-self:start;
  position:sticky;top:10px;
  font:24px/31px var(--serif);letter-spacing:.06em;color:var(--ash);
  text-align:right;
  transition:color .25s ease;
}
.era-name.is-hot{color:rgba(224,224,224,.8)}

.timeline{position:relative;margin:0;padding:0;list-style:none;--tl-gap:32px}
.timeline::before{
  content:"";position:absolute;left:130px;top:0;bottom:0;width:1px;
  background:rgba(224,224,224,.14);
}
/* 轴线末端的收头 */
.era:last-of-type .timeline::after{
  content:"";position:absolute;left:127px;bottom:0;width:7px;height:1px;
  background:rgba(224,224,224,.32);
}
/* 一组 = 一个年份 + 该年份下的若干事件；年份粘在顶部，等下一组把它顶走 */
.tl-group{
  display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:36px;
  align-items:start;
}
.tl-year{
  position:sticky;top:0;
  text-align:right;
  font:16px/31px var(--serif);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:rgba(224,224,224,.7);
  transition:color .25s ease;
}
.tl-year::after{
  content:"";position:absolute;left:100%;top:.95em;width:18px;height:1px;
  background:rgba(224,224,224,.32);
  transition:background-color .25s ease;
}
/* 区间年份与单个年份同一字号，只把字距收紧一点让长标签留在栏内 */
.tl-year.is-range{letter-spacing:0}
/* 鼠标所在那一行：条目、年份、年代一起提亮，其余保持原灰度 */
.tl-year.is-hot{color:var(--paper)}
.tl-year.is-hot::after{background:var(--smoke)}
/* 组间距写在事件块里：年份能粘多久取决于组的内容高度，组自身不能有纵向内边距 */
.tl-events{margin:0;padding:0 0 var(--tl-gap);list-style:none;min-width:0}
.tl-item{
  padding:16px 0;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s ease,transform .55s ease;
}
/* 从上方漫进视口的条目改为向下落下，方向与滚动一致 */
.tl-item.from-top{transform:translateY(-10px)}
/* 首次进入时把已在视口内的条目一次性摆正，不补过渡 */
.story.is-quiet .tl-item{transition:none}
.tl-item:first-child{padding-top:0}
.tl-item:last-child{padding-bottom:0}
.tl-item.is-in{opacity:1;transform:none}
.tl-text{
  margin:0;
  font-size:clamp(15px,1.05vw,16px);line-height:1.95;
  color:rgba(224,224,224,.84);
  transition:color .25s ease;
}
.tl-item.is-hot .tl-text{color:var(--paper)}
.tl-tag{
  display:inline-block;margin-left:10px;vertical-align:.08em;
  font:10px/1.7 var(--sans);letter-spacing:.08em;color:var(--ash);
  white-space:nowrap;
}
/* 「推测」「推定」可点开：标签是开关，点卡片以外的任意处也收起 */
.tl-tag.is-guess{
  padding:1px 6px;border:1px solid rgba(224,224,224,.18);
  background:none;color:var(--ash);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.tl-tag.is-guess:hover,
.tl-tag.is-guess:focus-visible{color:var(--smoke);border-color:rgba(224,224,224,.44)}
.tl-tag.is-guess:focus-visible{outline:1px solid var(--smoke);outline-offset:2px}
.tl-tag.is-guess[aria-expanded="true"]{
  color:var(--paper);border-color:rgba(224,224,224,.56);background:rgba(224,224,224,.07);
}
.tl-tag.is-work{
  margin-left:12px;padding-left:9px;border-left:1px solid rgba(224,224,224,.24);
  font-family:var(--serif);font-size:12px;letter-spacing:.02em;
}

/* 补充说明卡片：窄屏贴在条目下方参与排版；宽屏浮到正文列右侧，纵向跟着所属条目一起滚 */
.tl-note{
  position:relative;
  grid-column:1/-1;
  /* 上边距抵掉事件块留出的组距、下边距再接回去：卡片贴近它所属的条目，与下一条拉开一组 */
  margin:calc(10px - var(--tl-gap)) 0 var(--tl-gap);
  padding:14px 16px 12px;
  border:1px solid rgba(224,224,224,.16);
  /* 与右栏按钮、影像清单同一套彩条：左缘纯白，宽度是原来那条灰线的一倍 */
  border-left:4px solid #fff;
  background:rgba(15,15,15,.72);
  opacity:0;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease;
}
/* 右上角两条竖条：红矮蓝高、右端对齐，取同一套 #de3546 / #59a5cb */
.tl-note::after{
  content:"";position:absolute;top:0;right:0;
  width:16px;height:22px;pointer-events:none;
  background:
    linear-gradient(#de3546,#de3546) left top / 8px 14px no-repeat,
    linear-gradient(#59a5cb,#59a5cb) right top / 8px 22px no-repeat;
}
.tl-note.is-open{opacity:1;transform:none}
.tl-note-head{
  display:flex;align-items:baseline;gap:12px;
  margin:0 0 8px;
  font:10px/1.5 var(--sans);letter-spacing:.16em;color:var(--ash);
}
.tl-note-tag{font-family:var(--serif);font-size:14px;letter-spacing:.06em;color:var(--paper)}
.tl-note-body{
  margin:0;
  font-size:13px;line-height:1.95;
  color:rgba(224,224,224,.76);
}
.tl-note-body p{margin:0}
.tl-note-body p + p{margin-top:8px}
.tl-note-list{margin:6px 0;padding-left:1.6em}
.tl-note-hint{
  margin:10px 0 0;
  font:11px/1.6 var(--serif);letter-spacing:.06em;
  color:rgba(140,140,140,.7);
}

/* 中等宽度下正文列右侧放不下卡片，改为正文列宽的行内展开 */
@media (min-width:641px) and (max-width:1639px){
  .tl-note{margin-left:148px}
}

/* 说明卡的包含块是相对定位的 .timeline，所以 100% 就是事件列的右缘；
   这里的 1640 与 story-view.js 里的宽屏判定是同一个断点 */
@media (min-width:1640px){
  /* 卡片浮在正文列右侧，它也是读者看到的一块内容，所以把正文块连同卡片一起居中：
     正文块左移半张卡的占位，开卡与不开卡都不跳动 */
  .story-scroll .wrap{left:calc((var(--tl-note-w) + var(--tl-note-gap)) / -2)}
  .tl-note{
    position:absolute;top:0;left:calc(100% + var(--tl-note-gap));
    width:var(--tl-note-w);margin:0;
    background:rgba(15,15,15,.9);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
    transform:translateX(8px);
  }
}

@media (max-width:640px){
  .timeline::before{display:none}
  .tl-group{
    grid-template-columns:1fr;row-gap:2px;
    padding:16px 0;
  }
  .tl-year{
    z-index:2;padding:6px 0 4px;background:var(--ink);
    font-size:13px;line-height:1.6;letter-spacing:.08em;color:var(--ash);
    text-align:left;
  }
  .tl-year::after{display:none}
  .tl-item{padding:10px 0}
  .era{display:block;margin-top:40px;padding-top:14px}
  .era-name{
    position:static;display:block;padding:0 0 12px;
    font:18px/1.2 var(--serif);letter-spacing:.12em;text-align:left;
  }
  .era:last-of-type .timeline::after{display:none}
  .story{padding-bottom:56px}
}

@media (max-height:619px){
  .story-scroll{overscroll-behavior:auto}
}

@media (prefers-reduced-motion:reduce){
  .tl-item,.tl-item.from-top{opacity:1;transform:none;transition:none}
  .tl-year,.tl-year::after{transition:none}
  .tl-tag.is-guess,.tl-note{transition:none}
}