/* ==========================================================================
   A Safe Vote for Every American — shared design layer
   Token substrate inherited verbatim from the verifiable-elections suite
   (--ink / --paper / --verify / --seal, Newsreader + IBM Plex) so all four
   sites read as one system. The campaign layer below adds the flag-blue and
   Fraunces display voice this public-facing piece needs.
   ========================================================================== */

:root{
  /* ---- suite substrate (source of truth: verifiable-elections/index.html) -- */
  --ink:#14202E;
  --ink-2:#1D2E42;
  --paper:#F7F8FB;
  --white:#FFFFFF;
  --verify:#0F7A5A;
  --verify-strong:#0B6047;
  --verify-tint:#E7F1EC;
  --slate:#4A5666;
  --slate-2:#6A7686;
  --rule:#DCE2EA;
  --rule-ink:#2C3D52;
  --seal:#A9791F;
  --mist:#AFC0CE;

  --serif:"Newsreader", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --wrap:1120px;
  --pad:clamp(1.25rem, 4vw, 2.5rem);

  /* ---- campaign layer ---------------------------------------------------- */
  --flag:#16304F;          /* deep campaign blue — hero + closing */
  --flag-deep:#0E2138;
  --seal-bright:#C79B3C;   /* gold that survives a dark ground */
  --cream:#F6F1E4;         /* warm paper, used only on the blue grounds */
  --display:"Fraunces", Georgia, serif;
}

*{box-sizing:border-box;}
/* nav is sticky at 66px — without this every in-page anchor (#act, the strategy
   TOC, the transcript links) lands underneath the header */
html{scroll-behavior:smooth; scroll-padding-top:86px;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:-0.01em;}
p{margin:0;}
img,video{max-width:100%;}
::selection{background:var(--verify); color:#fff;}
:focus-visible{outline:2px solid var(--verify); outline-offset:3px; border-radius:2px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad);}
.wrap--narrow{max-width:760px;}

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--verify-strong);
  display:inline-block; margin-bottom:1.1rem;
}
.eyebrow--seal{color:var(--seal);}
.eyebrow--onink{color:var(--seal-bright);}

.section{padding-block:clamp(3.25rem, 7vw, 5.75rem);}
.section--ink{background:var(--ink); color:var(--white);}
.section--flag{background:var(--flag); color:var(--cream);}
.section--tint{background:var(--verify-tint);}
.section--rule{border-top:1px solid var(--rule);}
.section--ink .eyebrow,.section--flag .eyebrow{color:var(--seal-bright);}

.lede{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--slate); max-width:60ch;}
.section--ink .lede,.section--flag .lede{color:var(--mist);}

h2.h{font-size:clamp(1.65rem,3.4vw,2.5rem); max-width:22ch;}
h3.h3{font-size:clamp(1.15rem,2vw,1.4rem);}
.section--flag h2.h,.section--ink h2.h{color:var(--white);}

/* ---- stars rule --------------------------------------------------------- */
.stars{letter-spacing:.55em; color:var(--seal-bright); font-size:.8rem; line-height:1;}
.stars--ink{color:var(--seal);}

/* ==========================================================================
   nav
   ========================================================================== */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,248,251,.88); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
header.nav.scrolled{border-color:var(--rule); box-shadow:0 1px 0 rgba(20,32,46,.04);}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px;}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:600; letter-spacing:-.01em; text-decoration:none; font-size:1rem; flex:0 0 auto;}
/* the logo mark is navy-on-transparent, so it sits directly on the paper nav */
.brand__mark{
  width:26px; height:26px; object-fit:contain; display:block; flex:0 0 auto;
}
.brand__txt{white-space:nowrap;}
.nav__links{display:flex; align-items:center; gap:1.5rem; margin-left:auto;}
.nav__links a{
  text-decoration:none; font-size:.92rem; color:var(--slate);
  padding-block:.3rem; border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s;
}
.nav__links a:hover{color:var(--ink); border-color:var(--seal);}
.nav__links a[aria-current="page"]{color:var(--ink); border-color:var(--verify);}
.nav__cta{margin-left:1.4rem;}

/* nav collapse — the sibling sites overflowed at ~1150px and again at 620px;
   both breakpoints are load-bearing, re-test after any nav change */
@media (max-width:1200px){ .nav__links{gap:1.15rem;} .nav__links a{font-size:.88rem;} }
@media (max-width:1080px){ .nav__links{gap:1.05rem;} .nav__links a{font-size:.86rem;} .nav__cta{margin-left:.9rem;} }
@media (max-width:1000px){ .nav__links a.opt{display:none;} }
@media (max-width:620px){
  .brand__txt{font-size:.86rem;}
  .nav__links{gap:.8rem;}
  .nav__links a{font-size:.8rem;}
  .btn.nav__cta{padding:.5rem .8rem; font-size:.78rem; margin-left:.6rem;}
}
@media (max-width:430px){ .nav__links a{display:none;} .nav__links a.nav__cta{display:inline-flex;} }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:.94rem;
  padding:.72rem 1.25rem; border-radius:7px; border:1px solid transparent;
  background:var(--verify); color:#fff; cursor:pointer;
  transition:background .15s, transform .08s, box-shadow .15s;
}
.btn:hover{background:var(--verify-strong); box-shadow:0 3px 14px rgba(15,122,90,.22);}
.btn:active{transform:translateY(1px);}
.btn--seal{background:var(--seal); color:#1B1403;}
.btn--seal:hover{background:var(--seal-bright); box-shadow:0 3px 14px rgba(169,121,31,.3);}
.btn--ghost{background:transparent; border-color:var(--rule); color:var(--ink);}
.btn--ghost:hover{background:var(--white); border-color:var(--slate-2); box-shadow:none;}
.btn--onink{background:transparent; border-color:rgba(255,255,255,.32); color:var(--white);}
.btn--onink:hover{background:rgba(255,255,255,.1); box-shadow:none;}
.btn--lg{font-size:1rem; padding:.85rem 1.5rem;}
.btnrow{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; color:var(--cream); text-align:center;
  background:
    radial-gradient(115% 85% at 50% -25%, #22415F 0%, var(--flag) 48%, var(--flag-deep) 100%);
  padding-block:clamp(3.5rem,9vw,6rem);
}
.hero::after{ /* faint engraved guilloché, purely decorative */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    repeating-linear-gradient(115deg, rgba(199,155,60,.5) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-115deg, rgba(199,155,60,.35) 0 1px, transparent 1px 62px);
  mask-image:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
}
.hero > *{position:relative; z-index:1;}
/* seal treatment — the navy mark can't sit directly on the dark hero, so it
   rides a cream disc with a gold ring, like a document seal */
.hero__seal{
  width:clamp(88px,13vw,124px); height:auto; display:block; margin:0 auto 1.4rem;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.32));
}
.hero__seal--sm{width:clamp(66px,9vw,86px); margin-bottom:1.1rem;}
.hero h1{
  font-family:var(--display); font-weight:900; color:var(--white);
  font-size:clamp(2.2rem,6.4vw,4.1rem); line-height:1.03; letter-spacing:-.02em;
  margin-top:1.35rem;
}
.hero .sub{
  font-family:var(--serif); font-style:italic; color:#D9C79A;
  font-size:clamp(1.05rem,2.2vw,1.4rem); line-height:1.5;
  max-width:42ch; margin:1.15rem auto 0;
}
.hero .goldline{width:112px; height:2px; background:var(--seal-bright); margin:1.9rem auto 0;}
.hero .btnrow{justify-content:center; margin-top:1.9rem;}

/* ==========================================================================
   creed bands — the repeated promise
   ========================================================================== */
.creed{
  background:var(--cream); border-block:2px solid var(--seal);
  text-align:center; padding-block:clamp(1.9rem,4vw,2.6rem);
}
.creed p{
  font-family:var(--display); font-weight:500; color:var(--flag);
  font-size:clamp(1.15rem,2.7vw,1.6rem); line-height:1.35; max-width:26ch; margin-inline:auto;
}
.creed .em{display:block; color:var(--seal); font-weight:600; margin-top:.3rem;}

/* ==========================================================================
   cards / grids
   ========================================================================== */
.grid{display:grid; gap:1.1rem;}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

.card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.6rem;
}
.card--flat{background:transparent; border-color:var(--rule);}
.card__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--seal); text-transform:uppercase;
}
.card h3{font-size:1.15rem;}
.card p{color:var(--slate); font-size:.96rem;}
.section--ink .card,.section--flag .card{
  background:rgba(255,255,255,.045); border-color:var(--rule-ink); color:var(--white);
}
.section--ink .card p,.section--flag .card p{color:var(--mist);}

/* promise cards get a verify tick */
.card--promise{border-left:3px solid var(--verify);}
.card--never{border-left:3px solid #9A3B2A;}

/* ==========================================================================
   plain lists
   ========================================================================== */
ul.marks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem;}
ul.marks li{position:relative; padding-left:1.7rem; color:var(--slate); line-height:1.6;}
ul.marks li::before{
  content:"\2014"; position:absolute; left:0; top:-1px; color:var(--seal); font-weight:600;
}
ul.marks li b, ul.marks li strong{color:var(--ink); font-weight:600;}
ul.marks--never li::before{content:"\2715"; color:#9A3B2A; font-size:.85em; top:2px;}
ul.marks--yes li::before{content:"\2713"; color:var(--verify); font-weight:700; top:0;}
.section--ink ul.marks li,.section--flag ul.marks li{color:var(--mist);}
.section--ink ul.marks li b,.section--flag ul.marks li b{color:var(--white);}

/* ==========================================================================
   pull quote
   ========================================================================== */
.pull{
  border-left:3px solid var(--seal); padding:.3rem 0 .3rem 1.4rem;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.45; color:var(--ink); max-width:34ch;
}
.pull cite{display:block; font-style:normal; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2); margin-top:.9rem;}

/* ==========================================================================
   document typography (strategy page)
   ========================================================================== */
.doc{font-family:var(--serif); font-size:1.12rem; line-height:1.75; color:#22303F;}
.doc > * + *{margin-top:1.05rem;}
.doc h2{
  font-family:var(--display); font-weight:600; color:var(--flag);
  font-size:clamp(1.4rem,3vw,1.95rem); margin-top:2.9rem; display:flex; gap:.7rem; align-items:baseline;
}
.doc h2 .rn{font-family:var(--display); font-weight:900; color:var(--seal); font-size:.78em;}
.doc h3{font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--ink); margin-top:1.9rem;}
.doc ul{list-style:none; margin:0; padding:0; display:grid; gap:.8rem;}
.doc ul li{position:relative; padding-left:1.6rem;}
.doc ul li::before{content:"\2014"; position:absolute; left:0; color:var(--seal); font-weight:600;}
.doc b,.doc strong{color:var(--flag);}
.doc .first::first-letter{
  font-family:var(--display); font-weight:900; color:var(--flag);
  font-size:3.3em; line-height:.8; float:left; padding:.14em .1em 0 0;
}

/* ==========================================================================
   ladder (campaign adoption steps)
   ========================================================================== */
.ladder{list-style:none; margin:0; padding:0; display:grid; gap:0;}
.ladder li{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem;
  padding:1.5rem 0; border-top:1px solid var(--rule);
}
.ladder li:last-child{border-bottom:1px solid var(--rule);}
.ladder .rung{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--verify-tint); color:var(--verify-strong);
  font-family:var(--mono); font-weight:600; font-size:.9rem; border:1px solid rgba(15,122,90,.22);
}
.ladder h3{font-size:1.2rem; margin-bottom:.35rem;}
.ladder p{color:var(--slate); font-size:.98rem;}
.ladder .who{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--seal); margin-top:.55rem; display:block;
}

/* ==========================================================================
   video cards
   ========================================================================== */
.vidgrid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}
.vid{
  background:var(--white); border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
.vid__frame{position:relative; aspect-ratio:16/9; background:var(--ink); display:block;}
.vid__frame video,.vid__frame img{width:100%; height:100%; object-fit:cover; display:block;}
.vid__play{
  position:absolute; inset:0; display:grid; place-items:center; border:0; padding:0;
  background:linear-gradient(180deg, rgba(20,32,46,.18), rgba(20,32,46,.5)); cursor:pointer;
}
.vid__play span{
  width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; color:var(--flag); font-size:1.35rem; padding-left:5px;
  box-shadow:0 6px 26px rgba(0,0,0,.32); transition:transform .12s;
}
.vid__play:hover span{transform:scale(1.06);}
.vid__body{padding:1.25rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem;}
.vid__kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--seal);}
.vid__body h3{font-size:1.12rem;}
.vid__body p{color:var(--slate); font-size:.94rem;}
.vid__meta{font-family:var(--mono); font-size:.72rem; color:var(--slate-2); margin-top:auto; padding-top:.6rem;}

/* ==========================================================================
   downloads
   ========================================================================== */
.dl{display:grid; gap:.75rem;}
.dlrow{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--rule); border-radius:10px; padding:1.05rem 1.2rem;
  text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.dlrow:hover{border-color:var(--verify); box-shadow:0 2px 14px rgba(20,32,46,.06);}
.dlrow__tag{
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.1em;
  padding:.32rem .5rem; border-radius:4px; background:var(--verify-tint); color:var(--verify-strong);
  text-transform:uppercase; flex:0 0 auto; min-width:56px; text-align:center;
}
.dlrow__tag--doc{background:#EAF0F7; color:#2B4A6F;}
.dlrow__tag--web{background:#F5EEDD; color:#7A5A16;}
.dlrow__tag--vid{background:#F2E9EC; color:#7A2B3A;}
.dlrow__main{flex:1 1 260px; min-width:0;}
.dlrow__main strong{display:block; font-weight:600; font-size:1rem;}
.dlrow__main span{color:var(--slate); font-size:.88rem;}
.dlrow__go{font-family:var(--mono); font-size:.78rem; color:var(--verify-strong); flex:0 0 auto;}

/* ==========================================================================
   stat strip
   ========================================================================== */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.4rem;}
.stat__k{font-family:var(--display); font-weight:900; font-size:clamp(1.7rem,4vw,2.5rem); color:var(--seal-bright); line-height:1;}
.stat__v{font-size:.94rem; color:var(--mist); margin-top:.45rem; line-height:1.5;}

/* ==========================================================================
   footer
   ========================================================================== */
footer.foot{background:var(--flag-deep); color:var(--mist); padding-block:3rem 2.5rem; font-size:.9rem;}
footer.foot a{color:var(--cream);}
.foot__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem 1.5rem;}
.foot__h{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--seal-bright); margin-bottom:.85rem;}
.foot__grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
.foot__grid a{text-decoration:none; opacity:.86;}
.foot__grid a:hover{opacity:1; text-decoration:underline;}
.foot__note{
  border-top:1px solid rgba(255,255,255,.13); margin-top:2.5rem; padding-top:1.5rem;
  font-size:.8rem; line-height:1.65; color:#8195AB; max-width:82ch;
}

/* ==========================================================================
   misc
   ========================================================================== */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }
.stack-lg > * + *{margin-top:1.4rem;}
.stack > * + *{margin-top:.9rem;}
.mt-2{margin-top:2rem;} .mt-3{margin-top:3rem;}
.center{text-align:center;} .center .lede{margin-inline:auto;} .center .btnrow{justify-content:center;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--white); padding:.7rem 1rem; border-radius:6px; box-shadow:0 4px 20px rgba(0,0,0,.2);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important;} }

@media print{
  header.nav,.vid__play,.btnrow{display:none;}
  body{background:#fff;}
  .section{padding-block:1.2rem;}
}