.beta {
    display: none;
    position: fixed;
    height: 80px;
    background-color: yellow;
    top: 20px;
    left: 20px;
    aspect-ratio: 1;
    text-align: center;
    justify-content: center;
    align-items: center;

    animation: rotate 2s infinite;
}

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

:root {
    --base-space: 6px;

    --color-background: #FFF8E7;
    --color-black: #2E1E13;
    --color-white: #FFFFFF;
    --color-dark: rgba(0, 0, 0, 0.3);
    --color-light: rgba(255, 255, 255, 0.4);
    --color-primary: #c52955;
    --color-secondary: #D8D694;

    /* --margin-sm: calc(var(--base-space) * 1);
    --margin-md: calc(var(--base-space) * 2);
    --margin-lg: calc(var(--base-space) * 4);
    --margin-xl: calc(var(--base-space) * 8);
    --margin-xxl: calc(var(--base-space) * 16) */
}

@media screen and (min-width: 0px) {
    :root {
        --fs-big: 18px;
        --lh-big: 20px;

        --fs-main: 14px;
        --lh-main: 18px;

        --fs-md: 16px;
        --lh-md: 19px;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --fs-big: 20px;
        --lh-big: 24px;

        --fs-main: 14px;
        --lh-main: 18px;

        --fs-md: 16px;
        --lh-md: 19px;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-main);
    line-height: var(--lh-main);
    -webkit-tap-highlight-color: transparent;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0 !important;
    padding: 0 !important;

    background-color: var(--color-background);


}

nav {
    display: flex;
    gap: 3px;
    font-size: var(--fs-big);
    line-height: 1;

    width: fit-content;
    height: fit-content;
    position: fixed;
    bottom: 20px;
    left: 26px;
    transform: rotate(180deg);
    writing-mode: vertical-lr;

    z-index: 999;

}

#btnJK {
    /* transform: rotate(90deg); */
}

nav a {
    text-decoration: none;
    font-family: 'Anthony', Arial, Helvetica, sans-serif;
    padding: 10px 4px 10px 8px;
    border-radius: 999px;
    /* background-color: var(--color-black); */
    color: var(--color-black);
    transition: all .3s cubic-bezier(0.84, 0, 0.4, 1);
}

nav a:hover {
    /* transform: rotate(90deg); */
    background-color: var(--color-black);
    color: var(--color-white);
    transition: all .3s cubic-bezier(0.84, 0, 0.4, 1);
}

.nav-active {
    border-radius: 999px;
    /* transform: rotate(90deg); */
    background-color: var(--color-secondary);
}


nav:has(a:not(.nav-active):hover) .nav-active {
    /* transform: rotate(0) !important;
    background-color: transparent; */
}

.nav-close {
    display: none;
    border-radius: 999px;
    background-color: var(--color-secondary);
    /* transform: rotate(90deg); */
}

.nav-close:hover {}


body.scroll-locked #btnWorks {
    display: none;
}

body.scroll-locked .nav-close {
    display: inline;
}

body.scroll-locked {
    overflow: hidden;
}



/* MISC */
.hidden {
    opacity: 0;
    transition: opacity .3s ease;
}

.project.is-open .hidden {
    opacity: 1;
}

/* FLICKTY */
.flickity-viewport {
    overflow-x: clip;
    overflow-y: visible;
    /* transition: all .3s cubic-bezier(0.84, 0, 0.4, 1); */
}

.flickity-page-dots {
    display: none;
}

.main-carousel {
    height: 60vh;
    width: 100%;
    box-sizing: border-box;

    transition: height .8s cubic-bezier(0.84, 0, 0.4, 1), padding-left .8s cubic-bezier(0.84, 0, 0.4, 1);
}

#project-1 .main-carousel {
    padding-left: 15vw;
}

#project-2 .main-carousel {
    padding-left: 6vw;
}

#project-3 .main-carousel {
    padding-left: 22vw;
}

.carousel-cell {
    position: relative;
    width: auto;
    height: 100%;
    margin-right: var(--base-space);
}

.carousel-cell figure {
    position: relative;
    margin: 0;
    height: 100%;
    width: auto;
}

.carousel-cell img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--base-space) calc(2 * var(--base-space));
    color: var(--color-dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.project.is-open figure:hover figcaption {
    opacity: 1;
}

.hover-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.launcher:hover+.hover-reveal {
    opacity: 1;
}

.main-carousel .launcher:hover {
    cursor: crosshair !important;
}

.project.is-open .main-carousel {
    height: 60vh;
    cursor: e-resize !important;
}

/* Beats the #project-N .main-carousel specificity above so the
   deconstructed-grid padding collapses once a project is open. */
#project-1.is-open .main-carousel,
#project-2.is-open .main-carousel,
#project-3.is-open .main-carousel {
    padding-left: 0;
}

#cursor {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    /* transition: all .05s ease; */

    display: none;
}

#cursor.is-visible {
    opacity: 1;
}

/* WORKS */
#works {
    display: flex;
    flex-direction: column;
    gap: 15vh;
    padding-top: 10vh;
}

.project {
    height: 60vh;
    width: 100vw;
    display: flex;
    position: relative;
    gap: var(--base-space);

    transition: all 1s cubic-bezier(0.84, 0, 0.4, 1);
}

.launcher {
    position: relative;
}

.launcher .secondary {
    opacity: 0;
    position: absolute;
}

.project-title {
    position: absolute;
    padding: 0 calc(2 * var(--base-space));
    pointer-events: none;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: var(--base-space);
    transform: translateY(100%);
    transition: opacity .3s ease;

    opacity: 0;
}

.project.is-open .project-title {
    opacity: 0;
}


.project-title h3 {
    color: var(--color-black);
}

.project-title span {
    color: var(--color-dark);
}

.project:not(.is-open) .launcher:hover~.project-title {
    opacity: 1;
}

.project-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 20px 0;
    pointer-events: none;
    opacity: 0;

    transition: all .6s cubic-bezier(0.84, 0, 0.4, 1);
}

.project.is-open {
    height: 100vh;
    transition: all 1s cubic-bezier(0.84, 0, 0.4, 1);
}

.project.is-open .project-text {
    opacity: 1;
    pointer-events: all;

    transition: all 1.3s cubic-bezier(0.84, 0, 0.4, 1);
}

.col-Left {
    grid-column: 7/10;
    padding: 0 calc(2*var(--base-space));
    display: flex;
    flex-direction: column;
    gap: var(--base-space);
    justify-content: end;
}

.col-Right {
    grid-column: 10/13;
    padding: 0 calc(2*var(--base-space));
}

h3 {
    font-family: 'Anthony', Arial, Helvetica, sans-serif;
    font-size: var(--fs-big);
    line-height: var(--lh-big);
    color: var(--color-black);
}

.project-text p {
    color: var(--color-dark);
}

/* ABOUT */
#about {
    margin-top: 20vh;
    height: 100vh;
    position: relative;
    /* background: #FFF8E7; */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}


#about figure {
    position: absolute;
    margin: 0;
    width: fit-content;
}

#about img {
    height: 60vh;
    width: auto;
    opacity: 0;
    transition: all .8s cubic-bezier(0.84, 0, 0.4, 1);
}

#about.is-visible img {
    opacity: 1;
}

#about.is-visible figure:hover figcaption {
    opacity: 1;
}

#scroll-end {
    height: 1px;
}

.about-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 20px 0;
    pointer-events: none;
}

.col-Single {
    grid-column: 7/12;
    padding: 0 calc(2*var(--base-space));
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-space)*4);
    justify-content: end;
    pointer-events: all;
}

.col-Single {
    color: var(--color-dark);
    font-size: var(--fs-md);
    line-height: var(--lh-md);
}

/* .about-credits {
    padding-top: var(--base-space)
} */

.contact {
    display: flex;
    flex-direction: column;
    gap: var(--base-space);
}

.contact a {
    color: var(--color-dark);
    text-decoration: none;
}

/* DRAWINGS */

.drawing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .1;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: height .8s cubic-bezier(0.84, 0, 0.4, 1)
}

.drawing img {
    height: 130%;
    width: auto;
    object-fit: cover;
}

.no-draw {
    opacity: 0;
    transition: height .8s cubic-bezier(0.84, 0, 0.4, 1)
}