/* ==========================================================================
   Newsletter, option A "Marquee" (picked by Vish, 28 Oct). hero-b.html only;
   index.html keeps the boxed version. Loaded after theme.css and hero-b.css.
   A dark band above the red visit band, with the hero's scrolling strip along its
   bottom edge, so the page opens (red band + strip) and closes (strip + red band)
   the same way. Reuses .marquee from hero-b.css.
   ========================================================================== */

.section--newsletter-marquee {
  padding: 0;
  background: var(--c-ink);
  color: #fff;
}
.section--newsletter-marquee :focus-visible { outline-color: #fff; }

.nl-marq {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5); align-items: center;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.25rem) clamp(2.25rem, 1.75rem + 2vw, 3rem);
}
.nl-marq__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-xl); line-height: 1.08;
  color: #fff; text-wrap: balance;
}
.nl-marq__title span { color: var(--c-red); }   /* 3.9:1 on ink, fine at this display size */
.nl-marq__sub { margin-top: var(--sp-2); max-width: 48ch; color: #d4d4d4; }

.nl-marq__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.nl-marq__label {
  flex-basis: 100%;
  font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.nl-marq__input {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 var(--sp-4);
  border: 2px solid #fff; border-radius: var(--radius);
  background: #fff; color: var(--c-ink); font-size: var(--fs-base);
}
.nl-marq__input:focus { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.nl-marq__form .btn { min-height: 52px; flex: 0 0 auto; }
.nl-marq__msg { flex-basis: 100%; min-height: 1.5em; font-weight: 700; color: #9fe0b0; }
.nl-marq__msg.is-error { color: #ff9ea3; }
.nl-marq__fine { flex-basis: 100%; font-size: var(--fs-2xs); color: #a8a8a8; }

/* The strip sits on the band's bottom edge, right above the red visit band */
.marquee--news { border-top: 1px solid rgb(255 255 255 / 0.14); }
.section--newsletter-marquee.is-offscreen .marquee__track { animation-play-state: paused; }

@media (min-width: 900px) {
  .nl-marq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
}