.page { --paper: #fffaf0; --teal: #125646; --rule: #d9d8c7; }
.about-content { max-width: 800px; margin-inline: auto; padding: 42px 0 48px; }
.about-heading { padding-bottom: 24px; }
.about-heading h1 { font-size: clamp(36px, 4vw, 50px); }
.about-heading .about-lead { font: 26px/1.45 var(--serif); color: var(--teal); max-width: 45ch; }
.about-content p { font-size: 16px; line-height: 1.8; }
.about-content section { border-top: 1px solid var(--rule); padding: 26px 0; }
.about-content h2 { font-size: 28px; line-height: 1.3; margin: 0 0 18px; }
.reading-depths { margin: 0 0 22px; }
.reading-depths div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 12px 0; font-size: 15px; line-height: 1.7; }
.reading-depths dt { font-weight: 600; color: var(--teal); }
.reading-depths dd { margin: 0; }
.about-content .about-next { margin: 0; font-size: 14px; font-weight: 600; }
.about-next a { text-decoration: none; }
.about-next span { display: inline-block; margin-left: 18px; transition: transform .15s ease; }
.about-next a:hover span { transform: translateX(6px); }
@media (max-width: 600px) {
  .about-content { padding-top: 30px; }
  .reading-depths div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .about-heading .about-lead { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-next span { transition: none; }
  .about-next a:hover span { transform: none; }
}