/* Branding-case corrections, scoped to the three case pages. */
.branding-case .project-navigation{border-top:0;margin-top:32px;padding-top:0}
@media(min-width:761px){
 .branding-case .project-opening>p:last-child{max-width:72ch;text-wrap:balance}
 .branding-case .case-story{align-items:start;gap:7%;grid-template-columns:1.2fr 1fr}
 .branding-case .case-story.text-only{grid-template-columns:1fr}
 .branding-case .case-portrait{position:sticky;top:32px;align-self:start;max-height:calc(100vh - 64px)}
 .branding-case .case-story-copy{min-height:clamp(650px,55vw,790px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:100px;border:1px solid var(--line);border-radius:0;padding:38px clamp(20px,3vw,48px);text-align:right}
 .branding-case .case-story-copy>div{position:relative;max-width:320px;width:100%;margin:0 auto}
 .branding-case .case-story-copy>div+div:before{content:'';position:absolute;top:-78px;right:50%;height:52px;width:1px;background:var(--line)}
 .branding-case .case-story-copy h2{font-size:18px;line-height:1.5;margin:0 0 22px}
 .branding-case .case-story-copy p{font-size:15px;line-height:1.95;margin:0;text-wrap:balance}
 .branding-case .case-story.text-only .case-story-copy{min-height:0}
}
@media(max-width:760px){
 .branding-case{display:flex;flex-direction:column}
 .branding-case .project-opening{order:0}
 .branding-case .case-story{display:contents}
 .branding-case .case-story-copy{order:1;margin:10px 0 35px}
 .branding-case .project-hero-image{order:2}
 .branding-case .case-portrait{order:3;margin:25px 0 35px}
 .branding-case .case-gallery{order:4}
 .branding-case .case-closing{order:5}
 .branding-case .project-navigation{order:6;margin-top:28px;padding-top:0}
}

/* Full-height story frame for the newly added Popking case only. */
@media(min-width:761px){
 .case-story-full-height .case-story-copy{align-self:stretch}
}
@media(max-width:760px){
 .case-story-full-height .case-story-copy{border:1px solid var(--line);border-radius:0;padding:26px 22px;min-height:0}
}

/* Round 15b rebuilt from approved 15a: fixed photographic ratios and spacing. */
.branding-case{padding-inline:24px}
.branding-case .project-hero-image,.branding-case .case-closing{aspect-ratio:16/9;min-height:0}
.branding-case .project-hero-image img,.branding-case .case-closing img{display:block;width:100%;height:100%;object-fit:contain}
.branding-case .case-story{margin-block:16px}
.branding-case .case-portrait{aspect-ratio:4/5;max-height:none}
.branding-case .case-portrait img{display:block;width:100%;height:100%;object-fit:contain}
.branding-case .case-gallery{gap:16px}
.branding-case .case-gallery figure{grid-column:auto}
.branding-case .case-gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.branding-case .case-closing{margin-top:16px}
@media(min-width:761px){
 .branding-case .case-portrait{width:min(100%,calc((100svh - 64px) * .8));justify-self:start}
}
@media(max-width:760px){
 .branding-case .case-portrait{width:100%;margin:16px 0}
}

/* Sticky-area correction only. Galleries and mobile layout remain unchanged. */
@media(min-width:761px){
 .branding-case .case-story{display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:flex-start;gap:16px;padding:0;margin-inline:16px}
 .branding-case .case-portrait{flex:0 0 auto;width:min(66%,640px);height:800px;max-height:none;aspect-ratio:auto;position:sticky;top:0;align-self:flex-start;margin:0}
 .branding-case .case-story-copy{flex:1 1 0;min-width:0;width:auto;height:auto;min-height:0;align-self:flex-start;justify-content:flex-start;gap:0;padding:64px 50px;position:static}
 .branding-case .case-story-copy>div+div{margin-top:180px}
 .branding-case .case-story-copy>div+div:before{top:-116px;height:52px}
 .branding-case .case-story-copy h2{margin-bottom:20px}
}

/* Match the portrait box to its displayed image, removing contain letterboxing. */
@media(min-width:761px){
 .branding-case .case-portrait:has(img[src*="/popking/"]){width:min(66%,calc(800px * 1147 / 1372))}
 .branding-case .case-portrait img{object-position:left top}
}

/* Mobile-only case corrections. The approved desktop layout is unchanged. */
.branding-case .project-navigation :is(.nav-label-desktop,.nav-label-mobile){font:inherit}
.branding-case .project-navigation .nav-label-mobile{display:none}
@media(max-width:760px){
 .branding-case .project-opening{text-align:center}
 .branding-case .project-opening>p:last-child{width:calc(100% - 16px);max-width:32ch;margin-inline:auto;text-wrap:pretty}
 .branding-case .project-hero-image{order:1}
 .branding-case .case-story-copy{order:2;width:calc(100% - 24px);max-width:360px;margin-inline:auto;align-self:center}
 .branding-case .case-story-copy p{text-wrap:pretty}
 .branding-case .case-portrait{position:static}
 .branding-case .project-navigation{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px}
 .branding-case .project-navigation .text-link{align-self:auto;white-space:nowrap}
 .branding-case .project-navigation .nav-label-desktop{display:none}
 .branding-case .project-navigation .nav-label-mobile{display:inline-flex}
}

/* Restore the approved story-frame language on mobile only. */
@media(max-width:760px){
 .branding-case .case-story-copy{display:flex;flex-direction:column;align-items:center;gap:0;border:1px solid var(--line);border-radius:0;padding:36px clamp(16px,5vw,26px);height:auto;min-height:0;text-align:right}
 .branding-case .case-story-copy>div{position:relative;width:100%;max-width:300px;margin:0 auto}
 .branding-case .case-story-copy>div+div{margin-top:100px}
 .branding-case .case-story-copy>div+div:before{content:'';position:absolute;top:-68px;right:50%;height:36px;width:1px;background:var(--line)}
 .branding-case .case-story-copy h2{margin:0 0 16px}
 .branding-case .case-story-copy p{margin:0;max-width:none}
}

/* 20C: title alignment and tablet-only story layout. Desktop story is unchanged. */
@media(min-width:761px){
 .branding-case .project-opening{max-width:none}
 .branding-case .project-opening h1{text-align:center}
}
@media(min-width:761px) and (max-width:1050px){
 .branding-case .case-story{flex-direction:column;align-items:center}
 .branding-case .case-story-copy{order:0;flex:none;width:100%;max-width:640px;align-self:center}
 .branding-case .case-story .case-portrait:has(img){order:1;position:static;width:min(100%,640px);height:auto;aspect-ratio:4/5;align-self:center}
 .case-story-full-height .project-opening>p:last-child{max-width:58ch;text-wrap:balance}
}

/* Opening paragraphs only: center text and its existing-width container at every viewport. */
.branding-case .project-opening>p:last-child{text-align:center;margin-inline:auto}