/* Notes-by-email band. Same tokens as the rest of the site: white ground,
   #0F1419 ink, #14449E accent, #E4E7EB hairlines, Helvetica Neue, no radii,
   no shadows. Loaded by index.html and notes.html; the markup and the
   behaviour are in subscribe.js.

   The input and the button share one ink box with a hairline between them,
   which is the same construction as the segmented control in section 02, so
   the form reads as part of the house rather than as a widget. */

.l42-sub { --sub-ink:#0F1419; --sub-body:#2A3138; --sub-soft:#4A525C; --sub-muted:#6B7480;
           --sub-hair:#E4E7EB; --sub-accent:#14449E; --sub-red:#B3243B;
           --sub-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
           font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
           border-top:1px solid var(--sub-ink); margin-top:84px; padding:40px 0 0; }

.l42-sub__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
                 gap:clamp(28px,5vw,64px); align-items:start; }

.l42-sub__eyebrow { font:500 11px/1.4 var(--sub-sans); letter-spacing:0.1em; color:var(--sub-accent); }
.l42-sub__h { margin:16px 0 0; font:400 clamp(22px,2.4vw,30px)/1.2 var(--sub-sans);
              letter-spacing:-0.01em; color:var(--sub-ink); max-width:28ch; }
.l42-sub__p { margin:16px 0 0; font:400 15px/1.7 var(--sub-sans); color:var(--sub-soft); max-width:50ch; }

.l42-sub__side { display:block; }
.l42-sub__lab { display:block; font:500 10px/1.4 var(--sub-sans); letter-spacing:0.1em;
                color:var(--sub-muted); padding-bottom:11px; }

/* one ink box, hairline between the two halves */
.l42-sub__row { display:flex; border:1px solid var(--sub-ink); background:#FFFFFF; }
.l42-sub__row:focus-within { outline:2px solid var(--sub-accent); outline-offset:2px; }

.l42-sub__input { flex:1 1 auto; min-width:0; appearance:none; border:0; background:none;
                  padding:13px 14px; color:var(--sub-ink);
                  font:400 15px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;
                  font-variant-numeric:tabular-nums lining-nums; }
.l42-sub__input::placeholder { color:#98A0AA; }
.l42-sub__input:focus { outline:0; }
.l42-sub__input:disabled { color:var(--sub-muted); }

.l42-sub__btn { flex:0 0 auto; appearance:none; background:#FFFFFF; border:0;
                border-left:1px solid var(--sub-hair); cursor:pointer;
                display:inline-flex; align-items:center; gap:12px; padding:13px 18px;
                font:500 11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;
                letter-spacing:0.1em; text-transform:uppercase; color:var(--sub-ink);
                transition:background 140ms linear, color 140ms linear; }
.l42-sub__btn:hover:not(:disabled) { background:var(--sub-ink); color:#FFFFFF; border-left-color:var(--sub-ink); }
.l42-sub__btn:focus-visible { outline:2px solid var(--sub-accent); outline-offset:-4px; }
.l42-sub__btn:disabled { cursor:default; color:var(--sub-muted); }
.l42-sub__btn .arw { font:400 14px/1 var(--sub-sans); letter-spacing:0; }
.l42-sub__btn[data-busy] .arw { animation:l42subpulse 1100ms ease-in-out infinite; }
@keyframes l42subpulse { 0%,100% { opacity:0.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .l42-sub__btn[data-busy] .arw { animation:none; } }

/* off-screen bot trap. Not display:none, which some bots skip. */
.l42-sub__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Held to the width of the field above it rather than to a prose measure, so
   the small print reads as part of the form and not as a stray column. */
.l42-sub__fine { margin:14px 0 0; font:400 11.5px/1.65 var(--sub-sans); letter-spacing:0.01em;
                 color:var(--sub-muted); max-width:58ch; }

.l42-sub__msg { margin:0; font:400 13px/1.6 var(--sub-sans); color:var(--sub-red); }
.l42-sub__msg:empty { margin:0; }
.l42-sub__msg:not(:empty) { margin-top:14px; border-left:2px solid var(--sub-red); padding-left:12px; }

/* The settled state keeps the form's geometry exactly: the label stays where
   the label was and the ink box stays where the field was, now holding the
   address that was just entered. Nothing on the page moves. */
.l42-sub__doneLab { color:var(--sub-accent); }
.l42-sub__addr { flex:1 1 auto; min-width:0; padding:13px 14px; color:var(--sub-ink);
                 font:400 15px/1.4 var(--sub-sans); font-variant-numeric:tabular-nums lining-nums;
                 overflow-wrap:anywhere; }
.l42-sub__sent { flex:0 0 auto; display:flex; align-items:center;
                 border-left:1px solid var(--sub-hair); padding:13px 18px;
                 font:500 11px/1.4 var(--sub-sans); letter-spacing:0.1em; text-transform:uppercase;
                 color:var(--sub-accent); white-space:nowrap; }
.l42-sub__doneP { margin:14px 0 0; font:400 13px/1.7 var(--sub-sans); color:var(--sub-soft); max-width:46ch; }
/* Focus is moved here on success so a screen reader reads the new state, but
   the block is not in the tab order and the change is plain to see, so the
   ring would be noise. */
.l42-sub__done:focus, .l42-sub__done:focus-visible { outline:0; }

@media (prefers-reduced-motion: no-preference) {
  .l42-sub__done { animation:l42subrise 520ms cubic-bezier(.22,.7,.2,1) both; }
  @keyframes l42subrise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
}

/* Below the breakpoint the button takes its own line under the field, with the
   hairline turning into the rule between them. */
@media (max-width: 767px) {
  .l42-sub { margin-top:56px; padding-top:30px; }
  .l42-sub__grid { grid-template-columns:minmax(0,1fr); gap:26px; }
  .l42-sub__row { flex-wrap:wrap; }
  .l42-sub__input { flex:1 1 100%; padding:14px; }
  .l42-sub__btn { flex:1 1 100%; justify-content:space-between;
                  border-left:0; border-top:1px solid var(--sub-hair); }
  .l42-sub__btn:hover:not(:disabled) { border-top-color:var(--sub-ink); }
  .l42-sub__addr { flex:1 1 100%; padding:14px; }
  .l42-sub__sent { flex:1 1 100%; border-left:0; border-top:1px solid var(--sub-hair); }
}

/* Framed by its host. On the public page the band is one of two blocks under
   the closing region's own ink rule and head, so it drops its own rule and its
   own leading and lets the region carry the break. Set after the breakpoint
   block so it wins at both widths. */
.l42-sub--inzone { border-top:0; margin-top:clamp(30px,4vh,42px); padding-top:0; }