/* ==========================================================================
   HAVEN. — THE GRIDS.

   A photograph never states a width. It sits in a grid, the grid class below
   decides how wide it is drawn, and tools/grid.json decides — from the SAME
   entry — what `sizes` string and what encoded widths that implies. The two
   halves of one fact, in two files that are generated from one source.

   These classes go on the empty station FRAMES as well as on figures, which is
   what makes the rule literal here: the frame the lens docks into carries the
   grid, the photograph the lens holds belongs to the same grid, and
   tools/check.mjs fails the build if a station's slot and its frame's class
   ever disagree.

   --r is the frame's aspect ratio, written by assets/js/site/lens.js from the
   photograph's own dimensions. The shape of the window is the shape of the
   picture in it, so a reshaping lens can never letterbox and there is no second
   table of aspect ratios to drift out of date.
   ========================================================================== */
.frame {
  position: relative;
  aspect-ratio: var(--r, 1.6);
}

/* the window as the whole screen: the opening horizon and the closing sunset */
.g-open { width: 100%; }

/* g-tall is not a layout of its own — it is the phone crop of a g-open
   photograph, reached through media.js's `phone` option, and it exists so that
   an art-directed portrait crop gets its own sizes without a media query. */

/* the travelling lens docked into a chapter frame. One width for all sixteen
   photographs; only the aspect changes. The min() is what keeps a portrait
   crop from running off the bottom of a short viewport — and it can only ever
   make the window NARROWER than `sizes` promises, which is the safe direction. */
.g-lens { width: min(100%, calc(74vh * var(--r, 1.6))); }

/* one of the three frames on the window wall. --wall-w is the token version of
   this grid's `sizes` string; the vh cap only ever makes it narrower, which is
   the safe direction. */
.g-wall { width: min(var(--wall-w), calc(62vh * var(--r, 1))); }

/* a wide strip inside the page gutters */
.g-band { width: 100%; }

/* a small upright plate set beside text */
.g-plate { width: min(100%, 300px); }
.g-plate img { width: 100%; height: auto; }

/* every photograph inside a frame fills it; the crops are composed to the same
   aspect the frame is given, so `cover` has almost nothing to do */
.frame img, .lens__shots img { width: 100%; height: 100%; object-fit: cover; }