/* ===========================================================================
   Amos Patton — campaign site
   Per-cycle values live in :root and in the bracketed tokens. See README.
   =========================================================================== */

:root{
  /* Restrained navy / brick-red / white. Red is used only as a keyline, a
     numeral, a link rule and the primary button — never as a large fill. */
  --navy:#15294B;
  --navy-dk:#0E1C35;
  --navy-lt:#2C457090;
  --red:#B4232F;
  --red-dk:#8E1A24;
  --paper:#FFFFFF;
  --mist:#F2F4F7;
  --ink:#1A1F2B;
  --slate:#5A6478;
  --hair:#D7DCE4;
  --pale:#C9D6E8;

  --shell:72rem;
  --narrow:40rem;

  --t--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --t-0:clamp(1rem,.97rem + .18vw,1.09rem);
  --t-1:clamp(1.12rem,1.06rem + .34vw,1.3rem);
  --t-2:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --t-3:clamp(2rem,1.62rem + 1.9vw,3.2rem);
  --t-4:clamp(2.9rem,1.9rem + 5vw,6.2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-0);line-height:1.62;
  border-top:4px solid var(--red);     /* the only flag reference on the page */
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-weight:700;line-height:1.08;letter-spacing:-.018em;
  margin:0 0 .45em;text-wrap:balance;color:var(--navy);
}
h1{font-size:var(--t-3)}
h2{font-size:var(--t-2)}
h3{font-size:var(--t-1);letter-spacing:-.008em}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:20px}
@media (min-width:52rem){.shell{padding-inline:40px}}
.narrow{max-width:calc(var(--narrow) + 80px)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.honey{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:0;z-index:30;background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:0}
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--red);outline-offset:2px}

.eyebrow{
  font-weight:600;font-size:var(--t--1);line-height:1;
  letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 .85rem;color:var(--red);
}

/* ---------- header ------------------------------------------------------ */

.bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--hair)}
.bar-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding:0 20px;
  display:flex;align-items:center;gap:1rem;min-height:78px;flex-wrap:wrap;
}
@media (min-width:52rem){.bar-in{padding-inline:40px}}
/* Wordmark: red keyline + stacked name and office. The keyline stretches to the
   lockup's full height, so the two pieces read as one mark rather than as text
   floating in the bar. */
.logo{
  margin-right:auto;color:var(--navy);text-decoration:none;
  display:flex;align-items:stretch;gap:.72rem;
}
.logo::before{
  content:"";width:5px;flex:none;background:var(--red);border-radius:1px;
}
.logo-stack{display:flex;flex-direction:column;justify-content:center}
.logo-name{
  font-weight:800;font-size:clamp(1.22rem,1.05rem + .6vw,1.5rem);
  line-height:1.02;letter-spacing:-.022em;
}
.logo-office{
  margin-top:.3rem;font-size:clamp(.58rem,.52rem + .14vw,.66rem);
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--red);line-height:1;
}
.logo:hover .logo-name{color:var(--red)}

.burger{
  display:inline-flex;align-items:center;gap:.55rem;
  font:inherit;font-weight:600;background:var(--navy);color:#fff;
  border:0;padding:.5rem .95rem;cursor:pointer;border-radius:2px;
}
.burger span{display:block;width:16px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}
.nav{display:none;width:100%;padding-bottom:.9rem}
.nav a{
  display:block;padding:.6rem 0;color:var(--navy);text-decoration:none;
  font-weight:500;border-bottom:1px solid var(--hair);
}
/* In the burger menu there is no underline to carry the current page, so colour
   would be the only signal. Add the red keyline and the weight, same motif as
   the wordmark. Desktop resets both and goes back to the underline. */
.nav a[aria-current="page"]{
  color:var(--red);font-weight:700;
  border-left:3px solid var(--red);padding-left:.65rem;
}
.nav[data-open="true"]{display:block}

@media (min-width:72rem){
  .burger{display:none}
  .nav{display:flex;gap:1.75rem;width:auto;padding:0}
  .nav a{border:0;padding:.45rem 0;position:relative}
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--red);transform:scaleX(0);transform-origin:left;
  }
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  /* Drop the burger-menu keyline; the underline above does the job here. This
     has to sit above the .nav-cta rules, which need to win on padding. */
  .nav a[aria-current="page"]{font-weight:500;border-left:0;padding-left:0}
  /* "Get involved" is the last nav item and becomes the header button on
     desktop. In the mobile menu it is an ordinary link. */
  .nav a.nav-cta{
    align-self:center;margin-left:.25rem;padding:.5rem 1.15rem;font-size:var(--t--1);font-weight:600;
    background:var(--red);color:#fff;border:2px solid var(--red);border-radius:2px;line-height:1.3;
  }
  .nav a.nav-cta::after{display:none}
  .nav a.nav-cta:hover,.nav a.nav-cta[aria-current="page"]{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
}

/* ---------- buttons ----------------------------------------------------- */

.cta{
  display:inline-block;font-weight:600;font-size:var(--t-0);line-height:1.3;
  padding:.68rem 1.6rem;text-decoration:none;cursor:pointer;border-radius:2px;
  background:var(--red);color:#fff;border:2px solid var(--red);
  letter-spacing:.005em;
}
.cta:hover{background:var(--red-dk);border-color:var(--red-dk)}
.cta-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.cta-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.cta-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.cta-dark:hover{background:var(--navy-dk);border-color:var(--navy-dk)}

/* ---------- hero -------------------------------------------------------- */

.hero{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(14,28,53,.95) 0%,rgba(14,28,53,.86) 42%,rgba(14,28,53,.42) 100%);
}
.hero-in{padding-block:clamp(3rem,1.6rem + 7vw,7rem);color:#fff}
.hero .eyebrow{color:var(--pale)}
.hero-h{
  font-size:var(--t-4);font-weight:800;line-height:.94;
  letter-spacing:-.028em;margin:0 0 .3rem;color:#fff;
}
.hero-office{
  font-size:var(--t-2);font-weight:500;line-height:1.1;
  margin:0 0 1.5rem;color:var(--pale);letter-spacing:-.01em;
  padding-top:1rem;border-top:3px solid var(--red);display:inline-block;
}
.hero-line{font-size:var(--t-1);max-width:40ch;margin:0 0 1.9rem;color:rgba(255,255,255,.93)}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}

/* ---------- sign-up strip ---------------------------------------------- */

.strip{background:var(--mist);border-block:1px solid var(--hair);padding-block:clamp(1.8rem,1.2rem + 2vw,2.6rem)}
.strip-in{display:grid;gap:1.3rem;align-items:center}
@media (min-width:58rem){.strip-in{grid-template-columns:1.1fr 1fr;gap:3rem}}
.strip-h{font-size:var(--t-2);margin:0 0 .3em}
.strip-p{margin:0;color:var(--slate);max-width:48ch}
.inlineform{display:flex;flex-wrap:wrap;gap:.6rem}
.inlineform input[type=email]{
  flex:1 1 14rem;font:inherit;padding:.65rem .8rem;border-radius:2px;
  border:1px solid var(--hair);background:#fff;color:var(--ink);
}

/* ---------- slabs ------------------------------------------------------- */

.slab{padding-block:clamp(2.75rem,1.8rem + 3.6vw,5.25rem);background:var(--paper)}
.slab-alt{background:var(--mist)}
.slab-navy{background:var(--navy);color:#fff}
.slab-navy h2,.slab-navy h3{color:#fff}
.slab-navy p{color:rgba(255,255,255,.86)}
.slab-navy p.eyebrow{color:var(--pale)}

.pagehead{background:var(--navy);color:#fff;padding-block:clamp(2.4rem,1.4rem + 3.2vw,4rem)}
.pagehead h1{margin:0;max-width:22ch;color:#fff}
.pagehead .eyebrow{color:var(--pale)}

.big{font-size:var(--t-3)}
.lead{font-size:var(--t-1);color:var(--slate);margin-bottom:1.1em}
.slab-navy .lead{color:var(--pale)}

.duo{display:grid;gap:clamp(1.8rem,1.1rem + 3vw,3.5rem);align-items:center}
@media (min-width:58rem){
  .duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .duo-flip .shot{order:2}
}
.shot{margin:0}
.shot img{width:100%;border-radius:3px}
.duo .shot img{max-height:min(70vh,620px);object-fit:cover}

.num{
  display:block;font-weight:700;font-size:var(--t-1);line-height:1;
  color:var(--red);margin-bottom:.6rem;letter-spacing:.06em;
}

.planks{list-style:none;margin:1.8rem 0;padding:0}
.planks li{padding-block:1.4rem;border-top:1px solid rgba(255,255,255,.22)}
.planks li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.planks h3{margin-bottom:.3em}
.planks-dark li{border-color:var(--hair)}

.ticks{list-style:none;margin:0 0 1.5rem;padding:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.55rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.6rem;height:.6rem;background:var(--red);border-radius:1px;
}

.arrow{
  display:inline-block;font-weight:600;color:var(--red);
  text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px;
}
.arrow:hover{color:var(--navy);border-color:var(--navy)}
.arrow-light{color:#fff;border-color:rgba(255,255,255,.5)}
.arrow-light:hover{color:var(--pale);border-color:#fff}
.inline{color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}

.quotes{display:grid;gap:1.6rem;margin-top:1.6rem}
@media (min-width:52rem){.quotes{grid-template-columns:1fr 1fr}}
.quotes blockquote{margin:0;padding:1.5rem;background:var(--mist);border-left:3px solid var(--red);border-radius:2px}
.quotes p{font-size:var(--t-1);margin-bottom:.8em;color:var(--navy)}
.quotes cite{font-style:normal;font-weight:600;font-size:var(--t--1);color:var(--slate)}

/* ---------- forms ------------------------------------------------------- */

.split{display:grid;gap:clamp(2rem,1.2rem + 3vw,3.5rem)}
@media (min-width:62rem){.split{grid-template-columns:1fr 24rem;align-items:start}}
.card{background:var(--mist);border:1px solid var(--hair);border-top:3px solid var(--red);padding:1.6rem;border-radius:2px}
.card h2{margin-top:0}
.formnote{font-size:var(--t--1);color:var(--slate);margin-bottom:1.2em}
.card label{display:block;font-weight:600;margin:0 0 .3rem;font-size:var(--t--1)}
.card .opt{font-weight:400;color:var(--slate)}
.card input[type=text],.card input[type=email],.card input[type=tel],.card input[type=password],
.card input[type=date],.card input[type=file],.card textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border-radius:2px;
  border:1px solid var(--hair);padding:.55rem .65rem;margin-bottom:.95rem;
}
.card textarea{resize:vertical}
.card fieldset{border:0;padding:0;margin:0 0 1rem}
.card legend{font-weight:600;padding:0;margin-bottom:.4rem;font-size:var(--t--1)}
.card .check{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;margin-bottom:.4rem;font-size:var(--t-0)}
.card .check input{margin-top:.4rem;flex:none}

.contactline{font-size:var(--t-1)}

/* ---------- statements feed (statements.php) --------------------------- */

.feed{max-width:calc(54rem + 80px)}
.feed > .lead{margin-bottom:2.2rem}
.empty{padding:1.4rem 1.5rem;background:var(--mist);border-left:3px solid var(--red);border-radius:2px;color:var(--slate)}
.stmt{padding-block:2.2rem;border-top:1px solid var(--hair);scroll-margin-top:96px}
.stmt:last-child{border-bottom:1px solid var(--hair)}
.stmt h2{margin-bottom:.4em}
.stmt-anchor{color:inherit;text-decoration:none}
.stmt-anchor:hover{color:var(--red)}
.stmt-doc{margin:1.3rem 0 1rem;border:1px solid var(--hair);background:var(--mist);border-radius:2px}
.stmt-doc iframe{display:block;width:100%;height:min(80vh,860px);border:0}
.stmt-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;margin:0}
.stmt-meta span{font-size:var(--t--1);color:var(--slate)}
/* Phone browsers either show one page of an embedded PDF or nothing at all,
   so on narrow screens the visitor gets the button instead. */
@media (max-width:40rem){.stmt-doc{display:none}}

/* ---------- donate placeholder (donate.html) --------------------------- */

.soon{font-size:var(--t-4);font-weight:800;line-height:.95;letter-spacing:-.028em;color:var(--navy);margin:0 0 1.2rem}

/* ---------- admin (admin.php, not public) ------------------------------ */

.admin-out{margin:0 0 0 1.2rem}
.admin-btn{padding:.45rem 1rem;font-size:var(--t--1)}
.admin-narrow{max-width:28rem}
.admin .split{grid-template-columns:none}
@media (min-width:62rem){.admin .split{grid-template-columns:1fr 26rem}}
.admin-pw{margin-top:1.4rem;border-top-color:var(--navy)}
.admin-pw summary{font-weight:600;cursor:pointer;color:var(--navy)}
.admin-pw form{margin-top:1rem}
.flash{padding:.85rem 1.1rem;border-left:3px solid var(--navy);background:#fff;margin-bottom:1.6rem;max-width:none;font-weight:500}
.flash-err{border-left-color:var(--red);color:var(--red-dk)}
.adminlist{list-style:none;margin:1rem 0 0;padding:0}
.adminlist li{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  padding:1.1rem 0;border-top:1px solid var(--hair)}
.adminlist li:last-child{border-bottom:1px solid var(--hair)}
.adminlist .eyebrow{margin-bottom:.45rem}
.adminlist h3{margin:0 0 .25em;font-size:var(--t-0)}
.adminlist h3 a{color:var(--navy)}
.adminlist-meta{font-size:var(--t--1);color:var(--slate);margin:0}
.adminlist form{margin:0;flex:none}
.admin-del{font:inherit;font-size:var(--t--1);font-weight:600;color:var(--red-dk);background:#fff;
  border:1px solid var(--hair);border-radius:2px;padding:.35rem .8rem;cursor:pointer}
.admin-del:hover{border-color:var(--red);color:var(--red)}

/* ---------- footer ------------------------------------------------------ */

.foot{background:var(--navy-dk);color:#fff;padding-block:2.4rem;border-top:4px solid var(--red)}
.foot-top{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;
  padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.18);
}
.foot-mark{
  margin:0;margin-right:auto;display:flex;align-items:stretch;gap:.72rem;
}
.foot-mark::before{content:"";width:5px;flex:none;background:var(--red);border-radius:1px}
.mark-stack{display:flex;flex-direction:column;justify-content:center}
.mark-name{
  display:block;font-weight:800;font-size:var(--t-1);line-height:1.02;
  letter-spacing:-.022em;color:#fff;
}
.mark-office{
  display:block;margin-top:.3rem;font-size:.64rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;line-height:1;
  color:var(--pale);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.foot-nav a{color:rgba(255,255,255,.82);text-decoration:none;font-weight:400;font-size:var(--t--1)}
.foot-nav a:hover{color:#fff;text-decoration:underline}
.paidfor{font-weight:600;font-size:var(--t-0);margin:0 0 .3em;color:#fff}
.fineprint{font-size:var(--t--1);color:rgba(255,255,255,.62);margin:0;max-width:64ch}

@media print{.bar,.nav,.burger,.skip,.foot-nav,.strip{display:none}body{background:#fff;color:#000;border-top:0}}