/* The newsletter strip: forest ground behind a form. Shared by the footer and any page
   that embeds the compact variant inline. */
.newsletter { position: relative; background: var(--forest); color: rgba(255,255,255,.85); padding: clamp(56px, 8vw, 96px) 0; overflow: hidden; isolation: isolate; }
.newsletter-bg { position: absolute; inset: 0; z-index: -1; }
.newsletter-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.newsletter-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,18,12,.55), rgba(18,56,42,.92)); }
.newsletter-in { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.newsletter-copy { max-width: 30em; }
.newsletter-copy h2 { color: #fff; }
.newsletter-copy h2 em { font-style: italic; color: var(--sprout); }
.newsletter-copy p { margin-top: 12px; color: rgba(255,255,255,.72); font-size: var(--t-16); }

.newsletter-form-wrap { flex: 1 1 380px; max-width: 440px; }
.nl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-row .input { flex: 1 1 220px; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-fine { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.6); }
.nl-status { margin-top: 0; font-size: 14px; min-height: 0; color: rgba(255,255,255,.85); transition: opacity .3s; }
.nl-status:not(:empty) { margin-top: 10px; }
.nl-status[data-state="ok"] { color: var(--sprout); }
.nl-form.is-sent .nl-row, .nl-form.is-sent .nl-fine { display: none; }

/* compact: dropped into another page's section, no forest photo, tighter frame */
.newsletter.is-compact { padding: 0; background: none; color: var(--ink); }
.newsletter.is-compact .newsletter-in { gap: 24px; }
.newsletter.is-compact .newsletter-copy h2 { color: var(--forest); }
.newsletter.is-compact .newsletter-copy h2 em { color: var(--moss); }
.newsletter.is-compact .newsletter-copy p { color: var(--stone); }
.newsletter.is-compact .nl-fine, .newsletter.is-compact .nl-status:not([data-state="ok"]) { color: var(--stone); }

@media (max-width: 780px) {
  .newsletter-in { flex-direction: column; align-items: stretch; }
  /* flex-basis would become a height once the axis turns vertical */
  .newsletter-form-wrap { flex: none; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .nl-status { transition: none; } }

/* Inside the footer the strip is the footer's top edge, so the footer's own top padding goes. */
.site-footer:has(.newsletter) { padding-top: 0; }
.site-footer:has(.newsletter) .footer-top { padding-top: clamp(56px, 7vw, 88px); }