.legal{background:var(--ink);color:var(--paper)}
.legal-top{display:flex;align-items:center;justify-content:space-between;padding:34px 6vw;border-bottom:1px solid var(--line)}
.legal-back{text-transform:uppercase;font-size:10px;letter-spacing:.11em;color:#a8ada4}
.legal-body{max-width:760px;margin:0 auto;padding:90px 6vw 40px}
.legal-body h1{font-size:clamp(46px,7vw,86px);line-height:.82;letter-spacing:-.06em;margin:26px 0 34px;font-weight:600}
.legal-body h1 em{font:italic 400 .7em/.85 "PT Serif",serif;color:var(--acid);letter-spacing:-.03em}
.legal-lead{font:400 18px/1.6 "PT Serif",serif;color:#cfcec6;margin-bottom:46px}
.legal-body h2{font-size:12px;text-transform:uppercase;letter-spacing:.13em;margin:46px 0 14px;color:var(--acid);font-weight:600}
.legal-body p{font:400 16px/1.7 "PT Serif",serif;color:#c3c7bd;margin:0 0 14px}
.legal-callout{border:1px solid #3f463d;background:#0e110d;padding:24px 26px;margin:0 0 20px}
.legal-callout p{margin:0 0 8px;font-size:15px}
.legal-callout b{color:var(--paper);font-family:Manrope,Arial,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:3px}
.fill{color:var(--red);border-bottom:1px dashed var(--red);font-style:italic}
.legal-hint{color:#8b9088!important;font-size:13px!important;margin-top:14px!important}
.legal-consent{border-left:2px solid var(--acid);padding-left:20px;color:#d8dbd2!important}
.legal-foot{display:flex;justify-content:space-between;padding:40px 6vw 70px;border-top:1px solid var(--line);color:#91968d;font-size:10px;text-transform:uppercase;letter-spacing:.1em;max-width:760px;margin:60px auto 0}
@media(max-width:800px){.legal-body{padding:60px 7vw 30px}}

/* Длинное русское слово в крупном заголовке шире экрана 320 px: «МАСТЕРСКОЙ»
   при clamp-кегле занимает 336 px и уезжает за край — прокрутки нет, буквы
   просто пропадают. Разрешаем переносить по слогам, а если словарь переносов
   не подхватился — рвать слово принудительно.

   Только на узких экранах. На десктопе крупный заголовок намеренно выходит
   за текстовую колонку в пустое поле справа — это часть оформления, и
   переносить его там незачем: получается лишняя строка и рваный вид. */
@media(max-width:520px){h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}}

/* --- тач-цели: минимум 24 px (WCAG 2.5.8) ------------------------------
   Ссылки и кнопки в шапке, подвале и на первом экране были высотой 11-22 px.
   Растим область нажатия симметричным вертикальным отступом: содержимое
   остаётся по центру коробки и не переносится, поэтому вёрстка не меняется.
   Менять display на flex здесь нельзя — у «● ИНТЕРЕСНОЕ ТУТ» точка и текст
   стали бы отдельными флекс-элементами и разъехались на две строки. */
.topbar a,.topbar button,.bar a,.legal-top a,footer a,.links a,.map-actions a,
.controls a,.controls button,.hero-copy a,.hero-text a,.hero>a,.hero .down,
.sound-toggle,.about-open,.fullscreen,.compact-prev,.compact-next,
.translation-toggle,.pin,.hotspot,nav a,.meta a,.sources a{min-height:24px;padding-block:7px}
/* Ползунки: полоса была 16 px, пальцем не поймать. Высоту поднимаем у самого
   поля - область нажатия растёт, родная отрисовка бегунка не ломается. */
input[type=range]{height:26px}
/* Флажки и переключатели: 13-17 px до пальца не дотягивают. */
input[type=checkbox],input[type=radio]{width:24px;height:24px}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */

/* Уважаем системную настройку «меньше движения»: анимации и плавная прокрутка
   у части людей вызывают тошноту и головокружение. Оставляем мгновенные
   состояния — интерфейс работает так же, просто без движения. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Единый клавиатурный фокус для дополнительного светлого листа. */
:focus-visible{outline:3px solid #17150f;outline-offset:3px;box-shadow:0 0 0 6px #fff}