@charset "UTF-8";
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans[wdth,wght].ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
/* @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400..700&family=Space+Mono&display=swap'); */
/* @font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Variable.woff2') format('woff2'),
       url('../fonts/Switzer-Variable.woff') format('woff'),
       url('../fonts/Switzer-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-Italic';
  src: url('../fonts/Switzer-VariableItalic.woff2') format('woff2'),
       url('../fonts/Switzer-VariableItalic.woff') format('woff'),
       url('../fonts/Switzer-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
    font-family: 'Supply Sans';
    src: url('../fonts/PPSupplySans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/
:root {
  --unit-maxwidth-text: 55rem;
  --unit-space: 1.6em;
  --unit-font-large: 2.4rem;


            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --secondary-color: #64748b;
            --text-color: #1e293b;
            --text-light: #ffffff;
            --background: #ffffff;
            --dropdown-bg: #f8fafc;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --navbar-height: 70px;
            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            
            /* OVERLAY CUSTOMIZATION */
            --overlay-color: rgba(0, 0, 0, 0.5);
            --overlay-blur: 2px;
        }

* {
  box-sizing: border-box;
}

* {
  font-feature-settings: 
    "ss07" 1,  /* Alternate G */
    "ss08" 1,  /* Alternate J */
    "ss12" 1,  /* Alternate Currency */
    "kern" 1;  /* Kerning pairs */
}

body {
    margin: 0 calc(1*var(--unit-space));
    padding: 8rem 0 0 0;
    background-color: #fff;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: var(--unit-space);
    color: #333;
    font-variation-settings: "wght" 400,"wdth" 98;
    letter-spacing: -.03vw;
    transition: background-color 0.6s ease;
}
@media (min-width: 992px) {
    body { font-size: 1.4rem; }
}
@media (min-width: 768px) {
    body {
      padding: 0;
    }
}


body.index {
  background: #475e3d;
  color: #b9d5e6;
}

body.about {
    background: #312d2d;
    color: #e2dfdf;
}

body.error {
    background: red;
}

main {
    min-height: calc(100vh - 12*var(--unit-space));
}

/* @media (min-width: 992px) {
    body.about main {
        display: grid;
        grid-gap: var(--unit-line-height);
        grid-template-columns: repeat(2,1fr);
        margin-bottom: 10vh;
    }
    body.about main div {
        grid-column: 2 / span 1;
    }
} */

div.hr {
    grid-column: 1 / span 2!important;
    background-color: rgba(255,255,255, .5);
    width: 100%;
    height: 1px;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

body.about main div ul {
    column-count: 2;
}

@media (min-width: 992px) {
  body.about div.container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--unit-space);
  }
}

@media (min-width: 992px) {
    body.colophon main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: var(--unit-space);
    }
}

/* @media (min-width: 992px) {
  body.about main {
    display: grid;
    grid-gap: var(--unit-line-height);
    grid-template-columns: repeat(12,1fr);
  }
}
*/
/* main svg, main img {
    width: 100%;
} */

div.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
}

header {
    position: relative;
    margin-bottom: calc(5*var(--unit-space));
    padding-top: var(--unit-space);
}

header div.container,
footer div.container {
  display: flex;
  align-items: center;
  gap: 0 var(--unit-space);
}

/* header div.container, */
/* footer div.container {
    display: grid;
    gap: var(--unit-line-height);
    grid-template-columns: 1fr auto;
} */

footer {
    margin-bottom: 0;
    margin-left: calc(-1*var(--unit-space));
    margin-right: calc(-1*var(--unit-space));
    padding-top: calc(4*var(--unit-space));
    padding-bottom: var(--unit-space);
    padding-left: var(--unit-space);
    padding-right: var(--unit-space);
    /* background: #222;
    color: #d1d5db; */
}

/* body.index footer,
body.about footer {
    background: transparent;
    color: inherit;
} */

@media (min-width: 768px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1;
        margin-left: calc(-1*var(--unit-space));
        margin-right: calc(-1*var(--unit-space));
        padding-left: var(--unit-space);
        padding-right: var(--unit-space);
        /* backdrop-filter: blur(40px); */
    }
    /* header div.container, */
    /* footer div.container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    } */
}


div.nav {  
    display: flex;
    /* width: 100%;
    flex-wrap: wrap; */
    gap: 0 var(--unit-space);
    margin-left: auto;
}

div.nav svg {
    width: 32px;
    height: auto;
}

/* header div.container div.nav  {
  
} */

/* footer div.container div.top {
    margin-left: auto;
}

footer div.container div.copyright {
    grid-column: span 2;
}
 */
/* footer div.container div.nav {
  order: 3;
} */

/* @media (min-width: 768px) {
  footer div.container div:first-child {
    grid-column: inherit;
  }
  footer div.container div.nav {
    order: inherit;
  }
  footer div.container div.copyright {
      grid-column-start: 2;
      order: inherit;
    }
} */


/* @media (min-width: 768px) {
    div.copyright {
        grid-column-start: 2;
    }
} */

/* @media (min-width: 992px) {   
    footer {
        grid-template-columns: repeat(2,1fr);
    }
    div.copyright {
        grid-column-start: 2;
    }
} */

/* footer div.nav div {
    flex-basis: calc(50% - .5*var(--unit-line-height));
} */

/* div.nav div {
    flex-basis: 100%;
} */

/* @media (min-width: 992px) {
    div.nav div {
        flex-basis: calc(50% - .5*var(--unit-line-height));
    }
}
 */
a.logo {
    display: block;
    line-height: 1.2;
}

a.logo span {
    display: block;
}

@media (min-width: 768px) {
    a.logo { 
        display:inline-flex;
        cursor: pointer;
    }

    a.logo span {
        margin-left: .35rem;
        display: inherit;
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        transition:opacity 1s, max-width 1s
    }

    a.logo:hover span {
        max-width: 100%;
        opacity:1
    }
}

a {
    color: inherit;  
    text-decoration:none;
}

div.project-block-list-wrap {
  background: #222;
  margin-left: calc(-1*var(--unit-space));
  margin-right: calc(-1*var(--unit-space));
  padding-left: var(--unit-space);
  padding-right: var(--unit-space);
}

div.project-block-list {
    display: grid;
    grid-gap: 0 var(--unit-space);
}

@media (min-width: 768px) {
    body.index div.project-block-list {
        /* margin-left: 0; */
    }
}

@media (min-width: 992px) {
    /* body.index div.project-block-list { */
    div.project-block-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* margin-left: calc(340px + var(--unit-line-height)); */
    }
}

@media (min-width: 1400px) {
    /* body.index div.project-block-list { */
    div.project-block-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

div.project-block-list img {
  width: 100%;
}


@media (min-width: 992px) {
  div.project-block-list-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6rem;
  }

  /* div.project-block-list-flex div.project-block {
    flex-basis: calc(66.666% - 3rem);
  }

  div.project-block-list-flex div.project-block:nth-child(2),
  div.project-block-list-flex div.project-block:nth-child(3),
  div.project-block-list-flex div.project-block:nth-child(6),
  div.project-block-list-flex div.project-block:nth-child(7) {
    flex-basis: calc(33.333% - 3rem);
  } */

  div.project-block-list-flex div.project-block {
    /* flex-basis: calc(33.333% - 3rem); */
    flex-basis: calc(40% - 3rem);
  }
  div.project-block-list-flex div.project-block:nth-child(3n+1) {
    /* flex-basis: calc(66.666% - 3rem); */
    flex-basis: calc(60% - 3rem);
  }
}
  


/* body:not(.index) div.project-block-list {
    grid-template-columns: repeat(4, 1fr); */
    /* margin-left: calc(-1*var(--unit-line-height));
    margin-right: calc(-1*var(--unit-line-height));
    padding: calc(1*var(--unit-line-height)); */
    /* background: #313740; */
    /* color: #d1d5db;
}
 */

body:not(.index) div.project-block-list {
    color: #d1d5db;
}

.project-block a {
  display: block;
}

.project-block span {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: .8rem;
}

h1, h2, h3, h4, h5, h6 {
    font-size:inherit;
    margin:0;
    hyphens:none;
    font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-style: normal;

}

h1 {
  font-size: 1.8em;
}

body.index main {
    display: block;
}

h2 {
    font-size: calc(2rem + 2.5vw);
    padding-bottom: var(--unit-space);
    line-height: 1;
    width: 100%;
    font-variation-settings: "wght" 625,"wdth" 75;
    letter-spacing: -.09rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
  h2 {
      font-size: calc(2.5rem + 2.5vw);
      max-width: 80%;
      padding-bottom: 10vh;

  }
  body.index h2 {
        grid-column-start: 2;
        /* margin-left: calc(15.85rem + var(--unit-line-height)); */
  }
  body.about h2 {
    grid-column: span 2;
  }
}

h3 {
    font-size: calc(1.25rem + 2.1vw);
    padding-bottom: var(--unit-space);
    line-height: 1;
}

@media (min-width: 768px) {
  h3 {
    font-size: 2.8rem;
    line-height: 1;
  }
}


ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
  margin: 0 0 1rem;
  max-width: var(--unit-maxwidth-text);
}
/* 
div.project-overview ul li {
    display: inline-block;
    margin-right: .5em;
    font-family: 'Supply Sans', monospace;
    font-weight: 400;
}

div.project-overview ul li:last-child {
  margin-right: 0;
} */

@media (min-width: 768px) {
    div.project-overview {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 0 var(--unit-space);
    margin-bottom: 10vh;
  }
  div.project-overview h2 {
    grid-column: 5 / span 8;
  }
  div.project-overview div:first-of-type {
    grid-column: 5 / span 8;
    grid-row: 2;
  }
  div.project-overview div:last-of-type {
    grid-column: span 4;
    grid-row: 2;
  }
  /* div.project-overview ul li {
    display: block;
    margin: 0;
  }
  div.project-overview ul li span {
    display: none;
  } */
}

/* @media (min-width: 992px) {
   div.project-overview div:last-of-type {
    grid-column: 3 / span 4;
    grid-row: 2;
    margin: 0;
  }
} */

figcaption { display: none; }

div.project-card {
  background-position: 50% 50%;
  background-size: cover;
}

div.project-card img {
  display: block;
  width: 100%;
  margin-bottom: calc(1*var(--unit-space));
}

@media (min-width: 992px) and (min-height: 700px) {
  div.project-card {
    margin: 0 calc(-1*var(--unit-space));
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  div.project-card.cover img {
    display: block;
    width: calc(100vw + 2*var(--unit-space));
    height: 100vh;
    object-fit: cover;
  }
  div.project-card.partial {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.project-card.partial img {
    width: 70vw;
    height: 70vh;
    object-fit: contain;
    margin: 0;
  }
  div.project-card.partial div {
    width: 70vw;
    height: 70vh;
    overflow: hidden;
    display: grid;
    grid-gap: calc(2*var(--unit-space));
  }

  div.project-card.partial div img {
    width: 100%;
    object-fit: contain;
  }

  div.project-card.partial div.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.project-card.partial div.two-up.spread {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: 1fr;
  }

  div.project-card.partial div.two-up.spread img {
    height: calc(35vh - var(--unit-space));
  }
 
  figcaption {
    display: block;
    position: absolute;
    left: calc(1*var(--unit-space));
    bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
  }
}

@media (min-width: 1300px) {
  div.project-card.partial div.two-up.spread {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.project-card.partial div.two-up.spread img {
    height: 70vh;
  }
}

/*
@media (min-width: 768px) {
  div.profile,
  div.skill {
    display: grid;
    grid-gap: var(--unit-line-height);
    grid-template-columns: repeat(12,1fr);
    margin-bottom: 10vh;
  }
  div.profile h2 {
    grid-column: 7 / span 6;
  }
  div.profile div,
  div.skill div:first-of-type {
    grid-column: 7 / span 6;
    grid-row: 2;
  }
}


.profile-pict-wrap {
  grid-area: 2 / 1 / auto / span 2;
}

.profile-pict {
  background-color: rgba(0,0,0, .1);
}
*/

.ao-01 { background-color: #b5f75d; }
.ao-02 { background-color: #D99311; }
.ao-03 { background-color: #591829; }
.ao-04 { background-color: #A67C49; }
.pa-01 { background-color: #333333; }
.pa-02 { background-color: #D8DAE2; }

.mediabox {
    position: relative;
    padding-bottom: 66.6667%;
  }

.mediabox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mediabox, .mediabox img {
  border: 0;
}

/*
.lazyload,
.lazyloading {
    opacity: 0;
}
.loading,
.lazyload,
.lazyloaded,
.image {
    opacity: 1;
    transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
*/
.fade {
  animation-name: fade;
  animation-duration: 1000ms;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}









       /* ===== NAVBAR CONTAINER ===== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--navbar-height);
            padding: 0 calc(1*var(--unit-space));
            background: var(--background);
            box-shadow: var(--shadow);
            z-index: 1000;
        }

        @media (min-width: 768px) {
            .navbar {
                position: relative;
                margin-bottom: calc(5*var(--unit-space));
                padding: var(--unit-space) 0 0 0;
                height: initial;
                box-shadow: none;
            }
        }

        .navbar.scrolled {
            box-shadow: var(--shadow-lg);
        }

        @media (min-width: 768px) {
          .navbar.scrolled {
              box-shadow: none;
          }
        }

        .navbar-container {
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        @media (min-width: 768px) {
            .navbar-container {
              max-width: 1600px;
            }
        }

        /* ===== LOGO SECTION ===== */
        .navbar-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .navbar-logo:hover {
            transform: scale(1.05);
        }

        /* Logo icon using CSS shape */
        .logo-icon {
            width: 32px;
            height: 32px;
            background: var(--primary-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }

        /* ===== MAIN NAVIGATION MENU ===== */
        .navbar-menu {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 0 var(--unit-space);
        }

        .navbar-item {
            position: relative;
        }

        .navbar-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            border-radius: 8px;
            transition: var(--transition);
            white-space: nowrap;
        }

        .navbar-link:hover {
            background: var(--dropdown-bg);
            color: var(--primary-color);
            transform: translateY(-2px);
        }







        /* ===== ANIMATED HAMBURGER MENU ===== */
        /*
         * Custom hamburger menu that animates to X
         * Three horizontal bars that transform into an X shape when active
         */
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            z-index: 1001;
            width: 40px;
            height: 40px;
            position: relative;
        }

        /* Hamburger container */
        .hamburger {
            width: 28px;
            height: 20px;
            position: relative;
            margin: auto;
        }

        /* Hamburger bars - three horizontal lines */
        .hamburger span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--text-color);
            border-radius: 3px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: 0.25s ease-in-out;
        }

        /* Position each bar */
        .hamburger span:nth-child(1) {
            top: 4px;
        }

        .hamburger span:nth-child(2) {
            top: 13px;
        }

        /* Active state - Transform into X */
        .mobile-toggle.active .hamburger span:nth-child(1) {
            top: 8.5px;
            transform: rotate(135deg);
        }

        .mobile-toggle.active .hamburger span:nth-child(2) {
            top: 8.5px;
            transform: rotate(-135deg);
        }

        /* Hover effect */
        .mobile-toggle:hover .hamburger span {
            background: var(--primary-color);
        }

        /* ===== OVERLAY STYLES ===== */
        .overlay {
            position: fixed;
            top: var(--navbar-height);
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--overlay-color);
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
            backdrop-filter: blur(var(--overlay-blur));
            cursor: pointer;
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
        }



        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            /* .navbar-container {
                padding: 0 1rem;
            } */

            .mobile-toggle {
                display: block;
            }

            .navbar-menu {
                position: fixed;
                top: var(--navbar-height);
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: start;
                background: var(--background);
                box-shadow: var(--shadow-lg);
                max-height: 0;
                overflow: hidden;
                transition: var(--transition);
                gap: 2rem 0;
            }

            .navbar-menu.active {
                max-height: calc(100vh - var(--navbar-height));
                overflow-y: auto;
            }

             .navbar-menu li {
               padding: 0 var(--unit-space);
            }

            .navbar-menu li:first-of-type {
               padding-top: var(--unit-space);
            }

            .navbar-menu li:last-of-type {
               padding-bottom: var(--unit-space);
            }
          
            .navbar-menu a {
                font-size: 1.8rem;
                text-transform: uppercase;
            }

            .navbar-item {
                width: 100%;
            }

            .navbar-link {
                width: 100%;
                justify-content: space-between;
                border-radius: 0;
            }

        }

        @media (max-width: 576px) {
            .navbar-logo span {
                display: none;
            }
            
            /* .navbar-container {
                padding: 0 0.75rem;
            } */
        }