.projects-page {
    position: relative;
    z-index: 1;
    background: var(--ink);
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .projects {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1320px;
    margin-inline: auto;
    width: 100%;
  }
  @media (min-width: 860px) {
    .projects { flex-direction: row; }
  }

  .projects-visual {
    position: relative;
    overflow: hidden;
    min-height: 56vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  @media (min-width: 860px) {
    .projects-visual { flex: 1 1 50%; min-height: auto; }
  }

  .projects-visual img {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(.85) contrast(1.05) saturate(.55);
  }
  .projects-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ink), transparent 40%);
    pointer-events: none;
  }
  @media (min-width: 860px) {
    .projects-visual::after {
      background: linear-gradient(to right, transparent 70%, var(--ink));
    }
  }

  .projects-list {
    flex: 1 1 50%;
    padding-block: 40px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .projects-title {
    font-family: var(--f-huge);
    font-weight: var(--huge-weight);
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: -.005em;
    margin: 0 0 8px;
    font-size: clamp(42px, 7vw, 76px);
    color: var(--paper);
  }

  .project-card {
    border: 1px solid #1B1B1B;
    padding: 22px;
  }

  .project-title {
    font-family: var(--f-huge);
    font-weight: var(--huge-weight);
    text-transform: uppercase;
    margin: 0 0 20px;
    font-size: clamp(26px, 4vw, 38px);
    color: var(--paper);
  }

  .player {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .player-toggle {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px solid #1B1B1B;
    background: rgba(7, 7, 7, .78);
    color: var(--ash);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .player-toggle:hover { color: var(--paper); border-color: #303030; }
  .player-toggle::before {
    content: "▶";
    font-size: 13px;
    line-height: 1;
    transform: translateX(1px);
  }
  .player-toggle[aria-pressed="true"]::before {
    content: "❚❚";
    letter-spacing: -2px;
    transform: none;
  }

  .player-track { flex: 1; min-width: 0; }

  .player-bar {
    position: relative;
    height: 3px;
    background: #1B1B1B;
    cursor: pointer;
  }
  .player-progress {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--ash);
  }
  .player-bar:hover .player-progress { background: var(--paper); }

  .player-time {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--ash-dark);
  }