/* 溯本医源 · 四象主题：星宿夜空 + 四神兽守四方 + 卡片入口，零 JS 动画 */
:root {
  --night-1: #18233a;
  --night-2: #0d1424;
  --night-3: #070b13;
  --ink-gold: #e9e2cf;
  --seal: #a83228;
  --muted: #9aa3b8;
  --card-bg: rgba(17, 25, 43, 0.62);
  --card-line: rgba(255, 255, 255, 0.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", "Songti SC", serif;
  color: var(--ink-gold);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--night-3);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 25% 68%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.4px 1.4px at 38% 12%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 47% 45%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.8px 1.8px at 56% 78%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 64% 30%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 73% 60%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 82% 18%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.3px 1.3px at 90% 50%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 18% 88%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(2px 2px at 68% 8%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 33% 35%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(ellipse at 50% -10%, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);
}

/* ---------- 星宿背景层 ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.su-name {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", serif;
  font-size: 11px;
  fill: currentColor;
  fill-opacity: 0.55;
  letter-spacing: 1px;
}

/* ---------- 四象背景装饰（守四方，无框） ---------- */
.beasts {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.beast {
  position: absolute;
  pointer-events: auto;
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--ink-gold);
  transition: transform 0.25s, filter 0.25s;
}
.beast:hover { transform: scale(1.06); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--q) 45%, transparent)); }
.beast .totem { width: clamp(68px, 8vw, 100px); height: auto; display: block; margin: 0 auto; color: var(--q); }
.beast h2 { font-size: clamp(17px, 1.9vw, 23px); font-weight: 400; letter-spacing: 6px; color: var(--q); margin-top: 6px; }
.beast .q-sub { font-size: 12px; color: var(--muted); letter-spacing: 2px; line-height: 1.7; margin-top: 3px; }
.beast .q-link { font-size: 13px; color: #c9d0dd; margin-top: 6px; letter-spacing: 2px; }
.beast .q-link:hover { color: #fff; }
.beast.soon { opacity: 0.5; }
.beast.soon:hover { transform: none; filter: none; }

.q-east { left: clamp(8px, 3vw, 44px); top: 50%; transform: translateY(-50%); }
.q-west { right: clamp(8px, 3vw, 44px); top: 50%; transform: translateY(-50%); }
.q-north { top: clamp(10px, 3vh, 30px); left: 50%; transform: translateX(-50%); }
.q-south { bottom: clamp(10px, 3vh, 30px); left: 50%; transform: translateX(-50%); }

/* ---------- 主体 ---------- */
.page {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 48px) 40px;
}

/* ---------- 头部 ---------- */
.site-header { display: flex; align-items: center; gap: 20px; padding: 20px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-gold); }
.brand-seal {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--seal); color: #f5efe0; font-size: 22px;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(168, 50, 40, 0.35);
}
.brand-name { font-size: 20px; letter-spacing: 3px; }
.site-nav { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
.site-nav a { color: #c6cddd; text-decoration: none; font-size: 16px; letter-spacing: 2px; transition: color 0.25s; }
.site-nav a:hover { color: #fff; }

/* ---------- 主区（无大标题，避免遮挡玄武） ---------- */
.hero { text-align: center; padding: clamp(44px, 7vh, 76px) 0 30px; }
.hero-kicker { color: var(--muted); letter-spacing: 6px; font-size: 14px; }
.hero-quote { color: #b9bec9; letter-spacing: 3px; font-size: 15px; margin-top: 10px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 10px 30px; border-radius: 999px;
  text-decoration: none; font-size: 15px; letter-spacing: 3px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--seal); color: #f5efe0; box-shadow: 0 4px 18px rgba(168, 50, 40, 0.35); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(168, 50, 40, 0.5); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.25); color: #dfe2ea; }
.btn-ghost:hover { box-shadow: 0 4px 18px rgba(255, 255, 255, 0.08); }

/* ---------- 入口卡片（框） ---------- */
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .quad { grid-template-columns: 1fr; } }
.quad-card {
  display: block; text-decoration: none; color: var(--ink-gold);
  background: var(--card-bg); border: 1px solid var(--card-line);
  border-radius: 14px; padding: 24px 16px 20px; text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
a.quad-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 234, 216, 0.35);
  box-shadow: 0 10px 30px -8px rgba(240, 234, 216, 0.14);
}
.card-icon { font-size: 30px; display: block; }
.quad-card h2 { font-size: 20px; font-weight: 400; letter-spacing: 6px; margin: 10px 0 6px; }
.quad-card p { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.card-tag {
  display: inline-block; margin-top: 12px; padding: 3px 12px;
  font-size: 11px; letter-spacing: 2px; color: #c9d0dd;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
}
.card-tag-soon { opacity: 0.6; }
.soon { opacity: 0.55; }

/* ---------- 页脚 ---------- */
.site-footer { text-align: center; color: #6d7688; font-size: 13px; letter-spacing: 2px; padding: 40px 0 6px; }

/* 窄屏：隐藏四象背景装饰，避免遮挡内容 */
@media (max-width: 900px) {
  .beasts { display: none; }
  .starfield { opacity: 0.5; }
}