/* GEI 官网 v4「做厚」· 案例过程回放 (段8)
   横向接力时间线 + 9 头像接力 + 14 文档卷轴 + 「納品」朱印。
   定性占位, 零 TODO, 零裸数字。本段朱仅 1 处 = 納品印。 */

/* 注: 段8 不上 content-visibility — 其渲染高度因 14 卷轴 / 时间线而不定,
   预留尺寸难精确, 会致锚点跳转过冲。长卷性能热点在段4 的 7 个能力屏 (已 cv:auto,
   且 svh 预留与实测一致), 段8 仅 1 屏不构成滚动掉帧风险, 故不纳入 cv 以稳住锚点。 */

/* 诚实标注 · 显式定性为示例流程 (nezumi 承载, 不耗朱) */
.s-case__illustrative {
  color: var(--ink-nezumi);
  margin: var(--sp-2) 0 0;
}

.relay {
  list-style: none;
  padding: 0;
  margin: var(--sp-12) 0 0;
  display: grid;
  /* ① 原话窄列 · ② 头像接力窄列 · ③ 文档卷轴吃剩余宽 · ④ 结果窄列 */
  grid-template-columns: minmax(11rem, 0.9fr) minmax(9rem, 0.8fr) minmax(0, 2.4fr) minmax(10rem, 0.9fr);
  gap: var(--sp-6);
  position: relative;
}
/* 横向主轴 whisper line, 穿过四节点圆点 */
.relay::before {
  content: "";
  position: absolute;
  top: 5px; left: 6%; right: 6%;
  height: 1px;
  background: var(--line-whisper);
}
.relay-node { position: relative; padding-top: var(--sp-6); min-width: 0; }
.relay-node__dot {
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink-sumi);
}
.relay-node__title { margin: 0 0 var(--sp-3); color: var(--ink-sumi); letter-spacing: 0.04em; white-space: nowrap; }

/* 节点① 需求原话 (Newsreader italic, 开口引号悬挂) + 墨印「Asked」(非朱) */
.relay-node__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-sumi);
  margin: 0 0 var(--sp-3);
  hanging-punctuation: first;
  text-wrap: pretty;
}
/* P1-10 · 悬挂引号跨浏览器兜底: hanging-punctuation 仅 WebKit/Safari 生效。
   Chrome/Firefox 走 @supports not(...) 分支, 用负 text-indent 悬挂开口弯引号
   (-0.42em 按 Newsreader italic “ 实宽微调)。二者择一不叠加。 */
@supports not (hanging-punctuation: first) {
  .relay-node__quote { text-indent: -0.42em; }
}
.relay-node__seal-ink {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-nezumi);
  border: 1px solid var(--line-whisper);
  border-radius: var(--r-xs);
  padding: 0.2em 0.6em;
}

/* 节点② 9 头像接力 */
.avatar-relay {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, var(--tl-avatar-d));
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0; margin: 0;
  width: max-content;
}
.avatar-relay li { position: relative; }
.avatar-relay img {
  width: var(--tl-avatar-d); height: var(--tl-avatar-d);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: filter var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-soft);
}
/* 头像间短箭头 (接力传递) */
.avatar-relay li:not(:last-child)::after {
  content: "›";
  margin-left: 0.45rem;
  color: var(--ink-nezumi);       /* v5: 可见分隔符 → nezumi 达标 (P0 #3) */
  vertical-align: middle;
}
.avatar-relay img:hover { filter: brightness(1.04); transform: translateY(-1px); }

/* 节点③ 14 文档卷轴 (横向可滑) */
.doc-scroll {
  display: flex;
  gap: var(--scroll-card-gap);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.doc-card {
  flex: none;
  width: var(--scroll-card-w);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-whisper);
  border-radius: var(--r-xs);
  padding: 0.6rem 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--bg-washi);
}
.doc-card__tag {
  font-size: var(--fs-scroll-tag);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-sumi);
  margin: 0 0 0.5rem;
}
/* 灰条纹假文 (usuzumi, 不写真内容) */
.doc-lines {
  flex: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-hairline) 0,
    var(--line-hairline) 3px,
    transparent 3px,
    transparent calc(var(--scroll-stripe-gap))
  );
  /* 末行收短一点, 更像文档 */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 82%);
}

/* 节点④ 结果 + 納品朱印 */
.relay-node__result {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-sumi);
  margin: 0 0 var(--sp-3);
}
/* 「Delivered」朱印 — 衬线小型大写, sumi 字 + 朱印环 (本段唯一朱), 保留 scale 盖落动效。
   英文长词放不进小圆 → 改朱描边印章环 + 内 sumi 小型大写字, 东方盖印手势仍在。 */
.seal--ship {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-variant-caps: small-caps;
  text-transform: lowercase;       /* 配 small-caps 渲染 */
  line-height: 1;
  color: var(--ink-sumi);
  background: transparent;
  border: 1.5px solid var(--shu);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  transform-box: border-box;
  transform-origin: center;
}

/* 手机: 主轴转纵向, 头像换行, 卷轴仍横滑 */
@media (max-width: 760px) {
  .relay { grid-template-columns: 1fr; gap: var(--sp-8); }
  .relay::before {
    top: 0; bottom: 0; left: 5px; right: auto;
    width: 1px; height: auto;
  }
  .relay-node { padding-top: 0; padding-left: var(--sp-6); }
  .relay-node__dot { top: 4px; }
}