/* ============================================================
   Avatar — 人の識別
   写真がなければ頭文字を明朝で（記憶の層）。色は控えめに。
   重ねはまとまりを示す。サイズ sm 28 / md 40 / lg 56。
   ============================================================ */

.av {
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-slate) 30%, var(--surface));
  color: var(--ink); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 15px;
}
.av.sm { width: 28px; height: 28px; font-size: 12px; }
.av.lg { width: 56px; height: 56px; font-size: 20px; }

.avstack { display: flex; }
.avstack .av { margin-left: -10px; box-shadow: 0 0 0 2px var(--page); }
.avstack .av:first-child { margin-left: 0; }