html, body { background: #1E1E1E; }
:where(a), :where(a:hover) { color: #FFFFFF; }

@keyframes ssMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% + 14 * var(--hk))); } }

/*
 * ===== Первый экран: композиция-постер =====
 * Масштаб --hk - меньший из двух: по ширине (--k) и по высоте окна,
 * чтобы экран целиком помещался без прокрутки. Боковые подписи держат
 * горизонтальный отступ от краёв как у шапки (--k), остальное - в --hk.
 */
.hero { --scale: calc(100vw / 1920px); position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; background: linear-gradient(107.59deg, #A4A4A4 3.81%, #919191 98.42%); color: #FFFFFF; font-family: 'Manrope Dash', 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 300; }
@supports (height: 100svh) { .hero { height: 100svh; } }
/* постер 1920×1080 рисуется в своём масштабе (--hk=1px) и трансформом тянется по ширине экрана:
   бока всегда заполнены (без боковых полос), по вертикали центрируется, на высоких экранах
   сверху/снизу тот же серый фон без шва - пропорции постоянны на любом экране */
.hero .wrap { --k: 1px; --hk: 1px; flex: none; position: relative; width: 1920px; height: 1080px; max-width: none; margin: 0; transform: scale(var(--scale)); transform-origin: center; }
/* шапка лежит вне постера, но растёт вместе с ним и шире 1920 (общий --k на 1920 останавливается): иначе на широком экране
   или при уменьшенном масштабе браузера лого и меню отстают от надписей и фото */
.hero .header { --k: calc(100vw / 1920); }
.hero__photo { position: absolute; left: calc(50% - 389.1725 * var(--hk)); top: calc(53 * var(--hk)); width: calc(778.345 * var(--hk)); height: calc(1027 * var(--hk)); object-fit: cover; object-position: 50% 50%; }
.hero__title { position: absolute; left: 0; top: calc(569 * var(--hk)); width: 100%; height: calc(315 * var(--hk)); margin: 0; overflow: hidden; font-family: 'Saar SP Demo', 'Saar SP Demo Local', sans-serif; font-weight: 400; font-size: calc(385 * var(--hk)); line-height: calc(368 / 385); letter-spacing: 0; white-space: nowrap; color: #FFFFFF; }
.marquee { display: flex; width: max-content; padding-left: calc(28 * var(--hk)); animation: ssMarquee 22s linear infinite; will-change: transform; }
.marquee > span { padding-right: calc(160 * var(--hk)); }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } } /* «уменьшить движение» в системе - строка стоит */
.hero__name,
.hero__services,
.hero__tagline { position: absolute; margin: 0; white-space: nowrap; color: rgba(255,255,255,0.85); }
.hero__name { left: calc(129 * var(--k)); top: calc(904 * var(--hk)); font-size: max(14px, calc(28 * var(--hk))); line-height: calc(38 / 28); }
.hero__services { right: calc(100 * var(--k)); top: calc(897 * var(--hk)); width: calc(148 * var(--hk)); font-size: max(12px, calc(23 * var(--hk))); line-height: calc(31 / 23); }
.hero__tagline { left: calc(129 * var(--k)); top: calc(403 * var(--hk)); font-size: max(12px, calc(23 * var(--hk))); line-height: calc(31 / 23); }

/* ===== Обо мне + последние работы ===== */
.intro { background: #FFFFFF; color: #000000; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; }
.intro .wrap { padding: calc(197 * var(--k)) 0 calc(52 * var(--k)); }

/* две колонки: текст слева (с 310) и справа (с 1265) */
.intro__top { display: grid; grid-template-columns: calc(955 * var(--k)) 1fr; align-items: start; padding-left: calc(310 * var(--k)); overflow-wrap: anywhere; }
/* строки текста задаются в админке (каждая строка поля - своя строка); слишком длинная переносится, а не заезжает на соседнюю колонку */
.intro__lead { margin: 0; padding-right: calc(40 * var(--k)); font-weight: 400; font-size: max(19px, calc(43 * var(--k))); line-height: calc(64 / 43); letter-spacing: -0.01em; color: #1C1D20; }
.intro__side { display: flex; flex-direction: column; align-items: flex-start; }
.intro__text { margin: calc(11 * var(--k)) 0 0; padding-right: calc(40 * var(--k)); font-weight: 400; font-size: max(14px, calc(18 * var(--k))); line-height: calc(32 / 18); color: #1C1D20; }
/* круг заходит на список ниже - отрицательный нижний отступ, чтобы не раздвигал блок */
.intro__about { --size: max(120px, calc(277 * var(--k))); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); margin: calc(53 * var(--k)) 0 calc(-213 * var(--k)) calc(-15 * var(--k)); border-radius: 50%; background: #1C1D20; color: #FFFFFF; font-weight: 500; font-size: max(16px, calc(25 * var(--k))); line-height: 1; white-space: nowrap; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { :root:not(.fx) .intro__about:hover { transform: scale(1.04); color: #FFFFFF; } }

.intro__label { margin: calc(125 * var(--k)) 0 0; padding-left: calc(311 * var(--k)); font-weight: 400; font-size: max(11px, calc(13 * var(--k))); line-height: 1.366; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: #767676; }

.recent-list { margin: calc(46.74 * var(--k)) calc(162 * var(--k)) 0 calc(157 * var(--k)); border-top: 1px solid rgba(179,178,178,0.58); }
.recent { display: grid; grid-template-columns: calc(955 * var(--k)) 1fr; align-items: center; height: calc(267 * var(--k)); padding-left: calc(153 * var(--k)); border-bottom: 1px solid rgba(179,178,178,0.58); color: #000000; }
.recent__name { font-weight: 400; font-size: calc(100 * var(--k)); line-height: 1.008; letter-spacing: 0; white-space: nowrap; color: #1C1D20; }
.recent__tag { font-weight: 300; font-size: max(15px, calc(20 * var(--k))); line-height: 1.366; white-space: nowrap; color: rgba(0,0,0,0.54); }


/* ===== Телефон: первый экран по макету - лого, фото почти на весь экран, строка поперёк груди; подписей нет ===== */
@media (max-width: 767px) {
  /* строка 19vw (на 390×844 - 74px), на коротком экране - по высоте, чтобы не перерастала фото */
  .hero .wrap { --hk: calc(19vw / 385); width: 100%; height: 100%; transform: none; }
  @supports (height: 1svh) { .hero .wrap { --hk: calc(min(19vw, 8.77svh) / 385); } }
  /* фото (вырезка на прозрачном фоне) на 89% высоты экрана, прижато к низу; голова - на 47,7% ширины фото, ставим её по центру */
  .hero__photo { left: calc(50% - 89vh * 0.358); top: auto; bottom: 0; width: calc(89vh * 0.75); height: 89vh; }
  @supports (height: 1svh) { .hero__photo { left: calc(50% - 89svh * 0.358); width: calc(89svh * 0.75); height: 89svh; } }
  .hero__title { top: 76.4vh; top: 76.4svh; }
  .hero__tagline,
  .hero__name,
  .hero__services { display: none; }

  .intro .wrap { padding: 88px 20px 56px; }
  .intro__top { display: block; padding-left: 0; }
  .intro__lead { padding-right: 0; font-size: 24px; line-height: 1.4; }
  /* строки из админки на телефоне - сплошным текстом, иначе короткий хвост строки остаётся один */
  .intro__lead.reveal-lines .line,
  .intro__lead.reveal-lines .line > span { display: inline; }
  .intro__lead.reveal-lines .line::after { content: ' '; }
  .intro__side { margin-top: 24px; }
  .intro__text { margin: 0; padding-right: 0; font-size: 15px; line-height: 1.7; }
  .intro__about { --size: 112px; align-self: flex-end; margin: 16px 0 -40px; font-size: 16px; translate: none; } /* без параллакса: наезжал бы на названия работ */
  .intro__label { margin-top: 48px; padding-left: 0; }
  .recent-list { margin: 16px 0 0; }
  .recent { grid-template-columns: minmax(0, 1fr); row-gap: 6px; height: auto; padding: 24px 0; }
  .recent__name { font-size: clamp(36px, 11vw, 56px); white-space: normal; overflow-wrap: anywhere; }
  .recent__tag { font-size: 14px; white-space: normal; }
}

/* ===== Телефон боком: экран низкий - строка крупнее, по высоте экрана, поперёк груди, как на десктопе ===== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero .wrap { --hk: calc(30vh / 385); }
  @supports (height: 1svh) { .hero .wrap { --hk: calc(30svh / 385); } }
  .hero__title { top: 58vh; top: 58svh; }
}