/**
 * about.css · the only styles /about/ adds on top of the shared system.
 *
 * Loaded by about/index.html alone, after tokens.css, base.css and app.css.
 * The page reuses app.css wholesale for chrome and shells (.shell, .section,
 * .section-head, .eyebrow, .lede, .band-deep, .claim, .cta, .btn), so what is
 * left here is genuinely new anatomy: the page head's nav clearance, the deep
 * band's mission stack and pull quote, the team card, and the join band's
 * button row.
 *
 * House rules (design.md §2, §4, §6): every value is a token or composed from
 * tokens with color-mix. No raw colours, no shadows, hairlines carry structure,
 * only transform and opacity animate.
 */

/* ====================================================================== */
/*  PAGE HEAD                                                             */
/* ====================================================================== */

/* No hero here, so the first section owes the fixed header its own clearance
   (the homepage buys this inside .hero's padding). */
.about-head {
  padding-block-start: calc(var(--nav-h) + var(--sp-6));
  padding-block-end: var(--sp-6);
}

.about-head__inner {
  display: grid;
  gap: var(--sp-3);
}

/* A sub-page h1 is not a hero h1: the display scale belongs to the homepage
   alone, so this one takes the section-title step down (design.md §3.1). */
.about-head__title {
  font-size: var(--text-h2);
  max-width: 18ch;
  margin: 0;
}

.about-head__lede { max-width: 58ch; }

/* ====================================================================== */
/*  MISSION BAND                                                          */
/* ====================================================================== */

/* .band-deep hands down --band-ink / --band-ink-soft / --band-line for both
   themes; every ink below spends one of those rather than a token directly,
   which is what keeps the band correct when it inverts in dark. */
.about-mission .eyebrow { color: var(--band-ink-soft); }

.about-mission__statement {
  font-size: var(--text-h3);
  max-width: 30ch;
  color: var(--band-ink);
  margin-block-end: var(--sp-3);
}

.about-mission__support {
  color: var(--band-ink-soft);
  max-width: 40ch;
}

/* The quote is the band's second voice, so a hairline separates it rather than
   a gap: structure by rule, the field-notebook move (design.md §4). */
.pullquote {
  margin: var(--sp-5) 0 0;
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--band-line);
  display: grid;
  gap: var(--sp-3);
}

.pullquote__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--band-ink);
  max-width: 20ch;
}

.pullquote__by { color: var(--band-ink-soft); }

/* ====================================================================== */
/*  WHAT GUIDES US                                                        */
/* ====================================================================== */

/* The claims sit off the left edge of the 12-column field rather than in a
   card row: hairlines, not boxes (design.md §6). */
.about-claims {
  margin-block-start: var(--sp-6);
  max-width: 62ch;
}

/* ====================================================================== */
/*  FOUNDING TEAM                                                         */
/* ====================================================================== */

.about-team__head { max-width: 46rem; }

/*
 * This heading is a full sentence (client revision 2026-08-15), not the three
 * or four words a section title usually carries. It keeps the h2 slot and the
 * --text-h2 token, but caps that fluid token by a second constraint the way
 * .hero__title already caps --text-display: at 1440 the uncapped token set six
 * lines of 56px display type, which out-shouted the page h1 and read as an
 * accident rather than a decision. Capped, it lands at four lines and stays
 * clearly subordinate to the h1. Below the cap (phones) this is a no-op, so the
 * mobile rendering is the token's own.
 */
.about-team__head h2 { font-size: min(var(--text-h2), 2.25rem); }

.about-team__head .lede { margin-block-start: var(--sp-3); }

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-block-start: var(--sp-6);
  align-items: stretch;
}

/*
 * Equal-height, top-aligned cards (client rule 2026-08-15, the same rule the
 * persona row follows). Two things make the rows genuinely level:
 *   - `align-items: stretch` on the row gives all three cards one height;
 *   - `align-content: start` inside the card pins its rows to the top, since
 *     the default stretch would spread a shorter card's surplus BETWEEN its
 *     rows and knock the names and bios out of line.
 */
.member {
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.member:hover { border-color: var(--accent); transform: translateY(-2px); }

/* A fixed square is what makes the photo row identical on every card whatever
   the source crop; --r-2 matches the card it sits inside. */
.member__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-2);
  background-color: var(--surface-2);
}

.member__name { margin: 0; }

.member__role { color: var(--ink-2); }

.member__bio { color: var(--ink-1); }

/* At three-across the role label reserves two mono lines on every card, so a
   longer title can wrap without dropping that card's bio below its neighbours'
   (mono line-height is 1.5, hence 3em). */
@media (min-width: 901px) {
  .member__role { min-height: 3em; }
}

@media (max-width: 900px) {
  .team { grid-template-columns: 1fr; }
  .member__photo { max-width: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  .member { transition: border-color var(--dur-fast) linear; }
  .member:hover { transform: none; }
}

/* ====================================================================== */
/*  JOIN BAND                                                             */
/* ====================================================================== */

/* .cta already centres the stack; the roles line and the button row are the
   only additions. The roles strip is this section's single mono motif. */
/* Selector matches `.cta__inner p` on specificity for a reason: that rule caps
   paragraphs at the 48ch body measure and paints them --ink-1, which is the
   wrong ruler and the wrong ink for a mono specimen strip. Left alone it broke
   this line in two at desktop. The strip sets its own measure and wraps only
   when the phone makes it. */
.cta__inner .about-join__roles {
  max-width: none;
  color: var(--ink-2);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}

.about-join__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

/* Team photo in the join band (client artwork 2026-08-16). */
.about-join__photo {
  margin: var(--sp-4) auto 0;
  max-width: 44rem;
}

.about-join__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}