:root {
        color-scheme: light;
        --background: #ededed;
        --ink: #000000;
        --page-left: 22px;
        --content-top: 156px;
        --item-font-size: 80px;
        --item-line-height: 110px;
        --item-height: 130px;
        --item-gap: 20px;
        --group-gap: 80px;
      }

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

      html {
        min-width: 320px;
        background: var(--background);
      }

      body {
        min-width: 320px;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
        color: var(--ink);
        background: var(--background);
        font-family: "Source Serif 4", Georgia, serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      .home {
        position: relative;
        min-height: 1886px;
        background: var(--background);
      }

      .brand {
        position: fixed;
        top: 32px;
        left: 32px;
        z-index: 100;
        display: block;
        width: 146.28px;
        height: 80px;
      }

      .brand img {
        display: block;
        width: 146.28px;
        height: 80px;
      }

      .home-content {
        position: absolute;
        top: var(--content-top);
        left: var(--page-left);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--group-gap);
      }

      .project-list,
      .about-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--item-gap);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .project-link,
      .about-link {
        display: flex;
        height: var(--item-height);
        align-items: center;
        justify-content: center;
        padding: 10px;
        color: inherit;
        font-size: var(--item-font-size);
        font-weight: 400;
        line-height: var(--item-line-height);
        text-decoration: none;
        text-transform: lowercase;
        white-space: nowrap;
      }

      .project-link:hover,
      .project-link:focus-visible,
      .about-link:hover,
      .about-link:focus-visible {
        text-decoration-line: underline;
        text-decoration-thickness: 0.06em;
        text-underline-offset: 0.06em;
      }

      .project-link:focus-visible,
      .about-link:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
      }

      .signature {
        display: flex;
        min-width: 584px;
        height: 240px;
        align-items: center;
        justify-content: flex-start;
        padding: 10px;
        opacity: 0.24;
        font-size: var(--item-font-size);
        font-weight: 500;
        line-height: var(--item-line-height);
        text-transform: lowercase;
        white-space: nowrap;
      }

      .signature p {
        margin: 0;
      }

      @media (max-width: 960px) {
        :root {
          --item-font-size: 24px;
          --item-line-height: 33px;
          --item-height: 53px;
          --item-gap: 0px;
          --group-gap: 44px;
        }

        .home {
          min-height: 820px;
        }

        .signature {
          min-width: 210px;
          height: 86px;
        }

        .project-link,
        .about-link {
          font-weight: 500;
        }
      }