/* =====================================================================
   Avatar / Initials (Figma set 2210:101533, 2026-10-25). Round tile with
   the initials in text/primary on one of seven avatar/* colours. The
   colour comes from data-av="<name>", set by the avatarColor filter (or
   storiedAvatar() in js/site.js); any initials circle can use data-av.
   Size: small 40 (text-xs) · medium 56 (text-xl) · large 96 (text-3xl).
   ===================================================================== */
[data-av=sand]{background:var(--avatar-sand)!important}
[data-av=clay]{background:var(--avatar-clay)!important}
[data-av=sage]{background:var(--avatar-sage)!important}
[data-av=sky]{background:var(--avatar-sky)!important}
[data-av=lilac]{background:var(--avatar-lilac)!important}
[data-av=rose]{background:var(--avatar-rose)!important}
[data-av=gold]{background:var(--avatar-gold)!important}
[data-av]{color:var(--text-primary)!important}
.avatar-initials{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:var(--radius-full);text-transform:uppercase;color:var(--text-primary);background:var(--avatar-sand)}
.avatar-initials--small{width:40px;height:40px;font:var(--text-xs)}
.avatar-initials--medium{width:56px;height:56px;font:var(--text-xl)}
.avatar-initials--large{width:96px;height:96px;font:var(--text-3xl)}
[data-av] > *{color:inherit!important}   /* initials inside an avatar tile use text/primary */