/* Карточка объекта и каталог /proekty/ — шаблон Ксении 21.10.2026.
   Подключается только своими страницами (assets/projects.php, proekty/index.php).
   Токены — из site.css; у каждого var() запасное значение тёмной среды сайта.
   Палитра ролей: латунь — заливка главной кнопки и кикеры на тёмном; блок со
   своим фоном объявляет цвет текста в том же правиле. Mobile-first. */

.kc{color:var(--text,#F2EFE9)}
.kc-k{display:block; font:500 12px/1.2 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent,#C2A06A); margin-bottom:14px}

/* ── 01 · Обложка и статус ─────────────────────────────────────────────── */
.kc-hero{padding-top:36px; padding-bottom:12px}
.kc-hero-grid{display:grid; gap:22px}
.kc-head h1{margin:0 0 16px; font-size:clamp(30px,5.6vw,54px); line-height:1.06; max-width:20ch}
.kc-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.kc-st,.kc-tag{display:inline-flex; align-items:center; min-height:30px; padding:5px 13px;
  border-radius:999px; font:500 13px/1.2 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em}
.kc-st--real{background:var(--ok,#8FC79B); color:#122019}
.kc-st--build{background:#6E6250; color:#F4F0E8}
.kc-st--render{background:var(--surface,#201E19); color:var(--text,#F2EFE9); border:1px solid var(--line-2,#4A4437)}
.kc-tag{background:transparent; color:var(--muted,#A29C90); border:1px solid var(--line-2,#4A4437)}
.kc-lead{font-size:clamp(17px,2.1vw,20px); line-height:1.55; color:var(--muted,#A29C90); max-width:58ch; margin:0}
.kc-scale-fig{margin:22px 0 0; max-width:360px}
.kc-scale{display:block; width:100%; height:auto}
.kc-scale-line{stroke:var(--line-2,#4A4437); stroke-width:2; fill:none}
.kc-scale-done{stroke:var(--accent,#C2A06A); stroke-width:2; fill:none}
.kc-dot{fill:var(--bg,#171612); stroke:var(--line-2,#4A4437); stroke-width:2}
.kc-dot-done{fill:var(--accent,#C2A06A)}
.kc-dot-cur{fill:var(--accent,#C2A06A); stroke:var(--bg,#171612); stroke-width:4}
.kc-scale-t{fill:var(--muted,#A29C90); font:400 24px 'JetBrains Mono',ui-monospace,monospace}
.kc-scale-tcur{fill:var(--text,#F2EFE9); font:500 24px 'JetBrains Mono',ui-monospace,monospace}

.kc-cover{margin:0}
.kc-cover-btn{display:block; width:100%; padding:0; border:0; background:var(--surface-2,#1C1A16);
  border-radius:var(--r-c,14px); overflow:hidden; cursor:zoom-in; aspect-ratio:4/3}
.kc-cover-btn img{display:block; width:100%; height:100%; object-fit:cover}
.kc-cover figcaption{margin-top:10px; color:var(--muted,#A29C90); font:400 13px/1.4 'JetBrains Mono',ui-monospace,monospace}
.kc-hero--tall .kc-cover-btn{aspect-ratio:4/5}
@media(min-width:900px){
  .kc-hero{padding-top:44px}
  .kc-hero-grid{grid-template-columns:1fr; gap:30px}
  .kc-cover{order:2}
  .kc-cover-btn{aspect-ratio:16/9}
  /* вертикальный кадр не растягиваем на всю ширину — ставим рядом с заголовком */
  .kc-hero--tall .kc-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:end}
  .kc-hero--tall .kc-cover{order:2}
  .kc-hero--tall .kc-cover-btn{aspect-ratio:4/5; max-height:78vh}
}

/* ── Секции 02–09: колонка подписи + содержимое, как лист в альбоме ───── */
.kc-sec{border-top:1px solid var(--line,#332F27)}
.kc-hero + .kc-sec{margin-top:28px}
.kc-sec:last-of-type{border-top:0}
.kc-sh h2{margin:0 0 20px; font-size:clamp(25px,3.6vw,36px)}
.kc-body{min-width:0}
@media(min-width:1000px){
  .kc-sec:not(:last-of-type){display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px}
  .kc-sh{position:sticky; top:calc(var(--hdr-h,73px) + 24px); align-self:start}
  .kc-sh h2{font-size:30px}
}
.kc-prose{max-width:66ch}
.kc-prose p{margin:0 0 1em; font-size:17px; line-height:1.65; color:var(--text,#F2EFE9)}
.kc-prose p:last-child{margin-bottom:0}
.kc-h3{margin:34px 0 14px; font:500 13px/1.3 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted,#A29C90)}
.kc-h3--first{margin-top:0}
.kc-note{margin:18px 0 0; color:var(--muted,#A29C90); font-size:15.5px; line-height:1.6; max-width:66ch}

/* ── 02 · Паспорт — штамп чертежа ──────────────────────────────────────── */
.kc-stamp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0;
  border:1px solid var(--line-2,#4A4437); border-radius:var(--r-s,9px); overflow:hidden;
  background:var(--surface,#201E19); color:var(--text,#F2EFE9)}
.kc-stamp > div{padding:13px 14px 14px; border-right:1px solid var(--line,#332F27);
  border-bottom:1px solid var(--line,#332F27); min-width:0}
.kc-stamp dt{font:500 11px/1.3 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,#A29C90); margin-bottom:7px}
.kc-stamp dd{margin:0; font:600 17px/1.35 'Golos Text',system-ui,sans-serif; color:var(--text,#F2EFE9);
  overflow-wrap:anywhere}
.kc-stamp--wide{grid-template-columns:1fr}
.kc-stamp--wide dd{font:400 16.5px/1.55 'Inter',system-ui,sans-serif}
@media(min-width:620px){ .kc-stamp:not(.kc-stamp--wide){grid-template-columns:repeat(3,minmax(0,1fr))} }
.kc-body--pair{display:grid; gap:24px}
@media(min-width:1100px){ .kc-body--pair{grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:start} }
.kc-fp{margin:22px 0 0}
.kc-body--pair .kc-fp{margin-top:0}

/* ── 03 · Задача и результат ───────────────────────────────────────────── */
.kc-tr{display:grid; gap:12px}
@media(min-width:760px){ .kc-tr{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kc-tr-i{background:var(--surface,#201E19); color:var(--text,#F2EFE9);
  border:1px solid var(--line,#332F27); border-radius:var(--r-c,14px); padding:20px 20px 22px}
.kc-tr-h{display:block; font:500 12px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent,#C2A06A); margin-bottom:12px}
.kc-tr-i p{margin:0; font-size:17px; line-height:1.6; color:var(--text,#F2EFE9)}

/* ── 04 · Планы: белая подложка, клик — крупно ─────────────────────────── */
.kc-plans{display:grid; gap:16px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.kc-prose + .kc-plans{margin-top:26px}
.kc-plans:first-child{margin-top:0}
.kc-plan{margin:0}
.kc-plan-btn{position:relative; display:block; width:100%; padding:10px; cursor:zoom-in;
  background:#FFFFFF; border:1px solid var(--line,#332F27); border-radius:var(--r-c,14px)}
.kc-plan-btn img{display:block; width:100%; height:auto}
.kc-zoom{position:absolute; right:10px; bottom:10px; padding:5px 10px; border-radius:999px;
  background:rgba(23,22,18,.88); color:#F2EFE9; font:500 12px/1.2 'JetBrains Mono',ui-monospace,monospace}
.kc-plan figcaption{margin-top:9px; color:var(--muted,#A29C90); font-size:15px}

/* ── Сетка кадров ─────────────────────────────────────────────────────── */
.kc-shots{display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){ .kc-shots{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1000px){ .kc-shots{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kc-shot{position:relative; display:block; padding:0; aspect-ratio:1/1; overflow:hidden; cursor:zoom-in;
  background:var(--surface-2,#1C1A16); border:1px solid var(--line,#332F27); border-radius:var(--r-s,9px)}
.kc-shot img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow,320ms) ease-out}
.kc-shot:hover img{transform:scale(1.04)}
.kc-shot:hover,.kc-shot:focus-visible,.kc-cover-btn:focus-visible,.kc-plan-btn:hover,.kc-plan-btn:focus-visible{
  border-color:var(--accent,#C2A06A); outline:none}
.kc-chip{position:absolute; left:8px; bottom:8px; padding:4px 9px; border-radius:999px;
  background:rgba(23,22,18,.88); color:#F2EFE9; font:500 11px/1.2 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){ .kc-shot img{transition:none} .kc-shot:hover img{transform:none} }

/* ── 05 · Решения ─────────────────────────────────────────────────────── */
.kc-sols{display:grid; gap:0; border-top:1px solid var(--line,#332F27)}
@media(min-width:760px){ .kc-sols{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px} }
.kc-sol{padding:18px 0 20px; border-bottom:1px solid var(--line,#332F27)}
.kc-sol h3{margin:0 0 8px; font-size:19px; color:var(--text,#F2EFE9)}
.kc-sol p{margin:0; color:var(--muted,#A29C90); font-size:16px; line-height:1.6}
.kc-sols + .kc-h3{margin-top:34px}

/* ── 08 · Бюджет ──────────────────────────────────────────────────────── */
.kc-budget{display:grid; gap:12px}
@media(min-width:760px){ .kc-budget{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} }
.kc-bud{background:var(--surface,#201E19); color:var(--text,#F2EFE9);
  border:1px solid var(--line,#332F27); border-radius:var(--r-c,14px); padding:20px 20px 22px}
.kc-bud-h{display:block; font:500 12px/1.3 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,#A29C90)}
.kc-bud b{display:block; margin:12px 0 14px; font:700 clamp(26px,3.6vw,34px)/1.05 'Golos Text',system-ui,sans-serif;
  color:var(--text,#F2EFE9)}
.kc-bud p{max-width:60ch; margin:0 0 8px; font-size:15px; line-height:1.55; color:var(--muted,#A29C90)}
.kc-bud p:last-child{margin-bottom:0}
.kc-bud-l{color:var(--text,#F2EFE9); font-weight:600}

/* ── 09 · Следующий шаг ───────────────────────────────────────────────── */
.kc-next{background:var(--surface,#201E19); color:var(--text,#F2EFE9);
  border:1px solid var(--accent,#C2A06A); border-radius:var(--r-l,20px); padding:28px 22px 26px}
.kc-next h2{margin:0 0 12px; color:var(--text,#F2EFE9); font-size:clamp(26px,4vw,38px)}
.kc-next p{margin:0; color:var(--muted,#A29C90); max-width:60ch; font-size:17px; line-height:1.6}
.kc-next-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.kc-next-row .btn{flex:1 1 220px}
@media(min-width:620px){ .kc-next{padding:40px 40px 36px} .kc-next-row .btn{flex:0 0 auto} }
.kc-next p.kc-next-c{display:flex; flex-wrap:wrap; column-gap:22px; margin-top:14px; font:400 15px/1.5 'JetBrains Mono',ui-monospace,monospace}
.kc-next-c a{color:var(--text,#F2EFE9); display:inline-block; min-height:44px; line-height:44px}
.kc-next-c a:hover{color:var(--accent-hi,#D2B47F)}
.kc-back{margin:26px 0 0}

/* ── Каталог /proekty/ ────────────────────────────────────────────────── */
.kc-cat-filter{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0}
.kc-cat-filter[hidden]{display:none}
.kc-fb{min-height:44px; padding:10px 16px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--text,#F2EFE9); border:1px solid var(--line-2,#4A4437);
  font:500 14px/1.2 'Inter',system-ui,sans-serif}
.kc-fb small{margin-left:7px; color:var(--muted,#A29C90); font:400 14px/1 'JetBrains Mono',ui-monospace,monospace}
.kc-fb:hover{border-color:var(--accent,#C2A06A)}
.kc-fb[aria-pressed="true"]{background:var(--accent,#C2A06A); color:var(--accent-text,#171612); border-color:var(--accent,#C2A06A)}
.kc-fb[aria-pressed="true"] small{color:var(--accent-text,#171612)}
.kc-grid{display:grid; gap:18px; margin-top:24px}
@media(min-width:620px){ .kc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1000px){ .kc-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px} }
.kc-card{display:flex; flex-direction:column; color:var(--text,#F2EFE9); background:transparent}
.kc-card[hidden]{display:none}
.kc-card:hover{color:var(--text,#F2EFE9)}
.kc-card-img{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-c,14px);
  background:var(--surface-2,#1C1A16); border:1px solid var(--line,#332F27)}
.kc-card-img img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow,320ms) ease-out}
.kc-card:hover .kc-card-img img{transform:scale(1.03)}
.kc-card:hover .kc-card-img,.kc-card:focus-visible .kc-card-img{border-color:var(--accent,#C2A06A)}
.kc-card-img .kc-st{position:absolute; left:12px; top:12px}
.kc-card-b{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 2px 0}
.kc-card .kc-card-t{margin:0; font-size:clamp(20px,2vw,23px); line-height:1.3; letter-spacing:0; color:var(--text,#F2EFE9)}
.kc-card-a{flex:0 0 auto; color:var(--muted,#A29C90); font:400 13.5px/1.3 'JetBrains Mono',ui-monospace,monospace;
  white-space:nowrap}
.kc-group{margin-top:56px; padding-top:30px; border-top:1px solid var(--line,#332F27)}
.kc-group[hidden]{display:none}
.kc-group h2{margin:0 0 8px; font-size:clamp(25px,3.6vw,34px)}
.kc-group > p{color:var(--muted,#A29C90); max-width:62ch; margin:0}
.kc-empty{margin-top:24px; color:var(--muted,#A29C90)}
.kc-empty[hidden]{display:none}
@media(prefers-reduced-motion:reduce){ .kc-card-img img{transition:none} .kc-card:hover .kc-card-img img{transform:none} }

/* «Ещё N кадров» под длинной лентой */
.kc-more{margin-top:8px}
.kc-more summary{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; margin-bottom:8px;
  cursor:pointer; list-style:none; border:1px solid var(--line-2,#4A4437); border-radius:999px;
  background:transparent; color:var(--text,#F2EFE9); font:500 14px/1.2 'Inter',system-ui,sans-serif}
.kc-more summary::-webkit-details-marker{display:none}
.kc-more summary:hover{border-color:var(--accent,#C2A06A)}
.kc-more[open] summary{display:none}
.kc-cover-btn:focus-visible,.kc-fb:focus-visible,.kc-more summary:focus-visible{outline:2px solid var(--accent,#C2A06A); outline-offset:3px}