/* ==========================================================================
   Mashman Properties: per-property values on the shared MASHMAN design
   system (site.css is byte-identical to mashmancg.com's; do not edit it here).
   Mark: the MP merged monogram, 854 x 494. No icon exists.
   Signature: Acres to Square Feet, over a parcel survey drawing that
   replaces the lattice in heroes. Vacant lots, subdivided.
   ========================================================================== */

.brand-icon{height:22px; aspect-ratio:854/494;}
.footer-brand-mark .brand-icon{height:20px; aspect-ratio:854/494;}
.hero-mark,.page-mark,.cta-mark{aspect-ratio:854/494;}
.hero-mark{width:min(52vw, 640px);}
.page-mark{width:min(40vw, 420px);}

/* The monogram carries no lettering, so the name stays beside it on desktop. */
.brand-name{color:var(--white); font-size:10.5px; letter-spacing:0.22em;}
@media (min-width:1101px){
  .brand-div{display:block;}
  .brand-name{display:inline;}
}

/* Parcel survey in place of the lattice */
.hero::after,.page-hero::after{display:none;}
.hero .motif svg,.page-hero .motif svg{stroke:rgba(255,255,255,0.075);}
.hero .motif{-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.25) 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.25) 100%);}

.hero .signature{margin-top:4px;}

/* The monogram is a solid form; its watermark sits lighter than an outline mark would. */
.hero-mark{opacity:0.055;}
.page-mark{opacity:0.06;}
.cta-mark{opacity:0.035;}
@media (max-width:620px){
  .brand-div{display:block;}
  .brand-name{display:inline; font-size:9.5px;}
}

/* Watermarks sit wholly inside the frame at every width: the mark is never
   cropped by the edge of the section. object-fit keeps its proportions when
   a short section caps its height. */
.hero-mark,.page-mark,.cta-mark{object-fit:contain;}
.hero-mark{right:var(--gutter); transform:translateY(-50%); max-height:calc(100% - 190px); object-position:right center;}
.page-mark{right:var(--gutter); top:calc(50% + 38px); transform:translateY(-50%); max-height:calc(100% - 140px); object-position:right center;}
.cta-mark{left:var(--gutter); max-height:calc(100% - 90px); object-position:left center;}
@media (max-width:1024px){ .hero-mark{width:60vw;} }
@media (max-width:880px){
  .page-mark{width:46vw;}
  .cta-mark{width:50vw;}
}