/* Editorial spreads: natural proportions, deliberately offset, never cropped. */
.intro { position: relative; }
.intro .back { display: inline-flex; min-height: 44px; align-items: center; font-size: 11px; font-weight: 400; }
.intro h1 { margin: 4px 0 0; font-size: clamp(30px, 4.1vw, 58px); font-weight: 300; line-height: 1.1; }
.portfolio-scroll { display: inline-block; margin-top: 12px; color: #777; font-size: 11px; text-decoration: none; }
.gallery { max-width: 1300px; margin: auto; }
.editorial-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; margin-bottom: clamp(36px, 5vw, 72px); }
.project-media { margin: 0; min-width: 0; grid-row: 1; grid-column: 1 / 8; }
.project-media img, .project-media video { display: block; width: 100%; height: auto; background: #f3f3f1; }
.photo-open { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hero .project-media { grid-column: 1 / 7; }
.hero.wide .project-media { grid-column: 1 / 10; }
.pair .project-media:first-child { grid-column: 1 / 8; }
.pair .project-media:last-child { grid-column: 7 / 13; margin-top: 28%; position: relative; z-index: 1; }
.pair.reverse .project-media:first-child { grid-column: 6 / 13; }
.pair.reverse .project-media:last-child { grid-column: 1 / 7; }
.solo .project-media { grid-column: 2 / 8; }
.solo.right .project-media { grid-column: 7 / 13; }
.solo.wide .project-media { grid-column: 3 / 13; }
.project-details { text-align: center; margin: 40px auto 0; }
.photo-dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 64px 70px; overflow: hidden; background: #101010; color: #fff; }
.photo-dialog::backdrop { background: #101010; }
.photo-dialog[open] { display: grid; place-items: center; }
.photo-frame { width: 100%; height: calc(100dvh - 128px); min-height: 0; display: grid; place-items: center; touch-action: pan-y; }
.photo-frame img { display: block; width: auto; height: auto; max-width: calc(100vw - 140px); max-height: calc(100dvh - 128px); object-fit: contain; }
.photo-dialog button { position: absolute; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; min-width: 44px; min-height: 44px; }
.photo-close { top: 16px; right: 20px; font-size: 28px !important; }
.photo-prev, .photo-next { top: calc(50% - 22px); font-size: 36px !important; }
.photo-prev { left: 12px; }.photo-next { right: 12px; }
.photo-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #bbb; font-size: 11px; }
body.photo-viewing { overflow: hidden; }
@media (max-width: 700px) {
  .intro { margin-bottom: 24px; }
  .editorial-spread { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 32px; }
  .hero .project-media { grid-column: 1 / 11; }
  .hero.wide .project-media, .solo.wide .project-media { grid-column: 1 / 13; }
  .solo .project-media { grid-column: 1 / 11; }
  .solo.right .project-media { grid-column: 3 / 13; }
  /* Compact diptychs keep the whole image visible instead of tiny overlaps. */
  .pair .project-media:first-child { grid-column: 1 / 8; }
  .pair .project-media:last-child { grid-column: 8 / 13; margin-top: 35%; }
  .pair.reverse .project-media:first-child { grid-column: 6 / 13; }
  .pair.reverse .project-media:last-child { grid-column: 1 / 6; }
  .photo-dialog { padding: 60px 44px; }
  .photo-frame { height: calc(100dvh - 120px); }
  .photo-frame img { max-width: calc(100vw - 88px); max-height: calc(100dvh - 120px); }
  .photo-close { right: 8px; }.photo-prev { left: 0; }.photo-next { right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .photo-dialog[open] { animation: photo-arrive .25s ease both; }
  @keyframes photo-arrive { from { opacity: 0; } to { opacity: 1; } }
}