/* ---------- 1. Tokens ---------- */

:root {
  --font-ancient: "LiSu", "SimLi", "Baoli SC", "Baoli TC", "Weibei SC", "STKaiti", "Kaiti SC", "KaiTi", "Songti SC", "STSong", serif;
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --font-body: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-latin: "Times New Roman", "Georgia", "Songti SC", serif;

  
  --t-display: 2.6rem;
  --t-volume: 1.08rem;
  --t-h1: 1.85rem;
  --t-h2: 1.48rem;
  --t-h3: 1.22rem;
  --t-lead: 1.12rem;
  --t-body: 1.02rem;
  --t-quote: 1.15rem;
  --t-def: 1.08rem;
  --t-note: 0.86rem;
  --t-micro: 0.75rem;
  --t-year: 0.88rem;

  --lh-body: 1.84;
  --lh-display: 1.25;
  --ls-display: 0.18em;
  --ls-h2: 0.14em;
  --ls-micro: 0.2em;

  
  --frame: 1640px;
  --frame-read: 1180px;
  --measure: 40rem;
  --pad-x: 1.15rem;
  --gutter: 1.25rem;
  --sec-y: 3.5rem;
  --rule: 1px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 2.5D Depth Architecture Tokens (Z0-Z5) */
  --depth-z0: 0px;
  --depth-z1: 2px;
  --depth-z2: 6px;
  --depth-z3: 10px;
  --depth-z4: 16px;
  --depth-z5: 24px;

  /* Parallax Motion Offsets (Dampened, Max 2-6px) */
  --hero-bg-x: 0px;
  --hero-bg-y: 0px;
  --hero-mid-x: 0px;
  --hero-mid-y: 0px;
  --hero-fore-x: 0px;
  --hero-fore-y: 0px;
  --card-art-x: 0px;
  --card-art-y: 0px;
  --card-seal-x: 0px;
  --card-seal-y: 0px;

  /* Relic Candlelight Coordinates (Percent) */
  --light-x: 50%;
  --light-y: 50%;
}

:root,
[data-theme="silk"] {
  --bg: #e9dfc8;
  --bg-soft: #e2d6ba;
  --bg-deep: #d9ccb0;
  --ink: #262018;
  --ink-2: #3f362c;
  --ink-muted: #584d3e;
  --ink-faint: #756754;
  --line: #c4b494;
  --line-strong: #a89472;
  --seal: #9a3b2c;
  --bronze: #8a6a3e;
  --jade: #5a6b58;
  --paper: #f4ecda;
  --img-filter: saturate(0.88) contrast(1.02) brightness(1.02);
  --img-wash: rgba(233, 223, 200, 0.12);
  --hero-veil: linear-gradient(105deg, rgba(233, 223, 200, 0.94) 0%, rgba(233, 223, 200, 0.72) 42%, rgba(233, 223, 200, 0.15) 70%, rgba(233, 223, 200, 0.4) 100%);
  --bg-texture:
    radial-gradient(ellipse at 50% 12%, rgba(244, 236, 218, 0.65) 0%, rgba(233, 223, 200, 0.35) 50%, rgba(217, 204, 176, 0.75) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(42, 36, 28, 0.016) 3px, rgba(42, 36, 28, 0.016) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(42, 36, 28, 0.012) 5px, rgba(42, 36, 28, 0.012) 6px);
  --paper-edge: 0 1px 2px rgba(42, 36, 28, 0.05), 0 0 0 1px rgba(196, 180, 148, 0.35);
  --paper-edge-deep: 0 4px 14px rgba(42, 36, 28, 0.08), 0 1px 3px rgba(42, 36, 28, 0.04), 0 0 0 1px rgba(196, 180, 148, 0.45);
  --seal-press: inset 0 1px 1.5px rgba(42, 36, 28, 0.22), 0 1px 2px rgba(154, 59, 44, 0.16);
  --seal-bleed: 0 0 1px rgba(154, 59, 44, 0.38);
  --relic-candle-soft: rgba(244, 236, 218, 0.16);
  --relic-shadow-soft: rgba(42, 36, 28, 0.22);
  color-scheme: light;
}

[data-theme="ink"] {
  --bg: #14110e;
  --bg-soft: #1a1612;
  --bg-deep: #0f0d0b;
  --ink: #e8dcbf;
  --ink-2: #d4c7ad;
  --ink-muted: #a69984;
  --ink-faint: #7e7363;
  --line: #3a3228;
  --line-strong: #5a4e3e;
  --seal: #c45a42;
  --bronze: #b8956a;
  --jade: #7a8f78;
  --paper: #efe4cc;
  --img-filter: saturate(0.9) contrast(1.06) brightness(1.08);
  --img-wash: rgba(20, 17, 14, 0.18);
  --hero-veil: linear-gradient(105deg, rgba(20, 17, 14, 0.92) 0%, rgba(20, 17, 14, 0.7) 44%, rgba(20, 17, 14, 0.2) 72%, rgba(20, 17, 14, 0.45) 100%);
  --bg-texture:
    radial-gradient(ellipse at 50% 12%, rgba(32, 26, 21, 0.75) 0%, rgba(20, 17, 14, 0.45) 50%, rgba(10, 8, 7, 0.92) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(228, 216, 192, 0.018) 3px, rgba(228, 216, 192, 0.018) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(228, 216, 192, 0.014) 5px, rgba(228, 216, 192, 0.014) 6px);
  --paper-edge: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(90, 78, 62, 0.4);
  --paper-edge-deep: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(90, 78, 62, 0.5);
  --seal-press: inset 0 1px 1.5px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(196, 90, 66, 0.22);
  --seal-bleed: 0 0 1px rgba(196, 90, 66, 0.42);
  --relic-candle-soft: rgba(232, 220, 191, 0.14);
  --relic-shadow-soft: rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ---------- 2. Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-texture);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  
  transition: background-color 0.32s var(--ease), color 0.22s var(--ease);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: var(--img-filter);
  
  transform: translateZ(0);
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 500;
  color: var(--ink);
}

::selection {
  background: var(--seal);
  color: var(--paper);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.45rem 0.9rem;
  z-index: 100;
  font-size: var(--t-note);
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

[data-aigc-mark] {
  width: min(100% - var(--pad-x) * 2, var(--frame));
  margin-inline: auto;
}

.aigc-disclosure {
  margin-block: 0 8px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-faint);
  font-weight: 400;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
}

/* ---------- 3. Type roles ---------- */

.eyebrow {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
  overflow-wrap: anywhere;
}

.chapter__head .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chapter__head .eyebrow::before {
  content: "·";
  color: var(--seal);
  font-size: 1.1em;
  line-height: 1;
  flex: none;
}

.display {
  font-family: var(--font-ancient);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.volume-tag {
  margin-top: 1.15rem;
  font-family: var(--font-ancient);
  font-size: var(--t-volume);
  letter-spacing: 0.22em;
  color: var(--seal);
}

.chapter-title {
  font-family: var(--font-ancient);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chapter-title {
  text-wrap: balance;
}

.person__tagline,
.person__summary,
.lexicon dd,
.orbit-list p,
.anomalies p,
.making-list li {
  text-wrap: pretty;
}

.section-title {
  font-family: var(--font-ancient);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: var(--ls-h2);
  line-height: 1.45;
}

.lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.84;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  max-width: var(--measure);
}

.prose {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.prose p + p {
  margin-top: 0.55rem;
}

.note {
  font-size: var(--t-note);
  line-height: 1.75;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.micro {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.year {
  font-family: var(--font-latin);
  font-size: var(--t-year);
  letter-spacing: 0.16em;
  color: var(--seal);
  font-variant-numeric: tabular-nums;
}

.quote {
  margin: 1.25rem 0;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 2px solid var(--seal);
  font-family: var(--font-ancient);
  font-size: var(--t-quote);
  line-height: 1.76;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.quote--tight {
  margin: 0.75rem 0;
}

.quote--center {
  text-align: center;
  border-left: 0;
  padding-left: 0;
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  padding-block: 1.1rem;
}

/* ---------- 4. Shell / archive frame ---------- */

.shell {
  width: min(100% - var(--pad-x) * 2, var(--frame));
  margin-inline: auto;
}

.shell--narrow {
  width: min(100% - var(--pad-x) * 2, var(--measure));
}

.shell--main {
  width: min(100% - var(--pad-x) * 2, var(--frame-read));
}

.chapter {
  padding-block: var(--sec-y);
  border-top: var(--rule) solid var(--line);
  position: relative;
}

.chapter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3.2rem;
  height: 2px;
  background: var(--line-brush-seal, var(--seal));
}

.chapter__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: 0.9rem;
  position: relative;
  border-bottom: none;
}

.chapter__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-brush);
}

.chapter__index {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}

.spread {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.spread__margin {
  padding-top: 0.75rem;
  border-top: var(--rule) solid var(--line-strong);
}

.spread__margin p + p {
  margin-top: 0.75rem;
}

/* ---------- 5. Hero — editorial opening spread ---------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--rule) solid var(--line);
  padding-block: 0 clamp(2rem, 5vw, 3.5rem);
}

/* 展卷入画：山水画意底色 */
.hero__shanshui-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero__shanshui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  opacity: 0.82;
  transition: opacity 0.4s var(--ease);
}

[data-theme="ink"] .hero__shanshui {
  color: #d6cbba;
  opacity: 0.68;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

/* 展卷入画：立轴装裱丝绦双线 */
.hero__roller {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    var(--bronze) 0%,
    var(--seal) 25%,
    var(--bronze) 50%,
    var(--seal) 75%,
    var(--bronze) 100%);
  box-shadow: 0 0 10px rgba(154, 59, 44, 0.4), 0 0 2px rgba(138, 106, 62, 0.8);
}

.hero__roller--left {
  left: 0;
}

.hero__roller--right {
  right: 0;
}

/* 展卷核心动效: 启轴横开与水墨气韵漫入 */
@keyframes scrollOpenMask {
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    clip-path: inset(0 0% 0 0%);
  }
}

@keyframes rollerGlideLeft {
  0% {
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
  }
  75% {
    left: 0%;
    opacity: 0.85;
    transform: translateX(0);
  }
  100% {
    left: 0%;
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes rollerGlideRight {
  0% {
    right: 50%;
    opacity: 1;
    transform: translateX(50%);
  }
  75% {
    right: 0%;
    opacity: 0.85;
    transform: translateX(0);
  }
  100% {
    right: 0%;
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes paintingBloom {
  0% {
    opacity: 0.2;
    filter: blur(5px) saturate(0.85);
  }
  50% {
    opacity: 0.85;
    filter: blur(1px) saturate(0.95);
  }
  100% {
    opacity: 1;
    filter: blur(0px) saturate(1);
  }
}

.is-unfurling .hero {
  animation: scrollOpenMask 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-unfurling .hero__roller--left {
  animation: rollerGlideLeft 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-unfurling .hero__roller--right {
  animation: rollerGlideRight 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-unfurling .hero__shanshui-wrap,
.is-unfurling .hero__grid {
  animation: paintingBloom 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__text {
  display: flex;
  flex-direction: column;
}

.hero__brand {
  margin-top: 1.1rem;
}

.hero__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.hero__yijuan {
  display: inline-block;
  font-family: var(--font-ancient);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  overflow-wrap: anywhere;
}

.hero__seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.26rem 0.34rem 0.22rem;
  border: 1.2px solid var(--seal);
  outline: 1px solid rgba(154, 59, 44, 0.32);
  outline-offset: 1.5px;
  background: rgba(154, 59, 44, 0.05);
  box-shadow: var(--seal-press);
  border-radius: 1px;
  user-select: none;
  flex-shrink: 0;
  text-shadow: var(--seal-bleed);
  vertical-align: middle;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.hero__seal-char {
  display: block;
  font-family: var(--font-ancient);
  font-size: 0.78rem;
  line-height: 1.08;
  color: var(--seal);
  font-weight: 600;
  letter-spacing: 0;
}

.hero__en {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero__en span {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero__en span {
  color: var(--bronze);
}

.nowrap {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero__yijuan,
  .hero__title-wrap,
  .hero__seal,
  .volume-tag,
  .person__name,
  .relic-glyph-label {
    white-space: nowrap;
  }
}

.hero__line {
  margin: 1.8rem 0 1.2rem;
  font-family: var(--font-ancient);
  font-size: 1.35rem;
  line-height: 1.62;
  letter-spacing: 0.08em;
  max-width: 26em;
  text-wrap: balance;
  border-left: 2.5px solid var(--seal);
  padding-left: 0.95rem;
}

.hero__line-part {
  display: inline-block;
  white-space: nowrap;
}

.hero__lead {
  max-width: 29em;
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.88;
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.75rem;
  font-family: var(--font-ancient);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  border-bottom: var(--rule) solid var(--line-strong);
  align-self: flex-start;
  padding: 0.45rem 0 0.5rem;
}

.hero__scroll:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.hero__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 38px -10px rgba(42, 36, 28, 0.16), 0 2px 6px rgba(42, 36, 28, 0.08);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

[data-theme="ink"] .hero__plate {
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  position: absolute;
  inset: 0;
}

.hero__plate-frame {
  position: absolute;
  inset: 0.65rem;
  pointer-events: none;
  z-index: 1;
  border: 1px solid var(--bronze);
  opacity: 0.35;
}

.hero__plate-frame::before,
.hero__plate-frame::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  border-color: var(--bronze);
  border-style: solid;
  opacity: 0.75;
}

.hero__plate-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.hero__plate-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.hero__plate figcaption {
  position: absolute;
  left: 1.2rem;
  bottom: 1.05rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--paper);
  background: rgba(20, 17, 14, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.35rem 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  border-left: 2px solid var(--seal);
  max-width: calc(100% - 2.4rem);
}

.hero__plate figcaption .plate-ai-badge {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: rgba(244, 236, 218, 0.88);
  font-weight: normal;
}

[data-theme="ink"] .hero__plate figcaption {
  background: rgba(20, 17, 14, 0.75);
}

.hero__rail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
  padding-top: 1.1rem;
  border-top: var(--rule) solid var(--line);
  position: relative;
}

.hero__rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(to right, var(--seal) 0%, var(--line) 100%);
}

.hero__rail-note {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hero__era-note {
  font-family: var(--font-ancient);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--bronze);
  font-weight: 500;
}

.hero__era-189 {
  font-size: var(--t-note);
  line-height: 1.72;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  max-width: 17.5rem;
  text-wrap: pretty;
}

.hero__era {
  font-family: var(--font-latin);
  font-size: 1.65rem;
  letter-spacing: 0.1em;
  color: var(--seal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__era-dash {
  margin-inline: 0.1em;
  color: var(--ink-faint);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
}

/* ---------- 6. Opening / relic prose blocks ---------- */

.opening-block {
  max-width: var(--measure);
}

.opening-block .quote {
  font-size: var(--t-quote);
  margin-block: 1.35rem;
}

.spread--relic {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.relic-mark {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0.5rem 0 1.5rem;
}

.relic-mark__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.relic-glyph {
  font-family: var(--font-ancient);
  font-size: clamp(3.6rem, 5vw + 2rem, 7.5rem);
  line-height: 1;
  color: var(--seal);
  letter-spacing: 0;
}

.relic-glyph-label {
  font-family: var(--font-ancient);
  font-size: 0.96rem;
  letter-spacing: 0.24em;
  color: var(--seal);
}

.relic-glyph-sub {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--bronze);
}

.relic-facts {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line);
  display: grid;
  gap: 0.85rem;
}

.relic-facts dt {
  font-family: var(--font-ancient);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--seal);
}

.relic-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.relic-stage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.relic-plate {
  margin: 0;
}

.relic-plate img {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--bg-deep);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-strong);
  border-radius: 0;
}

.relic-plate--hero img {
  aspect-ratio: 560 / 567;
  display: block;
}

.relic-plate figcaption {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.relic-plate__title {
  font-family: var(--font-ancient);
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  font-weight: 500;
}

.relic-plate__era {
  font-family: var(--font-latin);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--bronze);
}

.relic-plate__note {
  font-size: var(--t-note);
  line-height: 1.72;
  color: var(--ink-faint);
}

/* 研读全卷组件 */
.relic-scroll-viewer {
  border: var(--rule) solid var(--line);
  background: var(--bg-soft);
  padding: 0.85rem 1.1rem;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.relic-scroll-viewer[open] {
  background: var(--bg);
  border-color: var(--line-strong);
}

.relic-scroll-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-ancient);
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.08em;
}

.relic-scroll-toggle::-webkit-details-marker {
  display: none;
}

.relic-scroll-toggle__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--seal);
  color: var(--seal);
  font-size: 0.8rem;
  line-height: 1;
}

.relic-scroll-toggle__arrow {
  margin-left: auto;
  color: var(--bronze);
  font-size: 0.9rem;
  transition: transform 0.25s var(--ease);
}

.relic-scroll-viewer[open] .relic-scroll-toggle__arrow {
  transform: rotate(180deg);
}

.relic-scroll-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--rule) dashed var(--line);
}

.relic-scroll-plate {
  margin: 0;
}

.relic-scroll-plate img {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  display: block;
  box-shadow: var(--mount-mat);
}

.relic-scroll-plate figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}

/* 四部解构网格 */
.relic-anatomy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: var(--rule) solid var(--line);
}

.relic-card {
  display: flex;
  flex-direction: column;
  border: var(--rule) solid var(--line);
  background: var(--bg-soft);
  padding: 0.85rem;
  gap: 0.75rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.relic-card:hover {
  border-color: var(--bronze);
  box-shadow: var(--mount-mat-hover);
}

.relic-card__figure {
  margin: 0;
  background: var(--bg-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3.2;
}

.relic-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}

.relic-card:hover .relic-card__figure img {
  transform: scale(1.04);
}

.relic-card__title {
  font-family: var(--font-ancient);
  font-size: 0.98rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  letter-spacing: 0.12em;
}

.relic-card__cite {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--seal);
  margin: 0 0 0.45rem;
  line-height: 1.55;
}

.relic-card__desc {
  font-size: 0.84rem;
  color: var(--ink-faint);
  line-height: 1.68;
  margin: 0;
}

@media (min-width: 640px) {
  .relic-anatomy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .relic-anatomy {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rift__corner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.rift__corner-img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--seal);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--bronze), 0 4px 12px rgba(154, 59, 44, 0.2);
  filter: contrast(1.08) brightness(1.02);
}

.rift__line-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 1.1rem;
}

.footer__relic-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 1.25rem;
  padding: 0.6rem 1rem;
  border-top: var(--rule) dashed var(--line);
  border-bottom: var(--rule) dashed var(--line);
  max-width: 20rem;
  margin-inline: auto;
}

.footer__relic-seal-img {
  border: 1px solid var(--seal);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line);
}

.footer__relic-seal-text {
  font-family: var(--font-ancient);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--seal);
}

.feature {
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
}

.rift__space {
  position: relative;
  width: min(100% - var(--pad-x) * 2, 68rem);
  margin-inline: auto;
  padding-block: clamp(4.5rem, 13vw, 9.5rem);
}

.rift__line {
  display: block;
  width: 100%;
  height: auto;
}

.rift__seal {
  position: absolute;
  left: 51.4%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2.5deg);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--seal);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
  clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 100%, 0 100%); 
  pointer-events: none;
}

.rift__year {
  position: absolute;
  left: 54.6%;
  top: calc(50% + 2rem);
  font-family: var(--font-latin);
  font-size: var(--t-year);
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  pointer-events: none;
}

/* ---------- 8. Character archive (人物卷宗) ---------- */

.cast-group {
  margin-top: 3rem;
}

.cast-group__title {
  font-family: var(--font-ancient);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding-bottom: 0.45rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--rule) solid var(--line-strong);
}

.person {
  min-width: 0;
  break-inside: avoid;
}

.person__name {
  font-family: var(--font-ancient);
  font-size: clamp(1.35rem, 1.8vw, 1.68rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.person__identity {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.person__years {
  margin-left: 0.7em;
  font-family: var(--font-latin);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.person__tagline {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-def);
  letter-spacing: 0.08em;
  line-height: 1.62;
  color: var(--ink-2);
}

.person__ming {
  font-family: var(--font-ancient);
  color: var(--seal);
  letter-spacing: 0.12em;
}

.person__summary {
  margin-top: 0.55rem;
  font-size: 0.98rem;
  line-height: 1.82;
  color: var(--ink-muted);
  max-width: 34em;
}

.person__quote {
  margin-top: 0.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--seal);
  font-family: var(--font-ancient);
  font-size: 1.08rem;
  letter-spacing: 0.06em;
  line-height: 1.72;
  color: var(--ink);
  max-width: 30em;
}

.person__stages {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  list-style: none;
}

.person__stages li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.person__stages time {
  font-family: var(--font-latin);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--seal);
  font-variant-numeric: tabular-nums;
}

.person__stages span {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.person__stages .era {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 0.12rem;
}

.person__stages li:has(> .stage__future) {
  flex-basis: 100%;
}

.person__plate {
  margin: 0;
}

.person__plate img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 12%;
  background: var(--bg-deep);
  
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
  border-radius: 0;
}

.person__plate figcaption {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  line-height: 1.45;
}

.person__plate-era {
  display: block;
  font-family: var(--font-latin);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}

.person__ai-badge,
.person__ai-caption {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.chapter__ai-intro {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.relic-plate__ai-badge {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-top: 0.35rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.relic-card figcaption.relic-card__ai-badge {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.person__plate-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.person--lead .person__plate-set,
.person--wide .person__plate-set {
  max-width: 13.75rem;
}

.person--lead .person__plate-set {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
}

.person--lead {
  display: grid;
  gap: 1.75rem;
  align-items: start;
  padding-bottom: 2.75rem;
  border-bottom: var(--rule) solid var(--line);
}

.person--lead .person__name {
  font-size: var(--t-h2);
  letter-spacing: 0.2em;
}

.person--lead .person__plate--main img {
  aspect-ratio: 4 / 5;
  object-position: center 15%;
}

.cast-pair {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.75rem;
}

.cast-pair .person__plate {
  width: 100%;
  max-width: 22rem;
}

.person--plate .person__plate {
  margin-bottom: 0.95rem;
}

.person--wide {
  display: grid;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.75rem;
}

.cast-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.25rem;
  margin-top: 1.75rem;
}

.cast-row--six {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.25rem;
  margin-top: 1.75rem;
}

.cast-row--six > .person {
  width: 100%;
  max-width: 18rem;
}

.cast-row--six .person__plate {
  width: 100%;
  max-width: 18rem;
}

.cast-row--six .person__plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}

/* Interactive Morph Portrait (Empress He: Queen <-> Empress Dowager) */
.person__plate--morph {
  position: relative;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.person__plate--morph:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 4px;
}

.plate-morph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: var(--mount-mat);
  transition: box-shadow 0.35s var(--ease);
}

.person__plate--morph .plate-morph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  box-shadow: none !important;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.35s var(--ease);
}

.plate-morph__img--queen {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.plate-morph__img--dowager {
  opacity: 0;
  transform: scale(1.02);
  z-index: 2;
}

/* Hover or Active (Clicked/Toggled) State */
.person__plate--morph:hover .plate-morph__img--queen,
.person__plate--morph.is-morphed .plate-morph__img--queen {
  opacity: 0;
  transform: scale(0.98);
}

.person__plate--morph:hover .plate-morph__img--dowager,
.person__plate--morph.is-morphed .plate-morph__img--dowager {
  opacity: 1;
  transform: scale(1);
}

.person__plate--morph:hover .plate-morph,
.person__plate--morph.is-morphed .plate-morph,
.person--interactive:hover .person__plate--morph .plate-morph {
  box-shadow: var(--mount-mat-hover);
}

@media (prefers-reduced-motion: reduce) {
  .plate-morph__img--queen,
  .plate-morph__img--dowager {
    transition: opacity 0.01s linear, transform 0.01s linear;
  }
}

.plate-morph__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: var(--font-latin);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  position: relative;
  min-height: 1.4rem;
}

.plate-morph__caption .caption-state {
  display: inline-block;
  transition: opacity 0.35s var(--ease), color 0.35s var(--ease);
}

.caption-state--queen {
  opacity: 1;
}

.caption-state--dowager {
  opacity: 0;
  position: absolute;
  left: 0;
}

.person__plate--morph:hover .caption-state--queen,
.person__plate--morph.is-morphed .caption-state--queen {
  opacity: 0;
}

.person__plate--morph:hover .caption-state--dowager,
.person__plate--morph.is-morphed .caption-state--dowager {
  opacity: 1;
  color: var(--seal);
}

.plate-morph__hint {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(var(--bg-rgb, 234, 227, 211), 0.4);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.person__plate--morph:hover .plate-morph__hint,
.person__plate--morph.is-morphed .plate-morph__hint {
  border-color: var(--bronze);
  color: var(--ink);
  background: var(--bg);
}

.cast-notes {
  margin-top: 2.75rem;
  display: grid;
  gap: 0;
  border-top: var(--rule) solid var(--line-strong);
}

.person--text {
  padding: 1.3rem 0;
  border-bottom: var(--rule) solid var(--line);
}

.cast-lines {
  margin-top: 1.75rem;
  border-top: var(--rule) solid var(--line);
}

.person--line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: var(--rule) solid var(--line);
}

.person--line .person__identity,
.person--line .person__tagline {
  margin-top: 0;
}

/* ---------- 9. Orbit / parts / lexicon / anomalies ---------- */

.orbit-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: var(--rule) solid var(--line);
  align-items: baseline;
}

.orbit-list li:first-child {
  border-top: var(--rule) solid var(--line);
}

.orbit-list__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.16em;
}

.orbit-list__key {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.parts {
  border-top: var(--rule) solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr;
}

.part {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding: 1rem 0;
  border-bottom: var(--rule) solid var(--line);
  align-items: baseline;
}

.part__num {
  font-family: var(--font-latin);
  color: var(--bronze);
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  font-weight: 400;
  opacity: 0.85;
  
  padding-top: 0.1rem;
}

.part h3 {
  font-family: var(--font-ancient);
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  display: inline;
}

.part time {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--seal);
  opacity: 0.85;
}

.part > p {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.82;
  text-wrap: pretty;
}

.part .era {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 0.18rem;
}

.part__era-note {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  font-size: var(--t-note);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.lexicon {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule) solid var(--line);
}

.lexicon__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-bottom: var(--rule) solid var(--line);
  align-items: baseline;
}

.lexicon dt {
  font-family: var(--font-ancient);
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-weight: 500;
  position: relative;
}

.lexicon dt::after {
  content: "";
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  width: 1rem;
  height: 1px;
  background: var(--seal);
  opacity: 0.6;
}

.lexicon dd {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.82;
}

.lexicon__em {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 0.06em;
}

.anomalies {
  position: relative;
  padding-left: 2rem;
}

.anomalies::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--seal) 0%, var(--line-strong) 60%, var(--line) 100%);
  opacity: 0.55;
}

.anomalies li {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.15rem;
  padding: 0.85rem 0;
  border-bottom: var(--rule) solid var(--line);
  align-items: baseline;
}

.anomalies li::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--seal);
  border: 1px solid var(--bg);
  box-shadow: 0 0 0 1px var(--seal);
  opacity: 0.75;
}

.anomalies .era {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

.anomalies li:first-child {
  border-top: var(--rule) solid var(--line);
}

.anomalies__em {
  font-family: var(--font-ancient);
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 500;
}

.after-line {
  margin-top: 1.75rem;
  font-family: var(--font-ancient);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.prose__names {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-block: 0.85rem !important;
}

.making-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  max-width: var(--measure);
}

.making-list li {
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: var(--rule) solid var(--line-strong);
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: var(--rule) solid var(--line);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
}

.site-header__name {
  font-family: var(--font-ancient);
  font-size: 1.12rem;
  letter-spacing: 0.3em;
  
  margin-right: -0.3em;
  color: var(--ink);
}

.site-header__aside {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.site-header__logo {
  flex: none;
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.footer__master-logo {
  flex: none;
  width: 84px;
  height: 84px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.site-header__nav {
  display: none;
}

.site-header__menu {
  position: relative;
}

.site-header__menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.42rem 0.7rem;
  border: var(--rule) solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}

.site-header__menu > summary::-webkit-details-marker {
  display: none;
}

.site-header__menu[open] > summary,
.site-header__menu > summary:hover {
  color: var(--seal);
  border-color: var(--seal);
}

.site-header__menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  display: grid;
  min-width: 8.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-soft);
  border: var(--rule) solid var(--line-strong);
}

.site-header__menu nav a {
  padding: 0.34rem 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  text-decoration: none;
}

.site-header__menu nav a:hover {
  color: var(--seal);
}

.theme-bar {
  display: flex;
  gap: 0.35rem;
}

.theme-btn {
  appearance: none;
  border: var(--rule) solid var(--line-strong);
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  padding: 0.6rem 1.05rem;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.theme-btn[aria-pressed="true"] {
  color: var(--paper);
  background: var(--seal);
  border-color: var(--seal);
}

.theme-btn:hover:not([aria-pressed="true"]) {
  color: var(--seal);
  border-color: var(--seal);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

.footer {
  border-top: var(--rule) solid var(--line-strong);
  padding: 2rem 0 2.75rem;
  margin-top: 0;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
}

.footer__brand {
  display: flex;
  
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--rule) solid var(--line);
}

.footer__slogan {
  font-family: var(--font-ancient);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.footer__slogan-sub {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--t-note);
  letter-spacing: 0.28em;
  color: var(--ink-faint);
}

.footer__cn {
  margin-top: 0.75rem;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  line-height: 1.8;
}

.footer__end {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  line-height: 2.2;
  font-size: 1.02rem;
  color: var(--ink-2);
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line);
  margin-top: 1.25rem;
}

/* ---------- social + contact ---------- */

.social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 1.6rem 0 0;
  padding: 0;
}

.social__chip,
.social__link {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  border: var(--rule) solid var(--line);
  padding: 0.34rem 0.62rem;
}

.social__chip {
  cursor: default;
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.social__link:hover,
.social__link:focus-visible {
  color: var(--ink-muted);
  border-color: var(--line-strong);
}

.social__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- legal layer ---------- */

.footer__legal {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: var(--rule) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.5rem;
}

.footer__copy {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.footer__shape,
.footer__privacy,
.making-boundary {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  max-width: 48rem;
}

.footer__icp {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.6em;
  row-gap: 0.4rem;
  text-align: center;
}

.footer__icp a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
}

.footer__icp a:hover,
.footer__icp a:focus-visible {
  color: var(--seal);
}

.footer__reg {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  white-space: nowrap;
}

.footer__reg-sep {
  font-size: 0.875rem;
  color: var(--line-strong);
}

.footer__mps-icon {
  flex: none;
  height: 1.25rem;
  width: auto;
  vertical-align: middle;
}

.to-top {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.2rem 0.15rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease);
}

.to-top:hover {
  color: var(--ink-muted);
}

.to-top:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

.to-top__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.to-top:hover .to-top__arrow {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top__arrow {
    transition: none;
  }
}

@media (min-width: 640px) {
  .site-header__logo {
    width: 46px;
    height: 46px;
  }

  .footer__master-logo {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 960px) {
  .site-header__logo {
    width: 52px;
    height: 52px;
  }

  .footer__master-logo {
    width: 112px;
    height: 112px;
  }

  .site-header__nav {
    display: flex;
    gap: clamp(1rem, 2.2vw, 2.1rem);
  }

  .site-header__nav a {
    font-family: var(--font-display);
    font-size: var(--t-micro);
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 0.25s var(--ease);
  }

  .site-header__nav a:hover {
    color: var(--seal);
  }

  .site-header__menu {
    display: none;
  }
}

@media (max-width: 559px) {
  .footer__reg-sep {
    display: none;
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .footer__icp {
    column-gap: 1em;
    justify-content: center;
    text-align: center;
  }

  .to-top {
    margin-left: 0;
  }
}

.mingshi {
  font-family: var(--font-ancient);
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--ink);
  opacity: 0.22; 
  user-select: none;
  pointer-events: none;
}

.mingshi--l2 { opacity: 0.46; } 
.mingshi--l3 { opacity: 0.72; } 

[data-theme="ink"] .mingshi { opacity: 0.26; }
[data-theme="ink"] .mingshi--l2 { opacity: 0.52; }
[data-theme="ink"] .mingshi--l3 { opacity: 0.78; }

.hero {
  position: relative;
}

.hero__future {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  text-align: right;
}

.relic-sealmark {
  position: absolute;
  top: -0.82rem;
  left: 4.2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  background: var(--seal);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
  clip-path: polygon(0 0, 78% 0, 100% 24%, 100% 100%, 0 100%); 
  transform: rotate(-2deg);
  pointer-events: none;
}

.person__stages .stage__future {
  margin-left: auto;
  align-self: center;
  font-size: 0.72rem;
}

.stage--dim > time,
.stage--dim > span:not(.mingshi) {
  opacity: 0.72;
}

.person__namechain {
  margin-top: 0.85rem;
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
}

.person__namechain span {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  color: var(--ink);
}

.person__namechain span:nth-child(1) { font-size: 0.82rem; opacity: 0.34; }
.person__namechain span:nth-child(2) { font-size: 0.76rem; opacity: 0.24; transform: translateY(0.14rem); }
.person__namechain span:nth-child(3) { font-size: 0.7rem; opacity: 0.15; transform: translateY(0.28rem); }

.person--future {
  position: relative;
}

.cast-future {
  position: absolute;
  right: -0.9rem;
  top: 38%;
  font-size: 0.9rem;
}

.future-blank {
  display: inline-block;
  width: 3.4rem;
  height: 0.62em;
  margin-left: 0.9rem;
  border-bottom: var(--rule) solid var(--line-strong);
  opacity: 0.38;
  vertical-align: baseline;
  pointer-events: none;
}

.era-stack {
  display: block;
  margin-top: 0.2rem;
}

.era-stack i {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.era-stack i:nth-child(1) { opacity: 0.5; }
.era-stack i:nth-child(2) { opacity: 0.38; transform: translateX(0.15rem); }
.era-stack i:nth-child(3) { opacity: 0.28; transform: translateX(0.3rem); }
.era-stack i:nth-child(4) { opacity: 0.44; transform: translateX(0.45rem); }

#echo .prose {
  position: relative;
}

.echo-xian {
  display: block;
  margin: 1.85rem 0 0.5rem auto;
  font-family: var(--font-ancient);
  font-size: clamp(3.2rem, 5.5vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: right;
  color: var(--seal);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(154, 59, 44, 0.22);
}

[data-theme="ink"] .echo-xian {
  color: var(--seal);
  opacity: 0.68;
  text-shadow: 0 2px 18px rgba(196, 90, 66, 0.35);
}

.footer__unfin {
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-size: var(--t-note);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  opacity: 0.55;
}

@media (max-width: 959px) {
  .cast-future {
    position: static;
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    text-align: right;
  }
}

/* ---------- 11. Reveal — 档案翻页式揭示 ---------- */

.reveal.is-in {
  animation: rise 0.65s var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chapter__head.reveal {
  transition-delay: 0s;
}

.person--lead.reveal.is-in {
  animation-delay: 0.06s;
}

@media (max-width: 639px) {
  .hero__shanshui {
    opacity: 0.62;
  }

  [data-theme="ink"] .hero__shanshui {
    opacity: 0.52;
  }

  .hero__grid {
    gap: 1.5rem;
    padding-top: 0.9rem;
  }

  .hero__brand {
    margin-top: 0.8rem;
  }

  .hero__title-wrap {
    gap: 0.7rem;
  }

  .hero__seal {
    padding: 0.22rem 0.28rem 0.18rem;
    outline-offset: 1.2px;
  }

  .hero__seal-char {
    font-size: 0.72rem;
  }

  .hero__en {
    margin-top: 0.95rem;
    flex-flow: row wrap;
    gap: 0 0.5rem;
  }

  .hero__en {
    margin-top: 0.85rem;
  }

  .hero__line {
    margin: 1.15rem 0 0.9rem;
    font-size: 1.24rem;
    line-height: 1.62;
    text-wrap: balance;
  }

  .hero__lead {
    line-height: 1.75;
  }

  .hero__scroll {
    margin-top: 1.15rem;
    padding: 0.35rem 0 0.4rem;
  }

  
  .chapter__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    align-items: start;
  }

  .chapter__index {
    text-align: left;
  }
}

@media (min-width: 640px) {
  :root {
    --pad-x: clamp(1.5rem, 4.5vw, 3rem);
    --gutter: clamp(1.5rem, 3vw, 2.5rem);
    --sec-y: clamp(4rem, 7vw, 5.5rem);
  }

  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .hero__plate {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5;
  }

  .hero__rail {
    grid-column: 1;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

  .spread__margin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
  }

  .cast-pair,
  .cast-notes,
  .person--wide,
  .lexicon,
  .making-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cast-notes,
  .lexicon {
    column-gap: calc(var(--gutter) * 1.4);
  }

  .person--wide {
    gap: var(--gutter);
  }

  .cast-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem var(--gutter);
  }

  
  #figures .cast-row--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem var(--gutter);
  }

  #figures .cast-row--six > .person {
    width: 100%;
    max-width: 18rem;
  }

  .person--line {
    grid-template-columns: 7.5rem 9rem minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: baseline;
  }

  .orbit-list li {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .part {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .part h3 {
    display: inline;
  }

  .after-line {
    text-align: center;
  }

  .footer__inner {
    justify-content: space-between;
  }

  .footer__end {
    text-align: right;
  }
}

@media (min-width: 960px) {
  :root {
    --t-display: clamp(3.1rem, 3.6vw, 4.25rem);
    --t-volume: 1.12rem;
    --t-h1: clamp(1.95rem, 2.3vw, 2.35rem);
    --t-h2: clamp(1.52rem, 1.8vw, 1.78rem);
    --t-h3: clamp(1.22rem, 1.35vw, 1.32rem);
    --t-lead: clamp(1.12rem, 1.25vw, 1.22rem);
    --t-quote: clamp(1.16rem, 1.3vw, 1.28rem);
    --t-note: 0.88rem;
    --t-micro: 0.76rem;
    --t-year: 0.92rem;
    --lh-body: 1.88;
    --pad-x: clamp(2rem, 3.6vw, 3.5rem);
    --gutter: clamp(2rem, 3.2vw, 3.25rem);
  }

  .hero {
    padding-block: 0;
  }

  
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-areas:
      "text  plate"
      "rail  plate";
    column-gap: var(--gutter);
    align-items: stretch;
    min-height: min(80svh, 720px);
    padding-top: clamp(1.25rem, 3vw, 2rem);
  }

  .hero__text {
    grid-area: text;
  }

  .hero__title-wrap {
    gap: 1.15rem;
  }

  .hero__seal {
    padding: 0.32rem 0.4rem 0.28rem;
    outline-offset: 2px;
  }

  .hero__seal-char {
    font-size: 0.94rem;
  }

  .hero__plate {
    grid-area: plate;
    grid-row: auto;
    aspect-ratio: auto;
    min-height: min(70svh, 620px);
  }

  .hero__rail {
    grid-area: rail;
    grid-column: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1.5rem;
    margin-top: auto;
  }

  .hero__rail .hero__era {
    flex-shrink: 0;
  }

  .hero__line {
    font-size: clamp(1.45rem, 2.1vw, 1.82rem);
    margin-block: clamp(1.5rem, 4vh, 2.75rem) 1.25rem;
  }

  
  .echo-xian {
    position: static;
    margin: 1.85rem 0 0.5rem auto;
    text-align: right;
  }

  
  .spread {
    grid-template-columns: minmax(0, 1fr) 11.5rem;
    gap: var(--gutter);
  }

  .spread--relic {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }

  .spread__margin {
    position: sticky;
    top: 1.5rem;
    display: block;
    padding-top: 0.25rem;
  }

  
  .person--lead {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--gutter) 2.5rem;
  }

  .person--lead .person__plate-set {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 1.1rem 1rem;
  }

  .person--lead .person__body {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .cast-pair .person__plate {
    max-width: 22rem;
  }

  .person--wide .person__plate-set {
    max-width: none;
  }

  .cast-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cast-row:has(> .person:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  
  .cast-row .person__plate {
    max-width: 18rem;
  }

  .person--wide {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }

  .cast-row > .person__plate img {
    aspect-ratio: 4 / 5;
  }

  .parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .part {
    grid-template-columns: 2.2rem minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    padding: 1.15rem 1.15rem 1.15rem 0;
  }

  .part > p {
    grid-column: auto;
  }

  .part h3 {
    display: block;
  }

  .part time {
    display: block;
    margin-top: 0.2rem;
  }

  .chapter__head {
    margin-bottom: clamp(2rem, 3.4vw, 2.9rem);
  }
}

@media (min-width: 1440px) {
  :root {
    --t-display: clamp(3.4rem, 3.8vw, 4.5rem);
    --t-h1: clamp(2.1rem, 2.4vw, 2.5rem);
    --t-quote: 1.28rem;
    --t-note: 0.9rem;
    --pad-x: clamp(2.5rem, 3.4vw, 4rem);
  }

  
  .shell,
  .shell--main,
  .shell--narrow {
    width: min(100% - var(--pad-x) * 2, var(--frame));
  }

  .chapter {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-content: start;
  }

  .chapter > * {
    grid-column: 2 / span 10;
  }

  .chapter__head {
    grid-column: 2 / span 10;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  
  .hero__grid {
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 5fr) minmax(0, 1.6fr);
    grid-template-areas: "text plate rail";
    column-gap: var(--gutter);
    min-height: min(78svh, 760px);
  }

  .hero__plate {
    min-height: 0;
    
    aspect-ratio: 4 / 5.05;
    align-self: start;
    width: min(100%, 30rem);
  }

  .hero__rail {
    grid-area: rail;
    display: block;
    margin-top: 0;
    padding: 0.2rem 0 0 1.1rem;
    border-left: var(--rule) solid var(--line);
    border-top: 0;
  }

  .hero__era {
    font-size: 2.35rem;
    letter-spacing: 0.08em;
  }

  .hero__rail-note {
    margin-top: 0.9rem;
  }

  
  .hero__future {
    position: absolute;
    top: 22%;
    right: clamp(0.9rem, 2vw, 2rem);
    margin: 0;
    writing-mode: vertical-rl;
    font-size: 0.95rem;
  }

  .hero__meta {
    margin-top: 1.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  
  .spread {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  
  .spread > .opening-block {
    grid-column: 2 / span 7;
  }

  .spread__margin {
    grid-column: 10 / span 2;
    top: 2.5rem;
  }

  .spread--relic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .spread--relic > .relic-prose {
    grid-column: 1 / span 6;
  }

  .spread--relic > .relic-stage {
    grid-column: 7 / span 6;
  }

  
  .cast-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: var(--gutter);
    margin-top: 4.5rem;
  }

  .cast-group__title {
    grid-column: 1;
    position: sticky;
    top: 2.5rem;
    align-self: start;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 1.15rem;
  }

  .cast-group__body {
    grid-column: 2;
    padding-top: 0.15rem;
    border-top: var(--rule) solid var(--line-strong);
  }

  .person--lead {
    grid-template-columns: minmax(0, 4.8fr) minmax(0, 5.2fr) minmax(0, 2.8fr);
    column-gap: var(--gutter);
    padding-bottom: 3.5rem;
  }

  
  .person--lead .person__plate--main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 30rem;
  }

  .person--lead .person__body {
    grid-column: 2;
    grid-row: 1;
  }

  .person--lead .person__plate-set {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 13.75rem;
    justify-self: start;
  }

  .cast-pair {
    gap: var(--gutter) 3.5rem;
    margin-top: 3.25rem;
  }

  .cast-row {
    margin-top: 2.25rem;
  }

  .cast-row .person__plate img {
    aspect-ratio: 4 / 5.1;
  }

  
  .cast-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem var(--gutter);
  }

  .cast-row:has(> .person:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
  }

  .cast-row:not(:has(> .person:nth-child(3))) .person--plate {
    display: grid;
    grid-template-columns: 13.75rem minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  
  .cast-row:not(:has(> .person:nth-child(3))) .person__plate {
    grid-column: 1;
    grid-row: 1 / span 6;
    margin-bottom: 0;
  }

  
  .cast-row .person__plate {
    max-width: 18rem;
  }

  .cast-pair .person__plate {
    max-width: 24rem;
  }

  
  .person--wide .person__plate-set {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 13.75rem));
    column-gap: var(--gutter);
  }

  .person--lead .person__plate-set {
    max-width: 18rem;
  }

  .cast-notes {
    column-gap: 4rem;
    margin-top: 3.25rem;
  }

  .person--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 3.25rem;
  }

  
  .parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3.25rem;
  }

  .part {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.45rem 1rem;
    padding: 1.35rem 1.75rem 1.35rem 0;
  }

  .part h3,
  .part time {
    display: inline;
  }

  .part time {
    margin-top: 0;
    margin-left: 0.7rem;
  }

  .part > p {
    grid-column: 1 / -1;
  }

  .orbit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }

  .lexicon {
    column-gap: 5rem;
  }

  
  #anomaly > *,
  #making > * {
    grid-column: 2 / span 7;
  }

  #why > * {
    grid-column: 6 / span 7;
  }

  #echo > * {
    grid-column: 3 / span 8;
  }

  #terms > *,
  #parts > *,
  #orbit > * {
    grid-column: 2 / span 11;
  }
}

@media (min-width: 1720px) {
  
  :root {
    --gutter: 3.5rem;
    --frame: 1720px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5.4fr) minmax(0, 1.6fr);
  }

  #terms > *,
  #parts > *,
  #orbit > * {
    grid-column: 1 / -1;
  }

  .spread > .opening-block {
    grid-column: 2 / span 7;
  }

  .lexicon dd {
    max-width: var(--measure);
  }

  #anomaly > *,
  #making > * {
    grid-column: 2 / span 8;
  }

  #why > * {
    grid-column: 5 / span 8;
  }

  #echo > * {
    grid-column: 3 / span 9;
  }
}

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

  .reveal.is-in {
    animation: none;
  }
}

@media (min-width: 960px) {
  #figures .cast-row--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
  }

  #figures .cast-row--six > .person {
    width: 100%;
    max-width: 18rem;
  }
}

:root,
[data-theme="silk"] {
  --line-brush: linear-gradient(90deg, transparent 0%, rgba(196, 180, 148, 0.35) 12%, var(--line-strong) 50%, rgba(196, 180, 148, 0.35) 88%, transparent 100%);
  --line-brush-seal: linear-gradient(90deg, var(--seal) 0%, rgba(154, 59, 44, 0.45) 75%, transparent 100%);
  --img-filter: sepia(0.08) saturate(0.82) contrast(1.04) brightness(1.01);
  --mount-mat: 0 0 0 3px var(--bg), 0 0 0 4px var(--line), 0 10px 28px rgba(35, 29, 22, 0.07);
  --mount-mat-hover: 0 0 0 3px var(--bg), 0 0 0 4px var(--bronze), 0 8px 24px rgba(42, 36, 28, 0.1);
}

[data-theme="ink"] {
  --line-brush: linear-gradient(90deg, transparent 0%, rgba(58, 50, 40, 0.4) 12%, var(--line-strong) 50%, rgba(58, 50, 40, 0.4) 88%, transparent 100%);
  --line-brush-seal: linear-gradient(90deg, var(--seal) 0%, rgba(196, 90, 66, 0.5) 75%, transparent 100%);
  --img-filter: sepia(0.05) saturate(0.85) contrast(1.10) brightness(1.10);
  --mount-mat: 0 0 0 3px var(--bg), 0 0 0 4px var(--line), 0 12px 32px rgba(0, 0, 0, 0.45);
  --mount-mat-hover: 0 0 0 3px var(--bg), 0 0 0 4px var(--bronze), 0 8px 28px rgba(184, 149, 106, 0.15);
}

.person__plate img,
.relic-plate img {
  box-shadow: var(--mount-mat);
  transition: box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}

.person--lead .person__plate--main img {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-strong), 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 8px 24px rgba(42, 36, 28, 0.08);
}

.person--plate:hover .person__plate img,
.person--lead:hover .person__plate img,
.person--wide:hover .person__plate img,
.relic-plate:hover img {
  box-shadow: var(--mount-mat-hover);
  filter: var(--img-filter) contrast(1.04) brightness(1.03);
}

.person--lead:hover .person__plate--main img {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--seal), 0 0 0 7px var(--bg), 0 0 0 8px var(--bronze), 0 12px 32px rgba(42, 36, 28, 0.14);
}

.hero__plate img {
  transition: filter 0.35s var(--ease);
}

.hero__plate:hover img {
  filter: var(--img-filter) contrast(1.04) brightness(1.03);
}

.hero__plate-frame::before,
.hero__plate-frame::after {
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease);
}

.hero__plate:hover .hero__plate-frame::before,
.hero__plate:hover .hero__plate-frame::after {
  opacity: 1;
  border-color: var(--seal);
}

.person__plate figcaption,
.relic-plate figcaption {
  position: relative;
  padding-left: 0.65rem;
  transition: color 0.25s var(--ease);
}

.person__plate figcaption::before,
.relic-plate figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 3px;
  height: 3px;
  background: var(--seal);
  border-radius: 50%;
  opacity: 0.6;
}

.hero__line .nowrap {
  color: var(--bronze);
  font-style: normal;
}

.hero__scroll {
  position: relative;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.hero__scroll:hover {
  padding-left: 0.35rem;
}

.chapter {
  border-top: 0;
  position: relative;
}

.chapter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-brush);
}

.chapter::before {
  background: var(--line-brush-seal);
  height: 2px;
}

.part,
.lexicon__item,
.anomalies li,
.orbit-list li {
  border-bottom: 0;
  position: relative;
}

.part::after,
.lexicon__item::after,
.anomalies li::after,
.orbit-list li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-brush);
  opacity: 0.75;
}

.footer {
  border-top: 0;
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-brush);
}

.display,
.chapter-title {
  text-shadow: 0 0 1px rgba(35, 29, 22, 0.18);
  letter-spacing: 0.16em;
}

[data-theme="ink"] .display,
[data-theme="ink"] .chapter-title {
  text-shadow: 0 0 1px rgba(238, 229, 211, 0.22);
}

.relic-sealmark,
.rift__seal {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(154, 59, 44, 0.25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.relic-glyph {
  text-shadow: 0 2px 10px rgba(154, 59, 44, 0.16);
  letter-spacing: -0.02em;
}

.quote {
  border-left: 2px solid var(--seal);
  box-shadow: -4px 0 0 0 var(--bronze);
  padding: 0.35rem 0 0.35rem 1.25rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: box-shadow 0.3s var(--ease);
}

.quote:hover {
  box-shadow: -4px 0 0 0 var(--seal);
}

.orbit-list li {
  position: relative;
  transition: background-color 0.25s var(--ease), padding-left 0.25s var(--ease);
  border-radius: 0;
}

.orbit-list li:hover {
  background-color: rgba(138, 106, 62, 0.05);
  padding-left: 0.5rem;
}

.orbit-list__name {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: var(--ink);
}

.orbit-list__name::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  background: var(--seal);
  margin-right: 0.6rem;
  flex: none;
  opacity: 0.5;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.orbit-list li:hover .orbit-list__name::before {
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 6px var(--seal);
}

.part {
  transition: border-bottom-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.part:hover {
  border-bottom-color: var(--line-strong);
}

.part:hover .part__num {
  opacity: 1;
  color: var(--seal);
}

.part:hover h3 {
  color: var(--ink);
}

.lexicon__item {
  transition: background-color 0.25s var(--ease);
}

.lexicon__item:hover {
  background-color: rgba(138, 106, 62, 0.03);
}

.lexicon dt::after {
  background: linear-gradient(90deg, var(--seal) 0%, rgba(154, 59, 44, 0.25) 100%);
  transition: width 0.3s var(--ease), opacity 0.3s var(--ease);
}

.lexicon__item:hover dt::after {
  width: 2rem;
  opacity: 0.9;
}

.anomalies li {
  transition: transform 0.25s var(--ease);
}

.anomalies li:hover {
  transform: translateX(4px);
}

.anomalies li::before {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.anomalies li:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px var(--seal), 0 0 8px rgba(154, 59, 44, 0.4);
}

.site-header__nav a {
  position: relative;
  padding-block: 0.2rem;
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--seal), transparent);
  transition: width 0.25s var(--ease), left 0.25s var(--ease);
}

.site-header__nav a:hover::after {
  width: 100%;
  left: 0;
}

.making-list li {
  transition: border-left-color 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.making-list li:hover {
  border-left-color: var(--seal);
  color: var(--ink);
  padding-left: 1.05rem;
}

[data-theme="silk"] body {
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(180, 166, 140, 0.025) 3px, rgba(180, 166, 140, 0.025) 4px);
}

.cast-group__title {
  padding-left: 0.85rem;
  border-left: 2px solid var(--seal);
  transition: border-left-color 0.25s var(--ease);
}

.relic-plate {
  position: relative;
  padding: 0.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(42, 36, 28, 0.04);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.relic-plate:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 20px rgba(42, 36, 28, 0.08);
}

.relic-plate__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.relic-plate__title::before {
  content: "器";
  display: inline-block;
  font-size: 0.62rem;
  padding: 0.08rem 0.28rem;
  background: var(--seal);
  color: var(--paper);
  border-radius: 0;
  line-height: 1.1;
  font-family: var(--font-display);
}

.rift__space {
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .rift__line path {
    animation: riftGlow 6s ease-in-out infinite alternate;
  }
}

@keyframes riftGlow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  100% { filter: drop-shadow(0 0 3px rgba(196, 90, 66, 0.4)); }
}

.rift__seal {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  pointer-events: auto;
}

.rift__space:hover .rift__seal {
  transform: translate(-50%, -50%) rotate(-1deg) scale(1.06);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), 0 0 14px rgba(196, 90, 66, 0.45);
}

.rift__year {
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: auto;
}

.rift__space:hover .rift__year {
  color: var(--seal);
  transform: translateX(2px);
}

.mingshi {
  letter-spacing: 0.34em;
  transition: opacity 0.35s var(--ease);
}

.hero:hover .mingshi {
  opacity: 0.26;
}

[data-theme="ink"] .hero:hover .mingshi {
  opacity: 0.28;
}

@media (max-width: 639px) {
  .site-header__menu nav {
    box-shadow: 0 8px 24px rgba(42, 36, 28, 0.15);
    border-color: var(--line-strong);
  }

  .relic-plate {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .person__plate img,
  .relic-plate img,
  .orbit-list li,
  .orbit-list__name::before,
  .part,
  .lexicon dt::after,
  .anomalies li,
  .anomalies li::before,
  .site-header__nav a::after,
  .hero__scroll,
  .making-list li,
  .rift__line path,
  .rift__seal,
  .rift__year,
  .mingshi {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ---------- M8.8 全域系统级高级视觉重塑（东方古典档案质感 / 展卷仪式感 / 交互微澜） ---------- */

/* 1. 命注朱印标签 — 仿汉魏金石朱泥私印微标 */
.person__ming {
  font-family: var(--font-ancient);
  font-size: 0.86em;
  letter-spacing: 0.12em;
  color: var(--seal);
  white-space: nowrap;
  display: inline-block;
  padding: 0.08rem 0.42rem 0.06rem;
  background: rgba(154, 59, 44, 0.08);
  border: 1px solid rgba(154, 59, 44, 0.35);
  box-shadow: inset 0 0 0 1px rgba(154, 59, 44, 0.12), 0 1px 3px rgba(42, 36, 28, 0.04);
  border-radius: 1px;
  margin-left: 0.35rem;
  vertical-align: baseline;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.22s var(--ease);
}

[data-theme="ink"] .person__ming {
  color: var(--seal);
  background: rgba(196, 90, 66, 0.14);
  border-color: rgba(196, 90, 66, 0.42);
  box-shadow: inset 0 0 0 1px rgba(196, 90, 66, 0.18), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.person:hover .person__ming {
  background: rgba(154, 59, 44, 0.16);
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1px rgba(154, 59, 44, 0.22), 0 2px 8px rgba(154, 59, 44, 0.22);
  transform: translateY(-0.5px);
}

[data-theme="ink"] .person:hover .person__ming {
  background: rgba(196, 90, 66, 0.26);
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1px rgba(196, 90, 66, 0.28), 0 3px 10px rgba(196, 90, 66, 0.38);
  transform: translateY(-0.5px);
}

/* 2. Header 绢素雾感与展卷进度丝绦 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(233, 223, 200, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-brush);
  transition: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

[data-theme="ink"] .site-header {
  background: rgba(20, 17, 14, 0.9);
  border-bottom-color: var(--line-brush);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px -2px rgba(42, 36, 28, 0.12);
}

[data-theme="ink"] .site-header.is-scrolled {
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.55);
}

/* 站内目录导航链接微动效 */
.site-header__nav a {
  position: relative;
  padding: 0.3rem 0.2rem;
  transition: color 0.25s var(--ease);
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--seal);
  transition: width 0.28s var(--ease), left 0.28s var(--ease);
  pointer-events: none;
}

.site-header__nav a:hover {
  color: var(--seal);
}

.site-header__nav a:hover::after {
  width: 100%;
  left: 0;
}

/* 顶部展卷微丝绦（CSS Scroll-Driven 或 JS 渐进回退） */
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: linear-gradient(90deg, var(--seal) 0%, var(--bronze) 60%, var(--seal) 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  pointer-events: none;
  transition: transform 0.1s linear;
}

@supports (animation-timeline: scroll()) {
  .site-header::after {
    transition: none;
    animation: header-scroll-progress auto linear;
    animation-timeline: scroll();
  }

  @keyframes header-scroll-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* 3. Hero 首屏光影氛围与展框装裱已通过 .hero__plate 与 .hero__plate-frame 强化 */

/* 4. 人物与器物画心双层托裱与轻揭档案微交互 */
.person__plate img,
.relic-plate img {
  border: 1px solid var(--line);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong), 0 6px 18px -2px rgba(42, 36, 28, 0.09);
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease), border-color 0.38s var(--ease), filter 0.38s var(--ease);
}

[data-theme="ink"] .person__plate img,
[data-theme="ink"] .relic-plate img {
  border-color: var(--line);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--bronze), 0 8px 24px -2px rgba(0, 0, 0, 0.6);
}

.person--plate:hover .person__plate img,
.person--lead:hover .person__plate img,
.person--wide:hover .person__plate img,
.relic-plate:hover img {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--bronze);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--seal), 0 12px 28px -4px rgba(42, 36, 28, 0.15), 0 2px 8px rgba(154, 59, 44, 0.08);
  filter: saturate(0.96) contrast(1.04) brightness(1.03);
}

[data-theme="ink"] .person--plate:hover .person__plate img,
[data-theme="ink"] .person--lead:hover .person__plate img,
[data-theme="ink"] .person--wide:hover .person__plate img,
[data-theme="ink"] .relic-plate:hover img {
  border-color: var(--bronze);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--seal), 0 14px 32px -4px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(196, 90, 66, 0.25);
  filter: saturate(0.98) contrast(1.08) brightness(1.12);
}

/* 5. 朱印、神印与巨字命印泥质感 */
.relic-glyph {
  text-shadow: 0 2px 14px rgba(154, 59, 44, 0.22);
  letter-spacing: -0.02em;
}

[data-theme="ink"] .relic-glyph {
  text-shadow: 0 2px 18px rgba(196, 90, 66, 0.35);
}

.relic-sealmark,
.rift__seal {
  border-radius: 2px 3px 2px 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(154, 59, 44, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

[data-theme="ink"] .relic-sealmark,
[data-theme="ink"] .rift__seal {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(196, 90, 66, 0.38);
}

/* 6. 词条、卷次与轨道目录翻读反馈 */
.part {
  position: relative;
  transition: background-color 0.28s var(--ease), padding-left 0.28s var(--ease), border-color 0.28s var(--ease);
}

.part::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: var(--seal);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.part:hover {
  background: rgba(184, 149, 106, 0.05);
  padding-left: 0.65rem;
}

.part:hover::before {
  opacity: 0.85;
  transform: scaleY(1);
}

[data-theme="ink"] .part:hover {
  background: rgba(184, 149, 106, 0.08);
}

.lexicon__item {
  position: relative;
  transition: background-color 0.28s var(--ease), padding-left 0.28s var(--ease);
}

.lexicon__item:hover {
  background: rgba(184, 149, 106, 0.04);
  padding-left: 0.5rem;
}

.lexicon__item:hover dt::after {
  width: 2.2rem;
  opacity: 1;
  background: var(--seal);
}

.lexicon__em {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 0.06em;
  border-bottom: 1px dotted rgba(154, 59, 44, 0.45);
  padding-bottom: 1px;
}

[data-theme="ink"] .lexicon__em {
  border-bottom-color: rgba(196, 90, 66, 0.55);
}

.orbit-list li {
  transition: background-color 0.28s var(--ease), padding-left 0.28s var(--ease);
}

.orbit-list li:hover {
  background: rgba(184, 149, 106, 0.04);
  padding-left: 0.5rem;
}

/* 7. 页面 reveal 漫入动画增强 */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal.is-in {
  animation: rise 0.75s var(--ease) both;
}

/* 8. 宫廷六人行网格布局 */
@media (min-width: 640px) {
  .cast-row--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem var(--gutter);
  }
}

@media (min-width: 960px) {
  .cast-row--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
  }
}

@media (min-width: 1440px) {
  .cast-row--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem var(--gutter);
  }

  .cast-row--six > .person {
    max-width: none;
  }
}

/* 9. 减动效模式下禁用所有新增位移动效与展卷动效 */
@media (prefers-reduced-motion: reduce) {
  .is-unfurling .hero,
  .is-unfurling .hero__roller,
  .is-unfurling .hero__shanshui-wrap,
  .is-unfurling .hero__grid,
  .hero__text,
  .hero__plate,
  .hero__rail,
  .person--plate:hover .person__plate img,
  .person--lead:hover .person__plate img,
  .person--wide:hover .person__plate img,
  .part:hover,
  .lexicon__item:hover,
  .orbit-list li:hover {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero__roller {
    display: none !important;
  }

  .back-to-top-fab {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   M8.11 · 交互与导航精细打磨 (Interaction & Navigation Polish)
   1. 锚点跳转避让 Sticky Header (scroll-margin-top)
   2. 滚动监听章节高亮 (.is-active)
   3. 人物区自然历史目录横向索引 (.cast-nav)
   4. 回到卷首悬浮微印 (.back-to-top-fab)
   5. 绢墨主题切换视觉增强
   ========================================================================== */

/* 1. 锚点跳转避让 Sticky Header */
section[id],
.opening-block[id],
.feature[id],
.chapter[id],
.cast-group[id] {
  scroll-margin-top: 5.5rem;
}

/* 2. 滚动监听章节高亮 */
.site-header__nav a.is-active {
  color: var(--seal);
}

.site-header__nav a.is-active::after {
  width: 100%;
  left: 0;
}

.site-header__menu nav a.is-active {
  color: var(--seal);
  font-weight: 600;
}

/* 3. 人物自然历史分类快捷索引 */
.cast-nav {
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
  padding-block: 0.75rem;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cast-nav::before,
.cast-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-brush);
}

.cast-nav::before {
  top: 0;
}

.cast-nav::after {
  bottom: 0;
}

.cast-nav::-webkit-scrollbar {
  display: none;
}

.cast-nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.6rem, 1.8vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

.cast-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ancient);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.cast-nav__dot {
  color: var(--seal);
  font-size: 0.9em;
  line-height: 1;
}

.cast-nav__link:hover {
  color: var(--seal);
  border-bottom-color: var(--seal);
  background: rgba(154, 59, 44, 0.04);
}

[data-theme="ink"] .cast-nav__link:hover {
  background: rgba(196, 90, 66, 0.08);
}

/* 4. 回到卷首悬浮微印 */
.back-to-top-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.85rem;
  background: var(--bg);
  border: var(--rule) solid var(--line-strong);
  color: var(--ink-2);
  font-family: var(--font-ancient);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(42, 36, 28, 0.1);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), background 0.22s var(--ease);
}

.back-to-top-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top-fab:hover {
  border-color: var(--seal);
  color: var(--seal);
  background: var(--bg-soft);
  box-shadow: 0 6px 22px rgba(154, 59, 44, 0.18);
}

.back-to-top-fab:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

.back-to-top-fab__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--seal);
  color: var(--paper);
  font-size: 0.72rem;
  font-family: var(--font-ancient);
  line-height: 1;
}

[data-theme="ink"] .back-to-top-fab {
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

[data-theme="ink"] .back-to-top-fab:hover {
  background: var(--bg-soft);
  box-shadow: 0 6px 24px rgba(196, 90, 66, 0.25);
}

@media (max-width: 639px) {
  .back-to-top-fab {
    bottom: 1.25rem;
    right: 1.15rem;
    padding: 0.35rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    justify-content: center;
    border-radius: 2px;
  }

  .back-to-top-fab__text {
    display: none;
  }

  .back-to-top-fab__seal {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.8rem;
  }
}

/* 5. 绢墨切换微标签 */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.theme-btn__sub {
  font-size: 0.82em;
  opacity: 0.85;
}

/* ---------- 13. 《异卷·器命》2.5D 空间纵深体系 (Phase 1 Archive Depth Architecture) ---------- */

/* 13.1 物理纸感与朱印渗纸微质感 (Paper Physics & Seal Imprint) */
.paper-layer {
  position: relative;
  box-shadow: var(--paper-edge);
}

.paper-layer--deep {
  position: relative;
  box-shadow: var(--paper-edge-deep);
}

/* 朱印渗纸微质感强化：印泥沉浸纤维，有极细微内压与边缘微渗，无发光 */
.relic-mark,
.relic-sealmark,
.person__ming {
  box-shadow: var(--seal-press);
}

.person__ming {
  text-shadow: var(--seal-bleed);
}

/* 13.2 实验区 A：Hero 3 层空间纵深 (Hero Tri-Layer Archive Depth) */
@media (hover: hover) and (pointer: fine) {
  .hero {
    perspective: 1200px;
  }

  /* Z0 底层：山水微动（速度最慢，幅度 <= 1.5px） */
  .hero__shanshui-wrap {
    transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Z2 中层：刘宏核心图版（纸张微悬浮，幅度 <= 2.5px） */
  .hero__plate {
    transform: translate3d(var(--hero-mid-x), var(--hero-mid-y), 0);
    box-shadow: var(--paper-edge-deep);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s var(--ease);
  }

  /* Z3 前景：右侧年号栏与页边名史（幅度 <= 3.5px） */
  .hero__rail {
    transform: translate3d(var(--hero-fore-x), var(--hero-fore-y), 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero__future {
    transform: translate3d(calc(var(--hero-fore-x) * 1.1), calc(var(--hero-fore-y) * 1.1), 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* 13.3 实验区 B：受命之人领衔人物卡 2.5D 组件规范 (Lead Person Card Depth) */
.person--lead {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .person--lead .person__plate--main {
    transform: translate3d(var(--card-art-x), var(--card-art-y), 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .person--lead .person__ming {
    transform: translate3d(var(--card-seal-x), var(--card-seal-y), 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* 13.4 实验区 C：器物微光影原型（传国玺受光，Section 03 RELIC） */
.relic-plate {
  position: relative;
  overflow: hidden;
}

/* 烛光侧光微掠层：器物本身不发光，仅在指针掠过表面时产生柔和侧光微受光 */
.relic-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle 150px at var(--light-x, 50%) var(--light-y, 50%),
    var(--relic-candle-soft) 0%,
    rgba(244, 236, 218, 0.04) 40%,
    transparent 72%
  );
  mix-blend-mode: overlay;
  transition: opacity 0.35s var(--ease);
}

[data-theme="ink"] .relic-plate::after {
  background: radial-gradient(
    circle 150px at var(--light-x, 50%) var(--light-y, 50%),
    var(--relic-candle-soft) 0%,
    rgba(232, 220, 191, 0.03) 40%,
    transparent 72%
  );
  mix-blend-mode: soft-light;
}

.relic-plate:hover::after,
.relic-plate.is-lit::after {
  opacity: 1;
}

/* 13.5 严格降级与无障碍防护 (Strict Degradation & Accessibility Safeguards) */
@media (prefers-reduced-motion: reduce) {
  .hero__shanshui-wrap,
  .hero__plate,
  .hero__rail,
  .hero__future,
  .person--lead .person__plate--main,
  .person--lead .person__ming,
  .relic-plate::after {
    transform: none !important;
    transition: none !important;
  }

  .relic-plate::after {
    display: none !important;
  }
}

/* 14. 独立展示分支入口 (Independent Showcase Branch Entry) */
.site-header__ext-link {
  color: var(--seal) !important;
  opacity: 0.88;
  letter-spacing: 0.04em;
  transition: opacity 0.2s var(--ease);
}

.site-header__ext-link:hover {
  opacity: 1;
}

.making-branch-card {
  margin-top: 1.8rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  box-shadow: var(--paper-edge);
}

.making-branch-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.4rem;
}

.making-branch-card__tag {
  font-family: var(--font-ancient);
  font-size: var(--t-micro);
  color: var(--seal);
  letter-spacing: 0.12em;
}

.making-branch-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.making-branch-card__desc {
  font-size: var(--t-note);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 1rem;
}

.making-branch-card__action {
  display: flex;
  justify-content: flex-end;
}

.making-branch-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ancient);
  font-size: var(--t-note);
  color: var(--seal) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--seal);
  background: var(--paper);
  box-shadow: var(--paper-edge);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.making-branch-card__link:hover {
  background: var(--seal);
  color: #fff !important;
  transform: translateY(-1px);
}