/* layout.css —— 页头、导航、舞台、栅格、篇章通用骨架 */

body{ position:relative; z-index:0; }
.site-head,.stage,.site-foot{ position:relative; z-index:1; }

/* ============ 页头 ============ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(247,242,231,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head__inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; gap:26px;
}

.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
/* 品牌位：直接用标志（反白稿）。深底是 material.css 定的案面，
   墨色稿会整个沉进去，所以这里只挂 mark-light。 */
/* 标志字面 172×126（比例 1.37），挂的是裁切过的反白稿。
   尺寸同时写在 <img width height> 上 —— CSS 一但没生效（缓存），
   图会按自己 180×136 的原始尺寸撑开整行高度，页眉直接崩掉，所以两道保险都要。 */
.brand__mark{ height:22px; width:auto; display:block; flex:0 0 auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1.25; }
.brand__text b{ font-size:var(--fs-lg); letter-spacing:.14em; }
.brand__text i{
  font-style:normal; font-size:11px; color:var(--tan);
  letter-spacing:.1em; white-space:nowrap;
}

.mainnav{ display:flex; gap:4px; flex:1 1 auto; flex-wrap:wrap; row-gap:0; }
.mainnav a{
  display:flex; align-items:baseline; gap:7px;
  /* 1280 下九个条目加起来正好 710px，而 `.mainnav` 可用宽也是 710 ——
     卡在整边上，亚像素取整后「文」被挤到第二行，头部凭空高出一倍。
     左右各收 1px，留 20px 余量给字体渲染差异。 */
  padding:7px 10px; border-radius:var(--radius);
  font-size:var(--fs-sm); color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.mainnav a em{
  font-style:normal; color:var(--seal); font-size:var(--fs-md);
  letter-spacing:0;
}
.mainnav a:hover{ background:var(--paper-2); color:var(--ink); }
.mainnav a.is-active{
  background:var(--ink); color:var(--paper);
}
.mainnav a.is-active em{ color:var(--paper); opacity:.65; }
/* 「志」部三页（材料 / 今日 / 出处）以单字入导航，避免顶栏过宽 */
.mainnav__mini{ padding:7px 9px !important; opacity:.75; }
.mainnav__mini:hover{ opacity:1; }
.mainnav__mini em{ font-size:var(--fs-md); }

@media (max-width:1180px){
  .mainnav a{ padding:6px 8px; gap:5px; }
  .mainnav__mini{ padding:6px 7px !important; }
}

.head-tools{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.btn{ white-space:nowrap; }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--tan); letter-spacing:.1em; }
.btn--ghost:hover{ background:var(--paper-2); color:var(--ink); }
.btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--solid:hover{ background:#3a4147; color:var(--paper); }

.progress{ width:88px; height:2px; background:var(--line); overflow:hidden; }
.progress i{
  display:block; height:100%; width:0;
  background:var(--seal);
  transition:width .5s var(--ease);
}

/* ============ 舞台 ============ */
/* 原来底部留 88px 是为了让最后一张卡别贴着页脚；
   现在每页末尾有翻页块（.pageturn，自带 34px 下边距），这段留白就成了双份。 */
.stage{ min-height:70vh; padding:0; }

/* ============ 章节头：全出血影像 hero ============
   纪实照片全宽铺底 + 暗部渐变遮罩 + 章号/标题/导语叠加。
   无图时退化为原 .chapter-head 文档式排法。 */
.chapter-hero{
  position:relative; min-height:66vh;
  display:flex; align-items:flex-end;
  margin:0 0 64px;
  overflow:hidden;              /* 背景层比容器高 28%，靠它裁掉多余的部分 */
  background-size:cover; background-position:center 62%;
}
/* 视差层：上下各多出 14%，正好是 js 里 TRAVEL 的上限。
   背景图放这一层，滚动时只改它的 transform。 */
.chapter-hero__bg{
  position:absolute; inset:-14% 0; pointer-events:none;
  background-size:cover; background-position:center 62%;
  will-change:transform;
}
/* 压暗的渐变要盖在背景层之上、文字之下。
   背景层是后加的子元素，默认绘制顺序在 ::before 之后，
   所以这里必须显式排一次层：bg(0) < 渐变(1) < 文字(2)。 */
.chapter-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(16,19,21,.82) 0%, rgba(16,19,21,.38) 42%, rgba(16,19,21,.18) 100%);
}
.chapter-hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:96px 28px 54px;
  color:var(--paper); display:flex; align-items:flex-end; gap:22px;
}
.chapter-hero__no{
  font-family:var(--font-num); font-size:88px; line-height:.9;
  color:rgba(247,242,231,.34); letter-spacing:0; flex:0 0 auto;
}
.chapter-hero__txt{ min-width:0; }
.chapter-hero__txt .kicker{
  margin:0 0 10px; font-size:var(--fs-xs);
  letter-spacing:.34em; color:rgba(247,242,231,.72);
}
.chapter-hero__txt h2{
  margin:0 0 12px; color:#fff; font-size:var(--fs-3xl);
  letter-spacing:.06em; text-shadow:0 2px 26px rgba(0,0,0,.4);
}
.chapter-hero__txt .lede{
  margin:0; max-width:620px; font-size:var(--fs-md);
  line-height:1.8; color:rgba(247,242,231,.88);
}
.chapter-hero__scroll{
  position:absolute; z-index:2; right:34px; bottom:22px;
  writing-mode:vertical-rl; font-size:11px; letter-spacing:.3em;
  color:rgba(247,242,231,.6);
  display:flex; align-items:center; gap:8px;
}
.chapter-hero__scroll::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(to bottom, rgba(247,242,231,.7), transparent);
  animation:hero-drop 2.2s var(--ease) infinite;
}
@keyframes hero-drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:top; }
  100%{ transform:scaleY(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .chapter-hero__scroll::after{ animation:none; }
}

/* 无 hero 图时的章节头（保留原排法） */
.chapter-head{
  max-width:var(--maxw); margin:52px auto 46px; padding:0 28px;
  display:flex; align-items:flex-start; gap:20px;
}
.chapter-head__no{
  font-size:var(--fs-3xl); color:var(--seal-soft);
  line-height:1; letter-spacing:0; font-family:var(--font-num);
  opacity:.5; flex:0 0 auto;
}
.chapter-head__txt h2{ margin-bottom:6px; }
.chapter-head__txt .kicker{
  font-size:var(--fs-xs); letter-spacing:.3em; color:var(--tan); margin:0 0 8px;
}
.chapter-head__txt .lede{
  max-width:640px; color:var(--ink-soft); font-size:var(--fs-md); margin:0;
}

/* 分节 */
.section{ max-width:var(--maxw); margin:0 auto 62px; padding:0 28px; }
.section__head{ margin-bottom:22px; }
.section__head h3{ margin-bottom:6px; }
.section__head .sub{ margin:0; color:var(--ink-soft); font-size:var(--fs-sm); }

/* 栅格 */
.grid{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.col{ flex:1 1 320px; min-width:0; }
.col--narrow{ flex:0 1 340px; }
.col--wide{ flex:2 1 480px; }

/* 键值表：地理志 / 人物档案的主要载体 */
.kv{ margin:0; font-size:13.5px; }
.kv__r{
  display:flex; gap:12px; align-items:baseline;
  padding:6px 0; border-bottom:1px dashed var(--line-soft);
}
.kv__r:last-child{ border-bottom:0; }
.kv dt{
  flex:0 0 88px; color:var(--tan);
  letter-spacing:.06em; font-size:12.5px;
}
.kv dd{ flex:1 1 auto; margin:0; line-height:1.8; }

/* 等高卡片行 */
.stat-row{ display:flex; gap:18px; flex-wrap:wrap; }
.stat-row > *{ flex:1 1 168px; }

/* 交互台：左侧演示画布 + 右侧结果面板 */
.workbench{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.workbench__stage{ flex:1 1 600px; min-width:0; }
.workbench__panel{ flex:0 1 320px; min-width:280px; }

/* 工序长卷 */
.roll{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0;
}
.roll__track{
  display:flex; gap:0; align-items:stretch;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.roll__item{
  flex:0 0 172px; padding:12px 14px;
  border-left:1px dashed var(--line);
}
.roll__item:first-child{ border-left:0; }
.roll__item .no{
  font-family:var(--font-num); font-size:var(--fs-lg); color:var(--seal-soft);
}
.roll__item .nm{ font-size:var(--fs-md); letter-spacing:.06em; }
.roll__item .st{ font-size:11px; color:var(--tan); letter-spacing:.14em; }
.roll__item.is-deep .nm{ color:var(--seal); }
.roll__item.is-deep::after{
  content:"深"; display:inline-block; margin-left:6px;
  font-size:11px; color:var(--seal);
  border:1px solid var(--seal); border-radius:2px; padding:0 4px;
  vertical-align:2px;
}

/* 纤维对比三联 */
.fiber-row{ display:flex; gap:16px; flex-wrap:wrap; }
.fiber-row > *{ flex:1 1 240px; }

/* 页脚 */
.site-foot{ border-top:1px solid var(--line); padding:26px 0 40px; }
.site-foot__inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.foot-line{ font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:6px; }
.foot-meta{ font-size:11px; color:var(--ink-faint); letter-spacing:.06em; }
.foot-meta .dot{ margin:0 8px; opacity:.6; }

/* ============ 响应式 ============ */
@media (max-width:900px){
  /* 窄屏导航试过三种折法都不成立：
     · flex 折行 —— 三行、行贴行，末行甩下「材」「今」两个单字，而且每行各自居中，
       三行起点左右不一；
     · 四列栅格 —— 最长一条「贰 匠心·百炼」要 110px，一格只有 86px，字压到邻居身上；
     · 三列栅格 —— 8 项排成 3/3/2，末行两格卡在左边，重心偏。
     八项本来就该是一行。窄屏改横向滚动：条目 nowrap，允许手指滑。
     滚动条藏掉，右端被截断本身就是"还能往右滑"的提示。 */
  .mainnav{ order:3; width:100%;
    display:flex; flex-wrap:nowrap; justify-content:flex-start;
    gap:2px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    border-top:1px solid var(--line-soft); padding:8px 0 2px; }
  .mainnav::-webkit-scrollbar{ display:none; }
  .mainnav a{ white-space:nowrap; flex:0 0 auto; padding:6px 9px; }
  .site-head__inner{ flex-wrap:wrap; gap:14px; }
  .head-tools{ margin-left:auto; }
}
@media (max-width:720px){
  .stage{ padding:0; }
  .chapter-hero{ min-height:52vh; margin-bottom:44px; }
  .chapter-hero__inner{ padding:72px 18px 40px; gap:14px; }
  .chapter-hero__no{ font-size:54px; }
  .chapter-hero__txt h2{ font-size:var(--fs-2xl); }
  .chapter-hero__scroll{ display:none; }
  .chapter-head{ padding:0 18px; gap:14px; }
  .chapter-head__no{ font-size:var(--fs-2xl); }
  .section{ padding:0 18px; margin-bottom:44px; }
  .grid,.workbench{ gap:18px; }
  .progress{ width:60px; }
  /* 捞纸 HUD 六格在窄屏折成三列，避免数值挤成一团 */
  .hud{ grid-template-columns:repeat(3,1fr) !important; }
  .slider-row{ flex-wrap:wrap; }
  .slider-row__v{ min-width:64px; }
}

/* ---------- 打浆度拖动滑块 ---------- */
.slider-row{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.slider-row__k{ font-size:var(--fs-sm); color:var(--tan); white-space:nowrap; }
.slider-row__v{ font-size:var(--fs-lg); min-width:86px; text-align:right; white-space:nowrap; }

.slider{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:160px; height:26px; background:transparent; outline:none; cursor:grab;
}
.slider:active{ cursor:grabbing; }
.slider::-webkit-slider-runnable-track{
  height:6px; background:var(--paper-3); border:1px solid var(--line); border-radius:3px;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8px; border-radius:50%;
  background:var(--ink); border:2px solid var(--paper);
  box-shadow:0 1px 4px rgba(36,42,46,.28);
}
.slider::-moz-range-track{
  height:6px; background:var(--paper-3); border:1px solid var(--line); border-radius:3px;
}
.slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:2px solid var(--paper);
}
.slider:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(156,74,60,.45); }

/* ---------- 文本输入框（证书署名） ---------- */
.field{
  flex:1; min-width:150px; padding:7px 10px;
  font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  outline:none;
}
.field:focus{ border-color:var(--tan); }
.field::placeholder{ color:#b3b0a4; }

/* ---------- 数字宣纸证书 ---------- */
#cert-stage{
  background:var(--paper-2); border:1px solid var(--line);
  padding:14px; text-align:center; max-height:560px; overflow:auto;
}

/* ---------- 「示意 / 定性」角标 ----------
   项目数据纪律：凡非实测、非引文直接给出的数值，一律挂此角标并在图注说明 */
.tag-schematic{
  display:inline-block; margin-left:6px; padding:1px 6px;
  font-size:11px; letter-spacing:.06em; color:var(--seal);
  border:1px solid var(--seal-soft); border-radius:2px; vertical-align:1px;
}

/* ---------- ㉓ 首屏封面：一幅照片压在一张案面上 ----------
   原来首页第一屏是"序号 + 小字 + 标题 + 一段 lede"，全是字，没有视觉母题。
   参考 Siena Film Foundation 的做法：封面先给一幅图，字退到旁边当题解。
   本案不铺满屏（那会破坏"案面"这个空间）—— 照片做成一张冲印相纸：
   宽白边、微微歪着、下面留出写图注的地方，压在案面上。
   左边四个大字是 h1（原来首屏标题是 h2，语义上不对）。 */
.cover{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4.5vw,68px); align-items:center;
  padding:60px 0 46px;
}
.cover__kicker{
  margin:0 0 20px; font-size:12.5px; letter-spacing:.3em;
  color:var(--on-desk-soft); display:flex; align-items:center; gap:12px;
}
.cover__kicker em{
  font-style:normal; font-family:var(--font-serif);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:12px; color:var(--paper);
  background:var(--seal); border-radius:1px; letter-spacing:0;
}
.cover__title{
  margin:0 0 26px;
  font-size:clamp(42px,6.2vw,76px); line-height:1.08; letter-spacing:.05em;
  color:var(--on-desk);
}
.cover__lede{
  margin:0; max-width:44ch; font-size:15px; line-height:2.05;
  /* --on-desk-soft 是给"案面注解"用的中灰；首屏正文字压在深褐上显得发闷，
     提到主字色再压一点透明度，亮度够、又不抢标题 */
  color:var(--on-desk); opacity:.82;
  text-wrap:pretty;
}
.cover__meta{
  margin:30px 0 0; padding-top:16px;
  border-top:1px solid rgba(236,228,212,.16);
  font-size:11.5px; letter-spacing:.12em;
  color:var(--on-desk); opacity:.56;
}
/* 相纸：白边比普通纸宽一点，下缘多留一条写图注 */
.cover__plate{
  position:relative; margin:0;
  padding:13px 13px 46px;
  background:var(--sheet);
  rotate:.7deg;
  box-shadow:0 20px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.cover__plate img{
  display:block; width:100%; height:auto;
  /* 冲印照片的黑不是纯黑，微微收一点饱和才对得上案面的暖调 */
  filter:saturate(.93) contrast(1.03);
}
.cover__plate figcaption{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-size:11px; letter-spacing:.2em; color:var(--ink-faint);
}
@media (max-width:900px){
  .cover{ grid-template-columns:1fr; gap:26px; padding:36px 0 30px; }
  .cover__title{ font-size:clamp(38px,9vw,52px); margin-bottom:20px; }
  .cover__meta{ margin-top:22px; }
  .cover__plate{ rotate:.45deg; padding:10px 10px 38px; }
  .cover__plate figcaption{ bottom:11px; font-size:10.5px; }
}

/* 英文导航：条目名比中文长一倍（Prologue / I Materials / II Craft / III Legacy），
   1280 下会折成两行、顶栏凭空高出一倍。整条英文导航压一档字号与内边距。
   （i18n.apply 会把 documentElement.lang 设成 'en'，直接用它做前缀。） */
.mainnav a{ white-space:nowrap; }
@media (min-width:901px){
  html[lang="en"] .mainnav{ gap:3px; }
  html[lang="en"] .mainnav a{ font-size:12px; padding:7px 6px; letter-spacing:.01em; }
  html[lang="en"] .mainnav__mini{ padding:7px 6px !important; }
}

/* 中文靠单字入导航（材/今/文），英文没有"单字"这回事 ——
   三个 mini 项在英文版里补了 span（中文模式下隐藏）。
   同时英文版把 em 的中文序号藏掉：Prologue 前面挂一个「序」，
   对英文读者是噪音，也是顶栏折行的主因。 */
.mainnav__mini span{ display:none; }
@media (min-width:901px){
  html[lang="en"] .mainnav a em{ display:none; }
  html[lang="en"] .mainnav__mini span{ display:inline; }
}

/* ---------- hero 的字逐行落定 ----------
   纸上抽走时，新章的标题不该"啪"地整块出现 —— 那是切页，不是换章。
   章号 → 眉标 → 标题 → 导语 依次落定，各差 80ms，
   正好接在换章纸抽走的后半程（300~680ms）里，观者看到的是"纸掀开、字也才落定"。
   reduced-motion 下整段不生效（用 no-preference 包住，而不是靠 animation:none 覆盖）。 */
@media (prefers-reduced-motion: no-preference){
  .chapter-hero__no,
  .chapter-hero__txt .kicker,
  .chapter-hero__txt h2,
  .chapter-hero__txt .lede{
    animation:heroRise .52s cubic-bezier(.22,.61,.36,1) both;
  }
  .chapter-hero__no{ animation-delay:0s; }
  .chapter-hero__txt .kicker{ animation-delay:.05s; }
  .chapter-hero__txt h2{ animation-delay:.10s; }
  .chapter-hero__txt .lede{ animation-delay:.15s; }
}
@keyframes heroRise{
  from{ opacity:0; transform:translate3d(0,18px,0); }
  to{ opacity:1; transform:none; }
}