@layer components {
  .card { display: grid; gap: .75rem; }
  /* One shape for every card, whatever the source — see --card-ratio.
     Per-orientation ratios were kinder to vertical films but made the grid
     ragged: a landscape card among portrait ones broke the row and pushed its
     title to a different height. cover crops to fill; the whole frame is still
     shown on the film's own page and in the world hero. */
  .card__poster {
    width: 100%;
    /* height:auto is load-bearing. The width/height attributes on <img> are
       presentational hints, so height="1080" stays in force unless overridden
       — and with both dimensions definite, aspect-ratio is ignored and the
       card grows to full poster height. */
    height: auto;
    aspect-ratio: var(--card-ratio);
    object-fit: cover;
    background: var(--surface-2);
  }
  .card__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.125rem; letter-spacing: -.01em;
  }
  .card__link { display: grid; gap: .75rem; }
  .card__link:hover .card__title { color: var(--accent); }
  .card__world { color: var(--ink-quiet); font-size: .8125rem; }
}

@layer components {
  /* The loop sits over the poster and fades in once it is really playing, so
     a refused autoplay leaves the still rather than a black rectangle. */
  .card__media {
    position: relative; display: block; overflow: clip;
    aspect-ratio: var(--card-ratio);
  }
  .card__loop {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0; transition: opacity .35s linear;
  }
  .card__loop.is-playing { opacity: 1; }
}