/* ============================================================
   文学馆 · 奇幻馆 — 样式系统 v3「秘法手稿」
   GRIMOIRE & NIGHTFALL · 西式奇幻视觉 · 独立于兄弟馆模板
   夜幕为台 · 古卷为载 · 鎏金为轨 · 赤铜为枝
   星空、拱门、羊皮卷卡、石板、金轨时间轴、悬赏令、椭圆画框
   全部 data-URI / 系统字体 / 零外链
   ============================================================ */

:root {
  /* 夜幕系 */
  --night0: #0a0f19;
  --night1: #0e1522;
  --night2: #16202f;
  --night3: #1f2c40;
  --night-line: rgba(198, 154, 75, 0.32);
  /* 羊皮卷系 */
  --parch: #ece2c8;
  --parch2: #e0d2ae;
  --parch3: #ccb988;
  --ink: #2b2518;
  --ink2: #4a412c;
  --muted: #7a6d50;
  --faint: #a2926f;
  --panel-solid: #f1e8d0;
  /* 金属 */
  --gold: #c39a4b;
  --gold2: #e6c477;
  --gold3: #8a6a2c;
  --copper: #b06a3a;
  --ember: #a8442a;
  --silver: #9aa4b2;
  --line: rgba(74, 65, 44, 0.35);
  --line-soft: rgba(74, 65, 44, 0.16);
  --radius: 3px;
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg stroke='%2385724a' opacity='.16' stroke-width='.8' fill='none'%3E%3Cpath d='M0 18 Q60 12 160 20 M0 52 Q80 46 160 54 M0 88 Q60 82 160 90 M0 124 Q80 118 160 126'/%3E%3Cpath d='M24 0 Q20 80 26 160 M76 0 Q72 80 78 160 M128 0 Q124 80 130 160'/%3E%3C/g%3E%3Cg fill='%2385724a' opacity='.13'%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3Ccircle cx='122' cy='92' r='1.8'/%3E%3Ccircle cx='84' cy='132' r='2'/%3E%3Ccircle cx='18' cy='104' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --stars: radial-gradient(1.4px 1.4px at 14% 22%, rgba(230, 196, 119, .7), transparent 100%),
    radial-gradient(1px 1px at 31% 9%, rgba(230, 196, 119, .5), transparent 100%),
    radial-gradient(1.2px 1.2px at 52% 18%, rgba(255, 255, 255, .4), transparent 100%),
    radial-gradient(1px 1px at 68% 7%, rgba(230, 196, 119, .6), transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 15%, rgba(255, 255, 255, .35), transparent 100%),
    radial-gradient(1px 1px at 92% 30%, rgba(230, 196, 119, .5), transparent 100%),
    radial-gradient(1.2px 1.2px at 22% 40%, rgba(255, 255, 255, .3), transparent 100%),
    radial-gradient(1px 1px at 44% 34%, rgba(230, 196, 119, .45), transparent 100%),
    radial-gradient(1px 1px at 76% 44%, rgba(255, 255, 255, .3), transparent 100%),
    radial-gradient(1.4px 1.4px at 8% 58%, rgba(230, 196, 119, .5), transparent 100%),
    radial-gradient(1px 1px at 58% 62%, rgba(255, 255, 255, .28), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 70%, rgba(230, 196, 119, .45), transparent 100%),
    radial-gradient(1px 1px at 36% 78%, rgba(255, 255, 255, .25), transparent 100%),
    radial-gradient(1px 1px at 68% 86%, rgba(230, 196, 119, .4), transparent 100%),
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .025) 42%, transparent 56%);
  --serif-latin: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --latin2: "Copperplate", "Copperplate Gothic Light", "Baskerville", "Palatino", Georgia, serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --body: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ============================================================
   夜幕底：星空 + 雾霭（全局舞台）
   ============================================================ */
body {
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(46, 63, 92, .35), transparent 60%),
    linear-gradient(180deg, #0a0f19 0%, #0d1522 34%, #101a2b 68%, #0c131f 100%);
  background-attachment: fixed;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--stars);
  background-size: 140% 140%;
  opacity: .9;
}
/* 微光尘埃层（原纸纹层改造） */
.paper-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .6;
  background-image:
    radial-gradient(2px 2px at 6% 12%, rgba(230, 196, 119, .25), transparent 100%),
    radial-gradient(2px 2px at 94% 6%, rgba(255, 255, 255, .18), transparent 100%),
    radial-gradient(3px 3px at 50% 96%, rgba(230, 196, 119, .16), transparent 100%),
    radial-gradient(2px 2px at 12% 88%, rgba(255, 255, 255, .14), transparent 100%);
  mix-blend-mode: screen;
}
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 30px; }
a { color: inherit; text-decoration: none; }
img { display: block; }
::selection { background: rgba(198, 154, 75, .35); }

.latin {
  font-family: var(--serif-latin);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
}

/* ============================================================
   顶栏：夜蓝横楣 + 拱门导航
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 15, 25, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--night-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .03);
}
.topbar .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand::before {
  content: "幻";
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 15px; color: var(--gold2);
  background: radial-gradient(circle at 38% 30%, #24344f, #101724);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 3px rgba(10, 12, 16, .55), 0 0 14px rgba(230, 196, 119, .22);
  text-shadow: 0 0 8px rgba(230, 196, 119, .6);
}
.brand .t1 { font-size: 18px; letter-spacing: 4px; font-weight: 700; font-family: var(--serif); color: #f0ead8; }
.brand .t2 {
  font-family: var(--latin2); font-size: 10.5px; letter-spacing: 2.4px; color: var(--gold2);
  text-transform: uppercase; font-weight: 600;
}
.nav { display: flex; gap: 8px; margin-left: auto; font-size: 14.5px; }
.nav a {
  color: #98a0ad; letter-spacing: 2px; padding: 7px 15px; position: relative;
  border: 1px solid transparent; border-radius: 2px; transition: all .22s;
  font-family: var(--serif);
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transform: scaleX(0); transition: transform .25s; transform-origin: left;
}
.nav a:hover { color: var(--gold2); border-color: rgba(198, 154, 75, .4); background: rgba(198, 154, 75, .08); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on {
  color: #f6edd6;
  background: linear-gradient(180deg, rgba(198, 154, 75, .22), rgba(198, 154, 75, .08));
  border-color: rgba(198, 154, 75, .55);
  box-shadow: 0 0 18px rgba(198, 154, 75, .15), inset 0 0 12px rgba(198, 154, 75, .08);
  text-shadow: 0 0 8px rgba(230, 196, 119, .4);
}

/* ============================================================
   页头横幅：夜中铭牌（符文带 + 星雾 + 金铭）
   ============================================================ */
.pagehead {
  padding: 66px 0 46px; color: #eae3d0; position: relative;
  border-bottom: none; margin-bottom: 30px;
}
.pagehead::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold2) 16%, var(--gold2) 84%, transparent);
  opacity: .85;
}
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(230, 196, 119, .09), transparent 70%);
}
.pagehead .ph-kicker {
  display: inline-block; font-family: var(--latin2); font-size: 11px; letter-spacing: 6px;
  color: var(--gold2); margin-bottom: 12px; text-transform: uppercase;
  border: 1px solid rgba(198, 154, 75, .45); border-radius: 2px; padding: 4px 14px 3px;
  background: rgba(198, 154, 75, .08); text-shadow: 0 0 10px rgba(230, 196, 119, .3);
}
.pagehead h1 {
  font-family: var(--serif); font-size: 48px; letter-spacing: 9px; color: #f4efdf;
  margin: 0 0 16px; font-weight: 700; text-shadow: 0 2px 26px rgba(230, 196, 119, .18);
}
.pagehead p { font-size: 14.5px; line-height: 1.95; color: #a8adbb; max-width: 880px; margin: 0 0 22px; }
.ph-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.ph-stats span { font-size: 13px; letter-spacing: 1px; color: #8f94a3; position: relative; }
.ph-stats span + span::before {
  content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: rgba(198, 154, 75, .3);
}
.ph-stats b {
  font-family: var(--latin2); font-size: 28px; color: var(--gold2); margin-right: 8px; font-weight: 700;
  text-shadow: 0 0 16px rgba(230, 196, 119, .3);
}

/* ============================================================
   通用 section：符文眉题
   ============================================================ */
section.block { padding: 56px 0; border-top: 1px solid rgba(198, 154, 75, .16); position: relative; }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .kicker {
  display: inline-block; font-family: var(--latin2); font-size: 11.5px;
  letter-spacing: 6px; color: var(--gold); text-transform: uppercase;
  position: relative; padding: 0 30px;
}
.sec-head .kicker::before, .sec-head .kicker::after {
  content: ""; position: absolute; top: 50%; width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 154, 75, .6));
}
.sec-head .kicker::before { right: 100%; }
.sec-head .kicker::after { left: 100%; transform: scaleX(-1); }
.sec-head h2 {
  font-family: var(--serif); font-size: 37px; letter-spacing: 7px; margin-top: 9px;
  color: #f1ebda; font-weight: 700; text-shadow: 0 2px 22px rgba(230, 196, 119, .12);
}
.sec-head h2::after {
  content: ""; display: block; width: 84px; height: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold2) 30%, var(--gold2) 70%, transparent);
}
.sec-head p { color: #9aa0ae; font-size: 14.5px; margin-top: 12px; max-width: 680px; margin-left: auto; margin-right: auto; }

/* 内页羊皮纸小标题（作家页「本馆藏书」等） */
.sec-head.left h2 { text-align: left; font-size: 24px; letter-spacing: 3px; color: #f1ebda; }
.sec-head.left h2::after { margin-left: 0; width: 60px; }

/* ============================================================
   卡片系统：羊皮卷卡（书脊金线 + 卷角）+ 深色石板
   ============================================================ */
.r-card, .motif, .bio-block, .tl-card, .wcard, .border-card, .src-card, .cn-intro, .bridge, .acard {
  position: relative;
  background-image: var(--paper), linear-gradient(165deg, #f2e9d1, #e3d4b1 62%, #d6c294);
  border: 1px solid rgba(122, 100, 60, .42);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(198, 154, 75, .22),
    0 12px 26px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 -14px 26px rgba(140, 110, 55, .08);
  color: var(--ink);
}
/* 书脊金线（左） */
.r-card::before, .motif::before, .bio-block::before, .tl-card::before, .wcard::before, .border-card::before, .src-card::before, .cn-intro::before, .acard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold2), var(--gold3) 85%);
  opacity: .9; border-radius: 2px 0 0 2px;
}
/* 右下卷角 */
.r-card::after, .motif::after, .tl-card::after, .wcard::after, .border-card::after, .src-card::after, .cn-intro::after, .acard::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 18px; height: 18px;
  background: linear-gradient(315deg, rgba(90, 70, 30, .22), transparent 60%);
  border-right: 1px solid rgba(140, 110, 55, .35);
  border-bottom: 1px solid rgba(140, 110, 55, .35);
  border-radius: 0 0 3px 0;
}

/* 深色石板（三条件/判断等夜底卡） */
.slab, .oracle {
  background-image: radial-gradient(120% 90% at 30% 0%, rgba(48, 66, 96, .55), transparent 55%),
    linear-gradient(160deg, #1b2536, #111927);
  border: 1px solid rgba(198, 154, 75, .4);
  color: #e4ddca;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.slab::before, .oracle::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold2), var(--gold3));
  opacity: .9;
}
.slab h3, .oracle p b, .slab p b { color: #faf6ea; }
.slab p, .oracle p { color: #ede4cf; font-size: 15px; line-height: 1.85; }
.slab::after, .oracle::after { content: none; }

/* ---------- 三条件卡：罗马浮雕编号 ---------- */
.r-card .no {
  font-family: var(--latin2); font-size: 13px; color: #f3dfa4; font-weight: 700;
  display: inline-block; padding: 3px 14px; margin-bottom: 15px;
  letter-spacing: 3px; text-transform: uppercase;
  border: 1px solid rgba(230, 196, 119, .72); border-radius: 2px;
  background: rgba(230, 196, 119, .18);
  text-shadow: 0 0 10px rgba(230, 196, 119, .45);
}
.r-card h3 { font-family: var(--serif); font-size: 21px; letter-spacing: 2px; margin-bottom: 12px; font-weight: 700; }
.r-card p { font-size: 14.5px; color: var(--ink2); }

/* ---------- 时间轴：夜幕金轨 ---------- */
.timeline { position: relative; max-width: 860px; margin: 0 auto; padding-left: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 7%, var(--gold) 93%, transparent);
  opacity: .8;
  box-shadow: 0 0 8px rgba(198, 154, 75, .35);
}
.tnode { position: relative; padding: 0 0 36px 30px; }
.tnode::before {
  content: ""; position: absolute; left: -37px; top: 9px;
  width: 15px; height: 15px; background: var(--gold2);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(198, 154, 75, .18), 0 0 0 7px var(--night1), 0 0 14px rgba(230, 196, 119, .4);
}
.tnode .when {
  display: inline-block; font-family: var(--latin2); color: var(--gold2);
  font-size: 13px; letter-spacing: 2.4px; border-bottom: 1px solid rgba(198, 154, 75, .45); padding-bottom: 2px;
  text-transform: uppercase; text-shadow: 0 0 10px rgba(230, 196, 119, .25);
}
.tnode h4 { font-family: var(--serif); font-size: 23px; margin: 9px 0 8px; letter-spacing: 2px; font-weight: 700; color: #f0ead8; }
.tnode p { font-size: 14.5px; color: #9fa6b4; max-width: 680px; }
.tnode .tag {
  display: inline-block; font-size: 12px; color: #b9c0cc;
  background: rgba(31, 44, 64, .8); border: 1px solid rgba(198, 154, 75, .35);
  border-radius: 2px; padding: 1px 10px; margin-right: 6px; margin-top: 8px;
}
.tnode .tag.b-east { color: #dfb296; background: rgba(176, 106, 58, .14); border-color: rgba(176, 106, 58, .5); }

/* 时代缎带（深色金边） */
.era-band {
  font-family: var(--serif); font-size: 25px; letter-spacing: 4px;
  margin: 46px 0 20px; padding: 9px 18px; font-weight: 700; color: #f4efdf;
  background: linear-gradient(90deg, rgba(198, 154, 75, .2), rgba(198, 154, 75, .03));
  border-left: 4px solid var(--gold2);
  text-shadow: 0 1px 12px rgba(230, 196, 119, .2);
}
.era-band small { font-family: var(--latin2); font-size: 11.5px; color: var(--gold2); letter-spacing: 2px; margin-left: 12px; text-transform: uppercase; }
/* 中国线：赤铜缎带 */
.era-band.cn {
  background: linear-gradient(90deg, rgba(176, 106, 58, .22), rgba(176, 106, 58, .04));
  border-left-color: var(--copper);
}
.era-band.cn small { color: #dda06f; }
.timeline.cn .tnode::before { background: var(--copper); box-shadow: 0 0 0 4px rgba(176, 106, 58, .16), 0 0 0 7px var(--night1), 0 0 14px rgba(221, 160, 111, .35); }
.timeline.cn .tnode .when { color: #dda06f; border-bottom-color: rgba(176, 106, 58, .5); }
.timeline.cn .tnode h4 { color: #f4ead8; }

/* ---------- 四源汇流：魔法阵圆盘 ---------- */
.sources { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr; gap: 18px 28px; align-items: stretch; }
.src-center { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.src-big {
  width: 182px; height: 182px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 84px; color: var(--gold2); font-weight: 700;
  background: radial-gradient(circle at 38% 30%, #2b3c58, #101724);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 9px rgba(8, 11, 18, .55), 0 14px 44px rgba(0, 0, 0, .55), 0 0 34px rgba(230, 196, 119, .14);
  text-shadow: 0 0 26px rgba(230, 196, 119, .5);
  position: relative;
}
.src-big::before {
  content: ""; position: absolute; inset: -13px; border-radius: 50%;
  border: 1px dashed rgba(198, 154, 75, .4);
  animation: ring-spin 90s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.src-center .cap { margin-top: 20px; font-family: var(--serif); letter-spacing: 4px; color: #f5efde; font-size: 17px; font-weight: 700; text-shadow: 0 0 12px rgba(230, 196, 119, .25); }
.src-center .cap small { display: block; color: #b9c0cf; letter-spacing: 1.5px; font-size: 12.5px; margin-top: 6px; }
.src-card { padding: 26px 24px 28px; }
.src-card .who { font-family: var(--serif); font-size: 21px; color: var(--ink); letter-spacing: 2.5px; font-weight: 700; }
.src-card .role { font-size: 13px; color: #b8913f; letter-spacing: 1.5px; margin: 4px 0 10px; text-transform: uppercase; font-family: var(--latin2); font-weight: 700; }
.src-card p { font-size: 14.5px; color: #4a3a26; line-height: 1.75; }
.genes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gene {
  font-size: 14px; letter-spacing: 1px; padding: 7px 17px;
  border: 1px solid rgba(198, 154, 75, .45); border-radius: 2px;
  background: rgba(198, 154, 75, .1); color: #cfd4de;
}
.gene b { color: var(--gold2); font-weight: 700; }

/* ---------- 三条件 / 三条判断：三联石板栅格 ---------- */
.reverse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.reverse .r-card { padding: 26px 24px 28px; }

/* ---------- 母题 / 四修辞：符文徽 ---------- */
.motifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.motif { padding: 26px 22px; transition: transform .2s, box-shadow .2s; }
.motif:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(198, 154, 75, .12); }
.motif .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--gold2); background: radial-gradient(circle at 40% 30%, #2b3c58, #141d2d);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(230, 196, 119, .22);
  font-family: var(--serif); font-size: 16px; margin-bottom: 14px;
}
.motif svg { width: 22px; height: 22px; stroke: var(--gold2); }
.motif h4 { font-family: var(--serif); font-size: 20px; letter-spacing: 2px; margin: 0 0 8px; font-weight: 700; }
.motif p { font-size: 13.5px; color: var(--ink2); }

/* ---------- 边界判据：封印卷卡 ---------- */
.borders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.border-card { padding: 24px 26px; }
.border-card::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #e6c477, #8a6a2c);
  box-shadow: 0 0 8px rgba(230, 196, 119, .5);
}
.border-card h4 { font-family: var(--serif); font-size: 19px; letter-spacing: 2px; margin-bottom: 4px; font-weight: 700; }
.border-card .vs { font-family: var(--latin2); font-size: 11px; color: var(--gold3); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.border-card p { font-size: 14px; color: var(--ink2); }
.border-card .rule {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed rgba(198, 154, 75, .5);
  font-size: 13px; color: var(--ember); font-weight: 600;
}
.border-card .rule::before { content: "判据 ◆ "; color: var(--gold3); font-weight: 700; }

/* ---------- 坦率判断：先知断语（夜底） ---------- */
.judges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.judge {
  background: linear-gradient(160deg, #1a2435, #111927);
  border: 1px solid rgba(198, 154, 75, .35);
  border-radius: var(--radius);
  padding: 26px 28px 24px 40px; position: relative;
  border-top: 2px solid var(--gold);
  color: #c9cede;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.judge::before {
  content: "“"; position: absolute; left: 8px; top: 8px;
  font-family: var(--serif-latin); font-size: 64px; line-height: 1;
  color: rgba(230, 196, 119, .5); text-shadow: 0 0 18px rgba(230, 196, 119, .25);
}
.judge .jn { font-family: var(--latin2); color: var(--gold2); font-size: 13px; letter-spacing: 2px; display: block; margin-bottom: 10px; text-shadow: 0 0 8px rgba(230, 196, 119, .3); }
.judge p { font-size: 14.5px; color: #b6bbca; }
.judge p b { color: #f4efdf; font-weight: 700; }

/* ---------- 中国平行线 ---------- */
.cn-intro { padding: 26px 30px; }
.cn-intro::before { background: linear-gradient(180deg, var(--copper), #7c4a24); }
.cn-intro p { font-size: 15px; color: var(--ink2); }
.cn-intro p b { color: #8a4a22; font-weight: 700; }

/* ---------- 阅读路径：十诫石板 ---------- */
.readlist { max-width: 820px; margin: 0 auto; display: grid; gap: 11px; }
.read-item {
  display: flex; align-items: baseline; gap: 18px;
  background-image: var(--paper), linear-gradient(165deg, #efe5cb, #dfcfa9 65%, #d2bd8c);
  border: 1px solid rgba(122, 100, 60, .42); border-left: 4px solid var(--gold);
  padding: 14px 22px; border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.read-item .rn {
  font-family: var(--latin2); font-size: 18px; color: var(--gold3); font-weight: 700;
  min-width: 30px; text-align: center;
}
.read-item .rt { font-family: var(--serif); font-size: 16.5px; font-weight: 700; letter-spacing: 1px; }
.read-item .rt small { font-weight: 400; color: var(--muted); font-size: 13px; letter-spacing: 0; margin-left: 8px; }
.read-item .ra { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.read-item .ra.have { color: var(--gold3); font-weight: 700; }

/* ---------- 寻书帖：悬赏令 ---------- */
.wanted-wrap {
  position: relative;
  background-image: var(--paper), linear-gradient(170deg, #efe3be, #ddc690 60%, #cdb276);
  border: 3px solid #3a2f1c;
  border-radius: 4px;
  padding: 30px 28px 34px;
  box-shadow: 0 0 0 3px rgba(198, 154, 75, .4), 0 0 0 6px rgba(10, 15, 25, .9), 0 22px 46px rgba(0, 0, 0, .5), inset 0 0 60px rgba(120, 90, 40, .16);
  color: #2f2817;
}
.wanted-wrap::before, .wanted-wrap::after {
  content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
  background: linear-gradient(45deg, transparent 45%, rgba(58, 47, 28, .9) 50%, transparent 55%);
}
.wanted-wrap::before { top: -3px; left: -3px; transform: rotate(45deg); }
.wanted-wrap::after { bottom: -3px; right: -3px; transform: rotate(225deg); }
.wanted-head {
  text-align: center; margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 3px double #3a2f1c;
}
.wanted-head b {
  display: block; font-family: var(--latin2); font-size: 27px; letter-spacing: 10px;
  color: #3a2f1c; font-weight: 700; text-transform: uppercase;
}
.wanted-head span { display: block; font-size: 13px; letter-spacing: 2px; color: #6b5c3c; margin-top: 4px; font-family: var(--serif); }
.wanted-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wanted-col { display: flex; flex-direction: column; gap: 13px; }
.wanted-col h5 {
  font-family: var(--serif); font-size: 19px; letter-spacing: 4px; color: #3a2f1c;
  display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(58, 47, 28, .5);
}
.wanted-item {
  background: rgba(255, 250, 232, .6);
  border: 1px solid rgba(58, 47, 28, .4);
  border-radius: 2px; padding: 14px 16px; position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 14px rgba(0, 0, 0, .22);
}
.wanted-item b { display: block; font-family: var(--serif); font-size: 16.5px; letter-spacing: 1px; padding-right: 34px; }
.wanted-item p { font-size: 12.8px; color: #5d5138; margin-top: 6px; line-height: 1.75; }
.wanted-item .lv {
  position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  border: 2px solid currentColor; background: rgba(255, 250, 232, .8);
}
.lv.bi { color: #8a6a2c; box-shadow: 0 0 0 3px rgba(138, 106, 44, .18), 0 0 10px rgba(198, 154, 75, .4); }
.lv.jian { color: #5c6672; box-shadow: 0 0 0 3px rgba(92, 102, 114, .16); }
.lv.xuan { color: #8a5a2c; box-shadow: 0 0 0 3px rgba(138, 90, 44, .14); }

/* ---------- 托尔金厅：宝库（暗红绒） ---------- */
.tolkien {
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(230, 196, 119, .13), transparent 55%),
    linear-gradient(160deg, rgba(176, 74, 47, .2), rgba(18, 25, 38, .45)),
    linear-gradient(180deg, #131c2a 0%, #0e1522 100%);
  border: 1px solid var(--night-line); border-radius: 5px;
  padding: 58px 36px 50px; text-align: center; position: relative;
  color: #f0ede4;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.tolkien::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 200px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold2), transparent);
}
.ring {
  width: 92px; height: 44px; margin: 0 auto 20px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ring svg { width: 92px; height: 44px; overflow: visible; filter: drop-shadow(0 0 12px rgba(230, 196, 119, .55)); }
.ring::after {
  content: "驭"; position: absolute; font-family: var(--serif); font-size: 17px; color: #e6c477;
  text-shadow: 0 0 10px rgba(230, 196, 119, .8);
}
.couplet {
  font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); letter-spacing: 9px; line-height: 1.8;
  color: #f6f3ea; font-weight: 700; text-shadow: 0 0 30px rgba(230, 196, 119, .28);
}
.couplet .r { color: var(--gold2); text-shadow: 0 0 30px rgba(230, 196, 119, .55); }
.tolkien .note { margin-top: 18px; color: rgba(240, 237, 228, .6); font-size: 14px; letter-spacing: 1px; }
.tl-years { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
.tl-year {
  font-size: 13.5px; padding: 6px 13px;
  border: 1px solid rgba(230, 196, 119, .45); border-radius: 2px;
  background: rgba(198, 154, 75, .12); color: rgba(240, 237, 228, .92);
}
.tl-year b { color: var(--gold2); margin-right: 4px; font-weight: 600; }

.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tl-card { padding: 20px 18px 16px; transition: transform .18s ease; }
.tl-card:hover { transform: translateY(-3px); }
.tl-card .tl-zi {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--latin2); font-size: 24px; color: var(--gold3); opacity: .85;
  pointer-events: none;
}
.tl-card h4 {
  font-family: var(--serif); font-size: 19px; letter-spacing: 1.5px; margin: 2px 0 4px; color: var(--ink);
  padding-right: 34px; line-height: 1.5; font-weight: 700;
}
.tl-card .tl-yr { font-size: 11px; color: var(--faint); letter-spacing: 1px; font-family: var(--latin2); text-transform: uppercase; }
.tl-card p { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }

/* ---------- 从纸页到世界 ---------- */
.bridge { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; padding: 30px; }
.bridge .arrow { font-size: 32px; color: var(--gold3); text-align: center; font-family: var(--latin2); }
.bridge h4 { font-family: var(--serif); letter-spacing: 2px; margin-bottom: 7px; font-size: 18px; font-weight: 700; }
.bridge p { font-size: 14px; color: var(--ink2); }

/* ---------- 筛选区：夜中金签 ---------- */
.filterbar { margin: 12px 0 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tabs { display: flex; gap: 9px; flex-wrap: wrap; }
.tab {
  border: 1px solid rgba(198, 154, 75, .4); border-radius: 2px; padding: 6px 17px; font-size: 13.5px;
  color: #b9c0cc; cursor: pointer; background: rgba(10, 15, 25, .4); transition: all .2s;
  letter-spacing: 1px; font-family: var(--serif);
}
.tab:hover { color: var(--gold2); border-color: var(--gold); background: rgba(198, 154, 75, .1); }
.tab.on {
  color: #f6edd6;
  background: linear-gradient(180deg, rgba(198, 154, 75, .25), rgba(198, 154, 75, .1));
  border-color: rgba(198, 154, 75, .6); font-weight: 700;
  box-shadow: 0 0 16px rgba(198, 154, 75, .18);
}
.search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(198, 154, 75, .4); border-radius: 2px; padding: 6px 16px;
  background: rgba(10, 15, 25, .5);
}
.search input { background: none; border: none; outline: none; color: #eae3d0; font-size: 14px; width: 172px; font-family: var(--body); }
.search input::placeholder { color: #6f7583; }
.search svg { color: var(--gold2); }
.count-line { width: 100%; font-size: 12.5px; color: #7f8593; letter-spacing: 1px; }

/* ---------- 作家网格（备用） ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 20px; padding-bottom: 40px; }
.acard { padding: 24px 22px 18px; transition: border-color .25s, transform .25s, box-shadow .25s; display: block; }
.acard:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(198, 154, 75, .12); }
.acard .avatar {
  width: 78px; height: 78px; border-radius: 50% / 46%; object-fit: cover;
  border: 2px solid var(--gold2);
  box-shadow: 0 0 0 4px rgba(10, 15, 25, .95), 0 0 0 5px rgba(198, 154, 75, .45), 0 10px 22px rgba(0, 0, 0, .4);
  margin-bottom: 14px; background: #2a3549;
}
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 36px; color: var(--gold2); font-weight: 700;
  background: radial-gradient(circle at 38% 32%, #2b3c58, #121926);
  border: 2px solid var(--gold2); box-shadow: 0 0 0 4px rgba(198, 154, 75, .35);
}
.author-hero .avatar-lg.avatar-fallback { width: 176px; height: 176px; font-size: 80px; border-radius: 50% / 47%; }
.acard h3 { font-family: var(--serif); font-size: 22px; letter-spacing: 2px; font-weight: 700; color: #f1ebda; }
.acard .real { font-size: 12.5px; color: #7f8593; }
.acard .meta { font-size: 12.5px; color: #9aa0ae; margin-top: 4px; }
.acard .locus { font-size: 13px; color: #b9c0cc; margin-top: 12px; border-top: 1px dashed rgba(198, 154, 75, .25); padding-top: 11px; }
.acard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; font-size: 12.5px; color: #7f8593; }
.acard .foot span:last-child { color: var(--gold2); }

/* 徽章 */
.badge {
  display: inline-block; font-size: 11.5px; letter-spacing: 2px; padding: 2px 12px; border-radius: 2px;
  border: 1px solid rgba(198, 154, 75, .55); color: var(--gold2); background: rgba(198, 154, 75, .1);
  font-family: var(--serif);
}
.badge.宗师 { border-color: var(--gold); color: var(--gold2); background: rgba(198, 154, 75, .14); }
.badge.大家 { border-color: rgba(176, 106, 58, .6); color: #dda06f; background: rgba(176, 106, 58, .12); }
.badge.名家 { border-color: rgba(154, 164, 178, .5); color: #b9c0cc; background: rgba(154, 164, 178, .08); }

/* ---------- 作家名录：椭圆画框 + 金带 ---------- */
.roster { border-top: 1px solid rgba(198, 154, 75, .2); }
.rrow { display: flex; align-items: center; gap: 24px; padding: 18px 8px; text-decoration: none;
  border-bottom: 1px dashed rgba(198, 154, 75, .22); transition: background .18s ease; }
.rrow:hover { background: rgba(198, 154, 75, .07); }
.r-avatar {
  position: relative; flex: 0 0 104px; width: 104px; height: 104px;
  border-radius: 50% / 47%;
  background: radial-gradient(circle at 40% 30%, #2b3c58, #121a28);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 2px solid var(--gold2);
  box-shadow: 0 0 0 4px rgba(10, 15, 25, .95), 0 0 0 5px rgba(198, 154, 75, .4), 0 10px 24px rgba(0, 0, 0, .45);
}
.r-avatar img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) contrast(1.06) saturate(.92); }
.r-fb { display: none; font-family: var(--serif); font-size: 42px; color: var(--gold2); opacity: .75; }
.r-avatar.fb .r-fb { display: block; }
.r-main { flex: 1; min-width: 0; }
.r-main b { font-family: var(--serif); font-size: 26px; letter-spacing: 3px; color: #f1ebda; margin-right: 14px; font-weight: 700; text-shadow: 0 1px 14px rgba(230, 196, 119, .15); }
.r-main i { font-style: normal; font-size: 12px; letter-spacing: 1px; color: #7f8593; }
.r-main em { display: block; font-style: normal; font-size: 13px; color: #a8adbb;
  line-height: 1.7; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-side { flex: 0 0 auto; text-align: right; }
.r-side i { display: block; font-style: normal; font-size: 12px; color: #7f8593; margin-bottom: 9px; letter-spacing: 1px; }
.r-side b { display: inline-block; font-family: var(--latin2); font-size: 12px; padding: 3px 13px;
  border: 1px solid rgba(198, 154, 75, .55); color: var(--gold2); letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.r-arrow { flex: 0 0 auto; font-size: 20px; color: var(--gold2); margin-left: 8px; transition: transform .18s ease; }
.rrow:hover .r-arrow { transform: translateX(5px); }

/* ---------- 作品一览：皮面精装书封 ---------- */
.bookwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 30px 20px; }
.bk { cursor: pointer; text-align: center; }
.cover {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px 46px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(230, 196, 119, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bk:hover .cover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 20px 36px rgba(0, 0, 0, .6), 0 0 24px rgba(198, 154, 75, .14); }
.bk.era-开山 .cover { background: linear-gradient(150deg, #7d6430, #57441e); }
.bk.era-探界 .cover { background: linear-gradient(150deg, #486457, #33483d); }
.bk.era-黄金年代 .cover { background: linear-gradient(150deg, #7d4331, #5a2f21); }
.bk.era-新世纪 .cover { background: linear-gradient(150deg, #3b4c66, #293548); }
.cv-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 70%, rgba(230, 196, 119, .25));
}
.cover::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(230, 196, 119, .55);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}
.cover::after {
  content: ""; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(230, 196, 119, .22);
}
.cv-title {
  writing-mode: vertical-rl; font-family: var(--serif); letter-spacing: 4px;
  color: #f2ead6; line-height: 1.12; max-height: calc(100% - 34px); overflow: hidden;
  font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.cv-title.t-lg { font-size: 23px; letter-spacing: 5px; }
.cv-title.t-md { font-size: 16px; letter-spacing: 4px; }
.cv-title.t-sm { font-size: 13px; letter-spacing: 3px; }
.cv-title.t-xs { font-size: 11px; letter-spacing: 2px; }
.cv-vol {
  position: absolute; right: 16px; bottom: 44px; writing-mode: vertical-rl;
  font-size: 10px; color: rgba(230, 196, 119, .9); letter-spacing: 2px;
  font-family: var(--latin2); text-transform: uppercase;
}
.cv-author {
  position: absolute; bottom: 13px; left: 17px; font-size: 10px; letter-spacing: 1px;
  color: rgba(242, 234, 214, .75);
  max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-seal {
  position: absolute; right: 14px; top: 13px; width: 24px; height: 24px;
  color: var(--gold2); font-family: var(--serif); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(230, 196, 119, .7); border-radius: 50%;
  background: rgba(0, 0, 0, .22); text-shadow: 0 0 8px rgba(230, 196, 119, .5);
}
.cv-foot {
  position: absolute; bottom: 14px; right: 16px; font-size: 8.5px; letter-spacing: 2px;
  color: rgba(230, 196, 119, .85); font-family: var(--latin2); text-transform: uppercase;
}
.bk-cap { margin-top: 11px; font-size: 12.5px; color: #d8d2c2; letter-spacing: 1px; }
.bk-cap span { display: block; font-size: 11px; color: #8f94a3; margin-top: 3px; }

/* ---------- 作品卡（作家页/托尔金厅） ---------- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 18px; }
.wcard { padding: 20px 18px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.wcard:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(0, 0, 0, .5), 0 0 20px rgba(198, 154, 75, .1); }
.wcard .fmt {
  position: absolute; top: 14px; right: 14px; font-size: 10px; letter-spacing: 1px;
  padding: 1px 9px; border-radius: 2px; font-weight: 700;
  font-family: var(--latin2); text-transform: uppercase;
}
.wcard .fmt.epub { background: var(--night3); color: var(--gold2); border: 1px solid rgba(198, 154, 75, .45); }
.wcard .fmt.pdf { background: var(--ember); color: #f6e6e3; }
.wcard .wt { font-family: var(--serif); font-size: 16.5px; letter-spacing: .5px; line-height: 1.5; padding-right: 56px; font-weight: 700; }
.wcard .vol { font-size: 12.5px; color: var(--gold3); margin-top: 5px; }
.wcard .wa { font-size: 12.5px; color: var(--muted); margin-top: 9px; border-top: 1px dashed rgba(74, 65, 44, .3); padding-top: 9px; }
.wcard .open-hint { font-size: 12px; color: var(--ember); margin-top: 9px; opacity: .9; }

/* ---------- 作家主页 ---------- */
.author-hero {
  display: flex; gap: 40px; align-items: center; padding: 58px 0 34px; flex-wrap: wrap;
  position: relative; color: #f1ebda;
}
.author-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold2) 30%, var(--gold2) 70%, transparent);
  opacity: .6;
}
.author-hero .avatar-lg {
  width: 180px; height: 180px; border-radius: 50% / 47%; object-fit: cover;
  border: 3px solid var(--gold2);
  box-shadow: 0 0 0 5px rgba(10, 15, 25, .95), 0 0 0 6px rgba(198, 154, 75, .5),
    0 0 34px rgba(230, 196, 119, .22), 0 16px 36px rgba(0, 0, 0, .5);
  background: #2a3549;
}
.author-hero .info h1 { font-family: var(--serif); font-size: 47px; letter-spacing: 5px; font-weight: 700; text-shadow: 0 2px 22px rgba(230, 196, 119, .2); }
.author-hero .info .real { color: #9aa0ae; font-size: 14.5px; margin-top: 5px; letter-spacing: 1px; }
.author-hero .info .meta { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.bio-cols { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 12px 0 8px; }
.bio-block { padding: 28px 30px; }
.bio-block::before { background: linear-gradient(180deg, var(--gold2), var(--gold3)); opacity: .95; }
.bio-block h3 {
  font-family: var(--serif); font-size: 20px; letter-spacing: 4px; color: var(--gold3);
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(74, 65, 44, .3); font-weight: 700;
}
.bio-block p { font-size: 15px; color: var(--ink2); }
/* 西式古籍首字下沉 */
.bio-block p::first-letter {
  font-family: var(--serif); font-size: 3.1em; line-height: .92; float: left;
  margin: .07em .13em 0 0; color: var(--gold3); font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.quote-block {
  font-family: var(--serif); font-size: 22px; line-height: 2; color: #e6dfcd;
  border-left: 4px solid var(--gold); padding: 6px 0 6px 24px; margin: 12px 0;
  letter-spacing: 1.5px; font-weight: 600; text-shadow: 0 1px 14px rgba(230, 196, 119, .14);
}
.works-of-author { margin-top: 28px; }

/* ---------- 页脚：卷尾签名 ---------- */
.footer { border-top: 1px solid rgba(198, 154, 75, .28); padding: 32px 0 42px; margin-top: 34px; position: relative; }
.footer::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold2), transparent);
}
.footer .wrap { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #8f94a3; letter-spacing: 1px; flex-wrap: wrap; gap: 10px; }
.footer .dot { color: var(--gold2); }
.footer span:last-child::before {
  content: "秘境再启"; margin-right: 10px; color: var(--gold2);
  font-family: var(--serif); font-size: 14px; letter-spacing: 3px;
  border: 1px solid rgba(198, 154, 75, .45); border-radius: 2px; padding: 2px 10px;
  text-shadow: 0 0 8px rgba(230, 196, 119, .3);
}

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%) translateY(20px);
  background: rgba(16, 23, 36, .96); color: #eae3d0; padding: 11px 24px; border-radius: 3px;
  font-size: 14px; letter-spacing: 1px; opacity: 0; pointer-events: none;
  transition: all .3s; z-index: 99;
  border: 1px solid rgba(198, 154, 75, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
#toast.show { opacity: .96; transform: translateX(-50%) translateY(0); }

/* ================= 门户首页 · 夜幕卷首 ================= */
.hero-home {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; text-align: center; padding: 130px 26px 90px;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(46, 63, 92, .4), transparent 58%),
    radial-gradient(80% 60% at 50% 100%, rgba(198, 154, 75, .06), transparent 62%);
  color: #f1ebda;
}
.hero-home .hh-brand { position: absolute; top: 26px; left: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.hero-home .hh-brand::before {
  content: "幻"; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; color: var(--gold2);
  background: radial-gradient(circle at 38% 30%, #24344f, #101724);
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 3px rgba(10, 12, 16, .55), 0 0 14px rgba(230, 196, 119, .22);
}
.hero-home .hh-brand .t1 { font-family: var(--serif); font-size: 18px; color: #f0ead8; letter-spacing: 4px; font-weight: 700; }
.hero-home .hh-brand .t2 { font-family: var(--latin2); font-size: 10.5px; letter-spacing: 2px; color: var(--gold2); text-transform: uppercase; }
.hero-home .vquote {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--latin2); font-size: 13px; letter-spacing: 8px;
  color: var(--gold2); text-transform: uppercase; opacity: .92; text-shadow: 0 0 16px rgba(230, 196, 119, .3);
}
.hero-home .kicker {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-size: 10px; letter-spacing: 6px; color: rgba(230, 196, 119, .55);
  font-family: var(--latin2); text-transform: uppercase;
}
.hero-home h1 {
  font-family: var(--serif); font-size: clamp(64px, 9vw, 108px);
  color: #f4efdf; letter-spacing: 14px; margin: 6px 0 14px; font-weight: 700;
  text-shadow: 0 2px 44px rgba(230, 196, 119, .3);
}
.hero-home h1 em { font-style: normal; color: var(--gold2); text-shadow: 0 2px 38px rgba(230, 196, 119, .55); }
.hero-home .subtitle { font-family: var(--serif); font-size: 19px; color: #dcd6c6; letter-spacing: 5px; margin: 0 0 16px; font-weight: 600; }
.hero-home .subtitle b { color: var(--gold2); }
.hero-home .oneline { font-size: 13px; letter-spacing: 1.5px; color: rgba(230, 228, 218, .62); line-height: 2; max-width: 760px; }

/* 四门拱门 */
.hh-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; max-width: 1080px; margin-top: 74px; }
.gate {
  position: relative; display: block; text-align: center; padding: 16px 14px 22px;
  color: #f4efdf; text-decoration: none;
  border: 1px solid rgba(198, 154, 75, .38);
  background: linear-gradient(180deg, rgba(16, 23, 36, .55), rgba(10, 15, 25, .35));
  transition: all .25s ease;
}
.gate::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(198, 154, 75, .16); pointer-events: none; }
.gate .g-arch {
  width: 74px; height: 52px; margin: 4px auto 0; display: block;
  color: var(--gold2); filter: drop-shadow(0 0 8px rgba(230, 196, 119, .28));
  transition: all .25s ease;
}
.gate .g-sym {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; color: #f4efdf;
  filter: drop-shadow(0 0 6px rgba(230, 196, 119, .4));
  transition: all .25s ease;
}
.gate b { display: block; font-family: var(--serif); font-size: 24px; letter-spacing: 5px; margin: 8px 0 6px; font-weight: 700; }
.gate span { display: block; font-size: 12px; letter-spacing: 2px; color: rgba(230, 196, 119, .7); }
.gate i { position: absolute; right: 15px; bottom: 12px; font-style: normal; color: var(--gold2);
  font-size: 15px; transition: right .2s ease; opacity: .8; }
.gate:hover { border-color: var(--gold2); background: linear-gradient(180deg, rgba(31, 44, 64, .75), rgba(16, 23, 36, .6));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 26px rgba(198, 154, 75, .16); transform: translateY(-4px); }
.gate:hover .g-arch { color: var(--gold2); filter: drop-shadow(0 0 14px rgba(230, 196, 119, .6)); }
.gate:hover .g-sym { color: var(--gold2); }
.gate:hover i { right: 8px; }

/* ================= 卷首 hero（发展介绍等深色横幅） ================= */
.hero {
  padding: 96px 0 60px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(46, 63, 92, .42), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(198, 154, 75, .08), transparent 60%);
  color: #f2efe6;
  border-bottom: 2px solid var(--gold);
}
.hero::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(64vw, 720px); height: min(64vw, 720px);
  transform: translate(-50%, -50%);
  opacity: .4; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23e6c477'%3E%3Ccircle cx='400' cy='400' r='330' opacity='.55'/%3E%3Ccircle cx='400' cy='400' r='296' opacity='.22'/%3E%3Ccircle cx='400' cy='400' r='228' opacity='.5'/%3E%3Ccircle cx='400' cy='400' r='158' opacity='.26'/%3E%3Ccircle cx='400' cy='400' r='104' opacity='.5'/%3E%3Cg stroke-width='2.4' opacity='.6'%3E%3Cpath d='M400 62 L400 92 M400 708 L400 738 M62 400 L92 400 M708 400 L738 400'/%3E%3Cpath d='M161 161 L182 182 M639 161 L618 182 M161 639 L182 618 M639 639 L618 618'/%3E%3C/g%3E%3Cg fill='%23e6c477' opacity='.75'%3E%3Cpath d='M400 40 L420 74 L380 74 Z'/%3E%3Cpath d='M400 726 L420 760 L380 760 Z'/%3E%3Cpath d='M40 400 L74 420 L74 380 Z'/%3E%3Cpath d='M726 400 L760 420 L760 380 Z'/%3E%3Cpath d='M160 160 L184 184 L160 184 Z'/%3E%3Cpath d='M616 160 L640 184 L616 184 Z'/%3E%3Cpath d='M160 616 L184 640 L160 640 Z'/%3E%3Cpath d='M616 616 L640 640 L616 640 Z'/%3E%3C/g%3E%3Ccircle cx='400' cy='400' r='12' fill='%23e6c477' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 230' preserveAspectRatio='xMidYMax slice'%3E%3Crect x='0' y='204' width='1440' height='2.5' fill='%23c39a4b' opacity='.6'/%3E%3Cg fill='%232c3d57'%3E%3Cpath d='M0 230 L0 150 L52 150 L52 128 L86 128 L86 150 L140 150 L140 108 L178 108 L178 150 L244 150 L244 132 L286 132 L286 150 L342 150 L342 96 L384 96 L384 150 L450 150 L450 122 L496 122 L496 150 L558 150 L558 104 L600 104 L600 150 L664 150 L664 138 L708 138 L708 150 L770 150 L770 112 L812 112 L812 150 L874 150 L874 100 L916 100 L916 150 L982 150 L982 130 L1026 130 L1026 150 L1088 150 L1088 106 L1130 106 L1130 150 L1194 150 L1194 136 L1238 136 L1238 150 L1300 150 L1300 116 L1342 116 L1342 150 L1400 150 L1400 126 L1440 126 L1440 230 Z'/%3E%3C/g%3E%3Cg fill='%231c2940'%3E%3Cpath d='M0 230 L0 178 L70 178 L70 160 L112 160 L112 178 L196 178 L196 138 L238 138 L238 178 L330 178 L330 162 L382 162 L382 178 L474 178 L474 124 L522 124 L522 178 L618 178 L618 154 L666 154 L666 178 L758 178 L758 132 L806 132 L806 178 L898 178 L898 168 L946 168 L946 178 L1040 178 L1040 144 L1088 144 L1088 178 L1180 178 L1180 158 L1230 158 L1230 178 L1324 178 L1324 148 L1372 148 L1372 178 L1440 178 L1440 230 Z'/%3E%3C/g%3E%3Cg fill='%23e6c477' opacity='.7'%3E%3Ccircle cx='238' cy='164' r='2.6'/%3E%3Ccircle cx='522' cy='150' r='2.6'/%3E%3Ccircle cx='806' cy='152' r='2.6'/%3E%3Ccircle cx='1088' cy='168' r='2.6'/%3E%3Ccircle cx='1372' cy='172' r='2.6'/%3E%3Ccircle cx='946' cy='178' r='2.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 42%, rgba(198, 154, 75, .1) 100%);
  background-repeat: no-repeat, no-repeat; background-size: 100% 100%, 100% 100%;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* 金徽章（左侧纹章） */
.crest {
  position: absolute; z-index: 2;
  top: 32px; left: calc(50% - 292px);
  width: 66px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold2);
  font-family: var(--serif); font-size: 30px;
  background: radial-gradient(circle at 38% 32%, #2a3a55, #101724);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px var(--gold), inset 0 0 0 5px rgba(10, 12, 16, .55),
    inset 0 0 26px rgba(230, 196, 119, .18), 0 8px 22px rgba(0, 0, 0, .55);
  text-shadow: 0 0 14px rgba(230, 196, 119, .55);
}
.crest::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(230, 196, 119, .5); border-radius: 50%; }

/* 右侧竖排拉丁题铭 */
.vquote {
  position: absolute; z-index: 2;
  top: 44px; right: calc(50% - 312px);
  writing-mode: vertical-rl;
  font-family: var(--latin2);
  font-size: 12px; letter-spacing: 9px;
  color: rgba(230, 196, 119, .92); opacity: .95;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(230, 196, 119, .35);
}
.vquote::before {
  content: ""; position: absolute; top: -16px; bottom: -16px; left: -9px;
  border-left: 1px solid rgba(230, 196, 119, .45);
}

.hero .kicker {
  display: inline-block; font-family: var(--latin2);
  font-size: 11px; letter-spacing: 6px; color: rgba(230, 196, 119, .95);
  text-transform: uppercase;
  border: 1px solid rgba(230, 196, 119, .55); border-radius: 2px;
  padding: 6px 20px 5px; margin-bottom: 28px;
  background: rgba(198, 154, 75, .1);
}
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(48px, 7.2vw, 82px);
  letter-spacing: 16px; line-height: 1.1; color: #f6f3ea;
  text-shadow: 0 2px 34px rgba(230, 196, 119, .25);
}
.hero h1 em { font-style: normal; color: var(--gold2); text-shadow: 0 2px 30px rgba(230, 196, 119, .45); }
.hero .subtitle {
  margin: 24px auto 0; max-width: 680px;
  color: rgba(246, 243, 234, .9); font-size: 18px; letter-spacing: 3px;
  font-family: var(--serif);
}
.hero .subtitle b { color: var(--gold2); font-weight: 600; }
.hero .oneline { margin: 16px auto 0; max-width: 720px; color: rgba(246, 243, 234, .55); font-size: 14.5px; font-family: var(--body); }

.stats { display: flex; justify-content: center; margin-top: 48px; flex-wrap: wrap; position: relative; z-index: 1; }
.stat { padding: 0 40px; border-right: 1px solid rgba(230, 196, 119, .3); }
.stat:first-child { border-left: 1px solid rgba(230, 196, 119, .3); }
.stat b { display: block; font-family: var(--latin2); font-size: 34px; color: var(--gold2); font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 20px rgba(230, 196, 119, .4); }
.stat span { font-size: 12px; color: rgba(246, 243, 234, .6); letter-spacing: 3px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .crest { left: 18px; }
  .vquote { display: none; }
}
@media (max-width: 860px) {
  body::before { opacity: .55; }
  .reverse, .motifs, .borders, .judges { grid-template-columns: 1fr; }
  .sources { grid-template-columns: 1fr; }
  .src-center { grid-row: auto; grid-column: auto; }
  .bridge { grid-template-columns: 1fr; }
  .bridge .arrow { transform: rotate(90deg); }
  .wanted-cols { grid-template-columns: 1fr; }
  .author-hero .avatar-lg { width: 132px; height: 132px; }
  .stat { padding: 0 22px; }
  .nav { gap: 6px; font-size: 13px; }
  .hero { padding-top: 76px; }
  .hub { grid-template-columns: 1fr; }
  .read-item { flex-wrap: wrap; row-gap: 6px; }
  .read-item .ra { margin-left: 0; }
  .topbar .wrap { flex-wrap: wrap; height: auto; padding: 10px 18px; row-gap: 8px; }
  .topbar .nav { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
  .brand { margin-right: auto; }
  /* 窄窗时间轴排版：降字号 + 均匀断行，避免标题被生硬拆词 */
  .tnode h4 { font-size: 18px; letter-spacing: 1px; text-wrap: balance; }
  .tnode .when { letter-spacing: 1.4px; }
  .era-band { font-size: 20px; letter-spacing: 3px; text-wrap: balance; }
  .era-band small { display: block; margin-left: 0; margin-top: 5px; letter-spacing: 2px; }
}
@media (max-width: 860px) {
  .hero-home { padding: 132px 18px 72px; }
  .hero-home h1 { font-size: 60px; letter-spacing: 9px; }
  .hero-home .vquote, .hero-home .kicker { display: none; }
  .hh-nav { grid-template-columns: repeat(2, 1fr); margin-top: 54px; gap: 13px; }
  .pagehead h1 { font-size: 36px; }
  .rrow { flex-wrap: wrap; gap: 14px; }
  .r-avatar { flex-basis: 86px; width: 86px; height: 86px; }
  .r-side { display: none; }
  .bookwall { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
  .r-main b { display: block; white-space: nowrap; margin-right: 0; }
  .r-main i { display: block; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .src-big::before { animation: none; }
}