body.story-overlay-open { position: fixed; width: 100%; overflow: hidden; }

.story-overlay {
  width: 74vw;
  height: 92vh;
  height: 92dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #FEFDF3;
  box-shadow: 0 10px 30px rgba(15, 25, 35, .14);
  overflow: hidden;
}
.story-overlay[open] { display: flex; flex-direction: column; }
.story-overlay::backdrop { background: rgba(15, 25, 35, .32); }
.story-overlay-bar { flex: none; display: flex; justify-content: flex-end; align-items: center; min-height: 48px; padding: 0 16px; }
.story-overlay-close { padding: .4rem 0; border: 0; background: transparent; color: var(--heading); font: inherit; cursor: pointer; }
.story-overlay-close:hover, .story-overlay-close:focus-visible { color: var(--blue-dark); }
.story-overlay iframe { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: #FEFDF3; }

@media (min-width: 801px) {
  .story-overlay-bar { padding: 6px 24px 0; }
  .story-overlay-close { font-size: 1.125rem; }
}

@media (max-width: 800px) {
  .story-overlay { width: 100vw; height: 100vh; height: 100dvh; }
  .story-overlay-bar { min-height: 52px; }
}