/* ================================================================
   Editorial / Magazine layer
   Magazine-style spreads, oversized numerals, pull quotes,
   ICP footer, drop caps, refined hover states.

   Chinese typography stack (current · 古籍宋体):
   · Noto Serif SC 思源宋体 (weight 500/700/900) → display titles + body
     · 配合 letter-spacing 加宽 = 古书刻本质感
   · EB Garamond + Cardo → 英文 display (古典学者)
   ================================================================ */

/* Display Chinese font — 古籍宋体 (Noto Serif SC) for headlines, quotes, titles */
.hero-mega-cn,
.spread-title-cn,
.banner-title-cn,
.refined-entry-title,
.realm-cn,
.tool-card-cn,
.module-title-cn,
.triad-cell-cn,
.tool-quote-cn,
.quote-cn,
.intro-quote,
.editorial-intro,
.h1-cn,
.h2-cn {
  font-family: var(--serif-display-cn);
  font-weight: 500;
  font-synthesis: none; /* 京华老宋体仅 Regular 一字重，禁合成粗体，保木刻刀锋清晰 */
  /* 古籍排版 — 字距加宽给字符呼吸 */
  letter-spacing: 0.16em;
}

/* Hero mega title — heavier weight + monumental letter-spacing */
.hero-mega-cn {
  font-weight: 800;
  letter-spacing: 0.30em;
}

/* Mobile · 大字字距收窄一档，避免窄屏挤裂行 */
@media (max-width: 768px) {
  .hero-mega-cn { letter-spacing: 0.20em; }
}
@media (max-width: 460px) {
  .hero-mega-cn { letter-spacing: 0.14em; }
}

/* Smaller titles — slightly lighter for hierarchy */
.triad-cell-cn,
.tool-quote-cn,
.realm-cn,
.intro-quote {
  font-weight: 500;
}

/* -------------------------------------------------------------------
   Magazine "spread" — alternating image / text full-viewport sections
   ------------------------------------------------------------------- */
.spread {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.spread:first-of-type { border-top: none; }

@media (max-width: 900px) {
  .spread {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

.spread.reverse { direction: rtl; }
.spread.reverse > * { direction: ltr; }

/* Image side */
.spread-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 70vh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .spread-image {
    min-height: 60vh;
    order: -1;
  }
}

.spread-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 60%, rgba(22, 19, 14, 0.55) 100%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(22, 19, 14, 0.45) 0%, transparent 60%);
  transition: background 800ms ease;
}

/* On reverse (image-left), flip the gradient direction */
.spread.reverse .spread-image::after {
  background:
    linear-gradient(225deg, transparent 0%, transparent 60%, rgba(22, 19, 14, 0.55) 100%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(22, 19, 14, 0.45) 0%, transparent 60%);
}

/* Subtle parallax/scale effect on hover */
.spread-image {
  transition: transform 1800ms ease;
}
.spread:hover .spread-image {
  transform: scale(1.02);
}

/* Text side */
.spread-content {
  position: relative;
  padding: var(--space-7) clamp(var(--space-5), 5vw, var(--space-7));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

@media (max-width: 900px) {
  .spread-content {
    padding: var(--space-6) var(--space-5);
  }
}

/* Giant outline numeral — design element behind the text */
.spread-numeral {
  position: absolute;
  font-family: var(--serif-en);
  font-weight: 200;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 150, 74, 0.20);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  font-variant-numeric: lining-nums;
}

/* Default position: top-right of content area */
.spread-numeral.top-right { top: 4vh; right: -1vw; }
.spread-numeral.top-left  { top: 4vh; left: -2vw; }
.spread-numeral.bottom-right { bottom: 4vh; right: -1vw; }

.spread-content > * { position: relative; z-index: 1; }

.spread-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 14px;
}

.spread-kicker::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.spread-title-cn {
  font-family: var(--serif-display-cn);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.spread-title-en {
  font-family: var(--serif-display-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-bottom: var(--space-5);
}

.spread-pull {
  font-family: var(--serif-cn);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--gold);
  max-width: 520px;
}

.spread-pull::before { content: '「'; color: var(--gold); }
.spread-pull::after  { content: '」'; color: var(--gold); }

.spread-desc {
  font-family: var(--serif-cn);
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-dim);
  margin-bottom: var(--space-5);
  max-width: 480px;
  letter-spacing: 0.05em;
}

.spread-desc strong { color: var(--ink); font-weight: 400; }
.spread-desc em { font-style: italic; color: var(--gold); }

.spread-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--serif-cn);
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--ink);
  padding: 14px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--gold-faint);
  transition: color 400ms ease, border-color 400ms ease, padding 400ms ease;
}

.spread-cta::after {
  content: '→';
  font-family: var(--serif-en);
  font-style: normal;
  transition: transform 400ms ease;
}

.spread-cta:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
}

.spread-cta:hover::after { transform: translateX(8px); }

/* -------------------------------------------------------------------
   Academy banner — single full-width section, image-on-top + text below
   ------------------------------------------------------------------- */
.banner-section {
  position: relative;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(22, 19, 14, 0.45) 0%, rgba(22, 19, 14, 0.85) 100%);
}

.banner-content {
  position: relative;
  z-index: 1;
  padding: var(--space-7) var(--space-5);
  max-width: 720px;
}

.banner-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.banner-title-cn {
  font-family: var(--serif-cn);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.banner-title-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-dim);
  margin-bottom: var(--space-5);
}

.banner-desc {
  font-family: var(--serif-cn);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-dim);
  margin-bottom: var(--space-5);
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------
   Editorial typography helpers
   ------------------------------------------------------------------- */

/* Drop cap — first letter as oversized serif */
.drop-cap::first-letter {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.18em 0 -0.05em;
  color: var(--gold);
}

/* Editorial intro — italic large opening */
.editorial-intro {
  font-family: var(--serif-cn);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.75;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-weight: 300;
}

.editorial-intro em {
  font-style: italic;
  color: var(--gold);
}

/* Editorial italic opening — for hero subtitles */
.editorial-italic {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 300;
}

/* -------------------------------------------------------------------
   Section decorators / ornaments
   ------------------------------------------------------------------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: var(--space-6) auto;
  width: fit-content;
}

.ornament::before, .ornament::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-faint), transparent);
}

.ornament-mark {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.ornament-diamond::before, .ornament-diamond::after {
  width: 80px;
}

/* A single hairline divider */
.hairline {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--line-bright) 20%, var(--line-bright) 80%, transparent 100%);
  margin: var(--space-6) 0;
}

/* -------------------------------------------------------------------
   Refined secondary entry cards (for invest / essays on homepage)
   ------------------------------------------------------------------- */
.refined-entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
}

@media (max-width: 768px) {
  .refined-entries { grid-template-columns: 1fr; }
}

.refined-entry {
  padding: var(--space-6) var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 500ms ease;
  background: var(--bg-card);
  min-height: 280px;
}

.refined-entry + .refined-entry {
  border-left: 1px solid var(--line);
}

@media (max-width: 768px) {
  .refined-entry + .refined-entry {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

.refined-entry:hover {
  background: var(--bg-elevated);
}

.refined-entry-num {
  font-family: var(--serif-en);
  font-weight: 200;
  font-size: 80px;
  line-height: 1;
  color: var(--gold-faint);
  margin-bottom: var(--space-3);
  letter-spacing: -0.04em;
}

.refined-entry-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.refined-entry-title {
  font-family: var(--serif-cn);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--ink);
  margin-bottom: 6px;
}

.refined-entry-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-dim);
  margin-bottom: var(--space-3);
}

.refined-entry-desc {
  font-family: var(--serif-cn);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  flex: 1;
}

.refined-entry-link {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms ease, color 400ms ease;
}

.refined-entry:hover .refined-entry-link {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

.refined-entry-link::after {
  content: ' →';
  display: inline-block;
  transition: transform 300ms ease;
}

.refined-entry:hover .refined-entry-link::after { transform: translateX(4px); }

/* -------------------------------------------------------------------
   Refined "三重境界" closing
   ------------------------------------------------------------------- */
.realm-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--space-6) 0;
}

@media (max-width: 768px) {
  /* Mobile · 悟道三重境界紧凑横排，全部塞进一屏内 */
  .realm-trio {
    grid-template-columns: 1fr 1fr 1fr !important;
    margin: var(--space-4) 0 !important;
  }
}

.realm-item {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  position: relative;
}

.realm-item + .realm-item {
  border-left: 1px solid var(--line);
}

@media (max-width: 768px) {
  /* Mobile · 让 3 列横排时保留竖向分隔（取消之前的横向分隔） */
  .realm-item { padding: var(--space-3) 6px !important; }
  .realm-item + .realm-item {
    border-left: 1px solid var(--line) !important;
    border-top: none !important;
  }
  .realm-roman { font-size: 22px !important; margin-bottom: 6px !important; }
  .realm-label {
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 6px !important;
  }
  .realm-cn {
    font-size: 15px !important;
    letter-spacing: 0.10em !important;
    margin-bottom: 6px !important;
  }
  .realm-link {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
  }
  /* 隐藏"— 序章/我从哪里来 —"那种次要 link，让 3 列高度更紧凑 */
  .realm-item .realm-link[style*="opacity"] { display: none !important; }
}

.realm-roman {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  color: var(--gold-faint);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
  display: block;
}

.realm-cn {
  font-family: var(--serif-cn);
  font-size: 22px;
  letter-spacing: 0.32em;
  color: var(--ink);
  margin-bottom: 10px;
}

.realm-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.realm-link {
  font-family: var(--serif-cn);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.2em;
}

/* -------------------------------------------------------------------
   Scroll reveal — generic
   ------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms ease, transform 1000ms ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------
   ICP footer
   ------------------------------------------------------------------- */
.icp-bar {
  padding: var(--space-4) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.icp-bar a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 300ms ease;
}

.icp-bar a:hover { color: var(--gold); }

.icp-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
}

/* -------------------------------------------------------------------
   Enhanced hero — vertical decorative rule + asymmetric layout
   ------------------------------------------------------------------- */
.hero-rule {
  position: absolute;
  left: var(--space-6);
  top: 40%;
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  z-index: 3;
  display: none;
}

@media (min-width: 1024px) {
  .hero-rule { display: block; }
}

/* Enhanced hero title for elevated treatment */
.hero-mega-cn {
  font-family: var(--serif-display-cn);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-3);
  white-space: nowrap;   /* 主标题强制一行，避免「哲 学 投 资」等被挤成两行 */
}
/* 极窄屏：缩一档字号，保证 nowrap 标题不溢出 */
@media (max-width: 480px) {
  .hero-mega-cn { font-size: clamp(32px, 11vw, 46px); }
}

.hero-mega-en {
  font-family: var(--serif-display-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-5);
}

.hero-tagline-divider {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-4);
}

.hero-tagline-divider span.mark {
  width: 6px;
  height: 6px;
  background: var(--gold);
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------
   Image overlay text — small mono caption on image corners
   ------------------------------------------------------------------- */
.image-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(232, 224, 204, 0.75);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.image-caption::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ===================================================================
   FULL-IMAGE SECTION
   The whole image is visible (no cropping). Text overlays on top.
   Section height = image's natural aspect ratio rendered at 100% width.
   =================================================================== */
.full-img {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
}

.full-img-photo {
  display: block;
  width: 100%;
  height: auto;
  /* whole image, no crop */
}

/* The overlay layer holds the text. Uses gradient for readability. */
.full-img-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Default veil: dark fade from bottom upward.
   Variants below override for different text placements. */
.full-img-veil.veil-bottom {
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.55) 25%,
      rgba(0,0,0,0.15) 55%,
      transparent 80%);
}

.full-img-veil.veil-bottom-left {
  background:
    linear-gradient(45deg,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.5) 30%,
      rgba(0,0,0,0.15) 55%,
      transparent 75%);
}

.full-img-veil.veil-bottom-right {
  background:
    linear-gradient(135deg,
      transparent 25%,
      rgba(0,0,0,0.15) 45%,
      rgba(0,0,0,0.5) 70%,
      rgba(0,0,0,0.85) 100%);
}

.full-img-veil.veil-top {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.5) 25%,
      rgba(0,0,0,0.15) 55%,
      transparent 80%);
}

.full-img-veil.veil-center {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(0,0,0,0.7) 0%,
      rgba(0,0,0,0.45) 40%,
      rgba(0,0,0,0.15) 75%,
      transparent 100%);
}

.full-img-veil.veil-soft {
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.25) 35%,
      transparent 70%);
}

/* Text container — absolutely positioned with safe text-shadow */
.full-img-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem);
  pointer-events: none;
}

.full-img-text > * { pointer-events: auto; }

.full-img-text-inner {
  max-width: 720px;
  color: var(--ink);
}

/* Position variants */
.full-img.pos-bottom-left   .full-img-text { align-items: flex-end; justify-content: flex-start; }
.full-img.pos-bottom-right  .full-img-text { align-items: flex-end; justify-content: flex-end; text-align: right; }
.full-img.pos-bottom-center .full-img-text { align-items: flex-end; justify-content: center; text-align: center; }
.full-img.pos-top-left      .full-img-text { align-items: flex-start; justify-content: flex-start; }
.full-img.pos-top-right     .full-img-text { align-items: flex-start; justify-content: flex-end; text-align: right; }
.full-img.pos-center        .full-img-text { align-items: center; justify-content: center; text-align: center; }
.full-img.pos-center-left   .full-img-text { align-items: center; justify-content: flex-start; }
.full-img.pos-center-right  .full-img-text { align-items: center; justify-content: flex-end; text-align: right; }

/* Universal text shadow for safety against varied backgrounds */
.full-img-text-inner h1,
.full-img-text-inner h2,
.full-img-text-inner h3,
.full-img-text-inner p,
.full-img-text-inner blockquote,
.full-img-text-inner div,
.full-img-text-inner span,
.full-img-text-inner a {
  text-shadow: 0 2px 18px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.4);
}

/* Mono accents (kicker etc) — keep cleaner shadow */
.full-img-text-inner .kicker,
.full-img-text-inner .image-caption,
.full-img-text-inner .ornament-mark {
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

/* Body text classes default to --ink-dim, which can disappear on bright images.
   Force them to the brighter --ink with stronger shadow when inside .full-img. */
.full-img .spread-desc,
.full-img .body-text,
.full-img .subtitle {
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.55);
}

/* Extra-dark veil variant for very bright images (Raphael fresco pastels etc) */
.full-img-veil.veil-bottom-strong {
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.78) 18%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.25) 55%,
      rgba(0,0,0,0.05) 75%,
      transparent 90%);
}

/* Optional: tinted backdrop card for very busy images */
.full-img-text-inner.backdrop {
  background: linear-gradient(135deg, rgba(22, 19, 14, 0.55), rgba(22, 19, 14, 0.35));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  border-left: 2px solid var(--gold);
}

/* Number numeral overlay specific to full-img */
.full-img-numeral {
  position: absolute;
  font-family: var(--serif-en);
  font-weight: 200;
  font-size: clamp(140px, 18vw, 280px);
  line-height: 0.85;
  color: rgba(200, 150, 74, 0.22);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  font-variant-numeric: lining-nums;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.full-img-numeral.top-right  { top: 3vh; right: 4vw; }
.full-img-numeral.top-left   { top: 3vh; left: 4vw; }
.full-img-numeral.bottom-right { bottom: 3vh; right: 4vw; }
.full-img-numeral.bottom-left  { bottom: 3vh; left: 4vw; }

/* Hover effect for clickable full-img */
a.full-img,
.full-img.is-link {
  cursor: pointer;
}

a.full-img .full-img-photo,
.full-img.is-link .full-img-photo {
  transition: transform 2000ms ease, filter 600ms ease;
}

a.full-img:hover .full-img-photo,
.full-img.is-link:hover .full-img-photo {
  transform: scale(1.015);
  filter: brightness(1.06);
}

/* Mobile · 图作为全画幅背景 + 文字浮在图下半部分 (overlay layout, 紧凑版)
   关键：文字字号和间距收紧，让所有内容能塞进单屏，不被截 */
@media (max-width: 768px) {
  .full-img {
    min-height: 80vh;
    min-height: 80dvh;
  }
  .full-img-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .full-img-text {
    padding: var(--space-4) !important;
    /* Mobile · 所有 full-img 内的文字垂直居中，左对齐 */
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .full-img-text-inner {
    width: 100%;
    max-width: 100%;
  }
  /* Mobile · 文字一律左对齐（即使原本是 pos-bottom-right 之类） */
  .full-img.pos-bottom-right .full-img-text-inner,
  .full-img.pos-top-right .full-img-text-inner,
  .full-img.pos-center-right .full-img-text-inner {
    text-align: left !important;
  }

  /* 字号 + 间距 mobile 全部收紧，避免文字超出 viewport */
  .spread-title-cn {
    font-size: clamp(40px, 11vw, 60px) !important;
    letter-spacing: 0.10em !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
  }
  .spread-title-en {
    font-size: clamp(15px, 4.2vw, 22px) !important;
    margin-bottom: var(--space-3) !important;
  }
  .spread-pull {
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1.55 !important;
    margin-bottom: var(--space-3) !important;
    padding-left: var(--space-3) !important;
  }
  .spread-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-bottom: var(--space-3) !important;
  }
  .spread-cta { font-size: 12px !important; padding: 10px 0 !important; }
  .home-spread .full-img-text-inner { max-width: 100% !important; }
  .home-spread .spread-pull { max-width: 100% !important; }
  .home-spread .spread-desc { max-width: 100% !important; }

  /* 副标 (Tria Tao Philosophy 等) 不被切 */
  .hero-mega-en { word-break: break-word; overflow-wrap: anywhere; }

  /* Numeral 大数字 mobile 缩小，不挤压文字区域 */
  .full-img-numeral {
    font-size: clamp(70px, 18vw, 110px) !important;
    opacity: 0.5;
  }

  /* Mobile 隐藏 image-caption（电脑端的角落水印型说明，小屏不必要） */
  .full-img .image-caption { display: none; }

  .full-img-text-inner.backdrop { padding: 1.25rem; }

  /* Mobile · 各 section 图的 cover 焦点单独调整 ============================ */
  /* 02 天道 · 图左移，露出更多原图左半部分 */
  .full-img.motion-tian .full-img-photo { object-position: 25% 50%; }
  /* 03 人道 · 图左移，露出更多原图左半部分 */
  .full-img.motion-ren .full-img-photo { object-position: 25% 50%; }
  /* 04 乾道 · 用 contain 让王者+巨鹰完整呈现，不再被裁 */
  .full-img.motion-qian .full-img-photo {
    object-fit: contain !important;
    background: #16130e;
  }
}

/* ===================================================================
   Full-image MOTION · Ken Burns-style breathing animations
   Each section gets a motion tailored to its content's natural movement.
   All use `ease-in-out infinite alternate` for slow continuous breathing.
   GPU-accelerated via transform/will-change.
   Crop is < 5% at peak — whole image is still visible most of the time.
   =================================================================== */

.full-img.has-motion .full-img-photo {
  will-change: transform;
  /* default origin; specific motions override this */
  transform-origin: 50% 50%;
}

/* Hero · pull back with leftward drift — "the world opens" */
@keyframes motion-hero-pullback {
  0%   { transform: scale(1.10) translate3d(2.5%, 0, 0); }
  100% { transform: scale(1.0)  translate3d(0, 0, 0); }
}
.full-img.motion-hero .full-img-photo {
  animation: motion-hero-pullback 18s ease-in-out infinite alternate;
  transform-origin: 35% 60%;
}

/* 天道 · push in + visible rotation — "cosmic rotation drawing you in" */
@keyframes motion-tian-cosmic {
  0%   { transform: scale(1.0)  rotate(-0.8deg); }
  100% { transform: scale(1.08) rotate(0.8deg); }
}
.full-img.motion-tian .full-img-photo {
  animation: motion-tian-cosmic 20s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}

/* 人道 · push in toward the cathedral depth + upward drift */
@keyframes motion-ren-walk-in {
  0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(0, -3%, 0); }
}
.full-img.motion-ren .full-img-photo {
  animation: motion-ren-walk-in 18s ease-in-out infinite alternate;
  transform-origin: 50% 65%;
}

/* 乾道 · horizontal dolly pan — cinematic tracking shot */
@keyframes motion-qian-pan {
  0%   { transform: scale(1.06) translate3d(-3%, 0, 0); }
  100% { transform: scale(1.06) translate3d(3%, 0, 0); }
}
.full-img.motion-qian .full-img-photo {
  animation: motion-qian-pan 22s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}

/* 学院 · push in toward Plato/Aristotle at the center of the fresco */
@keyframes motion-academy-focus {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.10); }
}
.full-img.motion-academy .full-img-photo {
  animation: motion-academy-focus 18s ease-in-out infinite alternate;
  /* Plato/Aristotle are roughly at the center-upper area of the composition */
  transform-origin: 50% 42%;
}

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .full-img-photo {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   配套实修 · Companion practice block
   （嵌在天道/人道/乾道篇末，导流到三道学院对应课程）
   ============================================================ */
.companion {
  border-top: 1px solid var(--line);
  padding: var(--space-7) 0;
  position: relative;
}
.companion-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}
.companion-title {
  font-family: var(--serif-cn);
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.2em;
  color: var(--ink);
  margin-bottom: 6px;
}
.companion-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-dim);
  margin-bottom: var(--space-3);
}
.companion-byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: var(--space-4);
}
.companion-lede {
  font-family: var(--serif-cn);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.95;
  color: var(--ink-dim);
  max-width: 640px;
  margin-bottom: var(--space-5);
}
.companion-lede strong { color: var(--ink); font-weight: 400; }
.companion-lede em { color: var(--gold-bright); font-style: normal; }

/* 体系展示带 · banner image */
.companion-banner {
  position: relative;
  width: 100%;
  height: clamp(220px, 34vw, 360px);
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 1px solid var(--line);
}
.companion-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.companion-banner-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(22,19,14,0.10) 0%, transparent 75%),
    linear-gradient(to right, rgba(22,19,14,0.55) 0%, rgba(22,19,14,0.10) 55%, transparent 100%);
}
.companion-banner-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 236, 212, 0.85);
  z-index: 2;
}

/* 体系结构条 · concept strip (chips) */
.companion-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.companion-chip {
  flex: 1 1 0;
  min-width: 150px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-faint);
}
.companion-chip-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 6px;
}
.companion-chip-v {
  font-family: var(--serif-cn);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.companion-chip-s {
  font-family: var(--serif-cn);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .companion-strip { flex-direction: column; }
  .companion-chip { min-width: 0; }
}

/* ============ 联络区 · 微信二维码 ============ */
.footer-qr { margin: 2px 0 12px; }
.footer-qr img {
  width: 132px;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line-bright);
  background: #fff;
}
.footer-qr-hint {
  font-family: var(--serif-cn);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* 二维码灯箱 · 点微信/公众号弹大图 */
.qr-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 8, 5, 0.84);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: var(--space-4);
}
.qr-lightbox.show { display: flex; }
.qr-lightbox-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-faint);
  border-top: 2px solid var(--gold);
  border-radius: 12px;
  padding: var(--space-5);
  text-align: center;
  max-width: 340px; width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.qr-lightbox-card img {
  width: 100%; max-width: 280px; height: auto;
  border-radius: 8px; background: #fff;
  display: block; margin: 0 auto var(--space-4);
}
.qr-lightbox-title {
  font-family: var(--serif-cn); font-size: 18px;
  letter-spacing: 0.12em; color: var(--ink); margin-bottom: 6px;
}
.qr-lightbox-sub {
  font-family: var(--serif-cn); font-size: 13px;
  color: var(--ink-dim); margin-bottom: var(--space-4);
}
.qr-lightbox-close {
  font-family: var(--serif-cn); font-size: 13px; letter-spacing: 0.2em;
  color: var(--gold); background: none;
  border: 1px solid var(--gold-faint); border-radius: 4px;
  padding: 8px 22px; cursor: pointer;
  transition: background 300ms ease, color 300ms ease;
}
.qr-lightbox-close:hover { background: var(--gold); color: var(--bg); }
.footer-connect a { cursor: pointer; }

/* ============ 文章页 · Essay article ============ */
.article-hero {
  padding: calc(var(--space-7) + 48px) 0 var(--space-6);
  border-bottom: 1px solid var(--line);
}
.article-anchor {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase; margin-bottom: var(--space-4);
}
.article-title {
  font-family: var(--serif-cn); font-weight: 700;
  font-size: clamp(27px, 4.2vw, 46px); line-height: 1.32;
  letter-spacing: 0.03em; color: var(--ink); margin-bottom: var(--space-4);
  max-width: 880px;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-faint); text-transform: uppercase;
}
.article-meta .sep { color: var(--line-bright); }
.article-body {
  max-width: 720px; margin: var(--space-6) auto 0;
  font-family: var(--serif-cn); font-size: 17px; line-height: 2;
  color: var(--ink);
}
.article-body > p { margin-bottom: 1.5em; }
.article-body p strong { color: var(--ink); font-weight: 500; }
.article-body p em { color: var(--gold-bright); font-style: normal; }
.article-lead { font-size: 19px; color: var(--ink); }
.article-body h2 {
  font-family: var(--serif-cn); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.05em;
  color: var(--ink); margin: 1.9em 0 0.7em; line-height: 1.45;
}
.article-body blockquote {
  margin: 1.6em 0; padding: var(--space-3) var(--space-5);
  border-left: 2px solid var(--gold);
  font-style: italic; color: var(--ink); font-size: 18px; line-height: 1.9;
}
.article-divider { text-align: center; color: var(--gold); letter-spacing: 0.6em; margin: 2.2em 0; font-size: 13px; }
.article-foot {
  max-width: 720px; margin: var(--space-7) auto 0;
  padding-top: var(--space-5); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}
.article-foot a { font-family: var(--serif-cn); font-size: 14px; letter-spacing: 0.12em; color: var(--gold); transition: color 300ms ease; }
.article-foot a:hover { color: var(--gold-bright); }

/* 长文移动端适配 (≤640) */
@media (max-width: 640px) {
  .article-hero { padding: calc(var(--space-6) + 16px) 0 var(--space-5); }
  .article-body { line-height: 1.8; }
  .article-body blockquote { padding: var(--space-3) var(--space-4); }
  .article-foot { flex-direction: column; }
  /* 投资模板数据表：窄屏横向滚动，避免溢出/挤裂 */
  .matrix-table, .comp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   压图大标题 · 京华老宋体单字重偏细，over-image 用同色描边补字重 + 投影压住。
   仅作用于 .full-img 里的标题；清底版标题保持纤细优雅，不受影响。
   ============================================================ */
.full-img .hero-mega-cn,
.full-img .spread-title-cn {
  -webkit-text-stroke: 0.8px currentColor;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.5),
    0 5px 32px rgba(0, 0, 0, 0.34);
}
@media (max-width: 768px) {
  .full-img .hero-mega-cn,
  .full-img .spread-title-cn { -webkit-text-stroke-width: 0.5px; }
}