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

/* Juno Hops, page-specific only. Structure comes from css/case-page.css and
   css/grid.css. This case is all images, so the flow holds "sets": a block
   on all the content columns (nine on desktop, twelve above 1200px) that is
   itself a subgrid, with one gutter between rows. A full image takes all
   of them; a pair takes four columns each with the empty column between
   them (five each, two between, on the twelve); on tablet a pair is 4 + 4
   of the eight columns and on phone every image takes the four. */
body.case-page .jh-set {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--g-gutter);
  align-items: start;
}
body.case-page .jh-fig { grid-column: 1 / -1; margin: 0; min-width: 0; }
body.case-page .jh-fig img,
body.case-page .jh-fig video { display: block; width: 100%; height: auto; }
body.case-page .jh-fig--a { grid-column: 1 / span 4; }
body.case-page .jh-fig--b { grid-column: 5 / span 4; }

/* A heading with no text under it is the first item of its set, on the
   first three columns of the set, one gutter above its images. */
body.case-page .cp .jh-set > .cp-block { grid-column: 1 / span 3; }
body.case-page .cp .jh-set > .cp-block h2 { margin-bottom: 0; }

/* The first image bleeds to the right edge of the viewport: it keeps its
   left edge on the column line and cancels the right inset of the stage
   (--cp-bleed-r, css/case-page.css). */
body.case-page .cp-stage > .cp-hero,
body.case-page .jh-fig--third {
  margin-right: calc(-1 * var(--cp-bleed-r));
}

/* The wall above the cans is the part to lose when the box is wider than the
   photo: the crop comes off the top and the cans keep their base. */
body.case-page .cp-stage > .cp-hero img { object-position: 50% 100%; }

@media (min-width: 64em) {
  /* No text pair under the hero: the first screen ends with the hero and
     the images start right below it, instead of leaving rows 9-12 empty. */
  body.case-page .cp-stage {
    min-height: 0;
    grid-template-rows: repeat(9, minmax(var(--v-row), auto));
  }
  /* The first image takes eight rows (2 to 9) so it is barely cropped. */
  body.case-page .cp-stage > .cp-hero { grid-row: 2 / span 8; }
  body.case-page .jh-fig--b { grid-column: 6 / span 4; }
}
@media (min-width: 75.0625em) {
  body.case-page .jh-fig--a { grid-column: 1 / span 5; }
  body.case-page .jh-fig--b { grid-column: 8 / span 5; }
}

/* First set: the second image sits one gutter under the hero (the first
   content columns), the body text one gutter under it too, on the last
   three (four above 1200px), and the third image goes under the text on
   the same columns, one row below. */
body.case-page .cp .jh-set > .cp-block.jh-text { grid-column: 5 / span 4; grid-row: 1; }
body.case-page .cp-flow > .jh-set:first-child .jh-fig--a { grid-row: 1 / span 2; }
body.case-page .jh-fig--third { grid-column: 5 / span 4; grid-row: 2; margin-top: calc(var(--v-row) - var(--g-gutter)); }
body.case-page .cp-flow { padding-top: var(--v-gutter); }
@media (min-width: 64em) {
  body.case-page .cp .jh-set > .cp-block.jh-text { grid-column: span 3 / -1; }
  body.case-page .jh-fig--b.jh-fig--third { grid-column: span 3 / -1; }
}
@media (min-width: 75.0625em) {
  body.case-page .cp-flow > .jh-set:first-child .jh-fig--a { grid-column: 1 / span 6; }
  body.case-page .cp .jh-set > .cp-block.jh-text { grid-column: span 4 / -1; }
  body.case-page .jh-fig--b.jh-fig--third { grid-column: span 4 / -1; }
}
@media (max-width: 37.49em) {
  body.case-page .cp .jh-set > .cp-block.jh-text,
  body.case-page .jh-fig--third,
  body.case-page .cp-flow > .jh-set:first-child .jh-fig--a { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}

@media (max-width: 37.49em) {
  body.case-page .jh-fig--a,
  body.case-page .jh-fig--b,
  body.case-page .cp .jh-set > .cp-block { grid-column: 1 / -1; }
}

/* Mockups: the title on its own row, one gutter above everything in the
   section. Then two images on one line, aligned on the bottom, of about the
   same size: the first four content columns and the other five (five and
   seven above 1200px). The last one goes from the first content column to
   the cut of the page. Tablet: 4 + 4 of the eight columns. Phone: stacked. */
body.case-page .cp .jh-mockups > .jh-mockups__title { grid-column: 1 / -1; grid-row: 1; }
body.case-page .jh-fig--m1 { grid-column: 1 / span 4; grid-row: 2; align-self: end; }
body.case-page .jh-fig--m2 { grid-column: 5 / -1; grid-row: 2; align-self: end; }
body.case-page .jh-fig--m3 {
  grid-column: 1 / -1;
  margin-right: calc(-1 * var(--cp-bleed-r));
}
@media (min-width: 75.0625em) {
  body.case-page .jh-fig--m1 { grid-column: 1 / span 5; }
  body.case-page .jh-fig--m2 { grid-column: 6 / -1; }
}
@media (max-width: 37.49em) {
  body.case-page .cp .jh-mockups > .jh-mockups__title,
  body.case-page .jh-fig--m1,
  body.case-page .jh-fig--m2 { grid-column: 1 / -1; grid-row: auto; }
}

/* "Label and art" runs sideways on desktop. .jh-pin is as tall as the distance
   to travel, .jh-stage sticks to the viewport inside it and the script at the
   end of the page turns the vertical scroll into a translate of the track.
   The title stays still on row 2, one gutter above the images; only the images
   move. Every piece has the same height (rows 3 to 9) and its own proportion,
   so nothing is cropped. The window starts on the line of the first content
   column and bleeds off the right edge. Without JS the window is a plain horizontal scroller. Tablet and phone keep the stacked set: the stage and the window
   are display: contents there. */
body.case-page .jh-pin { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--g-gutter); min-width: 0; }
body.case-page .cp .jh-pin .jh-pin__title { grid-column: 1 / -1; }
body.case-page .cp .jh-pin .jh-pin__title h2 { margin-bottom: 0; }
body.case-page .jh-stage,
body.case-page .jh-window { display: contents; }

@media (min-width: 64em) {
  body.case-page .jh-pin {
    display: block;
    min-height: 100dvh;
    /* Rows 10 to 12 stay empty, so the next set may rise into them when the
       track ends, and the air under the images is the usual one. */
    margin-bottom: calc(-3 * var(--v-pitch));
  }
  body.case-page .jh-stage {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: grid;
    grid-template-columns: repeat(var(--cp-cols), minmax(0, 1fr));
    column-gap: var(--g-gutter);
    grid-template-rows: repeat(var(--g-rows), var(--v-row));
    row-gap: var(--v-gutter);
  }
  body.case-page .cp .jh-pin .jh-pin__title { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  body.case-page .jh-window {
    grid-column: 1 / -1;
    grid-row: 3 / span 7;
    display: block;
    min-width: 0;
    --jh-inset: var(--cp-bleed-r);
    margin-right: calc(-1 * var(--jh-inset));
    overflow-x: auto;
  }
  html.jh-on body.case-page .jh-window { overflow: clip; }
  body.case-page .jh-track {
    display: flex;
    gap: var(--g-gutter);
    width: max-content;
    height: 100%;
    /* The last image ends on the right edge of the last content column. */
    padding-right: var(--jh-inset);
    box-sizing: border-box;
    align-items: stretch;
    will-change: transform;
  }
  body.case-page .jh-track .jh-fig { flex: none; height: 100%; aspect-ratio: var(--ar); display: block; }
  body.case-page .jh-track .jh-fig img,
  body.case-page .jh-track .jh-fig video { width: 100%; height: 100%; object-fit: cover; }
}

/* Art on black: the image box is black while it loads and around a contained image (was inline). */
img.jh-on-black { background: #000; }