/* Loaded via <link media="(max-width: 800px)"> after style.css.
   Single column: nameplate, then video, then sponsor banner. Page scrolls normally. */

html, body {
  height: auto;
  overflow: auto;
}

.stage {
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.nameplate {
  justify-self: stretch;
  width: 100%;
  padding: 14px 18px;
}
.nameplate__mark { width: 38px; height: 38px; }
.nameplate__name { font-size: 2.2rem; }
.nameplate__sub { font-size: .8rem; }

.video-wrap { align-self: stretch; }
.frame {
  width: 100%;
  padding: 6px;
}
.frame__rec { top: 16px; left: 16px; font-size: .7rem; }

.sponsor {
  flex: 1;
  min-height: 340px;
  gap: 28px;
  padding: 24px 20px;
}
.sponsor__title { font-size: clamp(3.6rem, 22vw, 6rem); }
.sponsor__text { max-width: none; }
.sponsor__cta {
  align-self: stretch;
  padding: 16px 22px;
  text-align: center;
}