.people-grid { align-items: start; }
.person-flip { height: 480px; padding: 0; overflow: visible; perspective: 1200px; background: transparent; border: 0; box-shadow: none; }
.person-flip::before, .person-flip::after { display: none; }
.person-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 460ms cubic-bezier(.22,.7,.2,1); }
.person-flip.is-flipped .person-flip-inner { transform: rotateY(180deg); }
.person-front, .person-back { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid #d4e4f2; background: linear-gradient(160deg,#fff,#f8fbff); box-shadow: 0 10px 28px rgba(16,44,79,.07); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.person-front { cursor: pointer; }
.person-front .person-photo { flex: 1; min-height: 0; height: 0; aspect-ratio: auto; object-fit: cover; margin: 0 0 1rem; }
.person-front .person-body { min-height: 86px; }
.person-flip .person-body h3, .person-back h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.35; margin: 0 0 .45rem; }
.person-flip .person-body p { font-size: .85rem; line-height: 1.55; }
.person-flip-button, .person-return-button { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; margin-top: auto; padding: .85rem 0 0; border: 0; border-top: 1px solid #d4e4f2; background: transparent; color: #315f99; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; text-align: left; }
.person-flip button:focus-visible, .person-resource:focus-visible { outline: 2px solid #4a78a8; outline-offset: 4px; }
.person-flip-button:hover, .person-return-button:hover { color: #1f4c85; }
.person-back { transform: rotateY(180deg); background: #f0f6fc; border-top: 3px solid #4a78a8; }
.person-back-heading { padding-bottom: 1.1rem; border-bottom: 1px solid #d4e4f2; }
.person-back-heading > span { color: #617688; font-size: .75rem; }
.person-back-content { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem 0 .8rem; }
.person-back h4 { display: flex; gap: .45rem; align-items: center; margin: 0 0 .8rem; color: #617688; font-size: .72rem; font-weight: 600; line-height: 1.5; }
.person-topics { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.person-topics li { position: relative; padding-left: .9rem; color: #204261; font-size: .88rem; font-weight: 500; line-height: 1.5; }
.person-topics li::before { content: ''; position: absolute; width: 4px; height: 4px; top: .6em; left: 0; border-radius: 50%; background: #4a78a8; }
.person-resources { display: grid; gap: .15rem; margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid #d4e4f2; }
.person-resource { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; color: #315f99; text-decoration: none; font-size: .8rem; font-weight: 500; }
.person-resource > .bi:first-child { color: #4a78a8; font-size: .95rem; }
.person-resource > .bi:last-child { margin-left: auto; font-size: .65rem; opacity: .65; }
.person-resource:hover { color: #1f4c85; text-decoration: underline; }
.person-return-button { justify-content: space-between; flex-shrink: 0; }
.person-pending { color: #617688; font-size: .85rem; }
@media (max-width: 767px) { .person-flip { height: 520px; } .person-front .person-photo { object-position: center 35%; } }
@media (prefers-reduced-motion: reduce) { .person-flip-inner { transition: none; } }
.person-back-content { padding-top: 1rem; scrollbar-width: thin; }
.person-topics { gap: .55rem; }
.person-resources { margin-top: 1rem; padding-top: .55rem; }
/* Reserve equal role space so collaborator portraits share the same height. */
.person-front .person-body { flex: 0 0 86px; }
.person-flip:has(img[src*="nianfu-wang"]) .person-body,
.person-flip:has(img[src*="rongqi-lu"]) .person-body { flex-basis: 112px; }

/* Crop within a fixed frame to match the closer portraits elsewhere in the grid. */
.person-photo-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; margin-bottom: 1rem; }
.person-front .person-photo-frame .person-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-position: 50% 30%; transform-origin: 50% 34%; }
.person-photo-frame-yulong-zhang .person-photo { transform: scale(1.28); }
.person-photo-frame-guanghui-song .person-photo { transform: scale(1.35); }
.person-photo-frame-nianfu-wang .person-photo { transform: scale(1.3); }
.person-photo-frame-rongqi-lu .person-photo { transform: scale(1.25); }

/* Match the shared site blue for every profile icon. */
.person-flip .bi { color: #4a78a8; }
.person-flip button:hover .bi, .person-resource:hover .bi { color: #1f4c85; }

/* Local design preview: the same deep-space palette as the homepage hero. */
.person-back {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(90,166,255,.19), transparent 53%),
    radial-gradient(ellipse at 0% 100%, rgba(74,108,230,.12), transparent 45%),
    linear-gradient(135deg, #081527 0%, #0d2743 44%, #12375a 68%, #08192f 100%);
  border: 1px solid rgba(148,206,246,.34);
  box-shadow: 0 12px 30px rgba(4,14,30,.2), inset 0 1px 0 rgba(200,230,255,.14);
  color: #edf6ff;
}
.person-back::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 9%, rgba(190,221,255,.65) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 74% 32%, rgba(190,221,255,.3) 0 .6px, transparent 1px),
    radial-gradient(circle at 94% 61%, rgba(190,221,255,.45) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 13% 82%, rgba(190,221,255,.35) 0 .6px, transparent 1px),
    radial-gradient(circle at 65% 91%, rgba(190,221,255,.4) 0 .7px, transparent 1.1px);
}
.person-back::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #87caff, transparent);
  pointer-events: none;
}
.person-back > * { position: relative; }
.person-back h3 { color: #f2f8ff; }
.person-back-heading, .person-back .person-resources, .person-back .person-return-button { border-color: rgba(148,206,246,.2); }
.person-back-heading > span, .person-back h4, .person-back .person-pending { color: #a7bed6; }
.person-back .person-topics li { color: #e0edfa; }
.person-back .person-topics li::before { background: #86c9ff; box-shadow: 0 0 6px rgba(90,182,255,.35); }
.person-back .person-resource, .person-back .person-return-button { color: #c0ddf8; }
.person-back .bi { color: #87caff; }
.person-back .person-resource:hover, .person-back .person-return-button:hover { color: #fff; }
.person-back .person-resource:hover .bi, .person-back button:hover .bi { color: #bce5ff; }
.person-back .person-back-content { scrollbar-color: #4a78a8 transparent; }
.person-back button:focus-visible, .person-back .person-resource:focus-visible { outline-color: #87caff; }
.person-back .person-resource > .bi { color: #87caff; }
.person-back .person-resource:hover > .bi { color: #bce5ff; }