Holistic Wellbeing | The Architecture of a Whole Person<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n body {\n margin: 0;\n background: #F5F1EA;\n }\n\n .embed-page {\n --site-header-offset: 72px;\n --font-display: 'Playfair Display', Georgia, serif;\n --font-body: 'Source Serif Pro', Georgia, serif;\n --font-ui: 'Inter', system-ui, sans-serif;\n --color-dark: #291911;\n --color-light: #F5F1EA;\n --color-accent: #B5935F;\n --color-muted: #553A28;\n --color-border: #D2CCC5;\n --color-bg-alt: #E4DDD2;\n --color-success: #6B8F5E;\n --color-text: #6A4B35;\n font-family: var(--font-body);\n background: var(--color-light);\n color: var(--color-muted);\n line-height: 1.75;\n -webkit-font-smoothing: antialiased;\n }\n\n .embed-page * {\n box-sizing: border-box;\n }\n\n .embed-page a {\n color: inherit;\n }\n\n .embed-page .page-subnav-wrap {\n position: sticky;\n top: var(--site-header-offset);\n z-index: 40;\n padding: 10px 18px 0;\n background: transparent;\n }\n\n .embed-page .page-subnav {\n max-width: 1180px;\n margin: 0 auto;\n padding: 12px 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n border: 1px solid var(--color-border);\n border-radius: 16px;\n background: rgba(245, 241, 234, 0.92);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 8px 24px rgba(41, 25, 17, 0.05);\n }\n\n .embed-page .page-subnav-left {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-muted);\n white-space: nowrap;\n }\n\n .embed-page .page-subnav-left .dot {\n color: var(--color-accent);\n font-size: 10px;\n }\n\n .embed-page .page-subnav-left .read-time {\n color: var(--color-dark);\n }\n\n .embed-page .page-subnav-links {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 18px;\n }\n\n .embed-page .page-subnav-links a {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--color-muted);\n opacity: 0.86;\n transition: color 0.15s ease, opacity 0.15s ease;\n }\n\n .embed-page .page-subnav-links a:hover {\n color: var(--color-dark);\n opacity: 1;\n }\n\n .embed-page .hero-cover {\n min-height: 80vh;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 76px 34px 56px;\n overflow: hidden;\n background:\n radial-gradient(circle at 18% 20%, rgba(181,147,95,0.12), transparent 24%),\n radial-gradient(circle at 82% 22%, rgba(181,147,95,0.10), transparent 22%),\n radial-gradient(circle at 72% 78%, rgba(107,143,94,0.08), transparent 20%),\n linear-gradient(180deg, #f7f3ec 0%, #f5f1ea 100%);\n }\n\n .embed-page .hero-shell {\n position: relative;\n z-index: 2;\n max-width: 1120px;\n width: 100%;\n text-align: center;\n }\n\n .embed-page .hero-kicker {\n display: inline-flex;\n align-items: center;\n gap: 14px;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 34px;\n }\n\n .embed-page .hero-kicker .ornament {\n font-size: 11px;\n color: var(--color-accent);\n }\n\n .embed-page .hero-title {\n font-family: var(--font-display);\n font-size: clamp(46px, 7vw, 92px);\n font-weight: 400;\n line-height: 0.98;\n letter-spacing: -0.03em;\n color: var(--color-dark);\n max-width: 980px;\n margin: 0 auto;\n text-wrap: balance;\n }\n\n .embed-page .hero-title em {\n font-style: italic;\n font-weight: 300;\n color: #7a6450;\n }\n\n .embed-page .hero-standfirst {\n max-width: 760px;\n margin: 34px auto 0;\n font-size: 22px;\n line-height: 1.72;\n color: var(--color-text);\n }\n\n .embed-page .hero-meta {\n margin-top: 34px;\n display: inline-flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(85,58,40,0.72);\n }\n\n .embed-page .hero-meta span {\n padding: 8px 12px;\n border: 1px solid rgba(210,204,197,0.9);\n border-radius: 999px;\n background: rgba(255,255,255,0.35);\n }\n\n .embed-page .hero-paper {\n position: absolute;\n z-index: 1;\n border: 1px solid rgba(210,204,197,0.9);\n background: rgba(255,255,255,0.38);\n box-shadow: 0 18px 40px rgba(41,25,17,0.06);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n pointer-events: none;\n }\n\n .embed-page .hero-paper::before {\n content: '';\n position: absolute;\n inset: 12px;\n border: 1px solid rgba(181,147,95,0.20);\n }\n\n .embed-page .hero-paper::after {\n content: '';\n position: absolute;\n left: 18px;\n right: 18px;\n top: 24px;\n height: 1px;\n background: rgba(181,147,95,0.22);\n box-shadow:\n 0 16px 0 rgba(181,147,95,0.18),\n 0 32px 0 rgba(181,147,95,0.14),\n 0 48px 0 rgba(181,147,95,0.10);\n }\n\n .embed-page .paper-a { width: 150px; height: 190px; left: 7%; top: 16%; transform: rotate(-7deg); }\n .embed-page .paper-b { width: 132px; height: 164px; right: 8%; top: 14%; transform: rotate(6deg); }\n .embed-page .paper-c { width: 180px; height: 116px; left: 10%; bottom: 16%; transform: rotate(4deg); }\n .embed-page .paper-d { width: 165px; height: 110px; right: 10%; bottom: 18%; transform: rotate(-5deg); }\n\n .embed-page .content {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 40px;\n }\n\n .embed-page .prose {\n max-width: 640px;\n }\n\n .embed-page section {\n padding: 120px 0;\n }\n\n .embed-page hr {\n border: none;\n height: 1px;\n background: var(--color-border);\n max-width: 800px;\n margin: 0 auto;\n }\n\n .embed-page .eyebrow {\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 16px;\n }\n\n .embed-page h1 {\n font-family: var(--font-display);\n font-size: 46px;\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.15;\n color: var(--color-dark);\n margin: 0 0 28px;\n }\n\n .embed-page h2 {\n font-family: var(--font-display);\n font-size: 32px;\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.2;\n color: var(--color-dark);\n margin: 0 0 20px;\n }\n\n .embed-page h3 {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 500;\n color: var(--color-dark);\n margin: 0 0 12px;\n }\n\n .embed-page p {\n margin: 0 0 20px;\n }\n\n .embed-page p:last-child {\n margin-bottom: 0;\n }\n\n .embed-page .lead {\n font-size: 20px;\n line-height: 1.7;\n color: var(--color-muted);\n }\n\n .embed-page strong {\n color: var(--color-dark);\n font-weight: 600;\n }\n\n .embed-page blockquote {\n border-left: 6px solid var(--color-accent);\n padding: 20px 28px;\n margin: 36px 0;\n background: rgba(181,147,95,0.06);\n border-radius: 0 8px 8px 0;\n }\n\n .embed-page blockquote p {\n font-family: var(--font-body);\n font-style: italic;\n font-size: 20px;\n color: var(--color-dark);\n line-height: 1.6;\n margin-bottom: 0;\n }\n\n .embed-page blockquote cite {\n display: block;\n margin-top: 12px;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-muted);\n }\n\n .embed-page .canvas-wrap {\n margin: 48px 0;\n position: relative;\n }\n\n .embed-page .canvas-wrap canvas {\n width: 100%;\n display: block;\n cursor: crosshair;\n border-radius: 10px;\n }\n\n .embed-page .canvas-hint {\n font-family: var(--font-ui);\n font-size: 12px;\n color: var(--color-muted);\n text-align: center;\n margin-top: 10px;\n opacity: 0.5;\n }\n\n .embed-page .stat-row {\n display: flex;\n gap: 48px;\n margin: 48px 0;\n flex-wrap: wrap;\n }\n\n .embed-page .stat {\n flex: 1;\n min-width: 140px;\n }\n\n .embed-page .stat-number {\n font-family: var(--font-display);\n font-size: 48px;\n color: var(--color-accent);\n line-height: 1;\n margin-bottom: 8px;\n }\n\n .embed-page .stat-label {\n font-family: var(--font-ui);\n font-size: 13px;\n color: var(--color-muted);\n line-height: 1.5;\n }\n\n .embed-page .brain-stem {\n margin: 48px 0;\n }\n\n .embed-page .brain-level {\n padding: 28px 32px;\n border-radius: 10px;\n margin-bottom: 2px;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n cursor: default;\n }\n\n .embed-page .brain-level:hover {\n transform: translateX(6px);\n box-shadow: -4px 0 0 var(--color-accent);\n }\n\n .embed-page .level-label {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n\n .embed-page .level-desc {\n font-family: var(--font-body);\n font-size: 15px;\n line-height: 1.65;\n color: var(--color-muted);\n }\n\n .embed-page .brain-arrow {\n text-align: center;\n font-size: 18px;\n color: var(--color-border);\n padding: 4px 0;\n }\n\n .embed-page .pillar-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin: 48px 0;\n }\n\n .embed-page .pillar-card {\n border: 1px solid var(--color-border);\n border-radius: 10px;\n padding: 28px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n background: rgba(255,255,255,0.28);\n }\n\n .embed-page .pillar-card:hover {\n border-color: var(--color-accent);\n box-shadow: 0 4px 20px rgba(181,147,95,0.12);\n }\n\n .embed-page .pillar-num {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 10px;\n }\n\n .embed-page .pillar-card p {\n font-size: 15px;\n line-height: 1.65;\n margin-bottom: 12px;\n }\n\n .embed-page .pillar-tag {\n display: inline-block;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05em;\n padding: 4px 10px;\n border-radius: 4px;\n background: var(--color-bg-alt);\n color: var(--color-muted);\n margin-right: 6px;\n margin-bottom: 4px;\n }\n\n .embed-page .dim-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin: 48px 0;\n }\n\n .embed-page .dim-card {\n border: 1px solid var(--color-border);\n border-radius: 10px;\n padding: 22px 24px;\n position: relative;\n overflow: hidden;\n transition: border-color 0.2s ease;\n background: rgba(255,255,255,0.28);\n }\n\n .embed-page .dim-card:hover {\n border-color: var(--color-accent);\n }\n\n .embed-page .dim-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: var(--color-accent);\n border-radius: 0 0 10px 10px;\n transition: width 0.6s ease;\n }\n\n .embed-page .dim-name {\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-dark);\n margin-bottom: 4px;\n }\n\n .embed-page .dim-score {\n font-family: var(--font-display);\n font-size: 28px;\n color: var(--color-accent);\n margin-bottom: 4px;\n }\n\n .embed-page .dim-status {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 500;\n color: var(--color-muted);\n }\n\n .embed-page .accordion-item {\n border-bottom: 1px solid var(--color-border);\n }\n\n .embed-page .accordion-trigger {\n width: 100%;\n background: none;\n border: none;\n padding: 20px 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n font-family: var(--font-body);\n font-size: 18px;\n color: var(--color-dark);\n text-align: left;\n }\n\n .embed-page .accordion-trigger:hover {\n color: var(--color-accent);\n }\n\n .embed-page .chevron {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n flex-shrink: 0;\n }\n\n .embed-page .chevron path {\n stroke: var(--color-muted);\n }\n\n .embed-page .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease;\n }\n\n .embed-page .accordion-content .inner {\n padding: 0 0 24px;\n }\n\n .embed-page .accordion-content .inner p {\n font-size: 15px;\n line-height: 1.7;\n }\n\n .embed-page .accordion-item.open .accordion-content {\n max-height: 400px;\n }\n\n .embed-page .accordion-item.open .chevron {\n transform: rotate(180deg);\n }\n\n .embed-page .reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n\n .embed-page .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .embed-page footer {\n padding: 80px 0;\n text-align: center;\n }\n\n .embed-page footer p {\n font-family: var(--font-ui);\n font-size: 13px;\n color: var(--color-muted);\n opacity: 0.5;\n }\n\n @media (max-width: 900px) {\n .embed-page .paper-a,\n .embed-page .paper-b,\n .embed-page .paper-c,\n .embed-page .paper-d {\n opacity: 0.45;\n }\n }\n\n @media (max-width: 860px) {\n .embed-page {\n --site-header-offset: 64px;\n }\n\n .embed-page .page-subnav {\n padding: 12px 16px;\n border-radius: 14px;\n align-items: flex-start;\n flex-direction: column;\n }\n\n .embed-page .page-subnav-links {\n justify-content: flex-start;\n gap: 12px 14px;\n }\n }\n\n @media (max-width: 700px) {\n .embed-page .content {\n padding: 0 20px;\n }\n\n .embed-page section {\n padding: 80px 0;\n }\n\n .embed-page .hero-cover {\n min-height: auto;\n padding: 64px 18px 50px;\n }\n\n .embed-page .hero-kicker {\n margin-bottom: 24px;\n font-size: 11px;\n }\n\n .embed-page .hero-title {\n font-size: 42px;\n }\n\n .embed-page .hero-standfirst {\n font-size: 19px;\n }\n\n .embed-page .hero-meta {\n margin-top: 26px;\n }\n\n .embed-page h1 {\n font-size: 34px;\n }\n\n .embed-page h2 {\n font-size: 26px;\n }\n\n .embed-page .pillar-grid,\n .embed-page .dim-grid {\n grid-template-columns: 1fr;\n }\n\n .embed-page .stat-row {\n gap: 28px;\n }\n\n .embed-page .paper-a,\n .embed-page .paper-b,\n .embed-page .paper-c,\n .embed-page .paper-d {\n width: 110px;\n height: 120px;\n opacity: 0.28;\n }\n\n .embed-page .paper-c,\n .embed-page .paper-d {\n display: none;\n }\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"embed-page\">\n <div class=\"page-subnav-wrap\">\n <div class=\"page-subnav\">\n <div class=\"page-subnav-left\">\n <span>Read<\/span>\n <span class=\"dot\">\u2022<\/span>\n <span class=\"read-time\">11 min<\/span>\n <\/div>\n <div class=\"page-subnav-links\">\n <a href=\"#thesis\">Thesis<\/a>\n <a href=\"#brainstem\">Framework<\/a>\n <a href=\"#pillars\">Pillars<\/a>\n <a href=\"#dimensions\">Dimensions<\/a>\n <a href=\"#sustainment\">Sustainment<\/a>\n <a href=\"#system\">System<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <section class=\"hero-cover\" id=\"top\">\n <div class=\"hero-paper paper-a\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-b\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-c\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-d\" aria-hidden=\"true\"><\/div>\n\n <div class=\"hero-shell\">\n <div class=\"hero-kicker\">\n <span class=\"ornament\">\u2726<\/span>\n Holistic Wellbeing\n <span class=\"ornament\">\u2726<\/span>\n <\/div>\n\n <h1 class=\"hero-title\">The architecture <em>of<\/em> a whole person<\/h1>\n\n <p class=\"hero-standfirst\">\n Wellbeing is the ongoing integration of attention, self-compassion,\n relationships, purpose, environment, and daily practice. Sustainable\n support has to work with the whole system a person lives inside.\n <\/p>\n\n <div class=\"hero-meta\">\n <span>Awareness<\/span>\n <span>Connection<\/span>\n <span>Insight<\/span>\n <span>Purpose<\/span>\n <span>Sustainment<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"thesis\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Problem<\/p>\n <h2>Brief interventions fade.<\/h2>\n <p class=\"prose\">Insight can arrive in therapy, coaching, a classroom, or a moment of reflection. The challenge comes afterward. People return to the conditions that shaped their behavior in the first place, and the energy of the intervention starts to thin out.<\/p>\n <p class=\"prose\">That gap between touchpoints is where sustainment matters. A good system keeps a person connected to their own values, language, and momentum when the structured moment of care is over.<\/p>\n\n <blockquote>\n <p>Wellbeing lasts when support shows up between meaningful moments.<\/p>\n <cite>Journey design principle<\/cite>\n <\/blockquote>\n\n <p class=\"prose\">The question is simple. What helps a person stay in relationship with the insight they already had? The answer is not a single tool. It is a layer of reflection, timing, and reinforcement that keeps the work alive in daily life.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"brainstem\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Framework<\/p>\n <h2>Technology can strengthen reflex or agency.<\/h2>\n <p class=\"prose\">Many digital products are built around reflexive attention. They reward urgency, comparison, and repetition. Holistic wellbeing asks for a different design direction. It asks for products that help people notice what they are feeling, stay connected to others, and move toward purpose with more choice.<\/p>\n <p class=\"prose\">That movement can be understood as a shift upward through layers of awareness. At the bottom, people react. Higher up, they recognize patterns. Higher still, they reconnect with others and act from clarity.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"brainstem-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Hover over each level to see the forces at work<\/p>\n <\/div>\n\n <div class=\"brain-stem\">\n <div class=\"brain-level\" style=\"background:rgba(181,147,95,0.08);\">\n <div class=\"level-label\" style=\"color:var(--color-accent);\">Agency and Purpose<\/div>\n <div class=\"level-desc\"><strong>The destination.<\/strong> A person understands what matters, knows what they need, and acts from alignment. Values clarification, meaning, and contribution live here.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(181,147,95,0.05);\">\n <div class=\"level-label\" style=\"color:var(--color-accent); opacity:0.75;\">Connection and Belonging<\/div>\n <div class=\"level-desc\"><strong>The bridge.<\/strong> Social support, peer invitation, and shared experience create lift. People are more likely to sustain change when they feel seen in community.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(85,58,40,0.04);\">\n <div class=\"level-label\">Awareness and Insight<\/div>\n <div class=\"level-desc\"><strong>The foundation.<\/strong> People begin to recognize triggers, name patterns, and notice what pulls them away from themselves. Awareness gives the work a place to start.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(85,58,40,0.025);\">\n <div class=\"level-label\" style=\"color:var(--color-muted); opacity:0.65;\">Reactive Attention<\/div>\n <div class=\"level-desc\"><strong>The floor.<\/strong> Survival instincts, comparison, distraction, and reinforcement loops dominate here. This is the level many digital systems amplify by default.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"pillars\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Four Pillars<\/p>\n <h2>The capacities that support durable wellbeing.<\/h2>\n <p class=\"prose\">Awareness, insight, connection, and purpose work together. Each one strengthens the others. A person who can notice their patterns, understand them, stay connected to others, and act from purpose has a much stronger base for change.<\/p>\n\n <div class=\"pillar-grid\">\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 01<\/div>\n <h3>Awareness<\/h3>\n <p>The ability to observe inner experience with steadiness. This includes attention to thoughts, sensations, patterns, and signals that usually pass by unnoticed.<\/p>\n <span class=\"pillar-tag\">Quest intake<\/span>\n <span class=\"pillar-tag\">Values clarification<\/span>\n <span class=\"pillar-tag\">Pattern noticing<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 02<\/div>\n <h3>Insight<\/h3>\n <p>The capacity to make meaning from those observations. Insight turns raw awareness into understanding that can guide behavior.<\/p>\n <span class=\"pillar-tag\">Reflection<\/span>\n <span class=\"pillar-tag\">Mirroring<\/span>\n <span class=\"pillar-tag\">Inquiry<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 03<\/div>\n <h3>Connection<\/h3>\n <p>Supportive relationships create momentum and reduce isolation. People sustain change more easily when they feel invited into belonging.<\/p>\n <span class=\"pillar-tag\">Beacon<\/span>\n <span class=\"pillar-tag\">Peer support<\/span>\n <span class=\"pillar-tag\">Ambassador program<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 04<\/div>\n <h3>Purpose<\/h3>\n <p>Purpose organizes effort. It helps a person act from something meaningful enough to hold attention across time.<\/p>\n <span class=\"pillar-tag\">Meaning<\/span>\n <span class=\"pillar-tag\">Contribution<\/span>\n <span class=\"pillar-tag\">Vocation<\/span>\n <\/div>\n <\/div>\n\n <p class=\"prose\">When these pillars are active together, support becomes more coherent. The person is more likely to engage, return, and continue building the life they want.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Self-Compassion<\/p>\n <h2>Self-compassion supports sustainable change.<\/h2>\n <p class=\"prose\">Sustainable wellbeing depends on the relationship a person has with themselves in difficult moments. The key question is simple. What do I need right now? That question opens space for wiser action.<\/p>\n <p class=\"prose\">A system that supports growth should help people return to their own voice, their own values, and their own capacity for care. That is different from generic advice. It is more personal, more grounded, and much more likely to endure.<\/p>\n\n <blockquote>\n <p>What do I need in this moment?<\/p>\n <cite>Core self-compassion question<\/cite>\n <\/blockquote>\n\n <p class=\"prose\">That question can become a product principle. It keeps the intervention close to lived experience and gives the person room to respond with honesty.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"dimensions\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Whole Person<\/p>\n <h2>Eight dimensions, one system.<\/h2>\n <p class=\"prose\">Holistic wellbeing is better understood as a set of interdependent dimensions than as a single score. Physical health, emotional clarity, relational connection, creative expression, spiritual practice, presence, environmental awareness, and values alignment all influence one another.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"orbital-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Click and drag a sphere to expand it and watch the others respond<\/p>\n <\/div>\n\n <div class=\"dim-grid\">\n <div class=\"dim-card\"><div class=\"dim-name\">Physical Health<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Sleep, movement, recovery, nervous system capacity<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Emotional Clarity<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Naming patterns, processing experience, returning to center<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Relational Connection<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Presence, reciprocity, time with others<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Creative Expression<\/div><div class=\"dim-score\">5<\/div><div class=\"dim-status\">Writing, making, artistic exploration, experimentation<\/div><div class=\"dim-bar\" style=\"width:50%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Spiritual Practice<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Contemplation, awe, practice, relationship to meaning<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Presence and Clarity<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Deep work, phone-free attention, intentional capture<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Environmental Presence<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Nature, place, rhythms of daily life<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Values Alignment<\/div><div class=\"dim-score\">5<\/div><div class=\"dim-status\">Acting in ways that match what matters most<\/div><div class=\"dim-bar\" style=\"width:50%\"><\/div><\/div>\n <\/div>\n\n <p class=\"prose\">The goal is not perfection across all dimensions. The goal is better awareness of which areas are carrying strength, which are strained, and which need immediate attention.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"sustainment\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Sustainment<\/p>\n <h2>What happens between the moments that matter.<\/h2>\n <p class=\"prose\">Clinical and coaching touchpoints can be powerful. They are also periodic. The territory between them is where people try to apply what they learned inside real life.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"sustainment-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Move your cursor across the timeline to see intervention density<\/p>\n <\/div>\n\n <p class=\"prose\">A sustainment layer does not replace the larger moment of care. It extends it. Small signals, reminders, nudges, and reflections help keep the work in motion until the next meaningful touchpoint.<\/p>\n <p class=\"prose\">The quality of that support matters. When a nudge feels specific and relevant, a person is more likely to stay connected to the process that produced it.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"system\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Integrated System<\/p>\n <h2>Three tools. Three spheres. One coherent life.<\/h2>\n <p class=\"prose\">A full wellbeing system can support growth, connection, and self-knowledge together. Each tool plays a different role, and each one helps the others become more useful over time.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"spheres-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Hover near a sphere to see it pulse and connect<\/p>\n <\/div>\n\n <div class=\"pillar-grid\">\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Journey SMS<\/div>\n <h3>Growth and Development<\/h3>\n <p>Nudges grounded in the person’s own captures, values, and patterns. The system reflects their language back with timing and care.<\/p>\n <span class=\"pillar-tag\">Nudge pipeline<\/span>\n <span class=\"pillar-tag\">Values mirroring<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Beacon<\/div>\n <h3>Relationships and Connection<\/h3>\n <p>A lightweight social signal that lowers friction and helps people reach toward each other with presence.<\/p>\n <span class=\"pillar-tag\">One-button signal<\/span>\n <span class=\"pillar-tag\">Relational support<\/span>\n <\/div>\n <\/div>\n\n <div class=\"pillar-grid\" style=\"margin-top:0;\">\n <div class=\"pillar-card\" style=\"grid-column:1 \/ -1; max-width:100%;\">\n <div class=\"pillar-num\">Serein<\/div>\n <h3>Self-Knowledge and Vocation<\/h3>\n <p>Voice capture and reflection build a living source of self-understanding. That material gives the system roots in a person’s real life.<\/p>\n <span class=\"pillar-tag\">Voice capture<\/span>\n <span class=\"pillar-tag\">Personal model<\/span>\n <span class=\"pillar-tag\">Meaning-making<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Practice<\/p>\n <h2>Spaciousness makes change more workable.<\/h2>\n <p class=\"prose\">People do better when they have enough space to observe what is happening inside their lives. Spaciousness gives thoughts and feelings room to move without taking over the whole field.<\/p>\n <p class=\"prose\">A good nudge supports that spaciousness. It does not push. It invites attention. It helps a person pause, notice, and choose more deliberately.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Open Questions<\/p>\n <h2>What remains to be solved.<\/h2>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>How do you measure self-compassion at scale?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Self-compassion may be one of the most important indicators of sustainable behavior change. The challenge is building measurement that feels human and practical while still being rigorous enough to track over time.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>Where is the line between peer support and clinical support?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Peer support is valuable because it feels accessible and real. At the same time, systems need clear boundaries so support remains supportive and does not slide into unstructured care delivery.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>How can the pipeline adapt across cultures and contexts?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Context shapes meaning. The same nudge can land very differently depending on culture, economics, family structure, and workload. Personalization has to account for circumstance as well as personality.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>What does family modeling look like in practice?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Behavior change often spreads through systems, not individuals alone. Family habits, parent modeling, and shared digital norms may be one of the strongest multipliers available.<\/p><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <div class=\"stat-row\">\n <div class=\"stat\">\n <div class=\"stat-number\">97%<\/div>\n <div class=\"stat-label\">of students identify doom scrolling as a primary concern<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-number\">8<\/div>\n <div class=\"stat-label\">dimensions of wellbeing held in one system<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-number\">4<\/div>\n <div class=\"stat-label\">core capacities that support flourishing<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <footer class=\"content\">\n <div class=\"reveal\">\n <p>Journey · Holistic Wellbeing, Applied Nudge Theory, Values Mirroring<\/p>\n <\/div>\n <\/footer>\n<\/div>\n\n<script>\nconst _cc = {};\nfunction hexToRgb(h){const m=\/^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$\/i.exec(h);return m?{r:parseInt(m[1],16),g:parseInt(m[2],16),b:parseInt(m[3],16)}:{r:100,g:100,b:100};}\nfunction rgba(h,a){const k=h+a;if(_cc[k])return _cc[k];const c=hexToRgb(h);const v=`rgba(${c.r},${c.g},${c.b},${a})`;_cc[k]=v;return v;}\nfunction setupCanvas(cv,w,h){const d=window.devicePixelRatio||1;cv.width=w*d;cv.height=h*d;cv.style.width=w+'px';cv.style.height=h+'px';const c=cv.getContext('2d');c.scale(d,d);return c;}\nconst C={accent:'#B5935F',dark:'#291911',muted:'#856B58',border:'#D2CCC5',success:'#6B8F5E',light:'#F5F1EA'};\nconst dimColors=['#A67C52','#6B8F5E','#8B6F4E','#B5935F','#7A6B5D','#9C7A5B','#5D7A6B','#8A7462'];\n\nfunction initBrainStem(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=300;\n const ctx=setupCanvas(cv,W,H);\n let mx=-1,my=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;my=(e.clientY-r.top)\/r.height*H;});\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;});\n\n const levels=[\n {label:'AGENCY AND PURPOSE',y:0.12,color:C.accent,size:1.0},\n {label:'CONNECTION',y:0.35,color:C.accent,size:0.8},\n {label:'AWARENESS AND INSIGHT',y:0.58,color:C.muted,size:0.6},\n {label:'REACTIVE ATTENTION',y:0.82,color:C.border,size:0.4}\n ];\n\n let particles=[];\n function spawn(){\n particles.push({\n x:W*0.1+Math.random()*W*0.8,\n y:H*0.95,\n vy:-0.3-Math.random()*0.4,\n vx:(Math.random()-0.5)*0.5,\n r:2+Math.random()*2,\n opacity:0.3+Math.random()*0.3,\n life:1\n });\n }\n\n function frame(){\n ctx.clearRect(0,0,W,H);\n\n levels.forEach((l)=>{\n const bandY=l.y*H;\n const bandH=H\/levels.length;\n ctx.fillStyle=rgba(l.color,0.03*(1+l.size));\n ctx.fillRect(0,bandY-bandH*0.3,W,bandH*0.6);\n\n const inBand=my>0&&my>bandY-bandH*0.4&&my<bandY+bandH*0.4;\n ctx.font=`${inBand?'700':'600'} ${inBand?'12':'10'}px Inter, system-ui, sans-serif`;\n ctx.textAlign='left';\n ctx.fillStyle=rgba(l.color,inBand?0.9:0.3+l.size*0.3);\n ctx.fillText(l.label,24,bandY+4);\n\n if(inBand){\n ctx.fillStyle=rgba(l.color,0.03);\n ctx.fillRect(0,bandY-bandH*0.3,W,bandH*0.6);\n }\n\n ctx.beginPath();\n ctx.moveTo(0,bandY+16);\n ctx.lineTo(W,bandY+16);\n ctx.strokeStyle=rgba(C.border,0.15);\n ctx.lineWidth=1;\n ctx.stroke();\n });\n\n if(Math.random()<0.06)spawn();\n\n particles.forEach(p=>{\n p.y+=p.vy;\n p.x+=p.vx;\n p.vx+=(Math.random()-0.5)*0.05;\n\n let currentLevel=3;\n for(let i=0;i<levels.length;i++){\n if(p.y<levels[i].y*H+30){currentLevel=i;break;}\n }\n\n const levelBoost=1-currentLevel\/levels.length;\n const drawR=p.r*(0.6+levelBoost*0.8);\n const drawOpacity=p.opacity*(0.3+levelBoost*0.7);\n const drawColor=currentLevel<=1?C.accent:currentLevel===2?C.muted:C.border;\n\n if(mx>0&&my>0){\n const dx=mx-p.x,dy=my-p.y;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<120&&dist>0){\n const f=(1-dist\/120)*0.15;\n p.x+=dx*f*0.04;\n p.y+=dy*f*0.04;\n }\n }\n\n if(currentLevel>=2&&Math.random()<0.001)p.vy*=0.3;\n\n ctx.beginPath();\n ctx.arc(p.x,p.y,drawR*2.5,0,Math.PI*2);\n ctx.fillStyle=rgba(drawColor,0.04*drawOpacity);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(p.x,p.y,drawR,0,Math.PI*2);\n ctx.fillStyle=rgba(drawColor,drawOpacity);\n ctx.fill();\n\n p.life-=0.001;\n });\n\n particles=particles.filter(p=>p.y>-10&&p.life>0&&p.x>-20&&p.x<W+20);\n if(particles.length>60)particles=particles.slice(-60);\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initOrbital(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=420;\n const ctx=setupCanvas(cv,W,H);\n const cx=W\/2,cy=H\/2;\n let mx=-1,my=-1;\n let isDown=false;\n let hoverIdx=-1;\n\n cv.addEventListener('mousemove',e=>{\n const r=cv.getBoundingClientRect();\n mx=(e.clientX-r.left)\/r.width*W;\n my=(e.clientY-r.top)\/r.height*H;\n });\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;hoverIdx=-1;});\n cv.addEventListener('mousedown',()=>{isDown=true;});\n cv.addEventListener('mouseup',()=>{isDown=false;});\n\n const dims=[\n {label:'Physical',score:7,color:dimColors[0]},\n {label:'Emotional',score:6,color:dimColors[1]},\n {label:'Relational',score:7,color:dimColors[2]},\n {label:'Creative',score:5,color:dimColors[3]},\n {label:'Spiritual',score:6,color:dimColors[4]},\n {label:'Presence',score:6,color:dimColors[5]},\n {label:'Environmental',score:7,color:dimColors[6]},\n {label:'Values',score:5,color:dimColors[7]}\n ];\n\n const N=dims.length;\n const baseRadius=110;\n const baseSize=14;\n const expansion=dims.map(()=>0.5);\n const targetExpansion=dims.map(()=>0.5);\n const angles=dims.map((_,i)=>i*Math.PI*2\/N-Math.PI\/2);\n let autoRotation=0;\n const nodes=dims.map(()=>({x:0,y:0,r:0}));\n const innerNodes=dims.map(()=>({x:0,y:0}));\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n autoRotation+=0.0003;\n\n hoverIdx=-1;\n let closestDist=Infinity;\n if(mx>0&&my>0){\n nodes.forEach((n,i)=>{\n const dx=mx-n.x,dy=my-n.y;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<closestDist&&dist<100){\n closestDist=dist;\n hoverIdx=i;\n }\n });\n }\n\n for(let i=0;i<N;i++){\n if(hoverIdx>=0){\n if(i===hoverIdx){\n targetExpansion[i]=isDown?1.0:0.85;\n } else {\n const angDist=Math.abs(((i-hoverIdx+N)%N)-N\/2);\n const nearness=1-angDist\/(N\/2);\n targetExpansion[i]=isDown?0.15+nearness*0.25:0.25+nearness*0.2;\n }\n } else {\n targetExpansion[i]=0.5+0.08*Math.sin(t\/1200+i*0.8);\n }\n }\n\n for(let i=0;i<N;i++) expansion[i]+=(targetExpansion[i]-expansion[i])*0.06;\n\n for(let i=0;i<N;i++){\n const angle=angles[i]+autoRotation;\n const exp=expansion[i];\n const r=baseRadius*(0.4+exp*0.7);\n const size=baseSize*(0.5+exp*0.6);\n nodes[i].x=cx+Math.cos(angle)*r;\n nodes[i].y=cy+Math.sin(angle)*r*0.65;\n nodes[i].r=size;\n const innerR=r*0.45;\n innerNodes[i].x=cx+Math.cos(angle)*innerR;\n innerNodes[i].y=cy+Math.sin(angle)*innerR*0.65;\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(nodes[i].x,nodes[i].y);\n ctx.lineTo(nodes[j].x,nodes[j].y);\n ctx.strokeStyle=rgba(C.border,0.2+expansion[i]*0.15);\n ctx.lineWidth=1;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(innerNodes[i].x,innerNodes[i].y);\n ctx.lineTo(nodes[j].x,nodes[j].y);\n ctx.strokeStyle=rgba(dims[i].color,0.1+expansion[i]*0.1);\n ctx.lineWidth=0.8;\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(innerNodes[j].x,innerNodes[j].y);\n ctx.lineTo(nodes[i].x,nodes[i].y);\n ctx.strokeStyle=rgba(dims[j].color,0.1+expansion[j]*0.1);\n ctx.lineWidth=0.8;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(innerNodes[i].x,innerNodes[i].y);\n ctx.lineTo(innerNodes[j].x,innerNodes[j].y);\n ctx.strokeStyle=rgba(C.border,0.1);\n ctx.lineWidth=0.6;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(innerNodes[i].x,innerNodes[i].y);\n ctx.strokeStyle=rgba(dims[i].color,0.06+expansion[i]*0.06);\n ctx.lineWidth=0.5;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const pivotR=2+expansion[i]*1.5;\n ctx.beginPath();\n ctx.arc(innerNodes[i].x,innerNodes[i].y,pivotR,0,Math.PI*2);\n ctx.fillStyle=rgba(dims[i].color,0.25+expansion[i]*0.2);\n ctx.fill();\n }\n\n const order=dims.map((_,i)=>i).sort((a,b)=>nodes[a].y-nodes[b].y);\n order.forEach(i=>{\n const n=nodes[i];\n const exp=expansion[i];\n const isHover=i===hoverIdx;\n\n const glowR=n.r+12+exp*10;\n const grad=ctx.createRadialGradient(n.x,n.y,n.r*0.5,n.x,n.y,glowR);\n grad.addColorStop(0,rgba(dims[i].color,0.12+exp*0.08));\n grad.addColorStop(1,rgba(dims[i].color,0));\n ctx.beginPath();\n ctx.arc(n.x,n.y,glowR,0,Math.PI*2);\n ctx.fillStyle=grad;\n ctx.fill();\n\n const bodyGrad=ctx.createRadialGradient(n.x-n.r*0.3,n.y-n.r*0.3,n.r*0.1,n.x,n.y,n.r);\n bodyGrad.addColorStop(0,rgba(dims[i].color,0.5+exp*0.35));\n bodyGrad.addColorStop(1,rgba(dims[i].color,0.2+exp*0.15));\n ctx.beginPath();\n ctx.arc(n.x,n.y,n.r,0,Math.PI*2);\n ctx.fillStyle=bodyGrad;\n ctx.fill();\n\n if(isHover){\n ctx.beginPath();\n ctx.arc(n.x,n.y,n.r+3,0,Math.PI*2);\n ctx.strokeStyle=rgba(dims[i].color,0.5);\n ctx.lineWidth=2;\n ctx.stroke();\n }\n\n ctx.font=`${isHover?'700':'600'} ${isHover?'12':'10'}px Inter, system-ui, sans-serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.dark,isHover?0.9:0.5+exp*0.2);\n ctx.fillText(dims[i].label,n.x,n.y-n.r-10);\n\n ctx.font=`500 ${Math.round(10+exp*8)}px 'Playfair Display', serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba('#fff',0.7+exp*0.3);\n ctx.fillText(dims[i].score,n.x,n.y+Math.round(4+exp*3));\n });\n\n const coreR=16+4*Math.sin(t\/800);\n const coreGrad=ctx.createRadialGradient(cx,cy,0,cx,cy,coreR+8);\n coreGrad.addColorStop(0,rgba(C.accent,0.35));\n coreGrad.addColorStop(1,rgba(C.accent,0.05));\n ctx.beginPath();ctx.arc(cx,cy,coreR+8,0,Math.PI*2);ctx.fillStyle=coreGrad;ctx.fill();\n ctx.beginPath();ctx.arc(cx,cy,coreR,0,Math.PI*2);ctx.fillStyle=rgba(C.accent,0.55);ctx.fill();\n ctx.font='700 8px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba('#fff',0.85);\n ctx.fillText('AWARENESS',cx,cy+3);\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initSustainment(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=240;\n const ctx=setupCanvas(cv,W,H);\n let mx=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;});\n cv.addEventListener('mouseleave',()=>{mx=-1;});\n\n const touchX=[W*0.08,W*0.32,W*0.58,W*0.85];\n const nudges=[];\n for(let i=0;i<touchX.length-1;i++){\n const gap=touchX[i+1]-touchX[i];\n const count=4+Math.floor(Math.random()*3);\n for(let j=1;j<=count;j++){\n nudges.push({x:touchX[i]+gap*j\/(count+1)+(Math.random()-0.5)*10,phase:Math.random()*Math.PI*2});\n }\n }\n\n function wellbeingAt(x){\n let y=H*0.7;\n touchX.forEach(cx=>{\n const dist=x-cx;\n if(dist>0&&dist<W*0.3){\n const rise=Math.exp(-dist\/(W*0.04))*H*0.35;\n const decay=Math.exp(-dist\/(W*0.12))*H*0.3;\n y-=Math.max(rise,decay);\n }\n });\n return y;\n }\n\n function wellbeingWithNudges(x){\n let y=wellbeingAt(x);\n nudges.forEach(n=>{\n const dist=Math.abs(x-n.x);\n if(dist<30)y-=8*(1-dist\/30);\n });\n const progress=x\/W;\n y-=15*progress;\n return Math.max(H*0.2,y);\n }\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n\n ctx.beginPath();\n ctx.moveTo(0,H*0.7);\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingAt(x));\n ctx.strokeStyle=rgba(C.border,0.5);\n ctx.lineWidth=1.5;\n ctx.setLineDash([6,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n\n ctx.beginPath();\n ctx.moveTo(0,H*0.7);\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingWithNudges(x));\n ctx.strokeStyle=rgba(C.accent,0.6);\n ctx.lineWidth=2;\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(0,wellbeingAt(0));\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingAt(x));\n for(let x=W;x>=0;x-=3)ctx.lineTo(x,wellbeingWithNudges(x));\n ctx.closePath();\n ctx.fillStyle=rgba(C.accent,0.04);\n ctx.fill();\n\n touchX.forEach(cx=>{\n const peakY=wellbeingWithNudges(cx+5);\n ctx.beginPath();\n ctx.moveTo(cx,H*0.85);\n ctx.lineTo(cx,peakY-10);\n ctx.strokeStyle=rgba(C.success,0.3);\n ctx.lineWidth=1.5;\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(cx,peakY-10,6,0,Math.PI*2);\n ctx.fillStyle=rgba(C.success,0.6);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(cx,peakY-10,12,0,Math.PI*2);\n ctx.fillStyle=rgba(C.success,0.08);\n ctx.fill();\n });\n\n nudges.forEach(n=>{\n const ny=wellbeingWithNudges(n.x);\n const pulse=2+Math.sin(t\/400+n.phase)*0.8;\n const nearMouse=mx>0?Math.max(0,1-Math.abs(mx-n.x)\/60):0;\n\n ctx.beginPath();\n ctx.arc(n.x,ny,pulse+(nearMouse*2),0,Math.PI*2);\n ctx.fillStyle=rgba(C.accent,0.35+nearMouse*0.4);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(n.x,ny,pulse+4+(nearMouse*4),0,Math.PI*2);\n ctx.fillStyle=rgba(C.accent,0.04+nearMouse*0.08);\n ctx.fill();\n });\n\n ctx.font='600 9px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.success,0.5);\n touchX.forEach(cx=>ctx.fillText('TOUCHPOINT',cx,H*0.95));\n\n if(mx>0){\n ctx.beginPath();\n ctx.moveTo(mx,0);\n ctx.lineTo(mx,H);\n ctx.strokeStyle=rgba(C.accent,0.1);\n ctx.lineWidth=1;\n ctx.stroke();\n }\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initSpheres(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=300;\n const ctx=setupCanvas(cv,W,H);\n const cx=W\/2,cy=H\/2;\n let mx=-1,my=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;my=(e.clientY-r.top)\/r.height*H;});\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;});\n\n const spheres=[\n {label:'JOURNEY',sub:'Growth',radius:100,speed:0.4,size:10,color:C.accent,angle:0},\n {label:'BEACON',sub:'Connection',radius:100,speed:0.4,size:9,color:C.success,angle:Math.PI*2\/3},\n {label:'SEREIN',sub:'Self-knowledge',radius:100,speed:0.4,size:9,color:'#7A6B5D',angle:Math.PI*4\/3}\n ];\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n\n const coreR=16+4*Math.sin(t\/800);\n const coreGrad=ctx.createRadialGradient(cx,cy,0,cx,cy,coreR+12);\n coreGrad.addColorStop(0,rgba(C.dark,0.3));\n coreGrad.addColorStop(1,rgba(C.dark,0.02));\n ctx.beginPath();ctx.arc(cx,cy,coreR+12,0,Math.PI*2);ctx.fillStyle=coreGrad;ctx.fill();\n ctx.beginPath();ctx.arc(cx,cy,coreR,0,Math.PI*2);ctx.fillStyle=rgba(C.dark,0.45);ctx.fill();\n ctx.font='700 8px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.light,0.8);\n ctx.fillText('PERSON',cx,cy+3);\n\n const positions=[];\n spheres.forEach(s=>{\n const angle=(t\/2000)*s.speed+s.angle;\n let bx=cx+Math.cos(angle)*s.radius;\n let by=cy+Math.sin(angle)*s.radius*0.5;\n let proximity=0;\n\n if(mx>0&&my>0){\n const dx=bx-mx,dy=by-my;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<100&&dist>0){\n proximity=1-dist\/100;\n bx+=(dx\/dist)*proximity*6;\n by+=(dy\/dist)*proximity*6;\n }\n }\n\n positions.push({x:bx,y:by});\n\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(bx,by);\n ctx.strokeStyle=rgba(s.color,0.1+proximity*0.15);\n ctx.lineWidth=1+proximity;\n ctx.stroke();\n\n const glowSize=s.size+15+proximity*12;\n const grad=ctx.createRadialGradient(bx,by,s.size*0.5,bx,by,glowSize);\n grad.addColorStop(0,rgba(s.color,0.1+proximity*0.1));\n grad.addColorStop(1,rgba(s.color,0));\n ctx.beginPath();ctx.arc(bx,by,glowSize,0,Math.PI*2);ctx.fillStyle=grad;ctx.fill();\n\n const bodySize=s.size+proximity*4;\n ctx.beginPath();ctx.arc(bx,by,bodySize,0,Math.PI*2);ctx.fillStyle=rgba(s.color,0.6+proximity*0.2);ctx.fill();\n\n ctx.font=`700 ${10+proximity*2}px Inter, system-ui, sans-serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba(s.color,0.7+proximity*0.2);\n ctx.fillText(s.label,bx,by-bodySize-14);\n ctx.font='400 10px Inter, system-ui, sans-serif';\n ctx.fillStyle=rgba(C.muted,0.4+proximity*0.3);\n ctx.fillText(s.sub,bx,by-bodySize-4);\n });\n\n for(let i=0;i<positions.length;i++){\n const j=(i+1)%positions.length;\n ctx.beginPath();\n ctx.moveTo(positions[i].x,positions[i].y);\n ctx.lineTo(positions[j].x,positions[j].y);\n ctx.strokeStyle=rgba(C.border,0.15);\n ctx.lineWidth=1;\n ctx.setLineDash([3,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nconst obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible');});},{threshold:0.1,rootMargin:'0px 0px -40px 0px'});\ndocument.querySelectorAll('.embed-page .reveal').forEach(el=>obs.observe(el));\n\ndocument.querySelectorAll('.embed-page .accordion-trigger').forEach(btn=>{\n btn.addEventListener('click',()=>{\n const item=btn.parentElement;\n const wasOpen=item.classList.contains('open');\n document.querySelectorAll('.embed-page .accordion-item').forEach(i=>i.classList.remove('open'));\n if(!wasOpen)item.classList.add('open');\n });\n});\n\ndocument.querySelectorAll('.embed-page .page-subnav-links a[href^=\"#\"]').forEach(link=>{\n link.addEventListener('click',e=>{\n e.preventDefault();\n const target=document.querySelector(link.getAttribute('href'));\n if(!target)return;\n const siteOffset=parseInt(getComputedStyle(document.querySelector('.embed-page')).getPropertyValue('--site-header-offset').trim(),10)||72;\n const y=target.getBoundingClientRect().top+window.pageYOffset-siteOffset-24;\n window.scrollTo({top:y,behavior:'smooth'});\n });\n});\n\ndocument.addEventListener('DOMContentLoaded',()=>{\n initBrainStem('brainstem-canvas');\n initOrbital('orbital-canvas');\n initSustainment('sustainment-canvas');\n initSpheres('spheres-canvas');\n});\n\nlet rt;\nwindow.addEventListener('resize',()=>{\n clearTimeout(rt);\n rt=setTimeout(()=>{\n initBrainStem('brainstem-canvas');\n initOrbital('orbital-canvas');\n initSustainment('sustainment-canvas');\n initSpheres('spheres-canvas');\n },300);\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Holistic Wellbeing | The Architecture of a Whole Person Read \u2022 11 min Thesis Framework Pillars Dimensions Sustainment System \u2726 Holistic Wellbeing \u2726 The architecture of a whole person Wellbeing is the ongoing integration of attention, self-compassion, relationships, purpose, environment, and daily practice. Sustainable support has to work with the whole system a person lives […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"1080","footnotes":""},"categories":[9],"tags":[],"class_list":["post-1551","post","type-post","status-publish","format-standard","hentry","category-research"],"_links":{"self":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/comments?post=1551"}],"version-history":[{"count":3,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551\/revisions"}],"predecessor-version":[{"id":1583,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551\/revisions\/1583"}],"wp:attachment":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/media?parent=1551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/categories?post=1551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/tags?post=1551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1551,"date":"2026-04-06T17:47:20","date_gmt":"2026-04-06T17:47:20","guid":{"rendered":"https:\/\/lorenzoscardicchio.com\/?p=1551"},"modified":"2026-04-06T20:39:44","modified_gmt":"2026-04-06T20:39:44","slug":"the-architecture-of-a-whole-person","status":"publish","type":"post","link":"https:\/\/lorenzoscardicchio.com\/index.php\/2026\/04\/06\/the-architecture-of-a-whole-person\/","title":{"rendered":"The Architecture of a Whole Person"},"content":{"rendered":"\n\n\n\n\n\nHolistic Wellbeing | The Architecture of a Whole Person<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n body {\n margin: 0;\n background: #F5F1EA;\n }\n\n .embed-page {\n --site-header-offset: 72px;\n --font-display: 'Playfair Display', Georgia, serif;\n --font-body: 'Source Serif Pro', Georgia, serif;\n --font-ui: 'Inter', system-ui, sans-serif;\n --color-dark: #291911;\n --color-light: #F5F1EA;\n --color-accent: #B5935F;\n --color-muted: #553A28;\n --color-border: #D2CCC5;\n --color-bg-alt: #E4DDD2;\n --color-success: #6B8F5E;\n --color-text: #6A4B35;\n font-family: var(--font-body);\n background: var(--color-light);\n color: var(--color-muted);\n line-height: 1.75;\n -webkit-font-smoothing: antialiased;\n }\n\n .embed-page * {\n box-sizing: border-box;\n }\n\n .embed-page a {\n color: inherit;\n }\n\n .embed-page .page-subnav-wrap {\n position: sticky;\n top: var(--site-header-offset);\n z-index: 40;\n padding: 10px 18px 0;\n background: transparent;\n }\n\n .embed-page .page-subnav {\n max-width: 1180px;\n margin: 0 auto;\n padding: 12px 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n border: 1px solid var(--color-border);\n border-radius: 16px;\n background: rgba(245, 241, 234, 0.92);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 8px 24px rgba(41, 25, 17, 0.05);\n }\n\n .embed-page .page-subnav-left {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--color-muted);\n white-space: nowrap;\n }\n\n .embed-page .page-subnav-left .dot {\n color: var(--color-accent);\n font-size: 10px;\n }\n\n .embed-page .page-subnav-left .read-time {\n color: var(--color-dark);\n }\n\n .embed-page .page-subnav-links {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 18px;\n }\n\n .embed-page .page-subnav-links a {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--color-muted);\n opacity: 0.86;\n transition: color 0.15s ease, opacity 0.15s ease;\n }\n\n .embed-page .page-subnav-links a:hover {\n color: var(--color-dark);\n opacity: 1;\n }\n\n .embed-page .hero-cover {\n min-height: 80vh;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 76px 34px 56px;\n overflow: hidden;\n background:\n radial-gradient(circle at 18% 20%, rgba(181,147,95,0.12), transparent 24%),\n radial-gradient(circle at 82% 22%, rgba(181,147,95,0.10), transparent 22%),\n radial-gradient(circle at 72% 78%, rgba(107,143,94,0.08), transparent 20%),\n linear-gradient(180deg, #f7f3ec 0%, #f5f1ea 100%);\n }\n\n .embed-page .hero-shell {\n position: relative;\n z-index: 2;\n max-width: 1120px;\n width: 100%;\n text-align: center;\n }\n\n .embed-page .hero-kicker {\n display: inline-flex;\n align-items: center;\n gap: 14px;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 34px;\n }\n\n .embed-page .hero-kicker .ornament {\n font-size: 11px;\n color: var(--color-accent);\n }\n\n .embed-page .hero-title {\n font-family: var(--font-display);\n font-size: clamp(46px, 7vw, 92px);\n font-weight: 400;\n line-height: 0.98;\n letter-spacing: -0.03em;\n color: var(--color-dark);\n max-width: 980px;\n margin: 0 auto;\n text-wrap: balance;\n }\n\n .embed-page .hero-title em {\n font-style: italic;\n font-weight: 300;\n color: #7a6450;\n }\n\n .embed-page .hero-standfirst {\n max-width: 760px;\n margin: 34px auto 0;\n font-size: 22px;\n line-height: 1.72;\n color: var(--color-text);\n }\n\n .embed-page .hero-meta {\n margin-top: 34px;\n display: inline-flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(85,58,40,0.72);\n }\n\n .embed-page .hero-meta span {\n padding: 8px 12px;\n border: 1px solid rgba(210,204,197,0.9);\n border-radius: 999px;\n background: rgba(255,255,255,0.35);\n }\n\n .embed-page .hero-paper {\n position: absolute;\n z-index: 1;\n border: 1px solid rgba(210,204,197,0.9);\n background: rgba(255,255,255,0.38);\n box-shadow: 0 18px 40px rgba(41,25,17,0.06);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n pointer-events: none;\n }\n\n .embed-page .hero-paper::before {\n content: '';\n position: absolute;\n inset: 12px;\n border: 1px solid rgba(181,147,95,0.20);\n }\n\n .embed-page .hero-paper::after {\n content: '';\n position: absolute;\n left: 18px;\n right: 18px;\n top: 24px;\n height: 1px;\n background: rgba(181,147,95,0.22);\n box-shadow:\n 0 16px 0 rgba(181,147,95,0.18),\n 0 32px 0 rgba(181,147,95,0.14),\n 0 48px 0 rgba(181,147,95,0.10);\n }\n\n .embed-page .paper-a { width: 150px; height: 190px; left: 7%; top: 16%; transform: rotate(-7deg); }\n .embed-page .paper-b { width: 132px; height: 164px; right: 8%; top: 14%; transform: rotate(6deg); }\n .embed-page .paper-c { width: 180px; height: 116px; left: 10%; bottom: 16%; transform: rotate(4deg); }\n .embed-page .paper-d { width: 165px; height: 110px; right: 10%; bottom: 18%; transform: rotate(-5deg); }\n\n .embed-page .content {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 40px;\n }\n\n .embed-page .prose {\n max-width: 640px;\n }\n\n .embed-page section {\n padding: 120px 0;\n }\n\n .embed-page hr {\n border: none;\n height: 1px;\n background: var(--color-border);\n max-width: 800px;\n margin: 0 auto;\n }\n\n .embed-page .eyebrow {\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 16px;\n }\n\n .embed-page h1 {\n font-family: var(--font-display);\n font-size: 46px;\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.15;\n color: var(--color-dark);\n margin: 0 0 28px;\n }\n\n .embed-page h2 {\n font-family: var(--font-display);\n font-size: 32px;\n font-weight: 400;\n letter-spacing: -0.02em;\n line-height: 1.2;\n color: var(--color-dark);\n margin: 0 0 20px;\n }\n\n .embed-page h3 {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 500;\n color: var(--color-dark);\n margin: 0 0 12px;\n }\n\n .embed-page p {\n margin: 0 0 20px;\n }\n\n .embed-page p:last-child {\n margin-bottom: 0;\n }\n\n .embed-page .lead {\n font-size: 20px;\n line-height: 1.7;\n color: var(--color-muted);\n }\n\n .embed-page strong {\n color: var(--color-dark);\n font-weight: 600;\n }\n\n .embed-page blockquote {\n border-left: 6px solid var(--color-accent);\n padding: 20px 28px;\n margin: 36px 0;\n background: rgba(181,147,95,0.06);\n border-radius: 0 8px 8px 0;\n }\n\n .embed-page blockquote p {\n font-family: var(--font-body);\n font-style: italic;\n font-size: 20px;\n color: var(--color-dark);\n line-height: 1.6;\n margin-bottom: 0;\n }\n\n .embed-page blockquote cite {\n display: block;\n margin-top: 12px;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-muted);\n }\n\n .embed-page .canvas-wrap {\n margin: 48px 0;\n position: relative;\n }\n\n .embed-page .canvas-wrap canvas {\n width: 100%;\n display: block;\n cursor: crosshair;\n border-radius: 10px;\n }\n\n .embed-page .canvas-hint {\n font-family: var(--font-ui);\n font-size: 12px;\n color: var(--color-muted);\n text-align: center;\n margin-top: 10px;\n opacity: 0.5;\n }\n\n .embed-page .stat-row {\n display: flex;\n gap: 48px;\n margin: 48px 0;\n flex-wrap: wrap;\n }\n\n .embed-page .stat {\n flex: 1;\n min-width: 140px;\n }\n\n .embed-page .stat-number {\n font-family: var(--font-display);\n font-size: 48px;\n color: var(--color-accent);\n line-height: 1;\n margin-bottom: 8px;\n }\n\n .embed-page .stat-label {\n font-family: var(--font-ui);\n font-size: 13px;\n color: var(--color-muted);\n line-height: 1.5;\n }\n\n .embed-page .brain-stem {\n margin: 48px 0;\n }\n\n .embed-page .brain-level {\n padding: 28px 32px;\n border-radius: 10px;\n margin-bottom: 2px;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n cursor: default;\n }\n\n .embed-page .brain-level:hover {\n transform: translateX(6px);\n box-shadow: -4px 0 0 var(--color-accent);\n }\n\n .embed-page .level-label {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n\n .embed-page .level-desc {\n font-family: var(--font-body);\n font-size: 15px;\n line-height: 1.65;\n color: var(--color-muted);\n }\n\n .embed-page .brain-arrow {\n text-align: center;\n font-size: 18px;\n color: var(--color-border);\n padding: 4px 0;\n }\n\n .embed-page .pillar-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin: 48px 0;\n }\n\n .embed-page .pillar-card {\n border: 1px solid var(--color-border);\n border-radius: 10px;\n padding: 28px;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n background: rgba(255,255,255,0.28);\n }\n\n .embed-page .pillar-card:hover {\n border-color: var(--color-accent);\n box-shadow: 0 4px 20px rgba(181,147,95,0.12);\n }\n\n .embed-page .pillar-num {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--color-accent);\n margin-bottom: 10px;\n }\n\n .embed-page .pillar-card p {\n font-size: 15px;\n line-height: 1.65;\n margin-bottom: 12px;\n }\n\n .embed-page .pillar-tag {\n display: inline-block;\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.05em;\n padding: 4px 10px;\n border-radius: 4px;\n background: var(--color-bg-alt);\n color: var(--color-muted);\n margin-right: 6px;\n margin-bottom: 4px;\n }\n\n .embed-page .dim-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin: 48px 0;\n }\n\n .embed-page .dim-card {\n border: 1px solid var(--color-border);\n border-radius: 10px;\n padding: 22px 24px;\n position: relative;\n overflow: hidden;\n transition: border-color 0.2s ease;\n background: rgba(255,255,255,0.28);\n }\n\n .embed-page .dim-card:hover {\n border-color: var(--color-accent);\n }\n\n .embed-page .dim-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: var(--color-accent);\n border-radius: 0 0 10px 10px;\n transition: width 0.6s ease;\n }\n\n .embed-page .dim-name {\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--color-dark);\n margin-bottom: 4px;\n }\n\n .embed-page .dim-score {\n font-family: var(--font-display);\n font-size: 28px;\n color: var(--color-accent);\n margin-bottom: 4px;\n }\n\n .embed-page .dim-status {\n font-family: var(--font-ui);\n font-size: 11px;\n font-weight: 500;\n color: var(--color-muted);\n }\n\n .embed-page .accordion-item {\n border-bottom: 1px solid var(--color-border);\n }\n\n .embed-page .accordion-trigger {\n width: 100%;\n background: none;\n border: none;\n padding: 20px 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n font-family: var(--font-body);\n font-size: 18px;\n color: var(--color-dark);\n text-align: left;\n }\n\n .embed-page .accordion-trigger:hover {\n color: var(--color-accent);\n }\n\n .embed-page .chevron {\n width: 20px;\n height: 20px;\n transition: transform 0.3s ease;\n flex-shrink: 0;\n }\n\n .embed-page .chevron path {\n stroke: var(--color-muted);\n }\n\n .embed-page .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease;\n }\n\n .embed-page .accordion-content .inner {\n padding: 0 0 24px;\n }\n\n .embed-page .accordion-content .inner p {\n font-size: 15px;\n line-height: 1.7;\n }\n\n .embed-page .accordion-item.open .accordion-content {\n max-height: 400px;\n }\n\n .embed-page .accordion-item.open .chevron {\n transform: rotate(180deg);\n }\n\n .embed-page .reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n\n .embed-page .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .embed-page footer {\n padding: 80px 0;\n text-align: center;\n }\n\n .embed-page footer p {\n font-family: var(--font-ui);\n font-size: 13px;\n color: var(--color-muted);\n opacity: 0.5;\n }\n\n @media (max-width: 900px) {\n .embed-page .paper-a,\n .embed-page .paper-b,\n .embed-page .paper-c,\n .embed-page .paper-d {\n opacity: 0.45;\n }\n }\n\n @media (max-width: 860px) {\n .embed-page {\n --site-header-offset: 64px;\n }\n\n .embed-page .page-subnav {\n padding: 12px 16px;\n border-radius: 14px;\n align-items: flex-start;\n flex-direction: column;\n }\n\n .embed-page .page-subnav-links {\n justify-content: flex-start;\n gap: 12px 14px;\n }\n }\n\n @media (max-width: 700px) {\n .embed-page .content {\n padding: 0 20px;\n }\n\n .embed-page section {\n padding: 80px 0;\n }\n\n .embed-page .hero-cover {\n min-height: auto;\n padding: 64px 18px 50px;\n }\n\n .embed-page .hero-kicker {\n margin-bottom: 24px;\n font-size: 11px;\n }\n\n .embed-page .hero-title {\n font-size: 42px;\n }\n\n .embed-page .hero-standfirst {\n font-size: 19px;\n }\n\n .embed-page .hero-meta {\n margin-top: 26px;\n }\n\n .embed-page h1 {\n font-size: 34px;\n }\n\n .embed-page h2 {\n font-size: 26px;\n }\n\n .embed-page .pillar-grid,\n .embed-page .dim-grid {\n grid-template-columns: 1fr;\n }\n\n .embed-page .stat-row {\n gap: 28px;\n }\n\n .embed-page .paper-a,\n .embed-page .paper-b,\n .embed-page .paper-c,\n .embed-page .paper-d {\n width: 110px;\n height: 120px;\n opacity: 0.28;\n }\n\n .embed-page .paper-c,\n .embed-page .paper-d {\n display: none;\n }\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"embed-page\">\n <div class=\"page-subnav-wrap\">\n <div class=\"page-subnav\">\n <div class=\"page-subnav-left\">\n <span>Read<\/span>\n <span class=\"dot\">\u2022<\/span>\n <span class=\"read-time\">11 min<\/span>\n <\/div>\n <div class=\"page-subnav-links\">\n <a href=\"#thesis\">Thesis<\/a>\n <a href=\"#brainstem\">Framework<\/a>\n <a href=\"#pillars\">Pillars<\/a>\n <a href=\"#dimensions\">Dimensions<\/a>\n <a href=\"#sustainment\">Sustainment<\/a>\n <a href=\"#system\">System<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <section class=\"hero-cover\" id=\"top\">\n <div class=\"hero-paper paper-a\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-b\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-c\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-paper paper-d\" aria-hidden=\"true\"><\/div>\n\n <div class=\"hero-shell\">\n <div class=\"hero-kicker\">\n <span class=\"ornament\">\u2726<\/span>\n Holistic Wellbeing\n <span class=\"ornament\">\u2726<\/span>\n <\/div>\n\n <h1 class=\"hero-title\">The architecture <em>of<\/em> a whole person<\/h1>\n\n <p class=\"hero-standfirst\">\n Wellbeing is the ongoing integration of attention, self-compassion,\n relationships, purpose, environment, and daily practice. Sustainable\n support has to work with the whole system a person lives inside.\n <\/p>\n\n <div class=\"hero-meta\">\n <span>Awareness<\/span>\n <span>Connection<\/span>\n <span>Insight<\/span>\n <span>Purpose<\/span>\n <span>Sustainment<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"thesis\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Problem<\/p>\n <h2>Brief interventions fade.<\/h2>\n <p class=\"prose\">Insight can arrive in therapy, coaching, a classroom, or a moment of reflection. The challenge comes afterward. People return to the conditions that shaped their behavior in the first place, and the energy of the intervention starts to thin out.<\/p>\n <p class=\"prose\">That gap between touchpoints is where sustainment matters. A good system keeps a person connected to their own values, language, and momentum when the structured moment of care is over.<\/p>\n\n <blockquote>\n <p>Wellbeing lasts when support shows up between meaningful moments.<\/p>\n <cite>Journey design principle<\/cite>\n <\/blockquote>\n\n <p class=\"prose\">The question is simple. What helps a person stay in relationship with the insight they already had? The answer is not a single tool. It is a layer of reflection, timing, and reinforcement that keeps the work alive in daily life.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"brainstem\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Framework<\/p>\n <h2>Technology can strengthen reflex or agency.<\/h2>\n <p class=\"prose\">Many digital products are built around reflexive attention. They reward urgency, comparison, and repetition. Holistic wellbeing asks for a different design direction. It asks for products that help people notice what they are feeling, stay connected to others, and move toward purpose with more choice.<\/p>\n <p class=\"prose\">That movement can be understood as a shift upward through layers of awareness. At the bottom, people react. Higher up, they recognize patterns. Higher still, they reconnect with others and act from clarity.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"brainstem-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Hover over each level to see the forces at work<\/p>\n <\/div>\n\n <div class=\"brain-stem\">\n <div class=\"brain-level\" style=\"background:rgba(181,147,95,0.08);\">\n <div class=\"level-label\" style=\"color:var(--color-accent);\">Agency and Purpose<\/div>\n <div class=\"level-desc\"><strong>The destination.<\/strong> A person understands what matters, knows what they need, and acts from alignment. Values clarification, meaning, and contribution live here.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(181,147,95,0.05);\">\n <div class=\"level-label\" style=\"color:var(--color-accent); opacity:0.75;\">Connection and Belonging<\/div>\n <div class=\"level-desc\"><strong>The bridge.<\/strong> Social support, peer invitation, and shared experience create lift. People are more likely to sustain change when they feel seen in community.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(85,58,40,0.04);\">\n <div class=\"level-label\">Awareness and Insight<\/div>\n <div class=\"level-desc\"><strong>The foundation.<\/strong> People begin to recognize triggers, name patterns, and notice what pulls them away from themselves. Awareness gives the work a place to start.<\/div>\n <\/div>\n <div class=\"brain-arrow\">\u2191<\/div>\n <div class=\"brain-level\" style=\"background:rgba(85,58,40,0.025);\">\n <div class=\"level-label\" style=\"color:var(--color-muted); opacity:0.65;\">Reactive Attention<\/div>\n <div class=\"level-desc\"><strong>The floor.<\/strong> Survival instincts, comparison, distraction, and reinforcement loops dominate here. This is the level many digital systems amplify by default.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"pillars\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Four Pillars<\/p>\n <h2>The capacities that support durable wellbeing.<\/h2>\n <p class=\"prose\">Awareness, insight, connection, and purpose work together. Each one strengthens the others. A person who can notice their patterns, understand them, stay connected to others, and act from purpose has a much stronger base for change.<\/p>\n\n <div class=\"pillar-grid\">\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 01<\/div>\n <h3>Awareness<\/h3>\n <p>The ability to observe inner experience with steadiness. This includes attention to thoughts, sensations, patterns, and signals that usually pass by unnoticed.<\/p>\n <span class=\"pillar-tag\">Quest intake<\/span>\n <span class=\"pillar-tag\">Values clarification<\/span>\n <span class=\"pillar-tag\">Pattern noticing<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 02<\/div>\n <h3>Insight<\/h3>\n <p>The capacity to make meaning from those observations. Insight turns raw awareness into understanding that can guide behavior.<\/p>\n <span class=\"pillar-tag\">Reflection<\/span>\n <span class=\"pillar-tag\">Mirroring<\/span>\n <span class=\"pillar-tag\">Inquiry<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 03<\/div>\n <h3>Connection<\/h3>\n <p>Supportive relationships create momentum and reduce isolation. People sustain change more easily when they feel invited into belonging.<\/p>\n <span class=\"pillar-tag\">Beacon<\/span>\n <span class=\"pillar-tag\">Peer support<\/span>\n <span class=\"pillar-tag\">Ambassador program<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Pillar 04<\/div>\n <h3>Purpose<\/h3>\n <p>Purpose organizes effort. It helps a person act from something meaningful enough to hold attention across time.<\/p>\n <span class=\"pillar-tag\">Meaning<\/span>\n <span class=\"pillar-tag\">Contribution<\/span>\n <span class=\"pillar-tag\">Vocation<\/span>\n <\/div>\n <\/div>\n\n <p class=\"prose\">When these pillars are active together, support becomes more coherent. The person is more likely to engage, return, and continue building the life they want.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Self-Compassion<\/p>\n <h2>Self-compassion supports sustainable change.<\/h2>\n <p class=\"prose\">Sustainable wellbeing depends on the relationship a person has with themselves in difficult moments. The key question is simple. What do I need right now? That question opens space for wiser action.<\/p>\n <p class=\"prose\">A system that supports growth should help people return to their own voice, their own values, and their own capacity for care. That is different from generic advice. It is more personal, more grounded, and much more likely to endure.<\/p>\n\n <blockquote>\n <p>What do I need in this moment?<\/p>\n <cite>Core self-compassion question<\/cite>\n <\/blockquote>\n\n <p class=\"prose\">That question can become a product principle. It keeps the intervention close to lived experience and gives the person room to respond with honesty.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"dimensions\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">The Whole Person<\/p>\n <h2>Eight dimensions, one system.<\/h2>\n <p class=\"prose\">Holistic wellbeing is better understood as a set of interdependent dimensions than as a single score. Physical health, emotional clarity, relational connection, creative expression, spiritual practice, presence, environmental awareness, and values alignment all influence one another.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"orbital-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Click and drag a sphere to expand it and watch the others respond<\/p>\n <\/div>\n\n <div class=\"dim-grid\">\n <div class=\"dim-card\"><div class=\"dim-name\">Physical Health<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Sleep, movement, recovery, nervous system capacity<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Emotional Clarity<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Naming patterns, processing experience, returning to center<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Relational Connection<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Presence, reciprocity, time with others<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Creative Expression<\/div><div class=\"dim-score\">5<\/div><div class=\"dim-status\">Writing, making, artistic exploration, experimentation<\/div><div class=\"dim-bar\" style=\"width:50%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Spiritual Practice<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Contemplation, awe, practice, relationship to meaning<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Presence and Clarity<\/div><div class=\"dim-score\">6<\/div><div class=\"dim-status\">Deep work, phone-free attention, intentional capture<\/div><div class=\"dim-bar\" style=\"width:60%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Environmental Presence<\/div><div class=\"dim-score\">7<\/div><div class=\"dim-status\">Nature, place, rhythms of daily life<\/div><div class=\"dim-bar\" style=\"width:70%\"><\/div><\/div>\n <div class=\"dim-card\"><div class=\"dim-name\">Values Alignment<\/div><div class=\"dim-score\">5<\/div><div class=\"dim-status\">Acting in ways that match what matters most<\/div><div class=\"dim-bar\" style=\"width:50%\"><\/div><\/div>\n <\/div>\n\n <p class=\"prose\">The goal is not perfection across all dimensions. The goal is better awareness of which areas are carrying strength, which are strained, and which need immediate attention.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"sustainment\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Sustainment<\/p>\n <h2>What happens between the moments that matter.<\/h2>\n <p class=\"prose\">Clinical and coaching touchpoints can be powerful. They are also periodic. The territory between them is where people try to apply what they learned inside real life.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"sustainment-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Move your cursor across the timeline to see intervention density<\/p>\n <\/div>\n\n <p class=\"prose\">A sustainment layer does not replace the larger moment of care. It extends it. Small signals, reminders, nudges, and reflections help keep the work in motion until the next meaningful touchpoint.<\/p>\n <p class=\"prose\">The quality of that support matters. When a nudge feels specific and relevant, a person is more likely to stay connected to the process that produced it.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section id=\"system\">\n <div class=\"reveal\">\n <p class=\"eyebrow\">Integrated System<\/p>\n <h2>Three tools. Three spheres. One coherent life.<\/h2>\n <p class=\"prose\">A full wellbeing system can support growth, connection, and self-knowledge together. Each tool plays a different role, and each one helps the others become more useful over time.<\/p>\n\n <div class=\"canvas-wrap\">\n <canvas id=\"spheres-canvas\"><\/canvas>\n <p class=\"canvas-hint\">Hover near a sphere to see it pulse and connect<\/p>\n <\/div>\n\n <div class=\"pillar-grid\">\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Journey SMS<\/div>\n <h3>Growth and Development<\/h3>\n <p>Nudges grounded in the person’s own captures, values, and patterns. The system reflects their language back with timing and care.<\/p>\n <span class=\"pillar-tag\">Nudge pipeline<\/span>\n <span class=\"pillar-tag\">Values mirroring<\/span>\n <\/div>\n\n <div class=\"pillar-card\">\n <div class=\"pillar-num\">Beacon<\/div>\n <h3>Relationships and Connection<\/h3>\n <p>A lightweight social signal that lowers friction and helps people reach toward each other with presence.<\/p>\n <span class=\"pillar-tag\">One-button signal<\/span>\n <span class=\"pillar-tag\">Relational support<\/span>\n <\/div>\n <\/div>\n\n <div class=\"pillar-grid\" style=\"margin-top:0;\">\n <div class=\"pillar-card\" style=\"grid-column:1 \/ -1; max-width:100%;\">\n <div class=\"pillar-num\">Serein<\/div>\n <h3>Self-Knowledge and Vocation<\/h3>\n <p>Voice capture and reflection build a living source of self-understanding. That material gives the system roots in a person’s real life.<\/p>\n <span class=\"pillar-tag\">Voice capture<\/span>\n <span class=\"pillar-tag\">Personal model<\/span>\n <span class=\"pillar-tag\">Meaning-making<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Practice<\/p>\n <h2>Spaciousness makes change more workable.<\/h2>\n <p class=\"prose\">People do better when they have enough space to observe what is happening inside their lives. Spaciousness gives thoughts and feelings room to move without taking over the whole field.<\/p>\n <p class=\"prose\">A good nudge supports that spaciousness. It does not push. It invites attention. It helps a person pause, notice, and choose more deliberately.<\/p>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <p class=\"eyebrow\">Open Questions<\/p>\n <h2>What remains to be solved.<\/h2>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>How do you measure self-compassion at scale?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Self-compassion may be one of the most important indicators of sustainable behavior change. The challenge is building measurement that feels human and practical while still being rigorous enough to track over time.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>Where is the line between peer support and clinical support?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Peer support is valuable because it feels accessible and real. At the same time, systems need clear boundaries so support remains supportive and does not slide into unstructured care delivery.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>How can the pipeline adapt across cultures and contexts?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Context shapes meaning. The same nudge can land very differently depending on culture, economics, family structure, and workload. Personalization has to account for circumstance as well as personality.<\/p><\/div><\/div>\n <\/div>\n\n <div class=\"accordion-item\">\n <button class=\"accordion-trigger\">\n <span>What does family modeling look like in practice?<\/span>\n <svg class=\"chevron\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M5 8l5 5 5-5\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n <\/button>\n <div class=\"accordion-content\"><div class=\"inner\"><p>Behavior change often spreads through systems, not individuals alone. Family habits, parent modeling, and shared digital norms may be one of the strongest multipliers available.<\/p><\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <div class=\"content\">\n <section>\n <div class=\"reveal\">\n <div class=\"stat-row\">\n <div class=\"stat\">\n <div class=\"stat-number\">97%<\/div>\n <div class=\"stat-label\">of students identify doom scrolling as a primary concern<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-number\">8<\/div>\n <div class=\"stat-label\">dimensions of wellbeing held in one system<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-number\">4<\/div>\n <div class=\"stat-label\">core capacities that support flourishing<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <hr>\n\n <footer class=\"content\">\n <div class=\"reveal\">\n <p>Journey · Holistic Wellbeing, Applied Nudge Theory, Values Mirroring<\/p>\n <\/div>\n <\/footer>\n<\/div>\n\n<script>\nconst _cc = {};\nfunction hexToRgb(h){const m=\/^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$\/i.exec(h);return m?{r:parseInt(m[1],16),g:parseInt(m[2],16),b:parseInt(m[3],16)}:{r:100,g:100,b:100};}\nfunction rgba(h,a){const k=h+a;if(_cc[k])return _cc[k];const c=hexToRgb(h);const v=`rgba(${c.r},${c.g},${c.b},${a})`;_cc[k]=v;return v;}\nfunction setupCanvas(cv,w,h){const d=window.devicePixelRatio||1;cv.width=w*d;cv.height=h*d;cv.style.width=w+'px';cv.style.height=h+'px';const c=cv.getContext('2d');c.scale(d,d);return c;}\nconst C={accent:'#B5935F',dark:'#291911',muted:'#856B58',border:'#D2CCC5',success:'#6B8F5E',light:'#F5F1EA'};\nconst dimColors=['#A67C52','#6B8F5E','#8B6F4E','#B5935F','#7A6B5D','#9C7A5B','#5D7A6B','#8A7462'];\n\nfunction initBrainStem(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=300;\n const ctx=setupCanvas(cv,W,H);\n let mx=-1,my=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;my=(e.clientY-r.top)\/r.height*H;});\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;});\n\n const levels=[\n {label:'AGENCY AND PURPOSE',y:0.12,color:C.accent,size:1.0},\n {label:'CONNECTION',y:0.35,color:C.accent,size:0.8},\n {label:'AWARENESS AND INSIGHT',y:0.58,color:C.muted,size:0.6},\n {label:'REACTIVE ATTENTION',y:0.82,color:C.border,size:0.4}\n ];\n\n let particles=[];\n function spawn(){\n particles.push({\n x:W*0.1+Math.random()*W*0.8,\n y:H*0.95,\n vy:-0.3-Math.random()*0.4,\n vx:(Math.random()-0.5)*0.5,\n r:2+Math.random()*2,\n opacity:0.3+Math.random()*0.3,\n life:1\n });\n }\n\n function frame(){\n ctx.clearRect(0,0,W,H);\n\n levels.forEach((l)=>{\n const bandY=l.y*H;\n const bandH=H\/levels.length;\n ctx.fillStyle=rgba(l.color,0.03*(1+l.size));\n ctx.fillRect(0,bandY-bandH*0.3,W,bandH*0.6);\n\n const inBand=my>0&&my>bandY-bandH*0.4&&my<bandY+bandH*0.4;\n ctx.font=`${inBand?'700':'600'} ${inBand?'12':'10'}px Inter, system-ui, sans-serif`;\n ctx.textAlign='left';\n ctx.fillStyle=rgba(l.color,inBand?0.9:0.3+l.size*0.3);\n ctx.fillText(l.label,24,bandY+4);\n\n if(inBand){\n ctx.fillStyle=rgba(l.color,0.03);\n ctx.fillRect(0,bandY-bandH*0.3,W,bandH*0.6);\n }\n\n ctx.beginPath();\n ctx.moveTo(0,bandY+16);\n ctx.lineTo(W,bandY+16);\n ctx.strokeStyle=rgba(C.border,0.15);\n ctx.lineWidth=1;\n ctx.stroke();\n });\n\n if(Math.random()<0.06)spawn();\n\n particles.forEach(p=>{\n p.y+=p.vy;\n p.x+=p.vx;\n p.vx+=(Math.random()-0.5)*0.05;\n\n let currentLevel=3;\n for(let i=0;i<levels.length;i++){\n if(p.y<levels[i].y*H+30){currentLevel=i;break;}\n }\n\n const levelBoost=1-currentLevel\/levels.length;\n const drawR=p.r*(0.6+levelBoost*0.8);\n const drawOpacity=p.opacity*(0.3+levelBoost*0.7);\n const drawColor=currentLevel<=1?C.accent:currentLevel===2?C.muted:C.border;\n\n if(mx>0&&my>0){\n const dx=mx-p.x,dy=my-p.y;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<120&&dist>0){\n const f=(1-dist\/120)*0.15;\n p.x+=dx*f*0.04;\n p.y+=dy*f*0.04;\n }\n }\n\n if(currentLevel>=2&&Math.random()<0.001)p.vy*=0.3;\n\n ctx.beginPath();\n ctx.arc(p.x,p.y,drawR*2.5,0,Math.PI*2);\n ctx.fillStyle=rgba(drawColor,0.04*drawOpacity);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(p.x,p.y,drawR,0,Math.PI*2);\n ctx.fillStyle=rgba(drawColor,drawOpacity);\n ctx.fill();\n\n p.life-=0.001;\n });\n\n particles=particles.filter(p=>p.y>-10&&p.life>0&&p.x>-20&&p.x<W+20);\n if(particles.length>60)particles=particles.slice(-60);\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initOrbital(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=420;\n const ctx=setupCanvas(cv,W,H);\n const cx=W\/2,cy=H\/2;\n let mx=-1,my=-1;\n let isDown=false;\n let hoverIdx=-1;\n\n cv.addEventListener('mousemove',e=>{\n const r=cv.getBoundingClientRect();\n mx=(e.clientX-r.left)\/r.width*W;\n my=(e.clientY-r.top)\/r.height*H;\n });\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;hoverIdx=-1;});\n cv.addEventListener('mousedown',()=>{isDown=true;});\n cv.addEventListener('mouseup',()=>{isDown=false;});\n\n const dims=[\n {label:'Physical',score:7,color:dimColors[0]},\n {label:'Emotional',score:6,color:dimColors[1]},\n {label:'Relational',score:7,color:dimColors[2]},\n {label:'Creative',score:5,color:dimColors[3]},\n {label:'Spiritual',score:6,color:dimColors[4]},\n {label:'Presence',score:6,color:dimColors[5]},\n {label:'Environmental',score:7,color:dimColors[6]},\n {label:'Values',score:5,color:dimColors[7]}\n ];\n\n const N=dims.length;\n const baseRadius=110;\n const baseSize=14;\n const expansion=dims.map(()=>0.5);\n const targetExpansion=dims.map(()=>0.5);\n const angles=dims.map((_,i)=>i*Math.PI*2\/N-Math.PI\/2);\n let autoRotation=0;\n const nodes=dims.map(()=>({x:0,y:0,r:0}));\n const innerNodes=dims.map(()=>({x:0,y:0}));\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n autoRotation+=0.0003;\n\n hoverIdx=-1;\n let closestDist=Infinity;\n if(mx>0&&my>0){\n nodes.forEach((n,i)=>{\n const dx=mx-n.x,dy=my-n.y;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<closestDist&&dist<100){\n closestDist=dist;\n hoverIdx=i;\n }\n });\n }\n\n for(let i=0;i<N;i++){\n if(hoverIdx>=0){\n if(i===hoverIdx){\n targetExpansion[i]=isDown?1.0:0.85;\n } else {\n const angDist=Math.abs(((i-hoverIdx+N)%N)-N\/2);\n const nearness=1-angDist\/(N\/2);\n targetExpansion[i]=isDown?0.15+nearness*0.25:0.25+nearness*0.2;\n }\n } else {\n targetExpansion[i]=0.5+0.08*Math.sin(t\/1200+i*0.8);\n }\n }\n\n for(let i=0;i<N;i++) expansion[i]+=(targetExpansion[i]-expansion[i])*0.06;\n\n for(let i=0;i<N;i++){\n const angle=angles[i]+autoRotation;\n const exp=expansion[i];\n const r=baseRadius*(0.4+exp*0.7);\n const size=baseSize*(0.5+exp*0.6);\n nodes[i].x=cx+Math.cos(angle)*r;\n nodes[i].y=cy+Math.sin(angle)*r*0.65;\n nodes[i].r=size;\n const innerR=r*0.45;\n innerNodes[i].x=cx+Math.cos(angle)*innerR;\n innerNodes[i].y=cy+Math.sin(angle)*innerR*0.65;\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(nodes[i].x,nodes[i].y);\n ctx.lineTo(nodes[j].x,nodes[j].y);\n ctx.strokeStyle=rgba(C.border,0.2+expansion[i]*0.15);\n ctx.lineWidth=1;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(innerNodes[i].x,innerNodes[i].y);\n ctx.lineTo(nodes[j].x,nodes[j].y);\n ctx.strokeStyle=rgba(dims[i].color,0.1+expansion[i]*0.1);\n ctx.lineWidth=0.8;\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(innerNodes[j].x,innerNodes[j].y);\n ctx.lineTo(nodes[i].x,nodes[i].y);\n ctx.strokeStyle=rgba(dims[j].color,0.1+expansion[j]*0.1);\n ctx.lineWidth=0.8;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const j=(i+1)%N;\n ctx.beginPath();\n ctx.moveTo(innerNodes[i].x,innerNodes[i].y);\n ctx.lineTo(innerNodes[j].x,innerNodes[j].y);\n ctx.strokeStyle=rgba(C.border,0.1);\n ctx.lineWidth=0.6;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(innerNodes[i].x,innerNodes[i].y);\n ctx.strokeStyle=rgba(dims[i].color,0.06+expansion[i]*0.06);\n ctx.lineWidth=0.5;\n ctx.stroke();\n }\n\n for(let i=0;i<N;i++){\n const pivotR=2+expansion[i]*1.5;\n ctx.beginPath();\n ctx.arc(innerNodes[i].x,innerNodes[i].y,pivotR,0,Math.PI*2);\n ctx.fillStyle=rgba(dims[i].color,0.25+expansion[i]*0.2);\n ctx.fill();\n }\n\n const order=dims.map((_,i)=>i).sort((a,b)=>nodes[a].y-nodes[b].y);\n order.forEach(i=>{\n const n=nodes[i];\n const exp=expansion[i];\n const isHover=i===hoverIdx;\n\n const glowR=n.r+12+exp*10;\n const grad=ctx.createRadialGradient(n.x,n.y,n.r*0.5,n.x,n.y,glowR);\n grad.addColorStop(0,rgba(dims[i].color,0.12+exp*0.08));\n grad.addColorStop(1,rgba(dims[i].color,0));\n ctx.beginPath();\n ctx.arc(n.x,n.y,glowR,0,Math.PI*2);\n ctx.fillStyle=grad;\n ctx.fill();\n\n const bodyGrad=ctx.createRadialGradient(n.x-n.r*0.3,n.y-n.r*0.3,n.r*0.1,n.x,n.y,n.r);\n bodyGrad.addColorStop(0,rgba(dims[i].color,0.5+exp*0.35));\n bodyGrad.addColorStop(1,rgba(dims[i].color,0.2+exp*0.15));\n ctx.beginPath();\n ctx.arc(n.x,n.y,n.r,0,Math.PI*2);\n ctx.fillStyle=bodyGrad;\n ctx.fill();\n\n if(isHover){\n ctx.beginPath();\n ctx.arc(n.x,n.y,n.r+3,0,Math.PI*2);\n ctx.strokeStyle=rgba(dims[i].color,0.5);\n ctx.lineWidth=2;\n ctx.stroke();\n }\n\n ctx.font=`${isHover?'700':'600'} ${isHover?'12':'10'}px Inter, system-ui, sans-serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.dark,isHover?0.9:0.5+exp*0.2);\n ctx.fillText(dims[i].label,n.x,n.y-n.r-10);\n\n ctx.font=`500 ${Math.round(10+exp*8)}px 'Playfair Display', serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba('#fff',0.7+exp*0.3);\n ctx.fillText(dims[i].score,n.x,n.y+Math.round(4+exp*3));\n });\n\n const coreR=16+4*Math.sin(t\/800);\n const coreGrad=ctx.createRadialGradient(cx,cy,0,cx,cy,coreR+8);\n coreGrad.addColorStop(0,rgba(C.accent,0.35));\n coreGrad.addColorStop(1,rgba(C.accent,0.05));\n ctx.beginPath();ctx.arc(cx,cy,coreR+8,0,Math.PI*2);ctx.fillStyle=coreGrad;ctx.fill();\n ctx.beginPath();ctx.arc(cx,cy,coreR,0,Math.PI*2);ctx.fillStyle=rgba(C.accent,0.55);ctx.fill();\n ctx.font='700 8px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba('#fff',0.85);\n ctx.fillText('AWARENESS',cx,cy+3);\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initSustainment(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=240;\n const ctx=setupCanvas(cv,W,H);\n let mx=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;});\n cv.addEventListener('mouseleave',()=>{mx=-1;});\n\n const touchX=[W*0.08,W*0.32,W*0.58,W*0.85];\n const nudges=[];\n for(let i=0;i<touchX.length-1;i++){\n const gap=touchX[i+1]-touchX[i];\n const count=4+Math.floor(Math.random()*3);\n for(let j=1;j<=count;j++){\n nudges.push({x:touchX[i]+gap*j\/(count+1)+(Math.random()-0.5)*10,phase:Math.random()*Math.PI*2});\n }\n }\n\n function wellbeingAt(x){\n let y=H*0.7;\n touchX.forEach(cx=>{\n const dist=x-cx;\n if(dist>0&&dist<W*0.3){\n const rise=Math.exp(-dist\/(W*0.04))*H*0.35;\n const decay=Math.exp(-dist\/(W*0.12))*H*0.3;\n y-=Math.max(rise,decay);\n }\n });\n return y;\n }\n\n function wellbeingWithNudges(x){\n let y=wellbeingAt(x);\n nudges.forEach(n=>{\n const dist=Math.abs(x-n.x);\n if(dist<30)y-=8*(1-dist\/30);\n });\n const progress=x\/W;\n y-=15*progress;\n return Math.max(H*0.2,y);\n }\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n\n ctx.beginPath();\n ctx.moveTo(0,H*0.7);\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingAt(x));\n ctx.strokeStyle=rgba(C.border,0.5);\n ctx.lineWidth=1.5;\n ctx.setLineDash([6,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n\n ctx.beginPath();\n ctx.moveTo(0,H*0.7);\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingWithNudges(x));\n ctx.strokeStyle=rgba(C.accent,0.6);\n ctx.lineWidth=2;\n ctx.stroke();\n\n ctx.beginPath();\n ctx.moveTo(0,wellbeingAt(0));\n for(let x=0;x<=W;x+=3)ctx.lineTo(x,wellbeingAt(x));\n for(let x=W;x>=0;x-=3)ctx.lineTo(x,wellbeingWithNudges(x));\n ctx.closePath();\n ctx.fillStyle=rgba(C.accent,0.04);\n ctx.fill();\n\n touchX.forEach(cx=>{\n const peakY=wellbeingWithNudges(cx+5);\n ctx.beginPath();\n ctx.moveTo(cx,H*0.85);\n ctx.lineTo(cx,peakY-10);\n ctx.strokeStyle=rgba(C.success,0.3);\n ctx.lineWidth=1.5;\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(cx,peakY-10,6,0,Math.PI*2);\n ctx.fillStyle=rgba(C.success,0.6);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(cx,peakY-10,12,0,Math.PI*2);\n ctx.fillStyle=rgba(C.success,0.08);\n ctx.fill();\n });\n\n nudges.forEach(n=>{\n const ny=wellbeingWithNudges(n.x);\n const pulse=2+Math.sin(t\/400+n.phase)*0.8;\n const nearMouse=mx>0?Math.max(0,1-Math.abs(mx-n.x)\/60):0;\n\n ctx.beginPath();\n ctx.arc(n.x,ny,pulse+(nearMouse*2),0,Math.PI*2);\n ctx.fillStyle=rgba(C.accent,0.35+nearMouse*0.4);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(n.x,ny,pulse+4+(nearMouse*4),0,Math.PI*2);\n ctx.fillStyle=rgba(C.accent,0.04+nearMouse*0.08);\n ctx.fill();\n });\n\n ctx.font='600 9px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.success,0.5);\n touchX.forEach(cx=>ctx.fillText('TOUCHPOINT',cx,H*0.95));\n\n if(mx>0){\n ctx.beginPath();\n ctx.moveTo(mx,0);\n ctx.lineTo(mx,H);\n ctx.strokeStyle=rgba(C.accent,0.1);\n ctx.lineWidth=1;\n ctx.stroke();\n }\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nfunction initSpheres(id){\n const cv=document.getElementById(id);\n const W=cv.parentElement.offsetWidth;\n const H=300;\n const ctx=setupCanvas(cv,W,H);\n const cx=W\/2,cy=H\/2;\n let mx=-1,my=-1;\n cv.addEventListener('mousemove',e=>{const r=cv.getBoundingClientRect();mx=(e.clientX-r.left)\/r.width*W;my=(e.clientY-r.top)\/r.height*H;});\n cv.addEventListener('mouseleave',()=>{mx=-1;my=-1;});\n\n const spheres=[\n {label:'JOURNEY',sub:'Growth',radius:100,speed:0.4,size:10,color:C.accent,angle:0},\n {label:'BEACON',sub:'Connection',radius:100,speed:0.4,size:9,color:C.success,angle:Math.PI*2\/3},\n {label:'SEREIN',sub:'Self-knowledge',radius:100,speed:0.4,size:9,color:'#7A6B5D',angle:Math.PI*4\/3}\n ];\n\n function frame(t){\n ctx.clearRect(0,0,W,H);\n\n const coreR=16+4*Math.sin(t\/800);\n const coreGrad=ctx.createRadialGradient(cx,cy,0,cx,cy,coreR+12);\n coreGrad.addColorStop(0,rgba(C.dark,0.3));\n coreGrad.addColorStop(1,rgba(C.dark,0.02));\n ctx.beginPath();ctx.arc(cx,cy,coreR+12,0,Math.PI*2);ctx.fillStyle=coreGrad;ctx.fill();\n ctx.beginPath();ctx.arc(cx,cy,coreR,0,Math.PI*2);ctx.fillStyle=rgba(C.dark,0.45);ctx.fill();\n ctx.font='700 8px Inter, system-ui, sans-serif';\n ctx.textAlign='center';\n ctx.fillStyle=rgba(C.light,0.8);\n ctx.fillText('PERSON',cx,cy+3);\n\n const positions=[];\n spheres.forEach(s=>{\n const angle=(t\/2000)*s.speed+s.angle;\n let bx=cx+Math.cos(angle)*s.radius;\n let by=cy+Math.sin(angle)*s.radius*0.5;\n let proximity=0;\n\n if(mx>0&&my>0){\n const dx=bx-mx,dy=by-my;\n const dist=Math.sqrt(dx*dx+dy*dy);\n if(dist<100&&dist>0){\n proximity=1-dist\/100;\n bx+=(dx\/dist)*proximity*6;\n by+=(dy\/dist)*proximity*6;\n }\n }\n\n positions.push({x:bx,y:by});\n\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(bx,by);\n ctx.strokeStyle=rgba(s.color,0.1+proximity*0.15);\n ctx.lineWidth=1+proximity;\n ctx.stroke();\n\n const glowSize=s.size+15+proximity*12;\n const grad=ctx.createRadialGradient(bx,by,s.size*0.5,bx,by,glowSize);\n grad.addColorStop(0,rgba(s.color,0.1+proximity*0.1));\n grad.addColorStop(1,rgba(s.color,0));\n ctx.beginPath();ctx.arc(bx,by,glowSize,0,Math.PI*2);ctx.fillStyle=grad;ctx.fill();\n\n const bodySize=s.size+proximity*4;\n ctx.beginPath();ctx.arc(bx,by,bodySize,0,Math.PI*2);ctx.fillStyle=rgba(s.color,0.6+proximity*0.2);ctx.fill();\n\n ctx.font=`700 ${10+proximity*2}px Inter, system-ui, sans-serif`;\n ctx.textAlign='center';\n ctx.fillStyle=rgba(s.color,0.7+proximity*0.2);\n ctx.fillText(s.label,bx,by-bodySize-14);\n ctx.font='400 10px Inter, system-ui, sans-serif';\n ctx.fillStyle=rgba(C.muted,0.4+proximity*0.3);\n ctx.fillText(s.sub,bx,by-bodySize-4);\n });\n\n for(let i=0;i<positions.length;i++){\n const j=(i+1)%positions.length;\n ctx.beginPath();\n ctx.moveTo(positions[i].x,positions[i].y);\n ctx.lineTo(positions[j].x,positions[j].y);\n ctx.strokeStyle=rgba(C.border,0.15);\n ctx.lineWidth=1;\n ctx.setLineDash([3,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n}\n\nconst obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible');});},{threshold:0.1,rootMargin:'0px 0px -40px 0px'});\ndocument.querySelectorAll('.embed-page .reveal').forEach(el=>obs.observe(el));\n\ndocument.querySelectorAll('.embed-page .accordion-trigger').forEach(btn=>{\n btn.addEventListener('click',()=>{\n const item=btn.parentElement;\n const wasOpen=item.classList.contains('open');\n document.querySelectorAll('.embed-page .accordion-item').forEach(i=>i.classList.remove('open'));\n if(!wasOpen)item.classList.add('open');\n });\n});\n\ndocument.querySelectorAll('.embed-page .page-subnav-links a[href^=\"#\"]').forEach(link=>{\n link.addEventListener('click',e=>{\n e.preventDefault();\n const target=document.querySelector(link.getAttribute('href'));\n if(!target)return;\n const siteOffset=parseInt(getComputedStyle(document.querySelector('.embed-page')).getPropertyValue('--site-header-offset').trim(),10)||72;\n const y=target.getBoundingClientRect().top+window.pageYOffset-siteOffset-24;\n window.scrollTo({top:y,behavior:'smooth'});\n });\n});\n\ndocument.addEventListener('DOMContentLoaded',()=>{\n initBrainStem('brainstem-canvas');\n initOrbital('orbital-canvas');\n initSustainment('sustainment-canvas');\n initSpheres('spheres-canvas');\n});\n\nlet rt;\nwindow.addEventListener('resize',()=>{\n clearTimeout(rt);\n rt=setTimeout(()=>{\n initBrainStem('brainstem-canvas');\n initOrbital('orbital-canvas');\n initSustainment('sustainment-canvas');\n initSpheres('spheres-canvas');\n },300);\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Holistic Wellbeing | The Architecture of a Whole Person Read \u2022 11 min Thesis Framework Pillars Dimensions Sustainment System \u2726 Holistic Wellbeing \u2726 The architecture of a whole person Wellbeing is the ongoing integration of attention, self-compassion, relationships, purpose, environment, and daily practice. Sustainable support has to work with the whole system a person lives […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"1080","footnotes":""},"categories":[9],"tags":[],"class_list":["post-1551","post","type-post","status-publish","format-standard","hentry","category-research"],"_links":{"self":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/comments?post=1551"}],"version-history":[{"count":3,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551\/revisions"}],"predecessor-version":[{"id":1583,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/posts\/1551\/revisions\/1583"}],"wp:attachment":[{"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/media?parent=1551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/categories?post=1551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lorenzoscardicchio.com\/index.php\/wp-json\/wp\/v2\/tags?post=1551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}