/* ==========================================================================
   HOME
   The press on the left, the words going past it on the right.

   The press is pinned and does not move. An earlier pass had it worked by
   the scroll, bracing and delivering a card; it was taken out deliberately.
   This is a drawing of a machine, not a film of one.
   ========================================================================== */

.stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  padding:0 var(--gut);
  /* long enough that all four panels of writing pass the press */
  min-height:calc(var(--sheet-h, 100svh) * 3.2);
}

/* THE PRESS. Sticky, so it holds still while the column beside it runs.

   IT ALSO CARRIES THE PAPER, and that is not decoration. position:sticky
   creates a stacking context, which means the film's multiply blend can only
   reach as far as this element: with nothing painted here it blends against
   transparency, stays opaque, and the press sits in a white box on the
   sheet. Painting the same tile at the same size gives the blend the paper
   it is supposed to disappear into. */
.stage__press{
  position:sticky; top:0;
  align-self:start;
  height:var(--sheet-h, 100svh);
  display:flex; align-items:center; justify-content:center;
  background:url('img/paper.jpg') repeat, var(--paper);
  background-size:1100px auto;
}

.press{
  margin:0;
  width:min(100%, 420px);
}

/* THE PRESS AT WORK.

   The film the studio supplied: the same engraving, with the lever coming
   down. It is 4 seconds on a loop, and it is silent.

   multiply is what puts it on the paper. The film has a white ground, and
   white multiplied by the sheet IS the sheet, so the paper shows through and
   only the engraving survives. Nothing may sit behind it, or that is what it
   multiplies into instead. */
.press__film{
  display:block; width:100%; height:auto;
  mix-blend-mode:multiply;
}

/* The still is the fallback, and it is the SAME drawing: assets/img/svg/
   press.svg is cut from the studio's Illustrator file by tools/cut-press.py,
   which is where the film's artwork came from too. Shown only when the film
   is not, so it never doubles up. */
.press__still{ display:none; width:100%; height:auto; }

/* Anyone who has asked for less motion gets the drawing instead of the film.
   A looping animation is exactly what that setting is for. */
@media (prefers-reduced-motion: reduce){
  .press__film{ display:none; }
  .press__still{ display:block; }
}

/* THE WORDS. One panel per screenful, running past the press. */
.stage__read{ padding:clamp(3rem,10vw,7rem) 0; }
.beat{
  min-height:var(--sheet-h, 100svh);
  display:flex; flex-direction:column; justify-content:center;
  gap:1.4rem;
  padding:2rem 0;
}
.beat__n{
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
.beat__t{
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:1.14;
  max-width:18ch;
}
.beat p{ max-width:42ch; color:var(--ink-soft); }


@media (max-width:820px){
  .stage{ grid-template-columns:1fr; min-height:0; }
  /* Below this the two columns would each be too narrow to read or to see,
     so the press stops being pinned and becomes a picture at the top of the
     writing. */
  .stage__press{ position:relative; height:auto; padding:2rem 0; }
  .press{ width:min(78%,340px); }
  .beat{ min-height:0; padding:1.2rem 0; }
}