/* Alumni On Camera: eight native <details>, a ruled two-column list. Summary = still + name; open = the player.
   No JS, no inline style. Layer: pages (declared in site.css). */
@layer pages {
  .alumni-intro { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; text-wrap: pretty; margin-bottom: clamp(26px, 2.6vw, 40px); }

  .alumni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .alumnus { border-top: 1px solid var(--line-soft); }
  .alumnus:last-child { border-bottom: 1px solid var(--line-soft); }

  .alumnus__s {
    display: grid; grid-template-columns: clamp(120px, 34vw, 168px) minmax(0, 1fr) 32px; align-items: center; column-gap: clamp(14px, 1.4vw, 22px);
    padding: 14px; min-height: 44px; cursor: pointer; list-style: none; transition: background-color .2s;
  }
  .alumnus__s::-webkit-details-marker { display: none; }
  .alumnus__s:focus-visible { outline-offset: -3px; }
  .alumnus__still { position: relative; display: block; overflow: hidden; background: var(--night); }
  .alumnus__still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  /* the same 10% paper veil the Media stills carry; lifts on hover/open (opacity only, no filter) */
  .alumnus__still::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .1; transition: opacity .25s; pointer-events: none; }
  .alumnus__s:hover .alumnus__still::after, .alumnus__d[open] .alumnus__still::after { opacity: 0; }
  .alumnus__name {
    font-family: var(--font-serif); font-weight: 420; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.008em;
    font-variation-settings: "opsz" 30; text-wrap: balance; color: var(--ink);
  }
  .alumnus__s:hover .alumnus__name { color: var(--blue); }

  /* plus / minus: two hairline bars in a square, decorative (no text, nothing to announce; <details> already exposes the state) */
  .alumnus__s::after {
    content: ""; width: 32px; height: 32px; border: 1px solid var(--line); color: var(--blue);
    background:
      linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: background-color .2s, color .2s;
  }
  .alumnus__s:hover::after { background-color: var(--paper-deep); }
  .alumnus__d[open] > .alumnus__s::after {
    background:
      linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
    background-color: var(--ink); color: var(--paper);
  }

  /* open state: the player is tipped in under the row, framed like the photo band (1px slate rule), paper margin around it */
  .alumnus__d[open] { background: var(--paper-50); box-shadow: inset 3px 0 0 var(--blue); }
  .alumnus__play { padding: 2px 14px 18px; }
  .alumnus__play video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--night); border: 1px solid var(--line); }

  .alumni-credit { margin-top: clamp(28px, 2.8vw, 44px); text-wrap: pretty; }

  @media (min-width: 900px) {
    .alumni { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 3.4vw, 64px); }
    .alumnus:nth-last-child(2) { border-bottom: 1px solid var(--line-soft); }
  }
  /* small phones: a smaller still so names keep whole words */
  @media (max-width: 399px) {
    .alumnus__s { grid-template-columns: 92px minmax(0, 1fr) 28px; column-gap: 12px; padding: 10px 8px; }
    .alumnus__s::after { width: 28px; height: 28px; }
    .alumnus__name { font-size: 18px; }
    .alumnus__play { padding: 2px 8px 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .alumnus__s, .alumnus__s::after, .alumnus__still::after { transition: none; }
  }
}