/* ============================================================
   about.css  -  ABOUT PAGE LAYOUT

   Nikita: this loads only on about.html. It styles the founder
   intro block, the team grid (3 cards), and the origin story.

   Most layout is responsive. Things you may want to change:
   - team grid column count (search "team-grid")
   - card aspect ratio for the photo posters (search "aspect-ratio")
============================================================ */

/* Big page title at the top. Top padding is large to clear the
   fixed nav and give the headline breathing room. */
.about-hero {
  padding-block: clamp(120px, 18vw, 160px) clamp(60px, 10vw, 80px);
}
.about-hero h1 span { display: block; }

/* Two-column intro: the typographic poster on the left, the
   paragraph copy on the right. Stacks on tablet. */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-2xl);
  align-items: center;
}
.founders-text > * + * { margin-block-start: var(--space-md); }
@media (max-width: 900px) {
  .founders-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* The "Meet the team" heading, centred over the grid. */
.team-heading {
  text-align: center;
  margin-block-end: var(--space-2xl);
}

/* Three-column team grid on desktop. Cards stack on mobile. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.team-card .poster {
  margin-block-end: var(--space-md);
  aspect-ratio: 3 / 4;
}
.team-name { margin-block-end: 4px; }
.team-role { color: var(--gold-text); margin-block-end: var(--space-sm); }
.team-bio  { color: var(--ash); margin-block-end: var(--space-sm); }
.team-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Skill chips below each team bio (e.g. "Video direction", "SEO"). */
.tag {
  font-size: var(--type-micro);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  color: var(--ash);
  text-transform: uppercase;
}

/* Tablet: two columns. Mobile: one column. */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Origin story paragraphs. Kept to reading width for comfort. */
.origin-body { max-width: var(--reading-max-w); margin-block-start: var(--space-md); }
.origin-body > * + * { margin-block-start: var(--space-md); }