/* about.html — crew section as a 2x2 photo gallery instead of a fixed 3-across row.
   .about-crew__team already exists in style.css as width:1200px flex row (fits exactly
   3 x 384px cards); this override switches it to a centered grid so a 4th photo fits
   cleanly instead of wrapping awkwardly. */

.about-crew__team {
  display: grid;
  grid-template-columns: repeat(2, 384px);
  gap: 24px;
  width: auto;
  justify-content: center;
}

/* Portrait placeholders for named team members whose photos are not in yet.
   Same footprint as a real .about-crew__photo so the 2x2 grid does not shift
   when the real portraits drop in — replace the .img-ph div with an <img>. */
.about-crew__photo--ph {
  border: 1px dashed var(--text-muted);
  box-shadow: none;
  background: var(--img-placeholder);
}
.about-crew__photo--ph .ph-label { font-size: 12px; }
.about-crew__photo--ph .ph-asset { font-size: 12px; font-weight: 400; }

.about-crew__todo {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 767px) {
  .about-crew-mobile__photo.about-crew__photo--ph {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

/* ---- Crew gallery (added 2026-08-25; converted to an auto-scrolling marquee 2026-09-03) ---- */
.crew-gallery__inner{max-width:1440px;margin:0 auto;padding:0 120px;}
.crew-marquee{
  margin-top:28px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,black 48px,black calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,transparent,black 48px,black calc(100% - 48px),transparent);
}
.crew-marquee__track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:crew-marquee-scroll 55s linear infinite;
}
.crew-marquee:hover .crew-marquee__track{animation-play-state:paused;}
.crew-marquee__cell{flex:0 0 220px;margin:0;overflow:hidden;border-radius:3px;background:var(--bg-ground-alt,#f6f5f3);}
.crew-marquee__cell img{display:block;width:220px;height:220px;object-fit:cover;}
@keyframes crew-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .crew-marquee__track{animation:none;}
  .crew-marquee{overflow-x:auto;}
}
@media (max-width:640px){
  .crew-gallery__inner{padding:0 16px;}
  .crew-marquee__cell{flex-basis:160px;}
  .crew-marquee__cell img{width:160px;height:160px;}
}