/* Editorial project narrative. Loaded only by the fuller Lester page initially. */
.portfolio-story .portfolio-story-heading {
  margin: 0 0 25px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}
.portfolio-story .portfolio-story-summary { margin-bottom: 90px; }
.portfolio-story .portfolio-story-section { margin-bottom: 84px; }
.portfolio-story .portfolio-story-copy {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  margin-bottom: 44px;
}
.portfolio-story .portfolio-story-copy > div { max-width: 740px; }
.portfolio-story .portfolio-story-copy p {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 1.65;
}
.portfolio-story .portfolio-story-copy p:last-child { margin-bottom: 0; }
.portfolio-story .portfolio-story-figure { margin: 0 0 48px; }
.portfolio-story .portfolio-story-figure:last-child { margin-bottom: 0; }
.portfolio-story .portfolio-story-figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: #fff;
  mix-blend-mode: normal;
}
.portfolio-story .portfolio-story-figure--technical > img {
  box-shadow: 0 2px 14px #27282012;
}
.portfolio-story .portfolio-story-figure--illustration {
  margin-top: 60px;
  padding: 28px;
  background: #eeebe4;
}
/* Captions reuse the existing .portfolio-media role; notes use .prototype-note. */
.portfolio-story .portfolio-pair { align-items: start; margin-bottom: 48px; }
.portfolio-story .portfolio-pair:last-child { margin-bottom: 0; }
.portfolio-story .portfolio-pair > .portfolio-story-figure { margin: 0; }
.portfolio-story .portfolio-story-note {
  max-width: 740px;
  margin: 30px 0 0 auto;
}
@media (max-width: 900px) {
  .portfolio-story .portfolio-story-copy { gap: 45px; }
}
@media (max-width: 700px) {
  .portfolio-story .portfolio-story-summary { margin-bottom: 48px; }
  .portfolio-story .portfolio-story-section { margin-bottom: 48px; }
  .portfolio-story .portfolio-story-heading { font-size: 29px; margin-bottom: 22px; }
  .portfolio-story .portfolio-story-copy { display: block; margin-bottom: 30px; }
  .portfolio-story .portfolio-story-copy p { font-size: 16px; margin-bottom: 22px; }
  .portfolio-story .portfolio-story-figure { margin-bottom: 30px; }
  .portfolio-story .portfolio-story-figure--illustration { padding: 12px; margin-top: 36px; }
  .portfolio-story .portfolio-pair { margin-bottom: 30px; }
  .portfolio-story .portfolio-pair > .portfolio-story-figure + .portfolio-story-figure { margin-top: 30px; }
}