@charset "UTF-8";
/*
################
    GLOBAL FONTS
################
*/
@font-face {
  font-family: "Routed Gothic";
  src: local("Routed Gothic"), local("RoutedGothic"), url("../fonts/Routed Gothic/RoutedGothic.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Routed Gothic";
  src: local("Routed Gothic Italic"), local("RoutedGothic-Italic"), url("../fonts/Routed Gothic/RoutedGothic-Italic.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothic-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Routed Gothic";
  src: local("Routed Gothic Half Italic"), local("RoutedGothic-Half-Italic"), url("../fonts/Routed Gothic/RoutedGothic-Half-Italic.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothic-Half-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Routed Gothic Wide";
  src: local("Routed Gothic Wide"), local("RoutedGothicWide"), url("../fonts/Routed Gothic/RoutedGothicWide.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothicWide.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Routed Gothic Wide";
  src: local("Routed Gothic Wide Half Italic"), local("RoutedGothicWide-Half-Italic"), url("../fonts/Routed Gothic/RoutedGothicWide-Half-Italic.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothicWide-Half-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Routed Gothic Wide";
  src: local("Routed Gothic Wide Italic"), local("RoutedGothicWide-Italic"), url("../fonts/Routed Gothic/RoutedGothicWide-Italic.woff2") format("woff2"), url("../fonts/Routed Gothic/RoutedGothicWide-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "GT Alpina Tw Rg";
  src: local("GT Alpina Typewriter Regular"), local("GTAlpinaTypewriter-Regular"), url("../fonts/GT Alpina/GTAlpinaTypewriter-Regular.woff2") format("woff2"), url("../fonts/GT Alpina/GTAlpinaTypewriter-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "GT Alpina Tw Rg";
  src: local("GT Alpina Typewriter Regular Italic"), local("GTAlpinaTypewriter-RegularItalic"), url("../fonts/GT Alpina/GTAlpinaTypewriter-RegularItalic.woff2") format("woff2"), url("../fonts/GT Alpina/GTAlpinaTypewriter-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
.type-rg {
  font-family: "Routed Gothic", monospace;
}

.type-rgw {
  font-family: "Routed Gothic Wide", monospace;
  font-weight: normal;
}

.type-atw {
  font-family: "GT Alpina Tw Rg", monospace;
  font-weight: normal;
}

/*
################
    GLOBAL COLORS
################
*/
:root {
  --brown: hsl(34.41, 36.96%, 63.92%);
  --coral: hsl(7.5, 78.87%, 60%);
  /* Display-P3 color, when supported. Does not support any animation so had to remove
   */
}

/*
################
    GLOBAL
################
*/
a {
  text-underline-offset: 0.25em;
}

::selection {
  color: white;
  background-color: var(--coral);
}

/*
################
    COLOR
################
*/
.brown {
  color: var(--brown);
}

.coral {
  color: var(--coral);
}

.bg-brown {
  background-color: var(--brown);
}

.bg-coral {
  background-color: var(--coral);
}

/*
################
    SPACING & LAYOUT
################
*/
.mt-100 {
  margin-top: 100vh;
}

.mb-1 {
  margin-bottom: 0.1rem;
}

.ml--5 {
  margin-left: -4rem;
}

.ml--6 {
  margin-left: -8rem;
}

.mt8 {
  margin-top: 40rem;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

@media screen and (max-width: 30em) {
  .sticky-sm {
    position: -webkit-sticky;
    position: sticky;
  }
}
@media screen and (min-width: 30em) and (max-width: 90em) {
  .sticky-m {
    position: -webkit-sticky;
    position: sticky;
  }
}
@media screen and (min-width: 90em) {
  .sticky-l {
    position: -webkit-sticky;
    position: sticky;
  }
}
.z-back {
  z-index: -999;
}

.z-max-1 {
  z-index: 2147483646;
}

.mw10 {
  max-width: 150rem;
}

/*
################
    TYPOGRAPHY
################
*/
.sans {
  font-family: sans-serif;
}

.text-indent-1 {
  text-indent: 1rem;
}

.text-indent-2 {
  text-indent: 2rem;
}

.wba {
  word-break: break-all;
}

.nw {
  white-space: nowrap;
}

.ts-1 {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

.lh-same {
  line-height: 1rem;
}

.lh-0 {
  line-height: 0;
}

.lh-1 {
  line-height: 1.1;
}

.lh-2 {
  line-height: 1.2;
}

.lh-3 {
  line-height: 1.3;
}

.lh-4 {
  line-height: 1.4;
}

.f-1 {
  font-size: 4rem;
}

.f--1 {
  font-size: 0.9em;
}

.f-4 {
  font-size: 1.3rem;
}

.f-6 {
  font-size: 0.75rem;
}

.f-mega {
  font-size: 14rem;
}

@media screen and (min-width: 30em) {
  .f-mega-ns {
    font-size: 14rem;
  }
}
@media screen and (min-width: 60em) {
  .f-mega-l {
    font-size: 14rem;
    letter-spacing: -0.75rem;
    line-height: 1;
  }
}
.f-xl {
  font-size: clamp(2rem, -1.6972rem + 11.831vw, 12.5rem);
}

@media screen and (min-width: 60em) {
  .f-xl {
    letter-spacing: -0.5rem;
    line-height: 1;
  }
}
/*
##################################
    ADJUST TYPE SCALE MEDIA QUERY
##################################
*/
@media screen and (max-width: 90em) and (min-width: 30em) {
  .f-6-m,
  .f-headline-m {
    font-size: 6rem;
  }
  .f-5-m,
  .f-subheadline-m {
    font-size: 5rem;
    word-spacing: -0.2em;
  }
  .f1-m {
    font-size: 3rem;
    word-spacing: -0.2em;
  }
  .f2-m {
    font-size: 2.25rem;
    word-spacing: -0.2em;
  }
  .f3-m {
    font-size: 1.5rem;
  }
  .f4-m {
    font-size: 1.25rem;
  }
  .f5-m {
    font-size: 1rem;
  }
  .f6-m {
    font-size: 0.875rem;
  }
  .f7-m {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 90em) {
  .f-6-l,
  .f-headline-l {
    font-size: 6rem;
    word-spacing: -0.2em;
  }
  .f-5-l,
  .f-subheadline-l {
    font-size: 5rem;
    word-spacing: -0.2em;
  }
  .f1-l {
    font-size: 3rem;
    word-spacing: -0.2em;
  }
  .f2-l {
    font-size: 2.25rem;
    word-spacing: -0.2em;
  }
  .f3-l {
    font-size: 1.5rem;
  }
  .f4-l {
    font-size: 1.25rem;
  }
  .f5-l {
    font-size: 1rem;
  }
  .f6-l {
    font-size: 0.875rem;
  }
  .f7-l {
    font-size: 0.75rem;
  }
}
.diag {
  transform: rotate(315deg) translateY(-6px);
}

.shadow-6 {
  box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.6);
}

.shadow-7 {
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.1);
}

.mxb-n {
  mix-blend-mode: normal;
}

.mxb-m {
  mix-blend-mode: multiply;
}

.mxb-d {
  mix-blend-mode: difference;
}

.mxb-e {
  mix-blend-mode: exclusion;
}

.noscroll {
  height: 100%;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* added line */
}

.fade-out {
  animation: fade 1s steps(90) forwards;
  -webkit-animation: fade 1s steps(90) forwards;
  -moz-animation: fade 1s steps(90) forwards;
}

/*
################
    OBJECT FIT
################

https://github.com/tachyons-css/tachyons/pull/567/commits/f94bec89223d8853931fa10f42194de454ac05a0

    OBJECT FIT
    Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

     Base:
     ob = object

     Modifiers:
     -cover = cover
     -contain = contain
     -fill = fill

     Media Query Extensions:
       -ns = not-small
       -m  = medium
       -l  = large

 */
.ob-cover {
  object-fit: cover;
}

.ob-contain {
  object-fit: contain;
}

.ob-fill {
  object-fit: fill;
}

@media (--breakpoint-not-small) {
  .ob-cover-ns {
    object-fit: cover !important;
  }
  .ob-contain-ns {
    object-fit: contain !important;
  }
  .ob-fill-ns {
    object-fit: fill !important;
  }
}
@media (--breakpoint-medium) {
  .ob-cover-m {
    object-fit: cover !important;
  }
  .ob-contain-m {
    object-fit: contain !important;
  }
  .ob-fill-m {
    object-fit: fill !important;
  }
}
@media (--breakpoint-large) {
  .ob-cover-l {
    object-fit: cover !important;
  }
  .ob-contain-l {
    object-fit: contain !important;
  }
  .ob-fill-l {
    object-fit: fill !important;
  }
}
/*

################
    OBJECT POSITION
################

     OBJECT POSITION
     Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

     Base:
     ob = object

     Modifiers:
     -center = center center
     -top = top center
     -right = center right
     -bottom = bottom center
     -left = center left

     Media Query Extensions:
       -ns = not-small
       -m  = medium
       -l  = large

  */
.ob-center {
  object-position: center center;
}

.ob-top {
  object-position: top center;
}

.ob-right {
  object-position: center right;
}

.ob-bottom {
  object-position: bottom center;
}

.ob-left {
  object-position: center left;
}

@media (--breakpoint-not-small) {
  .ob-center-ns {
    object-position: center center;
  }
  .ob-top-ns {
    object-position: top center;
  }
  .ob-right-ns {
    object-position: center right;
  }
  .ob-bottom-ns {
    object-position: bottom center;
  }
  .ob-left-ns {
    object-position: center left;
  }
}
@media (--breakpoint-medium) {
  .ob-center-m {
    object-position: center center;
  }
  .ob-top-m {
    object-position: top center;
  }
  .ob-right-m {
    object-position: center right;
  }
  .ob-bottom-m {
    object-position: bottom center;
  }
  .ob-left-m {
    object-position: center left;
  }
}
@media (--breakpoint-large) {
  .ob-center-l {
    object-position: center center;
  }
  .ob-top-l {
    object-position: top center;
  }
  .ob-right-l {
    object-position: center right;
  }
  .ob-bottom-l {
    object-position: bottom center;
  }
  .ob-left-l {
    object-position: center left;
  }
}
/* 
NOTE:
Using HTMX Boost to swap out pagea
.htmx-settling is automatically inserted into body on page change 
Using a class on <main> to control fade
*/
body.htmx-settling main.fade-in {
  opacity: 0;
}

.fade-out.htmx-swapping {
  opacity: 0;
  transition: opacity 250ms ease-out;
}

.project-grid-items.htmx-swapping {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

.fade-out {
  animation: fade 250ms steps(90) forwards;
  -webkit-animation: fade 250ms steps(90) forwards;
  -moz-animation: fade 250ms steps(90) forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*
################################
    GLOBAL
################################
*/
.pb--nav {
  padding-bottom: 3rem;
}

@media screen and (max-width: 862px) and (min-width: 480px) {
  .pb--nav {
    padding-bottom: 6.1rem;
  }
}
@media screen and (min-width: 861px) {
  .pb--nav {
    padding-bottom: 5.7rem;
  }
}
/*
################################
   INTERSTITIAL
################################
*/
#interstitials {
  pointer-events: none;
}
#interstitials #AZ-id {
  transform-origin: top left;
  overflow: visible;
}
@media screen and (max-width: 90em) and (min-width: 30em) {
  #interstitials #photo.w-two-thirds-ns {
    width: 64%;
  }
}

/*
################################
    PROJECTS
################################
*/
div#project-grid {
  row-gap: 2rem;
}

/*
################################
    PROJECT
################################
*/
#project .description a {
  color: currentColor;
}
#project figure:first-of-type {
  margin-left: 1rem;
}
#project #project-images figure:last-of-type {
  margin-right: 1rem;
}

/*
################################
    PROJECT -> SLIDESHOW
################################
*/
#images div#gallery {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: scroll;
}
#images div#gallery div {
  scroll-snap-align: start;
}

/*
################
    BIO
################
*/
.bio {
  columns: 20rem auto;
  column-gap: 1.5rem;
  column-fill: balance;
  /* padding: 1.5rem; */
  /* hanging indent */
}
.bio dl {
  /* Keep together across columns  */
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}
.bio dt[data-type=name],
.bio dt[data-type=institution] {
  text-indent: -0.75rem;
  margin-left: 0.75rem;
}
.bio dt[data-type=note] p {
  margin: 0.25em;
}

/*
################################
   NAVIGATION
################################
*/
header#nav nav a {
  transition: box-shadow 3s ease-in;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header#nav nav a::after {
  content: "";
  box-shadow: 0px 0px 75px 10px rgba(0, 0, 0, 0.15);
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header#nav nav a:hover {
  filter: brightness(1.1);
}
header#nav nav a:hover::after,
header#nav nav a:focus::after {
  opacity: 1;
}
header#nav nav .is-active {
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header#nav nav .is-active a {
  color: white;
  background-color: var(--brown);
  opacity: 1 !important;
  position: relative;
}
header#nav nav .is-active a::before {
  content: "•";
  margin-right: 0.25em;
}
header#nav nav a.sub-menu-item {
  padding: 0.3em 0.7em;
  color: white;
  background-color: var(--brown);
}
header#nav nav .is-active a.sub-menu-item::before,
header#nav nav .is-active.mobile-btn a::before {
  margin-right: 0;
  content: "";
}
header#nav nav .mobile-btn {
  display: none;
  cursor: pointer;
}
header#nav nav .mobile-btn :before {
  content: "•";
}
header#nav nav .mobile-btn ::selection {
  background-color: white;
  color: currentColor;
}

/*
################################
   NAVIGATION - MOBILE
################################
*/
.fade-out-btn {
  opacity: 0;
  pointer-events: none;
}

#mobile-nav {
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#mobile-nav a::selection {
  color: currentColor;
  background-color: transparent;
}
#mobile-nav .is-active a {
  color: white;
  background-color: var(--brown);
  opacity: 1 !important;
  position: relative;
}

@media screen and (max-width: 1052px) {
  header#nav nav > div div:not(.is-active) {
    display: none;
  }
  header#nav nav > div .mobile-btn {
    display: block !important;
  }
  header#nav nav > div div.is-open a {
    color: white;
    background-color: var(--brown);
    opacity: 1 !important;
  }
  header#nav nav > div div.is-open a:before {
    content: "✕";
  }
}
/*
################################
   FOOTER TESTING
################################
*/
footer #footer-identity svg {
  height: 100%;
  stroke: #333;
}
footer #AZ {
  stroke: #333 !important;
}
footer #AZ-id {
  overflow: visible;
}

@media screen and (max-width: 480px) {
  #footer-identity {
    height: 150px;
  }
  #AZ {
    stroke-width: 10px !important;
  }
}
@media screen and (max-width: 90em) and (min-width: 30em) {
  #footer-identity {
    height: 50%;
  }
}