:root {
    --font-body: "DM Sans", Arial, sans-serif;
    --font-heading: "DM Sans", Arial, sans-serif;
    --type-label: 0.625rem;
    --type-caption: 0.75rem;
    --type-body: 0.875rem;
    --type-lead: 1rem;
    --type-intro-title: clamp(1.1875rem, 2.4vw, 1.6875rem);
    --type-card-title: clamp(1.25rem, 2.1vw, 1.875rem);
    --type-feature-title: clamp(1.6875rem, 3vw, 2.5rem);
    --type-small-card-title: 1.0625rem;
    --type-section-title: clamp(2rem, 4vw, 3rem);
    --type-page-title: clamp(2.875rem, 6.2vw, 5.25rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.08;
    --leading-heading: 1.15;
    --leading-body: 1.75;
    --leading-relaxed: 1.85;

    --tracking-heading: -0.04em;
    --tracking-label: 0.15em;
}

body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--leading-body);
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
}

.eyebrow,
.info-page .eyebrow {
    font-size: var(--type-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-body);
}

.hero h1,
.info-hero-copy h1,
.public-cms-page h1 {
    font-size: var(--type-page-title);
    line-height: var(--leading-tight);
}

.section-heading h2,
.faq-intro h2,
.info-section-heading h2,
.contact-directory .info-section-heading h2,
.contact-social-directory .info-section-heading h2,
.info-bottom-cta h2,
.home-faq-title h2,
.about-detail-heading h2,
.about-care h2 {
    font-family: var(--font-heading);
    font-size: var(--type-section-title);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
    font-weight: var(--weight-semibold);
}

.info-page h1,
.info-page h2,
.info-page h3,
.public-cms-page h1 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
}

.faq-topic h2 {
    font-family: var(--font-body);
    font-size: var(--type-caption);
    font-weight: var(--weight-bold);
}

.about-intro .eyebrow {
    font-family: var(--font-heading);
    font-size: var(--type-intro-title);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
}

.destination h3,
.river .destination h3,
.about-experience-card h3 {
    font-size: var(--type-card-title);
    line-height: var(--leading-heading);
}

.river-preview .destination h3 {
    font-size: var(--type-feature-title);
}

.contact-directory-card h3,
.contact-social-card h3 {
    font-size: var(--type-small-card-title);
}

.about-detail-copy h3 {
    font-size: var(--type-body);
    line-height: var(--leading-body);
}

.contact-disclaimer h2 {
    font-family: var(--font-body);
    font-size: var(--type-caption);
    font-weight: var(--weight-bold);
}

.hero-description,
.info-hero-lead,
.home-faq-description,
.public-cms-excerpt {
    font-size: var(--type-lead);
    line-height: var(--leading-relaxed);
}

.section-heading > p,
.faq-intro > p:last-child,
.info-section-heading > p:last-child,
.about-detail-copy p,
.about-care > p,
.faq-item summary,
.faq-item > p,
.public-cms-body,
.contact-directory-card > div:first-child > p,
.contact-directory .info-section-heading > p:last-child,
.contact-hero .contact-hero-description {
    font-size: var(--type-body);
    line-height: var(--leading-body);
}

.info-section-nav a,
.faq-item summary,
.info-back-link,
.info-text-link,
.home-faq-link,
.nav-enquire,
.button,
.card-cta,
.contact-social-card a {
    font-family: var(--font-body);
}

.button,
.card-cta,
.nav-enquire,
.home-faq-link {
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
}

.desktop-links,
.site-footer {
    font-family: var(--font-body);
}

@media (max-width: 760px) {
    .hero h1,
    .info-hero-copy h1,
    .public-cms-page h1 {
        font-size: clamp(2.625rem, 12vw, 4.25rem);
    }

    .section-heading h2,
    .faq-intro h2,
    .info-section-heading h2,
    .contact-directory .info-section-heading h2,
    .contact-social-directory .info-section-heading h2,
    .info-bottom-cta h2,
    .home-faq-title h2,
    .about-detail-heading h2,
    .about-care h2 {
        font-size: clamp(2rem, 9vw, 2.625rem);
    }
}