mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reframe drama/empowerment model (not a workshop) + separate triangles + add IP attribution + above/below-the-line graphic

Browse Source 
- Reframe: card tags Workshop/Flagship -> 'A shared lens' / 'The core shift';
  diagram intro now 'not a workshop you sit through - a lens for the room'.
- Separate the two triangles: drama points DOWN (Persecutor/Rescuer/Victim),
  empowerment points UP (Creator/Challenger/Coach), with a 'the shift' arrow +
  role-mapping legend (Victim->Creator, Persecutor->Challenger, Rescuer->Coach).
- Proper IP attribution: Karpman (1968) for the Drama Triangle; David Emerald
  (TED*) for the Empowerment Dynamic; Conscious Leadership Group for above/below.
- New 'above / below the line' teaching graphic with its own section + credit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 14:20:35 -07:00
parent 4d42fbf43f
commit 1ab78f0c76
2 changed files with 68 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+60 -30
View File
@@ -115,13 +115,13 @@
<p class="section-intro">The kind you can use in a hallway conversation, not just a workshop.</p> <p class="section-intro">The kind you can use in a hallway conversation, not just a workshop.</p>
<div class="cards"> <div class="cards">
<article class="card"> <article class="card">
<p class="card-tag">Workshop · half-day</p> <p class="card-tag">A shared lens</p>
<h3>A shared language</h3> <h3>A shared language</h3>
<p>In any tense moment, you're either <strong>above the line</strong> — open, curious, willing to learn — or <strong>below it</strong> — closed, defensive, out to be right. Once a team can name where they are, the hard conversations get easier overnight.</p> <p>In any tense moment, you're either <strong>above the line</strong> — open, curious, willing to learn — or <strong>below it</strong> — closed, defensive, out to be right. Once a team can name where they are, the hard conversations get easier overnight.</p>
<p class="outcome">A shared, plain-spoken way to handle friction.</p> <p class="outcome">A shared, plain-spoken way to handle friction.</p>
</article> </article>
<article class="card feature"> <article class="card feature">
<p class="card-tag">Flagship program</p> <p class="card-tag">The core shift</p>
<h3>Breaking the blame game</h3> <h3>Breaking the blame game</h3>
<p>Every shop runs the drama triangle: someone stuck as the <strong>victim</strong>, someone <strong>persecuting</strong> and blaming, someone <strong>rescuing</strong> and burning out. It kills change. We move people into the empowered version — a <strong>creator</strong> who owns the outcome, a <strong>challenger</strong> who calls it straight, a <strong>coach</strong> who builds others up.</p> <p>Every shop runs the drama triangle: someone stuck as the <strong>victim</strong>, someone <strong>persecuting</strong> and blaming, someone <strong>rescuing</strong> and burning out. It kills change. We move people into the empowered version — a <strong>creator</strong> who owns the outcome, a <strong>challenger</strong> who calls it straight, a <strong>coach</strong> who builds others up.</p>
<p class="outcome">Stop the blame cycles that stall every change.</p> <p class="outcome">Stop the blame cycles that stall every change.</p>
@@ -139,40 +139,70 @@
<section class="band light diagram" data-bg="light"> <section class="band light diagram" data-bg="light">
<div class="wrap"> <div class="wrap">
<p class="eyebrow">From the drama triangle to the empowerment dynamic</p> <p class="eyebrow">Where it starts</p>
<h2>Above the line, or <em>below it?</em></h2>
<p class="section-intro">Every hard conversation starts here. In any tense moment you're either open and curious &#8212; or closed and out to be right. Naming where you're standing is half the work.</p>
<svg class="line-graphic" viewBox="0 0 720 360" role="img" aria-labelledby="line-title line-desc">
<title id="line-title">Above and below the line</title>
<desc id="line-desc">A horizontal line divides two states. Above the line: open, curious, willing to learn &#8212; a &#8220;by me&#8221; stance. Below the line: closed, defensive, out to be right &#8212; a &#8220;to me&#8221; stance.</desc>
<rect x="0" y="0" width="720" height="180" fill="rgba(232,155,28,0.05)"/>
<rect x="0" y="180" width="720" height="180" fill="rgba(15,23,41,0.04)"/>
<path d="M345,52 L360,38 L375,52" fill="none" stroke="#c47f12" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<text x="360" y="92" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="19" font-weight="700" letter-spacing="2" fill="#c47f12">ABOVE THE LINE</text>
<text x="360" y="119" text-anchor="middle" font-family="'Lora',Georgia,serif" font-size="15" fill="#4a5468">Open &#183; curious &#183; willing to learn</text>
<text x="360" y="143" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="12.5" font-style="italic" fill="#9a8048">&#8220;by me&#8221; &#8212; I can shape what happens here</text>
<line x1="48" y1="180" x2="672" y2="180" stroke="#0f1729" stroke-width="2"/>
<rect x="316" y="168" width="88" height="24" fill="#f7f4ef"/>
<text x="360" y="184" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="11" letter-spacing="3" fill="#0f1729">THE LINE</text>
<text x="360" y="246" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="19" font-weight="700" letter-spacing="2" fill="#5b626d">BELOW THE LINE</text>
<text x="360" y="273" text-anchor="middle" font-family="'Lora',Georgia,serif" font-size="15" fill="#4a5468">Closed &#183; defensive &#183; out to be right</text>
<text x="360" y="297" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="12.5" font-style="italic" fill="#6b7280">&#8220;to me&#8221; &#8212; this is happening to me</text>
<path d="M345,322 L360,336 L375,322" fill="none" stroke="#5b626d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="diagram-credit">The &#8220;above / below the line&#8221; model is from The Conscious Leadership Group &#8212; Jim Dethmer, Diana Chapman &amp; Kaley Warner Klemp, <em>The 15 Commitments of Conscious Leadership</em> (2014).</p>
</div>
</section>
<section class="band light diagram" data-bg="light">
<div class="wrap">
<p class="eyebrow">The pattern underneath</p>
<h2>From drama to <em>empowerment.</em></h2> <h2>From drama to <em>empowerment.</em></h2>
<svg class="triangles" viewBox="0 0 760 540" role="img" aria-labelledby="tri-title tri-desc"> <p class="section-intro">Not a workshop you sit through &#8212; a lens for what's happening in the room. Under pressure, people fall into three roles that stall change. The work is moving them into the three that carry it.</p>
<svg class="triangles" viewBox="0 0 760 330" role="img" aria-labelledby="tri-title tri-desc">
<title id="tri-title">From the drama triangle to the empowerment dynamic</title> <title id="tri-title">From the drama triangle to the empowerment dynamic</title>
<desc id="tri-desc">Two interlocking triangles. The grey downward triangle is the drama triangle: Persecutor (top left), Rescuer (top right) and Victim (bottom). The amber upward triangle is the empowerment dynamic: Creator (top), Challenger (bottom left) and Coach (bottom right). Dashed arrows show each drama role shifting to its empowered counterpart: Victim to Creator, Persecutor to Challenger, Rescuer to Coach.</desc> <desc id="tri-desc">Two separate triangles. On the left the drama triangle points down: Persecutor and Rescuer at the top corners, Victim at the bottom point. On the right the empowerment dynamic points up: Creator at the top point, Challenger and Coach at the bottom corners. An arrow between them marks the shift: Victim becomes Creator, Persecutor becomes Challenger, Rescuer becomes Coach.</desc>
<polygon points="233,205 527,205 380,460" fill="rgba(107,114,128,0.42)" stroke="#6b7280" stroke-width="1.5"/> <text x="220" y="40" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="12" font-weight="700" letter-spacing="2" fill="#5b626d">THE DRAMA TRIANGLE</text>
<polygon points="380,120 233,375 527,375" fill="rgba(232,155,28,0.5)" stroke="#c47f12" stroke-width="1.5"/> <text x="540" y="40" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="12" font-weight="700" letter-spacing="2" fill="#c47f12">THE EMPOWERMENT DYNAMIC</text>
<g stroke="#5b626d" stroke-width="1.4" fill="none" stroke-dasharray="5 5"> <polygon points="140,105 300,105 220,270" fill="rgba(107,114,128,0.16)" stroke="#6b7280" stroke-width="1.5"/>
<line x1="233" y1="230" x2="233" y2="350"/> <g fill="#6b7280"><circle cx="140" cy="105" r="4"/><circle cx="300" cy="105" r="4"/><circle cx="220" cy="270" r="4"/></g>
<line x1="527" y1="230" x2="527" y2="350"/> <polygon points="540,105 460,270 620,270" fill="rgba(232,155,28,0.18)" stroke="#c47f12" stroke-width="1.5"/>
<line x1="380" y1="442" x2="380" y2="152"/> <g fill="#c47f12"><circle cx="540" cy="105" r="4"/><circle cx="460" cy="270" r="4"/><circle cx="620" cy="270" r="4"/></g>
<g stroke="#0f1729" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="332" y1="188" x2="424" y2="188"/>
<path d="M414,180 L426,188 L414,196"/>
</g> </g>
<g stroke="#5b626d" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"> <text x="378" y="171" text-anchor="middle" font-family="'DM Sans',sans-serif" font-size="10.5" font-weight="700" letter-spacing="2" fill="#c47f12">THE SHIFT</text>
<path d="M228,342 L233,350 L238,342"/>
<path d="M522,342 L527,350 L532,342"/>
<path d="M375,160 L380,152 L385,160"/>
</g>
<g fill="#6b7280"><circle cx="233" cy="205" r="4"/><circle cx="527" cy="205" r="4"/><circle cx="380" cy="460" r="4"/></g>
<g fill="#c47f12"><circle cx="380" cy="120" r="4"/><circle cx="233" cy="375" r="4"/><circle cx="527" cy="375" r="4"/></g>
<g font-family="'DM Sans',sans-serif"> <g font-family="'DM Sans',sans-serif">
<text x="380" y="86" text-anchor="middle" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">CREATOR</text> <text x="140" y="84" text-anchor="middle" fill="#4a5468" font-size="13" font-weight="700" letter-spacing="0.5">PERSECUTOR</text>
<text x="380" y="103" text-anchor="middle" fill="#6b7280" font-size="11">responsible · visionary</text> <text x="140" y="98" text-anchor="middle" fill="#6b7280" font-size="10.5">blaming &#183; &#8220;I'm right&#8221;</text>
<text x="212" y="395" text-anchor="end" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">CHALLENGER</text> <text x="300" y="84" text-anchor="middle" fill="#4a5468" font-size="13" font-weight="700" letter-spacing="0.5">RESCUER</text>
<text x="212" y="412" text-anchor="end" fill="#6b7280" font-size="11">accountable · assertive</text> <text x="300" y="98" text-anchor="middle" fill="#6b7280" font-size="10.5">rescuing &#183; &#8220;I'm good&#8221;</text>
<text x="548" y="395" text-anchor="start" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">COACH</text> <text x="220" y="292" text-anchor="middle" fill="#4a5468" font-size="13" font-weight="700" letter-spacing="0.5">VICTIM</text>
<text x="548" y="412" text-anchor="start" fill="#6b7280" font-size="11">supportive · encouraging</text> <text x="220" y="306" text-anchor="middle" fill="#6b7280" font-size="10.5">powerless &#183; &#8220;I'm blameless&#8221;</text>
<text x="212" y="198" text-anchor="end" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">PERSECUTOR</text> <text x="540" y="84" text-anchor="middle" fill="#c47f12" font-size="13" font-weight="700" letter-spacing="0.5">CREATOR</text>
<text x="212" y="215" text-anchor="end" fill="#6b7280" font-size="11">blaming · &#8220;I'm right&#8221;</text> <text x="540" y="98" text-anchor="middle" fill="#6b7280" font-size="10.5">responsible &#183; visionary</text>
<text x="548" y="198" text-anchor="start" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">RESCUER</text> <text x="460" y="292" text-anchor="middle" fill="#c47f12" font-size="13" font-weight="700" letter-spacing="0.5">CHALLENGER</text>
<text x="548" y="215" text-anchor="start" fill="#6b7280" font-size="11">fixing others · &#8220;I'm good&#8221;</text> <text x="460" y="306" text-anchor="middle" fill="#6b7280" font-size="10.5">accountable &#183; assertive</text>
<text x="380" y="492" text-anchor="middle" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">VICTIM</text> <text x="620" y="292" text-anchor="middle" fill="#c47f12" font-size="13" font-weight="700" letter-spacing="0.5">COACH</text>
<text x="380" y="509" text-anchor="middle" fill="#6b7280" font-size="11">powerless · &#8220;I'm blameless&#8221;</text> <text x="620" y="306" text-anchor="middle" fill="#6b7280" font-size="10.5">supportive &#183; encouraging</text>
</g> </g>
</svg> </svg>
<ul class="shift-legend" aria-label="How each role shifts">
<li><span class="from">Victim</span> <span class="arr">&#8594;</span> <span class="to">Creator</span></li>
<li><span class="from">Persecutor</span> <span class="arr">&#8594;</span> <span class="to">Challenger</span></li>
<li><span class="from">Rescuer</span> <span class="arr">&#8594;</span> <span class="to">Coach</span></li>
</ul>
<p class="diagram-credit">The Drama Triangle is the work of Dr.&#160;Stephen Karpman (1968). The Empowerment Dynamic (TED*) is the work of David Emerald.</p>
</div> </div>
</section> </section>
style.css
+8
View File
@@ -173,6 +173,14 @@ a.tel { text-decoration: none; }
/* Diagram */ /* Diagram */
.triangles { display: block; width: 100%; max-width: 720px; height: auto; margin: 44px auto 0; } .triangles { display: block; width: 100%; max-width: 720px; height: auto; margin: 44px auto 0; }
.line-graphic { display: block; width: 100%; max-width: 560px; height: auto; margin: 40px auto 0; }
.shift-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin: 28px 0 0; padding: 0; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; letter-spacing: 0.02em; }
.shift-legend li { color: var(--ink-soft); }
.shift-legend .from { color: #6b7280; }
.shift-legend .arr { color: var(--ink-soft); margin: 0 0.2em; }
.shift-legend .to { color: var(--amber-deep); font-weight: 500; }
.diagram-credit { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; line-height: 1.6; color: #8a8276; text-align: center; max-width: 52em; margin: 22px auto 0; }
.diagram-credit em { font-style: italic; }
/* Who — hairline-separated rows */ /* Who — hairline-separated rows */
.people { margin: 44px 0; border-top: 1px solid var(--line); } .people { margin: 44px 0; border-top: 1px solid var(--line); }