.work { padding-inline: var(--gutter); scroll-margin-top: var(--header-space); }

.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; max-width: var(--max); margin-inline: auto; }

.tile { position: relative; display: flex; flex-direction: column; gap: 16px; }

.tile__media {
  position: relative; overflow: hidden; border-radius: 18px; background: #0f1519; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); box-shadow: 0 30px 60px -40px #10161a66;
}
.tile__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tile__clip { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
.tile__clip.is-live { opacity: 1; }

.tile__meta { display: grid; align-content: start; gap: 8px; }
.tile__meta .mono { justify-self: start; color: var(--teal); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.tile__meta p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.tile__meta a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .tile__clip { transition: none; } }