/* ==========================================================================
   ABOUT — lede, three career beats (label · years, text, one photograph),
   then the publications rows.
   ========================================================================== */

.about { background: var(--bg-warm); padding: var(--space-section) 0; border-top: 1px solid var(--rule-hairline); }
.about-intro { max-width: 56rem; margin-bottom: var(--space-block); }
.about-lede { max-width: var(--measure); font-size: var(--type-lede); line-height: var(--leading-body); color: var(--ink-primary); }
.about-lede + .about-lede { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--ink-secondary); }

.about-beats { display: grid; gap: var(--space-block); }
.about-beat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--rule-strong); }
@media (min-width: 900px) { .about-beat-row { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 20rem); column-gap: var(--space-4xl); align-items: start; } }
.about-beat { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-green-accent); padding-top: 4px; }
.about-beat-text h3 { margin-bottom: var(--space-sm); }
.about-beat-text p { max-width: var(--measure); font-size: var(--text-base); color: var(--ink-secondary); }
.about-beat-text p + p { margin-top: var(--space-sm); }
.about-media { border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-subtle); box-shadow: var(--shadow-media); }
.about-media img { width: 100%; height: auto; }
.about-media figcaption { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); color: var(--ink-muted); background: var(--bg-white); border-top: 1px solid var(--rule-hairline); }
@media (max-width: 899.98px) { .about-media { max-width: 28rem; } }
.about-close { max-width: var(--measure); margin-top: var(--space-block); padding-top: var(--space-xl); border-top: 1px solid var(--rule-strong); font-family: var(--font-serif); font-size: var(--type-subsection); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink-primary); }