/* ------------------------------------------------------------------
   s-energy24 — тема «lift-bay».
   Каркас намеренно не повторяет другие сайты сети: вместо героя с фото —
   тёмная «стойка подъёмника» с колонкой систем автомобиля слева (липкая),
   материалы выводятся карточками-операциями с плашкой нормо-часов.
   Палитра: графит #191d21, сталь #333d45, сигнальный синий #2f6fb0.
------------------------------------------------------------------- */

:root{
  --ink:#191d21; --steel:#333d45; --line:#dfe3e6; --bg:#f5f6f7; --panel:#ffffff;
  --dim:#5d6a73; --accent:#2f6fb0; --accent-dark:#20507f; --warn:#c0641d;
  --wrap:1180px; --rail:250px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.7 'Fira Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-dark); text-decoration:none}
a:hover{text-decoration:underline}

/* ── шапка ─────────────────────────────────────────────────────── */
.top{background:var(--ink); color:#e9edf0}
.top .wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px;
           display:flex; align-items:center; gap:26px; min-height:64px}
.brand{font:700 20px/1 'Unbounded', sans-serif; letter-spacing:-.02em; color:#fff}
.brand span{color:var(--accent)}
.top nav{display:flex; gap:20px; flex-wrap:wrap; margin-left:auto}
.top nav a{color:#b9c4cc; font-size:15px}
.top nav a:hover{color:#fff; text-decoration:none}

/* ── «стойка подъёмника»: заголовок страницы ───────────────────── */
.bay{background:linear-gradient(180deg,#1d2228 0%,#242b32 100%); color:#e9edf0;
     border-bottom:3px solid var(--accent)}
.bay .wrap{max-width:var(--wrap); margin:0 auto; padding:38px 20px 34px}
.bay .crumbs{font:400 13px/1.5 'Cousine', monospace; color:#8695a0; margin-bottom:14px}
.bay .crumbs a{color:#8695a0}
.bay h1{font:700 clamp(25px,3.4vw,38px)/1.2 'Unbounded', sans-serif; letter-spacing:-.02em}
.bay .sub{margin-top:12px; color:#aab7c0; max-width:70ch}
.specs{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px}
.spec{font:400 13px/1 'Cousine', monospace; color:#cbd5dc;
      border:1px solid #3c4750; border-radius:3px; padding:8px 12px}
.spec b{color:var(--accent); font-weight:700}

/* ── раскладка ─────────────────────────────────────────────────── */
.layout{max-width:var(--wrap); margin:0 auto; padding:34px 20px 56px;
        display:grid; grid-template-columns:var(--rail) 1fr; gap:34px; align-items:start}
.rail{position:sticky; top:20px}
.rail h2{font:700 12px/1 'Cousine', monospace; letter-spacing:.16em;
         text-transform:uppercase; color:var(--dim); margin-bottom:12px}
.rail ul{list-style:none; border-left:2px solid var(--line)}
.rail li a{display:block; padding:7px 0 7px 14px; margin-left:-2px;
           border-left:2px solid transparent; color:var(--steel); font-size:15px}
.rail li a:hover{border-left-color:var(--accent); color:var(--accent-dark); text-decoration:none}
.rail li a.on{border-left-color:var(--accent); color:var(--ink); font-weight:500}

article h2{font:600 clamp(20px,2.4vw,26px)/1.3 'Unbounded', sans-serif;
           margin:34px 0 14px; letter-spacing:-.01em}
article h3{font:600 18px/1.4 'Fira Sans', sans-serif; margin:24px 0 10px}
article p{margin-bottom:16px}
article ul, article ol{margin:0 0 18px 22px}
article li{margin-bottom:8px}
article table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px}
article th, article td{border:1px solid var(--line); padding:9px 12px; text-align:left}
article th{background:#eef1f3; font-weight:600}
article td:last-child{font-family:'Cousine', monospace; white-space:nowrap}
.lead{font-size:18px; color:var(--steel)}

/* ── карточки-операции ─────────────────────────────────────────── */
.ops{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:22px 0 8px}
.op{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--accent);
    padding:16px 18px}
.op img{width:calc(100% + 36px); margin:-16px -18px 14px; height:150px; object-fit:cover}
.op b{display:block; font-size:16px; margin-bottom:6px}
.op span{font-size:14px; color:var(--dim)}
.op .hrs{font:400 12px/1 'Cousine', monospace; color:var(--warn); display:block; margin-top:10px}

.note{background:#eef3f8; border-left:3px solid var(--accent); padding:14px 18px; margin:0 0 20px}
.note b{font-weight:600}

/* ── подвал ────────────────────────────────────────────────────── */
footer{background:var(--ink); color:#93a2ab; margin-top:20px}
footer .wrap{max-width:var(--wrap); margin:0 auto; padding:30px 20px;
             display:flex; flex-wrap:wrap; gap:16px 40px; font-size:14px}
footer a{color:#c3ced5}
footer .author{margin-left:auto}

@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:24px}
  .rail{position:static}
  .rail ul{display:flex; flex-wrap:wrap; gap:4px 0; border-left:none}
  .rail li a{border-left:none; border-bottom:2px solid var(--line); padding:6px 12px 6px 0; margin-right:16px}
}