/* ============ Типографический хиро ============ */
.hero { padding-block: clamp(30px, 5vw, 64px) clamp(24px, 3vw, 44px); }
.hero__kicker { display: block; margin-bottom: clamp(14px, 2vw, 26px); }

.type {
  position: relative;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(23px, 5.35vw, 88px); line-height: .92; letter-spacing: -.045em;
}
.type span { display: block; white-space: nowrap; }
/* Лесенка зигзагом, а не монотонной втяжкой. */
.type .l2 { padding-left: 13%; }
.type .l3 { padding-left: 29%; }
.type .l4 { padding-left: 0; }
.type .l5 { padding-left: 24%; }
.type .sl { font-style: normal; font-weight: 400; color: var(--red); }
.type .scr {
  font-family: var(--script); font-style: normal; font-weight: 400;
  text-transform: lowercase; font-size: 1.16em; line-height: 0;
  letter-spacing: 0; padding-inline: .06em;
}
.type .type__mark {
  position: absolute; right: 0; bottom: 1.72em; display: block;
  max-width: 17ch; line-height: 1.4; text-align: left; white-space: normal;
}
@media (max-width: 860px) {
  .type .l2, .type .l3, .type .l5 { padding-left: 0; }
  .type span { white-space: normal; }
  .type .type__mark { position: static; margin-top: 14px; max-width: none; }
}

.hero__foot {
  display: grid; gap: clamp(18px, 3vw, 48px);
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) clamp(150px, 17vw, 258px);
  align-items: end; margin-top: clamp(28px, 4.5vw, 66px);
}
@media (max-width: 860px) { .hero__foot { grid-template-columns: 1fr; align-items: start; } }
.hero__jump { grid-column: 1; display: flex; flex-direction: column; gap: 9px; }
@media (max-width: 860px) { .hero__jump { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; } }
.hero__portrait { grid-column: 3; }
@media (max-width: 860px) { .hero__portrait { grid-column: 1; max-width: 220px; } }

/* Блок с угловыми засечками. */
.ticks { position: relative; grid-column: 2; padding: 16px 18px; }
@media (max-width: 860px) { .ticks { grid-column: 1; } }
.ticks p { font-family: var(--mono); font-size: 11px; line-height: 1.62; color: var(--fg-soft); max-width: 44ch; }
.ticks p + p { margin-top: 12px; }
.ticks::before, .ticks::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--rule); }
.ticks::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.ticks::after  { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* ============ Портрет ============ */
.portrait {
  position: relative; aspect-ratio: 3/4; background: var(--edge);
  display: grid; place-items: center; text-align: center; border: 1px solid var(--rule);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.portrait span {
  padding: 0 14px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.6;
}
/* Внутренняя рамка — признак пустого слота. Когда фото есть, она только мешает. */
.portrait:not(:has(img))::after {
  content: ''; position: absolute; inset: 9px; border: 1px solid var(--rule); pointer-events: none;
}
.portrait:has(img) { background: none; border-color: var(--rule); }
/* Плёночный кадр снят лёжа: лицо ближе к низу, поэтому кроп смещён вниз. */
.portrait--film img { object-position: 50% 62%; }

/* ============ Заявление лесенкой ============ */
.stair { padding-block: clamp(40px, 6vw, 96px); }
/* Селектор по классу, а не по тегу: .stair p перебивал .tag и раздувал сноску
   до кегля заголовка. Тег-селекторы внутри секций — источник таких коллизий. */
.stair__line {
  font-weight: 900; font-size: clamp(26px, 6.4vw, 100px); line-height: .9;
  letter-spacing: -.052em; text-transform: uppercase; color: var(--red);
}
/* Ступени задаются по порядку строк: сколько бы их ни было, лесенка не рассыплется. */
.stair__line span { display: block; white-space: nowrap; }
/* Второе предложение — про труд, а не про данность: снимаем с него красный,
   чтобы цвет отделял врождённое от нажитого. Убрать правило — вернётся монолит. */
.stair__line .stair__earned { color: var(--fg); }
.stair__line span:nth-child(2) { padding-left: 8%; }
.stair__line span:nth-child(3) { padding-left: 16%; }
.stair__line span:nth-child(4) { padding-left: 24%; }
.stair__line span:nth-child(5) { padding-left: 32%; }
@media (max-width: 700px) {
  .stair__line span { white-space: normal; padding-left: 0 !important; }
}
/* Сноска детонирует заголовок: расхожая метафора оказывается лабораторным фактом.
   Ставим её под конец лесенки, в одну линию с последней строкой. */
.stair__note {
  display: block; margin-top: clamp(14px, 1.8vw, 24px);
  /* Отступ ступени — внешний. При padding-left процент считается от контейнера
     и при box-sizing:border-box не влезает в собственный max-width блока. */
  margin-left: 24%; color: var(--red-on-bg); max-width: 52ch;
  /* «Предрасположенности» с разрядкой капса не влезает в строку и не переносится сама. */
  overflow-wrap: anywhere; letter-spacing: .12em; line-height: 1.7;
}
@media (max-width: 700px) { .stair__note { margin-left: 0; } }

/* ============ Текст, растянутый по краям ============ */
.stretch {
  text-align: justify; text-align-last: justify; hyphens: none;
  font-weight: 500; font-size: clamp(19px, 3.1vw, 50px); line-height: 1.12;
  letter-spacing: -.03em; text-transform: uppercase;
}
.stretch em { font-style: normal; color: var(--red); }

/* ============ Нумерованный список ============ */
.numbered { margin-top: clamp(22px, 3vw, 44px); border-top: 1px solid var(--rule); }
.numbered li {
  display: grid; grid-template-columns: clamp(52px, 7vw, 104px) 1fr;
  gap: clamp(12px, 3vw, 48px); padding-block: clamp(13px, 1.7vw, 24px);
  border-bottom: 1px solid var(--rule);
}
.numbered b {
  font-weight: 900; font-size: clamp(19px, 2.5vw, 38px); line-height: 1;
  letter-spacing: -.04em; color: var(--red);
}
.numbered p { max-width: 54ch; }

/* ============ Обо мне ============ */
.about { margin-top: clamp(16px, 2.4vw, 30px); max-width: 78ch; }
.about__lead {
  font-weight: 500; font-size: clamp(18px, 2.1vw, 32px); line-height: 1.16;
  letter-spacing: -.028em; text-transform: uppercase; max-width: 30ch;
}
.about__body { margin-top: 16px; max-width: 62ch; color: var(--fg-soft); }

/* ============ Другие руты ============ */
.tracks {
  display: grid; gap: 0; margin-top: clamp(16px, 2.4vw, 30px);
  border-top: 1px solid var(--rule);
}
.track {
  display: grid; gap: 8px clamp(20px, 4vw, 64px); padding-block: clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}
/* Три колонки: название — описание — ссылка на папку у правого края. */
@media (min-width: 860px) {
  .track { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
}
.track__t {
  font-weight: 900; font-size: clamp(20px, 2.6vw, 40px); line-height: 1;
  letter-spacing: -.04em; text-transform: uppercase;
}
.track__b { max-width: 58ch; }
.track__n { max-width: 58ch; color: var(--fg-soft); }
@media (min-width: 860px) { .track__b, .track__n { grid-column: 2; } .track__n { margin-top: -2px; } }
.track__cta {
  justify-self: start; align-self: start; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-on-bg);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
a.track__cta:hover { color: var(--fg); border-color: var(--fg); }
/* Шаблон: место под ссылку занято, но кликать нечего — показываем это честно. */
.track__cta--pending {
  color: var(--fg-soft); border-bottom-style: dashed; border-color: var(--rule); cursor: default;
}
@media (min-width: 860px) {
  .track__cta { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ============ Чем я горжусь ============ */
.proud {
  display: grid; gap: clamp(20px, 4vw, 64px); margin-top: clamp(16px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.proud h3 {
  font-weight: 900; font-size: clamp(17px, 1.8vw, 26px); line-height: 1.06;
  letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 8px;
}
.proud p { color: var(--fg-soft); max-width: 40ch; }

/* Диплом: то же правило, что и у всей фотографии на сайте — обесцвечен,
   цвет возвращается при наведении. Иначе розовый диплома спорил бы с красным акцентом. */
.proud__award { display: grid; gap: clamp(14px, 2vw, 24px); align-content: start; }
/* Две колонки только с 760px: на 620 текстовая колонка сжималась так,
   что «Легкоустройство» с разрядкой капса переставало помещаться. */
@media (min-width: 760px) {
  .proud__award { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: start; }
}
.award { margin: 0; }
.award img {
  width: 100%; border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease);
}
.award:hover img { filter: grayscale(0); }
/* Слева от текста — либо диплом, либо перечень сфер. Колонка одной ширины,
   поэтому два блока «горжусь» весят одинаково, хотя устроены по-разному. */
.areas { display: grid; gap: 7px; align-content: start; }
.areas li { line-height: 1.4; }
.areas li::before { content: '[ '; }
.areas li::after  { content: ' ]'; }

.proud__meta {
  display: block; margin-top: 12px; line-height: 1.6; max-width: 34ch;
  overflow-wrap: anywhere; letter-spacing: .12em;
}

/* ============ Футер и клиенты ============ */
.footer { padding-block: clamp(34px, 5vw, 72px); border-top: 1px solid var(--rule); }
/* Клиенты выводятся дважды из одного списка. Наверху — утверждение,
   в футере — подпись. Отличаются только весом, чтобы не читались как дубль. */
.clients { display: flex; flex-wrap: wrap; align-items: baseline; }

.clients--lead { gap: 4px clamp(14px, 1.9vw, 28px); margin-top: 18px; }
.clients--lead li {
  font-weight: 900; font-size: clamp(16px, 2.1vw, 34px); line-height: 1.2;
  letter-spacing: -.035em; text-transform: uppercase; color: var(--fg);
}
.clients--lead li + li::before {
  content: '·'; margin-right: clamp(14px, 1.9vw, 28px);
  color: var(--red-on-bg); font-weight: 400;
}

.clients--note { gap: 3px clamp(10px, 1.3vw, 18px); margin-top: 14px; }
.clients--note li {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.7;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft);
}
.clients--note li + li::before {
  content: '·'; margin-right: clamp(10px, 1.3vw, 18px); color: var(--rule);
}

/* ============ Разбросанный коллаж ============ */
.scatter {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.6vw, 22px); align-items: start; margin-top: clamp(24px, 4vw, 52px);
}
.scatter figure { position: relative; }
.scatter img { width: 100%; filter: grayscale(1) contrast(1.1); transition: filter .5s var(--ease); }
.scatter figure:hover img { filter: grayscale(0); }
.scatter figcaption { margin-top: 7px; font-size: 11px; line-height: 1.4; color: var(--fg-soft); max-width: 26ch; }
.scatter .s1 { grid-column: 1 / span 3; margin-top: clamp(20px, 5vw, 74px); }
.scatter .s2 { grid-column: 4 / span 3; }
.scatter .s3 { grid-column: 8 / span 3; margin-top: clamp(14px, 3vw, 44px); }
.scatter .s4 { grid-column: 11 / span 2; margin-top: clamp(34px, 8vw, 116px); }
@media (max-width: 700px) { .scatter figure { grid-column: span 6 !important; margin-top: 0 !important; } }

/* ============ Контакт ============ */
.tgline {
  display: block; font-weight: 900; font-size: clamp(38px, 11vw, 190px);
  line-height: .84; letter-spacing: -.055em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.tgline:hover { color: var(--red-on-bg); }