:root{--paper:#ECEFEA;--sheet:#F7F8F5;--ink:#121815;--ink-2:#4B5650;--rule:#C6CDC5;--rule-soft:#DCE1DA;
  --cobalt:#2A3FD6;--cobalt-ink:#2334B8;--cobalt-wash:#DDE1F7;--on-cobalt:#FFFFFF;
  --amber:#C77700;--leak-ink:#8A4F00;--leak-wash:#F6E6C9;--ok:#2F7A4B;--ok-wash:#DCEDE1;
  --shadow:0 1px 0 rgba(18,24,21,.04),0 18px 40px -24px rgba(18,24,21,.28);
  --display:"Alumni Sans","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0E1311;--sheet:#161C19;--ink:#E4E9E2;--ink-2:#9AA59E;--rule:#2E3833;--rule-soft:#222A26;
  --cobalt:#8C9BFF;--cobalt-ink:#AEB8FF;--cobalt-wash:#1D2447;--on-cobalt:#0E1311;--amber:#F2A53A;--leak-ink:#F5BE6E;--leak-wash:#33260F;--ok:#6FC08F;--ok-wash:#17301F;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 18px 40px -24px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--paper:#0E1311;--sheet:#161C19;--ink:#E4E9E2;--ink-2:#9AA59E;--rule:#2E3833;--rule-soft:#222A26;
  --cobalt:#8C9BFF;--cobalt-ink:#AEB8FF;--cobalt-wash:#1D2447;--on-cobalt:#0E1311;--amber:#F2A53A;--leak-ink:#F5BE6E;--leak-wash:#33260F;--ok:#6FC08F;--ok-wash:#17301F;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 18px 40px -24px rgba(0,0,0,.7)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body)}
a{color:var(--cobalt-ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.label{font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* шапка */
.top{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5;background:var(--paper)}
.top .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px);display:flex;align-items:center;gap:16px;height:64px}
.brand{text-decoration:none;color:var(--ink);font:800 28px/1 var(--display);letter-spacing:.02em}
.brand i{font-style:normal;color:var(--cobalt)}
.crumb{font:500 13px/1 var(--body);color:var(--ink-2);text-decoration:none}
.crumb:hover{color:var(--ink)}
.btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--cobalt);color:var(--on-cobalt);font:600 14px/1 var(--body);padding:12px 16px;border-radius:3px;border:0;cursor:pointer}
.btn:hover{background:var(--cobalt-ink)}

/* каркас статьи */
.art{max-width:760px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(18px,4vw,40px) 90px}
.art h1{margin:12px 0 14px;font:760 clamp(2.6rem,6vw,4.4rem)/.95 var(--display);letter-spacing:-.005em;text-wrap:balance}
.art .meta{font:400 12.5px/1.6 var(--mono);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 14px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.lede{margin:26px 0 0;font-size:clamp(19px,2.2vw,21px);line-height:1.55;color:var(--ink)}
.art h2{margin:52px 0 14px;font:760 clamp(1.9rem,3.4vw,2.6rem)/1.05 var(--display);text-wrap:balance}
.art h3{margin:30px 0 8px;font:600 18px/1.4 var(--body)}
.art p{margin:0 0 14px;max-width:68ch}
.art ul,.art ol{margin:0 0 16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:68ch}
.art li{position:relative;padding-left:26px}
.art ul li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:2px;background:var(--cobalt)}
.art ol{counter-reset:n}
.art ol li{counter-increment:n}
.art ol li::before{content:counter(n);position:absolute;left:0;top:.05em;font:500 12px/1.7 var(--mono);color:var(--cobalt-ink)}
.art strong{font-weight:600}
.art blockquote{margin:26px 0;padding:0 0 0 20px;border-left:2px solid var(--cobalt);font-size:19px;line-height:1.55;color:var(--ink)}

figure{margin:30px 0;padding:20px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet)}
figcaption{margin-top:14px;font:400 11.5px/1.6 var(--mono);color:var(--ink-2)}
.scroll{overflow-x:auto}
.scroll svg{min-width:560px}

/* столбиковая диаграмма */
.legend{display:flex;flex-wrap:wrap;gap:16px;font:400 11.5px/1 var(--mono);color:var(--ink-2);margin-bottom:16px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:14px;height:10px;border-radius:1px;display:inline-block}
.legend .p{border:1.5px solid var(--cobalt)}
.legend .w{background:var(--cobalt)}
.chart{display:flex;flex-direction:column;gap:16px}
.row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:12px;align-items:center}
.row .name{font:500 13.5px/1.35 var(--body)}
.bars{display:flex;flex-direction:column;gap:4px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),var(--rule-soft) calc(25% - 1px),var(--rule-soft) 25%)}
.bar{position:relative;height:14px;border-radius:1px}
.bar.p{border:1.5px solid var(--cobalt);background:var(--cobalt-wash)}
.bar.w{background:var(--cobalt)}
.bar b{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);font:500 11.5px/1 var(--mono);white-space:nowrap}
.bar.p b{color:var(--ink-2)}
.axis{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:12px}
.axis div{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);color:var(--ink-2)}

/* матрица «частота × цена ошибки» */
.matrix{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;min-width:420px}
.matrix .cor{}
.matrix .col-h,.matrix .row-h{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);align-self:end;padding-bottom:4px}
.matrix .row-h{align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;padding:0 4px 0 0}
.cell{padding:14px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.cell b{font:600 15px/1.3 var(--body)}
.cell span{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.cell.good{border-color:var(--ok);background:var(--ok-wash)}
.cell.good b{color:var(--ok)}
.cell.care{border-color:var(--amber);background:var(--leak-wash)}
.cell.care b{color:var(--leak-ink)}
.cell.care span{color:var(--leak-ink)}

/* таблица вердиктов */
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th{text-align:left;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:0 12px 10px 0;border-bottom:1.5px solid var(--ink)}
td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
td:last-child,th:last-child{padding-right:0;color:var(--ink-2)}
.b{display:inline-block;white-space:nowrap;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:2px}
.b.yes{color:var(--ok);background:var(--ok-wash)}
.b.care{color:var(--leak-ink);background:var(--leak-wash)}
.b.no{color:var(--ink-2);border:1px solid var(--rule)}

/* уровни данных */
.grades{border-top:1.5px solid var(--ink);margin:26px 0}
.grade-row{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.grade-row .g{grid-row:span 2;font:800 3rem/.8 var(--display)}
.grade-row .g.a{color:var(--ok)}.grade-row .g.b{color:var(--cobalt)}.grade-row .g.c{color:var(--leak-ink)}.grade-row .g.d{color:var(--ink-2)}
.grade-row b{font:600 16px/1.35 var(--body)}
.grade-row span{font-size:15px;line-height:1.5;color:var(--ink-2)}

.callout{margin:30px 0;padding:18px 20px;border-left:3px solid var(--amber);background:var(--leak-wash);color:var(--leak-ink);border-radius:0 3px 3px 0}
.callout b{display:block;margin-bottom:4px;font-weight:600}
.source{font:400 11.5px/1.6 var(--mono);color:var(--ink-2);max-width:68ch}

.endcta{margin:56px 0 0;padding:26px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.endcta h2{margin:0;font:760 clamp(1.8rem,3vw,2.4rem)/1 var(--display)}
.endcta p{margin:0;color:var(--ink-2)}
.endcta .btn{margin-left:0;padding:15px 22px;font-size:15px}

/* плитки с цифрами кейса */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat{padding:18px;border:1px solid var(--rule);border-radius:3px;display:flex;flex-direction:column;gap:8px}
.stat b{font:760 clamp(2.1rem,5vw,3rem)/1 var(--display);color:var(--cobalt);font-variant-numeric:tabular-nums}
.stat span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* отзывы участников */
.said-by{display:flex;flex-direction:column;gap:16px}
.said-by .q{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--rule);border-radius:4px}
.said-by .q p{margin:0;font-size:16px;line-height:1.6}
.said-by cite{font-style:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px}
.said-by cite b{font:600 14.5px/1.3 var(--body)}
.said-by cite span{font:400 11.5px/1.4 var(--mono);color:var(--ink-2)}

/* карточка кейса */
.case{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:560px}
.case>div{display:flex;flex-direction:column;gap:10px}
.case h4{margin:0;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.case ul{margin:0;gap:8px}
.case li{font-size:14.5px;padding-left:20px;line-height:1.45}
.case .said{font-size:14.5px;line-height:1.5;color:var(--ink);font-style:italic}

/* список статей */
.blog{max-width:900px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(18px,4vw,40px) 90px}
.blog h1{margin:12px 0 14px;font:760 clamp(2.8rem,6.5vw,4.6rem)/.95 var(--display)}
.blog .intro{max-width:56ch;color:var(--ink-2);font-size:17px}
.posts{margin-top:clamp(28px,4vw,44px);border-top:1.5px solid var(--ink);display:flex;flex-direction:column}
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem);gap:10px 32px;padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.post:hover h2{color:var(--cobalt-ink)}
.post h2{margin:0;font:760 clamp(1.7rem,3vw,2.3rem)/1.05 var(--display);text-wrap:balance}
.post p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:60ch}
.post .when{grid-row:span 2;justify-self:end;text-align:right;font:400 11.5px/1.7 var(--mono);color:var(--ink-2)}
.empty{padding:26px 0;color:var(--ink-2)}

footer{border-top:1px solid var(--rule);margin-top:40px}
.legal{max-width:1180px;margin:0 auto;padding:22px clamp(18px,4vw,40px) 40px;display:flex;flex-wrap:wrap;gap:8px 22px;font:400 12px/1.6 var(--mono);color:var(--ink-2)}
.legal a{color:var(--ink-2)}

@media (max-width:700px){
  .row,.axis{grid-template-columns:1fr}
  .axis>span{display:none}
  .bars{margin-right:44px}
  .post{grid-template-columns:1fr}
  .post .when{grid-row:auto;justify-self:start;text-align:left}
  .matrix{min-width:380px}
  .case{grid-template-columns:1fr;min-width:0;gap:24px}
  .stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}