/* Get Involved: gold line. Donate form, tear-off flyers, one contact form they all feed. */

/* donate */
.donate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 7vw, 120px); align-items: start; }
.donate__uses { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.donate__uses li { display: grid; gap: 2px; padding-left: 22px; position: relative; font: 400 .95rem/1.55 var(--f-body); color: var(--cream-soft); }
.donate__uses li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--u, var(--gold)); }
.donate__uses li:nth-child(1)::before { background: var(--teal); } .donate__uses li:nth-child(2)::before { background: var(--mustard); } .donate__uses li:nth-child(3)::before { background: var(--rose); }
.donate__uses b { font: 500 1.08rem/1.1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.give { position: relative; padding: clamp(28px, 3vw, 44px); background: var(--black-2); border-top: 10px solid var(--gold); box-shadow: 0 24px 40px rgb(0 0 0 / .45); }
.give__amounts { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.give__legend { margin-bottom: 14px; font: 500 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-soft); }
.amt { position: relative; display: block; }
.amt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.amt span { display: block; padding: 14px 10px; text-align: center; border: 1px solid rgb(241 233 216 / .35); font: 500 19.2px/1 var(--f-label); letter-spacing: .08em; color: var(--cream); transition: background-color .14s var(--ease-out), color .14s, border-color .14s; }
.amt:hover span { border-color: var(--cream); }
.amt input:checked + span { background: var(--gold); border-color: var(--gold); color: #000; }
.amt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.give__other { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.give__other[hidden] { display: none; }
.give__currency { font: 500 19.2px/1 var(--f-label); color: var(--cream); }
.give__custom { font-family: var(--f-mono); }
.give__monthly { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 400 .95rem/1.4 var(--f-body); color: var(--cream); cursor: pointer; }
.give__monthly input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); }
.give .btn--big { width: 100%; margin-top: 20px; }
@media (max-width: 900px) { .donate { grid-template-columns: minmax(0, 1fr); } }

/* tear-off flyers */
.tearoffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.tearoff { position: relative; transform: rotate(var(--tilt)); filter: drop-shadow(0 16px 24px rgb(0 0 0 / .45)); }
.tearoff::before { content: ""; position: absolute; left: 50%; top: -12px; z-index: 2; width: 64px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgb(230 220 196 / .85); }
.tearoff__sheet { padding: 30px 26px 24px; background: var(--paper) url("/assets/paper.webp") center / cover; color: var(--ink-soft); }
.tearoff__kind { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink-soft); font: 500 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }
.tearoff__title { margin: 0 0 12px; font: 800 clamp(1.488rem, 2.108vw, 2.046rem)/1 var(--f-label); letter-spacing: 0; text-transform: uppercase; color: var(--t); text-wrap: balance; }
.tearoff:nth-child(3) .tearoff__title { color: #8a5d0f; }
.tearoff__body { margin: 0; font: 400 .95rem/1.55 var(--f-body); color: var(--ink-mid); }
.tearoff__tabs { display: grid; grid-template-columns: repeat(4, 1fr); text-decoration: none; background: var(--paper) url("/assets/paper.webp") center bottom / cover; border-top: 2px dashed rgb(20 18 16 / .45); }
.tearoff__tabs span { display: grid; place-items: center; height: 96px; border-left: 2px dashed rgb(20 18 16 / .3); color: var(--ink-soft); transition: background-color .2s, color .2s; }
.tearoff__tabs i { font: 500 12px/1 var(--f-label); font-style: normal; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: rotate(-90deg); }
.tearoff__tabs span:last-child { border-left: 0; }
.tearoff__tabs:hover span:first-child, .tearoff__tabs:focus-visible span:first-child { background: color-mix(in srgb, var(--t) 72%, #000); color: #fff; }
.tearoff.is-torn .tearoff__tabs span:first-child { visibility: hidden; }
@media (max-width: 900px) { .tearoffs { grid-template-columns: minmax(0, 1fr); max-width: 440px; } }
.ways__more { margin: clamp(40px, 4vw, 60px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font: 400 1rem/1.6 var(--f-body); color: var(--cream-soft); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.contact__send { margin-top: 22px; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact__email { margin: 18px 0 0; font: 500 .95rem/1.5 var(--f-label); letter-spacing: .02em; color: var(--cream-soft); }
.contact__email a { color: var(--gold); text-underline-offset: 4px; overflow-wrap: anywhere; }

/* the Zeffy donation form, embedded (white form on the dark card) */
.give--zeffy { padding: clamp(14px, 1.6vw, 22px); }
.give__frame { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
.give__note { margin: 14px 4px 2px; color: var(--cream-soft); }
.give__note a { color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 600px) { .give__frame { height: 880px; } }