/* About page layout. Tokens and shared parts live in site.css. */

/* The app's avatar hue pairs (ui/desktop/src/styles/main.css, --avatar-hue-N). */
.team {
  --av-1-bg: #ffcbc5; --av-1-fg: #752725;
  --av-4-bg: #bde6bd; --av-4-fg: #11531a;
  --av-6-bg: #b5dfff; --av-6-fg: #034a6f;
}

/* Links that sit inside prose: ink, underlined by a 1px coral rule. */
a.inline {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral-bar);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease);
}
a.inline:hover { color: var(--coral); text-decoration-color: var(--coral); }

/* ── Intro ─────────────────────────────────────────────── */
.about-intro { padding-top: 64px; }
.about-intro .lede { max-width: 620px; text-wrap: pretty; }
@media (max-width: 760px) {
  .about-intro { padding-top: 40px; }
}

/* ── Sections ──────────────────────────────────────────── */
.about-section { padding-top: 96px; }
.about-last { padding-bottom: 96px; }
@media (max-width: 680px) {
  .about-section { padding-top: 64px; }
  .about-last { padding-bottom: 64px; }
}

/* One three column grid carries every list on the page, so the team, the
   collaborators, the inspirations and the links share the same vertical lines. */
.team, .collab, .refs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 640px) {
  .team, .collab, .refs { grid-template-columns: minmax(0, 1fr); }
}

/* ── Team ──────────────────────────────────────────────── */
.team { row-gap: 40px; }
.person { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: var(--fs-md); line-height: 1;
  background: var(--medium); color: var(--muted);
  user-select: none;
}
.avatar.hue-1 { background: var(--av-1-bg); color: var(--av-1-fg); }
.avatar.hue-4 { background: var(--av-4-bg); color: var(--av-4-fg); }
.avatar.hue-6 { background: var(--av-6-bg); color: var(--av-6-fg); }
.person-text { padding-top: 20px; min-width: 0; }
.person h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h); line-height: var(--lh-h3); margin: 0; }
.person p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 6px 0 0; text-wrap: pretty; }
.person .person-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: var(--fs-md); }
@media (max-width: 640px) {
  .team { row-gap: 28px; }
  .person { flex-direction: row; gap: 16px; }
  .person-text { padding-top: 1px; }
}

/* ── Collaborators ─────────────────────────────────────── */
.collab { row-gap: 40px; }
.group { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; min-width: 0; }
.group h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h); line-height: 1.4; margin: 0; max-width: 320px; text-wrap: pretty; }
.group h3 a { color: var(--ink); }
.group h3 a span { color: var(--subtle); transition: color var(--dur-fast) var(--ease); }
.group h3 a:hover span, .group h3 a:focus-visible span { color: var(--coral); }
.group ul { list-style: none; margin: 16px 0 0; padding: 0; align-self: start; }
.group li { font-size: var(--fs-md); line-height: 1.5; padding: 6px 0; }
/* Each group keeps one column of the page grid, its names listed under its
   own heading; the third column stays empty. */
@media (max-width: 640px) {
  .collab { row-gap: 36px; }
}

/* ── Inspirations and links: a quiet list of references ── */
.insp-note { font-size: var(--fs-body); color: var(--muted); line-height: 1.65; max-width: 720px; margin: -12px 0 32px; text-wrap: pretty; }
.refs li { padding: 14px 0 6px; min-width: 0; }
.refs li:nth-child(-n+3) { padding-top: 0; }
@media (max-width: 640px) {
  .refs li:nth-child(n+2) { padding-top: 14px; }
}
.ref-name { font-size: var(--fs-md); color: var(--ink); }
.ref-name span { color: var(--subtle); margin-left: 2px; transition: color var(--dur-fast) var(--ease); }
.ref-name:hover span, .ref-name:focus-visible span { color: var(--coral); }
/* The descriptions are short enough to sit on one line from 1024px up; where
   a narrow column must wrap them, pretty keeps a lone word off the last line. */
.refs p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 6px 0 0; text-wrap: pretty; }

/* ── Updates ───────────────────────────────────────────────
   The rows keep the shape the release pipeline copies:
   a.news-row > .news-date (.day .mon) + .news-body (h3, p, .news-link).
   On wide screens .news-body steps out of the way (display: contents) so the
   row can use the page grid: the date and the link in the first column, the
   headline and the sentence in the other two. A row with several destinations
   is a div.news-row whose a.news-link elements sit together in .news-links,
   in the cell a single link would use. */
.news-list { display: flex; flex-direction: column; }
.news-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px;
  padding: 22px 0;
  color: var(--ink);
}
.news-row:first-child { padding-top: 0; }
.news-row:hover { text-decoration: none; }
.news-body { display: contents; }
.news-date {
  grid-column: 1; grid-row: 1 / 3; align-self: start;
  display: flex; gap: 6px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.news-body h3 {
  grid-column: 2 / 4; grid-row: 1;
  font-size: var(--fs-h3); letter-spacing: var(--tr-h); line-height: 1.45; margin: 0; text-wrap: pretty;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
/* pretty keeps a lone word off the last line (measured: without it, four to
   six rows end on one word at every width). */
.news-body p { grid-column: 2 / 4; grid-row: 2; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; margin: 6px 0 0; max-width: 600px; text-wrap: pretty; }
.news-link {
  /* Shares the date's cell and sits one line under it, so a headline that
     wraps never pushes it down. */
  grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 30px;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--subtle);
  transition: color var(--dur-fast) var(--ease);
}
.news-links {
  grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 30px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.news-links .news-link { margin-top: 0; }
/* Arrows stay quiet at rest; only the newest row keeps a coral one. */
.news-list:not(.news-list-earlier) .news-row:first-child .news-link span[aria-hidden] { color: var(--coral); }
/* A row that is itself a link lights up as a whole; a row with several links
   lights up one link at a time, so the headline never promises one destination. */
a.news-row:hover h3, a.news-row:focus-visible h3 { text-decoration-color: var(--coral-bar); }
a.news-row:hover .news-link, a.news-row:focus-visible .news-link,
.news-links .news-link:hover, .news-links .news-link:focus-visible { color: var(--coral); }
/* Phones: the date and the link share the first line, the text runs full width.
   Several links fit on one line of their own under the text. */
@media (max-width: 640px) {
  .news-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 18px 0; }
  .news-date { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
  .news-link { grid-column: 2; grid-row: 1; margin-top: 0; }
  .news-body h3 { grid-column: 1 / -1; grid-row: 2; }
  .news-body p { grid-column: 1 / -1; grid-row: 3; }
  .news-links { grid-column: 1 / -1; grid-row: 4; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; }
}

/* Earlier updates: the rest of the list, closed until asked for. Every row is
   still in the page. */
.news-more summary {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 0; font-size: var(--fs-md); color: var(--ink); cursor: pointer; list-style: none;
  transition: color var(--dur-fast) var(--ease);
}
.news-more summary::-webkit-details-marker { display: none; }
.news-more summary::after {
  content: ''; width: 14px; height: 14px; flex: none; background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-med) var(--ease);
}
.news-more[open] summary::after { transform: rotate(180deg); }
.news-more summary:hover { color: var(--coral); }
.news-more summary:focus-visible { outline-offset: 4px; }
.news-list-earlier .news-row:first-child { padding-top: 22px; }
@media (max-width: 640px) { .news-list-earlier .news-row:first-child { padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .news-more summary::after { transition: none; } }