/*
 * Mimyar public typography system
 *
 * This file is intentionally loaded after the legacy page styles. It is the
 * single, small source of truth for type scale across the public website while
 * the legacy CSS is gradually retired. Dashboard and account screens are kept
 * outside these scopes because they use a denser product-interface scale.
 */

:root {
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-nav: 13px;
  --text-button: 13px;
  --text-page-title: clamp(2.75rem, 4.7vw, 4.25rem);
  --text-section-title: clamp(2rem, 3.35vw, 3.25rem);
  --text-feature-title: clamp(1.65rem, 2.35vw, 2.25rem);
  --text-card-title: clamp(1.35rem, 1.9vw, 1.8rem);
  --text-article-title: clamp(2.7rem, 4.8vw, 4.35rem);
  --text-article-h2: clamp(1.9rem, 2.55vw, 2.4rem);
  --text-article-h3: clamp(1.45rem, 1.8vw, 1.8rem);
  --line-page-title: 1.2;
  --line-section-title: 1.34;
}

/* The public shell uses one readable base rhythm. */
:where(.v2, .public-page, .unified-tool) {
  font-size: var(--text-body);
  line-height: 1.8;
}

.public-page main h1,
.unified-tool main h1,
.unified-tool .suite-hero h1,
.unified-tool .tool-hero-copy h1,
.services-page h1,
.projects-page h1,
.library-page h1,
.profile-page h1,
.mm-page-hero h1 {
  font-size: var(--text-page-title);
  line-height: var(--line-page-title);
  letter-spacing: -.03em;
}

/* Existing sections already consume this token; these selectors cover the
   few legacy pages that hard-coded a 64px/68px section heading. */
.index4-home main h2,
.mm-section-heading h2,
.mm-final-cta h2,
:where(.services-page, .about-page, .contact-page, .labs-page) main section h2 {
  font-size: var(--text-section-title);
  line-height: var(--line-section-title);
  letter-spacing: -.022em;
}

/* Preserve the editorial home hero, but prevent it from dominating the whole
   viewport on wide screens. */
.index4-home .hero-row.one {
  font-size: clamp(4.25rem, 8.7vw, 9.25rem);
}

.index4-home .hero-row.two {
  font-size: clamp(4.1rem, 8.35vw, 8.9rem);
}

.index4-home .hero-row.three {
  font-size: clamp(3.3rem, 6.75vw, 7.35rem);
}

/* Editorial/card titles should sit between body copy and section headings. */
.index4-home :where(.case-study-card h3, .editorial-entry2 strong, .tool-mini2 strong),
.public-page :where(.real-project-copy h3, .library-feature-card h2, .related-card h3),
.unified-tool :where(.tool-explainer h2, .suite-stage h2) {
  font-size: var(--text-feature-title);
  line-height: 1.42;
  letter-spacing: -.015em;
}

/* Long-form reading has its own quieter hierarchy. */
.article-page .article-title {
  font-size: var(--text-article-title);
  line-height: 1.2;
  letter-spacing: -.032em;
}

/* Database-backed React pages use CSS-module class names. Their stable body
   classes are the public contract, so they join the same scale here. */
.article-page h1 {
  font-size: var(--text-article-title);
  line-height: 1.2;
  letter-spacing: -.032em;
}

.article-page main h2 {
  font-size: var(--text-article-h2);
  line-height: 1.5;
  letter-spacing: -.02em;
}

.article-page main h3 {
  font-size: var(--text-article-h3);
  line-height: 1.55;
}

.library-page main h2 {
  font-size: var(--text-feature-title);
  line-height: 1.42;
}

.projects-page main h2,
.profile-page main h2 {
  font-size: var(--text-section-title);
  line-height: var(--line-section-title);
  letter-spacing: -.022em;
}

.article-page .article-hero-side p {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.95;
}

.article-page .article-lead {
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.95;
}

.article-page .article-content h2 {
  font-size: var(--text-article-h2);
  line-height: 1.5;
}

.article-page .article-content h3 {
  font-size: var(--text-article-h3);
  line-height: 1.55;
}

.article-page .article-content p,
.article-page .article-content li {
  font-size: 17px;
  line-height: 2.05;
}

@media (max-width: 760px) {
  :root {
    --text-body: 15px;
    --text-page-title: clamp(2.25rem, 10vw, 2.85rem);
    --text-section-title: clamp(1.8rem, 8.2vw, 2.35rem);
    --text-feature-title: clamp(1.45rem, 6.3vw, 1.9rem);
    --text-article-title: clamp(2.3rem, 10.5vw, 3rem);
    --text-article-h2: clamp(1.7rem, 7.2vw, 2.05rem);
    --text-article-h3: clamp(1.35rem, 5.8vw, 1.65rem);
  }

  .public-page main h1,
  .unified-tool main h1,
  .unified-tool .suite-hero h1,
  .unified-tool .tool-hero-copy h1,
  .services-page h1,
  .projects-page h1,
  .library-page h1,
  .profile-page h1,
  .mm-page-hero h1 {
    line-height: 1.28;
    letter-spacing: -.022em;
  }

  .services-page main section h2,
  .about-page main section h2,
  .contact-page main section h2,
  .labs-page main section h2,
  .index4-home main h2,
  .mm-section-heading h2,
  .mm-final-cta h2 {
    font-size: var(--text-section-title);
    line-height: var(--line-section-title);
  }

  .index4-home .hero-row.one {
    font-size: clamp(3.35rem, 15.5vw, 4.15rem);
  }

  .index4-home .hero-row.two {
    font-size: clamp(3.2rem, 15vw, 4rem);
  }

  .index4-home .hero-row.three {
    font-size: clamp(2.65rem, 11.5vw, 3.25rem);
  }

  .article-page .article-content p,
  .article-page .article-content li {
    font-size: 16px;
    line-height: 2;
  }
}