/* ===========================================================================
   TOPICS — michaelwales.com
   Scoped styles for the topic-tagging feature: the homepage (`/`) and the
   /topics/<topic>/ archives. base.njk links this + tokens.css only on those
   routes, so every other page downloads none of it.
   The .mw-* classes are the tag slice of the design system's components.css,
   verbatim — only the parts these surfaces actually use. The page wrapper
   mirrors the Projects page (.projects-page / .projects-intro) for a shared
   "section heading + intro" pattern.
   =========================================================================== */

/* --- Page layout (mirrors .projects-page) --- */
.articles-page { padding: .5em 1em; max-width: 62em; }
.articles-intro {
  font-family: var(--font-body); font-size: var(--text-md); color: var(--text-muted);
  max-width: 56ch; margin: 0 0 var(--space-6); line-height: var(--leading-relaxed);
}
@media all and (min-width: 780px) { .articles-page { padding: .5em 3em; } }

/* --- TAG (topic chip) --- */
.mw-tag {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight); line-height: 1; white-space: nowrap;
  padding: 0.35em 0.7em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-link); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.mw-tag:hover { color: var(--text-strong); }
/* Keyboard focus ring — normalize.css v2.1.3 only gives `a:focus` a faint dotted
   outline; make it a clear, brand-colored ring (matches the /projects/ surfaces). */
.mw-tag:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mw-tag .icon { width: 0.95em; height: 0.95em; }
.mw-tag--dark { background: var(--bg-inverse); color: var(--text-inverse); border-color: transparent; }
.mw-tag--dark:hover { color: var(--text-inverse); }

/* --- Topic filter + count bar (top of home / archive) --- */
.topic-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin: 0 0 var(--space-6);
}
.topic-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-count {
  flex: none; font-family: var(--font-ui); font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight); color: var(--text-muted); white-space: nowrap;
}

/* --- Topic archive heading --- */
.topic-heading {
  font-family: var(--font-display); font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 var(--space-5);
}

/* Below the site's desktop breakpoint the filter chips fill the row; drop the
   count to its own full-width line so it stays visible instead of being pushed
   off the edge by the space-between layout. (Matches style.css's 780px breakpoint.) */
@media (max-width: 779px) {
  .topic-count { flex: 0 0 100%; margin-top: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .mw-tag { transition: none; }
}