/* MC cursor head: bust sits on the hairline under the "Pick a format." heading, right aligned.
   The heading row must be position:relative and its bottom edge is the hairline (border-bottom or the list's border-top).
   Sheet = 5 x 6 tiles of 600 x 467 px (2x retina for a 124 CSS px bust, sharp up to ~300 CSS px). */

.mc-head {
  position: absolute;
  right: 0;
  bottom: 0;                       /* sits ON the hairline */
  width: 124px;                    /* desktop >= 1100px */
  aspect-ratio: 600 / 467;         /* one tile */
  pointer-events: none;
  user-select: none;
}
.mc-head__sprite {
  position: absolute;
  inset: 0;
  background-image: url(pmc_head_sheet.webp);
  background-size: 500% 600%;      /* 5 columns x 6 rows */
  background-position: 50% 20%;    /* default tile: yaw 0, pitch 0, eyes open (col 2, row 1) */
  background-repeat: no-repeat;
}
/* soft contact shadow where the bust meets the hairline */
.mc-head::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -3px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
}

/* iPad portrait, 600 to 1099px: heading row above a full-width player */
@media (max-width: 1099px) {
  .mc-head { width: 104px; }
}
/* iPhone, below 600px: to the right of the heading, on a hairline under the heading row */
@media (max-width: 599px) {
  .mc-head { width: 78px; }
}