/* ==============================================================
   Gnome Without Organs: the brand's shared look, used by the landing
   page (gwo.html), the one-pager and the pitch deck (collateral/).
   Load it after fc-base.css. Garden moss for the page, mushroom cream
   for ink, hat red for the accent; Fraunces for display, Outfit for text.
   ============================================================== */

:root {
  --bg: #1f3527;
  --ink: #f2ead9;
  --ink-2: rgb(242 234 217 / 0.78);
  --ink-3: rgb(242 234 217 / 0.62);
  --accent: #e8432e;
  --accent-ink: #fff4ea;
  --accent-soft: rgb(232 67 46 / 0.25);
  --brand: #e8432e;
  --sky: #8cc4f0;
  --glass: rgb(242 234 217 / 0.08);
  --glass-soft: rgb(242 234 217 / 0.045);
  --edge: rgb(242 234 217 / 0.17);
  --edge-soft: rgb(242 234 217 / 0.1);
  --btn: #f2ead9;
  --btn-ink: #1f3527;
  --mushroom: #d8c39a;
  --pill: #284232;
  --pill-strong: #34523f;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
}

/* Display type: Fraunces with its soft, wonky cut; italics in mushroom. */
.display, .h3, .brand-name { font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.display em { font-style: italic; color: var(--mushroom); font-weight: 500; }

/* The wordmark: Gnome / Without / Organs, stacked, with Without in mushroom. */
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; }
.wordmark .tan { color: var(--mushroom); }

/* A card from the app: a finding, a forecast, a saved change, the apps.
   --u sets its scale (the landing page sizes it from its stage, in cqw). */
.ui-card { --u: 1cqw; padding: calc(2.4 * var(--u)) calc(2.8 * var(--u)); border-radius: calc(2.4 * var(--u));
  background: rgb(28 48 35 / 0.86); border: 1px solid rgb(242 234 217 / 0.2);
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: max(9px, calc(2.3 * var(--u))); line-height: 1.35; color: var(--ink); }
.ui-card .uc-k { display: block; font-size: 0.82em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mushroom); margin-bottom: 0.7em; }
.ui-card .uc-bar { display: grid; grid-template-columns: 1fr auto; gap: 0.2em 0.6em; align-items: center; margin-top: 0.5em; font-size: 0.92em; color: var(--ink-2); }
.ui-card .uc-bar i { grid-column: 1 / -1; height: 0.7em; border-radius: 0.35em; background: var(--c); width: var(--w); }
.ui-card b { font-weight: 600; }
.ui-card .uc-ok { display: flex; align-items: center; gap: 0.5em; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: #7fd6a4; margin-bottom: 0.4em; }
.ui-card .uc-ok::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: #7fd6a4; box-shadow: 0 0 0.6em #7fd6a4; }
.ui-card .uc-prog { height: 0.35em; border-radius: 0.2em; background: #7fd6a4; margin-top: 0.7em; }
.ui-card .uc-icons { display: flex; gap: 0.6em; }
.ui-card .uc-icons img { width: 3.2em; height: 3.2em; filter: drop-shadow(0 0.3em 0.4em rgb(0 0 0 / 0.4)); }
.ui-card svg { display: block; width: 100%; height: auto; }

/* The One place garden board (assets/oneplace-board.js). */
.garden { width: 100%; height: auto; display: block; overflow: visible; }
.garden text { font-family: var(--font-body); }
.garden .state { transition: opacity 0.9s ease, transform 0.9s ease; }
.garden .state.off { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* A chart from the app, in its frame (charts come from the GWO_CHARTS functions in demo-replay.js). */
.fig { position: relative; padding: 0.75rem; border: 1px solid var(--edge-soft); border-radius: 12px; background: rgb(20 36 27 / 0.55); max-width: 44rem; }
.fig figure { margin: 0; }
.fig h2 { margin: 0 2rem 0.125rem 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0; }
.fig h3 { margin: 0 2rem 0.5rem 0; font-family: var(--font-body); font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: var(--ink-3); }
.fig figcaption { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--ink-3); }
.fig svg { max-width: 100%; height: auto; display: block; overflow: visible; }