/* =====================================================================
   PEOPLE — the team grid and the advisors list.

   Owns: layouts/partials/team.html, layouts/partials/advisors.html
   (design-language §9). Everything expressible as a Tailwind utility
   stays in the markup; what lands here is the portrait geometry and
   the advisor row layout.

   No shadows, no radii above 0, no gradients. Portraits are squares.
   Nothing here sets a font size below 0.9375rem (§3).

   Revision 2 removed: the mix-blend-mode plate and its hover reveal,
   the hairlines between advisor rows, and the advisor link's extending
   measure rule.

   The team grid's group labels (band name above each run of cards) are
   plain Tailwind in team.html — no rule, no panel, no tint — so there
   is nothing for this file to own there.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PORTRAITS

   One aspect ratio for every portrait, however the source was cropped,
   so the grid lines up as a register. Square corners: a circle is the
   generic choice and §6 forbids it.

   COLOUR, mildly corrected. Revision 1 blended a flat cool plate over
   every face in `color` mode, forcing the whole grid to one
   monochrome. On a bright paper site that reads as the old dark
   instrument styling, and §5 now asks for photographs shown bright
   with only "slight desaturation, slight contrast". So the faces keep
   their colour and get exactly that: enough to pull a dozen phone
   cameras under a dozen lightings toward one register, not enough to
   drain the photograph. No hover change — a filter transition is not
   on the permitted property list (§7) and the reveal was a gimmick.
   --------------------------------------------------------------------- */

.person-img,
.advisor-img,
.mentor-img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: saturate(0.88) contrast(1.03);
}

.person-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0;
}

.person-img {
  height: 100%;
}

.advisor-img,
.mentor-img {
  aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------------
   NO-PHOTO FALLBACK

   Initials on a flat panel — a blank in a register, not a generic
   avatar icon. Set in Fraunces now: the old mono micro-cap marking
   style is retired (§3).
   --------------------------------------------------------------------- */

.person-frame--blank,
.advisor-img--blank,
.mentor-img--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  filter: none;
}

.person-initials {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0.4;
  text-transform: uppercase;
  line-height: 1;
}

.advisor-img--blank .person-initials {
  font-size: 2.5rem;
}

/* ---------------------------------------------------------------------
   ADVISORS — rows separated by space, not by rules

   Portrait registered to the same left margin as every other section,
   text in a second column. The list reads as a continuation of the
   page: no borders, no panels, no tints (§6).

   ROW GAP, retuned. The hairline between rows came out in revision 2 on
   the understanding that the bios would be cut to one fragment
   ("Semiconductor devices. 3D nano-structures."). They now are, which
   makes each row shorter — and against shorter rows the old 4.5/6/7rem
   gaps read as five stranded entries rather than one list. Pulled in to
   4/5/5.5rem: still comfortably more than the 1.75/3/4rem gap *inside*
   a row, so the grouping reads from the spacing alone and no rule is
   needed, but the five advisors now scan as a single run.
   --------------------------------------------------------------------- */

.advisor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.advisor + .advisor {
  margin-top: 4rem;
}

.advisor-portrait {
  width: 11rem;
  max-width: 55%;
}

@media (min-width: 640px) {
  .advisor {
    /* A fixed portrait column so every advisor is framed identically,
       however many there end up being. */
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 3rem;
  }

  .advisor + .advisor { margin-top: 5rem; }

  .advisor-portrait {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .advisor {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 4rem;
  }

  .advisor + .advisor { margin-top: 5.5rem; }
}

/* The only hover in this area: the link underlines. */
.advisor-link {
  text-decoration: none;
}

.advisor-link:hover,
.advisor-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* ---------------------------------------------------------------------
   TOUCH TARGETS

   The advisor links sat at 26px on a phone. Padding brings the tap box
   up without changing the type or the spacing of the entry.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .advisor-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ---------------------------------------------------------------------
   MACHINE ROLES ARE LINKS

   A role that names a machine points at that machine's documentation.
   Underlined rather than coloured, so the roles column stays quiet and
   the link is still obvious.
   --------------------------------------------------------------------- */
.person-machine {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: color 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              text-decoration-color 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.person-machine:hover,
.person-machine:focus-visible {
  color: var(--maroon);
  text-decoration-color: var(--maroon);
}

/* "on <machine>" — the qualifier is held back so the machine name
   stays the thing you read. */
.person-on {
  color: var(--line);
  padding-right: 0.15rem;
}