:root {
  --bg: #f5efe9;
  --dark: #030404;
  --chip: #363636;
  --pill: #eae3db;
  --f-body: "IM Fell English", Georgia, serif;
  --f-caps: "IM Fell French Canon SC", Georgia, serif;
  --f-script: "Italianno", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: #000;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: #000;
  font-family: var(--f-body);
  color: #fff;
  overflow-x: hidden;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
img { display: block; max-width: none; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; }

/* ---------- колонка страницы ----------
   Внутри всё задано в пикселях макета (кадр 1440px) и умножается на --u,
   поэтому при любой ширине колонки пропорции совпадают с макетом 1:1.
   --s — масштаб конкретного блока: на десктопе = --u, на телефоне свой. */
.page {
  --fade: clamp(24px, 3.5vw, 72px);
  width: 70%;
  max-width: 1920px;
  margin: clamp(48px, 10vh, 140px) auto;
  background: var(--bg);
  container: page / inline-size;
  --u: calc(100cqw / 1440);
  --m: calc(100cqw / 390);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-composite: intersect;
}
@media (max-width: 1279px) { .page { width: 84%; } }
@media (max-width: 899px)  { .page { width: 100%; --fade: 14px; margin-block: 32px; } }

/* ---------- hero ---------- */
.hero { --s: var(--u); position: relative; height: calc(480 * var(--s)); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__line {
  position: absolute; left: 50%; width: calc(454 * var(--s)); height: auto;
  transform: translateX(-50%) rotate(-0.25deg);
}
.hero__line--top { top: calc(88 * var(--s)); }
.hero__line--bottom { top: calc(395 * var(--s)); }
.hero__title {
  position: absolute; left: 0; right: 0; top: calc(151 * var(--s));
  font: 400 calc(128 * var(--s))/normal var(--f-caps); color: var(--bg); text-align: center;
  white-space: nowrap;
}
.hero__sub {
  position: absolute; left: 0; right: 0; top: calc(241 * var(--s));
  font: 400 calc(96 * var(--s))/normal var(--f-script); color: #fff; text-align: center;
  text-shadow: calc(3 * var(--s)) calc(-1 * var(--s)) calc(4.2 * var(--s)) rgba(0,0,0,.82);
  white-space: nowrap;
}

/* ---------- skills + links ---------- */
.info { --s: var(--u); background: var(--bg); }
.info__inner {
  padding: calc(48 * var(--s)) calc(54 * var(--s)) calc(58 * var(--s));
  display: grid;
  grid-template-columns: calc(508 * var(--s)) calc(650 * var(--s));
  column-gap: calc(114 * var(--s));
  align-items: start;
}
.skills {
  position: relative; height: calc(282 * var(--s));
  background: var(--dark); border-radius: calc(10 * var(--s));
  box-shadow: inset 0 calc(7 * var(--s)) calc(22.2 * var(--s)) calc(12 * var(--s)) rgba(255,255,255,.27);
  padding: calc(136 * var(--s)) 0 0 calc(22 * var(--s));
}
.skills__title {
  position: absolute; left: calc(240 * var(--s)); top: calc(-48 * var(--s)); transform: translateX(-50%);
  width: calc(275 * var(--s)); height: calc(166 * var(--s));
  font: 400 calc(160 * var(--s))/normal var(--f-script); text-align: center; white-space: nowrap;
  color: #F5EFE9;
  /* обводка рисуется под заливкой: снаружи видна половина — 3px макета */
  -webkit-text-stroke: calc(6 * var(--s)) #000000;
  paint-order: stroke fill;
}
.skills__line {
  position: absolute; left: calc(92 * var(--s)); top: calc(104 * var(--s));
  width: calc(324 * var(--s)); height: auto;
}
.skills__tags { display: flex; flex-wrap: wrap; gap: calc(12 * var(--s)) calc(11 * var(--s)); width: calc(466 * var(--s)); }
.tag {
  height: calc(50 * var(--s)); border-radius: calc(12 * var(--s)); background: var(--chip);
  font-size: calc(36 * var(--s)); line-height: calc(54 * var(--s));
  color: #fff; white-space: nowrap; text-align: center;
}
.tag:nth-child(1) { width: calc(253 * var(--s)); }
.tag:nth-child(2) { width: calc(201 * var(--s)); }
.tag:nth-child(3) { width: calc(219 * var(--s)); }
.tag:nth-child(4) { width: calc(235 * var(--s)); }
.software { margin-top: calc(29 * var(--s)); width: calc(509 * var(--s)); height: calc(94 * var(--s)); }

.links {
  display: grid; grid-template-columns: repeat(2, calc(317 * var(--s)));
  gap: calc(17 * var(--s)) calc(14 * var(--s));
  margin-top: calc(6 * var(--s)); margin-left: calc(1.8 * var(--s)); align-content: start;
}
/* в макете ряды стоят неравномерно: 3-й ряд ниже на 3px, 4-й ещё на 5px */
.links li:nth-child(5), .links li:nth-child(6) { margin-top: calc(3.2 * var(--s)); }
.links li:nth-child(7), .links li:nth-child(8) { margin-top: calc(5.1 * var(--s)); }
.pill {
  position: relative; display: block; width: calc(317 * var(--s)); height: calc(80 * var(--s));
  background: var(--pill); border-radius: calc(31 * var(--s));
  box-shadow:
    0 calc(-2 * var(--s)) calc(6.5 * var(--s)) calc(-1 * var(--s)) rgba(0,0,0,.31),
    0 calc(4 * var(--s)) calc(4.4 * var(--s)) 0 rgba(0,0,0,.33);
  color: #000; transition: transform .15s;
}
.pill::before {
  content: ""; position: absolute; inset: 8.64% 2.46%; border-radius: calc(31 * var(--s));
  background: linear-gradient(to bottom, var(--pill), rgba(166,156,146,0));
  box-shadow: inset 0 calc(4 * var(--s)) calc(7.1 * var(--s)) calc(-1 * var(--s)) rgba(0,0,0,.25);
}
.pill__icon {
  position: absolute; left: calc(38 * var(--s)); top: 50%; transform: translateY(-50%);
  width: calc(46.5 * var(--s)); height: calc(46.5 * var(--s));
}
.pill__icon img { width: 100%; height: 100%; }
.pill__text {
  position: absolute; left: 23.89%; right: 8.87%; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(36 * var(--s)); line-height: calc(60 * var(--s));
  text-align: center; white-space: nowrap;
}

/* ---------- gallery ---------- */
.gallery {
  --s: var(--u);
  position: relative; height: calc(689 * var(--s)); background: var(--dark);
  box-shadow: inset 0 calc(7 * var(--s)) calc(22.2 * var(--s)) calc(12 * var(--s)) rgba(255,255,255,.27);
}
.gallery__title {
  position: absolute; left: 0; right: 0; top: calc(35 * var(--s));
  font: 400 calc(64 * var(--s))/normal var(--f-caps); color: var(--bg); text-align: center;
}
.more {
  position: absolute; right: calc(49 * var(--s)); top: calc(48 * var(--s));
  width: calc(212 * var(--s)); height: calc(50 * var(--s)); border-radius: calc(12 * var(--s));
  background: var(--chip);
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--s));
  font-size: calc(32 * var(--s)); color: var(--bg); white-space: nowrap;
}
.more img { width: calc(22 * var(--s)); height: auto; }
.gallery__track {
  position: absolute; left: 50%; top: calc(151 * var(--s)); transform: translateX(-50%);
  width: calc(1171 * var(--s)); height: calc(460 * var(--s));
  display: flex; gap: calc(41 * var(--s));
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.card { position: relative; display: block; flex: 0 0 calc(363 * var(--s)); height: calc(456 * var(--s)); }
/* видно 3 работы, остальные ждут очереди в карусели */
.card:nth-child(n + 4) { display: none; }
/* картинка карточки включает свою тень, поэтому чуть больше самой карточки (380.2x477.7 в макете) */
.card img {
  position: absolute; width: 104.74%; height: 104.76%; left: -2.37%; top: 0;
  object-fit: cover; transition: transform .2s;
  -webkit-user-drag: none; user-select: none;
}
.arrow { position: absolute; top: calc(353 * var(--s)); width: calc(50 * var(--s)); height: calc(50 * var(--s)); }
.arrow img { width: 100%; height: 100%; }
.arrow--prev { left: calc(35 * var(--s)); top: calc(360 * var(--s)); }
.arrow--prev img { transform: scaleX(-1); }
.arrow--next { right: calc(36 * var(--s)); }

@media (hover: hover) {
  .pill:hover { transform: translateY(-2px); }
  .card:hover img { transform: translateY(-4px); }
  .arrow:hover { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- телефоны (колонка уже 640px) ----------
   Те же элементы макета, но разложены в одну колонку;
   размеры заданы для ширины 390px и тоже масштабируются (--m). */
@container page (max-width: 639px) {
  .hero { --s: calc(52 / 128 * var(--m)); }

  .info__inner {
    padding: calc(28 * var(--m)) calc(16 * var(--m)) calc(36 * var(--m));
    grid-template-columns: calc(358 * var(--m));
    justify-content: center;
    row-gap: calc(28 * var(--m));
  }
  .skills-col { --s: calc(358 / 508 * var(--m)); padding-top: calc(10 * var(--m)); }
  .links {
    --s: calc(174 / 317 * var(--m));
    gap: calc(10 * var(--m));
    margin: 0;
  }
  .links li:nth-child(n) { margin-top: 0; }

  .gallery { --s: var(--m); height: calc(522 * var(--m)); }
  .gallery__title { top: calc(24 * var(--m)); font-size: calc(40 * var(--m)); }
  .more {
    right: auto; left: 50%; transform: translateX(-50%);
    top: calc(84 * var(--m)); width: calc(150 * var(--m)); height: calc(36 * var(--m));
    border-radius: calc(10 * var(--m)); gap: calc(7 * var(--m)); font-size: calc(20 * var(--m));
  }
  .more img { width: calc(15 * var(--m)); }
  .gallery__track { top: calc(140 * var(--m)); width: calc(272 * var(--m)); height: calc(342 * var(--m)); gap: 0; }
  .card { flex-basis: calc(272 * var(--m)); height: calc(342 * var(--m)); }
  .card:nth-child(n + 2) { display: none; }
  .arrow { top: calc(293 * var(--m)); width: calc(36 * var(--m)); height: calc(36 * var(--m)); }
  .arrow--prev { left: calc(9 * var(--m)); }
  .arrow--next { right: calc(9 * var(--m)); }
}