/* ======================================================================
 * МУЗЕЙНЫЙ РАЗДЕЛ m1kle.ru — оформление.
 * Собрано начисто 16 августа 2026 года по своду вида:
 * /home/httpd/data/m1kle-dokumenty/MUSEUMS-VID.md
 *
 * Величины отсюда не берутся на глаз. Кегль — из восьми, отступ — из
 * девяти, цвет — из палитры, линия — один пиксель. Если правке нужна
 * величина, которой в своде нет, сначала правится свод.
 *
 * Прежний файл рос слоями и к 16 августа держал 3 семейства шрифтов,
 * 23 кегля, 64 цвета, 348 правил, 9 !important и двенадцать селекторов,
 * описанных по два-пять раз. Здесь каждый селектор описан один раз,
 * !important нет ни одного.
 *
 * Порядок разделов:
 *   1 шрифты · 2 начала · 3 основа · 4 каркас · 5 общее · 6 афиша
 *   7 отбор · 8 карточка · 9 таблица · 10 закрытые · 11 низ
 *   12 бок · 13 снимок · 14 формы · 15 узкий экран · 16 печать
 * ====================================================================== */


/* ---------------------------------------------------------------- 1 *
 * ШРИФТЫ. Свои, лежат у нас, ничего не грузится со стороны.
 * Переменные по весу, без оси оптического размера: с нею русская
 * страница тянула 317 КБ вместо 154.
 * -------------------------------------------------------------------- */

@font-face { font-family: 'Serif'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-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: 'Serif'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Serif'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Serif'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-i-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: 'Serif'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-i-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Serif'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url(/fonts/serif-i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(/fonts/inter-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: 'Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ---------------------------------------------------------------- 2 *
 * НАЧАЛА. Вся палитра и все ряды величин — здесь и больше нигде.
 * Цвета считаны в OKLCH и проверены на контраст; числа — в своде.
 * -------------------------------------------------------------------- */

:root {
    /* нейтральные */
    --paper:     #FEFCF9;
    --ink:   #27221D;
    --secondary: #5F5A55;
    --muted: #746F6B;
    --faint:      #A7A4A1;
    --frame:      #CFCBC7;
    --rule:     #E2DFDB;

    /* шкала музейной ценности: кармин → серый */
    --rating5: #8D1A1E;
    --rating4: #8A4432;
    --rating3: #84604D;
    --rating2: #857467;
    --rating1: #8B857F;

    /* три тона: кармин 25° · зелень 155° · синь 250° */
    /* Золото — цвет отличия: звезда при вещи и знак «недооценённый».
       Отдельно от шкалы (кармин), состояния (зелень) и ссылки (синь);
       по кругу стоит между кармином и зеленью и замыкает набор. */
    --gold:     #976800;
    /* ЦВЕТ МАРКИ — и только марки. Он не участвует ни в шкале, ни
       в состояниях, ни в ссылках, и на странице не встречается нигде:
       им набран знак в шапке, значок вкладки, обложка и подпись писем.
       Взят из единственного широкого промежутка круга (250°→25°, 135°),
       то есть там, где смысловых цветов нет; oklch(0.470 0.190 312),
       контраст к бумаге 7,4:1. Решение владельца 17 августа 2026 года:
       у марки может быть свой цвет, у полосы набора — нет. */
    --brand:      #7D2BA5;
    --link:     #2A4765;
    --link-nav: #0D2F4F;
    --open:     #2B6241;
    --access:   #4E775C;
    --urgent:    #952922;

    /* шрифты */
    --font-text: 'Serif', Georgia, 'Times New Roman', serif;
    --font-ui: 'Sans', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* полоса и столбцы */
    --width: 1240px;
    --masthead-h: 76px;   /* высота липкой шапки: от неё считается бок и якоря */
    --gutter: 40px;
    --aside-w: 260px;
    --gap: 48px;
    /* Предел строки прозы. 34em — книжная мера, но столбец содержания
       у нас 852 точки, и проза оставляла справа двести сорок точек пустоты
       на всю высоту карточки. 42em (756) заполняют столбец, оставляя поле
       в девяносто точек, а не пустое место. Рядом со снимком строка и так
       короче — там режет поплавок. */
    --prose: 42em;

    /* Печать: чернила чёрные, бумага белая — краски принтера
       и краски экрана это разные краски. */
    --print-ink: #000;
    --print-paper: #fff;
    --print-grey: #444;
}


/* ---------------------------------------------------------------- 3 *
 * ОСНОВА
 * -------------------------------------------------------------------- */

html { background: var(--paper); scroll-padding-top: calc(var(--masthead-h) + 16px); }

body {
    margin: 0;
    /* Страховка от горизонтальной прокрутки: `clip`, а не `hidden`, —
       `hidden` создал бы прокручиваемую область и сломал липкую шапку. */
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font: 400 18px/1.62 var(--font-text);
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 600; }
i, em, cite { font-style: italic; }

/* Цифры сравниваются столбцом — значит, одной ширины. */
time, .mus-hours, .mus-checked, .mus-list td { font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------- 4 *
 * КАРКАС. Одна полоса, одна левая вертикаль, два столбца.
 * -------------------------------------------------------------------- */

.mus-top,
.mus-columns,
.mus-footer {
    box-sizing: border-box;
    max-width: var(--width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.mus-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    gap: 0 var(--gap);
    align-items: start;
}
.mus { min-width: 0; }

/* Боковая колонка идёт с читателем. Липкость — на самом столбце:
   врезка внутри столбца никуда не поедет, столбец ровно её высоты. */
.mus-aside-col {
    position: sticky;
    top: calc(var(--masthead-h) + 24px);
    min-width: 0;
    border-left: 1px solid var(--rule);
    padding-left: 24px;
}

/* --- ШАПКА ---
   Пересобрана 17 августа 2026 года. Четыре флага с названиями языков
   занимали треть полосы и спрашивали читателя о том, что он и так знает;
   на их месте встали выбор города (вместе с отказом от выбора)
   и открытая методика. Языки свёрнуты в две буквы и флаг. */
.mus-top__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px 32px;
    padding: 16px 0;
}
/* Правая группа прижимается к краю, а не болтается: у неё свой столбец. */
.mus-top__row > .mus-top__right { justify-self: end; }

/* Марка: знак и имя. Имя набрано антиквой строчными — это ИМЯ, а не
   подпись издания: прописные с разрядкой (как прежнее «МУЗЕИ») говорят
   «издание», строчные с прописной говорят «нас так зовут».
   Цвет марки живёт только здесь и больше нигде на странице. */
.mus-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
    border: 0;
    white-space: nowrap;
}
/* Знак выравнен по прописной имени, а не по строке: прописная — то, что глаз
   считает высотой слова. 38 при кегле 27 — это 1,4 прописной, та же доля,
   что в собранном замке (znak/instrument/logotip.js). */
.mus-brand__badge { display: block; height: 38px; width: 38px; flex: 0 0 auto; }
/* Отбивка та же, что в замке: 8 тысячных кегля. Не «на глаз похоже»,
   а то же число. */
.mus-brand__name { font: 400 27px/1 var(--font-text); letter-spacing: .008em; }
.mus-brand:hover { color: var(--link-nav); }

/* Где я смотрю: весь каталог или один город. «Все музеи» стоит ссылкой
   всегда, даже когда город один: каталог целиком — это не выбор города,
   а отказ от него, и прятать его в выпадающее было бы неверно. */
.mus-top__where {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--muted);
}
.mus-top__all { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.mus-top__all:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mus-top__all--current { color: var(--ink); border-bottom-color: var(--ink); }

/* Три группы, а не четыре части. `space-between` над четырьмя предметами
   растаскивает их неравными промежутками, и полоса читается рваной; над
   тремя — раскладывает сам. Слева кто мы и где смотрим, посередине поиск,
   справа доверие и язык. */
.mus-top__left  { display: inline-flex; align-items: center; gap: 24px; min-width: 0; }
.mus-top__right { display: inline-flex; align-items: center; gap: 20px; }
.mus-top__how {
    font: 400 13px/1.4 var(--font-ui);
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.mus-top__how:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- ВЫПАДАЮЩИЙ ВЫБОР (город, язык) ---
   Родной `details`: ни строки сценариев, работает пальцем, мышью
   и с клавиатуры одинаково. Общее имя у нескольких `details` заставляет
   браузер держать открытым не больше одного; там, где имя ещё не понимают,
   поля просто лягут одно на другое — они выровнены по одному краю. */
/* Указатель «открывается» — значок из общего набора, а не треугольник
   на границах: тот собирается из трёх линий по четыре пикселя, а свод
   знает одну линию — в единицу. Мельче прочих значков: он не сведение,
   а подсказка о том, что здесь можно нажать. */
.mus-arrow { width: 11px; height: 11px; }
.mus-picker { position: relative; display: inline-block; }
.mus-picker__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
/* Свой указатель вместо треугольника браузера: тот рисуется по-разному
   в каждом и в двух из трёх не берёт наш цвет. */
.mus-picker__title::-webkit-details-marker { display: none; }
.mus-picker__title:hover { color: var(--ink); }
.mus-picker__current { border-bottom: 1px solid var(--rule); }
.mus-picker__title:hover .mus-picker__current { border-bottom-color: var(--ink); }
.mus-picker__field {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 40;
    min-width: 200px;
    max-width: 320px;
    /* Заливка у всплывающего поля обязательна: без неё сквозь него виден
       текст страницы. Это второе место после выбранной кнопки отбора,
       где заливка допущена, и оно названо в своде вида. */
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 8px 0;
}
.mus-picker--city .mus-picker__field { left: 0; }
.mus-picker--lang .mus-picker__field { right: 0; }
.mus-picker__heading {
    font: 400 11px/1.4 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 16px 4px;
}
.mus-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--secondary);
    text-decoration: none;
    border: 0;
}
.mus-picker__item:hover { color: var(--ink); }
.mus-picker__item--current { color: var(--ink); }
.mus-picker__item--none { color: var(--faint); cursor: default; }
.mus-picker__item--none .mus-flag { opacity: .4; }
.mus-picker__count { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.mus-picker__none { margin-left: auto; font-size: 11px; }
.mus-flag { display: block; border: 1px solid rgba(39, 34, 29, .15); }

/* Рубеж между шапкой и содержанием. */
/* Шапка идёт с читателем. Полоса во всю ширину экрана, а не только
   по полосе набора: иначе содержимое уезжает под неё по краям. */
.mus-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    margin-bottom: 32px;
}

/* Очередь кабинета: таблица, в которой работают, а не читают. Строка
   подсвечивается под курсором — глазу надо за что-то держаться, когда
   строк шесть десятков и в каждой правится дата. Поля дат набраны тем же
   служебным начертанием, что и вся таблица: разнобой шрифтов в рабочем
   списке утомляет быстрее длины. */
.mus-queue td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.mus-queue tr:hover td { background: rgba(39, 34, 29, .035); }
.mus-queue input[type=date],
.mus-queue input[type=number] {
    font: 400 13px/1.3 var(--font-ui);
    padding: 3px 5px;
    border: 1px solid var(--frame);
    background: var(--paper);
    color: var(--ink);
}
.mus-queue input[type=checkbox] { width: 18px; height: 18px; }
.mus-queue__edit { font: 400 11px/1.4 var(--font-ui); color: var(--muted); white-space: nowrap; }
/* Ширины столбцов заданы, иначе название — самое важное в очереди — сжимается
   до трёх слов на строку, а поля дат растягиваются впустую. */
.mus-queue { table-layout: fixed; width: 100%; }
.mus-queue th:first-child, .mus-queue td:first-child { width: 3.5em; }
.mus-queue__museum { width: 15em; font-size: 13px; line-height: 1.4; }
/* В очереди оценка — это квадраты, и только они: слово «мирового значения»
   не переносится и вылезает в столбец названия. На странице музея слово
   остаётся, там ему есть место. */
.mus-queue .mus-rating__word { display: none; }
.mus-queue th:nth-child(4), .mus-queue td:nth-child(4),
.mus-queue th:nth-child(5), .mus-queue td:nth-child(5) { width: 9.5em; }
.mus-queue th:nth-child(6), .mus-queue td:nth-child(6) { width: 4.5em; }
.mus-queue th:last-child, .mus-queue td:last-child { width: 7em; }

/* --- подвал --- */
.mus-footer {
    margin-top: 64px;
    padding-top: 16px;
    padding-bottom: 32px;
    border-top: 1px solid var(--rule);
    font: 400 13px/1.6 var(--font-ui);
    color: var(--muted);
}
.mus-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.mus-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Ленты: слово и рядом два имени стандартов. Пробел между ними неразрывный
   и узкий — «Atom JSON» через обычный пробел на узком экране переносится
   так, что «JSON» уезжает на свою строку и читается отдельным разделом. */
.mus-footer__feed { white-space: nowrap; }
.mus-footer__feed a + a { margin-left: 8px; }
/* Что значит имя. Один раз, внизу, мелко: имя у нас не из общего обихода,
   и человек имеет право узнать его смысл, не выходя со страницы.
   В остальном имя не переводится и не склоняется. */
.mus-footer__name { color: var(--faint); max-width: var(--prose); margin-bottom: 8px; }


/* ---------------------------------------------------------------- 5 *
 * ОБЩЕЕ: четыре роли ссылки, служебные подписи, знаки, оценка.
 * Под курсором меняется только цвет — коробка не дёргается никогда.
 * -------------------------------------------------------------------- */

/* Роль 1 — ссылка в прозе. */
.mus a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color .12s ease, border-color .12s ease;
}
.mus a:hover, .mus a:focus-visible { color: var(--link-nav); }

/* Роль 2 — ссылка-заголовок: имя музея, имя выставки. */
.mus-card__title a, .mus-hero__title a, .mus-exhibition__title a, .mus-closed__title a {
    color: var(--ink);
    border-bottom-color: var(--rule);
}
.mus-card__title a:hover, .mus-hero__title a:hover, .mus-exhibition__title a:hover, .mus-closed__title a:hover,
.mus-card__title a:focus-visible, .mus-hero__title a:focus-visible,
.mus-exhibition__title a:focus-visible, .mus-closed__title a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Роль 4 — служебная ссылка. */
.mus-crumbs a, .mus-card__rubric a, .mus-card__source a, .mus-checked a,
.mus-masthead__switch a, .mus-whatson__caption a, .mus-exhibition__where a, .mus-hero__where a,
.mus-filter__total a {
    color: var(--muted);
    border-bottom-color: var(--rule);
}
.mus-crumbs a:hover, .mus-card__rubric a:hover, .mus-card__source a:hover,
.mus-checked a:hover, .mus-masthead__switch a:hover, .mus-whatson__caption a:hover,
.mus-exhibition__where a:hover, .mus-hero__where a:hover,
.mus-filter__total a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Служебная подпись — единственный вид прописных в тексте. */
.mus-section__title, .mus-block__title, .mus-filter__title, .mus-crumbs, .mus-card__rubric,
.mus-whatson__title, .mus-aside__title, .mus-list th {
    font: 500 11px/1.4 var(--font-ui);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.mus-whatson__title, .mus-section__title { color: var(--ink); letter-spacing: .22em; }

.mus-dot { color: var(--faint); padding: 0 3px; }

/* Заголовок страницы и вступление. */
.mus-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
    margin-bottom: 12px;
}
.mus h1 { font: 400 clamp(27px, 3vw, 36px)/1.15 var(--font-text); letter-spacing: -.012em; max-width: 20em; }
.mus-masthead__switch { font: 400 13px/1.5 var(--font-ui); color: var(--muted); }
.mus__intro { max-width: var(--prose); margin: 0 0 32px; }

.mus-crumbs { margin-bottom: 16px; }

/* Оценка: цвет носят только знаки, слово — служебным серым. */
.mus-rating { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mus-scale { display: inline-flex; gap: 3px; }
.mus-scale i { width: 7px; height: 7px; display: block; border: 1px solid var(--rule); }
.mus-scale i.e { background: currentColor; border-color: currentColor; }
.mus-rating__word {
    font: 400 11px/1 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.mus-rating--5 { color: var(--rating5); } .mus-rating--4 { color: var(--rating4); }
.mus-rating--3 { color: var(--rating3); } .mus-rating--2 { color: var(--rating2); }
.mus-rating--1 { color: var(--rating1); }


/* ---------------------------------------------------------------- 6 *
 * АФИША. Главная выставка слева крупно, четыре остальные — узким
 * столбцом справа, как дайджест в газете.
 * -------------------------------------------------------------------- */

.mus-whatson { margin: 0 0 48px; }
.mus-whatson--lead { border-top: 1px solid var(--ink); padding-top: 16px; }
.mus-whatson__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
    margin-bottom: 24px;
}
.mus-whatson__caption { font: 400 13px/1.4 var(--font-ui); color: var(--muted); }

.mus-whatson__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 var(--gap); align-items: start; }

.mus-hero__photo { margin: 0 0 16px; }
.mus-hero__photo img { display: block; width: 100%; }
.mus-hero__dates, .mus-exhibition__dates {
    font: 400 11px/1.4 var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.mus-hero__title { font: 400 clamp(24px, 2.6vw, 36px)/1.12 var(--font-text); letter-spacing: -.012em; margin: 8px 0 6px; }
.mus-hero__where, .mus-exhibition__where { font: 400 13px/1.45 var(--font-ui); color: var(--muted); }
.mus-hero__about { font: 400 15px/1.55 var(--font-text); color: var(--secondary); margin: 12px 0 0; max-width: var(--prose); }

.mus-hero { min-width: 0; }
.mus-whatson__archive { margin-top: 8px; }
.mus-whatson__grid { display: grid; grid-template-columns: 1fr; }
/* Годной для главного места выставки нет — блок идёт одной сеткой во всю
   ширину, а не половиной с пустотой слева. */
.mus-whatson__body--nolead { grid-template-columns: minmax(0, 1fr); }
.mus-exhibition { border-top: 1px solid var(--rule); padding: 12px 0; }
.mus-exhibition:first-child { border-top: 0; padding-top: 0; }

/* Выставка в сетке афиши со снимком. По ДНК афиша — визуальный акцент
   страницы, «после неё должно хотеться пойти немедленно»; голым текстом
   этого не бывает. Снимок стоит слева узкой колонкой, а не сверху во всю
   ширину: сверху он оттеснил бы даты и название на второй экран, а в афише
   первым читают именно даты. */
.mus-exhibition--card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
}
.mus-exhibition--card .mus-exhibition__photo { grid-row: 1 / span 4; }
.mus-exhibition--card .mus-exhibition__dates,
.mus-exhibition--card .mus-exhibition__title,
.mus-exhibition--card .mus-exhibition__where,
.mus-exhibition--card .mus-exhibition__about { grid-column: 2; }
.mus-exhibition__photo { margin: 0; }
.mus-exhibition__source {
    font: 400 10px/1.35 var(--font-ui);
    color: var(--faint);
    margin-top: 4px;
    max-width: 116px;
    /* Подпись о подмене длиннее имени фотографа и обязана поместиться
       целиком: обрезанное «на снимке музей, а не...» хуже, чем её отсутствие. */
    overflow-wrap: break-word;
}
.mus-exhibition__photo img {
    display: block; width: 116px; height: 84px;
    object-fit: cover;
    /* Тонкая рамка, а не тень: тень — чужой приём, здесь всё держится
       на линии в одну точку. */
    border: 1px solid var(--rule);
}
/* Снимка нет — колонка не оставляется пустой: сетка сама сходится в одну. */
.mus-exhibition--card:not(:has(.mus-exhibition__photo)) { grid-template-columns: minmax(0, 1fr); }
.mus-exhibition--card:not(:has(.mus-exhibition__photo)) .mus-exhibition__dates,
.mus-exhibition--card:not(:has(.mus-exhibition__photo)) .mus-exhibition__title,
.mus-exhibition--card:not(:has(.mus-exhibition__photo)) .mus-exhibition__where,
.mus-exhibition--card:not(:has(.mus-exhibition__photo)) .mus-exhibition__about { grid-column: 1; }
.mus-exhibition__title { font: 400 18px/1.28 var(--font-text); margin: 6px 0 4px; overflow-wrap: break-word; }
.mus-exhibition__about { font: 400 15px/1.5 var(--font-text); color: var(--secondary); margin: 6px 0 0; }
.mus-exhibition__soon { color: var(--urgent); }
.mus-exhibition__archive { color: var(--faint); }

/* Строкой: даты слева столбцом, запись справа. Так набран весь список
   выставок и выставки внутри карточки музея. */
.mus-exhibition--line { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 0 24px; align-items: baseline; }
.mus-exhibition--line .mus-exhibition__title { margin-top: 0; }
.mus-onview { margin-top: 24px; }


/* ---------------------------------------------------------------- 7 *
 * ОТБОР. Каждая строка — вопрос, который задаёт себе читатель.
 * -------------------------------------------------------------------- */

/* Отбор занимал семь рядов кнопок и был выше первой карточки. Теперь
   это одна строка вопросов: список возможностей свёрнут, сделанный выбор
   виден не открывая. Блок стоит `relative` — от него отсчитываются
   всплывающие поля, и потому они всегда выровнены по одному краю, как бы
   ни переносилась сама строка. */
.mus-filter { margin: 0 0 32px; border-top: 1px solid var(--rule); }
/* Точка отсчёта для всплывающих полей — СТОЛБЕЦ КНОПОК, а не весь ряд.
   Отсчёт от ряда стоял здесь до 18 августа, и это было видно: ряд начинается
   с подписи «Отбор», поэтому поле открывалось под подписью, в стороне
   от кнопки, которую нажали, и тянулось во всю ширину страницы. Владелец:
   «Вёрстка там местами внутри поехала в фильтрах».

   Отсчёт от столбца, а не от каждого вопроса в отдельности: поля тогда
   открывались бы в разных местах и у правого края вылезали бы за экран,
   а горизонтальная прокрутка запрещена сводом при любой ширине от 320 точек. */
.mus-filter__row {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: 0 24px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}
.mus-filter__title { padding-top: 6px; }
.mus-filter__choice { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* --- ОДИН ВОПРОС ОТБОРА --- */
.mus-facet { display: inline-block; }
/* Орган отбора должен выглядеть органом. Прежде вопрос был подчёркнутым
   словом высотой в строку: попасть по нему пальцем трудно, а на органе
   управления это первое требование. Теперь у него та же рамка и те же поля,
   что у кнопки отбора рядом, — цель выросла втрое, и ряд читается одним
   набором, а не словами вперемешку с кнопками. */
.mus-facet__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--frame);
    font: 400 13px/1.3 var(--font-ui);
    color: var(--secondary);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease;
}
.mus-facet__title::-webkit-details-marker { display: none; }
.mus-facet__title:hover, .mus-facet__title:focus-visible { color: var(--ink); border-color: var(--ink); }
.mus-facet--on > .mus-facet__title { border-color: var(--ink); }
/* Открытый вопрос — та же заливка, что у выбранной кнопки: открыт и выбран
   это разные состояния, но оба «сейчас действует», и вид у них один. */
.mus-facet[open] > .mus-facet__title { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Выбранное — чернилами и рядом с вопросом. Это условие, при котором
   сворачивание вообще допустимо: прячется список возможностей,
   а не сделанный выбор. */
.mus-facet__value { color: var(--ink); }
.mus-facet[open] > .mus-facet__title .mus-facet__value { color: var(--paper); }
.mus-facet__field {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: 100%;
    max-width: 34em;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Возраст ребёнка: готовые ступени и поле для своего числа, одной строкой.
   Ступени берут того, кто выбирает пальцем на ходу; поле — того, у кого
   ребёнку девять, а ступени в девять нет. Оба органа стоят рядом и оба
   работают без единой строки сценария. */
.mus-facet__age {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.mus-facet__age-title {
    font: 400 11px/1.4 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.mus-facet__form { display: flex; align-items: center; gap: 0; }
.mus-facet__form input {
    width: 5em;
    padding: 6px 10px;
    border: 1px solid var(--frame);
    border-right: 0;
    background: var(--paper);
    font: 400 13px/1.3 var(--font-ui);
    color: var(--ink);
}
.mus-facet__form input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mus-facet__form button {
    appearance: none;
    padding: 6px 12px;
    border: 1px solid var(--frame);
    background: none;
    font: 400 13px/1.3 var(--font-ui);
    color: var(--secondary);
    cursor: pointer;
}
.mus-facet__form button:hover { color: var(--ink); border-color: var(--ink); }
.mus-facet__caption {
    flex-basis: 100%;
    max-width: var(--prose);
    font: 400 13px/1.5 var(--font-ui);
    color: var(--faint);
}
/* Шкала в поле выбора набрана так же, как шкала внизу страницы:
   одна вещь — один вид, иначе читатель решит, что это две разные шкалы. */
.mus-facet__scale { display: flex; flex-direction: column; gap: 4px; flex-basis: 100%; }
.mus-facet__line { display: flex; align-items: baseline; gap: 16px; }
.mus-facet__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--secondary);
    text-decoration: none;
    border: 0;
    padding: 4px 0;
}
/* Вес селектора: правило «.mus a» весит больше одного класса и тянет сюда
   подчёркивание. Строке отбора оно не нужно — в поле выбора все строки
   суть ссылки, и подчёркивать каждую значит подчеркнуть всё поле. */
.mus a.mus-facet__item { border-bottom: 0; }
.mus-facet__item:hover { color: var(--ink); }
.mus-facet__item--on { color: var(--ink); }
/* Знак и пояснение к нему — В ДВЕ СТРОКИ, а не в два столбца.
   Столбцами это стояло до 18 августа: знак слева, пояснение справа, оба
   в общей строке `flex`. Пояснения у знаков разной длины, и в узком поле
   правый столбец сжимался до двух слов в строку — «Собранию / нет / аналога».
   Владелец назвал это «вёрстка поехала внутри», и он прав: сетка,
   у которой ширина столбца зависит от длины соседа, — не сетка. */
.mus-facet__item--badge { display: block; flex-basis: 100%; padding: 6px 0; }
.mus-facet__item-title { display: block; }
.mus-facet__item-caption { display: block; margin-top: 2px; max-width: var(--prose); color: var(--faint); }
.mus-facet__above {
    margin-left: auto;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.mus-facet__above:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* У верхней ступени «и выше» не бывает — место под него остаётся,
   чтобы столбец не съезжал. */
.mus-facet__above--none { border-bottom: 0; min-width: 4em; }

/* Вес селектора важен: правило «.mus a» весит больше одного класса
   и без этого перекрашивало кнопку в цвет ссылки. */
.mus .mus-pill {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--frame);
    color: var(--secondary);
    font: 400 13px/1.3 var(--font-ui);
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.mus a.mus-pill:hover, .mus a.mus-pill:focus-visible { color: var(--ink); border-color: var(--ink); }
.mus .mus-pill--on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mus .mus-pill--day { min-width: 3.2em; text-align: center; }
/* Готовая ступень возраста. Ширины ей не назначено нарочно: «4 года»
   и «12 лет» разной длины, и равнять их значило бы разгонять пробелами
   то, что и так читается рядом. */
.mus .mus-pill--years { white-space: nowrap; }
/* «Бывает бесплатно» — вопрос без списка: у него один ответ, и меню
   из одной строки было бы притворством. Прямая кнопка в общем ряду. */
.mus .mus-pill--free { padding: 6px 12px; }
/* «Сейчас» и «сегодня» стоят перед рядом дней и отделены от него отступом:
   это не восьмой и девятый день недели, а короткие пути к одному из семи.
   Порядок — от самого срочного к самому дальнему. */
.mus .mus-pill--now  { border-color: var(--secondary); }
.mus .mus-pill--today { margin-right: 8px; border-color: var(--secondary); }

/* Итог стоит во втором столбце того же ряда — сетка держит его на месте
   сама. Прежде здесь был отступ «8em плюс 24», списанный с ширины столбца
   подписей: два числа в двух местах, и совпадали они только пока о них
   помнили. Последний ряд без нижней черты: он подводит итог, а не открывает
   следующий. */
.mus-filter__row--total { border-bottom: 0; padding-top: 12px; }
.mus-filter__total {
    font: 400 13px/1.5 var(--font-ui);
    color: var(--muted);
    display: block;
}
.mus-filter__total b { color: var(--ink); font-weight: 400; }
/* Оговорка к отбору по времени: как именно мы считаем. Печатается
   только когда отбор включён — правило нужно там, где оно работает. */
.mus-filter__caption { display: block; margin-top: 6px; max-width: var(--prose); color: var(--faint); }

/* Значок «купить билет» — рядом с ценой, как булавка рядом с адресом.
   Тот же класс, что у карты: одно действие — один вид, и оба ведут
   наружу. Отдельным классом только сдвиг по вертикали: билет рисуется
   шире карты и на строке сидит иначе. */
.mus .mus-ticket { vertical-align: -5px; }

/* Цитата из чужих условий — в кабинете, и только там. Набирается моноширинным
   нарочно: это не наш текст, а выписка, и глаз должен видеть разницу
   с первого взгляда. Пересказ чужого разрешения своими словами — уже
   не разрешение. */
.mus-quote {
    margin: 8px 0 12px;
    padding: 10px 14px;
    border-left: 2px solid var(--frame);
    font: 400 13px/1.6 var(--font-ui);
    color: var(--secondary);
    background: rgba(39, 34, 29, .025);
    max-width: var(--prose);
}

/* Поиск живёт в верхней полосе раздела, рядом с именем и языками.
   Поле сжато: это не главный предмет страницы, а способ дойти до музея,
   имя которого человек уже знает. */
.mus-search { display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 1 auto; }
.mus-search input[type=text], .mus-search input[type=search] {
    font: 400 15px/1.4 var(--font-text);
    color: var(--ink);
    background: var(--paper);
    padding: 5px 10px;
    border: 1px solid var(--frame);
    width: 14em;
    max-width: 100%;
    box-sizing: border-box;
}
.mus-search input:focus { outline: none; border-color: var(--ink); }
.mus-search button {
    font: 400 13px/1.3 var(--font-ui);
    padding: 6px 16px;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.mus-search button:hover { background: var(--ink); color: var(--paper); }


/* ---------------------------------------------------------------- 8 *
 * КАРТОЧКА МУЗЕЯ.
 * Вверху — что это и чего стоит; посередине — почему именно он;
 * ниже — что смотреть и как попасть; в самом низу мелким — служебное.
 * -------------------------------------------------------------------- */

.mus-card { position: relative; border-top: 1px solid var(--ink); padding-top: 16px; margin: 0 0 48px; }
.mus-card--closed { border-top-color: var(--frame); }

/* На странице музея оценка стоит под названием, а не справа: со знаком
   «недооценённый» она перестаёт помещаться в строку заголовка и от ширины
   имени начинает прыгать то вправо, то вниз. В списке она справа —
   там из неё складывается столбец, по которому список и просматривают. */
.mus-card--full .mus-card__top { display: block; }
.mus-card--full .mus-card__right { margin-top: 12px; }

.mus-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 32px;
    margin-bottom: 16px;
}
.mus-card__left { flex: 1 1 22em; min-width: 0; }
.mus-card__right { flex: 0 0 auto; }
.mus-card__rubric { margin-bottom: 6px; }
/* Город в рубрике — только в каталоге, где рядом стоят музеи разных стран.
   Чернилами, а не служебным серым: в каталоге это первое, что читатель
   ищет глазами, и служебный цвет спрятал бы его среди подписей. */
.mus-card__city { color: var(--ink); }
/* На странице музея служебная строка несёт и кнопку «скопировать»:
   рубрика слева, кнопка справа, обе одного кегля и одного веса. */
.mus-card--full .mus-card__rubric {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.mus-card__title { font: 400 clamp(22px, 2.2vw, 27px)/1.2 var(--font-text); letter-spacing: -.01em; max-width: 20em; }
.mus-card__original { font: 400 13px/1.45 var(--font-ui); color: var(--muted); margin-top: 6px; }

/* Почему именно этот музей — наш голос. Набирается иначе всего прочего:
   курсивом, крупнее прозы, со знаком на поле. Ни рамки, ни заливки. */
.mus-why {
    position: relative;
    margin: 0 0 24px;
    max-width: var(--prose);
    font: 400 21px/1.5 var(--font-text);
    font-style: italic;
    color: var(--ink);
}
/* Знак идёт в самой строке, а не на поле: рядом стоит обтекаемый снимок,
   а обтекание укорачивает строки, не сдвигая саму коробку, — знак на поле
   попал бы под снимок. */
.mus-why__badge {
    float: left;
    margin: 3px 10px 0 0;
    width: 21px;
    height: 21px;
    border: 1px solid var(--frame);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 400 13px/1 var(--font-text);
    font-style: normal;
    color: var(--muted);
}
.mus-why p { margin: 0 0 8px; }

/* Подпись блока не подлезает под снимок: её линия иначе уходит вправо
   под него. Длинное — расписание, справка, поля — сходит вниз, на полную
   ширину: таблице в обрезанной строке тесно. */
.mus-card__body .mus-block__title, .mus-card__body .mus-note > summary { display: flow-root; }
/* Расписание маршрута помещается рядом со снимком; вниз сходит только то,
   чему рядом тесно. */
.mus-note, .mus-reading, .mus-reviews, .mus-fields { clear: right; }

/* Тело карточки — один столбец с обтеканием. Два столбца кончаются
   в разных местах, и под коротким остаётся пустота во всю высоту карточки.
   Практические поля идут в две колонки: они короткие, и в одну растягивают
   страницу вниз пустыми правыми половинами строк. */
.mus-card__body { display: block; }
.mus-card__body::after { content: ''; display: block; clear: both; }
.mus-fields { columns: 2; column-gap: var(--gap); }
/* Внутри колонки подпись стоит НАД значением: на четырёхстах точках
   подпись и значение рядом не помещаются, и значение рвётся на каждом слове. */
.mus-fields .mus-field { break-inside: avoid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; padding: 10px 0; }
.mus-fields .mus-field__title { line-height: 1.5; }
.mus-fields .mus-field:first-child { border-top: 0; }
.mus-fields .mus-hours { max-width: none; }

.mus-photo { margin: 0; position: relative; display: block; }
/* <picture> — лишний слой в дереве: без этого правила снимок теряет
   ширину столбца и садится по своему естественному размеру. */
.mus-photo picture { display: block; }
.mus-photo img { display: block; width: 100%; }
.mus-photo__zoom { display: block; position: relative; border: 0; cursor: zoom-in; }
.mus-photo__zoom:hover, .mus-photo__zoom:focus-visible { border: 0; }
.mus-photo__badge {
    position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); border: 1px solid var(--ink);
    font: 400 13px/1 var(--font-ui); color: var(--muted);
    opacity: .85; transition: opacity .16s ease, color .16s ease;
}
.mus-photo__zoom:hover .mus-photo__badge,
.mus-photo__zoom:focus-visible .mus-photo__badge { opacity: 1; color: var(--ink); }

.mus-card__source { font: 400 11px/1.5 var(--font-ui); color: var(--muted); margin: 8px 0 0; }

/* Блок карточки. */
.mus-block { margin: 0 0 24px; }
.mus-block__title { border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 12px; }
.mus-kernel { font: 400 18px/1.6 var(--font-text); margin: 0 0 12px; max-width: var(--prose); }
.mus-kernel i { color: var(--ink); }

.mus-route { border-left: 1px solid var(--rule); padding-left: 16px; margin: 12px 0 0; max-width: var(--prose); }
.mus-route__title { font: 500 11px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mus-route__title span { letter-spacing: .02em; text-transform: none; }
.mus-route p { font: 400 15px/1.6 var(--font-text); color: var(--secondary); margin: 0; }

/* Маршрут расписанием: время отдельным столбцом, отрезки — строками.
   Сплошным абзацем он читался простынёй, и было не выхватить, сколько
   времени на что уходит. */
.mus-route__intro { font: 400 15px/1.6 var(--font-text); color: var(--muted); margin: 0 0 10px; }
.mus-legs { list-style: none; margin: 0; padding: 0; }
.mus-leg {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 0 16px;
    padding: 7px 0;
    border-top: 1px solid var(--rule);
}
.mus-leg:first-child { border-top: 0; padding-top: 0; }
.mus-leg__what {
    font: 500 13px/1.5 var(--font-ui);
    letter-spacing: .04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mus-leg__time { font: 400 15px/1.55 var(--font-text); color: var(--secondary); }
.mus-leg__time b { color: var(--ink); }

/* Справка тремя названными частями, а не тремя абзацами подряд. */
.mus-note__part { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 0 24px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mus-note__part:first-child { border-top: 0; }
.mus-note__title { font: 500 11px/1.9 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Поле: подпись слева, значение справа. */
.mus-field { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 0 24px; padding: 8px 0; align-items: baseline; }
.mus-field + .mus-field { border-top: 1px solid var(--rule); }
.mus-field__title { font: 500 11px/1.8 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mus-field__value { font: 400 15px/1.55 var(--font-text); max-width: var(--prose); }

/* ДАТА СВЕРКИ У САМОГО РАЗРЯДА. Стоит второй строкой под названием поля,
   строчными и тише самого названия: это служебное, оно не должно спорить
   за внимание со сведением. Карточка, в которую каждый слой добавляет
   по строке, перестаёт читаться, — поэтому здесь не строка поля, а хвост
   подписи, и своей высоты она почти не занимает. */
.mus-checked-field {
    display: block;
    font: 400 11px/1.5 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--faint);
    margin-top: -2px;
}
/* Вышел срок — говорим об этом цветом срочности, а не молчим. Ветхое
   сведение опаснее отсутствующего: его читают как свежее. */
.mus-checked-field--stale { color: var(--urgent); }
/* И само значение приглушается: цена, которой полгода, обходится читателю
   дороже, чем её отсутствие. Совсем прятать нельзя — старое число всё же
   полезнее пустоты, — но выглядеть как подтверждённое оно не должно. */
.mus-field__value--stale { color: var(--muted); }

/* Аудиогид: языки строкой, а «на вашем языке» — отдельным словом, потому
   что это и есть тот ответ, за которым сюда пришли с французской версии. */
.mus-audio__lang { font: 400 13px/1.5 var(--font-ui); color: var(--muted); margin-top: 6px; }
.mus-audio__mine { color: var(--access); }
.mus-audio__mine--none { color: var(--faint); }

/* Состояние: цветной квадрат и слово, без коробки. */
.mus-now {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 10px;
}
.mus-now::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.mus-now--open { color: var(--open); }
.mus-now--closed { color: var(--muted); }
.mus-now--waiting  { color: var(--secondary); }
/* «Не знаем» — самый тихий серый и полый квадрат вместо залитого: у трёх
   остальных состояний квадрат означает знание, и заливать его там, где
   знания нет, значило бы уравнять их видом. */
.mus-now--unknown { color: var(--faint); }
.mus-now--unknown::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

/* Признание, что сведения нет. Курсивом набирают цитату и название,
   а не пробел в знании: у «не знаем» свой вид на весь раздел — знак
   вопроса на поле и приглушённый цвет, как у всякой непроверенной
   величины. Знак тот же, что у суждения: он и значит «здесь вопрос». */
.mus-empty {
    position: relative;
    margin: 0;
    max-width: var(--prose);
    padding-left: 30px;
    font: 400 15px/1.55 var(--font-text);
    color: var(--muted);
}
.mus-empty__badge {
    position: absolute; left: 0; top: 1px;
    width: 21px; height: 21px;
    border: 1px solid var(--frame); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 400 13px/1 var(--font-text); color: var(--faint);
}
/* Сразу за признанием часто идёт примечание музея. Без отбивки они
   слипаются в одно, и примечание читается продолжением нашей фразы. */
.mus-empty + .mus-card__caption { margin-top: 8px; }

/* Часы: цифры одной ширины, ровный столбец, сегодняшний ряд чернилами. */
.mus-hours { border-collapse: collapse; width: 100%; max-width: 24em; font: 400 13px/1.5 var(--font-ui); }
.mus-hours td { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--rule); }
.mus-hours tr:last-child td { border-bottom: 0; }
/* Столбец дней шире, чем нужно самим дням: в него встаёт ещё и слово
   «сегодня» при своём ряду, а на 8em оно переносится и ряд вырастает вдвое. */
.mus-hours .d { color: var(--muted); width: 11em; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.mus-hours .v { color: var(--secondary); white-space: nowrap; }
.mus-hours .z { color: var(--faint); }
.mus-hours tr.segodnya .d, .mus-hours tr.segodnya .v, .mus-hours tr.segodnya .z { color: var(--ink); }
/* Слово «сегодня» при своём ряду расписания. Цвета мало: он довод для того,
   кто знает, что искать, и он пропадает в чёрно-белой печати. */
.mus-hours__today, .mus-tip__today { color: var(--secondary); white-space: nowrap; }

.mus-card__caption { font: 400 13px/1.55 var(--font-ui); color: var(--muted); margin-top: 10px; max-width: var(--prose); }
/* Последний вход — сведение, которое решает, успеет человек или нет. */
.mus-lastentry { font: 400 13px/1.5 var(--font-ui); color: var(--urgent); margin-top: 8px; }

/* Пометки о билетах — словами через точку, без рамок. */
.mus-chips { margin-top: 8px; font: 400 11px/1.5 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mus-chip--key { color: var(--urgent); }

/* Паспорт: условия посещения. Отдельная ось от оценки собрания. */
/* Знак условия: значок, а слово — по наведению и с клавиатуры. В списке
   слова занимали по строке на карточку; значок занимает пятнадцать точек.
   Подсказка при этом ничего не прячет: то же самое стоит видимым полем
   на странице музея, а там, где наведения нет, слово печатается рядом. */
.mus-factsheet { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
/* Значки крупнее: было пятнадцать точек при толщине линии в одну — рисунок
   хороший, но на строке в тринадцать пикселей он почти не читался, особенно
   коляска и «взрослый с ребёнком», где смысл держится на мелких деталях.
   Восемнадцать точек и линия в 1,15 — предел, за которым значок начинает
   спорить с текстом; до него он просто становится виден. */
.mus-icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
/* Ступень условия посещения показывается ФОРМОЙ, а не только краской.
   Четыре ступени, различавшиеся исключительно цветом, для дальтоника
   не различались вовсе — а это каждый двенадцатый мужчина. Пунктир —
   «не проверяли»: линия, в которой нет уверенности. Точка в углу —
   «с оговорками», как сноска. Перечёркнуто — «нет». */
.mus-icon--unknown { stroke-dasharray: 2.2 1.8; }
/* Значок карты рядом с адресом — один и тот же в списке и на странице музея.
   Служба за ним разная (Яндекс в России по-русски, иначе Google), но читателю
   нужно одно: «показать на карте», и знак у этого действия обязан быть один. */
.mus .mus-map {
    display: inline-block; vertical-align: -4px;
    color: var(--muted);
    /* Подчёркивания у значка нет: линия под ссылкой — обещание слова,
       а здесь слова нет. Правило `.mus a` весит больше одного класса,
       поэтому селектор из двух. */
    border-bottom: none;
}
.mus .mus-map:hover { color: var(--ink); }

.mus-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 13px/1.4 var(--font-ui);
    color: var(--muted);
    white-space: nowrap;
    cursor: help;
    /* Знак, которому есть что показать, — настоящая кнопка. Браузер даёт
       кнопке свою заливку, рамку, поля и свой шрифт; всё это снимается
       здесь, чтобы знак-кнопка и знак-пробел выглядели одинаково: разница
       между ними в том, есть ли что открывать, а не в том, как нарисованы.
       Почему именно кнопка — сказано у mus_badge() в museums.php: `span`
       с `tabindex` не получает средоточия по касанию, и на телефоне
       подсказок не было ни одной. */
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}
/* Обводка — только с клавиатуры: мышью и пальцем человек и так видит,
   куда нажал, а рамка вокруг значка в списке из тридцати карточек
   превратила бы страницу в решето. */
.mus-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
/* Цвет знака говорит о ступени, а часы и билеты ступеней не имеют:
   там цвет несёт то, что внутри («открыт», «закрыт»), и перебивать его
   служебным серым нельзя. */
.mus-badge--hours, .mus-badge--tickets { color: inherit; }
.mus-badge__caption {
    /* Подсказка стоит над своим знаком и центрируется по нему.
       Пробовал держать её средствами anchor positioning, чтобы браузер сам
       уводил коробку от края экрана, — и сломал: `position-area: top center`
       обрезает вместимость до ширины самого знака, коробка в двадцать четыре
       em туда не влезает. Правка отменена целиком; уводить от края будем
       тогда, когда будет чем проверить в настоящем браузере. */
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    font: 400 13px/1.4 var(--font-ui);
    padding: 10px 12px;
    white-space: nowrap;
    pointer-events: none;
    /* Спрятанная подсказка убирается из потока целиком, а не прозрачностью:
       иначе она раздвигает документ, и на узком экране страница выезжает
       за край на девяносто точек. Плавность при этом остаётся: `display`
       переводится ступенькой, прозрачность — плавно. */
    display: none;
    opacity: 0;
    transition: opacity .18s ease, display .18s allow-discrete;
    transition-behavior: allow-discrete;
    z-index: 30;
}

/* Внутреннее устройство подсказки. Сведения разного рода, набранные подряд
   одним кеглем, сливаются — свод запрещает это и на странице, а в тёмной
   коробке шириной в двадцать четыре em сливаются вдвое сильнее: глазу
   некуда отойти. Отсюда заголовок, ряды «слева день, справа время»,
   названные части и приписка петитом. */
.mus-tip { display: block; }
.mus-tip__title {
    display: block; font: 500 11px/1.4 var(--font-ui);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
}
.mus-tip__text { display: block; font: 400 13px/1.5 var(--font-ui); margin-top: 4px; }
.mus-tip__strong { font-weight: 600; }
.mus-tip__row {
    display: flex; justify-content: space-between; gap: 16px;
    font: 400 13px/1.6 var(--font-ui);
}
.mus-tip__leg { display: flex; gap: 10px; font: 400 13px/1.5 var(--font-ui); margin-top: 4px; }
.mus-tip__term { color: var(--muted); flex: 0 0 auto; }
.mus-tip__value { flex: 0 0 auto; }
.mus-tip__detail { flex: 1 1 auto; }
.mus-tip__small {
    display: block; font: 400 11px/1.5 var(--font-ui);
    color: var(--muted); margin-top: 6px;
}
/* Показ держится на `:focus-within`, а не на `:focus-visible`. Разница
   решает всё: `:focus-visible` НАРОЧНО не срабатывает от касания и мыши —
   он для клавиатуры, — и потому подсказка открывалась только под курсором.
   `:focus-within` срабатывает от любого средоточия, а средоточие от касания
   даёт кнопка. Обводку при этом по-прежнему рисует `:focus-visible`:
   показать сведение и подсветить рамку — разные поводы. */
.mus-badge:hover .mus-badge__caption,
.mus-badge:focus-within .mus-badge__caption { display: block; opacity: 1; }
@starting-style {
    .mus-badge:hover .mus-badge__caption, .mus-badge:focus-within .mus-badge__caption { opacity: 0; }
}
.mus-badge__word { font: 400 13px/1.4 var(--font-ui); }
/* Звёздочка Бедекера при заголовке «Что смотреть»: литера в текстовой
   гарнитуре, поднятая на верхний индекс, — ровно так она стоит в путеводителе.
   Цвет чернильный: это не служебная приписка, а часть заголовка. */
.mus-badge--star { color: var(--ink); align-items: flex-start; }
.mus-star { font: 400 21px/0.9 var(--font-text); }

/* Два условия посещения — дети и коляска — читаются по одному правилу
   и одной тройкой цветов: зелень «да», нейтральный «с оговорками»,
   кармин «нет». Не проверяли — самый тихий серый: это не ступень,
   это признание, что мы ещё не знаем. */
.mus-badge--kids0   { color: var(--faint); }
.mus-badge--kids1   { color: var(--access); }
.mus-badge--kids2   { color: var(--secondary); }
.mus-badge--kids3   { color: var(--urgent); }
.mus-badge--access0 { color: var(--faint); }
.mus-badge--access1 { color: var(--access); }
.mus-badge--access2 { color: var(--secondary); }
.mus-badge--access3 { color: var(--urgent); }
.mus-badge--time  { color: var(--secondary); cursor: default; }
/* Оговорка о входе: цвет срочности и никакого слова рядом. Слово здесь
   удвоило бы строку у девяти карточек из пятидесяти четырёх, а знак
   восклицания в треугольнике понятен и без него — на то он и выбран. */
.mus-badge--alert { color: var(--urgent); }
.mus-badge--alert .mus-icon { width: 17px; height: 17px; }
/* Знак у имени музея: имя набрано крупно, и знак при нём должен быть
   соразмерен — иначе он читается опечаткой, а не предупреждением. */
.mus-badge--closed { vertical-align: middle; margin-left: 4px; }
.mus-badge--closed .mus-icon { width: 22px; height: 22px; }
/* Подсказка у имени растёт ВПРАВО от знака. Имя начинается у левого края
   колонки, поэтому и центровка по знаку, и прижатие к его правому краю
   уводят коробку за край страницы — проверено обоими способами. */
.mus-card__title .mus-badge--closed .mus-badge__caption--long { left: 0; right: auto; transform: none; }
/* На полной карточке оговорка стоит первой строкой поля часов, отдельно
   и с отбивкой: её надо прочитать ДО расписания, а не после. */
.mus-entry { margin-bottom: 10px; }
/* Оговорка стоит у левого края колонки, и подсказка, отцентрованная по знаку,
   уезжала за край страницы наполовину. Здесь она прижимается к знаку левым
   краем — единственное место, где это нужно, и потому правило узкое. */
.mus-entry .mus-badge__caption--long { left: 0; transform: none; }
/* Со знаком времени есть о чём спросить только там, где маршрут написан:
   число «2–3 часа» само не говорит, из чего оно сложилось. */
.mus-badge--route { cursor: help; }

/* Знаки отличия вручаются поверх шкалы, и у них есть слово: они редки,
   и молчать о них значком было бы скупостью. Золото — их цвет, и только их. */
.mus-distinctions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.mus-badge--distinction { color: var(--gold); cursor: help; }
/* Знаки отличия стоят в ряд со словом прописными в одиннадцать пунктов —
   там значок держит строку, а не заменяет её, и растёт меньше остальных. */
.mus-badge--distinction .mus-icon { width: 15px; height: 15px; }
.mus-badge--distinction .mus-badge__word {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.mus-badge__caption--long { white-space: normal; width: 24em; max-width: 80vw; text-align: left; }

/* Там, где наведения нет, ОДНО СЛОВО стоит рядом со значком: ради одного
   слова незачем заставлять человека касаться, и прятать его за жестом
   было бы то же, что не иметь его вовсе. */
@media (hover: none) {
    .mus-badge__caption {
        position: static; transform: none; display: inline; opacity: 1;
        background: none; color: inherit; padding: 0; z-index: auto;
    }
    /* Длинная подсказка — не слово, а несколько строк с внутренним
       устройством: маршрут по отрезкам, неделя расписания, льготы.
       Напечатанная рядом со значком, она удваивает высоту карточки,
       и в списке из тридцати карточек это уже не список.
       Поэтому она остаётся подсказкой и открывается касанием — знак
       теперь кнопка, и средоточие от касания она получает.
       ПРЕЖДЕ ЗДЕСЬ СТОЯЛО `display: none` на маршрут, часы, билеты
       и знаки отличия: на телефоне этих сведений не было совсем. */
    .mus-badge__caption--long {
        position: absolute; transform: translateX(-50%);
        display: none; opacity: 1;
        background: var(--paper); color: var(--ink);
        border: 1px solid var(--ink);
        padding: 10px 12px; z-index: 30;
    }
}

/* Справка — подробности петитом, а не за кнопкой. */
.mus-note { margin: 16px 0 24px; }
.mus-note > summary {
    font: 500 11px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--rule);
    padding-bottom: 6px; cursor: pointer; list-style: none;
}
.mus-note > summary::-webkit-details-marker { display: none; }
.mus-note > summary::after { content: ' +'; color: var(--faint); }
.mus-note[open] > summary::after { content: ' –'; }
.mus-note__text { font: 400 15px/1.6 var(--font-text); color: var(--secondary); margin: 0; max-width: var(--prose); }

/* Служебное — в самом низу карточки, мелким и слева. */
.mus-checked { font: 400 11px/1.5 var(--font-ui); color: var(--muted); margin-top: 16px; }
.mus-checked .mus-dot { color: var(--frame); }
/* Самая старая дата карточки объясняет себя по наведению. Кегль и цвет
   берутся у строки, в которой знак стоит: подсказка тут прирост знания,
   а не повод выделить строку жирнее соседней. Пунктир снизу — единственное,
   чем знак себя обнаруживает, и он в один пиксель, как всё в своде. */
.mus-badge--old { font: inherit; color: var(--secondary); white-space: normal; }
.mus-badge--old .mus-badge__word { font: inherit; border-bottom: 1px solid var(--rule); }
.mus-badge--old:hover .mus-badge__word { border-bottom-color: var(--ink); }

.mus-notice { border: 0; border-left: 1px solid var(--urgent); padding-left: 16px; margin: 0 0 16px; font: 400 15px/1.55 var(--font-text); color: var(--urgent); }
.mus-back { margin-top: 32px; }


/* ---- КРАТКАЯ КАРТОЧКА: та, что стоит в списке ------------------------
   Снимок обтекается текстом, а не стоит отдельным столбцом. Столбец
   кончается вместе со снимком, и под ним остаётся пустота во всю высоту
   карточки; обтекание не оставляет её никогда. */

/* Снимок обтекается СПРАВА, а не слева, и это не вкус, а арифметика.
   Прозе задан предел строки в 34em. Коробка текста упирается в этот
   предел слева, и поплавок слева съедал её левую половину — оставалась
   колонка в двести пятьдесят точек с пустотой справа. Поплавок справа
   режет ту же строку до 28em: и мера чтения хороша, и пустоты нет. */
.mus-photo--inset { float: right; width: 360px; margin: 4px 0 16px 40px; }
/* Одна пропорция на все снимки: у наших источников они разной формы,
   и список от этого рябит. Три к двум — и обрезка по центру. */
.mus-photo--inset img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.mus-photo--inset .mus-card__source { max-width: 360px; }

.mus-card--brief .mus-why { font-size: 18px; margin-bottom: 16px; }

/* Одна строка о сегодняшнем дне вместо шести полей. */
.mus-dayline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 14px;
    font: 400 13px/1.5 var(--font-ui);
    color: var(--muted);
}
.mus-today { display: inline-flex; align-items: center; gap: 7px; }
.mus-today::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.mus-today--open { color: var(--open); }
.mus-today--waiting  { color: var(--secondary); }
.mus-today--closed { color: var(--faint); }
.mus-today--unknown { color: var(--faint); }
.mus-today--unknown::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

/* ---- ПОЛОСА ФАКТОВ ---------------------------------------------------
   Четыре величины, за которые цепляется глаз прежде чтения. Единственное
   место карточки, где сведения стоят таблицей, а не прозой: время, год,
   цена и сегодняшний день человек проверяет первым и не должен ради этого
   читать абзац. */
.mus-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    margin: 0 0 24px;
}
.mus-fact { padding: 12px 20px 12px 0; border-left: 1px solid var(--rule); padding-left: 20px; }
.mus-fact:first-child { border-left: 0; padding-left: 0; }
.mus-fact__title {
    font: 500 11px/1.4 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}
.mus-fact__value {
/* Пересчёт цены в валюту читателя: то же место, но служебным серым —
   это оценка, а не цена в кассе, и первым читаться должен рубль. */
.mus-fact__local { color: var(--muted); white-space: nowrap; }

/* То же в поле карточки, где места больше: пересчёт своей строкой,
   а дата курса — ещё мельче, служебным кеглем. */
.mus-field__local { margin-top: 6px; color: var(--muted); }
.mus-field__rate  { display: block; font: 400 12px/1.5 var(--font-ui); color: var(--faint); }
    display: flex;
    align-items: center;
    gap: 7px;
    font: 400 21px/1.2 var(--font-text);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.mus-fact__value .mus-icon { width: 19px; height: 19px; color: var(--muted); }
/* Зелёным помечается только «открыт сейчас». Закрытый музей особого цвета
   не получает: часы нужны читателю одинаково в оба случая, а бледно-серым
   они переставали читаться вовсе. Цвет отмечает состояние, а не гасит факт. */
.mus-fact--open .mus-fact__value { color: var(--open); }

/* ---- ЧТО ПОЧИТАТЬ ----------------------------------------------------
   По ДНК сайт эфемерен, книга — нет. Поэтому книга набирается не как
   сноска, а как отдельное высказывание. */
.mus-reading { margin: 0 0 24px; }
.mus-reading__isbn {
    font: 400 11px/1.5 var(--font-ui); color: var(--muted);
    margin: 6px 0 0 17px; font-variant-numeric: tabular-nums;
    /* Номер и кнопка рядом: ISBN затем и стоит, чтобы его унести. */
    display: flex; align-items: center; gap: 8px;
}
.mus-reading__text {
    font: 400 17px/1.6 var(--font-text);
    font-style: italic;
    color: var(--ink);
    border-left: 1px solid var(--gold);
    padding-left: 16px;
    margin: 0;
    max-width: var(--prose);
}

/* ---- ЧТО О НЁМ ГОВОРЯТ -----------------------------------------------
   Отзывы не посетителей, а тех, чьё суждение весит. Род отзыва назван
   словом и отмечен цветом полосы: хвалебный — золото, описательный —
   чернила, критический — кармин. Три полосы разного цвета не дают трём
   врезкам слиться в одну простыню. */
.mus-reviews { margin: 0 0 24px; }
.mus-review { margin: 0 0 16px; padding-left: 16px; border-left: 1px solid var(--rule); max-width: var(--prose); }
.mus-review--praise    { border-left-color: var(--gold); }
.mus-review--neutral  { border-left-color: var(--ink); }
.mus-review--critical { border-left-color: var(--urgent); }
.mus-review__kind {
    font: 500 11px/1.4 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.mus-review__text { font: 400 17px/1.6 var(--font-text); margin: 0; color: var(--ink); }
.mus-review__who { font: 400 13px/1.5 var(--font-ui); color: var(--muted); margin-top: 8px; }
.mus-review__who b { color: var(--ink); font-weight: 600; }
/* Тот же отзыв во врезке карточки списка: начало вместо целого, и потому
   отличается только полем снизу — вид у вещи один. */
.mus-review--inset { margin: 14px 0 16px; }

/* ---- ЕСЛИ ЭТО ВАС ТРОНУЛО --------------------------------------------
   Связь по существу, а не по разделу. Повод — курсивом, потому что это
   суждение; куда идти — обычным, потому что это адрес. */
.mus-relations { margin: 24px 0 0; }
.mus-relation { border-top: 1px solid var(--rule); padding: 14px 0 0; margin-bottom: 14px; max-width: var(--prose); }
.mus-relation__reason { font: 400 17px/1.55 var(--font-text); font-style: italic; color: var(--secondary); margin: 0 0 8px; }
.mus-relation__target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 400 18px/1.3 var(--font-text); }
.mus-relation__target a { color: var(--ink); border-bottom-color: var(--rule); }
.mus-relation__target a:hover { border-bottom-color: var(--ink); }
/* Круги связей: тот же город, другие города страны, другие страны.
   Своего вида у дальних кругов пока нет, и заводить его вперёд нечего:
   город у нас один, второго круга на странице не бывает. Разметка к ним
   готова, оформление придёт вместе со вторым городом. */
.mus-cluster { margin-bottom: 20px; }
.mus-cluster__title {
    font: 500 11px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px;
}

/* ---- ЗВЁЗДОЧКА ПРИ САМОЙ ВЕЩИ ---------------------------------------
   Приём Бедекера: звёздочка стоит не при музее, а при предмете внутри
   него. Редактор отмечает вещь в тексте ядра `<b class="star-item">`, и читатель
   видит, ради чего стоит идти, ещё не открыв страницу музея. */
.mus-kernel b.star-item::after,
.mus-route b.star-item::after {
    content: '★';
    font-size: .62em;
    vertical-align: .42em;
    margin-left: .18em;
    color: var(--gold);
    letter-spacing: 0;
}

/* ---- «СКОПИРОВАТЬ, ЧТОБЫ ПОДЕЛИТЬСЯ» --------------------------------
   Кнопка печатается спрятанной, показывает её сценарий: без сценариев
   в буфер обмена не положишь, а мёртвая кнопка — обман. */
/* Кнопка стоит в правом верхнем углу карточки и занимает ровно значок:
   строкой она забирала место у названия и оставляла под собой пустоту.
   Слово выходит по наведению, как у знаков. */
.mus-action { flex: 0 0 auto; }
.mus-share {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 8px;
    border: 1px solid var(--frame);
    background: var(--paper);
    color: var(--muted);
    font: 400 13px/1.4 var(--font-ui);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}
.mus-share:hover { color: var(--ink); border-color: var(--ink); }
.mus-share--done { color: var(--open); border-color: var(--open); }
.mus-share__word {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--ink);
    color: var(--paper);
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity .18s ease, display .18s allow-discrete;
    transition-behavior: allow-discrete;
    z-index: 30;
}
.mus-share:hover .mus-share__word,
.mus-share:focus-visible .mus-share__word,
.mus-share--done .mus-share__word { display: block; opacity: 1; }
@starting-style {
    .mus-share:hover .mus-share__word { opacity: 0; }
}
.mus-share--done .mus-share__word { background: var(--open); }
.mus-share__icon { position: relative; width: 15px; height: 15px; flex: 0 0 auto; }
.mus-share__icon .mus-icon {
    position: absolute;
    inset: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.mus-share__icon .mus-icon:last-child { opacity: 0; transform: scale(.6); }
.mus-share--done .mus-icon:first-child { opacity: 0; transform: scale(.6); }
.mus-share--done .mus-icon:last-child  { opacity: 1; transform: none; }
/* Галочка прорисовывается, а не появляется: движение отвечает на нажатие
   и длится меньше трети секунды. */
.mus-share--done .mus-icon:last-child path {
    stroke-dasharray: 16;
    animation: mus-galka .3s ease forwards;
}
@keyframes mus-galka { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }

/* ---- ПЛАВНОЕ РАСКРЫТИЕ ----------------------------------------------
   Свежий способ: высота раскрывающегося блока переводится из нуля
   в `auto` напрямую. Где браузер этого ещё не умеет, блок просто
   раскрывается сразу — страница остаётся рабочей. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
}
.mus-note::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s cubic-bezier(.2, .6, .2, 1), content-visibility .3s allow-discrete;
    transition-behavior: allow-discrete;
}
.mus-note[open]::details-content { block-size: auto; }

/* ---------------------------------------------------------------- 9 *
 * СПИСОК ТАБЛИЦЕЙ
 * -------------------------------------------------------------------- */

.mus-list { border-collapse: collapse; width: 100%; }
.mus-list th { text-align: left; border-bottom: 1px solid var(--ink); padding: 0 16px 8px 0; }
.mus-list td { border-bottom: 1px solid var(--rule); padding: 12px 16px 12px 0; vertical-align: baseline; font: 400 15px/1.4 var(--font-text); }
.mus-list td:last-child, .mus-list th:last-child { padding-right: 0; }
.mus-list .a { color: var(--secondary); }
.mus-list .ch { font: 400 13px/1.4 var(--font-ui); color: var(--secondary); white-space: nowrap; }

/* Длинные неразрывные строки — адреса сайтов и почта — ломаются по месту.
   Без этого на 320 пикселях страница выезжала за край на шестьдесят. */
.mus-field__value, .mus-card__source, .mus-aside__show, .mus-note__text, .mus-exhibition__title { overflow-wrap: anywhere; }


/* --------------------------------------------------------------- 10 *
 * ЗАКРЫТЫЕ МУЗЕИ
 * -------------------------------------------------------------------- */

.mus-closed { border-top: 1px solid var(--ink); padding-top: 16px; margin: 0 0 48px; }
.mus-closed__intro { font: 400 15px/1.6 var(--font-text); color: var(--secondary); margin: 12px 0 16px; max-width: var(--prose); }
.mus-closed__item { border-top: 1px solid var(--rule); padding: 12px 0; }
.mus-closed__title { font: 400 18px/1.3 var(--font-text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.mus-closed__about { font: 400 13px/1.5 var(--font-ui); color: var(--muted); margin-top: 4px; max-width: var(--prose); }


/* --------------------------------------------------------------- 11 *
 * НИЗ СТРАНИЦЫ. Линии идут во всю ширину столбца, проза — в 34em.
 * -------------------------------------------------------------------- */

/* Перечень готовых отборов. Без ссылки с живой страницы этих адресов
   не найдёт ни читатель, ни поиск, а найти их надо и тому и другому. */
.mus-collections { border-top: 1px solid var(--ink); padding-top: 16px; margin: 48px 0 0; }
.mus-collections__item { border-top: 1px solid var(--rule); padding: 10px 0; font: 400 18px/1.35 var(--font-text); }
.mus-collections__item:first-of-type { border-top: 0; }
.mus-collections__item a { color: var(--ink); border-bottom-color: var(--rule); }
.mus-collections__item a:hover { border-bottom-color: var(--ink); }

/* ЛИСТАЛКА. Сперва строка словами — где я стою и что на этой странице, —
   и только под ней числа. Прежде числа стояли одни, и текущее отличалось
   полужирным: полужирная «2» среди чисел читается как ещё одно число.
   Слово «Страница 2 из 3» такого прочтения не допускает. */
.mus-pages { margin: 24px 0 32px; }
.mus-pages__where {
    font: 400 13px/1.5 var(--font-ui);
    color: var(--muted);
    margin-bottom: 8px;
}
.mus-pages__where b { color: var(--ink); font-weight: 400; }
.mus-pages__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mus .mus-pages__row a, .mus-pages__current, .mus-pages__ellipsis {
    font: 400 15px/1 var(--font-ui);
    min-width: 2.2em;
    padding: 8px 6px;
    text-align: center;
}
/* Черта под номером — цвета линии, а не цвета текста: ряд номеров и так
   читается рядом органов управления, и подчёркивать каждый в полную силу
   значит нарисовать под листалкой вторую линейку. */
.mus .mus-pages__row a { border-bottom-color: var(--rule); }
.mus .mus-pages__row a:hover { border-bottom-color: var(--ink); }
/* Текущая страница — залита, как выбранная кнопка отбора: одно состояние,
   один вид на весь раздел. Обвести её было бы вторым языком для того же. */
.mus-pages__current {
    background: var(--ink);
    color: var(--paper);
    font-weight: 400;
}
.mus-pages__ellipsis { color: var(--faint); min-width: 1.6em; }
/* Шаг назад и вперёд — самое частое действие, поэтому он словом, а не
   одной стрелкой: стрелка без слова требует догадки, а лист каталога
   не место для догадок. */
.mus .mus-pages__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--frame);
    color: var(--secondary);
    white-space: nowrap;
}
.mus .mus-pages__step:hover { color: var(--ink); border-color: var(--ink); }
.mus-arrow--back   { transform: rotate(90deg); }
.mus-arrow--forward { transform: rotate(-90deg); }

.mus-tail { border-top: 1px solid var(--ink); margin-top: 64px; padding-top: 16px; }
.mus-tail p { font: 400 15px/1.65 var(--font-text); color: var(--secondary); max-width: var(--prose); margin: 0 0 12px; }
.mus-tail__title { margin-top: 32px; }
.mus-tail b { color: var(--ink); }

.mus-legend { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 8px 24px; margin: 16px 0 24px; max-width: 44em; }
.mus-legend dt { margin: 0; }
.mus-legend dd { margin: 0; font: 400 15px/1.5 var(--font-text); color: var(--secondary); }
/* Правила ремесла. Имя правила набрано служебной гарнитурой в разрядку —
   так же, как имена разделов и знаки отличия: это свод, а не проза о себе,
   и выглядеть он должен сводом. Черта под строкой отделяет правило
   от правила там, где текст правила уходит на три строки. */
.mus-legend--rules { grid-template-columns: 16em minmax(0, 1fr); gap: 14px 24px; }
.mus-legend--rules dt {
    font: 400 13px/1.5 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.mus-legend--rules dd { border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.mus-legend--rules dd:last-of-type { border-bottom: 0; }

.mus-contact { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 16px; }
.mus-contact__title { font: 400 21px/1.3 var(--font-text); margin-bottom: 8px; }
.mus-contact__text { font: 400 15px/1.6 var(--font-text); color: var(--secondary); margin: 0 0 16px; max-width: var(--prose); }
.mus-contact__how { margin: 0; }
.mus-contact__how a {
    display: inline-block; padding: 8px 18px; border: 1px solid var(--ink);
    color: var(--ink); font: 400 13px/1.3 var(--font-ui);
    letter-spacing: .1em; text-transform: uppercase;
}
.mus-contact__how a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }


/* --------------------------------------------------------------- 12 *
 * БОКОВАЯ КОЛОНКА: что полезно знать сегодня.
 * -------------------------------------------------------------------- */

.mus-aside { padding-top: 2px; }
.mus-aside__title { margin: 24px 0 8px; }
.mus-aside__title:first-child { margin-top: 0; }
.mus-aside__date { font: 400 15px/1.3 var(--font-text); color: var(--ink); }
.mus-aside__number { font: 400 36px/1 var(--font-text); color: var(--ink); margin-top: 12px; }
.mus-aside__caption { font: 400 11px/1.45 var(--font-ui); color: var(--muted); margin-top: 4px; }
.mus-aside__show { font: 400 15px/1.4 var(--font-text); margin-bottom: 12px; }
/* Только прямой потомок: иначе правило цепляет и точку-разделитель внутри. */
.mus-aside__show > span { display: block; font: 400 11px/1.45 var(--font-ui); color: var(--muted); margin-top: 3px; letter-spacing: .04em; }
.mus-aside__remain { font-weight: 400; color: var(--secondary); }
.mus-aside__remain--soon { color: var(--urgent); }
.mus-aside__link { font: 400 13px/1.5 var(--font-ui); margin-bottom: 8px; }
.mus-aside__row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 400 15px/1.35 var(--font-text); }
.mus-aside__row .mus-scale { flex: 0 0 auto; }
/* В колонке всё сплошь ссылки: синим она превращается в частокол.
   Имена музеев и выставок — чернилами, служебные отборы — серым. */
.mus-aside__show a, .mus-aside__row a { color: var(--ink); border-bottom-color: var(--rule); }
.mus-aside__link a { color: var(--secondary); border-bottom-color: var(--rule); }
.mus-aside__show a:hover, .mus-aside__row a:hover, .mus-aside__link a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mus-aside__total { font: 400 11px/1.6 var(--font-ui); color: var(--muted); }


/* --------------------------------------------------------------- 13 *
 * ОКНО СНИМКА
 * -------------------------------------------------------------------- */

.mus-zoom { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
.mus-zoom::backdrop { background: rgba(27, 24, 21, .88); }

/* Плавность окна — только там, где браузер понимает ступенчатые переходы.
   Иначе окно просто появляется: прятать снимок ради красоты нельзя,
   а без этой оговорки браузер без поддержки оставлял бы его прозрачным. */
@supports (transition-behavior: allow-discrete) {
    .mus-zoom {
        opacity: 0;
        transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
    }
    .mus-zoom[open] { opacity: 1; }
    @starting-style { .mus-zoom[open] { opacity: 0; } }
    .mus-zoom::backdrop {
        opacity: 0;
        transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
    }
    .mus-zoom[open]::backdrop { opacity: 1; }
    @starting-style { .mus-zoom[open]::backdrop { opacity: 0; } }
}
.mus-zoom img { display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto; background: var(--paper); }
.mus-zoom__caption { font: 400 13px/1.5 var(--font-ui); color: var(--frame); margin: 12px 0 0; text-align: center; }
.mus-zoom__close {
    position: absolute; top: -34px; right: 0; width: 28px; height: 28px;
    background: transparent; border: 1px solid var(--muted);
    color: var(--paper); font: 400 15px/1 var(--font-ui); cursor: pointer;
}
.mus-zoom__close:hover { border-color: var(--paper); }


/* --------------------------------------------------------------- 14 *
 * ФОРМЫ
 * -------------------------------------------------------------------- */

.mus-form { max-width: 44em; margin: 0 0 32px; }
.mus-form textarea, .mus-form input[type=text] {
    width: 100%; max-width: 32em; box-sizing: border-box;
    font: 400 15px/1.55 var(--font-text); color: var(--ink);
    background: var(--paper); padding: 8px 10px; border: 1px solid var(--frame);
    resize: vertical;
}
.mus-form textarea:focus, .mus-form input[type=text]:focus { outline: none; border-color: var(--ink); }
/* Ширина задаётся, а не берётся от самого длинного пункта: иначе список
   музеев растягивает страницу за край экрана. */
.mus-form select { font: 400 13px/1.4 var(--font-ui); padding: 5px 8px;
                    width: 100%; max-width: 32em; box-sizing: border-box; }
.mus-form__choice { font: 400 15px/1.6 var(--font-text); margin-right: 16px; white-space: nowrap; }
.mus-form__caption { font: 400 13px/1.5 var(--font-ui); color: var(--muted); margin-top: 4px; }
.mus-form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mus-form button {
    font: 400 13px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
    padding: 9px 20px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.mus-form button:hover { background: var(--paper); color: var(--ink); }



/* --------------------------------------------------------------- 15 *
 * УЗКИЙ ЭКРАН. Проверка: при 320 пикселях горизонтальной прокрутки нет.
 * -------------------------------------------------------------------- */

@media (max-width: 1080px) {
    :root { --gutter: 24px; --aside-w: 220px; --gap: 32px; }
    .mus-photo--inset { width: 300px; margin-left: 32px; }
}

@media (max-width: 900px) {
    .mus-columns { grid-template-columns: minmax(0, 1fr); }
    .mus-aside-col {
        position: static;
        border-left: 0;
        border-top: 1px solid var(--ink);
        padding-left: 0;
        padding-top: 16px;
        margin-top: 48px;
    }
    .mus-aside { border-top: 0; padding-top: 0; }
    .mus-whatson__body { grid-template-columns: minmax(0, 1fr); gap: 32px 0; }
    .mus-hero__photo { max-width: 520px; }
    .mus-fields { columns: 1; }
    .mus-note__part { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
}

@media (max-width: 620px) {
    /* Шапка на телефоне занимает два ряда, а не один: 48 точек здесь врали,
       и якорь, к которому переходили по ссылке, уезжал под липкую полосу. */
    :root { --gutter: 16px; --masthead-h: 104px; }

    /* ШАПКА. Прежде три части — имя, поиск, языки — лежали в одном гибком
       ряду с «space-between». На узком экране поиск не помещался, ряд
       переносился по одной части на строку, и «space-between» растаскивал
       их по концам пустых строк: имя слева, под ним поле во всю ширину
       непонятной ширины, под ним флаги. Разъехалось именно это.
       Стало два осмысленных ряда: марка, город и язык — верхний, поиск —
       нижний, во всю ширину. Поиску ширина и нужна: в него пишут название
       музея. Порядок в разметке не тронут (марка, город, поиск, язык):
       вслух страница читается ровно так, и менять это ради вида нельзя;
       переставляет только `order`, и только на экране. */
    /* НА УЗКОМ ЭКРАНЕ ПОЛОСА СНОВА ГИБКИЙ РЯД, а не сетка. Три столбца
       `1fr auto 1fr` хороши на широком: они ставят поиск ровно посередине.
       На трёхстах двадцати точках они же держат все три группы в строке
       и распирают документ до 396 — то есть нарушают запрет 9 свода,
       и нарушают его на КАЖДОЙ странице сразу. Найдено перебором ширин,
       а не глазом: на снимке этого не видно вовсе. */
    .mus-top__row {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 16px;
        padding: 12px 0 10px;
    }
    .mus-top__left { order: 1; gap: 14px; flex-wrap: wrap; }
    .mus-top__right{ order: 2; }
    .mus-search      { order: 3; flex: 1 0 100%; }
    /* Поле тянется, кнопка держит свою ширину: `width: 100%` на поле внутри
       гибкой строки считался от ширины, которую сам же и задавал, и кнопку
       выдавливало за край. */
    .mus-search input[type=text], .mus-search input[type=search] {
        width: auto; flex: 1 1 auto; min-width: 0;
    }
    .mus-search button { flex: 0 0 auto; }

    /* ПОДСКАЗКА. Коробка в двадцать четыре em не помещается на трёхстах
       двадцати точках, а стоя́щая у правого края карточки уезжала за экран
       целиком. На узком экране она встаёт полосой у нижнего края окна:
       там ей всегда есть место, она не перекрывает знак, на который
       смотрят, и её видно целиком. Касание по ней снимает средоточие —
       то есть закрывает её же, и это единственный способ закрыть,
       не написав ни строки сценария. */
    .mus-badge__caption--long {
        position: fixed;
        left: var(--gutter); right: var(--gutter);
        bottom: 12px; top: auto;
        width: auto; max-width: none;
        transform: none;
        white-space: normal;
        text-align: left;
        padding: 12px 14px;
        pointer-events: auto;
        box-shadow: 0 2px 24px rgba(39, 34, 29, .35);
    }

    .mus-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mus-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .mus-fact__value { font-size: 18px; }
    .mus-photo--inset { float: none; width: 100%; max-width: 460px; margin: 0 0 16px; }
    /* На узком экране оценка встаёт под названием: справа для неё нет
       места, и на 320 точках она выносила строку за край. */
    .mus-card__top { display: block; }
    .mus-card__right { margin-top: 10px; }
    .mus-rating { white-space: normal; }
    body { font-size: 17px; }
    /* Верхняя полоса на телефоне. Марка и язык остаются, «Как мы работаем»
       уходит: в подвале эта ссылка стоит на каждой странице, и держать её
       дважды на трёхстах точках — роскошь. Всплывающие поля выбора
       раскрываются во всю ширину полосы, а не коробкой у края: коробка
       в двести точек на экране в триста читается как обрезок. */
    .mus-top__how { display: none; }
    .mus-brand__name { font-size: 21px; }
    .mus-brand__badge { height: 30px; width: 30px; }
    /* Поле выбора раскрывается во всю ширину полосы, а не коробкой у края:
       коробка в двести точек на экране в триста читается как обрезок.
       Отсчёт — от РЯДА шапки, а не от самого выпадающего: `fixed` здесь
       был бы бедой, потому что шапка липкая, и после прокрутки поле
       осталось бы там, где страница лежала при разборе, то есть за краем
       экрана. Отсюда `static` у самого выпадающего и `relative` у ряда. */
    .mus-picker { position: static; }
    .mus-picker--city .mus-picker__field, .mus-picker--lang .mus-picker__field {
        position: absolute; left: 0; right: 0; top: calc(100% + 8px);
        min-width: 0; max-width: none;
    }
    /* Поле отбора на телефоне не всплывает вовсе: раздвигает страницу.
       Всплывать некуда — под ним сразу первая карточка. */
    .mus-facet__field { position: static; width: auto; max-width: none; margin-top: 8px; }
    .mus-facet { flex-basis: 100%; }
    .mus-filter__row { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
    .mus-filter__title { padding-top: 0; }
    .mus-field { grid-template-columns: minmax(0, 1fr); gap: 2px 0; padding: 10px 0; }
    .mus-exhibition--line { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
    .mus-why { font-size: 18px; }
    .mus-legend { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .mus-legend dd { margin-bottom: 12px; }
    .mus-hours .d { width: 7em; }
    /* Таблица из четырёх столбцов ниже 620 не сходится: адрес уходит,
       а оценка остаётся знаками без слова — знаки и есть оценка. */
    .mus-list th:nth-child(3), .mus-list td:nth-child(3) { display: none; }
    .mus-list .mus-rating__word { display: none; }
    .mus-list td, .mus-list th { padding-right: 12px; }
}

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


/* --------------------------------------------------------------- 16 *
 * ПЕЧАТЬ. По ДНК мера пригодности записи — печать: каталог обязан
 * уметь уйти с сайта на бумагу. Значит, на листе остаётся всё,
 * что есть на странице, и не остаётся ничего служебного для экрана.
 * -------------------------------------------------------------------- */

@media print {
    :root { --gutter: 0; --width: none; }

    body { font-size: 10.5pt; line-height: 1.5;
           background: var(--print-paper); color: var(--print-ink); }

    .mus-picker, .mus-top__where, .mus-top__how, .mus-filter, .mus-search, .mus-pages,
    .mus-aside-col, .mus-contact, .mus-photo__badge, .mus-zoom,
    .mus-masthead__switch { display: none; }

    .mus-columns { display: block; }
    .mus-top { border-bottom: 1px solid var(--print-ink); margin-bottom: 12pt; }
    .mus-top__row { padding: 0 0 6pt; }

    .mus-card { break-inside: avoid; border-top: 1px solid var(--print-ink); margin-bottom: 18pt; }
    .mus-card__body { display: block; }
    .mus-photo--inset { float: left; width: 45mm; margin: 0 8mm 4mm 0; }
    .mus-why { font-size: 12pt; }
    .mus-note > summary { display: none; }
    .mus-note__body { display: block; }

    /* Адрес ссылки печатается: на бумаге ссылка иначе бесполезна. */
    .mus-kernel a::after, .mus-field__value a::after, .mus-note__text a::after {
        content: ' (' attr(href) ')';
        font: 400 8pt var(--font-ui);
        color: var(--print-grey);
        word-break: break-all;
    }
    .mus a { color: var(--print-ink); border-bottom: 0; }
}