/* — Firefly type: self-hosted, never Google Fonts — */
@font-face{font-family:'Stabil Grotesk';src:url('/fonts/StabilGrotesk-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Stabil Grotesk';src:url('/fonts/StabilGrotesk-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Monosten';src:url('/fonts/monosten-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Monosten';src:url('/fonts/monosten-stencil-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Fonts are loaded HERE, not per page. A page that drops its own <link> silently
   falls back to Georgia and the wordmark changes — which is exactly what happened
   to the internal docs. @import must stay first in the file. */

/* ============================================================================
   Made for Good — shared design system
   ----------------------------------------------------------------------------
   ONE source for the things every Made for Good page shares: tokens, layout,
   the site header, page nav, the internal banner, and the responsive rules.

   Link it FIRST, before any page-specific <style>:
     <link rel="stylesheet" href="/mfg.css">

   Page-specific styling (tab strips, diagrams, bespoke cards) stays in the
   page. Anything that appears on more than one page belongs in here instead —
   that is the whole point. Widths, banners and breakpoints drifted precisely
   because each page carried its own copy.
   ========================================================================== */

:root {
  /* — Brand — */
  --ground: #FAF8F4;
  --surface: #FFFFFF;
  --primary: #1B3A2D;
  --primary-light: #264A3A;
  --accent: #00646b;
  --accent-soft: rgba(0, 100, 107, 0.1);
  --sage: #8BA888;
  --sage-soft: rgba(139, 168, 136, 0.15);
  --text: #2C2C2C;
  --text-secondary: #5A5A56;
  --border: rgba(27, 58, 45, 0.12);

  /* — Type — */
  --font-display: 'Stabil Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Stabil Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Monosten', 'Space Mono', monospace;

  /* — Layout —
     --content-max is the page container. --measure is the reading width for
     prose-like blocks (text, callouts, notes, lists). Tables, diagrams and
     card grids run to the container. Two intentional widths, never more. */
  --content-max: 1080px;
  --measure: 760px;
}

/* ---------- Layout ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Top padding reserves the internal banner's height (~30px) PLUS a 1.5rem comfortable gap, so
     the header sits at the same height with or without the banner (no jump) and the banner never
     crowds it. Internal pages drop the reserved 30px because the banner itself fills it. */
  padding: calc(1.5rem + 30px) 2rem 4rem;
}

.internal-banner + .page { padding-top: 1.5rem; }

/* ---------- Internal marker ----------
   Matches the brand templates (mg.css). Deliberately soft yellow rather than a
   loud alert: it marks audience, it is not an error state. */
.internal-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fdf3c4;
  color: #7a5c12;
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  padding: .42rem 1rem;
  border-bottom: 1px solid #efe1a0;
}

/* Internal pages: mfg.js adds body.internal when the chrome is mounted with data-internal.
   Faint warm tint so an internal page never reads as the public version (value from the
   Firefly x Mangrove brand spec, internal pages only). */
body.internal { background: #FEFDF8; }

/* ---------- Site header ---------- */
.site-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}
/* Signature Made for Good rule — the header divider, matching the MG rainbow / FFxMG rule
   rather than a plain grey line. Sits under the brand lockup. */
.site-header::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin: 0.6rem 0 0;
  background: linear-gradient(90deg, var(--sage), var(--accent) 55%, var(--primary));
}

/* Linked logos open the brand sites in a new tab. */
.logo-link { display: inline-flex; align-items: center; }

.mfg-hero-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.site-header .logo-bar { margin-bottom: 0.6rem; }
/* Both marks 26px tall, aligned by ink rather than by box: the Mangrove wordmark's "g" descender fills its box
   bottom, so the arches sit about 5px above the edge, while the Firefly "Partners" baseline sits about 1.6px above
   its edge (the bee dips below the text). The Mangrove mark is pushed down 3.75px so the bottom of the arches lands
   on the Partners baseline. Measured in the browser at 26px; same rule as the discovery scaffold. */
.logo-bar { display: flex; align-items: flex-end; gap: 1rem; }
.logo-bar img { height: 26px; width: auto; display: block; }
.logo-bar .logo-link:nth-of-type(2) img { margin-bottom: -3.75px; }
.logo-bar .logo-sep { width: 1px; height: 22px; background: var(--border); align-self: center; }

.partnership-of {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

/* ---------- Page nav ---------- */
.pagenav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
  padding-bottom: 0;
}

.pagenav a,
.pagenav .current { padding-bottom: 0.35rem; border-bottom: 2px solid transparent; }
.pagenav a { color: var(--text-secondary); text-decoration: none; }
.pagenav a:hover { color: var(--accent); }
.pagenav .current { color: var(--primary); border-bottom-color: var(--accent); }
.pagenav .navsep { color: var(--border); font-weight: 400; }
.pagenav a.current { color: var(--primary); border-bottom-color: var(--accent); }
.pagenav.subnav { margin-top: -1rem; font-weight: 500; font-size: 0.76rem; padding-left: 0.9rem; border-left: 2px solid var(--border); }

/* ---------- Nav dropdowns (parents with kids) ---------- */
.navgroup { position: relative; display: inline-flex; }
.navgroup > a::after, .navgroup > .current::after { content: " \25BE"; font-size: 0.7em; opacity: 0.6; }
.navmenu { display: none; position: absolute; top: 100%; left: -0.75rem; z-index: 100; min-width: 15rem; padding: 0.5rem 0; margin-top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.navgroup:hover .navmenu, .navgroup:focus-within .navmenu { display: block; }
.navmenu a { display: block; padding: 0.45rem 0.9rem; border: 0 !important; color: var(--text) !important; font-weight: 500; white-space: nowrap; }
.navmenu a:hover { background: var(--accent-soft); color: var(--primary) !important; }
.navmenu a.here { color: var(--primary) !important; font-weight: 700; }

/* ---------- Hub pages ---------- */
.hub-group { font-size: 1.25rem; margin: 2rem 0 0.4rem; }
.hub-group a { color: var(--primary); text-decoration: none; }
.hub-group a:hover { color: var(--accent); }
.hub-blurb { color: var(--text-secondary); margin: 0 0 1.25rem; max-width: var(--measure); }
.hub-list { display: grid; gap: 0.75rem; max-width: var(--measure); }
.hub-item { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; text-decoration: none; transition: border-color .15s ease; }
.hub-item:hover { border-color: var(--accent); }
.hub-title { display: block; font-weight: 600; color: var(--primary); font-size: 1.05rem; }
.hub-desc { display: block; color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.25rem; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
h2 { font-size: 1.55rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
h3 { font-size: 1.2rem; margin: 1.75rem 0 0.6rem; }

p { max-width: var(--measure); }

/* Small uppercase eyebrow above a heading. */
.sec-label,
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.5rem 0 0.4rem;
}

.note { font-size: 12px; color: var(--text-secondary); line-height: 1.55; max-width: var(--measure); }

/* ---------- Callouts ---------- */
.callout {
  max-width: var(--measure);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout .co-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.35rem;
}

/* ---------- Tables ----------
   Full container width; wide tables scroll inside themselves rather than
   dragging the whole page sideways. */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.1rem 0 1.5rem;
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  background: var(--primary);
  color: #fff;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tbody td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}

a { color: var(--accent); }

/* ---------- Responsive ----------
   ONE content breakpoint for every page. Component-level breakpoints (a card
   grid collapsing, a tab strip shrinking) belong with that component. */
@media (max-width: 700px) {
  /* Lighter comfort gap (1rem) on mobile, but still reserve the banner height so there's no jump. */
  .page { padding: calc(1rem + 30px) 1rem 3rem; }
  .internal-banner + .page { padding-top: 1rem; }
  body { padding: 0; }
  .internal-banner { margin: 0; }
  .mfg-hero-wordmark { font-size: 1.7rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Who we are (shared component, injected by mfg.js into [data-mfg-whoweare]) --- */
.mfg-whois { margin: 2.75rem 0 3rem; }
.mfg-whois > p { max-width: 68ch; }

.mfg-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 640px) { .mfg-people { grid-template-columns: 1fr; } }

.mfg-person { display: flex; gap: 1.1rem; align-items: flex-start; }

.mfg-person img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent-soft);
}

.mfg-person h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 0.15rem;
}

.mfg-person .role {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.1rem;
}

.mfg-person .org {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}

.mfg-person .links { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.8rem; margin: 0; }
.mfg-person .links a,
.mfg-whois > p a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.mfg-person .links a:hover, .mfg-whois > p a:hover { opacity: 0.7; }

/* Context tooltips: the page shows the claim, hover the "i" for the why. Not a review flag. */
.ctx { position: relative; display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: 1px; border-radius: 50%; border: 1px solid var(--border, rgba(27,58,45,0.25)); background: transparent; color: var(--text-secondary, #5A5A56); font: 500 9.5px/12px system-ui, sans-serif; text-align: center; cursor: help; opacity: .6; }
.ctx:hover, .ctx:focus { opacity: 1; border-color: var(--accent, #00646b); color: var(--accent, #00646b); outline: none; }
.ctx::after { content: attr(data-ctx); display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 20px; z-index: 60; width: min(380px, 86vw); background: #fff; color: #333; border: 1px solid var(--border, rgba(27,58,45,0.15)); font: 400 12.5px/1.55 'Stabil Grotesk', system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-style: normal; font-weight: 400; padding: 10px 12px; border-radius: 6px; white-space: normal; box-shadow: 0 4px 16px rgba(0,0,0,.12); text-align: left; }
.ctx:hover::after, .ctx:focus::after { display: block; }
td .ctx { float: right; margin: 2px 0 0 8px; }
td .ctx::after { left: auto; right: 0; transform: none; }
td:first-child .ctx::after, td:nth-child(2) .ctx::after { left: 0; right: auto; }
.hub-ref-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin: 1.6rem 0 .5rem; }

/* third level: a child with its own children opens a flyout to the right.
   The flyout overlaps its parent by 4px so the pointer never crosses a gap, and it
   closes after a short delay so a slight slip does not dismiss it. If there is no room on
   the right, mfg.js adds .flip and it opens to the left. */
.navsub { position: relative; display: block; }
.navsub > a::after { content: "\25B8"; float: right; margin-left: 1rem; opacity: 0.6; }
.navsub:hover > a, .navsub:focus-within > a { background: var(--accent-soft); color: var(--primary) !important; }
.navflyout { display: block; visibility: hidden; opacity: 0; pointer-events: none; position: absolute; left: calc(100% - 4px); top: -0.5rem; z-index: 110; min-width: 15rem; padding: 0.5rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); transition: opacity .12s ease, visibility 0s linear .22s; }
.navsub:hover > .navflyout, .navsub:focus-within > .navflyout { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.navsub.flip > .navflyout { left: auto; right: calc(100% - 4px); }
.navsub.flip > a::after { content: "\25C2"; float: left; margin: 0 1rem 0 0; }
.hub-item.hub-child { margin-left: 1.5rem; }
@media (max-width: 700px) { .navflyout { position: static; visibility: visible; opacity: 1; pointer-events: auto; box-shadow: none; border: 0; padding: 0 0 0 1rem; } .navsub > a::after { content: ""; } }

/* links inside dark table headers: keep the header's light text */
thead th a, thead th a:visited { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
thead th a:hover { color: var(--accent-soft); }