body {

    color: var(--text);
    background-color: var(--background-color);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    padding-bottom: 1em;
}

nav {
    padding: 1em;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, color 0.3s ease;
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: var(--background-color);
    transition: background-color 0.3s ease;
    z-index: 1;
}




/* --------------------------------------------------*/

body:has(.project-page-horizontal) {
    overflow-y: hidden;
}

body:has(.project-page-horizontal) header {
    position: fixed;
    bottom: 0;
    width: 100%;
}


.title-horizontal { 
    position: fixed;
    height: 30vh; /*load-bearing for absolutely-postioned children*/
    width: 70vw;
    bottom: 4rem;
    margin: 0 10vw;
}


.title-horizontal h1 {
    position: absolute;
    bottom: 7rem;
}

.title-horizontal p {
    position: absolute;
    bottom: 0;
}


body:has(.gallery-p8, .gallery-p9, .gallery-p10) .title-horizontal{
    margin: 0 5vw;
}
body:has(.gallery-p8, .gallery-p9, .gallery-p10) .title-horizontal h1 {
    bottom: 5rem;
}
body:has(.gallery-p8, .gallery-p9, .gallery-p10) .title-horizontal p {
    bottom: 3rem;
}



/* ---------------------------------------------------------- */
body:has(.project-page-vertical) {
    overflow: hidden;
    height: 100vh;

}

body:has(.project-page-vertical) .title-vertical {
    position: fixed;
    margin: 15rem 10rem;


}

.title-vertical {
    width: 25vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;

}

.title-vertical h1,
.title-vertical p {
    position: static;
}

body:has(.gallery-p11) .title-vertical {
gap: 0.1em;
}


/* ----------------------------------------------------------*/

body:has(.project-page-grid) {
    height: auto;
    overflow-x: hidden;
}

.title-grid {

    padding-left: 6rem;
    margin-bottom: 2rem;
}

.title-grid h1 {
    margin: 0;
    margin-bottom: 1rem;
}


a:link,
:visited {
    color: var(--text);
}


/* 3 tipos de clases y sus especificidades */


.gallery {
    position: relative;
    width: 100%;

}


.gallery img,
.project-page-grid img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Generic — covers every gallery that has the click-to-lightbox feature
   (main.js's .has-lightbox), regardless of which project/gallery-pN class
   it uses, instead of enumerating each one and needing an update here every
   time lightbox gets added to a new page. */
.has-lightbox img {
    cursor: pointer;
}


/* --------------Vertical display----------------*/


.project-page-vertical {
    display: inline-block;
    align-items: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    margin-left: 45vw;

}

.project-page-vertical img {
    display: inline-block;
    width: 40vw;
    height: auto;
    margin-bottom: 10vh;
}




/* --------------Horizontal display----------------*/


.project-page-horizontal {
    margin: 35px;
    display: flex;
    align-items: flex-start;
    /* overflow-y: hidden, not part of the 'overflow: scroll' shorthand this used to
       be. That set both axes scrollable, and since every image shares a fixed
       height there's nothing to scroll vertically anyway. Letting the Y axis
       scroll too is what let touch drag move the gallery around freely instead of
       locking to a clean horizontal swipe (contrast .project-page-vertical, which
       already correctly locks to overflow-y only). */
    overflow-x: scroll;
    overflow-y: hidden;
    bottom: 1rem;
}

.project-page-horizontal img {
    height: 64vh;
    margin: -14px;
    width: auto;
}

body:has(.gallery-p8, .gallery-p9, .gallery-p10) img {
    height: 35vh;
}

body:has(.gallery-p8, .gallery-p9, .gallery-p10) .project-page-horizontal {
    margin: 0;
    margin-top: 14rem;
}

body:has(.gallery-p8){
    overflow-x: hidden;
    
}

/* --------------Mosaic Grid----------------*/


.project-page-grid {
    display: flex;
    gap: 40px;
    width: 30vw;
    max-width: 700px;
    margin: 2% 5%;
    transform: scale(1);
    /*Scale reference. Avoids overlapping within columns*/
}

.grid-column-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 50%;
    align-content: start;
}

.gallery-p6 {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    transition: transform 0.1s ease-in-out;
    /*Dictates how to come back to the og scale. */
    cursor: pointer;
}

.project-page-grid img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.diptych {
    grid-column: span 2;
}




/* ------------------------------*/

/* It's too specific for the 6th main project. I may want to reuse it for other ones so it needs to be a more general feat + I discovered while testing with .gallery-p10, that although it hovers, it does it 
confined within the margins of the '.project-page-horizontal' limits, giving a choppy hover look. Interesting to keep in mind */
.gallery-p6:hover { 
    transform: scale(2.5);
    transition: transform 0.3s ease-in-out;
    border-radius: 5%;

}


.gallery-p8, .gallery-p9, .gallery-p10{
    cursor: pointer;
}

.gallery-p8:hover, .gallery-p9:hover, .gallery-p10:hover{

    opacity: 0.5 ;
}


.lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    background-color: var(--background-color);
    z-index: 100;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}


#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}



/* ------------------------------*/




@media(max-width: 767px) {

    :root {
        /* Real rendered height of the fixed nav bar: just its own padding (1em top +
           1em bottom). .home-btn never contributes to it. home-btn is pulled out of
           nav's flow via its own 'position:fixed' rule in every layout and
           .toggle-mode is 'display:none' on mobile, so nav's content box is empty. */
        --mobile-nav-space: 2em;
        /* Footprint of the independently-fixed .home-btn at the screen bottom: its
           own bottom offset (1.25rem) plus its height (30px, base.css). */
        --mobile-actionbar-space: calc(1.25rem + 30px);
    }

    html{
        overflow-x: hidden;
    }

    .project-page-grid {

        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        box-sizing: border-box;
        margin: 0 2.5rem;
        /* no top padding needed: .title-grid (normal flow, right above this) already
           clears the fixed nav and pushes this down naturally. bottom padding still
           clears the independently-fixed .home-btn. */
        padding: 0 1rem var(--mobile-actionbar-space);

    }

    .grid-column-group {

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 75%;
        padding: 0rem, 4rem;

    }


    body:has(.project-page-grid) .home-btn {
        position: fixed;
        bottom: 1.25rem;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
    }

    body:has(.project-page-grid) nav {
        position: fixed;
        top: 0;
        z-index: 100;
        justify-content: flex-end;
        background-color: var(--background-color);
    }

    body:has(.project-page-grid) .title-grid {
        /* moved out of <header> in the HTML so it's a normal sibling, not fixed and
           it scrolls away with the page while the fixed nav above it stays pinned.
           margin-top clears nav's real (fixed, out-of-flow) space; this replaces
           the base rule's -3rem margin-top, which was tuned for a different,
           non-mobile context. */
        margin-top: var(--mobile-nav-space);
        margin-bottom: 2rem;
        padding-left: 1rem;
    }



    body:has(.project-page-grid) .toggle-mode {
        display: none;
    }



    /*****************************/

    body:has(.project-page-vertical) {
        overflow: hidden;
        height: 100vh;
        display: flex;
        flex-direction: column;
        /* reserves space so the gallery's bottom edge doesn't sit behind the
           fixed .home-btn, instead of relying on 12vh+90vh happening to leave
           enough of a gap. */
        padding-bottom: var(--mobile-actionbar-space);
    }

    body:has(.project-page-vertical) .title-vertical {
        position: static;
        margin: 0;
    }


    .title-vertical {
        display: flex;
        flex-direction: column;
        width: 90vw;
        height: auto;
        flex-shrink: 0;
    }

    .title-vertical h1,
    .title-vertical p {
        position: static;
        font-size: medium;
    }

    .project-page-vertical {
        /* was a fixed 90vh guessed to leave room for the title above it.Now
           takes whatever's actually left in the flex column and scrolls within
           that, so it can't overflow past 100vh regardless of title height. */
        display: block;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        /* buffer inside the scrollable content itself so the last image scrolls
           fully into view with room to spare, instead of ending flush at the
           scroll boundary (felt "choppy" against iOS's own rubber-band bounce). */
        padding-bottom: 18vh;
    }

    .project-page-vertical img {
        display: inline-block;
        width: 70vw;
        height: auto;
        margin-bottom: 1vh;
    }


    body:has(.project-page-vertical) .home-btn {
        position: fixed;
        bottom: 1.25rem;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
    }

    body:has(.project-page-vertical) nav,
    body:has(.project-page-vertical) .title-vertical {
        position: relative;
        top: 0;
        z-index: 100;
        background-color: var(--background-color);
        justify-content: flex-end;
    }

    body:has(.project-page-vertical) .toggle-mode {
        display: none;
    }




    /* -------------------------------------------------- */

    body:has(.project-page-horizontal) {
        overflow: hidden;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 3vh;
    }

    body:has(.project-page-horizontal) header {
        /*  mobile: keep header in normal flow instead of the desktop rule's
           position:fixed. 'order' pushes it visually to
           the bottom while it stays a real flex item with real height, instead of
           an empty fixed shell floating over the actively-scrolling gallery (that
           was making .home-btn visible but untappable)  */
        position: static;
        order: 1;
    }

    body:has(.project-page-horizontal) .title-horizontal {
        /* margin lives here, not on the bare .title-horizontal rule below. This
           compound selector is what the desktop rule also uses, and it
           beats the plain class on specificity regardless of source order. */
        position: relative;
        margin: 0 10vw 0 6vw;
    }

    .title-horizontal {

        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        flex-shrink: 0;
    }


    .title-horizontal h1,
    .title-vertical p {
        font-size: medium;
    }

    .title-horizontal h1 {
        position: static;
    }

    .title-horizontal p {
        position: static;
    }


    .project-page-horizontal {
        /* was a fixed 64vh-image with a -14px-margin layout squeezed under an
           absolutely-positioned title. Now fills whatever the flex column has
           left after the title's real height. */
        display: flex;
        margin: 0;
        align-items: flex-start;
        overflow-x: scroll;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        flex: 1;
        min-height: 0;
    }

    body:has(.project-page-horizontal) .home-btn {
        position: fixed;
        bottom: 1.25rem;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
    }

    body:has(.project-page-horizontal) nav,
    body:has(.project-page-horizontal) .title-horizontal {
        position: relative;
        top: 0;
        z-index: 100;
        justify-content: flex-end;
    }

    body:has(.project-page-horizontal) .toggle-mode {
        display: none;
    }


    body:has(.gallery-p8, .gallery-p9) {
        overflow: visible;
        height: auto;
        display: block;
        gap: 0;
    }

    body:has(.gallery-p8, .gallery-p9) header {
        position: fixed;
        top: 0;
        bottom: auto;
        order: 0;
        width: 100%;
        background-color: var(--background-color);
    }

    body:has(.gallery-p8, .gallery-p9) .title-horizontal {
        position: static;
        height: auto;
        margin: calc(var(--mobile-nav-space) + 1rem) 1.5rem 1.5rem;
    }

    body:has(.gallery-p8, .gallery-p9) .project-page-horizontal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        flex: none;
        overflow: visible;
        margin: 0 1rem;
        padding-bottom: var(--mobile-actionbar-space);
    }

    body:has(.gallery-p8, .gallery-p9) .project-page-horizontal img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

  
    body:has(.gallery-p10) {
        overflow: hidden;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding-bottom: var(--mobile-actionbar-space);
        gap: 0;
    }

    body:has(.gallery-p10) header {
        position: relative;
        order: 0;
    }

    body:has(.gallery-p10) .title-horizontal {
        position: static;
        height: auto;
        flex-shrink: 0;
        margin: 0 6vw 1rem;
    }

    body:has(.gallery-p10) .project-page-horizontal {
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
        overscroll-behavior-y: contain;
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        padding-bottom: 10vh;
    }

    body:has(.gallery-p10) .project-page-horizontal img {
        display: block;
        width: 90vw;
        height: auto;
        margin: 0 auto 1vh;
    }

}






@supports (scrollbar-color: auto) {

    .project-page-horizontal,
    .project-page-vertical {
        scrollbar-width: none;
    }

}

@supports selector(::-webkit-scrollbar) {

    .project-page-horizontal::-webkit-scrollbar,
    .project-page-vertical::-webkit-scrollbar {
        display: none;
    }

}