/* 亲密关系手册 - 设计系统：墨绿 / 米白 / 莫兰迪灰蓝（低饱和，朴素直白） */
:root {
  --green: #2E5E4E;        /* 主色：深墨绿 */
  --green-dark: #244A3E;
  --cream: #F5F1E8;        /* 背景：暖米白 */
  --card: #FFFFFF;
  --gray: #6B7F8F;         /* 莫兰迪灰蓝 */
  --text: #3A3A3A;
  --text-light: #8A8A8A;
  --line: #E4DED2;
  --serif: Georgia, "Songti SC", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.75;
  font-size: 16px;
}

.container { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ===== 顶栏 ===== */
.site-header {
  background: var(--green);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; max-width: 960px;
}
.logo {
  color: #fff; font-size: 19px; font-weight: 600; text-decoration: none;
  letter-spacing: 1px;
}
.main-nav a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  margin-left: 20px; font-size: 14px;
}
.main-nav a:hover { color: #fff; }

/* ===== Hero ===== */
.hero {
  text-align: center; padding: 72px 20px 56px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: 34px; font-weight: 600; color: var(--green-dark);
  line-height: 1.5; margin-bottom: 18px;
}
.hero-sub {
  color: var(--gray); font-size: 16px; line-height: 1.9;
}

/* ===== 区块 ===== */
.section { padding: 28px 0 44px; }
.section-title {
  font-family: var(--serif);
  font-size: 22px; color: var(--green-dark);
  border-left: 4px solid var(--green);
  padding-left: 12px; margin-bottom: 22px;
}

/* ===== 文章列表 ===== */
.article-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: box-shadow 0.2s;
}
.article-item:hover { box-shadow: 0 3px 12px rgba(46,94,78,0.12); }
.article-item h3 {
  font-size: 18px; color: var(--green-dark); margin-bottom: 6px;
}
.article-item a { text-decoration: none; color: inherit; }
.article-item h3:hover { color: var(--green); }
.article-meta { font-size: 12.5px; color: var(--text-light); margin-bottom: 8px; }
.article-excerpt { font-size: 14.5px; color: #666; }

.loading, .empty { color: var(--text-light); padding: 20px 0; text-align: center; }

/* ===== 分类卡片 ===== */
.topic-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.topic-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.topic-card:hover { box-shadow: 0 3px 12px rgba(46,94,78,0.12); transform: translateY(-2px); }
.topic-card h3 { font-size: 17px; color: var(--green-dark); margin-bottom: 8px; }
.topic-card p { font-size: 14px; color: #777; }

/* ===== 页脚 ===== */
.site-footer {
  background: var(--green-dark); color: rgba(255,255,255,0.75);
  padding: 26px 0; margin-top: 30px; font-size: 13px; text-align: center;
}
.footer-links { margin-top: 6px; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 8px; }

/* ===== 文章页 ===== */
.article-body {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 40px 44px; margin-top: 28px;
}
.article-body h1 {
  font-family: var(--serif); font-size: 28px; color: var(--green-dark);
  line-height: 1.5; margin-bottom: 10px;
}
.article-body .post-meta { font-size: 13px; color: var(--text-light); margin-bottom: 26px; }
.article-body h2 {
  font-size: 20px; color: var(--green-dark); margin: 30px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.article-body h3 { font-size: 17px; color: var(--green-dark); margin: 22px 0 10px; }
.article-body p { margin-bottom: 16px; }
.article-body blockquote {
  border-left: 4px solid var(--green); background: #F7F4EC;
  padding: 12px 18px; margin: 18px 0; color: #555; border-radius: 0 6px 6px 0;
}
.article-body ul, .article-body ol { margin: 0 0 16px 24px; }
.article-body li { margin-bottom: 6px; }

/* ===== 移动端 ===== */
@media (max-width: 640px) {
  .hero h1 { font-size: 26px; }
  .hero { padding: 48px 16px 40px; }
  .article-body { padding: 24px 20px; }
  .main-nav { display: none; }
}