/* =====================================================================
   Unified section typography for project pages
   Sections: THE PROJECT / THE RESIDENCES / THE INTERIORS / THE AMENITIES / THE LOCATION
   ---------------------------------------------------------------------
   The three parallel blocks historically used different ad-hoc classes
   (mural-* / *-title / interior-exterior-*) with drifting size, weight,
   line-height, letter-spacing and colour. These rules give all three a
   single consistent eyebrow / title / body spec in both mobile + desktop.
   Selectors are scoped to each section container so generic class names
   (e.g. .description, used elsewhere on the page) are not affected.
   Loaded after each project's own stylesheet; 2-class specificity also
   keeps it winning over the per-page 1-class rules at every breakpoint.
   ===================================================================== */

/* --- Eyebrow / overline --- */
.mural-section .mural-subheading,
.content-section .section-tag,
.interior-exterior-container .interior-exterior-heading,
.amenities-header-section .amenities-main-title,
.location-section .section-subtitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #545454;
}

/* --- Section title ---
   Includes the amenities display title so all five section headers share
   one title spec. (text-transform/letter-spacing are reset to match the
   mixed-case titles; the amenities copy is already capitalised in markup.) */
.mural-section .mural-main-heading,
.content-section .main-title,
.interior-exterior-container .interior-exterior-description,
.amenities-header-section .amenities-hero-title {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #2c2c2c;
}

/* --- Body copy ---
   font-size/color use !important to override the per-page
   `.mural-project-description { font-size: …px !important; color: #666 !important }`
   phone rules, so all four section bodies stay identical. The location copy
   (.section-description) rendered at 13px on some pages (mural, orise, saria,
   sensia, sterling) vs 14px elsewhere; folding it in normalises that too. */
.mural-section .mural-project-description,
.mural-section .mural-project-descriptio, /* typo'd class present on 6 pages (forest, passo, soulever, 31above, hado, kanyon) */
.content-section .description,
.interior-exterior-container .interior-description,
.location-section .section-description {
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: #666 !important;
}

/* Phone: eyebrows turn blue and titles scale up
   (matches the site's desktop-first / max-width pattern). */
@media (max-width: 767px) {
  .mural-section .mural-subheading,
  .content-section .section-tag,
  .interior-exterior-container .interior-exterior-heading,
  .amenities-header-section .amenities-main-title,
  .location-section .section-subtitle {
    color: #87bdfa;
  }
  .mural-section .mural-main-heading,
  .content-section .main-title,
  .interior-exterior-container .interior-exterior-description,
  .amenities-header-section .amenities-hero-title {
    font-size: 30px;
    font-weight: 400;
  }
}