/* ==========================================================
   Website typography system
   Loaded after all visual layers so type roles stay consistent.
   ========================================================== */

:root {
    --font-size-caption: 12px;
    --font-size-meta: 13px;
    --font-size-label: 14px;
    --font-size-control: 15px;
    --font-size-body: 16px;
    --font-size-lead: 18px;
    --font-size-card-title: 20px;
    --font-size-subheading: 24px;
    --font-size-price: 25px;
    --font-size-section-title: clamp(28px, 2.4vw, 30px);
    --font-size-page-title: clamp(32px, 3vw, 35px);
    --font-size-display: 40px;
    --font-size-logo: 42px;
    --font-size-logo-mobile: 34px;

    /* Compatibility aliases for the existing website styles. */
    --font-size-2xs: 12px;
    --font-size-xs: 13px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
    --font-size-kpi: 22px;

    --line-height-compact: 1.25;
    --line-height-base: 1.65;
    --line-height-heading: 1.15;
}

html,
body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

#website-root {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

#website-root :is(p, li, dd, dt, blockquote, figcaption) {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

#website-root h1,
#website-root .page-title,
#website-root .content-header h1,
#website-root .page-hero h1,
#website-root .content-page-hero h1,
#website-root .service-public-hero h1,
#website-root .gallery-reference-hero h1,
#website-root .news-reference-heading h1,
#website-root .news-detail-reference-heading h1,
#website-root .promotion-reference-intro h1,
#website-root .website-about-layout-hero h1,
#website-root .website-room-layout-hero h1,
#website-root .room-detail-heading h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

#website-root .website-about-layout-hero .website-about-layout-title {
    font-size: var(--font-size-4xl);
}

#website-root body.home h1,
#website-root .tl-home-hero h1,
#website-root .hero-slide h1 {
    font-size: var(--font-size-4xl);
}

#website-root h2,
#website-root .section-title,
#website-root .section-head h2,
#website-root .content-box h2,
#website-root .detail-section h2,
#website-root .cta-band h2,
#website-root .website-room-layout-section-title h2,
#website-root .website-about-layout-section-title h2,
#website-root .website-about-layout-story-card h2,
#website-root .news-detail-reference-related-head h2,
#website-root .news-reference-newsletter h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

#website-root h3,
#website-root .card-title,
#website-root .modal-title,
#website-root .panel-title,
#website-root .card h3,
#website-root .news-reference-card h3,
#website-root .room-card-header h3,
#website-root .room-body h3,
#website-root .service-card-top h3,
#website-root .booking-panel-head h3,
#website-root .booking-modal-form h3,
#website-root .home-booking-modal__visual h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

#website-root :is(h4, h5, h6),
#website-root .footer h4,
#website-root .group-title,
#website-root .card-subtitle {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

#website-root :is(
    input,
    select,
    textarea,
    button,
    .form-control,
    .form-select,
    .input-group-text,
    .website-select2-container,
    .website-select2-toggle,
    .website-select2-search input,
    .website-datepicker-popover
) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

#website-root :is(label, .form-label, .field label) {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

#website-root :is(
    .btn,
    .book-btn,
    .footer-cta,
    .footer-call,
    .news-reference-link,
    .room-filter-pills .pill
) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-compact);
}

#website-root :is(
    .nav-link,
    .nav-menu > a,
    .menu > a,
    .dropdown > a,
    .nav-submenu a,
    .dropdown-panel a,
    .mobile-nav-body a,
    .mobile-nav-parent,
    .breadcrumb,
    .gallery-reference-breadcrumb,
    .news-reference-breadcrumb,
    .promotion-reference-breadcrumb,
    .page-subnav a,
    .gallery-reference-tabs a,
    .website-pagination,
    .pagination,
    .footer-link-list a,
    .dropdown-item
) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

#website-root :is(
    table,
    .table,
    .room-rate-table,
    .dataTables_wrapper,
    .tabulator,
    .tabulator-cell,
    .tabulator-col-title
),
#website-root :is(
    table,
    .table,
    .room-rate-table
) :is(th, td) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

#website-root :is(
    small,
    .text-muted,
    .form-text,
    .help-text,
    .description,
    .metadata,
    .text-metadata,
    .input-note,
    .eyebrow,
    .section-label-pro,
    .kicker,
    .badge,
    .status-label,
    .tag,
    .meta,
    .news-reference-meta,
    .room-detail-price-note,
    .room-detail-price-source,
    .home-price span,
    .room-price span,
    .service-price span,
    .page-meta-card span,
    .booking-message span,
    .copy
) {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
}

#website-root :is(.text-caption, .legal-note, .fine-print) {
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-base);
}

#website-root :is(
    .kpi-value,
    .stat-card strong,
    .small-box h3,
    .info-box-number,
    .stats-band .sb strong,
    .mini-stat strong,
    .home-price,
    .room-price,
    .service-price,
    .room-detail-price,
    .website-room-layout-price strong,
    .lookup-card-head strong,
    .hotel-rating__score strong
) {
    font-size: var(--font-size-kpi);
    line-height: var(--line-height-heading);
}

#website-root .promotion-card-price {
    font-size: var(--font-size-xs);
}

#website-root .promotion-card-price strong {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
}

#website-root :is(.brand-mark, .logo-mark, .footer-brand > span) {
    font-size: 42px;
    line-height: 1;
}

#website-root :is(.logo > span:last-child, .brand > span:last-child, .footer-brand strong) {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
}

#website-root :is(.btn, button) i {
    font-size: var(--font-size-xl);
    line-height: 1;
}

#website-root :is(
    .modal,
    .dropdown-menu,
    .select2-container,
    .tooltip,
    .toast,
    .alert
) {
    font-size: var(--font-size-base);
}

@media (max-width: 680px) {
    #website-root h1,
    #website-root .page-title,
    #website-root .page-hero h1,
    #website-root .tl-home-hero h1,
    #website-root .hero-slide h1 {
        font-size: var(--font-size-3xl);
    }

    #website-root .website-about-layout-hero .website-about-layout-title {
        font-size: var(--font-size-3xl);
    }

    #website-root h2,
    #website-root .section-title,
    #website-root .section-head h2 {
        font-size: var(--font-size-2xl);
    }
}

/* Final semantic typography contract. This file is loaded last in the page head. */
html,
body,
#website-root {
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
}

#website-root :where(p, li, dd, dt, blockquote, figcaption) {
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
}

#website-root :where(
    input,
    select,
    textarea,
    button,
    .form-control,
    .form-select,
    .input-group-text,
    .website-select2-container,
    .website-select2-toggle,
    .website-select2-search input,
    .website-datepicker-popover,
    .btn,
    .book-btn,
    .footer-cta,
    .footer-call,
    table,
    .table,
    .room-rate-table
) {
    font-size: var(--font-size-control);
}

#website-root :where(label, .form-label, .field label, .badge, .tag, .status-label) {
    font-size: var(--font-size-label);
}

#website-root :is(
    .topbar,
    .breadcrumb,
    .gallery-reference-breadcrumb,
    .news-reference-breadcrumb,
    .promotion-reference-breadcrumb,
    .news-reference-meta,
    .metadata,
    .text-metadata,
    .input-note,
    .eyebrow,
    .section-label-pro,
    .kicker,
    .meta,
    .form-text,
    .help-text,
    .room-detail-price-note,
    .room-detail-price-source,
    .home-price span,
    .room-price span,
    .service-price span,
    .page-meta-card span,
    .booking-message span
) {
    font-size: var(--font-size-meta);
}

#website-root :is(small, .text-caption, .legal-note, .fine-print, .copy) {
    font-size: var(--font-size-caption);
}

#website-root :where(
    .nav-menu > a,
    .menu > a,
    .nav-menu .nav-link,
    .menu .nav-link,
    .mobile-nav-body a,
    .mobile-nav-parent
) {
    font-size: var(--font-size-body);
}

#website-root :where(
    .nav-submenu a,
    .dropdown-panel a,
    .page-subnav a,
    .gallery-reference-tabs a,
    .website-pagination,
    .pagination,
    .footer-link-list a,
    .dropdown-item
) {
    font-size: var(--font-size-control);
}

#website-root :is(
    h1,
    .page-title,
    .content-header h1,
    .page-hero h1,
    .content-page-hero h1,
    .service-public-hero h1,
    .gallery-reference-hero h1,
    .news-reference-heading h1,
    .news-detail-reference-heading h1,
    .promotion-reference-intro h1,
    .website-about-layout-hero h1,
    .website-room-layout-hero h1,
    .room-detail-heading h1,
    .contact-reference-hero h1
) {
    font-size: var(--font-size-page-title);
    line-height: 1.1;
    letter-spacing: -.02em;
}

#website-root.home :where(.tl-home-hero h1, .hero-slide h1) {
    font-size: var(--font-size-display);
    line-height: 1.08;
    letter-spacing: -.025em;
}

#website-root :where(
    h2,
    .content-box h2,
    .detail-section h2,
    .booking-room-detail-heading h2,
    .website-about-layout-story-card h2
) {
    font-size: var(--font-size-subheading);
    line-height: 1.18;
}

#website-root :is(
    .section-title,
    .section-head h2,
    .website-room-layout-section-title h2,
    .website-about-layout-section-title h2,
    .news-detail-reference-related-head h2,
    .news-reference-newsletter h2,
    .promotion-featured-copy h2,
    .promotion-section-heading h2,
    .promotion-contact-copy h2,
    .cta-band h2
) {
    font-size: var(--font-size-section-title);
    line-height: 1.14;
    letter-spacing: -.012em;
}

#website-root :where(
    h3,
    .card-title,
    .modal-title,
    .panel-title,
    .card h3,
    .news-reference-card h3,
    .room-card-header h3,
    .room-body h3,
    .service-card-top h3,
    .booking-panel-head h3,
    .booking-modal-form h3,
    .home-booking-modal__visual h3
) {
    font-size: var(--font-size-card-title);
    line-height: 1.25;
}

#website-root :where(h4, h5, h6, .footer h4, .group-title, .card-subtitle) {
    font-size: var(--font-size-lead);
    line-height: 1.25;
}

#website-root :where(
    .kpi-value,
    .stat-card strong,
    .small-box h3,
    .info-box-number,
    .stats-band .sb strong,
    .mini-stat strong,
    .home-price,
    .room-price,
    .service-price,
    .room-detail-price,
    .website-room-layout-price strong,
    .lookup-card-head strong,
    .hotel-rating__score strong,
    .promotion-card-price strong
) {
    font-size: var(--font-size-price);
    line-height: 1.15;
}

#website-root :where(.brand-mark, .logo-mark, .footer-brand > span) {
    font-size: var(--font-size-logo);
}

#website-root :where(.logo > span:last-child, .brand > span:last-child, .footer-brand strong) {
    font-size: var(--font-size-card-title);
}

#website-root [data-website-footer] :where(
    .footer-column > p,
    .footer-link-list a,
    .footer-contact-item,
    .footer-contact-item a,
    .footer-cta,
    .footer-call
) {
    font-size: var(--font-size-control);
}

#website-root.home :where(
    .feature-tile h3,
    .room-body h3,
    .service-card h3,
    .website-promotion-card h3
) {
    font-size: var(--font-size-card-title);
}

#website-root.home :where(
    .feature-tile p,
    .room-body p,
    .service-card p,
    .website-promotion-card p
) {
    font-size: var(--font-size-body);
}

#website-root.home .room-meta {
    font-size: var(--font-size-meta);
}

#website-root.home :where(
    .feature-tile,
    .home-room-card,
    .service-card,
    .website-promotion-card
) .btn,
#website-root.home .website-promotion-card .offer-link {
    font-size: var(--font-size-control);
}

#website-root.booking-flow-page .booking-hero h1 {
    font-size: var(--font-size-page-title);
}

#website-root.booking-flow-page .booking-hero p,
#website-root.booking-flow-page .booking-room-description p,
#website-root.booking-flow-page .booking-success p {
    font-size: var(--font-size-body);
}

#website-root.booking-flow-page :where(
    .booking-breadcrumb,
    .booking-detail-link,
    .booking-room-meta,
    .booking-promises small,
    .booking-room-rate small,
    .booking-summary-note,
    .booking-confirmation-support span,
    .booking-detail-list dt
) {
    font-size: var(--font-size-meta);
}

#website-root.booking-flow-page :where(
    .booking-panel-heading h2,
    .booking-promotion-form h2,
    .booking-room-title h3,
    .booking-form-layout > .booking-panel > .booking-panel-heading h2,
    .booking-checkin-heading h2,
    .booking-invoice-heading h2,
    .booking-confirmation-section .booking-panel-heading h2,
    .booking-code-card > div > strong
) {
    font-size: var(--font-size-card-title);
}

#website-root.booking-flow-page :where(
    .booking-promises strong,
    .booking-amenity-grid span,
    .booking-sidebar .booking-promotion-form > label,
    .booking-summary dt
) {
    font-size: var(--font-size-label);
}

#website-root.booking-flow-page :where(
    .booking-summary dd,
    .booking-detail-list dd,
    .booking-detail-section .booking-panel-heading h2
) {
    font-size: var(--font-size-control);
}

#website-root.booking-flow-page :where(
    .booking-room-price strong,
    .booking-room-rate strong,
    .booking-summary-money .total dt,
    .booking-summary-money .total dd,
    .booking-detail-list .is-total dd,
    .booking-success h2
) {
    font-size: var(--font-size-price);
}

#website-root .contact-reference-hero-copy p {
    font-size: var(--font-size-lead);
}

@media (max-width: 680px) {
    #website-root :where(
        h1,
        .page-title,
        .page-hero h1,
        .content-page-hero h1,
        .contact-reference-hero h1
    ),
    #website-root.booking-flow-page .booking-hero h1 {
        font-size: 32px;
    }

    #website-root.home :where(.tl-home-hero h1, .hero-slide h1) {
        font-size: 40px;
    }

    #website-root :where(
        .section-title,
        .section-head h2,
        .website-room-layout-section-title h2,
        .website-about-layout-section-title h2,
        .promotion-section-heading h2,
        .promotion-contact-copy h2,
        .cta-band h2
    ) {
        font-size: 28px;
    }

    #website-root :where(.brand-mark, .logo-mark) {
        font-size: var(--font-size-logo-mobile);
    }
}

/* July 2026 website type and homepage spacing refinements. */
#website-root :is(
    .nav-menu > a,
    .menu > a,
    .nav-menu .nav-link,
    .menu .nav-link,
    .nav-submenu a,
    .mobile-nav-body a,
    .mobile-nav-parent
) {
    font-size: var(--font-size-body);
}

#website-root .eyebrow:not([hidden]) {
    font-size: var(--font-size-meta);
    letter-spacing: .16em;
}

#website-root h1,
#website-root .page-title,
#website-root .content-header h1,
#website-root .page-hero h1,
#website-root .content-page-hero h1,
#website-root .service-public-hero h1,
#website-root .gallery-reference-hero h1,
#website-root .news-reference-heading h1,
#website-root .news-detail-reference-heading h1,
#website-root .promotion-reference-intro h1,
#website-root .website-about-layout-hero h1,
#website-root .website-room-layout-hero h1,
#website-root .room-detail-heading h1 {
    font-size: var(--font-size-page-title);
    line-height: 1.1;
    letter-spacing: -.02em;
}

#website-root.home .tl-home-hero h1,
#website-root.home .hero-slide h1 {
    font-size: var(--font-size-display);
    line-height: 1.08;
    letter-spacing: -.025em;
}

#website-root :is(
    .section-head h2,
    .section-title,
    .website-room-layout-section-title h2,
    .website-about-layout-section-title h2,
    .news-detail-reference-related-head h2,
    .news-reference-newsletter h2
) {
    font-size: var(--font-size-section-title);
    line-height: 1.14;
}

#website-root .topbar i {
    color: var(--brand-gold);
}

#website-root.home .feature-strip-home {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
}

#website-root.home :is(
    .home-rooms-section,
    .home-services-section,
    .home-promo-section
) {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
}

#website-root.home .home-cta-section {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
}

#website-root.home :is(
    .home-rooms-section,
    .home-services-section,
    .home-promo-section
) .section-head {
    margin-bottom: 28px;
}

#website-root.home :is(
    .home-rooms-section,
    .home-services-section,
    .home-promo-section
) .section-head h2 {
    font-size: var(--font-size-section-title);
    line-height: 1.14;
    letter-spacing: -.015em;
}

#website-root.home .feature-tile h3 {
    font-size: var(--font-size-card-title);
    line-height: 1.3;
}

#website-root.home .feature-tile p {
    font-size: var(--font-size-body);
    line-height: 1.65;
}

#website-root.home .room-body h3 {
    font-size: var(--font-size-card-title);
    line-height: 1.3;
}

#website-root.home .room-meta {
    font-size: var(--font-size-meta);
    line-height: 1.45;
}

#website-root.home .room-body p {
    font-size: var(--font-size-body);
    line-height: 1.65;
}

#website-root.home strong.home-price {
    font-size: var(--font-size-price);
    line-height: 1.3;
}

#website-root.home .home-price span {
    font-size: var(--font-size-meta);
}

#website-root.home .service-card h3 {
    font-size: var(--font-size-card-title);
    line-height: 1.35;
}

#website-root.home .service-card p {
    font-size: var(--font-size-body);
    line-height: 1.65;
}

#website-root.home .website-promotion-card h3 {
    font-size: var(--font-size-card-title);
    line-height: 1.35;
}

#website-root.home .website-promotion-card p {
    font-size: var(--font-size-body);
    line-height: 1.65;
}

#website-root.home :is(
    .feature-tile,
    .home-room-card,
    .service-card,
    .website-promotion-card
) .btn,
#website-root.home .website-promotion-card .offer-link {
    font-size: var(--font-size-control);
}

#website-root .page-meta-card strong {
    font-size: var(--font-size-body);
    line-height: 1.4;
}

#website-root .page-meta-card strong i {
    font-size: var(--font-size-lead);
    line-height: 1;
}

#website-root .page-meta-card span {
    font-size: var(--font-size-body);
    line-height: 1.55;
}

@media (max-width: 680px) {
    #website-root h1,
    #website-root .page-title,
    #website-root .page-hero h1 {
        font-size: 32px;
    }

    #website-root.home .tl-home-hero h1,
    #website-root.home .hero-slide h1 {
        font-size: 40px;
    }

    #website-root.home .feature-strip-home {
        padding-top: 24px !important;
        padding-bottom: 20px !important;
    }

    #website-root.home :is(
        .home-rooms-section,
        .home-services-section,
        .home-promo-section
    ) {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    #website-root.home .home-cta-section {
        padding-top: 26px !important;
        padding-bottom: 34px !important;
    }

    #website-root.home :is(
        .home-rooms-section,
        .home-services-section,
        .home-promo-section
    ) .section-head h2 {
        font-size: 28px;
    }
}