/* =====================================================================
   People page — a single roster of portraits, four to a row, with a
   right-hand detail drawer. No grouping by function (24/08/2026).
   ===================================================================== */

/* Grid: rows of four portraits */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* Card = portrait + name + role. The whole card is a button. */
.pl-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pl-card__photo {
  display: block;
  background: var(--color-surface, #f3f3ef);
}
.pl-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* No zoom on hover anywhere on this site: the portrait comes into colour */
.pl-card:hover .pl-card__photo img,
.pl-card:focus-visible .pl-card__photo img { filter: grayscale(0); }

@media (max-width: 1000px) { .pl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pl-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 6vw, 2.5rem) 1.25rem; } }

@media (prefers-reduced-motion: reduce) {
  .pl-card__photo img { transition: none; }
}

/* ---------------------------------------------------------------------
   Detail drawer: slides in from the right, two thirds of the screen.
   --------------------------------------------------------------------- */
.pl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 10, 0.5);
  /* dim plus a soft blur, same treatment as the mega-menu scrim */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* above the header, so the drawer reads as a true modal layer */
  z-index: 1200;
}
.pl-overlay.is-open { opacity: 1; visibility: visible; }

.pl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 66.6667vw;
  max-width: 1280px;
  background: #fff;
  z-index: 1210;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -24px 0 70px rgba(8, 10, 10, 0.18);
  display: flex;
  flex-direction: column;
}
.pl-drawer.is-open { transform: translateX(0); }

/* Same treatment as the Portfolio drawer: the word alone, no box */
.pl-drawer__close {
  position: absolute;
  top: clamp(2.5rem, 5vw, 5.5rem);
  right: clamp(2rem, 5vw, 5.5rem);
  z-index: 2;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-muted);
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--transition), color var(--transition);
}
.pl-drawer__close:hover,
.pl-drawer__close:focus-visible {
  color: var(--color-ink);
  background-size: 100% 1px;
}
.pl-drawer__close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 44px;
}

.pl-drawer__scroll {
  overflow-y: auto;
  height: 100%;
  padding: clamp(2.5rem, 5vw, 5.5rem) clamp(2rem, 5vw, 5.5rem);
}
.pl-drawer__head {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.pl-drawer__img {
  flex: 0 0 auto;
  width: clamp(130px, 22vw, 240px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-surface, #f3f3ef);
  filter: grayscale(1);
}
.pl-drawer__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.006em;
  color: var(--color-ink);
}
.pl-drawer__role {
  margin: clamp(0.6rem, 1.5vw, 1rem) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  color: var(--color-text-secondary);
}
/* The bios are long now, so the column is wider than the site's usual 60ch.
   Measured: 70ch lands at ~68 characters a line, close to the typographic
   optimum, and stops the text looking lost in a 950px panel. */
.pl-drawer__bio { margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0; max-width: 70ch; }
.pl-drawer__bio p {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.pl-drawer__bio p + p { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.pl-drawer__link { display: inline-block; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

/* Lock background scroll when the drawer is open */
.pl-lock, .pl-lock body { overflow: hidden; }

@media (max-width: 720px) {
  .pl-drawer { width: 100vw; }
  .pl-drawer__head { flex-direction: column; align-items: flex-start; gap: clamp(1.25rem, 4vw, 1.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-overlay, .pl-drawer { transition: none; }
}