/* persona sub-nav + hub cards */
.subnav {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.5rem 2rem 0; max-width: var(--max); margin: 0 auto;
}
.subnav a {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--paper-dim); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.4rem 0.9rem;
  transition: color 0.3s, border-color 0.3s;
}
.subnav a:hover { color: var(--paper); }
.subnav a.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); }

.personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.persona {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1.4rem; align-items: center;
  border: 1px solid var(--hairline); padding: 1.8rem;
  background: rgba(31, 26, 21, 0.6);
  text-decoration: none; color: var(--paper);
  transition: border-color 0.35s, transform 0.35s, background 0.35s;
}
.persona:hover { border-color: var(--accent); transform: translateY(-4px); background: rgba(31,26,21,0.9); }
.persona[data-accent="gold"]    { --accent: var(--gold); }
.persona[data-accent="crimson"] { --accent: var(--crimson); }
.persona[data-accent="teal"]    { --accent: var(--teal); }
.persona[data-accent="violet"]  { --accent: var(--violet); }
.persona img { width: 100%; height: auto; display: block; }
.persona h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--accent); margin-bottom: 0.4rem; }
.persona p { color: var(--paper-dim); font-size: 0.98rem; }
.persona .mono { display: block; color: var(--paper-dim); margin-bottom: 0.5rem; }
@media (max-width: 860px) { .personas { grid-template-columns: 1fr; } .persona { grid-template-columns: 6rem 1fr; } }

/* flip cards (student) */
.flip { perspective: 1200px; cursor: pointer; }
.flip__inner {
  position: relative; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.4,0,.2,1);
  min-height: 16rem;
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline); padding: 1.8rem;
  background: rgba(31, 26, 21, 0.85);
  display: flex; flex-direction: column; justify-content: center;
}
.flip__face h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.5rem; }
.flip__face.back { transform: rotateY(180deg); border-color: var(--accent, var(--gold)); }
.flip__face p { color: var(--paper-dim); font-size: 1rem; }
.flip__hint { position: absolute; bottom: 1rem; right: 1.2rem; color: var(--paper-dim); }

/* count-up stats (professional) */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 3rem; }
.stat { text-align: center; border: 1px solid var(--hairline); padding: 1.8rem 1rem; }
.stat__num {
  font-family: var(--serif); font-size: 3.2rem; font-weight: 600; line-height: 1;
  color: var(--accent, var(--gold)); display: block;
}
.stat[data-accent="gold"] { --accent: var(--gold); }
.stat[data-accent="crimson"] { --accent: var(--crimson); }
.stat[data-accent="teal"] { --accent: var(--teal); }
.stat[data-accent="violet"] { --accent: var(--violet); }
.stat__label { color: var(--paper-dim); }

/* equalizer (storyteller) */
.eq { display: flex; align-items: flex-end; gap: 5px; height: 3.5rem; }
.eq span {
  width: 6px; background: var(--gold); border-radius: 2px 2px 0 0;
  animation: eq 1s ease-in-out infinite alternate;
}
.eq span:nth-child(2n) { animation-duration: 0.7s; background: var(--crimson); }
.eq span:nth-child(3n) { animation-duration: 1.2s; background: var(--teal); }
.eq span:nth-child(4n) { animation-duration: 0.9s; background: var(--violet); }
@keyframes eq { from { height: 12%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .eq span { animation: none; height: 50%; } }

@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.flipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.flip[data-accent="gold"]    { --accent: var(--gold); }
.flip[data-accent="crimson"] { --accent: var(--crimson); }
.flip[data-accent="teal"]    { --accent: var(--teal); }
.flip[data-accent="violet"]  { --accent: var(--violet); }
.flip__face.back p { color: var(--paper); }
@media (max-width: 860px) { .flipgrid { grid-template-columns: 1fr; } }

.onair { display: flex; align-items: center; gap: 2rem; border: 1px solid var(--hairline); padding: 2rem; background: rgba(31,26,21,0.6); }
.onair .mono { letter-spacing: 0.2em; }

/* uniform grid + card link (shared on sub-pages) */
.uniform { border-top: 1px solid var(--hairline); }
.uniform__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.uniform__col { border: 1px solid var(--hairline); padding: 1.6rem 1.5rem; background: rgba(31, 26, 21, 0.6); transition: border-color 0.35s; }
.uniform__col:hover { border-color: var(--gold); }
.uniform__col h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.6rem; color: var(--gold); }
.uniform__col p { color: var(--paper-dim); font-size: 1rem; }
.card__link { display: inline-block; margin-top: 1rem; color: var(--accent, var(--gold)); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.card__link:hover { border-color: currentColor; }
@media (max-width: 860px) { .uniform__grid { grid-template-columns: 1fr; } }