/* Portfolio stories precede their photographs on every screen size. */
.project-intro { max-width: 1180px; margin: auto; padding: 36px 5% 20px; }
.project-intro h1 { font-size: clamp(34px, 4vw, 58px); margin-bottom: 16px; }
.project-intro .eyebrow { margin-bottom: 12px; }
.project-story { max-width: 980px; }
.project-story p { font-size: 17px; line-height: 1.75; margin-bottom: 12px; }
.project-credit { font-size: 10px; letter-spacing: .13em; color: #bbaa87; margin: 18px 0 0; }
.project-gallery { max-width: 1180px; margin: 0 auto 64px; padding: 0 5%; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 30px; }
.before-after figure { margin: 0; background: #000; min-width: 0; }
.before-after figcaption { padding: 12px 14px; color: #d8bb81; font-size: 11px; letter-spacing: .14em; }
.before-after img { display: block; width: 100%; height: min(62vw, 720px); object-fit: contain; background: #000; }
.gallery-thumbnails { display: flex; gap: 12px; overflow-x: auto; padding: 10px 3px; }
.gallery-thumbnails button { position: relative; flex: 0 0 104px; height: 78px; padding: 3px; border: 1px solid #5d5546; background: #000; color: #eee8dc; cursor: pointer; }
.gallery-thumbnails button[aria-pressed="true"] { border: 2px solid #d8bb81; }
.gallery-thumbnails button img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbnails span { position: absolute; bottom: 1px; right: 2px; background: #000; padding: 0 4px; font-size: 11px; }
.gallery-frames figure, .work-image, .hero figure { background: #000; }
.gallery-frames figure { margin-top: 12px; }
.gallery-frames figcaption { text-align: left; font-size: 12px; line-height: 1.6; padding: 14px 16px; letter-spacing: .03em; }
.gallery-frames a { display: block; }
.gallery-frames img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #000; }
@media (max-width: 540px) {
  .project-intro { padding-top: 24px; padding-bottom: 12px; }
  .project-story p { font-size: 15px; line-height: 1.65; }
  .project-intro h1 { font-size: 36px; }
  .gallery-thumbnails button { flex-basis: 78px; height: 58px; }
  .gallery-frames figcaption { padding: 10px; font-size: 11px; }
  .before-after { gap: 6px; margin-bottom: 22px; }
  .before-after figcaption { padding: 9px; font-size: 9px; }
  .before-after img { height: 64vw; }
}