/* High-contrast editorial layer: one dark signal, no decorative colour mix. */
:root {
  --paper: #eeeee9;
  --ink: #121512;
  --muted: #61665f;
  --orange: #aa4434;
  --forest: #1a211b;
  --surface: #fbfbf8;
  --surface-muted: #e4e5df;
  --surface-lime: #f4f4ed;
  --surface-clay: #e9eae5;
  --surface-moss: #d9ddd6;
  --display: "Google Sans Flex", "Noto Sans SC", sans-serif;
  --cjk-display: "Noto Sans SC", "Google Sans Flex", sans-serif;
}

body,
button,
input,
select { font-family: var(--display); }

.hero h1,
.sources h2,
.results-head h2,
.resource-card h3,
.detail-hero h1,
.resource-content h1,
.resource-content h2,
.resource-content h3,
.related h2,
.empty strong,
.policy-state h2 { font-family: var(--cjk-display); }

.hero h1,
.detail-hero h1 {
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero h1 em,
.sources h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--ink);
}

.hero h1 em { letter-spacing: -.075em; }

.orbit { background: #d7dbd4; }
.filter-dock { background: #e1e2dc; }
.filter-search { background: #f7f7f2; }
.filter-controls label,
.filter-actions button,
#back-to-top { background: var(--surface); }
.filter-search:focus-within { background: #ffffff; }

.resource-card,
.card-column:nth-child(3n) .resource-card:nth-child(4n),
.card-column:nth-child(4n) .resource-card:nth-child(5n),
.source-row,
.source-row:nth-child(even) { background: var(--surface); }

.resource-card--signal {
  background: var(--ink);
  color: var(--surface);
}
.resource-card--signal .resource-card__type { color: #d9ddd6; }
.resource-card--signal p,
.resource-card--signal .resource-card__meta,
.resource-card--signal .resource-card__top { color: #d7dbd4; }
.resource-card--signal .resource-card__add { background: #f0f0ea; color: var(--ink); }

.resource-card:hover,
.resource-card:focus-within,
.related-card:hover { background: #e4e5df; }
.resource-card__add { background: #e4e5df; }
.resource-card__add:hover,
.resource-card__add[aria-pressed=true] { background: var(--ink); color: var(--surface); }

.hero dl div,
footer { background: var(--surface); }
.source-row a { color: var(--ink); font-weight: 500; }

@media (max-width: 520px) {
  .hero h1 { max-width: none; font-size: clamp(2.55rem, 11vw, 3.45rem); letter-spacing: -.06em; }
  .resource-card h3 { font-weight: 800; line-height: 1.13; }
}