<section class="tkf-hub" aria-label="Donor recognition">
  <div class="tkf-hub__inner">
    <div id="tkf-tier-list" class="tkf-tiers" aria-live="polite">
      <div class="tkf-skeleton">Loading recognition levels…</div>
    </div>

    <!-- Data store: never displays on page -->
    <textarea id="tkf-donor-data" class="tkf-data" aria-hidden="true">
{
  "updated": "2025-12-01",
  "tiers": [
    {
      "id": "founder-circle",
      "amount_label": "$10,000+",
      "name": "Founder Circle Members",
      "description": "An early visionary investor in the next chapter of TKF’s legacy. Your leadership gift expands core training programs throughout the country and supports capacity building within the organization.",
      "donors": [
        { "name": "Charles Lowery", "photo": "" },
        { "name": "Mark and Hanna Gleiberman", "photo": "" }
      ]
    },
    {
      "id": "peace-partner",
      "amount_label": "$5,000",
      "name": "Peace Partner",
      "description": "Fully fund a 2-Day TKF Facilitator Training, equipping 10 educators to be certified to teach TKF’s Restorative workshop curriculum. Training also includes professional development for the whole school and a live assembly for students.",
      "donors": [
        { "name": "Cindy and Steve Blumkin", "photo": "" },
        { "name": "Miraglo Foundation", "photo": "" }
      ]
    },
    {
      "id": "impact-messenger",
      "amount_label": "$2,500",
      "name": "Impact Messenger",
      "description": "As an Impact Messenger, you champion TKF’s mission by spreading the message of peacebuilding, forgiveness, and restorative justice. Your support helps TKF equip students, teachers, and communities with the tools to resolve conflict, heal harm, and foster safer schools. By joining at this level, you stand as a vital messenger of hope, ensuring that compassion and accountability continue to ripple out and transform lives.",
      "donors": [
        { "name": "Ken Kebow", "photo": "" }
      ]
    },
    {
      "id": "bridge-builder",
      "amount_label": "$1,000",
      "name": "Bridge Builder",
      "description": "Sponsoring assemblies—life-changing and signature program. Fund 500 students going through the assembly.",
      "donors": []
    },
    {
      "id": "healing-ally",
      "amount_label": "$500",
      "name": "Healing Ally",
      "description": "Support a small group restorative circle experience for up to 25 students, led by a TKF facilitator. These sessions provide students a safe space to process harm, build empathy, and practice accountability — the foundation of lasting peace and healing in schools.",
      "donors": []
    },
    {
      "id": "circle-keeper",
      "amount_label": "$250",
      "name": "Circle Keeper",
      "description": "Sponsor Victims on both ends of the gun book for one classroom of books.",
      "donors": []
    },
    {
      "id": "student-manuals",
      "amount_label": "$100",
      "name": "Student Manuals",
      "description": "Sponsor a Restorative workshop student manual for 20 students.",
      "donors": []
    }
  ]
}
    </textarea>
  </div>
</section>

/* Containment: nothing outside .tkf-hub */
.tkf-hub { padding: 24px 0; }
.tkf-hub__inner { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }

.tkf-data { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tkf-tiers { display: grid; gap: 12px; }
.tkf-tier { border: 1px solid rgba(0,0,0,.12); border-radius: 16px; padding: 14px; background: #fff; }
.tkf-tier__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.10); }
.tkf-tier__amount { font-weight: 800; }
.tkf-tier__title { opacity: .75; font-weight: 650; }
.tkf-tier__desc { margin: 10px 0 12px; max-width: 90ch; opacity: .85; }

.tkf-donorgrid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .tkf-donorgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tkf-donorcard {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 120px;
  background: rgba(0,0,0,.02);
}

.tkf-avatar {
  width: 56px; height: 56px; border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  display: grid; place-items: center;
  background: #111;
  color: #fff;
  font-weight: 800;
}
.tkf-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.tkf-donorcard__name { text-align:center; font-weight: 650; line-height: 1.2; }

.tkf-empty, .tkf-skeleton { opacity: .75; font-size: 13px; padding-top: 6px; }