/*
 * Maryland Money Trail: the rowhouse block.
 * Producer: hand-authored for marylandmoneytrail from the approved board (MD-Home / MD-Race, October 11, 2026).
 * A brick masthead with a black cornice and dentils sits on marble steps; the hero is one row of copy, the
 * address finder and a painted window screen. Owner change, October 11, 2026: the homepage rowhouse block was
 * removed (the spotlight's district picker does that job); race pages keep their numbered door and door chips.
 * Shared behaviour lives in assets/site.js, assets/news.js and assets/district-search.js (masters in ../launch/).
 * Palette is state-inspired, not official. Doors and bricks never carry data: supports/opposes use
 * violet #4F3A86 (solid, ▲) and amber #8A4B00 (dashed outline, ▼), never brand colours.
 */

:root {
  --marble: #F6F4EF;
  --formstone: #E3DDD2;
  --mortar: #CFC6B6;
  --white: #FFFFFF;
  --ink: #1C1E22;
  --muted: #4E4A45;
  --brick: #8B3A2C;
  --brick-light: #B5523F;
  --bay: #1F4A6B;
  --sky: #A9C7DA;
  --gold: #E2A93B;
  --cream: #F4D9A1;
  --brass: #E2C27A;
  --support: #4F3A86;
  --oppose: #8A4B00;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --text: "Libre Franklin", "Franklin Gothic Book", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--marble); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--marble); color: var(--ink); font: 400 17px/1.6 var(--text); overflow-wrap: break-word; }
body > main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--brick); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.kicker { font: 700 13px/1.4 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brick); }

/* ---------- Required behaviour ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--marble); font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 1rem; top: 1rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bay); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- Masthead and footer: brick front, black cornice with dentils, marble steps ---------- */
.cornice { height: 20px; background-color: var(--ink); background-image: repeating-linear-gradient(90deg, var(--marble) 0 10px, transparent 10px 20px);
  background-size: 100% 8px; background-repeat: no-repeat; background-position: 0 100%; }
.masthead__front, .site-footer__front {
  background-color: var(--brick); color: var(--marble);
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(28, 30, 34, 0.14) 13px 14px);
}
.masthead__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--marble); text-decoration: none; }
.brand__mark { width: 50px; height: 50px; flex: none; }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__state { font-family: var(--display); font-size: 32px; }
.brand__trail { margin-top: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream); }
.brand:focus-visible, .site-nav a:focus-visible, .menu-button:focus-visible, .site-footer a:focus-visible { outline-color: var(--cream); }
.menu-button {
  min-height: 44px; padding: 0 16px; border: 2px solid var(--marble); background: transparent; color: var(--marble);
  font: 700 14px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.menu-button::after { content: " ▾"; content: " ▾" / ""; }
.menu-button[aria-expanded="true"] { background: var(--marble); color: var(--brick); }
.menu-button[aria-expanded="true"]::after { content: " ▴"; content: " ▴" / ""; }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 600; }
.site-nav a { display: flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 10px; color: var(--marble); text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--cream); }
.site-nav__cta a { margin-left: 6px; padding: 0 16px; background: var(--marble); color: var(--brick); font-weight: 700; border-bottom: 0; box-shadow: 0 4px 0 #D2CABC; }
.site-nav__cta a:hover { background: var(--white); }
.site-nav__cta a:focus-visible { outline-color: var(--cream); }
@media (max-width: 767px) {
  .masthead__bar { padding-block: 12px; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__state { font-size: 27px; }
  .site-nav { flex: 1 0 100%; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 6px; border-top: 1px solid rgba(246, 244, 239, 0.45); }
  .site-nav li { border-bottom: 1px solid rgba(246, 244, 239, 0.25); }
  .site-nav a { padding: 0 4px; }
  .site-nav__cta { border-bottom: 0 !important; padding-top: 10px; }
  .site-nav__cta a { margin: 0; justify-content: center; }
}
.steps { height: 18px; background: linear-gradient(var(--marble) 0 5px, var(--mortar) 5px 6px, #ECE7DE 6px 11px, var(--mortar) 11px 12px, var(--formstone) 12px 17px, var(--ink) 17px 18px); }

/* ---------- Homepage hero: one row of copy, the address finder and the painted screen ----------
   From 1100px the three sit side by side; from 700px the copy spans the top and the finder sits
   beside the screen; on phones they stack (copy, finder, then a smaller screen). */
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(28px, 4vw, 52px) clamp(32px, 4vw, 56px); }
.hero__copy { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.03; letter-spacing: -0.01em; text-wrap: balance; }
.hero__intro { max-width: 52ch; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem); line-height: 1.55; }
@media (min-width: 700px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "copy copy" "finder screen"; align-items: center; gap: 32px 40px; }
  .hero__copy { grid-area: copy; }
  .hero .finder { grid-area: finder; }
  .hero .screen { grid-area: screen; }
}
@media (min-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.85fr); grid-template-areas: "copy finder screen"; gap: 36px; }
  .hero h1 { font-size: clamp(2.6rem, 0.9rem + 2.5vw, 3.5rem); }
}
.finder {
  min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; margin-bottom: 18px; background: var(--white); border: 2px solid var(--ink);
  box-shadow: 0 8px 0 var(--formstone), 0 8px 0 2px var(--ink), 0 16px 0 var(--marble), 0 16px 0 2px var(--ink);
}
.finder h2 { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.9rem); line-height: 1.1; }
.finder__lede { font-size: 16px; }
.finder__form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.finder__form label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.finder__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; }
.finder__combo { position: relative; flex: 1 1 260px; min-width: 0; }
.finder__form input {
  width: 100%; min-height: 48px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.3 var(--text);
}
.finder__form input::placeholder { color: #6A655E; opacity: 1; }
.finder__form button {
  flex: 0 1 auto; min-height: 48px; padding: 8px 18px; border: 0; border-radius: 0; background: var(--brick); color: var(--white);
  font: 700 15px/1.3 var(--text); cursor: pointer;
}
.finder__form button:hover { background: #742F23; }
.finder__note { font-size: 13px; line-height: 1.55; color: var(--muted); }
.finder__suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); max-height: 18rem; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  background: var(--white); border: 2px solid var(--ink); box-shadow: 0 8px 0 var(--formstone);
}
.finder__option { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.finder__option + .finder__option { border-top: 1px solid var(--formstone); }
.finder__option:hover, .finder__option[aria-selected="true"] { background: var(--bay); color: var(--white); }
.screen { min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 699px) { .screen { width: min(100%, 320px); margin-inline: auto; } }
.screen__frame { padding: 14px; background: var(--marble); border: 2px solid var(--ink); box-shadow: inset 0 0 0 10px var(--white), inset 0 0 0 12px var(--ink); }
.screen__art { display: block; width: 100%; height: auto; }
.screen__sill { height: 12px; margin: 0 -10px; background: var(--white); border: 2px solid var(--ink); }
@media (max-width: 699px) { .screen__sill { margin-inline: -6px; } }

/* ---------- Section heads ---------- */
.sec-head { display: flex; flex-direction: column; gap: 10px; }
.sec-head h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); line-height: 1.05; }
.sec-head--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.sec-head--split > div { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-head--split > p { flex: 1 1 360px; max-width: 52ch; font-size: 16px; }

/* ---------- Ballot note and directory link (spotlight foot, race pages, listings) ---------- */
.ballot-note { display: flex; align-items: flex-start; gap: 10px; max-width: 72ch; font-size: 15px; line-height: 1.55; }
.ballot-note .ico { flex: none; width: 22px; height: 22px; margin: 1px 0 0; color: var(--brick); stroke-width: 1.8; }
.ballot-note a, .more-link a { font-weight: 600; }
.more-link { font-size: 15px; }
.more-link a { display: inline-block; padding-block: 11px; }

/* ---------- Supports / opposes (word + shape + fill/outline; data colours only) ---------- */
.pos { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; line-height: 1.45; }
.pos--support { padding: 4px 10px; background: var(--support); color: var(--white); }
.pos--oppose { padding: 2px 8px; border: 2px dashed var(--oppose); color: var(--oppose); }
.card-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; line-height: 1.45; }

/* ---------- Homepage spotlight and race-page evidence: the card beside the news ---------- */
.spotlight { border-top: 2px solid var(--ink); }
.spotlight__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; padding-top: 18px; border-top: 2px solid var(--ink); }
.spotlight__inner, .evidence-section__inner { display: flex; flex-direction: column; gap: 28px; padding-block: 56px; }
.evidence-section__inner { gap: 22px; padding-block: 48px 56px; }
.spotlight__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.spotlight__intro { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.spotlight__intro h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height: 1.05; }
.spotlight__intro > p:not(.kicker):not(.card-key) { max-width: 58ch; }
.spotlight__bar { flex: 0 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--white); border: 2px solid var(--ink); }
.race-picker__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.race-picker__select { min-height: 48px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); font: 400 16px/1.3 var(--text); }
.race-picker__button { min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: var(--bay); color: var(--white); font: 700 15px/1.3 var(--text); }
.race-picker__button:hover { background: #173A55; }
.spotlight__basis { font-size: 14px; line-height: 1.55; color: #3A3733; }
.spotlight__basis a { font-weight: 600; }

.card-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1100px) {
  .card-split:has(> .card-news) { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.75fr); grid-template-areas: "news card"; }
  .card-split > .race-card { grid-area: card; }
  .card-split > .card-news { grid-area: news; align-self: stretch; }
}
.race-card { min-width: 0; }
.race-card__more { margin-top: 18px; font-weight: 600; }
.race-card__more a { display: inline-block; padding-block: 11px; }

/* ---------- Evidence cards ---------- */
.evidence { margin: 0 0 8px; min-width: 0; background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 8px 0 var(--formstone), 0 8px 0 2px var(--ink); }
.evidence__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 16px; background: var(--bay); color: var(--marble);
  font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; }
.evidence__source { color: var(--cream); }
.evidence__frame { position: relative; margin: 16px; border: 1px solid #D2CABC; }
.evidence__frame iframe { display: block; width: 100%; border: 0; }
.evidence__frame.is-clamped { max-height: var(--clamp); overflow: hidden; }
.evidence__frame.is-clamped::after { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); }
.evidence__status { display: none; margin: 0; }
.evidence[data-state="pending"] .evidence__status,
.js .evidence[data-state="loading"] .evidence__status,
.js .evidence[data-state="slow"] .evidence__status { display: block; }
.js .evidence[data-state="loading"] .evidence__frame,
.js .evidence[data-state="slow"] .evidence__frame { min-height: 320px; background: repeating-linear-gradient(180deg, var(--marble) 0 13px, var(--formstone) 13px 14px); }
.js .evidence[data-state="loading"] .evidence__status,
.js .evidence[data-state="slow"] .evidence__status {
  position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; padding: 12px 14px; background: var(--white); border: 2px solid var(--ink); font-size: 15px;
}
.evidence[data-state="pending"] .evidence__frame { min-height: 180px; display: grid; place-items: center; padding: 24px; background: var(--marble); }
.evidence__expand {
  display: block; width: calc(100% - 32px); min-height: 46px; margin: -4px 16px 16px; border: 2px solid var(--ink); background: var(--marble); color: var(--ink);
  font: 700 14px/1.2 var(--text); cursor: pointer;
}
.evidence__expand:hover { background: var(--formstone); }
.evidence__fallback { padding: 12px 16px; border-top: 2px solid var(--ink); font-size: 14px; }
.evidence__fallback a { font-weight: 600; }

/* ---------- News beside the card, and the band below (launch/news.js split layout) ----------
   launch/news.css loads after this file, so card rules carry [data-news-list] to win. */
.card-news { min-width: 0; display: flex; flex-direction: column; }
.card-news__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 3px double var(--ink); }
.card-news__head h2 { font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.2rem); line-height: 1.08; }
.press {
  --news-scrim: 28 30 34; --news-on-scrim: #FFFFFF; --news-radius: 0; --news-thumb: 92px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
@media (min-width: 700px) { .press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .press { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.press.press--column { gap: 14px; }
@media (min-width: 700px) and (max-width: 1099px) { .press.press--column { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .press.press--column { grid-template-columns: minmax(0, 1fr); } }
.press [data-news-list] .news-item, [data-news-list].press .news-item, .press[data-news-list] > .news-item {
  padding: 14px 16px 16px; background: var(--white); border: 2px solid var(--ink);
}
[data-news-list].press > .news-item--text { border-top: 8px solid var(--bay); }
[data-news-list].press > .news-item--overlay { padding: 0; border-top-width: 2px; }
[data-news-list].press .news-item__photo { margin: -14px -16px 14px; border-bottom: 2px solid var(--ink); background: var(--formstone); }
[data-news-columns="1"].press > .news-item--photo:not(.news-item--overlay) .news-item__photo { margin: 2px 0 0; border: 1px solid var(--ink); }
[data-news-list].press .news-item--overlay .news-item__body { padding: 4.5rem 18px 18px; }
.press .news-item__meta { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.press .news-item__title { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.press .news-item__title a { color: var(--ink); text-decoration-color: rgba(28, 30, 34, 0.35); }
.press .news-item:hover .news-item__title a { text-decoration-color: currentColor; }
[data-news-list].press .news-item--lead .news-item__title { font-size: 1.5rem; line-height: 1.15; }
[data-news-list].press .news-item--overlay .news-item__meta { color: var(--formstone); }
[data-news-list].press .news-item--overlay .news-item__title a { text-decoration-color: var(--gold); }
.press .news-item a:focus-visible { outline-color: var(--bay); }
[data-news-list].press .news-item--overlay a:focus-visible { outline-color: var(--white); }
.card-news .news-toolbar, .more-news .news-toolbar { margin-bottom: 14px; }
.card-news .news-search__label, .card-news .news-filter__label, .more-news .news-search__label, .more-news .news-filter__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.card-news .news-search__input, .card-news .news-filter__select, .more-news .news-search__input, .more-news .news-filter__select {
  border: 2px solid var(--ink); background-color: var(--white); color: var(--ink); font-family: var(--text);
}
.card-news .news-search__clear, .more-news .news-search__clear, .news-pager__button, .news-feed-retry {
  min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 700 15px/1.2 var(--text);
}
.news-pager__button:not(:disabled):hover, .news-feed-retry:hover { background: var(--formstone); }
.news-pager__button:disabled { color: #6B6660; opacity: 0.7; font-weight: 400; }
.news-feed-link { color: var(--ink); }
.news-feed-link--text { color: var(--brick); font-weight: 600; }
.news-feed-status { font-size: 14px; color: var(--muted); }
.card-news .news-summary { font-size: 14px; }
.card-news .news-summary__more { font-weight: 700; color: var(--brick); }
.card-news .news-summary__more::after { content: " ↓"; content: " ↓" / ""; }
.news-date-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.more-news { border-block: 2px solid var(--ink); background-color: var(--formstone);
  background-image: radial-gradient(rgba(28, 30, 34, 0.10) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px);
  background-size: 11px 11px, 7px 7px; background-position: 0 0, 3px 4px; }
.more-news--plain { background: var(--marble); border-bottom: 0; }
.more-news__inner { display: flex; flex-direction: column; gap: 24px; padding-block: 56px; }
.more-news__head { display: flex; flex-direction: column; gap: 8px; }
.more-news__head h2 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.7rem); line-height: 1.08; }
.more-news .news-pager { margin-top: 0; }
.more-news .news-pager__range { font-size: 15px; }

/* ---------- Plain language: three cards on marble steps ---------- */
.plain__inner { display: flex; flex-direction: column; gap: 28px; padding-block: 56px; }
.plain h2 { max-width: 26ch; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.12; }
.plain__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px 24px; list-style: none; margin: 0; padding: 0; }
.plain__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; margin-bottom: 8px; background: var(--white); border: 2px solid var(--ink); }
.plain__card::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -10px; height: 8px; background: var(--marble); border: 2px solid var(--ink); border-top: 0; }
.plain__card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; line-height: 1.2; }
.plain__card .ico { width: 28px; height: 28px; margin: 0; color: var(--bay); stroke-width: 1.9; }
.plain__roles { font-size: 15px; line-height: 1.55; }
.plain__roles a { font-weight: 600; }

/* ---------- Race page ---------- */
.race-head { border-bottom: 2px solid var(--ink); }
.race-head__inner { display: flex; flex-direction: column; gap: 20px; padding-block: clamp(24px, 4vw, 44px) 36px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin-right: 8px; color: #6B6660; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.race-head__title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; }
.race-head h1 { flex: 1 1 360px; min-width: 0; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.race-door { --door: #1F4A6B; flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; }
.race-door__leaf { width: 88px; height: 148px; display: flex; flex-direction: column; background: var(--door); border: 4px solid var(--marble); outline: 2px solid var(--ink); }
.race-door__num { height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--brass); border-bottom: 4px solid var(--marble);
  font-family: var(--display); font-size: 32px; line-height: 1; }
.race-door__panels { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.race-door__panels span { flex: 1; border: 2px solid rgba(0, 0, 0, 0.28); }
.race-door__step { width: 104px; height: 7px; margin-top: 2px; background: var(--white); border: 1px solid #9C958A; }
.race-door__step + .race-door__step { width: 120px; margin-top: 0; background: var(--marble); }
/* Each district's door has its own colour and number; decoration only (the H1 names the race). */
.race-door[data-race$="/2"] { --door: #2D5E48; } .race-door[data-race$="/3"] { --door: #1C1E22; } .race-door[data-race$="/4"] { --door: #C9962E; }
.race-door[data-race$="/5"] { --door: #1E6A6A; } .race-door[data-race$="/6"] { --door: #6E2B22; } .race-door[data-race$="/7"] { --door: #3D4F2A; }
.race-door[data-race$="/1"] .race-door__num::before { content: "1"; } .race-door[data-race$="/2"] .race-door__num::before { content: "2"; }
.race-door[data-race$="/3"] .race-door__num::before { content: "3"; } .race-door[data-race$="/4"] .race-door__num::before { content: "4"; }
.race-door[data-race$="/5"] .race-door__num::before { content: "5"; } .race-door[data-race$="/6"] .race-door__num::before { content: "6"; }
.race-door[data-race$="/7"] .race-door__num::before { content: "7"; } .race-door[data-race$="/8"] .race-door__num::before { content: "8"; }
@media (max-width: 520px) { .race-door { width: 64px; } .race-door__leaf { width: 64px; height: 104px; } .race-door__num { height: 34px; font-size: 24px; } .race-door__step { width: 76px; } .race-door__step + .race-door__step { width: 88px; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 24px; max-width: 680px; margin: 0; border-block: 2px solid var(--ink); }
.facts > div { padding: 12px 0; }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brick); }
.facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.race-head__context { max-width: 60ch; }
.other-districts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; padding: 18px 20px 20px; background: var(--formstone); border: 2px solid var(--ink); }
.other-districts__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.other-districts h2 { font-size: 1.6rem; line-height: 1.1; }
.no-senate { font-size: 14px; line-height: 1.45; }
.chips { flex: 2 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--white); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: 26px 26px 0 0; font-family: var(--display); font-size: 1.25rem; line-height: 1;
}
.chip:hover { background: var(--marble); border-color: var(--brick); }
.chip[aria-current="page"] { background: var(--brick); color: var(--cream); border-color: var(--ink); }
.plain-words { max-width: 760px; background: var(--white); border: 2px solid var(--ink); }
.plain-words summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brick); }
.plain-words summary::marker { content: ""; }
.plain-words summary::-webkit-details-marker { display: none; }
.plain-words summary::before { content: "+"; content: "+" / ""; width: 1.2em; font-size: 18px; letter-spacing: 0; }
.plain-words[open] summary::before { content: "–"; content: "–" / ""; }
.plain-words__body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; font-size: 16px; }
.plain-words__body a { font-weight: 600; }
.records { border-block: 2px solid var(--ink); background-color: var(--formstone);
  background-image: radial-gradient(rgba(28, 30, 34, 0.10) 1px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px);
  background-size: 11px 11px, 7px 7px; background-position: 0 0, 3px 4px; }
.records__inner { display: flex; flex-direction: column; gap: 6px; padding-block: 24px; font-size: 16px; }
.records .launch-note { max-width: 90ch; margin: 0; }
.records a { font-weight: 600; }
.race-pager { gap: 0 18px; }
.race-pager > span { display: none; }
.race-ballot { border-top: 2px solid var(--ink); background: var(--white); }
.race-ballot .wrap { padding-block: 26px; }
.more-news--plain + .race-ballot, .records + .race-ballot { border-top: 0; }

/* ---------- About, policies and listings ---------- */
.page-title { border-bottom: 2px solid var(--ink); }
.page-title .wrap { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(28px, 4vw, 52px); }
.page-title h1 { max-width: 20ch; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; text-wrap: balance; }
.page-title__intro { max-width: 52ch; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }
.reading { padding-block: clamp(28px, 4vw, 48px) 56px; }
.reading > * { max-width: 48rem; }
.contents, .policy-toc { margin-bottom: 32px; padding: 16px 20px; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 8px 0 var(--formstone), 0 8px 0 2px var(--ink); }
.contents__label, .policy-toc__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brick); }
.contents ol { margin: 6px 0 0; padding-left: 1.6em; }
.contents a, .policy-body .policy-toc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.article, .policy-section { padding-block: 26px; border-top: 2px solid var(--ink); scroll-margin-top: 16px; }
.article h2, .policy-section h2 { margin-bottom: 14px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.12; }
.article p + p, .article p + ul, .article ul + p, .policy-section p + p, .policy-section p + ul, .policy-section ul + p { margin-top: 1em; }
.article p, .article li, .policy-section p, .policy-section li { font-size: 18px; line-height: 1.65; }
.article ul { padding-left: 1.3em; }
.article li + li { margin-top: .5em; }
.roles { list-style: none; padding: 0 !important; margin: 12px 0 0; }
.roles li { padding: 8px 0; border-bottom: 1px solid var(--mortar); margin: 0 !important; }
.roles strong { display: block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brick); }
.glossary { margin: 0; }
.glossary > div { padding: 12px 0; border-bottom: 1px solid var(--mortar); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 2px 0 0; }
.callout { padding: 12px 16px; background: var(--white); border: 2px solid var(--ink); }
.icon-credit { margin-top: 1em; }
.article .pos { font-size: 15px; }
.launch-official.launch-module { max-width: 1240px; margin: 0 auto 56px; padding: 28px var(--gutter) 0; border-top: 0; }
.launch-official > * { max-width: 48rem; }
.launch-official h2 { padding-top: 26px; border-top: 2px solid var(--ink); }
.launch-official h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.launch-official a { font-weight: 600; }
.policy-kicker { margin: 0; }
.policy-effective { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.policy-effective time { color: var(--brick); }
.policy-section code { padding: 0 4px; font-size: 0.85em; background: var(--white); border: 1px solid var(--mortar); }
.policy-list > div { padding: 10px 0; border-bottom: 1px solid var(--mortar); }
.policy-body probo-settings-link.policy-settings:defined {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 8px 8px 0; padding: 0 16px; border: 2px solid var(--ink); background: var(--white);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.page-plain { display: block; }
.listing.launch-module { max-width: 1240px; padding: clamp(28px, 4vw, 52px) var(--gutter) 56px; }
.listing h1 { margin: 10px 0 14px; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; }
.listing .launch-races a { min-height: 52px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-bottom-width: 5px; font-weight: 600; }
.listing .launch-races a:hover { background: var(--marble); border-color: var(--brick); text-decoration: none; }
.listing .ballot-note { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 0; }
.site-footer__inner { display: flex; flex-direction: column; gap: 30px; padding-block: 44px 30px; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 30px 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__name { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.footer__attr, .footer__head { font: 700 13px/1.4 var(--text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); }
.footer__indep { font-size: 15px; line-height: 1.55; }
.footer__nav { display: flex; flex-direction: column; gap: 8px; }
.footer__nav ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.site-footer a { color: var(--marble); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__base { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(246, 244, 239, 0.45); font-size: 14px; line-height: 1.55; }
.footer__dates a { color: var(--cream); }
.site-footer .legal-links { gap: 4px 18px; }
.site-footer probo-settings-link:defined { color: var(--marble); }

/* Icons (launch/icons.json): Tabler outline strokes in bay blue. */
.ico { color: var(--bay); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}