/* ============================================================================
   site-ui.css — site-wide UI corrections layered on top of the News360 theme.

   Loaded on every page, after the theme + skin stylesheets, so these rules win
   without editing vendor CSS. Article-only reading rules live in
   reading-experience.css instead.
   ========================================================================== */

/* --- 1. Author monogram ---------------------------------------------------
   Fallback avatar used by <x-author-avatar> while there is no real photo.
   Sized by the --monogram-size custom property the component sets inline. */
.author-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--monogram-size, 130px);
    height: var(--monogram-size, 130px);
    border-radius: 50%;
    background-color: var(--bg-color, #5608e0);
    color: #fff;
    font-size: calc(var(--monogram-size, 130px) * 0.38);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    user-select: none;
    flex: 0 0 auto;
}

/* The header avatar sits on a patterned strip; a ring keeps it readable. */
.author-media .author-monogram {
    border: 3px solid #fff;
}