/* ========================================
   死前必吃·人生必尝美食完全指南
   暖色美食杂志风，大图卡片
   ======================================== */

:root {
  --orange-primary: #D4641C;
  --orange-deep: #A84A0E;
  --orange-light: #E8853A;
  --warm-yellow: #E8B547;
  --warm-cream: #FFF8EE;
  --warm-paper: #FDF5E6;
  --warm-dark: #2D1B0E;
  --warm-gray: #6B5544;
  --warm-light: #A89080;
  --red-accent: #C4202B;
  --green-fresh: #4A7C3A;
  --border-soft: #E0D0BC;
  --shadow-soft: 0 4px 20px rgba(168,74,14,0.1);
  --shadow-medium: 0 8px 30px rgba(168,74,14,0.15);
  --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(--warm-paper); color:var(--warm-dark); line-height:1.8; font-size:16px; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(circle at 20% 50%,rgba(212,100,28,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(232,181,71,0.04) 0%,transparent 50%); pointer-events:none; z-index:0; }
a { color:var(--orange-deep); text-decoration:none; transition:color 0.3s; }
a:hover { color:var(--orange-primary); }

/* 导航 */
.navbar { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(45,27,14,0.95); 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.1); border-bottom:1px solid var(--orange-primary); }
.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(--warm-yellow); letter-spacing:2px; white-space:nowrap; }
.navbar-logo span { color:rgba(255,248,238,0.5); font-size:13px; margin-left:6px; }
.navbar-links { display:flex; gap:4px; align-items:center; }
.navbar-links a { color:rgba(255,248,238,0.7); font-size:14px; padding:6px 12px; border-radius:8px; transition:all 0.3s; white-space:nowrap; }
.navbar-links a:hover { color:var(--warm-yellow); background:rgba(232,181,71,0.1); }
.navbar-links a.active { color:var(--warm-yellow); background:rgba(232,181,71,0.15); }
.navbar-toggle { display:none; flex-direction:column; gap:4px; cursor:pointer; padding:8px; }
.navbar-toggle span { width:22px; height:2px; background:var(--warm-yellow); 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(--orange-deep) 0%,var(--orange-primary) 40%,var(--orange-deep) 100%); z-index:-2; }
.hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,rgba(232,181,71,0.15) 0%,transparent 60%); }
.hero-content { max-width:800px; z-index:1; }
.hero-eyebrow { font-size:14px; letter-spacing:8px; color:var(--warm-yellow); 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.3); 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(--warm-yellow); }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,0.5); margin-top:4px; }
.hero-scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.4); 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(--orange-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(--orange-deep); margin-bottom:12px; }
.section-desc { font-size:15px; color:var(--warm-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(--warm-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(--orange-primary); }
.chapter-card-num { font-family:var(--font-serif); font-size:14px; color:var(--orange-light); letter-spacing:2px; margin-bottom:8px; }
.chapter-card-title { font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--orange-deep); margin-bottom:10px; }
.chapter-card-desc { font-size:14px; color:var(--warm-gray); line-height:1.8; flex:1; }
.chapter-card-arrow { margin-top:16px; font-size:13px; color:var(--orange-primary); font-weight:600; }

/* 篇章横幅 */
.chapter-banner { background:linear-gradient(135deg,var(--orange-deep),var(--orange-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(232,181,71,0.15) 0%,transparent 70%); }
.chapter-banner-num { font-family:var(--font-serif); font-size:14px; color:var(--warm-yellow); 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.7); line-height:1.8; }

/* 美食卡片 */
.food-card { background:var(--warm-cream); border-radius:var(--radius-card); padding:36px; margin-bottom:32px; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); }
.food-card h3 { font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--orange-deep); margin-bottom:4px; }
.food-card h4 { font-size:17px; font-weight:600; color:var(--warm-dark); margin:20px 0 10px; padding-left:12px; border-left:3px solid var(--orange-primary); }
.food-card p { font-size:15px; line-height:2; color:var(--warm-dark); margin-bottom:14px; }
.food-card p strong { color:var(--orange-deep); font-weight:600; }
.food-card ul, .food-card ol { margin:10px 0 14px 20px; }
.food-card li { font-size:15px; line-height:2; color:var(--warm-dark); margin-bottom:6px; }
.food-meta { font-size:13px; color:var(--orange-light); margin-bottom:20px; }

/* 引言块 */
.quote-block { background:linear-gradient(135deg,rgba(212,100,28,0.04),rgba(232,181,71,0.06)); border-left:4px solid var(--orange-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(--orange-deep); font-style:italic; line-height:1.9; margin:0; }
.quote-block .quote-author { font-size:13px; color:var(--orange-light); margin-top:8px; text-align:right; }

/* 必吃标签 */
.must-eat-tag { display:inline-block; font-size:12px; padding:4px 12px; border-radius:100px; background:rgba(196,32,43,0.08); color:var(--red-accent); font-weight:600; margin-bottom:12px; }

/* 美食地图示意 */
.diagram-box { background:var(--warm-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(--orange-deep); margin-bottom:16px; }
.diagram-svg { width:100%; max-width:640px; margin:0 auto; display:block; }
.diagram-caption { font-size:13px; color:var(--warm-light); margin-top:12px; }

/* 对比表 */
.compare-table { width:100%; border-collapse:collapse; margin:20px 0; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-soft); }
.compare-table th { background:var(--orange-deep); color:var(--warm-yellow); font-size:14px; font-weight:600; padding:14px 18px; text-align:left; }
.compare-table td { background:var(--warm-cream); font-size:14px; padding:14px 18px; border-bottom:1px solid var(--border-soft); line-height:1.8; color:var(--warm-dark); }
.compare-table tr:last-child td { border-bottom:none; }

/* 启发卡片 */
.insight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:24px 0; }
.insight-card { background:linear-gradient(135deg,rgba(212,100,28,0.04),rgba(232,181,71,0.06)); 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(--orange-deep); margin-bottom:8px; }
.insight-card-text { font-size:14px; color:var(--warm-gray); line-height:1.8; }

/* 页脚 */
.footer { background:var(--warm-dark); padding:48px 24px 32px; text-align:center; position:relative; z-index:1; }
.footer p { color:rgba(255,248,238,0.5); font-size:13px; line-height:1.8; margin-bottom:8px; }
.footer-divider { width:60px; height:2px; background:var(--orange-primary); 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; }
  .food-card { page-break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
  .chapter-banner { background:#A84A0E !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(45,27,14,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; }
  .food-card { padding:24px 20px; }
  .chapter-banner { padding:28px 24px; }
  .section { padding:60px 16px; }
  .hero-stats { gap:24px; }
  .hero-stat-num { font-size:28px; }
  .diagram-box { padding:20px 16px; }
  .compare-table { font-size:12px; }
  .compare-table th, .compare-table td { padding:10px 12px; }
}
@media (max-width:480px) {
  .section-title { font-size:24px; }
  .chapter-banner-title { font-size:22px; }
  .food-card h3 { font-size:20px; }
  .hero-title { font-size:30px; }
}