/* ===============================================
   Макет: Playfair Display. Ширина экрана 1440px.
   Высоты экранов: 900 + 1800 + 900 + 900 + 778
   =============================================== */

/* Сбрасываем отступы у всех нужных тегов, чтобы они не сдвигали картинки */
body,
h1,
h2,
ul,
li,
p {
  margin: 0;
  padding: 0;
}

/* Плавная прокрутка при нажатии на ссылки меню */
html {
  scroll-behavior: smooth;
}

/* Чёрный фон страницы, как в макете */
body {
  background-color: #000000;
  box-sizing: border-box;
}

/* Общая обёртка. Ширина 1440px, по центру экрана.
   overflow-x: hidden прячет лишний 1px, который есть у картинки image 16 (1441px) */
.page {
  width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

/* Все картинки — блочные, чтобы под ними не появлялась белая полоска */
img {
  display: block;
}

/* У списка убираем маркеры (точки) */
ul {
  list-style-type: none;
}

/* Класс .item — любая картинка, которую мы ставим на точное место.
   position: absolute вырывает картинку из потока и позволяет задать left/top.
   Отсчёт идёт от ближайшего родителя с position: relative */
.item {
  position: absolute;
}

/* ====== МЕНЮ ======
   position: fixed — панель всегда сверху экрана, даже при прокрутке.
   left: 0 и right: 0 + justify-content: center — ставим меню по центру */
.menu {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
}

/* Список ссылок в ряд. Фон чёрный полупрозрачный, чтобы текст читался
   и на чёрном, и на сиреневом, и на сером фоне */
.menu-list {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.85);
  border: 1px solid #ac88d6;
  border-radius: 40px;
}

/* Ссылка — курсивная антиква, сиреневая, как заголовки на макете */
.menu-link {
  display: block;
  padding: 6px 16px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  color: #ac88d6;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
}

/* При наведении: сиреневая «плашка» и чёрный текст */
.menu-link:hover {
  background-color: #ac88d6;
  color: #000000;
}

/* Метка для ссылки «глифы» (невидимая). Заголовок «глифы» стоит около 910px
   от начала секции, берём чуть выше, чтобы меню его не закрывало */
.anchor-glyphs {
  position: absolute;
  left: 0;
  top: 840px;
  width: 1px;
  height: 1px;
}

/* ====== ЭКРАН 1: заглавный ====== */
.hero {
  width: 1440px;
  height: 900px;
}
.hero-img {
  width: 1440px;
  height: 900px;
}

/* ====== ЭКРАНЫ 2-3: о шрифте и глифы ======
   position: relative — чтобы кляксы (absolute) отсчитывали координаты от этого блока.
   z-index: 2 — кляксы нижнего ряда заходят на следующую секцию, и они должны быть выше неё */
.about {
  position: relative;
  width: 1440px;
  height: 1800px;
  z-index: 2;
}
.about-bg {
  width: 1440px;
  height: 1800px;
}

/* Слой для значков: накрывает весь фон, координаты (0,0) — левый верх секции */
.glyphs {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1800px;
}

/* Ниже у каждой картинки свои left и top (координаты из макета) */

/* ====== Чёрные кляксы ====== */
/* большая капля по центру (внутри неё &) */
.blob-teardrop {
  left: 698px;
  top: 1301px;
}
/* тонкий контур этой же капли */
.blob-teardrop-line {
  left: 698px;
  top: 1301px;
}
/* клякса с Ç и Æ */
.blob-01 {
  left: 155px;
  top: 1057px;
}
/* овальная клякса с Ø */
.blob-02 {
  left: 526px;
  top: 1081px;
}
/* клякса с € и @ */
.blob-03 {
  left: 817px;
  top: 1108px;
}
/* клякса с цветком и Ћ */
.blob-04 {
  left: 1040px;
  top: 1047px;
}
/* узкая клякса слева с мечом † */
.blob-05 {
  left: 11px;
  top: 1263px;
}
/* клякса с £ */
.blob-06 {
  left: 165px;
  top: 1332px;
}
/* маленькая клякса с ∞ */
.blob-07 {
  left: 590px;
  top: 1347px;
}
/* клякса с i и ≈ */
.blob-08 {
  left: 844px;
  top: 1400px;
}
/* клякса с /, ✲ и ✣ */
.blob-09 {
  left: 1040px;
  top: 1315px;
}
/* клякса с чёрточкой справа */
.blob-10 {
  left: 1270px;
  top: 1563px;
}
/* клякса с { и φ */
.blob-11 {
  left: 13px;
  top: 1631px;
}
/* клякса с Ñ, é */
.blob-12 {
  left: 237px;
  top: 1707px;
}
/* большая клякса с ñ, цветком и Ü */
.blob-13 {
  left: 497px;
  top: 1586px;
}
/* клякса с ножницами */
.blob-14 {
  left: 759px;
  top: 1561px;
}
/* клякса с №, звездой и „ */
.blob-15 {
  left: 883px;
  top: 1640px;
}
/* клякса с буквой Â */
.blob-16 {
  left: 428px;
  top: 1389px;
}
/* клякса со стрелой */
.blob-17 {
  left: 1274px;
  top: 1710px;
}

/* ====== Капельки ====== */
.drop-01 {
  left: 203px;
  top: 1367px;
}
.drop-02 {
  left: 429px;
  top: 1367px;
}
.drop-03 {
  left: 894px;
  top: 1733px;
}
.drop-04 {
  left: 1314px;
  top: 1395px;
}
.drop-05 {
  left: 1023px;
  top: 1425px;
}
.drop-06 {
  left: 543px;
  top: 1579px;
}
.drop-07 {
  left: 1294px;
  top: 1405px;
}
.drop-08 {
  left: 1084px;
  top: 1454px;
}
.drop-09 {
  left: 368px;
  top: 1619px;
}
.drop-10 {
  left: 324px;
  top: 1631px;
}
.drop-11 {
  left: 1287px;
  top: 1425px;
}
.drop-12 {
  left: 532px;
  top: 1600px;
}
.drop-13 {
  left: 1045px;
  top: 1413px;
}
.drop-14 {
  left: 342px;
  top: 1631px;
}
.drop-15 {
  left: 1048px;
  top: 1430px;
}
.drop-16 {
  left: 338px;
  top: 1643px;
}

/* ====== Глифы ====== */
.g-ccedilla {
  left: 215px;
  top: 1106px;
}
.g-ae {
  left: 333px;
  top: 1154px;
}
.g-oslash {
  left: 561px;
  top: 1109px;
}
.g-euro {
  left: 848px;
  top: 1149px;
}
.g-at {
  left: 917px;
  top: 1257px;
}
.g-flower-top {
  left: 1302px;
  top: 903px;
}
.g-cyr-tshe {
  left: 1157px;
  top: 1152px;
}
.g-arrow-small {
  left: 1073px;
  top: 1187px;
}
.g-asterisk-flower {
  left: 1225px;
  top: 1085px;
}
.g-sword {
  left: 50px;
  top: 1336px;
}
.g-pound {
  left: 212px;
  top: 1420px;
}
.g-a-circ {
  left: 433px;
  top: 1398px;
}
.g-infinity {
  left: 619px;
  top: 1378px;
}
.g-ampersand {
  left: 721px;
  top: 1466px;
}
.g-i-dots {
  left: 853px;
  top: 1411px;
}
.g-approx {
  left: 963px;
  top: 1513px;
}
.g-slash {
  left: 1133px;
  top: 1353px;
}
.g-asterisk {
  left: 1066px;
  top: 1435px;
}
.g-cross-dots {
  left: 1169px;
  top: 1484px;
}
.g-flower4 {
  left: 1204px;
  top: 1373px;
}
.g-brace {
  left: 35px;
  top: 1651px;
}
.g-phi {
  left: 153px;
  top: 1667px;
}
.g-n-tilde {
  left: 261px;
  top: 1813px;
}
.g-e-acute {
  left: 304px;
  top: 1749px;
}
.g-dagger2 {
  left: 403px;
  top: 1735px;
}
.g-scissors {
  left: 775px;
  top: 1588px;
}
.g-flower {
  left: 644px;
  top: 1709px;
}
.g-u-uml {
  left: 582px;
  top: 1800px;
}
.g-number {
  left: 941px;
  top: 1711px;
}
.g-star {
  left: 1056px;
  top: 1688px;
}
.g-quote {
  left: 1218px;
  top: 1765px;
}
.g-check {
  left: 1283px;
  top: 1609px;
}
.g-arrow {
  left: 1323px;
  top: 1736px;
}
.g-clover {
  left: 1049px;
  top: 1819px;
}
.g-dot {
  left: 809px;
  top: 1732px;
}
.g-caret {
  left: 80px;
  top: 1706px;
}
.g-wedge {
  left: 187px;
  top: 1246px;
}

/* ====== ЭКРАН 4: особенности начертаний ======
   Секция высотой 900px. Все слои внутри — absolute.
   z-index: 1 — ниже, чем у .about, чтобы нижние кляксы были видны поверх */
.features {
  position: relative;
  width: 1440px;
  height: 900px;
  z-index: 1;
}

/* Серая бумага — самый нижний слой */
.features-paper {
  left: 0;
  top: 0;
  width: 1441px;
  height: 901px;
}

/* Сиреневая волна сверху (она накрывает верх бумаги) */
.features-wave-top {
  left: 0;
  top: 0;
  width: 1439px;
  height: 487px;
}

/* Чёрная волна снизу (накрывает низ бумаги).
   Она чуть выходит за низ секции, но там всё равно чёрный фон */
.features-wave-bottom {
  left: 0;
  top: 542px;
  width: 1440px;
  height: 488px;
}

/* Заголовок «особенности начертаний» */
.features-title .item {
  left: 139px;
  top: 247px;
  width: 1245px;
  height: 102px;
}

/* --- Буква X --- */
.x-base {
  left: 134px;
  top: 340px;
  width: 556px;
  height: 435px;
}
/* Фиолетовые куски лежат поверх буквы, поэтому они позже в HTML */
.x-part-top {
  left: 373px;
  top: 397px;
}
.x-part-strip {
  left: 280px;
  top: 522px;
}
.x-part-right {
  left: 337px;
  top: 609px;
}
.x-part-left {
  left: 160px;
  top: 672px;
}
.x-part-small {
  left: 154px;
  top: 442px;
}

/* --- Слова справа --- */
.word-contrast {
  left: 802px;
  top: 396px;
}
.word-drops {
  left: 866px;
  top: 560px;
}
.word-serifs {
  left: 835px;
  top: 711px;
}

/* ====== ЭКРАН 5: play / fair ====== */
.styles {
  width: 1440px;
  height: 900px;
}
.styles-img {
  width: 1440px;
  height: 900px;
}

/* ====== ЭКРАН 6: выбери свой эскиз ======
   position: relative — чтобы листы-эскизы считали координаты от этой секции */
.sketches {
  position: relative;
  width: 1440px;
  height: 778px;
}
.sketches-img {
  width: 1440px;
  height: 778px;
}

/* Общие стили листа-эскиза.
   transition — чтобы выезд и увеличение шли плавно, а не рывком */
.sketch {
  transition: 0.4s;
}

/* При наведении: лист поднимается над остальными (z-index больше, чем у всех)
   и немного увеличивается (scale) */
.sketch:hover {
  z-index: 20;
  transform: scale(1.1);
}

/* Положение (left/top) и «этаж» (z-index) каждого листа.
   Чем больше z-index, тем выше лист лежит в обычном состоянии */
.sketch-pipe {
  left: 492px;
  top: 183px;
  z-index: 1;
}
.sketch-h {
  left: 865px;
  top: 335px;
  z-index: 2;
}
.sketch-clover {
  left: 388px;
  top: 417px;
  z-index: 3;
}
.sketch-eye {
  left: 355px;
  top: 271px;
  z-index: 4;
}
.sketch-y {
  left: 613px;
  top: 335px;
  z-index: 5;
}
.sketch-curl {
  left: 815px;
  top: 208px;
  z-index: 6;
}
.sketch-addition {
  left: 582px;
  top: 578px;
  z-index: 7;
}