html {
  overflow-x: hidden;
}

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

body.works-room {
  min-height: 100%;
  overflow-x: hidden;

  background: #070605;
  color: var(--color-text);
  font-family: var(--font-sans);
}


/* ---------- Hero ---------- */

.works-page {
  min-height: 100svh;
  padding: 12vh 6vw 14vh;
}

.works-layout {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns:
      var(--curator-column)
      1fr;

  gap: var(--gallery-gap);
}

.works-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  filter:
    brightness(.78)
    contrast(1.03)
    saturate(.92);
}


/* ---------- Text ---------- */

.works-label,
.works-meta {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(245,243,238,.46);
}

.works-info {
  min-width: 380px;
}

.works-info h1 {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.works-meta {
  margin-top: 1.25rem;
}

.works-description {
  margin-top: 2.4rem;
  max-width: var(--reading-width);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(245,243,238,.68);
}

.works-production-note {
  margin-top: 1rem;

  font-size: .78rem;
  line-height: 1.6;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: rgba(245,243,238,.45);
}


/* ---------- Curator Note ---------- */

.works-statement {
  width: min(82vw,760px);

  margin: 8vh auto 0;

  text-align: center;
}

.works-curator-note {
  width: 100%;
  max-width: none;

  margin: 0 auto;

  font-size: clamp(.95rem,1.1vw,1.1rem);
  line-height: 1.85;
  letter-spacing: .025em;

  color: rgba(245,243,238,.76);
}


/* ---------- Footer ---------- */

.works-footer-bar {
  width: min(100%,1200px);

  margin: 8vh auto 0;
  padding: 1.5rem 0;

  border-top: 1px solid rgba(245,243,238,.14);

  display: grid;
  grid-template-columns: repeat(5,1fr);

  gap: 2rem;
  align-items: start;
}


/* ---------- Gallery ---------- */

.works-gallery {
  width: min(88vw, 1400px);
  margin: 8vh auto 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;

  gap: 5rem 3.5rem;
}

.work-card {
  margin: 0;
}

.work-card img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;

  filter: brightness(.92) contrast(1.05) saturate(.95);
}

.work-card figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,243,238,.55);
}

.work-card small,
.work-card em {
  display: block;
  margin-top: .35rem;
  font-style: normal;
  font-size: .62rem;
  line-height: 1.5;
  letter-spacing: .14em;
  color: rgba(245,243,238,.36);
}

.work-card em,
.photo-card em {
  display: block;
  margin-top: .45rem;
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245,243,238,.34);
}

.work-title {
    display: block;

    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .04em;

    color: rgba(245,243,238,.88);
}

.work-medium,
.work-year {
    display: block;

    margin-top: .3rem;

    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(245,243,238,.46);
}

.work-availability {
    display: block;

    margin-top: .9rem;

    font-style: normal;
    font-size: .54rem;
    letter-spacing: .22em;
    text-transform: uppercase;

    color: rgba(245,243,238,.22);
    transition: color .25s ease;
}

.work-card:hover .work-availability {
    color: rgba(245,243,238,.38);
}