/* brand.css v1 — The Picture Org(anizer) family: studio site, The Well Tools, MemoryEmbers.
   Served at https://thepictureorg.com/assets/brand.css?v=N (R2 assets/brand.css). Needs Kepler (Adobe Fonts euo5gax)
   and Work Sans (Google Fonts) loaded by the page. Every class starts with po- so it never collides with page CSS. */
:root{
  --po-ink:#364242;          /* Charleston Shutter Green: text, hero, dark button */
  --po-night:#2b3434;        /* deeper Shutter Green: footer, family bar */
  --po-soft:#5d6b6b;         /* secondary text */
  --po-haint:#d3e4ef;        /* Charleston Haint Blue: primary button */
  --po-haint-lt:#eef5f9;     /* light Haint Blue tint: section bands */
  --po-sage:#cddedb;         /* Savannah Haint Blue Light: chips, alt band */
  --po-sage-dk:#8da79e;      /* Savannah Haint Blue Dark: small labels, lines */
  --po-line:#dbe6ea;
  --po-paper:#ffffff;
  --po-serif:"kepler-std","Kepler Std",Georgia,"Times New Roman",serif;
  --po-ui:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --po-max:1160px; --po-gutter:max(20px,env(safe-area-inset-left,0px));
  --po-r:14px; --po-pill:999px;
  --po-fam-h:32px;           /* height of the family bar; headers stick just below it */
}
@media (max-width:640px){:root{--po-fam-h:50px}}
.po-wrap{max-width:var(--po-max);margin:0 auto;padding-left:var(--po-gutter);padding-right:var(--po-gutter);box-sizing:border-box}

/* Buttons */
.po-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--po-ui);padding:13px 22px;border-radius:var(--po-pill);text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.po-btn-primary{background:var(--po-haint);color:var(--po-ink)}
.po-btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.po-btn-dark{background:var(--po-ink);color:#fff}
.po-btn:focus-visible{outline:3px solid var(--po-sage-dk);outline-offset:2px}

/* Family bar: the thin strip at the very top of every site */
.po-fambar{background:var(--po-ink);color:#dfe9ee;font:500 12.5px/1 var(--po-ui);position:sticky;top:0;z-index:60;height:var(--po-fam-h);box-sizing:border-box;overflow:hidden}
.po-fambar .po-wrap{display:flex;gap:24px;align-items:center;height:100%;flex-wrap:wrap}
.po-fambar a{color:#c7d6dc;text-decoration:none;padding:9px 0}
.po-fambar a:hover{color:#fff}
.po-fambar a[aria-current]{color:#fff;font-weight:600}
.po-fambar .po-fam-r{margin-left:auto;color:#c7d6dc}
@media (max-width:640px){.po-fambar .po-wrap{gap:0 18px;align-content:center}.po-fambar a{padding:4px 0}.po-fambar .po-fam-r{margin-left:0;width:100%;font-size:11.5px}.po-fambar .po-city{display:none}.po-fambar .po-fam-r a{padding:0}}

/* Shared footer */
.po-ftr{background:var(--po-night);color:#cfdde2;font:400 14.5px/1.7 var(--po-ui);padding:64px 0 28px;position:relative}
.po-ftr .po-fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
.po-ftr h4{font:600 11.5px/1.2 var(--po-ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.po-ftr h4+ul{margin:0 0 20px}
.po-ftr ul{list-style:none;margin:0;padding:0}
.po-ftr li{margin:0;padding:0}
.po-ftr a{color:#cfdde2;text-decoration:none}
.po-ftr a:hover{color:#fff;text-decoration:underline}
.po-ftr .po-fabout{font:400 17px/1.5 var(--po-serif);color:#e6eef2;margin:0}
.po-ftr .po-flogo img{height:60px;width:auto;display:block;margin-bottom:14px}
.po-ftr .po-flegal{border-top:1px solid #45514f;margin:40px 0 0;padding-top:18px;font-size:12.5px;line-height:1.6;color:#9fb0b5}
.po-ftr .po-flegal a{color:#c7d6dc}
@media (max-width:900px){.po-ftr .po-fgrid{grid-template-columns:1fr 1fr}.po-ftr .po-fabout-col{grid-column:1/-1}}
@media (max-width:420px){.po-ftr .po-fgrid{grid-template-columns:1fr}}
.po-ftr .po-frow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px}
.po-ftr .po-find{font:600 11.5px var(--po-ui);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.po-ftr .po-social{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.po-ftr .po-social a{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:#3a4646}
.po-ftr .po-social a:hover{background:#4a5858;text-decoration:none}
.po-ftr .po-social svg{width:30px;height:30px;fill:#e6eef2}
.po-ftr .po-social img{width:22px;height:22px;border-radius:4px}

/* Shared header (memoryembers.com uses it as-is; studio and tools pages restyle their own headers to match) */
.po-hdr{position:sticky;top:var(--po-fam-h);z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--po-line)}
.po-hdr .po-wrap{display:flex;align-items:center;gap:18px 22px;min-height:76px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.po-hdr .po-hlogo img{height:50px;width:auto;display:block}
.po-hdr .po-hfam{display:flex;flex-direction:column;line-height:1.05;text-decoration:none;color:var(--po-ink);margin-right:auto}
.po-hdr .po-hfam b{font:400 24px var(--po-serif)}
.po-hdr .po-hfam span{font:600 10.5px var(--po-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--po-soft);margin-top:4px}
.po-hdr nav{display:flex;gap:24px;flex-wrap:wrap}
.po-hdr nav a{font:500 15px/1.4 var(--po-ui);color:var(--po-ink);text-decoration:none;padding:4px 0}
.po-hdr nav a:hover{box-shadow:inset 0 -2px var(--po-sage-dk)}
@media (max-width:640px){.po-hdr .po-hfam span{display:none}.po-hdr .po-hlogo img{height:40px}.po-hdr nav{order:3;width:100%;gap:18px}.po-hdr .po-wrap{min-height:0}}

html{scroll-padding-top:calc(var(--po-fam-h) + 90px)}