/* Framing of the embedded preview — nothing in this file belongs to the
   component. This sheet is loaded AFTER the one of the component, and that is
   what lets it set the same variables again without raising specificity: at
   equal specificity, the last rule wins, including against a media query.

   Three things to achieve, and one thing not to do.

   1. box-sizing on html and body: without it, the inner padding adds to the
      100 % height and the content drifts towards the bottom of the frame.
   2. An invariant layout: every measurement of the drawing is brought down to
      a share of the width, with NO ceiling. A min() would break that property
      and a framing constant per size would then be needed.
   3. The responsive breakpoints of the component neutralised, otherwise the
      narrow frame of a thumbnail switches to the mobile settings and no longer
      shows the drawing we are talking about.

   The shares come from the measurement of the original at 1915 px wide:
     mount, margins, gutter   1.974 % of the width → 100vw / 177.31
     caption body copy        1.044 % of the width → 100vw /  95.75

   The height, on the other hand, is that of the frame: the component has to
   fill it, whether the frame is 16/9 for the reference page or 2/1 for the
   thumbnail. */

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

.curtain-hero {
  /* The two scale modules, as a share of the width of the frame. */
  --ch-unit: calc(100vw / 177.31);
  --ch-font-size: calc(100vw / 95.75);

  /* The five measurements the breakpoints of the component redefine, put back
     to their reference value so that the narrow frame of a thumbnail shows the
     same drawing as a large one. */
  --ch-passe-partout: calc(3.5 * var(--ch-unit));
  --ch-marge: calc(3.5 * var(--ch-unit));
  --ch-gouttiere: calc(3.5 * var(--ch-unit));
  --ch-bande-marge: calc(3.5 * var(--ch-unit));
  --ch-meta-largeur: calc(14 * var(--ch-font-size));
  --ch-photo-cadrage: 50% 50%;

  /* The component fills the frame, whatever its ratio. */
  --ch-hauteur: 100vh;
  width: 100%;
}