/* ══════════════════════════════════════════════════════════════════
   L'AVATAR EN INITIALES (.ini)
   Il remplit son hôte (largeur et hauteur 100 %) : la forme (rond,
   carré arrondi) et la taille viennent de l'emplacement existant.
   container-type: size => la taille des lettres suit la boîte (cqi).
   ══════════════════════════════════════════════════════════════════ */
.ini {
  container-type: size;
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--ard-bg-3);
  color: var(--ard-gold-text);
  box-shadow: inset 0 0 0 1px var(--hn-gold-18);
  font-family: var(--ard-serif); font-weight: 500; font-variation-settings: 'SOFT' 50, 'WONK' 1;
  line-height: 1; user-select: none;
}
/* text-box rogne la boîte à la hauteur des capitales : l'initiale tombe au centre optique
   (Chrome 133+, Safari 18.2+ ; ailleurs, ignoré sans casse). */
.ini-t { font-size: 48cqi; letter-spacing: -.02em; text-box: trim-both cap alphabetic; }
.ini--2 .ini-t { font-size: 38cqi; letter-spacing: -.03em; }
/* Sous 28 px, deux lettres deviennent illisibles : on garde la première, et on la grossit
   (à 48cqi, une lettre ferait 7,7 px dans une boîte de 16). 62cqi = ~10 px à 16 px. */
@container (max-width: 27px) {
  .ini-t2 { display: none; }
  .ini-t, .ini--2 .ini-t { font-size: 62cqi; }
}