/* Role portraits and first-person descriptions share one readable unit. */
.crew-section{padding-block:88px 96px;background:var(--canvas);border-top:1px solid var(--line2);scroll-margin-top:32px}
.crew-heading{display:flex;align-items:baseline;justify-content:space-between;gap:28px;margin-bottom:40px}
.crew-heading h2{font:600 clamp(2rem,3.6vw,3rem)/1.08 Neue,sans-serif;letter-spacing:-.035em;margin:0;text-wrap:balance}
.crew-heading p{font:400 clamp(1.125rem,1.8vw,1.5rem)/1.5 Nothing,cursive;color:var(--hand);margin:0}
.crew-lineup{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:38px 24px;max-width:1220px;margin-inline:auto;align-items:start}
.crew-member{grid-column:span 2;min-width:0;text-align:center}
.crew-person{display:flex;flex-direction:column;align-items:center;width:100%;gap:4px;padding:0;background:transparent;border-radius:8px;color:var(--ink)}
.crew-art{position:relative;display:block;width:min(100%,148px);isolation:isolate}
.crew-art::before{content:"";position:absolute;inset:15% 12% 12%;border-radius:48% 52% 54% 46%;background:var(--highlight);opacity:0;z-index:-1;transition:opacity 220ms ease}
.crew-person:is(:hover,:focus-visible) .crew-art::before{opacity:1}
.crew-person:is(:hover,:focus-visible) .crew-name{color:var(--accentText)}
.crew-person:focus-visible{outline:2px solid var(--accentText);outline-offset:5px}
.crew-person .crew-portrait{width:100%;height:auto;aspect-ratio:8/9;display:block;stroke-width:1.8;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform-origin:50% 90%}
.crew-eye-left{transform-origin:66px 66px}.crew-eye-right{transform-origin:95px 66px}
.crew-person .crew-accent{stroke:var(--accentText);stroke-width:2}
[data-theme="dark"] .crew-person:is(:hover,:focus-visible) .crew-art::before{opacity:.1}
[data-theme="dark"] .crew-person:is(:hover,:focus-visible) .crew-portrait{color:var(--highlight)}
.crew-name{font:600 1rem/1.3 Neue,sans-serif;text-align:center;min-height:2.6em;display:flex;align-items:center;justify-content:center;text-wrap:balance;transition:color 180ms ease}
.crew-copy{font:400 .9375rem/1.5 NeueText,sans-serif;color:var(--ink2);margin:6px auto 0;max-width:25ch;text-wrap:pretty}
@media(max-width:1050px){
 .crew-lineup{grid-template-columns:repeat(8,minmax(0,1fr));max-width:860px;gap:34px 22px}
 .crew-heading{display:block}.crew-heading p{margin-top:16px}
}
@media(max-width:600px){
 .crew-section{padding-block:60px 64px}
 .crew-heading{margin-bottom:28px}.crew-heading h2{font-size:34px}.crew-heading p{font-size:17px;max-width:29ch;line-height:1.6;margin-top:14px}
 .crew-lineup{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px;max-width:440px}
 .crew-art{width:112px;max-width:100%}.crew-person .crew-portrait{stroke-width:2}
 .crew-name{font-size:16px}.crew-copy{font-size:15px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.crew-art::before,.crew-name{transition:none}}

/* The twelfth place belongs to the expert visiting the page. */
.crew-invitation .crew-person{text-decoration:none}
.crew-invitation .crew-art::before{display:none}
.crew-glow{position:absolute;inset:14% 8% 8%;border-radius:48% 52% 54% 46%;background:var(--highlight);opacity:.64;filter:blur(14px);z-index:-1;pointer-events:none;transform:scale(.92)}
.crew-invitation .crew-portrait{color:var(--ink2);stroke-dasharray:.035 .04}
.crew-invitation .crew-accent{stroke-dasharray:none;stroke:var(--ink)}
.crew-invitation .crew-name{color:var(--accentText)}
[data-theme="dark"] .crew-invitation .crew-glow{opacity:.25}
[data-theme="dark"] .crew-invitation .crew-portrait{color:var(--highlight)}
[data-theme="dark"] .crew-invitation .crew-accent{stroke:var(--highlight)}

/* Give the two mobile columns more room without shrinking the body type. */
@media(max-width:600px){
 .crew-section>.container{padding-inline:12px}
 .crew-lineup{gap:28px 12px;max-width:100%}
 .crew-copy{max-width:none;text-wrap:initial}
}