/* Styles of /arcana-rider/ 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. */

/* ---------- IMAGE GALLERIES, on all the content columns ----------
   Nothing here is a fixed position. A full image takes all the columns at its
   own shape. A pair sits on the columns, 4 + 5 or 5 + 4 on the nine content
   columns of desktop (nine do not split in two), 5 + 7 or 7 + 5 on the
   twelve above 1200px, 4 + 4 on tablet, one under the other on phone. Both images of a pair share one height (the row has an aspect
   ratio, --ar-d on desktop and --ar-t on tablet) and are cropped to fill
   their column. */
body.case-page .ar-gal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--g-gutter);
  align-items: start;
}
body.case-page .ar-gal figure { margin: 0; min-width: 0; position: relative; overflow: hidden; }
body.case-page .ar-full { grid-column: 1 / -1; }
body.case-page .ar-full img,
body.case-page .ar-full video,
body.case-page .ar-pair--free img { display: block; width: 100%; height: auto; }

body.case-page .ar-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: stretch;
  aspect-ratio: var(--ar-d);
}
body.case-page .ar-pair--45 > :first-child { grid-column: 1 / span 4; }
body.case-page .ar-pair--45 > :last-child  { grid-column: 5 / span 5; }
body.case-page .ar-pair--54 > :first-child { grid-column: 1 / span 5; }
body.case-page .ar-pair--54 > :last-child  { grid-column: 6 / span 4; }
body.case-page .ar-pair:not(.ar-pair--free) img,
body.case-page .ar-pair:not(.ar-pair--free) video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A pair whose pieces keep their own shape (the square and the wide strip). */
body.case-page .ar-pair--free { aspect-ratio: auto; align-items: start; }

/* A campaign opens with its text on the left and one image on the right:
   the last six content columns. */
body.case-page .ar-lead { grid-column: span 6 / -1; margin: 0; min-width: 0; }
body.case-page .ar-lead img,
body.case-page .ar-lead video { display: block; width: 100%; height: auto; }

@media (min-width: 75.0625em) {
  body.case-page .ar-pair--45 > :first-child { grid-column: 1 / span 5; }
  body.case-page .ar-pair--45 > :last-child  { grid-column: 6 / span 7; }
  body.case-page .ar-pair--54 > :first-child { grid-column: 1 / span 7; }
  body.case-page .ar-pair--54 > :last-child  { grid-column: 8 / span 5; }
}
@media (max-width: 63.99em) {
  body.case-page .ar-gal { grid-column: 1 / -1; }
  body.case-page .ar-pair { aspect-ratio: var(--ar-t); }
  body.case-page .ar-pair--45 > :first-child,
  body.case-page .ar-pair--54 > :first-child { grid-column: 1 / span 4; }
  body.case-page .ar-pair--45 > :last-child,
  body.case-page .ar-pair--54 > :last-child  { grid-column: 5 / span 4; }
  body.case-page .ar-lead { grid-column: 5 / -1; }
}
@media (max-width: 37.49em) {
  body.case-page .ar-pair { aspect-ratio: auto; row-gap: var(--g-gutter); }
  body.case-page .ar-pair > :first-child,
  body.case-page .ar-pair > :last-child,
  body.case-page .ar-pair--45 > :first-child,
  body.case-page .ar-pair--45 > :last-child,
  body.case-page .ar-pair--54 > :first-child,
  body.case-page .ar-pair--54 > :last-child { grid-column: 1 / -1; aspect-ratio: var(--r); }
  body.case-page .ar-pair--free > :first-child,
  body.case-page .ar-pair--free > :last-child { aspect-ratio: auto; }
  body.case-page .ar-lead { grid-column: 1 / -1; }
}