/* 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)}
.post-meta{
  font-size:.86rem;letter-spacing:.02em;margin:.9rem 0 0;font-weight:500;
}
.section--dark .post-meta{color:rgba(255,255,255,.62)}

/* ---------- 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;white-space:nowrap}
/* Seven links plus Donate: the gap gives way before a label breaks in two,
   and below 1140px the hamburger takes over (see the media block). */
#navlinks{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.5rem);list-style:none;margin:0;padding:0}
#navlinks a{white-space:nowrap}
#navlinks a:not(.btn){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::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(242,177,52,.055) 0 2px,transparent 2px 22px);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 8% 0%,rgba(158,27,50,.32) 0%,transparent 60%);
}
.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:not(.btn){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;
}


/* ---------- 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:1140px){
  .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:1140px){
  #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}

/* ---------- fact card ---------- */
/* Replaced the empty photo frames. A grey box that says "photo goes here"
   tells a voter nothing; four concrete facts tell them who he is. */
.factcard{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brand);
  border-radius:var(--radius-lg);padding:1.7rem;box-shadow:var(--shadow);
}
.factcard h3{margin-bottom:1.1rem}
.factcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.factcard li{display:grid;gap:.15rem;font-size:.97rem;line-height:1.5}
.factcard li span{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;
  font-size:.72rem;color:var(--brand);
}
.factcard--accent{border-left-color:var(--gold)}
.factcard--accent li span{color:var(--warm)}
.section--dark .factcard{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  border-left-color:var(--gold);color:#fff;
}
.section--dark .factcard li span{color:var(--gold)}
.section--dark .factcard a:not(.btn){color:var(--gold)}

/* ── Booking widgets ───────────────────────────────────────────────────────
   Used by /schedule.html and /manage-call.html. Both pages talk to the same
   scheduling worker and show the same day/time picker, so the picker lives
   here rather than being defined twice in two <style> blocks — which is how
   the template shipped it, and how the two copies drifted apart.

   Every colour below is a token of the crimson-and-gold palette. */
.hidden{display:none!important}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);margin:.75rem 0 0}
.req{color:var(--warm)}

/* A day is a chip; a time is a button. Both are toggles, so both carry
   aria-pressed and both show that state visually — a selected chip that only
   a screen reader can identify is not a selection. */
.days,.times{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0}
.day-chip,.time-btn{
  font:inherit;font-weight:700;cursor:pointer;
  padding:.55rem .95rem;border-radius:999px;
  border:2px solid var(--line);background:var(--paper);color:var(--brand);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.time-btn{border-radius:var(--radius);min-width:6.5rem;justify-content:center}
.day-chip:hover,.time-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.day-chip[aria-pressed="true"],.time-btn[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:var(--paper);
}
.day-chip:focus-visible,.time-btn:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.day-chip:disabled,.time-btn:disabled{opacity:.5;cursor:default}

/* The slot you picked, held in view while you fill in your details. */
.selected-slot{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;
  background:var(--gold-light);border:1px solid var(--gold-line);
  border-radius:var(--radius);padding:.7rem .95rem;margin-bottom:1.1rem;color:var(--ink);
}
.link-btn{
  font:inherit;font-weight:700;cursor:pointer;
  background:none;border:0;padding:0;color:var(--warm);text-decoration:underline;
}
.link-btn:hover{color:var(--brand)}

/* An error the visitor has to act on. Announced via role="alert" on the
   element itself; this only has to make it visible and legible. */
.banner{border-radius:var(--radius);padding:.75rem .95rem;margin-bottom:1rem;font-weight:600}
.banner.error{background:var(--gold-light);border:1px solid var(--gold-line);color:var(--warm)}

/* Terminal states: booked, moved, canceled. */
.confirm{text-align:center}
.confirm .big{display:block;margin-bottom:.4rem}
.booking-panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1.1rem;
}
.booking-panel .k{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.booking-panel .when{font-family:var(--display);font-size:1.3rem;color:var(--brand);margin:.15rem 0 .2rem}

/* Numbered step heading inside the booking card. */
.step-label{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--brand);margin:0 0 .5rem}
.step-num{
  display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--brand);color:var(--paper);font-size:.85rem;
}