:root {
       --bg: #fafafa;
       --text: #333;
       --accent: #555;
       --accent_hover: #777;
       --font: "Inter", system-ui, sans-serif;
       --desktop-info-width: 20rem;
       --nav-height: 3.5rem;
       --section-height: calc(100vh - var(--nav-height));
       --images-width: calc(100vw - var(--desktop-info-width));
   }

   body {
       margin: 0;
       font-family: var(--font);
       color: var(--text);
       background: var(--bg);
       font-size: 14px;
       line-height: 1.6;
       scroll-behavior: smooth;
       position: relative;
   }

   nav#global_nav {
       position: fixed;
       top: 0;
       width: 100%;
       height: var(--nav-height);
       background: var(--bg);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       z-index: 200;

       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.25rem 1rem;
       box-sizing: border-box;

       a {
           text-decoration: none;
           color: var(--text);
           font-weight: 500;
           padding: 0.25rem;
           font-size: 1rem;

           border-bottom: 1px solid transparent;

           &:hover,
           &.active {
               color: var(--accent);
               border-bottom: 1px solid var(--accent);
           }
       }

       ul {
           list-style: none;
           margin: 0;
           padding: 0.5rem 1rem;
           display: flex;
           justify-content: center;
           gap: .5rem;

           li {
               margin: 0;
           }
       }

       .logo img {
           height: 1.5rem;
           vertical-align: middle;
           margin-right: .5rem;
       }
   }

   header,
   section {
       width: 100vw;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   header {
       /* position: sticky; */
       position: relative;
       top: var(--nav-height);
       height: var(--section-height);
       text-align: left;
       /* padding: 6rem 1rem 3rem; */
       align-content: start;
       padding: 1rem 1.5rem;
       box-sizing: border-box;

       overflow: hidden;

       background-size: cover;
       background-position: fixed center;
       /* filter: brightness(0.5); */
       background-color: #fff;
       background-attachment: fixed;

       h1,
       h2,
       div,
       p {
           position: relative;
           z-index: 1;
       }

       h1 {
           font-size: 1.75rem;
           margin: 0 0 .5rem 0;
       }

       h2 {
           font-size: 1.5rem;
           margin: 0;
           color: var(--accent)
               /* line-height: 1.1em; */
       }

       .background_overlay {
           position: absolute;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           z-index: 0;
           background: #ffffff;
           background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 100%);
           background-attachment: fixed;

           /* opacity: 0.3; */
       }

       video.bg_video {
           position: fixed;
           top: 0;
           left: 0;
           width: 100vw;
           height: 100vh;
           object-fit: cover;
           z-index: -1;
           filter: brightness(1.5);
       }



       p {
           max-width: 40rem;
           font-size: 1rem;

           &.lead {
               font-size: 1.125rem;

               /* margin: 0 auto 2rem; */
           }
       }

       .cta-group {
           display: flex;
           justify-content: start;
           gap: 1rem;
           flex-wrap: wrap;
       }

   }

   h1 {
       font-size: 2rem;
       margin-bottom: 1rem;
       margin: 0;
       /* text-align: left; */
       padding: 0;
       line-height: 1em;
   }

   a.button {
       background: var(--accent);
       color: white;
       text-decoration: none;
       padding: 0.5rem .75rem;
       border-radius: .125rem;
       font-weight: 500;
       transition: background 0.2s;
   }

   a.button:hover {
       background: var(--accent_hover);
   }

   section {
       /* padding: 4rem 1rem; */
       /* max-width: 800px; */
       margin: 0 auto;
       padding-top: var(--nav-height);
       padding-bottom: 5rem;
       position: relative;
       background-color: var(--bg);
       box-sizing: border-box;

       >h2 {
           background-color: var(--accent);
           color: white;
           padding: 1rem 1.5rem;
           margin: 0;
           font-weight: 400;
           font-size: 1.5rem;
       }

       /* &>* {
        max-width: 40rem;
        margin: 0 auto 1.5rem;
      } */

       .item {
           width: 100vw;
           min-height: var(--section-height);
           /* height: 100vh; */
           /* overflow: hidden; */
           position: relative;
           box-sizing: border-box;
           border-top: 4px solid var(--accent);


           .info {
               /* position: relative; */
               position: sticky;
               top: var(--nav-height);
               z-index: 2;

               display: flex;
               justify-content: flex-start;
               width: var(--desktop-info-width);
               flex-direction: column;
               background-color: var(--bg);
               box-sizing: border-box;
               padding-bottom: 2rem;

               .title h2,
               .medium,
               .date,
               .tags {
                   padding: .25rem 1.5rem;
                   box-sizing: border-box;
                   /* background: white; */
               }

               .title {
                   h2 {
                       text-align: left;
                   }
               }

               .medium,
               .date,
               .tags {
                   border-left: 4px solid #CCC;
                   margin-left: 1.5rem;
                   padding-left: .5rem;
               }

               .medium {
                   line-height: 1.1rem;
               }

               .date {
                   font-style: italic;
               }

               .tags {
                   /* padding: .5rem; */
                   /* background: white; */
                   font-size: 0.7rem;
                   color: #666;
                   /* text-transform: uppercase; */
                   font-style: italic;
               }

           }

           .description {
               /* position: sticky; */
               position: absolute;
               left: 0;
               /* top: var(--nav-height); */
               /* z-index: 1; */
               width: var(--desktop-info-width);
               /* min-height: var(--section-height); */
               padding: .5rem 1.5rem;
               box-sizing: border-box;
               overflow: hidden;
               height: max-content;
               /* font-size: 1.25rem; */
           }

           .images {
               /* width: 100vw; */
               width: var(--images-width);
               /* min-height: var(--section-height); */
               position: relative;
               top: 0;
               left: var(--desktop-info-width);
               display: flex;
               align-items: center;
               justify-content: center;
               flex-direction: column;

               .image {
                   width: 100%;
                   height: var(--section-height);
                   /* position: sticky; */
                   position: relative;
                   top: 0;
                   overflow: hidden;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   /* background-color: white; */

                   img {
                       width: calc(100% - 2rem);
                       height: calc(var(--section-height) - 2rem);
                       object-fit: contain;
                       object-position: center;
                       /* background: white; */
                   }
               }
           }
       }

       /* end .artworks section */

       &.contact {
           justify-content: start;
           /* padding: 2rem 1rem; */
           text-align: center;
           height: var(--section-height);

           .contact_links {
               display: flex;
               justify-content: center;
               gap: 1rem;
               flex-wrap: wrap;
               margin-top: 1rem;
           }
       }

   }

   /* end section */

   h2 {
       font-size: 1.75rem;
       margin-bottom: 1rem;
       /* text-align: center; */
       line-height: 1.1em;
   }

   .dual-column {
       display: grid;
       gap: 2rem;
   }

   @media (min-width: 700px) {
       .dual-column {
           grid-template-columns: 1fr 1fr;
       }
   }

   footer {
       text-align: center;
       padding: 2rem 1rem;
       font-size: 0.9rem;
       color: #666;
   }

   a.email-link {
       color: var(--accent);
       text-decoration: none;
   }

   a.email-link:hover {
       text-decoration: underline;
   }

   /* mobile styles */

   @media (max-width: 799px) {
       :root {
           --desktop-info-width: 100vw;
           --images-width: 100vw;
       }

       nav#global_nav {
           .text {
               display: none;
           }

           ul {
               padding: 0.5rem 0.5rem;
               gap: .25rem;
           }
       }

       header {
           min-height: 125vh;
           height: 100%;
           padding: 4rem 1rem 2rem;

           .background_overlay {
               min-height: 125vh;
               height: 100%;
               background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
           }
       }

       section .item {
           flex-direction: column;

           .info {
               position: relative;
               top: 0;
               width: 100vw;
               padding-bottom: 1rem;

               .title h2,
               .medium,
               .date,
               .tags {
                   padding: .25rem 1rem;
               }

               .title {
                   position: sticky;
                   top: var(--nav-height);
                   background-color: var(--bg);
               }

               .medium,
               .date,
               .tags {
                   border-left: .5rem solid #CCC;
                   margin-left: 1rem;
               }
           }

           .description {
               position: relative;
               width: 100vw;
               padding: .5rem 1rem;
               /* white-space: pre-wrap; */
           }

           .images {
               width: 100vw;
               left: 0;

               .image {
                   height: auto;
                   padding: 1rem 0;

                   img {
                       height: auto;
                   }
               }
           }
       }
   }