* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* list-style: none;  */
    text-decoration: none;
}

#home {
    display: flex;
    flex-direction: column;
   align-items: start;
    padding: 0 10rem;
    gap: 6rem;
    width: 100%;
    height: auto;
    position: relative;
    background-image: url(assets/general/homepage\ background.jpg);
    background-size: 100%;
    background-color: var(--hotpink);
    background-repeat: no-repeat;
}

html {
  font-family: "Inter Tight", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 120%;
letter-spacing: 0.0135rem;
color: var(--pink);
background: var(--white);
}

main {
  width: 100%;
}

img,
video {
  max-width: 100%;
}

:root {
  --purple: #AFA1CE;
  --yellow: #F4F3B2;
  --grey: #B3B3B3;
  --darkgrey: #535050;
  --pink: #FDE2F2;
  --beige: #ECE2DF;
  --green: #C3E5D8;
  --blue: #74ACC7;
  --hotpink: #F363A2;
  --teal: #62C4B4;
  --white: #F1F0F1;
  --black: #111111;
  --dark-purple: #9082B0;
  --cursor-wand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='78' viewBox='-8 -8 64 72' fill='none'%3E%3Cpath d='M18.8542 0.248735L12.5448 5.00656L6.07018 0.475695C5.10421 -0.200094 3.83737 0.755208 4.22148 1.86977L6.79725 9.34068L0.48705 14.0991C-0.454485 14.8091 0.0621654 16.3089 1.24155 16.2884L9.14225 16.1481L11.718 23.619C12.1021 24.7336 13.6885 24.7058 14.0331 23.5783L14.5566 21.8634C16.282 23.2203 18.539 24.7254 19.8286 26.2028C19.8606 26.2401 19.8939 26.2777 19.9264 26.3158C19.6432 26.73 19.6395 27.297 19.9571 27.7182L20.4863 28.42C20.8274 28.8723 21.4316 29.0135 21.9298 28.7946C26.8716 35.1584 35.6759 47.7168 36.8453 49.3889C36.7996 49.7756 36.8952 50.18 37.1471 50.5141L38.2374 51.9599C38.5617 52.3899 39.0684 52.6046 39.5708 52.5793C39.3613 52.9781 39.3838 53.4801 39.6725 53.863L40.2071 54.5719C40.6049 55.0994 41.362 55.2056 41.8895 54.8078L46.6067 51.2506C47.1343 50.8528 47.2404 50.0957 46.8426 49.5682L46.308 48.8592C46.0199 48.4772 45.5434 48.3175 45.1018 48.4085C45.2643 47.9324 45.1966 47.3854 44.8729 46.9562L43.7826 45.5103C43.5307 45.1762 43.1682 44.9732 42.7838 44.9107C41.4945 43.329 31.8323 31.4502 27.0599 24.9386C27.4324 24.5198 27.4714 23.8798 27.1224 23.417L26.5932 22.7153C26.2672 22.2829 25.6998 22.134 25.2149 22.314C25.185 22.2677 25.1548 22.2227 25.1261 22.1779C24.048 20.5072 23.2914 17.9659 22.457 15.9133L24.242 15.8812C25.4207 15.86 25.8843 14.3432 24.9177 13.6666L18.4431 9.13571L20.7506 1.57818C21.0952 0.450705 19.7947 -0.459256 18.8532 0.250741L18.8542 0.248735Z' fill='%23F363A2' stroke='%23414042' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 15 13;
  --cursor-wand-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='78' viewBox='-8 -8 64 72' fill='none'%3E%3Cdefs%3E%3Cfilter id='glow' x='-18' y='-18' width='84' height='92' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.4' flood-color='%23DD7F93' flood-opacity='.9'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23glow)' d='M18.8542 0.248735L12.5448 5.00656L6.07018 0.475695C5.10421 -0.200094 3.83737 0.755208 4.22148 1.86977L6.79725 9.34068L0.48705 14.0991C-0.454485 14.8091 0.0621654 16.3089 1.24155 16.2884L9.14225 16.1481L11.718 23.619C12.1021 24.7336 13.6885 24.7058 14.0331 23.5783L14.5566 21.8634C16.282 23.2203 18.539 24.7254 19.8286 26.2028C19.8606 26.2401 19.8939 26.2777 19.9264 26.3158C19.6432 26.73 19.6395 27.297 19.9571 27.7182L20.4863 28.42C20.8274 28.8723 21.4316 29.0135 21.9298 28.7946C26.8716 35.1584 35.6759 47.7168 36.8453 49.3889C36.7996 49.7756 36.8952 50.18 37.1471 50.5141L38.2374 51.9599C38.5617 52.3899 39.0684 52.6046 39.5708 52.5793C39.3613 52.9781 39.3838 53.4801 39.6725 53.863L40.2071 54.5719C40.6049 55.0994 41.362 55.2056 41.8895 54.8078L46.6067 51.2506C47.1343 50.8528 47.2404 50.0957 46.8426 49.5682L46.308 48.8592C46.0199 48.4772 45.5434 48.3175 45.1018 48.4085C45.2643 47.9324 45.1966 47.3854 44.8729 46.9562L43.7826 45.5103C43.5307 45.1762 43.1682 44.9732 42.7838 44.9107C41.4945 43.329 31.8323 31.4502 27.0599 24.9386C27.4324 24.5198 27.4714 23.8798 27.1224 23.417L26.5932 22.7153C26.2672 22.2829 25.6998 22.134 25.2149 22.314C25.185 22.2677 25.1548 22.2227 25.1261 22.1779C24.048 20.5072 23.2914 17.9659 22.457 15.9133L24.242 15.8812C25.4207 15.86 25.8843 14.3432 24.9177 13.6666L18.4431 9.13571L20.7506 1.57818C21.0952 0.450705 19.7947 -0.459256 18.8532 0.250741L18.8542 0.248735Z' fill='%23C3E5D8'/%3E%3C/svg%3E") 15 13;
}

@media (pointer: fine) {
  html,
  body {
    cursor: var(--cursor-wand), auto;
  }

  a,
  a *,
  button,
  button *,
  summary,
  summary *,
  label,
  label *,
  select,
  input[type="button"],
  input[type="checkbox"],
  input[type="file"],
  input[type="radio"],
  input[type="reset"],
  input[type="submit"],
  [role="button"],
  [role="button"] *,
  [tabindex]:not([tabindex="-1"]) {
    cursor: var(--cursor-wand-hover), pointer;
  }
}

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--darkgrey);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s cubic-bezier(.45, 0, .2, 1), visibility .6s cubic-bezier(.45, 0, .2, 1);
}

#loading-screen.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-mark {
  position: relative;
  width: clamp(8rem, 13.2vw, 11rem);
  height: clamp(7rem, 11.7vw, 10rem);
  color: #F063A1;
}

.loading-wand {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 1.2rem rgba(243, 99, 162, .18));
  /* transform: rotate(38deg); */
  /* transform-origin: 58% 82%; */
  animation: loading-wand-cycle 1.8s cubic-bezier(.45, 0, .18, 1) infinite;
  will-change: transform;
}

.loading-wand-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.loading-sparkle {
  position: absolute;
  width: 10%;
  aspect-ratio: 1;
  background: currentColor;
  /* clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M23.0861 1.7502L21.1414 10.8953L29.2438 15.5732C30.4527 16.2712 30.0598 18.1099 28.6742 18.2527L19.3752 19.2264L17.4305 28.3715C17.1392 29.7375 15.2716 29.9278 14.7025 28.6563L10.8962 20.1164L1.59726 21.09C0.211597 21.2328 -0.557367 19.5204 0.479917 18.5851L7.42748 12.3284L3.62123 3.78839C3.05204 2.51698 4.44803 1.25739 5.65695 1.95536L13.7593 6.63325L20.7068 0.376535C21.7441 -0.55877 23.371 0.38052 23.0797 1.74649L23.0861 1.7502Z' fill='%23F363A2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M23.0861 1.7502L21.1414 10.8953L29.2438 15.5732C30.4527 16.2712 30.0598 18.1099 28.6742 18.2527L19.3752 19.2264L17.4305 28.3715C17.1392 29.7375 15.2716 29.9278 14.7025 28.6563L10.8962 20.1164L1.59726 21.09C0.211597 21.2328 -0.557367 19.5204 0.479917 18.5851L7.42748 12.3284L3.62123 3.78839C3.05204 2.51698 4.44803 1.25739 5.65695 1.95536L13.7593 6.63325L20.7068 0.376535C21.7441 -0.55877 23.371 0.38052 23.0797 1.74649L23.0861 1.7502Z' fill='%23F363A2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation: loading-sparkle-cycle 1.8s cubic-bezier(.45, 0, .18, 1) infinite;
  will-change: opacity, transform;
}

.loading-sparkle-1 {
  top: 35%;
  left: 80%;
}

.loading-sparkle-2 {
  top: 60%;
  left: 85%;
  animation-delay: .06s;
}

.loading-sparkle-3 {
  top: 75%;
  left: 80%;
  animation-delay: .12s;
}

.loading-sparkle-4 {
  top: 60%;
  left: 65%;
  animation-delay: .18s;
}

.loading-sparkle-5 {
  top: 95%;
  left: 66%;
  animation-delay: .24s;
}

.loading-sparkle-6 {
  top: 95%;
  left: 98%;
  animation-delay: .3s;
}

.loading-sparkle-7 {
  top: 110%;
  left: 92%;
  animation-delay: .36s;
}

.loading-sparkle-8 {
  top: 115%;
  left: 77%;
  animation-delay: .36s;
}

@keyframes loading-wand-cycle {
  0%,
  20%,
  100% {
    transform: translate3d(0, 0, 0) rotate(38deg) scale(1);
  }

  /* 38% {
    transform: translate3d(.1rem, .18rem, 0) rotate(53deg) scale(1);
  } */

  50% {
    transform: translate3d(.18rem, .3rem, 0) rotate(66deg) scale(1);
  }

  66%,
  80% {
    transform: translate3d(.18rem, .3rem, 0) rotate(66deg) scale(1);
  }
}

@keyframes loading-sparkle-cycle {
  0%,
  50%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  60% {
    opacity: 1;
    transform: translate3d(18%, -6%, 0) rotate(90deg);
  }

  72% {
    opacity: .9;
    transform: translate3d(45%, 8%, 0) rotate(180deg);
  }

  88% {
    opacity: 0;
    transform: translate3d(72%, 22%, 0) rotate(270deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-wand,
  .loading-sparkle {
    animation: none;
  }
}

h1,
.page,
.page-2,
.page-link,
.cta-lockup a {
font-family: "Snell Roundhand";
font-weight: 700;
font-style: italic;
font-size: 3rem;
/* line-height: 1.92rem; */
letter-spacing: -1.1%;
font-weight: 700;
}

h2 {
font-size: 3.2rem;
line-height: 100%;
font-weight: 300;
/* letter-spacing: 0.048rem; */
}

h3, .cta {
font-size: 2rem;
line-height: 108%;
letter-spacing: 0.03rem;
font-weight: 400;
}

h4 {
/* font-style: SemiBold; */
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.027rem;
    line-height: 120%;
}

p {
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: 0.0135rem;
  line-height: 120%;
}

strong {
  font-weight: 600;
}
#menu li a{
font-weight: 400;
/* font-style: medium; */
font-size: 1.4rem;
line-height: 150%;
text-align: center;
}

#menu a{
  color: var(--dark-purple);
  transition: color .2s ease, text-shadow .2s ease, font-weight .2s ease;
}

#menu a:hover,
#menu a:focus-visible {
  color: var(--dark-purple);
  /* font-weight: 600; */
  text-shadow: 0 0 8px #F49AC1;
}

#menu li.is-active > a,
#menu li.is-active > a:hover,
#menu li.is-active > a:focus-visible {
  color: var(--yellow);
  text-shadow:
  -1px 0 var(--purple),
   1px 0 var(--purple),
   0 -1px var(--purple),
   0 1px var(--purple);
  /* -webkit-text-stroke: 1px var(--purple); */
  /* -webkit-text-fill-color: var(--yellow); */
}

#header-home {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all .4s ease-in-out;
    /* transform: translateY(-100%); */
    /* pointer-events: none; */
    /* transition: all 0.4s ease; */
}

#header-home.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    
    width: 100%;
    height: 4rem;
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(251, 226, 237, 0.5);
    box-shadow: 0 2px 8px 0 var(--green);
    backdrop-filter: blur(100%);
     -webkit-backdrop-filter: blur(100%);
    /* transform: translateY(0); */
    /* pointer-events: auto; */
}

header:not(#header-home) {
    width: 100%;
    height: 4rem;
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(251, 226, 237, 0.5);
    box-shadow: 0 2px 8px 0 var(--green);
    backdrop-filter: blur(200%);
     -webkit-backdrop-filter: blur(200%);
}

nav {
  position: absolute;
  display: flex;
  height: 100%;
width: 100%;
padding: 0.8rem 2.5rem;
justify-content: space-between;
align-items: center;
background-image:  linear-gradient(rgba(251, 226, 237, 0.9), rgba(251, 226, 237, 0.9)), url(assets/general/star-bg.png);
background-size: 100%;
box-shadow: 0 2px 8px 0 var(--green);
-webkit-backdrop-filter: inherit;
backdrop-filter: inherit;
background-blend-mode: luminosity;
/* background-blend-mode: lighten; */
}

/* ul {
  list-style: none;
} */

.navigation {
    width: 100%;
    display: inline flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.logo img {
    position: relative;
/* width: 12.16rem; */
  height: 2rem;
  /* left: 1.2rem; */
}

.logo {
  position: relative;
}

#menu,
#menu-mobile {
    display: flex;
/* width: 25.91111rem; */
/* height: 2.48889rem; */
justify-content: space-between;
align-items: center;
flex-shrink: 0;
gap: 6rem;
}

#landing-homepage {
  display: flex;
  flex-direction: column;
}

#landing {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.star {
  position: absolute;
  width: 6rem;
  /* height: 5.625rem; */
}


.star img {
  width: 100%;
  height: auto;
  display: block;
}

#hello {
  position: relative;
  z-index: 2;
  top: 5.625rem;
}

#hello img {
  width: 100%;
  height: auto;
}

#introduction {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: relative;
}

#introduction-text {
/* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: var(--purple, #AFA1CE); */
grid-column: 2;
width: 100%;
align-self: end;
position: relative;
color: var(--pink);
text-shadow:
  -1px 0 var(--purple),
   1px 0 var(--purple),
   0 -1px var(--purple),
   0 1px var(--purple);
font-size: 2.9vw;
/* height: 28.08889rem; */
}

#more-detail {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

#all-thinking {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  /* padding-bottom: 3rem; */
  /* padding-top: 6.93rem; */
  align-items: flex-end;
}

.home-cta, .home-cta-2 {
  display: inline-flex;
  position: relative;
}

.home-cta-2 {
  padding-bottom: 3rem;
  /* padding-top: 6.93rem; */
}

.cta {
color: var(--yellow);
/* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #F363A2; */
text-shadow:
  -1px 0 var(--hotpink),
   1px 0 var(--hotpink),
   0 -1px var(--hotpink),
   0 1px var(--hotpink);
display: block;
  /* height: 5.5rem; */  
}

.cta-lockup {
  max-width: min(100%, 49.21875rem);
}

.text-star {
  position: absolute;
  /* z-index: 1; */
  /* width: clamp(2.4rem, 4.2vw, 4.75rem); */
  pointer-events: none;
}

.text-star img {
  display: block;
  width: 100%;
  height: auto;
  width: 6rem;
}

.text-star--intro {
  left: calc(50% - 3rem);
  top: 40%;
  z-index: 1;
  /* transform: rotate(-8deg); */
}

.text-star--intro-2 {
left: calc(50% - -3.4rem);
    top: -19%;
    z-index: 0;
}

.text-star--works {
  /* right: -0.8rem; */
  /* left: calc(50% - 3rem); */
  top: 48%;
  /* transform: rotate(-12deg); */
}

.text-star--about {
  left: min(36%, 10rem);
  top: -44%;
  /* transform: rotate(8deg); */
}

.see-more {
color: var(--green);
text-align: right;
font-family: "Inter Tight";
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 1.6875rem */
letter-spacing: -0.0155rem;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

.see-more a {
  color: var(--green);
}

.page-link {
  display: inline-block;
  /* margin-left: 0.49219rem; */
  font-size: clamp(3rem, 8.5vw, 6rem);
  line-height: 0.72;
  vertical-align: -0.24em;
  color: var(--green);
text-shadow:
  -1px 0 var(--purple),
   1px 0 var(--purple),
   0 -1px var(--purple),
   0 1px var(--purple);
}

#works-home {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
height: auto;
gap: 3rem 1rem;

}

#works-home a {
  color: var(--pink);
  width: 100%;
}
/* 
#prj-tag-1 {
  grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1;
}

#prj-tag-2 {
  grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 1;
}
#prj-tag-3 {
  grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2;
}
#prj-tag-4 {
  grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 2;
} */

.prj-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: stretch;
  gap: 1rem;
  width: 100%;
  z-index: 10;
}

.prj-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 1rem;
  /* height: 31.125rem; */
}
.prj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prj-info {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
/* gap: 0.6rem; */
}

body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 14.2vh; */
    width: 100%;
    height: auto;
    overflow-x: hidden;
}

.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 2.75rem, 0);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .85s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  background-color: #F1F0F1;
background-image: url(assets/general/pink\ star\ pattern.png);
background-size: 100%;
box-shadow: 0 -2px 8px 0 var(--green);
padding: 1.6rem 4rem 2rem 4rem;
gap: 1.4rem;
}

#contact-me {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* width: min(100%, 25rem); */
  /* height: 7.625rem; */
  color: var(--teal);
  font-size: 2rem;
}

#contact-me h3 {
  position: relative;
  /* right: 3.01rem; */
  /* bottom: 0; */
  color: currentColor;
  text-align: center;
  font-weight: 400;
  font-size: 1em;
  line-height: 100%;
  letter-spacing: -0.044rem;
  word-break: break-word;
  margin: 0;
  animation: contact-me-color 0.9s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}

#wand {
  position: relative;
  top: -1.4rem;
  right: 1.2rem;
  width: 3.4rem;
  height: 3.4rem;
  color: currentColor;
  transform-origin: 50% 50%;
  animation: contact-wand-drift 0.9s cubic-bezier(.45, 0, .2, 1) infinite alternate;
  will-change: transform;
}

#wand svg,
#wand img {
  width: 100%;
  height: 100%;
  display: block;
}

#wand svg path {
  fill: currentColor;
  transition: fill .4s ease;
}

#wand svg mask path {
  fill: #fff;
}

#wand svg path[stroke] {
  stroke: currentColor;
}

#socials {
  display: inline flex;
  justify-content: space-between;
  width: 60%;
  /* flex-wrap: wrap; */
  text-align: center;
  align-items: center;
}

#socials a {
  color: var(--hotpink);
  font-size: 1.4rem;
font-style: normal;
font-weight: 600;
line-height: 108%;
letter-spacing: -0.01956rem;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.4rem;
transition: text-decoration-color .2s ease;
}

#socials a:hover,
#socials a:focus-visible {
  text-decoration-color: currentColor;
}

@keyframes contact-me-color {
  from {
    color: var(--teal);
  }

  to {
    color: var(--green);
    text-shadow:
  -0.5px 0 var(--hotpink),
   0.5px 0 var(--hotpink),
   0 -0.5px var(--hotpink),
   0 0.5px var(--hotpink);
  }
}

@keyframes contact-wand-drift {
  from {
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    transform: translate(0rem, 1rem) rotate(-50deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact-me,
  #wand {
    animation: none;
  }
}

#about {
  background-color: var(--white);
  /* padding: 4.13rem 1.77778rem 5.96rem 5.16rem; */
  display: flex;
  flex-direction: column;
  /* gap: 10.5rem; */
}

#opening {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3rem 10rem 12rem;
  gap: 2rem 0;
}

#about-title {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 13rem;
/* aspect-ratio: 52/25; */
}

#about-title img {
  width: 100%;
}

#photo-text {
    grid-column-start: 1;
  grid-column-end: 3;
  /* grid-column: 1; */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#about-me {
  /* text-transform: uppercase; */
  color: var(--hotpink);
  grid-column: 2;
}

#about-me {
  font-size: 1.5rem;
}

#profile-pic {
  position: absolute;
  width: 23rem;
  height: auto;
  aspect-ratio: 17/20;
  cursor: var(--cursor-wand-hover), grab;
  user-select: none;
  /* align-self: flex-end; */
  /* left: 14%; */
  /* bottom: 12rem; */
}

#profile-pic:active {
  cursor: var(--cursor-wand-hover), grabbing;
}

#profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#cv {
    grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* gap: 4.5rem 0; */
    background-image: url(assets/About/purple\ bow\ pattern.png);
    background-size: 74%;
    background-position: 0rem 6rem;
    background-repeat: no-repeat;
    padding: 6rem 10rem;
  width: 100%;
}

#cv .info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#cv .info:first-child {
  grid-column: 2;
}

#cv h1 {
  color: var(--pink);
    text-shadow:
  -1px 0 var(--purple),
   1px 0 var(--purple),
   0 -1px var(--purple),
   0 1px var(--purple);
}

.description {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.subtitle {
  color: var(--dark-purple);
font-size: 1.6rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
letter-spacing: -0.0176rem;
list-style: disc;
margin-left: 1.3rem;
}

#cv p {
  color: var(--dark-purple);
}

#works {
  background-color: var(--white);
  padding: 3rem 10rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#work-landing {
  width: 100%;
  display: inline flex;
  justify-content: space-between;
  align-items: flex-end;
}

#works-title {
  width: 12rem;
  height: auto;
}

#works-title img {
  width: 100%;
}

#work-intro {
  font-style: italic;
  color: #62C4B4;
}

#works-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3rem 1rem;
}

#works-list a {
  color: var(--dark-purple);
}

.project-detail {
  width: 100%;
  background: var(--white);
  color: var(--dark-purple);
  padding: 4rem 10rem 2.5rem;
  /* display: flex;
  flex-direction: column;
  gap: 3rem; */
}


.project-detail h4 {
  color: var(--dark-purple);
}

.project-detail p {
  color: var(--dark-purple);
}

.project-hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2.5rem;
  color: var(--dark-purple);
}

.project-title-row h2 {
  color: var(--teal);
  font-weight: 600;
  /* font-size: 1.5rem; */
}

.project-title-row .meta p {
  color: var(--dark-purple);
  text-transform: uppercase;
  font-weight: 400;
}


.project-title-row h1 {
  color: var(--teal);
}

.project-hero-image,
.project-board img,
.project-gallery img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.project-hero-image {
  aspect-ratio: 16 / 8.6;
  border-radius: 1rem;
}

#image-top {
  object-position: top;
}

#image-center {
  object-position: center;
}

#thepedlar {
  width: 50%;
}

.project-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 3rem 0 3rem;
}

.project-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.project-summary-wide {
  grid-column: span 2;
}

.project-summary-split {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 2rem;
}


.project-board {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: end;
  gap: 1rem;
  padding-bottom: 2rem;
}

.project-board img {
  height: auto;
}

.project-embed {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
  margin-bottom: 2rem;
}

.case-board {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: end;
  gap: 1rem;
}

.case-video {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}
.project-embed iframe,
.case-video iframe {
  width: 100%;
  /* min-height: 35rem; */
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  padding-bottom: 2rem;
}

.project-gallery img {
  aspect-ratio: 16 / 9;
}

.project-gallery img:nth-child(1),
.project-gallery img:nth-child(2),
.project-gallery img:nth-child(3) {
  grid-column: span 2;
}

.project-gallery img:nth-child(4),
.project-gallery img:nth-child(5) {
  grid-column: span 3;
}

.project-gallery img:nth-child(4) {
  object-position: center 42%;
}

.process-label {
  color: var(--teal);
  padding-bottom: 0.6rem;
}

.project-process {
  min-height: 30rem;
  margin-bottom: 0;
}

.meta {
  display: inline flex;
  justify-content: space-between;
  gap: 6rem;
  /* width: 100%; */
}

.project-case {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.case-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.case-context-copy,
.concept-copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.concept-copy {
  /* padding: 1rem 0; */
  width: 50%;
}

.case-media {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.case-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* align-self: center; */
}

.case-media .case-context-copy {
  width: 50%;
}

.case-prototypes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

.case-prototypes iframe {
  width: 100%;
  aspect-ratio: 16/13;
  border: 0;
  border-radius: 1rem;
  display: block;
}

.poster-showcase {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* padding-bottom: 1rem; */
}

.poster-series,
.text-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 1rem;
}

.poster-series img {
  width: 100%;
}

.nvh-bbq {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  align-items: end;
}

.nvh-bbq img {
  width: 100%;
  height: 100%;
}

.nvh-bbq img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.nvh-bbq img:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.nvh-bbq p {
  grid-column: 1;
  grid-row: 2;
}

.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 1fr;
  gap: 1rem;
  align-items: start;
}

.model-grid p {
  grid-column: 1;
  grid-row: 2;
}

.model-grid img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.model-grid img:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

/* #video-vertical {
  width: 50%;
  aspect-ratio: 16/12;
  align-self: center;  
} */

.case-media .browser-preview {
  margin: 0;
}

.case-media .browser-preview video {
  object-position: center;
}

/* .case-media img:nth-child(1) {
  aspect-ratio: 16/9;
} */

#fullscreen-img {
  aspect-ratio: 16/9;
  /* object-position: top; */
}

.image-full {
  aspect-ratio: 16/9;
}

.image-stacks {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  width: 100%;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}

.image-stacks-left {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  width: 100%;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}

.image-stacks img,
.image-split img,
.image-stacks-left img,
.poster-pair img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.image-stacks img:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  object-position: center;
  aspect-ratio: 16 / 12;
}

.image-stacks img:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.image-stacks img:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}

.image-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 1rem;
}

.poster-pair {
  display: flex;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  gap: 1rem;
}

.image-stacks-left img:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.image-stacks-left img:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

.image-stacks-left img:nth-child(3) {
  grid-row-start: 1;
  grid-row-end: 3;
  object-position: center;
  aspect-ratio: 16 / 12;
}

.project-hero-image,
.browser-preview video,
.media-pair video,
.process-grid img,
.asymmetric-gallery img {
  width: 100%;
  /* border-radius: 1rem; */
  object-fit: cover;
}

.four-poster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

.poster-rationale {
    width: 30%;
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 3.375rem;
    align-items: center;
    justify-items: center;
    align-self: center;
    padding-bottom: 1rem;
}

.poster-rationale img {
  width: 100%;
}

.case-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: space-between;
  /* gap: 1.7%; */
  margin-top: 3rem;
  width: 100%;
}

.case-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: space-between;
  /* gap: 1.7%; */
  width: 100%;
}

.case-feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: space-between;
  align-items: start;
  margin-top: 2rem;
}

.case-feature-split > img {
  width: 100%;
  /* aspect-ratio: 1.89 / 1; */
  /* border-radius: 1rem; */
  object-fit: cover;
  height: 100%;
}

.case-intro-grid > div,
.case-intro > div,
.case-copy,
.case-copy-2 {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-copy {
  max-width: 75%;
}

.case-intro-grid img {
  width: 100%;
  /* border-radius: 1rem; */
}

.case-copy strong,
.case-copy-2 strong {
  font-weight: 600;
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 0.77344rem;
  padding-left: 1.54688rem;
  list-style: disc !important;
}

.case-list li {
  color: var(--dark-purple);
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: 0.0135rem;
  line-height: 120%;
}

.browser-preview {
  margin-top: 2rem;
  width: 100%;
  /* border-radius: 1rem; */
}

.browser-preview video {
  aspect-ratio: 1.586 / 1;
}

.external-link-label {
  margin: 2rem 0 3rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.22rem;
  color: var(--teal); 
}

.external-link-label a {
  color: var(--teal);
}

.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 0.5fr;
  gap: 1rem;
  /* display: block; */
  /* border-radius: 1rem; */
  align-items: end;
}

.media-pair video:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 1;
}

.media-pair video:nth-child(2) {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row: 1;
  object-fit: contain;
}

.media-pair video:nth-child(3) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
}

.media-pair p {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row: 2;
}

.media-pair video {
  aspect-ratio: 1 / 1;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1rem;
  margin-top: 3rem;
}

.process-grid figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.process-grid img {
  aspect-ratio: 1.52 / 1;
}

.artifact-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  /* min-height: 33rem; */
  margin-top: 3rem;
}

.artifact-visual {
  position: relative;
  width: 100%;
  height: 100%;
}

.artifact-visual img {
  /* position: absolute; */
  width: 100%;
  /* max-height: 84%; */
  object-fit: contain;
  /* filter: drop-shadow(0 0.45rem 0.7rem rgba(75, 54, 99, 0.12)); */
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}

.artifact-grid img {
  width: 100%;
  aspect-ratio: 0.706 / 1;
  object-fit: contain;
  filter: drop-shadow(0 0.39375rem 0.63281rem rgba(75, 54, 99, 0.1));
}

.artifact-grid img:nth-child(4n + 2) {
  transform: rotate(-2deg);
}

.artifact-grid img:nth-child(4n + 3) {
  transform: rotate(2deg);
}

.captioned-media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 1rem;
  margin-top: 3rem;
}

.captioned-media img {
  width: 100%;
  /* max-height: 39.375rem; */
  object-fit: cover;
}

.asymmetric-gallery {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.2fr;
  gap: 1rem;
  margin-top: 3rem;
  width: 100%;
  /* height: 10rem; */
}

.asymmetric-gallery img {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
}
.asymmetric-gallery img:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  aspect-ratio: 89/60;
  object-position: 50% 60%;
}

.asymmetric-gallery img:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 3;
  aspect-ratio: 98/90;
}

.asymmetric-gallery img:nth-child(3) {
  grid-column-start: 3;
  grid-column-end: 4;
aspect-ratio: 25/62;
}


.credits-block {
  width: 100%;
  margin: 1rem 0 0 auto;
  display: inline flex;
  align-items: end;
  gap: 8rem;
}
.credits-block div {
  /* width: 100%; */
  object-fit: cover;
  width: 35rem;
  /* height: 31rem; */
}

.credits-block img {
  width: 100%;
  /* aspect-ratio: 582/499; */
  object-fit: cover;
}

#archive {
  background-color: var(--white);
  padding: 3rem 10rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#archive-title {
  width: 16rem;
  height: auto;
}

#archive-title img {
  width: 100%;
} 

/*
#showcase {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  width: 100%;
  gap: 1rem;
} */

/* #showcase #list {
  display: flex;
  width: 15rem;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
} */
/* 
.archive-tag {
  display: flex;
padding: 1rem 1rem;
flex-direction: column;
align-items: center;
gap: 0.5rem;
border-radius: 1rem;
border: 1px solid #F063A1;
background: var(--green);
  height: auto;
  width: 100%;
}
#showcase #list a {
  color: var(--hotpink);
}

.archive-tag .name {
  text-wrap: wrap;
  text-align: center;
  line-height: 120%;
  letter-spacing: -0.0176rem;
  width: 100%;
}

#big-thumbnail {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
}

#big-thumbnail img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-image: url(assets/ANam/ANam\ thumbnail.jpg)
} */


/* Responsive adjustments */

/* DESKTOP-LAPTOP */

@media screen and (max-width: 1440px) {
  #home {
    gap: 4rem;
  }

  /* #landing {
    height: 92vh;
    min-height: 41rem;
  } */

  #hello {
    top: 5rem;
  }

  #stars {
    top: -2.5rem;
  }

  .star, .text-star img {
    width: clamp(5rem, 7vw, 8.4375rem);
    height: auto;
  }

  #introduction-text {
    font-size: clamp(2.2rem, 2.9vw, 3.2rem);
  }

  #more-detail {
    gap: 2.5rem;
  }

  #contact-me {
    font-size: clamp(2rem, 2.6vw, 3rem);
  }

  #wand {
    width: 1.7em;
    height: 1.7em;
    top: -0.7em;
    right: 0.55em;
  }
}

@media screen and (max-width: 1024px) {
  .project-title-row {
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
  }

  .project-title-row .meta {
    display: flex;
    width: 100%;
    gap: 1.4rem;
    justify-content: space-between;
  }

  .poster-rationale {
    width: 40%;
  }

  /* .project-detail p {
    font-size: 1rem;
  } */

  html {
    font-size: 15px;
  }

  #home,
  #works,
  #archive {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  /* nav {
    min-height: 4.7rem;
    padding: 0.6rem 2rem;
  } */

  /* .logo img {
    height: 4.4rem;
  } */

  /* #menu,
  #menu-mobile {
    gap: 3rem;
  } */

  #menu li a {
    font-size: 1.2rem;
  }

  #archive-title {
  width: 15rem;
  }

  /* #landing {
    height: 78vh;
    min-height: 34rem;
  } */

  #hello {
    top: 6rem;
  }

  #stars {
    top: 0;
  }

  .star, .text-star img {
    width: clamp(4.6rem, 6vw, 8.4375rem);
  }

  /* #introduction {
    grid-template-columns: 0.32fr 1fr;
  } */

  #introduction-text {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
  }

  #more-detail {
    gap: 2rem;
  }

  #works-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  #opening {
    padding: 3rem 8rem 0;
  }

  #about-title {
    width: min(38vw, 13rem);
  }

  #profile-pic {
    /* width: min(40vw, 25rem); */
    aspect-ratio: auto;
    width: 20rem;
  }

  #cv {
  padding: 6rem 8rem;
  /* background-position: 0% -130%; */
  /* background-size: 92%; */
  }

  #showcase {
    grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr);
  }

  .project-detail {
    padding: 3.5rem 8rem 2rem;
  }

  .project-case {
    gap: 2.5rem;
  }

  .artifact-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  footer {
    padding: 1.8rem 2rem 2.2rem;
  }
}

/* TABLET */
@media (max-width: 820px) {
  html {
    font-size: 14px;
  }

  h1,
  .page,
  .page-2,
  .page-link {
    font-size: 2.8rem;
    line-height: 1;
  }

  h2 {
    font-size: 2.2rem;
    line-height: 1.05;
  }

  h3,
  .cta {
    font-size: 1.45rem;
    line-height: 1.15;
  }

  h4 {
    font-size: 1.3rem;
  }

  header:not(#header-home),
  #header-home.show {
    height: 3.5rem;
  }

  nav {
    /* min-height: 4.6rem; */
    padding: 1.4rem;
    /* background-size: auto 100%; */
  }

  .navigation {
    gap: 1rem;
  }

  /* #menu,
  #menu-mobile {
    gap: 3rem;
  } */

  #menu li a {
    font-size: 1.2rem;
  }

  #home,
  #works,
  #archive {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
  }

  #home {
    gap: 3rem;
  }

  /* #landing-homepage {
    gap: 1.8rem;
  } */

  #landing {
    height: 60vw;
    min-height: 35rem;
  }

  #hello {
    top: 7rem;
  }

  .star, .text-star img {
    width: clamp(4.6rem, 5vw, 8.4375rem);
  }

  .text-star--intro-2 {
    top: -12%;
  }

  .text-star--works {
    top: 52%;
  }

  .text-star--intro {
    left: calc(50% - 2rem);
    top: 41%;
    z-index: 1;
  }

  .text-star--about {
    left: min(36%, 7.5rem);
    top: -33%;
  }

  /* #introduction {
    grid-template-columns: 0.15fr 1fr;
  } */

  #introduction-text {
    font-size: clamp(2rem, 6.4vw, 2.7rem);
    line-height: 1.04;
  }

  #more-detail {
    gap: 2rem;
  }

  #works-home,
  #works-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* gap: 2.25rem 1rem; */
  }

  #work-landing {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  #works-title {
    width: min(58vw, 10rem);
  }

  #opening {
    /* gap: 2rem; */
    padding: 3rem 3rem 0;
  }

  #about-title {
    width: min(38vw, 11rem);
  }

  #profile-pic {
    position: relative;
    /* width: min(70vw, 28rem); */
    order: 1;
    align-self: center;
  }

  #about-me {
    order: 1;
  }

  #cv {
    /* gap: 3.2rem; */
    padding: 4rem 3rem 4rem;
    /* background-position: 0% 500%; */
    background-size: 88%;
  }

  #cv .info {
    gap: 0;
  }

  #archive-title {
    width: 14rem;
  }

  #showcase {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  #showcase #list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-tag {
    height: 100%;
    padding: 1.2rem 1rem;
  }

  #big-thumbnail {
    aspect-ratio: 16 / 10;
  }

  footer {
    padding: 1.6rem 1.4rem;
    gap: 1.2rem;
  }

  /* #contact-me {
    font-size: clamp(2.4rem, 8vw, 3.4rem);
  } */

  #wand {
    width: 1.65em;
    height: 1.65em;
    top: -0.68em;
    right: 0.54em;
  }

  #socials {
    gap: 1rem;
    /* flex-wrap: wrap; */
  }

  #socials a {
    font-size: 1.1rem;
  }

  .project-detail {
    padding: 3rem 3rem 1.4rem;
  }

  .project-case {
    gap: 2rem;
  }

  .project-summary {
    gap: 1.6rem;
    padding-bottom: 2.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .project-summary-split {
    gap: 1.6rem;
  }

  .project-summary-item:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }
  .project-summary-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }

  /* .project-gallery {
    grid-template-columns: repeat(4, 1fr);
  } */

  /* .project-hero-image,
  .project-board img,
  .project-gallery img,
  .browser-preview video {
    aspect-ratio: 16 / 10;
  } */

  .project-board,
  .case-board {
    gap: 1rem;
  }

  .project-embed,
  .case-video {
    min-height: 20rem;
  }

  .meta {
    gap: 1.4rem;
  }

  .case-intro-grid {
    gap: 2.4rem;
    margin-top: 2.4rem;
  }

  .case-intro {
    gap: 2.4rem;
  }

  .case-feature-split {
    gap: 2.4rem;
    margin-top: 2.4rem;
  }

  .browser-preview {
    margin-top: 2.4rem;
  }

  .external-link-label {
    margin: 1rem 0 2.4rem;
  }

  .media-pair {
    gap: 1rem;
  }

  .process-grid {
    /* gap: 2rem; */
    margin-top: 2.4rem;
  }

  .artifact-feature {
    gap: 1rem;
    min-height: 0;
    margin-top: 2.4rem;
  }

  .artifact-feature--kit {
    grid-template-columns: 1fr;
  }

  .artifact-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .captioned-media {
    gap: 1rem;
    margin-top: 2.4rem;
  }

  .asymmetric-gallery {
    gap: 1rem;
    margin-top: 2.4rem;
  }

  .asymmetric-gallery img:first-child {
    grid-column: auto;
    aspect-ratio: 1.4 / 1;
  }

  .credits-block {
    width: 100%;
    /* margin-top: 2.4rem; */
  }
}

/* MOBILE */

@media (max-width: 450px) {
  html {
    font-size: 12px;
  }

  h1,
  .page,
  .page-2,
  .page-link {
    font-size: 2.45rem;
  }

  h2 {
    font-size: 1.85rem;
  }

  h3,
  .cta {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.12rem;
  }

  header:not(#header-home),
  #header-home.show {
    height: 4rem;
  }

  nav {
    /* min-height: 4.4rem; */
    padding-right: 1rem;
  }

  .logo img {
    height: 1.8rem;
  }

  /* #menu,
  #menu-mobile {
    gap: 1rem;
  } */

  #home,
  #works,
  #archive {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #home {
    gap: 3rem;
  }

  /* #landing-homepage {
    gap: 1.2rem;
  } */

  #landing {
    height: 82vw;
    min-height: 22.5rem;
  }

  #hello {
    top: 6.4rem;
  }

  .star, .text-star img {
    width: clamp(3.35rem, 6vw, 8.4375rem);
  }

  .text-star--works {
    top: 30.5%;
  }

  .text-star--intro {
    left: calc(50% - -8rem);
    top: 89%;
  }

  .text-star--intro-2 {
    left: calc(50% - -1rem);
  }

  #introduction {
    display: block;
  }

  #introduction-text {
    font-size: clamp(1.95rem, 9.2vw, 2.55rem);
    line-height: 1.03;
  }

  #all-thinking {
    align-items: flex-start;
    /* padding: 1rem 0; */
  }

  .home-cta,
  .home-cta-2 {
    display: inline-flex;
  }

  .home-cta-2 {
    /* padding: 1.2rem 0 2.5rem; */
  }

  .cta-lockup {
    max-width: 100%;
  }

  .page-link {
    font-size: clamp(3.1rem, 18vw, 5rem);
    vertical-align: -0.22em;
  }

  .see-more {
    align-self: flex-end;
    font-size: 1rem;
  }

  #works-home,
  #works-list {
    grid-template-columns: 1fr;
    gap: 2rem 1rem;
  }

  .prj-tag {
    gap: 0.6rem;
  }

  .prj-info {
    gap: 0.3rem;
  }

  #work-landing {
    gap: 0.6rem;
  }

  #works,
  #archive {
    padding-top: 2.5rem;
    gap: 1.6rem;
  }

  #works-title {
    width: min(72vw, 9rem);
  }

  #opening {
    padding: 2.5rem 1rem 0 1rem;
    gap: 1.6rem;
  }

  #photo-text {
    gap: 0.6rem;
  }

  #about-title {
    width: min(76vw, 10rem);
  }

  #profile-pic {
    position: relative;
    width: 14rem;
    align-self: flex-start;
    left: 0;
  }

  #opening,
  #photo-text,
  #cv {
    grid-template-columns: 1fr;
  } 

  #about-title,
  #photo-text,
  #about-me {
    grid-column: auto;
  }

  #photo-text {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
  }

  #cv {
    gap: 1.6rem;
    padding: 2.5rem 1rem;
    background-position: -50% 80%;
    background-size: 125%;
    display: flex;
    flex-direction: column;
  }


  #archive-title {
    width: 12rem;
  }

  #showcase #list {
    grid-template-columns: 1fr;
  }

  .archive-tag {
    padding: 1rem 0.9rem;
  }

  footer {
    padding: 1.2rem 1rem 1.2rem;
    gap: 1.2rem;
  }

  /* #contact-me {
    font-size: clamp(2.1rem, 12vw, 3rem);
  } */

  #wand {
    width: 1.6em;
    height: 1.6em;
    top: -0.65em;
    right: 0.5em;
  }

  #socials {
    gap: 2rem;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  #socials a {
    font-size: 1.2rem;
  }

  .project-detail {
    padding: 2.5rem 1rem 2.5rem;
  }

  .project-hero {
    gap: 1rem;
  }

  .project-title-row h2 {
    font-size: 1.2rem;
  }

  .project-summary {
    padding: 2rem 0;
    gap: 1.6rem;
  }
  .project-summary-item:nth-child(1),
  .project-summary-item:nth-child(2),
  .project-summary-item:nth-child(3),
  .project-summary-item:nth-child(4),
  .project-summary-item:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .project-summary-item:nth-child(4) {
    grid-row: 2;
  }

  .project-summary-wide,
  .project-gallery img,
  .project-gallery img:nth-child(1),
  .project-gallery img:nth-child(2),
  .project-gallery img:nth-child(3),
  .project-gallery img:nth-child(4),
  .project-gallery img:nth-child(5) {
    grid-column: auto;
  }

  .browser-preview {
    margin-top: 1.6rem;
  }

  .external-link-label {
    margin: 1rem 0 1.6rem;
  }

  .project-summary,
  .project-board,
  .case-board,
  .project-gallery,
  .case-context,
  .case-intro-grid,
  .case-intro,
  .case-feature-split,
  .artifact-feature,
  .captioned-media,
  .project-summary-split {
    grid-template-columns: 1fr;
  }

  .case-context-copy {
    grid-column: 1;
  }

  .case-media img {
    height: inherit;
  }
  .case-media {
    gap: 1rem;
  }

  .case-prototypes {
    grid-template-columns: 1fr;
  }

  .concept-copy {
    width: 100%;
  }

  .image-stacks,
  .image-split,
  .image-stacks-left {
    display: flex;
    flex-direction: column;
  }

  .image-stacks img:nth-child(1) {
    aspect-ratio: 16/12;
  }

  .poster-pair {
    /* flex-direction: column; */
    height: 100%;
  }

  .project-embed {
    min-height: 16rem;
    margin-bottom: 1rem;
  }
  .case-video {
    min-height: 16rem;
  }

  .text-showcase {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .text-showcase p,
  .nvh-bbq p,
  .case-board p {
    width: 70%;
  }

  .nvh-bbq,
  .model-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
  }

  .case-intro-grid,
  .case-feature-split,
  .process-grid
  .artifact-feature {
    gap: 1.6rem;
    margin-top: 1.6rem;
  }

  .process-grid figure:nth-child(1),
  .process-grid figure:nth-child(5),
  .process-grid figure:nth-child(6) {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .process-grid {
    gap: 1rem;
    margin-top: 1.6rem;
  }
  .media-pair {
    display: flex;
    flex-direction: column;
  }

  .media-pair video,
  .media-pair p {
    width: 100%;
  }

  .four-poster {
    grid-template-columns: 1fr 1fr;
  }

  .poster-rationale {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 2rem;
  }

  .poster-rationale img {
    width: 100%;
  }
  .artifact-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }

  .captioned-media {
    gap: 1rem;
    margin-top: 1.6rem;
  }

  .artifact-visual {
    height: auto;
  }

  .artifact-feature {
    margin-top: 1.6rem;
  }

  .asymmetric-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .asymmetric-gallery img,
  .asymmetric-gallery img:nth-child(1),
  .asymmetric-gallery img:nth-child(2),
  .asymmetric-gallery img:nth-child(3) {
    grid-column: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .asymmetric-gallery img:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .credits-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .credits-block div {
    width: 100%;
  }
}