/* Historical exhibition layer: restrained paper, ink, ochre, and mountain imagery. */
:root {
  --paper: #f3eee2;
  --paper-deep: #e7ddcc;
  --paper-line: rgba(82, 56, 36, .2);
  --ink-h: #2d241e;
  --ink-soft: #66584b;
  --ochre-h: #a36b35;
  --red-h: #8f4535;
}

html { background: var(--paper); }
body {
  color: var(--ink-h);
  background: var(--paper);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
body::before { display: none; }

.site-header {
  height: 76px;
  padding: 0 clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--paper-line);
  background: rgba(243, 238, 226, .94);
  box-shadow: 0 3px 18px rgba(60, 43, 27, .06);
  backdrop-filter: blur(12px);
}
.site-header::before { background: var(--ochre-h); opacity: .35; }
.brand { min-width: 210px; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border: 1px solid var(--ochre-h); border-radius: 2px; background: var(--red-h); }
.brand-mark img { width: 36px; height: 36px; filter: sepia(.35); }
.brand strong { color: var(--ink-h); font-size: 1rem; font-weight: 700; }
.brand small { color: var(--ink-soft); font-family: Arial, sans-serif; letter-spacing: .08em; }
.main-nav { gap: 2px; }
.main-nav,
.main-nav.is-open {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: var(--header-height) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.main-nav a { width: auto !important; }
.main-nav a { color: var(--ink-soft); font-size: .94rem; letter-spacing: 1px; }
.main-nav a:hover, .main-nav a.is-active { color: var(--red-h); background: rgba(163,107,53,.07); }
.main-nav a::after { height: 1px; background: var(--red-h); }
.lang-toggle, .icon-button { color: var(--ink-h); border-color: var(--paper-line); background: transparent; border-radius: 2px; }
.lang-toggle { min-width: 76px; height: 34px; }
.icon-button { display: none !important; }
.ai-toggle-copy { display: block !important; }

.hero {
  min-height: min(760px, 92svh);
  margin-top: 0;
  border-bottom: 1px solid var(--paper-line);
  background: #43372d;
}
.hero-bg { background-position: center 48%; filter: saturate(.68) sepia(.2) contrast(1.05); }
.hero-overlay { background: linear-gradient(90deg, rgba(37,27,20,.82) 0%, rgba(37,27,20,.34) 48%, rgba(37,27,20,.04) 78%), linear-gradient(0deg, rgba(37,27,20,.6), transparent 48%); }
.hero-inner { width: min(1220px, calc(100% - 40px)); padding: 150px 0 96px; align-self: center; }
.hero-inner .eyebrow { color: #e2c99b; font-size: .84rem; letter-spacing: 3px; }
.hero-inner h1 { color: #fff8e9; font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif; font-size: clamp(3rem, 7vw, 6.2rem); font-weight: 500; letter-spacing: 5px; text-shadow: 0 4px 20px rgba(0,0,0,.32); }
.hero-copy { max-width: 540px; color: rgba(255,248,233,.86); font-size: 1.1rem; }
.primary-action { border-radius: 2px; color: #fff8e9; background: var(--red-h); border-color: var(--red-h); box-shadow: none; }
.hero-actions .action-mark {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hero-actions .primary-action { gap: 0; }
.primary-action:hover { background: #733528; transform: translateY(-2px); }
.hero-artifact { display: none !important; }
.hero-holo, .hero-particles, .hero-glow, .hero-veins { display: none !important; }
.hero-rail { border-color: rgba(255,248,233,.34); }
.rail-node { color: rgba(255,248,233,.68); }
.rail-node.is-active { color: #fff8e9; }

.carousel-band { padding: 0; background: var(--paper-deep); border-bottom: 1px solid var(--paper-line); }
.carousel-container { max-width: none; }
.carousel-item { height: 130px; opacity: .88; filter: sepia(.18) saturate(.75); }
.metric-band { background: var(--paper); border-bottom: 1px solid var(--paper-line); }
.metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.metric-card { min-height: 126px; padding: 28px 24px; border-right: 1px solid var(--paper-line); background: transparent; }
.metric-card strong { color: var(--red-h); font-family: Georgia, serif; font-size: 2.2rem; }
.metric-card span { color: var(--ink-h); }
.metric-card small { color: var(--ink-soft); }

.section { background: var(--paper); }
.section-heading, .spectrum-head { border-color: var(--paper-line); }
.section-index, .spectrum-kicker { color: var(--ochre-h); }
.section-heading h2, .spectrum-head h2 { color: var(--ink-h); font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif; font-weight: 500; }
.section-heading p, .spectrum-head p { color: var(--ink-soft); }
.spectrum-section, .civilization-section, .timeline-section, .map-section, .knowledge-section, .archive-section { border-bottom: 1px solid var(--paper-line); }
.spectrum-card, .culture-card, .timeline-card, .map-detail, .knowledge-detail, .resource-card { border: 1px solid var(--paper-line); border-radius: 2px; background: rgba(255,252,244,.56); box-shadow: 0 12px 30px rgba(60,43,27,.06); }
.spectrum-card:hover, .culture-card:hover, .resource-card:hover { border-color: rgba(143,69,53,.48); transform: translateY(-3px); }
.spectrum-card img, .culture-card img, .resource-card img { filter: sepia(.12) saturate(.8); }
.map-canvas, .knowledge-graph { border-color: var(--paper-line); background-color: #d9cdb8; filter: sepia(.12); }
.map-detail { color: var(--ink-h); }
.map-detail-content p, .culture-card-body p, .resource-card p { color: var(--ink-soft); }
.map-point { background: var(--red-h); border-color: #fff8e9; box-shadow: 0 0 0 4px rgba(143,69,53,.16); }
.map-route { border-color: rgba(143,69,53,.54); }
.archive-toolbar { border-color: var(--paper-line); }
.search-box { border-color: var(--paper-line); background: rgba(255,252,244,.7); }
.search-box input { color: var(--ink-h); }
.tab-list button { color: var(--ink-soft); border-color: var(--paper-line); border-radius: 2px; }
.tab-list button.is-active, .tab-list button:hover { color: #fff8e9; background: var(--red-h); border-color: var(--red-h); }

.ai-float { right: clamp(16px, 3vw, 42px); bottom: 24px; }
.ai-float-toggle { min-width: 156px; height: 52px; border: 1px solid rgba(255,248,233,.38); border-radius: 2px; background: var(--red-h); box-shadow: 0 9px 25px rgba(63,38,25,.22); }
.ai-float-toggle:hover { background: #733528; transform: translateY(-2px); }
.ai-float-toggle::before { display: none; }
.ai-toggle-copy strong { color: #fff8e9; font-size: .88rem; }
.ai-toggle-copy small { color: rgba(255,248,233,.72); }
.ai-mark { width: 28px; height: 28px; border: 1px solid rgba(255,248,233,.55); background: transparent; box-shadow: none; }
.ai-float-panel { border: 1px solid var(--paper-line); border-radius: 2px; background: #f8f3e8; box-shadow: 0 20px 60px rgba(48,33,21,.2); }
.ai-float-panel::before { background: var(--ochre-h); opacity: .25; }
.ai-float-header { border-bottom-color: var(--paper-line); }
.ai-float-heading span { color: var(--ink-h); }
.ai-float-heading small { color: var(--ink-soft); }
.ai-float-close { color: var(--ink-soft); }
.ai-float-body { background: transparent; }
.ai-float-body .chat-message { color: var(--ink-h); border-radius: 2px; border: 1px solid var(--paper-line); background: #fffaf0; }
.ai-float-body .chat-message.user { color: #fff8e9; background: var(--red-h); border-color: var(--red-h); }
.ai-float-prompts button { color: var(--red-h); border-color: rgba(143,69,53,.28); border-radius: 2px; background: transparent; }
.ai-float-prompts button:hover { color: #fff8e9; background: var(--red-h); border-color: var(--red-h); }
.ai-float-form { border-color: var(--paper-line); background: #fffaf0; }
.ai-float-form input { color: var(--ink-h); }
.ai-float-form button { background: var(--red-h); border-radius: 2px; }
.site-footer { color: var(--ink-soft); background: #ded2bf; border-top: 1px solid var(--paper-line); }
.site-footer strong { color: var(--ink-h); }

@media (max-width: 900px) {
  .main-nav { display: flex; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card:nth-child(2) { border-right: 0; }
  .hero-inner { width: min(100% - 32px, 680px); padding-top: 126px; }
}
@media (max-width: 720px) {
  .icon-button { display: flex !important; }
  .main-nav { display: none !important; }
  .main-nav.is-open {
    position: absolute !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    display: grid !important;
    height: auto !important;
    flex-direction: initial !important;
    background: var(--paper) !important;
    border: 1px solid var(--paper-line) !important;
    box-shadow: 0 12px 30px rgba(60,43,27,.12) !important;
  }
  .ai-float-toggle { width: auto !important; min-width: 148px; }
  .ai-toggle-copy { display: block !important; }
}
@media (max-width: 640px) {
  .site-header { height: 64px; }
  .brand { min-width: 0; }
  .brand small { display: none; }
  .main-nav { background: var(--paper); border-color: var(--paper-line); }
  .hero { min-height: 670px; }
  .hero-inner { padding: 118px 0 80px; }
  .hero-inner h1 { font-size: clamp(2.8rem, 13vw, 4.3rem); line-height: 1.1; letter-spacing: 2px; }
  .hero-copy { font-size: .98rem; }
  .hero-artifact { display: none; }
  .carousel-item { height: 94px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 110px; padding: 20px 14px; }
  .metric-card strong { font-size: 1.55rem; }
  .metric-card span { font-size: .8rem; }
  .metric-card small { display: none; }
  .ai-float { right: 14px; bottom: 14px; }
  .ai-float-toggle { width: auto !important; min-width: 132px; height: 46px; padding: 0 14px; }
  .ai-toggle-copy { display: block !important; }
  .ai-float-panel { width: min(360px, calc(100vw - 28px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}