/* About page: a personal, editorial story. Scoped to .about-page; shared structures stay in pages.css. */
.about-page .page-hero .split{align-items:center}
.about-page .page-hero h1{max-width:15ch}
.about-page .page-hero .lead{margin-top:22px;max-width:48ch;font-size:19px;line-height:1.6}

.story{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.story-block{display:grid;grid-template-columns:220px minmax(0,680px);gap:clamp(32px,4vw,64px);justify-content:center}
.story-block+.story-block{margin-top:clamp(56px,6vw,80px)}
.story-block>.note{grid-column:1;padding-top:10px}
.story-block>.text{grid-column:2}
.story h2{margin:0 0 20px;font-size:clamp(28px,2.6vw,36px);line-height:1.15}
.story .text>p{font-size:18px;line-height:1.75}
.story .text>p+p{margin-top:20px}

.story .note{font-size:14px;line-height:1.55;color:var(--text-muted)}
.story .note b{display:block;margin-bottom:4px;font:600 12px/1.4 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--action)}
.story .note span{display:block;padding-left:14px;border-left:2px solid var(--border)}
.story .note span+span{margin-top:14px}

.story .hats{margin:26px 0;padding:18px 0;border-block:1px solid var(--border);font:500 clamp(18px,1.8vw,22px)/1.6 var(--font-heading);color:var(--brand)}
.story .hats span{white-space:nowrap}
.story .pull{margin:30px 0 0;padding-left:22px;border-left:3px solid var(--signal);font:500 clamp(22px,2.2vw,28px)/1.35 var(--font-heading);color:var(--text)}

.story-photo{max-width:964px;margin:clamp(48px,6vw,72px) auto}
.story-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.story-photo figcaption{margin-top:12px;font-size:14px;color:var(--text-muted)}

.story .signoff{margin-top:34px}
.story .signature{font:500 32px/1 var(--font-heading);color:var(--brand)}
.story .signoff .actions{margin-top:26px}

@media(max-width:1000px){
  .story-block{grid-template-columns:minmax(0,680px)}
  .story-block>.note,.story-block>.text{grid-column:1}
  .story-block>.note{order:2;padding-top:0;margin-top:26px}
}
@media(max-width:760px){
  .story .text>p{font-size:17px}
  .about-page .page-hero .lead{font-size:17px}
}