/* 文章列表卡片网格（仿字典索引的人性化排列），复用站点变量，H5 自适应 */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.art-card {
  display: block; background: var(--c-card, #fff); border: 1px solid var(--c-line, #ece7dd);
  border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s, transform .12s;
}
.art-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); border-color: var(--c-gold, #c9a94e); transform: translateY(-1px); }
.art-card .t { font-size: var(--t-lg, 1.06rem); font-weight: 600; color: var(--c-ink, #2b2b2b); line-height: 1.5; }
.art-card .m { font-size: var(--t-xs, .78rem); color: var(--c-muted, #8a7f6f); margin-top: 5px; }
.art-card .e { font-size: var(--t-sm, .85rem); color: var(--c-muted, #6b6b6b); margin-top: 8px; line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-card .tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.art-card .tags span { font-size: var(--t-xs, .72rem); background: #eef2f7; color: #5a6b7e; padding: 1px 9px; border-radius: 999px; line-height: 1.7; }

@media (max-width: 480px) { .art-grid { grid-template-columns: 1fr; } }

/* ── 文章典故频道首页 hub ── */
.art-hero {
  background: linear-gradient(135deg, var(--c-gold-soft, #f8f2e2), #fff);
  border: 1px solid var(--c-line, #ece7dd); border-radius: 14px;
  padding: 18px; margin-bottom: 16px;
}
.art-hero-search { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; }
.art-hero-search input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--c-line, #ddd); border-radius: 10px;
  font-size: var(--t-base, 1rem); background: #fff;
}
.art-hero .search-hot { justify-content: center; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hub-card {
  display: flex; flex-direction: column; background: var(--c-card, #fff);
  border: 1px solid var(--c-line, #ece7dd); border-radius: 14px; padding: 16px 18px;
  transition: box-shadow .2s, border-color .2s;
}
.hub-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.06); border-color: var(--c-gold, #c9a94e); }
.hc-head { display: flex; align-items: center; gap: 10px; }
.hc-icon {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  background: var(--c-gold-soft, #f6ecd2); color: var(--c-gold-ink, #8a6d1f);
  border-radius: 10px; font-size: 1.15rem; font-weight: 700;
}
.hc-name { font-size: var(--t-lg, 1.12rem); font-weight: 700; color: var(--c-ink, #2b2b2b); text-decoration: none; }
.hc-name:hover { color: var(--c-gold-ink, #8a6d1f); }
.hc-count { margin-left: auto; font-size: var(--t-xs, .74rem); color: var(--c-muted, #8a7f6f);
  background: #f2eee6; padding: 2px 9px; border-radius: 999px; }
.hc-intro { color: var(--c-muted, #7a7060); font-size: var(--t-sm, .84rem); margin: 10px 0 6px; line-height: 1.6; }
.hc-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; }
.hc-list a { color: var(--c-ink, #333); text-decoration: none; font-size: var(--t-sm, .9rem); padding: 3px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-list a:hover { color: var(--c-gold-ink, #8a6d1f); }
.hc-list a .d { color: var(--c-gold, #c9a94e); margin-right: 6px; }
.hc-list a .au { color: var(--c-muted, #9a917f); font-size: var(--t-xs, .74rem); margin-left: 6px; }
.hc-more { margin-top: auto; font-size: var(--t-sm, .85rem); color: var(--c-gold-ink, #8a6d1f); text-decoration: none; font-weight: 600; }
.hc-more:hover { text-decoration: underline; }

@media (max-width: 480px) { .hub-grid { grid-template-columns: 1fr; } .art-hero-search { flex-direction: column; } }