/* /about/ — page-specific styles (tokens only; loaded after site.css) */

/* 02 The story: two body columns, a four-cell mono strip, then the line that reaches the present */
.story { row-gap: var(--s-4); }
.story > p { margin: 0; max-width: var(--measure); }
@media (min-width: 1024px) { .story { row-gap: var(--s-6); } }

.story__strip { margin-top: var(--s-7); }
@media (min-width: 600px) {
  .story__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__strip > li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .story__strip > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (min-width: 1024px) {
  .story__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story__strip > li:nth-child(n+3) { border-top: 0; }
  .story__strip > li:nth-child(2n+1) { padding-left: var(--s-5); border-left: 1px solid var(--rule); }
  .story__strip > li:first-child { padding-left: 0; border-left: 0; }
}

.story__today { margin-top: var(--s-6); }
.story__today-line { max-width: var(--measure); }
.story__today .status { margin-top: var(--s-3); max-width: var(--measure); }
.story__today .status + .status { margin-top: var(--s-1); }

/* 04 The team: paragraph and role chips left, two mono lists right */
.team { row-gap: var(--s-6); }
.team__body { max-width: var(--measure); }
.team .team__roles { margin-top: var(--s-5); }
.team__lists.hgrid { display: grid; }
@media (min-width: 1024px) { .team { align-items: start; } }

/* 05 Research: book card left, copy right */
.research { row-gap: var(--s-5); }
.research__copy h3 { margin-bottom: var(--s-3); }
.research__copy p { max-width: var(--measure); }
.research__copy p + p { margin-top: var(--s-4); }
.research__links { margin-top: var(--s-5); }
.research__copy cite { font-style: normal; font-weight: 500; }
@media (min-width: 1024px) { .research { align-items: start; } }

/* 06 Where we are: two cells with a visible TODO each, then the coverage note and a link */
.place { display: flex; flex-direction: column; align-items: flex-start; }
.place h3 { margin-top: var(--s-2); }
.place p { margin-top: var(--s-3); max-width: 44ch; }
.where__after { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.where__after .mono-note { margin-top: 0; }

/* 07 How we build, illustrated: the mark at 160px (64 units at 2.5px) on its grid, mono caption beside it */
.how-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.how-strip__grid { row-gap: var(--s-5); }
.how-strip__figure { margin: 0; }
.how-strip__figure svg { display: block; width: 320px; max-width: 100%; height: auto; color: var(--text); }
.how-strip__caption {
  font: 500 13px/22px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); max-width: 52ch;
}
@media (min-width: 1024px) {
  .how-strip__grid { align-items: center; }
}