.history-page {
  background: var(--paper);
}

.history-page .nav-item--current > a::after,
.history-page .mega-links .is-current::after {
  transform: scaleX(1);
}

.history-page .mega-links .is-current {
  border-color: transparent;
}

.history-visual > img {
  object-position: center 15%;
  filter: brightness(1.10) contrast(.98) saturate(.96);
}

.history-visual__shade {
  background:
    linear-gradient(90deg, rgba(5, 20, 31, .62) 0%, rgba(5, 20, 31, .16) 35%, rgba(5, 20, 31, .08) 58%, rgba(5, 20, 31, .54) 100%),
    linear-gradient(180deg, rgba(5, 20, 31, .02) 0%, rgba(5, 20, 31, .06) 52%, rgba(5, 20, 31, .30) 100%);
}

.history-timeline {
  background: #fff;
}

.history-era {
  padding: 112px 0 116px;
  background: #fff;
}

.history-era--muted {
  background: #f4f6f7;
}

.history-era--final {
  padding-bottom: 108px;
}

.history-era__inner {
  display: grid;
  grid-template-columns: minmax(300px, 35%) minmax(0, 65%);
  align-items: start;
}

.history-era__heading {
  padding: 0 74px 0 0;
}

.history-era__period {
  margin: 0;
  color: #102a46;
  font-size: clamp(52px, 4.2vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
}

.history-era__heading > span {
  display: block;
  margin-top: 28px;
  color: #a78348;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .18em;
}

.history-era__heading h2 {
  max-width: 290px;
  margin: 18px 0 0;
  color: #526771;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.history-era__entries {
  border-top: 1px solid rgba(16, 42, 70, .28);
}

.history-entry {
  position: relative;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  min-height: 82px;
  padding: 25px 6px 24px 24px;
  border-bottom: 1px solid rgba(16, 42, 70, .13);
  align-items: start;
  gap: 26px;
}

.history-entry::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aeb9be;
}

.history-entry--key::before {
  width: 8px;
  height: 8px;
  top: 30px;
  background: #a78348;
}

.history-entry time {
  color: #102a46;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.035em;
}

.history-entry > p,
.history-entry > div > p {
  margin: 0;
  color: #40545e;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.012em;
  word-break: keep-all;
}

.history-entry > div {
  display: grid;
  gap: 8px;
}

@media (max-width: 1100px) {
  .history-era__inner {
    grid-template-columns: minmax(260px, 34%) minmax(0, 66%);
  }

  .history-era__heading {
    padding-right: 46px;
  }

  .history-entry {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 800px) {
  .history-visual > img {
    object-position: 51% center;
  }

  .history-era {
    padding: 76px 0 82px;
  }

  .history-era__inner {
    display: block;
  }

  .history-era__heading {
    padding: 0;
  }

  .history-era__period {
    font-size: 46px;
  }

  .history-era__heading h2 {
    max-width: none;
  }

  .history-era__entries {
    margin-top: 42px;
  }

  .history-entry {
    grid-template-columns: 94px minmax(0, 1fr);
    padding: 21px 0 21px 18px;
    gap: 14px;
  }

  .history-entry time {
    font-size: 18px;
  }

  .history-entry > p,
  .history-entry > div > p {
    font-size: 15px;
  }
}