@import url("https://use.typekit.net/tzk1uqw.css");
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=VT323&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
  font-weight: 300;
}

:root {
  --main-bg: rgb(249, 249, 249);
  --main-black: #1b1c1e;
  --color-grey: #d7d7d7;
  --grey-text: #888888;
  --grey-bg: #efefef;
  --main-branding: #fff08f;
  --san-serif-font: "Elza", "Plus Jakarta Sans", "Albert Sans", "Work Sans", sans-serif;
  --serif-font: "Playfair Display", serif;

  --nav-height: 3.75rem;
  --nav-textsize: 1rem;

  /* Font Sizes and Lineheights */
  --h1:3.25rem;
  --subheading:1.5rem;

  --lineheight105:105%;
  --lineheight120:120%;
  --lineheight145:145%;
  --lineheight165:165%;

  --highlight-text: 1.625rem;
  --textsize: 1.125rem;
  --smalltext: 1rem;


  /* 24px */
  --outer-margin: 60px;
  --gutter:1.5rem;
  --doublegutter:3rem;
  --halfgutter:.75rem;
  --gap: 7.5rem;
  --halfgap: 5.5rem;

  --smallgap: 0.563rem;
  
}

html, body, a, button {
  
  font-family: var(--san-serif-font);
  font-optical-sizing: auto;

  color: var(--main-black);
  font-weight: 300;
  text-decoration: none;
  text-align: left;

  background-color: var(--main-bg);
  border: none;
} 
a:hover, a:focus, button:hover, button:focus {
  cursor: pointer;
  transition: all .175s ease-in;
}
button:hover, button:focus{ background-color:unset;}
nav a:hover, nav a:focus, .link:hover, .link:focus{
  background-color: var(--main-branding); 
}

::selection, mark { background-color: var(--main-branding); color: var(--main-black);
}
hr { 
  border: none;
  height: 1px;
  background-color: var(--color-grey);
  width: 768px;
} 

@keyframes fadeIn {
  from { opacity: 0.175; }
  to { opacity: 1; }
} body { animation: fadeIn 2s;}



/* --- NAV & FOOTER --- */

.nav-container {
  position: fixed;
  z-index: 99;
  background-color: var(--main-bg);
  opacity: .975;
  height: var(--nav-height);
  width: 100%;
  padding: 0 var(--outer-margin);

  display: flex; 
  align-items: center; 
  justify-content: space-between;
}
nav, nav button, .footer-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
nav, nav button { font-size: var(--nav-textsize); } 
nav ul li { 
  float: left; 
  margin-left: var(--gutter);
} 

.hamburger {
  display: flex;
  flex-direction: column;
  display: none;
  cursor: pointer;
  gap: var(--smallgap);
}
.hamburger span {
  display: block;
  height: 1px;
  width: var(--gutter);
  background-color: var(--main-black);
  transition: transform 0.3s ease-in-out;
}
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 10px;
}
.hamburger.open span:nth-child(2) {
  transform: rotate(-45deg);
  position: relative;
  top: 0px;
}


footer hr { width: 100%; max-width: 100%;}


.footer-links { 
  font-size: var(--highlight-text);
  line-height: var(--lineheight165);
  text-align: right;
  align-self: end;
} .link { border-bottom: .975px solid var(--main-black); }


li { list-style: none;}

#topButton {
  display: none;
  position: fixed;
  bottom: var(--gutter-size);
  right: var(--outer-margin);
  z-index: 99;
  cursor: pointer;
  width: var(--doublegutter);
  height: var(--doublegutter);
  text-align: center;

  color: var(--grey-text);
  background-color: unset;
  font-size: var(--textsize);
  line-height: var(--lineheight120);
  border: 1px solid var(--grey-text);
  border-radius: var(--gap); 
  transition: all .175s ease-in;

} #topButton:hover, #topButton:focus {   
  background-color: var(--main-black);
  color: var(--main-bg);
  border: 1px solid var(--main-bg);
}

.italic { font-style: italic; }







main, .main {
  padding-top:168px;
  padding-bottom:168px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}
.main { padding: 0; }

.flex-row, .flex-column, .flex-row48, .flex-column48  {
  display: flex;
  gap: var(--gutter);
}
.flex-column,.flex-column48  { flex-direction: column; }
.flex-row48, .flex-column48 { gap: var(--doublegutter); }

.contentbox {
  max-width: 768px;
  width: 768px;
  justify-self: center;
}
.highlightbox {
  max-width: 1280px;
  width: 1280px;
  justify-self: center;
  justify-content: center;
}
.fullbox{
  width:100vw;
  margin: 48px 0;
  padding: 192px 0;
  /* 10.5 */
}


img { width: 100%; border-radius: var(--halfgutter); }
.margintop72 { margin-top: calc(var(--gutter)*3); }





/* ----- Text Setting ----- */

h1 {
  font-family:"Playfair Display";
  font-size: var(--h1);
  font-weight: 600;
  letter-spacing: -.075rem;
  margin-bottom: var(--gutter);
}

h2, h3, 
p, details {
  color: var(--main-black);
  font-size: var(--textsize);
  line-height: var(--lineheight165);
} b { font-weight: 500; }

h2, h3{
  font-weight: 200;
  margin-bottom: 6px;
} h3 { font-weight: 300; color: var(--grey-text); margin-bottom: 4px;}

.highlight-text {
  font-family:"Playfair Display";
  font-size: var(--highlight-text);
  font-weight:500;
  line-height: var(--lineheight165);
  margin-top: 1.25rem; /* 20px = 4px at h3 */
} 

figcaption, .citation { 
  font-size: var(--smalltext);
  line-height: var(--lineheight145);
}

.citation { 
  color: var(--grey-text);
  transition: all .175s ease-in; 
} .citation:hover, .citation:focus { color: var(--main-black); background-color:unset; }

.contentbox ul li {
  font-size: var(--textsize);
  list-style-type: disc;
  margin: var(--gutter) 0 0 var(--gutter) ;
  line-height: var(--lineheight145);
}

.primarybutton, .secondarybutton {

  display: inline;
  transition: all .15s ease-in;

  font-size: var(--smalltext);
  text-align: center;
  line-height: var(--lineheight120);

  width: 180px;
  height: 50px;
  padding: var(--halfgutter) 0;
  background-color: var(--main-black);
  color: var(--grey-text);
  border: none;
  border-radius: var(--gap); 
  cursor: pointer;

} 
.secondarybutton {
  background-color: unset;
  color: var(--grey-text);
  border: 1px solid var(--grey-text);
} 
.primarybutton:hover, .primarybutton:focus { 
  background-color: var(--main-black);
  color: var(--main-bg);
} 
.secondarybutton:hover, .secondarybutton:focus { 
  background-color: var(--main-bg);
  color: var(--main-black);
  border-color: var(--main-black);
} 




/* --- Intro Section --- */
#intro-info {
  gap: calc(var(--gutter)*4);
  justify-content: space-between;
}
#intro-info h3, #intro-info p, #intro-info ul li { font-size: var(--smalltext);}
#intro-info .content-right { max-width: 320px; }
#intro-info .content-left { max-width: 408px; }

#intro .fullbox { padding: 10.5rem 0; }



/* FullBleed Sections */
#lightgrey { background-color: var(--grey-bg); }
#grey { background-color: var(--color-grey); }
#grey h3 { color: var(--main-black);}
#black { background-color: var(--main-black);}
#black .highlight-text { color: var(--main-bg); }



/* --- Process Section --- */
.figurebox figure {
  width: calc(100% / 3 - 24px);
  height: auto;
  background-color: var(--grey-bg);
  border-radius: var(--halfgutter);

  align-items: center;
  gap: var(--halfgutter);
  padding: var(--gutter);
}  .figurebox aside { width: calc(100% - 24px);}

#process .interaction figure { width: auto; height: auto; }



/* --- Solution & Reflection Section --- */
#solution aside { gap: var(--halfgutter)}

#solution-gif {
  justify-content: center;
  width: 55%;
}

#solution-gif .figurebox figure {
  width: auto; height: auto;
  padding: var(--doublegutter);
} 

#solution-gif .highlight-text {margin: 0 0 var(--halfgutter);}
#solution-gif aside { width: 75%; }

iframe {
  margin-top: var(--halfgutter);
  border-radius: var(--halfgutter);
  max-width: 80%;
  aspect-ratio:  1 / 0.706375;
  height: auto; 
}

#reflection ul li {
  list-style-type: decimal; 
  line-height: var(--lineheight165);
}





/* ---------------- FOOTER  --------------- */

#cycling-word::after {
  content: "|";
  animation: blink 1s ease-in-out infinite;
  padding-left: 2px;
}
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}


.footer {
  position: relative;
  overflow: hidden;
  padding: 0 var(--outer-margin);
}

.footer-container {

  width: 100%;
  justify-content: space-between;
  margin: var(--doublegutter) 0 var(--gutter);

  transform: translateY(100px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease-out;

} .footer-message { margin-top:var(--doublegutter); }
.footer-drawer-container {
  position: relative;
  margin-top: var(--doublegutter);
}


.drawer-pull {
  width: 100%;
  text-align: center;
  cursor: pointer;
  padding: 1.5rem 0;
  transition: transform 0.3s ease;
}
.pull-line {
  width: var(--halfgap); /* size by MQ */
  height: calc(var(--halfgutter)/2);
  background-color: var(--color-grey);
  margin: 0 auto;
  border-radius: var(--gutter);
  transition: background-color 0.3s, transform 0.3s;
  border-radius: var(--gutter);
}
.drawer-pull:hover .pull-line, .drawer-pull:focus .pull-line {
  background-color: var(--grey-text);
  transform: scale(1.1);
}

.archive-drawer {

  max-height: 0;
  overflow: hidden;
  gap: var(--halfgap);

  background-color: var(--grey-bg);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.004);
  border-radius: var(--gutter);

  transition: max-height 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: max-height;
  
}
.archive-drawer.open::before {
  content: '';
  position: absolute;
  top: -12px;
  height: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
}
.archive-drawer.open {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  max-height:calc(100vh - (2 * var(--outer-margin) + 30px));
  height: calc(100vh - (2 * var(--outer-margin) + 30px));
  padding: var(--doublegutter);
  margin-bottom: var(--outer-margin);
  overflow-y: hidden;

}

footer .highlight {
  background-color: var(--main-black);
  color: var(--main-bg);
  padding: 2px var(--halfgutter) 6px;
  border-radius: var(--halfgutter);
} 

.center-quote {
  align-self: center;
  text-align: center;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  justify-content: center;
  margin-top: var(--gutter);
}

.gallery-grid .gallery-img {
  width: calc(33.333% - var(--gutter));
  max-height: 220px;
  height: auto;
  object-fit: cover;
  border-radius: var(--gutter);
  transition: transform 0.3s ease;
}


.highlight {

  font-family: var(--serif-font);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .15px;
  line-height: var(--lineheight105);

}
 .mono {
  font-size: var(--highlight-text);
  color: var(--grey-text);
}
.mono {
  font-family: "VT323", "Inconsolata", monospace;
  line-height: var(--lineheight105);
}
.bold { font-weight: 500; letter-spacing: .015rem; }





/* -------------------- MQ DESKTOP ----------------------- */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .contentbox, .highlightbox {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width:1810px)  {  

  .archive-drawer {
    gap: var(--gutter);
  }
}

@media only screen and (max-width:1610px)  {  

  :root {
    --nav-height:3rem;
    --nav-textsize: 0.875rem;
    --outer-margin:3rem;

    --h1: 2.625rem;
    --textsize: 1rem;
    --highlight-text: 1.438rem;
    --smalltext:0.875rem;
  }

  .contentbox, hr {
    max-width: 620px;
    width: 620px;
  }
  .highlightbox {
    max-width: 1024px;
    width: 1024px;
  }
  footer hr {   max-width: 100%}

  #intro-info {
    gap: calc(var(--gutter)*3);
    justify-content: space-between;
  }
  #intro-info .content-right { max-width: 100%; }
  #intro-info .content-left { max-width: 320px; } 

  #solution-gif aside { width: 100%; }

}

@media only screen and (max-width:1124px)  {  

  .contentbox, hr {
    width: 620px;
  }
  .highlightbox, #solution-gif {
    width: 720px;
    max-width: 720px;
  }  footer hr {   width: 100%}



  #process .figurebox { flex-direction: column; }  
  #process .figurebox figure, .figurebox aside { width:100%;}
  #process .figurebox figure { padding: var(--doublegutter); } 
  #process .figurebox img { width:75%; } 

}

@media only screen and (max-width:1024px)  {  

  :root {
    --h1: 2.625rem;
    --textsize: 1rem;
    --highlight-text: 1.5rem;
    --smalltext:0.875rem;
  }

}


@media only screen and (max-width:820px)  {  

  :root {
    --h1: 2.25rem;
    --highlight-text: 1.375rem;
  }

  footer hr { width: 100%;}

  .link-container { min-width: max-content; }

  .footer-container {
    flex-direction: column;
    gap: var(--gutter);
    margin: var(--gutter) 0;
  } .footer-links { text-align: left; align-self: start; }
  
  .hamburger { display: flex; }
  .menu { display: none; }

  nav button { font-size: var(--h1); } 
  nav ul {
    flex-direction: column;
    position: absolute;
    top: var(--doublegutter); /* Adjust as needed */
    right: 0;
    background-color: var(--main-bg);
    margin-left: unset;
    width: 100%;
  } nav ul li { margin-left: var(--outer-margin); }
  .menu.active {
    font-size: var(--h1);
    display: flex;
    gap: var(--gutter);
    transform: translateY(var(--halfgutter));
    padding-top: var(--doublegutter);
    height:100vh;
  }
  
  #intro img { padding: 0;}
  #intro-info { flex-direction: column-reverse; }
  #intro-info .content-left { max-width: 100%;  } 

  .highlightbox{
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: var(--outer-margin) 0;
  }

  #solution-gif, #solution-gif .figurebox figure {
    width: 100%;
    padding: 0;
  }
  
  .contentbox, .highlightbox, #solution-gif  {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-color:unset;
    padding: 0 var(--outer-margin);
  }

  hr { width:calc(94% - var(--outer-margin)); }
}


@media only screen and (max-width:568px)  {  
  
  :root { --outer-margin:30px;  }

  hr { width: calc(100% - 60px); }

}@media only screen and (max-width:425px) { 
  
  :root {
    --highlight-textsize:1.125rem;
    --highlight-lineheight:1.8rem;
  }   
  .archive-drawer.open {
    max-height: 100%;

height: auto; 
    overflow-y: visible;
  }
  .gallery-grid .gallery-img {
    width: 100%;
  }
}