.dictionary{padding:7rem 3vw;background:#ddd2ba}.dictionary-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid}.dictionary article{display:grid;grid-template-columns:85px 1fr;gap:1.2rem;padding:2rem;border-right:1px solid;border-bottom:1px solid}.dictionary article:nth-child(even){border-right:0}.dictionary article>span{font:42px Georgia,serif;color:var(--red)}.dictionary h3{font:400 25px Georgia,serif;margin:0 0 .7rem}.dictionary article p{line-height:1.55;margin:0}.caution{max-width:780px;margin:3rem 0 0 auto;font:18px/1.55 Georgia,serif}.architecture{display:grid;grid-template-columns:1fr 2fr;gap:5vw;padding:8rem 6vw;background:#1f2a29;color:#f1eadb;border-top:1px solid #4f7f85}.architecture h2{font:400 clamp(48px,7vw,105px)/.85 Georgia,serif;letter-spacing:-.055em;margin:0 0 2rem}.architecture h2 em{color:#c9a765;font-weight:400}.architecture>div>p{max-width:760px;font-size:17px;line-height:1.7}.legacy{padding:7rem 6vw;background:#c8bda6}.legacy-grid{display:grid;grid-template-columns:1fr 1fr;margin:3rem 0;border-top:1px solid;border-bottom:1px solid}.legacy article{padding:3rem;min-height:310px}.legacy article:first-child{border-right:1px solid}.legacy strong{color:var(--red);letter-spacing:.15em;font-size:11px}.legacy h3{font:400 clamp(45px,6vw,85px) Georgia,serif;margin:1rem 0}.legacy article p{max-width:520px;line-height:1.65}.legacy-line{max-width:950px;font:clamp(27px,4vw,55px)/1.1 Georgia,serif}@media(max-width:800px){.dictionary{padding:5rem 5vw}.dictionary-grid{grid-template-columns:1fr}.dictionary article{border-right:0}.architecture{grid-template-columns:1fr;padding:5rem 6vw}.legacy{padding:5rem 6vw}.legacy-grid{grid-template-columns:1fr}.legacy article:first-child{border-right:0;border-bottom:1px solid}}

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

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

/* Карточка словаря — сетка «иероглиф 85 px + текст». На 280 px после отступов
   оставалось 252 px, а минимальная ширина текста была 123 px: колонка не
   ужимается ниже min-content, и страница расширялась до 305 px. Ниже 320 px
   ставим иероглиф над текстом. */
@media(max-width:319px){.dictionary article{grid-template-columns:1fr;gap:.6rem;padding:1.4rem}.dictionary article>span{font-size:34px}}

/* --- контраст: приведено к WCAG AA ----------------------------------
   Значения посчитаны: тот же тон и насыщенность, другая светлота —
   минимальная, при которой пара «текст/фон» проходит норму. Область
   действия — секция, которая задаёт фон: один и тот же .index на тёмной
   и на светлой полосе требует разных цветов. */
/* 2.6→4.66 при норме 4.5 на #c8bda6 ×2 — «ДЕНДЕРА» */
.legacy strong{color:#7e3525}

/* --- тач-цели: минимум 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}
/* Ссылки-«источники» и вспомогательная навигация: у строчных растим область
   нажатия отступом (высота строки не меняется), у блочных — задаём высоту. */
a[target=_blank]{padding-block:4px}

/* Уважаем системную настройку «меньше движения»: анимации и плавная прокрутка
   у части людей вызывают тошноту и головокружение. Оставляем мгновенные
   состояния — интерфейс работает так же, просто без движения. */
@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}}

/* Слова КАПИТЕЛЬЮ Firefox и WebKit по слогам не переносят: при
   overflow-wrap:break-word слово рвётся посреди без дефиса («ЧУДОВИЩА/МИ»),
   а Chromium ставит в крупном заголовке дефис. Поэтому на узких экранах
   автоперенос в h1–h3 выключен, а кегль подобран так, чтобы самое длинное
   слово влезало в строку целиком. Значения измерены Playwright на 320,
   360 и 390 px в Chromium, Firefox и WebKit. Десктоп не затронут. */
@media(max-width:520px){h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}.hero h1{font-size:13.8vw}}
@media(max-width:480px){.story h2{font-size:10.4vw}}


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