@font-face {
  font-family: "Darker Grotesque";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/darker-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mynerve";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mynerve-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #ffffff;
  --text: #524646;
  --accent: #EC5B38;
  --studio: oklch(58.5% 0.233 277.117);
  --font: "Darker Grotesque", system-ui, sans-serif;
  --max-width: 640px;
  --tracking: -0.02em;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --text: #eeeeee;
    --accent: #EC5B38;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: geometricPrecision;
}

body.studio-hover {
  background: lch(from var(--studio) l c h / 2%);

  .skip-link,
  header,
  main > section:not(#links),
  footer,
  #links a:not(.studio-link) {
    opacity: 0.5;
    color: var(--studio);
  }

  .hero-lines span {
    background: var(--studio);
  }

  .hero-header p span:nth-child(2) {
    color: var(--studio);
  }
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

.handwriting {
  font-family: "Mynerve", cursive;
  font-weight: 400;
  font-style: normal;
}

main {
  max-width: var(--max-width);
  margin-inline: auto;
  margin-block-end: 4rem;

  > section {
    margin-block-end: 2rem;
    border-bottom: 1px solid lch(from var(--text) l c h / 20%);
    padding-block-end: 2rem;
  }
}


.hero {
  display: flex;
  flex-direction: column;
  align-items: end;
  padding-inline: 0;
  padding-block-start: 4rem;
  gap: 4rem;

  .hero-lines {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;

    span {
      width: 1px;
      height: 100%;
      background: var(--text);
      display: block;
      position: relative;
      transition: background-color 0.1s linear;

      &:nth-child(7) {
        transform: scaleX(2) scaleY(1.1);
        background: var(--accent);
      }

      &::before, &::after {
        content: '';
        width: 3px;
        height: 100%;
        background: transparent;
        display: block;
        position: absolute;
        top: 0;
      }

      &::before {
        left: -3px;
      }

      &::after {
        right: -3px;
      }

      &:hover {
        transform: scaleX(6) scaleY(1.1);
        background: var(--accent);

        &::before {
          transform: scaleX(0.2) translateX(6px);
        }

        &::after {
          transform: scaleX(0.2) translateX(-6px);
        }
      }


    }
  }

  .section-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hero-header {
    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      letter-spacing: var(--tracking);
    }

    p {
      font-size: 1.4rem;
      letter-spacing: var(--tracking);
      font-weight: 500;

      span {
        display: block;

        &:nth-child(2) {
          color: lch(from var(--text) l c h / 50%);
          margin-top: -8px;
        }
      }
    }

  }

  .hero-content {
    max-width: 100%;

    p {
      font-size: 1.7rem;
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: -0.01rem;
      color: lch(from var(--text) l c h / 80%);

      span {
        font-weight: 600;
        color: lch(from var(--text) l c h / 100%);
      }
    }
  }

}


.links {
  min-height: 5rem;

  .section-inner {
    height: 100%;
    width: 100%;

    ul {
      display: flex;
      flex-direction: column;
      gap: 0;
      height: 100%;

      li {
        list-style: none;
      }

      a {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        position: relative;
        padding-block: 0.5rem;
        font-size: 1.4rem;

        span {
          display: block;
          font-weight: 500;
        }
        
        .handwriting {
          font-size: 1.1rem;
          letter-spacing: var(--tracking);
          opacity: .8;
          margin-top: -4px;
        }

        &:hover {
          color: var(--accent);

          .handwriting {
            opacity: 1;
          }

          svg {
            transform: rotate(-45deg);
          }
        }

        &.studio-link {

          &:hover {
            color: var(--studio);


          }
        }

      }
    }
  }
}


.projects {
  position: relative;

  .section-inner {
    display: flex;
  }

  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  li {
    flex: 1;

    &:last-child {
      border-right: none;
    }
  }

  .project-link {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding-block: 1rem;


    .project-text {
      width: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;

      h3 {
        font-size: 1.4rem;
        font-weight: 500;
      }

      .handwriting {
        font-size: 1.1rem;
        font-weight: 400;
        opacity: .8;
        letter-spacing: var(--tracking);
      }
    }


    &:hover {
      color: var(--accent);

      .handwriting {
        opacity: 1;
      }

      svg {
        transform: rotate(-45deg);
      }
    }
  }

  .project-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}


.footer {
  max-width: var(--max-width);
  margin-inline: auto;
  margin-block-end: 4rem;

  p {
    display: flex;
    flex-direction: column;

    span {
      font-size: 1.4rem;
      font-weight: 500;

      &:last-child {
        font-size: 1.2rem;
        margin-top: -8px;
      }
    }
  }
}




@media (max-width: 640px) {
  main, footer {
    width: 100vw;
    padding-inline: 2rem;
  }

  .projects {
    & .project-link {
        & .project-text {
            .handwriting {
                font-weight: 400;
                letter-spacing: var(--tracking);
            }
        }
    }
}
}