/* block-article-head-left
   Generated from the approved mockup CSS by wp-build/css.py, plus css-fixes/block-article-head-left.css. */
.article-head .person { display: flex; gap: var(--s2); align-items: center; }
.article-head .avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 19px/1 var(--sans); }
.article-head .person-name { font-weight: 700; font-size: 18px; line-height: 1.3; }
.article-head .person-role { color: var(--muted); font-size: 16px; }
.article-head { max-width: 820px; padding: var(--s6) 0 var(--s5); }
.article-head h1 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; line-height: 1.1; }
.article-head .dek { margin-top: var(--s3); font-size: 21px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.article-head .byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.article-head .byline .person-name a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-head .byline .person-name a:hover { text-decoration-thickness: 2px; }
.article-head .byline time { color: var(--muted); font-size: 16px; }
.article-head .byline .avatar { width: 48px; height: 48px; font-size: 17px; }
@media (max-width: 620px) {
  .article-head { padding: var(--s5) 0 var(--s4); }
  .article-head .dek { font-size: 18px; }
}