.case{box-sizing:border-box;width:100%;max-width:calc(760px + var(--gl) + var(--gr));margin:0 auto;padding:clamp(112px,16vh,168px) var(--gr) 0 var(--gl);text-shadow:0 0 12px var(--void),0 0 4px var(--void)}
.case .who{margin:0 0 16px;font:500 14px/1.3 var(--mono);color:var(--ash)}
.case h1{margin:0;font:500 clamp(36px,5.4vw,60px)/1.08 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.case .lead{max-width:none;margin:24px 0 0;text-align:left;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#c6c6c4;text-wrap:pretty}
.flow{margin:clamp(48px,8vh,72px) 0 0;padding:clamp(20px,3vw,32px);border-radius:16px;background:#08080a;box-shadow:inset 0 0 0 1px #ffffff1a;text-shadow:none}
.flow ol{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 28px;margin:0;padding:0;list-style:none}
.flow li{position:relative;min-width:0;padding:14px 16px;border-radius:10px;background:#ffffff0d}
.flow b{display:block;font-size:16px;font-weight:500}
.flow span{display:block;margin-top:4px;font:400 13px/1.35 var(--mono);color:var(--ash)}
.flow .s{grid-column:1;grid-row:1/4;align-self:center}
.flow .e{grid-column:2;grid-row:1}
.flow .t{grid-column:3;grid-row:1}
.flow .y{grid-column:3;grid-row:2}
.flow .o{grid-column:3;grid-row:3}
.flow .s::after,.flow .e::after{content:"→";position:absolute;right:-22px;top:50%;translate:0 -50%;color:var(--ash)}
.flow .y::before,.flow .o::before{content:"исходник";position:absolute;right:calc(100% + 12px);top:50%;translate:0 -50%;font:400 13px/1 var(--mono);color:var(--ash)}
.flow p{margin:16px 0 0;padding-top:14px;border-top:1px solid #ffffff17;font-size:14px;line-height:1.45;color:#c6c6c4}
.prob{margin-top:clamp(56px,9vh,88px)}
.prob .n{display:block;margin-bottom:8px;font:500 14px/1 var(--mono);color:var(--ash)}
.prob h2{margin:0;font:500 clamp(25px,3vw,32px)/1.15 var(--sans);letter-spacing:-.01em;text-wrap:balance}
.prob p{margin:14px 0 0;font-size:17px;line-height:1.55;color:#c6c6c4;text-wrap:pretty}
.prob pre{margin:18px 0 0;padding:14px 16px;overflow-x:auto;border-radius:10px;background:#08080a;box-shadow:inset 0 0 0 1px #ffffff1a;font:400 14px/1.5 var(--mono);color:#e4e4e2;text-shadow:none}
.prob code{font:inherit}
.stack{margin:clamp(56px,9vh,88px) 0 0;padding-top:20px;border-top:1px solid #ffffff17;font:400 14px/1.6 var(--mono);color:var(--ash)}
.back{display:inline-block;margin-top:32px;padding-block:8px;font-size:16px;color:#f4f4f2;text-decoration:underline;text-underline-offset:4px}
.back:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:640px){
  .flow ol{grid-template-columns:1fr;gap:10px}
  .flow .s,.flow .e,.flow .t,.flow .y,.flow .o{grid-column:1;grid-row:auto}
  .flow .s::after,.flow .e::after,.flow .y::before,.flow .o::before{display:none}
  .prob p{font-size:16px}
  .prob pre{font-size:13px}
}
.flow.seq ol{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:26px}
.flow.seq li{padding:12px 12px}
.flow.seq b{font-size:15px}
.flow.seq span{font-size:12px}
.flow.seq li:not(:last-child)::after{content:"→";position:absolute;right:-20px;top:50%;translate:0 -50%;color:var(--ash)}
.go{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(48px,8vh,72px)}
.go a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:10px;background:#08080a;box-shadow:inset 0 0 0 1px #ffffff26;color:#f4f4f2;font-size:16px;text-decoration:none;text-shadow:none;transition:background .2s,box-shadow .2s}
.go a:hover{background:#121216;box-shadow:inset 0 0 0 1px #ffffff52}
.go a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.go + .stack{margin-top:40px}
@media (max-width:640px){
  .flow.seq ol{grid-auto-flow:row;gap:22px}
  .flow.seq b{font-size:16px}
  .flow.seq span{font-size:13px}
  .flow.seq li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px;translate:-50% 0}
}

/* design pass 05.11: the "back to projects" pill stays at the top of the page and scrolls away with it,
   so it never covers the text (a fixed full-width band broke the halftone canvas below it) */
.nav{position:absolute}
.prob h2,.prob h3{color:var(--t1,#f2f2f0)}
.back{color:var(--t1,#f2f2f0)}
.case .lead,.prob p,.flow p{color:var(--t2,#bcbcba)}
.case .who,.prob .n,.flow span,.stack{color:var(--t3,#8c8c8a)}