/* ============================================================
   HARAMBEE — members grid + member detail pages
   Depends on harambee.css for tokens, font, header, footer.
   ============================================================ */

.page-standard { background: #0b1110; min-height: 100vh; }
.page-standard .site-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* Header becomes a normal dark bar on standalone pages */
.page-standard .site-header {
  position: static; background: #0b1110;
  padding: clamp(22px, 4vw, 34px) clamp(24px, 6vw, 120px);
  border-bottom: 1px solid rgba(174, 138, 80, 0.22);
}
.page-standard .site-logo,
.page-standard .site-nav a,
.page-standard .language-switcher { color: rgba(253, 241, 225, 0.86); }

/* ---- Content shell ---- */
.members-main {
  flex: 1;
  padding: clamp(48px, 8vw, 110px) clamp(24px, 6vw, 120px) clamp(64px, 9vw, 120px);
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.members-intro { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.members-intro h1 {
  margin: 0 0 20px; color: var(--paper);
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 0.98;
}
.members-intro p {
  margin: 0; color: rgba(253, 241, 225, 0.72);
  font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.5; max-width: 62ch;
}

/* ---- Grid ---- */
.members-grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.member-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px; border-radius: 20px; overflow: hidden;
  background: #121216; border: 1px solid rgba(174, 138, 80, 0.24);
  text-decoration: none; color: var(--paper);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.member-card:hover {
  transform: translateY(-4px); border-color: rgba(174, 138, 80, 0.55); background: #16161c;
}
.member-card:focus-visible { outline: 2px solid #ae8a50; outline-offset: 2px; }
.member-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1f4fae, #b0343c 40%, #2f8f4e 70%, #c9a227);
  opacity: 0.85;
}
.member-avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  margin: 8px 0 18px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.member-name {
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.4rem; line-height: 1.05; color: var(--paper);
}
.member-role {
  margin-top: 8px; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #ae8a50;
}

/* ---- Detail ---- */
.member-main {
  flex: 1;
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 120px) clamp(64px, 9vw, 120px);
  max-width: 820px; margin: 0 auto; width: 100%;
}
.members-back {
  display: inline-block; margin-bottom: 40px; color: rgba(253, 241, 225, 0.72);
  text-decoration: none; font-size: 0.95rem;
  border-bottom: 1px solid rgba(174, 138, 80, 0.4); padding-bottom: 2px;
}
.members-back:hover { color: var(--paper); }
.member-detail-head { display: flex; gap: clamp(20px, 4vw, 40px); align-items: center; flex-wrap: wrap; }
.member-detail-avatar {
  width: clamp(120px, 22vw, 180px); height: clamp(120px, 22vw, 180px);
  border-radius: 50%; object-fit: cover; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.member-detail-meta h1 {
  margin: 0; color: var(--paper);
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
}
.member-detail-role {
  margin: 12px 0 0; color: #ae8a50; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.85rem;
}
.member-detail-business { margin: 8px 0 0; color: rgba(253, 241, 225, 0.72); font-size: 0.98rem; }
.fld-label { color: rgba(253, 241, 225, 0.45); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin-right: 6px; }
.member-bio {
  margin: clamp(28px, 5vw, 48px) 0 0; color: rgba(253, 241, 225, 0.82);
  font-size: 1.1rem; line-height: 1.6; max-width: 62ch;
}
.member-notfound {
  color: var(--paper); font-family: "Ogg Medium", Georgia, serif;
  font-size: 1.8rem; margin: 0 0 24px;
}

@media (max-width: 640px) {
  .page-standard .site-header { grid-template-columns: 1fr auto; gap: 16px; }
  .page-standard .site-nav {
    grid-column: 1 / -1; grid-row: 2; justify-content: flex-start;
    gap: 18px; overflow-x: auto; scrollbar-width: none;
  }
  .member-detail-head { flex-direction: column; align-items: flex-start; }
}