/* Only the requested sunset placements; the approved global design stays in style.css. */
.sunset-photo { margin: 0; min-width: 0; }
.sunset-photo picture { display: block; }
.sunset-photo img { display: block; width: 100%; height: auto; object-fit: contain; }

/* A full-height portrait and the existing manifesto copy share the white space. */
.homepage .manifesto-sunset { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; margin-top: 58px; }
.homepage .manifesto-sunset .sunset-photo { width: 86%; max-width: 426px; margin-left: 5%; }
.homepage .manifesto-sunset .manifestotext { margin-left: 0; max-width: 30ch; }
.sunset-home-transition { margin: 0 4% 105px; }
.sunset-home-transition .sunset-photo { width: 100%; max-width: 1320px; margin-inline: auto; }
.homepage .sunset-approach { max-width: 426px; margin: 0 0 38px auto; }
.sunset-home-monochrome { padding: 90px 8% 0; }
.sunset-home-monochrome .sunset-photo { width: 76%; max-width: 950px; margin: 0 auto; }

/* A single added photograph in the Portraits stage of the Experience page. */
.sunset-stage { grid-column: 2 / -1; width: 48%; max-width: 426px; justify-self: end; margin: 35px 7% 0 0; }

/* Extend the existing Stories index with one portrait cover. */
.sunset-storyindex { row-gap: 90px; }
.sunset-cover { grid-column: 1 / -1; width: 43%; max-width: 426px; margin: 20px 0 0 12%; }
.sunset-cover .textlink { margin-top: 22px; }

/* Eight frames, with space for scale, intimacy, landscape and movement. */
.sunset-narrative { --sunset-space: clamp(80px, 10vw, 165px); }
.sunset-opening-scene { display: flex; align-items: center; justify-content: center; min-height: 92svh; background: var(--ink); padding: 65px 7%; }
.sunset-story-opening { width: min(48%, 520px); }
.sunset-story-opening img { max-height: 82svh; object-fit: contain; }
.sunset-story-panorama { width: 94%; max-width: 1440px; margin: var(--sunset-space) auto; }
.sunset-diptych { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7%; align-items: start; margin: var(--sunset-space) 12%; }
.sunset-diptych > .sunset-photo:nth-child(2) { margin-top: 65px; }
.sunset-story-landscape { width: 78%; max-width: 1100px; margin: var(--sunset-space) 6% var(--sunset-space) auto; }
.sunset-story-monochrome { width: 65%; max-width: 960px; margin: var(--sunset-space) auto var(--sunset-space) 8%; }
.sunset-story-movement { width: 38%; max-width: 426px; margin: var(--sunset-space) 18% var(--sunset-space) auto; }
.sunset-story-ending { width: 30%; max-width: 340px; margin: calc(var(--sunset-space) * 1.15) auto; }

@media (max-width: 1050px) {
  .homepage .manifesto-sunset { gap: 8%; }
  .homepage .manifesto-sunset .sunset-photo { width: 100%; margin: 0; }
  .sunset-home-monochrome .sunset-photo { width: 85%; }
  .sunset-stage { width: 60%; }
  .sunset-story-opening { width: min(60%, 500px); }
}

@media (max-width: 760px) {
  .homepage .manifesto-sunset { display: flex; flex-direction: column; align-items: stretch; margin-top: 35px; gap: 35px; }
  .homepage .manifesto-sunset .sunset-photo { width: 88%; max-width: 402px; margin: 0; }
  .homepage .manifesto-sunset .manifestotext { margin-left: 12%; max-width: 30ch; }
  .sunset-home-transition { margin: 0 0 75px; }
  .homepage .sunset-approach { width: 100%; margin-bottom: 30px; }
  .sunset-home-monochrome { padding: 65px 7% 0; }
  .sunset-home-monochrome .sunset-photo { width: 100%; }
  .sunset-stage { width: 82%; max-width: 406px; margin: 32px 0 0 auto; }
  .sunset-storyindex .sunset-cover { width: 88%; max-width: 402px; margin: 70px 0 0; }
  .sunset-narrative { --sunset-space: 72px; }
  .sunset-opening-scene { min-height: 85svh; padding: 40px 7%; }
  .sunset-story-opening { width: 100%; max-width: 402px; }
  .sunset-story-opening img { max-height: 78svh; }
  .sunset-story-panorama { width: 100%; }
  .sunset-diptych { grid-template-columns: 1fr; gap: 28px; margin-inline: 7%; }
  .sunset-diptych > .sunset-photo:first-child { width: 78%; }
  .sunset-diptych > .sunset-photo:nth-child(2) { width: 88%; margin: 0 0 0 auto; }
  .sunset-story-landscape { width: 93%; margin-right: 0; }
  .sunset-story-monochrome { width: 86%; margin-inline: 7%; }
  .sunset-story-movement { width: 76%; max-width: 406px; margin-right: 7%; }
  .sunset-story-ending { width: 65%; }
}