/* DIMMS Lab. Team page and member profiles.
   Loaded after assets/css/dimms.css, which holds the tokens and the shared components. */

/* Team page
   -------------------------------------------------------------------------- */

/* The group photo is the first section. The page header above it ends with a hairline, 64 px under its text;
   the photo starts the same distance below the line, so header and photo read as one opening. */
.dl-teamphoto { padding-top: var(--space-8); padding-bottom: 0; }
.dl-teamphoto .dl-groupphoto { margin: 0; }

/* A list of things in pills that are not controls: research interests. */
.dl-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* Group label: a small heading on a hairline. The director and every group of the roster start with one. */
.dl-teamlabel {
  position: relative;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
}
.dl-teamlabel__count { margin-left: var(--space-3); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The director, as a feature: the portrait over four of twelve columns, the text from the sixth. */
.dl-director {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
  margin-bottom: var(--space-9);
}
.dl-director__label { grid-column: 1 / -1; }
.dl-director__photo { grid-column: 1 / span 4; }
.dl-director__text { grid-column: 6 / -1; }
.dl-director__name {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-tight);
}
.dl-director__name a { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease); }
.dl-director__name a:hover { color: var(--teal); }
.dl-director__title { margin: var(--space-4) 0 0; font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }
.dl-director__bio {
  max-width: 52ch;
  margin: var(--space-5) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}
.dl-director .dl-taglist { margin-top: var(--space-5); }
.dl-director__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* The portrait takes its colour while the name or the profile button is pointed at or focused, as a card does. */
@media (hover: hover) and (pointer: fine) {
  .dl-director:has(.dl-director__name a:hover, .dl-director__name a:focus-visible, .dl-director__go:hover, .dl-director__go:focus-visible) .dl-photo--bw img { filter: none; }
}
@media (max-width: 1024px) {
  .dl-director__photo { grid-column: 1 / span 5; }
  .dl-director__text { grid-column: 6 / -1; }
}
@media (max-width: 480px) {
  .dl-director { margin-bottom: var(--space-8); }
  .dl-director__photo { grid-column: 1 / -1; margin-bottom: var(--space-5); }
  .dl-director__text { grid-column: 1 / -1; }
}

/* The roster: every current member in one grid, four across, three up to 1024 px, two up to 480 px.
   Each cell is a label row and a card. Where subgrid is supported, the rows are shared across each line of
   cards, so hairlines, portraits, names, roles and summaries line up exactly. */
.dl-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.dl-roster__cell {
  display: grid;
  grid-row: span 5;
  grid-column: span var(--span, 1);
  align-content: start;
  padding-bottom: var(--space-7);
}
.dl-roster__cell > .dl-teamlabel { align-self: end; }
.dl-roster__cell > .dl-person {
  display: grid;
  grid-template-columns: var(--card-cols, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-content: start;
}
.dl-roster__cell .dl-person__photo { grid-column: 1; grid-row: 1; }
.dl-roster__cell .dl-person__body { grid-column: var(--body-col, 1); grid-row: var(--body-row, auto); align-self: var(--body-align, start); margin-bottom: var(--body-gap, 0); }
@supports (grid-template-rows: subgrid) {
  .dl-roster__cell { grid-template-rows: subgrid; row-gap: 0; }
  .dl-roster__cell > .dl-person { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .dl-roster__cell .dl-person__body { display: var(--body-display, grid); grid-row: var(--body-row, span 3); grid-template-rows: subgrid; row-gap: 0; }
}

/* A group's hairline runs on over the gap to its next card, unless that card starts a new row. */
.dl-roster__cell:not(.is-last) > .dl-teamlabel::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  width: var(--grid-gap);
  height: 1px;
  background: var(--rule-strong);
}
.dl-roster__cell:nth-child(4n) > .dl-teamlabel::after { display: none; }

/* Where a group carries on into a new row, its name is repeated there in grey. */
.dl-teamlabel--more { color: var(--ink-3); }
.dl-teamlabel--more > span { visibility: hidden; }
.dl-roster__cell:nth-child(4n+1) > .dl-teamlabel--more > span { visibility: visible; }

/* Last row: if it is not full, its last card widens over the free columns, with the portrait beside the text. */
.dl-roster__cell:nth-child(4n+1):last-child { --span: 4; }
.dl-roster__cell:nth-child(4n+2):last-child { --span: 3; }
.dl-roster__cell:nth-child(4n+3):last-child { --span: 2; }
.dl-roster__cell:not(:nth-child(4n)):last-child {
  --card-cols: calc((100% - (var(--span) - 1) * var(--grid-gap)) / var(--span)) minmax(0, 1fr);
  --body-col: 2;
  --body-row: 1;
  --body-display: block;
  --body-align: end;
  --body-gap: var(--space-4);
}
.dl-roster__cell:not(:nth-child(4n)):last-child .dl-person__body { max-width: 34rem; }

@media (max-width: 1024px) {
  .dl-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-roster__cell:nth-child(4n) > .dl-teamlabel::after { display: block; }
  .dl-roster__cell:nth-child(3n) > .dl-teamlabel::after { display: none; }
  .dl-roster__cell:nth-child(4n+1) > .dl-teamlabel--more > span { visibility: hidden; }
  .dl-roster__cell:nth-child(3n+1) > .dl-teamlabel--more > span { visibility: visible; }
  .dl-roster__cell:nth-child(n):last-child {
    --span: 1; --card-cols: initial; --body-col: initial; --body-row: initial;
    --body-display: initial; --body-align: initial; --body-gap: initial;
  }
  .dl-roster__cell:nth-child(3n+1):last-child { --span: 3; }
  .dl-roster__cell:nth-child(3n+2):last-child { --span: 2; }
  .dl-roster__cell:not(:nth-child(3n)):last-child {
    --card-cols: calc((100% - (var(--span) - 1) * var(--grid-gap)) / var(--span)) minmax(0, 1fr);
    --body-col: 2; --body-row: 1; --body-display: block; --body-align: end; --body-gap: var(--space-4);
  }
}
@media (max-width: 480px) {
  .dl-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-roster__cell { padding-bottom: var(--space-6); }
  .dl-roster__cell:nth-child(3n) > .dl-teamlabel::after { display: block; }
  .dl-roster__cell:nth-child(2n) > .dl-teamlabel::after { display: none; }
  .dl-roster__cell:nth-child(3n+1) > .dl-teamlabel--more > span { visibility: hidden; }
  .dl-roster__cell:nth-child(2n+1) > .dl-teamlabel--more > span { visibility: visible; }
  .dl-roster__cell:nth-child(n):last-child {
    --span: 1; --card-cols: initial; --body-col: initial; --body-row: initial;
    --body-display: initial; --body-align: initial; --body-gap: initial;
  }
  .dl-roster__cell:nth-child(2n+1):last-child {
    --span: 2;
    --card-cols: calc((100% - var(--grid-gap)) / 2) minmax(0, 1fr);
    --body-col: 2; --body-row: 1; --body-display: block; --body-align: end; --body-gap: var(--space-4);
  }
}

/* Alumni and former members: a grey band, the same label, and smaller cards. Three across, with the portrait
   beside the text; from 1024 px the portrait sits above the text so that three still fit; one column from 768 px.
   A short last row is filled by its last card, which then keeps its portrait beside the text. */
.dl-alumni__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--grid-gap);
}
.dl-alumni .dl-person {
  display: grid;
  grid-template-columns: var(--alum-cols, 6rem minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}
.dl-alumni .dl-person__photo { width: 6rem; margin: 0; }
.dl-alumni .dl-person__name { font-size: var(--text-body); line-height: var(--lh-h4); }
.dl-alumni .dl-person__summary { max-width: 52ch; }
.dl-alumni__list > :nth-child(3n+1):last-child { grid-column: span 3; }
.dl-alumni__list > :nth-child(3n+2):last-child { grid-column: span 2; }
@media (max-width: 1024px) {
  .dl-alumni .dl-person { --alum-cols: minmax(0, 1fr); }
  .dl-alumni__list > :not(:nth-child(3n)):last-child { --alum-cols: 6rem minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .dl-alumni__list { grid-template-columns: minmax(0, 1fr); }
  .dl-alumni__list > :nth-child(n):last-child { grid-column: auto; }
  .dl-alumni .dl-person { --alum-cols: 6rem minmax(0, 1fr); }
}

/* Member card (_includes/dl/person-card.html). The shared stylesheet gives the portrait, name, role and summary.
   Here: the arrow after a linked name, the pressed state, and the initials tile, which rests in black and white
   with the portraits and takes its colour on hover and keyboard focus. A card without a link has none of these. */
.dl-person__last { white-space: nowrap; }
.dl-person__arrow {
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.3em;
  vertical-align: -0.02em;
  color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
a.dl-person:focus-visible { border-radius: var(--radius); }
a.dl-person:focus-visible .dl-person__name { color: var(--teal); }
a.dl-person:hover .dl-person__arrow,
a.dl-person:focus-visible .dl-person__arrow { color: var(--teal); transform: translateX(var(--space-1)); }
a.dl-person:active .dl-person__photo img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .dl-photo--bw .dl-monogram { filter: grayscale(1); transition: filter var(--dur-4) var(--ease); }
  a:hover .dl-photo--bw .dl-monogram,
  a:focus-visible .dl-photo--bw .dl-monogram { filter: none; }
}

/* Profile pages (_layouts/person.html)
   -------------------------------------------------------------------------- */
.dl-profile { padding-block: var(--space-7) var(--section-y-tight); }

/* The portrait over four of twelve columns, always in colour, stays in view while the text beside it scrolls.
   Up to 1024 px the portrait sits beside the name and the rest runs below across the page; on phones everything
   is one column: portrait, name, introduction, details, then the sections. */
.dl-profile__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.dl-profile__photo {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-6));
}
.dl-profile__photo .dl-monogram { font-size: var(--text-hero); }
.dl-profile__intro { grid-column: 6 / -1; grid-row: 1; }
.dl-profile__main { grid-column: 6 / -1; grid-row: 2; min-width: 0; }
.dl-profile__name {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight);
}
.dl-profile__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
}
.dl-profile__about { margin-top: var(--space-6); }
.dl-profile__about > :first-child { margin-top: 0; }
.dl-profile__about > :last-child { margin-bottom: 0; }

/* Details: a list of labelled lines on hairlines */
.dl-facts { margin: var(--space-7) 0 0; border-top: 1px solid var(--rule-strong); }
.dl-facts__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.dl-facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.dl-facts dd { margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); overflow-wrap: anywhere; }
.dl-facts dd > a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; transition: color var(--dur-2) var(--ease); }
.dl-facts dd > a:hover { color: var(--teal); }
.dl-facts__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.dl-facts__links .dl-icon { width: var(--icon-xs); height: var(--icon-xs); }
.dl-facts__list { margin: 0; padding: 0; list-style: none; }
.dl-facts__list li + li { margin-top: var(--space-1); }

/* Sections below the details */
.dl-profile__section { margin-top: var(--space-8); }
.dl-profile__count { margin-left: var(--space-3); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dl-projects { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.dl-project { --card-pad: var(--space-5); }
.dl-project .dl-card__label { margin-bottom: var(--space-3); }

.dl-coauthors { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.dl-coauthor {
  display: grid;
  grid-template-columns: var(--control-md) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.dl-coauthor__photo { width: var(--control-md); height: var(--control-md); overflow: hidden; border-radius: 50%; background: var(--paper-sunk); }
.dl-coauthor__photo picture, .dl-coauthor__photo img { display: block; width: 100%; height: 100%; }
.dl-coauthor__photo img { object-fit: cover; }
.dl-coauthor__photo .dl-monogram { font-size: var(--text-label); }
.dl-coauthor__photo .dl-monogram::before,
.dl-coauthor__photo .dl-monogram::after { display: none; }
.dl-coauthor__name { font-family: var(--font-serif); font-size: var(--text-h4); line-height: var(--lh-h4); color: var(--ink); }
a.dl-coauthor__name { text-decoration: none; transition: color var(--dur-2) var(--ease); }
a.dl-coauthor__name:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; }
.dl-coauthor__count {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-caps);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Previous and next profile */
.dl-pnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: var(--section-y-tight);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.dl-pnav__link {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-1);
  padding-block: var(--space-6);
  color: inherit;
  text-decoration: none;
}
.dl-pnav__link--next { grid-column: 2; justify-items: end; text-align: right; }
.dl-pnav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.dl-pnav__label .dl-icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-2) var(--ease); }
.dl-pnav__name {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
  transition: color var(--dur-2) var(--ease);
}
.dl-pnav__role { font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }
.dl-pnav__link:hover .dl-pnav__name,
.dl-pnav__link:focus-visible .dl-pnav__name { color: var(--teal); }
.dl-pnav__link--prev:hover .dl-icon { transform: translateX(calc(-1 * var(--space-1))); }
.dl-pnav__link--next:hover .dl-icon { transform: translateX(var(--space-1)); }

@media (max-width: 1024px) {
  .dl-profile__photo { grid-column: 1 / span 5; grid-row: 1; position: static; }
  .dl-profile__intro { grid-column: 6 / -1; grid-row: 1; align-self: end; }
  .dl-profile__main { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-5); }
}
@media (max-width: 480px) {
  .dl-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .dl-profile__photo { grid-column: 1; width: 62%; }
  .dl-profile__intro { grid-column: 1; grid-row: 2; margin-top: var(--space-5); }
  .dl-profile__main { grid-column: 1; grid-row: 3; margin-top: 0; }
  .dl-facts__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .dl-coauthor { column-gap: var(--space-3); }
  .dl-pnav { grid-template-columns: minmax(0, 1fr); }
  .dl-pnav__link--next { grid-column: 1; justify-items: start; text-align: left; border-top: 1px solid var(--rule); }
}