/* =========================================================================
   Ludic Media Studio — the newsletter (29 October 2026)
   Loaded on EVERY page as part of the shared contract (chrome.STYLESHEETS):
   the yellow band above the footer is on every page, and /newsletter uses the
   same form in a card.

   The band is full-bleed yellow, at the client's direction, and is now the
   Mailchimp signup form itself rather than a button out to it. Two columns
   from 64rem: the pitch, then the form.

   On submit, js/newsletter.js sends the signup to Mailchimp without leaving
   the page and shows the reply in .nl-form__status (below).

   The form is email-first. js/newsletter.js sets data-nl-state="quick" on
   the band's form, which hides everything but the email field and "Sign up";
   pressing it sets "open" and the rest of the fields appear. With no state
   set — scripting off, the script failing, or the /newsletter page — the
   whole form shows, so these rules only ever HIDE things the script has
   taken charge of.

   All copy is black: this form sits on yellow in the band and on white in
   the page's card, and black carries 13.3:1 and 21:1 on those. The focus
   ring is black for the same reason — a yellow ring vanishes on the band.
   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, never white on yellow.

   (The old band's `.mailing` rules are still in components.css, unused.)
   ========================================================================= */

/* ---------- the band -------------------------------------------------- */
.nl-band__inner { display: grid; gap: var(--space-md); }
@media (min-width: 64rem) {
  .nl-band__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-xl);
    align-items: start;
  }
  /* Collapsed, the form is three lines against the pitch's six: centre it
     beside the pitch. Opened, it top-aligns again and grows downward. */
  .nl-band__inner > .nl-form[data-nl-state="quick"] { align-self: center; }
}
.nl-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-xs);
  padding: 0.25rem 0.625rem;
  background: var(--black);
  color: var(--yellow);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: var(--leading-mid);
  text-transform: uppercase;
}
.nl-band__title {
  max-width: 16ch;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.nl-band__blurb { max-width: 30rem; margin-top: var(--space-xs); font-size: var(--text-md); line-height: var(--leading-mid); }

/* ---------- the form -------------------------------------------------- */
.nl-form { display: grid; gap: var(--space-sm); color: var(--black); }
.nl-form__field { display: grid; gap: 0.375rem; }
.nl-form__label { font-size: var(--text-sm); font-weight: 700; }
.nl-form__inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nl-form__inline .nl-form__input { flex: 1 1 10rem; min-width: 0; }
.nl-form__input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: var(--text-base);
}
.nl-form__input:focus-visible,
.nl-form__box:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.nl-form__note { font-size: var(--text-xs); line-height: var(--leading-mid); }

/* The two states the script sets. */
.nl-form__next { display: none; padding-inline: 1.75rem; font-weight: 700; }
.nl-form[data-nl-state="quick"] .nl-form__next { display: inline-flex; }
.nl-form[data-nl-state="quick"] .nl-form__more { display: none; }
.nl-form[data-nl-state="open"] .nl-form__more { animation: nl-reveal var(--duration) var(--ease) both; }
@keyframes nl-reveal { from { opacity: 0; transform: translateY(-0.5rem); } }

.nl-form__more { display: grid; gap: var(--space-sm); min-width: 0; margin: 0; padding: 0; border: 0; }
.nl-form__step { margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); }
.nl-form__step-sub { font-weight: 400; }
.nl-form__row { display: grid; gap: var(--space-sm); }
@media (min-width: 36rem) { .nl-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nl-form__perms {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
  margin: 0;
  padding: var(--space-sm) 0 0;
  border: 0;
  border-top: 2px solid var(--black);
}
.nl-form__perms-title { float: left; width: 100%; padding: 0; font-size: var(--text-sm); font-weight: 700; }
.nl-form__perms-text { font-size: var(--text-sm); line-height: var(--leading-mid); }
.nl-form__check { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; }
.nl-form__box { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--black); }
.nl-form__legal { font-size: var(--text-xs); line-height: var(--leading-mid); }
.nl-form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.nl-form__send { justify-self: start; padding-inline: 2rem; font-weight: 700; }

/* The inline result (30 Oct 2026): js/newsletter.js creates this <p> and
   fills it with "Signing you up…", the check-your-inbox message, or
   Mailchimp's error as plain text. It inherits the form's black, which reads
   on the yellow band and in the white card alike; the rule at its left edge
   is what makes a one-line message noticeable under a form this long. */
.nl-form__status {
  padding-left: var(--space-xs);
  border-left: 4px solid var(--black);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-mid);
}

/* Mailchimp's honeypot: off-screen for people, still in the form for bots.
   Not display:none — some bots skip fields that are. */
.nl-form__hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- /newsletter ------------------------------------------------
   The page reuses the contact page's layout (v2-contact--page) and its white
   form card; only the list of what subscribers get is new. */
.nl-perks { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.nl-perks__item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--space-xs); }
.nl-perks__tick {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
}
.nl-perks__title { font-size: var(--text-base); font-weight: 800; }
.nl-perks__body { font-size: var(--text-sm); line-height: var(--leading-mid); }
.nl-page__note { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--dark-grey); font-size: var(--text-sm); }

/* ---------- the two pages Mailchimp sends people to -------------------- */
.nl-done__steps { display: grid; gap: var(--space-xs); max-width: 40rem; margin-top: var(--space-md); counter-reset: nl-step; }
.nl-done__step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-md);
  counter-increment: nl-step;
}
.nl-done__step::before {
  content: counter(nl-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-weight: 900;
}
.nl-done__hint { max-width: 40rem; margin-top: var(--space-md); font-size: var(--text-sm); line-height: var(--leading-mid); }