/* ══════════════════════════════════════════════════════════════════════════
   Статьи ГИП.LAB. Отдельный файл, потому что страницы статей не должны тащить
   за собой всю главную: у лендинга стили лежат внутри index.html и весят
   вместе с разметкой. Здесь только то, что нужно статье, — токены дизайн-
   системы (те же, что в макете), шапка, подвал и типографика текста.
   Правя размеры, сверяйтесь с index.html: значения оттуда, не подобраны.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --c-primary:#000000;
  --c-text:#0a0a0a;
  --c-text2:#171717;
  --c-text3:#737373;
  --c-muted:rgba(0,0,0,.6);
  --c-surface:#f5f5f5;
  --c-border:#e5e5e5;
  --c-bg:#ffffff;
  --c-bg2:#fafafa;
  --sp-4:4px;   --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-72:72px;
  --sp-80:80px; --sp-120:120px;
  --r-sm:8px; --r-lg:20px; --r-xl:32px; --r-full:40px;
  --page:1440px;
  --tekst:720px;                      /* ширина колонки текста: длина строки ~75 знаков */
  --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-h2:'Manrope','Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);
  font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.5px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,p,ul,ol,figure{margin:0}

.t-h1{font-size:56px;line-height:62px;letter-spacing:-2.8px;font-weight:600}
.t-h2{font-family:var(--font-h2);font-size:40px;line-height:42px;letter-spacing:-2px;font-weight:600}
.t-h3{font-size:24px;line-height:32px;letter-spacing:.072px}
.t-body{font-size:16px;line-height:20px;letter-spacing:-.5px}
.t-body-sm{font-size:14px;line-height:20px;letter-spacing:0}
.t-caption{font-size:13px;line-height:20px;letter-spacing:0}
.page{max-width:var(--page);margin:0 auto;padding:0 var(--sp-32);width:100%}

/* ── шапка и подвал: повторяют главную, чтобы переход не выглядел уходом ── */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--c-border)}
.top-in{max-width:var(--page);margin:0 auto;height:64px;padding:0 var(--sp-32);
  display:flex;align-items:center;gap:var(--sp-16)}
.brand{display:flex;align-items:center;flex:none;color:var(--c-primary)}
.brand svg{width:58px;height:20px}
.nav{display:flex;align-items:center;flex:1}
.nav a{padding:0 var(--sp-16);height:64px;display:flex;align-items:center;color:var(--c-text2);transition:color .15s}
.nav a:hover{color:var(--c-text3)}
.btn-login{height:40px;padding:0 var(--sp-20);border-radius:var(--r-full);
  background:var(--c-surface);display:inline-flex;align-items:center;flex:none;transition:background .15s}
.btn-login:hover{background:rgba(0,0,0,.1)}

footer{background:var(--c-surface);padding:var(--sp-32) 0 var(--sp-48);margin-top:var(--sp-120)}
.f-in{display:flex;gap:var(--sp-48);align-items:flex-start;flex-wrap:wrap}
.f-cols{display:flex;gap:var(--sp-48);flex:1;flex-wrap:wrap}
.f-col{display:flex;flex-direction:column;gap:var(--sp-8);min-width:150px}
.f-col h4{margin:0;padding:0 var(--sp-16) var(--sp-16);color:var(--c-muted);font-weight:500}
.f-col a{height:36px;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-full);
  display:inline-flex;align-items:center;width:fit-content;transition:background .15s}
.f-col a:hover{background:rgba(0,0,0,.08)}
.f-mark{padding-top:var(--sp-8);flex:none;color:var(--c-primary)}
.f-mark svg{width:58px;height:20px}

/* ── страница статьи ── */
.st-wrap{max-width:calc(var(--tekst) + var(--sp-32)*2);margin:0 auto;padding:0 var(--sp-32)}
.st-verh{padding:var(--sp-64) 0 var(--sp-32)}
.krohi{display:flex;gap:var(--sp-8);align-items:center;color:var(--c-text3);margin-bottom:var(--sp-24)}
.krohi a:hover{color:var(--c-text)}
.st-zag{font-size:40px;line-height:46px;letter-spacing:-1.6px;font-weight:600;margin-bottom:var(--sp-16)}
.st-lid{font-size:20px;line-height:28px;letter-spacing:-.4px;color:var(--c-text3)}
.st-meta{display:flex;gap:var(--sp-12);align-items:center;color:var(--c-text3);margin-top:var(--sp-24)}
.st-meta .tag{height:28px;padding:0 var(--sp-12);border-radius:var(--r-full);background:var(--c-surface);
  display:inline-flex;align-items:center;color:var(--c-text2)}
.st-oblozhka{border-radius:var(--r-xl);overflow:hidden;margin:var(--sp-32) 0}

/* Текст статьи. Читают с экрана и часто с телефона, поэтому строка 18 px с
   высотой 30: это заметно свободнее, чем 16/20 на главной, где текста мало. */
.st-tekst{font-size:18px;line-height:30px;letter-spacing:-.2px;color:var(--c-text2)}
.st-tekst > * + *{margin-top:var(--sp-24)}
.st-tekst h2{font-size:28px;line-height:34px;letter-spacing:-1px;font-weight:600;color:var(--c-text);
  margin-top:var(--sp-48)}
.st-tekst h3{font-size:20px;line-height:28px;letter-spacing:-.4px;font-weight:600;color:var(--c-text);
  margin-top:var(--sp-32)}
.st-tekst ul,.st-tekst ol{padding-left:var(--sp-24)}
.st-tekst li + li{margin-top:var(--sp-8)}
.st-tekst a{text-decoration:underline;text-underline-offset:3px}
.st-tekst a:hover{color:var(--c-text3)}
.st-tekst strong{font-weight:600;color:var(--c-text)}
.st-tekst code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  background:var(--c-surface);border-radius:var(--r-sm);padding:2px 6px}
.st-tekst blockquote{margin:0;padding:var(--sp-16) var(--sp-24);background:var(--c-surface);
  border-radius:var(--r-lg);color:var(--c-text2)}
.st-tekst figure figcaption{margin-top:var(--sp-8);color:var(--c-text3);font-size:14px;line-height:20px}
.st-tekst table{width:100%;border-collapse:collapse;font-size:16px;line-height:22px}
.st-tekst th,.st-tekst td{border:1px solid var(--c-border);padding:var(--sp-12);text-align:left;vertical-align:top}
.st-tekst th{background:var(--c-surface);font-weight:600;color:var(--c-text)}
.st-tabl{overflow-x:auto}                 /* широкую таблицу листаем, страница не едет */

/* Врезка «как это в продукте»: одна на статью, после вывода. Отделена цветом,
   чтобы читатель видел, где кончается разбор нормы и начинается наш инструмент. */
.st-vrezka{background:var(--c-surface);border-radius:var(--r-xl);padding:var(--sp-32);margin-top:var(--sp-48)}
.st-vrezka h3{margin:0 0 var(--sp-8);font-size:20px;line-height:28px;letter-spacing:-.4px;font-weight:600}
.st-vrezka p{color:var(--c-text3);margin-bottom:var(--sp-24)}
.st-vrezka .knopka{height:44px;padding:0 var(--sp-24);border-radius:var(--r-full);background:var(--c-primary);
  color:#fff;display:inline-flex;align-items:center;gap:var(--sp-8);transition:opacity .15s}
.st-vrezka .knopka:hover{opacity:.85}

/* ── список статей ── */
.sp-verh{padding:var(--sp-64) 0 var(--sp-32)}
.sp-spisok{display:flex;flex-direction:column;gap:var(--sp-12);padding-bottom:var(--sp-48)}
.sp-item{display:flex;gap:var(--sp-24);align-items:center;padding:var(--sp-16);border-radius:var(--r-lg);
  background:var(--c-bg2);transition:background .15s}
.sp-item:hover{background:var(--c-surface)}
.sp-item .pic{width:120px;height:120px;flex:none;border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface)}
.sp-item .pic img{width:100%;height:100%;object-fit:cover}
.sp-item .txt{display:flex;flex-direction:column;gap:var(--sp-8)}
.sp-item h3{font-size:20px;line-height:26px;letter-spacing:-.5px;font-weight:600}
.sp-item .opis{color:var(--c-text3)}
.sp-item .meta{display:flex;gap:var(--sp-12);color:var(--c-text3)}
.sp-pusto{color:var(--c-text3);padding:var(--sp-32) 0 var(--sp-80)}

@media(max-width:860px){
  :root{--sp-72:48px;--sp-80:48px;--sp-120:64px}
  .nav{gap:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .top-in{height:auto;min-height:56px;flex-wrap:wrap;padding:8px var(--sp-20);gap:var(--sp-8)}
  .nav a{height:44px;padding:0 var(--sp-12)}
  .st-zag{font-size:30px;line-height:36px;letter-spacing:-1px}
  .st-lid{font-size:17px;line-height:26px}
  .st-tekst{font-size:17px;line-height:28px}
  .st-tekst h2{font-size:24px;line-height:30px}
  .st-wrap,.page{padding:0 var(--sp-20)}
  .sp-item{gap:var(--sp-16)}
  .sp-item .pic{width:84px;height:84px}
}