/* MYSTIC LOCK — the single design system. Every page inherits this.
   PALETTE: ivory/cream surfaces, forest ink text, olive primary, ONE gold accent.
   TYPE: Cormorant Garamond headings, Jost body. Six sizes total. Nothing else.
   LOCK: no page may define colors, fonts, or font-sizes outside this file.
   Override key for audits: any inline #b37736/#4d5b07-adjacent terracotta, any
   font-family that isn't var(--font-*), any font-size outside this scale = violation. */

/* ---- Type scale (six sizes, clamp for phone→desktop) ---- */
:root {
  --t-display: clamp(42px, 8vw, 96px);
  --t-h1: clamp(34px, 5.5vw, 56px);
  --t-h2: clamp(26px, 3.4vw, 36px);
  --t-h3: 20px;
  --t-body: 17px;
  --t-small: 14px;
}

/* Force every page onto the locked scale + palette. */
main h1, .ph-hero-body h1, .event-hero h1, main .hero-overlay h1 { font-size: var(--t-h1) !important; line-height: 1.08 !important; }
main .hero-overlay h1 { font-size: var(--t-display) !important; }
main h2, .reset-card h2, .ph-body h2, .event-hero-body h2, .sh-body h2 { font-size: var(--t-h2) !important; line-height: 1.14 !important; }
main h3, .session-card h3, .event-card h3 { font-size: var(--t-h3) !important; }
main p, .reset-card p, .session-card p, .ph-body p, .ph-fact span, .event-desc { font-size: var(--t-body) !important; line-height: 1.62 !important; }
main small, .ph-fact strong, .event-meta-bar strong, .sh-fact strong { font-size: var(--t-small) !important; }

/* ---- One button ---- */
.button, a.button, .nav-button, .cta, .book-btn, [class*="cta"] a {
  font-family: var(--font-body) !important;
  font-size: var(--t-small) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border: 0 !important;
  border-radius: 8px;
  min-height: 46px;
  padding: 12px 22px;
  box-shadow: none;
}
.button:hover { background: #4d5b07 !important; color: var(--primary-text) !important; }
.button.secondary, .button.ghost, .button.ghost-dark {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
}
main .hero-overlay .button.secondary { background: rgba(250,248,240,.92) !important; }

/* ---- One accent colour (gold), kill every terracotta/bronze/copper ---- */
.reset-badge, .event-badge, .price-chip, .kicker, .eyebrow, [class*="badge"] {
  background: transparent !important;
  color: var(--gold, #8a6d1f) !important;
  border: 1px solid rgba(138,109,31,.35) !important;
}

/* ---- Price styling: one voice ---- */
.reset-price, .session-price, .price, [class*="price"] {
  color: var(--primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
}

/* ---- Font lockdown ---- */
main, body { font-family: var(--font-body) !important; }
h1, h2, h3, .reset-card h2 { font-family: var(--font-heading) !important; }

/* ---- Strip animation on non-home pages (stillness = premium) ---- */
main * { animation: none !important; transition: none !important; }

/* ---- Nav never truncates ---- */
.site-header nav, header nav, nav[aria-label="Main navigation"] {
  display: flex !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100% !important;
}
.site-header nav::-webkit-scrollbar, nav::-webkit-scrollbar { display: none; }
.site-header nav a, header nav a, nav[aria-label="Main navigation"] a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  padding: 0 4px !important;
}

/* Phones: header stacks and nav gets the full row. */
@media (max-width: 640px) {
  header, .site-header { flex-direction: column !important; align-items: stretch !important; }
  header nav, .site-header nav, nav[aria-label="Main navigation"] { width: 100% !important; }
  header .book-under-logo { display: none !important; }
  header .brand-block { width: 100% !important; }
}

/* ---- One card radius everywhere ---- */
.ph-hero img, .event-hero img, main img, .reset-card, .session-card, .event-card, [class*="card"] {
  border-radius: 14px;
}
main img { border-radius: 14px; }