.artwork {
  --artwork-share: 77%;
  --artwork-stroke-half: calc(var(--stroke-small) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.artwork-mat {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  border-radius: var(--radius-xxsmall);
  background: var(--background-transparent-faint);
  box-shadow:
    0 0 0 var(--artwork-stroke-half) var(--border-transparent),
    inset 0 0 0 var(--artwork-stroke-half) var(--border-transparent);
  cursor: zoom-in;
}

.artwork-mat img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: var(--artwork-share);
  max-height: var(--artwork-share);
  margin: auto;
  transition:
    opacity var(--duration-reveal) var(--ease-arrive),
    scale var(--duration-shape) var(--ease-settle);
}

.artwork-mat.is-loading img { opacity: 0; }

.artwork-skeleton {
  --mark: var(--spacing-small);
  --mark-weight: var(--stroke-small);
  --mark-ink: linear-gradient(currentColor, currentColor);
  --mark-corner: var(--mark) var(--mark-weight), var(--mark-weight) var(--mark);
  position: absolute;
  inset: 0;
  color: var(--content-tertiary);
  background-image:
    var(--mark-ink), var(--mark-ink), var(--mark-ink), var(--mark-ink),
    var(--mark-ink), var(--mark-ink), var(--mark-ink), var(--mark-ink);
  background-repeat: no-repeat;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-size: var(--mark-corner), var(--mark-corner), var(--mark-corner), var(--mark-corner);
  pointer-events: none;
  transition: opacity var(--duration-reveal) var(--ease-arrive);
}

.artwork-mat:not(.is-loading) .artwork-skeleton { opacity: 0; }

@media (hover: hover) {
  .artwork-mat:hover img { scale: 1.03; }
}

.artwork-mat:focus-visible {
  outline: var(--stroke-large) solid var(--accent);
  outline-offset: 3px;
}

.artwork-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-small);
  row-gap: var(--spacing-xxxxsmall);
}

.artwork-title,
.artwork-year {
  font: var(--text-footnote-medium);
  letter-spacing: var(--text-footnote-medium-tracking);
  color: var(--content-primary);
}

.artwork-credit,
.artwork-size {
  font: var(--text-caption1-regular);
  letter-spacing: var(--text-caption1-regular-tracking);
  color: var(--content-tertiary);
}

.artwork-year,
.artwork-size {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.artwork-credit {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .artwork-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artwork-mat img,
  .artwork-skeleton { transition: none; }
  .artwork-mat:hover img { scale: 1; }
}