/* Case pages, 16 Oct 2026 (the owner: "в открытых кейсах мало воздуха и скучновато оформлено"; no frames on plates).
   Loaded last on every case page. The product's own screen is the subject of the opener: the cover artwork (a framed
   device over an aura) stands down, the title hangs from the left axis above the screen, the role answers it from a
   second axis on the right (Laguta's CTMK spread: an image plane against a typographic mass sharing one edge; Chipsa's
   openers: supporting facts on one secondary axis). The chapters alternate a reading measure with a wide plane, so no
   two consecutive chapters share a structure. */

/* ---- the opener ---- */
html body.portfolio-case .case-cover:not(.is-locked){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:clamp(28px,5svh,64px);align-items:start;padding:clamp(128px,17svh,176px) var(--gutter) 0;min-height:0}
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-copy{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);align-items:end;column-gap:6vw;row-gap:0;min-width:0}
html body.portfolio-case .case-cover:not(.is-locked) .case-back{grid-column:1/-1;margin:0 0 clamp(36px,6svh,72px)}
html body.portfolio-case .case-cover:not(.is-locked) h1,html body.portfolio-case .case-cover:not(.is-locked) .case-cover-copy h1[style*="--case-title-fit"]{font-size:clamp(60px,9.4vw,176px)!important;line-height:.92;letter-spacing:-.055em;margin:0;text-wrap:balance;overflow-wrap:normal}
html body.portfolio-case .case-cover:not(.is-locked) .case-role{margin:0 0 .35em!important;max-width:26em!important;font-size:17px;line-height:1.5;align-self:end}
/* the screen: a measure narrower than the page (the owner: "скрины не на всю ширину", "по воздушнее"; on a phone the row of phones stays whole, only smaller: "не убрать, а просто чуть меньше"), centred under
   the title on the same measure as every chapter's screens, the product's own top, cut by the bottom of the first viewport */
html body.portfolio-case{--case-shot:min(1080px,76vw,125vh)}
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art{width:min(100%,var(--case-shot));justify-self:center;margin:clamp(24px,4svh,56px) auto 0;max-height:min(70svh,860px);overflow:hidden;border-radius:var(--r-media,20px)!important;background:transparent!important;aspect-ratio:auto!important;padding:0!important;display:block!important;place-items:initial}
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art>img{display:block;width:100%!important;max-width:none!important;height:auto!important;max-height:min(70svh,860px)!important;object-fit:cover!important;object-position:top center;transform:none!important}
/* a row of phone screens stands whole, smaller than a desktop screen */
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=phones]{width:min(100%,calc(var(--case-shot) * .86));max-height:none;border-radius:0!important}
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=phones]>img{max-height:none!important;object-fit:contain!important}
@media (max-width:700px){
 html body.portfolio-case{--case-shot:100%}
 html body.portfolio-case .case-cover:not(.is-locked){padding-top:112px;gap:28px}
 html body.portfolio-case .case-cover:not(.is-locked) .case-cover-copy{grid-template-columns:minmax(0,1fr)}
 html body.portfolio-case .case-cover:not(.is-locked) h1,html body.portfolio-case .case-cover:not(.is-locked) .case-cover-copy h1[style*="--case-title-fit"]{font-size:clamp(44px,14vw,64px)!important}
 html body.portfolio-case .case-cover:not(.is-locked) .case-role{margin:18px 0 0!important}
 html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art,html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art>img{max-height:58svh!important}
  html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=phones]{width:100%;max-height:none!important}
 html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=phones]>img{max-height:none!important;object-fit:contain!important}
}

/* ---- the chapters: no two in a row with the same structure ---- */
/* a chapter's heading row: the statement on the left axis, the copy on the second axis; the copy at reading size */
html body.portfolio-case main .series-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:6vw;align-items:end}
html body.portfolio-case main .series-heading>h2{margin:0}
html body.portfolio-case main .series-heading>p{margin:0;max-width:34em;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--muted)}
/* every second chapter hangs its copy under the statement in a narrow measure, with the right half of the row empty
   (the rest after a dense screen) */
html body.portfolio-case main .series-section:nth-of-type(2n) .series-heading{grid-template-columns:minmax(0,.62fr) minmax(0,.38fr)}
html body.portfolio-case main .series-section:nth-of-type(2n) .series-heading>p{grid-column:1;max-width:30em}
/* screens never run to the gutters: one narrower measure for every chapter on wide screens */
@media (min-width:861px){html body.portfolio-case main{--shot-max:var(--case-shot)}}
@media (max-width:860px){html body.portfolio-case main .series-heading,html body.portfolio-case main .series-section:nth-of-type(2n) .series-heading{grid-template-columns:minmax(0,1fr);row-gap:20px}}
/* captions: quiet, one line under the screen, on the screen's left edge */
html body.portfolio-case main figure>figcaption{font-size:14px;line-height:1.5;color:var(--muted);margin-top:14px;max-width:48em}

/* a physical product (the payment terminal) stands whole at its own proportions, centred, no plate */
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=object]{width:auto;max-width:100%;border-radius:0!important;max-height:none}
html body.portfolio-case .case-cover:not(.is-locked) .case-cover-art[data-hero=object]>img{width:auto!important;max-width:100%!important;max-height:min(70svh,860px)!important;object-fit:contain!important;margin-inline:auto}