/* A collection card: a picture from one of the collection's own shows, blurred,
   with the collection's name over it. Markup is _collcard.html; the picture is
   chosen in web/app.py collection_cover().

   TWO CONTRACTS, both assuming the worst pixel is pure white (a photograph
   cannot be checked statically). The title is large bold type (never under
   18.66px at the narrowest card, 150px), so WCAG's large-text 3:1 applies: a
   uniform scrim of rgba(23,19,15,.55) over white gives #EFE7D8 3.33:1. The
   count line is small, so it needs 4.5:1 and sits on its own chip,
   rgba(23,19,15,.70), 5.60:1 over white (more over the scrim beneath it).
   tools/test-a11y-classes.py computes both from the --cc-* values below.

   The blur is on a scaled-up copy of the image URL the site already serves
   (no new file): scale(1.12) pushes the blurred rim outside the clipped box. */
:root{--cc-scrim-r:23; --cc-scrim-g:19; --cc-scrim-b:15; --cc-scrim-a:.55; --cc-chip-a:.70; --cc-s-scrim-a:.74; --cc-s-chip-a:.86;
  --tile-brass:#7A5A28; --tile-brick:#8B3A3A; --tile-paper:#FAF5EA;
  --tile-ink:#1E1A16; --tile-ink-soft:#4A443E}
.cc{position:relative; min-width:0}
.cc-pic-link{display:block; text-decoration:none}
.cc-pic{position:relative; display:block; width:100%; aspect-ratio:var(--ar-tall);
  overflow:hidden; box-sizing:border-box; container-type:inline-size;
  background:var(--stage-bg); color:var(--stage-fg);
  outline:2px solid transparent; outline-offset:-2px;
  transition:outline-color var(--beat) var(--ease)}
.cc:hover .cc-pic{outline-color:var(--ink)}
.cc-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(3px); transform:scale(1.12)}
.cc-pic::after{content:""; position:absolute; inset:0;
  background:rgba(var(--cc-scrim-r),var(--cc-scrim-g),var(--cc-scrim-b),var(--cc-scrim-a))}
.cc-txt{position:absolute; z-index:1; inset:0; box-sizing:border-box; padding:9%;
  display:flex; flex-direction:column; justify-content:flex-end; text-align:left}
.cc-txt .tt{display:block; font-family:var(--display); font-weight:600;
  font-size:calc(var(--fs, 24) * .92cqw); line-height:.98; letter-spacing:0;
  color:var(--stage-fg); overflow-wrap:anywhere}
.cc-txt .ty{align-self:flex-start; padding:.15em .45em; margin-top:3cqw;
  background:rgba(var(--cc-scrim-r),var(--cc-scrim-g),var(--cc-scrim-b),var(--cc-chip-a)); font-family:var(--display); font-weight:600;
  font-size:max(13px, 8cqw); line-height:1.2; color:var(--stage-fg)}
/* No picture: the typographic tile, same grounds as .pc .tile. */
.cc .tile{display:flex; flex-direction:column; justify-content:flex-end;
  box-sizing:border-box; width:100%; aspect-ratio:var(--ar-tall); padding:9%;
  overflow:hidden; text-align:left; container-type:inline-size}
.cc .tile .tt{display:block; font-family:var(--display); font-weight:600;
  font-size:calc(var(--fs, 24) * .92cqw); line-height:.98; letter-spacing:0;
  text-align:left; color:inherit; overflow-wrap:anywhere}
.cc .tile .ty{display:block; margin-top:3cqw; font-family:var(--display); font-weight:600;
  font-size:max(13px, 8cqw); line-height:1.2; color:inherit}
.cc .tile.g0{background:var(--stage-bg); color:var(--stage-fg)}
.cc .tile.g1{background:var(--tile-brass); color:var(--tile-paper)}
.cc .tile.g2{background:var(--tile-brick); color:var(--tile-paper)}
.cc .tile.g3{background:var(--stage-fg); color:var(--tile-ink)}
.cc .tile.g4{background:var(--tile-ink); color:var(--tile-paper)}
.cc .tile.g5{background:var(--stage-gold); color:var(--stage-bg)}
.cc b{display:block; margin-top:var(--u); font-family:var(--display);
  font-size:var(--d4); line-height:1.06; font-weight:600; letter-spacing:-.005em}
.cc b a{display:inline-block; min-width:24px; min-height:24px; color:var(--ink);
  text-decoration:none}
.cc b a:hover,.cc b a:focus-visible{text-decoration:underline; text-underline-offset:3px}
/* The large card's type and padding follow the rest of the site: the 8px unit
   (16px, the same as the page gutter inside a card) and one steady title size
   that scales gently with the card, not a headline sized to fill it. 22px bold
   is the floor, so the large-text 3:1 contract above still holds. */
.cc:not(.cs) .cc-txt,.cc:not(.cs) .tile{padding:calc(var(--u)*2)}
.cc:not(.cs) .cc-txt .tt,.cc:not(.cs) .tile .tt{font-size:max(22px,8cqw); line-height:1.08;
  font-weight:600; letter-spacing:0}
.cc:not(.cs) .cc-txt .ty,.cc:not(.cs) .tile .ty{margin-top:var(--u); font-size:var(--t-cap)}
/* Small box: about 104px square, the whole box is the link. The title can be as
   small as 13px here, so it is held to 4.5:1 rather than the large-text 3:1: a
   stronger scrim (.74 over pure white gives about 6:1) and a darker chip. */
.cs-link{display:block; text-decoration:none; color:inherit}
.cs-link:focus-visible{outline:3px solid var(--gold-deep); outline-offset:2px}
.cs .cc-pic{aspect-ratio:1}
.cs .cc-pic::after{background:rgba(var(--cc-scrim-r),var(--cc-scrim-g),var(--cc-scrim-b),var(--cc-s-scrim-a))}
.cs:hover .cc-pic{outline-color:var(--ink)}
.cs .cc-txt{padding:7%}
.cs .cc-txt .tt{font-size:calc(var(--fs, 24) * .92cqw); line-height:.98}
.cs .cc-txt .ty{margin-top:3px; font-size:12px; padding:.1em .3em; white-space:nowrap;
  background:rgba(var(--cc-scrim-r),var(--cc-scrim-g),var(--cc-scrim-b),var(--cc-s-chip-a))}
.cs .tile{aspect-ratio:1; padding:8%}
.cs .tile .ty{margin-top:3px; font-size:12px; white-space:nowrap}
/* The small boxes read as a set: one title size and the same 8px-unit padding,
   so "Cole Porter" and "Shows that played once" no longer swing between sizes. */
.cs .cc-txt,.cs .tile{padding:calc(var(--u)*1.25)}
.cs .cc-txt .tt,.cs .tile .tt{font-size:15px; line-height:1.1; letter-spacing:0}
/* Data saver: keep the ground and the words, skip the photograph. */
@media (prefers-reduced-data: reduce){.cc-pic img{display:none}}
/* The collections page: a wrapping row of the same cards. */
.cc-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:calc(var(--u)*2.5); margin:calc(var(--u)*3) 0}