.chart-cards {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3);
 margin: var(--s4) 0 var(--s5);
 padding: 0;
 list-style: none;
}
body.charts-page main > .wrap { max-width: calc(var(--wide) + 8rem); }
.chart-cards li { min-width: 0; padding: var(--s4); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.chart-cards a { font-weight: 700; }
.chart-cards p { margin: var(--s2) 0 0; color: var(--ink-2); font-size: .9375rem; }
.chart-scroll { max-width: 100%; margin: var(--s4) 0; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.chart-scroll:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.embeddable-chart { width: max-content; margin: 0; padding: var(--s2); }
.embeddable-chart img { display: block; width: auto; max-width: none; height: auto; }
.embeddable-chart figcaption { padding: var(--s2) var(--s3); color: var(--ink-2); font-size: .875rem; }
.chart-embed-code { max-width: 100%; overflow-x: auto; margin: var(--s3) 0 var(--s4); padding: var(--s4); border-radius: var(--radius-sm); background: #0b1d3a; color: #fff; font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.chart-sources { margin: var(--s4) 0; }
.chart-sources li { overflow-wrap: anywhere; }
.chart-note { padding: var(--s4); border: 1px solid var(--amber-rule); border-radius: var(--radius-sm); background: var(--amber-wash); color: var(--ink-2); }
.chart-note > :last-child { margin-bottom: 0; }

@media (max-width: 42rem) {
 .chart-cards { grid-template-columns: 1fr; }
 .chart-embed-code { font-size: .8125rem; }
}