.donation-page { background: #20292c; }
.donation-page .site-header { background: #20292c; border-bottom: 1px solid rgba(255,255,255,.12); }
.donation-page .site-nav a { color: #fff; }
.donation-page .menu-toggle { color: #f1322e; }
.donation-main { padding: 38px 20px 76px; }
.donation-shell { max-width: 1180px; margin: 0 auto; }
.donation-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.donation-story { grid-area: story; padding-top: 18px; color: #d5dce5; }
.donation-story-kicker { margin: 0 0 12px; color: #f1322e; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.donation-story h2 { margin: 0 0 24px; color: #fff; font-size: clamp(2rem, 3.5vw, 2.8rem); }
.donation-story > p:not(.donation-story-kicker) { font-size: 1.04rem; line-height: 1.7; }
.donation-story-photo { display: block; width: 100%; max-height: 520px; margin-top: 33px; border-radius: 4px; object-fit: cover; object-position: center 24%; box-shadow: 0 14px 36px rgba(0,0,0,.18); }
.donation-follow { margin-top: 32px; padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: #10244a; }
.donation-follow h3 { margin: 0 0 10px; color: #fff; font-size: 1.3rem; }
.donation-follow p { margin: 0 0 21px; color: #d5dce5; line-height: 1.65; }
.donation-follow-link { display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 10px 18px; border-radius: 3px; background: #f1322e; color: #fff; font-size: .9rem; font-weight: 800; text-decoration: none; }
.donation-follow-link:hover, .donation-follow-link:focus-visible { background: #ce2427; }
.donation-card { grid-area: form; min-width: 0; padding: clamp(28px, 4vw, 55px); background: #fff; border-radius: 4px; box-shadow: 0 18px 55px rgba(0,0,0,.14); color: #17202a; }
.donation-kicker { margin: 0 0 8px; color: #ed3039; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.donation-card h1 { margin: 0 0 9px; color: #11264d; font-size: clamp(1.8rem, 4vw, 2.25rem); line-height: 1.18; }
.donation-lead { margin: 0 0 32px; color: #5f6871; font-size: .98rem; }
.donation-subhead { margin: 28px 0 18px; color: #17202a; font-size: 1.14rem; font-weight: 500; }
.donation-field { display: block; margin: 0 0 21px; color: #17202a; font-size: .98rem; font-weight: 500; line-height: 1.45; }
.donation-field > span:not(.optional) { color: #e33537; }
.donation-field .optional { color: #7e8791; font-size: .85rem; font-weight: 400; }
.donation-field input, .donation-field select { display: block; width: 100%; height: 51px; margin-top: 10px; padding: 0 17px; border: 1px solid #b8bec7; border-radius: 5px; background: #fff; color: #17202a; font: inherit; font-weight: 400; box-shadow: 0 1px 1px rgba(0,0,0,.025); }
.donation-field input::placeholder { color: #929ba6; }
.donation-field input:focus, .donation-field select:focus { outline: 2px solid #2975c8; outline-offset: 1px; border-color: #2975c8; }
.donation-field select:disabled { color: #424d59; opacity: 1; background: #fff; }
.donation-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.donation-amounts { margin: 32px 0 25px; padding: 0; border: 0; }
.donation-amounts legend { margin-bottom: 16px; color: #17202a; font-size: 1.04rem; line-height: 1.55; }
.donation-amounts legend span { color: #e33537; }
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amount-grid button { min-height: 53px; padding: 8px; border: 1px solid #b8bec7; border-radius: 6px; background: #fff; color: #17202a; font: inherit; font-size: 1.03rem; cursor: pointer; transition: border-color .15s, background .15s; }
.amount-grid button:hover, .amount-grid button:focus-visible { border-color: #d62d35; }
.amount-grid button.selected { border: 2px solid #e63339; background: #fff3f3; color: #a91e27; font-weight: 700; }
#other-amount-button { grid-column: span 2; }
.other-amount-field { margin: 16px 0 0; }
.other-amount-field[hidden] { display: none; }
.payment-area { min-height: 120px; padding: 22px; border-radius: 5px; background: #f3f8ff; }
.payment-area p { margin: 0; color: #65727e; font-size: .91rem; }
.payment-area p[hidden] { display: none; }
.donation-status { margin: 15px 0; color: #b22731; font-size: .89rem; }
.donation-status:empty { display: none; }
.donation-security { margin: 25px 0 28px; color: #747d87; text-align: center; font-size: .83rem; line-height: 1.5; }
.donate-button { display: block; width: 100%; min-height: 55px; border: 0; border-radius: 4px; background: #f1322e; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.donate-button:hover, .donate-button:focus-visible { background: #ce2427; }
.donate-button:disabled { opacity: .6; cursor: wait; }
.donation-policy { margin: 25px 0 0; text-align: center; font-size: .83rem; }
.donation-policy a { color: #11264d; text-decoration: underline; }
.donation-success { text-align: center; }
.donation-success p { color: #404a55; }
.donation-return-panel { max-width: 680px; padding: 40px; background: #fff; border-top: 5px solid var(--red); box-shadow: var(--shadow); }
.donation-return-panel h1 { font-size: clamp(2rem, 3vw, 2.8rem); }
.donation-frequency-note { margin: -10px 0 24px; color: #5c6476; font-size: .78rem; line-height: 1.55; }
@media (min-width: 901px) {
  .donation-layout { grid-template-areas: "story form"; }
}
@media (max-width: 900px) {
  .donation-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "story"; max-width: 680px; margin: 0 auto; gap: 42px; }
  .donation-story { padding: 0 8px; }
}
@media (max-width: 700px) {
  .donation-page .site-nav { background: #20292c; }
  .donation-main { padding: 26px 14px 55px; }
  .donation-card { padding: 31px 24px; }
  .donation-pair { gap: 12px; }
  .amount-grid { grid-template-columns: repeat(3, 1fr); }
  #other-amount-button { grid-column: span 3; }
}
@media (max-width: 430px) {
  .donation-pair { grid-template-columns: 1fr; gap: 0; }
  .payment-area { padding: 15px; }
}