/* ═══ 两章共用件 ═══
   这个文件本来只装章末回声带。2026-08-08 把档案铭牌也挪了进来，理由同一条：
   **同一块 DOM 出现在两章，样式就不能只写在其中一章的文件里。**
   实证：`.dossier` 原本只在 ember.css，plum 页不加载它，那张铭牌一直是无样式的
   裸 <dl>（dt 独占一行、无栏无线、无字距）。占位短的时候看不太出来，
   把真数据填进去当场显形。 */

/* ── 档案铭牌（滚动契约切换点之后：文档流）── */

.dossier {
  margin: 0 auto;
  max-width: 64ch;
}

.dossier-row {
  display: grid;
  grid-template-columns: minmax(96px, 150px) 1fr;
  gap: clamp(14px, 2.5vw, 34px);
  align-items: baseline;
  padding: clamp(15px, 2.2svh, 24px) 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 16%, transparent);
}
.dossier-row:first-child { border-top: 1px solid color-mix(in oklab, var(--accent) 16%, transparent); }

.dossier-row dt {
  color: var(--text-mid);
  font-size: calc(13px * var(--ratio, 1));
  letter-spacing: .28em;
}
.dossier-row dd {
  margin: 0;
  color: var(--text-hi);
  font-size: calc(15px * var(--ratio, 1));
  letter-spacing: .06em;
  line-height: 1.75;
}

/* 一格里可能有多条（如「身高·体重」与「三围」分两行）。挤成一行时尾巴上的
   单位会被甩成孤行——实测断出过一行只有「cm」。 */
.dossier-row dd .ds-line { display: block; text-wrap: pretty; }
.dossier-row dd .ds-line + .ds-line { margin-top: 3px; }

/* 「已填的值 + 仍待品牌方的那一项」同格时，占位另起一行。
   跟在句号后面接着排会读成同一句话的一部分，而它恰恰是在说「这句还没说完」。 */
.dossier-row dd.is-filled .ph {
  display: block;
  margin-top: 6px;
}

/* ── 章末回声带 ─────────────────────────────────────────────
   跑马灯的无终点循环 = 「不消解」的机械形：故事没有落地，她的声音还在跑。

   位置在出口之后、页尾之前，是有意的：它是**唯一穿过滚动契约切换的叙事元素**。
   镜头链结束、档案铭牌与出口这些文档流内容都过完了，声音仍在继续——
   落在末幕正后方就成了「结尾的一部分」，反而被结尾收编，不消解也就没了。

   两章共用一份样式：ember.css / plum.css 各写一遍迟早会分叉，
   而这个组件的语义（不落地）恰恰要求两章一模一样。 */

.echo-band {
  padding: clamp(26px, 5svh, 54px) 0;
  border-top: 1px solid var(--line-subtle, rgb(255 255 255 / .08));
  /* 不给背景色：它要贴着页尾的暗，看起来像是从页面底下透出来的，不像一个新区块 */
}

.echo-band .vx-marquee {
  /* 两端渐隐加宽：字比 vendor 默认场景大，默认的 --sp-800 化不开，
     字会像是被硬切在边上。用视口相关的 clamp，宽窄屏化开程度一致。 */
  --marquee-fade: clamp(40px, 9vw, 170px);
}

.echo-band .vx-marquee__item {
  font-size: clamp(15px, 2.4vw, 30px);
  font-weight: var(--weight-bold, 600);
  letter-spacing: .18em;
  color: var(--text-low);
}

/* 分隔点用主题色：两章各自的 accent，让这条带子归属明确 */
.echo-band .echo-dot {
  color: var(--accent);
  opacity: .55;
  letter-spacing: 0;
}

/* ── 减弱动效 ──
   vendor 的 .vx-marquee 没有 prefers-reduced-motion 处理，而 vendor 不可改，
   所以在这里兜。无限循环动画是持续运动，正是该模式首先要消除的东西——
   前庭敏感的人不该为了一句台词一直盯着移动的字。
   停下之后保留完整可读的一行并居中：语义（不消解）由「未完成句」本身承担，
   不必非得靠运动来表达。第二条轨道是为无缝循环准备的复制品，静态下藏掉。 */
@media (prefers-reduced-motion: reduce) {
  .echo-band .vx-marquee__track { animation: none; }
  .echo-band .vx-marquee { justify-content: center; }
  .echo-band .vx-marquee__track + .vx-marquee__track { display: none; }
}