@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/firamono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

:root {
  --color-primary: #444e55;
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 87.5%, black);
  --color-secondary: white;

  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
  --ease-emphasis: cubic-bezier(.22, .61, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-in-expo: cubic-bezier(.895, .03, .685, .22);
  --ease-out-expo: cubic-bezier(.165, .84, .44, 1);
  --ease-out-snap: cubic-bezier(.600, -0.280, .735, 0.045);

  --font-body: 1rem;
  --font-name: min(1.4375rem + .5vw, 1.625rem);
  --font-title: min(.890625rem + .375vw, 1.03125rem);
  --font-p: 1.1875rem;
  --font-about-heading: min(2.125rem + 1vw, 3.125rem);
  --font-button: min(1.1875rem + .625vw, 1.3125rem);
  --font-portfolio-count: .625rem;
  --font-item-link: min(1.875rem + 1vw, 3rem);
  --font-item-desc: min(.875rem + .625vw, 1.125rem);

  --item-link-margin-bottom: 1.25rem;

  --portfolio-list-padding-top: min(8rem + 8vw, 15rem);
  --portfolio-list-padding-bottom: min(8rem + 2vw, 10rem);
  --portfolio-item-margin-bottom: min(1rem + 4.5vw, 5rem);
  --portfolio-item-counter-left: max(-2rem, -1rem - 1vw);
  --portfolio-list-gradient: linear-gradient(180deg, var(--color-primary) 60%, #ffffff00);

  --z-header: 4;
  --z-portfolio: 3;
  --z-popover-close: 2;
  --z-gradient-and-popover: 1;

  --container-width: 58rem;
  --container-padding: min(8vw, 9rem);

  --header-padding-top: 2.125rem;
  --title-name-padding: .15rem;
  --title-name-margin: .5rem;

  --about-content-gap: 1.5rem;
}

html {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--color-primary);
}

html:has(:popover-open) {
  overflow: hidden
}

::selection {
  background-color: var(--color-primary-dark);
  color: var(--color-secondary)
}

body {
  margin: unset;
  color: var(--color-secondary);
  font-family: Figtree, sans-serif;
  font-size: var(--font-body);
  line-height: 1
}

button {
  background-color: unset;
  border: unset;
  padding: unset;
  color: inherit;
  font: inherit;
  cursor: pointer;
  font-variation-settings: 'wght' 540;
  text-transform: lowercase;
  font-size: var(--font-button)
}

h1 {
  letter-spacing: -.01em;
  margin: 0 0 var(--title-name-margin) -1px;
  font-size: var(--font-name);
  font-variation-settings: 'wght' 550;
  line-height: 1
}

h2 {
  text-transform: uppercase;
  margin-block: 0;
  font-size: var(--font-title);
  font-variation-settings: 'wght' 350;
  line-height: 1
}

p {
  margin: unset;
  font-size: var(--font-p);
  font-variation-settings: 'wght' 300
}

a {
  color: var(--color-secondary);
  text-decoration: none
}

a:focus-visible,
button:focus-visible {
  outline: 1.75px solid var(--color-secondary);
  outline-offset: 1.5px;
  border-radius: 4px
}

.item__link:focus-visible {
  outline-offset: 4px
}

ul {
  margin: unset
}

.overflow {
  overflow: hidden
}

main,
header,
[popover] {
  padding-inline: var(--container-padding);
  margin: 0 auto;
  max-width: var(--container-width);
}

header {
  z-index: var(--z-header);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--header-padding-top) var(--container-padding) 0;
  background-color: var(--color-primary);
  display: flex;
  position: fixed;
  inset: 0 0 auto;
}

.header__title {
  white-space: nowrap;
}

.title__name {
  text-transform: lowercase;
  padding-inline: var(--title-name-padding)
}

.about__content {
  z-index: var(--z-gradient-and-popover);
  grid-row-gap: var(--about-content-gap);
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  line-height: 1.5;
  display: flex;
  position: relative
}

.about__content .overflow:first-child {
  margin-bottom: var(--about-content-gap)
}

.about__heading {
  transform-origin: 50%;
  letter-spacing: -.02em;
  text-transform: none;
  font-size: var(--font-about-heading);
  font-variation-settings: 'wght' 450;
  line-height: 1.15;
  transform: none
}

.about__btn {
  color: var(--color-secondary);
  text-decoration: underline
}

[popover] {
  border: unset;
  padding-block: var(--header-padding-top);
  background-color: var(--color-primary);
  color: var(--color-secondary);
  height: auto;
  transition:
    display .42s allow-discrete,
    overlay .42s allow-discrete,
    opacity .42s var(--ease-emphasis);
  opacity: 0
}

::backdrop {
  display: none
}

:popover-open {
  opacity: 1;

  @starting-style {
    opacity: 0
  }
}

[popovertargetaction='show'] {
  letter-spacing: .003125rem;
}

[popovertargetaction='hide'] {
  z-index: var(--z-popover-close);
  position: absolute;
  right: var(--container-padding);
  letter-spacing: .03125rem;
  overflow: hidden;
  display: inline-flex;
}

[popovertargetaction='hide'] span {
  display: inline-block;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-out-back)
}

:popover-open [popovertargetaction='hide'] span {
  transform: translateY(0);

  @starting-style {
    transform: translateY(-100%);
  }
}

[popovertargetaction='hide'] span:nth-child(2) {
  transition-delay: .06s;
}

[popovertargetaction='hide'] span:nth-child(3) {
  transition-delay: .12s;
}

[popovertargetaction='hide'] span:nth-child(4) {
  transition-delay: .18s;
}

[popovertargetaction='hide'] span:nth-child(5) {
  transition-delay: .24s;
}

[popover]:not(:popover-open) [popovertargetaction='hide'] span {
  transform: translateY(100%)
}

.about__heading,
.about__content p {
  transform: translateY(100%);
  transition: transform .7s var(--ease-out-back)
}

:popover-open .about__heading,
:popover-open .about__content p {
  transform: translateY(0);

  @starting-style {
    transform: translateY(100%);
  }
}

[popover]:not(:popover-open) .about__heading,
[popover]:not(:popover-open) .about__content p {
  transition-delay: .6s;
  transition-duration: 0s;
}

.portfolio {
  z-index: var(--z-portfolio);
  position: relative
}

.portfolio__list {
  padding-top: var(--portfolio-list-padding-top);
  padding-bottom: var(--portfolio-list-padding-bottom);
  padding-left: unset;
  list-style: none;
  counter-reset: portfolio-counter
}

.portfolio__list::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 11rem;
  pointer-events: none;
  background-image: var(--portfolio-list-gradient);
  z-index: var(--z-gradient-and-popover)
}

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

.in-view {
  opacity: 1;
  transform: none;
}

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

.item__link {
  color: var(--color-secondary);
  letter-spacing: -.01em;
  -webkit-text-stroke-width: .075rem;
  -webkit-text-stroke-color: transparent;
  margin-bottom: var(--item-link-margin-bottom);
  font-size: var(--font-item-link);
  transition: -webkit-text-stroke-color .3s var(--ease-in-expo), color .3s var(--ease-in-expo);
  display: inline-block;
  font-variation-settings: 'wght' 450;
}

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

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

.portfolio__list--item:hover .item__link--desc {
  transform: translateY(0)
}

.portfolio__list--item:not(:hover) .item__link--desc {
  transition: transform .3s var(--ease-out-snap)
}

@media (pointer: coarse) {
  .item__link--desc {
    transform: none
  }
}