@layer components{.join-card{border:2px solid var(--primary);background-color:var(--background);border-radius:16px;height:100%;padding:6px;display:flex}@media (width>=768px){.join-card{padding:8px}}.join-card:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.join-card__inner{background:linear-gradient(var(--primary), var(--primary-deep));color:var(--primary-foreground);border-radius:10px;flex-direction:column;flex:1;justify-content:space-between;padding:8px 16px;display:flex}@media (width>=768px){.join-card__inner{border-radius:12px;padding:16px 20px}}.join-card__title{font-size:1.5rem;font-weight:700;line-height:1.1}@media (width>=768px){.join-card__title{max-width:8ch;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.25rem)}}.join-card__arrow{align-self:flex-end;width:64px;height:24px}@media (width>=768px){.join-card__arrow{width:88px}}.member-card{border:2px solid var(--primary);background-color:var(--background);border-radius:16px;gap:6px;height:100%;padding:6px;display:flex;overflow:hidden}@media (width>=768px){.member-card{flex-direction:column;gap:0;padding:8px}}.member-card__photo{aspect-ratio:1;background-color:var(--surface);border-radius:10px;flex:none;justify-content:center;align-items:center;width:100px;display:flex;overflow:hidden}@media (width>=768px){.member-card__photo{border-radius:12px 12px 0 0;width:100%}}.member-card__img{object-fit:cover;width:100%;height:100%}.member-card__icon{width:40%;height:40%;color:var(--primary);opacity:.6}.member-card__info{background-color:var(--surface);min-width:0;color:var(--foreground);border-radius:10px;flex-direction:column;flex:1;justify-content:center;gap:4px;padding:0 16px;display:flex}@media (width>=768px){.member-card__info{border-radius:0 0 12px 12px;flex:none;justify-content:flex-start;padding:12px 16px}}.member-card__name{font-size:1rem;font-weight:700;line-height:1.25}.member-card__year{font-size:.875rem;line-height:1.25}.roster{padding:24px 16px 48px}@media (width>=768px){.roster{padding:48px 24px 64px}}@media (width>=1024px){.roster{padding-inline:max(24px,50vw - 600px)}}.roster__grid{grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none;display:grid}@media (width>=768px){.roster__grid{grid-template-columns:repeat(3,1fr);gap:20px}}@media (width>=1024px){.roster__grid{grid-template-columns:repeat(4,1fr)}}}