@starting-style {
  dialog[open] {
    opacity: 0;
  }
}

body {
  background: khaki;
  padding: 1.5rem;

  &:has(dialog[open]) {
    overflow: hidden;
  }
}

dialog {
  overflow: hidden;
  overscroll-behavior: contain;
  transition: opacity .5s ease-in-out;
  max-width: 65ch;

  &:open {
    opacity: 1;
  }

  &::backdrop {
    background: hsl(0 0 0 / .5);
    backdrop-filter: blur(5px);
    overscroll-behavior: contain;
  }
}

.article-banner {
  background: #fff;
  border: 10px groove darkkhaki;
  display: grid;
  padding: 3rem;
  place-items: center;
}