:root {
  --ink: #e8e2d1;
  --dim: #96988f;
  --red: #c94d3d;
  --line: #303632;
  --bg: #080b0a;
  --paper: #c8b98f;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  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='.9' numOctaves='3'/%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: 11px;
  letter-spacing: 0.16em;
}
.topbar a {
  color: var(--ink);
  text-decoration: none;
}
.brand span {
  color: var(--red);
  margin-right: 8px;
}
.hero {
  min-height: calc(100vh - 74px);min-height: calc(100svh - 74px);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 4vw;
  padding: 6vw 4vw;
  align-items: center;
}
.hero h1,
.intro h2,
.history h2,
.sources h2 {
  font-size: clamp(56px, 8vw, 130px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  margin: 0.2em 0;
  font-weight: 600;
}
.hero h1 em,
.intro h2 em,
.history h2 em {
  font-family: "PT Serif", serif;
  font-weight: 400;
  color: var(--paper);
}
.hero .lead {
  max-width: 530px;
  color: #bdc0b8;
  font:
    22px/1.5 "PT Serif",
    serif;
}
.hero a,
.sources a,
footer a {
  color: var(--ink);
  text-underline-offset: 5px;
}
.hero figure {
  margin: 0;
  transform: rotate(0.4deg);
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 22px 70px #000;
}
.hero figcaption,
.plate figcaption {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-top: 12px;
}
.eyebrow,
.index,
.stamp {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.intro,
.history,
.note,
.sources {
  padding: 9vw 4vw;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
}
.intro h2 {
  font-size: clamp(42px, 6vw, 88px);
  margin-top: 0;
}
.intro > div > p {
  font:
    clamp(20px, 2vw, 30px)/1.55 "PT Serif",
    serif;
  max-width: 1000px;
}
.systems {
  padding: 7vw 4vw;
  background: #0d100f;
  border-top: 1px solid var(--line);
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.hint {
  color: var(--dim);
  font-size: 13px;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 42px 0 24px;
  border: 1px solid var(--line);
}
.tabs button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 20px;
  color: var(--dim);
  font: 600 15px Manrope;
  text-align: left;
  cursor: pointer;
}
.tabs button:last-child {
  border: 0;
}
.tabs button span {
  display: block;
  font-size: 10px;
  margin-top: 6px;
}
.tabs button[aria-selected="true"] {
  background: var(--red);
  color: #fff;
}
.comparison {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
.model,
.plate {
  margin: 0;
  min-width: 0;
}
.model {
  position: relative;
  aspect-ratio: 4/3;
  background: radial-gradient(circle, #171d1a, #060807 72%);
  overflow: hidden;
}
.cosmos {
  position: absolute;
  inset: 5%;
  display: grid;
  place-items: center;
}
.center {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #708a95;
  box-shadow: 0 0 24px #83a6b8;
}
.center.sun,
.body.sun {
  background: #d29d45;
  box-shadow: 0 0 25px #e3b454;
}
.center span {
  position: absolute;
  top: 48px;
  font-size: 8px;
  letter-spacing: 0.12em;
}
.orbit {
  position: absolute;
  width: calc(12% + var(--i) * 11%);
  aspect-ratio: 1;
  border: 1px solid #586159;
  border-radius: 50%;
  animation: spin var(--speed) linear infinite;
}
.orbit .body {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b7b19f;
  left: 50%;
  top: -5px;
}
.orbit span {
  position: absolute;
  left: 51%;
  top: 7px;
  font-size: 7px;
  color: #878d86;
}
.firmament {
  position: absolute;
  inset: 1%;
  border: 1px dashed #6c746e;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #737a74;
}
.paused .orbit {
  animation-play-state: paused;
}
.motion {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  background: #080b0acc;
  border: 1px solid #59605b;
  color: var(--ink);
  padding: 9px 12px;
  font: 10px Manrope;
  cursor: pointer;
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.reading {
  padding: 5vw 0 2vw;
}
.reading h2 {
  font-size: clamp(40px, 7vw, 96px);
  margin: 0.15em 0;
}
.translation {
  font:
    italic clamp(20px, 2.3vw, 34px)/1.35 "PT Serif",
    serif;
  color: var(--paper);
  max-width: 1100px;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  margin-top: 4vw;
}
.columns p {
  font:
    18px/1.65 "PT Serif",
    serif;
}
.columns p:last-child {
  border-left: 2px solid var(--red);
  padding-left: 28px;
  color: #d3c6a6;
}
.history-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6vw;
}
.history h2 {
  font-size: clamp(42px, 6vw, 82px);
  margin-top: 0;
}
.timeline article {
  padding: 0 0 32px 80px;
  border-left: 1px solid var(--line);
  position: relative;
}
.timeline time {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  background: var(--red);
  padding: 5px 8px;
  font-size: 10px;
}
.timeline h3 {
  margin: 0 0 8px;
  font-size: 24px;
}
.timeline p,
.sources p {
  color: #b6bab2;
  line-height: 1.65;
}
.note blockquote {
  margin: 0;
  font:
    italic clamp(32px, 5vw, 72px)/1.12 "PT Serif",
    serif;
  color: var(--paper);
}
.note > p:last-child {
  grid-column: 2;
  max-width: 700px;
  color: var(--dim);
}
.sources h2 {
  font-size: clamp(42px, 6vw, 82px);
  margin-top: 0;
}
footer {
  border-top: 1px solid var(--line);
  padding: 35px 4vw;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.12em;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 15vw;
  }
  .hero-copy {
    order: 2;
  }
  .hero h1 {
    font-size: 19vw;
  }
  .intro,
  .history,
  .note,
  .sources {
    grid-template-columns: 1fr;
    padding: 18vw 5vw;
  }
  .history-grid {
    grid-template-columns: 1fr;
  }
  .comparison {
    grid-template-columns: 1fr;
  }
  .tabs button {
    padding: 14px 9px;
    font-size: 12px;
  }
  .columns {
    grid-template-columns: 1fr;
  }
  .note > p:last-child {
    grid-column: auto;
  }
  .section-head {
    display: block;
  }
  .topbar {
    padding: 0 5vw;
  }
  .topbar > span {
    display: none;
  }
  .systems {
    padding: 15vw 5vw;
  }
  .plate img {
    aspect-ratio: auto;
  }
  footer {
    gap: 20px;
  }
}

.article-body {
  padding: 9vw 4vw;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
}
.article-copy {
  max-width: 1100px;
}
.intro > div > p + p {
  font-size: clamp(18px, 1.65vw, 24px);
  color: #b8bbb4;
}
.dek {
  margin: 0 0 5vw;
  font: italic clamp(26px, 3.1vw, 48px) / 1.25 "PT Serif", serif;
  color: var(--paper);
}
.article-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
}
.article-columns h3 {
  margin: 0 0 16px;
  font-size: 24px;
}
.article-columns p {
  font: 18px/1.7 "PT Serif", serif;
  color: #c0c3bb;
}
.article-copy aside {
  margin-top: 5vw;
  padding: 28px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 25px;
}
.article-copy aside span {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.article-copy aside p {
  margin: 0;
  font: 19px/1.55 "PT Serif", serif;
}

@media (max-width: 800px) {
  .article-body {
    grid-template-columns: 1fr;
    padding: 18vw 5vw;
  }
  .article-columns,
  .article-copy aside {
    grid-template-columns: 1fr;
  }
}

/* Таблицы из Викисклада почти квадратные (примерно 6:5), а не разворот 4:3,
   как прежний флорентийский снимок: без ограничения по высоте обложка
   выдавливала заголовок за экран, а кадрирование резало гравюру. */
.hero img{max-height:76vh;width:auto;height:auto;max-width:100%;margin:0 auto}
.plate img{aspect-ratio:auto;height:auto;object-fit:contain;background:#0b0d0c}
@media(max-width:800px){.hero img{max-height:52vh}}

/* Метка года центрировалась на линии таймлайна (translateX(-50%)), и на узком
   экране половина плашки уезжала за край экрана. Прижимаем её к линии справа. */
@media(max-width:560px){.timeline time{transform:none;left:6px}}

/* Все орбиты стартовали с одного угла: подписи планет (7 px) выстраивались
   в столбик у центра и налезали друг на друга — особенно на телефоне.
   Разводим стартовые фазы отрицательной задержкой. */
.orbit{animation-delay:calc(var(--i) * -2.6s)}
/* Ниже 560 px диаметр схемы ~330 px: подписи в 7 px нечитаемы и всё равно
   сталкиваются на любых углах — на телефоне оставляем только точки и центр. */
@media(max-width:560px){.orbit span{display:none}}
/* Кнопка паузы стоит в левом нижнем углу схемы, а подпись «сфера неподвижных
   звёзд» прижата к низу окружности — на узком экране они сходились. Подпись
   поднимаем над кнопкой. */
@media(max-width:560px){.firmament{padding-bottom:52px}}

/* Длинное русское слово в крупном заголовке шире экрана 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 на тёмной
   и на светлой полосе требует разных цветов. */
/* 4.2→4.67 при норме 4.5 на #0d100f ×2 — «03 / Выберите устройство мира» */
#systems .eyebrow, #systems .index, #systems .stamp{color:#cd594a}
/* 4.34→4.64 при норме 4.5 на #080b0a ×1 — «КАК СМОТРЕТЬ» */
body .article-copy aside span{color:#cb5546}
/* 4.34→4.64 при норме 4.5 на #080b0a ×5 — «AMSTERDAM · 1660» */
body .eyebrow, body .index, body .stamp{color:#cb5546}
/* То же, что в Рамелли: кремовая дата на красной плашке, 3.51. */
.timeline time{background:#92382b}

/* --- тач-цели: минимум 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}}

/* Подпись «сфера неподвижных звёзд» внутри схемы была 7 px. */
.firmament{font-size:9px}
/* Подписи тел на схеме неба были 8 px. */
.orbit span,.center span{font-size:9px}


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