/* Unmapped News by email: the sign-up blocks (src/newsletter.js, worker/newsletter.ts) on the /news pages, on top of
   styles.css and news.css. Three sizes: big at the bottom of the front page (a dark band, like the tools' call to
   action), compact at the end of a story, and plain on /news/newsletter. Phones first: the field and button stack
   and fill the width, and the field's text is 16px so iPhones don't zoom in on it. */

.nl { color: var(--ink); }
.nl h2 { margin: 0; color: inherit; letter-spacing: -.03em; text-wrap: balance; }
.nl-what { margin: 10px 0 0; line-height: 1.5; color: var(--ink-2); }
.nl-form { margin: 0; }
.nl-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: .9rem; }
.nl-row { display: flex; gap: 10px; }
.nl-row input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: 400 16px/1.3 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nl-row input::placeholder { color: var(--ink-3); opacity: .75; }
.nl-row input:hover { border-color: var(--ink-3); }
.nl-row input:focus { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.nl-row input[aria-invalid=true] { border-color: var(--flag); }
.nl-row .btn { flex: none; min-height: 52px; padding: 0 26px; font-size: 1rem; }
.nl-msg { margin: 10px 0 0; font-weight: 600; font-size: .92rem; line-height: 1.45; color: var(--flag); }
.nl-msg:empty { display: none; }
.nl-fine { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-3); }
.nl-fine a { color: var(--ink-2); }
/* Sent: what happens next, in place of the form. */
.nl-done:focus { outline: none; }
.nl-done-h { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 650; font-size: 1.25rem; letter-spacing: -.02em; }
.nl-done-h::before { content: '✓'; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-strong); color: var(--on-accent); font-size: .8rem; }
.nl-done p:not(.nl-done-h) { margin: 8px 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.nl-done b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.nl-done .link { min-height: 40px; margin-top: 4px; }

/* Big: the bottom of the front page. */
.nl-big { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: end; margin-top: clamp(40px, 8vh, 72px); padding: clamp(28px, 5vw, 56px); border-radius: var(--r-md); background: var(--core); color: var(--on-core); }
.nl-big h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.nl-big .nl-what { max-width: 38ch; margin-top: 14px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--on-core-2); }
.nl-big .nl-row input { border-color: transparent; }
.nl-big .nl-row input:focus { border-color: var(--accent); }
.nl-big .nl-row input[aria-invalid=true] { border-color: var(--flag); }
.nl-big .btn-ink { background: var(--accent-strong); color: var(--on-accent); }
.nl-big .btn-ink:hover { background: color-mix(in srgb, var(--accent-strong) 85%, #fff); }
.nl-big .nl-msg { color: #ff8f86; }
.nl-big .nl-fine, .nl-big .nl-done p:not(.nl-done-h) { color: var(--on-core-2); }
.nl-big .nl-fine a, .nl-big .nl-done b, .nl-big .nl-done .link { color: var(--on-core); }
.nl-big :focus-visible { outline-color: var(--accent); }

/* Compact: the end of a story, the width of its text. */
.nl-compact { max-width: 680px; margin: 2.6em auto 0; padding: 22px 24px 24px; border-top: 3px solid var(--ink); background: var(--surface); }
.nl-compact h2 { font-size: 1.4rem; line-height: 1.15; }
.nl-compact .nl-what { margin-bottom: 16px; font-size: .95rem; }

/* /news/newsletter */
.nl-page { margin: 0 0 2.2em; padding: 22px 24px 24px; border: 1px solid var(--rule); border-top: 3px solid var(--ink); background: var(--surface); }
.nl-note { margin: 0 0 2em; padding: 16px 20px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); }
.nl-note p { margin: 0; }
.nl-note p + p { margin-top: 6px; color: var(--ink-2); }
.post-body .nl-recent { margin: 0 0 1.15em; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.post-body .nl-recent li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.nl-recent a { display: block; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.nl-recent a:hover { text-decoration: underline; }
.nl-recent span { display: block; margin-top: 2px; font-size: .84rem; color: var(--ink-3); }

@media (max-width: 760px) {
  /* Edge to edge on phones, so it reads as the page's last word before the footer. */
  .nl-big { grid-template-columns: 1fr; gap: 22px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 32px var(--gutter) 34px; border-radius: 0; }
  .nl-compact, .nl-page { padding: 20px 18px 22px; }
}
@media (max-width: 520px) {
  .nl-row { flex-direction: column; }
  .nl-row .btn { width: 100%; }
}