/* Owner-supplied photography; keep the subject's central lane unobstructed. */
.photo-story {
  position: relative;
  isolation: isolate;
  --photo-ink: #102344;
  --muted: #eeeef3;
  --line: #ffffff38;
  background: var(--photo-ink);
  border: 0;
}
.photo-blue { max-width: none; padding: 88px max(40px, calc((100vw - 1344px) / 2)); grid-template-columns: 32% 1fr 25%; gap: 0; }
.photo-blue .hero-copy { grid-column: 1; }
.photo-blue .hero-preview { grid-column: 3; }
.photo-story h1 { font-size: clamp(40px, 4vw, 62px); }
.photo-story h2 { font-size: clamp(34px, 3.1vw, 46px); }
.photo-story .app-screen { width: 250px; }
/* Soften only the photography, never the text or app screenshots. */
.photo-story .section-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #a5a4b1; }
.section-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .64; filter: saturate(.72) contrast(.88) blur(1px); transform: scale(1.015); }
.photo-story .section-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #cbc3d626, #10234438); }
.photo-sunset .section-photo { background: #aa958c; }
.photo-sunset .section-photo::after { background: linear-gradient(180deg, #ead6ca26, #24140838); }
.photo-story::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #102344f2, #102344b8 28%, transparent 45%, transparent 63%, #10234470);
}
.photo-story .hero-copy, .photo-story .studio-copy { text-shadow: 0 2px 12px #0004; }
.photo-story figcaption { color: #fff; text-shadow: 0 1px 4px #000; }
.photo-sunset { --photo-ink: #241408; }
.photo-sunset::before { background: linear-gradient(90deg, #24140870, transparent 34%, transparent 55%, #241408cf 72%, #241408f2); }
.photo-sunset .studio-inner { max-width: none; padding: 88px max(40px, calc((100vw - 1344px) / 2)); grid-template-columns: 25% 1fr 32%; gap: 0; min-height: 800px; }
.photo-sunset .editor-preview { grid-column: 1; }
.photo-sunset .studio-copy { grid-column: 3; }
@media (max-width: 1100px) and (min-width: 901px) {
  .photo-story .app-screen { width: 210px; }
  .photo-blue { grid-template-columns: 34% 1fr 25%; }
  .photo-sunset .studio-inner { grid-template-columns: 25% 1fr 34%; }
}
@media (max-width: 900px) {
  /* Let the photograph breathe above the copy rather than crop behind it. */
  .photo-blue { display: grid; grid-template-columns: 1fr; padding: calc(clamp(280px, 65vw, 480px) + 24px) 24px 56px; gap: 40px; }
  .photo-blue .hero-copy, .photo-blue .hero-preview { grid-column: 1; }
  .photo-story .section-photo { bottom: auto; height: clamp(280px, 65vw, 480px); }
  .photo-story::before { bottom: auto; height: clamp(280px, 65vw, 480px); background: linear-gradient(transparent 72%, var(--photo-ink)); }
  .photo-story .section-photo img { object-position: center; }
  .photo-sunset { padding-top: clamp(280px, 65vw, 480px); }
  .photo-sunset .studio-inner { display: flex; padding: 24px 24px 56px; min-height: 0; gap: 40px; }
  .photo-story .app-screen { width: 260px; }
  .photo-story .hero-copy { max-width: 600px; }
}