/* =====================================
   LUNA GRÜSGEN
   Portfolio Website
===================================== */


/* ---------- FONT ---------- */


@font-face {
    font-family: "Halenoir";
    src: url("../fonts/Halenoir-Regular.woff2") format("woff2");
    font-weight: 400;
}


@font-face {
    font-family: "Halenoir";
    src: url("../fonts/Halenoir-Medium.woff2") format("woff2");
    font-weight: 500;
}


@font-face {
    font-family: "Halenoir";
    src: url("../fonts/Halenoir-Bold.woff2") format("woff2");
    font-weight: 700;
}



/* ---------- VARIABLES ---------- */


:root {

    --black: #000;
    --white: #fff;

}



/* ---------- RESET ---------- */


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    font-family: "Halenoir", Arial, sans-serif;

    overflow-x: hidden;

}



a {

    color: inherit;
    text-decoration: none;

}



/* ---------- NAVIGATION ---------- */


.navigation {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 35px 45px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 10;

    color: white;

}



.logo {

    font-size: 18px;

    letter-spacing: .12em;

    font-weight: 500;

}


nav {

    display: flex;

    gap: 35px;

}



nav a {

    font-size: 12px;

    letter-spacing: .18em;

    text-transform: uppercase;

}



/* ---------- HERO VIDEO ---------- */


.hero-video {

    height: 100vh;

    width: 100vw;

    position: relative;

    overflow: hidden;

}



.hero-video video {

    height: 100%;
    width: 100%;

    object-fit: cover;

}



.hero-meta {

    position: absolute;

    left: 45px;
    bottom: 35px;

    display: flex;

    gap: 35px;

    color: white;

    font-size: 11px;

    letter-spacing: .18em;

    text-transform: uppercase;

}



/* ---------- PROJECTS ---------- */


.projects {

    padding: 140px 45px;

}



.section-title {

    margin-bottom: 80px;

}


.section-title p {

    font-size: 12px;

    letter-spacing: .2em;

    text-transform: uppercase;

}



.project {

    display: grid;

    grid-template-columns: 70px 1fr auto;

    align-items: baseline;

    gap: 30px;

    padding: 35px 0;

    border-top: 1px solid black;

    transition: padding-left .4s ease;

}

.project:hover {

    padding-left: 25px;

}



.project span {

    font-size: 12px;

    letter-spacing: .15em;

}



.project h2 {

    font-size: clamp(1.5rem, 2.5vw, 2.8rem);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -.03em;

}



.project p {

    margin-top: 0;

    font-size: 11px;

    letter-spacing: .05em;

    font-weight: 400;

}



/* ---------- FOOTER ---------- */


footer {

    padding: 40px 45px;

    border-top: 1px solid black;

}


footer p {

    font-size: 11px;

    letter-spacing: .15em;

}



/* ---------- MOBILE ---------- */


@media(max-width:800px){


.navigation {

    padding: 25px;

}


nav {

    gap: 15px;

}


.hero-meta {

    left:25px;

    bottom:25px;

    display:block;

}


.hero-meta span {

    display:block;

    margin-bottom:10px;

}



.projects {

    padding:100px 25px;

}



.project {

    display:block;

}



.project span {

    display:block;

    margin-bottom:20px;

}


}
 

/* =====================================
   ARCHIVE PROJECT LAYOUT
===================================== */


.archive-project {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: 50px;

    padding: 120px 30px 80px;

}



/* ---------- IMAGES ---------- */


/* ---------- PROJECT IMAGES ---------- */


.project-images {

    display:block;

}


.project-images img {

    width:100%;

    height:auto;

    display:block;

}



.project-images img {

    width: 100%;

    display: block;

}



/* FIRST IMAGE */

.hero-image {

    width: 90% !important;

    max-height: calc(100vh - 180px);

    object-fit: contain;

}



/* OTHER LARGE IMAGES */

.large-image {

    width: 90% !important;

}



/* IMAGE ROW */

.image-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}


.image-row img {

    width: 100%;

}

.image-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}


/* ---------- SIDEBAR ---------- */


.project-sidebar {

    position: sticky;

    top: 100px;

    align-self: start;

}



.project-number {

    font-size: 12px;

    letter-spacing: .15em;

    margin-bottom: 25px;

}



.project-sidebar h1 {

    font-size: 2.2rem;

    line-height: 1;

    letter-spacing: -.04em;

    font-weight: 500;

}



.project-category {

    margin-top:20px;

    font-size:11px;

    line-height:1.4;

    letter-spacing:.05em;

}



.project-meta {

    margin-top: 70px;

}

.info-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.info-list .full-info {

    display: block;

}

.info-list > div:not(.info-block){

    display:flex;

    justify-content:space-between;

    gap:20px;

}


.info-list span {

    font-size:11px;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:500;

}


.info-list p {

    font-size:13px;

    text-align:right;

    margin:0;

}


.info-block {

    display:block;

}


.info-block span {

    display:block;

    margin-bottom:12px;

}


.info-block p {

    text-align:left;

    max-width:100%;

}



.project-meta section {

    margin-bottom: 45px;

}



.project-meta h3 {

    font-size: 10px;

    letter-spacing: .15em;

    font-weight: 500;

    margin-bottom: 15px;

}



.project-meta p {

    font-size: 13px;

    line-height: 1.6;

}



/* ---------- PROJECT NAV ---------- */


.project-navigation-bottom {

    padding: 50px 30px;

    border-top: 1px solid black;

    display: flex;

    justify-content: space-between;

}



.project-navigation-bottom a {

    font-size: 11px;

    letter-spacing: .18em;

}



/* ---------- PROJECT NAVIGATION COLOR ---------- */


.project-navigation,
.project-navigation a {

    color: black;

}



/* ---------- MOBILE ---------- */


@media(max-width:900px){


.archive-project {

    display: block;

    padding: 100px 25px 50px;

}



.project-sidebar {

    position: relative;

    top: auto;

    margin-top: 50px;

}


.project-navigation-bottom {

    padding: 40px 25px;

}


}

/* ---------- IMAGE SPACING ---------- */


.project-images {

    display:flex;

    flex-direction:column;

    gap:40px;

}


.project-images .image-grid {

    gap:20px;

}


.image-space {

    height:40px;

}

/* ---------- PUBLICATION LINKS ---------- */

.publication-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.publication-links a{

    position:relative;

    width:fit-content;

    font-size:13px;

    transition:padding-right .25s ease;

}

.publication-links a::after{

    content:"↗";

    position:absolute;

    margin-left:8px;

    opacity:0;

    transition:opacity .25s ease;

}

.publication-links a:hover::after{

    opacity:1;

}

/* ---------- PROJECT VIDEO ---------- */


.project-video {

    width:100%;

}


.project-video video {

    width:100%;

    height:auto;

    display:block;

}

/* ---------- ARCHIVE MEDIA GRID ---------- */


.project-images {

    width:100%;

}


.image-grid {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:15px;

}


.image-grid img {

    width:100%;

    height:auto;

    display:block;

}


.project-video {

    width:100%;

    margin-bottom:15px;

}


.project-video video {

    width:100%;

    height:auto;

    display:block;

}

/* =====================================
   ARCHIVE
===================================== */


.archive {

    padding:140px 45px;

}



/* =====================================
   ARCHIVE INDEX
===================================== */


.archive {

    padding: 120px 45px 80px;

}



.archive-year {

    font-size: 11px;

    letter-spacing: .18em;

    margin-top: 70px;

    margin-bottom: 20px;

}



.archive-row {

    display: grid;

    grid-template-columns: 120px 220px 1fr 1fr 1fr;

    gap: 35px;

    align-items: center;

    padding: 18px 0;

    border-top: 1px solid black;

}



/* ---------- ARCHIVE THUMBNAILS ---------- */


.archive-thumb {

    width:120px;

    height:120px;

    overflow:hidden;

}



.archive-thumb img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.archive-title {

    font-size:14px;

    line-height:1.3;

}



.archive-category,
.archive-role,
.archive-context {

    font-size:11px;

    line-height:1.5;

}



.archive-row:hover {

    opacity:.5;

    transition:.3s ease;

}




/* =====================================
   MOBILE
===================================== */


@media(max-width:900px){


/* ---------- NAVIGATION ---------- */

.navigation {

    padding:25px;

}


nav {

    gap:15px;

}


nav a {

    font-size:10px;

}


.logo {

    font-size:16px;

}



/* ---------- HERO ---------- */

.hero-meta {

    left:25px;

    bottom:25px;

    display:block;

}


.hero-meta span {

    display:block;

    margin-bottom:10px;

}



/* ---------- INTRO ---------- */

.intro {
    margin-bottom: 60px;
}


.intro p {

    font-size:15px;

    line-height:1.6;

}



/* ---------- PROJECTS ---------- */

.projects {

    padding:100px 25px;

}


.project {

    display:block;

    padding:25px 0;

}


.project span {

    display:block;

    margin-bottom:15px;

}


.project h2 {

    font-size:clamp(1.5rem, 8vw, 2.2rem);

}


.project p {

    margin-top:15px;

}



/* ---------- ARCHIVE ---------- */

.archive {

    padding:100px 25px;

}


.archive-row {

    display:block;

    padding:25px 0;

}


.archive-thumb {

    width:150px;

    height:150px;

    margin-bottom:20px;

}


.archive-title {

    margin-bottom:15px;

}


.archive-category,
.archive-role,
.archive-context {

    margin-bottom:8px;

}



/* ---------- FOOTER ---------- */

footer {

    padding:30px 25px;

}


}


/* =====================================
   CV
===================================== */


.cv {

    padding:120px 45px 80px;

}



.cv-section {

    border-top:1px solid black;

    padding:30px 0 40px;

}



.cv-section h2 {

    font-size:11px;

    letter-spacing:.18em;

    font-weight:500;

    margin-bottom:35px;

}



.cv-entry {

    display:flex;

    justify-content:flex-end;

    gap:40px;

    margin-bottom:18px;

    text-align:right;

}



.cv-entry span {

    width:120px;

    font-size:11px;

    letter-spacing:.12em;

}



.cv-entry p {

    width:420px;

    font-size:13px;

    line-height:1.45;

}

/* =====================================
   CONTACT
===================================== */


.contact-page {

    padding:120px 45px 100px;

    position:relative;

}



.contact-intro {

    max-width:650px;

}



.contact-intro h1 {

    font-size:clamp(3rem, 5vw, 5rem);

    line-height:.9;

    letter-spacing:-.05em;

    font-weight:500;

}



.contact-intro h2 {

    margin-top:25px;

    font-size:13px;

    letter-spacing:.15em;

    text-transform:uppercase;

    font-weight:400;

}



.contact-text {

    margin-top:60px;

    max-width:520px;

    font-size:15px;

    line-height:1.7;

}





.contact-image {

    position:absolute;

    right:45px;

    top:140px;

}



.contact-image img {

    width:280px;

    height:280px;

    object-fit:cover;

    border-radius:50%;

    display:block;

}





.contact-details {

    margin-top:120px;

    border-top:1px solid black;

    padding-top:30px;

}



.contact-details h3 {

    font-size:11px;

    letter-spacing:.18em;

    margin-bottom:25px;

}



.contact-details p {

    font-size:14px;

    margin-bottom:10px;

}



.contact-details a {

    color:inherit;

    text-decoration:none;

}



.contact-details a:hover {

    opacity:.5;

}

/* =====================================
   WORK HEADER
===================================== */

.work-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
}

.section-label {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.work-intro {
    max-width: 600px;
    width: 100%;
    justify-self: end;

    font-size: 15px;
    line-height: 1.5;
}

.project-watch {
    margin-bottom: 45px;
}

.project-watch a {
    display: inline-block;
    border-bottom: 1px solid black;
    padding-bottom: 2px;
    transition: opacity .3s ease;
}

.project-watch a:hover {
    opacity: .5;
}

/* =====================================
   FINAL MOBILE FIXES
===================================== */

@media (max-width: 900px) {

    /* NAVIGATION */

    .navigation {
        padding: 22px 20px;
    }

    .logo {
        font-size: 14px;
    }

    nav {
        gap: 12px;
    }

    nav a {
        font-size: 9px;
        letter-spacing: .12em;
    }


    /* LANDING PAGE */

    .projects {
        padding: 70px 25px;

        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .work-header {
        display: block;
        margin-bottom: 35px;
    }

    .work-intro {
        margin-top: 25px;
        font-size: 14px;
        line-height: 1.5;
    }

    .project {
        display: block;
        width: 100%;
        padding: 20px 0;
    }

    .project span {
        display: block;
        margin-bottom: 10px;
    }

    .project h2 {
        font-size: 1.8rem;
        line-height: 1;
    }

    .project p {
        margin-top: 10px;
    }


    /* PROJECT PAGES */

    .archive-project {
        display: block;
        padding: 100px 20px 50px;
    }

    .project-sidebar {
        position: relative;
        top: auto;
        margin-top: 45px;
    }

    .hero-image,
    .large-image {
        width: 100% !important;
        max-height: none;
    }

    .image-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

  .image-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;

}

.mobile-single-grid .image-grid {
    grid-template-columns: 1fr;
    gap: 15px;
}


    /* ---------- ARCHIVE ---------- */

.archive {
    padding: 90px 20px 60px;
}

.archive-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 18px;
    row-gap: 6px;

    align-items: start;

    padding: 18px 0;
}


/* IMAGE LEFT */

.archive-thumb {
    grid-column: 1;
    grid-row: 1 / span 4;

    width: 110px;
    height: 110px;

    margin: 0;
}


/* EVERYTHING ELSE RIGHT */

.archive-title,
.archive-category,
.archive-role,
.archive-context {
    grid-column: 2;
}


/* TITLE */

.archive-title {
    grid-row: 1;

    margin: 0 0 6px;

    font-size: 13px;
    line-height: 1.3;
}


/* CATEGORY */

.archive-category {
    grid-row: 2;

    margin: 0;

    font-size: 10px;
    line-height: 1.4;
}


/* ROLE */

.archive-role {
    grid-row: 3;

    margin: 0;

    font-size: 10px;
    line-height: 1.4;
}


/* CONTEXT */

.archive-context {
    grid-row: 4;

    margin: 0;

    font-size: 10px;
    line-height: 1.4;
}

    /* CV */

    .cv {
        padding: 100px 25px 60px;
    }

    .cv-entry {
        gap: 25px;
    }


    /* CONTACT */

    .contact-page {
        padding: 100px 25px 60px;
    }

    .contact-image {
        position: relative;
        right: auto;
        top: auto;
        margin-top: 50px;
    }

    .contact-image img {
        width: 210px;
        height: 210px;
    }


    /* FOOTER */

    footer {
        padding: 30px 25px;
    }

}