/* Bryan Moore for Cumberland County Board of Education — public site.
   Hand-written. Design tokens come from shared/tokens.css (GENERATED).

   Direction: "Friday night lights" — photo-forward, high contrast, condensed
   display type over dark ground. The campaign's differentiator is that he has
   spent years in these gyms and stadiums, so the site should feel like that
   rather than like a municipal PDF. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-700)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4,.display{
  font-family:var(--display);font-weight:700;line-height:1.02;
  text-transform:uppercase;letter-spacing:.012em;margin:0;
}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.55;color:var(--muted)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section--dark{background:var(--ink);color:#fff}
.section--dark .lede,.section--dark p{color:rgba(255,255,255,.78)}
.section--tint{background:var(--card)}
.eyebrow{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;
  font-size:.82rem;color:var(--brand);margin:0 0 .7rem;font-weight:600;
}
.section--dark .eyebrow{color:var(--gold)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--gold);color:var(--ink);padding:.7rem 1.1rem;border-radius:8px;font-weight:700}

/* ---------- header ---------- */
.masthead{background:var(--ink);color:#fff;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--brand)}
.masthead .wrap{display:flex;align-items:center;gap:1.2rem;min-height:70px}
.brandmark{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none;margin-right:auto}
.brandmark__mark{
  width:38px;height:38px;border-radius:8px;background:var(--brand);color:var(--gold);
  display:grid;place-items:center;font-family:var(--display);font-size:1.4rem;font-weight:700;flex:none;
}
.brandmark__name{font-family:var(--display);font-size:1.22rem;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.brandmark__sub{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:.2rem;font-weight:600}
#navlinks{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
#navlinks a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:.94rem}
/* :not(.btn) matters — a nav link styled as a gold button would otherwise
   take gold text on a gold background and render blank. */
#navlinks a:not(.btn):hover,#navlinks a:not(.btn)[aria-current=page]{color:var(--gold)}
#navlinks .btn--nav[aria-current=page]{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.nav-toggle{display:none;background:none;border:2px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:.45rem .7rem;font-size:1.1rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  font-size:1rem;padding:.85rem 1.6rem;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-700);color:#fff}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#e0a12b;color:var(--ink)}
.btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(16,20,28,.95) 0%,rgba(16,20,28,.82) 42%,rgba(16,20,28,.42) 100%);
}
.hero__inner{position:relative;z-index:2;padding-block:clamp(3.6rem,10vw,7rem)}
.hero__content{max-width:44rem}
.hero h1{margin-bottom:.7rem}
.hero h1 .accent{color:var(--gold);display:block}
.hero__office{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.82rem,1.6vw,1rem);color:var(--gold);margin:0 0 1.1rem;font-weight:600;
}
.hero__tagline{font-size:clamp(1.05rem,2.1vw,1.3rem);color:rgba(255,255,255,.85);margin-bottom:1.5rem}

/* ---------- ballot bar: the three-slot ask ---------- */
.ballot-bar{background:var(--gold);color:var(--ink);border-block:3px solid var(--ink)}
.ballot-bar .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.55rem 1rem;padding-block:1rem;text-align:center;
}
.ballot-bar strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.02rem,2.1vw,1.32rem)}
.ballot-bar span{font-size:.98rem;font-weight:500}

/* ---------- countdown ---------- */
.countdown{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.countdown__item{
  background:rgba(255,255,255,.07);border:1px solid rgba(242,177,52,.35);
  border-radius:var(--radius);padding:.7rem 1.1rem;min-width:8.6rem;
}
.countdown__n{display:block;font-family:var(--display);font-size:1.75rem;color:var(--gold);line-height:1.1}
.countdown__l{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.66);margin-top:.15rem}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.4rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.7rem;box-shadow:var(--shadow);
}
.section--tint .card{background:#fff}
.card__n{
  font-family:var(--display);font-size:2.5rem;line-height:1;color:var(--brand);
  opacity:.24;display:block;margin-bottom:.4rem;
}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.card--dark .card__n{color:var(--gold);opacity:.5}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){ .split{grid-template-columns:1fr 1fr} .split--narrow{grid-template-columns:.85fr 1.15fr} }
.split__media img{border-radius:var(--radius-lg);border:1px solid var(--line)}

/* ---------- stats ---------- */
.stats{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:2rem}
.stat{border-left:4px solid var(--brand);padding:.35rem 0 .35rem 1rem}
.section--dark .stat{border-left-color:var(--gold)}
.stat__n{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.05;color:var(--brand)}
.section--dark .stat__n{color:var(--gold)}
.stat__l{display:block;font-size:.87rem;color:var(--muted);margin-top:.25rem}
.section--dark .stat__l{color:rgba(255,255,255,.68)}

/* ---------- quote ---------- */
.pullquote{
  border-left:5px solid var(--gold);padding:.4rem 0 .4rem 1.4rem;margin:0;
  font-family:var(--display);font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.18;text-transform:none;
}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9rem;font-style:normal;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}
.section--dark .pullquote cite{color:rgba(255,255,255,.6)}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:600;font-size:.92rem}
.field .hint{font-size:.82rem;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--field-border);border-radius:var(--radius);padding:.7rem .85rem;width:100%;
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:2px solid rgba(158,27,50,.18);outline-offset:1px}
.checks{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;font-weight:500}
.check input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--brand)}
.hp{position:absolute!important;left:-9999px!important}
.form-status{border-radius:var(--radius);padding:.75rem .95rem;font-weight:600;font-size:.94rem}
.form-status.ok{background:#e8f5ec;color:#14532d;border:1px solid #a9d6ba}
.form-status.err{background:#fdeaec;color:#7c1426;border:1px solid #f0b4bd}
.required{color:var(--brand)}

/* ---------- posts ---------- */
.post-list{display:grid;gap:1.4rem;list-style:none;margin:0;padding:0}
.post{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.post a{text-decoration:none;color:inherit;display:block;padding:1.6rem}
.post a:hover h3{color:var(--brand)}
.post h3{margin-bottom:.5rem;text-transform:none;letter-spacing:0;font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.2}
.post p{color:var(--muted);margin:0}
.prose{max-width:44rem}
.prose h2{margin:2.2rem 0 .8rem}
.prose h3{margin:1.8rem 0 .6rem;text-transform:none;letter-spacing:0}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:3rem 2rem;font-size:.93rem}
.footer a{color:var(--gold)}
.footer__grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:2rem}
.footer h4{font-size:.86rem;letter-spacing:.15em;color:#fff;margin-bottom:.7rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer__legal{border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;display:grid;gap:.5rem}
.disclaimer{
  font-weight:700;color:#fff;letter-spacing:.02em;
  border:1px solid rgba(242,177,52,.4);border-radius:var(--radius);
  padding:.7rem .95rem;display:inline-block;
}

/* ---------- cookie banner ---------- */
#cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;max-width:34rem;margin-inline:auto;
  background:var(--ink);color:#fff;border:1px solid rgba(242,177,52,.4);border-radius:var(--radius-lg);
  padding:1rem 1.1rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55);font-size:.9rem;
}

/* ---------- notice ---------- */
.notice{
  background:var(--gold-light);border:1px solid var(--gold-line);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:1rem 1.2rem;font-size:.94rem;
}
.notice strong{font-family:var(--display);letter-spacing:.03em}

@media (max-width:820px){
  .nav-toggle{display:block}
  #navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 0;
    border-bottom:3px solid var(--brand);
  }
  #navlinks.open{display:flex}
  #navlinks li{width:100%}
  #navlinks a{display:block;padding:.85rem clamp(1.1rem,4vw,2.5rem)}
  .masthead .wrap{position:relative}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- nav CTA ---------- */
.btn--nav{padding:.45rem 1.05rem;font-size:.85rem;border-radius:8px}
@media (max-width:820px){
  #navlinks li:last-child{padding:.4rem clamp(1.1rem,4vw,2.5rem) .9rem}
  .btn--nav{display:inline-flex}
}

/* ---------- vote page ---------- */
.steps{counter-reset:step;display:grid;gap:1.1rem;margin-top:2rem}
.step{
  position:relative;padding-left:3.6rem;
  border-left:3px solid var(--gold);margin-left:1.2rem;padding-bottom:.4rem;
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:-1.35rem;top:0;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-size:1.15rem;font-weight:700;
}
.step h3{margin-bottom:.35rem}
.step p:last-child{margin-bottom:0}
.datelist{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
/* Grid, not flex: with flex-wrap a long row drops its text to the next line
   while short rows stay inline, so the column edge zigzags down the list. */
.datelist li{
  display:grid;grid-template-columns:11rem 1fr;gap:.3rem 1.2rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:.7rem;
}
@media (max-width:620px){ .datelist li{grid-template-columns:1fr} }
.datelist .when{font-family:var(--display);font-size:1.05rem;color:var(--brand)}
.section--dark .datelist li{border-bottom-color:rgba(255,255,255,.16)}
.section--dark .datelist .when{color:var(--gold)}

/* ---------- gated feature ---------- */
.gate{
  border:2px dashed var(--gold);background:var(--gold-light);
  border-radius:var(--radius-lg);padding:1.8rem;
}
.gate h3{margin-bottom:.6rem}
.gate p:last-child{margin-bottom:0}
.gate__badge{
  display:inline-block;background:var(--ink);color:var(--gold);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;padding:.3rem .7rem;border-radius:999px;margin-bottom:.9rem;
}
.amounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:.6rem;margin-bottom:1rem}
.amount{
  border:2px solid var(--field-border);background:#fff;border-radius:var(--radius);
  padding:.75rem .5rem;font-family:var(--display);font-size:1.15rem;cursor:pointer;text-align:center;
}
.amount[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:#fff}
.freq{display:flex;gap:.5rem;margin-bottom:1rem}
.freq button{
  flex:1;border:2px solid var(--field-border);background:#fff;border-radius:var(--radius);
  padding:.6rem;font-weight:600;cursor:pointer;font:inherit;font-weight:600;
}
.freq button[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:#fff}
.fine{font-size:.82rem;color:var(--muted);line-height:1.5}