/* Static-site adaptation of the React Bits MaskedHeading visual behavior. */
.hero-grid h1.masked-heading {
  --mask-x: 0px;
  --mask-y: 0px;
  font-family: var(--sans);
  font-weight: 750;
  font-size: clamp(34px, 3.55vw, 58px);
  line-height: 1.4;
  letter-spacing: -.045em;
}
.masked-heading__line {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--ink);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .masked-heading.is-masked .masked-heading__line {
    background-color: var(--green);
    background-image: url('assets/heading-texture.svg');
    background-size: 132% 235%;
    background-position: calc(50% + var(--mask-x)) calc(50% + var(--mask-y));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .masked-heading.is-masked .masked-heading__line:last-child {
    background-position: calc(35% + var(--mask-x)) calc(64% + var(--mask-y));
  }
}
@media(max-width:1000px) {
  .hero-grid h1.masked-heading { font-size: 52px; }
}
@media(max-width:600px) {
  .hero-grid h1.masked-heading { font-size: clamp(29px, 8.8vw, 40px); line-height: 1.48; }
}
@media print {
  .hero-grid h1.masked-heading .masked-heading__line {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    clip-path: none !important;
    opacity: 1 !important;
  }
}