/* Paid For By — one stylesheet, no build step.
   Phone first: everything below is written for a 320px screen and widens.

   The look is "Fine Print" (approved 22 Sept 2026): newsprint paper, black
   ink, square corners, big condensed headlines, and Popular Information's
   orange used only as a fill — the blank in the logo, the camera button,
   ticks and bullets — never as small text on paper. Labels are sentence case;
   nothing small is set in letter-spaced capitals. */

/* ---------------------------------------------------------------- fonts --- */
/* Both are served from this site, not from Google, so a visitor's browser
   makes no outside request for them. Both are under the SIL Open Font License;
   the license texts sit beside the files in static/fonts/. One variable file
   each, Latin only: anything outside it falls back to the system font. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;

  --bg: #F2F1ED;            /* paper */
  --ink: #121212;
  --ink-2: #3F3E3B;         /* secondary text */
  --muted: #6A6964;
  --line: #D8D6CF;          /* hairline rules */
  --soft: #E9E8E2;          /* panels: tips, quotes */
  --panel: #FBFBF9;         /* fields and the sponsor card */
  --field-line: #BDBBB3;
  --orange: #FF6E0E;        /* Popular Information orange: fills only */
  --orange-ink: #121212;    /* text on an orange fill */
  --link: #B84A00;          /* the orange, dark enough to read as text */
  --btn: #121212;           /* the black button */
  --btn-ink: #FFFFFF;
  --focus: #121212;
  --ok: #1D6B3F;
  --ok-bg: #E2EFE6;
  --err: #9B2317;
  --err-bg: #F6E3DF;

  /* Older names, still read by the gallery and the back office. */
  --brand: var(--orange);
  --brand-ink: var(--orange-ink);
  --radius: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413;
    --ink: #EEECE6;
    --ink-2: #C9C6BD;
    --muted: #9B988F;
    --line: #34332F;
    --soft: #201F1C;
    --panel: #1B1A18;
    --field-line: #57554F;
    --link: #FF9A57;
    --btn: #EEECE6;
    --btn-ink: #141413;
    --focus: #EEECE6;
    --ok: #8FD6AD;
    --ok-bg: #1B2F24;
    --err: #FFAB9F;
    --err-bg: #34211E;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Anything the page or its script hides stays hidden, whatever display its
   class would otherwise give it. */
[hidden] { display: none !important; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 10;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 14px;
}

/* ------------------------------------------------------------- chrome ---- */
/* The header's contents line up with the reading column below them. */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 16px max(20px, calc((100% - 34rem) / 2 + 20px));
  border-bottom: 1px solid var(--ink);
}

/* The logo: the name in one ruled box, then an orange blank sitting on the
   baseline — a disclaimer waiting to be filled in. */
.logo {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  padding: 6px 10px 5px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.logo .name {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-blank {
  display: inline-block;
  align-self: flex-end;
  width: 30px;
  height: 2px;
  background: var(--orange);
  margin: 0 0 3px 7px;
}
.logo:hover { color: var(--ink); }

header.site .byline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* Popular Information's wordmark, 22px tall. The name is real text, pushed
   out of its box and replaced by the picture. */
.pi-wordmark {
  display: block;
  width: 86px;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
  color: transparent;
  font-weight: 400;
  background: url("brand/pi-wordmark-dark.png") left center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .pi-wordmark { background-image: url("brand/pi-wordmark-light.png"); }
}
@media (forced-colors: active) {
  .pi-wordmark { width: auto; height: auto; text-indent: 0; background: none; color: CanvasText; }
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 36px 20px 48px;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 24px max(20px, calc((100% - 34rem) / 2 + 20px)) 32px;
  font-size: 13px;
  color: var(--muted);
}
footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 10px;
}
footer.site nav a { padding: 4px 0; }
footer.site .fine { margin: 0; }

/* ------------------------------------------------------------ typography - */
/* Headlines are the only big capitals on the site: Archivo, narrowed. */
h1 {
  font-family: var(--display);
  font-stretch: 70%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 16px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
}
h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 14px; }
.lede { font-size: 19px; line-height: 1.45; color: var(--ink); }
.fine { font-size: 13px; line-height: 1.45; color: var(--muted); }
.fine.centered { text-align: center; }
.hint { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 8px 0 0; }
.hint:empty { margin: 0; }
.optional { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- hero --- */
.hero h1 { font-size: clamp(42px, 13.3vw, 52px); line-height: 1; }
.hero .lede { margin-bottom: 16px; }
.hero > p:not(.lede) { font-size: 16px; color: var(--ink-2); margin-bottom: 28px; }
.steps, .ticks { padding-left: 1.2em; margin: 0 0 16px; }
.steps li, .ticks li { margin-bottom: 10px; }
.ticks { list-style: none; padding-left: 0; }
.ticks li {
  padding-left: 26px;
  position: relative;
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.promises, .how {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 24px;
}
.promises p { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; }
.promises p.fine { font-size: 13px; color: var(--muted); margin: 0; }

/* -------------------------------------------------------------- buttons -- */
/* Black is the button that sends. Orange is the camera. Outlined is the
   quieter choice beside either. Square, and a full thumb's height. */
.cta, .ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  border-radius: 0;
  border: 1px solid var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
  font: 600 17px/1.25 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}
.cta:hover { color: var(--btn-ink); filter: brightness(1.25); }
/* Every orange button is a <label> that opens the camera. */
label.cta {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
  font-weight: 700;
}
label.cta:hover { color: var(--orange-ink); filter: brightness(1.05); }
.cta.send { min-height: 58px; font-size: 18px; }
.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  min-height: 50px;
  font-size: 16px;
}
.ghost:hover { color: var(--ink); background: var(--soft); }
button[disabled], .cta[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* ---------------------------------------------------------------- forms -- */
.form-page { max-width: none; }
.field {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 20px 0 0;
}
.field:first-of-type { margin-top: 0; }
.field input, .field textarea {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 8px;
  padding: 0 14px;
  font: 400 17px/1.4 var(--sans);   /* 17px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--field-line);
  border-radius: 0;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 86px; }

/* The newsletter box: a plain checkbox and its sentence, no frame. */
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.check label { cursor: pointer; }
.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--orange);
}

button.linkish {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
button.linkish:hover { color: var(--ink); }

/* "Sending as j•••@example.com · Not you?" — one line above the form for a
   browser the site already knows. The "Not you?" button is its own form, so it
   is laid out inline to read as part of the sentence. */
.sending-as {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
/* One sentence that wraps like a sentence. The separator rides on the end of
   the address, so a narrow phone breaks after it rather than starting the next
   line with a stray dot. */
.sending-as .who { margin-right: 3px; }
.sending-as strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sending-as .forget-form { display: inline; margin: 0; }

.errors {
  background: var(--err-bg);
  border: 1.5px solid var(--err);
  padding: 12px 14px 12px 4px;
  margin: 0 0 20px;
  color: var(--err);
  font-size: 15px;
}
.errors ul { margin: 0; padding-left: 26px; }
.errors li + li { margin-top: 6px; }

/* --------------------------------------------------------------- upload -- */
.tips {
  list-style: none;
  margin: 24px 0 0;
  padding: 16px;
  background: var(--soft);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.tips li { position: relative; padding-left: 16px; }
.tips li + li { margin-top: 10px; }
.tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.step {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 20px 0 10px;
}
.count { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

.pages {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.pages:empty { display: none; }
.pages li {
  position: relative;
  border: 1px solid var(--field-line);
  overflow: hidden;
  background: var(--panel);
}
.pages img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
}
.pages .label {
  display: block;
  padding: 5px 7px;
  font-size: 12px;
  color: var(--muted);
}
.pages .remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(18, 18, 18, 0.78);
  color: #fff;
  font-size: 19px;
  line-height: 34px;
  cursor: pointer;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.capture { display: flex; flex-direction: column; gap: 10px; }

.form-page > .cta.send { margin-top: 20px; }

.progress { margin-top: 16px; }
.progress progress {
  display: block;
  width: 100%;
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink);
  background: var(--panel);
  accent-color: var(--orange);
}
.progress progress::-webkit-progress-bar { background: var(--panel); }
.progress progress::-webkit-progress-value { background: var(--orange); }
.progress progress::-moz-progress-bar { background: var(--orange); }
.progress .fine { margin-top: 6px; }

/* --------------------------------------------------------------- thanks -- */
/* The result page is one column with even spacing between its parts. */
.thanks { display: flex; flex-direction: column; gap: 22px; }
.thanks > * { margin: 0; }
/* "Our team reviews every submission…" closes the page at reading size. */
.thanks > p.fine:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.received {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.thanks > .received + h1 { margin-top: -6px; }

/* ---------------------------------------------------------------- prose -- */
/* Terms, privacy, corrections: long reading, so a comfortable measure. */
.prose { max-width: 65ch; }
.prose h1 { font-size: 40px; margin-bottom: 20px; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--muted); }
.prose p.fine { font-size: 13px; }
.prose blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line);
  color: var(--ink-2);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 16px;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--soft); font-size: 14px; font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.prose code {
  background: var(--soft);
  padding: 1px 5px;
  font-size: 0.92em;
}

@media (min-width: 640px) {
  main { padding: 48px 24px 72px; }
  header.site, footer.site {
    padding-left: max(24px, calc((100% - 34rem) / 2 + 24px));
    padding-right: max(24px, calc((100% - 34rem) / 2 + 24px));
  }
  h1 { font-size: 52px; }
  .hero h1 { font-size: 60px; }
  .prose h1 { font-size: 48px; }
}

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

/* ------------------------------------------------------- sponsor card --- */
/* Phone first: this whole card has to read at 320px. Nothing depends on
   color alone — every state is also stated in words. The card is a ruled
   sheet: a header with the name, then the facts, label left and figure
   right, with hairlines between rows. */
.sponsor-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--ink);
  color: var(--ink);
  margin: 0;
  overflow: hidden;
}
.sponsor-card > header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.sponsor-card > header > * { margin: 0; }
/* The small "Paid for by" box is the logo without its blank, so it keeps the
   logo's capitals. */
.sponsor-card .paid-for-by {
  border: 1.5px solid var(--ink);
  padding: 6px 10px 5px;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.sponsor-card h2 {
  font-family: var(--display);
  font-stretch: 70%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 40px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.sponsor-card .registered-as {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: -4px;
  overflow-wrap: anywhere;
}
.sponsor-card > header .fine a { color: var(--ink); }
.sponsor-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.card-block { padding: 0 20px; margin-top: 22px; }
.card-block p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.card-block p:last-child { margin-bottom: 0; }
.card-block p.fine { font-size: 13px; color: var(--muted); }
.sponsor-card .type-label { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.sponsor-card .network { font-size: 14px; font-weight: 600; color: var(--link); margin-top: 10px; }
.sponsor-card .lean { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }

.money { margin: 0 0 8px; }
.money:last-child, .sources:last-child { margin-bottom: 0; }
.money .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.money dt { color: var(--ink-2); font-size: 15px; }
.money dd {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.money dd .fine { display: block; font-weight: 400; font-size: 12px; }

.candidates { margin: 8px 0 0; padding-left: 18px; }
.candidates li { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-bottom: 6px; }

.sources { list-style: none; margin: 0 0 8px; padding: 0; }
.sources li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 3px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.sources .source-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sources .source-amount {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sources .fine { display: block; grid-column: 1 / -1; }
.sources .opaque { font-style: italic; }

.read-from .disclaimer {
  margin: 6px 0 8px;
  padding: 10px 12px;
  background: var(--soft);
  border-left: 3px solid var(--field-line);
  font-size: 14px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 22px 20px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-foot p { margin: 0; font-size: 12px; }
.card-foot a { color: var(--ink); }

.share { display: flex; flex-direction: column; gap: 6px; }
.share .share-link {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 400;
}
.share .share-btn:not([hidden]) + .share-link { display: none; }
.share .share-status:empty { display: none; }

/* the "reading your mailer" state */
.reading {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.3em;
  vertical-align: 0.08em;
  border: 3px solid var(--orange);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .reading { animation: none; border-top-color: var(--orange); opacity: 0.5; }
}

/* The terms notice under the newsletter box. It is the only place a
   contributor is told they are agreeing to anything, so it stays in full ink
   at a reading size rather than gray fine print. */
.terms-notice {
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  margin: 20px 0 0;
}
.terms-notice a { font-weight: 600; }

/* ------------------------------------------------- photograph the back --- */
/* The single most valuable sentence on the upload page: more than half of the
   mail people photograph shows only the front, and the disclaimer almost never
   is on the front. Full reading size, not fine print. */
.why-back {
  font-size: 16px;
  color: var(--ink);
  background: var(--soft);
  border-left: 4px solid var(--orange);
  padding: 12px 14px;
  margin: 10px 0 0;
}
.one-page-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 16px;
  margin: 16px 0 0;
}
.one-page-check p { margin: 0; }
.one-page-check #one-page-question { font-weight: 700; font-size: 17px; }

/* --------------------------------------------- reading-in-progress steps --- */
/* Real stages, in the order they happen. No percentage: we do not know one, and
   inventing one is a small lie told every ten seconds. */
.progress-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.progress-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
.progress-steps li.doing { color: var(--ink); font-weight: 600; }
.progress-steps li.done { color: var(--ink-2); }
.progress-steps li.done .tick { color: var(--orange); font-weight: 700; }
.progress-steps .tick { width: 1em; text-align: center; }

/* ---------------------------------------------------- add the other side --- */
.add-other-side {
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 20px;
}
.add-other-side h2 { font-size: 19px; margin: 0 0 8px; }
.add-other-side p { margin: 0 0 10px; color: var(--ink-2); }
.add-other-side form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.add-other-side form .fine { margin: 0; }
.add-other-side form .fine:empty { display: none; }
.add-other-side > p.fine:last-child { margin: 0; color: var(--muted); }

/* A 404 and anything else built as a one-heading form page. */
.form-page:not(form):not(.thanks) > .cta { margin-top: 8px; }

/* ==================================================== Stage 5: the gallery ==
   The public archive. Wider than the contributor flow (a grid of mail needs
   room) but still written phone-first: one column at 320px, two at 520px,
   three at 880px, four at 1180px. */

main.wide { max-width: 72rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

header.site .site-nav { margin-left: auto; }
header.site .site-nav a { font-size: 15px; font-weight: 600; }

.secondary-cta { margin-top: 12px; }
/* Small buttons on the gallery pages (the back office sizes its own). */
body:not(.admin) .ghost.sm, body:not(.admin) .cta.sm {
  display: inline-flex; width: auto; min-height: 40px; padding: 8px 14px;
  font-size: 15px;
}
.inline-cta { display: inline-block; width: auto; min-width: 0; min-height: 0;
  padding: 9px 14px; margin: 0; font-size: 15px; }

/* ------------------------------------------------------------- the index -- */
.gallery-head { max-width: 42rem; }
.gallery-head h1 { margin-bottom: 8px; }

.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 22px 20px;
  max-width: 34rem;
}
.empty-state h2 { margin-top: 0; }

.featured { margin-top: 26px; }
.featured h2, .gallery-head + .filters { margin-top: 18px; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 14px 0 20px;
}
@media (min-width: 520px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.piece-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.piece-card .card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.piece-card .card-shot {
  display: block;
  position: relative;
  background: var(--soft);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.piece-card .card-shot img {
  display: block;
  width: 100%; height: 100%;
  /* The whole piece, not a crop of it: this is an archive of mail, and a
     tidier grid is not worth cutting the mailer in half. */
  object-fit: contain;
  object-position: center;
}
.piece-card .card-noshot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--muted); font-size: 14px;
}
.piece-card .badge {
  position: absolute;
  left: 8px; bottom: 8px;
  background: rgba(20, 19, 15, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
}
.piece-card .card-title {
  display: block;
  padding: 12px 14px 2px;
  font-weight: 650;
  font-size: 17px;
  line-height: 1.3;
}
.piece-card .card-link:hover .card-title { text-decoration: underline; }
.piece-card .card-meta {
  margin: 0;
  padding: 4px 14px 14px;
  font-size: 14px;
  color: var(--muted);
}
.piece-card .card-meta span { display: block; }
.piece-card .card-sponsor { color: var(--ink); font-weight: 600; }

.featured-grid .piece-card { border-left: 4px solid var(--brand); }

/* ------------------------------------------------------------- filters --- */
.filters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 10px;
  margin: 18px 0 8px;
}
.filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 14px;
}
@media (min-width: 620px) {
  .filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter.grow { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .filter-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filter.grow { grid-column: auto; }
}
.filter { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.filter span { display: block; margin-bottom: 4px; }
.filter select, .filter input {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--field-line);
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.filter-actions .ghost { margin: 0; width: auto; min-width: 0; min-height: 0;
  padding: 9px 18px; }
.result-count { color: var(--muted); font-size: 15px; margin: 6px 0 0; }

.pager {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 26px;
}
.pager .ghost { margin: 0; width: auto; min-width: 0; min-height: 0; padding: 10px 16px; }
.feed-line { margin-top: 18px; }

/* ----------------------------------------------------- the subscribe box -- */
.subscribe-wrap { margin: 26px 0; }
.subscribe {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 12px;
}
.subscribe .subscribe-head { margin: 0 0 4px; font-size: 19px; }
.subscribe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 6px;
}
.subscribe-row input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 13px 14px;
  font: inherit;
  font-size: 17px;         /* 17px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.subscribe-row .cta.sm {
  width: auto; min-width: 9rem; min-height: 50px;
  margin: 0; padding: 12px 20px;
}

/* -------------------------------------------------------- the piece page -- */
.crumbs { margin: 0 0 10px; font-size: 15px; }
.piece-public-grid { display: block; }
@media (min-width: 1000px) {
  .piece-public-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
    gap: 32px;
    align-items: start;
  }
  .piece-public-grid .shots { position: sticky; top: 14px; }
}
.piece-public h1 { font-size: 36px; margin-bottom: 14px; }
.shot-note { margin-top: 10px; }

.pubviewer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pubviewer-bar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.pubviewer.is-live .pubviewer-bar { display: flex; }
.pubviewer-bar .tool {
  font: inherit;
  font-size: 15px;
  min-width: 34px;
  padding: 4px 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
}
.pubviewer-bar .zoom-level { font-size: 13px; color: var(--muted); min-width: 3.4em;
  text-align: center; }

.pubviewer-stage { position: relative; background: var(--soft); }
.pubviewer.is-live .pubviewer-stage {
  height: min(70vh, 640px);
  overflow: hidden;
  touch-action: pan-y;         /* a finger scrolls the page, until zoomed in */
}
.pubviewer.is-live .pubviewer-stage.is-interactive { touch-action: none; cursor: grab; }
.pubviewer.is-live .pubviewer-stage.is-grabbing { cursor: grabbing; }
.pubviewer-canvas { transform-origin: 0 0; }
.pubviewer.is-live .pubviewer-canvas { position: absolute; top: 0; left: 0; }
.pubviewer .page-img { display: block; max-width: 100%; height: auto; }
.pubviewer.is-live .page-img { max-width: none; }
.pubviewer .page-img + .page-img { margin-top: 10px; }
.pubviewer .page-img.is-hidden { display: none; }
.pubviewer-hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 6px 10px;
  font-size: 13px;
  color: #fff;
  background: rgba(20, 19, 15, 0.7);
  text-align: center;
}
.pubviewer-hint:empty { display: none; }

.pubviewer .filmstrip {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.pubviewer .film {
  flex: 0 0 auto;
  width: 86px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
}
.pubviewer .film.is-on { border-color: var(--brand); }
.pubviewer .film img { display: block; width: 100%; height: 56px; object-fit: cover; }
.pubviewer .film-label { display: block; font-size: 12px; color: var(--muted);
  margin-top: 3px; }

.facts { margin: 0 0 18px; }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--line);
}
.facts dt { color: var(--muted); font-size: 14px; min-width: 8.5rem; }
.facts dd { margin: 0; font-weight: 600; }
.facts dd .fine { display: block; font-weight: 400; }

.judds-note h2, .claims h2, .disclaimer-block h2, .about-archive h2 {
  font-size: 19px;
  color: var(--ink);
  margin: 26px 0 8px;
}
.judds-note p { margin-bottom: 12px; }
.claims ul { margin: 0; padding-left: 1.1em; }
.claims li { margin-bottom: 10px; }
.claims q { color: var(--muted); }
.disclaimer-block .disclaimer {
  margin: 0;
  padding: 10px 12px;
  background: var(--soft);
  border-left: 3px solid var(--field-line);
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 6px;
}
.share-row .ghost { margin: 0; width: auto; min-width: 0; min-height: 0;
  padding: 9px 16px; }
.share-row .share-plain { overflow-wrap: anywhere; }
.share-row .share-plain.is-tucked { display: none; }
.share-row [data-share-status] { width: 100%; margin: 0; }

.about-archive {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 6px;
}
.about-archive ul { padding-left: 1.1em; margin: 0 0 12px; }
.about-archive li { margin-bottom: 6px; }

.prevnext {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 16px;
}
.prevnext .ghost { margin: 0; width: auto; min-width: 0; min-height: 0;
  padding: 10px 16px; max-width: 22rem; }

/* ------------------------------------ the back office's view of this page ---
   The contributor's result page is also served, unchanged, to a signed-in
   reviewer at /admin/piece/<id>/contributor-view, so they can see exactly what
   the person who sent the mail was told. This banner is the only difference,
   and it exists so nobody reads today's FEC dollar figures as the ones that
   were on screen on the day. Nothing below is ever rendered to a contributor:
   the template only prints it when the admin route asks for it. */
.preview-banner {
  max-width: 46rem;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  background: var(--soft);
}
.preview-banner p { margin: 0 0 6px; }
.preview-banner p:last-child { margin-bottom: 0; }
/* The "Add the other side" control is shown in that view so a reviewer can see
   it, and inert so nobody uploads a photograph as somebody else. */
.cta.is-inert { opacity: .55; cursor: default; }