/* §5 The Hedron（js/pages/hedron.js）：三屏上下接成一长条连续滚动（js/snap-screens.js），结构同 §4 The Hiss
   层次：3D 画布（各屏背景 + 第 1 屏的视频字）→ 网页层 #hedron z 2（暂时没有内容）→ 导航 100。#hedron 抵消浏览器缩放 */
#hedron {
  position: fixed; inset: 0; z-index: 2; display: none; opacity: 0; pointer-events: none; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  zoom: var(--unzoom, 1);
  --sh: 100vh;
}
body.page-hedron #hedron, body.pre-hedron #hedron { display: block; }
#hedron .track { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
#hedron .hedron-screen { position: absolute; left: 0; width: 100%; height: var(--sh); top: calc(var(--sh) * var(--k)); }
#hedron .snap-indicator {
  position: absolute; left: calc(var(--sh) * .04); bottom: calc(var(--sh) * .02);
  font: 400 calc(var(--sh) * .011)/1 var(--font-label); letter-spacing: .14em; color: #eee7dd;
}
/* 第 1 屏的标题（2026-10-23）：白色 THE HEDRON 画在一张 2D 画布上（hedron.js 的 drawHero，排法同 Hiss 第 1 屏），盖在 3D 场景上 */
#hedron .hedron-hero { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 第 2、3 屏的档案文字（2026-10-23 V0，hedron.js 的 renderDocs / layoutDocs）：左右 = THE HEDRON 的字墨（--hd-l / --hd-w），上下由脚本居中；
   排法沿用 Hiss 第 2 屏（档案头细线 → Avant Garde 大标题 → CONFIDENTIAL → 正文），亮天空上用深褐字 + 负片标题的深蓝点缀；--hd-fit = 放不下时的缩小比例 */
#hedron .hd-doc {
  position: absolute; left: var(--hd-l); width: var(--hd-w); top: 0;
  color: var(--hd-ink); --hd-fit: 1;
  font: 400 calc(var(--hd-body) * var(--hd-fit))/var(--hd-line) var(--font-body);
}
#hedron.hd-off .hd-doc, #hedron.hd-off .hd-foot { display: none; }
#hedron .hd-meta, #hedron .hd-conf, #hedron .hd-label {
  font: 400 var(--hd-label)/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
#hedron .hd-meta { display: flex; justify-content: space-between; gap: 2em; padding-bottom: .8em; border-bottom: 1px solid currentColor; opacity: .75; }
#hedron .hd-head h2 {
  margin: .32em 0 0; font: 700 calc(var(--hd-title) * var(--hd-fit))/1 var(--font-display); letter-spacing: -.015em; text-transform: uppercase;
}
#hedron .hd-conf { color: var(--hd-accent); margin-top: .9em; }
#hedron .hd-doc p { margin: 0 0 var(--hd-para); }
#hedron .hd-doc p:last-child { margin-bottom: 0; }
#hedron .hd-label { margin-bottom: 1em; opacity: .8; }
#hedron .hd-no { color: var(--hd-accent); }
#hedron .hd-refer, #hedron .hd-note { opacity: .65; }
#hedron .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
/* 第 2 屏：左边一句大字引语，右边 SUMMARY 正文（靠右） */
#hedron .hd-s2-body { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(var(--hd-head-gap) * var(--hd-fit)); }
#hedron .hd-quote {
  margin: 0; flex: 0 0 var(--hd-quote-w);
  font: var(--hd-quote-weight) calc(var(--hd-quote) * var(--hd-fit))/1.12 var(--font-display); letter-spacing: -.01em;
}
#hedron .hd-text { flex: 0 0 var(--hd-body-w); }
#hedron .hd-s2-body.qlast { align-items: flex-end; }
#hedron .hd-quote { text-wrap: balance; }
/* 第 2 屏三栏（2026-10-24，s2Layout 'split'）：档案头一整行在顶上；下面 正文 | 空栏（实体在 3D 里对准它）| 引语，正文和引语默认和实体中心竖向对齐。
   整块撑满上下边距（min-height 由脚本设），三栏占档案头下面剩下的高度 */
#hedron .hd-s2.split { display: flex; flex-direction: column; box-sizing: border-box; }
#hedron .hd-s2-body.split { flex: 1 1 auto; align-items: var(--hd-s2-align, center); }
#hedron .hd-s2-body.split .hd-slot { flex: 1 1 0; align-self: stretch; min-width: 0; }
#hedron .hd-s2-body.split .hd-quote { flex: 0 0 var(--hd-squote-w); }
/* 第 2 屏都排在左边（2026-10-24，s2Layout 'left'，默认）：整块只有左栏宽（脚本设 width），档案头 → 正文 → 引语竖着叠，右边留给 3D 里的实体 */
#hedron .hd-s2-body.left { display: block; }
#hedron .hd-s2-body.left .hd-text { width: var(--hd-left-body-w); }
#hedron .hd-s2-body.left .hd-quote { margin-top: calc(var(--hd-left-gap) * var(--hd-fit)); }
/* 第 2 屏：标题引语 + 档案卡（2026-10-24，s2Layout 'file'，默认）——样式照 Items 左栏的综述（css/items.css 的 .overview.boxed .ov-doc.file）：
   大字引语（Avant Garde）+ 出处（Interstate 大写）→ 白底黑框卡片：署名表（Compiled By / By Order Of，下面一条线）→ 居中粗体抬头 → 下划线 SUMMARY: → 正文 */
#hedron .hd-tq-text {
  margin: 0; font: var(--hd-tq-weight, 700) calc(var(--hd-tq) * var(--hd-fit))/1.08 var(--hd-tq-font, var(--font-display)); letter-spacing: -.012em; text-wrap: balance;
}
/* 2026-10-24：分两段——Now 以前 Basic Commercial 400，Now 以后 Avant Garde 700（负片词 .hd-tq-neg 在网页层只占位，着色器里画） */
#hedron .hd-tq-a { font-family: var(--font-body); font-weight: 400; }
#hedron .hd-tq-b { font-family: var(--font-display); font-weight: 700; }
#hedron .hd-tq-cite {
  margin-top: .9em; font: 500 var(--hd-label)/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; opacity: .65;
}
#hedron .hd-file {
  width: var(--hd-card-w); box-sizing: border-box; margin-top: calc(var(--hd-card-gap) * var(--hd-fit));
  background: var(--hd-card-bg); color: var(--hd-card-ink); border: var(--hd-card-border) solid var(--hd-card-ink);
  padding: calc(var(--hd-card-pad) * var(--hd-fit));
}
#hedron .hd-file p { line-height: 1.38; margin: 0 0 .75em; }
#hedron .hd-file p:last-child { margin-bottom: 0; }
#hedron .hd-file-head {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.2em; row-gap: .25em;
  font: 500 calc(var(--hd-label) * .85 * var(--hd-fit))/1.35 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 1.1em; margin-bottom: 1.4em; border-bottom: 1px solid currentColor;
}
#hedron .hd-file-head .k { opacity: .55; }
#hedron .hd-file-kicker { font-weight: 700; font-size: 1.02em; text-align: center; line-height: 1.3; margin: 0 0 .5em; }
#hedron .hd-file-lead { text-decoration: underline; text-underline-offset: .15em; margin: .8em 0 .75em; }   /* 各行差不多长：不让「us?」一个词落在最后一行 */   /* 引语在右（Observations 的最后一段）：和正文底边对齐，读完正文正好落在它上面 */
/* 2026-10-25：两张档案卡叠在同一格（一样高），后面那张错位 + 转一点露出一个角，点它换到上面（JS 里做抽出再盖上的动画） */
#hedron .hd-stack {
  display: grid; width: var(--hd-card-w); margin-top: calc(var(--hd-card-gap) * var(--hd-fit));
  margin-bottom: calc(var(--hd-stack-dy) * var(--hd-fit));   /* 错开露出的那截也算进整块高度（缩放 / 居中时不被裁） */
}
#hedron .hd-stack > .hd-file {
  grid-area: 1 / 1; width: auto; margin: 0; position: relative; z-index: 2; pointer-events: auto;
  box-shadow: var(--hd-stack-shadow); transition: transform .25s, background-color .25s;
}
#hedron .hd-stack > .hd-file.back {
  z-index: 1; cursor: pointer; background: var(--hd-stack-back-bg); box-shadow: none;
  transform: translate(calc(var(--hd-stack-dx) * var(--hd-fit)), calc(var(--hd-stack-dy) * var(--hd-fit))) rotate(var(--hd-stack-rot));
}
#hedron .hd-stack > .hd-file.back:hover, #hedron .hd-stack > .hd-file.back:focus-visible {
  outline: none;
  transform: translate(calc((var(--hd-stack-dx) + var(--hd-stack-hover)) * var(--hd-fit)), calc((var(--hd-stack-dy) + var(--hd-stack-hover)) * var(--hd-fit))) rotate(var(--hd-stack-rot));
}
#hedron .hd-file-sign { margin-top: 1.4em; display: flex; flex-direction: column; line-height: 1.35; }
#hedron .hd-file-sign .n { font-weight: 700; }
/* 第 3 屏：两份报告 + Marshall 的便条（白卡片，同导航卡片） */
#hedron .hd-cols { display: flex; align-items: flex-start; gap: var(--hd-col-gap); margin-top: calc(var(--hd-head-gap) * var(--hd-fit)); }
#hedron .hd-rep { flex: 1 1 0; min-width: 0; }
#hedron .hd-rep h3 {
  margin: 0 0 .7em; padding-bottom: .55em; border-bottom: 1px solid currentColor;
  font: 700 calc(var(--hd-re) * var(--hd-fit))/1.1 var(--font-display); letter-spacing: -.005em;
}
#hedron .hd-memo {
  flex: 0 0 var(--hd-memo-w); box-sizing: border-box; padding: var(--hd-memo-pad);
  background: var(--hd-memo-bg); color: var(--hd-memo-ink);
}
#hedron.hd-no-memo .hd-memo { display: none; }
#hedron .hd-memo-head { font: 700 calc(var(--hd-re) * .7 * var(--hd-fit))/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; margin-bottom: .9em; }
#hedron .hd-sign { text-align: right; }
#hedron .hd-coda {
  margin: calc(var(--hd-head-gap) * var(--hd-fit)) 0 0 !important; max-width: 60%;
  font: 300 calc(var(--hd-quote) * .6 * var(--hd-fit))/1.25 var(--font-display);
}
#hedron.hd-no-coda .hd-coda { display: none; }
#hedron.hd-no-s3body .hd-s3 .hd-cols, #hedron.hd-no-s3body .hd-s3 .hd-coda { display: none; }   /* 2026-10-24 用户：第 3 屏正文先删（s3Body） */
#hedron.hd-no-s3head .hd-s3 .hd-head { display: none; }
/* 第 3 屏最底下：Made by / Disclaimer（同 Hiss），一行两段靠左右两端 */
#hedron .hd-foot {
  position: absolute; left: var(--hd-l); width: var(--hd-w); bottom: var(--hd-foot-bottom);
  display: flex; justify-content: space-between; gap: 2em; color: var(--hd-ink); opacity: var(--hd-foot-op);
  font: 400 var(--hd-foot)/1.4 var(--font-body);
}
#hedron.hd-no-foot .hd-foot { display: none; }
/* 负片条（2026-10-23，footStrip）：条本身在后处理里画（invPass 的 uFoot），网页层只放字——全宽、footH 高、贴底，字上下居中，左右各留 heroMarginL（同 Hiss） */
#hedron.hd-foot-strip .hd-foot {
  left: var(--hd-foot-ml); width: auto; right: var(--hd-foot-ml); bottom: 0; height: var(--hd-foot-h);
  align-items: center; color: var(--hd-foot-ink); opacity: 1;
}
#hedron .hd-foot em { font-style: italic; }
#hedron .hd-foot p { margin: 0; white-space: nowrap; }
#hedron .hd-foot p:last-child { text-align: right; }
#hedron .hd-foot a { color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; border-bottom: 1px solid transparent; }
#hedron .hd-foot a:hover { border-bottom-color: currentColor; }

/* 第 3 屏：Hedron 敌人图鉴（2026-10-24，hedron.js 的 renderBestiary / layoutBestiary；排法同 Hiss 第 3 屏 .hiss-be）：
   左右 = THE HEDRON 的字墨，上 --be-top，下 = 底部负片条往上；档案头一行 + 大标题 → 左阅读栏 + 右标本格（按类别分行，Hedron = 阵列） */
#hedron .hd-be {
  position: absolute; left: var(--be-l); width: var(--be-w); top: var(--be-top); bottom: var(--be-bottom);
  display: flex; flex-direction: column; color: var(--hd-ink);
}
#hedron .hd-be-head h2 { margin: .32em 0 0; font: 700 var(--hd-title)/1 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; }
#hedron .hd-be-body { flex: 1; min-height: 0; display: flex; gap: var(--be-gap); margin-top: var(--be-gap); }
#hedron .hd-be-panel { flex: 0 0 var(--be-panel-w); min-width: 0; overflow: hidden; }
#hedron .hd-be-read { font: 400 calc(var(--be-body) * var(--be-fit, 1))/1.45 var(--font-body); }
#hedron .hd-be-read.in { animation: hd-be-in var(--be-fade, .25s) ease-out; }
@keyframes hd-be-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
#hedron .hd-be .be-no, #hedron .hd-be .be-kicker, #hedron .hd-be-cap, #hedron .hd-be .be-h, #hedron .hd-be .be-sign {
  font: 400 calc(var(--be-label) * var(--be-fit, 1))/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
#hedron .hd-be .be-no { display: flex; justify-content: space-between; color: var(--hd-accent); }
#hedron .hd-be-read h3 { margin: .3em 0 .25em; font: 700 calc(var(--be-name) * var(--be-fit, 1))/1 var(--font-display); letter-spacing: -.01em; }
#hedron .hd-be .be-kicker { opacity: .65; padding-bottom: 1em; margin-bottom: 1.1em; border-bottom: 1px solid currentColor; }
#hedron .hd-be .be-text p { margin: 0 0 .45em; }
#hedron .hd-be .be-text p.bullet { padding-left: 1em; text-indent: -1em; }
#hedron .hd-be .be-text p.bullet::before { content: '– '; }
#hedron .hd-be .be-text p.sub { margin-left: 1.4em; }
#hedron .hd-be .be-text .gap { margin-top: 1em; }
#hedron .hd-be .be-h { color: var(--hd-accent); margin: 1em 0 .5em; text-decoration: underline; text-underline-offset: .2em; }   /* STATE 小标题：原档案是下划线（源文件 <u>…</u>） */
#hedron .hd-be .be-sign { margin-top: 1.4em; opacity: .7; }
#hedron .hd-be .redacted { display: inline-block; width: 6.5em; height: .95em; vertical-align: -0.14em; background: currentColor; }
#hedron .hd-be-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--be-cols), 1fr); grid-auto-rows: 1fr; gap: var(--be-cell-gap); }
#hedron .hd-be-cell {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; padding-top: .5em;
  border-top: 1px solid currentColor; color: inherit; opacity: var(--be-dim, .35); transition: opacity var(--be-fade, .25s), border-color var(--be-fade, .25s);
  pointer-events: auto; cursor: default; will-change: opacity;
}
#hedron .hd-be-cell.row { grid-column-start: 1; }   /* 每类另起一行 */
#hedron .hd-be-cell.on, #hedron .hd-be-cell:focus-visible { opacity: 1; border-top-color: var(--hd-accent); }
#hedron .hd-be-fig { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--be-fig-pad, 0); background: var(--be-fig-bg, transparent); }   /* 2026-10-25：浅色半透明底，插图易读 */
#hedron .hd-be-fig img { width: 100%; height: 100%; object-fit: contain; }
#hedron .hd-be-cap { display: flex; justify-content: space-between; gap: .6em; margin-top: .5em; font-size: var(--be-cap); }
#hedron .hd-be-cap span:first-child { color: var(--hd-accent); }

/* 手机模式（html.mob，2026-10-29 用户：同 Hiss——去掉第 1、2 屏，直接左右滑看第 3 屏的敌人图鉴；不要文字；底部 disclaimer 删掉、底栏的负片条留着）。
   js/snap-screens.js 在手机模式下直接停在最后一屏、不接受滚动；hedron.js 的 mobStep 换 beSel。一次只显示选中的那一格，放大到整块。
   第 3 屏的档案（.hd-s3）、图鉴大标题（display none → 着色器里的负片词 drawWord3 量到 0 宽也就不画）、阅读栏、格子下的编号名字、底栏的字都不显示 */
html.mob #hedron .hd-s3, html.mob #hedron .hd-foot { display: none; }
html.mob #hedron .hd-be { left: 8vw; width: 84vw; top: 9vh; }
html.mob #hedron .hd-be-head, html.mob #hedron .hd-be-cap { display: none; }
html.mob #hedron .hd-be-body { position: relative; margin-top: 0; }
html.mob #hedron .hd-be-grid { display: block; position: relative; }
html.mob #hedron .hd-be-cell { display: none; pointer-events: none !important; }   /* 不挡 js/mob.js 的滑动 / 轻点（按钮上的触摸 mob.js 不管） */
html.mob #hedron .hd-be-cell.on { display: flex; position: absolute; inset: 0; opacity: 1; border-top-color: transparent; }
/* 敌人名字显示在顶部（同日用户：敌人条目的名字还是要显示在顶部）：阅读栏重新显示、只留名字（h3），在图鉴最上面居中；插图排在名字下面、占满剩下的高度 */
html.mob #hedron .hd-be-body { flex-direction: column; gap: 2.5vh; }
html.mob #hedron .hd-be-panel { display: block; flex: 0 0 auto; width: auto; overflow: visible; }
html.mob #hedron .hd-be-read > :not(h3) { display: none; }
html.mob #hedron .hd-be-read h3 { margin: 0; font-size: var(--mob-name, 8vw); line-height: 1.05; text-align: center; }
html.mob #hedron .hd-be-grid { flex: 1 1 auto; min-height: 0; }
/* 第 2 屏的内容手机上全部删掉（同日用户：严格来说手机版删掉了所有第二屏内容）：整屏 display none（屏都是按 --k 绝对定位的，不影响第 1、3 屏的位置；
   遮罩 / 栅格化量到 display none 的元素会跳过或得到 0 框）。手机上本来也滑不到第 2 屏（标题 ↔ 图鉴直接切） */
html.mob #hedron .hedron-screen.s2 { display: none; }
/* 同日用户（防止剧透）：Hedron 手机版标题和图鉴都去掉，取而代之的是纯粹的第二屏实体——hedron.js 进页面直接停在第 2 屏（MOB_SCREEN）；
   第 2 屏的字上面已经整屏藏了（实体画在 WebGL 里，不受影响），第 1、3 屏的网页层也不显示（上面的图鉴手机样式留着，恢复时用） */
html.mob #hedron .hedron-screen.s1, html.mob #hedron .hedron-screen.s3 { display: none; }