/* Author Card: identity and editorial context; the consumer controls outside spacing. */
.octopus-author-card {
    --octopus-author-card-muted: var(--color-zinc-700);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 1rem;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
.dark .octopus-author-card { --octopus-author-card-muted: var(--color-text-secondary); }
.octopus-author-card__avatar {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--color-purple-100);
    color: var(--color-text-brand);
    font-size: var(--type-heading-3-size);
    font-weight: var(--type-heading-3-weight);
    line-height: 1;
}
.octopus-author-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dark .octopus-author-card__avatar { background: var(--color-purple-700); }
.octopus-author-card__content { display: grid; align-content: center; gap: calc(var(--space-component-xs) / 2); min-width: 0; overflow-wrap: anywhere; }
.octopus-author-card__identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-component-xs); min-width: 0; }
.octopus-author-card__name {
    margin: 0;
    font-size: var(--type-body-size);
    font-weight: 700;
    line-height: 1.35;
}
.octopus-author-card__bio {
    margin: 0;
    color: var(--octopus-author-card-muted);
    font-size: var(--type-body-secondary-size);
    line-height: var(--type-body-secondary-leading);
}
.octopus-author-card__published {
    margin: 0;
    color: var(--octopus-author-card-muted);
    font-size: var(--type-body-secondary-size);
    line-height: var(--type-body-secondary-leading);
}
.octopus-author-card__published time { display: inline-block; }
@media (max-width: 26rem) {
    .octopus-author-card { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-component-lg); padding: var(--space-component-lg); }
    .octopus-author-card__avatar { width: 3.5rem; height: 3.5rem; }
}