/* Backgrounds page (/demographics/) — was 1,490 inline style attrs
   from 12 unique strings rendered hundreds of times. Lifted into
   classes here so the rendered HTML stays clean and the surface is
   themeable (dark mode etc.). */

.bg-hero-h1     { margin: var(--sp-2) 0 var(--sp-1); }
.bg-hero-lead   { margin: 0 0 var(--sp-3); }

.bg-index-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.bg-index-pill {
  font-size: var(--fs-xs);
  text-decoration: none;
}

.bg-section {
  margin-bottom: var(--sp-5);
  scroll-margin-top: 80px;
}
.bg-section h2 {
  border-bottom: 1px solid var(--ink-200);
  padding-bottom: 6px;
  margin-bottom: var(--sp-3);
}
.bg-section-count {
  font-weight: normal;
  font-size: var(--fs-base);
}

.bg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
}
.bg-member-card {
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--ink-300);
  border-radius: 6px;
}
.bg-member-card.party-border-R { border-left-color: var(--party-R, var(--ink-300)); }
.bg-member-card.party-border-D { border-left-color: var(--party-D, var(--ink-300)); }
.bg-member-card.party-border-I { border-left-color: var(--party-I, var(--ink-300)); }

.bg-member-meta { font-size: var(--fs-xs); }

/* ---- Dark-mode tuning ------------------------------------------------
   Cards use the ink/paper scale + party-token border colors that flip
   automatically with theme. The party-border default fallback
   (var(--ink-300)) reads correctly in both modes. No overrides today. */