/* Сайт «Репы».
 *
 * Направление: together-ai из каталога систем (Technical · blueprint), без их
 * пастельных градиентов. Что взято: геометрический дисплейный шрифт с ужатым
 * трекингом, моноширинные прописные метки как указатели по странице, острая
 * геометрия (4 и 8 px, никаких пилюль), веса 400-600 без жирного, одна
 * чернильная полоса на весь экран как отдельная зона, одна тень с оттенком
 * чернил. Акцент лососевый, из логотипа, и он один.
 *
 * Фон, чернила и акцент взяты пипеткой с официальной подачи логотипа, поэтому
 * сайт и знак стоят на одних и тех же значениях.
 *
 * Все значения — токены из design-tokens.json. Свои числа есть только в
 * пропорциях знака: они описывают логотип, а не интерфейс.
 */

* { box-sizing: border-box; }

/* Фон как в фирменной подаче: ровный тёплый тон и мягкое высветление к
   центру. Радиальная подсветка задана двумя токенами темы, поэтому днём это
   кремовый лист, ночью — тёплый уголь, и оба тона живут в design-tokens.json. */
body {
  margin: 0;
  background: var(--color-surface-page);
  background-image: radial-gradient(
    120% 80% at 50% 32%,
    var(--color-surface-page-glow) 0%,
    var(--color-surface-page) 62%);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text-link); }
p { max-inline-size: 64ch; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

/* Одна колонка на всю страницу. Ширина и поля заданы здесь один раз, поэтому
   левый край знака, линеек секций, текста и подвала совпадает до пикселя.
   Раньше рамка метаполосы шла по внешнему краю контейнера, а линейки секций
   внутри его полей: страница выглядела собранной из двух разных вёрсток. */
/* Длинное слово (термин из оферты, адрес, «Репетиториус» крупным шрифтом) не
   расширяет свой блок, а просто вылезает за него: рамка на месте, а текст за
   краем экрана. На Linux шрифты шире, чем на macOS, и это поймал CI. Поэтому
   переносим по буквам везде, где текст, а не только в отдельных местах. */
:where(p, li, dd, dt, h1, h2, h3, h4, b, strong, span, a, td, th) { overflow-wrap: anywhere; }

.shell {
  max-inline-size: var(--size-site-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ------------------------------------------------------- выходные данные */
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border-default);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.masthead__dot {
  inline-size: var(--size-dot);
  block-size: var(--size-dot);
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  animation: pulse 2.4s var(--ease-emphasized) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.masthead__right { margin-inline-start: auto; text-transform: none; letter-spacing: var(--tracking-normal); }

/* ---------------------------------------------------------------- шапка */
/* Всё в строке выровнено по центру, а не по базовой линии: у картинки базовая
   линия проходит по её нижнему краю, поэтому знак, меню и кнопка стояли на
   трёх разных уровнях. Знак крупнее строки меню: он главный элемент строки,
   а не ещё одна ссылка. */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-6) var(--space-8);
  flex-wrap: wrap;
  padding-block: var(--space-6) var(--space-8);
}
.site-mark { display: inline-flex; flex: none; text-decoration: none; }
.site-mark:focus-visible { box-shadow: var(--shadow-focus-ring); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding-block: var(--space-2);
  border-block-end: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--color-text-primary); border-block-end-color: var(--color-border-strong); }
.site-nav a[aria-current="page"] { color: var(--color-text-primary); border-block-end-color: var(--color-brand-mark); }

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.site-cta:hover { background: var(--color-action-primary-hover); transform: translateY(-1px); }

/* Знак бренда: файлы дизайнера. Задаём только высоту, ширину браузер берёт из
   самого файла, поэтому пропорции остаются его. Светлая и тёмная версии
   различаются цветом чернил; видна всегда ровно одна. */
.logo { display: inline-flex; line-height: 0; }
.logo__img {
  display: none;
  block-size: var(--size-logo-lg);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}
.logo__img--light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img--light { display: none; }
  :root:not([data-theme="light"]) .logo__img--dark { display: block; }
}
:root[data-theme="dark"] .logo__img--light { display: none; }
:root[data-theme="dark"] .logo__img--dark { display: block; }
:root[data-theme="light"] .logo__img--light { display: block; }
:root[data-theme="light"] .logo__img--dark { display: none; }

/* Переключатель темы в подвале: три положения в одну строку. */
.theme-switch { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.masthead .theme-switch { margin-inline-start: auto; }
.theme-switch button {
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.theme-switch button:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.theme-switch button[aria-pressed="true"] {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  border-color: var(--color-action-primary);
}

/* ------------------------------------------------------------- сетка */
.site-main { position: relative; z-index: 0; }
.site-main > section { padding-block: var(--space-4) var(--space-20); }

/* Линейка секции: номер и тема разворота. */
.sec-rule {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border-strong);
  margin-block-end: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.sec-rule__num {
  color: var(--color-brand-mark);
  padding: 0 var(--space-2);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  border-radius: var(--radius-sm);
}
.sec-rule--inverse { border-block-start-color: var(--color-border-strong); color: var(--color-text-on-action-muted); }
.sec-rule--inverse .sec-rule__num { color: var(--color-brand-on-action); box-shadow: inset 0 0 0 1px var(--color-text-on-action-muted); }

/* Заголовки набраны тем же шрифтом, что и логотип: страница и знак звучат
   одним голосом. Unbounded геометричный и плотный, поэтому трекинг ужат, а
   строки идут почти вплотную. Жирного нет — предел 600. */
.display, .section-title, .call__title, .cta__line,
.prose h1, .prose h2, .prose h3 {
  overflow-wrap: anywhere;
}
.display, .section-title, .call__title, .cta__line {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  margin: 0;
}
/* Смысловое слово внутри заголовка выделяется цветом знака, а не другим
   шрифтом: у Unbounded нет курсива, и подмена гарнитуры выглядела бы заплатой. */
.display em, .section-title em, .call__title em, .cta__line em {
  font-style: normal;
  color: var(--color-brand-mark);
}
.call .display em, .call__title em { color: var(--color-brand-on-action); }
.dot { color: var(--color-brand-mark); }

.display { font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl)); letter-spacing: var(--tracking-tighter); max-inline-size: 13ch; margin-block-end: var(--space-8); }
.section-title { font-size: clamp(var(--text-2xl), 4.4vw, var(--text-4xl)); margin-block-end: var(--space-8); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-mark);
  margin: 0 0 var(--space-5);
}
.eyebrow::before { content: ""; inline-size: var(--space-8); block-size: 1px; background: var(--color-brand-mark); }

.lead { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0 0 var(--space-10); max-inline-size: 46ch; }

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.button:hover { background: var(--color-action-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button--large { font-size: var(--text-xl); padding-inline: var(--space-10); }
@media (max-width: 30rem) {
  .button { inline-size: 100%; justify-content: center; padding-inline: var(--space-5); text-align: center; }
}

/* --------------------------------------------------------- первый экран */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-12); align-items: start; }
.hero__text { grid-column: 1; }

/* «Пластина» с тарифом: уголковые метки, как на печатной иллюстрации. */
.plate {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-md);
}
.plate__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); margin: 0 0 var(--space-6); }
.plate__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); margin: var(--space-6) 0 0; max-inline-size: none; }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding-block: var(--space-4); border-block-start: 1px solid var(--color-border-default); }
.price__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
/* Цена не переносится по цифрам: на телефоне «600» разваливалось на «60» и «0»,
   потому что сжималась вместо подписи. На самом узком экране подпись уходит
   под цену целиком, а не рвётся по буквам. */
.price__amount, .price__unit { flex: none; white-space: nowrap; }
.price__unit { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-secondary); }
.price__note { min-inline-size: min(10ch, 100%); margin-inline-start: auto; font-size: var(--text-sm); color: var(--color-text-secondary); text-align: end; max-inline-size: 14ch; }
.price--accent .price__amount, .price--accent .price__unit { color: var(--color-brand-mark); }

/* ---------------------------------------------------------------- шаги */
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; }
.steps__list li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6) var(--space-5) var(--space-8) 0;
  border-block-start: 1px solid var(--color-border-strong);
}
.steps__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-brand-mark); letter-spacing: var(--tracking-wide); line-height: 1; }
.steps__list b { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.steps__list span:not(.steps__num) { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ------------------------------------------------------- разворот про звонок */
/* Единственная чернильная полоса страницы: тревожный вопрос получает своё
   отдельное место, а не растворяется в общем потоке. */
.call {
  background: var(--color-action-primary);
  color: var(--color-text-on-action);
  padding: var(--space-10) var(--space-8) var(--space-12);
  margin-block: var(--space-8) var(--space-20);
}
.call .sec-rule { margin-block-end: var(--space-8); }
.call__title { font-size: clamp(var(--text-2xl), 4.4vw, var(--text-4xl)); margin-block-end: var(--space-5); max-inline-size: 20ch; }
.call__lead { font-size: var(--text-lg); opacity: 0.86; margin: 0; max-inline-size: 56ch; }
.call__answers { display: grid; gap: var(--space-8) var(--space-10); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-block: var(--space-10) var(--space-8); }
.call__answers > div { display: grid; gap: var(--space-3); align-content: start; }
.call__answers dt { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.call__mark { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brand-on-action); letter-spacing: var(--tracking-wide); }
.call__answers dd { margin: 0; opacity: 0.82; }
.call__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-on-action-muted); margin: 0; }

/* ---------------------------------------------------------------- класс */
.room__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); }
.room__text p { color: var(--color-text-secondary); }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
/* minmax(0, 1fr): элемент сетки по умолчанию не уже своего содержимого, и
   длинная подпись растягивала строку за край экрана при крупном шрифте. */
.specs li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-block: var(--space-5); border-block-start: 1px solid var(--color-border-default); }
.specs__key { font-size: var(--text-xs); text-transform: uppercase; color: var(--color-text-tertiary); }
.specs b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.specs__key { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
.specs__note { color: var(--color-text-secondary); font-size: var(--text-sm); overflow-wrap: anywhere; min-inline-size: 0; }

/* -------------------------------------------------------------- вопросы */
.faq details { border-block-start: 1px solid var(--color-border-default); padding-block: var(--space-5); }
.faq details:last-of-type { border-block-end: 1px solid var(--color-border-default); }
.faq summary {
  cursor: pointer;
  font-size: var(--text-lg);
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-xl); line-height: 1; color: var(--color-brand-mark); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--color-text-secondary); margin-block: var(--space-4) 0; }

/* ------------------------------------------------------------- призыв */
.cta { text-align: center; }
.cta .sec-rule { text-align: start; }
.cta__line { font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl)); margin-inline: auto; margin-block-end: var(--space-8); max-inline-size: 18ch; }
.cta__note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); margin: var(--space-6) auto 0; }

/* Закрывающая метка печатного разворота. */
.fin { display: none; }

/* ------------------------------------------------------------ документы */
.prose { padding-block: var(--space-8); }
.prose h1 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl)); line-height: 1.05; margin-block: 0 var(--space-10); }
.prose h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); font-size: var(--text-2xl); line-height: var(--leading-tight); margin-block: var(--space-12) var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-default); }
.prose h3 { font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); font-size: var(--text-lg); margin-block: var(--space-6) var(--space-2); }
.prose p, .prose li { color: var(--color-text-secondary); }
.prose li { max-inline-size: 64ch; margin-block-end: var(--space-2); }
.prose hr { border: 0; border-block-start: 1px solid var(--color-border-default); margin-block: var(--space-10); }
.prose blockquote {
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}
.prose strong { color: var(--color-text-primary); }

/* ---------------------------------------------------------------- подвал */
.site-footer { margin-block-start: var(--space-10); }
/* Линия подвала идёт по той же колонке, что и линейки секций, а не во всю
   ширину окна: иначе низ страницы читается шире, чем её содержимое. */
.site-footer__inner {
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--color-border-strong);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}
.site-footer p { margin: 0 0 var(--space-2); max-inline-size: none; }
.site-footer a { color: var(--color-text-secondary); }
.site-footer__title {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-4);
}

/* ------------------------------------------------------------ узкий экран */
/* На узком экране шапка перестраивается в две строки: знак и кнопка в одной,
   меню под ними тоже одной строкой. Из выходных данных остаются только часы:
   имя стоит прямо под ними в знаке, а координаты и адрес есть в подвале. */
@media (max-width: 48rem) {
  .masthead__inner > span:first-child, .masthead__dot { display: none; }
  /* Переключатель темы на телефоне не прячем. Ночью он нужнее, чем на большом
     экране, а раньше он уезжал вместе со всей правой частью выходных данных,
     и выбрать тему с телефона было негде. Ему отдаётся своя строка. */
  .masthead__inner { flex-wrap: wrap; }
  .masthead__right { margin-inline-start: 0; flex-basis: 100%; }
  .site-header { gap: var(--space-5) var(--space-4); padding-block: var(--space-5) var(--space-6); }
  .site-cta { margin-inline-start: auto; }
  /* Меню переносится всегда, а не только на самом узком экране: порог в rem
     не знает про увеличенный шрифт, и при 1.25x четыре пункта уезжали за край.
     Вторая строка честнее бокового скролла, которого не видно. */
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
  .site-nav a { white-space: nowrap; }
}

@media (max-width: 60rem) {
  .hero__grid, .room__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .site-main > section { padding-block-end: var(--space-12); }
  .call { padding-inline: var(--space-5); margin-inline: calc(var(--space-6) * -1); }
  .price__note { max-inline-size: none; }
}

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

/* ---------------------------------------------------------------- схема прохода */
/* Рисуется в разметке страницы на цветах темы: в тёмной теме схема темнеет
   вместе с сайтом. Ширина ограничена, чтобы подписи не раздувались на большом
   экране; на телефоне схема во всю ширину, подписи около 14 px. */
.route-scheme { margin-block: var(--space-6) var(--space-8); max-inline-size: 30rem; }
.route-scheme svg { display: block; inline-size: 100%; block-size: auto; }
.route-scheme figcaption { margin-block-start: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.rs-frame { fill: var(--color-surface-page); stroke: var(--color-border-default); }
.rs-building { fill: var(--color-surface-raised); }
.rs-building--quiet { opacity: 0.5; }
/* Улицы светлее кварталов, как на исходной схеме владельца. */
.rs-street { fill: var(--color-surface-card); }
.rs-street-line { stroke: var(--color-border-strong); stroke-width: 1; }
.rs-street-name { fill: var(--color-text-primary); font-size: 15px; letter-spacing: 0.2em; font-family: var(--font-sans); }
.rs-label { fill: var(--color-text-primary); font-size: 15px; font-weight: 600; font-family: var(--font-sans); }
.rs-note { fill: var(--color-text-secondary); font-size: 14px; font-family: var(--font-sans); }
.rs-caption { fill: var(--color-text-tertiary); font-size: 12px; font-family: var(--font-sans); }
.rs-venue { fill: var(--color-brand-mark); }
.rs-venue-name { fill: var(--color-text-on-action); font-size: 24px; font-weight: 700; font-family: var(--font-display); }
.rs-venue-addr { fill: var(--color-text-on-action); font-size: 15px; font-family: var(--font-sans); }
.rs-route { fill: none; stroke: var(--color-brand-mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rs-start { fill: var(--color-brand-mark); }
.rs-entry { fill: var(--color-text-primary); font-size: 15px; font-weight: 700; font-family: var(--font-sans); }
.rs-lane-name { fill: var(--color-text-primary); font-size: 12px; letter-spacing: 0.12em; font-family: var(--font-sans); }
.rs-fence { stroke: var(--color-text-secondary); stroke-width: 1.5; }
.rs-small { fill: var(--color-text-primary); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }

/* ---------------------------------------------------------------- фотографии */
/* Класс: крупный кадр с инструментом и второй рядом, одной высоты. Дорога к
   классу: три вертикальных кадра; на телефоне лентой с прокруткой вбок, и
   краешек следующего кадра виден, чтобы было понятно, что лента листается. */
.photo { margin: 0; min-inline-size: 0; }
.photo picture, .photo img { display: block; inline-size: 100%; }
.photo img { block-size: 100%; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface-raised); }
.photo figcaption { margin-block-start: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.room__photos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-12); }
/* Главный кадр класса не обрезается и не приближается: по нему видно, какого
   размера класс на самом деле (решение владельца 2026-10-06). Второй кадр
   подстраивается под его высоту. */
.room__photos .photo--lead img { aspect-ratio: auto; object-fit: contain; }
.room__photos .photo picture { block-size: 100%; }
.way__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: start; }
.way__text p { color: var(--color-text-secondary); }
.way__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.way__photos img { aspect-ratio: 3 / 4; }
@media (max-width: 60rem) {
  .room__photos { grid-template-columns: minmax(0, 1fr); }
  .room__photos .photo:not(.photo--lead) img { aspect-ratio: 3 / 2; }
  .way__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 48rem) {
  .way__photos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-block-end: var(--space-2);
  }
  .way__photos .photo { scroll-snap-align: start; }
}