/* Six scene links share one quiet navigation row. Typography treatments stay unchanged. */
.frame {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas: 'title scenes';
  align-content: start;
  align-items: center;
  gap: 0 26px;
}

.scene-links {
  grid-area: scenes;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 23px;
}

.frame .scene-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #29251e;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.frame .scene-links a:hover { color: #000; }

/* Resolve tracking at each line's size so the longer breakfast title stays open. */
#breakfast .type-line { letter-spacing: -.025em; }

/* Dark ink stays legible when the portrait crop places the title over the red car. */
#drive .type-poster__fishing { color: var(--ri-ink); }

/* Keep the new two-character compositions in view on narrower desktop windows. */
#breakfast .hero-image img,
#camping .hero-image img,
#drive .hero-image img { object-position: 80% 50%; }

@media (max-width: 640px) {
  .frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'title' 'scenes';
  }
  .scene-links { gap: 0 15px; }
  .frame .scene-links a { min-height: 34px; font-size: 11px; }
  #breakfast .hero-image img { object-position: 65% 50%; }
  #camping .hero-image img { object-position: 70% 50%; }
  #drive .hero-image img { object-position: 82% 50%; }
}