/* Protest broadsheet. The name and the domain live in data/site.json.
   Three colors, two faces, one mode. Designed at 375px first. */

/* ---------- tokens ---------- */
:root {
  --paper: #F3EEE4;
  --paper-sunk: #E7DFCE;
  --ink: #121212;
  --ink-soft: #4A4741;
  --red: #C8102E;
  --red-deep: #97071F;

  --display: "Anton", "Oswald", "Bebas Neue", Impact, "Haettenschweiler",
             "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --doc: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rule: 3px solid var(--ink);
  --rule-heavy: 9px solid var(--ink);
  --rule-hair: 1px solid var(--ink);
  --gut: 1.125rem;
  --measure: 34rem;
  --page: 64rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--doc);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every number on this page is a figure in a record. Line them up. */
time, .num, .countdown__n, .card__meta, .strip, .sources-table { font-variant-numeric: tabular-nums; }

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

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--red); color: var(--paper);
  padding: 0.6rem 1rem; font-weight: 700; z-index: 60;
}
.skip:focus { left: 0; }

/* ---------- sticky countdown strip ---------- */
.strip {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule);
  font-family: var(--doc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.strip__in {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.5rem var(--gut);
  width: 100%; max-width: var(--page); margin-inline: auto;
}
.strip__n {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--red);
  line-height: 1;
}
.strip__label { color: var(--ink-soft); }
.strip__date { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 26rem) { .strip__date { display: none; } }

/* ---------- hero ---------- */
.hero { border-bottom: var(--rule-heavy); padding-block: 1.5rem 2.25rem; }
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  /* Sized so the mark sets on two lines at phone width and stays above the
     receipt card. Anton's widest unbreakable run here is POLLS.COM at 4.03em,
     so the floor clears it with room; balance keeps the break off THE. */
  font-size: clamp(2.6rem, 15vw, 8rem);
  text-wrap: balance;
  margin: 0;
}
.wordmark__dot { color: var(--red); }
.tagline {
  font-family: var(--display);
  font-size: clamp(1.4rem, 6.4vw, 3rem);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: var(--rule);
  text-transform: uppercase;
}
.lede {
  max-width: var(--measure);
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: 1.25rem 0 0;
}

/* ---------- the big countdown block ---------- */
.countdown {
  margin-top: 1.75rem;
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding-block: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1rem;
}
.countdown__n {
  margin: 0;
  font-family: var(--display);
  color: var(--red);
  font-size: clamp(4.5rem, 24vw, 9rem);
  line-height: 0.78;
  letter-spacing: -0.02em;
}
.countdown__txt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
}
.countdown__txt span { display: block; color: var(--ink-soft); letter-spacing: 0.08em; font-weight: 600; text-transform: none; margin-top: 0.35rem; }

/* ---------- broadsheet section markers ---------- */
.marker { margin-top: 3rem; border-top: var(--rule-heavy); padding-top: 0.5rem; }
.marker__kicker {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft);
}
.marker__kicker::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--red); flex: none; }
.marker__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 11vw, 5rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
}
.marker__sub { max-width: var(--measure); margin: 0.75rem 0 0; color: var(--ink-soft); }

.prose { max-width: var(--measure); }
.prose p { margin: 1rem 0 0; }
.prose p:first-child { margin-top: 1.25rem; }
.prose strong { font-weight: 800; }

/* The instruction that every worried section lands on. */
.pivot {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 3.25rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 1.5rem 0 0;
  max-width: 22ch;
}
.pivot em { font-style: normal; color: var(--red); }

/* ---------- the record ---------- */
.record { position: relative; margin-top: 1.75rem; padding-top: 0.5rem; }
.record__track {
  position: absolute; left: 5px; top: 0; bottom: 0; width: 3px;
  background: var(--paper-sunk);
}
.record__ink {
  position: absolute; left: 5px; top: 0; bottom: 0; width: 3px;
  background: var(--red);
  transform-origin: top center;
}
.record__list { list-style: none; margin: 0; padding: 0 0 0 1.75rem; }
.record__list > li { position: relative; margin-bottom: 2.5rem; }
.record__list > li::before {
  content: ""; position: absolute; left: -1.75rem; top: 0.6rem;
  width: 13px; height: 13px; background: var(--red);
  transform: translateX(-4px);
}

/* ---------- quote card ---------- */
.card {
  border-top: var(--rule);
  border-bottom: var(--rule-hair);
  background: var(--paper);
  padding-top: 0.75rem;
  scroll-margin-top: 4.5rem;
}
.card__stamp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.card__type { background: var(--ink); color: var(--paper); padding: 0.2rem 0.45rem; }
.card--ruling .card__type { background: var(--red); }
.card--action .card__type { background: var(--ink); color: var(--paper); }
.card__date { color: var(--ink-soft); letter-spacing: 0.1em; }

.card__figure { position: relative; margin: 0.85rem 0 0; overflow: hidden; background: var(--paper-sunk); }
.card__figure img { width: 100%; height: auto; }
.card[data-overprint="true"] .card__figure::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.card__pull {
  font-family: var(--display);
  font-size: clamp(2.1rem, 10.5vw, 4.25rem);
  line-height: 0.88;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0.85rem 0 0;
  text-wrap: balance;
}
.card--ruling .card__pull { color: var(--red); }

.card__quote {
  margin: 0.9rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: var(--measure);
  border-left: 3px solid var(--red);
  padding-left: 0.85rem;
}
.card__quote p { margin: 0; }
/* Actions and rulings get no quotation marks and no quote rule. They are
   statements of fact about a document, so they read as a plain line. */
.card__line {
  margin: 0.9rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: var(--measure);
  border-left: 3px solid var(--ink);
  padding-left: 0.85rem;
}

.card__meta {
  margin: 0.9rem 0 0;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  border-top: var(--rule-hair);
  padding-top: 0.6rem;
}
.card__meta dt {
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.6875rem; color: var(--ink-soft); padding-top: 0.15em;
}
.card__meta dd { margin: 0; }

.card__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin: 0.75rem 0 0; padding-bottom: 0.75rem;
  font-size: 0.8125rem;
}
.card__foot a { font-weight: 700; }
.card__archive { color: var(--ink-soft); font-weight: 600; }

.share-btn {
  font: inherit; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft);
  border: 2px solid var(--paper-sunk);
  padding: 0.3rem 0.5rem; cursor: pointer;
  margin-left: auto;
}
.share-btn:hover { border-color: var(--red); color: var(--red); }
.share-btn[data-done="true"] { border-color: var(--red); color: var(--red); }

/* ---------- make it count ---------- */
.paths { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.path { border-top: var(--rule); padding: 0.85rem 0 1.25rem; }
.path__n {
  margin: 0;
  font-family: var(--display); font-size: 1.5rem; color: var(--red); line-height: 1;
}
.path__title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  line-height: 0.92; text-transform: uppercase; margin: 0.3rem 0 0;
}
.path__body { margin: 0.65rem 0 0; max-width: var(--measure); }
.path__links {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.4rem; margin: 0.75rem 0 0; max-width: var(--measure);
}
.path__link { font-weight: 700; }

/* the hands rule, stated plainly and only where it matters */
.hands {
  margin-top: 1.5rem; border: var(--rule); padding: 1rem;
  background: var(--paper-sunk);
  max-width: var(--measure);
}
.hands strong { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.5rem; }

/* ---------- rides ---------- */
.rides { margin-top: 1.5rem; display: grid; gap: 2rem; }
.rides__col { border-top: var(--rule); padding-top: 0.75rem; }
.rides__title {
  font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.25rem);
  text-transform: uppercase; line-height: 0.95; margin: 0 0 0.5rem;
}
.rides__sub {
  margin: 1rem 0 0.4rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--red);
  border-top: var(--rule-hair); padding-top: 0.6rem;
}
.rides__list { list-style: none; margin: 0; padding: 0; }
.rides__list li { padding: 0.4rem 0; border-bottom: var(--rule-hair); font-size: 0.9375rem; }
.rides__list a { font-weight: 700; }
.ride__tag {
  display: inline-block; margin-left: 0.4rem; font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--paper-sunk); padding: 0.05rem 0.3rem;
}
.ride__tag--kind { border-color: var(--red); color: var(--red); }
.rides__none { color: var(--ink-soft); font-size: 0.9375rem; }
.rides__note {
  margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--ink-soft);
  border-top: var(--rule-hair); padding-top: 0.6rem;
}
.nodata { margin-top: 1.25rem; font-size: 0.875rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- full-red ground block ---------- */
.ground {
  background: var(--red); color: var(--paper);
  margin-top: 3rem; padding-block: 2rem;
  border-top: var(--rule-heavy); border-bottom: var(--rule-heavy);
}
.ground a { color: var(--paper); }
.ground a:hover { color: var(--ink); }
.ground__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 11vw, 4.5rem);
  line-height: 0.88; text-transform: uppercase; margin: 0;
}
.ground__body { max-width: var(--measure); margin: 0.9rem 0 0; }

/* ---------- footer ---------- */
.foot { border-top: var(--rule-heavy); margin-top: 3rem; padding-block: 1.5rem 3rem; font-size: 0.875rem; }
.foot p { margin: 0 0 0.6rem; max-width: var(--measure); }
.foot__mark { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.75rem; }
.foot__meta { color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.06em; }

/* ---------- sources page ---------- */
.sources-table { margin-top: 1.5rem; }
.entry {
  border-top: var(--rule); padding: 0.85rem 0 1.1rem;
  scroll-margin-top: 4.5rem;
}
.entry__head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.entry__text { margin: 0.55rem 0 0; max-width: var(--measure); }
.entry__links { margin: 0.55rem 0 0; font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.entry__card { color: var(--red); font-weight: 700; }
.credits { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.credits li { border-top: var(--rule-hair); padding: 0.55rem 0; font-size: 0.8125rem; max-width: var(--measure); }
.credits b { font-weight: 700; }

/* ---------- wider than a phone ---------- */
@media (min-width: 46rem) {
  body { font-size: 1.125rem; }
  .record__list { padding-left: 2.5rem; }
  .record__list > li::before { left: -2.5rem; }
  .card__figure--wide { margin-inline: 0; }
  .rides { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .countdown { gap: 0 1.75rem; }
  .card__meta { grid-template-columns: 9rem 1fr; }
}

@media (min-width: 62rem) {
  .hero { padding-block: 2.5rem 3rem; }
  .card--portrait { display: grid; grid-template-columns: 22rem 1fr; gap: 1.5rem; align-items: start; }
  .card--portrait .card__stamp { grid-column: 1 / -1; }
  .card--portrait .card__figure { margin-top: 0.85rem; }
  .card--portrait .card__body { min-width: 0; }
}

/* ---------- motion, guarded twice ---------- */
@keyframes settle {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tick { from { opacity: 0.45; } to { opacity: 1; } }

/* No-JS, no-scroll-timeline browsers get the finished state and nothing else. */
.record__ink { transform: scaleY(1); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .record__ink {
      animation: draw linear both;
      animation-timeline: view(block);
      animation-range: entry 90% exit 10%;
    }
    .countdown__n {
      animation: tick linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .record__ink { transform: scaleY(1); }
}

@media print {
  .strip, .share-btn, .pass__btn { display: none; }
  body { background: #fff; }
}

/* ---------- official links, rendered from data/resources.json ---------- */
.official {
  margin-top: 2rem; border-top: var(--rule); padding-top: 0.85rem;
  max-width: var(--measure);
}
.official__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  text-transform: uppercase; line-height: 0.95; margin: 0;
}
.official__note { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.official__list { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.official__list li {
  border-top: var(--rule-hair); padding: 0.55rem 0; font-size: 0.9375rem;
}
.official__list a { font-weight: 700; display: block; }
.official__list span { color: var(--ink-soft); font-size: 0.875rem; }

/* ---------- rides ---------- */
.rides__body { margin: 0 0 0.9rem; font-size: 0.9375rem; }
.rides__list--pending a { font-weight: 600; }
.rides__list--pending li { color: var(--ink-soft); }

/* ---------- the paired cards ---------- */
/* October 26, 2025: ban early voting. November 25, 2025: vote early. The two
   cards carry the same red rule and point at each other, and that is the whole
   comment the site makes about them. */
.card[data-pair] {
  border-left: 4px solid var(--red);
  padding-left: 0.9rem;
  margin-left: -0.9rem;
}
.card__pairtag {
  color: var(--red);
  letter-spacing: 0.18em;
}
.card__pairtag::before { content: "\2022"; margin-right: 0.45rem; }
.card__pairlink { color: var(--red); font-weight: 700; }

/* ---------- the two poster cards ---------- */
/* PRD section 5 names these the strongest entries on the page. They break the
   column, run on red, and set the pull as large as the viewport allows. */
.card[data-feature="true"] {
  background: var(--red);
  color: var(--paper);
  border-top: 9px solid var(--ink);
  border-bottom: 9px solid var(--ink);
  border-left: 0;
  margin-left: -1.25rem;
  margin-right: calc(-1 * var(--gut));
  padding: 0.85rem var(--gut) 1.25rem 1.25rem;
}
.card[data-feature="true"] .card__type { background: var(--paper); color: var(--red); }
.card[data-feature="true"] .card__date { color: var(--paper); }
.card[data-feature="true"] .card__figure { background: var(--red); }
/* Ink dots stay ink, the halftone's paper ground lets the red through. That is
   the overprint, done in the browser the same way the pipeline does it. */
.card[data-feature="true"] .card__figure img { mix-blend-mode: multiply; }
.card[data-feature="true"] .card__pull {
  font-size: clamp(2.6rem, 15vw, 6.5rem);
  line-height: 0.84;
  margin-top: 1rem;
}
.card[data-feature="true"] .card__quote,
.card[data-feature="true"] .card__line {
  border-left-color: var(--paper);
  font-size: 1.125rem;
}
.card[data-feature="true"] .card__meta { border-top-color: var(--paper); }
.card[data-feature="true"] .card__meta dt { color: var(--paper); opacity: 0.75; }
.card[data-feature="true"] a { color: var(--paper); }
.card[data-feature="true"] a:hover { color: var(--ink); }
.card[data-feature="true"] .card__archive { color: var(--paper); opacity: 0.8; }
.card[data-feature="true"] .share-btn { color: var(--paper); border-color: var(--red-deep); }
.card[data-feature="true"] .share-btn:hover { color: var(--ink); border-color: var(--ink); }

@media (min-width: 46rem) {
  .card[data-feature="true"] { margin-left: -2rem; padding-left: 2rem; }
}
@media (min-width: 62rem) {
  /* The poster cards keep one column: the portrait is the top of the poster,
     not a sidebar next to it. */
  .card--portrait[data-feature="true"] { display: block; }
}

/* ---------- the receipt above the fold ---------- */
/* Same poster treatment as the two feature cards in the wall, cut down to fit
   between the setup paragraph and the countdown. The full card stays below. */
.receipt {
  margin: 1.75rem calc(-1 * var(--gut)) 0;
  padding: 0.75rem var(--gut) 1rem;
  background: var(--red);
  color: var(--paper);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
}
.receipt__label {
  margin: 0;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.receipt__pull {
  font-family: var(--display);
  font-size: clamp(2rem, 10vw, 3.75rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}
.receipt__quote {
  margin: 0.75rem 0 0;
  max-width: var(--measure);
  border-left: 3px solid var(--paper);
  padding-left: 0.85rem;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.receipt__quote p { margin: 0; }
.receipt__meta {
  margin: 0.7rem 0 0;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.receipt__link { margin: 0.5rem 0 0; display: inline-block; color: var(--paper); font-weight: 700; font-size: 0.875rem; }
.receipt__link:hover { color: var(--ink); }

@media (min-width: 46rem) {
  .receipt { margin-inline: 0; padding-inline: 1.25rem; }
}

/* ---------- the rules, today ---------- */
/* Set like a form field on purpose. The most volatile fact on the site is the
   one that has to carry the day it was checked. */
.status {
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  border: var(--rule);
  background: var(--paper-sunk);
  padding: 0.75rem 0.9rem 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.status__stamp {
  display: block;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  border-bottom: var(--rule-hair);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
.status__line a { font-weight: 700; }

/* ---------- send this to your group chat ---------- */
/* The polling-place block. Red rule and a heavier top border, because it is
   the one part of section D a reader may need to find again in a hurry. */
.safety {
  margin-top: 2rem;
  border-top: 4px solid var(--red);
  padding-top: 0.85rem;
  max-width: var(--measure);
}
.safety__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  text-transform: uppercase; line-height: 0.95; margin: 0;
}
.safety__body { margin: 0.7rem 0 0; font-size: 1rem; line-height: 1.5; }
.safety__list { margin: 1rem 0 0; padding-left: 1.1rem; }
.safety__list li { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.5; }
.safety__hotline {
  margin: 1.1rem 0 0.4rem;
  padding: 0.7rem 0.85rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.safety__hotline strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.01em; }

.pass {
  margin-top: 2rem;
  border-top: var(--rule);
  padding-top: 0.85rem;
  max-width: var(--measure);
}
.pass__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  text-transform: uppercase; line-height: 0.95; margin: 0;
}
.pass__note { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.pass__box {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  font-family: var(--doc);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-sunk);
  border: var(--rule);
  padding: 0.75rem 0.9rem;
  resize: vertical;
  /* Where it is supported the box sizes to the message; everywhere else the
     rows attribute holds it open far enough that nothing is cut off. */
  field-sizing: content;
}
.pass__box:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.pass__btn {
  margin-top: 0.75rem;
  font: inherit;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: var(--rule);
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.pass__btn:hover { background: var(--red); border-color: var(--red); }
.pass__btn[data-done="true"] { background: var(--red); border-color: var(--red); }

/* ---------- the line the section exits on ---------- */
.exit {
  margin: 2rem 0 0;
  border-top: var(--rule-heavy);
  padding-top: 0.85rem;
  max-width: var(--measure);
  font-size: 1.125rem;
  font-weight: 600;
}

/* ---------- context kicker ---------- */
/* One factual clause above the pull, so a quote that needs a room to make
   sense gets one. Documentary voice, never the display face. */
.card__context,
.receipt__context,
.entry__context {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: var(--measure);
  border-left: 3px solid var(--paper-sunk);
  padding-left: 0.65rem;
}
.card__context + .card__pull,
.receipt__context + .receipt__pull { margin-top: 0.5rem; }
.receipt__context { color: var(--paper); border-left-color: var(--paper); opacity: 0.9; }
.card[data-feature="true"] .card__context { color: var(--paper); border-left-color: var(--paper); opacity: 0.9; }
.entry__context { margin: 0.5rem 0 0; }

/* ---------- nothing on a card is allowed to clip ---------- */
/* A card is the shareable unit, so a long name, a long role, or a long
   source has to wrap rather than disappear off the edge. */
.card, .card__body, .receipt, .entry { overflow: visible; }
.card__pull, .receipt__pull, .path__title, .marker__title, .ground__title {
  overflow-wrap: break-word;
  word-break: normal;
}
.card__quote p, .card__line, .entry__text p, .card__meta dd, .card__foot,
.entry__head span, .official__list span { overflow-wrap: anywhere; }
.card__foot a, .entry__links a { overflow-wrap: anywhere; }

/* ---------- share control ---------- */
.strip__share {
  margin-left: 0.9rem;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: underline;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.strip__share:hover { color: var(--ink); }
@media (max-width: 26rem) { .strip__share { margin-left: auto; } }

.share {
  border: var(--rule);
  background: var(--paper-sunk);
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.5rem;
  max-width: var(--measure);
  scroll-margin-top: 4.5rem;
}
.share__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 6.5vw, 2.25rem);
  text-transform: uppercase; line-height: 0.95; margin: 0;
}
.share__note { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.share__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  margin: 0.9rem 0 0;
}
.share__btn {
  font: inherit; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: var(--rule); padding: 0.55rem 0.9rem; cursor: pointer;
}
.share__btn:hover { background: var(--red); border-color: var(--red); }
.share__btn[data-done="true"] { background: var(--red); border-color: var(--red); }
.share__link { font-weight: 700; font-size: 0.9375rem; }

/* ---------- your state's dates ---------- */
.states__lede { max-width: var(--measure); margin: 1rem 0 0; }
.states__jump {
  margin: 1.25rem 0 0; border: var(--rule); background: var(--paper-sunk);
  padding: 0.75rem 0.9rem 0.85rem; max-width: var(--measure);
}
.states__jump label {
  display: block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.states__jump select {
  font: inherit; font-size: 1rem; width: 100%;
  background: var(--paper); color: var(--ink);
  border: var(--rule); padding: 0.55rem 0.6rem;
}
.states__jump select:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.states__index { margin: 1.25rem 0 0; border-top: var(--rule); padding-top: 0.75rem; }
.states__index ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.states__index a {
  display: block; min-width: 2.6rem; text-align: center;
  border: 2px solid var(--paper-sunk);
  padding: 0.35rem 0.3rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-decoration: none;
}
.states__index a:hover { border-color: var(--red); color: var(--red); }

.states { margin-top: 1.5rem; }
.state { border-top: var(--rule); scroll-margin-top: 4.5rem; }
.state:last-child { border-bottom: var(--rule); }
.state__summary {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.65rem 0; cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.state__summary::-webkit-details-marker { display: none; }
.state__summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--red);
}
.state[open] .state__summary::after { content: "\2013"; }
.state__summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.state__abbr {
  font-family: var(--display); font-size: 1.25rem; line-height: 1;
  color: var(--red); min-width: 2.4rem;
}
.state__name {
  font-family: var(--display); font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -0.005em;
}
.state__body { padding: 0 0 1.1rem; max-width: var(--measure); }
.state__dl {
  margin: 0; display: grid; grid-template-columns: 1fr;
  gap: 0.15rem; font-size: 0.9375rem;
}
.state__dl dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  border-top: var(--rule-hair); padding-top: 0.5rem; margin-top: 0.4rem;
}
.state__dl dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.state__note { display: block; color: var(--ink-soft); font-size: 0.875rem; }
.state__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0.9rem 0 0; }
.state__links a { font-weight: 700; font-size: 0.9375rem; }
.state__conf {
  margin: 0.8rem 0 0; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.state__sources { margin: 0.4rem 0 0; font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.state__sources a { color: var(--ink-soft); }
.states__pending {
  margin: 1.25rem 0 0; max-width: var(--measure);
  border: var(--rule); background: var(--paper-sunk); padding: 0.85rem 0.9rem;
  font-size: 0.9375rem;
}

/* A link to a closed state opens it where the browser supports it, so the
   index works with JavaScript turned off. */
@supports selector(::details-content) {
  .state:target::details-content { content-visibility: visible; }
}

@media (min-width: 46rem) {
  .state__dl { grid-template-columns: 13rem 1fr; gap: 0 1rem; }
  .state__dl dt { grid-column: 1; }
  .state__dl dd { grid-column: 2; border-top: var(--rule-hair); padding-top: 0.5rem; margin-top: 0.4rem; }
}

/* ---------- graphics page ---------- */
.gfx { margin-top: 2.5rem; border-top: var(--rule-heavy); padding-top: 0.75rem; }
/* The band that opens an alternate domain's set. It carries no thumbnails of
   its own; it names what the files under it say and why they are separate. */
.gfx--alt { margin-top: 3.5rem; }
.gfx__note {
  max-width: var(--measure);
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}
.gfx__title {
  font-family: var(--display); font-size: clamp(1.9rem, 9vw, 3.25rem);
  text-transform: uppercase; line-height: 0.9; margin: 0;
}
.gfx__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 2rem; }
.gfx__item { border-top: var(--rule); padding-top: 0.75rem; }
.gfx__thumb { display: block; background: var(--paper-sunk); border: var(--rule); }
.gfx__thumb img { width: 100%; height: auto; }
.gfx__name { margin: 0.6rem 0 0; font-family: var(--display); font-size: 1.375rem; text-transform: uppercase; line-height: 1; }
.gfx__meta { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.gfx__links { margin: 0.5rem 0 0; font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
/* Every size of one creative, hung off its card. The card carries a single
   preview; these are the actual files. */
.gfx__sizes { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.gfx__sizes li { border-top: var(--rule-hair); }
.gfx__sizes a {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline;
  padding: 0.45rem 0; font-size: 0.875rem; text-decoration: none;
}
.gfx__sizes a:hover strong, .gfx__sizes a:focus-visible strong { color: var(--red); }
.gfx__sizes strong { font-variant-numeric: tabular-nums; text-decoration: underline; }
.gfx__sizes span { color: var(--ink-soft); }

/* The set switch. Hidden until share.js unhides it, because with no script
   every set is on the page already and a control that does nothing is worse
   than no control. */
.gfxsw { margin-top: 1.5rem; }
.gfxsw[hidden] { display: none; }
.gfxsw__label { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }
.gfxsw__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gfxsw__btn {
  font: inherit; font-weight: 700; font-size: 0.9375rem;
  padding: 0.5rem 0.9rem; cursor: pointer;
  background: transparent; color: var(--ink);
  border: var(--rule);
}
.gfxsw__btn:hover { border-color: var(--red); color: var(--red); }
.gfxsw__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gfxsw__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.gfxset[hidden] { display: none; }
/* With the switch live a set opens at the top of the page, so the heading that
   named it in the stacked version is redundant. */
.gfxsw:not([hidden]) ~ .gfxset .gfx--alt { display: none; }
.gfx__links a { font-weight: 700; }
.gfx__pending {
  margin: 1.5rem 0 0; max-width: var(--measure);
  border: var(--rule); background: var(--paper-sunk); padding: 0.85rem 0.9rem;
}
@media (min-width: 46rem) { .gfx__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .gfx__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- the per-card stub pages ---------- */
.stub { padding-block: 3rem; }
.stub__title {
  font-family: var(--display); font-size: clamp(2.2rem, 11vw, 4.5rem);
  text-transform: uppercase; line-height: 0.88; margin: 0;
}
.stub__line { margin: 1rem 0 0; max-width: var(--measure); color: var(--ink-soft); }
.stub__link { margin: 1.25rem 0 0; font-weight: 700; }

/* ---------- print ---------- */
/* The cards are the point of a printout, so they get the paper and everything
   that only works on a screen goes away. */
@media print {
  .strip, .share-btn, .pass__btn, .pass, .share, .skip,
  .states__jump, .states__index, .record__track, .record__ink { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  a { color: #000; text-decoration: none; }
  .card, .state, .entry, .path, .gfx__item { break-inside: avoid; page-break-inside: avoid; }
  .card { border-top: 2pt solid #000; border-bottom: 0; }
  .card[data-feature="true"] {
    background: #fff; color: #000; border: 2pt solid #000;
    margin-inline: 0; padding-inline: 0.5rem;
  }
  .card[data-feature="true"] .card__type { background: #000; color: #fff; }
  .card[data-feature="true"] .card__date,
  .card[data-feature="true"] a,
  .card[data-feature="true"] .card__meta dt { color: #000; opacity: 1; }
  .card[data-feature="true"] .card__figure img { mix-blend-mode: normal; }
  .card[data-overprint="true"] .card__figure::after { display: none; }
  .card__figure { max-width: 2.6in; overflow: visible; }
  .card__foot a::after, .entry__links a::after {
    content: " " attr(href); font-size: 8pt; color: #444; overflow-wrap: anywhere;
  }
  .ground { background: #fff; color: #000; border-block: 2pt solid #000; }
  .ground a { color: #000; }
  .record__list { padding-left: 0; }
  .record__list > li::before { display: none; }
}
@supports selector(::details-content) {
  @media print { .state::details-content { content-visibility: visible; } }
}