/* Multi-case film, between human preference and the scene application. */
#texturing {
  position: relative;
  padding-block: 80px;
  background: #141715;
}
#texturing::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--page);
  right: var(--page);
  height: 1px;
  background: #c7b99529;
}
#texturing .section-index {
  font: 400 var(--chapter-label-size)/1.5 var(--chapter-label-font);
  letter-spacing: .07em;
}
.texturing-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 470px);
  align-items: end;
  gap: 32px;
  margin: 32px 0;
}
.texturing-heading h2 {
  margin: 0;
  font-size: clamp(44px, 4.2vw, 66px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.texturing-heading .chapter-caption {
  margin: 0;
  color: #b5b9b1;
  font-size: var(--reading-copy-size);
  line-height: 1.65;
  text-align: right;
  text-wrap: balance;
}
.texturing-film {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}
.texturing-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
  border: 1px solid #c7b99530;
  border-radius: 4px;
}
.texturing-film video:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.texturing-film figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--reading-note-size);
  line-height: 1.7;
}
@media (max-width: 959.98px) {
  #texturing { min-width: 0; padding: 56px var(--page); scroll-margin-top: 78px; }
  #texturing > * { min-width: 0; }
  .texturing-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 22px 0 28px; }
  .texturing-heading h2 { max-width: 100%; font-size: clamp(34px, 8.7vw, 52px); text-wrap: balance; }
  .texturing-heading .chapter-caption { max-width: 45ch; text-align: left; text-wrap: pretty; }
  .texturing-film figcaption { font-size: 13px; }
}