:root {
    --color-bg: #fffaf0;
    --color-text: #3c3c3c;
    --font-script: 'Great Vibes', cursive;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* ===== Первый экран =====
   Макет в Figma — фрейм 1512×982 (только десктоп).
   --u — один пиксель макета, пересчитанный под размер экрана: композиция
   масштабируется целиком и влезает в экран. По высоте берём 1002 вместо 982:
   рука на фото заканчивается на y≈976 макета, и с запасом в 16px она всегда
   остаётся в кадре, а срезается только низ пальто. На размере макета --u ≈ 1.
   Фото и имя привязаны к центру экрана, кляксы — к его углам. */
.hero {
    container: hero / size;
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-bg);
}

.hero > * {
    --u: min(100cqw / 1512, 100cqh / 1002);
}

.hero__photo {
    position: absolute;
    left: calc(50% - 509 * var(--u));
    top: calc(50% - 702 * var(--u));
    width: calc(1018 * var(--u));
    height: auto;
    /* Внизу у фото жёсткие боковые края (здания обрезаны). Их прячут нижние
       кляксы; маска — страховка на случай, если кляксы до края не достают. */
    --fade: 6%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.hero__blob {
    position: absolute;
    width: calc(470.341 * var(--u));
    height: auto;
    aspect-ratio: 470.341 / 466.128;
}

.hero__blob--tl { left: calc(-204 * var(--u)); top: calc(-192 * var(--u)); }
.hero__blob--tr { right: calc(-181.341 * var(--u)); top: calc(-177 * var(--u)); }
.hero__blob--bl { left: calc(-143 * var(--u)); bottom: calc(-130.128 * var(--u)); }
.hero__blob--br { right: calc(-138.341 * var(--u)); bottom: calc(-167.128 * var(--u)); }

/* Экран обычно шире макета (у браузера ещё и панели съедают высоту), и тогда
   нижние кляксы в углах не доходят до фото. Пропорционально растим их, пока
   они не зайдут на край фото так же, как в макете (на 80px), но не больше
   чем в 1,6 раза — на сверхшироких экранах край дорастворит маска.
   Прирост наполовину утапливаем за нижний край, чтобы клякса росла вбок
   к фото, а не вверх к имени. */
.hero__blob--bl,
.hero__blob--br {
    --grow: calc(clamp(470.341 * var(--u), 50cqw - 286 * var(--u), 754 * var(--u)) - 470.341 * var(--u));
    width: calc(470.341 * var(--u) + var(--grow));
}

.hero__blob--bl { bottom: calc(-130.128 * var(--u) - var(--grow) / 2); }
.hero__blob--br { bottom: calc(-167.128 * var(--u) - var(--grow) / 2); }

.hero__name {
    margin: 0;
    font-family: var(--font-script);
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.hero__first,
.hero__last {
    position: absolute;
    font-size: calc(128 * var(--u));
}

.hero__first {
    left: calc(50% - 459 * var(--u));
    top: calc(50% - 256 * var(--u));
}

.hero__last {
    left: calc(50% + 227 * var(--u));
    top: calc(50% - 16 * var(--u));
}

/* ===== Первый экран: вертикальные экраны (телефоны, планшеты в портрете) =====
   Своя раскладка в виртуальном кадре 390×844: фото крупнее и опущено ниже,
   имя — над колонной, кляксы меньше. По высоте берём 866: низ руки — на 421px
   ниже центра, плюс 12px запаса, так что рука и тут всегда целиком в кадре. */
@container hero (orientation: portrait) {
    .hero > * {
        --u: min(100cqw / 390, 100cqh / 866);
    }

    .hero__photo {
        left: calc(50% - 340 * var(--u));
        top: calc(50% - 372 * var(--u));
        width: calc(680 * var(--u));
        --fade: 12%;
    }

    .hero__blob,
    .hero__blob--bl,
    .hero__blob--br {
        width: calc(212 * var(--u));
    }

    .hero__blob--tl { left: calc(-120 * var(--u)); top: calc(-125 * var(--u)); }
    .hero__blob--tr { right: calc(-125 * var(--u)); top: calc(-120 * var(--u)); }
    .hero__blob--bl { left: calc(-115 * var(--u)); bottom: calc(-110 * var(--u)); }
    .hero__blob--br { right: calc(-110 * var(--u)); bottom: calc(-115 * var(--u)); }

    .hero__first,
    .hero__last {
        font-size: calc(72 * var(--u));
    }

    .hero__first {
        left: calc(50% - 165 * var(--u));
        top: calc(50% - 326 * var(--u));
    }

    .hero__last {
        left: auto;
        right: calc(50% - 160 * var(--u));
        top: calc(50% - 268 * var(--u));
    }
}

/* ===== Второй экран: о себе и фотографии =====
   Макет — фрейм 1512×1282. Высота не фиксированная, а по содержимому:
   отступы и шрифт масштабируются от ширины экрана и не опускаются ниже
   читаемых значений. Зубцы сверху и снизу растягиваются на всю ширину,
   их высота — 10% ширины, как в макете (1509×151). */
.about {
    --zigzag: calc(100vw * 151 / 1509);
    position: relative;
    padding:
        calc(var(--zigzag) + clamp(24px, 100vw * 66 / 1512, 66px))
        clamp(16px, 100vw * 44 / 1512, 44px)
        calc(var(--zigzag) + clamp(40px, 100vw * 111 / 1512, 111px));
    background-color: #5f8074;
    color: var(--color-bg);
}

.about__zigzag {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
}

.about__zigzag--top { top: 0; }

/* Нижние зубцы — те же, повёрнутые на 180°. */
.about__zigzag--bottom {
    bottom: 0;
    transform: rotate(180deg);
}

/* Основной текст — Noto Sans, выделенные слова — Noto Serif. */
.about__text {
    max-width: 1375px;
    margin: 0 auto clamp(48px, 100vw * 179 / 1512, 179px);
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(20px, 100vw * 36 / 1512, 36px);
    line-height: 1.36;
    text-align: center;
}

.about__text em {
    font-family: 'Noto Serif', serif;
    font-style: normal;
}

.about__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.15em;
}

.about__link:hover,
.about__link:focus-visible {
    text-decoration-thickness: 0.1em;
}

/* Фотографии вплотную друг к другу, 3:4. Число в ряду зависит от ширины
   экрана: 5 → 3 + 2 → по 2 → по 1. Неполный ряд центрируется. */
.about__gallery {
    --per-row: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1423px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.about__gallery li {
    flex: 0 0 calc(100% / var(--per-row));
}

.about__gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

@media (max-width: 999px) {
    .about__gallery { --per-row: 3; }
}

@media (max-width: 699px) {
    .about__gallery { --per-row: 2; }
}

@media (max-width: 439px) {
    .about__gallery { --per-row: 1; }
}