/**
 * Core Framework Compiled Stylesheet - Yorkshire Mushroom Company Editorial Apothecary
 * Version: 2.0.0
 * Compiled: 2026-08-30 16:56:33
 */

/* ==========================================================================
   CSS Custom Properties & Design Tokens
   ========================================================================== */
:root {
  /* Colors - Core Variables & Standard Aliases */
  --bg-dark: #131915;
  --color-surface-dark: #1C221E;
  --color-cream: #F3EFEA;
  --accent-gold: #9C7F52;

  --cf-color-primary: #131915;
  --cf-color-primary-dark: #0E1410;
  --cf-color-surface-dark: #1C221E;
  --cf-color-surface-card: #1A201C;
  --cf-color-surface-card-hover: #222A25;
  --cf-color-accent-gold: #9C7F52;
  --cf-color-accent-gold-hover: #B29363;
  --cf-color-accent-gold-light: #A88B5B;
  --cf-color-cream: #F3EFEA;
  --cf-color-cream-muted: #EBE6DF;
  --cf-color-cream-text: #1C221E;
  --cf-color-cream-text-muted: #554E46;
  --cf-color-text-white: #FFFFFF;
  --cf-color-text-muted: #9EAAA1;
  --cf-color-text-faint: #68766D;
  --cf-color-border-dark: rgba(255, 255, 255, 0.08);
  --cf-color-border-gold: rgba(156, 127, 82, 0.35);
  --cf-color-border-cream: rgba(28, 34, 30, 0.12);

  /* Typography Families */
  --cf-font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
  --cf-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography Scales */
  --font-size-hero-h1: clamp(2.75rem, 5.5vw, 4.25rem);
  --font-size-section-h2: clamp(2.0rem, 3.8vw, 3.0rem);
  --font-size-card-h3: clamp(1.25rem, 2.0vw, 1.65rem);
  --font-size-kicker: 0.75rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 0.9375rem;
  --font-size-body-sm: 0.8125rem;
  --font-size-micro: 0.6875rem;

  /* Layout & Spacing */
  --container-max-width: 1400px;
  --cf-container-width: 1400px;
  --container-narrow: 960px;
  --cf-container-narrow: 960px;
  --section-padding-y: clamp(4.5rem, 8vw, 7.5rem);
  --grid-gap: clamp(1.25rem, 2.5vw, 2.0rem);
  --cf-transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   Global Reset & Container Safety
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  max-width: 100vw;
  background-color: var(--cf-color-primary);
  color: var(--cf-color-text-white);
  font-family: var(--cf-font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cf-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ==========================================================================
   Color Utility Classes
   ========================================================================== */
.bg-primary { background-color: var(--cf-color-primary) !important; }
.bg-primary-dark { background-color: var(--cf-color-primary-dark) !important; }
.bg-surface-dark { background-color: var(--cf-color-surface-dark) !important; }
.bg-surface-card { background-color: var(--cf-color-surface-card) !important; }
.bg-accent-gold { background-color: var(--cf-color-accent-gold) !important; }
.bg-cream { background-color: var(--cf-color-cream) !important; }
.bg-cream-muted { background-color: var(--cf-color-cream-muted) !important; }

.text-white { color: var(--cf-color-text-white) !important; }
.text-muted { color: var(--cf-color-text-muted) !important; }
.text-faint { color: var(--cf-color-text-faint) !important; }
.text-gold { color: var(--cf-color-accent-gold) !important; }
.text-cream { color: var(--cf-color-cream) !important; }
.text-cream-muted { color: var(--cf-color-cream-text-muted) !important; }

.border-dark { border-color: var(--cf-color-border-dark) !important; }
.border-gold { border-color: var(--cf-color-border-gold) !important; }
.border-cream { border-color: var(--cf-color-border-cream) !important; }

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */
.font-heading { font-family: var(--cf-font-heading) !important; }
.font-body { font-family: var(--cf-font-body) !important; }

.text-hero-h1 {
  font-family: var(--cf-font-heading);
  font-size: var(--font-size-hero-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.text-section-h2 {
  font-family: var(--cf-font-heading);
  font-size: var(--font-size-section-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.text-card-h3 {
  font-family: var(--cf-font-heading);
  font-size: var(--font-size-card-h3);
  line-height: 1.25;
}

.text-kicker {
  font-family: var(--cf-font-body);
  font-size: var(--font-size-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cf-color-accent-gold);
}

.text-body-lg { font-size: var(--font-size-body-lg); line-height: 1.65; }
.text-body { font-size: var(--font-size-body); line-height: 1.6; }
.text-body-sm { font-size: var(--font-size-body-sm); line-height: 1.5; }
.text-micro { font-size: var(--font-size-micro); line-height: 1.4; letter-spacing: 0.08em; }

/* ==========================================================================
   Component Utility Classes
   ========================================================================== */
.btn-gold {
  background-color: var(--cf-color-accent-gold) !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--cf-color-accent-gold) !important;
  border-radius: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: var(--cf-transition) !important;
}
.btn-gold:hover {
  background-color: var(--cf-color-accent-gold-hover) !important;
  border-color: var(--cf-color-accent-gold-hover) !important;
  color: #FFFFFF !important;
}

.btn-outline {
  background-color: transparent !important;
  color: #FFFFFF !important;
  padding: 14px 28px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: var(--cf-transition) !important;
}
.btn-outline:hover {
  border-color: var(--cf-color-accent-gold) !important;
  color: var(--cf-color-accent-gold) !important;
}

.btn-dark-outline {
  background-color: transparent !important;
  color: #1C221E !important;
  padding: 14px 28px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(28, 34, 30, 0.3) !important;
  border-radius: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: var(--cf-transition) !important;
}
.btn-dark-outline:hover {
  border-color: var(--cf-color-accent-gold) !important;
  color: var(--cf-color-accent-gold) !important;
}