/* =========================================================================
   components.css —— 可读的那一层：幕间叙事、展签、灯箱、钤印热点、
   头部 / 展厅 / 说明页 / 页脚 / 导览、以及两条降级路径。
   四个 UI 任务的样式在此合拢，各段互不重名。

   令牌纪律：--ink / --paper / --stone / --cinnabar 是展览的颜色；
   --lime 与 --electric 只属于交互层——本文件正是它们该出现的地方。
   prefers-reduced-motion：base.css 已全局把 transition/animation 掐到 .01ms，
   本文件不另起自发动画（GSAP 那一路由各模块自己按 state.reducedMotion 归零）。
   ========================================================================= */

/* =========================================================================
   一 · 幕间叙事 ——「鲁迅的二十三年」（js/ui/interstitial.js）
   ========================================================================= */
.Beats { position: fixed; inset: 0; z-index: var(--z-ui); pointer-events: none; }

/* 每段各占满整层、自己居中。不靠 .Beats 的 place-items——绝对定位子项在网格容器里
   的对齐行为各家实现不一致，赌不起；每段自带一个居中格子最稳。 */
.Beat { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-8); }

/* 不给 opacity 加 transition：不透明度由 interstitial.js 的梯形包络逐帧写，
   行程本身已在 main.js 里 damp 过。再叠一层 .35s 过渡只会让字慢半拍，
   并把 visibility 的切换一起拖住。 */
.Beat__Body { max-width: 46ch; background: color-mix(in srgb, var(--ink) 78%, transparent);
              backdrop-filter: blur(3px); padding: var(--sp-6) var(--sp-8);
              border-left: 2px solid var(--electric); }
.Beat p { margin: 0 0 .8em; line-height: 1.9; font-size: 1.02rem; }
.Beat p:last-of-type { margin-bottom: 0; }
.Beat__Src { display: block; margin-top: var(--sp-4); font-size: .8rem;
             color: var(--stone-hi); font-style: normal; }
.lang-en .Beat__Body { font-family: var(--font-ui); }   /* 英文长句用 Inter，别用展示体 */

/* 序幕那条日记：单独放大居中，全场只此一句这样处理。
   放大的字号写在 .Beat__Body 上、段落只写 1em —— **不是排版口味，是 ch 的算法**：
   ch 按元素自己的 font-size 解，字号若只写在 <p> 上，24ch 是按继承来的 16px 算的
   （≈190px），38px 的大字于是一行只站得下五个，实测断成「胡孟乐/贻山东/画像石/
   刻拓本/十枚。」五行，出处也跟着断成三行。 */
.Beat--diary .Beat__Body { max-width: 24ch; background: none; backdrop-filter: none;
                           border: 0; text-align: center;
                           font-size: clamp(1.3rem, 3.4vw, 2.4rem); }
.Beat--diary p { font-size: 1em; line-height: 1.7; }
.Beat--diary .Beat__Src { font-size: .34em; }

/* 卷末致台静农是长引文，放宽一档 */
.Beat--quote .Beat__Body { max-width: 52ch; }

/* 卷外引言：地已转纸，反相配色 */
.Beat--intro .Beat__Body { background: color-mix(in srgb, var(--paper) 88%, transparent);
                           color: var(--ink); }
.Beat--intro .Beat__Src { color: var(--stone); }

@media (max-width: 640px) {
  .Beat { padding: var(--sp-4); }
  .Beat__Body { padding: var(--sp-4) var(--sp-6); }
}

/* =========================================================================
   二 · 展签 · 灯箱 · 钤印热点（js/ui/label.js、js/ui/lightbox.js）
   ========================================================================= */

/* SVG 反锐化的宿主。不能 display:none（见 index.html 处的注释）。 */
.SvgDefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- 展签 --
   展签落在**纸**上，不落在墨上。这不是趣味问题，是对比度问题：
   副行两态的两种颜色里，--electric #1414E6 对 --ink #14120F 只有 2.03:1，
   在暗地上根本读不出来；换到 --paper #F2EDE3 上是 7.92:1。实测（WCAG 2.x）：
     今考 --electric  7.92:1  ✓ AA 正文
     旧题 --stone     5.12:1  ✓ AA 正文
   两态名一律 18.8px/700（原第三态 --cinnabar 4.45:1 差 0.05，那一档随
   〔待核〕一并撤下；字号规则保留，走 AA 大号文本判据 ≥18.66px 粗体）
   注解正文本身一律 --ink（16.0:1），颜色只加在那两个字上：颜色是冗余信息。
   -------------------------------------------------------------------- */
.Label {
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-6);
  font-family: var(--font-cn);
  line-height: 1.75;
}
.Label:lang(en) { font-family: var(--font-ui); }

.Label__seq {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-ui);
  font-size: .75rem; letter-spacing: .28em;
  color: var(--stone);
}
.Label__title {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 600; line-height: 1.35;
}

.Label__note { margin: 0 0 var(--sp-4); font-size: .9375rem; }
.Label__kind {
  display: inline-block; margin-right: .5em;
  font-size: 1.175rem;              /* 18.8px —— 见上方的大号文本判据，勿调小 */
  font-weight: 700; line-height: 1.2;
  vertical-align: -.05em;
}
.Label__note--jinkao .Label__kind { color: var(--electric); }
.Label__note--jiuti  .Label__kind { color: var(--stone); }
.Label__noteText { color: var(--ink); }

.Label__meta { margin: 0 0 var(--sp-4); font-size: .875rem; }
.Label__row { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.Label__term { color: var(--stone); font-family: var(--font-ui); font-size: .8125rem; letter-spacing: .08em; }
.Label__value { margin: 0; color: var(--ink); }

.Label__blurb { margin: 0; font-size: 1rem; }
.Label--coda .Label__title { color: var(--ink); }

/* -------------------------------------------------------------- 灯箱 -- */
.Lightbox { position: fixed; inset: 0; z-index: var(--z-panel); display: flex; }
.Lightbox[hidden] { display: none; }
.Lightbox__scrim { position: absolute; inset: 0; background: rgb(3 3 2 / .93); }
.Lightbox {
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.Lightbox.is-open { opacity: 1; }

.Lightbox__inner {
  position: relative; display: grid; width: 100%; height: 100%;
  grid-template-columns: minmax(0, 1fr) min(30rem, 34vw);
}
.Lightbox__viewer {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  gap: var(--sp-3);
}
.Lightbox__stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; overflow: auto;      /* flex + margin:auto 才是可滚动容器的居中办法 */
  touch-action: pan-x pan-y;
  cursor: grab;
}
.Lightbox__stage:active { cursor: grabbing; }
.Lightbox__stage picture { margin: auto; display: block; }
.Lightbox__stage img { display: block; max-width: none; height: auto; }

.Lightbox__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  background: var(--ink-2); color: var(--paper);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-ui); font-size: .875rem;
}
.Lightbox__modes { display: flex; gap: 1px; }
.Lightbox__mode {
  appearance: none; border: 1px solid var(--stone); background: transparent;
  color: var(--paper); font: inherit; padding: .35rem .9rem;
  border-radius: var(--radius); cursor: pointer;
}
.Lightbox__mode[aria-pressed="true"] {
  background: var(--electric); border-color: var(--electric); color: var(--paper);
}
.Lightbox__zoom { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.Lightbox__zoom input[type="range"] { accent-color: var(--lime); width: min(16rem, 30vw); }
.Lightbox__zoom output { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.Lightbox__zoom input:disabled { opacity: .4; }

.Lightbox__hint { margin: 0; color: var(--stone-hi); font-size: .8125rem; line-height: 1.6; }
/* 披露常驻：三档之下都在场，不随模式隐藏，也不缩到读不见。 */
.Lightbox__disclosure {
  margin: 0; color: var(--paper); font-size: .8125rem; line-height: 1.6;
  border-top: 1px solid var(--stone); padding-top: var(--sp-2);
}

.Lightbox__rail { overflow: auto; background: var(--paper); }
.Lightbox__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  appearance: none; border: 1px solid var(--stone); background: var(--ink-2);
  color: var(--paper); font-family: var(--font-ui); font-size: .875rem;
  padding: .4rem 1rem; border-radius: var(--radius); cursor: pointer;
}

@media (max-width: 60rem) {
  .Lightbox__inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .Lightbox__rail { max-height: 45vh; }
  .Lightbox__close { top: auto; bottom: var(--sp-4); right: var(--sp-4); }
}

/* ------------------------------------------------------------ 钤印热点 -- */
.SealLayer { position: fixed; inset: 0; z-index: var(--z-ui); pointer-events: none; }
.Seal {
  position: absolute; top: 0; left: 0;      /* 位置由 JS 写 transform；这两条别改成 transform */
  margin: -22px 0 0 -22px;                  /* 44×44 命中区，中心对准投影点 */
  width: 44px; height: 44px; padding: 0;
  appearance: none; border: 0; background: none; cursor: pointer;
  pointer-events: auto;
}
.Seal::before {
  content: ""; position: absolute; inset: 11px;
  border: 2px solid var(--cinnabar); border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px rgb(20 18 15 / .55);   /* 亮纸暗室两头都看得见 */
  transition: transform .18s var(--ease-out);
}
.Seal:hover::before, .Seal:focus-visible::before, .Seal.is-open::before { transform: scale(1.25); }

.Seal__note {
  position: absolute; left: 50%; bottom: 100%;
  transform: translate(calc(-50% + var(--tip-shift, 0px)), -14px);
  width: max-content; max-width: min(24rem, 78vw);
  background: var(--paper); color: var(--ink);
  padding: var(--sp-3); border-left: 3px solid var(--cinnabar);
  font-family: var(--font-cn); font-size: .8125rem; line-height: 1.7; text-align: left;
  /* 用 opacity 藏，**不用 display / visibility** —— 后两者会把它摘出无障碍树，
     aria-describedby 就指向了一个读屏读不到的节点。 */
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease-out);
}
.Seal__note:lang(en) { font-family: var(--font-ui); }
.Seal:hover .Seal__note, .Seal:focus-visible .Seal__note, .Seal.is-open .Seal__note { opacity: 1; }

/* =========================================================================
   三 · 头部 / 展厅 / 说明页 / 页脚 / 导览
   （js/ui/halls.js、js/ui/panels.js、js/ui/tour.js）
   ========================================================================= */

/* ---- 常驻头部 ------------------------------------------------------- */
.AppHeader {
  position: fixed; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  /* 自带暗底：地在卷末由墨转纸，工具条不跟着变色也照样读得清 */
  background: linear-gradient(to bottom, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .88) 66%, rgba(20, 18, 15, 0) 100%);
}
.AppHeader__Logo {
  display: flex; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: var(--sp-2); margin: calc(var(--sp-2) * -1);
  color: var(--paper); text-align: left; cursor: pointer;
}
.AppHeader__Brand-cn { font-family: var(--font-cn); font-size: 1rem; letter-spacing: .12em; }
.AppHeader__Brand-en {
  font-family: var(--font-latin-display); font-size: .7rem;
  color: var(--chrome-dim); letter-spacing: .16em; text-transform: uppercase;
}
.AppHeader__Nav { display: flex; align-items: center; gap: var(--sp-2); }

.UIBtn {
  font-family: var(--font-ui); font-size: .8125rem; letter-spacing: .06em;
  color: var(--paper); background: rgba(20, 18, 15, .55);
  border: 1px solid var(--stone); border-radius: var(--radius);
  padding: .45rem .85rem; cursor: pointer; white-space: nowrap;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.UIBtn:hover { border-color: var(--stone-hi); background: rgba(20, 18, 15, .8); }
.UIBtn[aria-pressed="true"], .UIBtn[aria-expanded="true"] {
  border-color: var(--lime); color: var(--lime);
}

/* ---- 展厅 ----------------------------------------------------------- */
.Halls {
  position: fixed; inset: 0; z-index: var(--z-panel);
  overflow-y: auto; overscroll-behavior: contain;
  /* 不透明：头部与页脚就在它下面（z-ui 20 < z-panel 40），留一丝透明就会透出来 */
  background: var(--ink);
  color: var(--paper);
}
.Halls[hidden] { display: none; }
.Halls__Inner {
  position: relative;
  max-width: 72rem; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(var(--sp-4), 4vw, var(--sp-8)) 7rem;
}
.Halls__Close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(var(--sp-4), 4vw, var(--sp-8));
  width: 2.5rem; height: 2.5rem; line-height: 1;
  font-size: 1.5rem; color: var(--paper);
  background: none; border: 1px solid var(--stone); border-radius: var(--radius);
  cursor: pointer;
}
.Halls__Close:hover { border-color: var(--stone-hi); }
.Halls__Title {
  font-family: var(--font-cn); font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 400; letter-spacing: .12em; margin: 0 0 var(--sp-3);
}
.Halls__Lede {
  max-width: 46em; margin: 0 0 var(--sp-12);
  font-size: .9375rem; line-height: 1.9; color: var(--stone-hi);
}

.HallScroll { margin-bottom: var(--sp-12); }
.HallScroll__Head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 55%, transparent);
  font-weight: 400;
}
.HallScroll__No {
  font-family: var(--font-cn); font-size: .8125rem; letter-spacing: .3em;
  color: var(--cinnabar);
}
.HallScroll__Name { font-family: var(--font-cn); font-size: 1.375rem; letter-spacing: .08em; }
.HallScroll__Src { font-size: .75rem; color: var(--stone-hi); letter-spacing: .04em; }
.HallScroll__Empty {
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-4);
  border-inline-start: 2px solid var(--cinnabar);
}
.HallScroll__Empty p { margin: 0; font-size: .9375rem; line-height: 1.9; color: var(--paper); }
.HallScroll__EmptyBody { margin-top: var(--sp-2) !important; color: var(--stone-hi) !important; }
.HallScroll__EmptySrc { margin-top: var(--sp-2) !important; color: var(--stone-hi) !important; font-size: .8125rem !important; }
/* 空篇在标题行上就标出来：朱书的一小行，与 .HallScroll__No 同族，扫目次时就看得见 */
.HallScroll__Mark {
  font-family: var(--font-cn); font-size: .75rem; letter-spacing: .16em;
  color: var(--cinnabar); border: 1px solid color-mix(in srgb, var(--cinnabar) 55%, transparent);
  border-radius: var(--radius); padding: .1em .5em;
}

.HallScroll__Cards {
  display: grid; gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.HallCard {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2); text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: inherit; font: inherit;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.HallCard:hover { border-color: var(--stone); background: rgba(255, 255, 255, .03); }
.HallCard__Thumb {
  position: relative; display: block;
  height: 9.5rem; overflow: hidden; background: var(--ink-2);
}
/* 绝对定位而不是 max-height:100%：定高格子里的百分比最大高度会绕回内容自身，
   竖幅拓片（最瘦的 aspect 0.32）会顶破格子。 */
.HallCard__Thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.HallCard__Text { display: block; }
.HallCard__Title {
  display: block; font-family: var(--font-cn); font-size: .9375rem; line-height: 1.6;
}
.lang-en .HallCard__Title { font-family: var(--font-ui); }
.HallCard__Kind {
  display: inline-block; margin-inline-start: .4em; padding: 0 .35em;
  font-family: var(--font-ui); font-size: .625rem; letter-spacing: .1em;
  vertical-align: .15em; white-space: nowrap;
  border: 1px solid currentColor; border-radius: var(--radius);
  color: var(--stone-hi);
}
.HallCard__Sub {
  display: block; margin-top: .3rem;
  font-family: var(--font-ui); font-size: .6875rem; line-height: 1.6;
  color: var(--stone-hi);
}

/* ---- 说明页（纸） --------------------------------------------------- */
.Panel {
  position: fixed; inset: 0; z-index: var(--z-panel);
  display: grid; place-items: center;
  padding: clamp(var(--sp-4), 3vw, var(--sp-12));
  background: rgba(20, 18, 15, .92);
}
.Panel[hidden] { display: none; }
.Panel__Inner {
  position: relative;
  width: min(42rem, 100%); max-height: min(86vh, 60rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(var(--sp-6), 4vw, var(--sp-12));
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.Panel__Close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 2.25rem; height: 2.25rem; line-height: 1; font-size: 1.375rem;
  background: none; border: 1px solid var(--stone); border-radius: var(--radius);
  color: var(--ink); cursor: pointer;
}
/* 纸上的荧光绿几乎看不见（对比 1.1:1）——纸面上的焦点环换电光蓝（10.9:1） */
.Panel__Inner :where(a, button, [tabindex]):focus-visible { outline-color: var(--electric); }

.Panel__Body { max-width: 34em; margin-inline: auto; }
.Panel__Body h1 {
  font-family: var(--font-cn); font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: .1em;
  margin: 0 0 var(--sp-6);
}
.Panel__Body h3 {
  font-family: var(--font-cn); font-weight: 400; font-size: 1.0625rem; letter-spacing: .08em;
  margin: var(--sp-8) 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 35%, transparent);
}
.Panel__Body p, .Panel__Body li { font-size: .9375rem; line-height: 2; margin: 0 0 var(--sp-4); }
.Panel__Body ul { margin: 0 0 var(--sp-4); padding-inline-start: 1.2em; }
.Panel__Body strong { font-weight: 600; }
.Panel__Body em { font-style: normal; color: var(--cinnabar); }
.Panel__Body .lede {
  margin-bottom: var(--sp-8); padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--cinnabar);
  background: var(--paper-2); font-size: .875rem; line-height: 1.8;
}
.Panel__Body .muted { color: var(--stone); font-size: .8125rem; }
.Panel__Body .link, .Panel__Body a { color: var(--electric); text-underline-offset: .2em; }
.lang-en .Panel__Body h1, .lang-en .Panel__Body h3 { font-family: var(--font-latin-display); letter-spacing: .02em; }

/* ---- 页脚 ----------------------------------------------------------- */
.AppFooter {
  position: fixed; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  background: linear-gradient(to top, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .90) 74%, rgba(20, 18, 15, 0) 100%);
  font-family: var(--font-ui);
}
.AppFooter__Lock { margin: 0; font-family: var(--font-cn); font-size: .75rem; letter-spacing: .1em; color: var(--paper); }
.AppFooter__Links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.AppFooter__Links a { font-size: .75rem; color: var(--chrome-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.AppFooter__Links a:hover { color: var(--paper); border-bottom-color: var(--lime); }
.AppFooter__Credits {
  flex: 1 1 100%; margin: 0;
  font-size: .6875rem; line-height: 1.6; color: var(--chrome-dim);
  /* 逐字留在 DOM 与源码里（读屏与红线校验都取得到），版面上只露两行 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.AppFooter:hover .AppFooter__Credits,
.AppFooter:focus-within .AppFooter__Credits { -webkit-line-clamp: unset; }
@media (max-width: 640px) {
  .AppFooter__Credits { -webkit-line-clamp: 1; }
  .Halls__Inner { padding-bottom: 9rem; }
  /* 窄屏优先保按钮：英文副题让位，否则「展厅」两个字会被挤成两行 */
  .AppHeader { gap: var(--sp-2); }
  .AppHeader__Brand-en { display: none; }
  .AppHeader__Nav { flex-shrink: 0; }
  .UIBtn { padding: .4rem .6rem; font-size: .75rem; }
  .HallScroll__Cards { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* ---- 导览 ----------------------------------------------------------- */
/* 导览进行中：头部与页脚退到背景里，让展品占满屏幕；按钮自己留着（要能中止） */
.is-touring .AppHeader__Logo, .is-touring .AppFooter__Credits { opacity: .35; }
.is-touring .UIBtn[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .UIBtn, .HallCard, .AppFooter__Links a { transition: none; }
}

/* =========================================================================
   四 · 降级：无 WebGL 的静态长卷（#static-root）与无 JS 的 <noscript> 全文
   两条路径共用同一套令牌；此处不引入任何动效。
   ========================================================================= */

/* 默认不出；只有能力探测判定没有 WebGL2 时，main.js 才给 body 加 .no-webgl */
#static-root { display: none; }

/* 无 WebGL 时屏幕上只留跳转链接与静态长卷。
   逐个点名容易漏——灯箱、展厅、说明页、页脚都是固定定位的覆盖层，
   而它们在这条路上根本没被初始化，露出来就是一堆死控件。
   所以反着写：除了 #static-root 和 SkipLink，body 的直接子元素一律收掉。 */
body.no-webgl { overflow: auto; }
body.no-webgl > *:not(#static-root):not(.SkipLink) { display: none; }
body.no-webgl #static-root { display: block; }

.Static { max-width: 74ch; margin: 0 auto; padding: var(--sp-12) var(--sp-6); }
.Static__Title { font: 600 clamp(1.6rem, 4vw, 2.4rem)/1.25 var(--font-cn); margin: 0 0 var(--sp-4); }
/* 另一种语言的同一句：小一号、石色，带 lang 属性（读屏据此换发音） */
.Static__Alt { display: block; font: 400 .78em/1.45 var(--font-latin-display); color: var(--stone-hi); }
.Static__Tagline { margin: 0 0 var(--sp-4); color: var(--paper-2); }
.Static__Fallback { margin: 0 0 var(--sp-8); padding: var(--sp-3) var(--sp-4);
                    border-left: 2px solid var(--lime); color: var(--stone-hi); font-size: .92rem; }
.Static__Index ol { margin: 0 0 var(--sp-12); padding: 0; list-style: none; display: grid;
                    gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr)); }
.Static__Index a { color: var(--paper); text-underline-offset: .25em; }

.StaticScroll { margin: 0 0 var(--sp-12); }
/* tabindex="-1" 只为让锚点跳转后焦点真的落进这一幕；不画焦点环，那不是用户点出来的 */
.StaticScroll:focus { outline: none; }
.StaticScroll__Title { font: 600 1.5rem/1.3 var(--font-cn); margin: 0 0 var(--sp-2);
                       padding-top: var(--sp-6); border-top: 1px solid var(--ink-2); }
.StaticScroll__Source { margin: 0 0 var(--sp-6); font-size: .88rem; color: var(--stone-hi); }

.StaticBeat { margin: 0 0 var(--sp-8); padding-left: var(--sp-6); border-left: 2px solid var(--electric); }
.StaticBeat p { margin: 0 0 var(--sp-3); line-height: 1.85; }
.StaticBeat__Src { display: block; font-style: normal; font-size: .84rem; color: var(--stone-hi); }

/* 空墙不是系统提示。原先这里是一行灰的斜体，读起来正是「此处本该有东西、
   现在没有」——空墙是这一展的落点，排版得按陈述排，不按缺省值排：
   朱线起头、正文与展签同色同字号，出处一行才降下去。 */
.StaticEmpty {
  margin: 0 0 var(--sp-8); padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  border-inline-start: 2px solid var(--cinnabar);
}
.StaticEmpty p { margin: 0 0 var(--sp-3); line-height: 1.85; }
.StaticEmpty p:last-child { margin-bottom: 0; }
.StaticEmpty__Mark { color: var(--cinnabar); font-size: .84rem; letter-spacing: .16em; }
.StaticEmpty__Src { font-size: .84rem; color: var(--stone-hi); }

.StaticWork { margin: 0 0 var(--sp-12); }
/* aspect-ratio 由行内样式按 content.js 的 aspect 逐件给出：懒加载先占位，
   32 张图陆续到达时不会把已经读到的段落一路往下顶。
   max-height 兜住秋胡山（3.15）之外的那批竖幅（最窄 0.318，74ch 宽下高达三屏）。 */
.StaticWork__Img { display: block; width: 100%; height: auto; max-height: 80vh;
                   object-fit: contain; background: var(--ink-2); margin: 0 0 var(--sp-4); }
/* 展签样式全部由上面 .Label__* 那一段负责，此处不复写 */

.Static__Legal { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--ink-2); }
.Static__Legal .link, .Static__Legal a { color: var(--lime); }

/* ---- <noscript> 全文 --------------------------------------------------
   base.css 给 body 上了 overflow:hidden（三维行程要的）。JS 关掉时没有任何脚本
   会去解锁它——noscript 里的两万五千字将一行都滚不动。实测：body 高 4000px 时
   body.scrollTop 写 500 读回 0；换成下面这个自带滚动的固定容器，scrollTop 正常到
   4096−900。**这条规则不是排版，是可读性的前提。** */
.NoScript { position: fixed; inset: 0; overflow-y: auto; z-index: var(--z-panel);
            background: var(--ink); color: var(--paper);
            padding: var(--sp-12) var(--sp-6); line-height: 1.8; }
.NoScript > * { max-width: 74ch; margin-inline: auto; }
.NoScript h1 { font: 600 clamp(1.6rem, 4vw, 2.4rem)/1.25 var(--font-cn); }
.NoScript h2 { font: 600 1.35rem/1.3 var(--font-cn);
               margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--ink-2); }
.NoScript ul { padding-left: var(--sp-6); }
.NoScript li { margin-bottom: var(--sp-6); }
.NoScript a { color: var(--lime); }
.NoScript [lang="en"] { color: var(--stone-hi); }