/* ========================================
   毛泽东诗词·从少年到长征
   红色革命 + 山水墨韵融合
   ======================================== */

:root {
  --red-primary: #8B0000;
  --red-deep: #5C0000;
  --red-light: #C4151C;
  --ink-black: #1A1A1A;
  --ink-deep: #2D2D2D;
  --ink-gray: #555;
  --ink-light: #888;
  --paper: #F5F0E6;
  --paper-dark: #EDE5D3;
  --paper-cream: #FAF6EE;
  --gold: #C9A227;
  --gold-light: #E0C25A;
  --gold-deep: #9B7D1A;
  --border-soft: #D4C9B0;
  --shadow-soft: 0 4px 20px rgba(139,0,0,0.08);
  --shadow-medium: 0 8px 30px rgba(139,0,0,0.12);
  --radius-card: 22px;
  --radius-sm: 12px;
  --container-width: 1100px;
  --font-cn: "PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif: "Noto Serif SC","SimSun","Songti SC",serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-cn); background:var(--paper); color:var(--ink-deep); line-height:1.8; font-size:16px; overflow-x:hidden; }

body::before {
  content:''; position:fixed; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(circle at 20% 50%,rgba(139,0,0,0.02) 0%,transparent 50%),
             radial-gradient(circle at 80% 80%,rgba(201,162,39,0.03) 0%,transparent 50%),
             repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(0,0,0,0.008) 2px,rgba(0,0,0,0.008) 4px);
  pointer-events:none; z-index:0;
}

a { color:var(--red-primary); text-decoration:none; transition:color 0.3s; }
a:hover { color:var(--red-light); }

/* 导航栏 */
.navbar { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(92,0,0,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:1000; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 20px rgba(0,0,0,0.15); border-bottom:1px solid var(--gold-deep); }
.navbar-inner { width:100%; max-width:var(--container-width); display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.navbar-logo { font-family:var(--font-serif); font-size:18px; font-weight:700; color:var(--gold-light); letter-spacing:2px; white-space:nowrap; }
.navbar-logo span { color:rgba(255,255,255,0.7); font-size:13px; margin-left:6px; }
.navbar-links { display:flex; gap:4px; align-items:center; }
.navbar-links a { color:rgba(255,255,255,0.8); font-size:14px; padding:6px 12px; border-radius:8px; transition:all 0.3s; white-space:nowrap; }
.navbar-links a:hover { color:var(--gold-light); background:rgba(201,162,39,0.15); }
.navbar-links a.active { color:var(--gold-light); background:rgba(201,162,39,0.18); }
.navbar-toggle { display:none; flex-direction:column; gap:4px; cursor:pointer; padding:8px; }
.navbar-toggle span { width:22px; height:2px; background:var(--gold-light); border-radius:2px; transition:0.3s; }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 24px 60px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--red-deep) 0%,var(--red-primary) 40%,var(--red-deep) 100%); z-index:-2; }
.hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,rgba(201,162,39,0.12) 0%,transparent 60%),radial-gradient(circle at 70% 60%,rgba(201,162,39,0.08) 0%,transparent 50%); }
.hero-bg::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(201,162,39,0.04) 60px,rgba(201,162,39,0.04) 61px); }
.hero-content { max-width:800px; z-index:1; }
.hero-eyebrow { font-size:14px; letter-spacing:8px; color:var(--gold-light); margin-bottom:20px; opacity:0; animation:fadeInUp 0.8s 0.2s forwards; }
.hero-title { font-family:var(--font-serif); font-size:clamp(36px,6vw,60px); font-weight:800; color:#fff; line-height:1.3; margin-bottom:16px; text-shadow:0 4px 30px rgba(0,0,0,0.4); opacity:0; animation:fadeInUp 0.8s 0.4s forwards; }
.hero-subtitle { font-size:clamp(15px,2.5vw,18px); color:rgba(255,255,255,0.75); line-height:1.8; margin-bottom:40px; opacity:0; animation:fadeInUp 0.8s 0.6s forwards; }
.hero-stats { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; opacity:0; animation:fadeInUp 0.8s 0.8s forwards; }
.hero-stat { text-align:center; }
.hero-stat-num { font-family:var(--font-serif); font-size:36px; font-weight:700; color:var(--gold-light); }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,0.6); margin-top:4px; }
.hero-scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.5); font-size:24px; animation:bounce 2s infinite; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-10px);} }

/* Section */
.section { position:relative; padding:80px 24px; z-index:1; }
.section-inner { max-width:var(--container-width); margin:0 auto; }
.section-header { text-align:center; margin-bottom:56px; }
.section-tag { display:inline-block; font-size:13px; letter-spacing:4px; color:var(--gold-deep); padding:4px 16px; border:1px solid var(--border-soft); border-radius:100px; margin-bottom:16px; }
.section-title { font-family:var(--font-serif); font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--red-deep); margin-bottom:12px; }
.section-desc { font-size:15px; color:var(--ink-gray); max-width:600px; margin:0 auto; line-height:1.8; }

/* 章节目录卡片 */
.chapter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.chapter-card { background:var(--paper-cream); border-radius:var(--radius-card); padding:32px 28px; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); transition:all 0.4s; cursor:pointer; display:flex; flex-direction:column; min-height:240px; }
.chapter-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-medium); border-color:var(--gold); }
.chapter-card-num { font-family:var(--font-serif); font-size:14px; color:var(--gold-deep); letter-spacing:2px; margin-bottom:8px; }
.chapter-card-title { font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--red-deep); margin-bottom:10px; }
.chapter-card-desc { font-size:14px; color:var(--ink-gray); line-height:1.8; flex:1; }
.chapter-card-arrow { margin-top:16px; font-size:13px; color:var(--red-primary); font-weight:600; }

/* 诗词时间线 */
.timeline-box { background:var(--paper-cream); border-radius:var(--radius-card); padding:40px; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); margin:32px 0; }
.timeline-svg { width:100%; max-width:1000px; margin:0 auto; display:block; }

/* 诗词卡片 */
.poem-card { background:var(--paper-cream); border-radius:var(--radius-card); padding:40px; margin-bottom:32px; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); }
.poem-card h3 { font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--red-deep); margin-bottom:4px; }
.poem-meta { font-size:13px; color:var(--gold-deep); margin-bottom:20px; }
.poem-text { font-family:var(--font-serif); font-size:18px; line-height:2.2; color:var(--ink-deep); text-align:center; padding:24px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); margin:20px 0; }
.poem-text p { margin-bottom:8px; }
.poem-bg-context { background:linear-gradient(135deg,rgba(139,0,0,0.03),rgba(201,162,39,0.05)); border-radius:var(--radius-sm); padding:24px; margin:20px 0; }
.poem-bg-context h4 { font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--red-deep); margin-bottom:12px; padding-left:12px; border-left:3px solid var(--gold); }
.poem-bg-context p { font-size:15px; line-height:2; color:var(--ink-deep); margin-bottom:12px; }
.poem-bg-context p strong { color:var(--red-primary); font-weight:600; }

.poem-mood { background:linear-gradient(135deg,rgba(201,162,39,0.06),rgba(139,0,0,0.03)); border-radius:var(--radius-sm); padding:24px; margin:20px 0; border-left:4px solid var(--gold); }
.poem-mood h4 { font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--gold-deep); margin-bottom:12px; }
.poem-mood p { font-size:15px; line-height:2; color:var(--ink-deep); margin-bottom:10px; }

.poem-analysis { margin-top:20px; }
.poem-analysis h4 { font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--red-deep); margin:20px 0 10px; padding-left:12px; border-left:3px solid var(--red-primary); }
.poem-analysis p { font-size:15px; line-height:2; color:var(--ink-deep); margin-bottom:12px; }
.poem-analysis p strong { color:var(--red-primary); }

/* 引言块 */
.quote-block { background:linear-gradient(135deg,rgba(139,0,0,0.04),rgba(201,162,39,0.06)); border-left:4px solid var(--red-primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 28px; margin:20px 0; }
.quote-block p { font-family:var(--font-serif); font-size:16px; color:var(--red-deep); font-style:italic; line-height:1.9; margin:0; }
.quote-block .quote-author { font-size:13px; color:var(--gold-deep); margin-top:8px; text-align:right; }

/* 示意图 */
.diagram-box { background:var(--paper-cream); border-radius:var(--radius-card); padding:32px; margin:24px 0; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); text-align:center; }
.diagram-box-title { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--red-deep); margin-bottom:16px; }
.diagram-svg { width:100%; max-width:640px; margin:0 auto; display:block; }
.diagram-caption { font-size:13px; color:var(--ink-light); margin-top:12px; }

/* 篇章横幅 */
.chapter-banner { background:linear-gradient(135deg,var(--red-deep),var(--red-primary)); border-radius:var(--radius-card); padding:40px 36px; margin-bottom:32px; position:relative; overflow:hidden; }
.chapter-banner::after { content:''; position:absolute; top:0; right:0; width:200px; height:200px; background:radial-gradient(circle,rgba(201,162,39,0.15) 0%,transparent 70%); }
.chapter-banner-num { font-family:var(--font-serif); font-size:14px; color:var(--gold-light); letter-spacing:3px; margin-bottom:8px; }
.chapter-banner-title { font-family:var(--font-serif); font-size:28px; font-weight:700; color:#fff; margin-bottom:8px; }
.chapter-banner-desc { font-size:15px; color:rgba(255,255,255,0.75); line-height:1.8; }

/* 启发卡片 */
.insight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:24px 0; }
.insight-card { background:linear-gradient(135deg,rgba(139,0,0,0.03),rgba(201,162,39,0.05)); border-radius:var(--radius-sm); padding:24px; border:1px solid var(--border-soft); }
.insight-card-icon { font-size:28px; margin-bottom:12px; }
.insight-card-title { font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--red-deep); margin-bottom:8px; }
.insight-card-text { font-size:14px; color:var(--ink-gray); line-height:1.8; }

/* 页脚 */
.footer { background:var(--red-deep); padding:48px 24px 32px; text-align:center; position:relative; z-index:1; }
.footer p { color:rgba(255,255,255,0.6); font-size:13px; line-height:1.8; margin-bottom:8px; }
.footer-divider { width:60px; height:2px; background:var(--gold-deep); margin:0 auto 20px; border-radius:2px; }

/* 渐入 */
.fade-in { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* 打印 */
@media print {
  body { background:#fff; font-size:12pt; }
  .navbar,.hero-scroll,.footer { display:none; }
  .hero { min-height:auto; padding:20px; page-break-after:always; }
  .section { padding:20px 0; page-break-inside:avoid; }
  .poem-card { page-break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
  .chapter-banner { background:#8B0000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .fade-in { opacity:1; transform:none; }
  a { color:#000; }
}

/* 响应式 */
@media (max-width:768px) {
  .navbar-toggle { display:flex; }
  .navbar-links { position:fixed; top:64px; left:0; right:0; background:rgba(92,0,0,0.97); flex-direction:column; padding:16px; gap:4px; transform:translateY(-100%); transition:transform 0.3s; z-index:999; }
  .navbar-links.open { transform:translateY(0); }
  .navbar-links a { padding:12px 16px; font-size:15px; }
  .chapter-grid { grid-template-columns:1fr; }
  .insight-grid { grid-template-columns:1fr; }
  .poem-card { padding:24px 20px; }
  .chapter-banner { padding:28px 24px; }
  .section { padding:60px 16px; }
  .hero-stats { gap:24px; }
  .hero-stat-num { font-size:28px; }
  .timeline-box { padding:24px 16px; }
  .diagram-box { padding:20px 16px; }
}
@media (max-width:480px) {
  .section-title { font-size:24px; }
  .chapter-banner-title { font-size:22px; }
  .poem-card h3 { font-size:20px; }
  .hero-title { font-size:30px; }
  .poem-text { font-size:16px; }
}