:root {
  --history-blue: #173f76;
  --history-blue-bright: #2f69b1;
  --history-paper: #f4f0e8;
  --history-rule: #173f7638;
  --history-copy: #303631;
}

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

.history-header {
  color: #fff;
  background: var(--history-blue);
}

.history-intro {
  position: relative;
  min-height: 74svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(190px, 22vh, 290px) 6vw clamp(80px, 10vh, 130px);
  overflow: hidden;
  color: #fff;
  background: var(--history-blue);
}

.history-intro-figure {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.history-intro-figure[hidden] {
  display: none;
}

.history-intro-media-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #172b45;
}

.history-intro-image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.history-intro-figure figcaption {
  position: absolute;
  z-index: 3;
  right: 6vw;
  bottom: 24px;
  max-width: min(420px, 44vw);
  margin: 0;
  color: #fff;
  font-size: .66rem;
  line-height: 1.5;
  text-align: right;
  text-shadow: 0 1px 12px #000c;
}

.history-intro-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, #06172be8 0%, #0b2038b8 42%, #0b20382b 76%, transparent 100%),
    linear-gradient(0deg, #06172b85 0%, transparent 52%);
  pointer-events: none;
}

.history-intro.is-no-media .history-intro-shade {
  display: none;
}

.history-intro-copy {
  position: relative;
  z-index: 2;
  width: min(900px, 82vw);
}

.history-intro .public-kicker {
  margin: 0 0 28px;
  color: #fff;
  text-shadow: 0 1px 16px #000c;
}

.history-intro h1 {
  max-width: 900px;
  color: #fff;
  font-size: clamp(4.7rem, 8vw, 9rem);
  overflow-wrap: break-word;
  word-break: normal;
  text-shadow: 0 2px 28px #0009;
}

.history-intro-body-wrap {
  padding: clamp(80px, 9vw, 140px) 6vw clamp(96px, 11vw, 160px);
  border-bottom: 1px solid var(--history-rule);
  background: var(--history-paper);
}

.history-intro-body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--history-copy);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.82;
  white-space: pre-line;
}

.history-entry figcaption {
  max-width: 620px;
  margin-top: 12px;
  color: #515a55;
  font-size: .68rem;
  line-height: 1.55;
}

.history-timeline {
  padding: clamp(96px, 11vw, 170px) 6vw clamp(120px, 14vw, 210px);
  background: #fff;
}

.history-timeline-heading {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
  gap: 5vw;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto clamp(100px, 11vw, 165px);
}

.history-timeline-heading p {
  margin: 0 0 9px;
  color: var(--history-blue);
}

.history-timeline-heading h2 {
  max-width: 980px;
  color: var(--history-blue);
  font-size: clamp(4.4rem, 7.6vw, 8.4rem);
}

.history-timeline-list {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.history-timeline-list::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  border-left: 1px solid var(--history-rule);
  transform: translateX(-.5px);
}

.history-entry {
  position: relative;
  margin: 0;
  padding: 0 0 clamp(105px, 12vw, 180px);
}

.history-entry:last-child {
  padding-bottom: 0;
}

.history-entry::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--history-blue-bright);
  box-shadow: 0 0 0 1px var(--history-blue-bright);
  transform: translate(-50%, -50%);
}

.history-entry article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  grid-template-areas:
    "year axis heading"
    "body axis media";
  align-items: start;
}

.history-entry:nth-child(even) article {
  grid-template-areas:
    "heading axis year"
    "media axis body";
}

.history-year {
  grid-area: year;
  display: block;
  max-width: 100%;
  color: var(--history-blue);
  font: 400 clamp(4.5rem, 7vw, 8.2rem)/.82 "Anton", Impact, sans-serif;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.history-entry:nth-child(odd) .history-year,
.history-entry:nth-child(even) h3,
.history-entry:nth-child(even) figure {
  text-align: right;
  justify-self: end;
}

.history-entry h3 {
  grid-area: heading;
  max-width: 540px;
  margin: 4px 0 0;
  color: var(--history-blue);
  font: 400 clamp(2.7rem, 4.4vw, 5.2rem)/.94 "Anton", Impact, sans-serif;
  letter-spacing: -.018em;
  text-transform: uppercase;
}

.history-entry-body {
  grid-area: body;
  max-width: 520px;
  margin: 34px 0 0;
  color: var(--history-copy);
  font-size: 1rem;
  line-height: 1.75;
}

.history-entry:nth-child(even) .history-entry-body {
  justify-self: end;
}

.history-entry figure {
  grid-area: media;
  width: 100%;
  max-width: 620px;
  margin: 34px 0 0;
}

.history-entry figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 68svh;
  object-fit: contain;
  object-position: center;
  background: #edf0ed;
}

.history-entry.is-featured {
  margin: 0 -3vw clamp(105px, 12vw, 180px);
  padding: clamp(58px, 7vw, 100px) 3vw;
  color: #fff;
  background: var(--history-blue);
}

.history-entry.is-featured::before {
  top: calc(clamp(58px, 7vw, 100px) + 16px);
  border-color: var(--history-blue);
  background: #fff;
  box-shadow: 0 0 0 1px #fff;
}

.history-entry.is-featured :is(.history-year, h3) {
  color: #fff;
}

.history-entry.is-featured .history-entry-body,
.history-entry.is-featured figcaption {
  color: #ffffffc9;
}

@media (max-width: 900px) {
  .history-intro {
    min-height: 72svh;
    padding: 154px 22px 76px;
  }

  .history-intro h1 {
    max-width: 740px;
    font-size: clamp(4rem, 11vw, 6rem);
  }

  .history-intro-shade {
    background:
      linear-gradient(90deg, #06172bd9 0%, #0b20388c 68%, #0b203829 100%),
      linear-gradient(0deg, #06172b9c 0%, transparent 56%);
  }

  .history-intro-figure figcaption {
    right: 22px;
    bottom: 18px;
    max-width: 55vw;
  }

  .history-intro-body-wrap {
    padding: 76px 22px 104px;
  }

  .history-timeline {
    padding: 88px 22px 120px;
  }

  .history-timeline-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 92px;
  }

  .history-timeline-heading h2 {
    font-size: clamp(3.7rem, 12vw, 6rem);
  }

  .history-entry article {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  }

  .history-entry.is-featured {
    margin-right: 0;
    margin-left: 0;
    padding-right: 22px;
    padding-left: 22px;
  }
}

@media (max-width: 640px) {
  .history-intro {
    min-height: 68svh;
    padding-top: 132px;
    padding-bottom: 62px;
  }

  .history-intro-copy {
    width: 100%;
  }

  .history-intro h1 {
    font-size: clamp(2.3rem, 10.5vw, 4rem);
  }

  .history-intro-shade {
    background:
      linear-gradient(90deg, #06172be6 0%, #0b20389e 82%, #0b203852 100%),
      linear-gradient(0deg, #06172bb8 0%, transparent 65%);
  }

  .history-intro-figure figcaption {
    right: 18px;
    bottom: 14px;
    max-width: calc(100% - 36px);
  }

  .history-intro-body-wrap {
    padding: 66px 22px 88px;
  }

  .history-timeline-list {
    padding-left: 24px;
  }

  .history-timeline-list::before {
    left: 4px;
  }

  .history-entry,
  .history-entry.is-featured {
    margin: 0;
    padding: 0 0 88px;
    background: transparent;
  }

  .history-entry:last-child {
    padding-bottom: 0;
  }

  .history-entry::before,
  .history-entry.is-featured::before {
    top: 7px;
    left: -20px;
    width: 11px;
    height: 11px;
    border-color: #fff;
    background: var(--history-blue-bright);
    box-shadow: 0 0 0 1px var(--history-blue-bright);
  }

  .history-entry article,
  .history-entry:nth-child(even) article {
    display: flex;
    flex-direction: column;
  }

  .history-year,
  .history-entry.is-featured .history-year {
    order: 1;
    color: var(--history-blue);
    font-size: clamp(3.8rem, 17vw, 5.4rem);
    text-align: left;
    justify-self: auto;
  }

  .history-entry h3,
  .history-entry:nth-child(even) h3,
  .history-entry.is-featured h3 {
    order: 2;
    margin-top: 17px;
    color: var(--history-blue);
    font-size: clamp(2.45rem, 11.5vw, 3.8rem);
    text-align: left;
    justify-self: auto;
  }

  .history-entry figure,
  .history-entry:nth-child(even) figure {
    order: 3;
    margin-top: 30px;
    text-align: left;
    justify-self: auto;
  }

  .history-entry-body,
  .history-entry:nth-child(even) .history-entry-body,
  .history-entry.is-featured .history-entry-body {
    order: 4;
    margin-top: 25px;
    color: var(--history-copy);
    justify-self: auto;
  }

  .history-entry.is-featured figcaption {
    color: #515a55;
  }
}

@media (max-width: 360px) {
  .history-intro,
  .history-intro-body-wrap,
  .history-timeline {
    padding-left: 18px;
    padding-right: 18px;
  }

  .history-intro {
    padding-top: 126px;
  }

  .history-intro h1 {
    font-size: clamp(2.15rem, 11.4vw, 2.55rem);
  }

  .history-timeline-heading h2 {
    font-size: 3.35rem;
  }

  .history-timeline-list {
    padding-left: 20px;
  }

  .history-entry::before,
  .history-entry.is-featured::before {
    left: -16px;
  }
}