/* ============================================================
   The Brown Print — music page
   Shared components (hero, tiles, dialogs, CTA) live in css/site.css.
   ============================================================ */
.hero-media img{filter:grayscale(.35) contrast(1.1) brightness(.55)}

/* ============ FEATURED SESSIONS ============ */
.players{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.players .feat{grid-column:1/-1}
.player{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--c-raised);box-shadow:var(--shadow-float)}
.player video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-surface)}
.player.feat video{aspect-ratio:21/9}
.player .ptag{position:absolute;left:clamp(16px,2.4vw,30px);top:clamp(14px,2vw,24px);z-index:2;pointer-events:none;text-shadow:0 2px 30px rgb(0 0 0/.85)}
.player .ptag .t{font:500 var(--fs-h4)/1.1 var(--f-voice);letter-spacing:var(--tr-voice)}
.player .ptag em{font-style:italic;color:var(--c-accent)}
.player .ptag .s{margin-top:var(--sp-1);color:var(--c-text-2)}
.fnote{margin-top:var(--sp-4)}
@media(max-width:767px){.players{grid-template-columns:1fr}}

/* ============ VIDEO MODAL ============ */
.vmodal[open]{display:grid;place-items:center}
.vmodal .stage{width:min(1200px,92vw)}
.vmodal .player{box-shadow:var(--shadow-modal)}
.vm-title{margin-top:var(--sp-4);text-align:center;color:var(--c-text-2)}
.vm-title b{color:var(--c-text);font-weight:700}
.vmodal .x{position:fixed;top:max(24px,env(safe-area-inset-top));right:var(--page-margin);z-index:1}

/* ============ ALBUM SHOOTS & BTS ============ */
.bts-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,15vw,210px);grid-auto-flow:dense;gap:var(--grid-gap)}
.btile.w2{grid-column:span 2}
.btile.h2{grid-row:span 2}
@media(max-width:1023px){.bts-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ SELECTED WORK (tracklist) ============ */
.tracklist{border-top:1px solid var(--c-line)}
.track-row{position:relative;display:grid;grid-template-columns:3em 1fr auto auto;align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(20px,3vw,32px) 4px;border-bottom:1px solid var(--c-line);cursor:pointer;transition:transform var(--dur-ui) var(--ease)}
.track-row:hover{transform:translateX(14px)}
.track-row .t{min-width:0}
.track-row .name{font:500 var(--fs-h4)/1.15 var(--f-voice);letter-spacing:var(--tr-voice);transition:color var(--dur-fast) var(--ease)}
.track-row:hover .name{color:var(--c-accent)}
.track-row .artist{margin-top:var(--sp-1)}
.track-row .kind{border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:6px 12px;white-space:nowrap}
.track-row .dur{color:var(--c-text-2)}
.track-row .thumb{position:absolute;right:clamp(90px,12vw,180px);top:50%;z-index:2;width:clamp(120px,14vw,190px);aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-md);box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transform:translateY(-50%) scale(.92);
  transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)}
.track-row:hover .thumb{opacity:1;transform:translateY(-50%) scale(1)}
@media(max-width:767px){
  .track-row{grid-template-columns:3em 1fr auto}
  .track-row .kind,.track-row .thumb{display:none}
}