/* ═══════════════════════════════════════════════════════════
   topics.css — "论"层共享样式（专题馆 · 山中八题）  2026-10-15 13:12
   殿亮（米色/铁锈），论暗（深绿/金）。此文件只服务 /topics.html
   与 /topics/*.html 四篇专题；不改动站内既有一切样式。
   ═══════════════════════════════════════════════════════════ */
:root{
  --tp-forest:#1e2d23;
  --tp-forest-2:#2a3f30;
  --tp-moss:#5a7a66;
  --tp-gold:#c4a46a;
  --tp-rust:#b8764a;
  --tp-cream:#faf7f2;
  --tp-stone:#d4cbbf;
  --tp-ink:#2c2822;
  --tp-ink-light:#5a5248;
  --tp-mute:#8a847d;
  --tp-serif:'Noto Serif SC','Songti SC','STSong','宋体','SimSun',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--tp-forest);
  color:var(--tp-ink);
  font-family:var(--tp-serif);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--tp-forest-2);color:var(--tp-cream);}

/* ── 题头 ── */
.tp-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:88px 24px 64px;
  background:linear-gradient(165deg,#16211a 0%,var(--tp-forest) 46%,#24382b 100%);
}
.tp-hero::before{
  content:attr(data-mark);
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  font-size:clamp(9rem,26vw,20rem);font-weight:900;line-height:1;
  color:rgba(196,164,106,0.055);pointer-events:none;user-select:none;
  font-family:var(--tp-serif);
}
.tp-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.tp-no{display:block;font-size:0.72rem;letter-spacing:0.5em;color:var(--tp-gold);margin-bottom:1.3rem;}
.tp-title{
  font-size:clamp(1.65rem,4.6vw,2.55rem);font-weight:900;letter-spacing:0.12em;
  color:rgba(250,247,242,0.96);line-height:1.5;margin-bottom:1.1rem;
}
.tp-q{
  font-size:0.98rem;color:rgba(250,247,242,0.62);letter-spacing:0.05em;
  line-height:2.1;max-width:600px;margin:0 auto;
}
.tp-q b{color:var(--tp-gold);font-weight:700;}
.tp-count{
  display:inline-block;margin-top:1.9rem;padding:0.42rem 1.1rem;
  border:1px solid rgba(196,164,106,0.35);border-radius:2px;
  font-size:0.74rem;letter-spacing:0.2em;color:var(--tp-gold);
}
.tp-count a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(196,164,106,0.3);}

/* ── 正文壳 ── */
.tp-body{background:var(--tp-cream);}
.tp-wrap{max-width:780px;margin:0 auto;padding:58px 26px 30px;}
.tp-sec{margin-bottom:46px;}
.tp-sec h2{
  font-size:1.22rem;font-weight:700;letter-spacing:0.16em;color:var(--tp-forest);
  padding-left:0.85rem;border-left:3px solid var(--tp-gold);
  margin-bottom:1.5rem;line-height:1.6;
}
.tp-sec h3{
  font-size:1.02rem;font-weight:700;letter-spacing:0.1em;color:var(--tp-forest-2);
  margin:1.9rem 0 0.9rem;
}
.tp-sec p{
  font-size:1rem;line-height:2.15;letter-spacing:0.02em;color:#3a3630;
  margin-bottom:1.15rem;text-indent:2em;
}
.tp-sec p.ni{text-indent:0;}
.tp-sec strong{color:var(--tp-forest);font-weight:700;}
.tp-sec em{font-style:normal;color:var(--tp-rust);}

/* ── 原典引文 ── */
.tp-quote{
  background:#fff;border-left:3px solid var(--tp-gold);
  padding:22px 26px;margin:30px 0;
  box-shadow:0 2px 10px rgba(30,45,35,0.045);
}
.tp-quote p{
  text-indent:0;font-size:1.05rem;line-height:2.05;color:var(--tp-ink);
  letter-spacing:0.06em;margin:0;
}
.tp-quote .src{
  display:block;margin-top:0.75rem;font-size:0.76rem;color:var(--tp-mute);
  letter-spacing:0.12em;text-indent:0;
}

/* ── 反诘块 ── */
.tp-ask{
  border:1px solid rgba(196,164,106,0.5);border-radius:4px;
  background:rgba(196,164,106,0.07);
  padding:20px 24px;margin:30px 0;
}
.tp-ask .lbl{
  display:block;font-size:0.68rem;letter-spacing:0.36em;color:var(--tp-rust);
  margin-bottom:0.7rem;
}
.tp-ask p{
  text-indent:0;font-size:0.97rem;line-height:2.05;color:#3d4a3f;margin:0;
  letter-spacing:0.04em;
}

/* ── 留给你的一问 ── */
.tp-juan{
  margin:56px 0 26px;padding:28px 26px 24px;
  background:linear-gradient(180deg,#f3efe7 0%,#ece6dc 100%);
  border:1px solid var(--tp-stone);border-radius:6px;
}
.tp-juan .lbl{
  display:block;font-size:0.68rem;letter-spacing:0.36em;color:var(--tp-moss);
  margin-bottom:0.75rem;
}
.tp-juan .qq{
  font-size:1.05rem;font-weight:700;color:var(--tp-forest);
  letter-spacing:0.06em;line-height:1.9;margin-bottom:1.15rem;
}
.tp-juan textarea{
  width:100%;min-height:82px;padding:12px 14px;
  font-family:var(--tp-serif);font-size:0.95rem;line-height:1.9;color:var(--tp-ink);
  background:#fff;border:1px solid var(--tp-stone);border-radius:4px;resize:vertical;
}
.tp-juan textarea:focus{outline:none;border-color:var(--tp-gold);}
.tp-juan .row{display:flex;align-items:center;gap:1rem;margin-top:0.9rem;flex-wrap:wrap;}
.tp-juan button{
  padding:9px 26px;background:var(--tp-forest);color:var(--tp-cream);
  border:none;border-radius:3px;font-family:var(--tp-serif);
  font-size:0.8rem;letter-spacing:0.22em;cursor:pointer;transition:background 0.3s;
}
.tp-juan button:hover{background:var(--tp-forest-2);}
.tp-juan-msg{font-size:0.76rem;color:var(--tp-moss);letter-spacing:0.06em;min-height:1.3em;}
.tp-juan .note{font-size:0.72rem;color:var(--tp-mute);letter-spacing:0.04em;margin-top:0.6rem;text-indent:0;}

/* ── 互链 ── */
.tp-links{margin-top:52px;padding-top:30px;border-top:1px solid rgba(0,0,0,0.08);list-style:none;}
.tp-links .ttl{
  font-size:0.7rem;letter-spacing:0.36em;color:var(--tp-mute);margin-bottom:1rem;
}
.tp-links li{padding:13px 0;border-bottom:1px dashed rgba(0,0,0,0.075);}
.tp-links li:last-child{border-bottom:none;}
.tp-links a{
  color:var(--tp-ink);text-decoration:none;font-size:0.95rem;letter-spacing:0.04em;
  border-bottom:1px solid rgba(184,118,74,0.35);transition:color 0.3s,border-color 0.3s;
}
.tp-links a:hover{color:var(--tp-rust);border-color:var(--tp-rust);}
.tp-links .d{display:block;font-size:0.78rem;color:var(--tp-mute);margin-top:5px;letter-spacing:0.02em;}

/* ── 页脚 ── */
.tp-foot{
  text-align:center;padding:44px 22px 60px;font-size:0.72rem;
  color:rgba(250,247,242,0.42);background:var(--tp-forest);letter-spacing:0.04em;
}
.tp-foot a{color:rgba(196,164,106,0.75);text-decoration:none;}
.tp-foot a:hover{color:var(--tp-gold);}
.tp-exit{text-align:center;padding:34px 20px 8px;}
.tp-exit a{
  display:inline-block;margin:0.35rem 0.4rem;padding:10px 26px;
  border:1px solid rgba(184,118,74,0.35);border-radius:3px;
  font-size:0.78rem;letter-spacing:0.18em;color:var(--tp-rust);text-decoration:none;
  transition:all 0.3s;
}
.tp-exit a:hover{background:rgba(184,118,74,0.07);border-color:var(--tp-rust);}

/* ── 总纲：八题卡片 ── */
.tp-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:1.1rem;margin-top:2rem;
}
.tp-card{
  position:relative;display:block;padding:1.4rem 1.25rem 1.25rem;
  background:#fff;border:1px solid var(--tp-stone);border-radius:6px;
  text-decoration:none;transition:all 0.32s;text-align:left;
}
.tp-card:hover{border-color:var(--tp-gold);transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,45,35,0.10);}
.tp-card .no{font-size:0.66rem;letter-spacing:0.34em;color:var(--tp-gold);}
.tp-card .nm{
  font-size:1.03rem;font-weight:700;color:var(--tp-forest);
  letter-spacing:0.06em;margin:0.5rem 0 0.55rem;line-height:1.6;
}
.tp-card .qq{font-size:0.82rem;line-height:1.9;color:#6b6459;letter-spacing:0.015em;}
.tp-card .tags{margin-top:0.85rem;font-size:0.68rem;color:var(--tp-moss);letter-spacing:0.1em;}
.tp-card .badge{
  position:absolute;top:1.15rem;right:1.15rem;font-size:0.6rem;letter-spacing:0.16em;
  padding:0.14rem 0.42rem;border-radius:2px;
}
.tp-card .badge.lun{background:var(--tp-forest);color:var(--tp-gold);}
.tp-card .badge.dian{background:rgba(90,122,102,0.12);color:var(--tp-moss);}
.tp-card .dot{
  position:absolute;bottom:1.15rem;right:1.15rem;font-size:0.66rem;
  color:#c9c2b6;letter-spacing:0.06em;
}
.tp-card .dot.on{color:var(--tp-gold);}
.tp-card.is-new::after{
  content:'';position:absolute;left:0;top:1.15rem;bottom:1.15rem;width:3px;
  background:var(--tp-gold);border-radius:0 2px 2px 0;
}
.tp-ledge{
  max-width:980px;margin:0 auto;padding:56px 26px 20px;
}
.tp-ledge .lead{
  font-size:0.95rem;line-height:2.1;color:var(--tp-ink-light);letter-spacing:0.03em;
  text-align:center;max-width:640px;margin:0 auto 0.6rem;text-indent:0;
}
.tp-ledge .rule{width:38px;height:1px;background:var(--tp-gold);margin:2.2rem auto 0;opacity:0.6;}

@media (max-width:768px){
  .tp-hero{padding:64px 20px 50px;}
  .tp-hero::before{display:none;}
  .tp-title{letter-spacing:0.08em;}
  .tp-wrap{padding:42px 20px 24px;}
  .tp-sec p{font-size:0.97rem;}
  .tp-quote{padding:18px 18px;}
  .tp-ledge{padding:40px 18px 16px;}
  .tp-grid{grid-template-columns:1fr;}
}