/* ============================================================
   JUE 珏 — Design Tokens
   Five Halls: jade(玉/墨绿) · wood(木/米黄黄昏) · crystal(水晶/白蓝毛玻璃) · gold(金银/鎏金) · diamond(钻石/银闪)
   Type: Cormorant Garamond (display serif) + Manrope (UI sans)
   ============================================================ */

:root {
  /* ---- Colour (default = jade) ---- */
  --bg:        #0c0a08;                 /* ink black-warm */
  --bg-2:      #131009;                 /* deep panel */
  --bg-3:      #1a150e;                 /* raised */
  --line:      rgba(214, 186, 138, 0.18);   /* hairline gold */
  --line-soft: rgba(214, 186, 138, 0.09);
  --gold:      #c9a86c;                 /* champagne gold */
  --gold-soft: #e8d6ab;
  --gold-dim:  #8d7243;
  --jade:      #9db9a5;                 /* celadon jade */
  --jade-bright:#b7d0bf;
  --jade-deep: #3f5c4a;
  --ink-text:  #f1e9da;
  --muted:     #a99d89;
  --muted-2:   #6f6657;
  --danger:    #b04a3f;

  /* ---- Theme semantic accent (aliases resolve per [data-theme]) ---- */
  --accent:       var(--gold);
  --accent-soft:  var(--gold-soft);
  --accent-dim:   var(--gold-dim);
  --accent-2:     var(--jade);
  --accent-2-bright: var(--jade-bright);
  --accent-2-deep:   var(--jade-deep);
  --text-on-accent:  #171207;           /* 实心强调填充上的文字 */
  --aurora-1:  #2a5c47;                 /* 极光背景渐变（主题氛围） */
  --aurora-2:  #4a3f2d;
  --aurora-3:  #241c14;
  --glass-bg:  rgba(26, 21, 14, 0.55);  /* 毛玻璃/浮层底色 */
  --glass-line: rgba(214, 186, 138, 0.16);
  --selection-bg: rgba(201, 168, 108, 0.28);
  --ghost-fill: rgba(201, 168, 108, 0.14);
  --aurora-g1: rgba(201, 168, 108, 0.12);
  --aurora-g2: rgba(157, 185, 165, 0.10);
  --aurora-g3: rgba(63, 92, 74, 0.08);

  /* ---- Type ---- */
  --serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans:  "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --zh:    "Noto Serif SC", "Songti SC", "STSong", serif;

  /* ---- Scale ---- */
  --fs-display: 4.5rem;                 /* 兼容回退（不支持 clamp 的旧内核） */
  --fs-display: clamp(2.9rem, 7.5vw, 7rem);
  --fs-h1: 2.8rem;                      /* 兼容回退 */
  --fs-h1: clamp(2.2rem, 4.6vw, 4.2rem);
  --fs-h2: 2.1rem;                      /* 兼容回退 */
  --fs-h2: clamp(1.7rem, 3.2vw, 2.9rem);
  --fs-h3: 1.4rem;                      /* 兼容回退 */
  --fs-h3: clamp(1.25rem, 2vw, 1.7rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.8125rem;
  --fs-micro:   0.7rem;

  /* ---- Rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 7rem;
  --space-6: 11rem;
  --gutter: 1.75rem;                    /* 兼容回退 */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-pad: 6rem;                  /* 兼容回退 */
  --section-pad: clamp(5rem, 12vh, 9rem);

  /* ---- Motion ---- */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;
  --dur-slow: 1.6s;

  /* ---- Texture ---- */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.6'/></svg>");

  /* ---- Layout ---- */
  --nav-h: 4.75rem;
  --radius: 2px;
}

/* ============================================================
   Theme palettes — 五道馆
   ============================================================ */

/* ---- 玉石 · jade（墨绿 + 香槟金，原版） ---- */
html[data-theme="jade"] {
  --bg: #0c0a08;
  --bg-2: #131009;
  --bg-3: #1a150e;
  --line: rgba(214, 186, 138, 0.18);
  --line-soft: rgba(214, 186, 138, 0.09);
  --gold: #c9a86c;
  --gold-soft: #e8d6ab;
  --gold-dim: #8d7243;
  --jade: #9db9a5;
  --jade-bright: #b7d0bf;
  --jade-deep: #3f5c4a;
  --ink-text: #f1e9da;
  --muted: #a99d89;
  --muted-2: #6f6657;
  --danger: #b04a3f;
  --accent: #c9a86c;
  --accent-soft: #e8d6ab;
  --accent-dim: #8d7243;
  --accent-2: #9db9a5;
  --accent-2-bright: #b7d0bf;
  --accent-2-deep: #3f5c4a;
  --text-on-accent: #171207;
  --aurora-1: #2a5c47;
  --aurora-2: #4a3f2d;
  --aurora-3: #241c14;
  --glass-bg: rgba(26, 21, 14, 0.55);
  --glass-line: rgba(214, 186, 138, 0.16);
}

/* ---- 木质 · wood（红木杉林 · 米黄黄昏） ---- */
html[data-theme="wood"] {
  --bg: #171109;
  --bg-2: #1f1710;
  --bg-3: #2a1f14;
  --line: rgba(216, 178, 110, 0.20);
  --line-soft: rgba(216, 178, 110, 0.10);
  --gold: #d8a85c;
  --gold-soft: #eed9a8;
  --gold-dim: #9a6f35;
  --jade: #bf9a6a;
  --jade-bright: #d6b98c;
  --jade-deep: #6b4a2a;
  --ink-text: #f4ead6;
  --muted: #bfa67f;
  --muted-2: #7d6a4f;
  --danger: #b04a3f;
  --accent: #d8a85c;
  --accent-soft: #eed9a8;
  --accent-dim: #9a6f35;
  --accent-2: #bf9a6a;
  --accent-2-bright: #d6b98c;
  --accent-2-deep: #6b4a2a;
  --text-on-accent: #24180a;
  --aurora-1: #7a4a24;
  --aurora-2: #3d2b18;
  --aurora-3: #241a10;
  --glass-bg: rgba(42, 31, 20, 0.55);
  --glass-line: rgba(216, 178, 110, 0.16);
  --aurora-g1: rgba(216, 168, 92, 0.13);
  --aurora-g2: rgba(191, 154, 106, 0.10);
  --aurora-g3: rgba(107, 74, 42, 0.10);
}

/* ---- 水晶 · crystal（白蓝 · 毛玻璃） ---- */
html[data-theme="crystal"] {
  --bg: #eef4fa;
  --bg-2: #f8fbfe;
  --bg-3: #ffffff;
  --line: rgba(64, 128, 180, 0.22);
  --line-soft: rgba(64, 128, 180, 0.10);
  --gold: #4a90c4;
  --gold-soft: #2f6d97;
  --gold-dim: #8fb8d8;
  --jade: #57b8c0;
  --jade-bright: #7fcdd2;
  --jade-deep: #2f7f87;
  --ink-text: #12303f;
  --muted: #51728a;
  --muted-2: #8aa4b6;
  --danger: #b04a3f;
  --accent: #4a90c4;
  --accent-soft: #2f6d97;
  --accent-dim: #8fb8d8;
  --accent-2: #57b8c0;
  --accent-2-bright: #7fcdd2;
  --accent-2-deep: #2f7f87;
  --text-on-accent: #ffffff;
  --aurora-1: #a8d8f0;
  --aurora-2: #dceefb;
  --aurora-3: #eef4fa;
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-line: rgba(255, 255, 255, 0.65);
  --selection-bg: rgba(74, 144, 196, 0.25);
  --ghost-fill: rgba(74, 144, 196, 0.14);
  --aurora-g1: rgba(120, 190, 235, 0.20);
  --aurora-g2: rgba(140, 210, 225, 0.16);
  --aurora-g3: rgba(90, 160, 205, 0.10);
}

/* ---- 星座 · constellation（星夜紫 · 紫晶星光） ---- */
html[data-theme="constellation"] {
  --bg: #16102a;
  --bg-2: #1b1432;
  --bg-3: #261c40;
  --line: rgba(190, 140, 255, 0.22);
  --line-soft: rgba(190, 140, 255, 0.10);
  --gold: #b78cff;
  --gold-soft: #e0ccff;
  --gold-dim: #7a5cc0;
  --jade: #9d8cff;
  --jade-bright: #c0b0ff;
  --jade-deep: #4a3a8a;
  --ink-text: #f3edff;
  --muted: #b6aad6;
  --muted-2: #7c70a0;
  --danger: #b04a3f;
  --accent: #b78cff;
  --accent-soft: #e0ccff;
  --accent-dim: #7a5cc0;
  --accent-2: #9d8cff;
  --accent-2-bright: #c0b0ff;
  --accent-2-deep: #4a3a8a;
  --text-on-accent: #1c1230;
  --aurora-1: #3a2a6b;
  --aurora-2: #241a48;
  --aurora-3: #181228;
  --glass-bg: rgba(38, 28, 64, 0.55);
  --glass-line: rgba(190, 140, 255, 0.16);
  --aurora-g1: rgba(183, 140, 255, 0.14);
  --aurora-g2: rgba(157, 140, 255, 0.10);
  --aurora-g3: rgba(74, 58, 138, 0.12);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--selection-bg); color: var(--ink-text); }

/* ---- Film grain overlay ---- */
.grain::after {
  content: "";
  position: fixed; top:0;right:0;bottom:0;left:0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: overlay;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-dim), #4a3f2d); border-radius: 9px; }

/* ============================================================
   Typography primitives
   ============================================================ */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink-text);
}

.display .zh {
  font-family: var(--zh);
  font-size: 0.42em;
  letter-spacing: 0.32em;
  color: var(--gold-soft);
  vertical-align: middle;
  margin-left: 0.5em;
}

.h1 { font-family: var(--serif); font-size: var(--fs-h1); font-weight: 400; line-height: 1.06; }
.h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; }
.h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.zh-line {
  font-family: var(--zh);
  font-size: var(--fs-small);
  letter-spacing: 0.28em;
  color: var(--muted);
}

.lead {
  font-family: var(--serif);
  font-size: 1.45rem;                 /* 兼容回退 */
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44rem;
}

.prose { max-width: 38rem; color: var(--muted); }
.prose strong { color: var(--ink-text); font-weight: 500; }
.prose em { font-style: italic; color: var(--gold-soft); }

/* ============================================================
   Layout primitives
   ============================================================ */
.container { width: 100%; max-width: 84rem; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 58rem; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-pad) 0; position: relative; }

.hairline { height: 1px; background: var(--line); border: 0; width: 100%; }

/* ---- Buttons / links ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1rem 2.4rem;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: transparent;
  transition: color var(--dur) var(--ease-lux), background var(--dur) var(--ease-lux), border-color var(--dur) var(--ease-lux);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute; top:0;right:0;bottom:0;left:0;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 50%, var(--gold) 100%);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-lux);
  z-index: 0;
}
.btn:hover::before { transform: translateY(0); }
.btn span { position: relative; z-index: 1; }
.btn:hover { color: var(--text-on-accent); }

.btn-ghost {
  border-color: var(--line);
  color: var(--ink-text);
}
.btn-ghost::before { background: var(--ghost-fill); }
.btn-ghost:hover { color: var(--accent-soft); border-color: var(--accent); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease-lux), color var(--dur) var(--ease-lux);
}
.link-arrow:hover { color: var(--gold-soft); border-color: var(--gold); }

/* ---- Badges / chips ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ---- Index numerals ---- */
.num {
  font-family: var(--serif);
  font-size: var(--fs-micro);
  color: var(--gold-dim);
  letter-spacing: 0.2em;
}

/* ---- Footer base ---- */
footer { border-top: 1px solid var(--line-soft); padding: var(--space-4) 0 var(--space-3); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto !important; }
}