/* Newsletter band — the green "join our newsletter" section.
   Shared by the home page and About, so it lives in components/ rather than
   either page stylesheet. Any page using it must add
   'components/newsletter.css' to its `css` array. */

.news {
  background: var(--green);
  color: var(--cream);
  /* No bottom padding: the band runs straight into the footer, which is the
     same green, so the two read as one field rather than a band with a seam. */
  padding-block-end: 0;
}
.news .eyebrow { color: rgb(250 247 242 / 0.7); }
.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: var(--space-6);
  align-items: center;
}
/* One pill holding the field and the button, as drawn: a cream hairline ring
   with the button filling its right end. The button is a child of the ring,
   so it has to sit flush — hence the negative inline margin. */
.home-news { margin-top: var(--space-7); max-width: 32rem; }
.home-news-pill {
  display: flex;
  align-items: center;
  padding: 4px;
  padding-inline-start: 1.6rem;
  border: 1px solid rgb(250 247 242 / 0.5);
  border-radius: var(--radius-pill);
}
.home-news input[type=email] {
  flex: 1 1 10rem;
  min-inline-size: 0;
  padding-block: 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--cream);
}
.home-news input[type=email]::placeholder { color: rgb(250 247 242 / 0.75); font-weight: 600; }
.home-news input[type=email]:focus { outline: none; }
.home-news-pill:focus-within { border-color: var(--cream); }
.home-news .btn { flex: none; }
/* The status line belongs under the pill, not inside the ring. */
/* Below the pill, with the Turnstile widget, not inside the ring. */
.home-news .form-msg {
  margin: 0;
  padding-block-start: 0.6rem;
  padding-inline-start: 0.4rem;
  color: rgb(250 247 242 / 0.85);
}
/* Collapses to nothing while Turnstile is in interaction-only mode, so the form
   does not reserve a gap for a widget that never appears. */
.home-news .cf-turnstile:empty { margin: 0; }
.home-news .cf-turnstile { margin-block-start: 0.8rem; }
.news-art {
  aspect-ratio: 577 / 423;
  background: var(--cream);
  /* Longhands, not the `mask` shorthand: the shorthand resets mask-mode and
     mask-composite, and the stroked artwork ends up masking to nothing. */
  -webkit-mask-image: url('/assets/img/mailbox.svg?v=1');
  mask-image: url('/assets/img/mailbox.svg?v=1');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.news .h-big { max-inline-size: 22ch; }

@media (max-width: 900px) {
  /* Collapse to one column. home.css lists .news-grid among its other grids for
     this, but a page that uses the band without home.css needs it here too. */
  .news-grid { grid-template-columns: minmax(0, 1fr); }

  /* At one column the desktop 6.5rem lead-in above the pill reads as a hole,
     and the grid gap doubles it. Both come down; the section keeps its rhythm. */
  .news-grid { gap: var(--space-5); }
  .home-news { margin-top: var(--space-5); }
  .news-art { inline-size: 100%; max-width: 18rem; margin-inline: auto; }
}

@media (max-width: 560px) {
  /* The pill must stay one row. These rules predate the inner .home-news-pill
     wrapper: a 100%-wide field pushed the button onto a second line INSIDE the
     ring, which is what broke the subscribe field. */
  .home-news-pill { padding-inline-start: var(--space-3); }
  .home-news input[type=email] { flex: 1 1 6rem; }
  .home-news .btn { flex: none; padding-inline: var(--space-4); }
}