/* The case study inherits the approved walkthrough palette and type. */
.lobby-study {
  border-top: 1px solid #373b37;
  background: #101210;
  color: #fafafa;
}

.lobby-study__inner {
  width: min(calc(100% - 2 * var(--gutter)), 78rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5.5vw, 5.75rem) clamp(2.75rem, 6.5vw, 6rem);
}

.lobby-study__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 5vw, 5.25rem);
  align-items: center;
}

.lobby-study__eyebrow,
.lobby-study figcaption {
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #b3bdb1;
}

.lobby-study h2,
.lobby-study h3 {
  margin: 0;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.072em;
}

.lobby-study h2 {
  margin-block: clamp(.6rem, 1.4vw, 1.25rem);
  font-size: clamp(3.6rem, 7.9vw, 8.25rem);
}

.lobby-study__summary,
.lobby-study__detail-copy > p:last-child {
  max-width: 35ch;
  color: #d2d6cf;
  line-height: 1.58;
  font-size: clamp(1rem, 1.25vw, 1.17rem);
}

.lobby-study__index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: clamp(.65rem, 2vw, 1.5rem);
}

.lobby-study__index a,
.lobby-study__credit a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  color: inherit;
  font-size: .875rem;
}

.lobby-study__figure {
  margin: 0;
  min-width: 0;
}

.lobby-study__figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #222620;
}

.lobby-study__wide { width: min(100%, 700px); }

.lobby-study figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin-top: .65rem;
  letter-spacing: .04em;
  text-transform: none;
}

.lobby-study__details {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-top: clamp(2.25rem, 5vw, 5rem);
  margin-top: clamp(2.25rem, 6vw, 6rem);
  border-top: 1px solid #41463e;
}

.lobby-study__detail {
  min-width: 0;
  scroll-margin-top: 1.5rem;
}

.lobby-study__detail--floor { grid-column: 1 / 6; }
.lobby-study__detail--wall {
  grid-column: 7 / 13;
  padding-top: clamp(1.5rem, 7.5vw, 7rem);
}

.lobby-study__detail--floor .lobby-study__figure { width: min(100%, 530px); }
.lobby-study__detail--wall .lobby-study__figure { width: min(100%, 590px); }

.lobby-study__detail-copy { margin-top: clamp(1rem, 2vw, 1.65rem); }

.lobby-study h3 {
  margin-block: .45rem .85rem;
  font-size: clamp(2.1rem, 4.1vw, 4.25rem);
  max-width: 14ch;
}

.lobby-study__credit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: clamp(2.25rem, 5vw, 5rem);
  padding-top: .65rem;
  border-top: 1px solid #41463e;
  color: #c1c7be;
  font-size: .875rem;
}

.case-page #more-work {
  padding-block: clamp(2.2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem);
  background: #0b0c0d;
  border-top: 1px solid #3e3e3e;
}

.case-page #more-work h2 {
  margin-bottom: clamp(1rem, 2.4vw, 2rem);
  font-size: clamp(2.3rem, 4.8vw, 4.75rem);
}

@media (max-width: 720px) {
  .lobby-study__intro,
  .lobby-study__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .lobby-study__intro { gap: 1.25rem; }
  .lobby-study__break { display: none; }
  .lobby-study h2 { font-size: clamp(2.85rem, 11vw, 4.8rem); }
  .lobby-study__details { gap: clamp(2.2rem, 8vw, 4rem); }
  .lobby-study__detail--wall { padding-top: 0; }
  .lobby-study__detail--floor .lobby-study__figure { width: min(100%, 430px); }
  .lobby-study__detail--wall .lobby-study__figure { width: min(100%, 500px); }
}

@media (min-resolution: 2dppx) {
  .lobby-study__wide { max-width: 540px; }
  .lobby-study__detail--floor .lobby-study__figure { max-width: 430px; }
  .lobby-study__detail--wall .lobby-study__figure { max-width: 500px; }
}

@media (min-resolution: 3dppx) {
  .lobby-study__wide { max-width: 360px; }
  .lobby-study__detail--floor .lobby-study__figure { max-width: 286px; }
  .lobby-study__detail--wall .lobby-study__figure { max-width: 333px; }
}