/*
 * Стили публичной части. Вынесены из шаблона отдельным файлом:
 * раньше 23 килобайта повторялись в каждой странице, а посетитель
 * после толчка открывает подряд главную, карточку события и каталог.
 * Теперь браузер забирает их один раз и держит месяц.
 */
/* ──────────────────────────────────────────────────────────────────────
   Шрифт один на весь сайт — Golos Text. Его делали для государственных
   сервисов, кириллица в нём первична, и для сайта института это точнее
   антиквы: научная строгость здесь не от засечек, а от порядка в цифрах
   и заголовках. Раз гарнитура одна, иерархию держим весом и кеглем:
   заголовок страницы 700, разделы 600, подписи 500, текст 400.

   Цвет взят у старого сайта, а не придуман заново: #D1DFF7 — та самая
   голубая заливка шапок таблиц темы DeepBlue, с которой институт прожил
   двадцать лет, #0143BB — его же акцент. Синий здесь несущий, а не
   декоративный: полоса означает институт, ссылка — действие, заливка
   дорожки — силу толчка. Красный на странице ровно один — эпицентр.
   ────────────────────────────────────────────────────────────────────── */
:root{
  --field:#EEF3FA;      /* фон страницы — светлее старой шапки, но той же семьи */
  --band:#D1DFF7;       /* заливка старого сайта: шапка, шапки таблиц, подвал */
  --paper:#FFFFFF;
  --ink:#0E2136;        /* чернила уходят в синеву, а не в серость */
  --ink-soft:#4A6480;
  --water:#0143BB;      /* ссылки и действия */
  --deep:#1B4F86;       /* графика: дорожки, баллы, маркеры */
  --line:#CFDCEF;
  --edge:#A9C2E6;       /* граница синих полос */
  --epicenter:#C0392F;
  --shell:min(1080px,100%);

  /* совместимость со старыми именами в отдельных шаблонах */
  --ice:var(--field);
  --ice-deep:#DCE7F7;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--field);color:var(--ink);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:var(--water);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.wrap{width:var(--shell);margin:0 auto;padding:0 20px}

/* Шапка: институт, а не бренд. Голубая полоса — единственное, что
   переносится со старого сайта дословно. */
.top{background:var(--band);border-bottom:1px solid var(--edge)}
.top .wrap{display:flex;gap:8px 20px;align-items:baseline;flex-wrap:wrap;
  padding-top:12px;padding-bottom:10px}
.top .brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit}
.top .brand:hover .name{color:var(--water)}
.top .mark{flex:none;display:block}
.top b{font-weight:600;font-size:16px;letter-spacing:-.012em;line-height:1.3}
.top .a11y-toggle{margin-left:auto}
.top nav{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:baseline;
  border-top:1px solid #BFD1EF;padding-top:9px;padding-bottom:10px}
.nav-main{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:baseline}
.top nav a{font-size:15px;color:var(--ink);text-decoration:none}
.top nav a:hover{color:var(--water)}
/* Подчёркивание — только у верхнего ряда. Раньше это правило доставало и
   пункты выпадающего списка: там рамка снизу пропадала под курсором,
   строка теряла два пикселя, и список дёргался под мышью. */
.nav-main a{padding:6px 0 5px;border-bottom:2px solid transparent}
.nav-main a:hover{border-bottom-color:var(--edge)}
.nav-main a[aria-current]{border-bottom-color:var(--deep);font-weight:500}

.nav-more{position:relative}
.nav-more summary{font-size:15px;cursor:pointer;padding:6px 0 5px;list-style:none;
  color:var(--ink);border-bottom:2px solid transparent}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:"";display:inline-block;margin-left:6px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px)}
.nav-more[open] summary::after{transform:translateY(-2px) rotate(180deg)}
.nav-more summary:hover{color:var(--water)}
/* Раздел открыт из «Ещё» — помечаем сам пункт, а не раскрываем список:
   иначе меню висело бы поверх страницы при каждом заходе в справочник. */
.nav-more summary[aria-current]{border-bottom-color:var(--deep);font-weight:500}
.nav-extra{display:flex;gap:2px 18px;flex-wrap:wrap;padding-top:4px}
.nav-extra a{padding:6px 0 5px;border-bottom:2px solid transparent}
.nav-extra a:hover{border-bottom-color:var(--edge)}
.nav-extra a[aria-current]{border-bottom-color:var(--deep);font-weight:500}

@media (min-width:821px){
  /* Сдвиг влево на рамку и отступ панели (1 + 16) — текст пунктов встаёт
     ровно под словом «Ещё», а не уезжает от него. */
  .nav-extra{position:absolute;top:calc(100% + 4px);left:-17px;z-index:30;
    flex-direction:column;gap:0;min-width:200px;padding:8px 0;
    background:var(--paper);border:1px solid var(--edge);border-radius:4px;
    box-shadow:0 8px 18px rgba(14,33,54,.12)}
  /* В панели наведение меняет только заливку: любая рамка или другой
     кегль сдвинули бы соседние строки прямо под курсором. */
  .nav-extra a{padding:7px 16px;border-bottom:0}
  .nav-extra a:hover{background:var(--field);border-bottom:0}
  .nav-extra a[aria-current]{font-weight:500;border-bottom:0;
    box-shadow:inset 3px 0 0 var(--deep)}
}

main{padding:30px 0 64px}
h1{font-weight:700;font-size:clamp(27px,5.2vw,40px);line-height:1.13;
   letter-spacing:-.028em;margin:0 0 8px}
h2{font-weight:600;font-size:clamp(20px,3vw,25px);line-height:1.25;
   letter-spacing:-.018em;margin:46px 0 14px}
h3{font-size:17px;font-weight:600;margin:26px 0 8px}
p{margin:0 0 14px;max-width:66ch}
/* Лид на карточке события несёт дату и время — это второй по важности
   ответ после силы толчка, поэтому он не приглушён. На остальных
   страницах лид остаётся вводным и тише. */
.lead{font-size:18.5px;line-height:1.45;color:var(--ink-soft);margin-bottom:28px}
h1 + .lead{color:var(--ink);font-size:19px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:20px}

/* Сводка события. Раньше это была решётка серых щелей и читалась как
   пустая таблица; теперь одна панель с волосяными перегородками и синей
   линией сверху — числа стоят на общей полке. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--deep);
  border-radius:0 0 4px 4px;overflow:hidden;margin:24px 0}
.facts div{padding:15px 18px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts dt{font-size:13px;color:var(--ink-soft);margin-bottom:4px;line-height:1.3}
.facts dd{margin:0;font-size:25px;font-weight:500;line-height:1.15;color:var(--deep)}
.facts dd small{font-size:14px;font-weight:400;color:var(--ink-soft)}
/* Первый показатель — тот, ради которого страницу и открыли. */
.facts div:first-child dd{font-size:34px;letter-spacing:-.02em}

#map{height:min(58vh,460px);border:1px solid var(--edge);border-radius:4px;
  background:var(--ice-deep)}
/* Leaflet приносит свой Helvetica в подписи, попапы и кнопки зума —
   на странице с одной гарнитурой это выпадает из набора. */
.leaflet-container,.leaflet-container .leaflet-control{font-family:inherit}
.leaflet-popup-content{font-size:14px;line-height:1.5}
.leaflet-control-attribution{font-size:11.5px}
.map-note{font-size:14px;color:var(--ink-soft);margin-top:9px}
/* Переключатель периода: на старой главной под этим были две отдельные
   карты — последних десяти событий и текущего года. */
.map-tabs{display:flex;gap:8px;margin-bottom:9px}
.map-tabs button{font:inherit;font-size:14px;padding:6px 14px;cursor:pointer;
  color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:4px}
.map-tabs button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
body.a11y .map-tabs{display:none}
/* Эпицентры повторяют старую карту: красная заливка, тёмный контур.
   Тень оттуда не перенесена: pic.php рисовал по тёмной картинке-подложке,
   где она отделяла кружок от фона, а на светлых тайлах контура хватает
   и без неё. Ссылка на саму библиотеку из атрибуции убрана в скриптах
   карт (setPrefix): лицензия Leaflet её не требует. Указание
   OpenStreetMap остаётся — вот его условия тайлов требуют. */

/* Легенда размеров. Диаметр кружка на старой карте задавался классом
   ступенями, эта шкала перенесена один в один. */
.map-key{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:flex-end;
  margin-top:12px;font-size:13px;color:var(--ink-soft)}
.map-key .k{display:flex;gap:7px;align-items:center}
.map-key i{display:block;border-radius:50%;background:#FF0000;
  border:1.5px solid #111}
.map-key .last i{background:#FFE000}

/* Где ощущалось — единственное место, где страница позволяет себе голос.
   Дорожка читается как профиль расстояния: линия от эпицентра до пункта
   и засечка на конце. Балл растёт кеглем, заливка — насыщенностью. */
.felt{margin:20px 0 0}
.felt-row{display:grid;grid-template-columns:minmax(96px,10.5rem) 1fr auto;
  gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.felt-head{padding:0 0 7px;font-size:13px;color:var(--ink-soft);
  border-bottom:1px solid var(--edge)}
.felt-head:hover{background:none}
.felt-row:hover{background:var(--paper)}
.felt-name{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.felt-track{position:relative;display:block;height:2px;background:var(--ice-deep);
  margin-bottom:5px}
.felt-track i{position:absolute;left:0;top:0;bottom:0;background:var(--deep);opacity:.55}
.felt-track i::after{content:"";position:absolute;right:0;top:-4px;
  width:2px;height:10px;background:var(--deep)}
.felt-km{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.felt-int{justify-self:end;min-width:3.6rem;text-align:right}
.felt-int b{font-weight:500;color:var(--deep);letter-spacing:-.01em;line-height:1.1}

/* Таблицы: шапка залита той же голубой, что и в старом каталоге. */
/* Часть данных в заголовке карточки дублирует колонку — на широком
   экране она не нужна. */
.card-only{display:none}

/* Таблицы событий на телефоне разворачиваются в карточки.
   Шесть колонок в 390 пикселей не помещаются, и самое нужное — класс
   и строка «где ощущалось» — уезжало за правый край: человек видел
   только дату и координаты. Подписи колонок берутся из data-label. */
table.data{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
/* Правила подачи чисел: единицы измерения стоят в заголовке колонки,
   а не повторяются в каждой строке; числовые столбцы выключены вправо,
   чтобы разряды стояли друг под другом; цифры табличные. */
table.data th{text-align:left;font-weight:500;color:var(--ink);font-size:13.5px;
  background:var(--band);padding:8px 10px;border-bottom:1px solid var(--edge);
  white-space:nowrap}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data th:has(+ th),table.data th{vertical-align:bottom}
table.data td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td a{display:inline-block;padding:3px 0}
/* Заголовок числовой колонки выравнивается по своим значениям. */
table.data tr:first-child th:nth-child(n+2):not(:last-child){text-align:right}
table.data tr:first-child th:last-child{text-align:left}
table.data td:last-child{white-space:normal}
table.data tr:hover td{background:var(--field)}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
.scroll table.data th:first-child,.scroll table.data td:first-child{padding-left:14px}

/* ── Графики ───────────────────────────────────────────────────────────
   Всё рисуется инлайновым SVG по тем же данным, что и таблицы рядом:
   ни одной библиотеки, ни одного запроса. Каждый график сопровождается
   текстом или таблицей, поэтому без картинки страница не теряет смысла. */
figure.chart{margin:22px 0;padding:0}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
figure.chart img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
figure.chart figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:9px}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--ink-soft);font-size:11px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.chart .bar{fill:var(--deep)}
.chart .bar-em{fill:var(--epicenter)}
.chart .fit{stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:5 4;fill:none}
.chart .dot{fill:var(--deep)}
.chart .dot-s{fill:none;stroke:var(--deep);stroke-width:1.4}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.chart .lbl{fill:var(--ink-soft);font-size:12.5px}
.chart .tick.em{fill:var(--epicenter)}
/* Трасса — фирменный мотив: тот же рисунок, что и в знаке филиала. */
.chart .wave{fill:none;stroke:var(--deep);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round}
.chart .mark-line{stroke:var(--epicenter);stroke-width:1;stroke-dasharray:3 3}
figure.trace{background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--deep);border-radius:0 4px 4px 0;padding:14px 18px 12px}
figure.trace figcaption{margin-top:4px}
body.a11y .chart .bar,body.a11y .chart .dot{fill:var(--ink)}
body.a11y .chart .axis,body.a11y .chart .grid{stroke:var(--ink)}
body.a11y .chart .tick,body.a11y .chart .lbl{fill:var(--ink)}
body.a11y .chart .fit,body.a11y .chart .dot-s{stroke:var(--ink)}
body.a11y figure.chart:not(:has(img)){display:none}   /* фотографии и схемы остаются */

/* Формы: каталог и анкета живут на одних правилах, а не на умолчаниях браузера. */
label{font-size:14px}
input[type=text],input[type=date],input[type=number],input[type=datetime-local],
select,textarea{font:inherit;font-size:16px;padding:8px 10px;color:var(--ink);
  background:var(--paper);border:1px solid var(--edge);border-radius:4px}
input:hover,select:hover{border-color:var(--deep)}
button[type=submit]{font:inherit;font-size:15px;font-weight:500;padding:9px 22px;
  border:0;border-radius:4px;background:var(--water);color:#fff;cursor:pointer}
button[type=submit]:hover{background:var(--deep)}
body.a11y button[type=submit]{background:var(--ink);color:var(--paper);
  border:2px solid currentColor}

.muted{color:var(--ink-soft)}
.small{font-size:14px}
/* Свёрнутый блок отбора. */
details.filters{margin-bottom:22px}
details.filters > summary{display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;font-size:15px;font-weight:500;color:var(--water);
  padding:9px 0;list-style:none}
details.filters > summary::-webkit-details-marker{display:none}
details.filters > summary::before{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
details.filters[open] > summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
details.filters > summary:hover{color:var(--deep)}
details.filters .card{margin-top:4px}

.ask{background:var(--band);border:1px solid var(--edge);border-radius:4px;
  padding:16px 18px;margin:34px 0}
.ask p{margin:0 0 8px;max-width:62ch}
.ask p:last-child{margin:0}

/* Блок «возьмите карту себе». Не залит цветом, как призыв к анкете:
   тот обращён к очевидцу, а этот — к редакции, и спорить за внимание
   на одной странице им незачем. */
/* Синяя полоса слева осталась ровно у одного элемента — у записи месяца.
   Здесь её нет намеренно: блок обращён к редакциям, спорить за внимание
   с картой и анкетой ему незачем. */
.take{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  justify-content:space-between;margin:22px 0 8px;padding:14px 18px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px}
.take b{display:block;font-size:16px;margin-bottom:4px}
.take p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:62ch}
.take-go{flex:none;font-size:15px;font-weight:500;text-decoration:none;
  padding:8px 16px;border-radius:4px;color:var(--water);
  border:1px solid var(--edge);background:var(--field)}
.take-go:hover{background:var(--water);border-color:var(--water);color:#fff}
body.a11y .take-go{background:var(--paper);color:var(--ink);
  border:2px solid currentColor;text-decoration:underline}
body.a11y .take{border-left:3px solid currentColor}

.warn{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--epicenter);
  padding:12px 16px;border-radius:0 4px 4px 0;font-size:15px}

/* Перенесённый научный текст: старая вёрстка была таблицами и <font>,
   поэтому задаём разумные умолчания, а не полагаемся на разметку. */
.subnav{display:flex;flex-wrap:wrap;gap:14px 20px;margin:0 0 26px;
  padding-bottom:16px;border-bottom:1px solid var(--line);font-size:15.5px}
.subnav span[aria-current]{color:var(--ink);font-weight:500}
.prose{max-width:70ch}
.prose p{margin:0 0 15px}
.prose h2{font-size:22px;margin:34px 0 12px;letter-spacing:-.015em}
.prose h3,.prose h4{font-size:17.5px;margin:26px 0 8px;font-weight:600}
.prose img{max-width:100%;height:auto;border-radius:3px;margin:10px 0}
.prose table{border-collapse:collapse;margin:16px 0;font-size:15px;
  display:block;overflow-x:auto;max-width:100%;background:var(--paper)}
.prose td,.prose th{border:1px solid var(--line);padding:6px 10px;vertical-align:top}
.prose th{background:var(--band)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 15px}
.prose li{margin-bottom:5px}
.prose a[href$=".pdf"]::after{content:" (PDF)";color:var(--ink-soft);font-size:.85em}

/* Лента самописца, замыкающая страницу. Единственная линия на сайте,
   которая ничего не измеряет, — поэтому у неё нет ни осей, ни подписей. */
.tape{display:block;width:100%;height:28px;background:var(--band);
  border-top:1px solid var(--edge)}
.tape path{fill:none;stroke:var(--deep);stroke-width:1.3;opacity:.55}
body.a11y .tape{display:none}

footer{background:var(--band);padding:22px 0 24px;font-size:14px;color:var(--ink-soft)}
footer .wrap{display:flex;gap:8px 20px;flex-wrap:wrap}
body.a11y footer{border-top:2px solid currentColor}

@media (max-width:820px){
  /* Подписи внутри SVG сжимаются вместе с viewBox: на телефоне 11 единиц
     превращаются в четыре пикселя. Тики укрупняем, названия осей убираем —
     их роль берёт на себя подпись под рисунком. */
  .chart .tick{font-size:19px}
  .trace .tick{font-size:26px}      /* лента узкая, подписям нужен запас */
  .chart .tick.thin{display:none}   /* делений на узком экране вдвое меньше */
  .chart .lbl{display:none}
  .chart .wave{stroke-width:2}
  .chart .dot,.chart .dot-s{r:6}
}
@media (max-width:640px){
  table.cards,
  table.cards tbody,
  table.cards tr,
  table.cards td{display:block;width:auto}
  table.cards thead,
  table.cards tr:first-child:has(th){display:none}
  table.cards tr{background:var(--paper);border:1px solid var(--line);
    border-radius:4px;padding:11px 13px;margin-bottom:9px}
  table.cards td{border:0;padding:3px 0;white-space:normal;
    display:flex;gap:12px;align-items:baseline;justify-content:space-between}
  table.cards td.num{text-align:right}
  table.cards td::before{content:attr(data-label);flex:none;
    font-size:13px;color:var(--ink-soft)}
  table.cards td:empty{display:none}
  table.cards td[data-label=""]{display:block}
  /* Первая ячейка — заголовок карточки: дата события крупнее и без подписи */
  table.cards td:first-child{display:block;font-size:16px;padding-bottom:6px;
    margin-bottom:5px;border-bottom:1px solid var(--line)}
  table.cards td:first-child::before{display:none}
  /* Дата — единственная ссылка в карточке, и по ней переходят пальцем:
     растягиваем её на всю ширину и добавляем высоту до нормы касания. */
  table.cards td:first-child a{display:block;padding:9px 0 11px;margin:-9px 0 -5px}
  .scroll:has(table.cards){border:0;overflow:visible}
  table.cards .card-only{display:inline}
  table.cards td:first-child a .card-only::before{content:", "}
  /* На телефоне в карточке остаётся только то, за чем сюда приходят:
     когда, насколько сильно и где ощущалось. Координаты и магнитуда
     есть в карточке события, ради них список листать не станут. */
  table.cards td[data-label^="Широта"],
  table.cards td[data-label^="Долгота"],
  table.cards td[data-label="Магнитуда"],
  table.cards td[data-label="Латиницей"],
  table.cards td[data-label="Код"],
  table.cards td[data-label="Время, UTC"]{display:none}
}

@media (max-width:560px){
  body{font-size:16px}
  main{padding-top:18px}
  h2{margin-top:36px}
  p{margin-bottom:12px}
  .lead{font-size:17.5px;margin-bottom:20px}
  .felt-row{grid-template-columns:minmax(80px,8rem) 1fr auto}
  .facts{grid-template-columns:repeat(2,1fr);margin:20px 0}
  .facts div{padding:12px 14px}
  .facts div:nth-child(odd){border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  /* Класс события — во всю ширину и крупно: это ответ на вопрос,
     с которым человек и открыл сайт. */
  .facts div:first-child{grid-column:1 / -1;border-bottom:1px solid var(--line)}
  .facts div:first-child dd{font-size:40px}
  .facts div:nth-child(2),.facts div:nth-child(3){border-top:0}
  .take{padding:13px 15px;gap:12px}
  .take-go{width:100%;text-align:center}
  .ask{padding:14px 15px;margin:26px 0}
  #map{height:min(52vh,360px)}
  .map-key{gap:6px 14px;font-size:12.5px}
  .top .wrap{padding-bottom:6px}
  .top b{font-size:15px}
  .top nav{width:100%;gap:0;padding-top:7px}
  .nav-main{width:100%;gap:0 18px}
  .nav-more{width:100%;border-top:1px solid #BFD1EF;margin-top:6px;padding-top:4px}
  .nav-extra{gap:0 16px}
  .nav-extra a{font-size:14.5px}
}

/* ── Версия для слабовидящих (ГОСТ Р 52872-2019) ───────────────────────
   Три размера шрифта, три цветовые схемы, отключение изображений.
   Реализовано подменой тех же переменных, что и в обычной версии,
   чтобы не держать вторую копию всех правил. */
body.a11y{--line:currentColor;--edge:currentColor}
body.a11y .top,body.a11y footer,body.a11y .card,body.a11y .facts,
body.a11y table.data,body.a11y table.data th{background:var(--paper)}
body.a11y a,body.a11y .top nav a{color:var(--ink);text-decoration:underline}
body.a11y .muted,body.a11y .lead,body.a11y .small,body.a11y .facts dd,
body.a11y table.data th,body.a11y .felt-km,body.a11y .facts dt,
body.a11y .felt-int b,body.a11y footer{color:var(--ink)}
body.a11y .facts{border-top-color:var(--ink)}
body.a11y .felt-track i,body.a11y .felt-track i::after{background:var(--ink);opacity:1}
body.a11y .felt-track{background:transparent;border-top:1px solid var(--ink);height:0}
body.a11y .felt-row:hover,body.a11y table.data tr:hover td{background:transparent}
body.a11y #map,body.a11y .mark{display:none}
/* В версии для слабовидящих ничего не прячем за раскрывающийся список:
   лишний шаг здесь — барьер, а не экономия места. */
body.a11y .nav-more summary{display:none}
/* В обычной версии это панель поверх страницы. Здесь список раскрыт всегда,
   поэтому панель разбираем: иначе ссылки висели бы белым прямоугольником
   поверх текста первого экрана. */
body.a11y .nav-extra{display:flex!important;position:static;flex-direction:row;
  flex-wrap:wrap;gap:2px 18px;min-width:0;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none}
body.a11y .nav-extra a{padding:6px 0 5px;border-bottom:0;box-shadow:none}
body.a11y .nav-more{width:100%;border-top:1px solid currentColor;
  margin-top:6px;padding-top:6px}
body.a11y details.filters > summary{color:var(--ink)}
body.a11y .map-note::before{content:"Карта в версии для слабовидящих не показывается. ";}
/* Легенда цветов бессмысленна там, где карты нет. */
body.a11y .map-legend{display:none}

body.a11y[data-scheme="bw"] {--paper:#fff;--field:#fff;--band:#fff;--ice-deep:#fff;--ink:#000;--ink-soft:#000;--water:#000;--deep:#000;--epicenter:#000}
body.a11y[data-scheme="wb"] {--paper:#000;--field:#000;--band:#000;--ice-deep:#000;--ink:#fff;--ink-soft:#fff;--water:#fff;--deep:#fff;--epicenter:#fff}
body.a11y[data-scheme="bb"] {--paper:#9DD1FF;--field:#9DD1FF;--band:#9DD1FF;--ice-deep:#9DD1FF;--ink:#063462;--ink-soft:#063462;--water:#063462;--deep:#063462;--epicenter:#063462}

body.a11y[data-size="m"]{font-size:22px}
body.a11y[data-size="l"]{font-size:28px}

/* Кегль в этой версии задаёт только переключатель размера. Собственные
   размеры в пикселях его не слышали: «крупный шрифт» менял один body, а
   заголовки, таблицы, меню и подписи оставались прежними — переключатель
   почти ничего не делал. Поэтому здесь всё пересчитано долями от базового
   кегля: иерархия та же, что в обычной версии, но растёт вместе с
   выбором посетителя. */
body.a11y h1{font-size:clamp(1.7em,5.2vw,2.35em)}
body.a11y h2{font-size:clamp(1.2em,3vw,1.47em)}
body.a11y h3{font-size:1em}
body.a11y .lead{font-size:1.09em}
body.a11y h1 + .lead{font-size:1.12em}
body.a11y .subnav{font-size:.91em}
body.a11y .facts dt{font-size:.76em}
body.a11y .facts dd{font-size:1.47em}
body.a11y .facts div:first-child dd{font-size:2em}
body.a11y .facts dd small{font-size:.56em}
body.a11y .map-note,body.a11y .map-tabs button{font-size:.82em}
body.a11y .map-key,body.a11y .felt-head,body.a11y .felt-km{font-size:.76em}
body.a11y .felt-name{font-size:.91em}
body.a11y table.data{font-size:.88em}
body.a11y table.data th{font-size:.9em}
body.a11y table.cards td::before{font-size:.86em}
body.a11y table.cards td:first-child{font-size:1.07em}
body.a11y figure.chart figcaption{font-size:.79em}
body.a11y label,body.a11y .small,body.a11y footer,
body.a11y .a11y-toggle{font-size:.82em}
body.a11y input,body.a11y select,body.a11y textarea{font-size:.94em}
body.a11y button[type=submit],body.a11y details.filters > summary,
body.a11y .take-go,body.a11y .warn{font-size:.88em}
body.a11y .take b{font-size:.94em}
body.a11y .take p{font-size:.85em}
body.a11y .prose h2{font-size:1.29em}
body.a11y .prose h3,body.a11y .prose h4{font-size:1.03em}
body.a11y .prose table{font-size:.88em}
body.a11y .top b{font-size:.94em}
body.a11y .top nav a,body.a11y .nav-more summary,
body.a11y .nav-extra a{font-size:.88em}
body.a11y .a11y-bar{font-size:.94em}
/* На крупном кегле длинные слова научного текста («сейсмометрических»,
   «представительности») шире экрана телефона — разрешаем перенос,
   иначе вся страница уезжает вбок. Свойство наследуемое, поэтому одного
   правила на body хватает. */
body.a11y{overflow-wrap:break-word}
body.a11y[data-noimg] img{display:none}
body.a11y[data-noimg] .prose img{display:none}

.a11y-bar{display:none;border-bottom:2px solid currentColor;background:var(--paper);
  padding:10px 0;font-size:16px}
body.a11y .a11y-bar{display:block}
.a11y-bar .wrap{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
/* Кнопки схем длинные («Чёрным по белому»), и в один ряд на телефоне они
   не влезали — панель настроек уезжала за край с боковой прокруткой.
   На крупном кегле тем более. Разрешаем переносить. */
.a11y-bar fieldset{border:0;margin:0;padding:0;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.a11y-bar legend{float:left;margin-right:8px;padding:0}
.a11y-bar button{font:inherit;background:var(--paper);color:var(--ink);
  border:2px solid currentColor;border-radius:3px;padding:4px 12px;cursor:pointer;line-height:1.2}
.a11y-bar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.a11y-toggle{font:inherit;font-size:14px;background:none;border:0;padding:0;
  color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.a11y-toggle:hover{color:var(--water)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:8px 14px;background:var(--paper)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}