/* Igor Andrić — the album "Spiritual Journey" (on the homepage 6 Oct, from the album exploration, round 2 "F · Disk +
   program"). Built by album.js from IA.album (content.js).
   Two halves on Music's air: the reading on the left (title, the programme, the performers once); on the right,
   standing in the middle of the screen while the programme is read, the sleeve with the disc rolling out of it and the
   two doors to the whole album. Hierarchy, strongest first: the cover · the title (H3) · the two buttons · the works
   (H6) · the movements under a work (body-l, one step down: they belong to it) · everything else quiet (body-s, mute).
   The rows that play, their staff and the bar come from music.css (the same component as a work in Music); tokens,
   type and the arrow from site.css and arrows.css. Every length is rem or a token; only hairlines stay in px. */

/* ---------------------------------------------------------------- the section: Music's air above and below */
.alb{position:relative;z-index:1;padding:calc(var(--nav-h) + var(--alb-top)) var(--gut) var(--alb-bottom);
  --alb-top:clamp(2.5rem, 1.771rem + 3.034vw, 4.5rem);      /* 40 → 72px */
  --alb-bottom:clamp(5rem, 3.632rem + 5.688vw, 8.75rem)}    /* 80 → 140px */
:where(.alb) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.alb button:focus,.alb a:focus{outline:none}
.alb button:focus-visible,.alb a:focus-visible{outline:1px solid var(--mute);outline-offset:.375rem}

.al-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem, 5vw, 6rem);align-items:start}

/* ---------------------------------------------------------------- the reading */
/* trim-start: the top of the capitals, not of the line box, is where the column starts */
.al-title{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink);text-box:trim-start cap alphabetic}
.al-title span{display:block}

/* ---------------------------------------------------------------- the sleeve and the disc
   The sleeve stands in front; the disc, a little smaller, waits fully behind it and comes out to the right by half its
   width (--out, 0–1, from album.js) while its print turns (rotate, from album.js). The print is the cover's sea without
   the title; the clear hub and the hole are drawn, so the page shows through the middle. */
.al-side{position:sticky;--s:min(27vw, calc(100svh - var(--nav-h) - 16rem), 30rem);
  top:calc(var(--nav-h) + (100svh - var(--nav-h) - var(--s) - var(--sp-10) - 3.5rem) / 2);
  width:calc(var(--s) * 1.52);justify-self:center}
.al-obj{position:relative;width:100%;height:var(--s)}
.al-cover{position:absolute;left:0;top:0;z-index:2;width:var(--s);aspect-ratio:1 / 1;margin:0;overflow:hidden;background:#c8d9e3;
  box-shadow:1.25rem 0 2.5rem -.75rem rgba(0,0,0,.6)}
.al-cover img{width:100%;height:100%;object-fit:cover}
.al-disc{position:absolute;left:calc(var(--s) * .03);top:calc(var(--s) * .03);z-index:1;width:calc(var(--s) * .94);aspect-ratio:1 / 1;
  border-radius:50%;translate:calc(var(--out, 0) * var(--s) * .52) 0;filter:drop-shadow(0 1.25rem 2rem rgba(0,0,0,.5))}
.al-print,.al-hub,.al-sheen{position:absolute;inset:0;border-radius:50%}
/* the print stops where the clear hub starts (42% of the radius) */
.al-print,.al-sheen{-webkit-mask:radial-gradient(closest-side,transparent 42%,#000 calc(42% + 1px));
                            mask:radial-gradient(closest-side,transparent 42%,#000 calc(42% + 1px))}
.al-print{background:center / cover no-repeat}
/* the hub: clear plastic with its stacking ring, the hole in the middle */
.al-hub{background:radial-gradient(closest-side,transparent 15%,rgba(242,237,230,.22) calc(15% + 1px),rgba(242,237,230,.07) 22%,
  rgba(242,237,230,.06) 30%,rgba(242,237,230,.26) 31%,rgba(242,237,230,.06) 32.5%,rgba(242,237,230,.1) 41.5%,
  rgba(242,237,230,.4) 42%,transparent calc(42% + 1px))}
/* the light on the disc stays where it is while the print turns under it */
.al-sheen{background:conic-gradient(from 200deg,transparent 0 4%,rgba(255,255,255,.16) 10%,transparent 18% 50%,
  rgba(255,255,255,.09) 58%,transparent 66%);mix-blend-mode:screen}
.al-disc::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(242,237,230,.22)}

/* ---------------------------------------------------------------- the doors to the whole album
   Real buttons: a hairline box, the platform's logo and what it does; on hover the box fills with ink (the menu's
   inverted palette). The two share the width of the sleeve and the disc; when they no longer fit side by side each
   takes the whole line. */
.al-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-10)}
.al-btn{flex:1 1 14rem;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);height:3.5rem;padding:0 var(--sp-6);
  border:1px solid rgba(242,237,230,.45);color:var(--ink);font-size:var(--fs-body);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.al-btn .ic{width:1.375rem;height:1.375rem;fill:currentColor;flex:0 0 auto}
.al-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------------------------------------------------------------- the programme
   A row: number · work (its scoring after it, quiet) · length · one action, on one line. --act is the action column:
   al=1 two logos, al=2 two rings, al=3 one arrow ring. */
.al-f[data-l="1"]{--act:4.5rem}
.al-f[data-l="2"]{--act:5.75rem}
.al-f[data-l="3"]{--act:2.75rem}
.pf{margin-top:var(--sp-12);border-top:1px dashed rgba(242,237,230,.24)}
.pf-w,.pf-g{border-bottom:1px dashed rgba(242,237,230,.24)}
.pf-mvs .pf-w{border-bottom:0}
.pf-row,.pf-gh{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 3rem var(--act);column-gap:var(--sp-4);
  align-items:center;width:100%;min-height:4.25rem;margin:0;padding:var(--sp-3) 0;text-align:left}
.pf-gh{min-height:0;padding:var(--sp-5) 0 var(--sp-1)}
.pf-gh .pf-tt{grid-column:2 / -1}
.pf-n{font-size:var(--fs-body-s);line-height:var(--lh-body-s);font-weight:var(--fw-semi);letter-spacing:.06em;
  color:var(--mute);font-variant-numeric:tabular-nums}
.pf-tt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--sp-3);min-width:0}
.pf-t{font-weight:var(--fw-semi);color:var(--ink);transition:opacity .3s ease}
.pf-s{font-size:var(--fs-body-s);line-height:var(--lh-body-s);font-weight:var(--fw-semi);color:var(--mute)}
.pf-len{justify-self:end;font-size:var(--fs-body);color:var(--mute);font-variant-numeric:tabular-nums}
.pf-act{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-1)}
/* the movements hang from their work on a thin line, each still with its own track number, as on the CD */
.pf-mvs{position:relative;padding-bottom:var(--sp-3)}
.pf-mvs::before{content:'';position:absolute;left:calc(2.25rem + var(--sp-4));top:var(--sp-2);bottom:var(--sp-5);width:1px;
  background:rgba(242,237,230,.18)}
.pf-mvs .pf-row{min-height:3.25rem;padding:var(--sp-1) 0}
.pf-mvs .pf-tt{padding-left:var(--sp-5)}
/* a movement is one step under its work (H6 → body-l, 24 → 18px on a wide screen), so it reads as part of it */
.pf-mvs .pf-t{font-size:var(--fs-body-l)}

/* plays here: the play ring stands on the row all the time (in Music it waits for the pointer) */
.pf-row .mus-play{opacity:1}
.pf-w.is-here .pf-len{color:var(--ink)}
.pf-w .rs{margin-left:calc(2.25rem + var(--sp-4))}
.pf-mvs .pf-w .rs{margin-left:calc(2.25rem + var(--sp-4) + var(--sp-5))}

/* al=1 Ikone — the two logos, one colour, a 44px target each */
.pf-ic{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.75rem;color:rgba(242,237,230,.72);
  transition:color .25s ease,background-color .25s ease,border-color .25s ease}
.pf-ic .ic{width:1.25rem;height:1.25rem;fill:currentColor}
.pf-ic:hover{color:var(--ink)}
/* al=2 Prstenovi — the logos in the ring the play button already has, so every action in the list is one shape */
.al-f[data-l="2"] .pf-ic{width:2.75rem;border-radius:50%;border:1px solid rgba(242,237,230,.3)}
.al-f[data-l="2"] .pf-ic .ic{width:1.0625rem;height:1.0625rem}
.al-f[data-l="2"] .pf-ic:hover{border-color:var(--ink);background-color:rgba(242,237,230,.08)}
/* al=3 Jedan izlaz — the platform is chosen once above the list; then the whole row is the link, with an arrow ring */
.pf-head{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-4);margin-top:var(--sp-10)}
.pf-head + .pf{margin-top:var(--sp-4)}
.pf-lbl{font-weight:var(--fw-semi);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pf-pick{display:flex;border:1px solid rgba(242,237,230,.3)}
.pf-pick button{display:inline-flex;align-items:center;gap:var(--sp-2);height:2.5rem;padding:0 var(--sp-4);
  font-size:var(--fs-body-s);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  transition:color .25s ease,background-color .25s ease}
.pf-pick button .ic{width:1rem;height:1rem;fill:currentColor}
.pf-pick button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pf-pick button:not([aria-pressed="true"]):hover{color:var(--ink)}
.pf-out{position:relative;display:block;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(242,237,230,.3);
  transition:border-color .25s ease,background-color .25s ease}
.pf-out .arrow{position:absolute;left:50%;top:50%;width:1rem;margin-left:-.5rem;rotate:-45deg}
.pf-out .arrow::after{right:0;transform:translateY(-50%) rotate(45deg)}
@media (hover:hover){
  a.pf-row:hover .pf-out{border-color:var(--ink);background-color:rgba(242,237,230,.08)}
  a.pf-row:hover .pf-t,button.pf-row:hover .pf-t{opacity:.72}
  button.pf-row:hover .mus-play{border-color:var(--ink);background-color:rgba(242,237,230,.08)}
}

/* the performers once, and the release */
.pf-cred{margin-top:var(--sp-8);font-weight:var(--fw-semi);color:var(--mute);max-width:52ch}
.pf-cred p+p{margin-top:var(--sp-2)}
.pf-cred span{color:var(--ink);letter-spacing:.12em;text-transform:uppercase;margin-right:var(--sp-2)}

/* ---------------------------------------------------------------- the bar: Music's, plus the way to the whole album */
.al-pl .pl-in{grid-template-columns:2.75rem minmax(0,22rem) minmax(0,1fr) auto auto 2.75rem}
.al-pl-out{display:flex;gap:var(--sp-6)}
.al-pl-out a{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);transition:color .25s ease}
.al-pl-out a:hover{color:var(--ink)}
.al-pl-out .ic{width:1rem;height:1rem;fill:currentColor}
.al-pl-out .arrow{width:1rem}
.al-pl-out .arrow::after{right:0;width:5px;height:5px;transform:translateY(-50%) rotate(45deg)}
/* after the third piece: only the way out stays, in full ink */
.al-pl.is-after .pl-play,.al-pl.is-after .pl-staff,.al-pl.is-after .pl-time{display:none}
.al-pl.is-after .pl-in{grid-template-columns:minmax(0,1fr) auto 2.75rem}
.al-pl.is-after .al-pl-out{gap:var(--sp-10)}
.al-pl.is-after .al-pl-out a{color:var(--ink);font-size:var(--fs-body)}
.al-pl.is-after .al-pl-out .arrow{width:1.625rem}

@media (prefers-reduced-motion:reduce){ .al-btn,.pf-ic,.pf-out{transition:none} }

/* ---------------------------------------------------------------- < 1024px: one column, the picture first
   The sleeve and the disc, then the reading; the two album buttons come after the programme (Lazar: the whole
   programme is seen before anyone leaves for YouTube). */
@media (max-width:63.99em){
  .al-f{display:flex;flex-direction:column}
  .al-f .al-r,.al-f .al-side{display:contents}
  .al-obj{order:1;--s:min(56vw, 22rem);width:calc(var(--s) * 1.52);margin-bottom:var(--sp-10)}
  .al-title{order:2}
  .pf-head{order:3}
  .pf{order:4}
  .pf-cred{order:5}
  .al-cta{order:6;align-self:stretch}

  .al-pl .pl-in{grid-template-columns:2.75rem minmax(0,1fr) auto 2.75rem;grid-template-areas:"play info out close" "staff staff staff time"}
  .al-pl-out{grid-area:out}
  .al-pl.is-after .pl-in{grid-template-columns:minmax(0,1fr) 2.75rem;grid-template-areas:"info close" "out out"}
}
/* < 576px: the length moves under the work, the action keeps its column; the bar has no room for the names while a
   piece plays — they come back after the third one */
@media (max-width:35.99em){
  .pf-row,.pf-gh{grid-template-columns:1.75rem minmax(0,1fr) var(--act);grid-template-areas:"n tt act" ". len act";column-gap:var(--sp-3)}
  .pf-n{grid-area:n}
  .pf-tt{grid-area:tt}
  .pf-len{grid-area:len;justify-self:start;font-size:var(--fs-body-s)}
  .pf-act{grid-area:act}
  .pf-mvs .pf-len{padding-left:var(--sp-5)}
  .pf-mvs::before{left:calc(1.75rem + var(--sp-3))}
  .pf-w .rs{margin-left:calc(1.75rem + var(--sp-3))}
  .pf-mvs .pf-w .rs{margin-left:calc(1.75rem + var(--sp-3) + var(--sp-5))}
  .pf-head{justify-content:flex-start;flex-wrap:wrap;gap:var(--sp-3)}
  .al-cta{flex-direction:column;align-items:stretch}
  .al-btn{flex:0 0 auto}                 /* in a column the basis would be the height */

  .al-pl:not(.is-after) .al-pl-out{display:none}
  .al-pl .pl-in{grid-template-areas:"play info info close" "staff staff staff time"}
}