/* Michigan voted, November 3, 2026 (/michigan-election-2026/): a results board in the site's own paper-and-ink voice,
   blue where the count is blue, red where it is red. Dark ink and warm paper sections alternate, the hero wears the
   Spirit of Detroit under a blue wash and three slow waves. No inline styles (strict CSP). */
.el-page { --deep: #0a1430; --deep2: #101c3f; --cream: #f7f5ec; --paper: #f4efe3; --ink: #17201b; --muted: #58635b; --muted-l: #b8c0d6; --blue: #2f6df6; --blue-d: #1d4ed8; --blue-l: #7aa2ff; --red: #d64545; --lime: #e9fc82; --line: rgba(23, 32, 27, .14); --line-l: rgba(247, 245, 236, .16);
  background: var(--deep); color: var(--cream); }
.el-page main { overflow: hidden; overflow: clip; }
.el-page a { color: inherit; }
.el-page h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; margin: .2rem 0 1rem; }
.el-page h3 { font-size: 1.05rem; letter-spacing: .02em; margin: 0 0 .8rem; }
.el-page .home-header { color: var(--cream); border-bottom-color: var(--line-l); }
.el-page .home-language a { color: var(--muted-l); }
.el-page .home-language a[aria-current] { color: var(--cream); }

/* 1. Hero */
.el-hero { position: relative; min-height: min(94vh, 920px); display: flex; align-items: flex-end; isolation: isolate; padding-bottom: 7rem; }
.el-hero-photo { position: absolute; inset: -12% 0 0; z-index: -3; will-change: transform; }
.el-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.el-kb { animation: el-kb 28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes el-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.el-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(10, 20, 48, .35) 0%, rgba(10, 20, 48, .72) 45%, rgba(10, 20, 48, .96) 100%), radial-gradient(60% 50% at 70% 30%, rgba(47, 109, 246, .35), transparent 70%); }
.el-waves { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(90px, 16vw, 220px); z-index: -1; }
.el-wave { fill: var(--blue-d); opacity: .45; animation: el-wave 14s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.el-wave-2 { fill: var(--blue); opacity: .5; animation-duration: 18s; animation-delay: -6s; }
.el-wave-3 { fill: var(--deep); opacity: 1; animation: none; }
@keyframes el-wave { from { transform: translateX(-3%) scaleY(1); } to { transform: translateX(3%) scaleY(1.18); } }
.el-hero-inner { position: relative; padding-top: 3rem; }
.el-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0 0 1.2rem; }
.el-live { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(233, 252, 130, .6); animation: el-pulse 2.4s infinite; }
@keyframes el-pulse { 0% { box-shadow: 0 0 0 0 rgba(233, 252, 130, .6); } 70% { box-shadow: 0 0 0 12px rgba(233, 252, 130, 0); } 100% { box-shadow: 0 0 0 0 rgba(233, 252, 130, 0); } }
.el-hero h1 { font-size: clamp(2.8rem, 7.6vw, 6.6rem); font-weight: 900; letter-spacing: -.05em; line-height: .95; margin: 0 0 1.4rem; max-width: 14ch; }
.el-hero h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; letter-spacing: -.03em; color: var(--blue-l); }
.el-lead { max-width: 62ch; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; margin: 0 0 1.6rem; color: #e6e9f3; }
.el-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin: 0 0 2.2rem; }
.el-page a.el-button { display: inline-flex; align-items: center; gap: .9rem; padding: 1rem 1.4rem; background: var(--lime); color: var(--ink); font-weight: 800; font-size: .86rem; letter-spacing: .04em; text-decoration: none; border-radius: 4px; transition: transform .2s, background .2s; }
.el-page a.el-button:hover { transform: translateY(-2px); background: #d8ef69; }
.el-textlink { font-weight: 700; font-size: .86rem; text-decoration: none; border-bottom: 1px solid rgba(247, 245, 236, .4); padding-bottom: 2px; }
.el-textlink:hover { border-bottom-color: var(--cream); }
.el-pills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 1100px; }
.el-pills li { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(10, 20, 48, .55); border: 1px solid var(--line-l); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s; }
.el-pills li:nth-child(2) { transition-delay: .12s; } .el-pills li:nth-child(3) { transition-delay: .24s; } .el-pills li:nth-child(4) { transition-delay: .36s; }
html:not(.el-js) .el-pills li, .el-pills.is-in li { opacity: 1; transform: none; }
.el-pills strong { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; }
.el-pills li > span { font-size: .8rem; line-height: 1.45; color: var(--muted-l); }
.el-asof { font-size: .74rem; color: var(--muted-l); margin: 1.4rem 0 0; max-width: 70ch; line-height: 1.5; }
.el-credit { position: absolute; right: 1.4rem; bottom: .8rem; margin: 0; font-size: .66rem; color: var(--muted-l); }
.el-credit a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }

/* Chapter bar */
.el-toc { position: sticky; top: 0; z-index: 20; background: rgba(10, 20, 48, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-l); }
.el-toc .wrap { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.el-toc .wrap::-webkit-scrollbar { display: none; }
.el-toc a { flex: 0 0 auto; padding: .85rem .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted-l); border-bottom: 3px solid transparent; }
.el-toc a:hover, .el-toc a.is-on { color: #fff; border-bottom-color: var(--lime); }

/* Sections */
.el-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.el-paper { background: var(--paper); color: var(--ink); }
.el-deep { background: var(--deep); color: var(--cream); }
.el-deep + .el-deep { background: var(--deep2); }
.el-head { max-width: 76ch; margin-bottom: 2.4rem; }
.el-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--blue); margin: 0; }
.el-deep .el-kicker { color: var(--lime); }
.el-intro { font-size: 1.05rem; line-height: 1.65; margin: 0; }
.el-narrow { max-width: 860px; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
html:not(.el-js) [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; }
.el-cites { margin-left: .2rem; line-height: 0; }
.el-cite { display: inline-block; min-width: 1.15em; padding: 0 .3em; margin-left: .15em; border-radius: 3px; background: rgba(47, 109, 246, .18); color: inherit; font-size: .62em; font-weight: 700; text-align: center; text-decoration: none; }
.el-deep .el-cite { background: rgba(233, 252, 130, .22); }

/* 2. The statewide board */
.el-races { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.el-race { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.5rem 1.3rem; box-shadow: 0 18px 40px -30px rgba(23, 32, 27, .35); }
.el-race-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.el-race-head h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
.el-called { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-d); background: rgba(47, 109, 246, .1); padding: .35rem .6rem; border-radius: 999px; white-space: nowrap; }
.el-bar { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 1rem; }
.el-bar .bg { fill: #e4e2d8; }
.el-bar .d { fill: var(--blue); } .el-bar .r { fill: var(--red); }
.el-bar rect { transform-box: fill-box; transition: transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.el-bar .d { transform-origin: left center; } .el-bar .r { transform-origin: right center; }
.el-js [data-reveal]:not(.is-in) .el-bar .d, .el-js [data-reveal]:not(.is-in) .el-bar .r { transform: scaleX(0); }
.el-duel { display: grid; gap: .6rem; margin-bottom: 1rem; }
.el-cand { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .8rem; }
.el-cand > div { display: grid; gap: .1rem; min-width: 0; }
.el-cand b { font-size: 1.05rem; }
.el-cand small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.el-cand strong { font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; }
.el-cand strong i { font-style: normal; font-size: .9rem; font-weight: 700; margin-left: 1px; }
.el-party { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 900; font-size: .85rem; }
.is-d .el-party { background: var(--blue); } .is-r .el-party { background: var(--red); }
.is-d strong { color: var(--blue-d); } .is-r strong { color: var(--red); }
.el-note { font-size: .92rem; line-height: 1.6; margin: 0; }
.el-quote { margin: 1rem 0 0; padding: .9rem 1rem .9rem 1.1rem; border-left: 4px solid var(--blue); background: rgba(47, 109, 246, .06); border-radius: 0 10px 10px 0; }
.el-quote p { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.45; margin: 0 0 .4rem; }
.el-quote footer { font-size: .74rem; color: var(--muted); }
.el-board-more { margin-top: 1.6rem; display: grid; gap: .7rem; max-width: 90ch; }
.el-board-more p { position: relative; margin: 0; padding-left: 1.4rem; line-height: 1.6; font-size: .95rem; }
.el-dot { position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--blue); }

/* 3. Washington */
.el-capitol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 2.4rem; }
.el-chamber { position: relative; overflow: hidden; padding: 1.4rem 1.5rem 1.3rem; border-radius: 18px; border: 1px solid var(--line-l); background: linear-gradient(135deg, rgba(47, 109, 246, .28), rgba(47, 109, 246, .06)); }
.el-chamber::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(122, 162, 255, .35), transparent); }
.el-chamber-name { margin: 0 0 .3rem; font-size: 1.8rem; font-weight: 900; letter-spacing: -.03em; }
.el-chamber-call { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.el-chamber-note { margin: 0; font-size: .92rem; line-height: 1.55; color: #dfe3f0; }
.el-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; }
.el-flips, .el-govs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.el-flips li, .el-govs li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; align-items: baseline; padding: .7rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--blue); }
.el-govs li.is-r { border-left-color: var(--red); }
.el-flips b, .el-govs b { font-size: .95rem; }
.el-flips span, .el-govs span { font-size: .95rem; }
.el-flips small, .el-govs small { display: block; font-size: .76rem; color: var(--muted-l); margin-top: .1rem; }
.el-govs li { grid-template-columns: 7rem 1fr; }
.el-govs small { grid-column: 2; }
.el-president { margin: 2.2rem 0 0; max-width: 80ch; line-height: 1.65; font-size: .95rem; color: #dfe3f0; }

/* 4. The 13 seats */
.el-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; counter-reset: none; }
.el-seat { position: relative; display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "n party status" "who who who" "other other other" "where where where"; gap: .25rem .6rem; align-items: center; padding: 1rem 1.1rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--blue); }
.el-seat.is-r { border-top-color: var(--red); }
.el-seat.is-open { border-top-style: dashed; background: #fbf9f1; }
.el-seat-n { grid-area: n; font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.el-seat-party { grid-area: party; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 900; font-size: .75rem; }
.is-r .el-seat-party { background: var(--red); }
.el-seat-status { grid-area: status; justify-self: end; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .5rem; border-radius: 999px; background: rgba(23, 32, 27, .07); color: var(--muted); }
.is-lead .el-seat-status { background: rgba(47, 109, 246, .12); color: var(--blue-d); }
.is-open .el-seat-status { background: rgba(214, 69, 69, .12); color: var(--red); }
.el-seat-who { grid-area: who; font-size: 1.02rem; margin-top: .3rem; }
.el-seat-other { grid-area: other; font-size: .76rem; color: var(--muted); }
.el-seat-where { grid-area: where; font-size: .74rem; color: var(--muted); line-height: 1.4; margin-top: .2rem; }
.el-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 1.4rem 0 0; font-size: .76rem; color: var(--muted); }
.el-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.el-legend span::before { content: ""; width: .8rem; height: .8rem; border-radius: 3px; background: var(--blue); }
.el-legend .is-r::before { background: var(--red); }
.el-legend .is-lead::before { background: rgba(47, 109, 246, .35); }
.el-legend .is-open::before { background: transparent; border: 2px dashed var(--red); box-sizing: border-box; }

/* 5. Proposals */
.el-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.el-prop { display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; align-items: center; padding: 1.4rem; border-radius: 18px; border: 1px solid var(--line-l); background: rgba(255, 255, 255, .04); }
.el-ring { width: 150px; height: 150px; transform: rotate(-90deg); }
.el-ring .bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 10; }
.el-ring .val { fill: none; stroke: var(--blue-l); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 1.4s cubic-bezier(.2, .7, .2, 1); }
.el-prop.is-no .el-ring .val { stroke: var(--red); }
.el-js [data-reveal]:not(.is-in) .el-ring .val { stroke-dasharray: 0 999; }
.el-ring text { fill: #fff; transform: rotate(90deg); transform-origin: 50px 50px; transform-box: view-box; }
.el-ring-pct { font-size: 20px; font-weight: 900; letter-spacing: -1px; }
.el-ring-word { font-size: 10px; font-weight: 700; letter-spacing: 2px; fill: var(--muted-l); }
.el-prop-n { margin: 0 0 .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.el-prop h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.35rem; margin: 0 0 .5rem; }
.el-prop p:last-child { margin: 0; font-size: .92rem; line-height: 1.6; color: #dfe3f0; }

/* 6. The night in Detroit */
.el-numbers { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.el-numbers li { display: grid; gap: .35rem; padding: 1rem 1.1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.el-numbers strong { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--blue-d); }
.el-numbers li > span { font-size: .78rem; line-height: 1.45; color: var(--muted); }
.el-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 2.4rem; }
.el-photos figure { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.el-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.el-photos figcaption { padding: .8rem 1rem .9rem; font-size: .86rem; line-height: 1.5; }
.el-photos figcaption small { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); }
.el-cols-wide { grid-template-columns: 1.25fr .75fr; }
.el-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid rgba(47, 109, 246, .35); display: grid; gap: 1rem; }
.el-timeline li { position: relative; display: grid; grid-template-columns: 6.4rem 1fr; gap: .8rem; align-items: baseline; }
.el-timeline li::before { content: ""; position: absolute; left: calc(-1.1rem - 7px); top: .35em; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--paper); }
.el-timeline time { font-weight: 900; letter-spacing: -.02em; font-size: .95rem; color: var(--blue-d); }
.el-timeline p { margin: 0; font-size: .92rem; line-height: 1.55; }
.el-aside { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.el-aside li { padding: .8rem .9rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .88rem; line-height: 1.55; }

/* 7. What's next, FAQ, sources */
.el-next { margin: 0 0 2rem; display: grid; gap: .8rem; }
.el-next div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--lime); }
.el-next dt { font-weight: 900; letter-spacing: -.01em; }
.el-next dd { margin: 0; font-size: .95rem; line-height: 1.6; color: #dfe3f0; }
.el-visitor { font-size: 1rem; line-height: 1.65; margin: 0 0 2.4rem; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(47, 109, 246, .14); }
.el-visitor a { font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); white-space: nowrap; }
.el-faq-title, .el-src-title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; margin: 2rem 0 .8rem; }
.el-faq { border-top: 1px solid var(--line-l); padding: .7rem 0; }
.el-faq summary { cursor: pointer; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.el-faq p { margin: .6rem 0 0; font-size: .95rem; line-height: 1.6; color: #dfe3f0; }
.el-src-note { font-size: .84rem; color: var(--muted-l); line-height: 1.55; }
.el-src { padding-left: 1.4rem; font-size: .86rem; line-height: 1.6; display: grid; gap: .3rem; }
.el-src li:target { color: var(--lime); }
.el-src a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.el-page .home-footer { color: var(--cream); border-top: 1px solid var(--line-l); }

/* Phones and tablets */
@media (max-width: 1000px) {
  .el-races, .el-capitol, .el-props, .el-photos { grid-template-columns: 1fr; }
  .el-cols, .el-cols-wide { grid-template-columns: 1fr; gap: 1.8rem; }
  .el-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .el-page .wrap { width: min(1400px, calc(100% - 32px)); }
  .el-hero { padding-bottom: 5rem; }
  .el-hero h1 { max-width: none; }
  .el-pills { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .el-pills li { padding: .8rem .9rem; }
  .el-hero { flex-wrap: wrap; }
  .el-credit { position: static; flex-basis: 100%; padding: .6rem 1rem 0; }
  .el-race-head { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .el-cand strong { font-size: 1.4rem; }
  .el-prop { grid-template-columns: 1fr; justify-items: start; }
  .el-flips li, .el-govs li, .el-next div { grid-template-columns: 1fr; gap: .2rem; }
  .el-govs small { grid-column: 1; }
  .el-timeline li { grid-template-columns: 1fr; gap: .2rem; }
  .el-numbers { grid-template-columns: 1fr 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .el-kb, .el-wave, .el-live { animation: none; }
  [data-reveal], .el-pills li { opacity: 1; transform: none; transition: none; }
}