/* 叮叮点歌 dingsong.ai⁠·音乐故事（FM 112.8）：有声故事书（2026-10-25 改版）
   书架 → 封面（书名、标语、短介绍、开始听故事、目录）→ 一本书（分镜图跟着音乐换、正在唱的那一句、播放键与时间轴、这一幕的故事）→ 结尾（再听一次、YouTube 外连、其他几本）。
   只用设计系统的 token；字级只用字级表（后面注明级别）；间距 var(--space-…)；圆角 var(--radius-…)。不写 style 属性：位置由程序用 CSSOM 设 --x、--p。
   手机：不放任何固定在下面的列（第 2 轮评审：固定列把可读高度压到剩 21%～44%）；图贴齐屏幕两边，第一屏就看得到图、播放键和故事开头。
   电脑（1000px 以上）：左页是图、右页是故事，像一本打开的书。
   10-25 拿掉的组件：四台分页、注意听、聆听地图、学习单、幕后、儿童模式、主持人开场、YouTube 播放器、手机底部三颗钮。 */

/* ---------- 共用的小组件 ---------- */
.st-pill { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }   /* ui-label；设计系统 .set-more 的胶囊钮 */
.st-pill:hover { border-color: var(--ink); }
.st-pill .gl, .btn .gl { width: 1em; height: 1em; }
#st-app { word-break: keep-all; overflow-wrap: break-word; }   /* 以词换行（词之间有 <wbr>） */
.st-freq { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* kicker */
.st-kick { font: 500 14px/1.5 var(--font-body); letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* fine-print；中文小标不用等宽字体 */
.st-sub { display: inline-block; margin-left: var(--space-10); font-size: max(13px, .58em); font-weight: 700; color: var(--ink-2); }
.st-tag { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 15px; line-height: 1.5; color: var(--ink-2); }   /* 书上的标签：全家都能看／战争题材／感情题材 */
.st-tag .gl { width: 18px; height: 18px; flex: none; }
.st-tag--war, .st-tag--adult { color: var(--ink); font-weight: 700; }
.st-tag--war .gl, .st-tag--adult .gl { color: var(--red-ink); }
.st-chip-row, .st-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); }
.st-big-btn { min-height: var(--tap-min); padding-inline: var(--space-14); font-size: 15px; }   /* Chip 当开关（按下＝琥珀底）；长辈找得到、按得到：44px 高、15px */
.st-big-btn .gl { width: 16px; height: 16px; }
.st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-12); }
.st-cta-note { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.st-bad { padding-top: var(--space-8); color: var(--ink); font-weight: 700; }
.st-bad a { color: var(--red-ink); }
/* 手机上的图贴齐屏幕两边（抵掉 .wrap 的左右内距） */
@media (max-width: 640px) {
  .st-pic, .st-cover-img { margin-inline: calc(50% - 50vw); border-radius: 0; }
}

/* ---------- 书架 ---------- */
.st-shelf { padding-bottom: var(--space-24); }
.st-shelf-head { display: grid; gap: var(--space-12); padding-block: var(--space-44) var(--space-28); }
.st-shelf-head h1, .st-static h1 { font: 700 min(52px, max(34px, 4.4vw))/1.1 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.st-lead { font-size: 18px; color: var(--ink); max-width: 30em; }   /* lead-text */
.st-what { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 36em; }   /* body */
.st-books { padding-block: var(--space-8) var(--space-44); display: grid; gap: var(--space-44); }
.st-book { display: grid; gap: var(--space-14); align-content: start; min-width: 0; }
.st-book-img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-10); overflow: hidden; background: var(--panel); }
.st-book-img img, .st-mv-img img, .st-cover-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-book-txt { display: grid; gap: var(--space-8); align-content: start; }
.st-book h3 { font: 700 22px/1.3 var(--font-body); }   /* program-title */
.st-book-line { font-size: 17px; line-height: 1.7; color: var(--ink); }
.st-open { justify-self: start; margin-top: var(--space-6); }
.st-book--feature h3 { font-size: min(40px, max(26px, 3vw)); line-height: 1.2; }   /* section-title */
.st-book--feature .st-book-line { font-size: 18px; }
@media (min-width: 900px) { .st-book--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: center; } }
.st-grid { display: grid; gap: var(--space-44) var(--space-28); }
@media (min-width: 600px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-all { padding-block: var(--space-8) var(--space-44); display: grid; gap: var(--space-14); }
.st-all h2 { padding-top: var(--space-28); border-top: 1px solid var(--line); font: 700 26px/1.3 var(--font-body); }   /* 分隔线画在内容宽度里（画在 .wrap 上会连左右内距一起画） */
.st-all-p { color: var(--ink-2); max-width: 40em; }
.st-mvs { display: grid; gap: var(--space-24) var(--space-28); margin-top: var(--space-10); }
@media (min-width: 600px) { .st-mvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-mv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-14); align-items: start; }
.st-mv-img { aspect-ratio: 16 / 9; border-radius: var(--radius-8); overflow: hidden; background: var(--panel); }
.st-mv-txt { display: grid; gap: var(--space-6); align-content: start; }
.st-mv h3 { font: 700 18px/1.35 var(--font-body); }
.st-mv .st-pill { justify-self: start; margin-top: var(--space-4); }
.st-static { padding-block: var(--space-44); display: grid; gap: var(--space-12); }
.st-static-list { display: grid; gap: var(--space-8); }

/* ---------- 一本书的顶端列：回书架、书名、大字 ---------- */
.st-bar { display: flex; align-items: center; gap: var(--space-10); padding-block: var(--space-12); }
.st-bar .st-big-btn { margin-left: auto; }
.st-bar-title { flex: 1 1 auto; min-width: 0; font: 700 18px/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 一本书里的页名：读的时候不占版面（封面才用大标） */
.st-bar-title a { display: block; padding-block: var(--space-12); overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-decoration: none; }   /* 可按高度 44px 以上 */
.st-bar-title a:hover { text-decoration: underline; }
.st-bar-title .st-sub { font-size: 15px; }
@media (max-width: 420px) { .st-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .st-back { min-width: var(--tap-min); justify-content: center; padding-inline: var(--space-12); } }   /* 很窄的手机：“书架”只留箭头（读屏照样念“书架”） */

/* ---------- 封面 ---------- */
.st-cover { padding-bottom: var(--space-48); }
.st-cover-body { display: grid; gap: var(--space-24); }
@media (min-width: 900px) { .st-cover-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-44); align-items: center; } }
.st-cover-img { aspect-ratio: 16 / 9; border-radius: var(--radius-14); overflow: hidden; background: var(--panel); }
.st-cover-txt { display: grid; gap: var(--space-14); align-content: start; }
.st-title { font: 700 min(52px, max(34px, 4.4vw))/1.15 var(--font-body); letter-spacing: -.01em; }   /* page-title */
.st-tagline { font-size: 18px; line-height: 1.7; color: var(--ink); }   /* lead-text */
.st-intro { font-size: 17px; line-height: 1.85; color: var(--ink); max-width: 34em; }
.st-contents { margin-top: var(--space-44); padding-top: var(--space-24); border-top: 1px solid var(--line); display: grid; gap: var(--space-12); }
.st-contents h2 { font: 700 26px/1.3 var(--font-body); }
.st-contents .st-toc { max-width: 48em; }
/* 手机封面：第一屏就是图、书名、标语和“开始听故事”（第 3 轮：320×568 原本按钮掉到第一屏外；品味建议 6） */
@media (max-width: 640px) {
  .st-cover-body { gap: var(--space-14); }
  .st-cover-txt { gap: var(--space-8); }
  .st-cover-txt .st-tag { order: 1; }   /* 题材标签排到按钮后面（按钮先进第一屏）；不是可以按的东西，Tab 顺序不受影响 */
  .st-cover-txt .st-intro { order: 2; margin-top: var(--space-8); }
}

/* 目录（封面、书里的“目录”都用这一份）：按一幕就从那一幕开始听 */
.st-toc { list-style: none; margin: 0; padding: 0; display: grid; }
.st-toc li { border-bottom: 1px solid var(--line); }
.st-toc-row { display: grid; grid-template-columns: var(--space-44) minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; min-height: var(--tap-min); padding-block: var(--space-12); color: var(--ink); text-decoration: none; }
.st-toc-row:hover .st-toc-t b { text-decoration: underline; }
.st-toc-n { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.st-toc-row[aria-current] .st-toc-n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-toc-t { display: grid; gap: var(--space-2); min-width: 0; }
.st-toc-t b { font-size: 17px; line-height: 1.4; }
.st-toc-t > span { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.st-toc-time { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 一本书 ---------- */
.st-reader { padding-bottom: var(--space-48); }
.st-spread { display: grid; gap: var(--space-22); }
/* 电脑：左页图约 60%、右页故事 340～400px（中文每行约 22 字）；书页至少一个窗口高，页脚不出现在读故事的第一屏（第 3 轮品味建议 4、5） */
@media (min-width: 1000px) {
  .st-reader { min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); }
  .st-spread { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: "stage text" "toc text"; gap: 0 var(--space-44); align-items: start; }
  .st-stage { grid-area: stage; } .st-text { grid-area: text; } .st-tocbox { grid-area: toc; }
}
@media (min-width: 641px) and (max-width: 999px) { .st-stage, .st-text, .st-tocbox { width: 100%; max-width: 760px; justify-self: center; } }
.st-stage { min-width: 0; }
/* 分镜图：两张叠着，新的那张淡入（0.45 秒）；减少动态时直接换 */
.st-pic { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-14); overflow: hidden; background: var(--panel); touch-action: pan-y; }
.st-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.st-img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .st-img { transition: none; } }
.st-pic .onair { right: var(--space-12); top: var(--space-12); z-index: 1; }   /* ON AIR 灯：叠在图的右上角，只有在播的时候亮（bundle .onair） */

/* 跟着唱的那一句：像字幕，在图的正下方；没在唱的时候空着（位置先留好，故事不会跳来跳去） */
.st-sing { display: grid; align-content: start; justify-items: center; gap: var(--space-2); min-height: 4.2em; padding-top: var(--space-12); text-align: center; text-wrap: balance; }
.st-reader:not([data-sing]) .st-sing { display: none; }   /* 这一幕没有歌词（前奏、纯音乐段落）：不留空格（第 3 轮必修 1） */
.st-sing-o { font: 700 18px/1.45 var(--font-body); color: var(--ink); }
.st-sing-z { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 1000px) { .st-sing { min-height: 3.6em; } }

/* 播放：时间轴（可以拖）＋上一幕／播放／下一幕＋目录 */
.st-ctl { display: grid; gap: var(--space-2); padding-top: var(--space-6); }
.st-posl { display: block; }
.st-track { position: relative; display: block; }
#st-pos { --p: 0%; display: block; width: 100%; min-height: var(--tap-min); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#st-pos::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--ink) var(--p), var(--line-strong) var(--p)); }
#st-pos::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: calc(var(--space-8) * -1); border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); }
#st-pos::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--line-strong); }
#st-pos::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--ink); }
#st-pos::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); }
#st-pos:focus-visible { outline-offset: 0; }
.st-ticks { position: absolute; left: 11px; right: 11px; top: calc(50% + var(--space-6)); height: var(--space-6); pointer-events: none; }   /* 每一幕从哪里开始（装饰；跳幕用目录） */
.st-ticks i { position: absolute; left: var(--x); top: 0; width: 2px; height: 100%; transform: translateX(-50%); background: var(--line-strong); }
.st-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-10); }
.st-time { display: grid; gap: var(--space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#st-time-now { font-size: 15px; font-weight: 700; color: var(--ink); }
.st-time-all { font-size: 13px; color: var(--ink-2); }
.st-trio { display: flex; align-items: center; gap: var(--space-12); }
.st-round { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.st-round:hover:not(:disabled) { border-color: var(--ink); }
.st-round:disabled { opacity: .35; cursor: not-allowed; }
.st-round .gl { width: 20px; height: 20px; }
.st-knob { width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow-knob); cursor: pointer; }   /* 收音机旋钮同一颗（首页 .mv-knob） */
.st-knob .gl { width: 24px; height: 24px; }
.st-knob[aria-busy] { opacity: .7; }
.st-reader[data-end] .st-knob { display: none; }   /* 结尾页只留红色“再听一次”（第 4 轮评审品味建议 2）；原本 visibility: hidden 留着位置，电脑、平板的控制列“上一幕〔空 60px〕下一幕”中间空一个洞（10-26 第 6 轮评审小事）→ 整颗拿掉，上一幕、下一幕靠在一起 */
.st-reader[data-end] .st-trio { min-height: 60px; }   /* 播放键 60px 拿掉以后，控制列高度照旧（版面不跳）；手机直放、横放的 .st-trio 是 display: contents，这条不作用 */
.st-knob:hover { filter: brightness(1.2); }
.st-knob, .st-round, .st-pill, .st-toc-row, #st-pos { touch-action: manipulation; }   /* 手机连点不放大页面（Web Interface Guidelines） */
.st-side { display: flex; justify-content: flex-end; }
.st-tocbtn { padding-inline: var(--space-12); }
.st-tocbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-tocbox { margin-top: var(--space-12); border-top: 1px solid var(--line); }
.st-tocbtn .gl { width: 18px; height: 18px; }

/* ---------- 手机、平板直放：一本书刚好一个画面（第 3 轮必修 1、2） ----------
   图、歌词、播放列固定在上半，故事那一格自己卷：往下读故事时，图和歌词不会离开画面；
   没有任何东西叠在字上（第 2 轮：固定列挡字），也没有卷动动态。高度＝窗口 − 页眉 −（760px 以下）底部五台。 */
@media (max-width: 999px) and (orientation: portrait) {
  .st-reader { display: flex; flex-direction: column; height: calc(100vh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px)); height: calc(100dvh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px)); padding-bottom: 0; }   /* --st-head、--st-tabbar：stories.js 量页眉与底部五台的实际高度（外框改了尺寸也对得上） */
  .st-spread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
  .st-stage { flex: none; }
  .st-text, .st-tocbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: var(--space-8); padding-block: var(--space-12); border-top: 1px solid var(--line); }
  .st-reader.is-toc .st-text { display: none; }   /* 目录打开时暂时取代故事那一格 */
  .st-text:focus-visible { outline-offset: calc(var(--space-3) * -1); }
}
/* 手机：书名列收成 44px；播放列收成一列“上一幕｜时间轴｜下一幕｜目录”，播放键放在图的右下角（像 Apple Music 的迷你播放键） */
@media (max-width: 640px) {
  .st-bar { padding-block: 0; gap: var(--space-8); }
  .st-bar-title { font-size: 17px; }
  .st-bar-title a { padding-block: var(--space-12); }
  .st-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--space-6); align-items: center; }
  .st-pic, .st-sing { grid-column: 1 / -1; }
  .st-pic { grid-row: 1; }
  .st-ctl, .st-btns, .st-trio, .st-side { display: contents; }
  .st-time { display: none; }   /* 时间照样由时间轴念给读屏；画面上只留图、歌词、故事 */
  .st-posl { grid-column: 2; grid-row: 3; }
  .st-round[data-act="prev"] { grid-column: 1; grid-row: 3; }
  .st-round[data-act="next"] { grid-column: 3; grid-row: 3; }
  .st-tocbtn { grid-column: 4; grid-row: 3; width: var(--tap-min); padding: 0; justify-content: center; }
  .st-tocbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 只留图标；读屏照样念“目录” */
  .st-knob { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: end; position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 var(--space-12) var(--space-12) 0; }
  .st-sing { min-height: 3.2em; padding-top: var(--space-8); }
  .st-sing-o { font-size: 16px; line-height: 1.4; }
  .st-sing-z { font-size: 14px; line-height: 1.45; }
  .st-text, .st-tocbox { margin-top: var(--space-2); padding-block: var(--space-8); }
  .st-reader .st-text { gap: var(--space-6); }
  .st-of { display: none; }   /* “⁠·共 6 幕”：手机省下来，幕名和故事早一行出现 */
}
@media (max-width: 360px) { .st-scene-h { font-size: 18px; } }   /* 320 宽：幕名排一行 */
/* 手机开大字：歌词与故事照样放大，但不能把故事挤出第一屏（第 3 轮必修 1：大字时 375×667 原本 0 行） */
@media (max-width: 640px) {
  html.st-big .st-sing { min-height: 3.2em; }
  html.st-big .st-sing-o { font-size: 18px; line-height: 1.4; }
  html.st-big .st-sing-z { font-size: 16px; line-height: 1.45; }
  html.st-big .st-story { font-size: 22px; line-height: 1.6; }
  html.st-big .st-scene-h { font-size: 22px; }
}
@media (max-width: 360px) { html.st-big .st-scene-h { font-size: 18px; } html.st-big .st-scene-head .st-kick { font-size: 15px; } html.st-big .st-sing-o { font-size: 16px; } html.st-big .st-sing-z { font-size: 14px; } }   /* 320 宽开大字：歌词维持一般大小，把空间留给放大的故事 */


/* 这一幕的故事（电脑是右页） */
.st-text { display: grid; gap: var(--space-12); align-content: start; min-width: 0; }
.st-scene-h { font: 700 26px/1.3 var(--font-body); }   /* section-title（小） */
.st-scene-head { display: grid; gap: var(--space-4); }
.st-story { font-size: 18px; line-height: 1.9; color: var(--ink); max-width: 34em; text-wrap: pretty; }   /* lead-text 字级：这页的主角 */
.st-next { margin-top: var(--space-6); padding-top: var(--space-12); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--ink-2); }   /* 预告：翻页前的一句话 */
/* 预告平常先藏着（位置留好，故事不会跳），这一幕最后约 6 秒才淡入；减少动态时直接出现 */
.st-next { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.st-next.is-shown { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .st-next, .st-next.is-shown { transition: none; } }
@media (max-width: 640px) {
  .st-scene-h { font-size: 22px; }
  .st-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-10); }   /* 手机：幕次和幕名排同一行，故事早一行出现 */
  .st-story { font-size: 17px; line-height: 1.85; }
  .st-shelf-head h1, .st-static h1, .st-title { font-size: 34px; }   /* 手机各页页名统一 34px（10-25 评审） */
  .st-spread { gap: var(--space-14); }
}
/* 很矮的手机（320×568 这类，高 600px 以下）：故事格至少露出 2 行故事（第 4 轮评审：原本只有 1 行）。
   照评审品味建议 1：幕次和幕名缩成一行小字（幕名 15px 粗、幕次 14px）；跟唱列、故事格的上内距收小。图、歌词、播放列的大小不动，没有东西叠在字上。 */
@media (max-width: 640px) and (max-height: 600px) and (orientation: portrait) {
  .st-spread { gap: var(--space-6); }   /* 播放列和故事格之间：故事格上缘本来就有一条细线分开 */
  .st-scene-head { gap: 0 var(--space-8); }
  .st-scene-head .st-kick, html.st-big .st-scene-head .st-kick { font-size: 14px; line-height: 1.5; }
  .st-scene-h, html.st-big .st-scene-h { font-size: 15px; line-height: 1.5; }
  .st-text, .st-tocbox { padding-top: var(--space-4); }
  .st-reader .st-text { gap: var(--space-4); }
}
/* 结尾 */
.st-end { display: grid; gap: var(--space-14); align-content: start; }
.st-end h2 { font: 700 32px/1.25 var(--font-body); }
/* 手机：结尾页的播放键藏起来以后（第 4 轮品味建议 2），红色“再听一次”要在故事格的第一眼就看得到（320×568 原本要往下卷）：
   按钮排到“故事说完了”正下方，书的标语移到按钮后面。可以按的东西顺序不变（只动不能按的标语）。 */
@media (max-width: 640px) {
  .st-end > .st-story { order: 1; }
  .st-end > .st-more { order: 2; }
}
.st-more { margin-top: var(--space-18); padding-top: var(--space-18); border-top: 1px solid var(--line); display: grid; gap: var(--space-8); }
.st-more h3 { font: 700 18px/1.4 var(--font-body); }
.st-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.st-more-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-12); align-items: center; padding-block: var(--space-6); color: var(--ink); text-decoration: none; }
.st-more-row img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius-6); }
.st-more-row > span { display: grid; gap: var(--space-2); min-width: 0; }
.st-more-row b { font-size: 17px; line-height: 1.4; }
.st-more-row:hover b { text-decoration: underline; }
.st-more-row > span > span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 样稿注记（页脚上方、默认收起；正式网站不会有） ---------- */
.st-notes-wrap { padding-block: var(--space-24) var(--space-12); }
.mock-notes { padding-top: var(--space-12); border-top: 2px dashed var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.mock-notes summary { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 700; color: var(--ink); cursor: pointer; }
.mock-notes ul { margin: var(--space-8) 0 0; padding-left: var(--space-24); display: grid; gap: var(--space-4); }

/* ---------- 大字（无障碍：长辈、投影）：字和按钮都放大 ---------- */
.st-big .st-story, .st-big .st-intro, .st-big .st-book-line, .st-big .st-what, .st-big .st-sing-o { font-size: 22px; line-height: 1.75; }   /* item-title 字级 */
.st-big .st-sing-z, .st-big .st-next, .st-big .st-toc-t b, .st-big .st-tag, .st-big .st-cta-note, .st-big .st-more-row b, .st-big .st-tagline { font-size: 18px; }
.st-big .st-toc-t > span, .st-big .st-kick, .st-big .st-toc-time, .st-big #st-time-now, .st-big .st-more-row > span > span, .st-big .st-all-p { font-size: 17px; }
.st-big .st-time-all { font-size: 15px; }
.st-big .st-pill, .st-big .btn, .st-big .st-big-btn { font-size: 18px; }
.st-big .st-scene-h { font-size: 30px; }
.st-big .st-sing { min-height: 5em; }

/* ---------- 手机横放（高 ≤ 520，667×375、844×390）：一本书刚好一个画面，左边整张图、右边歌词与故事（10-26 第 6 轮评审必修 3）----------
   原本照直放排：图（16:9）比页眉到五台之间还高，任何时候都看不到整张图，故事字在两屏以下。
   照教室一首歌页的手机横放（主控核准过的取舍）：页眉不黏、底部五台在读书时收起（“书架”钮与页眉 Logo 照样能离开）。
   排法照电脑版的左右两页：左＝图＋一列“上一幕｜时间轴｜下一幕｜目录”（播放键叠在图的右下角，跟手机直放一样）；右＝书名列、正在唱的那一句、故事（自己卷）。
   图宽取“画面宽 6 成”和“高度放得下的宽”两者小的，整张图一定在画面里；没有卷动动态。 */
@media (max-height: 520px) and (orientation: landscape) {
  .site-head { position: relative; }
  html:has(.st-reader) .tabbar { display: none; }
  .st-reader { --st-h: calc(100dvh - var(--st-head, var(--header-height)) - var(--st-tabbar, 0px));
    --st-pic-w: min(60%, calc((var(--st-h) - 2 * var(--space-8) - 2 * var(--space-6) - var(--tap-min)) * 16 / 9));
    height: var(--st-h); padding-block: var(--space-8); display: grid;
    grid-template-columns: var(--tap-min) minmax(0, calc(var(--st-pic-w) - 3 * var(--tap-min) - 3 * var(--space-6))) var(--tap-min) var(--tap-min) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-6); }
  .st-spread, .st-stage, .st-ctl, .st-btns, .st-trio, .st-side { display: contents; }
  .st-bar { grid-column: 5; grid-row: 1; padding-block: 0; margin-inline-start: var(--space-10); gap: var(--space-8); }
  .st-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .st-back { min-width: var(--tap-min); justify-content: center; padding-inline: var(--space-12); }   /* “书架”只留箭头（读屏照样念） */
  .st-bar-title { font-size: 17px; }
  .st-bar-title a { padding-block: var(--space-10); }
  .st-bar-title a, .st-bar-title a * { white-space: nowrap; }   /* 书名一行（放不下就省略号），不把右边挤矮 */
  .st-bar .st-big-btn, .st-big .st-bar .st-big-btn { font-size: 15px; }
  .st-big .st-reader { --st-pic-w: min(52%, calc((var(--st-h) - 2 * var(--space-8) - 2 * var(--space-6) - var(--tap-min)) * 16 / 9)); }   /* 大字：右边的故事宽一点 */
  .st-pic { grid-column: 1 / 5; grid-row: 1 / 4; align-self: end; width: 100%; margin-inline: 0; border-radius: var(--radius-8); }
  .st-knob { grid-column: 1 / 5; grid-row: 1 / 4; justify-self: end; align-self: end; position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 var(--space-12) var(--space-12) 0; }
  .st-round[data-act="prev"] { grid-column: 1; grid-row: 4; }
  .st-posl { grid-column: 2; grid-row: 4; align-self: center; }
  .st-round[data-act="next"] { grid-column: 3; grid-row: 4; }
  .st-tocbtn { grid-column: 4; grid-row: 4; width: var(--tap-min); padding: 0; justify-content: center; }
  .st-tocbtn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 只留图标；读屏照样念“目录” */
  .st-time { display: none; }   /* 时间照样由时间轴念给读屏 */
  .st-sing { grid-column: 5; grid-row: 2; justify-items: start; text-align: start; min-height: 3.2em; padding: 0 0 0 var(--space-10); }
  .st-sing-o { font-size: 16px; line-height: 1.4; }
  .st-sing-z { font-size: 14px; line-height: 1.45; }
  .st-big .st-sing { min-height: 3.4em; }
  .st-big .st-sing-o { font-size: 18px; line-height: 1.4; }   /* 大字的歌词跟手机直放的大字一样大，空间留给放大的故事 */
  .st-big .st-sing-z { font-size: 15px; line-height: 1.45; }
  .st-text, .st-tocbox { grid-column: 5; grid-row: 3 / 5; width: auto; max-width: none; justify-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--space-8) 0 var(--space-8) var(--space-10); border-top: 1px solid var(--line); }
  .st-reader.is-toc .st-text { display: none; }   /* 目录打开时暂时取代故事那一格 */
  .st-text:focus-visible { outline-offset: calc(var(--space-3) * -1); }
  .st-reader .st-text { gap: var(--space-6); }
  .st-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-10); }   /* 幕次和幕名排同一行，故事早一行出现 */
  .st-scene-h { font-size: 18px; } .st-big .st-scene-h { font-size: 22px; }
  .st-of { display: none; }
  .st-story { font-size: 17px; line-height: 1.8; }
}

/* ---------- 打印：只印文字 ---------- */
@media print {
  .st-ctl, .st-bar .chip, .st-tocbox, .st-sing, .st-cta { display: none; }
  .st-img:not(.is-on) { display: none; }
}
/* 英日文页（10-27 接线）：胶囊钮的字比中文长（Watch the music video on YouTube／YouTube で MV を見る），不换行会把 MV 卡片撑出画面 → 可以换行 */
html:is([lang="en"], [lang="ja"]) .st-pill { white-space: normal; line-height: 1.3; padding-block: var(--space-6); }
/* 英日文页：不换行的 .nw 只给中文页用；英日文的长词组要能断（跟 home.css 同一条） */
html:is([lang="en"], [lang="ja"]) main .nw { white-space: normal; overflow-wrap: anywhere; }