/* Chapter 3: five rooms. At rest each is a held frame: blurred screens around one sharp one. */
.flight { padding: 0; }
.room {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  height: 100svh;
  min-height: 560px;
  padding: var(--bar-h) var(--margin) var(--margin);
  overflow: hidden;
  background: var(--ground);
}
.room-back img { filter: brightness(var(--still-dim)); opacity: var(--still-fade); }
.room-screen {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 40px 90px rgb(0 0 0 / 0.5);
  transform: perspective(1400px) rotateY(9deg) rotateX(1deg);
}
.room:nth-child(even) .room-screen { transform: perspective(1400px) rotateY(-9deg) rotateX(1deg); }
.room:nth-child(even) .room-screen { order: 2; }
.room-copy { position: relative; display: grid; gap: 14px; }
.room h2 { font-size: var(--type-big); text-wrap: balance; }
.room-copy p { font-size: var(--body-big); font-weight: 500; line-height: 1.4; }

@media (max-width: 760px) {
  .room { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; min-height: 0; }
  .room:nth-child(even) .room-screen { order: 0; }
  .room-screen, .room:nth-child(even) .room-screen { transform: none; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14); }
}