/* Newsletter signup strip, injected above the footer on every page except /updates/ (make_updates.py).
   It sits on the footer's own night ground so it reads as the top of the footer, not one more section.
   No popup or slide-in anywhere: people may be looking for Quick exit. */
.nl{background:var(--night);color:var(--linen);padding:clamp(40px,5vw,64px) var(--gutter) 0}
.nl-in{border-bottom:1px solid rgba(245,237,230,.15);padding-bottom:clamp(36px,4.5vw,56px)}
.nl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl .nl-h{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.12;color:var(--linen);outline:none}

.nl-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,33rem);gap:16px clamp(24px,5vw,72px);align-items:center}
.nl-fields{display:flex;flex-direction:column;gap:10px}
.nl-line{display:flex;gap:10px}
.nl-line input{flex:1 1 auto;min-width:0;min-height:52px;font:400 17px var(--sans);color:var(--night);background:var(--white);
  border:1px solid transparent;border-radius:999px;padding:12px 20px}
.nl-line input::placeholder{color:var(--mauve-ink);opacity:1}
.nl-line input[aria-invalid="true"]{border-color:var(--blush);box-shadow:0 0 0 2px var(--blush)}
.nl .nl-go,.nl .nl-save{flex:0 0 auto;grid-column:auto;justify-self:auto;margin:0;min-height:52px;padding:12px 28px;font-size:17px;
  background:var(--blush);color:var(--night);border:0}
.nl .nl-go[disabled],.nl .nl-save[disabled]{opacity:.65;cursor:progress}
.nl-err{font-size:15px;font-weight:500;color:var(--blush);margin:0}
.nl-err:empty{display:none}
.nl-safe{font-size:14px;color:rgba(245,237,230,.72);margin:0}

/* after signup: the optional interests question */
.nl-done{max-width:52rem}
.nl-more{margin-top:20px}
.nl-picks{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nl-picks legend{font-size:17px;font-weight:600;padding:0;margin-bottom:12px;color:var(--linen)}
.nl-picks label{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px 10px 14px;border-radius:999px;
  background:rgba(245,237,230,.07);border:1.5px solid rgba(245,237,230,.25);font-size:16px;color:var(--linen);cursor:pointer;touch-action:manipulation;
  transition:background-color .15s ease,border-color .15s ease}
.nl-picks input{width:20px;height:20px;margin:0;accent-color:var(--blush);flex:none}
.nl-picks label:has(input:checked){background:rgba(232,168,162,.18);border-color:var(--blush)}
.nl-picks label:focus-within{outline:3px solid var(--blush);outline-offset:2px}
.nl-acts{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.nl-skip{min-height:48px;min-width:48px;padding:0 16px;background:none;border:0;font:600 16px var(--sans);color:var(--linen);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.nl-more .nl-err{margin-top:10px}
.nl-saved{margin:14px 0 0;font-size:18px;font-weight:600;color:var(--blush);outline:none}

@media (max-width: 760px){
  .nl-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 380px){
  .nl-line{flex-wrap:wrap}
  .nl .nl-go{flex:1 1 100%}
}