/* commercial.css - the opening of the Commercial page.

   Two banks of pictures flanking the statement, counter scrolling against each
   other, which is the opening the technology page already uses. The parallax is
   not decoration: a collage of stills with no depth reads as wallpaper, and the
   counter scroll is the only thing that makes a pinboard of pictures look like
   a board rather than a background.

   Two things differ from the technology page's version.

   The pictures are the trade itself: terminals, rail yards, straddle carriers,
   a container handler, a ship working under lights at night. The board carried
   product screenshots at first, rate tables and a cost chart, and they were the
   wrong thing twice over, flat white panels in a dark collage and a picture of
   software on a page that is about the world the software reads.

   The right bank is not mirrored. The technology page flips its right bank so
   the two sides lean into the type instead of repeating one stagger twice. That
   was left out here while the board carried screenshots, whose type would have
   run backwards, and it stays out: the right bank has its own hand placed
   stagger, which does the same job without the flip.

   Scoped to .cmh. No em dashes and no middle dots in rendered text. */

.cmh{position:relative;min-height:100svh;overflow:hidden;background:#000;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr) minmax(0,.82fr);
  align-items:center}

/* taller than the frame, because the two banks counter scroll and a column
   sized to the viewport shows its own top and bottom edge as it travels */
.cmhcol{position:relative;height:118%;top:-9%;overflow:hidden;will-change:transform}
.cmhcol img{position:absolute;display:block;object-fit:cover;
  filter:grayscale(.55) contrast(1.12) brightness(.78);
  box-shadow:0 0 0 1px rgba(255,255,255,.07)}
/* every tile is placed by hand: a collage laid out on a grid is a contact
   sheet, and the overlap is the only thing that makes it read as a board */
.cmhcol--l img:nth-child(1){top:-4%;left:2%;width:62%;aspect-ratio:4/3}
.cmhcol--l img:nth-child(2){top:11%;left:38%;width:58%;aspect-ratio:16/10}
.cmhcol--l img:nth-child(3){top:28%;left:-6%;width:52%;aspect-ratio:16/10}
.cmhcol--l img:nth-child(4){top:43%;left:30%;width:66%;aspect-ratio:16/9}
.cmhcol--l img:nth-child(5){top:60%;left:4%;width:50%;aspect-ratio:4/3}
.cmhcol--l img:nth-child(6){top:73%;left:40%;width:58%;aspect-ratio:4/3}
.cmhcol--l img:nth-child(7){top:88%;left:8%;width:56%;aspect-ratio:16/10}

/* its own stagger rather than the left one flipped */
.cmhcol--r img:nth-child(1){top:-6%;right:4%;width:58%;aspect-ratio:3/4}
.cmhcol--r img:nth-child(2){top:14%;right:34%;width:60%;aspect-ratio:16/10}
.cmhcol--r img:nth-child(3){top:31%;right:-4%;width:56%;aspect-ratio:16/10}
.cmhcol--r img:nth-child(4){top:47%;right:32%;width:52%;aspect-ratio:1/1}
.cmhcol--r img:nth-child(5){top:62%;right:2%;width:62%;aspect-ratio:16/10}
.cmhcol--r img:nth-child(6){top:77%;right:36%;width:56%;aspect-ratio:4/3}
.cmhcol--r img:nth-child(7){top:91%;right:6%;width:52%;aspect-ratio:16/9}

/* ---------- the statement ----------
   It holds the page's existing headline, standfirst and button, at the size the
   middle of a full screen of pictures needs. The block was written for a plain
   centred opening and set at 24px in a 711px column, which left the collage
   holding the screen on its own and the sentence sitting in the hole in the
   middle of it.

   No scrim behind it. The banks stop well short of the middle column at every
   width they are shown at, and a radial fall of black over a board of pictures
   reads as a dark oval laid on the page rather than as depth. Below 1100px the
   banks are hidden outright, so there is nothing to hold the type off. */
.cmh__mid{position:relative;z-index:2;align-self:center;text-align:center;
  padding:clamp(40px,8vh,120px) clamp(10px,2vw,34px)}
.cmh__mid h2{margin:0 auto;max-width:17ch;
  font-size:clamp(1.9rem,3.4vw,3.4rem);line-height:1.06;letter-spacing:-.02em}
.cmh__mid > p{margin-inline:auto;max-width:34ch;
  font-size:clamp(1.02rem,1.3vw,1.28rem);line-height:1.4}
.cmh__mid > p:last-child{margin-top:clamp(22px,2.8vh,34px)}

@media (max-width:1100px){
  /* the banks are the first thing to go: at this width they are two slivers
     either side of the type and the collage stops being legible as one */
  .cmh{grid-template-columns:minmax(0,1fr);min-height:0;
    padding:clamp(60px,12vh,140px) clamp(16px,3.4vw,46px)}
  .cmhcol{display:none}
  .cmh__mid{padding-inline:0}
  .cmh__mid::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cmhcol{transform:none !important}
}