.donate-page {
  --donate-rule: #c8d4c5;
  --donate-soft: #edf2e9;
  --donate-forest: #173e31;
  --donate-sun: #f1d18a;
}

.donate-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 25rem;
  border-bottom: 1px solid var(--donate-rule);
  background: var(--donate-forest);
  color: #fff;
}

.donate-banner > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.donate-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(15, 47, 37, .78), rgba(22, 58, 42, .74) 58%, rgba(23, 55, 39, .7));
}

.donate-banner-content {
  display: grid;
  align-content: center;
  min-height: 25rem;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}
.donate-page h1,
.donate-page h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--ink);
}
.donate-page h1 { max-width: 14ch; margin: .35rem 0 .85rem; font-size: 3.25rem; line-height: 1.12; }
.donate-page h2 { font-size: 2rem; line-height: 1.25; }
.donate-page h3 { font-size: 1.15rem; line-height: 1.35; }
.donate-invitation .donate-reading { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; max-width: none; }
.donate-kicker { margin: 0 0 .5rem; font-family: system-ui, sans-serif; font-weight: 700; color: var(--accent); }
.donate-banner h1 { color: #fff; }
.donate-banner .donate-kicker { color: #fff2c2; }
.donate-banner-summary { max-width: 36rem; margin: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.5; }
.donate-banner .donate-banner-summary { color: #f5f4e8; }
.donate-banner .button { background: var(--donate-sun); color: #193a2d; }
.donate-banner .button:hover { background: #ffe3a5; }
.donate-banner .button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--donate-forest); }
.donate-reading { max-width: 45rem; }
.donate-invitation { padding: 3.5rem 0; background: linear-gradient(120deg, #f7f2e6, #edf2e9); }
.donate-invitation h2 { max-width: 16ch; margin: .1rem 0 0; font-size: 2.25rem; }
.donate-invitation p { max-width: 46rem; margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.7; }
.donate-invitation p:last-child { margin-bottom: 0; }
.donate-options { padding: 3.25rem 0; background: linear-gradient(120deg, #e7efe7, var(--donate-soft)); border-block: 1px solid var(--donate-rule); }
.donate-section-heading { max-width: 42rem; margin-bottom: 1.75rem; }
.donate-section-heading h2 { margin-bottom: .75rem; }
.donate-section-heading > p:last-child { margin-bottom: 0; }

.donation-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.donation-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--donate-rule);
  border-top: 4px solid var(--accent);
  border-radius: .5rem;
  background: #fffefa;
  box-shadow: 0 2px 8px rgba(35, 48, 59, .06);
}

.donation-cash { border-top-color: var(--ok); }
.donation-zelle { border-top-color: #a96c29; }
.donation-category { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.donation-method h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; color: #214638; }
.donation-method > p:not(.donation-category) { margin: .75rem 0 1.25rem; }
.donation-method .button { margin-top: auto; text-align: center; }
.donation-method .donation-method-note { font-size: .9rem; color: var(--muted); }
.donation-guidance { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 700; }
.donation-disclosure { margin-top: 1.75rem; color: #46574c; font-size: .95rem; }
.donation-disclosure p { margin: .75rem 0 0; }
.donate-impact { padding: 3.5rem 0; background: #f7f1e4; }
.donation-impact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; list-style: none; padding: 0; margin: 1.75rem 0; }
.donation-impact-list li { min-width: 0; border-top: 2px solid var(--donate-rule); padding-top: 1rem; }
.donation-impact-list h3 { margin: 0 0 .5rem; font-family: Georgia, "Times New Roman", serif; }
.donation-impact-list p { margin: 0; }
.donate-page main p, .donate-page main a, .donate-page main h2 { overflow-wrap: anywhere; }
.donate-page #payment-options { scroll-margin-top: 8rem; }

@media (max-width: 48rem) {
  .donation-methods { grid-template-columns: minmax(0, 1fr); }
  .donation-method { padding: 1.25rem; }
}

@media (max-width: 40rem) {
  .donate-page h1 { max-width: 16ch; font-size: 2.5rem; }
  .donate-page h2 { font-size: 1.625rem; }
  .donate-invitation .donate-reading { display: block; }
  .donate-invitation h2 { margin-bottom: 1rem; font-size: 1.625rem; }
  .donate-banner { min-height: 22rem; }
  .donate-banner-content { min-height: 22rem; }
  .donate-banner-content, .donate-invitation, .donate-options, .donate-impact { padding-top: 2rem; padding-bottom: 2rem; }
  .donation-impact-list { grid-template-columns: minmax(0, 1fr); }
}