/* Email sign-up: the footer block on every page, the Home band, and the Join and Support pages.
   The footer, Home band and Support band sit on pine; the Join page form sits on paper. */
.subscribe-form { display: grid; gap: 8px; max-width: 34rem; }
.subscribe-form label { font: 600 12px/1.4 var(--sans); letter-spacing: .04em; }
.subscribe-row { display: flex; gap: 8px; }
.subscribe-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 6px; background: #fffefa; color: var(--ink); font: 400 16px/1.2 var(--sans); }
.subscribe-row input[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.subscribe-row button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--bcc-pine, #203d33); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.subscribe-row button:hover { background: #2f5344; }
.subscribe-row button:disabled { opacity: .7; cursor: progress; }
.subscribe-form .subscribe-note { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--ink-2); }
.subscribe-form .subscribe-note a { color: inherit; text-decoration: underline; }
.subscribe-status { margin: 0; min-height: 1.5em; font: 600 14px/1.5 var(--sans); }
.subscribe-status:empty { min-height: 0; }
.subscribe-form:is([data-state="email"], [data-state="busy"], [data-state="unavailable"]) .subscribe-status { color: var(--clay); }
.subscribe-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

:is(.site-footer, .home-subscribe, .support-join) .subscribe-form :is(label, .subscribe-note, .subscribe-status) { color: var(--bcc-cream, #efe5d2); }
:is(.site-footer, .home-subscribe, .support-join) .subscribe-form[data-state] .subscribe-status { color: var(--bcc-cream, #efe5d2); }
:is(.site-footer, .home-subscribe, .support-join) .subscribe-row input { border-color: transparent; }
:is(.site-footer, .home-subscribe, .support-join) .subscribe-row input[aria-invalid="true"] { border-color: #f1c39d; box-shadow: 0 0 0 2px #f1c39d; }
:is(.site-footer, .home-subscribe, .support-join) .subscribe-row button { background: var(--bcc-cream, #efe5d2); color: var(--bcc-pine, #203d33); }
:is(.site-footer, .home-subscribe, .support-join) .subscribe-row button:hover { background: #fff; }
.site-footer .subscribe-form .subscribe-note a { display: inline; min-height: 0; color: inherit; }

.footer-subscribe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 20px 48px; align-items: center; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #efe5d24d; }
.footer-subscribe h2 { margin: 0 0 8px; font: 500 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); color: var(--bcc-cream, #efe5d2); }
.footer-subscribe p { margin: 0; max-width: 32rem; color: var(--bcc-cream, #efe5d2); }

:is(.home-subscribe, .support-join) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 24px 56px; align-items: center; padding: clamp(32px, 5vw, 64px) var(--gutter); background: var(--bcc-pine, #203d33); color: var(--bcc-cream, #efe5d2); }
:is(.home-subscribe h2, .support-join h1) { margin: 0 0 12px; font: 500 clamp(28px, 3.4vw, 46px)/1.1 var(--serif); color: inherit; letter-spacing: -.02em; }
:is(.home-subscribe, .support-join) p { margin: 0; max-width: 36rem; font: 400 16px/1.6 var(--sans); }
:is(.home-subscribe, .support-join) .tile-eyebrow { margin: 0 0 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
:is(.home-subscribe, .support-join) :focus-visible { outline: 2px solid var(--bcc-cream, #efe5d2); outline-offset: 3px; }

.join-page { max-width: 46rem; margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--gutter); }
.join-page .join-kicker { margin: 0 0 14px; font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.join-page h1 { margin: 0 0 18px; font: 500 clamp(36px, 5vw, 60px)/1.05 var(--serif); letter-spacing: -.02em; }
.join-page .join-lede { margin: 0 0 14px; font: 400 19px/1.6 var(--sans); }
.join-page > p { margin: 0 0 28px; font: 400 16px/1.65 var(--sans); color: var(--ink-2); }
.join-page .subscribe-form { margin-bottom: 32px; }
.join-points { margin: 0; padding: 20px 0 0 18px; border-top: 1px solid var(--rule); font: 400 15px/1.7 var(--sans); color: var(--ink-2); }

.support-page { max-width: 52rem; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.support-page h2 { margin: 0 0 14px; font: 500 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; }
.support-page > p { margin: 0 0 24px; font: 400 17px/1.65 var(--sans); color: var(--ink-2); }
.support-ways { margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.support-ways li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.support-ways h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--sans); }
.support-ways p { max-width: 40rem; margin: 0 0 8px; font: 400 15px/1.65 var(--sans); color: var(--ink-2); }
.support-ways p:last-child { margin: 0; }
.support-page .support-note { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--ink-3); }

@media (max-width: 760px) {
  .footer-subscribe, .home-subscribe, .support-join { grid-template-columns: 1fr; }
  .subscribe-row { flex-direction: column; }
  .subscribe-row button { width: 100%; }
}
@media print { .footer-subscribe, .home-subscribe, .subscribe-form { display: none; } }