/* People — V0.1 Why Co.Si "Leadership": heading 65→Display/3 at x≈450, list 75px below,
   name 25→Display/6, bio 26px under the name, links row 32px under the bio, rows 96px apart. */
.block--people .people__list { margin-top: var(--space-80); display: grid; gap: 96px; /* V0.1 */ }
.block--people .people__photo { width: 160px; aspect-ratio: 4 / 5; margin-bottom: var(--space-24); }
.block--people .people__bio { margin-top: var(--space-24); max-width: 42em; }
.block--people .people__links { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-32); }
.block--people .people__linkedin { display: block; color: var(--ink-primary); transition: color var(--dur-fast) var(--ease-out); }
.block--people .people__linkedin svg { width: 22px; height: 22px; }
:where([data-input="mouse"], .no-js) .block--people .people__linkedin:hover { color: var(--ink-accent); }

@media (max-width: 767px) {
  .block--people .people__list { margin-top: var(--space-40); gap: var(--space-48); }
  .block--people .people__photo { width: 160px; aspect-ratio: 4 / 5; margin-bottom: var(--space-24); }
  .block--people .people__bio { margin-top: var(--space-12); }
  .block--people .people__links { margin-top: var(--space-20); }
  /* 44px tap targets, same look: the icon's padding and the pill's ::after reach past them. */
  .block--people .people__linkedin { padding: 11px; margin: -11px; }
  .block--people .people__email { position: relative; overflow: visible; } /* the label is always "Email" */
  .block--people .people__email::after { content: ""; position: absolute; inset: -8px 0; }
}