/* ---------- team ---------- */

/* Crew plates: each person is a grayscale cut-out (scripts/portrait.swift:
   a JPEG plus an alpha mask PNG, drawn with mask-image) standing on the same
   chart backdrop: plotting dots, isobaths and a horizon at the shared eye
   line (42%). Every portrait is framed by the same rule, so heads and eyes
   line up from plate to plate. From 561px the three plates stand in one row
   on one eye line, under the head; on phones they stack as a crew list,
   plate left and name right, so every face stays readable. */

.team { position: relative; padding: var(--section-y) 0; background: var(--bg-1); border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 6.5vw, 96px); }
.crew-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.crew {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3.4vw, 56px);
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* plate, name and role sit on rows the cards share, so every name starts level */
.crew-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

.crew-plate { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.crew-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.crew-card:nth-child(even) .crew-chart { transform: scaleX(-1); } /* mirrored, so the pair reads as one chart */
.crew-dot { fill: rgba(233, 234, 234, 0.16); }
.crew-iso { fill: none; stroke: rgba(233, 234, 234, 0.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crew-horizon { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crew-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* the title block: a chart's label strip, over the cut at the chest */
.crew-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 10px;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.crew-status { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.crew-status::before { content: ""; width: 5px; height: 5px; border: 1px solid currentColor; background: currentColor; transition: background-color 0.5s var(--ease-out) 1.5s; }
.crew-frame { position: absolute; inset: 0; pointer-events: none; }

/* name, then the role or roles each person holds (the lead says what they do): grouped by space, no rules */
.crew-card h3 { margin-top: 24px; }
.crew-role { margin-top: 4px; font-size: 15.5px; line-height: 1.4; color: var(--fg); }

/* Plotting (js/sections/team.js): each plate gets its own copy of the chart,
   and it draws once as the plates come into view. The contours trace in,
   the eye-line horizons run in across the plates, then each status square
   fills: aboard. Without the script,
   under reduced motion and with ?still, the finished chart shows at once. */
.team.is-armed .crew-chart .is-draw {
  stroke-width: var(--crew-sw, 1);
  vector-effect: none; /* a pathLength dash needs an ordinary stroke; the script sets a 1px width */
  stroke-dasharray: 1;
  transition: stroke-dashoffset 2s var(--ease-out) var(--d, 0s);
}
.team.is-armed:not(.is-plotted) .crew-chart .is-draw { stroke-dashoffset: 1; }
.team.is-armed.is-done .crew-chart .is-draw { stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: none; transition: none; }
.team.is-armed:not(.is-plotted) .crew-status::before { background-color: transparent; }

/* a phone on its side: a smaller row, so a whole plate fits under the nav */
@media (max-width: 1099px) and (max-height: 520px) {
  .crew { max-width: 760px; }
}

/* touch and narrow screens: the strip reads at 12px, the phone floor */
@media (pointer: coarse), (max-width: 860px) {
  .crew-strip { font-size: 12px; letter-spacing: 0.06em; }
}

/* narrow plates: the strip keeps only the status; the role line under each
   name already names the role */
@media (max-width: 700px) {
  .crew-strip { padding: 7px 9px; }
  .crew-strip > span:first-child { display: none; }
  .crew-strip .crew-status { margin-left: auto; }
}

/* phones: three plates in a row would be too narrow for a face, so the crew
   stacks as a list. Each row is a plate with the name and role at its foot,
   level with the strip. Even plates still mirror the chart, and every face
   still sits on its plate's eye line. */
@media (max-width: 560px) {
  .crew { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .crew-card { grid-row: auto; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 18px; }
  .crew-plate { grid-row: 1 / -1; }
  .crew-card h3 { align-self: end; margin-top: 0; }
  .crew-role { margin: 4px 0 6px; font-size: 15px; text-wrap: balance; }
}