:root {
  --navy: #1a2438;
  --navy-light: #2b3a5c;
  --accent: #8f3a2b;
  --accent-light: #b9573f;
  --cream: #f7f3ea;
  --paper: #fffdf8;
  --ink: #201d1a;
  --ink-soft: #5c574e;
  --border: #ddd5c4;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--accent); }

/* Header / hero */
.site-header {
  background: var(--navy);
  color: #fff;
  padding: 56px 0 40px;
  border-bottom: 3px solid var(--accent);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: #c9a98f;
  margin: 0 0 14px;
  font-weight: 600;
}

.site-header h1 {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  margin: 0 0 6px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero-rule {
  width: 64px;
  height: 2px;
  background: var(--accent);
  border: none;
  margin: 18px 0 18px;
}

.subtitle {
  margin: 0;
  max-width: 640px;
  color: #cfd4e0;
  font-size: 1.02rem;
  font-family: var(--font-serif);
  font-style: italic;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

.portrait {
  width: 220px;
  height: 264px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  background: var(--navy-light);
}

.profile-header picture { display: block; flex-shrink: 0; line-height: 0; }

@media (max-width: 760px) {
  .portrait { width: 140px; height: 168px; }
}

.profile-years {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.88rem;
  color: #b7bfd2;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
  .profile-header { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Header search */
.header-search {
  position: relative;
  margin: 20px 0 4px;
  max-width: 420px;
}

.header-search input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.header-search input[type="search"]::placeholder { color: #9aa3ba; }

.header-search input[type="search"]:focus {
  outline: 2px solid var(--accent-light);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-width: 560px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 20;
  font-size: 0.9rem;
}

.search-results .group-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 10px 14px 4px;
}

.search-results .result-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}

.search-results .result-item:hover,
.search-results .result-item:focus {
  background: var(--cream);
}

.search-results .result-item .label { font-weight: 600; }
.search-results .result-item .sub { color: var(--ink-soft); font-size: 0.82rem; margin-top: 2px; }

.search-results .empty,
.search-results .hint {
  padding: 12px 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.search-flash {
  animation: search-flash-fade 1.6s ease-out;
}

@keyframes search-flash-fade {
  from { background: #f3e3c4; }
  to { background: transparent; }
}

[hidden] { display: none !important; }

/* Top bar: his name, the five grouped menus, and search. It sticks to the top of the
   screen; the full banner above it appears only on the home page. */
/* Inner pages hide the banner visually but keep its heading for screen readers. */
html[data-page]:not([data-page="overview"]) .site-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  padding: 0;
  border: 0;
}

.topbar {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 3px solid var(--accent);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: #fff; text-decoration: underline; }

.site-nav { display: flex; gap: 2px; flex: 1; }
.nav-group { position: relative; }

.nav-group-btn {
  background: none;
  border: none;
  color: #d6dbe8;
  font: 600 0.86rem var(--font-sans);
  padding: 18px 10px 17px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}
.nav-group-btn::after { content: " ▾"; font-size: 0.7em; opacity: 0.7; }
.nav-group-btn:hover,
.nav-group-btn[aria-expanded="true"] { color: #fff; }
.nav-group.is-current .nav-group-btn { color: #fff; box-shadow: inset 0 -3px 0 #c9a77c; }

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(26, 36, 56, 0.18);
  padding: 6px 0;
  z-index: 40;
}
.nav-group-btn[aria-expanded="true"] + .nav-menu { display: grid; }

.nav-link {
  display: grid;
  gap: 1px;
  padding: 9px 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-link small { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); }
.nav-link:hover { background: var(--cream); color: var(--accent); }
.nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }

.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font: 600 0.85rem var(--font-sans);
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
}
.menu-toggle::after { content: " ☰"; }
.menu-toggle[aria-expanded="true"]::after { content: " ✕"; }

.topbar .header-search { margin: 0; width: 230px; flex-shrink: 0; }
.topbar .header-search input[type="search"] { padding: 8px 12px; font-size: 0.88rem; }
.topbar .search-results { left: auto; right: 0; width: min(520px, 92vw); max-width: none; }

@media (max-width: 1080px) {
  .topbar-inner { flex-wrap: wrap; gap: 0 14px; }
  .topbar .header-search { order: 3; width: 100%; padding-bottom: 10px; }
}

@media (max-width: 820px) {
  .topbar-inner { padding-block: 8px; min-height: 0; }
  .menu-toggle { display: inline-block; }
  .site-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    background: var(--paper);
    margin: 8px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0;
    padding: 8px 0 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .menu-toggle[aria-expanded="true"] ~ .site-nav { display: flex; }
  .nav-group-btn {
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 20px 4px;
    pointer-events: none;
    box-shadow: none !important;
  }
  .nav-group-btn::after { content: none; }
  .nav-group.is-current .nav-group-btn { color: var(--accent); }
  .nav-menu { display: grid; position: static; box-shadow: none; border: none; padding: 0; min-width: 0; background: none; }
  .nav-link { padding: 8px 20px; }
  .topbar .header-search { order: 2; width: 100%; padding: 8px 0 2px; }
}

/* Page intro: where you are, what the page holds, and where it comes from. */
.page-intro { display: grid; gap: 6px; margin-bottom: 22px; max-width: 75ch; }
.page-intro h2 { margin: 0; }
.crumb { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.crumb a { color: var(--ink-soft); }
.page-dek { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; color: var(--ink); line-height: 1.45; }
.page-source { margin: 2px 0 0; justify-self: start; font-size: 0.78rem; color: var(--ink-soft); border: 1px solid var(--border); background: var(--paper); padding: 2px 8px; border-radius: 2px; }

/* Main content */
main.wrap {
  padding-top: 40px;
  padding-bottom: 64px;
  min-height: 50vh;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

h2 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--navy);
}

h3 { font-weight: 600; }

.section-note {
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 20px;
  font-size: 0.95rem;
}

/* Sub-tabs (Legislation: Sponsored / Cosponsored) */
.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.subtab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 4px;
  margin-right: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.subtab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.subtab-panel { display: none; }
.subtab-panel.is-active { display: block; }

/* Policy tab's outer Congress/HHS toggle -- deliberately a bolder, boxed segmented
   control rather than the underline style above, so it reads as the bigger structural
   choice (which source) that the underline tabs (which view within that source) sit
   inside of, not a second instance of the same control. */
.policy-subtabs {
  border-bottom: none;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.policy-subtab-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  display: inline-block;
  text-decoration: none;
}

.policy-subtab-btn:hover { border-color: var(--accent); color: var(--accent); }
.policy-subtab-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.policy-subtab-panel { display: none; }
.policy-subtab-panel.is-active { display: block; }

/* Expandable bill cards (Legislation) */
.bill-list { display: flex; flex-direction: column; }

.bill-card {
  border-bottom: 1px solid var(--border);
}
.bill-card:first-child { border-top: 1px solid var(--border); }

.bill-card-summary {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 13px 4px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 90px 90px 1fr auto;
  gap: 12px;
  align-items: baseline;
  font: inherit;
  color: var(--ink);
}

.bill-card-summary:hover { background: rgba(143, 58, 43, 0.05); }

.bill-card-summary .bill-date { color: var(--ink-soft); font-size: 0.85rem; }
.bill-card-summary .bill-number { font-weight: 700; color: var(--navy); }
.bill-card-summary .bill-title { font-size: 0.92rem; }
.bill-card-summary .bill-caret { color: var(--ink-soft); font-size: 0.8rem; }

.bill-card-detail {
  display: none;
  padding: 2px 4px 16px 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.bill-card.is-open .bill-card-detail { display: block; }
.bill-card.is-open .bill-card-summary .bill-caret::before { content: "\2212"; }
.bill-card-summary .bill-caret::before { content: "\002B"; }

.bill-card-detail dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  margin: 10px 0;
}

.bill-card-detail dt { font-weight: 600; color: var(--ink); }
.bill-card-detail dd { margin: 0; }

@media (max-width: 700px) {
  .bill-card-summary { grid-template-columns: 1fr; gap: 4px; }
}

.milestone--election.bill-card { border: none; }
.election-row-summary {
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 0;
}
.election-row-summary .meta { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.election-row-summary .result { display: block; font-weight: 600; margin-top: 2px; }
.election-row-summary .detail { display: block; font-size: 0.88rem; margin-top: 2px; }
.election-row-summary .note { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; font-style: italic; }

/* Generic archival record row (elections, video, committees) */
.record-row {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.record-list { border-bottom: 1px solid var(--border); }

.record-row .kicker {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 700;
}
.record-row .meta { color: var(--ink-soft); font-size: 0.85rem; margin: 2px 0 6px; }
.record-row .result { font-weight: 600; }
.record-row .detail { font-size: 0.9rem; margin-top: 3px; }
.record-row .note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }
.record-row p { font-size: 0.9rem; margin: 0 0 6px; }
.record-row a { font-weight: 600; font-size: 0.88rem; }

/* Filter bar (sort toggle + year select), used above searchable tables */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.sort-toggle {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.sort-toggle:hover { border-color: var(--accent); color: var(--accent); }

.filter-bar select {
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--paper);
  font-size: 0.85rem;
  color: var(--ink);
}

/* Table controls */
.table-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.table-controls input[type="search"] {
  flex: 1;
  max-width: 360px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.95rem;
  background: var(--paper);
}

.table-controls input[type="search"]:focus {
  outline: 2px solid var(--accent-light);
  outline-offset: 1px;
}

.result-count {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Tables */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--paper);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

tbody tr:hover { background: rgba(143, 58, 43, 0.04); }

.snippet {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.87rem;
  margin-top: 4px;
}

.vote-yea { color: #1e6b3d; font-weight: 600; }
.vote-nay { color: var(--accent); font-weight: 600; }
.vote-other { color: var(--ink-soft); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.fulltext-toggle {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
}

.fulltext-row td { padding-top: 0; }

.fulltext-block {
  max-height: 420px;
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}

.source-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.loading { color: var(--ink-soft); font-style: italic; padding: 20px 0; }
.error-box {
  background: #fbeeea;
  border: 1px solid #d9a893;
  color: #6b2e1f;
  padding: 14px 16px;
  border-radius: 2px;
}

/* Biography */
.bio-summary { max-width: 700px; font-size: 1.02rem; }

.positions-list { list-style: none; margin: 24px 0; padding: 0; border-top: 1px solid var(--border); }

.positions-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.positions-list .role { font-weight: 700; color: var(--navy); font-family: var(--font-serif); font-size: 1.05rem; }
.positions-list .dates { color: var(--ink-soft); font-size: 0.88rem; }
.positions-list .note { color: var(--ink-soft); font-size: 0.88rem; margin-top: 4px; font-style: italic; }

.sources-list {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 24px;
}

.archive-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
  font-size: 1.2rem;
  margin: 32px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 76px;
}

.archive-card {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin-top: 16px;
}

/* Deep Dives (featured essays) */
.feature-essay {
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: 28px 32px 20px;
  margin-bottom: 32px;
  scroll-margin-top: 76px;
}

.feature-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 6px;
}

.feature-essay h3 {
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 1.6rem;
  margin: 0 0 10px;
}

.feature-dek {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 700px;
  margin: 0 0 4px;
}

.essay-toggle {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.essay-body {
  margin-top: 16px;
}

.feature-essay h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 1.1rem;
  margin: 22px 0 8px;
}

.feature-essay p { max-width: 700px; }

.essay-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 10px 0 0;
}

.archive-card .name { font-weight: 700; color: var(--navy); font-family: var(--font-serif); font-size: 1.05rem; }
.archive-card .call-number { font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; font-family: var(--font-sans); }
.archive-card .repository { font-size: 0.85rem; color: var(--ink-soft); margin: 2px 0 8px; }
.archive-card p { font-size: 0.92rem; margin: 0 0 10px; }
.archive-card a { font-weight: 600; font-size: 0.9rem; }

/* Committees */
.committee-group h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--navy);
  font-size: 1.15rem;
  margin: 28px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Milestone Timeline */
.milestone-timeline {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  position: relative;
}

.milestone-timeline::before {
  content: "";
  position: absolute;
  left: 84px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}

.milestone {
  display: grid;
  grid-template-columns: 72px 24px 1fr;
  gap: 0 16px;
  padding: 20px 0;
}

.milestone .year {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy);
  text-align: right;
  padding-top: 1px;
}

.milestone .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  margin-top: 6px;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.milestone .milestone-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.milestone .milestone-desc { color: var(--ink-soft); font-size: 0.92rem; }
.milestone .milestone-link { font-size: 0.85rem; margin-top: 6px; display: inline-block; }

/* Visual weight scales with how consequential an entry is -- major turns (an
   election, an appointment, a defining piece of legislation) read larger than the
   supporting detail between them. */
.milestone--major .year { font-weight: 700; }
.milestone--major .milestone-title { font-size: 1.08rem; }

.milestone--minor { padding: 12px 0; }
.milestone--minor .year { font-size: 0.95rem; color: var(--ink-soft); }
.milestone--minor .dot { width: 7px; height: 7px; margin-top: 7px; }
.milestone--minor .milestone-title { font-size: 0.92rem; font-weight: 600; }
.milestone--minor .milestone-desc { font-size: 0.85rem; }

@media (max-width: 600px) {
  .milestone { grid-template-columns: 44px 20px 1fr; }
  .milestone-timeline::before { left: 54px; }
  .milestone .year { font-size: 0.95rem; }
}

/* Photographs: each image at its own proportions, with a full caption and credit. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 28px 24px;
  align-items: start;
  margin: 16px 0 8px;
}

.photo-card { margin: 0; display: grid; gap: 8px; }
.photo-card picture { display: block; background: var(--border); border: 1px solid var(--border); }
.photo-card img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  background: var(--paper);
}

.photo-card .caption { font-size: 0.84rem; color: var(--ink-soft); display: grid; gap: 4px; line-height: 1.45; }
.photo-card .caption strong { color: var(--ink); font-size: 0.92rem; }
.photo-date { color: var(--accent); font-weight: 600; font-size: 0.8rem; }
.photo-text { color: var(--ink); }
.photo-credit { font-size: 0.78rem; }

/* Issues */
.issue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 28px;
}

.issue-pill {
  background: none;
  border: 1px solid var(--border);
  padding: 7px 14px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
}

.issue-pill:hover { border-color: var(--accent); color: var(--accent); }
.issue-pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.issue-detail-group h3,
.issue-detail-group h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 24px 0 8px;
}

.issue-item { border-top: 1px solid var(--border); padding: 10px 0; font-size: 0.9rem; }
.issue-item .issue-item-meta { color: var(--ink-soft); font-size: 0.82rem; }

/* Footer: identity and signature, section links, a faded-signature band, then sources. */
.site-footer {
  background: var(--navy);
  color: #b9c1d6;
  font-size: 0.9rem;
}

.site-footer a { color: #e3e7f0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2.2fr;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 32px;
}

.footer-id { display: grid; gap: 6px; align-content: start; }
.footer-name { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; margin: 0; }
.footer-years { margin: 0; font-size: 0.82rem; color: #b9c1d6; }
.footer-signature { display: block; width: 141px; height: auto; margin-top: 10px; }
.footer-sigcredit { margin: 0; font-size: 0.74rem; color: #8f99b3; }
.footer-contact { margin: 10px 0 0; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.footer-cols div { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.footer-head {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9a77c;
}

.footer-band {
  height: 120px;
  background-image: url("/img/signature.webp");
  background-repeat: no-repeat;
  background-position: right 6% bottom -18px;
  background-size: auto 150px;
  opacity: 0.09;
}

.footer-bottom { background: #121a2b; padding: 18px 0 22px; font-size: 0.82rem; }
.footer-bottom .wrap { display: grid; gap: 8px; }
.footer-about summary { cursor: pointer; color: #e3e7f0; padding-block: 5px; }
.footer-about p { margin: 8px 0 0; max-width: 90ch; line-height: 1.55; }
.footer-updated { margin: 0; color: #8f99b3; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols a { padding-block: 3px; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .footer-band { height: 80px; background-size: auto 100px; background-position: right 10px bottom -10px; }
}

@media (max-width: 600px) {
  .site-header h1 { font-size: 2rem; }
  .table-controls { flex-direction: column; align-items: stretch; }
}

/* --- HHS records and paged lists ------------------------------------------ */

.method-note {
  max-width: 720px;
  margin: -8px 0 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.method-note summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.method-note p { margin: 8px 0 0; }

.record-row .source-links { font-size: 0.85rem; }
.record-row .source-links a { font-weight: 600; }

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.show-more-row td,
div.show-more-row {
  text-align: center;
  padding: 14px 8px;
}

.tab-btn:focus-visible,
.policy-subtab-btn:focus-visible,
.subtab-btn:focus-visible,
.link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
td.nowrap { white-space: nowrap; }

/* --- Accessibility -------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Off-screen until a keyboard user tabs to it, then the first thing on the page. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--accent);
  font-weight: 700;
  border: 2px solid var(--accent);
  border-radius: 2px;
}
.skip-link:focus { top: 12px; }

/* Elements that receive focus programmatically (a tab's heading after navigation, the
   main region after the skip link) shouldn't show a focus ring the user never asked for. */
[tabindex="-1"]:focus { outline: none; }

.table-scroll:focus-visible,
.skip-link:focus-visible,
.result-item:focus-visible,
.issue-pill:focus-visible,
.sort-toggle:focus-visible,
.bill-card-summary:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On touch screens, give small inline links and text buttons a hit area of at least
   24px (WCAG 2.2 target size) without changing how lines of text are laid out. */
@media (pointer: coarse) {
  .link-btn,
  td a,
  .record-row a,
  .issue-item a,
  .sources-list a,
  .source-links a,
  .photo-card .caption a,
  .archive-card > a {
    display: inline-block;
    padding-block: 5px;
  }
  .method-note summary { padding-block: 4px; }
  .show-more-row .link-btn { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.news-excerpt {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 2px 0 6px;
  max-width: 70ch;
}

.news-passages {
  margin: 0 0 6px;
}

.news-passages summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--accent);
}

.news-passages-body {
  border-left: 2px solid var(--border);
  padding-left: 10px;
  margin-top: 4px;
}

/* Guide to the archive at the top of the Biography: one card per major section. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 40px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover,
.stat-card:focus-visible {
  border-color: var(--accent);
  border-top-color: var(--accent);
  box-shadow: 0 4px 14px rgba(26, 36, 56, 0.08);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.stat-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { padding: 14px 12px 12px; }
  .stat-number { font-size: 1.6rem; }
  .stat-label { font-size: 0.7rem; }
}

/* Long tables become one card per row on phones; each cell shows its column name. */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; }
  .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-scroll tr { border: 1px solid var(--border); background: var(--paper); padding: 10px 12px; margin-bottom: 10px; }
  .table-scroll td { border: none; padding: 3px 0; }
  .table-scroll td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .table-scroll td.nowrap { white-space: normal; }
}

/* Connections */
.web-figure { margin: 8px 0 18px; }
.connections-web { width: 100%; max-width: 820px; height: auto; display: block; margin: 0 auto; }
.web-line { stroke: var(--border); stroke-linecap: round; }
.web-node circle { fill: var(--paper); stroke-width: 3; }
.web-node text { font: 600 13px var(--font-sans); fill: var(--ink); }
.web-node:hover text, .web-node:focus text { fill: var(--accent); text-decoration: underline; }
.web-center { fill: var(--navy); }
.web-center-label { font: 15px var(--font-serif); fill: var(--navy); paint-order: stroke; stroke: var(--cream); stroke-width: 5px; stroke-linejoin: round; }
.web-node text { paint-order: stroke; stroke: var(--cream); stroke-width: 4px; stroke-linejoin: round; }
.web-presidents { --g: #8f3a2b; }
.web-senate-colleagues { --g: #1a2438; }
.web-the-1976-campaign { --g: #b07d2b; }
.web-the-reagan-administration { --g: #3f6b8f; }
.web-civil-rights { --g: #2f6b3f; }
.web-line { stroke: var(--g); stroke-opacity: 0.45; }
.web-node circle { stroke: var(--g); }
.web-figure figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 0.8rem; color: var(--ink-soft); }
.web-key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--g); margin-right: 5px; vertical-align: -1px; }

.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.conn-card { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--g); padding: 16px 18px; display: grid; gap: 8px; scroll-margin-top: 90px; }
.conn-card h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; color: var(--navy); }
.conn-card p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.conn-role { color: var(--ink-soft); font-size: 0.84rem !important; }
.conn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.76rem; background: var(--cream); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; color: var(--ink); }
.conn-record summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); padding-block: 4px; }
.conn-record h4 { margin: 10px 0 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.conn-record ul, .conn-sources ul { margin: 0; padding-left: 18px; font-size: 0.85rem; display: grid; gap: 3px; }
.conn-sources { font-size: 0.82rem; }
@media (max-width: 640px) { .web-node text { font-size: 17px; } .web-center-label { font-size: 18px; } }

/* Cosponsors of one of his bills, folded under the count, with sign-on dates. */
.cosponsor-list { margin-top: 6px; }
.cosponsor-list summary { cursor: pointer; color: var(--accent); min-height: 24px; display: inline-flex; align-items: center; }
.cosponsor-list ul { margin: 6px 0; padding-left: 1.2em; display: grid; gap: 2px; }
.cosponsor-list .section-note { margin: 4px 0 0; font-size: 0.8rem; }
li .bill-date { color: var(--ink-soft); font-size: 0.85em; }