/* Media section switcher shared by Music, Video and Gallery. */
.media-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.media-subnav-label { margin-inline-end: .5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-ink-soft); font-weight: 700; }
.media-subnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--theme-line); background: var(--theme-wash); color: var(--theme-ink);
  font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.media-subnav a[aria-current="page"] { background: var(--theme-surface-raised); border-color: var(--theme-accent); }
.media-subnav a:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .media-subnav a:hover { background: var(--theme-surface-raised); border-color: var(--theme-accent); } }
@media (prefers-reduced-motion: reduce) { .media-subnav a { transition: none; } }

/* Motion: halo, scroll reveal, pointer tilt with a light sheen, and a turning record. Transforms and opacity only. */
.media-hub .hero, .gallery-page .hero { position: relative; isolation: isolate; }
.media-hub .hero::before, .gallery-page .hero::before {
  content: ""; position: absolute; z-index: -1; inset-block-start: -4rem; inset-inline-end: 2%; width: min(34rem, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--theme-accent) 38%, transparent), transparent 40%, color-mix(in srgb, var(--theme-accent) 22%, transparent), transparent 80%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59% 61%, transparent 62%); mask: radial-gradient(circle, transparent 58%, #000 59% 61%, transparent 62%);
  opacity: .8; transform: perspective(900px) rotateX(62deg) rotateZ(0deg); animation: media-halo 40s linear infinite; pointer-events: none;
}
@keyframes media-halo { to { transform: perspective(900px) rotateX(62deg) rotateZ(360deg); } }
.media-hub .song-lead, .media-hub .song-list > .card, .media-hub .grid-2 > .card, .gallery-page figure {
  --rx: 0deg; --ry: 0deg; position: relative; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.media-hub .song-lead::after, .media-hub .song-list > .card::after, .media-hub .grid-2 > .card::after, .gallery-page figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.14), transparent 55%);
}
.media-hub .song-links li { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.media-hub .song-disc { display: none; }
@media (min-width: 820px) {
  .media-hub .song-lead { grid-template-columns: minmax(0, 1.3fr) 13rem minmax(0, 1fr); align-items: center; }
  .media-hub .song-disc { display: block; perspective: 600px; }
  .media-hub .song-disc span {
    display: block; aspect-ratio: 1; border-radius: 50%; transform: rotateX(48deg) rotateZ(0deg);
    background:
      radial-gradient(circle, var(--theme-accent) 0 11%, #120d0a 11.5% 13%, transparent 13.5%),
      repeating-radial-gradient(circle, #19130f 0 2px, #2c231c 2px 4px),
      conic-gradient(from 20deg, rgba(255,255,255,.2), transparent 25%, rgba(255,255,255,.14) 50%, transparent 75%, rgba(255,255,255,.2));
    box-shadow: 0 2rem 3rem rgba(0,0,0,.5), 0 0 0 .35rem rgba(255,255,255,.04);
    animation: media-disc-turn 9s linear infinite;
  }
}
@keyframes media-disc-turn { to { transform: rotateX(48deg) rotateZ(360deg); } }
@supports (animation-timeline: view()) {
  .media-hub .song-list > .card, .media-hub .song-links li, .media-hub .grid-2 > .card, .gallery-page figure, .media-hub .media-photo {
    animation: media-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
  }
}
@keyframes media-rise { from { opacity: 0; translate: 0 2rem; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (hover: hover) and (pointer: fine) {
  .media-hub .song-lead:hover::after, .media-hub .song-list > .card:hover::after, .media-hub .grid-2 > .card:hover::after, .gallery-page figure:hover::after { opacity: 1; }
  .media-hub .song-list > .card:hover, .media-hub .grid-2 > .card:hover, .gallery-page figure:hover { border-color: var(--theme-accent); }
  .media-hub .song-lead:hover .song-disc span { animation-duration: 3s; }
  .media-hub .song-links li:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .media-hub .hero::before, .gallery-page .hero::before, .media-hub .song-disc span { animation: none; }
  .media-hub .song-list > .card, .media-hub .song-links li, .media-hub .grid-2 > .card, .gallery-page figure, .media-hub .media-photo { animation: none; transition: none; transform: none; }
}
.media-hub, .gallery-page { overflow-x: clip; }

/* Music playlist */
.media-hub .playlist { display: grid; gap: 1.25rem; margin-block-start: 1.25rem; }
@media (min-width: 900px) { .media-hub .playlist { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.media-hub .playlist-stage { display: grid; gap: 1rem; }
.media-hub .now-playing { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .media-hub .now-playing { grid-template-columns: 9rem minmax(0, 1fr); align-items: center; } }
.media-hub .now-playing .song-disc { display: block; perspective: 600px; }
.media-hub .now-playing .song-disc span { animation-play-state: paused; }
.media-hub .playlist.is-playing .song-disc span { animation-play-state: running; animation-duration: 6s; }
.media-hub .now-text h3 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.3; margin: 0; }
.media-hub .up-next { margin: .5rem 0; font-size: .9rem; color: var(--theme-ink-soft); }
.media-hub .playlist-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.media-hub .pl-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem;
  border: 1px solid var(--theme-line); background: var(--theme-wash); color: var(--theme-ink); text-decoration: none;
}
.media-hub .pl-btn:focus-visible, .media-hub .track-play:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }
.media-hub .tracklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 34rem; overflow-y: auto; }
@media (max-width: 899px) { .media-hub .tracklist { max-height: none; overflow: visible; } }
.media-hub .track { border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-wash); transition: border-color .2s ease, background-color .2s ease; }
.media-hub .track[aria-current="true"] { border-color: var(--theme-accent); background: var(--theme-surface-raised); }
.media-hub .track-play {
  display: grid; grid-template-columns: 2rem 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; min-height: 56px; padding: .6rem .9rem;
  background: none; border: 0; color: var(--theme-ink); font: inherit; text-align: start; cursor: pointer; border-radius: 14px;
}
.media-hub .track-num { color: var(--theme-ink-soft); font-variant-numeric: tabular-nums; }
.media-hub .track-bars { display: none; align-items: flex-end; gap: 2px; height: 1rem; }
.media-hub .track-bars i { display: block; width: 3px; height: 100%; background: var(--theme-accent); transform-origin: bottom; transform: scaleY(.35); }
.media-hub .track[aria-current="true"] .track-num { display: none; }
.media-hub .track[aria-current="true"] .track-bars { display: flex; grid-column: 1 / 3; }
.media-hub .track[aria-current="true"] .track-text { grid-column: 3; }
.media-hub .playlist.is-playing .track[aria-current="true"] .track-bars i { animation: media-bar 900ms ease-in-out infinite alternate; }
.media-hub .playlist.is-playing .track[aria-current="true"] .track-bars i:nth-child(2) { animation-delay: -300ms; }
.media-hub .playlist.is-playing .track[aria-current="true"] .track-bars i:nth-child(3) { animation-delay: -600ms; }
@keyframes media-bar { to { transform: scaleY(1); } }
.media-hub .track-text { display: grid; gap: .1rem; grid-column: 3; }
.media-hub .track-title { font-weight: 700; font-size: 1.05rem; }
.media-hub .track-translit { font-size: .85rem; color: var(--theme-ink-soft); font-style: italic; }
.media-hub .track-tag { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border: 1px solid var(--theme-line); border-radius: 999px; color: var(--theme-ink-soft); }
.media-hub .track-credit { display: none; margin: 0; padding: 0 .9rem .8rem 3.7rem; font-size: .85rem; line-height: 1.5; color: var(--theme-ink-soft); }
.media-hub .track[aria-current="true"] .track-credit { display: none; }
@media (hover: hover) and (pointer: fine) { .media-hub .track:hover { border-color: var(--theme-accent); } }
@media (prefers-reduced-motion: reduce) {
  .media-hub .playlist.is-playing .track[aria-current="true"] .track-bars i { animation: none; transform: scaleY(.7); }
  .media-hub .track { transition: none; }
}
.media-hub .now-playing .song-disc span { width: 8rem; margin-inline: auto; }
.media-hub .track-group { display: grid; gap: .15rem; padding: .9rem .25rem .25rem; }
.media-hub .track-group-title { font-weight: 700; letter-spacing: .02em; }
.media-hub .track-group-sub { font-size: .85rem; color: var(--theme-ink-soft); }
.media-hub .track-group-sub a { overflow-wrap: anywhere; }
.media-hub .track-tag + .track-tag { margin-inline-start: .25rem; }

/* Music FAQ (visible mirror of the FAQ JSON-LD) */
.music-faq{margin-top:2.5rem;max-width:46rem}
.music-faq-item{border-bottom:1px solid rgba(255,255,255,.14)}
.music-faq-item summary{cursor:pointer;padding:.9rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.music-faq-item summary::-webkit-details-marker{display:none}
.music-faq-item summary::after{content:"+";font-size:1.3rem;opacity:.7;transition:transform .2s ease}
.music-faq-item[open] summary::after{transform:rotate(45deg)}
.music-faq-item p{margin:0 0 1rem;opacity:.85;line-height:1.6}
@media (prefers-reduced-motion:reduce){.music-faq-item summary::after{transition:none}}