:root {
  --riedel-red: #D12F3A;
  --page-bg: #282B2D;
  --bar-pad: 12px;
  --logo-h: 26px;
  --bar-height: calc(var(--logo-h) + 2 * var(--bar-pad));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--page-bg);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  height: var(--bar-height);
  background: var(--riedel-red);
  display: flex;
  align-items: center;
  padding: var(--bar-pad);
}

.logo {
  height: var(--logo-h);
  width: auto;
  display: block;
}

.stage {
  padding: 32px 24px 48px;
  display: flex;
  justify-content: center;
}

.player {
  width: 100%;
  /* Keep the 16:9 frame inside the viewport so the page doesn't scroll. */
  max-width: min(1280px, calc((100vh - var(--bar-height) - 80px) * 16 / 9));
}

video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
}

.status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #C9CCCE;
}

@media (max-width: 600px) {
  :root { --logo-h: 20px; }
  .stage { padding: 16px 16px 32px; }
}