.story {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem);
  color: white;
  background: var(--ink);
}

.story-heading {
  display: grid;
  grid-template-columns: .4fr 1.6fr;
  gap: 3rem;
  align-items: end;
  padding-bottom: 3rem;
  border-bottom: 2px solid white;
}

.story-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin: 3rem 0;
  color: rgba(255,255,255,.75);
}

.story-intro p:first-child {
  color: white;
  font-size: 1.35rem;
  font-weight: 600;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.25);
}

.timeline li {
  display: grid;
  grid-template-columns: .35fr 1.65fr;
  gap: 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.timeline > li > span {
  color: var(--aqua-light);
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
}

.timeline h3 {
  font-size: 2rem;
}

.timeline p {
  margin: .35rem 0 0;
  color: rgba(255,255,255,.7);
}

.story-quote {
  margin: 3rem 0 0;
  padding: 2rem;
  color: var(--ink);
  background: var(--aqua-light);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.story-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--body);
  font-size: .75rem;
  font-style: normal;
  letter-spacing: .12em;
}

.present-future {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.present-panel,
.future-panel {
  min-height: 560px;
  padding: clamp(3rem, 7vw, 7rem);
}

.present-panel {
  background: var(--white);
}

.future-panel {
  background: var(--aqua);
}

.present-future p:not(.section-label) {
  max-width: 38rem;
}

.future-panel a {
  display: inline-block;
  margin-top: 2rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid;
  font-weight: 700;
  text-decoration: none;
}

.beliefs {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem);
  background: var(--white);
}

.beliefs-heading {
  display: grid;
  grid-template-columns: .4fr 1.1fr .5fr;
  gap: 3rem;
  align-items: end;
  padding-bottom: 4rem;
  border-bottom: 2px solid var(--ink);
}

.beliefs-heading > p:last-child {
  margin: 0;
}

.belief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
  border-top: 1px solid rgba(41,42,44,.2);
  border-left: 1px solid rgba(41,42,44,.2);
}

.belief-grid article {
  min-height: 220px;
  padding: 1.5rem;
  border-right: 1px solid rgba(41,42,44,.2);
  border-bottom: 1px solid rgba(41,42,44,.2);
}

.belief-grid span,
.commitments span,
.structure-list > article > span {
  color: var(--aqua);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
}

.belief-grid h3,
.commitments h3,
.structure-list h3 {
  margin-top: 1.5rem;
  font-size: 2rem;
}

.belief-link {
  display: inline-block;
  margin-top: 2rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid;
  font-weight: 700;
  text-decoration: none;
}

.belonging {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(3rem, 7vw, 7rem);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem);
  background: var(--aqua-light);
}

.commitments {
  border-top: 2px solid var(--ink);
}

.commitments article {
  display: grid;
  grid-template-columns: 50px 1fr;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(41,42,44,.3);
}

.commitments article > span {
  grid-row: 1 / span 2;
}

.commitments h3 {
  margin: 0;
}

.commitments p {
  margin: .35rem 0 0;
}

.structure {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem);
  background: var(--paper);
}

.structure-heading {
  display: grid;
  grid-template-columns: .4fr 1.6fr;
  gap: 3rem;
  align-items: end;
  padding-bottom: 3rem;
  border-bottom: 2px solid var(--ink);
}

.structure-list article {
  display: grid;
  grid-template-columns: .25fr 1.75fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(41,42,44,.25);
}

.structure-list h3 {
  margin: 0;
}

.structure-list p {
  max-width: 50rem;
  margin: .4rem 0 0;
}

@media (max-width: 820px) {
  .story-heading,
  .beliefs-heading,
  .belonging,
  .structure-heading {
    grid-template-columns: 1fr;
  }

  .present-future {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .story-intro,
  .belief-grid {
    grid-template-columns: 1fr;
  }

  .timeline li,
  .structure-list article {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .present-panel,
  .future-panel {
    min-height: 0;
  }
}