/* Project stories share the portfolio's type, spacing and quiet monochrome stage. */
.story-continuation{display:block;margin-top:1em}
#overlay .jewelry-project .desc{max-width:450px;line-height:1.55}
#overlay.project-overlay .case-marketing .case-bottom{right:54%;top:21%;bottom:7%;align-items:flex-end}
#overlay.project-overlay .case-marketing h2{font-size:clamp(42px,5vw,82px);line-height:.9}
#overlay.project-overlay .case-marketing .case-bottom p:last-child{max-width:460px;font-size:clamp(13px,1.1vw,17px);line-height:1.55}
#overlay.project-overlay .marketing-stage{inset:13% 4% 12% 49%;gap:1.4vw;transform:perspective(1400px) rotateY(-7deg)}
@media(min-width:701px){
  #overlay.project-overlay .case-marketing .case-bottom{left:4%;right:70%;top:16%;bottom:9%}
  #overlay.project-overlay .case-marketing h2{font-size:clamp(32px,4.2vw,76px)}
  #overlay.project-overlay .case-marketing .case-bottom p:last-child{font-size:clamp(12px,1.05vw,17px)}
  #overlay.project-overlay .marketing-stage{inset:9% 2.5% 7% 32%;gap:1.1vw;transform:perspective(1600px) rotateY(-4deg)}
  #overlay.project-overlay .marketing-stage .reel{box-sizing:border-box;flex:0 0 auto;width:min(calc((100% - 2.2vw)/3),calc(79dvh * 9/19.5));height:auto;aspect-ratio:9/19.5;max-height:none}
}
.cluster-game .cluster-kicker{white-space:normal}

.camera-gallery.photo-editorial{padding:108px 7.5vw 55px;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);grid-template-rows:minmax(0,1fr);gap:6vw;align-items:stretch;background:radial-gradient(ellipse at 72% 40%,#24272c,#101114 56%,#060607);backdrop-filter:none;overflow:hidden}
.gallery-masthead{position:absolute;top:38px;left:5vw;right:80px;display:flex;gap:25px;font-size:11px;letter-spacing:.13em;font-weight:700;color:#aaa}
.gallery-masthead #galleryCount{color:#fff;min-width:48px;font-variant-numeric:tabular-nums}
.gallery-story{align-self:end;padding-bottom:42px;min-width:0}
.gallery-story h2{font:800 clamp(44px,5.2vw,84px)/.91 "Inter Tight",sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:0 0 28px;max-width:650px;text-wrap:balance;color:#f0f0ec}
.gallery-story .case-eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:23px;color:#a5a7a9}
.gallery-context{font-size:10px;font-weight:700;letter-spacing:.11em;line-height:1.6;margin:0 0 17px;color:#f0f0ec}
.gallery-description{font-size:clamp(14px,1.18vw,18px);line-height:1.6;color:#b8b9bc;max-width:455px;margin:0}
.gallery-byline{border-top:1px solid #ffffff24;padding-top:18px;margin:26px 0 0;font-size:9px;letter-spacing:.15em;color:#777d82}
.camera-gallery.photo-editorial .gallery-visual{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;min-width:0}
.gallery-image-stage{--photo-aspect:.667;position:relative;width:min(100cqw,calc((100cqh - 42px)*var(--photo-aspect)));height:min(calc(100cqh - 42px),calc(100cqw / var(--photo-aspect)));overflow:hidden;flex:none}
.camera-gallery.photo-editorial .gallery-image-stage img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none}
.camera-gallery.photo-editorial .gallery-image-stage.is-cropped img{object-fit:cover;object-position:center top}
.camera-gallery.photo-editorial .gallery-image-stage.is-framed img{position:absolute;left:var(--frame-left);top:var(--frame-top);width:var(--frame-width);height:var(--frame-height);object-fit:contain}
.camera-gallery.photo-editorial figcaption{width:100%;justify-content:center;font-size:10px;line-height:1.5;letter-spacing:.035em;text-align:center;color:#8d9196;margin:16px 0 0}
.camera-gallery.photo-editorial .gallery-close{position:absolute;right:18px;top:14px;width:48px;height:48px;border:0;border-radius:50%;background:#090a0cb0;font-size:30px;font-weight:300}
.camera-gallery.photo-editorial .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:76px;border:1px solid #ffffff30;border-radius:0;background:#08090b70;font-size:40px}
.camera-gallery.photo-editorial .gallery-prev{left:12px}
.camera-gallery.photo-editorial .gallery-next{right:12px}
.camera-gallery.photo-editorial button:hover{background:#efefeb;color:#08090a}
.camera-gallery.photo-editorial button:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media(max-width:900px){
  #overlay .jewelry-project .desc{font-size:11px;line-height:1.4;max-width:none}
  #overlay .jewelry-project .desc .story-continuation{margin-top:.6em}
  .camera-gallery.photo-editorial{padding:70px 8vw 20px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:20px}
  .gallery-masthead{top:28px;left:6vw;font-size:8px;gap:15px}
  .gallery-visual{grid-row:1}
  .gallery-story{grid-row:2;padding:0}
  .gallery-story h2{font-size:clamp(28px,4.8vh,44px);line-height:.93;max-width:520px;margin:0 0 13px;text-wrap:initial}
  .gallery-story .case-eyebrow{font-size:8px;margin-bottom:10px}
  .gallery-context{font-size:8px;margin-bottom:8px;letter-spacing:.08em}
  .gallery-description{font-size:12px;line-height:1.5;max-width:none}
  .gallery-byline{margin-top:12px;padding-top:10px;font-size:7px}
  .camera-gallery.photo-editorial .gallery-nav{width:28px;height:52px;font-size:28px;top:32%}
  .camera-gallery.photo-editorial .gallery-prev{left:2px}.camera-gallery.photo-editorial .gallery-next{right:2px}
  .camera-gallery.photo-editorial figcaption{font-size:8px;margin-top:10px}
}
@media(max-width:700px){
  #overlay.project-overlay .case-marketing{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:75px 6vw 25px}
  #overlay.project-overlay .marketing-stage{position:relative;inset:auto;min-height:0;width:100%;height:100%;gap:3%;transform:none;grid-row:1}
  #overlay.project-overlay .marketing-stage .reel{height:min(100%,38vh);max-height:none;width:31%;flex:0 1 auto;aspect-ratio:9/16}
  #overlay.project-overlay .case-marketing .case-bottom{position:static;display:block;grid-row:2;min-width:0}
  #overlay.project-overlay .case-marketing h2{font-size:clamp(32px,7.4vw,49px);line-height:.92}
  #overlay.project-overlay .case-marketing .case-bottom p:last-child{font-size:12px;line-height:1.45;margin-top:15px;max-width:none}
  #overlay.project-overlay .case-marketing .case-eyebrow{font-size:8px;margin-bottom:12px}
  .cluster-game .cluster-kicker{font-size:7px;letter-spacing:.03em}
}
@media(max-height:700px) and (max-width:700px){
  .camera-gallery.photo-editorial{padding-top:60px;gap:10px}
  .gallery-story h2{font-size:28px;margin-bottom:10px}
  .gallery-description{font-size:11px;line-height:1.4}
  .gallery-byline{display:none}
  #overlay .jewelry-project .desc{font-size:10px}
  #overlay.project-overlay .case-marketing .case-bottom p:last-child{font-size:11px;line-height:1.4}
}
@media(max-height:600px) and (min-width:701px){
  .camera-gallery.photo-editorial{padding:64px 8vw 20px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:5vw}
  .gallery-story{grid-row:1;align-self:center}.gallery-visual{grid-column:2;grid-row:1}
  .gallery-story h2{font-size:30px}.gallery-description{font-size:11px;line-height:1.45}
  .gallery-byline{display:none}
  #overlay.project-overlay .case-marketing h2{font-size:38px}
  #overlay.project-overlay .case-marketing .case-bottom{top:70px;bottom:25px}
  #overlay.project-overlay .case-marketing .case-bottom p:last-child{font-size:11px;line-height:1.4}
  #overlay.project-overlay .case-marketing .case-eyebrow{font-size:8px;margin-bottom:12px}
}
