:root{
  --green:#009639;
  --green-deep:#00662A;
  --paper:#FFFFFF;
  --tint:#F4F9F5;
  --ink:#17201B;
  --soft:#57635C;
  --line:#E1E8E2;
  --gut:clamp(22px,6vw,72px);
  /* hero photo, inlined. For production swap back to the uploads URLs. */
  --hero-lg:url("../img/hero-desktop.jpg");
  --hero-sm:url("../img/hero-mobile.jpg");
  --display:"Archivo",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.025em;margin:0}
a{color:inherit}
.wrap{max-width:920px;margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--green-deep);color:#fff;padding:12px 18px;z-index:99}

/* header */
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nav{max-width:1120px;margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:block;height:38px;width:auto;max-width:210px;object-fit:contain}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-right ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;align-items:center}
.nav-right ul a{font-size:15px;font-weight:600;text-decoration:none;color:var(--soft);padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-right ul a:hover{color:var(--ink);border-color:var(--green)}
.nav-right ul a.donate{color:#fff;background:var(--green-deep);padding:9px 18px;border-radius:3px;border:0}
.nav-right ul a.donate:hover{background:#004E20}
.social{display:flex;gap:12px;padding-left:4px}
.social a{color:var(--soft);display:grid;place-items:center}
.social a:hover{color:var(--green-deep)}
.social svg{width:17px;height:17px;fill:currentColor}
.nav-social-li{display:none}
.menu-btn{
  display:none;background:none;border:1px solid var(--line);border-radius:4px;
  width:44px;height:42px;padding:0;cursor:pointer;align-items:center;justify-content:center;
  transition:border-color .18s ease,background .18s ease;
}
.menu-btn:hover{border-color:var(--green-deep);background:var(--tint)}
.burger{display:block;width:20px;height:14px;position:relative}
.burger span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .26s cubic-bezier(.2,.8,.25,1),opacity .18s ease,top .26s cubic-bezier(.2,.8,.25,1);
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:6px}
.burger span:nth-child(3){top:12px}
.menu-btn[aria-expanded="true"] .burger span:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .burger span:nth-child(3){top:6px;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.burger span{transition-duration:.001ms}}

.btn{display:inline-block;font-family:var(--body);font-size:15.5px;font-weight:600;text-decoration:none;padding:13px 26px;border-radius:3px;background:var(--green-deep);color:#fff;border:0;cursor:pointer}
.btn:hover{background:#004E20}
.btn.alt{background:#fff;color:var(--green-deep);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.alt:hover{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--green-deep)}

/* hero — the photo gets its own band and the words sit underneath it
   Nothing is printed over the picture, so nobody's face can end up behind
   the headline at any screen size. The band keeps the photo's own
   proportions, so the same part of it shows however wide the screen is.
   Focus point and height come from Site Content > Homepage > Hero. */
.hero{position:relative;isolation:isolate;background:#062818;display:block}
.hero .hero-photo{
  position:relative;width:100%;
  aspect-ratio:var(--hero-ar,3 / 2);
  max-height:var(--hero-h,56vh);
  background-color:#0B2E1D;
  background-image:var(--hero-lg),linear-gradient(135deg,#0E4A2C 0%,#062818 55%,#0B3520 100%);
  background-size:cover;background-repeat:no-repeat;
  background-position:var(--hero-pos,50% 26%);
}
/* the foot of the photo dissolves into the green, so there is no hard seam */
.hero .hero-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;
  background:linear-gradient(to top,#062818 0%,rgba(6,40,24,.70) 44%,rgba(6,40,24,0) 100%);
  pointer-events:none;
}
.hero .hero-inner{
  position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto;
  padding:clamp(20px,2.4vw,30px) var(--gut) clamp(38px,4.6vw,62px);
}
.hero h1{font-size:clamp(32px,5.2vw,52px);color:#fff;max-width:18ch;text-wrap:balance}
/* wide screens: headline beside the sentence and the buttons, so the panel
   under the photo stays shallow and the buttons land above the fold */
@media(min-width:1024px){
  .hero .hero-inner{
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    column-gap:clamp(28px,4vw,64px);
  }
  .hero h1{grid-column:1;grid-row:1 / span 2;max-width:none}
  .hero .lede{grid-column:2;grid-row:1;margin:6px 0 0;max-width:42ch}
  .hero .cta{grid-column:2;grid-row:2;margin-top:24px}
}
/* a sentence never splits across two lines */
.hero h1 > span{display:inline-block}
.hero .lede{margin:20px 0 0;font-size:19px;color:rgba(255,255,255,.86);max-width:42ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .btn{background:var(--green);color:#062818}
.hero .btn:hover{background:#00B345}
.hero .btn.alt{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hero .btn.alt:hover{background:#fff;color:var(--green-deep);box-shadow:inset 0 0 0 1.5px #fff}

/* disclosure */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
.story summary,
#early-voting summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.01em;
}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
summary::marker{content:""}
.story summary:hover,
#early-voting summary:hover{color:var(--green-deep)}
.story summary .hint,
#early-voting summary .hint{display:block;font-family:var(--body);font-weight:400;font-size:15px;color:var(--soft);margin-top:3px;letter-spacing:0}
.story summary::after,
#early-voting summary::after{
  content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg);transition:transform .22s ease;
}
.story details[open]>summary::after,
#early-voting details[open]>summary::after{transform:rotate(-135deg);top:30px}
.reveal{padding:0 0 24px;color:#2C3831}
.reveal p{margin:0 0 16px;max-width:66ch}
.reveal p:last-child{margin-bottom:0}
.reveal .more{display:inline-block;margin-top:6px;font-weight:600;font-size:15.5px;color:var(--green-deep)}

/* inline read-more under hero */
.story{padding:0 0 clamp(44px,6vw,66px)}

/* quick actions */
.quick{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)}
.quick .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);padding:0;max-width:1120px}
.quick a{background:var(--tint);padding:22px 16px;text-decoration:none;text-align:center;font-size:15px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .18s ease}
.quick a:hover{background:#fff;color:var(--green-deep)}
.quick .chev{display:none}
.quick svg{width:24px;height:24px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* sections */
section{padding:clamp(46px,6vw,72px) 0;border-top:1px solid var(--line)}
section.tinted{background:var(--tint)}
h2{font-size:clamp(24px,3.4vw,34px);color:var(--green-deep)}
.sub{margin:10px 0 26px;color:var(--soft);max-width:58ch}



/* ---- section rhythm ---- */
section,.story,.quick{position:relative}

/* tinted band */
section.tinted{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* white sections get a hairline so the edge is still legible */
section:not(.tinted):not(.deep){border-top:1px solid var(--line)}

/* the closing form sits on deep green so the page has an end */
section.deep{
  background:var(--green-deep);color:#fff;border-top:0;
}
section.deep h2{color:#fff}
section.deep .sub{color:rgba(255,255,255,.75)}
section.deep .field label{color:#fff}
section.deep .field .opt{color:rgba(255,255,255,.6)}
section.deep .field input,section.deep .field textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;
}
section.deep .field input::placeholder,section.deep .field textarea::placeholder{color:rgba(255,255,255,.5)}
section.deep .field input:focus,section.deep .field textarea:focus{
  border-color:#fff;background:rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
section.deep legend{color:rgba(255,255,255,.8)}
section.deep .check{color:#fff}
section.deep .check input{accent-color:var(--green)}
section.deep .btn{background:var(--green);color:#062818}
section.deep .btn:hover{background:#00B345}

/* the story block reads as part of the hero, not a separate slab */
.story{background:#fff}


/* accordion behaviour, phones only */
.pcol > summary{list-style:none;cursor:default}
.pcol > summary::-webkit-details-marker{display:none}
summary{list-style:none}
summary::marker{content:""}
.pcol > summary::after{content:none!important}
.pchev{display:none}
.pcol > summary::marker{content:""}

@media(max-width:860px){
  .pcols{border:1px solid var(--line);background:var(--line)}
  .pcol{padding:0;background:#fff}
  .pcol > summary{
    cursor:pointer;padding:16px 18px;margin:0;border-bottom:0;
    display:flex;align-items:center;gap:10px;
    transition:background .16s ease;
  }
  .pcol > summary:hover{background:var(--tint)}
  .pcol-h h3{font-size:15px}
  .pchev{
    display:block;width:20px;height:20px;flex:none;margin-left:auto;
    fill:none;stroke:var(--green-deep);stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .24s cubic-bezier(.2,.8,.25,1);
  }
  .pcol[open] .pchev{transform:rotate(180deg)}
  .plist{padding:0 18px 14px}
  .plist a{padding:12px 0;font-size:16.5px}
  .plist a::after{display:none}
}
@media(prefers-reduced-motion:reduce){.pchev{transition-duration:.001ms}}

/* priorities, grouped into three columns */
.pcols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:30px;
}
.pcol{background:#fff;padding:22px 22px 24px}
.pcol-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pcol-h svg{
  width:20px;height:20px;flex:none;fill:none;stroke:var(--green);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.pcol-h h3{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em;
  color:var(--green-deep);margin:0;line-height:1.25;
}
.plist{list-style:none;margin:0;padding:0}
.plist a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;text-decoration:none;font-family:var(--body);font-weight:500;
  font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-soft,#EFF3EF);
  transition:color .16s ease,padding-left .16s ease;
}
.plist li:last-child a{border-bottom:0}
.plist a::after{
  content:"";width:6px;height:6px;flex:none;opacity:0;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);transition:opacity .16s ease;
}
.plist a:hover{color:var(--green-deep);padding-left:5px}
.plist a:hover::after{opacity:1}
.all-link{
  display:inline-block;margin-top:24px;font-family:var(--body);font-weight:600;
  font-size:16px;color:var(--green-deep);text-decoration:none;
}
.all-link:hover{text-decoration:underline}
@media(max-width:860px){
  .pcols{grid-template-columns:1fr}
  .pcol{padding:20px 18px 20px}
}

/* form */
.form{max-width:560px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:13px 14px;font-family:var(--body);font-size:16.5px;border:1px solid #C4D0C7;border-radius:3px;background:#fff}
.field input:focus{border-color:var(--green-deep)}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-size:14.5px;font-weight:600;padding:0;margin-bottom:4px}
.check{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:16.5px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--green-deep);flex:none}

/* early voting */
.ev-note{margin:0 0 8px;padding:16px 18px;background:var(--tint);border-left:3px solid var(--green);font-size:16.5px}
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:6px}
.place b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;margin-bottom:4px}
.place span{color:var(--soft);font-size:16px;line-height:1.55}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 52px;font-size:15px;color:var(--soft)}
.f-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.f-nav{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0 0 24px;padding:0}
.f-nav a{font-size:15px;font-weight:600;text-decoration:none}
.f-nav a:hover{color:var(--green-deep)}
.legal{margin:0;font-size:14px;color:#7E8A83;max-width:70ch;line-height:1.6}

@media(max-width:900px){
  .quick .wrap{grid-template-columns:repeat(2,1fr)}
  .places{grid-template-columns:1fr}
}

/* phones: the same arrangement, using the phone crop of the photo */
@media(max-width:760px){
  .hero .hero-photo{
    background-image:var(--hero-sm),linear-gradient(135deg,#0E4A2C 0%,#062818 55%,#0B3520 100%);
    aspect-ratio:var(--hero-ar-sm,3 / 2);
    max-height:62vh;
  }
  .hero .hero-inner{
    padding:clamp(16px,4vw,24px) var(--gut) clamp(36px,9vw,48px);
    width:100%;
  }
  .hero h1{font-size:clamp(30px,8.4vw,38px);max-width:none}
  .hero .lede{font-size:17px;margin-top:14px;max-width:36ch}
  .cta{margin-top:24px;gap:10px}
  .cta .btn{flex:1 1 100%;text-align:center;padding:15px 20px}
}

/* very short phones: give the photo less room so the buttons stay reachable */
@media(max-width:760px) and (max-height:680px){
  .hero .hero-photo{max-height:46vh}
}
@media(max-width:760px){
  header{position:relative}
  html{scroll-padding-top:12px}
  /* mobile nav panel */
  .nav{padding:12px var(--gut)}
  .logo{max-height:34px}
  .nav-right{gap:10px}
  .nav-right > .social{display:none}          /* moves into the open panel */
  .menu-btn{display:flex}
  .nav-right ul{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 18px 30px -22px rgba(0,40,20,.45);
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 18px;z-index:41;
  }
  .nav-right ul.open{display:flex}
  .nav-right ul a{
    display:block;padding:15px 2px;font-size:17px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--line);border-radius:0;
  }
  .nav-right ul a:hover{color:var(--green-deep);background:transparent}
  .nav-right ul a.donate{
    display:block;text-align:center;margin-top:14px;padding:15px 20px;
    background:var(--green-deep);color:#fff;border-bottom:0;border-radius:4px;
  }
  .nav-right ul a.donate:hover{background:#004E20;color:#fff}
  .nav-social-li{display:block;list-style:none}
  .nav-social-m{display:flex;gap:16px;justify-content:center;padding:18px 0 2px}
  .nav-right .nav-social-m a{
    width:42px;height:42px;padding:0;background:#fff;border:1px solid var(--line);
    border-radius:999px;display:grid;place-items:center;color:var(--soft);
  }
  .nav-right .nav-social-m a:hover{border-color:var(--green-deep);color:var(--green-deep);background:var(--tint)}
  .nav-social-m svg{width:17px;height:17px;fill:currentColor}
  /* quick actions: compact left-aligned rows instead of five tall tiles */
  .quick .wrap{display:block;background:transparent;border:0;padding:0}
  .quick a{
    display:flex;flex-direction:row;align-items:center;gap:14px;
    text-align:left;padding:15px var(--gut);background:#fff;
    border-bottom:1px solid var(--line);font-size:16.5px;
  }
  .quick a:last-child{border-bottom:0}
  .quick a span{flex:1}
  .quick svg{width:21px;height:21px}
  .quick .chev{
    display:block;width:8px;height:8px;flex:none;
    border-right:2px solid #B9C6BC;border-bottom:2px solid #B9C6BC;
    transform:rotate(-45deg);
  }
  /* donate reads as the action, not another link */
  .quick a:last-child{background:var(--green-deep);color:#fff}
  .quick a:last-child svg{stroke:#fff}
  .quick a:last-child .chev{border-color:rgba(255,255,255,.7)}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* top notification bar */
.notice{background:var(--green-deep);color:#fff;font-family:var(--body);font-size:14.5px}
.notice .wrap{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px var(--gut);max-width:1120px;
}
.notice b{font-weight:600;color:#fff;margin-right:6px}
.notice .n-item{color:rgba(255,255,255,.88);white-space:nowrap}
.notice .n-sep{color:rgba(255,255,255,.45)}
.notice .n-link{
  margin-left:auto;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px;
}
.notice .n-link:hover{border-bottom-color:#fff}
@media(max-width:760px){
  .notice{font-size:13.5px}
  .notice .wrap{gap:6px 10px;padding:8px var(--gut)}
  .notice .n-sep{display:none}
  .notice .n-item{white-space:normal}
  .notice .n-link{margin-left:0;width:100%;margin-top:2px}
}

/* emphasised lead paragraph */
.reveal p.emph{font-family:var(--body);font-weight:600;color:var(--ink);font-size:18.5px;line-height:1.6}


/* ---------------------------------------------------------------- touch
   Small inline links and controls get a finger-sized hit area on phones,
   and the uppercase labels get a touch more size to stay legible. */
@media(max-width:760px){
  .notice .n-link{display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
  .social a,.nav-social-m a{min-width:40px;min-height:40px}
  .all-link,.spot .go,.side-card a.mail,.links2 a,.cc-cta{min-height:40px}
  /* label over agency reads better than squeezing them side by side */
  .links2 a{flex-direction:column;align-items:flex-start;gap:3px}
  .links2 a small{font-size:14.5px}
  .all-link,.spot .go,.side-card a.mail{display:inline-flex;align-items:center}
  .cc-cta{display:inline-flex;align-items:flex-end}
  .chip{min-height:40px}
  .check{min-height:44px}
  .nav>a{display:inline-flex;align-items:center;min-height:44px}
  .util a{display:inline-block;padding:7px 0}
  .check input{width:22px;height:22px}
  .office,.rec-label,.grp-label,.tag,.spot .tag,.way .tag,.answer .a-item .k{font-size:13px}
}

/* Tablets and phones in landscape are touch devices too, so they get the
   same hit areas even though the layout is still the wide one. */
@media(max-width:1024px) and (pointer:coarse){
  .notice .n-link{display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
  .social a,.nav-social-m a{min-width:40px;min-height:40px}
  .all-link,.spot .go,.side-card a.mail{display:inline-flex;align-items:center;min-height:40px}
  .links2 a,.cc-cta{min-height:40px}
  .nav>a{display:inline-flex;align-items:center;min-height:44px}
  .util a{display:inline-block;padding:7px 0}
  .chip{min-height:40px}
  .check{min-height:44px}
  .check input{width:22px;height:22px}
  .office,.rec-label,.grp-label,.tag,.spot .tag,.way .tag,.answer .a-item .k{font-size:13px}
}