/* The illustration is separate from the approximate, attributed measurement. */
.live-home .home-story-copy > .overhead-story {
  margin-block: 20px;
}
.live-home .overhead-story > p {
  max-width: 60ch;
  color: #44534f;
  font-size: 18px;
  line-height: 1.8;
}
.live-home .overhead-study {
  display: grid;
  grid-template-columns: 1fr 2fr;
  max-width: 60ch;
  margin: 28px 0 30px;
}
.overhead-study-image {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1b2a;
}
.overhead-study-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.overhead-study-measure {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 16px;
}
.overhead-study-rule {
  position: relative;
  height: 1px;
  background: #aab3ad;
  transform-origin: left;
}
.overhead-study-rule::before,
.overhead-study-rule::after {
  content: "";
  position: absolute;
  top: -3px;
  height: 7px;
  width: 1px;
  background: #8c9991;
}
.overhead-study-rule::before {
  left: 0;
}
.overhead-study-rule::after {
  right: 0;
}
.overhead-study-third {
  display: block;
  position: relative;
  width: 33.333333%;
  height: 1px;
  background: #98743d;
  transform-origin: left;
}
.overhead-study-third::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 1px;
  height: 7px;
  background: #98743d;
}
.overhead-study-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: #927341;
  font-family: var(--serif);
}
.overhead-study-approx {
  font-size: 42px;
  line-height: 1;
}
.overhead-study-approx::before {
  content: "≈";
}
.overhead-study-numerator::before {
  content: "1";
}
.overhead-study-denominator::before {
  content: "3";
}
.overhead-study-fraction {
  display: grid;
  justify-items: center;
  font-size: 42px;
  line-height: 1;
}
.overhead-study-divider {
  width: 34px;
  height: 1px;
  margin: 3px 0;
  background: currentColor;
  transform-origin: left;
}
.live-home .overhead-study figcaption {
  grid-column: 2;
  grid-row: 2;
  margin: 28px 0 0 18px;
  color: #172b37;
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .live-home .overhead-story > p {
    font-size: 16px;
    line-height: 1.75;
  }
  .live-home .overhead-study {
    margin: 24px 0 26px;
  }
  .overhead-study-image {
    aspect-ratio: 3 / 2;
  }
  .live-home .overhead-study figcaption {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 16px 0 0;
    font-size: 19px;
  }
}