/* 60, about (site/sections/60-about.html). Linked by scripts/build-home.mjs.
   Heading and the two lines on the left, the team as a two by two grid of
   .vs-card people on the right. Each avatar is the person's initials on a
   Field Manual plate (data-plate 1 to 3) with a second plate stepped
   behind it. */

.vs-about { border-top: 1px solid var(--vs-line); }

.vs-about__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sc-6) clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.vs-about__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--vs-h2); line-height: var(--sc-leading-tight);
  letter-spacing: var(--vs-display-track); text-wrap: balance;
}
.vs-about__line {
  margin: var(--sc-5) 0 0; max-width: 44ch;
  font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink);
  text-wrap: pretty;
}
.vs-about__cred {
  margin: var(--sc-4) 0 0; max-width: 46ch;
  padding-inline-start: var(--sc-4);
  border-inline-start: 2px solid var(--vs-plate-2);
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft);
  text-wrap: pretty;
}

.vs-about__team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}

.vs-person {
  display: flex; align-items: center;
  gap: var(--sc-5);
  padding: var(--sc-5) var(--sc-5) var(--sc-5) var(--sc-4);
}
.vs-person__avatar {
  position: relative; flex: none;
  width: 4.25rem; height: 4.25rem;
  margin: 0 7px 7px 0;
}
.vs-person__avatar::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  border: 1px solid var(--vs-line);
  background: var(--vs-plate-1);
  transform: translate(7px, 7px);
}
.vs-person__initials {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(22, 23, 21, 0.18);
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: 1.3rem; letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
/* Initials contrast: bone on olive 7.6:1, ink on steel 6.9:1, ink on drab 13:1. */
.vs-person[data-plate="3"] .vs-person__initials { background: var(--vs-plate-3); color: var(--sc-surface); }
.vs-person[data-plate="2"] .vs-person__initials { background: var(--vs-plate-2); color: var(--sc-ink); }
.vs-person[data-plate="1"] .vs-person__initials { background: var(--vs-plate-1); color: var(--sc-ink); }
.vs-person[data-plate="1"] .vs-person__avatar::before { background: var(--vs-plate-2); }
.vs-person[data-plate="3"] .vs-person__avatar::before { background: var(--vs-plate-2); }

/* Photo avatars: the same plate-behind-plate box as the initials fallback,
   the face itself natural (no filter) at rest. A warm, low-alpha wash lifts
   in on hover, never a grayscale-to-color swap that could misread a face. */
.vs-person__photo {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(22, 23, 21, 0.18);
  object-fit: cover;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.vs-person__avatar--photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sc-accent) 22%, transparent);
  opacity: 0;
  transition: opacity 240ms var(--vs-ease-card, ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .vs-person:hover .vs-person__avatar--photo::after,
  .vs-person:focus-within .vs-person__avatar--photo::after { opacity: 1; }
}

.vs-person__text { min-width: 0; }
.vs-person__name {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--sc-t-base); line-height: 1.2; letter-spacing: -0.015em;
}
.vs-person__role { margin: 0.15rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.vs-person__more { margin: 0.45rem 0 0; font-size: var(--sc-t-sm); }
.vs-person__link {
  color: var(--vs-accent-text, var(--sc-ink)); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.vs-person__link:hover { color: var(--sc-ink); }

@media (max-width: 1023px) {
  .vs-about__wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* Phones: still two by two, each card stacked (avatar over the name). */
@media (max-width: 560px) {
  .vs-about__team { gap: var(--sc-3); }
  .vs-person { flex-direction: column; align-items: flex-start; gap: var(--sc-3); padding: var(--sc-4); }
  .vs-person__avatar { width: 3.25rem; height: 3.25rem; margin: 0 6px 6px 0; }
  .vs-person__avatar::before { transform: translate(6px, 6px); }
  .vs-person__initials { font-size: 1.05rem; }
}