/* Cases, 21 Oct 2026 (the owner: «некоторые 3джс статичны… обрезаются; есть пустые места в светлой теме, дырки, сильно
   много воздуха; нужно вытягивать уровень до профессионального»; «вижу кейсы без обложки — проверяй везде; сделай крутые
   секции; слабые или повторяющиеся заменяй»). Linked last on every case page (tools/case-fix-20261021.py adds the link);
   every rule is scoped to body.portfolio-case. Findings, screenshots and the lead's checks:
   work/_claude-qa/inner-20261021/cv-cases-report.md */

/* 1. A phone stays a phone. A row of phone screens is a wrapping flex row whose items may grow (flex 1 1 230px) up to
   300 px (portfolio-polish-v54.css, «rows of phones»), but the rule that gives a desktop screen the 1080 px column
   (`…>figure:not(.case-expanded-mobile)…`, max-width min(100%,1080px)) also matches a phone figure inside
   .case-expanded-grid.case-expanded-mobile (the class sits on the row, not on the figure) and outranks the 300 px cap,
   so a lone phone grew to the whole 1080 px column and a pair to 530 px each: a 390 px capture blown up 2.8 times,
   soft and the size of a desktop (bilet-pb-ua, «Search on the phone.», light-projects/bilet-pb-ua-2). Found in apeon,
   bilet-pb-ua, branding-sonic, icp-dashboard, toolkit, uiux-locked-02 and uiux-locked-06. Phones keep 300 px, centred */
html body.portfolio-case main .case-expanded-grid.case-expanded-mobile>figure:not(#_f):not(#_g){flex:0 1 300px!important;width:min(100%,300px)!important;max-width:300px!important}

/* 2. Air on the 8 px steps, a fifth less (the owner today: «сильно много воздуха»; by day the world behind a case is
   paper, so a gap reads as a hole: bilet-pb-ua-1, 140 px of nothing under the showreel, then the chapter's own 158 px).
   At 1440: a chapter 128 px (was 158), a stack 80 (100), a heading to its screen 48 (66), a row 32 (43); at 390: 80,
   48, 32, 24 */
html body.portfolio-case main:not(#_f){--air-head:clamp(32px,3.4vw,48px);--air-stack:clamp(48px,5.6vw,80px);--air-row:clamp(24px,2.3vw,32px);--air-section:clamp(80px,8.9vw,128px)}

/* 3. A caption stands on its screen's left edge («captions: quiet, one line under the screen, on the screen's left
   edge», case-space.css): under a wide screen the 48em caption box was centred, so its words started about 200 px in
   from the screen's edge, on no line of the page (bilet-pb-ua-1 x 388, bilet-pb-ua-2 x 421, the screen at x 180) */
html body.portfolio-case main figure>figcaption:not(#_f){margin-inline:0!important;justify-self:start!important;align-self:flex-start;text-align:left}
html body.portfolio-case figure.series-video.is-band>figcaption:not(#_f){align-self:auto}

/* 4. Phones: the back link («All work») is copied into the frame's top tab on wide screens only; the phone rule that hides
   the copy (transitions-2026.css, display none) is outranked by the rule that shows it (one class more), so on a phone
   a white «← All work» stood in the window's notch over the page: invisible on white paper, printed over every cover
   that passed under it (the same on /cv: phone/light-cv-5 to 7). The original link stays in the opener */
@media (max-width:700px){
 html.has-frame body.portfolio-case .site-header a.frame-back.case-back:not(#_u):not(#_v):not(#_f){display:none!important}
}

/* 5. The finale holds a screen, not a screen and a third: by day a case's world under the footer is the cloud deck's
   contours on paper, so the extra third was an empty stretch with the dots round the footer's links (bilet-pb-ua-7).
   The line and «Let's talk» still hold under the tab while the links come up */
@media (min-width:701px){
 html:is(.space-on,.airy,.room-live) body.portfolio-case #footer .footer-top:not(#_u):not(#_f){min-height:max(100svh,720px)!important;padding-bottom:max(24svh,192px,calc(100svh - var(--fin-rest,100svh) + 24px))!important}
}