/* ============================================================
   组件层 —— 导航 / 泼墨首屏 / 按钮 / 卡片 / 修身路径
              / 六十四卦矩阵 / 印章 / 标签 / 页脚
   ============================================================ */

/* ---------------- 顶栏 ---------------- */

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(248,245,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); height:74px;
}
.brand{ display:flex; align-items:center; }
.brand__logo{ display:block; height:38px; width:auto; }

.nav{ display:flex; align-items:center; gap:var(--sp-5); }
.nav a{
  position:relative; padding:6px 1px;
  font-size:var(--fs-sm); color:var(--ink); letter-spacing:.1em;
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--green); transition:right var(--t);
}
.nav a:hover::after,.nav a.is-active::after{ right:0; }
.nav a.is-active{ color:var(--ink); }

@media (max-width:1040px){
  .brand__logo{ height:32px; }
  .nav{ gap:var(--sp-4); }
  .nav a{ font-size:var(--fs-xs); letter-spacing:.06em; }
}
@media (max-width:760px){
  .topbar__inner{ height:auto; padding:var(--sp-3) 0; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
  .nav{ width:100%; overflow-x:auto; gap:var(--sp-2); padding-bottom:2px; }
  /* 移动端触控目标加大至约 44px */
  .nav a{ padding:12px 10px; font-size:var(--fs-sm); }
}

/* ---------------- 阶段提示条 ---------------- */

.notice{
  background:var(--yellow-wash);
  border-bottom:1px solid var(--yellow-line);
  font-size:var(--fs-xs); color:var(--ink-soft);
}
.notice__inner{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:9px 0; flex-wrap:wrap;
}
.notice__dot{
  width:6px; height:6px; border-radius:50%; background:var(--yellow-deep); flex:0 0 6px;
}

/* ---------------- 泼墨首屏 ---------------- */

.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding:var(--sp-10) 0 var(--sp-9);
}
.hero__art{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__art svg{ width:100%; height:100%; }
/* 左侧宣纸渐晕，保证正文对比度不被墨晕吃掉 */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, var(--paper) 6%, rgba(248,245,238,.86) 34%, rgba(248,245,238,.28) 62%, transparent 88%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--sp-8); align-items:center;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--kai); font-size:var(--fs-sm);
  letter-spacing:var(--ls-wide); color:var(--green-deep);
  margin-bottom:var(--sp-5);
}
.hero__eyebrow::after{ content:""; width:56px; height:1px; background:var(--green-line); }
.hero__title{ font-size:var(--fs-hero); line-height:1.24; letter-spacing:.03em; }
.hero__title .hl{
  background:linear-gradient(transparent 64%, var(--yellow-wash) 64%);
  padding:0 .1em;
}
.hero__sub{
  margin-top:var(--sp-5); max-width:30em;
  font-size:var(--fs-lg); line-height:var(--lh-mid); color:var(--ink-soft);
}
.hero__actions{ margin-top:var(--sp-7); display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.hero__meta{
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  display:flex; gap:var(--sp-7); flex-wrap:wrap;
}
.hero__meta dt{ font-size:var(--fs-micro); letter-spacing:.2em; color:var(--ink-mute); margin-bottom:2px; }
.hero__meta dd{ margin:0; font-size:var(--fs-lg); letter-spacing:.06em; }

/* 首屏官方总图（先天六十四卦方圆图） */
.hexmark{ display:grid; justify-items:center; gap:var(--sp-5); }
.hexmark__img{
  width:min(300px,72vw); height:auto; display:block;
  filter:drop-shadow(0 2px 14px rgba(20,20,20,.08));
}
.hexmark__name{ font-size:18px; letter-spacing:.16em; white-space:nowrap; }

/* 独立卦符（卦详情预览等） */
.hex-block{ display:inline-flex; color:var(--ink); }

@media (max-width:1040px){
  .hero__inner{ grid-template-columns:1fr; gap:var(--sp-8); }
  .hexmark{ order:-1; }
}

/* ---------------- 按钮 ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:13px 27px; border-radius:var(--r-sm);
  font-family:var(--serif); font-size:var(--fs-sm); letter-spacing:.14em;
  /* 行高显式声明：<button> 会被 UA 的 font 简写重置为 normal，比 <a> 矮 7px */
  line-height:var(--lh-body);
  border:1px solid transparent; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}
/* 绿底黑字（5.3:1，AA）；hover 提亮而非压暗，避免黑字失对比 */
.btn--primary{ background:var(--green); border-color:var(--green); color:var(--ink); }
.btn--primary:hover{ background:var(--green-hover); border-color:var(--green-hover); color:var(--ink); }
.btn--ghost{ background:transparent; border-color:rgba(20,20,20,.28); color:var(--ink); }
.btn--ghost:hover{ background:var(--paper-2); border-color:var(--ink); color:var(--ink); }
.btn--yellow{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.btn--yellow:hover{ background:var(--yellow-hover); border-color:var(--yellow-hover); color:var(--ink); }
.btn--sm{ padding:9px 18px; font-size:var(--fs-xs); }
/* 按钮行：优先排成一行，宽度不够时按序换行（不做等宽拉伸） */
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }

/* ---------------- 卡片 ---------------- */

.card{
  position:relative; padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 8px);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color var(--t), background var(--t);
}
.card::before{
  content:""; position:absolute; left:0; top:var(--sp-4); bottom:var(--sp-4);
  width:3px; background:var(--green); border-radius:0 2px 2px 0;
}
.card--yellow::before{ background:var(--yellow); }
.card:hover{ background:#fffdf8; border-color:var(--green-line); }
.card__title{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); }
.card__text{ font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); }
.card__index{
  font-family:var(--kai); font-size:var(--fs-sm);
  color:var(--green-deep); letter-spacing:.2em; margin-bottom:var(--sp-2);
}

.grid{ display:grid; gap:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
/* 纵向独占堆叠：原并列 grid 的两块改为上下各占一行（2026-10-14） */
.stack > * + *{ margin-top:var(--sp-7); }
@media (max-width:1040px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}

/* 栏目大卡（可点击，含 URL 标注） */
.area-card{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 8px);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  color:var(--ink); position:relative; overflow:hidden;
  transition:border-color var(--t), background var(--t), transform var(--t);
}
.area-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green);
}
.area-card:hover{ background:#fffdf8; border-color:var(--green-line); transform:translateY(-2px); color:var(--ink); }
.area-card__no{
  font-family:var(--kai); font-size:var(--fs-sm); letter-spacing:var(--ls-wide);
  color:var(--yellow-deep);
}
.area-card__title{ font-size:var(--fs-h3); }
.area-card__desc{ font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); flex:1; }
.area-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--rule-soft);
}
.area-card--wide{ grid-column:span 2; }
@media (max-width:680px){ .area-card--wide{ grid-column:span 1; } }

/* ---------------- 修身之路（三步） ---------------- */

.path{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-6); }
.path__item{ position:relative; padding-top:var(--sp-8); text-align:center; }
.path__no{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--green); background:var(--paper);
  color:var(--green-deep); font-family:var(--kai); font-size:var(--fs-lg);
}
.path__item:not(:last-child)::after{
  content:""; position:absolute; top:24px; left:calc(50% + 34px);
  width:calc(100% + var(--sp-6) - 68px);
  border-top:1px dashed var(--green-line);
}
.path__title{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); }
.path__text{ font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); }
@media (max-width:820px){
  .path{ grid-template-columns:1fr; gap:var(--sp-5); }
  .path__item{ padding-top:var(--sp-6); text-align:left; padding-left:64px; }
  .path__no{ left:0; transform:none; width:44px; height:44px; }
  .path__item:not(:last-child)::after{ display:none; }
}

/* ---------------- 先天六十四卦方圆图（外圆内方 · 整体渲染） ---------------- */

.fy-map{
  max-width:680px; margin:0 auto;
  color:var(--ink);                       /* 全图卦符统一墨黑 */
}
.fy-map svg{ display:block; width:100%; height:auto; }
.fy-map a{ color:var(--ink); outline-offset:4px; }
.fy-map .fy-hot{ fill:transparent; pointer-events:all; transition:fill var(--t-fast); }
.fy-map a:hover .fy-hot,.fy-map a:focus-visible .fy-hot{ fill:rgba(62,154,112,.16); }

.fy-note{
  max-width:46em; margin:var(--sp-5) auto 0; text-align:center;
  font-size:var(--fs-xs); color:var(--ink-mute); line-height:1.9;
}
.fy-note .mono{ display:inline-block; margin-top:2px; }

@media (max-width:620px){
  .fy-map{ max-width:100%; }
}

/* ---------------- 印章 / 标签 / 胶囊 ---------------- */

.seal{
  display:inline-grid; place-items:center; padding:.35em .4em;
  border:2px solid var(--yellow-deep); color:var(--yellow-deep);
  font-family:var(--kai); font-size:var(--fs-sm); line-height:1;
  border-radius:3px; letter-spacing:.04em;
}
.seal--round{ border-radius:50%; width:2.6em; height:2.6em; padding:0; }

.tag{
  display:inline-block; padding:2px 10px; border-radius:99px;
  font-size:var(--fs-micro); letter-spacing:.12em; white-space:nowrap;
}
.tag--todo{ background:var(--yellow-wash); color:var(--yellow-deep); border:1px solid var(--yellow-line); }
.tag--green{ background:var(--green-wash); color:var(--green-deep); border:1px solid var(--green-line); }
.tag--plain{ background:transparent; color:var(--ink-mute); border:1px solid var(--rule); }

/* ---------------- 版本色标（黄皮 / 白皮 / 绿皮） ---------------- */

.swatch{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:7px; vertical-align:-1px; border:1px solid var(--rule);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.swatch--huang{ background:var(--yellow); }
.swatch--bai{ background:#F2EFE5; }
.swatch--lv{ background:var(--green); }

/* 答案胶囊：自包含、可独立成句，供检索与 AI 引用 */
.capsule{
  border-left:3px solid var(--green); background:var(--green-wash);
  padding:var(--sp-4) var(--sp-5); border-radius:0 var(--r) var(--r) 0;
  font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink);
}
.capsule strong{ font-weight:500; }

/* ---------------- 计划清单（占位页用） ---------------- */

.plan-list{ margin-top:var(--sp-4); }
.plan-list li{
  position:relative; padding:var(--sp-3) 0 var(--sp-3) 26px;
  border-bottom:1px dashed var(--rule);
  font-size:var(--fs-sm); color:var(--ink-soft); line-height:var(--lh-mid);
}
.plan-list li::before{
  content:""; position:absolute; left:6px; top:1.5em;
  width:5px; height:5px; border-radius:50%; background:var(--green);
}
.plan-list .mono{ margin-left:var(--sp-2); }

/* 有序步骤列表：圆点换石绿序号（交节礼乐修身流程等） */
.plan-list--num{ counter-reset:planstep; }
.plan-list--num li{ padding-left:36px; }
.plan-list--num li::before{
  counter-increment:planstep; content:counter(planstep);
  left:0; top:calc(var(--sp-3) + 1px); width:20px; height:20px; border-radius:50%;
  background:rgba(62,154,112,.14); color:var(--green-deep);
  font-size:11px; line-height:20px; text-align:center; font-weight:500;
}
.plan-list--num li strong{ color:var(--green-deep); font-weight:500; }

/* ---------------- 内页页头 ---------------- */

.page-head{ padding:var(--sp-9) 0 var(--sp-7); border-bottom:1px solid var(--rule); }
.crumb{ font-size:var(--fs-crumb); color:var(--ink-soft); margin-bottom:var(--sp-5); }
.crumb a{ color:var(--ink); }
.crumb a:hover{ color:var(--green-deep); text-decoration:underline; }
.crumb__sep{ margin:0 var(--sp-2); opacity:.45; }
.crumb__now{ color:var(--green-deep); }
.page-head__title{ font-size:var(--fs-h1); margin-bottom:var(--sp-4); }
.page-head__desc{ max-width:44em; font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); }

/* ---------------- 页脚（唯一反色区） ---------------- */

.foot{ background:var(--ink); color:var(--paper-rev); padding:var(--sp-9) 0 var(--sp-6); }
.foot__grid{ display:grid; grid-template-columns:1.5fr repeat(5,minmax(0,1fr)); gap:var(--sp-6); }
.foot__brand{ margin-bottom:var(--sp-3); }
.foot__logo{
  display:block; height:30px; width:auto;
  /* 墨底页脚：黑字 logo 反白为宣纸色 */
  filter:invert(1) sepia(.18) saturate(.7) brightness(1.04);
  opacity:.92;
}
.foot__desc{ font-size:var(--fs-xs); line-height:1.9; color:rgba(245,241,232,.62); max-width:24em; }
.foot h4{
  font-size:var(--fs-micro); letter-spacing:.24em;
  color:rgba(245,241,232,.5); margin-bottom:var(--sp-4); font-weight:400;
}
.foot li{ margin-bottom:var(--sp-2); }
.foot a{ color:rgba(245,241,232,.82); font-size:var(--fs-xs); }
.foot a:hover{ color:var(--paper-rev); }
.foot__bottom{
  margin-top:var(--sp-8); padding-top:var(--sp-5);
  border-top:1px solid rgba(245,241,232,.18);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:var(--fs-micro); color:rgba(245,241,232,.5);
}
.foot__legal{
  margin-top:var(--sp-3);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:var(--fs-micro); color:rgba(245,241,232,.45);
}
.foot__legal a{ color:rgba(245,241,232,.55); text-decoration:none; border-bottom:1px solid rgba(245,241,232,.25); }
.foot__legal a:hover{ color:rgba(245,241,232,.85); border-bottom-color:rgba(245,241,232,.5); }
@media (max-width:1040px){ .foot__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px){ .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------------- 滚动揭示 ---------------- */
/* 仅在 JS 可用时隐藏，避免脚本失效导致内容永久不可见 */

.reveal{ transition:opacity .7s ease, transform .7s ease; }
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
}
@media print{
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------------- 五步法流程（修身五步法页） ---------------- */

.steps{ border-top:1px solid var(--rule); }
.steps__item{
  display:grid; grid-template-columns:minmax(5.2em,max-content) 1fr; gap:var(--sp-5);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--rule);
}
.steps__no{
  font-family:var(--kai); font-size:var(--fs-h2); line-height:1;
  color:var(--green-deep); padding-top:.1em;
  white-space:nowrap;                     /* 「路线一」「第一步」等序号恒为一行 */
}
.steps__title{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); }
.steps__text{ color:var(--ink-soft); font-size:var(--fs-sm); line-height:var(--lh-body); }
.steps__text + .steps__text{ margin-top:var(--sp-3); }
.steps__meta{ margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:var(--sp-2); }
@media (max-width:760px){
  .steps__item{ grid-template-columns:1fr; gap:var(--sp-3); }
  .steps__no{ font-size:var(--fs-h3); }
}

/* ---------------- 引文块（古籍原文 / 原文摘录） ---------------- */

.quote{
  position:relative; margin:0; padding:var(--sp-5) var(--sp-6);
  background:var(--paper-2); border-left:3px solid var(--green);
  font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--ink-soft);
}
.quote cite{ display:block; margin-top:var(--sp-3); font-style:normal; font-size:var(--fs-micro); color:var(--ink-mute); letter-spacing:.08em; }

/* ---------------- 三块纵向平铺（首页「壹」定义 / 两层 / 符号体系） ---------------- */

.def-stack{ display:flex; flex-direction:column; max-width:52em; margin-inline:auto; }
.def-block + .def-block{
  margin-top:var(--sp-7); padding-top:var(--sp-7);
  border-top:1px solid var(--rule-soft);
}
.def-block .quote,
.def-block .body-text{ max-width:none; }
/* 严格定义是本节核心句，字号升一档 */
.def-block .quote{ font-size:var(--fs-base); }
/* 列表与段落共用同一行宽（52em 通栏），界格虚线拉满，读起来像一张纵表 */
.def-block .plan-list{ margin-top:0; }
.def-block .plan-list li:last-child{ border-bottom:0; }
@media (min-width:681px){
  /* 标题独占一行、内部不折行 */
  .def-block .sub-h{ white-space:nowrap; }
}
@media (max-width:680px){
  .def-block + .def-block{ margin-top:var(--sp-6); padding-top:var(--sp-6); }
}

/* ---------------- 二十四节气网格 ---------------- */

.jieqi-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  border:1px solid var(--rule); border-right:0; border-bottom:0;
  background:var(--paper);
}
.jieqi-cell{
  padding:var(--sp-4) var(--sp-3); text-align:center;
  border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
}
.jieqi-cell__no{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--ink-mute); letter-spacing:.06em; }
.jieqi-cell__name{ font-size:var(--fs-base); letter-spacing:.16em; margin:3px 0 4px; }
.jieqi-cell__deg{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--green-deep); letter-spacing:.02em; }
/* 四季以绿→黄→纸→深纸四档底纹区分，不引入新色 */
.jieqi-cell--spring{ background:var(--green-wash); }
.jieqi-cell--summer{ background:var(--yellow-wash); }
.jieqi-cell--autumn{ background:var(--paper); }
.jieqi-cell--winter{ background:var(--paper-3); }
@media (max-width:900px){ .jieqi-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px){ .jieqi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------------- 口诀 / 背诵规范块（修身第一步） ---------------- */

.recite{
  margin-top:var(--sp-5); padding:var(--sp-6);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
}
.recite .sub-h:first-child{ margin-top:0; }
.recite .ttable{ font-size:var(--fs-xs); }
.recite .ttable td{ line-height:var(--lh-mid); }

/* 种图 · 方圆图图示 */
.steps__figure{ margin:var(--sp-5) 0 0; }
.steps__figure img{
  display:block; width:min(520px,90%); height:auto; margin-inline:auto;
}
.steps__figure figcaption{
  margin-top:var(--sp-3); text-align:center;
  font-size:var(--fs-micro); color:var(--ink); letter-spacing:.08em;
}
@media (max-width:680px){
  .steps__figure img{ width:min(340px,92%); }
}
@media (max-width:680px){
  .recite{ padding:var(--sp-5) var(--sp-4); }
  .recite .ttable{ font-size:var(--fs-micro); }
  .recite .ttable th, .recite .ttable td{ padding:8px 9px; }
}

/* ---------------- 可折叠块（种图 · 图与口诀） ---------------- */

.fold{
  margin-top:var(--sp-5);
  border:1px solid var(--green-line); border-radius:var(--r);
  background:var(--paper); overflow:hidden;
}
.fold + .fold{ margin-top:var(--sp-3); }
.fold__head{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--green-wash); border-left:4px solid var(--green);
  cursor:pointer; list-style:none;
  transition:background var(--t), border-color var(--t);
}
.fold__head::-webkit-details-marker{ display:none; }
.fold__head:hover{ background:rgba(62,154,112,.16); }
.fold__head:focus-visible{ outline:2px solid var(--green-deep); outline-offset:-2px; }
.fold__t{ min-width:0; font-size:var(--fs-md); letter-spacing:var(--ls-title); }
/* 明显的展开/收起按钮：绿底墨黑字（5.3:1，AA） */
.fold__btn{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px;
  background:var(--green); color:var(--ink);
  font-size:var(--fs-xs); letter-spacing:.14em; white-space:nowrap;
  transition:background var(--t);
}
.fold__btn::before{ content:"展开"; }
.fold__btn::after{ content:"▾"; font-family:var(--mono); font-size:var(--fs-sm); line-height:1; }
.fold__head:hover .fold__btn{ background:var(--green-hover); }
.fold[open] .fold__btn::before{ content:"收起"; }
.fold[open] .fold__btn::after{ content:"▴"; }
.fold[open] .fold__head{ border-bottom:1px solid var(--green-line); }
.fold__body{ padding:var(--sp-6) var(--sp-5); }
/* 折叠块自带外框，内部图与口诀块不再重复描边留白 */
.fold__body > .steps__figure{ margin-top:0; }
.fold__body > .recite{ margin-top:0; padding:0; background:transparent; border:0; }
@media (max-width:680px){
  .fold__head{ padding:var(--sp-3) var(--sp-4); gap:var(--sp-3); }
  .fold__t{ font-size:var(--fs-base); }
  .fold__btn{ padding:8px 14px; letter-spacing:.08em; }
  .fold__body{ padding:var(--sp-5) var(--sp-4); }
}

/* 折叠内的小字备注 */
.fold__note{
  margin-top:var(--sp-3); font-family:var(--mono); font-size:var(--fs-micro);
  color:var(--ink-mute); letter-spacing:.08em;
}

/* 六十四卦解读 · 定位说明（合规免责） */
.readings-note{
  margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-left:3px solid #1F6B4A; background:rgba(62,154,112,.08);
  color:var(--ink); font-size:var(--fs-sm); line-height:1.9;
}

/* 二级折叠（六十四卦 · 按宫分组） */
.fold--sub{ margin-top:var(--sp-4); background:var(--paper-2); }
.fold--sub .fold__head{ padding:var(--sp-3) var(--sp-4); background:transparent; border-left-width:3px; }
.fold--sub .fold__head:hover{ background:rgba(62,154,112,.10); }
.fold--sub .fold__t{ font-size:var(--fs-base); letter-spacing:.08em; }
.fold--sub .fold__btn{ padding:7px 14px; font-size:var(--fs-micro); letter-spacing:.10em; }
.fold--sub .fold__body{ padding:var(--sp-2) var(--sp-4) var(--sp-5); }
.fold--sub .fold__head{ border-bottom:0; }
.fold--sub[open] .fold__head{ border-bottom:1px solid var(--rule-soft); }

/* 卦条目（卦号 · 卦名 · 卦符 · 卦色 + 两层卦象） */
.gua-r{ padding:var(--sp-5) 0; border-bottom:1px solid var(--rule-soft); }
.gua-r:first-of-type{ padding-top:var(--sp-4); }
.gua-r:last-child{ border-bottom:0; padding-bottom:0; }
.gua-r__h{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-3);
  font-size:var(--fs-md); letter-spacing:var(--ls-title);
}
.gua-r__no{ font-family:var(--mono); font-size:inherit; color:var(--ink-mute); }
.gua-r__full{ font-style:normal; font-size:var(--fs-sm); color:var(--ink-mute); letter-spacing:.08em; }
.gua-r__meta{
  margin-top:var(--sp-2); display:flex; flex-wrap:wrap; gap:var(--sp-4);
  font-size:var(--fs-micro); color:var(--ink-mute); letter-spacing:.10em;
}
.gua-r__t{
  margin-top:var(--sp-5); font-family:var(--kai); font-size:var(--fs-sm);
  color:var(--green-deep); letter-spacing:var(--ls-tag);
}
.gua-r__t + .body-text{ margin-top:var(--sp-2); }
.gua-r .body-text + .body-text{ margin-top:var(--sp-2); }
/* 卦关系（以本卦为本命卦基准：成功卦 / 失败卦 / 衰变卦） */
.gua-rel{
  margin-top:var(--sp-3); padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2) var(--sp-5);
}
.gua-rel li{ display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; font-size:var(--fs-sm); }
.gua-rel__k{
  flex:none; font-family:var(--kai); font-size:var(--fs-micro); letter-spacing:.14em;
  color:var(--paper); background:var(--green); padding:2px 8px; border-radius:2px;
}
.gua-rel__v{ min-width:0; color:var(--ink); }
.gua-rel__no{
  font-style:normal; font-family:var(--mono); font-size:inherit;
  color:var(--ink-mute); margin-right:.3em;
}
@media (max-width:680px){
  .gua-rel{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .gua-r__h{ font-size:var(--fs-base); gap:var(--sp-2); }
  .gua-r__t{ margin-top:var(--sp-4); }
}

/* ---------------- 交节时间表（三地示例） ---------------- */

.ttable{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); background:var(--paper); }
.ttable th, .ttable td{ border:1px solid var(--rule); padding:10px 13px; text-align:left; vertical-align:top; }
.ttable th{ background:var(--paper-3); font-weight:500; letter-spacing:.04em; white-space:nowrap; }
.ttable td:first-child{ white-space:nowrap; }
/* 数值列（节数 / 字数）：整串不折行——「1.6 万字」「导读 + 10 节」须一行显示 */
.ttable--nums td:nth-child(2), .ttable--nums td:nth-child(3){ white-space:nowrap; }
.ttable td .mono{ display:block; }
.ttable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------------- 归位提示条（子页面） ---------------- */

.parent-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  background:var(--green-wash); border-left:3px solid var(--green);
  font-size:var(--fs-xs); color:var(--ink-soft);
}

/* ---------------- 模块内提示条（如「目前官方只售卖…」） ---------------- */

.tip{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5);
  background:var(--yellow-wash); border-left:3px solid var(--yellow);
  font-size:var(--fs-sm); color:var(--ink); line-height:var(--lh-mid);
}
.tip__label{
  flex:none; font-family:var(--kai); font-size:var(--fs-xs); letter-spacing:.16em;
  padding:1px 9px; border-radius:2px; white-space:nowrap;
  background:var(--yellow); color:var(--ink);   /* 黄底墨黑字，与印章 / 标签同语言 */
}
.tip__text{ min-width:0; }

/* ---------------- 随点击展开（礼仪三层） ---------------- */

.acc{ border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__head{
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-5) 0; cursor:pointer; list-style:none;
}
.acc__head::-webkit-details-marker{ display:none; }
.acc__head::after{
  content:"＋"; margin-left:auto; font-family:var(--mono);
  font-size:var(--fs-sm); color:var(--green-deep);
}
.acc__item[open] .acc__head::after{ content:"－"; }
.acc__no{ font-family:var(--kai); font-size:var(--fs-sm); color:var(--green-deep); letter-spacing:.1em; }
.acc__title{ font-size:var(--fs-md); letter-spacing:.08em; }
.acc__body{ padding:0 0 var(--sp-6); }
.acc__body .body-text{ max-width:52em; }

/* 节气图例 */
.jieqi-legend{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  margin-top:var(--sp-5); font-size:var(--fs-xs); color:var(--ink-mute);
}
.jieqi-legend span{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.jieqi-legend i{ width:14px; height:14px; border:1px solid var(--rule); border-radius:2px; }

/* ---------------- 数字概览（书稿规模、数据点） ---------------- */

.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); }
.stat{
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--paper); padding:var(--sp-5) var(--sp-4); text-align:center;
}
.stat__v{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:.02em; }
.stat__v em{ font-style:normal; font-size:var(--fs-md); color:var(--ink-mute); margin-left:2px; }
.stat__l{ margin-top:6px; font-size:var(--fs-micro); letter-spacing:.16em; color:var(--ink-mute); }
@media (max-width:680px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------------- 书籍卡（书影 + 元信息） ---------------- */

.book{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.book__name{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.book__meta{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--ink-mute); letter-spacing:.04em; }
.book__desc{ margin-top:var(--sp-4); font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--ink-soft); }
@media (max-width:680px){
  .book{ grid-template-columns:96px minmax(0,1fr); gap:var(--sp-4); }
}

/* 实拍书影（首页 / 学堂页 / 书籍页《易解人生》：透明底立体书，直接落在宣纸上；
   全站统一用同款书影，不再使用程序化绘制的假封面） */
.book--shot{ grid-template-columns:200px minmax(0,1fr); align-items:center; }
.book__shot{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 12px 20px rgba(20,20,20,.22));
}
@media (max-width:900px){
  .book--shot{ grid-template-columns:1fr; gap:var(--sp-5); }
  .book--shot .book__shot{ max-width:220px; margin:0 auto; }
}

/* ---------------- 问答（FAQ，供 AI 抽取与结构化数据） ---------------- */

.qa{ border-top:1px solid var(--rule); }
.qa__item{ padding:var(--sp-5) 0; border-bottom:1px solid var(--rule); }
.qa__q{ font-size:var(--fs-md); letter-spacing:.04em; margin-bottom:var(--sp-3); }
.qa__q::before{ content:"问"; font-family:var(--kai); font-size:var(--fs-sm); color:var(--green-deep); margin-right:var(--sp-3); letter-spacing:.1em; }
.qa__a{ font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--ink-soft); max-width:52em; }
.qa__a strong{ color:var(--ink); font-weight:500; }

/* ---------------- 转化区块（进群 / 购书 / 看课） ---------------- */

.cta{
  border:1px solid var(--green-line); border-radius:var(--r);
  background:var(--green-wash); padding:var(--sp-7) var(--sp-6);
  display:grid; gap:var(--sp-4); justify-items:start;
}
.cta__title{ font-size:var(--fs-h3); }
.cta__text{ font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); max-width:48em; }
/* 放宽版式：整句不需折行时用（仍随容器收窄自动换行，不会溢出） */
.cta__text--wide{ max-width:none; }
.cta__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.cta--paper{ background:var(--paper-2); border-color:var(--rule); }
.cta__note{ font-size:var(--fs-micro); color:var(--ink-mute); }
@media (max-width:680px){ .cta{ padding:var(--sp-6) var(--sp-5); } }

/* 转化路径（三步通向社群与课程） */

.lead-path{ display:grid; gap:var(--sp-3); counter-reset:lp; }
.lead-path__item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-4);
  align-items:start; padding:var(--sp-4) var(--sp-5);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
}
.lead-path__no{
  font-family:var(--kai); font-size:var(--fs-lg); color:var(--green-deep);
  line-height:1.3;
}
.lead-path__t{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.lead-path__d{ font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); }

/* ---------------- 年度礼仪时间轴（礼仪页「一年之中的礼仪节点」） ----------------
   左列写月份与节点名，主轴线在中间，轴线圆点落在主轴上；
   桌面为「时刻 + 内容」双栏，≤680px 收为单栏、轴线移到最左、月份压在标题上方。 */

.tl{ position:relative; margin-top:var(--sp-6); padding-left:7em; }
.tl::before{
  content:""; position:absolute; left:7em; top:.7em; bottom:.7em;
  width:1px; background:var(--rule);
}
.tl__item{ position:relative; padding-bottom:var(--sp-6); }
.tl__item:last-child{ padding-bottom:0; }
/* 主轴圆点：left 取 -4px 使圆心落在 1px 主轴上 */
.tl__item::before{
  content:""; position:absolute; left:-4px; top:.5em;
  width:9px; height:9px; border-radius:50%; background:var(--green-deep);
}
.tl__when{ position:absolute; left:-7em; top:-.05em; width:6em; text-align:right; }
.tl__mon{
  display:block; font-family:var(--kai); font-size:var(--fs-md);
  line-height:1.3; letter-spacing:.04em; color:var(--green-deep);
}
.tl__node{
  display:block; margin-top:2px; font-size:var(--fs-micro);
  line-height:1.45; letter-spacing:.08em; color:var(--ink-mute);
}
.tl__body{ padding-left:var(--sp-6); }
.tl__title{ font-size:var(--fs-base); letter-spacing:.04em; }
.tl__desc{ margin-top:var(--sp-2); font-size:var(--fs-sm); line-height:var(--lh-mid); color:var(--ink-soft); }

@media (max-width:680px){
  .tl{ padding-left:0; }
  .tl::before{ left:4px; top:.5em; bottom:.5em; }
  .tl__item{ padding-left:var(--sp-6); }
  .tl__item::before{ left:0; }
  .tl__when{ position:static; width:auto; text-align:left; margin-bottom:var(--sp-2); }
  .tl__mon{ display:inline; font-size:var(--fs-base); }
  .tl__node{ display:inline; margin-top:0; margin-left:var(--sp-2); }
  .tl__body{ padding-left:0; }
}

/* ---------------- 小助理二维码弹层（学堂页「进群方式」按钮） ----------------
   点击「进群方式」弹出：先扫码添加小助理，再由小助理拉进读者群；
   遮罩点击、右上 ×、Esc 均可关闭；≤680px 时卡片贴边留窄距。 */

.qr-modal{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:var(--sp-5); }
.qr-modal[hidden]{ display:none; }
.qr-modal__backdrop{ position:absolute; inset:0; background:rgba(20,20,20,.62); }
.qr-modal__card{
  position:relative; z-index:1; width:min(400px,100%);
  max-height:calc(100vh - 2*var(--sp-5)); overflow:auto;
  background:var(--paper); border:1px solid var(--rule);
  padding:var(--sp-6); text-align:center;
  box-shadow:0 18px 60px rgba(20,20,20,.28);
}
.qr-modal__close{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
}
.qr-modal__close:hover{ background:var(--paper-2); }
.qr-modal__title{ font-size:var(--fs-lg); letter-spacing:.06em; }
.qr-modal__sub{ margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-soft); }
.qr-modal__img{ display:block; width:auto; max-width:100%; max-height:54vh; margin:var(--sp-4) auto 0; border:1px solid var(--rule); }
.qr-modal__steps{ margin:var(--sp-4) 0 0; padding-left:1.4em; text-align:left; font-size:var(--fs-sm); line-height:var(--lh-mid); }
.qr-modal__steps li{ margin-top:var(--sp-2); }

@media (max-width:680px){
  .qr-modal{ padding:var(--sp-3); }
  .qr-modal__card{ padding:var(--sp-5) var(--sp-4); }
}

/* ---------------- 正文流式间距（2026-10-21 统一标准） ----------------
   标题与上下文都保持一定距离，全站一致：
   · 相邻内容块之间 24px（某块自带更大顶距时按大者生效）；
   · 正文段落之间 16px；
   · 小节标题 .sub-h 与上文 32px、与下文 32px（base.css），上下对称；
   · 容器第一个元素不额外加顶距，由容器自身留白负责；
     但折叠块 .acc__body 无顶内边距，其中首个 .sub-h 仍保持 32px 上距；
   · 模块标题 .sec-head（壹/贰/叁…）与上一模块 64px——同一容器内的多个模块
     沿用同一节奏，避免"组内 24px、跨组 160px"的落差。 */
.fx-flow > * + *{ margin-top:var(--sp-5); }
.fx-flow > .body-text + .body-text{ margin-top:var(--sp-4); }
.fx-flow > .sub-h{ margin-top:var(--sp-6); }
.fx-flow > .sub-h:first-child{ margin-top:var(--sp-6); }
.fx-flow > .sec-head{ margin-top:var(--sp-8); }
.fx-flow > :first-child{ margin-top:0; }
.fx-flow > .sec-head:first-child{ margin-top:0; }