.page-title {
  font-size: var(--fs-editorial-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  max-width: 10.9em;
}

.page-title--medium { font-size: var(--fs-editorial-title); }

.gradient-intro { padding-block: 3rem 5.5rem; }

.gradient-intro__lead { max-width: var(--reading-measure); font-size: var(--fs-reading-lead); line-height: var(--lh-body); }

.chart { margin-top: 3.75rem; padding: 2.5rem 2.625rem 2.25rem; }

.chart__scroll { overflow-x: auto; }

.chart__svg {
  width: 100%;
  min-width: 720px;
  height: auto;
  overflow: visible;
}

.chart__band { fill: var(--surface-muted); }
.chart__grid { stroke: var(--rail-tie); stroke-width: 1; }

.chart__title {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: var(--fs-chart-title);
  letter-spacing: var(--tracking-title);
}

.chart__tick {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-chart-label);
  text-anchor: end;
}

.chart__line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.chart__point { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.chart__point--highest { fill: var(--rails); }

.chart__bar { fill: var(--ink); }
.chart__bar--best { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.chart__bar--pending { fill: none; stroke: var(--pending); stroke-width: 1.5; stroke-dasharray: 5 4; }

.chart__value {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-chart-label);
  text-anchor: middle;
}

.chart__label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-chart-label);
  text-anchor: middle;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-top: 2rem;
  font-size: var(--fs-control);
  line-height: var(--lh-ui);
}

.legend {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}

.legend::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: var(--border-thin) solid var(--ink);
}

.legend--highest::before { background: var(--rails); border-radius: 50%; }
.legend--best::before { background: var(--accent); border-radius: 3px; }
.legend--pending::before { border: 1.5px dashed var(--pending); border-radius: 3px; }

/* Family tables */
.families { padding-block: 5.5rem 3rem; }

.family + .family { margin-top: 3.5rem; }

.family__title {
  margin-bottom: 1.25rem;
  font-size: var(--fs-card-title);
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-ui-title);
}

.table-wrap {
  background: var(--surface);
  border-radius: 20px;
  overflow-x: auto;
}

.branch-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-control);
  line-height: var(--lh-ui);
}

.branch-table th, .branch-table td {
  padding: .875rem 1.375rem;
  text-align: left;
  vertical-align: middle;
}

.branch-table thead th {
  padding-block: 1.125rem;
  color: var(--ink-muted);
  font-weight: var(--fw-ui);
  font-size: var(--fs-caption);
  border-bottom: var(--border-thin) solid var(--ink);
}

.branch-table tbody tr + tr { border-top: 1.5px solid var(--ink); }

.branch-table tbody th { font-weight: 400; width: 30%; }
.branch-table td:nth-child(2) { width: 30%; }

.branch-table .num { text-align: right; white-space: nowrap; }
.branch-table .mono { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-control); }

.branch-table__best { background: var(--highlight); }
.branch-table__best .fraction__max,
.branch-table__best .pending-note { color: var(--ink); }

.pending-note { color: var(--ink-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }

.families__footnote {
  margin-top: 2.5rem;
  max-width: var(--reading-measure);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

@media (max-width: 720px) {
  .chart { padding: 1.5rem 1rem; }
}

.chart__hint { color: var(--ink-muted); font-size: var(--fs-control); margin-bottom: 1rem; }

/* The family index and table headers keep exploration distinct from the chart. */
.families > .page-index { margin-bottom: var(--space-l); }
.family { scroll-margin-top: var(--space-l); }
.family .table-wrap { border: var(--border-thin) solid var(--ink); }
.family .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.branch-table thead th { color: var(--surface); background: var(--ink); }
.branch-table tbody tr:not(.branch-table__best):hover { background: var(--member-tint); }
.table-scroll-hint { font-size: var(--fs-caption); color: var(--ink-muted); margin-bottom: var(--space-l); }