/* Шрифты со своего домена: было 119KB со стороннего, подмена давала
   два сдвига макета (CLS 0.029 на 505 и 537 мс). size-adjust и
   font-display:swap убирают скачок при замене. Оба файла вариативные —
   одного хватает на все начертания. */
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:400 500;
  font-display:swap; src:url(/f/oswald.woff2) format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(/f/sourceserif.woff2) format("woff2");
}
/* Моноширинный — ТОЛЬКО для измеренных величин. В штампе чертежа
   цифра всегда моноширинная; это и современный признак технического
   документа, и приём самого мира. Не костюм «под технологичность». */
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url(/f/mono400.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url(/f/mono500.woff2) format("woff2");
}

/* Запасные шрифты с подогнанными метриками: пока грузится свой,
   строка занимает ту же ширину — подмена больше не двигает макет.
   Это и чинило CLS 0.029 на навигации и штампе данных. */
@font-face{
  font-family:"Oswald-fb"; src:local("Arial Narrow"),local("Arial");
  size-adjust:84%; ascent-override:105%; descent-override:26%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Serif-fb"; src:local("Georgia"),local("Times New Roman");
  size-adjust:102%; ascent-override:96%; descent-override:30%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Mono-fb"; src:local("Consolas"),local("Courier New");
  size-adjust:97%; ascent-override:98%; descent-override:26%;
  line-gap-override:0%;
}

:root{
  --paper:#e3e6e4; --paper-2:#d7dcda; --paper-3:#cbd2cf;
  --graphite:#17191a; --graphite-2:#3d4245;
  --alum:#6e747a; --alum-dark:#4a4f54;
  --blueprint:#2f4a5c;
  --line:#b9c1be; --line-2:#a3aeaa;
  --plate-bg:#fbfaf8; --foot-bg:var(--graphite); --foot-fg:#c6cbc9;
  --foot-mute:#878f8d; --foot-line:#2c3133; --sel-fg:#f4f2ee;
  --hatch-op:.26; --img-filter:none;
  --foot-hover:#ffffff; --plate-shadow:0 2px 14px rgba(28,30,32,.07);
  --mono:"IBM Plex Mono","Mono-fb",ui-monospace,monospace;
  --wrap:1180px;
  --sp:clamp(56px,7vw,104px);
  --sp-tight:clamp(38px,4.2vw,62px);
  --sp-wide:clamp(74px,9vw,132px);
  /* Четыре ступени, остальное — их производные. Было одиннадцать
     кеглей, из них шесть в диапазоне 12-18px: иерархии не читалось. */
  --t-display:clamp(34px,5.4vw,64px);
  --t-head:clamp(25px,3.2vw,38px);
  --t-body:18px;
  --t-small:13px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--graphite);
  font-family:"Source Serif 4","Serif-fb",Georgia,serif;
  font-size:18px; line-height:1.66;
  font-kerning:normal; text-rendering:optimizeLegibility;
}

/* --- поверхности браузера: не оставляем на умолчаниях --- */
::selection{background:var(--blueprint); color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--blueprint); outline-offset:3px}
a{color:var(--alum-dark); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--blueprint)}
html{scrollbar-color:var(--line-2) var(--paper); caret-color:var(--blueprint)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--line-2); border:3px solid var(--paper)}
table{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--graphite);color:var(--paper);padding:10px 14px}

/* ---------- шапка ---------- */
.top{border-bottom:1px solid var(--line); background:var(--paper)}
.top__in{display:flex; align-items:baseline; gap:30px;
  padding:19px 0; flex-wrap:wrap}
.brand{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:19px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--graphite); text-decoration:none; white-space:nowrap}
.brand:hover{color:var(--blueprint)}
.nav{display:flex; gap:23px; flex-wrap:wrap; margin-left:auto}
.nav a{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--graphite-2); padding:7px 0; min-height:30px;
  display:inline-flex; align-items:center; border-bottom:1px solid transparent}
.nav a:hover{color:var(--graphite); border-bottom-color:var(--alum)}
.nav a[aria-current=page]{color:var(--graphite); border-bottom-color:var(--blueprint)}

/* ---------- заголовок страницы ---------- */
.head{border-bottom:1px solid var(--line); background:var(--paper-2);
  padding:calc(var(--sp)*.56) 0 calc(var(--sp)*.62)}

/* Первый экран главной: заголовок, чертёж и данные СРАЗУ вместе.
   Раньше до 900px было видно только h1 и край фото — справочник
   не показывал, что он справочник. */
.open{border-bottom:1px solid var(--line); background:var(--paper-2);
  padding:calc(var(--sp)*.52) 0 calc(var(--sp)*.58)}
.open__grid{display:grid; grid-template-columns:1.1fr .72fr;
  gap:clamp(30px,4vw,64px); align-items:end}
.open__grid > *{min-width:0}
.open h1{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-display); line-height:1.04; margin:0;
  letter-spacing:-.022em; text-wrap:balance; max-width:17ch}
.open__lead{margin:20px 0 0; font-size:20px; color:var(--graphite-2);
  line-height:1.56; max-width:50ch}
/* Данные как в штампе чертежа: правый столбец, моноширинные цифры */
.stamp{border-top:2px solid var(--graphite); padding-top:15px}
.stamp dl{margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:0; font-size:16.5px}
.stamp dt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:var(--t-small);
  letter-spacing:.12em; text-transform:uppercase; color:var(--graphite-2);
  padding:0 20px 0 0; border-bottom:1px solid var(--line);
  height:43px; display:flex; align-items:center}
.stamp dd{margin:0; padding:0; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; color:var(--blueprint);
  font-family:var(--mono); font-size:14.5px; letter-spacing:-.01em;
  height:43px; display:flex; align-items:center; justify-content:flex-end}
.stamp dt:last-of-type,.stamp dl dd:last-child{border-bottom:none}
@media (max-width:880px){
  .open__grid{grid-template-columns:1fr; gap:34px; align-items:start}
}
.head h1{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-display); line-height:1.04; margin:0;
  letter-spacing:-.022em; text-wrap:balance; max-width:20ch}
.head__lead{margin:21px 0 0; font-size:20px; max-width:62ch;
  color:var(--graphite-2); line-height:1.58}
/* сведения о странице идут ПОД заголовком как данные чертежа,
   а не этикеткой над ним — craft-floor запрещает eyebrow безусловно */
.head__meta{margin:25px 0 0; padding:9px 14px; display:inline-flex; gap:16px;
  flex-wrap:wrap; border:1px solid var(--line-2);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--blueprint)}

/* ---------- секции ---------- */
.sec{padding:var(--sp) 0; border-bottom:1px solid var(--line)}
/* Чередуем тесно/просторно: было пять секций с одинаковым --sp */
.sec--rule{padding:var(--sp-wide) 0}
.sec--band:not(.sec--record){padding:var(--sp-tight) 0}
.sec--band{background:var(--paper-2)}

/* Колонка чтения: узко и тесно сразу после просторного первого экрана.
   Контраст интервалов — то, чего на главной не было совсем. */
.sec--read{padding:var(--sp-tight) 0}
.sec--read .wrap{max-width:760px}
.sec--read p{font-size:19px; line-height:1.72; max-width:68ch}
.sec--read p + p{margin-top:19px}
.sec--read h2{margin-bottom:24px}

/* Запись о железе: просторно, фон темнее бумаги — это сноска, не витрина */
.sec--band:not(.sec--record) .wrap{max-width:1100px}
.sec--record{padding:var(--sp) 0 var(--sp-tight); background:var(--paper-3);
  border-bottom:none}
.sec--record .lead{max-width:60ch}
.sec h2{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-head); line-height:1.1; margin:0 0 22px;
  letter-spacing:-.016em; text-wrap:balance; max-width:24ch}
/* лид идёт сразу за заголовком — он часть той же группы */
.sec h2 + .lead{margin-top:-10px}
.sec h3{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:19px; line-height:1.24; margin:0 0 7px; letter-spacing:.004em}
.lead{font-size:20px; color:var(--graphite-2); max-width:66ch; margin:0 0 34px}
.sec p{max-width:72ch}
.sec h2 + p{margin-top:21px}

/* ---------- чертёж: подпись сайта ---------- */
.plate{margin:0; border:1px solid var(--graphite); background:var(--plate-bg);
  padding:clamp(22px,3.4vw,40px); box-shadow:var(--plate-shadow)}

/* Единственный поставленный момент: разрез прочерчивается, как на
   кульмане. Не россыпь эффектов — одна линия, один раз, по делу. */
@media (prefers-reduced-motion:no-preference){
  .plate:not(.plate--sm) .cut,.plate:not(.plate--sm) .dim{
    stroke-dasharray:100; stroke-dashoffset:100;
    animation:draw 1.5s cubic-bezier(.16,.9,.3,1) forwards}
  .plate:not(.plate--sm) .dim{animation-delay:.55s; animation-duration:1.1s}
  .plate:not(.plate--sm) .hatch{opacity:0;
    animation:hatchin .9s ease-out .9s forwards}
  .plate:not(.plate--sm) text{opacity:0;
    animation:fadein .7s ease-out 1.15s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes hatchin{to{opacity:var(--hatch-op)}}
.plate .hatch{opacity:var(--hatch-op)}
.plate svg{display:block; width:100%; height:auto}
.plate--sm{max-width:100%}
.plate figcaption{margin-top:19px; padding-top:14px;
  border-top:1px solid var(--line); font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--blueprint)}
.dim{stroke:var(--blueprint); stroke-width:1.6; fill:none; vector-effect:non-scaling-stroke}
.cut{stroke:var(--graphite); stroke-width:2.2; fill:none; vector-effect:non-scaling-stroke}
.hatch{fill:var(--alum); opacity:var(--hatch-op)}
.dimtxt{font-family:var(--mono); font-size:12px;
  letter-spacing:.02em; fill:var(--blueprint); font-weight:500}
.cuttxt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px;
  letter-spacing:.1em; fill:var(--graphite-2)}

/* ---------- два столбца: текст + боковые данные ---------- */
/* min-width:0 обязателен: иначе таблица с min-width:520px раздувает
   грид-колонку и уносит абзацы за край экрана (подтверждено рендером) */
.split{display:grid; grid-template-columns:1.72fr .9fr; gap:clamp(34px,5vw,74px);
  align-items:start}
.split > *{min-width:0}
.split__txt p{max-width:72ch}
.aside{border-top:2px solid var(--graphite); padding-top:17px}
.aside dl{margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:9px 18px; font-size:16px}
.aside dt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:11.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--graphite-2);
  padding-top:3px}
.aside dd{margin:0; font-variant-numeric:tabular-nums;
  color:var(--blueprint); font-family:var(--mono); font-size:14.5px}

/* Вместо заливки через одну — узкая колонка с правилом слева.
   Разные секции отличаются СТРОЕНИЕМ, а не цветом фона. */
.sec--rule .wrap{max-width:900px}
.duo{columns:2; column-gap:clamp(34px,4vw,62px); margin-top:22px}
.duo p{margin:0 0 17px; break-inside:avoid; max-width:none}
@media (max-width:820px){ .duo{columns:1} }

.num{font-family:var(--mono); font-weight:500; font-style:normal;
  color:var(--blueprint); font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
/* заголовки разделов в подвале и шапке таблиц — тоже данные */
.aside dt{color:var(--graphite-2)}
.steps li::before{color:var(--blueprint)}
.crumb a:hover{color:var(--blueprint)}

/* ---------- ступени (реальная последовательность) ---------- */
.steps{margin:0; padding:0; list-style:none; counter-reset:s;
  border-top:1px solid var(--line)}
.steps li{counter-increment:s; display:grid;
  grid-template-columns:clamp(42px,5vw,64px) 1fr; gap:clamp(16px,2.4vw,30px);
  padding:24px 0; border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:17px; letter-spacing:.06em;
  color:var(--blueprint); padding-top:3px; font-weight:500}
.steps p{margin:0; color:var(--graphite-2)}

/* ---------- таблица данных ---------- */
.tblwrap{overflow-x:auto; margin:32px 0 0;
  border-top:2px solid var(--graphite)}
table.data{border-collapse:collapse; width:100%; min-width:330px; font-size:16.5px}
table.data th{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px;
  letter-spacing:.11em; text-transform:uppercase; text-align:left;
  padding:13px 17px 13px 0; border-bottom:2px solid var(--blueprint);
  color:var(--blueprint); vertical-align:bottom}
table.data td{padding:13px 17px 13px 0; border-bottom:1px solid var(--line);
  vertical-align:top}
table.data td + td{color:var(--blueprint); font-family:var(--mono);
  font-size:14.5px; letter-spacing:-.01em}
table.data tr:last-child td{border-bottom:none}
table.data td:first-child{font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px;
  color:var(--graphite)}

/* ---------- ведущий снимок раздела ----------
   max-width по файлу задаётся инлайном; апскейла нет по построению. */
.hero{margin:0 0 clamp(30px,4vw,52px); border:1px solid var(--line-2);
  background:var(--paper); padding:clamp(10px,1.4vw,16px);
  width:fit-content; max-width:100%}
.hero img{display:block; width:auto; max-width:100%; height:auto;
  filter:var(--img-filter)}
.hero figcaption{margin-top:13px; padding-top:11px;
  border-top:1px solid var(--line); font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--blueprint)}

/* ---------- галерея: НЕ растягиваем мелкие фото ----------
   Ширина на figure задаётся инлайном по натуральному размеру фото,
   но её НАДО ограничить шириной колонки, иначе снимок 960px уносит
   страницу за край телефона (подтверждено рендером: 944px при 390). */
.gal{display:flex; flex-wrap:wrap; gap:15px; margin:34px 0 0}
.gal figure{margin:0; border:1px solid var(--line-2); background:var(--paper);
  padding:9px; flex:0 1 auto; max-width:100%; min-width:0}
.gal img{display:block; height:auto; max-width:100%; filter:var(--img-filter)}
.gal figcaption{margin-top:9px; font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.03em; color:var(--graphite-2)}

/* ---------- карточки разделов ---------- */
.xgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:34px 0 0}
@media (min-width:820px){
  /* 6 карточек ровно в два ряда по три — auto-fit давал 4+2 с дырой */
  .xgrid{grid-template-columns:repeat(3,1fr)}
}
.xcard{background:var(--paper); padding:25px 23px 23px; text-decoration:none;
  color:inherit; display:flex; flex-direction:column; gap:8px;
  transition:background .18s cubic-bezier(.2,.7,.3,1)}
.xcard:hover{background:var(--paper-2)}
.xcard h3{margin:0}
.xcard p{margin:0; font-size:16.5px; color:var(--graphite-2); max-width:none}
.xcard__go{margin-top:auto; padding-top:13px;
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--blueprint)}

/* ---------- обзорная полоса главной ----------
   Снимки разной ширины: выравниваем по высоте строки — задаём высоту,
   ширину пускаем auto. Пропорции сохраняются, апскейла нет. */
.strip{display:grid; gap:11px; margin:clamp(26px,3vw,38px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),250px))}
.strip__i{text-decoration:none; color:inherit; min-width:0;
  border:1px solid var(--line-2); background:var(--paper);
  padding:9px; transition:background .18s cubic-bezier(.2,.7,.3,1)}
.strip__i:hover{background:var(--paper-2)}
/* Ячейки равные: кадрируем по общей высоте, апскейла нет —
   object-fit:cover только обрезает, не растягивает пиксели. */
.strip__i img{display:block; width:100%; max-width:100%; height:146px;
  object-fit:cover; object-position:center}
.strip__i span{display:block; margin-top:9px; font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--graphite-2)}
.strip__i:hover span{color:var(--blueprint)}
@media (max-width:620px){ .strip__i img{height:132px} }

/* Перечень разделов вместо сетки одинаковых карточек: порядок теории
   несёт смысл, значит список, а не шесть равновесных прямоугольников. */
.idx{margin:0; padding:0; list-style:none; counter-reset:x;
  border-top:1px solid var(--line-2)}
.idx li{counter-increment:x; border-bottom:1px solid var(--line)}
.idx a{display:grid; grid-template-columns:clamp(44px,5vw,70px) 1fr;
  gap:clamp(14px,2.2vw,28px); padding:21px 0; text-decoration:none;
  color:inherit; transition:background .16s cubic-bezier(.2,.7,.3,1)}
.idx a:hover{background:var(--paper-2)}
.idx a::before{content:counter(x,decimal-leading-zero);
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px; letter-spacing:.06em;
  color:var(--blueprint); font-weight:500; padding-top:3px}
.idx h3{margin:0 0 5px}
.idx p{margin:0; font-size:16.5px; color:var(--graphite-2); max-width:62ch}
.idx a > div{min-width:0}
.idx a:hover h3{color:var(--blueprint)}
.rec__go{margin:clamp(24px,3vw,36px) 0 0}
.rec__go a{font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px;
  letter-spacing:.03em; color:var(--blueprint); text-decoration:none;
  min-height:30px; display:inline-flex; align-items:center}
.rec__go a:hover{text-decoration:underline}

/* ---------- столбцы причин ----------
   Рендер показал 40 знаков в строке при норме 65-75: три колонки
   на 1140px физически не дают нормальной меры для абзаца. Берём две
   колонки шире и уменьшаем кегль — мера выходит в район 60-68. */
.cols{display:grid; gap:clamp(30px,3.8vw,58px); margin:34px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.cols > div{border-top:2px solid var(--graphite); padding-top:17px}
.cols p{margin:0; font-size:16.5px; line-height:1.64;
  color:var(--graphite-2); max-width:none}

/* ---------- перелинковка ---------- */
.rel{margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.rel li{background:var(--paper)}
.rel a{display:block; padding:19px 21px; text-decoration:none; color:inherit;
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px; line-height:1.3;
  min-height:62px; transition:background .18s cubic-bezier(.2,.7,.3,1)}
.rel a:hover{background:var(--paper-2); color:var(--blueprint)}
.rel span{display:block; margin-top:7px; font-family:"Source Serif 4","Serif-fb",serif;
  font-size:16px; color:var(--graphite-2)}

/* ---------- крошки ----------
   Разделитель «/» декоративен: цвет --line-2 даёт 1.89:1 и провалил бы
   контраст как текст, поэтому он скрыт от чтения (aria-hidden) и
   рисуется как разделитель. Ссылка получает зону нажатия 30px —
   inline-элемент давал 17px. */
.crumb{padding:17px 0 0; font-family:"Oswald","Oswald-fb",sans-serif; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--graphite-2);
  display:flex; align-items:center; flex-wrap:wrap}
.crumb a{color:var(--graphite-2); text-decoration:none;
  min-height:30px; display:inline-flex; align-items:center}
.crumb a:hover{color:var(--blueprint); text-decoration:underline}
.crumb span{color:var(--line-2); padding:0 7px;
  min-height:30px; display:inline-flex; align-items:center}

/* ---------- подвал ---------- */
.foot{background:var(--foot-bg); color:var(--foot-fg); padding:calc(var(--sp)*.62) 0}
.foot__in{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:34px}
.foot h2{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--foot-mute); margin:0 0 13px; font-weight:400}
.foot ul{margin:0; padding:0; list-style:none}
.foot a{color:var(--foot-fg); text-decoration:none; font-size:16px;
  padding:6px 0; min-height:30px; display:inline-flex; align-items:center}
.foot a:hover{color:var(--foot-hover); text-decoration:underline}
.foot p{font-size:16px; color:var(--foot-mute); margin:0; max-width:46ch}
.foot__base{margin-top:36px; padding-top:21px; border-top:1px solid var(--foot-line);
  font-size:13px; color:var(--foot-mute)}

@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .head__lead{font-size:19px}
}

/* ТЁМНАЯ ТЕМА. Не инверсия бумаги (это дало бы негатив светокопии и
   убило синьку), а смена носителя: та же калька на подсвеченном столе.
   Ступени фона идут ВВЕРХ по светлоте, линейки светлее фона, синька
   вытянута по светлоте с сохранением тона (~202°).
   Контраст проверен формулой: текст 12.7:1, второстепенный 8.0,
   ссылки 6.5, синька 7.3 — все выше порога 4.5. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  --paper:#1b1f20; --paper-2:#212527; --paper-3:#272c2e;
  --graphite:#dde2e0; --graphite-2:#aeb6b4;
  --alum:#7d858a; --alum-dark:#9aa3a8;
  --blueprint:#7fb2cf;
  --line:#343a3c; --line-2:#434a4c;
  --plate-bg:#23282a;
  --foot-bg:#141718; --foot-fg:#c6cbc9; --foot-mute:#8d9593;
  --foot-line:#2a2f31; --sel-fg:#10161a;
  /* штриховка на тёмном тонет при .26 */
  --hatch-op:.36;
  /* снимки сняты на светлом фоне: гасим форсаж, не затемняем материал */
  --img-filter:brightness(.92) contrast(1.02);
  --foot-hover:#f2f5f4;
  --plate-shadow:0 2px 18px rgba(0,0,0,.32);
 }
}
:root[data-theme="dark"]{
  --paper:#1b1f20; --paper-2:#212527; --paper-3:#272c2e;
  --graphite:#dde2e0; --graphite-2:#aeb6b4;
  --alum:#7d858a; --alum-dark:#9aa3a8;
  --blueprint:#7fb2cf;
  --line:#343a3c; --line-2:#434a4c;
  --plate-bg:#23282a;
  --foot-bg:#141718; --foot-fg:#c6cbc9; --foot-mute:#8d9593;
  --foot-line:#2a2f31; --sel-fg:#10161a;
  --hatch-op:.36;
  --img-filter:brightness(.92) contrast(1.02);
  --foot-hover:#f2f5f4;
  --plate-shadow:0 2px 18px rgba(0,0,0,.32);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- раздел Guides (добавлено 03.11.2026) ----------
 Только новые элементы: подпись с датой, формула, оглавление, вопросы,
 источники, легенда чертежа. Цвета — только переменные палитры, поэтому
 тёмная тема работает без отдельных правил. Колонка чтения — .sec--read
 (760px, 19px): мера строки 65–70 знаков, как у остальных текстов. */

/* подпись под заголовком: кто и когда, как штамп чертежа */
.byline{margin:15px 0 0; font-family:"Oswald","Oswald-fb",sans-serif; font-size:14px;
 letter-spacing:.06em; color:var(--graphite-2)}
.byline time{font-family:var(--mono); font-size:13px; letter-spacing:0; color:var(--blueprint)}
.head .byline + .head__lead{margin-top:14px}

/* раздел в меню отмечен и на страницах статей */
.nav a[aria-current=true]{color:var(--graphite); border-bottom-color:var(--blueprint)}

/* текст статьи */
.guide h2{margin-top:clamp(46px,5vw,66px)}
.guide > h2:first-child{margin-top:0}
.guide h3{margin:30px 0 8px}
.guide ul:not(.srcs), .guide ol:not(.steps):not(.idx):not(.legend){margin:14px 0 22px; padding-left:1.3em;
 font-size:19px; line-height:1.66; max-width:66ch}
.guide ul:not(.srcs) li, .guide ol:not(.steps):not(.idx):not(.legend) li{margin:0 0 8px; padding-left:3px}
.guide li::marker{color:var(--blueprint)}
.guide h2[id]{scroll-margin-top:18px}

/* формула отдельной строкой */
.sec--read .eq{display:block; width:fit-content; max-width:100%; overflow-x:auto;
 margin:18px 0 22px; padding:11px 18px; border-left:2px solid var(--blueprint);
 background:var(--paper-2); font-family:var(--mono); font-size:16.5px; line-height:1.5;
 color:var(--blueprint); white-space:nowrap}

/* таблицы в колонке чтения: подпись над таблицей; текстовые ячейки — обычным шрифтом */
.guide .tblwrap{margin:26px 0 30px}
table.data caption{caption-side:top; text-align:left; padding:12px 0 10px;
 font-family:"Oswald","Oswald-fb",sans-serif; font-size:14px; letter-spacing:.02em;
 line-height:1.4; color:var(--graphite-2)}
table.data--text{min-width:560px}
table.data--text td + td{font-family:"Source Serif 4","Serif-fb",serif; font-size:16px;
 letter-spacing:0; color:var(--graphite-2)}
table.data sub, .eq sub{font-size:.75em}

/* оглавление хаба: строки-ссылки высотой 44px для пальца */
.toc{margin:6px 0 42px; padding:16px 22px 8px; background:var(--paper-2);
 border-left:2px solid var(--blueprint)}
.sec--read .toc p{margin:0 0 2px; font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px;
 letter-spacing:.12em; text-transform:uppercase; color:var(--graphite-2)}
.guide .toc ol{margin:0; padding-left:1.5em; font-size:17px; max-width:none; columns:2 250px; column-gap:34px}
.guide .toc li{margin:0; padding-left:4px; break-inside:avoid}
.guide .toc li::marker{font-family:var(--mono); font-size:14px}
.toc a{display:inline-flex; align-items:center; min-height:44px; color:var(--graphite);
 text-decoration-color:var(--line-2)}
.toc a:hover{color:var(--blueprint); text-decoration-color:var(--blueprint)}

/* список статей хаба — тот же .idx, что на главной */
.guide .idx{margin:8px 0 34px}
.guide .idx h3{margin:0 0 5px}

/* вопросы читателей */
.faq h3{margin:30px 0 8px}
.faq h3:first-child{margin-top:8px}

/* источники */
.srcs{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line);
 font-size:16.5px; line-height:1.6}
.srcs li{padding:12px 0; border-bottom:1px solid var(--line); max-width:68ch}
.srcs a{overflow-wrap:anywhere}

/* чертёж в колонке: подпись и расшифровка номеров под рисунком */
.guide .fig{margin:28px 0 34px}
.sec--read .plate figcaption > p{margin:0; max-width:none; font-size:13px; line-height:1.5}
.legend{margin:12px 0 0; padding:0; list-style:none; counter-reset:lg; display:grid;
 gap:7px 26px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
 font-family:"Source Serif 4","Serif-fb",serif; font-size:15.5px; line-height:1.5;
 letter-spacing:0; color:var(--graphite-2)}
.legend li{counter-increment:lg; position:relative; padding-left:32px}
.legend li::before{content:counter(lg); position:absolute; left:0; top:.12em; width:22px; height:22px;
 border-radius:50%; background:var(--blueprint); color:var(--plate-bg); font-family:var(--mono);
 font-size:12px; line-height:22px; text-align:center}
.mk circle{fill:var(--blueprint)}
.mk text{fill:var(--plate-bg); font-family:var(--mono); font-size:13px; font-weight:500;
 text-anchor:middle; dominant-baseline:central}
.ld{stroke:var(--blueprint); stroke-width:1.2; vector-effect:non-scaling-stroke}
.cone{stroke:var(--blueprint); stroke-width:2; fill:none; stroke-dasharray:9 6;
 vector-effect:non-scaling-stroke}
.alt{stroke:var(--alum-dark); stroke-width:2.4; fill:none; stroke-dasharray:1 5;
 stroke-linecap:round; vector-effect:non-scaling-stroke}
.grid{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.ax{stroke:var(--graphite-2); stroke-width:1.4; fill:none; vector-effect:non-scaling-stroke}
.dot{fill:var(--blueprint)}
@media (max-width:620px){
 .guide .plate{padding:14px}
 .legend{font-size:15px}
}
/* якоря оглавления — плавно, только где оно есть и если движение не отключено */
@media (prefers-reduced-motion:no-preference){ html:has(.toc){scroll-behavior:smooth} }
/* мера строки: 68ch у .sec--read даёт до 79 знаков (ch шире средней буквы);
 64ch держит абзацы статей в пределах 75 знаков (замер рендером) */
.sec--read .guide p:not(.eq){max-width:64ch}
.guide ul:not(.srcs), .guide ol:not(.steps):not(.idx):not(.legend){max-width:62ch}
/* ведущий снимок статьи не шире 860px: у остальных разделов снимки до 960px,
 полноформатное фото 1333px съедало весь первый экран */
.hero.hero--guide{max-width:min(100%,894px)}
/* подпись таблицы не уезжает вместе с прокруткой узкой таблицы на телефоне */
.tblwrap table.data caption{max-width:calc(100vw - 52px)}