/* About page composition. */
.about-layout {
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:3.5rem;
  align-items:start
}

.about-portrait {
  position:sticky;
  top:110px
}

.about-portrait img {
  width:100%;
  border-radius:var(--border-radius-lg)
}

.about-portrait figcaption {
  margin-top:.75rem;
  font-size:.8rem;
  color:var(--color-text-light)
}

.about-story {
  max-width:var(--max-width-narrow)
}

.about-story blockquote {
  margin:1.75rem 0;
  padding:1.25rem 1.5rem;
  border-left:4px solid var(--color-accent);
  background:var(--color-bg-alt);
  border-radius:0 var(--border-radius) var(--border-radius) 0
}

.about-story blockquote p {
  font-size:1.1rem;
  line-height:1.6;
  color:var(--color-text-heading)
}

.about-story blockquote cite {
  display:block;
  margin-top:.75rem;
  font-style:normal;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-light)
}

.timeline {
  max-width:var(--max-width-narrow);
  margin-inline:auto;
  display:grid;
  gap:1.5rem
}

.timeline__item {
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:1.5rem;
  align-items:start;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--color-border)
}

.timeline__item:last-child {
  border-bottom:0
}

.timeline__year {
  font-family:var(--font-heading);
  font-size:2.4rem;
  line-height:1;
  color:var(--color-primary)
}

.timeline__item h3 {
  margin-bottom:.4rem
}

.about-facts {
  max-width:var(--max-width-narrow);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 2rem
}

.about-facts dt {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-text-light)
}

.about-facts dd a {
  text-decoration:underline;
  text-underline-offset:3px
}

@media(max-width:900px) {
  .about-layout {
    grid-template-columns:1fr
  }

  .about-portrait {
    position:static;
    max-width:420px
  }
}

@media(max-width:600px) {
  .timeline__item {
    grid-template-columns:1fr;
    gap:.5rem
  }

  .about-facts {
    grid-template-columns:1fr
  }
}