/* Portraits stay upright inside alternating cut-glass silhouettes.
   Horizontal card widths and gaps are unchanged: the rail measures that stride. */
.portrait-track {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 36px;
  background: #000;
}

.portrait-track .person-card {
  --shard: polygon(7% 0, 100% 7%, 94% 100%, 0 92%);
  --shard-drop: 0px;
  flex-basis: 43%;
  border: 0;
  background-color: #111015;
  -webkit-clip-path: var(--shard);
  clip-path: var(--shard);
  transform: translateY(var(--shard-drop));
}

.portrait-track .person-card:nth-child(3n + 2) {
  --shard: polygon(0 7%, 93% 0, 100% 92%, 6% 100%);
  --shard-drop: 15px;
}

.portrait-track .person-card:nth-child(3n) {
  --shard: polygon(5% 0, 100% 5%, 94% 94%, 0 100%, 0 12%);
  --shard-drop: 5px;
}

/* A narrow reflection gives the cut a material edge, without tinting the face. */
.portrait-track .person-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(103deg, #e1e8f126 0, #e1e8f100 7%, transparent 84%, #e1e8f11a 100%);
  opacity: .65;
  transition: opacity .25s ease;
}

.portrait-track .person-card:nth-child(3n + 2)::before {
  background:
    linear-gradient(77deg, #e1e8f11a 0, transparent 14%, transparent 92%, #e1e8f126 100%);
}

.portrait-track .person-card::after {
  background: linear-gradient(0deg, #08070cfa 0, #08070ce6 14%, transparent 43%, transparent 75%, #08070c52 100%);
}

/* Keep every label inside the shared safe rectangle of the three polygons. */
.portrait-track .person-topline {
  top: 10%;
  left: 11%;
  right: 11%;
}

.portrait-track .person-caption {
  bottom: 12%;
  left: 11%;
  right: 11%;
}

.portrait-track .person-caption strong {
  font-size: clamp(19px, 5.2vw, 23px);
}

.portrait-track .classified .person-caption strong {
  font-size: clamp(16px, 4.5vw, 19px);
}

.portrait-track .classified-paper {
  inset: 23% 17% 30%;
  padding: 9%;
  gap: 8px;
}

/* An inset focus ring remains visible even though the outside is clipped. */
.portrait-track .person-card:focus-visible {
  outline: none;
}

.portrait-track .person-card:focus-visible::before {
  inset: 9% 9% 10%;
  background: transparent;
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--group, #d8b9f5);
}

.portrait-track.expanded {
  align-items: start;
  row-gap: 20px;
  padding-top: 16px;
  padding-bottom: 36px;
}

.roster-group.is-expanded .portrait-track .person-card:nth-child(3n + 2) {
  --shard-drop: 10px;
}

@media (hover: hover) {
  .portrait-track .person-card:hover::before {
    opacity: 1;
  }
}

@media (max-width: 390px) {
  .portrait-track .person-card:nth-child(3n + 2) {
    --shard-drop: 12px;
  }

  .portrait-track .person-topline {
    font-size: 9px;
  }

  .portrait-track .person-caption small {
    font-size: 9px;
    margin-top: 4px;
  }

  .portrait-track .classified-paper {
    gap: 6px;
  }

  .portrait-track .classified-paper strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-track .person-card::before {
    transition: none;
  }
}