/* Единый стиль статей montazh-dverey.ru.
   Один скин на все материалы. Уникальность — в контенте и семантике, не в раскраске.
   Компоненты: masthead, kicker, h1/lead, tldr, figure, h2/h3, table(.tscroll),
   details.qa (FAQ), .note/.note.warn, blockquote.field, ol.steps, .signal, форма .ask, footer. */

:root{
  --ink:#1c1a17;      /* основной текст */
  --dim:#726a5f;      /* приглушённый */
  --rule:#e0dccf;     /* линии */
  --acc:#2f5d8a;      /* единственный акцент, стально-синий */
  --acc-d:#234868;
  --paper:#f7f5ef;    /* тёплая бумага */
  --card:#fffef9;
  --g:#3f7d4e; --y:#b07d1a; --r:#a23c30; /* светофор, семантические */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);
  font:400 18px/1.72 Georgia,"PT Serif","Times New Roman",serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none;border-bottom:1px solid #b9cfe0}
a:hover{border-bottom-color:var(--acc)}
strong{font-weight:700}

.mast{max-width:760px;margin:0 auto;padding:14px 22px;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;
  font:600 12.5px/1 "PT Sans","Segoe UI",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.mast .r{color:var(--dim);font-weight:400}

main.sheet{max-width:760px;margin:0 auto;padding:0 22px 88px}
.kick{margin:28px 0 12px;font:600 12px/1 "PT Sans","Segoe UI",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.kick b{color:var(--acc);font-weight:600}

h1{font:700 clamp(29px,5.2vw,42px)/1.16 Georgia,serif;letter-spacing:-.015em;margin:0 0 20px;max-width:18ch}
.lead{font-size:21px;line-height:1.58;color:#2c2620;margin:0 0 26px}
p{margin:0 0 17px}

/* Быстрый ответ для ИИ */
.tldr{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--acc);
  padding:16px 20px;margin:0 0 30px;border-radius:2px}
.tldr .lbl{font:600 11px/1 "PT Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:8px}
.tldr p{margin:0 0 10px;font-size:17.5px;line-height:1.62}
.tldr p:last-child{margin:0}
.tldr .go{font-style:italic;color:var(--dim)}
.tldr .go a{border:0;color:var(--acc)}

figure{margin:30px 0}
figure img{width:100%;display:block;border:1px solid var(--rule);border-radius:2px}
figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--dim)}

h2{font:700 24px/1.26 Georgia,serif;letter-spacing:-.01em;margin:44px 0 13px;
  padding-top:22px;border-top:1px solid var(--rule)}
h3{font:700 19px/1.35 Georgia,serif;margin:26px 0 9px}

/* Таблица — крутится сама, страницу не тянет */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;border:1px solid var(--rule);border-radius:2px}
table{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;background:var(--card)}
th{text-align:left;background:#efece2;font:600 12px/1.3 "PT Sans",Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--acc-d);
  padding:10px 14px;border-bottom:2px solid var(--rule);vertical-align:bottom}
td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}

/* FAQ — раскрывается по клику; ставится и под H2 (контекстно), и общим блоком в конце */
.faqs{margin:34px 0 8px}
details.qa{border:1px solid var(--rule);border-radius:2px;background:var(--card);margin:12px 0;overflow:hidden}
details.qa+details.qa{margin-top:8px}
details.qa summary{cursor:pointer;list-style:none;padding:14px 44px 14px 16px;position:relative;
  font:700 17px/1.45 Georgia,serif;color:var(--ink)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:16px;top:12px;font:400 22px/1 "PT Sans",Arial,sans-serif;color:var(--acc)}
details.qa[open] summary::after{content:"\2212"}
details.qa .a{padding:0 16px 15px;color:#38312a;font-size:16.5px;line-height:1.62}
details.qa .a p{margin:0 0 10px}details.qa .a p:last-child{margin:0}

/* Выноска-примечание и предупреждение */
.note{background:#eef2ee;border:1px solid #d3ddce;border-radius:2px;padding:14px 18px;margin:24px 0;font-size:16.5px;line-height:1.6}
.note.warn{background:#f7ede9;border-color:#e4c7bd}
.note .h{font-weight:700;display:block;margin-bottom:5px}

/* Цитата из практики */
blockquote.field{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--acc);
  font-style:italic;color:#3a332b;font-size:18.5px;line-height:1.62}
blockquote.field .who{display:block;margin-top:9px;font-style:normal;
  font:600 11px/1 "PT Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* Пошагово (HowTo) */
ol.steps{margin:22px 0;padding:0;counter-reset:s;list-style:none}
ol.steps li{position:relative;padding:0 0 16px 44px;margin:0}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;
  font:700 15px/28px "PT Sans",Arial,sans-serif;text-align:center}
ol.steps li b{display:block;margin-bottom:2px}

/* Светофор «норма/тревога» */
.signal{margin:22px 0;display:grid;gap:10px}
.signal .s{border:1px solid var(--rule);border-left-width:5px;border-radius:2px;background:var(--card);padding:12px 16px;font-size:16.5px;line-height:1.55}
.signal .s b{display:block;margin-bottom:3px}
.signal .g{border-left-color:var(--g)}.signal .g b{color:var(--g)}
.signal .y{border-left-color:var(--y)}.signal .y b{color:var(--y)}
.signal .r{border-left-color:var(--r)}.signal .r b{color:var(--r)}

/* За / против — две колонки */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.proscons .col{border:1px solid var(--rule);border-radius:2px;background:var(--card);padding:14px 16px}
.proscons .col h4{margin:0 0 8px;font:700 15px/1.3 "PT Sans",Arial,sans-serif}
.proscons .pro h4{color:var(--g)}.proscons .con h4{color:var(--r)}
.proscons ul{margin:0;padding-left:18px;font-size:16px;line-height:1.55}
.proscons li{margin:0 0 6px}

/* Форма */
.ask{margin:54px 0 0;border-top:2px solid var(--ink);padding-top:24px}
.ask h2{border:0;padding:0;margin:0 0 6px}
.ask p.sub{color:#4a4238;margin:0 0 20px;font-size:17px}
.ask form{max-width:440px}
.ask label{display:block;font:600 11px/1 "PT Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:16px 0 5px}
.ask input{width:100%;border:1px solid #cdc6b8;border-radius:2px;background:var(--card);
  font:400 17px Georgia,serif;padding:10px 12px;color:var(--ink)}
.ask input:focus{outline:0;border-color:var(--acc)}
.ask button{margin-top:22px;background:var(--acc);color:#fff;border:0;border-radius:2px;
  font:600 14px "PT Sans",Arial,sans-serif;letter-spacing:.04em;padding:13px 28px;cursor:pointer}
.ask button:hover{background:var(--acc-d)}
.hp{position:absolute;left:-9999px}
.done{border-left:4px solid var(--g);background:#eef2ee;padding:14px 18px;border-radius:2px;font-size:17px}
.err{color:var(--r);font-style:italic;margin:-4px 0 12px}

.foot{max-width:760px;margin:64px auto 0;padding:20px 22px 40px;border-top:1px solid var(--rule);
  font-size:13px;line-height:1.7;color:var(--dim)}
.foot a{color:var(--dim);border-bottom-color:#ccc}

@media(max-width:640px){
  body{font-size:17px}
  .lead{font-size:19px}
  h1{font-size:27px}
  h2{margin-top:36px;font-size:22px}
  .proscons{grid-template-columns:1fr}
}