:root {
  --color-article-width: 1420px;
  --color-reading-width: 760px;
  --color-section-gap: clamp(84px, 10vw, 156px);
  --color-media-gap: clamp(48px, 7vw, 110px);
  --color-copy: rgba(241, 238, 231, .72);
  --color-line: rgba(241, 238, 231, .14);
}

.color-ballroom-page {
  background: #070707;
  color: var(--ivory);
}

.color-ballroom-page .journal-article {
  max-width: var(--color-article-width);
  padding-bottom: clamp(86px, 9vw, 138px);
}

.color-ballroom__opening {
  border-bottom: 1px solid var(--color-line);
  max-width: 1140px;
  padding-bottom: clamp(72px, 8vw, 118px);
}

.color-ballroom__opening .journal-article__date {
  margin-bottom: 30px;
}

.color-ballroom__opening .journal-article__title {
  font-size: clamp(58px, 7.4vw, 112px);
  line-height: .92;
  max-width: 11.5ch;
}

.color-ballroom__intro {
  color: rgba(241, 238, 231, .9);
  font: 400 clamp(23px, 2vw, 33px)/1.55 "Playfair Display", Georgia, serif;
  margin: clamp(42px, 5vw, 72px) 0 0;
  max-width: var(--color-reading-width);
}

.color-ballroom__section {
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: var(--color-media-gap);
  grid-template-areas: "media copy";
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  padding: var(--color-section-gap) 0;
}

.color-ballroom__section--reverse {
  grid-template-areas: "copy media";
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1.05fr);
}

.color-ballroom__media {
  align-items: center;
  background: #050505;
  border: 1px solid rgba(241, 238, 231, .1);
  display: flex;
  grid-area: media;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}

.color-ballroom__media img {
  display: block;
  height: auto;
  max-height: 820px;
  object-fit: contain;
  object-position: 50% 50%;
  transition: filter .7s ease, transform .8s ease;
  width: 100%;
}

.color-ballroom__media--psychology img { object-position: 50% 50%; }
.color-ballroom__media--personal img { object-position: 50% 45%; }
.color-ballroom__media--floor img { object-position: 50% 50%; }
.color-ballroom__media--lighting img { object-position: 50% 50%; }

.color-ballroom__copy {
  grid-area: copy;
  max-width: 610px;
}

.color-ballroom__topic + .color-ballroom__topic {
  border-top: 1px solid var(--color-line);
  margin-top: clamp(44px, 5vw, 70px);
  padding-top: clamp(44px, 5vw, 70px);
}

.color-ballroom__topic h2,
.color-ballroom__conclusion h2 {
  color: var(--ivory);
  font: 500 clamp(31px, 3.1vw, 50px)/1.08 "Playfair Display", Georgia, serif;
  margin: 0 0 clamp(24px, 2.5vw, 34px);
}

.color-ballroom__topic p,
.color-ballroom__conclusion p {
  color: var(--color-copy);
  font: 400 clamp(16px, 1.2vw, 19px)/1.82 "DM Sans", Arial, sans-serif;
  margin: 0;
}

.color-ballroom__conclusion {
  border-bottom: 1px solid var(--color-line);
  margin: 0 auto;
  max-width: 960px;
  padding: var(--color-section-gap) 0;
}

.color-ballroom__conclusion h2 {
  font-size: clamp(37px, 4.4vw, 68px);
  max-width: 15ch;
}

.color-ballroom__conclusion p {
  max-width: var(--color-reading-width);
}

.color-ballroom-page .journal-return {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.color-ballroom-page a:focus-visible {
  outline: 1px solid var(--ivory);
  outline-offset: 7px;
}

@media (hover: hover) {
  .color-ballroom__media:hover img {
    filter: brightness(1.04);
    transform: scale(1.01);
  }
}

@media (max-width: 1100px) {
  .color-ballroom__section,
  .color-ballroom__section--reverse {
    gap: clamp(38px, 5vw, 62px);
    grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  }

  .color-ballroom__opening .journal-article__title {
    font-size: clamp(55px, 8vw, 86px);
  }
}

@media (max-width: 780px) {
  .color-ballroom-page .journal-article {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 136px;
  }

  .color-ballroom__opening {
    padding-bottom: 76px;
  }

  .color-ballroom__opening .journal-article__date {
    margin-bottom: 24px;
  }

  .color-ballroom__opening .journal-article__title {
    font-size: clamp(46px, 13.5vw, 70px);
    max-width: 12ch;
  }

  .color-ballroom__intro {
    font-size: clamp(22px, 6.5vw, 29px);
    margin-top: 38px;
  }

  .color-ballroom__section,
  .color-ballroom__section--reverse {
    gap: 44px;
    grid-template-areas:
      "media"
      "copy";
    grid-template-columns: 1fr;
    padding: 82px 0;
  }

  .color-ballroom__copy {
    max-width: none;
  }

  .color-ballroom__topic + .color-ballroom__topic {
    margin-top: 44px;
    padding-top: 44px;
  }

  .color-ballroom__media img {
    max-height: none;
  }

  .color-ballroom__conclusion {
    padding: 82px 0;
  }

  .color-ballroom__conclusion h2 {
    font-size: clamp(34px, 10vw, 50px);
  }

  .color-ballroom-page .journal-return {
    margin-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-ballroom__media img {
    transition: none;
  }
}