/* ==========================================================================
   HAVEN. — the window wall.

   A calm wall of three empty frames in three proportions, staggered so the eye
   travels down through them rather than across a row. The lens docks into each
   in turn: these three stations are close enough together that the travel
   reads as one object hopping between frames, which is the site's main visual
   rhythm and the clearest statement of the whole idea.

   The three frames are the same WIDTH and differ only in height, which is why
   they are one grid and one `sizes` — see tools/grid.json. A frame that ever
   needs to be wider than its neighbours needs a grid of its own, not a
   hand-written sizes attribute.
   ========================================================================== */
.wall { padding: 12vh 0 14vh; }

.wall__frames {
  display: grid;
  gap: 14vh;
  margin-top: 6rem;
  justify-items: center;
}

/* THE CELL AND THE GRID AGREE ON ONE NUMBER. --wall-w in tokens.css is the same
   fact as g-wall's `sizes` string in tools/grid.json; the caption is as wide as
   the frame because it is the same width, not because it was measured. */
.wall__cell {
  display: grid;
  gap: 1.1rem;
  width: var(--wall-w);
}
.wall__caption {
  color: var(--ink-45);
  border-top: 1px solid var(--ink-18);
  padding-top: .8rem;
}

@media (min-width: 900px) {
  /* Left, centre, right — descending. An earlier version of this wall put the
     three frames in a row and staggered them with margin-top, which looked
     right and was wrong: their centres ended up within a hundred pixels of each
     other AND out of order, so the window had nowhere to travel and the
     sequence ran backwards. The wall is a DESCENT. The horizontal move across
     the page is what makes it read as one object hopping between frames. */
  .wall__frames { gap: 16vh; }
  .wall__cell:nth-child(1) { justify-self: start; margin-left: 5%; }
  .wall__cell:nth-child(2) { justify-self: center; }
  .wall__cell:nth-child(3) { justify-self: end; margin-right: 5%; }
}
@media (max-width: 899px) {
  .wall { padding: 8vh 0; }
  .wall__frames { gap: 9vh; }
}