/* Страница свёрстана по сетке макета шириной 1360 px.
   1 единица (--u) = 1 px макета; вся страница масштабируется по ширине окна. */

/* Шрифты лежат в проекте (assets/fonts), без обращения к Google: кириллица и латиница отдельными файлами, браузер грузит только нужные */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/playfair-display-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/raleway-italic-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/raleway-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/raleway-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/raleway-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/tenor-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/tenor-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #151617;
  --white: #f5f5f4;
  --text: #d5d6d6;
  --muted: #9a9b9c;
  --gold: #d8ba93;
  --gold-soft: #c7ab86;
  --gold-dim: #b39873;
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* текст: абзацы, карточки, табличка, надписи на кнопках */
  --label-font: 'Tenor Sans', 'Helvetica Neue', Arial, sans-serif; /* имя в шапке, меню, подписи прописными, ссылки, цитаты */
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(216, 186, 147, 0.32); color: #fff; }
/* Цифры одной высоты везде: сокращённая запись font в правилах ниже сбрасывает font-variant-numeric, а у Raleway по умолчанию «старые» цифры разной высоты */
*, ::before, ::after { font-variant-numeric: lining-nums !important; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote { margin: 0; font-weight: inherit; }

.page { container-type: inline-size; overflow: hidden; overflow: clip; } /* clip не делает страницу прокручиваемым контейнером — нити следят за прокруткой окна */
.canvas { --u: calc(min(100cqw, 1920px) / 1360); position: relative; width: calc(1360 * var(--u)); height: calc(5089 * var(--u)); margin-inline: auto; }

/* Разделы: каждый следующий лист накрывает предыдущий волнистым краем */
.site-header, section { position: absolute; left: 0; width: 100%; }
.site-header { top: 0; height: calc(90 * var(--u)); z-index: 10; }
.menu-toggle { display: none; }
.site-menu { display: contents; }
.hero { top: 0; height: calc(820 * var(--u)); z-index: 1; }
.practice { top: calc(608 * var(--u)); height: calc(920 * var(--u)); z-index: 2; background: linear-gradient(180deg, #17181a 0%, #151618 30%, #141517 100%); }
.about { top: calc(1428 * var(--u)); height: calc(762 * var(--u)); z-index: 3; background: #141415; }

/* Волна рисуется в исходной высоте макета, ниже лист просто залит — так волна не растягивается, когда раздел выше */
.practice { -webkit-mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat; mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat; }
.about { -webkit-mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat; mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat; }
/* Публикации и СМИ — один лист: одна волна сверху, общий фон на оба блока */
.journal { position: absolute; left: 0; top: calc(2086 * var(--u)); width: 100%; height: calc(1442 * var(--u)); z-index: 4; background: #161617; -webkit-mask: var(--wave-3-mask) 0 0 / 100% calc(452 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(440 * var(--u)) / 100% calc(100% - 440 * var(--u)) no-repeat; mask: var(--wave-3-mask) 0 0 / 100% calc(452 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(440 * var(--u)) / 100% calc(100% - 440 * var(--u)) no-repeat; }
.journal__ground { position: absolute; inset: 0; pointer-events: none; background: url("assets/journal/journal-ground-engraving.webp") center / cover no-repeat; } /* тёмный мрамор с едва заметной золотой гравюрой весов и капители */
.publications { top: 0; height: calc(700 * var(--u)); }
.press { top: calc(700 * var(--u)); height: calc(720 * var(--u)); }

.wave-line { position: absolute; left: 0; width: 100%; z-index: 7; pointer-events: none; background: 0 0 / 100% 100% no-repeat; }
.wave-line--1 { top: calc(619 * var(--u)); height: calc(245 * var(--u)); background-image: var(--wave-1-line); }
.wave-line--2 { top: calc(1451 * var(--u)); height: calc(140 * var(--u)); background-image: var(--wave-2-line); }
.wave-line--3 { top: calc(2093 * var(--u)); height: calc(164 * var(--u)); background-image: var(--wave-3-line); }
.wave-line--4 { top: calc(3451 * var(--u)); height: calc(140 * var(--u)); background-image: var(--wave-2-line); }
.wave-line--5 { top: calc(4046 * var(--u)); height: calc(245 * var(--u)); background-image: var(--wave-1-line); }
/* Вопросы и ответы; Связаться — свои листы с волной сверху (волны 2 и 1 в исходной высоте) */
.faq { top: calc(3428 * var(--u)); height: calc(757 * var(--u)); z-index: 5; background: #151617; -webkit-mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat; mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat; }
.contact { top: calc(4035 * var(--u)); height: calc(1054 * var(--u)); z-index: 6; background: #151617; -webkit-mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat; mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat; }

/* Картинки разделов */
.plate { position: absolute; left: 0; width: 100%; object-fit: cover; display: block; }
.plate--hero { top: 0; height: calc(820 * var(--u)); }
.plate--practice { top: calc(92 * var(--u)); height: calc(100% - 92 * var(--u)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(120 * var(--u))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(120 * var(--u))); }
.plate--about { top: calc(12 * var(--u)); height: calc(600 * var(--u)); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160 * var(--u)), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 160 * var(--u)), transparent); }

/* Тон листа «Обо мне»: поднимает тёмное поле справа до цвета макета, не трогая текст */
.sheet-tone { position: absolute; left: 0; width: 100%; pointer-events: none; mix-blend-mode: screen; }
.sheet-tone--about { top: 0; height: 100%; background: linear-gradient(90deg, rgba(11, 10, 10, 0) 44%, rgb(11, 10, 10) 66%); }

/* Текстовые блоки: размеры задают роли типографики ниже, координаты — блок в конце файла */
.t { position: absolute; margin: 0; white-space: nowrap; }

/* Шапка: монограмма с именем слева, меню по центру, кнопка справа. Имя, пункты меню и надпись кнопки
   стоят на одной базовой линии; края шапки совпадают с краями контента (110 и 1250 по сетке макета) */
.site-header { display: flex; justify-content: space-between; align-items: baseline; box-sizing: border-box; padding: calc(6 * var(--u)) calc(110 * var(--u)) 0; }
.site-header .t { position: static; }
.brand { justify-self: start; display: flex; align-items: baseline; gap: calc(14 * var(--u)); }
.brand__text { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.brand__mark { font: 400 calc(42 * var(--u)) / 1 var(--serif); letter-spacing: -0.14em; padding-right: 0.14em; color: #d6b58d; transform: translateY(calc(21.4 * var(--u))); }
.brand__name { font: 400 calc(14.5 * var(--u)) / 1.2 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.brand__role { font: 400 calc(11.5 * var(--u)) / 1.2 var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: #9d988f; }
.nav__link { font-family: var(--label-font); font-weight: 400; color: #e8e8e7; transition: color .25s ease; }
/* Меню: пункты в ряд по центру шапки, между ними золотые точки */
.nav { justify-self: center; display: flex; align-items: center; }
.nav .nav__link { position: static; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.02em; color: #ecebe8; white-space: nowrap; }
.nav .nav__link + .nav__link::before { content: ""; display: inline-block; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin: 0 calc(10 * var(--u)); border-radius: 50%; background: var(--gold-dim); vertical-align: middle; transform: translateY(calc(-1 * var(--u))); }
.nav__link:hover { color: var(--gold); }
/* Золотая черта под пунктом меню: едет к пункту под курсором и стоит под текущим разделом (motion.js) */
.nav { position: relative; }
.nav__line { position: absolute; left: 0; bottom: calc(-9 * var(--u)); width: 1px; height: 1px; background: var(--gold); transform-origin: 0 50%; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.nav__line.is-on { opacity: 1; }
.nav__link.is-current { color: var(--gold); }
/* Переключатель языка — последний пункт меню. Вместо золотой точки тонкая черта, подпись мельче и золотистая:
   это не раздел сайта, а смена языка. На телефонах — отдельная строка меню со словом целиком (mobile.css) */
.nav .nav__link--lang { font-size: calc(12.5 * var(--u)); letter-spacing: 0.16em; color: var(--gold-soft); }
.nav .nav__link.nav__link--lang::before { width: 1px; height: calc(13 * var(--u)); margin: 0 calc(18 * var(--u)) 0 calc(16 * var(--u)); border-radius: 0; background: rgba(201, 166, 124, 0.45); transform: translateY(calc(-1.5 * var(--u))); }
.nav__lang-full { display: none; }

/* Типографика: у каждой гарнитуры своя роль.
   Playfair Display — только крупное: имя, «Адвокат», заголовки разделов, монограмма.
   Raleway (--sans) — текст, который читают: лид, абзацы, названия и пункты карточек, табличка, надписи на кнопках (полужирный).
   Tenor Sans (--label-font) — имя в шапке, меню, ссылки, подписи прописными, цитаты. */
.hero__name { font: 400 calc(71 * var(--u)) / calc(88 * var(--u)) var(--serif); letter-spacing: 0.045em; text-transform: uppercase; color: #f7f7f6; }
.hero__name--gold { color: #e3c7a1; }
.hero__role { font: 400 calc(28 * var(--u)) / calc(36 * var(--u)) var(--serif); letter-spacing: 0.05em; text-transform: uppercase; color: #ededec; }
.heading { font: 500 calc(34 * var(--u)) / calc(40 * var(--u)) var(--serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.gold { color: #d2b089; }
.lead { font: 400 calc(17 * var(--u)) / calc(27 * var(--u)) var(--sans); color: #dcdcdb; }
.text { font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--text); }
.kicker { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.quote__text { font: 400 calc(12 * var(--u)) / calc(20.6 * var(--u)) var(--label-font); letter-spacing: 0.1em; text-transform: uppercase; color: #aaaaa9; }
.practice .text { white-space: normal; width: calc(470 * var(--u)); text-wrap: pretty; }



/* Ссылки со стрелкой */
.link { position: absolute; display: flex; align-items: center; gap: calc(14 * var(--u)); }
.link .t { position: relative; }
.link__text { font: 400 calc(15 * var(--u)) / calc(20 * var(--u)) var(--label-font); letter-spacing: 0.02em; color: var(--gold-soft); transition: color .25s ease; }
.link__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u)); height: 1px; background: currentColor; opacity: .7; }
.link:hover .link__text { color: #e6cba6; }
.quote__arrow { position: absolute; }
.link__arrow, .quote__arrow { fill: none; stroke: var(--gold-soft); stroke-width: 1; overflow: visible; }
.quote__arrow { stroke: #9d8f7c; }

/* Кнопки */
.btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; border-radius: 4px;
  padding-inline: calc(24 * var(--u));
  font-family: var(--sans); font-weight: 600;
  white-space: nowrap;
  transition: background-position .5s ease, border-color .25s ease, color .25s ease;
}
.btn__arrow { fill: none; stroke: currentColor; stroke-width: 1.1; overflow: visible; }
.btn--gold {
  color: #1d1c1b;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 248, 232, 0.6) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat, /* полоса блика, в покое за краем */
    linear-gradient(90deg, #d2b289 0%, #dfc39d 34%, #cdab82 62%, #b89670 88%, #c4a37b 100%) 0 0 / 180% 100%;
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.35);
}
.btn--gold:hover { background-position: 150% 0, 100% 0; }
.btn--outline { color: #efe7da; border: 1px solid rgba(201, 166, 124, 0.62); background: rgba(12, 12, 13, 0.3); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.btn--outline:hover { border-color: var(--gold); color: #f3e6d2; background: rgba(201, 166, 124, 0.1); }
.btn span { font-size: calc(12.5 * var(--u)); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; }
.btn--header { position: static; justify-self: end; height: calc(46 * var(--u)); }
.hero__actions { position: absolute; left: calc(110 * var(--u)); top: calc(538 * var(--u)); display: flex; align-items: center; gap: calc(32 * var(--u)); }
.hero__actions :is(.btn, .link) { position: static; }
.btn--hero { height: calc(50 * var(--u)); }
.btn--about { left: calc(786 * var(--u)); top: calc(598 * var(--u)); height: calc(50 * var(--u)); }


/* Волнистые края листов: маски и золотые линии, сняты с макета */
:root {
  --wave-1-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 712' preserveAspectRatio='none'%3E%3Cpath d='M0 19.0C13.3 22.7 53.3 33.5 80 41.0C106.7 48.5 133.3 56.7 160 64.0C186.7 71.3 213.3 78.3 240 85.0C266.7 91.7 293.3 98.3 320 104.0C346.7 109.7 373.3 114.5 400 119.0C426.7 123.5 453.3 127.7 480 131.0C506.7 134.3 533.3 136.7 560 139.0C586.7 141.3 613.3 143.2 640 145.0C666.7 146.8 693.3 147.3 720 150.0C746.7 152.7 773.3 156.5 800 161.0C826.7 165.5 853.3 172.3 880 177.0C906.7 181.7 933.3 186.5 960 189.0C986.7 191.5 1016.7 192.3 1040 192.0C1063.3 191.7 1080.0 190.0 1100 187.0C1120.0 184.0 1140.0 178.7 1160 174.0C1180.0 169.3 1200.0 164.0 1220 159.0C1240.0 154.0 1256.7 149.5 1280 144.0C1303.3 138.5 1346.7 129.0 1360 126.0L1360 712L0 712Z'/%3E%3C/svg%3E");
  --wave-1-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 245' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-5%25' y='-80%25' width='110%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a67c' stop-opacity='.45'/%3E%3Cstop offset='.5' stop-color='%23d6b48a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23e2c49c' stop-opacity='.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 32.0C13.3 35.7 53.3 46.5 80 54.0C106.7 61.5 133.3 69.7 160 77.0C186.7 84.3 213.3 91.3 240 98.0C266.7 104.7 293.3 111.3 320 117.0C346.7 122.7 373.3 127.5 400 132.0C426.7 136.5 453.3 140.7 480 144.0C506.7 147.3 533.3 149.7 560 152.0C586.7 154.3 613.3 156.2 640 158.0C666.7 159.8 693.3 160.3 720 163.0C746.7 165.7 773.3 169.5 800 174.0C826.7 178.5 853.3 185.3 880 190.0C906.7 194.7 933.3 199.5 960 202.0C986.7 204.5 1016.7 205.3 1040 205.0C1063.3 204.7 1080.0 203.0 1100 200.0C1120.0 197.0 1140.0 191.7 1160 187.0C1180.0 182.3 1200.0 177.0 1220 172.0C1240.0 167.0 1256.7 162.5 1280 157.0C1303.3 151.5 1346.7 142.0 1360 139.0' fill='none' stroke='%23dfe3e8' stroke-opacity='.075' stroke-width='40' filter='url%28%23b%29'/%3E%3Cpath d='M0 8.0C13.3 11.7 53.3 22.5 80 30.0C106.7 37.5 133.3 45.7 160 53.0C186.7 60.3 213.3 67.3 240 74.0C266.7 80.7 293.3 87.3 320 93.0C346.7 98.7 373.3 103.5 400 108.0C426.7 112.5 453.3 116.7 480 120.0C506.7 123.3 533.3 125.7 560 128.0C586.7 130.3 613.3 132.2 640 134.0C666.7 135.8 693.3 136.3 720 139.0C746.7 141.7 773.3 145.5 800 150.0C826.7 154.5 853.3 161.3 880 166.0C906.7 170.7 933.3 175.5 960 178.0C986.7 180.5 1016.7 181.3 1040 181.0C1063.3 180.7 1080.0 179.0 1100 176.0C1120.0 173.0 1140.0 167.7 1160 163.0C1180.0 158.3 1200.0 153.0 1220 148.0C1240.0 143.0 1256.7 138.5 1280 133.0C1303.3 127.5 1346.7 118.0 1360 115.0' fill='none' stroke='url%28%23g%29' stroke-width='1.4'/%3E%3C/svg%3E");
  --wave-2-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 612' preserveAspectRatio='none'%3E%3Cpath d='M0 31.0C10.0 32.0 40.0 35.0 60 37.0C80.0 39.0 96.7 39.7 120 43.0C143.3 46.3 173.3 51.5 200 57.0C226.7 62.5 253.3 70.3 280 76.0C306.7 81.7 333.3 87.2 360 91.0C386.7 94.8 413.3 97.8 440 99.0C466.7 100.2 493.3 99.2 520 98.0C546.7 96.8 573.3 95.2 600 92.0C626.7 88.8 653.3 83.7 680 79.0C706.7 74.3 733.3 68.3 760 64.0C786.7 59.7 813.3 56.0 840 53.0C866.7 50.0 890.0 47.7 920 46.0C950.0 44.3 990.0 43.5 1020 43.0C1050.0 42.5 1073.3 42.7 1100 43.0C1126.7 43.3 1156.7 43.2 1180 45.0C1203.3 46.8 1220.0 49.5 1240 54.0C1260.0 58.5 1280.0 66.5 1300 72.0C1320.0 77.5 1350.0 84.5 1360 87.0L1360 612L0 612Z'/%3E%3C/svg%3E");
  --wave-2-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-5%25' y='-80%25' width='110%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a67c' stop-opacity='.45'/%3E%3Cstop offset='.5' stop-color='%23d6b48a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23e2c49c' stop-opacity='.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 32.0C10.0 33.0 40.0 36.0 60 38.0C80.0 40.0 96.7 40.7 120 44.0C143.3 47.3 173.3 52.5 200 58.0C226.7 63.5 253.3 71.3 280 77.0C306.7 82.7 333.3 88.2 360 92.0C386.7 95.8 413.3 98.8 440 100.0C466.7 101.2 493.3 100.2 520 99.0C546.7 97.8 573.3 96.2 600 93.0C626.7 89.8 653.3 84.7 680 80.0C706.7 75.3 733.3 69.3 760 65.0C786.7 60.7 813.3 57.0 840 54.0C866.7 51.0 890.0 48.7 920 47.0C950.0 45.3 990.0 44.5 1020 44.0C1050.0 43.5 1073.3 43.7 1100 44.0C1126.7 44.3 1156.7 44.2 1180 46.0C1203.3 47.8 1220.0 50.5 1240 55.0C1260.0 59.5 1280.0 67.5 1300 73.0C1320.0 78.5 1350.0 85.5 1360 88.0' fill='none' stroke='%23dfe3e8' stroke-opacity='.075' stroke-width='40' filter='url%28%23b%29'/%3E%3Cpath d='M0 8.0C10.0 9.0 40.0 12.0 60 14.0C80.0 16.0 96.7 16.7 120 20.0C143.3 23.3 173.3 28.5 200 34.0C226.7 39.5 253.3 47.3 280 53.0C306.7 58.7 333.3 64.2 360 68.0C386.7 71.8 413.3 74.8 440 76.0C466.7 77.2 493.3 76.2 520 75.0C546.7 73.8 573.3 72.2 600 69.0C626.7 65.8 653.3 60.7 680 56.0C706.7 51.3 733.3 45.3 760 41.0C786.7 36.7 813.3 33.0 840 30.0C866.7 27.0 890.0 24.7 920 23.0C950.0 21.3 990.0 20.5 1020 20.0C1050.0 19.5 1073.3 19.7 1100 20.0C1126.7 20.3 1156.7 20.2 1180 22.0C1203.3 23.8 1220.0 26.5 1240 31.0C1260.0 35.5 1280.0 43.5 1300 49.0C1320.0 54.5 1350.0 61.5 1360 64.0' fill='none' stroke='url%28%23g%29' stroke-width='1.4'/%3E%3C/svg%3E");
  --wave-3-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 452' preserveAspectRatio='none'%3E%3Cpath d='M0 15.0C13.3 18.3 53.3 28.8 80 35.0C106.7 41.2 133.3 45.2 160 52.0C186.7 58.8 213.3 68.8 240 76.0C266.7 83.2 293.3 90.3 320 95.0C346.7 99.7 376.7 102.0 400 104.0C423.3 106.0 436.7 107.2 460 107.0C483.3 106.8 513.3 105.2 540 103.0C566.7 100.8 593.3 96.2 620 94.0C646.7 91.8 673.3 90.5 700 90.0C726.7 89.5 753.3 89.8 780 91.0C806.7 92.2 833.3 94.8 860 97.0C886.7 99.2 916.7 102.7 940 104.0C963.3 105.3 980.0 105.3 1000 105.0C1020.0 104.7 1040.0 104.3 1060 102.0C1080.0 99.7 1096.7 95.5 1120 91.0C1143.3 86.5 1173.3 80.3 1200 75.0C1226.7 69.7 1253.3 63.0 1280 59.0C1306.7 55.0 1346.7 52.3 1360 51.0L1360 452L0 452Z'/%3E%3C/svg%3E");
  --wave-3-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 164' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-5%25' y='-80%25' width='110%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a67c' stop-opacity='.45'/%3E%3Cstop offset='.5' stop-color='%23d6b48a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23e2c49c' stop-opacity='.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 32.0C13.3 35.3 53.3 45.8 80 52.0C106.7 58.2 133.3 62.2 160 69.0C186.7 75.8 213.3 85.8 240 93.0C266.7 100.2 293.3 107.3 320 112.0C346.7 116.7 376.7 119.0 400 121.0C423.3 123.0 436.7 124.2 460 124.0C483.3 123.8 513.3 122.2 540 120.0C566.7 117.8 593.3 113.2 620 111.0C646.7 108.8 673.3 107.5 700 107.0C726.7 106.5 753.3 106.8 780 108.0C806.7 109.2 833.3 111.8 860 114.0C886.7 116.2 916.7 119.7 940 121.0C963.3 122.3 980.0 122.3 1000 122.0C1020.0 121.7 1040.0 121.3 1060 119.0C1080.0 116.7 1096.7 112.5 1120 108.0C1143.3 103.5 1173.3 97.3 1200 92.0C1226.7 86.7 1253.3 80.0 1280 76.0C1306.7 72.0 1346.7 69.3 1360 68.0' fill='none' stroke='%23dfe3e8' stroke-opacity='.075' stroke-width='40' filter='url%28%23b%29'/%3E%3Cpath d='M0 8.0C13.3 11.3 53.3 21.8 80 28.0C106.7 34.2 133.3 38.2 160 45.0C186.7 51.8 213.3 61.8 240 69.0C266.7 76.2 293.3 83.3 320 88.0C346.7 92.7 376.7 95.0 400 97.0C423.3 99.0 436.7 100.2 460 100.0C483.3 99.8 513.3 98.2 540 96.0C566.7 93.8 593.3 89.2 620 87.0C646.7 84.8 673.3 83.5 700 83.0C726.7 82.5 753.3 82.8 780 84.0C806.7 85.2 833.3 87.8 860 90.0C886.7 92.2 916.7 95.7 940 97.0C963.3 98.3 980.0 98.3 1000 98.0C1020.0 97.7 1040.0 97.3 1060 95.0C1080.0 92.7 1096.7 88.5 1120 84.0C1143.3 79.5 1173.3 73.3 1200 68.0C1226.7 62.7 1253.3 56.0 1280 52.0C1306.7 48.0 1346.7 45.3 1360 44.0' fill='none' stroke='url%28%23g%29' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* Стрелки */
.link--hero .link__arrow { width: calc(30 * var(--u)); height: calc(9 * var(--u)); }
.quote__arrow { width: calc(32 * var(--u)); height: calc(9.4 * var(--u)); }
.quote--hero .quote__arrow { left: calc(1072 * var(--u)); top: calc(184.8 * var(--u)); }
.quote--about .quote__arrow { left: calc(110 * var(--u)); top: calc(207.8 * var(--u)); }
.btn { gap: calc(13 * var(--u)); }
.btn__arrow { width: calc(12 * var(--u)); height: calc(7.5 * var(--u)); }


/* Движение: «золотая нить» и свет на золоте.
   Первый экран один раз за визит проявляется, как при включении студийного света, под ним прорисовывается нить.
   Остальные нити рисуются вместе с прокруткой. Заголовки выходят построчно из-под невидимой линии, текст просто
   проявляется, по табличке, золотым кнопкам и точке на карте один раз проходит свет. Без скрипта всё видно сразу. */
@keyframes fade { from { opacity: 0; } }
@keyframes lift { from { opacity: 0; transform: translateY(var(--lift)); } }
@keyframes reveal { from { transform: translateY(100%); clip-path: inset(-.3em -.2em 100% -.2em); } to { transform: none; clip-path: inset(-.3em -.2em -.3em -.2em); } }
@keyframes light-on { from { filter: brightness(.12); transform: scale(1.035); } }
/* нить проявляется маской с растушёванным кончиком: 300% ширины, непрозрачная часть — ровно одна ширина листа */
@keyframes thread { from { -webkit-mask: linear-gradient(90deg, #000 33.4%, transparent 37%) 55.5% 0 / 300% 100% no-repeat; mask: linear-gradient(90deg, #000 33.4%, transparent 37%) 55.5% 0 / 300% 100% no-repeat; } to { -webkit-mask: linear-gradient(90deg, #000 33.4%, transparent 37%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(90deg, #000 33.4%, transparent 37%) 0 0 / 300% 100% no-repeat; } }
@keyframes sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes glint { from { background-position: 102% 0, 0 0; } to { background-position: -2% 0, 0 0; } } /* полоса проходит ровно от левого края до правого */
@keyframes pin-drop { from { opacity: 0; transform: translateY(-70%); } 40% { opacity: 1; } }
@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }

.canvas { --lift: calc(10 * var(--u)); }
.heading .ln { display: block; }
.kicker {
  -webkit-mask-image: linear-gradient(100deg, #000 0 38%, rgba(0, 0, 0, .3) 50%, #000 62% 100%);
  mask-image: linear-gradient(100deg, #000 0 38%, rgba(0, 0, 0, .3) 50%, #000 62% 100%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}

/* Первый экран: свет на фото, имя и «Адвокат» выходят из-под линии, лид и кнопки проявляются, нить рисуется к «Практике» */
html.motion.intro:not(.intro-go) .hero :is(.kicker, .hero__name, .hero__role, .lead, .hero__actions > *, .quote) { opacity: 0; }
html.motion.intro:not(.intro-go) .plate--hero { filter: brightness(.12); }
html.intro-go .plate--hero { transform-origin: 62% 30%; animation: light-on 2.4s cubic-bezier(.3, 0, .2, 1) both; }
html.intro-go .hero .kicker { animation: fade .8s ease .5s both, sweep 2.4s cubic-bezier(.45, 0, .25, 1) 1s both; }
html.intro-go .hero__name { animation: reveal 1.1s cubic-bezier(.16, 1, .3, 1) .35s backwards; }
html.intro-go .hero__name--gold { animation-delay: .5s; }
html.intro-go .hero__role { animation: reveal .9s cubic-bezier(.16, 1, .3, 1) .7s backwards; }
html.intro-go .hero .lead { animation: fade .9s ease .9s backwards; }
html.intro-go .hero__actions > * { animation: fade .7s ease 1.05s backwards; }
html.intro-go .btn--hero { animation: fade .7s ease 1.05s backwards, glint 1.6s cubic-bezier(.45, 0, .2, 1) 1.8s; }
html.intro-go .hero .quote { animation: fade 1.2s ease 1.2s backwards; }

/* Нити: первая рисуется в конце первого экрана, остальные — вместе с прокруткой (где браузер не умеет, — когда шов входит в экран) */
.wave-line { clip-path: inset(0); transition: clip-path 1.8s cubic-bezier(.65, 0, .35, 1) .2s; }
html.motion .wave-line:not(.is-in) { clip-path: inset(0 100% 0 0); }
html.motion:not(.intro) .wave-line--1 { clip-path: inset(0); transition: none; }
html.motion.intro:not(.intro-go) .wave-line--1 { clip-path: inset(0 100% 0 0); }
html.motion.intro-go .wave-line--1 { clip-path: inset(0); transition: none; animation: thread 1.6s cubic-bezier(.65, 0, .35, 1) 1s backwards; }
@supports (animation-timeline: view()) {
  html.motion .wave-line:not(.wave-line--1) { clip-path: none; transition: none; animation: thread linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
}

/* Разделы ниже: элемент проявляется, когда входит в экран (класс is-in ставит motion.js); без размытия и долгой очереди */
html.motion section:not(.hero) :is(.kicker, .heading, .text, .quote, .credential, .map, .path, .pub, .press__item, .faq__item, .contact__line):not(.is-in),
html.motion section:not(.hero) > :is(.btn, .link):not(.is-in) { opacity: 0; }
html.motion .kicker.is-in { animation: fade .8s ease both, sweep 2.4s cubic-bezier(.45, 0, .25, 1) .4s both; }
html.motion .heading.is-in .ln { animation: reveal 1s cubic-bezier(.16, 1, .3, 1) calc(.08s + var(--ln, 0) * .11s) backwards; }
html.motion :is(.text, .quote, .credential, .map).is-in { animation: fade .9s ease .2s backwards; }
html.motion section > :is(.btn, .link).is-in { animation: fade .7s ease .3s backwards; }
html.motion section > .btn--gold.is-in { animation: fade .7s ease .3s backwards, glint 1.6s cubic-bezier(.45, 0, .2, 1) 1.1s; }
html.motion :is(.path, .pub, .press__item, .faq__item, .contact__line).is-in { animation: lift .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }

/* Свет по золоту таблички: маской служит сама табличка — кромка и герб пропускают блик, тёмная кожа нет */
.credential::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 204, 0.75) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat;
  mask: url("assets/plates/plaque-emblem.svg") luminance 0 0 / 100% 100% no-repeat;
}
html.motion .credential.is-in::after { animation: glint 2.4s cubic-bezier(.45, 0, .2, 1) 1s; }

/* Точка на карте: капля опускается на место, загорается сияние, от кольца один раз расходится свет */
html.motion .map:not(.is-in) :is(.map__drop, .map__glow, .map__label--pin) { opacity: 0; }
html.motion .map.is-in .map__drop { animation: pin-drop .9s cubic-bezier(.2, .8, .2, 1) .5s backwards; }
html.motion .map.is-in .map__glow { animation: fade 1.2s ease 1.1s backwards; }
html.motion .map.is-in .map__ring::after { animation: ring 2s cubic-bezier(.16, 1, .3, 1) 1.2s; }
html.motion .map.is-in .map__label--pin { animation: fade .7s ease 1.4s backwards; }

.btn__arrow, .link__arrow { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.btn:hover .btn__arrow { transform: translateX(calc(4 * var(--u))); }
.link:hover .link__arrow { transform: translateX(calc(4 * var(--u))); }

/* Табличка удостоверения в разделе «Обо мне»: кожа, кромка и герб — векторный рисунок, текст — живой */
.credential {
  position: absolute; left: calc(786 * var(--u)); top: calc(462 * var(--u)); width: calc(340 * var(--u)); aspect-ratio: 3.281; margin: 0;
  box-sizing: border-box; padding: 0 calc(18 * var(--u)) 0 calc(113 * var(--u));
  display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u));
  background: url("assets/plates/plaque-emblem.svg") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45));
}
.credential__line { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--sans); letter-spacing: 0.01em; color: #c8c7c4; white-space: nowrap; }
.credential__line--strong { color: #efe9df; }
.credential abbr { text-decoration: none; }

/* Практика: четыре карточки направлений — фото сверху, номер, название, что входит */
.paths {
  position: absolute; left: calc(110 * var(--u)); top: calc(352 * var(--u)); width: calc(1140 * var(--u));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(24 * var(--u));
  margin: 0; padding: 0; list-style: none;
}
.path {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  box-sizing: border-box; padding: 0 calc(22 * var(--u)) calc(26 * var(--u));
  border-radius: 4px; background: linear-gradient(180deg, #19191b 0%, #151617 100%);
}
/* Кромка карточки: тусклая рамка всегда, при наведении по ней по кругу прорисовывается золотая линия */
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.path::before, .path::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(201, 166, 124, 0.22); border-radius: inherit; pointer-events: none; }
.path::after {
  border-color: rgba(216, 186, 147, 0.8); opacity: 0;
  -webkit-mask: conic-gradient(from -35deg, #000 var(--edge), transparent 0); mask: conic-gradient(from -35deg, #000 var(--edge), transparent 0);
  transition: --edge .6s ease, opacity .3s ease;
}
.path__img {
  display: block; width: calc(100% + 44 * var(--u)); height: auto; aspect-ratio: 3 / 2; margin: 0 calc(-22 * var(--u)); object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
}
/* Фото карточки при наведении «загорается» из низкого ключа */
@media (hover: hover) {
  .path:hover::after { --edge: 360deg; opacity: 1; transition: --edge 1.1s cubic-bezier(.5, 0, .2, 1), opacity .2s ease; }
  .path:hover .path__img { transform: scale(1.03); filter: brightness(1.16) saturate(1.06); }
}
.path__num { position: absolute; left: calc(22 * var(--u)); top: calc(18 * var(--u)); font: 400 calc(11.5 * var(--u)) / 1 var(--label-font); letter-spacing: 0.18em; color: var(--gold); }
.path__title { position: relative; margin-top: calc(-16 * var(--u)); font: 500 calc(20 * var(--u)) / calc(26 * var(--u)) var(--sans); color: #f3f3f2; }
/* Карточка со своей страницей: ссылка на названии накрывает всю карточку (слой обрезан краями карточки) */
.path__link { color: inherit; transition: color .3s ease; }
.path__link::after { content: ""; position: absolute; top: -1000px; right: -1000px; bottom: -1000px; left: -1000px; z-index: 2; }
.path:hover .path__link { color: var(--gold); }
.path__link:focus-visible { outline: none; }
.path:has(.path__link:focus-visible) { outline: 1px solid var(--gold); outline-offset: calc(4 * var(--u)); }
.path__list { margin: calc(16 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(7 * var(--u)); }
.path__list li { position: relative; padding-left: calc(16 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(20 * var(--u)) var(--sans); color: #c4c4c3; }
.path__list li::before {
  content: ""; position: absolute; left: 0; top: calc(6.5 * var(--u));
  border-style: solid; border-width: calc(3.5 * var(--u)) 0 calc(3.5 * var(--u)) calc(5 * var(--u)); border-color: transparent transparent transparent var(--gold-dim);
}

/* Публикации: оглавление из пяти последних материалов справа, слева заголовок, текст и ссылка на все публикации */
.pubs { position: absolute; left: calc(490 * var(--u)); top: calc(150 * var(--u)); width: calc(760 * var(--u)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(201, 166, 124, 0.22); }
.pub { border-top: 1px solid rgba(201, 166, 124, 0.22); }
.pub__link { display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr) calc(16 * var(--u)); column-gap: calc(24 * var(--u)); align-items: center; padding: calc(22 * var(--u)) 0; }
.pub__date { grid-column: 1; grid-row: 1 / 3; font: 400 calc(13.5 * var(--u)) / calc(20 * var(--u)) var(--sans); color: var(--muted); }
.pub__tag { grid-column: 2; grid-row: 1; font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.pub__title { grid-column: 2; grid-row: 2; margin-top: calc(6 * var(--u)); font: 500 calc(20 * var(--u)) / calc(26 * var(--u)) var(--sans); color: #f3f3f2; transition: color .3s ease; }
.pub__arrow { grid-column: 3; grid-row: 1 / 3; width: calc(16 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: var(--gold-soft); stroke-width: 1.1; overflow: visible; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pub__link:is(:hover, :focus-visible) .pub__title { color: var(--gold); }
.pub__link:is(:hover, :focus-visible) .pub__arrow { transform: translateX(calc(4 * var(--u))); }

/* В СМИ: три колонки — издание, цитата, дата, ссылка */
.press__list { position: absolute; left: calc(110 * var(--u)); top: calc(150 * var(--u)); width: calc(1140 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: calc(56 * var(--u)); margin: 0; padding: 0; list-style: none; }
.press__item { display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(40 * var(--u)); border-left: 1px solid rgba(201, 166, 124, 0.22); }
.press__item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.press__outlet { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.press__quote { margin: calc(18 * var(--u)) 0 0; font: italic 400 calc(22 * var(--u)) / calc(32 * var(--u)) var(--sans); color: #ecebe8; }
.press__date { margin-top: auto; padding-top: calc(24 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(20 * var(--u)) var(--sans); color: var(--muted); }
.press__link { position: static; margin-top: calc(10 * var(--u)); }
.press__link .link__arrow, .link--all .link__arrow { width: calc(15.4 * var(--u)); height: calc(8.75 * var(--u)); }
/* Ссылки на отдельные страницы со всеми публикациями и комментариями */
.link--pubs-all { left: calc(110 * var(--u)); top: calc(392 * var(--u)); }
.link--press-all { left: auto; right: calc(110 * var(--u)); top: calc(93 * var(--u)); }

/* Вопросы и ответы: библиотека слева, аккордеон справа — открыт один ответ */
.faq__ground { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(21, 22, 23, 0.3) 0%, rgba(21, 22, 23, 0.62) 26%, #151617 50%), url("assets/faq/faq-library.webp") left center / auto 150% no-repeat, #151617; }
.faq__list { position: absolute; left: calc(490 * var(--u)); top: calc(150 * var(--u)); width: calc(760 * var(--u)); border-bottom: 1px solid rgba(201, 166, 124, 0.3); }
.faq__item { border-top: 1px solid rgba(201, 166, 124, 0.3); }
.faq__q { display: grid; grid-template-columns: minmax(0, 1fr) calc(16 * var(--u)); column-gap: calc(24 * var(--u)); align-items: center; padding: calc(22 * var(--u)) 0; list-style: none; cursor: pointer; font: 500 calc(20 * var(--u)) / calc(26 * var(--u)) var(--sans); color: #f3f3f2; transition: color .3s ease; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; width: calc(16 * var(--u)); height: calc(16 * var(--u)); background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat; transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-size .45s cubic-bezier(.16, 1, .3, 1); }
.faq__item[open] .faq__q::after { background-size: 100% 1px, 1px 0; transform: rotate(180deg); }
.faq__q:hover { color: var(--gold); }
.faq__q:focus-visible { outline: 1px solid var(--gold); outline-offset: calc(4 * var(--u)); }
.faq__a { margin: 0; padding: 0 calc(64 * var(--u)) calc(24 * var(--u)) 0; font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--muted); }
/* Ответ раскрывается плавно по высоте (где браузер умеет анимировать до auto), текст ответа проявляется */
.faq__item { interpolate-size: allow-keywords; }
.faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size .5s cubic-bezier(.16, 1, .3, 1), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__item[open] .faq__a { animation: fade .6s ease .1s backwards; }

/* Связаться: контакты слева, карта центра Петербурга справа (данные OpenStreetMap) */
.contact__lines { position: absolute; left: calc(110 * var(--u)); top: calc(350 * var(--u)); width: calc(440 * var(--u)); margin: 0; padding: 0; list-style: none; display: grid; row-gap: calc(16 * var(--u)); }
.contact__line { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr); column-gap: calc(18 * var(--u)); align-items: start; font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--text); }
.contact__line a:not(.link) { transition: color .25s ease; }
.contact__line a:not(.link):hover { color: var(--gold); }
.contact__icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(2 * var(--u)); fill: none; stroke: var(--gold-soft); stroke-width: 1.2; stroke-linejoin: round; }
.contact__line--phone .contact__icon { margin-top: calc(6 * var(--u)); }
.contact__phone { font: 500 calc(24 * var(--u)) / calc(32 * var(--u)) var(--sans); color: var(--gold); }
.btn--contact { left: calc(110 * var(--u)); top: calc(494 * var(--u)); height: calc(50 * var(--u)); }
.map { position: absolute; left: calc(560 * var(--u)); top: calc(150 * var(--u)); width: calc(800 * var(--u)); height: calc(480 * var(--u)); margin: 0; }
.map__img { display: block; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 60% 64% at 47% 54%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 60% 64% at 47% 54%, #000 58%, transparent 100%); }
/* Точка на карте живыми элементами поверх рисунка, в процентах от карты (исходные координаты 720×528 из 1600×960) */
.map__pin { position: absolute; inset: 0; pointer-events: none; }
.map__glow, .map__ring, .map__drop { position: absolute; display: block; }
.map__glow { left: 38.75%; top: 44.5833%; width: 12.5%; height: 20.8333%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 199, 161, 0.45), rgba(216, 186, 147, 0.14) 45%, rgba(216, 186, 147, 0)); }
.map__ring { left: 44%; top: 53.3333%; width: 2%; height: 3.3333%; box-sizing: border-box; border: 1px solid rgba(227, 199, 161, 0.5); border-radius: 50%; }
.map__ring::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(227, 199, 161, 0.8); border-radius: 50%; opacity: 0; }
.map__drop { left: 43.6875%; top: 48.6458%; width: 2.625%; height: 6.4583%; overflow: visible; transform-origin: 50% 100%; }
.map__label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--a, 0deg)); font: 400 calc(10.5 * var(--u)) / 1 var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(216, 186, 147, 0.62); white-space: nowrap; pointer-events: none; }
.map__label--water { font: italic 400 calc(14 * var(--u)) / 1 var(--sans); letter-spacing: 0.02em; text-transform: none; color: rgba(216, 186, 147, 0.85); }
.map__label--pin { transform: translate(calc(22 * var(--u)), calc(-50% - 20 * var(--u))); padding: calc(6 * var(--u)) calc(10 * var(--u)); border: 1px solid rgba(201, 166, 124, 0.45); border-radius: 4px; background: rgba(21, 22, 23, 0.85); font: 500 calc(13 * var(--u)) / 1 var(--sans); letter-spacing: 0; text-transform: none; color: #efe3cf; }
.map__credit { position: absolute; right: calc(110 * var(--u)); bottom: calc(-6 * var(--u)); font: 400 calc(11 * var(--u)) / 1 var(--sans); color: #8d8c89; }

/* Подвал: монограмма, имя, меню, реквизиты адвоката */
.site-footer { position: absolute; left: 0; top: calc(4735 * var(--u)); width: 100%; z-index: 8; }
.site-footer__inner { margin: 0 calc(110 * var(--u)); padding: calc(52 * var(--u)) 0 calc(56 * var(--u)); border-top: 1px solid rgba(201, 166, 124, 0.3); display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-footer__brand { display: flex; flex-direction: column; align-items: center; }
.site-footer__mark { font: 400 calc(42 * var(--u)) / 1 var(--serif); letter-spacing: -0.14em; padding-right: 0.14em; color: #d6b58d; }
.site-footer__name { margin-top: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid rgba(201, 166, 124, 0.45); font: 400 calc(12 * var(--u)) / 1.2 var(--label-font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); }
.site-footer__nav { display: flex; margin-top: calc(30 * var(--u)); }
.site-footer__nav a { padding: 0 calc(22 * var(--u)); font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: #cfcfce; transition: color .25s ease; }
.site-footer__nav a + a { border-left: 1px solid rgba(201, 166, 124, 0.5); }
.site-footer__nav a:hover { color: var(--gold); }
.site-footer__legal { margin-top: calc(30 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(22 * var(--u)) var(--sans); color: var(--muted); }
.site-footer__copy { margin-top: calc(10 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(20 * var(--u)) var(--sans); color: var(--muted); }

/* Отдельные страницы «Публикации» и «В СМИ»: та же шапка, обычный поток вместо координат холста */
body.subpage { background: linear-gradient(180deg, rgba(22, 22, 23, 0) 45vw, #161617 100vw) 0 0 / 100% 100vw no-repeat, url("assets/journal/journal-ground-engraving.webp") 0 0 / 100% auto no-repeat, #161617; }
.canvas--sub { height: auto; min-height: 100vh; box-sizing: border-box; padding: calc(170 * var(--u)) calc(110 * var(--u)) calc(140 * var(--u)); }
.canvas--sub section { position: relative; left: auto; width: auto; }
.canvas--sub .t:not(.link__text) { position: static; white-space: normal; }
.canvas--sub .link { position: static; display: inline-flex; }
.sub__back { margin-bottom: calc(44 * var(--u)); }
.sub__back .link__arrow { width: calc(15.4 * var(--u)); height: calc(8.75 * var(--u)); }
.canvas--sub .heading { margin-top: calc(18 * var(--u)); }
.canvas--sub .text { margin-top: calc(24 * var(--u)); max-width: calc(330 * var(--u)); }
.sub--publications { display: grid; grid-template-columns: calc(340 * var(--u)) calc(760 * var(--u)); justify-content: space-between; align-items: start; }
.sub--publications .sub__aside { position: sticky; top: calc(40 * var(--u)); }
.canvas--sub .pubs { position: static; width: auto; }
.sub--press .text { max-width: calc(520 * var(--u)); }
.canvas--sub .press__list { position: static; width: auto; margin-top: calc(64 * var(--u)); }
.canvas--sub .site-footer { position: relative; top: auto; margin-top: calc(120 * var(--u)); }
.canvas--sub .site-footer__inner { margin: 0; }

/* Страница публикации (articles/*.html), раскладка «Поля с нормами»: издание с комментарием — слева липкое оглавление с нитью чтения,
   по центру колонка текста 680u, справа на полях нормы, упомянутые в абзаце */
.art { display: grid; grid-template-columns: calc(190 * var(--u)) calc(680 * var(--u)) calc(190 * var(--u)); column-gap: calc(40 * var(--u)); align-items: start; }

/* Шапка статьи */
.art-back { grid-column: 1; grid-row: 1; margin-top: calc(-2 * var(--u)); }
.art-back .link__arrow { width: calc(15.4 * var(--u)); height: calc(8.75 * var(--u)); }
.art-head { grid-column: 2 / 4; grid-row: 1; } /* заголовку можно занять и поле справа: длинные слова вроде «контролирующего» не рвутся */
.art-meta { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.art-meta__dot { display: inline-block; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin: 0 calc(12 * var(--u)); border-radius: 50%; background: var(--gold-dim); vertical-align: middle; transform: translateY(calc(-1.5 * var(--u))); }
.art-h1 { margin-top: calc(26 * var(--u)); font: 500 calc(62 * var(--u)) / calc(72 * var(--u)) var(--serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.art-lead { max-width: calc(680 * var(--u)); margin-top: calc(34 * var(--u)); font: 400 calc(20 * var(--u)) / calc(33 * var(--u)) var(--sans); color: #dcdcdb; text-wrap: pretty; }
.art-rule { grid-column: 1 / -1; grid-row: 2; height: 1px; margin-top: calc(64 * var(--u)); background: rgba(201, 166, 124, 0.3); }

/* Левое поле: оглавление и золотая нить чтения */
.art-rail { grid-column: 1; grid-row: 3; align-self: stretch; padding-top: calc(64 * var(--u)); }
.art-toc { position: sticky; top: calc(56 * var(--u)); }
.art-toc__label { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.art-toc__list { position: relative; margin-top: calc(22 * var(--u)); padding-left: calc(22 * var(--u)); }
.art-toc__items { margin: 0; padding: 0; list-style: none; }
.art-toc__track { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(201, 166, 124, 0.22); }
.art-toc__track::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--p, 0) * 100%); background: var(--gold); }
.art-toc__track::after { content: ""; position: absolute; left: calc(-2 * var(--u)); top: 0; width: calc(5 * var(--u)); height: calc(5 * var(--u)); margin-left: 0.5px; border-radius: 50%; background: var(--gold); transform: translateX(-0.5px); }
.art-toc a { position: relative; display: block; padding: calc(9 * var(--u)) 0; font: 400 calc(11.5 * var(--u)) / calc(18 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: #b9b8b5; transition: color .25s ease; }
.art-toc a::before { content: ""; position: absolute; left: calc(-22 * var(--u)); top: calc(18 * var(--u)); width: calc(10 * var(--u)); height: 1px; background: var(--gold); opacity: 0; transition: opacity .25s ease; }
.art-toc a:hover, .art-toc a.is-current { color: var(--gold); }
.art-toc a.is-current::before { opacity: 1; }

/* Колонка текста */
.art-body { grid-column: 2; grid-row: 3; padding-top: calc(64 * var(--u)); }
.art-sec + .art-sec { margin-top: calc(68 * var(--u)); }
.art-sec { scroll-margin-top: calc(48 * var(--u)); }
.art-h2 { margin-bottom: calc(26 * var(--u)); font: 500 calc(28 * var(--u)) / calc(36 * var(--u)) var(--serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.art-para { position: relative; }
.art-para + .art-para, .art-list + .art-para { margin-top: calc(20 * var(--u)); }
.art-para + .art-list { margin-top: calc(12 * var(--u)); }
.art-p { font: 400 calc(17 * var(--u)) / calc(28 * var(--u)) var(--sans); color: var(--text); text-wrap: pretty; }
.art-ref { text-decoration: underline 1px rgba(201, 166, 124, 0.5); text-underline-offset: calc(5 * var(--u)); white-space: nowrap; }
/* В английских статьях ссылка на закон длинная («Article 30.3(1) of the Russian Code of Administrative Offences») — переносится как обычный текст; номер держится со словом Article неразрывным пробелом */
.art-ref:lang(en) { white-space: normal; }
.nw { white-space: nowrap; }

/* Заметки на полях: нормы, упомянутые в абзаце */
.art-note { position: absolute; left: calc(100% + 40 * var(--u)); top: calc(5 * var(--u)); width: calc(190 * var(--u)); }
.art-note::before { content: ""; display: block; width: calc(28 * var(--u)); height: 1px; margin-bottom: calc(12 * var(--u)); background: var(--gold); opacity: .7; }
.art-note__label { display: block; font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.art-note__ref { display: block; margin-top: calc(6 * var(--u)); font: 400 calc(14 * var(--u)) / calc(20 * var(--u)) var(--label-font); letter-spacing: 0.02em; color: #cfccc6; }

/* Списки в статьях: пункты с золотыми треугольниками, как на карточках практики */
.art-list { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(12 * var(--u)); }
.art-list li { position: relative; padding-left: calc(26 * var(--u)); font: 400 calc(17 * var(--u)) / calc(28 * var(--u)) var(--sans); color: var(--text); }
.art-list li::before { content: ""; position: absolute; left: calc(2 * var(--u)); top: calc(10.5 * var(--u)); border-style: solid; border-width: calc(3.5 * var(--u)) 0 calc(3.5 * var(--u)) calc(5 * var(--u)); border-color: transparent transparent transparent var(--gold-dim); }

/* Цитата-врезка: утверждение антиквой между золотыми линиями */
.art-pull { margin: calc(56 * var(--u)) 0 0; padding: calc(34 * var(--u)) 0 calc(38 * var(--u)); border-top: 1px solid rgba(216, 186, 147, 0.45); border-bottom: 1px solid rgba(216, 186, 147, 0.45); }
.art-pull__arrow { display: block; width: calc(32 * var(--u)); height: calc(9.4 * var(--u)); margin-bottom: calc(22 * var(--u)); fill: none; stroke: var(--gold-soft); stroke-width: 1; overflow: visible; }
.art-pull p { font: 400 calc(30 * var(--u)) / calc(42 * var(--u)) var(--serif); letter-spacing: 0.03em; text-transform: uppercase; color: #efeeec; text-wrap: balance; }

/* Оговорка под статьёй */
.art-disc { margin-top: calc(28 * var(--u)); font: 400 calc(14.5 * var(--u)) / calc(23 * var(--u)) var(--sans); color: var(--muted); }

/* Автор */
.art-author { display: flex; align-items: center; gap: calc(24 * var(--u)); margin-top: calc(56 * var(--u)); }
.art-author__mark { flex: none; padding-right: calc(24 * var(--u)); border-right: 1px solid rgba(201, 166, 124, 0.3); font: 400 calc(38 * var(--u)) / calc(54 * var(--u)) var(--serif); letter-spacing: -0.14em; color: #d6b58d; }
.art-author__label { display: block; font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.art-author__text { margin-top: calc(6 * var(--u)); font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--text); }

/* Призыв */
.art-cta { margin-top: calc(64 * var(--u)); padding-top: calc(52 * var(--u)); border-top: 1px solid rgba(201, 166, 124, 0.3); }
.art-cta__title { font: 500 calc(34 * var(--u)) / calc(40 * var(--u)) var(--serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.art-cta__text { margin-top: calc(18 * var(--u)); max-width: calc(560 * var(--u)); font: 400 calc(17 * var(--u)) / calc(28 * var(--u)) var(--sans); color: var(--text); }
.art-cta__row { display: flex; align-items: center; gap: calc(36 * var(--u)); margin-top: calc(32 * var(--u)); }
.art-cta .btn { position: static; height: calc(50 * var(--u)); }
.art-phone { font: 500 calc(24 * var(--u)) / calc(32 * var(--u)) var(--sans); color: var(--gold); transition: color .25s ease; }
.art-phone:hover { color: #e6cba6; }

/* Похожие материалы: оглавление, как «Публикации» на главной */
.art-related { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: calc(340 * var(--u)) calc(760 * var(--u)); justify-content: space-between; align-items: start; margin-top: calc(128 * var(--u)); }
.art-related__title { font: 500 calc(34 * var(--u)) / calc(40 * var(--u)) var(--serif); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.art-related .pubs { position: static; width: auto; }


/* Коротко за 30 секунд — «Вопрос — ответ»: вопросы, которые человек задаёт себе сам, и ответ в одну-две строки */
.art-short { padding: 0 0 calc(4 * var(--u)); border-bottom: 1px solid rgba(201, 166, 124, 0.22); }
.art-short__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(8 * var(--u)); }
.art-short__title { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.art-short__meta { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.art-qa { margin: 0; padding: 0; list-style: none; }
.art-qa li { display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr); padding: calc(18 * var(--u)) 0 calc(19 * var(--u)); }
.art-qa li + li { border-top: 1px solid rgba(201, 166, 124, 0.14); }
.art-qa__n { padding-top: calc(6 * var(--u)); font: 400 calc(11.5 * var(--u)) / 1 var(--label-font); letter-spacing: 0.18em; color: var(--gold-dim); }
/* Заголовки карточек, вопросов и призывов — без одиноких слов в последней строке */
.pr-title, .ab-title, .art-qa__q, .art-cta__title { text-wrap: balance; }
.pub__title, .ab-toc__desc { text-wrap: pretty; }
.art-qa__q { font: 600 calc(18 * var(--u)) / calc(28 * var(--u)) var(--sans); color: #f3f3f2; }
.art-qa__a { margin-top: calc(4 * var(--u)); font: 400 calc(17 * var(--u)) / calc(28 * var(--u)) var(--sans); color: #b9b8b5; text-wrap: pretty; }

/* «Уменьшить движение» в системе: без сдвигов, масштаба и бликов — остаются мягкое проявление, свет и раскрытие ответов */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes lift { from { opacity: 0; } }
  @keyframes reveal { from { opacity: 0; } }
  @keyframes light-on { from { filter: brightness(.55); } }
  @keyframes pin-drop { from { opacity: 0; } }
  @keyframes thread { from { -webkit-mask: none; mask: none; } to { -webkit-mask: none; mask: none; } }
  @keyframes sweep { from { opacity: 1; } to { opacity: 1; } }
  @keyframes glint { from { opacity: 1; } to { opacity: 1; } }
  @keyframes ring { from { opacity: 0; } to { opacity: 0; } }
  html.motion .wave-line { clip-path: none !important; transition: none !important; }
  .path::after { --edge: 360deg; transition: opacity .3s ease; }
  .path:hover .path__img { transform: none; }
  .nav__line { transition: opacity .3s ease; }
}

/* Координаты текстов на холсте 1360. Размеры задают роли типографики выше.
   Колонки: 110 — левый край контента, 786 — правая колонка «Обо мне», 692 — край третьей карточки «Практики». */
[data-r="hero-kicker"]{left:calc(110 * var(--u));top:calc(172 * var(--u))}
[data-r="hero-name-1"]{left:calc(106.5 * var(--u));top:calc(202 * var(--u))}
[data-r="hero-name-2"]{left:calc(107 * var(--u));top:calc(279 * var(--u))}
[data-r="hero-role"]{left:calc(109.8 * var(--u));top:calc(367 * var(--u))}
[data-r="hero-lead"]{left:calc(110 * var(--u));top:calc(427 * var(--u))}
[data-r="hero-quote-text"]{left:calc(1072.6 * var(--u));top:calc(216.3 * var(--u))}
[data-r="practice-kicker"]{left:calc(110 * var(--u));top:calc(184 * var(--u))}
[data-r="practice-heading"]{left:calc(108.3 * var(--u));top:calc(218 * var(--u))}
[data-r="practice-intro"]{left:calc(692 * var(--u));top:calc(227 * var(--u))}
[data-r="about-quote-text"]{left:calc(110.5 * var(--u));top:calc(236.3 * var(--u))}
[data-r="about-kicker"]{left:calc(786 * var(--u));top:calc(108 * var(--u))}
[data-r="about-heading"]{left:calc(785.9 * var(--u));top:calc(142 * var(--u))}
[data-r="about-body"]{left:calc(786 * var(--u));top:calc(286 * var(--u))}
[data-r="pubs-kicker"]{left:calc(110 * var(--u));top:calc(150 * var(--u))}
[data-r="pubs-heading"]{left:calc(108.3 * var(--u));top:calc(184 * var(--u))}
[data-r="pubs-intro"]{left:calc(110 * var(--u));top:calc(288 * var(--u))}
[data-r="press-kicker"]{left:calc(110 * var(--u));top:calc(40 * var(--u))}
[data-r="press-heading"]{left:calc(108.3 * var(--u));top:calc(74 * var(--u))}
[data-r="faq-kicker"]{left:calc(110 * var(--u));top:calc(150 * var(--u))}
[data-r="faq-heading"]{left:calc(108.3 * var(--u));top:calc(184 * var(--u))}
[data-r="faq-intro"]{left:calc(110 * var(--u));top:calc(288 * var(--u))}
[data-r="contact-kicker"]{left:calc(110 * var(--u));top:calc(200 * var(--u))}
[data-r="contact-heading"]{left:calc(108.3 * var(--u));top:calc(234 * var(--u))}
/* координаты: конец */