/* ============================================================
   Milton Arceneaux for Mayor — shared stylesheet
   Brand: Arceneaux Mayor Brand Sheet · Standard: 06_WEB_DESIGN_STANDARD
   ============================================================ */
:root{
  --navy:#102A43;        /* base — dominant field */
  --navy-soft:#16365a;
  --gold:#C9A227;        /* ornament ONLY — rules, underlines, eyebrows */
  --gold-dark:#b89021;
  --cream:#F0EBE2;       /* field / background */
  --brick:#9B2D20;       /* VOTE only, <5% */
  --ink:#1B1C32;         /* body on cream */
  --stone:#5A5A52;
  --sand:#D8D2C6;
  --cream-90:rgba(240,235,226,0.90);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --maxw:1200px; --textw:720px;
  --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.1; letter-spacing:-0.015em; margin:0 0 var(--s4);}
h1{font-size:64px; line-height:1.05; letter-spacing:-0.02em;}
h2{font-size:48px;}
h3{font-size:24px; line-height:1.25; letter-spacing:-0.01em; margin-bottom:var(--s3);}
p{margin:0 0 var(--s4); max-width:65ch;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}

.eyebrow{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 var(--s4);}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:40px;}
.narrow{max-width:var(--textw);}
.rule{height:3px; width:96px; background:var(--gold); border:0; margin:var(--s4) 0;}
.lead{font-size:18px; line-height:1.6;}
.skip{position:absolute; left:-999px; top:0; background:var(--navy); color:var(--cream); padding:12px 16px; z-index:200;}
.skip:focus{left:8px;}

/* buttons */
.btn{display:inline-block; font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:0.02em; border-radius:8px; padding:12px 24px; text-decoration:none; cursor:pointer; transition:all 200ms ease; border:2px solid transparent; min-height:44px;}
.btn-primary{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.btn-primary:hover{background:var(--gold-dark);}
.btn-on-navy{background:var(--cream); color:var(--navy);}
.btn-on-navy:hover{background:#fff;}
.btn-outline-navy{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:var(--cream);}
.btn-outline-cream{background:transparent; border-color:var(--cream); color:var(--cream);}
.btn-outline-cream:hover{background:var(--cream); color:var(--navy);}

/* nav */
header.nav{position:sticky; top:0; z-index:100; background:var(--navy);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px; max-width:var(--maxw); margin-inline:auto; padding-inline:40px;}
.brand{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--cream); text-decoration:none; letter-spacing:-0.01em;}
.brand .for{display:block; font-family:var(--sans); font-size:10px; letter-spacing:0.16em; color:var(--gold); text-transform:uppercase; font-weight:600; margin-top:2px;}
.nav-links{display:flex; align-items:center; gap:var(--s5); list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--cream); text-decoration:none; font-size:16px; font-weight:600;}
.nav-links a:hover{color:var(--gold);}
.nav-links a[aria-current="page"]{color:var(--gold); border-bottom:2px solid var(--gold); padding-bottom:4px;}
.nav-toggle{display:none; background:none; border:0; color:var(--cream); width:44px; height:44px; cursor:pointer;}
.nav-toggle svg{width:24px; height:24px;}

/* hero (home) */
.hero{position:relative; background:var(--navy); min-height:84vh; display:flex; align-items:center; overflow:hidden;}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:0.55;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(16,42,67,0.55), rgba(16,42,67,0.15));}
.hero .container{position:relative; z-index:2; padding-block:var(--s8);}
.panel{background:var(--cream-90); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); max-width:620px; padding:var(--s6); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.panel h1{color:var(--navy); margin-bottom:var(--s3);}
.panel .underline{height:4px; width:120px; background:var(--gold); border:0; margin:0 0 var(--s4);}
.panel .spine{font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.3; color:var(--ink); margin-bottom:var(--s5);}
.panel .cta-row{display:flex; gap:var(--s3); flex-wrap:wrap;}
.panel .tagline{margin-top:var(--s5); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--stone); font-weight:600;}

/* page header (interior pages) */
.page-header{background:var(--navy); color:var(--cream); padding-block:var(--s8) var(--s7);}
.page-header h1{color:var(--cream); font-size:56px;}
.page-header .eyebrow{color:var(--gold);}
.page-header .underline{height:4px; width:120px; background:var(--gold); border:0; margin:var(--s3) 0 0;}

/* sections */
section{padding-block:var(--s8);}
.sec-cream{background:var(--cream);}
.sec-navy{background:var(--navy); color:var(--cream);}
.sec-navy h2{color:var(--cream);} .sec-navy .eyebrow{color:var(--gold);} .sec-navy p{color:var(--cream);}

/* pillars */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s6);}
.pillar{background:var(--cream); color:var(--ink); border-radius:12px; padding:var(--s5); box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:transform 200ms ease, box-shadow 200ms ease; border-top:4px solid var(--gold);}
.pillar:hover{transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.pillar .num{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--gold); letter-spacing:0.16em;}
.pillar h3{color:var(--navy); margin-top:8px;}
.pillar p{font-size:16px; color:var(--ink);}
.pillar .promise{font-family:var(--serif); font-style:italic; color:var(--navy); margin-bottom:0;}

/* doctrine band */
.doctrine{text-align:center; background:var(--navy-soft); color:var(--cream);}
.doctrine .big{font-family:var(--serif); font-weight:600; font-size:48px; line-height:1.15; color:var(--cream); max-width:14ch; margin:0 auto var(--s4); letter-spacing:-0.015em;}
.doctrine .sub{max-width:60ch; margin:0 auto; color:var(--sand); font-size:18px;}

/* CTA band */
.cta-band{background:var(--cream); text-align:center;}
.cta-band h2{color:var(--navy);}
.cta-band .cta-row{display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; margin-top:var(--s4);}

/* form */
.signup{max-width:520px;}
.field{margin-bottom:var(--s4);}
label{display:block; font-weight:600; font-size:14px; margin-bottom:8px;}
label .req{color:var(--brick);}
input[type=text], input[type=email]{width:100%; min-height:48px; padding:14px 18px; font-family:var(--sans); font-size:16px; border:1px solid rgba(27,28,50,0.2); border-radius:8px; background:#FAFAF8; color:var(--ink);}
.sec-navy input{background:var(--cream);}
input:focus{outline:none; border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(201,162,39,0.15);}
.form-success{display:none; background:#214d2e; color:var(--cream); border-radius:8px; padding:var(--s4); margin-bottom:var(--s4); font-weight:500;}
.form-success.show{display:block;}

/* record / credentials list */
.record{list-style:none; margin:var(--s4) 0 0; padding:0; max-width:65ch;}
.record li{position:relative; padding-left:28px; margin-bottom:14px; font-size:18px; line-height:1.5;}
.record li::before{content:""; position:absolute; left:0; top:11px; width:10px; height:10px; background:var(--gold); border-radius:2px;}

/* accordion — detailed plan (native details/summary, keyboard-accessible) */
.accordion{max-width:880px; margin-top:var(--s6);}
.acc-item{background:#FAFAF8; border:1px solid var(--sand); border-left:4px solid var(--gold); border-radius:8px; margin-bottom:var(--s4);}
.acc-item summary{list-style:none; cursor:pointer; padding:var(--s4) var(--s5); display:flex; align-items:center; gap:var(--s4);}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-num{font-family:var(--serif); color:var(--gold); font-weight:600; font-size:14px; letter-spacing:0.12em; flex-shrink:0;}
.acc-title{display:flex; flex-direction:column;}
.acc-item summary h3{margin:0; color:var(--navy); font-size:24px;}
.acc-sum{color:var(--stone); font-size:15px; margin-top:3px;}
.acc-icon{margin-left:auto; font-size:30px; color:var(--gold); line-height:1; transition:transform 200ms ease; flex-shrink:0;}
.acc-item[open] .acc-icon{transform:rotate(45deg);}
.acc-item summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.acc-body{padding:0 var(--s5) var(--s5);}
.acc-body p{color:var(--ink); font-size:17px;}
.acc-body p.acc-promise{font-family:var(--serif); font-style:italic; color:var(--navy);}
.acc-steps{list-style:none; margin:var(--s3) 0; padding:0;}
.acc-steps li{position:relative; padding-left:26px; margin-bottom:14px; font-size:17px; line-height:1.55; color:var(--ink);}
.acc-steps li::before{content:""; position:absolute; left:0; top:10px; width:8px; height:8px; background:var(--gold); border-radius:2px;}
.acc-steps li strong{color:var(--navy);}
@media (prefers-reduced-motion: reduce){ .acc-icon{transition:none;} }

/* yard-sign checkbox */
.field-check{margin-top:4px;}
.field-check label.check{display:flex; align-items:center; gap:10px; color:var(--cream); font-weight:500; cursor:pointer;}
.field-check input[type="checkbox"]{width:18px; height:18px; accent-color:var(--gold); cursor:pointer;}

/* volunteer form — tel, textarea, checkbox group */
input[type=tel], textarea{width:100%; min-height:48px; padding:14px 18px; font-family:var(--sans); font-size:16px; border:1px solid rgba(27,28,50,0.2); border-radius:8px; background:#FAFAF8; color:var(--ink);}
textarea{min-height:120px; resize:vertical;}
.sec-navy input[type=tel], .sec-navy textarea{background:var(--cream);}
input[type=tel]:focus, textarea:focus{outline:none; border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(201,162,39,0.15);}
fieldset.check-fieldset{border:none; padding:0; margin:0 0 var(--s4);}
fieldset.check-fieldset legend{font-weight:600; font-size:14px; margin-bottom:10px; padding:0; color:inherit;}
.check-group{display:grid; gap:12px;}
.check-group label.check{display:flex; align-items:center; gap:10px; color:var(--cream); font-weight:500; margin:0; cursor:pointer;}
.check-group input[type="checkbox"]{width:18px; height:18px; accent-color:var(--gold); cursor:pointer; flex-shrink:0;}

/* press / media */
.press-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-top:var(--s6);}
.press-card{display:flex; flex-direction:column; background:#FAFAF8; border:1px solid var(--sand); border-left:4px solid var(--gold); border-radius:8px; padding:var(--s5); text-decoration:none; transition:transform 150ms ease, box-shadow 150ms ease;}
.press-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(16,42,67,0.10);}
.press-outlet{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0;}
.press-headline{font-family:var(--serif); color:var(--navy); font-size:22px; margin:10px 0 8px; line-height:1.2;}
.press-excerpt{color:var(--ink); font-size:15px; margin:0 0 16px;}
.press-link{margin-top:auto; font-weight:600; font-size:14px; color:var(--brick);}
@media (max-width:768px){ .press-grid{grid-template-columns:1fr;} }

/* help list */
.help-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s6);}
.help-card{background:var(--cream); border-radius:12px; padding:var(--s5); border-top:4px solid var(--gold);}
.help-card h3{color:var(--navy);}

/* vote strip (only brick on the whole site) */
.vote-strip{background:var(--brick); color:var(--cream); text-align:center; padding:var(--s4) var(--s3);}
.vote-strip .v{font-family:var(--serif); font-weight:700; font-size:32px; letter-spacing:0.02em;}
.vote-strip .d{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; margin-top:6px;}
.vote-strip .vote-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.vote-strip .vote-reg{display:inline-block; background:var(--cream); color:var(--brick); font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; padding:9px 20px; border-radius:6px; border:1.5px solid transparent;}
.vote-strip .vote-reg:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.vote-strip .vote-reg-ghost{background:transparent; color:var(--cream); border-color:var(--cream);}
.vote-strip .vote-reg-ghost:hover{background:var(--cream); color:var(--brick); border-color:var(--cream);}

/* footer */
footer{background:var(--navy); color:var(--cream); padding:var(--s7) 0 var(--s5);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s6);}
.foot-brand{font-family:var(--serif); font-size:24px; font-weight:600;}
.foot-tag{color:var(--sand); margin-top:var(--s3);}
footer h4{font-family:var(--sans); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 var(--s3);}
.foot-links{list-style:none; margin:0; padding:0;}
.foot-links li{margin-bottom:12px;}
.foot-links a{color:var(--cream); text-decoration:none; font-size:16px;}
.foot-links a:hover{color:var(--gold);}
.legal{border-top:1px solid rgba(240,235,226,0.18); margin-top:var(--s6); padding-top:var(--s4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); font-size:12px; color:var(--sand);}
.legal a{color:var(--sand);}

/* tablet */
@media (max-width:768px){
  h1{font-size:48px;} h2{font-size:36px;} h3{font-size:22px;} .page-header h1{font-size:40px;}
  section, .page-header{padding-block:72px;}
  .hero .container{padding-block:72px;}
  .container, .nav-inner{padding-inline:24px;}
  .pillars, .help-grid{grid-template-columns:1fr; gap:var(--s4);}
  .doctrine .big{font-size:36px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{position:fixed; inset:0; background:var(--navy); flex-direction:column; justify-content:center; gap:var(--s5); transform:translateX(100%); transition:transform 300ms ease; z-index:150;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:24px;}
  .nav-links a[aria-current="page"]{border-bottom:0; color:var(--gold);}
  .nav-toggle{display:flex; align-items:center; justify-content:center; z-index:160;}
  .nav-close{position:absolute; top:16px; right:24px;}
}
/* mobile */
@media (max-width:480px){
  h1{font-size:36px;} h2{font-size:28px;} h3{font-size:20px;} .page-header h1{font-size:32px;}
  body{font-size:16px;}
  section, .page-header{padding-block:48px;}
  .hero{min-height:60vh;} .hero .container{padding-block:48px;}
  .container, .nav-inner{padding-inline:24px;}
  .panel{padding:var(--s5);}
  .panel .cta-row{flex-direction:column;}
  .panel .cta-row .btn{width:100%; text-align:center;}
  .panel .spine{font-size:20px;}
  .doctrine .big{font-size:28px;}
  .foot-grid{grid-template-columns:1fr;}
  .vote-strip .v{font-size:28px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .nav-links{transition:none;} .pillar{transition:none;} .btn{transition:none;}
}