/* Past speakers: names in large type; on wide screens a picture is held beside
   them and shows whichever speaker is pointed at, or failing that the name in
   the middle of the screen as the reader scrolls (assets/js/speakers.js). */
.sx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 32px); }
.sx__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 52px); }
.sx__head h2 { font: clamp(36px, 4vw, 54px)/1.12 var(--serif); color: var(--navy); }
.sx__list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.sx__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; padding-block: clamp(6px, .8vw, 12px); color: inherit; transition: opacity 250ms ease, color 250ms ease; }
.sx__name { font: clamp(32px, 4vw, 60px)/1.05 var(--serif); letter-spacing: -1px; color: var(--navy); transition: color 250ms, transform 400ms cubic-bezier(.16, 1, .3, 1); display: inline-block; }
.sx__meta { font-size: 14px; color: var(--muted); text-align: right; font-weight: 500; }
.sx__role { grid-column: 1 / -1; margin-top: 4px; color: var(--muted); font-size: 16px; }
.sx__thumb, .sx__frame { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .sx__list { grid-column: 1 / span 7; }
  .sx__meta, .sx__role { display: none; }
  .sx__row { grid-template-columns: 1fr; }
  .sx__list.has-active .sx__row:not(.is-active) { opacity: .3; }
  .sx__row.is-active .sx__name { color: var(--bold-red, #D7263D); transform: translateX(10px); }
  .sx__frame { display: block; grid-column: 9 / span 4; grid-row: 2; align-self: start; position: sticky; top: 130px; margin: 0; }
  .sx__pic { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
  .sx__pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity 260ms ease, transform 600ms cubic-bezier(.16, 1, .3, 1); }
  .sx__pic img.is-swap { opacity: 0; transform: scale(1.04); }
  .sx__frame figcaption { padding: 16px 18px 18px; background: var(--navy); min-height: 104px; }
  .sx__frame figcaption b { display: block; font: 22px/1.2 var(--serif); font-weight: 400; color: #fff; }
  .sx__frame figcaption span { display: block; margin-top: 4px; font-size: 14px; color: #c9d1dc; }
  .sx__frame figcaption i { display: block; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: #ff8a98; }
}
@media not ((hover: hover) and (pointer: fine) and (min-width: 901px)) {
  .sx__row { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .sx__thumb { display: block; grid-row: 1 / span 3; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); align-self: start; }
  .sx__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sx__name { font-size: 26px; }
  .sx__meta { grid-column: 2; text-align: left; margin-top: 4px; }
  .sx__role { grid-column: 2; font-size: 14px; margin-top: 2px; }
}
.sx__credits { grid-column: 1 / -1; margin-top: 28px; max-width: 70em; }
.sx__credits summary, #seminars .sx__credits summary { font-size: 14px; color: var(--muted); cursor: pointer; }
.sx__credits p { margin-top: 8px; font-size: 13px !important; line-height: 1.7; color: var(--muted) !important; }
.sx__credits a { text-decoration: underline; text-underline-offset: 2px; }