/* =========================================================================
   Author bio (.art-bio)  "Who wrote this"
   Extracted from shared/article-body.css so resume-template pages can use the
   same block without pulling in the whole article body stylesheet.

   The `body.art-page` scope was stripped: article pages carry that class,
   template pages do not, and with the scope left on none of these rules
   applied there. The .art-bio* classes are unique to this block, so running
   them unscoped is safe.

   Loaded by: shared/article-body.css (@import, so article pages need no
   markup change) and directly by resume-template pages.
   ========================================================================= */

/* ---- author block -------------------------------------------------------
   The EEAT card that closes the article: identity row, a short bio in the
   first person, then the three credentials that actually matter, set as a
   figure-over-label strip. One surface, no stripes, no second CTA competing
   with the free review block above it. */
/* No card: a hairline is enough separation from the review block above,
   which already carries its own generous padding. The negative top margin
   pulls back the parent's 4rem flex gap stacked on that padding. */
/* These tokens live on body.art-page in article-body.css. Template pages do
   not carry that class, so declare them on the block itself: with the vars
   unresolved the bio renders as unstyled text and a full-width portrait. */
.art-bio {
  --art-ink: #202124;
  --art-body: #3c4043;
  --art-mute: #5f6368;
  --art-line: #e6e9ee;
  --art-link: #1a73e8;
  --art-head-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.art-bio {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 28px 24px 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--art-head-font);
  text-align: left;
}
.art-bio__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.art-bio__photo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8f0fe;
  box-shadow: 0 0 0 1px var(--art-line);
}
.art-bio__id { min-width: 0; flex: 1 1 auto; }
.art-bio__eyebrow {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--art-mute);
}
.art-bio__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--art-ink);
}
.art-bio__role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--art-mute);
}
.art-bio__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 12.5px;
  font-weight: 600;
}
.art-bio__g { width: 14px; height: 14px; display: block; }
.art-bio__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c4c7cb;
}
.art-bio__li {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.art-bio__li svg { width: 12px; height: 12px; fill: currentColor; }
/* Brand blue by default, one shade darker on hover. */
.art-bio__li:hover { background: #004182; color: #fff; }
.art-bio__text {
  margin: 16px 0 0;
  font-family: var(--md-font, inherit);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--art-body);
}
.art-bio__text a {
  color: var(--art-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 115, 232, .32);
}
.art-bio__text a:hover { border-bottom-color: var(--art-link); }
.art-bio__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 22px 0 0;
  padding: 0;
  /* horizontal rule above the stats removed 2026-08-25, restore with:
     padding-top: 16px; border-top: 1px solid var(--art-line); */
}
.art-bio__stat { padding: 0 16px; border-left: 1px solid var(--art-line); }
.art-bio__stat:first-child { padding-left: 0; border-left: none; }
.art-bio__stat dt {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--art-ink);
}
.art-bio__star { color: #f9ab00; font-size: 14px; }
.art-bio__stat dd {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--art-mute);
}
/* Outlined pill rather than a bare link: it is the only action in the bio,
   so it should read as a button without competing with the page CTA. */
.art-bio__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 30px auto 0;
  padding: 10px 22px;
  border: 1px solid rgba(26, 115, 232, .38);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--art-link);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.art-bio__link:hover {
  background: rgba(26, 115, 232, .08);
  border-color: var(--art-link);
  text-decoration: none;
}
.art-bio__link:focus-visible { outline: 2px solid var(--art-link); outline-offset: 2px; }

@media (max-width: 600px) {
  .art-bio { padding: 24px 18px 0; }
  .art-bio__photo { flex-basis: 60px; width: 60px; height: 60px; }
  .art-bio__stats { grid-auto-flow: row; grid-auto-columns: auto; gap: 12px; }
  .art-bio__stat {
    padding: 0 0 0 12px;
    border-left: 2px solid var(--art-line);
  }
  .art-bio__stat:first-child { padding-left: 12px; border-left: 2px solid var(--art-line); }

  /* Article pages keep the credentials on one row: stacked, four of them eat
     most of a phone screen. The .art-bio__cut spans drop the long wording. */
  body.art-page .art-bio__stats {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.art-page .art-bio__stat {
    padding: 0 7px;
    border-left: 1px solid var(--art-line);
  }
  body.art-page .art-bio__stat:first-child { padding-left: 0; border-left: none; }
  body.art-page .art-bio__stat dt { font-size: 14px; }
  body.art-page .art-bio__stat dd { margin-top: 2px; font-size: 11px; }
  body.art-page .art-bio__star { font-size: 11.5px; }
  .art-bio__cut { display: none; }
}