/* CRANCC · Signals subscribe block · V61
   Shared by the article pages (placement A) and the home Signals section (B).
   Self-scoped: the block carries its own tokens, so it renders identically in
   both contexts without depending on which stylesheet the page loaded. */

.sub[data-subscribe]{
  --sub-ink:#11110F;
  --sub-mid:#45423A;
  --sub-muted:rgba(17,17,17,.55);
  --sub-hair:rgba(17,17,15,.14);
  --sub-sig:#FF4400;
  --sub-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sub-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  border-top:1px solid var(--sub-ink);
  padding-top:1.5rem;
  margin:3rem 0;
  color:var(--sub-ink);
  font-family:var(--sub-sans);
  text-align:left;
}
.sub[data-subscribe] *{box-sizing:border-box}

.sub-kicker{font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--sub-sig);
  font-weight:500;line-height:1.6}
.sub-line{font-family:var(--sub-serif);font-size:clamp(20px,2.5vw,26px);line-height:1.25;
  letter-spacing:-.01em;margin:.7rem 0 1.6rem;font-weight:400}

.sub-form{display:flex;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;margin:0}
.sub-fld{flex:1 1 300px;min-width:200px}
.sub-fld input{width:100%;background:none;border:none;border-bottom:1px solid var(--sub-hair);
  border-radius:0;font-family:var(--sub-sans);font-size:16px;font-weight:400;color:var(--sub-ink);
  padding:.35rem 0 .6rem;line-height:1.4;transition:border-color .25s;-webkit-appearance:none}
.sub-fld input::placeholder{color:rgba(17,17,17,.3)}
.sub-fld input:focus{outline:none;border-bottom-color:var(--sub-sig)}
.sub-fld input[aria-invalid="true"]{border-bottom-color:var(--sub-sig)}

.sub-btn{background:none;border:none;border-bottom:1px solid var(--sub-sig);border-radius:0;
  cursor:pointer;font-family:var(--sub-sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sub-ink);padding:0 0 5px;line-height:1.6;
  transition:color .25s,opacity .25s;-webkit-appearance:none}
.sub-btn:hover{color:var(--sub-sig)}
.sub-btn:focus-visible{outline:1.5px solid var(--sub-sig);outline-offset:4px}
.sub-btn[disabled]{opacity:.4;cursor:default}

.sub-teaser{margin-top:1.4rem;font-size:12px;line-height:1.7;color:var(--sub-mid);
  display:flex;gap:.6em;flex-wrap:wrap;align-items:baseline}
.sub-teaser b{font-weight:500;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sub-muted)}
.sub-teaser i{font-style:normal;font-family:var(--sub-serif);font-size:16px;color:var(--sub-ink)}

.sub-legal{margin-top:1rem;font-size:10px;line-height:1.65;color:var(--sub-muted)}
.sub-legal a{color:var(--sub-muted);border-bottom:1px solid var(--sub-hair);text-decoration:none}
.sub-legal .nb{white-space:nowrap}
.sub-legal a:hover{color:var(--sub-ink)}

/* --- states ------------------------------------------------------------- */
.sub-err{display:none;margin-top:.9rem;font-size:11px;line-height:1.6;color:var(--sub-sig);
  letter-spacing:.01em;max-width:52ch}
.sub-err.is-on{display:block}

.sub[data-subscribe].is-done .sub-form,
.sub[data-subscribe].is-done .sub-legal,
.sub[data-subscribe].is-done .sub-err,
.sub[data-subscribe].is-done .sub-teaser{display:none}
.sub-done{display:none}
.sub[data-subscribe].is-done .sub-done{display:block;animation:subIn .5s cubic-bezier(.4,0,.2,1) both}
.sub-done:focus{outline:none}
.sub-done .mark{display:flex;align-items:baseline;gap:.75rem}
.sub-done .mark span{width:18px;height:1px;background:var(--sub-sig);flex:none;transform:translateY(-6px)}
.sub-done .hd{font-family:var(--sub-serif);font-size:21px;line-height:1.3;letter-spacing:-.01em}
.sub-done p{font-size:12px;line-height:1.8;color:var(--sub-mid);margin:.9rem 0 0;max-width:54ch}
.sub-done .addr{color:var(--sub-ink);font-weight:500}
@keyframes subIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sub[data-subscribe].is-done .sub-done{animation:none}
  .sub-fld input,.sub-btn{transition:none}
}

/* --- placement B: compact, under the Signals spine ---------------------- */
.sub[data-subscribe].sub--compact{max-width:820px;margin:2.6rem auto 0;border-top-color:var(--sub-hair);padding-top:1.4rem}
.sub[data-subscribe].sub--compact .sub-line{font-size:clamp(19px,2.1vw,21px);margin:0 0 1.1rem}
.sub[data-subscribe].sub--compact .sub-legal{margin-top:1rem}
.sub[data-subscribe].sub--compact .sub-done .hd{font-size:19px}

@media(max-width:640px){
  .sub[data-subscribe]{margin:2.4rem 0}
  .sub-form{gap:1.3rem}
  .sub-form{flex-direction:column;align-items:flex-start}
  .sub-fld{width:100%;flex:none}
  .sub-btn{align-self:flex-start}
}