test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Invisible Architecture of Mental Health</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f7f5f0;
--bg-card: #ffffff;
--bg-panel: #f0ede6;
--text-primary: #1a1814;
--text-secondary: #5a5650;
--text-muted: #8a8680;
--border: rgba(30,25,20,0.12);
--border-strong: rgba(30,25,20,0.25);
--accent-structural: #534AB7;
--accent-env: #0F6E56;
--accent-bio: #854F0B;
--accent-social: #993C1D;
--accent-temporal: #185FA5;
--accent-individual: #1a1814;
--shadow-card: 0 2px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--text-primary);
min-height: 100vh;
padding: 0;
}
/* === PAGE WRAPPER === */
.ia-wrapper {
max-width: 960px;
margin: 0 auto;
padding: 3rem 1.5rem 4rem;
}
/* === HEADER === */
.ia-header {
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--border);
padding-bottom: 2rem;
}
.ia-eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.ia-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 400;
line-height: 1.1;
color: var(--text-primary);
margin-bottom: 1rem;
}
.ia-title em {
font-style: italic;
color: var(--accent-structural);
}
.ia-subtitle {
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: var(--text-secondary);
max-width: 620px;
}
/* === LEGEND === */
.ia-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
background: var(--bg-card);
border: 0.5px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-card);
}
.legend-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
width: 100%;
margin-bottom: 2px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.legend-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
/* === CONTROLS === */
.ia-controls {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 1.25rem;
}
.ctrl-btn {
background: var(--bg-card);
border: 0.5px solid var(--border-strong);
border-radius: 20px;
padding: 5px 13px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 400;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.18s ease;
outline: none;
}
.ctrl-btn:hover {
background: var(--bg-panel);
color: var(--text-primary);
border-color: var(--border-strong);
}
.ctrl-btn.active {
background: var(--text-primary);
color: #fff;
border-color: var(--text-primary);
font-weight: 500;
}
/* === SVG CARD === */
.ia-diagram-card {
background: var(--bg-card);
border: 0.5px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow-card);
padding: 1.5rem 1rem;
margin-bottom: 1.25rem;
overflow: hidden;
}
.ia-diagram-card svg {
display: block;
width: 100%;
height: auto;
}
/* === INFO PANEL === */
.ia-panel {
background: var(--bg-card);
border: 0.5px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-card);
padding: 1.25rem 1.5rem;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
min-height: 90px;
transition: opacity 0.15s ease;
margin-bottom: 2rem;
}
.ia-panel strong {
font-weight: 500;
color: var(--text-primary);
display: block;
margin-bottom: 6px;
font-size: 13px;
letter-spacing: 0.01em;
}
.ia-panel .chain {
font-size: 11px;
font-family: 'DM Sans', monospace;
margin-top: 10px;
color: var(--text-muted);
padding-top: 10px;
border-top: 0.5px solid var(--border);
}
.ia-panel .chain span {
color: var(--text-secondary);
}
/* === FOOTNOTE === */
.ia-footer {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.ia-footer p + p { margin-top: 0.4rem; }
/* === SVG node interactivity === */
.node-btn { cursor: pointer; }
.node-btn:hover rect, .node-btn:hover ellipse { filter: brightness(0.96); }
.node-btn.dimmed { opacity: 0.18; }
.node-btn.highlighted rect { stroke-width: 2 !important; }
.node-btn.highlighted ellipse { stroke-width: 2.5 !important; }
.flow-line { transition: opacity 0.22s ease; }
.flow-line.dimmed { opacity: 0.04; }
.flow-line.active-flow { opacity: 1 !important; }
/* === RESPONSIVE === */
@media (max-width: 600px) {
.ia-wrapper { padding: 1.5rem 1rem 3rem; }
.ia-diagram-card { padding: 0.75rem 0.25rem; }
}
</style>
</head>
<body>
<div class="ia-wrapper">
<header class="ia-header">
<p class="ia-eyebrow">Interactive Diagram</p>
<h1 class="ia-title">The <em>Invisible</em> Architecture<br>of Mental Health</h1>
<p class="ia-subtitle">Every force outside the skin that shapes what happens inside the mind — from structural policy to biological embedding. Select any domain to trace its causal pathway.</p>
</header>
<div class="ia-legend">
<span class="legend-label">Domain key</span>
<div class="legend-item"><div class="legend-dot" style="background:#534AB7"></div> Structural</div>
<div class="legend-item"><div class="legend-dot" style="background:#0F6E56"></div> Environmental</div>
<div class="legend-item"><div class="legend-dot" style="background:#854F0B"></div> Biological</div>
<div class="legend-item"><div class="legend-dot" style="background:#993C1D"></div> Social / Cultural</div>
<div class="legend-item"><div class="legend-dot" style="background:#185FA5"></div> Temporal / Digital</div>
<div class="legend-item"><div class="legend-dot" style="background:#1a1814; border-radius:50%"></div> The Individual</div>
<div class="legend-item" style="margin-left:auto;font-size:11px;color:#8a8680;">── direct effect | ╌ ╌ mediated effect</div>
</div>
<div class="ia-controls" id="controls">
<button class="ctrl-btn active" data-node="all" onclick="selectNode('all',this)">Show all</button>
<button class="ctrl-btn" data-node="determinants" onclick="selectNode('determinants',this)">Determinants</button>
<button class="ctrl-btn" data-node="structure" onclick="selectNode('structure',this)">Structure</button>
<button class="ctrl-btn" data-node="inequity" onclick="selectNode('inequity',this)">Inequity</button>
<button class="ctrl-btn" data-node="environment" onclick="selectNode('environment',this)">Environment</button>
<button class="ctrl-btn" data-node="biology" onclick="selectNode('biology',this)">Biology</button>
<button class="ctrl-btn" data-node="stress" onclick="selectNode('stress',this)">Stress</button>
<button class="ctrl-btn" data-node="digital" onclick="selectNode('digital',this)">Digital</button>
<button class="ctrl-btn" data-node="social" onclick="selectNode('social',this)">Social capital</button>
<button class="ctrl-btn" data-node="cultural" onclick="selectNode('cultural',this)">Cultural</button>
<button class="ctrl-btn" data-node="temporal" onclick="selectNode('temporal',this)">Temporal</button>
</div>
<div class="ia-diagram-card">
<svg viewBox="0 0 680 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ia-svg-title ia-svg-desc">
<title id="ia-svg-title">Invisible Architecture — causal map</title>
<desc id="ia-svg-desc">A directed graph showing how structural, environmental, biological, social, cultural, temporal and digital forces converge on the individual's mental health.</desc>
<defs>
<marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- FLOW LINES -->
<path id="fl-structure-determinants" class="flow-line" d="M190 100 L190 148" fill="none" stroke="#7F77DD" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-structure-inequity" class="flow-line" d="M240 108 L340 148" fill="none" stroke="#7F77DD" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-inequity-determinants" class="flow-line" d="M320 168 L240 182" fill="none" stroke="#D85A30" stroke-width="1.3" opacity="0.55" marker-end="url(#arr)"/>
<path id="fl-determinants-environment" class="flow-line" d="M170 200 L130 248" fill="none" stroke="#1D9E75" stroke-width="1.2" opacity="0.5" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-determinants-stress" class="flow-line" d="M190 200 L260 248" fill="none" stroke="#BA7517" stroke-width="1.5" opacity="0.6" marker-end="url(#arr)"/>
<path id="fl-inequity-environment" class="flow-line" d="M310 188 L155 250" fill="none" stroke="#D85A30" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)"/>
<path id="fl-inequity-stress" class="flow-line" d="M360 190 L310 250" fill="none" stroke="#D85A30" stroke-width="1.4" opacity="0.55" marker-end="url(#arr)"/>
<path id="fl-environment-biology" class="flow-line" d="M130 298 L195 358" fill="none" stroke="#0F6E56" stroke-width="1.5" opacity="0.6" marker-end="url(#arr)"/>
<path id="fl-environment-stress" class="flow-line" d="M150 278 L250 270" fill="none" stroke="#0F6E56" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)"/>
<path id="fl-stress-biology" class="flow-line" d="M275 305 L245 355" fill="none" stroke="#BA7517" stroke-width="1.8" opacity="0.7" marker-end="url(#arr)"/>
<path id="fl-biology-individual" class="flow-line" d="M240 398 L310 438" fill="none" stroke="#EF9F27" stroke-width="2" opacity="0.75" marker-end="url(#arr)"/>
<path id="fl-stress-individual" class="flow-line" d="M295 308 L350 432" fill="none" stroke="#BA7517" stroke-width="1.8" opacity="0.7" marker-end="url(#arr)"/>
<path id="fl-digital-stress" class="flow-line" d="M480 188 L345 262" fill="none" stroke="#185FA5" stroke-width="1.3" opacity="0.5" marker-end="url(#arr)"/>
<path id="fl-digital-individual" class="flow-line" d="M510 210 L400 432" fill="none" stroke="#185FA5" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-social-individual" class="flow-line" d="M530 310 L415 442" fill="none" stroke="#993C1D" stroke-width="1.5" opacity="0.6" marker-end="url(#arr)"/>
<path id="fl-social-stress" class="flow-line" d="M510 280 L355 285" fill="none" stroke="#993C1D" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)" stroke-dasharray="3 3"/>
<path id="fl-cultural-individual" class="flow-line" d="M570 388 L428 454" fill="none" stroke="#993C1D" stroke-width="1.4" opacity="0.55" marker-end="url(#arr)"/>
<path id="fl-cultural-stress" class="flow-line" d="M545 365 L340 295" fill="none" stroke="#993C1D" stroke-width="1.2" opacity="0.4" marker-end="url(#arr)"/>
<path id="fl-temporal-stress" class="flow-line" d="M85 340 L248 292" fill="none" stroke="#185FA5" stroke-width="1.3" opacity="0.5" marker-end="url(#arr)"/>
<path id="fl-temporal-individual" class="flow-line" d="M108 368 L315 455" fill="none" stroke="#185FA5" stroke-width="1.2" opacity="0.45" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-structure-digital" class="flow-line" d="M250 95 L460 148" fill="none" stroke="#7F77DD" stroke-width="1.1" opacity="0.35" marker-end="url(#arr)" stroke-dasharray="4 2"/>
<path id="fl-structure-cultural" class="flow-line" d="M245 110 L545 340" fill="none" stroke="#7F77DD" stroke-width="1" opacity="0.3" marker-end="url(#arr)" stroke-dasharray="3 4"/>
<!-- STRUCTURE -->
<g class="node-btn" id="node-structure" onclick="selectNode('structure',null)" tabindex="0" role="button" aria-label="Structure domain">
<rect x="140" y="68" width="110" height="48" rx="8" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#3C3489" x="195" y="88" text-anchor="middle" dominant-baseline="central">Structure</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#534AB7" x="195" y="106" text-anchor="middle" dominant-baseline="central">rules of the game</text>
</g>
<!-- INEQUITY -->
<g class="node-btn" id="node-inequity" onclick="selectNode('inequity',null)" tabindex="0" role="button" aria-label="Inequity domain">
<rect x="300" y="148" width="110" height="48" rx="8" fill="#FAECE7" stroke="#993C1D" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#4A1B0C" x="355" y="168" text-anchor="middle" dominant-baseline="central">Inequity</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#993C1D" x="355" y="186" text-anchor="middle" dominant-baseline="central">systemic tilt</text>
</g>
<!-- DETERMINANTS -->
<g class="node-btn" id="node-determinants" onclick="selectNode('determinants',null)" tabindex="0" role="button" aria-label="Determinants domain">
<rect x="120" y="148" width="120" height="48" rx="8" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#26215C" x="180" y="168" text-anchor="middle" dominant-baseline="central">Determinants</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#534AB7" x="180" y="186" text-anchor="middle" dominant-baseline="central">foundation of stability</text>
</g>
<!-- DIGITAL -->
<g class="node-btn" id="node-digital" onclick="selectNode('digital',null)" tabindex="0" role="button" aria-label="Digital domain">
<rect x="448" y="148" width="120" height="48" rx="8" fill="#E6F1FB" stroke="#185FA5" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#042C53" x="508" y="168" text-anchor="middle" dominant-baseline="central">Digital</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#185FA5" x="508" y="186" text-anchor="middle" dominant-baseline="central">virtual environment</text>
</g>
<!-- ENVIRONMENT -->
<g class="node-btn" id="node-environment" onclick="selectNode('environment',null)" tabindex="0" role="button" aria-label="Environment domain">
<rect x="58" y="248" width="120" height="48" rx="8" fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#04342C" x="118" y="268" text-anchor="middle" dominant-baseline="central">Environment</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#0F6E56" x="118" y="286" text-anchor="middle" dominant-baseline="central">external site</text>
</g>
<!-- STRESS -->
<g class="node-btn" id="node-stress" onclick="selectNode('stress',null)" tabindex="0" role="button" aria-label="Stress load domain">
<rect x="238" y="248" width="120" height="58" rx="8" fill="#FAEEDA" stroke="#854F0B" stroke-width="1"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#412402" x="298" y="270" text-anchor="middle" dominant-baseline="central">Stress load</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#854F0B" x="298" y="290" text-anchor="middle" dominant-baseline="central">allostatic wear</text>
</g>
<!-- SOCIAL -->
<g class="node-btn" id="node-social" onclick="selectNode('social',null)" tabindex="0" role="button" aria-label="Social capital domain">
<rect x="490" y="260" width="130" height="48" rx="8" fill="#FAECE7" stroke="#993C1D" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#4A1B0C" x="555" y="278" text-anchor="middle" dominant-baseline="central">Social capital</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#993C1D" x="555" y="296" text-anchor="middle" dominant-baseline="central">connective tissue</text>
</g>
<!-- TEMPORAL -->
<g class="node-btn" id="node-temporal" onclick="selectNode('temporal',null)" tabindex="0" role="button" aria-label="Temporal domain">
<rect x="32" y="330" width="110" height="48" rx="8" fill="#E6F1FB" stroke="#185FA5" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#042C53" x="87" y="350" text-anchor="middle" dominant-baseline="central">Temporal</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#185FA5" x="87" y="368" text-anchor="middle" dominant-baseline="central">time poverty</text>
</g>
<!-- BIOLOGY -->
<g class="node-btn" id="node-biology" onclick="selectNode('biology',null)" tabindex="0" role="button" aria-label="Biology domain">
<rect x="170" y="358" width="110" height="48" rx="8" fill="#FAEEDA" stroke="#854F0B" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#412402" x="225" y="378" text-anchor="middle" dominant-baseline="central">Biology</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#854F0B" x="225" y="396" text-anchor="middle" dominant-baseline="central">embedded material</text>
</g>
<!-- CULTURAL -->
<g class="node-btn" id="node-cultural" onclick="selectNode('cultural',null)" tabindex="0" role="button" aria-label="Cultural domain">
<rect x="510" y="358" width="120" height="48" rx="8" fill="#FAECE7" stroke="#993C1D" stroke-width="0.5"/>
<text font-family="'DM Sans',sans-serif" font-size="13" font-weight="500" fill="#4A1B0C" x="570" y="378" text-anchor="middle" dominant-baseline="central">Cultural</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#993C1D" x="570" y="396" text-anchor="middle" dominant-baseline="central">narrative scripts</text>
</g>
<!-- INDIVIDUAL -->
<g class="node-btn" id="node-individual" onclick="selectNode('individual',null)" tabindex="0" role="button" aria-label="The Individual — convergence point">
<ellipse cx="370" cy="460" rx="82" ry="34" fill="#fff" stroke="#1a1814" stroke-width="1.5"/>
<text font-family="'DM Serif Display',serif" font-size="14" font-weight="400" fill="#1a1814" x="370" y="453" text-anchor="middle" dominant-baseline="central">The Individual</text>
<text font-family="'DM Sans',sans-serif" font-size="11" fill="#5a5650" x="370" y="471" text-anchor="middle" dominant-baseline="central">mind · body · wellbeing</text>
</g>
</svg>
</div>
<div class="ia-panel" id="info-panel">
Click any domain button or node in the diagram to trace how it shapes the individual's mental health. Solid arrows show direct effects; dashed arrows show mediated pathways.
</div>
<footer class="ia-footer">
<p>Solid arrows indicate direct, well-established causal pathways. Dashed arrows indicate mediated or probabilistic effects. Arrow thickness reflects relative magnitude of influence.</p>
<p>Based on the social determinants of mental health framework. The individual is a convergence point — not a cause. Structural intervention has the highest upstream leverage.</p>
</footer>
</div>
<script>
const nodeInfo = {
all: { label: null, text: 'Click any domain button above or a node in the diagram to trace its causal pathway. Solid arrows show direct, strong effects. Dashed arrows show mediated or indirect effects. Arrow thickness reflects magnitude of influence.', chain: null },
determinants: { label: 'Determinants → Individual', text: '<strong>Determinants (housing, income, food security)</strong> form the load-bearing foundation. Cracked foundations directly amplify stress load and constrain which environments a person can inhabit — pushing them toward high-noise, low-green, high-crime sites that then embed in the body.', chain: 'Structure / Inequity → Determinants → Environment + Stress → Biology → Individual' },
structure: { label: 'Structure → Everything downstream', text: '<strong>Structure</strong> is upstream of almost everything else: legal systems, redlining, school-funding models, and digital infrastructure policy all set the initial conditions that determine who gets strong determinants and who doesn\'t — before the person is even born.', chain: 'Structure → Inequity → Determinants → Environment → Stress → Biology → Individual' },
inequity: { label: 'Inequity → Tilt on every layer', text: '<strong>Inequity</strong> doesn\'t act on one layer — it tilts every layer simultaneously. It reduces determinants, concentrates environmental harm, amplifies cultural stigma, and blocks access to social capital. The same stress input produces a worse mental health outcome in an inequitably positioned person because the entire architecture is slanted.', chain: 'Inequity → Determinants + Environment + Stress + Cultural → Individual' },
environment: { label: 'Environment → Biology → Individual', text: '<strong>Environment</strong> is the external site the nervous system must inhabit. Urban heat, noise, lack of green space, and poor transit keep the hypothalamic–pituitary–adrenal axis in low-level activation, progressively wearing down regulatory capacity through biological embedding.', chain: 'Inequity → Environment → Chronic stress activation → Biology (HPA axis, cortisol) → Individual' },
biology: { label: 'Biology → Individual (the mechanism)', text: '<strong>Biology</strong> is where the social becomes physical. Chronic stress sculpts the developing brain — over-building amygdala circuits (threat detection) at the expense of prefrontal circuits (regulation). Epigenetic changes can transmit this altered landscape across generations, making biology both an endpoint and a new starting condition.', chain: 'Stress load → Allostatic wear → Cortisol dysregulation → Neural sculpting → Individual' },
stress: { label: 'Stress load — the convergence point', text: '<strong>Stress</strong> is where all upstream forces accumulate. Allostatic load is the biological "tab" run up by chronic activation — when the tab exceeds the individual\'s structural integrity (determined by all other factors), a mental health crisis occurs. Social capital is the one force that reduces this load from the right.', chain: 'Determinants + Environment + Inequity + Cultural + Temporal + Digital → Stress → Biology → Individual' },
digital: { label: 'Digital → Stress + Access', text: '<strong>Digital architecture</strong> operates on two channels simultaneously: algorithmic content (social comparison, echo chambers) feeds the stress load via anxiety and inadequacy; while internet access itself functions as a structural determinant — without it, telehealth, employment, and social connection are all cut off.', chain: 'Structure (infra policy) → Digital access → Stress (algorithms) + Determinants (telehealth) → Individual' },
social: { label: 'Social capital → Stress buffer', text: '<strong>Social capital</strong> is one of the few forces in this architecture that reduces stress rather than adding to it. A high-trust community acts as a shock absorber against individual trauma. Its absence (relational poverty) is as physically harmful as smoking 15 cigarettes a day.', chain: 'Social capital → ↓ Stress load → ↓ Allostatic wear → Individual' },
cultural: { label: 'Cultural → Stigma → Delayed care', text: '<strong>Cultural architecture</strong> writes the invisible scripts people use to interpret their own symptoms. If the cultural narrative frames mental distress as moral failure, individuals suppress symptoms and avoid care — extending the duration of harm. Intergenerational trauma operates here too.', chain: 'Structure (narrative power) → Cultural scripts → Stigma → Delayed help-seeking + Stress → Individual' },
temporal: { label: 'Temporal → Cognitive bandwidth depletion', text: '<strong>Temporal poverty</strong> — the invisible lack of time — depletes the cognitive bandwidth needed for self-care, sleep regulation, and parenting. Low-income individuals forced into multi-job schedules and long transit commutes arrive at each day with the fewest mental resources to process its stressors.', chain: 'Inequity → Multi-job schedules + transit burden → Time poverty → Zero cognitive bandwidth → ↑ Stress → Individual' },
individual: { label: 'The Individual — convergence of all forces', text: '<strong>The individual\'s mental health</strong> is the final expression of every upstream force in this architecture. It is not the cause — it is the output. Addressing mental health only at this level (therapy, medication) is like repainting a structurally compromised building. Select any domain to see which levers would most alter the outcome.', chain: 'Structure → Inequity → Determinants → Environment + Digital + Temporal → Stress ← Social capital → Biology → Individual' }
};
const connections = {
structure: ['fl-structure-determinants','fl-structure-inequity','fl-structure-digital','fl-structure-cultural'],
determinants: ['fl-structure-determinants','fl-inequity-determinants','fl-determinants-environment','fl-determinants-stress'],
inequity: ['fl-structure-inequity','fl-inequity-determinants','fl-inequity-environment','fl-inequity-stress'],
environment: ['fl-determinants-environment','fl-inequity-environment','fl-environment-biology','fl-environment-stress'],
stress: ['fl-determinants-stress','fl-inequity-stress','fl-environment-stress','fl-stress-biology','fl-stress-individual','fl-digital-stress','fl-social-stress','fl-cultural-stress','fl-temporal-stress'],
biology: ['fl-environment-biology','fl-stress-biology','fl-biology-individual'],
digital: ['fl-structure-digital','fl-digital-stress','fl-digital-individual'],
social: ['fl-social-individual','fl-social-stress'],
cultural: ['fl-structure-cultural','fl-cultural-individual','fl-cultural-stress'],
temporal: ['fl-temporal-stress','fl-temporal-individual'],
individual: ['fl-biology-individual','fl-stress-individual','fl-digital-individual','fl-social-individual','fl-cultural-individual','fl-temporal-individual']
};
function selectNode(id, btn) {
document.querySelectorAll('.ctrl-btn').forEach(b => b.classList.remove('active'));
if (btn) {
btn.classList.add('active');
} else {
const found = document.querySelector('.ctrl-btn[data-node="'+id+'"]');
if (found) found.classList.add('active');
else document.querySelector('.ctrl-btn[data-node="all"]').classList.add('active');
}
const info = nodeInfo[id] || nodeInfo['all'];
const panel = document.getElementById('info-panel');
if (info.label) {
panel.innerHTML = '<strong>'+info.label+'</strong>'+info.text+(info.chain ? '<div class="chain">pathway: <span>'+info.chain+'</span></div>' : '');
} else {
panel.innerHTML = info.text;
}
const allLines = document.querySelectorAll('.flow-line');
const allNodes = document.querySelectorAll('.node-btn');
if (id === 'all') {
allLines.forEach(l => { l.classList.remove('dimmed','active-flow'); });
allNodes.forEach(n => { n.classList.remove('dimmed','highlighted'); });
return;
}
const active = new Set(connections[id] || []);
allLines.forEach(l => {
if (active.has(l.id)) { l.classList.remove('dimmed'); l.classList.add('active-flow'); }
else { l.classList.remove('active-flow'); l.classList.add('dimmed'); }
});
allNodes.forEach(n => {
if (n.id === 'node-'+id) {
n.classList.remove('dimmed'); n.classList.add('highlighted');
} else {
const nid = n.id.replace('node-','');
const overlaps = (connections[nid] || []).some(c => active.has(c));
if (overlaps) { n.classList.remove('dimmed','highlighted'); }
else { n.classList.add('dimmed'); n.classList.remove('highlighted'); }
}
});
}
// Keyboard accessibility for SVG nodes
document.querySelectorAll('.node-btn').forEach(function(el) {
el.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
var id = el.id.replace('node-','');
selectNode(id, null);
}
});
});
</script>
</body>
</html>