/* Stage Light · Releases (Music, the release page, /links/ and the four blocks).
   From design/stage-light/pages/release.css plus the parts SPEC §6.1 / §6.11 describe and
   the mockups do not draw (the cover grid, the current-release band, the link-in-bio page).
   Logical properties only (RTL mirrors by itself); motion only under html.motion. */

/* ---------- release page head: the copy column carries the cover + listen row ---------- */
.release-head .stage__copy { grid-column: 1 / span 6; }
.release-head .lead { font-style: normal; }
.gloss:lang(ar), .gloss:lang(ckb) { font-style: normal; }

/* ---------- tracklist ---------- */
.tracks { margin-block: 14px clamp(48px, 6vw, 88px); border-block-start: 1px solid var(--line); }
.track { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--gap); padding-block: 18px; border-block-end: 1px solid var(--line); }
.track__no { font-family: var(--font-latin); font-size: .8rem; letter-spacing: .14em; color: var(--tungsten); font-variant-numeric: tabular-nums; }
.track__title { font-size: var(--fs-h3); font-weight: var(--w-lead); line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.track__ar { font-size: .8em; color: var(--tungsten); }
:root:lang(ar) .track__ar, :root:lang(ckb) .track__ar { order: -1; color: var(--text); font-size: 1em; }
:root:lang(ar) .track__title > [lang="en"], :root:lang(ckb) .track__title > [lang="en"] { font-size: .8em; color: var(--tungsten); }
.track__time { font-family: var(--font-latin); font-size: .95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.about-h { margin-block-end: 18px; }
.split__aside .label { margin-block-end: 14px; }
.release-body .facts dd bdi { unicode-bidi: isolate; }

/* ---------- the screening without a film: the credits roll across ---------- */
.screening--nofilm .screening__text { grid-column: 1 / span 8; }

/* ---------- the home release hero (one block root around the stage + screening) ---------- */
.release-hero { display: block; }
.release-info--solo { margin-block-start: clamp(20px, 3.4vh, 40px); }

/* ---------- a cover without a picture: the gold wordmark on smoke ---------- */
.rel-ph { display: grid; place-items: center; aspect-ratio: 1; inline-size: 100%; background: radial-gradient(70% 70% at 50% 40%, rgba(255, 182, 92, .14), rgba(255, 182, 92, 0) 70%), var(--smoke); border: 1px solid var(--line-faint); border-radius: 2px; }
.rel-ph svg { inline-size: 46%; block-size: auto; opacity: .7; }

/* ---------- discography shelf legend ---------- */
.disco__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.disco__legend-sep { inline-size: 18px; block-size: 1px; background: var(--line-warm); }

/* ---------- /music/: the current release band ---------- */
.music-current__inner { padding-inline: var(--gutter); display: grid; justify-items: start; gap: 6px; }
.music-current__title { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; font-size: var(--fs-h2); font-weight: var(--w-display); line-height: var(--lh-head); letter-spacing: -.02em; }
.music-current__title a { display: inherit; flex-direction: inherit; align-items: inherit; gap: inherit; color: inherit; text-decoration: none; }
.music-current__title a:hover, .music-current__title a:focus-visible { color: var(--tungsten); }
.music-current__ar { font-size: .5em; font-weight: var(--w-strong); line-height: 1.6; color: var(--tungsten); }
:root:lang(ar) .music-current__ar, :root:lang(ckb) .music-current__ar { order: -1; font-size: calc(1em * var(--ar-h2)); font-weight: var(--w-display-ar); color: var(--text); }
:root:lang(ar) .music-current__lat, :root:lang(ckb) .music-current__lat { font-size: .45em; color: var(--tungsten); }

/* ---------- /music/: the grid of lit covers (6 -> 4 -> 2 columns) ---------- */
.disco-grid {
  --cols-grid: 6;
  --cover: calc((100vw - 2 * var(--gutter) - (var(--cols-grid) - 1) * var(--gap)) / var(--cols-grid));
  display: grid; grid-template-columns: repeat(var(--cols-grid), minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(72px, 7vw, 104px);
  padding: 64px var(--gutter) 0;
}
.disco-grid .rec { scroll-snap-align: none; }
html:not(.motion) .disco-grid .rec__cone, .disco-grid.is-in .rec__cone { opacity: .75; }
html:not(.motion) .disco-grid .rec__toplight, .disco-grid.is-in .rec__toplight { opacity: 1; }
.disco-grid.is-in .rec:nth-child(6n + 2) * { transition-delay: 70ms; }
.disco-grid.is-in .rec:nth-child(6n + 3) * { transition-delay: 140ms; }
.disco-grid.is-in .rec:nth-child(6n + 4) * { transition-delay: 210ms; }
.disco-grid.is-in .rec:nth-child(6n + 5) * { transition-delay: 280ms; }
.disco-grid.is-in .rec:nth-child(6n) * { transition-delay: 350ms; }
@media (max-width: 1100px) { .disco-grid { --cols-grid: 4; } }
@media (max-width: 640px) { .disco-grid { --cols-grid: 2; row-gap: 64px; } }

/* ---------- listen links (block and the /music/ CTA): wide pills ---------- */
.listen-links__row { padding-inline: var(--gutter); }
.pills--wide { gap: 10px 12px; }
.pills--wide .pill { min-height: 52px; padding-inline: 18px 22px; font-size: .9rem; }

/* ---------- /links/: the link-in-bio page (phones first, one screen) ---------- */
.page-links main { padding-block-start: var(--header-h); }
.links-page { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; justify-items: center; padding: 8px 16px 64px; }
.links-stage { position: relative; display: grid; justify-items: center; gap: 18px; inline-size: min(100%, 560px); padding-block: 12px 28px; --mq-w: min(80vw, 420px); --band-c: 50%; }
.links-stage .marquee { position: relative; inset: auto; inline-size: var(--mq-w); margin-inline: auto; }
.links-stage .stage__leaks { z-index: -1; }
.links-page__title { font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem); font-weight: var(--w-lead); letter-spacing: .02em; text-align: center; color: rgba(243, 236, 223, .9); }
.links-cover { display: grid; justify-items: center; gap: 14px; color: inherit; text-decoration: none; }
.links-cover .cover-lit { inline-size: min(56vw, 240px); }
.links-cover__meta { display: grid; justify-items: center; gap: 4px; text-align: center; }
.links-cover__kicker { font-size: .7rem; font-weight: var(--w-label); letter-spacing: .26em; text-transform: uppercase; color: var(--tungsten); }
.links-cover__kicker:lang(ar), .links-cover__kicker:lang(ckb) { font-size: .9rem; }
.links-cover__name { display: grid; justify-items: center; font-size: 1.3rem; font-weight: var(--w-lead); }
.links-cover__ar { font-size: .85em; color: var(--tungsten); }
:root:lang(ar) .links-cover__ar, :root:lang(ckb) .links-cover__ar { order: -1; font-size: 1em; color: var(--text); }
.links-cover:hover .links-cover__name, .links-cover:focus-visible .links-cover__name { color: var(--tungsten); }
.links-stack { inline-size: min(100%, 560px); display: grid; gap: 10px; }
.links-stack > .label { margin-block-start: 18px; }
.links__list { display: grid; gap: 10px; }
.links__pill { inline-size: 100%; justify-content: flex-start; min-height: 56px; padding-inline: 18px 20px; font-size: .95rem; }
.links__label { flex: 1 1 auto; }
.links__sub { font-size: .78rem; font-weight: var(--w-body); color: var(--muted); }
.links__pill.pill--lead .links__sub { color: rgba(255, 247, 236, .8); }
.links-page__more { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 26px; }
.links-page__langs { justify-self: center; margin-block-start: 22px; }

@media (max-width: 900px) {
  .screening--nofilm .screening__text { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .track { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .track__title { font-size: 1.15rem; }
}