.page-scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-sm);
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.page-scene__panel {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
}

.page-scene__title {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.page-scene__panel :where(p) {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text);
  margin: 0;
}

/* Centered panels (max-width: 40rem) start overlapping the fixed
   legend-menu (left: var(--space-lg) + var(--legend-width) = 18rem) once the
   viewport is narrower than 40rem + 2 * 18rem = 76rem — same threshold as
   .scene__panel in main.css. Unlike that rule, there's no scroll-minimap on
   these pages, so only the left side needs clearing. */
@media (max-width: 77rem) {
  .page-scene__panel {
    width: auto;
    max-width: none;
    margin-inline: 0;
    margin-left: calc(var(--space-lg) + var(--legend-width) + var(--space-xl));
    margin-right: var(--space-xl);
  }
}

/* Below the mobile-menu breakpoint the legend-menu is replaced by the fixed
   bottom bar (assets/css/components/mobile-menu.css), so there's nothing
   left to clear. */
@media (max-width: 50rem) {
  .page-scene__panel {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }

  .page-scene {
    padding-bottom: var(--mobile-menu-toggle-height);
  }
}

@media (max-width: 30rem) {
  .page-scene__panel {
    padding: var(--space-md) var(--space-sm);
  }
}