/* ---- Hero tuning ---- */
.hero--about {
  min-height: 460px;
  padding: 54px 0 64px;
}
.hero--about .hero-backdrop::before {
  filter: saturate(.92) contrast(.98) brightness(1.06) blur(1px);
  opacity: .72;
}
.hero--about .hero-backdrop::after {
  background:
    radial-gradient(1200px 650px at 20% 30%, rgba(var(--theme-primary-rgb), .18), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(var(--theme-accent-rgb), .14), transparent 55%),
    linear-gradient(180deg, rgba(var(--theme-canvas-rgb), .74) 0%, rgba(var(--theme-canvas-rgb), .92) 100%);
}

.about-wrap { padding-bottom: 0; }
.about-hero-copy { max-width: 820px; margin: 0 auto; }

/* ---- Mission stagger animation ---- */
.hero--about .hero-subtitle {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin-top: 16px;
  max-width: 60ch;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(var(--theme-surface-rgb), .35);
}

.mission-phrase {
  display: inline;
  opacity: 0;
  animation: phraseIn .6s var(--ease-out) forwards;
}
.mission-phrase:nth-child(1) { animation-delay: .1s; }
.mission-phrase:nth-child(2) { animation-delay: .45s; }
.mission-phrase:nth-child(3) { animation-delay: .8s; }

@keyframes phraseIn {
  from { opacity: 0; filter: blur(4px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);  transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mission-phrase { opacity: 1; animation: none; filter: none; }
}

/* ---- CTA buttons ---- */
.btn-bylaws:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(var(--theme-primary-rgb), .35);
}
.btn-constitution {
  background: rgba(var(--theme-surface-rgb), .85);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(6px);
}
.btn-constitution:hover {
  background: var(--theme-surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}

/* ---- Who We Are ---- */
.about-intro {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
.about-intro-inner {
  padding: var(--space-xl) 0;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-intro-text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

/* ---- Leadership ---- */
.leaders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.leader-card { min-width: 0; }
.people-list-item--vacant {
  color: var(--text-muted);
}
.people-list-item--vacant .avatar {
  opacity: .35;
  background: var(--surface-subtle);
  color: var(--text-muted);
}
.people-list-item--vacant .badge {
  opacity: .75;
}
@media (min-width: 820px) {
  .leaders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .leader-card--staff {
    grid-column: 1 / -1;
  }
}
@media (min-width: 992px) {
  .leader-card--staff .people-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
  .leader-card--staff .people-list-item {
    min-width: 0;
  }
}
@media (max-width: 575.98px) {
  .leaders-grid {
    gap: 18px;
  }
  .leaders-grid .card-media {
    display: none;
  }
  .people-list-item {
    padding: 10px 12px;
  }
  .badge--role {
    font-size: .65rem;
    white-space: nowrap;
  }
}

/* ---- HALL OF FAME ---- */
#hof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 650px at 12% 0%, rgba(var(--theme-primary-rgb), .10), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(var(--theme-accent-ink-rgb), .08), transparent 55%),
    radial-gradient(800px 480px at 40% 90%, rgba(var(--theme-primary-rgb), .06), transparent 60%),
    linear-gradient(180deg, var(--surface-base) 0%, var(--surface-subtle) 100%);
}

/* optional photo behind HOF */
#hof::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hof-bg);
  background-size: cover;
  background-position: center 35%;
  opacity: .08;
  filter: saturate(.9) contrast(.95) blur(1px);
  pointer-events: none;
}

.hof-inner { position: relative; z-index: 1; }

.hof-sub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hof-sub-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.hof-sub-header i {
  color: var(--gold);
}

/* Individual name plates — "engraved plaque" feel */
.hof-plates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .hof-plates { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hof-plates { grid-template-columns: repeat(4, 1fr); }
}

.hof-plate {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: var(--radius-md);
  text-align: center;

  background:
    radial-gradient(220px 120px at 25% 10%, rgba(var(--theme-accent-ink-rgb), .14), transparent 70%),
    radial-gradient(180px 100px at 80% 85%, rgba(var(--theme-primary-rgb), .06), transparent 60%),
    linear-gradient(170deg, var(--theme-surface) 0%, var(--theme-soft) 40%, var(--theme-soft) 100%);
  border: 1px solid rgba(var(--theme-accent-rgb), .30);
  box-shadow:
    0 1px 0 rgba(var(--theme-surface-rgb), .8) inset,
    0 -1px 0 rgba(var(--theme-accent-ink-rgb), .10) inset,
    0 6px 20px rgba(var(--theme-accent-ink-rgb), .10);

  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  color: var(--theme-ink);
  letter-spacing: .015em;
  line-height: 1.3;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: popIn .5s var(--ease-out) both;
}

.hof-plate-copy { min-width: 0; }
.hof-plate-detail {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-muted);
}

.hof-plate .hof-plate-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, var(--theme-accent-ink), var(--theme-accent));
  color: var(--theme-ink);
  font-size: .7rem;
  box-shadow:
    0 1px 0 rgba(var(--theme-surface-rgb), .35) inset,
    0 3px 8px rgba(var(--theme-accent-ink-rgb), .25);
}

.hof-plate:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--theme-accent-rgb), .50);
  box-shadow:
    0 1px 0 rgba(var(--theme-surface-rgb), .8) inset,
    0 -1px 0 rgba(var(--theme-accent-ink-rgb), .10) inset,
    0 14px 36px rgba(var(--theme-accent-ink-rgb), .18),
    0 0 0 3px rgba(var(--theme-accent-ink-rgb), .12);
}

/* gold foil sheen */
.hof-plate::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(120deg, transparent 38%, rgba(var(--theme-accent-ink-rgb), .18) 50%, transparent 62%);
  transform: translateX(-140%) rotate(12deg);
  pointer-events: none;
  opacity: 0;
  animation: sheen 9s ease-in-out infinite;
}

/* stagger plate pop-in */
.hof-plate:nth-child(4n+2) { animation-delay: .06s; }
.hof-plate:nth-child(4n+3) { animation-delay: .12s; }
.hof-plate:nth-child(4n+4) { animation-delay: .18s; }

/* Show cards */
.show-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .show-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .show-grid { grid-template-columns: repeat(3, 1fr); }
}

.show-card {
  background: var(--theme-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: popIn .65s var(--ease-out) both;
}
.show-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(var(--theme-midnight-rgb), .14);
}

.show-card__head {
  position: relative; overflow: hidden;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 950; letter-spacing: .12em;
  text-transform: uppercase; font-size: .78rem;
  color: rgba(var(--theme-ink-rgb), .96);
  text-shadow: 0 2px 10px rgba(var(--theme-black-rgb), .22);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(var(--theme-accent-ink-rgb), .45), transparent 60%),
    radial-gradient(900px 260px at 82% 0%, rgba(var(--theme-primary-rgb), .35), transparent 58%),
    linear-gradient(135deg, var(--scgc-copper) 0%, var(--theme-primary) 40%, var(--theme-primary-hover) 100%);
  border-bottom: 1px solid rgba(var(--theme-surface-rgb), .12);
}
.show-card__head::after {
  content: "";
  position: absolute; inset: -50% -25%;
  background: linear-gradient(120deg, transparent 35%, rgba(var(--theme-surface-rgb), .18) 50%, transparent 65%);
  transform: translateX(-140%) rotate(10deg);
  opacity: 0; pointer-events: none;
  animation: sheen 6.5s ease-in-out infinite;
}

.show-card__body { padding: 18px 16px; text-align: center; }
.show-card__title {
  font-family: var(--font-display);
  font-weight: 950; font-size: 1.08rem;
  line-height: 1.25; margin-bottom: 10px;
  color: var(--text-primary);
}
.show-card__meta { color: var(--text-secondary); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .hof-plate, .show-card { animation: none; }
  .hof-plate::after, .show-card__head::after { animation: none; }
}
/* Safety: staff card should not display a random unit image */
.leaders-grid .leader-card--staff > .card-media {
  display: none !important;
}
/* Leadership card headers */
.leaders-grid .card-gradient-header {
  padding: 13px 18px;
  font-size: .82rem;
  letter-spacing: .085em;
}

/* Staff card is wider, so let the header breathe */
@media (min-width: 820px) {
  .leaders-grid .leader-card--staff .card-gradient-header {
    padding: 15px 20px;
    font-size: .9rem;
    letter-spacing: .09em;
  }
}
.leaders-grid .card-gradient-header {
  font-weight: 950;
}