/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The component, a background, nothing else.

   This page is not a site: it is a frame. On a site, "narrow screen" means "a
   phone". Here, narrow means "small frame": so nothing about the composition
   changes, the scale is fitted to the space available.

   Four traps, all of them verified by the bench:

   1. box-sizing on html and body, otherwise the slightest padding would add to
      the 100% height and push the hero downwards.
   2. The two side panels and the two watercolours are absolutely positioned:
      they weigh nothing in the height. It is the middle panel, in flow, that
      carries it — and it gets it from its aspect-ratio, so there is nothing to
      give back to the centring here.
   3. The scale follows the width, with no cap: --th-font-size is 100vw / 141,
      and nothing bounds it. The layout is then the same at every size, so this
      single constant frames the preview in the 16:9 of the component sheet just
      as well as in the 2:1 of the thumbnail. A min() or a clamp() would break
      that property.
   4. There is no entrance animation to wait for; there is, on the other hand, a
      scroll follower which takes --th-ease to settle. The bench waits for --th-p
      to be stable, never for a fixed delay.
   ========================================================================== */

html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f6f4ec;
}

/* --------------------------------------------------------------------------
   The scale.

   141 is the only value in the file, and it can be demonstrated. At a scale of
   F, the hero takes up, in height:

     the intro     28.69 F    the two rules, the ornament, the eyebrow, the
                              heading on two lines, the link
     the panel     46.00 F    31.1112 F wide × 828/560
     the margin     4.22 F

   i.e. 78.91 F in total. For it to fit in a 16:9 frame, that is, in
   0.5625 × width:

     78.91 × width / N ≤ 0.5625 × width     →     N ≥ 140.3

   141 leaves half a per cent of margin below the edge, with no cap, so the
   proportion holds at every frame size.
   -------------------------------------------------------------------------- */

.triptych-hero {
  --th-font-size: calc(100vw / 141);

  /* The component expresses its vertical drift in vh, which ties it to the
     viewport. In a frame whose height says nothing about the component, it is
     tied to the component's own scale instead: the framing becomes identical
     whatever the shape of the frame, which a vh would not guarantee between the
     16:9 of the sheet and the 2:1 of the thumbnail. */
  --th-course: calc(0.72 * var(--th-font-size));
}

/* The component's breakpoints reason in viewport width. In a narrow frame they
   would fire even though the scale has already brought everything to the right
   size: so the wide proportions are reasserted. */
@media (max-width: 991px) {
  .triptych-hero {
    --th-title: calc(3.4445 * var(--th-font-size));
    --th-pad-bottom: calc(4.2223 * var(--th-font-size));
    --th-pad-x: calc(1.1112 * var(--th-font-size));
  }
}

/* The scroll travel: without it the page fits the frame exactly, nothing can
   scroll, and the animated preview would show a still image. It displays nothing
   and is not read — it is travelled through.

   48 vh, and no more. The height of the travel bounds the scroll, so it bounds
   both the progress reached and the final framing. In a frame of height H, the
   hero measures 1.12 H and the panel 0.62 H set 0.39 H from the top, hence:

     scroll available = 1.12 H + travel − H = 0.12 H + travel
     progress reached = (0.11 H + scroll) / 1.12 H
     the panel leaves through the top beyond 1.01 H of scroll

   At 48 vh the scroll tops out at 0.60 H: the progress rises to 0.63 — the
   panels are clearly apart and tilted — and the middle panel still occupies the
   centre of the frame. Verified on a contact sheet: at 130 vh the hero left the
   frame entirely and the animated preview ended on emptiness; at 65 vh the last
   frames were emptying out at the bottom. */
.apercu__course {
  height: 48vh;
}