/* * Final public-site typography layer. * Loaded after page-level styles so page and editorial headings keep the * brand character without dominating desktop, tablet or mobile layouts. * Functional panel headings are intentionally scoped separately and must not * inherit the larger editorial H2 scale. */ :root { --mf-title-hero: clamp(2.9rem, 4.45vw, 4.75rem); --mf-title-page: clamp(2.55rem, 3.75vw, 4rem); --mf-title-account: clamp(2.35rem, 3.15vw, 3.5rem); --mf-title-section: clamp(1.9rem, 2.65vw, 3rem); --mf-title-card: clamp(1.45rem, 1.8vw, 2.05rem); } /* H1 is a page-level element throughout the current storefront. */ #main h1 { font-size: var(--mf-title-page) !important; line-height: 1.02 !important; letter-spacing: -.032em; } /* Large visual heroes remain expressive, but no longer fill most of the viewport. */ #main .hero__copy h1, #main .page-hero h1, #main .about-hero h1, #main .about-hero--tz h1, #main .recipe-hero h1, #main .article-hero h1, #main .partnership-hero h1, #main .farmers-hero h1, #main .page-farmers .farmers-hero h1, #main .cms-render__heading h1 { font-size: var(--mf-title-hero) !important; line-height: .99 !important; } #main .hero__title-line, #main .hero__title-line--accent { font-size: clamp(2.85rem, 4.15vw, 4.45rem) !important; line-height: .98 !important; } /* Standard page titles. */ #main .product-summary h1, #main .checkout-head h1, #main .commerce-page-head h1, #main .content-detail header h1 { font-size: var(--mf-title-page) !important; } /* Customer account and authentication pages use a calmer scale. */ #main .account-title h1, #main .account-affiliate__title h1, #main .auth-pane h1, #main .account-box h1 { max-width: 20ch; font-size: var(--mf-title-account) !important; line-height: 1.03 !important; } #main .account-title p { max-width: 760px; } /* Editorial and major section headings only. */ #main .section-head h2, #main .manifesto-copy h2, #main .manifesto-quote h2, #main .newsletter-card h2, #main .partnership-rules h2, #main .journal-feature h2, #main .cms-render__body h2, #main .content-detail__body h2, #main .article-content h2, #main .product-content-grid h2, #main .product-detail + .section h2 { font-size: var(--mf-title-section) !important; line-height: 1.04 !important; letter-spacing: -.028em; } /* Headings inside functional cards remain compact. */ #main .account-panel-card h2, #main .cart-summary h2, #main .order-success__card h2, #main .commerce-empty h2, #main .review-card h2 { font-size: var(--mf-title-card) !important; line-height: 1.08 !important; letter-spacing: -.022em; } /* The content-index class lives on , so it must precede #main. This rule * covers both imported recipes and journal/news cards without allowing the * global editorial H2 scale to dominate a three-column card. */ .page-content-index #main .article-card h2 { margin: 0 0 .7rem; max-width: 100%; font-size: var(--mf-title-card) !important; line-height: 1.08 !important; letter-spacing: -.022em; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; } #main .account-panel-card h3, #main .account-affiliate__benefits h3, #main .account-affiliate__next h3 { font-size: clamp(1.3rem, 1.55vw, 1.75rem) !important; line-height: 1.1 !important; } /* Explicitly preserve compact controls and sidebar headings. */ #main .catalog-v2__filter h2, #main .catalog-v2__filter-head h2, #main .mobile-drawer h2, #main .search-dialog h2, #main .cart-drawer h2, #main .wishlist-drawer h2 { font-size: clamp(1.3rem, 1.45vw, 1.55rem) !important; line-height: 1.12 !important; letter-spacing: -.018em; } @media (max-width: 900px) { :root { --mf-title-hero: clamp(2.65rem, 8vw, 3.85rem); --mf-title-page: clamp(2.4rem, 7vw, 3.45rem); --mf-title-account: clamp(2.3rem, 6.5vw, 3.15rem); --mf-title-section: clamp(1.85rem, 5vw, 2.7rem); } } @media (max-width: 620px) { :root { --mf-title-hero: clamp(2.45rem, 11vw, 3.2rem); --mf-title-page: clamp(2.2rem, 10vw, 2.9rem); --mf-title-account: clamp(2.1rem, 9.5vw, 2.75rem); --mf-title-section: clamp(1.7rem, 7.4vw, 2.3rem); --mf-title-card: clamp(1.35rem, 6vw, 1.8rem); } #main h1, #main .section-head h2, #main .cms-render__body h2, #main .content-detail__body h2, #main .article-content h2 { line-height: 1.05 !important; text-wrap: balance; } #main .hero__title-line, #main .hero__title-line--accent { font-size: clamp(2.4rem, 10.5vw, 3.05rem) !important; white-space: normal; } }