/* iWhisk newsletter popup
 *
 * One popup, included on every published page via a single <link> + <script>
 * pair (see newsletter-popup.js). Self-contained under its own --nlp- prefix
 * so it renders identically whether the page underneath is the dark homepage
 * hero or a light reading page: it never inherits page tokens, the same way
 * assets/header.css and assets/footer.css do not.
 *
 * Card, not a full-bleed sheet, at every width down to phone: a fixed bottom
 * sheet was tried first and rejected because it covers the on-page footer nav
 * a visitor may be reaching for. Anchored to the bottom of the viewport on
 * narrow screens instead, with its own close control, so it never blocks the
 * whole page.
 */

.nlp-backdrop {
  --nlp-ink:       #18352A;
  --nlp-canvas:    #F7F2E9;
  --nlp-paper:     #FFFDF8;
  --nlp-lime:      #DCEA94;
  --nlp-lime-hot:  #E8F5A0;
  --nlp-lime-ink:  #26311C;
  --nlp-clay:      #BD6041;
  --nlp-line:      #DED5C9;
  --nlp-text:      #252A27;
  --nlp-text-soft: #55605A;
  --nlp-display:   'Literata', Georgia, serif;
  --nlp-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px;
  background: rgba(24, 53, 42, .48);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.nlp-backdrop.nlp-open { opacity: 1; pointer-events: auto }

/* Centred on anything roomy enough to not need a bottom-anchored sheet. */
@media (min-width: 560px) {
  .nlp-backdrop { align-items: center }
}

.nlp-card {
  width: 100%; max-width: 440px;
  background: var(--nlp-paper); color: var(--nlp-text);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  padding: clamp(28px, 5vw, 36px) clamp(24px, 5vw, 32px) clamp(24px, 4vw, 28px);
  font-family: var(--nlp-body);
  position: relative;
  transform: translateY(24px);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
  /* iOS gesture bar/home indicator clearance on a bottom-anchored sheet. */
  padding-bottom: max(clamp(24px, 4vw, 28px), env(safe-area-inset-bottom));
}
.nlp-backdrop.nlp-open .nlp-card { transform: translateY(0) }

@media (min-width: 560px) {
  .nlp-card { border-radius: 20px }
}

.nlp-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--nlp-text-soft); cursor: pointer;
  transition: background .18s, color .18s;
}
.nlp-close:hover, .nlp-close:focus-visible { background: var(--nlp-line); color: var(--nlp-ink) }
.nlp-close svg { width: 15px; height: 15px }

.nlp-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nlp-clay); margin-bottom: 12px; padding-right: 32px;
}
.nlp-title {
  font-family: var(--nlp-display); font-weight: 900; color: var(--nlp-ink);
  font-size: clamp(21px, 4vw, 25px); line-height: 1.18; letter-spacing: -.015em;
  margin-bottom: 10px; padding-right: 20px;
}
.nlp-body-text {
  font-size: 14.5px; color: var(--nlp-text-soft); line-height: 1.6;
  margin-bottom: 20px; max-width: 40ch;
}

.nlp-form { display: flex; flex-direction: column; gap: 10px }
.nlp-row { display: flex; gap: 8px }
.nlp-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 15px; color: var(--nlp-text);
  background: var(--nlp-canvas); border: 1.5px solid var(--nlp-line);
  border-radius: 12px; padding: 12px 14px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.nlp-input:focus-visible {
  border-color: var(--nlp-ink); box-shadow: 0 0 0 3px rgba(24, 53, 42, .12);
}
.nlp-input::placeholder { color: var(--nlp-text-soft); opacity: .8 }

.nlp-submit {
  font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  padding: 12px 20px; border-radius: 100px; border: none; cursor: pointer;
  background: var(--nlp-lime); color: var(--nlp-lime-ink);
  transition: background .18s, transform .18s, opacity .18s;
}
.nlp-submit:hover, .nlp-submit:focus-visible { background: var(--nlp-lime-hot); transform: translateY(-1px) }
.nlp-submit:disabled { opacity: .6; cursor: default; transform: none }

/* Narrow phones: input and button stack rather than compress the email field
   past usefulness. 375px was the measured break where the button started
   forcing the input under ~140px wide. */
@media (max-width: 380px) {
  .nlp-row { flex-direction: column }
  .nlp-submit { width: 100% }
}

.nlp-fine {
  font-size: 11.5px; color: var(--nlp-text-soft); opacity: .8;
  margin-top: 10px; line-height: 1.5;
}

.nlp-status { font-size: 13.5px; font-weight: 600; margin-top: 4px; display: none }
.nlp-status.nlp-show { display: block }
.nlp-status.nlp-ok { color: var(--nlp-ink) }
.nlp-status.nlp-err { color: var(--nlp-clay) }

/* Honeypot: present in the DOM and tab order for a scripted filler, invisible
   and unreachable for a person. display:none is not used because some bots
   skip fields the CSSOM reports as not rendered; this hides visually while
   staying "visible" to a naive fill script. */
.nlp-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nlp-backdrop, .nlp-card, .nlp-close, .nlp-submit { transition: none }
}