:root {
  /* Keep the record 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 {
  display: block;

  & > .gallery-cover {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    min-height: 420px;
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-card);
  }

  & .gallery-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 5vw, 66px);
    background: var(--surface-card);
  }

  & .gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;

    & > span { padding: 7px 10px; 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); }
  }

  & .gallery-window {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 100%;
    padding: 28px;
    overflow: hidden;
    border-left: var(--border-card);
    background:
      linear-gradient(135deg, transparent 49%, var(--color-card-prime) 50%),
      repeating-linear-gradient(90deg, transparent 0 25px, rgba(255, 255, 255, 0.08) 26px);

    &::before { content: ""; position: absolute; inset: 30px; border: 1px solid var(--color-line); }
    & > span { position: relative; font-size: clamp(2rem, 5vw, 4.6rem); font-weight: 800; line-height: 0.82; letter-spacing: -0.06em; color: var(--color-text-max); }
  }

  & > .gallery-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  & .gallery-stat-title, & .gallery-stat { padding: 18px; border: var(--border-card); border-radius: var(--radius-card); background: var(--surface-card); }
  & .gallery-stat-title > span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-high); }
  & .gallery-stat-title > h2 { margin-top: 8px; font-size: 1.1rem; }
  & .gallery-stat-title > p { margin-top: 6px; font-size: 0.84rem; line-height: 1.5; color: var(--color-text-high); }
  & .gallery-stat > span, & .gallery-stat > strong { display: block; }
  & .gallery-stat > span { font-size: 0.74rem; color: var(--color-text-high); }
  & .gallery-stat > strong { margin-top: 8px; font-size: 0.92rem; line-height: 1.35; }

  @media (width < 800px) {
    padding-top: 44px;
    & > .gallery-cover { grid-template-columns: 1fr; }
    & .gallery-window { min-height: 240px; border-top: var(--border-card); border-left: 0; }
    & > .gallery-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .gallery-stat-title { grid-column: 1 / -1; }
  }

  @media (width < 600px) {
    & > .gallery-stats { grid-template-columns: 1fr; }
  }
}

#catalog {
  &.gallery-index {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    margin-top: 20px;
    overflow: hidden;
    border: var(--border-card);
    border-radius: var(--radius-card);
    background: var(--surface-card);

    & > .gallery-index-head {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
      padding: 18px;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-high);
      & > strong { font-size: 0.92rem; letter-spacing: 0; color: var(--color-text-max); }
    }

    & > .gallery-ribbon {
      display: flex;
      gap: 0;
      overflow-x: auto;
      border-left: var(--border-card);

      & > span { flex: 0 0 auto; padding: 16px; border-right: var(--border-card); font-size: 0.82rem; color: var(--color-text-high); white-space: nowrap; }
    }

    @media (width < 800px) {
      grid-template-columns: 1fr;
      & > .gallery-index-head { flex-direction: row; align-items: center; }
      & > .gallery-ribbon { border-left: 0; }
    }
  }
}

#title {
  @media (width < 800px) {
    margin-bottom: 0;
  }
}

#album {
  & > .gallery-pagination {
    margin-bottom: 18px;

    & > .gallery-page-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding-bottom: 2px;
      min-width: 0;
    }

    & .gallery-page {
      flex: 0 0 auto;
      min-height: 48px;
      border: var(--border-card);
      border-radius: var(--radius-pill);
      color: var(--color-text-high);
      background: var(--surface-card);
      font: inherit;
      font-size: 0.98rem;
      font-weight: 700;
      cursor: pointer;
      transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);

      &:hover:not(:disabled),
      &[aria-current="page"] {
        border-color: var(--line-strong);
        color: var(--color-text-max);
        background: var(--color-card-mid);
      }

    }

    & .gallery-page {
      max-width: min(320px, 72vw);
      padding: 0 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @media (width < 800px) {
    margin-top: 0;
  }

  & > .album-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    & > .media-card {
      min-width: 0;
      overflow: hidden;
      padding: 16px;
      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);
        transform: translateY(-2px);
        & > .media-container > :is(img, video) {
          transform: scale(1.035);
        }
      }
      & > .media-top {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        & > .media-code {
          font-size: 0.8rem;
          font-weight: 800;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--color-text-high);
        }
        & > .media-type {
          display: inline-flex;
          align-items: center;
          min-height: 30px;
          padding: 0 11px;
          border: var(--border-card);
          border-radius: var(--radius-pill);
          font-size: 0.76rem;
          font-weight: 600;
          white-space: nowrap;
          color: var(--color-text-high);
          background: var(--color-card-prime);
        }
      }
      & > .media-container {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        background: rgb(8, 8, 8);
        & > :is(img, video) {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transition: transform var(--motion-medium);
        }
      }
      & > .media-body {
        margin-top: 14px;
        & > .media-head {
          display: flex;
          gap: 14px;
          align-items: flex-start;
          justify-content: space-between;
          & > .card-title {
            min-width: 0;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.35;
            color: var(--color-text-max);
          }
        }
        & > .card-desc {
          margin-top: 10px;
          font-size: 0.88rem;
          line-height: 1.72;
          color: var(--color-text-high);
        }
      }
    }
    @media (width < 800px) {
      grid-template-columns: 1fr;
      gap: 14px;
      & > .media-card {
        padding: 14px;
      }
    }
  }
}