/*
 * Section stylesheet: MUSIC (sections/music.php). Loaded only on /music/<artist>/.
 * Everything here is scoped to .jlo-section-music so it never touches other pages.
 * Copy to section-movies.css / section-cosmetics.css / section-videos.css and change
 * .jlo-section-music to .jlo-section-movies / -cosmetics / -videos.
 */

/* Picture left, name and biography right. */
.jlo-section-music .jlo-sec__hero {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  margin: 0 0 clamp(28px, 4vw, 48px); padding: clamp(18px, 3vw, 36px);
  background: var(--g-card, var(--paper)); border: 1px solid var(--g-line, var(--ink));
}
.jlo-section-music .jlo-sec__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--g-line, var(--ink)); padding: 6px; }
.jlo-section-music .jlo-sec__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jlo-section-music .jlo-sec__intro { display: grid; gap: 14px; align-content: center; }
.jlo-section-music .jlo-sec__title {
  margin: 0; font-family: var(--g-display, var(--font-display)); font-weight: 500;
  font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--g-head, inherit);
}
.jlo-section-music .jlo-sec__bio { font-size: 16px; line-height: 1.7; }
.jlo-section-music .jlo-sec__hero:not(:has(.jlo-sec__photo)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .jlo-section-music .jlo-sec__hero { grid-template-columns: minmax(0, 1fr); } }

/* Jump links to the parts of the page. */
.jlo-section-music .jlo-sec__jump {
  position: sticky; top: calc(var(--jlo-sticky-menu-offset, 0px) + var(--jlo-sticky-menu-height, 0px)); z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 0 0 clamp(24px, 3vw, 40px); padding: 12px 16px;
  background: var(--g-card, var(--paper)); border-block: 1px solid var(--g-line, var(--ink));
}
.jlo-section-music .jlo-sec__jump a {
  text-decoration: none; color: var(--g-gold, inherit);
  font: 600 11px/1 var(--g-caps, var(--f-body)); letter-spacing: .24em; text-transform: uppercase;
}
.jlo-section-music .jlo-sec__jump a:hover { color: var(--g-head, inherit); }

/* Each part a little apart. */
.jlo-section-music .jlo-sec__part { scroll-margin-top: calc(var(--jlo-sticky-menu-height, 80px) + 70px); margin-bottom: clamp(36px, 5vw, 64px); }