/* Editorial surfaces and the controls shared by the interactive guides. */
main, .race-section-header {
  padding-inline-start: max(var(--gutter), env(safe-area-inset-left));
  padding-inline-end: max(var(--gutter), env(safe-area-inset-right));
}
.skip-link { z-index: 8; min-height: var(--control-height); }
#overview { padding-top: clamp(12px, 2.5vw, 34px); }
.overview-lead { grid-template-columns: minmax(0, 1fr); isolation: isolate; }
.overview-intro, .overview-photo { grid-area: 1 / 1; }
.overview-intro {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, 790px);
  padding: clamp(24px, 4.8vw, 64px);
  padding-block-end: clamp(50px, 6vw, 76px);
  text-align: start;
  color: #fff;
  pointer-events: none;
}
.overview-intro a { pointer-events: auto; }
.overview-intro [tabindex]:focus-visible { outline-color: #fff; outline-offset: 5px; }
.overview-intro h1 {
  max-width: 11ch;
  font: 750 clamp(3rem, 7.25vw, 6.3rem)/.97 var(--font);
  letter-spacing: -.066em;
}
.overview-intro p { max-width: 44ch; line-height: 1.5; }
.overview-intro p, .overview-date, .overview-links .overview-briefing-link { color: #fff; }
.overview-links { justify-content: start; }
.overview-links .display-cta {
  --glass-edge: rgb(255 255 255 / .52);
  --glass-highlight: rgb(255 255 255 / .36);
  color: #fff;
  background: #35312d;
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px var(--glass-highlight);
}
.overview-links .display-cta-primary { color: #292725; background: #fff; }
.overview-links a:hover { text-decoration: underline; }
.overview-links a:focus-visible { outline-color: #fff; }
.overview-photo {
  position: relative;
  min-height: clamp(420px, 43vw, 540px);
  border: 0;
  background: #292725;
}
.overview-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: 60% 48%;
  filter: saturate(.68);
}
.overview-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #191714f7 0%, #191714ed 27%, #191714ba 57%, #19171418 100%);
  pointer-events: none;
}
.overview-photo figcaption {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 auto;
  padding: 0 12px;
  background: #292725;
  color: #fff;
  border-start-start-radius: 12px;
  font-size: .75rem;
}
.overview-photo figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.overview-photo figcaption a:focus-visible { outline-color: #fff; outline-offset: -2px; }

.overview-power { grid-column: 1 / -1; }
.overview-power h2, .overview-section h2 {
  font: 730 clamp(1.55rem, 3.1vw, 2.5rem)/1.12 var(--font);
  letter-spacing: -.045em;
}
.power-controls { width: min(100%, 440px); }
.power-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.power-list > div {
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.power-list dt { min-width: 0; overflow-wrap: anywhere; }
.power-list .power-role { grid-column: 1 / -1; }
.power-list .power-party { grid-row: 1; }
.power-sources { margin-top: 10px; }
.overview-tools a { background: var(--panel); }
.overview-tools strong {
  font: 700 clamp(1.25rem, 2.4vw, 1.75rem)/1.15 var(--font);
  letter-spacing: -.035em;
}

.race-section-header > h1, .housing-hero h1 {
  font: 750 clamp(2.7rem, 7vw, 5.5rem)/1.01 var(--font);
  letter-spacing: -.065em;
  text-wrap: balance;
}
.field-intro h2, .race-hero h2, .explorer-head h2, .sectionhead h2 {
  font: 730 clamp(2rem, 4.2vw, 3.65rem)/1.05 var(--font);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.race-section-nav.glass { background: var(--panel); border-color: var(--glass-edge); }
.race-section-nav a {
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  line-height: 1.2;
  text-align: center;
}
.race-section-nav a .label-icon { margin: 0; color: inherit; }
.race-section-nav a[aria-current="page"], .race-section-nav a[aria-current="page"]:hover {
  color: var(--ink);
  background: var(--light);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  font-weight: 760;
}
:is(.race-phase, .race-copy, .explorer-panel, .explorer-result-head) h2,
.modalhead h2 {
  font-family: var(--font);
  font-weight: 730;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.card h3 { font: 730 clamp(1.15rem, 2vw, 1.45rem)/1.12 var(--font); letter-spacing: -.035em; }
.label { font-size: .6875rem; }
.housing-metric strong { font: 740 clamp(1.5rem, 3vw, 2.25rem)/1.25 var(--font); letter-spacing: -.045em; }
.race-election-day { border: 1px solid var(--line); border-radius: 16px; }
.explorer-head { border: 1px solid var(--line); }

.tabs, .power-controls {
  padding: 4px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}
.tabs button, .power-controls button { border-radius: calc(var(--control-radius) - 4px); }
.tabs button.active, .power-controls button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--party);
  border-color: var(--outline);
  box-shadow: var(--lift);
}
button, summary { min-height: var(--control-height); }
button { min-width: var(--control-height); }
.topic-grid label { min-height: var(--control-height); cursor: pointer; }
.topic-grid label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.wiki-candidate-option > .wiki-name { min-width: 44px; }
.wiki-pick > .wiki-name { display: inline-flex; align-items: center; min-height: 44px; }
.wiki-pick button { min-width: 44px; }
.filter-chips button, .tray-names button, .explorer-selected button { min-height: 44px; }
.explorer-selected .wiki-pick button { border: 0; background: transparent; color: inherit; }
.race-pagination a { padding-inline: 13px; background: var(--panel); border: 1px solid var(--line); }
.comparebar { max-width: calc(100% - 2 * var(--gutter)); }
html:has(body.has-picks) { scroll-padding-bottom: max(38dvh, 100px); }
body:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.modalhead { padding-inline: clamp(13px, 3vw, 23px); }
.modalhead h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.modalbody { padding-inline: clamp(13px, 3vw, 23px); }
.modal-actions #close { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.ev-state:is(:hover,.is-selected) path { stroke-width: 2.2; }
.ev-state[data-side="U"] .ev-state-label-svg { fill: #292725; stroke: #fff; }
.ev-state[data-side="N"] .ev-state-label-svg { fill: var(--ink); stroke: var(--panel); }
@media (prefers-color-scheme: dark) {
  .ev-layout { --ev-D: #355caf; --ev-R: #a54359; --ev-line: #888078; }
  .ev-counts div[data-side="D"], .ev-mobile-score [data-side="D"] { color: var(--dem); }
  .ev-counts div[data-side="R"], .ev-mobile-score [data-side="R"] { color: var(--rep); }
}
@media (hover: hover) {
  :is(.actions, .tray-actions, .explorer-tools, .modal-actions, .ev-panel) button:enabled:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
  }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .race-section-nav.glass { background: var(--glass-tint); }
  .overview-links .display-cta:not(.display-cta-primary) {
    background: rgb(49 44 39 / .8);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}
@media (min-width: 651px) and (max-width: 920px) {
  .overview-photo::after { background: linear-gradient(90deg, #191714f7, #191714dc 58%, #191714b8 78%, #19171448); }
}
@media (max-width: 820px) {
  .power-list { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .overview-intro { justify-content: end; padding: clamp(20px, 5vw, 34px); padding-block-end: 60px; }
  .overview-intro h1 { font-size: clamp(2.75rem, 10vw, 4.5rem); }
  .overview-photo { min-height: 460px; }
  .overview-photo img { object-position: 56% 50%; }
  .overview-photo::after { background: linear-gradient(0deg, #191714fa 3%, #191714f0 50%, #19171422 100%); }
  .race-section-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .race-section-nav a { padding: 5px 6px; font-size: .8125rem; }
  .modalhead { padding-block-start: max(8px, env(safe-area-inset-top)); }
  .modalhead h2 { width: 100%; }
  .modal-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .explorer-tile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .race-section-nav .label-icon { display: none; }
  .tabs .icon { display: none; }
  .explorer-table { min-width: calc(5rem + 10rem * var(--columns)); }
  .explorer-table tr > :first-child { width: 5rem; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .overview-links .display-cta:not(.display-cta-primary) {
    background: #292725;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .overview-photo::after { background: #191714df; }
}
@media (forced-colors: active) {
  .overview-intro, .overview-photo figcaption { background: Canvas; color: CanvasText; }
  .overview-links a { color: LinkText; }
  .overview-intro [tabindex]:focus-visible, .overview-links a:focus-visible, .overview-photo figcaption a:focus-visible { outline-color: Highlight; }
  .overview-photo figcaption { border: 1px solid CanvasText; }
  .overview-photo::after { display: none; }
  .overview-intro p, .overview-intro .overview-date { color: CanvasText; }
  .race-section-nav.glass { background: Canvas; border-color: ButtonText; }
  :is(.race-section-nav a, button)[aria-current], button[aria-pressed="true"] {
    outline: 1px solid Highlight;
    outline-offset: -2px;
  }
}