/* Hallmark · component: author byline + author card · genre: editorial · theme: careerchanon (existing site tokens)
 * states: default · hover · focus · active (static, non-form component — disabled/loading/error/success n/a)
 * tokens: reuses each article's :root (--green, --green-dark, --black, --gray, --border, --sans)
 */
:root {
  --author-avatar-sm: 28px;
  --author-avatar-lg: 80px;
  --author-ring: var(--border, #e8e8e4);
  --author-focus: var(--green-dark, #0F6E56);
}

/* ── Top byline: small avatar beside the name (Medium-style) ── */
.article-meta { flex-wrap: wrap; row-gap: 0.5rem; }
.author-byline { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.author-byline-avatar {
  width: var(--author-avatar-sm); height: var(--author-avatar-sm);
  border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px var(--author-ring);
}

/* ── Bottom author card ── */
.author-card {
  max-width: 720px; margin: 0 auto; padding: 0 2rem 3.5rem;
}
.author-card-inner {
  display: grid; grid-template-columns: var(--author-avatar-lg) minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
  border-top: 1px solid var(--author-ring); padding-top: 2.5rem;
}
.author-card-avatar {
  width: var(--author-avatar-lg); height: var(--author-avatar-lg);
  border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--author-ring);
}
.author-card-label { font-size: 13px; color: var(--gray); margin: 0 0 0.25rem; line-height: 1.5; }
.author-card-name {
  font-family: var(--sans); font-size: 20px; font-weight: 700; font-style: normal;
  line-height: 1.4; color: var(--black); margin: 0 0 0.25rem;
  overflow-wrap: anywhere; min-width: 0;
}
.author-card-role { font-size: 14px; color: var(--green-dark); margin: 0 0 0.85rem; line-height: 1.6; }
.author-card-bio { font-size: 15px; color: #333; line-height: 1.9; margin: 0 0 1.1rem; max-width: 34em; }
.author-card-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.author-card-links a {
  font-size: 14px; color: var(--black); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--author-ring); padding-bottom: 2px;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), border-color 160ms cubic-bezier(0.2, 0, 0, 1);
}
.author-card-links a:hover { color: var(--green-dark); border-color: var(--green); }
.author-card-links a:focus-visible { outline: 2px solid var(--author-focus); outline-offset: 3px; border-radius: 2px; }
.author-card-links a:active { color: var(--green); }

@media (prefers-reduced-motion: reduce) { .author-card-links a { transition: none; } }

@media (max-width: 480px) {
  .author-card { padding: 0 1.25rem 3rem; }
  .author-card-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 2rem; }
  .author-card-avatar { width: 64px; height: 64px; }
}