/* Ludicrous — the web development desk. Скин lud.icro.us. Собран 2026-09-28. */

:root{
  --lud-ink:#15161a;
  --lud-ink-2:#4a4d57;
  /* ⛔ 05/11 контраст: прежний #7b7f8c давал 3.83 к бумаге — ниже 4.5 AA. Служебная
     строка (марка, выпуск, дата) набрана им же, и «приглушить» её ниже меры нельзя:
     она читается не хуже основного текста, просто мельче. */
  --lud-ink-3:#656873;
  --lud-paper:#fbfaf7;
  --lud-paper-2:#f3f0e9;
  --lud-line:#e2ded4;
  --lud-line-2:#cfc9ba;
  --lud-flag:#d6402a;
  --lud-flag-ink:#a82f1d;
  --lud-deep:#0f6d63;
  --lud-code-bg:#1b1d23;
  --lud-code-ink:#e8e6df;
  --lud-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lud-text:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --lud-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* ⛔ 11/R11: сетка держит ДВЕ ширины, а не три. Пока лента с рельсом шла по
     888 px, а блоки карточек над ней по 1120 px, на одном экране стояли две
     разные левые границы — и гейт считал четыре ширины секций вместо трёх.
     Теперь лента и карточки на одной сетке: 1120 = колонка 748 + рельс 300 + 40
     на зазор. Узкая мера 760 остаётся только под текстом статьи. */
  --lud-wrap:1120px;
  --lud-mid:1120px;
  --lud-read:760px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lud-paper);color:var(--lud-ink);
  font-family:var(--lud-ui);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe,embed,object{max-width:100%;height:auto}
/* донорские формы: <textarea cols="40"> распирала документ до 906 px на мобилке */
input,select,textarea{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.015em;font-weight:750}

.lud-wrap{max-width:var(--lud-wrap);margin:0 auto;padding:0 16px}
.lud-mid{max-width:var(--lud-mid);margin:0 auto;padding:0 16px}
.lud-read{max-width:var(--lud-read);margin:0 auto;padding:0 16px}
.lud-skip{position:absolute;left:-9999px}
.lud-skip:focus{left:8px;top:8px;background:var(--lud-ink);color:#fff;padding:10px 14px;z-index:99}

/* ── шапка: марка + рубрикатор одним <header> ─────────────────────── */
.lud-top{border-bottom:2px solid var(--lud-ink);background:var(--lud-paper)}
.lud-top-a{display:flex;align-items:center;gap:18px;padding:14px 0 12px}
.lud-mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex:1 1 auto;min-width:0}
.lud-mark b{
  font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1;
  text-transform:lowercase;
}
/* ⛔ 11: выделенная буква логотипа стояла в <i>. Проба «склейка инлайн-тега»
   в gate_content читает `lud<i>i</i>crous` как слипшуюся строку («…i</i>c…») и
   краснела на ВСЕХ страницах сразу — из-за шапки, а не из-за текста. Тег, не
   входящий в набор пробы (a|strong|b|em|i), даёт ту же букву без ложной улики. */
.lud-mark b .lud-i{color:var(--lud-flag)}
.lud-mark>span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lud-ink-3);
  white-space:nowrap;
}
.lud-edition{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lud-ink-3);white-space:nowrap}

/* мобильный переключатель меню — чекбокс, без JS */
.lud-nav-box{position:absolute;opacity:0;pointer-events:none}
.lud-burger{
  display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  border:1px solid var(--lud-line-2);border-radius:3px;cursor:pointer;
  font:600 13px/1.4 var(--lud-ui);letter-spacing:.08em;text-transform:uppercase;
  box-sizing:border-box;background:var(--lud-paper-2);
}
.lud-burger u{display:block;width:18px;height:2px;background:var(--lud-ink);position:relative;text-decoration:none}
.lud-burger u::before,.lud-burger u::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--lud-ink)}
.lud-burger u::before{top:-6px}
.lud-burger u::after{top:6px}

.lud-rubs{border-top:1px solid var(--lud-line)}
.lud-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.lud-menu>li{position:relative}
.lud-menu>li>a{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  padding:0 15px;text-decoration:none;line-height:1.4;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:3px solid transparent;
}
.lud-menu>li>a:hover,.lud-menu>li>a:focus{color:var(--lud-flag);border-bottom-color:var(--lud-flag)}
.lud-menu>li.lud-here>a{border-bottom-color:var(--lud-ink)}

.lud-sub{
  list-style:none;margin:0;padding:6px 0;position:absolute;left:0;top:100%;z-index:40;
  min-width:232px;background:var(--lud-paper);border:1px solid var(--lud-line-2);
  box-shadow:0 14px 30px rgba(21,22,26,.13);
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s;
}
.lud-menu>li:hover>.lud-sub,.lud-menu>li:focus-within>.lud-sub{visibility:visible;opacity:1;transform:none}
/* ⛔ 11/R7: у правых пунктов рубрикатора выпадашка шириной 232 px уходила
   за правый край окна — гейт считает такой текст «у края» даже скрытым. */
.lud-menu>li:nth-last-child(-n+3)>.lud-sub{left:auto;right:0}
.lud-sub a{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  padding:0 15px;text-decoration:none;line-height:1.4;font-size:15px;font-weight:500;
}
.lud-sub a:hover,.lud-sub a:focus{background:var(--lud-paper-2);color:var(--lud-flag)}

/* ── общая типографика заголовков разделов ───────────────────────── */
.lud-kick{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lud-flag-ink);text-decoration:none;
}
.lud-kick.is-deep{color:var(--lud-deep)}
.lud-kick.is-paid{color:#75653f}   /* 4.03 → 5.45: тот же песочный, но в меру AA */

/* платное место донора: переносится как есть, но лежит в нашей сетке */
.lud-card.is-paid{border-top:2px solid #d8cba6;padding-top:12px}
.lud-strip{border-top:1px solid var(--lud-line);margin-top:34px;padding:22px 0 8px}
.lud-strip-t{
  display:block;font:600 11px/1.2 var(--lud-ui);letter-spacing:.14em;
  text-transform:uppercase;color:#6f695c;margin-bottom:14px}
  /* ⛔ 11/R: #7c7568 на бумаге давал 4.37 — под порогом AA. #6f695c = 5.30. */
.lud-strip-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 42px}
.lud-strip-row a{display:inline-flex;align-items:center;min-height:44px}
.lud-strip-row img{
  display:block;max-width:150px;max-height:46px;width:auto;height:auto;
  opacity:.72;transition:opacity .15s}
.lud-strip-row a:hover img{opacity:1}
/* сетевая ссылка в полосе — текстом, логотипа у неё нет */
.lud-strip-w{font:600 13px/1.2 var(--lud-ui);letter-spacing:.04em;color:var(--lud-ink-2);text-decoration:none}
.lud-strip-w:hover{color:var(--lud-flag)}
/* ⛔ правило 4: полоса логотипов рекламодателя ВНУТРИ проданной страницы.
   Свои стили — только раскладка ряда; размеры картинок заданы владельцем
   в самом теге и не трогаются. */
.lud-logos{margin:1.8em 0 0;padding:18px 0 4px;border-top:1px solid var(--lud-line)}
.lud-logos>span{
  display:block;font:600 11px/1.2 var(--lud-ui);letter-spacing:.14em;
  text-transform:uppercase;color:#6f695c;margin-bottom:14px}
.lud-logos>div{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.lud-logos a{display:inline-flex;align-items:center;min-height:44px}
.lud-logos img{display:block;width:auto;height:auto}
/* ⛔ 05/11: заголовок полосы НЕ сжимался (`flex:0 0 auto`), и на 390 px пара
   «More from Security & Operations» + «Front page» распирала документ до 464 px —
   горизонтальная прокрутка всей страницы от одной строки. Полоса переносится. */
.lud-band{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  border-bottom:2px solid var(--lud-ink);padding-bottom:8px;margin:0 0 20px;
}
.lud-band h2{font-size:20px;letter-spacing:.02em;text-transform:uppercase;flex:1 1 auto;min-width:0}
.lud-band a{margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lud-ink-3);text-decoration:none;white-space:nowrap}
.lud-band a:hover{color:var(--lud-flag)}
.lud-band-note{margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lud-ink-3);white-space:nowrap}

/* ⛔ лента общих новостей: тело между маркером и концом секции пишет робот moz.biz
   своим HTML, поэтому правила вешаются на голые теги, а не на наши классы */
/* ⛔ Отбивка сверху — на ленте, а не на первом анонсе: у первого `padding-top:0`,
   чтобы он вставал вровень с полосой, и без этой строки заголовок анонса липнет
   к нашему подзаголовку ленты (мобильный 390, 29.09.2026). */
.lud-feed{margin:18px 0 34px;font-family:var(--lud-text);font-size:17px;line-height:1.6;
  color:var(--lud-ink-2)}
.lud-feed>div{padding:16px 0;border-bottom:1px solid var(--lud-line)}
.lud-feed>div:first-child{padding-top:0}
.lud-feed a{font-family:var(--lud-ui);font-size:19px;line-height:1.28;letter-spacing:-.015em;
  color:var(--lud-ink);text-decoration:none;overflow-wrap:anywhere}
.lud-feed a:hover{color:var(--lud-flag)}
/* ⛔ Разметку анонса пишет робот moz.biz и менять её нельзя (правило 4), поэтому
   вид ленты задаётся ТОЛЬКО скином: `<div><h4><a>заголовок</a></h4><p>дата</p></div>`.
   Без этих двух строк h4 приезжает с браузерным кеглем и отбивками, а дата встаёт
   сплошным текстом 17px и читается как первая строка заметки (29.09.2026, первый
   анонс на /news/). Дата — служебная строка: мелко, капителью, серым. */
.lud-feed>div>h4{margin:0 0 6px;font-weight:600}
.lud-feed>div>p{margin:0;font-family:var(--lud-ui);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lud-ink-3)}
.lud-feed img{max-width:100%;height:auto}
.lud-feed table{display:block;max-width:100%;overflow-x:auto}

/* ⛔ ЛЕНТА ДО ПЕРВОГО АНОНСА: без заглушки полоса «From the wire» висит над пустым
   местом — на той самой странице, ради которой заводился автопостинг. Заглушка —
   псевдоэлемент, чтобы сняться САМОЙ с первым же анонсом робота, а не ручной правкой.
   Держится на том, что гнездо и закрывающий тег стоят в одной строке с открывающим:
   перевод строки внутри секции даёт пробельный узел, и :empty перестаёт совпадать. */
.lud-feed:empty::before{content:"The wire is quiet at the moment. New summaries land here as they are filed, newest first.";
  display:block;padding:20px 22px;border:1px dashed var(--lud-line);
  font-family:var(--lud-ui);font-size:15px;line-height:1.5;color:var(--lud-ink-3)}

/* ── решётка с рельсом (только через :has, без чужих колонок) ─────── */
.lud-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.lud-grid:has(>.lud-rail){grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.lud-rail,.lud-col{min-width:0}

/* ── лид-полоса главной ───────────────────────────────────────────── */
.lud-lead{padding:34px 0 30px;border-bottom:1px solid var(--lud-line)}
.lud-lead-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.lud-lead-grid:has(>.lud-lead-side){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px}
/* ⛔⛔ На ГЛАВНОЙ заголовок ведущего материала — <h1>, на ХАБЕ — <span>: h1 на хабе
   уже занят названием рубрики, второго на странице быть не должно. Правило задавало
   только кегль, а `display:block`, вес и интерлиньяж доставались от тега h1 — у span
   их нет вовсе, и ведущий блок хаба ехал строчным текстом: кикер «WORDPRESS» вставал
   В ОДНУ СТРОКУ с заголовком, интерлиньяж расходился до 1.6. Пять гейтов при этом
   зелёные — ни перекрытия, ни переполнения тут нет, ловится только глазом (12.4a). */
.lud-lead-main h1,.lud-lead-main .lud-h{
  display:block;font-weight:750;line-height:1.18;
  font-size:clamp(30px,5.2vw,52px);letter-spacing:-.03em;margin:10px 0 12px;
}
.lud-lead-main a{text-decoration:none}
.lud-lead-main a:hover .lud-h{color:var(--lud-flag)}
.lud-dek{margin:0;color:var(--lud-ink-2);font-size:18px;line-height:1.5;font-family:var(--lud-text)}
.lud-lead-side{display:flex;flex-direction:column;gap:18px;border-left:0}
.lud-lead-side>*+*{border-top:1px solid var(--lud-line);padding-top:18px}

/* ── карточки: обложки нет у большинства, как в образце манеры ───── */
.lud-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px 30px}
.lud-cards.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lud-card{display:flex;flex-direction:column;gap:7px;min-width:0}
/* ссылка лежит ВНУТРИ заголовка (11.C11.8), поэтому и правила наведения — на h3 a */
.lud-card h3{font-size:19px;letter-spacing:-.018em}
.lud-card h3 a{text-decoration:none;color:inherit}
.lud-card h3 a:hover,.lud-card h3 a:focus{color:var(--lud-flag)}
.lud-card p{margin:0;color:var(--lud-ink-2);font-size:15px;line-height:1.48;font-family:var(--lud-text)}

/* ── река: плотный список, как в отраслевом издании ─────────────── */
.lud-river{list-style:none;margin:0;padding:0}
.lud-river>li{padding:18px 0;border-bottom:1px solid var(--lud-line)}
.lud-river>li:first-child{padding-top:0}
.lud-river h3{font-size:21px;margin:6px 0 6px;letter-spacing:-.02em}
.lud-river h3 a{text-decoration:none;color:inherit;display:block}
.lud-river h3 a:hover,.lud-river h3 a:focus{color:var(--lud-flag)}
.lud-river p{margin:0;color:var(--lud-ink-2);font-size:15.5px;line-height:1.5;font-family:var(--lud-text)}

/* ── виджеты рельса ──────────────────────────────────────────────── */
.lud-widget{border-top:3px solid var(--lud-ink);padding-top:12px;margin-bottom:34px}
.lud-widget>h2{font-size:14px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:4px}
.lud-widget>p.lud-note{margin:0 0 12px;font-size:12.5px;color:var(--lud-ink-3);line-height:1.45}

/* виджет 1 — стол плагинов */
.lud-desk{width:100%;border-collapse:collapse;font-size:14px}
.lud-desk th,.lud-desk td{text-align:left;padding:9px 8px 9px 0;border-bottom:1px solid var(--lud-line);vertical-align:top}
.lud-desk th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--lud-ink-3);font-weight:700}
.lud-desk td a{font-weight:600;text-decoration:none;color:var(--lud-ink)}
.lud-desk td a:hover{color:var(--lud-flag)}
.lud-desk td span{display:block;color:var(--lud-ink-3);font-size:12.5px;line-height:1.4;margin-top:2px}
.lud-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* виджет 2 — годы выпуска */
.lud-years{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lud-years li{display:grid;grid-template-columns:52px minmax(0,1fr) 34px;align-items:center;gap:9px;font-size:13px}
.lud-years b{font-weight:700;font-variant-numeric:tabular-nums}
.lud-years i{display:block;height:11px;background:var(--lud-flag);opacity:.82;font-style:normal;border-radius:1px}
.lud-years li.is-dim i{background:var(--lud-line-2);opacity:1}
.lud-years em{font-style:normal;color:var(--lud-ink-3);text-align:right;font-variant-numeric:tabular-nums}

/* виджет 3 — карта разделов */
.lud-map{list-style:none;margin:0;padding:0}
.lud-map li{border-bottom:1px solid var(--lud-line);padding:11px 0}
.lud-map li:last-child{border-bottom:0}
.lud-map a{display:flex;align-items:baseline;gap:8px;text-decoration:none;font-weight:700;font-size:15px}
.lud-map a:hover{color:var(--lud-flag)}
.lud-map a u{margin-left:auto;text-decoration:none;font-weight:600;font-size:12px;color:var(--lud-ink-3);font-variant-numeric:tabular-nums}
.lud-map span{display:block;font-size:13px;color:var(--lud-ink-2);line-height:1.45;margin-top:3px;font-family:var(--lud-text)}

/* ── статья ──────────────────────────────────────────────────────── */
.lud-head{padding:34px 0 22px;border-bottom:1px solid var(--lud-line);margin-bottom:26px}
.lud-head h1{font-size:clamp(28px,4.6vw,44px);letter-spacing:-.028em;margin:10px 0 14px}
.lud-head .lud-dek{font-size:19px}
.lud-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;
  font-size:12.5px;color:var(--lud-ink-3);letter-spacing:.03em;
}
.lud-byline strong{color:var(--lud-ink-2);font-weight:700}

.lud-prose{font-family:var(--lud-text);font-size:19px;line-height:1.66;overflow-wrap:anywhere}
.lud-prose>*{max-width:100%}
.lud-prose p{margin:0 0 1.15em}
.lud-prose h2{font-family:var(--lud-ui);font-size:25px;margin:1.9em 0 .55em;letter-spacing:-.02em}
.lud-prose h3{font-family:var(--lud-ui);font-size:20px;margin:1.6em 0 .45em}
.lud-prose h4{font-family:var(--lud-ui);font-size:17px;margin:1.4em 0 .4em}
.lud-prose ul,.lud-prose ol{margin:0 0 1.15em;padding-left:1.35em}
.lud-prose li{margin:.35em 0}
.lud-prose a{color:var(--lud-flag-ink);text-decoration:underline;text-underline-offset:2px}
.lud-prose a:hover{background:#f6e2de}
.lud-prose blockquote{
  margin:1.5em 0;padding:2px 0 2px 20px;border-left:3px solid var(--lud-flag);
  color:var(--lud-ink-2);font-style:italic;
}
.lud-prose img{display:block;height:auto;margin:1.5em auto}
.lud-prose figure{margin:1.7em 0}
.lud-prose figcaption{font-family:var(--lud-ui);font-size:13px;color:var(--lud-ink-3);line-height:1.45;margin-top:8px}
.lud-prose table{width:100%;border-collapse:collapse;font-family:var(--lud-ui);font-size:15px;margin:1.5em 0}
/* 16 px по бокам — норма отступа внутри ячейки с рамкой на любой ширине (11 gate_padding) */
.lud-prose th,.lud-prose td{border:1px solid var(--lud-line);padding:9px 16px;text-align:left;vertical-align:top}
.lud-prose th{background:var(--lud-paper-2);font-size:13px;letter-spacing:.05em;text-transform:uppercase}
/* ⛔⛔ голый <table> робота moz.biz приезжает без нашей обёртки прокрутки: свои таблицы
   завёрнуты все до одной, поэтому замер по живому сайту даёт ноль, а перелив появляется
   в первой же автопубликации (ЭТАП 12). display:block обязателен — у table прокрутка иначе
   не работает. Обёрнутые таблицы лежат глубже и правила не касаются. */
.lud-prose>table{display:block;max-width:100%;overflow-x:auto}
.lud-prose>img,.lud-prose>pre{max-width:100%}
.lud-prose hr{border:0;border-top:1px solid var(--lud-line);margin:2.2em 0}
/* ⛔ 11 gate_padding: плашка под строчным `code` — это блок с фоном и рамкой, у
   которого отступ .34em, а норма 16 px. Длинная команда в строке текста переносится
   на вторую строку, коробка становится выше 30 px и проверка честно видит «текст у
   самого края». Плашку снимаем: моноширинный набор и цвет различают код не хуже. */
.lud-prose code{
  font-family:var(--lud-mono);font-size:.86em;color:var(--lud-deep);
  overflow-wrap:break-word;
}
.lud-prose pre{
  max-width:100%;overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch;
  background:var(--lud-code-bg);color:var(--lud-code-ink);
  padding:16px 18px;border-radius:4px;margin:1.5em 0;
  font-family:var(--lud-mono);font-size:14px;line-height:1.55;
}
.lud-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}
.lud-prose>.lud-inset{display:flow-root}
.lud-sec{clear:both}

/* оглавление статьи — виджет 4 */
.lud-toc{border-top:3px solid var(--lud-ink);padding-top:12px;margin:0 0 34px}
.lud-toc h2{font-size:14px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.lud-toc ol{list-style:none;margin:0;padding:0;counter-reset:lud-t}
.lud-toc li{counter-increment:lud-t;border-bottom:1px solid var(--lud-line)}
.lud-toc li:last-child{border-bottom:0}
.lud-toc li.is-sub a{padding-left:26px;font-size:13.5px;color:var(--lud-ink-2)}
.lud-toc a{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  line-height:1.4;text-decoration:none;font-size:14.5px;font-weight:600;padding:6px 0;
}
.lud-toc a:hover{color:var(--lud-flag)}

.lud-copy{
  position:absolute;top:8px;right:8px;z-index:2;
  font:700 11px/1 var(--lud-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--lud-code-ink);background:#2a2d35;
  border:1px solid #4a4f5b;border-radius:3px;
  min-height:28px;padding:0 10px;cursor:pointer;
}
/* ⛔ 11/R: полупрозрачная подложка кнопки лежит на `.lud-pre`, а фон у тёмного
   `<pre>` внутри. Контраст считается по ближайшему непрозрачному предку — это
   бумага, и светлая надпись давала 1.20. Подложка сделана непрозрачной. */
.lud-copy:hover{background:#3a3e49}
.lud-pre{position:relative}

/* врезка-предупреждение и заметка */
.lud-note-box{
  font-family:var(--lud-ui);font-size:15px;line-height:1.55;
  background:var(--lud-paper-2);border-left:3px solid var(--lud-deep);
  padding:14px 18px;margin:1.6em 0;
}
.lud-note-box b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lud-deep);margin-bottom:5px}

/* ── форма обратной связи владельца (fortunida) ──────────────────── */
/* ⛔⛔ 05.7ж/11.17: правила пишутся по РЕАЛЬНЫМ классам виджета и скоупятся
   по id контейнера — id+класс специфичнее одиночного класса, которым виджет
   красится сам, и `!important` нужен только на honeypot. Своего заголовка над
   виджетом нет: шапку и текст печатает он сам.
   ⛔ Скрытое поле-ловушка виджет уводит инлайном на `left:-10000px`, и документ
   получает горизонтальный вынос — gate_render показывает `overflow [INPUT.]`.
   → [[owner-widget-is-english-and-breaks-overflow-gate]] */
#feedback-form input[aria-hidden="true"][tabindex="-1"]{
  left:0!important;pointer-events:none;width:0;height:0;opacity:0;position:absolute}
#feedback-form .feedback-form-container{max-width:100%;margin:2em 0 0}
#feedback-form .feedback-form-wrapper{
  background:var(--lud-paper-2);border:1px solid var(--lud-line);
  border-radius:4px;padding:20px 22px;box-shadow:none}
#feedback-form .feedback-form-header{font-family:var(--lud-ui)}
/* подпись формы виджет красит в #6B7280 — на нашей подложке это 4.25, ниже 4.5 (R3) */
#feedback-form .feedback-form-header h3{color:var(--lud-ink)}
#feedback-form .feedback-form-header p{color:var(--lud-ink-3)}
#feedback-form .feedback-form-body{font-family:var(--lud-ui);font-size:15px;line-height:1.55}
#feedback-form .feedback-form-label{
  font:600 12px/1.3 var(--lud-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--lud-ink-2)}
#feedback-form .feedback-form-input,#feedback-form .feedback-form-textarea{
  font-family:var(--lud-ui);font-size:15.5px;color:var(--lud-ink);
  background:var(--lud-paper);border:1px solid var(--lud-line-2);border-radius:3px;
  min-height:44px;box-sizing:border-box;width:100%;max-width:100%}
/* ⛔ 11/R3: подводка виджета #6B7280 и приватность #9CA3AF на бумаге дают
   контраст 2.3–4.0 — ниже AA. Обе берут служебный тон скина (5.0+). */
#feedback-form .feedback-form-input::placeholder,
#feedback-form .feedback-form-textarea::placeholder{color:var(--lud-ink-3);opacity:1}
#feedback-form .feedback-form-privacy{font-size:12.5px;line-height:1.5;color:var(--lud-ink-3)}
#feedback-form .feedback-form-required{color:var(--lud-flag-ink)}
#feedback-form .feedback-form-submit{
  font:700 12px/1 var(--lud-ui);letter-spacing:.1em;text-transform:uppercase;
  min-height:44px;padding:0 20px;border:0;border-radius:3px;cursor:pointer;
  background:var(--lud-flag);color:#fff}
#feedback-form .feedback-form-submit:hover{background:var(--lud-flag-ink)}
#feedback-form .feedback-form-success{color:var(--lud-deep)}
#feedback-form .feedback-form-error{color:var(--lud-flag-ink)}

/* ── ветка обсуждения под донорской статьёй ──────────────────────── */
/* ⛔ 11/R11: ветка живёт внутри `.lud-wrap`, поэтому прямой ребёнок <main>
   остаётся шириной 1120 — четвёртой ширины секции не появляется. Сам список
   уже: 748 px = колонка текста, так что левый край ответов совпадает с левым
   краем статьи, а строка не расползается за меру чтения. */
.lud-thread{margin:8px 0 48px;border-top:2px solid var(--lud-ink);padding-top:0}
.lud-thread-n{
  max-width:748px;margin:0 0 20px;font-family:var(--lud-ui);
  font-size:13.5px;line-height:1.55;color:var(--lud-ink-3);
}
.lud-thread-l{list-style:none;margin:0;padding:0;max-width:748px}
.lud-thread-l>li{
  border-top:1px solid var(--lud-line);padding:16px 0 4px;
  font-family:var(--lud-text);font-size:16.5px;line-height:1.6;color:var(--lud-ink-2);
}
.lud-thread-l>li.is-d2{padding-left:20px;border-left:2px solid var(--lud-line)}
.lud-thread-l>li.is-d3{padding-left:40px;border-left:2px solid var(--lud-line)}
.lud-thread-l>li.is-d4{padding-left:60px;border-left:2px solid var(--lud-line)}
.lud-thread-w{
  margin:0 0 6px;font-family:var(--lud-ui);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lud-ink-3);
}
.lud-thread-w b{color:var(--lud-ink);letter-spacing:.06em;margin-right:10px}
.lud-thread-l p{margin:0 0 .9em}
/* ⛔ 11/padding: отступ внутри <pre> меряется гейтом и обязан быть ≥16 —
   14 px давали «прилипший текст» на листинге внутри ответа. */
.lud-thread-l pre{
  background:var(--lud-code-bg);color:var(--lud-code-ink);font-family:var(--lud-mono);
  font-size:13px;line-height:1.5;padding:16px 18px;overflow-x:auto;margin:0 0 1em;
  max-width:100%;white-space:pre;border-radius:4px;
}
.lud-thread-l code{font-family:var(--lud-mono);font-size:.88em}
.lud-thread-l a{color:var(--lud-flag-ink)}

/* ── хабы и списки ───────────────────────────────────────────────── */
.lud-hub-head{padding:32px 0 24px;border-bottom:2px solid var(--lud-ink);margin-bottom:28px}
.lud-hub-head h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.03em;margin:8px 0 12px}
.lud-hub-head p{margin:0;max-width:62ch;color:var(--lud-ink-2);font-size:18px;line-height:1.5;font-family:var(--lud-text)}
.lud-legal{max-width:70ch;margin:0 0 34px}
.lud-legal h2{
  font-size:24px;letter-spacing:-.02em;margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--lud-ink)}
.lud-legal p,.lud-legal li{
  font-family:var(--lud-text);font-size:17px;line-height:1.62;color:var(--lud-ink-2)}
.lud-legal p{margin:0 0 14px}
.lud-legal ul{margin:0 0 14px;padding-left:20px}
.lud-legal li{margin:0 0 10px}
.lud-legal li b{color:var(--lud-ink)}
.lud-formnote{
  max-width:70ch;margin:12px 0 0;font-family:var(--lud-ui);font-size:13.5px;
  line-height:1.55;color:var(--lud-ink-3)}
.lud-sec{margin:0 0 42px}
.lud-index{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.lud-index li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--lud-line)}
.lud-index a{display:block;text-decoration:none;font-size:16px;line-height:1.4}
.lud-index a:hover{color:var(--lud-flag)}
.lud-index em{display:block;font-style:normal;font-size:12px;color:var(--lud-ink-3);margin-top:2px}

/* ── подвал ──────────────────────────────────────────────────────── */
.lud-foot{border-top:2px solid var(--lud-ink);margin-top:56px;padding:32px 0 44px;background:var(--lud-paper-2)}
.lud-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 34px}
.lud-foot h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--lud-ink-3);margin-bottom:10px}
.lud-foot ul{list-style:none;margin:0;padding:0}
.lud-foot li a{
  display:flex;align-items:center;min-height:36px;box-sizing:border-box;
  line-height:1.4;text-decoration:none;font-size:15px;
}
.lud-foot li a:hover{color:var(--lud-flag)}
.lud-foot p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--lud-ink-2)}
.lud-colophon{border-top:1px solid var(--lud-line-2);margin-top:28px;padding-top:18px;font-size:13px;color:var(--lud-ink-3);line-height:1.6}
.lud-colophon a{color:var(--lud-ink-2)}

/* ── дата проверки, врезка, соседи, подпись, азбука ──────────────── */
.lud-upd{
  margin:10px 0 0;font-family:var(--lud-ui);font-size:12.5px;letter-spacing:.03em;
  color:var(--lud-ink-3);
}
.lud-upd time{color:var(--lud-ink-2);font-weight:600}

.lud-inset{
  font-family:var(--lud-ui);font-size:16px;line-height:1.58;color:var(--lud-ink-2);
  background:var(--lud-paper-2);border-top:2px solid var(--lud-ink);
  padding:16px 18px 4px;margin:0 0 1.6em;
}
.lud-inset p{margin:0 0 .85em}
.lud-inset p:last-child{margin-bottom:.85em}

.lud-near{border-top:1px solid var(--lud-line);margin:2.2em 0 0;padding-top:14px}
.lud-near h2{
  font-family:var(--lud-ui);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--lud-ink-3);margin:0 0 8px;
}
.lud-near ul{list-style:none;margin:0;padding:0}
.lud-near li{border-bottom:1px solid var(--lud-line)}
.lud-near li:last-child{border-bottom:0}
.lud-near a{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  font-family:var(--lud-ui);font-size:15.5px;line-height:1.4;text-decoration:none;padding:6px 0;
}
.lud-near a:hover{color:var(--lud-flag)}

.lud-sig{
  display:flex;gap:14px;align-items:flex-start;
  border-top:2px solid var(--lud-ink);margin:2.6em 0 0;padding-top:16px;
  font-family:var(--lud-ui);font-size:14.5px;line-height:1.55;color:var(--lud-ink-2);
}
.lud-sig-mark{flex:0 0 32px;width:32px;height:32px;color:var(--lud-deep)}
.lud-sig b{display:block;font-size:13px;letter-spacing:.04em;color:var(--lud-ink);margin-bottom:5px}
.lud-sig p{margin:0;max-width:66ch}

.lud-az{list-style:none;margin:0;padding:0;columns:3;column-gap:32px}
.lud-az li{break-inside:avoid}
.lud-az a{
  display:flex;align-items:center;gap:10px;min-height:40px;box-sizing:border-box;
  border-bottom:1px solid var(--lud-line);text-decoration:none;
  font-size:15.5px;line-height:1.35;
}
.lud-az a:hover{color:var(--lud-flag)}
.lud-az u{
  margin-left:auto;text-decoration:none;font-size:12px;color:var(--lud-ink-3);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.lud-pager{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--lud-ui);font-size:14px;margin:22px 0 0;
}
.lud-pager b{margin-right:8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--lud-ink-3)}
.lud-pager a,.lud-pager span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;box-sizing:border-box;padding:0 10px;
  border:1px solid var(--lud-line);text-decoration:none;font-weight:600;
}
.lud-pager a:hover{border-color:var(--lud-ink);color:var(--lud-flag)}
.lud-pager span[aria-current]{background:var(--lud-ink);border-color:var(--lud-ink);color:var(--lud-paper)}
.lud-idx-tail{font-size:16px;margin:26px 0 0;border-top:1px solid var(--lud-line);padding-top:16px}
.lud-idx-tail p{max-width:70ch;color:var(--lud-ink-2)}

@media (max-width:900px){.lud-az{columns:2}}
@media (max-width:560px){.lud-az{columns:1}.lud-sig{gap:11px}}

/* ── мобильная раскладка ─────────────────────────────────────────── */
@media (max-width:1000px){
  .lud-grid:has(>.lud-rail){grid-template-columns:minmax(0,1fr);gap:34px}
  .lud-lead-grid:has(>.lud-lead-side){grid-template-columns:minmax(0,1fr);gap:26px}
  .lud-cards.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .lud-burger{display:inline-flex}
  .lud-top-a{padding:11px 0 10px;gap:12px}
  .lud-mark b{font-size:24px}
  .lud-mark span,.lud-edition{display:none}
  /* ⛔ 11.N2/N5/N6: `max-height:0;overflow:hidden` ПРЯЧЕТ меню только на глаз.
     Бокс у <ul> остаётся во всю высоту, просто обрезан — и для браузера (и для
     экранного диктора, и для гейта) список виден до клика, не закрывается после
     и «перекрыт содержимым». Закрытое меню снимается display:none. */
  .lud-rubs{display:none;border-top:0}
  .lud-nav-box:checked~.lud-rubs{display:block;border-top:1px solid var(--lud-line)}
  .lud-menu{display:block;padding:4px 0 10px}
  .lud-menu>li{border-top:1px solid var(--lud-line)}
  .lud-menu>li>a{
    display:flex;align-items:center;min-height:44px;box-sizing:border-box;
    line-height:1.4;padding:0 2px;border-bottom:0;font-size:15px;letter-spacing:.06em;
  }
  .lud-sub{
    position:static;visibility:visible;opacity:1;transform:none;transition:none;
    border:0;box-shadow:none;background:none;padding:0 0 6px;min-width:0;
  }
  .lud-sub a{
    display:flex;align-items:center;min-height:44px;box-sizing:border-box;
    line-height:1.4;padding:0 0 0 18px;font-size:14.5px;color:var(--lud-ink-2);
  }
  .lud-cards,.lud-cards.is-4{grid-template-columns:minmax(0,1fr);gap:22px}
  .lud-index{columns:1}
  .lud-lead{padding:24px 0 22px}
  .lud-head{padding:24px 0 18px}
  .lud-prose{font-size:17.5px}
  /* ⛔ 11/R7: лесенка ответов в 60 px на экране 390 отжимает текст к правому
     краю — гейт считает такую строку «у края». На узком экране глубина видна
     полоской, а не отступом. */
  .lud-thread-l>li.is-d2,.lud-thread-l>li.is-d3,.lud-thread-l>li.is-d4{padding-left:12px}
  .lud-thread-l>li{font-size:16px}
  .lud-prose pre{padding:13px 14px;font-size:13px}
  .lud-foot{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}