@layer components {
  /* Who is here, at the breadcrumb's end (recordings/_attendance): the
     avatars strip (avatars.css), a size down and lapping less, with a ring
     in the accent on whoever is writing — the one mark, so it reads at a
     glance (HANSHI, Deviations). Both classes, so the ring outweighs the
     stack's own paper ring in avatars.css, which at equal weight would win
     by loading later. */
  .avatars.attendance {
    --avatar-size: 1.5rem;
    --avatar-overlap: 0.25rem;

    > .avatar[data-writing] {
      box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 3.5px var(--color-accent);
    }
  }
}