[hidden] { display: none !important; }
.photo-layout { width: min(1240px, 100%); display: grid; grid-template-columns: .82fr 1.18fr; gap: 5vw; align-items: center; }
.photo-copy { padding: 15px 0; }
.photo-copy h2 { font-size: clamp(3rem, 5vw, 5.6rem); line-height: 1.08; margin: 20px 0 24px; }
.photo-copy > p:not(.eyebrow) { max-width: 450px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.15rem, 1.8vw, 1.9rem); line-height: 1.5; color: #e9d6e3; }
.photo-signature { margin-top: 27px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #e8b6b8; }
.photo-gallery { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.photo-frame { width: min(100%, 620px); height: 420px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; overflow: hidden; border: 8px solid #f4dfdf; border-radius: 10px; background: #27182f; box-shadow: 0 35px 100px #0008, 0 0 55px #df96bb36; transition: width .55s ease, height .55s ease, opacity .25s ease, transform .45s ease; opacity: 1; transform: none; }
.photo-frame.is-changing { opacity: .12; transform: translateY(10px) scale(.97); }
.photo-frame img { grid-area: 1 / 1; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; display: block; object-fit: contain; }
.photo-frame video { grid-area: 1 / 1; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; display: block; object-fit: contain; background: #100b18; }
.photo-frame { position: relative; }
.video-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #fff8; border-radius: 100px; padding: 14px 22px; background: #1b112bcc; color: #fff; font-weight: 700; white-space: nowrap; }
.photo-placeholder { grid-area: 1 / 1; min-width: 0; min-height: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #704867, #26182f 72%); }
.photo-placeholder span { color: #f4cbca; font-size: 4rem; }
.photo-placeholder p { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2.8rem); line-height: 1.25; margin: 20px; }
.photo-meta { width: var(--frame-width, 100%); display: flex; justify-content: space-between; gap: 20px; min-height: 28px; align-items: center; margin: 20px 5px 7px; color: #ead0d8; font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; transition: width .55s ease; }
.photo-meta #photo-counter { flex: none; font-family: 'DM Sans', Arial, sans-serif; font-size: .7rem; letter-spacing: .18em; color: #c5afc5; }
.photo-controls { width: var(--frame-width, 100%); display: flex; justify-content: center; align-items: center; gap: 18px; transition: width .55s ease; }
.photo-controls button { width: 34px; height: 34px; border: 1px solid #ffffff55; border-radius: 50%; background: #ffffff0b; color: #f2d7df; }
.photo-controls button:hover { background: #ffffff25; }
.photo-dots { display: flex; gap: 5px; justify-content: center; align-items: center; min-height: 10px; }
.photo-dots span { width: 5px; height: 5px; border-radius: 50%; background: #ffffff66; }
.photo-dots span.active { width: 17px; border-radius: 5px; background: #ecc3c1; }
@media (max-width: 800px) {
  .photo-layout { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .photo-copy h2 { font-size: 2.8rem; margin: 8px 0 10px; }
  .photo-copy > p:not(.eyebrow) { font-size: 1.1rem; margin: 0 auto; }
  .photo-signature { margin-top: 12px; }
  .photo-frame { height: 34vh; min-height: 0; border-width: 6px; }
  .photo-meta { margin: 10px 0 4px; font-size: .85rem; }
}