body[data-page=charts] main{max-width:1440px}
.chart-hero{margin:-.25rem -2rem 0;padding:0 2rem .8rem;background-color:#faf8f2;background-image:linear-gradient(rgba(250,248,242,.82),rgba(250,248,242,.82)),url("images/floral-background.jpg");background-position:center 43%;background-size:cover;overflow:hidden}
.chart-hero-layout{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(360px,1.8fr) minmax(180px,.8fr);align-items:center;gap:1.2rem;max-width:1320px;margin:auto}
.chart-hero-portrait{height:320px;margin:0;overflow:hidden}
.chart-hero-portrait img{display:block;width:100%;height:100%;filter:sepia(.08);opacity:.92}
.phrenology-portrait img{object-fit:contain;object-position:center}
.dickens-portrait img{object-fit:cover;object-position:center 18%}
.chart-intro{max-width:760px;padding:1.1rem 0 .8rem;text-align:center}
.chart-intro h1{font-size:clamp(2rem,4vw,3.25rem);max-width:22ch;margin-inline:auto}
.chart-intro .central-question{font-size:1.2rem;margin:.5rem 0}
.chart-deck{font-size:.82rem;line-height:1.55;max-width:72ch;color:var(--muted);margin-inline:auto}
.chart-controls{border-block:1px solid var(--line);padding:.7rem 0}
.chart-topic{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.2rem 1.3rem}
.chart-topic legend{font-size:.68rem;font-weight:bold;letter-spacing:.04em;margin-bottom:.25rem;text-transform:uppercase;color:var(--muted)}
.chart-topic label{display:flex;align-items:center;gap:.5rem;min-height:46px;cursor:pointer}
.chart-topic input{width:20px;height:20px;min-height:20px;accent-color:#214d3f}
.chart-topic input:focus-visible{outline:3px solid #005ea8;outline-offset:4px}
#charts section{margin:3rem 0 4rem;padding-top:1.25rem;border-top:1px solid var(--line)}
#charts h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.45rem,2.5vw,2rem);font-weight:700;text-align:center;margin:.2rem auto 1rem;max-width:40ch}
#charts svg{display:block;width:100%;height:auto;min-width:900px;font-family:Arial,Helvetica,sans-serif;fill:#34423d;font-size:17px}
.chart-scroll{overflow-x:auto;padding-bottom:.35rem}
.chart-scroll:focus-visible{outline:3px solid #005ea8;outline-offset:4px}
.chart-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem 1.3rem;font-size:.75rem;padding:.6rem 0}
.chart-legend span{display:inline-flex;align-items:center;gap:.4rem}
.chart-legend i{width:18px;height:18px;display:inline-block}
.chart-legend .group-key{font-weight:bold}
.axis-label{font-size:18px}
.bar-total{font-size:14px;font-weight:bold}
.share-label{font-size:14px;font-weight:bold;fill:#202d2a}
.corpus-label{font-size:18px;font-weight:bold}
.work-label{font-size:16px}
.work-year{fill:#606e67;font-size:14px}
.chart-next{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:2.5rem 0 1rem;padding:1rem 0;border-top:1px solid var(--line)}
.chart-next p{font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;margin:0 auto 0 0}
.chart-next .button{font-size:.75rem}
@media(max-width:760px){
  .chart-hero{margin:-.25rem -1rem 0;padding:0 1rem .7rem;background-position:center}
  .chart-hero-layout{grid-template-columns:1fr 1fr;gap:.7rem}
  .chart-intro{grid-column:1/-1;grid-row:1;padding-bottom:.2rem}
  .chart-hero-portrait{height:180px}
  .phrenology-portrait{grid-column:1;grid-row:2}
  .dickens-portrait{grid-column:2;grid-row:2}
  .chart-intro{padding-top:.5rem}
  .chart-intro h1{font-size:2rem}
  .chart-intro .central-question{font-size:1rem}
  .chart-deck{font-size:.78rem}
  .chart-topic{gap:.2rem 1rem}
  #charts section{margin:2.4rem 0 3rem}
  #charts h2{font-size:1.45rem}
  .chart-legend{justify-content:flex-start}
  .chart-next p{flex-basis:100%;margin-bottom:.3rem}
  .chart-next .button{flex:1}
}
@media print{
  .chart-hero{margin:0;padding:0;background:none}
  .chart-controls,.chart-next{display:none}
  #charts section{break-inside:avoid}
  .chart-scroll{overflow:visible}
  #charts svg{min-width:0}
  .chart-legend i{print-color-adjust:exact}
}