/* CAGOP Ballot Fact Check
   Five 1080×1350 fact-check cards from the design canvas, stacked in one column.

   --u is one design pixel: every card measurement is written in the design's own px and scales
   with the slide's width, so a 1080px-wide card matches the design exactly. Each font size has a
   floor (about 6px + a quarter of its design size) that only engages below a 600px-wide card;
   there the 36-day timeline also switches to a stacked layout, so the cards stay readable on phones. */

:root {
  /* page around the cards (follows the viewer's theme) */
  --page-bg: #e7e7e5;
  --page-fg: #111111;
  --page-muted: #4a4a4a;
  --page-rule: #b5b5b2;
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.08);

  /* cards (finished graphics: they stay light in both themes) */
  --card-bg: #ffffff;
  --ink: #111111;
  --ink-muted: #4a4a4a;
  --ink-subtle: #5f5f5f;
  --rule: #d9d9d9;
  --panel: #f2f2f2;
  --bar-past: #8c8c8c;
  --bar-grace: #bdbdbd;
  --rep: #c8102e;
  --dem: #1f5aa6;

  --font-body: 'Barlow', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #151515;
    --page-fg: #f1f1f1;
    --page-muted: #ababab;
    --page-rule: #3d3d3d;
    --card-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page-bg: #151515;
  --page-fg: #f1f1f1;
  --page-muted: #ababab;
  --page-rule: #3d3d3d;
  --card-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-block: 40px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-body);
}

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Page */

/* Slides are as wide as the design but no taller than the screen, down to 480px wide
   (short windows and landscape phones scroll within a card rather than shrink it further). */
.page-head,
.slide,
.emails {
  width: 100%;
  max-width: 1080px;
  width: min(100%, 1080px, max(480px, (100svh - 48px) * 0.8));
  margin-inline: auto;
}

.page-head { margin-bottom: 28px; }

.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 2vw + 20px, 44px);
  line-height: 1.05;
  text-wrap: balance;
}

.page-head__meta {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--page-muted);
}

.deck {
  display: grid;
  gap: 48px;
}

.slide { container: slide / inline-size; }

.page-head__meta a,
.emails a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.page-head__meta a:hover,
.emails a:hover { text-decoration-thickness: 2px; }

.page-head__meta a:focus-visible,
.emails a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Emails: what each source email said, below the cards */

.emails {
  margin-top: 24px;
  scroll-margin-top: 24px;
}

.emails__title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--page-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 1.5vw + 18px, 36px);
  line-height: 1.05;
}

.emails__intro {
  max-width: 68ch;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

.emails__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px 48px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.email {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--page-rule);
  scroll-margin-top: 24px;
}

.email__date,
.email__subject,
.email__summary,
.email__checked { margin: 0; }

.email__date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.email__subject {
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}

.email__summary {
  font-size: 17px;
  line-height: 1.5;
}

.email__facts {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.email__facts li + li { margin-top: 4px; }

.email__checked {
  font-size: 15px;
  font-weight: 600;
}

/* Card */

.card {
  --u: calc(100cqw / 1080);

  /* per-card spacing and type, in design px */
  --claim-top: 52;
  --verdict-top: 32;
  --title-top: 36;
  --title-size: 72;
  --quote-size: 46;
  --chart-top: 56;

  display: flex;
  flex-direction: column;
  aspect-ratio: 1080 / 1350;
  padding: calc(72 * var(--u)) calc(80 * var(--u)) calc(60 * var(--u));
  background: var(--card-bg);
  color: var(--ink);
  font-family: var(--font-body);
  box-shadow: var(--card-shadow);
  scroll-margin-top: 24px;
}

.card--compact { --claim-top: 48; --verdict-top: 30; --title-top: 32; }
.card--age, .card--latino { --title-size: 62; --chart-top: 40; }
.card--lead { --title-size: 74; --chart-top: 64; }
.card--edge { --title-size: 70; }
.card--window { --title-size: 70; --quote-size: 44; }

.card :where(p, h2, figure, blockquote, ul) {
  margin: 0;
  padding: 0;
}

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(18 * var(--u));
  padding-bottom: calc(18 * var(--u));
  border-bottom: max(calc(3 * var(--u)), 1.5px) solid var(--ink);
}

.card__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(18 * var(--u));
}

.card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(30 * var(--u)), 13.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card__series,
.card__count { font-size: max(calc(24 * var(--u)), 12px); }

.card__series { color: var(--ink-muted); }

.card__count {
  flex-shrink: 0;
  color: var(--ink-subtle);
}

.claim {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  margin-top: calc(var(--claim-top) * var(--u));
}

.claim__source {
  font-size: max(calc(22 * var(--u)), 11.5px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.claim__quote p {
  font-size: max(calc(var(--quote-size) * var(--u)), calc(6px + var(--quote-size) * 0.25px));
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
}

.claim__note {
  font-size: max(calc(24 * var(--u)), 12px);
  color: var(--ink-muted);
}

.verdict {
  align-self: flex-start;
  margin-top: calc(var(--verdict-top) * var(--u));
  padding: max(calc(8 * var(--u)), 3px) max(calc(18 * var(--u)), 7px) max(calc(6 * var(--u)), 2px);
  background: var(--ink);
  color: var(--card-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(30 * var(--u)), 13.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card__title {
  margin-top: calc(var(--title-top) * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(var(--title-size) * var(--u)), calc(6px + var(--title-size) * 0.25px));
  line-height: 1.02;
}

/* CAGOP's own words or numbers, backing up the card */
.card__evidence {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: max(calc(20 * var(--u)), 10px) max(calc(24 * var(--u)), 12px);
  border-radius: calc(8 * var(--u));
  background: var(--panel);
}

.card--age .card__evidence { margin-top: calc(30 * var(--u)); }
.card--lead .card__evidence { margin-top: calc(24 * var(--u)); }

.card__evidence-label {
  font-size: max(calc(20 * var(--u)), 11px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.card__evidence-text {
  font-size: max(calc(28 * var(--u)), 13px);
  font-weight: 500;
  line-height: 1.3;
}

.card__evidence-text--quote { font-style: italic; }
.card__evidence-text strong { font-weight: 700; }

.card__note {
  margin-top: calc(36 * var(--u));
  font-size: max(calc(28 * var(--u)), 13px);
  line-height: 1.3;
}

.card__foot {
  margin-top: auto;
  padding-top: calc(18 * var(--u));
  border-top: 1px solid var(--rule);
}

.card__foot p {
  font-size: max(calc(20 * var(--u)), 11px);
  color: var(--ink-subtle);
}

/* Bar charts: a bar is --v / --max of the chart's --track width (design px). */

.chart {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  margin-top: calc(var(--chart-top) * var(--u));
}

.chart__title {
  font-size: max(calc(26 * var(--u)), 12.5px);
  font-weight: 500;
  color: var(--ink-muted);
}

.bar-line {
  display: flex;
  align-items: center;
  gap: calc(var(--bar-gap) * var(--u));
}

.bar {
  flex-shrink: 0;
  width: calc(var(--v) / var(--max) * var(--track) * var(--u));
  height: var(--bar-h);
  border-radius: 0 calc(var(--bar-r) * var(--u)) calc(var(--bar-r) * var(--u)) 0;
  background: var(--bar-color, var(--bar-past));
}

.bar-line__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--value-size);
  line-height: var(--bar-h);
}

.bar-line--rep { --bar-color: var(--rep); }
.bar-line--dem { --bar-color: var(--dem); }

.chart--pace .bar-line,
.chart--edge .bar-line,
.chart--lead .bar-line,
.pair__bars { border-left: max(calc(2 * var(--u)), 1px) solid var(--ink); }

/* 1. Democratic lead by election, and 5. the Republican turnout edge by day */

.chart--pace,
.chart--edge {
  --track: 600;
  --bar-h: max(calc(34 * var(--u)), 14px);
  --bar-r: 5;
  --bar-gap: 14;
  --value-size: max(calc(36 * var(--u)), 15px);
  gap: calc(26 * var(--u));
}

.bar-groups {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
}

.bar-group {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.bar-group__title {
  font-size: max(calc(26 * var(--u)), 12.5px);
  font-weight: 600;
}

.bars {
  display: flex;
  flex-direction: column;
  gap: max(calc(10 * var(--u)), 5px);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}

.bar-row__label {
  flex: 0 0 max(calc(92 * var(--u)), 2.3em);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(36 * var(--u)), 15px);
  line-height: var(--bar-h);
}

.bar-row--current { --bar-color: var(--dem); }
.bar-row--current .bar-line__value,
.bar-row--latest .bar-line__value { font-weight: 700; }

.chart--edge { --bar-color: var(--rep); }
.chart--edge .bar-row__label { flex-basis: max(calc(130 * var(--u)), 3.4em); }

/* 2–3. Republican and Democratic rates side by side */

.chart--pairs {
  --track: 600;
  --bar-h: max(calc(28 * var(--u)), 12px);
  --bar-r: 5;
  --bar-gap: 12;
  --value-size: max(calc(30 * var(--u)), 13.5px);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(32 * var(--u));
  list-style: none;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: max(calc(26 * var(--u)), 12.5px);
  font-weight: 600;
}

.legend__item::before {
  content: "";
  width: max(calc(22 * var(--u)), 10px);
  height: max(calc(22 * var(--u)), 10px);
  border-radius: calc(4 * var(--u));
  background: var(--swatch);
}

.legend__item--rep { --swatch: var(--rep); }
.legend__item--dem { --swatch: var(--dem); }

.pairs {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  margin-top: calc(6 * var(--u));
}

.pair {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.pair__label {
  flex: 0 0 max(calc(100 * var(--u)), 2.6em);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(36 * var(--u)), 15px);
}

.pair__bars {
  display: flex;
  flex-direction: column;
  gap: max(calc(6 * var(--u)), 3px);
}

.card--latino .pairs { gap: calc(14 * var(--u)); }
.card--latino .pairs > .pair { padding: 0 calc(16 * var(--u)); }

.pair-callout {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--panel);
}

.pair-callout__label {
  font-size: max(calc(20 * var(--u)), 11px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* 4. Ballots returned */

.chart--lead {
  --track: 640;
  --bar-h: max(calc(56 * var(--u)), 20px);
  --bar-r: 6;
  --bar-gap: 18;
  --value-size: max(calc(46 * var(--u)), 17.5px);
  gap: calc(26 * var(--u));
}

.tally {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.tally__label {
  font-size: max(calc(32 * var(--u)), 14px);
  font-weight: 600;
}

.tally__diff {
  margin-top: calc(8 * var(--u));
  font-size: max(calc(30 * var(--u)), 13.5px);
  font-weight: 600;
}

/* 5. The primary's mail-ballot window: 900 design px = 36 days, 25px a day */

.timeline {
  position: relative;
  width: calc(920 * var(--u));
  height: calc(310 * var(--u));
  margin-top: calc(var(--chart-top) * var(--u));
}

.timeline__callouts {
  position: absolute;
  inset: 0 0 auto;
  height: calc(150 * var(--u));
}

.timeline__callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  white-space: nowrap;
  font-size: max(calc(28 * var(--u)), 13px);
  font-weight: 600;
}

.timeline__callout::before {
  content: "";
  flex-shrink: 0;
  width: max(calc(16 * var(--u)), 10px);
  height: max(calc(16 * var(--u)), 10px);
  border-radius: 50%;
  background: var(--dot);
}

.timeline__callout--dem { --dot: var(--dem); top: 0; right: calc(10 * var(--u)); }
.timeline__callout--rep { --dot: var(--rep); top: calc(66 * var(--u)); right: calc(195 * var(--u)); }

.timeline__leader {
  position: absolute;
  width: max(calc(2 * var(--u)), 1px);
  background: var(--ink);
}

.timeline__leader--dem { left: calc(899 * var(--u)); top: calc(42 * var(--u)); height: calc(117 * var(--u)); }
.timeline__leader--rep { left: calc(736 * var(--u)); top: calc(108 * var(--u)); height: calc(51 * var(--u)); }

.timeline__track {
  position: absolute;
  top: calc(150 * var(--u));
  left: 0;
  width: calc(900 * var(--u));
  height: calc(40 * var(--u));
}

.timeline__segment {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: max(calc(22 * var(--u)), 11.5px);
  font-weight: 600;
}

.timeline__segment--vote {
  left: 0;
  width: calc(725 * var(--u));
  padding-left: calc(16 * var(--u));
  border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u));
  background: var(--ink);
  color: var(--card-bg);
}

/* The design starts this label at 14px, under the day-29½ marker; 30px clears it. */
.timeline__segment--grace {
  left: calc(727 * var(--u));
  width: calc(173 * var(--u));
  padding-left: calc(30 * var(--u));
  border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0;
  background: var(--bar-grace);
  color: var(--ink);
}

.timeline__marker {
  --m: calc(22 * var(--u));
  position: absolute;
  top: calc(9 * var(--u));
  width: var(--m);
  height: var(--m);
  border: calc(3 * var(--u)) solid var(--card-bg);
  border-radius: 50%;
  background: var(--dot);
}

.timeline__marker--rep { --dot: var(--rep); left: calc(726 * var(--u)); }
.timeline__marker--dem { --dot: var(--dem); left: calc(889 * var(--u)); }

.timeline__axis {
  position: absolute;
  top: calc(214 * var(--u));
  left: 0;
  right: 0;
}

.timeline__tick {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.timeline__tick--start { left: 0; }
.timeline__tick--eday { right: calc(195 * var(--u)); align-items: flex-end; }
.timeline__tick--deadline { right: calc(20 * var(--u)); align-items: flex-end; }

.timeline__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(calc(36 * var(--u)), 15px);
}

.timeline__event {
  font-size: max(calc(24 * var(--u)), 12px);
  color: var(--ink-muted);
}

.timeline__day {
  font-size: max(calc(22 * var(--u)), 11.5px);
  color: var(--ink-subtle);
}

/* Phones: cards grow taller than 4:5 as needed, and the timeline stacks. */

@container slide (max-width: 599px) {
  .card > :has(+ .card__foot) { margin-bottom: 24px; }

  .claim__quote p,
  .card__title { text-wrap: pretty; }

  .timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    height: auto;
  }

  .timeline__callouts {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: auto;
  }

  .timeline__callout {
    position: static;
    align-items: flex-start;
    white-space: normal;
  }

  .timeline__callout::before { margin-top: 0.2em; }

  .timeline__leader { display: none; }

  .timeline__track {
    position: relative;
    top: auto;
    display: flex;
    gap: 2px;
    width: 100%;
    height: auto;
  }

  .timeline__segment {
    position: static;
    min-height: 28px;
    padding: 4px 6px;
    line-height: 1.1;
  }

  .timeline__segment--vote {
    flex: 0 0 calc(725 / 900 * 100%);
    padding-left: 8px;
  }

  .timeline__segment--grace {
    flex: 1;
    width: auto;
    padding-left: 16px;
    padding-right: 9px;
  }

  .timeline__marker {
    --m: 14px;
    top: 50%;
    translate: 0 -50%;
    border-width: 2px;
  }

  .timeline__marker--rep { left: calc(737 / 900 * 100% - var(--m) / 2); }
  .timeline__marker--dem { left: calc(100% - var(--m) / 2); }

  .timeline__axis {
    position: relative;
    top: auto;
  }

  .timeline__tick--start { position: static; }
  .timeline__tick--eday { right: calc(175 / 900 * 100%); }
  .timeline__tick--deadline { right: 0; }
}

@media print {
  body { background: #ffffff; }
  .card { box-shadow: none; }
  .slide { break-inside: avoid; }
}