/* ============================================================
   Newsletter — the email sign-up (<site-newsletter>).

   The Contact pattern (a 48px title over a muted line) with a form
   under it: one field and one button on a row, the button the site's
   only filled control — --fg on --bg, so it inverts with the theme.

     <site-newsletter></site-newsletter>
     <site-newsletter variant="essay"></site-newsletter>

   The default sits left on the grid margin, like every section title.
   The essay variant centres on the essay's reading column (the middle
   two grid columns from 768px up — the same span as .body), so it
   reads as the article's own sign-off rather than a new section.

   TOKENS — title --text-3xl (steps to 2xl on phones); lede --text-md;
   field + button --text-sm (16px: iOS zooms into anything smaller),
   48px tall (6 cells), --radius; field fill --surface-sunken.
   ============================================================ */

.newsletter {
  display: block;
  padding-inline: var(--grid-margin);
}

.newsletter__title {
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-regular);
  color: var(--fg);
  text-wrap: balance;
}
.newsletter__lede {
  margin-top: var(--rhythm-tight);
  max-width: 44ch;
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Form -------------------------------------------------------- */
.newsletter__form {
  display: flex;
  gap: var(--space-8);
  max-width: 32rem;
  margin-top: var(--rhythm-block);
}
.newsletter__label {                  /* visually hidden, still announced */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.newsletter__input,
.newsletter__button {
  height: var(--space-48);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--tracking-normal);
}
.newsletter__input {
  flex: 1;
  min-width: 0;
  padding-inline: var(--space-16);
  background: var(--surface-sunken);
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.newsletter__input::placeholder { color: var(--muted); opacity: 1; }

.newsletter__button {
  flex: none;
  padding-inline: var(--space-24);
  background: var(--fg);
  color: var(--bg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.newsletter__button:hover { opacity: 0.8; }
.newsletter__button:disabled { opacity: 0.5; cursor: default; }

.newsletter__input:focus-visible,
.newsletter__button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* --- Status -------------------------------------------------------
   Empty until a submit. On success the form goes and the note takes
   its place, at the lede's size and full strength. */
.newsletter__status:empty { display: none; }
.newsletter__status {
  margin-top: var(--rhythm-related);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.newsletter.is-done .newsletter__form { display: none; }
.newsletter.is-done .newsletter__status {
  margin-top: var(--rhythm-block);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg);
}

/* --- Essay variant ------------------------------------------------ */
.newsletter--essay { text-align: center; }
.newsletter--essay .newsletter__lede,
.newsletter--essay .newsletter__form { margin-inline: auto; }

@media (min-width: 768px) {
  .newsletter--essay {
    /* the .body span: two grid columns + the gutter between them */
    width: calc(
      (100% - 2 * var(--grid-margin)
            - (var(--grid-columns) - 1) * var(--grid-gutter))
      / var(--grid-columns) * 2 + var(--grid-gutter)
    );
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* --- Phones: the title steps down, the button drops under the field */
@media (max-width: 640px) {
  .newsletter__title { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); }
  .newsletter__form { flex-direction: column; }
  .newsletter__input { flex: none; }   /* flex: 1 would squash its height in a column */
}