/* =====================================================================
   AI Art Direction tab (7 Oct, v44): a thumbnail grid that reuses the
   Work grid styles (.work-grid / .card / .caption in site.css).
   Paper artboard "Homepage — AI Art Direction tab" (1RN-0).
   ===================================================================== */
.ai-thumb-ph { background: #D8D4CA; display: grid; place-items: center; }
.ai-thumb-ph span { color: var(--graphite); }
.card.is-soon { cursor: default; }

/* Silent looping video thumbnails (11 Oct, v53): Lloyds Horses = the final motion. Same fill + hover zoom as image thumbs. */
.shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.card:hover .shot video, .card:focus-visible .shot video { transform: scale(1.025); }
.shot video::-webkit-media-controls, .shot video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
@media (prefers-reduced-motion: reduce) { .shot video { transition: none; } }

/* "More coming soon" card (11 Oct, v58): sits next to Lloyds Horses while it's the only AI project.
   Dashed 16:9 frame + a strip of the hero's masking tape, hand-lettered in Permanent Marker. Paper: 1RN-0 card 285-0. */
.soon-card { cursor: default; }
.soon-frame { aspect-ratio: 16 / 9; border: 1.5px dashed rgba(18, 18, 18, .35); display: flex; align-items: center; justify-content: center; }
.soon-tape {
  position: relative; margin: 0; width: max(240px, calc(400 * var(--u))); aspect-ratio: 400 / 69;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-2.5deg); filter: drop-shadow(0 2px 3px rgba(18, 18, 18, .28));
}
.soon-tape img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.soon-tape span { position: relative; padding-top: 3px; font: 400 max(15px, calc(24 * var(--u))) / 1.17 "Permanent Marker", var(--f-body); letter-spacing: .01em; color: var(--ink); }
.soon-note { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }