/* ══════════════════════════════════════════════════════════════ roster.css
   The Scientific Committee's members on /about/committee/, a document page on
   theme.css (--ink, --ink-soft, --line, --paper-2, --paper-3, --gold-deep,
   --serif, --sans, --read), so every value here flips with the light and dark
   grounds without restating one of them.

   Why this is a row and not a card grid. The itinerary scaffold already owns
   the site's answer to "a grid of identical cards": `.rows` in visit.css, which
   is a name, a line and a way on, and which is live on /summit/speakers/. A
   committee member is that plus a face and a role, so this is `.rows` with two
   more slots rather than a new idea. The reader's job here is to look someone
   up, and a list of rows is what a reader scans; a gallery is what a reader
   looks at.

   Why the portrait is small. The supplied photographs are between 95x160 and
   294x165 pixels. A 5rem frame is 80 CSS px, which at 2x asks for 160x200, and
   that is the largest honest size most of them can carry. Making the frame
   bigger would not show more of anyone, it would only show the enlargement.

   Why they are grey. co-chairs.css has forced `grayscale(1)` on every portrait
   on this site since the two co-chairs arrived in different styles, and its own
   comment invites the filter's removal once a consistent set exists. Twenty
   photographs from twenty sources is the opposite of a consistent set: they
   disagree on lighting, background, distance and colour cast. Grey is what
   makes them read as one committee. Remove the filter here and on the two rules
   in co-chairs.css together, or the site will disagree with itself. */

.roster { list-style: none; margin: .2rem 0 0; padding: 0; max-width: none; }

.roster li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas: "fig id" "say say";
  gap: .3rem 1.1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.roster li:last-child { border-bottom: 1px solid var(--line); }

/* ── the face ─────────────────────────────────────────────────────────── */
.roster__frame {
  grid-area: fig;
  display: block; overflow: clip;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.roster__frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border: 0;
  filter: grayscale(1);
}

/* A member whose photograph is missing or unusable keeps the row's rhythm with
   their initials rather than a hole. It is marked aria-hidden because the name
   it abbreviates is the next thing read.

   NOTHING USES THIS TODAY: it carried Linda Valent until a usable photograph of
   her arrived on 22 September. It stays because more members are coming and some
   will arrive without one. */
.roster__frame--none {
  display: grid; place-items: center;
  background: var(--paper-3);
  font-family: var(--serif);
  font-size: 1.35rem; letter-spacing: .06em;
  color: var(--ink-soft);
}

/* ── the name and the role ────────────────────────────────────────────── */
.roster__id { grid-area: id; align-self: start; display: grid; gap: .2rem; min-width: 0; }

.roster__name {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  line-height: 1.25;
  color: var(--ink);
}
/* The member's name is the link to their LinkedIn profile, exactly as the
   co-chairs' names are on /summit/co-chairs/: heading colour so the block still
   reads as a list of names, a gold underline so it is visibly a link, full gold
   on hover and on keyboard focus. */
.roster__link {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: .12em; text-decoration-thickness: 1px;
}
.roster__link:hover,
.roster__link:focus-visible { color: var(--gold-deep); text-decoration-color: currentColor; }

.roster__role {
  margin: 0;
  font-family: var(--sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-deep);
}
.roster__where { color: var(--ink-soft); }

/* ── what they work on ────────────────────────────────────────────────── */
.roster__say {
  grid-area: say;
  margin: .35rem 0 0;
  color: var(--ink-soft);
  font-size: .98rem; line-height: 1.5;
  max-width: var(--read);
}

/* ── the row that says the list is not finished ───────────────────────── */
/* Twenty are named and more are expected, but nobody knows the
   number, so the page cannot count them. It can show the shape instead: the
   roster ends on an open row rather than on a person, so a reader who scrolls
   to the bottom sees a committee still being appointed rather than a committee
   of twenty. The prose says so too; this is the half you do not have to read.
   Delete this <li> on the day the committee is closed. */
.roster li.roster__open { border-top-style: dashed; }
.roster li.roster__open:last-child { border-bottom-style: dashed; }
.roster__open .roster__frame--none {
  border-style: dashed;
  background: none;
  font-size: 1.6rem;
  color: var(--gold-deep);
}
.roster__open .roster__name { color: var(--ink-soft); font-style: italic; }

/* ── the two who lead it ──────────────────────────────────────────────── */
/* The Chair and the Co-Chair are the same row with a heavier rule above, so the
   list reads as one committee with two people at its head rather than as two
   lists. */
.roster li.roster__lead { border-top-width: 2px; border-top-color: var(--gold-deep); }

/* ── wide ─────────────────────────────────────────────────────────────── */
/* Above 64rem the row opens into three columns, which is `.rows`' own shape at
   the same breakpoint: the face, then who they are, then what they work on. */
@media (min-width: 64rem) {
  .roster li {
    grid-template-columns: 5rem minmax(0, 15rem) minmax(0, 1fr);
    grid-template-areas: "fig id say";
    gap: 1.4rem;
    align-items: start;
  }
  .roster__say { margin-top: 0; max-width: 34rem; }
}