/* Cheney · 个人主页 —— 全站共用样式
   首页与各文章页共用这一份，改一处即全站生效。
   原先内联在 index.html 里；拆成独立文章页后必须外链，否则每页都要复制千余行。 */
/* ============================================================
   宣纸手卷 · 设计令牌
   风格基调由用户指定：宣纸米 #f5f0e6 / 朱砂 #c23a2b / 鎏金 #b8860b
   ------------------------------------------------------------
   刻度：VARIANCE 7 / MOTION 5 / DENSITY 4
   唯一强调色 = 朱砂。鎏金只做细线与边框，不参与强调。
   圆角系统 = 0（碑帖、卷轴皆直角），全站统一。
   ============================================================ */
:root{
  /* 纸 */
  --paper:      #f5f0e6;
  --paper-2:    #ebe2d1;
  --paper-3:    #e0d5bd;
  /* 墨 */
  --ink:        #2c1810;
  --ink-2:      #5a3a28;
  /* 淡墨：定在 #755c4d 而非更浅的 #8b7261。
     宣纸底 #f5f0e6 上 3.95:1 不达标；此值在纸上 5.45:1、在纸阴上 4.81:1，
     正文与次要文字均过 WCAG AA。 */
  --ink-3:      #755c4d;
  /* 朱砂（唯一强调色） */
  --zhu:        #c23a2b;
  --zhu-deep:   #9b2c20;
  /* 鎏金（仅细线 / 边框 / 印边） */
  --jin:        #b8860b;
  --jin-lt:     #d4a843;
  /* 界线 */
  --rule:       rgba(44,24,16,.14);
  --rule-soft:  rgba(44,24,16,.07);
  --shadow:     0 1px 2px rgba(44,24,16,.05), 0 18px 40px -22px rgba(44,24,16,.28);

  --ease:       cubic-bezier(.16,1,.3,1);
  --dur:        .5s;

  --pad:        clamp(1.25rem, 5vw, 3.25rem);
  --wrap:       76rem;
  /* 版心 38rem ≈ 36 字。原 44rem 折合 41 字，超出中文正文 25 至 38 字的舒适区。 */
  --read:       38rem;

  /* z 轴分层，全站只此五层 */
  /* 进度条必须在顶栏之上。原先 60 < 顶栏 80，整条被盖住，等于没做。 */
  --z-progress: 90;
  --z-nav:      80;
  --z-drawer:   100;
  --z-skip:     150;
  --z-grain:    900;

  --font-brush: 'Ma Shan Zheng', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-head:  'ZCOOL XiaoWei', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-body:  'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
  /* 毛草一路。真正的「毛体」字库非开源，此为 Google Fonts 上最接近的免费替代。
     仅用于题款式的短句，绝不可用于正文：草书长文不可读。 */
  --font-mao:   'Liu Jian Mao Cao', 'Ma Shan Zheng', 'Noto Serif SC', 'STSong', serif;
}

*{ box-sizing:border-box; }
/* 两条都不要设，都是实测踩过的坑：

   1) scroll-padding-top —— 它同时把滚动吸附的吸附区往里缩，导致每页都停在
      吸附点上方那么多像素：上一页露一截、下一页底部被切一截。
      锚点跳转不会顶到导航，因为每节自己有 80px 上内边距（大于导航的 64px）。

   2) scroll-behavior: smooth —— 它和吸附各自的落位动画会叠加，
      触控板上表现为「先飘一段、再被拽过去」，就是那种不稳的手感。
      去掉后锚点跳转变为直达，落点本就精确在吸附点上，反而更干净。 */
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15.5px, .42vw + 14.4px, 17px);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  /* overflow-x 用 clip 而非 hidden：hidden 会让 body 变成滚动容器，
     使后代的 position:sticky 失效（层叠就没了）。clip 不建滚动容器。 */
  overflow-x:hidden;
  overflow-x:clip;
}

/* 纸纹：只挂在固定层，不挂在滚动容器上（避免移动端持续重绘） */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(184,134,11,.045), transparent 60%),
    radial-gradient(ellipse 50% 45% at 84% 78%, rgba(194,58,43,.035), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--zhu); outline-offset:3px; }
::selection{ background:rgba(194,58,43,.18); }

/* 朱砂滚动进度：纯 CSS 滚动驱动，无 scroll 监听 */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:var(--z-progress);
  background:var(--zhu);
  transform:scaleX(0); transform-origin:0 50%;
}
@supports (animation-timeline: scroll()){
  .scroll-progress{
    animation:grow-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes grow-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

/* 跳到正文：首屏有二十来条诗句链接，键盘用户不应被迫逐条 Tab 过去 */
.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:var(--z-skip);
  padding:.6rem 1rem; background:var(--paper); color:var(--ink);
  border:1px solid var(--zhu); text-decoration:none; font-size:.85rem;
  transform:translateY(-220%); transition:transform .2s var(--ease);
}
.skip:focus{ transform:translateY(0); }

/* ===================== 顶部导航 ===================== */
.nav{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:var(--z-nav);
  background:linear-gradient(to bottom, rgba(245,240,230,.97), rgba(245,240,230,.84));
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-scrolled{ box-shadow:0 2px 22px -10px rgba(44,24,16,.35); border-bottom-color:var(--paper-3); }
.nav-inner{
  max-width:var(--wrap); margin-inline:auto; height:100%;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
}
.brand{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; white-space:nowrap; }
.brand-name{ font-family:var(--font-head); font-size:1.4rem; letter-spacing:.14em; color:var(--zhu-deep); line-height:1; }
.brand-sub{ font-size:.7rem; letter-spacing:.32em; color:var(--ink-3); }

.nav-list{ display:flex; align-items:center; list-style:none; margin:0; padding:0; flex-wrap:nowrap; }
.nav-list li{ display:flex; align-items:center; }
.nav-list li + li::before{ content:''; width:1px; height:12px; background:var(--rule); }
.nav-list a{
  display:block; padding:.34rem .6rem; white-space:nowrap;
  font-size:.815rem; letter-spacing:.04em; color:var(--ink-2); text-decoration:none;
  position:relative; transition:color .22s var(--ease);
}
/* 下划线走 scaleX，不动 left/right（后者每帧触发重排） */
.nav-list a::after{
  content:''; position:absolute; left:.6rem; right:.6rem; bottom:.1rem; height:1px;
  background:var(--zhu); transform:scaleX(0); transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav-list a:hover, .nav-list a:focus-visible{ color:var(--zhu-deep); }
.nav-list a:hover::after, .nav-list a:focus-visible::after, .nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a.is-active{ color:var(--zhu-deep); }

.menu-btn{
  display:none; width:40px; height:34px; padding:0; border:1px solid var(--rule);
  background:transparent; cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.menu-btn span{ display:block; width:17px; height:1px; background:var(--ink-2); transition:transform .3s var(--ease), opacity .2s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* 抽屉：宣纸整幅 */
/* 收起态必须整体退到视口之外。抽屉高度 = 100vh - 64px，
   所以 -100% 只等于 -(100vh-64px)，位移后下边缘仍落在 y≈56px，会压住顶栏。
   必须用 calc(-100% - 64px)。
   visibility 断开 Tab 焦点，避免键盘走进隐藏的抽屉。 */
.drawer{
  position:fixed; inset:64px 0 0 0; z-index:var(--z-drawer);
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  transform:translateY(calc(-100% - 64px));
  visibility:hidden;
  transition:transform .45s var(--ease), visibility 0s linear .45s;
  overflow-y:auto;
}
.drawer[data-open="true"]{
  transform:translateY(0);
  visibility:visible;
  transition:transform .45s var(--ease), visibility 0s;
}
.drawer ul{ list-style:none; margin:0; padding:1.75rem var(--pad) 3rem; }
.drawer li + li{ border-top:1px solid var(--rule-soft); }
.drawer a{
  display:flex; align-items:baseline; gap:.85rem; padding:.85rem .25rem;
  text-decoration:none; color:var(--ink); font-family:var(--font-head);
  font-size:1.35rem; letter-spacing:.14em;
}
.drawer a small{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; color:var(--ink-3); }
.drawer a:active{ transform:translateY(1px); }

/* ===================== 通用骨架 ===================== */
/* 整节层叠：每节钉在顶部，下一节从下方压上来盖住它。
   背景必须不透明，否则会透出下面那一层。
   top:0 而内容不被固定导航遮住，靠的是节自身的上内边距（约 120px）大于导航的 64px。
   上内边距已从 4.25 至 7.5rem 收到 3.25 至 5rem：一屏要装得下一节。 */
/* 钉住：下一节从下方推上来时，这一节留在原地被盖住 —— 就是「覆盖」的手感。
   曾经因为 sticky 与 CSS scroll-snap 硬冲突而撤掉（sticky 的吸附区跟着粘附位置走，
   所有已钉住的节吸附区重合在视口顶部，向上滚无处可停、整页滚不上去）。
   现在翻页已由脚本接管、CSS 吸附已删，冲突不复存在，故请回 sticky。
   注意：超一屏的节由 .no-stack 摘掉 sticky，否则下半截永远滚不出来。 */
.juan{
  position:sticky; top:0;
  min-height:100vh;
  background:var(--paper);
  padding-block:clamp(2.85rem, 5.4vw, 4.4rem);
  border-top:1px solid var(--paper-3);
  box-shadow:0 -18px 30px -24px rgba(44,24,16,.4);
}
/* 内容高于视口时不钉住 —— 钉住会把下半截永久压掉、再也滚不出来。
   由 JS 按实测高度挂 .no-stack：你以后往里填真内容，它会自动退让。 */
.juan.no-stack{ position:relative; }
/* 叠缝上的菱花：原先节间那道分隔条在层叠下会浮在上一层上面，故收掉了 */
.juan::before{
  content:''; position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  width:13px; height:13px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8860b' stroke-width='1.1'%3E%3Cpath d='M8 1.6 14.4 8 8 14.4 1.6 8Z'/%3E%3Cpath d='M8 5.6 10.4 8 8 10.4 5.6 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 节间分隔条在层叠下会浮在上一层之上，收掉；菱花已移到每节的叠缝上 */
.rift{ display:none; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.measure{ max-width:var(--read); }

/* 题额：双金线 + 大标题 + 诗句（用户认可的形式，保留） */
.juan-head{ text-align:center; margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem); }
.juan-title{
  position:relative; display:inline-block; margin:0;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.85rem, 4.1vw, 2.7rem);
  letter-spacing:.16em; text-indent:.16em; color:var(--ink);
}
.juan-title::before, .juan-title::after{
  content:''; position:absolute; top:53%; height:1px;
  width:clamp(2.25rem, 7vw, 5rem);
}
.juan-title::before{ right:calc(100% + .95rem); background:linear-gradient(to right, transparent, var(--jin) 40%, var(--jin)); }
.juan-title::after{ left:calc(100% + .95rem);  background:linear-gradient(to left,  transparent, var(--jin) 40%, var(--jin)); }
.juan-poem{ margin:.95rem 0 0; font-size:clamp(.88rem,1.45vw,1.02rem); letter-spacing:.2em; color:var(--ink-3); }

/* 卷段分隔：回纹 */
/* 节间分隔条收掉：整页层叠下它会浮在被盖住的上一页之上；
   每节顶边本来就有细线 + 投影 + 菱花充当叠缝，重复了。
   （曾经以为收掉了其实没有 —— 一个 display:none 在某次改动中丢了，
   11 条各占 32px，让节间距从 900 变成 932，翻页落点因此每次都偏 32px。） */
.rift{ display:none; }
.rift span{ height:1px; flex:1; max-width:22rem; background:linear-gradient(to right, transparent, var(--rule), transparent); }
.rift svg{ width:16px; height:16px; color:var(--jin); flex:none; opacity:.8; }

/* ===================== 待补占位系统 =====================
   内容由用户后续逐一补充。占位一律走这套样式，
   使得「框架」本身看起来是设计的一部分，而非未完成。 */
.slot{
  position:relative; display:grid; place-items:center; text-align:center;
  border:1px dashed rgba(194,58,43,.32);
  background:linear-gradient(0deg, rgba(224,213,189,.42), rgba(224,213,189,.42));
  color:var(--ink-3); font-size:.78rem; letter-spacing:.22em;
}
.slot::before, .slot::after{ content:''; position:absolute; width:9px; height:9px; border:1px solid rgba(194,58,43,.45); }
.slot::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.slot::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* 朱砂在纸阴底上只有 4.15:1，小字改用深朱（6.03:1） */
/* 0.68rem = 10.88px，低于功能性文字 11px 的下限，故抬到 0.72rem */
.slot-tag{ font-size:.72rem; letter-spacing:.3em; color:var(--zhu-deep); }

/* 行内占位文本 */
.ph{ font-style:normal; color:var(--ink-3); border-bottom:1px dotted rgba(194,58,43,.45); padding-bottom:1px; }

/* ===================== 开篇 ===================== */
.hero{
  /* 首屏也钉住做最底层：从第一下翻页起就是「新页盖上来」 */
  position:sticky; top:0; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6rem var(--pad) 4rem;
  overflow:hidden; text-align:center;
}
.hero-ridge{ position:absolute; inset:auto 0 0 0; height:clamp(190px, 34vh, 340px); z-index:0; pointer-events:none; }
.hero-ridge svg{ width:100%; height:100%; display:block; }
/* 三层墨色递进。既要有纵深，又不能把页脚压成一块黑板：
   近山若太黑，全页最重的色块就落在首屏底部，视线被往下拽。
   故整体压轻，只保留明确的远中近差。 */
.hero-ridge .r1{ fill:rgba(44,24,16,.070); }
.hero-ridge .r2{ fill:rgba(44,24,16,.140); }
.hero-ridge .r3{ fill:rgba(44,24,16,.210); }
/* 三层各给自己的终态位移。原先共用一个 keyframes、只差 0.01s 延迟，
   在滚动时间轴上等于没有差别，三座山会像一块硬板整体平移，层次感为零。 */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero-ridge .r1{ animation:ridge-far  1.2s linear both; animation-timeline:scroll(root block); animation-range:0 100vh; }
    .hero-ridge .r2{ animation:ridge-mid  1.2s linear both; animation-timeline:scroll(root block); animation-range:0 100vh; }
    .hero-ridge .r3{ animation:ridge-near 1.2s linear both; animation-timeline:scroll(root block); animation-range:0 100vh; }
    @keyframes ridge-far { to{ transform:translateY(-74px) scale(1.09); } }
    @keyframes ridge-mid { to{ transform:translateY(-46px) scale(1.055); } }
    @keyframes ridge-near{ to{ transform:translateY(-20px) scale(1.025); } }
  }
}

/* ===== 开篇·诗句流 =====
   背景层，逐句自右向左横穿。淡墨低透明度，读作纹理；
   触及即整层暂停，便于点中；点开在新标签看全诗。 */
.hero-drift{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.drift-line{
  position:absolute; left:0; top:var(--y, 50%);
  display:inline-flex; align-items:baseline; gap:.55rem;
  white-space:nowrap; text-decoration:none;
  font-size:clamp(.78rem, 1.1vw, .94rem);
  letter-spacing:.14em; color:var(--ink-3);
  opacity:.34; pointer-events:auto;
  transform:translate3d(100vw, 0, 0);
  /* 用长写而非简写：简写里「1」和时长位置含糊。
     用 infinite 而非手动重启：每趟结束时由 animationiteration 换句子，
     但动画本身从不中断。手动重启（移除→回流→重挂）每次都有几毫秒延迟，
     一趟趟累积成相位漂移，跑上百趟后同轨两句会叠住。 */
  animation-name:drift-across;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:var(--dur, 60s);
  animation-delay:var(--delay, 0s);
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
/* 终点必须是固定像素位移，不能用 -100%（自身宽度）。
   用 -100% 时行进距离 = 100vw + 句宽，句越宽走得越快，
   同轨内宽句会追上窄句 —— 实测 840 次采样里叠了 344px。
   定值之后各行行进距离完全相同、速度一致，等时错开就等于等距，不会追尾。
   28rem 须大于最长一句（实测最长 360px）。 */
@keyframes drift-across{
  from{ transform:translate3d(100vw, 0, 0); }
  to  { transform:translate3d(-28rem, 0, 0); }
}
/* data-paused 由 JS 在鼠标触及诗句时挂上：移动的目标点不准，
   所以整层停住再让你点。同时其余句子淡出，只留悬停那句。 */
.hero-drift[data-paused] .drift-line{ animation-play-state:paused; opacity:.14; }
/* 必须排在暂停规则之后：两者特异性相同，靠顺序取胜 */
.hero-drift .drift-line:hover,
.hero-drift .drift-line:focus-visible{ opacity:1; color:var(--ink); }
/* 绝对定位：否则题名作者即使 opacity 为 0 仍占宽度，
   把句子撑宽三成，轨道间距被白白吃掉，快慢之间还显得忽宽忽窄。 */
.drift-meta{
  position:absolute; left:0; top:100%; margin-top:.3rem;
  white-space:nowrap;
  font-size:.68rem; letter-spacing:.1em; color:var(--zhu-deep);
  opacity:0; transition:opacity .3s var(--ease);
}
.hero-drift .drift-line:hover .drift-meta,
.hero-drift .drift-line:focus-visible .drift-meta{ opacity:1; }

/* 纸晕：与页面底色同色，看不出边界，只让诗句近中央时淡出。
   没有它，诗句会从名号和印章上穿过去，糊成一片。 */
.hero-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 44% 40% at 50% 47%,
    var(--paper) 0%, var(--paper) 40%, rgba(245,240,230,0) 76%);
}

.petals{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.petal{ position:absolute; top:-8%; border-radius:50% 0 50% 0; background:rgba(194,58,43,.3); animation:fall linear forwards; }
@keyframes fall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); opacity:0; }
  12%{ opacity:.85; }
  100%{ transform:translate3d(var(--drift, 40px), 108vh, 0) rotate(420deg); opacity:0; }
}

.hero-inner{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; }

/* 印章：全站唯一的高光时刻，落印入场。
   先定印面尺寸，印文按印面比例反推，否则字形偏小、像一枚跑偏的字符。 */
.seal{
  --seal: clamp(74px, 9vw, 94px);
  width:var(--seal); height:var(--seal);
  display:grid; place-items:center;
  border:2px solid var(--zhu); color:var(--zhu);
  font-family:var(--font-body); font-weight:600;
  font-size:calc(var(--seal) * .66); line-height:1;
  border-radius:3px;
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(194,58,43,.4);
}
/* 开篇的入场：一次编排好的连贯动作 —— 先落印，其后文字依次浮起。
   全站仅此一处入场编排，其余节奏交给滚动揭示。
   起始态（opacity:0）全部挂在 .js 之下：脚本没跑，首屏文字与印就默认可见，
   否则动画一旦不执行，首屏会是一片空白。 */
@media (prefers-reduced-motion: no-preference){
  .js .seal{ opacity:0; animation:stamp .62s cubic-bezier(.3,1.5,.5,1) .18s both; }
  @keyframes stamp{
    0%{ opacity:0; transform:scale(2.1) rotate(-9deg); }
    62%{ opacity:1; transform:scale(.94) rotate(1.5deg); }
    82%{ transform:scale(1.03) rotate(-1deg); }
    100%{ opacity:1; transform:scale(1) rotate(0); }
  }
  .js .hero-aspiration, .js .hero-name, .js .hero-tagline, .js .hero-quote{ animation:rise .7s var(--ease) both; }
  .js .hero-aspiration{ animation-delay:.44s; }
  .js .hero-name{ animation-delay:.52s; }
  .js .hero-tagline{ animation-delay:.62s; }
  .js .hero-quote{ animation-delay:.72s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
}

/* 志向：引首题额，压在名号之上 */
.hero-aspiration{
  margin:1.6rem 0 0;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--font-head);
  font-size:clamp(.85rem, 1.5vw, .98rem);
  letter-spacing:.5em; text-indent:.5em;
  color:var(--ink-2);
}
.hero-aspiration::before{ content:''; width:1.75rem; height:1px; background:var(--zhu); opacity:.65; }

/* 名号：已确认值，非占位。字距放宽，使其作为全卷的定音之笔。 */
.hero-name{
  margin:.85rem 0 0;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(2.9rem, 9.5vw, 5.6rem); line-height:1.12;
  letter-spacing:.12em; text-indent:.12em; color:var(--ink);
}
/* 草书要靠字号才立得住，且不能拉开字距——拉距会切断连笔，故改小到 .05em */
.hero-tagline{
  margin:1.35rem 0 0;
  font-family:var(--font-mao);
  font-size:clamp(1.2rem, 2.5vw, 1.65rem);
  letter-spacing:.05em; text-indent:.05em;
  line-height:1.5;
  color:var(--ink);
}
.hero-quote{
  margin:1.9rem 0 0; padding-top:1.5rem;
  max-width:34rem; font-size:clamp(.95rem,1.7vw,1.15rem); letter-spacing:.14em; color:var(--ink-2);
  border-top:1px solid var(--rule);
}
.hero-quote em{ font-style:normal; font-family:var(--font-head); letter-spacing:.16em; color:var(--ink); }

/* 卷展提示：无文字，仅云头 */
.hero-hint{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:4; opacity:.5; }
.hero-hint svg{ width:20px; height:26px; color:var(--jin); }
@media (prefers-reduced-motion: no-preference){
  .hero-hint{ animation:drift 2.8s ease-in-out infinite; }
  @keyframes drift{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
}

/* ===================== 关于我 · 左印右文 ===================== */
/* 圆框肖像 + 竖排引首并置。
   外圈那道虚线必须画在外层 .avatar-ring 上：.portrait 有 overflow:hidden
   用来把图裁成圆，画在它身上的 ::after 会被同一条规则一并裁掉。 */
/* 右栏定死在 34rem：原用 1fr 得到 680px，折合 40 字一行，
   远超中文正文 25 至 38 字的舒适区，文字永远填不满、右侧拖出一片死白。
   34rem ≈ 32 字，是正经的版心宽度。 */
.about-grid{ display:grid; grid-template-columns:minmax(0,23rem) minmax(0,34rem); gap:clamp(2rem,4.5vw,4rem); align-items:start; }
/* 引首移到头像下方后，左栏变成「画心在上、题款在下」，正是立轴的老规矩。
   头像不再与引首分栏，故可放大。 */
.about-scroll{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.avatar-ring{ position:relative; width:100%; max-width:17rem; aspect-ratio:1; margin-inline:auto; }
.avatar-ring::after{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:1px dashed rgba(184,134,11,.5); pointer-events:none;
}
.portrait{
  position:relative; width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  border:2px solid var(--jin); background:var(--paper-2);
}
.portrait img{ display:block; width:100%; height:100%; object-fit:cover; }
/* 竖排引首，两列，中间一道界行（古籍「乌丝栏」的做法）。
   两列各有各的 writing-mode，容器只做 flex 排布：
   竖排里换列若靠 <br> 生成，CSS 就抓不到「列」，column-rule 用不上，
   所以把两列写成显式元素，中间那根线才能作为独立项插进去。
   row-reverse 让 DOM 里先写的「前半句」落在右边——竖排自右向左，右列先读。 */
.about-vertical{
  display:flex; flex-direction:row-reverse; gap:.75rem;
  /* 缩到内容宽再居中：容器若撑满整栏，左边那道界行会跑到栏边、离字很远 */
  width:fit-content; margin:0 auto;
  font-family:var(--font-head); font-size:1.05rem; letter-spacing:.22em; line-height:1.8;
  color:var(--ink-2); border-left:1px solid var(--rule); padding-left:.9rem;
}
.av-col{ writing-mode:vertical-rl; text-orientation:upright; }
.av-rule{ width:1px; align-self:stretch; background:var(--rule); }
.about-vertical .ph{ border-bottom:0; border-left:1px dotted rgba(194,58,43,.45); padding-left:1px; }
/* 版心上限。900px 断点单栏化后，正文栏会撑到满宽、每行从 23 字跳到 44 字，
   又长又突兀。34rem 约 32 字，锁住版心，折行位置就不再随断点跳变。 */
.about-body{ max-width:34rem; }
.about-body p{ margin:0 0 1.15rem; color:var(--ink-2); }
.about-body p:last-of-type{ margin-bottom:0; }
/* 正文分四层语气：招呼 / 提要 / 策语 / 正文，靠字号与字距拉开，不靠加粗 */
.about-greet{
  margin:0 0 .9rem;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.3rem, 2.4vw, 1.6rem);
  letter-spacing:.08em; line-height:1.6; color:var(--ink);
}
.about-lead{
  margin:0 0 1.5rem;
  font-family:var(--font-head);
  font-size:clamp(1.1rem, 2vw, 1.3rem);
  letter-spacing:.05em; line-height:1.9; color:var(--ink);
}
/* 策语：朱砂短横起头，与上下正文拉开。ZCOOL XiaoWei 只有一个字重，
   设粗会触发合成加粗、笔画发糊，故语义交给 <strong>，视觉交给这道横与字号。 */
.about-motto{
  position:relative;
  margin:1.85rem 0 1.55rem; padding-left:1.15rem;
  font-family:var(--font-head);
  /* 与正文、提要各拉开一档。原来三层只差 1px，读不出层级。 */
  font-size:clamp(1.02rem, 1.85vw, 1.22rem);
  letter-spacing:.1em; line-height:1.85; color:var(--ink);
}
.about-motto::before{
  content:''; position:absolute; left:0; top:.5em; bottom:.5em;
  width:2px; background:var(--zhu);
}
.about-motto strong{ font-weight:400; }
/* 条目两列两行。四行铺满整行会显空，且值长短不一、左边缘对不齐。 */
.about-facts{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.15rem 2.5rem;
  margin:2.1rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule);
}
.about-facts > div{ display:flex; align-items:baseline; gap:.7rem; }
.about-facts dt{ flex:none; font-family:var(--font-head); font-size:.98rem; letter-spacing:.12em; color:var(--zhu-deep); }
.about-facts dd{ margin:0; font-size:.87rem; color:var(--ink-2); }
:is(.about-origin-link,.about-fact-link){ display:inline-flex; align-items:baseline; gap:.25rem; color:var(--ink-2); text-decoration:none; border-bottom:1px solid rgba(155,44,32,.4); transition:color .2s,border-color .2s; }
:is(.about-origin-link,.about-fact-link):is(:hover,:focus-visible){ color:var(--zhu-deep); border-color:var(--zhu-deep); }

/* ===================== 技艺 · 竹简 ===================== */
/* 竹简：格线画在每一简上，不拿容器底色冒充格线。
   原先用 auto-fit + 容器底色，轨道数会多算并塌成 0 宽，
   左端被挤出约 41px 空带、露出底色。改为定数列 + 简上描边，彻底可预测。 */
.craft{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
@media (min-width:620px){ .craft{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:900px){ .craft{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.slat{
  background:var(--paper); padding:1.5rem 1.1rem 1.35rem;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  position:relative; transition:background .3s var(--ease);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.slat::before{ content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--rule); transition:background .3s var(--ease); }
.slat:hover{ background:var(--paper-2); }
.slat:hover::before{ background:var(--zhu); }
.slat-name{
  margin:0;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--font-head); font-size:1.28rem; letter-spacing:.2em; color:var(--ink);
  min-height:6.6em; padding-top:.15em;
}
.slat-name .ph{ border-bottom:0; border-left:1px dotted rgba(194,58,43,.45); padding:0 0 0 1px; }
.slat-desc{ margin:0; font-size:.79rem; line-height:1.8; letter-spacing:.04em; color:var(--ink-3); text-align:center; }
.slat-kind{ color:var(--zhu-deep); font-size:.66rem; letter-spacing:.2em; }
.slat-instruments{ width:100%; display:grid; gap:.8rem; }
.slat-instruments p{ display:grid; gap:.25rem; margin:0; padding-top:.65rem; border-top:1px solid var(--rule-soft); text-align:left; }
.slat-instruments strong{ font-family:var(--font-head); font-size:.9rem; font-weight:400; color:var(--ink); letter-spacing:.12em; }
.slat-instruments span{ color:var(--ink-3); font-size:.72rem; line-height:1.7; }
#craft{ background:radial-gradient(ellipse at 92% 5%,var(--paper-2),transparent 42%),var(--paper); }
#craft .wrap{ max-width:82rem; }
#craft .juan-head{ margin-bottom:clamp(1.2rem,2.6vh,2.1rem); }
.craft-groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.7rem,1.4vw,1.15rem); width:100%; margin:0 auto; }
.craft-family{ position:relative; min-width:0; padding:1rem; border:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 78%,var(--paper-2)); }
.craft-family::before{ content:''; position:absolute; top:-1px; left:1rem; width:3.2rem; height:2px; background:var(--zhu-deep); }
.craft-family-head{ min-height:4.75rem; margin:0 0 .7rem; padding:0 .15rem .65rem; border-bottom:1px solid var(--rule); }
.craft-family-head > span{ display:block; color:var(--zhu-deep); font-size:.72rem; letter-spacing:.18em; }
.craft-family-head h3{ margin:.15rem 0 0; color:var(--ink-2); font-family:var(--font-head); font-size:1.1rem; font-weight:400; letter-spacing:.1em; line-height:1.5; }
.craft-family-grid{ display:grid; grid-template-columns:1fr; gap:.7rem; }
.craft-card{ min-width:0; display:grid; grid-template-columns:38% minmax(0,1fr); min-height:clamp(10rem,20.5vh,12rem); overflow:hidden; border:1px solid var(--rule); background:var(--paper); transition:border-color .28s,box-shadow .28s,transform .28s; }
.craft-card:hover,.craft-card:focus-within{ border-color:var(--zhu-deep); box-shadow:var(--shadow); transform:translateY(-2px); }
.craft-card > img{ display:block; width:100%; height:100%; min-height:10rem; object-fit:cover; object-position:center 52%; border-right:1px solid var(--rule); }
.craft-card-body{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:.8rem .9rem .65rem; }
.craft-card-level{ margin:0 0 .05rem; color:var(--zhu-deep); font-size:.7rem; letter-spacing:.12em; }
.craft-card h4{ margin:0; color:var(--ink); font-family:var(--font-head); font-size:clamp(1.25rem,1.8vw,1.5rem); font-weight:400; letter-spacing:.14em; line-height:1.35; }
.craft-card-body > p:not(.craft-card-level){ margin:.35rem 0 .4rem; color:var(--ink-3); font-size:.88rem; line-height:1.65; }
.craft-card-body > a{ display:inline-flex; align-items:center; gap:.55rem; min-height:2.25rem; margin-top:auto; color:var(--zhu-deep); font-size:.8rem; letter-spacing:.06em; text-decoration:none; }
.craft-card-body > a::after{ content:''; width:1.2rem; height:1px; background:currentColor; transform-origin:left; transition:transform .2s; }
.craft-card-body > a:hover::after{ transform:scaleX(1.45); }
.craft-card-body > a:focus-visible{ outline:2px solid var(--zhu-deep); outline-offset:3px; }
@media(max-width:980px){ .craft-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } .craft-family:last-child{ grid-column:1/-1; } .craft-family:last-child .craft-family-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:670px){ .craft-groups{ grid-template-columns:1fr; } .craft-family:last-child{ grid-column:auto; } .craft-family:last-child .craft-family-grid{ grid-template-columns:1fr; } .craft-family{ padding:.8rem; } .craft-family-head{ min-height:0; } .craft-card{ min-height:10rem; } }
@media(max-width:390px){ .craft-card{ grid-template-columns:34% minmax(0,1fr); } .craft-card-body{ padding:.65rem .7rem; } .craft-card-body > p:not(.craft-card-level){ font-size:.82rem; } }
@media(prefers-reduced-motion:reduce){ .craft-card,.craft-card-body > a::after{ transition:none; } }

/* ===================== 作品 · 横卷 ===================== */
.rail{ position:relative; }
.rail-track{
  list-style:none; margin:0; padding:0 0 1.35rem;
  display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:rgba(44,24,16,.22) transparent;
}
/* 细、淡墨。原先 5px 的朱砂横条横贯半屏，读起来像进度条，不是滚动条。 */
.rail-track::-webkit-scrollbar{ height:3px; }
.rail-track::-webkit-scrollbar-track{ background:transparent; }
.rail-track::-webkit-scrollbar-thumb{ background:rgba(44,24,16,.22); }
.rail-track::-webkit-scrollbar-thumb:hover{ background:rgba(194,58,43,.5); }
.rail-track > li{ flex:0 0 clamp(16rem, 44vw, 25rem); scroll-snap-align:start; }
.work{ display:flex; flex-direction:column; height:100%; border:1px solid var(--rule); background:var(--paper); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.work:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(184,134,11,.45); }
.work:active{ transform:translateY(-1px); }
.work-thumb{ aspect-ratio:16/10; border-bottom:1px solid var(--rule); }
.work-body{ padding:1.25rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.work-title{ margin:0; font-family:var(--font-head); font-size:1.12rem; font-weight:400; letter-spacing:.1em; color:var(--ink); }
.work-desc{ margin:0; font-size:.85rem; line-height:1.85; color:var(--ink-3); flex:1; }
.work-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
/* 原先竖向内边距仅 1.9px，紧贴 1px 边框；line-height:1 抵消正文 1.95 行高带来的虚高 */
.work-tags span{ font-size:.72rem; line-height:1; letter-spacing:.12em; color:var(--zhu-deep); border:1px solid rgba(194,58,43,.28); padding:.5rem .8rem; }
.rail-hint{ display:flex; align-items:center; gap:.6rem; font-size:.74rem; letter-spacing:.24em; color:var(--ink-3); }
.rail-hint svg{ width:26px; height:10px; color:var(--jin); }

/* ===================== 足迹 · 地名签 ===================== */
.places{ display:flex; flex-wrap:wrap; gap:.75rem; list-style:none; margin:0; padding:0; }
.place{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.55rem 1rem; border:1px solid var(--rule); background:var(--paper);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.place:hover{ border-color:rgba(194,58,43,.5); background:var(--paper-2); transform:translateY(-2px); }
.place-name{ font-family:var(--font-head); font-size:1.05rem; letter-spacing:.14em; color:var(--ink); }
.place-year{ font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); }
.place-note{ font-size:.76rem; color:var(--ink-3); }

/* ===================== 仰止 · 名录 ===================== */
.roster{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.roster > li{ border-bottom:1px solid var(--rule); }
.figure{
  display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:clamp(1.1rem,2.5vw,2.2rem);
  padding:clamp(.95rem,2vw,1.5rem) .5rem; align-items:start;
  transition:background .3s var(--ease);
}
.figure:hover{ background:rgba(235,226,209,.45); }
.figure-name{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--font-head); font-size:1.35rem; letter-spacing:.24em; color:var(--ink);
  min-height:4em; border-left:2px solid var(--zhu); padding-left:.55rem;
}
.figure-name .ph{ border-bottom:0; border-left:1px dotted rgba(194,58,43,.45); }
.figure-body{ max-width:var(--read); }
.figure-role{ display:block; margin:0 0 .45rem; font-size:.78rem; letter-spacing:.18em; color:var(--ink-3); }
.figure-note{ display:block; margin:0; color:var(--ink-2); font-size:.94rem; }

/* ===================== 行旅 · 求学三程 ===================== */
.journey-preface{ max-width:65rem; margin:0 auto 1.45rem; color:var(--ink-2); font-size:.9rem; line-height:1.8; }
.journey-list{ display:grid; gap:.8rem; max-width:65rem; margin:0 auto; padding:0; list-style:none; }
.journey-entry{ position:relative; display:grid; grid-template-columns:clamp(8.6rem,15vw,12rem) minmax(0,1fr) auto; align-items:center; gap:clamp(1.2rem,3vw,2.4rem); min-height:8.6rem; padding:1.2rem clamp(1.25rem,2.5vw,2rem); overflow:hidden; border:1px solid var(--rule); background:rgba(249,247,239,.74); transition:transform .25s,border-color .25s,box-shadow .25s; }
.journey-entry::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--zhu-deep); opacity:.7; }
.journey-entry:hover,.journey-entry:focus-within{ transform:translateY(-2px); border-color:rgba(155,44,32,.45); box-shadow:0 13px 25px -24px var(--ink); }
.journey-era{ display:grid; gap:.45rem; border-right:1px solid var(--rule); padding-right:.7rem; }
.journey-era span{ color:var(--zhu-deep); font-size:.74rem; letter-spacing:.15em; }
.journey-era time{ color:var(--ink-2); font-family:var(--font-head); font-size:clamp(.95rem,1.5vw,1.16rem); white-space:nowrap; }
.journey-school h3{ margin:0; font-family:var(--font-head); font-size:clamp(1.45rem,2.4vw,2.05rem); font-weight:400; letter-spacing:.1em; line-height:1.45; }
.journey-entry-university .journey-school h3{ font-family:'Long Cang',KaiTi,'Noto Serif SC',serif; font-size:clamp(1.55rem,2.5vw,2.2rem); letter-spacing:.045em; }
.journey-entry-senior .journey-school h3{ font-family:'Ma Shan Zheng',KaiTi,'Noto Serif SC',serif; letter-spacing:.06em; }
.journey-entry-junior .journey-school h3{ font-family:KaiTi,STKaiti,'Noto Serif SC',serif; letter-spacing:.08em; }
.journey-school h3 a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.journey-school h3 a:hover,.journey-school h3 a:focus-visible{ color:var(--zhu-deep); border-color:currentColor; }
.journey-school p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.78rem; letter-spacing:.12em; }
.journey-enter{ display:inline-flex; align-items:center; gap:.7rem; min-height:2.7rem; border-bottom:1px solid var(--zhu-deep); color:var(--zhu-deep); font-size:.81rem; white-space:nowrap; text-decoration:none; }
.journey-enter::after{ content:''; width:1.2rem; height:1px; background:currentColor; transform-origin:left; transition:transform .2s; }
.journey-enter:hover::after{ transform:scaleX(1.35); }
.journey-enter:focus-visible{ outline:2px solid var(--zhu-deep); outline-offset:3px; }
@media(max-width:680px){ .journey-entry{ grid-template-columns:minmax(0,1fr) auto; gap:.45rem 1rem; padding:1rem 1.1rem; } .journey-era{ grid-column:1/-1; display:flex; align-items:baseline; gap:1rem; padding:0 0 .55rem; border-right:0; border-bottom:1px solid var(--rule); } .journey-school{ grid-column:1; } .journey-enter{ grid-column:2; } }
@media(max-width:480px){ .journey-preface{ margin-bottom:.8rem; font-size:.82rem; } .journey-list{ gap:.55rem; } .journey-entry{ gap:.35rem .55rem; min-height:7.2rem; padding:.7rem .85rem; } .journey-era{ gap:.7rem; padding-bottom:.35rem; } .journey-school{ min-width:0; } .journey-school h3{ font-size:1.22rem; letter-spacing:.035em; } .journey-school p{ margin-top:.2rem; font-size:.7rem; letter-spacing:.04em; } .journey-enter{ gap:.3rem; min-height:2.1rem; font-size:.7rem; } .journey-enter::after{ width:.6rem; } }
@media(prefers-reduced-motion:reduce){ .journey-entry,.journey-enter::after{ transition:none; } }

/* ===================== 志趣 · 印格 ===================== */
.seals{ display:grid; grid-template-columns:repeat(auto-fill, minmax(7.5rem, 1fr)); gap:1.6rem 1.25rem; list-style:none; margin:0; padding:0; }
.hobby{ display:flex; flex-direction:column; align-items:center; gap:.85rem; text-align:center; }
.hobby-mark{
  width:100%; aspect-ratio:1; display:grid; place-items:center;
  border:1.5px solid rgba(194,58,43,.45); background:rgba(235,226,209,.4);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.hobby:hover .hobby-mark{ border-color:var(--zhu); background:rgba(194,58,43,.06); transform:translateY(-3px); }
.hobby-mark i{ font-style:normal; font-family:var(--font-brush); font-size:clamp(1.9rem,4vw,2.5rem); color:var(--zhu); line-height:1; }
.hobby-mark .slot-tag{ font-size:.62rem; letter-spacing:.24em; }
.hobby-label{ font-size:.83rem; letter-spacing:.14em; color:var(--ink-2); }
.hobby-note{ font-size:.74rem; color:var(--ink-3); }

/* ===================== 文存 · 目录 ===================== */
/* 取古籍目录的形制：篇名 + 引线 + 年月。
   行间不画线 —— 引线本身就是节奏，再加底线是重复。
   引线用 height:0 + border-bottom：空元素的基线即其下边，
   于是在 align-items:baseline 下正好落在文字的基线上。 */
.index-list{ list-style:none; margin:0; padding:0; }
.index-row{ display:block; padding:1.15rem .3rem 1.05rem; text-decoration:none; color:inherit; transition:background .3s var(--ease); }
.index-row:hover{ background:rgba(235,226,209,.4); }
.index-head{ display:flex; align-items:baseline; gap:.75rem; }
.index-title{ font-family:var(--font-head); font-size:1.16rem; letter-spacing:.08em; color:var(--ink); }
.index-lead{ flex:1 1 1.5rem; height:0; border-bottom:1px dotted rgba(44,24,16,.3); }
/* 篇目行末的「阅」：点开是独立文章页（新标签） */
.index-go{
  flex:none; margin-left:.4rem;
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.1em;
  color:var(--zhu-deep); opacity:.7;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.index-row:hover .index-go{ opacity:1; transform:translateX(3px); }

.index-date{ font-size:.76rem; letter-spacing:.12em; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.index-excerpt{ display:block; margin:.55rem 0 0; max-width:40rem; font-size:.85rem; line-height:1.85; color:var(--ink-3); }

/* ===================== 读书 · 现代书封书架 ===================== */
.book-intro{ max-width:42rem; margin:.9rem auto 0; color:var(--ink-2); font-size:.9rem; line-height:1.95; }
.shelf{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; list-style:none; margin:0; padding:0; }
.shelf > li[hidden]{ display:none; }
.book-link{
  width:100%; min-height:12.5rem; display:grid; grid-template-columns:6.15rem minmax(0,1fr); gap:1rem; align-items:center;
  padding:1rem; border:1px solid var(--rule); background:rgba(250,247,240,.76); color:inherit; text-align:left; text-decoration:none; font:inherit; cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.book-link:hover,.book-link:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(155,44,32,.42); background:var(--paper); }
.book-link:focus-visible,.book-more:focus-visible{ outline:2px solid var(--zhu); outline-offset:3px; }
.book-cover{ position:relative; display:grid; place-items:center; width:6.15rem; aspect-ratio:3/4; overflow:hidden; border:1px solid rgba(80,62,42,.16); background:#eee9df; box-shadow:2px 4px 10px rgba(44,24,16,.18); }
.book-cover::after{ content:''; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.16)); pointer-events:none; }
.book-cover-image{ display:block; width:100%; height:100%; object-fit:cover; }
.cover-missing{ padding:.35rem; color:var(--ink-3); font-size:.68rem; letter-spacing:.08em; text-align:center; }
.book-body{ display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:.4rem; }
.book-title{ margin:0; font-family:var(--font-head); font-weight:500; font-size:1rem; line-height:1.55; letter-spacing:.04em; color:var(--ink); }
.book-meta{ margin:0; font-size:.7rem; letter-spacing:.08em; color:var(--zhu-deep); }
.book-note{ display:-webkit-box; margin:.12rem 0 0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; font-size:.75rem; line-height:1.75; color:var(--ink-2); }
.book-more-wrap{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin:1.5rem auto 0; }
.book-total{ margin:0; font-size:.75rem; letter-spacing:.08em; color:var(--ink-3); }
.book-more{ display:inline-block; padding:.6rem 1.2rem; border:1px solid var(--rule); background:transparent; color:var(--zhu-deep); font:inherit; font-size:.82rem; letter-spacing:.12em; text-decoration:none; cursor:pointer; transition:background .2s,border-color .2s; }
.book-more:hover{ background:var(--paper-2); border-color:rgba(155,44,32,.45); }
.book-catalog-page{ min-height:100vh; background:var(--paper); }
.catalog-topbar{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:4.5rem; padding:0 clamp(1rem,5vw,4.5rem); border-bottom:1px solid var(--rule); background:rgba(245,240,230,.95); }
.catalog-brand{ display:flex; align-items:baseline; gap:.65rem; color:var(--ink); text-decoration:none; }
.catalog-brand span{ font-family:var(--font-head); font-size:1.35rem; letter-spacing:.13em; }
.catalog-brand small,.catalog-home-link{ font-size:.72rem; letter-spacing:.12em; color:var(--ink-3); text-decoration:none; }
.catalog-home-link:hover,.catalog-footer a:hover{ color:var(--zhu-deep); }
.catalog-section{ min-height:calc(100vh - 4.5rem); padding:clamp(2.5rem,6vw,5rem) 1.25rem 3rem; background:radial-gradient(ellipse at 50% 0,rgba(184,134,11,.06),transparent 38%),var(--paper); }
.catalog-wrap{ width:min(75rem,100%); margin:0 auto; }
.catalog-heading{ margin:0 auto 2rem; text-align:center; }
.catalog-eyebrow{ color:var(--zhu-deep); font-size:.65rem; letter-spacing:.24em; }
.catalog-heading h1{ margin:.65rem 0 .3rem; color:var(--ink); font-family:var(--font-head); font-weight:400; font-size:clamp(2rem,5vw,3rem); letter-spacing:.25em; }
.catalog-verse{ margin:0; color:var(--ink-2); font-family:var(--font-head); font-size:1.05rem; letter-spacing:.15em; }
.catalog-intro{ max-width:38rem; margin:.85rem auto 0; color:var(--ink-3); font-size:.84rem; line-height:1.9; }
.catalog-search{ position:relative; display:flex; align-items:center; gap:.7rem; width:min(34rem,100%); margin:0 auto .75rem; padding:.65rem .9rem; border:1px solid var(--rule); background:rgba(255,255,255,.38); }
.catalog-search > span:first-child{ flex:none; color:var(--zhu-deep); font-family:var(--font-head); font-size:.82rem; letter-spacing:.1em; }
.catalog-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:.84rem; }
.catalog-search input::placeholder{ color:var(--ink-3); opacity:.75; }
.catalog-search:focus-within{ border-color:rgba(155,44,32,.55); box-shadow:0 0 0 2px rgba(155,44,32,.08); }
.catalog-search-icon{ color:var(--zhu-deep); font-size:1.2rem; }
.catalog-total{ width:min(34rem,100%); margin:0 auto .8rem; text-align:right; }
.catalog-shelf{ grid-template-columns:1fr; gap:.65rem; }
.catalog-shelf .book-link{ min-height:8rem; grid-template-columns:5.5rem minmax(0,1fr); gap:1.1rem; padding:.75rem 1rem; }
.catalog-shelf .book-cover{ width:5.5rem; }
.catalog-shelf .book-body{ gap:.2rem; }
.catalog-shelf .book-title{ font-size:1rem; }
.catalog-shelf .book-title::after{ content:''; display:inline-block; width:1rem; height:1px; margin-left:.55rem; vertical-align:middle; background:var(--zhu-deep); opacity:.7; }
.catalog-shelf .book-meta{ font-size:.7rem; }
.catalog-shelf .book-note{ max-width:52rem; min-height:0; -webkit-line-clamp:2; font-size:.75rem; }
.catalog-shelf > li[hidden]{ display:none; }
.catalog-footer{ display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--rule); font-size:.76rem; letter-spacing:.08em; color:var(--ink-3); }
.catalog-footer a{ color:var(--zhu-deep); text-decoration:none; }

/* ===== 往来 · 互动四模块（题壁 / 尺素 / 结盟 / 题跋） ===== */
.mod{ margin-top:clamp(2.6rem, 5vw, 4rem); }
.mod-head{
  display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap;
  padding-bottom:.9rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.mod-name{
  margin:0; font-family:var(--font-head); font-weight:400;
  font-size:1.25rem; letter-spacing:.18em; color:var(--ink);
}
.mod-name::before{                     /* 朱砂小方，与各节题额的菱花呼应 */
  content:''; display:inline-block; width:.5rem; height:.5rem;
  margin-right:.6rem; background:var(--zhu); vertical-align:.08em;
}
.mod-note{ margin:0; font-size:.82rem; color:var(--ink-3); }   /* 说明文字，不疏排 */
/* 未接入时的占位：压成一行。
   原来四个模块各占一块 7rem 的虚线空框，堆起来近千像素，
   访客看了像是页面坏了。 */
.mod-wait{
  display:flex; align-items:center; gap:.7rem;
  margin:0; padding:.85rem 1.1rem;
  border:1px dashed rgba(194,58,43,.28);
  font-size:.82rem; color:var(--ink-3);
}

/* Waline 默认配色是蓝紫系，与宣纸/朱砂完全冲突，故用它的 CSS 变量整套改写 */
.mod-body{
  --waline-theme-color:var(--zhu);
  --waline-active-color:var(--zhu-deep);
  --waline-color:var(--ink);
  --waline-bgcolor:transparent;
  --waline-bgcolor-light:var(--paper-2);
  --waline-border-color:var(--rule);
  --waline-border:1px solid var(--rule);
  --waline-disable-bgcolor:var(--paper-2);
  --waline-disable-color:var(--ink-3);
  --waline-info-bgcolor:var(--paper-2);
  --waline-info-color:var(--ink-3);
  --waline-meta-color:var(--ink-3);
  --waline-light-grey:var(--ink-3);
  --waline-font-size:.9rem;
  --waline-box-shadow:none;
  font-family:var(--font-body);
}
.mod-body .wl-panel{ border-radius:0; }
.mod-body .wl-editor{ background:var(--paper); }

/* ===================== 联络 ===================== */
/* 联络：四张卡片并排。
   「图标」不用 emoji（与宣纸质感冲突），也不手画 SVG ——
   改用本站自己的语言：朱砂方框 + 一个书法体汉字，与「志趣」的印格同源。 */
.contact-block{ text-align:center; }
.contact-lede{
  margin:0 0 clamp(1rem,2vw,1.4rem);
  font-family:var(--font-head); font-size:clamp(1.02rem,1.9vw,1.2rem);
  letter-spacing:.06em; line-height:1.9; color:var(--ink);
}
.contact-cards{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.7rem,1.6vw,1.2rem);
  list-style:none; margin:0 auto; padding:0;
  max-width:44rem;
}
.ccard{
  cursor:pointer; font-family:inherit; font-size:inherit; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.95rem 1rem .9rem;
  border:1px solid var(--rule); background:var(--paper);
  text-decoration:none; color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ccard:hover{ border-color:rgba(194,58,43,.5); background:var(--paper-2); transform:translateY(-3px); }
/* 图标统一 inherit 朱砂色。不套方框 —— 卡片本身的外框已是那层边，
   再套一层会与「志趣」的印格混淆（那才是印，这里不是）。 */
.ccard-mark{ display:block; width:1.9rem; height:1.9rem; color:var(--zhu); transition:color .3s var(--ease); }
.ccard-mark svg{ display:block; width:100%; height:100%; }
.ccard:hover .ccard-mark{ color:var(--zhu-deep); }
.ccard-kind{ font-family:var(--font-head); font-size:1rem; letter-spacing:.14em; }
.ccard-val{ font-size:.78rem; color:var(--ink-3); }

/* ===================== 落款 ===================== */
/* 落款现在在「联络」节内部，不再独占一层。
   故去掉不透明底色与横向内边距（宽度由 .wrap 决定），
   纵向也收窄 —— 外面已经有节自身的下内边距了。 */
.colophon{
  margin-top:clamp(1.2rem,2.2vw,1.6rem);
  padding-top:clamp(1rem,2vw,1.35rem);
  border-top:1px solid var(--rule);
  text-align:center;
}
.colophon-poem{ margin:0 auto 2rem; max-width:34rem; font-family:var(--font-head); font-size:clamp(1rem,1.9vw,1.22rem); letter-spacing:.14em; color:var(--ink-2); line-height:2; }
.colophon-seal{
  --seal: 58px;
  width:var(--seal); height:var(--seal); margin:0 auto 1.5rem;
  display:grid; place-items:center;
  border:1.5px solid var(--zhu); color:var(--zhu); border-radius:3px;
  font-family:var(--font-body); font-weight:600;
  font-size:calc(var(--seal) * .66); line-height:1;
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(194,58,43,.35);
}
.colophon-meta{ margin:0; font-size:.76rem; letter-spacing:.18em; color:var(--ink-3); }

/* ===================== 卷展入场（全站唯一一套动作） ===================== */
/* 逐块揭示已取消：整页现在作为一个整体弹入（见下方 .juan 的 page-pop）。
   若同时保留逐个上浮，就是两套动作打架，页面会显得零碎而非「一起弹出来」。
   想恢复逐块揭示，把下面这行注释掉即可（JS 里挂 .is-in 的逻辑还在）。 */
.reveal{ opacity:1; }

/* 整页弹入：翻到哪一页，那一页就**整页一次性弹出来**。
   关键在于 animation-range 只取进入区最后 10%（约 90px 滚动）。
   之前写成 entry 0% → entry 100%，等于把整页拆给 900px 的滚动逐格「洗」出来 ——
   那正是「自己一点一点下滑出来」。收进 90px 之内，观感就是直接弹出。
   55% 处冲到 1.01 再回落，这一点过冲就是「弹」的性质。
   注：不能用 IntersectionObserver 判「当前页」—— sticky 钉住后所有已到过的节
   位置完全相同、交集比例全是 1，分不出谁在最上面。时间轴没这个问题。 */
@keyframes page-pop{
  /* 透明度在头 20% 就爬到 1：否则整段过渡里两页都半透明、互相透出，发灰发糊 */
  0%   { opacity:0; transform:scale(.972) translateY(1.1%); }
  20%  { opacity:1; }
  58%  { transform:scale(1.008) translateY(-.3%); }
  82%  { transform:scale(.999); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
/* 触发由 scrollend 事件负责（见 JS）—— 一次性时间动画，不是滚动位置的函数。
   这一点是关键：若改用 view() 滚动时间轴，往上滚时进度会倒回起始关键帧，
   页面会被压成透明度 0 当场消失。一次性动画则免疫方向。 */
@media (prefers-reduced-motion: no-preference){
  /* 时长压到 .44s、缩放收到 .972：幅度小、结束快，
     即使被下一次滑动打断，视觉上也只是轻轻一沉，不会觉得页面在抖。 */
  .juan.is-current > .wrap{ animation:page-pop .44s var(--ease) both; }
}
/* 这里不用 CSS scroll-snap。实测：scroll-snap-type:mandatory 配 scroll-snap-stop:always
   会完全无视连续的小幅滚动 —— 触控板每推 30px 就被拉回原处（30px 离当前页更近），
   累计推 600px 页面一动不动；必须一次推过整页的一半才会跳过去。
   手感就是「怎么滚都不动 → 忽然跳一页」，离散滚轮测试恰好越过阈值所以测不出来。
   整页翻页改由脚本接管（见 JS 里的「整页翻页」），连续与离散输入都响应。 */

/* ===================== 断点 ===================== */
@media (max-width:1120px){
  .nav-list{ display:none; }
  .menu-btn{ display:flex; }
}
@media (max-width:900px){
  .shelf{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .about-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .index-row{ grid-template-columns:5.5rem minmax(0,1fr); }
}
@media (max-width:768px){
  .juan{ padding-block:3.5rem; }
  .slat-name{ min-height:4.2em; font-size:1.15rem; }
  /* 手机上转横排：两列各占一行，中缝那道竖线在横排里没有意义，去掉 */
  .about-vertical{ display:block; width:auto; border-left:0; border-top:1px solid var(--rule); padding:.85rem 0 0; text-align:center; }
  .av-col{ writing-mode:horizontal-tb; display:block; }
  .av-rule{ display:none; }
  .figure{ grid-template-columns:1fr; gap:1rem; }
  .figure-name{ writing-mode:horizontal-tb; min-height:0; border-left:0; border-top:2px solid var(--zhu); padding:.4rem 0 0; }
  .roster > li{ padding-block:.5rem; }
  .shelf{ grid-template-columns:1fr; }
  .hero{ min-height:92dvh; }
}
@media (max-width:640px){
  /* 目录在窄屏改为上下分排：引线在换行的标题旁会显得破碎 */
  .index-head{ display:block; }
  .index-lead{ display:none; }
  .index-date{ display:block; margin-top:.4rem; }
}
@media (max-width:520px){
  .seals{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .catalog-topbar{ min-height:3.8rem; padding-inline:1rem; }
  .catalog-section{ padding:2.5rem .8rem 2rem; }
  .catalog-shelf .book-link{ min-height:7rem; grid-template-columns:4.5rem minmax(0,1fr); gap:.8rem; padding:.65rem; }
  .catalog-shelf .book-cover{ width:4.5rem; }
  .catalog-shelf .book-title{ font-size:.92rem; }
  .catalog-shelf .book-note{ -webkit-line-clamp:2; font-size:.7rem; }
  .catalog-footer{ font-size:.68rem; }

}

/* 触屏上 :hover 点按后会粘住，位移类悬停效果在触屏一律取消 */
@media (hover: none), (pointer: coarse){
  .work:hover, .place:hover, .book:hover,
  .hobby:hover .hobby-mark{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .petal{ display:none; }
  /* 诗句流不再流动：改成名号下方一排静态、可点、可读的诗句条。
     内容一条不少，只是不再横穿画面。 */
  .hero-veil{ display:none; }
  .hero-inner{ order:1; }
  .hero-drift{
    position:static; order:2; overflow:visible; pointer-events:auto;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:.5rem .85rem; margin-top:1.75rem; max-width:58rem; padding-inline:var(--pad);
  }
  .drift-line{
    position:static; animation:none; transform:none; opacity:.92;
    border:1px solid var(--rule); padding:.3rem .75rem; line-height:1.6;
  }
  /* 静态版里题名要回到流内，否则会飘到下一行诗句上 */
  .drift-meta{ position:static; margin-top:0; opacity:1; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ===================== 文章页 ===================== */
.art-top{ max-width:46rem; margin:0 auto; padding:1.75rem var(--pad) 0; }
.art-back{
  display:inline-block; font-size:.85rem; letter-spacing:.1em;
  color:var(--ink-3); text-decoration:none; transition:color .3s var(--ease);
}
.art-back:hover{ color:var(--zhu); }
.art{ max-width:46rem; margin:0 auto; padding:clamp(2.25rem,5vw,3.5rem) var(--pad) 3.5rem; }
.art-date{ margin:0 0 .9rem; font-size:.8rem; letter-spacing:.16em; color:var(--ink-3); }
.art-title{
  margin:0; font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.75rem,4.2vw,2.5rem); letter-spacing:.1em; line-height:1.45; color:var(--ink);
}
.art-title::after{ content:''; display:block; width:3rem; height:2px; margin:1.35rem 0 0; background:var(--zhu); }
.art-body{ margin:clamp(1.75rem,4vw,2.5rem) 0 0; }
.art-body p{ margin:0 0 1.35rem; font-size:1.03rem; line-height:2.1; color:var(--ink-2); }
.art-note{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:1.6rem 1.8rem;
  border:1px solid var(--rule); background:rgba(235,226,209,.35);
}
.art-note h2{
  margin:0 0 .7rem; font-family:var(--font-head); font-weight:400;
  font-size:.95rem; letter-spacing:.24em; color:var(--zhu-deep);
}
.art-note p{ margin:0; font-size:.93rem; line-height:2; color:var(--ink-2); }
.art-next{
  display:flex; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding-top:1.5rem;
  border-top:1px solid var(--rule); font-size:.88rem; letter-spacing:.06em;
}
.art-next a{ color:var(--ink-2); text-decoration:none; transition:color .3s var(--ease); }
.art-next a:hover{ color:var(--zhu); }
.art-next span{ color:var(--ink-3); }
.art-foot{
  max-width:46rem; margin:0 auto; padding:0 var(--pad) 3.5rem;
  font-size:.78rem; letter-spacing:.16em; color:var(--ink-3);
}


/* 仰止 · 行内头像：圆框，与「关于我」那个头像同一形制 */
.fig-portrait{
  position:relative; width:4.1rem; aspect-ratio:1; flex:none;
  display:grid; place-items:center; overflow:hidden;
  border-radius:50%;
  background:linear-gradient(168deg, #f2e9d8, #e6dcc4);
  border:1px solid rgba(184,134,11,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.fig-portrait img{ display:block; width:100%; height:100%; object-fit:cover; }
.fig-seal{ font-family:var(--font-brush); font-size:1.7rem; line-height:1; color:var(--zhu); }
.fig-more{
  display:block; margin-top:.35rem; font-family:var(--font-head);
  font-size:.8rem; letter-spacing:.1em; color:var(--zhu-deep); opacity:.7;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.figure:hover .fig-more{ opacity:1; transform:translateX(3px); }
.figure{ text-decoration:none; color:inherit; }

/* 人物页 */
.fig-role{ margin:0 0 .2rem; font-size:.86rem; letter-spacing:.16em; color:var(--ink-3); }
.fig-block{ margin:clamp(2rem,4vw,2.75rem) 0 0; }
.fig-block h2{
  margin:0 0 .9rem; font-family:var(--font-head); font-weight:400;
  font-size:1rem; letter-spacing:.24em; color:var(--zhu-deep);
}
.fig-block p{ margin:0 0 1.15rem; font-size:1rem; line-height:2.05; color:var(--ink-2); }
.fig-chron{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.fig-chron li{
  display:grid; grid-template-columns:6rem minmax(0,1fr); gap:clamp(.9rem,2vw,1.6rem);
  padding:.8rem 0; border-bottom:1px solid var(--rule);
}
.fig-chron .y{ font-size:.84rem; letter-spacing:.06em; color:var(--zhu-deep); font-variant-numeric:tabular-nums; }
.fig-chron .e{ font-size:.94rem; line-height:1.9; color:var(--ink-2); }
@media (max-width:520px){
  .fig-chron li{ grid-template-columns:1fr; gap:.25rem; }
}


/* 人物页的图片来源标注（CC 授权的必须署名） */
.fig-credit{
  margin:clamp(2rem,4vw,2.75rem) 0 0; padding-top:1rem;
  border-top:1px solid var(--rule);
  font-size:.76rem; line-height:1.8; letter-spacing:.04em; color:var(--ink-3);
}


/* 联络 · 点卡片弹出的小窗（原生 dialog，Esc / 点遮罩即关） */
.cc-dialog{
  width:min(21rem, calc(100vw - 2.5rem));
  padding:1.9rem 1.6rem 1.65rem;
  border:1px solid rgba(184,134,11,.5);
  background:var(--paper); color:var(--ink);
  box-shadow:0 26px 64px -26px rgba(44,24,16,.55);
}
.cc-dialog::backdrop{ background:rgba(44,24,16,.3); }
.cc-dialog-close{
  position:absolute; top:.45rem; right:.55rem; width:2rem; height:2rem;
  display:grid; place-items:center; padding:0;
  font-size:1.2rem; line-height:1; color:var(--ink-3);
  background:transparent; border:0; cursor:pointer; transition:color .25s var(--ease);
}
.cc-dialog-close:hover{ color:var(--zhu); }
.cc-dialog-mark{ display:block; width:2rem; height:2rem; margin:0 auto .95rem; color:var(--zhu); }
.cc-dialog-mark svg{ display:block; width:100%; height:100%; }
.cc-dialog-kind{
  margin:0 0 1.1rem; text-align:center;
  font-family:var(--font-head); font-weight:400;
  font-size:1.15rem; letter-spacing:.22em; color:var(--ink);
}
.cc-dialog-body{ text-align:center; }
.cc-value{ margin:0 0 1.15rem; font-size:1rem; letter-spacing:.04em; word-break:break-all; }
.cc-copy, .cc-apply{
  display:inline-block; padding:.62rem 1.35rem;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font-family:inherit; font-size:.86rem; letter-spacing:.14em;
  text-decoration:none; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cc-copy:hover, .cc-apply:hover{
  border-color:rgba(194,58,43,.55); color:var(--zhu); background:rgba(194,58,43,.05);
}
.cc-locked{ margin:0 0 1.15rem; font-size:.94rem; line-height:1.9; color:var(--ink-2); }
.cc-hint{ margin:1rem 0 0; font-size:.76rem; line-height:1.85; color:var(--ink-3); }


/* 申请查看时给出的邮箱入口：跳各家邮箱的网页版，不唤起本地客户端 */
.cc-owner{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin:0 0 .9rem; font-size:.95rem; letter-spacing:.03em; word-break:break-all;
}
.cc-owner .cc-copy{ padding:.28rem .7rem; font-size:.74rem; letter-spacing:.1em; }
.cc-mails{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem;
  list-style:none; margin:1rem 0 0; padding:0;
}
.cc-mails a{
  display:block; padding:.4rem .8rem;
  border:1px solid var(--rule); color:var(--ink-2);
  font-size:.78rem; letter-spacing:.1em; text-decoration:none;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cc-mails a:hover{ border-color:rgba(194,58,43,.55); color:var(--zhu); background:rgba(194,58,43,.05); }

/* ===================== 手卷修整 · 视觉与交互 ===================== */
.nav{ border-bottom-color:rgba(93,56,35,.2); }
.brand-name{ font-size:1.52rem; }
.nav-list a{ padding-inline:.68rem; }

.hero{
  background:
    radial-gradient(circle at 15% 16%, rgba(184,134,11,.09), transparent 30%),
    radial-gradient(circle at 82% 30%, rgba(194,58,43,.045), transparent 30%),
    var(--paper);
}
.hero-ridge .r1{ fill:rgba(44,24,16,.085); }
.hero-ridge .r2{ fill:rgba(44,24,16,.155); }
.hero-ridge .r3{ fill:rgba(44,24,16,.24); }
.drift-line{ opacity:.53; font-size:clamp(.82rem,1.1vw,.98rem); }
.hero-veil{ background:radial-gradient(ellipse 42% 40% at 50% 48%, var(--paper) 0%, rgba(245,240,230,.97) 42%, rgba(245,240,230,0) 79%); }
.hero-tagline{
  font-family:var(--font-head); font-size:clamp(1.35rem,2.5vw,1.9rem);
  letter-spacing:.11em; text-indent:.11em; line-height:1.6;
}
.poem-draw{
  margin-top:1.5rem; padding:.6rem 1.15rem;
  border:1px solid rgba(155,44,32,.55); background:rgba(245,240,230,.82);
  color:var(--zhu-deep); font-family:var(--font-head); font-size:.9rem;
  letter-spacing:.18em; cursor:pointer; transition:background .25s, transform .25s, box-shadow .25s;
}
.poem-draw:hover{ background:var(--paper-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.poem-draw:active{ transform:translateY(0); }

.juan{
  display:flex; align-items:center;
  background:
    radial-gradient(circle at 9% 15%, rgba(184,134,11,.045), transparent 33%),
    radial-gradient(circle at 88% 83%, rgba(194,58,43,.025), transparent 34%),
    var(--paper);
  border-top:1px solid rgba(110,73,39,.25);
  box-shadow:0 -15px 30px -23px rgba(44,24,16,.48);
}
.juan > .wrap{ width:100%; }
.juan::after{
  content:attr(data-chapter); position:absolute; right:clamp(1.25rem,3vw,3rem); top:5.5rem;
  writing-mode:vertical-rl; font-family:var(--font-head); font-size:.72rem;
  letter-spacing:.25em; color:var(--zhu-deep); opacity:.65; pointer-events:none;
}
.juan-head{ margin-bottom:clamp(2rem,3.8vw,3.2rem); }
.juan-title{ font-size:clamp(2.05rem,4.1vw,3rem); }
.juan-poem{ margin-top:.75rem; color:var(--ink-2); }
.slot{
  border:1px solid rgba(110,73,39,.22);
  background:
    radial-gradient(ellipse at 16% 16%,rgba(184,134,11,.13),transparent 54%),
    radial-gradient(ellipse at 86% 80%,rgba(44,24,16,.09),transparent 56%),
    var(--paper-2);
}
.slot::before,.slot::after{ width:15px; height:15px; border-color:rgba(155,44,32,.42); }
.ph{ border-bottom-color:rgba(155,44,32,.3); }
.work-thumb{ border-bottom:1px solid var(--rule); }
.work{ box-shadow:0 10px 30px -26px rgba(44,24,16,.35); }
.book-link{ box-shadow:0 10px 30px -27px rgba(44,24,16,.32); }
.figure{ text-decoration:none; color:inherit; }
.figure:hover,.index-row:hover{ background:rgba(224,213,189,.35); }
.hobby-mark{ box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(194,58,43,.18); }

.about-vertical{ border-left:0; padding-left:0; gap:.8rem; }
.av-rule{ background:rgba(155,44,32,.45); }

.chapter-dock{
  position:fixed; right:clamp(1rem,2.8vw,2.6rem); bottom:1.35rem;
  z-index:70; display:flex; align-items:center; gap:.4rem;
  padding:.3rem; border:1px solid rgba(110,73,39,.26);
  background:rgba(245,240,230,.96); box-shadow:0 10px 32px -20px rgba(44,24,16,.55);
}
.chapter-dock button{
  width:2.4rem; height:2.4rem; border:0; background:transparent;
  color:var(--zhu-deep); font-size:1.15rem; cursor:pointer;
  transition:background .2s, color .2s;
}
.chapter-dock button:hover{ background:var(--paper-2); }
.chapter-dock button:disabled{ color:var(--ink-3); opacity:.45; cursor:default; }
.chapter-label{ min-width:5.8rem; text-align:center; font-size:.75rem; color:var(--ink-2); letter-spacing:.12em; white-space:nowrap; }

.poem-dialog{
  width:min(32rem,calc(100vw - 2rem)); padding:2.5rem clamp(1.5rem,4vw,3rem);
  border:1px solid rgba(184,134,11,.65); color:var(--ink);
  background:radial-gradient(circle at 80% 20%,rgba(184,134,11,.09),transparent 52%),var(--paper);
  box-shadow:0 30px 70px -24px rgba(44,24,16,.5); text-align:center;
}
.poem-dialog::backdrop{ background:rgba(44,24,16,.45); }
.poem-dialog-eyebrow{ display:block; font-size:.72rem; letter-spacing:.28em; color:var(--zhu-deep); }
.poem-dialog h2{ margin:.65rem 0 1.5rem; font-family:var(--font-head); font-weight:400; font-size:1.65rem; letter-spacing:.2em; }
.poem-dialog blockquote{ margin:0; padding:1.4rem 0; border-block:1px solid var(--rule); font-family:var(--font-head); font-size:clamp(1.15rem,3vw,1.55rem); line-height:2; letter-spacing:.08em; }
.poem-dialog p{ margin:1.2rem 0; font-size:.86rem; color:var(--ink-3); }
.poem-dialog-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; margin-top:1.7rem; }
.poem-dialog-actions button,.poem-dialog-actions a{ padding:.5rem .9rem; border:1px solid var(--rule); background:transparent; color:var(--ink-2); font:inherit; font-size:.82rem; text-decoration:none; cursor:pointer; }
.poem-dialog-actions a{ border-color:rgba(155,44,32,.5); color:var(--zhu-deep); }
.poem-dialog-actions button:hover,.poem-dialog-actions a:hover{ background:var(--paper-2); }

.interaction-intro{ text-align:center; margin:-.5rem 0 1.8rem; color:var(--ink-2); font-size:.94rem; }
.interaction-doors{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; max-width:74rem; margin:0 auto; }
.interaction-door{ position:relative; display:flex; flex-direction:column; min-height:17rem; padding:1.5rem 1.35rem 1.25rem; border:1px solid var(--rule); background:var(--paper); transition:transform .25s,border-color .25s,box-shadow .25s; }
.interaction-door::before{ content:''; position:absolute; left:1.35rem; top:-1px; width:3rem; height:2px; background:var(--zhu-deep); }
.interaction-door:hover,.interaction-door:focus-within{ transform:translateY(-3px); border-color:var(--zhu-deep); box-shadow:var(--shadow); }
.interaction-door-no{ color:var(--zhu-deep); font-size:.75rem; letter-spacing:.13em; }
.interaction-door h3{ margin:1.2rem 0 .5rem; color:var(--ink); font-family:var(--font-head); font-size:clamp(1.7rem,2.5vw,2.2rem); font-weight:400; letter-spacing:.16em; }
.interaction-door p{ margin:0 0 1rem; color:var(--ink-2); font-size:.92rem; line-height:1.8; }
.interaction-door a{ display:inline-flex; align-items:center; gap:.7rem; min-height:2.6rem; width:fit-content; margin-top:auto; border-bottom:1px solid var(--zhu-deep); color:var(--zhu-deep); font-size:.85rem; text-decoration:none; }
.interaction-door a::after{ content:''; width:1.15rem; height:1px; background:currentColor; transform-origin:left; transition:transform .2s; }
.interaction-door a:hover::after{ transform:scaleX(1.4); }
.interaction-door a:focus-visible{ outline:2px solid var(--zhu-deep); outline-offset:3px; }
.interaction-rule{ margin:1.25rem 0 0; color:var(--ink-3); font-size:.78rem; text-align:center; }

@media(max-width:768px){
  .juan{ align-items:flex-start; padding-block:5.1rem 4.5rem; }
  .juan::after{ top:3.5rem; right:1.1rem; }
  .about-vertical{ display:flex; flex-direction:row-reverse; width:fit-content; border:0; padding:0; text-align:initial; gap:.45rem; }
  .av-col{ writing-mode:vertical-rl; display:block; }
  .av-rule{ display:block; width:1px; }
  .interaction-doors{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chapter-dock{ bottom:.65rem; right:.65rem; }
}
@media(max-width:520px){
  .chapter-label{ min-width:auto; font-size:.7rem; }
  .chapter-dock button{ width:2.5rem; height:2.5rem; }
  .hero-tagline{ max-width:18rem; }
  .hero-quote{ margin-top:1.2rem; padding-top:1rem; }
  .poem-draw{ margin-top:1rem; }
  .about-vertical{ font-size:.93rem; letter-spacing:.14em; }
  .interaction-doors{ grid-template-columns:1fr; }
  .interaction-door{ min-height:12rem; }
}

/* 夜墨开篇：一眼便知是山水手卷，翻卷后回到暖宣纸。 */
.hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 39%,rgba(154,129,87,.2),transparent 32%),
    radial-gradient(circle at 16% 14%,rgba(128,91,55,.12),transparent 34%),
    linear-gradient(160deg,#172523 0%,#24302d 48%,#181d1b 100%);
}
.hero::before{
  content:''; position:absolute; z-index:0;
  width:min(34vw,28rem); aspect-ratio:1; left:50%; top:43%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%,rgba(250,232,188,.6),rgba(223,192,131,.26) 54%,rgba(223,192,131,.03) 70%);
  box-shadow:0 0 0 1px rgba(236,204,147,.16),0 0 95px 24px rgba(204,167,103,.09);
  pointer-events:none;
}
.hero::after{
  content:'山  河  入  卷'; position:absolute; z-index:1; right:clamp(1.6rem,5vw,6rem); top:29%;
  writing-mode:vertical-rl; letter-spacing:.65em; font-family:var(--font-head);
  font-size:.85rem; color:rgba(230,207,164,.58); pointer-events:none;
}
.hero-ridge .r1{ fill:rgba(214,206,178,.11); }
.hero-ridge .r2{ fill:rgba(209,203,178,.18); }
.hero-ridge .r3{ fill:rgba(200,196,173,.29); }
.hero-veil{ background:radial-gradient(ellipse 40% 38% at 50% 46%,rgba(31,42,39,.88) 0%,rgba(31,42,39,.72) 38%,rgba(31,42,39,0) 82%); }
.drift-line{ color:#e9dbc3; opacity:.5; }
.hero-drift[data-paused] .drift-line{ opacity:.16; }
.hero-drift .drift-line:hover,.hero-drift .drift-line:focus-visible{ color:#fff5de; opacity:1; }
.drift-meta{ color:#d4aa67; }
.seal{ color:#da5942; border-color:#da5942; box-shadow:inset 0 0 0 3px #202b28,inset 0 0 0 4px rgba(218,89,66,.6); }
.hero-aspiration{ color:#e8d9bc; }
.hero-aspiration::before{ background:#d2a064; }
.hero-name{ color:#f5ead5; text-shadow:0 8px 38px rgba(0,0,0,.25); }
.hero-tagline{ color:#f1dfb9; }
.hero-quote{ border-color:rgba(225,204,164,.35); }
.hero-quote em{ color:#ebdcc2; }
.hero-hint svg{ color:#d2a064; }
.poem-draw{ background:rgba(17,28,26,.45); border-color:rgba(212,170,103,.75); color:#f3e4c8; }
.poem-draw:hover{ background:rgba(212,170,103,.18); color:#fff5df; }
.nav:not(.is-scrolled){ background:rgba(22,36,33,.96); border-bottom-color:rgba(226,200,157,.22); box-shadow:none; }
.nav:not(.is-scrolled) .brand-name{ color:#e3b077; }
.nav:not(.is-scrolled) .brand-sub,.nav:not(.is-scrolled) .nav-list a{ color:#e1d1b5; }
.nav:not(.is-scrolled) .nav-list a:hover{ color:#fff4df; }
.nav:not(.is-scrolled) .nav-list li + li::before{ background:rgba(226,200,157,.18); }
.nav:not(.is-scrolled) .menu-btn{ border-color:rgba(226,200,157,.45); }
.nav:not(.is-scrolled) .menu-btn span{ background:#e1d1b5; }
.nav{ transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); }
@media(max-width:768px){
  .hero::before{ width:min(68vw,24rem); }
  .hero::after{ right:1rem; top:18%; font-size:.72rem; }
}
@media(prefers-reduced-motion:reduce){
  .hero-drift{ max-height:30vh; overflow:auto; }
  .drift-line{ color:#f2e6d3; opacity:.9; }
}

/* 章节用色按内容组织：行走为青黛，人物为夜墨，其余为宣纸。 */
#journey,#travels,#links{
  background:
    radial-gradient(circle at 10% 16%,rgba(75,112,97,.12),transparent 33%),
    radial-gradient(circle at 86% 78%,rgba(151,120,69,.07),transparent 34%),
    #e9eee7;
}
#travels .place:hover{ background:rgba(209,224,210,.58); }
#travels .place{ background:rgba(249,247,239,.7); }
#links .interaction-door{ background:var(--paper); }
#works,#writing{
  background:
    radial-gradient(circle at 84% 18%,rgba(184,134,11,.09),transparent 36%),
    #f2eadb;
}
#admire{
  background:
    radial-gradient(circle at 83% 24%,rgba(115,149,146,.2),transparent 35%),
    linear-gradient(155deg,#1c3335,#1e292b 65%,#172223);
  border-top-color:rgba(222,200,164,.28);
}
#admire::after{ color:#d9b47a; }
#admire .juan-title{ color:#f2e6d0; }
#admire .juan-poem{ color:#d3c3a8; }
#admire .juan-title::before{ background:linear-gradient(to right,transparent,#d6ad6c); }
#admire .juan-title::after{ background:linear-gradient(to left,transparent,#d6ad6c); }
#admire .roster,#admire .roster>li{ border-color:rgba(230,208,176,.24); }
#admire .figure{ color:#f2e6d0; }
#admire .figure:hover{ background:rgba(242,230,208,.08); }
#admire .figure-name{ color:#f2e6d0; border-left-color:#d65e45; }
#admire .figure-role{ color:#cbbfa9; }
#admire .figure-note{ color:#e7dbc7; }
#admire .fig-more{ color:#deb17f; }
#admire .fig-portrait{ border-color:rgba(220,176,111,.85); }
@media(max-width:768px){
  .hero{ min-height:100dvh; padding-top:7rem; }
  .hero-drift{ inset:70px 0 auto; height:105px; }
  .hero::after{ display:none; }
  .hero-veil{ display:none; }
  .about-scroll{ gap:1rem; }
  .avatar-ring{ max-width:13.5rem; }
  .about-vertical{ line-height:1.5; }
  .about-grid{ gap:1.5rem; }
}
@media(max-width:520px){
  .hero-drift{ height:95px; }
  .hero-inner{ transform:translateY(1.1rem); }
  .about-vertical{ font-size:.88rem; }
}

/* 文存首页：按时间列最新五篇，完整目录与句笺另开页面。 */
.writing-preview{
  max-width:65rem; margin:0 auto; display:grid;
  grid-template-columns:minmax(13rem, .82fr) minmax(0,1.7fr);
  border:1px solid rgba(100,71,41,.25); box-shadow:var(--shadow);
  background:rgba(249,245,235,.8);
}
.writing-cover{
  min-height:25rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  background:
    radial-gradient(circle at 75% 18%,rgba(204,171,111,.2),transparent 42%),
    linear-gradient(155deg,#243634,#192826);
  color:#efe1c4;
}
.writing-cover::before{ content:''; position:absolute; inset:1rem; border:1px solid rgba(223,193,138,.48); pointer-events:none; }
.writing-cover::after{ content:''; position:absolute; width:12rem; aspect-ratio:1; border:1px solid rgba(223,193,138,.13); border-radius:50%; right:-5rem; bottom:-5rem; }
.writing-cover-small{ z-index:1; font-size:.7rem; letter-spacing:.22em; color:#d8bf98; }
.writing-cover-title{ z-index:1; writing-mode:vertical-rl; font-family:var(--font-head); font-size:3.2rem; letter-spacing:.32em; line-height:1; }
.writing-cover-mark{ z-index:1; width:2.4rem; height:2.4rem; display:grid; place-items:center; border:1px solid #d9654c; color:#e7785d; font-family:var(--font-head); font-size:1.1rem; }
.writing-preview-body{ display:flex; flex-direction:column; min-width:0; padding:clamp(1.25rem,2.6vw,2.3rem); }
.writing-preview-head{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); font-size:.76rem; letter-spacing:.16em; color:var(--ink-3); }
.writing-preview-head span:first-child{ color:var(--zhu-deep); }
.writing-short-list{ flex:1; }
.writing-short-list .index-item{ border-bottom:1px solid var(--rule); }
.writing-short-list .index-row{ padding:1.1rem .25rem; }
.writing-short-list .index-head{ align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.writing-short-list .index-title{ flex:1 1 13rem; }
.writing-short-list .index-excerpt{ margin-top:.55rem; }
.writing-open{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:3.8rem; margin-top:1.2rem; padding:.8rem 1rem; border:1px solid rgba(155,44,32,.45); color:var(--zhu-deep); font-family:var(--font-head); letter-spacing:.12em; text-decoration:none; transition:background .25s,border-color .25s; }
.writing-open:hover{ background:var(--paper-2); border-color:var(--zhu); }
.writing-open::after{ content:''; flex:none; width:1.8rem; height:1px; background:currentColor; }

/* 文存全卷：可独立浏览和检索，篇目不占首页高度。 */
.archive-page{ min-height:100dvh; background:linear-gradient(140deg,#f5f0e6,#eee4d4); }
.archive-bar{ max-width:76rem; min-height:4.2rem; margin:auto; padding:.85rem var(--pad); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.archive-back{ font-size:.83rem; letter-spacing:.08em; color:var(--ink-2); text-decoration:none; }
.archive-back:hover{ color:var(--zhu-deep); }
.archive-brand{ font-family:var(--font-head); font-size:1.12rem; letter-spacing:.1em; color:var(--zhu-deep); white-space:nowrap; }
.archive-brand small{ margin-left:.35rem; font-family:var(--font-body); font-size:.65rem; color:var(--ink-3); }
.archive-hero{ position:relative; min-height:20rem; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 40%,rgba(191,157,99,.18),transparent 35%),linear-gradient(145deg,#1d3433,#1b2928); color:#f1e5cf; }
.archive-hero::before{ content:''; position:absolute; inset:1.25rem; border:1px solid rgba(224,192,138,.26); pointer-events:none; }
.archive-hero-mark{ position:absolute; font-family:var(--font-head); font-size:15rem; line-height:1; color:rgba(242,223,184,.06); }
.archive-kicker{ z-index:1; margin:0 0 .6rem; font-size:.72rem; letter-spacing:.27em; color:#dfc59a; }
.archive-hero h1{ z-index:1; margin:0; font-family:var(--font-head); font-weight:400; font-size:clamp(2.8rem,7vw,4.6rem); letter-spacing:.34em; text-indent:.34em; }
.archive-hero p:last-child{ z-index:1; margin:.8rem 0 0; color:#d7c8ad; font-size:.88rem; letter-spacing:.19em; }
.archive-main{ max-width:64rem; margin:0 auto; padding:clamp(2.5rem,5vw,4rem) var(--pad) 4rem; }
.archive-toolbar{ display:flex; align-items:end; justify-content:space-between; gap:1.5rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(44,24,16,.22); }
.archive-toolbar-label{ font-family:var(--font-head); font-size:1.7rem; letter-spacing:.15em; }
.archive-toolbar p{ margin:.2rem 0 0; font-size:.82rem; color:var(--ink-3); }
.archive-search{ display:flex; flex-direction:column; gap:.3rem; font-size:.74rem; letter-spacing:.08em; color:var(--ink-3); }
.archive-search input{ width:min(16rem,70vw); min-height:2.7rem; padding:.45rem .7rem; border:1px solid rgba(44,24,16,.28); border-radius:0; background:rgba(255,252,244,.8); color:var(--ink); font:inherit; font-size:.85rem; letter-spacing:normal; }
.archive-search input:focus-visible{ border-color:var(--zhu-deep); }
.archive-count{ margin:.75rem 0 0; font-size:.75rem; letter-spacing:.12em; color:var(--ink-3); }
.archive-list{ list-style:none; margin:1.5rem 0 0; padding:0; border-top:1px solid var(--rule); }
.archive-item{ border-bottom:1px solid var(--rule); }
.archive-item[hidden]{ display:none; }
.archive-item a{ display:grid; grid-template-columns:3rem minmax(0,1fr) 7rem 1.5rem; gap:1.1rem; align-items:center; padding:1.35rem .35rem; text-decoration:none; transition:background .25s,transform .25s; }
.archive-item a:hover{ background:rgba(224,213,189,.35); transform:translateX(3px); }
.archive-item-no{ align-self:start; font-family:var(--font-head); font-size:.85rem; color:var(--zhu-deep); }
.archive-item-main{ display:flex; flex-direction:column; gap:.28rem; min-width:0; }
.archive-item-main strong{ font-family:var(--font-head); font-size:1.16rem; font-weight:400; letter-spacing:.06em; color:var(--ink); }
.archive-item-main small{ font-size:.82rem; line-height:1.8; color:var(--ink-3); }
.archive-item time{ align-self:start; font-size:.75rem; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap; }
.archive-item-arrow{ align-self:start; display:block; width:1.15rem; height:1px; margin-top:.55rem; background:var(--zhu-deep); transition:transform .2s; transform-origin:left; }
.archive-item a:hover .archive-item-arrow{ transform:scaleX(1.25); }
.archive-empty{ padding:2rem 0; text-align:center; color:var(--ink-3); }
.archive-empty[hidden]{ display:none; }
.archive-end{ display:flex; align-items:center; gap:1.5rem; margin-top:3rem; color:var(--ink-3); font-size:.76rem; letter-spacing:.18em; }
.archive-end::before,.archive-end::after{ content:''; flex:1; height:1px; background:var(--rule); }
.archive-footer{ max-width:64rem; margin:auto; padding:0 var(--pad) 2.5rem; text-align:center; font-size:.75rem; letter-spacing:.15em; color:var(--ink-3); }

@media(max-width:768px){
  .writing-preview{ grid-template-columns:1fr; max-width:34rem; }
  .writing-cover{ min-height:9.5rem; flex-direction:row; gap:1rem; }
  .writing-cover-title{ writing-mode:horizontal-tb; font-size:2.2rem; letter-spacing:.15em; }
  .writing-cover-mark{ width:2rem; height:2rem; }
  .writing-preview-body{ padding:1.2rem; }
  .archive-item a{ grid-template-columns:2rem minmax(0,1fr) 1.1rem; gap:.65rem; }
  .archive-item time{ grid-column:2; grid-row:2; }
  .archive-item-arrow{ grid-column:3; grid-row:1; }
}
@media(max-width:520px){
  .writing-preview-head{ font-size:.68rem; }
  .writing-short-list .index-title{ font-size:1.02rem; }
  .writing-short-list .index-excerpt{ font-size:.78rem; }
  .writing-open{ min-height:3.3rem; font-size:.87rem; }
  .archive-toolbar{ align-items:stretch; flex-direction:column; }
  .archive-search input{ width:100%; }
  .archive-hero{ min-height:16rem; }
  .archive-item-main strong{ font-size:1.02rem; }
}

/* 文存：一屏目录、完整文章与可抽取的句笺 */
.writing-cover-quote{
  z-index:1; position:relative; display:block; max-width:12rem;
  padding-top:1rem; border-top:1px solid rgba(223,193,138,.35);
  color:#e9d5b4; font-family:var(--font-head); font-size:.9rem;
  line-height:1.8; letter-spacing:.06em; text-align:center; text-decoration:none;
}
.writing-cover-quote small{
  display:block; margin-top:.4rem; color:#d5ab75;
  font-family:var(--font-body); font-size:.67rem; letter-spacing:.15em;
}
.writing-cover-quote:hover,.writing-cover-quote:focus-visible{ color:#fff6e2; }
#writing.juan{ padding-block:clamp(2.7rem,4.5vw,3.8rem); }
#writing .juan-head{ margin-bottom:clamp(1.2rem,2.4vw,2rem); }
.writing-short-list{ counter-reset:writing-entry 11; }
.writing-short-list .index-item{ counter-increment:writing-entry -1; }
.writing-short-list .index-row{ position:relative; padding:.6rem .25rem .6rem 2rem; }
.writing-short-list .index-row::before{
  content:counter(writing-entry,decimal-leading-zero); position:absolute; left:.2rem; top:.8rem;
  color:var(--zhu-deep); font-family:var(--font-head); font-size:.7rem; letter-spacing:.04em;
}
.writing-short-list .index-excerpt{ margin-top:.22rem; line-height:1.5; }
.archive-quote-banner{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:1.2rem; margin-bottom:2.2rem; padding:1.25rem 1.55rem;
  border:1px solid rgba(191,157,99,.45);
  background:linear-gradient(120deg,#223937,#1b2c2b);
  color:#f2e4cb; text-decoration:none; transition:transform .25s,box-shadow .25s;
}
.archive-quote-banner:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -16px #1b2c2b; }
.archive-quote-banner span:first-child{ color:#d8aa70; font-size:.78rem; letter-spacing:.12em; white-space:nowrap; }
.archive-quote-banner strong{ display:block; font-family:var(--font-head); font-size:1.1rem; font-weight:400; letter-spacing:.1em; line-height:1.6; }
.archive-quote-banner > span:last-child{ color:#dfbd89; white-space:nowrap; font-size:.8rem; letter-spacing:.08em; }
.lines-page{ min-height:100dvh; background:linear-gradient(145deg,#f5f0e6,#ede5d6); }
.lines-hero{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:23rem; overflow:hidden; padding:3.5rem 1.5rem;
  background:radial-gradient(circle at 50% 25%,rgba(216,170,104,.2),transparent 36%),linear-gradient(145deg,#1d3433,#172725);
  color:#efe1c6; text-align:center;
}
.lines-hero::before{ content:''; position:absolute; inset:1.2rem; border:1px solid rgba(223,193,138,.28); pointer-events:none; }
.lines-seal{ position:absolute; right:10%; bottom:-5rem; font-family:var(--font-head); font-size:16rem; line-height:1; color:rgba(236,207,159,.06); pointer-events:none; }
.lines-hero .archive-kicker{ margin:0 0 .6rem; }
.lines-hero h1{ z-index:1; margin:0; font-family:var(--font-head); font-size:clamp(3rem,8vw,5rem); font-weight:400; letter-spacing:.36em; text-indent:.36em; }
.lines-hero p:not(.archive-kicker){ z-index:1; margin:1rem 0 1.5rem; color:#d7c9ae; font-size:.9rem; letter-spacing:.12em; }
.lines-hero button{
  z-index:1; min-height:2.9rem; padding:.65rem 1.2rem;
  border:1px solid rgba(219,180,117,.72); background:rgba(20,35,32,.35);
  color:#f0dfbe; font-family:var(--font-body); font-size:.82rem; letter-spacing:.13em;
  cursor:pointer; transition:background .2s,transform .2s;
}
.lines-hero button:hover{ background:rgba(219,180,117,.15); transform:translateY(-2px); }
.lines-main{ max-width:70rem; margin:0 auto; padding:clamp(2rem,4vw,3.5rem) var(--pad) 4rem; }
.lines-intro{ margin:0 0 2.6rem; text-align:center; color:var(--ink-2); font-size:.87rem; line-height:1.9; }
.lines-group{ display:grid; grid-template-columns:10rem minmax(0,1fr); gap:2.5rem; padding:2rem 0; border-top:1px solid rgba(78,61,43,.2); }
.lines-group-head{ display:flex; flex-direction:column; align-items:start; gap:.2rem; }
.lines-group-head > span{ color:var(--zhu-deep); font-family:var(--font-head); font-size:.82rem; }
.lines-group-head h2{ margin:.1rem 0; font-family:var(--font-head); font-size:1.8rem; font-weight:400; letter-spacing:.16em; color:var(--ink); }
.lines-group-head small{ color:var(--ink-3); font-size:.72rem; letter-spacing:.15em; }
.lines-group ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; list-style:none; margin:0; padding:0; }
.line-item{
  display:flex; flex-direction:column; justify-content:space-between; gap:.9rem;
  min-height:9rem; padding:1.1rem 1.3rem; border:1px solid rgba(91,70,45,.19);
  background:rgba(255,251,240,.62); transition:border-color .25s,background .25s,box-shadow .25s;
}
.line-item:hover,.line-item.is-picked{ border-color:rgba(163,90,59,.55); background:#fffaf0; box-shadow:0 9px 25px -20px rgba(44,24,16,.45); }
.line-item p{ margin:0; font-family:var(--font-head); font-size:1.08rem; line-height:1.85; letter-spacing:.04em; color:var(--ink); }
.line-item button{ align-self:end; border:0; padding:.2rem .15rem; background:transparent; color:var(--zhu-deep); font:inherit; font-size:.72rem; letter-spacing:.08em; cursor:pointer; }
.line-item button:hover{ text-decoration:underline; text-underline-offset:.25rem; }
@media(max-width:768px){
  #writing.juan{ padding-block:3.5rem 2.6rem; }
  #writing .juan-head{ margin-bottom:1.25rem; }
  .writing-cover{ min-height:7rem; gap:.7rem; }
  .writing-cover-quote{ max-width:11rem; padding:.25rem 0 .25rem .8rem; border-top:0; border-left:1px solid rgba(223,193,138,.35); font-size:.72rem; line-height:1.6; }
  .writing-cover-quote small{ margin-top:.1rem; font-size:.6rem; }
  .writing-preview-body{ padding:.85rem 1rem; }
  .writing-preview-head{ padding-bottom:.5rem; }
  .writing-short-list .index-row{ padding:.45rem .25rem; }
  .writing-short-list .index-row{ padding-left:1.65rem; }
  .writing-short-list .index-row::before{ top:.65rem; }
  .writing-short-list .index-excerpt{ display:none; }
  .writing-open{ min-height:2.8rem; margin-top:.65rem; padding:.55rem .8rem; }
  .lines-group{ grid-template-columns:1fr; gap:1rem; }
  .lines-group-head{ flex-direction:row; align-items:baseline; gap:.7rem; }
}
@media(max-width:520px){
  .writing-cover-small,.writing-cover-mark{ display:none; }
  .writing-cover-title{ font-size:1.8rem; }
  .writing-cover-quote{ max-width:12rem; }
  .writing-short-list .index-title{ flex-basis:auto; font-size:.96rem; }
  .writing-short-list .index-date{ display:inline; margin:0; font-size:.67rem; }
  .writing-short-list .index-go{ display:inline; margin:0; }
  .writing-short-list .index-head{ display:flex; flex-wrap:nowrap; gap:.4rem; }
  .archive-quote-banner{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; padding:1.1rem 1.2rem; }
  .archive-quote-banner strong{ font-size:1.03rem; }
  .archive-quote-banner > span:last-child{ align-self:flex-end; font-size:.72rem; }
  .lines-group ol{ grid-template-columns:1fr; }
  .line-item{ min-height:7rem; }
}
@media(max-width:520px) and (max-height:720px){
  #writing.juan{ padding-bottom:1.2rem; }
  #writing .juan-head{ margin-bottom:.5rem; }
  #writing .juan-title{ font-size:1.75rem; }
  #writing .juan-poem{ margin-top:.25rem; }
  #writing .writing-cover{ min-height:5rem; }
  #writing .writing-cover-title{ font-size:1.55rem; }
  #writing .writing-cover-quote{ font-size:.65rem; }
}
@media(min-width:769px) and (max-height:820px){
  #writing .juan-head{ margin-bottom:1.1rem; }
  .writing-short-list .index-excerpt{ display:none; }
  .writing-short-list .index-row{ padding:.55rem .25rem .55rem 2rem; }
  .writing-cover{ min-height:22rem; }
}
@media(prefers-reduced-motion:reduce){
  .archive-quote-banner,.lines-hero button,.line-item{ transition:none; }
}

/* 毛体题句：以连笔书风放大呈现，字距收紧，让整句像一笔挥出。 */
.hero-tagline{
  font-family:var(--font-mao);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:400;
  letter-spacing:.025em;
  text-indent:0;
  line-height:1.55;
  text-shadow:0 2px 18px rgba(0,0,0,.14);
}

/* Chapter titles and interaction cards are usable entry points. */
.chapter-entry-title{color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none}.chapter-entry-title:hover,.chapter-entry-title:focus-visible{color:var(--zhu-deep);text-decoration:underline;text-underline-offset:.22em}.interaction-door>a::before{content:"";position:absolute;inset:0;z-index:1}.interaction-door:focus-within{outline:2px solid var(--zhu-deep);outline-offset:3px}