/* Keep the story visibly connected to its opening media. Only case-study
   heroes use a height budget; homepage project screens and galleries do not. */
.case-video-first {
 --case-hero-ratio:1.777777778;
 --case-hero-rim:clamp(11px,1.4vw,20px);
 --case-hero-height:max(120px,min(48svh,calc(100svh - 360px)));
 --case-hero-width:calc((var(--case-hero-height) - 2 * var(--case-hero-rim) - 2px) * var(--case-hero-ratio) + 2 * var(--case-hero-rim) + 2px);
}
.case-video-first[data-project-id="hemingway"] {--case-hero-ratio:1.509433962;--case-hero-rim:14px;}
.case-video-first[data-project-id="dcnyc"] {--case-hero-ratio:1.673944687;}
.case-video-first > .case-primary,
.case-video-first > .case-primary-visual,
.case-video-first > .case-primary-image,
.case-detail[data-project-id="hemingway"] > .case-primary-visual {
 width:min(100%,var(--case-hero-width));max-width:1120px;margin:8px auto 0;
}
.case-video-first > :is(.case-primary,.case-primary-visual) .case-film-frame,
.case-video-first > .case-primary-image,
.case-detail[data-project-id="hemingway"] > .case-primary-visual .case-film-frame {
 padding:var(--case-hero-rim);
}
.case-video-first > .case-top {margin-top:24px;}
@media(max-width:760px) {
 .case-video-first {--case-hero-rim:7px;--case-hero-height:max(120px,min(42svh,calc(100svh - 360px)));}
 .case-video-first[data-project-id="hemingway"] {--case-hero-rim:7px;}
 .case-video-first > .case-primary,
 .case-video-first > .case-primary-visual,
 .case-video-first > .case-primary-image,
 .case-detail[data-project-id="hemingway"] > .case-primary-visual {margin-top:5px;}
 .case-video-first > .case-top {margin-top:18px;}
 .case-detail.case-video-first .case-heading :is(h1,h2) {font-size:clamp(28px,8.5vw,34px);}
}
/* On a short, wide screen, use the width instead of making the film tiny.
   Reading and playback keep independent natural heights; the page still scrolls. */
@media(min-width:560px) and (max-height:540px) {
 .case-video-first {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;}
 .case-video-first > .case-primary,
 .case-video-first > .case-primary-visual,
 .case-video-first > .case-primary-image,
 .case-detail[data-project-id="hemingway"] > .case-primary-visual {width:100%;max-width:none;margin-top:8px;}
 .case-video-first > .case-top {margin:8px 0 0;}
 .case-video-first .case-glass {padding:22px 20px;}
 .case-detail.case-video-first .case-heading :is(h1,h2) {font-size:clamp(28px,3vw,36px);}
 .case-video-first > :is(.case-gallery,.case-supporting-visual) {grid-column:1/-1;width:100%;}
}