/* Reset Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

:root {
    --primary: #FFFFFC;
    --secondary: #151515;
    --pop: #b6551d;
    --font: "Geist",Arial,Helvetica, sans-serif; 
}

body {
    color:var(--secondary);
    background: var(--primary);
    line-height: 1.2;
    font-size:18px;
    font-weight: 400;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body::before,
nav div::before{
      content: "";
    width: 100%;
    height: 100vh;
    background: url(https://d11wtnpetvvan1.cloudfront.net/2026/img/noise-overlay-min.png);
    background-attachment: fixed;
    display: block;
    z-index: -1;
    position: fixed;
    opacity: .075;
}

.primary{color:var(--primary);}
.secondary{color:var(--secondary);}
.tertiary{color:var(--gray);}

figure, ul, li{
  margin:0;
  padding:0;
}

  
  img, picture, video, canvas, svg {
    display: block;
  }
  input, button, textarea, select {
    font: inherit;
  }
  a, p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-weight:400;
  }
  a, a:hover, a:focus, a:checked, a:active{
    color:var(--tertiary);
  }

  h1, h2, h3, h4, h5, h6{
    font-weight:700;
    line-height:1;
  }
  h1{
    font-size: 20vw;
    letter-spacing: -.075em;
    cursor:default;
  }
p{
  font-size:72px;
  line-height: 1.1;
}
p.small-text{
      font-size: 16px;
    line-height: 1.4;
}

body.index main{
  position:relative;
  z-index:0;
  animation: start .35s cubic-bezier(0.645, 0.045, 0.355, 1.000) 1.5s forwards;
   opacity: 0;
}
@keyframes start {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Tagline
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header > span{
  margin: 35px  0 0 50px;
   position:fixed;
  top:0;
  left:0;
  z-index: 1;
}
header > span a{
  font-weight: 500;
  text-decoration:none;
}
header > span small{
font-size:1.25em;
color:var(--pop);
}
header > img{
  margin: 40px  0 0 50px;
   position:fixed;
  top:0;
  left:0;
  z-index: 1;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* triggers hardware acceleration */
  display:none;
}

body.index header > span{
  opacity:0;
  animation: revealTag 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}
@keyframes revealTag {
  0% {
    opacity:0;
    transform: translate(-100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

/* Nav
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{
  height: 220px;
  position:fixed;
  top:0;
  right:0;
  z-index: 1;
  font-size:11px;
    line-height: 3;  
    font-weight: 500;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-radius: 0 30px 0 0;
  margin: 50px 50px 0 0;
  padding: 0 29px 0 0;
  border-top:1px solid var(--secondary);
  border-right: 1px solid var(--secondary);
  
  mix-blend-mode: darken;
  
}
body.index nav{
  opacity:0;
  animation: revealMenu 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}
@keyframes revealMenu {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

nav::before,
nav::after{
  content:"";
  background:var(--primary);
  width: 30%;
    
    position: absolute;
    bottom: -2px;
    right: -2px;
  
}
body.index nav::before,
body.index nav::after{
  height: 105%;
animation: growNav 1s cubic-bezier(0.645, 0.045, 0.355, 1.000) 3.25s forwards;
}
@keyframes growNav {
  0% {
    height: 105%;
  }
  100% {
    height: 0;
  }
}

nav::after{
      width: 25%;
  background: url(https://d11wtnpetvvan1.cloudfront.net/2026/img/noise-overlay-min.png) center;
  background-attachment:fixed;
  opacity: 0;
  animation: growNavTwo 1s cubic-bezier(0.645, 0.045, 0.355, 1.000) 3.25s forwards;
}
@keyframes growNavTwo {
  0% {
    height: 105%;
  }
  100% {
    height: 0;
  }
}

nav div{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
    margin-top: -17px;
    background: var(--primary);
        position: relative;
            height: 240px;
}
nav div::before{
    height: 100%;
    z-index: 0;
    position: absolute;
    background-attachment:fixed;

   background: none; 
}

nav div span{
    padding:0 16px 0 10px;
    position:relative;
    cursor:pointer;
}

body.index nav div span:nth-of-type(2){
opacity:0;
    animation: revealItemsTwo 1.15s cubic-bezier(0.77, 0, 0.175, 1) 4s forwards;
}
@keyframes revealItemsTwo {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

body.index nav div span:nth-of-type(3){
  opacity:0;
  animation: revealItemsThree 1.15s cubic-bezier(0.77, 0, 0.175, 1) 4.05s forwards;
}
@keyframes revealItemsThree {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

body.index nav div span:nth-of-type(4){
  opacity:0;
  animation: revealItemsFour 1.15s cubic-bezier(0.77, 0, 0.175, 1) 4.1s forwards;
}
@keyframes revealItemsFour {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

body.index nav div span:nth-of-type(5){
  opacity:0;
  animation: revealItemsFive 1.15s cubic-bezier(0.77, 0, 0.175, 1) 4.15s forwards;
}
@keyframes revealItemsFive {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

nav div span::before{
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: -30px;
    height: 1px;
    width: 30px;
    /* transform: translateY(-50%); */
    background: var(--secondary);  
    transition: all .15s ease-in-out;
}
nav div span:nth-of-type(1)::before{
  right: 0;
  width: 0;
  animation:none;
}
nav div span:hover::before{
width: 130px;
z-index:1;
}
nav div span:nth-of-type(1):hover::before{
width: 100px;
}

nav div span::after{
content: "";
    position: absolute;
    top:17px;
        right: 0;
    height: 1px;
    width: 0;
    /* transform: translateY(-50%); */
    background: var(--secondary);
}
nav div span:nth-of-type(1)::after{
  top:16px;
}

nav [data-section].is-active::before{
  width: 130px;
}
nav [data-section].is-active:nth-of-type(1)::before {
  width: 100px;
}








/* Page Load
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.load{
  display:flex;
  justify-content: space-between;
  width:100vw;
  font-size:11px;
  text-transform:uppercase;
  height:100vh;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:1111;
  opacity: 1;
  transition: opacity 1s ease;
}

.load > div{
  display:flex;
  align-items: center;
  justify-content: flex-end;
  width:50%;
  color:var(--primary);
  background: var(--secondary);
  height:100vh;
  overflow:hidden;
}
.load > div:nth-of-type(1){
  padding-right:15px;
}
.load > div:nth-of-type(3){
  padding-left:15px;
  justify-content: flex-start;
}
.load > .line{
    width: 1px;
    height: 100vh;
    position:relative;
    z-index:11;
    animation: growLine .75s cubic-bezier(0.645, 0.045, 0.355, 1.000) .5s forwards;
}

@keyframes growLine {
  0% {
    height: 100vh;
  }
  50% {
    height: 40vh;
  }
  
  100% {
    height: 0vh;
  }
}


.load > div:nth-of-type(1){
  animation: leftPane .35s cubic-bezier(0.645, 0.045, 0.355, 1.000) 1.5s forwards;
}
@keyframes leftPane {
  0% {
    width: 50%;
  }
  100% {
    width: 0vw;
    padding:0;
  }
}

.load > div:nth-of-type(3){
  animation: rightPane .35s cubic-bezier(0.645, 0.045, 0.355, 1.000) 1.5s forwards;
}
@keyframes rightPane {
  0% {
    width: 50%;
  }
  100% {
    width: 0vw;
    padding:0;
  }
}










/* Top Fold
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.topfold > div{
  display: flex;
    justify-content: flex-end;
    height: 100vh;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
}  

.topfold h1{
  overflow:hidden;  
  padding-right: 5%;
  padding-left: 1%;
  bottom: -50px;
    position: relative;
  
}
.topfold h1:nth-of-type(1){
  margin-bottom: -8vw;
  padding-left: 2%;
}

.topfold h1 span {
  display: block;
  opacity:0;
  animation: revealDevin 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}

@keyframes revealDevin {
  0% {
    opacity:1;
    transform: translate(0,100%);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

.topfold h1:nth-of-type(2) span{
  animation: revealCar 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.6s forwards;
  margin-bottom: 0;
  margin-left: -50px;
}

@keyframes revealCar {
  0% {
    opacity:1;
    transform: translate(0,100%);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}










/* Some Info
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section:nth-of-type(2) > .container,
section:nth-of-type(3) > .container{
  width:100%;
  max-width:1100px;
  min-height:100vh;
  margin:0 auto;
  display: flex;
      flex-direction: column;
  align-items: center;
      justify-content: center;
      text-align:left;
} 
section:nth-of-type(2) > .container p:nth-of-type(1){
margin-bottom:0;
    margin-top: 10%;
}

/* Image Hovers */
section:nth-of-type(2) > .container p span{
  position: relative; cursor: pointer;
  display: inline-block;
  transition: all 0.15s ease-in-out;
}
section:nth-of-type(2) > .container p span:hover{
  cursor:grabbing;
}
section:nth-of-type(2) > .container p span::after{
  content:"";
  width:99%;
  position:absolute;
  bottom: 8px;
  left: 5px;
  border-bottom:1px solid var(--secondary);  
  transition: all 0.15s ease-in-out;
}
section:nth-of-type(2) > .container p span:hover{
color:var(--primary);
}
section:nth-of-type(2) > .container p span:hover::after{

}

.cursor-preview{
  position: fixed; 
  top:0; 
  left:0; 
  pointer-events:none; 
  z-index:9999;
  width:800px; 
  /* max-width:40vw;  */
  opacity:0; 
  transform:translate3d(0,0,0) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  mix-blend-mode: screen; /* first try multiply */
  filter: grayscale(35%)  contrast(1.1);
  transform-origin: left center;
  will-change: transform;
}
.cursor-preview.is-visible{ opacity:1; transform:translate3d(0,0,0) scale(1); }








/* Some More Info
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section:nth-of-type(3) > .container{
  max-width: 1100px;
      flex-direction: row;
  gap:90px;
}
section:nth-of-type(3) > .container p:nth-of-type(1){
  /* margin-top:-65px;
  padding: 0 20px; */
}

section:nth-of-type(3) > .container p:nth-of-type(1)::after {
    /* content: "";
    width: 100%;
    height: 1px;
    background: var(--secondary);
    position: absolute;
    left: 0;
    top: 50.5%;
    transition: all .15s ease-in-out; */
}
section:nth-of-type(3) > .container > div{
  display:flex;
  flex-direction: column;
}
section:nth-of-type(3) > .container > div:nth-of-type(1){
  width: 50%;
  position: relative;

}
section:nth-of-type(3) > .container > div:nth-of-type(2){
  width: 50%;
  gap:30px;  
}
.headshot{
  opacity: 0;
  height: auto;
  left: -10%;
}
.headshot img{
  display:block;
  width:800px;
  aspect-ratio: 4 / 3;
  position: absolute;
  top:50%;
  right: 0%;
  transform: translateY(-50%);
  filter: grayscale(35%)  contrast(1.1);
  transition: all .15s ease-in-out;
}

.headshot img:hover{
filter: grayscale(5%)  contrast(1.1);
}

/* Interstitial
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section:nth-of-type(5){
display:none;
}
section:nth-of-type(5) > .container{
   height:25vh;
   align-items: center;
   display: flex;
}
section:nth-of-type(5) > .container{
  align-items: flex-start;
  height:60vh;
}
section:nth-of-type(3) > .container h1,
section:nth-of-type(5) > .container h1{
  position:relative;
  left:-30px;
}






/* Accordion Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section:nth-of-type(4) > .container{
  width:100%;
  max-width: 1200px;
  min-height:100vh;
  margin:0 auto;
  display: flex;
      align-items: center;
  justify-content: center;  
 
} 
section:nth-of-type(4) > .container div:nth-of-type(1) h1{
  margin-top:0;
}
section:nth-of-type(4) > .container > .accordion{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20px;
}
section:nth-of-type(4) > .container span{
  font-size:72px;
  text-transform:capitalize;
}
section:nth-of-type(4) > .container p{
  font-size:16px;
  line-height:1.4;
  padding-left: 45px;
  padding-right:50px;
}

/* Base look, tweak as you like */
.accordion { width:50%;margin: -15% auto 0; }
.accordion .item {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 5%;
  }
.accordion .item > span {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; cursor: pointer; user-select: none;position:relative;padding-left: 50px;
  transition: all .15s ease-in-out;
}
.accordion .item > span:hover,
.accordion .item.is-open > span{
  transition: all .2s ease-in-out;
  padding-left: 45px;
}

.accordion .item > span::before,
.accordion .item > span::after{
  content:"";
  width:31px;
  height:1px;
  background:var(--secondary);
  position:absolute;
  left:0;
  top:50.5%;
  transition: all .15s ease-in-out;
}
.accordion .item > span::after{
  width:1px;
  height:31px;
  top:28px;
  left:15px;
}
.accordion .item.is-open > span::after  {  
rotate: 90deg;
opacity:0;
}
.accordion .item.is-open > span::before{
width:100%;
transition: all .25s ease-in-out;
}

.accordion .item > span:focus {  }

/* Animated panel */
.accordion .item > p {
  margin: 0; overflow: hidden; height: 0;
  opacity: 0; transform: translateY(-4px);
  transition:
    height .32s cubic-bezier(.25,.8,.25,1),
    opacity .2s ease,
    transform .32s cubic-bezier(.25,.8,.25,1);
  /* will-change: height, transform, opacity; */
  /* Optional padding inside the panel */
  padding-right: 0; /* prevents layout shift while collapsed */
}

/* When open we’ll switch height to auto via JS after the transition */
.accordion .item.is-open > p {
  opacity: 1; 
  transform: translateY(0);
  margin-top:20px;
margin-bottom:1.5em;
}

@media (prefers-reduced-motion: reduce) {
  .accordion .item > p { transition: none; }
}










/* Portfolio Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section:nth-of-type(6){
 padding-bottom:400px;
}
section:nth-of-type(6) > .container{
    display: flex;
    flex-direction: column;
    align-items: center; 
     gap:300px; 
     max-width:1600px;
     margin: 0 auto;
      min-height:100vh;
}
section:nth-of-type(6) > .container > div{
  width: 100%;
  display:flex;
  align-items: center;
  gap:100px;
  height: 675px;
}
section:nth-of-type(6) > .container > div:nth-child(odd){
  justify-content: flex-end;
}
section:nth-of-type(6) > .container > div:nth-child(even){
justify-content: flex-start;
flex-direction: row-reverse;
}

section:nth-of-type(6) > .container .proj-title{
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-direction: column-reverse;
}
section:nth-of-type(6) > .container > div:nth-child(even) .proj-title{
align-items: start;
}
header > span,
section:nth-of-type(6) > .container > div .cat,
[class^="project-view"] section > .container > div .cat,
footer > span, .proj-title > a{
  display:block;
      font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
}

section:nth-of-type(6) > .container .proj-img{
width: 55%;
}
section:nth-of-type(6) > .container .proj-img img{
  filter: grayscale(15%)  contrast(1.1);
  transition: all .25s ease-in-out;
}
section:nth-of-type(6) > .container .proj-img img:hover{
filter: grayscale(5%)  contrast(1.1);
}
section:nth-of-type(6) > .container > div > div a{
  display:block;
  margin-bottom:40px;
}
section:nth-of-type(6) > .container > div > div img{
  width:100%;
  
  z-index: 11;
    position: relative;
}
section:nth-of-type(6) > .container > div:nth-child(odd) p{
  text-align:right;
}
section:nth-of-type(6) > .container > div:nth-child(even) .cat{
  text-align:right;
}

.proj-title > a{
  margin: 15px 4px 0;
  padding: 4px 0 4px 50px;
  position:relative;
  z-index:11;
  text-decoration:none;
}
body[class^="project-view"] .proj-title > a{
  margin: 0 3px 0;
  padding: 4px 50px 4px 0;
}
.proj-title > a::before,
.proj-title > a::after{
  content:"";
  transition: all .15s ease-in-out;
}
.proj-title > a::before{
  content:"View Project"; 
  
}
.proj-title > a::after{
  position:absolute;
  top:50%;
  left:0;
  width: 33px;
  height: 1px;
  background: var(--secondary);
  /* transform: translateY(-50%); */
}
[class^="project-view"] .proj-title > a::after{
  left: auto;
  right: 0;
}
.proj-title > a:hover::after{
  width: 108%;
}
section:nth-of-type(6) > .container > div:nth-child(odd) .proj-title > a{
text-align: right;
}
/* footer > span:before{
      content: "";
    width: 1000%;
    height: 1px;
    background: var(--secondary);
    position: absolute;
    right: 110%;
    top: 49%;
    transition: all .15s ease-in-out;
} */


/* Project View / View Transitions -- TEST
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body[class^="project-view"] section > .container{
  width:100%;
  max-width:1750px;
  min-height:100vh;
  margin:0 auto;
  display: flex;
  align-items: center;
      justify-content: center;
      text-align:left;  
} 
body[class^="project-view"] section:nth-of-type(n+2) > .container{
  padding:0 0 5%;
}
body[class^="project-view-social"] section:nth-of-type(n+2) > .container{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1300px;
    gap: 60px;
}
body[class^="project-view"] section > .container > div:nth-of-type(1) {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    align-items: center;
    gap:60px;
    width: 90%;
    margin-left: 5%;
}
body[class^="project-view-web"] section > .container > div:nth-of-type(1){
  margin-left: 0;
}
body[class^="project-view-web"] section > .container > div:nth-of-type(1),
body[class^="project-view-email"] section > .container > div:nth-of-type(1),
body[class^="project-view-social"] section > .container > div:nth-of-type(1){
  justify-content: center;
  overflow:hidden;
  max-height: 100vh;
}
body[class^="project-view-social"] section > .container > div{
  
}
body[class^="project-view"] .proj-img{
  aspect-ratio: 14 / 9;
  overflow: hidden;
  width: 100%;
  /* box-shadow: 0 10px 100px rgba(0, 0, 0, .04); */
}
body[class^="project-view-social"] .proj-img{
  box-shadow:none;
}
body[class^="project-view-email"] .proj-img,
body[class^="project-view-social"] .proj-img{
  aspect-ratio: 3 / 4;
  width: 40%;
  max-width:500px;
}
body[class^="project-view-email"] .hyliion .proj-img{
  aspect-ratio: 3 / 3.85;
}
body[class^="project-view-video"] .proj-img{
  aspect-ratio: 16 / 9;
}
body[class^="project-view-web"] .proj-img,
body[class^="project-view-email"] .proj-img,
body[class^="project-view-social"] .proj-img{
  aspect-ratio: auto;
  display: flex;
  position: relative;
  height: 100vh;
  overflow: visible;
}
body[class^="project-view-web"] .proj-img .mobile-view{
  display:flex;
  margin-top: 80px;
  justify-content: space-between;
}
body[class^="project-view-web"] .proj-img .mobile-view img{
  width:30%;
}
body[class^="project-view"] .proj-img img{

}
body[class^="project-view"] .proj-img img::before{
  content:"";

}

/* --- Custom scrollbar --- */
.proj-img .proj-track {
  display:flex;
  flex-direction: column;
  gap: 100px;
  will-change: transform;
  height: 100vh;
}
body[class^="project-view-web"] .proj-img .proj-track,
body[class^="project-view-email"] .proj-img .proj-track{
  gap: 0;
}
body[class^="project-view-email-chicago"] .proj-img .proj-track{
  gap: 100px;
}
/* 1px rail, pinned to top-right, 300px tall */
.scrollbar {
  position: fixed;
  right: 49px;
  top: 0;              /* stick to top of the container */
  width: 10px;
  height: 85%;       /* fixed rail height */
  pointer-events: none;
  overflow: visible;
}

/* black fill that grows downward */
.scrollbar-thumb {
  position: absolute;
  top: 0;              /* start at rail top */
  right: 0;
  width: 1px;
  height: 0;           /* JS updates this */
  background: var(--secondary);
  border-radius: 1px;
}
.scrollbar-thumb::before{
  content:"";
  height:50px;
  width: 1px;
  position: absolute;
  left: 0;
  bottom: -45px;
  background: var(--secondary);
}
.scrollbar-thumb::after{
  content:"Scroll";
      position: absolute;
    left: -5px;
    bottom: -105px;
    color: var(--secondary);
    text-transform: uppercase;
    writing-mode: sideways-rl;
    text-orientation: upright;
    user-select: none;
    pointer-events: none;
    font-size: 10px;
    letter-spacing: .5px;
    padding-top: 0;
}
/* --- END Custom scrollbar --- */

body[class^="project-view"] .proj-title {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
body[class^="project-view"] .proj-title p:nth-of-type(1){
    margin-left: -3px;
}
body[class^="project-view"] .proj-title p:nth-of-type(2){
    margin-bottom: 15px;
    padding-right: 80px;
}

body[class^="project-view"] section:nth-of-type(n+2) > .container .proj-img{
  max-width: 60%;
  aspect-ratio: auto;
  align-items: flex-start;
}

body[class^="project-view-email"] section:nth-of-type(n+2) > .container .proj-img,
body[class^="project-view-social"] section:nth-of-type(n+2) > .container .proj-img{
  max-width:500px;
}
body[class^="project-view-social"] section:nth-of-type(n+2) > .container .proj-img{
  width: 45%;
}

body[class^="project-view"] .proj-title > a::before{
  content:"Go Back"; 
}


/* View transitions
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 1. Opt-in to view transitions */
@view-transition {
    navigation: auto;
}
/* Do NOT fade the whole page. Only animate our named element. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* 2. Animate logo */
header > img {
    /* view-transition-name: title; */
}

/* 3. Animation timing */
::view-transition-group(*) {
     animation-duration: 0.5s;
}

/* 4. Animation pages */

body.project-view #projView.container > div{
  flex-direction: row-reverse;
}

/* This is the element we want to morph between pages */
#projView.container > .sunmount  { view-transition-name: project; }
#projView.container > .hyliion   { view-transition-name: projectTwo; }
#projView.container > .mea       { view-transition-name: projectThree; }
#projView.container > .everon    { view-transition-name: projectFour; }
#projView.container > .komo    { view-transition-name: projectFive; }
#projView.container > .society    { view-transition-name: projectSix; }
#projView.container > .king    { view-transition-name: projectEight; }
#projView.container > .industrious    { view-transition-name: projectNine; }
#projView.container > .chicago    { view-transition-name: projectTen; }
#projView.container > .orlando    { view-transition-name: projectEleven; }
#projView.container > .tempo    { view-transition-name: projectTwelve; }
#projView.container > .gtg    { view-transition-name: projectThirteen; }
#projView.container > .amen    { view-transition-name: projectFourteen; }
#projView.container > .arimathea    { view-transition-name: projectFifteen; }

/* Optional: timing for just this element’s transition layer */
/* ::view-transition-group(project),
::view-transition-group(projectTwo),
::view-transition-group(projectThree) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
} */


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

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

/* Fade between pages — includes background colors */
/* ::view-transition-old(root) {
  animation: bgFadeOut .45s ease forwards;
}
::view-transition-new(root) {
  animation: bgFadeIn .45s ease forwards;
} */

/* Desktop Safari ONLY */
@supports (-webkit-touch-callout: none) and (not (hover: none)) {
  @view-transition {
    navigation: none;
  }

  /* Optional: also disable grouping */
  * {
    view-transition-name: none !important;
  }
}




























/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 80%;
  max-width:1600px;
  overflow: hidden;
      padding-right: 10px;
}
footer h1{
  background:var(--primary);
  position: relative;
      bottom: -20px;
    left: -50px;
  z-index: 1;
}
footer h1::before{
  content:"";
  position:absolute;
  width: 100%;
  height: 100%;
  opacity: .075;
  background: url(https://d11wtnpetvvan1.cloudfront.net/2026/img/noise-overlay-min.png);
  background-attachment: fixed;
}
footer h1 span{
    opacity:0;
}
footer > span{
  position:relative;
  margin: 0 0 5%;
  opacity:0;
}
footer > span::before{
      content: "";
    width: 1000%;
    height: 1px;
    background: var(--secondary);
    position: absolute;
    right: 110%;
    top: 49%;
    transition: all .15s ease-in-out;
}
footer a{
  text-decoration:none;
  transition: all .25s ease-in-out;
}
footer > span:hover::before{
right: -10%;

}



footer.is-live h1 span {
  display: block;

  animation: revealHello 1.25s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes revealHello {
  0% {
    opacity:0;
    transform: translate(0,100%);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

footer.is-live > span{
  opacity:0;
  animation: revealEmail 1.5s cubic-bezier(0.77, 0, 0.175, 1) .15s forwards;
}
@keyframes revealEmail {
  0% {
    opacity:0;
    transform: translate(100%,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}


/* General Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Paragraph line-height animation */
.lineheight-target {
  line-height: 1.75;
  transition: line-height 0.75s ease-in-out;
}

.lineheight-target.in-view {
  line-height: 1.2;
}

/* Fade-in example */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

.gap-target,
section:nth-of-type(6) > .container > div{
  gap: 300px;
  width: 110%;
  opacity: 0;
}
.gap-target.in-view,
section:nth-of-type(6) > .container > div.in-view{
  animation: closeGap .75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes closeGap {
  from {
    opacity: 0;
    width: 110%;
    gap: 300px;
  }
  to {
    opacity:1;
    gap: 100px;
    width: 100%;
  }
}

.leftPos.in-view{
  animation: leftPos .75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes leftPos {
  from {
    opacity: 0;
    left: -10%;
  }
  to {
    opacity:1;
    left:0;
  }
}


img.sailing {
  display: block;       
  transform-origin: left center;
  transform:
    translateY(-50%) translateZ(0)
    rotateX(var(--sail-rx, 0deg))
    rotateY(var(--sail-ry, 0deg))
    skew(var(--sail-kx, 0deg), var(--sail-ky, 0deg));
  will-change: transform;
  filter: grayscale(35%)  contrast(1.1);
  transition: all .25s ease-in-out;
}
img.sailing:hover{
  filter: grayscale(0%)  contrast(1.1);
}





/* Cursor tracking color gradient
–––––––––––––––––––––––––––––––––––––––––––––––––– */





/* Responsiveness
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 4K */
@media (min-width: 1921px) {
  p,section:nth-of-type(4) > .container span{
    font-size:85px;
  }
  h1{
    font-size: 400px;
  }


  section:nth-of-type(2) > .container,
  section:nth-of-type(3) > .container{
    max-width:1500px;
  } 
  section:nth-of-type(3) > .container > div:nth-of-type(1){
  width: 35%;

}
section:nth-of-type(3) > .container > div:nth-of-type(2){
  width: 65%;
}
  section:nth-of-type(4) > .container{
    max-width:1600px;  
  }
 .accordion .item > span::after{
    top:43px;
  }
  .headshot img{
    width:800px;
    right: 20%;
  }
  body[class^="project-view"] section > .container{
    max-width:2000px;
  }
  body[class^="project-view"] .proj-title p:nth-of-type(1){
      margin-left: -5px;
  }
  body[class^="project-view-social"] section:nth-of-type(n+2) > .container{
    /* gap: 180px; */
  }
  .accordion{
    width: 43%;
  }
  .accordion .item > span::before{
        top: 56%;
  }
  
}

@media (min-width: 2400px) {
  h1{
      line-height: 1.1;
  }
  section:nth-of-type(6) > .container{
    gap:400px; 
  }
  .topfold h1{
    bottom: -85px;
  }

}
@media (min-width: 2900px) {
  h1{
    line-height: 1.2;
  }
  .topfold h1{
    bottom: -100px;
  }
}

@media (max-width: 1500px) {
  section:nth-of-type(6) > .container > div{
    height: 630px;
  }
}
@media (max-width: 1200px) {
  section:nth-of-type(6) > .container > div{
    height: 495px;
  }
}
/* Tablet Default portrait */
@media (max-width: 1024px) {
  section:nth-of-type(6) > .container > div{
    height: 430px;
  }
  section:nth-of-type(4) > .container{
    flex-direction: column;
        gap: 0;
  }
}
@media (max-width: 800px) {
  section:nth-of-type(6) > .container > div{
    height: 495px;
  }
}

/* Phone Default portrait */
@media (max-width: 600px) {

  :root {
    --primary: #f1f1ee;
  }
  html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
  body::before,
  nav div::before{
    display:none;
  }
  .progress-container,.cursor-preview{
    display:none;
  }
  header{
    z-index: 111;
      position: relative;
  }
  section:not(:first-of-type) {
    padding: 0 40px;
  }
  h1{
    font-size: 30vw;
  }
  p,
  section:nth-of-type(4) > .container span {
    font-size: 2em;
    
  }
  .accordion .item > span.fade-in{
    transform: translateY(0);
  }

  body[class^="project-view"] .proj-title p:nth-of-type(1){
    margin-left: 0;
  }
  section:nth-of-type(2) > .container p span{
    display: initial;
  }
  body[class^="project-view-social"] section:nth-of-type(n+2) > .container .proj-img{
    width:50%;
    max-width: 100%;
  }

  body.index header > span{
    left:50%;
    margin-left:0;
    margin-top:15px;
  }
  @keyframes revealTag {
    0% {
      opacity:0;
      transform: translate(-50%,-100%);
    }
    100% {
      opacity:1;
      transform: translate(-50%,0);
    }
  }
  .topfold h1:nth-of-type(1) {
  margin-bottom: -11vw;
    padding-left: 2%;
  }
  .topfold h1 {
      padding-right: 5%;
      padding-left:30px;
      bottom: 20vh;
  }
  .topfold h1:nth-of-type(2) span{
    margin-left: -50px;
  }
  nav{
    margin: 0 auto;
    padding:0;
    width: 75vw;
    height: 20px;
     border-radius: 0 0 20px 20px;
    border: 1px solid var(--secondary);
    border-top: 0;
    top:auto;
    bottom:25px;
    right:auto;
    left: 50%;
    /* transform: translate(-50%,0); */
    opacity:0;
    animation: revealNav 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards !important;
    }
    @keyframes revealNav {
     0% {
      opacity:0;
      transform: translate(-50%,250%);
    }
    100% {
      opacity:1;
      transform: translate(-50%,0);
    }
  }

  body.index nav::before, body.index nav::after{
    animation:none !important;
    height: 0%;
  }
 
  nav div{
    height:auto;
    flex-direction: row;
    justify-content: center;
    background:none;
    gap: 10vw;
    margin-top: -32px;
  }
  body.index nav div span{
    animation:none !important;
    opacity: 1 !important;
    text-align: center;
    white-space: nowrap;
  }
  nav div span::before{
    height: 20px;
    width: 1px;
    top:auto;
    bottom:2px;
    right: 50%;
    transform: translateX(-50%);
  }
  nav div span:nth-of-type(1)::before,
   nav div span:nth-of-type(4)::before{
    display:none;
  }
  nav div span::after{
    display:none;
  }
  nav [data-section].is-active::before{
    width: 1px !important;
  }
  nav div span:hover::before{
    width: 1px ;
  }
  nav div span{
    padding: 0 0 20px;
  }
  section:nth-of-type(2) > .container p span:hover{
  cursor:default;
  }
  section:nth-of-type(2) > .container p span::after{
    border:0;
  }
  section:nth-of-type(2) > .container p span:hover{
  color:var(--secondary);
  }
  section:nth-of-type(2) > .container{
    min-height: 50vh;
    justify-content: flex-end;
    margin-bottom: 40px;
  }
  section:nth-of-type(3) > .container {
    flex-direction: column;
    gap: 40px;
    min-height: unset;
    justify-content: flex-start;
  }
  section:nth-of-type(3) > .container > div:nth-of-type(1),section:nth-of-type(3) > .container > div:nth-of-type(2){
    width:100%;
  }
  .headshot img{
    position: static;
    max-width: 100%;
    transform: none;
  }
  section:nth-of-type(4) > .container > .accordion {
    width: 100%;
    margin: 0 auto;
    gap: 0;
  }
  section:nth-of-type(4) > .container p{
    padding-left: 0;
    padding-right: 0;
  }
  .accordion .item{
    padding: 0 0 20px;
  }
  .accordion .item > span::after{
    top: 7px;
  }
  section:nth-of-type(6) > .container{
    gap:15vh;
  }
  section:nth-of-type(2) > .container p:nth-of-type(1){
    margin-top: -15vh;
  }
  section:nth-of-type(6) > .container > div,
  section:nth-of-type(6) > .container > div:nth-child(even){
    flex-direction: column;
    height:auto;
  }
  section:nth-of-type(6) > .container .proj-title{
    align-items: flex-start;
  }
  section:nth-of-type(6) > .container > div:nth-child(odd) p{
    text-align:left;
  }



  section:nth-of-type(6) > .container .proj-title,
  section:nth-of-type(6) > .container .proj-img,
  body[class^="project-view"] .proj-img,
  body[class^="project-view"] .proj-title{
    width: 100%;
    max-width: 100%;
  }
  section:nth-of-type(6) > .container .proj-img{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }



  section:nth-of-type(6) > .container > div > div a{
    margin-bottom: 0;
  }
    section:nth-of-type(6) > .container > div .cat,
    section:nth-of-type(6) > .container > div:nth-child(even) .cat {
    text-align: left;
    line-height: 1.75;
  }
  .proj-title > a{
    margin: 8px 0 0;
  }
  footer{
    width: 100%;
    height: 50vh;
    padding: 0 0 15vh;
  }
  footer h1{
    bottom: 0;
    left: -20px;
    margin-bottom: 30px;
    background:none;
  }
  footer h1::before{
    background:none;
  }
  footer.is-live h1 span{
    white-space: nowrap;
  }
  footer > span{
    margin:  0 0;
  }
  @keyframes revealEmail {
    0% {
      opacity:0;
      transform: translate(100%,0);
    }
    100% {
      opacity:1;
      transform: translate(-110%,0);
    }
  }

  body[class^="project-view"] section > .container > div:nth-of-type(1){
    gap:0 !important;
    flex-direction: column;
    margin:0;
    max-height: unset;
    opacity: 1;
    width: 100%;    
  }
  body[class^="project-view"] section{
    padding: 0 40px;
  }
  body[class^="project-view"] section > .container{
    min-height: unset;
    padding: 40px 0;
  }
  body[class^="project-view"] .proj-img{
    height: auto;
    aspect-ratio: unset !important;
  overflow: inherit;
  }
  .proj-img .proj-track{
    padding-top: 0 !important;
    transform: none !important;
    height:auto;
    gap:40px;
  }
  body[class^="project-view-email"] .proj-img .proj-track{
     gap:0;
  }
   body[class^="project-view-email-chicago"] .proj-img .proj-track{
    gap:40px;
   }
  body[class^="project-view"] .proj-title,
  body[class^="project-view"] .proj-title > a{
    margin-bottom: 40px;
  }
  body[class^="project-view"] .proj-title p:nth-of-type(2){
    margin-bottom: 0;
    padding-right: 0;
  }
  body[class^="project-view-web"] .proj-img .mobile-view{
    margin-top: 40px;
  }
  @keyframes closeGap {
    from {
      opacity: 0;
      width: 105%;
      gap: 60px;
    }
    to {
      opacity:1;
      gap: 20px;
      width: 100%;
    }
  }
  .fade-in{
        transition: all 0.25s ease-in-out;
  }

  .load > div:nth-of-type(1),.load > div:nth-of-type(3){
    padding-bottom: 30px;
  }
  .scrollbar{
    display: none;
  }

}



@media (max-width: 390px) {
    .topfold h1 {
        bottom: 25vh;
    }
  .accordion .item > span{
    padding-left: 35px;
  }
  .accordion .item > span::before{
    width: 21px;
  }
  .accordion .item > span::after{
    height: 21px;
        left: 10px;
        top: 11px;
  }
  .accordion .item > span:hover, .accordion .item.is-open > span{
      padding-left: 30px;
  }
}





/* Scrolling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* HIDE NATIVE SCROLL BAR */
html, body {
  /* overflow: auto; */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE 10+ */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                   /* Chrome, Safari */
}

/* PROGRESSIVE SCROLLING */
.progress-container{
  position: fixed;
  top: 269px;
  right: 50px;
  width: 1px;      /* bar thickness */
  height: 62vh;     /* track height */
  background: none;
  border-radius: 2px;
  /* overflow: hidden; */
  z-index: 99999;
 
}
body.index .progress-container{
 opacity:0;
    animation: revealScroll 1.25s cubic-bezier(0.77, 0, 0.175, 1) 3.15s forwards;
}
@keyframes revealScroll {
  0% {
    opacity:0;
    transform: translate(0,-269px);
  }
  25%{
    opacity:0;
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

/* the fill that grows via scaleY */
.progress-bar{
  width: 100%;
  height: 100%;
  background: var(--secondary);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));  /* 0..1, set from JS */
  will-change: transform;
}

/* label rides along the bar tip, but never scales */
.progress-label{
  position: absolute;
  left: -5px;                          /* space from bar */
  top: calc(var(--p, 0) * 100%);       /* follow the tip */
  transform: translateY(calc(-100% + 60px));        /* sit beside the tip */
  color: var(--secondary);
  text-transform: uppercase;
  writing-mode: sideways-rl;
  text-orientation: upright;
  user-select: none;
  pointer-events: none;
      font-size: 10px;
      letter-spacing: .5px;
      padding-top:0;
      animation: bounce .75s cubic-bezier(0.645, 0.045, 0.355, 1.000) 4s forwards;
}


/* optional, to respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none; }
}

body[class^="project-view"] header > span,
body[class^="project-view"] .progress-container,
body[class^="project-view"] nav,
body[class^="project-view"] footer{
  display:none;
}