/* Site-wide signup band (home + About).
   Redesigned 2026-07-28 (John): the old version was a full-bleed grey strip holding two
   74px-tall square inputs stretched to 1880px, with the heading floating above them.
   This is the refined card the News page's signup already used — a quiet panel at a
   readable measure, pill fields, one clear action. */
.jh-subscribe {
  margin: 0 auto;
  padding: 72px 24px 80px;
  background: var(--jh-bg-alt, rgba(231, 228, 224, 0.55));
  border-top: 1px solid var(--jh-line, rgba(23, 21, 17, 0.12));
}

.jh-subscribe__inner {
  width: min(100%, 560px);
  margin: 0 auto;
  text-align: center;
}

.jh-subscribe__eyebrow {
  margin: 0 0 12px;
  font-family: var(--jh-font-display, 'Aboreto', serif);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.66rem;
  color: var(--jh-muted, rgba(23, 21, 17, 0.58));
}

.jh-subscribe__title {
  margin: 0 0 10px;
  font-family: var(--jh-font-display, 'Aboreto', serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--jh-text, #171511);
}

.jh-subscribe__note {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-family: var(--jh-font-body, 'Spline Sans', sans-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--jh-muted, rgba(23, 21, 17, 0.66));
}

.jh-subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 430px;
  margin: 0 auto;
}

.jh-subscribe__name {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--jh-line, rgba(23, 21, 17, 0.18));
  border-radius: 999px;
  background: var(--jh-panel, #fffbf4);
  padding: 13px 20px;
  font: inherit;
  font-family: var(--jh-font-body, 'Spline Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--jh-text, #171511);
  outline: none;
}

.jh-subscribe__name:focus {
  border-color: var(--jh-text, #171511);
  box-shadow: 0 0 0 3px rgba(23, 21, 17, 0.06);
}

/* The email field and its button share ONE pill, so the row reads as a single control
   and the button can never wrap away from the field it submits. */
.jh-subscribe__row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--jh-panel, #fffbf4);
  border: 1px solid var(--jh-line, rgba(23, 21, 17, 0.18));
  border-radius: 999px;
  padding: 5px 5px 5px 4px;
}

.jh-subscribe__row:focus-within {
  border-color: var(--jh-text, #171511);
  box-shadow: 0 0 0 3px rgba(23, 21, 17, 0.06);
}

.jh-subscribe__email {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 16px;
  font: inherit;
  font-family: var(--jh-font-body, 'Spline Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--jh-text, #171511);
  outline: none;
}

.jh-subscribe__name::placeholder,
.jh-subscribe__email::placeholder {
  color: var(--jh-muted, rgba(23, 21, 17, 0.45));
}

.jh-subscribe__button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--jh-text, #171511);
  color: #fff;
  padding: 12px 24px;
  cursor: pointer;
  font-family: var(--jh-font-display, 'Aboreto', serif);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  line-height: 1;
  transition: filter 0.14s ease;
}

.jh-subscribe__button:hover,
.jh-subscribe__button:focus-visible {
  filter: brightness(1.6);
  outline: none;
}

.jh-subscribe__button[disabled] {
  cursor: wait;
  opacity: 0.7;
}

.jh-subscribe__notice {
  margin: 16px 0 0;
  min-height: 20px;
  font-family: var(--jh-font-body, 'Spline Sans', sans-serif);
  font-size: 0.85rem;
  color: var(--jh-muted, rgba(23, 21, 17, 0.66));
}

.jh-subscribe__notice.is-success {
  color: #2a6b36;
}

.jh-subscribe__notice.is-error {
  color: #8b2f2f;
}

@media (max-width: 700px) {
  .jh-subscribe {
    padding: 52px 18px 60px;
  }

  /* Stack on a narrow screen: the shared pill would squeeze the email field to nothing
     once the button takes its label width. */
  .jh-subscribe__row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: 22px;
    padding: 6px;
  }

  .jh-subscribe__button {
    padding: 14px 24px;
  }
}