:root {
        color-scheme: light;
        --background: #ededed;
        --ink: #000;
        --highlight: #faff00;
      }

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

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

      html::-webkit-scrollbar {
        display: none;
      }

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

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

      .brand img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .portfolio-page {
        min-height: 2100px;
        padding: 156px 32px 80px 22px;
      }

      .portfolio-grid {
        display: grid;
        grid-template-columns: minmax(282px, 282fr) minmax(0, 768fr) minmax(272px, 272fr);
        gap: 32px;
        padding-top: 10px;
        align-items: start;
      }

      .sidebar {
        position: fixed;
        top: 156px;
        left: 22px;
        z-index: 90;
        grid-column: 1;
        grid-row: 1 / span 3;
        max-height: calc(100vh - 156px);
        min-width: 0;
        overflow-y: auto;
        scrollbar-width: none;
      }

      .sidebar::-webkit-scrollbar {
        display: none;
      }

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

      .project-link,
      .about-link {
        display: block;
        padding: 10px;
        color: inherit;
        font-size: 24px;
        font-weight: 400;
        line-height: 33px;
        text-decoration: none;
        text-transform: lowercase;
        white-space: nowrap;
      }

      .project-link[aria-current="page"] {
        font-style: italic;
        font-weight: 650;
      }

      .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;
      }

      a:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 3px;
      }

      .about-list {
        margin-top: 44px;
      }

      .signature {
        padding: 10px;
        opacity: 0.24;
        font-size: 24px;
        font-weight: 400;
        line-height: 33px;
        text-transform: lowercase;
        white-space: nowrap;
      }

      .signature p {
        margin: 0;
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .case-row {
        display: contents;
      }

      .case-media {
        grid-column: 2;
        min-width: 0;
      }

      .case-description {
        grid-column: 3;
        min-width: 0;
      }

      .case-image,
      .case-video {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      .case-video {
        background: #fff;
        pointer-events: none;
      }

      .case-description {
        min-width: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 23px;
        text-transform: lowercase;
      }

      .case-description p + p {
        margin-top: 14px;
      }

      .case-description h2 {
        display: table;
        width: auto;
        margin: 0 0 16px;
        background: var(--highlight);
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
      }

      .case-description p {
        margin: 0;
      }

      @media (max-width: 1050px) {
        .portfolio-page {
          padding-right: 22px;
        }

        .portfolio-grid {
          grid-template-columns: 220px minmax(0, 1fr);
        }

        .case-description {
          grid-column: 2;
        }
      }

      @media (max-width: 680px) {
        .portfolio-page {
          min-height: 100vh;
          padding: 128px 20px 64px;
        }

        .portfolio-grid,
        .case-row {
          display: block;
        }

        .sidebar {
          position: static;
          margin-bottom: 48px;
          max-height: none;
          overflow: visible;
        }

        .project-list {
          display: block;
        }

        .project-link,
        .about-link,
        .signature {
          padding-left: 0;
          font-size: 20px;
          line-height: 28px;
        }

        .about-list {
          margin-top: 20px;
        }

        .case-row {
          margin-bottom: 48px;
        }

        .case-media {
          margin-bottom: 16px;
        }
      }