/* "Background" excerpts under a chart page (layouts/_partials/charts/background.html).
   Kept out of extras.css / custom.css so adding it does not change the stylesheet that every other page links. */
.mtp-bg {
  margin: 44px 0 8px; padding: 26px 22px 12px;
  background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-top: 3px solid var(--mtp-brass); border-radius: 2px;
}
.mtp-bg > h2 { margin: 0 0 6px; }
.mtp-bg-lede { margin: 0 0 18px; max-width: 70ch; color: var(--mtp-muted); font-size: 14px; line-height: 1.55; }
.mtp-bg-block { margin: 0 0 30px; padding-top: 18px; border-top: 1px solid var(--mtp-line); }
.mtp-bg-block > h3 { margin: 0 0 12px; font-size: 1.4rem; color: var(--mtp-brass-bright); }
.mtp-bg-text { max-width: 72ch; }
.mtp-bg-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; }
.mtp-bg-text h4 { margin: 22px 0 8px; font-size: 1.15rem; color: var(--mtp-paper); }
.mtp-bg-text h5 { margin: 16px 0 6px; font-size: 1rem; font-family: "Source Sans 3", sans-serif; font-weight: 700; color: var(--mtp-muted); letter-spacing: .02em; }
.mtp-bg-text ul, .mtp-bg-text ol { margin: 0 0 14px; padding-left: 1.3em; line-height: 1.6; }
.mtp-bg-text li { margin: 0 0 4px; }
.mtp-bg-text a { color: var(--mtp-brass-bright); text-decoration-color: rgba(224, 189, 114, .45); text-underline-offset: 2px; }
.mtp-bg-text a:hover { color: var(--mtp-paper); }
.mtp-bg-summary .mtp-bg-text p { font-size: 18px; color: var(--mtp-paper); }
.mtp-bg-source {
  max-width: 72ch; margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--mtp-line);
  color: var(--mtp-muted); font-size: 12.5px; line-height: 1.55;
}
.mtp-bg-source a { color: var(--mtp-brass-bright); }
.mtp-bg-intro { margin: 0 0 12px; color: var(--mtp-muted); font-size: 14px; }

.mtp-chart-page .mtp-bg ul.mtp-bg-items { list-style: none; margin: 0; padding: 0; max-width: 80ch; }
.mtp-chart-page .mtp-bg ul.mtp-bg-items li { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid var(--mtp-line); }
.mtp-chart-page .mtp-bg ul.mtp-bg-items li:last-child { border-bottom: 0; }
.mtp-bg-label { color: var(--mtp-brass-bright); font-family: "Cormorant Garamond", serif; font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.mtp-bg-label:hover { color: var(--mtp-paper); text-decoration: underline; }
.mtp-bg-item-text { font-size: 15.5px; line-height: 1.55; }

.mtp-bg-table { width: 100%; max-width: 72ch; border-collapse: collapse; font-size: 15px; }
.mtp-bg-table th, .mtp-bg-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--mtp-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mtp-bg-table th { width: 13em; color: var(--mtp-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mtp-bg-table a { color: var(--mtp-brass-bright); }

@media (max-width: 640px) {
  .mtp-bg { padding: 20px 14px 8px; }
  .mtp-chart-page .mtp-bg ul.mtp-bg-items li { grid-template-columns: 1fr; }
  .mtp-bg-table th { width: 8em; }
}

/* The chart is what people print; background reading stays on screen. */
@media print {
  .mtp-bg { display: none !important; }
}