/* The people, as a relay.
   One person is held at a time. The next waits as a plate in the lower right,
   the one just read rests in the upper left, and every plate travels the same
   diagonal between them. Below 1100px, and with motion off, this is simply a
   list: the markup carries all thirteen people either way. */

/* ── base: an honest list ────────────────────────────────────── */
.relay__cards{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:var(--maxw);
  display:grid;gap:var(--sp-8) var(--sp-6);grid-template-columns:1fr}
.rcard__plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--plate)}
.rcard__plate::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:29px;
  transform:translate(-50%,-50%);background:url(../assets/svg/mark-onink.svg) center/contain no-repeat;opacity:.22}
.rcard__plate img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:var(--img-o,1)}
/* Three of the thirteen have no delivered portrait yet. The plate holds its
   ground and says so, rather than standing in a photograph of someone else. */
.rcard__plate--awaiting figcaption{position:absolute;left:0;right:0;bottom:var(--sp-4);
  text-align:center;font-weight:var(--w-bold);font-size:var(--fs-label);
  letter-spacing:.20em;text-transform:uppercase;color:rgba(255,251,243,.34)}
.rcard__meta{padding-top:var(--sp-3)}
.rcard__more{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.62;color:var(--ink-45);max-width:44ch}
.rcard__name{margin-top:var(--sp-3);font-weight:var(--w-light);font-size:var(--fs-h2);
  line-height:1.16;letter-spacing:var(--tr-h2)}
.rcard__role{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-45)}
.rcard__lede{margin-top:var(--sp-4);font-size:var(--fs-body);line-height:1.65;color:var(--ink-74);max-width:44ch}
.rcard__acts{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.rcard__acts a{font-weight:var(--w-bold);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);position:relative}
.rcard__acts a::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:bottom right;transition:transform .8s var(--ease)}
.rcard__acts a:hover::after{transform:scaleX(1);transform-origin:bottom left}
.relay__hud,.relay__geo{display:none}
@media(min-width:720px){.relay__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── the relay ───────────────────────────────────────────────── */
@media screen and (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .relay-active .relay{position:relative}
  .relay-active .relay__stage{position:sticky;top:0;height:100vh;overflow:hidden}
  .relay-active .relay__cards{position:absolute;inset:0;max-width:none;padding:0;display:block;margin:0}
  .relay-active .rcard{position:absolute;inset:0;pointer-events:none;z-index:var(--z,1)}
  .relay-active .rcard__plate{position:absolute;left:0;top:0;
    width:var(--card-w);height:var(--card-h);aspect-ratio:auto;
    margin-left:calc(var(--card-w) / -2);margin-top:calc(var(--card-h) / -2);
    transform:translate3d(var(--x,0px),var(--y,0px),0) scale(var(--s,.2));
    transform-origin:50% 50%;opacity:var(--o,0);visibility:hidden}
  .relay-active .rcard.is-visible .rcard__plate{visibility:visible;will-change:transform,opacity}
  .relay-active .rcard__plate img{object-position:center 14%;transform:none}

  /* Scroll owns the biography fade, not a queue of delayed transitions. */
  .relay-active .rcard__meta{position:absolute;left:var(--meta-left);top:var(--meta-top);
    height:var(--meta-height);width:var(--meta-width);display:flex;flex-direction:column;justify-content:center;
    padding:0;opacity:var(--meta-o,0);pointer-events:none;
    transform:translate3d(0,var(--meta-y,0px),0);transition:none}
  .relay-active .rcard.is-held .rcard__meta{pointer-events:auto}
  .relay-active .rcard__name{margin-top:var(--sp-2);font-size:var(--fs-h2);letter-spacing:var(--tr-h2)}
  .relay-active .rcard__role{margin-top:var(--sp-2)}
  .relay-active .rcard__lede{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:1.5;
    max-width:38ch;color:var(--ink)}
  .relay-active .rcard__more{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.62;
    max-width:44ch;color:var(--ink-45)}
  .relay-active .rcard__acts{margin-top:var(--sp-5);flex-direction:column;gap:var(--sp-2)}
  .relay-active .rcard__meta > *{position:relative;flex-shrink:0;opacity:1;transform:none;transition:none}

  .relay-active .relay__geo{display:block;position:absolute;inset:0;width:100%;height:100%;
    z-index:1;pointer-events:none;overflow:visible;opacity:var(--geo-o,0)}
  .relay__geo .axis{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:.26}
  .relay__geo .arc{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;opacity:.55}

  /* one circle counts the way through */
  .relay-active .relay__hud{display:flex;align-items:center;gap:var(--sp-3);
    position:absolute;left:var(--pad);bottom:var(--sp-6);z-index:60;pointer-events:none}
  .relay__hud svg{width:44px;height:44px;transform:rotate(-90deg);overflow:visible}
  .relay__hud .hud__track{fill:none;stroke:var(--gold);stroke-width:1;opacity:.28;vector-effect:non-scaling-stroke}
  .relay__hud .hud__fill{fill:none;stroke:var(--gold-deep);stroke-width:1;vector-effect:non-scaling-stroke;
    stroke-dasharray:125.66;stroke-dashoffset:calc(125.66 * (1 - var(--relay-p,0)))}
  .relay__hud .hud__label{font-weight:var(--w-bold);font-size:var(--fs-label);letter-spacing:.20em;
    text-transform:uppercase;color:var(--ink-45)}
}
@media(prefers-reduced-motion:reduce),print{
  .relay__stage{position:static!important;height:auto!important}
  .rcard{position:static!important;transform:none!important;opacity:1!important}
  .rcard__meta{position:static!important;transform:none!important;opacity:1!important;width:auto!important;background:none!important;padding:0!important;height:auto!important}
}

/* the portrait travelling from the relay into the bio page */
@media screen and (prefers-reduced-motion:no-preference){
  html.pc-active .bio__portrait{opacity:1!important;transform:none!important}
  html.pc-active::view-transition-group(portrait){animation-duration:.86s;
    animation-timing-function:cubic-bezier(.22,1,.36,1)}
  html.pc-active::view-transition-old(portrait){animation:pc-out .2s linear both}
  html.pc-active::view-transition-new(portrait){animation:pc-in .46s linear both}
  html.pc-active::view-transition-old(group-content){animation:pc-page-out .28s ease-out both}
  html.pc-active::view-transition-new(group-content){animation:pc-page-in .8s cubic-bezier(.22,1,.36,1) .2s both}
}
@keyframes pc-out{to{opacity:0}}
@keyframes pc-in{from{opacity:0}to{opacity:1}}
@keyframes pc-page-out{to{opacity:0}}
@keyframes pc-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}