/* Juliana's requested readable treatment for the site's former display italics. */
em {
  font-family: 'DM Sans', Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .015em;
}
.question {
  font-family: 'DM Sans', Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(31px, 3.1vw, 44px);
  line-height: 1.3;
  letter-spacing: .015em;
}
.anchor-line {
  font-family: 'DM Sans', Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.35;
  letter-spacing: .015em;
}
.testimonial blockquote, .client-quote blockquote {
  font-family: 'DM Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
}
.testimonial blockquote {font-size: clamp(21px, 2.5vw, 28px)}
.client-quote blockquote {font-size: clamp(20px, 2vw, 25px)}
.places-line {
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .015em;
}

/* The supplied white-backed logo is made transparent and blue by the existing
   organization-blue SVG filter, matching the other logos without changing it. */
.logo-track img[src$="/la-cada.png"] {object-fit: contain; width: 100%}

/* Film projects read as one chapter in Juliana's story, with the original stage
   photo retained above the editorial poster sequence. */
.film-home {
  overflow: hidden;
  padding: clamp(74px, 8vw, 120px) 0;
  background: linear-gradient(155deg, #f6faff 0%, #dbeaf6 100%);
}
.film-home-inner {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(42px, 6vw, 100px);
  align-items: center;
}
.film-home-copy .eyebrow {color: #235274}
.film-home-copy h2 {max-width: 13ch; font-size: clamp(38px, 4vw, 58px)}
.film-home-copy p:not(.eyebrow) {max-width: 49ch; color: #31516a; line-height: 1.65}
.film-home-copy .film-home-beat {font-size: 21px; font-weight: 600; color: #163b58; margin-top: 27px}
.film-home-copy p + p {margin-top: 15px}
.film-home-copy .film-home-titles {font-size: 14px; font-weight: 650; letter-spacing: .025em; margin-top: 27px}
.film-home-copy .button {margin-top: 24px}
.film-home-posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 18px;
  border-radius: 4px 48px 4px 4px;
  background: #143553;
  box-shadow: 0 20px 46px #173b5650;
}
.film-home-posters img {width: 100%; height: 290px; object-fit: contain; background: #0b1427; box-shadow: 0 8px 20px #06132170}
.film-home-posters img:nth-child(2) {height: 325px}
.film-home-posters img:nth-child(3) {height: 275px}

.chapter-5 {scroll-margin-top: 115px}
.chapter-5 .chapter-photo {margin-bottom: 44px}
.film-stories {border-top: 1px solid var(--line)}
.film-story {
  display: grid;
  grid-template-columns: minmax(110px, 155px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.film-story:last-child {border-bottom: 0; padding-bottom: 0}
.film-story img {width: 100%; height: auto; max-height: 250px; object-fit: contain; object-position: top left; background: #132a45; box-shadow: 0 10px 22px #143b582a}
.film-story h4 {font-size: clamp(23px, 2vw, 29px); font-weight: 550; line-height: 1.17; letter-spacing: -.035em}
.chapter-5 .film-story .film-role {font-size: 12px; line-height: 1.5; font-weight: 700; color: #275a78; margin-top: 11px; letter-spacing: .035em}
.chapter-5 .film-story p:not(.film-role) {font-size: 15px; line-height: 1.65; margin-top: 13px}

@media (max-width: 900px) {
  .film-home-inner {grid-template-columns: 1fr; gap: 42px}
  .film-home-copy h2 {max-width: 16ch}
  .film-home-posters {max-width: 650px}
}
@media (max-width: 650px) {
  .question {font-size: 30px; min-height: 155px}
  .anchor-line, .times-square-feature .anchor-line {font-size: 28px}
  .film-home {padding: 68px 0}
  .film-home-inner {width: calc(100% - 40px)}
  .film-home-copy h2 {font-size: 38px}
  .film-home-copy .film-home-beat {font-size: 19px}
  .film-home-posters {padding: 10px; gap: 6px; border-radius: 3px 30px 3px 3px}
  .film-home-posters img, .film-home-posters img:nth-child(2), .film-home-posters img:nth-child(3) {height: 150px}
  .film-story {grid-template-columns: 1fr; gap: 18px; padding: 30px 0}
  .film-story img {width: min(48%, 170px); max-height: none}
  .chapter-5 .chapter-photo {margin-bottom: 30px}
}
@media (max-width: 360px) {
  html[lang="es"] .bio-intro h1 em {font-size: 38px}
}