.ssx-author-box {
  --ssx-author-accent: #2563eb;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-block: 2rem;
  padding: 1.5rem;
  color: inherit;
  border-radius: 1rem;
  box-sizing: border-box;
}

.ssx-author-box.is-bordered { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.ssx-author-box.is-soft { background: color-mix(in srgb, var(--ssx-author-accent) 8%, transparent); }
.ssx-author-box.is-minimal { padding-inline: 0; border-block: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 0; }
.ssx-author-box__avatar { flex: 0 0 auto; overflow: hidden; line-height: 0; }
.ssx-author-box__avatar.is-circle { border-radius: 999px; }
.ssx-author-box__avatar.is-rounded { border-radius: .875rem; }
.ssx-author-box__avatar.is-square { border-radius: 0; }
.ssx-author-box__avatar-image { display: block; max-width: none; height: auto; margin: 0; }
.ssx-author-box__content { min-width: 0; flex: 1; }
.ssx-author-box__eyebrow { display: block; margin-bottom: .2rem; color: var(--ssx-author-accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ssx-author-box__name { font-size: 1.25rem; font-weight: 750; line-height: 1.25; }
.ssx-author-box__name a { color: inherit; text-decoration: none; }
.ssx-author-box__name a:hover { color: var(--ssx-author-accent); }
.ssx-author-box__bio { margin-top: .7rem; font-size: .95rem; line-height: 1.65; opacity: .78; }
.ssx-author-box__bio > :first-child { margin-top: 0; }
.ssx-author-box__bio > :last-child { margin-bottom: 0; }
.ssx-author-box__links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ssx-author-box__link { display: inline-flex; align-items: center; min-height: 2rem; padding: .3rem .65rem; color: var(--ssx-author-accent); border: 1px solid color-mix(in srgb, var(--ssx-author-accent) 30%, transparent); border-radius: 999px; font-size: .75rem; font-weight: 650; line-height: 1; text-decoration: none; }
.ssx-author-box__link:hover { background: color-mix(in srgb, var(--ssx-author-accent) 10%, transparent); }

@media (max-width: 600px) {
  .ssx-author-box { flex-direction: column; gap: 1rem; padding: 1.2rem; }
}