/* NextGen sponsors: a moving homepage strip and a quiet About-page directory.
   Every sponsor sits on its own card, in its own colours: equal cards even out logos of very
   different shapes, and the brands read as the people backing the day rather than as grey
   marks. Shared brand tokens and buttons come from site.css. */

/* ---------- the card both places share ---------- */
.spon__card{position:relative;display:flex;align-items:center;justify-content:center;border-radius:18px;
  background:#fff;border:1px solid var(--rule);text-decoration:none;color:var(--ink);
  box-shadow:0 1px 0 rgba(11,11,15,.03),0 22px 44px -34px rgba(11,11,15,.32);
  transition:transform .5s var(--ease),border-color .35s var(--ease),box-shadow .5s var(--ease)}
.spon__card img{display:block;width:auto;height:var(--h,40px);max-width:78%;object-fit:contain;
  transition:transform .6s var(--ease)}
/* the arrow in the corner says the card leaves for the sponsor's own site */
.spon__go{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:var(--accent);color:#06161A;opacity:0;transform:scale(.6) rotate(-45deg);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.spon__go svg{width:12px;height:12px}
.spon__card:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.spon__card:focus-visible .spon__go{opacity:1;transform:none}
@media (hover:hover){
  .spon__card:hover{transform:translateY(-5px);border-color:var(--accent);
    box-shadow:0 1px 0 rgba(11,11,15,.03),0 30px 54px -30px rgba(0,122,116,.45)}
  .spon__card:hover img{transform:scale(1.04)}
  .spon__card:hover .spon__go{opacity:1;transform:none}
}

/* ---------- homepage ---------- */
.spon{padding:clamp(64px,9vw,128px) 0;background:var(--paper)}
.spon__head,.spon__foot{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.spon__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(30px,3.6vw,52px)}
.spon__eyebrow{margin-bottom:18px;font:800 11px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.spon__title{font-size:clamp(38px,4.6vw,70px);line-height:1.06}
.spon__ctas{flex:none;display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-bottom:4px}
.spon__join{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 12px/1 var(--f-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--accent);text-underline-offset:6px;transition:text-decoration-color .3s var(--ease)}
.spon__join:hover{text-decoration-color:var(--ink)}

/* the strip: the cards drift by, and the edges fade into the paper so they arrive and leave */
.spon__marquee{--gap:clamp(16px,1.6vw,24px);overflow:hidden;padding-block:clamp(12px,1.6vw,20px) clamp(30px,3.4vw,46px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.spon__track{display:flex;width:max-content;animation:spon-slide 90s linear infinite}
.spon__run{display:flex;align-items:center;gap:var(--gap);list-style:none;margin:0;padding:0 calc(var(--gap) / 2)}
.spon__logo{flex:0 0 auto}
.spon__logo .spon__card{width:clamp(220px,19vw,280px);height:clamp(120px,9.6vw,148px)}
.spon__marquee:hover .spon__track,.spon__marquee:focus-within .spon__track{animation-play-state:paused}
@keyframes spon-slide{to{transform:translate3d(-50%,0,0)}}
.spon__marquee.is-live .spon__track{animation:none;will-change:transform}
.spon__marquee.is-live{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.spon__marquee.is-live.is-held{cursor:grabbing}
.spon__marquee.is-live img{-webkit-user-drag:none;pointer-events:none}
.spon__marquee.is-held .spon__card{transform:none}

.spon__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;font:500 13px/1.6 var(--f-sans);color:var(--ink-2)}
.spon__foot p{display:flex;align-items:center;gap:12px}
.spon__foot p::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}

/* ---------- About page: the directory ---------- */
.ab--spon .spon__directory-title{margin-top:clamp(16px,2.4vh,24px);max-width:15ch;font-size:clamp(40px,5.4vw,84px);line-height:1.06;letter-spacing:-.035em}
.spon__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin:clamp(34px,5vh,60px) 0 0;padding:0;list-style:none}
.spon__partner{min-width:0}
.spon__partner .spon__card{flex-direction:column;align-items:stretch;justify-content:space-between;height:100%;min-height:clamp(220px,19vw,268px);padding:clamp(18px,1.8vw,24px)}
.spon__mark{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:14px 0 22px}
.spon__mark img{max-width:86%}
/* room for a two-line name, set to the foot, so every card's rule sits at the same height */
.spon__who{--lines:2;display:flex;flex-direction:column;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--rule);
  min-height:calc(14px + 13px * 1.3 * var(--lines) + 4px + 12px * 1.3)}
.spon__name{display:block;font:800 13px/1.3 var(--f-sans);letter-spacing:.04em;color:var(--ink)}
.spon__site{display:block;margin-top:4px;font:600 12px/1.3 var(--f-sans);color:var(--accent-ink);overflow-wrap:anywhere}
.spon__more{margin-top:clamp(26px,4vh,40px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font:500 clamp(15px,1.25vw,18px)/1.5 var(--f-sans);color:var(--ink-2)}
/* where a pointer can hover, a card shows only its logo, centred; the name and address rise in under it
   on hover or keyboard focus. Touch screens keep them in view, and screen readers read them either way. */
@media (hover:hover){
  .spon__partner .spon__mark{transform:translateY(34px);transition:transform .55s var(--ease)}
  .spon__partner .spon__who{opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
  .spon__partner .spon__card:hover .spon__mark,.spon__partner .spon__card:focus-visible .spon__mark{transform:none}
  .spon__partner .spon__card:hover .spon__who,.spon__partner .spon__card:focus-visible .spon__who{opacity:1;transform:none;transition-delay:.08s}
}

@media (max-width:900px){
  .spon__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .spon__head{align-items:flex-start;flex-direction:column;gap:22px}
  .spon__ctas{flex-wrap:wrap;gap:12px 22px}
  .spon__marquee{--gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .spon__track{animation-duration:78s}
  .spon__logo .spon__card{width:186px;height:104px;border-radius:15px}
  .spon__logo img{height:calc(var(--h,40px) * .78)}
  .spon__foot{font-size:12px;gap:12px}
}
@media (max-width:420px){
  .spon__grid{gap:12px}
  .spon__partner .spon__card{min-height:184px;padding:14px;border-radius:15px}
  .spon__partner img{height:calc(var(--h,40px) * .82)}
  .spon__who{--lines:3;min-height:calc(12px + 12px * 1.3 * var(--lines) + 4px + 11px * 1.3 * 2);padding-top:12px}
  .spon__name{font-size:12px}
  .spon__site{font-size:11px}
  .spon__go{top:9px;right:9px}
}
/* the narrowest phones: one card a row, so names and addresses never break mid-word */
@media (max-width:360px){
  .spon__grid{grid-template-columns:1fr}
  .spon__partner .spon__card{min-height:0}
  .spon__mark{padding:10px 0 18px;min-height:96px}
  .spon__who{--lines:1;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .spon__marquee{-webkit-mask-image:none;mask-image:none;cursor:auto!important}
  .spon__track{animation:none;width:auto;justify-content:center;transform:none!important}
  .spon__run{flex-wrap:wrap;justify-content:center;gap:14px;padding:0 var(--gutter)}
  .spon__run + .spon__run{display:none}
  .spon__card,.spon__card img,.spon__go,.spon__mark{transition:none;transform:none!important}
  .spon__who{transform:none!important}
}