/* ============================================================
   ABOUT PAGE

   Loaded after main.css, which supplies the tokens, the sticky
   header, the boxed label and the subpage grain handling.
   ============================================================ */

/* Tuned so the whole page fits one 1440x900 screen without scrolling */
.about-head{
  padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(20 * var(--u));
}

.about-title{
  font-size: calc(52 * var(--u));
  line-height: 1.05;
  font-weight: 400;
  margin: 0;
}

/* ----------------------------------------------------------
   TEAM
   ---------------------------------------------------------- */
.team{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(56 * var(--u));
  padding: 0 calc(56 * var(--u)) calc(30 * var(--u));
  max-width: calc(1200 * var(--u));
  align-items: start;
}

/* The square frame. The photo inside is full-frame, so the crop is chosen here
   rather than baked into the file:
     --focus  where to centre, as x% y%  (50% 50% is dead centre)
     --zoom   scale, 1 fits the square, 1.2 crops in 20% tighter
   Change those two values on the <img> to reframe; no image editing needed. */
.member__portrait{
  display: block;
  width: calc(272 * var(--u));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: calc(18 * var(--u));
}
.member__portrait img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
  transform: scale(var(--zoom, 1));
}


.member__name{
  font-size: calc(26 * var(--u));
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 calc(12 * var(--u));
}


.member__bio{
  font-size: calc(17 * var(--u));
  line-height: 1.55;
  margin: 0;
  max-width: calc(460 * var(--u));
}

/* ----------------------------------------------------------
   SUPPORTERS
   ---------------------------------------------------------- */
.supporters{
  padding: calc(30 * var(--u)) calc(56 * var(--u)) calc(30 * var(--u));
}

.supporters__label{
  font-size: calc(19 * var(--u));
  letter-spacing: calc(1.4 * var(--u));
  margin: 0 0 calc(20 * var(--u));
}

.supporters__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(24 * var(--u));
}

/* No card: the mark's own background is transparent, so a white panel behind it
   would read as the logo having a background. Height is fixed so marks of
   differing proportion line up. */
.supporter{
  display: flex;
  align-items: center;
  height: calc(48 * var(--u));
}
.supporter img{
  max-height: 100%;
  max-width: calc(220 * var(--u));
  width: auto;
  display: block;
}
@media (max-width: 900px){
  .team{ grid-template-columns: 1fr; }
}