/* Inter 自托管：原来从 Google Fonts 外链拉取，改成项目内文件。
   一个可变字体文件覆盖 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");
}

[data-page-module="music-i-love"] {
  --paper: #fbfaf7;
  --ink: #202020;
  --muted: #9a9994;
  --faint: #b8b6b0;
  --line: #e7e4dd;
  --dim: #aaa8a2;
  --glow: rgba(118, 119, 255, 0.34);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  width: min(840px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 72px;
  color: var(--ink);
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
html { background: #fbfaf7; }
body { margin: 0; background: #fbfaf7; }

/* 面包屑：全局统一组件。固定贴浏览器窗口左上角，四个模块同一绝对坐标（40,40），
   不跟着各自内容区左边界走 —— 用户 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);
}

.music-page__header { margin: 90px 0 82px; }

.music-page__header h1 {
  margin: 0;
  font-size: 72px;
  font-style: italic;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.075em;
}

.music-page__list { display: grid; gap: 34px; }

.music-entry {
  display: block;
  padding: 30px 28px 26px;
  border-radius: 24px;
}

/* 链接卡（<a>）：外观与 <article> 版完全一致，只还原锚点默认样式 */
a.music-entry {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 悬停只剩一件事：灰字变纯黑。没有描边、没有光晕、没有位移
   描述（浅灰）和日期城市（中灰）一起提黑 */
.music-entry:hover .music-entry__description,
.music-entry:hover .music-entry__meta strong,
.music-entry:focus-visible .music-entry__description,
.music-entry:focus-visible .music-entry__meta strong {
  color: var(--ink);
}

/* 光效去掉后必须补回键盘焦点环，否则 Tab 过来完全看不见 */
.music-entry:focus-visible {
  outline: 2px solid rgba(118, 119, 255, .55);
  outline-offset: 6px;
}

.music-entry__copy { display: flex; min-width: 0; flex-direction: column; }
/* 卡片标题：全站统一 28px，不随视口缩放 —— 加卡片只复制结构，别再写内联字号 */
.music-entry h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.045em;
}

.music-entry__description {
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  transition: color 180ms ease;
}

.music-entry__meta {
  display: grid;
  gap: 14px;
}

.music-entry__meta p { margin: 0; }
/* 日期城市：和说明同一个浅灰，悬停时一起提黑 */
.music-entry__meta strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  transition: color 180ms ease;
}
.music-entry__meta span { display: block; margin-top: 3px; color: var(--faint); font-size: 13px; }

.music-page__footer {
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}

/* ─── 入场动画 ───────────────────────────────────────────────────
   纯 CSS，不改 HTML。顺序：面包屑 → 标题 → 卡片逐张 → 页脚。
   卡片本身的动画只做 opacity（fill-mode: backwards，结束后不残留 transform），
   位移放在 __copy / __cover 两个子元素上，所以不会和悬停的 translateY(-2px) 打架。
   每张卡的 --i 由 nth-child 给出，加卡片不用改这段。 */
@keyframes musicFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes musicRise {
  from { opacity: 0; transform: translateY(var(--rise, 16px)); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-trail {
  animation: musicFade .5s ease-out backwards;
}

.music-page__header h1 {
  --rise: 20px;
  animation: musicRise .85s cubic-bezier(.16, 1, .3, 1) 70ms backwards;
}

.music-entry {
  animation: musicFade .55s ease-out backwards;
  animation-delay: calc(210ms + var(--i, 0) * 90ms);
}

.music-entry__copy {
  --rise: 14px;
  animation: musicRise .7s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(250ms + var(--i, 0) * 90ms);
}

.music-page__footer {
  animation: musicFade .6s ease-out 620ms backwards;
}

.music-entry:nth-child(1) { --i: 0; }
.music-entry:nth-child(2) { --i: 1; }
.music-entry:nth-child(3) { --i: 2; }
.music-entry:nth-child(4) { --i: 3; }
.music-entry:nth-child(5) { --i: 4; }
.music-entry:nth-child(6) { --i: 5; }
.music-entry:nth-child(7) { --i: 6; }
.music-entry:nth-child(8) { --i: 7; }
.music-entry:nth-child(n + 9) { --i: 8; }

@media (prefers-reduced-motion: reduce) {
  .music-entry__description,
  .music-entry__meta strong { transition: none; }
  .page-trail,
  .music-page__header h1,
  .music-entry,
  .music-entry__copy,
  .music-page__footer { animation: none; }
}

@media (max-width: 680px) {
  [data-page-module="music-i-love"] { width: min(100% - 24px, 520px); padding: 28px 0 48px; }
  .music-page__header { margin: 70px 10px 62px; }
  .music-page__header h1 { font-size: clamp(44px, 18.4vw, 72px); }
  .music-entry { padding: 24px 18px 22px; }
  .music-entry__description { margin-bottom: 20px; font-size: 17px; }
  .page-trail { top: 20px; left: 20px; }
  .music-page__footer { margin-inline: 10px; }
}

/* ─── 深色模式 ────────────────────────────────────────────────────
   2026-10-28 加。底色由 #fbfaf7 这份暖白反推：同色相压暗成暖黑，
   不用纯黑 —— 纯黑会让 Inter 的细笔画发毛，也丢掉了这页的纸感。 */
[data-theme="dark"] [data-page-module="music-i-love"] {
  --paper: #16140f;
  --ink: #f2f0ea;
  --muted: #8e8c85;
  --faint: #625f59;
  --dim: #79766f;
  --line: #2c2923;
  --glow: rgba(118, 119, 255, 0.42);
}

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

/* 切换时淡一下，别硬切 */
[data-page-module="music-i-love"],
body { transition: background-color 0.4s ease, 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; }
}