/* СТАТУС — юридическое бюро, Пятигорск. Демо CloudxBear.
   Идея: документ с полями. Страница набрана как правовой документ — нумерованные
   пункты, поля, водяной знак печати. Фишка на полях: рядом с сухой формулировкой
   стоит перевод на человеческий язык. Бюро, которое объясняет, вызывает больше
   доверия, чем бюро, которое давит терминами.
   Цвет намеренно не тёмно-неоновый: бумага документа, бордо и синий кант. */

@font-face { font-family: "Doc"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptnarrow-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Doc"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptnarrow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "Doc"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptnarrow-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Doc"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptnarrow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

@font-face { font-family: "Body"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptserif-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Body"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptserif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "Body"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptserif-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Body"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/demo/legal/static/fonts/ptserif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

:root {
  --paper: #E8E4DA;        /* бумага документа: глубже, чем у соседних демо */
  --paper-2: #DAD4C6;
  --sheet: #FBFAF6;        /* лист, на котором лежит текст */
  --ink: #1C1B22;
  --ink-2: #4E4C58;
  --burgundy: #5E1C25;     /* пункты, номера, печать — тёмное, документное */
  --navy: #26405F;         /* поля с переводом на человеческий */
  --line: rgba(28,27,34,.16);

  --toc: 226px;
  --pad: clamp(18px, 4vw, 52px);
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.68,.3,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

/* Фона-узора нет намеренно. По подборкам юридических сайтов уместны мягкая
   глубина и тонкая линия, а не орнамент: он спорит с текстом и снижает
   ощущение строгости. Глубину даёт едва заметный градиент, а документную
   природу — красная линия поля на самих листах (см. .lg-sheet). */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(28,27,34,.03), transparent 420px);
  color: var(--ink);
  font-family: "Body", Georgia, serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--toc);
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--burgundy); color: var(--sheet); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

h1, h2, h3 { font-family: "Doc", "Arial Narrow", sans-serif; font-weight: 700;
  line-height: 1.08; letter-spacing: .005em; }
h2 { font-size: clamp(28px, 4vw, 46px); }
h3 { font-size: 20px; }

.lg-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.lg-sec { padding: clamp(44px, 5.6vw, 78px) 0; }

.lg-no { font-family: "Doc", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .18em; color: var(--burgundy); display: block; margin-bottom: 10px; }

/* ── Оглавление слева, как у документа ─────────────────────────────────────
   Обрывается высоко над низом экрана: там висит кнопка ИИ-помощника. */
.lg-toc {
  position: fixed; left: 0; top: 0; width: var(--toc); height: 100vh; z-index: 40;
  display: flex; flex-direction: column; padding: 26px 20px 150px;
  background: var(--sheet); border-right: 2px solid var(--ink);
}
.lg-brand { text-decoration: none; display: block; margin-bottom: 26px; }
/* line-height задаём явно: у узкой гарнитуры при 1.68 от body строки налезали. */
.lg-brand b { font-family: "Doc", sans-serif; font-weight: 700; font-size: 26px;
  letter-spacing: .1em; display: block; line-height: 1.05; }
.lg-brand span { font-family: "Doc", sans-serif; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); display: block; line-height: 1.3;
  margin-top: 4px; }
.lg-toc-title { font-family: "Doc", sans-serif; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-2); padding-bottom: 9px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* :not(.lg-brand) обязателен: логотип — тоже ссылка внутри оглавления, и общий
   грид раскладывал название с подписью по двум колонкам, они налезали друг на друга. */
.lg-toc a:not(.lg-brand) {
  font-family: "Doc", sans-serif; font-size: 18px; text-decoration: none; color: var(--ink);
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 0;
  border-bottom: 1px dotted var(--line); transition: color .2s var(--ease); }
.lg-toc a i { font-style: normal; color: var(--burgundy); font-weight: 700; }
.lg-toc a:hover { color: var(--burgundy); }
.lg-toc a.is-here { color: var(--burgundy); font-weight: 700; }
.lg-toc-foot { margin-top: auto; font-family: "Doc", sans-serif; font-size: 13.5px;
  color: var(--ink-2); letter-spacing: .04em; }

/* ── Лист с текстом ────────────────────────────────────────────────────── */
.lg-sheet { position: relative; background: var(--sheet); border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(28,27,34,.07);
  padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px)
           clamp(38px, 5vw, 68px); }
/* Линия поля — как на бланке: слева, красная, на всю высоту листа. */
.lg-sheet::before { content: ""; position: absolute; left: clamp(24px, 3.4vw, 44px);
  top: 0; bottom: 0; width: 1px; background: rgba(94,28,37,.28); }

/* Подмятый уголок: верхний правый край листа завёрнут, как у настоящей бумаги.
   Верхняя половина квадрата — цвет страницы (уголок отогнут и его не видно),
   нижняя — изнанка листа с тенью по линии сгиба. */
.lg-sheet, .lg-side { --fold: 34px; }
.lg-sheet::after, .lg-side::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: var(--fold); height: var(--fold); pointer-events: none;
  background:
    linear-gradient(225deg,
      var(--paper) 0 47%,
      rgba(28,27,34,.20) 47% 48.4%,
      #EFEBE1 48.4% 62%,
      var(--sheet) 100%);
  box-shadow: -2px 2px 5px rgba(28,27,34,.10);
}
.lg-side { position: relative; overflow: hidden; }

/* ── Первый экран ──────────────────────────────────────────────────────── */
.lg-hero { padding: clamp(34px, 5vw, 66px) 0 clamp(20px, 3vw, 36px); }
.lg-hero h1 { font-size: clamp(34px, 5.4vw, 62px); margin: 12px 0 18px; max-width: 20ch; }
.lg-hero h1 em { font-style: normal; color: var(--burgundy); }
.lg-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 52ch; }
.lg-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.lg-btn { font-family: "Doc", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .06em; padding: 13px 26px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--sheet); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.lg-btn:hover { background: var(--burgundy); border-color: var(--burgundy); transform: translateY(-2px); }
.lg-btn-line { background: transparent; color: var(--ink); }
.lg-btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

.lg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  border-top: 2px solid var(--ink); margin-top: 30px; }
.lg-facts div { padding: 16px 18px 16px 0; }
.lg-facts div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.lg-facts b { font-family: "Doc", sans-serif; font-size: clamp(24px, 2.8vw, 32px); display: block; }
.lg-facts span { font-size: 13.5px; color: var(--ink-2); }

/* ── Пункты с полями: главный приём ────────────────────────────────────── */
.lg-clause { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .52fr);
  gap: clamp(18px, 3vw, 42px); padding: 24px 0; border-bottom: 1px solid var(--line);
  align-items: start; }
.lg-clause:last-child { border-bottom: none; }
.lg-clause-body h3 { margin-bottom: 8px; }
.lg-clause-body p { color: var(--ink-2); }
.lg-clause-body .lg-formal { color: var(--ink); }
/* перевод на человеческий стоит на полях, с кантом и другим шрифтом */
.lg-margin { border-left: 3px solid var(--navy); padding: 2px 0 2px 16px;
  font-family: "Doc", sans-serif; font-size: 15px; line-height: 1.5; color: var(--navy); }
.lg-margin b { display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 5px; }

/* ── Практика ──────────────────────────────────────────────────────────── */
.lg-practice { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.lg-practice article { background: var(--sheet); padding: 22px 20px; display: flex;
  flex-direction: column; gap: 9px; transition: background .22s var(--ease); }
.lg-practice article:hover { background: #fff; }
.lg-practice h3 { font-size: 19px; }
.lg-practice p { font-size: 14.5px; color: var(--ink-2); flex: 1; }
.lg-practice-foot { font-family: "Doc", sans-serif; font-size: 14px; color: var(--burgundy);
  border-top: 1px solid var(--line); padding-top: 10px; }

/* ── Дела ──────────────────────────────────────────────────────────────── */
.lg-cases { display: grid; gap: 14px; }
.lg-case { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: clamp(12px, 2.4vw, 26px); align-items: baseline; background: var(--sheet);
  border: 1px solid var(--line); padding: 18px 20px; }
.lg-case-no { font-family: "Doc", sans-serif; font-size: 13px; letter-spacing: .1em;
  color: var(--ink-2); }
.lg-case h3 { font-size: 18px; margin-bottom: 4px; }
.lg-case p { font-size: 14.5px; color: var(--ink-2); }
.lg-case-res { font-family: "Doc", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--burgundy); white-space: nowrap; }

/* ── Тёмная полоса: как мы считаем ─────────────────────────────────────── */
.lg-band { background: var(--ink); color: var(--paper); }
.lg-band h2 { color: var(--paper); }
.lg-band .lg-no { color: #D9A0A9; }
.lg-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 22px;
  margin-top: 22px; }
.lg-band-item { border: 1px solid rgba(232,228,218,.22); padding: 20px; }
.lg-band-item h3 { color: var(--paper); margin-bottom: 7px; }
.lg-band-item p { color: rgba(232,228,218,.74); font-size: 14.5px; }

/* ── Форма ─────────────────────────────────────────────────────────────── */
.lg-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(22px, 4vw, 50px); align-items: start; }
.lg-form { display: grid; gap: 14px; }
.lg-form .lg-btn { justify-self: start; }
.lg-field { display: grid; gap: 6px; }
.lg-field label { font-family: "Doc", sans-serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); }
.lg-field input, .lg-field textarea {
  font-family: "Body", serif; font-size: 16px; color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--line); border-radius: 0; padding: 12px 14px;
  min-width: 0; width: 100%; transition: border-color .2s var(--ease); }
.lg-field input:focus, .lg-field textarea:focus { border-color: var(--navy); outline: none; }
.lg-field textarea { min-height: 92px; resize: vertical; }
.lg-ok { display: none; font-family: "Doc", sans-serif; font-size: 15px; color: var(--navy);
  border: 1.5px dashed var(--navy); padding: 12px 15px; }
.lg-ok.is-on { display: block; }
.lg-side { background: var(--sheet); border: 2px solid var(--ink); padding: 24px; }
.lg-side h3 { margin-bottom: 14px; }
.lg-side dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 15px; }
.lg-side dt { font-family: "Doc", sans-serif; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); }
.lg-side dd { text-align: right; }

/* ── Подвал ────────────────────────────────────────────────────────────── */
.lg-foot { background: var(--paper-2); border-top: 2px solid var(--ink); padding: 36px 0 30px;
  font-size: 14.5px; margin-top: 36px; }
.lg-foot-grid { display: flex; flex-wrap: wrap; gap: 20px 46px; justify-content: space-between; }
.lg-foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.lg-foot a:hover { border-bottom-color: var(--burgundy); color: var(--burgundy); }
.lg-foot-nav { display: flex; flex-wrap: wrap; gap: 15px; font-family: "Doc", sans-serif; }
.lg-foot-note { color: var(--ink-2); font-size: 12.5px; margin-top: 16px; }

/* ── Появление ─────────────────────────────────────────────────────────── */
.lg-rise { opacity: 0; transform: translateY(16px); }
.lg-rise.is-in { opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* ── Внутренние страницы ───────────────────────────────────────────────── */
.lg-page-head { padding: clamp(30px, 4vw, 56px) 0 clamp(18px, 2.6vw, 32px);
  border-bottom: 2px solid var(--ink); }
.lg-page-head h1 { font-size: clamp(30px, 4.8vw, 52px); margin-top: 10px; max-width: 20ch; }
.lg-page-head h1 em { font-style: normal; color: var(--burgundy); }
.lg-crumb { font-family: "Doc", sans-serif; font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }
.lg-crumb a { text-decoration: none; border-bottom: 1px solid var(--line); }
.lg-prose { max-width: 64ch; display: grid; gap: 15px; }
.lg-prose h2 { font-size: clamp(23px, 2.8vw, 32px); margin-top: 12px; }
.lg-prose p { color: var(--ink-2); }
.lg-prose ul { display: grid; gap: 8px; padding-left: 20px; color: var(--ink-2); }
.lg-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(22px, 4vw, 48px); align-items: start; }

@media (max-width: 900px) {
  body { padding-left: 0; padding-top: 66px; }
  /* Оглавление уезжает в панель, которую открывает бургер */
  .lg-burger { display: block; }
  .lg-toc { position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); height: 100vh;
    transform: translateX(101%); transition: transform .3s var(--ease);
    border-right: none; border-left: 2px solid var(--ink); padding: 22px 22px 40px;
    box-shadow: -12px 0 40px rgba(28,27,34,.18); overflow-y: auto; }
  .lg-toc.is-open { transform: none; }
  .lg-toc-title { display: block; }
  .lg-bar { position: fixed; top: 0; left: 0; right: 0; height: 66px; z-index: 60;
    display: flex; align-items: center; padding: 0 var(--pad);
    background: var(--sheet); border-bottom: 2px solid var(--ink); }
  .lg-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(28,27,34,.4);
    opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
  .lg-scrim.is-on { opacity: 1; pointer-events: auto; }
  .lg-clause, .lg-book, .lg-split { grid-template-columns: 1fr; }
  .lg-case { grid-template-columns: 60px 1fr; }
  .lg-case-res { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lg-rise { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Бургер: классический, но набранный в логике документа ─────────────────
   На узких экранах оглавление не должно прокручиваться вбок — оно
   раскрывается панелью, где видно всю структуру сразу. */
.lg-burger { display: none; position: fixed; top: 10px; right: 14px; z-index: 70;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: var(--sheet); border: 2px solid var(--ink); }
.lg-burger span { display: block; width: 22px; height: 2px; background: var(--ink);
  margin: 4px auto; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.lg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.lg-toc-group { font-family: "Doc", sans-serif; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); margin: 18px 0 8px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.lg-toc a.is-sub { font-size: 15.5px; color: var(--ink-2); padding: 6px 0 6px 0; }
.lg-toc a.is-sub i { color: var(--ink-2); font-weight: 400; }
.lg-toc a.is-sub:hover, .lg-toc a.is-sub.is-active { color: var(--burgundy); }
.lg-toc a.is-sub.is-active i { color: var(--burgundy); font-weight: 700; }
.lg-toc-scroll { overflow-y: auto; scrollbar-width: thin; margin-right: -6px; padding-right: 6px; }

/* Включение мобильного меню держим в конце файла: базовое .lg-burger объявлено
   ниже медиазапроса, и при равной силе побеждало бы правило display:none. */
@media (max-width: 900px) {
  .lg-burger { display: block; }
  .lg-toc-scroll { flex: 1; }
  /* Панель должна лежать НАД затемнением (z-index 55), иначе оно её гасит
     и светлый лист выглядит серым. */
  .lg-toc { z-index: 65; }
}