/*
 + --------------------------------------------------
 | Root
 + --------------------------------------------------
 */
:root {
    --wrap-space: 5rem;
    --wrap-width: 960px;
}

.btn-more {
    margin-top: var(--grid-1);
}


.project-item {
    display: grid;
    grid-template-columns: var(--grid-6) auto;
    grid-column-gap: var(--grid-1);
}
.project-item .project-info {
    order: 1;
    padding-right: 0
}
.project-item .project-cover {
    order: 2;
    transition: var(--transition);
}
.project-item:hover .project-cover {
    filter: none;
}


.post-item .post-cover {
    transition: var(--transition);
}
.post-item:hover .post-cover {
    filter: none
}


.contact-item > :last-child {
    font-weight: 500;
    font-size: 1.4em;
}

.noise-light:before {
    width: var(--grid-9);
    background-size: 150% auto;
    background-position: top 0 left var(--grid-4);
    top: 0;
}

.site {
    background-size: 40vw auto;
    background-position: top -10vw left -20vw;
}
.site-block {
    margin-top: 10rem;
}

.site-title {
    max-width: var(--grid-14);
    padding-left: var(--grid-1);
}
.site-subtitle {
    max-width: var(--grid-10);
    padding-left: var(--grid-3);
    margin-top: 4em;
}

.site-filter {
    padding-left: var(--grid-1);
}

.site-filter a:not(.active),
.site-pagination a:not(.active) {
    transition: var(--transition);
}

.site-filter a:not(.active):hover,
.site-pagination a:not(.active):hover {
    border-color: rgb(var(--text-color-secondary-rgb) / .6);
    color: var(--text-color-secondary)
}


/*
 + --------------------------------------------------
 | Footer
 + --------------------------------------------------
 */
#footer {
    --logo-size: var(--grid-2);
    --gap-left: var(--grid-1)
}
#footer .wrapper {
    padding-left: initial;
    padding-right: initial;
    background: url("../asset/noise-light.png") no-repeat top var(--grid-4) left 0 / 55% auto;
    display: grid;
    grid-template-columns: var(--grid-7) var(--grid-5);
    column-gap: var(--grid-1);
    align-items: end;
}
#footer .wrapper:before {
    display: none;
}
#footerBrand {
    height: clamp(50rem, var(--grid-8), calc(100vh - var(--grid-3)));
    margin-left: var(--grid-2);
    border: thin solid var(--text-color-secondary);
    border-bottom: none;
}
#footer .brand-head {
    transform: translateX(calc(-1 * var(--grid-1)));
}
#footer .brand-name {
    font-size: 4.5em;
}
#footer .brand-slogan {
    width: 100%;
    padding-inline: 10%;
}


/*
 + --------------------------------------------------
 | Menu
 + --------------------------------------------------
 */
#menu {
    background-size: 100%, 100%;
}
#menuBody {
    grid-template-columns: var(--grid-6) auto;
}
#menuInfo {
    order: 2;
    padding-bottom: 4rem;
}
#menuMain {
    order: 3;
}


/*
 + --------------------------------------------------
 | Home
 + --------------------------------------------------
 */
#home .block {
    --block-gap-y: var(--grid-4);
}
#home .block-subtitle {
    font-size: 1.4em;
}


#bannerMain {
    margin-left: var(--grid-2);
}
#bannerMenu {
    max-width: var(--grid-2);
}
#bannerProject .banner-box img:hover {
    transform: scale(1.1);
    filter: none;
}
#bannerWindow {
    width: var(--grid-5);
}
#bannerLogo {
    width: var(--grid-2);
    margin-left: calc(2.5 * var(--grid-1));
}


#homeProjects .btn-more {
    margin-left: var(--grid-7);
    margin-right: auto
}
#home .block-title {
    --box-size: var(--grid-2);
    font-size: 7em;
}


/* -------------------------
 * Services
 * -------------------------
 */
.block-services {
    display: grid;
    grid-template-columns: var(--grid-4) auto;
    column-gap: var(--grid-2);
}
.block-services .is-desktop {
    display: block;
}

.block-services .menu {
    display: block;
}
.block-services .menu {
    font-size: 1.4em;
    text-align: right;
    margin-top: calc(.5 * var(--grid-1));
}
.block-services .menu li {
    line-height: 1;
    padding: .7em 0;
    user-select: none;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}
.block-services .menu li:not([show]):hover {
    color: var(--text-color-secondary)
}

.block-services .menu li[show] {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--text-color-secondary)
}
.block-services .menu li[show]:after {
    --icon-size: 3rem;
    content: '';
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    border: thin solid var(--text-color-secondary);
    background-size: 50% auto;
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--grid-1));
    transform: translateY(-50%);
}

.block-services .cover {
    width: var(--grid-10);
}
.block-services .cover:after {
    background: var(--black-alpha-60);
}

.block-services .container {
    max-height: 80vh;
    margin-top: calc(-6.667 * var(--grid-1));
    padding-top: 4rem;
    padding-left: var(--grid-2);
    padding-right: var(--grid-1);
    padding-bottom: 4rem;
    text-align: left;
    overflow: auto;
}
.block-services .title {
    display: none;
}
.block-services .summary {
    margin-top: 0;
    font-size: 1.2em;
    font-weight: 500;
}
.block-services .service-item {
    display: none;
    transition: var(--transition)
}
.block-services .service-item[show] {
    display: block;
}
.block-services .service-item + .service-item {
    margin-top: initial;
}

/*
 + --------------------------------------------------
 | About
 + --------------------------------------------------
 */
#about .block {
    --gap-top: 18rem
}
#aboutCore .core-list,
#aboutContent {
    max-width: var(--grid-10);
    margin-left: auto;
    margin-right: auto;
}
#about .block-title {
    font-size: 4em;
}

/*
 + --------------------------------------------------
 | Project
 + --------------------------------------------------
 */
#project .site-pagination {
    justify-content: start;
    padding-right: initial;
    padding-left: var(--grid-7);
}
#projectSingle .year {
    text-align: right;
    border-top: thin solid rgb(var(--text-color-primary-rgb) / .4);
}
#projectSingle .project-props {
    grid-template-columns: var(--grid-1) var(--grid-4) auto;
    column-gap: var(--grid-1);
}
#projectSingle .project-photos {
    gap: 1rem;
    padding-inline: 1rem;
}
#projectSingle .project-content {
    width: var(--grid-10);
    margin-inline: auto;
}
#projectSingle .project-other {
    margin-top: var(--grid-2)
}

/*
 + --------------------------------------------------
 | Post
 + --------------------------------------------------
 */
#human .post-list,
#post .post-list {
    grid-template-columns: repeat(3, 1fr);
}
#post .post-item:nth-child(5n+1) {
    grid-column: initial;
}
#human .post-list > :first-child,
#post .post-item:nth-child(13),
#post .post-item:nth-child(7),
#post .post-item:nth-child(1) {
    grid-row: span 2;
    grid-column: span 2;
}
#human .post-list > :first-child .post-title,
#post .post-item:nth-child(13) .post-title,
#post .post-item:nth-child(7) .post-title,
#post .post-item:nth-child(1) .post-title {
    font-size: 2em;
}


#postSingle .post-cover {
    text-align: center;
}
#postSingle .post-cover img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: inline-table;
}
#postSingle .site-title {
    margin-top: -.95em;
}
#postSingle .site-container {
    width: var(--grid-10);
    margin-inline: auto;
}
#postSingle .post-other a {
    padding: 1.5em 0;
}