/* =========================================================
   Unified Typography System
   Loaded after the page-specific CSS so this file is the
   single source of truth for font family, sizes and rhythm.
   ========================================================= */

:root {
    --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Fluid sizes: mobile minimum -> desktop maximum */
	--type-hero: clamp(2.75rem, 1.6rem + 4.8vw, 6rem);
	--type-page-title: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem);
	--type-section: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
	--type-subsection: clamp(1.5rem, 1.25rem + 0.8vw, 2.125rem);
	--type-card-title: clamp(1.125rem, 1.02rem + 0.4vw, 1.5rem);
    --type-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);    /* 16px -> 18px */
    --type-body-small: clamp(0.9375rem, 0.91rem + 0.1vw, 1rem); /* 15px -> 16px */
    --type-label: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); /* 11px -> 12px */
    --type-nav: 0.875rem; /* 14px */

    --line-heading: 1.08;
    --line-card: 1.25;
    --line-body: 1.7;
    --line-small: 1.6;
}

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

body,
button,
input,
textarea,
select {
    font-family: var(--font-main) !important;
}

body {
    font-size: var(--type-body);
    line-height: var(--line-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-main) !important;
    text-wrap: balance;
}

p,
li,
blockquote {
    text-wrap: pretty;
}

/* Navigation and utility text */
nav ul li a {
    font-size: var(--type-nav) !important;
}

.nav-cta,
.mobile-back-link,
.footer-nav li a {
    font-size: var(--type-label) !important;
}

/* Labels and metadata */
.section-label,
.project-category,
.project-info span,
.feedback-tag,
.contact-item span:first-child,
.who-tags span,
.screen-heading > span,
.solution-copy > span,
.feedback-learning > span,
.coursera-final-statement > span,
.coursera-final-card > span,
.impact-number,
.takeaway-card > span,
.sidebar h4,
.overview-card > span,
.timeline-step > span {
    font-size: var(--type-label) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.16em;
}

/* Homepage display and section titles */
.masked-text {
    font-size: var(--type-hero) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.045em;
}

.about-headline,
.who-heading h2,
.work-headline,
.testi-headline,
.contact-info h2 {
    font-family: var(--font-main) !important;
    font-size: var(--type-section) !important;
    font-weight: 800 !important;
    font-style: normal;
    line-height: var(--line-heading) !important;
    letter-spacing: -0.035em;
}

/* Project page titles */
.project-title {
    font-size: var(--type-page-title) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em;
}

/* Main section titles on all case-study pages */
.impact-header h2,
.gallery-intro h2,
.takeaways-header h2,
.journey-header h2,
.context-intro h2,
.research-header h2,
.competitive-header h2,
.prioritization-header h2,
.solutions-header h2,
.feedback-intro h2,
.coursera-final-header h2 {
    font-size: var(--type-section) !important;
    line-height: var(--line-heading) !important;
    letter-spacing: -0.035em;
}

/* Smaller article headings */
.description h2 {
    font-size: var(--type-subsection) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
}

/* Strong statement headings */
.problem-statement h3,
.competitive-takeaway h3,
.priority-explanation h3,
.coursera-final-statement h3,
.research-board-header h3,
.screen-heading h3,
.solution-copy h3 {
    font-size: var(--type-subsection) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em;
}

/* Card and subsection titles */
.skills-column h3,
.project-info h3,
.feedback-meta h4,
.accordion-header span,
.impact-card h3,
.takeaway-card h3,
.overview-card h3,
.timeline-step h3,
.problem-card h3,
.insight-card h3,
.platform-card h3,
.meter-card h3,
.coursera-final-card h3 {
    font-size: var(--type-card-title) !important;
    line-height: var(--line-card) !important;
    letter-spacing: -0.015em;
}

/* Primary reading text */
.under-masked-text,
.who-description,
.quote-container .main-text,
.contact-info > p,
.project-subtitle,
.description p,
.context-intro p,
.research-header p,
.competitive-header p,
.prioritization-header p,
.solutions-header p,
.feedback-intro p,
.coursera-final-header p {
    font-size: var(--type-body) !important;
    line-height: var(--line-body) !important;
}

/* Cards, supporting copy and form text */
.accordion-description p,
.skills-column ul li,
.feedback-text,
.feedback-meta span,
.contact-item span:last-child,
.contact-item a,
.impact-card p,
.takeaway-card p,
.overview-card p,
.timeline-step p,
.problem-card p,
.insight-card p,
.platform-card p,
.solution-copy p,
.solution-points p,
.quote-card p,
.feedback-learning p,
.coursera-final-card p,
.sidebar p,
.form-group input,
.form-group textarea {
    font-size: var(--type-body-small) !important;
    line-height: var(--line-small) !important;
}

/* Keep form controls at 16px on small screens to avoid mobile browser zoom. */
@media (max-width: 768px) {
    .form-group input,
    .form-group textarea {
        font-size: 1rem !important;
    }

    .masked-text {
        max-width: 100%;
    }
}
