/* Load after styles.css. Photographs remain unchanged source files. */
.photography-hero {
  background:var(--paper);
}
.marquee-photo {
  position:relative;
  margin:0;
  background:var(--surface);
}
.marquee-photo>img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}
.marquee-photo>figcaption {
  position:absolute;
  left:max(64px,calc((100vw - 1192px)/2));
  bottom:48px;
  padding:16px 24px;
  color:var(--paper);
  background:var(--navy);
  font-size:var(--caption-size);
  line-height:1.65;
}
.marquee-photo>figcaption span {
  display:block;
  margin-bottom:4px;
  font:700 20px/1.15 var(--display);
  letter-spacing:normal;
  text-transform:uppercase;
}
.photography-hero .hero {
  padding-top:72px;
  padding-bottom:64px;
}
.presentation-stories {
  margin-top:64px;
}
.presentation-story {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:72px;
  margin-top:72px;
}
.presentation-story:first-child {
  margin-top:0;
}
.presentation-photo {
  position:relative;
  overflow:hidden;
  margin:0;
  background:var(--paper);
}
.presentation-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Exclude the embedded social tag at the bottom without cutting the speaker. */
.presentation-photo--ecss {
  aspect-ratio:10/9;
}
.presentation-photo--ecss img {
  position:absolute;
  object-position:center top;
}
/* The source has a black top edge and controls around its perimeter. */
.presentation-photo--workshop {
  aspect-ratio:4/3;
}
.presentation-photo--workshop img {
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  object-position:center;
}
.presentation-story--reverse {
  grid-template-columns:1fr 1.1fr;
}
.presentation-story--reverse .presentation-photo {
  order:2;
}
.presentation-copy {
  max-width:400px;
}
.presentation-copy .eyebrow {
  margin-bottom:20px;
}
.presentation-copy h3 {
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
}
.presentation-copy>p:not(.eyebrow) {
  margin-top:24px;
  font-size:14px;
  color:var(--muted);
}
.field-perspective {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  margin-top:88px;
  background:var(--navy);
  color:var(--paper);
}
.field-perspective figure {
  margin:0;
}
.field-perspective img {
  display:block;
  width:100%;
  height:auto;
}
.field-perspective-copy {
  padding:40px;
}
.field-perspective-copy .eyebrow,
.field-perspective-copy h3 {
  color:inherit;
}
.field-perspective-copy .eyebrow {
  margin-bottom:20px;
}
.field-perspective-copy h3 {
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
}
.field-perspective-copy>p:not(.eyebrow) {
  margin-top:24px;
  font-size:13px;
  line-height:1.8;
}
@media(max-width:991px) {
  .presentation-copy h3,.field-perspective-copy h3 { font-size:28px; }
}
@media(max-width:850px) {
  .marquee-photo>figcaption {
    left:32px;
    bottom:32px;
  }
  .presentation-story {
    gap:40px;
  }
  .field-perspective {
    grid-template-columns:1.2fr 1fr;
  }
  .field-perspective-copy {
    padding:28px;
  }
  .field-perspective-copy h3 {
    font-size:28px;
  }
}
@media(max-width:620px) {
  .marquee-photo>img {
    height:auto;
    aspect-ratio:4/5;
    object-position:58% center;
  }
  .marquee-photo>figcaption {
    position:static;
    padding:16px 24px;
    background:var(--paper);
    color:var(--muted);
    font-size:var(--caption-size);
  }
  .marquee-photo>figcaption span {
    display:inline;
    margin-right:12px;
    color:var(--navy);
    font-size:15px;
  }
  .photography-hero .hero {
    padding-block:40px;
  }
  .presentation-stories {
    margin-top:40px;
  }
  .presentation-story,
  .presentation-story--reverse {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:56px;
  }
  .presentation-story--reverse .presentation-photo {
    order:0;
  }
  .presentation-copy {
    max-width:none;
  }
  .presentation-copy h3 {
    font-size:28px;
  }
  .field-perspective {
    grid-template-columns:1fr;
    margin-top:56px;
  }
  .field-perspective-copy {
    padding:32px 24px;
  }
}
@media print {
  .marquee-photo>figcaption {
    position:static;
    background:var(--paper);
    color:var(--ink);
    padding:12px 0;
  }
  .presentation-story,
  .field-perspective {
    break-inside:avoid;
  }
}