/* ============================================
   PEWDO - 精美杂志级排版 CSS v12
   空间感 · 卡片层次 · 精致细节
   ============================================ */

:root {
  --c-primary: #c62828;
  --c-primary-light: #e53935;
  --c-primary-dark: #8e0000;
  --c-secondary: #ff6f00;
  --c-secondary-light: #ffab40;
  --c-text: #2c2c3e;
  --c-text-light: #555570;
  --c-text-muted: #8892a0;
  --c-bg: #eef1f7;
  --c-bg-warm: #fef7f0;
  --c-bg-card: #ffffff;
  --c-border: #e8ecf2;
  --c-border-light: #f0f2f7;
  --shadow-sm: 0 2px 12px rgba(30,40,70,0.06);
  --shadow-md: 0 10px 34px rgba(30,40,70,0.10);
  --shadow-lg: 0 18px 52px rgba(30,40,70,0.16);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --line: 1.85;
}

/* ====== 全局 ====== */
html body {
  background: var(--c-bg) !important;
  background-color: var(--c-bg) !important;
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ====== 文章内容容器（通用） ====== */
html body .article-body,
html body .geo-article,
html body article,
html body .content,
html body .main-content,
html body #main-content,
html body .article-content,
html body .post-content,
html body .entry-content,
html body .single-content {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 17px !important;
  line-height: var(--line) !important;
  color: var(--c-text) !important;
}

/* ============================================
   PC 端文章页：正文整体卡片化
   ============================================ */
@media (min-width: 769px) {
  /* article 页内容卡 */
  html body .article-body {
    max-width: 780px !important;
    margin: 8px auto 56px !important;
    padding: 48px 56px 56px !important;
    background: var(--c-bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--c-border-light) !important;
    position: relative !important;
  }

  html body .article-body::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 48px !important;
    right: 48px !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-primary-light)) !important;
    border-radius: 0 0 4px 4px !important;
    opacity: 0.85 !important;
  }

  /* geo 页内容卡 */
  html body .geo-article {
    max-width: 860px !important;
    margin: 8px auto 56px !important;
    padding: 48px 56px 56px !important;
    background: var(--c-bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--c-border-light) !important;
    position: relative !important;
  }

  html body .geo-article::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 48px !important;
    right: 48px !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-primary-light)) !important;
    border-radius: 0 0 4px 4px !important;
    opacity: 0.85 !important;
  }
}

/* ====== 标题区（精致卡片） ====== */
html body .article-header,
html body .entry-header,
html body .article-title {
  text-align: center !important;
  padding: 56px 24px 40px !important;
  margin: 0 auto 28px !important;
  max-width: 800px !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,111,0,0.08) 0, rgba(255,111,0,0) 42%),
    radial-gradient(circle at 92% 88%, rgba(198,40,40,0.09) 0, rgba(198,40,40,0) 46%),
    radial-gradient(circle at 96% 10%, rgba(255,171,64,0.10) 0, rgba(255,171,64,0) 38%),
    linear-gradient(180deg, #ffffff 0%, #fef7f0 50%, #fff2f2 100%) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 标题区顶部渐变丝带 + 底部分隔线 */
html body .article-header::before,
html body .entry-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary)) !important;
  border-radius: 0 0 4px 4px !important;
}

html body .article-header::after,
html body .entry-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-secondary), transparent) !important;
  border-radius: 2px !important;
}

/* geo 标题（正文卡内） */
html body .geo-article > h1:first-child {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  line-height: 1.3 !important;
  margin: 0 auto 22px !important;
  padding: 0 0 18px !important;
  max-width: 720px !important;
  text-align: center !important;
  letter-spacing: -0.3px !important;
  position: relative !important;
}

html body .geo-article > h1:first-child::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-secondary), transparent) !important;
  border-radius: 2px !important;
}

/* 通用 H1 */
html body .article-header h1,
html body .article-title h1,
html body .entry-header h1,
html body .article-body > h1:first-child,
html body .geo-article h1 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  line-height: 1.3 !important;
  margin: 0 auto 18px !important;
  padding: 0 0 14px !important;
  max-width: 720px !important;
  text-align: center !important;
  letter-spacing: -0.3px !important;
}

/* ====== 元信息 ====== */
html body .article-meta,
html body .entry-meta,
html body .article-header .meta {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 22px !important;
  background: var(--c-bg-card) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 2px 10px rgba(30,40,70,0.06) !important;
  border: 1px solid var(--c-border-light) !important;
  font-size: 13px !important;
  color: var(--c-text-muted) !important;
  margin: 0 auto !important;
}

/* ====== 面包屑 ====== */
html body .breadcrumb,
html body .breadcrumbs,
html body nav.breadcrumb {
  font-size: 13px !important;
  color: var(--c-text-muted) !important;
  margin: 20px auto 24px !important;
  max-width: 800px !important;
  padding: 0 28px !important;
}

/* ====== 首段 ====== */
html body .article-body > p:first-of-type,
html body .geo-article > p:first-of-type,
html body article > p:first-of-type {
  font-size: 1.08em !important;
  color: var(--c-text-light) !important;
  line-height: 1.9 !important;
  margin-bottom: 2em !important;
  text-align: justify !important;
}

html body .article-body > p:first-of-type::first-letter,
html body .geo-article > p:first-of-type::first-letter {
  float: left !important;
  font-size: 3.6em !important;
  font-weight: 800 !important;
  line-height: 0.85 !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  color: var(--c-primary) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

/* ====== H2（文章页竖线+渐变，GEO页红卡） ====== */
html body .article-body h2,
html body article h2,
html body .content h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--c-primary-dark) !important;
  line-height: 1.4 !important;
  margin: 52px 0 22px 0 !important;
  padding: 0 0 12px 18px !important;
  border-left: 4px solid var(--c-primary) !important;
  position: relative !important;
  background: none !important;
}

html body .article-body h2::before {
  content: '' !important;
  position: absolute !important;
  left: -4px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--c-primary), var(--c-secondary)) !important;
  border-radius: 2px !important;
}

html body .article-body h2::after,
html body article h2::after {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  bottom: 0 !important;
  width: 72px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--c-secondary), transparent) !important;
  border-radius: 2px !important;
}

html body .geo-article h2,
html body .geo-article .section-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  margin: 40px 0 22px 0 !important;
  padding: 14px 22px !important;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 6px 20px rgba(198,40,40,0.28) !important;
  border-left: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* ====== H3 ====== */
html body .article-body h3,
html body .geo-article h3,
html body article h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
  line-height: 1.45 !important;
  margin: 32px 0 14px 0 !important;
  padding: 0 0 8px 14px !important;
  border-left: 3px solid var(--c-secondary) !important;
}

/* ====== 段落 ====== */
html body .article-body p,
html body .geo-article p,
html body article p {
  font-size: 17px !important;
  line-height: var(--line) !important;
  color: var(--c-text) !important;
  margin-bottom: 1.5em !important;
  text-align: justify !important;
}

/* ====== 图片 ====== */
html body .article-body img,
html body .geo-article img,
html body article img,
html body .geo-img img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  margin: 30px auto !important;
  display: block !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid var(--c-border-light) !important;
}

html body .article-body img:hover,
html body .geo-article img:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ====== 引用块 ====== */
html body .article-body blockquote,
html body .geo-article blockquote {
  margin: 30px 0 !important;
  padding: 24px 28px 24px 24px !important;
  background: linear-gradient(135deg, var(--c-bg-warm), #fff) !important;
  border-left: 4px solid var(--c-secondary) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  box-shadow: var(--shadow-sm) !important;
  font-style: italic !important;
  color: var(--c-text-light) !important;
  position: relative !important;
}

html body .article-body blockquote::before {
  content: '"' !important;
  position: absolute !important;
  top: 10px !important;
  left: 14px !important;
  font-size: 48px !important;
  color: var(--c-secondary) !important;
  opacity: 0.3 !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
}

/* ====== 分割线 ====== */
html body .article-body hr,
html body .geo-article hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--c-primary-light), var(--c-secondary-light), transparent) !important;
  margin: 42px auto !important;
  width: 50% !important;
  opacity: 0.7 !important;
}

/* ====== 列表 ====== */
html body .article-body ul,
html body .article-body ol,
html body .geo-article ul,
html body .geo-article ol {
  margin: 20px 0 !important;
  padding-left: 30px !important;
}

html body .article-body li,
html body .geo-article li {
  margin-bottom: 10px !important;
  line-height: 1.7 !important;
}

html body .article-body ul li::marker {
  color: var(--c-primary) !important;
  font-size: 1.3em !important;
}

/* ====== 表格 ====== */
html body .article-body table,
html body .geo-article table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 28px 0 !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

html body .article-body th,
html body .geo-article th {
  background: var(--c-primary) !important;
  color: #fff !important;
  padding: 14px 18px !important;
  text-align: left !important;
  font-weight: 600 !important;
}

html body .article-body td,
html body .geo-article td {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--c-border) !important;
}

html body .article-body tr:nth-child(even) td {
  background: var(--c-bg) !important;
}

/* ====== CTA按钮 ====== */
html body .cta-button,
html body .btn-primary,
html body .cta {
  display: inline-block !important;
  padding: 14px 36px !important;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light)) !important;
  color: #fff !important;
  border-radius: var(--radius-xl) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  box-shadow: var(--shadow-md) !important;
  transition: all 0.3s ease !important;
  margin: 20px 0 !important;
}

html body .cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Hero按钮垂直堆叠 */
html body .hero-cta,
html body .hero .cta-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

html body .hero-cta .btn,
html body .hero .cta-group .btn {
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
}

html body .hero-cta .btn-outline {
  background: transparent !important;
  border: 2px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
}

html body .hero-cta .btn-outline:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* ====== 链接 ====== */
html body .article-body a,
html body .geo-article a {
  color: var(--c-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.25s ease !important;
}

html body .article-body a:hover,
html body .geo-article a:hover {
  border-bottom-color: var(--c-primary) !important;
}

/* ====== 标签 ====== */
html body .article-meta .tag,
html body .article-meta .label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  background: linear-gradient(135deg, var(--c-primary-light), var(--c-secondary-light)) !important;
  color: #fff !important;
  border-radius: var(--radius-xl) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ====== 相关文章 ====== */
html body .related-articles,
html body .related-posts {
  max-width: 780px !important;
  margin: -24px auto 56px !important;
  padding: 28px !important;
  background: var(--c-bg-card) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--c-border-light) !important;
}

html body .related-articles h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-primary-dark) !important;
  margin: 0 0 18px 0 !important;
  padding-left: 14px !important;
  border-left: 3px solid var(--c-primary) !important;
}

/* ============================================
   移动端优化
   ============================================ */
@media (max-width: 768px) {
  html body {
    background: #eef1f7 !important;
  }

  /* 移动端正文卡片化（窄留白） */
  html body .article-body,
  html body .geo-article {
    max-width: 100% !important;
    margin: 0 auto 40px !important;
    padding: 28px 20px 36px !important;
    background: var(--c-bg-card) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--c-border-light) !important;
    position: relative !important;
  }

  html body .article-body::before,
  html body .geo-article::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20px !important;
    right: 20px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-primary-light)) !important;
    border-radius: 0 0 3px 3px !important;
  }

  html body .article-header,
  html body .entry-header {
    padding: 36px 16px 28px !important;
    margin: 0 auto 16px !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  }

  html body .article-header h1,
  html body .article-title h1,
  html body .geo-article > h1:first-child,
  html body .geo-article h1 {
    font-size: 22px !important;
    margin: 0 auto 12px !important;
    padding: 0 0 10px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  html body .geo-article > h1:first-child::after {
    width: 80px !important;
    height: 2px !important;
  }

  html body .article-meta {
    gap: 10px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  html body .breadcrumb {
    font-size: 12px !important;
    margin: 12px auto 16px !important;
    padding: 0 16px !important;
  }

  html body .article-body > p:first-of-type {
    font-size: 1.04em !important;
    line-height: 1.85 !important;
  }

  html body .article-body > p:first-of-type::first-letter,
  html body .geo-article > p:first-of-type::first-letter {
    font-size: 2.8em !important;
    margin-right: 6px !important;
  }

  html body .article-body p,
  html body .geo-article p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 1.3em !important;
  }

  html body .article-body h2,
  html body article h2 {
    font-size: 18px !important;
    margin: 36px 0 14px 0 !important;
    padding: 0 0 8px 14px !important;
    border-left-width: 3px !important;
  }

  html body .geo-article h2,
  html body .geo-article .section-title {
    font-size: 18px !important;
    margin: 30px 0 16px 0 !important;
    padding: 11px 16px !important;
    border-radius: var(--radius-sm) !important;
  }

  html body .article-body h3,
  html body .geo-article h3 {
    font-size: 16px !important;
    margin: 24px 0 10px 0 !important;
    padding: 0 0 6px 10px !important;
    border-left-width: 2px !important;
  }

  html body .article-body img,
  html body .geo-article img {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 22px auto !important;
  }

  html body .article-body blockquote {
    margin: 20px 0 !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
  }

  html body .article-body ul,
  html body .article-body ol {
    padding-left: 22px !important;
    margin: 14px 0 !important;
  }

  html body .article-body li {
    margin-bottom: 8px !important;
    font-size: 15px !important;
  }

  html body .cta-button,
  html body .btn-primary {
    padding: 12px 28px !important;
    font-size: 15px !important;
    margin: 16px 0 !important;
  }

  html body .related-articles {
    margin: -24px auto 40px !important;
    padding: 18px !important;
    border-radius: var(--radius-md) !important;
  }
}

/* ============================================
   超小屏
   ============================================ */
@media (max-width: 380px) {
  html body .article-header {
    padding: 28px 12px 22px !important;
  }

  html body .article-header h1,
  html body .geo-article > h1:first-child,
  html body .geo-article h1 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  html body .article-meta {
    gap: 6px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  html body .article-body,
  html body .geo-article {
    padding: 22px 14px 28px !important;
  }

  html body .article-body p,
  html body .geo-article p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  html body .article-body > p:first-of-type::first-letter {
    font-size: 2.6em !important;
  }

  html body .article-body h2 {
    font-size: 17px !important;
    margin: 28px 0 12px 0 !important;
    padding: 0 0 6px 10px !important;
  }

  html body .geo-article h2 {
    font-size: 16px !important;
    padding: 9px 12px !important;
  }

  html body .article-body img,
  html body .geo-article img {
    border-radius: 6px !important;
    margin: 16px auto !important;
  }
}