/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   VARIABLES
========================== */

:root{

    --sidebar-width:260px;

    --space-xs:.5rem;
    --space-s:1rem;
    --space-m:2rem;
    --space-l:4rem;
    --space-xl:6rem;

    --background:#ffffff;
    --text:#151515;
    --muted:#6b6b6b;

}

/* ==========================
   BASE
========================== */

html{

    font-size:16px;

}

body{

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

    font-family:"Instrument Sans",sans-serif;
    font-size:1rem;
    font-weight:400;
    line-height:1.65;

    display:grid;
    grid-template-columns:var(--sidebar-width) 1fr;

    min-height:100vh;

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

    position:sticky;
    top:0;

    display:flex;
    flex-direction:column;

    height:100vh;

    padding:3rem;

}

.site-title{

    font-size:1rem;
    font-weight:450;

    margin-bottom:4.5rem;

}

.site-title a{

    color:inherit;
    text-decoration:none;

}

.sidebar h2{

    font-size:.95rem;
    font-weight:400;

    margin-bottom:1rem;

}

.sidebar ul{

    list-style:none;

}

.sidebar li{

    margin-bottom:.55rem;

}

.sidebar a{

    color:inherit;
    text-decoration:none;

    transition:opacity .2s ease;

}

.sidebar a:hover{

    opacity:.45;

}

nav{

    flex:1;

}

/* ==========================
   CONTENT
========================== */

.content{

    padding:5rem 10rem 5rem 5rem;

}

/* ==========================
   HOME
========================== */

.home{

    position:relative;

    min-height:75vh;

}

.home-image{

    position:absolute;

    top:8vh;
    right:6vw;

    width:300px;
    height:auto;

}

.home p{

    position:absolute;

    top:55vh;
    right:12vw;

    max-width:22ch;

    text-align:left;

}

/* ==========================
   PROJECT
========================== */

.project{

    max-width:760px;

}

.project-header{

    margin-bottom:4rem;

}

.project-header h1{

    font-size:1.45rem;
    font-weight:450;
    line-height:1.3;

    margin-bottom:.4rem;

}

.project-meta{

    color:var(--muted);

    font-size:.95rem;
    font-weight:400;

}

.project-block{

    max-width:66ch;

}

.project-block p{

    margin-bottom:1.6rem;

}

.contact-details a{

    color:inherit;
    text-decoration:none;

}

.contact-details a:hover{

    opacity:.45;

}

.project[data-content="contacto"]{

    width:fit-content;
    max-width:100%;
    margin-left:auto;
    text-align:right;

}

.contact-details p{

    margin-bottom:.2rem;
    line-height:1.35;

}

.contact-details p:last-child{

    margin-bottom:0;

}

/* ==========================
   MEDIA
========================== */

img,
video{

    display:block;
    max-width:100%;
    height:auto;

}

/* ==========================
   HIDDEN
========================== */

[hidden]{

    display:none !important;

}

/* ==========================
   WORKS
========================== */

.works{

    margin-top:5rem;

}

.works a{

    display:grid;
    grid-template-columns:3rem auto;

    align-items:baseline;

    padding:.25rem 0;

    color:inherit;
    text-decoration:none;

    transition:opacity .2s ease;

}

.works a:hover{

    opacity:.45;

}

.track-number{

    color:var(--muted);

}

.track-title{

    color:inherit;

}

/* ==========================
   VIDEOCLIP
========================== */

.project[data-content="videoclip"] .project-header{

    display:none;

}

.project[data-content="videoclip"] .project-block{

    max-width:none;
    margin-bottom:8rem;

}

.project[data-content="videoclip"] .video-player{

    width:min(68vw,600px);

    margin:2rem 0 5rem 8rem;

}

.project[data-content="videoclip"] .video-cover{

    display:block;

    width:100%;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

}

.project[data-content="videoclip"] .video-cover img{

    display:block;

    width:100%;

}

.project[data-content="videoclip"] iframe{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:none;

}

.project[data-content="videoclip"] .credits{

    width:50rem;

    margin-left:-1rem;

}

.project[data-content="videoclip"] .credits h2{

    font-size:1rem;

    font-weight:400;

    line-height:1.5;

    margin-bottom:1.5rem;

}

.project[data-content="videoclip"] .credits em{

    font-style:italic;

}

.project[data-content="videoclip"] .credits p{

    font-size:.92rem;

    line-height:1.8;

    color:rgb(0, 0, 0);

}

/* ==========================
   FOTO
========================== */

.archive-entry-photo{

    width:100%;
    margin-bottom:0;

}

.archive-entry-photo img{

    width:100%;
    height:auto;
    display:block;

}

.archive-compos{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:1rem;
    width:100%;
    max-width:100%;
    margin:0 0 2rem;
}

.archive-image-1{
    width:80%;
    max-width:100%;
}

.archive-image-1 img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
}

.archive-caption-2{
    width:100%;
    max-width:100%;
    margin-top:0.5rem;
}

.archive-caption-2 p{
    font-size:0.80rem;
    line-height:1.45;
    margin:0 0 2rem;
}




/* ==========================
   ARCHIVO
========================== */

.photo-archive{

    display:flex;
    flex-direction:column;

    gap:8rem;

    width:min(900px,90vw);

    margin:2rem auto 8rem;

}

.archive-year{

    font-size:1rem;

    letter-spacing:none;

    color:black;

}

.archive-entry{

    width:100%;

}

.archive-entry img{

    display:block;

    max-width:100%;

    height:auto;

}

.archive-entry.large img{

    width:100%;

}

.archive-entry.small img{

    width:55%;

}

.archive-entry.text{

    max-width:34rem;

    line-height:1.8;

}

.align-left{

    align-self:flex-start;

}

.align-center{

    align-self:center;

}

.align-right{

    align-self:flex-end;

}

/* ==========================
   SERIES
========================== */

.archive-entry.series{

    display:grid;

    grid-template-columns:150px 12fr;

    gap:2rem;

    align-items:start;

    width:125%;

}

.archive-entry.series2{

    display:grid;

    grid-template-columns:150px 12fr;

    gap:0rem;

    align-items:start;

    width:125%;

}

.archive-caption{

    position:sticky;

    top:2rem;

}

.archive-caption p{

    font-size:0.80rem;

    line-height:1.45;

}

.archive-caption-right{

    position:right;

}

.archive-caption-right p{

    font-size:0.80rem;

    line-height:1.45;

}

.archive-entry.star{

    display:grid;
    grid-template-columns:minmax(220px, 300px) minmax(220px, 1fr);
    align-items:end;
    gap:3rem;
    width:100%;
    margin-bottom:4rem;

}

.archive-entry.star .archive-image{

    width:100%;

}

.archive-entry.star .archive-image img{

    width:80%;

}

.archive-entry.star .archive-caption{

    position:static;
    padding-bottom:.25rem;

}

.archive-entry.star .archive-caption p{

    font-size:0.8rem;
    line-height:1.8;

}

.archive-entry.photobook{

    width:calc(100vw - var(--sidebar-width) - 15rem);
    max-width:none;
    margin-bottom:8rem;

}

.archive-entry.photobook img{

    width:100%;

}

.archive-book-caption{

    margin-top:1rem;

}

.archive-book-caption p{

    font-size:.8rem;
    line-height:1.45;

}

.archive-entry.expandido{

    width:100%;
    max-width:100%;
    margin:4rem 0 5rem;
    padding-block:1rem;
    display:flex;
    flex-direction:column;
    gap:1rem;

}

.archive-entry.expandido .archive-image{

    width:100%;
    display:flex;
    justify-content:flex-start;

}

.archive-entry.expandido .video-cover,
.archive-entry.expandido img,
.archive-entry.expandido iframe{

    width:100%;
    max-width:1000px;
    height:auto;
    display:block;
    border:none;

}

.archive-entry.expandido iframe{

    aspect-ratio:16/9;

}

.archive-expandido-caption{

    margin-top:1rem;
    width:100%;
    max-width:min(24rem, 100%);
    box-sizing:border-box;
    overflow-wrap:anywhere;
    word-break:break-word;

}

.archive-expandido-caption p{

    font-size:.8rem;
    line-height:1.45;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    margin:0;

}

@media (min-width: 1200px){

    .archive-entry.expandido{
        display:grid;
        grid-template-columns:minmax(600px, 1fr) minmax(600px, 2fr);
        align-items:start;
        gap:2.5rem;
        width:100%;
        max-width:none;
        margin:5rem 0 6rem;
    }

    .archive-entry.expandido .archive-image{
        display:flex;
        justify-content:flex-start;
        width:auto;
    }

    .archive-entry.expandido .video-cover,
    .archive-entry.expandido img,
    .archive-entry.expandido iframe{
        width: 100%;
        max-width: 900px;
        height:auto;
        display:block;
        border:none;
    }

    .archive-entry.expandido iframe{
        aspect-ratio:16/9;
    }

    .archive-expandido-caption{
        margin-top:0;
        padding-top:.35rem;
        max-width:24rem;
    }

}


.archive-images{

    display:grid;

    gap:2px;

}

.archive-images.three{

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

}

.archive-entry.four-up{

    width:125%;
    margin:6rem 0;

}

.archive-images.four{

    width:85%;
    margin:0 auto;
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;

}

.four-up-caption{

    width:calc(42.5% - 1px);
    margin:1rem 7.5% 0 auto;

}

.four-up-caption p{

    font-size:.8rem;
    line-height:1.45;

}

.archive-entry.conceptual{

    width:100%;
    max-width:100%;
    margin:6rem 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.archive-entry.conceptual .archive-image{

    width:120%;

}

.archive-entry.conceptual img{

    width:100%;
    max-width:1100px;
    height:auto;
    display:block;

}

.archive-conceptual-caption{

    width:min(24rem, 100%);
    margin-top:1rem;
    margin-left:0;
    align-self:flex-start;

}

.archive-conceptual-caption p{

    font-size:.8rem;
    line-height:1.45;
    margin:0;

}

.photo-row{

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
    align-items:start;
    margin-bottom:1rem;

}

.archive-entry-photo img{

    display:block;
    width:100%;
    height:auto;

}

.archive-images img{

    display:block;

    width:100%;

    height:auto;

}

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

@media (max-width: 900px){

    :root{

        --space-m:1.5rem;
        --space-l:3rem;

    }

    body{

        display:block;
        font-size:.95rem;
        overflow-x:hidden;

    }

    .sidebar{

        position:static;
        height:auto;
        padding:1.5rem 1.25rem 1.75rem;
        border-bottom:0.1px solid var(--text);

    }

    .site-title{

        margin-bottom:1.0rem;

    }

    .sidebar nav{

        display:flex;
        width:100%;
        flex-wrap:wrap;
        align-items:baseline;
        gap:1.0rem 1.5rem;

    }

    .sidebar nav ul{

        display:flex;
        flex-wrap:wrap;
        gap:.2rem 2.0rem;

    }

    .sidebar nav ul:first-of-type{

        order:1;

    }

    .sidebar li{

        margin:0;

    }

    .sidebar h2{

        order:2;
        flex-basis:100%;
        margin:.75rem 0 0;
        line-height:0;

    }

    .sidebar h2 br{

        display:none;

    }

    .sidebar nav ul:last-of-type{

        order:3;

    }

    .sidebar footer{

        margin-top:0.5rem;

    }

    .sidebar footer ul{

        display:flex;
        flex-wrap:wrap;
        gap:1.25rem;

    }

    .content{

        padding:1.5rem 1.25rem 3rem;
        overflow-x:hidden;

    }

    .home{

        display:flex;
        align-items:flex-start;
        min-height:0;

    }

    .home-image{

        position:static;
        width:min(86%, 340px);
        margin:0 .25rem 0 auto;

    }

    .home p{

        position:static;

    }

    .project{

        max-width:none;

    }

    .project-header{

        margin-bottom:2.5rem;

    }

    .works{

        margin-top:3rem;

    }

    .works a{

        grid-template-columns:2.5rem minmax(0, 1fr);
        padding:.4rem 0;

    }

    .project[data-content="videoclip"] .project-block{

        margin-bottom:3rem;

    }

    .project[data-content="videoclip"] .video-player{

        width:100%;
        margin:0 0 2rem;

    }

    .project[data-content="videoclip"] .credits{

        width:auto;
        margin-left:0;

    }

    .archive-entry.series,
    .archive-entry.series2{

        display:flex;
        flex-direction:column;
        width:100%;
        gap:0;

    }

    .archive-caption,
    .archive-caption-right{

        position:static;
        order:2;
        margin-top:1rem;
        margin-bottom:2.5rem;

    }

    .archive-images.three{

        order:1;
        grid-template-columns:1fr;
        gap:.5rem;

    }

    .archive-entry.four-up{

        width:100%;
        margin:4rem 0;

    }

    .archive-images.four{

        width:100%;
        margin:0;
        grid-template-columns:1fr;
        gap:.75rem;

    }

    .four-up-caption{

        width:100%;
        margin:1rem 0 0;

    }

    .archive-entry.star{

        display:flex;
        flex-direction:column;
        width:100%;
        max-width:100%;
        gap:0;
        margin-bottom:3rem;

    }

    .archive-entry.star .archive-image{

        order:1;
        width:100%;
        max-width:100%;
        margin:0;

    }

    .archive-entry.star .archive-caption{

        order:2;
        margin-top:1rem;
        margin-bottom:2.5rem;
        padding:0;

    }

    .archive-entry.photobook{

        width:100%;
        max-width:100%;
        margin-bottom:4rem;

    }

    .archive-entry.expandido{

        width:100%;
        max-width:100%;
        margin:3rem 0 4rem;
        padding-block:0;

    }

    .archive-entry.conceptual{

        width:100%;
        max-width:100%;

    }

    .archive-entry.conceptual .archive-image{

        width:100%;
        max-width:100%;

    }

    .archive-conceptual-caption,
    .four-up-caption,
    .archive-book-caption,
    .archive-expandido-caption,
    .archive-caption,
    .archive-caption-right{

        width:100%;
        max-width:100%;

    }

    .archive-entry.expandido .archive-image{

        justify-content:center;

    }

    .archive-entry.expandido img{

        width:100%;
        max-width:100%;

    }

    .photo-row{

        grid-template-columns:1fr;
        gap:.75rem;
        width:100%;
        max-width:100%;

    }

    .archive-compos{

        margin:0 0 1.5rem;

    }

    .archive-caption-2{

        margin-top:0.25rem;

    }

}