:root {
  /* Keep the project archive on the same solid-surface palette as the My ID page. */
  --surface-card: var(--color-card-prime);
  --surface-card-hover: var(--color-card-prime);
  --surface-field: var(--color-card-mid);
}

#hero {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 0 28px;

  & > .project-spine {
    display: flex;
    grid-row: 1 / span 2;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: 18px;
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--color-card-mid);
    color: var(--color-text-high);

    & > span {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      writing-mode: vertical-rl;
    }

    & > strong {
      font-size: 2.1rem;
      line-height: 1;
      color: var(--color-text-max);
    }
  }

  & > .project-intro {
    max-width: none;
    padding: clamp(26px, 4vw, 46px);
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);
  }

  & > .project-intro :is(.hero-title, .hero-desc) {
    max-width: none;
  }

  & .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;

    & > span {
      padding: 7px 11px;
      border: var(--border-card);
      border-radius: var(--radius-pill);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--color-text-high);
      background: var(--color-card-prime);
    }
  }

  & > .project-brief {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px;
    margin-top: 18px;
    padding: var(--space-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);

    & .brief-kicker {
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text-high);
    }

    & .brief-title {
      margin-top: 10px;
      font-size: 1.45rem;
      line-height: 1.25;
    }

    & .brief-desc {
      margin-top: 10px;
      font-size: 0.96rem;
      line-height: 1.75;
      color: var(--color-text-high);
    }

    & .brief-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: var(--border-card);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--color-card-mid);

      & > div {
        min-height: 78px;
        padding: 14px;
        border-right: var(--border-card);
        border-bottom: var(--border-card);

        &:nth-child(2n) { border-right: 0; }
        &:nth-last-child(-n + 2) { border-bottom: 0; }
      }

      & span, & strong { display: block; }
      & span { font-size: 0.76rem; color: var(--color-text-high); }
      & strong { margin-top: 8px; font-size: 0.9rem; line-height: 1.35; }
    }
  }

  @media (width < 800px) {
    grid-template-columns: 1fr;
    gap: 22px;

    & > .project-spine { display: none; }
    & > .project-brief { grid-template-columns: 1fr; margin-top: 6px; }
  }
}

#catalog {
  &.project-index {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 28px;
    margin-top: 18px;
    padding: var(--space-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);

    & > .index-serial {
      font-size: 0.76rem;
      font-weight: 800;
      line-height: 1.5;
      letter-spacing: 0.12em;
      color: var(--color-text-high);
    }

    & .index-head {
      display: flex;
      gap: 18px;
      align-items: baseline;
      justify-content: space-between;
    }

    & .index-kicker {
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-high);
    }

    & .index-count { font-size: 0.92rem; font-weight: 600; }

    & .index-tags {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 16px;
      gap: 8px;

      & > span {
        padding: 11px 12px;
        border: var(--border-card);
        border-radius: var(--radius);
        background: var(--color-card-mid);
        font-size: 0.82rem;
        line-height: 1.4;
        color: var(--color-text-high);
      }
    }

    @media (width < 800px) {
      grid-template-columns: 1fr;
      gap: 12px;
      & .index-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
  }
}

#archive {
  & .record-stream {
    display: grid;
    gap: 18px;

    & > .dossier-card {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      overflow: hidden;
      border: var(--border-card);
      border-radius: var(--radius-card);
      background: var(--surface-card);
      transition:
        transform var(--motion-fast),
        background var(--motion-fast),
        border-color var(--motion-fast);
      &:hover {
        border-color: var(--line-strong);
        background: var(--surface-card-hover);
      }
      & > .dossier-rail {
        padding: 28px 18px 28px 24px;
        border-right: 1px solid var(--color-line);
        background: var(--color-card-mid);
        & > .record-code {
          font-size: 1.38rem;
          font-weight: 800;
          line-height: 1;
          color: var(--color-text-max);
        }
      }
      & > .dossier-main {
        padding: 28px;
        & > .dossier-head {
          display: flex;
          flex-wrap: wrap;
          gap: 18px;
          align-items: flex-start;
          justify-content: space-between;
          & .record-kicker {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-text-high);
          }
          & .record-title {
            margin-top: 8px;
            font-size: clamp(1.35rem, 2vw, 1.82rem);
            font-weight: 800;
            line-height: 1.2;
            color: var(--color-text-max);
          }
          & .record-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            & > :is(.period-chip, .status-badge) {
              display: inline-flex;
              align-items: center;
              min-height: 34px;
              padding: 0 14px;
              border: var(--border-card);
              border-radius: var(--radius-pill);
              font-size: 0.85rem;
              font-weight: 600;
              color: var(--color-text-high);
              background: var(--color-card-prime);
              &.completed {
                color: var(--color-text-prime);
                background: var(--color-card-max);
              }
            }
          }
        }
        & > .record-abstract {
          max-width: 100ch;
          margin-top: 18px;
          font-size: 0.98rem;
          line-height: 1.82;
          color: var(--color-text-high);
        }
        & > .fact-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin-top: 18px;
          & > .fact-item {
            padding: 16px;
            border: 1px solid var(--color-line);
            border-radius: var(--radius);
            background: var(--surface-field);
            & > .fact-label {
              font-size: 0.78rem;
              font-weight: 800;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: var(--color-text-high);
            }
            & > .fact-value {
              display: block;
              margin-top: 8px;
              font-size: 0.92rem;
              font-weight: 600;
              line-height: 1.7;
              color: var(--color-text-max);
            }
          }
        }
        & > .record-foot {
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          padding-top: 18px;
          border-top: 1px solid var(--color-line);
          & > .record-foot-note {
            line-height: 1.82;
            color: var(--color-text-high);
          }
          & > .record-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            & > .record-link {
              font-size: 0.9rem;
              font-weight: 800;
              color: var(--color-text-max);
              &::after {
                content: " -> ";
              }
              &:hover {
                transform: translateX(-4px);
              }
            }
          }
        }
      }
    }
    @media (width < 800px) {
      & > .dossier-card {
        grid-template-columns: 1fr;
        & > .dossier-rail {
          display: flex;
          gap: 16px;
          align-items: baseline;
          justify-content: space-between;
          padding: 22px;
          border-right: 0;
          border-bottom: 1px solid var(--color-line);
          & > .record-year {
            margin-top: 0;
            text-align: right;
          }
        }
        & > .dossier-main {
          padding: 22px;
          & > .fact-grid {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}

#method {
  & > .method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    & > .method-card {
      padding: 24px;
      border: var(--border-card);
      border-radius: var(--radius-card);
      background: var(--surface-card);
      & > .method-index {
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-text-max);
      }
      & > .method-title {
        margin-top: 18px;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1.45;
        color: var(--color-text-max);
      }
      & > .method-desc {
        margin-top: 10px;
        font-size: 0.94rem;
        line-height: 1.82;
        color: var(--color-text-high);
      }
    }
    @media (width < 800px) {
      grid-template-columns: 1fr;
      & > .method-card {
        padding: 22px;
      }
    }
  }
}