/* ============================================================
   RENUCE — TYPOGRAPHY SYSTEM (typography.css)
   Complete type scale for a premium fashion editorial brand.
   Uses Playfair Display (serif) for headings — luxurious feel.
   Uses Inter (sans-serif) for UI and body text — clean readability.
   Load order: AFTER reset.css
   ============================================================ */


/* =====================================================
   1. BASE BODY TYPOGRAPHY
===================================================== */

body {
  font-family:    var(--font-sans);
  font-size:      var(--text-base);        /* 15px */
  font-weight:    var(--weight-regular);
  line-height:    var(--leading-normal);   /* 1.55 */
  color:          var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
}


/* =====================================================
   2. HEADING SCALE
   h1 – h6 with Playfair Display for editorial look
   All headings are serif — body is sans-serif
===================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-serif);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);    /* 1.2 */
  color:          var(--color-text-primary);
  letter-spacing: var(--tracking-snug);   /* -0.01em */
  margin:         0;
}

h1 {
  font-size:      clamp(var(--text-4xl), 5vw, var(--text-7xl));
  /* Clamp: min 36px → max 72px, fluid between */
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-none);    /* 1 — very tight for hero titles */
}

h2 {
  font-size:      clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  /* Clamp: min 30px → max 48px */
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-snug);    /* 1.35 */
}

h3 {
  font-size:      clamp(var(--text-2xl), 2.5vw, var(--text-4xl));
  /* Clamp: min 24px → max 36px */
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size:      clamp(var(--text-xl), 2vw, var(--text-2xl));
  /* Clamp: min 20px → max 24px */
  letter-spacing: var(--tracking-normal);
}

h5 {
  font-size:      var(--text-lg);         /* 18px */
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-size:      var(--text-md);         /* 16px */
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}


/* =====================================================
   3. ITALIC EMPHASIS IN HEADINGS
   Used in hero, section titles — brand signature style
   e.g. "Elevate Your <em>Everyday</em> Style"
===================================================== */

h1 em,
h2 em,
h3 em,
.hero__title em,
.section-title em,
.collection-spotlight__title em {
  font-style:     italic;
  font-weight:    inherit;
  color:          inherit;
  /* Playfair italic looks beautiful — no extra styling needed */
}


/* =====================================================
   4. DISPLAY TEXT
   Largest type — hero headings, editorial banners
===================================================== */

.display-xl {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-5xl), 7vw, var(--text-7xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tightest);
  color:          var(--color-text-primary);
}

.display-lg {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.display-md {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}


/* =====================================================
   5. SECTION EYEBROW
   Small uppercase label above section headings
   e.g. "Just In", "Editor's Pick", "New Season 2024"
===================================================== */

.section-eyebrow {
  display:          block;
  font-family:      var(--font-sans);
  font-size:        var(--text-xs);         /* 12px */
  font-weight:      var(--weight-semibold);
  letter-spacing:   var(--tracking-mega);   /* 0.2em — very spread */
  text-transform:   uppercase;
  color:            var(--color-brand-gold);
  margin-bottom:    var(--space-3);
}


/* =====================================================
   6. SECTION TITLE
   Main heading for homepage sections, category pages
===================================================== */

.section-title {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-primary);
  margin:         0;
}

.section-desc {
  font-family:  var(--font-sans);
  font-size:    var(--text-md);
  font-weight:  var(--weight-regular);
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-secondary);
  max-width:    540px;
  margin:       var(--space-4) 0 0;
}

/* Centered variant */
.section-header--center .section-title,
.section-header--center .section-desc,
.section-header--center .section-eyebrow {
  text-align: center;
}

.section-header--center .section-desc {
  margin-left:  auto;
  margin-right: auto;
}


/* =====================================================
   7. BODY TEXT UTILITIES
   Named size classes for consistent body typography
===================================================== */

.text-xs     { font-size: var(--text-xs);   }
.text-sm     { font-size: var(--text-sm);   }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md);   }
.text-lg     { font-size: var(--text-lg);   }
.text-xl     { font-size: var(--text-xl);   }
.text-2xl    { font-size: var(--text-2xl);  }
.text-3xl    { font-size: var(--text-3xl);  }


/* =====================================================
   8. FONT WEIGHT UTILITIES
===================================================== */

.font-light    { font-weight: var(--weight-light);    }
.font-regular  { font-weight: var(--weight-regular);  }
.font-medium   { font-weight: var(--weight-medium);   }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold);     }


/* =====================================================
   9. FONT FAMILY UTILITIES
===================================================== */

.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans);  }
.font-mono  { font-family: var(--font-mono);  }


/* =====================================================
   10. TEXT COLOR UTILITIES
===================================================== */

.text-primary     { color: var(--color-text-primary);   }
.text-secondary   { color: var(--color-text-secondary); }
.text-muted       { color: var(--color-text-muted);     }
.text-disabled    { color: var(--color-text-disabled);  }
.text-inverse     { color: var(--color-text-inverse);   }
.text-gold        { color: var(--color-brand-gold);     }
.text-success     { color: var(--color-success);        }
.text-error       { color: var(--color-error);          }
.text-warning     { color: var(--color-warning);        }


/* =====================================================
   11. TEXT ALIGNMENT UTILITIES
===================================================== */

.text-left    { text-align: left;    }
.text-center  { text-align: center;  }
.text-right   { text-align: right;   }
.text-justify { text-align: justify; }


/* =====================================================
   12. TEXT TRANSFORM UTILITIES
===================================================== */

.uppercase   { text-transform: uppercase;  }
.lowercase   { text-transform: lowercase;  }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none;       }


/* =====================================================
   13. LETTER SPACING UTILITIES
===================================================== */

.tracking-tight   { letter-spacing: var(--tracking-tight);   }
.tracking-normal  { letter-spacing: var(--tracking-normal);  }
.tracking-wide    { letter-spacing: var(--tracking-wide);    }
.tracking-wider   { letter-spacing: var(--tracking-wider);   }
.tracking-widest  { letter-spacing: var(--tracking-widest);  }
.tracking-mega    { letter-spacing: var(--tracking-mega);    }


/* =====================================================
   14. LINE HEIGHT UTILITIES
===================================================== */

.leading-none     { line-height: var(--leading-none);    }
.leading-tight    { line-height: var(--leading-tight);   }
.leading-snug     { line-height: var(--leading-snug);    }
.leading-normal   { line-height: var(--leading-normal);  }
.leading-relaxed  { line-height: var(--leading-relaxed); }
.leading-loose    { line-height: var(--leading-loose);   }


/* =====================================================
   15. TEXT OVERFLOW UTILITIES
===================================================== */

.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.line-clamp-1 {
  display:            -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.line-clamp-2 {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.line-clamp-3 {
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.break-words {
  overflow-wrap: break-word;
  word-break:    break-word;
}

.no-wrap {
  white-space: nowrap;
}


/* =====================================================
   16. PROSE CONTENT
   Long-form content: About page, FAQ, Privacy, Terms
   Adds back proper spacing and list styles
===================================================== */

.prose {
  font-family:  var(--font-sans);
  font-size:    var(--text-md);
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-secondary);
  max-width:    68ch;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color:        var(--color-text-primary);
  margin-top:   var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size:    var(--text-3xl);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.prose h3 {
  font-size:    var(--text-2xl);
}

.prose h4 {
  font-size:    var(--text-xl);
}

.prose p {
  margin-bottom: var(--space-5);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
}

.prose em {
  font-style: italic;
}

.prose a {
  color:             var(--color-brand-black);
  text-decoration:   underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-brand-gold);
  font-weight:       var(--weight-medium);
  transition:        var(--transition-colors);
}

.prose a:hover {
  color:             var(--color-brand-gold);
}

.prose ul,
.prose ol {
  padding-left:  var(--space-6);
  margin-bottom: var(--space-5);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-2);
  line-height:   var(--leading-relaxed);
}

.prose li::marker {
  color: var(--color-brand-gold);
}

.prose blockquote {
  border-left:    3px solid var(--color-brand-gold);
  padding:        var(--space-4) var(--space-6);
  margin:         var(--space-8) 0;
  background:     var(--color-bg-secondary);
  border-radius:  0 var(--radius-md) var(--radius-md) 0;
}

.prose blockquote p {
  font-family:  var(--font-serif);
  font-size:    var(--text-xl);
  font-style:   italic;
  color:        var(--color-text-primary);
  margin:       0;
}

.prose hr {
  margin:         var(--space-10) 0;
  border-color:   var(--color-border);
}

.prose code {
  background:     var(--color-gray-100);
  padding:        0.15em 0.4em;
  border-radius:  var(--radius-sm);
  font-size:      0.875em;
  color:          var(--color-text-primary);
}

.prose pre {
  background:    var(--color-gray-900);
  color:         var(--color-gray-100);
  padding:       var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x:    auto;
  margin-bottom: var(--space-6);
}

.prose pre code {
  background:    none;
  padding:       0;
  font-size:     var(--text-sm);
  color:         inherit;
}

.prose table {
  width:         100%;
  margin-bottom: var(--space-6);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.prose th {
  background:     var(--color-bg-secondary);
  padding:        var(--space-3) var(--space-4);
  font-weight:    var(--weight-semibold);
  font-size:      var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom:  1px solid var(--color-border);
}

.prose td {
  padding:        var(--space-3) var(--space-4);
  border-bottom:  1px solid var(--color-border);
  font-size:      var(--text-base);
  vertical-align: top;
}

.prose tr:last-child td {
  border-bottom: none;
}

.prose img {
  border-radius: var(--radius-lg);
  margin:        var(--space-8) 0;
}

/* Prose on dark background */
.prose--inverse {
  color: var(--color-text-inverse-muted);
}

.prose--inverse h1,
.prose--inverse h2,
.prose--inverse h3,
.prose--inverse h4,
.prose--inverse strong {
  color: var(--color-text-inverse);
}

.prose--inverse a {
  color: var(--color-brand-gold);
}


/* =====================================================
   17. SPECIFIC COMPONENT TYPOGRAPHY
   Styles tied to HTML structure in index.html
===================================================== */

/* --- Hero Section --- */

.hero__eyebrow {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.75);
  margin-bottom:  var(--space-4);
}

.hero__title {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-brand-white);
  margin:         0 0 var(--space-5);
}

.hero__subtitle {
  font-family:  var(--font-sans);
  font-size:    clamp(var(--text-base), 1.5vw, var(--text-lg));
  font-weight:  var(--weight-light);
  line-height:  var(--leading-relaxed);
  color:        rgba(255, 255, 255, 0.80);
  max-width:    480px;
  margin-bottom: var(--space-8);
}

/* --- Trust Strip --- */

.trust-strip__title {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color:        var(--color-text-primary);
  display:      block;
  margin-bottom: var(--space-0-5);
}

.trust-strip__sub {
  font-size:    var(--text-xs);
  font-weight:  var(--weight-regular);
  color:        var(--color-text-muted);
  display:      block;
}

/* --- Category Cards --- */

.cat-card__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.70);
  display:        block;
  margin-bottom:  var(--space-1);
}

.cat-card__name {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight:    var(--weight-bold);
  color:          var(--color-brand-white);
  line-height:    var(--leading-tight);
  margin:         0 0 var(--space-3);
}

.cat-card__cta {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-brand-white);
}

/* --- Brand Editorial Quote --- */

.brand-editorial__quote p {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-style:     italic;
  font-weight:    var(--weight-regular);
  line-height:    var(--leading-snug);
  color:          var(--color-brand-white);
  margin-bottom:  var(--space-4);
}

.brand-editorial__cite {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  color:        var(--color-brand-gold);
  text-transform: uppercase;
}

.brand-editorial__eyebrow {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
  margin-bottom:  var(--space-6);
}

.brand-editorial__text {
  font-size:    var(--text-md);
  line-height:  var(--leading-relaxed);
  color:        rgba(255, 255, 255, 0.70);
  max-width:    540px;
  margin-bottom: var(--space-8);
}

/* --- Testimonials --- */

.testimonial-card__text {
  font-family:  var(--font-serif);
  font-size:    var(--text-md);
  font-style:   italic;
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-secondary);
  margin:       var(--space-4) 0;
}

.testimonial-card__name {
  font-size:    var(--text-sm);
  font-weight:  var(--weight-semibold);
  color:        var(--color-text-primary);
  display:      block;
}

.testimonial-card__location {
  font-size:    var(--text-xs);
  color:        var(--color-text-muted);
  display:      block;
  margin-top:   var(--space-0-5);
}

.testimonial-card__badge {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-success);
}

/* --- Newsletter Section --- */

.newsletter-section__title {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-brand-white);
  margin-bottom:  var(--space-4);
}

.newsletter-section__desc {
  font-size:    var(--text-md);
  line-height:  var(--leading-relaxed);
  color:        rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-6);
}

.newsletter-section__perks {
  font-size:    var(--text-sm);
  color:        rgba(255, 255, 255, 0.75);
  display:      flex;
  flex-direction: column;
  gap:          var(--space-2);
}

.newsletter-section__perks li {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-weight:    var(--weight-medium);
}

.newsletter-section__perks svg {
  color:          var(--color-brand-gold);
  flex-shrink:    0;
}

/* --- Cart Sidebar Typography --- */

.cart-sidebar__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-md);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-primary);
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
}

.cart-sidebar__empty-title {
  font-family:  var(--font-serif);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-medium);
  color:        var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.cart-sidebar__empty-text {
  font-size:    var(--text-sm);
  color:        var(--color-text-muted);
}

/* --- Promo Banner Typography --- */

.promo-banner__tag {
  display:        inline-block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
  margin-bottom:  var(--space-2);
}

.promo-banner__title {
  font-family:    var(--font-serif);
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  color:          var(--color-brand-white);
  margin-bottom:  var(--space-2);
}

.promo-banner__sub {
  font-size:    var(--text-sm);
  color:        rgba(255, 255, 255, 0.70);
  margin-bottom: var(--space-4);
}

.promo-banner__cta {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-brand-white);
}

/* --- Announcement Bar --- */

.announcement-bar__item span {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color:          rgba(255, 255, 255, 0.90);
}

.announcement-bar__link {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Collection Spotlight --- */

.collection-spotlight__desc {
  font-size:    var(--text-md);
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.collection-spotlight__features {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-bottom:  var(--space-8);
}

.collection-spotlight__features li {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-medium);
  color:        var(--color-text-secondary);
}

.collection-spotlight__features svg {
  color:        var(--color-brand-gold);
  flex-shrink:  0;
}

.collection-spotlight__badge-label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
}

.collection-spotlight__badge-year {
  display:    block;
  font-size:  var(--text-xs);
  color:      rgba(255, 255, 255, 0.65);
  margin-top: var(--space-1);
}

/* --- Section Rating (Testimonials header) --- */

.section-rating {
  display:      flex;
  align-items:  center;
  gap:          var(--space-2);
  margin-top:   var(--space-3);
  justify-content: center;
}

.section-rating__stars {
  display: flex;
  gap:     2px;
  color:   var(--color-star);
}

.section-rating__score {
  font-size:    var(--text-lg);
  font-weight:  var(--weight-bold);
  color:        var(--color-text-primary);
}

.section-rating__count {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
}


/* =====================================================
   18. RESPONSIVE TYPOGRAPHY
   Scale down headings on smaller screens
===================================================== */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {

  .hero__title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
  }

  .section-title {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  }

}

/* Mobile (max 768px) */
@media (max-width: 768px) {

  body {
    font-size: var(--text-base);
  }

  h1 {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
  }

  h2 {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  }

  h3 {
    font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  }

  .hero__title {
    font-size:      clamp(var(--text-3xl), 9vw, var(--text-5xl));
    line-height:    var(--leading-tight);
    letter-spacing: var(--tracking-snug);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .section-title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-3xl));
  }

  .brand-editorial__quote p {
    font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  }

  .newsletter-section__title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-3xl));
  }

  .cat-card__name {
    font-size: var(--text-xl);
  }

  .prose {
    font-size: var(--text-base);
  }

}

/* Small mobile (max 480px) */
@media (max-width: 480px) {

  .hero__title {
    font-size:   var(--text-3xl);
    line-height: var(--leading-snug);
  }

  .section-eyebrow {
    font-size:      var(--text-xs);
    letter-spacing: var(--tracking-widest);
  }

  .cat-card__name {
    font-size: var(--text-lg);
  }

  .promo-banner__title {
    font-size: var(--text-2xl);
  }

  .brand-editorial__quote p {
    font-size: var(--text-xl);
  }

}