/* Responsive typography audit and standards pass — July 23, 2026
   Body copy: 16–18px mobile, 16–19px tablet, 16–20px desktop.
   Primary headlines: 32–36px mobile, 36–42px tablet, 40–64px desktop.
*/

:root {
  --body-copy-size: clamp(1rem, 0.75rem + 1.25vw, 1.125rem);
  --h1-fluid: clamp(2rem, 1.5rem + 2.5vw, 2.25rem);
  --h2-fluid: clamp(1.75rem, 1.25rem + 2.5vw, 2rem);
  --h3-fluid: clamp(1.375rem, 1rem + 1.875vw, 1.625rem);
  --card-title-fluid: clamp(1rem, 0.875rem + 0.625vw, 1.0625rem);
  --copy-line-height: 1.62;
  --heading-line-height: 1.08;
  --readable-line: 70ch;
}

html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--body-copy-size);
  line-height: var(--copy-line-height);
}

/* Primary page headlines */
.project-page .project-title,
.page-profile .about-name,
.page-resume .resume-title,
.page-contact .contact-title {
  font-size: var(--h1-fluid) !important;
  line-height: var(--heading-line-height) !important;
  text-wrap: balance;
}

/* Section headlines */
.project-page .learn-more__title,
.page-profile .about-section__title {
  font-size: var(--h2-fluid) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.project-page main h3:not(.learn-more-card__title) {
  font-size: var(--h3-fluid) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

/* Readable body copy. Utility labels, captions and metadata remain intentionally smaller. */
.project-page .project-summary,
.page-profile .about-section__body,
.page-profile .about-role,
.page-contact .contact-item__value,
.page-resume .resume-download,
.project-page .source-case-section p,
.project-page .source-media-sections p,
.project-page .final-work-showcase p,
.project-page .project-static-gallery p,
.project-page main > p,
.project-page main section > p {
  font-size: var(--body-copy-size) !important;
  line-height: var(--copy-line-height) !important;
}

.project-page .project-summary,
.page-profile .about-section__body,
.project-page .source-case-section p,
.project-page .source-media-sections p,
.project-page .final-work-showcase p,
.project-page main > p,
.project-page main section > p {
  max-width: var(--readable-line) !important;
}

/* Homepage and Learn More card headings stay readable without overpowering the covers. */
.page-home .project-card__title,
.project-page .learn-more-card__title {
  font-size: var(--card-title-fluid) !important;
  line-height: 1.28 !important;
}

.page-home .project-card__meta,
.project-page .learn-more-card__meta {
  line-height: 1.5 !important;
}

/* Keep the profile philosophy headings within the requested one-to-two-line limits. */
.page-profile .about-section__title--mindset {
  white-space: nowrap;
}

.page-profile .about-section__title--portfolio-motion,
.page-profile .about-section__title--chosen-path {
  max-width: 18ch;
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --body-copy-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.1875rem);
    --h1-fluid: clamp(2.25rem, 1.62rem + 2.1vw, 2.625rem);
    --h2-fluid: clamp(2rem, 1.37rem + 2.1vw, 2.375rem);
    --h3-fluid: clamp(1.5rem, 1.08rem + 1.4vw, 1.75rem);
    --card-title-fluid: clamp(1.0625rem, 0.958rem + 0.35vw, 1.125rem);
  }
}

@media (min-width: 769px) {
  :root {
    /* Continue smoothly from the tablet scale instead of shrinking at 769px. */
    --body-copy-size: clamp(1.1875rem, 1.116rem + 0.15vw, 1.25rem);
    --h1-fluid: clamp(2.625rem, 1.047rem + 3.28vw, 4rem);
    --h2-fluid: clamp(2.375rem, 1.66rem + 1.49vw, 3rem);
    --h3-fluid: clamp(1.75rem, 1.464rem + 0.6vw, 2rem);
    --card-title-fluid: 1.125rem;
  }
}

@media (max-width: 480px) {
  /* Avoid oversized or undersized copy in the narrowest layouts. */
  .project-page .project-summary,
  .page-profile .about-section__body,
  .page-profile .about-role,
  .page-contact .contact-item__value,
  .page-resume .resume-download {
    font-size: var(--body-copy-size) !important;
  }

  .page-profile .about-section__title--mindset,
  .page-profile .about-section__title--portfolio-motion,
  .page-profile .about-section__title--chosen-path {
    font-size: var(--h2-fluid) !important;
    letter-spacing: 0.025em !important;
  }
}