/* about.css: the about page (his 10-30: "in case someone randomly pops across it"). The roster's page head, cards and
   Discord bar (roster.css loads too: .rs-join, the rs-sweep motion), so the two sibling pages match; each card opens its
   part of the site. Tokens only; the green feel comes from redesign.css's list. */
body[data-nav=about] #top>*:not(.atmo){position:relative;z-index:1;max-width:1100px;margin-left:auto;margin-right:auto}
.ab-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 26px;padding:0;list-style:none}
.ab-way{position:relative;display:grid;align-content:start;gap:10px;height:100%;box-sizing:border-box;padding:22px 20px 20px;background:var(--panel);border:1px solid var(--line2);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .2s}
.ab-way:hover{border-color:var(--accent)}
.ab-way svg{width:40px;height:40px;color:var(--accent)}
.ab-way b{font-family:"Poiret One",var(--wide);font-weight:400;font-size:28px;letter-spacing:.08em;text-transform:uppercase;-webkit-text-stroke:.4px currentColor;color:var(--fg)}
.ab-way span{font-size:16px;line-height:1.4;color:var(--fg2)}
.ab-way: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)}
@media (max-width:900px){.ab-ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab-ways{grid-template-columns:1fr}.ab-way{grid-template-columns:40px minmax(0,1fr);align-items:center;gap:4px 14px;padding:14px}.ab-way svg{grid-row:span 2;width:32px;height:32px}.ab-way b{font-size:22px}}
@media (prefers-reduced-motion:reduce){.ab-way:after{animation:none;display:none}}