/* ============================================================
   RATING BADGE: G / PG / 18+ / R.

   Luke, 13 Nov: "redo them to be extremely similar, as similar as we can get
   them" to the US film-ratings card he sent, letters "centred within the
   box", and "get ChatGPT to do them so they're higher quality". So the
   badges are images: ChatGPT drew all four in one picture from his reference
   (brand/ratings/source-chatgpt-13nov.png), cut into one 489 x 570 file each
   (brand/ratings/<key>.png, served as assets/ratings/<key>.webp). They keep
   the reference's 395 x 460 card.

   Markup (site/rating-badge.js builds it):
     <img class="rb" data-r="g" src="/assets/ratings/g.webp" alt="G: General Audiences">
   Size it with --rb-w.
   ============================================================ */
/* --rb-w is NOT set here, so a container's --rb-w (the reel's row size)
   reaches the badge; 120px only when nothing sets it */
.rb {
  display: inline-block; flex: 0 0 auto; vertical-align: middle;
  width: var(--rb-w, 120px); height: auto; aspect-ratio: 489 / 570;
  border-radius: calc(var(--rb-w, 120px) * .012);
  box-shadow: 0 calc(var(--rb-w, 120px) * .01) calc(var(--rb-w, 120px) * .03) rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-drag: none;
}
/* a small inline chip (lists, pills) */
.rb--sm { --rb-w: 22px; box-shadow: none; }