/* The existing About content forms five screens using the catalog controller. */
.about-page[data-program-transitions] #main .catalog-chapter-scene {
  display: flex; align-items: center; height: var(--catalog-viewport); max-height: var(--catalog-viewport); min-height: 0;
  padding: 100px 0 70px; overflow: clip;
}
.about-page[data-program-transitions] #main .catalog-chapter-scene > .container {
  width: min(1200px,calc(100% - 96px)); min-height: 0; max-height: none; overflow: visible;
}
.about-page[data-program-transitions] .intro-section .page-intro { padding-bottom: 0; }
.about-page[data-program-transitions] #main .magic-scene {
  background: linear-gradient(90deg,#041a30ed,#05223b9e 32%,#06264114 59%,#051c328a),url('scene-magic-scene.webp') center / cover #0b1c2b;
}
.about-page[data-program-transitions] .magic-scene-layout { grid-template-columns: minmax(0,420px) 230px; align-items: center; }
.about-page[data-program-transitions] .magic-scene h2 { font-size: clamp(40px,4.3vw,62px); }
.about-page[data-program-transitions] .magic-scene .scene-copy > p { font-size: 14px; line-height: 1.5; margin-top: 14px; }
.about-page[data-program-transitions] .magic-scene .scene-copy .scene-kicker { margin: 0 0 14px; font-size: 11px; }
.about-page[data-program-transitions] .magic-scene .scene-divider { height: 40px; margin: 10px 0; }
.about-page[data-program-transitions] .magic-stops { gap: 8px; }
.about-page[data-program-transitions] .magic-stops a { min-height: 54px; font-size: 12px; }
.about-page[data-program-transitions] .magic-stops img { width: 48px; height: 48px; }
.about-page[data-program-transitions] #details-list > .container { display: flex; flex-direction: column; height: 100%; }
.about-page[data-program-transitions] #details-list .section-heading { flex-shrink: 0; margin-bottom: 22px; text-align: center; }
.about-page[data-program-transitions] #details-list .section-heading h2 { font-size: clamp(34px,3.5vw,50px); }
.about-page[data-program-transitions] #details-list .section-heading p { margin-top: 8px; font-size: 14px; }
.about-page #details-list .scene-detail-list[data-about-details] { display: block; min-height: 0; }
.about-page:not([data-program-transitions]) #details-list .scene-detail-list[data-about-details] { height: min(60svh,560px); }
.about-page[data-program-transitions] #details-list .scene-detail-list { flex: 1; }
.about-detail-slide { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; height: 100%; }
.about-detail-copy h3 { font: 500 clamp(30px,3vw,44px)/1.12 'Cormorant Garamond',Georgia,serif; color: var(--gold); }
.about-page #details-list .about-detail-copy p { padding: 0; margin-top: 20px; max-width: 42ch; font-size: 16px; line-height: 1.65; }
.about-detail-slide .detail-media { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; background: transparent; overflow: hidden; }
.about-page #details-list .about-detail-slide :is(video,.detail-photo) { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 12px; }
.about-page .about-detail-controls { flex-shrink: 0; margin-top: 18px; }
.about-page[data-program-transitions] .about-artists .story-grid { gap: 50px; }
.about-page[data-program-transitions] .about-artists .about-photo { height: min(54svh,500px); }
.about-page[data-program-transitions] .about-artists h2 { font-size: clamp(36px,3.5vw,52px); }
.about-page[data-program-transitions] #main .cta-section { align-items: flex-end; padding-bottom: calc(15svh - 23px); }
@media(max-width:1199px) {
  .about-page[data-program-transitions] #main .catalog-chapter-scene > .container { width: calc(100% - 40px); }
  .about-page[data-program-transitions] .magic-scene-layout { grid-template-columns: minmax(0,380px) 210px; }
  .about-page[data-program-transitions] .about-artists .story-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media(max-width:767px) {
  .about-page[data-program-transitions] #main .catalog-chapter-scene { padding: 88px 0 66px; }
  .about-page[data-program-transitions] .intro-section h1 { font-size: 42px; }
  .about-page[data-program-transitions] .magic-scene-layout { grid-template-columns: 1fr; gap: 12px; }
  .about-page[data-program-transitions] .magic-scene h2 { font-size: 30px; }
  .about-page[data-program-transitions] .magic-scene h2 em { display: inline; }
  .about-page[data-program-transitions] .magic-scene .scene-copy > p { font-size: 12px; line-height: 1.45; margin-top: 8px; }
  .about-page[data-program-transitions] .magic-scene .scene-copy .scene-kicker { font-size: 9px; margin-bottom: 8px; }
  .about-page[data-program-transitions] .magic-scene .scene-divider { display: none; }
  .about-page[data-program-transitions] .magic-scene .button { min-height: 44px; margin-top: 12px; padding-block: 8px; font-size: 12px; }
  .about-page[data-program-transitions] .magic-stops { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 0; }
  .about-page[data-program-transitions] .magic-stops a { flex-direction: row; text-align: left; min-height: 44px; font-size: 10px; gap: 8px; padding: 6px; }
  .about-page[data-program-transitions] .magic-stops img { width: 32px; height: 32px; }
  .about-page[data-program-transitions] .magic-stops .detail-media-kind { font-size: 8px; }
  .about-page[data-program-transitions] #details-list .section-heading { margin-bottom: 14px; }
  .about-page[data-program-transitions] #details-list .section-heading h2 { font-size: 32px; }
  .about-page[data-program-transitions] #details-list .section-heading p { font-size: 12px; }
  .about-detail-slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 16px; }
  .about-detail-copy h3 { font-size: 29px; }
  .about-page #details-list .about-detail-copy p { margin-top: 8px; font-size: 12px; line-height: 1.45; }
  .about-page .about-detail-controls { margin-top: 12px; }
  .about-page[data-program-transitions] .about-artists .story-grid { grid-template-columns: 1fr; gap: 14px; }
  .about-page[data-program-transitions] .about-artists .about-photo { height: min(23svh,190px); }
  .about-page[data-program-transitions] .about-artists h2 { font-size: 31px; }
  .about-page[data-program-transitions] .about-artists .story-copy > p { margin-top: 10px; font-size: 12px; line-height: 1.45; }
  .about-page[data-program-transitions] .about-artists .check-list { margin-block: 12px; }
  .about-page[data-program-transitions] .about-artists .check-list li { margin-block: 6px; font-size: 11px; line-height: 1.45; }
  .about-page[data-program-transitions] .about-artists .button { min-height: 44px; padding-block: 8px; font-size: 12px; }
}