/* "Email me" box on the landing pages (2026-10-08). Mobile first; uses the site's tokens from site.css. */
.email-me-band { padding: var(--space-3) 0; }
.email-me {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--accent-soft);
  max-width: 44rem;
}
.email-me-form { margin: 0; }
.email-me-form label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.email-me-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.email-me-row input[type="email"] {
  flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  color: var(--ink);
}
.email-me-row .btn { flex: 0 0 auto; }
/* display rules above would beat the [hidden] attribute (the row hides after a send; the box hides without JS) */
.email-me-band[hidden], .email-me[hidden], .email-me-row[hidden] { display: none; }
.email-me-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.email-me-status:empty { display: none; }
.email-me-status { margin: 0.5rem 0 0; }
.email-me-note { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.email-me-call { margin: 0.5rem 0 0; }
.email-me-call a { font-weight: 700; }
@media (max-width: 30rem) {
  .email-me-row .btn { flex: 1 1 100%; }
}
.email-me-status.is-error { color: var(--ink); font-weight: 700; }
.email-me-status.is-ok { color: var(--ink); font-weight: 700; }