/* =========================================================================
   BASE TYPOGRAPHY

   Astra used to supply the document's font-family from its own stylesheet.
   Stripping Astra removed it, and the browser default took over --- anything
   that did not name a font of its own fell back to Times New Roman. Sections
   that set their own type were unaffected; the ones relying on inheritance
   (the zodiac heading, the counter figures, the footer) were not.

   So the theme declares it, which is where it belongs. Jost is the brand face
   and is already loaded for every other section, so this adds no request.

   Deliberately minimal: family only, plus the two custom properties the
   Shopify snapshot sections read. No sizes, weights, colours or spacing ---
   those are the sections' business, and a base stylesheet that starts
   deciding them becomes the preset pile this theme exists to avoid.
   ========================================================================= */

:root {
  --font-body-family: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-family: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-body-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   Clear the floating header
   =========================================================================

   #mmh is position:fixed at top:14px and 68px tall, so it hovers over the
   first 82px of every page. The inner templates start their content at y=0,
   which put the breadcrumb behind the glass and the announcement bar directly
   under the nav with no gap.

   Scoped to #MainContent, the Shopify-replica wrapper used by the product,
   collection and page templates. The HOMEPAGE HAS NO SUCH WRAPPER - its hero
   is deliberately full-bleed beneath the glass header (body.mmhero-blank) -
   so this cannot push the hero down, which a rule on body or main would.

   One variable, because the only thing likely to change here is the header's
   height, and it should change in one place.
   ========================================================================= */

:root {
  /* 14px offset + 68px header + 14px breathing room */
  --mmh-clearance: 96px;
}

#MainContent {
  padding-top: var(--mmh-clearance);
}