/* ==========================================================================
   iVote Civic Education Fund — site styles
   One shared stylesheet for every page. Design tokens are defined once in
   :root below. To adjust a brand color site-wide, change it there.
   ========================================================================== */

:root {
  --blue: #1661AE;
  --blue-dark: #124F8E;   /* button hover */
  --blue-light: #4E97E3;  /* accents on dark backgrounds */
  --blue-pale: #BBDDFB;   /* light accent that stays legible on the blue band */
  --red: #C0392B;         /* timeline: narrowed protections */
  --ink: #0C0D0D;
  --paper: #FFFFFF;
  --gray: #525353;
  --rule: #E4E4E4;
  --tint: #EEF3FA;
  --maxw: 1080px;
}

/* --- Reset ---------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Note: scroll-behavior is intentionally left at the browser default (instant).
   Smooth scrolling on the root element breaks the jump to an anchor like
   resources.html#timeline when the page is opened directly from a shared link,
   so those links land in the right place. */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* --- Layout --------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Skip link for keyboard and screen-reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 800;
  z-index: 100;
}
.skip-link:focus { left: 0; text-decoration: none; }

main { display: block; }

section { padding: 56px 0; }
.rule-top { border-top: 1px solid var(--rule); }

/* Keep anchor targets clear of the sticky nav when arriving from a jump link
   such as resources.html#timeline. */
section[id], [id] { scroll-margin-top: 90px; }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3 { font-weight: 900; letter-spacing: -.01em; line-height: 1.1; }
h1 { font-size: 34px; margin-bottom: 14px; }
h2 { font-size: 34px; margin-bottom: 14px; }
h3 { font-size: 21px; margin-bottom: 8px; }
p { margin-bottom: 16px; max-width: 70ch; }

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.gray { color: var(--gray); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--blue-dark); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }

/* --- Navigation ----------------------------------------------------------- */
nav {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .97);
  z-index: 50;
}
.navin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; }
.logo img { height: 44px; width: auto; display: block; }
/* The Home page header uses just the blue "i" mark. */
.logo img.logo-mark { height: 40px; }

.navlinks { display: flex; gap: 24px; font-size: 15px; font-weight: 700; }
.navlinks a { color: var(--ink); }
.navlinks a:hover { color: var(--blue); text-decoration: none; }
.navlinks a[aria-current="page"] { color: var(--blue); }

/* --- Hero (Home): the logo speaks the mission ----------------------------- */
.hero-section { padding: 28px 0 52px; }
.hero { text-align: center; }
/* Large on desktop, scaling down so it never crowds tablet edges or overflows
   at 375px (the global img max-width:100% is a final safety net). */
.hero-logo { width: clamp(280px, 54vw, 460px); height: auto; display: block; margin: 0 auto 30px; }
.bubble {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-radius: 26px;
  padding: 44px 48px 40px;
  max-width: 760px;
  margin: 0 auto;
}
/* Default tail: points down-left. */
.bubble::after {
  content: "";
  position: absolute;
  left: 64px;
  bottom: -26px;
  width: 0;
  height: 0;
  border-left: 34px solid var(--ink);
  border-bottom: 28px solid transparent;
}
/* Hero bubble tail points UP toward the logo above it. */
.bubble-up::after {
  left: 50%;
  top: -24px;
  bottom: auto;
  transform: translateX(-50%);
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 26px solid var(--ink);
}
.bubble h1 { font-size: clamp(30px, 4.6vw, 50px); color: #fff; }
.bubble h1 .b { color: var(--blue-light); }
.hero .sub { margin: 30px auto 0; max-width: 620px; font-size: 19px; color: var(--gray); }

/* --- Full-width section bands (Home) -------------------------------------- */
.section-tint { background: var(--tint); }

/* State rules quick check */
.statecheck { text-align: center; }
.statecheck h2 { margin-bottom: 6px; }
.statecheck p { margin-left: auto; margin-right: auto; }
.statecheck select { margin-top: 8px; }

/* "What if everyone voted?" blue band */
.everyone-band { background: var(--blue); color: #fff; text-align: center; }
.everyone-h {
  font-weight: 900;
  font-size: clamp(30px, 6vw, 60px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 22px;
  max-width: none;
}
.everyone-h .b { color: var(--blue-pale); }
.everyone-stats {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto 22px;
}
.everyone-stats p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  padding: 16px 22px;
  max-width: none;
}
.everyone-link { color: #fff; font-weight: 800; }
.everyone-link:hover { color: var(--blue-pale); }

/* Timeline teaser strip */
.timeline-teaser h2 { max-width: none; margin-bottom: 26px; }
.tl-teaser { display: block; color: var(--ink); }
.tl-teaser:hover { text-decoration: none; }
.tl-teaser-row { position: relative; display: flex; gap: 14px; padding-top: 6px; margin-bottom: 18px; }
.tl-teaser-row::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 7px;
  right: 7px;
  height: 2px;
  background: var(--rule);
}
.tl-marker { position: relative; z-index: 1; flex: 1 1 0; min-width: 96px; }
/* Same marker system as the full timeline: blue circle / red square. */
.tl-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--tint);
  margin-bottom: 14px;
}
.tl-marker.narrowed .tl-dot { background: var(--red); border-radius: 2px; }
.tl-year { display: block; font-weight: 900; font-size: 20px; color: var(--blue); }
.tl-marker.narrowed .tl-year { color: var(--red); }
.tl-label { display: block; font-size: 13.5px; color: var(--gray); font-weight: 700; margin-top: 2px; }
.tl-teaser-cta { font-weight: 800; color: var(--blue); }

@media (max-width: 560px) {
  .tl-teaser-row { flex-wrap: wrap; }
  .tl-teaser-row::before { display: none; }
  .tl-marker { flex-basis: 44%; }
}

/* --- Cards (Home "what we do") -------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 10px;
}
.card {
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.card p { font-size: 15.5px; color: var(--gray); flex: 1; }
.card .go { display: block; font-weight: 800; font-size: 15px; }
.card .go + .go { margin-top: 8px; }

/* --- Blue call-to-action strip (Home) ------------------------------------- */
.strip {
  background: var(--blue);
  color: #fff;
  border-radius: 22px;
  padding: 38px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.strip h2 { color: #fff; margin: 0; font-size: 28px; }
.strip p { color: #D8E6F6; margin: 6px 0 0; font-size: 16px; }
.strip .btn { background: #fff; color: var(--blue); }
.strip .btn:hover { background: var(--tint); }

/* --- Stat bar (Our Work, AVR) --------------------------------------------- */
.statbar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin: 26px 0 30px;
  flex-wrap: wrap;
}
.bar {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
}
.bar .num { font-size: 30px; font-weight: 900; color: var(--blue); }
.bar .lab {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray);
}

/* --- Roll-off comparison bars (Our Work, SOS) ----------------------------- */
.rolloff { margin: 28px 0; }
.rolloff .row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rolloff .yr { width: 120px; font-weight: 800; font-size: 14px; }
.rolloff .track {
  flex: 1;
  background: var(--tint);
  border-radius: 6px;
  height: 26px;
  position: relative;
}
.rolloff .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--blue);
  border-radius: 6px;
}
.rolloff .val { width: 60px; font-weight: 900; color: var(--blue); }
.legend { font-size: 13.5px; color: var(--gray); }
.legend .chip {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--blue);
  vertical-align: -2px;
  margin-right: 5px;
}

/* --- State finder dropdown (Our Work, SOS) -------------------------------- */
select {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  margin: 10px 0 18px;
  font-family: inherit;
  background: #fff;
  max-width: 100%;
}
.finder-link { font-weight: 800; }

/* --- AVR state grid (Our Work) -------------------------------------------- */
.stategrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  margin: 22px 0;
}
.st {
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  text-align: center;
  padding: 10px 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--gray);
}
.st.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* --- Compact tool links (Voter Toolkit) ----------------------------------- */
/* One wrapping row of pill links that jump to each tool section below. */
.tool-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.tool-pills a {
  display: inline-block;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.tool-pills a:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }

/* Each tool's own full-width section. */
.tool-section h2 { font-size: 27px; }
/* Container VoteAmerica's script renders each tool into. */
.va-embed { min-height: 60px; margin-top: 8px; }

/* --- Voting in Your State guide (Voter Toolkit) --------------------------- */
.state-guide { border: 2px solid var(--ink); border-radius: 16px; padding: 26px 28px 30px; margin-top: 30px; }
.state-guide > h2 { font-size: 26px; margin-bottom: 6px; }
.state-card {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.sg-head h3 { font-size: 24px; margin-bottom: 6px; }
.sg-sitelink { font-weight: 700; margin: 4px 0 0; }
.sg-sec { padding: 18px 0; border-top: 1px solid var(--rule); }
.sg-sec:first-of-type { border-top: none; }
.sg-sec h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.sg-methods { margin-bottom: 8px; }
.sg-methods .chip, .sg-methods .chip-blue {
  display: inline-block; border-radius: 20px; padding: 3px 12px; font-size: 13px;
  font-weight: 700; margin: 2px 4px 2px 0; background: var(--tint); border: 1px solid var(--rule);
}
.sg-methods .chip-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.sg-list { list-style: none; margin: 0 0 6px; }
.sg-list li { padding: 5px 0; font-size: 15.5px; border-bottom: 1px solid var(--rule); max-width: none; }
.sg-list li:last-child { border-bottom: none; }
.dl-label { display: inline-block; min-width: 92px; font-weight: 800; }
.dl-date { color: var(--blue); font-weight: 700; }
.dl-muted { color: var(--gray); }
.sg-sublabel { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); margin: 12px 0 2px; }
.sg-note { font-size: 15px; color: var(--gray); margin: 4px 0 8px; }
.sg-tool { font-weight: 700; font-size: 14.5px; margin: 10px 0 0; }
.sg-global-disclaimer { font-size: 13px; color: var(--gray); margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); max-width: none; }

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "Updated" stamp used on the fact sheet. Visible but calm. */
.stamp {
  display: inline-block;
  background: var(--tint);
  color: var(--gray);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 6px 12px;
  margin-top: 16px;
}

/* ==========================================================================
   Interior page polish: shared header band and section components
   ========================================================================== */

/* Page header band. Every interior page opens with this (tint by default,
   blue on the Voter Toolkit action page). Not used on the Home hero. */
.page-header { background: var(--tint); padding: 46px 0 40px; }
.page-header h1 { margin-bottom: 10px; }
.page-header .standfirst { color: var(--gray); font-size: 18px; max-width: 64ch; margin: 0; }
.page-header.header-blue { background: var(--blue); color: #fff; }
.page-header.header-blue .eyebrow { color: #fff; opacity: .82; }
.page-header.header-blue h1 { color: #fff; }
.page-header.header-blue .standfirst { color: #DBE8F7; }

/* Compact tool pills sitting inside the blue Voter Toolkit band: white pills,
   blue text. (The base .tool-pills styles the light version elsewhere.) */
.header-blue .tool-pills { margin-bottom: 0; }
.header-blue .tool-pills a { background: #fff; border-color: #fff; color: var(--blue); }
.header-blue .tool-pills a:hover { background: var(--blue-dark); border-color: #fff; color: #fff; }

/* Secretary of state finder styled as a bordered card (Our Work), matching the
   state widget's card language. */
.finder-card { border: 2px solid var(--ink); border-radius: 16px; padding: 24px 26px; margin-top: 8px; }
.finder-card p:last-of-type { margin-bottom: 0; }

/* Jump-link pills (Research & Resources). */
.jump-pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 6px 0 0; }
.jump-pills a {
  display: inline-block; background: #fff; border: 1px solid var(--rule);
  border-radius: 22px; padding: 8px 18px; font-size: 14px; font-weight: 700; color: var(--ink);
}
.jump-pills a:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }

/* Fact sheet as a white document card sitting on a tint band. */
.doc-card { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 34px 36px; }
@media (max-width: 480px) { .doc-card { padding: 24px 20px; } }

/* Advisory board as a name wall on a tint band. Left-aligned, with a column
   wide enough to run three to four lines. */
.name-wall {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  max-width: 680px;
}

/* Thin blue-bordered callout (About: the c3/c4 relationship). */
.callout { border: 1px solid var(--blue); border-left: 4px solid var(--blue); border-radius: 10px; background: var(--tint); padding: 16px 20px; }
.callout p { margin: 0; max-width: none; }

/* --- Timeline (Research & Resources) -------------------------------------- */
.tl { position: relative; margin-top: 24px; padding-left: 34px; border-left: 3px solid var(--rule); }
.tl-item { position: relative; margin-bottom: 30px; max-width: 66ch; }
/* Marker system: blue circle = expanded access, red square = narrowed protections.
   Color and shape both carry the meaning so it survives colorblindness. */
.tl-item::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
}
.tl-item.narrowed::before { background: var(--red); border-radius: 2px; }
.tl-item .yr { font-weight: 900; font-size: 19px; color: var(--blue); }
.tl-item.narrowed .yr { color: var(--red); }

/* Legend above the timeline. */
.tl-legend { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--gray); margin: 8px 0 0; }
.tl-legend .k { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend .k::before { content: ""; width: 13px; height: 13px; display: inline-block; }
.tl-legend .k-expanded::before { border-radius: 50%; background: var(--blue); }
.tl-legend .k-narrowed::before { border-radius: 2px; background: var(--red); }
.tl-item p { font-size: 15.5px; margin: 4px 0 0; color: #2A2B2B; max-width: none; }

/* --- Advisory board (About) ----------------------------------------------- */
.board-list {
  font-size: 18px;
  max-width: 60ch;
}

/* --- Research entries (Research & Resources) ------------------------------ */
.entry { border-top: 1px solid var(--rule); padding: 28px 0; }
.entry:first-of-type { border-top: none; }

/* --- Fact sheet (Research & Resources) ------------------------------------ */
.factsheet h3 { margin-top: 28px; }
.factsheet ul { margin: 0 0 16px 22px; }
.factsheet li { margin-bottom: 10px; max-width: 70ch; }

/* Sources rendered as endnotes. */
.endnotes {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--gray);
}
.endnotes ol { margin: 10px 0 0 20px; }
.endnotes li { margin-bottom: 8px; max-width: 74ch; }

/* --- Jump links row ------------------------------------------------------- */
.jumplinks { font-size: 15px; }
.jumplinks a { font-weight: 700; }

/* --- Footer --------------------------------------------------------------- */
footer { background: var(--ink); color: #B9BABA; margin-top: 40px; }
footer .wrap {
  padding: 44px 24px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 14px;
}
footer a { color: var(--blue-light); }
footer .fine { font-size: 12.5px; max-width: 420px; }

/* --- 404 ------------------------------------------------------------------ */
.notfound { padding: 90px 0; text-align: center; }
.notfound h1 { font-size: clamp(40px, 8vw, 72px); }
.notfound p { margin: 16px auto 24px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 820px) {
  .cards { grid-template-columns: 1fr; }
  .navlinks { gap: 14px; font-size: 13.5px; flex-wrap: wrap; }
  .bubble { padding: 32px 26px; }
  h1, h2 { font-size: 27px; }
  section { padding: 44px 0; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .bubble { padding: 26px 20px; }
  .strip { padding: 28px 24px; }
  .rolloff .yr { width: 84px; }
  footer .wrap { flex-direction: column; gap: 20px; }
}

/* --- Accessibility -------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

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

/* ==========================================================================
   iVote Research
   The research program at ivoteresearch.org. Two places use these rules:
   the full-width card at the top of "What we do" on the home page, and the
   iVote Research section on Research & Resources.
   ========================================================================== */

/* Home page: one card spanning the whole cards grid, above the row of three. */
.card-wide { grid-column: 1 / -1; flex-direction: row; align-items: center;
             justify-content: space-between; gap: 30px; }
.card-wide .cw-text { flex: 1; min-width: 0; }
.card-wide h3 { margin-bottom: 8px; }
.card-wide p { margin: 0; flex: none; }
.card-wide .go { white-space: nowrap; }

/* Research page: the current report, set off from the body copy. */
.ir-feature { background: var(--tint); border-radius: 14px; padding: 26px 28px;
              margin: 24px 0 26px; max-width: 820px; }
.ir-feature h3 { margin-bottom: 8px; }
.ir-feature p { margin-bottom: 10px; }
.ir-feature .ir-meta { font-size: 13.5px; color: var(--gray); font-weight: 700;
                       margin-bottom: 14px; }

/* Graphics pulled from ivoteresearch.org. The chart is landscape and the two
   stat cards are square, so the chart spans both columns rather than being
   letterboxed next to them. */
.ir-gfx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
          margin: 0 0 30px; max-width: 820px; }
.ir-gfx a { display: block; line-height: 0; }
.ir-gfx a:first-child { grid-column: 1 / -1; }
.ir-gfx img { display: block; width: 100%; height: auto;
              border: 1px solid var(--rule); border-radius: 10px; }

/* Lighter than the home page cards so this row reads as a sub-group. */
.ir-cards { margin-bottom: 26px; }
.ir-cards .card { border-width: 1px; border-color: var(--rule); border-radius: 12px;
                  padding: 22px 20px; }
.ir-cards .card h3 { font-size: 18px; }
.ir-cta { margin: 0; }

@media (max-width: 860px) {
  .card-wide { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ir-gfx { grid-template-columns: 1fr; }
  .ir-gfx a:first-child { grid-column: auto; }
}