:root {
  --hero-photo-field: clamp(440px, 67vh, 760px);
  --hero-lower-row: clamp(226px, calc(6.75vw + 153.6px), 240px);
}

/* Homepage Hero */
.hero {
  overflow: visible;
}

.hero > .rule-top {
  top: -1px;
}

.hero-stage {
  display: grid;
  grid-template-columns: 68% 32%;
  grid-template-rows:
    var(--photo-frame-inset)
    calc(var(--hero-photo-field) - var(--photo-frame-inset))
    var(--photo-frame-inset)
    minmax(var(--hero-lower-row), auto);
}

.hero-media {
  grid-row: 1 / 4;
  grid-column: 1 / -1;
  min-height: 0;
  padding: 0;
}

.hero-media img {
  object-position: 58% 54%;
}

.hero-photo-boundary {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  grid-row: 4;
  grid-column: 1 / -1;
  align-self: start;
  width: 100%;
}

.hero-primary,
.hero-utility {
  grid-row: 4;
  padding: 22px 24px 28px;
}

.hero-title-line {
  white-space: nowrap;
}

.hero-primary {
  grid-column: 1;
  position: relative;
  display: grid;
  align-items: center;
  padding: 0 24px;
}

.hero-primary h1 {
  position: absolute;
  top: 22px;
  left: 24px;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.hero-utility {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 56px;
}

.hero-residence-mix {
  max-width: 20ch;
  font-size: 18px;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.hero-residence-detail {
  display: block;
}

.hero-divider {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  grid-row: 4 / 5;
  grid-column: 2;
  align-self: stretch;
  justify-self: start;
  height: auto;
}

/* Opener */
.intro {
  min-height: 340px;
  display: grid;
  place-items: center;
}

.intro-inner {
  width: min(650px, 60%);
  text-align: center;
}

.intro .eyebrow {
  margin-bottom: 27px;
}

@media (width >= 1276px) {
  /* Size these photographs from their grid tracks, preserving caption rows. */
  .chapter-residences > .chapter-image > img,
  .chapter-neighborhood > .chapter-image > img,
  .chapter-amenities > .chapter-image > img {
    height: auto;
    align-self: stretch;
  }
}

@media (768px <= width < 1276px) {
  .intro {
    min-height: 0;
  }
}

@media (768px <= width < 1040px) and (height > 500px) {
  .hero-stage {
    --hero-photo-field: calc((100vw - var(--rail) - var(--edge) - 1px) * 3 / 4 - var(--photo-frame-inset));
  }
}

@media (810px <= width < 900px) {
  .hero-utility {
    padding-right: 20px;
    padding-left: 20px;
  }

  .hero-residence-mix {
    font-size: clamp(17px, calc(1.124vw + 7.9px), 18px);
    line-height: 1.2;
  }
}

@media (810px <= width < 1276px) {
  .intro {
    padding-block: clamp(72px, calc(5.161vw + 30.19px), 96px);
  }
}

@media (768px <= width < 810px) {
  .hero-utility {
    padding-right: clamp(14px, calc(6.742vw - 34.54px), 20px);
    padding-left: clamp(14px, calc(6.742vw - 34.54px), 20px);
  }

  .hero-residence-mix {
    max-width: none;
    font-size: clamp(16px, calc(1.124vw + 7.91px), 17px);
    line-height: 1.2;
  }

  .intro {
    padding-block: clamp(68px, calc(5.161vw + 30.19px), 72px);
  }
}

@media (541px <= width < 768px) {
  .hero-stage {
    grid-template-rows:
      var(--photo-frame-inset)
      calc(((100vw - var(--rail) - var(--edge)) * 5 / 6) - (var(--photo-frame-inset) * 2))
      var(--photo-frame-inset)
      minmax(var(--hero-lower-row), auto);
  }

  .hero-media img {
    object-position: 50% 52%;
  }

  .hero-utility {
    padding-top: 60px;
    padding-right: clamp(10px, 2vw, 14px);
    padding-left: clamp(10px, 2vw, 14px);
  }

  .hero-residence-mix {
    max-width: none;
    font-size: clamp(14px, calc(1.124vw + 7.92px), 16px);
    line-height: 1.2;
  }

  .intro {
    min-height: 0;
    padding-block: clamp(64px, calc(2.247vw + 51.84px), 68px);
  }

  .intro-inner {
    width: calc(100% - (2 * clamp(32px, calc(8.989vw - 16.63px), 48px)));
  }

  .chapter-residences .chapter-image img {
    object-position: 52% center;
  }

  .chapter-neighborhood .chapter-image img {
    object-position: 52% center;
  }

  .chapter-amenities .chapter-image img {
    object-position: 50% center;
  }
}

@media (541px <= width < 768px) and (height > 500px) {
  .hero-stage {
    grid-template-rows:
      var(--photo-frame-inset)
      calc((100vw - var(--rail) - var(--edge) - 1px) * 3 / 4 - (var(--photo-frame-inset) * 2))
      var(--photo-frame-inset)
      minmax(var(--hero-lower-row), auto);
  }
}

@media (650px <= width < 768px) and (height > 500px) {
  .chapter-residences > .chapter-image,
  .chapter-neighborhood > .chapter-image,
  .chapter-amenities > .chapter-image {
    padding-bottom: 16px;
  }
}

@media (541px <= width < 566px) {
  .hero-residence-mix {
    font-size: clamp(12px, calc(9.127vw - 37.39px), 14.282px);
  }
}

@media (width < 541px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      auto
      1px
      minmax(clamp(152px, 39.4vw, 170px), auto)
      auto;
  }

  .hero-media {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: 6 / 5;
  }

  .hero-media img {
    object-position: 50% 52%;
  }

  .hero-photo-boundary {
    grid-row: 2;
    grid-column: 1;
  }

  .hero-primary {
    grid-row: 3;
    grid-column: 1;
    min-width: 0;
    padding: 0 var(--mobile-field-padding);
  }

  .hero-primary h1 {
    top: clamp(20px, 4vw, 28px);
    left: var(--mobile-field-padding);
  }

  .hero-divider {
    display: none;
  }

  .hero-utility {
    grid-row: 4;
    grid-column: 1;
    gap: 22px;
    margin-top: -9px;
    padding: 0 var(--mobile-field-padding) clamp(34px, 9vw, 46px);
  }

  .hero-residence-mix {
    max-width: 29ch;
    font-size: clamp(16px, 4.1vw, 19px);
    line-height: 1.22;
  }

  .hero-residence-detail {
    display: inline;
  }

  .hero-residence-detail::before {
    content: " ";
  }

  .hero-utility .chapter-action {
    margin-top: 0;
  }

  .intro {
    min-height: 0;
    padding-block: clamp(58px, 15vw, 76px);
  }

  .intro-inner {
    width: min(560px, calc(100% - (var(--mobile-field-padding) * 2)));
  }

  .chapter-residences .chapter-image img {
    object-position: 58% center;
  }

  .chapter-neighborhood .chapter-image img {
    object-position: 52% center;
  }

  .chapter-amenities .chapter-image img {
    object-position: 48% center;
  }
}

@media (width < 541px) and (height > 500px) {
  .hero-media {
    aspect-ratio: 4 / 3;
  }
}

/* Homepage short-landscape layout; normal-height compact rules remain unchanged. */
@media (min-width: 541px) and (max-width: 767px) and (max-height: 500px) {
  .hero-stage {
    grid-template-rows:
      0
      max(240px, calc(100dvh - 60px))
      0
      minmax(var(--hero-lower-row), auto);
  }

  .hero-media img {
    object-position: 50% 52%;
  }

  .chapter {
    min-height: max(280px, calc(100dvh - 60px));
    align-items: stretch;
  }

  .chapter-copy {
    padding: 16px 12px;
  }

  .chapter-copy h2 {
    margin: 16px 0;
    font-size: clamp(28px, 4.8vw, 32px);
  }

  .chapter-copy .chapter-action {
    margin-top: 14px;
  }

  .chapter-image,
  .chapter-image-left .chapter-image {
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
    align-content: normal;
    min-height: 0;
    height: 100%;
    padding: 16px 10px 12px;
  }

  .chapter-image img {
    height: 100%;
    aspect-ratio: auto;
  }
}