/* Variables */
:root {
  --story-max-width: 65ch;
  --story-body-bg: #f5f6f8;   /* light background */
  --story-title-bg: #e0e3e8;  /* darker grey for the title */
}

/* Body (keeps your current look) */
.card-story,
.card-story-body {
  box-sizing: border-box;
  max-width: var(--story-max-width);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--story-body-bg);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.7;
  padding: 1.25rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Optional: fine-tune long-form text */
.card-story .card-body,
.card-story-body .card-body {
  line-height: 1.7;
}

/* Title: same width/box model and horizontal centering as body */
.card-story-title {
  box-sizing: border-box;
  max-width: var(--story-max-width);
  margin-left: auto;
  margin-right: auto;
  /* Control vertical spacing; adjust as needed */
  margin-top: 2rem;
  margin-bottom: 2rem;

  width: 100%;
  background-color: var(--story-title-bg);
  text-align: center;
  padding: 1rem 1.25rem; /* matches body horizontal padding */
  border-radius: 0.5rem 0.5rem 0 0;
  color: #212529;
  font-weight: 600;
}