/* css */
:root {
  --story-max-width: 65ch;        /* base width for cards */
  --quote-title-extra: 8ch;       /* how much wider the title bar is than the card */

  --story-body-bg: #f5f6f8;
  --story-title-bg: #e0e3e8;
  --quote-text: #212529;
  --quote-muted: #4b5563;
  --quote-border: #d2d7df;
  --radius: 0.5rem;
}

/* Scope: ensures the same ch basis for title and cards */
.downloadables-scope {
  /* Normalize the font base so ch is consistent */
  font-size: 1rem;
  font-family: var(--bs-body-font-family, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
}

/* Page title bar: exactly base + extra; same box model as card */
/* .downloadables-scope .card-downloadable-title {
  box-sizing: border-box;
  max-width: var(--story-max-width);
  margin: 2rem auto 0 auto;
  background-color: var(--story-title-bg);
  color: var(--quote-text);
  text-align: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--quote-border);
  border-bottom: 6rem; /* visually does not attach to the card below */ 
/* } */

.downloadables-scope .card-downloadable-title {
  box-sizing: border-box;
  max-width: var(--story-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 36%; /* PDEBUG: This is a hack...*/
  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;
}

/* Optional: visually larger title text without changing the width math */
.downloadables-scope .card-downloadable-title .title-text {
  display: inline-block;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  line-height: 1.2;
}

/* Card: same base width and box model as the title */
.downloadables-scope .card-downloadable {
  box-sizing: border-box;
  max-width: var(--story-max-width);
  margin: 0 auto 1.25rem auto;
  background-color: var(--story-body-bg);
  color: var(--quote-text);
  border: 1px solid var(--quote-border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1rem 1.25rem;
  line-height: 1.65;
}

/* identifier line: bold 12pt exactly */
.downloadables-scope .card-downloadable-identifier {
  font-weight: 700;
  font-size: 14pt;
  margin-bottom: 0.5rem;
  color: var(--quote-text);
}

/* downloadable body */
.downloadables-scope .card-downloadable-body {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  color: var(--quote-muted);
  border-left: 3px solid var(--quote-border);
  padding-left: 0.75rem;
}