/* Aslan X. Shi — home page: the Featured Work Stage in the classical section (from design concept 2). */
.cx{--lead:max(calc(var(--gl) + 12px),calc((100% - 1320px) / 2 + var(--gl) + 12px));--band:calc(100svh - 61px)}
@media (max-width:600px){.cx{--lead:var(--gl)}}
.cx .intro{margin-bottom:clamp(40px,5vw,72px)}
.cx-panel[hidden]{display:none!important}

/* ---------- shared: the action set of a work ---------- */
.cx-act{display:inline-flex;align-items:center;gap:12px;flex:none;border-radius:999px;color:var(--ink-2)}
.cx-act .ib{flex:none}
.cx-act:hover .ib,.cx-act:focus-visible .ib{border-color:var(--ink);color:var(--ink)}
.cx-act.off{opacity:.3;cursor:default}
.cx-al{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:11px;line-height:1.3;color:var(--muted);transition:color .3s}
.cx-act:hover .cx-al,.cx-act:focus-visible .cx-al{color:var(--ink)}
.cxw .player{margin:0;max-width:none;min-width:0}
.cxw.playing .js-play{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cxw.playing .js-play[aria-pressed="false"]{background:transparent;color:var(--ink);border-color:var(--ink)}

/* controls on a band: round arrows and a pill */
.cx-ctl{display:flex;align-items:center;gap:10px}
.cx-arrow{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);background:rgba(17,16,15,.55);transition:color .3s,border-color .3s}
.cx-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.cx-arrow:hover,.cx-arrow:focus-visible{color:var(--ink);border-color:var(--ink)}
.cx-pill{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(17,16,15,.7);
  font-family:var(--cond);font-weight:300;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);transition:color .3s,border-color .3s}
.cx-pill:hover,.cx-pill:focus-visible{color:var(--ink);border-color:var(--ink)}
.cx-pill .ico{width:9px;height:11px;display:inline-flex;justify-content:space-between}
/* =====================================================================================
   2 · FEATURED WORK STAGE — one work set very large over a live drawing of its form
   (lines swell with the music while it plays); prev/next steps; a compact index follows.
   ===================================================================================== */
.stg{position:relative;min-height:var(--band);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--lead);overflow:hidden;
  background:radial-gradient(90% 70% at 72% 32%,#201e1b 0,#141311 62%,#11100f 100%);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);touch-action:pan-y}
.stg-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.stg-lbl{position:absolute;z-index:1;left:var(--lead);top:clamp(32px,5vh,56px);margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(28px,4.2vw,54px);line-height:1.05;color:var(--ink)}
.stg-count{min-width:64px;text-align:center;font-family:var(--cond);font-weight:300;font-size:12px;letter-spacing:.22em;color:var(--muted);font-variant-numeric:tabular-nums}
.stg-count b{font-weight:400;color:var(--ink)}
.stg-slides{position:relative;z-index:1;display:grid;padding:calc(var(--band) * .42) 0 clamp(32px,6vh,64px)}
.stg-slide{grid-area:1/1;align-self:end;min-width:0;opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s}
.stg-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s ease .15s,transform 1s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.stg-kick{margin:0 0 14px;display:flex;gap:18px;font-family:var(--cond);font-weight:300;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.stg-kick span+span::before{content:"";display:inline-block;width:22px;height:1px;background:var(--line-3);vertical-align:middle;margin-right:18px}
.stg-title{margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;font-size:clamp(46px,8vw,146px);line-height:.92;letter-spacing:.035em;text-wrap:balance;color:var(--ink)}
@media (min-width:1100px){
  .stg-slide{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);column-gap:clamp(32px,5vw,88px);align-items:end}
  .stg-side{padding-bottom:6px}
  .stg-prem{margin-top:0}
}
.stg-forces{margin:16px 0 0;font-style:italic;font-size:clamp(20px,1.9vw,27px);color:var(--ink-2)}
.stg-prem{margin:14px 0 0;display:grid;gap:4px;max-width:46rem}
.stg-prem > div{display:flex;flex-wrap:wrap;gap:0 14px;align-items:baseline}
.stg-prem dt{font-family:var(--cond);font-weight:300;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);min-width:7.5em}
.stg-prem dd{margin:0;font-family:var(--sc);letter-spacing:.05em;color:var(--ink-2);font-size:1.02rem}
.stg-prem dd span{font-family:var(--serif);font-style:italic;letter-spacing:0;color:var(--muted);margin-left:10px}
.stg-play{display:flex;align-items:center;gap:16px;margin-top:clamp(20px,3vh,30px);max-width:620px}
.stg-play .js-play{width:58px;height:58px}
.stg-play .js-play svg{width:20px;height:20px}
.stg-listen{font-family:var(--cond);font-weight:300;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.stg-slide.playing .stg-listen{display:none}
.stg-play .player{flex:1}
.stg-acts{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:18px}
.stg-acts .ib{width:38px;height:38px}
.stg-acts .ib svg{width:16px;height:16px}
/* index under the stage */
.stg-idx{padding-top:clamp(40px,5vw,64px)}
@media (max-width:600px){
  .stg-lbl{top:30px}
  .stg-slides{padding-top:calc(var(--band) * .3)}
  .stg-acts{gap:10px 18px}
}
@media (prefers-reduced-motion:reduce){.stg-slide,.stg-slide.is-on{transition:none;transform:none}}

/* the works list under the stage is its index */
.stg-idx{padding-top:clamp(36px,4.5vw,60px)}
.work button.tt{display:block;text-align:left;cursor:pointer;min-width:0;flex:1;padding:2px 0}
.work button.tt b{transition:color .3s}
.work button.tt:hover b{color:#fff}
.stg-row[aria-current="true"] .tt b{color:#fff}
.stg-row[aria-current="true"] .tt b::after{content:"On stage";margin-left:12px;font-family:var(--cond);font-size:10px;letter-spacing:.24em;color:var(--muted);vertical-align:2px}

.stg-credit{margin:10px 0 0;font-family:var(--sc);letter-spacing:.05em;font-size:clamp(15px,1.2vw,18px);color:var(--muted)}

/* ---- classical page (2026-11-03) ---- */
/* a recording on a page elsewhere (SoundCloud…): a labelled link in Play's place */
.stg-ext .ib{width:58px;height:58px}
.stg-ext .ib svg{width:22px;height:22px}
.stg-ext:hover .cx-al,.stg-ext:focus-visible .cx-al{color:var(--ink)}
/* the performance heard in the recording: one quiet line under the player */
.stg-rec{margin:12px 0 0;max-width:620px;white-space:nowrap;overflow:hidden;font-family:var(--sc);letter-spacing:.05em;font-size:.98rem;color:var(--muted);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
/* a one-page score sample only: Request blurred */
.cx-act.soft{cursor:default}
.cx-act.soft .ib{filter:blur(1.5px);opacity:.45}
.cx-act.soft .cx-al{opacity:.75}

/* ---- composer's edits (2026-11-04) ---- */
/* the arrows a little above the stage's bottom edge */
.stg-slides{padding-bottom:clamp(24px,4vh,44px)}
.stg-nav{padding-bottom:clamp(30px,5vh,52px)}
/* the hint between the stage and the Featured list; the whole list, no scroll box */
.stg-idx .stg-note{margin:0 0 clamp(22px,2.6vw,34px)}
.featured-list .works-head{padding:0 0 12px;border-bottom:1px solid var(--line-2)}

/* ---- the stage, compact (2026-11-05) ---- */
/* the drawing is a band right under the stage's title (--gfx tall); the work's title and details, its performance,
   Play with its bar and the score buttons follow straight under the drawing, both columns from the top */
.stg{--lblh:clamp(92px,11vh,124px);--gfx:clamp(220px,32svh,380px);min-height:0;justify-content:flex-start}
.stg-cv{inset:auto;top:var(--lblh);left:0;width:100%;height:var(--gfx)}
.stg-slides{padding-top:calc(var(--lblh) + var(--gfx) + clamp(14px,2vh,24px))}
.stg-slide{align-self:start}   /* a shorter work's details start under the drawing too (the slides share one cell) */
/* the stage is as tall as the work on it: the others wait out of the flow (in the same place), so the arrows follow
   right under its details */
.stg-slide:not(.is-on){position:absolute;left:0;right:0;top:calc(var(--lblh) + var(--gfx) + clamp(14px,2vh,24px))}
@media (min-width:1100px){.stg-slide{align-items:start}.stg-side{padding-top:clamp(28px,3.4vw,46px)}}
@media (max-width:600px){.stg{--lblh:84px;--gfx:clamp(170px,26svh,240px)}.stg-slides{padding-top:calc(var(--lblh) + var(--gfx) + 12px)}
  .stg-slide:not(.is-on){top:calc(var(--lblh) + var(--gfx) + 12px)}}
/* Play and its bar on a row of their own, right under the drawing, across the whole stage */
.stg-slide > .stg-play{grid-column:1/-1;margin:0 0 clamp(20px,3vh,34px)}
@media (min-width:1100px){.stg-side{padding-top:clamp(28px,3.4vw,46px)}}