/* Star ratings (design DI) on every page except Films (it keeps base.css's stars; films.js).
   Big outlined stars. Much bigger stars with a thick black outline (like every card and button):
   filled yellow, empty white. On yellow (the Review of the week block, a hovered card) the fill turns blue. */
.stars {
  --star-on: var(--c1);
  --star-off: #fff;
  -webkit-text-stroke: 0.05em var(--ink);
  letter-spacing: 0.06em;
  font-size: 2.1rem;
  line-height: 1.1;
  align-self: flex-start;
}
.blk--1 .stars,
.cards a:hover .stars, .cards a:focus-visible .stars,
.rc a:hover .stars, .rc a:focus-visible .stars { --star-on: var(--c2); }
/* the yellow shelf's cards turn blue on hover: stars go back to yellow there */
.shelf--2 .rc a:hover .stars, .shelf--2 .rc a:focus-visible .stars { --star-on: var(--c1); }

/* Review of the week: label on one line, stars big beside it (they drop below it on phones) */
.blk--1 .lbl { flex-wrap: wrap; row-gap: 0.4rem; }
.blk--1 .lbl .stars { font-size: clamp(2.4rem, 4vw, 3.4rem); }

/* Cards */
.cards .stars { font-size: clamp(1.8rem, 2.4vw, 2.2rem); margin: 0.15rem 0; }
.rc .stars { font-size: 2.1rem; margin: 0.1rem 0; }

/* Review page: kicker stars big, verdict stars huge */
.rh__kick { flex-wrap: wrap; row-gap: 0.4rem; }
.rh__kick .stars { font-size: clamp(2.2rem, 4vw, 3rem); }
.verdict__stars { align-items: center; flex-wrap: wrap; }
.verdict__stars .stars { font-size: clamp(3.4rem, 10vw, 6.4rem); -webkit-text-stroke-width: 0.04em; }

/* List entries */
.e-meta .stars { font-size: 1.9rem; }

/* All reviews on phones: the cards are smaller (BA shrinks the stars there; this sets this style's size) */
@media (max-width: 44em) { .archive .rc .stars { font-size: 1.6rem; } }