/* ==========================================================================
   isaacmashman.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: Isaac's handwritten signature is the primary mark for this site
   (logoAssets.IsaacSignature), in site/assets/signature/: white on Ink, ink on
   white. The header locks it up with the name set as type, after a hairline.
   Signature visual: IDENTITY to INFLUENCE, over a hairline fingerprint that
   replaces the hero lattice. "A personal brand is the unique fingerprint of
   every human who has ever lived." (The Law of Personal Branding)
   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 fingerprint replaces the lattice in heroes. It is a standalone SVG
   whose rings fade in from the core outward (opacity only, CSS inside the
   file, so it runs without JavaScript and stops under reduced motion). */
.hero.has-fp::after,.page-hero.has-fp::after{display:none;}
.fp{
  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 .fp{height:min(128%, 1180px); right:-6%; top:50%; transform:translateY(-50%);}
.page-hero .fp{height:175%; right:calc(var(--gutter) - 4%); top:-18%;}
.cta .fp{height:min(150%, 860px); left:-4%; top:50%; transform:translateY(-50%); opacity:0.05;}
.cta.s-white .fp,.s-white .fp{opacity:0.06;}
/* Behind a form the mark steps back further, so fields and labels read first. */
.cta .fp:has(~ .wrap form){opacity:0.035;}
@media (max-width:880px){
  .hero .fp{height:92%; right:-28%; top:auto; bottom:0; transform:none; opacity:0.07;}
  .page-hero .fp{height:130%; right:-30%; top:-10%; opacity:0.07;}
  .cta .fp{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);}

/* ---------------------------------------------------------------- watermarks
   Company pages carry that company's mark as the page watermark: the MCG
   lettered logo (logoAssets.crossUse), and the MI and MP monograms. Each sits
   wholly inside the gutter, sized to its section. */
.page-mark{object-fit:contain; right:var(--gutter); top:calc(50% + 38px); transform:translateY(-50%); max-height:calc(100% - 140px); object-position:right center;}
.page-mark.m-mcg{aspect-ratio:845/292; width:min(44vw, 520px); opacity:0.07;}
.page-mark.m-mi{aspect-ratio:685/520; width:min(34vw, 380px); opacity:0.055;}
.page-mark.m-mp{aspect-ratio:854/494; width:min(38vw, 420px); opacity:0.055;}
.page-mark.m-pub{aspect-ratio:817/808; width:min(30vw, 320px); opacity:0.055;}
@media (max-width:880px){
  .page-mark.m-mcg{width:62vw;}
  .page-mark.m-mi,.page-mark.m-mp,.page-mark.m-pub{width:44vw;}
}

/* ---------------------------------------------------------------- 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);}