.team-standalone { margin: 0; background: var(--theme-standalone); }
.team-surface { color-scheme: var(--theme-color-scheme); background: var(--theme-surface); color: var(--theme-text); font: 400 14px var(--font-body); -webkit-font-smoothing: antialiased; }
.team-standalone .team-page { background: var(--theme-standalone); }
.team-surface, .team-surface * { box-sizing: border-box; }
.team-surface :is(h1, h2, h3, p) { margin: 0; }
.team-surface a { color: inherit; text-decoration: none; }
.team-surface a:hover { color: var(--theme-accent); }
.team-surface :focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 6px; }
.team-standalone .skip-link { z-index: 1; background: var(--theme-skip); }
.team-page { max-width: 1440px; min-height: 100svh; margin: 0 auto; padding: 32px 5%; display: flex; flex-direction: column; }
.team-header a { font-weight: 500; }
.team-page main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.team-intro { text-align: center; padding-top: 67px; }
.team-surface .team-title { font: 600 88px/1.05 var(--font-body); letter-spacing: -2px; margin: 16px 0 21px; }
.team-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 780px; gap: 55px; margin: 52px auto 75px; text-align: center; }
.team-people article { container-type: inline-size; }
/* Let the sketches use the column gutters without widening the text. */
.team-people img { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: 0 -20px 15px; }
/* These transparent, monochrome sketches need light ink on dark surfaces. */
html[data-theme="dark"] .team-people img { filter: invert(1); }
/* Decorative only: no extra tab stops, touch hover, or reduced-motion animation. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .team-people img { transition: transform 220ms ease-out; transform-origin: 50% 70%; }
 .team-people article:hover img { transform: rotate(-2deg); }
}
/* Twelve mono characters fit “Cardillo Jr.” but keep every full name on two lines.
   Size to the column on narrow screens rather than breaking surnames. */
.team-people :is(h2, h3) { max-inline-size: 12ch; margin-inline: auto; font: 500 min(31px, 13cqi)/1.2 var(--font-body); }
.team-people .team-role { font-size: 11px; line-height: 1.6; color: var(--theme-secondary-text); margin-top: 9px; }
html:not([data-theme="dark"]) .team-people .team-role { color: var(--theme-brand); }
@media (max-width: 740px) {
 .team-page { padding: 23px 7%; }
 .team-intro { padding-top: 51px; }
 .team-surface .team-title { font-size: 57px; letter-spacing: -1.5px; margin-top: 17px; }
 .team-people { grid-template-columns: 1fr; max-width: 520px; gap: 36px; margin: 36px auto 48px; text-align: left; }
 .team-people article { display: grid; grid-template-columns: min(34%, 140px) minmax(0, 1fr); column-gap: 16px; }
 .team-people img { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 100%; margin: 0; }
 .team-people :is(h2, h3) { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: clamp(18px, 5vw, 24px); }
 .team-people .team-role { grid-column: 2; grid-row: 2; align-self: start; font-size: 11px; margin-top: 6px; }
}
@media (max-width: 370px) {
 .team-surface .team-title { font-size: 51px; }
}

/* Team content sizing inside the shared modal shell. */
.team-dialog .team-people { gap: 44px; margin: 24px auto 32px; }
.team-dialog .team-people :is(h2, h3) { font-size: min(24px, 13cqi); }
@media (max-width: 740px) {
 .team-dialog .team-people { gap: 36px; margin: 20px auto 24px; }
 .team-dialog .team-people :is(h2, h3) { font-size: clamp(18px, 5vw, 24px); }
}