.hero { text-align: center; }
.hero .wrap { padding-top: 60px; padding-bottom: 84px; }
.hero p { margin-left: auto; margin-right: auto; max-width: 640px; }
.eyebrow { letter-spacing: 0.3em; font-weight: 700; color: var(--navy); font-size: 14px; margin: 0 0 8px; }
.small { font-size: 14px; }
.center { text-align: center; }

main.wrap { display: grid; gap: 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: -44px; position: relative; }
.stats small { display: block; color: var(--muted); }
.stats b { font-size: 26px; color: var(--navy); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 10px 18px; font-weight: 600; }
.tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.podium .place { text-align: center; padding: 22px 16px; }
.podium .place b { display: block; font-size: 20px; color: var(--navy); margin: 8px 0 6px; overflow-wrap: anywhere; }
.podium .medal { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 20px; color: #fff; background: #8fa3b8; }
.podium .place.first { border-color: #f0d79a; background: linear-gradient(180deg, #fff8e6, #fff); padding-top: 34px; padding-bottom: 30px; }
.podium .place.first .medal { background: #d49a1a; }
.podium .place.third .medal { background: #c58a5a; }
@media (min-width: 720px) {
  .podium .place.first { order: 2; }
  .podium .place.second { order: 1; }
  .podium .place.third { order: 3; }
}

.layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }
aside { display: grid; gap: 20px; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .center { padding: 14px; margin: 0; }
td.name { font-weight: 600; overflow-wrap: anywhere; }
.giving {
  background-color: #e6f1fb;
  background-image: linear-gradient(180deg, rgba(230, 241, 251, 0.96), rgba(230, 241, 251, 0.86)), url('images/giving.jpg');
  background-size: cover; background-position: center;
}