{"id":11032,"date":"2025-06-24T19:27:49","date_gmt":"2025-06-24T19:27:49","guid":{"rendered":"https:\/\/heyshadylady.com\/staging\/2808\/?page_id=11032"},"modified":"2025-11-13T04:40:47","modified_gmt":"2025-11-13T04:40:47","slug":"whats-in-my-bag","status":"publish","type":"page","link":"https:\/\/heyshadylady.com\/staging\/2808\/whats-in-my-bag\/","title":{"rendered":"what&#8217;s in my bag?"},"content":{"rendered":"<style>.kb-row-layout-id11032_71cc48-ad > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id11032_71cc48-ad > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id11032_71cc48-ad > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-none, 0rem );max-width:var( --global-content-width, 1300px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:10em;padding-bottom:5em;min-height:100vh;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id11032_71cc48-ad{background-image:url('https:\/\/heyshadylady.com\/staging\/2808\/wp-content\/uploads\/2025\/09\/grassy-bg.png');background-size:cover;background-position:50% 28.000000000000004%;background-attachment:fixed;background-repeat:no-repeat;}.kb-row-layout-id11032_71cc48-ad > .kt-row-layout-overlay{opacity:1;background:linear-gradient(180deg,var(--global-palette7) 2%,rgba(222,169,162,0.5) 100%);}@media all and (max-width: 1024px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none){.kb-row-layout-id11032_71cc48-ad{background-attachment:scroll;}}@media all and (max-width: 1024px){.kb-row-layout-id11032_71cc48-ad > .kt-row-column-wrap{padding-top:8em;padding-bottom:8em;grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id11032_71cc48-ad > .kt-row-column-wrap{padding-top:4em;padding-right:0em;padding-bottom:4em;padding-left:0em;grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id11032_71cc48-ad alignnone kt-row-has-bg kt-jarallax jl-joelle-podcast-hero-section wp-block-kadence-rowlayout\" data-img-position=\"50% 28.000000000000004%\" data-img-size=\"cover\"><div class=\"kt-row-layout-overlay kt-row-overlay-gradient\"><\/div><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kt-inner-column-height-full kb-theme-content-width\">\n<style>.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{display:flex;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{row-gap:var(--global-kb-gap-none, 0rem );column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;align-items:center;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col > .kb-image-is-ratio-size{align-self:stretch;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col > .wp-block-kadence-advancedgallery{align-self:stretch;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column11032_af2ee2-e8{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{background-color:rgba(247, 241, 240, 0);}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column11032_af2ee2-e8{text-align:center;}.kadence-column11032_af2ee2-e8{position:relative;}@media all and (max-width: 1024px){.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{padding-right:2em;padding-left:2em;flex-direction:column;justify-content:center;align-items:center;}}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column11032_af2ee2-e8{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column11032_af2ee2-e8{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}.kadence-column11032_af2ee2-e8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;align-items:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column11032_af2ee2-e8 kb-section-dir-vertical kb-section-md-dir-vertical kb-section-sm-dir-vertical\"><div class=\"kt-inside-inner-col\">\n<!-- Interactive Purse Playground (WordPress-ready, single block) -->\n<div id=\"purse-playground\" class=\"ppg\">\n  <style>\n    \/* ===== Theme Vars ===== *\/\n    #purse-playground.ppg{\n      --bg:#faf6ff;\n      --ink:#222;\n      --accent:#b68079;\n      --soft:#f3e7e5;\n\t    --bag-scale: 1.2; \n\n      \/* Canvas size you authored at (fixed, then scaled) *\/\n      --canvas-w: 1200px;           \/* BASE_W (must match JS) *\/\n      --canvas-h: 760px;            \/* BASE_H (must match JS) *\/\n      --stage-radius: 20px;\n      --card-radius: 16px;\n      --shadow-1: 0 10px 24px rgba(20,16,56,.08);\n      --shadow-2: 0 6px 18px rgba(20,16,56,.06);\n    }\n\n    \/* ===== Layout ===== *\/\n    #purse-playground .ppg-wrap{ width:100%; max-width:1400px; margin:24px auto; padding:0 16px 40px; }\n    #purse-playground .ppg-row{\n      display:grid; gap:20px;\n      grid-template-columns: minmax(260px, 340px) 1fr;\n      align-items:center;\n    }\n\n    \/* ===== Left Column: individual stacks (no single big box) ===== *\/\n    #purse-playground .ppg-left{ display:grid; gap:14px; }\n\n    \/* Section header *\/\n    #purse-playground .ppg-h1{\n      font-size:28px; line-height:1.2; font-weight:800; color:var(--ink);\n      letter-spacing:.2px; margin:0 0 2px;\n    }\n\n    \/* Segmented tabs *\/\n    #purse-playground .ppg-seg{\n      display:grid; grid-template-columns:repeat(3,1fr); gap:6px;\n      background:var(--soft); padding:6px; border-radius:12px;\n      box-shadow: var(--shadow-2);\n    }\n    #purse-playground .ppg-seg button{\n      border:0; padding:10px 12px; border-radius:10px; background:transparent; cursor:pointer;\n      font-weight:700; color:var(--accent);\n      transition: background-color .5s ease, color .5s ease, box-shadow .5s ease;\n    }\n\t\n\t#purse-playground .ppg-seg button:hover {\n  background: #ceb0ab; \/* slightly darker than your --accent *\/\n  color: #fff;         \/* flip text to white *\/}\n\t\n    #purse-playground .ppg-seg button[aria-pressed=\"true\"]{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); }\n\n    \/* Action buttons row *\/\n    #purse-playground .ppg-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }\n    #purse-playground .ppg-btn{\n      display:inline-flex; align-items:center; justify-content:center; gap:8px;\n      border:1px solid var(--accent); color:#fff; background:var(--accent);\n      padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; font-weight:700;\n      box-shadow: var(--shadow-2);\n    }\n\t#purse-playground .ppg-btn,\n#purse-playground .ppg-btn.secondary {\n  transition: background-color 0.5s ease,\n              border-color 0.5s ease,\n              color 0.5s ease,\n              box-shadow 0.5s ease;\n}\n\t#purse-playground .ppg-btn:hover {\n  background: #c39088; \/* lighter variant of your accent *\/\n  border-color: #c39088;\n}\n#purse-playground .ppg-btn.secondary {\n  background: #cd9f99; \/* soft base *\/\n  color: #fff;         \/* readable ink color *\/\n  border: 0px;\n}\n\n#purse-playground .ppg-btn.secondary:hover {\n  background: #bc8c85; \/* subtle lighter hover *\/\n}\n#purse-playground .ppg-seg button[aria-pressed=\"true\"]:hover {\n  background: #fff; \/* keep the active background *\/\n  color: var(--accent); \/* keep accent text *\/\n  box-shadow: 0 1px 4px rgba(0,0,0,.08); \/* preserve active shadow *\/\n}\n    #purse-playground .ppg-btn:focus-visible{ outline:0px solid #d9c8c4; outline-offset:1px; }\n\n    \/* Spacer line *\/\n    #purse-playground .ppg-divider{ height:1px; background:#eee; margin:6px 0; }\n\n    \/* Lore title + card *\/\n    #purse-playground .ppg-lore-title{\n      font-weight:800; letter-spacing:.2px; color:var(--ink); margin-top:4px;\n    }\n    #purse-playground .ppg-lore{\n      padding:12px; border:1px solid #eee; border-radius:var(--card-radius);\n      background:rgba(255,255,255,.9); backdrop-filter:blur(4px);\n      box-shadow: var(--shadow-2); color:var(--ink);\n      min-height:140px; overflow:auto; font-style:italic;\n    }\n\t\n\t#purse-playground .ppg-lore {\n  font-family: Mulish, sans-serif;\n  font-style: normal;\n  font-size: 15px;\n  line-height:15px;\n  color: #856666; \/* soft mauve-brown *\/\n}\n\n#purse-playground .ppg-lore-title {\n  font-family: \"Butler-UltraLight\", Helvetica, Arial, sans-serif;\n  color: #432e31;\n  font-size:18px;\n  line-height:20px;\n}\n\n    #purse-playground .ppg-muted{ margin:0; color:#856666; font-size:14px; }\n\n    \/* ===== Stage (right side) ===== *\/\n    #purse-playground .ppg-stage{\n      position:relative; border-radius:var(--stage-radius); border:1px solid #eee; overflow:hidden;\n      background:url('http:\/\/www.heyshadylady.com\/graphics\/inmybag\/bg-texture.png') center\/cover no-repeat, #fff;\n      box-shadow: var(--shadow-1);\n      \/* height is injected by JS to match scaled canvas; keep min-height unset *\/\n    }\n    #purse-playground .ppg-inner{ position:relative; height:auto; }\n\n    \/* Fixed-size canvas that scales as one unit *\/\n    #purse-playground .ppg-canvas{\n      position:relative;\n      width:var(--canvas-w);\n      height:var(--canvas-h);\n      transform-origin: top left;\n    }\n\n    \/* Bag (bottom-anchored, perfectly centered on canvas) *\/\n    #purse-playground .ppg-bag{\n      --bag-bottom: 28px;\n      position:absolute; bottom:var(--bag-bottom); left:50%; transform:translateX(-50%);\n  width:  calc(532px * var(--bag-scale)) !important;\n  height: calc(400px * var(--bag-scale)) !important; pointer-events:none; z-index:1;\n    }\n    #purse-playground .ppg-bag img{ width:100% !important; height:100% !important; object-fit:contain; display:block; }\n\n    \/* Hide items until opened *\/\n    #purse-playground .ppg-bag[data-open=\"false\"] ~ .ppg-item{ visibility:hidden; opacity:0; pointer-events:none; }\n\n    \/* Items *\/\n    #purse-playground .ppg-item{ position:absolute; touch-action:none; user-select:none; cursor:grab; border-radius:10px; z-index:2; transition:opacity .2s; }\n    #purse-playground .ppg-item:active{ cursor:grabbing; }\n    #purse-playground .ppg-item .ppg-hit{ position:absolute; inset:0; border-radius:inherit; }\n\n    \/* Hover zoom *\/\n    #purse-playground .ppg-item{ transition: transform 260ms cubic-bezier(.22,.61,.36,1); will-change: transform; }\n    #purse-playground .ppg-item.ppg-ghost{ transition:none; }\n    #purse-playground .ppg-item:not(.ppg-ghost):hover,\n    #purse-playground .ppg-item:focus-visible{ transform:scale(1.06); }\n\n    \/* Anim helpers *\/\n    #purse-playground .ppg-item.ppg-hatch{\n      transition:\n        transform 260ms cubic-bezier(.22,.61,.36,1),\n        left .95s cubic-bezier(.2,.8,.2,1),\n        top .95s  cubic-bezier(.2,.8,.2,1),\n        width .95s cubic-bezier(.2,.8,.2,1),\n        height .95s cubic-bezier(.2,.8,.2,1),\n        opacity .6s ease;\n      will-change: transform, left, top, width, height, opacity;\n    }\n    #purse-playground .ppg-item.ppg-home{\n      transition:\n        transform 260ms cubic-bezier(.22,.61,.36,1),\n        left .7s cubic-bezier(.25,.8,.25,1),\n        top  .7s cubic-bezier(.25,.8,.25,1);\n      will-change: transform, left, top;\n    }\n    #purse-playground .ppg-item.ppg-close{\n      transition:\n        left .7s cubic-bezier(.25,.8,.25,1),\n        top  .7s cubic-bezier(.25,.8,.25,1),\n        width .7s cubic-bezier(.25,.8,.25,1),\n        height .7s cubic-bezier(.25,.8,.25,1),\n        opacity .6s ease;\n      will-change: left, top, width, height, opacity;\n    }\n    #purse-playground .ppg-item.ppg-ghost{ transition:none !important; }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 980px){\n      #purse-playground .ppg-row{ grid-template-columns:1fr; }\n      #purse-playground .ppg-actions{ grid-template-columns:1fr; }\n    }\n  <\/style>\n\n  <div class=\"ppg-wrap\" aria-live=\"polite\">\n    <div class=\"ppg-row\">\n      <!-- LEFT COLUMN (separate sections) -->\n      <div class=\"ppg-left\">\n<CENTER><img decoding=\"async\" src=\"http:\/\/www.heyshadylady.com\/graphics\/inmybag\/purse-header1.png\"><\/center>\n\n        <div class=\"ppg-seg\" role=\"tablist\" aria-label=\"Purse presets\">\n          <button type=\"button\" role=\"tab\" class=\"ppg-segbtn\" data-preset=\"main\" aria-pressed=\"true\">Main<\/button>\n          <button type=\"button\" role=\"tab\" class=\"ppg-segbtn\" data-preset=\"hiking\" aria-pressed=\"false\">Hiking<\/button>\n          <button type=\"button\" role=\"tab\" class=\"ppg-segbtn\" data-preset=\"work\" aria-pressed=\"false\">Work<\/button>\n        <\/div>\n\n        <div class=\"ppg-actions\">\n          <button class=\"ppg-btn\" id=\"ppg-primary\">Peek inside<\/button>\n          <button class=\"ppg-btn secondary\" id=\"ppg-away\" style=\"display:none\">clean up<\/button>\n        <\/div>\n<CENTER><img decoding=\"async\" src=\"http:\/\/www.heyshadylady.com\/graphics\/alice-divider.gif\"><BR>\n\n<img decoding=\"async\" src=\"http:\/\/www.heyshadylady.com\/graphics\/inmybag\/purse-header2.png\"><\/center>\n        <div class=\"ppg-lore\" id=\"ppg-lore\">\n          <div class=\"ppg-lore-empty\">every trinket carries a lil story&#8230;<BR>hover to explore \u2661<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT: Stage -->\n      <main class=\"ppg-stage\" aria-label=\"Interactive stage\">\n        <div class=\"ppg-inner\" id=\"ppg-stage\">\n          <div class=\"ppg-canvas\" id=\"ppg-canvas\">\n            <!-- Bag -->\n            <div class=\"ppg-bag\" id=\"ppg-bag\" data-open=\"false\" aria-hidden=\"true\" style=\"bottom:var(--bag-bottom);\">\n              <img decoding=\"async\" id=\"ppg-bag-img\" src=\"http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseDC.png\" alt=\"\">\n            <\/div>\n            <!-- Items are injected here -->\n          <\/div>\n        <\/div>\n      <\/main>\n    <\/div>\n  <\/div>\n\n  <script>\n  (function(){\n    const root = document.getElementById('purse-playground');\n\n    \/* Viewport + Canvas *\/\n    const viewport = root.querySelector('#ppg-stage');\n    const canvas   = root.querySelector('#ppg-canvas');\n    const bag      = root.querySelector('#ppg-bag');\n    const bagImg   = root.querySelector('#ppg-bag-img');\n\n    const segButtons = root.querySelectorAll('.ppg-segbtn');\n    const btnPrimary = root.querySelector('#ppg-primary');\n    const btnAway    = root.querySelector('#ppg-away');\n    const loreBox    = root.querySelector('#ppg-lore');\n\n    \/* MUST match CSS vars above *\/\n    const BASE_W = 1200;\n    const BASE_H = 760;\n\n    let CURRENT_SCALE = 1;\n    let zCounter = 10;\n\n    \/* Scale fixed canvas to viewport width; set viewport height so the stage box matches *\/\n    function rescaleCanvas(){\n      const vw = viewport.clientWidth || BASE_W;\n      const scale = vw \/ BASE_W;\n      CURRENT_SCALE = scale;\n      canvas.style.transform = `scale(${scale})`;\n      viewport.style.height = (BASE_H * scale) + 'px';\n    }\n    const ro = new ResizeObserver(rescaleCanvas);\n    ro.observe(viewport);\n    window.addEventListener('orientationchange', rescaleCanvas);\n\n    const ORIGIN = { left: 620, top: 440 }; \/\/ launch\/fold point (canvas pixels)\n\n    const BAG_IMG = {\n      daily: { closed: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseDC.png', open: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseDO.png' },\n      hiking:{ closed: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseHC.png', open: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseHO.png' },\n      work:  { closed: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseWC.png', open: 'http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/purseWO.png' }\n    };\n\n    const ITEM_FILES = {\n      'acorn':'icon-acorn.png','chapsticktube':'icon-chapsticktube.png','clifbar':'icon-clifbar.png','compass':'icon-compass.png','feather':'icon-feather.png','firstaid':'icon-firstaid.png','hikingjournal':'icon-hikingjournal.png','knife':'icon-knife.png','microphone':'icon-microphone.png','paracord':'icon-paracord.png','pencil':'icon-pencil.png','rock':'icon-rock.png','selfiestick':'icon-selfiestick.png','sunglasses':'icon-sunglasses.png','trailmap':'icon-trailmap.png','trailmix':'icon-trailmix.png','waterbottle':'icon-waterbottle.png','whistle':'icon-whistle.png',\n      'acrylic':'icon-acrylic.png','cellphone':'icon-cellphone.png','change':'icon-change.png','changepurse':'icon-changepurse.png','chapstickround':'icon-chapstickround.png','crystals':'icon-crystals.png','debit':'icon-debit.png','deodorant':'icon-deodorant.png','dogtreats':'icon-dogtreats.png','dogbags':'icon-dogbags.png','keys':'icon-keys.png','luckypenny':'icon-luckypenny.png','receipt':'icon-receipt.png','rippedpaper':'icon-rippedpaper.png','sanitizer':'icon-sanitizer.png','scrunchie':'icon-scrunchie.png','tarot':'icon-tarot.png','wallet':'icon-wallet.png',\n      'aspirin':'icon-aspirin.png','camera':'icon-camera.png','charger':'icon-charger.png','clawclip':'icon-clawclip.png','coffee':'icon-coffee.png','crumpledpaper':'icon-crumpledpaper.png','earbuds':'icon-earbuds.png','eyedrops':'icon-eyedrops.png','gum':'icon-gum.png','journal':'icon-journal.png','laptop':'icon-laptop.png','makeup':'icon-makeup.png','paper':'icon-paper.png','penbrown':'icon-penbrown.png','pengreen':'icon-pengreen.png','toothpick':'icon-toothpick.png','lipgloss':'icon-lipgloss.png'\n    };\n\n    function itemImg(label){\n      const file = ITEM_FILES[label] || ('item-' + label.toLowerCase().replace(\/[^a-z0-9]+\/g,'-').replace(\/^-|-$\/g,'') + '.png');\n      return `<img decoding=\"async\" src=\"http:\/\/www.heyshadylady.com\/graphics\/inmybag\/resized\/${file}\" alt=\"\" aria-hidden=\"true\" style=\"width:100%;height:100%;display:block;\">`;\n    }\n\n    function bagKeyForPreset(preset){ return preset === 'main' ? 'daily' : preset; }\n    function setBagGraphic(){\n      const key = bagKeyForPreset(current);\n      bagImg.src = BAG_IMG[key][state[current].open ? 'open' : 'closed'];\n    }\n\n    const LORE = { common: {\n      'half a bottle of aspirin': 'chronic migraines with aura means i gotta have my painkillers always handy.... isn\\'t being an adult fun?',\n\t  'my trusty canon t3i': 'this baby is over 10 years old, and it\\'s one of the best purchases i ever made! at work i use it to capture amazing vibey photos of my clients for use in their branding. but it\\'s also fun to photograph the occasional flower or creature...',\n\t  'do you have a charger?': 'when i\\'m working, the battery on my phone runs down so fast! i\\'m either using the camera or listening to some 3-hour video essay on youtube... so i gotta have a charger ready 2 go!',\n\t  'claw clip': 'locked in so hard i worked up a sweat, so i gotta put my hair up!',\n\t  'iced coffee': 'brown sugar, almond syrup + espresso creaminess! (with LOADS of ice) ... the sacred brew that holds my soul together.',\n\t  'crumpled paper': 'when you uncrumble this paper, it says<BR>\\\"if you\\'re reading this, you\\'re probably nosy... and i love that for you \u2661\\\"',\n\t  'wireless ear buds': 'i work best when there\\'s a cryptid podcast playing and my brain forgets i\\'m in a body.',\n\t  'eye drops': 'stay hydrated isn\\'t just about drinking water!',\n\t  'gum or breath mints': 'a little oral fixation as a treat',\n\t  'journal': 'there\\'s always notes to jot down when i\\'m running between tasks and pretending i\\'m not spiraling.',\n      'my lil laptop': 'a gift from my bestie... now i\\'m able to work on the run! i\\'m trying to resist installing steam on it \ud83d\ude33',\n\t  'makeup compact': 'i don\\'t typically wear a lot of makeup anymore, but it\\'s always nice to have a mirror on me',\n\t  'paper with random notes': 'probably notes from a work meeting 5 weeks ago that is definitely no longer relevant, but i\\'m a little too overwhelmed to sort.',\n\t  'my favorite brown pen': 'my absolute fav... writes like a dream and vanishes like a cryptid. i swear the green one hides it out of jealousy.',\n\t  'mossy green pen': 'writes just well enough that i won\\'t throw it away.',\n\t  'toothpick': 'i\\'m always prepped with floss or toothpicks when i\\'m on the go at work bc i do love me an everything bagel \ud83d\ude2d',\n\t  'lip gloss': 'the illusion of hydration and a life in order... all in one tube!',\n\t  'random acrylic nail': 'unfortunately there\\'s always a random acrylic nail <i>or two<\/i> floating around in my purse. i\\'m a DIY press-on girlie, and don\\'t always have nail glue on me \ud83d\ude29',\n\t  'handy dandy cell phone': 'i\\'ve come so far since the days of my nextel or verizon razr... still gotta have my cellphone with me everywhere, and u know i always gotta keep it equipped with a cute lil bunny case :3',\n\t  'loose change': 'pennies, dimes, rogue nickels, and one mysterious foreign coin i won\\'t get rid of.',\n\t  'mousey the changepurse': 'love this lil guy, a cute leather mouse change purse! it\\'s survived many things being spilled on it, and getting dropped and thrown around! packed full of delicious quarters and far too many pennies.',\n\t  'medicated lip balm': 'it soothes... it heals... it protects....<BR>my current favorite is carmex, minty balms are the best.',\n\t  'a few crystals': 'part metaphysical trinket, part fidget toy.',\n\t  'debit card': 'she screams a little every time i tap to pay...',\n\t  'deodorant': 'emergency freshness field kit. sometimes i remember to use it before leaving. sometimes i\\'m applying it at a red light.',\n\t  'dog treats': 'moxie tax. payment for services rendered, like \"not making me spill my coffee\" or \"not chasing that toddler\"',\n\t  'car keys': 'can\\'t go anywhere without these babies! lucky number 444 serving up protection and a cute crochet keychain i\\'ve had for years from one of my old favorite customers during my barista days.',\n\t  'lucky penny': 'not all pennies are lucky but this one had a vibe... found it in the tip jar one day, and the red heart screamed out to me to hoard this like a dragon',\n\t  'random receipt': 'i always think i\\'ll \"keep track of things better this month\" ... and i rarely do.',\n\t  'ripped paper': 'if you grab this from my purse i\\'ll probably snatch it from your hand bc who knows what i wrote on there... \ud83d\ude33',\n      'hand sanitizer': 'very necessary after a moxie potty break... or brushing against one (1) weird person too closely',\n\t  'scrunchie': 'why did i decide to grow my hair long if i\\'m just always gonna put it up? \ud83d\ude2d',\n\t  'current fav tarot deck': 'i rarely leave home without a tarot deck... you never know when someone\\'s going to ask \"so what\\'s my vibe?\" and you gotta hit \\'em with full moon emotional damage over a peppermint mocha.',\n\t  'my cute wallet': 'stamped with a lil busy bee to remind me to get down to business... even though most of my business is impulse-buying decor and regretting it later',\n\t  'dog bags': 'leave no trace behind! even if that means moxie\\'s little potty breaks...',\n\t  'an acorn that called to me': 'it\\'s not really a hike if you don\\'t come home with a few forest treasures. acorns are some of my favorites because they carry around their own cute little hats.',\n\t  'trusty chapstick': 'when i\\'m hiking, i bring a waxy medicated chapstick to help with sunburn + wind chapping!',\n\t  'clif bar': 'one of my favorite protein bars! bring a few dove dark chocolate pieces with you, and alternate with bites of the peanut butter clif bar and you\\'re in business!',\n\t  'compass': 'another one of those \"seems important to have\" items for the serious hiker that i have yet to need',\n\t  'goose feather': 'i always manage to find at least one feather when i\\'m out and about... sometimes i even find dozens \ud83d\ude33',\n\t  'mini first aid kit': 'we love a prepared queen \ud83d\udc85\ud83c\udffb this has so many useful gadgets in it, but pls never let me need the tourniquette...',\n\t  'hiking journal': 'i love that this is just for me, so i don\\'t worry about aesthetics or anything when i\\'m up on a lil blue ridge summit and trying to doodle the mountain ranges in the distance',\n\t  'pocket knife': 'i literally use this thing all the time for the dumbest stuff, but it saves me using my teeth to open random things lol',\n      'fuzzy hand-held mic': 'because you never know when the forest will demand a podcast.',\n\t  'pencil': 'my dad always had a pencil he sharpened with a knife in his workspace so i thought to carry the tradition on in my hikes. it never runs out of ink!',\n\t  'river rock': 'we imprinted upon each other during the last river crossing and now i must bring it with me...',\n\t  'selfie stick': 'tbh i\\'m too embarrassed to use this when people are around, but i\\'m trying to be a little more shameless',\n\t  'sunglasses': 'they don\\'t call me shady lady for nothin.<BR>sometimes these live on my face, and other times they vanish for weeks.',\n\t  'well-used trail map': 'nature has taught me multiple times that you can\\'t depend on technology, so now i make sure to have a printed map with me when i\\'m on long hikes',\n\t  'trail mix': 'some almonds, pretzels and dark chocolate can get me through just about any crisis',\n\t  'insulated water bottle': 'hydrate or die-drate, queen :)',\n\t  'whistle': 'for emergencies or dramatic entrances. never been used and hopefully never will be. but i like knowing it\\'s there.',\n\t  'paracord': 'i don\\'t know how to use it, but i <i>feel<\/i> more prepared when i carry it... a little \"just-in-case\" energy in a world that never gives me any warnings.'\n    }};\n\n    function showLore(label){\n      const text = (LORE[current] && LORE[current][label]) || LORE.common[label] || '';\n      loreBox.innerHTML = text\n        ? `<div class=\"ppg-lore-title\">${label}<\/div><div>${text}<\/div>`\n        : `<div class=\"ppg-lore-empty\">${label ? 'no lore yet for <strong>'+label+'<\/strong>.' : 'every trinket carries a lil story...<BR>hover to explore \u2661'}<\/div>`;\n    }\n    function clearLore(){ loreBox.innerHTML = '<div class=\"ppg-lore-empty\">every trinket carries a lil story...<BR>hover to explore \u2661<\/div>'; }\n\n    \/* ------- Presets (unchanged positions) ------- *\/\n    function I(label,x,y,w,h,html,opts={}){ return {label,x,y,w,h,html,...opts}; }\n    const PRESETS = {\n      main: [\nI('random acrylic nail', 822, 197, 32, 54, itemImg('acrylic'), {z:1}),\nI('car keys', 1008, 402, 181, 309, itemImg('keys'), {z:1}),\nI('handy dandy cell phone', 846, 382, 142, 211, itemImg('cellphone'), {z:1}),\nI('loose change', 332, 100, 81, 59, itemImg('change'), {z:1}),\nI('mousey the changepurse', 86, 259, 141, 65, itemImg('changepurse'), {z:1}),\nI('medicated lip balm', 690, 70, 72, 82, itemImg('chapstickround'), {z:2}),\nI('a few crystals', 994, 209, 83, 114, itemImg('crystals'), {z:2}),\nI('debit card', 101, 142, 115, 81, itemImg('debit'), {z:2}),\nI('deodorant', 82, 392, 66, 155, itemImg('deodorant'), {z:1}),\nI('dog treats', 271, 562, 77, 62, itemImg('dogtreats'), {z:2}),\nI('hand sanitizer', 139, 456, 73, 127, itemImg('sanitizer'), {z:2}),\nI('lucky penny', 398, 296, 47, 45, itemImg('luckypenny'), {z:2}),\nI('dog bags', 231, 532, 71, 118, itemImg('dogbags'), {z:1}),\nI('random receipt', 321, 197, 107, 183, itemImg('receipt'), {z:1}),\nI('ripped paper', 293, 250, 67, 106, itemImg('rippedpaper'), {z:2}),\nI('scrunchie', 745, 61, 136, 119, itemImg('scrunchie'), {z:1}),\nI('current fav tarot deck', 1044, 108, 105, 153, itemImg('tarot'), {z:1}),\nI('my cute wallet', 31, 66, 152, 95, itemImg('wallet'), {z:1})\n      ],\n      hiking: [\n\t\tI('handy dandy cell phone', 109, 463, 142, 211, itemImg('cellphone'), {z:1}),\nI('an acorn that called to me', 370, 343, 57, 80, itemImg('acorn'), {z:1}),\nI('trusty chapstick', 799, 236, 35, 121, itemImg('chapsticktube'), {z:1}),\nI('clif bar', 1029, 142, 89, 164, itemImg('clifbar'), {z:2}),\nI('compass', 81, 158, 87, 114, itemImg('compass'), {z:3}),\nI('goose feather', 540, 197, 84, 166, itemImg('feather'), {z:2}),\nI('mini first aid kit', 360, 115, 134, 104, itemImg('firstaid'), {z:1}),\nI('hiking journal', 128, 130, 154, 242, itemImg('hikingjournal'), {z:2}),\nI('pocket knife', 956, 338, 83, 226, itemImg('knife'), {z:1}),\nI('fuzzy hand-held mic', 223, 477, 79, 135, itemImg('microphone'), {z:1}),\nI('paracord', 1015, 591, 114, 124, itemImg('paracord'), {z:1}),\nI('pencil', 292, 204, 23, 168, itemImg('pencil'), {z:1}),\nI('river rock', 586, 261, 100, 108, itemImg('rock'), {z:1}),\nI('selfie stick', 39, 275, 72, 461, itemImg('selfiestick'), {z:1}),\nI('sunglasses', 636, 82, 231, 98, itemImg('sunglasses'), {z:1}),\nI('well-used trail map', 51, 62, 175, 146, itemImg('trailmap'), {z:1}),\nI('trail mix', 936, 72, 136, 169, itemImg('trailmix'), {z:1}),\nI('insulated water bottle', 836, 373, 109, 328, itemImg('waterbottle'), {z:1}),\nI('whistle', 1025, 520, 119, 137, itemImg('whistle'), {z:1})\n      ],\n      work: [\n\t  \t\tI('handy dandy cell phone', 496, 200, 142, 211, itemImg('cellphone'), {z:1}),\nI('half a bottle of aspirin', 675, 169, 65, 116, itemImg('aspirin'), {z:1}),\nI('my trusty canon t3i', 949, 544, 190, 157, itemImg('camera'), {z:1}),\nI('do you have a charger?', 308, 93, 146, 125, itemImg('charger'), {z:2}),\nI('claw clip', 49, 333, 137, 96, itemImg('clawclip'), {z:1}),\nI('iced coffee', 216, 409, 108, 325, itemImg('coffee'), {z:1}),\nI('crumpled paper', 801, 69, 75, 77, itemImg('crumpledpaper'), {z:1}),\nI('wireless ear buds', 446, 42, 81, 50, itemImg('earbuds'), {z:1}),\nI('eye drops', 730, 209, 41, 94, itemImg('eyedrops'), {z:2}),\nI('gum or breath mints', 866, 548, 41, 135, itemImg('gum'), {z:1}),\nI('journal', 884, 107, 201, 256, itemImg('journal'), {z:1}),\nI('my lil laptop', 23, 77, 445, 212, itemImg('laptop'), {z:1}),\nI('lip gloss', 112, 487, 40, 167, itemImg('lipgloss'), {z:1}),\nI('makeup compact', 45, 541, 86, 138, itemImg('makeup'), {z:2}),\nI('paper with random notes', 949, 50, 181, 219, itemImg('paper'), {z:2}),\nI('my favorite brown pen', 953, 379, 164, 31, itemImg('penbrown'), {z:1}),\nI('mossy green pen', 985, 144, 30, 171, itemImg('pengreen'), {z:3}),\nI('toothpick', 920, 479, 82, 86, itemImg('toothpick'), {z:1})\n      ]\n    };\n\n    const state = { main:initPresetState(), hiking:initPresetState(), work:initPresetState() };\n    let current = 'main';\n    function initPresetState(){ return { open:false, positions:null, touched:false }; }\n\n    function clearItems(){ canvas.querySelectorAll('.ppg-item').forEach(n=>n.remove()); }\n\n    function presetSnapshot(preset){\n      return PRESETS[preset].map(d=>({ left:d.x+'px', top:d.y+'px', w:d.w+'px', h:d.h+'px', bg:d.bg||'transparent', html:d.html, label:d.label, z:d.z }));\n    }\n\n    function targetPositions(){\n      const st = state[current];\n      return (st.positions && st.positions.length) ? st.positions : presetSnapshot(current);\n    }\n\n    function renderPreset(preset){\n      current = preset;\n      clearItems();\n      const st = state[preset] || (state[preset]=initPresetState());\n      const positions = (st.positions && st.positions.length) ? st.positions : presetSnapshot(preset);\n\n      const maxZ = positions.reduce((m,p)=>Math.max(m, (p.z!=null? +p.z : 2)), 2);\n      if (maxZ > zCounter) zCounter = maxZ;\n\n      positions.forEach(p=>{\n        const el = document.createElement('div');\n        el.className='ppg-item';\n        el.setAttribute('tabindex','0');\nel.dataset.tip = p.label || '';\nel.dataset.tooltip = p.label || '';\n        el.style.left = p.left; el.style.top = p.top; el.style.width = p.w; el.style.height = p.h; el.style.background = p.bg || 'transparent';\n        el.style.zIndex = (p.z != null ? p.z : ++zCounter);\n        el.innerHTML = '<div class=\"ppg-hit\" aria-label=\"'+(p.label||'item')+'\" role=\"img\"><\/div>' + p.html;\n        canvas.appendChild(el);\n        makeDraggable(el);\n        el.addEventListener('mouseenter', ()=> showLore(el.dataset.tip));\n        el.addEventListener('focus', ()=> showLore(el.dataset.tip));\n        el.addEventListener('mouseleave', clearLore);\n        el.addEventListener('blur', clearLore);\n      });\n\n      bag.dataset.open = st.open ? 'true' : 'false';\n      setBagGraphic();\n      syncButtons();\n      clearLore();\n      rescaleCanvas(); \/\/ ensure stage height matches after DOM changes\n    }\n\n    function positionsFromDOM(){\n      return Array.from(canvas.querySelectorAll('.ppg-item')).map(el=>({\n        left:el.style.left, top:el.style.top, w:el.style.width, h:el.style.height,\n        bg:el.style.background, html:el.innerHTML.replace(\/^[\\s\\S]*?<\\\/div>\/,''), label:el.dataset.tip,\n        z: (el.style.zIndex !== '' ? +el.style.zIndex : 2)\n      }));\n    }\n\n    function savePositions(){\n      state[current].positions = positionsFromDOM();\n      state[current].touched = true;\n    }\n\n    \/* Open animation (from bag origin) *\/\n    function animateEntryFromZero(){\n      clearItems();\n      const targets = targetPositions();\n\n      const maxZ = targets.reduce((m,p)=>Math.max(m, (p.z!=null? +p.z : 2)), 2);\n      if (maxZ > zCounter) zCounter = maxZ;\n\n      targets.forEach(p=>{\n        const el=document.createElement('div');\n        el.className='ppg-item ppg-hatch';\n        el.setAttribute('tabindex','0');\nel.dataset.tip = p.label;\nel.dataset.tooltip = p.label;\n        el.style.zIndex = (p.z != null ? p.z : ++zCounter);\n\n        el.style.left = ORIGIN.left+'px';\n        el.style.top  = ORIGIN.top+'px';\n        el.style.width='0px';\n        el.style.height='0px';\n        el.style.opacity='0';\n        el.style.background=p.bg||'transparent';\n\n        el.innerHTML='<div class=\"ppg-hit\" aria-label=\"'+p.label+'\" role=\"img\"><\/div>'+p.html;\n        canvas.appendChild(el);\n        makeDraggable(el);\n\n        el.addEventListener('mouseenter', ()=> showLore(el.dataset.tip));\n        el.addEventListener('focus', ()=> showLore(el.dataset.tip));\n        el.addEventListener('mouseleave', clearLore);\n        el.addEventListener('blur', clearLore);\n\n        requestAnimationFrame(()=>{ requestAnimationFrame(()=>{\n          el.style.left = p.left; el.style.top = p.top; el.style.width = p.w; el.style.height = p.h; el.style.opacity='1';\n        });});\n      });\n\n      clearLore();\n    }\n\n    \/* Put items away to preset positions *\/\n    function putItemsAway(){\n      const defs = PRESETS[current];\n      const byLabel = Object.fromEntries(defs.map(d=>[d.label, d]));\n      const items = Array.from(canvas.querySelectorAll('.ppg-item'));\n\n      state[current].positions = presetSnapshot(current);\n      state[current].touched = false;\n\n      if(!items.length){ syncButtons('after-away'); return; }\n\n      let finished = 0;\n      items.forEach(el=>{\n        const d = byLabel[el.dataset.tip];\n        if(!d) return;\n        el.classList.add('ppg-home');\n        void el.offsetWidth;\n        el.style.left = d.x+'px';\n        el.style.top  = d.y+'px';\n        el.style.zIndex = (d.z != null ? d.z : 2);\n        el.addEventListener('transitionend', function onEnd(ev){\n          if(ev.propertyName === 'top' || ev.propertyName === 'left'){\n            el.removeEventListener('transitionend', onEnd);\n            el.classList.remove('ppg-home');\n            if(++finished === items.length){ \/* done *\/ }\n          }\n        });\n      });\n\n      syncButtons('after-away');\n      clearLore();\n    }\n\n    \/* Close\/fold *\/\n    function foldItemsToOrigin(){\n      return new Promise(resolve=>{\n        const items = Array.from(canvas.querySelectorAll('.ppg-item'));\n        if(!items.length){ resolve(); return; }\n        let done = 0;\n        items.forEach(el=>{\n          el.classList.add('ppg-close');\n          void el.offsetWidth;\n          el.style.left = ORIGIN.left+'px';\n          el.style.top  = ORIGIN.top+'px';\n          el.style.width='0px';\n          el.style.height='0px';\n          el.style.opacity='0';\n          el.addEventListener('transitionend', function onEnd(ev){\n            if(['left','top','height'].includes(ev.propertyName)){\n              el.removeEventListener('transitionend', onEnd);\n              if(++done === items.length){ resolve(); }\n            }\n          });\n        });\n      });\n    }\n\n    \/* Buttons \/ state *\/\n    function openBag(){\n      bag.dataset.open = 'true';\n      state[current].open = true;\n      setBagGraphic();\n      syncButtons();\n      animateEntryFromZero();\n    }\n    async function closeBag(){\n      state[current].positions = positionsFromDOM();\n      await foldItemsToOrigin();\n      clearItems();\n      bag.dataset.open = 'false';\n      state[current].open = false;\n      setBagGraphic();\n      syncButtons();\n    }\n    function syncButtons(){\n      const st = state[current];\n      if(st.open){\n        btnPrimary.textContent = 'Close bag';\n        btnAway.style.display = 'inline-flex';\n      } else {\n        btnPrimary.textContent = 'Peek inside';\n        btnAway.style.display = 'none';\n      }\n    }\n\n    btnPrimary.addEventListener('click', ()=>{ state[current].open ? closeBag() : openBag(); });\n    btnAway.addEventListener('click', putItemsAway);\n\n    segButtons.forEach(btn=>btn.addEventListener('click',()=>{\n      segButtons.forEach(b=>b.setAttribute('aria-pressed','false'));\n      btn.setAttribute('aria-pressed','true');\n      renderPreset(btn.dataset.preset);\n      setBagGraphic();\n    }));\n\n    \/* Scale-aware dragging *\/\n    function makeDraggable(el){\n      let startX=0,startY=0,origL=0,origT=0,drag=false;\n      const bringToFront = ()=>{ el.style.zIndex = ++zCounter; };\n\n      const down=(cx,cy)=>{\n        drag=true; bringToFront(); el.classList.add('ppg-ghost');\n        startX=cx; startY=cy; origL=parseFloat(el.style.left||ORIGIN.left); origT=parseFloat(el.style.top||ORIGIN.top);\n        window.addEventListener('mousemove',move);\n        window.addEventListener('touchmove',tmove,{passive:false});\n        window.addEventListener('mouseup',up);\n        window.addEventListener('touchend',up);\n      };\n      const move=e=>{ if(!drag) return; to(e.clientX,e.clientY); };\n      const tmove=e=>{ if(!drag) return; e.preventDefault(); const t=e.touches[0]; to(t.clientX,t.clientY); };\n      const to=(cx,cy)=>{ const dx=(cx-startX)\/CURRENT_SCALE, dy=(cy-startY)\/CURRENT_SCALE; el.style.left=(origL+dx)+'px'; el.style.top=(origT+dy)+'px'; };\n      const up=()=>{ drag=false; el.classList.remove('ppg-ghost');\n        window.removeEventListener('mousemove',move); window.removeEventListener('touchmove',tmove);\n        window.removeEventListener('mouseup',up); window.removeEventListener('touchend',up);\n        savePositions();\n      };\n\n      el.addEventListener('mousedown',e=>{ if(e.button!==0) return; down(e.clientX,e.clientY); });\n      el.addEventListener('touchstart',e=>{ const t=e.touches[0]; down(t.clientX,t.clientY); },{passive:true});\n      el.addEventListener('focus', bringToFront);\n\n      el.addEventListener('keydown',e=>{\n        const step = e.shiftKey ? 10 : 2;\n        const l=parseFloat(el.style.left||ORIGIN.left);\n        const t=parseFloat(el.style.top||ORIGIN.top);\n        if(e.key==='ArrowLeft'){ el.style.left=(l-step)+'px'; e.preventDefault(); savePositions(); }\n        if(e.key==='ArrowRight'){ el.style.left=(l+step)+'px'; e.preventDefault(); savePositions(); }\n        if(e.key==='ArrowUp'){ el.style.top=(t-step)+'px'; e.preventDefault(); savePositions(); }\n        if(e.key==='ArrowDown'){ el.style.top=(t+step)+'px'; e.preventDefault(); savePositions(); }\n      });\n    }\n\n    \/* Boot *\/\n    renderPreset('main');\n    rescaleCanvas();\n  })();\n  <\/script>\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Main Hiking Work Peek inside clean up every trinket carries a lil story&#8230;hover to explore \u2661<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-11032","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"heyshadylady","author_link":"https:\/\/heyshadylady.com\/staging\/2808\/author\/admin\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/pages\/11032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/comments?post=11032"}],"version-history":[{"count":176,"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/pages\/11032\/revisions"}],"predecessor-version":[{"id":12713,"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/pages\/11032\/revisions\/12713"}],"wp:attachment":[{"href":"https:\/\/heyshadylady.com\/staging\/2808\/wp-json\/wp\/v2\/media?parent=11032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}