/*
 * Portfolio typography: the shared role map, loaded after component styles.
 * Rounded major-third (1.25) heading scale: 24, 30, 38, 48, 60, 76, 96, 120.
 * Reading/UI roles: label 14, caption 16, control 18, body 20, lead 24.
 * Keep new typography decisions here, rather than adding component overrides.
 * Screen-only rules preserve the resume's existing compact print stylesheet.
 */
@media screen {
  :root {
    --fm-type-label: .875rem;
    --fm-type-caption: 1rem;
    --fm-type-control: 1.125rem;
    --fm-type-body: 1.25rem;
    --fm-type-lead: 1.5rem;
    --fm-type-small-heading: 1.5rem;
    --fm-type-card: 1.875rem;
    --fm-type-subheading: 2.375rem;
    --fm-type-section: 3.75rem;
    --fm-type-display: 6rem;
    --fm-type-hero: 7.5rem;
    --fm-type-resume-title: 4.75rem;
    --fm-leading-body: 1.6;
    --fm-leading-heading: 1.08;
  }

  /* Display and section titles share roles across Home, About, and projects. */
  .fm-hero h1, .fm-ed-hero h1, .fm-bio-heroTitle {
    font-size: var(--fm-type-hero);
    line-height: 1;
  }
  .fm-section-title, .fm-contact h2,
  .fm-bio-display, .fm-bio-founderCopy .fm-bio-display, .fm-bio-smallDisplay,
  .fm-ed-section h2, .fm-ed-access h2, .fm-ed-principles h2 {
    font-size: var(--fm-type-section);
    line-height: var(--fm-leading-heading);
    font-weight: 800;
  }
  .fm-bio-philosophyTitle, .fm-agency-footer h2 {
    font-size: var(--fm-type-display);
    line-height: 1.04;
  }
  .fm-project-caption h3, .fm-about-detail h3, .fm-quote blockquote,
  .fm-bio-mainQuote blockquote {
    font-size: var(--fm-type-subheading);
    line-height: 1.25;
  }
  .fm-card-heading h3, .fm-method-grid h3, .fm-bio-values h3,
  .fm-bio-posts h3, .fm-bio-recognition h3,
  .fm-resume-section h2, .fm-resume-entry h3,
  .fm-dialog-head h2, .fm-image-dialog h2, .fm-search-results strong {
    font-size: var(--fm-type-card);
    line-height: 1.2;
    font-weight: 800;
  }
  .fm-ed-benefits h3, .fm-ed-audienceList h3, .fm-gallery-panel figcaption h3 {
    font-size: var(--fm-type-small-heading);
    line-height: 1.25;
    font-weight: 700;
  }
  .fm-card-heading h3 em { font-size: var(--fm-type-small-heading); line-height: 1.25; }
  .fm-resume h1 { font-size: var(--fm-type-resume-title); line-height: 1.08; }

  /* Paragraphs retain their role regardless of the containing component. */
  .fm-prose, .fm-story-section .fm-prose,
  .fm-section-heading>p, .fm-project-caption p:not(.fm-eyebrow),
  .fm-project-card>p:last-child, .fm-about-intro>p, .fm-method-grid p,
  .fm-ed-page .fm-ed-prose p, .fm-ed-heroBrand p, .fm-ed-audienceIntro,
  .fm-ed-benefits p, .fm-ed-audienceList p, .fm-ed-principlesCopy p,
  .fm-ed-access p, .fm-ed-faq details p,
  .fm-bio-prose, .fm-bio-prose>p:first-child,
  .fm-bio-values p, .fm-bio-productPanel>div>p:not(.fm-bio-eyebrow),
  .fm-bio-recognition p, .fm-bio-faq details p, .fm-bio-quoteGrid blockquote,
  .fm-gallery-panel figcaption p {
    font-size: var(--fm-type-body);
    line-height: var(--fm-leading-body);
  }
  .fm-hero-intro, .fm-bio-heroIntro p, .fm-resume .fm-deck, .fm-bio-lead {
    font-size: var(--fm-type-lead);
    line-height: 1.5;
  }

  /* Explicit actions are 18px everywhere; inline prose links inherit the prose. */
  .fm-agency-nav-links>ul>li>a, .fm-work-menu>summary,
  .fm-text-link, .fm-button, .fm-print, .fm-bio-link, .fm-bio-postCta,
  .fm-ed-heroBrand>a, .fm-ed-principles a, .fm-ed-cta,
  .fm-ed-jumpNav a, .fm-ed-breadcrumb,
  .fm-gallery-selectors button, .fm-gallery-image>span,
  .fm-ed-decision-image figcaption a,
  .fm-split-cta, .fm-pill-cta, .fm-amber-link,
  .fm-agency-footer-columns a, .fm-mega-all, .fm-mega-cta,
  .fm-mega-row-copy strong, .fm-menu-drawer .fm-drawer-projects a {
    font-size: var(--fm-type-control);
    line-height: 1.5;
  }
  .fm-text-link, .fm-bio-link, .fm-bio-postCta, .fm-ed-heroBrand>a,
  .fm-ed-principles a, .fm-ed-jumpNav a, .fm-ed-decision-image figcaption a,
  .fm-gallery-image>span { font-weight: 600; }
  .fm-ed-faq summary, .fm-bio-faq summary {
    font-size: var(--fm-type-body);
    line-height: 1.5;
  }
  .fm-gallery-image>span { padding: 10px 16px; }
  .fm-ed-jumpNav { flex-wrap: wrap; column-gap: 24px; row-gap: 8px; }

  /* Captions describe the image; multi-sentence gallery descriptions are body. */
  .fm-ed-campaign figcaption, .fm-ed-previewFigure figcaption,
  .fm-ed-principlesImage figcaption, .fm-ed-decision-image figcaption,
  .fm-bio-collage figcaption, .fm-bio-portrait figcaption,
  .fm-bio-productPanel figcaption, .fm-bio-artNote,
  .fm-portrait figcaption, .fm-case-cover figcaption, .fm-story-image figcaption,
  .fm-quote figcaption, .fm-quote figcaption span,
  .fm-bio-mainQuote figcaption, .fm-bio-quoteGrid figcaption,
  .fm-bio-postCategory, .fm-bio-recognition a>span:first-child,
  .fm-mega-row-copy>span, .fm-mega-description, .fm-search-results span,
  .fm-search-count, .fm-gallery-controls>span {
    font-size: var(--fm-type-caption);
    line-height: 1.5;
  }
  .fm-editorial-meta dd, .fm-bio-studioLabel { font-size: var(--fm-type-control); line-height: 1.5; }
  .fm-eyebrow, .fm-ed-heroBrand>.fm-eyebrow,
  .fm-project-card .fm-eyebrow, .fm-bio-eyebrow,
  .fm-ed-number, .fm-section-rule, .fm-hero-note, .fm-hero-bottom,
  .fm-editorial-meta dt, .fm-case-meta dt,
  .fm-agency-footer-intro>.fm-eyebrow, .fm-agency-footer-columns h3,
  .fm-agency-footer-bottom, .fm-gallery-selectors button>span, .fm-mega-badge {
    font-size: var(--fm-type-label);
    line-height: 1.5;
  }

  /* Intermediate headings step down together; reading text stays stable. */
  @media (max-width: 1200px) {
    :root {
      --fm-type-hero: 6rem;
      --fm-type-section: 3rem;
      --fm-type-display: 4.75rem;
      --fm-type-resume-title: 3.75rem;
    }
  }
  @media (max-width: 1000px) {
    :root { --fm-type-hero: 4.75rem; }
  }
  @media (max-width: 700px) {
    :root {
      --fm-type-body: 1.125rem;
      --fm-type-lead: 1.25rem;
      --fm-type-card: 1.5rem;
      --fm-type-subheading: 1.875rem;
      --fm-type-section: 2.375rem;
      --fm-type-display: 3rem;
      --fm-type-hero: 3rem;
      --fm-type-resume-title: 3rem;
    }
    .fm-gallery-image>span { position: static; display: block; border-radius: 0; }
    .fm-ed-jumpNav { justify-content: flex-start; }
    .fm-agency-footer-columns a { overflow-wrap: anywhere; }
  }
  @media (max-width: 380px) {
    :root { --fm-type-hero: 2.375rem; --fm-type-resume-title: 2.375rem; }
  }
}