/* Visual system reconstructed from the supplied Yinshan Guide reference. */
:root {
  --ref-paper: #f5ead4;
  --ref-paper-light: #fbf4e6;
  --ref-paper-deep: #e8d4b0;
  --ref-ink: #3b2b1e;
  --ref-muted: #796955;
  --ref-gold: #a77c3e;
  --ref-gold-dark: #765226;
  --ref-sage: #6f7b66;
  --ref-line: rgba(130, 93, 45, .32);
  --ref-shadow: 0 8px 24px rgba(92, 61, 28, .12);
}

html, body { background: var(--ref-paper) !important; color: var(--ref-ink) !important; }
body {
  background-image:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
    radial-gradient(circle at 18% 9%, rgba(166,124,62,.08), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(117,86,51,.018) 3px 4px) !important;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif !important;
}
body::before, body::after { display: none !important; }

/* Shared header */
.site-header {
  min-height: 66px !important;
  height: 66px !important;
  padding: 0 clamp(18px, 3.4vw, 54px) !important;
  background: rgba(250, 241, 224, .96) !important;
  border-bottom: 1px solid var(--ref-line) !important;
  box-shadow: 0 3px 14px rgba(91, 62, 31, .08) !important;
  backdrop-filter: blur(14px) !important;
  display:grid !important;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr) !important;
  align-items:center !important;
  column-gap:20px !important;
}
.site-header::before, .site-header::after { display: none !important; }
.brand { color: var(--ref-ink) !important; background: none !important; letter-spacing: 1px !important; }
.brand-mark { border: 0 !important; background: transparent !important; }
.brand-mark img { filter: sepia(.45) contrast(1.1) !important; }
.brand strong { color: var(--ref-ink) !important; }
.brand small { color: var(--ref-muted) !important; letter-spacing: .06em !important; }
.main-nav a {
  color: #594838 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: "STKaiti", "KaiTi", serif !important;
  letter-spacing: 0 !important;
}
.main-nav a::after { height: 2px !important; background: var(--ref-gold-dark) !important; }
.main-nav a:hover, .main-nav a.is-active, .main-nav a.active { color: var(--ref-gold-dark) !important; }
.site-header .brand { justify-self:start !important; }
.site-header .main-nav { grid-column:2; justify-self:center !important; margin:0 !important; }
.site-header .header-actions, .site-header > .search-box { grid-column:3; justify-self:end !important; }
.site-header > .search-box { width:min(360px,100%) !important; }
.lang-toggle, .icon-button { border-color: var(--ref-line) !important; color: var(--ref-ink) !important; background: rgba(255,255,255,.24) !important; }

/* Home first viewport */
.hero {
  min-height: 625px !important;
  height: min(720px, calc(100svh - 66px)) !important;
  max-height: 720px;
  overflow: hidden;
  background: var(--ref-paper-deep) !important;
  border-bottom: 1px solid var(--ref-line) !important;
}
.hero-bg {
  opacity: .78;
  background-image: url("/static/assets/images/verified/movie/yinshan-aerial.png") !important;
  background-position: center 50% !important;
  filter: sepia(.72) saturate(.45) brightness(1.12) contrast(.82) !important;
}
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(246,234,211,.96) 0%, rgba(246,234,211,.88) 38%, rgba(246,234,211,.2) 68%, rgba(246,234,211,.62) 100%),
    linear-gradient(0deg, rgba(242,226,198,.84), transparent 48%) !important;
}
.hero-inner {
  z-index: 5 !important;
  width: min(1180px, calc(100% - 64px)) !important;
  padding: 76px 0 190px !important;
  align-self: center;
}
.hero-inner .eyebrow { color: var(--ref-gold-dark) !important; font-size: .76rem !important; letter-spacing: 2px !important; }
.hero-inner h1 {
  max-width: 520px;
  margin: 10px 0 8px !important;
  color: #4a3020 !important;
  font-family: "STKaiti", "KaiTi", serif !important;
  font-size: clamp(3.2rem, 6vw, 5.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.45) !important;
}
.hero-copy { max-width: 500px !important; margin-top: 12px !important; color: #755b41 !important; font-size: 1.08rem !important; letter-spacing: 2px; }
.hero-search {
  width: min(560px, 55vw);
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 86px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(119,82,35,.42);
  border-radius: 24px;
  background: rgba(255,252,245,.9);
  box-shadow: var(--ref-shadow);
}
.hero-search input { min-width: 0; padding: 0 20px; color: var(--ref-ink); border: 0; outline: 0; background: transparent; }
.hero-search button { color: #fff9ef; border: 0; background: linear-gradient(#9a7038,#704b21); cursor: pointer; }
.hero-hot { margin: 8px 0 0; color: #725e49; font-size: .72rem; }
.hero-artifact {
  display: block !important;
  z-index: 4 !important;
  right: clamp(7%, 10vw, 14%) !important;
  bottom: -42px !important;
  width: min(360px, 30vw) !important;
  height: 560px !important;
  opacity: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hero-artifact::before, .hero-artifact::after { display: none !important; }
.hero-artifact img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: bottom center; filter: saturate(.72) sepia(.08) !important; }
.hero-dialog {
  position: absolute;
  z-index: 6;
  top: 132px;
  right: clamp(28%, 31vw, 35%);
  padding: 14px 18px;
  color: #6b553f;
  border: 1px solid rgba(125,90,46,.28);
  border-radius: 18px 18px 4px 18px;
  background: rgba(248,235,211,.9);
  font-size: .78rem;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(82,52,24,.1);
}
.hero-dialog::after { content:""; position:absolute; right:-9px; bottom:8px; width:16px; height:16px; background:inherit; border-right:1px solid var(--ref-line); border-bottom:1px solid var(--ref-line); transform:rotate(-45deg); }
.hero-rail { display: none !important; }
.carousel-band {
  position: absolute !important;
  z-index: 8 !important;
  left: 0;
  right: 0;
  top: 470px;
  padding: 0 clamp(28px, 6vw, 90px) !important;
  border: 0 !important;
  background: transparent !important;
}
.carousel-container { width:min(1120px,calc(100% - 140px)) !important; max-width:none !important; margin:0 auto !important; overflow:visible !important; }
.carousel-track { width:100% !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px !important; transform:none !important; }
.carousel-item { position: relative; min-width: 0 !important; height: 134px !important; overflow: hidden; opacity: 1 !important; border: 1px solid rgba(117,81,39,.58); border-radius: 8px; background: #4b3928; box-shadow: 0 8px 18px rgba(70,46,24,.22); filter: sepia(.15) saturate(.82) !important; }
.carousel-item:nth-child(n+4) { display: none !important; }
.carousel-item::after { content:"阴山文明"; position:absolute; inset:auto 0 0; padding:28px 12px 9px; color:#fff8e9; background:linear-gradient(transparent,rgba(32,22,14,.86)); font-family:"STKaiti","KaiTi",serif; font-size:.9rem; }
.carousel-item:nth-child(1)::after { content:"阴山岩画艺术"; }
.carousel-item:nth-child(2)::after { content:"长城边塞文化"; }
.carousel-item:nth-child(3)::after { content:"草原丝路文明"; }
.carousel-item img { width:100%; height:100%; object-fit:cover; }
.metric-band { padding-top: 0 !important; background: var(--ref-paper-light) !important; }

/* Content pages */
.answer-bar, .page-title, .make-items, .pais, .site-footer { background: transparent !important; }
.page-title {
  max-width: 1180px !important;
  padding: 48px 24px 20px !important;
  text-align: left !important;
  border: 0 !important;
}
.page-title::before, .page-title::after { display:none !important; }
.page-title h1 { color: var(--ref-ink) !important; font: 700 2.1rem/1.2 "STKaiti","KaiTi",serif !important; letter-spacing: 1px !important; text-shadow:none !important; }
.page-title .sub { margin-top:8px !important; color:var(--ref-muted) !important; letter-spacing:1px !important; }
.make-items, .pais { max-width:1180px !important; gap:16px !important; padding:16px 24px 56px !important; }
.make-items { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.make-items .item, .make-items .item:nth-child(n), .pai, .pai:nth-child(n) {
  display:block !important;
  grid-column:auto !important;
  margin:0 !important;
  transform:none !important;
  border:1px solid var(--ref-line) !important;
  border-radius:5px !important;
  background:rgba(251,245,233,.8) !important;
  box-shadow:0 5px 18px rgba(82,57,29,.09) !important;
  backdrop-filter:none !important;
}
.make-items .item::after, .pai::after { display:none !important; }
.make-items .item img { width:100% !important; height:150px !important; min-height:0 !important; object-fit:cover !important; }
.make-items .text { padding:16px !important; }
.make-items .text h3, .pai-name { margin-bottom:8px !important; color:var(--ref-ink) !important; font:700 1.05rem/1.3 "STKaiti","KaiTi",serif !important; }
.make-items .text p, .pai-text { color:var(--ref-muted) !important; font-size:.82rem !important; line-height:1.7 !important; }
.pais { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.archive-stats { max-width:1180px !important; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 24px 18px !important; }
.archive-stats span { min-height:70px; display:grid; place-content:center; text-align:center; border:1px solid var(--ref-line); border-right:0; background:rgba(251,245,233,.72); }
.archive-stats span:last-child { border-right:1px solid var(--ref-line); }
.archive-stats strong { color:var(--ref-ink); font-size:1.15rem; }
.archive-stats small { margin-top:5px; color:var(--ref-muted); font-size:.7rem; }
.pai { width:auto !important; padding:12px !important; }
.pai[hidden] { display:none !important; }
.pai .pic { height:150px !important; margin-bottom:10px !important; border:0 !important; border-radius:4px !important; }
.pai .pic img { height:150px !important; }
.site-footer { color:var(--ref-muted) !important; border-top:1px solid var(--ref-line) !important; }
.site-header .search-box { border:1px solid var(--ref-line) !important; border-radius:4px !important; background:rgba(255,252,245,.78) !important; }
.site-header .search-box button { color:#fff8eb !important; background:var(--ref-gold-dark) !important; }

/* Existing platform sections follow the same paper treatment. */
.section, .spectrum-section, .civilization-section, .timeline-section, .map-section, .knowledge-section, .archive-section { background:var(--ref-paper-light) !important; border-color:var(--ref-line) !important; }
.section-heading h2, .spectrum-head h2 { color:var(--ref-ink) !important; }
.section-heading p, .spectrum-head p { color:var(--ref-muted) !important; }
.spectrum-card, .culture-card, .timeline-card, .map-detail, .knowledge-detail, .resource-card { background:rgba(250,242,226,.9) !important; border-color:var(--ref-line) !important; border-radius:5px !important; box-shadow:var(--ref-shadow) !important; }
.ai-float-toggle {
  width:184px !important; min-width:184px !important; height:56px !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:10px !important; padding:6px 15px 6px 7px !important; overflow:visible !important;
  color:var(--ref-ink) !important; border:1px solid rgba(130,93,45,.22) !important;
  border-radius:28px !important; background:rgba(251,246,236,.9) !important;
  box-shadow:0 10px 30px rgba(83,55,28,.14),inset 0 1px rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px) saturate(135%) !important; -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
  transform-origin:right bottom !important; transition:transform .16s ease,box-shadow .22s ease,background .22s ease !important;
}
.ai-float-toggle::before { display:none !important; }
.ai-float-toggle:hover { background:rgba(255,251,243,.97) !important; box-shadow:0 14px 36px rgba(83,55,28,.18),inset 0 1px rgba(255,255,255,.9) !important; transform:translateY(-1px) !important; }
.ai-float-toggle:active { transform:scale(.97) !important; box-shadow:0 5px 16px rgba(83,55,28,.14) !important; transition-duration:.08s !important; }
.ai-float-toggle .ai-person-avatar { position:relative; z-index:2; width:42px !important; height:42px !important; flex:0 0 42px !important; overflow:visible; border:1px solid rgba(130,93,45,.2); border-radius:50%; background:#ead8b8; box-shadow:0 2px 8px rgba(54,34,17,.13); }
.ai-float-toggle .ai-person-avatar::after { content:""; position:absolute; right:-1px; bottom:1px; width:9px; height:9px; border:2px solid #fbf4e6; border-radius:50%; background:#64805e; box-sizing:border-box; }
.ai-float-toggle .ai-person-avatar img { width:100%; height:100%; display:block; overflow:hidden; object-fit:cover; object-position:50% 12%; border-radius:50%; transform:scale(1.02); }
.ai-float-toggle .ai-toggle-copy { position:relative; z-index:2; min-width:0; display:flex !important; align-items:baseline; gap:6px; white-space:nowrap; }
.ai-float-toggle .ai-toggle-copy strong { color:var(--ref-ink) !important; font:700 1rem/1.2 "STKaiti","KaiTi",serif !important; letter-spacing:0 !important; white-space:nowrap; }
.ai-float-toggle .ai-toggle-copy small { color:var(--ref-muted) !important; font:500 .64rem/1.2 system-ui,sans-serif !important; letter-spacing:0 !important; white-space:nowrap; opacity:1 !important; }
.ai-float-panel { background:var(--ref-paper-light) !important; border-color:var(--ref-line) !important; border-radius:8px !important; }
.ai-float-body .chat-message strong,
.ai-float-body .chat-message h3,
.ai-float-body .chat-message h4,
.ai-float-body .chat-message h5 {
  color:var(--ref-gold-dark) !important;
}
.digital-human-stage {
  position:relative; min-height:148px; overflow:hidden; flex:0 0 auto;
  border-bottom:1px solid var(--ref-line); background:linear-gradient(105deg,#dfc79d,#f6ead2 58%,#cdb085);
}
.digital-human-stage::before { content:""; position:absolute; inset:0; background:url("/static/assets/images/verified/movie/yinshan-aerial.png") center 46%/cover; opacity:.3; filter:sepia(.8) saturate(.45); }
.digital-human-stage img { position:absolute; z-index:1; right:17px; bottom:-55px; width:142px; height:220px; object-fit:contain; transform-origin:50% 88%; animation:humanBreath 4.2s ease-in-out infinite; }
.digital-human-caption { position:absolute; z-index:2; left:18px; bottom:18px; display:grid; gap:4px; color:var(--ref-ink); }
.digital-human-caption strong { font:700 1.05rem/1.2 "STKaiti","KaiTi",serif; }
.digital-human-caption span { color:var(--ref-muted); font-size:.68rem; }
.voice-bars { position:absolute; z-index:2; left:18px; top:20px; height:18px; display:flex; align-items:center; gap:3px; }
.voice-bars i { width:2px; height:5px; background:var(--ref-gold-dark); opacity:.45; }
.digital-human-stage.is-thinking img { animation:humanThink 1.8s ease-in-out infinite; }
.digital-human-stage.is-speaking img { animation:humanSpeak .62s ease-in-out infinite alternate; }
.digital-human-stage.is-speaking .voice-bars i { animation:voiceBar .58s ease-in-out infinite alternate; opacity:1; }
.digital-human-stage.is-speaking .voice-bars i:nth-child(2) { animation-delay:.12s; }
.digital-human-stage.is-speaking .voice-bars i:nth-child(3) { animation-delay:.24s; }
.digital-human-stage.is-speaking .voice-bars i:nth-child(4) { animation-delay:.36s; }
.tts-button { display:block; margin-top:9px; padding:5px 10px; color:var(--ref-gold-dark); border:1px solid var(--ref-line); border-radius:3px; background:rgba(255,252,245,.7); cursor:pointer; font-size:.7rem; }
@keyframes humanBreath { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(.4deg)} }
@keyframes humanThink { 0%,100%{transform:rotate(-.5deg)} 50%{transform:rotate(1deg) translateY(-2px)} }
@keyframes humanSpeak { from{transform:translateY(0) rotate(-.35deg)} to{transform:translateY(-3px) rotate(.55deg)} }
@keyframes voiceBar { from{height:4px} to{height:17px} }
@media (max-width:640px) { .digital-human-stage { min-height:124px; } .digital-human-stage img { width:118px; height:190px; bottom:-50px; } }

@media (max-width: 900px) {
  .hero { height: 700px !important; min-height:700px !important; }
  .hero-inner { width:calc(100% - 36px) !important; padding-top:70px !important; }
  .hero-artifact { right:1% !important; width:38vw !important; opacity:.9 !important; }
  .hero-dialog { display:none; }
  .carousel-band { top:535px; padding:0 18px !important; }
  .carousel-container { max-width:100% !important; }
  .make-items, .pais { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 720px) {
  .site-header { height:64px !important; min-height:64px !important; }
  .site-header { display:flex !important; }
  .main-nav.is-open { top:64px !important; background:var(--ref-paper-light) !important; border-color:var(--ref-line) !important; }
  .hero { height:640px !important; min-height:640px !important; }
  .hero-bg { background-position:58% center !important; }
  .hero-overlay { background:linear-gradient(180deg,rgba(246,234,211,.7),rgba(246,234,211,.35) 45%,rgba(246,234,211,.92)) !important; }
  .hero-inner { align-self:start !important; width:calc(100% - 32px) !important; padding:30px 0 0 !important; text-align:left; }
  .hero-inner h1 { max-width:270px; font-size:2.75rem !important; line-height:1.04 !important; }
  .hero-copy { font-size:.9rem !important; }
  .hero-search { width:100%; margin-top:18px; grid-template-columns:1fr 70px; }
  .hero-hot { display:none; }
  .hero-artifact { right:-18px !important; bottom:96px !important; width:176px !important; height:286px !important; opacity:.78 !important; }
  .carousel-band { top:478px; }
  .carousel-track { grid-template-columns:repeat(3,230px) !important; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
  .carousel-track::-webkit-scrollbar { display:none; }
  .carousel-item { height:118px !important; }
  .page-title { padding:30px 16px 12px !important; }
  .make-items, .pais { grid-template-columns:1fr !important; padding:14px 16px 44px !important; }
  .archive-stats { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px 12px !important; }
  .archive-stats span:nth-child(2) { border-right:1px solid var(--ref-line); }
  .archive-stats span:nth-child(n+3) { border-top:0; }
}