/* Graphic work keeps its complete composition on a landscape presentation plate. */
.graphic-project .project-visual > img { object-fit: contain; }
.project-card[data-media-kind="video"] .project-visual > img { object-fit: contain; }
.viewer-stage[data-matte="white"] > img { background: #fff; }
.viewer-stage[data-matte="black"] > img { background: #000; }
.viewer-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.viewer-caption h2 { min-width: 0; overflow-wrap: anywhere; }
.viewer-caption > .hand { justify-self: end; }
.viewer-caption:not(:has(.viewer-original:not([hidden]))) { grid-template-columns: minmax(0, 1fr) auto; }
.viewer-original {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.viewer-original > span { font-size: 24px; font-weight: 400; }
.viewer-original:hover, .viewer-original:focus-visible { color: var(--accent-text); }
.viewer-original:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (max-width: 700px) {
  .type-filters { flex-wrap: wrap; }
  .viewer.is-document .viewer-content { bottom: 192px; }
  .viewer.is-document .viewer-caption { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .viewer.is-document .viewer-original { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .viewer.is-document .viewer-caption > .hand { grid-column: 2; grid-row: 1; }
}