.field-guide .route-diagram {
  margin: 1.75rem 0;
  border-block: 1px solid var(--line);
  padding-block: 1rem;
}

.field-guide .route-diagram figcaption {
  padding: 0 0 1rem;
}

.route-diagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
}

.route-diagram-grid > div {
  min-width: 0;
  padding: 1rem 0.6rem;
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.route-north,
.route-south {
  grid-column: 1 / -1;
  font-weight: 700;
  color: var(--yellow);
  background: #16221b;
}

.route-west,
.route-center,
.route-east {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.route-west { background: #192b21; }
.route-center { background: #242927; }
.route-east { background: #22313b; }
.route-diagram-grid strong { color: #fff; }
.route-diagram-grid a { margin-top: auto; }

@media (max-width: 600px) {
  .route-diagram-grid { gap: 0.3rem; }
  .route-diagram-grid > div { padding: 0.8rem 0.35rem; }
  .route-west, .route-center, .route-east { font-size: 0.85rem; }
}