/* myvoteforward.com. Same look as the cards: Libre Franklin, one color per subject, light frame so the cards lead. */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/LibreFranklin-var-latin.woff2) format("woff2")}
:root{
  --canvas:#F4F5F7;--surface:#FFFFFF;--wash:#F4F5F7;--ink:#17162C;--muted:#5E5D75;--line:#E3E1DA;--track:#E7E4DD;
  --navy:#3C3B6E;--red:#B22234;--focus:#0B6BCB;
  --shadow:0 1px 2px rgba(23,22,44,.06),0 12px 30px rgba(23,22,44,.08);--lift:0 2px 6px rgba(23,22,44,.08),0 30px 60px rgba(23,22,44,.20);
}
@media (prefers-color-scheme:dark){:root{
  --canvas:#0C0C17;--surface:#16162A;--wash:#1B1B31;--ink:#F4F3F9;--muted:#A9A8C2;--line:#2C2C46;--track:#2A2A44;
  --navy:#C9C8F5;--red:#FF6B7D;--focus:#FFD166;--shadow:0 1px 2px rgba(0,0,0,.5);--lift:0 30px 60px rgba(0,0,0,.7)}}

/* one color per subject: a full spectrum, so no color means a side */
[data-s="education"]{--c:#E8590C;--c2:#F08C00}
[data-s="economy"]{--c:#0B7285;--c2:#1098AD}
[data-s="health"]{--c:#D6336C;--c2:#F06595}
[data-s="housing"]{--c:#9C36B5;--c2:#CC5DE8}
[data-s="transport"]{--c:#1864AB;--c2:#339AF0}
[data-s="environment"]{--c:#2B8A3E;--c2:#51CF66}
[data-s="safety"]{--c:#5F3DC4;--c2:#845EF7}
[data-s="government"]{--c:#A0522D;--c2:#D9822B}
[data-s="immigration"]{--c:#087F5B;--c2:#20C997}
[data-s="defense"]{--c:#495057;--c2:#868E96}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--canvas);color:var(--ink);font-family:"Libre Franklin",system-ui,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:10px}
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.muted{color:var(--muted)}

/* header */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:relative}
.top::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#3C3B6E 0 84%,#B22234 84%)}
.top-in{display:flex;align-items:center;gap:16px;height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .lg{width:44px;height:40px}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--navy)}
.wm i{font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.42em;color:var(--navy);border-top:2px solid var(--red);padding-top:3px;margin-top:3px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.top .txt{font-weight:600;text-decoration:none;color:var(--muted)}
.top .txt:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--surface);text-decoration:none;font-weight:800;border-radius:999px;padding:12px 22px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,22,44,.2)}
.btn.big{font-size:18px;padding:16px 28px}
.ghost{display:inline-flex;align-items:center;font-weight:700;text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:14px 22px;background:var(--surface)}
.ghost:hover{border-color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ctas.center{justify-content:center}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding-top:64px;padding-bottom:36px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.hero h1{font-size:clamp(42px,5.6vw,74px);line-height:.98;letter-spacing:-.04em;font-weight:900;margin:0}
.hero h1 span{display:block;color:var(--red)}
.lede{font-size:20px;color:var(--muted);margin:22px 0 28px;max-width:32em}
.small{font-size:14px;color:var(--muted);margin:14px 0 0}

/* the fan of cards */
.fan{position:relative;height:540px}
.fan .card{position:absolute;top:16px;left:50%;width:290px;margin-left:-145px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fan .card.l{transform:translateX(-155px) translateY(34px) rotate(-10deg)}
.fan .card.r{transform:translateX(155px) translateY(34px) rotate(10deg)}
.fan .card.c{z-index:2}
.fan:hover .card.l{transform:translateX(-180px) translateY(40px) rotate(-13deg)}
.fan:hover .card.r{transform:translateX(180px) translateY(40px) rotate(13deg)}
.fan:hover .card.c{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.fan .card{transition:none}}

/* a card (same design as the board) */
.card{background:var(--surface);border-radius:20px;box-shadow:var(--lift);overflow:hidden}
.card.done{box-shadow:0 0 0 2px var(--c),0 26px 56px color-mix(in srgb,var(--c) 30%,transparent)}
.band{background:linear-gradient(135deg,var(--c) 0%,var(--c) 45%,var(--c2) 140%);color:#fff;padding:14px 16px 18px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.b-top{display:flex;align-items:center;position:relative;z-index:1}
.rank{display:flex;align-items:baseline;gap:2px;font-weight:900;font-size:46px;letter-spacing:-.05em;line-height:.85;white-space:nowrap}
.rank i{font-style:normal;font-size:18px;font-weight:700;opacity:.8;letter-spacing:0}
.rank small{font-size:12px;font-weight:600;opacity:.85;letter-spacing:0;margin-left:4px}
.ready{margin-left:8px;background:#fff;color:var(--c);font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:3px 7px}
.ico{margin-left:auto;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ico svg{width:24px;height:24px}
.nm{position:relative;z-index:1;margin-top:12px;font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1;display:inline-flex;flex-direction:column}
.nm span{font-size:11px;font-weight:700;letter-spacing:.5em;border-top:2px solid rgba(255,255,255,.85);padding-top:5px;margin-top:6px}
.wmk{position:absolute;right:-22px;bottom:-34px;width:150px;height:150px;color:rgba(255,255,255,.16);transform:rotate(-12deg)}
.wmk svg{width:100%;height:100%;stroke-width:1.6}
.body .row{padding:12px 16px 8px;border-top:1px solid var(--line)}
.body .row:first-child{border-top:0}
.body .row.alt{background:var(--wash)}
.rh{display:flex;align-items:center;gap:8px;min-height:24px}
.k{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c);line-height:1.25}
.money{margin-left:auto;font-weight:900;font-size:18px;letter-spacing:.04em}
.money b{color:var(--line)}
.money b.on{color:var(--c)}
.amt{font-weight:800;font-size:15px}
.val{margin-left:auto;font-weight:900;font-size:17px;white-space:nowrap}
.val.muted{font-weight:500;font-size:12px}
.bar{position:relative;height:8px;border-radius:99px;background:var(--track);margin:12px 13px 8px}
.bar.unset{background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 11px)}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--c2),var(--c))}
.bar svg{position:absolute;right:-13px;top:50%;width:26px;height:26px;margin-top:-13px;color:var(--c);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.w23{width:23%}.w30{width:30%}.w40{width:40%}.w60{width:60%}
.opb{display:flex;align-items:center;gap:8px;border-radius:14px;padding:11px 14px;font-size:14px;margin:10px 16px 12px;white-space:nowrap}
.opb.full{background:var(--c);color:#fff}
.opb.part{border:2px solid var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent) 40%,transparent 40%)}
.opb.empty{border:2px dashed var(--line);color:var(--muted)}
.opb b{font-weight:800}
.opb span{font-size:12px;opacity:.85}
.opb strong{margin-left:auto;font-weight:900;font-size:18px}
.opb.part strong{color:var(--c)}
.foot{display:flex;align-items:center;border-top:1px solid var(--line);padding:10px 16px}
.share{background:var(--c);color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:6px 12px}
.share.off{background:var(--wash);color:var(--muted)}
.mini{margin-left:auto;display:flex;align-items:center;gap:5px}
.mini .mi{width:22px;height:20px}
.mini .wm b{font-size:12.5px;color:var(--ink)}
.mini .wm i{font-size:7px;letter-spacing:.34em;border-top-width:1.5px;padding-top:1px;margin-top:1px;color:var(--muted)}

/* the ten */
.ten{padding-top:8px;padding-bottom:44px}
.label{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:flex;align-items:center;gap:9px;background:var(--c);color:#fff;font-weight:800;border-radius:999px;padding:7px 16px 7px 7px}
.chips li span{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center}
.chips svg{width:17px;height:17px}

/* four quick moves */
.how{padding-bottom:64px}
.four{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.four li{background:var(--surface);border-radius:20px;padding:22px;box-shadow:var(--shadow);border-top:6px solid var(--c)}
.four .n{width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:14px}
.four b{display:block;font-size:18px;line-height:1.2;margin-bottom:6px}
.four li>span:last-child{color:var(--muted);font-size:15px}

/* officials */
.off-in{background:var(--surface);border-radius:28px;padding:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;box-shadow:var(--shadow)}
.off h2{font-size:clamp(32px,3.8vw,48px);line-height:1.02;letter-spacing:-.03em;font-weight:900;margin:0 0 16px}
.off p{color:var(--muted);font-size:18px;margin:0 0 16px}
.off .callout{color:var(--ink);font-weight:600;border-left:4px solid var(--red);padding-left:16px;margin:24px 0 12px}
.off .bigline{color:var(--ink);font-weight:900;font-size:24px;letter-spacing:-.01em;margin:0 0 26px}
.roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.roles li{border:2px dashed var(--line);border-radius:16px;padding:16px;background:var(--wash);position:relative}
.roles small{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.roles b{display:block;font-size:16px;margin-top:4px;color:var(--ink)}
.roles span{position:absolute;right:16px;top:12px;font-size:30px;font-weight:900;color:var(--line)}

/* mission */
.mission{text-align:center;padding-top:88px;padding-bottom:88px}
.mission h2{font-size:clamp(30px,3.8vw,50px);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:0}
.mission p{color:var(--muted);font-size:20px;margin:10px 0 28px}

/* footer */
.site-foot{background:var(--surface);border-top:1px solid var(--line)}
.ff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:28px;padding-bottom:28px}
.ff nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ff nav a{font-weight:600;text-decoration:none;color:var(--muted)}
.ff nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .fan{height:520px;max-width:600px;width:100%;margin:0 auto}
  .four{grid-template-columns:1fr 1fr}
  .off-in{grid-template-columns:1fr;padding:30px}
}
@media (max-width:560px){
  .top .txt{display:none}
  .top-in{height:68px}
  .brand .lg{width:36px;height:33px}
  .hero h1{font-size:44px}
  .lede{font-size:18px}
  .btn.big{width:100%;font-size:17px}
  .ctas .ghost{width:100%;justify-content:center}
  .fan{height:470px}
  .fan .card{transform-origin:top center}
  .fan .card.l{transform:translateX(-62px) translateY(40px) rotate(-8deg) scale(.86)}
  .fan .card.r{transform:translateX(62px) translateY(40px) rotate(8deg) scale(.86)}
  .fan .card.c{transform:scale(.92)}
  .four{grid-template-columns:1fr}
  .off-in{padding:24px}
  .roles{grid-template-columns:1fr 1fr}
  .mission{padding-top:64px;padding-bottom:64px}
}
.off .kicker{color:var(--red);font-size:13px;margin:0 0 14px}

/* 404 */
.nf{min-height:52vh}
.nf h1{font-size:clamp(34px,4.6vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.02;margin:0 auto;max-width:14em}

/* share image (og.html, 1200x630, never deployed) */
body.og{width:1200px;height:630px;overflow:hidden}
body.og .top nav{display:none}
body.og .hero{padding-top:34px;padding-bottom:0;grid-template-columns:1fr 1fr;gap:12px}
body.og .hero h1{font-size:64px}
body.og .lede,body.og .ctas,body.og .small{display:none}
body.og .fan{height:500px;transform:scale(.9);transform-origin:50% 0}
body.og .wrap{padding-left:56px;padding-right:40px}
/* the My-names keep their capitals: MyBudget, MyGrade, MyOpinion read like MyVote */
.rh .k{text-transform:none;letter-spacing:0;font-size:12.5px}
/* contrast (Lighthouse 2026-10-30): education orange is too light for small text; a deeper shade for text only */
[data-s="education"] .k,[data-s="education"] .opb.part strong{color:#C2410C}
[data-s="education"] .opb.full{background:#C2410C}
.opb span{opacity:1}
/* Questions strip (Mike 2026-10-30) */
.faq{padding-top:40px;padding-bottom:8px;max-width:820px}
.faq h2{font-size:clamp(26px,4vw,34px);margin:0 0 14px;letter-spacing:-.02em}
.faq dl{margin:0;display:grid;gap:0}
.faq dl>div{padding:14px 0;border-top:1px solid var(--line,#E6E3DB)}
.faq dt{font-weight:800;font-size:17px;margin:0 0 4px}
.faq dd{margin:0;color:var(--muted,#5E5D75);font-size:15.5px;line-height:1.5}
.faq dd a{font-weight:700;white-space:nowrap}
/* white text on the two lightest subject colors needs deeper shades (Lighthouse 2026-10-30) */
[data-s="education"] .share,.how [data-s="education"]{--c:#C2410C}
[data-s="environment"] .share,.how [data-s="environment"]{--c:#237032}
.chips [data-s="education"]{--c:#C2410C}.chips [data-s="environment"]{--c:#237032}