/* The home page, The Daily (templates/front.html, _front_parts.html,
   front_page.py). Everything is built from the tokens in styles.css, so
   dark mode follows on its own. Prefix: hc-. */

.hc {
  width: min(900px, calc(100% - 2rem));
  margin-inline: auto;
  padding: var(--space-4) 0 var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}


/* ---- Shared parts ---------------------------------------------------- */
.hc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
  min-width: 0;
}
.hc-kicker {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font: bold .7rem/1.3 var(--ui-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hc-note { margin: var(--space-2) 0 0; color: var(--muted); font: var(--text-min)/1.45 var(--ui-font); }
.hc-kicker-row { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.hc-kicker-note { font-weight: normal; letter-spacing: .04em; }
/* A pair of modules side by side; one alone takes the whole width. */
.hc-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); align-items: start; }

.hc-empty h2 { margin: 0; font: bold 1.4rem Georgia, "Times New Roman", serif; }
.hc-empty p { margin: var(--space-2) 0 0; color: var(--body-copy); }


/* A portrait: the member photo, cropped like the debate avatars. */
.hc-face {
  --face: 56px;
  display: inline-block;
  flex: none;
  width: var(--face);
  height: calc(var(--face) * 1.25);
  overflow: hidden;
  border-radius: 6px;
  background: var(--avatar-bg);
  border-bottom: 3px solid var(--party-colour, var(--line));
}
.hc-face { display: inline-flex; align-items: center; justify-content: center; }
.hc-face .no-photo { width: 70%; }
.hc-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hc-face-xs { --face: 30px; border-radius: 4px; border-bottom-width: 2px; }
.hc-face-sm { --face: 44px; }
.hc-face-md { --face: 64px; }
.hc-face-lg { --face: 96px; border-radius: 8px; }

/* ---- Question Period --------------------------------------------------- */
.hc-dodge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "text dots" "foot foot";
  gap: var(--space-4) var(--space-5);
  align-items: center;
}
.hc-dodge-text { grid-area: text; }
.hc-dots { grid-area: dots; }
.hc-dodge-foot { grid-area: foot; }
.hc-dodge-title { margin: 0; font-weight: normal; }
.hc-big {
  display: block;
  font: bold clamp(2.2rem, 5vw, 2.9rem)/1.05 Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hc-big-label { display: block; margin-top: var(--space-1); font: 1.15rem/1.3 Georgia, "Times New Roman", serif; color: var(--body-copy); }
.hc-legend { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--muted); font: var(--text-min) var(--ui-font); }
.hc-legend .hc-dot { width: 12px; height: 12px; border-radius: 3px; }
.hc-legend .hc-dot + span { margin-right: var(--space-3); }

.hc-dots { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; margin: 0; padding: 0; list-style: none; }
.hc-dots li { display: block; }
.hc-dot {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--good-tint);
  border: 1.5px solid color-mix(in srgb, var(--good) 55%, transparent);
}
.hc-legend .hc-dot { display: inline-block; }
.hc-dot.is-dodged { background: var(--qp-dodged); border-color: var(--qp-dodged); }
/* The ring follows the square's own corners: a shadow, not an outline. */
a.hc-dot:hover, a.hc-dot:focus-visible, a.hc-dot.is-tipped {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink);
}


.hc-dodge-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--subtle-line);
}
.hc-history { margin: 0; }
.hc-weekbars { display: block; width: 250px; height: auto; }
.hc-history .hc-note { margin-top: var(--space-1); max-width: 250px; }
.hc-weekbar-track { fill: var(--subtle-line); }
.hc-weekbar { fill: var(--qp-dodged); }
.hc-weekbar-value { fill: var(--body-copy); font: bold var(--text-label) var(--ui-font); }
.hc-weekbar-day { fill: var(--muted); font: var(--text-label) var(--ui-font); }
.hc-break { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.hc-dodgers-wrap { min-width: 0; }
.hc-dodgers { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hc-dodgers a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  font: .95rem/1.3 var(--ui-font);
  text-decoration: none;
}
.hc-dodger-text { display: grid; gap: var(--space-1); min-width: 0; }
.hc-dodger-name { font: bold 1rem/1.2 Georgia, "Times New Roman", serif; }
.hc-dodger-count { color: var(--body-copy); font-size: .88rem; }
.hc-dodgers a:hover .hc-dodger-name { color: var(--link); text-decoration: underline; }
/* The minister's answers as small squares, matching the grid above. */
.hc-minidots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .15rem; }
.hc-minidots i { width: 11px; height: 11px; border-radius: 2px; background: var(--good-tint); border: 1px solid color-mix(in srgb, var(--good) 55%, transparent); }
.hc-minidots i.is-dodged { background: var(--qp-dodged); border-color: var(--qp-dodged); }

/* ---- The main debate -------------------------------------------------- */
.hc-lead-title { margin: 0; font: bold clamp(1.5rem, 3.4vw, 2rem)/1.15 Georgia, "Times New Roman", serif; }
.hc-lead-title a { color: var(--ink); text-decoration: none; }
.hc-lead-title a:hover { text-decoration: underline; }
.hc-lead-bill { margin: var(--space-2) 0 0; color: var(--body-copy); font: .95rem/1.45 var(--ui-font); max-width: 48rem; }
.hc-lead-bill .bill-number { margin-right: var(--space-1); }
.hc-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--subtle-line); }
.hc-voice { display: flex; flex-direction: column; gap: var(--space-2); }
.hc-voice-who { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.hc-voice-who > span { display: grid; justify-items: start; gap: var(--space-1); }
.hc-voice-who strong { font: bold .95rem/1.2 Georgia, "Times New Roman", serif; }
.hc-voice-who:hover strong { text-decoration: underline; }
.hc-voice-quote { flex: 1; margin: 0; font: 1rem/1.45 Georgia, "Times New Roman", serif; }
.hc-voice-quote a { color: var(--ink); text-decoration: none; }
.hc-voice-quote a:hover { text-decoration: underline; text-decoration-color: var(--line); }
.hc-voice-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.hc-lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--subtle-line); }
.hc-also { flex: 1 1 22rem; margin: 0; color: var(--muted); font: .82rem/1.6 var(--ui-font); }
.hc-also-head { color: var(--body-copy); font-weight: bold; margin-right: var(--space-1); }
.hc-also a:where(:not(.more-link)) { color: var(--body-copy); text-underline-offset: .2em; white-space: nowrap; }
.hc-also a:where(:not(.more-link)):hover { color: var(--link); }
.hc-also-all { margin-left: var(--space-2); }

/* ---- Top and bottom marks ---------------------------------------------- */
.hc-marks-col.is-top { border-top: 4px solid var(--g-a); }
.hc-marks-col.is-bottom { border-top: 4px solid var(--g-f); }
.hc-mark { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; }
.hc-mark-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--ink); text-decoration: none; }
.hc-mark-name { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; font: var(--text-min) var(--ui-font); }
.hc-mark-name strong { font: bold 1.02rem/1.2 Georgia, "Times New Roman", serif; }
.hc-mark-who:hover strong { text-decoration: underline; }
/* A statement's grade (templates/home/_parts.html, statement_grade). */
.hc-sgrade { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); color: var(--muted); text-decoration: none; }
.hc-sgrade.is-stacked { margin-right: 0; }
.hc-sgrade-label { font: bold var(--text-label)/1.15 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; max-width: 5.5em; }
.hc-sgrade.is-stacked { flex-direction: column; gap: var(--space-1); text-align: center; }
.hc-sgrade.is-stacked .hc-sgrade-label { max-width: none; font-size: var(--text-label); }
.hc-sgrade:hover .grade-ring { background: var(--hover-tint); }
.hc-sgrade:hover .hc-sgrade-label { color: var(--link); }
.hc-quote { grid-column: 1 / -1; margin: var(--space-1) 0 0; font: 1.08rem/1.45 Georgia, "Times New Roman", serif; }
.hc-quote a { color: var(--ink); text-decoration: none; }
.hc-quote a:hover { text-decoration: underline; text-decoration-color: var(--line); }
.hc-mark-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.hc-mark-foot .hc-note { margin: 0; }
/* The tags get their own row between the quote and the footer, as on a
   debate's cards, so the footers of cards side by side line up whether
   or not a card has tags. The quote takes the spare height above them. */
.hc-voice > .statement-marks, .party-pick > .statement-marks { margin: 0; }
.hc-mark > .statement-marks { grid-column: 1 / -1; margin: 0; }
/* "OUR TRANSLATION ▾" at the right of a quote card's foot: the bubble
   footer's version menu (_bubble.html, card_version_picker), small
   capitals in the muted ink; its menu opens leftward from the right
   edge. The official wording can run long, so in a card it is cut at
   eight lines; the quote is a link to the whole statement. */
.card-version-picker {
  margin-left: auto;
  color: var(--muted);
  font: var(--text-label)/1.2 var(--ui-font);
  text-transform: uppercase;
}
.card-version-picker .version-menu { left: auto; right: 0; }
.version-scope .is-other-version a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
.hc-mark-more { margin: var(--space-4) 0 0; padding: var(--space-2) 0 0; list-style: none; border-top: 1px solid var(--subtle-line); }
.hc-mark-more li { padding: var(--space-2) 0; }
.hc-mark-more li + li { border-top: 1px solid var(--subtle-line); }

/* ---- Report card by party ----------------------------------------------
   One row per party: its tag, a thin bar of its letters, its average
   grade. The bar uses the grade colours as tints, so five of them stack
   quietly; the ring keeps the full colour. Fits the 340px rail and the
   wider card alike. */
.hc-party-rows { display: grid; gap: var(--space-3); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.hc-party-rows li { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) 36px; align-items: center; gap: var(--space-3); }
.hc-party-name { justify-self: start; text-decoration: none; border-radius: 3px; }
.hc-party-name .party-badge { white-space: nowrap; }
.hc-party-name:hover .party-badge { text-decoration: underline; }
.hc-spread { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--subtle-line); }
.hc-spread-part { display: block; height: 100%; background: color-mix(in srgb, var(--band) 55%, var(--white)); }
.hc-spread-part + .hc-spread-part { border-left: 1.5px solid var(--white); }
.hc-spread-part.g-a { --band: var(--g-a); } .hc-spread-part.g-b { --band: var(--g-b); } .hc-spread-part.g-c { --band: var(--g-c); }
.hc-spread-part.g-d { --band: var(--g-d); } .hc-spread-part.g-f { --band: var(--g-f); }
.hc-parties .grade-ring { --size: 36px; justify-self: end; }
.hc-spread-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0 0; color: var(--muted); font: var(--text-min) var(--ui-font); }
.hc-spread-key span { display: inline-flex; align-items: center; gap: var(--space-1); }
.hc-spread-key i { width: 14px; height: 6px; border-radius: 3px; border: 0; }
.hc-parties.is-wide .hc-party-rows li { grid-template-columns: 10rem minmax(0, 1fr) 40px; }
.hc-parties.is-wide .hc-spread { height: 10px; }

/* ---- Bills on the move ------------------------------------------------- */
.hc-bill-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.hc-bill-rows li { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--subtle-line); }
.hc-bill-rows li:first-child { padding-top: 0; border-top: 0; }
.hc-bill-title { color: var(--ink); font: bold 1rem/1.25 Georgia, "Times New Roman", serif; text-decoration: none; }
.hc-bill-title:hover { text-decoration: underline; }
.hc-bill-what { color: var(--body-copy); font: .82rem/1.4 var(--ui-font); }
.hc-bill-rows .plain-mini { margin-top: .15rem; }
/* Full width (a long recess): two columns of bills. */
.hc-bills.is-wide .hc-bill-rows { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: var(--space-6); }
.hc-bills.is-wide .hc-bill-rows li:nth-child(2) { padding-top: 0; border-top: 0; }

/* ---- Who spoke -------------------------------------------------------- */
.hc-face-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.hc-face-grid a { position: relative; display: block; border-radius: 6px; }
.hc-face-grid a:hover .hc-face, .hc-face-grid a.is-tipped .hc-face, .hc-face-grid a:focus-visible .hc-face { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.hc-face-grid .grade-ring { position: absolute; right: -6px; bottom: -6px; }
.hc-face-more {
  display: flex !important; align-items: center; justify-content: center;
  width: 44px; height: 55px;
  border: 1px dashed var(--control-line);
  color: var(--body-copy);
  font: bold var(--text-min) var(--ui-font);
  text-decoration: none;
}
.hc-face-more:hover { border-color: var(--strong-line); background: var(--hover-tint); }

.hc-taxes-bar { display: flex; height: 12px; overflow: hidden; border-radius: 6px; }
.hc-taxes-part { display: block; height: 100%; }
.hc-taxes-part + .hc-taxes-part { border-left: 2px solid var(--white); }
.hc-taxes-part.spend-1 { background: var(--spend-1); } .hc-taxes-part.spend-2 { background: var(--spend-2); }
.hc-taxes-part.spend-3 { background: var(--spend-3); } .hc-taxes-part.spend-4 { background: var(--spend-4); }
.hc-taxes-chart { display: grid; gap: var(--space-2); min-width: 0; }
.hc-taxes-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--muted); font: var(--text-min) var(--ui-font); }
.hc-taxes-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.hc-taxes-legend i { width: 9px; height: 9px; border-radius: 2px; }
.hc-taxes-legend .spend-1 { background: var(--spend-1); } .hc-taxes-legend .spend-2 { background: var(--spend-2); }
.hc-taxes-legend .spend-3 { background: var(--spend-3); } .hc-taxes-legend .spend-4 { background: var(--spend-4); }


/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 760px) {
  .hc-dodge { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "dots" "foot"; }
  .hc-dodge-foot { grid-template-columns: minmax(0, 1fr); }
  .hc-dodgers-wrap { justify-self: stretch; }
  .hc-dot { width: 24px; height: 24px; }
  .hc-card { padding: var(--space-4); }
}

/* ---- Wide windows: a right rail ----------------------------------------
   Below 1280px the day's modules (.hc-col) and the rail (.hc-rail: bills,
   the report card, spending) are one column, the rail a pair at its foot.
   From 1280px the page widens with the header (styles.css, the wide
   frame) and the rail stands beside the day, one card above another. */
.hc-col { display: contents; }
@media (min-width: 1280px) {
  .is-overview .hc {
    width: min(1200px, calc(100% - 4rem));
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: var(--space-5);
    align-items: start;
  }
  .is-overview .hc > :not(.hc-col):not(.hc-rail) { grid-column: 1 / -1; }
  .is-overview .hc-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
  .is-overview .hc-pair.hc-rail { grid-template-columns: minmax(0, 1fr); }
}


/* ---- The cover (_front_cover.html) -------------------------------------
   A band edge to edge under the header, its content in the page's column:
   the heading, the drawn Centre Block, and one statement on its way from
   the official record (a sheet set down slightly crooked) to plain words.
   It sits in the page's wash (styles.css, body), so nothing marks where
   the band ends. Prefix: ia-. */
:root {
  /* Question Period's "Didn't answer" fill (squares, bars, the legend). In dark
     mode a deeper, less luminous amber: --caution there is bright enough
     for an icon or a word, too loud as a block of solid squares. */
  --qp-dodged: var(--caution);
  --ia-copper: #b9cbbf;
  --ia-copper-line: #6f8f7d;
  --ia-stone: #fbfaf7;
  --ia-flag: #c8262c;
  --ia-sheet-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(60, 40, 20, .10);
}
html[data-theme="dark"] {
  --ia-copper: #2c3e37;
  --ia-copper-line: #6f9583;
  --ia-stone: #1b2027;
  --ia-flag: #d4474c;
  --ia-sheet-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .4);
  --qp-dodged: #a25f35;
}
.is-front .page-body { overflow-x: clip; }
/* The home page's cards take the statement cards' shadow. */
.hc-card { box-shadow: var(--bubble-shadow); }

.ia-cover { margin: calc(-1 * var(--space-4)) calc(50% - 50vw) 0; background: var(--wash); }
.ia-cover-inner { width: min(900px, calc(100% - 2rem)); margin-inline: auto; padding: var(--space-6) 0 var(--space-6); }
.ia-cover-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--space-6); align-items: end; }
.ia-title { margin: 0; color: var(--ink); font: bold clamp(1.6rem, 3.8vw, 2.15rem)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.ia-sub { margin: var(--space-2) 0 0; max-width: 28rem; color: var(--body-copy); font: 1.02rem/1.5 Georgia, "Times New Roman", serif; }

.ia-skyline { display: block; width: 520px; max-width: 100%; height: auto; border-bottom: 1.5px solid var(--ink); }
.ia-skyline .ia-roof { fill: var(--ia-copper); stroke: var(--ia-copper-line); stroke-width: 1.2; stroke-linejoin: round; }
.ia-skyline .ia-stone { fill: var(--ia-stone); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.ia-skyline .ia-detail { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; }
.ia-skyline .ia-flag { fill: var(--ia-flag); }

/* The translation step: sheet, arrow, plain words. */
.ia-step { display: grid; grid-template-columns: minmax(0, .95fr) 64px minmax(0, 1.15fr); align-items: center; gap: var(--space-2); margin: var(--space-6) 0 0; }
.ia-pair-kicker { margin: 0 0 var(--space-2); color: var(--muted); font: bold var(--text-label)/1.3 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
.ia-sheet {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--ia-sheet-shadow);
  transform: rotate(-2.4deg);
}
.ia-sheet-text {
  margin: 0; color: var(--muted); font: var(--text-min)/1.5 var(--ui-font);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.ia-arrow { width: 64px; height: 40px; fill: none; stroke: var(--ia-flag); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ia-words { margin: 0; }
/* The grade sits with the words it grades, behind a faint rule. */
.ia-words-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.ia-words-text { margin: 0; color: var(--ink); font: 1.22rem/1.42 Georgia, "Times New Roman", serif; }
.ia-words-body .hc-sgrade { padding-left: var(--space-4); border-left: 1px solid var(--line); align-self: stretch; justify-content: center; }
.ia-words-body .hc-sgrade.is-stacked .hc-sgrade-label { max-width: 5.5em; }
.ia-words-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.ia-plain-who { flex: 1; min-width: 0; font: .82rem/1.3 var(--ui-font); color: var(--ink); }
.ia-plain-who .party-badge { margin-left: var(--space-1); vertical-align: 1px; }

@media (min-width: 1280px) {
  /* The wide frame: the band's column grows with the header. */
  .is-overview .ia-cover-inner { width: min(1200px, calc(100% - 4rem)); }
  .is-overview .ia-cover-top { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
  .is-overview .ia-skyline { width: 640px; }
  .is-overview .ia-step { grid-template-columns: minmax(0, .8fr) 72px minmax(0, 1.2fr); }
}
@media (max-width: 640px) {
  .ia-cover-inner { padding: var(--space-5) 0 var(--space-6); }
  .ia-cover-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ia-sub { font-size: .95rem; }
  .ia-skyline { width: 100%; }
  .ia-step { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5); }
  .ia-sheet { margin-right: var(--space-6); padding: var(--space-4); }
  .ia-sheet-text { -webkit-line-clamp: 4; line-clamp: 4; }
  .ia-arrow { justify-self: center; transform: rotate(80deg); margin: calc(-1 * var(--space-1)) 0 calc(-1 * var(--space-1)); }
  .ia-words-text { font-size: 1.1rem; }
  /* The grade under the words, ring and label on one line: beside them
     it took a third of the width and squeezed its label. */
  .ia-words-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ia-words-body .hc-sgrade,
  .ia-words-body .hc-sgrade.is-stacked { flex-direction: row; justify-content: flex-start; gap: var(--space-2); padding-left: 0; border-left: 0; text-align: left; }
  .ia-words-body .hc-sgrade.is-stacked .hc-sgrade-label { max-width: none; }
  .ia-words-foot { margin-top: var(--space-4); }
}

/* ---- Federal spending (static card) ------------------------------------ */
.hc-stack { display: grid; gap: var(--space-4); min-width: 0; }
.hc-stack:empty { display: none; }
.hc-taxes { display: grid; gap: var(--space-3); }
.hc-taxes .hc-kicker { margin: 0; }
.hc-taxes-text { margin: 0; font: .9rem var(--ui-font); color: var(--body-copy); }
.hc-taxes-text strong { display: block; color: var(--ink); font: bold 1.15rem Georgia, "Times New Roman", serif; }

/* ---- Card headers: the kicker left, the card's continuation link right
   (ui-system.md, 14). */
.hc-kicker-row { align-items: baseline; }
.hc-kicker-row { flex-wrap: nowrap; }
.hc-kicker-row > :first-child { min-width: 0; }
.hc-kicker-row .more-link { flex: none; white-space: nowrap; letter-spacing: 0; text-transform: none; }

/* ---- The report card's rows: tag over its count, the bar, a small ring. */
.hc-party-rows li { grid-template-columns: 7.6rem minmax(0, 1fr) 28px; }
.hc-party-who { display: grid; justify-items: start; gap: .15rem; min-width: 0; }
.hc-party-n { color: var(--muted); font: var(--text-min) var(--ui-font); font-variant-numeric: tabular-nums; }
.hc-parties .grade-ring { --size: 28px; --edge: 1.5px; justify-self: end; }
.hc-parties.is-wide .hc-party-rows li { grid-template-columns: 10rem minmax(0, 1fr) 32px; }
.hc-parties.is-wide .grade-ring { --size: 32px; }
.hc-spread-key-avg { margin-left: auto; }

/* ---- The party report card page (/report-card) -------------------------- */
.party-report .lede { margin-bottom: var(--space-4); }
.party-report h1 { margin-bottom: var(--space-4); }
.article-page section.party-card { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5) var(--space-4); border-top: 1px solid var(--line); }
.party-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.party-card-head h2 { margin: 0; font-size: 1rem; }
.party-card-head h2 .party-badge { font-size: .8rem; padding: var(--space-1) var(--space-2); }
.party-card-grade { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--muted); font: var(--text-min)/1.3 var(--ui-font); text-align: right; }
.party-card-grade b { display: block; color: var(--body-copy); font-weight: normal; }
.party-card-spread { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.party-card-spread .hc-spread { height: 10px; }
/* On its own page the bar isn't competing with anything, so the full
   grade colours read clearest, with a 2px gap between bands. */
.party-card-spread .hc-spread-part { background: var(--band); }
.party-card-spread .hc-spread-part + .hc-spread-part { border-left-width: 2px; }
.party-card-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--muted); font: var(--text-min) var(--ui-font); font-variant-numeric: tabular-nums; }
.party-card-counts span { display: inline-flex; align-items: center; gap: var(--space-1); }
.party-card-counts i { width: 14px; height: 6px; border-radius: 3px; }
.party-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--subtle-line); }
.article-page .party-picks li + li { margin-top: 0; }
.party-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.party-pick .hc-kicker { margin: 0; }
.party-pick-when { display: block; color: var(--muted); font: var(--text-min) var(--ui-font); }
.party-card-more { margin: var(--space-4) 0 0; text-align: right; }
.article-page section.party-empty { padding: var(--space-4) var(--space-5); }
.party-empty h2 { margin: 0; }
.party-empty p { margin: var(--space-2) 0 var(--space-3); color: var(--body-copy); }

/* ---- Phone rhythm ----------------------------------------------------
   On a phone the cards are a column: more space between them than
   inside them, so each reads as one unit; the sides stay at the gutter's
   width so the text keeps its line length. */
@media (max-width: 640px) {
  .hc, .hc-pair, .hc-stack, .is-overview .hc-col { gap: var(--space-5); }
  .hc-card { padding: var(--space-5) var(--space-4); }
}
/* The main debate's voices, stacked (one column below 520px): a hairline
   between them, so one speaker's grade doesn't run into the next name. */
@media (max-width: 520px) {
  .hc-voices { gap: 0; }
  .hc-voice + .hc-voice { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--subtle-line); }
}