/* subscribe.css — v4 "Measured Life" subscribe page.
   Reuses story.css chrome (.story-top / .brand / .doors / .theme-toggle / .skip
   / .dx-foot-bar); this sheet only styles the pitch + form. */

.sub-main { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-9);
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 901px) { .sub-main { grid-template-columns: 1.05fr 0.95fr; } }

.sub-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ember); }
.sub-title { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1);
  line-height: var(--lh-tight); margin-top: var(--sp-3); }
.sub-lede { margin-top: var(--sp-4); color: var(--ink); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }
.sub-sub { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }

/* what lands in your inbox */
.wyg { margin-top: var(--sp-6); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.wyg-h { padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-hair); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.wyg-row { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-top: var(--border-hair); }
.wyg-row:first-of-type { border-top: 0; }
.wyg-ic { color: var(--ember); font-family: var(--font-mono); flex-shrink: 0; }
.wyg-t { font-size: var(--fs-body); color: var(--ink-muted); line-height: var(--lh-relaxed); }
.wyg-t strong { color: var(--ink); font-weight: var(--weight-med); }

.sub-meta { margin-top: var(--sp-5); border-left: 2px solid var(--ember); padding-left: var(--sp-4); }
.sub-meta-h { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-faint); }
.sub-meta-b { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.sub-count-line { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.sub-count-line b { color: var(--ember); font-weight: var(--weight-reg); }
.sub-road { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); }
.sub-road strong { color: var(--ink-muted); font-weight: var(--weight-reg); }

/* form card */
.sub-card { border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 901px) { .sub-card { position: sticky; top: var(--sp-6); } }
.sub-card-h { padding: var(--sp-4); border-bottom: var(--border-hair); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ember); }
.sub-card-b { padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-4); }
.sub-field { display: grid; gap: var(--sp-2); }
.sub-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); }
.sub-label .opt { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.sub-input { background: var(--page); border: var(--border-hair); border-radius: var(--radius-xs); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-body); padding: var(--sp-3); width: 100%; }
.sub-input::placeholder { color: var(--ink-faint); }
.sub-input:focus { outline: none; border-color: var(--ember); }
.sub-note { font-size: var(--fs-small); color: var(--ink-faint); line-height: var(--lh-relaxed); }
.sub-note a { color: var(--ink-muted); }
.sub-btn { width: 100%; cursor: pointer; background: var(--ember); color: var(--page); border: 0;
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.04em; padding: var(--sp-3) var(--sp-4); }
.sub-btn:hover { filter: brightness(1.06); }
.sub-btn:active { filter: brightness(0.94); }
.sub-btn:disabled { opacity: 0.55; cursor: progress; filter: none; }
.sub-input[aria-invalid="true"] { border-color: var(--ember); }
.sub-status { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); text-align: center; min-height: 18px; }
.sub-status.is-error { color: var(--ember); }
.sub-status.is-info { color: var(--ink-muted); }

.sub-success { display: none; border: var(--border-hair); border-radius: var(--radius-sm); background: var(--ember-wash);
  padding: var(--sp-7) var(--sp-5); text-align: center; }
.sub-success .si { color: var(--ember); font-family: var(--font-mono); font-size: 1.75rem; /* fs-ok: success-state glyph, sized to the confirmation mark */ }
.sub-success .st { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ember); margin-top: var(--sp-2); }
.sub-success .sb { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.sub-success a { color: var(--ember); }

.sub-btn:focus-visible, .sub-input:focus-visible, .doors a:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}