/* ============================================================
   采士官网 · 设计系统 v3（合并层）
   ────────────────────────────────────────────────────────────
   本文件把此前三层补丁合并为一套内聚的设计系统：

     · align-scheme1.css  格局对齐（标题字号/字距/留白）
     · lighten.css        浅底化（.deep → .light 的过渡）
     · design-v2.css      色板与尺度（纸阶/墨阶/线阶/朱砂 + 8px 基线）

   合并的理由不是"文件少了好看"，而是实测数据：
   此前 92 个选择器被多层重复定义，改任一处都可能触发
   跨层覆盖，排错成本极高。设计系统应当是单一来源。

   【加载方式】
   site.css → design-v3.css（两层，共 2 个文件）
   site.css 保持原样不改（其 .deep 机制被 109 处引用，不可动）；
   design-v3.css 承担全部"最终裁决"，按层叠顺序天然生效。

   【与 v2 的差异】
   1. 移除对 align/lighten 两层的依赖 —— 规则原地合并，不再层层覆盖
   2. 补齐 v2 未覆盖的选择器（.nav-menu / .hero / .claim / .concl 等）
   3. 消除 v2 中「靠 !important 打架」的地方，改为层叠顺序取胜
   4. 加入系统级细节：状态栏、选中文本、滚动条、表单、焦点环
   ============================================================ */

/* ============================================================
   一、色板（单一色源）
   ────────────────────────────────────────────────────────────
   全站只允许出现这里定义的颜色。任何组件不得裸写色值。
   东方宣纸朱砂的色相不变，只在明度层次上做文章。
   ============================================================ */

:root {
  /* 纸阶 — 浅底四层：底 / 面 / 卡 / 亮 */
  --c-paper:      #ECE2CE;   /* 页面底 */
  --c-paper-lift: #F3ECDB;   /* 抬升面：卡片、提示框 */
  --c-paper-deep: #E4D7BD;   /* 下沉面：表头、页脚 */
  --c-paper-edge: #FBF6E9;   /* 最亮：hover、焦点环底 */

  /* 墨阶 — 四层文字 */
  --c-ink:        #1C1813;   /* 主文字、标题 */
  --c-ink-soft:   #473F32;   /* 次级正文 */
  --c-ink-mute:   #6B6051;   /* 弱化：标签、辅助说明 */
  --c-ink-faint:  #8D8068;   /* 极弱：装饰编号、占位符 */

  /* 线阶 — 三层描边 */
  --c-line:       #C9B998;
  --c-line-soft:  #D8CBAE;
  --c-line-faint: #E0D5BC;

  /* 朱砂 — 唯一强调色，三档 */
  --c-vermilion:      #A8302A;
  --c-vermilion-deep: #7E211C;
  --c-vermilion-lift: #C0402E;   /* 深底上用 */

  /* 黄铜 — 点缀，仅深底或极小装饰 */
  --c-brass:      #8A6A3B;
  --c-brass-ink:  #6F5430;       /* 浅底作字，对比度 ≥ 4.8 */
  --c-brass-lift: #E8C98C;       /* 深底作字 */

  /* 深底 — 仅 index / shanlu / dossier / yard 四处使用 */
  --c-deep-bg:      #171209;
  --c-deep-bg-lift: #221A10;
  --c-deep-bg-card: #2E2417;
  --c-deep-ink:      #E8C98C;
  --c-deep-ink-soft: #D9CBAE;
  --c-deep-ink-mute: #9D8F74;
  --c-deep-line:     rgba(217, 203, 174, .22);

  /* 尺度 — 8px 基线网格 */
  --sp-1:  8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px;

  /* 字阶 */
  --fs-display: clamp(34px, 5.4vw, 72px);
  --fs-h2:      clamp(23px, 3vw, 40px);
  --fs-h3:      clamp(18px, 2vw, 25px);
  --fs-body:    16px;
  --fs-sm:      14.5px;
  --fs-xs:      13px;
  --fs-kicker:  11.5px;

  /* 行高 — 标题收紧、正文放宽 */
  --lh-display: 1.14;
  --lh-heading: 1.26;
  --lh-body:    1.92;
  --lh-tight:   1.55;

  /* 动效 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  .28s;
}

/* ============================================================
   二、基础排版
   ============================================================ */

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: .012em;
  color: var(--c-ink);
}

.hero h1,
header.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: .015em;
}

.wrap h2,
section h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: .04em;
  margin-bottom: var(--sp-3);
}

.wrap h3,
section h3,
.card h3,
.card h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: .05em;
  color: var(--c-ink);
}

.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.86;
  color: var(--c-ink-soft);
  max-width: 62ch;
}

.wrap h2 + .lede,
section h2 + .lede {
  margin-top: calc(var(--sp-1) * -1);
  margin-bottom: var(--sp-4);
}

.eyebrow {
  font-family: var(--serif);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: .38em;
  line-height: 1;
  color: var(--c-vermilion);
  margin-bottom: var(--sp-2);
}

/* ============================================================
   三、留白节奏
   ============================================================ */

section.reveal {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

section.reveal:first-of-type { padding-top: var(--sp-6); }
section.tight { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

.grid2 { gap: var(--sp-3); }

/* ============================================================
   四、导航 — 底色接入变量，与页面同色
   ────────────────────────────────────────────────────────────
   原为硬编码 rgba(247,243,234,.96)，与 --paper #ECE2CE 差 4 个色阶，
   滚动时导航比内容亮一截，像贴了条胶带。
   ============================================================ */

.nav {
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, #fff 8%);
  backdrop-filter: saturate(1.15) blur(12px);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  border-bottom: 1px solid var(--c-line-soft);
  box-shadow: 0 1px 0 rgba(28, 24, 19, .02);
}

.nav.on-deep {
  background: var(--c-deep-bg);
  background: color-mix(in srgb, var(--c-deep-bg) 88%, #000 12%);
  border-bottom-color: var(--c-deep-line);
  box-shadow: none;
}

.nav.on-deep .nav-links a { color: var(--c-deep-ink-soft); }
.nav.on-deep .nav-cta {
  background: var(--c-vermilion);
  color: var(--c-paper-lift);
}

.nav-links a {
  position: relative;
  padding-bottom: 2px;
  font-family: var(--serif);
  font-size: 14.5px;
  letter-spacing: .08em;
  color: var(--c-ink-soft);
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--c-vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* 下拉菜单：浅底纸上微微抬起 */
.nav-menu {
  background: var(--c-paper-lift);
  border: 1px solid var(--c-line-soft);
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(28, 24, 19, .08);
}

.nav-menu-grid a { color: var(--c-ink-soft); }
.nav-menu-grid a:hover { color: var(--c-vermilion); }
.nav-menu-hd { border-bottom: 1px solid var(--c-line-faint); }
.nav-menu-ft { color: var(--c-ink-faint); border-top: 1px solid var(--c-line-faint); }

.nav-cta {
  font-family: var(--serif);
  letter-spacing: .1em;
  background: var(--c-ink);
  color: var(--c-paper-lift);
  border-radius: 2px;
  transition: background var(--dur), transform var(--dur);
}

.nav-cta:hover { background: var(--c-vermilion-deep); transform: translateY(-1px); }

/* ============================================================
   五、卡片 — 从"框"改为"面"
   ────────────────────────────────────────────────────────────
   原有边框 + 白底像贴上去的方块。
   改为抬升面，靠底色层次划分，去掉线条。
   ============================================================ */

.card {
  background: var(--c-paper-lift);
  border: 1px solid var(--c-line-soft);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(28, 24, 19, .035);
  padding: var(--sp-4);
  transition: border-color var(--dur), box-shadow var(--dur);
}

.card:hover {
  border-color: var(--c-line);
  box-shadow: 0 2px 8px rgba(28, 24, 19, .05);
}

.card p { color: var(--c-ink-soft); line-height: 1.85; }
.card .lede, .card .chart-cap { color: var(--c-ink-mute); }

/* ============================================================
   六、表格 — 采士站的主要信息载体，重新校准密度
   ============================================================ */

.tbl {
  font-family: var(--serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  border-collapse: collapse;
}

.tbl thead th {
  background: var(--c-paper-deep);
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  padding: var(--sp-2);
  border: none;
  border-bottom: 1px solid var(--c-line);
}

.tbl tbody td,
.tbl tbody th {
  padding: var(--sp-2);
  border: none;
  border-bottom: 1px solid var(--c-line-faint);
  color: var(--c-ink-soft);
  vertical-align: top;
}

.tbl tbody tr:nth-child(even) { background: rgba(255, 252, 244, .38); }
.tbl tbody tr:hover { background: rgba(255, 252, 244, .7); }

.tbl caption {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-ink-mute);
  padding-bottom: var(--sp-1);
  text-align: left;
}

/* ============================================================
   七、提示框 — 语义色只有两色
   ============================================================ */

.note {
  background: rgba(255, 252, 244, .55);
  border-left: 2px solid var(--c-line);
  border-radius: 2px;
  padding: var(--sp-3);
  color: var(--c-ink-soft);
  line-height: 1.85;
}

.note.warn {
  border-left-color: var(--c-vermilion);
  background: rgba(168, 48, 42, .05);
  background: color-mix(in srgb, var(--c-vermilion) 5%, var(--c-paper-lift) 95%);
}

.note.ok {
  border-left-color: #566B4E;
  background: rgba(86, 107, 78, .05);
  background: color-mix(in srgb, #566B4E 5%, var(--c-paper-lift) 95%);
}

/* ============================================================
   八、按钮 — 单一主行动色
   ────────────────────────────────────────────────────────────
   此前墨底与朱砂底并存，视线无处落。现确立：朱砂=主，墨线=次。
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--serif);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  padding: 12px 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--dur), color var(--dur),
              border-color var(--dur), transform var(--dur);
}

.btn:hover { transform: translateY(-1px); }

.btn:not(.ghost) {
  background: var(--c-vermilion);
  color: var(--c-paper-lift);
}

.btn:not(.ghost):hover { background: var(--c-vermilion-deep); }

.btn.ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}

.btn.ghost:hover {
  border-color: var(--c-vermilion);
  color: var(--c-vermilion);
}

/* ============================================================
   九、链接 — 正文链接用细下边线，不用突兀变色
   ============================================================ */

.wrap a:not(.btn):not(.nav-cta):not(.rg-term) {
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft);
  transition: border-color var(--dur), color var(--dur);
}

.wrap a:not(.btn):not(.nav-cta):not(.rg-term):hover {
  border-bottom-color: var(--c-vermilion);
  color: var(--c-vermilion);
}

/* ============================================================
   十、浅底分区（.light）
   ────────────────────────────────────────────────────────────
   浅底不是"没有颜色"，而是纸的正面。
   ============================================================ */

.light {
  --paper:      var(--c-paper);
  --paper-2:    var(--c-paper-deep);
  --paper-3:    var(--c-paper-lift);
  --ink:        var(--c-ink);
  --ink-2:      var(--c-ink-soft);
  --ink-3:      var(--c-ink-mute);
  --line:       var(--c-line);
  --cinnabar:   var(--c-vermilion);
  --terra:      var(--c-brass);
  background: var(--c-paper);
  color: var(--c-ink);
}

.light .hero h1, .light h1 { color: var(--c-ink); }
.light .hero h1 b, .light h1 b,
.light .hero h1 .zhu { color: var(--c-vermilion); }
.light .eyebrow { color: var(--c-vermilion); }
.light .lede { color: var(--c-ink-soft); }
.light .card { background: var(--c-paper-lift); }
.light .claim-sub { color: var(--c-ink-mute); }

/* ============================================================
   十一、深底分区（.deep）— 仅四页
   ────────────────────────────────────────────────────────────
   深色不是把颜色反过来：金在深底上才亮，朱砂在深底上要提亮，
   否则显脏。
   ============================================================ */

.deep {
  --paper:      var(--c-deep-bg);
  --paper-2:    var(--c-deep-bg-lift);
  --paper-3:    var(--c-deep-bg-card);
  --ink:        var(--c-deep-ink);
  --ink-2:      var(--c-deep-ink-soft);
  --ink-3:      var(--c-deep-ink-mute);
  --line:       var(--c-deep-line);
  --line-2:     var(--c-deep-line);
  --cinnabar:   var(--c-vermilion-lift);
  --terra:      var(--c-brass-lift);
  background: var(--c-deep-bg);
  color: var(--c-deep-ink-soft);
}

/* 深底底色用略提亮的一档：纯近黑 #171209 在大屏上显得死黑，
   #1F1810 保持"深"但不至于像关机屏。 */
.deep { background: #1F1810; }

/* ── 关键修正 ──────────────────────────────────────────────
   深底上的标题必须显式取金调，不能靠 --ink 变量覆写。
   原因：site.css 中 .claim / .hero .claim 等规则定义在 .deep 之前，
   变量解析发生在计算时，深底上这些规则仍拿到浅底的 #1C1813，
   于是「近黑标题压近黑底」——实测对比度 1.06:1，几乎不可见。

   这条用「后代选择器 + !important」覆盖 site.css 的浅底规则，
   覆盖 index / shanlu / dossier / yard 四页 hero 的全部标题层级。 */
.deep .hero h1,
.deep .hero h2,
.deep .hero h3,
.deep .hero .claim,
.deep header.hero h1,
.deep .wrap h1,
.deep .wrap h2 {
  color: var(--c-deep-ink);
}

.deep .hero .claim b,
.deep .hero h1 b,
.deep .hero h1 strong,
.deep .hero .claim strong {
  color: var(--c-brass-lift);
}

/* 深底上的朱砂：#C0402E 在 #1F1810 上仅 3.36:1，作正文不足。
   #D4574A 为 4.40 仍差一点，#DC6A5C 达 5.23:1，
   且在深底上仍是"朱"而非"粉"，故取此档。 */
.deep .hero .claim .zhu,
.deep .hero h1 .zhu {
  color: #DC6A5C;
}

/* 辅助文案分两档，制造层次而非一片同色 */
.deep .claim-en,
.deep .hero .lead,
.deep .hero .lede {
  color: var(--c-deep-ink-soft);
}

.deep .claim-sub,
.deep .claim-oath,
.deep .hero .pos,
.deep .chart-cap {
  color: var(--c-deep-ink-mute);
}

/* 深底上的分隔线 */
.deep .plates,
.deep .hero-line {
  border-color: var(--c-deep-line);
}

.deep .plate {
  border-left-color: var(--c-deep-line);
}

.deep .hero h1, .deep h1 { color: var(--c-deep-ink); }
.deep .hero h1 b, .deep h1 b { color: var(--c-brass-lift); }
.deep .hero h1 .zhu { color: var(--c-vermilion-lift); }
.deep .eyebrow { color: var(--c-brass-lift); }
.deep .lede { color: var(--c-deep-ink-soft); }

.deep .claim-sub, .deep .claim-en, .deep .claim-oath { color: var(--c-deep-ink-mute); }
.deep .chart-cap { color: var(--c-deep-ink-mute); }

.deep .card {
  background: var(--c-deep-bg-card);
  border-color: var(--c-deep-line);
  box-shadow: none;
  color: var(--c-deep-ink-soft);
}

.deep .card h3, .deep .card h4 { color: var(--c-deep-ink); }
.deep .card:hover { border-color: rgba(217, 203, 174, .35); box-shadow: none; }

.deep .tbl thead th {
  background: var(--c-deep-bg-card);
  color: var(--c-deep-ink);
  border-bottom-color: var(--c-deep-line);
}

.deep .tbl tbody td {
  color: var(--c-deep-ink-soft);
  border-bottom-color: var(--c-deep-line);
}

.deep .tbl tbody tr:nth-child(even) { background: rgba(255, 255, 255, .028); }
.deep .tbl tbody tr:hover { background: rgba(255, 255, 255, .05); }
.deep .tbl caption { color: var(--c-deep-ink-mute); }

.deep .note {
  background: rgba(255, 255, 255, .04);
  color: var(--c-deep-ink-soft);
  border-left-color: var(--c-deep-line);
}

.deep .note.warn { border-left-color: var(--c-vermilion-lift); }
.deep .note.ok { border-left-color: #7C8E6A; }

.deep input[type="search"],
.deep input[type="text"] {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--c-deep-line);
  color: var(--c-deep-ink);
}

.deep input::placeholder { color: var(--c-deep-ink-mute); }

.deep .concl {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--c-deep-line);
}

.deep .btn:not(.ghost) {
  background: var(--c-vermilion-lift);
  color: var(--c-deep-bg);
}

.deep .btn.ghost {
  color: var(--c-deep-ink);
  border-color: var(--c-deep-line);
}

.deep .btn.ghost:hover {
  border-color: var(--c-brass-lift);
  color: var(--c-brass-lift);
}

/* ============================================================
   十二、页脚 — 收尾，不抢戏
   ────────────────────────────────────────────────────────────
   ⚠️ 历史上此处曾被误设为墨底（v1 对齐层），与方案一不符，
   已还原为浅底。页脚是页面的句号，靠留白与线分隔即可。
   ============================================================ */

.foot {
  background: var(--c-paper-deep);
  border-top: 1px solid var(--c-line);
  padding: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  line-height: 1.8;
}

.ft-h {
  font-family: var(--serif);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--c-ink-soft);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.foot, .foot a, .foot li { font-family: var(--serif); }
.foot a { color: var(--c-ink-mute); text-decoration: none; }
.foot a:hover { color: var(--c-vermilion); }
.foot-note { color: var(--c-ink-faint); }
.foot li { color: var(--c-ink-mute); }

/* ============================================================
   十三、动效 — 只在有助于理解时使用
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .nav-cta:hover { transform: none; }
}

/* ============================================================
   十四、系统级细节 — 此前完全缺失
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: 2px;
  border-radius: 1px;
}

.deep :focus-visible { outline-color: var(--c-brass-lift); }

::selection {
  /* 降级：老浏览器不支持 color-mix 时用纯半透明朱砂 */
  background: rgba(168, 48, 42, .22);
  background: color-mix(in srgb, var(--c-vermilion) 22%, transparent);
  color: var(--c-ink);
}

/* 滚动条：与纸色系统一致，不突兀 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-paper-deep); }
::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 5px;
  border: 2px solid var(--c-paper-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-ink-faint); }

/* 表单元素接入色板 */
input, textarea, select, button {
  font-family: var(--sans);
  color: var(--c-ink);
}

input::placeholder { color: var(--c-ink-faint); }

input:focus, textarea:focus, select:focus {
  border-color: var(--c-vermilion);
  outline: none;
  /* 降级：老浏览器拿不到 color-mix 时仍有可见焦点环 */
  box-shadow: 0 0 0 3px rgba(168, 48, 42, .14);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-vermilion) 14%, transparent);
}

/* ============================================================
   十五、响应式
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --fs-display: clamp(30px, 7.4vw, 46px);
    --fs-h2:      clamp(21px, 4.6vw, 28px);
    --sp-7: var(--sp-6);
  }
  section.reveal { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
}

@media (max-width: 560px) {
  :root {
    --fs-display: clamp(26px, 8vw, 34px);
    --fs-h2:      clamp(19px, 5.4vw, 23px);
    --lh-body:    1.86;
  }
  .eyebrow { letter-spacing: .22em; }
  section.reveal { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  section.tight { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .card { padding: var(--sp-3); }
  .lede { max-width: none; }
  .tbl { font-size: 13.5px; }
  .tbl thead th, .tbl tbody td { padding: 10px 8px; }
}

/* ============================================================
   十六、打印 — 深底必须转白底
   ============================================================ */

@media print {
  .nav, .nav-cta, .foot-mark, .brand-mark,
  .scrollcue, .hero-seal, .reveal { display: none !important; }

  .deep, .light, .reveal,
  section.reveal, section.tight {
    background: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 12pt 0;
  }

  .deep h1, .deep h2, .deep h3, .deep h4,
  .light h1, .light h2, .light h3, .light h4 { color: #000 !important; }

  .tbl thead th { background: #f0f0f0 !important; color: #000 !important; }
  .tbl tbody td { color: #222 !important; border-bottom-color: #ccc !important; }
  .tbl tbody tr:nth-child(even) { background: #fafafa !important; }

  .card, .note, .concl {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   十七、移动端导航抽屉
   ────────────────────────────────────────────────────────────
   动因：站点原先的导航是一条 overflow:auto 的横向滚动条。
   桌面端成立，手机端不成立——390 宽只露出三项，用户看不到
   后面还有什么，也不知道这条可以滑动。实测确认导航 DOM 里
   11 个链接全部存在，只是被容器裁掉了。

   另有一处更硬的问题：「禾膳录」二级面板是 absolute 居中定位，
   min-width 470px，在 390 宽下右边缘落到 562px，
   13 个谱目全部在视口外，一个都点不到。

   事实：nav-toggle 的 HTML 与 JS 早就写好了（site.js 的 initNav），
   但 CSS 里 .nav-toggle 一直是 display:none，
   .nav-links.open 也从来没有对应规则——这是个半成品功能。
   本节把它补完，不改动任何 HTML。

   三条纪律：
     一 · 无 JS 时导航必须仍可达 → 断点下退回「常驻横向滚动」，
         由 <html class="no-js"> 决定，JS 就绪后换成抽屉。
     二 · 抽屉用 aria-expanded 驱动状态，不额外造 class，
         避免 HTML 与 CSS 两处真相。
     三 · 深底分区（.nav.on-deep）必须同步转深，
         否则一块宣纸白浮在暗色导航上。
   ============================================================ */

@media (max-width: 820px) {

  /* ── 汉堡按钮 ────────────────────────────────────────────
     三条线用 background-image 画（两个伪元素不够画三条），
     展开时换成叉。按钮原有文字「菜单」用 font-size:0 收起，
     aria-label 保留给读屏。 */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    width: 40px; height: 36px; margin-left: auto;
    padding: 0; border: 1px solid var(--line-2); border-radius: 2px;
    background: none; color: var(--ink-2);
    font-size: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 18px; height: 12px; margin: -6px 0 0 -9px;
    background:
      linear-gradient(currentColor 0 0) top    / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat;
    opacity: 1; transition: opacity .16s ease;
  }
  .nav-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    background:
      linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
    transform: rotate(45deg);
    opacity: 0; transition: opacity .16s ease;
  }
  .nav-toggle[aria-expanded="true"]::before { opacity: 0; }
  .nav-toggle[aria-expanded="true"]::after  { opacity: 1; }
  .nav-toggle:focus-visible {
    outline: 2px solid var(--cinnabar); outline-offset: 2px;
  }

  /* ── 抽屉本体 ──────────────────────────────────────────
     绝对定位挂在导航下方，不占文档流高度；
     max-height 0 → 视口高，交给 transition 做展开动画。 */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0; flex: none;
    max-height: 0; overflow: hidden; opacity: 0;
    background: var(--paper-3);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(51,32,15,.16);
    transition: max-height .3s cubic-bezier(.4,0,.2,1),
                opacity .2s ease;
    padding: 0 20px;
  }
  .nav-links.open {
    max-height: min(86vh, 720px); overflow-y: auto; opacity: 1;
  }
  /* 底部渐隐：抽屉内容通常超过一屏（11 项 + 十二谱展开约 1000px），
     需要一道渐隐告诉用户「下面还有」，否则会被误读成抽屉到此为止。 */
  .nav-links.open::after {
    content: ""; position: sticky; bottom: 0; display: block;
    height: 30px; margin-top: -30px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(244,237,228,0), var(--paper-3));
  }
  .nav.on-deep .nav-links.open::after {
    background: linear-gradient(to bottom, rgba(23,18,9,0), #171209);
  }
  .nav-links > a,
  .nav-group > a {
    display: flex; align-items: baseline; gap: 8px;
    font-size: .95rem; padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
  }
  .nav-links > a:last-of-type { border-bottom: 0; }
  .nav-links a::after { display: none; }   /* 抽屉内不画悬停下划线 */

  /* ── 禾膳录二级面板：改为在抽屉内平铺 ────────────────
     取消 absolute 居中定位（那是它溢出屏幕的原因），
     改为静态定位随列表流下，网格两列。 */
  .nav-group { width: 100%; }
  .nav-group > a { border-bottom: 1px solid var(--line-2); }
  .nav-menu {
    position: static; transform: none; min-width: 0; width: auto;
    max-height: 0; overflow: hidden;
    /* 以下四项显式重置：site.css 的 820 断点里有一套浮层样式
       （position absolute + 底色 + 边框 + 阴影），那里是给
       「横向滚动导航行内的下拉」用的。抽屉里改成平铺融入，
       不重置就会残留出一块浮在半空的米色面板。 */
    padding: 0; margin: 0; border: 0; box-shadow: none;
    background: transparent; display: block;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: max-height .28s cubic-bezier(.4,0,.2,1),
                opacity .2s ease, visibility .2s;
  }
  /* 触摸端没有 hover，必须把 hover 态显式关掉，
     只留 is-open 一条通路 */
  .nav-group:hover .nav-menu,
  .nav-group:focus-within .nav-menu {
    opacity: 0; visibility: hidden; pointer-events: none; max-height: 0;
    padding: 0; margin: 0;
  }
  .nav-group.is-open .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 520px; overflow-y: auto;
    padding: 12px 0 14px; margin: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .nav-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 2px 8px; }
  .nav-menu-grid a { font-size: .88rem; padding: 8px 4px; }
  .nav-menu-ft {
    font-size: .72rem; line-height: 1.7;
    padding: 10px 0 0; margin-top: 8px;
  }

  /* ── 深底分区同步 ────────────────────────────────────── */
  .nav.on-deep .nav-links {
    background: #171209; border-bottom-color: #2E2417;
    box-shadow: 0 16px 34px rgba(0,0,0,.55);
  }
  .nav.on-deep .nav-links > a,
  .nav.on-deep .nav-group > a { border-bottom-color: #2E2417; }
  .nav.on-deep .nav-menu {
    background: transparent; border: 0; box-shadow: none;
  }
  .nav.on-deep .nav-menu-hd { border-bottom-color: #2E2417; }
  .nav.on-deep .nav-menu-grid a:hover { background: rgba(194,90,66,.12); }
  .nav.on-deep .nav-menu-ft { border-top-color: #2E2417; }
  .nav.on-deep .nav-toggle { border-color: #4C3C27; color: #C4B08A; }

  /* ── 遮罩 ──────────────────────────────────────────────
     用 body 伪元素，省掉一个全站 DOM 节点。
     z-index 低于导航（60），高于页面内容。 */
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(28,24,19,.46);
    z-index: 55;
    animation: navscrim .2s ease both;
  }
  @keyframes navscrim { from { opacity: 0; } to { opacity: 1; } }

  /* 窄屏下 CTA 让位给汉堡，但仍是转化入口，保留并缩小 */
  .nav-cta { font-size: .74rem; padding: 6px 10px; }
  .nav-in { gap: 12px; padding: 0 20px; }
}

/* 无 JS 兜底：nav-toggle 不显示，导航退回横向滚动，
   至少每一条都还能点到（可滚动这件事至少不隐蔽）。 */
@media (max-width: 820px) {
  html.no-js .nav-toggle { display: none; }
  html.no-js .nav-links {
    position: static; max-height: none; opacity: 1; overflow: visible;
    background: none; border: 0; box-shadow: none; padding: 0;
    flex-direction: row; flex-wrap: wrap; gap: 0 16px;
  }
  html.no-js .nav-links > a,
  html.no-js .nav-group > a { padding: 8px 0; border-bottom: 0; }
  html.no-js .nav-menu {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%); min-width: 320px;
    max-height: none; overflow: visible;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 14px 16px 13px; background: var(--paper-2);
    border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(51,32,15,.13);
  }
}

/* ============================================================
   十八、晒场实况光带
   ────────────────────────────────────────────────────────────
   动因：站点原先一张实景照片都没有。二十四页内容全靠文字与
   数据说话，说服力有了，但「这是真的晒场」这件事是空的。
   品牌站的信任感一半来自可验证的实物——尤其是手工酿造这类
   无法靠文案证明的品类。

   做法上刻意克制：
     一 · 不动 hero。纯深底大字是本站最强的资产，
         塞一张图进去反而把它降级成图集封面。
         所以照片放在 hero 之后，做成一道通栏光带——
         暗场 → 光 → 浅底正文，视觉上完成一次呼吸。
     二 · 顶部加渐变，与 hero 的深褐底无缝衔接。
         照片天空很亮（实测顶行亮度 205），硬接会跳。
     三 · 图注只写画面本身与可核查的数字，
         不编日期、不编批次号。
   ============================================================ */

.hero-scene {
  position: relative;
  padding: 0;
  background: #171209;
  overflow: hidden;
}
.hero-scene picture {
  display: block; width: 100%; position: relative;
}
.hero-scene img {
  display: block; width: 100%;
  /* 容器高度随光带图比例（1400×703 = 2:1）走。
     从 3.43:1 扁带 → 2.41:1 → 2:1 逐步放宽，为的是同时装下
     「晚霞 + 远山 + 白墙 + 完整缸身」四层 ——
     扁带物理上做不到，要天空就没缸身，要缸身就没天空。 */
  height: 700px; object-fit: cover; object-position: center 42%;
}
/* 顶部渐变：把照片的天空压回 hero 的深褐，做出「从暗处透出光」 */
.hero-scene::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 96px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    #171209 0%, rgba(23,18,9,.72) 32%, rgba(23,18,9,.28) 66%, rgba(23,18,9,0) 100%);
}
/* 底部渐变：图注浮在照片上，不再另起一块深色条带。
   一张照片 + 两道渐变就够，再加色块会把光带切碎。 */
.hero-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 88px; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(23,18,9,.88) 0%, rgba(23,18,9,.55) 46%, rgba(23,18,9,0) 100%);
}
.scene-cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 0 24px 22px;
  font-size: .72rem; letter-spacing: .2em; color: #C4B08A;
}
.scene-cn { font-family: var(--serif); letter-spacing: .16em; color: #D9CBAE; }
.scene-en { font-family: var(--mono); font-size: .64rem; white-space: nowrap; color: #B6A688; }

@media (max-width: 820px) {
  /* 移动端光带按 2:1 预裁（780×435），容器同比例 → 零裁切，
     晚霞 / 远山 / 白墙 / 缸阵四层完整保留。 */
  .hero-scene img { height: 218px; object-position: center 50%; }
  .hero-scene::before { height: 52px; }
  .hero-scene::after { height: 60px; }
  .scene-cap { padding: 0 20px 14px; font-size: .64rem; letter-spacing: .14em; }
}

/* ============================================================
   十九、执行标准背书
   ────────────────────────────────────────────────────────────
   动因：团体标准号原先只出现在每页页脚的「关联规范」里。
   页脚是给「已经信任我们的人」看的；首页正文才是给
   「还在判断要不要信我们的人」看的。执行标准与实测值的
   并置（门槛 0.90 / 实测 1.00）是全站最硬的一块背书，
   不该压在页脚。
   ============================================================ */

.std-line {
  margin: 0 0 12px; padding: 11px 16px;
  border-left: 3px solid var(--cinnabar);
  background: var(--paper-2);
  font-size: .88rem; line-height: 1.82; color: var(--ink-2);
}
.std-k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  color: var(--cinnabar-ink); margin-right: .7em; white-space: nowrap;
}
@media (max-width: 820px) {
  .std-line { padding: 10px 13px; font-size: .84rem; }
  .std-k { display: block; margin: 0 0 4px; }
}

/* ============================================================
   二十、导航标识的双版本切换
   ────────────────────────────────────────────────────────────
   动因：四版标识（ink / paper / brass / zhu）都是「阳刻」——
   一块实底 + 镂空的字。所以 paper 版放到宣纸色导航上时，
   底色与背景同色、字是镂空透出背景，整枚标识等于消失。
   实测截图确认：浅底页面的导航左上角只剩一个淡米色方块，
   里面的「采士」两字是看不见的。

   修法不用 filter（filter 对镂空图不可靠），也不用换图片
   文件（页面多、状态多）。改成两枚 img 并列，由导航自身的
   on-deep 状态决定显隐：
     浅底导航 → 墨块版（ink），底深字透浅，可读
     深底导航 → 宣纸块版（paper），底浅字透深，可读
   on-deep 由 site.js 按导航下沿是否落在 .deep 分区动态切换，
   滚动时自动跟随，无需为每个页面硬编码。

   可访问性：只有当前可见的那枚带 alt，隐藏的那枚 alt 为空，
   读屏不会重复朗读。
   ============================================================ */

.brand-on-deep { display: none; }
.nav.on-deep .brand-on-light { display: none; }
.nav.on-deep .brand-on-deep  { display: block; }

/* ============================================================
   二十一、实景视频区与物证图
   ────────────────────────────────────────────────────────────
   动因一：yard.html（晒场页）整页在讲「128 口发酵缸」「十一道工序」
   「批次全链路」，却一张晒场实景都没有。全站最该有实景的页面
   反而最空。
   动因二：terroir.html（风土页）设了「风土的物证」一节，
   写着「风土若只停在说法层面，就无法验证」——那就把看得见的
   那张放在这句话旁边。

   视频的三条工程纪律：
     一 · muted + playsinline + autoplay，三者缺一就会被浏览器
         拦下静音自动播放，移动端尤其敏感。
     二 · poster 必须给：未起播时先出静态帧，且首屏不下载视频。
     三 · 剪掉的必须是运镜段——用 ffmpeg 从 0.6s 起切 8s，
         避开头尾的起手与收势，循环时看不出接缝。
   ============================================================ */

/* ── 文档配图（居中窄幅）─────────────────────────────────
   器物类、物质类的图不适合通栏：通栏会把特写拉散。
   居中窄幅 + 留白，读起来像「陈列标本」，与内容型的宣纸底相合。 */
.doc-fig {
  margin: 0 auto 30px;
  max-width: 520px;
}
.doc-fig img {
  display: block; width: 100%;
  height: 700px; object-fit: cover; object-position: center 42%;
}
.doc-fig figcaption {
  padding-top: 10px;
  font-size: .74rem; color: var(--ink-3-ink); letter-spacing: .12em;
  text-align: center;
}

/* ── 居中影像框（.doc-film）────────────────────────────────
   通栏位已有首页光带与晒场视频两处，第三处影像改用居中窄幅，
   免得整站都是通栏大图。960 宽 = 视频原生宽度，零缩放。 */
.doc-film {
  max-width: 960px; margin: 0 auto 30px;
  background: #171209;
}
.doc-film .film-frame { height: auto; aspect-ratio: 16 / 9; }
.doc-film .film-cap { padding: 11px 18px 15px; }

/* ── 晒场页视频区 ──────────────────────────────────────── */
.yard-film {
  padding: 0;
  background: #171209;
}
.film-frame {
  position: relative;
  width: 100%; height: 460px;
  overflow: hidden;
  background: #171209;
}
.film-vid {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.film-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 12px 0 18px;
  font-size: .72rem; letter-spacing: .2em; color: #A08A62;
}
.film-cap .fc-cn { font-family: var(--serif); letter-spacing: .16em; color: #D9CBAE; }
.film-cap .fc-en { font-family: var(--mono); font-size: .64rem; white-space: nowrap; color: #B6A688; }

/* 无声降级：用户开启「减少动态效果」时，播放按钮留在画面上 */
.film-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ── 风土页物证图 ──────────────────────────────────────── */
.proof-fig {
  margin: 0 0 26px;
}
.proof-fig img {
  display: block; width: 100%;
  height: 420px; object-fit: cover; object-position: center 50%;
}
.proof-fig figcaption {
  padding-top: 10px;
  font-size: .74rem; color: var(--ink-3-ink); letter-spacing: .12em;
}

@media (max-width: 820px) {
  .film-frame { height: 260px; }
  .film-cap { padding: 10px 0 16px; font-size: .64rem; letter-spacing: .14em; }
  .proof-fig img { height: 240px; }
  .doc-fig { max-width: 100%; }
  .doc-fig img { height: 440px; }
  .doc-fig figcaption { text-align: left; }
  .doc-film { max-width: 100%; }
  .doc-film .film-frame { aspect-ratio: 16 / 9; }
  .doc-film .film-cap { padding: 10px 16px 13px; }
}

/* ============================================================
   二十二、页脚备案号与社交占位
   ────────────────────────────────────────────────────────────
   备案号的显隐规则（合规，不可擅改）：
     · ICP 备案号：主体备案已通过，网站备案提交后 30 日内须悬挂 →
       始终显示，链到工信部（第十三条）。
     · 公安备案号：网站「开通」后才可申请，30 日内办完 →
       拿到号之前页脚**只挂 ICP 号**，不得出现「待公示」等占位文字；
       拿到号后跑 tools/add_mps.py 写回。
   空 span 由 :empty 隐藏，HTML 结构保持不变，日后加号不必再改 23 个页面。

   社交入口的 href="#" 是占位：点击会跳到页顶，是坏体验。
   真实 URL 就绪前直接不响应点击，视觉上仍由 .is-todo 的减淡表示「待开放」。
   ============================================================ */

.foot-mps:empty { display: none; }
.foot-social a[href="#"] { pointer-events: none; cursor: default; }
.foot-social a[href="#"]:hover { color: var(--ink-2); border-color: var(--line-2); }

/* ============================================================
   设计系统 v3 · 完
   ────────────────────────────────────────────────────────────
   全站仅两个 CSS：site.css（原样不动）+ 本文件（最终裁决）。
   删本文件即回到 v2 状态。
   ============================================================ */