/* ferdi.tech v2 — writing HUB styles (site/writing/index.html only).
   Load order: site.css → v2.css → v2-writing.css.
   Article + case-study pages do NOT load this file — they use v2.css classes only.
   Tokens (--bg, --bg-soft, --text, --text-muted, --text-faint, --accent,
   --accent-soft, --border, --font-display, --dur, --ease) come from site.css. */

/* ---------- hub hero ---------- */
.wh-hero { padding-top: 42px; padding-bottom: 10px; }
.wh-hero .crumb { margin: 0 0 20px; }

/* ---------- 8-card index grid ---------- */
.wh-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 0;
}

/* card = whole-card anchor (consumes v2.css .related-card) */
.wh-card { gap: 6px; padding: 20px 20px 18px; }
.wh-card .kicker { font-size: 10.5px; letter-spacing: .12em; }

.wh-card .wh-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.18; color: var(--text);
  margin: 2px 0 0; transition: color var(--dur) var(--ease);
}
.wh-card:hover .wh-title, .wh-card:focus-visible .wh-title { color: var(--accent); }

.wh-card .wh-deck {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}

/* meta row pinned to the card floor so the grid reads in rows */
.wh-card .meta-row { margin: auto 0 0; padding-top: 12px; }
.wh-card .meta-row .wh-sep { color: var(--text-faint); padding: 0 5px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .wh-hero { padding-top: 26px; }
  .wh-grid { grid-template-columns: 1fr; }
  .wh-card { padding: 16px; }
}