/* Newsletter signup (lib/newsletter.js). One instance per page, before Follow along.
   Text is --paper / --paper2, at or above body-text contrast. Field and button borders
   use --muted or --gold for at least 3:1 against the page. No motion, no popups. */
.newsletter {
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) 0 0;
  border-top: 1px solid #36342f;
  color: var(--paper2);
}
.newsletter h2 {
  margin: 0 0 12px;
  color: var(--paper);
  font: 400 clamp(24px, 2.4vw, 32px)/1.2 Georgia, 'Times New Roman', serif;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.newsletter-line {
  max-width: 62ch;
  margin: 0 0 20px;
  font: 400 17px/1.6 Georgia, 'Times New Roman', serif;
}
.newsletter-form { max-width: 560px; }
.newsletter-form > label {
  display: block;
  margin-bottom: 8px;
  color: var(--paper);
  font: 500 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
}
.newsletter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-row input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: #121514;
  color: var(--paper);
  font: 400 16px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
}
.newsletter-row input[aria-invalid="true"] { border-color: #e2c58f; }
.newsletter-row button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(199, 163, 105, .1);
  color: var(--paper);
  font: 600 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.newsletter-row button:hover { background: rgba(199, 163, 105, .2); }
.newsletter input:focus-visible,
.newsletter button:focus-visible,
.newsletter a:focus-visible {
  outline: 2px solid #e2c58f;
  outline-offset: 3px;
}
.newsletter-note,
.newsletter-status {
  margin: 12px 0 0;
  font: 400 14px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
}
.newsletter-note a { color: var(--paper2); text-underline-offset: 4px; }
.newsletter-note a:hover { color: var(--gold); }
.newsletter-status { color: var(--paper); }
.newsletter-status:empty { margin: 0; }
/* The honeypot: off-screen, out of the tab order and hidden from assistive technology. */
.newsletter-trap {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Follow along sits directly under the form, in the same band. */
.newsletter + .follow-along-band { border-top: 0; padding-top: 28px; }
.public-dossier .newsletter { margin-top: 24px; }
.public-dossier .newsletter + .follow-along-band { margin-top: 0; }
/* Result pages (/api/subscribe without script, /api/confirm). */
.newsletter-page .newsletter { margin-top: 8px; padding-bottom: 8px; }
.newsletter-back { margin-top: 32px; }
.newsletter-confirm { margin: 8px 0 0; }
.newsletter-confirm button {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(199, 163, 105, .1);
  color: var(--paper);
  font: 600 15px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.newsletter-confirm button:hover { background: rgba(199, 163, 105, .2); }
.newsletter-confirm button:focus-visible { outline: 2px solid #e2c58f; outline-offset: 3px; }

@media (max-width: 480px) {
  .newsletter-row button { flex: 1 1 100%; }
}