/* About page only */
.about-page {
  --background: #000;
  --foreground: #fff;
  --muted: #9a9a9a;
  /* The same inset and gap as the practice page, so the two read alike. */
  --inset: 40px;
  --gap: clamp(24px, 3.5vh, 40px);

  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color-scheme: dark;
}

.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
}

.about-layout {
  padding: clamp(56px, 12vh, 140px) var(--inset) 64px;
}

/* The same voice as PRACTICE */
.about-title {
  margin: 0 0 var(--gap);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* Interface text is uppercase, like the leads on the practice page. */
.about-lead {
  max-width: 34ch;
  margin: 0 0 var(--gap);
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Each section is one ruled row across the page: its label on the left in
   the interface grey, its text beside it in white. All the rows share one
   label column, exactly as wide as the longest label, so the text starts
   one gap after it instead of halfway across the page. */
.about-sections {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 48px;
}

.about-section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid #262626;
}

.about-section:last-of-type {
  border-bottom: 1px solid #262626;
}

.about-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The site's interface voice, as in the chapter count on the practice page:
   uppercase, bold and spaced, but white, since this is the content. */
.about-text p {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* No line left holding a single word, such as "2.0." */
  text-wrap: pretty;
}

.about-text p + p {
  margin-top: 12px;
}

.about-section a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.about-section a:hover {
  color: var(--muted);
}

.about-page a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Narrow: each heading sits above its text again. */
@media (max-width: 900px) {
  .about-page {
    --inset: 24px;
  }

  .about-layout {
    padding-top: 88px;
  }

  .about-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-section {
    row-gap: 10px;
  }
}