* {
    margin: 0;
    padding: 0;
}
:root {
    --spacing0: calc(var(--spacing1) * 1.62);
    --spacing1: calc(var(--spacing2) * 1.62);
    --spacing2: calc(var(--spacing3) * 1.62);
    --spacing3: calc(var(--spacing4) * 1.62);
    --spacing4: clamp(10px, 4vw, 24px);
    --spacing5: calc(var(--spacing4) / 1.62);
    --spacing6: calc(var(--spacing5) / 1.62);
    --spacing7: calc(var(--spacing6) / 1.62);

    --container-width: calc(100vw - var(--spacing0) * 2);

    --h1: calc(var(--h2) * 1.62);
    --h2: calc(var(--h3) * 1.62);
    --h3: clamp(36px, 4vw, 42px);
    --h4: calc(var(--h3) / 1.62);
    --h5: calc(var(--h4) / 1.62);
    --h6: calc(var(--h5) / 1.62);
    --p:  calc(var(--h4) / 1.62);
      
    --white: #fbfbfb;
    --black: #333333;
    --grey: #b6b6b6;
    --blue: #2d78e1;
    --bluesecondary: #002963;
}
body {
    margin-top: var(--spacing2);
    margin-left: calc((100vw - var(--container-width)) / 2);
    margin-right: calc((100vw - var(--container-width)) / 2);
    background-color: var(--white);
}

/* TYPOGRAPHY */
@font-face {
    font-family: 'YZE';
    src: url('./assets/YZE.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, a {
    font-family: 'YZE', sans-serif;
    color: var(--black);
    text-align: left; font-weight: 400; font-style: normal; line-height: normal;
    font-variant-ligatures: common-ligatures contextual; font-feature-settings: "calt" on, "liga" on, "dlig" on;

    margin-bottom: var(--spacing6);
}

h1, h2, h3, h4 {
    hyphens: auto;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p  { font-size: var(--p); }

h5 { font-weight: 700; }

a { 
    text-decoration: none;
    color: var(--bluesecondary);
}
a:hover { 
    text-decoration: underline; 
    color: var(--grey);
}

/* TEXT APPEARANCE */
.invisible { font-size: 0.1px; color: var(--white); }

/* FULL-SCREEN MEDIA VIEWER */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(251, 251, 251, 0.1);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    cursor: pointer;
    /* padding: var(--spacing0); */
    box-sizing: border-box;
    stroke: rgb(136, 0, 255);
}

.fullscreen-media-container {
    width: 100%;
    height: calc(100vh - var(--spacing0) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    stroke: rgb(97, 181, 51);
}

.fullscreen-media {
    /* border-radius: var(--spacing7);
    cursor: pointer;
    max-width: var(--container-width);
    max-height: calc(100vh - (var(--spacing0) * 2));
    width: auto;
    height: auto;
    object-fit: contain; */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--spacing7);
    cursor: pointer;


    stroke: red;
}


/* GRID SYSTEM */
.container  {
    margin-bottom: var(--spacing1); 
    /* gap: var(--spacing3); */
}
.spacious {
    margin-left: calc(12vw); 
    margin-right: calc(12vw);
}

/* .column-header { margin-bottom: var(--spacing3); } */

.grid-container {
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    gap: var(--spacing3); 
    margin-bottom: var(--spacing3);
}

.container > .grid-container.full-bleed {
    margin-left: calc(var(--spacing0) * -1); 
    margin-right: calc(var(--spacing0) * -1);
    gap: 0;
}

.grid-container.column-index .grid-item {
    margin-bottom: calc(var(--spacing3) * -1);
    /* background-color: var(--grey); */
}

/* .container > div > div, .container > div > div > div, .container > div > div > div > div{
    background-color: pink; outline: 1px solid red;
} */

.grid-single {
    grid-column: span 12;
}
.grid-heavy {
    grid-column: span 8;
}
.grid-double,
.grid-container.column-index .grid-item:nth-child(3n+2) {
    grid-column: span 6;
}
.grid-triple,
.grid-light,
.grid-container.column-index .grid-item:nth-child(3n+3),
.grid-container.gallery .grid-item {
    grid-column: span 4;
}
.grid-quadruple {
    grid-column: span 3;
}
.grid-sextuple,
.grid-container.column-index .grid-item:nth-child(3n+1) { 
    grid-column: span 2;
}

/* LAYOUT */
.grid-container.column-header .grid-item { grid-column: span 1; }
.grid-container.column-header .grid-item:nth-child(1) { grid-column: span 9; }

.grid-container.column-index .grid-item:nth-child(3n+1), 
.gallery .grid-item .grid-item h5,
.grid-container.column-header .grid-item a h5,
.right-align { 
    text-align: right; 
}

.center {
    text-align: center;
}

.metadata { 
    width: 100%; 
    display: flex; 
    /* background-color: red; */
}
.metadata > .title { width: calc(var(--container-width) * 0.8); }
.metadata > .year { 
    width: calc(var(--container-width) * 0.2); 
    text-align: right;
}

.tags {
    display: flex;
    /* flex-direction: row-reverse; */
    flex-wrap: wrap;
    gap: 0 var(--spacing6);
}
.tags > h6 { 
    background-color: var(--grey);
    color: var(--white);
    padding: var(--spacing7) var(--spacing6);
    white-space: nowrap;
    border-radius: var(--spacing7);
}

.secondary, .year {
    color: var(--grey);
}

.description { padding-left: calc((var(--container-width) / 2) + (var(--spacing3) / 2)); }

.rating, .source {
    text-align: right;
}

/* PROJECT NAVIGATION */
.project-metadata-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.project-title-year {
    display: flex;
    gap: var(--spacing6);
}

.nav-button {
    background-color: var(--blue);
    color: var(--white);
    border-radius: var(--spacing7);
    padding: var(--spacing7) var(--spacing6);
    white-space: nowrap;
    text-decoration: none;
    font-size: var(--h6);
    font-family: 'YZE', sans-serif;
    align-self: flex-start;
}

.nav-button:hover {
    text-decoration: none;
    background-color: var(--black);
    color: var(--white);
}

img, video, iframe {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    margin-bottom: var(--spacing6);
    border-radius: var(--spacing7);
}
.full-bleed > div > img, .full-bleed > div > video, .full-bleed > div > iframe {
    border-radius: 0;
    margin-bottom: 0;
}
.no-radius {
    border-radius: 0;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (min-width: 1780px) {
    :root {
        --container-width: calc(1780px - var(--spacing1) * 2); 
    }
}

@media (max-width: 768px) {
/* @media (max-width: 1024px) { */
    :root {
        --container-width: calc(100vw - var(--spacing2) * 2);
    }

    .spacious {
        margin-left: calc(4vw); 
        margin-right: calc(4vw);
    }

    .grid-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-container.column-header .grid-item { grid-column: span 1; }
    .grid-container.column-header .grid-item:nth-child(1) { grid-column: span 3; }

    .grid-single,
    .grid-double,
    .grid-triple,
    .grid-light, .grid-heavy,
    .grid-container.gallery .grid-item {
        grid-column: span 6;
    }
    .grid-container.column-index .grid-item:nth-child(3n+2) { 
        grid-column: span 5;
    }
    .grid-container.column-index .grid-item:nth-child(3n+3) { 
        grid-column: span 5 / -1;
    }
    .grid-quadruple {
        grid-column: span 3;
    }
    .grid-sextuple { 
        grid-column: span 2;
    }
    .grid-container.column-index .grid-item:nth-child(3n+1) { 
        grid-column: span 1;
    }

    .grid-double.stubborn {
        grid-column: span 3;
    }
    
    .gallery .grid-item .grid-item h4 { grid-column: span 5; }
    .gallery .grid-item .grid-item h5 { grid-column: span 1; }

    .description { padding-left: 0; }

    /* PROJECT NAVIGATION - MOBILE */
    .project-metadata-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing6);
    }

    .nav-button {
        position: fixed;
        bottom: var(--spacing3);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

}

/* PAGE LOADER */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s ease-out;
}

.page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    width: 300px;
    max-width: 80vw;
}

.loader-percentage {
    font-family: 'YZE', sans-serif;
    font-size: var(--h4);
    color: var(--black);
    margin-bottom: var(--spacing5);
    font-weight: 400;
}

.loader-bar-container {
    width: 100%;
    height: 2px;
    background-color: var(--grey);
    border-radius: 1px;
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    background-color: var(--blue);
    width: 0%;
    transition: width 0.1s ease-out;
}