@font-face{
  font-family:'Raleway';
  src:url('fonts/raleway-latin-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0F4873;
  --deep:#10223D;
  --red:#BF202F;
  --gold:#FFAE1C;
  --sand:#FFE3AD;
  --ink:#16202C;
  --muted:#4A5866;
  --rule:#D9DFE6;
  --paper:#FFFFFF;
  --wrap:1060px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--navy)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{
  background:var(--deep);
  border-bottom:4px solid var(--gold);
  color:#fff;
}
.topbar .sep{color:var(--gold);padding:0 .5em}

/* ---------- hero ---------- */
.hero{padding:34px 0 8px}
.hero-grid{display:grid;gap:22px;align-items:center}
.hero-logo{width:min(320px,74vw);margin:0 auto}

.hero h1{
  font-size:clamp(2.1rem,7.4vw,3.6rem);
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.02em;
  margin:0 0 .4em;
  color:var(--deep);
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--red)}

.lede{
  font-size:clamp(1.02rem,2.6vw,1.22rem);
  color:var(--muted);
  margin:0 0 1.1em;
  max-width:46ch;
  text-wrap:pretty;
}

/* live status flag */
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--deep);
  color:#fff;
  font-weight:800;
  font-size:.83rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:10px 16px;
  border-left:5px solid var(--gold);
}
.status .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);
  flex:none;
}
.status[data-phase="open"]{background:var(--red);border-left-color:#fff}
.status[data-phase="open"] .dot{background:#fff;animation:pulse 2.4s ease-in-out infinite}
.status[data-phase="eday"]{background:var(--red);border-left-color:var(--gold)}
.status[data-phase="past"]{background:#3B4652;border-left-color:#8A96A3}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.status .dot{animation:none!important}}

/* ---------- section scaffolding ---------- */
.section{padding:40px 0}
.section + .section{border-top:1px solid var(--rule)}

.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 6px;
}
.section h2{
  font-size:clamp(1.55rem,4.6vw,2.3rem);
  font-weight:900;letter-spacing:-.015em;line-height:1.1;
  margin:0 0 6px;color:var(--deep);
}
.section .dates{
  font-size:clamp(1rem,2.6vw,1.12rem);
  font-weight:800;color:var(--navy);margin:0 0 26px;
}

/* ---------- place blocks ---------- */
.places{display:grid;gap:30px}
.place{border-top:4px solid var(--navy);padding-top:16px}
.place + .place{margin-top:6px}

.place h3{
  font-size:clamp(1.14rem,3.3vw,1.4rem);
  font-weight:900;line-height:1.2;margin:0 0 4px;color:var(--deep);
}
.addr{margin:0 0 14px;color:var(--muted);font-weight:600}
.addr a{
  display:inline-block;margin-top:4px;color:var(--navy);
  font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;
}
.addr a:hover,.addr a:focus-visible{color:var(--red);border-bottom-color:var(--red)}

.standing{
  background:#F4F7FA;
  border-left:5px solid var(--gold);
  padding:12px 16px;
  margin:0 0 18px;
}
.standing .sl-when{display:block;font-weight:900;color:var(--deep);font-size:1.02rem}
.standing .sl-note{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}

.label{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 8px;
}

.hours{list-style:none;margin:0;padding:0}
.hours li{
  display:flex;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--rule);
}
.hours li:first-child{border-top:1px solid var(--rule)}

.chip{
  flex:none;width:62px;text-align:center;line-height:1;
  border-right:2px solid var(--gold);padding-right:12px;
}
.chip .mon{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.chip .num{display:block;font-size:1.72rem;font-weight:900;color:var(--deep);margin:1px 0 2px}
.chip .dow{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.time{font-size:clamp(1rem,3vw,1.14rem);font-weight:800;color:var(--ink)}

.closing{
  margin:16px 0 0;font-size:.93rem;font-weight:700;color:var(--deep);
  border-left:4px solid var(--red);padding-left:12px;
}
.onlydays{margin:0 0 8px}

/* ---------- election day ---------- */
.eday{
  background:var(--deep);
  color:#fff;
  border-top:5px solid var(--gold);
  padding:44px 0;
}
.eday .eyebrow{color:var(--gold)}
.eday h2{color:#fff;margin-bottom:10px}
.eday-grid{display:grid;gap:26px;margin-top:18px}
.eday .bigdate{
  font-size:clamp(1.3rem,4.4vw,1.9rem);
  font-weight:900;color:var(--gold);margin:0 0 2px;letter-spacing:-.01em;
}
.eday .polls{font-size:clamp(1.02rem,2.8vw,1.18rem);font-weight:700;color:#DCE6F0;margin:0 0 24px}

.cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--gold);color:var(--deep);
  font-weight:900;font-size:clamp(1rem,3.2vw,1.16rem);
  letter-spacing:.01em;
  text-decoration:none;
  padding:17px 26px;
  border-bottom:5px solid #C9850E;
  transition:transform .12s ease,background .12s ease;
}
.cta:hover,.cta:focus-visible{background:#FFC24D;transform:translateY(-2px)}
.cta:active{transform:translateY(1px);border-bottom-width:2px}
.cta svg{flex:none}

.eday .fine{
  margin:0;max-width:58ch;
  font-size:.95rem;line-height:1.6;color:#C3D2E2;
  border-left:3px solid rgba(255,174,28,.55);padding-left:14px;
}
.eday .fine strong{color:#fff;font-weight:800}

/* ---------- help ---------- */
.help{padding:36px 0}
.help h2{font-size:clamp(1.25rem,3.6vw,1.6rem)}
.contact{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.contact li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.contact .k{
  flex:none;min-width:84px;font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.contact .v{font-weight:700;word-break:break-word}
.contact a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold)}
.contact a:hover,.contact a:focus-visible{color:var(--red);border-bottom-color:var(--red)}

/* ---------- footer ---------- */
.skyline{width:100%;margin-top:26px}
.skyline img{width:100%;min-width:100%}
.bar{background:#030404;padding:14px 20px;text-align:center}
.bar img{width:min(340px,80vw);margin:0 auto}
.colophon{
  background:#030404;color:#8B939C;
  font-size:.78rem;line-height:1.65;text-align:center;
  padding:0 20px 24px;
}
.colophon p{margin:0 auto;max-width:62ch}
.colophon a{color:#B9C4CF}
.colophon .disclaimer{margin-top:10px;color:#767E87}

/* ---------- wide screens ---------- */
@media (min-width:760px){
  body{font-size:18px}
  .hero{padding:52px 0 14px}
  .hero-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px}
  .hero-logo{width:100%;margin:0}
  .section{padding:52px 0}
  .places{grid-template-columns:1fr 1fr;gap:44px}
  .place + .place{margin-top:0}
  .chip{width:70px}
  .eday{padding:60px 0}
  .eday-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:22px}
  .help{padding:48px 0}
  .contact{grid-template-columns:1fr 1fr;gap:14px 40px}
  .contact .k{min-width:104px}
}

:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.eday :focus-visible,.bar :focus-visible,.colophon :focus-visible{outline-color:var(--gold)}

/* ================= shared nav ================= */
.topbar-in{
  max-width:var(--wrap);margin-inline:auto;padding:10px 20px;
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;
}
.tb-meta{
  margin:0;padding:0;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;
}
.tb-nav{display:flex;gap:18px;flex-wrap:wrap}
.tb-nav a{
  color:#C3D2E2;text-decoration:none;
  font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.tb-nav a:hover,.tb-nav a:focus-visible{color:#fff;border-bottom-color:var(--gold)}
.tb-nav a.is-current{color:#fff;border-bottom-color:var(--gold)}

/* ================= ballot page ================= */
.ballot-hero{padding:34px 0 10px}
.ballot-hero h1{
  font-size:clamp(2rem,7vw,3.4rem);font-weight:900;line-height:1.04;
  letter-spacing:-.02em;margin:0 0 .35em;color:var(--deep);
}
.ballot-hero h1 em{font-style:normal;color:var(--red)}

.callout{
  background:#F4F7FA;border-left:5px solid var(--navy);
  padding:14px 18px;margin:22px 0 0;max-width:62ch;
}
.callout p{margin:0;font-size:.97rem;line-height:1.6;color:var(--muted)}
.callout p + p{margin-top:8px}
.callout strong{color:var(--deep);font-weight:800}
.callout a{color:var(--navy);font-weight:700}

.group{padding:34px 0}
.group + .group{border-top:1px solid var(--rule)}
.group h2{
  font-size:clamp(1.4rem,4.2vw,2rem);font-weight:900;letter-spacing:-.015em;
  margin:0 0 4px;color:var(--deep);
}
.group .gnote{margin:0 0 24px;color:var(--muted);font-weight:600;font-size:.97rem;max-width:60ch}

.slate{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}

.cand{display:flex;flex-direction:column}
.cand .shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:#E8EEF4;border-bottom:5px solid var(--navy);
}
.cand .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

.cand .mono{
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--deep);color:var(--gold);
  font-size:3.2rem;font-weight:900;letter-spacing:.02em;
}

.cand .seat{
  margin:12px 0 2px;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);
}
.cand .who{font-size:1.16rem;font-weight:900;color:var(--deep);margin:0 0 2px;line-height:1.2}
.cand .sub{margin:0;font-size:.88rem;font-weight:600;color:var(--muted)}

.cand .go{
  margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  color:var(--navy);font-weight:800;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px;
  overflow-wrap:anywhere;max-width:100%;
}
.cand .go:hover,.cand .go:focus-visible{color:var(--red);border-bottom-color:var(--red)}
.cand .nolink{
  margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:700;color:#5F6B7A;font-style:italic;
}

.credit{
  margin:30px 0 0;font-size:.82rem;line-height:1.6;color:var(--muted);
  border-left:3px solid var(--rule);padding-left:12px;max-width:66ch;
}

@media (min-width:760px){
  .ballot-hero{padding:52px 0 16px}
  .group{padding:46px 0}
  .slate{gap:34px 30px}
}

/* inline "big link" used on the home page */
.go-big{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--deep);color:#fff;
  font-weight:900;font-size:clamp(.97rem,3vw,1.08rem);
  text-decoration:none;padding:15px 24px;
  border-bottom:5px solid var(--gold);
  transition:transform .12s ease,background .12s ease;
}
.go-big:hover,.go-big:focus-visible{background:var(--navy);transform:translateY(-2px)}
.go-big:active{transform:translateY(1px);border-bottom-width:2px}