/* September 23: lighter display type and the square grid from production. */
@font-face {
  font-family: DN2Display;
  src: url('/dn2-assets/content-assets/fonts/plus-jakarta-sans-300.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
body :is(h1, h2) {
  font-family: DN2Display, 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -.04em;
}
body h1 :is(strong, b), body h2 :is(strong, b) { font-weight: inherit; }
body h1 {
  text-wrap: balance;
  overflow-wrap: break-word;
}
body[data-dn2-page] .reference-hero h1,
body .dna-subtle h1 {
  font-size: clamp(42px, 5.25vw, 76px);
  line-height: 1.13;
  letter-spacing: -.045em;
  max-width: min(100%, 13em);
  max-inline-size: min(100%, 13em);
  margin-inline: auto;
}
body[data-dn2-page] :is(.article-hero, .proj-hero) h1 {
  max-width: min(100%, 17em);
  max-inline-size: min(100%, 17em);
  letter-spacing: -.04em;
}
body[data-dn2-page="profile"] .article-hero h1,
body[data-dn2-page="legal"] .article-hero h1 { margin-inline-start: 0; }
body .reference-hero .hero-content,
body .dna-subtle .hero-content {
  transform: none !important;
  will-change: auto;
}
body #dn2-subtle-art {
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 80%);
}
@media (max-width: 760px) {
  body[data-dn2-page] .reference-hero h1,
  body .dna-subtle h1 {
    font-size: clamp(36px, 9.5vw, 48px);
    line-height: 1.16;
    letter-spacing: -.035em;
    max-inline-size: 100%;
  }
}