/* Project photographs with the same soft, plum-toned surround as the hero. */
.hero::before { filter: grayscale(1) contrast(1.16) blur(3px); transform: scale(1.03); }
.project-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
.project-photo {
  position: relative; isolation: isolate; display: grid; place-items: center;
  height: 390px; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid rgba(157,141,143,.48); border-radius: 3px; background: var(--deep);
}
.project-photo::before, .report-photo::before {
  content: ''; position: absolute; inset: -24px; z-index: -2; pointer-events: none;
  background: var(--scene) center / cover no-repeat;
  filter: blur(18px) grayscale(.45) saturate(.55); opacity: .78;
}
.project-photo::after, .report-photo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg,rgba(70,52,78,.55),rgba(43,34,51,.35));
}
.project-photo > img {
  position: relative; display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: contain; object-position: center; transition: transform .6s ease;
}
.project-photo figcaption {
  position: absolute; z-index: 1; inset: auto 0 0; padding: 46px 25px 22px;
  background: linear-gradient(transparent,rgba(32,23,39,.9)); color: var(--ink);
  pointer-events: none;
}
.project-photo figcaption small { display: block; color: var(--yellow); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-photo figcaption strong { display: block; font: 600 1.8rem/1.1 var(--display); letter-spacing: .01em; margin-top: 7px; }
.project-photo--wide { height: 420px; margin-top: 34px; }
.report-summary { min-width: 0; }
.report-summary .project-photo { height: 330px; margin-bottom: 24px; }
.report-summary .report-list { margin-top: 0; }
.about-aside { min-width: 0; }
.about-aside .project-photo { height: 400px; margin-top: 32px; }

/* Transparent founder portrait, using the website palette as its backdrop. */
.founder-portrait {
  position: relative; isolation: isolate; display: grid; place-items: end center;
  height: 560px; margin: 0; overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(157,141,143,.48);
  background: radial-gradient(ellipse at 50% 34%,rgba(155,120,111,.28),transparent 65%),linear-gradient(145deg,#5a4562,#2b2233);
}
.founder-portrait::before {
  content: ''; position: absolute; inset: 28px; border: 1px solid rgba(250,237,38,.13);
  border-radius: 50% 50% 3px 3px; z-index: -1; pointer-events: none;
}
.founder-portrait img {
  display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain;
  object-position: center bottom; filter: drop-shadow(0 12px 24px rgba(24,16,30,.2));
}
.founder-portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 28px 24px;
  background: linear-gradient(transparent,rgba(32,23,39,.92));
}
.founder-portrait figcaption strong { display: block; color: var(--yellow); font: 600 2.4rem/1 var(--display); }
.founder-portrait figcaption span { display: block; margin-top: 8px; color: var(--ink); font-size: .84rem; }
.about-aside--founder .quote { margin-top: 30px; font-size: clamp(1.8rem,2.5vw,2.3rem); line-height: 1.25; }

/* Blurred site photographs continue behind the film players and key sections. */
.photo-backdrop { position: relative; isolation: isolate; overflow: hidden; }
.photo-backdrop::before {
  content: ''; position: absolute; z-index: -2; inset: -18px; pointer-events: none;
  background: var(--scene) center / cover no-repeat;
  filter: blur(7px) grayscale(.6) saturate(.55); opacity: .7;
}
.photo-backdrop::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,rgba(43,34,51,.9),rgba(70,52,78,.69));
}
.photo-backdrop > .wrap { position: relative; }
.journal-film.photo-backdrop { background: var(--deep); }
.journal-film.photo-backdrop::before { filter: blur(19px) saturate(.4); opacity: .82; }
.journal-film.photo-backdrop::after { background: rgba(43,34,51,.48); }
.journal-film.photo-backdrop video { position: relative; }
.cta.photo-backdrop { background: var(--deep); color: var(--ink); }
.cta.photo-backdrop::before { background-position: center 60%; filter: blur(5px) grayscale(.6); opacity: .9; }
.cta.photo-backdrop::after { background: linear-gradient(90deg,rgba(43,34,51,.89),rgba(70,52,78,.71),rgba(43,34,51,.89)); }
.cta.photo-backdrop .eyebrow, .cta.photo-backdrop h2 { color: var(--yellow); }
.cta.photo-backdrop p { color: #eee5e8; }
.cta.photo-backdrop .btn { color: var(--deep); background: var(--yellow); border-color: var(--yellow); }

/* The report's portrait photographs get a soft surround without altering them. */
.report-photo { position: relative; isolation: isolate; height: 350px; overflow: hidden; background: var(--deep); }
.photo-grid .report-photo img { position: relative; height: 100%; background: transparent; }
@media(hover:hover) {
  .project-photo:hover > img { transform: scale(1.025); }
}
@media(max-width:820px) {
  .project-photo { height: 350px; }
  .project-photo--wide { height: 390px; }
  .about-aside .project-photo { max-width: 600px; }
  .founder-portrait { max-width: 600px; height: 540px; }
}
@media(max-width:620px) {
  .project-photos { grid-template-columns: 1fr; gap: 20px; }
  .project-photo { height: 370px; }
  .project-photo--wide { height: 350px; margin-top: 26px; }
  .project-photo figcaption { padding: 44px 22px 22px; }
  .project-photo figcaption strong { font-size: 1.65rem; }
  .report-summary .project-photo { height: 320px; }
  .about-aside .project-photo { height: 370px; margin-top: 26px; }
  .founder-portrait { height: 480px; }
  .founder-portrait figcaption { padding: 46px 22px 22px; }
  .founder-portrait figcaption strong { font-size: 2.2rem; }
  .about-aside--founder .quote { font-size: 1.85rem; margin-top: 26px; }
  .report-photo { height: 360px; }
}
@media(prefers-reduced-motion:reduce) {
  .project-photo > img { transition: none; }
  .project-photo:hover > img { transform: none; }
}
@media print {
  .report-photo { height: 240px; background: #fff; }
  .report-photo::before, .report-photo::after { display: none; }
  .photo-grid .report-photo img { height: 240px; }
}