/* ============================================================
   围龙传薪 · 样式表
   设计规范见 DESIGN.md
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  /* 纸 */
  --paper:       #F9F6E7;
  --paper-deep:  #F0EAD6;
  --paper-edge:  #E4DCC4;

  /* 墨 */
  --ink:         #1A1A18;
  --ink-mid:     #555145;
  --ink-faint:   #8C8577;

  /* 朱 */
  --cinnabar:    #69171D;
  --cinnabar-lt: #9C3A38;
  --gold:        #CDA740;
  --jade:        #5B7A6B;
  --seal:        #B03A2E;

  /* 字体：三级书法阶梯
     brush —— 真毛笔笔锋，只给最大的字用（站名/章节名/序号/联语/印章）
     kai   —— 楷书笔意，中等字号（导语/小节标题/题签/图注标签）
     song  —— 宋体，正文与数据，保证长文可读 */
  --font-brush: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', serif;
  --font-kai:  'LXGW WenKai', 'Kaiti SC', 'KaiTi', 'STKaiti', serif;
  --font-song: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;

  /* 字号 */
  --fs-hero:    clamp(64px, 6vw, 112px);
  --fs-chapter: clamp(48px, 4.2vw, 76px);
  --fs-section: clamp(26px, 2.1vw, 38px);
  --fs-lead:    clamp(19px, 1.35vw, 26px);
  --fs-body:    clamp(15px, 1.02vw, 17px);
  --fs-caption: clamp(12px, 0.78vw, 14px);
  --fs-num:     clamp(32px, 3vw, 56px);

  /* 间距 */
  --maxw:        1440px;
  --gutter:      clamp(40px, 6vw, 120px);
  --gap-chapter: 22vh;
  --gap-block:   clamp(48px, 6vh, 96px);
  /* 满幅宽（用于横向宽图表：法规时间轴 10 节点） */
  --bleed-w:     min(1840px, 94vw);

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background:var(--paper);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  font-family:var(--font-song);
  font-size:var(--fs-body);
  line-height:2.05;
  color:var(--ink);
  background:var(--paper);
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; font-family:var(--font-kai); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

::selection{ background:rgba(105,23,29,.14); }

/* 滚动条 */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--paper-deep); }
::-webkit-scrollbar-thumb{ background:#C9BFA4; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--cinnabar-lt); }

/* ---------- 3. 纸底肌理 ---------- */
/* 用 soft-light 而非 multiply：出肌理但不压暗纸色。
   multiply 会把宣纸闷成灰纸——实测纸底会掉 10% 以上亮度。 */
.rice-paper{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.62;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:300px 300px;
}

/* 四角微微压暗，像旧纸的边缘 */
.paper-vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 100% at 50% 50%,
      transparent 55%, rgba(120,105,75,.07) 100%);
}

/* 帘纹：手工竹纸的横向帘条与纵向帘丝 */
.paper-lines{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.62;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(140,128,100,.042) 0px,
      rgba(140,128,100,.042) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(90deg,
      rgba(140,128,100,.026) 0px,
      rgba(140,128,100,.026) 1px,
      transparent 1px,
      transparent 38px);
}

/* 底图：暖调水墨化处理过的背景图。
   图片本身已被重映射到「纸色 ↔ 淡墨」之间，最亮处就是纸色，
   所以用 multiply 不会压暗纸面，只在暗部加一层墨气。
   要调浓淡：改 _tools/make_bg.py 里的 STRENGTH 重新生成，
   或直接改下面的 opacity。 */
.bg-photo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("../img/bg-photo.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
  /* 想要更淡：把下面这行换成 url("../img/bg-photo-light.webp")
     想要更重：换成 url("../img/bg-photo-deep.webp")
     或者直接调 opacity */
  opacity:.62;
}
@media (prefers-reduced-motion: reduce){
  .bg-photo{ opacity:.7; }
}

/* ---------- 3b. 背景氛围层 ---------- */
.bg-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  mix-blend-mode:multiply;
}

/* 墨晕：大团、极淡、极慢地漂移与呼吸 */
.bg-wash{
  position:absolute;
  border-radius:50%;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.bg-wash--1{
  width:54vw; height:54vw; left:-16vw; top:-10vh;
  background:radial-gradient(circle,
    rgba(58,52,40,.024) 0%, rgba(58,52,40,.009) 44%, transparent 72%);
  filter:blur(52px);
  animation:drift-a 104s ease-in-out infinite alternate;
}
.bg-wash--2{
  width:46vw; height:46vw; right:-14vw; top:12vh;
  background:radial-gradient(circle,
    rgba(105,23,29,.017) 0%, rgba(105,23,29,.007) 46%, transparent 74%);
  filter:blur(64px);
  animation:drift-b 128s ease-in-out infinite alternate;
}
.bg-wash--3{
  width:62vw; height:62vw; left:8vw; bottom:-26vh;
  background:radial-gradient(circle,
    rgba(58,52,40,.020) 0%, rgba(58,52,40,.008) 48%, transparent 76%);
  filter:blur(72px);
  animation:drift-c 146s ease-in-out infinite alternate;
}
.bg-wash--4{
  width:34vw; height:34vw; right:6vw; bottom:-6vh;
  background:radial-gradient(circle,
    rgba(91,122,107,.015) 0%, rgba(91,122,107,.006) 46%, transparent 74%);
  filter:blur(58px);
  animation:drift-b 118s ease-in-out infinite alternate-reverse;
}
.bg-wash--5{
  width:40vw; height:40vw; left:30vw; top:34vh;
  background:radial-gradient(circle,
    rgba(58,52,40,.013) 0%, transparent 68%);
  filter:blur(88px);
  animation:drift-c 162s ease-in-out infinite alternate-reverse;
}

@keyframes drift-a{
  from{ transform:translate3d(0,0,0)      scale(1); }
  to  { transform:translate3d(10vw,7vh,0) scale(1.18); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0)       scale(1.05); }
  to  { transform:translate3d(-9vw,9vh,0)  scale(.92); }
}
@keyframes drift-c{
  from{ transform:translate3d(0,0,0)        scale(.96); }
  to  { transform:translate3d(7vw,-8vh,0)   scale(1.14); }
}

/* 纸边渗墨：墨色从左右边缘洇进来 */
.bg-bleed{
  position:absolute; top:-10%; bottom:-10%; width:26vw;
  filter:blur(46px);
}
.bg-bleed--l{
  left:-14vw;
  background:linear-gradient(90deg, rgba(58,52,40,.030), transparent);
  animation:bleed-l 172s ease-in-out infinite alternate;
}
.bg-bleed--r{
  right:-14vw;
  background:linear-gradient(270deg, rgba(58,52,40,.024), transparent);
  animation:bleed-r 190s ease-in-out infinite alternate;
}
@keyframes bleed-l{
  from{ transform:translate3d(0,0,0); opacity:.8; }
  to  { transform:translate3d(5vw,-3vh,0); opacity:1; }
}
@keyframes bleed-r{
  from{ transform:translate3d(0,0,0); opacity:1; }
  to  { transform:translate3d(-5vw,3vh,0); opacity:.7; }
}

/* 远山：底部一层薄雾般的山影，随滚动漂移 */
.bg-mountains{
  position:absolute; left:-8%; right:-8%; bottom:-5vh;
  height:52vh;
  opacity:.155;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.bg-mountains svg{ width:100%; height:100%; display:block; }
.mnt{ fill:#3A3428; }
.mnt--far { opacity:.34; filter:blur(9px); }
.mnt--mid { opacity:.22; filter:blur(4px); }
.mnt--near{ opacity:.15; filter:blur(1px); }

/* 墨迹画布：点击晕染 / 墨屑 / 章节墨迹 */
#ink-canvas{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* 尊重系统设置：关掉所有氛围动画 */
@media (prefers-reduced-motion: reduce){
  .bg-wash, .bg-bleed{ animation:none !important; }
  .bg-mountains{ opacity:.06; }
  #ink-canvas{ display:none; }
}

/* 内容层抬到纸底之上 */
.cover, main, .site-footer, .chapter-nav, .progress-line{ position:relative; z-index:1; }

/* ---------- 4. 顶部进度线 ---------- */
.progress-line{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:60; background:transparent;
}
.progress-line__bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--cinnabar-lt), var(--cinnabar));
  transform-origin:left center;
}

/* ---------- 5. 右侧竖排导航：一方小卷轴 ---------- */
.chapter-nav{
  position:fixed; right:clamp(16px,2.4vw,40px); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(4px,0.7vh,9px);
  padding:clamp(14px,2.2vh,26px) 9px;
  z-index:50; opacity:0; pointer-events:none;
  transition:opacity .9s var(--ease);
  background:rgba(249,246,231,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--paper-edge);
  border-bottom:1px solid var(--paper-edge);
}
.chapter-nav.is-visible{ opacity:1; pointer-events:auto; }

/* 卷轴脊：贯穿上下的细线 */
.chapter-nav::before{
  content:'';
  position:absolute; top:0; bottom:0; left:50%;
  width:1px; margin-left:-.5px;
  background:linear-gradient(180deg,
    transparent 0%, var(--paper-edge) 10%,
    var(--paper-edge) 90%, transparent 100%);
  pointer-events:none;
}
/* 首尾两端的朱砂小结，像卷轴的轴头 */
.chapter-nav::after{
  content:'';
  position:absolute; left:50%; top:-3px;
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%;
  background:var(--cinnabar-lt);
  opacity:.7;
}

/* 顶部竖排小签名 */
.chapter-nav__sign{
  font-family:var(--font-brush);
  font-size:11px;
  writing-mode:vertical-rl;
  letter-spacing:0.3em;
  color:var(--ink-faint);
  margin-bottom:clamp(8px,1.4vh,16px);
  padding-bottom:clamp(8px,1.4vh,16px);
  border-bottom:1px solid var(--paper-edge);
  opacity:.85;
}

.chapter-nav__item{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; text-decoration:none;
  padding:clamp(5px,0.9vh,9px) clamp(7px,0.7vw,11px);
  border:1px solid transparent;
  border-radius:2px;
  color:var(--ink-faint);
  background:transparent;
  transition:color .5s var(--ease), background .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease);
}
.chapter-nav__num{
  font-family:var(--font-brush);
  font-size:clamp(16px,1.15vw,20px);
  line-height:1;
  letter-spacing:0.06em;
  opacity:.55;
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s var(--ease);
}
.chapter-nav__label{
  font-family:var(--font-kai);
  font-size:10px; letter-spacing:0.24em;
  writing-mode:vertical-rl;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .5s var(--ease), max-height .55s var(--ease);
}

/* 悬停：浮起、显出章节名 */
.chapter-nav__item:hover{
  color:var(--ink);
  background:rgba(252,250,242,.92);
  border-color:var(--paper-edge);
  transform:translateX(-3px);
}
.chapter-nav__item:hover .chapter-nav__num{ opacity:.9; }
.chapter-nav__item:hover .chapter-nav__label{ opacity:.75; max-height:74px; }

/* 当前章节：朱印一方 */
.chapter-nav__item.is-active{
  color:var(--cinnabar);
  background:rgba(252,250,242,.96);
  border-color:rgba(105,23,29,.30);
  box-shadow:0 4px 16px -9px rgba(105,23,29,.4);
}
.chapter-nav__item.is-active .chapter-nav__num{
  opacity:1;
  transform:scale(1.14);
  color:var(--cinnabar);
}
.chapter-nav__item.is-active .chapter-nav__label{
  opacity:.9; max-height:74px;
}
/* 当前项左侧的朱砂墨点 */
.chapter-nav__item.is-active::before{
  content:'';
  position:absolute; left:-7px; top:50%;
  width:4px; height:4px; margin-top:-2px;
  border-radius:50%;
  background:var(--cinnabar);
  box-shadow:0 0 6px rgba(105,23,29,.5);
}

/* ---------- 6. 卷首题签 ---------- */
.cover{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding:0 var(--gutter);
}
.cover__ink{
  position:absolute; inset:0; z-index:-1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.cover__ink img{
  width:min(150%, 1900px); max-width:none;
  opacity:0; /* 由 JS 做晕开动画 */
  filter:blur(18px) saturate(.5);
  mix-blend-mode:multiply;
}
.cover__body{ text-align:center; }

.cover__title{
  font-family:var(--font-brush);
  font-size:var(--fs-hero);
  letter-spacing:0.18em;
  text-indent:0.18em;   /* 抵消末字后的字距，保持视觉居中 */
  color:var(--ink);
  line-height:1.25;
  margin-bottom:clamp(20px,3vh,40px);
}
.cover__title .char{ display:inline-block; opacity:0; }

.cover__sub{
  font-family:var(--font-kai);
  font-size:clamp(14px,1.15vw,20px);
  letter-spacing:0.42em; text-indent:0.42em;
  color:var(--ink-mid);
  opacity:0;
}
.cover__rule{
  width:clamp(120px,14vw,240px); height:1px;
  margin:clamp(26px,4vh,52px) auto;
  background:linear-gradient(90deg, transparent, var(--cinnabar-lt) 35%, var(--cinnabar-lt) 65%, transparent);
  opacity:0; transform:scaleX(.3);
}
.cover__desc{
  font-family:var(--font-song);
  font-size:clamp(15px,1.15vw,19px);
  line-height:2.2;
  letter-spacing:0.14em;
  color:var(--ink-mid);
  opacity:0;
}

/* 封面「启卷」：既是明确的第一次交互（解锁音频），也把页面滚下去 */
.cover__scroll-hint{
  position:absolute; bottom:clamp(28px,5vh,56px); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--font-kai);
  color:var(--ink-faint);
  background:none; border:none; padding:12px 26px;
  cursor:pointer;
  opacity:0;
  transition:color .6s var(--ease), transform .6s var(--ease);
}
.cover__scroll-hint:hover{ color:var(--cinnabar); transform:translateX(-50%) translateY(-4px); }
.cover__scroll-word{
  font-family:var(--font-brush);
  font-size:clamp(18px,1.45vw,25px);
  letter-spacing:0.36em; text-indent:0.36em;
  line-height:1.2;
}
.cover__scroll-sub{
  font-size:11px; letter-spacing:0.3em; text-indent:0.3em;
  opacity:.72;
}
.cover__scroll-line{
  width:1px; height:clamp(34px,6vh,62px);
  background:linear-gradient(180deg, var(--ink-faint), transparent);
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.25; transform:scaleY(.6); }
  50%    { opacity:.85; transform:scaleY(1); }
}

/* ---------- 6b. 全卷一览（成图缩览）---------- */
.overview{
  max-width:var(--bleed-w);
  margin:0 auto;
  padding:clamp(80px,14vh,180px) var(--gutter) clamp(60px,10vh,130px);
  text-align:center;
}
.overview__head{ margin-bottom:clamp(40px,7vh,86px); }
.overview__kicker{
  font-family:var(--font-kai);
  font-size:clamp(12px,0.95vw,16px);
  letter-spacing:0.6em; text-indent:0.6em;
  color:var(--cinnabar-lt);
  margin-bottom:clamp(14px,2.4vh,26px);
}
.overview__title{
  font-family:var(--font-brush);
  font-size:var(--fs-chapter);
  letter-spacing:0.24em; text-indent:0.24em;
  color:var(--cinnabar);
  line-height:1.3;
}
.overview__note{
  margin-top:clamp(22px,3.4vh,38px);
  font-family:var(--font-kai);
  font-size:var(--fs-lead);
  line-height:2.1; letter-spacing:0.06em;
  color:var(--ink-mid);
  max-width:760px; margin-left:auto; margin-right:auto;
}

.overview__strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.8vw,30px);
  align-items:start;
}
.board-card{ margin:0; text-align:left; }

/* 图：带一道极细的纸边，像裱好的卷轴 */
.board-card__zoom{
  position:relative;
  display:block; width:100%;
  padding:0;
  background:transparent;
  cursor:zoom-in;
  overflow:hidden;
  border-radius:2px;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.board-card__zoom img{
  width:100%; height:auto; display:block;
  transition:transform .9s var(--ease), filter .6s var(--ease);
  filter:saturate(.92);
}
.board-card__zoom:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 52px -30px rgba(105,23,29,.42);
}
.board-card__zoom:hover img{ transform:scale(1.035); filter:saturate(1); }

.board-card__hint{
  position:absolute; left:0; right:0; bottom:0;
  padding:9px 0;
  font-family:var(--font-kai);
  font-size:11px; letter-spacing:0.28em; text-indent:0.28em;
  color:var(--paper);
  background:linear-gradient(180deg, transparent, rgba(58,52,40,.62));
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.board-card__zoom:hover .board-card__hint{ opacity:1; transform:translateY(0); }

.board-card figcaption{
  margin-top:clamp(12px,1.8vh,20px);
  display:flex; flex-direction:column; gap:6px;
}
.board-card__title{
  font-family:var(--font-brush);
  font-size:clamp(17px,1.3vw,23px);
  letter-spacing:0.14em;
  color:var(--ink);
  text-decoration:none;
  transition:color .45s var(--ease);
}
.board-card__title em{
  font-style:normal;
  color:var(--cinnabar-lt);
  margin-right:0.5em;
  font-size:0.82em;
}
.board-card__title:hover{ color:var(--cinnabar); }
.board-card__sub{
  font-family:var(--font-kai);
  font-size:var(--fs-caption);
  line-height:1.85; letter-spacing:0.05em;
  color:var(--ink-faint);
}

/* ---------- 6b-2. 每卷开头的「本卷成图」---------- */
.chapter-board{
  margin:0 auto var(--gap-block);
  max-width:min(1000px, 78vw);
  text-align:center;
}
.chapter-board__zoom{
  position:relative; display:block; width:100%;
  padding:0; border:none; background:transparent;
  cursor:zoom-in;
  transition:transform .7s var(--ease);
}
.chapter-board__zoom img{ width:100%; height:auto; display:block; }
.chapter-board__zoom:hover{ transform:translateY(-6px); }
.chapter-board__hint{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 0;
  font-family:var(--font-kai);
  font-size:11px; letter-spacing:0.28em; text-indent:0.28em;
  color:var(--paper);
  background:linear-gradient(180deg, transparent, rgba(58,52,40,.6));
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.chapter-board__zoom:hover .chapter-board__hint{ opacity:1; transform:translateY(0); }
.chapter-board .figcaption{ margin-top:clamp(14px,2.2vh,26px); }

/* ---------- 6c. 放大预览层 ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  background:rgba(30,27,20,.88);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:clamp(24px,4vh,60px) clamp(24px,4vw,80px);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox__stage{
  max-width:100%; max-height:100%;
  overflow:auto;
  border-radius:3px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.lightbox__img{
  display:block;
  max-width:none;
  width:min(1700px, 94vw); height:auto;
  background:var(--paper);
}
.lightbox__cap{
  margin-top:16px;
  font-family:var(--font-brush);
  font-size:clamp(15px,1.15vw,20px);
  letter-spacing:0.22em;
  color:rgba(249,246,231,.82);
}
.lightbox__close{
  position:absolute; top:clamp(16px,2.6vh,34px); right:clamp(20px,2.6vw,44px);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; line-height:1;
  color:rgba(249,246,231,.8);
  background:transparent;
  border:1px solid rgba(249,246,231,.28);
  border-radius:50%;
  cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.lightbox__close:hover{
  color:#fff; border-color:rgba(249,246,231,.7);
  transform:rotate(90deg);
}

/* ---------- 7. 章节通用 ---------- */
.chapter{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--gap-chapter) var(--gutter);
  position:relative;
}

/* 背景大字水印：壹贰叁肆伍 */
.chapter__watermark{
  position:absolute;
  top:6vh; left:50%; transform:translateX(-50%);
  font-family:var(--font-brush);
  font-size:clamp(220px,30vw,520px);
  line-height:1;
  color:var(--ink);
  opacity:.045;
  pointer-events:none; user-select:none;
  z-index:-1;
}

/* 章节内的水墨底衬：让正文不再悬在空纸上。
   位置刻意压在页边与留白处，不进入正文栏。 */
.chapter__ink{
  position:absolute;
  z-index:-1;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.29;
  will-change:transform;
}
.chapter__ink img{ width:100%; height:auto; display:block; }
.chapter__ink--tr{ top:2%;    right:-10%; width:min(54vw,820px); }
.chapter__ink--bl{ bottom:3%;  left:-12%;  width:min(60vw,940px); }
.chapter__ink--cr{ bottom:10%; right:-11%; width:min(56vw,880px); }

@media (prefers-reduced-motion: reduce){
  .chapter__ink{ opacity:.11; }
}

/* 章节题签 */
.chapter__head{
  text-align:center;
  margin-bottom:clamp(56px,10vh,130px);
}
.chapter__kicker{
  font-family:var(--font-brush);
  font-size:clamp(13px,1vw,17px);
  letter-spacing:0.55em; text-indent:0.55em;
  color:var(--cinnabar-lt);
  margin-bottom:clamp(14px,2.4vh,26px);
}
.chapter__title{
  font-family:var(--font-brush);
  font-size:var(--fs-chapter);
  letter-spacing:0.24em; text-indent:0.24em;
  color:var(--cinnabar);
  line-height:1.3;
}
.chapter__title .char{ display:inline-block; }
.chapter__sub{
  margin-top:clamp(16px,2.6vh,30px);
  font-family:var(--font-brush);
  font-size:clamp(14px,1.1vw,19px);
  letter-spacing:0.3em; text-indent:0.3em;
  color:var(--ink-mid);
}

/* 笔下横线：替代生硬的 <hr> */
.brushed-rule{
  width:clamp(160px,20vw,320px);
  height:2px;
  margin:clamp(26px,4vh,48px) auto 0;
  background:
    linear-gradient(90deg, transparent 0%, var(--cinnabar-lt) 12%, var(--cinnabar) 50%, var(--cinnabar-lt) 88%, transparent 100%);
  opacity:.55;
  transform-origin:center;
}

/* 章节收束 */
.chapter__closing{
  margin-top:clamp(64px,11vh,150px);
  text-align:center;
  font-family:var(--font-brush);
  font-size:clamp(16px,1.3vw,23px);
  line-height:2.3;
  letter-spacing:0.16em;
  color:var(--ink-mid);
}

/* ---------- 8. 导语块 ---------- */
.lead-block{
  max-width:940px;
  margin:0 auto var(--gap-block);
  padding-left:clamp(0px,3vw,48px);
  border-left:1px solid var(--paper-edge);
  position:relative;
}
.lead-block .deco-border-title{
  width:clamp(150px,14vw,220px);
  margin-bottom:clamp(20px,3vh,34px);
  opacity:.9;
}
.lead{
  font-family:var(--font-kai);
  font-size:var(--fs-lead);
  line-height:2.15;
  letter-spacing:0.05em;
  color:var(--ink);
  margin-bottom:1em;
}
.lead:last-child{ margin-bottom:0; }
.lead--accent{ color:var(--ink-mid); }
.lead strong{ color:var(--cinnabar); font-weight:500; }

/* ---------- 9. 通用块 ---------- */
.block{ margin-bottom:var(--gap-block); }

.block__title{
  font-family:var(--font-brush);
  font-size:var(--fs-section);
  letter-spacing:0.16em;
  color:var(--cinnabar);
  margin-bottom:clamp(14px,2vh,22px);
  padding-left:18px;
  position:relative;
}
.block__title::before{
  content:'';
  position:absolute; left:0; top:.28em;
  width:3px; height:.92em;
  background:var(--cinnabar);
  opacity:.75;
  border-radius:2px;
}
.block__note{
  font-size:var(--fs-body);
  color:var(--ink-mid);
  letter-spacing:0.04em;
  margin-bottom:clamp(26px,4vh,46px);
}
.block--split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,76px);
  align-items:start;
}
.block__col{ min-width:0; }
.block--split .block__title{ font-size:clamp(20px,1.6vw,28px); }
.block--focus{
  background:linear-gradient(180deg, transparent, rgba(240,234,214,.5) 12%, rgba(240,234,214,.5) 88%, transparent);
  padding:clamp(36px,5vh,72px) clamp(24px,4vw,64px);
  border-radius:2px;
}
/* 满幅块：突破正文栏居中展开，用于横向宽图表 */
.block--bleed{
  width:var(--bleed-w);
  margin-left:calc((100% - var(--bleed-w)) / 2);
}
.block__split-text{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,76px); align-items:center;
}

.body-text{
  font-size:var(--fs-body);
  line-height:2.1;
  color:var(--ink);
  margin-bottom:1.2em;
  letter-spacing:0.03em;
}
.body-text--narrow{ max-width:640px; }
.body-text strong{ color:var(--cinnabar); font-weight:500; }

.source-note{
  font-size:var(--fs-caption);
  color:var(--ink-faint);
  line-height:1.9;
  letter-spacing:0.04em;
  margin-top:clamp(18px,3vh,32px);
}
.source-note strong{ color:var(--cinnabar); font-weight:500; }

/* ---------- 9b. 内容区宣纸色卡 ----------
   在每一章的内容区垫一层低透明度宣纸色，让图文从背景里"浮"出来。
   用 ::after 而非改 background：同 z-index(-1) 下 ::after 画在 .chapter__ink 之后，
   所以这层色卡盖住水墨底衬、又被正文盖住 —— 正是想要的三明治顺序。 */
.chapter::after{
  content:'';
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:min(1640px, 97vw);
  top:1.5%; bottom:1.5%;
  background:rgba(249,246,231,.60);
  border-radius:6px;
  pointer-events:none;
  z-index:-1;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* 全卷一览也垫一层 */
.overview{ position:relative; }
.overview::after{
  content:'';
  position:absolute; inset:6% 0 4% 0;
  background:rgba(249,246,231,.55);
  border-radius:6px;
  pointer-events:none;
  z-index:-1;
}

/* ---------- 10. 图片与图注 ---------- */
/* 图注是 display:inline-block，靠父元素 text-align 才居中对齐到图的中轴 */
.figure,
.figure--chart,
.explode-figure,
.syntax-grid figure,
.figure-pair figure{ text-align:center; }

.figure{ margin:0 0 clamp(28px,4vh,52px); }
.figure img{
  width:100%; height:auto;
  mix-blend-mode:multiply;
}
/* 图表图：不加纸框 —— 图片已抠底，直接落在纸面上 */
.figure--chart{ margin:0; padding:0; background:none; border:none; }
.figure--chart img{ mix-blend-mode:multiply; }
.figure--chart .figcaption{ margin-top:clamp(14px,2.2vh,24px); }

/* 图标题：用原稿的赭黄题签牌垫底（deco-border-title 就是这块牌）。
   主视觉 / 结构图 / 图表 的图注统一走这个样式。 */
.figcaption.figcaption--band,
.hero-figure > .figcaption,
.explode-figure > .figcaption,
.figure--chart > .figcaption{
  display:inline-block;
  padding:clamp(9px,1.3vh,15px) clamp(30px,3.6vw,66px);
  background-image:url("../img/deco-border-title.webp");
  background-size:100% 100%;
  background-repeat:no-repeat;
  font-family:var(--font-brush);
  font-size:clamp(15px,1.1vw,19px);
  line-height:1.5;
  letter-spacing:0.22em; text-indent:0.22em;
  color:var(--cinnabar);
  border-radius:2px;
}
.figcaption.figcaption--band .figcaption__dim,
.hero-figure > .figcaption .figcaption__dim,
.explode-figure > .figcaption .figcaption__dim,
.figure--chart > .figcaption .figcaption__dim{
  display:block;
  margin-top:5px;
  font-family:var(--font-song);
  font-size:clamp(11px,0.75vw,13px);
  letter-spacing:0.06em; text-indent:0;
  color:var(--ink-mid);
}
.figcaption.figcaption--band strong,
.hero-figure > .figcaption strong,
.explode-figure > .figcaption strong,
.figure--chart > .figcaption strong{ color:var(--ink); font-weight:500; }

/* 共用图框：同一组里的图共用一种画幅，框高一致，图注自然对齐 */
.figbox{
  position:relative;
  width:100%;
  aspect-ratio: var(--figbox-ar, 1.15);
  display:flex; align-items:center; justify-content:center;
}
.figbox > img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.figbox--tall{ --figbox-ar: 1.02; }

/* 图对：两张严格对齐 */
.figure-pair{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.4vw,56px);
  margin-top:clamp(28px,4vh,48px);
  align-items:start;
}
.figure-pair .figure{
  display:block;              /* 不能用 flex 列：flex 会接管主轴尺寸，aspect-ratio 失效 */
  margin:0;
}
.figure-pair .figcaption{
  margin-top:clamp(16px,2.4vh,28px);
}
/* 排水那两张：整块窄一点并居中，视觉上右移 */
.figure-pair--narrow{
  max-width:min(1080px, 76%);
  margin-left:auto; margin-right:auto;
  margin-top:clamp(36px,5vh,64px);
}

/* 空间句法三连 */
.syntax-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(28px,4vh,48px);
}
.syntax-grid--two{ grid-template-columns:repeat(2,1fr); }

/* 网格里的图：画幅比例各不相同，图注会落在不同高度。
   让每个 figure 拉满行高，图占满剩余空间并底对齐，图注钉在最下面。 */
.syntax-grid figure{
  display:block;              /* 同上：flex 会让 aspect-ratio 失效 */
  margin:0;
}
.syntax-grid figure > img{
  width:100%;
  aspect-ratio:1.15;          /* 两图共用画幅，框高等高，图注才会在同一水平线 */
  object-fit:contain;
}
.syntax-grid figure > .figcaption{
  margin-top:clamp(16px,2.4vh,28px);
}

/* 图 + 图例（坡度分析图）。
   不能用 flex 并排：图是竖版，列窄时 flex-shrink 会把它压没，只剩图例。
   改为上下堆叠，图占满宽，图例居中放下面。 */
.chart-with-legend{ display:block; }
.chart-with-legend > img:first-child{
  width:100%; height:auto;
  mix-blend-mode:multiply;
}
/* 注意优先级：.figure img 是 (0,1,1)，单类名 (0,1,0) 压不过它，
   所以这里必须写成 .chart-with-legend > img.chart-with-legend__legend (0,2,1)。 */
.figbox > img.chart-with-legend__legend{
  position:absolute;
  right:0; bottom:0;
  width:clamp(74px,6.6vw,116px);
  max-width:116px; height:auto;
  mix-blend-mode:multiply;
  opacity:.94;
}
.figcaption{
  margin-top:clamp(12px,2vh,22px);
  font-size:var(--fs-caption);
  line-height:1.95;
  letter-spacing:0.06em;
  /* 原来是 --ink-faint(#8C8577)，在加背景后对比度只有 3.1:1，看着像没了。
     提到 --ink-mid 后是 5.6:1，过 WCAG 正文标准。 */
  color:var(--ink-mid);
  text-align:center;
}
.figcaption__dim{ color:var(--ink-faint); font-size:.92em; }
.figcaption strong{ color:var(--cinnabar); font-weight:500; }

/* 主视觉 */
.hero-figure{ margin:0 auto var(--gap-block); max-width:1180px; text-align:center; }.hero-figure__stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(300px,52vh,620px);
}
.hero-figure__stage .ink-circle{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:.5; mix-blend-mode:multiply;
  pointer-events:none;
}
.hero-figure__img{
  position:relative; z-index:1;
  width:min(82%,880px);
  mix-blend-mode:multiply;
}
/* 柔和主视觉：不加圆框，只让墨落在纸上 */
.hero-figure--soft{ max-width:1000px; margin-bottom:var(--gap-block); }
.hero-figure--soft .hero-figure__img{ width:min(76%,780px); margin:0 auto; }

/* 开篇对页：图左文右，垂直居中 */
.opening-pair{ align-items:center; }
.figure--ink img{ mix-blend-mode:multiply; }

/* 构件分解五联 */
.parts-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.8vw,30px);
  align-items:end;
}
.parts-grid__item{
  margin:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding:clamp(10px,1.4vw,20px) clamp(6px,0.8vw,12px);
  min-height:clamp(180px,24vh,320px);
  transition:transform .55s var(--ease);
}
.parts-grid__item:hover{ transform:translateY(-5px); }
.parts-grid__item img{
  max-height:clamp(160px,21vh,290px);
  width:auto; max-width:100%;
  mix-blend-mode:multiply;
}

/* 爆炸图 */
.explode-figure{ margin:0 auto var(--gap-block); max-width:1240px; }
.explode-figure__img{
  width:100%; mix-blend-mode:multiply;
}

/* ---------- 11. 建筑类型卡 ---------- */
.building-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,34px);
}
.building-card{
  padding:clamp(12px,1.4vw,20px);
  transition:transform .6s var(--ease);
}
.building-card:hover{ transform:translateY(-5px); }
.building-card__img{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; overflow:hidden;
}
.building-card__img img{ max-height:100%; width:auto; mix-blend-mode:multiply; }
.building-card h4{
  font-size:clamp(15px,1.1vw,20px);
  letter-spacing:0.1em; color:var(--cinnabar);
  margin-bottom:6px;
}
.building-card__meta{
  font-size:var(--fs-caption); color:var(--gold);
  letter-spacing:0.08em; margin-bottom:8px;
}
.building-card__spec{
  font-size:calc(var(--fs-caption) * .96); line-height:1.85;
  color:var(--ink-mid); margin-bottom:6px;
}
.building-card__desc{
  font-size:var(--fs-caption); line-height:1.8;
  color:var(--ink-faint);
}

/* ---------- 12. 建造六步 ---------- */
.process{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.8vw,28px);
  counter-reset:step;
}
.process__step{ position:relative; text-align:center; }
.process__num{
  display:block;
  font-family:var(--font-kai);
  font-size:14px; letter-spacing:0.2em;
  color:var(--gold);
  margin-bottom:10px;
}
.process__img{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  padding:8px;
}
.process__img img{ max-height:100%; width:auto; mix-blend-mode:multiply; }
.process__step h4{
  font-size:clamp(15px,1.1vw,19px);
  letter-spacing:0.12em; color:var(--cinnabar);
  margin-bottom:8px;
}
.process__step p{
  font-size:var(--fs-caption); line-height:1.9;
  color:var(--ink-mid);
}
/* 步骤之间的连接线 */
.process__step:not(:last-child)::after{
  content:'';
  position:absolute; top:calc(50% - 40px); right:calc(-1 * clamp(7px,0.9vw,14px) - 1px);
  width:clamp(14px,1.8vw,28px); height:1px;
  background:linear-gradient(90deg, var(--paper-edge), transparent);
}

/* ---------- 13. 版筑夯土 ---------- */
.tamping{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:clamp(32px,5vw,76px);
  align-items:center;
  margin-bottom:clamp(48px,7vh,88px);
}
.tamping__steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.tamping__step{ margin:0; text-align:center; }
.tamping__step img{
  width:100%; height:auto; margin-bottom:12px;
  mix-blend-mode:multiply;
}
.tamping__step figcaption{
  font-family:var(--font-kai);
  font-size:clamp(13px,1vw,17px);
  letter-spacing:0.16em; color:var(--cinnabar);
}
.figure--scroll img{ margin:0 auto; width:auto; max-height:clamp(280px,46vh,560px); }
.tamping--full{ grid-template-columns:1fr; }

/* 三合土配比 */
.mix{ }
.mix__title{
  font-size:clamp(19px,1.5vw,26px);
  letter-spacing:0.14em; color:var(--cinnabar);
  margin-bottom:clamp(20px,3vh,34px);
}
.mix__legend{
  display:flex; flex-wrap:wrap; gap:clamp(18px,2.6vw,44px);
  margin:clamp(20px,3vh,34px) 0;
  font-size:var(--fs-body);
}
.mix__item{ display:flex; align-items:center; gap:9px; color:var(--ink-mid); }
.mix__item i{
  width:11px; height:11px; background:var(--c);
  border:1px solid rgba(0,0,0,.14); flex:none;
}

/* ---------- 14. 材料环图 ---------- */
.material-rings{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(32px,5vw,76px); align-items:center;
}
.material-legend{ display:flex; flex-direction:column; gap:20px; }
.material-legend__group h5{
  display:flex; align-items:center; gap:9px;
  font-size:clamp(15px,1.1vw,20px);
  letter-spacing:0.18em; color:var(--cinnabar);
  margin-bottom:6px;
}
/* 色点：与环图颜色对应 */
.material-legend__group h5 i{
  width:11px; height:11px; flex:none;
  border-radius:50%;
  background:var(--c, var(--ink-mid));
  border:1px solid rgba(120,105,75,.24);
}
.material-legend__group p{
  font-size:var(--fs-body); line-height:1.9;
  color:var(--ink-mid); letter-spacing:0.06em;
}

/* ---------- 15. 五色 ---------- */
.five-colors{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2.2vw,32px);
}
.five-colors__item{ text-align:center; }
.five-colors__swatch{
  display:block;
  width:clamp(56px,5vw,84px); height:clamp(56px,5vw,84px);
  margin:0 auto clamp(14px,2vh,22px);
  border-radius:50%;
  background:var(--c);
  border:1px solid rgba(120,105,75,.22);
  box-shadow:inset 0 0 26px rgba(0,0,0,.1);
}
.five-colors__item h5{
  font-size:clamp(16px,1.2vw,21px);
  letter-spacing:0.2em; color:var(--ink);
  margin-bottom:4px;
}
.five-colors__item p{
  font-size:var(--fs-caption); letter-spacing:0.14em;
  color:var(--ink-mid);
}

/* ---------- 16. 建筑装饰三联 ---------- */
.deco-triptych{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4.5vw,72px);
}
.deco-triptych__col{ text-align:center; }
.deco-triptych__ring{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:clamp(18px,2.6vh,30px);
}
.deco-triptych__ring > img:first-child{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; mix-blend-mode:multiply;
}
.deco-triptych__core{
  position:relative; z-index:1;
  width:58%; height:auto;
  mix-blend-mode:multiply;
}
.deco-triptych__col h4{
  font-size:clamp(18px,1.4vw,25px);
  letter-spacing:0.2em; color:var(--cinnabar);
  margin-bottom:12px;
}
.deco-tags{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.deco-tags li{
  font-size:var(--fs-caption);
  letter-spacing:0.12em;
  color:var(--ink-mid);
  padding:3px 12px;
  border:1px solid var(--paper-edge);
  border-radius:2px;
}

/* ---------- 17. 中轴秩序 ---------- */
.axis-list{
  display:grid; gap:0;
  border-top:1px solid var(--paper-edge);
  margin-bottom:clamp(40px,6vh,72px);
}
.axis-list li{
  display:grid; grid-template-columns:clamp(80px,9vw,150px) 1fr;
  gap:clamp(18px,2.6vw,40px);
  align-items:baseline;
  padding:clamp(16px,2.4vh,26px) 0;
  border-bottom:1px solid var(--paper-edge);
}
.axis-list__name{
  font-family:var(--font-kai);
  font-size:clamp(17px,1.35vw,24px);
  letter-spacing:0.16em; color:var(--cinnabar);
}
.axis-list__desc{
  font-size:var(--fs-body); line-height:1.95;
  color:var(--ink-mid); letter-spacing:0.04em;
}

/* 尺寸数据 */
.dim-list{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2.2vw,32px);
  padding:clamp(28px,4vh,48px) 0;
  border-top:1px solid var(--paper-edge);
  border-bottom:1px solid var(--paper-edge);
}
.dim{ text-align:center; }
.dim__num{
  font-family:var(--font-song);
  font-size:var(--fs-num);
  font-weight:300;
  color:var(--cinnabar);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.dim__unit{
  font-size:clamp(14px,1vw,19px);
  color:var(--cinnabar-lt); margin-left:3px;
}
.dim__label{
  display:block; margin-top:10px;
  font-size:var(--fs-caption); letter-spacing:0.16em;
  color:var(--ink-mid);
}

/* ---------- 18. 防御体系 ---------- */
.defense-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,34px);
  margin-bottom:clamp(40px,6vh,72px);
}
.defense-card{
  padding:clamp(20px,2.4vw,32px);
  border:1px solid var(--paper-edge);
  border-top:2px solid var(--cinnabar);
  background:rgba(255,254,248,.45);
  transition:background .6s var(--ease), transform .6s var(--ease);
}
.defense-card:hover{ background:rgba(255,254,248,.9); transform:translateY(-4px); }
.defense-card h4{
  font-size:clamp(16px,1.2vw,22px);
  letter-spacing:0.14em; color:var(--cinnabar);
  margin-bottom:12px;
}
.defense-card p{
  font-size:var(--fs-body); line-height:1.95;
  color:var(--ink-mid);
}

/* ---------- 19. 四瑞图（四张并列，图片框等高）---------- */
.ruitu-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,38px);
}
.ruitu-card{
  margin:0; text-align:center;
  padding:clamp(10px,1.4vw,20px) clamp(6px,0.8vw,14px) clamp(12px,1.6vh,20px);
  transition:transform .55s var(--ease);
}
.ruitu-card:hover{ transform:translateY(-5px); }
/* 等高图框：四张画幅比例不同，统一装进同高容器，底对齐 */
.ruitu-card__img{
  height:clamp(190px,24vh,300px);
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:clamp(14px,2vh,22px);
}
.ruitu-card__img img{
  max-height:100%; max-width:100%;
  width:auto; height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.ruitu-card figcaption{ display:flex; flex-direction:column; gap:5px; }
.ruitu-card strong{
  font-family:var(--font-brush);
  font-weight:400;
  font-size:clamp(17px,1.3vw,23px);
  letter-spacing:0.16em; color:var(--cinnabar);
}
.ruitu-card span{
  font-size:var(--fs-caption); letter-spacing:0.22em; color:var(--ink-mid);
}

/* ---------- 19b. 堪舆文化（图左文右三栏）---------- */
.kanju{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:clamp(24px,3.4vw,56px);
  align-items:start;
}
.kanju__figure{ margin:0; text-align:center; }
.kanju__img{
  height:clamp(210px,27vh,330px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(6px,0.8vw,14px);
  margin-bottom:clamp(12px,1.8vh,20px);
}
.kanju__img img{
  max-height:100%; max-width:100%;
  width:auto; height:auto; object-fit:contain;
  mix-blend-mode:multiply;
}
.kanju__text .couplet{ margin-top:0; }
.kanju__text .body-text{ margin-top:clamp(20px,3vh,32px); }

/* ---------- 20. 联语 ---------- */
.couplet{
  margin:clamp(24px,3.6vh,44px) 0;
  padding:clamp(28px,4vh,48px) clamp(24px,3vw,48px);
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(205,167,64,.07), transparent);
}
.couplet p{
  font-family:var(--font-brush);
  font-size:clamp(19px,1.6vw,29px);
  letter-spacing:0.2em; line-height:1.95;
  color:var(--ink);
}
.couplet p + p{ margin-top:6px; }

/* ---------- 21. 非遗卡 ---------- */
.heritage-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2.2vw,32px);
}
.heritage-card{ text-align:center; }
.heritage-card__img{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.heritage-card__img img{ max-height:100%; width:auto; mix-blend-mode:multiply; }
.heritage-card h4{
  font-size:clamp(15px,1.15vw,20px);
  letter-spacing:0.14em; color:var(--cinnabar);
  margin-bottom:8px;
}
.heritage-card p{
  font-size:var(--fs-caption); line-height:1.85;
  color:var(--ink-mid);
}

/* ---------- 22. 方法说明 ---------- */
.method-note{
  display:grid; gap:10px;
  margin-bottom:clamp(28px,4vh,48px);
  padding-left:2px;
}
.method-note p{
  font-size:var(--fs-body); color:var(--ink-mid);
  letter-spacing:0.04em;
}
.method-note span{
  display:inline-block;
  min-width:88px;
  font-family:var(--font-kai);
  letter-spacing:0.16em;
  color:var(--cinnabar);
}

.conclusion{
  margin-top:clamp(32px,5vh,64px);
  padding:clamp(28px,4vh,48px) clamp(24px,3vw,52px);
  border-left:2px solid var(--cinnabar);
  background:linear-gradient(90deg, rgba(105,23,29,.055), transparent);
}
.conclusion__label{
  font-family:var(--font-kai);
  font-size:clamp(13px,1vw,17px);
  letter-spacing:0.4em; color:var(--cinnabar);
  margin-bottom:14px;
}
.conclusion__text{
  font-family:var(--font-kai);
  font-size:var(--fs-lead);
  line-height:2.1; letter-spacing:0.05em;
  color:var(--ink);
}
.conclusion__text strong{ color:var(--cinnabar); font-weight:500; }

/* ---------- 23. 保护名录 ---------- */
.registry{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
}
.registry__tier{
  padding:clamp(26px,3.4vw,44px) clamp(22px,2.6vw,36px);
  border:1px solid var(--paper-edge);
  background:rgba(255,254,248,.5);
  position:relative;
}
.registry__tier::before{
  content:''; position:absolute; top:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--cinnabar), transparent);
}
.registry__tier h4{
  font-size:clamp(15px,1.15vw,20px);
  letter-spacing:0.1em; color:var(--cinnabar);
  line-height:1.7; margin-bottom:clamp(16px,2.4vh,28px);
}
.registry__num{
  font-family:var(--font-song);
  font-size:var(--fs-num); font-weight:300;
  color:var(--ink); font-variant-numeric:tabular-nums;
  line-height:1; margin-bottom:clamp(16px,2.4vh,26px);
}
.registry__num span{
  font-size:.34em; margin-left:6px;
  color:var(--ink-mid); letter-spacing:0.1em;
}
.registry__note{
  font-size:var(--fs-caption); line-height:1.95;
  color:var(--ink-mid);
}

/* ---------- 24. 活化形式 ---------- */
.revival-block{ position:relative; overflow:hidden; }
/* 背后的水墨底衬 */
.revival-block__ink{
  position:absolute;
  right:-16%; bottom:-22%;
  width:min(52vw,720px);
  opacity:.2;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.revival{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(30px,4.4vh,54px);
  position:relative;
}
.revival li{
  position:relative;
  padding:clamp(26px,3.6vh,44px) clamp(18px,2vw,30px);
  text-align:center;
  border-top:2px solid var(--cinnabar);
  background:rgba(255,254,248,.58);
  transition:background .6s var(--ease), transform .6s var(--ease);
}
.revival li:hover{ background:rgba(255,254,248,.95); transform:translateY(-5px); }
.revival__icon{
  display:flex; align-items:center; justify-content:center;
  width:clamp(46px,3.8vw,62px); height:clamp(46px,3.8vw,62px);
  margin:0 auto clamp(14px,2vh,22px);
  font-family:var(--font-brush);
  font-size:clamp(20px,1.6vw,28px);
  color:var(--paper);
  background:var(--cinnabar);
  border-radius:50%;
  box-shadow:0 5px 16px -8px rgba(105,23,29,.5);
}
.revival li h4{
  font-family:var(--font-brush);
  font-size:clamp(17px,1.3vw,23px);
  letter-spacing:0.14em;
  color:var(--ink);
  margin-bottom:clamp(10px,1.6vh,16px);
}
.revival li h4 strong{ font-weight:400; color:var(--gold); margin:0 .18em; }
.revival li p{
  font-family:var(--font-song);
  font-size:var(--fs-body);
  line-height:1.95; letter-spacing:0.03em;
  color:var(--ink-mid);
}
/* 活化实例图 */
.revival-block__figure{
  position:relative;
  margin:clamp(40px,6vh,72px) auto 0;
  max-width:min(560px,62%);
  text-align:center;
}
.revival-block__figure img{
  width:100%; height:auto;
  mix-blend-mode:multiply;
}

/* ---------- 25. 印章 ---------- */
.seal-block{ margin-top:clamp(64px,10vh,130px); text-align:center; }
/* 「围龙 / 传薪」两字一行，共两行 —— 仿篆刻印面 */
.seal{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(88px,7.4vw,124px); height:clamp(88px,7.4vw,124px);
  padding:clamp(11px,1vw,17px);
  font-family:var(--font-brush);
  font-size:clamp(21px,1.7vw,29px);
  line-height:1.16;
  letter-spacing:0.04em;
  color:#FDFAF0;
  background:var(--seal);
  border-radius:3px;
  box-shadow:0 7px 26px -11px rgba(176,58,46,.6);
  transform:rotate(-4deg);
  opacity:.93;
  white-space:nowrap;
}
/* 印面内侧留一道白边，像真的刻边 */
.seal::after{
  content:'';
  position:absolute; inset:5px;
  border:1px solid rgba(253,250,240,.40);
  border-radius:2px;
  pointer-events:none;
}

/* ---------- 26. 图表占位 ---------- */
.chart-slot{
  position:relative;
  min-height:clamp(260px,38vh,440px);
  border:1px dashed rgba(140,133,119,.34);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(240,234,214,.28) 0 12px, transparent 12px 24px);
}
.chart-slot--wide{ min-height:clamp(320px,46vh,540px); }
.chart-slot--tall{ min-height:clamp(420px,62vh,720px); }
.chart-slot__placeholder{
  font-family:var(--font-kai);
  font-size:clamp(13px,1vw,17px);
  letter-spacing:0.2em;
  color:var(--ink-faint);
  text-align:center;
  padding:20px;
}

/* 「待补数据」面板：说明缺口，不伪造数据 */
.chart-pending{
  min-height:clamp(220px,32vh,380px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  padding:clamp(32px,5vh,64px) 24px;
  border:1px dashed rgba(140,133,119,.4);
  border-radius:2px;
  background:repeating-linear-gradient(45deg, rgba(240,234,214,.26) 0 12px, transparent 12px 24px);
  text-align:center;
}
.chart-pending__title{
  font-family:var(--font-kai);
  font-size:clamp(17px,1.4vw,24px);
  letter-spacing:0.16em;
  color:var(--cinnabar);
}
.chart-pending__need{
  font-family:var(--font-song);
  font-size:var(--fs-caption);
  letter-spacing:0.06em;
  color:var(--ink-mid);
  max-width:520px;
  line-height:1.95;
}

/* SVG 图表容器 */
[data-chart] > svg{ display:block; }
[data-chart]{ padding:clamp(8px,1.6vh,24px) 0; }

/* ---------- 27. 页脚 ---------- */
.site-footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,10vh,120px) var(--gutter) clamp(48px,7vh,80px);
  text-align:center;
  border-top:1px solid var(--paper-edge);
}
.site-footer p{
  font-family:var(--font-kai);
  font-size:clamp(13px,1vw,17px);
  letter-spacing:0.22em;
  color:var(--ink-mid);
}
.site-footer__meta{
  margin-top:14px;
  font-family:var(--font-song) !important;
  font-size:var(--fs-caption);
  letter-spacing:0.06em;
  color:var(--ink-faint) !important;
}

/* ---------- 28. 素材占位（图片未到位时） ---------- */
img.asset:not([src]),
img.asset[src=""],
img.asset.is-missing{ visibility:hidden; }

.asset-fallback{
  display:flex; align-items:center; justify-content:center;
  min-height:80px;
  border:1px dashed rgba(140,133,119,.4);
  border-radius:2px;
  font-family:var(--font-kai);
  font-size:12px; letter-spacing:0.14em;
  color:var(--ink-faint);
  background:rgba(240,234,214,.3);
  text-align:center; padding:12px;
  width:100%;
}

/* ---------- 29. 入场动效基态 ---------- */
@media (prefers-reduced-motion: no-preference){
  .will-reveal{ opacity:0; }
}

/* ---------- 30. 窄屏降级（本设计面向大屏，仅作兜底） ---------- */
@media (max-width:1100px){
  .block--split,
  .block__split-text,
  .tamping,
  .material-rings,
  .ruitu{ grid-template-columns:1fr; }

  .building-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(3,1fr); }
  .defense-grid,
  .heritage-grid,
  .five-colors{ grid-template-columns:repeat(2,1fr); }
  .dim-list{ grid-template-columns:repeat(3,1fr); }
  .registry,
  .revival{ grid-template-columns:1fr; }
  .tamping__steps{ grid-template-columns:repeat(2,1fr); }
  .deco-triptych{ grid-template-columns:1fr; }
  .chapter-nav{ display:none; }
}


/* ---------- 31. 背景音乐开关 ---------- */
.bgm-toggle{
  position:fixed; left:clamp(16px,2.4vw,40px); bottom:clamp(16px,3vh,36px);
  z-index:55;
  display:flex; align-items:center; gap:9px;
  padding:8px 16px 8px 8px;
  border:none; border-radius:40px;
  background:rgba(249,246,231,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 22px -14px rgba(58,52,40,.6);
  cursor:pointer;
  font-family:var(--font-kai);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.bgm-toggle:hover{ background:rgba(252,250,242,.95); box-shadow:0 10px 28px -16px rgba(105,23,29,.5); }

.bgm-toggle__ring{
  width:34px; height:34px; flex:none;
  border-radius:50%;
  border:1px solid var(--cinnabar-lt);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.bgm-toggle__icon{
  font-family:var(--font-brush);
  font-size:16px; line-height:1;
  color:var(--cinnabar-lt);
  transition:color .5s var(--ease);
}
.bgm-toggle__label{
  font-size:12px; letter-spacing:0.2em;
  color:var(--ink-mid);
  transition:color .5s var(--ease);
}
/* 播放中：朱印实心 + 呼吸 */
.bgm-toggle.is-on .bgm-toggle__ring{
  background:var(--cinnabar);
  border-color:var(--cinnabar);
  animation:bgm-pulse 2.6s var(--ease) infinite;
}
.bgm-toggle.is-on .bgm-toggle__icon{ color:var(--paper); }
.bgm-toggle.is-on .bgm-toggle__label{ color:var(--cinnabar); }
/* 自动播放被拦下时：金色呼吸圈，提示可以点 */
.bgm-toggle.is-pending .bgm-toggle__ring{
  border-color:var(--gold);
  animation:bgm-pending 2.4s var(--ease) infinite;
}
.bgm-toggle.is-pending .bgm-toggle__icon{ color:var(--gold); }
.bgm-toggle.is-pending .bgm-toggle__label{ color:var(--gold); }
@keyframes bgm-pending{
  0%,100%{ box-shadow:0 0 0 0 rgba(205,167,64,.55); }
  50%    { box-shadow:0 0 0 8px rgba(205,167,64,0); }
}

@keyframes bgm-pulse{
  0%,100%{ transform:scale(1);    opacity:1;   }
  50%    { transform:scale(1.07); opacity:.82; }
}
@media (prefers-reduced-motion: reduce){
  .bgm-toggle.is-on .bgm-toggle__ring{ animation:none; }
}


/* ---------- 32. 页脚署名 ---------- */
.site-footer__credits{
  margin-top: clamp(20px, 3vh, 34px);
  padding-top: clamp(18px, 2.6vh, 30px);
  border-top: 1px solid var(--paper-edge);
  font-family: var(--font-kai);
  font-size: clamp(13px, 1vw, 18px);
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  line-height: 2.1;
}
.site-footer__cLabel{
  display: inline-block;
  margin-right: 0.9em;
  font-family: var(--font-brush);
  font-size: 1.06em;
  letter-spacing: 0.2em;
  color: var(--cinnabar);
}
/* 两组之间的分隔 */
.site-footer__credits em{
  display: inline-block;
  width: 1px; height: 1.05em;
  margin: 0 1.6em;
  vertical-align: -0.14em;
  background: var(--paper-edge);
}