/* ══ 文章卡片元信息 ═════════════════════════════════════════
   首页卡片和文章页共用这几件：标题、日期行、分类、标签。
   两边的外壳各归各的 —— 首页在 index.styl，文章页在 post.styl。
   ──────────────────────────────────────────────────────────── */
.postTitle {
  font-size: 22px;
  margin-bottom: 8px;
}
.postTitle a {
  color: #241d1b;
  text-decoration: none;
  transition: color 0.25s;
}
.postTitle a:hover {
  color: #b3123f /* 主强调：领带的酒红 */;
}
.postMeta {
  font-size: 13px;
  color: #8a817c;
  margin-bottom: 12px;
}
/* ── 分类入口 ─────────────────────────────────────────────
   分类和标签要一眼分得开，所以走两套视觉：
     分类 = 文件夹，一篇只属于一条链 → 小圆角 + 左侧竖条，琥珀色
     标签 = 便利贴，一篇能贴很多张   → 大圆角胶囊，酒红（见下面 .postTag）
   ──────────────────────────────────────────────────────── */
.metaLink {
  display: inline-block;
  padding: 2px 9px;
  margin-right: 4px;
  border-radius: 4px;
  border-left: 3px solid #d99846 /* 次强调：齿轮数字的琥珀金 */;
  background-color: rgba(217,152,70,0.14);
  color: #a8722c /* 琥珀压深。crisAmber 太浅，压在浅底上读不清 */;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.25s;
}
.metaLink:hover {
  background-color: rgba(217,152,70,0.3);
}
.postTags {
  display: flex;
  flex-wrap: wrap /* 标签多了自动换行，不写会挤成一行 */;
  gap: 8px;
  margin-top: 14px;
}
.postTag {
  padding: 3px 10px;
  border-radius: 20px;
  background-color: rgba(179,18,63,0.1);
  border: 1px solid rgba(179,18,63,0.25);
  color: #b3123f /* 主强调：领带的酒红 */;
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.25s;
}
.postTag:hover {
  background-color: rgba(179,18,63,0.22);
}