/* ==========================================================================
   about-page.css — company mission statement + advisor profiles
   Markup:
     <p class="about-mission">…</p>
     <div class="advisors">
       <article class="advisor">
         <div class="advisor__media"><img class="advisor__photo" …></div>
         <div class="advisor__body">
           <h3 class="advisor__name">Dan Morse</h3>
           <p class="advisor__role">Tech executive · US Army officer · athlete</p>
           <p>…</p>
         </div>
       </article>
       …
     </div>
   Advisors alternate photo side on desktop for editorial rhythm; stack on
   mobile with the portrait centred above the bio.
   ========================================================================== */

/* Lead mission paragraph under the section head */
.about-mission {
  max-width: 64ch;
  margin: 0 0 var(--space-44);
  font-size: var(--fs-subhead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.advisors {
  display: grid;
  gap: var(--space-56);
}

.advisor {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-44);
  align-items: center;
}
/* Mirror every second advisor: bio left, portrait right */
.advisor:nth-child(even) { grid-template-columns: minmax(0, 1fr) 240px; }
.advisor:nth-child(even) .advisor__media { order: 2; }

.advisor__media { min-width: 0; }
.advisor__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--pill);
  background: var(--bg-3);
  box-shadow: var(--shadow-md);
}

.advisor__body { min-width: 0; }
.advisor__name {
  margin: 0;
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}
.advisor__role {
  margin: var(--space-6) 0 var(--space-16);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--brand-ink);
}
.advisor__body p:not(.advisor__role) {
  margin: 0 0 var(--space-12);
  color: var(--ink-3);
  line-height: var(--lh-prose);
}
.advisor__body p:last-child { margin-bottom: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .advisor,
  .advisor:nth-child(even) { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-32); }
  .advisor:nth-child(even) .advisor__media { order: 0; }
}
@media (max-width: 720px) {
  .advisors { gap: var(--space-40); }
  .advisor,
  .advisor:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    justify-items: center;
    text-align: center;
  }
  .advisor__media { width: 168px; }
  .advisor__photo { aspect-ratio: 1 / 1; border-radius: var(--pill); }
  .advisor__body { text-align: left; }
}