:root {
  --ink: #112433;
  --muted: #5c6b76;
  --paper: #f5f1e8;
  --card: #fffdf8;
  --line: #d7d0c3;
  --blue: #0d4f72;
  --blue-dark: #082f49;
  --gold: #c7962d;
  --dem: #2e67b1;
  --rep: #b43d39;
  --lib: #b89018;
  --shadow: 0 18px 44px rgba(24, 37, 46, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: white; padding: .7rem 1rem; }

.family-hero {
  color: white;
  background:
    radial-gradient(circle at 85% 20%, rgba(199,150,45,.26), transparent 30%),
    linear-gradient(130deg, #082f49 0%, #0b405e 55%, #0d4f72 100%);
  padding: 3.2rem max(1.25rem, calc((100vw - 1180px) / 2)) 3rem;
}
.family-breadcrumbs { display: flex; gap: .45rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.72); }
.family-breadcrumbs a { text-decoration: none; }
.family-kicker { margin: 1.45rem 0 .55rem; color: #f1ce72; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.family-hero h1 { max-width: 900px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 4.35rem); line-height: 1.02; }
.family-lede { max-width: 820px; margin: 1rem 0 0; color: rgba(255,255,255,.86); font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.6; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.hero-meta span, .hero-meta a { border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: .45rem .75rem; background: rgba(255,255,255,.07); font-size: .82rem; text-decoration: none; }

.family-main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 5rem; }
.family-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.family-section, .family-aside-card {
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.section-heading { padding: 1.35rem 1.45rem 1rem; border-bottom: 1px solid var(--line); }
.section-heading p { margin: 0 0 .35rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.section-body { padding: 1.35rem 1.45rem; }
.section-body > :first-child { margin-top: 0; }
.section-body > :last-child { margin-bottom: 0; }
.coverage-note { margin: 0; border-left: 4px solid var(--gold); padding: .9rem 1rem; background: #fff8e7; color: #50441f; line-height: 1.55; }
.status-banner { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid #cddde6; border-radius: 13px; background: #edf6fa; }
.status-banner strong { display: block; margin-bottom: .22rem; color: var(--blue-dark); }
.status-banner p { margin: 0; color: #405766; line-height: 1.5; }

.party-group { margin-bottom: 1.35rem; }
.party-group:last-child { margin-bottom: 0; }
.party-heading { display: flex; align-items: center; gap: .65rem; margin: 0 0 .7rem; font-size: 1rem; }
.party-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); }
.party-democratic .party-dot { background: var(--dem); }
.party-republican .party-dot { background: var(--rep); }
.party-libertarian .party-dot { background: var(--lib); }
.candidate-list, .directory-list, .source-list, .link-list { display: grid; gap: .65rem; }
.candidate-row, .directory-row, .source-row, .link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: .9rem 1rem;
  background: white;
  text-decoration: none;
}
.candidate-row:hover, .directory-row:hover, .link-row:hover { border-color: #8eaeba; box-shadow: 0 8px 20px rgba(13,79,114,.1); }
.candidate-row strong, .directory-row strong, .link-row strong { display: block; }
.candidate-row small, .directory-row small, .link-row small { display: block; margin-top: .2rem; color: var(--muted); line-height: 1.4; }
.result-number { text-align: right; white-space: nowrap; }
.result-number strong { font-variant-numeric: tabular-nums; }
.result-number small { color: var(--muted); }
.candidate-row.is-withdrawn { background: #f4f2ee; color: #6d6a64; }

.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fact { border: 1px solid var(--line); border-radius: 13px; padding: .85rem .95rem; background: white; }
.fact span { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fact strong { display: block; margin-top: .3rem; line-height: 1.35; }

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.finance-summary-grid > div {
  border: 1px solid #c9d9e1;
  border-radius: 13px;
  padding: 1rem;
  background: #edf6fa;
}
.finance-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}
.finance-summary-grid strong {
  display: block;
  margin-top: .35rem;
  color: var(--blue-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.finance-list { display: grid; gap: .7rem; margin-top: 1rem; }
.finance-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 1rem;
  background: white;
}
.finance-candidate strong { display: block; }
.finance-candidate small { display: block; margin-top: .25rem; color: var(--muted); line-height: 1.4; }
.finance-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.finance-values div { min-width: 0; }
.finance-values dt { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.finance-values dd { margin: .22rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.finance-breakdown {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}
.finance-breakdown summary {
  cursor: pointer;
  color: var(--blue);
  font-size: .84rem;
  font-weight: 800;
}
.finance-breakdown summary:hover { text-decoration: underline; }
.finance-ranking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .8rem;
}
.finance-ranking-grid section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: .8rem;
  background: #fbfaf6;
}
.finance-ranking-grid h4 { margin: 0 0 .55rem; font-size: .85rem; }
.finance-ranking-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: finance-rank; }
.finance-ranking-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: start;
  border-top: 1px solid #e4ded2;
  padding-top: .45rem;
  counter-increment: finance-rank;
  font-size: .78rem;
}
.finance-ranking-list li:first-child { border-top: 0; padding-top: 0; }
.finance-ranking-list li > span:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .4rem; }
.finance-ranking-list li > span:first-child::before { content: counter(finance-rank) "."; color: var(--muted); font-weight: 800; }
.finance-ranking-list strong { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.finance-ranking-list small { grid-column: 2; display: block; margin-top: .12rem; color: var(--muted); line-height: 1.35; }
.finance-ranking-list li > span:last-child { font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-ranking-note, .finance-ranking-empty { margin: .7rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.finance-unmatched { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.finance-source-note { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.finance-source-note a { color: var(--blue); font-weight: 750; text-decoration: none; }
.candidate-finance-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.candidate-finance-pair span { border: 1px solid var(--line); border-radius: 10px; padding: .65rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.candidate-finance-pair strong { display: block; margin-top: .25rem; color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }

.profile-summary { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.portrait, .portrait-placeholder { width: 170px; aspect-ratio: 4 / 5; border-radius: 15px; border: 1px solid var(--line); background: #e8e2d8; object-fit: cover; object-position: top center; }
.portrait-placeholder { display: grid; place-items: center; color: var(--blue-dark); font: 700 3rem Georgia, serif; }
.portrait-note { display: block; margin-top: .45rem; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.profile-copy h2 { margin: 0 0 .45rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; }
.profile-copy p { line-height: 1.6; }

.current-holder { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: center; }
.current-holder img, .current-holder .portrait-placeholder { width: 84px; height: 102px; border-radius: 12px; object-fit: cover; object-position: top center; font-size: 1.5rem; }
.current-holder h3 { margin: 0 0 .25rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
.current-holder p { margin: .15rem 0; color: var(--muted); }

.family-aside { position: sticky; top: 1rem; }
.family-aside-card { padding: 1.1rem; }
.family-aside-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.family-aside-card p { color: var(--muted); line-height: 1.55; }
.family-aside-card a { display: block; margin-top: .65rem; color: var(--blue); font-weight: 750; text-decoration: none; }
.family-aside-card a:hover { text-decoration: underline; }

.directory-toolbar { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.directory-toolbar a { border: 1px solid var(--line); border-radius: 999px; padding: .48rem .8rem; background: white; text-decoration: none; font-size: .85rem; }
.directory-toolbar a:hover { border-color: var(--blue); }
.directory-group { margin-bottom: 1.3rem; }
.directory-group h2 { margin: 0 0 .65rem; font-family: Georgia, "Times New Roman", serif; }

.map-card { padding: 1rem; }
.map-card img { width: 100%; max-height: 430px; display: block; object-fit: contain; }
.map-card figcaption { margin-top: .8rem; color: var(--muted); line-height: 1.5; }

.source-row { display: block; }
.source-row strong { display: block; margin-bottom: .25rem; }
.source-row p { margin: 0 0 .35rem; color: var(--muted); line-height: 1.5; }
.source-row a { color: var(--blue); font-weight: 700; text-decoration: none; }

@media (max-width: 820px) {
  .family-grid { grid-template-columns: 1fr; }
  .family-aside { position: static; }
  .profile-summary { grid-template-columns: 115px minmax(0, 1fr); }
  .portrait, .portrait-placeholder { width: 115px; }
}

@media (max-width: 560px) {
  .family-hero { padding-top: 2.2rem; }
  .family-main { width: min(100% - 1rem, 1180px); }
  .family-section, .family-aside-card { border-radius: 13px; }
  .section-heading, .section-body { padding-left: 1rem; padding-right: 1rem; }
  .fact-grid { grid-template-columns: 1fr; }
  .finance-summary-grid { grid-template-columns: 1fr; }
  .finance-values { grid-template-columns: 1fr 1fr; }
  .finance-ranking-grid { grid-template-columns: 1fr; }
  .profile-summary { grid-template-columns: 1fr; }
  .portrait, .portrait-placeholder { width: 145px; }
  .candidate-row, .directory-row, .link-row { grid-template-columns: 1fr; }
  .result-number { text-align: left; }
}