/*
 * Librarium Militaris: the stream.
 *
 * The box reserves its own 16:9 before the player loads, so deferring several
 * hundred kilobytes of someone else's JavaScript moves nothing on the page.
 */

@layer components {
  .videostage {
    position: relative;
    width: 100%;
    /* Capped against the viewport's height as well as its width. At the shell's
       full width a 16:9 box is taller than a laptop screen, so the player ran
       off the bottom; four-fifths of the viewport keeps the whole frame on
       screen and costs a wide monitor nothing it will notice. */
    max-width: calc(80svh * 16 / 9);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--color-void);
  }

  .videostage__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}