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

   The component, its 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.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this, any padding on the body would add to its 100% height and the
     content would drift down by the whole of the top padding. */
  box-sizing: border-box;
}

body {
  background: #f3eeea; /* the component's background colour, for the off-frame area */
}

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

   A single constant, keyed to the width and with no cap. At a constant width in
   the component's own units, the layout is identical at every size: one value
   therefore frames the preview whatever the frame. A min(…) would break that
   property; there is none.

   152 can be demonstrated, and measured — verifier.mjs replays it. In units of
   --spb-font-size, the section is 79 tall, of which 8.125 is margin at the top
   and as much at the bottom: the content itself runs from 8.125 to 70.9. The
   preview is shown in two frames, the 16:9 of the component sheet and the 2:1 of
   the thumbnail; the tighter of the two offers N / 2 units of height, so we need
   70.9 ≤ N / 2, i.e. N ≥ 141.8. At 152 there are five units of margin left below
   the button, and the three units of background that spill off the bottom cannot
   be seen: the background is a flat colour, and it is background.
   -------------------------------------------------------------------------- */

.scroll-photo-band {
  --spb-font-size: calc(100vw / 152);

  /* The component's responsive breakpoints are those of a site: in a frame they
     make no sense, since the width of the frame says nothing about the device.
     So the nine ratios are frozen on the reference step (the one for 1440 px and
     above), and the scale above does the rest. */
  --spb-title-ratio: 3.75;
  --spb-print-ratio: 21.875;
  --spb-section-ratio: 8.125;
  --spb-gutter-ratio: 7.5;
  --spb-band-gap-ratio: 4.375;
  --spb-actions-ratio: 3.125;
  --spb-button-pad-y-ratio: 0.9375;
  --spb-button-pad-x-ratio: 1.5;
  --spb-title-width-ratio: 45;
  --spb-header-gap-ratio: 3.75;
}