.site {
    width: min(100%, calc(var(--content-width) + (2 * var(--page-padding))));
    margin: 0 auto;
    padding: clamp(34px, 5vw, 72px) var(--page-padding) clamp(30px, 4vw, 58px);
}

.site[data-page-content] {
    opacity: 1;
    transition: opacity 1800ms cubic-bezier(.16, 1, .3, 1);
}
.site[data-page-content].is-jumping-top {
    opacity: 0;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .7, 1);
}

.hero { margin: 0; }
.hero__title {
    margin: 0 0 clamp(24px, 3.4vw, 48px);
    text-align: center;
    font-size: clamp(42px, 6.3vw, 112px);
    font-weight: 300;
    line-height: .9;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: var(--title-opacity);
}
.hero__email {
    display: inline-block;
    font-size: clamp(11px, 1.15vw, 14px);
    text-decoration: none;
    transition: opacity var(--motion-fast) ease;
}
.hero__email:hover,
.hero__email:focus-visible { opacity: .5; }
.rule {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 10px 0 var(--gallery-gap);
    background: var(--line-color);
    overflow: hidden;
}
.rule--bottom { margin: var(--gallery-gap) 0 0; }
.socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    min-height: 94px;
}
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity var(--motion-fast) ease;
}
.social-link:hover,
.social-link:focus-visible { opacity: .48; }
.social-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.back-to-top {
    position: fixed;
    z-index: 20;
    right: clamp(14px, 2vw, 30px);
    bottom: clamp(14px, 2vw, 28px);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
    cursor: pointer;
    backdrop-filter: blur(5px);
}
.back-to-top.is-visible {
    opacity: .72;
    pointer-events: auto;
    transform: none;
}
.back-to-top:hover { opacity: 1; }