/* =====================================================================
   Theme Layer · 章节级配色变体（Pixila 启发）
   ---------------------------------------------------------------------
   思路：在已有的 warm-dark 默认骨架之上，给特定 section 加
   .theme-cream / .theme-tan，把同样的组件渲染成"羊皮纸"或"赤金"。
   不动 site.css 的 :root，所有覆盖通过子选择器实现，
   保证向后兼容，回滚只需删 class。
   ===================================================================== */

/* -------------------------------------------------------------------
   THEME · MARBLE  (大理石白 / pale variant)
   用法：与 .theme-cream 同时使用，只覆盖底色 → 比羊皮纸更明亮、更克制
   <section class="theme-cream theme-marble">…</section>
   ------------------------------------------------------------------- */
.theme-marble {
  background: #d8d6d0;
  position: relative;
  isolation: isolate;
}

/* marble 上的烙痕阴影 → 冷调中性，不与 stone gray 打架 */
.theme-marble.theme-cream::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(40, 38, 32, 0.06), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(40, 38, 32, 0.05), transparent 70%);
}

/* Pixila 式纸纹颗粒（细密噪点 + multiply 融入） */
.theme-marble::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}

.theme-marble > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .theme-marble::after { opacity: 0.5; }
}

/* -------------------------------------------------------------------
   THEME · CREAM  (羊皮纸 / parchment)
   ------------------------------------------------------------------- */
.theme-cream {
  background: var(--cream);
  color: var(--cream-ink);
  position: relative;
  isolation: isolate;
}

/* 渐入到 cream，避免硬边 */
.theme-cream::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22, 19, 14, 0.06), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(22, 19, 14, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.theme-cream > * { position: relative; z-index: 1; }

/* —— typography on cream —— */
.theme-cream .body-text,
.theme-cream p,
.theme-cream .editorial-intro,
.theme-cream .spread-desc,
.theme-cream .subtitle {
  color: var(--cream-ink);
}

.theme-cream .body-text strong,
.theme-cream p strong { color: #2a1f0e; font-weight: 500; }

.theme-cream em,
.theme-cream .editorial-intro em {
  color: #7e591b;
  font-style: italic;
}

.theme-cream .h2-cn,
.theme-cream .hero-mega-cn,
.theme-cream .spread-title-cn {
  color: #1d1a14;
  text-shadow: none;
}

.theme-cream .spread-title-en,
.theme-cream .hero-mega-en,
.theme-cream .editorial-italic {
  color: #4a3a22;
}

/* —— kicker / mono labels on cream —— */
.theme-cream .kicker,
.theme-cream .refined-entry-kicker,
.theme-cream .realm-label {
  color: #7e591b;
}

/* —— ornament on cream —— */
.theme-cream .ornament::before,
.theme-cream .ornament::after {
  background: linear-gradient(to right, transparent, rgba(139, 100, 32, 0.55), transparent);
}

.theme-cream .ornament-mark { color: #7e591b; }

/* —— refined-entry on cream  —— */
.theme-cream .refined-entries { border: 1px solid rgba(139, 100, 32, 0.25); }

.theme-cream .refined-entry {
  background: transparent;
}

.theme-cream .refined-entry + .refined-entry {
  border-left-color: rgba(139, 100, 32, 0.20);
}

@media (max-width: 768px) {
  .theme-cream .refined-entry + .refined-entry {
    border-top-color: rgba(139, 100, 32, 0.20);
  }
}

.theme-cream .refined-entry:hover {
  background: rgba(139, 100, 32, 0.06);
}

.theme-cream .refined-entry-num { color: rgba(139, 100, 32, 0.30); }
.theme-cream .refined-entry-title { color: #1d1a14; }
.theme-cream .refined-entry-en { color: #4a3a22; }
.theme-cream .refined-entry-desc { color: #3a2f1e; }
.theme-cream .refined-entry-link { color: #7e591b; }
.theme-cream .refined-entry:hover .refined-entry-link {
  color: #1d1a14;
  border-bottom-color: #1d1a14;
}

/* —— realm-trio on cream —— */
.theme-cream .realm-trio {
  border-top-color: rgba(139, 100, 32, 0.30);
  border-bottom-color: rgba(139, 100, 32, 0.30);
}

.theme-cream .realm-item + .realm-item {
  border-left-color: rgba(139, 100, 32, 0.22);
}

@media (max-width: 768px) {
  .theme-cream .realm-item + .realm-item {
    border-left-color: transparent;
    border-top-color: rgba(139, 100, 32, 0.22);
  }
}

.theme-cream .realm-roman { color: rgba(139, 100, 32, 0.35); }
.theme-cream .realm-cn { color: #1d1a14; }
.theme-cream .realm-label { color: #7e591b; }
.theme-cream .realm-link { color: #5c4a32; }
.theme-cream .realm-link[style*="color"] { color: #5c4a32 !important; }

/* —— links / CTAs on cream —— */
.theme-cream a:not(.refined-entry):not(.refined-entry-link):not(.spread-cta) {
  color: #7e591b;
}

.theme-cream .spread-cta {
  color: #1d1a14;
  border-color: #1d1a14;
}

.theme-cream .spread-cta:hover {
  background: #1d1a14;
  color: var(--cream);
}

/* —— selection on cream —— */
.theme-cream ::selection {
  background: rgba(139, 100, 32, 0.30);
  color: #1d1a14;
}

/* -------------------------------------------------------------------
   THEME · TAN (赤金 panel · 深底奶白字 / cream-on-burnished-gold)
   ------------------------------------------------------------------- */
.theme-tan {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #876226 0%, #815f22 100%);
  color: #f5ecd4;
  position: relative;
  isolation: isolate;
}

.theme-tan::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 10% 20%, rgba(22, 19, 14, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(22, 19, 14, 0.28), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.theme-tan > * { position: relative; z-index: 1; }

.theme-tan .body-text,
.theme-tan p,
.theme-tan .spread-desc,
.theme-tan .subtitle {
  color: #f5ecd4;
}

.theme-tan .body-text strong,
.theme-tan p strong { color: #ffffff; font-weight: 500; }

.theme-tan em { color: #ffd28e; font-style: italic; }

.theme-tan .h2-cn,
.theme-tan .hero-mega-cn,
.theme-tan .spread-title-cn,
.theme-tan .refined-entry-title,
.theme-tan .realm-cn { color: #ffffff; }

.theme-tan .spread-title-en,
.theme-tan .hero-mega-en,
.theme-tan .editorial-italic,
.theme-tan .refined-entry-en { color: #e8d9b3; }

.theme-tan .kicker,
.theme-tan .refined-entry-kicker,
.theme-tan .realm-label { color: #f5ecd4; }

.theme-tan .ornament::before,
.theme-tan .ornament::after {
  background: linear-gradient(to right, transparent, rgba(245, 236, 212, 0.55), transparent);
}

.theme-tan .ornament-mark { color: #f5ecd4; }

/* refined-entry on tan */
.theme-tan .refined-entries { border: 1px solid rgba(245, 236, 212, 0.22); }

.theme-tan .refined-entry { background: transparent; }
.theme-tan .refined-entry + .refined-entry { border-left-color: rgba(245, 236, 212, 0.20); }
@media (max-width: 768px) {
  .theme-tan .refined-entry + .refined-entry { border-top-color: rgba(245, 236, 212, 0.20); }
}
.theme-tan .refined-entry:hover { background: rgba(0, 0, 0, 0.12); }
.theme-tan .refined-entry-num { color: rgba(245, 236, 212, 0.32); }
.theme-tan .refined-entry-desc { color: #e8d9b3; }
.theme-tan .refined-entry-link { color: #f5ecd4; }
.theme-tan .refined-entry:hover .refined-entry-link {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.theme-tan .spread-cta {
  color: #f5ecd4;
  border-color: #f5ecd4;
}
.theme-tan .spread-cta:hover {
  background: #f5ecd4;
  color: #1d1a14;
}

.theme-tan ::selection {
  background: rgba(245, 236, 212, 0.35);
  color: #1d1a14;
}

/* -------------------------------------------------------------------
   Topographic Overlay  (像 Pixila 一样的等高线 / 颗粒纹理)
   覆盖在任何深色 section 上做装饰
   ------------------------------------------------------------------- */
.topo-overlay {
  position: relative;
  isolation: isolate;
}

.topo-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><defs><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.59  0 0 0 0 0.29  0 0 0 0.55 0'/></filter></defs><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  mix-blend-mode: overlay;
  z-index: 0;
}

.topo-overlay > * { position: relative; z-index: 1; }

/* 等高线版本 —— 更书页感的轮廓 */
.topo-overlay--lines::after {
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'><g fill='none' stroke='%23c8964a' stroke-width='0.6' opacity='0.7'><path d='M0,420 Q200,360 400,420 T800,420'/><path d='M0,440 Q220,400 400,440 T800,440'/><path d='M0,460 Q240,430 400,460 T800,460'/><path d='M0,380 Q200,310 400,380 T800,380'/><path d='M0,360 Q220,280 400,360 T800,360'/><path d='M0,340 Q240,240 400,340 T800,340'/><path d='M0,500 Q200,460 400,500 T800,500'/><path d='M0,540 Q220,490 400,540 T800,540'/><path d='M0,580 Q260,510 400,580 T800,580'/></g></svg>");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .topo-overlay::after { opacity: 0.04; }
}

/* -------------------------------------------------------------------
   Pixila-style 几何峰形 ornament
   ------------------------------------------------------------------- */
.ornament-peak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: var(--space-6) auto;
  width: fit-content;
}

.ornament-peak::before,
.ornament-peak::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  opacity: 0.5;
}

.ornament-peak-mark {
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
  position: relative;
}

.ornament-peak-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: currentColor;
  opacity: 0.4;
}

/* -------------------------------------------------------------------
   Pixila-style 编码 kicker (monospace + 长字距 + 数字前缀)
   用法：<span class="kicker-coded" data-code="003">section title</span>
   ------------------------------------------------------------------- */
.kicker-coded {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.kicker-coded::before {
  content: attr(data-code);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  border: 1px solid currentColor;
  opacity: 0.55;
}

.theme-cream .kicker-coded { color: #7e591b; }
.theme-tan .kicker-coded { color: #f5ecd4; }

/* -------------------------------------------------------------------
   Section transition wedge — 把两个 theme 之间做成斜切而非生硬切换
   ------------------------------------------------------------------- */
.theme-bleed-top {
  margin-top: -1px;
  padding-top: calc(var(--space-7) + 24px);
  clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%);
}

.theme-bleed-bottom {
  margin-bottom: -1px;
  padding-bottom: calc(var(--space-7) + 24px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
}

/* 不在小屏幕做斜切，避免裁掉文本 */
@media (max-width: 768px) {
  .theme-bleed-top,
  .theme-bleed-bottom {
    clip-path: none;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}