/* Pylon artist pavilions: each lineup card opens a fullscreen panel with
   that artist's work from the launch, through a circular wipe from the
   click point. Same interaction grammar as the TRT and U-Hub spaces. */
.artist{ cursor:pointer; outline:none }
.artist .a-enter{ position:absolute; right:14px; top:14px; z-index:3; width:30px; height:30px; border:1px solid rgba(232,236,246,.28); display:grid; place-items:center; opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease, background .35s ease }
.artist .a-enter::after{ content:''; width:9px; height:9px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); margin-left:-3px }
.artist:hover .a-enter,.artist:focus-visible .a-enter{ opacity:1; transform:translateY(0) }
.artist:hover .a-enter{ background:var(--accent); border-color:var(--accent); color:#050407 }

.pav-scrim{ position:fixed; inset:0; z-index:2090; background:rgba(5,4,7,.82); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s }
.pav-scrim.is-on{ opacity:1; visibility:visible; transition:opacity .5s ease }
.pavilion:not(.is-live){ display:none }
.pavilion{ position:fixed; inset:0; z-index:2100; background:#050407; color:var(--ink);
  clip-path:circle(0px at var(--ox,50%) var(--oy,50%)); transition:clip-path 1s cubic-bezier(.66,0,.24,1);
  display:grid; grid-template-columns:minmax(280px,30%) 1fr }
.pavilion.is-open{ clip-path:circle(150% at var(--ox,50%) var(--oy,50%)) }
.pav-copy{ padding:clamp(28px,4vw,72px); display:flex; flex-direction:column; gap:16px; justify-content:center; border-right:1px solid var(--ink-faint) }
.pav-k{ font-family:'Outfit',system-ui,sans-serif; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent) }
.pav-t{ font-family:'PP Monument Extended',system-ui,sans-serif; font-weight:900; font-size:clamp(22px,2.4vw,38px); line-height:1.08; margin:0 }
.pav-copy p{ font-family:'Outfit',system-ui,sans-serif; font-size:14.5px; line-height:1.72; color:var(--ink-soft); margin:0; max-width:40ch }
.pav-role{ font-family:'Outfit',system-ui,sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); align-self:flex-start; border:1px solid var(--ink-faint); padding:7px 11px }
.pav-exit{ align-self:flex-start; margin-top:12px; background:transparent; border:1px solid var(--ink-faint); color:var(--ink); font-family:'Outfit',system-ui,sans-serif; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; padding:13px 22px; cursor:pointer; transition:background .3s ease, border-color .3s ease, color .3s ease }
.pav-exit:hover{ background:var(--accent); border-color:var(--accent); color:#050407 }
.pav-shots{ display:grid; gap:1px; background:var(--ink-faint); overflow:hidden }
.pav-shots.n1{ grid-template-columns:1fr }
.pav-shots.n2{ grid-template-columns:1fr; grid-template-rows:1fr 1fr }
.pav-shots.n3{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr }
.pav-shots.n3 > :first-child{ grid-row:1 / -1 }
.pav-shots.n4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr }
.pav-shots figure{ position:relative; margin:0; overflow:hidden; background:#050407 }
.pav-shots img{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:900px){
  .pavilion{ grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto }
  .pav-copy{ border-right:0; border-bottom:1px solid var(--ink-faint) }
  .pav-shots.n3,.pav-shots.n4{ grid-template-columns:1fr; grid-template-rows:none }
  .pav-shots.n3 > :first-child{ grid-row:auto }
  .pav-shots figure{ aspect-ratio:16/10 }
}
html.pav-open{ overflow:hidden }

/* ── recordings from the three days ───────────────────────────────── */
.recs{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,22px); margin-top:clamp(40px,5vw,72px) }
.rec{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#050407; border:1px solid var(--ink-faint); cursor:pointer; outline:none; transition:border-color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1) }
.rec:hover,.rec:focus-visible{ border-color:var(--ink-soft); transform:translateY(-3px) }
.rec img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:.82; transition:opacity .4s ease, transform 1.2s cubic-bezier(.2,.7,.2,1) }
.rec:hover img{ opacity:1; transform:scale(1.03) }
.rec::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(5,4,7,.9),transparent 46%) }
.rec-play{ position:absolute; left:50%; top:44%; width:clamp(46px,4.2vw,68px); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(232,236,246,.5); border-radius:50%; background:rgba(5,4,7,.32); backdrop-filter:blur(6px); z-index:2; transition:background .35s ease, border-color .35s ease, transform .35s ease }
.rec-play::after{ content:''; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%); border-left:clamp(11px,1vw,15px) solid var(--ink-bright); border-top:clamp(7px,.7vw,10px) solid transparent; border-bottom:clamp(7px,.7vw,10px) solid transparent }
.rec:hover .rec-play{ background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.06) }
.rec:hover .rec-play::after{ border-left-color:#050407 }
.rec-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(14px,1.6vw,22px); display:flex; flex-direction:column; gap:6px }
.rec-k{ font-family:'Outfit',system-ui,sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent) }
.rec-n{ font-family:'Outfit',system-ui,sans-serif; font-size:clamp(15px,1.3vw,19px); color:var(--ink-bright); line-height:1.2 }
.rec-n small{ display:block; font-size:12px; color:var(--ink-soft); margin-top:5px; letter-spacing:.01em }
.rec iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4 }
.rec.is-live::after,.rec.is-live .rec-meta,.rec.is-live .rec-play{ display:none }
@media (max-width:820px){ .recs{ grid-template-columns:1fr } }