/* Colours sampled from the logo. --paper is the logo's own background, so the
   header JPG melts into the page instead of sitting on it as a box. */
:root{--paper:#f1f5f8;--card:#fff;--navy:#0f2a5c;--blue:#12529b;--bright:#2379c4;--red:#b8202f;--ink:#14213a;--muted:#44546a;--line:#cfd9e6;--d:#1f6fc4;--r:#b8202f;--o:#68748a}
*{box-sizing:border-box}
/* Large on purpose: read on phones, by people including the low-vision. 19px root carries everything up. */
html{font-size:118.75%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.05rem/1.55 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--blue);font-weight:700;text-underline-offset:.16em}
a:focus-visible,summary:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.wrap{max-width:60rem;margin:0 auto;padding:0 1rem}
h1,h2,h3{font-family:Poppins,"Atkinson Hyperlegible",system-ui,sans-serif;color:var(--navy);line-height:1.18;text-wrap:balance;margin:0}
header{padding:1rem 0 0}
.logo{display:block;width:100%;max-width:34rem;height:auto;margin:0 auto}
/* The logo's tagline is real text: as pixels it would be unreadable on a phone. */
.tag{text-align:center;color:var(--navy);font-weight:700;font-size:1.05rem;letter-spacing:.01em;margin:.5rem auto 0;max-width:34rem;text-wrap:balance}
h1{font-size:1.75rem;font-weight:700;margin:1.1rem 0 0}
.hello{margin:.5rem 0 0;font-size:1.1rem}
.now{margin:1rem 0 0;padding:1rem 1.1rem;background:var(--navy);color:#fff;border-radius:.6rem}
.now b{font-size:1.18em}.now a{color:#fff}
.maplink{display:block;margin:.8rem 0 0;padding:.85rem 1rem;background:var(--red);color:#fff;text-align:center;border-radius:.6rem;text-decoration:none;font-size:1.1rem}
.maplink[hidden]{display:none}
.banner{margin:.8rem 0 0;padding:.7rem .9rem;border-left:.4rem solid var(--red);background:#fff;font-weight:700;color:var(--navy)}
nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0}
nav a{flex:1 1 auto;min-height:2.75rem;display:flex;align-items:center;justify-content:center;padding:.3rem .8rem;background:#fff;border:1px solid var(--line);border-radius:.5rem;text-decoration:none;text-align:center}
section{margin:2.25rem 0 0;scroll-margin-top:.5rem}
h2{font-size:1.5rem;padding-bottom:.3rem;border-bottom:.2rem solid var(--bright)}
.lead{margin:.6rem 0 0}.note{margin:.8rem 0 0;font-size:1rem}
.grid{display:grid;gap:.8rem;margin-top:.9rem;grid-template-columns:minmax(0,1fr)}
.race{background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:.85rem 1rem;min-width:0}
.race h3{font-size:1.15rem}
.dist{color:var(--muted);font-weight:700;font-size:1rem;margin-left:.45rem;white-space:nowrap}
.cands{list-style:none;margin:.6rem 0 0;padding:0}
.cands li{padding:.2rem 0}
/* The Democrat reads largest; the opponent reads smaller, but stays fully legible and named. */
.dem .cand-name{font-size:1.2rem;font-weight:700;color:var(--navy);display:block;overflow-wrap:anywhere}
.party{display:block;color:var(--muted);font-size:.95rem}
.opp{color:var(--muted);font-size:.98rem;overflow-wrap:anywhere}
.party-inline{white-space:normal}
.nodem{color:var(--muted);font-weight:700}
.prop{font-weight:700}
.res{margin:.6rem 0 0;padding:0;list-style:none}
.res li{padding:.45rem 0;border-top:1px solid var(--line)}
.res .rn{font-weight:700;display:block;overflow-wrap:anywhere}
.res .dem-row .rn{color:var(--navy);font-size:1.12rem}
/* Every candidate's numbers are the same size. Only the names above lean Democratic. */
.num{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-weight:700;font-size:1.08rem}
.bar{height:.55rem;background:#e4eaf1;border-radius:.2rem;margin-top:.25rem;overflow:hidden}
.bar i{display:block;height:100%}
.status{margin:.6rem 0 0;padding:.5rem .7rem;background:#e9eff5;border-radius:.3rem;font-weight:700;color:var(--navy)}
.status small{display:block;font-weight:400;font-size:.95rem;color:var(--muted)}
.called{background:var(--navy);color:#fff}.called small{color:#fff}
.scope{margin:.75rem 0 0;font-weight:700;color:var(--red)}
.src{margin:.55rem 0 0;font-size:.95rem}
.watch{margin:.7rem 0 0;padding:0;list-style:none}
.watch li{padding:.3rem 0 .8rem}
.btn{display:block;background:var(--blue);color:#fff;text-decoration:none;text-align:center;border-radius:.6rem;padding:.8rem;margin:.3rem 0;font-size:1.08rem}
.btn:hover{background:var(--navy)}
.btns{margin-top:.7rem}
.plain{margin:.6rem 0 0;padding:0;list-style:none}
.plain li{padding:.25rem 0}
.steps li{padding:.45rem 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.check{margin:.5rem 0 0;color:var(--muted);font-size:.98rem}
details{margin-top:1rem}
summary{font-family:Poppins,"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700;color:var(--navy);font-size:1.1rem;cursor:pointer;min-height:2.75rem;display:list-item;padding:.5rem 0}
footer{margin:2.5rem 0 0;padding:1.1rem 0 2rem;border-top:.2rem solid var(--navy)}
footer p{margin:.5rem 0}
footer p:first-child{font-weight:700}
footer p+p{font-size:.98rem;color:var(--muted)}
@media (min-width:44rem){
  h1{font-size:2rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
}
.btn[hidden]{display:none}

/* Map front and center. Phone height leaves page above and below to scroll by, because the map takes touch drags. */
header.sub{padding-top:0}
.mapfront{margin:.4rem 0 1.4rem}
.pollsline{margin:0 0 .5rem;text-align:center;font-size:1.1rem}
.mapframe{display:block;width:100%;height:72svh;min-height:26rem;border:0;background:transparent}
@media (min-width:960px){.mapframe{height:min(46rem,80svh)}}

.textcta{display:block;margin:0 0 .7rem;padding:.8rem 1rem;background:var(--navy,#0f2a5c);color:#fff;text-align:center;border-radius:.6rem;text-decoration:none;font-size:1.2rem;line-height:1.3}
.textcta b{display:block}
.textcta span{display:block;font-family:Poppins,sans-serif;font-weight:700;font-size:1.6rem}

.cand-photo{float:left;width:6rem;height:7.5rem;object-fit:cover;object-position:top;border-radius:.4rem;margin:0 .8rem .4rem 0;background:var(--line,#dde)}
.race::after{content:"";display:block;clear:both}
.race .results{clear:both}