/* Главный файл */
@import url("reset.css");
@import url("content.css");

/* Макет в Figma имеет ширину 1443 px.
   Используем пропорциональные отступы в vw,
   чтобы сайт растягивался на весь экран. */
html,
body,
.page {
  width: 100%;
}

html,
body {
  overflow-x: hidden;
}

body {
  background: #130505;
}

.page {
  background-color: #ffffff;
  background-image: url("../images/illustration-no-text.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100.55% auto;
}

/* На широком экране рисунки — в общем SVG без текста. */
.mobile-art {
  display: none;
}

/* 1. Обложка */
.cover {
  height: 65.5vw;
  padding-top: 10vw;
  padding-left: 4.5vw;
}

/* 2. Паспорт */
.passport {
  height: 60.1vw;
  display: flex;
}

.author {
  width: 40%;
  padding-top: 43.3vw;
}

.passport-details {
  width: 46.7%;
  margin-left: 3.2%;
  padding-top: 15.6vw;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 5.15vw;
}

.detail-row p:last-child {
  text-align: right;
}

.story {
  margin-top: 0.1vw;
}

.story p:first-child {
  margin-bottom: 0.5vw;
}

/* 3. Карта */
.influence {
  height: 95vw;
  padding-top: 9.1vw;
}

.influence h2 {
  margin-bottom: 21.7vw;
}

.map-labels {
  width: 70%;
  margin-left: 19.4%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, 1.7vw);
}

.canada {
  grid-column: 1 / 3;
  grid-row: 1;
}

.usa {
  grid-column: 3 / 5;
  grid-row: 1;
}

.russia {
  grid-column: 8 / 12;
  grid-row: 1;
}

.mexico {
  grid-column: 2 / 5;
  grid-row: 3;
}

.nigeria {
  grid-column: 5 / 8;
  grid-row: 4;
}

.brazil {
  grid-column: 2 / 5;
  grid-row: 8;
}

.africa {
  grid-column: 6 / 9;
  grid-row: 6;
}

.indonesia {
  grid-column: 10 / 13;
  grid-row: 6;
}

.australia {
  grid-column: 10 / 13;
  grid-row: 9;
}

.numbers {
  width: 79%;
  margin-left: 16.9%;
  margin-top: 29vw;
  display: flex;
  gap: 14.2vw;
}

.number {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  width: 23vw;
}

/* 4. Глифы */
.outlaws {
  height: 67vw;
  padding-top: 24.7vw;
}

.outlaws-intro {
  margin-left: 52.2%;
  width: 42%;
}

.outlaws-intro h2 {
  margin-bottom: 1.6vw;
}

.outlaws-text {
  margin-left: 7.3%;
  margin-top: 3vw;
  width: 44%;
}

.outlaws-text p {
  margin-bottom: 1.8vw;
}

/* 5. Реестр */
.registry {
  height: 69vw;
  padding-top: 16.1vw;
}

.registry h2 {
  margin-left: 26.6%;
  width: 32%;
  text-align: center;
  white-space: nowrap;
}

/* 6. Финальный текст */
.conclusion {
  height: 102vw;
  padding-top: 36.7vw;
}

.conclusion-text {
  width: 42.6%;
  margin-left: 27.6%;
}

.conclusion-text p {
  margin-bottom: 2vw;
}

/* Внизу макета было лишних 35 px светлого фона.
   Уменьшаем только пустое место под подвалом;
   все позиции и размеры текста остаются прежними. */
.footer {
  height: 10vw;
  padding-top: 3.05vw;
  padding-right: 4.9%;
}

/* Телефон: текст и изображения идут друг за другом. */
@media (max-width: 750px) {
  body {
    background: #ffffff;
  }

  .page {
    background-image: none;
    min-height: auto;
  }

  .cover,
  .passport,
  .influence,
  .outlaws,
  .registry,
  .conclusion,
  .footer {
    height: auto;
    padding: 30px 20px;
  }

  .mobile-art {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
  }

  .cover {
    background: #fff;
  }

  .passport {
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .passport-details {
    width: 100%;
    margin: 0;
    padding: 0;
    order: 1;
  }

  .author {
    width: 100%;
    padding: 15px 0;
    order: 2;
  }

  .passport .mobile-art {
    order: 3;
  }

  .detail-row {
    min-height: 45px;
    height: auto;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid #140907;
  }

  .detail-row p {
    width: 50%;
  }

  .story {
    padding-top: 15px;
  }

  .influence {
    background: #080808;
  }

  .influence h2 {
    margin-bottom: 25px;
  }

  .map-labels {
    width: 100%;
    margin-left: 0;
    display: block;
    line-height: 1.7;
  }

  .map-labels span {
    display: inline-block;
    margin-right: 10px;
  }

  .numbers {
    width: 100%;
    margin: 24px 0;
    gap: 10px;
  }

  .number {
    gap: 5px;
  }

  .outlaws {
    background: #a70812;
  }

  .outlaws-intro,
  .outlaws-text {
    width: 100%;
    margin: 0;
  }

  .outlaws-intro h2 {
    margin-bottom: 15px;
  }

  .outlaws-text {
    margin-top: 20px;
  }

  .outlaws-text p {
    margin-bottom: 15px;
  }

  .registry {
    background: #a70812;
  }

  .registry h2 {
    width: 100%;
    margin: 0;
    white-space: normal;
  }

  .conclusion {
    background: #a70812;
  }

  .conclusion-text {
    width: 100%;
    margin: 0;
  }

  .footer {
    background: #fff;
    text-align: right;
    padding-bottom: 0;
  }
}