/* ==========================================================================
   ericchowreal.com: per-property values on the shared MASHMAN design system
   (site.css is byte-identical to mashmancg.com's; do not edit it here).

   Mark: Eric Chow's handwritten signature, in site/assets/signature/: white
   on Ink, ink on white, never on a plate. The header locks it up with the
   name set as type, after a hairline (the isaacmashman.com lockup, Eric's own
   mark).
   Signature visual: VISION to EXECUTION, over a hairline blueprint (a
   critical path, lane by lane, with a dashed line marking where the work
   stands) that replaces the hero lattice. Isaac's site carries the
   fingerprint of identity; this one carries the plan being carried out.
   Nav face: Inter nav, Montserrat name (the family default).
   ========================================================================== */

/* ---------------------------------------------------------------- header */
.brand{gap:14px;}
.brand-sig{display:block; height:40px; width:auto; flex:none;}
.brand-rule{display:block; flex:none; width:1px; height:24px; background:var(--rule-dark);}
.brand-word{
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--white);
  white-space:nowrap; text-indent:0.3em; line-height:1;
}
@media (max-width:620px){
  .brand{gap:11px;}
  .brand-sig{height:34px;}
  .brand-word{font-size:11px; letter-spacing:0.24em;}
}
@media (max-width:359px){
  .brand-rule{display:none;}
  .brand{gap:9px;}
  .brand-sig{height:30px;}
  .brand-word{font-size:10.5px; letter-spacing:0.18em; text-indent:0.18em;}
}
/* The footer's one column on a phone: sized to the screen, not to the sign-up
   form's natural width, so nothing runs past the edge on the smallest phones. */
@media (max-width:620px){ .footer-top{grid-template-columns:minmax(0, 1fr);} }
/* The name is the whole lockup, so the header keeps it at every width and
   lets the nav breathe a little more than MCG's longer menu needs. */
@media (min-width:1101px){
  .nav{gap:24px;}
}
@media (min-width:1101px) and (max-width:1279px){
  .site-header .wrap{gap:20px;}
  .nav{gap:18px;}
}

/* Footer: the signature, then the name set as type (the family .footer-name). */
.footer-brand-mark{gap:16px; margin-bottom:18px;}
.footer-sig{display:block; height:56px; width:auto; flex:none;}
.footer-brand .footer-name{font-size:13px; letter-spacing:0.3em;}
.footer-brand p.f-note{font-size:13px; line-height:1.6; margin:-2px 0 12px;}

/* ---------------------------------------------------------------- signature
   The blueprint replaces the lattice in heroes. It is a standalone SVG whose
   lanes fade in one after another (opacity only, CSS inside the file, so it
   runs without JavaScript and stops under reduced motion). */
.hero.has-bp::after,.page-hero.has-bp::after{display:none;}
.bp{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:auto; height:auto; aspect-ratio:800/1000; max-width:none; opacity:0.085;
}
.hero .bp{height:min(128%, 1180px); right:-6%; top:50%; transform:translateY(-50%);}
.page-hero .bp{height:175%; right:calc(var(--gutter) - 4%); top:-18%;}
.cta .bp{height:min(150%, 860px); left:-4%; top:50%; transform:translateY(-50%); opacity:0.05;}
.cta.s-white .bp,.s-white .bp{opacity:0.06;}
/* Behind a form the mark steps back further, so fields and labels read first. */
.cta .bp:has(~ .wrap form){opacity:0.035;}
@media (max-width:880px){
  .hero .bp{height:92%; right:-28%; top:auto; bottom:0; transform:none; opacity:0.07;}
  .page-hero .bp{height:130%; right:-30%; top:-10%; opacity:0.07;}
  .cta .bp{height:110%; left:-40%; opacity:0.04;}
}

/* The signature line: two terms and an arrow (site.css .signature). */
.hero .signature{margin:0;}
.signature-lg .to{color:var(--white);}
.s-white .signature-lg .to{color:var(--ink);}

/* ---------------------------------------------------------------- newsroom
   Releases arrive from the MCG Newsroom with news.css. The one tinted panel
   in that file becomes white with a hairline here: this site's grounds are
   white and Ink only. */
.nr-page,.nr-index{--nr-soft:var(--white);}
.nr-page .nr-represents{border:1px solid var(--nr-rule);}