/*
 + --------------------------------------------------
 | Root
 + --------------------------------------------------
 */
:root {
    --wrap-width: 1440px;
}
.noise-light:before {
    background-size: 120% auto;
    background-position: top 0 left var(--grid-5);
    top: 0;
}

.site-block {
    margin-top: 12rem;
}
.site-title {
    max-width: var(--grid-12);
}

#footer .brand-name {
    font-size: 7em;
}


#menu {
    background-size: 45%, 100%;
    background-position: top 75vh left -5%, 100%;
}
#menuBody {
    grid-template-columns: 30% 30% auto;
    grid-column-gap: 4rem;
}
#menuBrand {
    display: block;
}

#menuBrand {
    display: block;
    align-self: end;
    height: calc(100vh - var(--grid-4));
    border: thin solid var(--text-color-secondary);
    border-bottom: none;
    margin-left: 20%;
}
#menuBrand .brand-head {
    transform: translateX(-50%);
    margin-top: calc(-1.5 * var(--grid-1));
    text-align: right;
}
#menuBrand .brand-logo {
    height: calc(1.5 * var(--grid-1));
    display: inline-table;
}
#menuBrand .brand-name {
    font-size: 6em;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -.08em;
    color: var(--text-color-secondary);
}
#menuBrand .brand-slogan {
    padding-inline: 4rem;
    margin-top: 5rem;
    font-size: 1.2em;
}


.block-services .menu {
    font-size: 1.8em;
}


#projectSingle .project-props {
    grid-template-columns: var(--grid-1) var(--grid-3) auto;
}
#projectSingle .project-photos {
    column-count: 3;
}

#post .post-list {
    grid-gap: 6rem;
}