/* "Get the zine in your inbox" (templates/newsletter/_subscribe.html).
 * Printed in the page's own paper and ink: on an issue those are the issue's
 * look (--zx-*, set per aesthetic), elsewhere the site theme's colours. */
.zs-signup {
    --zs-ink: var(--zx-ink, var(--text-color, #141414));
    --zs-paper: var(--zx-paper, var(--card-bg, #fff));
    --zs-hi: var(--zx-red, var(--accent-color, #d93a17));
    text-align: center;
}
.zs-signup__form { max-width: 32rem; margin: 1.25rem auto 0; }
.zs-signup__label {
    display: block; margin-bottom: 0.4rem; text-align: left;
    font-family: var(--zx-mono, ui-monospace, Menlo, monospace); font-size: 0.72rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.zs-signup__row { display: flex; gap: 0; }
.zs-signup__input {
    flex: 1 1 auto; min-width: 0; padding: 0.85rem 0.9rem; font: inherit; font-size: 1rem;
    color: var(--zs-ink); background: var(--zs-paper);
    border: 2px solid var(--zs-ink); border-right: 0; border-radius: 0;
}
.zs-signup__input::placeholder { color: var(--zs-ink); opacity: 0.45; }
.zs-signup__input:focus-visible { outline: 3px solid var(--zs-hi); outline-offset: 0; }
.zs-signup__button {
    flex: 0 0 auto; padding: 0.85rem 1.2rem; cursor: pointer; border-radius: 0;
    font-family: var(--zx-mono, ui-monospace, Menlo, monospace); font-weight: 600; font-size: 0.8rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--zs-paper); background: var(--zs-ink); border: 2px solid var(--zs-ink);
}
.zs-signup__button:hover, .zs-signup__button:focus-visible { background: var(--zs-hi); border-color: var(--zs-hi); }
.zs-signup__button:disabled { opacity: 0.6; cursor: default; }
.zs-signup__status:empty { display: none; }
.zs-signup__status { margin: 0.75rem 0 0; font-size: 1rem; text-align: left; }
.zs-signup__form--done .zs-signup__row, .zs-signup__form--done .zs-signup__label { display: none; }
.zs-signup__form--done .zs-signup__status { text-align: center; font-size: 1.15rem; }
.zs-signup__alt { margin-top: 1.25rem; font-size: 0.95rem; opacity: 0.85; }
.zs-signup__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 30rem) {
    .zs-signup__row { flex-direction: column; }
    .zs-signup__input { border-right: 2px solid var(--zs-ink); border-bottom: 0; }
}