/* About page. Loaded only on /about/. */

/* story: prose left, dated record right */
.about-story .prose { max-width: 62ch; }
.about-story .prose p + p { margin-top: 1em; }
.about-dates-h { font-size: var(--fs-h4); margin-bottom: 20px; }
.about-story .tl-step { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0; }
.about-story .tl-step:first-child { padding-top: 0; }
.about-story .tl-step:last-child { padding-bottom: 0; }
.about-story .tl-step::before, .about-story .tl-n { display: none; }
.about-story .tl-body h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--pine); }
.about-story .tl-body p { margin-top: 4px; color: var(--ink); }
@media (min-width: 1024px) { .about-story .split-b { padding-top: 8px; } }

/* team: Shane's photo, then the three people as ruled rows */
.team-grid { display: grid; gap: 32px; }
.team-photo { max-width: 320px; }
.team-list { display: grid; border-bottom: 1px solid var(--hair); }
.team-member { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--hair); }
.team-who h3 { font-size: var(--fs-h4); }
.team-role { color: var(--muted); font-weight: 500; margin-top: 2px; }
.team-line { max-width: 60ch; }
@media (min-width: 768px) {
  .team-member { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 32px; padding: 24px 0; }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: 320px minmax(0, 1fr); column-gap: 64px; align-items: start; }
}

/* how we work: 3 x 2 */
.how-list { row-gap: 40px; }
.how-list li { padding-top: 20px; border-top: 1px solid var(--hair); }
.how-list h3 { font-size: var(--fs-h4); }
.how-list p { margin-top: 8px; color: var(--muted); }
@media (min-width: 1024px) { .how-list { column-gap: 48px; } }

/* license */
.about-license .section-head p { color: var(--paper-78); }
.about-license .license-verify { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { section.reviews .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }
.team-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }