/* "Mailer" look: clean, white, Montserrat, navy + crimson logo colors, solid red band.
   Loaded AFTER site.css and overrides it. Matches the letter and envelope Elias is mailing. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat.woff2) format("woff2")}
:root{
  --red:#D22027; --red-d:#A9171D; --blue:#283A80; --blue-d:#1B2A63; --blue-l:#EBEEF8; --crimson:#771D31;
  --ink:#1A2036; --muted:#4F5870; --soft:#F5F6FA; --line:#E1E4EE; --radius:12px;
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 8px 24px rgba(26,32,54,.08);
}
body{font-size:1.0625rem;line-height:1.7;font-weight:450}
h1,h2,h3,h4{letter-spacing:-.015em;color:var(--blue-d)}
h2{font-weight:800;font-size:clamp(1.65rem,3.4vw,2.35rem);text-transform:none;line-height:1.15}
h3{font-weight:700;font-size:clamp(1.1rem,2vw,1.3rem)}
.kicker{font-weight:800;font-size:.78rem;letter-spacing:.2em;color:var(--red)}
.lead{font-weight:450;color:var(--muted)}
.sign{font-weight:900;font-stretch:100%;text-transform:none;color:var(--blue);-webkit-text-stroke:0;paint-order:normal;filter:none;line-height:1;letter-spacing:-.03em}

/* buttons: flat, confident, wide-tracked caps like the mailer footer */
.btn{font-weight:800;font-stretch:100%;font-size:.84rem;letter-spacing:.14em;border-radius:8px;border-width:2px;padding:1.05rem 1.6rem;box-shadow:none;transition:background .15s,transform .15s}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:none;box-shadow:none}
.btn.blue{box-shadow:none}.btn.ghost{box-shadow:none}
.btn.sm{padding:.75rem 1.1rem;font-size:.76rem;box-shadow:none}

/* header */
.top{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.bar{min-height:76px}
.brand .logo{height:64px;width:auto;border-radius:0}
.nav a{font-weight:700;font-size:.78rem;letter-spacing:.12em;padding:.8rem .7rem}
.nav a:hover,.nav a[aria-current="page"]{background:transparent;color:var(--red);box-shadow:inset 0 -3px 0 var(--red);border-radius:0}
.nav .btn{margin-left:.6rem;color:#fff;box-shadow:none}
.nav .btn:hover{background:var(--red-d);color:#fff}
@media (max-width:900px){.brand .logo{height:46px}.nav a:hover,.nav a[aria-current="page"]{box-shadow:none}}

/* hero: white, big type, no stripes */
.hero{background:#fff;padding:clamp(2.4rem,6vw,5rem) 0 clamp(2.8rem,6vw,5rem)}
.hero-m .tagline{font:800 clamp(.82rem,1.6vw,1rem)/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 1.1rem}
.hero .nameplate{font-size:clamp(3rem,8.4vw,6rem);display:block}
.hero .sub{background:none;box-shadow:none;padding:0;border-radius:0;margin-top:1rem;font-weight:800;font-size:clamp(1.25rem,2.8vw,1.8rem);color:var(--crimson);letter-spacing:-.01em;line-height:1.2}
.hero .lead{max-width:34rem;margin:1.2rem 0 0}
.hero .district{background:none;padding:0;margin:1.2rem 0 0;font-weight:800;font-size:.85rem;letter-spacing:.16em;color:var(--blue)}
.hero .btnrow{margin-top:1.8rem}
.hero-grid{grid-template-columns:1.15fr .85fr}
.portrait .ring{border:0;padding:0;background:none;box-shadow:0 18px 50px rgba(26,32,54,.22),0 0 0 8px #fff,0 0 0 11px var(--blue)}
.portrait img{border-radius:50%}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.portrait{width:min(66%,280px)}}

/* ballot strip: the red band from the letter */
.ballot{background:var(--red)}
.ballot h2{font-size:clamp(1rem,2vw,1.25rem);letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0 0 .4rem}
.ballot p{color:#fff;font-weight:500}
.count div{background:#fff;border:0;border-radius:10px}
.count b{color:var(--red);font-weight:900}
.count span{color:var(--muted);font-weight:700}

/* sections and cards */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.soft{background:var(--soft)}
.card{border-radius:var(--radius);box-shadow:none;border:1px solid var(--line)}
.soft .card{border-color:var(--line);box-shadow:none}
.num{background:var(--blue);box-shadow:none;font-weight:800;width:52px;height:52px}
.icon{color:var(--crimson)}
.photo-frame::before{display:none}
.split img{box-shadow:var(--shadow)}
.divider{display:none}
details.issue{border-radius:var(--radius)}
details.issue summary{font-weight:700;font-stretch:100%}
details.issue summary::after{background:var(--blue)}
details.issue[open]{border-color:var(--blue);box-shadow:none}
.pledge{background:var(--blue);border-radius:var(--radius)}
.pledge li::before{background:var(--red)}
.chips li{border-radius:8px;font-weight:600}
.quote{border-left-color:var(--crimson);box-shadow:none;border:1px solid var(--line);border-left:6px solid var(--crimson)}
.quote blockquote{font-weight:500}
.quote cite{font-weight:800;letter-spacing:.1em;color:var(--blue)}
.endorser img{border-color:var(--blue);box-shadow:none}
.compare thead th:nth-child(2){background:var(--blue)}
.compare thead th:nth-child(3){background:#5b6477}
.compare thead th:first-child{background:var(--blue-d)}
.stat b{color:var(--red);font-weight:900;font-stretch:100%}
.stat div{border-color:var(--line);border-width:1px;box-shadow:none}
.timeline{border-left-color:var(--red)}
.cta{background:var(--blue)}
.cta .btn{background:var(--red);border-color:var(--red)}
.cta .btn.ghost{background:transparent;border-color:#fff}

/* inner page header: calm, with a red rule */
.phead{background:var(--soft);border-bottom:6px solid var(--red);padding:clamp(2.4rem,5vw,3.8rem) 0 clamp(2.2rem,5vw,3.2rem)}
.phead h1{font-weight:800;font-stretch:100%;text-transform:none;font-size:clamp(1.9rem,4.6vw,3rem);letter-spacing:-.02em;line-height:1.1}
.phead .waves{display:none}

/* forms */
label{font-weight:700;font-stretch:100%;letter-spacing:.08em}
input[type=text],input[type=email],input[type=tel],select,textarea{border-radius:8px;font-weight:450}

/* footer: solid band feel */
.foot{background:var(--blue-d);border-top:8px solid var(--red)}
.foot h2{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem}
.paid{font-weight:700;letter-spacing:.02em}
.social a{border-radius:8px}
.review{font-family:system-ui,Arial,sans-serif}
.stagebar{font-family:system-ui,Arial,sans-serif}

/* ================= landing hero: "the Capitol reveal" =================
   One orchestrated moment on load (~2.5s): the camera starts close on the
   Capitol's engraved inscription and pulls back to Anna; her name rises in;
   the red band from the mailer sweeps across with the ballot countdown.
   Pure CSS, so the page is complete without JavaScript. Reduced motion = no motion. */
.hx{--navy:#14204D;--stone:#EADFCF;position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:0;isolation:isolate}
.hx-photo{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:-1;overflow:hidden;background:#3a3026}
.hx-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--navy) 0%,rgba(20,32,77,.82) 9%,rgba(20,32,77,0) 30%),
  linear-gradient(0deg,rgba(20,32,77,.55) 0%,rgba(20,32,77,0) 26%)}
.hx-cam,.hx-cam img{width:100%;height:100%}
.hx-cam img{object-fit:cover;object-position:34% 30%;display:block;max-width:none}
.hx-grid{min-height:clamp(520px,calc(100svh - 185px),800px);display:flex;align-items:center;padding-top:clamp(2rem,4.5vw,3.5rem);padding-bottom:clamp(2rem,4.5vw,3.5rem)}
.hx-copy{max-width:min(44rem,57%)}
.hx-district{margin:0 0 1rem;font:700 .95rem/1.2 var(--display);letter-spacing:.04em;color:var(--stone)}
.hx h1{margin:0;color:#fff}
.hx-name{display:block;font:900 clamp(3.4rem,7.6vw,6.6rem)/.92 var(--display);letter-spacing:-.045em;color:#fff}
.hx-name .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.hx-name .w>span{display:inline-block}
.hx-sub{display:block;margin-top:1.1rem;font:700 clamp(1.2rem,2.5vw,1.65rem)/1.25 var(--display);letter-spacing:-.01em;color:var(--stone);text-wrap:balance}
.hx-lead{margin:1.2rem 0 0;max-width:33rem;color:#D7DCEC;font-weight:450;line-height:1.65}
.hx-btns{margin-top:1.8rem;gap:.7rem}
.hx-btns .btn{padding:1rem 1.2rem;letter-spacing:.11em}
.btn.hx-light{background:#fff;border-color:#fff;color:var(--blue-d)}
.btn.hx-light:hover{background:var(--stone);border-color:var(--stone)}
.btn.hx-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn.hx-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hx .btn:focus-visible,.hx-band a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* the red band, as on Elias's letter */
.hx-band{position:relative;background:var(--red);transform-origin:0 50%}
.hx-band-in{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;padding-top:1.15rem;padding-bottom:1.15rem}
.hx-tag{margin:0;font:800 clamp(1.05rem,1.8vw,1.2rem)/1.2 var(--display);letter-spacing:-.005em;color:#fff}
.hx-dates{display:flex;align-items:center;gap:.5rem 1.3rem;flex-wrap:wrap}
.hx-dates p{margin:0;display:flex;align-items:baseline;gap:.4rem;color:#fff;font-weight:600;font-size:.9rem}
.hx-dates b{font:900 1.75rem/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hx-dates a{color:#fff;font-weight:800;font-size:.95rem;text-underline-offset:.2em;text-decoration-thickness:2px}

@media (max-width:860px){
  .hx-photo{position:relative;width:100%;height:50svh;max-height:480px;min-height:280px}
  .hx-photo::after{background:linear-gradient(0deg,var(--navy) 0%,rgba(20,32,77,.6) 18%,rgba(20,32,77,0) 42%)}
  .hx-cam img{object-position:37% 18%}
  .hx-grid{min-height:0;padding-top:0;margin-top:-3.2rem;position:relative;padding-bottom:2.2rem}
  .hx-copy{max-width:none}
  .hx-dates b{font-size:1.6rem}
}

/* ---- motion ---- */
@media (prefers-reduced-motion:no-preference){
  .hx-cam{animation:hx-pull 3s cubic-bezier(.6,0,.2,1) both}
  .hx-photo::after{animation:hx-fade 1.6s ease-out .2s both}
  .hx-district{animation:hx-up .7s cubic-bezier(.2,.7,.2,1) 1.1s both}
  .hx-name .w>span{animation:hx-rise .9s cubic-bezier(.2,.8,.15,1) both}
  .hx-name .w:nth-child(1)>span{animation-delay:1.2s}
  .hx-name .w:nth-child(2)>span{animation-delay:1.35s}
  .hx-sub{animation:hx-up .8s cubic-bezier(.2,.7,.2,1) 1.75s both}
  .hx-lead{animation:hx-up .8s cubic-bezier(.2,.7,.2,1) 1.9s both}
  .hx-btns{animation:hx-up .8s cubic-bezier(.2,.7,.2,1) 2.05s both}
  .hx-band{animation:hx-sweep .9s cubic-bezier(.7,0,.2,1) 2.1s both}
  .hx-band-in>*{animation:hx-fade .6s ease-out 2.75s both}
}
/* hold everything on its first frame until the photo has loaded (inline script in the hero; 1.8s cap) */
.hx-wait .hx *,.hx-wait .hx-photo::after{animation-play-state:paused!important}
/* start tight on the inscription, pull back and up to Anna */
@keyframes hx-pull{from{transform:scale(1.7) translate(3%,-4%);transform-origin:50% 80%}to{transform:none;transform-origin:50% 80%}}
@keyframes hx-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hx-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hx-fade{from{opacity:0}to{opacity:1}}
@keyframes hx-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}