@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

@font-face {
  font-family: 'VetiverSerif';
  src: url('https://vostok-seasons.art/index_files/VetiverSerif.otf') format('opentype'),
       url('https://vostok-seasons.art/index_files/VetiverSerif.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Inter', Arial, sans-serif;
}

body {
  background: white;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  position: relative;
  background: white;
}

/* Header Background */
.header-bg {
  position: absolute;
  width: 100vw;
  height: calc(136 / 1593 * 100vw);
  left: 0;
  top: 0;
  background: #000;
  z-index: 50;
}

/* Navigation */
.nav-0 {
  position: absolute;
  left: calc(63 / 1593 * 100vw);
  top: calc(36 / 1593 * 100vw);
  width: calc(287 / 1593 * 100vw);
  height: calc(73 / 1593 * 100vw);
  z-index: 100;
}

.nav-0 img {
  width: 100%;
  height: 100%;
}

.nav-text {
  position: absolute;
  color: #FFF;
  font-family: 'VetiverSerif', serif;
  font-size: calc(39.577 / 1593 * 100vw);
  font-weight: 400;
  line-height: 90%;
  letter-spacing: calc(2.375 / 1593 * 100vw);
  text-transform: uppercase;
  left: calc(145 / 1593 * 100vw);
  top: calc(37 / 1593 * 100vw);
  width: calc(213 / 1593 * 100vw);
  z-index: 100;
}

.nav-1, .nav-2, .nav-3, .nav-4, .nav-5 {
  position: absolute;
  color: #FFF;
  top: calc(53 / 1593 * 100vw);
  font-size: calc(26.55 / 1593 * 100vw);
  font-weight: 300;
  z-index: 100;
}

.nav-item {
  position: absolute;
  font-size: calc(4 / 257 * 100vw);
  font-weight: 300;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  top: calc(8.37 / 257 * 100vw);
}

.nav-0 { left: calc(10 / 257 * 100vw); top:calc(4/20*10vw); z-index:100}
.nav-1 { left: calc(89 / 257 * 100vw); }
.nav-2 { left: calc(121 / 257 * 100vw); }
.nav-3 { left: calc(153 / 257 * 100vw); }
.nav-4 { left: calc(183 / 257 * 100vw); }
.nav-5 { left: calc(220 / 257 * 100vw); }


/* Title Text (without title-box background) */
.title-text {
  position: absolute;
  width: calc(1007 / 1593 * 100vw);
  left: calc(35 / 1593 * 100vw);
  top: calc(166 / 1593 * 100vw);
  font-size: calc(81 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(4.832 / 1593 * 100vw);
  line-height: 113%;
  height: calc(273 / 1593 * 100vw);
  z-index: 45;
  background: transparent;
  padding: calc(20 / 1593 * 100vw);
}

/* Gallery Image */
.gallery-image {
  position: absolute;
  width: 100vw;
  height: calc(455 / 1593 * 100vw);
  left: 0;
  top: calc(3439 / 1593 * 100vw);
  object-fit: cover;
  z-index: 5;
}
.image-mask {
  position: absolute;
  left: 0;
  top: calc(700.95 / 257 * 100vw);
  width: 100vw;             /* ширина на всю ширину окна */
  height: auto;             /* высота автоматически, чтобы сохранить пропорции */
  overflow: hidden;
}

.image-mask img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;        /* по желанию: заполнить всю область, обрезая лишнее */
}

/* Jury Section */
.jury-section {
  position: absolute;
  top: calc(970 / 1593 * 100vw);
  left: calc(35 / 1593 * 100vw);
  width: calc(1523 / 1593 * 100vw);
  background: transparent;
  padding: calc(50 / 1593 * 100vw);
  z-index: 20;
}

.jury-title {
  font-size: calc(81 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(4.832 / 1593 * 100vw);
  line-height: 90%;
  margin-bottom: calc(90 / 1593 * 100vw);
  margin-left: calc(-25 / 1593 * 100vw);
}

.jury-row-1,
.jury-row-2 {
  display: flex;
  gap: calc(50 / 1593 * 100vw);
  margin-bottom: calc(50 / 1593 * 100vw);
  margin-left: calc(13 / 1593 * 100vw);
  margin-right: calc(13 / 1593 * 100vw);
}

.jury-card {
  flex: 1;
  display: flex;
  gap: calc(30 / 1593 * 100vw);
  background: #fff;
  border-radius: calc(25.168 / 1593 * 100vw);
  overflow: hidden;
  box-shadow: calc(-6.267 / 1593 * 100vw) 0 calc(25.07 / 1593 * 100vw) rgba(0,0,0,0.25), 0 calc(3.356 / 1593 * 100vw) calc(5.873 / 1593 * 100vw) rgba(0,0,0,0.25);
}

.jury-card img {
  width: calc(295 / 1593 * 100vw);
  height: calc(470 / 1593 * 100vw);
  object-fit: cover;
  flex-shrink: 0;
  border-radius: calc(25.168 / 1593 * 100vw);
}

.jury-text {
  padding: calc(20 / 1593 * 100vw);
  flex: 1;
}

.jury-card h3 {
  font-size: calc(27 / 1593 * 100vw);
  font-weight: 600;
  color: #000;
  margin-bottom: calc(15 / 1593 * 100vw);
}

.jury-card .role {
  font-size: calc(27 / 1593 * 100vw);
  font-weight: 350;
  color: #000;
  line-height: 1.3;
  margin-bottom: calc(10 / 1593 * 100vw);
}

.jury-card .achievement {
  font-size: calc(27 / 1593 * 100vw);
  font-weight: 350;
  color: rgba(0,0,0,0.71);
  line-height: 1.3;
}

/* Stages Section (Этапы конкурса) */
.stages-section {
  position: absolute;
  top: calc(2300 / 1593 * 100vw);
  left: calc(0 / 1593 * 100vw);
  width: calc(1593 / 1593 * 100vw);
  background: #575757;
  padding: calc(100 / 1593 * 100vw) calc(50 / 1593 * 100vw);
  z-index: 15;
}

.stages-title {
  font-size: calc(81 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: calc(4.832 / 1593 * 100vw);
  line-height: 113%;
  margin-bottom: calc(60 / 1593 * 100vw);
  margin-left: calc(10 / 1593 * 100vw);
}
.description-text {
  position: absolute;
  width: calc(112.06 / 257 * 100vw);
  left: calc(77.04 / 257 * 100vw);
  top: calc(85 / 257 * 100vw);
  font-size: calc(4.28336 / 257 * 100vw);
  font-weight: 320;
  color: black;
  text-align: center;
  line-height: calc(5 / 257 * 100vw);
  z-index: 2;
}

.stages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 / 1593 * 100vw);
  margin-left: calc(13 / 1593 * 100vw);
  margin-right: calc(13 / 1593 * 100vw);
}

.stage-card {
  position: relative;
  background: #fff;
  border-radius: calc(51.874 / 1593 * 100vw);
  padding: calc(40 / 1593 * 100vw);
  box-shadow: 0 calc(2 / 1593 * 100vw) calc(8 / 1593 * 100vw) rgba(0,0,0,0.15);
  height: calc(50 / 1593 * 100vw);
 
}

.stage-number {
  position: absolute;
  top: calc(16 / 1593 * 100vw);
  left: calc(16 / 1593 * 100vw);
  width: calc(50 / 1593 * 100vw);
  height: calc(50 / 1593 * 100vw);
  background: radial-gradient(circle at center, rgba(0,0,0,1), rgba(153,153,153,1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: calc(22 / 1593 * 100vw);
  font-weight: 700;
  text-transform: uppercase;
}

.stage-card h3 {
  font-size: calc(16 / 1593 * 100vw);
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin: calc(-25 / 1593 * 100vw) 0 calc(15 / 1593 * 100vw) 0;
 margin-left: calc(45 / 1593 * 100vw);
  line-height: 1.2;
}

.stage-card p {
  font-size: calc(16 / 1593 * 100vw);
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
margin-left: calc(45 / 1593 * 100vw);
  line-height: 160%;
}

/* Regulations Section */
.regulations-section {
  position: absolute;
  top: calc(3169 / 1593 * 100vw);
  left: calc(35 / 1593 * 100vw);
  width: calc(1523 / 1593 * 100vw);
  background: transparent;
  padding: calc(100 / 1593 * 100vw) calc(50 / 1593 * 100vw);
  z-index: 25;
}

.regulations-title {
  font-size: calc(81 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(4.832 / 1593 * 100vw);
  line-height: 113%;
  margin-bottom: calc(60 / 1593 * 100vw);
  margin-left: calc(-25 / 1593 * 100vw);
}

.regulations-grid {
  display: flex;
  gap: calc(50 / 1593 * 100vw);
  margin-left: calc(13 / 1593 * 100vw);
  margin-right: calc(13 / 1593 * 100vw);
}

.regulation-card {
  flex: 1;
  background-color: rgba(255,255,255,0.9);
  border-radius: calc(24.885 / 1593 * 100vw);
  padding: calc(40 / 1593 * 100vw);
  box-shadow: calc(-2 / 1593 * 100vw) calc(-2 / 1593 * 100vw) calc(4 / 1593 * 100vw) rgba(0,0,0,0.25), 0 calc(3.318 / 1593 * 100vw) calc(5.807 / 1593 * 100vw) rgba(0,0,0,0.25);
  text-align: center;
}

.regulation-card h3 {
  font-size: calc(80 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(4.778 / 1593 * 100vw);
  line-height: 90%;
  margin-bottom: calc(40 / 1593 * 100vw);
}

.regulation-card p {
  font-size: calc(20 / 1593 * 100vw);
  font-weight: 300;
  color: #000;
  line-height: 1.4;
}

/* Finals Section */
.finals-section {
  position: absolute;
  top: calc(4007 / 1593 * 100vw);
  left: calc(35 / 1593 * 100vw);
  width: calc(1523 / 1593 * 100vw);
  background: transparent;
  padding: calc(100 / 1593 * 100vw) calc(50 / 1593 * 100vw);
  text-align: center;
  z-index: 26;
}

.finals-section h2 {
  font-size: calc(81 / 1593 * 100vw);
  font-family: 'VetiverSerif', serif;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: calc(4.832 / 1593 * 100vw);
  line-height: 113%;
  margin-bottom: calc(40 / 1593 * 100vw);
}

.finals-section p {
  font-size: calc(29 / 1593 * 100vw);
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}

/* Footer */
.footer {
  position: absolute;
  top: calc(5303 / 1593 * 100vw);
  left: 0;
  width: 100vw;
  height: calc(420 / 1593 * 100vw);
  background: #000;
  color: #fff;
  padding: calc(100 / 1593 * 100vw) calc(50 / 1593 * 100vw) calc(80 / 1593 * 100vw);
  z-index: 30;
}


/* Text in white */
.white-title {
  position: absolute;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 90%;
  font-family: 'VetiverSerif', serif;
z-index:500;
    
}

.white-1 {
  width: calc(93 / 257 * 100vw);
  left: calc(9.46 / 257 * 100vw);
  top: calc(860 / 257 * 100vw);
  font-size: calc(17.1334 / 257 * 100vw);
  font-weight: 400;
}
.black-box-bottom {
  position: absolute;
  width: calc(273 / 257 * 100vw);
  height: calc(70 / 257 * 100vw);
  left: calc(-6 / 257 * 100vw);
  top: calc(940 / 257 * 100vw);
  background: #000000;
}
.bottom-sticky-content {
  position: absolute;
  bottom: 5%;            /* отступ от нижнего края блока (можно подобрать) */
  left: 50%;
  transform: translateX(-50%);
  width: 40%;            /* ширина относительно родителя */
  text-align: center;
}

.bottom-sticky-content img {
  width: 100%;
  max-width: 47%;        /* или любой другой размер */
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  gap: calc(100 / 1593 * 100vw);
  margin-bottom: calc(60 / 1593 * 100vw);
}

.footer-logo h3 {
  font-family: 'VetiverSerif', serif;
  font-size: calc(106 / 1593 * 100vw);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  line-height: 90%;
  margin-bottom: calc(20 / 1593 * 100vw);
}

.footer-logo svg {
  width: calc(100 / 1593 * 100vw);
  height: calc(150 / 1593 * 100vw);
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: calc(25 / 1593 * 100vw);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: calc(20 / 1593 * 100vw);
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: calc(15 / 1593 * 100vw);
}

.footer-col a {
  font-size: calc(17 / 1593 * 100vw);
  color: #fff;
}

.footer-social {
  display: flex;
  gap: calc(20 / 1593 * 100vw);
}

.footer-social svg {
  width: calc(52 / 1593 * 100vw);
  height: calc(52 / 1593 * 100vw);
}
.footer-title {
  position: absolute;
  font-size: calc(4.06278 / 257 * 100vw);
  font-weight: 490;
  color: #FFFFFF;
  text-transform: uppercase;
  top: calc(33 / 1593 * 100vw);
}

.footer-t-1 { left: calc(186.48 / 257 * 100vw); }
.footer-t-2 { left: calc(216.44 / 257 * 100vw); }

.footer-line {
  position: absolute;
  width: calc(31 / 257 * 100vw);
  height: calc(20 / 257 * 100vw);
  background: #333333;
  border-radius: calc(1 / 257 * 100vw);
  color: #777;
}


.footer-l-1 { left: calc(184 / 257 * 100vw); top: calc(83 / 1593 * 100vw);  font-size: 0.8vw; padding-left: 0.5vw; padding-top: 0.2vw;}

.footer-l-5 { left: calc(214 / 257 * 100vw); top: calc(83 / 1593 * 100vw);  font-size: 0.8vw; padding-left: 0.5vw; padding-top: 0.2vw;}

.circle {
  position: absolute;
  background: transparent;
  border-radius: 50%;
  width: calc(8.26 / 257 * 100vw);
  height: calc(8.26 / 257 * 100vw);
  top: calc(300 / 1593 * 100vw);
}

.circle-1 { left: calc(9.46 / 257 * 100vw); bottom: calc(20 / 257 * 100vw); }
.circle-2 { left: calc(20.25 / 257 * 100vw); bottom: calc(20 / 257 * 100vw);}