/* authors.css — the ONE source of truth for the author byline + "who's this?" card.
   Rendered by authors.js (window.Who). Loaded by index.html (the landing) and every
   *-article.html (played cover + inline credits).

   Fonts differ by surface only in variable NAME, not value: the landing defines
   --grotesque / --serif-display / --serif-text; the article surfaces (daily.css)
   define --sans / --display / --serif with the same stacks. Each font below uses a
   fallback chain so it resolves on both. Colour/spacing vars (--cyan, --bg-2, --line,
   --soft, --text, --faint) are defined on both surfaces.

   This lived inline in index.html AND in daily.css; the two drifted and shipped a
   broken cover (daily.css was missing the `.av img` containment). Keep it here, once. */

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* monogram / photo avatar */
.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--sans, var(--grotesque)); font-weight: 800; color: #06222a; background: linear-gradient(145deg, var(--cyan), #8fe9f2); flex: none; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-photo { background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* the byline row: avatar + tappable name + credential + "?" affordance */
.byline { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; margin: 0 auto; font-family: var(--sans, var(--grotesque)); }
.byline .av { width: 28px; height: 28px; font-size: 11px; letter-spacing: 0.02em; }
.who { background: none; border: 0; border-bottom: 1px dashed var(--faint); color: var(--soft); font: inherit; padding: 0 0 1px; cursor: pointer; }
.byline .who { font-size: 14px; font-weight: 700; color: var(--text); }
.who:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.byline .cred { font-size: 13px; color: var(--soft); }
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--faint); font-family: var(--sans, var(--grotesque)); font-size: 10px; font-weight: 800; cursor: pointer; line-height: 1; }
.qmark:hover { border-color: var(--cyan); color: var(--cyan); }

/* the "who's this?" modal */
.whomask { position: fixed; inset: 0; background: rgba(4,12,14,0.72); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 60; animation: fade 150ms ease-out; }
.whomask[hidden] { display: none; }
.whocard { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 26px; max-width: 380px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,0.55); animation: rise 240ms ease-out; }
.whocard .top { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.whocard .av { width: 54px; height: 54px; font-size: 20px; }
.whocard .nm { font-family: var(--display, var(--serif-display)); font-size: 24px; line-height: 1.05; }
.whocard .cr { font-family: var(--sans, var(--grotesque)); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); margin-top: 4px; }
.whocard .kn { font-family: var(--serif, var(--serif-text)); font-size: 16px; line-height: 1.55; color: var(--soft); margin: 0 0 16px; }
.whocard .phc { font-family: var(--sans, var(--grotesque)); font-size: 11px; color: var(--faint); margin: 0 0 18px; }
.whocard .phc a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.whocard .row { display: flex; gap: 12px; align-items: center; }
.whocard a.link { font-family: var(--sans, var(--grotesque)); font-size: 13px; font-weight: 700; color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(58,214,230,0.4); padding-bottom: 2px; }
.whocard .close { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--soft); border-radius: 10px; padding: 9px 14px; font-family: var(--sans, var(--grotesque)); font-weight: 700; font-size: 13px; cursor: pointer; }
.whocard .close:hover { border-color: var(--cyan); color: var(--cyan); }