/* about.css — compositions used only on About. Everything else comes from
   the shared system (tokens, base, layout, shell, ui).

   A type-led page in three movements (8 Oct 2026): the core statement
   opens it on Chalk (no photo), the team on Ink as compact cards (a small
   head-and-shoulders portrait, name and role), contact on the one
   Vermilion field with one action.

   Motion (inside prefers-reduced-motion: no-preference only, so reduced
   motion shows the composed final state at once, and nothing depends on
   script): the opening arrives in reading order from first paint, the
   headline's second line lifting in last of the two ("off the bench."),
   and the Vermilion line under which the belief stands draws itself
   across the page before the belief arrives; the team cards and the
   contact field arrive in turn as they enter (motion.js, [data-arrive]). */

/* ---- A02 purpose: the opening ------------------------------------------ */
.about-core { padding-block: clamp(3rem, 1.5rem + 6vw, 7.5rem) clamp(3.5rem, 1.5rem + 7vw, 8.5rem); }
.about-core__grid { row-gap: var(--space-6); align-items: end; }
.about-core__grid > p { margin: 0; max-width: var(--measure); font-size: var(--text-lead); line-height: 1.45; text-wrap: pretty; }   /* pretty: no lone last word ("minds.", "workout.") on phones */

/* the headline: two lines, each its own block so it can arrive on its own */
.about-core__title { margin: 0; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.5rem); }   /* phones and tablets: 40 → 88, the PDF's H1 range; from 1024 px the shared H1 size (below) */
.about-core__title > span { display: block; }
.about-core__title .ed { line-height: calc(var(--leading-h1) / var(--editorial-scale)); }

/* the belief: Text 650 at statement size, under a Vermilion line */
.about-core__grid > .about-core__belief {
  max-width: none;
  margin-top: var(--space-3);
  font-size: clamp(1.625rem, 1.05rem + 2.2vw, 2.875rem);   /* 26 → 46 */
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.about-core__belief strong { display: block; max-width: 30ch; }
.about-core__belief::before {
  content: "";
  display: block;
  height: 3px;
  margin-bottom: var(--space-5);
  background: var(--color-brand-energy);
  transform-origin: left center;
}

/* tablet: the two closing statements side by side */
@media (min-width: 768px) {
  .about-core__grid > .about-core__ai { grid-column: 1 / span 4; }
  .about-core__grid > .about-core__exists { grid-column: 5 / span 4; }
  .about-core__grid > :is(.about-core__ai, .about-core__exists) { align-self: start; }
}
/* desktop: the headline with the context line beside it, as a standfirst;
   the belief across the page; the closing statements in two halves. The
   headline at the shared H1 size, as on every other page (12 Oct 2026,
   Alessandro approved after the mobile/desktop size checks: it was 87 px
   at 1440, the largest H1 on the site) */
@media (min-width: 1024px) {
  .about-core__grid { row-gap: var(--space-8); }
  .about-core__grid > .about-core__title { grid-column: 1 / span 6; font-size: var(--text-h1); }
  .about-core__grid > .about-core__context { grid-column: 7 / span 6; padding-bottom: 0.35em; }
  .about-core__grid > .about-core__belief { grid-column: 1 / -1; margin-top: 0; }
  .about-core__grid > .about-core__ai { grid-column: 1 / span 6; margin-top: calc(var(--space-7) - var(--space-8)); }
  .about-core__grid > .about-core__exists { grid-column: 7 / span 6; margin-top: calc(var(--space-7) - var(--space-8)); }
}

@keyframes about-rise { from { opacity: 0; transform: translateY(var(--travel-expressive)); } }
@keyframes about-lift { from { opacity: 0; transform: translateY(0.45em); } }
@keyframes about-draw { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .about-core__in { animation: about-rise 640ms var(--ease-out) both; animation-delay: var(--about-delay, 0ms); }
  .about-core__l2 { animation-name: about-lift; animation-duration: 760ms; --about-delay: 160ms; }
  .about-core__context { --about-delay: 300ms; }
  /* the line draws first, then the belief rises onto it */
  .about-core__belief::before { animation: about-draw 720ms var(--ease-out) 420ms both; }
  .about-core__belief strong { animation: about-rise 640ms var(--ease-out) 640ms both; }
  .about-core__ai { --about-delay: 780ms; }
  .about-core__exists { --about-delay: 880ms; }
}

/* ---- A03 the team: two labelled groups (9 Oct 2026) ----------------------
   phones: each group's label, then a row per person (portrait beside the
   name), the advisory team after a rule; from 600 px the two groups side by
   side with a vertical line between them, and from 768 px two people each
   (portrait above the name); from 1280 px the heading takes the first third
   and the groups the rest. */
.about-team__title { margin: 0 0 var(--space-7); }
.team-groups { display: grid; gap: var(--space-6); }
.team-group__label { margin: 0 0 var(--space-5); }
.team {
  --portrait: 112px;
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team__person {
  display: grid;
  grid-template-columns: var(--portrait) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: center;
}
.team__portrait {
  width: var(--portrait);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-brand-ink);
}
.team__portrait > img { width: 100%; height: 100%; object-fit: cover; }
.team__name { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.625rem); line-height: 1.2; }   /* 20 → 26 */
.team__role { margin: var(--space-2) 0 0; max-width: 24ch; font-size: var(--text-ui); line-height: 1.4; color: var(--on-muted); }   /* the role under the name, quieter than the group label */
/* review build only: no genuine portrait yet (publication blocker, D-24) */
.team__portrait--pending { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--on-line); background: transparent; }
.team__pending { padding: 0 var(--space-4); font-size: var(--text-caption); line-height: 1.25; text-align: center; color: var(--on-muted); }
@media (max-width: 599px) {
  .team-group--advisory { padding-top: var(--space-6); border-top: 1px solid var(--on-line); }
}
/* from 600 px (phones turned sideways, small tablets): the two groups side
   by side with the line between them, so the team is one short band rather
   than two screens of half-empty rows; up to 767 px each group keeps its
   rows (a smaller portrait beside the name) */
@media (min-width: 600px) {
  .team-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .team-group:not(.team-group--advisory) { padding-right: clamp(24px, 3vw, 48px); }
  .team-group--advisory { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--on-line); }
}
@media (min-width: 600px) and (max-width: 767px) {
  .team { --portrait: 96px; }
  .team__person { column-gap: var(--space-4); }
}
@media (min-width: 768px) {
  .team { --portrait: 132px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__person { display: block; }
  .team__name { margin-top: var(--space-5); min-height: 2.4em; text-wrap: balance; }   /* two lines kept for every name, so the roles start on one line across the row */
}
@media (min-width: 1024px) { .team { --portrait: 148px; } }
@media (min-width: 1280px) {
  .about-team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
  .about-team__title { grid-column: 1 / span 4; margin: 0; }
  .team-groups { grid-column: 5 / -1; }
}

/* ---- A04 contact: the peak-energy field, one action -------------------- */
.about-contact h2 { margin-top: 0; }
.about-contact .t-lead { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.about-contact__action { margin: var(--space-6) 0 0; }   /* the action under the invitation it answers */

/* small phones: a smaller portrait so the names fit beside it */
@media (max-width: 413px) {
  .team { --portrait: 96px; }
  .team__person { column-gap: var(--space-4); }
}