```css id="u5nm4j"
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM TYPOGRAPHY SYSTEM
   ------------------------------------------------------------
   File: /assets/css/base/typography.css
   Version: 1.0

   Font System:
   - Playfair Display → Premium headings / editorial titles
   - DM Sans          → Body / UI / navigation / labels

   Depends On:
   - variables.css
   - reset.css
   ============================================================ */


/* ============================================================
   01. DOCUMENT TYPOGRAPHY
   ============================================================ */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);

    font-size: var(--font-size-base);
    font-weight: var(--font-regular);

    line-height: var(--line-height-normal);

    letter-spacing: var(--tracking-normal);

    color: var(--text-body);
}


/* ============================================================
   02. GLOBAL HEADING SYSTEM
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    font-family: var(--font-heading);

    font-weight: var(--font-bold);

    line-height: var(--line-height-heading);

    letter-spacing: var(--tracking-tight);

    color: var(--text-heading);
}


/* ============================================================
   03. H1
   ============================================================ */

h1,
.h1 {
    font-size: var(--fs-h1);

    line-height: var(--line-height-tight);

    letter-spacing: var(--tracking-tighter);
}


/* ============================================================
   04. H2
   ============================================================ */

h2,
.h2 {
    font-size: var(--fs-h2);

    line-height: var(--line-height-heading);

    letter-spacing: var(--tracking-tight);
}


/* ============================================================
   05. H3
   ============================================================ */

h3,
.h3 {
    font-size: var(--fs-h3);

    line-height: 1.2;

    letter-spacing: var(--tracking-tight);
}


/* ============================================================
   06. H4
   ============================================================ */

h4,
.h4 {
    font-size: var(--fs-h4);

    line-height: 1.25;

    letter-spacing: -0.015em;
}


/* ============================================================
   07. H5
   ============================================================ */

h5,
.h5 {
    font-size: var(--font-size-xl);

    line-height: 1.35;

    letter-spacing: -0.01em;
}


/* ============================================================
   08. H6
   ============================================================ */

h6,
.h6 {
    font-family: var(--font-body);

    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);

    line-height: 1.4;

    letter-spacing: -0.01em;
}


/* ============================================================
   09. DISPLAY TYPOGRAPHY
   ============================================================ */

.display-title {
    font-family: var(--font-heading);

    font-size: var(--fs-display);

    font-weight: var(--font-bold);

    line-height: var(--line-height-tight);

    letter-spacing: var(--tracking-tighter);

    color: var(--text-heading);
}


/* ============================================================
   10. HERO TITLE
   ============================================================ */

.hero-title {
    font-family: var(--font-heading);

    font-size: var(--fs-hero);

    font-weight: var(--font-bold);

    line-height: 1.04;

    letter-spacing: var(--tracking-tighter);

    color: var(--text-white);
}


/* ============================================================
   11. SECTION TITLE
   ============================================================ */

.section-title {
    font-family: var(--font-heading);

    font-size: var(--fs-h2);

    font-weight: var(--font-bold);

    line-height: var(--line-height-heading);

    letter-spacing: var(--tracking-tight);

    color: var(--text-heading);
}


/* ============================================================
   12. SECTION TITLE - LIGHT
   ============================================================ */

.section-title-light {
    color: var(--text-white);
}


/* ============================================================
   13. EDITORIAL TITLE
   ============================================================ */

.editorial-title {
    font-family: var(--font-heading);

    font-size:
        clamp(2rem, 4vw, 4.5rem);

    font-weight: var(--font-bold);

    line-height: 1.08;

    letter-spacing: var(--tracking-tighter);

    color: var(--text-heading);
}


/* ============================================================
   14. CARD TITLE
   ============================================================ */

.card-title {
    margin: 0;

    font-family: var(--font-heading);

    font-size:
        clamp(1.35rem, 1.7vw, 1.65rem);

    font-weight: var(--font-bold);

    line-height: 1.25;

    letter-spacing: -0.015em;

    color: var(--text-heading);
}


/* ============================================================
   15. PRODUCT TITLE
   ============================================================ */

.product-title {
    margin: 0;

    font-family: var(--font-heading);

    font-size:
        clamp(1.25rem, 1.5vw, 1.55rem);

    font-weight: var(--font-bold);

    line-height: 1.3;

    letter-spacing: -0.015em;

    color: var(--text-heading);
}


/* ============================================================
   16. EYEBROW / SECTION LABEL
   ============================================================ */

.eyebrow,
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    font-family: var(--font-ui);

    font-size: var(--font-size-xs);

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: var(--tracking-widest);

    text-transform: uppercase;

    color: var(--color-secondary);
}


/* ============================================================
   17. EYEBROW DECORATIVE LINE
   ============================================================ */

.eyebrow-line {
    display: inline-block;

    width: 28px;
    height: 1px;

    flex: 0 0 28px;

    background: var(--color-secondary);
}


/* ============================================================
   18. LIGHT EYEBROW
   ============================================================ */

.eyebrow-light {
    color: var(--color-secondary-light);
}


/* ============================================================
   19. PARAGRAPH SYSTEM
   ============================================================ */

p {
    font-family: var(--font-body);

    font-size: var(--font-size-base);
    font-weight: var(--font-regular);

    line-height: var(--line-height-relaxed);

    color: var(--text-body);
}


/* ============================================================
   20. LEAD PARAGRAPH
   ============================================================ */

.lead-text {
    font-size: var(--fs-body-large);

    font-weight: var(--font-regular);

    line-height: var(--line-height-relaxed);

    color: var(--text-body);
}


/* ============================================================
   21. LARGE BODY TEXT
   ============================================================ */

.text-large {
    font-size: var(--font-size-lg);

    line-height: var(--line-height-relaxed);
}


/* ============================================================
   22. SMALL BODY TEXT
   ============================================================ */

.text-small {
    font-size: var(--font-size-sm);

    line-height: var(--line-height-normal);
}


/* ============================================================
   23. EXTRA SMALL TEXT
   ============================================================ */

.text-xs {
    font-size: var(--font-size-xs);

    line-height: var(--line-height-normal);
}


/* ============================================================
   24. MUTED TEXT
   ============================================================ */

.text-muted-premium {
    color: var(--text-muted) !important;
}


/* ============================================================
   25. DARK TEXT
   ============================================================ */

.text-dark-premium {
    color: var(--text-heading) !important;
}


/* ============================================================
   26. WHITE TEXT
   ============================================================ */

.text-white-premium {
    color: var(--text-white) !important;
}


/* ============================================================
   27. GOLD TEXT
   ============================================================ */

.text-gold {
    color: var(--color-secondary) !important;
}


/* ============================================================
   28. EMERALD TEXT
   ============================================================ */

.text-emerald {
    color: var(--color-primary) !important;
}


/* ============================================================
   29. PREMIUM GOLD GRADIENT TEXT
   ============================================================ */

.text-gold-gradient {
    color: var(--color-secondary);

    background: var(--gradient-gold);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ============================================================
   30. FONT FAMILY HELPERS
   ============================================================ */

.font-heading {
    font-family: var(--font-heading) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

.font-ui {
    font-family: var(--font-ui) !important;
}


/* ============================================================
   31. FONT WEIGHT HELPERS
   ============================================================ */

.font-regular {
    font-weight: var(--font-regular) !important;
}

.font-medium {
    font-weight: var(--font-medium) !important;
}

.font-semibold {
    font-weight: var(--font-semibold) !important;
}

.font-bold {
    font-weight: var(--font-bold) !important;
}

.font-extrabold {
    font-weight: var(--font-extrabold) !important;
}


/* ============================================================
   32. ITALIC / EDITORIAL ACCENT
   ============================================================ */

.font-italic {
    font-style: italic;
}

.editorial-accent {
    font-family: var(--font-heading);

    font-style: italic;

    font-weight: var(--font-semibold);

    color: var(--color-secondary);
}


/* ============================================================
   33. UPPERCASE LABEL
   ============================================================ */

.uppercase-label {
    font-family: var(--font-ui);

    font-size: var(--font-size-xs);

    font-weight: var(--font-bold);

    line-height: 1.2;

    letter-spacing: var(--tracking-widest);

    text-transform: uppercase;
}


/* ============================================================
   34. OVERLINE
   ============================================================ */

.overline {
    display: block;

    font-family: var(--font-ui);

    font-size: 0.6875rem;

    font-weight: var(--font-bold);

    line-height: 1.2;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--color-secondary);
}


/* ============================================================
   35. LINK TYPOGRAPHY
   ============================================================ */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    font-family: var(--font-ui);

    font-size: var(--font-size-sm);

    font-weight: var(--font-bold);

    line-height: 1.2;

    color: var(--color-primary);

    transition:
        color var(--transition),
        gap var(--transition);
}

.text-link:hover {
    gap: var(--space-3);

    color: var(--color-secondary);
}


/* ============================================================
   36. LINK WITH GOLD COLOR
   ============================================================ */

.text-link-gold {
    color: var(--color-secondary);
}

.text-link-gold:hover {
    color: var(--color-secondary-dark);
}


/* ============================================================
   37. META TEXT
   ============================================================ */

.meta-text {
    font-family: var(--font-ui);

    font-size: var(--font-size-sm);

    font-weight: var(--font-medium);

    line-height: var(--line-height-normal);

    color: var(--text-muted);
}


/* ============================================================
   38. STAT NUMBER
   ============================================================ */

.stat-number {
    display: block;

    font-family: var(--font-heading);

    font-size:
        clamp(2.25rem, 4vw, 4rem);

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: var(--tracking-tight);

    color: var(--text-heading);
}


/* ============================================================
   39. STAT LABEL
   ============================================================ */

.stat-label {
    display: block;

    margin-top: var(--space-2);

    font-family: var(--font-ui);

    font-size: var(--font-size-sm);

    font-weight: var(--font-semibold);

    line-height: var(--line-height-snug);

    color: var(--text-muted);
}


/* ============================================================
   40. DARK SECTION TYPOGRAPHY
   ============================================================ */

.dark-section {
    color: rgba(255, 255, 255, 0.76);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: var(--text-white);
}

.dark-section p {
    color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   41. DARK SECTION LEAD
   ============================================================ */

.dark-section .lead-text {
    color: rgba(255, 255, 255, 0.76);
}


/* ============================================================
   42. TEXT ALIGNMENT
   ============================================================ */

.text-center-premium {
    text-align: center;
}

.text-left-premium {
    text-align: left;
}

.text-right-premium {
    text-align: right;
}


/* ============================================================
   43. BALANCED HEADINGS
   ============================================================ */

.text-balance {
    text-wrap: balance;
}


/* ============================================================
   44. PRETTY PARAGRAPH WRAPPING
   ============================================================ */

.text-pretty {
    text-wrap: pretty;
}


/* ============================================================
   45. MAXIMUM READING WIDTH
   ============================================================ */

.reading-width {
    max-width: 68ch;
}


/* ============================================================
   46. SMALL READING WIDTH
   ============================================================ */

.reading-width-sm {
    max-width: 52ch;
}


/* ============================================================
   47. LARGE READING WIDTH
   ============================================================ */

.reading-width-lg {
    max-width: 78ch;
}


/* ============================================================
   48. NO WRAP
   ============================================================ */

.text-nowrap-premium {
    white-space: nowrap;
}


/* ============================================================
   49. TEXT TRUNCATION
   ============================================================ */

.text-truncate-premium {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   50. TWO-LINE CLAMP
   ============================================================ */

.line-clamp-2 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
}


/* ============================================================
   51. THREE-LINE CLAMP
   ============================================================ */

.line-clamp-3 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;
}


/* ============================================================
   52. BLOCKQUOTE
   ============================================================ */

blockquote {
    position: relative;

    margin: 0;

    font-family: var(--font-heading);

    font-size:
        clamp(1.4rem, 2.2vw, 2rem);

    font-weight: var(--font-semibold);

    font-style: italic;

    line-height: 1.5;

    letter-spacing: -0.015em;

    color: var(--text-heading);
}


/* ============================================================
   53. BLOCKQUOTE CITATION
   ============================================================ */

blockquote cite {
    display: block;

    margin-top: var(--space-5);

    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-semibold);

    font-style: normal;

    letter-spacing: var(--tracking-wide);

    color: var(--text-muted);
}


/* ============================================================
   54. ADDRESS TYPOGRAPHY
   ============================================================ */

address {
    font-family: var(--font-body);

    font-size: var(--font-size-base);

    font-style: normal;

    line-height: var(--line-height-relaxed);

    color: var(--text-body);
}


/* ============================================================
   55. MARK / HIGHLIGHT
   ============================================================ */

mark {
    padding: 0 0.18em;

    color: var(--text-on-gold);

    background: var(--color-secondary-light);
}


/* ============================================================
   56. SMALL
   ============================================================ */

small {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    line-height: var(--line-height-normal);
}


/* ============================================================
   57. STRONG
   ============================================================ */

strong,
b {
    font-weight: var(--font-bold);
}


/* ============================================================
   58. RESPONSIVE TYPOGRAPHY SAFETY
   ============================================================ */

@media (max-width: 767.98px) {

    body {
        font-size: 0.9375rem;
    }

    p {
        line-height: 1.7;
    }

    .hero-title {
        line-height: 1.08;
    }

    .section-title {
        line-height: 1.12;
    }

    .lead-text {
        font-size: 1rem;

        line-height: 1.7;
    }

    .eyebrow,
    .section-eyebrow {
        font-size: 0.6875rem;

        letter-spacing: 0.12em;
    }

    .reading-width,
    .reading-width-sm,
    .reading-width-lg {
        max-width: 100%;
    }

}


/* ============================================================
   59. VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 374.98px) {

    .hero-title {
        font-size: 2.35rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .editorial-title {
        font-size: 2rem;
    }

}
```