.chapter-gallery { min-width: 0; margin-bottom: 22px; }
.chapter-gallery__header { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.chapter-gallery__heading { margin: 0; font-size: clamp(18px, 1.5vw, 24px); }
.chapter-gallery__stage { position: relative; height: 28svh; overflow: hidden; background: transparent; }
.chapter-gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: left center; opacity: 0; transform: translateX(3%); transition: opacity 250ms cubic-bezier(.23, 1, .32, 1), transform 250ms cubic-bezier(.23, 1, .32, 1); }
.chapter-gallery__stage img.is-active { opacity: 1; transform: translateX(0); z-index: 1; }
.chapter-gallery__controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chapter-gallery__controls span { font-size: 12px; letter-spacing: .08em; }
.chapter-gallery__controls button { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 22px; opacity: .35; cursor: pointer; transition: opacity 150ms ease, transform 150ms ease; }
.chapter-gallery__controls button:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chapter-gallery__controls button:hover { opacity: 1; transform: scale(1.04); } }
.chapter-side { min-width: 0; }
html:is([lang="zh-CN"], .flow-site) .track-intro.has-chapter-gallery { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); grid-template-rows: auto 1fr; gap: 28px 5vw; align-items: center; }
html:is([lang="zh-CN"], .flow-site) .track-intro.has-chapter-gallery > .section-kicker { grid-column: 1 / -1; align-self: start; }
html:is([lang="zh-CN"], .flow-site) .track-intro.has-chapter-gallery > .display-title { margin: 0; align-self: center; font-size: clamp(48px, 6vw, 105px); }
html:is([lang="zh-CN"], .flow-site) .chapter-side .track-intro__copy { margin: 0; font-size: clamp(16px, 1.4vw, 23px); }
html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 5vw; }
html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__type { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery h2 { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(60px, 8vw, 130px); }
html:is([lang="zh-CN"], .flow-site) .record-slide--student .chapter-side { grid-column: 2; grid-row: 1 / span 2; }
html:is([lang="zh-CN"], .flow-site) .chapter-side .record-slide__summary--details { max-width: none; font-size: clamp(14px, 1.1vw, 18px); margin: 0; }
html:is([lang="zh-CN"], .flow-site) .chapter-side .record-slide__summary--details p + p { margin-top: .5em; }
html:is([lang="zh-CN"], .flow-site) .creative__stills--work { display: block; }
html:is([lang="zh-CN"], .flow-site) .creative__stills--work .chapter-gallery { max-width: 900px; }
.role-gallery-side { align-self: center; }
.chapter-interviews { margin-top: 32px; font-size: clamp(16px, 1.4vw, 23px); line-height: 1.5; }
.chapter-interviews a { display: block; width: fit-content; color: inherit; text-underline-offset: .25em; margin-top: 18px; }
html:is([lang="zh-CN"], .flow-site) .creative__stills--work img { filter: none; }
@media (min-width: 1051px) {
  .chapter-gallery__stage { height: min(24vw, 32svh); aspect-ratio: auto; }
}
@media (max-width: 1050px) {
  .chapter-gallery__header { gap: 10px; flex-wrap: wrap; }
  html:is([lang="zh-CN"], .flow-site) .track-intro.has-chapter-gallery { position: relative; display: block; }
  html:is([lang="zh-CN"], .flow-site) .track-intro.has-chapter-gallery > .display-title { margin: 40px 0; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__body { display: block; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery h2 { margin: 20px 0 32px; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery { position: relative; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__tags { margin-top: 28px; }
  html:is([lang="zh-CN"], .flow-site) .creative__stills--work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .chapter-gallery__stage img { transform: none; transition: opacity 150ms ease; } }

html:is([lang="zh-CN"], .flow-site) .hero__name-line--second {
  font-family: "Amstelvar Web", serif;
  line-height: 1.1;
  padding-block: .14em .18em;
  margin-block: -.14em -.18em;
  overflow: visible;
}
.chapter-gallery, .chapter-interviews { font-family: var(--body); }
.chapter-gallery__header { flex-wrap: wrap; }
.creative-gallery-side .creative__intro { margin: 0; }
@media (min-width: 1051px) {
  html:is([lang="zh-CN"], .flow-site) #track-record.has-chapter-gallery { grid-template-rows: auto 1fr auto; }
  html:is([lang="zh-CN"], .flow-site) #track-record > .chapter-side { display: contents; }
  html:is([lang="zh-CN"], .flow-site) #track-record .track-intro__copy { grid-column: 1 / -1; grid-row: 3; max-width: none; white-space: nowrap; }
  html:is([lang="zh-CN"], .flow-site) #track-record .chapter-interviews { grid-column: 2; grid-row: 2; }
  html:is([lang="zh-CN"], .flow-site) #tilta {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, .55fr);
    column-gap: 2.5vw;
  }
  html:is([lang="zh-CN"], .flow-site) #tilta .tilta__heading { grid-column: 1; grid-row: 2; }
  html:is([lang="zh-CN"], .flow-site) #tilta .display-title { font-size: clamp(38px, 4.25vw, 78px); }
  html:is([lang="zh-CN"], .flow-site) #tilta .role-gallery-side { display: contents; }
  html:is([lang="zh-CN"], .flow-site) #tilta .chapter-gallery { grid-column: 2; grid-row: 2; align-self: center; margin-bottom: 0; }
  html:is([lang="zh-CN"], .flow-site) #tilta .tilta__intro { grid-column: 3; grid-row: 2; align-self: center; font-size: clamp(16px, 1.25vw, 22px); }
  html:is([lang="zh-CN"], .flow-site) #tilta .tilta__services { grid-row: 3; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__body {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, .55fr);
    gap: 20px 2.5vw;
  }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .chapter-side { display: contents; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .chapter-gallery { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__summary--details { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery h2 { font-size: clamp(52px, 5.4vw, 100px); }
  html:is([lang="zh-CN"], .flow-site) .record-slide--student.has-chapter-gallery .record-slide__type { font-size: clamp(20px, 1.7vw, 30px); }
}