/* Страница «Концепты». Собирается src/concepts.mjs — руками не править. */
/* Верх страницы сжат: 01 виден без прокрутки на 1440×900 и 375×667. */
.cn-intro{padding-bottom:clamp(10px,1.6vw,20px)}
.cn-intro .pf-proj__title{margin-top:4px}
/* Строки верха — ритмом карточек: зазор историй .pf-proj__story (20 px). */
/* Дисклеймер — кеглем и тоном основного текста (как абзацы «Idea»). */
.cn-note{margin:0;color:var(--muted);font-size:var(--fs-10);line-height:1.5}
/* Таймлайн процесса: одна строка, без переноса; не влезла — прокрутка вбок. */
.cn-flow{margin-top:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cn-flow::-webkit-scrollbar{display:none}
.cn-flow__line{margin:0;white-space:nowrap;font-size:var(--fs-10);line-height:1.5;color:var(--muted)}
.cn-flow__cap{font-weight:700;color:var(--ink)}
.cn-flow__list{display:inline;list-style:none;margin:0;padding:0}
.cn-flow__list li{display:inline}
/* Стрелка висит на конце шага: при переносе строка кончается «→», и видно, что цепочка идёт дальше. */
.cn-flow__list li:not(:last-child)::after{content:"→" / "";margin:0 .2em 0 .45em;color:var(--accent)}
/* Телефон (шестая редакция): прокрутка вбок не читалась как прокрутка —
   строка переносится, подпись отдельной строкой, кегль ступенью ниже.
   Шаг вместе со своей стрелкой не разрывается. */
@media (max-width:767px){
  .cn-flow{overflow:visible}
  .cn-flow__line{white-space:normal;font-size:var(--fs-8)}
  .cn-flow__cap{display:block;margin-bottom:2px}
  .cn-flow__list li{white-space:nowrap}
}
.cn-intro + .pf-section{padding-top:clamp(6px,1vw,12px)}
.cn-intro + .pf-section .pf-project{margin-top:0}

/* Кнопка ролика — по центру обложки, как во всех роликах сайта (седьмая редакция: низ отменён). */

/* Карусель фотосета: одна строка, высота не зависит от числа кадров. */
.cn-car{--cn-gap:clamp(6px,0.8vw,10px);min-width:0}
.cn-car__track{display:flex;gap:var(--cn-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cn-car__track::-webkit-scrollbar{display:none}
.cn-car__track:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* ПК: два кадра целиком и край третьего. */
.cn-car .pf-work{flex:0 0 calc((100% - 2 * var(--cn-gap)) / 2.3);aspect-ratio:3/4;scroll-snap-align:start}
/* Телефон и планшет в одну колонку: кадр и край следующего. */
@media (max-width:899px){.cn-car .pf-work{flex-basis:82%}}
.cn-car .pf-work img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cn-car__bar{display:flex;align-items:center;gap:16px;margin-top:clamp(12px,1.4vw,18px)}
.cn-car__btn{width:48px;height:48px;min-width:48px;padding:0;display:inline-grid;place-items:center}
.cn-car__btn svg{width:22px;height:22px;display:block}
.cn-car__btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.cn-car__count{font-weight:700;font-size:var(--fs-10);font-variant-numeric:tabular-nums;color:var(--ink);min-width:4.5ch;text-align:center}