.ssub-form {
    --ssub-bg: transparent;
    --ssub-border: currentColor;
    --ssub-accent: currentColor;
    --ssub-accent-text: #bbbbbb;
    --ssub-ok: #2e7d4f;
    --ssub-err: #c0392b;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: inherit;
    max-width: 100%;
}
.ssub-email {
    font: 1.1rem;
    padding: .45rem .7rem;
    min-width: 0;
    width: 14rem;
    background: var(--ssub-bg);
    color: inherit;
    border: 1px solid var(--ssub-border);
    border-radius: 3px;
}
.ssub-btn {
    font: 1.1rem;
    padding: .45rem .9rem;
    border: 1px solid var(--ssub-accent);
    border-radius: 3px;
    background: #030204;
    color: var(--ssub-accent-text);
    cursor: pointer;
    white-space: nowrap;
}
.ssub-btn:disabled { opacity: .6; cursor: wait; }
.ssub-email:focus-visible,
.ssub-btn:focus-visible { outline: 2px solid var(--ssub-accent); outline-offset: 2px; }

/* Message sits under the form so the header height doesn't jump */
.ssub-msg {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .25rem;
    font-size: .9rem;
    white-space: nowrap;
}
.ssub-msg.is-ok { color: var(--ssub-ok); }
.ssub-msg.is-error { color: var(--ssub-err); }

/* Honeypot */
.ssub-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 600px) {
    .ssub-email { width: 100%; flex: 1; }
    .ssub-form { display: flex; width: 100%; }
}