.section-lead {
  max-width: 46rem;
}

.project-main .section-wrap > h2 {
  margin-bottom: 0.75rem;
}

.project-main .panel h2 {
  margin-bottom: 1.15rem;
}

.visuals-lead {
  max-width: none;
}

.space-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.space-visual-grid > .visual-card:not(.wide) .visual-note {
  min-height: 4.5rem;
}

.heatmap-wrap {
  overflow-x: auto;
}

.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
  font-family: 'Cutive Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.legend-swatch {
  margin-right: 0.35rem;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .animated-chart .chart-trace {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  .animated-chart .chart-bar {
    opacity: 0;
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  .animated-chart .mini-fill {
    transform: scaleX(0);
    transform-origin: left center;
  }

  .space-heatmap-chart rect {
    opacity: 0;
  }

  .animated-chart.is-visible .chart-trace {
    animation: chartTrace 1375ms ease-out forwards;
  }

  .animated-chart.is-visible .chart-bar {
    animation: chartBarRise 775ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--chart-delay, 0ms) forwards;
  }

  .animated-chart.is-visible .mini-fill {
    animation: chartBarGrow 775ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--chart-delay, 0ms) forwards;
  }

  .space-heatmap-chart.is-visible rect {
    animation: chartFadeIn 625ms ease-out forwards;
  }
}

@keyframes chartTrace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chartFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes chartBarRise {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes chartBarGrow {
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 760px) {
  .space-visual-grid {
    grid-template-columns: 1fr;
  }

  .space-visual-grid > .visual-card:not(.wide) .visual-note {
    min-height: 0;
  }
}