/* Support the team. Classes start with su-. A donate panel, then sponsor bands spread down the page. */
/* donate */
.su-give{display:grid;justify-items:start;gap:16px;margin-top:28px;padding:44px 40px;background:var(--surface);border-top:4px solid var(--baby)}
.su-give h2{font:700 clamp(2.2rem,5vw,3rem)/1 var(--display)}
.su-donate{min-height:56px;padding-inline:34px}
.su-donate-note{color:var(--muted);font-size:1rem;max-width:56ch}
.su-store{margin-top:20px}
.su-qr{margin:6px 0 0}
.su-qr img{display:block;width:200px;height:200px}
.su-qr figcaption{margin-top:10px;max-width:200px;color:var(--muted);font-size:.9375rem;line-height:1.35}
@media (min-width:760px){.su-give{grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:start}.su-give>*{grid-column:1}.su-give>.su-qr{grid-column:2;grid-row:1/span 4;align-self:center;margin:0}}
@media (max-width:760px){.su-give{padding:30px 22px}.su-donate{width:100%}}
@media (max-width:559px),(pointer:coarse) and (max-height:500px){.su-qr{display:none}}
.su-band{margin-top:64px}
.su-band__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.su-band__h h2{font:700 1.9rem/1 var(--display);letter-spacing:.03em}
.su-band__s{color:var(--muted);font:600 .9375rem/1.3 var(--body)}
.su-tiles{display:grid;gap:16px;margin-top:22px}
.su-tiles--gold{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.su-tiles--silver{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.su-tiles--bronze{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.su-t{display:grid;align-content:center;gap:6px;padding:22px 24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none}
.su-t b{font:700 1.4rem/1.15 var(--display);letter-spacing:.01em}
.su-t span{color:var(--muted);font-size:1.0625rem;line-height:1.4}
.su-t em{margin-top:4px;color:var(--ink);font:600 .875rem/1 var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.su-t--gold{min-height:156px;border-top:4px solid var(--baby)}
.su-t--gold b{font-size:1.9rem}
.su-t--silver{min-height:120px}
.su-t--bronze{min-height:84px;padding:16px 20px}
.su-t--bronze b{font-size:1.15rem}
.su-t .sf-plate{height:96px}
.su-t--gold .sf-plate{height:112px}
.su-t--bronze .sf-plate{height:64px}
@media (hover:hover){a.su-t:hover{background:var(--surface-2)}}
.su-t--open{border:1px dashed var(--muted);background:transparent;color:var(--muted)}
.su-t--open b{color:var(--muted);font-weight:700}
.su-t--open span{font-size:.9375rem}
.su-tiles--bronze .su-t--open{min-height:84px}
@media (hover:hover){a.su-t--open:hover{border-color:var(--ink);background:transparent}a.su-t--open:hover b{color:var(--ink)}}

/* becoming a sponsor, and volunteering */
.su-become,.su-vol{margin-top:64px;max-width:760px}
.su-become h2,.su-vol h2{font:700 1.9rem/1 var(--display)}
.su-become>p,.su-vol>p{margin-top:12px;color:var(--muted);font-size:1.125rem}
.su-levels{margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.su-levels summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;font:600 1.125rem/1.2 var(--body);cursor:pointer;list-style:none}
.su-levels summary::-webkit-details-marker{display:none}
.su-levels summary::after{content:"";flex:none;width:12px;height:12px;margin:-6px 6px 0 0;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform .15s,margin .15s}
.su-levels[open] summary::after{margin-top:6px;transform:rotate(-135deg)}
.su-levels__g{display:grid;gap:22px 32px;padding:6px 0 10px}
@media (min-width:760px){.su-levels__g{grid-template-columns:repeat(3,1fr)}}
.su-levels h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line);font:700 1.4rem/1.2 var(--display)}
.su-levels__p{font:700 1.4rem/1.2 var(--display);color:var(--ink)}
.su-levels__n b{color:var(--ink)}
.su-become{max-width:none}.su-become>p,.su-become .su-contact{max-width:760px}
.su-levels ul{display:grid;gap:6px;margin-top:8px;color:var(--muted)}
.su-levels li::before{content:"\2013  "}
.su-levels__n{padding-bottom:18px;color:var(--muted)}
.su-contact{margin-top:20px}

/* hold the space while the data loads (slow phones), so nothing jumps. Measured for the current sponsor list; re-measure if the number of places changes. */
#su-gold{min-height:328px}#su-silver{min-height:543px}#su-bronze{min-height:631px}
@media (min-width:360px){#su-silver{min-height:512px}}
@media (min-width:390px){#su-silver{min-height:507px}}
@media (min-width:480px){#su-bronze{min-height:416px}}
@media (min-width:560px){#su-silver{min-height:292px}#su-bronze{min-height:338px}}
@media (min-width:640px){#su-bronze{min-height:314px}}
@media (min-width:760px){#su-gold{min-height:156px}#su-silver{min-height:256px}#su-bronze{min-height:245px}}
@media (min-width:820px){#su-silver{min-height:266px}}
@media (min-width:900px){#su-bronze{min-height:307px}}
@media (min-width:1000px){#su-silver{min-height:242px}#su-bronze{min-height:270px}}
@media (min-width:1100px){#su-silver{min-height:151px}#su-bronze{min-height:307px}}
.su-contact--mail{padding:18px 22px;border:1px solid var(--line);background:var(--surface);font-size:1.125rem}
.su-contact--mail b{display:block;margin-bottom:4px;font:700 1.4rem/1.2 var(--display)}
.su-contact a{overflow-wrap:anywhere}
.su-t b,.su-t span{overflow-wrap:anywhere}