.rosters-page { place-items: start center; }
.rosters-page .shell { width: min(1120px,100%); }
.rosters-content { padding: clamp(22px,4vw,48px); }
.back-link { display: inline-block; margin-bottom: 20px; color: #83e6b7; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.eyebrow { color: #69dfaa; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.rosters-content h1 { margin: 12px 0; font-size: clamp(30px,5vw,48px); line-height: 1.12; letter-spacing: -.04em; }
.rosters-content h1 em { color: #69dfaa; font-style: normal; }
.intro { max-width: 700px; color: #a4bdb2; line-height: 1.65; }
.update { color: #91a99f; font-size: 12px; line-height: 1.7; margin: 18px 0 28px; }
.team-grid { display: grid; gap: 14px; }
.team-card { overflow: hidden; border: 1px solid #28473a; border-radius: 16px; background: #10231c; }
.team-card summary { display: flex; align-items: center; gap: 12px; padding: 20px; cursor: pointer; list-style: none; }
.team-card summary::-webkit-details-marker { display: none; }
.team-card summary::before { content: '+'; color: #69dfaa; font-size: 24px; width: 20px; flex-shrink: 0; }
.team-card[open] summary::before { content: '−'; }
.team-card summary h2 { margin: 0; font-size: 18px; color: #e8f0ed; flex: 1; overflow-wrap: anywhere; }
.team-card summary > span { color: #a4bdb2; font-size: 12px; white-space: nowrap; }
.team-card summary:hover { background: rgba(105,230,173,.06); }
summary:focus-visible, .back-link:focus-visible { outline: 2px solid #70e6b0; outline-offset: -3px; }
.roles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding: 0 20px 20px; border-top: 1px solid #28473a; }
.role h3 { display: flex; justify-content: space-between; color: #83e6b7; font-size: 13px; margin: 20px 0 8px; }
.role h3 span { color: #a4bdb2; }
.role ul { margin: 0; padding: 0; list-style: none; }
.role li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; }
.role li strong { font-weight: 600; overflow-wrap: anywhere; }
.role li span { color: #a4bdb2; text-align: right; overflow-wrap: anywhere; }
@media(max-width:600px) { .rosters-page { padding: 14px; } .rosters-page .header { padding: 20px; gap: 10px; } .rosters-content { padding: 22px 16px; } .team-card summary { padding: 16px; gap: 8px; flex-wrap: wrap; } .team-card summary h2 { font-size: 16px; } .roles { grid-template-columns: 1fr; gap: 0; padding: 0 16px 16px; } }