/* Keep intrinsic-width controls and the event strip inside their grid cells. */
.event-rail, .movement-scroll, .movement-list, .story,
.perspective-group, .perspective-buttons, .knowledge-column,
.relationship-card, .relationship-select > *, .ordering-analysis > * {
  min-width: 0;
}
.perspective-switcher, .branch-switcher, .time-switcher {
  min-inline-size: 0;
  max-width: 100%;
}
.narrative-passage {
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
}
.narrative-passage > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .reader-layout { grid-template-columns: minmax(0, 1fr); }
  .event-rail, .movement-scroll, .movement-list { max-width: 100%; }
  .movement-list { overscroll-behavior-x: contain; }
  .site-header { flex-wrap: wrap; gap: .7rem 1rem; padding-top: .8rem; padding-bottom: .8rem; }
  .brand { min-width: 0; }
  .brand-mark { flex-shrink: 0; }
  .analytics-consent-actions { flex-wrap: wrap; }
  .perspective-switcher button, .branch-switcher button,
  .time-switcher button, .compare-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .story, .knowledge-column, .relational-reading,
  .relationship-card, .claim-card, .question-card { overflow-wrap: anywhere; }
  .event-controls { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; }
  .event-controls button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .event-reader { padding: 1rem; }
  .narrative-passage { padding: .65rem .35rem; gap: .5rem; }
}