/* Блог Эльхана Дадашева — визуальный язык: (dot)connect, Refero 981d90e9 (DESIGN.md рядом).
   «Чертёж, в котором загорается огонь»: бумажный фон, чернила, один огненный акцент на экран.
   Шрифт AeonikPro заменён по R4 (geometric sans → Onest), подписи — JetBrains Mono. */
:root{
  --bone:#fcfbf8; --ink:#001011; --smoke:#0f1e1f; --ash:#ededea; --mist:#c1c4c2; --ember:#fd5321; --blue:#007aff;
  --soft:rgba(0,16,17,.62); --faint:rgba(0,16,17,.42);
  --font:'Onest',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --r-card:20px; --r-btn:24px; --r-pill:48px; --r-badge:8px;
  --gap:24px; --sec:96px; --head:104px; --max:1200px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ember) var(--ash)}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--ash)}::-webkit-scrollbar-thumb{background:var(--ember);border-radius:8px;border:3px solid var(--ash)}}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-weight:500;margin:0;letter-spacing:-.02em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ── шапка ── */
.top{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(252,251,248,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--mist)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.mark{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:500;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.mark i{width:12px;height:12px;border-radius:50%;background:var(--ember);display:inline-block;flex:none}
.mark span{color:var(--soft);font-weight:400}
.nav{display:flex;gap:24px;margin-left:auto;font-size:16px}
.nav a{text-decoration:none;color:var(--smoke);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--ink);transition:right .3s}
.nav a:hover::after{right:0}
.top .cta{margin-left:8px}
.tel{display:none}
@media (max-width:900px){.nav{display:none}.top .cta{margin-left:auto}.tel{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--mist);margin-left:8px;flex:none}}
@media (max-width:600px){.top .wrap{gap:10px}.mark span{display:none}.top .cta{padding:11px 16px;font-size:15px;white-space:nowrap}.top .cta::before{display:none}}
/* 13.10.2026: на 320–360 px кнопка «Позвонить» уходила за край экрана (проверка телефонов «кнопки видны целиком») */
@media (max-width:400px){.top .wrap{gap:6px}.top .cta{padding:10px 12px;font-size:14px;margin-left:auto}.tel{margin-left:4px}}
@media (max-width:340px){.top .mark{font-size:0;gap:0}}

/* ── кнопки (DESIGN.md: Filled CTA Ember, Arrow Pill, Ghost) ── */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ember);color:var(--bone);text-decoration:none;border:0;cursor:pointer;
  font:500 16px/1 var(--font);letter-spacing:.01em;padding:13px 24px;border-radius:var(--r-btn);transition:transform .2s,box-shadow .3s}
.cta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bone)}
.cta:hover{transform:translateY(-2px)}
.pill{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bone);text-decoration:none;cursor:pointer;border:0;
  font:500 16px/1 var(--font);letter-spacing:.01em;padding:6px 20px 6px 6px;border-radius:44px;transition:transform .2s}
.pill b{width:32px;height:32px;border-radius:50%;background:var(--bone);color:var(--ink);display:grid;place-items:center;font-weight:500;transition:transform .3s}
.pill:hover b{transform:rotate(-45deg)}
.pill:hover{transform:translateY(-2px)}
.ghost{display:inline-flex;align-items:center;gap:8px;color:var(--blue);border:1px solid var(--blue);border-radius:var(--r-btn);padding:11px 22px;
  text-decoration:none;font:500 16px/1 var(--font);transition:background .2s}
.ghost:hover{background:rgba(0,122,255,.06)}
.arrow{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bone);display:inline-grid;place-items:center;font-size:13px;flex:none}

/* ── шапка раздела: «● название — (02)» и волосяная линия ── */
.sec{padding:var(--sec) 0;position:relative}
.sec-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--mist);margin-bottom:56px;font-weight:500;font-size:18px}
.sec-head .node{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink);background:var(--bone);flex:none;transition:background .4s,border-color .4s,box-shadow .4s}
.sec-head .node.lit{background:var(--ember);border-color:var(--ember)}
.sec-head .num{margin-left:auto;font-variant-numeric:tabular-nums}
.sec h2{font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.025em;max-width:18ch}
.sec .lead{font-size:20px;line-height:1.45;color:var(--smoke);max-width:58ch;margin-top:20px}
.tag{display:inline-block;font:400 14px/1 var(--font);padding:6px 10px;border:1px solid var(--mist);border-radius:var(--r-badge);background:var(--bone)}
.tag.on{border-color:var(--ink)}

/* появление разделов (R6: сдвиг 24px + прозрачность) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ── свежая статья ── */
.post{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.post-card{border:1px solid var(--mist);border-radius:var(--r-card);padding:36px;background:var(--bone);position:relative}
.post-card h3{font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-.02em;margin:16px 0 16px}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.post-card p{color:var(--smoke)}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 26px;color:var(--soft);font-size:15px}
.scene{position:relative;aspect-ratio:1100/1100;border-radius:var(--r-card);overflow:hidden;background:var(--bone)}
.scene canvas,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.post{grid-template-columns:1fr;gap:24px}.post .scene{order:-1}}

/* ── рубрики: список слева, сцена приклеена справа ── */
.rub{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.rub-list{list-style:none;margin:0;padding:0}
.rub-list li{padding:26px 0;border-bottom:1px solid var(--mist);display:grid;grid-template-columns:56px 1fr;gap:4px 16px;transition:opacity .4s}
.rub-list li .n{font-family:var(--mono);font-size:14px;color:var(--faint);padding-top:6px}
.rub-list li h3{font-size:24px;line-height:1.2}
.rub-list li p{grid-column:2;margin:6px 0 0;color:var(--smoke);font-size:17px}
.rub-list li .go{grid-column:2;margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rub-list li.cur .n{color:var(--ember)}
.rub-list li a{color:var(--ink)}
.rub-stick{position:sticky;top:calc(var(--head) + 28px)}
.rub-stick .scene{aspect-ratio:1/1}
@media (max-width:900px){.rub{grid-template-columns:1fr;gap:0}.rub-stick{order:-1;top:var(--head);z-index:3;background:var(--bone);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px}.rub-stick .scene{aspect-ratio:16/10;max-height:38svh;width:100%}}

/* ── как устроена статья: разрез листа и выноски ── */
.anat{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.callouts{list-style:none;margin:0;padding:0;counter-reset:c}
.callouts li{position:relative;padding:18px 0 18px 64px;border-top:1px solid var(--mist);opacity:.35;transition:opacity .45s}
.callouts li:last-child{border-bottom:1px solid var(--mist)}
.callouts li.on{opacity:1}
.callouts li::before{counter-increment:c;content:"0" counter(c);position:absolute;left:0;top:18px;font:500 15px/1 var(--mono);color:var(--ember)}
.callouts li::after{content:"";position:absolute;left:30px;top:26px;width:22px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .45s .1s}
.callouts li.on::after{transform:scaleX(1)}
.callouts b{display:block;font-weight:500;font-size:21px;margin-bottom:4px}
.callouts span{color:var(--smoke);font-size:16px}
@media (max-width:900px){.anat{grid-template-columns:1fr;gap:24px}}

/* ── манифест: тёмная секция (Smoke Veil), слово в пол-экрана ── */
.manifest{background:var(--smoke);color:var(--bone);padding:clamp(80px,12vw,160px) 0;overflow:hidden;position:relative}
.manifest .giant{font-size:clamp(64px,15vw,220px);line-height:.82;letter-spacing:-.025em;font-weight:500;white-space:nowrap;margin:0 0 40px -0.05em}
.manifest .giant em{font-style:normal;color:var(--ember)}
.manifest p{font-size:clamp(22px,2.4vw,32px);line-height:1.25;max-width:30ch;letter-spacing:-.01em}
.manifest q{color:rgba(252,251,248,.7)}
.manifest .sec-head{border-bottom-color:rgba(252,251,248,.18);color:var(--bone)}
.manifest .sec-head .node{border-color:var(--bone);background:var(--smoke)}
.marquee{white-space:nowrap;will-change:transform}

/* ── программы ── */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prod-cards{display:grid;gap:24px}
.pcard{border:1px solid var(--mist);border-radius:var(--r-card);padding:30px 30px 26px;background:var(--bone);transition:border-color .35s,transform .35s}
.pcard.cur{border-color:var(--ink)}
.pcard h3{font-size:28px;display:flex;align-items:center;gap:12px}
.pcard .what{color:var(--smoke);margin:10px 0 16px}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 20px;font-size:16px}
.pcard dt{color:var(--soft)}
.pcard dd{margin:0}
.prod-stick{position:sticky;top:calc(var(--head) + 28px)}
#prod-scene{aspect-ratio:4/3}
@media (max-width:900px){.prod{grid-template-columns:1fr;gap:0}.prod-stick{order:-1;top:var(--head);z-index:3;background:var(--bone);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px}.prod-stick .scene{aspect-ratio:16/10;max-height:36svh;width:100%}}

/* ── цифры ── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fig{background:var(--ash);border-radius:var(--r-card);padding:32px 28px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between}
.fig .big{font-size:clamp(64px,7.5vw,101px);line-height:.8;letter-spacing:-.025em;font-weight:500;font-variant-numeric:tabular-nums}
.fig .big small{font-size:.38em;letter-spacing:-.01em;margin-left:6px}
.fig p{margin:24px 0 0;color:var(--smoke);font-size:16px}
.fig p a{color:var(--ink)}
@media (max-width:900px){.figs{grid-template-columns:1fr}.fig{min-height:0}}
.fig[data-par] .big{translate:0 calc(var(--par,0) * -18px)}
.portrait[data-par] img{translate:0 calc(var(--par,0) * -18px)}
@media (prefers-reduced-motion:reduce){.fig[data-par] .big,.portrait[data-par] img{translate:none}}

/* ── автор ── */
.author{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.portrait{width:clamp(200px,22vw,300px);aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;position:relative;margin:0;background:var(--ash)}
.portrait img{width:100%;height:calc(100% + 40px);margin-top:-20px;object-fit:cover;object-position:50% 20%;display:block}
.portrait::after{content:"";position:absolute;right:16px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--ember)}
.author h3{font-size:32px;margin-bottom:12px}
.author .links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:700px){.author{grid-template-columns:1fr;gap:20px}}

/* ── вопросы ── */
.faq{border-top:1px solid var(--mist)}
.faq details{border-bottom:1px solid var(--mist)}
.faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;font-size:21px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--mist);display:grid;place-items:center;font-weight:400;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--ash)}
.faq details p{color:var(--smoke);max-width:70ch;padding-bottom:20px;margin:0}

/* ── форма ── */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lead-form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field span{font-size:15px;color:var(--soft)}
.field input,.field textarea,.field select{font:400 18px/1.4 var(--font);color:var(--ink);background:var(--bone);border:1px solid var(--mist);border-radius:14px;padding:14px 16px;width:100%;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:130px;resize:vertical}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--soft)}
.agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--ember)}
.lead-form .cta{justify-self:start;padding:16px 28px;font-size:17px}
.lead-form .cta.lit{outline:1px solid var(--ember);outline-offset:4px}
.lead-form .cta[disabled]{opacity:.6;cursor:default}
.hp{position:absolute;left:-9999px}
.form-note{font-size:15px;color:var(--soft)}
.done{display:none;border:1px solid var(--ink);border-radius:var(--r-card);padding:28px}
.done.show{display:block}
.err{color:#b3261e;font-size:15px;min-height:1em}
/* отклик на выбор: карточка показывает выбранную рубрику и её программу настоящими данными */
.pick{border:1px dashed var(--mist);border-radius:var(--r-card);padding:26px;transition:border-color .4s,background .4s}
.pick.on{border:1px solid var(--ink);background:var(--bone)}
.pick .mono{color:var(--faint)}
.pick h4{font-size:24px;font-weight:500;margin:10px 0 6px;letter-spacing:-.01em;color:var(--faint);transition:color .4s}
.pick.on h4{color:var(--ink)}
.pick .prog{margin-top:14px;font-size:16px;color:var(--soft)}
.pick .prog a{color:var(--ink)}
.pick .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mist);margin-right:8px;transition:background .4s}
.pick.on .dot{background:var(--ember)}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr;gap:28px}}

/* ── подвал ── */
.foot{border-top:1px solid var(--mist);padding:40px 0 56px;font-size:15px;color:var(--soft)}
.foot .wrap{display:block}
.foot a{color:var(--smoke);text-decoration:none}
.foot a:hover{color:var(--ember)}
.foot .mark{font-size:17px;color:var(--ink)}
/* 15.10.2026 общий подвал сайтов Эльхана: тот же состав на всех сайтах, вид — блога */
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px 40px;align-items:start}
.foot-who{display:grid;gap:12px;max-width:420px}
.foot-who p{margin:0;color:var(--soft);font-size:15px;line-height:1.55}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-h{margin:0 0 4px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:40px 0 0;padding-top:20px;border-top:1px solid var(--ash);font-size:13px;color:var(--faint)}
.foot-legal a{color:var(--soft)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-who{grid-column:1/-1;max-width:560px}}
@media (max-width:560px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}

/* ── линия «соединить точки» (line.js) ── */

@media (max-width:700px){
  body{font-size:17px}
  :root{--sec:72px}
  .sec-head{margin-bottom:36px}
  .sec .lead{font-size:18px}
  .post-card{padding:26px}
  .pcard{padding:24px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* Сквозной ход «сборка по разделам» (build.js): второй ряд шапки — гнёзда системы блога */
.build{border-top:1px solid var(--ash)}
.build .wrap{display:flex;align-items:center;gap:16px;height:36px}
.build-label{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.build-label b{font-weight:400;color:var(--ink)}
.slots{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:6px}
.slots li{width:28px;height:28px;border-radius:8px;border:1px solid var(--mist);background:var(--bone);display:grid;place-items:center;overflow:hidden;transition:border-color .4s}
.slots img{width:24px;height:24px;object-fit:contain;opacity:0;transform:translateY(-12px) scale(.6);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1.2)}
.slots li.in{border-color:var(--ink)}
.slots li.in img{opacity:1;transform:none}
.slots .last{width:auto;padding:0 10px 0 2px;gap:6px;display:flex;border-style:dashed}
.slots .last img{opacity:.35;transform:none}
.slots .last em{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--soft)}
.slots .last.want{border-color:var(--ember);border-style:solid}
.slots .last.want img{opacity:1}
.slots .last.want em{color:var(--ember)}
@media (max-width:760px){
  :root{--head:100px}
  .build .wrap{height:32px;gap:8px}
  .build-label{display:none}
  .slots{margin:0 auto;gap:4px}
  .slots li{width:24px;height:24px;border-radius:6px}
  .slots img{width:20px;height:20px}
  .slots .last{padding:0 7px 0 1px}
  .slots .last em{font-size:10px}
}
@media (max-width:360px){.slots{gap:3px}.slots li{width:22px;height:22px}.slots img{width:18px;height:18px}}

/* блок автора: кто пишет → чем подтверждено → куда идти за такой же системой */
.author .lead-a{font-size:19px;line-height:1.5;max-width:56ch}
.author .proof{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--mist)}
.author .proof li{padding:12px 0;border-bottom:1px solid var(--mist);color:var(--smoke);font-size:17px}
.author .proof b{font-weight:500;color:var(--ink)}
.author .offer{margin-top:24px;padding:24px;border:1px solid var(--ink);border-radius:var(--r-card)}
.author .offer p{margin:0;max-width:60ch}
.author .offer .links{margin-top:18px}
/* 13.10.2026: рубрики без статей одной строкой под фильтром */
.soon{font-size:14px;color:var(--soft);margin:0}
.rub-list{list-style:none;margin:8px 0 18px;padding:0;border-top:1px solid var(--mist)}
.rub-list li{margin:0;padding:10px 0;border-bottom:1px solid var(--mist);display:flex;flex-direction:column;gap:2px}
.rub-list a,.rub-list b{font-weight:500;color:var(--ink);text-decoration:none;line-height:1.3}
.rub-list a:hover{text-decoration:underline;text-decoration-color:var(--ember)}
.rub-list span{font-size:14px;color:var(--soft)}
/* 13.10.2026: на телефоне меню было скрыто целиком — теперь строка разделов под шапкой */
@media (max-width:900px){.top .wrap{flex-wrap:wrap;height:auto;min-height:60px;row-gap:0;padding-top:8px}.top .nav{display:flex;order:5;width:100%;gap:18px;font-size:14.5px;overflow-x:auto;white-space:nowrap;padding:2px 0 8px;margin:0;scrollbar-width:none}.top .nav::-webkit-scrollbar{display:none}}
@media (max-width:900px){.top .nav a{display:inline-flex;align-items:center;min-height:40px}.top .nav a[target]{display:none}.top .nav a::after{bottom:6px}
  .hero{padding-top:128px}.art-wrap{padding-top:128px}.sec{scroll-margin-top:110px}}
#nachat{scroll-margin-top:110px}
/* 17.10.2026, замечание Эльхана с телефона: «меню тоже непонятно, как там передвигаться» — строка разделов выглядела
   обычным текстом. Теперь это кнопки-вкладки; подвал — ссылки под палец (проверка на телефонах: были 23 px высотой). */
@media (max-width:900px){
  .top .nav{gap:6px;padding:4px 0 10px;font-size:14px}
  .top .nav a{min-height:38px;padding:0 12px;border:1px solid var(--mist);border-radius:999px;background:#fff;color:var(--ink);font-weight:500}
  .top .nav a::after{display:none}
  .top .nav a:active{background:var(--ink);color:#fff}
  .foot-col{gap:0}
  .foot-col a{display:inline-flex;align-items:center;min-height:40px}
}
/* 19.10.2026: подвал как у журнала — крупное название и описание слева (решение Эльхана); цвета — свои, палитра блога */
.foot{background:var(--bone);border-top:2px solid var(--ember)}
.foot-who .foot-title{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);font-weight:500}
.foot-who p:not(.foot-title){max-width:440px}