/* The About page: the night floor as a band with one window lit, then his story on the left and the facts and
   the places he has worked on the right. */

.ab-hero { padding-top: 80px; }
.ab-band { position: relative; height: clamp(180px, 28vw, 380px); overflow: hidden; background: var(--night); border-block: 1px solid var(--line); }
.ab-head { padding-top: 64px; }
.ab-head h1 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; }
.ab-head .lead { margin-top: 20px; font-size: 21px; max-width: 50ch; }

.ab-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px 88px; padding-top: 88px; padding-bottom: 24px; }
.ab-part + .ab-part { margin-top: 56px; }
.ab-part h2 { margin-bottom: 16px; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--warm); }
.ab-story .prose p { font-size: 19px; line-height: 1.65; max-width: 62ch; }

.ab-side { align-self: start; position: sticky; top: 32px; }
.facts { margin: 0; padding: 4px 0 8px; border-top: 1px solid var(--line-2); }
.facts div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 15px; color: var(--ink-2); }
.facts dd { margin: 0; font-size: 16px; }
.ab-side h2 { margin: 48px 0 20px; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.career li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding-bottom: 16px; }
.yr { grid-row: span 2; font-weight: 600; color: var(--warm); font-variant-numeric: tabular-nums; }
.what { font-size: 16px; line-height: 1.4; }
.no { font-size: 15px; line-height: 1.4; color: var(--ink-2); }

@media (max-width: 900px) {
  .ab-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 64px; }
  .ab-side { position: static; }
}
@media (max-width: 600px) {
  .ab-hero { padding-top: 64px; }
  .ab-head { padding-top: 40px; }
  .ab-head .lead { font-size: 19px; }
  .ab-story .prose p { font-size: 18px; }
}
