/* TRIPLES V8: independent centred directory, separate follow-along music rail, observable motion. */
/* Do not allow the music widget to take width from the centered member directory. */
.site-public .directory-layout{display:block!important;max-width:none!important;width:100%;padding:0!important;margin:0!important;position:static!important}
.site-public .directory-layout>.directory-main{width:calc(100% - 530px)!important;max-width:1300px!important;min-width:0!important;margin:0 auto!important;padding:22px 0 65px!important;position:relative!important}
.site-public .directory-layout>#music-dock{
  position:fixed!important;top:clamp(140px,34vh,320px)!important;bottom:auto!important;
  right:clamp(12px,1.6vw,30px)!important;left:auto!important;
  margin:0!important;width:208px!important;min-width:0!important;max-width:208px!important;
  z-index:18!important;padding:7px!important;border-radius:15px!important;
  background:linear-gradient(150deg,rgba(24,24,32,.96),rgba(8,8,13,.97));
  backdrop-filter:blur(14px);box-shadow:0 12px 28px rgba(0,0,0,.72),0 0 12px rgba(255,255,255,.07);
}
.site-public .directory-layout>#music-dock .youtube-container{min-height:200px!important}
.site-public .directory-layout>#music-dock .youtube-container iframe{height:200px!important;width:100%!important}
.site-public .directory-layout>#music-dock .music-top{font-size:8px!important;margin:0 2px 7px}
.site-public .directory-layout>#music-dock .volume-row{font-size:8px;padding-top:7px}
.site-public .directory-layout>#music-dock .music-top a{font-size:8px}
/* Card sizing stays proportional, with no off-centre sideways push. */
.site-public .directory-main .leader-grid,.site-public .directory-main .member-grid{width:100%}
/* Floating chrome wordmark and softly breathing silver glow. Separate layers keep lettering crisp. */
.site-public .directory-intro{isolation:isolate;position:relative}
.site-public .directory-intro::before{
  content:'';position:absolute;pointer-events:none;left:50%;top:46%;z-index:-1;
  width:min(580px,75vw);height:160px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,235,246,.22),rgba(179,181,200,.08) 41%,transparent 72%);
  filter:blur(22px);transform:translate(-50%,-50%);
  animation:triples-v8-halo 4.4s ease-in-out infinite alternate!important;
}
.site-public .directory-intro .main-wordmark{
  position:relative;will-change:transform;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.95)) drop-shadow(0 0 15px rgba(248,249,255,.34));
  animation:triples-v8-logo 4.2s ease-in-out infinite!important;
}
@keyframes triples-v8-logo{0%,100%{transform:translate3d(0,7px,0)}50%{transform:translate3d(0,-11px,0)}}
@keyframes triples-v8-halo{from{opacity:.38;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1.13)}}
/* JS Web Animations API controls actual stagger. Avoid CSS animation overrides clashing with it. */
.site-public #lineups.lineups-switch,
.site-public #lineups.lineups-switch .lineup-panel,
.site-public #lineups.lineups-switch .leader-card,
.site-public #lineups.lineups-switch .member-card{animation:none!important}
/* Explicit effect requested for this site: keep the visible float regardless of OS decorative-motion setting. */
@media(max-width:1150px){
 .site-public .directory-layout>.directory-main{width:calc(100% - 455px)!important}
 .site-public .directory-layout>#music-dock{width:200px!important;max-width:200px!important;right:11px!important}
 .site-public .directory-main .member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-public .directory-main .leader-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
 .site-public .directory-layout{display:flex!important;flex-direction:column!important;align-items:center;gap:0!important;padding:0 12px!important}
 .site-public .directory-layout>.directory-main{width:100%!important;max-width:850px!important;padding:16px 0 22px!important}
 .site-public .directory-layout>#music-dock{position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;margin:16px auto 22px!important;width:208px!important;align-self:center!important}
}
@media(max-width:560px){
 .site-public .directory-layout>.directory-main{max-width:100%!important}
 .site-public .directory-main .member-grid,.site-public .directory-main .leader-grid{grid-template-columns:1fr}
}