@media (max-width: 980px) {
  .site-nav {
    display: none;
  }

  .workbench-grid {
    grid-template-columns: 1fr 1fr;
  }

  .echo-panel {
    grid-column: span 2;
  }

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

  .century-grid {
    grid-template-columns: repeat(20, minmax(8px, 1fr));
  }

  .ledger-grid,
  .rule-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 64px;
  }

  .brand__mark {
    width: 42px;
  }

  .header-action {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .workbench {
    width: min(100% - 24px, var(--container));
    padding-top: 20px;
  }

  .workbench-visual {
    top: 58px;
    right: -220px;
    width: 820px;
    opacity: 0.28;
  }

  h1 {
    font-size: clamp(48px, 18vw, 76px);
  }

  .workbench-grid,
  .echo-panel,
  .timeline,
  .ledger-grid,
  .rule-grid {
    grid-template-columns: 1fr;
  }

  .echo-panel {
    grid-column: span 1;
  }

  .range-row {
    grid-template-columns: 1fr 42px;
  }

  .range-row span {
    grid-column: 1 / -1;
  }

  .timeline-section,
  .ledger-section,
  .protocol-section {
    width: min(100% - 24px, var(--container));
  }

  .century-grid {
    grid-template-columns: repeat(10, minmax(12px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}