/* =====================================================================
   05 · 文章 + 唱片卡 / article-cd
   左半屏正文排版照 04（基准页 https://stephango.com/saw），底色纯白
   右半屏一张唱片卡：曲名 / 专辑·歌手 / 封面 / 去听原曲
   纯静态不发声——页面主角是文字，封面是「正在听」的注脚
   ===================================================================== */

/* Inter 自托管：一个可变字体文件覆盖 100–900 全部字重，只含拉丁子集。
   中文不在这个文件里，靠字体栈后面的系统中文字体接住。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-italic.woff2") format("woff2");
}

/* 合站时要挪进 .ac-page（body 级背景是全局副作用，这里写清楚） */
html,
body {
  margin: 0;
  background: #ffffff;
}

[data-page-module="article-cd"] {
  /* 与 04 同一组 flexoki 纸色 */
  --paper: #ffffff;
  --ink: #100f0f;
  --muted: #6f6e69;
  --faint: #b7b5ac;
  --line: #e6e4d9;
  --wash: #f2f0e5;

  --fs: calc(15px + 0.25vw);
  --measure: 33em;
  /* 播放进度 0–1，由 app.js 写入 */
  --prog: 0;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;

  /* 黑胶碟径。竖立后只露出左半边，所以横向占地只有它的 58% */
  --dia: min(500px, 56vh);
  /* 露出比例（相对 --dia）：圆心正好落在 0.5D，切边再往右 0.04D = 20px
     —— 这 20px 刚好让中心孔完整，纸标签露左半。实测露出 56.3% */
  --reveal: 0.54;
  /* 碟与控件共用的栏宽 */
  --col: calc(var(--dia) * var(--reveal));
  /* 进度 0–1，碟片角度，均由 app.js 写入 */
  --prog: 0;
  --spin: 0deg;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-page-module="article-cd"] *,
[data-page-module="article-cd"] *::before,
[data-page-module="article-cd"] *::after {
  box-sizing: border-box;
}

[data-page-module="article-cd"] ::selection {
  background: #f6e2a0;
}

/* =====================================================================
   左半屏：正文（以下数值全部照 04 抄，别随手改）
   ===================================================================== */

.ac-read {
  /* 左边距在 04 的基础上 +140px（2026-10-27 起三次要的右移：+40 / +40 / +60），1440 下 72 → 212 */
  /* 上留 128px：面包屑占 40~60，中间留 68 呼吸（2026-10-28 再往下 20） */
  padding: calc(clamp(84px, 12vh, 112px) + 20px) clamp(20px, 2.5vw, 40px) 120px
    calc(clamp(24px, 5vw, 72px) + 140px);
}

.ac-read__inner {
  max-width: var(--measure);
}

/* 面包屑：全局统一组件。固定贴浏览器窗口左上角，四个模块同一绝对坐标（40,40），
   不跟着左栏 padding 走 —— 用户 2026-10-28 明确要求。 */
.page-trail {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--faint);
}

.page-trail__item {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.page-trail__item:hover {
  color: var(--ink);
}

.page-trail__sep {
  color: var(--line);
}

.page-trail__item--current {
  color: var(--muted);
}

.ac-head h1 {
  margin: 0 0 0.25em;
  font-size: calc(1.35em + 0.55vw);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ac-meta {
  margin: 0 0 40px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ac-meta__dot {
  padding: 0 0.3em;
  color: var(--faint);
}

/* ---------------------------------------------------------------------
   正文块
   中文靠字体栈里的系统字体，英文自动落到 Inter —— 混排不用手写 span。
   行高 1.78 比 04 的 1.5 松：那一页是图配短文，这一页是两三千字的长文。
   --------------------------------------------------------------------- */

.ac-body {
  line-height: 1.78;
}

.ac-body > p {
  margin: 1.1em 0;
}

.ac-body > *:first-child {
  margin-top: 0;
}

.ac-body > *:last-child {
  margin-bottom: 0;
}

/* 开篇段：全篇的引子，比正文重半档 */
.ac-body__lead {
  font-size: 1.08em;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.005em;
}

/* 引用：左边一道细线，字不降色，只把字号收一点 */
.ac-quote {
  margin: 1.9em 0;
  padding-left: 1.15em;
  border-left: 2px solid var(--line);
}

/* 「……这句话：」后面紧跟的引文要贴上去，别跟接续段落一样松 */
.ac-body > p + .ac-quote {
  margin-top: 0.95em;
}

.ac-quote__main {
  margin: 0;
  font-size: 0.99em;
  line-height: 1.75;
}

/* 整段英文：斜体 + 放宽一点行距，跟中文段落拉开质感 */
.ac-quote__main[lang="en"] {
  font-size: 1.05em;
  font-style: italic;
  line-height: 1.62;
  letter-spacing: 0.006em;
}

/* 译文/原文的第二行：小一号、灰一档，跟着主行不抢戏 */
.ac-quote__sub {
  margin: 0.5em 0 0;
  color: var(--muted);
  font-size: 0.93em;
  font-style: italic;
  line-height: 1.55;
}

.ac-quote__foot {
  margin-top: 0.55em;
}

.ac-quote__cite {
  color: var(--faint);
  font-size: 13px;
  font-style: normal;
}

/* 独立成行：歌名、关键句。不上色不居中，只用斜体和字号把它拎出来 */
.ac-line {
  margin: 1.6em 0;
  font-size: 1.14em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* =====================================================================
   右半屏：一张唱片卡
   曲名 → 专辑·歌手 → 封面 → 去听原曲，四行左对齐成一列
   ===================================================================== */

.ac-card {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  padding: clamp(40px, 6vh, 76px) clamp(22px, 3vw, 46px) clamp(30px, 5vh, 56px)
    clamp(24px, 3vw, 48px);
}

/* 一列到底的宽度：文字、封面、链接共用同一条左右边界 */
.ac-card > * {
  width: min(100%, 360px);
}

.ac-card__head {
  margin-bottom: clamp(14px, 2.4vh, 22px);
}

.ac-card__track {
  margin: 0 0 0.4em;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ac-card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78em;
}

.ac-card__dot {
  padding: 0 0.4em;
  color: var(--faint);
}

/* 封面：正方形，宽度跟着这一列，不裁不缩 */
.ac-card__cover {
  margin: 0;
}

.ac-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  background: var(--wash);
  box-shadow:
    0 18px 44px rgba(16, 15, 15, 0.16),
    0 2px 6px rgba(16, 15, 15, 0.05);
  user-select: none;
  -webkit-user-drag: none;
}

/* 播放控制：封面下方居中一颗圆钮 */
.ac-card__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(14px, 2.4vh, 18px);
}

/* 切歌箭头：只在不止一首时出现，克制一点，不做成实心圆 */
.ac-card__nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.ac-card__nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ac-card__nav:hover {
  color: var(--ink);
}

.ac-card__nav:active {
  transform: scale(0.94);
}

.ac-card__nav:focus-visible {
  outline: 1px solid var(--faint);
  outline-offset: 2px;
}

.ac-card__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.ac-card__btn:hover {
  background: #2b2926;
}

.ac-card__btn:active {
  transform: scale(0.94);
}

.ac-card__btn:focus-visible {
  outline: 1px solid var(--faint);
  outline-offset: 4px;
}

.ac-card__btn .ac-icon-play {
  width: 18px;
  height: 18px;
  margin-left: 2px; /* 三角形重心偏右，补一点才看着居中 */
  fill: currentColor;
  stroke: none;
}

.ac-card__btn .ac-icon-pause {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 播放中 / 暂停中各显示一个图标 */
.ac-card__btn.is-playing .ac-icon-play {
  display: none;
}

.ac-card__btn:not(.is-playing) .ac-icon-pause {
  display: none;
}

/* 歌词区：固定高度、上下渐隐，跟着播放进度整体上移 */
.ac-card__lyrics {
  position: relative;
  height: 112px;
  margin-top: clamp(14px, 2.4vh, 20px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 26%,
    #000 74%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
}

.ac-card__lyr-list {
  /* 上下留半格：第一行和最后一行也能滚到框正中，不会贴边 */
  padding: 32px 0;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ac-lyr__line {
  margin: 0;
  color: var(--faint);
  font-size: 0.86em;
  line-height: 1.7;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.ac-lyr__main {
  display: block;
}

/* 同一句的中文翻译：小一号，跟着主行走 */
.ac-lyr__sub {
  display: block;
  margin-top: 0.1em;
  font-size: 0.88em;
  opacity: 0.72;
}

.ac-lyr__line.is-active {
  color: var(--ink);
}

/* 进度条 */
.ac-card__bar {
  position: relative;
  height: 24px;
  margin-top: clamp(12px, 2vh, 18px);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ac-card__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: var(--line);
}

.ac-card__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(var(--prog, 0));
  transform-origin: left center;
}

.ac-card__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--prog, 0) * 100%);
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(16, 15, 15, 0.32);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(16, 15, 15, 0.16);
  transition: width 0.16s ease, height 0.16s ease;
}

.ac-card__bar:hover .ac-card__thumb,
.ac-card__bar.is-grabbing .ac-card__thumb {
  width: 12px;
  height: 12px;
}

.ac-card__bar:focus-visible {
  outline: none;
}

.ac-card__bar:focus-visible .ac-card__thumb {
  box-shadow: 0 0 0 3px rgba(16, 15, 15, 0.12);
}

/* 时码 */
.ac-card__time {
  margin: 0;
  color: var(--muted);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ac-card__slash {
  padding: 0 0.3em;
  color: var(--faint);
}

.ac-card audio {
  display: none;
}

/* =====================================================================
   窄屏：一栏，正文在上、唱片卡在下
   ===================================================================== */

@media (max-width: 1099px) {
  [data-page-module="article-cd"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-read {
    /* 上留 88px：移动端面包屑占 20~40，留 48px */
    padding: 88px 22px 24px;
  }

  .ac-read__inner {
    max-width: 34em;
    margin: 0 auto;
  }

  .ac-card {
    position: static;
    height: auto;
    padding: 8px 16px 64px;
  }

  .ac-card > * {
    width: min(100%, 300px);
  }
}

/* 面包屑的移动端收边：四个模块统一在 680px 换到 (20,20)，
   保证任何宽度下它们都落在同一个绝对坐标。 */
@media (max-width: 680px) {
  .page-trail {
    top: 20px;
    left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page-module="article-cd"] .ac-card__btn,
  [data-page-module="article-cd"] .ac-card__lyr-list {
    transition: none;
  }
}

/* =====================================================================
   深色模式（2026-10-28）
   纸色与 04 同一组 flexoki 暖白，反推取偏暖的黑。
   ===================================================================== */
[data-theme="dark"] [data-page-module="article-cd"] {
  --paper: #16140f;
  --ink: #f2f0e8;
  --muted: #8e8b83;
  --faint: #615e57;
  --line: #2b2822;
  --wash: #1d1a15;
  color-scheme: dark;
}

html[data-theme="dark"] body { background: #16140f; }

/* 选中高亮原本是奶油黄，深色下配浅字看不清，换成压暗的同色相 */
[data-theme="dark"] [data-page-module="article-cd"] ::selection {
  background: #3d3729;
}

/* 播放钮底色是 var(--ink)（深色下变浅），悬停不能再压黑 */
[data-theme="dark"] .ac-card__btn:hover {
  background: #d5d0c2;
}

/* 进度条圆点：底色是 var(--paper)，描边和描边阴影得反过来 */
[data-theme="dark"] .ac-card__thumb {
  border-color: rgba(242, 240, 232, 0.34);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .ac-card__bar:focus-visible .ac-card__thumb {
  box-shadow: 0 0 0 3px rgba(242, 240, 232, 0.16);
}

/* 切换时淡一下，别硬切 */
[data-page-module="article-cd"] { transition: color 0.4s ease; }
body { transition: background-color 0.4s ease; }

/* ─── 面包屑上方的「安全带」（2026-10-28）─────────────────────────
   面包屑是 position:fixed 的，正文往上滚会从它身下直接穿过去。
   这里用伪元素做一条钉在窗口顶端的带：纸色渐变 + 毛玻璃，
   底部靠 mask 让模糊一起淡出 —— 文字滚进来被糊掉，滚出去重新清晰。
   带子本身不吃点击；颜色吃 var(--paper)，深色模式自动跟随，不用另写。 */
.page-trail::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 108px;
  /* 压在面包屑文字之下、正文之上：负 z-index 被 .page-trail 自己的堆叠上下文兜住 */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 58%, transparent 100%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

/* 手机上内容顶在 88，带子底边压到 88 —— 正好齐平 */
@media (max-width: 680px) {
  .page-trail::before { height: 88px; }
}