/* Keep typography proportional to the narrower docked content area. */
@media(min-width:1024px){
body:has(#right-panel.panel-open:not([hidden])) #main .page-heading{font-size:28px;letter-spacing:-.7px;margin-bottom:22px}
body:has(#right-panel.panel-open:not([hidden])) #main .section-head h2,body:has(#right-panel.panel-open:not([hidden])) #main .section-heading h2{font-size:18px;letter-spacing:-.3px}
body:has(#right-panel.panel-open:not([hidden])) #main .card-title,body:has(#right-panel.panel-open:not([hidden])) #main .playlist-card .card-title{font-size:13px;line-height:1.4;margin-top:8px}
body:has(#right-panel.panel-open:not([hidden])) #main .card-desc,body:has(#right-panel.panel-open:not([hidden])) #main .playlist-card .card-desc{font-size:11px;line-height:1.5;margin-top:3px}
body:has(#right-panel.panel-open:not([hidden])) #main .feature-caption h2{font-size:16px;line-height:1.35}
body:has(#right-panel.panel-open:not([hidden])) #main .feature-caption p,body:has(#right-panel.panel-open:not([hidden])) #main .page-intro{font-size:13px;line-height:1.5}
body:has(#right-panel.panel-open:not([hidden])) #main .feature-statement{font-size:clamp(18px,1.7vw,26px);letter-spacing:-.5px}
body:has(#right-panel.panel-open:not([hidden])) #main .feature-story p{font-size:11px;line-height:1.5;margin-top:6px}
body:has(#right-panel.panel-open:not([hidden])) #main .playlist-cover .cover-title{font-size:clamp(18px,1.6vw,26px);letter-spacing:-.6px}
body:has(#right-panel.panel-open:not([hidden])) #main .discovery-image-brand strong{font-size:clamp(17px,1.5vw,24px);letter-spacing:-.5px}
body:has(#right-panel.panel-open:not([hidden])) #main .hero h1,body:has(#right-panel.panel-open:not([hidden])) #main .charts-feature-copy h1,body:has(#right-panel.panel-open:not([hidden])) #main .charts-feature-copy h2{font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:-.8px}
body:has(#right-panel.panel-open:not([hidden])) #main .home-cinema-promotion .promotion-center p{font-size:18px;line-height:1.4;margin-bottom:16px}
body:has(#right-panel.panel-open:not([hidden])) #main .home-cinema-promotion .promotion-center .promotion-cta{font-size:13px;min-height:44px;padding:10px 22px}
body:has(#right-panel.panel-open:not([hidden])) #main .song strong{font-size:12px;line-height:1.4}
body:has(#right-panel.panel-open:not([hidden])) #main .song small{font-size:11px;line-height:1.4}
body:has(#right-panel.panel-open:not([hidden])) #main .section{margin-block:24px}
body:has(#right-panel.panel-open:not([hidden])) #main .section-head{margin-bottom:12px;gap:16px}
body:has(#right-panel.panel-open:not([hidden])) #main .charts-feature{gap:24px}
body:has(#right-panel.panel-open:not([hidden])) #main .feature-story{right:56px}
#main :is(.page-heading,.section-head h2,.section-heading h2,.card-title,.card-desc,.feature-statement,.feature-caption h2,.feature-caption p,.feature-story p,.cover-title,.discovery-image-brand strong,.hero h1,.charts-feature-copy h1,.charts-feature-copy h2,.promotion-center p){transition:font-size var(--panel-motion),letter-spacing var(--panel-motion),line-height var(--panel-motion)}
}
@media(prefers-reduced-motion:reduce){#main :is(.page-heading,.section-head h2,.section-heading h2,.card-title,.card-desc,.feature-statement,.feature-caption h2,.feature-caption p,.feature-story p,.cover-title,.discovery-image-brand strong,.hero h1,.charts-feature-copy h1,.charts-feature-copy h2,.promotion-center p){transition:none}}