/* Bearings' existing visual system, adjusted for Field Guide's exact copy. */
.direction-f .e-hero h1 {
  white-space: normal;
}

.direction-f .e-hero-log > span:last-child {
  min-width: 200px;
}

/* Reserve space for the label and north marker independently of the chart. */
.direction-f .e-hero-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  row-gap: 22px;
  padding-top: 10px;
}

.direction-f .f-chart-key {
  display: grid;
  grid-template-columns: minmax(0, max-content) 36px;
  justify-content: end;
  align-items: start;
  gap: 22px;
  padding-right: 20px;
}

.direction-f .e-coordinate-top {
  position: static;
  line-height: 1.6;
  text-align: right;
}

.direction-f .f-north-marker {
  width: 36px;
  height: 50px;
  color: #dfce88;
}

.direction-f .e-main-phone {
  position: relative;
  top: auto;
  left: auto;
  justify-self: center;
  align-self: start;
  transform: translateX(10%) rotate(7deg);
}

.direction-f .e-hero-art > figcaption {
  position: static;
  justify-self: end;
  margin: 0 30px 10px 0;
}

.direction-f .e-chart-note {
  gap: 28px;
}

.direction-f .e-chart-note em {
  font-size: 24px;
}

.direction-f .e-chart-note > span {
  font-size: 27px;
}

@media (max-width: 760px) {
  .direction-f .e-hero h1 {
    font-size: clamp(50px, 13.9vw, 81px);
  }

  .direction-f .e-hero-log {
    flex-wrap: wrap;
    gap: 18px;
  }

  .direction-f .e-hero-log > span {
    min-width: 100px;
  }

  .direction-f .e-hero-log > span:last-child {
    min-width: 170px;
  }

  .direction-f .e-hero-art {
    row-gap: 18px;
  }

  .direction-f .f-chart-key {
    padding-right: 5px;
  }

  .direction-f .e-main-phone {
    transform: translateX(7%) rotate(6deg);
  }

  .direction-f .e-hero-art > figcaption {
    margin-right: 10px;
    margin-bottom: 15px;
  }

  .direction-f .e-chart-note {
    gap: 22px;
  }

  .direction-f .e-chart-note em {
    font-size: 21px;
  }
}