/* politic.design — site chrome. Campaign-poster type, navy/sky/gold; red only marks Republican data. */
:root{--navy:#0E2240;--navy2:#13305A;--blue:#2F6FE4;--sky:#9FC0FA;--gold:#F2B33D;--red:#D2443B;--paper:#F4F6F9;--ink:#0E2240;--ink2:#4B5B75;--rule:#C9D2DE;
  --display:Montserrat,Arial,sans-serif;--body:'Source Serif 4',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
a{color:var(--ink)}a:hover{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;margin:0;line-height:.9;letter-spacing:-.01em;text-wrap:balance}

/* header */
.top{background:var(--navy);color:#fff}
.top .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding-block:14px}
.brand{color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:10px}
.brand b{font-family:var(--display);font-weight:900;font-size:26px}
.brand b span{color:var(--gold)}
.brand small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9FB6DA}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:#fff;text-decoration:none}.nav a:hover{color:var(--gold)}
.stripes{height:8px;background:repeating-linear-gradient(90deg,var(--blue) 0 64px,#fff 64px 72px,var(--red) 72px 88px,#fff 88px 96px)}

/* hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:36px;align-items:center;padding-block:48px 28px}
.hero h1{font-size:clamp(56px,8vw,112px);line-height:.86;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.dek{font-size:22px;line-height:1.35;max-width:34ch;margin:18px 0}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:48px;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:0 22px;border-radius:2px;text-decoration:none;border:2px solid var(--navy);color:var(--navy);background:transparent;cursor:pointer}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hero-art{aspect-ratio:4/3;max-width:100%;border-radius:2px;overflow:hidden}

/* topline */
.topline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));border-top:3px solid var(--navy);border-bottom:1px solid var(--navy)}
.topline div{padding:14px 16px 14px 0;border-right:1px solid var(--rule)}
.topline div:last-child{border-right:0}
.topline b{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1.1}
.topline span{font-size:13px;color:var(--ink2)}
.note{font-family:var(--mono);font-size:11px;color:var(--ink2);margin:8px 0 0}

section.block{padding-top:56px}
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:18px}
.block-head h2{font-size:44px}

/* story cards */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.card .art{aspect-ratio:3/4;max-width:100%;border-radius:2px;overflow:hidden;transition:transform .3s}
.card:hover .art{transform:translateY(-4px)}
.card strong{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;line-height:1}
.card span.d{font-size:15px}

/* covers rail */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.rail a{aspect-ratio:3/4;padding:12px;display:flex;flex-direction:column;justify-content:space-between;border-radius:2px;text-decoration:none}
.rail b{font-family:var(--display);font-weight:900;font-size:22px;line-height:.9;text-transform:uppercase}
.rail span{font-family:var(--mono);font-size:11px}

/* brand truth + CTAs */
.band{background:var(--navy);color:#fff;margin-top:56px}
.band .wrap{padding-block:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px;align-items:start}
.band .truth{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,40px);line-height:1;text-transform:uppercase;margin:12px 0 18px}
.band .truth em{font-style:normal;color:#5D93F2}
.score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.score b{display:block;font-family:var(--display);font-weight:900;font-size:56px;line-height:1}
.score span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9FB6DA}
.cta{background:#fff;color:var(--navy);padding:22px;border-top:6px solid var(--gold);display:grid;gap:12px}
.cta h3{font-size:26px;line-height:1}
.cta p{margin:0;font-size:15px}
.lead{display:grid;gap:10px}
.lead label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);display:grid;gap:4px}
.lead input[type=text],.lead input[type=email]{font:16px var(--body);padding:12px;border:2px solid var(--navy);border-radius:2px;background:#fff;color:var(--navy);min-height:48px}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead small{font-size:12px;color:var(--ink2)}
.lead .msg{font-family:var(--mono);font-size:13px;min-height:1.2em}
.lead .msg.ok{color:#1E7A46}.lead .msg.err{color:var(--red)}
.inline-cta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;background:#fff;border:2px solid var(--navy);padding:18px 20px;margin-top:18px}
.inline-cta p{margin:0;max-width:56ch}
.inline-cta .lead{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:end;flex:1 1 420px}

/* senate */
.senate-art{aspect-ratio:16/10;max-width:100%;border-radius:2px;overflow:hidden;margin-bottom:22px}
.faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px}
.faces figure{margin:0;display:flex;flex-direction:column;gap:8px}
.faces img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.faces figcaption{font-size:14px}
.faces b{font-family:var(--display);font-weight:900;text-transform:uppercase}
.credits{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink2);margin:12px 0 0}

/* method + footer */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;border-top:3px solid var(--navy);padding-top:18px}
.three h3{font-size:20px;margin-bottom:8px}
.three p{margin:0;font-size:15px}
footer.site{background:var(--navy);color:#9FB6DA;margin-top:56px}
footer.site .wrap{padding-block:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px}
footer.site a{color:#fff}
footer.site b{font-family:var(--display);font-weight:900;font-size:18px;color:#fff}
footer.site b span{color:var(--gold)}
.prose{max-width:68ch;padding-block:48px}
.prose h1{font-size:48px;margin-bottom:18px}
.prose h2{font-size:24px;margin:28px 0 8px}

/* brand-tailored calls to action */
.pd-tailor{margin:22px 0 0;background:var(--navy);color:#fff;border-left:8px solid var(--gold)}
.pd-tailor summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;padding:18px 20px}
.pd-tailor summary::-webkit-details-marker{display:none}
.pd-tailor .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);grid-column:1/-1}
.pd-tailor summary b{font-family:var(--display);font-weight:900;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;line-height:1}
.pd-tailor .pt-body{grid-column:1;font-size:15px;color:#DCE6F5;max-width:64ch}
.pd-tailor .pt-btn{grid-column:2;grid-row:2/4;font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--navy);padding:14px 18px;white-space:nowrap}
.pd-tailor[open] .pt-btn{background:transparent;color:var(--gold);outline:1px solid var(--gold)}
.pd-tailor form{padding:0 20px 20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:end}
.pd-tailor label{color:#9FB6DA}
.pd-tailor select,.lead select{font:16px var(--body);padding:12px;border:2px solid var(--navy);border-radius:2px;background:#fff;color:var(--navy);min-height:48px}
.pd-tailor input[type=text],.pd-tailor input[type=email],.pd-tailor select{border-color:#fff}
.pd-tailor .lead small,.pd-tailor .lead .msg{color:#9FB6DA}.pd-tailor .lead small a{color:#fff}
@media (max-width:640px){.pd-tailor summary{grid-template-columns:1fr}.pd-tailor .pt-btn{grid-column:1;grid-row:auto;justify-self:start}}

/* larger-text safety: OS text-size settings and browser minimum font sizes inflate small px type,
   so fields fill their column instead of keeping a 20-character natural width, and labels wrap */
.lead>*,.lead label{min-width:0}
.lead input,.lead select,.pd-tailor input,.pd-tailor select{width:100%;max-width:100%;min-width:0}
.inline-cta .lead,.pd-tailor form{grid-template-columns:repeat(auto-fit,minmax(min(100%,13em),1fr))}
.btn,.pd-tailor .pt-btn{white-space:normal;text-align:center;justify-content:center;padding-block:10px;line-height:1.15}
.lead button{max-width:100%}
img,svg,video,canvas{max-width:100%}
.topline b,.score b{overflow-wrap:anywhere}