.credited-artwork {
    --artwork-credit-background: rgb(0 0 0 / 0.84);
    --artwork-credit-color: #aaa2a0;
    --artwork-credit-link-color: #e8e3e0;
    --artwork-credit-border: 0;
    --artwork-credit-shadow: none;
    --artwork-credit-transform: translateY(0.4rem);
    outline: none;
}

.artwork-credit {
    position: absolute;
    z-index: 1;
    width: max-content;
    max-width: 17rem;
    padding: 0.45rem 0.65rem;
    border: var(--artwork-credit-border);
    background: var(--artwork-credit-background);
    color: var(--artwork-credit-color);
    box-shadow: var(--artwork-credit-shadow);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: var(--artwork-credit-transform);
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.artwork-credit a {
    color: var(--artwork-credit-link-color);
    pointer-events: auto;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.artwork-credit a:hover,
.artwork-credit a:focus-visible {
    color: var(--artwork-credit-link-color);
    outline: none;
    text-decoration-style: solid;
}

.credited-artwork:hover .artwork-credit,
.credited-artwork:focus-visible .artwork-credit,
.credited-artwork:focus-within .artwork-credit {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .artwork-credit {
        transition-duration: 0.01ms;
    }
}