@import url('fonts.css');

/* ==========================================================================
   CADE — Californians Against the Democratic Establishment
   Design tokens locked Aug 2026 (client ramps). Do not substitute hexes.
   ========================================================================== */

:root{
  /* Reds — the primary */
  --red-500:#C8102E;      /* bright red, pop accent on ink only */
  --red-600:#A50E24;      /* RALLY RED — primary field + every CTA */
  --red-700:#8A0B1D;      /* deep red — hover/press, eyebrow on cream */

  /* Greens */
  --green-950:#00241A;
  --green-900:#003525;    /* primary green — seal ring, affirmative cards */
  --green-800:#0C4634;
  --green-700:#1D5743;
  --green-500:#356B57;    /* muted text on cream */
  --green-300:#8AA89B;    /* hairlines, fine print on dark */
  --green-100:#CCD9D2;    /* body copy on dark fields */

  /* Golds */
  --gold-500:#F9B800;     /* THE gold — accent word on dark */
  --gold-600:#E0A400;     /* hover/press */
  --gold-700:#B5820A;     /* gold TEXT on light fields (AA on cream) */

  /* Creams, white, ink */
  --paper:#F0EBE5;        /* THE cream */
  --paper-sunk:#E7E0D6;
  --paper-rule:#D8CFC0;
  --white:#FFFFFF;
  --ink:#1C1A14;          /* type, all 2px borders, dark surfaces */
  --ink-900:#2A2720;

  /* Rules, borders, AND headline type. Still never a full-bleed field.
     Aug 2026: navy promoted to a headline colour — it carries "against". */
  --blue:#0A3161;
  --purple:#472F70;

  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-serif:'Libre Caslon Text',Georgia,serif;
  --font-body:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Courier Prime','Courier New',monospace;

  --tracking-eyebrow:.16em;
  --tracking-caps:.08em;

  --container:1200px;
  --pad:24px;

  --shadow-poster:5px 5px 0 var(--ink);
  --shadow-poster-sm:3px 3px 0 var(--ink);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button,input{font:inherit;color:inherit}
a{color:var(--red-700);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--red-600)}

/* Focus — 2px red outline per the system. Always visible for keyboard users. */
:focus-visible{outline:3px solid var(--red-600);outline-offset:2px;border-radius:2px}
.on-dark :focus-visible,.field-red :focus-visible,.field-ink :focus-visible,
.field-green :focus-visible{outline-color:var(--gold-500)}
::selection{background:var(--gold-500);color:var(--ink)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 20px;font:600 14px/1 var(--font-body);text-decoration:none}
.skip-link:focus{left:8px;top:8px;color:var(--paper)}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.container--narrow{max-width:900px}
.section{padding:clamp(48px,7vw,78px) 0;border-bottom:2px solid var(--ink)}
.section--tight{padding:clamp(44px,6vw,70px) 0}

/* ---------- motifs (one per section, max) ---------- */
.stripe-bar{height:10px;background:repeating-linear-gradient(135deg,var(--red-600) 0 12px,var(--paper) 12px 24px)}
.field-red{background:var(--red-600)}
/* RETIRED Aug 2026 — the radiating sunburst over red, with gold type on top,
   reads as PRC / socialist-realist iconography to the exact audience this
   coalition is built for. Flat fields only. Never reinstate the gradient,
   and never put gold type on a red field. */
.rays-red{background:var(--red-600)}
.rays-ink{background:var(--ink)}
.field-ink{background:var(--ink)}
.field-paper{background:var(--paper)}
.field-white{background:var(--white)}
.field-green{background:var(--green-900)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);font-size:clamp(11px,1.1vw,13px);color:var(--red-700);
  line-height:1.35}
.eyebrow--gold{color:var(--gold-500)}
.eyebrow--red{color:var(--red-600)}
.eyebrow--blue{color:var(--blue)}
.eyebrow--cream{color:var(--paper)}

.display-1{font-family:var(--font-display);font-weight:700;line-height:1.01;letter-spacing:.5px;
  font-size:clamp(38px,7.4vw,82px);text-wrap:balance}
.display-2{font-family:var(--font-display);font-weight:700;line-height:1.02;
  font-size:clamp(34px,6.4vw,74px);text-wrap:balance}
.h2{font-family:var(--font-display);font-weight:700;line-height:1.02;
  font-size:clamp(30px,4.8vw,54px);text-wrap:balance}
.h2--sm{font-size:clamp(28px,4.2vw,50px)}
.h2--xs{font-size:clamp(26px,3.6vw,44px)}
.h3{font-family:var(--font-display);font-weight:700;line-height:1.06;
  font-size:clamp(22px,2.6vw,30px)}
.h3--lg{font-size:clamp(26px,3.2vw,38px)}
.h3--sm{font-size:clamp(20px,2.2vw,27px)}

.dek{font-family:var(--font-serif);font-weight:400;line-height:1.5;
  font-size:clamp(17px,1.9vw,21px);text-wrap:pretty}
.dek--lg{font-size:clamp(19px,2.6vw,34px);line-height:1.32}
.dek--xl{font-size:clamp(22px,3.4vw,44px);line-height:1.24}
.dek--sm{font-size:clamp(16px,1.7vw,19px)}
.body{font-family:var(--font-body);line-height:1.62;font-size:clamp(15px,1.5vw,17px);text-wrap:pretty}
.body--sm{font-size:clamp(14px,1.35vw,15.5px)}
.mono{font-family:var(--font-mono);letter-spacing:1.4px;text-transform:uppercase;
  font-size:clamp(10px,1.1vw,12px);line-height:1.6}

.ink{color:var(--ink)} .cream{color:var(--paper)} .gold{color:var(--gold-500)}
.rally{color:var(--red-600)} .muted{color:var(--green-500)} .tint{color:var(--green-100)}
/* Navy = opposition. "AGAINST", and any word doing the negating. */
.navy{color:var(--blue)}
/* Deep green display type — the holding-page headline. */
.forest{color:var(--green-900)}
.hi{color:#FFFFFF}
/* Fine print on ink: green-300, not green-500 — green-500 on ink is 2.8:1 and fails WCAG AA. */
.fine-dark{color:var(--green-300)}

.rule-gold{width:120px;height:3px;background:var(--gold-500)}
.rule-red{width:56px;height:3px;background:var(--red-600)}
/* Navy is structure only — a rule, a border, a hairline. Never a field. */
.rule-blue{width:56px;height:3px;background:var(--blue)}
.rule-blue--wide{width:100%;height:2px;background:var(--blue);opacity:.28}
.fine-link{color:var(--green-300);text-underline-offset:2px}
.fine-link:hover{color:var(--gold-500)}

/* ---------- the lockup: the name IS the logo ---------- */
.lockup{display:block}
.lockup__line{width:100%}
.lockup__line > span{display:inline-block;white-space:nowrap;font-family:var(--font-display);
  font-weight:700;line-height:1.12}
.lockup--nav .lockup__line > span{font-size:15px;color:var(--ink)}
.lockup--nav .accent{color:var(--blue)}
.lockup--footer .lockup__line > span{font-size:clamp(18px,2.2vw,23px);color:var(--paper)}
.lockup--footer .accent{color:var(--gold-500)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-caps);text-decoration:none;cursor:pointer;
  border:2px solid var(--ink);border-radius:2px;padding:0 22px;height:44px;
  font-size:14px;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-poster-sm)}
.btn:active{transform:translate(1px,1px);box-shadow:none}
.btn--lg{height:52px;padding:0 28px;font-size:15px}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
.btn--full{width:100%}
.btn--primary{background:var(--red-600);color:var(--paper)}
.btn--primary:hover{background:var(--red-700);color:var(--paper)}
.btn--gold{background:var(--gold-500);color:var(--ink)}
.btn--gold:hover{background:var(--gold-600);color:var(--ink)}
/* Secondary CTA on a cream field. */
.btn--navy{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--navy:hover{background:var(--blue);color:var(--paper)}
/* Primary CTA on a red field — replaces btn--gold there. */
.btn--cream{background:var(--paper);color:var(--red-700)}
.btn--cream:hover{background:var(--white);color:var(--red-700)}
.btn--inverse{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn--inverse:hover{background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 rgba(240,235,229,.35)}
.btn--secondary{background:var(--white);color:var(--ink)}
.btn--secondary:hover{background:var(--paper-sunk);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--paper-sunk);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:15px;padding-bottom:15px}
.nav__brand{flex:none;width:222px;text-decoration:none}
.nav__toggle{display:none;background:var(--paper);border:2px solid var(--ink);border-radius:2px;
  width:44px;height:44px;cursor:pointer;padding:0;place-items:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  display:block;width:20px;height:2px;background:var(--ink);content:'';position:relative}
.nav__toggle span::before{position:absolute;top:-6px}
.nav__toggle span::after{position:absolute;top:6px}
.nav__links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
.nav__link{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:14px;
  letter-spacing:var(--tracking-caps);white-space:nowrap;padding:6px 2px;
  border-bottom:3px solid transparent;color:var(--green-500);text-decoration:none}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current]{color:var(--ink);border-bottom-color:var(--red-600)}

@media (max-width:860px){
  .nav__toggle{display:grid}
  .nav__links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:2px solid var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .nav__links[data-open="true"]{display:flex}
  .nav__link{padding:14px 0;border-bottom:1px solid var(--paper-rule)}
  .nav__link[aria-current]{border-bottom-color:var(--red-600)}
  .nav__links .btn{margin-top:14px}
  .nav__inner{position:relative}
}

/* ---------- countdown ---------- */
.countdown{margin-top:clamp(32px,4vw,52px);display:flex;flex-wrap:wrap;gap:0;
  border:2px solid var(--ink);border-radius:2px;overflow:hidden;background:var(--ink)}
.countdown__cell{flex:1 1 110px;padding:16px 20px;border-right:2px solid var(--red-600)}
.countdown__num{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.6vw,40px);
  line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.countdown__label{margin-top:5px;font-family:var(--font-mono);font-weight:600;font-size:9.5px;
  letter-spacing:2px;color:var(--gold-500);line-height:1}
.countdown__note{flex:2 1 240px;padding:16px 20px;display:flex;align-items:center;
  font-size:13px;line-height:1.5;color:var(--green-100)}

/* ---------- cards ---------- */
.card{background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:28px 30px}
.card--poster{box-shadow:var(--shadow-poster);border-radius:4px}
.card--paper{background:var(--paper)}
/* Navy as structure: a 6px cap rule on the pillar cards. #0A3161 never becomes
   the card's field — it only edges it. */
.card--navytop{border-top:6px solid var(--blue)}
.card--green{background:var(--green-900);color:var(--paper)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.split{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,48px);align-items:center}
.split--top{align-items:flex-start}
.split__col{flex:1 1 400px;min-width:0}

/* ---------- media slots (no photography yet) ---------- */
.slot{position:relative;background:var(--paper-sunk);border:2px dashed var(--green-300);
  border-radius:4px;display:grid;place-items:center;padding:24px;text-align:center;overflow:hidden}
.slot__label{font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--green-500);max-width:34ch;line-height:1.7}
.slot--dark{background:var(--ink-900);border-color:var(--green-500)}
.slot--dark .slot__label{color:var(--green-300)}
.slot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

.video{position:relative;border:2px solid var(--paper);border-radius:4px;overflow:hidden;background:var(--ink-900)}
.video__frame{position:relative;width:100%;aspect-ratio:16/9}
.video__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video__play i{width:clamp(58px,7vw,82px);height:clamp(58px,7vw,82px);border-radius:999px;
  background:var(--red-600);border:3px solid var(--paper);display:grid;place-items:center;
  box-shadow:0 0 0 10px rgba(28,26,20,.28)}
.video__play i::after{content:'';width:0;height:0;border-left:22px solid var(--paper);
  border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:7px}
.video__bar{background:var(--paper);padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:baseline;justify-content:space-between}

/* ---------- sample ballot ---------- */
.ballot{background:var(--white);border:2px solid var(--ink);border-radius:4px;
  box-shadow:var(--shadow-poster);overflow:hidden;align-self:flex-start}
.ballot__head{background:var(--ink);padding:14px 22px}
.ballot__vfo{padding:10px 22px;border-bottom:1px solid rgba(28,26,20,.16);
  font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;color:var(--green-500)}
.ballot__row{display:flex;gap:18px;padding:22px;width:100%;text-align:left;background:var(--white);
  border:0;border-bottom:1px solid rgba(28,26,20,.16);cursor:pointer;font:inherit}
.ballot__row:last-child{border-bottom:0}
.ballot__row:hover{background:var(--paper-sunk)}
.ballot__row[aria-pressed="true"]{background:var(--paper-sunk)}
.ballot__box{flex:none;width:46px;height:46px;border:3px solid var(--ink);border-radius:2px;
  background:var(--white);display:grid;place-items:center}
.ballot__box--dashed{border-style:dashed;border-color:var(--green-300)}
.ballot__box svg{width:44px;height:44px}
.ballot__panel{flex:1;border:2px solid var(--ink);border-radius:4px;padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.ballot__panel--empty{background:var(--paper-sunk);border-style:dashed;border-color:var(--green-300);
  box-shadow:none}
.ballot__panel--jones{background:var(--green-900);box-shadow:var(--shadow-poster)}
.ballot__panel--inc{background:var(--white);box-shadow:var(--shadow-poster)}
.ballot__panel--skip{background:var(--ink);box-shadow:5px 5px 0 var(--red-600)}
.ballot__tag{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:2px;line-height:1}
[hidden]{display:none!important}

/* ---------- pillar table ---------- */
.pillars{border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.pillars__row{display:flex;flex-wrap:wrap;background:var(--white);border-bottom:2px solid var(--ink)}
.pillars__row:last-child{border-bottom:0}
.pillars__cell{flex:1 1 300px;padding:clamp(26px,3.4vw,38px) clamp(24px,3.4vw,40px)}
.pillars__cell--l{border-right:2px solid var(--ink)}
.pillars__cell--r{display:flex;flex-direction:column;justify-content:center;gap:14px}
.num{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:1.6px;color:var(--red-600)}
.num--blue{color:var(--blue)}

/* ---------- commitments grid ---------- */
.commits{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;
  border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.commits > div{padding:28px 26px;background:var(--paper);box-shadow:inset -1px 0 0 rgba(28,26,20,.16)}
.commits > div:last-child{box-shadow:none}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--ink)}
.field input{background:var(--white);border:2px solid var(--ink);border-radius:2px;
  padding:11px 14px;font-size:16px;width:100%}
.field input::placeholder{color:var(--green-300)}
.field input[aria-invalid="true"]{border-color:var(--red-600);background:#FDF6F7}
.field__hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;color:var(--green-500);
  text-transform:uppercase;line-height:1.6}
.field__error{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--red-700)}
.consent{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--green-500);
  text-transform:uppercase;line-height:1.6}
/* First/last sit side by side and fold to one column on their own, without a
   media query — the card is used at several widths. */
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px}
.label-opt{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-500);margin-left:7px;vertical-align:.5px}
/* The SMS/email consent block is long enough that all-caps mono stops being
   readable. Sentence case, same voice. #356B57 on #F0EBE5 is 5.3:1 — AA. */
.consent--legal{text-transform:none;font-size:10.5px;letter-spacing:.15px;line-height:1.75}
.consent a{color:var(--green-500);text-underline-offset:2px}
.consent a:hover{color:var(--red-700)}
/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.footer__body{background:var(--ink);padding:clamp(40px,5vw,52px) 0 34px}
.footer__top{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,44px);justify-content:space-between;
  align-items:flex-start}
.footer__brand{display:flex;gap:22px;align-items:center;flex:1 1 380px;min-width:0}
.footer__cols{display:flex;gap:44px;flex-wrap:wrap}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__head{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:12px;
  letter-spacing:.14em;color:var(--gold-500)}
.footer__link{font-size:14px;color:var(--green-100);text-decoration:none}
.footer__link:hover{color:var(--gold-500);text-decoration:underline}
.footer__legal{margin-top:40px;padding-top:22px;border-top:2px solid rgba(240,235,229,.22);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline}
.disclaimer{font-family:var(--font-mono);font-size:12px;letter-spacing:1.4px;color:var(--paper);
  text-transform:uppercase;line-height:1.6}

@media (max-width:640px){
  .countdown__cell{flex:1 1 40%;border-bottom:2px solid var(--red-600)}
  .pillars__cell--l{border-right:0;border-bottom:2px solid var(--ink)}
  .commits > div{box-shadow:none;border-bottom:1px solid rgba(28,26,20,.16)}
}

/* ==========================================================================
   Home hero — hook and video side by side (objective 1)
   ========================================================================== */
/* Cream hero: navy carries the opposition, red carries the rally. */
.hero{background:var(--paper);
  border-bottom:2px solid var(--ink);padding:clamp(36px,4.4vw,56px) 0 clamp(28px,3.4vw,40px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,3.6vw,48px);align-items:center}
.hero__h1{font-family:var(--font-display);font-weight:700;line-height:1.0;letter-spacing:.4px;
  font-size:clamp(31px,4.4vw,60px);color:var(--blue);margin:18px 0 0;text-wrap:balance}
.hero__dek{font-family:var(--font-serif);line-height:1.45;font-size:clamp(16px,1.5vw,20px);
  color:var(--ink-900);margin:20px 0 0;max-width:52ch;text-wrap:pretty}
.hero__cta{margin-top:26px}
.hero__quote{margin:18px 0 0;border-left:4px solid var(--red-600);padding:2px 0 2px 18px}
.hero__quote p:first-child{font-family:var(--font-serif);font-size:clamp(14px,1.25vw,16px);
  line-height:1.5;color:var(--ink-900)}
.countdown--slim{margin-top:clamp(26px,3vw,38px)}
.countdown--slim .countdown__cell{padding:11px 18px}
.countdown--slim .countdown__num{font-size:clamp(24px,2.6vw,32px)}

@media (max-width:900px){
  /* Stack, and keep the hook tight so the player stays within a thumb-flick. */
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__cta{display:none}          /* the form is one section down; don't spend the fold on buttons */
  .hero__dek{font-size:16px;margin-top:14px}
  .hero__h1{margin-top:12px}
  .hero__quote{display:none}         /* the video says it better than a draft quote */
}

/* numbered promises */
.promises{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.promises li{display:flex;gap:14px;align-items:flex-start;font-family:var(--font-body);
  font-size:clamp(15px,1.45vw,16px);line-height:1.55;color:var(--ink-900)}
.promises__n{flex:none;font:700 14px/1.55 var(--font-mono);color:var(--red-600)}
.on-dark .promises li{color:var(--paper)}
.on-dark .promises__n{color:var(--gold-500)}

/* tick list — the palatability bullets */
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;font-family:var(--font-body);
  font-size:clamp(14.5px,1.45vw,15.5px);line-height:1.55;color:var(--green-500)}
.ticks li::before{content:'';position:absolute;left:0;top:.42em;width:14px;height:14px;
  background:var(--red-600);border-radius:2px}