/* Your Vote Counts — shared styles
   Layout: a campaign yard sign locked to one screen. Navy frame, white card, red and blue only where a side is meant. */
:root{
  --navy:#1B2F6E;
  --red:#E11D2E;
  --blue:#2546DC;
  --paper:#FFFFFF;
  --ground:#FFFFFF;
  --ink:#131A36;
  --muted:#5B6383;
  --line:#D5DAE8;
  --on-color:#FFFFFF;
  --shadow:0 30px 60px -30px rgba(19,26,54,.45);
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.05}
p{margin:0}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 30px;border-radius:999px;border:0;background:var(--red);color:var(--on-color);font:800 14px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 #A9121F;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap}
.btn:hover{color:var(--on-color);transform:translateY(2px);box-shadow:0 2px 0 #A9121F}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 #1A34A8}
.btn.blue:hover{box-shadow:0 2px 0 #1A34A8}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2.5px var(--navy)}
.btn.ghost:hover{color:var(--navy);transform:none;box-shadow:inset 0 0 0 2.5px var(--navy);background:color-mix(in srgb,var(--navy) 8%,transparent)}
.btn.sm{min-height:42px;padding:0 20px;font-size:12px}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);flex:none}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding-block:10px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--navy);min-width:0}
.brand:hover{color:var(--navy)}
.flag{width:44px;height:28px;flex:none;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.flag svg{width:100%;height:100%;display:block}
.brand b{display:block;font-weight:900;font-size:16px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;color:var(--navy)}
.brand small{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:3px}
nav.main{display:flex;gap:10px;align-items:center}

/* the sign */
.sign{position:relative;background:var(--paper);border:5px solid var(--navy);border-radius:4px}
.sign .stars{position:absolute;bottom:-5px;left:50%;transform:translate(-50%,50%);background:var(--paper);padding:0 16px;display:flex;gap:9px}
.sign .stars svg{width:clamp(18px,2.8vh,28px);height:clamp(18px,2.8vh,28px);fill:var(--red)}
.sign .year{position:absolute;top:-5px;left:50%;transform:translate(-50%,-50%);background:var(--paper);padding:0 20px;font-weight:900;font-size:clamp(20px,3.4vh,36px);letter-spacing:.16em;color:var(--red);line-height:1}

/* one-screen home */
body.lock{height:100%;display:flex;flex-direction:column;overflow:hidden}
html.lock{height:100%}
main.screen{flex:1;min-height:0;display:flex;padding-block:clamp(22px,3.4vh,40px) clamp(22px,3.4vh,40px)}
main.screen .wrap{display:flex;min-height:0}
.sign.home{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.6vh,28px);padding:clamp(24px,4vh,54px) clamp(16px,3vw,48px) clamp(22px,3.6vh,50px)}
.sign-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1vh,14px)}
.sign-head h1{font-weight:900;font-size:clamp(28px,5.6vh,74px);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);line-height:1}
.sign-head h1 em{font-style:normal;color:var(--red)}
.sign-head .lead{max-width:72ch;font-weight:600;font-size:clamp(12px,1.7vh,17px);color:var(--ink);line-height:1.45}
.sign-head .lead b{color:var(--red);font-weight:900}

.race{display:grid;grid-template-columns:1fr minmax(220px,.7fr) 1fr;gap:clamp(14px,3vw,44px);align-items:start}
.side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(5px,.9vh,11px);min-width:0}
.side .pin{height:clamp(120px,24vh,320px);width:auto;aspect-ratio:700/720}
.side h2{font-weight:900;font-size:clamp(20px,3.2vh,36px);letter-spacing:.08em;text-transform:uppercase;line-height:1}
.side.red h2{color:var(--red)}
.side.blue h2{color:var(--blue)}
.side .party{font-weight:800;font-size:clamp(10px,1.4vh,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.counter{display:flex;flex-direction:column;align-items:center;gap:2px}
.counter .label{font-size:clamp(9px,1.3vh,11px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.counter .usd{font-weight:900;font-size:clamp(26px,4.2vh,52px);letter-spacing:-.01em;line-height:1;color:var(--ink)}
.side.red .counter .usd{color:var(--red)}
.side.blue .counter .usd{color:var(--blue)}
.counter .sol{font-weight:700;font-size:clamp(11px,1.6vh,14px);color:var(--muted)}
.counter .sol b{color:var(--ink);font-weight:800}
.center .lead-line{font-size:clamp(11px,1.6vh,13px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.center .lead-line.red{color:var(--red)}
.center .lead-line.blue{color:var(--blue)}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.actions .btn{min-height:clamp(36px,5vh,48px);padding:0 clamp(14px,1.5vw,22px);font-size:clamp(11px,1.6vh,14px)}

.chartlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:min(100%,320px);min-height:36px;padding:0 16px;border-radius:999px;border:1.5px solid var(--navy);color:var(--navy);font:800 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.chartlink:hover{color:var(--on-color);background:var(--navy)}
.chartlink svg{width:14px;height:14px;fill:currentColor;flex:none}
.chartlink.soon{border-style:dashed;color:var(--muted);border-color:var(--muted)}
.chartlink.soon:hover{background:transparent;color:var(--muted)}
.ca{display:flex;align-items:center;gap:8px;width:min(100%,320px);min-height:36px;border:1.5px solid var(--navy);border-radius:999px;padding:3px 3px 3px 14px;background:var(--paper)}
.ca .k{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.ca code{flex:1;text-align:left;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca button{flex:none;border:0;border-radius:999px;background:var(--navy);color:#fff;font:800 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;padding:0 12px;min-height:28px;cursor:pointer}

.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(6px,1.3vh,16px);min-width:0;padding-top:clamp(0px,6vh,90px)}
.center .usd{font-weight:900;font-size:clamp(28px,5.2vh,64px);line-height:1;letter-spacing:-.01em;color:var(--navy)}
.bar{width:100%;max-width:360px;height:clamp(12px,2vh,20px);border-radius:999px;overflow:hidden;display:flex;background:var(--line)}
.bar .r{background:var(--red);transition:width .8s ease}
.bar .b{background:var(--blue);transition:width .8s ease}
.bar-legend{display:flex;justify-content:space-between;width:100%;max-width:360px;font-size:clamp(10px,1.4vh,12px);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.bar-legend .r{color:var(--red)}
.bar-legend .b{color:var(--blue)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1.5px dashed var(--line);border-radius:999px;padding:5px 12px}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}
.tag.live i{background:#1F9D55}
.tag.live{border-style:solid}
.center .vs{font-weight:900;font-size:clamp(20px,3.2vh,34px);letter-spacing:.14em;color:var(--navy)}

/* footer */
footer.site{background:var(--paper);flex:none}
footer.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 24px;min-height:36px;padding-block:6px 10px;text-align:center}
footer.site p{font-size:11px;font-weight:600;color:var(--muted);line-height:1.4}
footer.site a{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}

/* phone: unlock the screen, stack the race */
@media (max-width:900px){
  html.lock,body.lock{height:auto;overflow:auto;display:block}
  main.screen{display:block;padding-block:20px}
  main.screen .wrap{display:block}
  .sign.home{display:flex;padding:48px 16px 44px;gap:24px}
  .race{grid-template-columns:1fr;gap:34px}
  .center{padding-top:0;order:3}
  .side .pin{height:auto;width:min(260px,70vw)}
  .sign-head h1{font-size:clamp(34px,10vw,56px)}
  .brand b{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .btn,.bar .r,.bar .b{transition:none}
}