/* home/nl.css: the AXON signup (the nl section of index.html). Owned by nl.
   Builds on home/base.css (curves, timings, .h-btn, shape rule). Everything new
   is named h-nl-*; the hp-nl__* names are the section's own and are kept because
   global.js and the axon-issue-publishing checker read them.

   The section's one job is joining AXON. Its two moves:
     1. the signup moment: a field that says what it holds, checks the address
        before anything is sent, and answers every state (focus, a problem,
        sending, joined, a failed send) in place, without a jump;
     2. the latest issue preview: the issue under the form opens a paper proof
        of itself (its own banner, standfirst and sections, read from the issue
        page at the link's href, so it is never stale). */

/* ── GROUND (unchanged: the artwork's paper and the engraved masthead) ───── */
.hp-nl {
  background-color: #F2EDE3;
  background-image: url('../../images/newsletter backgorund.webp');
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 51vw;
  padding: 3.5rem 5vw 0;
  display: flex;
  flex-direction: column;
}

.hp-nl__inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 8.5rem;
  width: 100%;
}

/* Rule 1 of no-ai-slop: no eyebrow above a heading. The masthead leads, and
   what this actually is gets said underneath it, where a masthead says it. */
.hp-nl__what {
  margin: auto auto 1.15rem;
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.hp-nl__what::before,
.hp-nl__what::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(11, 15, 46, 0.16);
}
.hp-nl__what span {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

/* The title is the artwork itself on wider screens. The real heading stays in
   the document for screen readers and heading navigation (it used to be
   display: none, which took it out of both). */
.hp-nl__h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hp-nl__sub {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(11, 15, 46, 0.72);
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 2rem;
  text-wrap: balance;
}

.hp-nl__fine {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-2);               /* was navy at 45 percent, about 3:1 on the paper; text-2 is 6.5:1 */
  line-height: 1.6;
  text-wrap: balance;
}

/* ── THE SIGNUP MOMENT ─────────────────────────────────────────────────────
   A field and a pill, side by side (the shape rule: things you fill in are
   12px, things you press are pills). The field is a white sheet on the paper:
   hairline, a contact shadow, and a focus ring that grows out of the hairline. */
.hp-nl__form {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

/* Four shadows in every state (edge, halo, contact, ambient), so each change
   interpolates one layer into its twin: the edge thickens into the ring and
   the halo opens around it, instead of one shadow morphing into another. */
.h-nl-field {
  --h-nl-edge: 0 0 0 1px rgba(11, 15, 46, 0.13);
  --h-nl-halo: 0 0 0 0 rgba(2, 132, 199, 0);
  --h-nl-lift: 0 1px 2px rgba(11, 15, 46, 0.05), 0 3px 10px -2px rgba(11, 15, 46, 0.07);
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--h-r-ctl);
  background: #fff;
  box-shadow: var(--h-nl-edge), var(--h-nl-halo), var(--h-nl-lift);
  transition: box-shadow var(--h-t) var(--h-ease-out), background-color var(--h-t) var(--h-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .h-nl-field:hover {
    --h-nl-edge: 0 0 0 1px rgba(11, 15, 46, 0.26);
    --h-nl-lift: 0 2px 6px rgba(11, 15, 46, 0.05), 0 14px 34px -10px rgba(11, 15, 46, 0.16);
  }
}
.h-nl-field:focus-within {
  --h-nl-edge: 0 0 0 1.5px var(--h-focus);
  --h-nl-halo: 0 0 0 5px rgba(2, 132, 199, 0.16);
  --h-nl-lift: 0 2px 6px rgba(11, 15, 46, 0.05), 0 14px 34px -10px rgba(11, 15, 46, 0.16);
}

.h-nl-field .hp-nl__input {
  display: block;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 1.4rem 3rem 0.4rem 1.1rem;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--sans);
  font-size: max(16px, 1rem);          /* 16px or more: iOS zooms the page on a smaller field */
  line-height: 1.25;
  color: var(--ink);
  caret-color: var(--teal-2);
  text-overflow: ellipsis;
}
.h-nl-field .hp-nl__input::placeholder { color: transparent; }
/* Autofill keeps the white sheet instead of the browser's tinted fill. */
.h-nl-field .hp-nl__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  -webkit-text-fill-color: var(--ink);
}

/* The label rests where a placeholder would and rises out of the way as you
   type, so the field still says what it holds while it holds it. */
.h-nl-label {
  position: absolute;
  left: 1.1rem;
  top: 19px;
  max-width: calc(100% - 4rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform-origin: 0 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 20px;
  color: var(--text-2);
  pointer-events: none;
  transition:
    translate var(--h-t) var(--h-ease),
    scale var(--h-t) var(--h-ease),
    color var(--h-t) var(--h-ease-out);
}
.h-nl-field .hp-nl__input:focus + .h-nl-label,
.h-nl-field .hp-nl__input:not(:placeholder-shown) + .h-nl-label,
.h-nl-field .hp-nl__input:-webkit-autofill + .h-nl-label {
  translate: 0 -10px;
  scale: 0.75;
}
/* The risen label is 12px, so it stays text-2 (7:1): teal-2 would be 4.1:1.
   The ring carries the focus colour instead. */

/* A tick draws itself the moment the address is complete. */
.h-nl-tick {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  fill: none;
  stroke: var(--teal-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.h-nl-tick path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset var(--h-t) var(--h-ease);
}
.hp-nl__form[data-h-nl-valid] .h-nl-tick path { stroke-dashoffset: 0; transition-duration: var(--h-t-content); }

/* The pill. One width for every label global.js writes into it (Join Free,
   Subscribing..., Subscribed), so a state change never shoves the field. */
.hp-nl__submit.h-btn {
  position: relative;
  flex: none;
  width: 11.5rem;
  min-height: 58px;
  padding: 0 1rem;
  font-size: 1rem;
}
.hp-nl__submit.h-btn::before,
.hp-nl__submit.h-btn::after {
  content: '';
  pointer-events: none;
}
/* ── STATES (data-h-nl-state on the form, written by nl.js) ──────────────── */

/* A problem with the address: the ring turns ink and the field shakes once,
   the way a wrong password does. The words under it say what is wrong. */
.hp-nl__form[data-h-nl-state="invalid"] .h-nl-field {
  --h-nl-edge: 0 0 0 1.5px var(--ink);
  --h-nl-halo: 0 0 0 5px rgba(11, 15, 46, 0.1);
}
.hp-nl__form[data-h-nl-state="invalid"] .h-nl-field .hp-nl__input + .h-nl-label { color: var(--ink); }

/* Sending: the label steps aside for an activity ring (it turns only while a
   request is really out). The pill keeps full colour: global.js disables it,
   and base would fade a disabled pill to 42 percent. */
.hp-nl__form[data-h-nl-state="sending"] .hp-nl__submit.h-btn,
.hp-nl__form[data-h-nl-state="done"] .hp-nl__submit.h-btn {
  opacity: 1;
  box-shadow: var(--b-shadow);
  cursor: default;
}
.hp-nl__form[data-h-nl-state="sending"] .hp-nl__submit.h-btn { color: transparent; }
.hp-nl__submit.h-btn::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-top-color: #fff;
  opacity: 0;
  scale: 0.5;
  /* leaving is quick, so the ring is gone before the tick starts to draw */
  transition: opacity 120ms var(--h-ease-std), scale 120ms var(--h-ease-std);
}
.hp-nl__form[data-h-nl-state="sending"] .hp-nl__submit.h-btn::before {
  opacity: 1;
  scale: 1;
  transition: opacity var(--h-t-quick) var(--h-ease), scale var(--h-t) var(--h-ease);
  animation: h-nl-spin 0.8s linear infinite;
}
@keyframes h-nl-spin { to { rotate: 1turn; } }

/* Joined: the ring gives way to a tick that draws itself, and the label rises
   in beside it. */
.hp-nl__submit.h-btn::after {
  display: none;
  flex: none;
  order: -1;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4l3.4 3.4L14.5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4l3.4 3.4L14.5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hp-nl__form[data-h-nl-state="done"] .hp-nl__submit.h-btn {
  animation: h-nl-label-in 420ms var(--h-ease) 140ms both;
}
.hp-nl__form[data-h-nl-state="done"] .hp-nl__submit.h-btn::after {
  display: block;
  animation: h-nl-draw 460ms var(--h-ease) 120ms both;
}
@keyframes h-nl-label-in { from { color: transparent; } }
@keyframes h-nl-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* The field takes the address in: one teal ring that opens and lets go. */
.hp-nl__form[data-h-nl-state="done"] .h-nl-field {
  animation: h-nl-taken 900ms var(--h-ease) both;
}
@keyframes h-nl-taken {
  0% { box-shadow: 0 0 0 1.5px var(--h-focus), 0 0 0 0 rgba(2, 132, 199, 0.28), var(--h-nl-lift); }
  45% { box-shadow: 0 0 0 1.5px var(--h-focus), 0 0 0 9px rgba(2, 132, 199, 0), var(--h-nl-lift); }
  100% { box-shadow: var(--h-nl-edge), 0 0 0 9px rgba(2, 132, 199, 0), var(--h-nl-lift); }
}
.hp-nl__form[data-h-nl-state="done"] .h-nl-field .hp-nl__input { color: var(--text-2); }

/* ── THE MESSAGE LINE ──────────────────────────────────────────────────────
   One line held open under the form, so a message appears without pushing
   the page. Each new message rises in out of a soft blur. */
.h-nl-msg {
  display: flex;                       /* the line is a flex item: no strut, so one line is exactly 1.35rem */
  justify-content: center;
  min-height: 1.4rem;
  margin: 0.7rem auto 0.3rem;
  width: 100%;
  max-width: 540px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.h-nl-msg__line {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  animation: h-nl-msg-in var(--h-t-content) var(--h-ease) both;
}
.h-nl-msg__line[data-h-nl-kind="sr"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes h-nl-msg-in { from { opacity: 0; translate: 0 6px; filter: blur(4px); } }
.h-nl-msg__mark {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
}
.h-nl-msg__fix {
  margin: -0.65rem -0.15rem;
  padding: 0.65rem 0.15rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .h-nl-msg__fix:hover { text-decoration-color: var(--teal-2); }
}
.h-nl-msg__fix:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; border-radius: 4px; }

/* ── THE LATEST ISSUE ──────────────────────────────────────────────────────
   The markup of this row is read by the axon-issue-publishing checker:
   <p class="hp-nl__latest"> with an <a> holding hp-nl__latest-no and
   hp-nl__latest-title. Never add a class to that <p>. Everything the preview
   needs is built by nl.js from that markup and from the issue page itself. */
.hp-nl__latest {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
}

.hp-nl__latest > a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  max-width: 100%;
  margin: -0.7rem -0.85rem;
  padding: 0.7rem 0.85rem;             /* a 44px target around one line of text */
  border-radius: var(--h-r-ctl);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--h-t) var(--h-ease-out);
}
.hp-nl__latest > a:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 0; }

.hp-nl__latest-no {
  flex-shrink: 0;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: color var(--h-t) var(--h-ease-out), translate var(--h-spring-dur) var(--h-spring);
}

.hp-nl__latest-title {
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--h-t-content) var(--h-ease);
}

.hp-nl__latest-go {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--teal-2);
  opacity: 0;
  translate: -5px 0;
  transition: opacity var(--h-t) var(--h-ease-out), translate var(--h-spring-dur) var(--h-spring);
}

.hp-nl__latest > a:focus-visible .hp-nl__latest-title,
.hp-nl__latest[data-h-nl-open] > a .hp-nl__latest-title,
.hp-nl__latest[data-h-nl-cue] > a .hp-nl__latest-title { background-size: 100% 1px; }
.hp-nl__latest > a:focus-visible .hp-nl__latest-no,
.hp-nl__latest[data-h-nl-open] > a .hp-nl__latest-no,
.hp-nl__latest[data-h-nl-cue] > a .hp-nl__latest-no { color: var(--teal-2); translate: 0 -2px; }
.hp-nl__latest > a:focus-visible .hp-nl__latest-go,
.hp-nl__latest[data-h-nl-open] > a .hp-nl__latest-go,
.hp-nl__latest[data-h-nl-cue] > a .hp-nl__latest-go { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  .hp-nl__latest > a:hover .hp-nl__latest-title { background-size: 100% 1px; }
  .hp-nl__latest > a:hover .hp-nl__latest-no { color: var(--teal-2); translate: 0 -2px; }
  .hp-nl__latest > a:hover .hp-nl__latest-go { opacity: 1; translate: 0 0; }
}

/* On a touch screen there is no hover to open the preview, so nl.js adds a
   real control for it (only once the issue page has answered). */
.h-nl-peek-btn { margin: 0.9rem auto 0; animation: h-nl-rise 460ms var(--h-ease) both; }
.h-nl-peek-btn[aria-expanded="true"] {
  --b-bg: var(--ink);
  --b-bg-hover: var(--h-ink-2);
  --b-bg-press: var(--h-ink-3);
  --b-fg: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .h-nl-peek-btn { display: none; }
}

/* The preview: a paper proof of the issue that grows out of the row. It holds
   content, so it is a white sheet with a lifted shadow, never glass. */
.h-nl-peek {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 5;
  display: block;
  width: min(25rem, calc(100vw - 2rem));
  translate: -50% 0;
  text-align: left;
  background: #fff;
  border-radius: var(--h-r-box);
  box-shadow: var(--h-hairline), var(--h-shadow-3);
  cursor: pointer;
  transform-origin: 50% 100%;
  opacity: 0;
  visibility: hidden;
  scale: 0.94;
  filter: blur(6px);
  transition:
    opacity var(--h-t-quick) var(--h-ease-std),
    scale var(--h-t-quick) var(--h-ease-std),
    filter var(--h-t-quick) var(--h-ease-std),
    visibility 0s linear var(--h-t-quick);
}
/* An invisible bridge over the gap, so the pointer can travel from the row
   into the preview without it closing. */
.h-nl-peek::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.h-nl-peek[data-h-nl-below] {
  bottom: auto;
  top: calc(100% + 14px);
  transform-origin: 50% 0;
}
.h-nl-peek[data-h-nl-below]::before { top: auto; bottom: 100%; }
/* Opacity is quick so the sheet is solid while it is still growing (no long
   double exposure over the masthead); scale and focus take the sheet's time. */
.h-nl-peek[data-h-nl-open] {
  opacity: 1;
  visibility: visible;
  scale: 1;
  filter: none;
  transition:
    opacity 220ms var(--h-ease-out),
    scale var(--h-t-content) var(--h-ease-sheet),
    filter 360ms var(--h-ease),
    visibility 0s;
}

.h-nl-peek__art {
  display: block;
  aspect-ratio: 1200 / 560;
  overflow: hidden;
  border-radius: var(--h-r-box) var(--h-r-box) 0 0;
  background: var(--ink);
}
/* The cover was fetched when the section came near, so it is normally ready
   and simply arrives with the sheet; the ink behind it covers a slow network. */
.h-nl-peek__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* As the sheet grows, the cover settles into place and the words under it
   come into focus in reading order (base's arrival, at sheet speed). */
.h-nl-peek[data-h-nl-open] .h-nl-peek__art img { animation: h-nl-settle 800ms var(--h-ease) both; }
.h-nl-peek[data-h-nl-open] .h-nl-peek__body > * {
  animation: h-nl-rise 460ms var(--h-ease) calc(80ms + var(--h-nl-i, 0) * 45ms) both;
}
@keyframes h-nl-settle { from { scale: 1.06; } }
@keyframes h-nl-rise { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }

.h-nl-peek__body { display: block; padding: 1.05rem 1.25rem 1.25rem; }
.h-nl-peek__head { display: flex; align-items: baseline; gap: 0.7rem; }
.h-nl-peek__no {
  flex: none;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.75rem;
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--teal-2);
}
.h-nl-peek__title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-nl-peek__dek {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-2);
}
.h-nl-peek__toc {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.h-nl-peek__toc li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.h-nl-peek__toc b {
  flex: none;
  min-width: 1.2rem;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.h-nl-peek__go { margin-top: 1rem; }

/* ── WIDER SCREENS: THE MASTHEAD COLLISION, measured rather than guessed ───
   The AXON wordmark is printed into the artwork. The band centred that
   artwork vertically and stood the copy at the foot of the band, so the two
   met: from 601px to about 1330px the letterforms printed straight through
   the descriptor line, the signup form and the fine print. The artwork is
   1672 x 941, so it stands 56.3vw tall at full bleed and the glyphs end
   26.44vw down it. Anchoring it to the top of the band and reserving that
   height as padding puts the copy below the wordmark at every width, and
   shows the whole illustration. */
@media (min-width: 601px) {
  .hp-nl {
    background-color: #F5F1EE;          /* the artwork's own paper, so the band and the art meet with no seam */
    background-position: center top;
    min-height: 56.3vw;                 /* exactly the artwork's height */
    padding-top: 29.5vw;                /* the glyphs stop at 26.44vw */
  }
  /* The descriptor line was the element landing on the letterforms, and the
     artwork already says the name. */
  .hp-nl__what { display: none; }
  .hp-nl__sub { margin-top: auto; }
}

/* ── PHONES (600px and less) ───────────────────────────────────────────────
   The masthead art overlapped the form on a phone, so it is dropped for the
   real <h2>, and label / heading / sub / form / fine print flow in order. */
@media (max-width: 600px) {
  .hp-nl {
    background-image: none;
    background-color: #F2EDE3;
    min-height: 0;
    padding: 3.2rem 6vw 3.4rem;
  }
  .hp-nl__inner { padding-bottom: 0; }
  .hp-nl__h2 {
    position: static;
    width: auto;
    height: auto;
    margin: 0.5rem 0 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: block;
    font-family: 'Bebas Neue', var(--display);
    font-weight: 400;
    font-size: clamp(2.6rem, 13vw, 3.6rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: #0B0F2E;
  }
  .hp-nl__sub { margin-top: 0.9rem; margin-bottom: 1.4rem; font-size: 1rem; }

  /* The old column form gave the field flex: 1 with no height to grow into,
     so it collapsed to about 19px. Each control now has its own height. */
  .hp-nl__form { flex-direction: column; gap: 0.6rem; }
  .h-nl-field { flex: none; }
  .hp-nl__submit.h-btn { width: 100%; min-height: 54px; }

  .hp-nl__latest { margin-top: 1.2rem; }
  .hp-nl__latest > a { gap: 0.55rem; }
  .hp-nl__latest-no { font-size: 1.1rem; }
  .hp-nl__latest-title { font-size: 0.9rem; line-height: 1.4; }
  .hp-nl__latest-go { display: none; }
}

/* ── PREFERENCES ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .h-nl-field,
  .h-nl-label,
  .h-nl-tick path,
  .hp-nl__latest-no,
  .hp-nl__latest-title,
  .hp-nl__latest-go,
  .h-nl-peek,
  .h-nl-peek[data-h-nl-open] { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .h-nl-peek { filter: none; scale: none; }
  .h-nl-peek[data-h-nl-open] .h-nl-peek__art img,
  .h-nl-peek[data-h-nl-open] .h-nl-peek__body > *,
  .h-nl-peek-btn,
  .hp-nl__form[data-h-nl-state="done"] .h-nl-field { animation: none !important; }
  .hp-nl__latest > a .hp-nl__latest-no { translate: none !important; }
  .h-nl-msg__line,
  .hp-nl__form[data-h-nl-state] .hp-nl__submit.h-btn,
  .hp-nl__form[data-h-nl-state] .hp-nl__submit.h-btn::after { animation: none !important; }
  /* No turning ring: the words global.js writes ("Subscribing...") stay readable instead. */
  .hp-nl__form[data-h-nl-state="sending"] .hp-nl__submit.h-btn { color: #fff; }
  .hp-nl__form[data-h-nl-state="sending"] .hp-nl__submit.h-btn::before { display: none; }
}
@media (forced-colors: active) {
  .h-nl-field { border: 1px solid CanvasText; }
  .h-nl-peek { border: 1px solid CanvasText; }
}