/* The figure of a composer without a cut-out (decision #5): a greyscale header photo, or the surname in wide caps.
   Markup from template-parts/composer-figure.php; the suit colour never applies, the figure stays ink. */

/* Photo: greyscale, faded into the ground at the top and the sides, so the legacy header is no coloured box. */
.stage img.cf-photo {
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 38%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* Type: the surname fills the width of the stage and stands on its baseline. --n is the length of the word. */
.stage:has(.cf-type) { container-type: inline-size; }
.cf-type {
  display: block; width: 100%; white-space: nowrap; overflow: hidden; text-align: center; user-select: none;
  font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(2.5rem, calc(100cqw / (var(--n, 8) * 1.06)), 16rem); line-height: 0.82; padding: 0 0.02em 0.06em;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .sleeve .stage:has(.cf-type), .home-today .stage:has(.cf-type) { min-height: 0; padding-top: 24px; }
}

/* Meer van: a 56px figure in the corner of the tile, next to the number. */
.more li > a { position: relative; padding-right: 84px; }
.more .cf { position: absolute; top: 14px; right: 14px; width: 56px; height: 56px; }
.more img.cf { object-fit: contain; object-position: 50% 100%; margin: 0; -webkit-mask-image: none; mask-image: none; }
.more img.cf-photo { object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.06) brightness(0.9); }
.more a:hover img.cf-photo, .more a:focus-visible img.cf-photo { mix-blend-mode: multiply; }
.more .cf-type { display: grid; place-items: end center; font-size: 52px; line-height: 0.8; padding: 0; letter-spacing: 0; }
.more .cf-type .rest { display: none; }
.more a:hover .cf-type, .more a:focus-visible .cf-type { color: var(--on-cc); }
@media (max-width: 620px) {
  .more li > a { padding-right: 58px; }
  .more .cf { width: 36px; height: 36px; top: 12px; right: 10px; }
  .more .cf-type { font-size: 36px; }
}