/* roster.css: the Deadlock roster page (his 10-30: "let's do a roster, bro. Let's start recruiting people... a deadlock
   roster and just say to be announced... a whole roster page"). Six spots, each to be announced, and one way in.
   Tokens only; the page wears the site's green feel (redesign.css) and hero.css's page head. */
body[data-nav=roster] #top>*:not(.atmo){position:relative;z-index:1;max-width:1100px;margin-left:auto;margin-right:auto}
.rs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 26px;padding:0;list-style:none}
.rs-spot{position:relative;display:flex;align-items:center;gap:16px;padding:18px 18px 18px 16px;background:var(--panel);border:1px solid var(--line2);overflow:hidden}
.rs-spot svg{flex:none;width:58px;height:58px;color:var(--line3)}
.rs-spot b{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rs-spot span{display:block;margin-top:4px;font-family:"Poiret One",var(--wide);font-size:22px;letter-spacing:.06em;text-transform:uppercase;-webkit-text-stroke:.4px currentColor;color:var(--fg)}
/* the one quiet motion: a slow green sweep across each open spot, one after another */
.rs-spot:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(var(--accent-rgb),.08) 50%,transparent 70%);transform:translateX(-100%);animation:rs-sweep 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes rs-sweep{0%,55%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.rs-join{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:20px 22px;margin-bottom:40px;background:var(--panel);border:1px solid var(--line2);border-left:2px solid var(--accent)}
.rs-join h2{margin:0;font-family:"Poiret One",var(--wide);font-stretch:100%;font-weight:400;font-size:28px;letter-spacing:.08em;text-transform:uppercase;-webkit-text-stroke:.5px currentColor}
.rs-join .sp{flex:1}
.rs-join a.go{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-body);font-weight:var(--w-ui);font-size:var(--fs-md);letter-spacing:var(--track-caps);font-variant-caps:small-caps}
.rs-join a.go:hover{filter:brightness(1.08)}
.rs-join a.mail{color:var(--mute);font-size:15px}.rs-join a.mail:hover{color:var(--fg)}
@media (max-width:900px){.rs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rs-grid{grid-template-columns:1fr}.rs-spot{padding:12px 14px;gap:12px}.rs-spot svg{width:40px;height:40px}.rs-spot span{font-size:17px;white-space:nowrap}.rs-join h2{font-size:24px}.rs-join .sp{display:none}}
@media (prefers-reduced-motion:reduce){.rs-spot:after{animation:none;display:none}}