@charset "utf-8";
/* =====================================================
   Staff page (proposal). Loaded after home.css,
   alumni-v2.css (card + no-JS fallback styles) and
   story-lightbox.css (shared bio/story dialog).
   ===================================================== */

/* ---------- Hero collage (desktop only, decorative) ---------- */
.staff-collage {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  transform: rotate(-2deg);
}
.staff-collage li:nth-child(even) { transform: translateY(1.5rem); }
.staff-collage picture { display: block; }
.staff-collage img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top;
  border-radius: var(--radius-md);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  outline: 2px solid rgba(255, 255, 255, .08);
}
.staff-collage li:nth-child(2) img { outline: 3px solid var(--impact-crimson); }

/* ---------- Founder feature ---------- */
.staff-founder {
  display: grid; gap: 1.5rem 2.5rem; align-items: center;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(212, 42, 54, .3), transparent 60%),
    var(--grind-black);
  color: #fff;
  border-top: 4px solid var(--impact-crimson);
}
.staff-founder__photo picture { display: block; }
.staff-founder__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px var(--impact-crimson), 0 20px 40px rgba(0, 0, 0, .5);
}
.staff-founder__name { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; color: #fff; }
.staff-founder__creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.staff-founder__creds li {
  padding: .35rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  font-size: .8125rem; font-weight: 700;
}
.staff-founder p { color: rgba(255, 255, 255, .88); max-width: 40rem; }
@media (max-width: 767.98px) {
  .staff-founder { grid-template-columns: 1fr; }
  .staff-founder__photo { max-width: 15rem; }
}

/* ---------- Staff cards (built on .alum-card) ---------- */
.staff-card2__photo img { aspect-ratio: 1; object-position: center 15%; }
.staff-card2__blurb { font-size: .9375rem; color: #3a3a40; margin: .5rem 0 .75rem; }
@media (max-width: 575.98px) {
  .staff-card2__blurb { grid-column: 2; font-size: .875rem; margin: .25rem 0 0; }
}
/* Bio lists inside the dialog and the no-JS fallback */
.story-lb__story ul, .alum-card__story ul { padding-left: 1.25rem; }
.story-lb__story li { color: rgba(255, 255, 255, .88); margin-bottom: .35rem; }
.alum-card__story li { font-size: .9375rem; color: #2b2b30; }

/* Portrait staff photos in the dialog */
.story-lb__media--portrait img { aspect-ratio: 4 / 5; object-position: top; }

/* Placeholder note on a light surface (home.css styles it for dark bands) */
.section:not([data-surface="dark"]) .placeholder-note { color: #7a5200; border-color: #b07a10; background: #fff8e6; }   /* 7.1:1 */
.staff-slot { display: grid; place-items: center; min-height: 10rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--surface-alt); text-align: center; }