/* components__HeroMosaic */
.hm:not(.mc-s) { min-width: 0; width: 100%; max-width: 32rem; justify-self: center; }
  /* Reserve the deliberate bleed inside the stage, even at 320px. */
  .hm-stage:not(.mc-s) { padding: 7% 6% 8%; }
  .hm-board:not(.mc-s) {
    position: relative;
    aspect-ratio: 1;
    background: var(--paper);
    border: clamp(6px, 1vw, 12px) solid var(--paper-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .hm-grid:not(.mc-s), .hm-colours:not(.mc-s) {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(16, minmax(0, 1fr));
  }
  .hm-grid:not(.mc-s) { gap: 1px; background: var(--paper-light); overflow: hidden; }
  .hm-cell:not(.mc-s) { background: var(--paper); min-width: 0; min-height: 0; }
  .hm-colour:not(.mc-s) { margin: 1px 0 0 1px; }
  .hm-magenta:not(.mc-s) { background: var(--magenta); }
  .hm-yellow:not(.mc-s) { background: var(--yellow); }
  .hm-blue:not(.mc-s) { background: var(--blue); }
  .hm-brick:not(.mc-s) { background: var(--brick); }
  .hm-teal:not(.mc-s) { background: var(--teal); }
  .hm-logo:not(.mc-s) { position: absolute; inset: 25% 0; overflow: hidden; background: var(--teal); }
  .hm-logo:not(.mc-s) img:not(.mc-s) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .hm-notch:not(.mc-s) { position: absolute; width: 6.25%; height: 6.25%; background: var(--paper); }
  .hm-notch-top:not(.mc-s) { top: 25%; left: 18.75%; }
  .hm-notch-bottom:not(.mc-s) { bottom: 25%; left: 62.5%; }
  .hm-quarter:not(.mc-s) { position: absolute; width: 12.5%; height: 12.5%; box-shadow: var(--shadow-overlay); }
  .hm-quarter-brick:not(.mc-s) { top: -5%; left: -6%; background: var(--brick); border-top-left-radius: 100%; }
  .hm-quarter-blue:not(.mc-s) { bottom: 6.25%; right: -6%; background: var(--blue); border-top-right-radius: 100%; }
  .hm-photo:not(.mc-s) { position: absolute; background: var(--teal); box-shadow: var(--shadow-overlay); }
  .hm-photo-1:not(.mc-s) { width: 12.5%; height: 12.5%; left: 50%; top: -6.25%; }
  .hm-photo-2:not(.mc-s) { width: 18.75%; height: 18.75%; right: -6.25%; top: -6.25%; }
  .hm-photo-3:not(.mc-s) { width: 25%; height: 25%; left: 12.5%; bottom: -6.25%; }
  .hm-photo:not(.mc-s) picture, .hm-photo:not(.mc-s) img { display: block; width: 100%; height: 100%; }
  .hm-photo:not(.mc-s) img { object-fit: cover; object-position: var(--photo-position, 50% 40%); }
  .hm-toolbar:not(.mc-s) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2xs) var(--space-s); }
  .hm-film:not(.mc-s) {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--control-height);
    color: var(--teal);
    font-size: var(--type-meta);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--motion-color);
  }
  .hm-film:hover:not(.mc-s),
  .hm-film:focus-visible:not(.mc-s) {
    color: var(--ink);
    text-decoration: underline;
  }
  .hm-film-play:not(.mc-s) {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    color: currentColor;
    transition: transform var(--motion-move);
  }
  @media (hover: hover) and (pointer: fine) {
    .hm-film:hover:not(.mc-s) .hm-film-play:not(.mc-s) { transform: translateX(3px); }
  }