/* ==========================================================================
   Shared section typography — single source of truth for common titles.

   .section-title  → main section heading (use on <h2> tags)
   .eyebrow        → small label above the heading

   !important is intentional: it lets this one class override the legacy
   per-page and contextual rules (.center h2, .cta h2, .text-block h2, the
   per-page h2 {} blocks, etc.) without editing every stylesheet. Colour is
   deliberately NOT set here so dark sections keep their white headings.
   ========================================================================== */

:root {
     /* 1 design pixel from a 1920px mockup, expressed in vw.
        Usage: font-size: calc(56 * var(--vw));  (== get-vw(56px) in SASS) */
     --vw: calc(100vw / 1920);
}

/* Below the desktop range, stop scaling: 1 design px = 1px again.
   This makes every calc(N * var(--vw)) resolve to N px on tablet/mobile —
   exactly how the theme rendered before the px->vw conversion, which is the
   environment the mobile media queries below were tuned for. */
@media (max-width: 991px) {
     :root {
          --vw: 1px;
     }
}

/* Site-wide paragraph line-height — single source of truth.
   Applies on desktop and mobile (unitless value scales with font-size). */
p {
     line-height: 1.7;
}

.section-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: calc(56 * var(--vw)) !important;
     line-height: 1.05;
     font-weight: 400 !important;
     margin-bottom: calc(24 * var(--vw));
}

.eyebrow {
     font-size: calc(12 * var(--vw)) !important;
     font-weight: 600 !important;
}

@media (max-width: 768px) {
     .section-title {
          font-size: 40px !important;
     }

     .eyebrow {
          font-size: 12px !important;
     }
}