/* ==========================================================================
   PULSE — THE GRIDS.

   This file and tools/grid.json are the same fact written twice, on purpose:
   here is how wide a photograph is drawn, there is the `sizes` string that
   width implies and the srcset ladder it asks for. A figure names ONE of these
   classes and gets its width, its aspect behaviour and its sizes attribute from
   it. No figure anywhere in this project states a pixel width or a sizes string
   of its own.

   That is rule three of the template, and it is what makes a section
   re-parameterisable: turning the live-music band into a small plate beside
   text is changing `g-wide` to `g-plate` in the markup, and the CSS, the
   encoded widths and the sizes attribute all follow. In NAMI two neighbouring
   cards in one row carried different hand-written sizes strings purely because
   they happened to be different sizes in the mock-up; when the layout changed,
   the attributes did not. Here they cannot drift, because there is only one of
   them.

   The four event photographs share g-event and the four artists share g-artist
   for exactly that reason: they are the same object in the layout, so they are
   the same object here.
   ========================================================================== */

/* every grid is a block that holds a photograph and nothing else */
[class*="g-"] > picture { display: block; height: 100%; }
[class*="g-"] img { width: 100%; height: 100%; object-fit: cover; }

/* --- g-stage: the whole viewport ------------------------------------------
   sizes: 100vw */
.g-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* --- g-tall: the phone crop of a stage photograph -------------------------
   sizes: 100vw. Reached through media.js's `phone` option; it never appears as
   a class on a figure, because it is the same figure at a different width. */

/* --- g-wide: a cinematic strip inside the gutters -------------------------
   sizes: (min-width: 1240px) 1140px, 92vw */
.g-wide {
  width: min(92vw, 1140px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* --- g-frame: a chapter photograph beside its type ------------------------
   sizes: (min-width: 1000px) 620px, 88vw */
.g-frame {
  width: min(88vw, 620px);
  aspect-ratio: 7 / 5;
  overflow: hidden;
}

/* --- g-event: the photograph an event row opens ---------------------------
   sizes: (min-width: 1000px) 480px, 84vw */
.g-event {
  width: min(84vw, 480px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* --- g-artist: the portrait behind a name ---------------------------------
   sizes: (min-width: 1000px) 380px, 62vw */
.g-artist {
  width: min(62vw, 380px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* --- g-plate: a small plate beside text -----------------------------------
   sizes: (min-width: 1000px) 300px, 46vw */
.g-plate {
  width: min(46vw, 300px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* --- g-share --------------------------------------------------------------
   Not a layout. The social card, encoded once at 1200x630 and never drawn on
   the page — it exists so the grid table is the only place image widths are
   written down, including the one width no CSS rule ever uses. */