:root {
  --bg: #17100a;
  --deep: #0d0906;
  --paper: #d1b77f;
  --cream: #e8d8ad;
  --ink: #24150d;
  --red: #a63723;
  --dim: #a88f6c;
  --line: #4b3324;
}

.stops {
  padding: 10vw 4vw;
  border-top: 1px solid var(--line);
  background: #d0b77f;
  color: var(--ink);
}
.stops-head {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr 0.8fr;
  gap: 5vw;
  align-items: end;
}
.stops .index {
  align-self: start;
  color: var(--red);
}
.stops h2 {
  font-size: clamp(54px, 7vw, 105px);
  line-height: 0.8;
  letter-spacing: -0.07em;
  margin: 0;
}
.stops h2 em {
  font: italic 400 0.74em/0.9 "PT Serif", serif;
  color: #713523;
}
.stops-head > p:last-child {
  font: 17px/1.55 "PT Serif", serif;
}
.stop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 7vw;
  border: 1px solid #8d7443;
}
.stop-grid button {
  appearance: none;
  border: 0;
  border-right: 1px solid #8d7443;
  border-bottom: 1px solid #8d7443;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 3vw;
  cursor: pointer;
}
.stop-grid button:nth-child(2n) {
  border-right: 0;
}
.stop-grid button:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.stop-grid button:hover,
.stop-grid button.active {
  background: #a63723;
  color: #fff;
}
.stop-grid span {
  font-size: 9px;
  letter-spacing: 0.16em;
}
.stop-grid h3 {
  font: 400 32px "PT Serif", serif;
  margin: 20px 0 10px;
}
.stop-grid p {
  max-width: 520px;
  min-height: 72px;
  font: 16px/1.5 "PT Serif", serif;
}
.stop-grid b {
  display: block;
  margin-top: 25px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .stops {
    padding: 20vw 5vw;
  }
  .stops-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .stops h2 {
    font-size: 15vw;
  }
  .stop-grid {
    grid-template-columns: 1fr;
  }
  .stop-grid button,
  .stop-grid button:nth-child(2n),
  .stop-grid button:nth-last-child(-n + 2) {
    padding: 10vw 7vw;
    border-right: 0;
    border-bottom: 1px solid #8d7443;
  }
  .stop-grid button:last-child {
    border-bottom: 0;
  }
  .stop-grid p {
    min-height: 0;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font:
    500 14px/1.55 Manrope,
    Arial,
    sans-serif;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar {
  height: 74px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.brand span {
  color: var(--red);
  margin-right: 8px;
}
.hero {
  min-height: calc(100svh - 74px);
  padding: 7vw 4vw 4vw;
  position: relative;
  overflow: hidden;
}
.hero-copy {
  width: min(760px, 74vw);
  position: relative;
  z-index: 2;
}
.eyebrow,
.index,
.mauro-kicker {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d26949;
}
.hero h1,
.intro h2,
.history h2,
.source h2,
.translation h2 {
  font-size: clamp(66px, 10.5vw, 155px);
  line-height: 0.76;
  letter-spacing: -0.075em;
  margin: 0.2em 0;
  font-weight: 600;
}
.hero h1 em,
.intro h2 em,
.history h2 em,
.source h2 em,
.translation h2 em {
  font:
    italic 400 0.72em/.85 "PT Serif",
    serif;
  color: var(--paper);
}
.lead {
  font:
    400 clamp(18px, 1.6vw, 24px)/1.5 "PT Serif",
    serif;
  max-width: 570px;
  color: #c3ac89;
}
.cta {
  display: flex;
  width: 265px;
  justify-content: space-between;
  border-bottom: 1px solid var(--cream);
  padding: 16px 0;
  margin-top: 28px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.cta b {
  color: #d26949;
  font-size: 18px;
}
.hero figure {
  margin: 7vw 0 0;
}
.hero-strip {
  height: clamp(170px, 21vw, 330px);
  overflow: auto hidden;
  border: 1px solid #60452f;
  background: #080503;
  scrollbar-color: var(--red) #21160f;
}
.hero-strip img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.hero figcaption {
  margin-top: 12px;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.14em;
}
.route {
  position: absolute;
  right: -5vw;
  top: 18%;
  width: 38vw;
  transform: rotate(-7deg);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  color: #d26949;
  font-size: 8px;
  letter-spacing: 0.12em;
}
.route i {
  height: 2px;
  background: var(--red);
  position: relative;
}
.route i:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid #d26949;
  border-radius: 50%;
  right: -2px;
  top: -4px;
}
.route b {
  padding: 0 9px;
  font-weight: 500;
}
.intro,
.history,
.translation,
.source {
  padding: 10vw 4vw;
  border-top: 1px solid var(--line);
}
.intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
}
.intro h2 {
  font-size: clamp(56px, 8vw, 118px);
  margin-top: 0;
}
.intro > div > p {
  font:
    400 clamp(21px, 2.2vw, 32px)/1.55 "PT Serif",
    serif;
  max-width: 1050px;
}
.viewer-section {
  background: #090604;
  border-block: 1px solid var(--line);
  position: relative;
}
.viewer-bar {
  height: 48px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.13em;
  color: #b69a72;
}
.viewer-bar span:last-child {
  color: #725c43;
}
#map-viewer {
  height: min(72vw, 720px);
  min-height: 430px;
  background: #070402;
}
.viewer-actions {
  display: flex;
  gap: 1px;
  background: #352318;
}
.viewer-actions button {
  flex: 1;
  border: 0;
  border-top: 1px solid #5a3c28;
  background: #18100b;
  color: #bfa883;
  padding: 15px 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  cursor: pointer;
}
.viewer-actions button:hover,
.viewer-actions button.active {
  background: var(--red);
  color: #fff;
}
.legend {
  padding: 8vw 4vw;
  display: grid;
  grid-template-columns: 0.75fr repeat(3, 1fr);
  gap: 4vw;
}
.legend article {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.glyph {
  display: block;
  height: 58px;
  color: #d26949;
  font:
    40px "PT Serif",
    serif;
}
.glyph.road {
  letter-spacing: -0.2em;
}
.legend h3 {
  font:
    400 26px "PT Serif",
    serif;
  margin: 10px 0;
}
.legend article p {
  color: #ad9878;
}
.history {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8vw;
  background: #110b07;
}
.history h2 {
  font-size: clamp(52px, 7vw, 104px);
}
.history-head > p:last-child {
  color: #af9877;
  max-width: 540px;
  font:
    18px/1.55 "PT Serif",
    serif;
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  display: grid;
  grid-template-columns: 115px 1fr;
  border-top: 1px solid var(--line);
  padding: 25px 0;
  gap: 25px;
}
.timeline time {
  color: #d26949;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.timeline h3 {
  margin: 0 0 8px;
  font:
    400 24px "PT Serif",
    serif;
}
.timeline p {
  margin: 0;
  color: #b09a7a;
}
.translation {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 7vw;
  background: #c2a76f;
  color: var(--ink);
}
.translation .index {
  color: var(--red);
}
.translation h2 {
  color: var(--ink);
  font-size: clamp(58px, 8vw, 115px);
}
.translation h2 em {
  color: #6d2d1c;
}
.translation-head > p:last-child {
  font:
    18px/1.55 "PT Serif",
    serif;
  max-width: 450px;
}
.mauro-card {
  padding: 6vw;
  border: 1px solid #745a2c;
  position: relative;
  background: radial-gradient(circle at 50% 40%, #dec88f, #b89d62);
  box-shadow: inset 0 0 80px #6f4d2444;
}
.mauro-card:before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid #80653566;
  pointer-events: none;
}
.compass {
  text-align: center;
  color: #7b291d;
  font-size: 48px;
}
.mauro-kicker {
  text-align: center;
  color: #7b291d;
}
.mauro-card blockquote {
  font:
    italic clamp(24px, 2.8vw, 40px)/1.28 "PT Serif",
    serif;
  text-align: center;
  margin: 35px 0;
}
.mauro-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 32px;
}
.mauro-notes p {
  font:
    15px/1.55 "PT Serif",
    serif;
}
.disclaimer {
  border-top: 1px solid #856932;
  margin-top: 30px;
  padding-top: 18px;
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.source {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
}
.source h2 {
  font-size: clamp(60px, 8vw, 115px);
  margin-top: 0;
}
.source > div > p {
  font:
    18px/1.6 "PT Serif",
    serif;
  max-width: 800px;
  color: #bba583;
}
.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 35px 0;
}
.source-links a {
  border: 1px solid #6c4a32;
  padding: 14px 18px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.source-links a:first-child {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.source .source-note {
  font-size: 13px;
  color: #826d52;
}
footer {
  padding: 40px 4vw;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #937d60;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
footer p {
  text-align: center;
}
.openseadragon-container:focus {
  outline: 3px solid #d26949;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #000;
}
@media (max-width: 800px) {
  .topbar {
    height: 64px;
    padding: 0 5vw;
  }
  .topbar > span,
  .topbar > a:last-child {
    display: none;
  }
  .hero {
    padding: 18vw 5vw 12vw;
  }
  .hero-copy {
    width: 100%;
  }
  .hero h1 {
    font-size: 17vw;
  }
  .route {
    display: none;
  }
  .hero figure {
    margin-top: 18vw;
  }
  .hero-strip {
    height: 180px;
  }
  .intro,
  .history,
  .translation,
  .source {
    grid-template-columns: 1fr;
    padding: 20vw 5vw;
  }
  .intro h2,
  .history h2,
  .translation h2,
  .source h2 {
    font-size: 15vw;
  }
  .viewer-bar span:last-child {
    display: none;
  }
  #map-viewer {
    height: 60svh;
    min-height: 390px;
  }
  .viewer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .legend {
    grid-template-columns: 1fr;
    padding: 16vw 5vw;
  }
  .legend .index {
    margin-bottom: 30px;
  }
  .timeline li {
    grid-template-columns: 85px 1fr;
    gap: 14px;
  }
  .mauro-card {
    padding: 12vw 8vw;
  }
  .mauro-notes {
    grid-template-columns: 1fr;
  }
  .source-links {
    display: grid;
  }
  .source-links a {
    text-align: center;
  }
  footer {
    align-items: flex-start;
    gap: 25px;
    flex-direction: column;
  }
  footer p {
    text-align: left;
  }
}

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

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

/* --- контраст: приведено к WCAG AA ----------------------------------
   Значения посчитаны: тот же тон и насыщенность, другая светлота —
   минимальная, при которой пара «текст/фон» проходит норму. Область
   действия — секция, которая задаёт фон: один и тот же .index на тёмной
   и на светлой полосе требует разных цветов. */
/* 3.81→4.63 при норме 4.5 на #17100a ×1 — «Факсимиле местами яснее нынешней р» */
#top .source .source-note{color:#927a5c}
/* 3.2→4.63 при норме 4.5 на #090604 ×1 — «КОЛЕСО — МАСШТАБ · ТЯНИТЕ КАРТУ — » */
#viewer .viewer-bar span:last-child{color:#907455}
/* 3.37→4.66 при норме 4.5 на #d0b77f ×1 — «03 / Четыре остановки» */
.stops .eyebrow, .stops .index, .stops .mauro-kicker{color:#822b1b}
/* 2.83→4.63 при норме 4.5 на #c2a76f ×1 — «05 / Перевод в стиле карты Мауро» */
.translation .index{color:#6f2517}

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

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


/* Единый клавиатурный фокус: светлый контур и контрастный внешний контур. */
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px #000}