/* Main Configuration */

@layer configuration {

*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;
    cursor          : none !important;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}

a {
    word-break : break-word;
}
}

@layer configuration {

@font-face {
    font-family  : "Suisse";
    src          : url('fonts/SuisseIntl-Semibold.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 600;
    font-display : swap;
}

@font-face {
    font-family  : "Suisse";
    src          : url('fonts/SuisseIntl-Bold.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 700;
    font-display : swap;
}

:root {
    
    -webkit-text-size-adjust: 100%;
    
    /* Colors */
    --background   : #FEFDFC;
    --text         : #000000;
    --accent       : #F2FF90;
    --accent-about : #F2FF90;

    /* Font Settings */
    --font-family : Suisse, sans-serif;
    --font-size   : 16px;
    --font-height : 20px;
    --font-weight : 600;

    --font      : 600 16px/20px var(--font-family);
    --font-bold : 700 16px/20px var(--font-family);

    --font-small      : 600 10px/12px var(--font-family);
    --font-small-bold : 700 10px/12px var(--font-family);

    /* Grid Variables */
    --grid-template-columns : repeat(8,1fr);
    --gap                   : 0.25rem;

    /* Layout Variables */
    --padding-side : 1rem;

    @media (width > 700px) {
        --padding-side          : 1.25rem;
        --grid-template-columns : repeat(12,1fr);
    }

    /* Set the defaults */
    font-size   : var(--font-size);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);
    font-size   : var(--font-height);

    /* Allows keyword properties to be animated */
    interpolate-size : allow-keywords;
}
}/* Global Settings *//* Content Goes Here */

body {
    padding-top : 2rem;
}/* Global Cursor Settings */

.cursor {
    position       : fixed;
    top            : 50%;
    left           : 50%;
    z-index        : 999999;
    display        : none;
    mix-blend-mode : difference;
    pointer-events : none;
}

.cursor svg {
    width   : 22px;
    height  : 22px;
    fill    : white;
    display : none;
}

.cursor-up svg.cursor-up { display : block; }

.cursor-left svg.cursor-left { display : block; }

.cursor-right svg.cursor-right { display : block; }

.cursor-link svg.cursor-link { display : block; }

@media (hover:hover) {
    .cursor { display : grid; }

    /* We need to disable a bunch of events */
    :is(a,button) * {
        pointer-events: none;
    }

}/* UI Elements *//* Site's Header and Navigation */

.header {
    position              : fixed;
    inset                 : 0 0 auto 0;
    background            : var(--accent);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    padding               : 0.5rem var(--padding-side);
    grid-template-areas   : "title title title title title button button button";
    z-index               : 10000;
    @media (width > 700px) {
        grid-template-areas   : "title title title title title title title title . button button button";
    }
    @media (width > 800px) {
        grid-template-areas   : "title title title title menu menu menu menu . . . button";
    }
}

.header-home-link {
    grid-area    : title;
    justify-self : start;
}

.header-title {
    text-transform : uppercase;
    font           : var(--font-bold);
    display        : block;
}

.header-home-link:hover {
    opacity : .5;
}/* Website Main Navigation */

.header-menu {
    grid-area : menu;
    display : flex;
    justify-content: space-around;
}

.header-menu:has(a:hover) a:not(:hover) {
    opacity : .5;
}

.header-menu-item {
    font : var(--font-bold);
}/* Header, multipurpose button */

.header-buttons {
    grid-area    : button;
    justify-self : end;
    display      : flex;
}

.header-button,
.header-back {
    cursor       : pointer;
    aspect-ratio : 1;
    border       : none;
    width        : 1rem;
    height       : 1rem;
    display      : inline-flex;
}

.header-button svg,
.header-back svg {
    margin : auto;
    width: 100%;
}

.header-button:hover {
    opacity: .5;
}

.header-back { display : none; }

@media (width <= 800px) {
    :where(.contact-is-open,.about-is-open) .header-back { display : inline-flex; }
}/* The Projects page header content */

.header-project-title,
.header-project-size,
.header-project-year {
    font     : var(--font-bold);
    grid-row : 1;
}

.header-project-title {
    grid-column : 4 / 7;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.header-project-size {
    grid-column : 7 / 9;
}

.header-project-year {
    grid-column : 10 / 12;
}

@media (width <= 800px) {
    #project .header-home-link { display : none; }
    .header-project-title { grid-column : 1 / 7; }
    .header-project-size { grid-column : 7 / 9; }
    .header-project-year { grid-column : 10 / 12; grid-row : 1; }
}

@media (width <= 700px) {
    .header-project-title { grid-column : 1 / 5; grid-row : 1; }
    .header-project-size { grid-column : 4 / 7; grid-row : 1; justify-self : center; }
    .header-project-year { grid-column : 7 / 9; justify-self : center; }
}/* Site's Footer */

.footer {
    padding               : 0 var(--padding-side) var(--padding-side);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : "contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts contacts"
                            "links links links links links links links links links links links links";
    margin-top            : 10rem;
    font                  : var(--font-small);
    text-transform        : uppercase;

    @media (width > 700px) {
        margin-top : 25rem;
    }

    @media (width > 850px) {
        grid-template-areas : "contacts contacts contacts contacts contacts contacts contacts . . links links links";
    }

    @media (width > 1200px) {
        grid-template-areas : "contacts contacts contacts contacts contacts . . . . . links links";
    }
}

.footer-contacts {
    grid-area             : contacts;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--gap);

    @media (width > 850px) {
        grid-template-columns : repeat(3, auto);
        justify-content       : space-between;
    }
}

.footer-links {
    grid-area: links;
    display: flex;
    justify-content: space-between;
}

.footer a:hover {
    opacity : .5;
}/* Filters Section */

.filters {
    padding         : 1rem 0;
    position        : sticky;
    top             : 2rem;
    background      : var(--background);
    overflow        : auto;
    z-index         : 8000;
    scrollbar-width : none;
}/* The Outer container */

.filters-controls {
    border      : none;
    display     : flex;
    gap         : 1rem;
    align-items : baseline;
    padding     : 0 var(--padding-side);
}

.filters-title {
    font           : var(--font-small);
    text-transform : uppercase;
}

legend.filters-title {
    display : none;
}

.filters-input {
    position : absolute;
    opacity  : 0;
    width : 1px;
    height : 1px;
}

.filters-label {
    font      : var(--font-bold);
    opacity   : .5;
    cursor    : pointer;
    text-wrap : nowrap;
    &:hover {
        opacity: 1;
    }
}

.filters-input:checked + .filters-label {
    opacity: 1;
}/* About Section */

#about {
    padding               : 3rem var(--padding-side) var(--padding-side);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    position              : fixed;
    inset                 : 0;
    background            : var(--accent-about);
    z-index               : 9999;
    grid-template-areas   : "content content content content content content content content";
    align-items           : start;
    overflow              : auto;
    display               : none;
    pointer-events        : none;
    width                 : 100vw;
}

@media (width > 700px) {
    #about {
        grid-template-areas : "content content content content content content content content contacts contacts contacts contacts";
    }
}

.about-content {
    grid-area             : content;
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 5rem var(--gap);
    padding-bottom        : 33vh;

    @media (width > 1100px) {
        grid-template-columns : 1fr 1fr;
    }
}

.about-contacts {
    grid-area : contacts;
    position  : sticky;
    top       : 0;
}

.about-section-title,
.about-list-item-year {
    font           : var(--font-small);
    text-transform : uppercase;
}

.about-section-text,
.about-list-item-title {
    font : var(--font-bold);
}

.about-list-item {
    display        : flex;
    flex-direction : column;
    margin-top     : 0.5rem;
    position       : relative;
}

.about-list-item-image {
    position       : absolute;
    display        : none;
    pointer-events : none;
    max-width      : 10rem;
    top            : 100%;
    z-index        : 1;
}

.about-list-item:hover .about-list-item-image {
    display : block;
}

.about-section-image {
    width         : 50%;
    margin-bottom : 1em;
}

@media (width > 700px) {
    .about-section {
        position : relative;
    }
    .about-section-image {
        position       : absolute;
        top            : 0.75rem;
        display        : none;
        pointer-events : none;
        z-index        : 100;
        max-width      : 15rem;
    }

    .about-section-title:hover + img {
        display: block;
    }
}/* About Open State */

.about-is-open {
    overflow: hidden;
}

.about-is-open #about {
    display        : grid;
    pointer-events : all;
}

.about-is-open .header {
    background : transparent;
}

.about-is-open .header-menu {
    opacity : 0;
    pointer-events: none;
}

.about-is-open .header-button {
    transform : rotate(45deg);
}/* The Language Menu */

.about-languages {
    grid-row     : 1;
    grid-column  : 9 / -1;
    justify-self : end;
    font         : var(--font-small);
    z-index      : 1;
    color        : rgba(0,0,0,.5);
    position     : sticky;
    top          : 0;
}

.about-language.active {
    color : black;
}

.about-footer {
    grid-column     : 9 / -1;
    grid-row        : 1;
    display         : flex;
    justify-content : space-between;
    font            : var(--font-small);
    text-transform  : uppercase;
    position        : sticky;
    top             : calc(100% - 0.5rem);
}

@media (width <= 700px) {
    .about-contacts { display: none; }
    .about-footer { display: none; }
    .about-languages { display: none; }
}

@media (width > 700px) {    
    .about-section,.about-awards,.about-publications {
        padding-right : 1rem;
    }
    .about-awards {
        grid-column: 1/2;
    }
}/* Contacts Section */

#contacts {
    padding               : 3rem var(--padding-side) var(--padding-side);
    position              : fixed;
    inset                 : 0;
    background            : var(--accent-about);
    z-index               : 9999;
    align-items           : start;
    overflow              : auto;
    display               : none;
    pointer-events        : none;
    backdrop-filter       : blur(10px);
}

@media (width <= 800px) {    
    .contact-is-open #contacts {
        display: block;
    }
}/* We need to hide this section on desk */

@media (width > 800px) { #contacts { display : none }}/* Mobile Navigation *//* First hing we need to do is to hide the desk menu and make the mobile one visible */

@media (width <= 800px) {
    .header-menu { display : none }
}

.mobile-navigation-container {
    position           : fixed;
    inset              : 0;
    z-index            : 9999;
    background         : var(--accent-about);
    padding            : 2rem var(--padding-side) 0.5rem;
    display            : grid;
    grid-template-rows : 1fr 1fr 1fr auto;
    grid-template-areas: ". ." "nav languages" "contacts contacts" "footer footer";
    pointer-events     : none;
    opacity            : 0;
    transition-property: opacity;
    align-items        : baseline;
}

.mobile-nav { grid-area : nav; }

.mobile-nav-languages { grid-area : languages; }

.mobile-nav-contacts { grid-area : contacts; }

.mobile-nav-footer { grid-area : footer; }/* Mobile Main Menu */

.mobile-nav {
    display        : flex;
    flex-direction : column;
    gap            : 0.25rem;
}/* Single Link Item */

.mobile-nav-item {
    font : var(--font-bold);
    appearance: none;
    border : none;
    text-align: left;
    cursor : pointer;
}/* Lang Menu */

.mobile-nav-languages {
    font : var(--font-small);
    text-align : right;
}/* Contacts Section */

.mobile-nav-contacts {
    align-self: end;
    font : var(--font-small);
    text-transform: uppercase;
}

.mobile-nav-contacts p {
    margin-bottom : 0.5rem;
}

.mobile-nav-footer {
    font : var(--font-small);
    display : flex;
    justify-content: space-between;
    text-transform: uppercase;
}

@media (width > 800px) {
    .mobile-navigation-container {
        display: none;
    }
}/* Active State */

@media (width < 800px) {
    .mobile-navigation-is-open .mobile-navigation-container {
        opacity : 1;
        pointer-events: all;
    }

    .mobile-navigation-is-open .header {
        background: transparent;
    }

    .mobile-navigation-is-open .header-button {
        transform : rotate(-45deg)
    }    
}/* Shared block styles */

.block {
    padding-right : var(--padding-side);
    padding-left  : var(--padding-side);
    margin-bottom : var(--gap);
}

.block img {
    mix-blend-mode: multiply;
}

@media (width <= 700px) {
    .block {
        padding-right : 0;
        padding-left  : 0;
    }

    .block-textimage-text {
        padding-right : var(--padding-side);
        padding-left  : var(--padding-side);
        margin-bottom : 10rem;
    }

}/* Single image block */

@media (width > 700px) {
    .block-image-is-fullscreen {
        padding : calc(var(--padding-side) - var(--gap)) 0;
    }
}/* Text and Image block */

.block-textimage {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    align-content         : center;
    align-items           : center;
}

.block-layout-1-2 {
    grid-template-areas : "small small small small big big big big big big big big";
}

.block-layout-2-1 {
    grid-template-areas : "big big big big big big big big small small small small";
}

@media (width <= 700px) {
    .block-layout-1-2 {
        grid-template-areas : "small small small small small small small small" "big big big big big big big big" ;
    }

    .block-layout-2-1 {
        grid-template-areas : "small small small small small small small small" "big big big big big big big big" ;
    }   
}

.block-textimage-text {
    font : var(--font-bold);
}

.block-textimage-images {
    grid-column           : 1 / -1;
    
}

.block-textimage-image { grid-column : span 1; }

.block-textimage-image:only-child { grid-column : span 2; }/* The Small Image + Text Block */

.block-smallimagetext,
.block-bigimagetext,
.block-smallimagebigimage {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    align-content         : center;
    align-items           : center;
}

.block-smallimagetext .block-textimage-text {
    grid-area : big;
}

.block-smallimagetext.block-layout-2-1 .block-textimage-text-content {
    grid-column : 4 / -1
}

.block-smallimagetext.block-layout-1-2 .block-textimage-text-content {
    grid-column : 3 / -1
}

.block-textimage-small-image { grid-area : small; }

.block-textimage-big-image {
    grid-area             : big;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--gap);
    align-items           : stretch;
}

.block-textimage-big-image img {
    object-fit: cover;
    object-position: center;
}/* Big Image + Text */

.block-bigimagetext .block-textimage-text {
    grid-area : small;
}

.block-bigimagetext.block-layout-2-1 .block-textimage-text-content {
    grid-column : 2 / span 3
}

.block-bigimagetext.block-layout-1-2 .block-textimage-text-content {
    grid-column : span 3
}

.block-smallimagebigimage {
    align-items: stretch;
}

.block-smallimagebigimage .block-textimage-small-image .block-textimage-image {
    height : 100%;
    object-fit: cover;
}/* The text Container */

.block-textimage-text {
    display               : grid;
    grid-template-columns : subgrid;
}/* Mobile Adjustments */

@media (width <= 1200px) {
    .block-bigimagetext.block-layout-2-1 .block-textimage-text-content {
        grid-column : 1 / span 4;
        padding-left : 2rem;
    }
    .block-bigimagetext.block-layout-1-2 .block-textimage-text-content {
        grid-column : span 4;
        padding-left : 2rem;
    }
}

@media (width <= 800px) {
    .block-bigimagetext.block-layout-2-1 .block-textimage-text-content,
    .block-bigimagetext.block-layout-1-2 .block-textimage-text-content {
        grid-column  : 1 / -1;
        padding-left : 0;
        padding-top  : 0rem;
    }
    .block-bigimagetext.block-layout-2-1,.block-bigimagetext.block-layout-1-2 {
        grid-template-areas: "big big big big big big big big big big big big" "small small small small small small small small small small small small"
    }
}

@media (width <= 700px) {

    .block-smallimagetext.block-layout-1-2 .block-textimage-text-content,
    .block-smallimagetext.block-layout-2-1 .block-textimage-text-content {
        grid-column: 1 / -1;
    }

    .block-smallimagetext.block-layout-1-2 .block-textimage-text,
    .block-bigimagetext.block-layout-2-1 .block-textimage-text-content,
    .block-bigimagetext.block-layout-1-2 .block-textimage-text-content,
    .block-smallimagetext.block-layout-2-1 .block-textimage-text {
        padding-top : 10rem;
    }

}/* Text Only Block */

.block-text {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    align-content         : center;
    align-items           : center;
}

.block-text:not(:first-child) { margin-top : 10rem; }

.block-text:not(:last-child) { margin-bottom : 10rem; }

.block-text.block-layout-1-2 {
    grid-template-areas : ". . . . . . text text text text text text";
}

.block-text.block-layout-2-1 {
    grid-template-areas : "text text text text text text . . . . . .";
}

.block-text.block-layout-1-1 {
    grid-template-areas : ". . . text text text text text text . . .";
}

@media (width <= 700px) {

    .block-text {
        padding-right: var(--padding-side);
        padding-left: var(--padding-side);
    }

    .block-text.block-layout-1-2,
    .block-text.block-layout-2-1,
    .block-text.block-layout-1-1 {
        grid-template-areas : "text text text text text text text text";
    }
}

.block-text-text {
    grid-area      : text;
    font           : var(--font-bold);
}/* Error Page */

#error,.error {
    width : 100%;
    height : 100%;
    background: var(--accent);
}

.error {
    display : grid;
    grid-template-rows: 1fr auto;
}

.error-content {
    align-self            : center;
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    padding               : 0.5rem var(--padding-side);
    grid-template-areas   : "title title message message message message message . link link";
    align-items           : baseline;
}

@media (width > 700px) {
    .error-content {
        grid-template-areas : "title title message message message message . . . . link link";
    }
}

.error-title {
    grid-area : title;
    font : var(--font-bold);
}

.error-message {
    grid-area : message;
    font : var(--font-bold);
}

.error-link {
    grid-area : link;
    font : var(--font-small);
    text-transform: uppercase;
    display: block;
    justify-self: start;
}

#error .footer {
    margin-top : 0;
}/* Reusable Components *//* Nothing to see here */

.editor p:not(:last-child) {
    margin-bottom : 1em;
}

.editor p {
    font      : var(--font-bold);
    max-width : 60ch;
}

.editor strong {
    font           : var(--font-small);
    text-transform : uppercase;
}/* Default Image Styles */

img {
    display : block;
    width   : 100%;
    height  : auto;
}