/* about: a reading page. Prose on the ground, set apart by space and scale; no boxes, no rules. */

.about { padding-bottom: var(--sp-10); }
.about-lead { max-width: 34ch; }

.about-part { margin-top: var(--sp-10); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(32px, 6vw, 112px); align-items: start; }
.about-h { font-size: var(--fs-3); font-weight: 470; font-stretch: var(--wide); line-height: 1.15; letter-spacing: -.008em; max-width: 14ch; position: sticky; top: calc(var(--bar-h) + var(--sp-5)); }
.about-part .prose { max-width: var(--measure); }
.about-part .prose p { color: var(--ink-soft); line-height: var(--lh-text); }
.about-part [data-example] { color: var(--ink); font-size: var(--fs-lead); line-height: 1.35; font-stretch: 106%; max-width: 34ch; margin-block: var(--sp-6); }

/* sources: the subject in the wide face, the credit in plain prose beside it */
.about-sources { grid-template-columns: minmax(0, 1fr); }
.about-sources .about-h { position: static; max-width: none; font-size: var(--fs-2); line-height: 1.08; letter-spacing: -.012em; }
.about-intro { margin-top: var(--sp-5); max-width: var(--measure); color: var(--ink-soft); }
.credits { margin-top: var(--sp-8); display: grid; gap: var(--sp-8); }
.credit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(32px, 6vw, 112px); align-items: baseline; }
.credit dt { font-size: var(--fs-lead); font-weight: 470; font-stretch: 112%; line-height: 1.25; }
.credit dd { max-width: var(--measure); color: var(--ink-soft); }
.credit dd p + p { margin-top: var(--sp-4); }
.credit cite { font-style: normal; color: var(--ink); }
.about .text-link { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .about-part, .credit { grid-template-columns: 1fr; }
  .about-h { position: static; max-width: none; margin-bottom: var(--sp-5); }
  .about-part { margin-top: var(--sp-9); }
  .credits { gap: var(--sp-7); }
  .credit dt { margin-bottom: var(--sp-3); }
}

/* Red night mode: the live accent comes from the sky and can carry green; here it follows the red ink. */
html[data-mode='red'] .about { --accent: var(--ink); }