/**
 * 小吉 Ai 视觉 · 视觉系统与版面节拍
 *
 * 设计立场：作品是唯一的主角，界面不留任何彩度。
 * 全部 9:16 竖构图，所以所有画面都从「高度」推导宽度 ——
 * 容器比例恒等于画面比例，永远不会有 cover 裁切。
 */

/* ══════════════════════════════════════════════════
   1. 变量
   ══════════════════════════════════════════════════ */

:root {
  --bg: #08080a;
  --bg-soft: #0d0d10;
  --ink: #edeae3;
  --ink-2: #9d9a94;
  --ink-3: #5c5a56;
  --ink-4: #3a3936;
  --line: rgba(237, 234, 227, 0.09);
  --line-2: rgba(237, 234, 227, 0.16);

  --serif: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif SC', 'SimSun', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;

  --gap-page: clamp(20px, 5vw, 76px);
  /* 行内侧间距 —— 多联时要按它反推单格宽度，所以抽成变量 */
  --gap-row: clamp(10px, 1.4vw, 22px);
  --gap-off: clamp(26px, 5vw, 88px);

  --dur: 900ms;
  --dur-mid: 600ms;
  --dur-fast: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --nav-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 3px; }

::selection { background: rgba(237, 234, 227, 0.16); }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ══════════════════════════════════════════════════
   2. 通用排版件
   ══════════════════════════════════════════════════ */

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 400;
}

.serif { font-family: var(--serif); font-weight: 400; }

.hairline { height: 1px; background: var(--line); border: 0; }

/* ══════════════════════════════════════════════════
   3. 顶栏：首屏隐形，滚动后压出实底
   ══════════════════════════════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap-page);
  pointer-events: none;
  transition: background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav > * { pointer-events: auto; }
.nav.is-stuck {
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--line);
}
.nav__brand { font-size: 13px; letter-spacing: 0.3em; color: var(--ink); }
.nav__en { font-size: 9px; letter-spacing: 0.36em; color: var(--ink-3); display: block; margin-top: 3px; }

/* ══════════════════════════════════════════════════
   4. 开场
   ══════════════════════════════════════════════════ */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  padding: calc(var(--nav-h) + 6vh) var(--gap-page) 8vh;
}
.hero__text { flex: 1 1 44%; max-width: 560px; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__name {
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.hero__en { margin-top: 18px; font-size: 11px; letter-spacing: 0.36em; color: var(--ink-3); }
.hero__rule { width: 46px; height: 1px; background: var(--line-2); margin: 38px 0 30px; }
.hero__slogan {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.hero__sub { margin-top: 12px; font-size: 11px; letter-spacing: 0.26em; color: var(--ink-3); }
.hero__scroll {
  margin-top: 8vh;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
}
.hero__scroll::after {
  content: '';
  width: 52px; height: 1px;
  background: linear-gradient(to right, var(--ink-3), transparent);
  animation: slide 2.6s var(--ease) infinite;
}
@keyframes slide {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(9px); opacity: 1; }
}

.hero__media { flex: 0 0 auto; --h: 68vh; }
.hero__cap { margin-top: 14px; font-size: 10px; letter-spacing: 0.28em; color: var(--ink-3); text-align: center; }

/* ══════════════════════════════════════════════════
   5. 画框 —— 一切画面都从这里出
      高度主导：定高度，宽度按 9:16 自行长出。
      min() 保证窄屏时退让到「以宽度为准」，永不溢出。
   ══════════════════════════════════════════════════ */

.frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(var(--h, 86vh), calc((100vw - var(--gap-page) * 2) * 16 / 9));
  flex: 0 0 auto;
  background: var(--bg-soft);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;          /* 画面本身不接受任何指针事件 */
}
.frame.is-loaded img,
.frame.is-loaded video { opacity: 1; }

/* 動態格：封面图垫底，视频到位后浮上来 */
.frame--motion img { position: absolute; inset: 0; }
.frame--motion video { position: absolute; inset: 0; opacity: 0; z-index: 2; }
.frame--motion.is-playing video { opacity: 1; }

/* 顶部进度条 —— 70 屏的长卷，没有刻度就会觉得没有尽头 */
.prog {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.prog i {
  display: block;
  height: 100%;
  background: linear-gradient(to right, rgba(237, 234, 227, 0.3), rgba(237, 234, 227, 0.95));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* 透明罩：吃掉点击、长按、右键 —— 本站不提供点开 / 另存的入口 */
.frame__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 正在动的那一格，角上挂一个 Live 标记 */
.frame--motion.is-live::after {
  content: 'LIVE';
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 6;
  font-size: 8px;
  letter-spacing: 0.34em;
  color: var(--ink);
  padding: 4px 7px;
  border: 1px solid rgba(237, 234, 227, 0.22);
  background: rgba(8, 8, 10, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: liveIn var(--dur-fast) var(--ease);
}
@keyframes liveIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════
   6. 版面节拍：让长卷有疏密起伏
      一路同样大的画幅会疲劳 —— 这里用尺度、位置、
      疏密的交替来制造阅读节奏。
   ══════════════════════════════════════════════════ */

.scroll { padding: 0 0 12vh; }

/* 系列开场。scroll-margin-top：从目录/索引跳过来时别被顶栏压住 */
.series { padding-top: clamp(90px, 16vh, 190px); scroll-margin-top: calc(var(--nav-h) + 12px); }
.series__head {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 46px);
  padding: 0 var(--gap-page) clamp(38px, 6vh, 72px);
}
.series__no { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-3); padding-bottom: 10px; flex: none; }
.series__zh {
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.series__title { flex: 1 1 auto; min-width: 0; }
.series__en { font-size: 10px; letter-spacing: 0.4em; color: var(--ink-3); padding-bottom: 12px; }

/* 关键词标签 —— Live 图 / 梦境 / Ai 合成 … */
.series__tags { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 10px; }
.tag {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 4px 8px;
  line-height: 1;
  white-space: nowrap;
}
.series:hover .tag { border-color: var(--line-2); color: var(--ink-2); }
.series__poem {
  margin-left: auto;
  max-width: 300px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-align: right;
  padding-bottom: 6px;
  flex: none;
}

/* 一行作品 */
.row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-row);
  padding: 0 var(--gap-page);
  margin-bottom: clamp(46px, 8vh, 110px);
}
/*
  疏密也是节拍的一部分：独幅后留白大，三联后收得紧。
  ⚠️ 多联的高度不能压得太狠 —— 三张并排各只剩巴掌大，细节全没了，
     那是最糟的展示方式。这里的做法是「并排但不缩小多少」：
     三联只比独幅矮一点点，横向填满，每一格仍然够大。
*/
.row--solo { --h: 92vh; margin-bottom: clamp(60px, 11vh, 150px); }
.row--duo { --h: 80vh; margin-bottom: clamp(46px, 8vh, 110px); }
.row--trio { --h: 64vh; margin-bottom: clamp(38px, 6vh, 80px); }

/*
  多联时的列宽约束
  ⚠️ 别用百分比 —— CSS 里 height 的 % 是相对父元素「高度」而非宽度，会算错导致溢出。
  这里改用 vw 精确推导：单格宽 = (视口宽 - 左右页边距 - 格间距) / 列数，
  再由 9:16 反推高度。min() 保证它以「--h」为上限，宽屏时才按列宽收缩。
*/
.row--duo .frame {
  height: min(var(--h), calc((100vw - var(--gap-page) * 2 - var(--gap-row)) / 2 * 16 / 9));
}
.row--trio .frame {
  height: min(var(--h), calc((100vw - var(--gap-page) * 2 - var(--gap-row) * 2) / 3 * 16 / 9));
}

/* 错落：画面偏一侧，另一侧留给文字 */
.row--offset {
  justify-content: center;
  gap: var(--gap-off);
  align-items: center;
  --h: 74vh;
}
.row--offset .frame {
  height: min(var(--h), calc((100vw - var(--gap-page) * 2 - var(--gap-off)) * 0.52 * 16 / 9));
}
.row--offset--flip { flex-direction: row-reverse; }
.offset__note {
  max-width: 260px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 2.2;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  flex: none;
}
.offset__note .eyebrow { display: block; margin-bottom: 14px; }
.offset__of { color: var(--ink-4); }

/* 媒介切换：从「動」到「靜」的换气 */
.part {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(50px, 9vh, 120px) var(--gap-page) clamp(30px, 5vh, 60px);
}
.part__label { font-size: 10px; letter-spacing: 0.42em; color: var(--ink-3); flex: none; }
.part__line { flex: 1; height: 1px; background: var(--line); }
.part__count { font-size: 10px; letter-spacing: 0.3em; color: var(--ink-4); flex: none; }

/* ══════════════════════════════════════════════════
   7. 逐格入场
   ══════════════════════════════════════════════════ */

.rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero__scroll::after { animation: none; }
  .sound.is-on .sound__bars i { animation: none; }
}

/* ══════════════════════════════════════════════════
   8. 右侧系列索引 —— 长卷没有导航会迷失
   ══════════════════════════════════════════════════ */

.rail {
  position: fixed;
  right: clamp(12px, 1.8vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
}
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail__dot { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 9px; height: 14px; }
.rail__name {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(5px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.rail__bar { width: 12px; height: 1px; background: var(--ink-4); transition: width var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease); }
/* 鼠标进了索引区就把名字全亮出来，停在某一项上再出首图预览 */
.rail:hover .rail__name { opacity: 1; transform: none; }
.rail__dot:hover .rail__name { color: var(--ink); }
.rail__dot.is-on .rail__bar { width: 26px; background: var(--ink); }
.rail__dot.is-on .rail__name { opacity: 1; transform: none; color: var(--ink-2); }

/* 首图预览：悬浮在索引左侧，先看到大概再决定跳不跳 */
.rail__thumb {
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  width: 62px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.rail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rail__dot:hover .rail__thumb { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ══════════════════════════════════════════════════
   9. 手机目录 —— 没有 hover，就得给一个能点开的全量列表
   ══════════════════════════════════════════════════ */

.cat { display: none; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  pointer-events: none;
}
.sheet.is-show { visibility: visible; pointer-events: auto; }
.sheet__bg {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.74);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.sheet.is-show .sheet__bg { opacity: 1; }
.sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-2);
  padding: 18px var(--gap-page) calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease);
}
.sheet.is-show .sheet__panel { transform: none; }
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sheet__close { font-size: 10px; letter-spacing: 0.3em; color: var(--ink-3); }
.sheet__list { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sheet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.sheet__thumb {
  width: 44px;
  aspect-ratio: 9 / 16;
  flex: none;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.sheet__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sheet__txt { flex: 1; min-width: 0; }
.sheet__no { font-size: 9px; letter-spacing: 0.3em; color: var(--ink-4); }
.sheet__zh {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.sheet__en { font-size: 9px; letter-spacing: 0.3em; color: var(--ink-4); }
.sheet__count { font-size: 9px; letter-spacing: 0.22em; color: var(--ink-4); flex: none; }
.sheet__item.is-on .sheet__zh { color: var(--ink); }
.sheet__item.is-on .sheet__no { color: var(--ink-2); }

/* ══════════════════════════════════════════════════
   10. 声音开关
   ══════════════════════════════════════════════════ */

.sound {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2.4vw, 34px);
  z-index: 80;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-mid) var(--ease);
}
.sound.is-on { opacity: 1; pointer-events: auto; }
.sound:hover { border-color: var(--ink-3); }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sound__bars i {
  display: block; width: 2px; height: 4px;
  background: var(--ink-2);
  transition: background var(--dur-fast) var(--ease);
}
.sound__off {
  position: absolute;
  width: 17px; height: 1px;
  background: var(--ink-3);
  transform: rotate(-45deg);
  transition: opacity var(--dur-fast) var(--ease);
}
.sound.has-sound .sound__bars i { background: var(--ink); }
.sound.has-sound .sound__off { opacity: 0; }
.sound.has-sound .sound__bars i:nth-child(1) { animation: eq 900ms var(--ease) infinite alternate; }
.sound.has-sound .sound__bars i:nth-child(2) { animation: eq 700ms var(--ease) 120ms infinite alternate; }
.sound.has-sound .sound__bars i:nth-child(3) { animation: eq 1.1s var(--ease) 60ms infinite alternate; }
@keyframes eq { from { height: 3px; } to { height: 13px; } }

/* ══════════════════════════════════════════════════
   11. 尾声 · 联络
   ══════════════════════════════════════════════════ */

/* 关键词一行：开场与尾声各挂一处 */
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.keys span {
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 5px 9px;
  line-height: 1;
  white-space: nowrap;
}
.hero__keys { margin-top: 30px; }
.end__keys { margin-top: clamp(28px, 5vh, 52px); }

.end { padding: clamp(80px, 14vh, 180px) var(--gap-page) 0; }
.end__inner { max-width: 720px; margin: 0 auto; }
.end__lead {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.end__intro { margin-top: 22px; font-size: 13px; line-height: 2.2; color: var(--ink-2); letter-spacing: 0.06em; }

.sm { display: flex; gap: clamp(24px, 5vw, 70px); margin-top: clamp(40px, 7vh, 78px); flex-wrap: wrap; }
.sm__item { position: relative; }
.sm__name { font-size: 14px; letter-spacing: 0.22em; color: var(--ink); }
.sm__en { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 0.34em; color: var(--ink-3); }
.sm__val {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sm__item:hover .sm__val { color: var(--ink); border-color: var(--line-2); }
.sm__val::after { content: '码'; font-size: 9px; letter-spacing: 0; color: var(--ink-3); border: 1px solid var(--line); padding: 2px 4px; line-height: 1; }
.sm__qr {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 14px;
  padding: 9px;
  background: #fff;
  width: fit-content;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.sm__qr img { width: 116px; height: 116px; object-fit: contain; }
.sm__item:hover .sm__qr, .sm__item.is-open .sm__qr { opacity: 1; transform: none; }

.foot {
  margin-top: clamp(70px, 12vh, 140px);
  padding: 26px var(--gap-page) 34px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  line-height: 2;
}
.foot a:hover { color: var(--ink-2); }
.foot__disc { max-width: 620px; }
.foot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foot__sep { color: var(--ink-4); }
.foot__badge { height: 16px; width: auto; vertical-align: -3px; }

/* ══════════════════════════════════════════════════
   11. 加载与提示
   ══════════════════════════════════════════════════ */

.boot {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 700ms var(--ease);
}
.boot.is-out { opacity: 0; pointer-events: none; }
.boot__t { font-size: 10px; letter-spacing: 0.4em; color: var(--ink-3); }

.toast {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translate(-50%, 14px);
  padding: 11px 22px;
  background: rgba(20, 20, 23, 0.94);
  border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.2em; color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 400;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════════════════════════════════════════
   12. 响应式
   ══════════════════════════════════════════════════ */

/* 目录面板只在手机用得上（桌面有右侧索引），干脆不进桌面的渲染树 */
@media (min-width: 901px) {
  .sheet { display: none; }
}

@media (max-width: 900px) {
  .rail { display: none; }

  /* 手机上的目录入口：左下角，和右下角的声音开关对称 */
  .cat {
    position: fixed;
    left: max(14px, var(--gap-page) * 0.5);
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid var(--line-2);
    background: rgba(8, 8, 10, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--ink-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
  }
  .cat.is-on { opacity: 1; pointer-events: auto; transform: none; }
  .cat__i { display: flex; flex-direction: column; gap: 3px; width: 12px; flex: none; }
  .cat__i i { display: block; height: 1px; background: var(--ink-2); }
  .cat__i i:nth-child(2) { width: 9px; }
  .cat__i i:nth-child(3) { width: 6px; }
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; }

  .hero {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* 收紧：让开场那一格在手机上一屏内完整看到 */
    padding: calc(var(--nav-h) + 3.5vh) var(--gap-page) 3.5vh;
    gap: 30px;
  }
  .hero__text { flex: none; max-width: none; }
  .hero__media { align-self: center; --h: 40vh; }
  .hero__scroll { margin-top: 3vh; }
  .hero__rule { margin: 24px 0 20px; }

  .series__head { flex-wrap: wrap; gap: 12px 20px; padding-bottom: 34px; }
  .series__poem { margin-left: 0; max-width: none; text-align: left; width: 100%; padding-top: 4px; }

  /* 手机上并排放不下三张（编排层已经自动降成两列），
     高度让宽度去顶，min() 会自己收 —— 所以这里给的值都偏大也无妨 */
  .row { margin-bottom: 54px; gap: 8px; }
  .row--solo { --h: 78vh; }
  .row--duo { --h: 60vh; }
  .row--trio { --h: 52vh; }

  .row--offset { flex-direction: column; align-items: center; gap: 20px; }
  .row--offset--flip { flex-direction: column; }
  .row--offset .frame { height: min(66vh, calc((100vw - var(--gap-page) * 2) * 16 / 9)); }
  .offset__note { max-width: none; text-align: center; }

  .hero__keys { margin-top: 22px; }
  .sound { width: 38px; height: 38px; }
  .sm { flex-direction: column; gap: 34px; }
  /* 手机没法 hover：改成点一下「码」才展开，展开后再点一次复制 ID */
  .sm__qr {
    position: static;
    display: none;
    margin-top: 14px;
    transform: none;
  }
  .sm__item.is-open .sm__qr { display: block; }
  .sm__val::after { display: none; }
  .sm__item.is-open .sm__val { color: var(--ink); border-color: var(--line-2); }
}