/* ==========================================================================
   Zentek — newsletter signup
   Shared, all-page furniture for the Mailchimp "Subscribe to our newsletter"
   form. One stylesheet serves all three placements, because all three wrap
   the same markup contract (.nl-form + .nl-row + .nl-status):

     .nl-footer    the band inside <footer>, above the legal block
     .nl-modal     the timed pop-up, built at runtime by /js/newsletter.js
     .nl-page      the standalone /subscribe.html card

   Loaded on every page after the page's own inline <style>, so these rules
   win on equal specificity — same contract as /css/site-notice.css.

   Mailchimp's own classic-061523.css and mc-validate.js are deliberately NOT
   loaded: that bundle ships its own 600px-wide Helvetica layout and needs
   jQuery, neither of which belongs in this design. The form posts to the same
   Mailchimp endpoint either way.
   ========================================================================== */

/* --- Form internals ------------------------------------------------------
   Themed through four custom properties so one set of rules can render on
   paper (pop-up, /subscribe) and on --dark (footer). Each placement below
   sets the four; nothing else needs to change. */
.nl-form {
  --nl-field-bg: var(--paper2);
  --nl-field-line: var(--line);
  --nl-field-ink: var(--ink);
  --nl-label-ink: var(--ink3);
}

/* Input and button share a baseline so they align when the row is inline.
   Padding matches .field input / .submit-btn on the contact page. */
.nl-form .nl-input,
.nl-form .nl-btn {
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 15px;
  border: 1px solid transparent;
  outline: none;
}

.nl-form .nl-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nl-label-ink);
  margin-bottom: 7px;
}

.nl-form .nl-input {
  width: 100%;
  min-width: 0;
  background: var(--nl-field-bg);
  border-color: var(--nl-field-line);
  color: var(--nl-field-ink);
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color .18s;
}
.nl-form .nl-input::placeholder { color: var(--nl-label-ink); opacity: 1; }
.nl-form .nl-input:focus { border-color: var(--green); }

.nl-form .nl-btn {
  flex: none;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: 28px;
  padding-right: 28px;
  background: var(--green);
  color: #faf9f6;
  cursor: pointer;
  transition: background .18s;
}
.nl-form .nl-btn:hover { background: var(--green2); }
.nl-form .nl-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Set while a submission is in flight by /js/newsletter.js */
.nl-form .nl-btn[disabled] { opacity: .6; cursor: default; }

/* Label + control stack, then input and button side by side. `align-items:
   stretch` keeps the button exactly as tall as the input at every width. */
.nl-form .nl-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.nl-form .nl-row > label { flex: 1 1 auto; min-width: 0; }

@media (max-width: 520px) {
  .nl-form .nl-row { flex-direction: column; }
  .nl-form .nl-btn { padding-top: 14px; padding-bottom: 14px; }
}

/* Mailchimp's bot trap. Kept off-canvas rather than display:none, which is
   what the embed does — a hidden input some bots know to skip. */
.nl-hp {
  position: absolute;
  left: -5000px;
}

/* --- Status line ---------------------------------------------------------
   One element carries all three outcomes so the form never reflows more than
   a line. Empty and hidden until /js/newsletter.js writes to it; the plain
   no-JS form never shows it (Mailchimp's own page answers instead). */
.nl-status {
  display: none;
  margin-top: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
}
.nl-status.is-shown { display: block; }
.nl-status.is-busy { color: var(--ink3); }
.nl-status.is-ok { color: var(--green); }
.nl-status.is-err { color: #b3401f; }
.nl-status a { color: inherit; border-bottom: 1px solid currentColor; }

.nl-consent {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink3);
}
.nl-consent a { color: var(--green); border-bottom: 1px solid rgba(14, 122, 74, .34); }
.nl-consent a:hover { border-bottom-color: var(--green); }

/* --- Placement 1: footer band -------------------------------------------
   Full-width row between .f-in and .legal, so it reads as its own band
   rather than as a sixth footer column squeezed against the link lists. */
.nl-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px 56px;
  align-items: end;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(250, 249, 246, .12);
}

.nl-footer h4 {
  font-family: 'Aptos', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, .5);
  margin-bottom: 12px;
}
.nl-footer .nl-blurb {
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(250, 249, 246, .72);
}

/* Dark theme for the shared internals. The field sits on --dark, so it needs
   a lifted surface and a light border instead of the paper treatment. */
.nl-footer .nl-form {
  --nl-field-bg: rgba(250, 249, 246, .07);
  --nl-field-line: rgba(250, 249, 246, .22);
  --nl-field-ink: #faf9f6;
  --nl-label-ink: rgba(250, 249, 246, .5);
}
.nl-footer .nl-form .nl-input:focus { border-color: #4bbd85; }
.nl-footer .nl-status.is-busy { color: rgba(250, 249, 246, .55); }
.nl-footer .nl-status.is-ok { color: #4bbd85; }
.nl-footer .nl-status.is-err { color: #f0a58c; }
.nl-footer .nl-consent { color: rgba(250, 249, 246, .5); }
.nl-footer .nl-consent a { color: rgba(250, 249, 246, .82); border-bottom-color: rgba(250, 249, 246, .3); }
.nl-footer .nl-consent a:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 860px) {
  .nl-footer { grid-template-columns: 1fr; align-items: start; margin-top: 44px; padding-top: 34px; }
}

/* --- Placement 2: timed pop-up ------------------------------------------
   Markup is built by /js/newsletter.js, so nothing here exists until the
   dialog opens. `hidden` on the host keeps it out of the layout and out of
   the accessibility tree between opens. */
.nl-modal[hidden] { display: none; }

.nl-modal {
  position: fixed;
  inset: 0;
  z-index: 200; /* nav is 50 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 9, 8, .62);
  backdrop-filter: blur(3px);
  animation: nl-fade .22s ease-out both;
}

.nl-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  /* Green edge ties the card to the accent used on every other CTA */
  border-top: 3px solid var(--green);
  padding: 44px 40px 38px;
  box-shadow: 0 24px 60px rgba(8, 9, 8, .35);
  animation: nl-rise .28s cubic-bezier(.2, .7, .3, 1) both;
}

.nl-modal .nl-k,
.nl-page .nl-k {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.nl-modal h2,
.nl-page h2 {
  font-family: 'Aptos', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.nl-modal .nl-blurb,
.nl-page .nl-blurb {
  font-size: 14.5px;
  color: var(--ink2);
  margin-bottom: 26px;
}

/* 44px hit target, offset so it clears the 3px accent border */
.nl-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink3);
  cursor: pointer;
  transition: color .18s;
}
.nl-modal-close:hover { color: var(--ink); }

/* The pop-up is a single column at every width: side-by-side input and
   button leave the field too narrow for an email address in 460px. */
.nl-modal .nl-form .nl-row { flex-direction: column; }
.nl-modal .nl-form .nl-btn { padding-top: 14px; padding-bottom: 14px; }

@keyframes nl-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes nl-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (max-width: 520px) {
  .nl-modal { padding: 16px; align-items: flex-end; }
  .nl-modal-card { padding: 36px 26px 30px; }
}

/* Each page's inline <style> already zeroes animation under reduced motion,
   but this file loads after it and would otherwise reinstate them. */
@media (prefers-reduced-motion: reduce) {
  .nl-modal, .nl-modal-card { animation: none }
}

/* When the dialog is open the page behind it must not scroll. Set on <body>
   by /js/newsletter.js and removed on close. */
body.nl-locked { overflow: hidden; }

/* --- Placement 3: /subscribe.html card ---------------------------------- */
.nl-page {
  max-width: 560px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: 48px 44px;
}
.nl-page h2 { font-size: 30px; }

@media (max-width: 560px) {
  .nl-page { padding: 38px 26px; }
}

/* Reassurance list under the /subscribe form */
.nl-points {
  list-style: none;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}
.nl-points li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
}
.nl-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--green);
}