/* ==========================================================================
   The MG Signal — Resource guide styles
   Shared component styles for the Data Science Map guide page.
   Scope everything under .mg-guide so it can't leak into the rest of the site.
   Body prose (p, ul, h3) intentionally INHERITS the site's typography so the
   guide matches the surrounding pages. Only the special blocks are pinned here.
   ========================================================================== */
.mg-guide{
  --forest:#1A3A2A; --forest-deep:#12291C; --gold:#D4A843; --gold-ink:#B58A2E;
  --parch:#F7F4EE; --ink:#1C1C1A; --muted:#5B5B57; --line:rgba(26,58,42,.16);
  max-width:44rem; margin:0 auto; color:var(--ink);
}
.mg-guide h3{ color:var(--forest); margin:2.4rem 0 .6rem; line-height:1.25; }
.mg-guide p{ line-height:1.75; }
.mg-guide strong{ color:var(--ink); }

/* ---- Part divider (01 // The Core Machine) ---- */
.mg-part{ margin:3.2rem 0 1.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.mg-part:first-child{ border-top:0; padding-top:0; margin-top:1rem; }
.mg-part__no{ display:block; font-weight:800; letter-spacing:.06em; color:var(--gold-ink);
  font-size:1.05rem; }
.mg-part__title{ margin:.15rem 0 0; color:var(--forest); line-height:1.15; }
.mg-part__title:after{ content:""; display:block; width:2.4rem; height:2px;
  background:var(--gold); margin-top:.7rem; }

/* ---- Figures ---- */
.mg-fig{ margin:2rem 0; text-align:center; }
.mg-fig img{ max-width:100%; height:auto; border:1px solid var(--line);
  border-radius:6px; background:#fff; }
.mg-fig figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--muted);
  line-height:1.5; }
/* wide diagrams: let them use full column, and scroll on small screens */
.mg-fig--wide img{ width:100%; }
@media (max-width:640px){
  .mg-fig--wide{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mg-fig--wide img{ max-width:none; width:820px; }
}

/* ---- Statement line ---- */
.mg-statement{ text-align:center; color:var(--forest); font-weight:700;
  font-size:1.35rem; line-height:1.3; margin:2.2rem auto; max-width:34rem; }

/* ---- Pull quote (matches the About-page pull quote) ---- */
.mg-pullquote{ font-family:Georgia,"Times New Roman",serif; font-style:italic;
  color:var(--forest); font-size:1.3rem; line-height:1.55; text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.3rem 0; margin:2.2rem 0; }

/* ---- Callout card ---- */
.mg-callout{ background:rgba(26,58,42,.05); border-left:3px solid var(--gold);
  border-radius:4px; padding:1.2rem 1.5rem; margin:2rem 0; }
.mg-callout p{ margin:0; font-family:Georgia,"Times New Roman",serif; font-style:italic;
  color:var(--forest); font-size:1.08rem; line-height:1.6; }

/* ---- Pattern box (forest) ---- */
.mg-pattern{ background:var(--forest); color:#FBF8F1; border-radius:6px;
  padding:1.5rem 1.6rem; margin:2rem 0; text-align:center; }
.mg-pattern__label{ display:block; font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.mg-pattern__flow{ margin:.6rem 0 0; font-weight:600; font-size:1.05rem;
  line-height:1.5; color:#EFF4EF; }

/* ---- Download blocks ---- */
.mg-download{ margin:2rem 0; text-align:center; }
.mg-download--top{ background:rgba(26,58,42,.04); border:1px solid var(--line);
  border-radius:8px; padding:1.4rem 1rem; margin:1.5rem 0 2.5rem; }
.mg-download--bottom{ border-top:1px solid var(--line); padding-top:2rem; margin-top:2.5rem; }
.mg-download__note{ margin:.7rem 0 0; font-size:.82rem; color:var(--muted); letter-spacing:.01em; }
.mg-download__lead{ margin:0 0 1rem; color:var(--forest); font-weight:600; }
.mg-btn{ display:inline-block; background:var(--forest); color:#FBF8F1 !important;
  font-weight:600; text-decoration:none; padding:.8rem 1.5rem; border-radius:6px;
  letter-spacing:.01em; transition:background .15s ease; }
.mg-btn:hover{ background:var(--forest-deep); }

/* Rights / licence line at the foot of the guide */
.mg-rights{ margin:3rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.6; color:var(--muted); }

/* ==========================================================================
   Designed blocks used inside an ARTICLE body (.post-content) too.
   Articles reuse these guide blocks; re-assert the props the base
   .post-content element rules (p / blockquote colour + margins) would win.
   ========================================================================== */
.post-content .mg-statement{ color:var(--forest); margin:2.2rem auto; }
.post-content .mg-pullquote{ color:var(--forest); border-left:0; font-size:1.3rem; padding:1.3rem 0; margin:2.2rem 0; }
.post-content .mg-callout p{ margin:0; }
.post-content .mg-pattern__flow{ color:#EFF4EF; margin:.6rem 0 0; }

/* ---- Callout CTA variant (end-of-article "read the guide" card) ---- */
.mg-callout--cta{ background:rgba(212,168,67,.09); }
.mg-callout--cta p,
.post-content .mg-callout--cta p{ font-family:inherit; font-style:normal; color:var(--muted);
  font-size:1rem; line-height:1.65; margin:0 0 .7rem; }
.mg-callout--cta p:last-child{ margin-bottom:0; }
.mg-callout--cta strong{ color:var(--forest); }
.mg-callout--cta a{ color:var(--forest); text-decoration:none; border-bottom:2px solid var(--gold); }