/* Styles of /unrehearse/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Page specifics (shared files stay untouched). The case is images only: the
   two covers are the hero, side by side on the column lines (4 + 4 of the 9
   content columns on desktop, 5 + 5 of 12 above 1200px, 4 + 4 of 8 on
   tablet, 2 + 2 of 4 on phone). */
body.case-page .up-covers {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--g-gutter);
}
body.case-page .up-covers img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: left top;
}
body.case-page .up-covers img:nth-child(1) { grid-column: 1 / span 4; }
body.case-page .up-covers img:nth-child(2) { grid-column: 5 / span 4; }
body.case-page .up-hero { --cp-ar: 1681 / 1191; }
body.case-page .up-spread { --cp-ar: 1057 / 721; }

@media (min-width: 64em) {
  /* No text pair on this case, so the first screen ends with the hero (row 8)
     and the first spread follows on the grid instead of leaving rows 9-12
     empty. */
  body.case-page .cp-stage {
    min-height: 0;
    grid-template-rows: repeat(8, minmax(var(--v-row), auto));
    padding-bottom: var(--v-gutter);
  }
  body.case-page .cp-flow { padding-top: var(--v-pitch); }
  /* Spreads 3 and 4 share a line: the first four content columns and the
     last four, one empty column between (five and five, two between, above
     1200px). */
  body.case-page .up-spread--l { grid-column: 1 / span 4; }
  body.case-page .up-spread--r { grid-column: span 4 / -1; }
}
@media (min-width: 75.0625em) {
  body.case-page .up-covers { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body.case-page .up-covers img:nth-child(1) { grid-column: 1 / span 5; }
  body.case-page .up-covers img:nth-child(2) { grid-column: 6 / span 5; }
  body.case-page .up-spread--l { grid-column: 1 / span 5; }
  body.case-page .up-spread--r { grid-column: span 5 / -1; }
}
@media (max-width: 63.99em) {
  body.case-page .up-covers { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 37.49em) {
  body.case-page .up-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.case-page .up-covers img:nth-child(1) { grid-column: 1 / span 2; }
  body.case-page .up-covers img:nth-child(2) { grid-column: 3 / span 2; }
}