/* ============================================================
   Arvind Choudhary for Mayor of Oakville
   Design system — "The Tally Sheet"
   Ballot stock + ultramarine + a marker that only ever marks.
   ============================================================ */

:root{
  /* Ballot stock — cool bone, the colour of a real municipal form */
  --paper:      #EDEBE3;
  --paper-2:    #E3E0D5;
  --paper-3:    #D8D4C6;
  --white:      #FBFAF7;

  /* Ink */
  --ink:        #14131A;
  --ink-2:      #14131A; /* was #55525F — body text darkened to full ink */
  --ink-3:      #85818F;

  /* Primary — electric ultramarine, the scrutineer's pen */
  --ultra:      #046AC9;
  --ultra-deep: #16238F; /* now only a reference; hovers are pinned literals */
  --ultra-soft: #DCDEFB;

  /* Signal — the mark on the ballot. Used sparingly, only to mark. */
  --signal:     #C8102E;

  --line:       rgba(20,19,26,.16);
  --line-soft:  rgba(20,19,26,.08);
  --line-rev:   rgba(255,255,255,.22);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --util:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1240px;
  --section-y: clamp(4rem, 9vw, 8.5rem);

  --radius: 2px;
}

*,*::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:var(--body);
  font-size:clamp(1.02rem,.55vw + .92rem,1.16rem);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

::selection{ background:var(--signal); color:var(--white); }

/* ---------- Utility: layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ width:100%; max-width:760px; margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding-block:var(--section-y); }
.section-tight{ padding-block:clamp(2.5rem,5vw,4.5rem); }

/* ---------- Type roles ---------- */
.eyebrow{
  font-family:var(--util);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";
  width:.62rem; height:.44rem;
  border-radius:50%;
  background:var(--signal);
  flex:none;
}
.eyebrow .eyebrow-num{ color:var(--signal); font-weight:700; }
.eyebrow-bold{ font-weight:700; }
.eyebrow-rev{ color:rgba(255,255,255,.72); }
.eyebrow-rev::before{ background:var(--white); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  line-height:.96;
  letter-spacing:-.018em;
  margin:0 0 .6em;
  text-wrap:balance;
  color:#033666;
}

.h-display{ font-size:clamp(2.75rem, 7.2vw, 5.4rem); line-height:.92; }
h1{ font-size:clamp(2.5rem, 6.4vw, 4.9rem); }
h2{ font-size:clamp(1.95rem, 4.2vw, 3.3rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.65rem); line-height:1.08; }
h4{ font-size:1.05rem; font-stretch:100%; letter-spacing:-.005em; }

p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.16rem,1.1vw + .95rem,1.44rem);
  line-height:1.5;
  color:var(--ink-2);
}
.lede strong{ color:var(--ink); font-weight:600; }

a{ color:var(--ultra); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:#16238F; } /* pinned: hover colours are frozen by request */

.mono{ font-family:var(--util); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Ballot mark: the signature motif ---------- */
.mark{
  width:1.55rem; height:1.06rem;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:transparent;
  padding:0;
  flex:none;
  transition:background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.mark.is-filled{ background:var(--ink); border-color:var(--ink); }
.mark.is-you{ background:var(--signal); border-color:var(--signal); transform:scale(1.14); }

/* Divider made of ballot marks */
.rule-marks{
  display:flex; gap:.42rem; flex-wrap:wrap;
  border:0; padding:0; margin:0 0 2.2rem;
}
.rule-marks span{
  width:.95rem; height:.62rem;
  border:1.2px solid var(--line);
  border-radius:999px;
}
.rule-marks span:nth-child(4n+1){ background:var(--ink); border-color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--util);
  font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1.02rem 1.7rem;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:var(--ink); color:var(--white);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ background:#2438E0; border-color:#2438E0; color:var(--white); transform:translateY(-2px); } /* pinned hover */
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--ultra); border-color:var(--ultra); }
.btn-primary:hover{ background:#16238F; border-color:#16238F; } /* pinned hover */

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.btn-signal{ background:var(--signal); border-color:var(--signal); color:var(--white); }
.btn-signal:hover{ background:var(--ink); border-color:var(--ink); }

.btn-rev{ background:var(--white); border-color:var(--white); color:var(--ink); }
.btn-rev:hover{ background:transparent; border-color:var(--white); color:var(--white); }

.btn-rev-ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--white); }
.btn-rev-ghost:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* Focus — always visible, never suppressed */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- Skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--white);
  padding:.9rem 1.3rem;
  font-family:var(--util); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
}
.skip:focus{ left:.6rem; top:.6rem; color:var(--white); }

/* ============================================================
   Header
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.masthead-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  min-height:72px;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--ink);
  flex:none;
}
.brand-photo{
  width:2.55rem; height:2.55rem;
  border-radius:999px;
  object-fit:cover;
  flex:none;
  border:2px solid var(--signal);
}
.brand-text{ line-height:1; }
.brand-name{
  display:block;
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:1.02rem; letter-spacing:-.015em;
}
.brand-role{
  display:block;
  font-family:var(--util); font-size:.58rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--signal);
  margin-top:.24rem;
}

.nav{ display:flex; align-items:center; gap:1.55rem; }
.nav-links{ display:flex; align-items:center; gap:1.55rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--util); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding-block:.4rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover{ color:#2438E0; border-bottom-color:#2438E0; } /* pinned hover */
.nav-links a[aria-current="page"]{ border-bottom-color:var(--signal); }

.nav-cta{ display:flex; gap:.55rem; align-items:center; }
.nav-cta .btn{ padding:.72rem 1.15rem; font-size:.7rem; }

.nav-toggle{
  display:none;
  background:transparent; border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.6rem 1rem;
  font-family:var(--util); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); cursor:pointer;
}

@media (max-width: 1080px){
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch;
    gap:0;
    padding:1rem var(--gutter) 1.6rem;
  }
  .nav.is-open{ display:flex; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-links a{ display:block; padding:.95rem 0; border-bottom:1px solid var(--line-soft); }
  .nav-links a[aria-current="page"]{ color:var(--ultra); }
  .nav-cta{ margin-top:1.1rem; }
  .nav-cta .btn{ flex:1; }
  .nav-toggle{ display:block; }
  .masthead-in{ position:relative; }
}

/* ---------- Campaign motto strip ---------- */
.motto{
  margin:0;
  background:var(--white);
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:.6rem var(--gutter);
  font-family:var(--body);
  font-style:italic;
  font-size:clamp(.92rem,1.4vw,1.05rem);
  line-height:1.45;
  color:var(--signal);
}
.motto strong{ font-weight:700; }

/* ============================================================
   Hero — the ballot field is the argument
   ============================================================ */
.hero{ padding-block:clamp(3rem,7vw,6rem) clamp(1.5rem,3vw,2.5rem); }
.hero-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.hero-kicker{
  font-family:var(--util); font-size:.72rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2);
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-bottom:1.7rem;
}
.hero-kicker b{ color:var(--ink); font-weight:700; }
.hero-kicker .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-3); }

.hero h1{ margin-bottom:1rem; }

/* Election-date subheading under the hero headline */
.hero-date{
  font-family:var(--display);
  font-weight:800; font-stretch:108%;
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#033666;
  margin:0 0 1.6rem;
}
.hero-date [data-days]{ color:var(--signal); }
.hero h1 em{
  font-style:normal;
  color:var(--signal);
}
.hero-sub{ max-width:34ch; }

/* Portrait floats inside the pitch so the text wraps around it —
   no dead space beneath the photo. */
.hero-byline{ display:block; }
.hero-byline::after{ content:""; display:block; clear:both; }
.hero-photo{
  float:left;
  width:clamp(170px,20vw,250px);
  margin:.3rem 1.6rem .6rem 0;
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:.4rem;
}
.hero-photo img{ width:100%; height:auto; }
@media (max-width: 520px){
  .hero-photo{ width:min(46vw,180px); margin-right:1.1rem; }
}
.hero .btn-row{ margin-top:2.2rem; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.75rem; }
  .hero-sub{ max-width:none; }
}
@media (max-width: 720px){
  /* Stacked, the inline dots strand themselves at the end of each line. */
  .hero-kicker{ display:grid; justify-items:start; gap:.4rem; }
  .hero-kicker .dot{ display:none; }
}

/* ---------- Hero highlights card ---------- */
.hero-aside{
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:clamp(1.4rem,2.6vw,2rem);
  align-self:start;
}
.hero-aside .eyebrow{ color:#033666; font-weight:700; margin-bottom:1.2rem; }
.hero-aside .checklist li.hl{
  background:rgba(200,16,46,.07);
  border:1.5px solid var(--signal);
  padding:.85rem 1rem .85rem 2.5rem;
}
.hero-aside .checklist li.hl::before{ left:.85rem; top:1.28em; }
.hero-aside .checklist{ gap:1rem; }
.hero-aside .checklist li{ font-size:.98rem; line-height:1.5; }
.hero-aside-more{
  margin:1.4rem 0 0; padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-family:var(--util); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.hero-aside-more a{ text-decoration:none; }
.hero-aside-more a:hover{ text-decoration:underline; }

/* ---------- The Ballot Field (10 x 10) ---------- */
.field{
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:clamp(1.25rem,2.4vw,1.9rem);
}
.field-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem;
  font-family:var(--util); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.15rem;
}
.field-grid{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:clamp(.28rem,.7vw,.5rem);
}
.field-cell{
  aspect-ratio:1.5 / 1;
  width:100%; height:auto;
  min-height:0;
  border:1.4px solid var(--ink-3);
  border-radius:999px;
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.field-cell.is-filled{ background:var(--ink); border-color:var(--ink); }
.field-cell.is-you{ background:var(--signal); border-color:var(--signal); }
.field-cell:not(.is-filled):hover{ border-color:var(--signal); background:rgba(200,16,46,.16); }

.field-foot{
  display:grid; gap:.55rem;
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.field-count{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:.9;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.field-count .of{ color:var(--ink-3); }
.field-label{
  font-family:var(--util); font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
  max-width:40ch;
  line-height:1.6;
  margin:0;
}
.field-note{
  font-family:var(--util); font-size:.62rem; letter-spacing:.08em;
  color:var(--ink-2); margin-top:.9rem; text-transform:none;
}

/* ============================================================
   Reversed (ultramarine) bands
   ============================================================ */
.band{
  background:var(--ultra);
  color:var(--white);
}
.band h1,.band h2,.band h3{ color:var(--white); }
.band .lede{ color:rgba(255,255,255,.82); }
.band .lede strong{ color:var(--white); }
.band a:not(.btn){ color:var(--white); }

.band-ink{ background:var(--ink); color:var(--white); }
.band-ink h2,.band-ink h3{ color:var(--white); }
.band-ink .lede{ color:rgba(255,255,255,.78); }

/* ============================================================
   Page header (inner pages)
   ============================================================ */
.pagehead{
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.75rem,6vw,5rem) clamp(2.25rem,5vw,4rem);
}
.pagehead-grid{
  display:grid;
  grid-template-columns:1fr .72fr auto;
  grid-template-areas:"title lede photo";
  gap:clamp(1.5rem,3vw,3.25rem);
  align-items:end;
}
.pagehead-grid > div{ grid-area:title; }
.pagehead-grid > .lede{ grid-area:lede; }
.pagehead-photo{ grid-area:photo; }
.pagehead h1{ margin-bottom:0; }
.pagehead .lede{ margin-bottom:.35rem; }

.pagehead-photo{
  margin:0;
  width:clamp(112px,12vw,158px);
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:.38rem;
}
.pagehead-photo img{ width:100%; height:auto; }

@media (max-width: 1024px){
  .pagehead-grid{
    grid-template-columns:1fr auto;
    grid-template-areas:"title photo" "lede lede";
  }
}
@media (max-width: 620px){
  .pagehead-grid{
    grid-template-columns:1fr;
    grid-template-areas:"title" "photo" "lede";
    align-items:start;
    gap:1.5rem;
  }
}

/* ============================================================
   Pillars / cards
   ============================================================ */
.pillars{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.pillar{
  background:var(--paper);
  padding:clamp(1.8rem,3.2vw,2.9rem);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;
}
/* .pillar .pillar-no outranks the .pillar p text colour, which was
   silently winning over a bare .pillar-no selector. */
.pillar-no, .pillar .pillar-no{
  font-family:var(--util); font-size:.7rem; font-weight:700;
  letter-spacing:.12em;
  color:var(--signal);
  padding-top:.45rem;
}
.pillar h3{ margin-bottom:.7rem; }
.pillar p{ color:var(--ink-2); max-width:62ch; }
.pillar-list{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:.75rem;
}
/* Absolutely-positioned markers, not grid columns: a grid list item turns
   every inline child (<em>, <strong>) into its own grid item, which breaks
   the sentence onto separate lines. */
.pillar-list li{
  position:relative;
  padding-left:2rem;
  font-size:.97rem; line-height:1.55;
  color:var(--ink-2);
}
.pillar-list li::before{
  content:"";
  position:absolute; left:0; top:.48em;
  width:1.15rem; height:.78rem;
  border-radius:999px;
  background:var(--signal);
}
@media (max-width: 720px){
  .pillar{ grid-template-columns:1fr; gap:1rem; }
  .pillar-no{ padding-top:0; }
}

/* ---------- Collapsible platform parts ---------- */
details.part{ border-top:1.5px solid var(--ink); }
details.part > summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0;
}
details.part > summary::-webkit-details-marker{ display:none; }
details.part > summary .eyebrow{ margin:0; color:var(--signal); font-weight:700; }
.part-count{
  flex:none;
  font-family:var(--util); font-size:.63rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
/* the open/closed indicator */
details.part > summary::after{
  content:"+";
  flex:none;
  font-family:var(--util); font-size:1rem; font-weight:700;
  width:1.9rem; height:1.9rem;
  border:1.5px solid var(--ink);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
details.part[open] > summary::after{ content:"\2212"; }
details.part > .pillars{ margin-bottom:1.5rem; }

/* ---------- First-year roadmap timeline ---------- */
.timeline{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.milestone{
  background:var(--paper);
  padding:clamp(1.6rem,3vw,2.5rem) 0;
  display:grid; grid-template-columns:minmax(7.5rem,9.5rem) 1fr;
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;
}
.milestone-when{
  font-family:var(--display);
  font-weight:800; font-stretch:112%;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--signal);
  padding-top:.2rem;
}
.milestone h3{ margin-bottom:1rem; }
.milestone .checklist{ gap:.85rem; }
.milestone .checklist li{ font-size:.99rem; }
@media (max-width: 680px){
  .milestone{ grid-template-columns:1fr; gap:.8rem; }
}

/* ---------- Generic card grid ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--paper);
  padding:clamp(1.6rem,2.6vw,2.2rem);
}
/* Fixed three-across variant (e.g. the nine platform parts on the home page). */
.cards-3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width: 940px){ .cards-3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px){ .cards-3{ grid-template-columns:1fr; } }

.card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.card p{ color:var(--ink-2); font-size:.98rem; }
.card-num{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(2.2rem,4vw,3.1rem); line-height:.9;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  color:var(--signal);
  display:block; margin-bottom:.7rem;
}
.band .card{ background:var(--ultra); }
.band .cards{ background:var(--line-rev); border-color:var(--line-rev); }
.band .card p{ color:rgba(255,255,255,.8); }
.band .card-num{ color:#F2707A; } /* signal red fails 3:1 on dark bands; lightened for WCAG AA */

/* ============================================================
   Prose (About, Platform detail, legal)
   ============================================================ */
.prose{ max-width:70ch; }
.prose h2{ margin-top:2.6em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:2em; margin-bottom:.55em; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.25em; color:var(--ink-2); }
.prose li{ margin-bottom:.55em; }
.prose ul.list-signal li{ color:var(--signal); }

.prose blockquote{
  margin:2.2em 0;
  padding:0 0 0 1.6rem;
  border-left:3px solid var(--signal);
  font-size:1.18rem; line-height:1.5;
  font-style:italic;
  color:var(--ink);
}
.prose blockquote cite{
  display:block; margin-top:.9rem;
  font-family:var(--util); font-style:normal;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--signal);
}

/* ---------- Two-column feature with photo ---------- */
.feature{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(2rem,4.5vw,4.5rem);
  align-items:center;
}
.feature-rev{ grid-template-columns:1.08fr .92fr; }
/* Grid children default to min-width:auto, so a wide child (the contribution
   table) pushes the column past the viewport instead of scrolling inside it. */
.feature > *, .hero-grid > *, .pagehead-grid > *, .pillar > *{ min-width:0; }
/* A form box pairs with prose of very different length — keep it at the top
   rather than floating in the middle of a column of whitespace. */
.feature > .formbox{ align-self:start; }
.feature-photo{
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:.55rem;
}
.feature-photo img{ width:100%; height:auto; }
.feature-photo figcaption{
  font-family:var(--util); font-size:.63rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
  padding:.85rem .3rem .25rem;
  border-top:1px solid var(--line);
  margin-top:.55rem;
}
/* A figure that takes the full wrap width, under a two-column feature. */
.photo-wide{ margin-top:clamp(2rem,4vw,3.25rem); }
.photo-wide img{ width:100%; }

/* Two framed photos stacked in one feature column. */
.photo-stack{ display:grid; gap:1.4rem; align-self:start; }

/* Transparent artwork (e.g. a collage with alpha): no frame, no fill. */
.photo-plain{ border:0; background:transparent; padding:0; }
.photo-plain figcaption{ border-top:0; }

@media (max-width: 860px){
  .feature,.feature-rev{ grid-template-columns:1fr; gap:2rem; }
}

/* ---------- Facts / stat strip ---------- */
.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--line-rev);
  border:1px solid var(--line-rev);
}
.fact{ padding:clamp(1.4rem,2.4vw,2rem); background:var(--ultra); }
.fact dt{
  font-family:var(--util); font-size:.63rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:.75rem;
}
.fact dd{
  margin:0;
  font-family:var(--display); font-weight:800; font-stretch:108%;
  font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
}
.fact dd small{
  display:block; margin-top:.5rem;
  font-family:var(--body); font-weight:400; font-size:.92rem;
  letter-spacing:0; line-height:1.45;
  color:rgba(255,255,255,.76);
}

/* ============================================================
   Forms (Google Form handoff + native contact)
   ============================================================ */
.formbox{
  border:1.5px solid var(--ink);
  background:var(--white);
  padding:clamp(1.6rem,3.2vw,2.6rem);
}
.formbox h3{ margin-bottom:.75rem; }
.formbox > p{ color:var(--ink-2); }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.35rem; counter-reset:step; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  counter-increment:step;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--util); font-size:.7rem; font-weight:700;
  letter-spacing:.1em;
  color:var(--white); background:var(--signal);
  width:2.1rem; height:2.1rem;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  margin-top:.05rem;
}
.steps h4{ margin:0 0 .3rem; }
.steps p{ color:var(--ink-2); font-size:.97rem; margin:0; }

.field-row{ display:grid; gap:.45rem; margin-bottom:1.15rem; }
.field-row label{
  font-family:var(--util); font-size:.67rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
}
.field-row .req{ color:var(--signal); }
.field-row input,
.field-row select,
.field-row textarea{
  font-family:var(--body); font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem .95rem;
  width:100%;
}
.field-row input:hover,.field-row select:hover,.field-row textarea:hover{ border-color:var(--ink-3); }
.field-row textarea{ min-height:150px; resize:vertical; }
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
@media (max-width:620px){ .field-2{ grid-template-columns:1fr; } }

.form-note{
  font-family:var(--util); font-size:.66rem; line-height:1.7;
  letter-spacing:.05em;
  color:var(--ink-2);
  margin-top:1.3rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
  text-transform:none;
}

/* ---------- Checklist (eligibility) ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.checklist li{
  position:relative;
  padding-left:2.25rem;
  color:var(--ink-2); font-size:1rem; line-height:1.55;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.44em;
  width:1.3rem; height:.88rem; border-radius:999px;
  background:var(--signal);
}
.checklist.is-no li::before{ background:transparent; border:1.5px solid var(--ink-3); }

/* Reversed variants — markers and cards on the coloured bands */
.band .checklist li{ color:rgba(255,255,255,.86); }
.band .checklist li strong{ color:var(--white); }
.band .checklist li::before{ background:var(--white); }
.band .checklist.is-no li::before{ background:transparent; border-color:rgba(255,255,255,.55); }

.band-ink .cards{ background:var(--line-rev); border-color:var(--line-rev); }
.band-ink .card{ background:var(--ink); }
.band-ink .card p{ color:rgba(255,255,255,.78); }
.band-ink .card-num{ color:#F2707A; }

.band .pillar-list li{ color:rgba(255,255,255,.82); }
.band .pillar-list li::before{ background:var(--white); }

/* ---------- Table (contribution limits) ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); background:var(--white); }
table.data{ width:100%; border-collapse:collapse; min-width:520px; }
table.data th, table.data td{
  text-align:left; padding:1rem 1.15rem;
  border-bottom:1px solid var(--line);
  font-size:.97rem;
}
table.data th{
  font-family:var(--util); font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
  background:var(--paper-2);
}
table.data td:last-child{
  font-family:var(--util); font-size:.9rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
table.data tr:last-child td{ border-bottom:0; }
/* Prose table: last column is text, not figures. */
table.data.table-plain td:last-child{
  font-family:var(--body); font-size:.97rem; font-weight:400; white-space:normal;
}

/* ---------- Callout ---------- */
.callout{
  border:1.5px solid var(--ink);
  border-left-width:5px;
  border-left-color:var(--signal);
  background:var(--white);
  padding:clamp(1.35rem,2.6vw,1.9rem);
  margin:2rem 0;
}
.callout h4{ margin:0 0 .5rem; }
.callout p{ color:var(--ink-2); font-size:.97rem; margin-bottom:.7rem; }
.callout p:last-child{ margin-bottom:0; }

/* ---------- Contact rows ---------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.contact-list li{ background:var(--paper); padding:1.5rem 0; display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center; }
.contact-list .ic{
  width:2.7rem; height:2.7rem; border-radius:999px;
  border:1.5px solid #8A0303;
  color:#8A0303;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.contact-list .cl-label{
  display:block;
  font-family:var(--util); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:900;
  color:#8A0303; margin-bottom:.3rem;
}
.contact-list .cl-value{ display:block; font-size:1.12rem; font-weight:500; }
.contact-list a{ text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ text-align:center; }
.cta-band .wrap{ display:grid; justify-items:center; gap:0; }
.cta-band h2{ max-width:18ch; margin-bottom:1.1rem; }
.cta-band .lede{ max-width:52ch; margin-bottom:2.1rem; }
.cta-band .eyebrow{ justify-content:center; }

/* ---------- Rally banner (above the footer, every page) ---------- */
.rally{
  background:var(--white);
  border-block:1.5px solid var(--signal);
  padding:clamp(1.1rem,2.5vw,1.6rem) var(--gutter);
  text-align:center;
}
.rally p{
  margin:0;
  font-family:var(--display);
  font-weight:800; font-stretch:108%;
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--signal);
  text-wrap:balance;
}
.rally strong{ text-transform:uppercase; }

/* ============================================================
   Footer
   ============================================================ */
.foot{ background:var(--ink); color:rgba(255,255,255,.72); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.foot a{ color:rgba(255,255,255,.72); text-decoration:none; }
.foot a:hover{ color:var(--white); text-decoration:underline; }
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(1.75rem,3.5vw,3rem);
  padding-bottom:2.75rem;
  border-bottom:1px solid var(--line-rev);
}
.foot h4{
  font-family:var(--util); font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); margin:0 0 1.15rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot li{ font-size:.95rem; }
.foot-brand .brand-name{ color:var(--white); font-size:1.25rem; }
.foot-brand p{ font-size:.95rem; margin-top:1rem; max-width:34ch; }
.foot-date{
  font-family:var(--util); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--white); margin-top:1.4rem;
}
.foot-social{ display:flex; gap:.55rem; margin-top:1.4rem; }
.foot-social a{
  width:2.4rem; height:2.4rem; border-radius:999px;
  border:1px solid var(--line-rev);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--util); font-size:.68rem; font-weight:700;
  color:var(--white);
}
.foot-social a:hover{ background:var(--white); color:var(--ink); text-decoration:none; }
.foot-legal{
  padding-top:1.75rem;
  font-family:var(--util); font-size:.63rem; line-height:1.85; letter-spacing:.05em;
  color:rgba(255,255,255,.5);
  max-width:88ch;
}
@media (max-width: 880px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width: 520px){
  .foot-grid{ grid-template-columns:1fr; }
}

/* ---------- Social handle ---------- */
.handle{
  font-family:var(--util);
  font-weight:700;
  color:var(--signal);
  letter-spacing:.04em;
  text-transform:none;
}
.foot .handle{ color:var(--white); }

/* ============================================================
   Motion
   ============================================================ */
/* Scoped to .js so that with scripting off the content is simply visible,
   rather than permanently at opacity 0. */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }

/* The ballot field is drawn by script; without it, an empty box reads as broken. */
html:not(.js) [data-field]{ display:none; }
html:not(.js) .js-only{ display:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

/* Masthead avatar: ELECT banner across the bottom of the profile photo */
.brand-photo-wrap{
  position:relative;
  flex:none;
  display:block;
  width:3.1rem; height:3.1rem;
  border-radius:999px;
  overflow:hidden;
  border:2px solid var(--signal);
}
.brand-photo-wrap .brand-photo{
  width:100%; height:100%;
  border:0;
  border-radius:0;
}
.brand-elect{
  position:absolute;
  left:0; right:0; bottom:0;
  background:var(--signal);
  color:var(--white, #FBFAF7);
  font-family:var(--util);
  font-size:.44rem;
  font-weight:900;
  letter-spacing:.14em;
  text-indent:.14em;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  padding:.22em 0 .3em;
}
.brand-role strong{ font-weight:900; }

/* "Elect Arvind" ribbon across the top of the big first-section profile photos */
.photo-elect{
  display:block;
  background:var(--signal);
  color:var(--white, #FBFAF7);
  font-family:var(--util);
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.35;
  padding:.4em .5em .45em;
  margin-top:.38rem;
}
.hero-photo .photo-elect{ font-size:.62rem; margin-top:.4rem; }


/* Never allow horizontal panning: clip any stray overflow (iOS Safari included) */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}


/* Header can never exceed the viewport, whatever font renders it.
   Desktop only: Safari clips BOTH axes when one axis is `clip`
   (WebKit bug), which would hide the mobile dropdown nav that hangs
   below the masthead. Below 1081px the html/body clip already
   prevents horizontal panning. */
@media (min-width: 1081px){
  .masthead{ overflow-x: clip; }
}
.masthead-in{ flex-wrap: nowrap; }
.brand{ min-width: 0; flex: 0 1 auto; }
.brand-text{ min-width: 0; }
.brand-name, .brand-role{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 430px){
  .brand-role{ font-size: .52rem; letter-spacing: .08em; }
  .brand-name{ font-size: .95rem; }
}


/* Page headers: heading full width, photo floats left, description wraps (home-page pattern) */
.pagehead-flow::after{ content:""; display:block; clear:both; }
.pagehead-flow .lede{ max-width:56ch; }
.pagehead-flow .pagehead-photo{
  position:relative;
  float:left;
  width:clamp(170px, 20vw, 250px);
  margin:.3rem 1.6rem .6rem 0;
}