/* Case story v1 — the shared layout layer for every case page (loads last).
   Palette: deep navy ink, cool greys, calm blue tints. No shadows. Motion: transform, opacity, clip-path, filter only. */

body.portfolio-case{--cs-tint:color-mix(in srgb,#8fa8d8 11%,transparent);--cs-line:color-mix(in srgb,var(--ink) 14%,transparent);--cs-gap:clamp(14px,1.9vw,30px);}
[data-theme=dark] body.portfolio-case,body.portfolio-case[data-theme=dark]{--cs-tint:color-mix(in srgb,#9db6ff 9%,transparent);}

/* ---- cover: year + scope chips ---- */
body.portfolio-case .case-cover .case-role.cs-role{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(22px,3vw,40px);font-size:inherit;color:var(--ink);}
body.portfolio-case .cs-year{font-size:clamp(22px,2.2vw,34px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;}
body.portfolio-case .cs-scope{display:flex;flex-wrap:wrap;gap:8px;}
body.portfolio-case .cs-scope i{font-style:normal;font-size:13px;letter-spacing:.01em;line-height:1;padding:9px 14px;border-radius:99px;border:1px solid var(--cs-line);color:var(--muted);background:color-mix(in srgb,var(--raised,#fff) 38%,transparent);}

/* ---- overview: facts column + lede + notes ---- */
body.portfolio-case .project-info{align-items:start;}
body.portfolio-case .project-copy>.f-body[data-cs-done]{font-size:inherit;line-height:inherit;max-width:none;letter-spacing:0;}
body.portfolio-case .cs-lede{margin:0 0 clamp(28px,4vw,56px);font-size:clamp(26px,3.1vw,52px);line-height:1.12;letter-spacing:-.045em;color:var(--ink);max-width:19em;text-wrap:balance;}
body.portfolio-case .cs-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,48px);padding-top:clamp(20px,2.4vw,32px);border-top:0;}
body.portfolio-case .cs-notes p{margin:0;font-size:clamp(15px,1.12vw,18px);line-height:1.55;letter-spacing:-.005em;color:var(--muted);max-width:34em;}
body.portfolio-case .cs-facts{grid-column:1;grid-row:2;margin:clamp(24px,3vw,44px) 0 0;display:grid;gap:22px;position:sticky;top:120px;}
body.portfolio-case .cs-facts>div{display:grid;gap:8px;}
body.portfolio-case .cs-facts dt{font-size:14px;color:var(--muted);}
body.portfolio-case .cs-facts dd{margin:0;display:grid;gap:3px;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.025em;color:var(--ink);}
@media(max-width:900px){body.portfolio-case .cs-facts{position:static;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- media: 12-column rhythm ---- */
body.portfolio-case .project-slider.cs-stack{display:block!important;padding-inline:var(--gutter)!important;}
body.portfolio-case .cs-media{display:grid;gap:clamp(36px,6vw,104px);max-width:1680px;margin-inline:auto;}
body.portfolio-case .cs-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--cs-gap);align-items:start;}
body.portfolio-case .cs-fig{margin:0;min-width:0;position:relative;}
body.portfolio-case .cs-frame{position:relative;overflow:hidden;border-radius:clamp(14px,2vw,30px);background:var(--cs-bg,var(--cs-tint));}
body.portfolio-case .cs-frame.is-cropped{aspect-ratio:var(--ca);}
body.portfolio-case .cs-frame.is-cropped .cs-img{position:absolute;width:calc(100%/var(--cw))!important;max-width:none!important;left:calc(var(--cx)/var(--cw)*-100%);top:calc(var(--cy)/var(--ch)*-100%);}
body.portfolio-case .cs-zoom{position:relative;display:block;width:100%;height:100%;translate:0 var(--cs-y,0);scale:var(--cs-s,1);will-change:translate,scale;} /* rest scale 1: a screenshot is never cropped by its own frame (owner rule: complete browser chrome) */
body.portfolio-case .cs-img{display:block;width:100%!important;height:auto!important;max-width:none!important;border-radius:0!important;margin:0!important;}
body.portfolio-case .cs-fig figcaption{display:flex;align-items:baseline;gap:14px;margin-top:14px;font-size:14px;line-height:1.4;color:var(--muted);}
body.portfolio-case .cs-fig figcaption b{font-weight:inherit;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em;}
body.portfolio-case .cs-fig figcaption em{font-style:normal;color:var(--muted);}

body.portfolio-case [data-layout=stage] .cs-fig{grid-column:1/-1;}
body.portfolio-case [data-layout=inset-r] .cs-fig{grid-column:4/-1;}
body.portfolio-case [data-layout=inset-l] .cs-fig{grid-column:1/10;}
body.portfolio-case [data-layout=pair] .cs-fig{grid-column:span 6;}
body.portfolio-case [data-layout=pair] .cs-fig:nth-child(2){margin-top:clamp(28px,6vw,96px);}
body.portfolio-case [data-layout=trio] .cs-fig{grid-column:span 4;}
body.portfolio-case [data-layout=duo] .cs-fig:first-child{grid-column:1/9;}
body.portfolio-case [data-layout=duo] .cs-fig:last-child{grid-column:9/-1;align-self:end;}
body.portfolio-case [data-layout=duo-two] .cs-fig:first-child{grid-column:1/8;}
body.portfolio-case [data-layout=duo-two] .cs-fig:nth-child(2){grid-column:8/-1;margin-top:clamp(20px,5vw,72px);}
body.portfolio-case [data-layout=duo-two] .cs-fig:nth-child(3){grid-column:8/-1;}
body.portfolio-case [data-layout=solo-phone] .cs-fig{grid-column:5/9;}
body.portfolio-case [data-layout=pair-phone] .cs-fig{grid-column:span 4;}
body.portfolio-case [data-layout=pair-phone] .cs-fig:first-child{grid-column:3/7;}
body.portfolio-case [data-layout=pair-phone] .cs-fig:last-child{margin-top:clamp(28px,7vw,110px);}
body.portfolio-case [data-layout=trio-phone] .cs-fig{grid-column:span 4;}
body.portfolio-case [data-layout=trio-phone] .cs-fig:nth-child(2){margin-top:clamp(28px,7vw,110px);}
body.portfolio-case [data-layout=quad-phone] .cs-fig{grid-column:span 3;}
body.portfolio-case [data-layout=quad-phone] .cs-fig:nth-child(even){margin-top:clamp(28px,6vw,90px);}
body.portfolio-case .cs-fig[data-role=phone] .cs-frame{border-radius:clamp(16px,2vw,32px);}

@media(max-width:860px){
 body.portfolio-case .cs-media{gap:clamp(28px,8vw,52px);}
 body.portfolio-case .cs-row{gap:16px;}
 body.portfolio-case [data-layout=inset-r] .cs-fig,body.portfolio-case [data-layout=inset-l] .cs-fig,body.portfolio-case [data-layout=stage] .cs-fig{grid-column:1/-1;}
 body.portfolio-case [data-layout=pair] .cs-fig{grid-column:1/-1;}
 body.portfolio-case [data-layout=pair] .cs-fig:nth-child(2){margin-top:0;}
 body.portfolio-case [data-layout=duo] .cs-fig:first-child,body.portfolio-case [data-layout=duo-two] .cs-fig:first-child{grid-column:1/-1;}
 body.portfolio-case [data-layout=duo] .cs-fig:last-child{grid-column:4/10;}
 body.portfolio-case [data-layout=duo-two] .cs-fig:nth-child(2),body.portfolio-case [data-layout=duo-two] .cs-fig:nth-child(3){grid-column:span 6;margin-top:0;}
 body.portfolio-case [data-layout=solo-phone] .cs-fig{grid-column:3/11;}
 body.portfolio-case [data-layout=pair-phone] .cs-fig,body.portfolio-case [data-layout=pair-phone] .cs-fig:first-child{grid-column:span 6;}
 body.portfolio-case [data-layout=pair-phone] .cs-fig:last-child{margin-top:0;}
 body.portfolio-case [data-layout=trio-phone] .cs-fig{grid-column:span 6;}
 body.portfolio-case [data-layout=trio-phone] .cs-fig:first-child{grid-column:1/-1;}
 body.portfolio-case [data-layout=trio-phone] .cs-fig:nth-child(2){margin-top:0;}
 body.portfolio-case [data-layout=quad-phone] .cs-fig{grid-column:span 6;}
 body.portfolio-case [data-layout=quad-phone] .cs-fig:nth-child(even){margin-top:0;}
 body.portfolio-case [data-layout=trio] .cs-fig{grid-column:span 6;}
 body.portfolio-case [data-layout=trio] .cs-fig:first-child{grid-column:1/-1;}
}

/* ---- reveals: images come into focus, text resolves ---- */
body.portfolio-case .cs-fig.cs-pending .cs-frame{clip-path:inset(7% 3.5% 0 3.5% round 30px);opacity:.001;}
body.portfolio-case .cs-fig.cs-pending .cs-zoom{--cs-s:1.05;}
body.portfolio-case .cs-fig.cs-in .cs-frame{clip-path:inset(0 0 0 0 round 0);opacity:1;transition:clip-path 1300ms cubic-bezier(.16,1,.3,1),opacity 700ms ease-out;}
body.portfolio-case .cs-fig.cs-in .cs-zoom{--cs-s:1;transition:scale 1500ms cubic-bezier(.16,1,.3,1);}
body.portfolio-case .cs-fig.cs-pending figcaption{opacity:0;transform:translate3d(0,10px,0);}
body.portfolio-case .cs-fig.cs-in figcaption{opacity:1;transform:none;transition:opacity 700ms ease-out .35s,transform 900ms cubic-bezier(.16,1,.3,1) .35s;}
body.portfolio-case :is(.cs-lede,.cs-notes,.cs-facts,.case-source-heading).cs-pending{opacity:0;transform:translate3d(0,26px,0);filter:blur(.12em);}
body.portfolio-case :is(.cs-lede,.cs-notes,.cs-facts,.case-source-heading).cs-in{opacity:1;transform:none;filter:none;transition:opacity 800ms ease-out,transform 1200ms cubic-bezier(.16,1,.3,1),filter 1000ms cubic-bezier(.2,.7,.2,1);}
body.portfolio-case .cs-notes.cs-in{transition-delay:.12s;}
body.portfolio-case .project-section figure:not(.cs-fig).cs-pending{opacity:0;translate:0 34px;}
body.portfolio-case .project-section figure:not(.cs-fig).cs-in{opacity:1;translate:none;transition:opacity 900ms ease-out,translate 1300ms cubic-bezier(.16,1,.3,1);}

/* ---- next project: a proper closing card ---- */
body.portfolio-case .project-section>.next-project.cs-next{position:relative;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px clamp(24px,5vw,90px);align-items:end;margin:clamp(72px,10vw,170px) var(--gutter) clamp(40px,6vw,90px);padding:clamp(28px,3.4vw,52px) 0 0;border-top:0;width:auto;max-width:none;height:auto!important;min-height:0!important;background:transparent!important;border-radius:0!important;overflow:visible;}
body.portfolio-case .cs-next .menu-link{grid-column:1;grid-row:2;align-self:end;font-size:clamp(46px,8vw,142px);line-height:.92;letter-spacing:-.07em;color:var(--ink);transition:transform 800ms cubic-bezier(.16,1,.3,1);}
body.portfolio-case .cs-next .hide-on-mobile{grid-column:1;grid-row:1;font-size:14px;color:var(--muted);}
body.portfolio-case .cs-next .project-menu-link-img-next{grid-column:2;grid-row:1/span 2;display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:contain;border:0;border-radius:clamp(14px,2vw,28px);background:var(--cs-tint);transform:none;position:static;opacity:1;transition:transform 1100ms cubic-bezier(.16,1,.3,1);}
body.portfolio-case .cs-next .projects-previe-ico{display:none;}
body.portfolio-case .cs-next-arrow{grid-column:1;grid-row:1;justify-self:end;align-self:start;font-size:clamp(28px,3vw,44px);line-height:1;color:var(--ink);transition:transform 700ms cubic-bezier(.16,1,.3,1);}
body.portfolio-case .cs-next a.project-next{position:absolute;inset:0;z-index:2;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;opacity:1!important;}
@media(hover:hover){
 body.portfolio-case .cs-next:hover .menu-link{transform:translate3d(14px,0,0);}
 body.portfolio-case .cs-next:hover .project-menu-link-img-next{transform:none;}
 body.portfolio-case .cs-next:hover .cs-next-arrow{transform:translate3d(6px,-6px,0);}
}
@media(max-width:760px){
 body.portfolio-case .project-section>.next-project.cs-next{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
 body.portfolio-case .cs-next .project-menu-link-img-next{grid-column:1;grid-row:3;aspect-ratio:1.5;margin-top:18px;}
 body.portfolio-case .cs-next .menu-link{grid-row:2;}
 body.portfolio-case .cs-next .hide-on-mobile{display:block!important;}
 body.portfolio-case .cs-next-arrow{justify-self:end;}
}

@media(prefers-reduced-motion:reduce){
 body.portfolio-case .cs-pending{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;}
 body.portfolio-case .cs-zoom{translate:none!important;scale:1!important;}
 body.portfolio-case .cs-fig.cs-pending .cs-frame{clip-path:none;opacity:1;}
}

/* the footer's plain text link duplicates the card above it */
html.cs-has-next .portfolio-footer>a.case-next{display:none!important;}

body.portfolio-case .cs-notes section{display:grid;gap:12px;align-content:start;}
body.portfolio-case .cs-notes h3{margin:0;font-weight:inherit;color:var(--ink);}

/* No eyebrows, badges or counters: plain type only. */
body.portfolio-case .case-cover .case-role.cs-role{gap:6px 18px;align-items:baseline;}
body.portfolio-case .cs-scope{display:block;font-size:clamp(15px,1.2vw,19px);letter-spacing:-.01em;color:var(--muted);}
body.portfolio-case .cs-scope i{display:none;}
/* the case's proof, the role's second line (js/case-story.js): its own line, in ink, under the scope (22 Oct, review R13) */
body.portfolio-case .cs-note{flex:0 0 100%;max-width:26em;margin-top:4px;font-size:clamp(15px,1.2vw,19px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);}
body.portfolio-case .cs-facts dt.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
body.portfolio-case .cs-facts dd:first-of-type{font-size:clamp(20px,1.7vw,28px);}
body.portfolio-case .cs-notes h3{font-size:clamp(17px,1.3vw,21px);letter-spacing:-.025em;text-transform:none;color:var(--ink);}
body.portfolio-case .cs-next .hide-on-mobile{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;display:block!important;}
body.portfolio-case .cs-fig figcaption{margin-top:12px;font-size:15px;letter-spacing:-.005em;}
@media(max-width:700px){body.portfolio-case .case-cover .case-role.cs-role{flex-direction:column;align-items:flex-start;}}
/* -72: Instrument Serif's hyphen is wide (430 units) and floats in the tight display setting, so «Self-service» read as a dash (jury 4 D8) */
/* -73 (24 Oct, QA-73 row 20): every letter's mask takes .08em each side back (padding .08em, margin -.08em), so -.04em gave
   the hyphen more air than the face's own and «Self-service» read «Self – service». -.11em sets it a little tighter than the
   face, as the title's tracking is; at -.14em it met the f's arm (compared at 390, 3x) */
/* (-73, 24 Oct, QA-73 row 20 follow-up) the face's hyphen now carries that tighter spacing itself (css/type-2026.css, the
   hyphen's own face, .052em each side), so its mask takes back what every letter's does */
body.portfolio-case .case-cover h1 .letter-hyphen{margin-inline:-.08em}

/* Pass: the device gallery closes its section (-72, 23 Oct; the visual jury, Pass 37 at 1440 and 390: «380 px of pure
   white separates the captions from the next section»). Its own bottom padding (10vw) sat on the section's 120 px and
   the next section's top, 377 px in all; without it the gap is the case's usual one (about 230 px at 1440). */
html body.portfolio-case .project-section>.case-device-gallery{padding-bottom:0!important}

/* P0 (the coordinator, 24 Oct 2026 ~12:15Z, after Olya ~12:05Z «подложки белые в светлой и черные в темной»): a case's
   screens stand on the page's own ground with no slab and no bezel: id.ai's night plate (#181b21, -73 of 23 Oct) and the
   mid-tone bezel with its hairline (-73 of 24 Oct) are gone; a product picture keeps its own ground and the image radius, and
   by night a light screen is still dimmed a little (below) */
html[data-theme=dark] body[data-page=case] main figure.shot-light>img:not(#_r),html[data-theme=dark] body[data-page=case] main figure.shot-light>picture>img:not(#_r){filter:brightness(.88)}