/* ============================================================
   Металл и Ковка — оформление

   НАПРАВЛЕНИЕ: современный издательский сайт. Крупная типографика,
   тёмная обложка, светлая полоса чтения, сетка материалов
   с собственными графическими мотивами.

   ⚠️ ЧТО ИСПРАВЛЕНО ОТНОСИТЕЛЬНО ПЕРВОЙ ВЕРСИИ:
   · узкий гротеск (Arial Narrow) убран совсем — на Windows он
     отрисовывается сухо и читается устаревшим;
   · размерная линейка во всю ширину убрана — превращалась в рябь;
   · у меню был overflow-x, браузер рисовал полосу прокрутки прямо
     в шапке и обрезал пункты посреди слова.

   ФОТОГРАФИИ: снимки прежнего сайта принадлежат его владельцу и не
   используются. Взяты кадры со свободной лицензией, реестр с
   источником на каждый файл — `img/foto/ИСТОЧНИКИ.md`. Схемы и
   чертёжные мотивы остались: уникальность даёт схема, а не фото.
   ============================================================ */

:root{
  --ink:#101418;
  --body:#333c44;
  --zinc:#69757f;
  --line:#dde2e6;
  --hair:#eaeef1;
  --paper:#ffffff;
  --shade:#f4f6f7;
  --dark:#101418;
  --dark-2:#1b2126;
  --accent:#c8892b;        /* латунь */
  --accent-lift:#e0a542;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display",
         "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;

  --wrap:41rem;
  --shell:70rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#f0f3f5; --body:#c2cbd2; --zinc:#8d99a3;
    --line:#2b3238; --hair:#20262b;
    --paper:#0e1216; --shade:#141a1f;
    --dark:#080b0e; --dark-2:#141a1f;
    --accent:#e0a542; --accent-lift:#f0bd63;
  }
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--body);
  font:1.0625rem/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ── шапка ─────────────────────────────────────────────────── */
header{ background:var(--dark); color:#fff }
.head-in{
  max-width:var(--shell); margin:0 auto;
  padding:1.1rem 1.4rem .2rem;
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:1.2rem; font-weight:700; letter-spacing:-.02em;
  color:#fff; text-decoration:none;
}
.mark{ color:var(--accent-lift); flex:none }
.sub{ font-size:.85rem; color:#8d99a3 }

nav.main{ max-width:var(--shell); margin:0 auto; padding:.7rem 1.4rem 1.1rem }
nav.main ul{
  display:flex; flex-wrap:wrap; gap:.5rem 1.15rem;
  list-style:none; margin:0; padding:0;
}
/* Разделов десять — на средних экранах вторая строка неизбежна.
   Пусть она будет ровной, а не с одинокой парой пунктов. */
@media (min-width:60rem){ nav.main ul{ justify-content:flex-start } }

/* ⚠️ НА ТЕЛЕФОНЕ МЕНЮ ЗАНИМАЛО 221 ПИКСЕЛЬ — четверть первого экрана.
   Десять пунктов переносились в пять строк, и человек упирался
   в стену ссылок раньше, чем в текст, ради которого пришёл.
   Убираем перенос: строка одна, лишнее уезжает вбок по свайпу.
   Полоса прокрутки скрыта — на телефоне её всё равно не хватают
   пальцем, а место она занимает. */
@media (max-width:59.99rem){
  nav.main{ padding-bottom:.7rem }
  nav.main ul{
    flex-wrap:nowrap; overflow-x:auto; gap:1.15rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* Обрез у края подсказывает, что список продолжается. */
    mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  nav.main ul::-webkit-scrollbar{ display:none }
  nav.main li{ flex:none; scroll-snap-align:start }
  nav.main a{ white-space:nowrap }
}
nav.main a{
  font-size:.9rem; color:#9aa5ae; text-decoration:none;
  padding-bottom:.25rem; border-bottom:2px solid transparent;
}
nav.main a:hover{ color:#fff }
nav.main a.on{ color:#fff; border-bottom-color:var(--accent) }

/* поиск в шапке */
.search{ display:flex; margin-left:auto; gap:.35rem }
.search input{
  font:.9rem/1 var(--sans); color:#fff; background:#1e262c;
  border:1px solid #2c363e; padding:.5rem .7rem; width:11rem; min-width:0;
}
.search input::placeholder{ color:#7d888f }
.search button{
  font:.85rem/1 var(--sans); color:#cfd6dc; background:transparent;
  border:1px solid #2c363e; padding:.5rem .8rem; cursor:pointer;
}
.search button:hover{ color:#fff; border-color:var(--accent) }
@media (max-width:40rem){ .search{ margin-left:0; width:100% } .search input{ flex:1 } }

/* ── статья ────────────────────────────────────────────────── */
main{ max-width:var(--wrap); margin:0 auto; padding:2.6rem 1.4rem 5rem }
main.wide{ max-width:var(--shell); padding-top:0 }

/* Две колонки: текст и сайдбар. На узком экране сайдбар уходит вниз. */
main.layout{
  max-width:var(--shell); display:grid; gap:3rem;
  grid-template-columns:minmax(0,var(--wrap)) 17rem;
  justify-content:center; align-items:start;
}
main.layout > article{ min-width:0 }
main.layout > aside{ position:sticky; top:1.5rem }
@media (max-width:62rem){
  main.layout{ grid-template-columns:minmax(0,1fr); max-width:var(--wrap) }
  main.layout > aside{ position:static }
}

.meta{
  font-size:.88rem; color:var(--zinc); margin:-.6rem 0 1.6rem;
  padding-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.meta a{ color:var(--zinc); text-decoration:none }
.meta a:hover{ color:var(--accent) }

.art-cover{
  background:var(--shade); border:1px solid var(--line);
  padding:1.6rem 2rem; margin:0 0 2rem; color:var(--zinc);
}
.art-cover .cover{ display:block; width:100%; max-width:22rem; margin:0 auto; height:auto }

/* Заглавное фото. Размеры проставлены в разметке, поэтому место под
   картинку занято до её загрузки и текст под ней не прыгает. */
.art-foto{ margin:0 0 2rem }
.art-foto img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); background:var(--shade);
}

/* ── сайдбар ───────────────────────────────────────────────── */
.s-box{ margin:0 0 2rem; font-size:.93rem }

/* Оглавление живёт в двух местах: в липкой колонке — для десктопа,
   в теле статьи — для телефона, где колонка уезжает вниз. Показываем
   ровно одно, иначе на широком экране рядом стоят два одинаковых
   списка и это читается как ошибка вёрстки. */
@media (min-width:62.01rem){ .toc{ display:none } }
@media (max-width:62rem){ .s-toc{ display:none } }

/* Список разделов в липкой колонке длинный: у статьи бывает
   до восьми заголовков. Ограничиваем высоту, чтобы блок не выпирал
   за экран и не ломал липкость — тогда прокрутка идёт внутри него. */
.s-toc ul{ max-height:52vh; overflow-y:auto }
.s-toc li a{ padding:.4rem 0; font-size:.9rem }
.sh{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--zinc); margin:0 0 .7rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--line);
}
.s-box ul{ margin:0; padding:0; list-style:none }
.s-box li{ margin:0; border-bottom:1px solid var(--hair) }
.s-box li a{
  display:block; padding:.55rem 0; color:var(--body);
  text-decoration:none; line-height:1.4;
}
.s-box li a:hover{ color:var(--accent) }
.s-box li a.on{ color:var(--ink); font-weight:650 }
.s-about p{ margin:0 0 .7rem; font-size:.88rem; color:var(--zinc) }

/* ── поиск: страница ───────────────────────────────────────── */
.bigsearch{ margin:0 0 1rem }
.bigsearch input{
  width:100%; font:1.15rem/1.4 var(--sans); color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); padding:.85rem 1rem;
}
.found{ font-size:.9rem; color:var(--zinc); margin:0 0 1.4rem }
.hit{
  display:block; padding:.9rem 0; border-bottom:1px solid var(--hair);
  text-decoration:none; color:var(--body);
}
.hit b{ display:block; color:var(--ink); font-size:1.08rem; margin-bottom:.2rem }
.hit span{ font-size:.9rem; color:var(--zinc) }
.hit:hover b{ color:var(--accent) }

.crumbs{ font-size:.85rem; color:var(--zinc); margin:0 0 1.2rem }
.crumbs a{ color:var(--zinc); text-decoration:none }
.crumbs a:hover{ color:var(--accent) }

h1{
  font-size:clamp(2.1rem,5vw,3.1rem); line-height:1.06;
  letter-spacing:-.03em; font-weight:700; color:var(--ink);
  margin:0 0 1.5rem; text-wrap:balance;
}
h2{
  font-size:clamp(1.45rem,3vw,1.8rem); line-height:1.2;
  letter-spacing:-.02em; font-weight:700; color:var(--ink);
  margin:3.2rem 0 .9rem;
}
h3{
  font-size:1.15rem; letter-spacing:-.01em; font-weight:700;
  color:var(--ink); margin:2rem 0 .5rem;
}
p{ margin:0 0 1.25rem }
a{ color:var(--accent); text-underline-offset:.18em }
strong{ color:var(--ink); font-weight:650 }
ul,ol{ margin:0 0 1.3rem; padding-left:1.3rem }
li{ margin:.4rem 0 }
li::marker{ color:var(--zinc) }

blockquote{
  margin:1.6rem 0; padding:1rem 1.2rem;
  background:var(--shade); border-left:3px solid var(--accent);
}
blockquote p{ margin:0 }
code{ font-family:var(--mono); font-size:.88em; background:var(--shade); padding:.1em .35em }

/* ── обложка главной ───────────────────────────────────────── */
/* ⚠️ Обложка была свёрстана в одну колонку с заголовком шириной
   в 14 знаков. На широком экране это давало четыре строки в левой
   трети и пустоту справа. Теперь на больших экранах заголовок
   и подводка стоят рядом и делят ширину. */
.hero{
  background:var(--dark); color:#fff;
  margin:0 0 3.5rem; padding:4.5rem 1.4rem 4rem;
}
.hero-in{
  max-width:var(--shell); margin-inline:auto;
  display:grid; gap:1.6rem 3.5rem; align-items:end;
}
@media (min-width:60rem){
  .hero-in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) }
  .hero .kicker{ grid-column:1 / -1 }
}
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-lift); margin:0;
}
.hero h1{
  color:#fff; font-size:clamp(2.2rem,5.2vw,4.1rem); line-height:1.02;
  letter-spacing:-.035em; max-width:20ch; margin:0; text-wrap:balance;
}
.lead{
  font-size:1.15rem; line-height:1.62; color:#aab4bd;
  max-width:46ch; margin:0 0 .4rem;
}

/* ── сетка разделов ────────────────────────────────────────── */
.cards{
  max-width:var(--shell); margin:0 auto 4rem; padding:0 1.4rem;
  display:grid; gap:1.6rem 1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
}
.card{ text-decoration:none; color:var(--body); display:block }
.cover-wrap{
  display:block; background:var(--shade);
  border:1px solid var(--line); padding:1.1rem 1.2rem;
  color:var(--zinc); transition:color .18s, border-color .18s;
}
.cover{ display:block; width:100%; height:auto }
.card:hover .cover-wrap{ color:var(--accent); border-color:var(--accent) }
.card h2{ margin:.85rem 0 .35rem; font-size:1.2rem; letter-spacing:-.01em }
.card h2::before{ display:none }   /* засечка тут не нужна */
.card:hover h2{ color:var(--accent) }
.card p{ margin:0; font-size:.93rem; line-height:1.55; color:var(--zinc) }

.home-text{ max-width:var(--wrap); margin:0 auto; padding:0 1.4rem }
.home-text h2:first-child{ margin-top:0 }

/* ── схемы ─────────────────────────────────────────────────── */
figure{ margin:2.4rem 0; padding:1.2rem; background:var(--shade); border:1px solid var(--line) }
figure img{ display:block; width:100%; height:auto }
figcaption{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--zinc);
}

/* ── таблица ───────────────────────────────────────────────── */
.tw{ overflow-x:auto; margin:0 0 1.6rem }
table{ border-collapse:collapse; width:100%; font-size:.95rem }
th{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--zinc); font-weight:600; text-align:left; white-space:nowrap;
  padding:.55rem .75rem; border-bottom:2px solid var(--line);
}
td{
  padding:.7rem .75rem; vertical-align:top;
  border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums;
}

/* ── оглавление ────────────────────────────────────────────── */
.toc{ background:var(--shade); padding:1.2rem 1.4rem; margin:0 0 2.6rem }
.toc p{
  margin:0 0 .6rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zinc);
}
.toc ul{ margin:0; padding:0; list-style:none }
.toc li{ margin:.35rem 0 }
.toc a{ color:var(--body); text-decoration:none }
.toc a:hover{ color:var(--accent) }

/* ── вопросы ───────────────────────────────────────────────── */
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:1rem 2.2rem 1rem 0;
  position:relative; color:var(--ink); font-weight:650;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:.3rem; top:.85rem;
  font-family:var(--mono); color:var(--accent); font-size:1.2rem;
}
.faq details[open] summary::after{ content:"–" }
.faq p{ margin:0 0 1.1rem; color:var(--zinc) }

/* ── по теме и призыв ──────────────────────────────────────── */
.related{ margin:3.5rem 0 0; padding-top:1.3rem; border-top:2px solid var(--line) }
.related p{
  margin:0 0 .7rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zinc);
}
.related ul{ margin:0; padding:0; list-style:none }
.related li{ margin:.4rem 0 }
.related a{ color:var(--body); text-decoration:none }
.related a:hover{ color:var(--accent) }

/* Конверсионный блок в теле статьи — по регламенту он должен
   встретиться внутри текста, а не только в конце. */
.inbody{
  margin:2.6rem 0; padding:1.3rem 1.4rem;
  background:var(--dark); color:#c2cbd2;
  border-left:3px solid var(--accent);
}
.inbody p{ margin:0 0 .6rem }
.inbody p:last-child{ margin:0 }
.inbody strong{ color:#fff }
.inbody-t{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:#7d888f;
}
.inbody-a{ color:var(--accent-lift); font-weight:650; text-decoration:none }
.inbody-a:hover{ text-decoration:underline }

.author{
  margin:3rem 0 0; padding:1.4rem 1.5rem;
  background:var(--shade); border:1px solid var(--line);
}
.author p{ margin:0 0 .6rem; font-size:.93rem; color:var(--zinc) }
.author strong{ color:var(--ink) }
.au{ display:flex; gap:1.1rem; align-items:flex-start }
.au > div{ min-width:0 }
.au-face{
  flex:none; width:3.2rem; height:3.2rem; display:grid;
  place-items:center; background:var(--dark); color:var(--accent-lift);
  font:600 1.05rem/1 var(--sans); letter-spacing:.05em;
}
.au-name{
  margin:0 0 .4rem !important; font-size:1.05rem; color:var(--ink);
}
.au-name a{ color:var(--ink); text-decoration:none; font-weight:650 }
.au-name a:hover{ color:var(--accent) }
.au-role{
  display:block; font-size:.85rem; font-weight:400; color:var(--zinc);
  margin-top:.15rem;
}
.au-upd{
  display:block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zinc);
}
.au-fix{ margin:1rem 0 0 !important; padding-top:.9rem;
  border-top:1px solid var(--line); font-size:.88rem }

.cta{ margin:3rem 0 0; padding:1.6rem 1.5rem; background:var(--shade); border-top:3px solid var(--accent) }
.cta h2{ margin:0 0 .6rem; font-size:1.3rem }
.cta p:last-child{ margin-bottom:0 }
.cta-mid{
  margin:2.4rem 0; padding:1rem 1.2rem; text-align:center;
  background:var(--shade); border-left:3px solid var(--accent);
}
.cta-mid a{ font-weight:650; text-decoration:none }
.cta-mid a:hover{ text-decoration:underline }

.form{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0 }
.form input{
  flex:1 1 12rem; min-width:0; font:1rem/1.4 var(--sans); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:.7rem .9rem;
}
.btn{
  font:600 .95rem/1 var(--sans); background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); padding:.8rem 1.4rem; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff }

/* ── калькулятор ───────────────────────────────────────────────
   Стоит на месте бывшего блока заявки: тот обещал расчёт и не давал
   под ним ничего. Считает геометрию и комплект — то, что сайт правда
   знает. Цен здесь нет и не будет, пока их неоткуда взять. */
.calc{
  margin:3rem 0 0; padding:1.6rem 1.5rem;
  background:var(--shade); border-top:3px solid var(--accent);
}
.calc h2{ margin:0 0 .6rem; font-size:1.3rem }
.calc > p{ margin:0 0 1.2rem }
.calc-in{
  display:grid; gap:.9rem 1.2rem; margin:0 0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.calc-in label{ display:flex; flex-direction:column; gap:.35rem }
.calc-in span{ font-size:.86rem; color:var(--zinc) }
.calc-in input{
  font:1rem/1.4 var(--sans); color:var(--ink); background:var(--paper);
  border:1px solid var(--line); padding:.6rem .7rem; min-width:0;
}
.calc-in input:focus{ outline:2px solid var(--accent); outline-offset:-1px }

/* Ответ — таблицей «что / сколько / почему». Строка без «почему»
   превращает расчёт в гадание: цифра есть, проверить нечем. */
.calc-out{ margin:0; padding:1.1rem 0 0; border-top:1px solid var(--line) }
.calc-out:empty{ padding:0; border-top:0 }
.calc-out dt{ font-size:.86rem; color:var(--zinc); margin:.9rem 0 .1rem }
.calc-out dt:first-child{ margin-top:0 }
.calc-out dd{ margin:0 }
.calc-out b{ font-size:1.05rem; color:var(--ink) }
.calc-out span{ display:block; font-size:.86rem; color:var(--zinc); margin-top:.1rem }
.calc-note{
  margin:1.4rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--zinc);
}

/* ── подвал ────────────────────────────────────────────────── */
footer{ background:var(--dark); color:#8d99a3; margin-top:4rem }
.foot-in{ max-width:var(--shell); margin:0 auto; padding:2.8rem 1.4rem 3rem; font-size:.9rem }
.foot-cols{
  display:grid; gap:2rem 3rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
}
@media (max-width:44rem){ .foot-cols{ grid-template-columns:1fr } }
.foot-in p{ margin:.35rem 0 }
.foot-in a{ color:#b9c3cb; text-decoration:none }
.foot-in a:hover{ color:var(--accent-lift) }
.fb{ color:#fff; font-weight:700; font-size:1.15rem; margin-bottom:.5rem !important }
.fh{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:#6f7c85; margin:0 0 .8rem;
}
.foot-nav ul{
  margin:0; padding:0; list-style:none;
  columns:2; column-gap:2rem;
}
.foot-nav li{ margin:0 0 .5rem; break-inside:avoid }
.foot-note{
  margin:2.4rem 0 0 !important; padding-top:1.4rem;
  border-top:1px solid #232b31; font-size:.82rem; color:#6f7c85;
}

/* ── плитка меток ──────────────────────────────────────────── */
.tags{ margin:2.4rem 0 0 }
.tags div{ display:flex; flex-wrap:wrap; gap:.5rem }
.tags a{
  font-size:.88rem; color:var(--body); text-decoration:none;
  background:var(--shade); border:1px solid var(--line);
  padding:.4rem .8rem;
}
.tags a:hover{ border-color:var(--accent); color:var(--accent) }

.tag-about{
  font-size:1.08rem; line-height:1.65; color:var(--body);
  max-width:52ch; margin:0 0 2.4rem; padding-left:1.1rem;
  border-left:3px solid var(--accent);
}

/* ── листинг материалов ────────────────────────────────────── */
.lgroup{ margin:0 0 2.6rem }
.lgroup h2{ margin:0 0 1rem; font-size:1.35rem }
.lgroup h2 a{ color:var(--ink); text-decoration:none }
.lgroup h2 a:hover{ color:var(--accent) }
.lgroup ul{ margin:0; padding:0; list-style:none }
.lgroup li{ border-top:1px solid var(--hair) }
.lgroup li a{ display:block; padding:.85rem 0; text-decoration:none }
.lgroup strong{
  display:block; color:var(--ink); font-size:1.05rem;
  font-weight:650; margin-bottom:.2rem;
}
.lgroup li a:hover strong{ color:var(--accent) }
.lgroup span{ display:block; font-size:.9rem; color:var(--zinc); line-height:1.5 }
/* Дата и время чтения под анонсом: служебная строка, поэтому мельче
   и моноширинным — глаз отделяет её от текста анонса не читая. */
.lgroup .anons-m{
  font:.76rem/1.4 var(--mono); color:var(--zinc); opacity:.75;
  margin-top:.3rem; letter-spacing:.02em;
}

/* ── уведомление о cookie ──────────────────────────────────── */
/* ⚠️ hidden ОБЯЗАН перебивать display, иначе кнопка «Понятно»
   выглядит сломанной: скрипт ставит атрибут, а баннер остаётся
   на экране — авторский display:flex сильнее браузерного
   [hidden]{display:none}. Правило идёт первым и с !important,
   чтобы не зависеть от порядка. */
.cookie[hidden]{ display:none !important }
.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:50;
  max-width:38rem; margin-inline:auto;
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  background:var(--dark); color:#c2cbd2;
  border-left:3px solid var(--accent);
  padding:.9rem 1.1rem; font-size:.9rem;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.cookie p{ margin:0; flex:1 1 16rem }
.cookie a{ color:var(--accent-lift) }
.cookie button{
  font:600 .85rem/1 var(--sans); background:transparent; color:#fff;
  border:1px solid #3a444c; padding:.6rem 1.1rem; cursor:pointer;
}
.cookie button:hover{ border-color:var(--accent); color:var(--accent-lift) }

/* ── живые элементы ────────────────────────────────────────── */

/* Полоса прогресса чтения. Тонкая и вверху: на десятиэкранной
   статье человеку негде понять, сколько осталось, а полноценный
   индикатор в таком тексте был бы навязчивым. */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:var(--accent); transition:width .1s linear;
}

/* Кнопка наверх. Появляется только после 900 пикселей прокрутки:
   раньше она просто загораживает текст. */
.totop{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:55;
  width:2.6rem; height:2.6rem; border-radius:50%;
  font:1.1rem/1 var(--sans); cursor:pointer;
  color:#fff; background:var(--dark); border:1px solid #3a444c;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.totop:hover{ border-color:var(--accent); color:var(--accent-lift) }
@media (max-width:62rem){ .totop{ right:.8rem; bottom:.8rem } }

/* Текущий раздел в липком оглавлении. Колонка из списка ссылок
   становится картой: видно, где ты в тексте. */
.s-toc a.here{
  color:var(--ink); font-weight:650;
  box-shadow:inset 3px 0 0 var(--accent); padding-left:.6rem;
}

/* Якорь у заголовка: скинуть ссылку на нужный раздел, а не на всю
   страницу. В покое невидим, чтобы не рябил в тексте. */
.anch{
  margin-left:.4rem; color:var(--accent); text-decoration:none;
  opacity:0; font-weight:400; transition:opacity .15s;
}
h2:hover .anch, h3:hover .anch, h4:hover .anch, .anch:focus{ opacity:.55 }
.anch:hover{ opacity:1 }
/* На тач-экранах наведения нет — показываем сразу, но бледно. */
@media (hover:none){ .anch{ opacity:.35 } }

/* Схема крупнее по клику. Фон плотный, но не чёрный: у схем прозрачный
   холст, и на чистом чёрном тёмная тема сливается с подложкой. */
.zoom{
  position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(16,20,24,.94); cursor:zoom-out;
}
.zoom[hidden]{ display:none }
.zoom img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  background:#fff; border-radius:2px; padding:.8rem;
}
.zoom-x{
  position:absolute; top:.7rem; right:.9rem;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  font:1.4rem/1 var(--sans); color:#fff;
  background:transparent; border:1px solid #4a545c;
}
.zoom-x:hover{ border-color:var(--accent); color:var(--accent-lift) }
/* Подсказка, что схему можно открыть: рамка проявляется по наведению. */
main.layout figure img{ transition:box-shadow .15s }
main.layout figure img:hover,
main.layout figure img:focus-visible{
  box-shadow:0 0 0 2px var(--accent);
}
@media (prefers-color-scheme:dark){ .zoom img{ background:#131a1f } }

/* ── доступность ───────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }
@media (max-width:34rem){
  .hero{ padding:3rem 1.2rem 2.6rem }
  h2{ margin-top:2.6rem }
}

/* фотографии в тексте статьи (foto_v_tekste в build.py) */
.art-foto.in-text{ margin:1.75rem 0 2rem }
.art-foto.in-text img{ border-radius:.35rem }
.art-foto.in-text figcaption{ margin-top:.5rem; font-size:.85rem; line-height:1.4; opacity:.75 }