.narrative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.narrative-card,
.method-block:has(.narrative-thesis),
.method-block:has(.narrative-timeline) {
  border: 1px solid rgba(201, 169, 110, .24);
  border-radius: 1rem;
  background: rgba(12, 25, 38, .76);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
}

.narrative-card h2,
.narrative-timeline h3 {
  margin-top: 0;
}

.narrative-meta,
.narrative-source,
.narrative-timeline { list-style: none; padding-left: 0; }

.narrative-timeline > li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: .15rem .8rem;
  margin: .6rem 0;
}

.narrative-date { color: var(--muted, #aab6c2); font-variant-numeric: tabular-nums; }
.narrative-flag { grid-column: 2; font-size: .85rem; color: var(--gold, #c9a96e); }
.narrative-timeline .narrative-source { grid-column: 2; margin-top: 0; }

.narrative-guide {
  margin-top: 1.5rem;
  color: var(--muted, #aab6c2);
  font-size: .92rem;
}

.narrative-guide summary { cursor: pointer; }

@media (max-width: 40rem) {
  .narrative-timeline > li { grid-template-columns: 1fr; }
  .narrative-flag, .narrative-timeline .narrative-source { grid-column: 1; }
}

.narrative-older {
  margin-top: 1rem;
  padding: 1rem;
  border-left: 2px solid rgba(201, 169, 110, .45);
}

.narrative-evidence-details { margin-top: 1rem; }
.narrative-evidence-details summary, .narrative-older summary { cursor: pointer; }
.narrative-thesis, .narrative-evidence, .narrative-meta, .narrative-timeline, .narrative-change-list, .narrative-guide { overflow-wrap: anywhere; }