/* ============================================================
   MAGIA BOTANICA — RE-DESIGN tokens + components  (Beat 0)
   Contemporary Mediterranean ritual system — NOT wellness.
   Additive layer: only applies where .mb-* classes are used,
   so existing pages are not affected until restyled (Beat 1).
   Fonts: Fraunces (Editorial-New stand-in) · Space Grotesk
   · IBM Plex Mono · Instrument Serif (italic threshold).
   ============================================================ */

:root {
  /* core neutrals */
  --mb-carbon:      #111111;
  --mb-mineral:     #1A1A1A;
  --mb-salt:        #F5F1E8;   /* default page ground — BRIGHT IS DEFAULT */
  --mb-white-heat:  #FFF9EF;

  /* mediterranean signals */
  --mb-sea:         #2F6BFF;   /* signal / link / active / tool */
  --mb-cobalt:      #183A9E;   /* labels / codes / system anchors */
  --mb-sun:         #F4C542;   /* heat / sun trace / rare accent */
  --mb-coral:       #F26A4B;   /* desire / activation / urgency — the EROS accent */

  /* material tones */
  --mb-dry-herb:    #8B7A52;
  --mb-olive:       #6F7750;
  --mb-stone:       #B8B1A3;

  /* type */
  --mb-display: 'Fraunces', 'Times New Roman', serif;   /* target: Editorial New */
  --mb-body:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mb-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --mb-italic:  'Instrument Serif', Georgia, serif;

  /* type scale (px) */
  --mb-cover: 46px; --mb-h1: 28px; --mb-h2: 20px; --mb-h3: 14px;
  --mb-text: 17px; --mb-note: 14px; --mb-label: 12px;

  /* rule weights */
  --mb-hair: 0.5px; --mb-rule: 1px; --mb-heavy: 2px;
  --mb-space: 1.5rem;
}

/* ---- SCOPE: wrap any redesigned section in .mb -------------------- */
.mb {
  background: var(--mb-salt);
  color: var(--mb-carbon);
  font-family: var(--mb-body);
  font-size: var(--mb-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mb * { box-sizing: border-box; }
.mb .mb-wrap { max-width: 72ch; margin: 0 auto; padding: 0 var(--mb-space); }

/* ---- EROS EXCEPTION: dark cinematic mode (lunar/manifesto/sensual) */
.mb.mb-dark {
  background: var(--mb-carbon);
  color: var(--mb-white-heat);
}
.mb.mb-dark .mb-h1, .mb.mb-dark .mb-cover { color: var(--mb-white-heat); }
.mb.mb-dark .mb-label { color: var(--mb-sun); }

/* ---- TYPE ROLES -------------------------------------------------- */
.mb-cover { font-family: var(--mb-display); font-weight: 600; font-size: var(--mb-cover);
  line-height: 1.02; letter-spacing: -0.01em; color: var(--mb-carbon); margin: 0 0 .4em; }
.mb-h1 { font-family: var(--mb-display); font-weight: 600; font-size: var(--mb-h1);
  line-height: 1.06; color: var(--mb-carbon); margin: 1.4em 0 .3em; }
.mb-h2 { font-family: var(--mb-body); font-weight: 700; font-size: var(--mb-h2);
  color: var(--mb-cobalt); margin: 1.1em 0 .3em; }
.mb-h3 { font-family: var(--mb-body); font-weight: 700; font-size: var(--mb-h3);
  text-transform: uppercase; letter-spacing: .06em; margin: 1em 0 .2em; }
.mb-body { font-family: var(--mb-body); font-size: var(--mb-text); line-height: 1.5;
  max-width: 72ch; margin: 0 0 1em; }
.mb-note { font-size: var(--mb-note); color: var(--mb-olive); }

/* mono label / code / metadata */
.mb-label { font-family: var(--mb-mono); font-size: var(--mb-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--mb-cobalt); }

/* "state line / best for" */
.mb-state { font-family: var(--mb-mono); font-size: var(--mb-note);
  color: var(--mb-olive); letter-spacing: .04em; }

/* one-line italic threshold phrase */
.mb-threshold { font-family: var(--mb-italic); font-style: italic;
  font-size: 22px; line-height: 1.3; color: var(--mb-carbon); }
.mb.mb-dark .mb-threshold { color: var(--mb-white-heat); }

/* ---- LINKS / SIGNAL ---------------------------------------------- */
.mb a, .mb .mb-link { color: var(--mb-sea); text-decoration: none;
  border-bottom: var(--mb-rule) solid var(--mb-sea); padding-bottom: 1px; }
.mb a:hover { color: var(--mb-cobalt); border-color: var(--mb-cobalt); }

/* ---- COMPONENTS -------------------------------------------------- */
/* title block */
.mb-titleblock { border-left: var(--mb-heavy) solid var(--mb-sea);
  padding-left: 1rem; margin: 1.5rem 0; }

/* Heat-Coral callout — web echo of the IG SIGNAL register */
.mb-callout { background: var(--mb-coral); color: #fff; font-weight: 700;
  font-family: var(--mb-body); padding: .9rem 1.1rem; line-height: 1.35;
  display: inline-block; }
.mb-callout--sea { background: var(--mb-sea); }
.mb-callout--ink { background: var(--mb-carbon); }

/* sigil anchor (navigation mark, not decoration) */
.mb-sigil { display: inline-block; width: 28px; height: 28px; color: var(--mb-carbon); }
.mb.mb-dark .mb-sigil { color: var(--mb-sun); }

/* field-image band — hard-cropped evidence, never text-over-busy */
.mb-field { width: 100%; display: block; object-fit: cover; }
.mb-field--hero { height: 72vh; min-height: 420px; }
.mb-field--band { height: 40vh; min-height: 280px; }

/* primary button */
.mb-btn { display: inline-block; font-family: var(--mb-body); font-weight: 700;
  background: var(--mb-carbon); color: var(--mb-white-heat); padding: .8rem 1.4rem;
  border: none; letter-spacing: .02em; }
.mb-btn:hover { background: var(--mb-cobalt); }
.mb-btn--coral { background: var(--mb-coral); color: #fff; }

/* horizontal rule weights */
.mb-rule  { border: 0; border-top: var(--mb-rule) solid var(--mb-stone); margin: 1.5rem 0; }
.mb-rule--sea { border-top: var(--mb-heavy) solid var(--mb-sea); }

/* email gate (the one move) */
.mb-gate { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0; max-width: 72ch; }
.mb-gate input[type=email] { flex: 1 1 240px; font-family: var(--mb-body);
  font-size: var(--mb-text); padding: .8rem 1rem; border: var(--mb-rule) solid var(--mb-carbon);
  background: var(--mb-white-heat); color: var(--mb-carbon); }

/* left-align default; centre is rare */
.mb-center { text-align: center; }

@media (max-width: 640px) {
  :root { --mb-cover: 34px; --mb-h1: 24px; --mb-text: 16px; }
}