/* S-75 (Reed live instruction 2026-10-24): About says only what no other page says, in one reading column (NN/g About Us
   guidance: a short summary up top, real people, plain language, simple layout, one next step). A still film hero (as
   Markets, at the Pathways height), then one paper ground: each section a row (label in the left rail, one heading and its
   content on the right) on hairlines, then one invitation, then the footer. No dark band (as Pathways S-74). */
/* hero height: .fhero--page (commercial.css), as Markets and Pathways */
/* the full 10rem scrim fade (the default .fhero__body) is kept: the still is brighter than the Pathways cranes */
.about-hero .fhero__img { object-position: 45% 60%; }

/* the rows: label rail + reading column, hairline between rows */
.detail-main .about-body { padding-block: var(--s-9) 0; }
.about-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.about-row:first-child { padding-top: 0; border-top: 0; }
.about-rail { margin: 0; font-size: var(--fs-5); font-weight: 500; line-height: 1.4; color: var(--muted); }
.about-main { min-width: 0; }
.about-main h2 { margin: 0 0 var(--s-4); max-width: 24ch; }
.about-text { margin: 0; max-width: 58ch; font-size: var(--fs-4); line-height: 1.6; color: var(--muted); }

/* the founders: a two-row list on hairlines; name left, credential and role right; the portrait slot (pending, hidden)
   takes a small square beside the name once the photos land */
.about-people { margin: var(--s-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.about-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.about-person__photo { width: 88px; height: 88px; aspect-ratio: 1; max-height: none; margin-bottom: var(--s-3); }
.about-person__name { margin: 0; font-size: var(--fs-3); font-weight: 400; }
.about-person__cred, .about-person__role { margin: 0; font-size: var(--fs-5); line-height: 1.5; }
.about-person__cred { color: var(--muted); }
.about-link { margin: var(--s-5) 0 0; }
@media (min-width: 960px) {
  .about-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); }
  .about-person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; }
  .about-person__photo { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .about-person__photo:not([data-pending]) ~ .about-person__name { padding-left: calc(88px + var(--s-5)); }
  .about-person__name { grid-column: 1; grid-row: 1 / -1; }
  .about-person__cred, .about-person__role { grid-column: 2; }
}

/* the one closing invitation, on a hairline (as Pathways); then the footer */
.detail-main .about-body + .about-close { padding-top: var(--s-7); }
.about-close > .wrap::before { content: ""; grid-column: 1 / -1; margin-bottom: var(--s-3); border-top: 1px solid var(--line); }

@media (max-width: 759px) {
  .detail-main .about-body { padding-top: var(--s-8); }
  .about-row { padding-block: var(--s-6); }
  .detail-main .about-body + .about-close { padding-top: var(--s-6); }
}
@media print {
  .about-hero { height: auto; min-height: 0; max-height: none; }
}