/* 1. 定义全局颜色和变量 */
:root {
  --bg-color: #fcfcfc;
  --text-color: #333333;
  --link-color: #0070f3;
  --meta-color: #888888;
  --border-color: #eaeaea;
}

/* 2. 页面基础排版（居中、限宽、字体） */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  max-width: 768px; /* 限制阅读宽度，让排版像一本书 */
  margin: 0 auto;   /* 整体居中 */
  padding: 20px;
}

/* 3. 顶部导航栏美化 */
header {
  display: flex; /* 使用弹性盒子让标题和导航对齐 */
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
}

header nav a {
  margin-left: 20px;
  text-decoration: none;
  font-weight: 500;
}

/* 4. 链接的交互动画 */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease; /* 鼠标悬浮时的平滑过渡 */
}

a:hover {
  text-decoration: underline;
  color: #0366d6;
}

/* 5. 文章元数据（如日期）弱化显示 */
.post-meta {
  color: var(--meta-color);
  font-size: 0.9em;
  margin-top: -15px;
  margin-bottom: 30px;
}