:root { color-scheme: light; --bg: #fcfcfb; --fg: #0b0b0b; --fg2: #52514e; --line: #e4e3df; --panel: #f1f0eb; --link: #1a5fb4; --series-1: #2a78d6; --won: #1a7f37; --dem: #2563c9; --rep: #d0342c; }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #1a1a19; --fg: #ffffff; --fg2: #c3c2b7; --line: #3a3936; --panel: #262624; --link: #7fb3f0; --series-1: #3987e5; --won: #4fc26d; --dem: #5b94f0; --rep: #f0625a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Header: the wordmark (the logo is the o of Election) and slogan centred, then the two topics side by side, Elections left and Geopolitics right */
.top { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.25rem 1rem 1rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 24rem; font-weight: 600; font-size: 1.05rem; line-height: 1.3; text-align: center; text-wrap: balance; color: var(--fg); }
.brand:hover { text-decoration: none; }
.wordmark { font-size: clamp(2.1rem, 9vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.logo { display: inline-block; width: .82em; height: .82em; margin: 0 .01em; vertical-align: -.1em; border-radius: 50%; }
.brand > span:last-child { color: var(--fg2); }
main, footer { max-width: 60rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: .25rem 0 .5rem; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.lede, .ctx, .crumbs { color: var(--fg2); margin: 0 0 .75rem; }
.crumbs { font-size: .85rem; }
table.rows { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rows th { text-align: left; font-weight: 600; font-size: .75rem; color: var(--fg2); text-transform: uppercase; letter-spacing: .02em; padding: .35rem .25rem; border-bottom: 1px solid var(--line); }
.rows td { padding: .5rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.rows .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows time { color: var(--fg2); font-size: .85rem; }
.hero { display: flex; align-items: baseline; gap: .75rem; margin: .5rem 0; }
.hero .big { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hero .lbl { color: var(--fg2); }
dl.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem 1rem; margin: 1rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; }
.stats dt { font-size: .75rem; color: var(--fg2); text-transform: uppercase; letter-spacing: .02em; }
.stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
figure.spark { margin: 1rem 0; color: var(--series-1); }
.spark svg { display: block; width: 100%; height: auto; max-height: 140px; }
.spark figcaption { color: var(--fg2); font-size: .85rem; margin-top: .25rem; }
.desc p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.closed { border-left: 3px solid var(--fg2); padding-left: .75rem; color: var(--fg2); }
footer { color: var(--fg2); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 2rem; }
/* Regions nav, the feed, badges, about page */
nav.regions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding: .5rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--line); }
nav.regions span { color: var(--fg2); }
nav.regions a[aria-current] { color: var(--fg); font-weight: 600; }
.cal ol { list-style: none; margin: 0; padding: 0; }
.cal { interpolate-size: allow-keywords; }
.cal > ol > li { border-bottom: 1px solid var(--line); }
.cal summary { list-style: none; cursor: pointer; padding: .45rem 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.cal summary::-webkit-details-marker { display: none; }
.cal .row { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; min-width: 0; }
.cal .lead { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; text-align: right; }
.cal .lead span { overflow-wrap: anywhere; }
.cal .lead b { white-space: nowrap; }
.cal .lead .won { color: var(--won); }
.cal .lead .won::before { content: "\2713\00a0"; }
.cal .chev { flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--line); border-radius: 50%; display: inline-grid; place-items: center; color: var(--fg2); transition: transform .3s ease; }
.cal .chev::before { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-20%) rotate(45deg); }
.cal summary:hover .chev { color: var(--fg); border-color: var(--fg2); }
.cal details[open] .chev { transform: rotate(180deg); }
.cal details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.cal details[open]::details-content { block-size: auto; }
/* An open event becomes a tinted card that bleeds .75rem into the gutter (the text keeps its alignment), so the panel's
   outcome rows read as part of that event and the next event visibly starts after the card, not after another hairline */
.cal details[open] { background: var(--panel); border-radius: .6rem; margin: .3rem -.75rem .6rem; padding: .15rem .75rem .35rem; }
.cal details[open] summary { border-bottom: 1px solid var(--line); }
.cal .panel { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; padding: .25rem 0 1rem; }
.cal .panel figure { margin: 0; flex: none; }
.cal .panel img { display: block; width: 240px; height: 240px; max-width: 100%; border-radius: .75rem; background: var(--line); }
.cal .panel li b { color: var(--fg); font-variant-numeric: tabular-nums; }
.cal .panel > div { flex: 1 1 16rem; min-width: 0; }
.cal .panel h3 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--fg2); margin: 0 0 .25rem; }
.cal .panel h3 a { color: inherit; }
.cal .panel ol { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.cal .panel li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cal .panel li:first-child { font-weight: 600; }
.cal .panel .all { margin: .5rem 0 0; font-size: .9rem; }
.cal .panel ol.res { counter-reset: rank; }
.cal .panel ol.res li { counter-increment: rank; }
.cal .panel ol.res li::before { content: counter(rank) "."; flex: none; width: 1.6em; color: var(--fg2); font-variant-numeric: tabular-nums; }
.cal .panel ol.res li > :first-child:not(b) { flex: 1; }
.rows td.rank { color: var(--fg2); width: 2em; font-variant-numeric: tabular-nums; }
@media (min-width: 44rem) {
  .cal summary { flex-wrap: nowrap; }
  .cal .row { flex: 1 1 0; }
  .cal .lead { flex: 0 1 auto; max-width: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cal .chev, .cal details::details-content { transition: none; }
}
.cal h2 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 1rem 0 .3rem; background: var(--bg); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg2); border-bottom: 1px solid var(--fg2); }
.cal > h2:first-child { padding-top: .25rem; }
.cal .lead { color: var(--fg2); font-size: .9rem; }
.cal .lead b { color: var(--fg); font-variant-numeric: tabular-nums; }
.next { margin: 1.5rem 0; text-align: center; }
.next a { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: .5rem; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fg2); border: 1px solid var(--line); border-radius: .25rem; padding: 0 .35rem; margin-left: .35rem; vertical-align: middle; }
tr.self td { font-weight: 600; }
.about p { max-width: 42rem; }
/* US midterms box above the feed: a round badge per chamber, the seal inside a ring filled blue for the Democrats' share
   (from the top, clockwise) and red for the rest; the ring fills up on load */
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
/* On load the ring fills up from an empty track: blue sweeps clockwise from the top, red anticlockwise, meeting at the split;
   at the same pace the chart draws itself left to right, then its end dot pops in */
@property --dm { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --rp { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes fill { from { --dm: 0%; --rp: 0%; } }
@keyframes draw { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px -6px -6px -6px); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.mid { margin: .25rem 0 1.25rem; padding: 1rem; border-radius: .9rem; background: var(--panel); }
.mid-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; }
.mid h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
/* The box heading is a link to the midterms page: always underlined (softly, so it still reads as a heading), the underline
   darkening on hover; the arrow is joined to the last word so it never wraps alone */
.mid h2 a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); transition: text-decoration-color .15s; }
.mid h2 a::after { content: "\00a0→"; color: var(--link); }
.mid h2 a:hover { text-decoration-color: var(--link); }
/* The midterms page: the answers under the box, in a readable measure */
.faq { max-width: 42rem; }
.faq h3 { margin: 1.25rem 0 .25rem; font-size: 1.02rem; }
.faq p { margin: 0; color: var(--fg); }
.related { margin: 1.75rem 0 .5rem; color: var(--fg2); }
.mid-h p span { white-space: nowrap; }
.mid-h p, .mid-f { margin: 0; color: var(--fg2); font-size: .9rem; }
.verdict { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.mid-cta { margin: .9rem 0 0; text-align: center; }
.mid-cta a { display: inline-block; padding: .5rem 1.1rem; border-radius: .5rem; background: var(--fg); color: var(--bg); font-weight: 600; }
.mid-cta a::after { content: " →"; }
.mid-cta a:hover { text-decoration: none; opacity: .88; }
.mid-f { margin-top: .75rem; font-size: .8rem; text-align: center; }
.mid-f span { display: inline-block; }
.chambers { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
.mid a.ch { display: flex; flex-direction: column; padding: .9rem .5rem .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--bg); color: var(--fg); text-align: center; transition: border-color .2s, box-shadow .2s; }
.mid a.ch:hover { text-decoration: none; border-color: var(--fg2); box-shadow: 0 2px 10px rgb(0 0 0 / .06); }
.ring { position: relative; display: block; width: min(10.5rem, 100%); aspect-ratio: 1; margin: 0 auto .7rem; padding: .6rem; border-radius: 50%; --dm: var(--fill); --rp: calc(100% - var(--fill)); background: conic-gradient(var(--dem) var(--dm), var(--line) var(--dm) calc(100% - var(--rp)), var(--rep) 0); animation: fill 1.6s cubic-bezier(.3, .8, .3, 1) .1s both; }
.ring img, .ring i { display: block; width: 100%; height: 100%; border-radius: 50%; border: .25rem solid var(--bg); background: #fff; }
.ch h3 { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg2); }
.ch p { margin: 0; font-variant-numeric: tabular-nums; }
.ch .lead b { font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.ch .lead span { display: block; font-size: .85rem; line-height: 1.3; color: var(--fg2); text-wrap: balance; }
.ch .d b { color: var(--dem); }
.ch .r b { color: var(--rep); }
.ch .wk { margin-top: .35rem; font-size: .8rem; color: var(--fg2); }
.ch .wk.d { color: var(--dem); }
.ch .wk.r { color: var(--rep); }
.ch .more { margin-top: auto; padding-top: .7rem; font-size: .8rem; color: var(--link); }
.ch .more::after { content: " →"; }
.mid a.ch:hover .more { text-decoration: underline; }
.trend { margin: .8rem .4rem 0; }
.trend p { margin-bottom: .25rem; font-size: .75rem; color: var(--fg2); text-align: left; }
.trend div { position: relative; }
.trend svg { display: block; width: 100%; height: 4.5rem; overflow: visible; animation: draw 1.6s cubic-bezier(.45, .05, .35, 1) .1s both; }
.trend div span { position: absolute; right: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) 1.65s both; }
.trend em { position: absolute; left: 0; top: 50%; padding-right: .25rem; transform: translateY(-50%); font-size: .65rem; font-style: normal; line-height: 1; color: var(--fg2); background: var(--bg); }
.trend .ad { fill: var(--dem); opacity: .22; }
.trend .ar { fill: var(--rep); opacity: .22; }
.trend .ln { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend .mid50 { stroke: var(--fg2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.trend .kd { background: var(--dem); }
.trend .kr { background: var(--rep); }
.trend figcaption { display: flex; justify-content: space-between; margin-top: .2rem; font-size: .75rem; color: var(--fg2); }
/* Phones: the cards stack, and each lays out sideways: the ring on the left with the chamber, the favourite and the week's
   change beside it, the chart across the full width under them */
@media (max-width: 37.5rem) {
  .chambers { grid-template-columns: 1fr; }
  .mid a.ch { display: grid; grid-template-columns: 6.5rem 1fr; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "ring ." "ring h3" "ring lead" "ring wk" "ring ." "trend trend" "more more"; column-gap: 1rem; padding: .9rem; text-align: left; }
  .ring { grid-area: ring; width: 100%; margin: 0; padding: .4rem; }
  .ring img, .ring i { border-width: .2rem; }
  .ch h3 { grid-area: h3; margin: 0; }
  .ch .lead { grid-area: lead; }
  .ch .wk { grid-area: wk; }
  .trend { grid-area: trend; margin: .9rem 0 0; }
  .trend svg { height: 3.5rem; }
  .ch .more { grid-area: more; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ring, .trend svg, .trend div span { animation: none; } .mid a.ch, .mid h2 a { transition: none; } }
/* "Embed this widget" under an election's event and market pages: the iframe code to copy, then a preview */
.embed details { margin: 1.5rem 0; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: .6rem; }
.embed summary { cursor: pointer; font-weight: 600; }
.embed p { margin: .6rem 0; }
.embed textarea { display: block; width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--panel); color: var(--fg); font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.embed iframe { display: block; }