@font-face {
  font-family: "Arctic Druk";
  src: url("./assets/fonts/DrukLCG-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arctic Manrope";
  src: url("./assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.arctic {
  --arctic-bg: #161616;
  --arctic-accent: #82c5ff;
  --arctic-pin-top: 12px;
  background: var(--arctic-bg);
  color: #fff;
  font-family: "Arctic Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.arctic *, .arctic *::before, .arctic *::after { box-sizing: border-box; }
.arctic p, .arctic h1, .arctic h2 { margin: 0; padding: 0; }
.arctic__inner { container-type: inline-size; width: 100%; }
.arctic__intro, .arctic__stack, .arctic__outro { --u: calc((100cqw - 80px) / 1360); }
.arctic__intro { height: calc(288 * var(--u)); position: relative; }
.arctic__title {
  position: absolute;
  inset: calc(64 * var(--u)) auto auto calc(40px + 4 * var(--u));
  font: 500 calc(110 * var(--u)) / .8 "Arctic Druk", sans-serif;
  text-transform: uppercase;
}
.arctic__title > span { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: nowrap; }
.arctic__title > span + span { margin-top: calc(16 * var(--u)); color: var(--arctic-accent); }

/* Все карточки — соседи в ОДНОМ контейнере. Общая нижняя граница
   удерживает предыдущие карточки, пока следующие наползают сверху. */
.arctic__stack { position: relative; isolation: isolate; }
.arctic__card {
  position: sticky;
  overflow: clip;
  top: min(var(--arctic-pin-top), calc(100svh - 674 * var(--u)));
  height: calc(674 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-inline: 40px;
  background: var(--arctic-bg);
}
.arctic__card:nth-child(1) { z-index: 1; }
.arctic__card:nth-child(2) { z-index: 2; }
.arctic__card:nth-child(3) { z-index: 3; }
.arctic__card:nth-child(4) { z-index: 4; }
.arctic__divider { display: block; position: absolute; top: 0; left: 0; max-width: none; transform: scaleX(var(--arctic-divider-scale, 1)); transform-origin: left top; }
.arctic__story {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(47 * var(--u));
  padding-left: calc(4 * var(--u));
}
.arctic .arctic__badge {
  width: calc(var(--badge-width, 327) * var(--u));
  height: calc(46 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u));
  border: var(--u) solid rgba(255, 255, 255, .08);
  border-radius: calc(12 * var(--u));
  background: rgba(40, 40, 40, .2);
  color: rgba(255, 255, 255, .9);
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
}
.arctic__card:nth-child(2) { --badge-width: 285; }
.arctic__card:nth-child(3) { --badge-width: 307; }
.arctic__card:nth-child(4) { --badge-width: 399; }
.arctic__card:nth-child(n+3) { --gallery-width: 608; --gallery-gap: 4; }
.arctic .arctic__heading {
  width: calc(534 * var(--u));
  margin-top: calc(24 * var(--u));
  font: 500 calc(72 * var(--u)) / .9 "Arctic Druk", sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.arctic__heading span { color: var(--arctic-accent); }
.arctic .arctic__description {
  width: calc(520 * var(--u));
  margin-top: calc(24 * var(--u));
  color: rgba(255, 255, 255, .8);
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.arctic .arctic__description--whales { width: calc(498 * var(--u)); }
.arctic .arctic__description--food { width: calc(452 * var(--u)); }
.arctic .arctic__description--activities { width: calc(462 * var(--u)); }
.arctic__gallery {
  width: calc(var(--gallery-width, 610) * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gallery-gap, 5) * var(--u));
  margin-top: calc(41 * var(--u));
}
.arctic__photo, .arctic__hero { position: relative; overflow: hidden; }
.arctic__photo {
  height: calc(250 * var(--u));
  border-radius: calc(16 * var(--u));
  border: var(--u) solid rgba(255, 255, 255, .06);
}
.arctic__hero {
  width: calc(675 * var(--u));
  height: calc(650 * var(--u));
  margin-top: calc(12 * var(--u));
  border-radius: calc(24 * var(--u));
  border: var(--u) solid rgba(255, 255, 255, .06);
}
.arctic__photo img, .arctic__hero img {
  display: block;
  position: absolute;
  max-width: none;
  object-fit: fill;
}
/* Размеры и смещения каждого оригинального изображения перенесены из Figma.
   Это сохраняет именно кадрирование макета, включая фото с нестандартным crop. */
.arctic__hero--aurora img { width: 110.48%; height: 153%; left: -5.98%; top: -41.46%; }
.arctic__hero--whale img { width: 158.33%; height: 108.06%; left: -57.19%; top: -4.03%; }
.arctic__hero--food img { width: 110.34%; height: 152.77%; left: -5.17%; top: -40.31%; }
.arctic__hero--snowmobile img { width: 100%; height: 138.46%; left: 0; top: -23.76%; }
.arctic__photo--aurora-traveler img { width: 118%; height: 115.77%; left: -6.42%; top: -15.97%; }
.arctic__photo--aurora-couple img { width: 157%; height: 223.19%; left: -28.5%; top: -115.79%; }
.arctic__photo--aurora-sky img { width: 132.62%; height: 141.47%; left: -7.47%; top: -40%; }
.arctic__photo--boat-white img { width: 177%; height: 135.99%; left: -38.5%; top: -33.19%; }
.arctic__photo--boat-blue img { width: 120%; height: 117.84%; left: .1%; top: -17.89%; }
.arctic__photo--boat-orange img, .arctic__photo--food-table img, .arctic__photo--water-suit img { width: 100%; height: 100%; inset: 0; object-fit: cover; }
.arctic__photo--food-crab img { width: 123.81%; height: 132.06%; left: -12.31%; top: -28.23%; }
.arctic__photo--food-urchins img { width: 120.94%; height: 129%; left: -16.95%; top: -24.5%; }
.arctic__photo--reindeer img { width: 110.67%; height: 108.56%; left: -2.44%; top: -5.76%; }
.arctic__photo--husky img { width: 114%; height: 111.84%; left: -9.62%; top: -3.12%; }
.arctic__outro { position: relative; overflow: clip; height: calc(151 * var(--u)); }

/* Мобильная компоновка сохраняет порядок текста и всех четырёх фотографий.
   Высокие карточки прокручиваются естественно, как в мобильном референсе. */
@media (max-width: 980px) {
  .arctic__intro, .arctic__stack, .arctic__outro { --u: 1px; }
  .arctic__intro { height: auto; padding: 42px 20px 32px; }
  .arctic__title { position: static; font-size: clamp(36px, 7.63vw, 58px); line-height: .9; }
  .arctic__title > span { white-space: normal; }
  .arctic__title > span + span { margin-top: 8px; }
  .arctic__card { position: relative; top: auto; height: auto; display: flex; flex-direction: column; padding: 28px 20px 24px; gap: 24px; }
  .arctic__story { align-self: stretch; padding: 0; }
  .arctic .arctic__badge { width: auto; height: auto; max-width: 100%; padding: 9px 12px; border-radius: 10px; font-size: clamp(11px, 2.9vw, 16px); white-space: normal; }
  .arctic .arctic__heading { width: 100%; margin-top: 24px; font-size: clamp(44px, 10.8vw, 68px); }
  .arctic .arctic__description { width: min(100%, 480px); margin-top: 22px; font-size: 15px; line-height: 1.4; }
  .arctic__gallery { width: 100%; margin-top: 26px; gap: 5px; }
  .arctic__photo { height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
  .arctic__card:first-child .arctic__photo { border-radius: 10px; }
  .arctic__hero { width: 100%; height: auto; aspect-ratio: 675 / 650; margin: 0; border-radius: 18px; }
  .arctic__outro { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .arctic__card { position: relative; top: auto; }
}