#portfolio {
  --font-counter: .625rem;
  --font-item-link: min(1.875rem + 1vw, 2.75rem);
  --font-item-desc: min(.875rem + .625vw, 1.0625rem);
  --portfolio-item-margin-bottom: 5rem;
  --portfolio-item-counter-left: max(-2rem, -1rem - 1vw);
  --item-link-margin-bottom: 1.25rem;
  --ease-out-back: cubic-bezier(.175, .885, .320, 1.14);
  --ease-in-expo: cubic-bezier(.895, .03, .685, .22);
  --ease-out-expo: cubic-bezier(.165, .84, .44, 1);
  --ease-out-snap: cubic-bezier(.6, -.12, .735, .08);
  position: relative;
  padding-block: min(8.25rem + 8vw, 16rem) min(3.5rem + 10vw, 13rem)
}

#portfolio ul {
  padding-left: unset;
  margin-block: unset;
  list-style: none;
  counter-reset: portfolio-counter
}

#portfolio figure {
  margin: unset;
  overflow: hidden;
  padding: 4px;
  margin: -4px
}

#portfolio .item {
  transform-origin: 0%;
  padding-bottom: var(--portfolio-item-margin-bottom);
  position: relative;
  opacity: 0;
  transform: scale(.85) translate(-.75rem, .25rem) rotateX(50deg);
  transition: transform .6s var(--ease-standard), opacity .6s var(--ease-standard);
  counter-increment: portfolio-counter
}

#portfolio figcaption {
  letter-spacing: .01em;
  font-family: Fira Mono, sans-serif;
  font-size: var(--font-item-desc);
  line-height: 1.6;
  transform: translateY(105%);
  transition: var(--ease-dark-light),
    transform .5s var(--ease-out-back)
}

#portfolio .item:hover figcaption,
#portfolio .item:focus-within figcaption {
  transform: translateY(0)
}

#portfolio .item:not(:hover):not(:focus-within) figcaption {
  transition: transform .28s var(--ease-out-snap)
}

#portfolio .item[in-view] {
  opacity: 1;
  transform: none
}

#portfolio .item::before {
  content: counter(portfolio-counter, decimal-leading-zero);
  text-align: center;
  writing-mode: vertical-rl;
  height: 2.5rem;
  font-family: Fira Mono, sans-serif;
  font-size: var(--font-counter);
  position: absolute;
  left: var(--portfolio-item-counter-left);
  overflow: hidden;
  transform: rotate(180deg);
  color: var(--color-tp);
  transition: var(--ease-dark-light)
}

#portfolio .title-row {
  display: flex;
  gap: min(4vw, 3rem);
  margin-bottom: var(--item-link-margin-bottom)
}

#portfolio a {
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.01em;
  line-height: 2.75rem;
  -webkit-text-stroke-width: .075rem;
  -webkit-text-stroke-color: transparent;
  font-size: var(--font-item-link);
  display: inline-block;
  white-space: nowrap;
  font-weight: 450;
  transition: var(--ease-dark-light),
    -webkit-text-stroke-color .3s var(--ease-in-expo)
}

#portfolio a:hover {
  color: transparent;
  -webkit-text-stroke-color: var(--color-text);
  transition: color .8s var(--ease-out-expo),
    -webkit-text-stroke-color .8s var(--ease-out-expo)
}

#portfolio a:focus-visible {
  outline-offset: 2px
}

#portfolio .stack {
  display: flex;
  padding-top: .25rem;
  align-items: center;
  height: 2.75rem;
  gap: .25rem min(2vw, 1rem);
  flex-wrap: wrap
}

#portfolio .stack svg {
  color: var(--color-tp-mid);
  height: min(1rem + 1vw, 1.5625rem);
  max-width: 5.625rem;
  width: auto;
  display: block;
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  overflow: visible;
  transition: opacity .3s var(--ease-out-expo),
    transform .6s var(--ease-out-expo)
}

#portfolio .stack svg:has([href='#resend']) {
  max-width: 3.9375rem
}

#portfolio .item:not(:hover):not(:focus-within) .stack svg {
  transition: opacity .3s var(--ease-out-expo),
    transform .28s var(--ease-out-snap)
}

#portfolio .item:hover .stack svg,
#portfolio .item:focus-within .stack svg {
  transform: translate3d(0, 0, .0001px);
  opacity: 1
}

#portfolio .item:hover .stack li:nth-child(1) svg,
#portfolio .item:focus-within .stack li:nth-child(1) svg {
  transition-delay: .1s
}

#portfolio .item:hover .stack li:nth-child(2) svg,
#portfolio .item:focus-within .stack li:nth-child(2) svg {
  transition-delay: .2s
}

#portfolio .item:hover .stack li:nth-child(3) svg,
#portfolio .item:focus-within .stack li:nth-child(3) svg {
  transition-delay: .3s
}

#portfolio .item:hover .stack li:nth-child(4) svg,
#portfolio .item:focus-within .stack li:nth-child(4) svg {
  transition-delay: .4s
}

#portfolio .item:hover .stack li:nth-child(5) svg,
#portfolio .item:focus-within .stack li:nth-child(5) svg {
  transition-delay: .5s
}

@media (pointer: coarse) {

  #portfolio figcaption,
  #portfolio .stack svg {
    transform: none;
    opacity: 1
  }
}

@media (max-width: 496px) {

  #portfolio {
    --item-link-margin-bottom: .75rem;
  }

  #portfolio a {
    white-space: normal;
  }

  #portfolio .stack {
    position: absolute;
    bottom: 2rem
  }
}