.mailing-list { max-width: 540px; margin: 48px auto 0; text-align: left; }
.mailing-list h1 { font-size: 1.35rem; margin: 0 0 12px; }
.mailing-list p { line-height: 1.5; }
.mailing-list .entry { display: flex; gap: 12px; margin: 16px 0; }
.mailing-list input[type=email] { min-width: 0; flex: 1; width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 12px; font: inherit; border-radius: 0; }
.mailing-list button { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.mailing-list button:disabled { opacity: .6; cursor: wait; }
.mailing-list .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mailing-list :focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.mailing-list [role=status] { font-size: .9rem; overflow-wrap: anywhere; }
.mailing-list [role=status]:empty:empty { display: none; }
@media (max-width: 400px) { .mailing-list .entry { flex-direction: column; } .mailing-list button { align-self: flex-end; } }

.mailing-list a { color: var(--paper); text-underline-offset: 3px; }
.unsubscribe-panel { max-width: 480px; margin: 32px auto 0; }
.unsubscribe-panel textarea { display: block; width: 100%; min-height: 110px; resize: vertical; margin: 12px 0; padding: 12px; font: inherit; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.unsubscribe-panel .actions { display: flex; justify-content: flex-end; }
.unsubscribe-panel label { display: block; line-height: 1.5; }

.unsubscribe-panel fieldset { border: 0; padding: 0; margin: 20px 0; }
.unsubscribe-panel legend { margin-bottom: 10px; }
.unsubscribe-panel .reason-choice { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.unsubscribe-panel .reason-choice input { margin: 0; width: 18px; height: 18px; accent-color: var(--yellow); }
.unsubscribe-panel p { overflow-wrap: anywhere; }