@charset "UTF-8";
/* 东方宣纸朱砂 · 网页字体
   ------------------------------------------------------------
   方案一用 @import 从 Google Fonts 拉 Noto Serif SC / Cormorant Garamond /
   IBM Plex Mono。**本项目不使用该做法**，原因有二：

   1. 实测本机与境内网络均无法访问 fonts.googleapis.com / fonts.gstatic.com
      （连接被重置）。@import 是渲染阻塞请求，探测失败要等超时才落回本地
      字体，首屏会白等一段时间。
   2. 中文正文用远程字体首屏代价高，且属外部依赖；上线后一旦对方不可达，
      表现不可控。

   改用「本机字体优先」策略：正文与标题走已安装的 Noto Serif SC / Noto Sans SC
   （本机已装，Windows 版为可变字重），再依次回退到系统宋体与黑体。
   拉丁展示体与等宽体同样优先本机，缺失时回退到衬线/等宽族。
   若日后要做到全平台一致，把字体文件自托管到 assets/fonts/ 并在此写
   @font-face 即可，其余样式无需改动。 */
/* ============================================================
   采士 · 官网样式系统 v1.0
   济南同源调味品有限公司
   配色取自产品与器物本身：酱油棕 / 陶土 / 朱砂印 / 宣纸
   规范依据：《采士官网建设方案》第 4 章 设计系统
   ============================================================ */

:root {
  /* 主色 —— 东方宣纸朱砂（对齐方案一） */
  --soy:        #1C1813;   /* 墨（近黑暖褐：主文字 / 标题 / 印章） */
  --terra:      #8A6A3B;   /* 黄铜（取代陶土，作金色调与点缀） */
  --cinnabar:   #A8302A;   /* 朱砂印（提亮一档，更正更亮的朱） */

  /* 底色 */
  --paper:      #ECE2CE;   /* 宣纸（更深一档的米） */
  --paper-2:    #E4D7BD;
  --paper-3:    #F3ECDB;

  /* 文字 */
  --ink:        #1C1813;
  --ink-2:      #473F32;
  --ink-3:      #83785F;
  --line:       #C9B998;
  --line-2:     #D8CBAE;

  /* 语义 */
  --ok:         #566B4E;   /* 青绿 */
  --warn:       #8B6013;
  --alert:      #A8302A;

  /* 朱砂作**文字**时的颜色。浅底上与原色相同（#A8302A），
     深底分区里换用提亮档（见 .deep）。作边框与底衬时仍用 --cinnabar。 */
  --cinnabar-ink: #A8302A;

  /* 前景专用色（可达性修正，详见 tools/calc_contrast.py） ──
     原变量 --terra / --ink-3 作文字时对比度不足，新增一组仅作文字的变量；
     原变量继续承担描边、底衬、分隔线（保持淡）。做法朝黑收缩、色相不变。 */
  --terra-ink:   #6F5430;   /* 黄铜作字  on #ECE2CE ≈ 4.8+ */
  --ink-3-ink:   #6B6051;   /* 淡棕作字  on #ECE2CE ≈ 4.8+ */
  --warn-ink:    #8B6013;   /* 警示作字  = 4.90 */

  /* 排版 —— 顺序即回退顺序：先本机已装的思源（Noto），再系统宋/黑。
     Noto Serif SC / Noto Sans SC 本机已安装（Windows 版为可变字重），
     所以这里第一条就能命中；后面的项是给未装思源的机器兜底。 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC",
           "Songti SC", "STSong", "STZhongsong", "SimSun", "Georgia", serif;
  --sans:  "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC",
           "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", "Cascadia Mono", "Consolas", "Courier New", monospace;
  --display: "Cormorant Garamond", "EB Garamond", "Noto Serif SC", Georgia, serif;  /* 拉丁展示体 */

  /* 尺度 */
  --wrap: 1180px;
  --nav-h: 58px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 锚点跳转补偿：导航是 position:sticky，高 var(--nav-h)（58px）。
   不给 scroll-margin-top 的话，浏览器会把 section 顶边对齐视口顶边，
   而导航正压在那里——标题被遮掉一半（实测 #term 标题 top=47 < 58）。
   这条规则是全站性的，对所有 section[id] 与任何锚点链接都生效。 */
section[id], [id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.78;
  letter-spacing: 0.02em;
  /* 宣纸细颗粒：3px 网格极淡噪点，不用任何图片（借鉴方案一） */
  background-image:
    radial-gradient(rgba(28,24,19,0.045) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--soy);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: 0; }
h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); margin-bottom: .5em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.32rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.05em; }

a { color: var(--cinnabar-ink); text-decoration: none; border-bottom: 1px solid rgba(140,58,37,.32); }
a:hover { border-bottom-color: var(--cinnabar-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cinnabar); outline-offset: 3px;
}

code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* ---------------- 布局 ---------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 900px; }

section { padding: 44px 0; }
section + section { border-top: 1px solid rgba(196,182,156,.5); }
section.tight { padding: 30px 0; }

/* ---------------- 导航 ---------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,243,234,.96);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  color: var(--soy); letter-spacing: .1em;
  border: 0; padding: 0; flex: 0 0 auto;
}
.brand:hover { border: 0; }
.brand .seal { flex: 0 0 auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand small {
  font-family: var(--sans); font-size: .5rem;
  letter-spacing: .22em; color: var(--ink-3-ink); font-weight: 400; margin-top: 2px;
}
.nav-links { display: flex; gap: 20px; flex: 1 1 auto; flex-wrap: wrap; }
.nav-links a {
  font-size: .87rem; color: var(--ink-2); border: 0; padding: 4px 0;
  white-space: nowrap; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 1.5px solid var(--cinnabar); transition: right .22s ease;
}
.nav-links a:hover { color: var(--soy); }
.nav-links a:hover::after { right: 0; }
/* 当前页用朱砂色，借鉴方印的指向性，但仅限文字与下划线 */
.nav-links a[aria-current="page"] { color: var(--cinnabar-ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { right: 0; border-bottom-color: var(--cinnabar-ink); border-bottom-width: 2px; }

/* ── 禾膳录下拉组 ──
   架构动因：禾膳录有 10 个谱目页，占全站页面数近一半，
   但平铺进导航会把导航栏挤到换行，且失去「这是一套体系」的观感。
   所以导航上只占一个入口（二级菜单），体系感由 shanlu.html 承担。

   交互三条纪律：
     一 · 纯 CSS 悬停 + JS 键盘支持，两条都要有。
         只做 CSS 的话键盘用户永远打不开这个菜单。
     二 · 无 JS 时菜单项必须仍可达——用 .no-js 兜底为常驻显示。
     三 · 下拉面板不吃 var(--paper) 的浅色，落到深底时要一起变深。 */
.nav-group { position: relative; flex: 0 0 auto; }
.nav-group > a { display: inline-block; }
/* 展开三角：用 CSS 画，不引图片 */
.nav-group > a::before {
  content: ""; display: inline-block;
  width: 0; height: 0; margin-right: 5px; vertical-align: 1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .5;
  transition: transform .2s ease;
}
.nav-group:hover > a::before,
.nav-group:focus-within > a::before,
.nav-group.is-open > a::before { transform: rotate(180deg); opacity: .85; }
.nav-group:hover > a,
.nav-group:focus-within > a,
.nav-group.is-open > a { color: var(--soy); }

/* 面板本体 */
.nav-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 470px; padding: 14px 16px 13px;
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(51,32,15,.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.is-open .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 面板顶部：谱目分甲乙丙三段，与 shanlu.html 的分类一致 */
.nav-menu-hd {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  color: var(--ink-3-ink); padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.nav-menu-hd a { font-size: .66rem; color: var(--cinnabar-ink); letter-spacing: .1em; }
.nav-menu-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 10px;
}
.nav-menu-grid a {
  font-size: .82rem; color: var(--ink-2); padding: 5px 4px;
  border: 0; white-space: nowrap; border-radius: 2px;
  display: flex; align-items: baseline; gap: 5px;
}
.nav-menu-grid a::after { display: none; }   /* 面板内不画悬停下划线 */
.nav-menu-grid a:hover { color: var(--cinnabar-ink); background: rgba(140,58,37,.06); }
/* 谱号：极小号、淡陶土，仅作定位 */
.nav-menu-grid i {
  font-family: var(--mono); font-size: .58rem; font-style: normal;
  color: var(--ink-3-ink); opacity: .7; min-width: 1.5em;
}
.nav-menu-grid a.is-current { color: var(--cinnabar-ink); font-weight: 600; }
.nav-menu-grid a.is-current i { color: var(--cinnabar-ink); opacity: .9; }
/* 未建的谱整体减淡，与 shanlu.html 的处理一致 */
.nav-menu-grid a.is-todo { color: var(--ink-3-ink); opacity: .72; }
.nav-menu-ft {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2);
  font-size: .74rem; color: var(--ink-3-ink); line-height: 1.6;
}
/* 无 JS 时菜单常驻——否则键盘与爬虫都够不到这十页 */
.no-js .nav-menu {
  position: static; opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; min-width: 0; box-shadow: none;
  margin-top: 6px; padding: 10px 12px;
}

/* 深底上的下拉面板：整体转深，否则一块米色浮在暗色导航上 */
.nav.on-deep .nav-menu {
  background: #1E1710; border-color: #3A2E1E;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.nav.on-deep .nav-menu-hd { border-bottom-color: #3A2E1E; }
.nav.on-deep .nav-menu-grid a:hover { background: rgba(194,90,66,.12); }
.nav.on-deep .nav-menu-ft { border-top-color: #3A2E1E; }
.nav.on-deep .nav-group:hover > a,
.nav.on-deep .nav-group:focus-within > a,
.nav.on-deep .nav-group.is-open > a { color: #E8C98C; }

.nav-cta {
  font-size: .82rem; padding: 7px 14px; border: 1px solid var(--cinnabar);
  color: var(--cinnabar-ink); border-radius: 2px; white-space: nowrap; flex: 0 0 auto;
}
.nav-cta:hover { background: var(--cinnabar); color: var(--paper); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-2);
  border-radius: 2px; padding: 6px 10px; font-size: .8rem; color: var(--ink-2);
  cursor: pointer;
}

/* ---------------- 页脚 ---------------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  padding: 32px 0 26px;
  font-size: .83rem; color: var(--ink-2);
}
.foot-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px;
}
/* 页脚栏目标题：原为 h4，但它不属于文档标题结构——
   屏幕阅读器会把「采士 / 站内 / 知识与检索 / 关联规范」当四个小节标题念出来，
   反而吵。改为 div + .ft-h，视觉样式照旧。
   正文里的 .empty h4 仍是真标题，保留 h4。 */
.ft-h {
  font-size: .82rem; letter-spacing: .12em; color: var(--ink-3-ink);
  margin-bottom: .7em; font-weight: 600;
}
/* 页脚里的「本页即第 N 谱」定位标：谱目页用来告诉读者自己在体系里的位置。
   用朱砂而非加粗，与页脚的静态信息区分开。 */
.foot-here { color: var(--cinnabar-ink); font-size: .8rem; letter-spacing: .04em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .35em; }
.foot a { color: var(--ink-2); border-bottom-color: var(--line-2); }
.foot-base {
  max-width: var(--wrap); margin: 24px auto 0; padding: 18px 24px 0;
  border-top: 1px solid var(--line-2); font-size: .78rem; color: var(--ink-3-ink);
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.foot-note { flex: 1 1 auto; }

/* 备案信息：ICP 备案号按《非经营性互联网信息服务备案管理办法》第十三条
   须在网站底部显著位置展示，并链接至工信部备案管理系统。
   样式刻意压低视觉权重——合规必须存在，但不应喧宾夺主。 */
.foot-icp { flex: 0 0 auto; display: flex; align-items: center; gap: .6em; white-space: nowrap; }
.foot-icp a { color: var(--ink-3-ink); border-bottom: 1px solid var(--line-2); }
.foot-icp a:hover { color: var(--ink-2); }
.foot-icp-sep { opacity: .5; }
@media (max-width: 720px) {
  .foot-base { flex-wrap: wrap; }
  .foot-icp { flex: 1 1 100%; margin-top: 6px; }
}

/* 新媒体 / 关注区块：横跨整宽，横向排平台入口。
   置于 foot-in 与 foot-base 之间。古风处理：单色朱砂描边胶囊 + 中文标签，
   不用彩色品牌 logo，避免破坏宣纸/朱砂调性。
   公众号、视频号属微信闭环，给「扫码」入口（接二维码）；其余可外链新窗口。 */
.foot-social {
  max-width: var(--wrap); margin: 0 auto; padding: 22px 24px 0;
  border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.foot-social .fs-h {
  font-family: var(--serif); font-size: .9rem; color: var(--ink-3-ink);
  letter-spacing: .12em; margin-right: 4px;
}
.foot-social a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; color: var(--ink-2);
  padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 2px;
  white-space: nowrap; transition: border-color .2s ease, color .2s ease;
}
.foot-social a:hover { border-color: var(--cinnabar); color: var(--cinnabar-ink); }
.foot-social a.is-todo { opacity: .55; }
.foot-social a[target="_blank"]::after {
  content: "\2197"; font-size: .72rem; opacity: .5; margin-left: 1px;
}

/* ---------------- 通用组件 ---------------- */

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  color: var(--terra-ink); text-transform: uppercase; margin-bottom: .8em;
}
.lede { font-size: 1.06rem; color: var(--ink-2); line-height: 1.9; max-width: 760px; }

.concl {
  border-left: 3px solid var(--cinnabar);
  background: var(--paper-2);
  padding: 13px 17px; margin: 0 0 1.3em;
  font-size: 1rem; line-height: 1.8;
}
.concl b { color: var(--cinnabar-ink); font-weight: 600; }

.note {
  border: 1px solid var(--line-2); border-left: 3px solid var(--terra);
  background: var(--paper-2); padding: 11px 15px;
  font-size: .86rem; color: var(--ink-2); margin: 0 0 1.1em; line-height: 1.76;
}
.note b { color: var(--soy); }
.note.warn { border-left-color: var(--alert); }
.note.ok   { border-left-color: var(--ok); }

.tag {
  display: inline-block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--paper-2);
  margin: 0 5px 5px 0;
  /* 不用 nowrap：短标签（谱号、状态）视觉不变，
     长标签（源流条目的说明）可换行，不会撑破容器 */
  overflow-wrap: anywhere;
}
.tag.ok   { border-color: rgba(74,107,61,.45); color: var(--ok); background: rgba(74,107,61,.05); }
.tag.warn { border-color: rgba(176,122,24,.45); color: var(--warn-ink); background: rgba(176,122,24,.06); }
.tag.void { border-color: var(--line-2); color: var(--ink-3-ink); background: transparent; }

/* 朱砂方印：借鉴方案一的落款手法 */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cinnabar); color: var(--paper);
  font-family: var(--serif); font-weight: 600;
  width: 40px; height: 40px; border-radius: 3px;
  letter-spacing: 0; line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(236,226,206,.55), inset 0 0 0 3px var(--cinnabar);
}
.seal-sm { width: 34px; height: 34px; font-size: .82rem; box-shadow: inset 0 0 0 1.5px rgba(247,243,234,.5), inset 0 0 0 2.5px var(--cinnabar); }
/* 品牌标识：方印 + 文字的组合 */
.brandmark { display: flex; align-items: center; gap: 10px; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.card {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 16px 18px; border-radius: 2px;
}
.card h3, .card h4 { margin-bottom: .5em; }
.card p:last-child { margin-bottom: 0; }

/* 表格 */
.tbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.3em;
  max-width: 100%;
}
/* 表格自身不设固定宽，长单元格用换行收敛；
   极窄屏下仍以 tbl-wrap 的横向滚动兜底 */
.tbl { width: 100%; table-layout: auto; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
table.tbl {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--paper-2); min-width: 460px;
}
table.tbl caption {
  caption-side: top; text-align: left; font-size: .8rem; color: var(--ink-3-ink);
  padding-bottom: .6em; font-family: var(--mono); letter-spacing: .06em;
}
table.tbl th, table.tbl td {
  border: 1px solid var(--line); padding: 8px 11px; text-align: left;
  vertical-align: top; line-height: 1.68;
}
table.tbl th { background: var(--paper-3); font-weight: 600; color: var(--soy); font-size: .84rem; }
table.tbl td.n { font-family: var(--mono); text-align: right; white-space: nowrap; }
table.tbl tr.pass td.n { color: var(--ok); font-weight: 600; }

/* 数据条 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--paper-2); padding: 14px 16px; }
.stat .v { font-family: var(--mono); font-size: 1.42rem; color: var(--soy); line-height: 1.22; }
.stat .v span { font-size: .78rem; color: var(--ink-3-ink); margin-left: 2px; }
.stat .k { font-size: .75rem; color: var(--ink-3-ink); margin-top: 2px; line-height: 1.5; }

/* 表单 */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; max-width: 100%; }
.form-row > input { flex: 1 1 220px; min-width: 0; width: auto; }
.form-row > .btn { flex: 0 0 auto; }
/* 输入框留出按钮宽度，避免换行 */
@media (min-width: 641px) {
  .form-row { flex-wrap: nowrap; }
}
input[type="text"], input[type="email"], input[type="search"], select {
  font-family: var(--mono); font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 2px;
  padding: 11px 13px; min-height: 44px; width: 100%;
}
input::placeholder { color: #B3A48E; font-family: var(--sans); letter-spacing: .04em; }
label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .35em; }

.btn {
  font-family: var(--sans); font-size: .92rem; letter-spacing: .06em;
  padding: 11px 22px; min-height: 44px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--soy); background: var(--soy); color: var(--paper);
  white-space: nowrap;
}
.btn:hover { background: #241708; }
.btn.ghost { background: transparent; color: var(--soy); }
.btn.ghost:hover { background: rgba(51,32,15,.07); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.form-msg { font-size: .84rem; margin-top: .8em; min-height: 1.4em; }
.form-msg.ok  { color: var(--ok); }
.form-msg.err { color: var(--alert); }

/* 时间轴 */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--line-2); }
.timeline > li { position: relative; padding: 0 0 17px 18px; }
.timeline > li::before {
  content: ""; position: absolute; left: -26px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--terra);
}
.timeline > li.done::before { background: var(--terra); }
.timeline > li.now::before  { background: var(--cinnabar); border-color: var(--cinnabar-ink); box-shadow: 0 0 0 4px rgba(140,58,37,.14); }
.timeline .t { font-family: var(--mono); font-size: .78rem; color: var(--terra-ink); letter-spacing: .04em; }
.timeline .h { font-weight: 600; color: var(--soy); margin: 2px 0 3px; }
.timeline .d { font-size: .88rem; color: var(--ink-2); }

/* 折叠 */
details.acc {
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper-2); margin-bottom: 7px;
}
details.acc > summary {
  cursor: pointer; padding: 11px 16px; list-style: none;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before {
  content: "＋"; font-family: var(--mono); color: var(--terra-ink);
  font-size: .9rem; flex: 0 0 auto;
}
details.acc[open] > summary::before { content: "－"; }
details.acc > summary:hover { background: rgba(169,116,79,.06); }
details.acc .acc-body { padding: 0 16px 15px; border-top: 1px solid var(--line); padding-top: 13px; }
details.acc .acc-body > :last-child { margin-bottom: 0; }
.acc-no { font-family: var(--mono); font-size: .74rem; color: var(--ink-3-ink); flex: 0 0 auto; }
.acc-t { font-family: var(--serif); font-weight: 600; color: var(--soy); font-size: 1.02rem; }
.acc-star { color: var(--cinnabar-ink); font-size: .8rem; }

/* 未知边界块 */
.unknown {
  border: 1px dashed var(--line-2); background: var(--paper);
  padding: 11px 14px; font-size: .85rem; color: var(--ink-2);
}
.unknown b { color: var(--cinnabar-ink); font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; }

/* 图表 */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 3; }
.chart .line { fill: none; stroke: var(--cinnabar); stroke-width: 1.8; }
.chart .area { fill: rgba(140,58,37,.09); }
.chart .dot  { fill: var(--cinnabar); }
.chart-cap { font-size: .77rem; color: var(--ink-3-ink); margin-top: .5em; line-height: 1.65; }

/* 节气圆环 */
.ring-wrap { display: flex; justify-content: center; margin: 4px 0 20px; }
.ring-wrap svg { width: 100%; max-width: 500px; height: auto; }

/* 四时宽字距标题：借鉴方案一的字距节奏 */
.seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 20px; }
.season { border-left: 2px solid var(--terra); padding: 4px 0 4px 14px; }
.season .cn {
  font-family: var(--serif); font-size: 1.42rem; color: var(--soy);
  letter-spacing: .28em; line-height: 1.2;
}
.season .cn b { color: var(--cinnabar-ink); font-weight: 600; }
.season .en { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; color: var(--ink-3-ink); margin-top: 3px; }
.season .d  { font-size: .86rem; color: var(--ink-2); margin-top: 5px; line-height: 1.72; }

/* ============================================================
   五守　借鉴方案一的「朱红大字 + 田字格」手法
   ============================================================ */
.vows { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vow { background: var(--paper-2); padding: 18px 20px 16px; position: relative; }
/* 朱红序号，如方案一中的「壹」「肆」 */
.vow-no {
  font-family: var(--serif); font-size: 2.1rem; color: var(--terra-ink);
  line-height: 1; opacity: .32; position: absolute; top: 12px; right: 14px;
  user-select: none;
}
.vow-name { display: flex; align-items: baseline; gap: 9px; margin-bottom: 2px; }
.vow-name b {
  font-family: var(--serif); font-size: 1.5rem; color: var(--cinnabar-ink);
  font-weight: 600; letter-spacing: .06em;
}
.vow-sub {
  font-size: .78rem; color: var(--ink-2); letter-spacing: .1em;
  background: var(--paper-3); padding: 2px 9px; border-radius: 2px;
}
.vow-en { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; color: var(--ink-3-ink); margin-bottom: 8px; }
.vow-d  { font-size: .88rem; color: var(--ink-2); line-height: 1.78; }
.vow-q {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line-2);
  font-family: var(--serif); font-size: .88rem; color: var(--soy); line-height: 1.72;
}
.vow-a { font-size: .76rem; color: var(--ink-3-ink); margin-top: 5px; }

/* 使命块：朱印 + 宽字距 */
.mission {
  display: flex; gap: 20px; align-items: flex-start;
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 22px 24px; margin-bottom: 18px;
}
.mission .seal { flex: 0 0 auto; width: 52px; height: 52px; font-size: 1.5rem; }
.mission-t { font-family: var(--serif); font-size: 1.42rem; color: var(--soy); letter-spacing: .1em; line-height: 1.4; }
.mission-d { font-size: .92rem; color: var(--ink-2); margin-top: 6px; }
.mission-en { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--ink-3-ink); margin-top: 7px; }
.mission-oath {
  font-family: var(--serif); font-size: .95rem; color: var(--cinnabar-ink);
  letter-spacing: .22em; margin-top: 12px;
}

/* ============================================================
   品牌标识　采士 + CAISHI
   logo 由包装设计方案（方案一）确定，源图为浅底纯黑字，
   此处提供黑 / 酱油棕 / 朱砂三色，供不同背景使用。
   ============================================================ */
.brand-logo {
  display: block; height: 34px; width: auto;
  flex: 0 0 auto;
}
.brand:hover .brand-logo { opacity: .78; }

/* 书法标识「采士」· 单字标（导航用）
   ------------------------------------------------------------
   与上面 logo-soy.png 那套的区别：这是单色书法字，本身没有色，
   靠资源分版上色——paper 版给暗场、ink 版给浅底。
   所以**不能再套 brightness 滤镜**：那会把宣纸色洗成刺眼的近白，
   也会把墨色冲淡。见下方覆盖 on-deep / .deep / print 三条旧规则。 */
.brand-mark { display: block; height: 32px; width: auto; flex: 0 0 auto; }
.brand:hover .brand-mark { opacity: .82; }

.foot-logo { display: block; height: 30px; width: auto; flex: 0 0 auto; opacity: .9; }

/* 书法标识 · 标 + CAISHI 字行（页脚用）。
   字行在页脚尺寸下只有约 6px 高，仅作肌理，可读的仍是导航那枚单字标。 */
.foot-mark { display: block; height: 40px; width: auto; flex: 0 0 auto; opacity: .92; }

.mission-logo { display: block; height: 46px; width: auto; flex: 0 0 auto; }

/* 一线秋油：包装正面核心符号为一道朱红竖线，官网延用为分隔符 */
.line-oil {
  display: flex; align-items: stretch; gap: 20px; margin: 0 0 18px;
}
.line-oil-bar { flex: 0 0 3px; background: var(--cinnabar); }
.line-oil-txt { flex: 1 1 auto; }
.line-oil-t {
  font-family: var(--serif); font-size: 1.5rem; color: var(--soy);
  letter-spacing: .2em; line-height: 1.35;
}
.line-oil-d { font-size: .9rem; color: var(--ink-2); margin-top: 6px; }
.line-oil-src { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3-ink); margin-top: 7px; }

/* ============================================================
   宣言式首屏　借鉴《方案一 · 东方宣纸朱砂》
   结构：英文小字 → 大标题（局部朱红强调）→ 英文副句 → 誓语 → 三格信息栏
   ============================================================ */
.claim-en {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .26em;
  color: var(--terra-ink); margin-bottom: 18px;
}
.claim {
  font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.1rem);
  color: var(--soy); line-height: 1.22; letter-spacing: .04em;
  margin: 0 0 16px;
}
.claim b { color: var(--cinnabar-ink); font-weight: 600; }
.claim-sub {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--ink-2); letter-spacing: .06em; margin-bottom: 14px;
}
.claim-oath {
  font-family: var(--serif); font-size: .96rem; color: var(--cinnabar-ink);
  letter-spacing: .2em; margin-bottom: 26px;
}

/* 三格信息栏：以竖线分隔，仿方案一的信息块 */
.plates {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.plate { padding: 0 26px; border-left: 1px solid var(--line-2); }
.plate:first-child { padding-left: 0; border-left: 0; }
.plate:last-child { padding-right: 0; }
.plate-t {
  font-family: var(--serif); font-size: 1.06rem; color: var(--soy);
  letter-spacing: .1em; line-height: 1.4;
}
.plate-t b { color: var(--cinnabar-ink); font-weight: 600; }
.plate-en {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--ink-3-ink); margin-top: 3px;
}

/* ============================================================
   性味谱专用　谱七
   同料异性味的对照链条：工序横向排列，性味纵向对照。
   ============================================================ */

/* 古籍原文引文块：与正文区分，明确标示这是照录 */
.quote {
  font-family: var(--serif); font-size: .95rem; line-height: 1.9;
  color: var(--soy); background: var(--paper-3);
  border-left: 2px solid var(--line-2);
  padding: 11px 15px; margin: 0;
}
.quote::before {
  content: '原文'; display: block;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  color: var(--ink-3-ink); margin-bottom: 5px;
}

/* 性味链：工序 → 性味，横向铺开 */
.taste-chain { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.taste-step {
  flex: 1 1 96px; min-width: 96px;
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 9px 10px; text-align: center;
}
.taste-step .taste-p {
  font-size: .8rem; color: var(--ink-2); line-height: 1.5;
  padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px dashed var(--line-2);
}
.taste-step .taste-q {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--terra-ink); letter-spacing: .1em; line-height: 1.3;
}
/* 与本厂工艺相关的条目，朱红标出 */
.taste-step.is-mark { border-color: var(--cinnabar-ink); background: rgba(140,58,37,.035); }
.taste-step.is-mark .taste-q { color: var(--cinnabar-ink); }

/* 原料条：名称 + 性味标签 */
.taste-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.taste-name { font-family: var(--serif); font-size: 1.22rem; color: var(--soy); letter-spacing: .08em; }
.taste-tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--cinnabar-ink); border: 1px solid var(--cinnabar);
  padding: 1px 8px; border-radius: 2px;
}

/* 警示型结论块（用于边界声明） */
.concl.warn { border-left-color: var(--terra-ink); }
.concl.warn strong { color: var(--terra-ink); }

/* ============================================================
   甲类三谱专用　谱一/二/五
   工艺链与索引：让「七站」「二十四词条」在视觉上成为序列，
   而不是并列的方块。
   ============================================================ */

/* 工艺链：横向序列，序号在最上，内容居中 */
/* 七站工艺链
   ------------------------------------------------------------
   改为纵向序列而非横排七栏，有三个理由：
     一 · 每站现在含参数、记录表、失控处置、词条索引四层内容，
         150px 一栏塞不下，横排会挤成一条缝。
     二 · **工序本身是先后关系，纵向才是正确的时间方向**。
         原来的横排把「择豆」与「验油」并列成同级，
         视觉上暗示它们可以独立——这与工艺事实不符。
     三 · 纵向序列让「失控处置」这类信息有地方展开，
         横排时它只能被压缩掉。

   左侧留一道朱砂竖线承「一线秋油」的符号，与序号呼应。 */
.chain {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-bottom: 16px;
}
.chain-step {
  background: var(--paper-2); padding: 15px 18px 16px;
  border-left: 3px solid var(--terra);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
}
/* 序号占左格，独立成列——七站的「一~七」是阅读顺序的锚点 */
.chain-no {
  grid-row: 1 / -1; grid-column: 1;
  font-family: var(--serif); font-size: 1.6rem; color: var(--terra);
  line-height: 1; opacity: .45; padding-top: .12em;
  text-align: center;
}
.chain-t {
  grid-column: 2;
  font-family: var(--serif); font-size: 1.14rem; color: var(--soy);
  letter-spacing: .14em; line-height: 1.35; margin-bottom: 5px;
}
.chain-d {
  grid-column: 2;
  font-size: .89rem; color: var(--ink-2); line-height: 1.76;
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px dashed var(--line-2);
}

/* 四层信息的标签：小字 + 极淡底，只做定位不抢视线 */
.chain-k {
  grid-column: 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  color: var(--ink-3-ink); margin-bottom: 2px;
}
.chain-k.is-fail { color: var(--cinnabar-ink); }
/* 标签与内容成对：内容紧跟其标签 */
.chain-k + .chain-p, .chain-k + .chain-r,
.chain-k + .chain-f, .chain-k + .chain-x { grid-column: 2; margin-bottom: 8px; }
.chain-p {
  font-size: .88rem; color: var(--ink); line-height: 1.76;
  background: var(--paper-3); padding: 8px 11px; border-radius: 2px;
}
.chain-p b { color: var(--cinnabar-ink); font-family: var(--mono); font-size: .93em; }
.chain-r {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-2);
  letter-spacing: .04em;
}
/* 失控处置：朱砂左边线 + 淡朱底，与参数区分开——
   这段是「出错时怎么办」，是全站最需要被看见的一层 */
.chain-f {
  font-size: .86rem; color: var(--ink-2); line-height: 1.74;
  border-left: 2px solid var(--cinnabar);
  background: rgba(140,58,37,.04); padding: 7px 11px;
}
.chain-f b { color: var(--cinnabar-ink); }
.chain-x { display: flex; flex-wrap: wrap; gap: 5px; }
.chain-x .idx-i { font-size: .7rem; }

/* 词条索引：按工艺环节分组，编号作为可点击的方块 */
.idx { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.idx-g {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2);
}
.idx-gt {
  flex: 0 0 auto; min-width: 106px;
  font-family: var(--serif); font-size: .95rem; color: var(--terra-ink);
  letter-spacing: .08em;
}
.idx-is { flex: 1 1 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.idx-i {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--ink-2); background: var(--paper-3);
  border: 1px solid var(--line-2); border-radius: 2px;
  padding: 1px 7px; text-decoration: none;
}
.idx-i:hover { color: var(--cinnabar-ink); border-color: var(--cinnabar-ink); }

/* 抽油窗口：两步，箭头相连 */
.window {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 18px 20px; margin-bottom: 16px;
}
.win-h { display: flex; align-items: stretch; gap: 14px; margin-bottom: 10px; }
.win-step { flex: 1 1 auto; text-align: center; padding: 12px 10px;
            border: 1px solid var(--line); background: var(--paper-3); }
.win-step.is-peak { border-color: var(--cinnabar-ink); background: rgba(140,58,37,.04); }
.win-k { font-size: .78rem; color: var(--ink-2); letter-spacing: .1em; margin-bottom: 4px; }
.win-v {
  font-family: var(--serif); font-size: 1.7rem; color: var(--soy);
  letter-spacing: .14em; line-height: 1.2;
}
.win-step.is-peak .win-v { color: var(--cinnabar-ink); }
.win-arrow { flex: 0 0 auto; display: flex; align-items: center;
             font-size: 1.1rem; color: var(--ink-3-ink); }
.win-note {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--ink-3-ink); text-align: center;
}

/* 四时卡片内的节气区间 */
.season-range {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--terra-ink); margin: 4px 0 6px;
}

/* ============================================================
   二十四节气盘 · 北极星指针
   左盘右面板：盘负责空间定位，面板负责承载七十二候的文字量。
   ============================================================ */

/* 旧的居中式容器保留给无面板的场合 */
.ring-wrap { display: flex; justify-content: center; margin: 4px 0 20px; padding: 0 8px; }
.ring-wrap svg { width: 100%; max-width: 500px; height: auto; }

/* 盘 + 面板：双栏 */
.ring-flex {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 30px; align-items: start; margin: 6px 0 22px;
}
/* 盘宽有上限时整体靠左，不让面板被压得太窄 */
@media (max-width: 1100px) and (min-width: 861px) {
  .ring-flex { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; }
}
.ring-flex .ring-wrap { margin: 0; padding: 0; align-items: flex-start; }
.ring-flex .ring-wrap svg {
  max-width: 100%; width: 100%; height: auto;
  cursor: pointer; outline: none;
}
.ring-flex .ring-wrap svg:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 6px; }

/* 可点击的节气标签 */
.rg-term { cursor: pointer; }
.rg-term .rg-txt { transition: fill .18s ease; }
/* 交互态优先级说明：
   hover / focus 只在「非激活」时改变底衬；激活项底衬恒为朱红，
   否则鼠标移上去会把朱红盖成米色，激活标记就丢了。 */
.rg-term:not(.is-active):hover .rg-txt { fill: var(--terra); }
.rg-term:not(.is-active):hover .rg-bg { fill: #F3ECDC; }
.rg-term:not(.is-active):focus-visible .rg-bg { fill: #F3ECDC; }
.rg-term:focus-visible { outline: none; }
.rg-term:not(.is-active):focus-visible .rg-txt { fill: var(--cinnabar); }
.rg-term.is-active .rg-txt { font-weight: 600; }
/* 深底分区内：hover 底衬不能是米色，那会在暗底上亮出一个白点 */
.deep .rg-term:not(.is-active):hover .rg-bg,
.deep .rg-term:not(.is-active):focus-visible .rg-bg { fill: #33291B; }
.deep .rg-term:not(.is-active):hover .rg-txt { fill: #D9B23C; }

/* 指针：切换时平滑转过去 */
.rg-needle polygon { transition: opacity .2s ease; }

/* 面板 */
.term-panel {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 15px 17px 13px;
}
.term-panel:empty::before {
  content: '点按盘上任一节气，或用方向键切换。';
  display: block; color: var(--ink-3-ink); font-size: .9rem; padding: 40px 0;
  text-align: center;
}
.tp-py {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  color: var(--ink-3-ink); margin-bottom: 2px;
}
.tp-name {
  font-family: var(--serif); font-size: 1.7rem; color: var(--soy);
  letter-spacing: .12em; line-height: 1.2; margin-bottom: 6px;
}
.tp-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.tp-meta span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-2); background: var(--paper-3);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 7px;
}
.tp-ety {
  font-size: .85rem; color: var(--ink-2); line-height: 1.75;
  padding: 8px 11px; background: var(--paper-3);
  border-left: 2px solid var(--terra); margin-bottom: 11px;
}
.tp-ety b {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .18em; color: var(--ink-3-ink); font-weight: 400; margin-bottom: 3px;
}

/* 三候列表 */
.hou-list { list-style: none; margin: 0 0 12px; padding: 0; }
.hou-list li {
  padding: 7px 0 8px; border-bottom: 1px dashed var(--line-2);
}
.hou-list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.hou-no {
  display: inline-block; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .16em; color: var(--cinnabar-ink); margin-bottom: 3px;
}
.hou-t {
  font-family: var(--serif); font-size: 1.02rem; color: var(--soy);
  letter-spacing: .06em; line-height: 1.4; margin-bottom: 4px;
}
.hou-d { font-size: .82rem; color: var(--ink-2); line-height: 1.7; }

.tp-src {
  font-size: .72rem; color: var(--ink-3-ink); line-height: 1.65;
  padding-top: 8px; border-top: 1px solid var(--line);
}

/* ============================================================
   此刻做什么 · 采士工艺提示条
   ------------------------------------------------------------
   与七十二候面板职责分离：
     面板 —— 古人如何观察这个节气
     本条 —— 此刻采士该做什么
   两条并置但不相混：一个是记录，一个是行动。
   ============================================================ */
.ring-craft {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--paper-2);
  border-left: 3px solid var(--line-2);
  padding: 9px 14px; margin: 12px 0 0;
}
.rc-k {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  color: var(--ink-3-ink); flex: 0 0 auto;
}
.rc-arrow { color: var(--ink-3-ink); flex: 0 0 auto; font-size: .9rem; }
.rc-w {
  font-family: var(--serif); font-size: 1.06rem; color: var(--soy);
  letter-spacing: .06em; flex: 1 1 auto; line-height: 1.45;
}
/* 在制：朱砂边 + 朱红工艺名 */
.ring-craft.is-on { border-left-color: var(--cinnabar-ink); background: rgba(140,58,37,.03); }
.ring-craft.is-on .rc-w { color: var(--cinnabar-ink); }
/* 在制／休制状态标 */
.rc-st {
  flex: 0 0 auto; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  border: 1px solid var(--line-2); color: var(--ink-3-ink);
  padding: 1px 7px; border-radius: 2px;
}
.ring-craft.is-on .rc-st { color: var(--cinnabar-ink); border-color: rgba(140,58,37,.45); }

/* 盘的操作提示 */
.ring-hint {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  color: var(--ink-3-ink); text-align: center; margin-top: 8px;
}
.ring-hint {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  color: var(--ink-3-ink); text-align: center; margin-top: 8px;
}

/* ============================================================
   十二谱目录　借鉴《方案一 · 东方宣纸朱砂》第五、六页
   ------------------------------------------------------------
   手法三条：
     一 · 谱名用大字，编号与英文小字挂在下面，视线自上而下
     二 · 每谱配一句朱红引文，不解释，只立态度
     三 · 米色底 + 细线分隔，不用卡片阴影
   未建的谱照列，标「未开始」——目录要看得见全貌。
   ============================================================ */

.sl-group { margin-bottom: 26px; }
.sl-group:last-child { margin-bottom: 0; }

/* 段首：甲／乙／丙 三分 */
.sl-gh {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line-2);
}
.sl-gk {
  font-family: var(--serif); font-size: 1.6rem; color: var(--terra-ink);
  line-height: 1; opacity: .42; flex: 0 0 auto;
}
.sl-gl {
  font-family: var(--serif); font-size: 1.04rem; color: var(--soy);
  letter-spacing: .16em;
}
.sl-gn {
  font-size: .84rem; color: var(--ink-2); margin: 8px 0 4px; line-height: 1.75;
}

/* 谱目列表 */
.sl-list { list-style: none; margin: 0; padding: 0; }
.sl-list li {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 16px; align-items: start;
  padding: 15px 0 16px; border-bottom: 1px solid var(--line);
}
.sl-list li:last-child { border-bottom: 0; }

/* 序号：淡陶土色，不抢视线 */
.sl-no {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
  color: var(--terra-ink); opacity: .5; padding-top: .42em;
}

/* 谱名：大字，链接态与未建态分明 */
.sl-name {
  font-family: var(--serif); font-size: 1.34rem; color: var(--soy);
  letter-spacing: .1em; line-height: 1.3;
}
.sl-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.sl-name a:hover { color: var(--cinnabar-ink); border-bottom-color: var(--cinnabar-ink); }
.sl-no-link { color: var(--ink-3-ink); }

/* 英文小字 */
.sl-en {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--ink-3-ink); margin-top: 4px;
}

/* 朱红引文：方案一最重的一手，只立态度 */
.sl-q {
  font-family: var(--serif); font-size: .98rem; color: var(--cinnabar-ink);
  letter-spacing: .04em; line-height: 1.72; margin-top: 9px;
}

/* 说明与依据 */
.sl-d {
  font-size: .87rem; color: var(--ink-2); line-height: 1.78; margin-top: 7px;
}
.sl-own {
  font-size: .79rem; color: var(--ink-3-ink); line-height: 1.72; margin-top: 5px;
}

/* 状态与入口 */
.sl-st { flex: 0 0 auto; padding-top: .38em; white-space: nowrap; }
.sl-go {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--cinnabar-ink); text-decoration: none;
  border: 1px solid rgba(140,58,37,.4); border-radius: 2px; padding: 3px 9px;
  display: inline-block;
}
.sl-go:hover { background: var(--cinnabar); color: var(--paper); }
.sl-todo {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--ink-3-ink); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 3px 9px; display: inline-block;
}
/* 未建项整体减淡，一眼看出进度 */
.sl-list li.is-todo .sl-name,
.sl-list li.is-todo .sl-q { color: var(--ink-3-ink); opacity: .78; }

/* ============================================================
   盐谱品种卡　借鉴《方案一 · 东方宣纸朱砂》第五页
   ------------------------------------------------------------
   圆印单字（谱名首字）+ 主名 + 编号 + 虚线短句。
   两套口径仍须可辨：现行菜单朱红，早期口径灰。
   ============================================================ */
.sc-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.sc-card {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 13px 15px 12px;
}
.sc-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }

/* 圆印：朱红描边 + 朱红字，现行口径用 */
.sc-seal {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.2px solid var(--cinnabar); color: var(--cinnabar-ink);
  font-family: var(--serif); font-size: .96rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding-top: 1px;
}
.sc-name {
  flex: 1 1 auto;
  font-family: var(--serif); font-size: 1.14rem; color: var(--soy);
  letter-spacing: .08em; line-height: 1.3;
}
.sc-code {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--ink-3-ink);
}

/* 说明句：虚线分隔，仿方案一的短句列表 */
.sc-line {
  font-size: .85rem; color: var(--ink-2); line-height: 1.76;
  padding-top: 8px; border-top: 1px dashed var(--line-2);
}
.sc-st {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--cinnabar-ink); margin-top: 7px;
}

/* 早期口径：整体减淡，圆印改灰 */
.sc-card.is-early { background: var(--paper-3); }
.sc-card.is-early .sc-seal { border-color: var(--line-2); color: var(--ink-3-ink); }
.sc-card.is-early .sc-name { color: var(--ink-2); }
.sc-card.is-early .sc-st { color: var(--ink-3-ink); }

/* 风土两层卡：与盐谱共用 .sc-card 底座，只加一条影响说明的样式。
   两层等宽并排，视觉上强调「并列的两件事」，不暗示主次。 */
.tr-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tr-card { display: flex; flex-direction: column; }
.tr-card .sc-line { flex: 1 1 auto; }
/* 影响说明：虚线之上，朱砂衬底，与方案一的引文处理一致 */
.tr-affect {
  font-family: var(--serif); font-size: .9rem; color: var(--cinnabar-ink);
  letter-spacing: .04em; line-height: 1.72;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed rgba(140,58,37,.3);
}

/* ============================================================
   借鉴方案一 HTML 版
   ------------------------------------------------------------
   一 · 十二格总览：正方形网格，先给全貌再给细节
   二 · 滚动揭示：淡入上移，且尊重 prefers-reduced-motion
   三 · 导航毛玻璃：滚动后导航半透明，视觉层级更清楚
   ============================================================ */

/* ── 十二格总览 ── */
.pu {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin: 4px 0 26px;
}
.pu .p {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line); background: var(--paper-2);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; position: relative;
  text-decoration: none; transition: border-color .25s, background .25s, transform .25s;
}
.pu .p:hover { border-color: var(--cinnabar-ink); transform: translateY(-3px); }
.pu .pu-gn {
  font-family: var(--serif); font-size: 1.06rem; color: var(--soy);
  letter-spacing: .1em; line-height: 1.2; text-align: center;
}
.pu .pu-gi {
  font-family: var(--mono); font-size: .54rem; letter-spacing: .12em;
  color: var(--ink-3-ink); text-align: center; line-height: 1.3;
}
/* 编号：右上角极小号，仅作定位用 */
.pu .pu-n {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--mono); font-size: .56rem;
  color: var(--ink-3-ink); opacity: .45;
}
/* 已建：朱红描边与谱名。未建：整体减淡 */
.pu .p.is-built { border-color: rgba(140,58,37,.32); }
.pu .p.is-built .pu-gn { color: var(--cinnabar-ink); }
.pu .p.is-built .pu-n { color: var(--cinnabar-ink); opacity: .6; }
.pu .p.is-built:hover { background: rgba(140,58,37,.04); }
.pu .p:not(.is-built) { background: var(--paper-3); cursor: default; }
.pu .p:not(.is-built) .pu-gn { color: var(--ink-3-ink); }
.pu .p:not(.is-built):hover { transform: none; border-color: var(--line); }

@media (max-width: 900px) { .pu { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .pu { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* ── 滚动揭示 ── */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
/* 无 JS 时必须全部可见，否则内容消失——用 noscript 兜底 */
.no-js .reveal { opacity: 1; transform: none; }
/* 尊重系统的减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 导航毛玻璃：滚动后加 scrolled ── */
.nav.scrolled {
  background: rgba(247,243,234,.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav { transition: background .3s, box-shadow .3s, padding .3s; }

/* 导航滚过深底分区时自身也转深色，否则一条米色横杠压在暗底上很割裂。
   做法：不靠 JS 监听位置，而是让导航在深底分区内「借」它的变量——
   深底 section 上方的兄弟节点取不到 section 的变量，所以这里改用
   .nav.on-deep 类，由脚本按分区位置切换（见 site.js）。 */
.nav.on-deep {
  background: rgba(23,18,9,.9);
  border-bottom-color: #2E2417;
}
.nav.on-deep .brand,
.nav.on-deep .brand small { color: #E8C98C; }
.nav.on-deep .brand-logo { filter: brightness(1.7) saturate(.7); }
.nav.on-deep .nav-links a { color: #C4B08A; }
.nav.on-deep .nav-links a:hover { color: #E8C98C; }
.nav.on-deep .nav-links a[aria-current="page"] { color: var(--cinnabar-ink); }
.nav.on-deep .nav-cta { border-color: var(--cinnabar-ink); color: var(--cinnabar-ink); }
.nav.on-deep .nav-cta:hover { background: #C25A42; color: #171209; }
.nav.on-deep .nav-toggle { border-color: #4C3C27; color: #C4B08A; }
.nav.on-deep.scrolled {
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 #2E2417;
}
/* 导航落在暗场英雄区之上时再让一步：整条透明。
   方案一里导航直接浮在暗场上；若保留 rgba(23,18,9,.9) 的深色底，
   会在暗场顶部压出一条比暗场更深的横带。滚动之后 .scrolled 接管，
   恢复半透明深底 + 模糊，保证后续内容滚过时文字仍可读。 */
.nav.on-deep:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 暗场上的导航与品牌字：站内默认的 #C4B08A 是为「深底 section」配的，
   压在近黑的英雄区上偏灰；方案一用的是更亮的 #D9CBAE。品牌字标同理——
   默认的 brightness(1.7) 会把朱砂印洗成粉，收到 1.35 保住品牌红。 */
.nav.on-deep .nav-links a { color: #D9CBAE; letter-spacing: .08em; }
.nav.on-deep .nav-cta { color: #D9CBAE; border-color: rgba(217,203,174,.45); }
.nav.on-deep .brand-logo { filter: brightness(1.35) saturate(.9); }
.nav.on-deep .claim-en,
.deep .claim-en { color: #B6A688; }
.deep .eyebrow { letter-spacing: .3em; }
/* 书法标识已是分色资源，不受任何亮度滤镜影响——滤镜会把宣纸色洗成近白、
   把墨色冲淡。这一条覆盖同一区块内的旧规则；print 段那条 !important
   由后面的覆盖块处理。 */
.nav.on-deep .brand-mark,
.on-paper .brand-mark,
.deep .brand-mark,
.deep .foot-mark { filter: none; }
/* 移动端展开菜单同理，否则深底上掉下一块米色面板 */
@media (max-width: 820px) {
  .nav.on-deep .nav-links {
    background: #171209; border-bottom-color: #2E2417;
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
  }
  .nav.on-deep .nav-links a { border-bottom-color: #2E2417; }
  .nav.on-deep .nav-group.is-open .nav-menu {
    background: transparent; border-bottom-color: #2E2417;
  }
}

/* 空态 */
.empty {
  border: 1px dashed var(--line-2); background: var(--paper-2);
  padding: 34px 24px; text-align: center;
}
.empty h4 { color: var(--ink-2); margin-bottom: .4em; }
.empty p { font-size: .88rem; color: var(--ink-3-ink); max-width: 46ch; margin: 0 auto 1em; }

/* 导航内小锚点 */
.anchors { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.anchors a {
  font-size: .8rem; padding: 4px 11px; border: 1px solid var(--line-2);
  border-radius: 2px; color: var(--ink-2); background: var(--paper-2);
}
.anchors a:hover { border-color: var(--cinnabar-ink); color: var(--cinnabar-ink); }

/* 英雄区 · 东方宣纸朱砂（方案一）
   ------------------------------------------------------------
   做法：不新增一套深色变量，直接复用站内已有的 .deep 作用域——
   HTML 上给 <header class="hero deep">，色板即整块反转。
   .deep 里 .hero 会被 :where() 降到 0 特异性，所以下面这几条
   用普通选择器即可覆盖，不需要 !important。

   一处结构性调整：英雄区上移 var(--nav-h)，让 sticky 导航浮在
   暗场之上（方案一的构图）。否则导航是一条米色横杠压着暗场。
   导航随后的自动转色由 site.js 的 on-deep 逻辑负责。 */
:where(.deep).hero {
  /* position:relative 必须留着：英雄区里的落款印、竖排字、滚动提示
     都是 position:absolute，靠这一条才有定位参照。删掉它的后果不是
     「稍微错位」，而是它们改以初始包含块为参照——直接飞出页面。 */
  position: relative;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 76px) 0 78px;
  border-bottom: 0;
  overflow: hidden;
  /* 暖光两层（朱砂偏右上、黄铜偏左下）+ 宣纸颗粒 + 极暗基色 */
  background:
    radial-gradient(80% 60% at 78% 18%, rgba(168,48,42,.22), transparent 60%),
    radial-gradient(70% 70% at 10% 90%, rgba(138,106,59,.18), transparent 55%),
    radial-gradient(rgba(255,255,255,.055) 0.6px, transparent 0.7px),
    var(--paper);
  background-size: auto, auto, 3px 3px, auto;
}
.hero > .wrap { width: 100%; }
/* 首页英雄区占满一屏；内页只做一条暗色题头 band，
   避免读者在每一页都要先滑过一整屏暗场才能读到内容。 */
:where(.deep).hero.is-tall {
  min-height: clamp(600px, 92vh, 900px);
  display: flex; align-items: center;
}
:where(.deep).hero:not(.is-tall) { padding: calc(var(--nav-h) + 58px) 0 54px; }

/* 暗场上的标题层次（方案一：朱砂作强调字，其余走金）
   注：浅底的 --cinnabar-ink 在 .deep 里被换成 #CE7B68 提亮档，
   那个值给「可读的小字」用；这里是大号标题，用品牌朱砂原色
   #A8302A 才够正、够沉——与方案一 .hero h1 .zhu 一致。 */
.deep .claim b,
.deep .claim .zhu { color: var(--cinnabar); }
.deep .claim-sub { color: #D9CBAE; }
.deep .claim-oath { color: #B6A688; letter-spacing: .3em; }

/* 英雄区大字（方案一：字重 300，行高 1.08，最大 5.6rem ≈ 90px） */
.hero .claim {
  font-weight: 300;
  font-size: clamp(2.3rem, 6.6vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: .02em;
  margin-bottom: .26em;
}
.hero .claim-en { margin-bottom: 26px; opacity: .92; }
.hero .claim-sub { font-size: clamp(1.05rem, 2.1vw, 1.6rem); margin-bottom: 14px; }
.hero .claim-oath { margin-bottom: 0; }

.hero h1 { margin-bottom: .3em; }
.hero .sub { font-size: 1.12rem; color: var(--ink-2); max-width: 640px; line-height: 1.9; }

/* 英雄区落款（方案一） */
.hero-seal {
  position: absolute; right: 6%; bottom: 13%; width: 96px; height: 96px;
  font-size: 38px; z-index: 3; opacity: .95;
  box-shadow: inset 0 0 0 1.5px rgba(236,226,206,.3), 0 2px 10px rgba(126,33,28,.35);
}
.hero-vert {
  position: absolute; right: 3.5%; top: 46%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px,3vw,32px); letter-spacing: .55em;
  color: rgba(217,203,174,.5); white-space: nowrap; z-index: 2;
}
.claim-en { font-family: var(--display); letter-spacing: .06em; }
.claim-sub { font-family: var(--display); font-style: italic; letter-spacing: .02em; }

/* 滚动提示（方案一） */
.hero-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .3em;
  color: #8D8068; pointer-events: none;
}
.hero-cue i { width: 1px; height: 34px; background: linear-gradient(#8A6A3B, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-cue i { animation: cuedrop 2s infinite; }
}
@keyframes cuedrop {
  0%   { opacity: 0; transform: scaleY(.2); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px) scaleY(.4); }
}

/* 节气订阅（方案一「陆 · 节气订阅」版面）
   ------------------------------------------------------------
   版式取自方案一：居中的小标 + 大字 + 说明 + 单行表单 + 一句注脚。
   颜色一律走站内令牌，只换排布与字号——方案一用的 #8C3A25 朱砂
   与本站 --cinnabar(#A8302A) 是同一支，不必另立变量。
   表单的 id/结构保持原样（#subform / #subemail / #submsg），
   site.js 里的校验逻辑因此无需改动。 */
.sub {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  text-align: center;
}
/* 注意：英雄区里的副标题也叫 .sub（<p class="sub">），
   上面的 text-align:center 会顺着类名漏到英雄区里，把本该左对齐的
   副标题居中。这里显式拉回左对齐——英雄区永远是左对齐版式。 */
.hero .sub { text-align: left; }
.sub .zh-kicker {
  display: block;
  font-family: var(--serif); font-size: .82rem; font-weight: 500;
  letter-spacing: .5em; text-indent: .5em; color: var(--cinnabar-ink);
}
.sub .big {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.32; letter-spacing: .04em;
  margin: 18px 0 16px;
}
.sub .big b { font-weight: 600; color: var(--cinnabar-ink); }
.sub .lede { margin: 0 auto 26px; max-width: 660px; }

.sub .subform { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 560px; margin: 0 auto; }
.sub .subform input {
  flex: 1 1 240px; min-width: 0;
  border: 1px solid var(--ink); border-radius: 4px; padding: 13px 15px;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: .95rem;
}
.sub .subform input::placeholder { color: var(--ink-3-ink); }
.sub .subform .btn { flex: 0 0 auto; padding: 0 30px; letter-spacing: .12em; }

.sub .subnote {
  margin-top: 16px;
  font-family: var(--display); font-style: italic; font-size: 1.05rem;
  letter-spacing: .04em; color: var(--terra-ink);
}
.sub .form-msg { text-align: center; }
/* 提交成功后收起表单，只留确认语（对应方案一的 .subok） */
.sub .subform.is-done { display: none; }
/* 页脚前的最后一节：底色仍属浅底，但用一道朱砂细线收口，
   与页脚的暗场形成切换，不让两块浅底直接贴上 */
.sub + .foot { border-top: 0; }

@media (max-width: 1024px) { .hero-vert { display: none; } }
@media (max-width: 760px) {
  :where(.deep).hero { padding: calc(var(--nav-h) + 52px) 0 60px; }
  .hero-seal { width: 64px; height: 64px; font-size: 26px; right: 7%; bottom: 11%; }
  .hero-cue { display: none; }
}

.rule { height: 1px; background: var(--line); margin: 2rem 0; border: 0; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mt2 { margin-top: 2rem; } .mb0 { margin-bottom: 0; }
.hide { display: none !important; }

/* ============================================================
   站内地图 · 三根柱子
   ------------------------------------------------------------
   动因：站内二十个页面原先在导航里平铺，看起来像二十个并列入口，
   读者看不出哪些是「买之前必须知道的」。
   分组依据是读者所处阶段（买之前 / 买回去 / 我们的方法论），
   **不是我们想强调什么** —— 这条决定了它不该带宣传语气。

   手法沿用既有词汇：朱红大序号（承五守的「壹肆」）+
   谱名加粗 + 宽字距，不引入新的装饰。
   ============================================================ */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 0 0 4px;
}
.pillar { background: var(--paper-2); padding: 20px 22px 18px; display: flex; flex-direction: column; }

.pillar-hd { display: flex; align-items: baseline; gap: 13px; margin-bottom: 8px; }
/* 序号用朱红大写数字，承五守的「壹」「肆」手法 */
.pillar-no {
  font-family: var(--serif); font-size: 1.85rem; color: var(--cinnabar-ink);
  line-height: 1; opacity: .85; flex: 0 0 auto; user-select: none;
}
.pillar-t {
  font-family: var(--serif); font-size: 1.24rem; color: var(--soy);
  letter-spacing: .16em; line-height: 1.3;
}
.pillar-en {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  color: var(--ink-3-ink); margin-top: 3px;
}
.pillar-d {
  font-size: .85rem; color: var(--ink-2); line-height: 1.74;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
}

.pillar-l { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.pillar-l li { border-bottom: 1px solid var(--line); }
.pillar-l li:last-child { border-bottom: 0; }
.pillar-l a {
  display: block; padding: 9px 2px; border: 0;
  text-decoration: none; transition: background .18s ease;
}
.pillar-l a:hover { background: rgba(140,58,37,.05); }
/* 页面名加粗，说明压一行小字 —— 两层就够，不加图标不加箭头 */
.pillar-l b {
  display: block; font-family: var(--serif); font-size: 1rem;
  color: var(--soy); letter-spacing: .08em; font-weight: 600; line-height: 1.4;
}
.pillar-l a:hover b { color: var(--cinnabar-ink); }
.pillar-l span {
  display: block; font-size: .78rem; color: var(--ink-3-ink);
  line-height: 1.62; margin-top: 2px;
}

/* 深底区里的三根柱子（若日后整节转深底） */
.deep .pillars { background: var(--line); }
.deep .pillar { background: var(--paper-2); }
.deep .pillar-d { color: var(--ink-2); border-bottom-color: var(--line-2); }
.deep .pillar-l li { border-bottom-color: var(--line); }
.deep .pillar-l a:hover { background: rgba(194,90,66,.09); }
.deep .pillar-l a:hover b { color: var(--cinnabar-ink); }

/* ============================================================
   深浅分区 · 深底（夜缸）
   ------------------------------------------------------------
   借鉴《方案一》的深浅分区：全站单一浅宣纸底久了像摊开的书；
   酿造这件事有一半时间发生在夜里——落露、降温、星位。
   因此设一处深底分区，专放与「夜」有关的段落。

   实现要点：不改组件，只在 .deep 作用域内反转 CSS 变量。
   组件全部引用 var()，所以变量一换，文字线框底色自动跟着走。
   这是变量化样式系统的红利——若当初写的是硬编码色值，
   这一处反转就要改几百行。

   色值：
     深褐底 #171209（比 --soy 更暗，不是纯黑，保留酱油的暖调）
     宣纸字 #E8C98C（金，非纯白——白字在深底上会发冷）
   刻意保留的深底色：朱砂不变（#8C3A25 在深底上仍可辨，且是品牌唯一强调色）
   ============================================================ */
.deep {
  --paper:      #171209;
  --paper-2:    #221A10;
  --paper-3:    #2E2417;
  --ink:        #E8C98C;
  --ink-2:      #C4B08A;
  --ink-3:      #94805E;
  --line:       #3A2E1E;
  --line-2:     #4C3C27;
  --soy:        #E8C98C;
  --terra:      #C08A5C;

  /* 深底侧的前景色：浅底那套值搬到暗底上不够亮，必须另给一组。
     --terra-ink 沿用深底陶土 #C08A5C（对 #171209 = 6.24，本就达标）；
     --ink-3-ink 用 #A08A62（实测 on #171209 = 6.09）；
     --warn-ink 与朱砂提亮档，保证在 paper-2 / paper-3 底衬上也过 4.8。 */
  --terra-ink: #C08A5C;
  --ink-3-ink: #A08A62;
  --warn-ink:  #CE7B68;
  /* 深底上朱砂作文字（#8C3A25 在暗底上仅 2.25），单独一档；
     作边框与底衬时仍用原色 #8C3A25，不受影响 */
  --cinnabar-ink: #CE7B68;

  background: var(--paper);
  color: var(--ink);
  /* 深底上宣纸噪点不可见，改用极淡的暖光，避免大片死黑 */
  background-image:
    radial-gradient(circle at 15% 22%, rgba(232,201,140,0.028) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 64%, rgba(232,201,140,0.022) 0 1px, transparent 1px);
  background-size: 47px 47px, 61px 61px;
}
/* 深底区内几个必须单独处理的点 */
.deep .seal { background: var(--cinnabar); color: var(--paper); }
/* 输入框在深底上不能是白底，否则像贴了张白纸 */
.deep input[type="text"],
.deep input[type="email"],
.deep input[type="search"] {
  background: #100C06; color: var(--ink); border-color: var(--line-2);
}
.deep input::placeholder { color: #6E5D43; }
/* 时间轴的圆点用纸色填充，深底上会变成一个亮点，改用深褐 */
.deep .timeline > li::before { background: var(--paper); }
/* 表格与卡片靠边框在深底上区分，底色要更贴近底 */
.deep table.tbl { background: var(--paper-2); }
.deep table.tbl th { background: var(--paper-3); }
/* 深底区的分节线要更暗，否则像把浅色页缝粘在一起 */
.deep + section { border-top-color: rgba(76,60,39,.5); }
section.deep + section { border-top-color: rgba(76,60,39,.5); }
/* 深底区里滚动揭示的入场，从下方来才不突兀 */
.deep .reveal { transform: translateY(14px); }
/* 深底区内朱砂色的注记加重，否则在暗底上偏灰 */
.deep .concl b, .deep .note b { color: var(--cinnabar-ink); }
.deep a { border-bottom-color: rgba(194,90,66,.4); }

/* 深底上朱砂本身要提亮：#8C3A25 是为浅底调的，
   直接拿来当暗底上的强调色会糊成一片。 */
.deep .season .cn b,
.deep .claim b,
.deep .vow-name b,
.deep .sl-q,
.deep .claim-oath,
.deep .tp-name { color: var(--cinnabar-ink); }
.deep .season { border-left-color: #C08A5C; }
.deep .eyebrow { color: #C08A5C; }
.deep .plate-t b, .deep .tp-ety, .deep .hou-no { color: var(--cinnabar-ink); }
.deep .ring-craft.is-on { background: rgba(194,90,66,.07); }
.deep .tag { background: rgba(232,201,140,.05); }

/* 深底分区里的标题下加一道细金线：这是东方版式的收束手法 */
.deep h2 { position: relative; padding-bottom: .5em; }
.deep h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px; background: var(--cinnabar);
}

/* ── 深底的交互态 ──
   一批组件的 hover 底色是「深色半透明叠加」（rgba(51,32,15,.07)），
   这类写法只在浅底成立——铺到深底上等于没铺，鼠标移上去毫无反应。
   深底要反过来用浅色叠加。这批组件全站共 20 处，是最容易漏的一类。 */
.deep .btn.ghost:hover { background: rgba(232,201,140,.09); }
.deep .btn.ghost { border-color: var(--cinnabar-ink); color: var(--cinnabar-ink); }
.deep details.acc > summary:hover { background: rgba(232,201,140,.05); }
.deep .unknown b { color: var(--cinnabar-ink); }
.deep .timeline .now::before { box-shadow: 0 0 0 4px rgba(194,90,66,.18); }
/* 折叠项展开后的正文与摘要之间要有分隔，否则深底上看不出层级 */
.deep details.acc .acc-body { border-top-color: var(--line); }
/* 表格斑马线在深底上用极淡的亮色交替 */
.deep table.tbl tbody tr:nth-child(even) { background: rgba(232,201,140,.022); }
/* 空态与虚线块：深底上虚线要更松才看得见 */
.deep .empty, .deep .unknown { border-color: var(--line-2); }
/* 统计块的网格缝隙靠 --line，变量已反转，无需额外处理 */
.deep .stat .v { color: #E8C98C; }

/* 深底分区里若有 img 类的浅底图（logo / 插图），加一层提亮，
   否则深色像素会消失在深底上。这里覆盖品牌标识图。 */
.deep .brand-logo,
.deep .foot-logo,
.deep .mission-logo { filter: brightness(1.55) saturate(.75); }

/* ---------------- 响应式 ---------------- */

/* 桌面端菜单常驻显示，不折叠。
   断点由 900px 下移至 820px：九项导航在 1024px 仍可单行排开。 */
@media (max-width: 820px) {
  /* 「菜单」按钮重新启用：窄屏改用抽屉收纳，理由见 design-v3.css 第十七节。
     横向滚动的旧方案在这批 HTML 上实测有硬伤——「禾膳录」二级面板是
     absolute 居中定位、min-width 470px，390 宽下右边缘落到 562px，
     13 个谱目全部在视口外，一个都点不到。且横向滚动会把 8 个入口
     藏进不可见的溢出区，用户无从知晓。
     这条 !important 原本用来压制半成品按钮，功能补完后已无必要，
     特此去掉，改由 design-v3.css 承担最终裁决。 */
  .nav-toggle { display: none; }
  .nav-in { gap: 14px; }
  .brand-logo { height: 56px; width: auto; }        /* 略缩小给链接让位 */
  /* 书法标识横向比旧字标宽（797:398），窄屏一并收小，避免挤掉导航项 */
  .brand-mark { height: 26px; }
  .foot-mark { height: 32px; }

  .nav-links {
    flex: 1 1 auto; flex-wrap: nowrap; gap: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                           /* Firefox 隐藏滚动条 */
  }
  .nav-links::-webkit-scrollbar { display: none; }   /* WebKit 隐藏滚动条 */
  .nav-links a {
    white-space: nowrap; border-bottom: 0; padding: 4px 0;
    font-size: .92rem;
  }
  .nav-links a::after { display: block; }             /* 恢复悬停/当前页下划线 */

  .nav-cta { display: inline-block !important; flex: 0 0 auto; white-space: nowrap; }

  /* 禾膳录：窄屏仍保留点击展开（触屏无 hover），
     但改为绝对浮层，不再撑高横滚行。 */
  .nav-group { flex: 0 0 auto; position: relative; }
  .nav-group > a { display: inline-block; white-space: nowrap; }
  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    transform: none !important; min-width: 0; width: min(86vw, 320px);
    opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
    padding: 0; margin: 0; border: 0; box-shadow: none;
    background: transparent; display: block;
    transition: max-height .25s ease, opacity .2s ease, visibility .2s;
  }
  .nav-group:hover .nav-menu,
  .nav-group:focus-within .nav-menu { max-height: 0; opacity: 0; visibility: hidden; }
  .nav-group.is-open .nav-menu,
  .no-js .nav-group .nav-menu {
    max-height: 660px; opacity: 1; visibility: visible;
    padding: 12px; margin: 4px 0;
    background: var(--paper); border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(51,32,15,.16);
  }
  .nav-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
  .nav-menu-grid a { padding: 8px 6px; }
  .nav-menu-hd, .nav-menu-ft { font-size: .72rem; }
}
@media (max-width: 1024px) and (min-width: 821px) {
  .nav-links { gap: 13px; }
  .nav-links a { font-size: .81rem; }
  .nav-in { gap: 16px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  section { padding: 44px 0; }
  .hero { padding: 52px 0 44px; }
  .wrap, .nav-in, .foot-in { padding: 0 18px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .stat .v { font-size: 1.28rem; }
  /* 信息栏改 2 列网格，换行时不会出现半截竖线 */
  .plates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; padding: 12px 0; }
  .sc-cards { grid-template-columns: 1fr; gap: 10px; }
  .pu .pu-gn { font-size: .92rem; }
  /* 三根柱子窄屏改单列：三栏并排在390px 下每栏不足 110px，
     谱名（「中西互鉴」四字）会折行，读起来碎。 */
  .pillars { grid-template-columns: 1fr; }
  .pillar { padding: 16px 17px 14px; }
  .pillar-no { font-size: 1.6rem; }
  .pillar-t { font-size: 1.16rem; }
  .tr-cards { grid-template-columns: 1fr; }
  /* 十二谱窄屏：状态列移入名称行下方，三列改两列 */
  .sl-list li { grid-template-columns: 30px minmax(0,1fr); gap: 11px; }
  .sl-st { grid-column: 2; padding-top: 8px; }
  .sl-name { font-size: 1.2rem; }
  /* 节气盘窄屏改单栏：盘在上，面板在下 */
  .ring-flex { grid-template-columns: 1fr; gap: 16px; }
  .term-panel { min-height: 0; }
  .tp-name { font-size: 1.6rem; }
  /* 工艺链窄屏两列；单列过窄且看不出序列关系 */
  /* 七站已改为纵向序列（见 .chain 定义），
     窄屏不再改两列——两列会把工序的先后关系再次压平。 */
  .chain { grid-template-columns: 1fr; }
  .chain-step { padding: 13px 14px 14px; grid-template-columns: 32px minmax(0,1fr); column-gap: 11px; }
  .chain-no { font-size: 1.3rem; }
  .chain-t { font-size: 1.08rem; }
  .chain-d { font-size: .85rem; }
  .chain-p { font-size: .84rem; padding: 7px 9px; }
  .chain-f { font-size: .82rem; padding: 6px 9px; }
  /* 索引组标题独占一行，编号在下 */
  .idx-g { flex-direction: column; gap: 5px; align-items: flex-start; }
  .idx-gt { min-width: 0; }
  /* 抽油窗口改纵向，箭头转向下 */
  .win-h { flex-direction: column; gap: 8px; }
  .win-arrow { justify-content: center; transform: rotate(90deg); height: 14px; }
  /* 性味链在窄屏改两列强制网格：flex + min-width 在此仍会溢出，
     须用 grid 才能保证末格换行对齐 */
  .taste-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .taste-step { min-width: 0; }
  .taste-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plate { padding: 0 12px; border-left: 0; }
  .plate:nth-child(odd) { padding-left: 0; }
  .plate:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line-2); }
  .plate:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 12px; }
  .plate-t { font-size: .95rem; letter-spacing: .06em; }
  .plate-en { font-size: .55rem; letter-spacing: .14em; }

  .btn { width: 100%; }
  .form-row { flex-wrap: wrap; }
  .form-row > input { flex: 1 1 100%; }
  .form-row .btn { width: 100%; }
}

@media print {
  .nav, .foot, .btn, .form-row { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; border: 0; }
  section { padding: 18px 0; page-break-inside: avoid; }

  /* 深底分区必须单独处理：否则整块输出成黑底黑字，打出来是废纸。
     打印用不着深浅节奏，只求黑字白纸可读，所以这里把它整体拉回浅底。
     **关键是必须重置变量，而不只是改 background**——
     .note / .card 等组件的底色来自 --paper-2，只改 background 会被
     组件自身的底色规则盖过去（实测：.note 在打印时仍是黑底）。
     变量在 .deep 作用域内重新定义一次，所有组件自动跟着走。 */
  .deep {
    --paper: #fff; --paper-2: #fff; --paper-3: #f4f4f4;
    --ink: #000; --ink-2: #333; --ink-3: #666;
    --line: #999; --line-2: #bbb;
    --soy: #000; --terra: #333;
    background: #fff !important;
    background-image: none !important;
    color: #000;
  }
  .deep .card, .deep .rule-block, .deep .note, .deep .concl { background: #fff !important; }
  .deep .ink, .deep h1, .deep h2, .deep h3, .deep h4 { color: #000 !important; }
  .deep .lede, .deep .chain-d, .deep .sl-d, .deep .sl-own,
  .deep .tp-src, .deep .hou-d, .deep .sc-line, .deep .vow-d { color: #333 !important; }
  .deep .eyebrow, .deep .chain-no, .deep .sl-no, .deep .ring-hint,
  .deep .chart-cap, .deep .sl-en { color: #666 !important; }
  .deep .concl b, .deep .note b, .deep .claim b, .deep .sl-q,
  .deep .vow-name b, .deep .season .cn b, .deep .tp-name { color: #000 !important; }
  /* 深底的朱砂色边框与底衬，打印时用灰阶表达层级即可 */
  .deep .concl, .deep .note, .deep .rule-block,
  .deep table.tbl, .deep table.tbl th { border-color: #999 !important; }
  .deep table.tbl { background: #fff !important; }
  .deep table.tbl th { background: #f4f4f4 !important; }
  .deep table.tbl tbody tr:nth-child(even) { background: #fafafa !important; }
  /* 深底里的 logo 是位图，filter 提亮只影响屏幕，打印须换回原色 */
  .deep .brand-logo, .deep .foot-logo, .deep .mission-logo { filter: none !important; }
  /* 书法标识本就分色，打印同样不套滤镜 */
  .brand-mark, .foot-mark { filter: none !important; }
  .deep h2::after { background: #000 !important; }
}