/* About us page only (the owner-approved redesign, 2026-10-22: docs/axiom/pages/proposals/about.md).
   Every font-size here is a --t-* token from site.css; the shared components' own sizes are the brand pass's, not this file's. */

/* Running text holds to the brand's 65 characters a line where the shared grid would let it run longer (full-width
   section heads at 768-1023px, the six-column Why paragraph, the 02 lead and the details rows at 1920px): 48ch of Inter
   is 59-64 characters (the shared 65ch measure on .split__text p reaches 66). */
#who .shead > p, #what .lead, #team .shead > p, #work .details p { max-width: 48ch; }

/* 01 Who we are: the bento's sentences are running text, so they read at Body (16px), not Body Small: the approved
   proposal's step 8 ("no running text under 16px"). Kept on purpose after the brand pass, whose shared .stat__note
   stays Body Small (14px) on the other pages. */
#who .stat__note { font-size: var(--t-body); }

/* 02 What we do: the photo fills the text column's height instead of floating in the dark panel (the img already has
   height 100% and object-fit cover). Between 1024 and 1279px the text takes six columns, so the lead stays short and
   the two buttons sit on one row. */
@media (min-width: 1024px) {
  #what .split__media { align-self: stretch; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #what .split__text { grid-column: 1 / 7; }
  #what .split__media { grid-column: 7 / 13; }
}

/* 05 Leadership & team: eight people today. Wide desktop (>= 1280px): four across, two even rows. 1024-1279px: three
   across on six tracks, so a short last row (two cards today, or one) sits in the middle, not stranded on the left.
   Tablet: two across (the shared rule, 16px gap), a lone last card centred when the count is odd. Phones: one column,
   square portraits so eight people take less scrolling. The one-card rules are dormant with eight people; they keep the
   rows balanced when the owner adds or removes someone (two people were added this week). */
@media (min-width: 1280px) {
  #team .grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #team .grid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #team .grid--3 > .person { grid-column: span 2; }
  #team .grid--3 > .person:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  #team .grid--3 > .person:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #team .grid--3 > .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (max-width: 767px) {
  .person__img { aspect-ratio: 1; }
}

/* 06 Work with us: text beside Contact's .details list. The list rules are copied from css/pages/contact.css as the
   brief says (one shared copy in site.css is a shared request); the titles are the H5 card-title tier, as on Contact. */
#work .split { align-items: start; }
.details { grid-column: 8 / 13; }
.details > li { padding-block: 20px; border-top: 1px solid var(--line); }
.details > li:last-child { border-bottom: 1px solid var(--line); }
.details h3 { font-size: var(--t-h5); letter-spacing: -0.025em; }
.details p { margin-top: 6px; color: var(--ink-2); }
.details__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* each link is a 44px target drawn as a one-line underlined link: the underline is text-decoration, so the hit box can
   grow (and the negative margin keep the row at text height) without moving it */
.details__links a {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -9px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
}
.details__links a:hover { text-decoration-color: var(--ink); }

@media (max-width: 1023px) {
  .details { grid-column: 1 / -1; }
}