/* ---------- раскрытая карточка проекта (эффект 31 лаборатории) ---------- */
.case { display: none; }   /* данные проекта лежат в карточке, показываются в окне */
.cd { position: fixed; inset: 0; z-index: 45; visibility: hidden; pointer-events: none; color: var(--ink); }
.cd.is-open { visibility: visible; pointer-events: auto; }
.cd__bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; }
.cd__slot { position: absolute; left: var(--pad); top: var(--pad); bottom: var(--pad); width: 56vw; cursor: zoom-out; }
.cd__fly { position: fixed; z-index: 46; overflow: hidden; border-radius: 3px; background: #d9d1c2; pointer-events: none; will-change: left, top, width, height; }
.cd__fly img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; }
.cd__info {
  position: absolute; right: var(--pad); top: var(--pad); bottom: var(--pad); width: calc(44vw - var(--pad) * 3);
  display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px); overflow: hidden;
}
/* шапка (номер, Close, тег, название) стоит на месте, листается только содержимое */
.cd-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 32px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.cd-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.cd-top .mono { color: var(--soft); }
.cd-close {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font: 500 14px/1 var(--font-sans); transition: background-color .3s;
}
.cd-close:hover { background: var(--acc); }
.cd-close svg { width: 12px; height: 12px; }
.cd-close:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.cd-tag { color: var(--acc); }
.cd-title { margin-top: auto; font: 600 clamp(48px, min(6.4vw, 12vh), 124px)/.88 var(--font-display); letter-spacing: -.055em; }
.cd-title em { font: italic 400 1.1em/.8 var(--font-serif); letter-spacing: -.02em; }
.cd-title .ms { display: block; overflow: hidden; padding: .14em .12em .28em 0; margin: -.14em -.12em -.28em 0; }   /* запас под выносные элементы курсива (y, F) */
.cd-title .ms > span { display: block; }
.cd-body p { font: 400 clamp(14px, 1.1vw, 18px)/1.55 var(--font-sans); color: var(--soft); }   /* на всю ширину колонки — без ограничения в 42ch */
.cd-body p + p { margin-top: 12px; }
.cd-body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: clamp(16px, 2.4vh, 26px) 0 0; border-top: 1px solid var(--rule); padding-top: 16px; font: 500 clamp(10px, .76vw, 12px)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.cd-body dd { margin: 0; color: var(--ink); }
/* креативы проекта внутри окна */
.cd-body .case-shots { display: grid; gap: 12px; margin-top: clamp(16px, 2.4vh, 26px); }
.cd-body .case-shots img { display: block; width: 100%; height: auto; border-radius: 6px; background: #d9d1c2; }
.cd-body .case-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2.4vh, 26px); padding: 14px 20px; border-radius: 999px;
  border: 1px solid var(--ink); font: 500 15px/1 var(--font-sans); transition: background-color .3s, color .3s;
}
.cd-body .case-link:hover { background: var(--ink); color: var(--bg); }
/* вместо ссылки на сайт: закрытый проект для компании */
.cd-body .case-lock {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2.4vh, 26px); padding: 14px 20px 14px 16px; border-radius: 999px;
  border: 1px dashed var(--soft); color: var(--soft); font: 500 15px/1 var(--font-sans);
}
.cd-body .case-lock svg { width: 16px; height: 16px; flex: none; color: var(--acc); }
.cd-body p b { font-weight: 600; color: var(--ink); }
.cd .cd-anim { opacity: 0; }

/* подсказка на карточке */
.works .frame { cursor: zoom-in; }

@media (max-width: 760px) {
  .cd__slot { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 46svh; }
  .cd__info { left: var(--pad); width: auto; top: calc(46svh + var(--pad) * .6); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .cd-body { flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }   /* на телефоне листается вся колонка */
  .cd-top { position: fixed; top: calc(var(--pad) * .6); left: var(--pad); right: var(--pad); z-index: 47; }   /* поверх картинки, не уезжает при прокрутке текста */
  .cd-top .mono { color: #f4efe6; mix-blend-mode: difference; }
  .cd-title { margin-top: 0; }
}