/* Video.psd: 1920 px desktop composition. */
.video-page { background: #000; }
.video-page section { position: relative; }
.video-label { display: table; width: fit-content; margin: 0; padding: 1.6vw 2.1vw; background: var(--accent); font-size: 4.15vw; font-weight: 400; line-height: 1.15; text-transform: uppercase; }
.video-solo { min-height: 107.7vw; padding: 5.15vw 3.6% 2.4vw 4%; background: url('/images/video/background-1.webp') left top / 100% auto no-repeat; }
.video-heading { position: absolute; left: 4%; top: 30.3vw; }
.video-heading h1 { font-size: 6.2vw; line-height: 1; font-weight: 400; text-transform: uppercase; margin: 0 0 2.3vw .8vw; }
.video-card { min-width: 0; margin: 0; text-align: center; }
.video-preview { position: relative; display: block; aspect-ratio: 528 / 353; border-radius: 1.5vw; background: #5c5c5c; isolation: isolate; }
.video-preview > img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; border-radius: inherit; filter: grayscale(1) brightness(.72); }
.video-play { position: absolute; inset: 0; margin: auto; width: 32%; aspect-ratio: 1; height: fit-content; color: #fff; transition: transform .25s ease, filter .25s ease; }
.video-play svg { display: block; width: 100%; height: auto; overflow: visible; }
.video-play circle { stroke: currentColor; stroke-width: 5; fill: transparent; }
.video-play path { fill: currentColor; stroke-linejoin: round; }
.video-preview:is(:hover, :focus-visible) .video-play { transform: scale(1.1); filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 18px #ffffff80); }
.video-card figcaption { margin: 1.3vw auto 0; max-width: 96%; font-size: 1.8vw; line-height: 1.12; color: #d0d0d0; }
.video-card-featured { width: 50.3%; margin-left: auto; }
.video-card-featured .video-play { width: 32.2%; }
.video-card-featured figcaption { font-size: 2.05vw; margin-top: 2.1vw; }
.video-solo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 5.1vw; row-gap: 1.7vw; margin-top: 8.2vw; }
.video-recital { min-height: 55.8vw; padding: 2.8vw 3.5% 2.2vw 4.2%; background: #666 url('/images/video/background-2.webp') center / cover no-repeat; }
.video-recital > .video-label { position: absolute; top: 2.8vw; left: 4.2%; }
.video-recital-grid { width: 30%; margin-left: auto; display: grid; gap: 3.3vw; }
.video-recital figcaption { max-width: 92%; }
.video-ensemble { min-height: 78.4vw; padding: 5.1vw 3.5% 3.8vw 4.1%; background: url('/images/video/background-3.webp') center top / cover no-repeat; }
.video-chamber-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5.4vw; margin-top: 4.7vw; }
.video-online { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5.4vw; align-items: start; margin-top: 6.1vw; }
.video-online .video-label { font-size: 4.1vw; padding-right: 2vw; }
@media (max-width: 640px) {
    .video-label { font-size: 7.6vw; padding: 2.7vw 4vw; line-height: 1.15; }
    .video-solo { min-height: 0; padding: 50.7vw 3% 5.7vw; background-size: 148% auto; background-position: left top; }
    .video-heading { left: auto; right: 3%; top: 7.6vw; text-align: right; }
    .video-heading h1 { font-size: 11vw; margin: 0 0 4.2vw; }
    .video-heading .video-label { margin-left: auto; }
    .video-card-featured { width: 80%; margin-inline: auto; }
    .video-preview { border-radius: 2.6vw; }
    .video-card-featured .video-play { width: 34%; }
    .video-card-featured figcaption { max-width: 92%; font-size: 3.65vw; line-height: 1.12; margin-top: 3.6vw; }
    .video-solo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8.5vw; row-gap: 7vw; margin-top: 6.2vw; }
    .video-card figcaption { font-size: 3.65vw; line-height: 1.12; margin-top: 3.6vw; }
    .video-recital { min-height: 113.5vw; padding: 5.4vw 3% 6.4vw; background-size: auto 100%; background-position: 32% top; }
    .video-recital > .video-label { position: static; }
    .video-recital-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8.5vw; margin-top: 43.5vw; }
    .video-recital figcaption { max-width: 91%; }
    .video-ensemble { min-height: 0; padding: 5.3vw 3% 3.7vw; background-size: auto 124vw; background-position: 48% top; }
    .video-chamber { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw 8.5vw; }
    .video-chamber > .video-label { grid-row: 1; grid-column: 1; align-self: end; padding-inline: 3.4vw; margin-bottom: 0; }
    .video-chamber-grid { display: contents; }
    .video-chamber-grid > :first-child { grid-column: 2; grid-row: 1; }
    .video-chamber-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
    .video-chamber-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
    .video-online { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw 8.5vw; margin-top: 10vw; }
    .video-online .video-label { grid-column: 1 / -1; justify-self: center; font-size: 7.6vw; padding: 2.7vw 4vw; }
    .video-online .video-label br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .video-play { transition: none; }
}