*, :after, :before {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
}

body {
  --color-text: #fffefc;
  --color-bg: #0f1011;
  --color-link: #fffefc;
  --color-link-hover: white;
  --color-gradient: linear-gradient(45deg, #36f, #39f 24%, #cf9efa);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --cursor-stroke: white;
  --cursor-fill: none;
  --cursor-stroke-width: 1px;
  margin: 0;
  font-family: SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  overflow: hidden scroll;
}

.off__canvas {
  background: var(--color-bg);
  width: 100%;
  height: auto;
  max-height: calc(100vh - 4rem - env(safe-area-inset-bottom));
  z-index: 1502;
  flex-direction: column;
  margin: 0;
  transition: all .4s ease-out;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  transform: translate3d(0, -100%, 0);
}

.active .off__canvas {
  transform: translate3d(0, 0, 0);
}

.off__canvas button.close__off-canvas {
  margin: auto;
}

.active:after {
  content: "";
  z-index: 1501;
  background: #0f101180;
  height: 100%;
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.canvas__bottom {
  z-index: 1503;
  background: linear-gradient(#0f101100 0%, #0f1011 100%);
  align-self: auto;
  margin-top: 2.5rem;
  padding-bottom: 4rem;
  position: sticky;
  bottom: 0;
}

.off__canvas .about__text {
  margin-top: 4rem;
}

.about__text {
  max-width: 720px;
  margin: auto;
  padding: 0 1rem;
}

.active body, .oh {
  overflow: hidden;
}

.js .loading:before, .js .loading:after {
  content: "";
  z-index: 5000;
  position: fixed;
}

.js .loading:before {
  background: var(--color-bg);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.js .loading:after {
  opacity: .4;
  background: var(--color-gradient);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  animation: .7s linear infinite alternate forwards loaderAnim;
  top: 50%;
  left: 50%;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(.5, .5, 1);
  }
}

::selection {
  background: #00bae280;
}

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

a:hover {
  color: var(--color-link-hover);
  outline: none;
}

a:focus {
  background: #d3d3d3;
  outline: none;
}

a:focus:not(:focus-visible) {
  background: none;
}

a:focus-visible {
  background: none;
  outline: 2px solid #6219ff;
}

.unbutton {
  font: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.unbutton:focus {
  outline: none;
}

main {
  padding: 0;
}

.cursor {
  display: none;
}

.button {
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-link);
  background: none;
  border: none;
  border-radius: 1rem;
  margin: 0;
  padding: .625rem .75rem;
  font-size: .75rem;
  line-height: 1;
  display: block;
  position: relative;
}

.button:before, .button:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.button.accent {
  background: #3e4042;
  transition: all .2s;
}

.button.accent:hover {
  color: #0f1011;
  background-color: #fff;
}

.button.primary {
  color: #fff;
  font-weight: 700;
}

.button--this > span {
  display: inline-block;
}

.button--this:hover > span {
  opacity: 0;
}

.marquee {
  pointer-events: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.marquee__inner {
  --offset: 1rem;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  width: fit-content;
  transform: translate3d(var(--move-initial), 0, 0);
  opacity: 0;
  animation: 1s linear infinite paused marquee;
  display: flex;
  position: relative;
}

.button--this:hover .marquee__inner {
  opacity: 1;
  transition-duration: .4s;
  animation-play-state: running;
}

.marquee span {
  text-align: center;
  white-space: nowrap;
  padding: .625rem 1rem;
  font-style: italic;
}

.link {
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text);
  font-size: 18px;
  position: relative;
}

.link:after {
  pointer-events: none;
  background: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 100%;
  left: 0;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

.link__graphic {
  pointer-events: none;
  fill: none;
  stroke: var(--color-link);
  stroke-width: 1px;
  position: absolute;
  top: 0;
  left: 0;
}

.link__graphic--stroke path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200px;
}

.link:hover .link__graphic--stroke path {
  stroke-dashoffset: 0;
}

.link__graphic--scribble {
  top: 1.25rem;
}

.link__graphic--scribble path {
  transition: stroke-dashoffset .6s cubic-bezier(.7, 0, .3, 1);
}

.link:hover .link__graphic--scribble path {
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.8, 1, .7, 1);
}

.link--scribble {
  font-size: .875rem;
}

.link--scribble:before {
  display: none;
}

.mono {
  font-family: Space Mono, monospace;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 .5rem;
  font-weight: 400;
  line-height: 1.6;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.2;
}

h5 {
  font-size: 1rem;
  line-height: 1.2;
}

ul {
  flex-flow: column wrap;
  align-items: flex-start;
  row-gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.gradient {
  background-color: #ddd6f3;
  background-image: var(--color-gradient);
}

.site__header {
  z-index: 1500;
  backdrop-filter: blur(16px);
  top: 0;
  background-color: #0f101100;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  padding: 0 1rem 0 .5rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.header__item {
  display: flex;
}

.site-title {
  flex-direction: row;
  place-content: center flex-start;
  align-items: center;
  display: flex;
}

.profile {
  width: 2.5rem;
  height: 2.5rem;
  margin: .5rem;
  position: relative;
}

.gradient-border-mask {
  border-radius: 100%;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
}

.gradient-border-mask:before {
  content: "";
  z-index: -1;
  background: linear-gradient(45deg, #f93 20%, #cf9efa 80%);
  border-radius: 100%;
  position: absolute;
  inset: 0;
  mask: radial-gradient(circle, #0000 63%, #000 64%);
}

.profile img {
  object-fit: cover;
  border-radius: 100%;
  width: 2rem;
  height: 2rem;
  position: absolute;
  inset: 4px;
}

.site__header .title {
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
}

.job__role {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.site__header .job__role span {
  display: none;
}

.type__tag {
  margin-bottom: 1rem;
}

.app__tag {
  color: #f5f8fd;
  background: #161a22;
  border: 1px solid #1f2939;
  border-radius: 2rem;
  align-items: center;
  margin: 0 .5rem .75rem 0;
  padding: .625rem 1.125rem .625rem 1rem;
  display: inline-flex;
}

.app__tag span {
  white-space: nowrap;
  margin-left: .5rem;
  font-size: .875rem;
  line-height: 1;
}

.heading {
  font-size: clamp(2rem, 10vw, 8rem);
  font-weight: 400;
  line-height: 1.2;
}

.heading--item {
  margin: 2rem 1rem 1rem;
}

.heading .splitting .word, .heading .splitting .char {
  display: flex;
}

.heading .splitting .whitespace {
  width: .25em;
  height: 1.2em;
  display: inline-block;
}

.char-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.char {
  will-change: transform;
  display: inline-block;
}

.heading > span {
  justify-content: center;
  font-size: clamp(2rem, 10vw, 8rem);
  display: flex;
}

.heading > span:not(:first-child) {
  margin-top: -.5rem;
}

.item {
  margin: 4rem 0;
}

.item__imgwrap, .content__imgwrap {
  will-change: transform;
  align-items: center;
  width: 100%;
  min-height: 100%;
  max-height: calc(100vh - 4rem);
  display: flex;
  overflow: hidden;
}

.item__img, .content__img {
  will-change: transform;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 120vw;
}

.item__meta {
  text-align: center;
  margin: 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  overflow: hidden;
}

.item__meta .date {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .6875rem;
}

.item__meta-row {
  display: block;
  position: relative;
  overflow: hidden;
}

.item__meta-row span {
  will-change: transform;
}

.type__tag span {
  color: #f5f8fd;
  background-color: #161a22;
  border: 1px solid #1f2939;
  border-radius: 2px;
  margin: .25rem .5rem .25rem 0;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1;
  display: inline-block;
}

.item__enter {
  will-change: transform;
  display: none;
}

.item__enter-circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  will-change: transform, opacity;
}

.item__excerpt {
  text-align: center;
  will-change: transform;
  margin: 0 1rem 1rem;
  line-height: 1.2;
}

.item__excerpt-link {
  cursor: pointer;
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item__excerpt-link span {
  padding-bottom: .75rem;
  display: inline-block;
  position: relative;
}

.item__excerpt-link span:after {
  content: "";
  opacity: .5;
  background: #fff;
  width: 100%;
  height: 1px;
  transition: opacity .3s;
  position: absolute;
  top: calc(100% - .5rem);
  left: 0;
}

.item__excerpt-link span:hover:after {
  opacity: 1;
}

.frame--footer {
  border-top: 1px solid #33333329;
  flex-flow: wrap;
  place-content: center space-between;
  align-items: center;
  padding: 0;
  display: flex;
}

.social__links, .email {
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  display: flex;
}

.social, .email {
  margin: .5rem;
  padding: .5rem;
}

.email {
  font-size: .875rem;
  font-weight: 500;
}

.social .svg__icon, .social .svg__icon svg {
  fill: #fff;
  width: 1rem;
  height: 1rem;
}

.copyright--footer {
  width: 100%;
  padding: .5rem 1rem;
}

.copyright {
  color: #fff;
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
}

.content {
  z-index: 2000;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
}

.content .heading {
  margin: 4rem 0;
  font-size: clamp(2rem, 10vw, 8rem);
  font-weight: 400;
}

.content .heading > span {
  justify-content: center;
  font-size: clamp(2rem, 10vw, 8rem);
}

.content__article {
  height: 0;
  overflow: hidden;
}

.content__article--open {
  pointer-events: auto;
  height: 100%;
  padding: 0 0 20vh;
  overflow-y: scroll;
}

.content__article .heading {
  text-align: center;
}

.content__text {
  will-change: transform;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
}

.section__overview {
  gap: 2rem;
  margin: 4rem 0;
  display: grid;
}

.about__text h4, .about__text p.smaller--paragraph {
  margin-bottom: .25rem;
}

.about__text p, .project__info p, .project__meta p {
  margin-bottom: 1.5rem;
}

.tech__apps {
  margin-top: .75rem;
}

.content__text img {
  max-width: 100%;
  margin: 0 auto .5rem;
  display: block;
}

.project__info, .project__meta, .project__stats {
  padding: 0 1rem;
}

.project__info {
  grid-area: 1 / 1;
  max-width: 800px;
}

.project__meta {
  grid-area: 3 / 1;
}

.project__stats {
  grid-area: 2 / 1;
}

.project__meta h5, .project__stats h5 {
  color: #9aa0a6;
  margin-bottom: 0;
}

.project__stats p {
  font-size: 2rem;
  line-height: 1.2;
}

.project__stats p span {
  font-size: 1.5rem;
}

.project__meta ul {
  margin: .5rem 0 2rem;
}

.site-link {
  color: #9aa0a6;
  transition: color .3s;
}

.site-link:after {
  content: "↗";
  margin-left: .25rem;
}

.section__column--half {
  grid-template-columns: 1fr 1fr;
  gap: 0 .5rem;
  display: grid;
}

.section__column--third {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 .5rem;
  display: grid;
}

.section__design, .section__video, .section__video--full {
  aspect-ratio: auto 16 / 9;
  background-color: #0f1011;
  max-width: 100%;
  margin: 0 auto .5rem;
}

.section__design, .section__video {
  justify-content: center;
  align-items: center;
  display: flex;
}

.section__design img {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  max-height: 900px;
  margin: 0 auto;
}

.section__video video {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  max-height: 720px;
  margin: auto;
}

.section__video--full video {
  width: 100%;
  height: auto;
  display: block;
}

.section__column--half video, .section__column--third video {
  width: 100%;
  height: auto;
}

.content__back {
  opacity: 0;
  cursor: pointer;
  mix-blend-mode: difference;
  color: #fff;
  align-items: center;
  display: flex;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.content__article--open ~ .content__back {
  pointer-events: auto;
}

.triangle--left {
  border-style: solid;
  border-width: 4px 6px 4px 0;
  border-color: transparent var(--color-text) transparent transparent;
  width: 6px;
  height: 8px;
}

.back__button {
  color: var(--color-text);
  margin-left: .5rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 2;
}

@media screen and (width >= 53em) {
  h4 {
    font-size: 1.25rem;
  }

  h5, p, li {
    font-size: 1.125rem;
  }

  .site__header button {
    display: block;
  }

  .site__header .job__role span {
    display: inline-block;
  }

  main {
    padding: 4rem 2rem;
  }

  .item {
    grid-template: "image image image enter" minmax(420px, 60vh)
                   "meta meta meta meta"
                   ". . excerpt ."
                   / 1fr auto auto 1fr;
    margin: 8vh 0 calc(8vh + 4rem);
    display: grid;
    position: relative;
  }

  .item--invert {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas: "enter image image image"
                         "meta meta meta meta"
                         ". . excerpt .";
  }

  .item__imgwrap {
    border-radius: .25rem;
    grid-area: image;
  }

  .item__img {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .item__enter {
    z-index: 1000;
    grid-area: enter;
    justify-content: center;
    place-self: center;
    align-items: center;
    max-width: 400px;
    max-height: 400px;
    display: flex;
    position: relative;
  }

  .item__enter-circle {
    pointer-events: none;
    cursor: pointer;
    flex: none;
  }

  .item__meta {
    text-align: left;
    grid-area: meta;
    justify-self: start;
  }

  .item--invert .item__meta {
    text-align: right;
    justify-self: end;
  }

  .item__excerpt {
    grid-area: excerpt;
    margin: 0;
  }

  .item__excerpt p {
    margin: 0 0 1.5rem;
  }

  .heading--item {
    text-align: center;
    grid-area: 1 / 1 / 2 / 5;
    place-self: center;
    margin: 0;
  }

  .content__back {
    left: 2rem;
  }

  .content__text {
    padding: 0 1rem;
  }

  .section__overview {
    grid-template-columns: 1fr 2fr .75fr;
    gap: 2rem;
    margin: 8vh 0 calc(8vh + 4rem);
  }

  .project__info {
    grid-area: 1 / 2;
  }

  .project__meta {
    grid-area: 1 / 1;
  }

  .project__stats {
    grid-area: 1 / 3;
  }

  .content__text img, .section__design, .section__video, .section__video--full {
    border-radius: .25rem;
    width: 100%;
    margin: 0 auto 1rem;
  }

  .section__column--half, .section__column--third {
    gap: 0 1rem;
  }

  .section__video video, .section__video--full video, .section__column--half video, .section__column--third video {
    border-radius: .25rem;
  }

  .project__stats p {
    font-size: 3rem;
  }

  .project__stats p span {
    font-size: 2.5rem;
  }

  .site-link {
    font-size: 1.125rem;
  }

  .app__tag {
    padding: .75rem 1.25rem .75rem 1.125rem;
  }

  .type__tag span, .app__tag span {
    font-size: 1rem;
  }
}

@media (any-pointer: fine) {
  .cursor {
    pointer-events: none;
    z-index: 5000;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
  }

  .cursor__inner {
    fill: var(--cursor-fill);
    stroke: var(--cursor-stroke);
    stroke-width: var(--cursor-stroke-width);
    opacity: .7;
  }

  .no-js .cursor {
    display: none;
  }
}
/*# sourceMappingURL=index.d046a61c.css.map */