/* Relationship Map: styles for this topic's components only. */
/* Your People (MemoriesPeopleCanvas): rings of people orbiting You, filling the
   whole page. The fogs at the top and bottom soften the outer rings. */
.item.full, .item.full.on {
  filter: none;
  transform: translate(-50%, -50%);
}
.people {
  position: relative;
  width: 1440px;
  height: 1024px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* on a phone the page scrolls: a vertical swipe is the page's, a sideways drag pans the map */
.phone .people { touch-action: pan-y; }
.people.held { cursor: grabbing; }
/* the canvas reaches past the frame to the window's edges, placed by script */
.people canvas { position: absolute; display: block; }
.people.over-teammate { cursor: pointer; }
/* A teammate's card: a white bubble above their face, its tail pointing down
   at them, popping up from the tail like an iMessage reply. Placed by script
   with `translate` at the top of the face. */
.people-about {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.people-about-body {
  position: absolute;
  left: -140px;
  bottom: 0;
  width: 280px;
  padding: 16px 20px 18px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 18, 17, .06), 0 12px 32px rgba(20, 18, 17, .12);
  color: #3B3936;
  font-size: 16px;
  line-height: 23px;
  font-weight: 550;
  text-wrap: pretty;
  transform-origin: 50% 100%;
  opacity: 0;
  scale: .85;
  transition: opacity .2s ease, scale .45s var(--spring);
}
.people-about.open .people-about-body { opacity: 1; scale: 1; }
.people-about.away .people-about-body { opacity: 0; }
.people-about-body::after {
  content: "";
  position: absolute;
  left: calc(50% - 8px);
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #FFFFFF;
  rotate: 45deg;
}
.people-about h3 {
  color: #141211;
  font-size: 20px;
  line-height: 26px;
  font-weight: 580;
  font-variation-settings: "SERF" 50;
}
.people-about .role { margin-bottom: 8px; color: #736F6B; font-size: 14px; line-height: 20px; }