/* Design Artifacts (rebrand E2, wall). Markup: src/_includes/e2/artifacts.njk. */
.art-h1 { max-width: 12ch; }
.art-player { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--surface-1); isolation: isolate; }
.art-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.art-poster { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; color: #000; }
.art-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .4s ease; }
.art-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); pointer-events: none; }
.art-play {
  position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%;
  width: 64px; height: 64px; border-radius: 999px; background: #fff; display: grid; place-items: center; padding-left: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: scale .3s var(--ease-out), background-color .2s ease;
}
.art-poster:hover img { transform: scale(1.04); }
.art-poster:hover .art-play, .art-poster:focus-visible .art-play { scale: 1.1; background: var(--blue-light); }
.art .art-label { margin-top: 14px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--text-2); }

/* a wall of players, three across */
.art-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }

@media (max-width: 999px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .art-grid { grid-template-columns: 1fr; gap: 28px; }
  .art-player { border-radius: 16px; }
  .art-play { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .art-poster img { transition: none; } }