/* === GENERAL STYLING === */
* {
    box-sizing: border-box;
}
:root{
    --yellow: #ffff00; 
     font-size: clamp(0.875rem, 0.5vw + 1rem, 1.25rem);
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}
@font-face {
    font-family: NeueHaasDisplay;
    src: url(../assets/font/Neue_Haas/NeueHaasGroteskDisplay-Reg.otf);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: NeueHaasDisplay;
    src: url(../assets/font/Neue_Haas/NeueHaasGroteskDisplay-Italic.otf);
    font-weight: 400;
    font-style: italic;
}
h1 {
    font-size: var(--step-3);
}
h2 {
    font-size: var(--step-1);
}

h3, #link{
    font-size: var(--step-2);
} 
h4 {
    font-size: var(--step-0)
}
p{
    font-size: var(--step--1);
}
button{
    font-size: var(--step--2);
}
figcaption{
    font-size: var(--step--2);
}
h1,h2,h3,h4,h5, h6, p, ul, li,a, button {
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    margin: 0;
    padding: 0; 
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: NeueHaasDisplay;
    letter-spacing: -0.00375em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: auto;
    font-weight: 400;
    line-height: 1.26;
    overflow-y: scroll;
}
::selection,
::-moz-selection {
    background: var(--yellow);
}
a {
    text-decoration: none;
    color: #000;
}
a:hover {
    cursor: pointer;
}
figure{
    margin: 0;
    padding: 0;
}
#title--highlighted{
    display: inline-block;
}
/* === BUTTONS === */
button {
    font-weight: 400;
    border: 1px solid black;
    color: #000;
    background-color: transparent;
    display: inline-block;
    border-radius: 5px;
    padding: 0.05rem 0.5rem;
    white-space: nowrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
button:hover {
    cursor: pointer;
    background-color: #000;
    color: #fff;
}

/* === NAVIGATION === */
#nav {
    grid-column: 1 / 13;
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 2rem;
}
.nav--desk ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 1rem;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}
.nav--desk ul li {
    text-transform: lowercase;
}
.nav--desk ul li a {
    color: #000;
    text-decoration: none;
    padding-bottom: 2px;
}
.nav--desk ul li a:hover {
    color: #000;
}
.nav--desk ul li:first-of-type {
    flex-grow: 2;
    margin-left: 0;
    border: none;
}
.nav--desk ul li:first-of-type:hover {
    background-color: transparent;
}
.nav--desk ul li #link--active {
    border-bottom: 2px solid #000;
    font-weight: 500;
}

/* === CONTAINER === */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

/* === INFO === */
.info{
    grid-column: 1/13;
    position: relative;
    top: 10vh;
}
.info--col-2{
    display: grid;
    grid-template-columns: repeat(2, 6fr);
    grid-gap: 1rem;
    row-gap: 3rem;
}
.info--section-text button:first-of-type{
    margin-right: 1rem;
}
.hero{
    grid-column: 1/11;
    position: relative;
    top: 10vh;
}
.hero h1{
    font-size: calc(4.5rem+0.25vw);
    line-height: 1.1;
}
#background_image{
    width: auto;
    height: 100%;
    max-height: 75vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    visibility: hidden;
}
#background_image[src]:not([src=""]) {
  visibility: visible; 
}
.hero .hover-word{
    display: inline-block;
}
.hero .title_icon_plus{
    position: relative;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    bottom: 2.5rem;
    background-color: transparent;
    margin-right: 1rem;
}
.hero .title_icon_plus::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 1rem;
    background-color: black;
    transform: translate(-50%, -50%);
}
.hero .title_icon_plus::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 3px;
    background-color: black;
    transform: translate(-50%, -50%);
}
.hover_word {
    cursor: pointer;
    position: relative;
}
.hover_image {
    max-width: 300px;
    position: absolute;
    background: white;
    z-index: 2;
}

/* === EDITOR === */
.editor{
    grid-column: 1 / 13;
}
.editor--col-2{
    display: grid;
    grid-template-columns: repeat(2, 6fr);
    grid-gap: 1rem;
    top: 0;
    position: relative;
    align-content: space-between;
}
.editor--container {
    position: relative;
    width: 100%;
    max-height: 100%;
    background-color: white;
    cursor: pointer;
}
.editor--container:hover{
    cursor: pointer;
}
.editor--container h3{
    display: block;
    padding: 1rem;
}
.object--wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    cursor: pointer;
}
.editor--container object{
    position: relative;
    width: 50vw;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
    cursor: pointer;
    padding: 1rem;
}
.editor--container #object__img {
    position: absolute;
    width: 50vw;
    z-index: 1;
    padding: 1rem;
}
#editor--note{
    padding: 1rem;
}
/* === EDITOR INFO === */
.editor--info {
    background-color: white;
    padding: 1rem;
    max-height: 100%;
}
.editor--info-footer{
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.editor--info .container__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem 0;
    padding: 0;
}
.editor--info figure {
    max-width: 350px;
    margin: 1rem 0;
}
.editor--info figure img {
    max-width: 100%;
    border-radius: 5px;
}
.editor--info #container--info-button {
    display: flex;
    gap: .5rem;;
}
/* == CATALOGUE THUMBNAILS == */
.thumb--original {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.thumb--original img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb--cycle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    transform: scale(0.8);
    transform-origin: center;
    background: none;
    mix-blend-mode: normal;
}
.thumb--cycle img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(10000%) hue-rotate(0deg);
}
#yolk--thumb:hover .thumb--cycle,
#machine--thumb:hover .thumb--cycle,
#komo--thumb:hover .thumb--cycle,
#tbs--thumb:hover .thumb--cycle,
#k7690--thumb:hover .thumb--cycle,
#arch--thumb:hover .thumb--cycle,
#spear--thumb:hover .thumb--cycle,
#harmonica--thumb:hover .thumb--cycle,
#chip--thumb:hover .thumb--cycle {
    opacity: 1;
    cursor: pointer;
}
#yolk--image,
#machine--image,
#komo--image,
#tbs--image,
#k7690--image,
#arch--image,
#spear--image,
#harmonica--image,
#chip--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: none;
    mix-blend-mode: normal;
}
#k7690--thumb .thumb--cycle {
    transform: scale(0.78);
}
#komo--thumb .thumb--cycle {
    transform: scale(0.7);
}
#arch--thumb .thumb--cycle,
#harmonica--thumb .thumb--cycle,
#spear--thumb .thumb--cycle,
#tbs--thumb .thumb--cycle {
    transform: scale(0.75);
}

/* === GALLERY === */
.gallery{
    grid-column: 1 / 13;
    display: grid;
    gap: 2em;
}
.gallery--3-col{
    grid-template-columns: repeat(3, 4fr);
    row-gap: 4em;
}
.gallery--4-col {
    grid-template-columns: repeat(4, 3fr);
    row-gap: 2em;
}
.gallery--4-col .gallery--thumbnail figcaption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: .5rem;
}
.gallery--thumbnail {
    position: relative;
}
.gallery--thumbnail img {
    width: 100%;
    object-fit: cover;
}
.gallery--thumbnail #image--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
}
.gallery--thumbnail #image--hover:hover {
    opacity: 1 !important;
    z-index: 0;
}
.gallery--thumbnail--bg {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
.gallery--thumbnail--bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: transparent;
    transition: opacity 0s ease-in-out;
}
.gallery--thumbnail--bg a {
    cursor: pointer;
}
.gallery__thumbnail button{
    margin: 1rem 0 0 0;
}
.thumb--cycle{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(10000%) hue-rotate(0deg);
}

/* === QUERIES === */
@media (min-width: 1600px) {
    h1 {
        font-size: var(--step-4);
    }
    h2 {
        font-size: var(--step-2);
    }
    h3, #link{
        font-size: var(--step-3);
    } 
    p{
        font-size: var(--step-1);
    }
    button{
        font-size: var(--step--3);
    }
    figcaption{
        font-size: var(--step--3);
    }
}
@media (min-width: 1024px) {
    .hero h1{
        font-size: calc(3.5rem + 2vw);
    }
    .editor--info {
        background-color: white;
        padding: 1rem;
        max-height: 100%;
    }
    .editor--info .container__title {
        margin: 0 0 2rem 0;
    }
    .editor--info figure {
        max-width: 600px;
        margin: 2rem 0;
    }
}
@media (max-width: 1024px){
    .hero .title_icon_plus{
        position: relative;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        bottom: 1rem;
        background-color: transparent;
        margin-right: .75rem;
    }
}
@media (max-width: 800px) {
    #nav {
        grid-column: 1 / 13;
        position: sticky;
        top: 1rem;
        z-index: 7;
        margin-bottom: 2rem;
    }
    .nav--desk{
        display: none !important;
    } 
    .nav--mob{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ham-menu{
        height: 1.5rem;
        width: 1.5rem;
        margin-left: auto;
        position: relative;
        z-index: 5;
        cursor: pointer;
    }
    .ham-menu span{
        height: 3px;
        width: 100%;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: all 0.3s ease;
    }
    .ham-menu span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg);
    }

    .ham-menu span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(90deg);
    }

    .ham-menu.active span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(90deg);
    }

    .ham-menu.active span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(180deg);
    }
    .off-screen-menu{
        background-color: var(--yellow);
        height: 100%;
        width: 100%;
        max-width: 100vw;
        position: fixed;
        top: 0;
        right: -100vw;
        transition: right 0.3s ease;
        z-index: 4;
        padding: 1rem;
    }
    .off-screen-menu ul{
        display: flex;
        flex-direction: column;
        list-style-type: none;
        row-gap: .5rem;

    }
    .off-screen-menu ul li a{
        display: inline-block;
        border-bottom: 2px solid transparent;
    }
    .off-screen-menu ul li a:hover{
        border-bottom: 2px solid black;
    }
    .off-screen-menu.active{
        right: 0;
    }   
    .hero{
        position: relative;
        top: 5vh;
    }
    .hero h1{
        font-size: calc(2.5rem + 2vw);
    }
    .hero .title_icon_plus{
        position: relative;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        bottom: 1.25rem;
        background-color: transparent;
        margin-right: .5rem;
    }
    .gallery--3-col{
        grid-template-columns: repeat(1, 1fr);
    }
    .gallery--4-col{
        grid-template-columns: repeat(2, 1fr);
    }
    .info--col-2{
        grid-template-columns: repeat(1, 1fr);
        row-gap: 2rem;
    }
    .editor--col-2{
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
    .editor--info{
        grid-row: 2;
    }
    .info{
        top: 5vh;
    }
    .info--col-2{
        row-gap: 1.5rem;;
    }
    .editor--container object{
        width: 85vw;
        padding: .5rem;
    }
    .editor--container #object__img {
        width: 85vw;
        padding: .5rem;
    }
    .editor--info .container__title {
        flex-direction: column;
        align-items: flex-start;
    }
    .editor--info #container--info-button{
        margin-top: .5rem;
    }
}
@media (min-width: 800px) {
    .nav--mob, .ham-menu, .off-screen-menu{
        display: none !important;
    }
}