@font-face {
    font-family: 'Barlow-Bold';
    src: url('fonts/Barlow-Bold.woff2') format('woff2'),
        url('fonts/Barlow-Bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Barlow-ExtraLight';
    src: url('fonts/Barlow-ExtraLight.woff2') format('woff2'),
        url('fonts/Barlow-ExtraLight.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Barlow-Medium';
    src: url('fonts/Barlow-Medium.woff2') format('woff2'),
        url('fonts/Barlow-Medium.woff') format('woff');
    font-display: swap;
}

:root {
    --app-height: 100svh;
    --page-background: #c8c8c8;
    --text-color: #2c2c2c;
    --muted-color: #646464;
    --focus-color: #ffffff;
    --nav-height: 58px;
    --content-width: 660px;
    --page-inline-padding: clamp(22px, 6vw, 64px);
    --section-block-padding: clamp(26px, 7svh, 88px);
    --dynamic-background-height: 44svh;
    --portrait-height: var(--dynamic-background-height);
    --portrait-x: 50%;
    --portrait-y: 100%;
    --portrait-opacity: 1;
    --portrait-filter: none;
}

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

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--page-background);
    scroll-behavior: smooth;
}

body {
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
    overflow: hidden;
    color: var(--text-color);
    background-color: var(--page-background);
    font-family: 'Barlow-ExtraLight', Arial, sans-serif;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.main-content-menu {
    position: fixed;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    background: var(--page-background);
}

.main-content-menu ul {
    display: flex;
    width: 100%;
    gap: clamp(14px, 5vw, 28px);
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.main-content-menu ul::-webkit-scrollbar {
    display: none;
}

.main-content-menu li {
    flex: 0 0 auto;
}

.main-content-menu a {
    display: block;
    color: var(--muted-color);
    font-family: 'Barlow-Medium', Arial, sans-serif;
    font-size: clamp(0.88rem, 3.5vw, 1rem);
    line-height: 1;
    text-decoration: none;
    transition: color 180ms ease;
}

.main-content-menu a:is(:hover, :focus-visible, .is-active) {
    color: var(--text-color);
}

.main-content-menu a:focus-visible,
.button-link:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 5px;
}

.main-content-wrapper {
    position: relative;
    height: 100vh;
    height: var(--app-height);
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background-color: var(--page-background);
}

.main-content-wrapper::-webkit-scrollbar {
    display: none;
}

.main-content-wrapper::before {
    content: '';
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image: url('static/background-600.webp');
    background-repeat: no-repeat;
    background-position: var(--portrait-x) var(--portrait-y);
    background-size: auto var(--portrait-height);
    opacity: var(--portrait-opacity);
    filter: var(--portrait-filter);
    transform: translate3d(0, 0, 0);
    transition:
        background-position 560ms cubic-bezier(0.22, 1, 0.36, 1),
        background-size 560ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms ease,
        filter 320ms ease;
}

.main-content-wrapper.bg-about {
    --portrait-x: 50%;
    --portrait-y: 100%;
    --portrait-opacity: 1;
}

.main-content-wrapper.bg-content {
    --portrait-x: -120%;
    --portrait-y: 100%;
    --portrait-opacity: 0;
    --portrait-filter: saturate(0.86);
}

.main-content-wrapper section {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100vh;
    min-height: var(--app-height);
    min-height: 100dvh;
    padding:
        calc(var(--nav-height) + var(--section-block-padding))
        var(--page-inline-padding)
        calc(var(--section-block-padding) + env(safe-area-inset-bottom));
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.section-content-wrapper {
    align-self: center;
    width: min(100%, var(--content-width));
    font-size: clamp(1rem, 4.4vw, 1.16rem);
}

.section-content-wrapper.about {
    align-self: start;
    margin-top: clamp(34px, 8svh, 90px);
}

.section-content-wrapper h1 {
    margin-bottom: clamp(14px, 3.6vw, 22px);
    font-family: 'Barlow-Bold', Arial, sans-serif;
    font-size: clamp(2.35rem, 14vw, 4.8rem);
    line-height: 0.94;
}

.section-content-wrapper p {
    max-width: 58ch;
    padding: 8px 0;
}

.section-content-wrapper div {
    padding: 8px 0;
}

.section-content-wrapper div a {
    text-decoration: none;
}

.list i,
.section-content-wrapper div i {
    width: 22px;
    padding-right: 6px;
}

.about > span {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(1.02rem, 4vw, 1.24rem);
}

.about-name {
    color: var(--text-color);
}

.list {
    list-style: none;
}

.list li {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.list span {
    margin: 0;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: fit-content;
    max-width: 100%;
    margin-top: 16px;
    padding: 10px 20px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--text-color);
    font-family: 'Barlow-Medium', Arial, sans-serif;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.button-link:is(:hover, :active) {
    color: #ffffff;
}

@media (min-width: 480px) {
    :root {
        --page-inline-padding: clamp(34px, 8vw, 78px);
        --dynamic-background-height: 48svh;
    }

    .main-content-wrapper.bg-content {
        --portrait-x: -120%;
        --portrait-opacity: 0;
    }

    .section-content-wrapper.about {
        margin-top: clamp(42px, 9svh, 112px);
    }
}

@media (min-width: 640px) {
    :root {
        --content-width: 720px;
        --portrait-height: min(62svh, 620px);
    }

    .main-content-menu {
        justify-content: flex-end;
        padding-right: clamp(34px, 7vw, 72px);
        padding-left: clamp(34px, 7vw, 72px);
    }

    .main-content-menu ul {
        width: auto;
        justify-content: flex-end;
        overflow: visible;
    }

    .main-content-wrapper.bg-about {
        --portrait-x: 100%;
    }

    .main-content-wrapper.bg-content {
        --portrait-x: 118%;
        --portrait-opacity: 0;
    }
}

@media (min-width: 768px) {
    :root {
        --nav-height: 64px;
        --page-inline-padding: clamp(60px, 9vw, 110px);
        --section-block-padding: clamp(34px, 8svh, 92px);
        --portrait-height: min(72svh, 840px);
    }

    .main-content-wrapper::before {
        background-image: url('static/background-1200.webp');
    }

    .main-content-wrapper section {
        align-items: center;
    }

    .section-content-wrapper {
        font-size: clamp(1.08rem, 2vw, 1.28rem);
    }

    .section-content-wrapper h1 {
        font-size: clamp(3.5rem, 8vw, 5.7rem);
    }
}

@media (min-width: 720px) {
    .main-content-wrapper::before {
        background-image: url('static/background-1200.webp');
    }
}

@media (min-width: 992px) {
    :root {
        --content-width: 760px;
        --page-inline-padding: clamp(74px, 9vw, 150px);
        --portrait-height: min(74svh, 760px);
    }

    .main-content-wrapper section {
        padding-left: max(var(--page-inline-padding), 58vw);
    }

    .main-content-wrapper section#about {
        padding-left: clamp(92px, 12vw, 180px);
    }

    .section-content-wrapper.about {
        align-self: start;
        margin-top: clamp(78px, 13svh, 150px);
        width: min(100%, 640px);
    }

    .section-content-wrapper p {
        max-width: 82ch;
    }

    .main-content-wrapper.bg-about {
        --portrait-x: 100%;
        --portrait-opacity: 1;
    }

    .main-content-wrapper.bg-content {
        --portrait-x: 0%;
        --portrait-opacity: 1;
        --portrait-filter: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --content-width: 600px;
    }

    .main-content-wrapper section {
        padding-right: max(var(--page-inline-padding), 9vw);
        padding-left: 56vw;
    }

    .section-content-wrapper h1 {
        font-size: clamp(3.5rem, 6.4vw, 4.25rem);
    }

    .section-content-wrapper p {
        max-width: 44ch;
    }
}

@media (min-width: 1200px) {
    :root {
        --content-width: 860px;
        --portrait-height: min(84svh, 900px);
    }

    .main-content-wrapper::before {
        background-image: url('static/background-2400.webp');
    }

    .main-content-menu {
        padding-right: clamp(70px, 11vw, 180px);
    }

    .main-content-wrapper section {
        padding-right: clamp(100px, 10vw, 180px);
        padding-left: max(clamp(130px, 13vw, 210px), 52vw);
    }

    .main-content-wrapper section#about {
        padding-left: clamp(120px, 11vw, 220px);
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    :root {
        --portrait-height: min(82svh, 820px);
    }

    .main-content-wrapper.bg-about {
        --portrait-x: 100%;
    }

    .main-content-wrapper section#about {
        padding-left: clamp(120px, 11vw, 160px);
    }
}

@media (min-width: 1200px) and (min-height: 900px) {
    .main-content-wrapper section {
        padding-left: max(clamp(120px, 12vw, 200px), 52vw);
    }
}

@media (min-width: 1500px) {
    :root {
        --content-width: 980px;
        --portrait-height: min(90svh, 1000px);
    }

    .main-content-wrapper section {
        padding-left: max(clamp(120px, 10vw, 200px), 46vw);
    }

    .main-content-wrapper section#about {
        padding-left: clamp(140px, 11vw, 260px);
    }

    .main-content-wrapper.bg-about {
        --portrait-x: 50%;
    }

    .section-content-wrapper p {
        max-width: 90ch;
    }
}

@media (min-width: 1900px) {
    :root {
        --content-width: 1180px;
        --portrait-height: min(96svh, 1120px);
    }

    .main-content-wrapper section {
        padding-left: max(clamp(120px, 9vw, 210px), 44vw);
    }

    .main-content-wrapper section#about {
        padding-left: clamp(180px, 11vw, 390px);
    }
}

@media (max-height: 430px) and (orientation: landscape) {
    :root {
        --nav-height: 48px;
        --section-block-padding: 18px;
        --portrait-height: min(70svh, 420px);
    }

    .main-content-menu a {
        font-size: 0.86rem;
    }

    .section-content-wrapper {
        font-size: 0.92rem;
    }

    .section-content-wrapper h1 {
        margin-bottom: 10px;
        font-size: clamp(2rem, 8vw, 3.3rem);
    }

    .section-content-wrapper.about {
        margin-top: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}