/* Страница кейса: удобный просмотр. Подключается после ../style.css */
.cs-bar{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px;padding:0 var(--gut);background:rgba(11,10,9,.88);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.cs-bar a{color:var(--ink);transition:color .2s}
.cs-bar a:hover{color:var(--red)}
.cs-back{justify-self:start}
.cs-title{text-align:center;color:var(--ink)}
.cs-title b{font-weight:400;color:var(--red-s);margin-right:8px}
.cs-nav{justify-self:end;display:flex;gap:18px;align-items:center}
.cs-nav .count{color:var(--ink2)}
.cs-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:61;transition:width .1s linear}

.cs-head{padding:clamp(104px,10vw,160px) var(--gut) clamp(40px,4vw,64px);max-width:1440px;margin:0 auto}
.cs-head h1{font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1.05;letter-spacing:-.03em;max-width:1100px}
.cs-head .lead{margin-top:20px;max-width:720px;font-size:17px;color:var(--ink2)}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:clamp(32px,3vw,48px)}
.cs-meta div{border-top:1px solid var(--line);padding-top:12px}
.cs-meta dd{margin-top:6px;font-size:15px}
.cs-nums{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:28px}
.cs-nums b{font-weight:400;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.03em}
.cs-nums span{display:block;margin-top:4px}

.cs-flow{max-width:1440px;margin:0 auto;background:#111}
.cs-flow img,.cs-flow video{display:block;width:100%;height:auto;background:#141210}
.cs-flow .vid{position:relative}
.cs-flow .vid button{position:absolute;right:16px;bottom:16px;border:0;border-radius:999px;padding:8px 14px;background:rgba(14,13,12,.72);color:#F1EEE8;font:400 12px/1 var(--mono);text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .2s}
.cs-flow .vid:hover button,.cs-flow .vid button:focus-visible{opacity:1}

.cs-next{max-width:1440px;margin:0 auto;padding:clamp(80px,9vw,140px) var(--gut) clamp(48px,5vw,80px)}
.cs-next a.card{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:end}
.cs-next a.card img{width:100%;aspect-ratio:1800/1408;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.cs-next a.card:hover img{transform:scale(1.02)}
.cs-next .t{font-weight:400;font-size:clamp(30px,3.6vw,60px);line-height:1.05;letter-spacing:-.03em}
.cs-next .t:hover{color:var(--red)}
.cs-next .row{display:flex;justify-content:space-between;margin-top:clamp(48px,5vw,80px);padding-top:20px;border-top:1px solid var(--line)}
.cs-next .row a{color:var(--ink)}
.cs-next .row a:hover{color:var(--red)}

.cs-top{position:fixed;right:var(--gut);bottom:24px;z-index:59;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:var(--bg);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s}
.cs-top.show{opacity:1;pointer-events:auto}
.cs-top:hover{color:var(--red)}
.cs-keys{color:var(--ink3)}

@media (max-width:900px){
  .cs-meta{grid-template-columns:1fr 1fr}
  .cs-next a.card{grid-template-columns:1fr}
  .cs-keys{display:none}
}
@media (max-width:640px){
  .cs-bar{grid-template-columns:auto 1fr auto;gap:10px}
  .cs-title{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cs-nav{gap:12px}.cs-nav .count{display:none}
  .cs-meta{grid-template-columns:1fr}
}

/* кейсы из Behance: модуль из нескольких кусков; фон модуля = цвет стыка, чтобы не было волосяных швов */
.cs-flow .mod img{background:transparent}
.cs-note{margin-top:28px;max-width:720px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.cs-note a{color:var(--ink);border-bottom:1px solid var(--red)}
.cs-note a:hover{color:var(--red)}

/* увеличение блока по тапу */
.cs-flow img{cursor:zoom-in}
.cs-tip{display:none;margin-top:20px;color:var(--ink3)}
@media (max-width:900px){.cs-tip{display:block}}
html.lb-lock,html.lb-lock body{overflow:hidden}
.cs-lb{position:fixed;inset:0;z-index:100;background:#0B0A09;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:none}
.cs-lb.open{display:block}
.cs-lb-in{width:min(250vw,2400px);margin:0 auto}
.cs-lb.fit .cs-lb-in{width:100%;max-width:1440px}
.cs-lb-in img{display:block;width:100%;height:auto}
.cs-lb-bar{position:fixed;top:12px;right:12px;display:flex;gap:8px;z-index:101}
.cs-lb-bar button{border:1px solid rgba(241,238,232,.25);border-radius:999px;padding:10px 14px;min-height:40px;background:rgba(14,13,12,.82);color:#F1EEE8;font:400 12px/1 var(--mono);text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cs-lb-bar button:hover{border-color:var(--red)}
.cs-lb-bar button:focus{outline:none}.cs-lb-bar button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* правки по проверке джуна 11.11 */
.cs-keys,.cs-tip{color:var(--ink2)}
.cs-meta{display:flex;flex-wrap:wrap;gap:var(--gut)}
.cs-meta>div{flex:1 1 220px;max-width:340px}
@media (hover:none){.cs-flow .vid button{opacity:.9}}
@media (max-width:640px){
  .cs-back .w,.cs-nav .w{display:none}
  .cs-bar{grid-template-columns:auto 1fr auto}
  .cs-title{font-size:11px;text-align:center}
  .cs-nav{gap:20px}
  .cs-head{padding:84px var(--gut) 28px}
  .cs-head h1{font-size:34px}
  .cs-head .lead{font-size:15px;margin-top:12px}
  .cs-meta{gap:12px;margin-top:20px}
  .cs-meta>div{flex-basis:100%}
  .cs-note{margin-top:16px;font-size:14px}
  .cs-tip{margin-top:14px}
}
@media (max-width:640px){
  .cs-meta>div{flex:1 1 calc(50% - 6px);max-width:none;padding-top:8px}
  .cs-meta dd{font-size:14px;margin-top:4px}
  .cs-nums{gap:8px 28px;margin-top:20px}
  .cs-nums b{font-size:26px}
}

/* правки по технической проверке 11.11 */
.cs-bar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
@media (max-width:640px){.cs-bar a{min-width:44px}.cs-nav{gap:4px}}
.cs-flow .vid button{min-height:44px;padding:12px 16px}
.cs-flow .vid.paused button{opacity:1}
.cs-flow video{cursor:pointer}
.cs-flow img:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.cs-lb:focus{outline:none}
.cs-top{min-height:44px;display:inline-flex;align-items:center}
.cs-bar a{gap:.45em}
/* стрелки в шапке кейса вдвое крупнее, по центру строки текста (Ольга 11.11) */
.cs-back,.cs-nav a{display:inline-flex;align-items:center;gap:.35em;font-size:2em;line-height:1}
.cs-back .w,.cs-nav a .w{font-size:.5em;line-height:1}
/* оптическое выравнивание: центр стрелки = центр прописных слова (замер по глифам Martian Mono) */
.cs-bar .cs-back,.cs-nav a{align-items:baseline}
.cs-back .w,.cs-nav a .w{position:relative;top:-.147em}
/* одинаковый размер для «Все работы» и «Пред./След.»: стрелка 24px, слово 12px, как остальная моноширинная строка */
.cs-back,.cs-nav a{font-size:24px}
.cs-back .w,.cs-nav a .w{font-size:12px}
/* шапка кейса = шапка сайта (решение Ольги 11.11.2026, как у Metalab, COLLINS, Amy Osburn) */
.cs-site{grid-template-columns:1fr auto 1fr;height:64px}
.cs-site .ol-logo{justify-self:start;font-size:18px;color:var(--ink)}
.cs-site .ol-nav{display:flex;gap:clamp(20px,3vw,48px)}
.cs-site .ol-nav a,.cs-site .ol-cta{color:var(--ink);min-height:0}
.cs-site .ol-cta{justify-self:end;border-bottom:1px solid var(--ink);padding-bottom:3px}
.cs-site a:hover{color:var(--red)}
.cs-keys{display:none}
@media (max-width:640px){.cs-site{grid-template-columns:auto 1fr;gap:12px}.cs-site .ol-nav{justify-self:end;gap:12px}.cs-site .ol-nav a{font-size:12px;min-width:0}.cs-site .ol-cta{display:none}.cs-site .ol-logo{font-size:15px}}
/* конец кейса: ещё 2 работы и строка */
.cs-more-h{display:block;margin-top:clamp(56px,6vw,96px)}
.cs-more{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:20px}
.cs-more .mini{display:block;color:var(--ink)}
.cs-more .mini img{width:100%;aspect-ratio:1800/1408;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.cs-more .mini:hover img{transform:scale(1.02)}
.cs-more .mini .t{display:block;margin-top:14px;font-family:"Oswald","Arial Narrow",sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(20px,1.8vw,30px);line-height:1.05}
.cs-more .mini:hover .t{color:var(--red)}
.cs-next .row{flex-wrap:wrap;gap:16px 32px}
@media (max-width:640px){.cs-more{grid-template-columns:1fr}}
.cs-site .ol-logo{font-family:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;font-stretch:condensed;font-weight:600;text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
@media (max-width:640px){.cs-more{row-gap:40px}}
/* финальная проверка джуна 12.11.2026 */
/* Н5: заголовок кейса Oswald 600 крупно (старое правило выше перебивало style.css) */
.cs-head h1{font-weight:600;font-size:clamp(44px,6.4vw,104px);line-height:.92;letter-spacing:-.02em}
@media (max-width:640px){.cs-head h1{font-size:40px}}
.cs-head h1,.cs-next .t,.cs-more .mini .t{font-family:"Oswald","Arial Narrow","Helvetica Neue",sans-serif}
/* Н1: следующий кейс крупно на всю ширину, «Ещё работы» тише */
.cs-next a.card{display:block;margin-top:20px;color:var(--ink)}
.cs-next .nx{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,2vw,32px)}
.cs-next .t{font-weight:600;font-size:clamp(44px,7vw,120px);line-height:.9}
.cs-next .ar{font:300 clamp(40px,6vw,104px)/1 var(--sans);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cs-next a.card:hover .t,.cs-next a.card:hover .ar{color:var(--red)}
.cs-next a.card:hover .ar{transform:translateX(12px)}
.cs-next a.card img{display:block;width:100%;aspect-ratio:1800/1000;object-fit:cover;object-position:center}
.cs-more{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gut);margin-top:clamp(56px,6vw,96px);align-items:start}
.cs-more-h{margin:0}
.cs-more .mini .t{font-size:clamp(18px,1.5vw,24px)}
@media (max-width:640px){
  .cs-next .t{font-size:40px}
  .cs-next a.card img{aspect-ratio:1800/1408}
  .cs-more{grid-template-columns:1fr;row-gap:0;margin-top:48px}
  .cs-more-h{margin-bottom:8px}
  .cs-more .mini{display:flex;align-items:center;min-height:52px;border-top:1px solid var(--line)}
  .cs-more .mini img{display:none}
  .cs-more .mini .t{margin:0}
}
/* В4: тач-цели 44 px в шапке и в нижней строке на телефоне */
@media (max-width:640px){
  .cs-site .ol-nav a{min-height:44px;display:inline-flex;align-items:center}
  .cs-next .row a{min-height:44px;display:inline-flex;align-items:center}
  .cs-next .row{gap:0 24px}
}
/* В1: без тёмной волосяной линии на стыке ролика */
.cs-flow video{background:transparent}
.cs-flow .vid{line-height:0}
/* Н3: на тачах пауза — кружок со значком, не надпись поверх экрана */
@media (hover:none){
  .cs-flow .vid button{width:44px;height:44px;min-height:44px;padding:0;right:10px;bottom:10px;font-size:0;background:rgba(14,13,12,.55);display:grid;place-items:center}
  .cs-flow .vid button::before{content:"";width:12px;height:14px;border-left:4px solid #F1EEE8;border-right:4px solid #F1EEE8;box-sizing:border-box}
  .cs-flow .vid.paused button::before{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #F1EEE8;margin-left:3px}
}
/* лайтбокс: кнопки 44 px */
.cs-lb-bar button{min-height:44px}
/* склейка между блоками (Ольга 12.11): дробные высоты оставляли тёмную полоску, соседи перекрываются на 1px */
.cs-flow>*{margin-bottom:-1px;position:relative}
.cs-flow>*:last-child{margin-bottom:0}

.cs-site .ol-cta{gap:0}

/* ширина ленты кейса как на Behance: 80 % окна, не шире 1400 px (на телефоне и планшете — на всю ширину) */
@media (min-width:901px){.cs-flow{width:min(1400px,80vw);max-width:none}}
@media (min-width:901px){.cs-head,.cs-next{width:min(1400px,80vw);max-width:none;padding-left:0;padding-right:0}}

.cs-meta>div:only-child{flex:1 1 100%;max-width:none}