/* The About page (about.leaf). Colours, type and widths are chrome.css's tokens. The text is a single column
   of reading width; when a photo is set it sits beside the text on wide screens and above it on narrow ones. */

.about { padding: 56px 0 96px; }

.about__layout { display: grid; gap: 32px; }

.about__text { max-width: 40em; }

.about__text h1 {
  font: 800 clamp(32px, 4.4vw, 44px)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.about__text p {
  font: 400 19px/1.6 var(--font-text);
  margin-bottom: 20px;
}

.about__text p:first-of-type { font-size: 21px; }
.about__text p:last-child { margin-bottom: 0; }

.about__photo img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--closeup-edge);
  background: var(--surface);
}

@media (min-width: 860px) {
  .about__layout--photo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }

  /* The heading stays level with the top of the photo. */
  .about__photo { position: sticky; top: 32px; }
}

@media (max-width: 719px) {
  .about { padding: 40px 0 64px; }
  .about__text p { font-size: 18px; }
  .about__text p:first-of-type { font-size: 19px; }
}

/* No photo: the column is centred, like the other reading pages, instead of leaving the right half bare. */
.about__layout:not(.about__layout--photo) .about__text { margin: 0 auto; }

/* L1: the lead photo large, the other two side by side under it, all in the left column. */
.about__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.about__photo--lead { grid-column: 1 / -1; }
.about__photos .about__photo { position: static; }
.about__photo:not(.about__photo--lead) img { border-radius: 14px; }
@media (min-width: 860px) { .about__photos { position: sticky; top: 32px; } }