/* Igor Andrić — music (on the homepage 27 Sep, from exploration K, size L).
   The categories sit on the left, on the site's text axis, and ARE the heading of the section — no eyebrow,
   exactly like Upcoming / Past in Events (the real <h2> is for screen readers and search engines). The chosen
   one carries the site's dot. Eight works to a page, then the Events pagination; dashed rules as in Events.
   A work that plays opens a staff in its own row; the playhead runs along it (no notes since 1 Oct). The player then
   stays on the bottom of the screen wherever the visitor scrolls; its progress is a staff too, the dot runs
   along it, and the warm light under it breathes with the music.
   Tokens and fonts come from site.css; the pagination and the arrows from events.css and arrows.css.

   Responsive (5 Oct, Lazar: one section at a time, down to 385px, everything in rem and fluid).
   Type is only the .text-* classes and the --fs tokens, so it is already fluid rem. Every length here is rem too
   (1rem = 16px, so 1440 stays pixel-identical); only the strokes stay in px — the 1px hairlines and rings, the 3px
   barlines — and the blur of the light. Three layouts, by the width of the screen, on the same steps as Events:
     ≥ 1024px  the locked one: the categories sticky on the left, the works on the right, the player in one line
     < 1024px  the categories stand above the works as the heading; the player breaks into two lines
     < 576px   each work: the title with its length and ring on one line, what the work is under it, full width */

/* the air above and under the section shrinks with the screen, 385 → 1440, and stops at the desktop numbers */
.mus{position:relative;z-index:1;padding:calc(var(--nav-h) + var(--mus-top)) var(--gut) var(--mus-bottom);
  --mus-top:clamp(2.5rem, 1.771rem + 3.034vw, 4.5rem);      /* 40 → 72px */
  --mus-bottom:clamp(5rem, 3.632rem + 5.688vw, 8.75rem)}    /* 80 → 140px */
:where(.mus) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.mus button:focus{outline:none}
.mus button:focus-visible{outline:1px solid var(--mute);outline-offset:.375rem}
.mus-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mus-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(2rem, 5vw, 6rem);align-items:start}
.mus-grid[data-size="xl"]{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mus-side{position:sticky;top:calc(var(--nav-h) + 2.5rem)}

/* ---------------------------------------------------------------- the categories
   Their geometry is the 1440 one (the dot 11px, the words 30px after it) held in em of the categories' own size
   (--k is that size at 1440), so it shrinks with the type as the Events switch does; the dot never gets smaller
   than the pager's (8px). */
.mus-cats{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  font-size:var(--fs-h4);--k:52;--p:calc(30em / var(--k));padding-left:var(--p)}
.mus-grid[data-size="xl"] .mus-cats{font-size:var(--fs-h3);--k:76}
.mus-cat{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink);opacity:.26;text-align:left;padding:.25rem 0;
  transition:opacity .3s ease}
.mus-cat[aria-selected="true"]{opacity:1}
.mus-dot{--d:max(.5rem, calc(11em / var(--k)));
  position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--ink);
  transform:translateY(calc(var(--y,0px) - var(--d) / 2));transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* ---------------------------------------------------------------- the works */
.mus-list{border-top:1px dashed rgba(242,237,230,.24);transition:opacity .22s ease,transform .22s ease}
.mus-list.is-out{opacity:0;transform:translateY(.375rem)}
.mus-w{border-bottom:1px dashed rgba(242,237,230,.24)}
.mus-row{display:grid;grid-template-columns:minmax(0,1fr) auto 2.75rem;grid-template-areas:"t len play" "m len play";
  column-gap:1.75rem;align-items:center;width:100%;padding:1.5rem 0 1.375rem;text-align:left}
.mus-t{grid-area:t;font-weight:var(--fw-semi);color:var(--ink);transition:opacity .3s ease}
.mus-m{grid-area:m;margin-top:.375rem;font-size:var(--fs-body);line-height:var(--lh-body-s);color:var(--mute)}
.mus-len{grid-area:len;font-size:var(--fs-body);color:var(--ink);font-variant-numeric:tabular-nums}
/* a work without a recording yet: listed, not playable; "Coming soon" stands where the length would be */
.is-soon .mus-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t len" "m len";cursor:default}
.is-soon .mus-len{color:var(--mute)}
.mus .ev-pages{margin-top:2rem}

/* the play ring: the cursor's ring; it shows on hover and stays on the work that plays */
.mus-play{grid-area:play;position:relative;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(242,237,230,.55);
  opacity:0;transition:opacity .3s ease,border-color .25s ease,background-color .25s ease}
.mus-w.is-playing .mus-play{opacity:1}
/* the hover looks belong to a real pointer: on a phone they would stay stuck after a tap. Specificity is kept as it
   was (:where), so the roll's own hover in site.css (.mus-cat.roll:hover, full ink) still wins on desktop */
@media (hover:hover){
  .mus-cat:hover:not(:where([aria-selected="true"])){opacity:.6}
  .mus-row:hover .mus-t{opacity:.72}
  .is-soon .mus-row:hover .mus-t{opacity:1}
  .mus-row:hover .mus-play{opacity:1}
}
/* a finger has no hover, so the ring the cursor brings on desktop stands on every work that plays */
@media (hover:none){
  .mus-w:not(.is-soon) .mus-play{opacity:1}
}
.mus-play::before,.pl-play::before{content:'';position:absolute;left:50%;top:50%;margin:-.375rem 0 0 -.1875rem;
  border-left:.625rem solid var(--ink);border-top:.375rem solid transparent;border-bottom:.375rem solid transparent}
.mus-w.is-playing:not(.is-paused) .mus-play::before,.pl-play.is-on::before{margin:-.375rem 0 0 -.3125rem;width:.1875rem;height:.75rem;border:0;
  background:var(--ink);box-shadow:.375rem 0 0 var(--ink)}

/* ---------------------------------------------------------------- the staff inside the row that plays
   Five hairlines and the 3px barline, all exactly 49px tall; the part already played is drawn in ink, and the
   playhead is exactly the height of the staff (Lazar, 27 Sep: nothing sticks out above or below). */
.rs-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.8,.2,1)}
.is-playing .rs-wrap{grid-template-rows:1fr}
.rs-in{overflow:hidden}
/* pan-y: a finger that drags along the staff moves the dot, one that swipes up or down still scrolls the page */
.rs{position:relative;height:5.75rem;margin-bottom:.875rem;touch-action:pan-y}
.rs-lines,.rs-done{position:absolute;left:0;top:1.375rem;height:3.0625rem;
  background:repeating-linear-gradient(to bottom,var(--c) 0 1px,transparent 1px .75rem)}
.rs-lines{--c:rgba(242,237,230,.18);right:0}
.rs-done{--c:rgba(242,237,230,.6);width:var(--x,0px)}
/* a barline at each end: the staff stops where the recording does (Lazar, 1 Oct: a clear end, no fade) */
.rs-lines::before,.rs-lines::after{content:'';position:absolute;left:0;top:0;width:3px;height:3.0625rem;background:rgba(242,237,230,.3)}
.rs-lines::after{left:auto;right:0}
.rs-head{position:absolute;top:1.375rem;left:var(--x,0px);width:1px;height:3.0625rem;background:var(--ink)}
/* the site's dot on the middle line, as on the player's staff; it can be taken and moved */
.rs-head::after{content:'';position:absolute;left:-.3125rem;top:1.1875rem;width:.6875rem;height:.6875rem;border-radius:50%;background:var(--ink);
  transition:transform .25s ease}
.rs:hover .rs-head::after,.rs.is-scrub .rs-head::after{transform:scale(1.35)}

/* ---------------------------------------------------------------- the light: behind the page
   never narrower than 26rem: on a phone 64vw would stand it up as a column instead of a pool */
.pl-pool{position:fixed;left:0;bottom:-42vh;width:max(64vw, 26rem);height:78vh;z-index:0;pointer-events:none;border-radius:50%;
  transform:translateX(calc(var(--px,0px) - 50%)) scale(calc(1 + var(--pulse,0) * .08));
  opacity:calc(var(--on,0) * (.72 + var(--pulse,0) * .28));transition:opacity 1.2s ease;
  background:radial-gradient(closest-side,rgba(108,61,31,1),rgba(108,61,31,.5) 45%,rgba(108,61,31,0));filter:blur(60px)}

/* ---------------------------------------------------------------- the sticky player */
.pl{position:fixed;left:0;right:0;bottom:0;z-index:150;padding:1.875rem var(--gut) 1.625rem;
  background:linear-gradient(to top,var(--bg) 58%,rgba(26,21,19,0));
  transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pl.is-up{transform:none}
.pl button{font:inherit;color:inherit;background-color:transparent;padding:0;cursor:pointer}
.pl button:focus{outline:none}
.pl button:focus-visible{outline:1px solid var(--mute);outline-offset:.25rem}
.pl-in{display:grid;grid-template-columns:2.75rem minmax(0,22rem) minmax(0,1fr) auto 2.75rem;column-gap:1.5rem;align-items:center}
.pl-play,.pl-close{position:relative;width:2.75rem;height:2.75rem;border-radius:50%;
  transition:color .25s ease,background-color .25s ease,border-color .25s ease}
.pl-play{border:1px solid rgba(242,237,230,.55)}
.pl-play:hover{border-color:var(--ink);background-color:rgba(242,237,230,.08)}
.pl-t{font-weight:var(--fw-semi);font-size:var(--fs-h6);line-height:var(--lh-h6);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-s{font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the progress: the same staff as in the row, 25px tall; played lines in ink, the dot on the playhead */
.pl-staff{position:relative;height:1.5625rem;touch-action:pan-y}
/* the staff is also the seek bar: the dot can be taken anywhere along it; the hit area reaches past the lines */
.pl-staff::after{content:'';position:absolute;left:-.5rem;right:-.5rem;top:-.625rem;bottom:-.625rem}
.pl-staff:focus{outline:none}
.pl-staff:focus-visible{outline:1px solid var(--mute);outline-offset:.75rem}
.pl-lines,.pl-done{position:absolute;left:0;top:0;height:1.5625rem;
  background:repeating-linear-gradient(to bottom,var(--c) 0 1px,transparent 1px .375rem)}
.pl-lines{--c:rgba(242,237,230,.18);right:0}
.pl-done{--c:rgba(242,237,230,.6);width:var(--p,0%)}
.pl-lines::before,.pl-lines::after{content:'';position:absolute;left:0;top:0;width:3px;height:1.5625rem;background:rgba(242,237,230,.3)}
.pl-lines::after{left:auto;right:0}
.pl-head{position:absolute;top:0;left:var(--p,0%);width:1px;height:1.5625rem;background:var(--ink)}
.pl-head::after{content:'';position:absolute;left:-.3125rem;top:.4375rem;width:.6875rem;height:.6875rem;border-radius:50%;background:var(--ink);
  transition:transform .25s ease}
.pl-staff:hover .pl-head::after,.pl-staff.is-scrub .pl-head::after{transform:scale(1.35)}
.pl-time{font-weight:var(--fw-semi);font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--mute);font-variant-numeric:tabular-nums}
/* the recording is still arriving (Dropbox): the dot breathes until the sound starts */
.pl.is-wait .pl-head::after{animation:plWait 1s ease-in-out infinite alternate}
@keyframes plWait{to{opacity:.25}}
/* close: an icon, drawn like the arrows — two 1px strokes in the same ring as play, quieter */
.pl-close{border:1px solid rgba(242,237,230,.3);color:var(--mute)}
.pl-close i,.pl-close i::before{position:absolute;left:50%;top:50%;width:1.125rem;height:1px;margin-left:-.5625rem;background:currentColor;transform:rotate(45deg)}
.pl-close i::before{content:'';left:0;top:0;margin:0;transform:rotate(90deg)}
.pl-close:hover{color:var(--ink);border-color:var(--ink);background-color:rgba(242,237,230,.08)}

@media (prefers-reduced-motion:reduce){
  .rs-wrap,.mus-list,.mus-dot,.pl{transition:none}
}

/* ---------------------------------------------------------------- < 1024px: the categories become the heading
   Beside the works ORCHESTRA at H3 runs into the list under ~1100px (at 960 it needs 370px of a 346px column), so
   below 1024 the categories stand above the works: still a column, still with the dot, no longer sticky.
   The player loses the room for one line (at 768 its staff would be 100px), so it breaks into two: play, the work
   and close on the first, the staff and the clock under them — the staff as wide as the screen allows. Solid ground
   behind both lines (the fade is only the air above), and room for the phone's home bar. */
@media (max-width:63.99em){
  .mus-grid,.mus-grid[data-size="xl"]{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-10)}
  .mus-side{position:static}

  .pl{padding:var(--sp-6) var(--gut) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--bg) calc(100% - var(--sp-6)),rgba(26,21,19,0))}
  .pl-in{grid-template-columns:2.75rem minmax(0,1fr) auto 2.75rem;grid-template-areas:"play info info close" "staff staff time time";
    column-gap:var(--sp-4);row-gap:var(--sp-4)}
  .pl-play{grid-area:play}
  .pl-info{grid-area:info}
  .pl-close{grid-area:close}
  .pl-staff{grid-area:staff}
  .pl-time{grid-area:time;justify-self:end}
}

/* ---------------------------------------------------------------- < 576px: the work in two lines
   The title has the whole line except the length and the ring (beside them it broke into three lines at 385);
   what the work is runs under it, full width. The whole row is the button, so the ring is only a sign here and can
   be smaller than the 44px target: 32px, the height of the title's line. */
@media (max-width:35.99em){
  .mus-row{grid-template-columns:minmax(0,1fr) auto 2rem;grid-template-areas:"t len play" "m m m";column-gap:var(--sp-4)}
  .is-soon .mus-row{grid-template-areas:"t len" "m m"}
  .mus-play{width:2rem;height:2rem}
}

/* ---------------------------------------------------------------- the categories below 1024: three ideas (5 Oct)
   Lazar: "a nicer navigation in Music — Chamber, Solo and the rest". The column of four big grey words took 200px of a
   phone before the first work. Three ways, on the homepage: ?mn=1 · 2 · 3, ?mn=0 the column as it was; keys 0–3
   switch them live. Only below 1024 — the desktop column is locked and none of them touches it. After the pick the
   others go. */
.mus-now{display:none}
@media (max-width:63.99em){
  /* 1 · Klizač — the four words keep their desktop size and stand in one line that runs off the screen and slides
     sideways under the finger: the word cut by the edge says there is more. A tapped word slides to where the first
     one stands, the dot before it. The strip reaches both edges of the screen and fades in the margins. */
  [data-nav="1"] .mus-cats{flex-direction:row;gap:.8em;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:calc(var(--gut) + var(--p)) var(--gut);
    -webkit-mask:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent);
            mask:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent)}
  [data-nav="1"] .mus-cats::-webkit-scrollbar{display:none}
  [data-nav="1"] .mus-cat{flex:0 0 auto;white-space:nowrap}

  /* 2 · Naslov — the chosen category alone is the heading, at its desktop size; under it the four in the nav type
     with the pager's dot, as the pages under Events: one strong word, one quiet line (Lazar's rhythm). Everything is
     in sight, one tap away. */
  [data-nav="2"] .mus-now{display:block;max-width:none;font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink);
    transition:opacity .22s ease}
  [data-nav="2"] .mus-now.is-out{opacity:0}
  [data-nav="2"] .mus-cats{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);
    margin-top:var(--sp-4);--p:1rem}
  [data-nav="2"] .mus-cat{position:relative;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:.012em;
    padding:0;opacity:.3}
  [data-nav="2"] .mus-cat[aria-selected="true"]{opacity:1}
  [data-nav="2"] .mus-dot{--d:.5rem}

  /* 3 · Spisak — the column folded to the chosen word, with a ring that opens it: the other three drop in under it
     at the size and grey of the desktop column, a tap on one plays its list and folds it again. */
  [data-nav="3"] .mus-cat[aria-selected="true"]{order:-1}
  [data-nav="3"] .mus-cats:not(.is-open) .mus-cat:not([aria-selected="true"]){display:none}
  [data-nav="3"] .mus-cats.is-open .mus-cat:not([aria-selected="true"]){animation:musDrop .45s cubic-bezier(.2,.8,.2,1) both}
  [data-nav="3"] .mus-cat[aria-selected="true"]::after{content:'';display:inline-block;width:2rem;height:2rem;margin-left:.3em;
    vertical-align:-.05em;border:1px solid rgba(242,237,230,.55);border-radius:50%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23F2EDE6' stroke-width='1'/%3E%3C/svg%3E") 50% 55%/.75rem no-repeat;
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  [data-nav="3"] .mus-cats.is-open .mus-cat[aria-selected="true"]::after{transform:rotate(180deg)}

  /* the dot goes sideways in 1 and 2: before the chosen word, as before the first */
  :is([data-nav="1"],[data-nav="2"]) .mus-dot{transform:translate(calc(var(--x,0px) - var(--p)),calc(var(--y,0px) - var(--d) / 2))}
}
/* a finger needs more than the 26px line of the nav type: the hit area grows, the line does not */
@media (max-width:63.99em) and (pointer:coarse){
  [data-nav="2"] .mus-cat::before{content:'';position:absolute;inset:-.625rem -.75rem}
}
@media (max-width:35.99em){
  [data-nav="2"] .mus-cat{font-size:var(--fs-body-s);line-height:var(--lh-body-s)}
}
@keyframes musDrop{from{opacity:0;transform:translateY(-.3em)}}
@media (prefers-reduced-motion:reduce){
  .mus-now,[data-nav="3"] .mus-cat::after{transition:none}
  [data-nav="3"] .mus-cats.is-open .mus-cat{animation:none}
}