.portrait-wrap{
    position:relative;
    flex:0 0 auto;
    display:inline-flex;
  }

  /* focusable so a tap / keyboard focus reveals the credit + scales the photo,
     not just mouse hover (touch devices have no real :hover) */
  .portrait-wrap:focus{outline:none;}
  .portrait-wrap:focus-visible{
    outline:2px dashed var(--ink);
    outline-offset:6px;
    border-radius:50%;
  }

  .portrait{
  position:relative;
  width:clamp(140px,13vw,196px);
  aspect-ratio:1;
  border-radius:50%;
  border:3px double var(--ink);
  overflow:hidden;
  transition:transform .25s ease;
}

  /* two stacked portraits of the same tab colour; the dark one fades in and
     out over the light one so the colour bleeds light↔dark↔light forever */
  .portrait-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover; /* fills the circle */
    display:block;
  }

  .portrait-dark{
    opacity:0;
    animation:portrait-bleed 6s ease-in-out infinite alternate;
  }

  @keyframes portrait-bleed{
    from{opacity:0;}
    to{opacity:1;}
  }

  .portrait-wrap:hover .portrait,
  .portrait-wrap:focus-within .portrait{transform:rotate(3deg) scale(1.04);}

  @media (prefers-reduced-motion:reduce){
    .portrait-dark{animation:none; opacity:0;}
  }

  /* curved portrait credit — hugs the portrait, only on hover */
  .portrait-credit{
    position:absolute;
    left:50%;
    top:50%;
    width:157%;
    height:157%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:0;
    overflow:visible;
    transition:opacity .35s ease;
  }
  .portrait-wrap:hover .portrait-credit,
  .portrait-wrap:focus-within .portrait-credit{
    opacity:1;
    pointer-events:auto;
  }
  .portrait-credit text{
    font-family:'Special Elite', monospace;
    fill:var(--muted);
  }
  .portrait-credit a{
    fill:var(--ink);
    text-decoration:underline;
  }
  .portrait-credit a:hover{fill:var(--red);}