/* act A frame 2 and the body copy after it */
.scrim-obs { background: linear-gradient(to top, var(--night) 0%, rgba(13, 15, 12, 0.88) 24%, rgba(13, 15, 12, 0.35) 52%, transparent 70%); }
.glow-obs { background: radial-gradient(ellipse 44% 30% at 50% 42%, rgba(242, 199, 122, 0.2), transparent 70%); }
.obs-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(40px + env(safe-area-inset-bottom)); }
.obs-copy h2 { max-width: 12em; }

.obs-body { padding-top: var(--s-8); }
.obs-grid { display: grid; gap: var(--s-6); }
.obs-text { max-width: 34em; }
.turn { max-width: 18em; }
@media (min-width: 768px) and (orientation: landscape) {
  .obs-copy { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; width: min(44vw, 640px); padding-top: var(--bar-h); }
  .scrim-obs { background: linear-gradient(to right, var(--night) 0%, rgba(13, 15, 12, 0.8) 36%, transparent 60%); }
  .glow-obs { background: radial-gradient(ellipse 36% 40% at 58% 50%, rgba(242, 199, 122, 0.2), transparent 70%); }
}
@media (min-width: 1200px) {
  .obs-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .obs-text { grid-column: 2 / 7; }
  .obs-grid .turn { grid-column: 8 / 13; margin-top: 10rem; }
}
@media (min-width: 768px) and (orientation: portrait) { .obs-copy { max-width: 36rem; } }