:root{
  --heroes-surface:#ffffff;
  --heroes-surface-soft:#f7faf7;
  --heroes-forest:#073f2c;
  --heroes-gold:#d2ac31;
  --heroes-border:#c9d9d2;
  --heroes-muted:#62786f;
  --heroes-radius:16px;
  --heroes-touch:44px;
  --heroes-gap:12px;
}
.constellation-directory,.constellation-search,.constellation-search-field,.constellation-status,.hero-list,.hero-chip,.constellation-pagination,.constellation-pages{min-width:0;max-width:100%}
.constellation-search-field input{-webkit-appearance:none;appearance:none;min-width:0}
.hero-chip{min-width:0;overflow-wrap:anywhere}
.hero-chip strong,.hero-chip p{max-width:100%;overflow-wrap:anywhere}
.hero-chip p{line-height:1.45}
.constellation-pagination{width:100%;overflow:hidden}
.constellation-pagination button{min-width:var(--heroes-touch);min-height:var(--heroes-touch);touch-action:manipulation}
.constellation-loader{width:100%;height:100%;min-height:clamp(150px,32vh,260px)}
@media (min-width:1024px) and (max-width:1279px){
  .hero-stage{padding-inline:clamp(28px,5vw,64px)}
  .hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media (min-width:681px) and (max-width:1023px){
  .hero-stage{padding:44px clamp(24px,5vw,48px)}
  .family-head{align-items:flex-start}
  .constellation-directory{align-items:flex-end;gap:18px}
  .constellation-search{width:min(500px,68%)}
  .constellation-status{flex:1;font-size:.86rem}
  .hero-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hero-chip{padding:17px}
  .constellation-pagination{flex-wrap:nowrap;margin-top:24px}
}
@media (max-width:680px){
  .hero-stage{width:100%;padding:26px clamp(14px,4.5vw,22px)!important;overflow:hidden}
  .family-head{display:block;margin-bottom:18px}
  .family-head h2{font-size:clamp(1.8rem,9vw,2.65rem);line-height:1}
  .family-head p{font-size:.96rem;line-height:1.45}
  .constellation-directory{width:100%;gap:8px;margin:0 0 16px}
  .constellation-search{width:100%}
  .constellation-search label{font-size:.75rem;letter-spacing:.07em}
  .constellation-search-field{width:100%;padding-inline:13px;border-radius:14px}
  .constellation-search-field input{min-height:50px;font-size:16px}
  .constellation-search small{font-size:.78rem;line-height:1.35}
  .constellation-status{min-height:1.25rem;font-size:.82rem;line-height:1.35}
  .hero-list{grid-template-columns:1fr!important;gap:10px;margin-top:14px}
  .hero-chip{padding:15px 16px;border-radius:13px}
  .hero-chip .spark{flex:0 0 auto}
  .hero-chip strong{font-size:.98rem;line-height:1.3}
  .hero-chip p{margin-bottom:0;font-size:.86rem}
  .constellation-pagination{display:grid;grid-template-columns:minmax(82px,1fr) auto minmax(82px,1fr);gap:6px;margin:20px 0 4px}
  .constellation-pagination>button{width:100%;padding:8px 9px;font-size:.78rem;white-space:nowrap}
  .constellation-pages{justify-content:center;gap:4px}
  .constellation-pages button{min-width:40px;padding:8px;font-size:.84rem}
}
@media (max-width:359px){
  .hero-stage{padding-inline:12px!important}
  .family-head h2{font-size:1.72rem}
  .constellation-search-field{padding-inline:10px}
  .constellation-search-field>span{font-size:1.15rem}
  .constellation-search input{font-size:16px}
  .hero-chip{padding:13px}
  .constellation-pagination{grid-template-columns:1fr 42px 1fr;gap:4px}
  .constellation-pagination>button{padding-inline:6px;font-size:.72rem}
  .constellation-pages button{min-width:42px}
}
@media (min-width:480px) and (max-width:680px){
  .hero-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .hero-stage{padding-top:18px!important;padding-bottom:20px!important}
  .constellation-directory{margin-bottom:10px}
  .hero-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  .hero-chip{padding:12px 14px}
  .constellation-loader{min-height:130px}
}
@media (prefers-reduced-motion:reduce){.constellation-loader i{animation:none}}
@media (forced-colors:active){.constellation-search-field,.constellation-pagination button,.hero-chip{border:1px solid CanvasText}}


/* Keep directory pagination in document flow; neutralize legacy mobile positioning. */
body .hero-stage .constellation-pagination{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  z-index:auto!important;
  float:none!important;
  clear:both!important;
  transform:none!important;
  translate:none!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}


/* Mobile constellation cards: large tier badge on the left, donor details on the right. */
@media (max-width:680px){
  .hero-list{grid-template-columns:1fr!important}
  .hero-chip:not(.constellation-empty){
    display:grid!important;
    grid-template-columns:minmax(112px,34%) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    row-gap:4px!important;
    align-items:center!important;
    min-height:142px!important;
    padding:10px 14px 10px 8px!important;
  }
  .hero-chip:not(.constellation-empty) .hero-tier-badge{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    width:100%!important;
    height:100%!important;
    max-height:132px!important;
    margin:0!important;
    padding:4px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 10px 12px rgba(16,47,32,.24))!important;
  }
  /* Podium medals: ribboned award artwork. Places 4–10 remain plain numbers. */
.leader .leader-rank{position:relative;display:grid;place-items:center;width:50px;height:58px;flex:0 0 50px;margin:0;padding-top:8px;font:800 1rem/1 Georgia,serif;color:#fffaf0;text-shadow:0 1px 2px rgba(38,25,8,.55);filter:drop-shadow(0 5px 5px rgba(15,42,30,.2))}
.leader .leader-rank::before,.leader .leader-rank::after{content:"";position:absolute;z-index:0;top:0;width:17px;height:28px;background:#164f39;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.leader .leader-rank::before{left:9px;transform:rotate(-8deg)}
.leader .leader-rank::after{right:9px;transform:rotate(8deg)}
.leader .leader-rank i{position:absolute;z-index:1;left:7px;bottom:0;width:36px;height:36px;border-radius:50%;box-sizing:border-box;box-shadow:inset 0 0 0 2px rgba(255,255,255,.48),inset 0 -6px 10px rgba(53,34,4,.25)}
.leader .leader-rank i::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.62);border-radius:50%}
.leader .leader-rank span{position:absolute;z-index:2;left:0;right:0;bottom:10px;text-align:center}
.leader .leader-rank-1 i{border:1px solid #a97812;background:radial-gradient(circle at 32% 25%,#fff7bd 0,#e9c452 38%,#b77a10 76%,#805008 100%)}
.leader .leader-rank-2 i{border:1px solid #7d898f;background:radial-gradient(circle at 32% 25%,#fff 0,#dfe6e9 38%,#9da9af 76%,#68747a 100%)}
.leader .leader-rank-3 i{border:1px solid #88502b;background:radial-gradient(circle at 32% 25%,#ffd0a4 0,#cb7c45 38%,#914b28 76%,#62301c 100%)}
.leader .leader-position{display:block;width:50px;flex:0 0 50px;margin:0;color:#174a38;font:800 1rem/1 Georgia,serif;text-align:center}
@media (max-width:680px){.leader .leader-rank{width:46px;height:54px;flex-basis:46px}.leader .leader-rank i{left:6px;width:34px;height:34px}.leader .leader-position{width:46px;flex-basis:46px}}

.hero-chip.single-donation .single-donation-symbol{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    justify-self:center!important;
  }
  .hero-chip:not(.constellation-empty)>strong{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    margin:0!important;
    font-size:clamp(.96rem,4vw,1.08rem)!important;
    line-height:1.22!important;
  }
  .hero-chip:not(.constellation-empty)>p{
    grid-column:2!important;
    grid-row:2!important;
    align-self:start!important;
    margin:2px 0 0!important;
    font-size:clamp(.8rem,3.3vw,.9rem)!important;
    line-height:1.38!important;
  }
}

.hero-chip.single-donation .single-donation-symbol{
  display:grid;
  place-items:center;
  width:clamp(70px,8vw,104px);
  height:clamp(70px,8vw,104px);
  flex:0 0 auto;
  border:1px solid rgba(215,189,99,.72);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#0d6b50 0,#07513d 47%,#043628 100%);
  color:#efd875;
  font:700 clamp(36px,4vw,54px)/1 Georgia,serif;
  text-shadow:0 0 15px rgba(239,216,117,.62);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),0 9px 22px rgba(4,54,40,.2);
}
@media (max-width:359px){
  .hero-chip:not(.constellation-empty){
    grid-template-columns:minmax(94px,32%) minmax(0,1fr)!important;
    column-gap:10px!important;
    min-height:124px!important;
    padding:8px 10px 8px 6px!important;
  }
  .hero-chip:not(.constellation-empty) .hero-tier-badge{max-height:114px!important;padding:2px!important}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .hero-list{grid-template-columns:1fr!important}
  .hero-chip:not(.constellation-empty){min-height:126px!important}
  .hero-chip:not(.constellation-empty) .hero-tier-badge{max-height:116px!important}
}

/* Final hero recognition layout: rank medal + tier badge, with a restrained living motion. */
.leader{grid-template-columns:58px minmax(0,1fr) auto}
.leader-place{display:flex!important;align-items:center;justify-content:center;min-width:0}
.heroes-featured .featured-tier-badge{animation:animatrixHeroBadgeFloat 3.8s ease-in-out infinite;transform-origin:50% 58%}
.heroes-featured .hero-person:nth-child(2) .featured-tier-badge{animation-delay:.35s}
.heroes-featured .hero-person:nth-child(3) .featured-tier-badge{animation-delay:.7s}
@keyframes animatrixHeroBadgeFloat{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 16px 20px rgba(16,47,32,.27))}50%{transform:translateY(-7px) scale(1.025);filter:drop-shadow(0 22px 25px rgba(16,47,32,.34))}}
@media(max-width:760px){.leader{grid-template-columns:50px minmax(0,1fr) auto!important}.heroes-featured .featured-tier-badge{width:min(220px,90%);height:180px}}
@media(prefers-reduced-motion:reduce){.heroes-featured .featured-tier-badge{animation:none}}


/* Global podium artwork (desktop and mobile). */
.leader .leader-rank{position:relative!important;display:grid!important;place-items:center!important;width:50px!important;height:58px!important;flex:0 0 50px!important;margin:0!important;padding-top:8px!important;font:800 1rem/1 Georgia,serif!important;color:#fffaf0!important;text-shadow:0 1px 2px rgba(38,25,8,.55)!important;filter:drop-shadow(0 5px 5px rgba(15,42,30,.2))!important}
.leader .leader-rank::before,.leader .leader-rank::after{content:""!important;position:absolute!important;z-index:0!important;top:0!important;width:17px!important;height:28px!important;background:#164f39!important;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)!important}
.leader .leader-rank::before{left:9px!important;transform:rotate(-8deg)!important}
.leader .leader-rank::after{right:9px!important;transform:rotate(8deg)!important}
.leader .leader-rank i{position:absolute!important;display:block!important;z-index:1!important;left:7px!important;bottom:0!important;width:36px!important;height:36px!important;border-radius:50%!important;box-sizing:border-box!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.48),inset 0 -6px 10px rgba(53,34,4,.25)!important}
.leader .leader-rank i::after{content:""!important;position:absolute!important;inset:5px!important;border:1px solid rgba(255,255,255,.62)!important;border-radius:50%!important}
.leader .leader-rank span{position:absolute!important;z-index:2!important;left:0!important;right:0!important;bottom:10px!important;text-align:center!important}
.leader .leader-rank-1 i{border:1px solid #a97812!important;background:radial-gradient(circle at 32% 25%,#fff7bd 0,#e9c452 38%,#b77a10 76%,#805008 100%)!important}
.leader .leader-rank-2 i{border:1px solid #7d898f!important;background:radial-gradient(circle at 32% 25%,#fff 0,#dfe6e9 38%,#9da9af 76%,#68747a 100%)!important}
.leader .leader-rank-3 i{border:1px solid #88502b!important;background:radial-gradient(circle at 32% 25%,#ffd0a4 0,#cb7c45 38%,#914b28 76%,#62301c 100%)!important}
.leader .leader-position{display:block!important;width:50px!important;flex:0 0 50px!important;margin:0!important;color:#fff!important;font:800 1rem/1 Georgia,serif!important;text-align:center!important}
@media(max-width:680px){.leader .leader-rank{width:46px!important;height:54px!important;flex-basis:46px!important}.leader .leader-rank i{left:6px!important;width:34px!important;height:34px!important}.leader .leader-position{width:46px!important;flex-basis:46px!important}}


/* Simple donor ranking: no medals, ribbons, circles, or decorative symbols. */
.leader .leader-position{
  display:block!important;
  width:50px!important;
  flex:0 0 50px!important;
  margin:0!important;
  color:#174a38!important;
  font:800 1.08rem/1 Georgia,serif!important;
  text-align:center!important;
}
.leader .leader-position-top{
  color:#c79a22!important;
  font-size:1.75rem!important;
  line-height:1!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7)!important;
}
.leader .leader-rank,
.leader .leader-rank::before,
.leader .leader-rank::after,
.leader .leader-rank i,
.leader .leader-rank i::after{display:none!important}
@media(max-width:680px){
  .leader .leader-position{width:46px!important;flex-basis:46px!important}
  .leader .leader-position-top{font-size:1.62rem!important}
}